/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-1aiiai4pg1] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-1aiiai4pg1] {
    flex: 1;
}

.sidebar[b-1aiiai4pg1] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-1aiiai4pg1] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-1aiiai4pg1]  a, .top-row[b-1aiiai4pg1]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-1aiiai4pg1]  a:hover, .top-row[b-1aiiai4pg1]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-1aiiai4pg1]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-1aiiai4pg1] {
        justify-content: space-between;
    }

    .top-row[b-1aiiai4pg1]  a, .top-row[b-1aiiai4pg1]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-1aiiai4pg1] {
        flex-direction: row;
    }

    .sidebar[b-1aiiai4pg1] {
        width: 250px;
        height: 400vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-1aiiai4pg1] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-1aiiai4pg1]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-1aiiai4pg1], article[b-1aiiai4pg1] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-1aiiai4pg1] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-1aiiai4pg1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Remove underline from all nav links in the flyout */
/* Dropdown arrow styling */
/* ===== REMOVE ALL UNDERLINES ===== */
/* Target Blazor's NavLink component directly */
[b-e5oq24etd1] a {
    text-decoration: none !important;
}

/* Target all navigation links */
.nav-item[b-e5oq24etd1]  a,
.nav-subitem[b-e5oq24etd1]  a,
.nav-item[b-e5oq24etd1]  .nav-link,
.nav-item.dropdown .dropdown-header[b-e5oq24etd1] {
    text-decoration: none !important;
}

/* Remove underline from the span inside NavLink */
.nav-item[b-e5oq24etd1]  a span,
.nav-subitem[b-e5oq24etd1]  a span {
    text-decoration: none !important;
}

/* Active states */
.nav-item[b-e5oq24etd1]  a.active,
.nav-subitem[b-e5oq24etd1]  a.active {
    text-decoration: none !important;
}

/* Hover states */
.nav-item[b-e5oq24etd1]  a:hover,
.nav-subitem[b-e5oq24etd1]  a:hover {
    text-decoration: none !important;
}


/* ===== DROPDOWN STYLES ===== */
.nav-item.dropdown[b-e5oq24etd1] {
    position: relative;
    cursor: pointer;
}

.nav-item.dropdown .dropdown-header[b-e5oq24etd1] {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-item.dropdown .dropdown-content[b-e5oq24etd1] {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    min-width: 200px;
    z-index: 10;
    flex-direction: column;
    padding: 5px;
}

.nav-item.dropdown:hover .dropdown-content[b-e5oq24etd1] {
    display: flex;
}

.nav-subitem[b-e5oq24etd1]  a {
    padding: 1rem 2rem;
    color: #ff9900 !important;
    display: flex;
    align-items: center;
    text-decoration: none !important;
    width: 100%;
}

.nav-subitem[b-e5oq24etd1]  a:hover {
    background: gold;
    text-decoration: none !important;
}

.nav-subitem[b-e5oq24etd1]  a:hover span {
    color: #ffffff !important;
}

/* Remove all underlines from navigation items */
.nav-item[b-e5oq24etd1]  .nav-link,
.nav-subitem[b-e5oq24etd1],
.nav-item.dropdown .dropdown-header[b-e5oq24etd1],
.nav-item[b-e5oq24etd1] {
    text-decoration: none !important;
}

/* Specifically for NavLink components when active */
.nav-item[b-e5oq24etd1]  a.active {
    text-decoration: none !important;
}
.nav-subitem[b-e5oq24etd1] {
    text-decoration: none !important;
    padding: 50px;

}

/* Change text color for flyout menu items */
.nav-subitem span[b-e5oq24etd1] {
    color: aqua; /* Change to your desired color */
}

/* Alternatively, change color for all text in subitem */
.nav-subitem[b-e5oq24etd1] {
    color: aqua !important;
}

/* For hover state */
.nav-subitem:hover span[b-e5oq24etd1] {
    color: wheat; /* Change hover text color */
}

.navbar-toggler[b-e5oq24etd1] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);

}


.navbar-brand[b-e5oq24etd1] {
    font-size: 1.1rem;
}

.bi[b-e5oq24etd1] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.nav-item[b-e5oq24etd1] {
    font-size: 1rem;
    text-decoration: none;
    padding-left: 2.4rem;
}
.submenu-arrow[b-e5oq24etd1] {
    margin-left: 10px;
    font-size: 0.85rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

/* Rotate arrow when dropdown is hovered */
.nav-item.dropdown:hover .submenu-arrow[b-e5oq24etd1] {
    transform: rotate(90deg);
}


.nav-item.dropdown.active-parent[b-e5oq24etd1]  {
    background-color: wheat;
}

.nav-item.dropdown.active-parent .dropdown-header span[b-e5oq24etd1],
.nav-item.dropdown.active-parent .dropdown-header i[b-e5oq24etd1] {
    color: #4895ef !important;
}


.nav-item[b-e5oq24etd1]  .nav-link {
    color: #d7d7d7;
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
}

.nav-item[b-e5oq24etd1]  a.active {
    background-color: wheat;
    color: #4895ef !important;
}

.nav-item[b-e5oq24etd1]  a.active span {
    color: #4895ef !important;
}

.nav-item[b-e5oq24etd1]  a.active i {
    color: #4895ef !important;
}


.nav-scrollable[b-e5oq24etd1] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-e5oq24etd1] {
    display: block;
}
/* ***************************************************** */
.nav-item.dropdown[b-e5oq24etd1] {
    position: relative;
    cursor: pointer;
}

/* Header part of dropdown */

.nav-item.dropdown .dropdown-header[b-e5oq24etd1] {
    display: flex;
    align-items: center;
    height: 3rem;
}

/* Hidden by default */
.nav-item.dropdown .dropdown-content[b-e5oq24etd1] {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); /* sidebar color */
    min-width: 200px;
    z-index: 10;
    flex-direction: column;
    text-decoration: none;
}

/* Show on hover */
.nav-item.dropdown:hover .dropdown-content[b-e5oq24etd1] {
    display: flex;
}

/* Style submenu items */
.nav-subitem[b-e5oq24etd1] {
    padding: 0.5rem 1rem;
    color: paleturquoise;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav-subitem:hover[b-e5oq24etd1] {
    background: gold;
}
/* ***************************************************** */

@media (min-width: 641px) {
    .navbar-toggler[b-e5oq24etd1] {
        display: none;
    }

    .nav-scrollable[b-e5oq24etd1] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/Admins.razor.rz.scp.css */
/* Admins Container */
.admins-container[b-b6vi9wipl3] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-b6vi9wipl3] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-b6vi9wipl3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-b6vi9wipl3] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-b6vi9wipl3] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-b6vi9wipl3] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-create[b-b6vi9wipl3] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-b6vi9wipl3] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Admins Grid */
.admins-grid[b-b6vi9wipl3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
}

/* Admin Card */
.admin-card[b-b6vi9wipl3] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.admin-card:hover[b-b6vi9wipl3] {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.admin-card.editing[b-b6vi9wipl3] {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

/* Card Header */
.card-header[b-b6vi9wipl3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.admin-info[b-b6vi9wipl3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.id-badge[b-b6vi9wipl3] {
    font-size: 14px;
    font-weight: 700;
    color: #ffd700;
}

.username[b-b6vi9wipl3] {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.card-actions[b-b6vi9wipl3] {
    display: flex;
    gap: 8px;
}

.action-icon[b-b6vi9wipl3] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.action-icon.edit[b-b6vi9wipl3] { color: #ffd700; }
.action-icon.delete[b-b6vi9wipl3] { color: #ff6b6b; }

.action-icon:hover[b-b6vi9wipl3] {
    transform: scale(1.05);
    background: rgba(255, 215, 0, 0.15);
}

/* Card Body */
.card-body[b-b6vi9wipl3] {
    padding: 20px;
}

.admin-details[b-b6vi9wipl3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.detail-item[b-b6vi9wipl3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.detail-icon[b-b6vi9wipl3] {
    font-size: 18px;
}

.detail-label[b-b6vi9wipl3] {
    color: #a0a0b0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 80px;
}

.detail-value[b-b6vi9wipl3] {
    color: white;
    font-weight: 500;
}

/* Role Badge */
.role-badge[b-b6vi9wipl3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.role-badge.super-admin[b-b6vi9wipl3] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.1));
    color: #ffd700;
}

.role-badge.admin[b-b6vi9wipl3] {
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
}

.role-badge.designer[b-b6vi9wipl3] {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.role-badge.support[b-b6vi9wipl3] {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
}

.role-badge.data-analyser[b-b6vi9wipl3] {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.role-badge.qa[b-b6vi9wipl3] {
    background: rgba(233, 30, 99, 0.15);
    color: #e91e63;
}

/* Edit Mode */
.edit-header[b-b6vi9wipl3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.08));
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.edit-icon[b-b6vi9wipl3] {
    font-size: 20px;
}

.edit-header h3[b-b6vi9wipl3] {
    flex: 1;
    margin: 0;
    color: #ffd700;
    font-size: 16px;
}

.close-edit[b-b6vi9wipl3] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.edit-body[b-b6vi9wipl3] {
    padding: 20px;
}

.form-field[b-b6vi9wipl3] {
    margin-bottom: 16px;
}

.form-field label[b-b6vi9wipl3] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.modern-input[b-b6vi9wipl3] {
    width: 80%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

.modern-input:focus[b-b6vi9wipl3] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
}

.modern-select[b-b6vi9wipl3] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

.error-text[b-b6vi9wipl3] {
    color: #ff6b6b;
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

.edit-actions[b-b6vi9wipl3] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.btn-save[b-b6vi9wipl3], .btn-cancel[b-b6vi9wipl3] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save[b-b6vi9wipl3] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    color: white;
}

.btn-save:hover[b-b6vi9wipl3] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-cancel[b-b6vi9wipl3] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a0a0b0;
}

.btn-cancel:hover[b-b6vi9wipl3] {
    background: rgba(108, 117, 125, 0.4);
}

/* Modal */
.modal-overlay[b-b6vi9wipl3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-b6vi9wipl3] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 500px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.confirm-modal[b-b6vi9wipl3] {
    width: 380px;
}

.modal-header[b-b6vi9wipl3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-b6vi9wipl3] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-b6vi9wipl3] {
    font-size: 24px;
}

.modal-header h3[b-b6vi9wipl3] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-b6vi9wipl3] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-b6vi9wipl3] {
    color: aqua;
    padding: 24px;
}

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

.modal-footer[b-b6vi9wipl3] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-b6vi9wipl3] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}

.btn-create-modal[b-b6vi9wipl3] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    cursor: pointer;
    font-weight: 600;
}

.btn-delete[b-b6vi9wipl3] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

.warning-text[b-b6vi9wipl3] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Toast Notifications */
.toast-notification[b-b6vi9wipl3] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-b6vi9wipl3 0.3s ease;
    z-index: 10001;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.success[b-b6vi9wipl3] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border-left: 4px solid #ffd700;
}

.toast-notification.error[b-b6vi9wipl3] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border-left: 4px solid #ffd700;
}

.toast-notification span:first-child[b-b6vi9wipl3] {
    font-size: 18px;
}

.toast-notification span:nth-child(2)[b-b6vi9wipl3] {
    flex: 1;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.toast-close[b-b6vi9wipl3] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-close:hover[b-b6vi9wipl3] {
    opacity: 1;
}

/* Error Card */
.error-card[b-b6vi9wipl3] {
    text-align: center;
    padding: 40px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 20px;
}

.error-icon[b-b6vi9wipl3] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.error-card p[b-b6vi9wipl3] {
    color: #ff6b6b;
    margin-bottom: 16px;
}

.retry-btn[b-b6vi9wipl3] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 8px 20px;
    color: #1a1a2e;
    cursor: pointer;
}

/* Empty State */
.empty-state[b-b6vi9wipl3] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-b6vi9wipl3] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-b6vi9wipl3] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Loading */
.dot-pulse-loader[b-b6vi9wipl3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-b6vi9wipl3] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-b6vi9wipl3 1.5s ease-in-out infinite;
}

@keyframes pulse-b-b6vi9wipl3 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes slideInRight-b-b6vi9wipl3 {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .admins-grid[b-b6vi9wipl3] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-b6vi9wipl3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admins-container[b-b6vi9wipl3] {
        padding: 16px;
    }

    .main-heading[b-b6vi9wipl3] {
        font-size: 24px;
    }

    .detail-item[b-b6vi9wipl3] {
        flex-wrap: wrap;
    }

    .detail-label[b-b6vi9wipl3] {
        min-width: 60px;
    }

    .edit-actions[b-b6vi9wipl3] {
        flex-direction: column;
    }

    .modal-content[b-b6vi9wipl3] {
        width: 95%;
    }

    .admin-info[b-b6vi9wipl3] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .badge[b-b6vi9wipl3] {
        font-size: 10px;
    }

    .toast-notification[b-b6vi9wipl3] {
        top: 16px;
        right: 16px;
        left: 16px;
        min-width: auto;
    }

    .username[b-b6vi9wipl3] {
        font-size: 15px;
    }
}
/* /Components/Pages/AvatarDetails.razor.rz.scp.css */
/* Fullscreen Avatar Viewer - Minimalist Style */
.avatar-viewer[b-n2v1x9xa9y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Close Button */
.close-btn[b-n2v1x9xa9y] {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.close-btn:hover[b-n2v1x9xa9y] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    border-color: rgba(255, 215, 0, 0.5);
}

/* Image Container */
.image-container[b-n2v1x9xa9y] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 40px;
}

/* Avatar Image */
.avatar-image[b-n2v1x9xa9y] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    animation: fadeInZoom-b-n2v1x9xa9y 0.4s ease;
}

/* Error Container */
.error-container[b-n2v1x9xa9y] {
    text-align: center;
    color: white;
}

.error-icon[b-n2v1x9xa9y] {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.error-container p[b-n2v1x9xa9y] {
    font-size: 20px;
    color: #aaa;
    margin-bottom: 24px;
}

.retry-btn[b-n2v1x9xa9y] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-btn:hover[b-n2v1x9xa9y] {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}

/* Loading Animation */
.dot-pulse-loader[b-n2v1x9xa9y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index: 10000;
}

.dot[b-n2v1x9xa9y] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    animation: pulse-b-n2v1x9xa9y 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-n2v1x9xa9y] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-n2v1x9xa9y] { animation-delay: 0.4s; }

/* Animations */
@keyframes fadeInZoom-b-n2v1x9xa9y {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-b-n2v1x9xa9y {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .close-btn[b-n2v1x9xa9y] {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .image-container[b-n2v1x9xa9y] {
        padding: 20px;
    }

    .avatar-image[b-n2v1x9xa9y] {
        max-width: 95%;
        max-height: 95%;
    }

    .error-icon[b-n2v1x9xa9y] {
        font-size: 60px;
    }

    .error-container p[b-n2v1x9xa9y] {
        font-size: 16px;
    }
}
/* /Components/Pages/Avatars.razor.rz.scp.css */
/* Avatars Container */
.avatars-container[b-t5qptsu2qq] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-t5qptsu2qq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 20px 28px;
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.main-heading[b-t5qptsu2qq] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-icon[b-t5qptsu2qq] {
    font-size: 32px;
    -webkit-text-fill-color: initial;
}

.badge[b-t5qptsu2qq] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.btn-add[b-t5qptsu2qq] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-add:hover[b-t5qptsu2qq] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Table Container */
.table-container[b-t5qptsu2qq] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow-x: auto;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.avatars-table[b-t5qptsu2qq] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1100px;
}

.avatars-table th[b-t5qptsu2qq] {
    padding: 16px 16px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.avatars-table td[b-t5qptsu2qq] {
    padding: 14px 16px;
    color: #e0e0e0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.avatars-table tr:hover[b-t5qptsu2qq] {
    background: rgba(255, 215, 0, 0.05);
}

.editing-row[b-t5qptsu2qq] {
    background: rgba(255, 215, 0, 0.08);
    box-shadow: inset 0 0 0 1px #ffd700;
}

/* Column Widths */
.col-id[b-t5qptsu2qq] { width: 70px; }
.col-status[b-t5qptsu2qq] { width: 100px; }
.col-priority[b-t5qptsu2qq] { width: 80px; }
.col-gems[b-t5qptsu2qq] { width: 100px; }
.col-coins[b-t5qptsu2qq] { width: 100px; }
.col-level[b-t5qptsu2qq] { width: 90px; }
.col-tier[b-t5qptsu2qq] { width: 100px; }
.col-gender[b-t5qptsu2qq] { width: 100px; }
.col-actions[b-t5qptsu2qq] { width: 100px; }

/* Clickable ID */
.clickable-id[b-t5qptsu2qq] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.clickable-id:hover[b-t5qptsu2qq] {
    background: rgba(255, 215, 0, 0.3);
    transform: translateX(2px);
}

/* Status Badge */
.status-badge[b-t5qptsu2qq] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.active[b-t5qptsu2qq] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.inactive[b-t5qptsu2qq] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0b0;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

/* Priority Value */
.priority-value[b-t5qptsu2qq] {
    color: #ffd700;
    font-weight: 600;
}

/* Resource Values */
.resource-value[b-t5qptsu2qq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.resource-value.gems[b-t5qptsu2qq] { color: #e91e63; }
.resource-value.coins[b-t5qptsu2qq] { color: #ff9800; }

/* Level Value */
.level-value[b-t5qptsu2qq] {
    color: #00ff88;
    font-weight: 500;
}

/* Tier Badge */
.tier-badge[b-t5qptsu2qq] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 40px;
    font-size: 11px;
    font-weight: 600;
}

.tier-0[b-t5qptsu2qq] { background: rgba(108, 117, 125, 0.2); color: #a0a0b0; }
.tier-1[b-t5qptsu2qq] { background: rgba(0, 123, 255, 0.2); color: #4a9eff; }
.tier-2[b-t5qptsu2qq] { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.tier-3[b-t5qptsu2qq] { background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.tier-4[b-t5qptsu2qq] { background: rgba(220, 53, 69, 0.2); color: #ff6b6b; }

/* Gender Badge */
.gender-badge[b-t5qptsu2qq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
}

.gender-badge.male[b-t5qptsu2qq] {
    background: rgba(54, 162, 235, 0.15);
    color: #36a2eb;
}

.gender-badge.female[b-t5qptsu2qq] {
    background: rgba(255, 99, 132, 0.15);
    color: #ff6384;
}

.gender-badge.unknown[b-t5qptsu2qq] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0b0;
}

/* Modern Input */
.modern-input[b-t5qptsu2qq] {
    width: 80%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-t5qptsu2qq] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
}

/* Modern Select */
.modern-select[b-t5qptsu2qq] {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    cursor: pointer;
}

.modern-select option[b-t5qptsu2qq] {
    background: #1a1a2e;
    color: white;
}

.modern-select:focus[b-t5qptsu2qq] {
    outline: none;
    border-color: #ffd700;
}

/* Action Buttons */
.action-btn[b-t5qptsu2qq] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    margin: 0 2px;
}

.action-btn.edit[b-t5qptsu2qq] { color: #ffd700; }
.action-btn.delete[b-t5qptsu2qq] { color: #ff6b6b; }
.action-btn.save[b-t5qptsu2qq] { color: #28a745; }
.action-btn.cancel[b-t5qptsu2qq] { color: #ff6b6b; }

.action-btn.edit:hover[b-t5qptsu2qq] { background: rgba(255, 215, 0, 0.2); transform: scale(1.05); }
.action-btn.delete:hover[b-t5qptsu2qq] { background: rgba(220, 53, 69, 0.3); transform: scale(1.05); }
.action-btn.save:hover[b-t5qptsu2qq] { background: rgba(40, 167, 69, 0.3); transform: scale(1.05); }
.action-btn.cancel:hover[b-t5qptsu2qq] { background: rgba(220, 53, 69, 0.3); transform: scale(1.05); }

/* Toggle Switch */
.toggle-switch[b-t5qptsu2qq] {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 22px;
}

.toggle-switch input[b-t5qptsu2qq] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-t5qptsu2qq] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.3);
    transition: 0.3s;
    border-radius: 34px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.toggle-slider[b-t5qptsu2qq]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-t5qptsu2qq] {
    background-color: rgba(40, 167, 69, 0.2);
}

input:checked + .toggle-slider[b-t5qptsu2qq]:before {
    transform: translateX(24px);
    background-color: #28a745;
}

/* Form Row */
.form-row[b-t5qptsu2qq] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group[b-t5qptsu2qq] {
    margin-bottom: 16px;
}

.form-group.half[b-t5qptsu2qq] {
    flex: 1;
}

.form-group label[b-t5qptsu2qq] {
    display: block;
    margin-bottom: 6px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

.checkbox-label[b-t5qptsu2qq] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #e0e0e0;
}

/* Error Text */
.error-text[b-t5qptsu2qq] {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 12px;
    text-align: center;
}

/* Modal */
.modal-overlay[b-t5qptsu2qq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-dialog[b-t5qptsu2qq] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 500px;
    max-width: 90%;
    animation: slideIn-b-t5qptsu2qq 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.confirm-dialog[b-t5qptsu2qq] {
    width: 380px;
}

.modal-header[b-t5qptsu2qq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
}

.modal-header.danger[b-t5qptsu2qq] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-header h3[b-t5qptsu2qq] {
    margin: 0;
    color: #ffd700;
    font-size: 18px;
}

.modal-close[b-t5qptsu2qq] {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
}

.modal-close:hover[b-t5qptsu2qq] {
    color: white;
}

.modal-body[b-t5qptsu2qq] {
    padding: 24px;
}

/* Modal Footer Buttons - VISIBLE COLORS */
.modal-footer[b-t5qptsu2qq] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel-modal[b-t5qptsu2qq] {
    padding: 10px 24px;
    background: rgba(108, 117, 125, 0.3);
    border: 1px solid rgba(108, 117, 125, 0.5);
    border-radius: 40px;
    color: #a0a0b0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-modal:hover[b-t5qptsu2qq] {
    background: rgba(108, 117, 125, 0.5);
    color: white;
    transform: translateY(-1px);
}

.btn-save-modal[b-t5qptsu2qq] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border: none;
    border-radius: 40px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-modal:hover[b-t5qptsu2qq] {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-delete-modal[b-t5qptsu2qq] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-modal:hover[b-t5qptsu2qq] {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Delete Warning */
.delete-warning[b-t5qptsu2qq] {
    text-align: center;
}

.warning-icon[b-t5qptsu2qq] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.delete-warning p[b-t5qptsu2qq] {
    margin: 0 0 8px 0;
    color: #ddd;
}

.delete-warning strong[b-t5qptsu2qq] {
    color: #ff6b6b;
}

.delete-warning small[b-t5qptsu2qq] {
    color: #888;
}

/* Error Card */
.error-card[b-t5qptsu2qq] {
    text-align: center;
    padding: 40px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 20px;
}

.error-icon[b-t5qptsu2qq] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.error-card p[b-t5qptsu2qq] {
    color: #ff6b6b;
    margin-bottom: 16px;
}

.retry-btn[b-t5qptsu2qq] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 8px 20px;
    color: #1a1a2e;
    cursor: pointer;
}

/* Empty State */
.empty-state[b-t5qptsu2qq] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-t5qptsu2qq] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-t5qptsu2qq] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

.create-btn[b-t5qptsu2qq] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
}

/* Loading */
.dot-pulse-loader[b-t5qptsu2qq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-t5qptsu2qq] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-t5qptsu2qq 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-t5qptsu2qq] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-t5qptsu2qq] { animation-delay: 0.4s; }

@keyframes pulse-b-t5qptsu2qq {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

/* Responsive */
@media (max-width: 768px) {
    .avatars-container[b-t5qptsu2qq] {
        padding: 16px;
    }

    .header-section[b-t5qptsu2qq] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .form-row[b-t5qptsu2qq] {
        flex-direction: column;
        gap: 12px;
    }

    .modal-dialog[b-t5qptsu2qq] {
        width: 95%;
    }
}
/* /Components/Pages/DailyRewards.razor.rz.scp.css */

/* Daily Rewards Container */
.daily-rewards-container[b-b5j2tafeit] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-b5j2tafeit] {
    text-align: center;
    margin-bottom: 48px;
}

.main-heading[b-b5j2tafeit] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-b5j2tafeit] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-b5j2tafeit] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-b5j2tafeit] {
    color: #a0a0b0;
    font-size: 14px;
}

/* Rewards Grid */
.rewards-grid[b-b5j2tafeit] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    align-items: start;
}

/* Reward Card */
.reward-card[b-b5j2tafeit] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.reward-card:hover[b-b5j2tafeit] {
    transform: translateY(-4px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.reward-card.editing[b-b5j2tafeit] {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

/* Day-specific colors */
.reward-card.day-1 .day-badge[b-b5j2tafeit] { background: linear-gradient(135deg, #ffd700, #ff8c00); }
.reward-card.day-2 .day-badge[b-b5j2tafeit] { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); }
.reward-card.day-3 .day-badge[b-b5j2tafeit] { background: linear-gradient(135deg, #cd7f32, #b87333); }
.reward-card.day-4 .day-badge[b-b5j2tafeit] { background: linear-gradient(135deg, #667eea, #764ba2); }
.reward-card.day-5 .day-badge[b-b5j2tafeit] { background: linear-gradient(135deg, #f093fb, #f5576c); }
.reward-card.day-6 .day-badge[b-b5j2tafeit] { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.reward-card.day-7 .day-badge[b-b5j2tafeit] { background: linear-gradient(135deg, #fa709a, #fee140); }

/* Day Badge */
.day-badge[b-b5j2tafeit] {
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
}

.day-number[b-b5j2tafeit] {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
}

/* Reward Content */
.reward-content[b-b5j2tafeit] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reward-items[b-b5j2tafeit] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reward-item[b-b5j2tafeit] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.reward-item.coins[b-b5j2tafeit] {
    border-left: 3px solid #ff9800;
}

.reward-item.gems[b-b5j2tafeit] {
    border-left: 3px solid #e91e63;
}

.reward-item.picture[b-b5j2tafeit] {
    border-left: 3px solid #2196f3;
}

.reward-item.empty[b-b5j2tafeit] {
    border-left: 3px solid #a0a0a0;
}

.reward-icon[b-b5j2tafeit] {
    font-size: 18px;
}

.reward-amount[b-b5j2tafeit] {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.reward-item.empty .reward-amount[b-b5j2tafeit] {
    color: #a0a0a0;
    font-size: 12px;
}

/* Edit Button */
.edit-btn[b-b5j2tafeit] {
    width: 100%;
    padding: 10px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 40px;
    color: #ffd700;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-btn:hover[b-b5j2tafeit] {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}

/* Edit Form */
.edit-form[b-b5j2tafeit] {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.edit-field[b-b5j2tafeit] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 20px;
}

.edit-field label[b-b5j2tafeit] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.edit-input[b-b5j2tafeit] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

.edit-input:focus[b-b5j2tafeit] {
    outline: none;
    border-color: #ffd700;
}

.edit-input.invalid[b-b5j2tafeit] {
    border-color: #dc3545;
}

.validation-error[b-b5j2tafeit] {
    color: #dc3545;
    font-size: 11px;
    margin-top: 4px;
}

.edit-actions[b-b5j2tafeit] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.save-btn[b-b5j2tafeit], .cancel-btn[b-b5j2tafeit] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-btn[b-b5j2tafeit] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    color: white;
}

.save-btn:hover:not(:disabled)[b-b5j2tafeit] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.save-btn:disabled[b-b5j2tafeit] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cancel-btn[b-b5j2tafeit] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a0a0b0;
}

.cancel-btn:hover[b-b5j2tafeit] {
    background: rgba(108, 117, 125, 0.4);
}

/* Info Section */
.info-section[b-b5j2tafeit] {
    max-width: 900px;
    margin: 32px auto 0;
}

.info-card[b-b5j2tafeit] {
    background: rgba(10, 10, 20, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.info-icon[b-b5j2tafeit] {
    font-size: 28px;
}

.info-text[b-b5j2tafeit] {
    color: #a0a0b0;
    font-size: 13px;
    line-height: 1.5;
}

.info-text strong[b-b5j2tafeit] {
    color: #ffd700;
}

/* Toast Notifications */
.toast-notification[b-b5j2tafeit] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-b5j2tafeit 0.3s ease;
    z-index: 10001;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.success[b-b5j2tafeit] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border-left: 4px solid #ffd700;
}

.toast-notification.error[b-b5j2tafeit] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border-left: 4px solid #ffd700;
}

.toast-notification span:first-child[b-b5j2tafeit] {
    font-size: 18px;
}

.toast-notification span:nth-child(2)[b-b5j2tafeit] {
    flex: 1;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.toast-close[b-b5j2tafeit] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-close:hover[b-b5j2tafeit] {
    opacity: 1;
}

/* Error Card */
.error-card[b-b5j2tafeit] {
    text-align: center;
    padding: 40px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.error-icon[b-b5j2tafeit] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.error-card p[b-b5j2tafeit] {
    color: #ff6b6b;
    margin-bottom: 16px;
}

.retry-btn[b-b5j2tafeit] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 8px 20px;
    color: #1a1a2e;
    cursor: pointer;
}

/* Loading Animation */
.dot-pulse-loader[b-b5j2tafeit] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-b5j2tafeit] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-b5j2tafeit 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-b5j2tafeit] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-b5j2tafeit] { animation-delay: 0.4s; }

@keyframes pulse-b-b5j2tafeit {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes slideInRight-b-b5j2tafeit {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .rewards-grid[b-b5j2tafeit] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .rewards-grid[b-b5j2tafeit] {
        grid-template-columns: repeat(2, 1fr);
    }

    .daily-rewards-container[b-b5j2tafeit] {
        padding: 20px;
    }

    .main-heading[b-b5j2tafeit] {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .rewards-grid[b-b5j2tafeit] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .daily-rewards-container[b-b5j2tafeit] {
        padding: 16px;
    }

    .main-heading[b-b5j2tafeit] {
        font-size: 24px;
    }

    .badge[b-b5j2tafeit] {
        font-size: 10px;
    }

    .toast-notification[b-b5j2tafeit] {
        top: 16px;
        right: 16px;
        left: 16px;
        min-width: auto;
    }
}
/* /Components/Pages/Emotes.razor.rz.scp.css */
/* Dark Gaming Style for Emotes */
.emotes-container[b-kjqhnti3gp] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    padding: 24px;
    font-family: 'Courier New', 'Segoe UI', 'Monaco', monospace;
}

/* Header Section - Gothic Style */
.header-section[b-kjqhnti3gp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 28px;
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.main-heading[b-kjqhnti3gp] {
    font-size: 28px;
    font-weight: bold;
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 2px;
}

.heading-icon[b-kjqhnti3gp] {
    font-size: 32px;
    filter: drop-shadow(0 0 5px #ff6b6b);
}

.badge[b-kjqhnti3gp] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #1a1a2e;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

/* Gaming Buttons */
.btn-gaming[b-kjqhnti3gp] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: monospace;
    letter-spacing: 1px;
}

.btn-add[b-kjqhnti3gp] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #1a1a2e;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
}

.btn-add:hover[b-kjqhnti3gp] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 107, 107, 0.6);
}

.btn-primary[b-kjqhnti3gp] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: #1a1a2e;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}

.btn-primary:hover:not(:disabled)[b-kjqhnti3gp] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 107, 107, 0.5);
}

.btn-primary:disabled[b-kjqhnti3gp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary[b-kjqhnti3gp] {
    background: #2a2a3e;
    color: #aaa;
    border: 1px solid #444;
}

.btn-secondary:hover[b-kjqhnti3gp] {
    background: #3a3a4e;
    color: #fff;
}

.btn-danger[b-kjqhnti3gp] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    color: white;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
}

.btn-danger:hover:not(:disabled)[b-kjqhnti3gp] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(220, 53, 69, 0.5);
}

.btn-danger:disabled[b-kjqhnti3gp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-retry[b-kjqhnti3gp] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.btn-retry:hover[b-kjqhnti3gp] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
}

/* Emotes Grid - Card Layout */
.emotes-grid[b-kjqhnti3gp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

/* Emote Card - RPG Style */
.emote-card[b-kjqhnti3gp] {
    background: rgba(15, 12, 41, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 107, 107, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.emote-card:hover[b-kjqhnti3gp] {
    transform: translateY(-5px);
    border-color: rgba(255, 107, 107, 0.5);
    box-shadow: 0 8px 30px rgba(255, 107, 107, 0.2);
}

.editing-mode[b-kjqhnti3gp] {
    border: 2px solid #ff6b6b;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
}

/* Card Header */
.card-header[b-kjqhnti3gp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 107, 107, 0.2);
}

.emote-id[b-kjqhnti3gp] {
    font-size: 18px;
    font-weight: bold;
}

.clickable-id[b-kjqhnti3gp] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(255, 107, 107, 0.15);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.clickable-id:hover[b-kjqhnti3gp] {
    background: rgba(255, 107, 107, 0.3);
    transform: translateX(3px);
}

.id-number[b-kjqhnti3gp] {
    color: #ff6b6b;
    font-size: 18px;
}

.view-icon[b-kjqhnti3gp] {
    font-size: 14px;
    opacity: 0.7;
}

.id-edit[b-kjqhnti3gp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.id-edit label[b-kjqhnti3gp] {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
}

.id-input[b-kjqhnti3gp] {
    width: 80px !important;
}

.emote-preview[b-kjqhnti3gp] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.2);
    overflow: hidden;
}

.emote-image[b-kjqhnti3gp] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.2));
}

.emote-placeholder[b-kjqhnti3gp] {
    font-size: 36px;
    line-height: 1;
}

/* Card Body - Stats */
.card-body[b-kjqhnti3gp] {
    padding: 20px;
}

.stat-row[b-kjqhnti3gp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-row:last-child[b-kjqhnti3gp] {
    border-bottom: none;
}

.stat-icon[b-kjqhnti3gp] {
    font-size: 20px;
    width: 32px;
}

.stat-label[b-kjqhnti3gp] {
    flex: 1;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value[b-kjqhnti3gp] {
    font-size: 18px;
    font-weight: bold;
    font-family: monospace;
}

.coin-value[b-kjqhnti3gp] {
    color: #fdcb6e;
}

.gem-value[b-kjqhnti3gp] {
    color: #ff6b6b;
}

/* Gaming Inputs */
.gaming-input[b-kjqhnti3gp] {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 100px;
    text-align: center;
    font-family: monospace;
}

.gaming-input:focus[b-kjqhnti3gp] {
    outline: none;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.4);
}

.gaming-input[b-kjqhnti3gp]::placeholder {
    color: rgba(255, 107, 107, 0.3);
}

.gaming-input:disabled[b-kjqhnti3gp] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Card Footer */
.card-footer[b-kjqhnti3gp] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 107, 107, 0.2);
}

.action-btn[b-kjqhnti3gp] {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.edit-btn[b-kjqhnti3gp] {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
}

.edit-btn:hover[b-kjqhnti3gp] {
    background: #ff6b6b;
    color: white;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}

.delete-btn[b-kjqhnti3gp] {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid #dc3545;
}

.delete-btn:hover[b-kjqhnti3gp] {
    background: #dc3545;
    color: white;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
}

.save-btn[b-kjqhnti3gp] {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid #28a745;
}

.save-btn:hover[b-kjqhnti3gp] {
    background: #28a745;
    color: white;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.3);
}

.cancel-btn[b-kjqhnti3gp] {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid #6c757d;
}

.cancel-btn:hover[b-kjqhnti3gp] {
    background: #6c757d;
    color: white;
}

/* Spinner */
.spinner-small[b-kjqhnti3gp] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #1a1a2e;
    border-radius: 50%;
    animation: spin-b-kjqhnti3gp 1s linear infinite;
    margin-right: 8px;
}

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

/* Empty Vault */
.empty-vault[b-kjqhnti3gp] {
    text-align: center;
    padding: 60px;
    background: rgba(15, 12, 41, 0.8);
    border-radius: 24px;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.empty-icon[b-kjqhnti3gp] {
    font-size: 80px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.3));
}

.empty-vault h3[b-kjqhnti3gp] {
    color: #ff6b6b;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

.empty-vault p[b-kjqhnti3gp] {
    color: #888;
    margin-bottom: 20px;
}

/* Modal Gaming Style */
.modal-gaming[b-kjqhnti3gp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
}

.modal-content-gaming[b-kjqhnti3gp] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #ff6b6b;
    border-radius: 20px;
    width: 500px;
    max-width: 90%;
    animation: slideUp-b-kjqhnti3gp 0.3s ease;
    box-shadow: 0 0 50px rgba(255, 107, 107, 0.3);
}

.modal-header-gaming[b-kjqhnti3gp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 107, 107, 0.3);
}

.modal-header-gaming.warning[b-kjqhnti3gp] {
    border-bottom-color: #dc3545;
}

.modal-icon[b-kjqhnti3gp] {
    font-size: 24px;
}

.modal-header-gaming h3[b-kjqhnti3gp] {
    flex: 1;
    margin: 0;
    color: #ff6b6b;
}

.modal-close[b-kjqhnti3gp] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-kjqhnti3gp] {
    color: #fff;
    transform: rotate(90deg);
}

.modal-body-gaming[b-kjqhnti3gp] {
    padding: 24px;
}

.input-group-gaming[b-kjqhnti3gp] {
    margin-bottom: 16px;
}

.input-group-gaming label[b-kjqhnti3gp] {
    display: block;
    margin-bottom: 8px;
    color: #aaa;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.label-icon[b-kjqhnti3gp] {
    margin-right: 6px;
}

.row-gaming[b-kjqhnti3gp] {
    display: flex;
    gap: 16px;
}

.row-gaming .half[b-kjqhnti3gp] {
    flex: 1;
}

.error-gaming[b-kjqhnti3gp] {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    padding: 10px;
    border-radius: 8px;
    margin-top: 16px;
    text-align: center;
    color: #dc3545;
    font-weight: bold;
}

.modal-footer-gaming[b-kjqhnti3gp] {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid rgba(255, 107, 107, 0.2);
    justify-content: flex-end;
}

.delete-warning-gaming[b-kjqhnti3gp] {
    text-align: center;
    padding: 20px;
}

.warning-icon[b-kjqhnti3gp] {
    font-size: 64px;
    margin-bottom: 16px;
}

.delete-warning-gaming p[b-kjqhnti3gp] {
    color: #fff;
    margin: 12px 0;
}

.delete-warning-gaming strong[b-kjqhnti3gp] {
    color: #ff6b6b;
}

.delete-warning-gaming small[b-kjqhnti3gp] {
    color: #888;
}

/* Error Card */
.error-card[b-kjqhnti3gp] {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    color: #dc3545;
}

.error-icon[b-kjqhnti3gp] {
    font-size: 32px;
}

/* Loading Animation */
.dot-pulse-loader[b-kjqhnti3gp] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 12px;
}

.dot[b-kjqhnti3gp] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse-b-kjqhnti3gp 1.2s ease-in-out infinite;
}

.dot:nth-child(1)[b-kjqhnti3gp] {
    background: #ff6b6b;
    animation-delay: 0s;
}

.dot:nth-child(2)[b-kjqhnti3gp] {
    background: #fdcb6e;
    animation-delay: 0.2s;
}

.dot:nth-child(3)[b-kjqhnti3gp] {
    background: #ff6b6b;
    animation-delay: 0.4s;
}

@keyframes pulse-b-kjqhnti3gp {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animations */
@keyframes slideUp-b-kjqhnti3gp {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .emotes-container[b-kjqhnti3gp] {
        padding: 12px;
    }

    .header-section[b-kjqhnti3gp] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .main-heading[b-kjqhnti3gp] {
        font-size: 22px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .emotes-grid[b-kjqhnti3gp] {
        grid-template-columns: 1fr;
    }

    .row-gaming[b-kjqhnti3gp] {
        flex-direction: column;
    }

    .stat-row[b-kjqhnti3gp] {
        flex-wrap: wrap;
    }

    .gaming-input[b-kjqhnti3gp] {
        width: 100%;
    }

    .card-footer[b-kjqhnti3gp] {
        flex-direction: column;
    }

    .emote-preview[b-kjqhnti3gp] {
        width: 48px;
        height: 48px;
    }

    .emote-placeholder[b-kjqhnti3gp] {
        font-size: 28px;
    }

    .id-edit[b-kjqhnti3gp] {
        flex-wrap: wrap;
    }

    .id-input[b-kjqhnti3gp] {
        width: 60px !important;
    }
}
/* /Components/Pages/FileManager.razor.rz.scp.css */
/* File Manager Container */
.file-manager-container[b-d407tgma5v] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-d407tgma5v] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-d407tgma5v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-d407tgma5v] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-d407tgma5v] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-d407tgma5v] {
    color: #a0a0b0;
    font-size: 14px;
}

/* Cards */
.upload-card[b-d407tgma5v], .files-card[b-d407tgma5v] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    margin-bottom: 24px;
}

.card-header[b-d407tgma5v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.card-icon[b-d407tgma5v] {
    font-size: 24px;
}

.card-header h3[b-d407tgma5v] {
    flex: 1;
    margin: 0;
    color: #ffd700;
    font-size: 18px;
}

.refresh-btn[b-d407tgma5v] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 40px;
    padding: 6px 16px;
    color: #ffd700;
    cursor: pointer;
}

.refresh-btn:hover[b-d407tgma5v] {
    background: rgba(255, 215, 0, 0.15);
}

.card-body[b-d407tgma5v] {
    padding: 24px;
}

/* Upload Zone */
.upload-zone[b-d407tgma5v] {
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.2s ease;
    margin-bottom: 24px;
}

.upload-zone.drag-active[b-d407tgma5v] {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
}

.upload-icon[b-d407tgma5v] {
    font-size: 56px;
    margin-bottom: 16px;
}

.upload-title[b-d407tgma5v] {
    color: #ffd700;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.upload-subtitle[b-d407tgma5v] {
    color: #a0a0b0;
    font-size: 13px;
    margin-bottom: 16px;
}

.upload-or[b-d407tgma5v] {
    color: #a0a0b0;
    margin: 16px 0;
}

.browse-btn[b-d407tgma5v] {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
}

.file-input-hidden[b-d407tgma5v] {
    display: none;
}

.upload-requirements[b-d407tgma5v] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
}

.req-item[b-d407tgma5v] {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: #a0a0b0;
}

/* Selected File */
.selected-file[b-d407tgma5v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    margin-bottom: 20px;
}

.file-info[b-d407tgma5v] {
    flex: 1;
}

.file-name[b-d407tgma5v] {
    color: white;
    font-weight: 600;
    word-break: break-all;
}

.file-size[b-d407tgma5v] {
    color: #a0a0b0;
    font-size: 12px;
    margin-top: 4px;
}

.remove-file[b-d407tgma5v] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    color: #ff6b6b;
    cursor: pointer;
}

/* Upload Button */
.upload-btn[b-d407tgma5v] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.upload-btn.disabled[b-d407tgma5v] {
    opacity: 0.5;
    cursor: not-allowed;
}

.upload-btn:hover:not(.disabled)[b-d407tgma5v] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-badge[b-d407tgma5v] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #10b981;
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
}

/* Upload Progress */
.upload-progress[b-d407tgma5v] {
    margin-top: 20px;
}

.progress-bar[b-d407tgma5v] {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-d407tgma5v] {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-d407tgma5v] {
    text-align: center;
    color: #a0a0b0;
    font-size: 12px;
}

/* Status Message */
.status-message[b-d407tgma5v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-top: 20px;
}

.status-message.success[b-d407tgma5v] {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-message.error[b-d407tgma5v] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.status-icon[b-d407tgma5v] {
    font-size: 18px;
}

.status-text[b-d407tgma5v] {
    flex: 1;
    color: white;
}

.status-close[b-d407tgma5v] {
    background: none;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
}

/* Files List */
.files-list[b-d407tgma5v] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
}

.file-item[b-d407tgma5v] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    transition: all 0.2s ease;
}

.file-item:hover[b-d407tgma5v] {
    background: rgba(255, 215, 0, 0.05);
}

.file-icon[b-d407tgma5v] {
    font-size: 32px;
}

.file-details[b-d407tgma5v] {
    flex: 1;
}

.file-name[b-d407tgma5v] {
    color: white;
    font-weight: 600;
    word-break: break-all;
}

.file-meta[b-d407tgma5v] {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.file-size[b-d407tgma5v], .file-date[b-d407tgma5v] {
    color: #a0a0b0;
    font-size: 12px;
}

.file-actions[b-d407tgma5v] {
    display: flex;
    gap: 8px;
}

.download-btn[b-d407tgma5v] {
    padding: 8px 16px;
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 8px;
    color: #28a745;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.download-btn:hover[b-d407tgma5v] {
    background: rgba(40, 167, 69, 0.3);
}

.delete-file-btn[b-d407tgma5v] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.delete-file-btn:hover[b-d407tgma5v] {
    background: rgba(220, 53, 69, 0.35);
}

.files-footer[b-d407tgma5v] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
}

.total-size[b-d407tgma5v] {
    color: #a0a0b0;
    font-size: 12px;
}

/* Loading State */
.loading-state[b-d407tgma5v] {
    text-align: center;
    padding: 40px;
}

.dot-pulse.small[b-d407tgma5v] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dot-pulse.small .dot[b-d407tgma5v] {
    width: 8px;
    height: 8px;
}

/* Empty State */
.empty-state[b-d407tgma5v] {
    text-align: center;
    padding: 60px;
}

.empty-icon[b-d407tgma5v] {
    font-size: 64px;
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-state p[b-d407tgma5v] {
    color: #a0a0b0;
    margin-bottom: 8px;
}

.empty-state small[b-d407tgma5v] {
    color: #666;
}

/* Modal */
.modal-overlay[b-d407tgma5v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-d407tgma5v] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 380px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-header[b-d407tgma5v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-d407tgma5v] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-d407tgma5v] {
    font-size: 24px;
}

.modal-header h3[b-d407tgma5v] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-d407tgma5v] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-d407tgma5v] {
    color: aqua;
    padding: 24px;
    text-align: center;
}

.modal-body strong[b-d407tgma5v] {
    color: #ffd700;
}

.warning-text[b-d407tgma5v] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

.modal-footer[b-d407tgma5v] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-d407tgma5v] {
    padding: 8px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}

.btn-delete[b-d407tgma5v] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

/* Loading Animation */
.dot-pulse-loader[b-d407tgma5v] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
}

.dot[b-d407tgma5v] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-d407tgma5v 1.5s ease-in-out infinite;
}

@keyframes pulse-b-d407tgma5v {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .file-manager-container[b-d407tgma5v] {
        padding: 16px;
    }

    .main-heading[b-d407tgma5v] {
        font-size: 24px;
    }

    .upload-zone[b-d407tgma5v] {
        padding: 30px 16px;
    }

    .file-item[b-d407tgma5v] {
        flex-wrap: wrap;
    }

    .file-actions[b-d407tgma5v] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Pages/GameModeDisplay.razor.rz.scp.css */


.game-modes-container[b-w6n9bswaw2] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.header-section[b-w6n9bswaw2] {
    text-align: center;
    margin-bottom: 24px;
}

.main-heading[b-w6n9bswaw2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-w6n9bswaw2] { font-size: 36px; -webkit-text-fill-color: initial; }
.badge[b-w6n9bswaw2] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    -webkit-text-fill-color: #ffd700;
}
.header-subtitle[b-w6n9bswaw2] { color: #a0a0b0; font-size: 14px; }

.create-button-wrapper[b-w6n9bswaw2] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.create-mode-btn[b-w6n9bswaw2] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 12px 24px;
    color: #1a1a2e;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-mode-btn:hover[b-w6n9bswaw2] { transform: translateY(-2px); filter: brightness(1.05); }

.create-card[b-w6n9bswaw2] {
    background: rgba(10, 10, 20, 0.9);
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    margin-bottom: 24px;
    overflow: hidden;
    padding: 10px;
}

.create-header[b-w6n9bswaw2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    color: #ffd700;
    font-weight: 700;
}

.create-close[b-w6n9bswaw2] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: white;
    cursor: pointer;
}

.modes-grid[b-w6n9bswaw2] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mode-card[b-w6n9bswaw2] {
    background: rgba(10, 10, 20, 0.7);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    overflow: hidden;
    transition: all 0.2s;
}

.mode-card:hover[b-w6n9bswaw2] {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Detailed read-only view */
.mode-details-container[b-w6n9bswaw2] {
    padding: 20px;
}

.mode-header-banner[b-w6n9bswaw2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.mode-title[b-w6n9bswaw2] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mode-icon-large[b-w6n9bswaw2] {
    font-size: 48px;
}

.mode-name-details h2[b-w6n9bswaw2] {
    margin: 0 0 8px 0;
    color: #ffd700;
    font-size: 24px;
}

.mode-badges[b-w6n9bswaw2] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.status-badge[b-w6n9bswaw2], .players-badge[b-w6n9bswaw2], .team-badge[b-w6n9bswaw2], .chat-badge[b-w6n9bswaw2] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active[b-w6n9bswaw2] { background: rgba(40, 167, 69, 0.15); color: #28a745; border: 1px solid rgba(40, 167, 69, 0.3); }
.status-badge.inactive[b-w6n9bswaw2] { background: rgba(108, 117, 125, 0.15); color: #a0a0b0; border: 1px solid rgba(108, 117, 125, 0.3); }
.players-badge[b-w6n9bswaw2] { background: rgba(102, 126, 234, 0.15); color: #667eea; }
.team-badge[b-w6n9bswaw2] { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.chat-badge[b-w6n9bswaw2] { background: rgba(23, 162, 184, 0.15); color: #17a2b8; }

.delete-card-btn[b-w6n9bswaw2] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    color: #dc3545;
    font-weight: 600;
}

.delete-card-btn:hover[b-w6n9bswaw2] {
    background: rgba(220, 53, 69, 0.3);
}

.details-grid[b-w6n9bswaw2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    background: rgba(0, 0, 0, 0.3);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.detail-item[b-w6n9bswaw2] {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(255,215,0,0.2);
}

.detail-label[b-w6n9bswaw2] {
    color: #a0a0b0;
    font-size: 13px;
    font-weight: 500;
    padding-right: 27px;
}

.detail-value[b-w6n9bswaw2] {
    color: white;
    font-weight: 600;
}

.rewards-preview[b-w6n9bswaw2] {
    margin-bottom: 20px;
}

.rewards-title[b-w6n9bswaw2] {
    font-size: 16px;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 14px;
}

.rewards-compact-grid[b-w6n9bswaw2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.reward-compact-card[b-w6n9bswaw2] {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255,215,0,0.15);
}

.reward-place[b-w6n9bswaw2] {
    font-size: 14px;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 8px;
    text-align: center;
}

.reward-values[b-w6n9bswaw2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    color: white;
}

.reward-values span[b-w6n9bswaw2] {
    background: rgba(0,0,0,0.5);
    padding: 4px 8px;
    border-radius: 8px;
}

.mode-actions[b-w6n9bswaw2] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,215,0,0.15);
}

.btn-edit[b-w6n9bswaw2] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
}

.btn-edit:hover[b-w6n9bswaw2] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Edit form inside card */
.edit-form-container[b-w6n9bswaw2] {
    padding: 20px;
}

.edit-header[b-w6n9bswaw2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,215,0,0.3);
    color: #ffd700;
    font-weight: bold;
}

.edit-close[b-w6n9bswaw2] {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: white;
    cursor: pointer;
}

/* Form elements (reuse from your existing) */
.form-grid[b-w6n9bswaw2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 70px;
    margin-bottom: 20px;
}

.form-field label[b-w6n9bswaw2] {
    display: block;
    margin-bottom: 6px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

.form-input[b-w6n9bswaw2], .reward-input[b-w6n9bswaw2] {
    width: 70%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    font-size: 14px;
}

.form-input:focus[b-w6n9bswaw2], .reward-input:focus[b-w6n9bswaw2] {
    outline: none;
    border-color: #ffd700;
}

.checkbox-row[b-w6n9bswaw2] {
    display: flex;
    flex-wrap: wrap;
    gap: 61px;
    margin-bottom: 24px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.checkbox-label[b-w6n9bswaw2] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    cursor: pointer;
}

.rewards-section[b-w6n9bswaw2] { margin-top: 20px; }
.rewards-grid[b-w6n9bswaw2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 50px;
}

.reward-card[b-w6n9bswaw2] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 12px;
}

.reward-fields[b-w6n9bswaw2] { display: flex; flex-direction: column; gap: 8px; }
.reward-field label[b-w6n9bswaw2] { font-size: 11px; color: #a0a0b0; display: block; margin-bottom: 4px; }

.card-actions[b-w6n9bswaw2] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-save[b-w6n9bswaw2], .btn-cancel[b-w6n9bswaw2] { padding: 10px 24px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn-save[b-w6n9bswaw2] { background: linear-gradient(135deg, #28a745, #0d6e2e); border: none; color: white; }
.btn-cancel[b-w6n9bswaw2] { background: rgba(108, 117, 125, 0.2); border: 1px solid rgba(108, 117, 125, 0.3); color: #a0a0b0; }

.error-card[b-w6n9bswaw2] { color: aqua; text-align: center; padding: 20px; background: rgba(220, 53, 69, 0.15); border-radius: 12px; margin-bottom: 20px; }
.empty-state[b-w6n9bswaw2] { text-align: center; padding: 60px; background: rgba(10, 10, 20, 0.6); border-radius: 16px; }
.empty-icon[b-w6n9bswaw2] { font-size: 64px; display: block; margin-bottom: 16px; opacity: 0.5; }

.modal-overlay[b-w6n9bswaw2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.modal-content[b-w6n9bswaw2] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 16px;
    width: 380px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
}
.modal-header[b-w6n9bswaw2] { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid rgba(255, 215, 0, 0.15); }
.modal-header h3[b-w6n9bswaw2] { flex: 1; margin: 0; color: white; }
.modal-close[b-w6n9bswaw2] { background: none; border: none; color: #888; font-size: 24px; cursor: pointer; }
.modal-body[b-w6n9bswaw2] { padding: 24px; text-align: center; color: aqua; }
.modal-footer[b-w6n9bswaw2] { display: flex; gap: 12px; justify-content: flex-end; padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.btn-secondary[b-w6n9bswaw2] { padding: 8px 20px; background: rgba(108, 117, 125, 0.2); border: 1px solid rgba(108, 117, 125, 0.3); border-radius: 8px; color: #a0a0b0; cursor: pointer; }
.btn-danger[b-w6n9bswaw2] { padding: 8px 20px; background: linear-gradient(135deg, #dc3545, #8b0000); border: none; border-radius: 8px; color: white; cursor: pointer; }

.dot-pulse-loader[b-w6n9bswaw2] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}
.dot[b-w6n9bswaw2] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-w6n9bswaw2 1.5s ease-in-out infinite;
}
.dot:nth-child(2)[b-w6n9bswaw2] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-w6n9bswaw2] { animation-delay: 0.4s; }
@keyframes pulse-b-w6n9bswaw2 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@media (max-width: 768px) {
    .game-modes-container[b-w6n9bswaw2] { padding: 16px; }
    .main-heading[b-w6n9bswaw2] { font-size: 24px; }
    .details-grid[b-w6n9bswaw2] { grid-template-columns: 1fr; }
    .rewards-compact-grid[b-w6n9bswaw2] { grid-template-columns: 1fr; }
    .form-grid[b-w6n9bswaw2] { grid-template-columns: 1fr; gap: 16px; }
    .checkbox-row[b-w6n9bswaw2] { gap: 20px; }
}
/* /Components/Pages/GamesHistory.razor.rz.scp.css */
    /* Add the new filter group styles */
.filter-group[b-iy14x0l1l5] {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,215,0,0.15);
    padding-bottom: 16px;
}
.filter-group h4[b-iy14x0l1l5] {
    color: #ffd700;
    margin: 0 0 12px 0;
    font-size: 14px;
}
.filter-row[b-iy14x0l1l5] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.btn-apply[b-iy14x0l1l5] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn-apply:hover[b-iy14x0l1l5] {
    transform: translateY(-1px);
}

/* The rest of the original styles remain unchanged */
.game-history-container[b-iy14x0l1l5] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.header-section[b-iy14x0l1l5] {
    text-align: center;
    margin-bottom: 32px;
}
.main-heading[b-iy14x0l1l5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.heading-icon[b-iy14x0l1l5] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}
.badge[b-iy14x0l1l5] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}
.header-subtitle[b-iy14x0l1l5] {
    color: #a0a0b0;
    font-size: 14px;
}
.filters-card[b-iy14x0l1l5] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    padding: 24px;
    margin-bottom: 24px;
}
.filter-field[b-iy14x0l1l5] {
    flex: 1;
    min-width: 180px;
}
.filter-field label[b-iy14x0l1l5] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}
.filter-actions[b-iy14x0l1l5] {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}
.modern-input[b-iy14x0l1l5] {
    width: 70%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}
.modern-input:focus[b-iy14x0l1l5] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
}
.btn-clear[b-iy14x0l1l5] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}
.btn-delete[b-iy14x0l1l5] {
    padding: 10px 20px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 40px;
    color: #ff6b6b;
    cursor: pointer;
    margin-left: 430px;
}
.btn-clear:hover[b-iy14x0l1l5], .btn-delete:hover[b-iy14x0l1l5], .btn-apply:hover[b-iy14x0l1l5] {
    transform: translateY(-1px);
}
.results-info[b-iy14x0l1l5] {
    text-align: center;
    margin-bottom: 20px;
    color: #a0a0b0;
    font-size: 13px;
}
.results-info strong[b-iy14x0l1l5] {
    color: #ffd700;
}
.tabs[b-iy14x0l1l5] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(10, 10, 20, 0.4);
    padding: 8px;
    border-radius: 60px;
    width: fit-content;
}
.tab[b-iy14x0l1l5] {
    padding: 20px 100px;
    border: none;
    background: transparent;
    color: #a0a0b0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 40px;
    transition: all 0.2s ease;
}
.tab.active[b-iy14x0l1l5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}
.games-grid[b-iy14x0l1l5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}
.game-card[b-iy14x0l1l5] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}
.game-card:hover[b-iy14x0l1l5] {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.3);
}
.game-header[b-iy14x0l1l5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}
.game-icon[b-iy14x0l1l5] {
    font-size: 20px;
}
.game-time[b-iy14x0l1l5] {
    color: #ffd700;
    font-size: 13px;
    font-weight: 500;
}
.players-list[b-iy14x0l1l5] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.player-item[b-iy14x0l1l5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
}
.player-item.rank-1[b-iy14x0l1l5] { border-left: 4px solid #ffd700; }
.player-item.rank-2[b-iy14x0l1l5] { border-left: 4px solid #c0c0c0; }
.player-item.rank-3[b-iy14x0l1l5] { border-left: 4px solid #cd7f32; }
.player-item.rank-4[b-iy14x0l1l5] { border-left: 4px solid #8b0000; }
.player-info[b-iy14x0l1l5] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.player-rank[b-iy14x0l1l5] {
    font-size: 14px;
    font-weight: 700;
    color: #ffd700;
    min-width: 35px;
}
.player-name[b-iy14x0l1l5] {
    color: white;
    font-size: 14px;
}
.player-name.clickable[b-iy14x0l1l5] {
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.player-name.clickable:hover[b-iy14x0l1l5] {
    transform: translateX(2px);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
.winner-badge[b-iy14x0l1l5] {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.loser-badge[b-iy14x0l1l5] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.pagination-section[b-iy14x0l1l5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}
.pagination-info[b-iy14x0l1l5] {
    color: #a0a0b0;
    font-size: 13px;
}
.pagination-controls[b-iy14x0l1l5] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-btn[b-iy14x0l1l5] {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 40px;
    color: #e0e0e0;
    cursor: pointer;
}
.page-btn:disabled[b-iy14x0l1l5] {
    opacity: 0.4;
    cursor: not-allowed;
}
.page-current[b-iy14x0l1l5] {
    padding: 6px 16px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 700;
}
.page-size[b-iy14x0l1l5] {
    margin-left: 12px;
}
.size-select[b-iy14x0l1l5] {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    cursor: pointer;
}
.stats-container[b-iy14x0l1l5] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    padding: 24px;
}
.graph-controls[b-iy14x0l1l5] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.graph-btn[b-iy14x0l1l5] {
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}
.graph-btn.active[b-iy14x0l1l5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}
.heatmap-card[b-iy14x0l1l5] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 20px;
}
.heatmap-title[b-iy14x0l1l5] {
    text-align: center;
    color: #ffd700;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}
.heatmap-grid[b-iy14x0l1l5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}
.heatmap-cell[b-iy14x0l1l5] {
    text-align: center;
    padding: 20px 20px;
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.heatmap-cell:hover[b-iy14x0l1l5] {
    transform: scale(1.05);
}
.heat-period[b-iy14x0l1l5] {
    font-size: 11px;
    display: block;
    margin-bottom: 4px;
    opacity: 0.8;
}
.heat-count[b-iy14x0l1l5] {
    font-size: 16px;
    font-weight: 700;
    display: block;
}
.heat-0[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.05); color: #a0a0b0; }
.heat-1[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.12); color: #ffd700; }
.heat-2[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.2); color: #ffd700; }
.heat-3[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.28); color: #ffd700; }
.heat-4[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.36); color: #fff; }
.heat-5[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.44); color: #fff; }
.heat-6[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.52); color: #fff; }
.heat-7[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.6); color: #fff; }
.heat-8[b-iy14x0l1l5] { background: rgba(255, 215, 0, 0.7); color: #fff; }
.heat-9[b-iy14x0l1l5] { background: #ffd700; color: #1a1a2e; }
.stats-summary[b-iy14x0l1l5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px;
}
.stat-card[b-iy14x0l1l5] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.stat-icon[b-iy14x0l1l5] {
    font-size: 32px;
}
.stat-content[b-iy14x0l1l5] {
    flex: 1;
}
.stat-label[b-iy14x0l1l5] {
    color: #a0a0b0;
    font-size: 12px;
    margin-bottom: 4px;
}
.stat-value[b-iy14x0l1l5] {
    color: #ffd700;
    font-size: 24px;
    font-weight: 700;
}
.loading-state[b-iy14x0l1l5], .empty-state[b-iy14x0l1l5] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}
.dot-pulse[b-iy14x0l1l5] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}
.dot-pulse .dot[b-iy14x0l1l5] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-iy14x0l1l5 1.5s ease-in-out infinite;
}
.empty-icon[b-iy14x0l1l5] {
    font-size: 64px;
    opacity: 0.5;
    margin-bottom: 16px;
}
.empty-state p[b-iy14x0l1l5] {
    color: #a0a0b0;
}
.modal-overlay[b-iy14x0l1l5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.modal-content[b-iy14x0l1l5] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 400px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
}
.modal-header[b-iy14x0l1l5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}
.modal-header.danger[b-iy14x0l1l5] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}
.modal-icon[b-iy14x0l1l5] {
    font-size: 24px;
}
.modal-header h3[b-iy14x0l1l5] {
    flex: 1;
    margin: 0;
    color: white;
}
.modal-close[b-iy14x0l1l5] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}
.modal-body[b-iy14x0l1l5] {
    color: aqua;
    padding: 24px;
    text-align: center;
}
.modal-body strong[b-iy14x0l1l5] {
    color: #ffd700;
}
.warning-text[b-iy14x0l1l5] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}
.delete-stats[b-iy14x0l1l5] {
    margin-top: 16px;
    padding: 10px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 8px;
}
.modal-footer[b-iy14x0l1l5] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.btn-cancel[b-iy14x0l1l5] {
    padding: 8px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}
.btn-confirm[b-iy14x0l1l5] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}
.btn-confirm:disabled[b-iy14x0l1l5] {
    opacity: 0.5;
    cursor: not-allowed;
}
.dot-pulse-loader[b-iy14x0l1l5] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}
.dot[b-iy14x0l1l5] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-iy14x0l1l5 1.5s ease-in-out infinite;
}
.dot:nth-child(2)[b-iy14x0l1l5] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-iy14x0l1l5] { animation-delay: 0.4s; }
@keyframes pulse-b-iy14x0l1l5 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}
@media (max-width: 900px) {
    .stats-summary[b-iy14x0l1l5] { grid-template-columns: 1fr; }
    .heatmap-grid[b-iy14x0l1l5] { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 768px) {
    .game-history-container[b-iy14x0l1l5] { padding: 16px; }
    .main-heading[b-iy14x0l1l5] { font-size: 24px; }
    .filter-row[b-iy14x0l1l5] { flex-direction: column; }
    .filter-actions[b-iy14x0l1l5] { width: 100%; flex-direction: column; }
    .btn-clear[b-iy14x0l1l5], .btn-delete[b-iy14x0l1l5], .btn-apply[b-iy14x0l1l5] { width: 100%; text-align: center; }
    .games-grid[b-iy14x0l1l5] { grid-template-columns: 1fr; }
    .pagination-section[b-iy14x0l1l5] { flex-direction: column; gap: 12px; }
    .heatmap-grid[b-iy14x0l1l5] { grid-template-columns: repeat(4, 1fr); }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Dashboard Container */
.dashboard-container[b-k8h3ulc1j7] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Dashboard Header */
.dashboard-header[b-k8h3ulc1j7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 28px;
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.welcome-text[b-k8h3ulc1j7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.welcome-icon[b-k8h3ulc1j7] {
    font-size: 32px;
}

.welcome-text h1[b-k8h3ulc1j7] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #e0e0e0;
}

.username[b-k8h3ulc1j7] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.logout-btn[b-k8h3ulc1j7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 40px;
    color: #ff6b6b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logout-btn:hover[b-k8h3ulc1j7] {
    background: rgba(220, 53, 69, 0.3);
    transform: translateY(-2px);
}

/* Stats Grid */
.stats-grid[b-k8h3ulc1j7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-k8h3ulc1j7] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    transition: all 0.3s ease;
}

.stat-card:hover[b-k8h3ulc1j7] {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.3);
}

.stat-icon[b-k8h3ulc1j7] {
    font-size: 48px;
}

.stat-content[b-k8h3ulc1j7] {
    flex: 1;
}

.stat-value[b-k8h3ulc1j7] {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-k8h3ulc1j7] {
    color: #a0a0b0;
    font-size: 13px;
    margin-top: 8px;
}

.stat-card.players .stat-value[b-k8h3ulc1j7] { color: #00ff88; }
.stat-card.viewers .stat-value[b-k8h3ulc1j7] { color: #ffd700; }
.stat-card.total .stat-value[b-k8h3ulc1j7] { color: #ff9800; }

/* Online Section */
.online-section[b-k8h3ulc1j7] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    padding: 24px;
    overflow: hidden;
}

.section-header[b-k8h3ulc1j7] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.section-icon[b-k8h3ulc1j7] {
    font-size: 20px;
}

.section-header h2[b-k8h3ulc1j7] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffd700;
}

.online-count[b-k8h3ulc1j7] {
    margin-left: auto;
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    color: #ffd700;
}

/* Users Grid */
.users-grid[b-k8h3ulc1j7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* User Card */
.user-card[b-k8h3ulc1j7] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    animation: fadeInUp-b-k8h3ulc1j7 0.4s ease forwards;
    opacity: 0;
}

.user-card:hover[b-k8h3ulc1j7] {
    transform: translateX(5px);
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
}

.user-avatar[b-k8h3ulc1j7] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.user-avatar.online[b-k8h3ulc1j7] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.user-avatar.playing[b-k8h3ulc1j7] {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.user-info[b-k8h3ulc1j7] {
    flex: 1;
}

.user-name[b-k8h3ulc1j7] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.user-status[b-k8h3ulc1j7] {
    font-size: 12px;
    margin-top: 4px;
}

.user-status.online[b-k8h3ulc1j7] {
    color: #667eea;
}

.user-status.playing[b-k8h3ulc1j7] {
    color: #10b981;
}

.user-arrow[b-k8h3ulc1j7] {
    color: #ffd700;
    font-size: 18px;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

.user-card:hover .user-arrow[b-k8h3ulc1j7] {
    opacity: 1;
    transform: translateX(0);
}

/* Animations */
@keyframes fadeInUp-b-k8h3ulc1j7 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-card:nth-child(1)[b-k8h3ulc1j7] { animation-delay: 0.05s; }
.user-card:nth-child(2)[b-k8h3ulc1j7] { animation-delay: 0.1s; }
.user-card:nth-child(3)[b-k8h3ulc1j7] { animation-delay: 0.15s; }
.user-card:nth-child(4)[b-k8h3ulc1j7] { animation-delay: 0.2s; }
.user-card:nth-child(5)[b-k8h3ulc1j7] { animation-delay: 0.25s; }
.user-card:nth-child(6)[b-k8h3ulc1j7] { animation-delay: 0.3s; }

/* Empty State */
.empty-state[b-k8h3ulc1j7] {
    text-align: center;
    padding: 60px;
}

.empty-icon[b-k8h3ulc1j7] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-k8h3ulc1j7] {
    color: #a0a0b0;
}

/* Loading State */
.loading-state[b-k8h3ulc1j7] {
    text-align: center;
    padding: 40px;
}

.dot-pulse.small[b-k8h3ulc1j7] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dot-pulse.small .dot[b-k8h3ulc1j7] {
    width: 8px;
    height: 8px;
}

.loading-state p[b-k8h3ulc1j7] {
    color: #a0a0b0;
    font-size: 13px;
}

/* Loading Animation */
.dot-pulse-loader[b-k8h3ulc1j7] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-k8h3ulc1j7] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-k8h3ulc1j7 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-k8h3ulc1j7] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-k8h3ulc1j7] { animation-delay: 0.4s; }

@keyframes pulse-b-k8h3ulc1j7 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
    .stats-grid[b-k8h3ulc1j7] {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .stat-card[b-k8h3ulc1j7] {
        padding: 18px;
    }

    .stat-icon[b-k8h3ulc1j7] {
        font-size: 36px;
    }

    .stat-value[b-k8h3ulc1j7] {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-k8h3ulc1j7] {
        padding: 16px;
    }

    .dashboard-header[b-k8h3ulc1j7] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 16px 20px;
    }

    .welcome-text[b-k8h3ulc1j7] {
        flex-direction: column;
    }

    .welcome-text h1[b-k8h3ulc1j7] {
        font-size: 20px;
    }

    .stats-grid[b-k8h3ulc1j7] {
        gap: 12px;
    }

    .stat-card[b-k8h3ulc1j7] {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .stat-icon[b-k8h3ulc1j7] {
        font-size: 32px;
    }

    .stat-value[b-k8h3ulc1j7] {
        font-size: 24px;
    }

    .users-grid[b-k8h3ulc1j7] {
        grid-template-columns: 1fr;
    }

    .online-section[b-k8h3ulc1j7] {
        padding: 16px;
    }

    .section-header h2[b-k8h3ulc1j7] {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .stats-grid[b-k8h3ulc1j7] {
        grid-template-columns: 1fr;
    }

    .logout-btn[b-k8h3ulc1j7] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/LeaderboardRewards.razor.rz.scp.css */
/* League Container */
.league-container[b-2jb5w76bge] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-2jb5w76bge] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-2jb5w76bge] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-2jb5w76bge] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-2jb5w76bge] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-2jb5w76bge] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-create[b-2jb5w76bge] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-2jb5w76bge] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Table Container */
.rewards-table-container[b-2jb5w76bge] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
}

.rewards-table[b-2jb5w76bge] {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}
/* Rank Label */
.rank-label[b-2jb5w76bge] {
    color: #ffd700;
    font-weight: 600;
}

/* Period Group Header */
.period-header td[b-2jb5w76bge] {
    padding: 8px 16px !important;
    background: rgba(255, 215, 0, 0.08) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
}

.period-group-badge[b-2jb5w76bge] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #ffd700;
    font-size: 14px;
}

.reward-count-badge[b-2jb5w76bge] {
    margin-left: 12px;
    background: rgba(255, 215, 0, 0.15);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    color: #ffd700;
}

.period-label[b-2jb5w76bge] {
    color: #a0a0b0;
    font-size: 12px;
}

/* Reward Row */
.reward-row.editing[b-2jb5w76bge] {
    background: rgba(255, 215, 0, 0.08);
}
.rewards-table th[b-2jb5w76bge] {
    padding: 16px 20px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.reward-row td[b-2jb5w76bge] {
    padding: 14px 20px;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reward-row:hover[b-2jb5w76bge] {
    background: rgba(255, 215, 0, 0.05);
}

.reward-row.editing[b-2jb5w76bge] {
    background: rgba(255, 215, 0, 0.08);
}

/* Column Widths */
.col-rank[b-2jb5w76bge] { width: 80px; }
.col-period[b-2jb5w76bge] { width: 120px; }
.col-type[b-2jb5w76bge] { width: 140px; }
.col-value[b-2jb5w76bge] { width: 140px; }
.col-actions[b-2jb5w76bge] { width: 160px; }

/* Rank Badge */
.rank-cell[b-2jb5w76bge] {
    font-weight: 700;
}

.rank-badge[b-2jb5w76bge] {
    display: inline-block;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.1));
    padding: 4px 12px;
    border-radius: 40px;
    color: #ffd700;
    font-size: 14px;
}

/* Period Badge */
.period-badge[b-2jb5w76bge] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

/* Reward Type Badge */
.reward-type-badge[b-2jb5w76bge] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.reward-type-badge.coin[b-2jb5w76bge] {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

.reward-type-badge.gem[b-2jb5w76bge] {
    background: rgba(233, 30, 99, 0.15);
    color: #e91e63;
    border: 1px solid rgba(233, 30, 99, 0.3);
}

.reward-type-badge.avatar[b-2jb5w76bge] {
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.reward-type-badge.pawn[b-2jb5w76bge] {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.reward-type-badge.frame[b-2jb5w76bge] {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Value Display */
.amount-value[b-2jb5w76bge] {
    font-weight: 600;
    color: #ffd700;
}

.item-id-value[b-2jb5w76bge] {
    font-weight: 500;
    color: #00ff88;
}

/* Action Buttons */
.action-buttons[b-2jb5w76bge] {
    display: flex;
    gap: 8px;
}

.btn-edit[b-2jb5w76bge], .btn-delete[b-2jb5w76bge], .btn-save[b-2jb5w76bge], .btn-cancel[b-2jb5w76bge] {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-2jb5w76bge] {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
}

.btn-edit:hover[b-2jb5w76bge] {
    background: rgba(255, 215, 0, 0.3);
}

.btn-delete[b-2jb5w76bge] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
}

.btn-delete:hover[b-2jb5w76bge] {
    background: rgba(220, 53, 69, 0.3);
}

.btn-save[b-2jb5w76bge] {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.btn-save:hover[b-2jb5w76bge] {
    background: rgba(40, 167, 69, 0.4);
}

.btn-cancel[b-2jb5w76bge] {
    background: rgba(108, 117, 125, 0.2);
    color: #a0a0b0;
}

.btn-cancel:hover[b-2jb5w76bge] {
    background: rgba(108, 117, 125, 0.4);
}

/* Edit Inputs */
.edit-input[b-2jb5w76bge] {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    width: 100%;
    max-width: 120px;
}

.edit-input:focus[b-2jb5w76bge] {
    outline: none;
    border-color: #ffd700;
}

.edit-select[b-2jb5w76bge] {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    width: 100%;
}

.edit-select:focus[b-2jb5w76bge] {
    outline: none;
    border-color: #ffd700;
}

/* Validation Error */
.validation-error[b-2jb5w76bge] {
    color: #ff6b6b;
    font-size: 10px;
    display: block;
    margin-top: 4px;
}

/* Modal */
.modal-overlay[b-2jb5w76bge] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-2jb5w76bge] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 24px;
    width: 550px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.confirm-modal[b-2jb5w76bge] {
    width: 380px;
}

.modal-header[b-2jb5w76bge] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-2jb5w76bge] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-2jb5w76bge] {
    font-size: 24px;
}

.modal-header h3[b-2jb5w76bge] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-2jb5w76bge] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-2jb5w76bge] {
    padding: 24px;
}

.modal-body p[b-2jb5w76bge] {
    color: #e0e0e0;
    text-align: center;
    margin: 0;
}

/* Form Grid */
.form-grid[b-2jb5w76bge] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-field[b-2jb5w76bge] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-2jb5w76bge] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

.modern-input[b-2jb5w76bge] {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

.modern-input:focus[b-2jb5w76bge] {
    outline: none;
    border-color: #ffd700;
}

.modern-select[b-2jb5w76bge] {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

.modern-select:focus[b-2jb5w76bge] {
    outline: none;
    border-color: #ffd700;
}

.error-text[b-2jb5w76bge] {
    color: #ff6b6b;
    font-size: 11px;
}

.modal-footer[b-2jb5w76bge] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-2jb5w76bge] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}

.btn-create-modal[b-2jb5w76bge] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    cursor: pointer;
    font-weight: 600;
}

.btn-delete[b-2jb5w76bge] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

.btn-create-modal:disabled[b-2jb5w76bge],
.btn-save:disabled[b-2jb5w76bge] {
    opacity: 0.5;
    cursor: not-allowed;
}

.warning-text[b-2jb5w76bge] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Toast Notifications */
.toast-notification[b-2jb5w76bge] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-2jb5w76bge 0.3s ease;
    z-index: 10001;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.success[b-2jb5w76bge] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border-left: 4px solid #ffd700;
}

.toast-notification.error[b-2jb5w76bge] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border-left: 4px solid #ffd700;
}

.toast-notification span:first-child[b-2jb5w76bge] {
    font-size: 18px;
}

.toast-notification span:nth-child(2)[b-2jb5w76bge] {
    flex: 1;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.toast-close[b-2jb5w76bge] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-close:hover[b-2jb5w76bge] {
    opacity: 1;
}

/* Error Card */
.error-card[b-2jb5w76bge] {
    text-align: center;
    padding: 40px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 20px;
}

.error-icon[b-2jb5w76bge] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.error-card p[b-2jb5w76bge] {
    color: #ff6b6b;
    margin-bottom: 16px;
}

.retry-btn[b-2jb5w76bge] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 8px 20px;
    color: #1a1a2e;
    cursor: pointer;
}

/* Empty State */
.empty-state[b-2jb5w76bge] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-2jb5w76bge] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-2jb5w76bge] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Loading */
.dot-pulse-loader[b-2jb5w76bge] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-2jb5w76bge] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-2jb5w76bge 1.5s ease-in-out infinite;
}

@keyframes pulse-b-2jb5w76bge {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes slideInRight-b-2jb5w76bge {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .form-grid[b-2jb5w76bge] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .league-container[b-2jb5w76bge] {
        padding: 16px;
    }

    .main-heading[b-2jb5w76bge] {
        font-size: 24px;
    }

    .header-section[b-2jb5w76bge] {
        flex-wrap: wrap;
    }

    .action-buttons[b-2jb5w76bge] {
        flex-wrap: wrap;
    }

    .col-rank[b-2jb5w76bge] { width: 60px; }
    .col-period[b-2jb5w76bge] { width: 100px; }
    .col-type[b-2jb5w76bge] { width: 120px; }
    .col-value[b-2jb5w76bge] { width: 120px; }
    .col-actions[b-2jb5w76bge] { width: 140px; }

    .rewards-table th[b-2jb5w76bge],
    .reward-row td[b-2jb5w76bge] {
        padding: 10px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .badge[b-2jb5w76bge] {
        font-size: 10px;
    }

    .toast-notification[b-2jb5w76bge] {
        top: 16px;
        right: 16px;
        left: 16px;
        min-width: auto;
    }
}
/* /Components/Pages/Levels.razor.rz.scp.css */
/* Levels Container */
.levels-container[b-hxpj5vzu9w] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-hxpj5vzu9w] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-hxpj5vzu9w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-hxpj5vzu9w] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-hxpj5vzu9w] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-hxpj5vzu9w] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-create[b-hxpj5vzu9w] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-create:hover[b-hxpj5vzu9w] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Table Container */
.table-container[b-hxpj5vzu9w] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
}

.levels-table[b-hxpj5vzu9w] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

/* Header Row */
.header-row th[b-hxpj5vzu9w] {
    padding: 16px 20px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

/* Column Widths */
.col-level[b-hxpj5vzu9w] { width: 100px; }
.col-exp[b-hxpj5vzu9w] { width: 200px; }
.col-reward[b-hxpj5vzu9w] { width: 150px; }
.col-actions[b-hxpj5vzu9w] { width: 150px; }

/* Level Row */
.level-row td[b-hxpj5vzu9w] {
    padding: 14px 20px;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.level-row:hover[b-hxpj5vzu9w] {
    background: rgba(255, 215, 0, 0.05);
}

.level-row.editing[b-hxpj5vzu9w] {
    background: rgba(255, 215, 0, 0.1);
}

/* Level Badge */
.level-badge[b-hxpj5vzu9w] {
    display: inline-block;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.08));
    padding: 6px 16px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    color: #ffd700;
}

.level-number[b-hxpj5vzu9w] {
    font-size: 16px;
    font-weight: 700;
    color: #ffd700;
}

/* Exp Value */
.exp-value[b-hxpj5vzu9w] {
    font-weight: 600;
    color: white;
}

/* Reward Value */
.reward-value[b-hxpj5vzu9w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffd700;
    font-weight: 600;
}

/* Action Buttons */
.action-buttons[b-hxpj5vzu9w] {
    display: flex;
    gap: 8px;
}

.action-btn[b-hxpj5vzu9w] {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.action-btn.edit[b-hxpj5vzu9w] { color: #ffd700; background: rgba(255, 215, 0, 0.1); }
.action-btn.delete[b-hxpj5vzu9w] { color: #ff6b6b; background: rgba(220, 53, 69, 0.1); }
.action-btn.save[b-hxpj5vzu9w] { color: #28a745; background: rgba(40, 167, 69, 0.1); }
.action-btn.cancel[b-hxpj5vzu9w] { color: #a0a0a0; background: rgba(108, 117, 125, 0.1); }

.action-btn:hover[b-hxpj5vzu9w] {
    transform: scale(1.05);
}

/* Modern Input */
.modern-input[b-hxpj5vzu9w] {
    width: 100%;
    max-width: 180px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-hxpj5vzu9w] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

/* Error Card */
.error-card[b-hxpj5vzu9w] {
    text-align: center;
    padding: 40px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 20px;
    margin-bottom: 20px;
}

.error-icon[b-hxpj5vzu9w] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.error-card p[b-hxpj5vzu9w] {
    color: #ff6b6b;
    margin-bottom: 16px;
}

.retry-btn[b-hxpj5vzu9w] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 8px 20px;
    color: #1a1a2e;
    cursor: pointer;
}

/* Empty State */
.empty-state[b-hxpj5vzu9w] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-hxpj5vzu9w] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-hxpj5vzu9w] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Modal */
.modal-overlay[b-hxpj5vzu9w] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-hxpj5vzu9w] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 24px;
    width: 450px;
    max-width: 90%;
    animation: slideIn-b-hxpj5vzu9w 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.confirm-modal[b-hxpj5vzu9w] {
    width: 380px;
}

.modal-header[b-hxpj5vzu9w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-hxpj5vzu9w] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-hxpj5vzu9w] {
    font-size: 24px;
}

.modal-header h3[b-hxpj5vzu9w] {
    flex: 1;
    margin: 0;
    color: white;
    font-size: 18px;
}

.modal-close[b-hxpj5vzu9w] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-hxpj5vzu9w] {
    color: aqua;
    padding: 24px;
}

.modal-body .form-field[b-hxpj5vzu9w] {
    margin-bottom: 20px;
}
.pagination-container[b-hxpj5vzu9w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 16px;
}

.page-btn[b-hxpj5vzu9w] {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 40px;
    color: #e0e0e0;
    cursor: pointer;
}
.page-btn:hover[b-hxpj5vzu9w]{
    background: #d4a017;
}

.page-btn:disabled[b-hxpj5vzu9w] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-hxpj5vzu9w], .total-info[b-hxpj5vzu9w] {
    color: #ffd700;
    font-size: 14px;
}
.form-field label[b-hxpj5vzu9w] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

.modal-body .modern-input[b-hxpj5vzu9w] {
    width: 100%;
    max-width: none;
}

.error-text[b-hxpj5vzu9w] {
    color: #ff6b6b;
    font-size: 12px;
    text-align: center;
    margin-top: 16px;
}

.modal-footer[b-hxpj5vzu9w] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel-modal[b-hxpj5vzu9w] {
    padding: 10px 24px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
    font-weight: 600;
}

.btn-save-modal[b-hxpj5vzu9w] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

.btn-delete-modal[b-hxpj5vzu9w] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

/* Loading */
.dot-pulse-loader[b-hxpj5vzu9w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-hxpj5vzu9w] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-hxpj5vzu9w 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-hxpj5vzu9w] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-hxpj5vzu9w] { animation-delay: 0.4s; }

@keyframes pulse-b-hxpj5vzu9w {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

/* Responsive */
@media (max-width: 768px) {
    .levels-container[b-hxpj5vzu9w] {
        padding: 16px;
    }

    .main-heading[b-hxpj5vzu9w] {
        font-size: 24px;
    }

    .col-level[b-hxpj5vzu9w] { width: 80px; }
    .col-exp[b-hxpj5vzu9w] { width: 140px; }
    .col-reward[b-hxpj5vzu9w] { width: 100px; }
    .col-actions[b-hxpj5vzu9w] { width: 130px; }

    .header-row th[b-hxpj5vzu9w],
    .level-row td[b-hxpj5vzu9w] {
        padding: 10px 12px;
        font-size: 12px;
    }

    .level-badge[b-hxpj5vzu9w] {
        padding: 4px 10px;
        font-size: 12px;
    }

    .action-btn[b-hxpj5vzu9w] {
        padding: 4px 8px;
        font-size: 11px;
    }

    .modern-input[b-hxpj5vzu9w] {
        max-width: 120px;
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .levels-container[b-hxpj5vzu9w] {
        padding: 12px;
    }

    .badge[b-hxpj5vzu9w] {
        font-size: 10px;
    }

    .action-buttons[b-hxpj5vzu9w] {
        flex-direction: column;
        gap: 4px;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-container[b-5lo9ipaodf] {
    min-height: 100vh !important;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    margin: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    overflow: auto !important;
}

/* Login Card */
.login-card[b-5lo9ipaodf] {
    background: rgba(10, 10, 20, 0.85) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    padding: 48px !important;
    width: 100% !important;
    max-width: 460px !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
}

/* Icons */
.login-icon[b-5lo9ipaodf] {
    text-align: center !important;
    font-size: 56px !important;
    margin-bottom: 20px !important;
}

.welcome-icon[b-5lo9ipaodf] {
    text-align: center !important;
    font-size: 64px !important;
    margin-bottom: 20px !important;
}

/* Header */
.login-header[b-5lo9ipaodf] {
    text-align: center !important;
    margin-bottom: 36px !important;
}

.login-header h3[b-5lo9ipaodf] {
    color: #ffd700 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    margin-bottom: 10px !important;
    background: none !important;
    -webkit-text-fill-color: #ffd700 !important;
}

.login-header p[b-5lo9ipaodf] {
    color: #a0a0b0 !important;
    font-size: 15px !important;
}

/* Form Group */
.form-group[b-5lo9ipaodf] {
    margin-bottom: 24px !important;
    padding-left: 90px !important;
}

.form-group label[b-5lo9ipaodf] {
    display: block !important;
    margin-bottom: 10px !important;
    color: #c0c0d0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    background: none !important;
}

/* Login Input - CLEAN, NO SHADOW */
.login-input[b-5lo9ipaodf] {
    width: 100% !important;
    height: 56px !important;
    padding: 0 20px !important;
    background: #0a0a14 !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 14px !important;
    color: white !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.login-input:focus[b-5lo9ipaodf] {
    border-color: #ffd700 !important;
    background: #12121f !important;
    box-shadow: none !important;
    outline: none !important;
}

.login-input[b-5lo9ipaodf]::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 14px !important;
}

/* Validation Error */
.validation-error[b-5lo9ipaodf] {
    color: #ff6b6b !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    display: block !important;
}

/* Login Button - CLEAN, NO SHADOW */
.btn-login[b-5lo9ipaodf] {
    width: 100% !important;
    height: 56px !important;
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
    border: none !important;
    border-radius: 40px !important;
    color: #1a1a2e !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    margin-top: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: opacity 0.2s ease !important;
}

.btn-login:hover:not(:disabled)[b-5lo9ipaodf] {
    opacity: 0.9 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-login:disabled[b-5lo9ipaodf] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Dashboard Button */
.btn-dashboard[b-5lo9ipaodf] {
    width: 100% !important;
    height: 50px !important;
    background: linear-gradient(135deg, #28a745, #0d6e2e) !important;
    border: none !important;
    border-radius: 40px !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-bottom: 12px !important;
    box-shadow: none !important;
}

.btn-dashboard:hover[b-5lo9ipaodf] {
    opacity: 0.9 !important;
    box-shadow: none !important;
}

/* Logout Button */
.btn-logout[b-5lo9ipaodf] {
    width: 100% !important;
    height: 50px !important;
    background: rgba(220, 53, 69, 0.2) !important;
    border: 1px solid rgba(220, 53, 69, 0.4) !important;
    border-radius: 40px !important;
    color: #ff8a8a !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.btn-logout:hover[b-5lo9ipaodf] {
    background: rgba(220, 53, 69, 0.35) !important;
    box-shadow: none !important;
}

.logged-in-actions[b-5lo9ipaodf] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Alert */
.alert[b-5lo9ipaodf] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    margin-bottom: 28px !important;
    box-shadow: none !important;
}

.alert.error[b-5lo9ipaodf] {
    background: rgba(220, 53, 69, 0.2) !important;
    border: 1px solid rgba(220, 53, 69, 0.4) !important;
    color: #ff8a8a !important;
}

.alert-icon[b-5lo9ipaodf] {
    font-size: 20px !important;
}

/* Footer */
.login-footer[b-5lo9ipaodf] {
    text-align: center !important;
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 215, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #a0a0b0 !important;
    font-size: 13px !important;
}

.shield-icon[b-5lo9ipaodf] {
    font-size: 16px !important;
}

/* Loading */
.dot-pulse-loader[b-5lo9ipaodf] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 100vh !important;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

.dot[b-5lo9ipaodf] {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #ffd700 !important;
    animation: pulse-b-5lo9ipaodf 1.5s ease-in-out infinite !important;
}
/* ULTRA SPECIFIC OVERRIDE */
body .login-container input[b-5lo9ipaodf],
body .login-container input:focus[b-5lo9ipaodf],
body .login-container input[type="text"][b-5lo9ipaodf],
body .login-container input[type="password"][b-5lo9ipaodf],
.login-container .login-input[b-5lo9ipaodf],
.login-container .login-input:focus[b-5lo9ipaodf] {
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    background: #0a0a14 !important;
    color: white !important;
    height: 56px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    transition: none !important;
}

/* Remove any transform or scale effects */
.btn-login:hover[b-5lo9ipaodf],
.btn-login:focus[b-5lo9ipaodf],
.btn-login:active[b-5lo9ipaodf] {
    transform: none !important;
    scale: none !important;
    box-shadow: none !important;
}
.dot:nth-child(2)[b-5lo9ipaodf] { animation-delay: 0.2s !important; }
.dot:nth-child(3)[b-5lo9ipaodf] { animation-delay: 0.4s !important; }

@keyframes pulse-b-5lo9ipaodf {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 550px) {
    .login-card[b-5lo9ipaodf] {
        padding: 32px 24px !important;
        max-width: 95% !important;
    }

    .login-header h3[b-5lo9ipaodf] {
        font-size: 26px !important;
    }

    .login-input[b-5lo9ipaodf] {
        height: 50px !important;
        font-size: 15px !important;
    }

    .btn-login[b-5lo9ipaodf] {
        height: 50px !important;
        font-size: 16px !important;
    }

    .login-icon[b-5lo9ipaodf] {
        font-size: 48px !important;
    }
}

@media (max-width: 400px) {
    .login-card[b-5lo9ipaodf] {
        padding: 28px 20px !important;
    }

    .login-header h3[b-5lo9ipaodf] {
        font-size: 24px !important;
    }

    .form-group[b-5lo9ipaodf] {
        margin-bottom: 20px !important;
        padding-left: 90px !important;
    }

    .login-input[b-5lo9ipaodf] {
        height: 46px !important;
        font-size: 14px !important;
    }
}
/* /Components/Pages/Messages.razor.rz.scp.css */
/* Messages Container */
.messages-container[b-f4ybgp7kce] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-f4ybgp7kce] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-f4ybgp7kce] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-f4ybgp7kce] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-f4ybgp7kce] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-f4ybgp7kce] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 24px;
}

/* Action Bar */
.action-bar[b-f4ybgp7kce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group[b-f4ybgp7kce] {
    display: flex;
    align-items: center;
}

.filter-select[b-f4ybgp7kce] {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    padding: 10px 16px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.filter-select:focus[b-f4ybgp7kce] {
    outline: none;
    border-color: #ffd700;
}

.btn-create[b-f4ybgp7kce] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-f4ybgp7kce] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Messages Grid */
.messages-grid[b-f4ybgp7kce] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* Message Card */
.message-card[b-f4ybgp7kce] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.message-card:hover[b-f4ybgp7kce] {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.message-card.public[b-f4ybgp7kce] {
    border-left: 4px solid #28a745;
}

.message-card.private[b-f4ybgp7kce] {
    border-left: 4px solid #ff9800;
}

/* Message Header */
.message-header[b-f4ybgp7kce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.message-type[b-f4ybgp7kce] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-icon[b-f4ybgp7kce] {
    font-size: 16px;
}

.type-label[b-f4ybgp7kce] {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
}

.message-card.public .type-label[b-f4ybgp7kce] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.message-card.private .type-label[b-f4ybgp7kce] {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.delete-btn[b-f4ybgp7kce] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.delete-btn:hover[b-f4ybgp7kce] {
    background: rgba(220, 53, 69, 0.35);
    transform: scale(1.05);
}

/* Message Content */
.message-title[b-f4ybgp7kce] {
    padding: 18px 20px 8px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
    line-height: 1.3;
}

.message-content[b-f4ybgp7kce] {
    padding: 0 20px 16px 20px;
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.5;
}

/* Message Link */
.message-link[b-f4ybgp7kce] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 20px 12px 20px;
    border-radius: 10px;
}

.link-icon[b-f4ybgp7kce] {
    font-size: 14px;
}

.link-text[b-f4ybgp7kce] {
    font-size: 12px;
    color: #4a9eff;
    font-family: monospace;
    word-break: break-all;
}

/* Message Footer */
.message-footer[b-f4ybgp7kce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 215, 0, 0.08);
    font-size: 12px;
}

.message-date[b-f4ybgp7kce] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a0a0b0;
}

.date-icon[b-f4ybgp7kce] {
    font-size: 12px;
}

.message-user[b-f4ybgp7kce] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a0a0b0;
}

.user-icon[b-f4ybgp7kce] {
    font-size: 12px;
}

.clickable-user[b-f4ybgp7kce] {
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable-user:hover[b-f4ybgp7kce] {
    text-decoration: underline;
    transform: translateX(2px);
}

/* Empty State */
.empty-state[b-f4ybgp7kce] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
    margin-top: 24px;
}

.empty-icon[b-f4ybgp7kce] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-f4ybgp7kce] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Modal */
.modal-overlay[b-f4ybgp7kce] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-f4ybgp7kce] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 24px;
    width: 500px;
    max-width: 90%;
    animation: slideIn-b-f4ybgp7kce 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.confirm-modal[b-f4ybgp7kce] {
    width: 380px;
}

.modal-header[b-f4ybgp7kce] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-f4ybgp7kce] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-f4ybgp7kce] {
    font-size: 24px;
}

.modal-header h3[b-f4ybgp7kce] {
    flex: 1;
    margin: 0;
    color: white;
    font-size: 18px;
}

.modal-close[b-f4ybgp7kce] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-f4ybgp7kce] {
    padding: 24px;
    color: aqua;
}

.form-field[b-f4ybgp7kce] {
    margin-bottom: 20px;
}

.form-field label[b-f4ybgp7kce] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 13px;
    font-weight: 500;
}

.required[b-f4ybgp7kce] {
    color: #ff6b6b;
}

.modern-input[b-f4ybgp7kce] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-f4ybgp7kce] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

textarea.modern-input[b-f4ybgp7kce] {
    resize: vertical;
    min-height: 100px;
}

.checkbox-field[b-f4ybgp7kce] {
    margin: 20px 0;
}

.checkbox-label[b-f4ybgp7kce] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: white;
}

.error-text[b-f4ybgp7kce] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 6px;
}

.modal-footer[b-f4ybgp7kce] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-f4ybgp7kce] {
    padding: 10px 24px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
    font-weight: 600;
}

.btn-create-modal[b-f4ybgp7kce] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    cursor: pointer;
    font-weight: 600;
}

.btn-delete-modal[b-f4ybgp7kce] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

/* Loading */
.dot-pulse-loader[b-f4ybgp7kce] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-f4ybgp7kce] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-f4ybgp7kce 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-f4ybgp7kce] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-f4ybgp7kce] { animation-delay: 0.4s; }

@keyframes pulse-b-f4ybgp7kce {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes slideIn-b-f4ybgp7kce {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Add to existing Messages.razor.css */

/* Scrollable Content */
.message-content[b-f4ybgp7kce] {
    padding: 0 20px 16px 20px;
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message-content.scrollable-content[b-f4ybgp7kce] {
    overflow-y: auto;
}

/* Custom scrollbar */
.message-content[b-f4ybgp7kce]::-webkit-scrollbar {
    width: 6px;
}

.message-content[b-f4ybgp7kce]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.message-content[b-f4ybgp7kce]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 3px;
}

.message-content[b-f4ybgp7kce]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}

/* Edit Mode Styles */
.message-card.editing[b-f4ybgp7kce] {
    border: 2px solid #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.edit-header[b-f4ybgp7kce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.08));
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.edit-title[b-f4ybgp7kce] {
    color: #ffd700;
    font-weight: 600;
    font-size: 14px;
}

.close-edit[b-f4ybgp7kce] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.edit-body[b-f4ybgp7kce] {
    padding: 20px;
}

.edit-textarea[b-f4ybgp7kce] {
    resize: vertical;
    min-height: 120px;
}

.create-textarea[b-f4ybgp7kce] {
    resize: vertical;
    min-height: 120px;
}

.edit-actions[b-f4ybgp7kce] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.btn-save[b-f4ybgp7kce] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.btn-save:hover[b-f4ybgp7kce] {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* Header Actions */
.header-actions[b-f4ybgp7kce] {
    display: flex;
    gap: 8px;
}

.edit-btn[b-f4ybgp7kce] {
    background: rgba(102, 126, 234, 0.15);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.edit-btn:hover[b-f4ybgp7kce] {
    background: rgba(102, 126, 234, 0.35);
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .message-content[b-f4ybgp7kce] {
        max-height: 150px;
    }

    .edit-actions[b-f4ybgp7kce] {
        flex-direction: column;
    }

    .btn-save[b-f4ybgp7kce], .btn-cancel[b-f4ybgp7kce] {
        width: 100%;
        text-align: center;
    }
}
/* Responsive */
@media (max-width: 768px) {
    .messages-container[b-f4ybgp7kce] {
        padding: 16px;
    }

    .main-heading[b-f4ybgp7kce] {
        font-size: 24px;
    }

    .action-bar[b-f4ybgp7kce] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group[b-f4ybgp7kce] {
        width: 100%;
    }

    .filter-select[b-f4ybgp7kce] {
        width: 100%;
    }

    .btn-create[b-f4ybgp7kce] {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .messages-grid[b-f4ybgp7kce] {
        grid-template-columns: 1fr;
    }

    .message-footer[b-f4ybgp7kce] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}
/* /Components/Pages/Missions.razor.rz.scp.css */
/* Missions Container */
.missions-container[b-8ewjmpql9b] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-8ewjmpql9b] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-8ewjmpql9b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-8ewjmpql9b] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-8ewjmpql9b] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-8ewjmpql9b] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-create[b-8ewjmpql9b] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-8ewjmpql9b] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Periods Grid */
.periods-grid[b-8ewjmpql9b] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Period Card */
.period-card[b-8ewjmpql9b] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.period-card:hover[b-8ewjmpql9b] {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.period-card.editing[b-8ewjmpql9b] {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

/* Period Header */
.period-header[b-8ewjmpql9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.period-info[b-8ewjmpql9b] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.period-icon[b-8ewjmpql9b] {
    font-size: 20px;
}

.period-name[b-8ewjmpql9b] {
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
}

.mission-count-badge[b-8ewjmpql9b] {
    background: rgba(255, 215, 0, 0.15);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    color: #ffd700;
}

.period-actions[b-8ewjmpql9b] {
    display: flex;
    gap: 8px;
}

.action-icon[b-8ewjmpql9b] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.action-icon.edit[b-8ewjmpql9b] { color: #ffd700; }
.action-icon.delete[b-8ewjmpql9b] { color: #ff6b6b; }

.action-icon:hover[b-8ewjmpql9b] {
    transform: scale(1.05);
    background: rgba(255, 215, 0, 0.15);
}

/* Period Edit Body */
.period-edit-body[b-8ewjmpql9b] {
    padding: 24px;
}

/* Missions Section */
.missions-section[b-8ewjmpql9b] {
    padding: 20px 24px 24px 24px;
}

.missions-header[b-8ewjmpql9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.missions-title[b-8ewjmpql9b] {
    font-size: 14px;
    font-weight: 600;
    color: #a0a0b0;
    text-transform: uppercase;
}

.btn-add-mission[b-8ewjmpql9b] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 40px;
    padding: 6px 16px;
    color: #ffd700;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-mission:hover[b-8ewjmpql9b] {
    background: rgba(255, 215, 0, 0.2);
}

/* Missions List */
.missions-list[b-8ewjmpql9b] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.no-missions[b-8ewjmpql9b] {
    text-align: center;
    padding: 20px;
    color: #a0a0b0;
    font-size: 13px;
}

/* Mission Item */
.mission-item[b-8ewjmpql9b] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.mission-item:hover[b-8ewjmpql9b] {
    background: rgba(0, 0, 0, 0.4);
}

.mission-item.editing[b-8ewjmpql9b] {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

/* Mission Display */
.mission-display[b-8ewjmpql9b] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mission-type[b-8ewjmpql9b] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
}

.mission-type-icon[b-8ewjmpql9b] {
    font-size: 14px;
}

.mission-type-name[b-8ewjmpql9b] {
    font-size: 13px;
    font-weight: 500;
    color: white;
}

.mission-target[b-8ewjmpql9b] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.target-label[b-8ewjmpql9b] {
    font-size: 11px;
    color: #a0a0b0;
}

.target-value[b-8ewjmpql9b] {
    font-size: 14px;
    font-weight: 700;
    color: #ffd700;
}

.mission-rewards[b-8ewjmpql9b] {
    display: flex;
    gap: 8px;
    flex: 1;
}

.reward-badge[b-8ewjmpql9b] {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.reward-badge.coins[b-8ewjmpql9b] {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.reward-badge.gems[b-8ewjmpql9b] {
    background: rgba(233, 30, 99, 0.15);
    color: #e91e63;
}

.reward-badge.empty[b-8ewjmpql9b] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0b0;
}

.mission-order[b-8ewjmpql9b] {
    margin-left: auto;
}

.order-badge[b-8ewjmpql9b] {
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

.mission-actions[b-8ewjmpql9b] {
    display: flex;
    gap: 6px;
    margin-left: 8px;
}

.action-icon-small[b-8ewjmpql9b] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.action-icon-small.edit[b-8ewjmpql9b] { color: #ffd700; }
.action-icon-small.delete[b-8ewjmpql9b] { color: #ff6b6b; }

.action-icon-small:hover[b-8ewjmpql9b] {
    transform: scale(1.05);
    background: rgba(255, 215, 0, 0.15);
}

/* Mission Edit Form */
.mission-edit-form[b-8ewjmpql9b] {
    padding: 4px 0;
}

.mission-edit-grid[b-8ewjmpql9b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.mission-edit-field[b-8ewjmpql9b] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mission-edit-field label[b-8ewjmpql9b] {
    font-size: 11px;
    color: #a0a0b0;
    text-transform: uppercase;
}

.mission-edit-actions[b-8ewjmpql9b] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.btn-save-small[b-8ewjmpql9b], .btn-cancel-small[b-8ewjmpql9b] {
    padding: 6px 16px;
    border: none;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-small[b-8ewjmpql9b] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    color: white;
}

.btn-save-small:hover[b-8ewjmpql9b] {
    transform: translateY(-1px);
}

.btn-cancel-small[b-8ewjmpql9b] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a0a0b0;
}

.btn-cancel-small:hover[b-8ewjmpql9b] {
    background: rgba(108, 117, 125, 0.4);
}

/* Form Grid */
.form-grid[b-8ewjmpql9b] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-field[b-8ewjmpql9b] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-8ewjmpql9b] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.modern-input[b-8ewjmpql9b] {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

.modern-input:focus[b-8ewjmpql9b] {
    outline: none;
    border-color: #ffd700;
}

.modern-select[b-8ewjmpql9b] {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

.error-text[b-8ewjmpql9b] {
    color: #ff6b6b;
    font-size: 11px;
}

.edit-actions[b-8ewjmpql9b] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.btn-save[b-8ewjmpql9b], .btn-cancel[b-8ewjmpql9b] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save[b-8ewjmpql9b] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    color: white;
}

.btn-save:hover[b-8ewjmpql9b] {
    transform: translateY(-2px);
}

.btn-cancel[b-8ewjmpql9b] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a0a0b0;
}

.btn-cancel:hover[b-8ewjmpql9b] {
    background: rgba(108, 117, 125, 0.4);
}

/* Modal */
.modal-overlay[b-8ewjmpql9b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-8ewjmpql9b] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 600px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.confirm-modal[b-8ewjmpql9b] {
    width: 380px;
}

.modal-header[b-8ewjmpql9b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-8ewjmpql9b] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-8ewjmpql9b] {
    font-size: 24px;
}

.modal-header h3[b-8ewjmpql9b] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-8ewjmpql9b] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-8ewjmpql9b] {
    padding: 24px;
    color: aqua;
}

.modal-footer[b-8ewjmpql9b] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-8ewjmpql9b] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}

.btn-create-modal[b-8ewjmpql9b] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    cursor: pointer;
    font-weight: 600;
}

.btn-delete[b-8ewjmpql9b] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

.warning-text[b-8ewjmpql9b] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Toast Notifications */
.toast-notification[b-8ewjmpql9b] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-8ewjmpql9b 0.3s ease;
    z-index: 10001;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.success[b-8ewjmpql9b] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border-left: 4px solid #ffd700;
}

.toast-notification.error[b-8ewjmpql9b] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border-left: 4px solid #ffd700;
}

.toast-notification span:first-child[b-8ewjmpql9b] {
    font-size: 18px;
}

.toast-notification span:nth-child(2)[b-8ewjmpql9b] {
    flex: 1;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.toast-close[b-8ewjmpql9b] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

/* Loading */
.dot-pulse-loader[b-8ewjmpql9b] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-8ewjmpql9b] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-8ewjmpql9b 1.5s ease-in-out infinite;
}

@keyframes pulse-b-8ewjmpql9b {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes slideInRight-b-8ewjmpql9b {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .form-grid[b-8ewjmpql9b] {
        grid-template-columns: 1fr;
    }

    .mission-edit-grid[b-8ewjmpql9b] {
        grid-template-columns: 1fr 1fr;
    }

    .modal-content[b-8ewjmpql9b] {
        width: 95%;
    }
}

@media (max-width: 768px) {
    .missions-container[b-8ewjmpql9b] {
        padding: 16px;
    }

    .main-heading[b-8ewjmpql9b] {
        font-size: 24px;
    }

    .period-header[b-8ewjmpql9b] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mission-display[b-8ewjmpql9b] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .mission-order[b-8ewjmpql9b] {
        margin-left: 0;
    }

    .mission-actions[b-8ewjmpql9b] {
        margin-left: 0;
    }

    .mission-edit-grid[b-8ewjmpql9b] {
        grid-template-columns: 1fr;
    }
}
/* Period Header - Updated */
.period-header[b-8ewjmpql9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    flex-wrap: wrap;
    gap: 8px;
}

.period-info[b-8ewjmpql9b] {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.period-date[b-8ewjmpql9b] {
    color: #a0a0b0;
    font-size: 12px;
}

.period-rewards[b-8ewjmpql9b] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.reward-badge[b-8ewjmpql9b] {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.reward-badge.coins[b-8ewjmpql9b] {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.reward-badge.gems[b-8ewjmpql9b] {
    background: rgba(233, 30, 99, 0.15);
    color: #e91e63;
}

.reward-badge.empty[b-8ewjmpql9b] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0b0;
}

.period-actions[b-8ewjmpql9b] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.action-icon[b-8ewjmpql9b] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.action-icon.edit[b-8ewjmpql9b] {
    color: #ffd700;
    min-width: 70px;
}

.action-icon.delete[b-8ewjmpql9b] {
    color: #ff6b6b;
}

.action-icon:hover[b-8ewjmpql9b] {
    transform: scale(1.05);
    background: rgba(255, 215, 0, 0.15);
}

.period-edit-body[b-8ewjmpql9b] {
    padding: 24px;
}
/* Edit Period Row - All in one line */
.edit-period-row[b-8ewjmpql9b] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.edit-period-field[b-8ewjmpql9b] {
    flex: 1;
    min-width: 140px;
}

.edit-period-field label[b-8ewjmpql9b] {
    display: block;
    margin-bottom: 6px;
    color: #a0a0b0;
    font-size: 11px;
    text-transform: uppercase;
}

.edit-period-field .modern-input[b-8ewjmpql9b] {
    width: 60%;
}

.edit-period-actions[b-8ewjmpql9b] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 1px;
}

.edit-period-actions .btn-save[b-8ewjmpql9b],
.edit-period-actions .btn-cancel[b-8ewjmpql9b] {
    padding: 10px 20px;
    border: none;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-period-actions .btn-save[b-8ewjmpql9b] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    color: white;
}

.edit-period-actions .btn-save:hover[b-8ewjmpql9b] {
    transform: translateY(-2px);
}

.edit-period-actions .btn-cancel[b-8ewjmpql9b] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a0a0b0;
}

.edit-period-actions .btn-cancel:hover[b-8ewjmpql9b] {
    background: rgba(108, 117, 125, 0.4);
}

.period-edit-body[b-8ewjmpql9b] {
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 480px) {
    .badge[b-8ewjmpql9b] {
        font-size: 10px;
    }

    .toast-notification[b-8ewjmpql9b] {
        top: 16px;
        right: 16px;
        left: 16px;
        min-width: auto;
    }

    .period-name[b-8ewjmpql9b] {
        font-size: 15px;
    }
}
/* /Components/Pages/Offensives.razor.rz.scp.css */
/* Offensive Words Container */
.offensive-words-container[b-yfpeiizcgy] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-yfpeiizcgy] {
    text-align: center;
    margin-bottom: 32px;
}
.pagination-container[b-yfpeiizcgy] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 16px;
}

.page-btn[b-yfpeiizcgy] {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 40px;
    color: #e0e0e0;
    cursor: pointer;
}
.page-btn:hover[b-yfpeiizcgy]{
    background: #d4a017;
}

.page-btn:disabled[b-yfpeiizcgy] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-yfpeiizcgy], .total-info[b-yfpeiizcgy] {
    color: #ffd700;
    font-size: 14px;
}
.main-heading[b-yfpeiizcgy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-yfpeiizcgy] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-yfpeiizcgy] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-yfpeiizcgy] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 24px;
}

/* Create Button */
.btn-create[b-yfpeiizcgy] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-create:hover[b-yfpeiizcgy] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Search Section */
.search-section[b-yfpeiizcgy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    padding: 16px 20px;
    border-radius: 16px;
    width: 50%;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.search-wrapper[b-yfpeiizcgy] {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-icon[b-yfpeiizcgy] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.6;
}

.search-input[b-yfpeiizcgy] {
    width: 80%;
    padding: 12px 16px 12px 42px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-input:focus[b-yfpeiizcgy] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.btn-search[b-yfpeiizcgy] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 20px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-search:hover[b-yfpeiizcgy] {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-clear[b-yfpeiizcgy] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    padding: 10px 20px;
    color: #a0a0b0;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear:hover[b-yfpeiizcgy] {
    background: rgba(108, 117, 125, 0.4);
}

.result-badge[b-yfpeiizcgy] {
    background: rgba(255, 215, 0, 0.1);
    padding: 6px 14px;
    border-radius: 40px;
    font-size: 13px;
    color: #ffd700;
}

/* Words Grid */
.words-grid[b-yfpeiizcgy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

/* Word Card */
.word-card[b-yfpeiizcgy] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.word-card:hover[b-yfpeiizcgy] {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.word-content[b-yfpeiizcgy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.word-icon[b-yfpeiizcgy] {
    font-size: 24px;
}

.word-text[b-yfpeiizcgy] {
    font-size: 16px;
    font-weight: 600;
    color: #ff6b6b;
    letter-spacing: 0.5px;
    word-break: break-word;
}

.delete-word-btn[b-yfpeiizcgy] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.delete-word-btn:hover[b-yfpeiizcgy] {
    background: rgba(220, 53, 69, 0.35);
    transform: scale(1.05);
}

/* Error Card */
.error-card[b-yfpeiizcgy] {
    text-align: center;
    padding: 40px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 20px;
    margin-bottom: 20px;
}

.error-icon[b-yfpeiizcgy] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.error-card p[b-yfpeiizcgy] {
    color: #ff6b6b;
    margin-bottom: 16px;
}

.retry-btn[b-yfpeiizcgy] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 8px 20px;
    color: #1a1a2e;
    cursor: pointer;
}

/* Empty State */
.empty-state[b-yfpeiizcgy] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-yfpeiizcgy] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-yfpeiizcgy] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Modal */
.modal-overlay[b-yfpeiizcgy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-yfpeiizcgy] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 24px;
    width: 450px;
    max-width: 90%;
    animation: slideIn-b-yfpeiizcgy 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.confirm-modal[b-yfpeiizcgy] {
    width: 380px;
}

.modal-header[b-yfpeiizcgy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-yfpeiizcgy] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-yfpeiizcgy] {
    font-size: 24px;
}

.modal-header h3[b-yfpeiizcgy] {
    flex: 1;
    margin: 0;
    color: white;
    font-size: 18px;
}

.modal-close[b-yfpeiizcgy] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-yfpeiizcgy] {
    padding: 24px;
    color: aqua;
}

.form-field[b-yfpeiizcgy] {
    margin-bottom: 20px;
}

.form-field label[b-yfpeiizcgy] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 13px;
    font-weight: 500;
}

.required[b-yfpeiizcgy] {
    color: #ff6b6b;
}

.modern-input[b-yfpeiizcgy] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-yfpeiizcgy] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.error-text[b-yfpeiizcgy] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 6px;
}

.modal-footer[b-yfpeiizcgy] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-yfpeiizcgy] {
    padding: 10px 24px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
    font-weight: 600;
}

.btn-save[b-yfpeiizcgy] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

.btn-delete[b-yfpeiizcgy] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

.warning-text[b-yfpeiizcgy] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
    text-align: center;
}

/* Loading */
.dot-pulse-loader[b-yfpeiizcgy] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-yfpeiizcgy] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-yfpeiizcgy 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-yfpeiizcgy] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-yfpeiizcgy] { animation-delay: 0.4s; }

@keyframes pulse-b-yfpeiizcgy {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

/* Responsive */
@media (max-width: 768px) {
    .offensive-words-container[b-yfpeiizcgy] {
        padding: 16px;
    }

    .main-heading[b-yfpeiizcgy] {
        font-size: 24px;
    }

    .search-section[b-yfpeiizcgy] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrapper[b-yfpeiizcgy] {
        width: 100%;
    }

    .btn-search[b-yfpeiizcgy], .btn-clear[b-yfpeiizcgy] {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .words-grid[b-yfpeiizcgy] {
        grid-template-columns: 1fr;
    }

    .word-card[b-yfpeiizcgy] {
        padding: 14px 16px;
    }

    .word-text[b-yfpeiizcgy] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .badge[b-yfpeiizcgy] {
        font-size: 10px;
    }

    .result-badge[b-yfpeiizcgy] {
        text-align: center;
        width: 100%;
    }
}
/* /Components/Pages/OrderVerification.razor.rz.scp.css */
    /* Verify Order Container */
.verify-order-container[b-gw5xmbfmhw] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-gw5xmbfmhw] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-gw5xmbfmhw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.heading-icon[b-gw5xmbfmhw] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-gw5xmbfmhw] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-gw5xmbfmhw] {
    color: #a0a0b0;
    font-size: 14px;
}

/* Verify Card */
.verify-card[b-gw5xmbfmhw] {
    max-width: 650px;
    margin: 0 auto;
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 28px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
}

/* Form Sections */
.form-section[b-gw5xmbfmhw] {
    padding: 32px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.section-title[b-gw5xmbfmhw] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.section-icon[b-gw5xmbfmhw] {
    font-size: 24px;
}

.section-title h3[b-gw5xmbfmhw] {
    margin: 0;
    color: #ffd700;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
}

.section-divider[b-gw5xmbfmhw] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.3), transparent);
}

/* Form Group */
.form-group[b-gw5xmbfmhw] {
    margin-bottom: 32px;
}

.form-label[b-gw5xmbfmhw] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a0a0b0;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

.label-icon[b-gw5xmbfmhw] {
    font-size: 16px;
}

/* Platform Selector */
.platform-selector[b-gw5xmbfmhw] {
    display: flex;
    gap: 20px;
}

.platform-option[b-gw5xmbfmhw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.platform-option input[b-gw5xmbfmhw] {
    display: none;
}

.platform-option.selected[b-gw5xmbfmhw] {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.platform-icon[b-gw5xmbfmhw] {
    font-size: 28px;
}

.platform-name[b-gw5xmbfmhw] {
    color: white;
    font-size: 16px;
    font-weight: 500;
}

/* Form Actions */
.form-actions[b-gw5xmbfmhw] {
    padding: 28px 40px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.verify-btn[b-gw5xmbfmhw] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 20px;
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.verify-btn:hover:not(:disabled)[b-gw5xmbfmhw] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

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

/* Result Card */
.result-card[b-gw5xmbfmhw] {
    max-width: 650px;
    margin: 24px auto 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 28px;
    border-radius: 20px;
    animation: slideIn-b-gw5xmbfmhw 0.3s ease;
}

.result-card.success[b-gw5xmbfmhw] {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), rgba(40, 167, 69, 0.05));
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.result-card.error[b-gw5xmbfmhw] {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.05));
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.result-icon[b-gw5xmbfmhw] {
    font-size: 28px;
}

.result-message[b-gw5xmbfmhw] {
    flex: 1;
    color: white;
    font-size: 14px;
}

.result-close[b-gw5xmbfmhw] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.result-close:hover[b-gw5xmbfmhw] {
    background: rgba(255, 255, 255, 0.2);
}

/* Spinner */
.spinner[b-gw5xmbfmhw] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(26, 26, 46, 0.3);
    border-top-color: #1a1a2e;
    border-radius: 50%;
    animation: spin-b-gw5xmbfmhw 0.8s linear infinite;
}

/* Loading Animation */
.dot-pulse-loader[b-gw5xmbfmhw] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-gw5xmbfmhw] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-gw5xmbfmhw 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-gw5xmbfmhw] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-gw5xmbfmhw] { animation-delay: 0.4s; }

/* Animations */
@keyframes pulse-b-gw5xmbfmhw {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

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

/* Responsive */
@media (max-width: 768px) {
    .verify-order-container[b-gw5xmbfmhw] {
        padding: 20px;
    }

    .main-heading[b-gw5xmbfmhw] {
        font-size: 24px;
        flex-wrap: wrap;
    }

    .form-section[b-gw5xmbfmhw] {
        padding: 24px;
    }

    .platform-selector[b-gw5xmbfmhw] {
        flex-direction: column;
        gap: 12px;
    }

    .platform-option[b-gw5xmbfmhw] {
        padding: 14px 18px;
    }

    .form-actions[b-gw5xmbfmhw] {
        padding: 24px;
    }

    .verify-btn[b-gw5xmbfmhw] {
        padding: 14px 24px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .verify-order-container[b-gw5xmbfmhw] {
        padding: 16px;
    }

    .form-section[b-gw5xmbfmhw] {
        padding: 20px;
    }

    .form-actions[b-gw5xmbfmhw] {
        padding: 20px;
    }

    .verify-btn[b-gw5xmbfmhw] {
        padding: 12px 20px;
    }
}
/* /Components/Pages/Packs/Bundle.razor.rz.scp.css */
/* Bundle Container */
.bundle-container[b-q80bvd03rz] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-q80bvd03rz] {
    text-align: center;
    margin-bottom: 24px;
}

.main-heading[b-q80bvd03rz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-q80bvd03rz] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-q80bvd03rz] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-q80bvd03rz] {
    color: #a0a0b0;
    font-size: 14px;
}

/* Filters Bar */
.filters-bar[b-q80bvd03rz] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.platform-filter[b-q80bvd03rz] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 10, 20, 0.6);
    padding: 8px 20px;
    border-radius: 40px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.filter-icon[b-q80bvd03rz] {
    font-size: 16px;
}

.platform-select[b-q80bvd03rz] {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-create[b-q80bvd03rz] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-q80bvd03rz] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Bundle List */
.bundle-list[b-q80bvd03rz] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

/* Bundle Card */
.bundle-card[b-q80bvd03rz] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.bundle-card:hover[b-q80bvd03rz] {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.bundle-card.editing[b-q80bvd03rz] {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

/* Card Header */
.card-header[b-q80bvd03rz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.card-badge[b-q80bvd03rz] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #ffd700;
}

.card-actions[b-q80bvd03rz] {
    display: flex;
    gap: 8px;
}

.action-icon[b-q80bvd03rz] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.action-icon.edit[b-q80bvd03rz] { color: #ffd700; }
.action-icon.delete[b-q80bvd03rz] { color: #ff6b6b; }

.action-icon:hover[b-q80bvd03rz] {
    transform: scale(1.05);
    background: rgba(255, 215, 0, 0.15);
}

/* Card Body */
.card-body[b-q80bvd03rz] {
    padding: 24px;
}

/* Info Grid */
.info-grid[b-q80bvd03rz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.info-item[b-q80bvd03rz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

.info-item.full-width[b-q80bvd03rz] {
    grid-column: span 2;
}

.info-label[b-q80bvd03rz] {
    font-size: 11px;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-q80bvd03rz] {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

.info-value.coins[b-q80bvd03rz] { color: #ff9800; }
.info-value.gems[b-q80bvd03rz] { color: #e91e63; }
.info-value.price[b-q80bvd03rz] { color: #ffd700; }
.info-value.original-price[b-q80bvd03rz] { color: #a0a0a0; text-decoration: line-through; }
.info-value.sku[b-q80bvd03rz] { font-family: monospace; color: #ffd700; }
.info-value.date[b-q80bvd03rz] { color: #667eea; }
.info-value.picture-url a[b-q80bvd03rz] { color: #4a9eff; text-decoration: none; word-break: break-all; }
.info-value.picture-url a:hover[b-q80bvd03rz] { text-decoration: underline; }

/* Status Badge */
.status-badge[b-q80bvd03rz] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.active[b-q80bvd03rz] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.inactive[b-q80bvd03rz] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0a0;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

/* Edit Mode */
.edit-header[b-q80bvd03rz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.08));
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.edit-icon[b-q80bvd03rz] {
    font-size: 20px;
}

.edit-header h3[b-q80bvd03rz] {
    flex: 1;
    margin: 0;
    color: #ffd700;
    font-size: 16px;
}

.close-edit[b-q80bvd03rz] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.edit-body[b-q80bvd03rz] {
    padding: 24px;
}

.form-grid[b-q80bvd03rz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-field[b-q80bvd03rz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field.full-width[b-q80bvd03rz] {
    grid-column: span 2;
}

.form-field label[b-q80bvd03rz] {
    color: #a0a0b0;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.modern-input[b-q80bvd03rz] {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 13px;
}

.modern-input:focus[b-q80bvd03rz] {
    outline: none;
    border-color: #ffd700;
}

.modern-select[b-q80bvd03rz] {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

.checkbox-field[b-q80bvd03rz] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Toggle Switch */
.toggle-switch[b-q80bvd03rz] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.toggle-switch input[b-q80bvd03rz] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-q80bvd03rz] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.4);
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider[b-q80bvd03rz]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-q80bvd03rz] {
    background-color: rgba(40, 167, 69, 0.3);
}

input:checked + .toggle-slider[b-q80bvd03rz]:before {
    transform: translateX(22px);
    background-color: #28a745;
}

/* Edit Actions */
.edit-actions[b-q80bvd03rz] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-save[b-q80bvd03rz], .btn-cancel[b-q80bvd03rz] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save[b-q80bvd03rz] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    color: white;
}

.btn-save:hover[b-q80bvd03rz] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-cancel[b-q80bvd03rz] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a0a0a0;
}

.btn-cancel:hover[b-q80bvd03rz] {
    background: rgba(108, 117, 125, 0.4);
}

/* Empty State */
.empty-state[b-q80bvd03rz] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
    margin-top: 20px;
}

.empty-icon[b-q80bvd03rz] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-q80bvd03rz] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Modal */
.modal-overlay[b-q80bvd03rz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-q80bvd03rz] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 700px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-q80bvd03rz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-q80bvd03rz] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-q80bvd03rz] {
    font-size: 24px;
}

.modal-header h3[b-q80bvd03rz] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-q80bvd03rz] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-q80bvd03rz] {
    color: aqua;
    padding: 24px;
}

.modal-footer[b-q80bvd03rz] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-q80bvd03rz] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0a0;
    cursor: pointer;
}

.btn-create-modal[b-q80bvd03rz], .btn-delete[b-q80bvd03rz] {
    padding: 10px 20px;
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

.btn-create-modal[b-q80bvd03rz] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}

.btn-delete[b-q80bvd03rz] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
}

.warning-text[b-q80bvd03rz] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Loading */
.dot-pulse-loader[b-q80bvd03rz] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-q80bvd03rz] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-q80bvd03rz 1.5s ease-in-out infinite;
}

@keyframes pulse-b-q80bvd03rz {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
    .form-grid[b-q80bvd03rz] {
        grid-template-columns: 1fr;
    }

    .form-field.full-width[b-q80bvd03rz] {
        grid-column: span 1;
    }

    .info-grid[b-q80bvd03rz] {
        grid-template-columns: 1fr;
    }

    .info-item.full-width[b-q80bvd03rz] {
        grid-column: span 1;
    }
}
.active[b-q80bvd03rz]
{
    color: #9ca3af;
}
.error-summary[b-q80bvd03rz] {
    margin-top: 16px;
    padding: 12px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.error-item[b-q80bvd03rz] {
    color: #ff6b6b;
    font-size: 12px;
    margin-bottom: 4px;
}

.error-text[b-q80bvd03rz] {
    color: #ff6b6b;
    font-size: 11px;
    margin-top: 4px;
    display: block;
}
@media (max-width: 768px) {
    .bundle-container[b-q80bvd03rz] {
        padding: 16px;
    }

    .main-heading[b-q80bvd03rz] {
        font-size: 24px;
    }

    .filters-bar[b-q80bvd03rz] {
        justify-content: stretch;
    }

    .platform-filter[b-q80bvd03rz] {
        flex: 1;
        justify-content: center;
    }

    .btn-create[b-q80bvd03rz] {
        flex: 1;
        text-align: center;
    }

    .edit-actions[b-q80bvd03rz] {
        flex-direction: column;
    }
}
/* /Components/Pages/Packs/Conversion.razor.rz.scp.css */
/* Conversion Container */
.conversion-container[b-67rncihjrt] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-67rncihjrt] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-67rncihjrt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-67rncihjrt] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-67rncihjrt] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-67rncihjrt] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.header-actions[b-67rncihjrt] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.btn-create[b-67rncihjrt] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-67rncihjrt] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Table Container */
.table-container[b-67rncihjrt] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
}

.conversion-table[b-67rncihjrt] {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.header-row th[b-67rncihjrt] {
    padding: 16px 16px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.conversion-row td[b-67rncihjrt] {
    padding: 10px 16px;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.conversion-row.editing[b-67rncihjrt] {
    background: rgba(255, 215, 0, 0.08);
}

/* Column Widths */
.col-source[b-67rncihjrt] { width: 120px; }
.col-target[b-67rncihjrt] { width: 120px; }
.col-picture[b-67rncihjrt] { width: 100px; }
.col-status[b-67rncihjrt] { width: 100px; text-align: center; }
.col-actions[b-67rncihjrt] { width: 150px; text-align: center; }

/* Amount Cell */
.amount-cell[b-67rncihjrt] {
    font-weight: 600;
    font-family: monospace;
    font-size: 14px;
}

/* Currency Cell */
.currency-cell[b-67rncihjrt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    margin: 12px;
}

.currency-cell.coin[b-67rncihjrt] {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.currency-cell.gem[b-67rncihjrt] {
    background: rgba(233, 30, 99, 0.15);
    color: #e91e63;
}


/* Picture Cell */
.picture-cell[b-67rncihjrt] {
    font-family: monospace;
    color: #ffd700;
}
.active[b-67rncihjrt]{
    color: #9ca3af;
}
/* Status Badge */
.status-badge[b-67rncihjrt] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.active[b-67rncihjrt] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.inactive[b-67rncihjrt] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0a0;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

/* Action Buttons */
.action-cell[b-67rncihjrt] {
    white-space: nowrap;
}

.action-btn[b-67rncihjrt] {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin: 0 2px;
    transition: all 0.2s ease;
}

.action-btn.edit[b-67rncihjrt] { color: #ffd700; background: rgba(255, 215, 0, 0.1); }
.action-btn.delete[b-67rncihjrt] { color: #ff6b6b; background: rgba(220, 53, 69, 0.1); }
.action-btn.save[b-67rncihjrt] { color: #28a745; background: rgba(40, 167, 69, 0.1); }
.action-btn.cancel[b-67rncihjrt] { color: #a0a0a0; background: rgba(108, 117, 125, 0.1); }

.action-btn:hover[b-67rncihjrt] { transform: scale(1.05); }

/* Modern Input */
.modern-input[b-67rncihjrt] {
    width: 90%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    font-size: 13px;
}

.modern-input:focus[b-67rncihjrt] {
    outline: none;
    border-color: #ffd700;
}

.modern-select[b-67rncihjrt] {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    cursor: pointer;
}

/* Toggle Switch */
.toggle-switch[b-67rncihjrt] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.toggle-switch input[b-67rncihjrt] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-67rncihjrt] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.4);
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider[b-67rncihjrt]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-67rncihjrt] {
    background-color: rgba(40, 167, 69, 0.3);
}

input:checked + .toggle-slider[b-67rncihjrt]:before {
    transform: translateX(22px);
    background-color: #28a745;
}

/* Empty State */
.empty-state[b-67rncihjrt] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
    margin-top: 20px;
}

.empty-icon[b-67rncihjrt] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-67rncihjrt] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Modal */
.modal-overlay[b-67rncihjrt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-67rncihjrt] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 550px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-67rncihjrt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-67rncihjrt] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-67rncihjrt] {
    font-size: 24px;
}

.modal-header h3[b-67rncihjrt] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-67rncihjrt] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-67rncihjrt] {
    color: aqua;
    padding: 24px;
}

/* Form Grid */
.form-grid[b-67rncihjrt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-field[b-67rncihjrt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-67rncihjrt] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

.checkbox-field[b-67rncihjrt] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Error Text */
.error-text[b-67rncihjrt] {
    color: #ff6b6b;
    font-size: 11px;
    margin-top: 4px;
}

.error-summary[b-67rncihjrt] {
    margin-top: 16px;
    padding: 12px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 8px;
}

.error-item[b-67rncihjrt] {
    color: #ff6b6b;
    font-size: 12px;
    margin-bottom: 4px;
}

.modal-footer[b-67rncihjrt] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-67rncihjrt] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0a0;
    cursor: pointer;
}

.btn-create-modal[b-67rncihjrt], .btn-delete[b-67rncihjrt] {
    padding: 10px 20px;
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

.btn-create-modal[b-67rncihjrt] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}

.btn-delete[b-67rncihjrt] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
}

.warning-text[b-67rncihjrt] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Loading */
.dot-pulse-loader[b-67rncihjrt] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-67rncihjrt] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-67rncihjrt 1.5s ease-in-out infinite;
}

@keyframes pulse-b-67rncihjrt {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .conversion-container[b-67rncihjrt] {
        padding: 16px;
    }

    .main-heading[b-67rncihjrt] {
        font-size: 24px;
    }

    .header-actions[b-67rncihjrt] {
        width: 100%;
    }

    .btn-create[b-67rncihjrt] {
        width: 100%;
        text-align: center;
    }

    .form-grid[b-67rncihjrt] {
        grid-template-columns: 1fr;
    }

    .action-cell[b-67rncihjrt] {
        white-space: normal;
    }
}
/* /Components/Pages/Packs/Grantable.razor.rz.scp.css */
/* Grantable Packs Container - Override base container */
.grantable-packs-container[b-p0c4e74cmc] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1040 30%, #0d1a2d 70%, #1a0a2a 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    position: relative;
}

/* Animated Background Glow */
.grantable-packs-container[b-p0c4e74cmc]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 0%, rgba(255, 215, 0, 0.03) 0%, transparent 50%);
    animation: grantableGlow-b-p0c4e74cmc 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes grantableGlow-b-p0c4e74cmc {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }
    50% { transform: scale(1.1) rotate(5deg); opacity: 1; }
}

/* Grantable Banner */
.grantable-banner[b-p0c4e74cmc] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 20px;
    padding: 24px 32px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}

.grantable-banner[b-p0c4e74cmc]::after {
    content: '✨';
    position: absolute;
    right: -20px;
    top: -20px;
    font-size: 120px;
    opacity: 0.05;
}

.banner-content[b-p0c4e74cmc] {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.banner-icon[b-p0c4e74cmc] {
    font-size: 48px;
    animation: float-b-p0c4e74cmc 3s ease-in-out infinite;
}

@keyframes float-b-p0c4e74cmc {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.banner-text[b-p0c4e74cmc] {
    flex: 1;
}

.banner-text h2[b-p0c4e74cmc] {
    color: #ffd700;
    font-size: 28px;
    margin: 0 0 4px 0;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.banner-text p[b-p0c4e74cmc] {
    color: #a0a0b0;
    font-size: 14px;
    margin: 0;
}

.banner-tag[b-p0c4e74cmc] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    padding: 6px 16px;
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

/* Main Heading */
.main-heading[b-p0c4e74cmc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-p0c4e74cmc] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge.grantable[b-p0c4e74cmc] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.1));
    padding: 4px 16px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    -webkit-text-fill-color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

.header-subtitle[b-p0c4e74cmc] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.header-actions[b-p0c4e74cmc] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.platform-filter[b-p0c4e74cmc] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 10, 20, 0.6);
    padding: 6px 16px;
    border-radius: 40px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.filter-icon[b-p0c4e74cmc] {
    font-size: 16px;
}

.platform-select[b-p0c4e74cmc] {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-create.grantable-btn[b-p0c4e74cmc] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 28px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
}

.btn-create.grantable-btn:hover[b-p0c4e74cmc] {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.1);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.3);
}

/* Table Container - Grantable */
.grantable-table[b-p0c4e74cmc] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 2px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
}

.packs-table[b-p0c4e74cmc] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

/* Grantable Header */
.grantable-header th[b-p0c4e74cmc] {
    padding: 16px 12px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 140, 0, 0.05));
    border-bottom: 2px solid rgba(255, 215, 0, 0.2);
}

/* Column Widths */
.col-amount[b-p0c4e74cmc] { width: 80px; text-align: center; }
.col-currency[b-p0c4e74cmc] { width: 100px; }
.col-price[b-p0c4e74cmc] { width: 80px; text-align: center; }
.col-label[b-p0c4e74cmc] { width: 120px; }
.col-sku[b-p0c4e74cmc] { width: 120px; }
.col-picture[b-p0c4e74cmc] { width: 80px; text-align: center; }
.col-offer[b-p0c4e74cmc] { width: 100px; text-align: center; }
.col-status[b-p0c4e74cmc] { width: 90px; text-align: center; }
.col-actions[b-p0c4e74cmc] { width: 150px; text-align: center; }

.pack-row.grantable-row td[b-p0c4e74cmc] {
    padding: 14px 12px;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.05);
}

.pack-row.grantable-row:hover[b-p0c4e74cmc] {
    background: rgba(255, 215, 0, 0.05);
}

.pack-row.editing[b-p0c4e74cmc] {
    background: rgba(255, 215, 0, 0.08);
    border-left: 3px solid #ffd700;
}

/* Price Cell - Grantable */
.grantable-price[b-p0c4e74cmc] {
    font-weight: 600;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Input Styles - Grantable */
.modern-input.grantable-input[b-p0c4e74cmc] {
    width: 70%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    transition: all 0.3s ease;
}

.modern-input.grantable-input:focus[b-p0c4e74cmc] {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

.modern-select.grantable-select[b-p0c4e74cmc] {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    color: white;
    cursor: pointer;
}

.modern-select.grantable-select:focus[b-p0c4e74cmc] {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}

/* Action Buttons - Grantable */
.action-btn.grantable-edit[b-p0c4e74cmc] {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.action-btn.grantable-edit:hover[b-p0c4e74cmc] {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
}

.action-btn.grantable-delete[b-p0c4e74cmc] {
    color: #ff6b6b;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.action-btn.grantable-delete:hover[b-p0c4e74cmc] {
    background: rgba(220, 53, 69, 0.2);
    transform: scale(1.05);
}

.action-btn.grantable-save[b-p0c4e74cmc] {
    color: #28a745;
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.action-btn.grantable-save:hover:not(:disabled)[b-p0c4e74cmc] {
    background: rgba(40, 167, 69, 0.2);
    transform: scale(1.05);
}

/* Empty State - Grantable */
.empty-state.grantable-empty[b-p0c4e74cmc] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
    margin-top: 20px;
    border: 2px dashed rgba(255, 215, 0, 0.2);
}

.empty-state.grantable-empty .empty-icon[b-p0c4e74cmc] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    animation: float-b-p0c4e74cmc 3s ease-in-out infinite;
}

.empty-state.grantable-empty p[b-p0c4e74cmc] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Grantable Modal Overlay */
.grantable-modal-overlay[b-p0c4e74cmc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.grantable-modal-content[b-p0c4e74cmc] {
    background: linear-gradient(145deg, #1a1a3e, #0d1a2d);
    border-radius: 20px;
    width: 550px;
    max-width: 90%;
    border: 2px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.1);
}

.grantable-modal-header[b-p0c4e74cmc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.15);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 140, 0, 0.02));
}

.grantable-modal-header .modal-icon[b-p0c4e74cmc] {
    font-size: 28px;
}

.grantable-modal-header h3[b-p0c4e74cmc] {
    flex: 1;
    margin: 0;
    color: #ffd700;
}

.modal-body[b-p0c4e74cmc] {
    padding: 24px;
    color: aqua;
}

/* Form Grid - matches original exactly */
.form-grid[b-p0c4e74cmc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-field[b-p0c4e74cmc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-p0c4e74cmc] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

.checkbox-field[b-p0c4e74cmc] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.error-text[b-p0c4e74cmc] {
    color: #ff6b6b;
    font-size: 11px;
    margin-top: 4px;
}

/* Modal Footer - Grantable */
.grantable-modal-footer[b-p0c4e74cmc] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 2px solid rgba(255, 215, 0, 0.1);
}

.btn-cancel[b-p0c4e74cmc] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0a0;
    cursor: pointer;
}

.btn-create-modal.grantable-btn-modal[b-p0c4e74cmc] {
    padding: 10px 24px;
    border: none;
    border-radius: 40px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-create-modal.grantable-btn-modal:hover:not(:disabled)[b-p0c4e74cmc] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.3);
}

.btn-create-modal.grantable-btn-modal:disabled[b-p0c4e74cmc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete[b-p0c4e74cmc] {
    padding: 10px 20px;
    border: none;
    border-radius: 40px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    color: white;
    cursor: pointer;
    font-weight: 600;
}

.warning-text[b-p0c4e74cmc] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Loading */
.dot-pulse-loader[b-p0c4e74cmc] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-p0c4e74cmc] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-p0c4e74cmc 1.5s ease-in-out infinite;
}

@keyframes pulse-b-p0c4e74cmc {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
    .form-grid[b-p0c4e74cmc] {
        grid-template-columns: 1fr;
    }

    .banner-content[b-p0c4e74cmc] {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .banner-text h2[b-p0c4e74cmc] {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .grantable-packs-container[b-p0c4e74cmc] {
        padding: 16px;
    }

    .main-heading[b-p0c4e74cmc] {
        font-size: 24px;
        flex-wrap: wrap;
    }

    .header-actions[b-p0c4e74cmc] {
        flex-direction: column;
        width: 100%;
    }

    .platform-filter[b-p0c4e74cmc] {
        width: 100%;
        justify-content: center;
    }

    .btn-create.grantable-btn[b-p0c4e74cmc] {
        width: 100%;
        text-align: center;
    }

    .action-cell[b-p0c4e74cmc] {
        white-space: normal;
    }

    .grantable-banner[b-p0c4e74cmc] {
        padding: 16px;
    }

    .banner-tag[b-p0c4e74cmc] {
        font-size: 12px;
        padding: 4px 12px;
    }
}
/* /Components/Pages/Packs/LimitedTime.razor.rz.scp.css */
/* Limited Container - FINAL VERSION */
.limited-container[b-7vmitaican] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 40%, #2d1b4e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Toast Notification */
.toast-notification[b-7vmitaican] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: 12px;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(167, 139, 250, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: slideInRight-b-7vmitaican 0.5s ease;
    min-width: 300px;
    max-width: 500px;
}

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

.toast-notification.toast-success[b-7vmitaican] { border-left: 4px solid #34d399; }
.toast-notification.toast-error[b-7vmitaican] { border-left: 4px solid #ef4444; }

.toast-icon[b-7vmitaican] { font-size: 20px; flex-shrink: 0; }
.toast-message[b-7vmitaican] { color: #e0e0e0; font-size: 14px; font-weight: 500; flex: 1; }
.toast-close[b-7vmitaican] {
    background: none;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}
.toast-close:hover[b-7vmitaican] { color: #fff; }

/* Header */
.header-section[b-7vmitaican] { text-align: center; margin-bottom: 32px; }
.main-heading[b-7vmitaican] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #a78bfa, #7c3aed, #6d28d9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.heading-icon[b-7vmitaican] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
    animation: pulse-icon-b-7vmitaican 2s ease-in-out infinite;
}

@keyframes pulse-icon-b-7vmitaican {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(10deg); }
}

.title[b-7vmitaican] {
    background: rgba(167, 139, 250, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.2);
}
.header-subtitle[b-7vmitaican] { color: #a0a0b0; font-size: 14px; margin-bottom: 20px; }

.header-actions[b-7vmitaican] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group[b-7vmitaican] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(10, 10, 20, 0.6);
    padding: 8px 20px;
    border-radius: 40px;
    border: 1px solid rgba(167, 139, 250, 0.15);
}

.status-filter[b-7vmitaican] { display: flex; align-items: center; gap: 8px; }
.filter-label[b-7vmitaican] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a0a0b0;
    font-size: 13px;
    cursor: pointer;
}
.filter-label input[type="checkbox"][b-7vmitaican] { width: 16px; height: 16px; accent-color: #7c3aed; cursor: pointer; }
.filter-divider[b-7vmitaican] { color: rgba(255, 255, 255, 0.1); }

.date-range-info[b-7vmitaican] { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.info-icon[b-7vmitaican] { color: #a78bfa; }
.info-text[b-7vmitaican] { color: #a0a0b0; }
.info-text span[b-7vmitaican] { font-weight: 600; }

.btn-create[b-7vmitaican] {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    border: none;
    border-radius: 40px;
    padding: 10px 28px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}
.btn-create:hover[b-7vmitaican] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.4);
}

/* Table - FIXED LAYOUT */
.table-container[b-7vmitaican] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.15);
    overflow-x: auto;
}

.limited-table[b-7vmitaican] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 1400px;
}

.limited-table th[b-7vmitaican],
.limited-table td[b-7vmitaican] {
    padding: 10px 8px;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SPECIFIC COLUMN WIDTHS - MUST BE EXACT */
.limited-table th:nth-child(1)[b-7vmitaican], .limited-table td:nth-child(1)[b-7vmitaican] { width: 10%; }  /* title */
.limited-table th:nth-child(2)[b-7vmitaican], .limited-table td:nth-child(2)[b-7vmitaican] { width: 9%; }   /* Price */
.limited-table th:nth-child(3)[b-7vmitaican], .limited-table td:nth-child(3)[b-7vmitaican] { width: 9%; }   /* Granted */
.limited-table th:nth-child(4)[b-7vmitaican], .limited-table td:nth-child(4)[b-7vmitaican] { width: 9%; }   /* Avatar */
.limited-table th:nth-child(5)[b-7vmitaican], .limited-table td:nth-child(5)[b-7vmitaican] { width: 9%; }   /* Pawn */
.limited-table th:nth-child(6)[b-7vmitaican], .limited-table td:nth-child(6)[b-7vmitaican] { width: 9%; }   /* Emote */
.limited-table th:nth-child(7)[b-7vmitaican], .limited-table td:nth-child(7)[b-7vmitaican] { width: 9%; }   /* Sticker */
.limited-table th:nth-child(8)[b-7vmitaican], .limited-table td:nth-child(8)[b-7vmitaican] { width: 10%; }  /* Start */
.limited-table th:nth-child(9)[b-7vmitaican], .limited-table td:nth-child(9)[b-7vmitaican] { width: 10%; }  /* End */
.limited-table th:nth-child(10)[b-7vmitaican], .limited-table td:nth-child(10)[b-7vmitaican] { width: 8%; } /* Status */
.limited-table th:nth-child(11)[b-7vmitaican], .limited-table td:nth-child(11)[b-7vmitaican] { width: 8%; } /* Actions */

.header-row th[b-7vmitaican] {
    color: #a78bfa;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(167, 139, 250, 0.2);
    white-space: nowrap;
}

.limited-row td[b-7vmitaican] {
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Remove the hover animation that shifts rows */
.limited-row:hover td[b-7vmitaican] {
    background: rgba(167, 139, 250, 0.05);
    /* Remove any transform or transition that might cause shifting */
}

/* If there's a transition on td elements, make sure it doesn't affect layout */
.limited-row td[b-7vmitaican] {
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease;
    /* Remove any transform or padding transitions */
}
.limited-row.editing[b-7vmitaican] { background: rgba(167, 139, 250, 0.1) !important; }
.limited-row.expired td[b-7vmitaican] { opacity: 0.6; }
.limited-row.inactive-pack td[b-7vmitaican] { opacity: 0.6; }

/* title */
.title-tag[b-7vmitaican] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(124, 58, 237, 0.2));
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #a78bfa;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Currency */
.currency-cell[b-7vmitaican] {
    display: flex;
    gap: 5px;
}
.price-gems[b-7vmitaican], .granted-gems[b-7vmitaican] { color: #a78bfa; font-weight: 600; font-size: 12px; }
.price-coins[b-7vmitaican], .granted-coins[b-7vmitaican] { color: #fbbf24; font-weight: 600; font-size: 12px; }

.price-input-group[b-7vmitaican] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}
.price-input-group .modern-input.small[b-7vmitaican] {
    width: 100%;
    max-width: 80px;
    padding: 3px 4px;
    font-size: 11px;
    text-align: center;
}

/* IDs */
.ids-cell[b-7vmitaican] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 10px;
    color: #94a3b8;
    word-break: break-all;
    white-space: normal;
}

/* Date */
.date-cell[b-7vmitaican] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 10px;
    color: #94a3b8;
    text-align: center;
}

/* Status */
.status-title[b-7vmitaican] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.status-title.active[b-7vmitaican] {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
}
.status-title.expired[b-7vmitaican] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.status-title.inactive[b-7vmitaican] {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Toggle */
.toggle-switch[b-7vmitaican] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
    flex-shrink: 0;
}
.toggle-switch input[b-7vmitaican] { opacity: 0; width: 0; height: 0; }
.toggle-slider[b-7vmitaican] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.4);
    transition: 0.3s;
    border-radius: 34px;
}
.toggle-slider[b-7vmitaican]:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
}
input:checked + .toggle-slider[b-7vmitaican] { background-color: rgba(52, 211, 153, 0.3); }
input:checked + .toggle-slider[b-7vmitaican]:before {
    transform: translateX(18px);
    background-color: #34d399;
}

.status-edit-group[b-7vmitaican] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.status-label[b-7vmitaican] { font-size: 10px; color: #a0a0b0; min-width: 40px; }

/* Actions */
.action-cell[b-7vmitaican] {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.action-btn[b-7vmitaican] {
    background: none;
    border: none;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}
.action-btn.edit[b-7vmitaican] { color: #a78bfa; background: rgba(167, 139, 250, 0.1); }
.action-btn.edit:hover[b-7vmitaican] { background: rgba(167, 139, 250, 0.2); }
.action-btn.delete[b-7vmitaican] { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.action-btn.delete:hover[b-7vmitaican] { background: rgba(239, 68, 68, 0.2); }
.action-btn.save[b-7vmitaican] { color: #34d399; background: rgba(52, 211, 153, 0.1); }
.action-btn.save:hover:not(:disabled)[b-7vmitaican] { background: rgba(52, 211, 153, 0.2); }
.action-btn.save:disabled[b-7vmitaican] { opacity: 0.5; cursor: not-allowed; }
.action-btn.cancel[b-7vmitaican] { color: #9ca3af; background: rgba(107, 114, 128, 0.1); }
.action-btn.cancel:hover[b-7vmitaican] { background: rgba(107, 114, 128, 0.2); }

/* Inputs */
.modern-input[b-7vmitaican] {
    width: 100%;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 4px;
    color: white;
    font-size: 11px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.modern-input:focus[b-7vmitaican] {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}
.modern-input[b-7vmitaican]::placeholder { color: rgba(255, 255, 255, 0.3); }

.error-text[b-7vmitaican] {
    color: #ef4444;
    font-size: 8px;
    margin-top: 1px;
    display: block;
}

/* Empty State */
.empty-state[b-7vmitaican] {
    text-align: center;
    padding: 60px 20px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
    margin-top: 20px;
    border: 2px dashed rgba(167, 139, 250, 0.2);
}
.empty-icon[b-7vmitaican] { font-size: 64px; display: block; margin-bottom: 16px; opacity: 0.6; }
.empty-state p[b-7vmitaican] { color: #a0a0b0; margin-bottom: 20px; font-size: 16px; }

/* Modal */
.modal-overlay[b-7vmitaican] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.modal-content[b-7vmitaican] {
    background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
    border-radius: 24px;
    width: 750px;
    max-width: 92%;
    border: 1px solid rgba(167, 139, 250, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}
.modal-header[b-7vmitaican] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(167, 139, 250, 0.15);
    position: sticky;
    top: 0;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1;
}
.modal-header.danger[b-7vmitaican] { border-bottom-color: rgba(239, 68, 68, 0.3); }
.modal-icon[b-7vmitaican] { font-size: 28px; }
.modal-header h3[b-7vmitaican] { flex: 1; margin: 0; color: white; font-weight: 600; font-size: 20px; }
.modal-close[b-7vmitaican] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover[b-7vmitaican] { background: rgba(255, 255, 255, 0.1); color: white; }
.modal-body[b-7vmitaican] { 
    color: aqua;
    padding: 24px;
}

.form-grid[b-7vmitaican] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.form-field[b-7vmitaican] { display: flex; flex-direction: column; gap: 6px; }
.form-field.full-width[b-7vmitaican] { grid-column: 1 / -1; }
.form-field label[b-7vmitaican] { color: #a0a0b0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.form-field .modern-input[b-7vmitaican] { padding: 8px 12px; font-size: 13px; }

.toggle-label[b-7vmitaican] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.toggle-text[b-7vmitaican] { color: #a0a0b0; font-size: 13px; }

.modal-footer[b-7vmitaican] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    bottom: 0;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
}

.btn-cancel[b-7vmitaican] {
    padding: 8px 20px;
    background: rgba(107, 114, 128, 0.2);
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 40px;
    color: #a0a0a0;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}
.btn-cancel:hover[b-7vmitaican] { background: rgba(107, 114, 128, 0.3); }

.btn-create-modal[b-7vmitaican] {
    padding: 8px 24px;
    border: none;
    border-radius: 40px;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}
.btn-create-modal:hover:not(:disabled)[b-7vmitaican] { transform: translateY(-2px); filter: brightness(1.05); }
.btn-create-modal:disabled[b-7vmitaican] { opacity: 0.5; cursor: not-allowed; }

.btn-delete[b-7vmitaican] {
    padding: 8px 24px;
    border: none;
    border-radius: 40px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}
.btn-delete:hover[b-7vmitaican] { transform: translateY(-2px); filter: brightness(1.05); }
.warning-text[b-7vmitaican] { color: #ef4444; font-size: 12px; display: block; margin-top: 8px; font-weight: 500; }

/* Loading */
.dot-pulse-loader[b-7vmitaican] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}
.dot[b-7vmitaican] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    animation: pulse-b-7vmitaican 1.5s ease-in-out infinite;
}
.dot:nth-child(2)[b-7vmitaican] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-7vmitaican] { animation-delay: 0.4s; }

@keyframes pulse-b-7vmitaican {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 1024px) {
    .header-actions[b-7vmitaican] { flex-direction: column; align-items: stretch; }
    .filter-group[b-7vmitaican] { justify-content: center; flex-wrap: wrap; }
    .btn-create[b-7vmitaican] { width: 100%; text-align: center; }
}
@media (max-width: 900px) { .form-grid[b-7vmitaican] { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .limited-container[b-7vmitaican] { padding: 16px; }
    .main-heading[b-7vmitaican] { font-size: 24px; flex-wrap: wrap; }
    .filter-group[b-7vmitaican] { flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; }
    .filter-divider[b-7vmitaican] { display: none; }
    .action-cell[b-7vmitaican] { flex-direction: column; gap: 2px; }
    .modal-content[b-7vmitaican] { max-width: 95%; }
    .toast-notification[b-7vmitaican] {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: unset;
        max-width: unset;
        padding: 12px 16px;
    }
}
/* /Components/Pages/Packs/Regular.razor.rz.scp.css */
/* Packs Container */
.packs-container[b-ookf2rz3z5] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-ookf2rz3z5] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-ookf2rz3z5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-ookf2rz3z5] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-ookf2rz3z5] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-ookf2rz3z5] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.header-actions[b-ookf2rz3z5] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.platform-filter[b-ookf2rz3z5] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 10, 20, 0.6);
    padding: 6px 16px;
    border-radius: 40px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.filter-icon[b-ookf2rz3z5] {
    font-size: 16px;
}

.platform-select[b-ookf2rz3z5] {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-create[b-ookf2rz3z5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-ookf2rz3z5] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Table Container */
.table-container[b-ookf2rz3z5] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
}

.packs-table[b-ookf2rz3z5] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px;
}

.header-row th[b-ookf2rz3z5] {
    padding: 16px 12px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.pack-row td[b-ookf2rz3z5] {
    padding: 14px 12px;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pack-row.editing[b-ookf2rz3z5] {
    background: rgba(255, 215, 0, 0.08);
}

/* Column Widths */
.col-amount[b-ookf2rz3z5] { width: 80px; text-align: center; }
.col-currency[b-ookf2rz3z5] { width: 100px; }
.col-price[b-ookf2rz3z5] { width: 80px; text-align: center; }
.col-label[b-ookf2rz3z5] { width: 120px; }
.col-sku[b-ookf2rz3z5] { width: 120px; }
.col-picture[b-ookf2rz3z5] { width: 80px; text-align: center; }
.col-offer[b-ookf2rz3z5] { width: 100px; text-align: center; }
.col-status[b-ookf2rz3z5] { width: 90px; text-align: center; }
.col-actions[b-ookf2rz3z5] { width: 130px; text-align: center; }

/* Amount Cell */
.amount-cell[b-ookf2rz3z5] {
    font-weight: 600;
    font-family: monospace;
    font-size: 14px;
}

/* Currency Cell */
.currency-cell[b-ookf2rz3z5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.currency-cell.coin[b-ookf2rz3z5] {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.currency-cell.gem[b-ookf2rz3z5] {
    background: rgba(233, 30, 99, 0.15);
    color: #e91e63;
}

/* Price Cell */
.price-cell[b-ookf2rz3z5] {
    font-weight: 600;
    color: #ffd700;
}

/* Label Cell */
.label-cell[b-ookf2rz3z5] {
    font-size: 12px;
    color: #a0a0a0;
}

/* SKU Cell */
.sku-cell[b-ookf2rz3z5] {
    font-family: monospace;
    font-size: 12px;
}

/* Picture Cell */
.picture-cell[b-ookf2rz3z5] {
    font-family: monospace;
    color: #ffd700;
}

/* Offer Badge */
.offer-badge[b-ookf2rz3z5] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.offer-badge.one-time[b-ookf2rz3z5] {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
}

.offer-badge.recurring[b-ookf2rz3z5] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0a0;
}

/* Status Badge */
.status-badge[b-ookf2rz3z5] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.active[b-ookf2rz3z5] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.inactive[b-ookf2rz3z5] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0a0;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

/* Action Buttons */
.action-cell[b-ookf2rz3z5] {
    white-space: nowrap;
}

.action-btn[b-ookf2rz3z5] {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    margin: 0 2px;
    transition: all 0.2s ease;
}

.action-btn.edit[b-ookf2rz3z5] { color: #ffd700; background: rgba(255, 215, 0, 0.1); }
.action-btn.delete[b-ookf2rz3z5] { color: #ff6b6b; background: rgba(220, 53, 69, 0.1); }
.action-btn.save[b-ookf2rz3z5] { color: #28a745; background: rgba(40, 167, 69, 0.1); }
.action-btn.cancel[b-ookf2rz3z5] { color: #a0a0a0; background: rgba(108, 117, 125, 0.1); }

.action-btn:hover[b-ookf2rz3z5] { transform: scale(1.05); }

/* Modern Input */
.modern-input[b-ookf2rz3z5] {
    width: 70%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    font-size: 13px;
}

.modern-input:focus[b-ookf2rz3z5] {
    outline: none;
    border-color: #ffd700;
}

.modern-select[b-ookf2rz3z5] {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    cursor: pointer;
}

/* Toggle Switch */
.toggle-switch[b-ookf2rz3z5] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.toggle-switch input[b-ookf2rz3z5] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-ookf2rz3z5] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.4);
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider[b-ookf2rz3z5]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-ookf2rz3z5] {
    background-color: rgba(40, 167, 69, 0.3);
}

input:checked + .toggle-slider[b-ookf2rz3z5]:before {
    transform: translateX(22px);
    background-color: #28a745;
}

/* Empty State */
.empty-state[b-ookf2rz3z5] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
    margin-top: 20px;
}

.empty-icon[b-ookf2rz3z5] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-ookf2rz3z5] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Modal */
.modal-overlay[b-ookf2rz3z5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-ookf2rz3z5] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 550px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-ookf2rz3z5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-ookf2rz3z5] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-ookf2rz3z5] {
    font-size: 24px;
}

.modal-header h3[b-ookf2rz3z5] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-ookf2rz3z5] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-ookf2rz3z5] {
    color: aqua;
    padding: 24px;
}

/* Form Grid */
.form-grid[b-ookf2rz3z5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-field[b-ookf2rz3z5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-ookf2rz3z5] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

.checkbox-field[b-ookf2rz3z5] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Error Text */
.error-text[b-ookf2rz3z5] {
    color: #ff6b6b;
    font-size: 11px;
    margin-top: 4px;
}

.modal-footer[b-ookf2rz3z5] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-ookf2rz3z5] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0a0;
    cursor: pointer;
}

.btn-create-modal[b-ookf2rz3z5], .btn-delete[b-ookf2rz3z5] {
    padding: 10px 20px;
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

.btn-create-modal[b-ookf2rz3z5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}

.btn-delete[b-ookf2rz3z5] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
}

.warning-text[b-ookf2rz3z5] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Loading */
.dot-pulse-loader[b-ookf2rz3z5] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-ookf2rz3z5] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-ookf2rz3z5 1.5s ease-in-out infinite;
}

@keyframes pulse-b-ookf2rz3z5 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
    .form-grid[b-ookf2rz3z5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .packs-container[b-ookf2rz3z5] {
        padding: 16px;
    }

    .main-heading[b-ookf2rz3z5] {
        font-size: 24px;
    }

    .header-actions[b-ookf2rz3z5] {
        flex-direction: column;
        width: 100%;
    }

    .platform-filter[b-ookf2rz3z5] {
        width: 100%;
        justify-content: center;
    }

    .btn-create[b-ookf2rz3z5] {
        width: 100%;
        text-align: center;
    }

    .action-cell[b-ookf2rz3z5] {
        white-space: normal;
    }
}
/* /Components/Pages/Packs/Starter.razor.rz.scp.css */
/* Starter Container */
.starter-container[b-dzdce2vcg8] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-dzdce2vcg8] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-dzdce2vcg8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-dzdce2vcg8] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-dzdce2vcg8] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-dzdce2vcg8] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.header-actions[b-dzdce2vcg8] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.platform-filter[b-dzdce2vcg8] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 10, 20, 0.6);
    padding: 6px 16px;
    border-radius: 40px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.filter-icon[b-dzdce2vcg8] {
    font-size: 16px;
}

.platform-select[b-dzdce2vcg8] {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-create[b-dzdce2vcg8] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-dzdce2vcg8] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Table Container */
.table-container[b-dzdce2vcg8] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
}

.starter-table[b-dzdce2vcg8] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1300px;
}

.header-row th[b-dzdce2vcg8] {
    padding: 14px 10px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.starter-row td[b-dzdce2vcg8] {
    padding: 12px 10px;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.starter-row.editing[b-dzdce2vcg8] {
    background: rgba(255, 215, 0, 0.08);
}

/* Column Widths */
.col-title[b-dzdce2vcg8] { width: 120px; }
.col-badge[b-dzdce2vcg8] { width: 80px; }
.col-ids[b-dzdce2vcg8] { width: 90px; }
.col-currency[b-dzdce2vcg8] { width: 70px; text-align: center; }
.col-picture[b-dzdce2vcg8] { width: 70px; text-align: center; }
.col-price[b-dzdce2vcg8] { width: 70px; text-align: center; }
.col-discount[b-dzdce2vcg8] { width: 70px; text-align: center; }
.col-days[b-dzdce2vcg8] { width: 70px; text-align: center; }
.col-sku[b-dzdce2vcg8] { width: 90px; }
.col-status[b-dzdce2vcg8] { width: 80px; text-align: center; }
.col-actions[b-dzdce2vcg8] { width: 100px; text-align: center; }

/* Title Cell */
.title-cell[b-dzdce2vcg8] {
    font-weight: 600;
    color: #ffd700;
}

/* Badge Cell */
.badge-cell[b-dzdce2vcg8] {
    color: #e91e63;
}

/* IDs Cell */
.ids-cell[b-dzdce2vcg8] {
    font-family: monospace;
    font-size: 11px;
}

/* Currency Cell */
.currency-cell.coins[b-dzdce2vcg8] { color: #ff9800; font-weight: 600; }
.currency-cell.gems[b-dzdce2vcg8] { color: #e91e63; font-weight: 600; }

/* Price Cell */
.price-cell[b-dzdce2vcg8] { color: #ffd700; font-weight: 600; }
.price-cell.original[b-dzdce2vcg8] { color: #a0a0a0; text-decoration: line-through; }

/* Discount Cell */
.discount-cell[b-dzdce2vcg8] { color: #28a745; font-weight: 600; }

/* Days Cell */
.days-cell[b-dzdce2vcg8] { color: #667eea; }

/* Picture Cell */
.picture-cell[b-dzdce2vcg8] {
    font-family: monospace;
    color: #ffd700;
}

/* SKU Cell */
.sku-cell[b-dzdce2vcg8] {
    font-family: monospace;
    font-size: 11px;
}

/* Status Badge */
.status-badge[b-dzdce2vcg8] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.active[b-dzdce2vcg8] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.inactive[b-dzdce2vcg8] {
    background: rgba(108, 117, 125, 0.15);
    color: #a0a0a0;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

/* Action Buttons */
.action-cell[b-dzdce2vcg8] {
    white-space: nowrap;
}

.action-btn[b-dzdce2vcg8] {
    background: none;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    margin: 0 2px;
    transition: all 0.2s ease;
}

.action-btn.edit[b-dzdce2vcg8] { color: #ffd700; background: rgba(255, 215, 0, 0.1); }
.action-btn.delete[b-dzdce2vcg8] { color: #ff6b6b; background: rgba(220, 53, 69, 0.1); }
.action-btn.save[b-dzdce2vcg8] { color: #28a745; background: rgba(40, 167, 69, 0.1); }
.action-btn.cancel[b-dzdce2vcg8] { color: #a0a0a0; background: rgba(108, 117, 125, 0.1); }

.action-btn:hover[b-dzdce2vcg8] { transform: scale(1.05); }

/* Modern Input */
.modern-input[b-dzdce2vcg8] {
    width: 90%;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 6px;
    color: white;
    font-size: 12px;
}

.modern-input:focus[b-dzdce2vcg8] {
    outline: none;
    border-color: #ffd700;
}

.modern-select[b-dzdce2vcg8] {
    width: 100%;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

/* Toggle Switch */
.toggle-switch[b-dzdce2vcg8] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle-switch input[b-dzdce2vcg8] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-dzdce2vcg8] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.4);
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider[b-dzdce2vcg8]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-dzdce2vcg8] {
    background-color: rgba(40, 167, 69, 0.3);
}

input:checked + .toggle-slider[b-dzdce2vcg8]:before {
    transform: translateX(20px);
    background-color: #28a745;
}

/* Empty State */
.empty-state[b-dzdce2vcg8] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
    margin-top: 20px;
}

.empty-icon[b-dzdce2vcg8] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-dzdce2vcg8] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Modal */
.modal-overlay[b-dzdce2vcg8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-dzdce2vcg8] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 700px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-dzdce2vcg8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-dzdce2vcg8] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-dzdce2vcg8] {
    font-size: 24px;
}

.modal-header h3[b-dzdce2vcg8] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-dzdce2vcg8] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-dzdce2vcg8] {
    color: aqua;
    padding: 24px;
}

/* Form Grid */
.form-grid[b-dzdce2vcg8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-field[b-dzdce2vcg8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label[b-dzdce2vcg8] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

.checkbox-field[b-dzdce2vcg8] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.error-text[b-dzdce2vcg8] {
    color: #ff6b6b;
    font-size: 11px;
    margin-top: 4px;
}

.modal-footer[b-dzdce2vcg8] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-dzdce2vcg8] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0a0;
    cursor: pointer;
}

.btn-create-modal[b-dzdce2vcg8], .btn-delete[b-dzdce2vcg8] {
    padding: 10px 20px;
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 600;
}

.btn-create-modal[b-dzdce2vcg8] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}

.btn-delete[b-dzdce2vcg8] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
}

.warning-text[b-dzdce2vcg8] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Loading */
.dot-pulse-loader[b-dzdce2vcg8] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-dzdce2vcg8] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-dzdce2vcg8 1.5s ease-in-out infinite;
}

@keyframes pulse-b-dzdce2vcg8 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
    .form-grid[b-dzdce2vcg8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .starter-container[b-dzdce2vcg8] {
        padding: 16px;
    }

    .main-heading[b-dzdce2vcg8] {
        font-size: 24px;
    }

    .header-actions[b-dzdce2vcg8] {
        flex-direction: column;
        width: 100%;
    }

    .platform-filter[b-dzdce2vcg8] {
        width: 100%;
        justify-content: center;
    }

    .btn-create[b-dzdce2vcg8] {
        width: 100%;
        text-align: center;
    }

    .action-cell[b-dzdce2vcg8] {
        white-space: normal;
    }
}
/* /Components/Pages/PawnDetails.razor.rz.scp.css */
/* Fullscreen pawn Viewer - Minimalist Style */
.pawn-viewer[b-w3w0xdflx9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Close Button */
.close-btn[b-w3w0xdflx9] {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.close-btn:hover[b-w3w0xdflx9] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    border-color: rgba(255, 215, 0, 0.5);
}

/* Image Container */
.image-container[b-w3w0xdflx9] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 40px;
}

/* pawn Image */
.pawn-image[b-w3w0xdflx9] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    animation: fadeInZoom-b-w3w0xdflx9 0.4s ease;
}

/* Error Container */
.error-container[b-w3w0xdflx9] {
    text-align: center;
    color: white;
}

.error-icon[b-w3w0xdflx9] {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.error-container p[b-w3w0xdflx9] {
    font-size: 20px;
    color: #aaa;
    margin-bottom: 24px;
}

.retry-btn[b-w3w0xdflx9] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-btn:hover[b-w3w0xdflx9] {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}

/* Loading Animation */
.dot-pulse-loader[b-w3w0xdflx9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index: 10000;
}

.dot[b-w3w0xdflx9] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    animation: pulse-b-w3w0xdflx9 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-w3w0xdflx9] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-w3w0xdflx9] { animation-delay: 0.4s; }

/* Animations */
@keyframes fadeInZoom-b-w3w0xdflx9 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse-b-w3w0xdflx9 {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .close-btn[b-w3w0xdflx9] {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .image-container[b-w3w0xdflx9] {
        padding: 20px;
    }

    .pawn-image[b-w3w0xdflx9] {
        max-width: 95%;
        max-height: 95%;
    }

    .error-icon[b-w3w0xdflx9] {
        font-size: 60px;
    }

    .error-container p[b-w3w0xdflx9] {
        font-size: 16px;
    }
}
/* /Components/Pages/Pawns.razor.rz.scp.css */
/* Dark Gaming Style for pawns */
.pawns-container[b-w5rt2iao5d] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    padding: 24px;
    font-family: 'Courier New', 'Segoe UI', 'Monaco', monospace;
}

/* Header Section - Gothic Style */
.header-section[b-w5rt2iao5d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 28px;
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.main-heading[b-w5rt2iao5d] {
    font-size: 28px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 2px;
}

.heading-icon[b-w5rt2iao5d] {
    font-size: 32px;
    filter: drop-shadow(0 0 5px gold);
}

.badge[b-w5rt2iao5d] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Gaming Buttons */
.btn-gaming[b-w5rt2iao5d] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: monospace;
    letter-spacing: 1px;
}

.btn-add[b-w5rt2iao5d] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.btn-add:hover[b-w5rt2iao5d] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

.btn-primary[b-w5rt2iao5d] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-secondary[b-w5rt2iao5d] {
    background: #2a2a3e;
    color: #aaa;
    border: 1px solid #444;
}

.btn-danger[b-w5rt2iao5d] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    color: white;
}

/* pawns Grid - Card Layout */
.pawns-grid[b-w5rt2iao5d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

/* pawn Card - RPG Style */
.pawn-card[b-w5rt2iao5d] {
    background: rgba(15, 12, 41, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.pawn-card:hover[b-w5rt2iao5d] {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.2);
}

.editing-mode[b-w5rt2iao5d] {
    border: 2px solid #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* Card Header */
.card-header[b-w5rt2iao5d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.pawn-id[b-w5rt2iao5d] {
    font-size: 18px;
    font-weight: bold;
}

.clickable-id[b-w5rt2iao5d] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.clickable-id:hover[b-w5rt2iao5d] {
    background: rgba(255, 215, 0, 0.3);
    transform: translateX(3px);
}

.id-number[b-w5rt2iao5d] {
    color: #ffd700;
    font-size: 18px;
}

.view-icon[b-w5rt2iao5d] {
    font-size: 14px;
    opacity: 0.7;
}

/* Status Pill */
.status-pill[b-w5rt2iao5d] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.status-pill.active[b-w5rt2iao5d] {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid #28a745;
    text-shadow: 0 0 5px #28a745;
}

.status-pill.inactive[b-w5rt2iao5d] {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid #6c757d;
}

/* Card Body - Stats */
.card-body[b-w5rt2iao5d] {
    padding: 20px;
}

.stat-row[b-w5rt2iao5d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-icon[b-w5rt2iao5d] {
    font-size: 20px;
    width: 32px;
}

.stat-label[b-w5rt2iao5d] {
    flex: 1;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value[b-w5rt2iao5d] {
    font-size: 18px;
    font-weight: bold;
    font-family: monospace;
}

.priority-value[b-w5rt2iao5d] {
    color: #ffd700;
}

.gem-value[b-w5rt2iao5d] {
    color: #e91e63;
}

.coin-value[b-w5rt2iao5d] {
    color: #ff9800;
}

.level-value[b-w5rt2iao5d] {
    color: #00ff88;
}

/* Gaming Inputs */
.gaming-input[b-w5rt2iao5d] {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 100px;
    text-align: center;
}

.gaming-input:focus[b-w5rt2iao5d] {
    outline: none;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Toggle Switch Gaming */
.toggle-gaming[b-w5rt2iao5d] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-gaming input[b-w5rt2iao5d] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider-gaming[b-w5rt2iao5d] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3a3a4e;
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider-gaming[b-w5rt2iao5d]:before {
    position: absolute;
    content: "✗";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #ff4444;
    transition: 0.3s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
}

input:checked + .toggle-slider-gaming[b-w5rt2iao5d] {
    background-color: #00aa44;
}

input:checked + .toggle-slider-gaming[b-w5rt2iao5d]:before {
    content: "✓";
    transform: translateX(26px);
    background-color: #00ff88;
}

/* Card Footer */
.card-footer[b-w5rt2iao5d] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.action-btn[b-w5rt2iao5d] {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.edit-btn[b-w5rt2iao5d] {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
    border: 1px solid #667eea;
}

.edit-btn:hover[b-w5rt2iao5d] {
    background: #667eea;
    color: white;
}

.delete-btn[b-w5rt2iao5d] {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid #dc3545;
}

.delete-btn:hover[b-w5rt2iao5d] {
    background: #dc3545;
    color: white;
}

.save-btn[b-w5rt2iao5d] {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid #28a745;
}

.save-btn:hover[b-w5rt2iao5d] {
    background: #28a745;
    color: white;
}

.cancel-btn[b-w5rt2iao5d] {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid #6c757d;
}

.cancel-btn:hover[b-w5rt2iao5d] {
    background: #6c757d;
    color: white;
}

/* Empty Vault */
.empty-vault[b-w5rt2iao5d] {
    text-align: center;
    padding: 60px;
    background: rgba(15, 12, 41, 0.8);
    border-radius: 24px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.empty-icon[b-w5rt2iao5d] {
    font-size: 80px;
    margin-bottom: 20px;
}

.empty-vault h3[b-w5rt2iao5d] {
    color: #ffd700;
    margin-bottom: 10px;
}

.empty-vault p[b-w5rt2iao5d] {
    color: #888;
    margin-bottom: 20px;
}

/* Modal Gaming Style */
.modal-gaming[b-w5rt2iao5d] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
}

.modal-content-gaming[b-w5rt2iao5d] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #ffd700;
    border-radius: 20px;
    width: 500px;
    max-width: 90%;
    animation: slideUp-b-w5rt2iao5d 0.3s ease;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
}

.modal-header-gaming[b-w5rt2iao5d] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

.modal-header-gaming.warning[b-w5rt2iao5d] {
    border-bottom-color: #dc3545;
}

.modal-icon[b-w5rt2iao5d] {
    font-size: 24px;
}

.modal-header-gaming h3[b-w5rt2iao5d] {
    flex: 1;
    margin: 0;
    color: #ffd700;
}

.modal-close[b-w5rt2iao5d] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body-gaming[b-w5rt2iao5d] {
    padding: 24px;
}

.input-group-gaming[b-w5rt2iao5d] {
    margin-bottom: 16px;
}

.input-group-gaming label[b-w5rt2iao5d] {
    display: block;
    margin-bottom: 8px;
    color: #aaa;
    font-size: 12px;
    text-transform: uppercase;
}

.label-icon[b-w5rt2iao5d] {
    margin-right: 6px;
}

.row-gaming[b-w5rt2iao5d] {
    display: flex;
    gap: 16px;
}

.row-gaming .half[b-w5rt2iao5d] {
    flex: 1;
}

.checkbox-group-gaming[b-w5rt2iao5d] {
    margin: 16px 0;
}

.checkbox-gaming[b-w5rt2iao5d] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #ffd700;
}

.error-gaming[b-w5rt2iao5d] {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    padding: 10px;
    border-radius: 8px;
    margin-top: 16px;
    text-align: center;
    color: #dc3545;
}

.modal-footer-gaming[b-w5rt2iao5d] {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    justify-content: flex-end;
}

.delete-warning-gaming[b-w5rt2iao5d] {
    text-align: center;
    padding: 20px;
}

.warning-icon[b-w5rt2iao5d] {
    font-size: 64px;
    margin-bottom: 16px;
}

.delete-warning-gaming p[b-w5rt2iao5d] {
    color: white;
    margin: 12px 0;
}

.delete-warning-gaming strong[b-w5rt2iao5d] {
    color: #ffd700;
}

.delete-warning-gaming small[b-w5rt2iao5d] {
    color: #888;
}

/* Error Card */
.error-card[b-w5rt2iao5d] {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    color: wheat;
}

.error-icon[b-w5rt2iao5d] {
    font-size: 32px;
}
/* Gaming Select Dropdown */
.gaming-select[b-w5rt2iao5d] {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 120px;
    text-align: center;
    cursor: pointer;
}

.gaming-select option[b-w5rt2iao5d] {
    background: #1a1a2e;
    color: #ffd700;
}

.gaming-select:focus[b-w5rt2iao5d] {
    outline: none;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Tier Value Colors */
.tier-value[b-w5rt2iao5d] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.tier-0[b-w5rt2iao5d] { color: #a0a0a0; }
.tier-1[b-w5rt2iao5d] { color: #4a9eff; }
.tier-2[b-w5rt2iao5d] { color: #28a745; }
.tier-3[b-w5rt2iao5d] { color: #ffc107; }
.tier-4[b-w5rt2iao5d] { color: #ff6b6b; }

/* Gender Value Colors */
.gender-value[b-w5rt2iao5d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gender-value.male[b-w5rt2iao5d] { color: #36a2eb; }
.gender-value.female[b-w5rt2iao5d] { color: #ff6384; }
.gender-value.unknown[b-w5rt2iao5d] { color: #a0a0a0; }
/* Animations */
@keyframes slideUp-b-w5rt2iao5d {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Responsive */
@media (max-width: 768px) {
    .pawns-container[b-w5rt2iao5d] {
        padding: 12px;
    }

    .header-section[b-w5rt2iao5d] {
        flex-direction: column;
        text-align: center;
    }

    .pawns-grid[b-w5rt2iao5d] {
        grid-template-columns: 1fr;
    }

    .row-gaming[b-w5rt2iao5d] {
        flex-direction: column;
    }

    .stat-row[b-w5rt2iao5d] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Payments/PaymentFailed.razor.rz.scp.css */
/* Dark Gaming Style for Payment Failed - Persian Version */
.failed-container[b-7a8tjo7qux] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    padding: 20px;
    font-family: 'Vazir', 'IRANSans', 'Segoe UI', 'Tahoma', sans-serif;
    margin: 0;
    position: relative;
    overflow: hidden;
    direction: rtl;
}

/* Animated Background Particles */
.failed-container[b-7a8tjo7qux]::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 20% 50%, rgba(239, 68, 68, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(220, 38, 38, 0.05) 0%, transparent 50%);
    animation: rotateBg-b-7a8tjo7qux 20s linear infinite;
    pointer-events: none;
}

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

.failed-card[b-7a8tjo7qux] {
    background: rgba(15, 12, 41, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    border: 2px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 60px rgba(239, 68, 68, 0.1), 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: shake-b-7a8tjo7qux 0.6s ease-out;
}

@keyframes shake-b-7a8tjo7qux {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-8px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(8px);
    }
}

/* Failed Icon with Glow */
.failed-icon-wrapper[b-7a8tjo7qux] {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.failed-icon[b-7a8tjo7qux] {
    color: #ef4444;
    animation: scaleInShake-b-7a8tjo7qux 0.6s ease-out 0.3s both;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.4));
}

@keyframes scaleInShake-b-7a8tjo7qux {
    0% {
        transform: scale(0) rotate(30deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) rotate(-5deg);
        opacity: 1;
    }
    80% {
        transform: scale(0.9) rotate(3deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.failed-icon svg[b-7a8tjo7qux] {
    width: 80px;
    height: 80px;
    stroke: #ef4444;
}

/* Pulsing Ring Effect - Red */
.failed-ring[b-7a8tjo7qux] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, 0.3);
    animation: ringPulseFailed-b-7a8tjo7qux 2s ease-out infinite;
    pointer-events: none;
}

.failed-ring[b-7a8tjo7qux]::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, 0.15);
    animation: ringPulseFailed-b-7a8tjo7qux 2s ease-out infinite 0.5s;
}

@keyframes ringPulseFailed-b-7a8tjo7qux {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* Title */
.failed-title[b-7a8tjo7qux] {
    color: #ef4444;
    font-size: 28px;
    margin-bottom: 16px;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
    letter-spacing: 1px;
}

/* Messages */
.failed-message p[b-7a8tjo7qux] {
    font-size: 16px;
    color: #ddd;
    margin-bottom: 6px;
}

.sub-message[b-7a8tjo7qux] {
    color: #888 !important;
    font-size: 14px !important;
    margin-top: 4px;
}

/* Actions - Single Button */
.failed-actions[b-7a8tjo7qux] {
    display: flex;
    justify-content: center;
    margin: 30px 0 20px;
}

.btn-primary[b-7a8tjo7qux] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    letter-spacing: 1px;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
    width: 100%;
    max-width: 280px;
}

.btn-primary:hover[b-7a8tjo7qux] {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.4);
}

.btn-primary:active[b-7a8tjo7qux] {
    transform: translateY(0);
}

/* Help Section */
.help-section[b-7a8tjo7qux] {
    background: rgba(239, 68, 68, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    text-align: right;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.help-section h3[b-7a8tjo7qux] {
    color: #ff6b6b;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
}

.help-list[b-7a8tjo7qux] {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.help-list li[b-7a8tjo7qux] {
    color: #ccc;
    padding: 8px 0;
    padding-right: 28px;
    position: relative;
    font-size: 14px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.help-list li:last-child[b-7a8tjo7qux] {
    border-bottom: none;
}

.help-list li[b-7a8tjo7qux]:before {
    content: "⚠️";
    position: absolute;
    right: 0;
    top: 6px;
    font-size: 16px;
}

/* Footer */
.failed-footer[b-7a8tjo7qux] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(239, 68, 68, 0.1);
}

.failed-footer p[b-7a8tjo7qux] {
    color: #888;
    margin-bottom: 4px;
    font-size: 14px;
}

.support-text[b-7a8tjo7qux] {
    color: #666 !important;
    font-size: 12px !important;
}

/* Pulse Effect Background */
.pulse-effect[b-7a8tjo7qux] {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pulse-circle[b-7a8tjo7qux] {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px solid rgba(239, 68, 68, 0.08);
    animation: ripple-b-7a8tjo7qux 3s linear infinite;
}

.pulse-circle:nth-child(2)[b-7a8tjo7qux] {
    animation-delay: 1s;
}

.pulse-circle:nth-child(3)[b-7a8tjo7qux] {
    animation-delay: 2s;
}

@keyframes ripple-b-7a8tjo7qux {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Mobile Optimization */
@media (max-width: 480px) {
    .failed-card[b-7a8tjo7qux] {
        padding: 30px 20px;
        border-radius: 20px;
        margin: 10px;
    }

    .failed-title[b-7a8tjo7qux] {
        font-size: 24px;
    }

    .failed-icon svg[b-7a8tjo7qux] {
        width: 64px;
        height: 64px;
    }

    .failed-ring[b-7a8tjo7qux] {
        width: 100px;
        height: 100px;
    }

    .btn-primary[b-7a8tjo7qux] {
        padding: 12px 24px;
        font-size: 14px;
        max-width: 100%;
    }

    .help-list li[b-7a8tjo7qux] {
        font-size: 13px;
        padding: 6px 0;
        padding-right: 24px;
    }

    .pulse-circle[b-7a8tjo7qux] {
        width: 200px;
        height: 200px;
    }
}

/* Landscape Phone Optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .failed-card[b-7a8tjo7qux] {
        padding: 20px 25px;
        max-width: 380px;
    }

    .failed-icon-wrapper[b-7a8tjo7qux] {
        margin-bottom: 10px;
    }

    .failed-icon svg[b-7a8tjo7qux] {
        width: 50px;
        height: 50px;
    }

    .failed-ring[b-7a8tjo7qux] {
        width: 80px;
        height: 80px;
    }

    .failed-title[b-7a8tjo7qux] {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .failed-actions[b-7a8tjo7qux] {
        margin: 16px 0 12px;
    }

    .btn-primary[b-7a8tjo7qux] {
        padding: 10px 20px;
        font-size: 13px;
    }

    .help-section[b-7a8tjo7qux] {
        padding: 12px;
        margin: 12px 0;
    }

    .help-list li[b-7a8tjo7qux] {
        padding: 4px 0;
        padding-right: 22px;
        font-size: 12px;
    }

    .failed-footer[b-7a8tjo7qux] {
        margin-top: 12px;
        padding-top: 12px;
    }

    .pulse-circle[b-7a8tjo7qux] {
        width: 150px;
        height: 150px;
    }
}

/* No Navbar/Header - Full Screen */
body[b-7a8tjo7qux] {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* RTL Specific Adjustments */
.failed-card[b-7a8tjo7qux],
.failed-message[b-7a8tjo7qux],
.help-section[b-7a8tjo7qux],
.failed-footer[b-7a8tjo7qux] {
    text-align: center;
}

.help-list[b-7a8tjo7qux] {
    text-align: right;
}

.btn-primary[b-7a8tjo7qux] {
    font-family: 'Vazir', 'IRANSans', sans-serif;
}
/* /Components/Pages/Payments/PaymentSuccess.razor.rz.scp.css */
/* Dark Gaming Style for Payment Success - Persian Version */
.success-container[b-opo86377sc] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    padding: 20px;
    font-family: 'Vazir', 'IRANSans', 'Segoe UI', 'Tahoma', sans-serif;
    margin: 0;
    position: relative;
    overflow: hidden;
    direction: rtl;
}

/* Animated Background Particles */
.success-container[b-opo86377sc]::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(108, 92, 231, 0.05) 0%, transparent 50%);
    animation: rotateBg-b-opo86377sc 20s linear infinite;
    pointer-events: none;
}

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

.success-card[b-opo86377sc] {
    background: rgba(15, 12, 41, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.1), 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: slideUp-b-opo86377sc 0.6s ease-out;
}

@keyframes slideUp-b-opo86377sc {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Success Icon with Glow */
.success-icon-wrapper[b-opo86377sc] {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.success-icon[b-opo86377sc] {
    color: #00ff88;
    animation: scaleIn-b-opo86377sc 0.5s ease-out 0.3s both;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.4));
}

@keyframes scaleIn-b-opo86377sc {
    from {
        transform: scale(0) rotate(-30deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.success-icon svg[b-opo86377sc] {
    width: 80px;
    height: 80px;
    stroke: #00ff88;
}

/* Pulsing Ring Effect */
.success-ring[b-opo86377sc] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 136, 0.3);
    animation: ringPulse-b-opo86377sc 2s ease-out infinite;
    pointer-events: none;
}

.success-ring[b-opo86377sc]::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 136, 0.15);
    animation: ringPulse-b-opo86377sc 2s ease-out infinite 0.5s;
}

@keyframes ringPulse-b-opo86377sc {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* Confetti Particles */
.confetti-container[b-opo86377sc] {
    position: relative;
    height: 60px;
    margin: 10px 0;
    overflow: hidden;
}

.confetti[b-opo86377sc] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confettiFall-b-opo86377sc 3s ease-in-out infinite;
}

.confetti-1[b-opo86377sc] {
    right: 10%;
    background: #ffd700;
    animation-delay: 0s;
}

.confetti-2[b-opo86377sc] {
    right: 25%;
    background: #ff6b6b;
    animation-delay: 0.3s;
    width: 6px;
    height: 10px;
}

.confetti-3[b-opo86377sc] {
    right: 40%;
    background: #6c5ce7;
    animation-delay: 0.6s;
    width: 10px;
    height: 6px;
}

.confetti-4[b-opo86377sc] {
    right: 55%;
    background: #00ff88;
    animation-delay: 0.9s;
}

.confetti-5[b-opo86377sc] {
    right: 70%;
    background: #ffa94d;
    animation-delay: 1.2s;
    width: 6px;
    height: 8px;
}

.confetti-6[b-opo86377sc] {
    right: 85%;
    background: #74b9ff;
    animation-delay: 1.5s;
}

@keyframes confettiFall-b-opo86377sc {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(50px) rotate(720deg);
        opacity: 0;
    }
}

/* Title */
.success-title[b-opo86377sc] {
    color: #ffd700;
    font-size: 28px;
    margin-bottom: 16px;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    letter-spacing: 1px;
}

/* Messages */
.success-message p[b-opo86377sc] {
    font-size: 16px;
    color: #ddd;
    margin-bottom: 6px;
}

.sub-message[b-opo86377sc] {
    color: #888 !important;
    font-size: 14px !important;
    margin-top: 4px;
}

/* Actions */
.success-actions[b-opo86377sc] {
    display: flex;
    justify-content: center;
    margin: 30px 0 20px;
}

.btn-primary[b-opo86377sc] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    letter-spacing: 1px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
    width: 100%;
    max-width: 280px;
}

.btn-primary:hover[b-opo86377sc] {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
}

.btn-primary:active[b-opo86377sc] {
    transform: translateY(0);
}

/* Footer */
.success-footer[b-opo86377sc] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
}

.success-footer p[b-opo86377sc] {
    color: #888;
    margin-bottom: 6px;
    font-size: 14px;
}

.support-text[b-opo86377sc] {
    color: #666 !important;
    font-size: 12px !important;
}

/* Mobile Optimization */
@media (max-width: 480px) {
    .success-card[b-opo86377sc] {
        padding: 30px 20px;
        border-radius: 20px;
        margin: 10px;
    }

    .success-title[b-opo86377sc] {
        font-size: 24px;
    }

    .success-icon svg[b-opo86377sc] {
        width: 64px;
        height: 64px;
    }

    .success-ring[b-opo86377sc] {
        width: 100px;
        height: 100px;
    }

    .btn-primary[b-opo86377sc] {
        padding: 12px 24px;
        font-size: 14px;
        max-width: 100%;
    }

    .confetti[b-opo86377sc] {
        width: 6px;
        height: 6px;
    }

    .confetti-2[b-opo86377sc], .confetti-5[b-opo86377sc] {
        width: 4px;
        height: 8px;
    }

    .confetti-3[b-opo86377sc] {
        width: 8px;
        height: 4px;
    }
}

/* Landscape Phone Optimization */
@media (max-height: 600px) and (orientation: landscape) {
    .success-card[b-opo86377sc] {
        padding: 20px 25px;
        max-width: 380px;
    }

    .success-icon-wrapper[b-opo86377sc] {
        margin-bottom: 10px;
    }

    .success-icon svg[b-opo86377sc] {
        width: 50px;
        height: 50px;
    }

    .success-ring[b-opo86377sc] {
        width: 80px;
        height: 80px;
    }

    .success-title[b-opo86377sc] {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .success-actions[b-opo86377sc] {
        margin: 16px 0 12px;
    }

    .btn-primary[b-opo86377sc] {
        padding: 10px 20px;
        font-size: 13px;
    }

    .confetti-container[b-opo86377sc] {
        height: 40px;
    }

    .success-footer[b-opo86377sc] {
        margin-top: 12px;
        padding-top: 12px;
    }
}

/* No Navbar/Header - Full Screen */
body[b-opo86377sc] {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* RTL Specific Adjustments */
.success-card[b-opo86377sc],
.success-message[b-opo86377sc],
.success-footer[b-opo86377sc] {
    text-align: center;
}

.btn-primary[b-opo86377sc] {
    font-family: 'Vazir', 'IRANSans', sans-serif;
}
/* /Components/Pages/Platforms.razor.rz.scp.css */
/* Platforms Container */
.platforms-container[b-61fuzqarvr] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-61fuzqarvr] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-61fuzqarvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-61fuzqarvr] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-61fuzqarvr] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-61fuzqarvr] {
    color: #a0a0b0;
    font-size: 14px;
}

/* Platforms Grid */
.platforms-grid[b-61fuzqarvr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/* Platform Card */
.platform-card[b-61fuzqarvr] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.platform-card:hover[b-61fuzqarvr] {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* Platform-specific header colors */
.platform-card.platform-android .platform-header[b-61fuzqarvr] {
    border-bottom: 3px solid #3ddc84;
}

.platform-card.platform-ios .platform-header[b-61fuzqarvr] {
    border-bottom: 3px solid #ffffff;
}

/* Platform Header */
.platform-header[b-61fuzqarvr] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.platform-icon[b-61fuzqarvr] {
    font-size: 48px;
}

.platform-title h3[b-61fuzqarvr] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #ffd700;
}

.platform-badge[b-61fuzqarvr] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 20px;
    font-size: 10px;
    color: #ffd700;
}

/* Platform Body */
.platform-body[b-61fuzqarvr] {
    padding: 24px;
}

.form-field[b-61fuzqarvr] {
    margin-bottom: 20px;
}

.form-field label[b-61fuzqarvr] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 13px;
    font-weight: 500;
}

/* Modern Input */
.modern-input[b-61fuzqarvr] {
    width: 90%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-61fuzqarvr] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

textarea.modern-input[b-61fuzqarvr] {
    resize: vertical;
    min-height: 80px;
}

/* Platform Footer */
.platform-footer[b-61fuzqarvr] {
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    text-align: right;
}

.btn-save[b-61fuzqarvr] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-save:hover[b-61fuzqarvr] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Error Card */
.error-card[b-61fuzqarvr] {
    text-align: center;
    padding: 40px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 20px;
    margin: 24px 0;
}

.error-icon[b-61fuzqarvr] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.error-card p[b-61fuzqarvr] {
    color: #ff6b6b;
    margin-bottom: 16px;
}

.retry-btn[b-61fuzqarvr] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 8px 20px;
    color: #1a1a2e;
    cursor: pointer;
    font-weight: 600;
}

/* Toast Notification */
.toast-notification[b-61fuzqarvr] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-61fuzqarvr 0.3s ease;
    z-index: 10001;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.success[b-61fuzqarvr] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border-left: 4px solid #ffd700;
}

.toast-notification span:first-child[b-61fuzqarvr] {
    font-size: 18px;
}

.toast-notification span:nth-child(2)[b-61fuzqarvr] {
    flex: 1;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.toast-close[b-61fuzqarvr] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-close:hover[b-61fuzqarvr] {
    opacity: 1;
}

/* Loading Animation */
.dot-pulse-loader[b-61fuzqarvr] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-61fuzqarvr] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-61fuzqarvr 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-61fuzqarvr] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-61fuzqarvr] { animation-delay: 0.4s; }
.platform-img[b-61fuzqarvr] {
    width: 400px;
    height: 75px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .platform-img[b-61fuzqarvr] {
        width: 36px;
        height: 36px;
    }
}
@keyframes pulse-b-61fuzqarvr {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes slideInRight-b-61fuzqarvr {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .platforms-grid[b-61fuzqarvr] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .platforms-container[b-61fuzqarvr] {
        padding: 16px;
    }

    .main-heading[b-61fuzqarvr] {
        font-size: 24px;
    }

    .platform-header[b-61fuzqarvr] {
        padding: 16px 20px;
    }

    .platform-icon[b-61fuzqarvr] {
        font-size: 36px;
    }

    .platform-title h3[b-61fuzqarvr] {
        font-size: 18px;
    }

    .platform-body[b-61fuzqarvr] {
        padding: 20px;
    }

    .form-field[b-61fuzqarvr] {
        margin-bottom: 16px;
    }

    .modern-input[b-61fuzqarvr] {
        padding: 10px 14px;
    }

    .platform-footer[b-61fuzqarvr] {
        padding: 14px 20px;
    }

    .btn-save[b-61fuzqarvr] {
        padding: 8px 20px;
        font-size: 13px;
    }

    .toast-notification[b-61fuzqarvr] {
        top: 16px;
        right: 16px;
        left: 16px;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .badge[b-61fuzqarvr] {
        font-size: 10px;
    }
}
/* /Components/Pages/Purchases.razor.rz.scp.css */
    /* (All styles remain exactly the same as in the previous working version) */
.purchases-container[b-c8iioil2sn] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.header-section[b-c8iioil2sn] {
    text-align: center;
    margin-bottom: 32px;
}
    .kpi-grid[b-c8iioil2sn] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
    }

    .kpi-card[b-c8iioil2sn] {
        position: relative;
        overflow: hidden;

        background: rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(14px);

        border-radius: 20px;
        padding: 24px;

        border: 1px solid rgba(255, 255, 255, 0.08);

        transition:
                transform 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
    }

    .kpi-card:hover[b-c8iioil2sn] {
        transform: translateY(-4px);
    }

    .kpi-card[b-c8iioil2sn]::before {
        content: "";
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 4px;
    }

    .kpi-card.gold[b-c8iioil2sn]::before {
        background: linear-gradient(90deg, #ffd700, #ff9800);
    }

    .kpi-card.green[b-c8iioil2sn]::before {
        background: linear-gradient(90deg, #00e676, #00c853);
    }

    .kpi-card.blue[b-c8iioil2sn]::before {
        background: linear-gradient(90deg, #42a5f5, #1e88e5);
    }

    .kpi-card.gold[b-c8iioil2sn] {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.08);
    }

    .kpi-card.green[b-c8iioil2sn] {
        box-shadow: 0 0 20px rgba(0, 230, 118, 0.08);
    }

    .kpi-card.blue[b-c8iioil2sn] {
        box-shadow: 0 0 20px rgba(66, 165, 245, 0.08);
    }

    .kpi-card.gold:hover[b-c8iioil2sn] {
        border-color: rgba(255, 215, 0, 0.35);
        box-shadow: 0 0 28px rgba(255, 215, 0, 0.18);
    }

    .kpi-card.green:hover[b-c8iioil2sn] {
        border-color: rgba(0, 230, 118, 0.35);
        box-shadow: 0 0 28px rgba(0, 230, 118, 0.18);
    }

    .kpi-card.blue:hover[b-c8iioil2sn] {
        border-color: rgba(66, 165, 245, 0.35);
        box-shadow: 0 0 28px rgba(66, 165, 245, 0.18);
    }

    .kpi-title[b-c8iioil2sn] {
        color: #a0a0b0;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;

        margin-bottom: 14px;
    }

    .kpi-value[b-c8iioil2sn] {
        font-size: 42px;
        font-weight: 800;
        line-height: 1;

        margin-bottom: 14px;
    }

    .kpi-card.gold .kpi-value[b-c8iioil2sn] {
        color: #ffd700;
    }

    .kpi-card.green .kpi-value[b-c8iioil2sn] {
        color: #00e676;
    }

    .kpi-card.blue .kpi-value[b-c8iioil2sn] {
        color: #42a5f5;
    }

    .kpi-subtitle[b-c8iioil2sn] {
        color: #8b8ba7;
        font-size: 13px;
        line-height: 1.5;
    }

    @media (max-width: 768px) {
        .kpi-grid[b-c8iioil2sn] {
            grid-template-columns: 1fr;
        }

        .kpi-value[b-c8iioil2sn] {
            font-size: 34px;
        }
    }
.main-heading[b-c8iioil2sn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-c8iioil2sn] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-c8iioil2sn] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-c8iioil2sn] {
    color: #a0a0b0;
    font-size: 14px;
}

.tabs-container[b-c8iioil2sn] {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    background: rgba(10, 10, 20, 0.6);
    padding: 8px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.tab-btn[b-c8iioil2sn] {
    flex: 1;
    padding: 12px 24px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: #a0a0b0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn.active[b-c8iioil2sn] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}

.tab-btn:hover:not(.active)[b-c8iioil2sn] {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
}

.filters-card[b-c8iioil2sn] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    padding: 24px;
    margin-bottom: 24px;
}

.filters-grid[b-c8iioil2sn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.filter-field[b-c8iioil2sn] {
    flex: 1;
    min-width: 160px;
}

.filter-field label[b-c8iioil2sn] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modern-input[b-c8iioil2sn] {
    width: 80%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-c8iioil2sn] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.filter-actions[b-c8iioil2sn] {
    display: flex;
    gap: 12px;
}

.btn-apply[b-c8iioil2sn] {
    padding: 12px 24px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 12px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply:hover[b-c8iioil2sn] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-clear[b-c8iioil2sn] {
    padding: 12px 24px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 12px;
    color: #a0a0b0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear:hover[b-c8iioil2sn] {
    background: rgba(108, 117, 125, 0.4);
}

.results-info[b-c8iioil2sn] {
    text-align: center;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 40px;
    display: inline-block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 13px;
    color: #a0a0b0;
}

.results-info strong[b-c8iioil2sn] {
    color: #ffd700;
}

.table-container[b-c8iioil2sn] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
}

.purchases-table[b-c8iioil2sn] {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.header-row th[b-c8iioil2sn] {
    padding: 16px 20px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.purchase-row td[b-c8iioil2sn] {
    padding: 14px 20px;
    color: #e0e0e0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.purchase-row:hover[b-c8iioil2sn] {
    background: rgba(255, 215, 0, 0.05);
}

.col-user[b-c8iioil2sn] { width: 30px; }
.col-name[b-c8iioil2sn] { width: 180px; }
.col-date[b-c8iioil2sn] { width: 150px; }
.col-platform[b-c8iioil2sn] { width: 120px; }
.col-price[b-c8iioil2sn] { width: 100px; }
.col-sku[b-c8iioil2sn] { width: 150px; }

.clickable-id[b-c8iioil2sn] {
    color: #ffd700;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    transition: all 0.2s ease;
}

.clickable-id:hover[b-c8iioil2sn] {
    transform: translateX(3px);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.platform-badge[b-c8iioil2sn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
}

.platform-badge.cafe[b-c8iioil2sn] {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.platform-badge.myket[b-c8iioil2sn] {
    background: rgba(33, 150, 243, 0.15);
    color: #2196f3;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.platform-badge.other[b-c8iioil2sn] {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.price-value[b-c8iioil2sn] {
    color: #00ff88;
    font-weight: 600;
}

.sku-code[b-c8iioil2sn] {
    font-family: monospace;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 6px;
}

.pagination-section[b-c8iioil2sn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.pagination-info[b-c8iioil2sn] {
    color: #a0a0b0;
    font-size: 13px;
}

.pagination-controls[b-c8iioil2sn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-btn[b-c8iioil2sn] {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 40px;
    color: #e0e0e0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-c8iioil2sn] {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
}

.page-btn:disabled[b-c8iioil2sn] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-current[b-c8iioil2sn] {
    padding: 6px 16px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 14px;
    min-width: 50px;
    text-align: center;
}

/* Chart Styles */
.chart-container[b-c8iioil2sn] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    padding: 24px;
}

.chart-header[b-c8iioil2sn] {
    text-align: center;
    margin-bottom: 32px;
}

.chart-header h3[b-c8iioil2sn] {
    color: #ffd700;
    font-size: 24px;
    margin-bottom: 8px;
}

.chart-header p[b-c8iioil2sn] {
    color: #a0a0b0;
    font-size: 14px;
}

.chart-legend[b-c8iioil2sn] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.legend-item[b-c8iioil2sn] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e0e0e0;
    font-size: 14px;
}

.legend-color[b-c8iioil2sn] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

    .simple-chart[b-c8iioil2sn] {
        display: flex;
        gap: 16px;
        min-height: 400px;
        margin-bottom: 32px;
        overflow-x: auto;          /* enables horizontal scroll */
    }

    .chart-bars-container[b-c8iioil2sn] {
        display: flex;
        gap: 15px;
        min-width: max-content;    /* prevents bars from shrinking */
        padding: 20px 0;
    }

.y-axis-label[b-c8iioil2sn] {
    color: #a0a0b0;
    font-size: 11px;
    text-align: right;
}



.bar-group[b-c8iioil2sn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bar-column[b-c8iioil2sn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.bar-label-date[b-c8iioil2sn] {
    color: #a0a0b0;
    font-size: 10px;
    margin-bottom: 45px;
    transform: rotate(-45deg);
    width: 30px;
    text-align: center;
}

.bars[b-c8iioil2sn] {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 200px;
    justify-content: center;
}

.bar[b-c8iioil2sn] {
    width: 20px;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    cursor: pointer;
}

.myket-bar[b-c8iioil2sn] {
    background: linear-gradient(180deg, #2196f3, #1976d2);
}

.cafe-bar[b-c8iioil2sn] {
    background: linear-gradient(180deg, #4caf50, #388e3c);
}

.zarinpal-bar[b-c8iioil2sn] {
    background: linear-gradient(180deg, #ffc107, #ff9800);
}

.bar:hover[b-c8iioil2sn] {
    opacity: 0.8;
    transform: scaleX(1.1);
}

.stats-grid[b-c8iioil2sn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.stat-card[b-c8iioil2sn] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.15);
    transition: transform 0.2s ease;
}

.stat-card:hover[b-c8iioil2sn] {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.3);
}

.stat-title[b-c8iioil2sn] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 12px;
}

.stat-value[b-c8iioil2sn] {
    color: #ffd700;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-label[b-c8iioil2sn] {
    color: #a0a0b0;
    font-size: 12px;
    margin-bottom: 4px;
}

.stat-count[b-c8iioil2sn] {
    color: #00ff88;
    font-size: 20px;
    font-weight: 600;
}

.empty-state[b-c8iioil2sn] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-c8iioil2sn] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-c8iioil2sn] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

.dot-pulse-loader[b-c8iioil2sn] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-c8iioil2sn] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-c8iioil2sn 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-c8iioil2sn] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-c8iioil2sn] { animation-delay: 0.4s; }

@keyframes pulse-b-c8iioil2sn {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@media (max-width: 900px) {
    .filters-grid[b-c8iioil2sn] {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-actions[b-c8iioil2sn] {
        flex-direction: column;
    }
    .btn-apply[b-c8iioil2sn], .btn-clear[b-c8iioil2sn] {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .purchases-container[b-c8iioil2sn] {
        padding: 16px;
    }
    .main-heading[b-c8iioil2sn] {
        font-size: 24px;
    }
    .pagination-section[b-c8iioil2sn] {
        flex-direction: column;
        gap: 12px;
    }
    .stats-grid[b-c8iioil2sn] {
        grid-template-columns: 1fr;
    }
    .bar[b-c8iioil2sn] {
        width: 15px;
    }
    .bars[b-c8iioil2sn] {
        height: 150px;
    }
}
/* /Components/Pages/Reports.razor.rz.scp.css */
/* Reports Container */
.reports-container[b-41vi0k8i1c] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-41vi0k8i1c] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-41vi0k8i1c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.heading-icon[b-41vi0k8i1c] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-41vi0k8i1c] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-41vi0k8i1c] {
    color: #a0a0b0;
    font-size: 14px;
}

/* NEW: Filter Card */
.filter-card[b-41vi0k8i1c] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.filter-info[b-41vi0k8i1c] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-icon[b-41vi0k8i1c] {
    font-size: 32px;
}

.filter-info h3[b-41vi0k8i1c] {
    color: #00ffff;
    margin: 0 0 4px 0;
    font-size: 16px;
}

.filter-info p[b-41vi0k8i1c] {
    color: #a0a0b0;
    margin: 0;
    font-size: 13px;
}

.filter-controls[b-41vi0k8i1c] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-filter[b-41vi0k8i1c], .btn-clear[b-41vi0k8i1c] {
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-filter[b-41vi0k8i1c] {
    background: rgba(0, 255, 255, 0.15);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

.btn-filter:hover[b-41vi0k8i1c] {
    background: rgba(0, 255, 255, 0.3);
    transform: translateY(-1px);
}

.btn-clear[b-41vi0k8i1c] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a0a0b0;
}

.btn-clear:hover[b-41vi0k8i1c] {
    background: rgba(108, 117, 125, 0.3);
    transform: translateY(-1px);
}

/* NEW: Delete User Card */
.delete-user-card[b-41vi0k8i1c] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 69, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.btn-delete-user[b-41vi0k8i1c] {
    padding: 10px 20px;
    background: rgba(255, 69, 0, 0.15);
    border: 1px solid rgba(255, 69, 0, 0.3);
    border-radius: 40px;
    color: #ff4500;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete-user:hover:not(:disabled)[b-41vi0k8i1c] {
    background: rgba(255, 69, 0, 0.3);
    transform: translateY(-1px);
}

.btn-delete-user:disabled[b-41vi0k8i1c] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Delete Card (Original) */
.delete-card[b-41vi0k8i1c] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(220, 53, 69, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.delete-info[b-41vi0k8i1c] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.delete-icon[b-41vi0k8i1c] {
    font-size: 32px;
}

.delete-info h3[b-41vi0k8i1c] {
    color: #ff6b6b;
    margin: 0 0 4px 0;
    font-size: 16px;
}

.delete-info p[b-41vi0k8i1c] {
    color: #a0a0b0;
    margin: 0;
    font-size: 13px;
}

.delete-controls[b-41vi0k8i1c] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-delete[b-41vi0k8i1c] {
    padding: 10px 20px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 40px;
    color: #ff6b6b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete:hover:not(:disabled)[b-41vi0k8i1c] {
    background: rgba(220, 53, 69, 0.3);
    transform: translateY(-1px);
}

.btn-delete:disabled[b-41vi0k8i1c] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading State */
.loading-state[b-41vi0k8i1c] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 28px;
}

.dot-pulse[b-41vi0k8i1c] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dot-pulse .dot[b-41vi0k8i1c] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-41vi0k8i1c 1.5s ease-in-out infinite;
}

.dot-pulse .dot:nth-child(2)[b-41vi0k8i1c] { animation-delay: 0.2s; }
.dot-pulse .dot:nth-child(3)[b-41vi0k8i1c] { animation-delay: 0.4s; }

.loading-state p[b-41vi0k8i1c] {
    color: #a0a0b0;
}

/* Error Card */
.error-card[b-41vi0k8i1c] {
    text-align: center;
    padding: 60px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 28px;
}

.error-icon[b-41vi0k8i1c] {
    font-size: 48px;
    margin-bottom: 16px;
}

.error-card p[b-41vi0k8i1c] {
    color: #ff6b6b;
    margin-bottom: 20px;
}

.retry-btn[b-41vi0k8i1c] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.retry-btn:hover[b-41vi0k8i1c] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Empty State */
.empty-state[b-41vi0k8i1c] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 28px;
}

.empty-icon[b-41vi0k8i1c] {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-41vi0k8i1c] {
    color: #a0a0b0;
}

/* Table Container */
.table-container[b-41vi0k8i1c] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 28px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
}

.reports-table[b-41vi0k8i1c] {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.header-row th[b-41vi0k8i1c] {
    padding: 18px 20px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.report-row td[b-41vi0k8i1c] {
    padding: 16px 20px;
    color: #e0e0e0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.report-row:hover[b-41vi0k8i1c] {
    background: rgba(255, 215, 0, 0.05);
}

/* Column Widths */
.col-message[b-41vi0k8i1c] { min-width: 250px; }
.col-status[b-41vi0k8i1c] { width: 100px; }
.col-date[b-41vi0k8i1c] { width: 150px; }
.col-reported[b-41vi0k8i1c] { width: 100px; }
.col-reporter[b-41vi0k8i1c] { width: 100px; }
.col-actions[b-41vi0k8i1c] { width: 280px; }

/* Message Text */
.message-text[b-41vi0k8i1c] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* Clickable ID */
.clickable-id[b-41vi0k8i1c] {
    cursor: pointer;
    color: #ffd700;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
}

.clickable-id:hover[b-41vi0k8i1c] {
    transform: translateX(3px);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Status Badge */
.status-badge[b-41vi0k8i1c] {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.pending[b-41vi0k8i1c] {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-badge.verified[b-41vi0k8i1c] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

/* Action Buttons */
.action-buttons[b-41vi0k8i1c] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Banned Container */
.banned-container[b-41vi0k8i1c] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.banned-badge[b-41vi0k8i1c] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Unban Button */
.unban-btn[b-41vi0k8i1c] {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #28a745;
    transition: all 0.2s ease;
}

.unban-btn:hover[b-41vi0k8i1c] {
    background: rgba(40, 167, 69, 0.3);
    transform: scale(1.02);
}

/* Delete Report Button */
.delete-report-btn[b-41vi0k8i1c] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #ff6b6b;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.delete-report-btn:hover[b-41vi0k8i1c] {
    background: rgba(220, 53, 69, 0.3);
    transform: scale(1.02);
}

/* Toggle Switch */
.toggle-switch[b-41vi0k8i1c] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
}

.toggle-switch input[b-41vi0k8i1c] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-41vi0k8i1c] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.3);
    transition: 0.3s;
    border-radius: 34px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.toggle-slider[b-41vi0k8i1c]:before {
    position: absolute;
    content: "✕";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
}

input:checked + .toggle-slider[b-41vi0k8i1c] {
    background-color: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
}

input:checked + .toggle-slider[b-41vi0k8i1c]:before {
    content: "✓";
    transform: translateX(26px);
    background-color: #28a745;
}

/* Pagination */
.pagination-container[b-41vi0k8i1c] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 16px;
}

.page-btn[b-41vi0k8i1c] {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 40px;
    color: #e0e0e0;
    cursor: pointer;
}

.page-btn:hover[b-41vi0k8i1c] {
    background: #d4a017;
}

.page-btn:disabled[b-41vi0k8i1c] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-info[b-41vi0k8i1c], .total-info[b-41vi0k8i1c] {
    color: #ffd700;
    font-size: 14px;
}

/* Modern Input */
.modern-input[b-41vi0k8i1c] {
    width: 85%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-41vi0k8i1c] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
}

/* Modal */
.modal-overlay[b-41vi0k8i1c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-41vi0k8i1c] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 24px;
    width: 420px;
    max-width: 90%;
    animation: slideIn-b-41vi0k8i1c 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-header[b-41vi0k8i1c] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.warning[b-41vi0k8i1c] { border-bottom-color: rgba(255, 215, 0, 0.3); }
.modal-header.danger[b-41vi0k8i1c] { border-bottom-color: rgba(220, 53, 69, 0.3); }
.modal-header.success[b-41vi0k8i1c] { border-bottom-color: rgba(40, 167, 69, 0.3); }

.modal-icon[b-41vi0k8i1c] { font-size: 24px; }
.modal-header h3[b-41vi0k8i1c] { flex: 1; margin: 0; color: white; font-size: 18px; }

.modal-close[b-41vi0k8i1c] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-41vi0k8i1c] {
    padding: 24px;
}

.modal-body p[b-41vi0k8i1c] {
    color: #ddd;
    font-size: 14px;
    text-align: center;
    margin: 0;
}

.confirm-message[b-41vi0k8i1c] {
    text-align: center;
}

.confirm-message strong[b-41vi0k8i1c] {
    color: #ffd700;
}

.info-text[b-41vi0k8i1c] {
    color: #ff9800;
    font-size: 12px;
    display: block;
    margin-top: 12px;
    text-align: center;
}

.warning-text[b-41vi0k8i1c] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
    text-align: center;
}

.form-group[b-41vi0k8i1c] {
    margin-bottom: 20px;
}

.form-group label[b-41vi0k8i1c] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 13px;
    font-weight: 500;
}

.modern-select[b-41vi0k8i1c] {
    width: 100%;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 14px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.modern-select:focus[b-41vi0k8i1c] {
    outline: none;
    border-color: #ffd700;
}

.modal-footer[b-41vi0k8i1c] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-secondary[b-41vi0k8i1c] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.btn-danger[b-41vi0k8i1c] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.btn-success[b-41vi0k8i1c] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.btn-cancel[b-41vi0k8i1c] {
    padding: 8px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}

.btn-confirm[b-41vi0k8i1c] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

/* Animations */
@keyframes pulse-b-41vi0k8i1c {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

/* Responsive */
@media (max-width: 768px) {
    .reports-container[b-41vi0k8i1c] {
        padding: 16px;
    }

    .main-heading[b-41vi0k8i1c] {
        font-size: 24px;
        flex-wrap: wrap;
    }

    .header-row th[b-41vi0k8i1c],
    .report-row td[b-41vi0k8i1c] {
        padding: 12px;
    }

    .message-text[b-41vi0k8i1c] {
        max-width: 150px;
    }

    .action-buttons[b-41vi0k8i1c] {
        gap: 8px;
    }

    .col-actions[b-41vi0k8i1c] {
        min-width: 200px;
    }

    .banned-container[b-41vi0k8i1c] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .delete-card[b-41vi0k8i1c],
    .delete-user-card[b-41vi0k8i1c],
    .filter-card[b-41vi0k8i1c] {
        flex-direction: column;
        text-align: center;
    }

    .delete-controls[b-41vi0k8i1c],
    .filter-controls[b-41vi0k8i1c] {
        flex-direction: column;
        width: 100%;
    }

    .delete-controls .modern-input[b-41vi0k8i1c],
    .delete-controls .btn-delete[b-41vi0k8i1c],
    .delete-controls .btn-delete-user[b-41vi0k8i1c],
    .filter-controls .modern-input[b-41vi0k8i1c],
    .filter-controls .btn-filter[b-41vi0k8i1c],
    .filter-controls .btn-clear[b-41vi0k8i1c] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .reports-container[b-41vi0k8i1c] {
        padding: 12px;
    }

    .badge[b-41vi0k8i1c] {
        font-size: 10px;
    }
}
/* /Components/Pages/Retention.razor.rz.scp.css */
.analytics-container[b-bcxij4z0d9] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    padding: 30px;
    background: #f8f9fa;
    min-height: 100vh;
}

/* Tabs */
.tabs-header[b-bcxij4z0d9] {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    background: white;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tab-btn[b-bcxij4z0d9] {
    padding: 12px 24px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    color: #666;
}

.tab-btn:hover[b-bcxij4z0d9] {
    background: #f0f0f0;
}

.tab-btn.active[b-bcxij4z0d9] {
    background: #4a90e2;
    color: white;
}

.delete-section[b-bcxij4z0d9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.delete-btn[b-bcxij4z0d9] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.delete-btn:hover[b-bcxij4z0d9] {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-1px);
}

/* Header */
.header-section[b-bcxij4z0d9] {
    margin-bottom: 32px;
}

.header-section h2[b-bcxij4z0d9] {
    margin: 0 0 8px 0;
    color: #1a1a2e;
    font-size: 28px;
    font-weight: 600;
}

.subtitle[b-bcxij4z0d9] {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* Filter Bar */
.filter-bar[b-bcxij4z0d9] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 32px;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.filter-group[b-bcxij4z0d9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label[b-bcxij4z0d9] {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-group input[b-bcxij4z0d9] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}

.filter-group input:focus[b-bcxij4z0d9] {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.1);
}

.btn-primary[b-bcxij4z0d9], .btn-secondary[b-bcxij4z0d9] {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-bcxij4z0d9] {
    background: #4a90e2;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-bcxij4z0d9] {
    background: #357abd;
    transform: translateY(-1px);
}

.btn-secondary[b-bcxij4z0d9] {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-bcxij4z0d9] {
    background: #5a6268;
}

.btn-primary:disabled[b-bcxij4z0d9], .btn-secondary:disabled[b-bcxij4z0d9] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner[b-bcxij4z0d9] {
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-bcxij4z0d9 0.6s linear infinite;
}

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

/* Stats Summary */
.stats-summary[b-bcxij4z0d9] {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.stat-card[b-bcxij4z0d9] {
    background: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex: 1;
    min-width: 150px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-bcxij4z0d9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-label[b-bcxij4z0d9] {
    display: block;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stat-value[b-bcxij4z0d9] {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
}

/* Heatmap */
.heatmap-wrapper[b-bcxij4z0d9] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 24px;
    overflow: hidden;
}

.heatmap-scroll[b-bcxij4z0d9] {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 8px;
}

.heatmap-scroll[b-bcxij4z0d9]::-webkit-scrollbar {
    height: 8px;
}

.heatmap-scroll[b-bcxij4z0d9]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.heatmap-scroll[b-bcxij4z0d9]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.retention-heatmap[b-bcxij4z0d9] {
    border-collapse: collapse;
    font-size: 12px;
    min-width: 600px;
}

.retention-heatmap th[b-bcxij4z0d9], .retention-heatmap td[b-bcxij4z0d9] {
    padding: 15px 15px;
    text-align: center;
    border: 1px solid #e9ecef;
}

.retention-heatmap th[b-bcxij4z0d9] {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sub-header td[b-bcxij4z0d9] {
    background: #f1f3f5;
    font-size: 10px;
    color: #666;
    font-weight: 500;
    padding: 6px 12px;
}

.cohort-header[b-bcxij4z0d9] {
    position: sticky;
    left: 0;
    background: #f8f9fa;
    z-index: 20;
}

.cohort-date[b-bcxij4z0d9] {
    position: sticky;
    left: 0;
    background: white;
    font-weight: 500;
    color: #1a1a2e;
    z-index: 5;
    font-family: monospace;
    font-size: 11px;
}

.total-users[b-bcxij4z0d9] {
    position: sticky;
    left: 110px;
    background: white;
    font-weight: 600;
    color: #4a90e2;
    z-index: 5;
}

.heatmap-cell[b-bcxij4z0d9] {
    transition: all 0.2s ease;
    cursor: pointer;
    font-weight: 500;
    font-size: 11px;
}

.heatmap-cell:hover[b-bcxij4z0d9] {
    transform: scale(1.02);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
    font-weight: 700;
}

/* Color Legend */
.color-legend[b-bcxij4z0d9] {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
    margin-top: 16px;
    font-size: 12px;
    color: #666;
    flex-wrap: wrap;
}

.legend-gradient[b-bcxij4z0d9] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.legend-item[b-bcxij4z0d9] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color[b-bcxij4z0d9] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    transition: transform 0.2s;
}

.legend-color:hover[b-bcxij4z0d9] {
    transform: scale(1.1);
}

/* Retention Curve */
.retention-curve-section[b-bcxij4z0d9] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-top: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.retention-curve-section h3[b-bcxij4z0d9] {
    margin: 0 0 20px 0;
    color: #1a1a2e;
    font-size: 18px;
    font-weight: 600;
}

.cohort-selector[b-bcxij4z0d9] {
    margin-bottom: 24px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.cohort-selector label[b-bcxij4z0d9] {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    color: #555;
    font-size: 13px;
}

.checkbox-group[b-bcxij4z0d9] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cohort-checkbox[b-bcxij4z0d9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
    background: white;
    border: 1px solid #dee2e6;
}

.cohort-checkbox:hover[b-bcxij4z0d9] {
    background: #e9ecef;
    transform: translateY(-1px);
}

.user-count[b-bcxij4z0d9] {
    font-size: 11px;
    color: #666;
    margin-left: 4px;
}

.curve-visualization[b-bcxij4z0d9] {
    margin: 20px 0;
    overflow-x: auto;
}

.retention-curve-svg[b-bcxij4z0d9] {
    display: block;
    margin: 0 auto;
}

.curve-legend[b-bcxij4z0d9] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.curve-legend-item[b-bcxij4z0d9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.curve-legend-color[b-bcxij4z0d9] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: transform 0.2s;
}

.legend-stats[b-bcxij4z0d9] {
    font-size: 11px;
    color: #888;
    margin-left: 5px;
}

/* KPI Grid for Engagement */
.kpi-grid[b-bcxij4z0d9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.kpi-card[b-bcxij4z0d9] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

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

.kpi-icon[b-bcxij4z0d9] {
    font-size: 40px;
}

.kpi-content[b-bcxij4z0d9] {
    flex: 1;
}

.kpi-label[b-bcxij4z0d9] {
    display: block;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.kpi-value[b-bcxij4z0d9] {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #1a1a2e;
}

.kpi-trend[b-bcxij4z0d9] {
    display: inline-block;
    font-size: 12px;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 12px;
}

.kpi-trend.positive[b-bcxij4z0d9] {
    background: #d4edda;
    color: #155724;
}

.kpi-trend.negative[b-bcxij4z0d9] {
    background: #f8d7da;
    color: #721c24;
}

.kpi-sub[b-bcxij4z0d9] {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

.kpi-value.excellent[b-bcxij4z0d9] { color: #196127; }
.kpi-value.good[b-bcxij4z0d9] { color: #239a3b; }
.kpi-value.fair[b-bcxij4z0d9] { color: #e6a017; }
.kpi-value.poor[b-bcxij4z0d9] { color: #d63031; }

/* DAU Trend Section */
.trend-section[b-bcxij4z0d9] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.trend-section h3[b-bcxij4z0d9] {
    margin: 0 0 20px 0;
    color: #1a1a2e;
    font-size: 18px;
}

.section-subtitle[b-bcxij4z0d9] {
    color: #666;
    font-size: 13px;
    margin: -15px 0 20px 0;
}

.dau-chart-container[b-bcxij4z0d9] {
    margin: 20px 0;
    overflow-x: auto;
}

.dau-trend-svg[b-bcxij4z0d9] {
    display: block;
    margin: 0 auto;
}

.dau-stats-grid[b-bcxij4z0d9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.dau-stat-card[b-bcxij4z0d9] {
    text-align: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: transform 0.2s;
}

.dau-stat-card:hover[b-bcxij4z0d9] {
    transform: translateY(-2px);
}

.dau-stat-label[b-bcxij4z0d9] {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.dau-stat-value[b-bcxij4z0d9] {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
}

.dau-stat-date[b-bcxij4z0d9] {
    font-size: 10px;
    color: #999;
    margin-top: 4px;
}

.trend-insights[b-bcxij4z0d9] {
    display: flex;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.trend-insight[b-bcxij4z0d9] {
    flex: 1;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trend-insight.positive[b-bcxij4z0d9] {
    background: #d4edda;
    color: #155724;
}

.trend-insight.negative[b-bcxij4z0d9] {
    background: #f8d7da;
    color: #721c24;
}

.trend-icon[b-bcxij4z0d9] {
    font-size: 20px;
}

.trend-text[b-bcxij4z0d9] {
    font-size: 13px;
    font-weight: 500;
}

/* Stickiness Section */
.sticky-section[b-bcxij4z0d9] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sticky-section h3[b-bcxij4z0d9] {
    margin: 0 0 20px 0;
    color: #1a1a2e;
    font-size: 18px;
}

.sticky-heatmap-wrapper[b-bcxij4z0d9] {
    overflow-x: auto;
}

.sticky-heatmap[b-bcxij4z0d9] {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
    min-width: 600px;
}

.sticky-heatmap th[b-bcxij4z0d9], .sticky-heatmap td[b-bcxij4z0d9] {
    padding: 10px 8px;
    text-align: center;
    border: 1px solid #e9ecef;
}

.sticky-heatmap th[b-bcxij4z0d9] {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.week-date[b-bcxij4z0d9] {
    font-weight: 500;
    background: #f8f9fa;
    position: sticky;
    left: 0;
}

.week-avg[b-bcxij4z0d9] {
    font-weight: 700;
    background: #f8f9fa;
}

.sticky-cell[b-bcxij4z0d9] {
    cursor: pointer;
    transition: transform 0.2s;
    font-weight: 500;
}

.sticky-cell:hover[b-bcxij4z0d9] {
    transform: scale(1.05);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);
}

.sticky-legend[b-bcxij4z0d9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 15px;
    font-size: 12px;
}

.sticky-legend-gradient[b-bcxij4z0d9] {
    display: flex;
    gap: 2px;
}

.sticky-legend-item[b-bcxij4z0d9] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

/* Loyalty Section */
.loyalty-section[b-bcxij4z0d9] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.loyalty-section h3[b-bcxij4z0d9] {
    margin: 0 0 20px 0;
    color: #1a1a2e;
    font-size: 18px;
}

.loyalty-bars[b-bcxij4z0d9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.loyalty-bar-item[b-bcxij4z0d9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.loyalty-label[b-bcxij4z0d9] {
    width: 140px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.loyalty-bar-container[b-bcxij4z0d9] {
    flex: 1;
    height: 32px;
    background: #e9ecef;
    border-radius: 16px;
    overflow: hidden;
}

.loyalty-bar[b-bcxij4z0d9] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    border-radius: 16px;
    transition: width 0.5s ease;
}

.loyalty-percent[b-bcxij4z0d9] {
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.loyalty-count[b-bcxij4z0d9] {
    width: 80px;
    font-size: 12px;
    color: #666;
    text-align: right;
}

.loyalty-note[b-bcxij4z0d9] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
    text-align: center;
    color: #999;
}

/* Insight Box */
.insight-box[b-bcxij4z0d9] {
    background: #e8f4f8;
    border-left: 4px solid #4a90e2;
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 8px;
    font-size: 14px;
}

.insight-box ul[b-bcxij4z0d9] {
    margin: 10px 0 0 20px;
    color: #555;
}

.insight-box li[b-bcxij4z0d9] {
    margin: 5px 0;
}

/* Empty State */
.empty-state[b-bcxij4z0d9] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    color: #999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.empty-icon[b-bcxij4z0d9] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.info-message[b-bcxij4z0d9] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin: 20px 0;
}

/* Modal Styles */
.modal-overlay[b-bcxij4z0d9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-bcxij4z0d9 0.3s ease;
}

.modal-content[b-bcxij4z0d9] {
    background: white;
    border-radius: 12px;
    padding: 0;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-bcxij4z0d9 0.3s ease;
}

@keyframes fadeIn-b-bcxij4z0d9 {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.modal-header[b-bcxij4z0d9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ecf0f1;
}

.modal-header h3[b-bcxij4z0d9] {
    margin: 0;
    color: #2c3e50;
    font-size: 20px;
}

.modal-close[b-bcxij4z0d9] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #7f8c8d;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.modal-close:hover[b-bcxij4z0d9] {
    background: #ecf0f1;
    color: #2c3e50;
}

.modal-body[b-bcxij4z0d9] {
    padding: 20px;
}

.warning-text[b-bcxij4z0d9] {
    color: #e74c3c !important;
    font-weight: 600;
    background: rgba(231, 76, 60, 0.1);
    padding: 10px;
    border-radius: 6px;
    border-left: 4px solid #e74c3c;
    margin: 15px 0;
}

.info-text[b-bcxij4z0d9] {
    color: #7f8c8d;
    margin: 10px 0 0 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #3498db;
}

.modal-footer[b-bcxij4z0d9] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid #ecf0f1;
}

.modal-btn[b-bcxij4z0d9] {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cancel-btn[b-bcxij4z0d9] {
    background: #ecf0f1;
    color: #7f8c8d;
}

.cancel-btn:hover[b-bcxij4z0d9] {
    background: #bdc3c7;
    color: white;
}

.confirm-btn[b-bcxij4z0d9] {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.confirm-btn:hover:not(:disabled)[b-bcxij4z0d9] {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-1px);
}

.confirm-btn:disabled[b-bcxij4z0d9] {
    background: #bdc3c7 !important;
    cursor: not-allowed;
    transform: none;
}

.date-picker-container[b-bcxij4z0d9] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.date-picker-container label[b-bcxij4z0d9] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.modal-date-input[b-bcxij4z0d9] {
    padding: 12px;
    border: 2px solid #bdc3c7;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.modal-date-input:focus[b-bcxij4z0d9] {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .analytics-container[b-bcxij4z0d9] {
        padding: 16px;
    }

    .kpi-grid[b-bcxij4z0d9] {
        grid-template-columns: 1fr;
    }

    .dau-stats-grid[b-bcxij4z0d9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .loyalty-bar-item[b-bcxij4z0d9] {
        flex-direction: column;
        align-items: stretch;
    }

    .loyalty-label[b-bcxij4z0d9], .loyalty-count[b-bcxij4z0d9] {
        width: auto;
        text-align: left;
    }

    .loyalty-bar-container[b-bcxij4z0d9] {
        width: 100%;
    }

    .filter-bar[b-bcxij4z0d9] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary[b-bcxij4z0d9], .btn-secondary[b-bcxij4z0d9] {
        justify-content: center;
    }

    .tab-btn[b-bcxij4z0d9] {
        flex: 1;
        text-align: center;
    }

    .delete-section[b-bcxij4z0d9] {
        margin-left: 0;
        width: 100%;
    }

    .delete-btn[b-bcxij4z0d9] {
        width: 100%;
    }

    .modal-content[b-bcxij4z0d9] {
        width: 95%;
        margin: 10px;
    }

    .modal-footer[b-bcxij4z0d9] {
        flex-direction: column;
    }

    .modal-btn[b-bcxij4z0d9] {
        width: 100%;
    }

    .trend-insights[b-bcxij4z0d9] {
        flex-direction: column;
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .analytics-container[b-bcxij4z0d9] {
        background: #1a1a2e;
    }

    .tabs-header[b-bcxij4z0d9], .filter-bar[b-bcxij4z0d9], .stat-card[b-bcxij4z0d9], .heatmap-wrapper[b-bcxij4z0d9], .retention-curve-section[b-bcxij4z0d9],
    .kpi-card[b-bcxij4z0d9], .trend-section[b-bcxij4z0d9], .sticky-section[b-bcxij4z0d9], .loyalty-section[b-bcxij4z0d9], .empty-state[b-bcxij4z0d9],
    .modal-content[b-bcxij4z0d9] {
        background: #16213e;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .tab-btn[b-bcxij4z0d9] {
        color: #aaa;
    }

    .tab-btn:hover[b-bcxij4z0d9] {
        background: #1a1a2e;
    }

    .header-section h2[b-bcxij4z0d9], .stat-value[b-bcxij4z0d9], .kpi-value[b-bcxij4z0d9], .retention-curve-section h3[b-bcxij4z0d9],
    .trend-section h3[b-bcxij4z0d9], .sticky-section h3[b-bcxij4z0d9], .loyalty-section h3[b-bcxij4z0d9],
    .dau-stat-value[b-bcxij4z0d9] {
        color: #e0e0e0;
    }

    .subtitle[b-bcxij4z0d9], .stat-label[b-bcxij4z0d9], .kpi-label[b-bcxij4z0d9], .section-subtitle[b-bcxij4z0d9],
    .loyalty-label[b-bcxij4z0d9], .loyalty-count[b-bcxij4z0d9], .cohort-selector label[b-bcxij4z0d9],
    .dau-stat-label[b-bcxij4z0d9] {
        color: #aaa;
    }

    .filter-group input[b-bcxij4z0d9] {
        background: #0f3460;
        border-color: #1a1a2e;
        color: #e0e0e0;
    }

    .retention-heatmap th[b-bcxij4z0d9], .sticky-heatmap th[b-bcxij4z0d9] {
        background: #0f3460;
        color: #e0e0e0;
    }

    .cohort-date[b-bcxij4z0d9], .week-date[b-bcxij4z0d9] {
        background: #16213e;
        color: #e0e0e0;
    }

    .total-users[b-bcxij4z0d9] {
        background: linear-gradient(90deg, #16213e 90%, #1a1a2e 100%);
    }

    .cohort-selector[b-bcxij4z0d9], .cohort-checkbox[b-bcxij4z0d9] {
        background: #0f3460;
        border-color: #1a1a2e;
    }

    .heatmap-cell[b-bcxij4z0d9], .sticky-cell[b-bcxij4z0d9] {
        border-color: #1a1a2e;
    }

    .dau-stat-card[b-bcxij4z0d9], .trend-insight[b-bcxij4z0d9] {
        background: #0f3460;
    }

    .trend-insight.positive[b-bcxij4z0d9] {
        background: #1a3a2a;
        color: #90ee90;
    }

    .trend-insight.negative[b-bcxij4z0d9] {
        background: #3a1a1a;
        color: #ff9999;
    }

    .insight-box[b-bcxij4z0d9] {
        background: #1a2a3a;
        border-left-color: #4a90e2;
        color: #e0e0e0;
    }

    .insight-box ul[b-bcxij4z0d9] {
        color: #ccc;
    }

    .info-message[b-bcxij4z0d9] {
        background: #2c2c1a;
        border-color: #ffc107;
        color: #ffd966;
    }

    .retention-curve-svg[b-bcxij4z0d9], .dau-trend-svg[b-bcxij4z0d9] {
        background: #16213e;
    }

    .retention-curve-svg text[b-bcxij4z0d9], .dau-trend-svg text[b-bcxij4z0d9] {
        fill: #ccc;
    }

    .retention-curve-svg line[b-bcxij4z0d9], .dau-trend-svg line[b-bcxij4z0d9] {
        stroke: #2a2a4e;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */

/* Settings Container */
.settings-container[b-gljx7w301s] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-gljx7w301s] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-gljx7w301s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-gljx7w301s] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-gljx7w301s] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-gljx7w301s] {
    color: #a0a0b0;
    font-size: 14px;
}

/* Settings Grid */
.settings-grid[b-gljx7w301s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 24px;
}

/* Settings Card - All cards now have the same size */
.settings-card[b-gljx7w301s] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 200px;
}

.settings-card:hover[b-gljx7w301s] {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Card Header */
.card-header[b-gljx7w301s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.card-icon[b-gljx7w301s] {
    font-size: 24px;
}

.card-header h3[b-gljx7w301s] {
    margin: 0;
    color: #ffd700;
    font-size: 18px;
    font-weight: 600;
}

/* Card Body */
.card-body[b-gljx7w301s] {
    padding: 24px;
    flex: 1;
}

/* Scrollable content for abilities */
.abilities-scroll[b-gljx7w301s] {
    overflow-y: auto;
    padding-right: 4px;
}

.abilities-scroll[b-gljx7w301s]::-webkit-scrollbar {
    width: 6px;
}

.abilities-scroll[b-gljx7w301s]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.abilities-scroll[b-gljx7w301s]::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 3px;
}

.abilities-scroll[b-gljx7w301s]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}

/* Deck Editor Styles */
.deck-editor[b-gljx7w301s] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    overflow: hidden;
}

.deck-header[b-gljx7w301s] {
    display: grid;
    grid-template-columns: 2fr 1.5fr 0.8fr;
    background: rgba(0, 0, 0, 0.4);
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    font-weight: 600;
    color: #ffd700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deck-header-cell[b-gljx7w301s] {
    padding: 0 8px;
}

.deck-items[b-gljx7w301s] {
    overflow-y: auto;
}

.deck-item[b-gljx7w301s] {
    display: grid;
    grid-template-columns: 2fr 1.5fr 0.8fr;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.deck-item:hover[b-gljx7w301s] {
    background: rgba(255, 215, 0, 0.05);
}

.deck-item.has-error[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.1);
    border-left: 3px solid #ff6b6b;
}

.deck-item-cell[b-gljx7w301s] {
    padding: 0 8px;
}

.card-type-cell[b-gljx7w301s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-type-icon[b-gljx7w301s] {
    font-size: 24px;
    min-width: 32px;
    text-align: center;
}

.deck-select[b-gljx7w301s] {
    flex: 1;
    padding: 20px 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.deck-select:hover[b-gljx7w301s] {
    border-color: rgba(255, 215, 0, 0.5);
}

.deck-select:focus[b-gljx7w301s] {
    outline: none;
    border-color: #ffd700;
}

.deck-select.error[b-gljx7w301s] {
    border-color: #ff6b6b;
}

.count-control[b-gljx7w301s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count-btn[b-gljx7w301s] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.count-btn:hover:not(:disabled)[b-gljx7w301s] {
    background: rgba(255, 215, 0, 0.3);
    transform: scale(1.05);
}

.count-btn:disabled[b-gljx7w301s] {
    opacity: 0.4;
    cursor: not-allowed;
}

.deck-count-input[b-gljx7w301s] {
    width: 70px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    text-align: center;
}

.deck-count-input:focus[b-gljx7w301s] {
    outline: none;
    border-color: #ffd700;
}

.deck-count-input.error[b-gljx7w301s] {
    border-color: #ff6b6b;
}

.deck-error[b-gljx7w301s] {
    display: block;
    color: #ff6b6b;
    font-size: 11px;
    margin-top: 4px;
}

.remove-deck-item[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.remove-deck-item:hover[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.35);
    transform: scale(1.05);
}

.deck-footer[b-gljx7w301s] {
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 215, 0, 0.1);
}

.deck-stats[b-gljx7w301s] {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-item[b-gljx7w301s] {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.stat-label[b-gljx7w301s] {
    color: #a0a0b0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-gljx7w301s] {
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
}

.deck-actions[b-gljx7w301s] {
    display: flex;
    justify-content: center;
}

.add-deck-item[b-gljx7w301s] {
    padding: 10px 24px;
    background: rgba(40, 167, 69, 0.15);
    border: 1px dashed rgba(40, 167, 69, 0.3);
    border-radius: 40px;
    color: #28a745;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-deck-item:hover:not(:disabled)[b-gljx7w301s] {
    background: rgba(40, 167, 69, 0.3);
    transform: translateY(-1px);
}

.add-deck-item:disabled[b-gljx7w301s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.deck-total-badge[b-gljx7w301s] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    color: #ffd700;
    margin-left: auto;
}

/* Form Fields */
.form-field[b-gljx7w301s] {
    margin-bottom: 18px;
}

.form-field label[b-gljx7w301s] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modern Input */
.modern-input[b-gljx7w301s] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-gljx7w301s] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

/* Modern Select */
.modern-select[b-gljx7w301s] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.modern-select option[b-gljx7w301s] {
    background: #1a1a2e;
    color: white;
}

.modern-select:focus[b-gljx7w301s] {
    outline: none;
    border-color: #ffd700;
}

.modern-select.error[b-gljx7w301s] {
    border-color: #ff6b6b;
}

/* Checkbox Field */
.checkbox-field[b-gljx7w301s] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: #a0a0b0;
}

/* Toggle Switch */
.toggle-switch[b-gljx7w301s] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input[b-gljx7w301s] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-gljx7w301s] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.4);
    transition: 0.3s;
    border-radius: 34px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.toggle-slider[b-gljx7w301s]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-gljx7w301s] {
    background-color: rgba(40, 167, 69, 0.3);
}

input:checked + .toggle-slider[b-gljx7w301s]:before {
    transform: translateX(24px);
    background-color: #28a745;
}

/* Ability Card */
.ability-card[b-gljx7w301s] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}

.ability-header[b-gljx7w301s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.ability-title[b-gljx7w301s] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffd700;
    font-weight: 600;
}

.ability-icon[b-gljx7w301s] {
    font-size: 16px;
}

.remove-ability-btn[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.remove-ability-btn:hover[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.35);
    transform: scale(1.05);
}

.ability-body[b-gljx7w301s] {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ability-field label[b-gljx7w301s] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
}

/* Costs List */
.costs-list[b-gljx7w301s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cost-row[b-gljx7w301s] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cost-row .modern-input[b-gljx7w301s] {
    flex: 1;
}

.remove-cost-btn[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.remove-cost-btn:hover:not(:disabled)[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.35);
}

.remove-cost-btn:disabled[b-gljx7w301s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-cost-btn[b-gljx7w301s] {
    background: rgba(40, 167, 69, 0.15);
    border: 1px dashed rgba(40, 167, 69, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    color: #28a745;
    cursor: pointer;
    font-size: 12px;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.add-cost-btn:hover[b-gljx7w301s] {
    background: rgba(40, 167, 69, 0.3);
}

/* Add Ability Button */
.add-ability-btn[b-gljx7w301s] {
    width: 100%;
    padding: 12px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px dashed rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    color: #ffd700;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.add-ability-btn:hover[b-gljx7w301s] {
    background: rgba(255, 215, 0, 0.2);
}

/* Items List */
.items-list[b-gljx7w301s] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-row[b-gljx7w301s] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.item-row .modern-input[b-gljx7w301s] {
    flex: 1;
}

.remove-item-btn[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.remove-item-btn:hover[b-gljx7w301s] {
    background: rgba(220, 53, 69, 0.35);
    transform: scale(1.05);
}

.add-item-btn[b-gljx7w301s] {
    background: rgba(255, 215, 0, 0.1);
    border: 1px dashed rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 10px;
    color: #ffd700;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.add-item-btn:hover[b-gljx7w301s] {
    background: rgba(255, 215, 0, 0.2);
}

/* Form Actions */
.form-actions[b-gljx7w301s] {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
}

.btn-save[b-gljx7w301s] {
    padding: 14px 32px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-save:hover[b-gljx7w301s] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Error Text */
.error-text[b-gljx7w301s] {
    color: #ff6b6b;
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

/* Toast Notification */
.toast-notification[b-gljx7w301s] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-gljx7w301s 0.3s ease;
    z-index: 10001;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.success[b-gljx7w301s] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border-left: 4px solid #ffd700;
}

.toast-notification.error[b-gljx7w301s] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border-left: 4px solid #ffd700;
}

.toast-notification span:first-child[b-gljx7w301s] {
    font-size: 18px;
}

.toast-notification span:nth-child(2)[b-gljx7w301s] {
    flex: 1;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.toast-close[b-gljx7w301s] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-close:hover[b-gljx7w301s] {
    opacity: 1;
}

/* Modal */
.modal-overlay[b-gljx7w301s] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-gljx7w301s] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 380px;
    max-width: 90%;
    animation: slideIn-b-gljx7w301s 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.confirm-modal[b-gljx7w301s] {
    width: 380px;
}

.modal-header[b-gljx7w301s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-gljx7w301s] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-gljx7w301s] {
    font-size: 22px;
}

.modal-header h3[b-gljx7w301s] {
    flex: 1;
    margin: 0;
    color: white;
    font-size: 17px;
}

.modal-close[b-gljx7w301s] {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
}

.modal-body[b-gljx7w301s] {
    padding: 22px;
    text-align: center;
}

.modal-body p[b-gljx7w301s] {
    margin: 0 0 8px 0;
    color: #ddd;
    font-size: 14px;
}

.warning-text[b-gljx7w301s] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
}

.modal-footer[b-gljx7w301s] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-gljx7w301s] {
    padding: 8px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
    font-weight: 500;
}

.btn-danger[b-gljx7w301s] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-weight: 500;
}

/* Loading State */
.loading-state[b-gljx7w301s] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.dot-pulse[b-gljx7w301s] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dot-pulse .dot[b-gljx7w301s] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-gljx7w301s 1.5s ease-in-out infinite;
}

.dot-pulse .dot:nth-child(2)[b-gljx7w301s] { animation-delay: 0.2s; }
.dot-pulse .dot:nth-child(3)[b-gljx7w301s] { animation-delay: 0.4s; }

.loading-state p[b-gljx7w301s] {
    color: #a0a0b0;
}

/* Loading Animation */
.dot-pulse-loader[b-gljx7w301s] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-gljx7w301s] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-gljx7w301s 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-gljx7w301s] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-gljx7w301s] { animation-delay: 0.4s; }

@keyframes pulse-b-gljx7w301s {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

@keyframes slideInRight-b-gljx7w301s {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 1000px) {
    .settings-grid[b-gljx7w301s] {
        grid-template-columns: 1fr;
    }

    .ability-body[b-gljx7w301s] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .settings-container[b-gljx7w301s] {
        padding: 16px;
    }

    .main-heading[b-gljx7w301s] {
        font-size: 24px;
    }

    .card-header[b-gljx7w301s] {
        padding: 14px 20px;
    }

    .card-body[b-gljx7w301s] {
        padding: 20px;
    }

    .ability-body[b-gljx7w301s] {
        padding: 16px;
    }

    .form-actions[b-gljx7w301s] {
        justify-content: stretch;
    }

    .btn-save[b-gljx7w301s] {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .toast-notification[b-gljx7w301s] {
        top: 16px;
        right: 16px;
        left: 16px;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .badge[b-gljx7w301s] {
        font-size: 10px;
    }

    .deck-header[b-gljx7w301s] {
        font-size: 10px;
    }

    .deck-item[b-gljx7w301s] {
        grid-template-columns: 1.5fr 1.2fr 0.5fr;
        padding: 12px;
    }
}
/* /Components/Pages/Stickers.razor.rz.scp.css */
/* Dark Gaming Style for Stickers */
.stickers-container[b-4k63qjr2t5] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    padding: 24px;
    font-family: 'Courier New', 'Segoe UI', 'Monaco', monospace;
}

/* Header Section - Gothic Style */
.header-section[b-4k63qjr2t5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 20px 28px;
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.main-heading[b-4k63qjr2t5] {
    font-size: 28px;
    font-weight: bold;
    color: #a29bfe;
    text-shadow: 0 0 10px rgba(108, 92, 231, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 2px;
}

.heading-icon[b-4k63qjr2t5] {
    font-size: 32px;
    filter: drop-shadow(0 0 5px #a29bfe);
}

.badge[b-4k63qjr2t5] {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #1a1a2e;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.5);
}

/* Gaming Buttons */
.btn-sticker[b-4k63qjr2t5] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: monospace;
    letter-spacing: 1px;
}

.btn-add[b-4k63qjr2t5] {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #1a1a2e;
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.4);
}

.btn-add:hover[b-4k63qjr2t5] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(108, 92, 231, 0.6);
}

.btn-primary[b-4k63qjr2t5] {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #1a1a2e;
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
}

.btn-primary:hover[b-4k63qjr2t5] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(108, 92, 231, 0.5);
}

.btn-secondary[b-4k63qjr2t5] {
    background: #2a2a3e;
    color: #aaa;
    border: 1px solid #444;
}

.btn-secondary:hover[b-4k63qjr2t5] {
    background: #3a3a4e;
    color: #fff;
}

.btn-danger[b-4k63qjr2t5] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    color: white;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
}

.btn-danger:hover[b-4k63qjr2t5] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(220, 53, 69, 0.5);
}

.btn-retry[b-4k63qjr2t5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.btn-retry:hover[b-4k63qjr2t5] {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
}

/* Stickers Grid - Card Layout */
.stickers-grid[b-4k63qjr2t5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

/* Sticker Card - RPG Style */
.sticker-card[b-4k63qjr2t5] {
    background: rgba(15, 12, 41, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(108, 92, 231, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.sticker-card:hover[b-4k63qjr2t5] {
    transform: translateY(-5px);
    border-color: rgba(108, 92, 231, 0.5);
    box-shadow: 0 8px 30px rgba(108, 92, 231, 0.2);
}

.editing-mode[b-4k63qjr2t5] {
    border: 2px solid #a29bfe;
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.4);
}

/* Card Header */
.card-header[b-4k63qjr2t5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(108, 92, 231, 0.2);
    color: white;
}

.sticker-id[b-4k63qjr2t5] {
    font-size: 18px;
    font-weight: bold;
}

.clickable-id[b-4k63qjr2t5] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(108, 92, 231, 0.2);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.clickable-id:hover[b-4k63qjr2t5] {
    background: rgba(108, 92, 231, 0.4);
    transform: translateX(3px);
}

.id-number[b-4k63qjr2t5] {
    color: #a29bfe;
    font-size: 18px;
}

.view-icon[b-4k63qjr2t5] {
    font-size: 14px;
    opacity: 0.7;
}

.id-label[b-4k63qjr2t5] {
    color: #a29bfe;
}

/* Status Pill */
.status-pill[b-4k63qjr2t5] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.status-pill.active[b-4k63qjr2t5] {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid #28a745;
    text-shadow: 0 0 5px #28a745;
}

.status-pill.inactive[b-4k63qjr2t5] {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid #6c757d;
}

/* Card Body - Stats */
.card-body[b-4k63qjr2t5] {
    padding: 20px;
}

.stat-row[b-4k63qjr2t5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-row:last-child[b-4k63qjr2t5] {
    border-bottom: none;
}

.stat-icon[b-4k63qjr2t5] {
    font-size: 20px;
    width: 32px;
}

.stat-label[b-4k63qjr2t5] {
    flex: 1;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value[b-4k63qjr2t5] {
    font-size: 18px;
    font-weight: bold;
    font-family: monospace;
}

.priority-value[b-4k63qjr2t5] {
    color: #a29bfe;
}

.gem-value[b-4k63qjr2t5] {
    color: #fd79a8;
}

.coin-value[b-4k63qjr2t5] {
    color: #fdcb6e;
}

.level-value[b-4k63qjr2t5] {
    color: #00ff88;
}

/* Tier Colors - Dark Mode */
.tier-value[b-4k63qjr2t5] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.tier-0[b-4k63qjr2t5] { color: #a0a0a0; background: rgba(160, 160, 160, 0.2); }
.tier-1[b-4k63qjr2t5] { color: #4a9eff; background: rgba(74, 158, 255, 0.2); }
.tier-2[b-4k63qjr2t5] { color: #28a745; background: rgba(40, 167, 69, 0.2); }
.tier-3[b-4k63qjr2t5] { color: #ffc107; background: rgba(255, 193, 7, 0.2); }
.tier-4[b-4k63qjr2t5] { color: #ff6b6b; background: rgba(255, 107, 107, 0.2); }

/* Gender Colors - Dark Mode */
.gender-value[b-4k63qjr2t5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gender-value.male[b-4k63qjr2t5] { color: #4a9eff; }
.gender-value.female[b-4k63qjr2t5] { color: #ff6384; }
.gender-value.unknown[b-4k63qjr2t5] { color: #a0a0a0; }

/* Gaming Inputs */
.sticker-input[b-4k63qjr2t5] {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #a29bfe;
    color: #a29bfe;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 100px;
    text-align: center;
    font-family: monospace;
}

.sticker-input:focus[b-4k63qjr2t5] {
    outline: none;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
}

.sticker-input[b-4k63qjr2t5]::placeholder {
    color: rgba(162, 155, 254, 0.3);
}

/* Gaming Select Dropdown */
.sticker-select[b-4k63qjr2t5] {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #a29bfe;
    color: #a29bfe;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    width: 130px;
    text-align: center;
    cursor: pointer;
    font-family: monospace;
}

.sticker-select option[b-4k63qjr2t5] {
    background: #1a1a2e;
    color: #a29bfe;
}

.sticker-select:focus[b-4k63qjr2t5] {
    outline: none;
    box-shadow: 0 0 10px rgba(108, 92, 231, 0.4);
}

/* Toggle Switch Gaming */
.toggle-sticker[b-4k63qjr2t5] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-sticker input[b-4k63qjr2t5] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider-sticker[b-4k63qjr2t5] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3a3a4e;
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider-sticker[b-4k63qjr2t5]:before {
    position: absolute;
    content: "✗";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #ff4444;
    transition: 0.3s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
}

input:checked + .toggle-slider-sticker[b-4k63qjr2t5] {
    background-color: #6c5ce7;
}

input:checked + .toggle-slider-sticker[b-4k63qjr2t5]:before {
    content: "✓";
    transform: translateX(26px);
    background-color: #a29bfe;
}

/* Card Footer */
.card-footer[b-4k63qjr2t5] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(108, 92, 231, 0.2);
}

.action-btn[b-4k63qjr2t5] {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.edit-btn[b-4k63qjr2t5] {
    background: rgba(108, 92, 231, 0.2);
    color: #a29bfe;
    border: 1px solid #a29bfe;
}

.edit-btn:hover[b-4k63qjr2t5] {
    background: #6c5ce7;
    color: white;
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
}

.delete-btn[b-4k63qjr2t5] {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid #dc3545;
}

.delete-btn:hover[b-4k63qjr2t5] {
    background: #dc3545;
    color: white;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
}

.save-btn[b-4k63qjr2t5] {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid #28a745;
}

.save-btn:hover[b-4k63qjr2t5] {
    background: #28a745;
    color: white;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.3);
}

.cancel-btn[b-4k63qjr2t5] {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid #6c757d;
}

.cancel-btn:hover[b-4k63qjr2t5] {
    background: #6c757d;
    color: white;
}

/* Empty Vault */
.empty-vault[b-4k63qjr2t5] {
    text-align: center;
    padding: 60px;
    background: rgba(15, 12, 41, 0.8);
    border-radius: 24px;
    border: 1px solid rgba(108, 92, 231, 0.3);
}

.empty-icon[b-4k63qjr2t5] {
    font-size: 80px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(108, 92, 231, 0.3));
}

.empty-vault h3[b-4k63qjr2t5] {
    color: #a29bfe;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
}

.empty-vault p[b-4k63qjr2t5] {
    color: #888;
    margin-bottom: 20px;
}

/* Modal Gaming Style */
.modal-sticker[b-4k63qjr2t5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
}

.modal-content-sticker[b-4k63qjr2t5] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid #a29bfe;
    border-radius: 20px;
    width: 500px;
    max-width: 90%;
    animation: slideUp-b-4k63qjr2t5 0.3s ease;
    box-shadow: 0 0 50px rgba(108, 92, 231, 0.3);
}

.modal-header-sticker[b-4k63qjr2t5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(108, 92, 231, 0.3);
}

.modal-header-sticker.warning[b-4k63qjr2t5] {
    border-bottom-color: #dc3545;
}

.modal-icon[b-4k63qjr2t5] {
    font-size: 24px;
}

.modal-header-sticker h3[b-4k63qjr2t5] {
    flex: 1;
    margin: 0;
    color: #a29bfe;
}

.modal-close[b-4k63qjr2t5] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-4k63qjr2t5] {
    color: #fff;
    transform: rotate(90deg);
}

.modal-body-sticker[b-4k63qjr2t5] {
    padding: 24px;
}

.input-group-sticker[b-4k63qjr2t5] {
    margin-bottom: 16px;
}

.input-group-sticker label[b-4k63qjr2t5] {
    display: block;
    margin-bottom: 8px;
    color: #aaa;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.label-icon[b-4k63qjr2t5] {
    margin-right: 6px;
}

.row-sticker[b-4k63qjr2t5] {
    display: flex;
    gap: 16px;
}

.row-sticker .half[b-4k63qjr2t5] {
    flex: 1;
}

.checkbox-group-sticker[b-4k63qjr2t5] {
    margin: 16px 0;
}

.checkbox-sticker[b-4k63qjr2t5] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #a29bfe;
}

.checkbox-sticker input[type="checkbox"][b-4k63qjr2t5] {
    accent-color: #6c5ce7;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.error-sticker[b-4k63qjr2t5] {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    padding: 10px;
    border-radius: 8px;
    margin-top: 16px;
    text-align: center;
    color: #dc3545;
}

.modal-footer-sticker[b-4k63qjr2t5] {
    display: flex;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid rgba(108, 92, 231, 0.2);
    justify-content: flex-end;
}

.delete-warning-sticker[b-4k63qjr2t5] {
    text-align: center;
    padding: 20px;
}

.warning-icon[b-4k63qjr2t5] {
    font-size: 64px;
    margin-bottom: 16px;
}

.delete-warning-sticker p[b-4k63qjr2t5] {
    color: #fff;
    margin: 12px 0;
}

.delete-warning-sticker strong[b-4k63qjr2t5] {
    color: #a29bfe;
}

.delete-warning-sticker small[b-4k63qjr2t5] {
    color: #888;
}

/* Error Card */
.error-card[b-4k63qjr2t5] {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    color: #dc3545;
}

.error-icon[b-4k63qjr2t5] {
    font-size: 32px;
}

/* Loading Animation */
.dot-pulse-loader[b-4k63qjr2t5] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 12px;
}

.dot[b-4k63qjr2t5] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse-b-4k63qjr2t5 1.2s ease-in-out infinite;
}

.dot:nth-child(1)[b-4k63qjr2t5] {
    background: #6c5ce7;
    animation-delay: 0s;
}

.dot:nth-child(2)[b-4k63qjr2t5] {
    background: #a29bfe;
    animation-delay: 0.2s;
}

.dot:nth-child(3)[b-4k63qjr2t5] {
    background: #fdcb6e;
    animation-delay: 0.4s;
}

@keyframes pulse-b-4k63qjr2t5 {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animations */
@keyframes slideUp-b-4k63qjr2t5 {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .stickers-container[b-4k63qjr2t5] {
        padding: 12px;
    }

    .header-section[b-4k63qjr2t5] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .main-heading[b-4k63qjr2t5] {
        font-size: 22px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stickers-grid[b-4k63qjr2t5] {
        grid-template-columns: 1fr;
    }

    .row-sticker[b-4k63qjr2t5] {
        flex-direction: column;
    }

    .stat-row[b-4k63qjr2t5] {
        flex-wrap: wrap;
    }

    .sticker-input[b-4k63qjr2t5],
    .sticker-select[b-4k63qjr2t5] {
        width: 100%;
    }

    .card-footer[b-4k63qjr2t5] {
        flex-direction: column;
    }
}
/* /Components/Pages/UploadImage.razor.rz.scp.css */
/* Upload Container */
.upload-container[b-65it9361jw] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-65it9361jw] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-65it9361jw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-65it9361jw] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-65it9361jw] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-65it9361jw] {
    color: #a0a0b0;
    font-size: 14px;
}

/* Upload Grid */
.upload-grid[b-65it9361jw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

/* Cards */
.upload-card[b-65it9361jw], .preview-card[b-65it9361jw], .gallery-card[b-65it9361jw] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
}

.card-header[b-65it9361jw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.card-icon[b-65it9361jw] {
    font-size: 24px;
}

.card-header h3[b-65it9361jw] {
    flex: 1;
    margin: 0;
    color: #ffd700;
    font-size: 18px;
}

.refresh-btn[b-65it9361jw] {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 40px;
    color: #ffd700;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-btn:hover[b-65it9361jw] {
    background: rgba(255, 215, 0, 0.15);
}

.card-body[b-65it9361jw] {
    padding: 24px;
}

/* Drop Zone */
.drop-zone[b-65it9361jw] {
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.drop-zone.drag-active[b-65it9361jw] {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
}

.drop-icon[b-65it9361jw] {
    font-size: 48px;
    margin-bottom: 16px;
}

.drop-title[b-65it9361jw] {
    color: #ffd700;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.drop-subtitle[b-65it9361jw] {
    color: #a0a0b0;
    font-size: 13px;
    margin-bottom: 16px;
}

.drop-or[b-65it9361jw] {
    color: #a0a0b0;
    font-size: 12px;
    margin: 16px 0;
}

.browse-btn[b-65it9361jw] {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.browse-btn:hover[b-65it9361jw] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.file-input-hidden[b-65it9361jw] {
    display: none;
}

.drop-requirements[b-65it9361jw] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
}

.req-item[b-65it9361jw] {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: #a0a0b0;
}

/* Selected File */
.selected-file[b-65it9361jw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    margin: 20px 0;
}

.file-preview[b-65it9361jw] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.file-preview img[b-65it9361jw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.file-placeholder[b-65it9361jw] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.file-info[b-65it9361jw] {
    flex: 1;
}

.file-name[b-65it9361jw] {
    color: white;
    font-weight: 600;
    margin-bottom: 4px;
    word-break: break-all;
}

.file-size[b-65it9361jw] {
    color: #a0a0b0;
    font-size: 12px;
}

.remove-file[b-65it9361jw] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    color: #ff6b6b;
    cursor: pointer;
    font-size: 12px;
}

.remove-file:hover[b-65it9361jw] {
    background: rgba(220, 53, 69, 0.3);
}

/* Upload Button */
.upload-btn[b-65it9361jw] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.upload-btn:hover:not(.disabled)[b-65it9361jw] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.upload-btn.disabled[b-65it9361jw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-badge[b-65it9361jw] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #10b981;
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
}

/* Upload Progress */
.upload-progress[b-65it9361jw] {
    margin-top: 20px;
}

.progress-bar[b-65it9361jw] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill[b-65it9361jw] {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    border-radius: 3px;
    animation: progressPulse-b-65it9361jw 1.5s ease-in-out infinite;
}

@keyframes progressPulse-b-65it9361jw {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.progress-text[b-65it9361jw] {
    text-align: center;
    color: #a0a0b0;
    font-size: 12px;
}

/* Status Message */
.status-message[b-65it9361jw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-top: 16px;
}

.status-message.success[b-65it9361jw] {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-message.error[b-65it9361jw] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.status-message.info[b-65it9361jw] {
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.status-icon[b-65it9361jw] {
    font-size: 18px;
}

.status-text[b-65it9361jw] {
    flex: 1;
    color: white;
    font-size: 13px;
}

.status-close[b-65it9361jw] {
    background: none;
    border: none;
    color: #a0a0b0;
    cursor: pointer;
    font-size: 16px;
}

/* Preview Area */
.preview-area[b-65it9361jw] {
    border-radius: 16px;
    overflow: hidden;
}

.preview-area img[b-65it9361jw] {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.3);
}

.preview-info[b-65it9361jw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
}

.preview-name[b-65it9361jw] {
    color: #a0a0b0;
    font-size: 12px;
}

.clear-preview[b-65it9361jw] {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 8px;
    padding: 4px 12px;
    color: #a0a0b0;
    cursor: pointer;
}

.empty-preview[b-65it9361jw] {
    text-align: center;
    padding: 40px;
}

.empty-preview .empty-icon[b-65it9361jw] {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 12px;
}

.empty-preview p[b-65it9361jw] {
    color: #a0a0b0;
    margin-bottom: 4px;
}

.empty-preview small[b-65it9361jw] {
    color: #666;
}

/* Gallery */
.image-grid[b-65it9361jw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.image-card[b-65it9361jw] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-card:hover[b-65it9361jw] {
    transform: scale(1.02);
}

.image-card img[b-65it9361jw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-overlay[b-65it9361jw] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.image-card:hover .image-overlay[b-65it9361jw] {
    opacity: 1;
}

.image-name[b-65it9361jw] {
    font-size: 10px;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-image[b-65it9361jw] {
    background: rgba(220, 53, 69, 0.8);
    border: none;
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 12px;
}

.gallery-footer[b-65it9361jw] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.total-count[b-65it9361jw] {
    color: #a0a0b0;
    font-size: 12px;
}

/* Gallery Loading & Empty */
.gallery-loading[b-65it9361jw], .empty-gallery[b-65it9361jw] {
    text-align: center;
    padding: 40px;
}

.dot-pulse.small[b-65it9361jw] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dot-pulse.small .dot[b-65it9361jw] {
    width: 8px;
    height: 8px;
}

.empty-gallery .empty-icon[b-65it9361jw] {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 12px;
}

.empty-gallery p[b-65it9361jw] {
    color: #a0a0b0;
}

/* Modal */
.modal-overlay[b-65it9361jw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-65it9361jw] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 380px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-header[b-65it9361jw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-65it9361jw] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-65it9361jw] {
    font-size: 24px;
}

.modal-header h3[b-65it9361jw] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-65it9361jw] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-65it9361jw] {
    color: aqua;
    padding: 24px;
    text-align: center;
}

.modal-body strong[b-65it9361jw] {
    color: #ffd700;
}

.warning-text[b-65it9361jw] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

.modal-footer[b-65it9361jw] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-65it9361jw] {
    padding: 8px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}

.btn-delete[b-65it9361jw] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

/* Loading Animation */
.dot-pulse-loader[b-65it9361jw] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-65it9361jw] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-65it9361jw 1.5s ease-in-out infinite;
}

@keyframes pulse-b-65it9361jw {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 900px) {
    .upload-grid[b-65it9361jw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .upload-container[b-65it9361jw] {
        padding: 16px;
    }

    .main-heading[b-65it9361jw] {
        font-size: 24px;
    }

    .drop-requirements[b-65it9361jw] {
        flex-direction: column;
        align-items: center;
    }

    .image-grid[b-65it9361jw] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}
/* /Components/Pages/UserResources.razor.rz.scp.css */
/* Resource Container */
.resource-container[b-hfl88nf0up] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-hfl88nf0up] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-hfl88nf0up] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-hfl88nf0up] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-hfl88nf0up] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-hfl88nf0up] {
    color: #a0a0b0;
    font-size: 14px;
}

/* Filters Card */
.filters-card[b-hfl88nf0up] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    padding: 24px;
    margin-bottom: 24px;
}

.filters-grid[b-hfl88nf0up] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.filter-field label[b-hfl88nf0up] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.filter-actions[b-hfl88nf0up] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    padding-top: 20px;
}

.btn-clear[b-hfl88nf0up] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear:hover[b-hfl88nf0up] {
    background: rgba(108, 117, 125, 0.4);
}

.btn-apply[b-hfl88nf0up] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply:hover[b-hfl88nf0up] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Summary Grid */
.summary-grid[b-hfl88nf0up] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.summary-card[b-hfl88nf0up] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    transition: all 0.3s ease;
}

.summary-card:hover[b-hfl88nf0up] {
    transform: translateY(-3px);
}

.card-icon[b-hfl88nf0up] {
    font-size: 40px;
}

.card-info[b-hfl88nf0up] {
    flex: 1;
}

.card-label[b-hfl88nf0up] {
    color: #a0a0b0;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.card-value[b-hfl88nf0up] {
    font-size: 28px;
    font-weight: 700;
}

.card-value.positive[b-hfl88nf0up] { color: #28a745; }
.card-value.negative[b-hfl88nf0up] { color: #dc3545; }
.card-value.zero[b-hfl88nf0up] { color: #a0a0b0; }

.card-subtitle[b-hfl88nf0up] {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

/* Delete Card */
.delete-card[b-hfl88nf0up] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(220, 53, 69, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.delete-info[b-hfl88nf0up] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.delete-icon[b-hfl88nf0up] {
    font-size: 32px;
}

.delete-info h3[b-hfl88nf0up] {
    color: #ff6b6b;
    margin: 0 0 4px 0;
    font-size: 16px;
}

.delete-info p[b-hfl88nf0up] {
    color: #a0a0b0;
    margin: 0;
    font-size: 13px;
}

.delete-controls[b-hfl88nf0up] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-delete[b-hfl88nf0up] {
    padding: 10px 20px;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 40px;
    color: #ff6b6b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-delete:hover:not(:disabled)[b-hfl88nf0up] {
    background: rgba(220, 53, 69, 0.3);
    transform: translateY(-1px);
}

.btn-delete:disabled[b-hfl88nf0up] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Table Container */
.table-container[b-hfl88nf0up] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow-x: auto;
    margin-bottom: 24px;
}

.resource-table[b-hfl88nf0up] {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.resource-table th[b-hfl88nf0up] {
    padding: 16px 20px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.resource-table td[b-hfl88nf0up] {
    padding: 14px 20px;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.resource-row:hover[b-hfl88nf0up] {
    background: rgba(255, 215, 0, 0.05);
}

/* ID Badge */
.id-badge[b-hfl88nf0up] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* Clickable User */
.clickable-user[b-hfl88nf0up] {
    color: #ffd700;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.clickable-user:hover[b-hfl88nf0up] {
    transform: translateX(2px);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* Type Badge */
.type-badge[b-hfl88nf0up] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.type-badge.buy[b-hfl88nf0up] { background: rgba(255, 152, 0, 0.15); color: #ff9800; }
.type-badge.admin[b-hfl88nf0up] { background: rgba(102, 126, 234, 0.15); color: #667eea; }
.type-badge.game[b-hfl88nf0up] { background: rgba(40, 167, 69, 0.15); color: #28a745; }
.type-badge.daily[b-hfl88nf0up] { background: rgba(255, 193, 7, 0.15); color: #ffc107; }

/* Delta Values */
.positive[b-hfl88nf0up] { color: #28a745; font-weight: 600; }
.negative[b-hfl88nf0up] { color: #dc3545; font-weight: 600; }
.zero[b-hfl88nf0up] { color: #a0a0b0; }

.positive-row[b-hfl88nf0up] { background: rgba(40, 167, 69, 0.05); }
.negative-row[b-hfl88nf0up] { background: rgba(220, 53, 69, 0.05); }

/* Date Info */
.date-info[b-hfl88nf0up] {
    display: flex;
    flex-direction: column;
}

.date[b-hfl88nf0up] {
    font-weight: 500;
}

.time[b-hfl88nf0up] {
    font-size: 11px;
    color: #a0a0b0;
}

/* Pagination Section */
.pagination-section[b-hfl88nf0up] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.pagination-info[b-hfl88nf0up] {
    color: #a0a0b0;
    font-size: 13px;
}

.pagination-controls[b-hfl88nf0up] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-btn[b-hfl88nf0up] {
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 40px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-hfl88nf0up] {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
}

.page-btn:disabled[b-hfl88nf0up] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-current[b-hfl88nf0up] {
    padding: 6px 16px;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-radius: 40px;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 14px;
}

/* Modern Input */
.modern-input[b-hfl88nf0up] {
    width: 85%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modern-input:focus[b-hfl88nf0up] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
}

.modern-select[b-hfl88nf0up] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

/* Loading State */
.loading-state[b-hfl88nf0up] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.dot-pulse[b-hfl88nf0up] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dot-pulse .dot[b-hfl88nf0up] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-hfl88nf0up 1.5s ease-in-out infinite;
}

.dot-pulse .dot:nth-child(2)[b-hfl88nf0up] { animation-delay: 0.2s; }
.dot-pulse .dot:nth-child(3)[b-hfl88nf0up] { animation-delay: 0.4s; }

/* Empty State */
.empty-state[b-hfl88nf0up] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-hfl88nf0up] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3[b-hfl88nf0up] {
    color: #ffd700;
    margin-bottom: 8px;
}

.empty-state p[b-hfl88nf0up] {
    color: #a0a0b0;
}

/* Modal */
.modal-overlay[b-hfl88nf0up] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-hfl88nf0up] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 400px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-header[b-hfl88nf0up] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-hfl88nf0up] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-hfl88nf0up] {
    font-size: 24px;
}

.modal-header h3[b-hfl88nf0up] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-hfl88nf0up] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-hfl88nf0up] {
    color: aqua;
    padding: 24px;
    text-align: center;
}

.modal-body strong[b-hfl88nf0up] {
    color: #ffd700;
}

.warning-text[b-hfl88nf0up] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

.modal-footer[b-hfl88nf0up] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel[b-hfl88nf0up] {
    padding: 8px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}

.btn-confirm[b-hfl88nf0up] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 1000px) {
    .summary-grid[b-hfl88nf0up] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .resource-container[b-hfl88nf0up] {
        padding: 16px;
    }

    .main-heading[b-hfl88nf0up] {
        font-size: 24px;
    }

    .filters-grid[b-hfl88nf0up] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-hfl88nf0up] {
        flex-direction: column;
    }

    .summary-grid[b-hfl88nf0up] {
        grid-template-columns: 1fr;
    }

    .delete-card[b-hfl88nf0up] {
        flex-direction: column;
        text-align: center;
    }

    .delete-controls[b-hfl88nf0up] {
        flex-direction: column;
        width: 100%;
    }

    .delete-controls .modern-input[b-hfl88nf0up],
    .delete-controls .btn-delete[b-hfl88nf0up] {
        width: 100%;
    }

    .pagination-section[b-hfl88nf0up] {
        flex-direction: column;
        gap: 12px;
    }
}

@keyframes pulse-b-hfl88nf0up {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}
/* /Components/Pages/Users/UserDetail.razor.rz.scp.css */
/* User Profile Container */
/* Make action buttons display as row */
.user-profile-container > .action-btn[b-y3o9x5j75w],
.user-profile-container > .back-btn[b-y3o9x5j75w] {
    display: inline-flex;
    margin-right: 12px;
    margin-bottom: 20px;
}

/* Or group them all together */
.user-profile-container > :is(.action-btn, .back-btn)[b-y3o9x5j75w] {
    display: inline-flex;
    margin-right: 12px;
    margin-bottom: 20px;
}
.avatar-row[b-y3o9x5j75w] {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.avatar-frame[b-y3o9x5j75w], .pawn-frame[b-y3o9x5j75w] {
    position: relative;
    text-align: center;
}

.avatar-frame[b-y3o9x5j75w] {
    width: 180px;
    height: 180px;
}

.pawn-frame[b-y3o9x5j75w] {
    width: 100px;
    height: 100px;
}

.user-avatar[b-y3o9x5j75w], .user-pawn[b-y3o9x5j75w] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    border: 3px solid #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.user-pawn[b-y3o9x5j75w] {
    border-color: #00ffcc;  /* optional different color for pawn */
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.3);
}

.avatar-glow[b-y3o9x5j75w], .pawn-glow[b-y3o9x5j75w] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 110%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2), transparent);
    border-radius: 50%;
    pointer-events: none;
}

.pawn-glow[b-y3o9x5j75w] {
    background: radial-gradient(circle, rgba(0, 255, 204, 0.2), transparent);
}

.image-label[b-y3o9x5j75w] {
    margin-top: -1px;
    font-size: 12px;
    color: #aaa;
    text-align: center;
}
/* Action Buttons Row - Place buttons in a row at the top */
.user-profile-container[b-y3o9x5j75w] {
    max-width: 100%;
    padding: 32px;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Button container at the top */
.button-container[b-y3o9x5j75w] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
/* Back Button */
.back-btn[b-y3o9x5j75w] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 40px;
    padding: 10px 24px;
    color: #ffd700;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 32px;
}

.back-btn:hover[b-y3o9x5j75w] {
    background: rgba(255, 215, 0, 0.15);
    transform: translateX(-5px);
    border-color: #ffd700;
}

/* Profile Header */
.profile-header[b-y3o9x5j75w] {
    display: flex;
    gap: 40px;
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 32px;
    padding: 40px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.avatar-section[b-y3o9x5j75w] {
    position: relative;
    text-align: center;
}

.avatar-frame[b-y3o9x5j75w] {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}

.user-avatar[b-y3o9x5j75w] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    border: 3px solid #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.avatar-glow[b-y3o9x5j75w] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 110%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2), transparent);
    border-radius: 50%;
    pointer-events: none;
}

.pawn-badge[b-y3o9x5j75w] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 16px;
    border-radius: 40px;
    margin-top: 16px;
    font-size: 14px;
    color: #ffd700;
}

/* Info Section */
.info-section[b-y3o9x5j75w] {
    flex: 1;
}

.user-title[b-y3o9x5j75w] {
    margin-bottom: 16px;
}

.username[b-y3o9x5j75w] {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-id[b-y3o9x5j75w] {
    color: #888;
    font-size: 18px;
}

/* Status Badge */
.status-badge[b-y3o9x5j75w] {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}

.status-badge.active[b-y3o9x5j75w] {
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid #28a745;
    color: #28a745;
}

.status-badge.banned[b-y3o9x5j75w] {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    color: #dc3545;
}

/* Level Container */
.level-container[b-y3o9x5j75w] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 16px;
}

.level-info[b-y3o9x5j75w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.level-icon[b-y3o9x5j75w] {
    font-size: 20px;
}

.level-label[b-y3o9x5j75w] {
    color: #888;
    font-size: 14px;
}

.level-value[b-y3o9x5j75w] {
    color: #ffd700;
    font-size: 24px;
    font-weight: 700;
    margin-left: auto;
}

.exp-bar[b-y3o9x5j75w] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.exp-fill[b-y3o9x5j75w] {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    border-radius: 20px;
    transition: width 0.5s ease;
}

.exp-text[b-y3o9x5j75w] {
    font-size: 12px;
    color: #888;
    text-align: right;
}

/* Stats Grid */
.stats-grid[b-y3o9x5j75w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-y3o9x5j75w] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
}

.stat-card:hover[b-y3o9x5j75w] {
    transform: translateY(-5px);
}

.stat-icon[b-y3o9x5j75w] {
    font-size: 40px;
}

.stat-info[b-y3o9x5j75w] {
    flex: 1;
}

.stat-label[b-y3o9x5j75w] {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.stat-value[b-y3o9x5j75w] {
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.stat-card.wins .stat-value[b-y3o9x5j75w] { color: #28a745; }
.stat-card.losses .stat-value[b-y3o9x5j75w] { color: #dc3545; }
.stat-card.ratio .stat-value[b-y3o9x5j75w] { color: #ffd700; }
.stat-card.score .stat-value[b-y3o9x5j75w] { color: #17a2b8; }

/* Resources Grid */
.resources-grid[b-y3o9x5j75w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.resource-card[b-y3o9x5j75w] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.resource-icon[b-y3o9x5j75w] {
    font-size: 36px;
}

.resource-info[b-y3o9x5j75w] {
    flex: 1;
}

.resource-label[b-y3o9x5j75w] {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.resource-value[b-y3o9x5j75w] {
    font-size: 24px;
    font-weight: 700;
}

.resource-card.gems .resource-value[b-y3o9x5j75w] { color: #e91e63; }
.resource-card.coins .resource-value[b-y3o9x5j75w] { color: #ff9800; }
.resource-card.minutes .resource-value[b-y3o9x5j75w] { color: #2196f3; }

/* Details Panels */
.details-panels[b-y3o9x5j75w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.panel[b-y3o9x5j75w] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.panel-header[b-y3o9x5j75w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.panel-icon[b-y3o9x5j75w] {
    font-size: 24px;
}

.panel-header h3[b-y3o9x5j75w] {
    margin: 0;
    color: #ffd700;
    font-size: 18px;
}

.panel-header.warning[b-y3o9x5j75w] {
    border-bottom-color: #dc3545;
}

.panel-content[b-y3o9x5j75w] {
    padding: 20px;
}

.detail-row[b-y3o9x5j75w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-label[b-y3o9x5j75w] {
    color: #888;
    font-size: 13px;
}

.detail-value[b-y3o9x5j75w] {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.detail-value.code[b-y3o9x5j75w] {
    font-family: monospace;
    font-size: 12px;
    color: #ffd700;
}

.clickable-avatar[b-y3o9x5j75w], .clickable-pawn[b-y3o9x5j75w] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable-avatar:hover[b-y3o9x5j75w], .clickable-pawn:hover[b-y3o9x5j75w] {
    color: #ffd700;
    transform: translateX(3px);
}

.view-link[b-y3o9x5j75w] {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 5px;
}

.ban-reason[b-y3o9x5j75w] {
    color: #dc3545;
}

.ban-date[b-y3o9x5j75w] {
    color: #ff9800;
}

/* Volume Bar */
.volume-bar[b-y3o9x5j75w] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 200px;
}

.volume-bar .volume-fill[b-y3o9x5j75w] {
    height: 6px;
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    border-radius: 3px;
}

.volume-bar span[b-y3o9x5j75w] {
    font-size: 12px;
    color: #888;
    min-width: 45px;
}

/* Action Buttons */
.action-buttons[b-y3o9x5j75w] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.action-btn[b-y3o9x5j75w] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: none;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ban-btn[b-y3o9x5j75w] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    color: white;
}

.unban-btn[b-y3o9x5j75w] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    color: white;
}

.edit-btn[b-y3o9x5j75w] {
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid #667eea;
    color: #667eea;
}

.edit-btn:hover[b-y3o9x5j75w] {
    background: #667eea;
    color: white;
}

.refresh-btn[b-y3o9x5j75w] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.refresh-btn:hover[b-y3o9x5j75w] {
    background: rgba(255, 255, 255, 0.2);
}

.action-btn:hover[b-y3o9x5j75w] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Modal */
.modal-overlay[b-y3o9x5j75w] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-y3o9x5j75w] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 24px;
    width: 450px;
    max-width: 90%;
    animation: slideIn-b-y3o9x5j75w 0.3s ease;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.modal-header[b-y3o9x5j75w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-header.warning[b-y3o9x5j75w] {
    border-bottom-color: #dc3545;
}

.modal-header.success[b-y3o9x5j75w] {
    border-bottom-color: #28a745;
}

.modal-icon[b-y3o9x5j75w] {
    font-size: 24px;
}

.modal-header h3[b-y3o9x5j75w] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-y3o9x5j75w] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-y3o9x5j75w] {
    padding: 24px;
}

.form-group[b-y3o9x5j75w] {
    margin-bottom: 20px;
}

.form-group label[b-y3o9x5j75w] {
    display: block;
    margin-bottom: 8px;
    color: #aaa;
    font-size: 14px;
}

.form-select[b-y3o9x5j75w] {
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    color: white;
    font-size: 14px;
}

.form-select:focus[b-y3o9x5j75w] {
    outline: none;
    border-color: #ffd700;
}

.confirm-message[b-y3o9x5j75w] {
    text-align: center;
}

.confirm-message p[b-y3o9x5j75w] {
    color: white;
    margin: 10px 0;
}

.warning-text[b-y3o9x5j75w] {
    color: #ff9800;
    font-size: 12px;
}

.error-message-small[b-y3o9x5j75w] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 8px;
}

.modal-footer[b-y3o9x5j75w] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-secondary[b-y3o9x5j75w] {
    padding: 10px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid #6c757d;
    border-radius: 10px;
    color: #6c757d;
    cursor: pointer;
}

.btn-danger[b-y3o9x5j75w] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

.btn-success[b-y3o9x5j75w] {
    padding: 10px 20px;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

/* Error Card */
.error-card[b-y3o9x5j75w] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 32px;
}

.error-icon[b-y3o9x5j75w] {
    font-size: 64px;
    margin-bottom: 20px;
}

.error-card h3[b-y3o9x5j75w] {
    color: #ffd700;
    margin-bottom: 12px;
}

.error-card p[b-y3o9x5j75w] {
    color: #aaa;
    margin-bottom: 24px;
}

.btn-gaming[b-y3o9x5j75w] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    padding: 12px 32px;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
}

/* Animations */
@keyframes slideIn-b-y3o9x5j75w {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dot-pulse-loader[b-y3o9x5j75w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 400px;
}

.dot[b-y3o9x5j75w] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-y3o9x5j75w 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-y3o9x5j75w] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-y3o9x5j75w] { animation-delay: 0.4s; }

@keyframes pulse-b-y3o9x5j75w {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Responsive */
@media (max-width: 968px) {
    .profile-header[b-y3o9x5j75w] {
        flex-direction: column;
        text-align: center;
    }

    .stats-grid[b-y3o9x5j75w], .resources-grid[b-y3o9x5j75w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .details-panels[b-y3o9x5j75w] {
        grid-template-columns: 1fr;
    }

    .username[b-y3o9x5j75w] {
        font-size: 28px;
        justify-content: center;
    }
}
@media (max-width: 768px) {
    .avatar-row[b-y3o9x5j75w] {
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 768px) {
    .user-profile-container[b-y3o9x5j75w] {
        padding: 16px;
    }

    .stats-grid[b-y3o9x5j75w], .resources-grid[b-y3o9x5j75w] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-y3o9x5j75w] {
        flex-direction: column;
    }

    .action-btn[b-y3o9x5j75w] {
        justify-content: center;
    }
}
/* /Components/Pages/Users/UserEdit.razor.rz.scp.css */
/* User Edit Container */
.user-edit-container[b-p6tshf90hv] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Header Actions */
.header-actions[b-p6tshf90hv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.back-btn[b-p6tshf90hv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 40px;
    padding: 10px 24px;
    color: #ffd700;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-btn:hover[b-p6tshf90hv] {
    background: rgba(255, 215, 0, 0.12);
    transform: translateX(-4px);
}

.save-top-btn[b-p6tshf90hv] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 28px;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.save-top-btn:hover[b-p6tshf90hv] {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Edit Card */
.edit-card[b-p6tshf90hv] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 28px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
}

.edit-header[b-p6tshf90hv] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 140, 0, 0.03));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.header-icon[b-p6tshf90hv] {
    font-size: 32px;
}

.edit-header h1[b-p6tshf90hv] {
    flex: 1;
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.user-badge[b-p6tshf90hv] {
    background: rgba(255, 215, 0, 0.12);
    padding: 6px 16px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    color: #ffd700;
}

/* Edit Content */
.edit-content[b-p6tshf90hv] {
    padding: 8px 0;
}

/* Form Sections */
.form-section[b-p6tshf90hv] {
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.section-title[b-p6tshf90hv] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.section-icon[b-p6tshf90hv] {
    font-size: 22px;
}

.section-title h3[b-p6tshf90hv] {
    margin: 0;
    color: #ffd700;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.section-divider[b-p6tshf90hv] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.3), transparent);
}

.warning-badge[b-p6tshf90hv] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    margin-left: auto;
}

/* Modern Input Wrapper */
.input-wrapper[b-p6tshf90hv] {
    position: relative;
    width: 100%;
}

/* Modern Input - Dark, Compact, Beautiful */
.modern-input[b-p6tshf90hv] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.modern-input:focus[b-p6tshf90hv] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.modern-input:hover[b-p6tshf90hv] {
    border-color: rgba(255, 215, 0, 0.4);
}

/* Remove number input spinners */
.modern-input[type="number"][b-p6tshf90hv] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.modern-input[type="number"][b-p6tshf90hv]::-webkit-inner-spin-button,
.modern-input[type="number"][b-p6tshf90hv]::-webkit-outer-spin-button {
    opacity: 0.5;
}

/* Form Row */
.form-row[b-p6tshf90hv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.form-group[b-p6tshf90hv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-p6tshf90hv] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Stats Grids */
.stats-grid[b-p6tshf90hv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stats-grid-4[b-p6tshf90hv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.resources-grid[b-p6tshf90hv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card[b-p6tshf90hv], .resource-card[b-p6tshf90hv] {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 16px;
    padding: 14px;
    transition: all 0.2s ease;
}

.stat-card:hover[b-p6tshf90hv], .resource-card:hover[b-p6tshf90hv] {
    background: rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}

.stat-header[b-p6tshf90hv], .resource-header[b-p6tshf90hv] {
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

.resource-card.coin .resource-header[b-p6tshf90hv] { color: #ff9800; }
.resource-card.gem .resource-header[b-p6tshf90hv] { color: #e91e63; }
.resource-card.time .resource-header[b-p6tshf90hv] { color: #2196f3; }

.stat-card .modern-input[b-p6tshf90hv],
.resource-card .modern-input[b-p6tshf90hv] {
    text-align: center;
    font-weight: 600;
    font-size: 15px;
}

/* Items Container */
.items-container[b-p6tshf90hv] {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    padding: 16px;
}

.item-row[b-p6tshf90hv] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.item-badge[b-p6tshf90hv] {
    width: 45px;
    color: #ffd700;
    font-size: 12px;
    font-weight: 600;
}

.item-input[b-p6tshf90hv] {
    flex: 1;
}

.delete-item-btn[b-p6tshf90hv] {
    background: rgba(220, 53, 69, 0.15);
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.delete-item-btn:hover[b-p6tshf90hv] {
    background: rgba(220, 53, 69, 0.35);
    transform: scale(1.02);
}

.add-item-btn[b-p6tshf90hv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px dashed rgba(255, 215, 0, 0.3);
    border-radius: 40px;
    padding: 8px 20px;
    color: #ffd700;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.add-item-btn:hover[b-p6tshf90hv] {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
}

/* Modal */
.modal-overlay[b-p6tshf90hv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-p6tshf90hv] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 380px;
    max-width: 90%;
    animation: slideIn-b-p6tshf90hv 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-header[b-p6tshf90hv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.warning[b-p6tshf90hv] { border-bottom-color: rgba(255, 215, 0, 0.3); }
.modal-header.danger[b-p6tshf90hv] { border-bottom-color: rgba(220, 53, 69, 0.3); }

.modal-icon[b-p6tshf90hv] { font-size: 22px; }
.modal-header h3[b-p6tshf90hv] { flex: 1; margin: 0; color: white; font-size: 17px; }

.modal-close[b-p6tshf90hv] {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
}

.modal-body[b-p6tshf90hv] {
    padding: 22px;
    text-align: center;
}

.modal-body p[b-p6tshf90hv] { margin: 0 0 8px 0; color: #ddd; font-size: 14px; }
.modal-body strong[b-p6tshf90hv] { color: #ffd700; }
.modal-body small[b-p6tshf90hv] { color: #a0a0b0; font-size: 12px; }

.warning-text[b-p6tshf90hv] { color: #ff6b6b !important; }

.modal-footer[b-p6tshf90hv] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-secondary[b-p6tshf90hv] {
    padding: 8px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
    font-size: 13px;
}

.btn-success[b-p6tshf90hv] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.btn-danger[b-p6tshf90hv] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

/* Toast Notifications */
.toast-notification[b-p6tshf90hv] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-p6tshf90hv 0.3s ease;
    z-index: 10001;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.error[b-p6tshf90hv] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border-left: 4px solid #ffd700;
}

.toast-notification.success[b-p6tshf90hv] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border-left: 4px solid #ffd700;
}

.toast-notification span:first-child[b-p6tshf90hv] { font-size: 18px; }
.toast-notification span:nth-child(2)[b-p6tshf90hv] { flex: 1; color: white; font-size: 13px; font-weight: 500; }

.toast-close[b-p6tshf90hv] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-close:hover[b-p6tshf90hv] { opacity: 1; }

/* Loading */
.dot-pulse-loader[b-p6tshf90hv] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-p6tshf90hv] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-p6tshf90hv 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-p6tshf90hv] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-p6tshf90hv] { animation-delay: 0.4s; }

/* Animations */
@keyframes pulse-b-p6tshf90hv {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

@keyframes slideInRight-b-p6tshf90hv {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Responsive */
@media (max-width: 900px) {
    .stats-grid[b-p6tshf90hv], .stats-grid-4[b-p6tshf90hv] {
        grid-template-columns: repeat(2, 1fr);
    }
    .resources-grid[b-p6tshf90hv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .user-edit-container[b-p6tshf90hv] { padding: 16px; }
    .header-actions[b-p6tshf90hv] { flex-direction: column; gap: 12px; }
    .back-btn[b-p6tshf90hv], .save-top-btn[b-p6tshf90hv] { width: 100%; justify-content: center; }
    .edit-header[b-p6tshf90hv] { flex-wrap: wrap; padding: 16px 20px; }
    .edit-header h1[b-p6tshf90hv] { font-size: 22px; }
    .form-section[b-p6tshf90hv] { padding: 16px 20px; }
    .form-row[b-p6tshf90hv] { grid-template-columns: 1fr; gap: 16px; }
    .stats-grid[b-p6tshf90hv], .stats-grid-4[b-p6tshf90hv], .resources-grid[b-p6tshf90hv] { grid-template-columns: 1fr; gap: 12px; }
    .toast-notification[b-p6tshf90hv] { top: 16px; right: 16px; left: 16px; min-width: auto; }
}
/* /Components/Pages/Users/UsersPage.razor.rz.scp.css */
/* Users Management Container */
.users-management[b-sdfnh12hu6] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-sdfnh12hu6] {
    margin-bottom: 28px;
}

.main-heading[b-sdfnh12hu6] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-icon[b-sdfnh12hu6] {
    font-size: 32px;
    -webkit-text-fill-color: initial;
}

.badge[b-sdfnh12hu6] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

/* Filters Bar */
.filters-bar[b-sdfnh12hu6] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.filter-row[b-sdfnh12hu6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.filter-group[b-sdfnh12hu6] {
    position: relative;
    flex: 1;
    min-width: 160px;
}

.filter-icon[b-sdfnh12hu6] {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.6;
    pointer-events: none;
}

.filter-input[b-sdfnh12hu6] {
    width: 75%;
    padding: 10px 14px 10px 38px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.2s ease;
}

.filter-input:focus[b-sdfnh12hu6] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.6);
}

.filter-actions[b-sdfnh12hu6] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.apply-filter-btn[b-sdfnh12hu6] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 8px 20px;
    color: #1a1a2e;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apply-filter-btn:hover[b-sdfnh12hu6] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.clear-all-btn[b-sdfnh12hu6] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 40px;
    padding: 8px 20px;
    color: #ff6b6b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-all-btn:hover[b-sdfnh12hu6] {
    background: rgba(220, 53, 69, 0.3);
}

/* Results Info */
.results-info[b-sdfnh12hu6] {
    text-align: center;
    margin-bottom: 20px;
    color: #a0a0b0;
    font-size: 13px;
}

.results-info strong[b-sdfnh12hu6] {
    color: #ffd700;
}

/* Table Container */
.table-container[b-sdfnh12hu6] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow-x: auto;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.users-table[b-sdfnh12hu6] {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.users-table th[b-sdfnh12hu6] {
    padding: 16px 20px;
    text-align: left;
    color: #ffd700;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.users-table td[b-sdfnh12hu6] {
    padding: 14px 20px;
    color: #e0e0e0;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.user-row:hover[b-sdfnh12hu6] {
    background: rgba(255, 215, 0, 0.05);
}

/* Column Widths */
.col-id[b-sdfnh12hu6] { width: 80px; }
.col-name[b-sdfnh12hu6] { width: 200px; }
.col-stats[b-sdfnh12hu6] { width: 120px; }
.col-phone[b-sdfnh12hu6] { width: 130px; }
.col-status[b-sdfnh12hu6] { width: 100px; }
.col-actions[b-sdfnh12hu6] { width: 140px; }

/* Clickable ID */
.clickable-id[b-sdfnh12hu6] {
    cursor: pointer;
    color: #ffd700;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
}

.clickable-id:hover[b-sdfnh12hu6] {
    transform: translateX(3px);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Unnamed */
.unnamed[b-sdfnh12hu6] {
    color: #666;
    font-style: italic;
}

/* Win/Loss */
.win-loss[b-sdfnh12hu6] {
    display: flex;
    gap: 12px;
}

.wins[b-sdfnh12hu6] {
    color: #28a745;
}

.losses[b-sdfnh12hu6] {
    color: #dc3545;
}

/* Status Badge */
.status-badge[b-sdfnh12hu6] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.active[b-sdfnh12hu6] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.banned[b-sdfnh12hu6] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Action Buttons */
.action-buttons[b-sdfnh12hu6] {
    display: flex;
    gap: 8px;
}

.action-icon[b-sdfnh12hu6] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.action-icon.view:hover[b-sdfnh12hu6] { background: rgba(255, 215, 0, 0.2); transform: scale(1.05); }
.action-icon.edit:hover[b-sdfnh12hu6] { background: rgba(255, 215, 0, 0.2); transform: scale(1.05); }
.action-icon.ban:hover[b-sdfnh12hu6] { background: rgba(220, 53, 69, 0.3); transform: scale(1.05); }
.action-icon.unban:hover[b-sdfnh12hu6] { background: rgba(40, 167, 69, 0.3); transform: scale(1.05); }

/* Pagination */
.pagination-container[b-sdfnh12hu6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.page-btn[b-sdfnh12hu6] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 40px;
    padding: 8px 16px;
    color: #e0e0e0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-sdfnh12hu6] {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
}

.page-btn:disabled[b-sdfnh12hu6] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-numbers[b-sdfnh12hu6] {
    display: flex;
    gap: 6px;
}

.page-number[b-sdfnh12hu6] {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: #e0e0e0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 36px;
}

.page-number:hover:not(.active)[b-sdfnh12hu6] {
    background: rgba(255, 215, 0, 0.15);
}

.page-number.active[b-sdfnh12hu6] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    font-weight: 600;
}

.page-ellipsis[b-sdfnh12hu6] {
    padding: 8px 4px;
    color: #666;
}

.page-size-selector[b-sdfnh12hu6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
    color: #a0a0b0;
    font-size: 13px;
}

.page-size-select[b-sdfnh12hu6] {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    padding: 6px 10px;
    color: white;
    font-size: 13px;
    cursor: pointer;
}

/* Empty State */
.empty-state[b-sdfnh12hu6] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-sdfnh12hu6] {
    font-size: 48px;
    opacity: 0.5;
}

.empty-state p[b-sdfnh12hu6] {
    color: #a0a0b0;
    margin: 16px 0;
}
.action-icon.delete[b-sdfnh12hu6] {
    background: rgba(220, 53, 69, 0.15);
}

.action-icon.delete:hover[b-sdfnh12hu6] {
    background: rgba(220, 53, 69, 0.4);
    transform: scale(1.05);
}
/* Modal */
.modal-overlay[b-sdfnh12hu6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-sdfnh12hu6] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 400px;
    max-width: 90%;
    animation: slideIn-b-sdfnh12hu6 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.2);
    color: azure;
}

.modal-header[b-sdfnh12hu6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.warning[b-sdfnh12hu6] { border-bottom-color: rgba(220, 53, 69, 0.3); }
.modal-header.success[b-sdfnh12hu6] { border-bottom-color: rgba(40, 167, 69, 0.3); }

.modal-icon[b-sdfnh12hu6] { font-size: 22px; }
.modal-header h3[b-sdfnh12hu6] { flex: 1; margin: 0; color: white; font-size: 17px; }

.modal-close[b-sdfnh12hu6] {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
}

.modal-body[b-sdfnh12hu6] { padding: 22px; }

.form-group[b-sdfnh12hu6] { margin-bottom: 16px; }
.form-group label[b-sdfnh12hu6] { display: block; margin-bottom: 8px; color: #a0a0b0; font-size: 13px; }

.form-select[b-sdfnh12hu6] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

.error-text[b-sdfnh12hu6] { color: #ff6b6b; font-size: 12px; margin-top: 8px; }

.modal-footer[b-sdfnh12hu6] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-secondary[b-sdfnh12hu6] {
    padding: 8px 20px;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    border-radius: 40px;
    color: #a0a0b0;
    cursor: pointer;
}

.btn-danger[b-sdfnh12hu6] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

.btn-success[b-sdfnh12hu6] {
    padding: 8px 20px;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border: none;
    border-radius: 40px;
    color: white;
    cursor: pointer;
}

/* Toast Notification */
.toast-notification[b-sdfnh12hu6] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-sdfnh12hu6 0.3s ease;
    z-index: 10001;
    min-width: 280px;
}

.toast-notification.error[b-sdfnh12hu6] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border-left: 4px solid #ffd700;
}

.toast-close[b-sdfnh12hu6] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

/* Loading */
.dot-pulse-loader[b-sdfnh12hu6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot[b-sdfnh12hu6] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-sdfnh12hu6 1.5s ease-in-out infinite;
}

.dot:nth-child(2)[b-sdfnh12hu6] { animation-delay: 0.2s; }
.dot:nth-child(3)[b-sdfnh12hu6] { animation-delay: 0.4s; }

/* Animations */
@keyframes pulse-b-sdfnh12hu6 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

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

@keyframes slideInRight-b-sdfnh12hu6 {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .users-management[b-sdfnh12hu6] { padding: 16px; }
    .filter-row[b-sdfnh12hu6] { flex-direction: column; }
    .filter-group[b-sdfnh12hu6] { width: 100%; }
    .filter-actions[b-sdfnh12hu6] { width: 100%; justify-content: stretch; }
    .apply-filter-btn[b-sdfnh12hu6], .clear-all-btn[b-sdfnh12hu6] { flex: 1; }
    .pagination-container[b-sdfnh12hu6] { flex-wrap: wrap; }
    .page-size-selector[b-sdfnh12hu6] { margin-left: 0; width: 100%; justify-content: center; }
}
/* /Components/Pages/VoiceServers.razor.rz.scp.css */
/* Voice Servers Container */
.voice-servers-container[b-qrcy4eaew5] {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    padding: 32px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Header Section */
.header-section[b-qrcy4eaew5] {
    text-align: center;
    margin-bottom: 32px;
}

.main-heading[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.heading-icon[b-qrcy4eaew5] {
    font-size: 36px;
    -webkit-text-fill-color: initial;
}

.badge[b-qrcy4eaew5] {
    background: rgba(255, 215, 0, 0.15);
    padding: 4px 12px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ffd700;
}

.header-subtitle[b-qrcy4eaew5] {
    color: #a0a0b0;
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-create[b-qrcy4eaew5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    color: #1a1a2e;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover[b-qrcy4eaew5] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

/* Tabs */
.tabs[b-qrcy4eaew5] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(10, 10, 20, 0.4);
    padding: 8px;
    border-radius: 60px;
    width: fit-content;
}

.tab[b-qrcy4eaew5] {
    padding: 10px 24px;
    border: none;
    background: transparent;
    color: #a0a0b0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 40px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab.active[b-qrcy4eaew5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}

.tab-badge[b-qrcy4eaew5] {
    background: rgba(255, 215, 0, 0.2);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
}

.tab.active .tab-badge[b-qrcy4eaew5] {
    background: rgba(26, 26, 46, 0.2);
}

/* Servers Grid */
.servers-grid[b-qrcy4eaew5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
}

/* Server Card */
.server-card[b-qrcy4eaew5] {
    background: rgba(10, 10, 20, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.server-card:hover[b-qrcy4eaew5] {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.server-card.enabled[b-qrcy4eaew5] {
    border-left: 4px solid #28a745;
}

.server-card.disabled[b-qrcy4eaew5] {
    border-left: 4px solid #dc3545;
}

.server-card.editing[b-qrcy4eaew5] {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

/* Card Header */
.card-header[b-qrcy4eaew5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 140, 0, 0.05));
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.server-id[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.id-badge[b-qrcy4eaew5] {
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
}

.status-badge[b-qrcy4eaew5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.enabled[b-qrcy4eaew5] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-badge.disabled[b-qrcy4eaew5] {
    background: rgba(220, 53, 69, 0.15);
    color: #ff6b6b;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.card-actions[b-qrcy4eaew5] {
    display: flex;
    gap: 8px;
}

.action-icon[b-qrcy4eaew5] {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.action-icon.edit[b-qrcy4eaew5] { color: #ffd700; }
.action-icon.delete[b-qrcy4eaew5] { color: #ff6b6b; }

.action-icon:hover[b-qrcy4eaew5] {
    transform: scale(1.05);
    background: rgba(255, 215, 0, 0.15);
}

/* Card Body */
.card-body[b-qrcy4eaew5] {
    padding: 20px;
}

.server-details[b-qrcy4eaew5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.detail-item[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.detail-icon[b-qrcy4eaew5] {
    font-size: 18px;
}

.detail-label[b-qrcy4eaew5] {
    color: #a0a0b0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 100px;
}

.detail-value[b-qrcy4eaew5] {
    color: white;
    font-weight: 500;
    font-family: monospace;
    font-size: 13px;
}

.detail-value.url[b-qrcy4eaew5] {
    color: #4a9eff;
    word-break: break-all;
}

/* Edit Mode */
.edit-header[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.08));
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.edit-icon[b-qrcy4eaew5] {
    font-size: 20px;
}

.edit-header h3[b-qrcy4eaew5] {
    flex: 1;
    margin: 0;
    color: #ffd700;
    font-size: 16px;
}

.close-edit[b-qrcy4eaew5] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.edit-body[b-qrcy4eaew5] {
    padding: 20px;
}

.form-field[b-qrcy4eaew5] {
    margin-bottom: 16px;
}

.form-field label[b-qrcy4eaew5] {
    display: block;
    margin-bottom: 8px;
    color: #a0a0b0;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.modern-input[b-qrcy4eaew5] {
    width: 80%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

.modern-input:focus[b-qrcy4eaew5] {
    outline: none;
    border-color: #ffd700;
    background: rgba(0, 0, 0, 0.7);
}

.error-text[b-qrcy4eaew5] {
    color: #ff6b6b;
    font-size: 11px;
    display: block;
    margin-top: 4px;
}

.checkbox-field[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px 40px;
    color: wheat;
}

/* Toggle Switch */
.toggle-switch[b-qrcy4eaew5] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.toggle-switch input[b-qrcy4eaew5] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-qrcy4eaew5] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(108, 117, 125, 0.4);
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider[b-qrcy4eaew5]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #ff6b6b;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-qrcy4eaew5] {
    background-color: rgba(40, 167, 69, 0.3);
}

input:checked + .toggle-slider[b-qrcy4eaew5]:before {
    transform: translateX(22px);
    background-color: #28a745;
}

.edit-actions[b-qrcy4eaew5] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* Buttons */
.btn-save[b-qrcy4eaew5], .btn-cancel[b-qrcy4eaew5], .btn-create-modal[b-qrcy4eaew5], .btn-delete[b-qrcy4eaew5], .retry-btn[b-qrcy4eaew5] {
    padding: 10px 20px;
    border: none;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save[b-qrcy4eaew5] {
    flex: 1;
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    color: white;
}

.btn-save:hover[b-qrcy4eaew5] {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.btn-cancel[b-qrcy4eaew5] {
    flex: 1;
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid rgba(108, 117, 125, 0.3);
    color: #a0a0b0;
}

.btn-cancel:hover[b-qrcy4eaew5] {
    background: rgba(108, 117, 125, 0.4);
}

.btn-create-modal[b-qrcy4eaew5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}

.btn-delete[b-qrcy4eaew5] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    color: white;
}

.retry-btn[b-qrcy4eaew5] {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
}

/* Modals */
.modal-overlay[b-qrcy4eaew5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content[b-qrcy4eaew5] {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 20px;
    width: 500px;
    max-width: 90%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.confirm-modal[b-qrcy4eaew5] {
    width: 380px;
}

.modal-header[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.modal-header.danger[b-qrcy4eaew5] {
    border-bottom-color: rgba(220, 53, 69, 0.3);
}

.modal-icon[b-qrcy4eaew5] {
    font-size: 24px;
}

.modal-header h3[b-qrcy4eaew5] {
    flex: 1;
    margin: 0;
    color: white;
}

.modal-close[b-qrcy4eaew5] {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body[b-qrcy4eaew5] {
    padding: 24px;
    color: aqua;
}

.modal-footer[b-qrcy4eaew5] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Form Grid */
.form-grid[b-qrcy4eaew5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field.full-width[b-qrcy4eaew5] {
    grid-column: span 2;
}

.warning-text[b-qrcy4eaew5] {
    color: #ff6b6b;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}

/* Status Section */
.status-container[b-qrcy4eaew5] {
    background: rgba(10, 10, 20, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    padding: 24px;
}

.status-header[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
}

.status-header-icon[b-qrcy4eaew5] {
    font-size: 24px;
}

.status-header h3[b-qrcy4eaew5] {
    flex: 1;
    margin: 0;
    color: #ffd700;
    font-size: 18px;
}

.refresh-status-btn[b-qrcy4eaew5] {
    padding: 8px 20px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 40px;
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-status-btn:hover[b-qrcy4eaew5] {
    background: rgba(255, 215, 0, 0.2);
}

/* Status Grid */
.status-grid[b-qrcy4eaew5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}

/* Status Card */
.status-card[b-qrcy4eaew5] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    overflow: hidden;
}

.status-card-header[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.server-id-badge[b-qrcy4eaew5] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.1));
    padding: 4px 10px;
    border-radius: 20px;
    color: #ffd700;
    font-weight: 700;
    font-size: 13px;
}

.server-url-label[b-qrcy4eaew5] {
    flex: 1;
    color: #a0a0b0;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-count-badge[b-qrcy4eaew5] {
    background: rgba(102, 126, 234, 0.15);
    color: #667eea;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
}

/* Status Card Body */
.status-card-body[b-qrcy4eaew5] {
    padding: 16px;
}

.sessions-list[b-qrcy4eaew5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-item[b-qrcy4eaew5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.session-item:hover[b-qrcy4eaew5] {
    background: rgba(255, 215, 0, 0.05);
}

.session-item.running[b-qrcy4eaew5] {
    border-left: 3px solid #28a745;
}

.session-item.stopped[b-qrcy4eaew5] {
    border-left: 3px solid #dc3545;
}

.session-info[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.session-id[b-qrcy4eaew5] {
    font-family: monospace;
    font-size: 12px;
    color: #e0e0e0;
}

.session-status-badge.running[b-qrcy4eaew5] {
    color: #28a745;
}

.session-status-badge.stopped[b-qrcy4eaew5] {
    color: #ff6b6b;
}

.session-games[b-qrcy4eaew5] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.games-icon[b-qrcy4eaew5] {
    font-size: 14px;
}

.games-count[b-qrcy4eaew5] {
    font-weight: 700;
    color: #ffd700;
    font-size: 14px;
}

.games-label[b-qrcy4eaew5] {
    color: #a0a0b0;
    font-size: 11px;
}

/* No Sessions */
.no-sessions[b-qrcy4eaew5] {
    text-align: center;
    padding: 20px;
    color: #a0a0b0;
    font-size: 13px;
}

/* Status Summary */
.status-summary[b-qrcy4eaew5] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
}

.summary-item[b-qrcy4eaew5] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.summary-icon[b-qrcy4eaew5] {
    font-size: 20px;
    display: block;
    margin-bottom: 4px;
}

.summary-label[b-qrcy4eaew5] {
    display: block;
    color: #a0a0b0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.summary-value[b-qrcy4eaew5] {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #ffd700;
}

/* Toast Notifications */
.toast-notification[b-qrcy4eaew5] {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 12px;
    animation: slideInRight-b-qrcy4eaew5 0.3s ease;
    z-index: 10001;
    min-width: 280px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.toast-notification.success[b-qrcy4eaew5] {
    background: linear-gradient(135deg, #28a745, #0d6e2e);
    border-left: 4px solid #ffd700;
}

.toast-notification.error[b-qrcy4eaew5] {
    background: linear-gradient(135deg, #dc3545, #8b0000);
    border-left: 4px solid #ffd700;
}

.toast-notification span:first-child[b-qrcy4eaew5] {
    font-size: 18px;
}

.toast-notification span:nth-child(2)[b-qrcy4eaew5] {
    flex: 1;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.toast-close[b-qrcy4eaew5] {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
}

.toast-close:hover[b-qrcy4eaew5] {
    opacity: 1;
}

/* Error States */
.status-error[b-qrcy4eaew5] {
    text-align: center;
    padding: 40px 20px;
}

.status-error-icon[b-qrcy4eaew5] {
    font-size: 56px;
    display: block;
    margin-bottom: 16px;
}

.status-error h3[b-qrcy4eaew5] {
    color: #ffd700;
    font-size: 20px;
    margin-bottom: 8px;
}

.status-error p[b-qrcy4eaew5] {
    color: #a0a0a0;
    margin-bottom: 20px;
}

.error-card[b-qrcy4eaew5] {
    text-align: center;
    padding: 40px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: 20px;
}

.error-icon[b-qrcy4eaew5] {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.error-card p[b-qrcy4eaew5] {
    color: #ff6b6b;
    margin-bottom: 16px;
}

/* Empty State */
.empty-state[b-qrcy4eaew5] {
    text-align: center;
    padding: 60px;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 20px;
}

.empty-icon[b-qrcy4eaew5] {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-qrcy4eaew5] {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Loading States */
.dot-pulse-loader[b-qrcy4eaew5] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 100vh;
}

.dot-pulse.small[b-qrcy4eaew5] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dot-pulse.small .dot[b-qrcy4eaew5] {
    width: 8px;
    height: 8px;
}

.dot[b-qrcy4eaew5] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffd700;
    animation: pulse-b-qrcy4eaew5 1.5s ease-in-out infinite;
}

.loading-state[b-qrcy4eaew5] {
    text-align: center;
    padding: 40px;
}

.loading-state p[b-qrcy4eaew5] {
    color: #a0a0b0;
}

/* Animations */
@keyframes pulse-b-qrcy4eaew5 {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes slideInRight-b-qrcy4eaew5 {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .servers-grid[b-qrcy4eaew5] {
        grid-template-columns: 1fr;
    }

    .status-grid[b-qrcy4eaew5] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-qrcy4eaew5] {
        grid-template-columns: 1fr;
    }

    .form-field.full-width[b-qrcy4eaew5] {
        grid-column: span 1;
    }

    .status-summary[b-qrcy4eaew5] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .voice-servers-container[b-qrcy4eaew5] {
        padding: 16px;
    }

    .main-heading[b-qrcy4eaew5] {
        font-size: 24px;
    }

    .detail-item[b-qrcy4eaew5] {
        flex-wrap: wrap;
    }

    .detail-label[b-qrcy4eaew5] {
        min-width: 80px;
    }

    .edit-actions[b-qrcy4eaew5] {
        flex-direction: column;
    }

    .modal-content[b-qrcy4eaew5] {
        width: 95%;
    }

    .tabs[b-qrcy4eaew5] {
        width: 100%;
        justify-content: center;
    }

    .tab[b-qrcy4eaew5] {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    .status-summary[b-qrcy4eaew5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .badge[b-qrcy4eaew5] {
        font-size: 10px;
    }

    .toast-notification[b-qrcy4eaew5] {
        top: 16px;
        right: 16px;
        left: 16px;
        min-width: auto;
    }

    .server-id[b-qrcy4eaew5] {
        flex-wrap: wrap;
    }
}