/* _content/WebUI/Components/Layout/DocsLayout.razor.rz.scp.css */


#blazor-error-ui[b-ojiq456lla] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-ojiq456lla] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/WebUI/Components/Layout/Nav/ConsumerNavMenu.razor.rz.scp.css */
/* Sidebar with fixed width */
.sidebar[b-r3oa9e8ycp] {
    width: 280px;
    height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow-y: auto;
    transition: transform 0.3s ease, width 0.3s ease;
    /* Fix scrollbar issue */
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) rgba(15, 23, 42, 0.3);
}

/* Sidebar scrollbar styling */
.sidebar[b-r3oa9e8ycp]::-webkit-scrollbar {
    width: 5px;
}

.sidebar[b-r3oa9e8ycp]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar[b-r3oa9e8ycp]::-webkit-scrollbar-thumb {
    background-color: rgba(99, 102, 241, 0.3);
    border-radius: 3px;
}

/* Sidebar styling */
.sidebar-top[b-r3oa9e8ycp] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sidebar-logo[b-r3oa9e8ycp] {
    padding: 24px 24px 16px 24px;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
}

.sidebar-profile[b-r3oa9e8ycp] {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-img[b-r3oa9e8ycp] {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    border-radius: 50%;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Wallet card */
.sidebar-wallet[b-r3oa9e8ycp] {
    margin: 16px 24px;
    padding: 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
}

.sidebar-wallet-title[b-r3oa9e8ycp] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.sidebar-wallet-balance[b-r3oa9e8ycp] {
    font-family: 'Space Grotesk', monospace;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

.menu-section[b-r3oa9e8ycp] {
    padding: 16px 0;
}

.menu-header[b-r3oa9e8ycp] {
    padding: 8px 24px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.menu-icon[b-r3oa9e8ycp] {
    width: 20px;
    margin-right: 12px;
    text-align: center;
}

/* Dropdown menu */
.dropdown-content[b-r3oa9e8ycp] {
    display: none;
}

.dropdown-content.active[b-r3oa9e8ycp] {
    display: block;
}

.dropdown-item[b-r3oa9e8ycp] {
    padding: 8px 0 8px 24px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: all 0.2s ease;
    position: relative;
}

.dropdown-item:hover[b-r3oa9e8ycp] {
    color: #6366F1;
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item.active[b-r3oa9e8ycp] {
    color: #6366F1;
    background-color: rgba(79, 70, 229, 0.15);
    border-left: 3px solid #6366F1;
    font-weight: 500;
}

.dropdown-item.active[b-r3oa9e8ycp]:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6366F1;
}

/* Sidebar footer */
.sidebar-footer[b-r3oa9e8ycp] {
    margin-top: auto;
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Menu items */
.menu-item[b-r3oa9e8ycp] {
    padding: 10px 24px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.menu-item.active[b-r3oa9e8ycp] {
    background-color: rgba(79, 70, 229, 0.15);
    color: #6366F1;
    border-left-color: #6366F1;
}

.menu-item:hover[b-r3oa9e8ycp] {
    background-color: rgba(255, 255, 255, 0.05);
}
/* _content/WebUI/Components/Layout/Nav/ProviderNavMenu.razor.rz.scp.css */
/* Sidebar with fixed width */
.sidebar[b-64d7lb511w] {
    width: 280px;
    height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow-y: auto;
    transition: transform 0.3s ease, width 0.3s ease;
    /* Fix scrollbar issue */
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) rgba(15, 23, 42, 0.3);
}

/* Sidebar scrollbar styling */
.sidebar[b-64d7lb511w]::-webkit-scrollbar {
    width: 5px;
}

.sidebar[b-64d7lb511w]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar[b-64d7lb511w]::-webkit-scrollbar-thumb {
    background-color: rgba(99, 102, 241, 0.3);
    border-radius: 3px;
}

/* Sidebar wallet */
.sidebar-wallet[b-64d7lb511w] {
    margin: 16px 24px;
    padding: 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
}

.sidebar-wallet-title[b-64d7lb511w] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.sidebar-wallet-balance[b-64d7lb511w] {
    font-family: 'Space Grotesk', monospace;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Menu section styling */
.menu-section[b-64d7lb511w] {
    padding: 16px 0;
}

.menu-header[b-64d7lb511w] {
    padding: 8px 24px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.menu-icon[b-64d7lb511w] {
    width: 20px;
    margin-right: 12px;
    text-align: center;
}

/* Dropdown menu */
.dropdown-content[b-64d7lb511w] {
    display: none;
}

.dropdown-content.active[b-64d7lb511w] {
    display: block;
}

.dropdown-item[b-64d7lb511w] {
    padding: 8px 0 8px 24px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: all 0.2s ease;
    position: relative;
}

.dropdown-item:hover[b-64d7lb511w] {
    color: #6366F1;
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item.active[b-64d7lb511w] {
    color: #6366F1;
    background-color: rgba(79, 70, 229, 0.15);
    border-left: 3px solid #6366F1;
    font-weight: 500;
}

.dropdown-item.active[b-64d7lb511w]:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6366F1;
}

/* Sidebar footer */
.sidebar-footer[b-64d7lb511w] {
    margin-top: auto;
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Menu items */
.menu-item[b-64d7lb511w] {
    padding: 10px 24px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.menu-item.active[b-64d7lb511w] {
    background-color: rgba(79, 70, 229, 0.15);
    color: #6366F1;
    border-left-color: #6366F1;
}

.menu-item:hover[b-64d7lb511w] {
    background-color: rgba(255, 255, 255, 0.05);
}
/* _content/WebUI/Components/Layout/PendingLayout.razor.rz.scp.css */
/* Dashboard layout */
.dashboard-layout[b-b4fyy7592o] {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Mobile sidebar toggle button */
.mobile-sidebar-toggle[b-b4fyy7592o] {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 18px;
    display: none; /* Hidden by default on desktop */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
}

.mobile-sidebar-toggle:hover[b-b4fyy7592o] {
    background: rgba(99, 102, 241, 0.3);
}

/* Sidebar container */
.sidebar-container[b-b4fyy7592o] {
    height: 100%;
    z-index: 20;
}

/* Sidebar overlay for mobile */
.sidebar-overlay[b-b4fyy7592o] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Main content area */
.main-content[b-b4fyy7592o] {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 32px;
    background-color: transparent;
    position: relative;
    transition: margin-left 0.3s ease;
}

/* Mobile responsiveness */
@media (max-width: 992px) {
    /* Show mobile toggle button */
    .mobile-sidebar-toggle[b-b4fyy7592o] {
        display: flex;
    }
    
    /* Mobile sidebar layout adjustments */
    .sidebar-container[b-b4fyy7592o] {
        position: fixed;
        width: 0; /* Completely hide sidebar by default */
        overflow: hidden;
    }
    
    /* Hide sidebar by default on mobile */
    .sidebar-container[b-b4fyy7592o]  .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        width: 280px; /* Fixed width when open */
    }
    
    /* Show sidebar when opened */
    .sidebar-container.sidebar-open[b-b4fyy7592o] {
        width: 100%; /* Make container take full width for overlay */
    }
    
    .sidebar-container.sidebar-open[b-b4fyy7592o]  .sidebar {
        transform: translateX(0);
    }
    
    /* Show overlay when sidebar is open */
    .sidebar-container.sidebar-open .sidebar-overlay[b-b4fyy7592o] {
        opacity: 1;
        pointer-events: all;
    }
    
    /* Main content should take full width when sidebar is hidden */
    .main-content[b-b4fyy7592o] {
        margin-left: 0;
        padding-left: 20px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .main-content[b-b4fyy7592o] {
        padding: 16px;
    }
}

/* Global error display */
#blazor-error-ui[b-b4fyy7592o] {
    background: rgba(239, 68, 68, 0.8);
    bottom: 0;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
    text-align: center;
}

#blazor-error-ui .dismiss[b-b4fyy7592o] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* User approval notification */
.approval-notification[b-b4fyy7592o] {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.8) 0%, rgba(217, 119, 6, 0.8) 100%);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 16px;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 4px solid rgb(245, 158, 11);
}

.notification-content[b-b4fyy7592o] {
    display: flex;
    align-items: center;
    color: white;
    font-weight: 500;
}

.notification-content i[b-b4fyy7592o] {
    font-size: 24px;
    margin-right: 12px;
    color: white;
}

@media (max-width: 768px) {
    .approval-notification[b-b4fyy7592o] {
        margin-bottom: 16px;
        padding: 12px;
    }
    
    .notification-content i[b-b4fyy7592o] {
        font-size: 20px;
        margin-right: 8px;
    }
}
/* _content/WebUI/Components/Layout/PlatformLayout.razor.rz.scp.css */
/* Dashboard layout */
.dashboard-layout[b-jh0tzaahkq] {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Mobile sidebar toggle button */
.mobile-sidebar-toggle[b-jh0tzaahkq] {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 18px;
    display: none; /* Hidden by default on desktop */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
}

.mobile-sidebar-toggle:hover[b-jh0tzaahkq] {
    background: rgba(99, 102, 241, 0.3);
}

/* Sidebar container */
.sidebar-container[b-jh0tzaahkq] {
    height: 100%;
    z-index: 20;
}

/* Sidebar overlay for mobile */
.sidebar-overlay[b-jh0tzaahkq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Main content area */
.main-content[b-jh0tzaahkq] {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 32px;
    background-color: transparent;
    position: relative;
    transition: margin-left 0.3s ease;
}

/* Mobile responsiveness */
@media (max-width: 992px) {
    /* Show mobile toggle button */
    .mobile-sidebar-toggle[b-jh0tzaahkq] {
        display: flex;
    }
    
    /* Mobile sidebar layout adjustments */
    .sidebar-container[b-jh0tzaahkq] {
        position: fixed;
        width: 0; /* Completely hide sidebar by default */
        overflow: hidden;
    }
    
    /* Hide sidebar by default on mobile */
    .sidebar-container[b-jh0tzaahkq]  .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        width: 280px; /* Fixed width when open */
    }
    
    /* Show sidebar when opened */
    .sidebar-container.sidebar-open[b-jh0tzaahkq] {
        width: 100%; /* Make container take full width for overlay */
    }
    
    .sidebar-container.sidebar-open[b-jh0tzaahkq]  .sidebar {
        transform: translateX(0);
    }
    
    /* Show overlay when sidebar is open */
    .sidebar-container.sidebar-open .sidebar-overlay[b-jh0tzaahkq] {
        opacity: 1;
        pointer-events: all;
    }
    
    /* Main content should take full width when sidebar is hidden */
    .main-content[b-jh0tzaahkq] {
        margin-left: 0;
        padding-left: 20px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .main-content[b-jh0tzaahkq] {
        padding: 16px;
    }
}

/* Global error display */
#blazor-error-ui[b-jh0tzaahkq] {
    background: rgba(239, 68, 68, 0.8);
    bottom: 0;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: white;
    text-align: center;
}

#blazor-error-ui .dismiss[b-jh0tzaahkq] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* User approval notification */
.approval-notification[b-jh0tzaahkq] {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.8) 0%, rgba(217, 119, 6, 0.8) 100%);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 16px;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-left: 4px solid rgb(245, 158, 11);
}

.notification-content[b-jh0tzaahkq] {
    display: flex;
    align-items: center;
    color: white;
    font-weight: 500;
}

.notification-content i[b-jh0tzaahkq] {
    font-size: 24px;
    margin-right: 12px;
    color: white;
}

@media (max-width: 768px) {
    .approval-notification[b-jh0tzaahkq] {
        margin-bottom: 16px;
        padding: 12px;
    }
    
    .notification-content i[b-jh0tzaahkq] {
        font-size: 20px;
        margin-right: 8px;
    }
}
/* _content/WebUI/Components/Pages/CustomerView/AppMarketplace.razor.rz.scp.css */
.app-marketplace-header[b-rfyj0czb30] {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20px;
    position: relative;
}

.marketplace-title[b-rfyj0czb30] {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0 0 12px 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 240, 255, 0.5);
}

.header-description[b-rfyj0czb30] {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    letter-spacing: 0;
}


/* Container styling */
.container-fluid[b-rfyj0czb30] {
    padding: 0 1.5rem;
}

/* Main content area */
.row[b-rfyj0czb30] {
    margin: 0 -0.75rem;
}

.col-lg-3[b-rfyj0czb30],
.col-lg-9[b-rfyj0czb30] {
    padding: 0 0.75rem;
}

/* Loading spinner */
.spinner-border[b-rfyj0czb30] {
    color: #6366F1;
    width: 3rem;
    height: 3rem;
}

/* Responsive adjustments for header */
@media (max-width: 768px) {
    .marketplace-title[b-rfyj0czb30] {
        font-size: 28px;
    }
    
    .header-description[b-rfyj0czb30] {
        font-size: 14px;
    }
    
    .app-marketplace-header[b-rfyj0czb30] {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {
    .marketplace-title[b-rfyj0czb30] {
        font-size: 24px;
    }
    
    .header-description[b-rfyj0czb30] {
        font-size: 13px;
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .col-lg-3[b-rfyj0czb30] {
        margin-bottom: 1.5rem;
    }
}
/* _content/WebUI/Components/Pages/CustomerView/ComputeMarketplace.razor.rz.scp.css */
/* Header styling is now handled by StandardPageHeader component */

/* Main content grid */
.content-grid[b-kttrvb68ky] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .content-grid[b-kttrvb68ky] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .user-avatar-section[b-kttrvb68ky] {
        top: 12px;
        right: 16px; /* Return to original position on smaller screens where buttons stack */
    }
}

@media (max-width: 768px) {
    .content-grid[b-kttrvb68ky] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .user-avatar-section[b-kttrvb68ky] {
        top: 0px; /* Move to top on mobile */
    }
}
/* _content/WebUI/Components/Pages/CustomerView/Dashboard.razor.rz.scp.css */
/* Dashboard styles */
.main-content[b-pkogzuhj2l] {
    padding-bottom: 60px;
}

/* Full width container */
.container[b-pkogzuhj2l] {
    width: 100%;
}

/* Orbs for visual effects */
.orb[b-pkogzuhj2l] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.1;
}

.orb-primary[b-pkogzuhj2l] {
    top: 10%;
    right: 10%;
    width: 300px;
    height: 300px;
    background-color: var(--primary);
}

.orb-secondary[b-pkogzuhj2l] {
    bottom: 20%;
    left: 10%;
    width: 250px;
    height: 250px;
    background-color: var(--secondary);
}

.orb-tertiary[b-pkogzuhj2l] {
    top: 50%;
    left: 40%;
    width: 200px;
    height: 200px;
    background-color: var(--tertiary);
}

/* Page header styling has been moved to PageHeader.razor.css */

/* Quick Actions */
.quick-actions-card[b-pkogzuhj2l] {
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.flex-between[b-pkogzuhj2l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-buttons[b-pkogzuhj2l] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Stats Cards */
.stats-grid[b-pkogzuhj2l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
    width: 100%;
}

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

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

.stats-card[b-pkogzuhj2l] {
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.stats-card:hover[b-pkogzuhj2l] {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.stats-icon[b-pkogzuhj2l] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.stats-icon.primary[b-pkogzuhj2l] {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.stats-icon.secondary[b-pkogzuhj2l] {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.stats-icon.tertiary[b-pkogzuhj2l] {
    background-color: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.stats-icon.warning[b-pkogzuhj2l] {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.text-up[b-pkogzuhj2l] {
    color: var(--secondary);
}

.text-down[b-pkogzuhj2l] {
    color: var(--danger);
}

/* Dashboard Cards Layout */
.two-column-grid[b-pkogzuhj2l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-card[b-pkogzuhj2l] {
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.subtitle[b-pkogzuhj2l] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.text-link[b-pkogzuhj2l] {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.text-link:hover[b-pkogzuhj2l] {
    text-decoration: underline;
}

/* Filters */
.filter-chip[b-pkogzuhj2l] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover[b-pkogzuhj2l] {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

.filter-chip.active[b-pkogzuhj2l] {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--primary);
}

.filter-chip i[b-pkogzuhj2l] {
    margin-right: 8px;
}

/* Resource Cards */
.resources-grid[b-pkogzuhj2l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.resource-card[b-pkogzuhj2l] {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.resource-card:hover[b-pkogzuhj2l] {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.resource-icon[b-pkogzuhj2l] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 12px;
}

.resource-icon.gpu[b-pkogzuhj2l] {
    background-color: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.resource-icon.cpu[b-pkogzuhj2l] {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.resource-icon.storage[b-pkogzuhj2l] {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.badge[b-pkogzuhj2l] {
    padding: 6px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

.badge-success[b-pkogzuhj2l] {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-warning[b-pkogzuhj2l] {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-danger[b-pkogzuhj2l] {
    background-color: rgba(236, 72, 153, 0.1);
    color: var(--danger);
    border: 1px solid rgba(236, 72, 153, 0.2);
}

.badge-neutral[b-pkogzuhj2l] {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-container[b-pkogzuhj2l] {
    height: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-bar[b-pkogzuhj2l] {
    height: 100%;
    background: linear-gradient(to right, var(--secondary), var(--primary));
    border-radius: 3px;
}

.time-remaining[b-pkogzuhj2l] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
}

.time-remaining i[b-pkogzuhj2l] {
    margin-right: 6px;
    color: var(--warning);
}

/* Empty State */
.empty-state[b-pkogzuhj2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.empty-state p[b-pkogzuhj2l] {
    margin-bottom: 16px;
}

/* Wallet Card */
.wallet-card[b-pkogzuhj2l] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.balance-amount[b-pkogzuhj2l] {
    font-family: 'Space Grotesk', monospace;
    font-size: 32px;
    font-weight: 700;
    margin: 12px 0 20px 0;
}

.wallet-label[b-pkogzuhj2l] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* Chart Container */
.chart-container[b-pkogzuhj2l] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    height: 160px;
    margin-bottom: 20px;
    overflow: hidden;
}

.chart-placeholder[b-pkogzuhj2l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

.chart-placeholder i[b-pkogzuhj2l] {
    font-size: 24px;
    margin-bottom: 12px;
}

/* Applications */
.apps-grid[b-pkogzuhj2l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.app-card[b-pkogzuhj2l] {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.app-card:hover[b-pkogzuhj2l] {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.app-icon[b-pkogzuhj2l] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}

.app-icon.ai[b-pkogzuhj2l] {
    background-color: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.app-icon.data[b-pkogzuhj2l] {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.app-icon.render[b-pkogzuhj2l] {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.app-icon.dev[b-pkogzuhj2l] {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.tag[b-pkogzuhj2l] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 4px;
}

.tag-ai[b-pkogzuhj2l] {
    background-color: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.tag-ml[b-pkogzuhj2l] {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.tag-gpu[b-pkogzuhj2l] {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.tag-cpu[b-pkogzuhj2l] {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

/* Text styles */
.text-muted[b-pkogzuhj2l] {
    color: rgba(255, 255, 255, 0.5);
}

.text-muted-60[b-pkogzuhj2l] {
    color: rgba(255, 255, 255, 0.6);
}

.text-muted-70[b-pkogzuhj2l] {
    color: rgba(255, 255, 255, 0.7);
}

.text-muted-80[b-pkogzuhj2l] {
    color: rgba(255, 255, 255, 0.8);
}

/* Font sizes */
.font-size-11[b-pkogzuhj2l] {
    font-size: 11px;
}

.font-size-12[b-pkogzuhj2l] {
    font-size: 12px;
}

.font-size-13[b-pkogzuhj2l] {
    font-size: 13px;
}

.font-size-14[b-pkogzuhj2l] {
    font-size: 14px;
}

.font-size-16[b-pkogzuhj2l] {
    font-size: 16px;
}

.font-size-18[b-pkogzuhj2l] {
    font-size: 18px;
}

.font-size-20[b-pkogzuhj2l] {
    font-size: 20px;
}

.font-size-24[b-pkogzuhj2l] {
    font-size: 24px;
}

.font-size-32[b-pkogzuhj2l] {
    font-size: 32px;
}

/* Font weights */
.font-weight-500[b-pkogzuhj2l] {
    font-weight: 500;
}

.font-weight-600[b-pkogzuhj2l] {
    font-weight: 600;
}

.font-weight-700[b-pkogzuhj2l] {
    font-weight: 700;
}

.font-weight-bold[b-pkogzuhj2l] {
    font-weight: bold;
}

/* Spacing utilities */
.mb-4[b-pkogzuhj2l] {
    margin-bottom: 4px;
}

.mb-5[b-pkogzuhj2l] {
    margin-bottom: 5px;
}

.mb-8[b-pkogzuhj2l] {
    margin-bottom: 8px;
}

.mb-10[b-pkogzuhj2l] {
    margin-bottom: 10px;
}

.mb-12[b-pkogzuhj2l] {
    margin-bottom: 12px;
}

.mb-16[b-pkogzuhj2l] {
    margin-bottom: 16px;
}

.mb-20[b-pkogzuhj2l] {
    margin-bottom: 20px;
}

.mb-24[b-pkogzuhj2l] {
    margin-bottom: 24px;
}

.mt-4[b-pkogzuhj2l] {
    margin-top: 4px;
}

.mt-8[b-pkogzuhj2l] {
    margin-top: 8px;
}

.mt-12[b-pkogzuhj2l] {
    margin-top: 12px;
}

.mt-16[b-pkogzuhj2l] {
    margin-top: 16px;
}

.mt-20[b-pkogzuhj2l] {
    margin-top: 20px;
}

.mt-24[b-pkogzuhj2l] {
    margin-top: 24px;
}

.ml-4[b-pkogzuhj2l] {
    margin-left: 4px;
}

.ml-8[b-pkogzuhj2l] {
    margin-left: 8px;
}

.ml-12[b-pkogzuhj2l] {
    margin-left: 12px;
}

.ml-20[b-pkogzuhj2l] {
    margin-left: 20px;
}

.mr-8[b-pkogzuhj2l] {
    margin-right: 8px;
}

.mr-12[b-pkogzuhj2l] {
    margin-right: 12px;
}

.mr-16[b-pkogzuhj2l] {
    margin-right: 16px;
}

/* Padding utilities */
.p-10[b-pkogzuhj2l] {
    padding: 10px;
}

.p-12[b-pkogzuhj2l] {
    padding: 12px;
}

.p-16[b-pkogzuhj2l] {
    padding: 16px;
}

.py-12[b-pkogzuhj2l] {
    padding-top: 12px;
    padding-bottom: 12px;
}

.px-4[b-pkogzuhj2l] {
    padding-left: 4px;
    padding-right: 4px;
}

.px-8[b-pkogzuhj2l] {
    padding-left: 8px;
    padding-right: 8px;
}

/* Display utilities */
.d-flex[b-pkogzuhj2l] {
    display: flex;
}

.d-block[b-pkogzuhj2l] {
    display: block;
}

.d-none[b-pkogzuhj2l] {
    display: none !important;
}

.flex-grow-1[b-pkogzuhj2l] {
    flex-grow: 1;
}

.flex-shrink-0[b-pkogzuhj2l] {
    flex-shrink: 0;
}

.flex-1[b-pkogzuhj2l] {
    flex: 1;
}

.flex-gap-8[b-pkogzuhj2l] {
    display: flex;
    gap: 8px;
}

.text-center[b-pkogzuhj2l] {
    text-align: center;
}

.align-items-center[b-pkogzuhj2l] {
    align-items: center;
}

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

/* Width utilities */
.w-50[b-pkogzuhj2l] {
    width: 50%;
}

.w-100[b-pkogzuhj2l] {
    width: 100%;
}

/* Stats card specific styles */
.stats-label[b-pkogzuhj2l] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-bottom: 5px;
}

.stats-value[b-pkogzuhj2l] {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.stats-change[b-pkogzuhj2l] {
    font-size: 14px;
}

.stats-change-label[b-pkogzuhj2l] {
    color: rgba(255, 255, 255, 0.5);
    margin-left: 4px;
}

/* Quick actions specific */
.quick-actions-header[b-pkogzuhj2l] {
    font-size: 16px;
    font-weight: 600;
}

.quick-actions-subtitle[b-pkogzuhj2l] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Resource card specific styles */
.resource-name[b-pkogzuhj2l] {
    font-weight: 600;
    margin-bottom: 4px;
}

.resource-details[b-pkogzuhj2l] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.resource-hardware[b-pkogzuhj2l] {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.resource-actions[b-pkogzuhj2l] {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

/* Activity list styles */
.activity-item[b-pkogzuhj2l] {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-icon-wrapper[b-pkogzuhj2l] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

.activity-content[b-pkogzuhj2l] {
    flex-grow: 1;
}

.activity-title[b-pkogzuhj2l] {
    font-weight: 500;
}

.activity-description[b-pkogzuhj2l] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.activity-time[b-pkogzuhj2l] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* Support ticket styles */
.ticket-card[b-pkogzuhj2l] {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.ticket-header[b-pkogzuhj2l] {
    font-weight: 600;
}

.ticket-message[b-pkogzuhj2l] {
    margin-bottom: 8px;
}

.ticket-info[b-pkogzuhj2l] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.ticket-action[b-pkogzuhj2l] {
    margin-top: 12px;
}

/* Help section styles */
.help-section-header[b-pkogzuhj2l] {
    font-weight: 600;
    font-size: 16px;
}

.help-card[b-pkogzuhj2l] {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.1);
    padding: 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.help-card-icon[b-pkogzuhj2l] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.help-card-title[b-pkogzuhj2l] {
    font-weight: 600;
    margin-bottom: 4px;
}

.help-card-description[b-pkogzuhj2l] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* Modal styles */
.modal-backdrop[b-pkogzuhj2l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 24px;
}

.modal-content[b-pkogzuhj2l] {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.modal-content-large[b-pkogzuhj2l] {
    max-width: 700px;
}

.modal-header[b-pkogzuhj2l] {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-pkogzuhj2l] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.modal-close-btn[b-pkogzuhj2l] {
    background: none;
    border: none;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.modal-body[b-pkogzuhj2l] {
    padding: 16px;
}

.modal-footer[b-pkogzuhj2l] {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
}

/* Details section styles */
.details-section[b-pkogzuhj2l] {
    margin-bottom: 20px;
}

.details-section-title[b-pkogzuhj2l] {
    margin-bottom: 10px;
    font-size: 16px;
}

.details-row[b-pkogzuhj2l] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.details-label[b-pkogzuhj2l] {
    font-weight: 500;
}

.details-value[b-pkogzuhj2l] {
    display: flex;
    align-items: center;
}

/* SSH command styles */
.ssh-command-wrapper[b-pkogzuhj2l] {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 4px;
    font-family: monospace;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Hardware details box */
.hardware-details-box[b-pkogzuhj2l] {
    background: rgba(0, 0, 0, 0.2);
    padding: 16px;
    border-radius: 8px;
}

/* Notes list */
.notes-list[b-pkogzuhj2l] {
    margin-left: 20px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

/* Status pill */
.status-pill[b-pkogzuhj2l] {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.status-running[b-pkogzuhj2l] {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-stopped[b-pkogzuhj2l] {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-pending[b-pkogzuhj2l] {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Empty state icon */
.empty-state-icon[b-pkogzuhj2l] {
    font-size: 24px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Wallet label */
.wallet-label[b-pkogzuhj2l] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* Benson AI Assistant */
.benson-container[b-pkogzuhj2l] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

.benson-avatar[b-pkogzuhj2l] {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.benson-avatar:hover[b-pkogzuhj2l] {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.chat-tooltip[b-pkogzuhj2l] {
    position: absolute;
    right: 72px;
    bottom: 0;
    width: 200px;
    background-color: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.chat-tooltip[b-pkogzuhj2l]:after {
    content: '';
    position: absolute;
    right: -12px;
    bottom: 22px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(15, 23, 42, 0.9);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .two-column-grid[b-pkogzuhj2l] {
        grid-template-columns: 1fr;
    }
    
    .stats-grid[b-pkogzuhj2l] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid[b-pkogzuhj2l] {
        grid-template-columns: 1fr;
    }
    
    .resources-grid[b-pkogzuhj2l] {
        grid-template-columns: 1fr;
    }
    
    .apps-grid[b-pkogzuhj2l] {
        grid-template-columns: 1fr;
    }
    
    .action-buttons[b-pkogzuhj2l] {
        flex-direction: column;
    }
}
/* _content/WebUI/Components/Pages/CustomerView/HelpCenter.razor.rz.scp.css */
/* Note: Base styles, Background components, and Layout components are now imported from platform.css */
/* Consumer-specific components are imported from consumer.css */

/* ======================================
 * HELP CENTER SPECIFIC COMPONENTS
 * ======================================
 */

/* Hero section */
.hero-section[b-snmrg67ets] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-content[b-snmrg67ets] {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.hero-title[b-snmrg67ets] {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.hero-description[b-snmrg67ets] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 24px;
    line-height: 1.6;
}

.hero-cta[b-snmrg67ets] {
    display: flex;
    gap: 12px;
}

.hero-background[b-snmrg67ets] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1));
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 1;
}

/* Help Center specific search bar */
.search-container[b-snmrg67ets] {
    position: relative;
    margin-bottom: 32px;
}

.search-input[b-snmrg67ets] {
    width: 100%;
    padding: 16px 16px 16px 56px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
}

.search-input:focus[b-snmrg67ets] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.search-icon[b-snmrg67ets] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
}

/* Category grid */
.category-grid[b-snmrg67ets] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

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

@media (max-width: 768px) {
    .category-grid[b-snmrg67ets] {
        grid-template-columns: 1fr;
    }
}

.category-card[b-snmrg67ets] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.category-card:hover[b-snmrg67ets] {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.category-icon[b-snmrg67ets] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.category-icon.infrastructure[b-snmrg67ets] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.category-icon.billing[b-snmrg67ets] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.category-icon.applications[b-snmrg67ets] {
    background: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.category-icon.security[b-snmrg67ets] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.category-icon.api[b-snmrg67ets] {
    background: rgba(56, 189, 248, 0.1);
    color: #38BDF8;
}

.category-icon.faq[b-snmrg67ets] {
    background: rgba(168, 85, 247, 0.1);
    color: #A855F7;
}

.category-title[b-snmrg67ets] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.category-description[b-snmrg67ets] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    flex-grow: 1;
}

.category-topics[b-snmrg67ets] {
    list-style-type: none;
    margin-top: 8px;
}

.category-topics li[b-snmrg67ets] {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.category-topics li[b-snmrg67ets]:before {
    content: "•";
    color: var(--primary);
    font-weight: bold;
    margin-right: 8px;
}

.category-topics a[b-snmrg67ets] {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
}

.category-topics a:hover[b-snmrg67ets] {
    color: var(--primary);
}

.view-all-link[b-snmrg67ets] {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.view-all-link:hover[b-snmrg67ets] {
    text-decoration: underline;
}

.view-all-link i[b-snmrg67ets] {
    margin-left: 4px;
    font-size: 12px;
}

/* Two-column layout */
.two-column-layout[b-snmrg67ets] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}

@media (max-width: 992px) {
    .two-column-layout[b-snmrg67ets] {
        grid-template-columns: 1fr;
    }
}

/* Article cards */
.articles-container[b-snmrg67ets] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article-card[b-snmrg67ets] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.article-card:hover[b-snmrg67ets] {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.2);
}

.article-meta[b-snmrg67ets] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.article-category[b-snmrg67ets] {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    font-weight: 500;
}

.article-date[b-snmrg67ets] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.article-title[b-snmrg67ets] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.4;
}

.article-excerpt[b-snmrg67ets] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    line-height: 1.6;
}

.article-footer[b-snmrg67ets] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.article-stats[b-snmrg67ets] {
    display: flex;
    gap: 16px;
}

.article-stats span[b-snmrg67ets] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.article-read-more[b-snmrg67ets] {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.article-read-more:hover[b-snmrg67ets] {
    text-decoration: underline;
}

/* Sidebar components */
.sidebar-card[b-snmrg67ets] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 24px;
}

.sidebar-card-title[b-snmrg67ets] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-card-title a[b-snmrg67ets] {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
}

.sidebar-card-title a:hover[b-snmrg67ets] {
    text-decoration: underline;
}

/* Popular articles */
.popular-articles[b-snmrg67ets] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.popular-article[b-snmrg67ets] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.popular-article-number[b-snmrg67ets] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.popular-article-content[b-snmrg67ets] {
    flex-grow: 1;
}

.popular-article-title[b-snmrg67ets] {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 1.4;
}

.popular-article-title a[b-snmrg67ets] {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.2s ease;
}

.popular-article-title a:hover[b-snmrg67ets] {
    color: var(--primary);
}

.popular-article-meta[b-snmrg67ets] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Help Center specific tags */
.tags-list[b-snmrg67ets] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag[b-snmrg67ets] {
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tag:hover[b-snmrg67ets] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

/* Contact card */
.contact-options[b-snmrg67ets] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-option[b-snmrg67ets] {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.contact-option:hover[b-snmrg67ets] {
    background: rgba(255, 255, 255, 0.08);
}

.contact-icon[b-snmrg67ets] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.contact-icon.chat[b-snmrg67ets] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.contact-icon.ticket[b-snmrg67ets] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.contact-icon.email[b-snmrg67ets] {
    background: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.contact-content[b-snmrg67ets] {
    flex-grow: 1;
}

.contact-title[b-snmrg67ets] {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.contact-description[b-snmrg67ets] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Video tutorials */
.video-tutorials[b-snmrg67ets] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 992px) {
    .video-tutorials[b-snmrg67ets] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .video-tutorials[b-snmrg67ets] {
        grid-template-columns: 1fr;
    }
}

.video-card[b-snmrg67ets] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.video-card:hover[b-snmrg67ets] {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.video-thumbnail[b-snmrg67ets] {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: #1A2234;
    overflow: hidden;
}

.play-icon[b-snmrg67ets] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    transition: all 0.2s ease;
}

.video-card:hover .play-icon[b-snmrg67ets] {
    background: var(--primary);
}

.video-duration[b-snmrg67ets] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 12px;
}

.video-info[b-snmrg67ets] {
    padding: 16px;
}

.video-title[b-snmrg67ets] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.video-meta[b-snmrg67ets] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.video-views[b-snmrg67ets] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Section header */
.section-header[b-snmrg67ets] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.section-title[b-snmrg67ets] {
    font-size: 20px;
    font-weight: 600;
}

.view-all[b-snmrg67ets] {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.view-all:hover[b-snmrg67ets] {
    text-decoration: underline;
}

/* Bottom spacer */
.bottom-spacer[b-snmrg67ets] {
    height: 100px;
    margin-bottom: 40px;
}

/* Badge with left margin auto */
.badge[b-snmrg67ets] {
    margin-left: auto;
}
/* _content/WebUI/Components/Pages/CustomerView/InstanceDetails.razor.rz.scp.css */
.instance-details-page[b-2nmyz6lcl4] {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-2nmyz6lcl4] {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.header-content[b-2nmyz6lcl4] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.header-content h1[b-2nmyz6lcl4] {
    margin: 0;
    flex: 1;
    font-size: 28px;
    color: var(--text-primary);
}

.instance-status-badge[b-2nmyz6lcl4] {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.instance-status-badge i[b-2nmyz6lcl4] {
    font-size: 16px;
}

.status-running[b-2nmyz6lcl4] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-stopped[b-2nmyz6lcl4] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.status-creating[b-2nmyz6lcl4] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.status-error[b-2nmyz6lcl4],
.status-failed[b-2nmyz6lcl4] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Deployment Status */
.deployment-status[b-2nmyz6lcl4] {
    margin-bottom: 30px;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    overflow: hidden;
    animation: pulse-b-2nmyz6lcl4 2s infinite;
}

.deployment-status .card-header[b-2nmyz6lcl4] {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.deployment-status .card-header:hover[b-2nmyz6lcl4] {
    background: rgba(255, 255, 255, 0.05);
}

.deployment-status .card-header h3[b-2nmyz6lcl4] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #F8FAFC;
    text-align: center;
    flex: 1;
}

.expand-toggle[b-2nmyz6lcl4] {
    background: none;
    border: none;
    color: #F8FAFC;
    font-size: 16px;
    padding: 4px 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.deployment-status.collapsed .expand-toggle i[b-2nmyz6lcl4] {
    transform: rotate(0deg);
}

.deployment-status.expanded .expand-toggle i[b-2nmyz6lcl4] {
    transform: rotate(180deg);
}

/* Completed deployment style */
.deployment-status.collapsed[b-2nmyz6lcl4] {
    animation: none;
    border-color: rgba(16, 185, 129, 0.3);
}

.deployment-status.collapsed .card-header[b-2nmyz6lcl4] {
    border-bottom: none;
}

/* Card body animation */
.deployment-status .card-body[b-2nmyz6lcl4] {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.deployment-status .card-body.collapsed[b-2nmyz6lcl4] {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.deployment-status .card-body.expanded[b-2nmyz6lcl4] {
    opacity: 1;
}

@keyframes pulse-b-2nmyz6lcl4 {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.progress-container[b-2nmyz6lcl4] {
    margin-bottom: 30px;
}

.progress[b-2nmyz6lcl4] {
    height: 30px;
    background: #e5e7eb;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
}

.progress-bar[b-2nmyz6lcl4] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    transition: width 0.5s ease;
}

.progress-message[b-2nmyz6lcl4] {
    text-align: center;
    color: #6b7280;
    font-size: 16px;
    margin-top: 10px;
}

.deployment-steps[b-2nmyz6lcl4] {
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.deployment-steps h4[b-2nmyz6lcl4] {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #F8FAFC;
}

.step-list[b-2nmyz6lcl4] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-item[b-2nmyz6lcl4] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 12px;
    margin: 0 -12px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.step-item:hover[b-2nmyz6lcl4] {
    background: rgba(255, 255, 255, 0.03);
}

.step-item.completed[b-2nmyz6lcl4] {
    color: #10b981;
}

.step-item.active[b-2nmyz6lcl4] {
    color: #6366F1;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.step-item.pending[b-2nmyz6lcl4] {
    color: #9ca3af;
}

.step-icon[b-2nmyz6lcl4] {
    width: 24px;
    text-align: center;
}

.step-text[b-2nmyz6lcl4] {
    flex: 1;
    font-size: 14px;
}

.step-message[b-2nmyz6lcl4] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 400;
}

/* Info Grid */
.instance-info-grid[b-2nmyz6lcl4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.info-card[b-2nmyz6lcl4] {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.info-card:hover[b-2nmyz6lcl4] {
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.info-card .card-header[b-2nmyz6lcl4] {
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-card .card-header h3[b-2nmyz6lcl4] {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-card .card-body[b-2nmyz6lcl4] {
    padding: 20px;
}

.info-row[b-2nmyz6lcl4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-row:last-child[b-2nmyz6lcl4] {
    border-bottom: none;
}

.info-row label[b-2nmyz6lcl4] {
    font-weight: 600;
    color: var(--text-secondary);
}

.info-row span[b-2nmyz6lcl4] {
    color: var(--text-primary);
}

.font-mono[b-2nmyz6lcl4] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
}

.status-badge[b-2nmyz6lcl4] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

/* Network & Access */
.endpoint-item[b-2nmyz6lcl4] {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.endpoint-item:last-child[b-2nmyz6lcl4] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.endpoint-item label[b-2nmyz6lcl4] {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.endpoint-url[b-2nmyz6lcl4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.endpoint-url a[b-2nmyz6lcl4] {
    flex: 1;
    color: #3b82f6;
    text-decoration: none;
    word-break: break-all;
}

.endpoint-url a:hover[b-2nmyz6lcl4] {
    text-decoration: underline;
}

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

.action-buttons .btn[b-2nmyz6lcl4] {
    flex: 1;
    min-width: 120px;
}

/* Metrics Section */
.metrics-section[b-2nmyz6lcl4] {
    margin-top: 30px;
}

.metrics-section h3[b-2nmyz6lcl4] {
    margin-bottom: 20px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.metrics-grid[b-2nmyz6lcl4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.metric-card[b-2nmyz6lcl4] {
    background: var(--surface);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.metric-card label[b-2nmyz6lcl4] {
    display: block;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-weight: 600;
}

.metric-value[b-2nmyz6lcl4] {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.metric-bar[b-2nmyz6lcl4] {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.metric-fill[b-2nmyz6lcl4] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width 0.5s ease;
}

/* Modal */
.modal-backdrop[b-2nmyz6lcl4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-2nmyz6lcl4 0.2s ease-out;
}

@keyframes fadeIn-b-2nmyz6lcl4 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-dialog[b-2nmyz6lcl4] {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    animation: slideIn-b-2nmyz6lcl4 0.3s ease-out;
}

@keyframes slideIn-b-2nmyz6lcl4 {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-2nmyz6lcl4] {
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-title[b-2nmyz6lcl4] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #F8FAFC;
}

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

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

/* Loading */
.loading-container[b-2nmyz6lcl4] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* SSH Modal Styles */
.ssh-modal[b-2nmyz6lcl4] {
    max-width: 800px;
}

.ssh-modal .modal-header[b-2nmyz6lcl4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ssh-modal .modal-body[b-2nmyz6lcl4] {
    padding: 0;
}

.modal-close[b-2nmyz6lcl4] {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.modal-close:hover[b-2nmyz6lcl4] {
    color: #F8FAFC;
}

.ssh-content[b-2nmyz6lcl4] {
    padding: 24px;
}

.ssh-content h4[b-2nmyz6lcl4] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #F8FAFC;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssh-content h4 i[b-2nmyz6lcl4] {
    color: #6366F1;
}

.ssh-content p[b-2nmyz6lcl4] {
    color: #94A3B8;
    margin-bottom: 20px;
    font-size: 14px;
}

.ssh-command[b-2nmyz6lcl4] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    margin-bottom: 16px;
}

.ssh-command code[b-2nmyz6lcl4] {
    display: block;
    font-family: 'Space Grotesk', monospace;
    font-size: 13px;
    color: #10b981;
    word-break: break-all;
    white-space: pre-wrap;
    padding-right: 40px; /* Space for copy button */
}

.ssh-command .btn[b-2nmyz6lcl4] {
    position: absolute;
    top: 12px;
    right: 12px;
}

.connection-details[b-2nmyz6lcl4] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.detail-item[b-2nmyz6lcl4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.detail-item:last-child[b-2nmyz6lcl4] {
    border-bottom: none;
}

.detail-label[b-2nmyz6lcl4] {
    font-size: 13px;
    color: #94A3B8;
    font-weight: 500;
}

.detail-value[b-2nmyz6lcl4] {
    font-family: 'Space Grotesk', monospace;
    font-size: 14px;
    color: #F8FAFC;
}

/* Modal button styles */
.modal-footer .btn[b-2nmyz6lcl4] {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-footer .btn-secondary[b-2nmyz6lcl4] {
    background: rgba(255, 255, 255, 0.03);
    color: #F8FAFC;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-footer .btn-secondary:hover[b-2nmyz6lcl4] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .instance-info-grid[b-2nmyz6lcl4] {
        grid-template-columns: 1fr;
    }
    
    .header-content[b-2nmyz6lcl4] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .action-buttons[b-2nmyz6lcl4] {
        flex-direction: column;
    }
    
    .action-buttons .btn[b-2nmyz6lcl4] {
        width: 100%;
    }
}
/* _content/WebUI/Components/Pages/CustomerView/Management/MyAccount.razor.rz.scp.css */
/* Profile container and header */
.profile-container[b-9taa2mmlox] {
    margin-bottom: 24px;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
}

.profile-header[b-9taa2mmlox] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-info[b-9taa2mmlox] {
    display: flex;
    flex-direction: column;
}

.profile-info h3[b-9taa2mmlox] {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--light);
}

.profile-info p[b-9taa2mmlox] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-actions[b-9taa2mmlox] {
    display: flex;
    gap: 12px;
}

/* Data table for keys */
.data-table[b-9taa2mmlox] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 32px;
    border-radius: 12px;
    overflow: hidden;
}

.data-table th[b-9taa2mmlox] {
    background-color: rgba(15, 23, 42, 0.8);
    text-align: left;
    padding: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-table tr:nth-child(odd) td[b-9taa2mmlox] {
    background-color: rgba(15, 23, 42, 0.4);
}

.data-table tr:nth-child(even) td[b-9taa2mmlox] {
    background-color: rgba(15, 23, 42, 0.2);
}

.data-table td[b-9taa2mmlox] {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--light);
}

/* Button styles */
.btn-primary[b-9taa2mmlox] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.btn-primary:hover[b-9taa2mmlox] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-primary.danger[b-9taa2mmlox] {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: white !important;
}

.btn-primary.danger:hover[b-9taa2mmlox] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Alert styling */
.alert-danger i[b-9taa2mmlox] {
    color: #ef4444;
    font-size: 20px;
}

.alert[b-9taa2mmlox] {
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.alert-danger[b-9taa2mmlox] {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fff;
}

.alert i[b-9taa2mmlox] {
    color: #ef4444;
    font-size: 20px;
}

.alert p[b-9taa2mmlox] {
    margin: 0;
}

.btn-secondary[b-9taa2mmlox] {
    background: linear-gradient(135deg, var(--secondary), #0d9668);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.icon-btn[b-9taa2mmlox] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
    cursor: pointer;
}

.icon-btn:hover[b-9taa2mmlox] {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.icon-btn.delete:hover[b-9taa2mmlox] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

/* Modal styles */
.modal-backdrop[b-9taa2mmlox] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-9taa2mmlox 0.2s ease-in-out;
}

@keyframes fadeIn-b-9taa2mmlox {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-9taa2mmlox] {
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    position: relative;
    padding: 24px;
    animation: slideIn-b-9taa2mmlox 0.3s ease-out;
}

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

.modal-header[b-9taa2mmlox] {
    margin-bottom: 24px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-9taa2mmlox] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.modal-close[b-9taa2mmlox] {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover[b-9taa2mmlox] {
    color: rgba(255, 255, 255, 0.9);
}

.modal-footer[b-9taa2mmlox] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

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

.form-group label[b-9taa2mmlox] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.input-field[b-9taa2mmlox] {
    width: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    color: white;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-field:focus[b-9taa2mmlox] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

textarea.input-field[b-9taa2mmlox] {
    min-height: 120px;
    resize: vertical;
}

/* Settings tab styles */
.settings-tab[b-9taa2mmlox] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-top: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-tab:hover[b-9taa2mmlox] {
    background-color: rgba(15, 23, 42, 0.6);
    transform: translateY(-2px);
}

.settings-tab.active[b-9taa2mmlox] {
    background-color: rgba(79, 70, 229, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.settings-tab-icon[b-9taa2mmlox] {
    margin-right: 12px;
    color: var(--primary);
}

/* Empty state */
.empty-state-row[b-9taa2mmlox] {
    width: 100%;
    display: table-row;
}

.empty-state[b-9taa2mmlox] {
    text-align: center;
    padding: 48px 0;
    color: rgba(255, 255, 255, 0.5);
    width: 100%;
    display: table-cell;
    background-color: rgba(15, 23, 42, 0.4) !important;
}

.empty-state-container[b-9taa2mmlox] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state-icon[b-9taa2mmlox] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
    width: 64px;
    height: 64px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-text[b-9taa2mmlox] {
    font-size: 16px;
    margin-bottom: 24px;
    width: 100%;
    font-weight: 500;
}
/* _content/WebUI/Components/Pages/CustomerView/MyResources.razor.rz.scp.css */
/* CSS Variables */
:root[b-2nsbs5qc19] {
    --primary: #8b5cf6;
    --secondary: #10b981;
    --tertiary: #ec4899;
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --card-bg: #1f2937;
    --border-color: #374151;
    --input-bg: #111827;
    --chip-bg: #374151;
    --action-bg: #111827;
}

/* Page Header */
.page-header[b-2nsbs5qc19] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.page-title[b-2nsbs5qc19] {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.page-description[b-2nsbs5qc19] {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

.action-buttons[b-2nsbs5qc19] {
    display: flex;
    gap: 12px;
}

/* Resource Overview */
.resource-overview[b-2nsbs5qc19] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.overview-card[b-2nsbs5qc19] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}

.overview-card:hover[b-2nsbs5qc19] {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.overview-icon[b-2nsbs5qc19] {
    width: 48px;
    height: 48px;
    background: rgba(139, 92, 246, 0.2);
    color: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.overview-title[b-2nsbs5qc19] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.overview-value[b-2nsbs5qc19] {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.overview-details[b-2nsbs5qc19] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Resource Controls */
.resource-controls[b-2nsbs5qc19] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.resource-tabs[b-2nsbs5qc19] {
    display: flex;
    gap: 8px;
}

.resource-tab[b-2nsbs5qc19] {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resource-tab:hover[b-2nsbs5qc19] {
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary);
}

.resource-tab.active[b-2nsbs5qc19] {
    background: var(--primary);
    color: white;
}

.view-controls[b-2nsbs5qc19] {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Advanced Filters */
.advanced-filters[b-2nsbs5qc19] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    display: none;
}

.advanced-filters.active[b-2nsbs5qc19] {
    display: block;
}

.filter-bar[b-2nsbs5qc19] {
    display: grid;
    grid-template-columns: 1fr repeat(3, 200px);
    gap: 16px;
    margin-bottom: 16px;
}

.search-input[b-2nsbs5qc19] {
    padding: 10px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.search-input:focus[b-2nsbs5qc19] {
    outline: none;
    border-color: var(--primary);
}

.filter-dropdown[b-2nsbs5qc19] {
    padding: 10px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.filter-chips[b-2nsbs5qc19] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-chip[b-2nsbs5qc19] {
    padding: 8px 16px;
    background: var(--chip-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-chip:hover[b-2nsbs5qc19] {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.filter-chip.active[b-2nsbs5qc19] {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Resource List View */
.resources-list[b-2nsbs5qc19] {
    display: none;
}

.resources-list.active[b-2nsbs5qc19] {
    display: block;
}

.resource-item[b-2nsbs5qc19] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.resource-item:hover[b-2nsbs5qc19] {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.resource-header[b-2nsbs5qc19] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.resource-title-area[b-2nsbs5qc19] {
    display: flex;
    gap: 16px;
}

.resource-icon[b-2nsbs5qc19] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.resource-icon.instance[b-2nsbs5qc19] {
    background: rgba(139, 92, 246, 0.2);
    color: var(--primary);
}

.resource-icon.app[b-2nsbs5qc19] {
    background: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
}

.resource-icon.storage[b-2nsbs5qc19] {
    background: rgba(236, 72, 153, 0.2);
    color: var(--tertiary);
}

.resource-details h3[b-2nsbs5qc19] {
    margin: 0 0 4px 0;
}

.resource-name[b-2nsbs5qc19] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.resource-id[b-2nsbs5qc19] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.resource-badges[b-2nsbs5qc19] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.resource-actions[b-2nsbs5qc19] {
    display: flex;
    gap: 12px;
}

.action-icon[b-2nsbs5qc19] {
    width: 36px;
    height: 36px;
    background: var(--action-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.action-icon:hover[b-2nsbs5qc19] {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.resource-meta[b-2nsbs5qc19] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 16px;
}

.meta-item[b-2nsbs5qc19] {
    display: flex;
    flex-direction: column;
}

.meta-label[b-2nsbs5qc19] {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.meta-value[b-2nsbs5qc19] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Resource Grid View */
.resources-grid[b-2nsbs5qc19] {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.resources-grid.active[b-2nsbs5qc19] {
    display: grid;
}

.resource-card[b-2nsbs5qc19] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.resource-card:hover[b-2nsbs5qc19] {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Progress Bar */
.progress-bar[b-2nsbs5qc19] {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-2nsbs5qc19] {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Badges */
.badge[b-2nsbs5qc19] {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge i[b-2nsbs5qc19] {
    font-size: 8px;
}

.badge-success[b-2nsbs5qc19] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.badge-warning[b-2nsbs5qc19] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.badge-danger[b-2nsbs5qc19] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.badge-neutral[b-2nsbs5qc19] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

/* Pagination */
.pagination[b-2nsbs5qc19] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

/* Buttons */
.btn[b-2nsbs5qc19] {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

.btn-primary:hover[b-2nsbs5qc19] {
    background: #7c3aed;
}

.btn-secondary[b-2nsbs5qc19] {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover[b-2nsbs5qc19] {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--primary);
}

.btn-outline[b-2nsbs5qc19] {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover[b-2nsbs5qc19] {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-sm[b-2nsbs5qc19] {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-icon[b-2nsbs5qc19] {
    font-size: 14px;
}

/* View Toggle */
.view-toggle[b-2nsbs5qc19] {
    display: flex;
    background: var(--chip-bg);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.view-option[b-2nsbs5qc19] {
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-option:hover[b-2nsbs5qc19] {
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary);
}

.view-option.active[b-2nsbs5qc19] {
    background: var(--primary);
    color: white;
}

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

.empty-state i[b-2nsbs5qc19] {
    font-size: 48px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.empty-state h3[b-2nsbs5qc19] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.empty-state p[b-2nsbs5qc19] {
    color: var(--text-secondary);
    margin: 0 0 24px 0;
}

/* Loading Container */
.loading-container[b-2nsbs5qc19] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

/* Screen Reader Only */
.sr-only[b-2nsbs5qc19] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .resource-overview[b-2nsbs5qc19] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-bar[b-2nsbs5qc19] {
        grid-template-columns: 1fr;
    }
    
    .page-header[b-2nsbs5qc19] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .resource-overview[b-2nsbs5qc19] {
        grid-template-columns: 1fr;
    }
    
    .resources-grid[b-2nsbs5qc19] {
        grid-template-columns: 1fr;
    }
    
    .resource-meta[b-2nsbs5qc19] {
        grid-template-columns: 1fr;
    }
    
    .action-buttons[b-2nsbs5qc19] {
        flex-wrap: wrap;
    }
}
/* _content/WebUI/Components/Pages/CustomerView/Notifications.razor.rz.scp.css */
/* Note: Base styles, color variables, background components and layout are imported from platform.css */
/* Consumer-specific components and styles are imported from consumer.css */

/* ======================================
 * NOTIFICATIONS SPECIFIC STYLES
 * ======================================
 */

/* Filters bar */
.filters-bar[b-ffj7wcm3rs] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.filters-left[b-ffj7wcm3rs] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filters-right[b-ffj7wcm3rs] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Filter pills for notifications */
.filter-pill[b-ffj7wcm3rs] {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-pill.all[b-ffj7wcm3rs] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.filter-pill.unread[b-ffj7wcm3rs] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--secondary);
}

.filter-pill.system[b-ffj7wcm3rs] {
    background: rgba(56, 189, 248, 0.15);
    color: var(--info);
}

.filter-pill.account[b-ffj7wcm3rs] {
    background: rgba(236, 72, 153, 0.15);
    color: var(--tertiary);
}

.filter-pill.security[b-ffj7wcm3rs] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.filter-pill.active[b-ffj7wcm3rs], .filter-pill:hover[b-ffj7wcm3rs] {
    background: var(--primary);
    color: white;
}

/* Notifications list */
.notifications-container[b-ffj7wcm3rs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-date-header[b-ffj7wcm3rs] {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 8px 0;
    padding-left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-date-header[b-ffj7wcm3rs]::after {
    content: "";
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    flex-grow: 1;
    margin-left: 8px;
}

.notification-card[b-ffj7wcm3rs] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
}

.notification-card:hover[b-ffj7wcm3rs] {
    background: rgba(15, 23, 42, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.notification-card.unread[b-ffj7wcm3rs] {
    border-left: 4px solid var(--primary);
}

.notification-icon[b-ffj7wcm3rs] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.notification-icon.system[b-ffj7wcm3rs] {
    background: rgba(56, 189, 248, 0.1);
    color: var(--info);
}

.notification-icon.account[b-ffj7wcm3rs] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.notification-icon.security[b-ffj7wcm3rs] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.notification-icon.billing[b-ffj7wcm3rs] {
    background: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.notification-content[b-ffj7wcm3rs] {
    flex-grow: 1;
}

.notification-header[b-ffj7wcm3rs] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.notification-title[b-ffj7wcm3rs] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: white;
}

.notification-message[b-ffj7wcm3rs] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin-bottom: 8px;
}

.notification-meta[b-ffj7wcm3rs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.notification-time[b-ffj7wcm3rs] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-category[b-ffj7wcm3rs] {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 500;
}

.notification-category.system[b-ffj7wcm3rs] {
    background: rgba(56, 189, 248, 0.1);
    color: var(--info);
}

.notification-category.account[b-ffj7wcm3rs] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.notification-category.security[b-ffj7wcm3rs] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.notification-category.billing[b-ffj7wcm3rs] {
    background: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.notification-actions[b-ffj7wcm3rs] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.notification-action[b-ffj7wcm3rs] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
}

.notification-action:hover[b-ffj7wcm3rs] {
    color: white;
}

.notification-source[b-ffj7wcm3rs] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.notification-action-menu[b-ffj7wcm3rs] {
    position: absolute;
    top: 16px;
    right: 16px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.notification-action-menu:hover[b-ffj7wcm3rs] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.notification-link[b-ffj7wcm3rs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.notification-link:hover[b-ffj7wcm3rs] {
    text-decoration: underline;
}

.unread-indicator[b-ffj7wcm3rs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 8px;
}

.notification-buttons[b-ffj7wcm3rs] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Empty state */
.empty-state[b-ffj7wcm3rs] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    margin: 40px 0;
}

.empty-icon[b-ffj7wcm3rs] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary);
    margin: 0 auto 24px;
}

.empty-title[b-ffj7wcm3rs] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.empty-description[b-ffj7wcm3rs] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 400px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.settings-btn[b-ffj7wcm3rs] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.settings-button-container[b-ffj7wcm3rs] {
    display: flex;
    justify-content: flex-end;
    margin: -10px 20px 10px 0;
}
/* _content/WebUI/Components/Pages/CustomerView/RequestQuote.razor.rz.scp.css */
/* RequestQuote page specific styles */

/* Form styling specific to quote request */
.quote-form[b-9fecpqsq76] {
    max-width: 800px;
    margin: 0 auto 40px;
}

.form-card[b-9fecpqsq76] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    margin-bottom: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-card:hover[b-9fecpqsq76] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.form-section-title[b-9fecpqsq76] {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--light);
    display: flex;
    align-items: center;
}

.form-section-title i[b-9fecpqsq76] {
    margin-right: 12px;
    color: var(--secondary-color);
}

/* Quote type selection options */
.quote-type-options[b-9fecpqsq76] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.quote-type-option[b-9fecpqsq76] {
    flex: 1 1 300px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.quote-type-option:hover[b-9fecpqsq76] {
    background: rgba(15, 23, 42, 0.8);
    transform: translateY(-2px);
}

.quote-type-option.selected[b-9fecpqsq76] {
    border-color: var(--primary-color-start);
    background: rgba(79, 70, 229, 0.1);
}

.quote-type-option.selected[b-9fecpqsq76]:after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--primary-color-start);
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 18px;
}

.quote-type-icon[b-9fecpqsq76] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.quote-type-icon i[b-9fecpqsq76] {
    font-size: 24px;
    color: var(--primary-color-start);
}

.quote-type-title[b-9fecpqsq76] {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 16px;
}

.quote-type-description[b-9fecpqsq76] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* Feature list for quote options */
.feature-list[b-9fecpqsq76] {
    margin-top: 16px;
}

.feature-item[b-9fecpqsq76] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.feature-item i[b-9fecpqsq76] {
    color: var(--secondary-color);
    margin-right: 8px;
    font-size: 12px;
}

/* Loading overlay */
.quote-overlay[b-9fecpqsq76] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.quote-processing[b-9fecpqsq76] {
    background: rgba(15, 23, 42, 0.9);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.quote-processing .spinner-border[b-9fecpqsq76] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 20px;
}

.processing-text[b-9fecpqsq76] {
    font-size: 16px;
    font-weight: 500;
    color: var(--light);
}
/* _content/WebUI/Components/Pages/CustomerView/UsageHistory.razor.rz.scp.css */
/* Metrics Grid */
.metrics-grid[b-gbp5w3b26v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card[b-gbp5w3b26v] {
    background: rgba(13, 17, 23, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(48, 54, 61, 0.5);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.metric-card:hover[b-gbp5w3b26v] {
    border-color: #007BFF;
    transform: translateY(-2px);
}

.metric-icon[b-gbp5w3b26v] {
    width: 48px;
    height: 48px;
    background: rgba(0, 123, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon i[b-gbp5w3b26v] {
    font-size: 24px;
    color: #007BFF;
}

.metric-content[b-gbp5w3b26v] {
    flex: 1;
}

.metric-value[b-gbp5w3b26v] {
    font-size: 28px;
    font-weight: 700;
    color: #F8FAFC;
    margin-bottom: 4px;
}

.metric-label[b-gbp5w3b26v] {
    font-size: 14px;
    color: #94A3B8;
}

/* Dashboard Cards */
.dashboard-card[b-gbp5w3b26v] {
    background: rgba(13, 17, 23, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(48, 54, 61, 0.5);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.subtitle[b-gbp5w3b26v] {
    font-size: 20px;
    font-weight: 600;
    color: #F8FAFC;
    margin: 0 0 20px 0;
}

/* Usage Table */
.usage-table-container[b-gbp5w3b26v] {
    overflow-x: auto;
}

.usage-table[b-gbp5w3b26v] {
    width: 100%;
    border-collapse: collapse;
}

.usage-table th[b-gbp5w3b26v] {
    background: rgba(30, 41, 59, 0.5);
    color: #94A3B8;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}

.usage-table td[b-gbp5w3b26v] {
    padding: 16px;
    color: #E2E8F0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.3);
}

.usage-table tbody tr:hover[b-gbp5w3b26v] {
    background: rgba(30, 41, 59, 0.3);
}

.instance-id[b-gbp5w3b26v] {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #007BFF;
}

/* Status Badges */
.status-badge[b-gbp5w3b26v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.status-badge.active[b-gbp5w3b26v] {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.active i[b-gbp5w3b26v] {
    font-size: 8px;
}

.status-badge.completed[b-gbp5w3b26v] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366F1;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Loading Spinner */
.loading-spinner[b-gbp5w3b26v] {
    text-align: center;
    padding: 60px 20px;
    color: #94A3B8;
}

.loading-spinner i[b-gbp5w3b26v] {
    font-size: 32px;
    color: #007BFF;
    margin-bottom: 16px;
}

.loading-spinner p[b-gbp5w3b26v] {
    margin: 0;
    font-size: 16px;
}

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

.empty-state-icon[b-gbp5w3b26v] {
    width: 80px;
    height: 80px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.empty-state-icon i[b-gbp5w3b26v] {
    font-size: 36px;
    color: #64748B;
}

.empty-state-title[b-gbp5w3b26v] {
    font-size: 20px;
    font-weight: 600;
    color: #F8FAFC;
    margin: 0 0 12px 0;
}

.empty-state-description[b-gbp5w3b26v] {
    font-size: 14px;
    color: #94A3B8;
    max-width: 400px;
    margin: 0 auto;
}

/* Usage Breakdown */
.usage-breakdown[b-gbp5w3b26v] {
    margin-bottom: 20px;
}

.breakdown-card[b-gbp5w3b26v] {
    background: rgba(13, 17, 23, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(48, 54, 61, 0.5);
    border-radius: 12px;
    padding: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .metrics-grid[b-gbp5w3b26v] {
        grid-template-columns: 1fr;
    }
    
    .usage-table[b-gbp5w3b26v] {
        font-size: 14px;
    }
    
    .usage-table th[b-gbp5w3b26v],
    .usage-table td[b-gbp5w3b26v] {
        padding: 8px;
    }
    
    .metric-value[b-gbp5w3b26v] {
        font-size: 24px;
    }
}
/* _content/WebUI/Components/Pages/CustomerView/Wallet.razor.rz.scp.css */
/* Tab Content */
.tab-content[b-dyni8rivfn] {
    display: none;
}

.tab-content.active[b-dyni8rivfn] {
    display: block;
}

/* Bottom Spacer */
.bottom-spacer[b-dyni8rivfn] {
    height: 80px;
}

/* Benson AI Assistant */
.benson-container[b-dyni8rivfn] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    z-index: 100;
}

.benson-avatar[b-dyni8rivfn] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.benson-avatar:hover[b-dyni8rivfn] {
    transform: scale(1.05);
}

.chat-tooltip[b-dyni8rivfn] {
    background: rgba(15, 23, 42, 0.95);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    margin-right: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.chat-tooltip[b-dyni8rivfn]:after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgba(15, 23, 42, 0.95);
}
/* _content/WebUI/Components/Pages/PendingApproval.razor.rz.scp.css */
/* Pending Approval Page Styles */

.approval-page-container[b-xz54c0p95f] {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.approval-content[b-xz54c0p95f] {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 40px;
    max-width: 90%;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@media (min-width: 1024px) {
    .approval-content[b-xz54c0p95f] {
        max-width: 60%;
    }
}

@media (min-width: 1440px) {
    .approval-content[b-xz54c0p95f] {
        max-width: 50%;
    }
}

.approval-header[b-xz54c0p95f] {
    text-align: center;
    margin-bottom: 30px;
}

.approval-header h1[b-xz54c0p95f] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.approval-icon[b-xz54c0p95f] {
    font-size: 64px;
    color: var(--primary);
    margin-bottom: 20px;
}

.approval-body[b-xz54c0p95f] {
    text-align: center;
}

.approval-body p[b-xz54c0p95f] {
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.interest-summary[b-xz54c0p95f] {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: left;
}

.interest-summary p[b-xz54c0p95f] {
    margin-bottom: 10px;
}

.platform-interest-form[b-xz54c0p95f] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 25px;
    margin: 20px 0;
    text-align: left;
}

.platform-interest-form h3[b-xz54c0p95f] {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--primary);
}

.form-group[b-xz54c0p95f] {
    margin-bottom: 20px;
}

.form-group label[b-xz54c0p95f] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.form-control[b-xz54c0p95f] {
    width: 100%;
    padding: 10px 15px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

.form-control:focus[b-xz54c0p95f] {
    outline: none;
    border-color: var(--primary);
    background-color: rgba(15, 23, 42, 0.9);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-control:hover[b-xz54c0p95f] {
    border-color: rgba(255, 255, 255, 0.3);
}

select.form-control[b-xz54c0p95f] {
    cursor: pointer;
}

/* Dark theme for select dropdown */
select.form-control[b-xz54c0p95f] {
    background-color: rgba(15, 23, 42, 0.8) !important;
    color-scheme: dark;
}

/* Force dark theme on the entire form */
.platform-interest-form[b-xz54c0p95f] {
    color-scheme: dark;
}

/* Add color-scheme to the root of the component */
:root[b-xz54c0p95f] {
    color-scheme: dark;
}

/* Use ::deep to penetrate component boundaries */
[b-xz54c0p95f] select.form-control {
    color-scheme: dark !important;
    background-color: rgba(15, 23, 42, 0.8) !important;
}

[b-xz54c0p95f] select.form-control option {
    background: rgba(15, 23, 42, 0.95) !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: #fff !important;
    padding: 10px;
}

[b-xz54c0p95f] select.form-control option:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    background-color: rgba(30, 41, 59, 0.95) !important;
}

[b-xz54c0p95f] select.form-control option:checked {
    background: rgba(51, 65, 85, 0.95) !important;
    background-color: rgba(51, 65, 85, 0.95) !important;
}

[b-xz54c0p95f] select.form-control option:focus {
    background: rgba(51, 65, 85, 0.95) !important;
    background-color: rgba(51, 65, 85, 0.95) !important;
}

/* Additional deep selectors for InputSelect */
[b-xz54c0p95f] .dark-select {
    color-scheme: dark !important;
}

[b-xz54c0p95f] .dark-select option {
    background: rgba(15, 23, 42, 0.95) !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: #fff !important;
}

/* Target all selects within the form using deep */
[b-xz54c0p95f] .platform-interest-form select {
    color-scheme: dark !important;
}

[b-xz54c0p95f] .platform-interest-form select option {
    background: rgba(15, 23, 42, 0.95) !important;
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: #fff !important;
}

/* Additional fixes for webkit browsers */
[b-xz54c0p95f] select.form-control::-webkit-scrollbar {
    width: 8px;
}

[b-xz54c0p95f] select.form-control::-webkit-scrollbar-track {
    background: #1e293b;
}

[b-xz54c0p95f] select.form-control::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}

/* Firefox specific fixes with deep */
@-moz-document url-prefix() {
    [b-xz54c0p95f] select.form-control option,
    [b-xz54c0p95f] select.dark-select option {
        background-color: rgba(15, 23, 42, 0.95) !important;
    }
}

textarea.form-control[b-xz54c0p95f] {
    resize: vertical;
    min-height: 100px;
    background-image: none;
    padding-right: 15px;
}

[b-xz54c0p95f] .validation-message {
    color: #ef4444;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

.approval-footer[b-xz54c0p95f] {
    text-align: center;
    margin-top: 30px;
}

.btn[b-xz54c0p95f] {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
}

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

.btn-primary:hover[b-xz54c0p95f] {
    background: #5b5fc7;
    transform: translateY(-2px);
}

.btn-primary:disabled[b-xz54c0p95f] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-xz54c0p95f] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover[b-xz54c0p95f] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.loading-spinner[b-xz54c0p95f] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin-b-xz54c0p95f 1s ease-in-out infinite;
    margin-right: 10px;
    vertical-align: middle;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .approval-content[b-xz54c0p95f] {
        padding: 30px 20px;
    }
    
    .approval-header h1[b-xz54c0p95f] {
        font-size: 24px;
    }
    
    .approval-icon[b-xz54c0p95f] {
        font-size: 48px;
    }
}
/* _content/WebUI/Components/Pages/ProviderView/ActiveInstances.razor.rz.scp.css */
/* Status indicators */
.status-running[b-1h0ha95wt8] {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-stopped[b-1h0ha95wt8] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-starting[b-1h0ha95wt8] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-error[b-1h0ha95wt8] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-unknown[b-1h0ha95wt8] {
    background-color: rgba(234, 179, 8, 0.2);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Search box styling */
.search-box[b-1h0ha95wt8] {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    min-width: 280px;
}

.search-box:focus-within[b-1h0ha95wt8] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.search-box input[b-1h0ha95wt8] {
    background: transparent;
    border: none;
    outline: none;
    flex-grow: 1;
    color: white;
    font-size: 14px;
}

.search-box input[b-1h0ha95wt8]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-icon[b-1h0ha95wt8] {
    color: rgba(255, 255, 255, 0.5);
    margin-right: 12px;
}

/* Dropdown styling */
.form-select[b-1h0ha95wt8] {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    color: white;
    font-size: 14px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.7)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-select:focus[b-1h0ha95wt8] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.instances-grid[b-1h0ha95wt8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
}

.instance-card[b-1h0ha95wt8] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.instance-card:hover[b-1h0ha95wt8] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.instance-header[b-1h0ha95wt8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.instance-name[b-1h0ha95wt8] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.server-id[b-1h0ha95wt8] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.server-status[b-1h0ha95wt8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
    margin-top: 2px;
}

.instance-section[b-1h0ha95wt8] {
    margin-bottom: 14px;
}

.section-title[b-1h0ha95wt8] {
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: 600;
}

.instance-details[b-1h0ha95wt8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item[b-1h0ha95wt8] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.detail-label[b-1h0ha95wt8] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.detail-value[b-1h0ha95wt8] {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

.instance-actions[b-1h0ha95wt8] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Action Icons */
.action-icon[b-1h0ha95wt8] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.action-icon:hover[b-1h0ha95wt8] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Action buttons */
.action-button[b-1h0ha95wt8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.primary-button[b-1h0ha95wt8] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.primary-button:hover[b-1h0ha95wt8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.primary-button .button-icon[b-1h0ha95wt8] {
    margin-right: 8px;
}

/* Page actions */
.page-actions[b-1h0ha95wt8] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    gap: 12px;
}

/* Filter controls */
.filter-controls[b-1h0ha95wt8] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-control[b-1h0ha95wt8] {
    position: relative;
}

.filter-input[b-1h0ha95wt8] {
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    min-width: 180px;
}

.filter-input:focus[b-1h0ha95wt8] {
    outline: none;
    border-color: var(--primary);
}

.filter-label[b-1h0ha95wt8] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    display: block;
}

/* Empty state */
.empty-state[b-1h0ha95wt8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon[b-1h0ha95wt8] {
    font-size: 48px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.2);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-title[b-1h0ha95wt8] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-description[b-1h0ha95wt8] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
    max-width: 500px;
}

/* Loading container */
.loading-container[b-1h0ha95wt8] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    width: 100%;
}

.instance-count[b-1h0ha95wt8] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.action-icon.primary[b-1h0ha95wt8] {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.action-icon.primary:hover[b-1h0ha95wt8] {
    background: rgba(99, 102, 241, 0.3);
}

.action-icon.warning[b-1h0ha95wt8] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.action-icon.warning:hover[b-1h0ha95wt8] {
    background: rgba(245, 158, 11, 0.3);
}

.action-icon.danger[b-1h0ha95wt8] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.action-icon.danger:hover[b-1h0ha95wt8] {
    background: rgba(239, 68, 68, 0.3);
}

/* Button styles */
.btn[b-1h0ha95wt8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

.btn-primary[b-1h0ha95wt8] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
}

.btn-primary:hover[b-1h0ha95wt8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-outline-secondary[b-1h0ha95wt8] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-outline-secondary:hover[b-1h0ha95wt8] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.btn-sm[b-1h0ha95wt8] {
    padding: 8px 12px;
    font-size: 13px;
}
/* _content/WebUI/Components/Pages/ProviderView/AdminScripts.razor.rz.scp.css */
.bootstrap-scripts-container[b-icsg3kedh1] {
    margin-bottom: 30px;
    background: rgba(15, 23, 42, 0.2);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Tabs */
.tabs-container[b-icsg3kedh1] {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.4);
}

.tab[b-icsg3kedh1] {
    padding: 16px 24px;
    cursor: pointer;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    transition: all 0.2s ease;
    font-size: 15px;
}

.tab:hover[b-icsg3kedh1] {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.tab.active[b-icsg3kedh1] {
    color: var(--primary);
    background: rgba(15, 23, 42, 0.2);
}

.tab.active[b-icsg3kedh1]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
}

/* Tab content */
.tab-content[b-icsg3kedh1] {
    display: block !important; /* Override the display: none from consumer.css */
    padding: 24px;
    min-height: 300px; /* Ensure minimum height */
}

/* Filter controls */
.filter-controls[b-icsg3kedh1] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    background: rgba(15, 23, 42, 0.3);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.filter-control[b-icsg3kedh1] {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.filter-control[b-icsg3kedh1]::after {
    content: "\f002"; /* Font Awesome search icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 40px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    pointer-events: none;
}

.filter-label[b-icsg3kedh1] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.filter-input[b-icsg3kedh1] {
    width: 100%;
    padding: 12px 16px;
    padding-right: 40px; /* Make room for the search icon */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 14px;
    background: rgba(15, 23, 42, 0.5);
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}

.filter-input:focus[b-icsg3kedh1] {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.filter-input[b-icsg3kedh1]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Script cards */
.script-cards-grid[b-icsg3kedh1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.script-card[b-icsg3kedh1] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    overflow: hidden;
}

.script-card:hover[b-icsg3kedh1] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.script-header[b-icsg3kedh1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.9);
}

.script-name[b-icsg3kedh1] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: white;
}

.script-id[b-icsg3kedh1] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.script-badge[b-icsg3kedh1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-primary[b-icsg3kedh1] {
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.badge-secondary[b-icsg3kedh1] {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.script-section[b-icsg3kedh1] {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.script-description[b-icsg3kedh1] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.spec-grid[b-icsg3kedh1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.spec-item[b-icsg3kedh1] {
    margin-bottom: 4px;
}

.spec-label[b-icsg3kedh1] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

.spec-value[b-icsg3kedh1] {
    font-size: 14px;
    color: white;
}

.script-footer[b-icsg3kedh1] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    background: rgba(15, 23, 42, 0.9);
}

.script-actions[b-icsg3kedh1] {
    display: flex;
    gap: 12px;
}

.action-icon[b-icsg3kedh1] {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-icon.primary[b-icsg3kedh1] {
    color: var(--primary);
}

.action-icon.warning[b-icsg3kedh1] {
    color: #f59e0b;
}

.action-icon.danger[b-icsg3kedh1] {
    color: #ef4444;
}

.action-icon:hover[b-icsg3kedh1] {
    background: rgba(255, 255, 255, 0.1);
}

/* Script detail modal */
.script-detail-modal[b-icsg3kedh1] {
    max-width: 1000px;
}

.script-detail-section[b-icsg3kedh1] {
    margin-bottom: 24px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 20px;
}

.script-metadata[b-icsg3kedh1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.metadata-item[b-icsg3kedh1] {
    margin-bottom: 8px;
}

.metadata-label[b-icsg3kedh1] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.metadata-value[b-icsg3kedh1] {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

.script-description-full[b-icsg3kedh1] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-top: 16px;
    line-height: 1.6;
}

.section-header[b-icsg3kedh1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.section-title[b-icsg3kedh1] {
    display: flex;
    flex-direction: column;
}

.section-title h4[b-icsg3kedh1] {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: white;
}

.section-subtitle[b-icsg3kedh1] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.version-controls[b-icsg3kedh1] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.add-version-btn[b-icsg3kedh1] {
    min-width: 220px;
    height: 42px;
    background-color: #4f46e5;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    padding: 0 20px;
    transition: all 0.3s ease;
}

.add-version-btn:hover[b-icsg3kedh1] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    background-color: #4338ca;
}

.add-version-btn i[b-icsg3kedh1] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin-right: 8px;
}

.button-hint[b-icsg3kedh1] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
}

/* Script versions */
.version-tabs[b-icsg3kedh1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
}

.version-tab[b-icsg3kedh1] {
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.version-tab:hover[b-icsg3kedh1] {
    background: rgba(15, 23, 42, 0.7);
}

.version-tab.active[b-icsg3kedh1] {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--primary);
}

.version-badge[b-icsg3kedh1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.version-badge.active[b-icsg3kedh1] {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.version-badge.draft[b-icsg3kedh1] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.version-badge.deprecated[b-icsg3kedh1] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.version-content[b-icsg3kedh1] {
    margin-top: 16px;
}

.version-metadata[b-icsg3kedh1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Code editor */
.code-editor-container[b-icsg3kedh1] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 16px;
}

.code-editor-header[b-icsg3kedh1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-editor-actions[b-icsg3kedh1] {
    display: flex;
    gap: 8px;
}

.editor-action-button[b-icsg3kedh1] {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.editor-action-button:hover[b-icsg3kedh1] {
    background: rgba(255, 255, 255, 0.2);
}

.editor-action-button.danger[b-icsg3kedh1] {
    color: #ef4444;
}

.editor-action-button.danger:hover[b-icsg3kedh1] {
    background: rgba(239, 68, 68, 0.2);
}

/* Empty states */
.empty-state[b-icsg3kedh1] {
    text-align: center;
    padding: 60px 20px;
    max-width: 400px;
    margin: 0 auto;
}

.empty-icon[b-icsg3kedh1] {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
}

.empty-title[b-icsg3kedh1] {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: white;
}

.empty-description[b-icsg3kedh1] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
    line-height: 1.5;
}

.empty-versions[b-icsg3kedh1] {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.empty-versions-icon[b-icsg3kedh1] {
    font-size: 42px;
    color: rgba(99, 102, 241, 0.4);
    margin-bottom: 16px;
}

.empty-versions h4[b-icsg3kedh1] {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0 0 8px 0;
}

.empty-versions p[b-icsg3kedh1] {
    margin-bottom: 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.empty-versions .action-button[b-icsg3kedh1] {
    min-width: 200px;
    height: 44px;
    font-size: 15px;
    margin-top: 8px;
}

.content-btn[b-icsg3kedh1] {
    background-color: #4f46e5;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-weight: 600;
    transition: all 0.3s ease;
}

.content-btn:hover[b-icsg3kedh1] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    background-color: #4338ca;
}

/* Modal Overlay */
.modal-overlay[b-icsg3kedh1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.modal-content[b-icsg3kedh1] {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header[b-icsg3kedh1] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(15, 23, 42, 0.98);
}

.modal-title[b-icsg3kedh1] {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: white;
}

.modal-title span[b-icsg3kedh1] {
    color: var(--primary);
}

.modal-close[b-icsg3kedh1] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    color: rgba(255, 255, 255, 0.7);
}

.modal-close:hover[b-icsg3kedh1] {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.modal-body[b-icsg3kedh1] {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.modal-footer[b-icsg3kedh1] {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
    background: rgba(15, 23, 42, 0.98);
}

/* Form elements */
.form-group[b-icsg3kedh1] {
    margin-bottom: 24px;
    position: relative;
}

.form-row[b-icsg3kedh1] {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.form-row .form-group[b-icsg3kedh1] {
    flex: 1;
    margin-bottom: 0;
}

.form-label[b-icsg3kedh1] {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: white;
}

.form-label[b-icsg3kedh1]::after {
    content: "*";
    color: #ef4444;
    margin-left: 4px;
    font-size: 16px;
}

.form-label:not(:has(+ .form-input[required])):not(:has(+ .form-select[required]))[b-icsg3kedh1]::after {
    content: none;
}

.form-input[b-icsg3kedh1], 
.form-select[b-icsg3kedh1] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 14px;
    background: rgba(15, 23, 42, 0.5);
    color: white;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}

.form-input:focus[b-icsg3kedh1], 
.form-select:focus[b-icsg3kedh1] {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-input[b-icsg3kedh1]::placeholder,
.form-select[b-icsg3kedh1]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-error[b-icsg3kedh1] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
}

.form-error[b-icsg3kedh1]::before {
    content: "\f071"; /* Font Awesome exclamation triangle */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    margin-right: 6px;
}

/* Highlight required fields */
.form-group:has(.form-input:required)[b-icsg3kedh1],
.form-group:has(.form-select:required)[b-icsg3kedh1] {
    position: relative;
}

/* Script content form styling */
.form-group.script-content-editor[b-icsg3kedh1] {
    margin-bottom: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    position: relative;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.content-editor-title[b-icsg3kedh1] {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    background: rgba(15, 23, 42, 0.7);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.content-editor-title span[b-icsg3kedh1] {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.editor-icon[b-icsg3kedh1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
}

.bash-icon[b-icsg3kedh1] {
    background: linear-gradient(135deg, #ffa726 0%, #ff5722 100%);
    color: white;
}

.powershell-icon[b-icsg3kedh1] {
    background: linear-gradient(135deg, #26b7ff 0%, #0066cc 100%);
    color: white;
}

.script-content-help[b-icsg3kedh1] {
    margin-top: 16px;
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid var(--primary);
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
}

.script-content-help p[b-icsg3kedh1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.script-content-help i[b-icsg3kedh1] {
    color: var(--primary);
    font-size: 16px;
    margin-top: 2px;
}

.checkbox-group[b-icsg3kedh1] {
    margin-top: 16px;
    margin-bottom: 24px;
}

.checkbox-container[b-icsg3kedh1] {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.checkbox-label[b-icsg3kedh1] {
    margin-left: 8px;
    color: white;
}

.checkbox-description[b-icsg3kedh1] {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 24px;
    line-height: 1.5;
}

/* Workflow information */
.workflow-info[b-icsg3kedh1] {
    margin-top: 8px;
    padding: 16px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    display: flex;
    gap: 16px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.workflow-icon[b-icsg3kedh1] {
    font-size: 24px;
    color: var(--primary);
    padding-top: 4px;
}

.workflow-text[b-icsg3kedh1] {
    flex: 1;
}

.workflow-text h4[b-icsg3kedh1] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: white;
}

.workflow-text ol[b-icsg3kedh1] {
    padding-left: 18px;
    margin: 0 0 12px 0;
}

.workflow-text li[b-icsg3kedh1] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
    line-height: 1.5;
}

.workflow-text p[b-icsg3kedh1] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-style: italic;
}

.warning-text[b-icsg3kedh1] {
    color: #f59e0b;
    font-style: italic;
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
    margin-top: 12px;
}

/* Version modal */
.version-modal[b-icsg3kedh1] {
    width: 90%;
    max-width: 1000px;
}

/* Enhanced code textarea */
.code-textarea[b-icsg3kedh1] {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    min-height: 250px;
    background: rgba(15, 23, 42, 0.95) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px !important;
    tab-size: 4;
    white-space: pre;
}

.code-textarea:focus[b-icsg3kedh1] {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* Enhanced Action buttons */
.action-button[b-icsg3kedh1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.action-button:focus[b-icsg3kedh1] {
    outline: none;
}

.action-button.small[b-icsg3kedh1] {
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

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

.action-button.primary-button:hover[b-icsg3kedh1] {
    background-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

.action-button.primary-button:active[b-icsg3kedh1] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.action-button.cancel[b-icsg3kedh1] {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-button.cancel:hover[b-icsg3kedh1] {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.action-button.danger[b-icsg3kedh1] {
    background-color: #ef4444;
    color: white;
}

.action-button.danger:hover[b-icsg3kedh1] {
    background-color: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

.action-button.danger:active[b-icsg3kedh1] {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.button-icon[b-icsg3kedh1] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .script-cards-grid[b-icsg3kedh1] {
        grid-template-columns: 1fr;
    }
    
    .form-row[b-icsg3kedh1] {
        flex-direction: column;
        gap: 20px;
    }
    
    .script-metadata[b-icsg3kedh1],
    .version-metadata[b-icsg3kedh1] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    .tabs-container[b-icsg3kedh1] {
        overflow-x: auto;
    }
    
    .tab[b-icsg3kedh1] {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .script-metadata[b-icsg3kedh1],
    .version-metadata[b-icsg3kedh1] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/Pages/ProviderView/CompanyInfo.razor.rz.scp.css */
/*!* ---------------------------*/
/*   Unique Page-Specific Styles:*/
/*   Company Info Form, Form Elements,*/
/*   Notification System & Animations*/
/*   --------------------------- *!*/

/* Page actions */
.page-actions[b-surwuowevb] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    gap: 12px;
}

/* Action buttons */
.action-button[b-surwuowevb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.primary-button[b-surwuowevb] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.primary-button:hover[b-surwuowevb] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.primary-button .button-icon[b-surwuowevb] {
    margin-right: 8px;
}

/* =====================
   COMPANY INFO FORM
   ===================== */
.company-info-card[b-surwuowevb] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 32px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.company-info-card:hover[b-surwuowevb] {
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.form-section[b-surwuowevb] {
    margin-bottom: 32px;
}

.section-title[b-surwuowevb] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--light-text);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-row[b-surwuowevb] {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
    margin-bottom: 16px;
}

.form-input[b-surwuowevb]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-input:hover[b-surwuowevb] {
    border-color: rgba(255, 255, 255, 0.2);
}

.input-hint[b-surwuowevb] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.form-toggle[b-surwuowevb] {
    display: flex;
    align-items: center;
    margin-top: 24px;
}

.toggle-label[b-surwuowevb] {
    margin-left: 12px;
    font-size: 15px;
    font-weight: 500;
}

.toggle-switch[b-surwuowevb] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
}

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

.toggle-slider[b-surwuowevb] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider[b-surwuowevb]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-surwuowevb] {
    background-color: var(--primary-color-start);
}

input:focus + .toggle-slider[b-surwuowevb] {
    box-shadow: 0 0 1px var(--primary-color-start);
}

input:checked + .toggle-slider[b-surwuowevb]:before {
    transform: translateX(26px);
}

/* =====================
   NOTIFICATION SYSTEM
   ===================== */
.notification[b-surwuowevb] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 24px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    max-width: 350px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 100;
}

.notification.success[b-surwuowevb] {
    background-color: var(--success);
}

.notification.error[b-surwuowevb] {
    background-color: var(--error);
}

.notification.warning[b-surwuowevb] {
    background-color: var(--warning);
    color: #111827;
}

.notification.show[b-surwuowevb] {
    transform: translateY(0);
    opacity: 1;
}

.notification-icon[b-surwuowevb] {
    margin-right: 12px;
    font-size: 18px;
}

/* =====================
   ANIMATIONS
   ===================== */
@keyframes fadeIn-b-surwuowevb {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.fade-in[b-surwuowevb] {
    animation: fadeIn-b-surwuowevb 0.5s ease forwards;
}

.slide-in-up[b-surwuowevb] {
    animation: slideInUp-b-surwuowevb 0.5s ease forwards;
}

.anim-delay-1[b-surwuowevb] {
    animation-delay: 0.1s;
}

.anim-delay-2[b-surwuowevb] {
    animation-delay: 0.2s;
}

.anim-delay-3[b-surwuowevb] {
    animation-delay: 0.3s;
}

/* Loading container */
.loading-container[b-surwuowevb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    width: 100%;
}

/* =====================
   RESPONSIVE DESIGN
   ===================== */
@media (max-width: 768px) {
    .company-info-card[b-surwuowevb] {
        padding: 20px;
    }
}
/* _content/WebUI/Components/Pages/ProviderView/Financials.razor.rz.scp.css */
/* Page Header */
.page-header[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: nowrap;
}

.page-header > div:first-child[b-y3nfwee5g6] {
    flex: 1;
}

.page-header > div:last-child[b-y3nfwee5g6] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.header-actions[b-y3nfwee5g6] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.page-title[b-y3nfwee5g6] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.page-description[b-y3nfwee5g6] {
    color: var(--text-muted);
    font-size: 16px;
}

/* CSS Variables */
:root[b-y3nfwee5g6] {
    /* Brand Colors */
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --secondary: #10B981;
    --tertiary: #EC4899;
    --dark: #0F172A;
    --darker: #020617;
    --card-bg: rgba(11, 15, 25, 0.8);
    --light: #F8FAFC;
    --danger: #ef4444;
    --warning: #f59e0b;
    
    /* Component Colors */
    --text-primary: #F8FAFC;
    --text-muted: rgba(255, 255, 255, 0.7);
    --surface: #0F172A;
    --surface-dark: rgba(15, 23, 42, 0.8);
    --surface-hover: rgba(15, 23, 42, 0.5);
}

/* Stats Cards */
/* Stats cards */
.stats-cards-grid[b-y3nfwee5g6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-y3nfwee5g6] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.stat-card:hover[b-y3nfwee5g6] {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.stat-title[b-y3nfwee5g6] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.stat-value[b-y3nfwee5g6] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.stat-change[b-y3nfwee5g6] {
    display: flex;
    align-items: center;
}

.text-up[b-y3nfwee5g6] {
    color: #10B981;
    margin-right: 8px;
}

.text-down[b-y3nfwee5g6] {
    color: #EF4444;
    margin-right: 8px;
}

.text-neutral[b-y3nfwee5g6] {
    color: #9CA3AF;
    margin-right: 8px;
}

.stat-subtitle[b-y3nfwee5g6] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* Upcoming Payout Card */
.upcoming-payout[b-y3nfwee5g6] {
    background-color: var(--surface-dark);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.upcoming-payout-header[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.upcoming-payout-title[b-y3nfwee5g6] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.upcoming-payout-subtitle[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
}

.upcoming-payout-grid[b-y3nfwee5g6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.payout-info-item[b-y3nfwee5g6] {
    padding: 12px;
    background-color: var(--surface);
    border-radius: 8px;
}

.payout-info-item-title[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.payout-info-item-value[b-y3nfwee5g6] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.payout-info-item-status[b-y3nfwee5g6] {
    font-size: 13px;
    color: var(--text-muted);
}

.payout-info-item-cta[b-y3nfwee5g6] {
    margin-top: 12px;
}

/* Status badges */
.status-badge[b-y3nfwee5g6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

.status-processing[b-y3nfwee5g6] {
    background-color: rgba(79, 70, 229, 0.1);
    color: #6366F1;
}

.status-paid[b-y3nfwee5g6] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.status-pending[b-y3nfwee5g6] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.status-failed[b-y3nfwee5g6] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

/* Spinner container for loading states */
.spinner-container[b-y3nfwee5g6] {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

/* Empty state styling for tables */
td .empty-state[b-y3nfwee5g6] {
    padding: 30px 0;
    background: transparent;
    border: none;
}

td .empty-state-icon[b-y3nfwee5g6] {
    font-size: 36px;
    opacity: 0.3;
    margin-bottom: 12px;
}

td .empty-state-title[b-y3nfwee5g6] {
    font-size: 16px;
    margin-bottom: 4px;
}

td .empty-state-description[b-y3nfwee5g6] {
    max-width: 80%;
    margin: 0 auto;
}

/* Chart Styles */
.chart-card[b-y3nfwee5g6] {
    background-color: var(--surface-dark);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.chart-header[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-title[b-y3nfwee5g6] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-tabs[b-y3nfwee5g6] {
    display: flex;
    gap: 12px;
}

.chart-tab[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.chart-tab.active[b-y3nfwee5g6] {
    background-color: rgba(79, 70, 229, 0.1);
    color: #6366F1;
}

.chart-container[b-y3nfwee5g6] {
    position: relative;
    height: 180px;
}

/* Bar Chart */
.bar-chart[b-y3nfwee5g6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    padding-bottom: 30px;
}

.bar-chart-group[b-y3nfwee5g6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
}

.bar-chart-bar[b-y3nfwee5g6] {
    width: 24px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--tertiary) 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
}

.bar-chart-bar[b-y3nfwee5g6]::before {
    content: attr(data-value);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s;
}

.bar-chart-bar:hover[b-y3nfwee5g6]::before {
    opacity: 1;
}

.bar-chart-value[b-y3nfwee5g6] {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
}

.bar-chart-label[b-y3nfwee5g6] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Financial Breakdown */
.financial-breakdown[b-y3nfwee5g6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.breakdown-card[b-y3nfwee5g6] {
    background-color: var(--surface-dark);
    border-radius: 12px;
    padding: 20px;
}

.breakdown-header[b-y3nfwee5g6] {
    margin-bottom: 24px;
}

.breakdown-title[b-y3nfwee5g6] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.breakdown-subtitle[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
}

.donut-chart[b-y3nfwee5g6] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 24px;
    position: relative;
}

.donut-chart[b-y3nfwee5g6]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: var(--surface-dark);
    border-radius: 50%;
}

.breakdown-legend[b-y3nfwee5g6] {
    display: grid;
    gap: 12px;
}

.legend-item[b-y3nfwee5g6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

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

.legend-color-1[b-y3nfwee5g6] {
    background-color: var(--primary);
}

.legend-color-2[b-y3nfwee5g6] {
    background-color: var(--secondary);
}

.legend-color-3[b-y3nfwee5g6] {
    background-color: var(--tertiary);
}

.legend-color-4[b-y3nfwee5g6] {
    background-color: #f59e0b;
}

.legend-label[b-y3nfwee5g6] {
    color: var(--text-muted);
    flex: 1;
}

.legend-value[b-y3nfwee5g6] {
    color: var(--text-primary);
    font-weight: 500;
}

/* Filter Controls */
.filter-controls[b-y3nfwee5g6] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-control[b-y3nfwee5g6] {
    flex: 1;
    min-width: 200px;
}

.filter-label[b-y3nfwee5g6] {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.filter-input[b-y3nfwee5g6] {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--surface-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

/* Data Table */
.data-table[b-y3nfwee5g6] {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
}

.data-table th[b-y3nfwee5g6] {
    padding: 12px 16px;
    text-align: left;
    background-color: var(--surface);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.data-table td[b-y3nfwee5g6] {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
    color: var(--text-primary);
}

.data-table tr:last-child td[b-y3nfwee5g6] {
    border-bottom: none;
}

.data-table tbody tr[b-y3nfwee5g6] {
    background-color: var(--surface-dark);
    transition: background-color 0.2s;
}

.data-table tbody tr:hover[b-y3nfwee5g6] {
    background-color: var(--surface-hover);
}

.action-icons[b-y3nfwee5g6] {
    display: flex;
    gap: 12px;
}

.action-icon[b-y3nfwee5g6] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.action-icon:hover[b-y3nfwee5g6] {
    background-color: rgba(79, 70, 229, 0.1);
    color: #6366F1;
}

/* Pagination */
.pagination[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.pagination-info[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
}

.pagination-controls[b-y3nfwee5g6] {
    display: flex;
    gap: 8px;
}

.page-button[b-y3nfwee5g6] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: var(--surface-dark);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.page-button:hover:not(.disabled)[b-y3nfwee5g6] {
    background-color: rgba(79, 70, 229, 0.1);
    color: #6366F1;
}

.page-button.active[b-y3nfwee5g6] {
    background-color: var(--primary);
    color: white;
}

.page-button.disabled[b-y3nfwee5g6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Section Headers */
.section-header[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32px 0 20px;
}

.section-title[b-y3nfwee5g6] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Payout Methods */
.payout-methods[b-y3nfwee5g6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.payout-method[b-y3nfwee5g6] {
    background-color: var(--surface-dark);
    border-radius: 12px;
    padding: 20px;
}

.payout-method-header[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.payout-method-title[b-y3nfwee5g6] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.payout-method-subtitle[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
}

.payout-method-icon[b-y3nfwee5g6] {
    font-size: 24px;
    color: var(--primary);
}

.payout-method-details[b-y3nfwee5g6] {
    margin-bottom: 16px;
}

.payout-detail-row[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.payout-detail-label[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
}

.payout-detail-value[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.payout-method-default[b-y3nfwee5g6] {
    margin-top: 16px;
    padding: 8px 12px;
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
}

/* Tax Information */
.tax-info[b-y3nfwee5g6] {
    background-color: var(--surface-dark);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.tax-info-header[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tax-info-title[b-y3nfwee5g6] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tax-info-subtitle[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
}

.tax-info-grid[b-y3nfwee5g6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.tax-info-item[b-y3nfwee5g6] {
    padding: 16px;
    background-color: var(--surface);
    border-radius: 8px;
}

.tax-info-item-title[b-y3nfwee5g6] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.tax-info-item-value[b-y3nfwee5g6] {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.tax-info-status[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Modal Styles */
.modal-overlay[b-y3nfwee5g6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal-overlay.active[b-y3nfwee5g6] {
    opacity: 1;
    visibility: visible;
}

.modal-content[b-y3nfwee5g6] {
    width: 100%;
    max-width: 600px;
    background-color: var(--dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s;
}

.modal-overlay.active .modal-content[b-y3nfwee5g6] {
    transform: translateY(0);
}

.modal-header[b-y3nfwee5g6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--dark);
}

.modal-title[b-y3nfwee5g6] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close[b-y3nfwee5g6] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
}

.modal-close:hover[b-y3nfwee5g6] {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.modal-body[b-y3nfwee5g6] {
    padding: 24px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    background-color: var(--dark);
}

.modal-footer[b-y3nfwee5g6] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--dark);
}

/* Form Elements */
.form-group[b-y3nfwee5g6] {
    margin-bottom: 20px;
}

.form-label[b-y3nfwee5g6] {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

.form-input[b-y3nfwee5g6], .form-select[b-y3nfwee5g6] {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 8px;
}

.form-input:focus[b-y3nfwee5g6], .form-select:focus[b-y3nfwee5g6] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.form-row[b-y3nfwee5g6] {
    display: flex;
    gap: 12px;
}

.form-row > div[b-y3nfwee5g6] {
    flex: 1;
}

.form-checkbox[b-y3nfwee5g6] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.form-checkbox input[type="checkbox"][b-y3nfwee5g6] {
    margin-right: 8px;
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

.form-checkbox label[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

/* Report Templates */
.report-templates[b-y3nfwee5g6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.report-template[b-y3nfwee5g6] {
    padding: 16px;
    background-color: var(--surface-dark);
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.report-template:hover[b-y3nfwee5g6] {
    border-color: rgba(79, 70, 229, 0.3);
}

.report-template.active[b-y3nfwee5g6] {
    border-color: var(--primary);
    background-color: rgba(79, 70, 229, 0.05);
}

.report-template-icon[b-y3nfwee5g6] {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 12px;
}

.report-template-title[b-y3nfwee5g6] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.report-template-description[b-y3nfwee5g6] {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.report-options-header[b-y3nfwee5g6] {
    margin-bottom: 16px;
}

.report-options-title[b-y3nfwee5g6] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.report-options-subtitle[b-y3nfwee5g6] {
    font-size: 14px;
    color: var(--text-muted);
}

/* Loading States */
.loading-state[b-y3nfwee5g6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

.loading-text[b-y3nfwee5g6] {
    margin-top: 16px;
    font-size: 16px;
}

.spinner[b-y3nfwee5g6] {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin-b-y3nfwee5g6 1s linear infinite;
}

/* Skeleton loaders */
.skeleton-loader[b-y3nfwee5g6] {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: loading-b-y3nfwee5g6 1.5s infinite;
    border-radius: 4px;
    height: 14px;
    margin-bottom: 8px;
}

.stat-value-skeleton[b-y3nfwee5g6] {
    height: 28px;
    margin-bottom: 12px;
}

.stat-change-skeleton[b-y3nfwee5g6] {
    width: 80%;
    height: 12px;
}

@keyframes loading-b-y3nfwee5g6 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

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

/* Button Styles */
.action-button[b-y3nfwee5g6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.primary-button[b-y3nfwee5g6] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.primary-button:hover[b-y3nfwee5g6] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.secondary-button[b-y3nfwee5g6] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.secondary-button:hover[b-y3nfwee5g6] {
    background: rgba(255, 255, 255, 0.15);
}

.button-icon[b-y3nfwee5g6] {
    margin-right: 8px;
}

/* Utility Classes */
.mt-4[b-y3nfwee5g6] {
    margin-top: 16px;
}

.text-center[b-y3nfwee5g6] {
    text-align: center;
}

/* Responsive Adjustments */
@media (max-width: 1400px) {
    .stats-cards-grid[b-y3nfwee5g6] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .financial-breakdown[b-y3nfwee5g6],
    .payout-methods[b-y3nfwee5g6],
    .tax-info-grid[b-y3nfwee5g6],
    .upcoming-payout-grid[b-y3nfwee5g6] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .report-templates[b-y3nfwee5g6] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-cards-grid[b-y3nfwee5g6],
    .financial-breakdown[b-y3nfwee5g6],
    .payout-methods[b-y3nfwee5g6],
    .tax-info-grid[b-y3nfwee5g6],
    .upcoming-payout-grid[b-y3nfwee5g6],
    .report-templates[b-y3nfwee5g6] {
        grid-template-columns: 1fr;
    }
    
    .page-header[b-y3nfwee5g6] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-header > div:last-child[b-y3nfwee5g6] {
        margin-top: 16px;
        align-self: flex-end;
    }
    
    .stat-card[b-y3nfwee5g6] {
        padding: 16px;
    }
    
    .stat-value[b-y3nfwee5g6] {
        font-size: 24px;
    }
}
/* _content/WebUI/Components/Pages/ProviderView/MyServers.razor.rz.scp.css */
/* Grid Overlay */
.grid-overlay[b-lcbd4oy0nd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fixed layout structure */
.dashboard-layout[b-lcbd4oy0nd] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
}


.menu-section[b-lcbd4oy0nd] {
    padding: 16px 0;
}

.menu-header[b-lcbd4oy0nd] {
    padding: 8px 24px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-item[b-lcbd4oy0nd] {
    padding: 10px 24px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.menu-item.active[b-lcbd4oy0nd] {
    background-color: rgba(79, 70, 229, 0.15);
    color: #6366F1;
    border-left-color: #6366F1;
}

.menu-item:hover[b-lcbd4oy0nd] {
    background-color: rgba(255, 255, 255, 0.05);
}

.menu-icon[b-lcbd4oy0nd] {
    width: 20px;
    margin-right: 12px;
    text-align: center;
}

/* Organizations dropdown */
.dropdown-content[b-lcbd4oy0nd] {
    display: none;
    padding-left: 30px;
}

.dropdown-content.active[b-lcbd4oy0nd] {
    display: block;
}

.dropdown-item[b-lcbd4oy0nd] {
    padding: 8px 0 8px 24px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: all 0.2s ease;
    position: relative;
}

.dropdown-item:hover[b-lcbd4oy0nd] {
    color: #6366F1;
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item.active[b-lcbd4oy0nd] {
    color: #6366F1;
    background-color: rgba(79, 70, 229, 0.15);
    border-left: 3px solid #6366F1;
    font-weight: 500;
}

.dropdown-item.active[b-lcbd4oy0nd]:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6366F1;
}

.dropdown-toggle[b-lcbd4oy0nd] {
    cursor: pointer;
}

/* Page header */
.page-header[b-lcbd4oy0nd] {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title[b-lcbd4oy0nd] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-description[b-lcbd4oy0nd] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

/* Dashboard cards */
.dashboard-card[b-lcbd4oy0nd] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

/* Action buttons */
.action-button[b-lcbd4oy0nd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

/* Action button danger */
.action-button.danger[b-lcbd4oy0nd] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.action-button.danger:hover[b-lcbd4oy0nd] {
    background: rgba(239, 68, 68, 0.3);
}

/* Action button cancel */
.action-button.cancel[b-lcbd4oy0nd] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.action-button.cancel:hover[b-lcbd4oy0nd] {
    background: rgba(255, 255, 255, 0.2);
}

.primary-button[b-lcbd4oy0nd] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.primary-button:hover[b-lcbd4oy0nd] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.secondary-button[b-lcbd4oy0nd] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.primary-button .button-icon[b-lcbd4oy0nd],
.secondary-button .button-icon[b-lcbd4oy0nd] {
    margin-right: 8px;
}

/* Filter controls */
.filter-container[b-lcbd4oy0nd] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.filter-controls[b-lcbd4oy0nd] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-control[b-lcbd4oy0nd] {
    position: relative;
}

.filter-input[b-lcbd4oy0nd] {
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    min-width: 180px;
}

.filter-input:focus[b-lcbd4oy0nd] {
    outline: none;
    border-color: var(--primary);
}

.filter-label[b-lcbd4oy0nd] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    display: block;
}

/* Server cards */
.server-cards-grid[b-lcbd4oy0nd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.server-card[b-lcbd4oy0nd] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.server-card:hover[b-lcbd4oy0nd] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.server-header[b-lcbd4oy0nd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.server-name[b-lcbd4oy0nd] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.server-id[b-lcbd4oy0nd] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.server-status[b-lcbd4oy0nd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-online[b-lcbd4oy0nd] {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-provisioning[b-lcbd4oy0nd] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-offline[b-lcbd4oy0nd] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.server-section[b-lcbd4oy0nd] {
    margin-bottom: 14px;
}

.section-title[b-lcbd4oy0nd] {
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: 600;
}

.spec-grid[b-lcbd4oy0nd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.spec-item[b-lcbd4oy0nd] {
    margin-bottom: 8px;
}

.spec-label[b-lcbd4oy0nd] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2px;
}

.spec-value[b-lcbd4oy0nd] {
    font-size: 14px;
    font-weight: 500;
}

.server-footer[b-lcbd4oy0nd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.server-price[b-lcbd4oy0nd] {
    font-size: 16px;
    font-weight: 600;
}

.server-actions[b-lcbd4oy0nd] {
    display: flex;
    gap: 8px;
}

.action-icon[b-lcbd4oy0nd] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.action-icon:hover[b-lcbd4oy0nd] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.action-icon.primary[b-lcbd4oy0nd] {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.action-icon.primary:hover[b-lcbd4oy0nd] {
    background: rgba(99, 102, 241, 0.3);
}

.action-icon.warning[b-lcbd4oy0nd] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.action-icon.warning:hover[b-lcbd4oy0nd] {
    background: rgba(245, 158, 11, 0.3);
}

.action-icon.danger[b-lcbd4oy0nd] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.action-icon.danger:hover[b-lcbd4oy0nd] {
    background: rgba(239, 68, 68, 0.3);
}

/* Server metrics */
.metric-group[b-lcbd4oy0nd] {
    margin-bottom: 12px;
}

.metric-label[b-lcbd4oy0nd] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
}

.metric-label-text[b-lcbd4oy0nd] {
    color: rgba(255, 255, 255, 0.7);
}

.metric-value[b-lcbd4oy0nd] {
    color: white;
    font-weight: 500;
}

.metric-bar[b-lcbd4oy0nd] {
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.metric-fill[b-lcbd4oy0nd] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
}

.metric-fill.warning[b-lcbd4oy0nd] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.metric-fill.critical[b-lcbd4oy0nd] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Uptime Display */
.uptime-display[b-lcbd4oy0nd] {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 8px 12px;
    background-color: rgba(16, 185, 129, 0.1);
    border-radius: 6px;
    border-left: 3px solid var(--secondary);
}

.uptime-label[b-lcbd4oy0nd] {
    font-size: 13px;
    color: var(--secondary);
    font-weight: 500;
    margin-right: 8px;
}

.uptime-value[b-lcbd4oy0nd] {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.last-updated[b-lcbd4oy0nd] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
    margin-top: 10px;
    font-style: italic;
}

/* Modal styles */
.modal-overlay[b-lcbd4oy0nd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: all 0.3s ease;
}

.modal-overlay.active[b-lcbd4oy0nd] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* ensure clicks go through */

}

.modal-content[b-lcbd4oy0nd] {
    background-color: var(--dark);
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.modal-overlay.active .modal-content[b-lcbd4oy0nd] {
    transform: translateY(0);
}

.modal-header[b-lcbd4oy0nd] {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-lcbd4oy0nd] {
    font-size: 20px;
    font-weight: 600;
}

.modal-close[b-lcbd4oy0nd] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.modal-close:hover[b-lcbd4oy0nd] {
    background: rgba(255, 255, 255, 0.2);
}

.modal-body[b-lcbd4oy0nd] {
    padding: 20px;
}

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

/* Form styles */
.form-group[b-lcbd4oy0nd] {
    margin-bottom: 20px;
}

.form-label[b-lcbd4oy0nd] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.form-input[b-lcbd4oy0nd] {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-input:focus[b-lcbd4oy0nd] {
    outline: none;
    border-color: var(--primary);
    background-color: rgba(15, 23, 42, 0.8);
}

.form-select[b-lcbd4oy0nd] {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' width='18px' height='18px'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all 0.2s ease;
}

.form-select:focus[b-lcbd4oy0nd] {
    outline: none;
    border-color: var(--primary);
    background-color: rgba(15, 23, 42, 0.8);
}

.form-row[b-lcbd4oy0nd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Badges */
.badge[b-lcbd4oy0nd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-success[b-lcbd4oy0nd] {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
}

.badge-warning[b-lcbd4oy0nd] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.badge-danger[b-lcbd4oy0nd] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Server details modal */
.server-detail-grid[b-lcbd4oy0nd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.server-detail-section[b-lcbd4oy0nd] {
    margin-bottom: 24px;
}

.server-detail-title[b-lcbd4oy0nd] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-item[b-lcbd4oy0nd] {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}

.detail-label[b-lcbd4oy0nd] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.detail-value[b-lcbd4oy0nd] {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

/* Tooltip */
.tooltip-base[b-lcbd4oy0nd] {
    position: fixed;
    background: #0F172A;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    z-index: 99999;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: none;
    min-width: 280px;
    max-width: 350px;
    pointer-events: none;
}

/* Utils */
.gradient-text[b-lcbd4oy0nd] {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-up[b-lcbd4oy0nd] {
    color: var(--secondary);
}

.text-down[b-lcbd4oy0nd] {
    color: #ef4444;
}

.flex-between[b-lcbd4oy0nd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-link[b-lcbd4oy0nd] {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.text-link:hover[b-lcbd4oy0nd] {
    text-decoration: underline;
}

/* Loading container */
.loading-container[b-lcbd4oy0nd] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    width: 100%;
}

/* Empty state */
.empty-state[b-lcbd4oy0nd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon[b-lcbd4oy0nd] {
    font-size: 48px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.2);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-title[b-lcbd4oy0nd] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-description[b-lcbd4oy0nd] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
    max-width: 500px;
}
/* _content/WebUI/Components/Pages/ProviderView/RentalHistory.razor.rz.scp.css */
/* RentalHistory specific styles */

/* Page layout */
.page-header[b-7utqzd69vt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-title[b-7utqzd69vt] {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.page-description[b-7utqzd69vt] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Stats cards */
.stats-cards-grid[b-7utqzd69vt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-7utqzd69vt] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.stat-card:hover[b-7utqzd69vt] {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.stat-title[b-7utqzd69vt] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.stat-value[b-7utqzd69vt] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
}

.stat-change[b-7utqzd69vt] {
    display: flex;
    align-items: center;
}

.text-up[b-7utqzd69vt] {
    color: #10B981;
    margin-right: 8px;
}

.text-down[b-7utqzd69vt] {
    color: #EF4444;
    margin-right: 8px;
}

.text-neutral[b-7utqzd69vt] {
    color: #9CA3AF;
    margin-right: 8px;
}

.stat-subtitle[b-7utqzd69vt] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* Skeleton loaders */
.skeleton-loader[b-7utqzd69vt] {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: loading-b-7utqzd69vt 1.5s infinite;
    border-radius: 4px;
    height: 14px;
    margin-bottom: 8px;
}

.stat-value-skeleton[b-7utqzd69vt] {
    height: 28px;
    margin-bottom: 12px;
}

.stat-change-skeleton[b-7utqzd69vt] {
    width: 80%;
    height: 12px;
}

@keyframes loading-b-7utqzd69vt {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Action buttons */
.action-button[b-7utqzd69vt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.primary-button[b-7utqzd69vt] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.primary-button:hover[b-7utqzd69vt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.secondary-button[b-7utqzd69vt] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.secondary-button:hover[b-7utqzd69vt] {
    background: rgba(255, 255, 255, 0.15);
}

.button-icon[b-7utqzd69vt] {
    margin-right: 8px;
}

/* Tab navigation */
.tab-nav[b-7utqzd69vt] {
    display: flex;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tab-nav[b-7utqzd69vt]::-webkit-scrollbar {
    display: none;
}

.tab-button[b-7utqzd69vt] {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-button.active[b-7utqzd69vt] {
    color: var(--primary);
}

.tab-button.active[b-7utqzd69vt]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
}

.tab-button:hover[b-7utqzd69vt] {
    color: white;
}

.tab-content[b-7utqzd69vt] {
    display: none;
}

.tab-content.active[b-7utqzd69vt] {
    display: block;
}

/* Table styles */
.data-table[b-7utqzd69vt] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.data-table th[b-7utqzd69vt] {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.data-table td[b-7utqzd69vt] {
    padding: 14px 16px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.data-table tr:last-child td[b-7utqzd69vt] {
    border-bottom: none;
}

.data-table tr:hover[b-7utqzd69vt] {
    background: rgba(255, 255, 255, 0.05);
}

/* Rating stars */
.rating[b-7utqzd69vt] {
    display: flex;
    align-items: center;
}

.rating-value[b-7utqzd69vt] {
    margin-left: 8px;
    font-size: 14px;
}

.star[b-7utqzd69vt] {
    color: rgba(255, 255, 255, 0.2);
}

.star.filled[b-7utqzd69vt] {
    color: #fbbf24;
}

/* Finance cards */
.finance-cards-grid[b-7utqzd69vt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.finance-card[b-7utqzd69vt] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.finance-card-header[b-7utqzd69vt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.finance-card-title[b-7utqzd69vt] {
    font-size: 16px;
    font-weight: 600;
}

.finance-card-subtitle[b-7utqzd69vt] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.finance-card-content[b-7utqzd69vt] {
    margin-bottom: 16px;
}

.finance-data-row[b-7utqzd69vt] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.finance-data-label[b-7utqzd69vt] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.finance-data-value[b-7utqzd69vt] {
    font-size: 13px;
    font-weight: 500;
}

.finance-card-footer[b-7utqzd69vt] {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.finance-metric[b-7utqzd69vt] {
    font-size: 14px;
    font-weight: 600;
}

.finance-metric-value[b-7utqzd69vt] {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Charts */
.chart-card[b-7utqzd69vt] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px 20px 0 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.chart-header[b-7utqzd69vt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-title[b-7utqzd69vt] {
    font-size: 16px;
    font-weight: 600;
}

.chart-tabs[b-7utqzd69vt] {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 4px;
}

.chart-tab[b-7utqzd69vt] {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
}

.chart-tab.active[b-7utqzd69vt] {
    background: var(--primary);
    color: white;
}

.chart-container[b-7utqzd69vt] {
    height: 250px;
    position: relative;
}

/* Bar chart simulation */
.bar-chart[b-7utqzd69vt] {
    display: flex;
    align-items: flex-end;
    height: 200px;
    padding-top: 20px;
    justify-content: space-between;
}

.bar-chart-group[b-7utqzd69vt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    max-width: 40px;
}

.bar-chart-bar[b-7utqzd69vt] {
    width: 24px;
    background: linear-gradient(to top, var(--primary), var(--tertiary));
    border-radius: 3px 3px 0 0;
    position: relative;
    margin-bottom: 10px;
}

.bar-chart-bar:hover[b-7utqzd69vt]::after {
    content: attr(data-value);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
}

.bar-chart-label[b-7utqzd69vt] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Review cards */
.review-cards-grid[b-7utqzd69vt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.review-card[b-7utqzd69vt] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.review-header[b-7utqzd69vt] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.reviewer-info h4[b-7utqzd69vt] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.review-date[b-7utqzd69vt] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.review-text[b-7utqzd69vt] {
    margin-bottom: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.review-server-info[b-7utqzd69vt] {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.server-details h5[b-7utqzd69vt] {
    font-size: 14px;
    margin-bottom: 2px;
}

.server-rental-duration[b-7utqzd69vt] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.view-details-link[b-7utqzd69vt] {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
}

.view-details-link:hover[b-7utqzd69vt] {
    text-decoration: underline;
}

/* Rating distribution */
.rating-overview[b-7utqzd69vt] {
    display: flex;
    margin-bottom: 24px;
    padding: 20px;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.rating-summary[b-7utqzd69vt] {
    flex-shrink: 0;
    width: 150px;
    text-align: center;
    padding-right: 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.average-rating[b-7utqzd69vt] {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}

.rating-count[b-7utqzd69vt] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 10px;
}

.rating-bars[b-7utqzd69vt] {
    flex-grow: 1;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rating-bar-group[b-7utqzd69vt] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.rating-bar-label[b-7utqzd69vt] {
    display: flex;
    align-items: center;
    width: 40px;
    margin-right: 12px;
}

.rating-bar-track[b-7utqzd69vt] {
    flex-grow: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-right: 12px;
}

.rating-bar-fill[b-7utqzd69vt] {
    height: 100%;
    background: linear-gradient(to right, var(--primary), var(--tertiary));
    border-radius: 4px;
}

.rating-bar-percent[b-7utqzd69vt] {
    width: 40px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
}

/* Analytics section */
.analytics-grid[b-7utqzd69vt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.distribution-card[b-7utqzd69vt] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px 20px 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.distribution-title[b-7utqzd69vt] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.metric-label-text[b-7utqzd69vt] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.metric-value[b-7utqzd69vt] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.progress-container[b-7utqzd69vt] {
    margin-bottom: 24px;
}

.metric-label[b-7utqzd69vt] {
    margin-bottom: 0;
}

.metric-group[b-7utqzd69vt] {
    margin-bottom: 0;
}

/* Business health metrics */
.metrics-table[b-7utqzd69vt] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.metrics-table[b-7utqzd69vt] {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.metrics-table td[b-7utqzd69vt] {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.metrics-table tr:last-child td[b-7utqzd69vt] {
    border-bottom: none;
}

/* Pagination */
.pagination[b-7utqzd69vt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 16px;
}

.pagination-info[b-7utqzd69vt] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.pagination-controls[b-7utqzd69vt] {
    display: flex;
    gap: 8px;
}

.page-button[b-7utqzd69vt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-button:hover[b-7utqzd69vt] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.page-button.active[b-7utqzd69vt] {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Status badges */
.status-badge[b-7utqzd69vt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

.status-completed[b-7utqzd69vt] {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.status-active[b-7utqzd69vt] {
    background-color: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
}

.status-early[b-7utqzd69vt] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.status-error[b-7utqzd69vt] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.status-deleted[b-7utqzd69vt] {
    background-color: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* Loading state */
.loading-container[b-7utqzd69vt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    color: rgba(255, 255, 255, 0.7);
}

.spinner-container[b-7utqzd69vt] {
    margin-bottom: 20px;
}

.spinner[b-7utqzd69vt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(99, 102, 241, 0.3);
    border-top-color: var(--primary);
    animation: spin-b-7utqzd69vt 1s infinite linear;
}

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

/* Empty state */
.empty-state[b-7utqzd69vt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.empty-state-icon[b-7utqzd69vt] {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

.empty-state-title[b-7utqzd69vt] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state-description[b-7utqzd69vt] {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    max-width: 400px;
    line-height: 1.5;
}

/* Filter controls */
.filter-controls[b-7utqzd69vt] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    align-items: flex-end;
}

.filter-control[b-7utqzd69vt] {
    flex: 1;
    min-width: 180px;
}

.filter-label[b-7utqzd69vt] {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}

.filter-input[b-7utqzd69vt] {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.filter-input:focus[b-7utqzd69vt] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.filter-input[b-7utqzd69vt]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.filter-group[b-7utqzd69vt] {
    flex: none;
}
/* _content/WebUI/Components/Pages/ProviderView/StripeConnect.razor.rz.scp.css */
/* Card styles aligned with platform theme */
.card[b-tlaf3fh0i1] {
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
    overflow: hidden;
    background-color: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
}

/* Alert styles */
.alert[b-tlaf3fh0i1] {
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.alert-success[b-tlaf3fh0i1] {
    background-color: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--secondary, #10B981);
}

.alert-warning[b-tlaf3fh0i1] {
    background-color: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.alert-info[b-tlaf3fh0i1] {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
    color: var(--primary, #6366F1);
}

.alert-danger[b-tlaf3fh0i1] {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Text styles */
.text-muted[b-tlaf3fh0i1] {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

h5[b-tlaf3fh0i1] {
    color: var(--light-text, #F8FAFC);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Button styles */
.btn-primary[b-tlaf3fh0i1] {
    background: linear-gradient(135deg, var(--primary-color-start, #6366F1), var(--primary-color-end, #4F46E5));
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover[b-tlaf3fh0i1] {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4);
}

.btn-outline-danger[b-tlaf3fh0i1] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
}

.btn-outline-danger:hover[b-tlaf3fh0i1] {
    background: rgba(239, 68, 68, 0.2);
    color: #fff;
}

/* Loading spinner */
.spinner-border[b-tlaf3fh0i1] {
    width: 3rem;
    height: 3rem;
}

/* Info card */
.bg-light[b-tlaf3fh0i1] {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Icon colors */
.text-success[b-tlaf3fh0i1] {
    color: var(--secondary, #10B981) !important;
}

.text-primary[b-tlaf3fh0i1] {
    color: var(--primary, #6366F1) !important;
}

.text-info[b-tlaf3fh0i1] {
    color: #0dcaf0 !important;
}

.text-warning[b-tlaf3fh0i1] {
    color: #f59e0b !important;
}
/* _content/WebUI/Components/Pages/Public/AcceptableUsePolicy.razor.rz.scp.css */
/* Container and Layout */
.privacy-policy-container[b-ibg64t0l29] {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    min-height: 100vh;
}

.privacy-header[b-ibg64t0l29] {
    text-align: center;
    margin-bottom: 60px;
}

.privacy-header h1[b-ibg64t0l29] {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.last-updated[b-ibg64t0l29] {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.privacy-content[b-ibg64t0l29] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.terms-breadcrumb[b-ibg64t0l29] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    justify-content: center;
}

.terms-breadcrumb a[b-ibg64t0l29] {
    color: var(--primary-color-start);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.terms-breadcrumb a:hover[b-ibg64t0l29] {
    opacity: 0.8;
}

.terms-breadcrumb .separator[b-ibg64t0l29] {
    color: var(--text-muted);
    opacity: 0.5;
}

.terms-breadcrumb .current[b-ibg64t0l29] {
    color: var(--text-muted);
    font-weight: 500;
}

/* Table of Contents */
.table-of-contents[b-ibg64t0l29] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.table-of-contents h2[b-ibg64t0l29] {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 24px;
}

.table-of-contents ol[b-ibg64t0l29] {
    list-style: none;
    counter-reset: toc-counter;
    padding: 0;
    margin: 0;
}

.table-of-contents ol li[b-ibg64t0l29] {
    counter-increment: toc-counter;
    margin-bottom: 12px;
    position: relative;
    padding-left: 40px;
}

.table-of-contents ol li[b-ibg64t0l29]::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: 600;
    font-size: 16px;
}

.table-of-contents a[b-ibg64t0l29] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

.table-of-contents a:hover[b-ibg64t0l29] {
    color: #fff;
    transform: translateX(4px);
}

/* Terms Section Styling */
.terms-section[b-ibg64t0l29] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.terms-section h2[b-ibg64t0l29] {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

/* Section Content */
.section-content[b-ibg64t0l29] {
    margin-bottom: 40px;
}

.section-content:last-child[b-ibg64t0l29] {
    margin-bottom: 0;
}

.section-content h3[b-ibg64t0l29] {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.section-content h3[b-ibg64t0l29]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    margin-right: 12px;
    border-radius: 2px;
}

.section-content h4[b-ibg64t0l29] {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 24px 0 16px;
}

.section-content p[b-ibg64t0l29] {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-align: justify;
}

.section-content p:last-child[b-ibg64t0l29] {
    margin-bottom: 0;
}

.section-content strong[b-ibg64t0l29] {
    color: #fff;
    font-weight: 600;
}

/* List Styling */
.section-content ul[b-ibg64t0l29] {
    margin: 16px 0;
    padding-left: 24px;
    list-style: none;
}

.section-content ul li[b-ibg64t0l29] {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.8;
    color: var(--text-muted);
    padding-left: 20px;
}

.section-content ul li[b-ibg64t0l29]::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: bold;
}

.section-content ul li strong[b-ibg64t0l29] {
    color: #fff;
    font-weight: 600;
}

/* Nested Lists */
.section-content ul ul[b-ibg64t0l29] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.section-content ul ul li[b-ibg64t0l29]::before {
    content: '◦';
    font-size: 12px;
}

/* Interactive Elements */
.section-content h3:hover[b-ibg64t0l29] {
    color: var(--primary-color-start);
    transition: color 0.3s ease;
}

/* Highlight Important Text */
.section-content p:has(strong:first-child)[b-ibg64t0l29] {
    background-color: rgba(99, 102, 241, 0.05);
    padding: 16px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color-start);
    margin: 20px 0;
}

/* Text Readability */
.section-content p[b-ibg64t0l29],
.section-content li[b-ibg64t0l29] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Visual Separation */
.terms-section + .terms-section[b-ibg64t0l29] {
    margin-top: 40px;
}

/* Smooth Scrolling */
html[b-ibg64t0l29] {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .privacy-content[b-ibg64t0l29] {
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .privacy-policy-container[b-ibg64t0l29] {
        padding: 60px 0;
    }
    
    .privacy-header h1[b-ibg64t0l29] {
        font-size: 36px;
    }
    
    .terms-section[b-ibg64t0l29] {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .terms-section h2[b-ibg64t0l29] {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    .section-content h3[b-ibg64t0l29] {
        font-size: 20px;
    }
    
    .section-content p[b-ibg64t0l29] {
        font-size: 15px;
        text-align: left;
    }
    
    .terms-breadcrumb[b-ibg64t0l29] {
        font-size: 12px;
        gap: 8px;
    }
    
    .table-of-contents[b-ibg64t0l29] {
        padding: 24px;
    }
    
    .table-of-contents h2[b-ibg64t0l29] {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .table-of-contents ol li[b-ibg64t0l29] {
        padding-left: 32px;
        margin-bottom: 8px;
    }
    
    .table-of-contents a[b-ibg64t0l29] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .privacy-header h1[b-ibg64t0l29] {
        font-size: 28px;
    }
    
    .last-updated[b-ibg64t0l29] {
        font-size: 16px;
    }
    
    .terms-section[b-ibg64t0l29] {
        padding: 20px;
        border-radius: 12px;
    }
    
    .terms-section h2[b-ibg64t0l29] {
        font-size: 24px;
    }
    
    .section-content h3[b-ibg64t0l29] {
        font-size: 18px;
    }
    
    .section-content h3[b-ibg64t0l29]::before {
        width: 3px;
        height: 20px;
        margin-right: 8px;
    }
    
    .table-of-contents[b-ibg64t0l29] {
        padding: 20px;
    }
    
    .table-of-contents h2[b-ibg64t0l29] {
        font-size: 18px;
    }
    
    .table-of-contents ol li[b-ibg64t0l29] {
        padding-left: 28px;
    }
    
    .table-of-contents ol li[b-ibg64t0l29]::before {
        font-size: 14px;
    }
}
/* _content/WebUI/Components/Pages/Public/Careers.razor.rz.scp.css */
.careers-hero[b-djjv08bzio] {
    padding: 100px 0 60px;
    text-align: center;
}

.careers-hero h1[b-djjv08bzio] {
    font-size: 48px;
    margin-bottom: 16px;
}

.section-title[b-djjv08bzio] {
    text-align: center;
    margin-bottom: 30px;
}

.hero-intro[b-djjv08bzio] {
    max-width: 800px;
    margin: 0 auto;
}

.hero-intro p[b-djjv08bzio] {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
}

.application-section[b-djjv08bzio] {
    padding: 80px 0;
}

.form-container[b-djjv08bzio] {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}

.form-container h2[b-djjv08bzio] {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: var(--primary-color-start);
}

.form-group[b-djjv08bzio] {
    margin-bottom: 25px;
}

.form-group label[b-djjv08bzio] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #fff;
}

.form-input[b-djjv08bzio],
.form-textarea[b-djjv08bzio] {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(15, 23, 42, 0.3);
    color: #fff;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus[b-djjv08bzio],
.form-textarea:focus[b-djjv08bzio] {
    outline: none;
    border-color: var(--primary-color-start);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-input.error[b-djjv08bzio],
.form-textarea.error[b-djjv08bzio] {
    border-color: #ef4444;
}

.error-message[b-djjv08bzio] {
    color: #ef4444;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

.form-textarea[b-djjv08bzio] {
    resize: vertical;
    min-height: 120px;
}

.upload-box[b-djjv08bzio] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background-color: rgba(15, 23, 42, 0.3);
    color: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    padding: 20px;
    overflow: hidden;
}

.upload-box.error[b-djjv08bzio] {
    border-color: #ef4444;
}

.form-file[b-djjv08bzio] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 2;
}

.file-selected[b-djjv08bzio] {
    margin-top: 8px;
    padding: 8px;
    background-color: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    color: var(--primary-color-start);
    font-size: 14px;
}

.file-error[b-djjv08bzio] {
    margin-top: 8px;
    padding: 8px;
    background-color: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
    color: #ef4444;
    font-size: 14px;
}

.btn-submit[b-djjv08bzio] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    color: white;
}

.btn-submit:hover:not(:disabled)[b-djjv08bzio] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.btn-submit:disabled[b-djjv08bzio] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.checkbox-item[b-djjv08bzio] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: normal;
    margin-bottom: 0;
}

.checkbox-item:hover[b-djjv08bzio] {
    background-color: rgba(255, 255, 255, 0.05);
}

.checkbox-item input[type="checkbox"][b-djjv08bzio] {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color-start);
}

.checkbox-item input[type="checkbox"]:disabled[b-djjv08bzio] {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-item span[b-djjv08bzio] {
    color: #fff;
    font-size: 14px;
}

.job-category[b-djjv08bzio] {
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background-color: rgba(15, 23, 42, 0.3);
    padding: 0.75rem;
}

.expand-btn[b-djjv08bzio] {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0;
}

.expand-icon[b-djjv08bzio] {
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.expand-icon.rotated[b-djjv08bzio] {
    transform: rotate(180deg);
}

.job-options[b-djjv08bzio] {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.other-input[b-djjv08bzio] {
    margin-top: 8px;
    grid-column: 1 / -1;
}

.remote-preference[b-djjv08bzio] {
    margin-top: 12px;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}

.file-upload-container[b-djjv08bzio] {
    position: relative;
    height: 140px;
}

.file-upload-hint[b-djjv08bzio] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: var(--text-muted);
    font-size: 14px;
}

.character-count[b-djjv08bzio] {
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}

/* Modal Styles */
.modal-overlay[b-djjv08bzio] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    animation: fadeIn-b-djjv08bzio 0.3s ease-out;
}

@keyframes fadeIn-b-djjv08bzio {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-djjv08bzio] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-djjv08bzio 0.3s ease-out;
    text-align: center;
}

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

.modal-icon[b-djjv08bzio] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn-b-djjv08bzio 0.5s ease-out 0.2s both;
}

@keyframes scaleIn-b-djjv08bzio {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.modal-icon i[b-djjv08bzio] {
    font-size: 40px;
    color: white;
}

.modal-content h3[b-djjv08bzio] {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--primary-color-start);
}

.modal-content p[b-djjv08bzio] {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 25px;
}

.modal-button[b-djjv08bzio] {
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-button:hover[b-djjv08bzio] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

/* Loading state */
.submitting-overlay[b-djjv08bzio] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.submitting-content[b-djjv08bzio] {
    text-align: center;
}

.spinner[b-djjv08bzio] {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-color-start);
    border-radius: 50%;
    animation: spin-b-djjv08bzio 1s linear infinite;
}

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

.submitting-text[b-djjv08bzio] {
    font-size: 18px;
    color: white;
    font-weight: 500;
}

@media (max-width: 768px) {
    .careers-hero h1[b-djjv08bzio] {
        font-size: 36px;
    }
    
    .form-container[b-djjv08bzio] {
        margin: 0 20px;
        padding: 30px 20px;
    }
    
    .modal-content[b-djjv08bzio] {
        padding: 30px 20px;
    }
}
/* _content/WebUI/Components/Pages/Public/CloudMarketplaceTerms.razor.rz.scp.css */
/* Container and Layout */
.privacy-policy-container[b-hm69xg80na] {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    min-height: 100vh;
}

.privacy-header[b-hm69xg80na] {
    text-align: center;
    margin-bottom: 60px;
}

.privacy-header h1[b-hm69xg80na] {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.last-updated[b-hm69xg80na] {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.privacy-content[b-hm69xg80na] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.terms-breadcrumb[b-hm69xg80na] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    justify-content: center;
}

.terms-breadcrumb a[b-hm69xg80na] {
    color: var(--primary-color-start);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.terms-breadcrumb a:hover[b-hm69xg80na] {
    opacity: 0.8;
}

.terms-breadcrumb .separator[b-hm69xg80na] {
    color: var(--text-muted);
    opacity: 0.5;
}

.terms-breadcrumb .current[b-hm69xg80na] {
    color: var(--text-muted);
    font-weight: 500;
}

/* Table of Contents */
.table-of-contents[b-hm69xg80na] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.table-of-contents h2[b-hm69xg80na] {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 24px;
}

.table-of-contents ol[b-hm69xg80na] {
    list-style: none;
    counter-reset: toc-counter;
    padding: 0;
    margin: 0;
}

.table-of-contents ol li[b-hm69xg80na] {
    counter-increment: toc-counter;
    margin-bottom: 12px;
    position: relative;
    padding-left: 40px;
}

.table-of-contents ol li[b-hm69xg80na]::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: 600;
    font-size: 16px;
}

.table-of-contents a[b-hm69xg80na] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

.table-of-contents a:hover[b-hm69xg80na] {
    color: #fff;
    transform: translateX(4px);
}

/* Terms Section Styling */
.terms-section[b-hm69xg80na] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.terms-section h2[b-hm69xg80na] {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

/* Section Content */
.section-content[b-hm69xg80na] {
    margin-bottom: 40px;
}

.section-content:last-child[b-hm69xg80na] {
    margin-bottom: 0;
}

.section-content h3[b-hm69xg80na] {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.section-content h3[b-hm69xg80na]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    margin-right: 12px;
    border-radius: 2px;
}

.section-content h4[b-hm69xg80na] {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 24px 0 16px;
}

.section-content p[b-hm69xg80na] {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-align: justify;
}

.section-content p:last-child[b-hm69xg80na] {
    margin-bottom: 0;
}

.section-content strong[b-hm69xg80na] {
    color: #fff;
    font-weight: 600;
}

/* List Styling */
.section-content ul[b-hm69xg80na] {
    margin: 16px 0;
    padding-left: 24px;
    list-style: none;
}

.section-content ul li[b-hm69xg80na] {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.8;
    color: var(--text-muted);
    padding-left: 20px;
}

.section-content ul li[b-hm69xg80na]::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: bold;
}

.section-content ul li strong[b-hm69xg80na] {
    color: #fff;
    font-weight: 600;
}

/* Nested Lists */
.section-content ul ul[b-hm69xg80na] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.section-content ul ul li[b-hm69xg80na]::before {
    content: '◦';
    font-size: 12px;
}

/* Interactive Elements */
.section-content h3:hover[b-hm69xg80na] {
    color: var(--primary-color-start);
    transition: color 0.3s ease;
}

/* Highlight Important Text */
.section-content p:has(strong:first-child)[b-hm69xg80na] {
    background-color: rgba(99, 102, 241, 0.05);
    padding: 16px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color-start);
    margin: 20px 0;
}

/* Text Readability */
.section-content p[b-hm69xg80na],
.section-content li[b-hm69xg80na] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Visual Separation */
.terms-section + .terms-section[b-hm69xg80na] {
    margin-top: 40px;
}

/* Smooth Scrolling */
html[b-hm69xg80na] {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .privacy-content[b-hm69xg80na] {
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .privacy-policy-container[b-hm69xg80na] {
        padding: 60px 0;
    }
    
    .privacy-header h1[b-hm69xg80na] {
        font-size: 36px;
    }
    
    .terms-section[b-hm69xg80na] {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .terms-section h2[b-hm69xg80na] {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    .section-content h3[b-hm69xg80na] {
        font-size: 20px;
    }
    
    .section-content p[b-hm69xg80na] {
        font-size: 15px;
        text-align: left;
    }
    
    .terms-breadcrumb[b-hm69xg80na] {
        font-size: 12px;
        gap: 8px;
    }
    
    .table-of-contents[b-hm69xg80na] {
        padding: 24px;
    }
    
    .table-of-contents h2[b-hm69xg80na] {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .table-of-contents ol li[b-hm69xg80na] {
        padding-left: 32px;
        margin-bottom: 8px;
    }
    
    .table-of-contents a[b-hm69xg80na] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .privacy-header h1[b-hm69xg80na] {
        font-size: 28px;
    }
    
    .last-updated[b-hm69xg80na] {
        font-size: 16px;
    }
    
    .terms-section[b-hm69xg80na] {
        padding: 20px;
        border-radius: 12px;
    }
    
    .terms-section h2[b-hm69xg80na] {
        font-size: 24px;
    }
    
    .section-content h3[b-hm69xg80na] {
        font-size: 18px;
    }
    
    .section-content h3[b-hm69xg80na]::before {
        width: 3px;
        height: 20px;
        margin-right: 8px;
    }
    
    .table-of-contents[b-hm69xg80na] {
        padding: 20px;
    }
    
    .table-of-contents h2[b-hm69xg80na] {
        font-size: 18px;
    }
    
    .table-of-contents ol li[b-hm69xg80na] {
        padding-left: 28px;
    }
    
    .table-of-contents ol li[b-hm69xg80na]::before {
        font-size: 14px;
    }
}
/* _content/WebUI/Components/Pages/Public/ContactSales.razor.rz.scp.css */
/* ContactSales Page Styles */

/* Add gradient animation */
@keyframes gradient-shift-b-edj7cry6ot {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes glow-b-edj7cry6ot {
    0% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); }
    100% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.3); }
}

:root[b-edj7cry6ot] {
    --primary-600: #6366F1;
    --primary-700: #4F46E5;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --bg-dark: #020617;
    --bg-darker: #0F172A;
    --bg-card: rgba(15, 23, 42, 0.6);
    --text-light: #FFFFFF;
    --text-muted: #94A3B8;
    --success-600: #10B981;
    --error-600: #dc2626;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
}

/* Base font styles */
*[b-edj7cry6ot] {
    font-family: 'Inter', sans-serif;
}

h1[b-edj7cry6ot], h2[b-edj7cry6ot], h3[b-edj7cry6ot], h4[b-edj7cry6ot], h5[b-edj7cry6ot], h6[b-edj7cry6ot] {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

.contact-sales-page[b-edj7cry6ot] {
    min-height: 100vh;
    background: var(--bg-dark);
    padding: 2rem 0;
    font-family: 'Inter', sans-serif;
}

.container[b-edj7cry6ot] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.header[b-edj7cry6ot] {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, var(--bg-card) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.header[b-edj7cry6ot]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    animation: rotate-b-edj7cry6ot 30s linear infinite;
}

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

.header-content[b-edj7cry6ot] {
    text-align: center;
}

.header h1[b-edj7cry6ot] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.subtitle[b-edj7cry6ot] {
    font-size: 20px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

/* Trust Badges */
.trust-badges[b-edj7cry6ot] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.trust-badge[b-edj7cry6ot] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 14px;
}

.trust-badge .icon[b-edj7cry6ot] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary-600);
}

/* Social Proof */
.social-proof[b-edj7cry6ot] {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99, 102, 241, 0.05) 100%);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.social-proof p[b-edj7cry6ot] {
    color: var(--text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.client-logos[b-edj7cry6ot] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.client-logo[b-edj7cry6ot] {
    height: 40px;
    opacity: 0.5;
    filter: grayscale(100%) brightness(0) invert(1);
    transition: all 0.3s ease;
}

.client-logo:hover[b-edj7cry6ot] {
    opacity: 0.8;
    filter: grayscale(100%) brightness(0) invert(1);
    transform: scale(1.1);
}

/* Progress Bar */
.progress-container[b-edj7cry6ot] {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.progress-container[b-edj7cry6ot]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
    animation: shimmer-b-edj7cry6ot 3s ease-in-out infinite;
}

@keyframes shimmer-b-edj7cry6ot {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

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

.progress-fill[b-edj7cry6ot] {
    height: 100%;
    background: linear-gradient(to right, var(--primary-600), var(--primary-700));
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text[b-edj7cry6ot] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-muted);
}

/* Selected Services Sidebar */
.selected-services[b-edj7cry6ot] {
    position: fixed;
    right: -300px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease;
    max-width: 250px;
    z-index: 100;
}

.selected-services.visible[b-edj7cry6ot] {
    right: 0;
}

.selected-services h3[b-edj7cry6ot] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.selected-services ul[b-edj7cry6ot] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selected-services li[b-edj7cry6ot] {
    padding: 0.5rem 0;
    color: var(--text-muted);
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Form Container */
.form-container[b-edj7cry6ot] {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Sections */
.section[b-edj7cry6ot] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.section[b-edj7cry6ot]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-600), var(--primary-700));
    opacity: 0.6;
}

.section:hover[b-edj7cry6ot] {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

.section-header[b-edj7cry6ot] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.section-number[b-edj7cry6ot] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
    position: relative;
}

.section-number[b-edj7cry6ot]::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-600), transparent);
    opacity: 0.3;
    z-index: -1;
    animation: pulse-b-edj7cry6ot 2s ease-in-out infinite;
}

@keyframes pulse-b-edj7cry6ot {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.1; }
}

.section h2[b-edj7cry6ot] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
    letter-spacing: -0.5px;
}

.subsection[b-edj7cry6ot] {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.subsection:last-child[b-edj7cry6ot] {
    margin-bottom: 0;
}

.subsection h4[b-edj7cry6ot] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.subsection h4[b-edj7cry6ot]::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom, var(--primary-600), var(--primary-700));
    border-radius: 2px;
}

/* Form Elements */
.form-row[b-edj7cry6ot] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .form-row[b-edj7cry6ot] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-edj7cry6ot] {
    margin-bottom: 1rem;
}

.form-group label[b-edj7cry6ot] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.required[b-edj7cry6ot] {
    color: var(--error-600);
}

.form-input[b-edj7cry6ot],
.form-textarea[b-edj7cry6ot],
.form-group select[b-edj7cry6ot] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    transition: border-color 0.2s ease;
}

.form-input:focus[b-edj7cry6ot],
.form-textarea:focus[b-edj7cry6ot],
.form-group select:focus[b-edj7cry6ot] {
    outline: none;
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 0 20px rgba(99, 102, 241, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

.form-textarea[b-edj7cry6ot] {
    resize: vertical;
    min-height: 100px;
}

.field-help[b-edj7cry6ot] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.error-message[b-edj7cry6ot] {
    font-size: 12px;
    color: var(--error-600);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.success-message[b-edj7cry6ot] {
    font-size: 12px;
    color: var(--success-600);
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.input-invalid[b-edj7cry6ot] {
    border-color: var(--error-600) !important;
    background: rgba(220, 38, 38, 0.05) !important;
    animation: shake-b-edj7cry6ot 0.3s ease-in-out;
}

@keyframes shake-b-edj7cry6ot {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.input-valid[b-edj7cry6ot] {
    border-color: var(--success-600) !important;
}

/* Checkbox Grid */
.checkbox-grid[b-edj7cry6ot] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.checkbox-item[b-edj7cry6ot] {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.checkbox-item:hover[b-edj7cry6ot] {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);
}

.checkbox-item[b-edj7cry6ot]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left 0.5s ease;
}

.checkbox-item:hover[b-edj7cry6ot]::before {
    left: 100%;
}

.checkbox-item.checked[b-edj7cry6ot] {
    border-color: var(--primary-600);
    background: rgba(99, 102, 241, 0.15);
    box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.1);
}

.checkbox-item input[type="checkbox"][b-edj7cry6ot] {
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    cursor: pointer;
}

.checkbox-item label[b-edj7cry6ot] {
    cursor: pointer;
    flex: 1;
}

.checkbox-item strong[b-edj7cry6ot] {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.checkbox-item small[b-edj7cry6ot] {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Conditional Sections */
.conditional-section[b-edj7cry6ot] {
    display: none;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 2px solid rgba(99, 102, 241, 0.2);
    position: relative;
}

.conditional-section[b-edj7cry6ot]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary-600), var(--primary-700));
    border-radius: var(--radius-lg);
    opacity: 0.1;
    z-index: -1;
}

.conditional-section.active[b-edj7cry6ot] {
    display: block;
}

.conditional-header[b-edj7cry6ot] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

/* Smart Suggestions */
.smart-suggestions[b-edj7cry6ot] {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-top: 1rem;
}

/* Cross Reference */
.cross-reference[b-edj7cry6ot] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Submit Section */
.submit-section[b-edj7cry6ot] {
    text-align: center;
    margin-top: 3rem;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.submit-section[b-edj7cry6ot]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-600), transparent);
}

.consent-checkboxes[b-edj7cry6ot] {
    max-width: 600px;
    margin: 0 auto 2rem;
    text-align: left;
}

.consent-item[b-edj7cry6ot] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.consent-item input[type="checkbox"][b-edj7cry6ot] {
    margin-right: 0.5rem;
    margin-top: 0.25rem;
}

.consent-item label[b-edj7cry6ot] {
    font-size: 14px;
    color: var(--text-muted);
}

.submit-button[b-edj7cry6ot] {
    background: var(--primary-600);
    color: white;
    padding: 1rem 3rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.submit-button:hover:not(:disabled)[b-edj7cry6ot] {
    background: var(--primary-700);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
}

.submit-button:disabled[b-edj7cry6ot] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Value Props */
.value-props[b-edj7cry6ot] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.value-prop[b-edj7cry6ot] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 14px;
}

/* Loading Overlay */
.loading-overlay[b-edj7cry6ot] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner[b-edj7cry6ot] {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-edj7cry6ot 1s linear infinite;
}

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

/* Success Modal */
.modal-overlay[b-edj7cry6ot] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.success-modal-content[b-edj7cry6ot] {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: var(--radius-lg);
    max-width: 500px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    color: var(--text-light);
}

.success-modal-content h3[b-edj7cry6ot] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.success-modal-content p[b-edj7cry6ot] {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
}

.modal-icon[b-edj7cry6ot] {
    width: 4rem;
    height: 4rem;
    background: var(--success-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    color: white;
    font-size: 2rem;
    animation: glow-b-edj7cry6ot 2s ease-in-out infinite;
}

.modal-button[b-edj7cry6ot] {
    background: var(--primary-600);
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 1.5rem;
}

.modal-button:hover[b-edj7cry6ot] {
    background: var(--primary-700);
}

/* Notification */
.notification[b-edj7cry6ot] {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 1000;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-light);
}

.notification.show[b-edj7cry6ot] {
    transform: translateX(0);
}

.notification-success[b-edj7cry6ot] {
    border-left: 4px solid var(--success-600);
}

.notification-error[b-edj7cry6ot] {
    border-left: 4px solid var(--error-600);
}

/* Exit Intent Modal */
.exit-intent-modal[b-edj7cry6ot] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.exit-intent-content[b-edj7cry6ot] {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: var(--radius-lg);
    max-width: 500px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    font-family: 'Inter', sans-serif;
    color: var(--text-light);
}

.exit-intent-close[b-edj7cry6ot] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gray-400);
    cursor: pointer;
}

.exit-intent-close:hover[b-edj7cry6ot] {
    color: var(--gray-600);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .selected-services[b-edj7cry6ot] {
        display: none;
    }
}

@media (max-width: 768px) {
    .form-container[b-edj7cry6ot] {
        padding: 1.5rem;
    }
    
    .header h1[b-edj7cry6ot] {
        font-size: 36px;
    }
    
    .trust-badges[b-edj7cry6ot] {
        gap: 1rem;
    }
    
    .checkbox-grid[b-edj7cry6ot] {
        grid-template-columns: 1fr;
    }
    
    .value-props[b-edj7cry6ot] {
        flex-direction: column;
        align-items: center;
    }
}

/* Validation Summary */
.validation-summary[b-edj7cry6ot] {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
    animation: slideDown-b-edj7cry6ot 0.3s ease-out;
}

@keyframes slideDown-b-edj7cry6ot {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.validation-summary-header[b-edj7cry6ot] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #EF4444;
    font-weight: 600;
    margin-bottom: 1rem;
}

.validation-summary-header i[b-edj7cry6ot] {
    font-size: 1.25rem;
}

.validation-summary-list[b-edj7cry6ot] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-summary-list li[b-edj7cry6ot] {
    color: var(--text-light);
    padding: 0.5rem 0;
    padding-left: 2rem;
    position: relative;
    border-bottom: 1px solid rgba(220, 38, 38, 0.1);
}

.validation-summary-list li:last-child[b-edj7cry6ot] {
    border-bottom: none;
}

.validation-summary-list li[b-edj7cry6ot]:before {
    content: "•";
    color: #EF4444;
    font-weight: bold;
    position: absolute;
    left: 0.75rem;
}

/* Placeholder and Form Element Dark Theme Styles */
.form-input[b-edj7cry6ot]::placeholder,
.form-textarea[b-edj7cry6ot]::placeholder {
    color: rgba(148, 163, 184, 0.5);
    opacity: 1;
}

.form-group select[b-edj7cry6ot] {
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.05);
}

.form-group select option[b-edj7cry6ot] {
    background: var(--bg-darker);
    color: var(--text-light);
    padding: 0.5rem;
}

.form-group select[b-edj7cry6ot]::-ms-expand {
    color: var(--text-muted);
}

/* Custom scrollbar for dark theme */
.form-textarea[b-edj7cry6ot]::-webkit-scrollbar {
    width: 8px;
}

.form-textarea[b-edj7cry6ot]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.form-textarea[b-edj7cry6ot]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.form-textarea[b-edj7cry6ot]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}
/* _content/WebUI/Components/Pages/Public/DisputeResolution.razor.rz.scp.css */
/* Container and Layout */
.privacy-policy-container[b-qjd4dkosfq] {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    min-height: 100vh;
}

.privacy-header[b-qjd4dkosfq] {
    text-align: center;
    margin-bottom: 60px;
}

.privacy-header h1[b-qjd4dkosfq] {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.last-updated[b-qjd4dkosfq] {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.privacy-content[b-qjd4dkosfq] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.terms-breadcrumb[b-qjd4dkosfq] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    justify-content: center;
}

.terms-breadcrumb a[b-qjd4dkosfq] {
    color: var(--primary-color-start);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.terms-breadcrumb a:hover[b-qjd4dkosfq] {
    opacity: 0.8;
}

.terms-breadcrumb .separator[b-qjd4dkosfq] {
    color: var(--text-muted);
    opacity: 0.5;
}

.terms-breadcrumb .current[b-qjd4dkosfq] {
    color: var(--text-muted);
    font-weight: 500;
}

/* Table of Contents */
.table-of-contents[b-qjd4dkosfq] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.table-of-contents h2[b-qjd4dkosfq] {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 24px;
}

.table-of-contents ol[b-qjd4dkosfq] {
    list-style: none;
    counter-reset: toc-counter;
    padding: 0;
    margin: 0;
}

.table-of-contents ol li[b-qjd4dkosfq] {
    counter-increment: toc-counter;
    margin-bottom: 12px;
    position: relative;
    padding-left: 40px;
}

.table-of-contents ol li[b-qjd4dkosfq]::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: 600;
    font-size: 16px;
}

.table-of-contents a[b-qjd4dkosfq] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

.table-of-contents a:hover[b-qjd4dkosfq] {
    color: #fff;
    transform: translateX(4px);
}

/* Terms Section Styling */
.terms-section[b-qjd4dkosfq] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.terms-section h2[b-qjd4dkosfq] {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

/* Section Content */
.section-content[b-qjd4dkosfq] {
    margin-bottom: 40px;
}

.section-content:last-child[b-qjd4dkosfq] {
    margin-bottom: 0;
}

.section-content h3[b-qjd4dkosfq] {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.section-content h3[b-qjd4dkosfq]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    margin-right: 12px;
    border-radius: 2px;
}

.section-content h4[b-qjd4dkosfq] {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 24px 0 16px;
}

.section-content p[b-qjd4dkosfq] {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-align: justify;
}

.section-content p:last-child[b-qjd4dkosfq] {
    margin-bottom: 0;
}

.section-content strong[b-qjd4dkosfq] {
    color: #fff;
    font-weight: 600;
}

/* List Styling */
.section-content ul[b-qjd4dkosfq] {
    margin: 16px 0;
    padding-left: 24px;
    list-style: none;
}

.section-content ul li[b-qjd4dkosfq] {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.8;
    color: var(--text-muted);
    padding-left: 20px;
}

.section-content ul li[b-qjd4dkosfq]::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: bold;
}

.section-content ul li strong[b-qjd4dkosfq] {
    color: #fff;
    font-weight: 600;
}

/* Nested Lists */
.section-content ul ul[b-qjd4dkosfq] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.section-content ul ul li[b-qjd4dkosfq]::before {
    content: '◦';
    font-size: 12px;
}

/* Interactive Elements */
.section-content h3:hover[b-qjd4dkosfq] {
    color: var(--primary-color-start);
    transition: color 0.3s ease;
}

/* Highlight Important Text */
.section-content p:has(strong:first-child)[b-qjd4dkosfq] {
    background-color: rgba(99, 102, 241, 0.05);
    padding: 16px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color-start);
    margin: 20px 0;
}

/* Text Readability */
.section-content p[b-qjd4dkosfq],
.section-content li[b-qjd4dkosfq] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Visual Separation */
.terms-section + .terms-section[b-qjd4dkosfq] {
    margin-top: 40px;
}

/* Smooth Scrolling */
html[b-qjd4dkosfq] {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .privacy-content[b-qjd4dkosfq] {
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .privacy-policy-container[b-qjd4dkosfq] {
        padding: 60px 0;
    }
    
    .privacy-header h1[b-qjd4dkosfq] {
        font-size: 36px;
    }
    
    .terms-section[b-qjd4dkosfq] {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .terms-section h2[b-qjd4dkosfq] {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    .section-content h3[b-qjd4dkosfq] {
        font-size: 20px;
    }
    
    .section-content p[b-qjd4dkosfq] {
        font-size: 15px;
        text-align: left;
    }
    
    .terms-breadcrumb[b-qjd4dkosfq] {
        font-size: 12px;
        gap: 8px;
    }
    
    .table-of-contents[b-qjd4dkosfq] {
        padding: 24px;
    }
    
    .table-of-contents h2[b-qjd4dkosfq] {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .table-of-contents ol li[b-qjd4dkosfq] {
        padding-left: 32px;
        margin-bottom: 8px;
    }
    
    .table-of-contents a[b-qjd4dkosfq] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .privacy-header h1[b-qjd4dkosfq] {
        font-size: 28px;
    }
    
    .last-updated[b-qjd4dkosfq] {
        font-size: 16px;
    }
    
    .terms-section[b-qjd4dkosfq] {
        padding: 20px;
        border-radius: 12px;
    }
    
    .terms-section h2[b-qjd4dkosfq] {
        font-size: 24px;
    }
    
    .section-content h3[b-qjd4dkosfq] {
        font-size: 18px;
    }
    
    .section-content h3[b-qjd4dkosfq]::before {
        width: 3px;
        height: 20px;
        margin-right: 8px;
    }
    
    .table-of-contents[b-qjd4dkosfq] {
        padding: 20px;
    }
    
    .table-of-contents h2[b-qjd4dkosfq] {
        font-size: 18px;
    }
    
    .table-of-contents ol li[b-qjd4dkosfq] {
        padding-left: 28px;
    }
    
    .table-of-contents ol li[b-qjd4dkosfq]::before {
        font-size: 14px;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Applications.razor.rz.scp.css */
/* Marketplace Screenshot */
.marketplace-screenshot-container[b-fdmvpuxdve] {
    max-width: 100%;
    margin: 2rem auto;
    text-align: center;
}

.marketplace-screenshot[b-fdmvpuxdve] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Category Grid */
.category-grid[b-fdmvpuxdve] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .category-grid[b-fdmvpuxdve] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .category-grid[b-fdmvpuxdve] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.category-card[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    transition: all 0.2s ease;
}

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

.category-icon[b-fdmvpuxdve] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.25rem;
    flex-shrink: 0;
    font-size: 1.5rem;
}

.category-icon.dev[b-fdmvpuxdve] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    color: #6366F1;
}

.category-icon.data[b-fdmvpuxdve] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
    color: #10B981;
}

.category-icon.ai[b-fdmvpuxdve] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
    color: #F59E0B;
}

.category-icon.web[b-fdmvpuxdve] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.3));
    color: #EF4444;
}

.category-icon.analytics[b-fdmvpuxdve] {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(67, 56, 202, 0.3));
    color: #4F46E5;
}

.category-icon.devops[b-fdmvpuxdve] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(219, 39, 119, 0.3));
    color: #EC4899;
}

.category-details[b-fdmvpuxdve] {
    flex-grow: 1;
}

.category-details h4[b-fdmvpuxdve] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.category-details p[b-fdmvpuxdve] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.75rem 0;
}

.popular-apps[b-fdmvpuxdve] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.popular-app[b-fdmvpuxdve] {
    font-size: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
}

/* App Details */
.app-details-container[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 2rem 0;
}

.app-header[b-fdmvpuxdve] {
    padding: 1.5rem;
    display: flex;
    background-color: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .app-header[b-fdmvpuxdve] {
        flex-wrap: nowrap;
    }
}

.app-icon[b-fdmvpuxdve] {
    width: 4rem;
    height: 4rem;
    border-radius: 12px;
    overflow: hidden;
    margin-right: 1.5rem;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-icon img[b-fdmvpuxdve] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-title[b-fdmvpuxdve] {
    flex-grow: 1;
}

.app-title h3[b-fdmvpuxdve] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.app-publisher[b-fdmvpuxdve] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.app-rating[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
}

.stars[b-fdmvpuxdve] {
    color: #F59E0B;
    margin-right: 0.5rem;
}

.rating-value[b-fdmvpuxdve] {
    font-weight: 600;
    margin-right: 0.5rem;
}

.rating-count[b-fdmvpuxdve] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.app-meta[b-fdmvpuxdve] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    text-align: right;
}

.app-meta div[b-fdmvpuxdve] {
    margin-bottom: 0.25rem;
}

.app-meta div:last-child[b-fdmvpuxdve] {
    margin-bottom: 0;
}

.app-body[b-fdmvpuxdve] {
    padding: 1.5rem;
}

.app-tabs[b-fdmvpuxdve] {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.app-tab[b-fdmvpuxdve] {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.app-tab.active[b-fdmvpuxdve] {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.app-tab-content[b-fdmvpuxdve] {
    display: none;
}

.app-tab-content.active[b-fdmvpuxdve] {
    display: block;
}

.app-description p[b-fdmvpuxdve] {
    margin-bottom: 1rem;
}

.app-description p:last-child[b-fdmvpuxdve] {
    margin-bottom: 0;
}

.app-screenshots[b-fdmvpuxdve] {
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.app-screenshots img[b-fdmvpuxdve] {
    width: 100%;
    height: auto;
    display: block;
}

.app-features h4[b-fdmvpuxdve] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.app-features ul[b-fdmvpuxdve] {
    margin: 0;
    padding-left: 1.5rem;
}

.app-features li[b-fdmvpuxdve] {
    margin-bottom: 0.5rem;
}

.app-features li:last-child[b-fdmvpuxdve] {
    margin-bottom: 0;
}

.app-actions[b-fdmvpuxdve] {
    padding: 1.5rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.app-deploy-btn[b-fdmvpuxdve] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.app-deploy-btn:hover[b-fdmvpuxdve] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.app-deploy-btn i[b-fdmvpuxdve] {
    margin-right: 0.5rem;
}

.app-requirements-summary[b-fdmvpuxdve] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.req-item[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.req-item i[b-fdmvpuxdve] {
    margin-right: 0.5rem;
    color: var(--primary);
}

/* Deployment Methods */
.deployment-methods[b-fdmvpuxdve] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.deployment-method[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
}

.method-header[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.method-icon[b-fdmvpuxdve] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    color: var(--primary);
    font-size: 1.25rem;
}

.method-header h3[b-fdmvpuxdve] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.method-steps[b-fdmvpuxdve] {
    margin-bottom: 1.5rem;
}

.method-step[b-fdmvpuxdve] {
    display: flex;
    margin-bottom: 1rem;
}

.method-step:last-child[b-fdmvpuxdve] {
    margin-bottom: 0;
}

.step-number[b-fdmvpuxdve] {
    width: 1.75rem;
    height: 1.75rem;
    background-color: rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    margin-right: 1rem;
    flex-shrink: 0;
    color: var(--primary);
}

.step-content[b-fdmvpuxdve] {
    flex-grow: 1;
}

.step-content p[b-fdmvpuxdve] {
    margin: 0;
}

.method-note[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10B981;
    padding: 0.75rem 1rem;
    border-radius: 0 4px 4px 0;
    font-size: 0.875rem;
}

.method-note i[b-fdmvpuxdve] {
    font-size: 1rem;
    color: #10B981;
    margin-right: 0.75rem;
}

/* Configuration Types */
.configuration-types[b-fdmvpuxdve] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .configuration-types[b-fdmvpuxdve] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.config-type[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.config-icon[b-fdmvpuxdve] {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--primary);
    font-size: 1.25rem;
}

.config-details h3[b-fdmvpuxdve] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.config-details p[b-fdmvpuxdve] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.config-details ul[b-fdmvpuxdve] {
    text-align: left;
    margin: 0;
    padding-left: 1.5rem;
}

.config-details li[b-fdmvpuxdve] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.config-details li:last-child[b-fdmvpuxdve] {
    margin-bottom: 0;
}

/* Management Actions */
.management-grid[b-fdmvpuxdve] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .management-grid[b-fdmvpuxdve] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.management-action[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
}

.action-icon[b-fdmvpuxdve] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.25rem;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.action-icon:first-child[b-fdmvpuxdve] {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.action-icon:nth-child(3n+2)[b-fdmvpuxdve] {
    background-color: rgba(99, 102, 241, 0.2);
    color: #6366F1;
}

.action-icon:nth-child(3n+3)[b-fdmvpuxdve] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.action-icon:nth-child(4n+4)[b-fdmvpuxdve] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.action-details[b-fdmvpuxdve] {
    flex-grow: 1;
}

.action-details h3[b-fdmvpuxdve] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.action-details p[b-fdmvpuxdve] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.action-steps[b-fdmvpuxdve] {
    margin-bottom: 1rem;
}

.action-step[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.action-step:last-child[b-fdmvpuxdve] {
    margin-bottom: 0;
}

.action-step i[b-fdmvpuxdve] {
    font-size: 0.75rem;
    color: var(--primary);
    margin-right: 0.5rem;
}

.warning-text[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #EF4444;
    padding: 0.75rem 1rem;
    border-radius: 0 4px 4px 0;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.warning-text i[b-fdmvpuxdve] {
    font-size: 1rem;
    color: #EF4444;
    margin-right: 0.75rem;
}

/* Backup Features */
.backup-features[b-fdmvpuxdve] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .backup-features[b-fdmvpuxdve] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.backup-feature[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.backup-icon[b-fdmvpuxdve] {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--primary);
    font-size: 1.25rem;
}

.backup-details h3[b-fdmvpuxdve] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.backup-details p[b-fdmvpuxdve] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.backup-frequency[b-fdmvpuxdve] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
}

.frequency-option[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
}

.frequency-option input[type="radio"][b-fdmvpuxdve] {
    margin-right: 0.5rem;
}

.backup-now-btn[b-fdmvpuxdve] {
    background-color: rgba(99, 102, 241, 0.2);
    color: white;
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

.backup-now-btn:hover[b-fdmvpuxdve] {
    background-color: rgba(99, 102, 241, 0.3);
}

.backup-now-btn i[b-fdmvpuxdve] {
    margin-right: 0.5rem;
}

.restore-options[b-fdmvpuxdve] {
    margin-top: 1rem;
    text-align: left;
}

.restore-option[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.restore-option:last-child[b-fdmvpuxdve] {
    margin-bottom: 0;
}

.restore-option i[b-fdmvpuxdve] {
    color: #10B981;
    margin-right: 0.5rem;
    font-size: 0.75rem;
}

/* Custom Applications */
.custom-app-methods[b-fdmvpuxdve] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .custom-app-methods[b-fdmvpuxdve] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.custom-method[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.custom-header[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-header i[b-fdmvpuxdve] {
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.custom-header h3[b-fdmvpuxdve] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.custom-body[b-fdmvpuxdve] {
    padding: 1.5rem;
    flex-grow: 1;
}

.supported-formats[b-fdmvpuxdve], .git-providers[b-fdmvpuxdve] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.format[b-fdmvpuxdve], .provider[b-fdmvpuxdve] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.format i[b-fdmvpuxdve], .provider i[b-fdmvpuxdve] {
    margin-right: 0.5rem;
    color: var(--primary);
}

/* Code Blocks */
.code-block[b-fdmvpuxdve] {
    background-color: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 1.5rem;
}

.code-header[b-fdmvpuxdve] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-title[b-fdmvpuxdve] {
    font-size: 0.875rem;
    font-weight: 600;
}

.code-actions[b-fdmvpuxdve] {
    display: flex;
}

.code-action[b-fdmvpuxdve] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

.code-action:hover[b-fdmvpuxdve] {
    color: rgba(255, 255, 255, 0.8);
}

.code-block pre[b-fdmvpuxdve] {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
}

.code-block code[b-fdmvpuxdve] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

/* Tips Section */
.tips-container[b-fdmvpuxdve] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .tips-container[b-fdmvpuxdve] {
        grid-template-columns: 1fr 1fr;
    }
}

.tip[b-fdmvpuxdve] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
}

.tip-icon[b-fdmvpuxdve] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.tip-content[b-fdmvpuxdve] {
    flex-grow: 1;
}

.tip-content h3[b-fdmvpuxdve] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.tip-content ul[b-fdmvpuxdve] {
    margin: 0;
    padding-left: 1.25rem;
}

.tip-content ul li[b-fdmvpuxdve] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.tip-content ul li:last-child[b-fdmvpuxdve] {
    margin-bottom: 0;
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Benson.razor.rz.scp.css */
/* Benson Cards */
.benson-card[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: all 0.2s ease;
}

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

.benson-card-header[b-r3emmpc1zi] {
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.benson-card-icon[b-r3emmpc1zi] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.benson-card-icon.resource[b-r3emmpc1zi] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    color: #6366F1;
}

.benson-card-icon.troubleshooting[b-r3emmpc1zi] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(214, 51, 132, 0.3));
    color: #EC4899;
}

.benson-card-icon.cost[b-r3emmpc1zi] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
    color: #10B981;
}

.benson-card-icon.app[b-r3emmpc1zi] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
    color: #F59E0B;
}

.benson-card-header h3[b-r3emmpc1zi] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.benson-card-body[b-r3emmpc1zi] {
    padding: 1rem;
}

.benson-features[b-r3emmpc1zi] {
    list-style: disc;
    margin-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.benson-features li[b-r3emmpc1zi] {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.usage-example[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 1rem;
}

.example-prompt[b-r3emmpc1zi] {
    font-size: 0.875rem;
}

.prompt-label[b-r3emmpc1zi] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.prompt-text[b-r3emmpc1zi] {
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

/* Benson Architecture */
.benson-architecture[b-r3emmpc1zi] {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.architecture-layer[b-r3emmpc1zi] {
    display: flex;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.25rem;
}

.layer-icon[b-r3emmpc1zi] {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.layer-details[b-r3emmpc1zi] {
    flex-grow: 1;
}

.layer-details h3[b-r3emmpc1zi] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.layer-details p[b-r3emmpc1zi] {
    margin: 0 0 0.75rem 0;
}

.layer-details ul[b-r3emmpc1zi] {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.layer-details li[b-r3emmpc1zi] {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.architecture-arrow[b-r3emmpc1zi] {
    display: flex;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5rem;
}

/* Interaction Methods */
.interaction-methods[b-r3emmpc1zi] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.interaction-method[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.interaction-header[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.interaction-icon[b-r3emmpc1zi] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1rem;
}

.interaction-icon.chat[b-r3emmpc1zi] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    color: #6366F1;
}

.interaction-icon.inline[b-r3emmpc1zi] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
    color: #10B981;
}

.interaction-icon.api[b-r3emmpc1zi] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
    color: #F59E0B;
}

.interaction-header h3[b-r3emmpc1zi] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.interaction-body[b-r3emmpc1zi] {
    padding: 1.5rem;
}

.chat-example[b-r3emmpc1zi] {
    margin-top: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.chat-message[b-r3emmpc1zi] {
    padding: 1rem;
    display: flex;
}

.chat-message.user[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.6);
    justify-content: flex-end;
}

.chat-message.assistant[b-r3emmpc1zi] {
    background-color: rgba(99, 102, 241, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.message-content[b-r3emmpc1zi] {
    max-width: 80%;
}

.message-content p[b-r3emmpc1zi] {
    margin: 0 0 0.75rem 0;
}

.message-content p:last-child[b-r3emmpc1zi] {
    margin-bottom: 0;
}

.message-content ul[b-r3emmpc1zi] {
    margin: 0 0 0.75rem 0;
    padding-left: 1.5rem;
}

.message-content li[b-r3emmpc1zi] {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.assistant-avatar[b-r3emmpc1zi] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    color: var(--primary);
}

.inline-examples[b-r3emmpc1zi] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inline-example[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    padding: 1rem;
}

.example-title[b-r3emmpc1zi] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.example-title i[b-r3emmpc1zi] {
    margin-right: 0.5rem;
    color: var(--primary);
}

.example-description[b-r3emmpc1zi] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Use Cases */
.use-cases[b-r3emmpc1zi] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.use-case[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
}

.use-case-icon[b-r3emmpc1zi] {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.use-case-details[b-r3emmpc1zi] {
    flex-grow: 1;
}

.use-case-details h3[b-r3emmpc1zi] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.use-case-scenario[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.scenario-title[b-r3emmpc1zi] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.use-case-interaction[b-r3emmpc1zi] {
    margin-top: 1rem;
}

.interaction-title[b-r3emmpc1zi] {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.interaction-steps[b-r3emmpc1zi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Steps Container */
.steps-container[b-r3emmpc1zi] {
    margin: 2rem 0;
}

.step[b-r3emmpc1zi] {
    display: flex;
    margin-bottom: 1.5rem;
}

.step:last-child[b-r3emmpc1zi] {
    margin-bottom: 0;
}

.step-number[b-r3emmpc1zi] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content[b-r3emmpc1zi] {
    flex-grow: 1;
}

.step-content h3[b-r3emmpc1zi] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.step-content p[b-r3emmpc1zi] {
    margin: 0 0 0.75rem 0;
}

.example-prompts[b-r3emmpc1zi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.example-prompt-tag[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}

/* Learning Methods */
.learning-methods[b-r3emmpc1zi] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.learning-method[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
}

.learning-icon[b-r3emmpc1zi] {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.learning-details[b-r3emmpc1zi] {
    flex-grow: 1;
}

.learning-details h3[b-r3emmpc1zi] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.learning-details p[b-r3emmpc1zi] {
    margin: 0 0 1rem 0;
}

.learning-details ul[b-r3emmpc1zi] {
    margin: 0;
    padding-left: 1.5rem;
}

.learning-details li[b-r3emmpc1zi] {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.feedback-options[b-r3emmpc1zi] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.feedback-option[b-r3emmpc1zi] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-option i[b-r3emmpc1zi] {
    margin-right: 0.5rem;
}

.feedback-option.positive[b-r3emmpc1zi] {
    color: #10B981;
    border-color: rgba(16, 185, 129, 0.3);
}

.feedback-option.positive:hover[b-r3emmpc1zi] {
    background-color: rgba(16, 185, 129, 0.1);
}

.feedback-option.negative[b-r3emmpc1zi] {
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.feedback-option.negative:hover[b-r3emmpc1zi] {
    background-color: rgba(239, 68, 68, 0.1);
}

.feedback-option.custom[b-r3emmpc1zi] {
    color: var(--primary);
    border-color: rgba(99, 102, 241, 0.3);
}

.feedback-option.custom:hover[b-r3emmpc1zi] {
    background-color: rgba(99, 102, 241, 0.1);
}

.outcome-metrics[b-r3emmpc1zi] {
    margin-top: 1.5rem;
}

.metric[b-r3emmpc1zi] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.metric-name[b-r3emmpc1zi] {
    width: 14rem;
    font-size: 0.875rem;
}

.metric-bar[b-r3emmpc1zi] {
    flex-grow: 1;
    height: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    margin: 0 0.75rem;
    overflow: hidden;
}

.metric-fill[b-r3emmpc1zi] {
    height: 100%;
    background: linear-gradient(90deg, #6366F1, #4F46E5);
    border-radius: 100px;
}

.metric-value[b-r3emmpc1zi] {
    width: 3rem;
    font-size: 0.875rem;
    text-align: right;
}

/* Privacy Features */
.privacy-features[b-r3emmpc1zi] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .privacy-features[b-r3emmpc1zi] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.privacy-feature[b-r3emmpc1zi] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.privacy-icon[b-r3emmpc1zi] {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.privacy-details[b-r3emmpc1zi] {
    width: 100%;
}

.privacy-details h3[b-r3emmpc1zi] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.privacy-details ul[b-r3emmpc1zi] {
    text-align: left;
    margin: 0;
    padding-left: 1.5rem;
}

.privacy-details li[b-r3emmpc1zi] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* Code Blocks */
.code-block[b-r3emmpc1zi] {
    background-color: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5rem 0;
}

.code-header[b-r3emmpc1zi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-title[b-r3emmpc1zi] {
    font-size: 0.875rem;
    font-weight: 600;
}

.code-actions[b-r3emmpc1zi] {
    display: flex;
}

.code-action[b-r3emmpc1zi] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

.code-action:hover[b-r3emmpc1zi] {
    color: rgba(255, 255, 255, 0.8);
}

.code-block pre[b-r3emmpc1zi] {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
}

.code-block code[b-r3emmpc1zi] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Billing.razor.rz.scp.css */
/* Billing Model Cards */
.billing-model-card[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.billing-model-header[b-dt1u8k5ndh] {
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.2));
}

.billing-model-icon[b-dt1u8k5ndh] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(99, 102, 241, 0.2);
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--primary);
}

.billing-model-header h3[b-dt1u8k5ndh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.billing-model-body[b-dt1u8k5ndh] {
    padding: 1.25rem;
}

.billing-features[b-dt1u8k5ndh] {
    list-style: disc;
    margin-left: 1.5rem;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
}

.billing-features li[b-dt1u8k5ndh] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.billing-benefit[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
}

.billing-benefit i[b-dt1u8k5ndh] {
    color: #10B981;
    margin-right: 0.75rem;
}

/* Pricing Calculator */
.pricing-calculator[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 2rem 0;
}

.calculator-header[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calculator-header h3[b-dt1u8k5ndh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.calculator-body[b-dt1u8k5ndh] {
    padding: 1.25rem;
}

.config-rows[b-dt1u8k5ndh] {
    margin-bottom: 1.25rem;
}

.config-row[b-dt1u8k5ndh] {
    display: flex;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.config-row:last-child[b-dt1u8k5ndh] {
    border-bottom: none;
}

.config-row.total[b-dt1u8k5ndh] {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    font-size: 1.125rem;
}

.config-label[b-dt1u8k5ndh] {
    width: 40%;
    color: rgba(255, 255, 255, 0.7);
}

.config-value[b-dt1u8k5ndh] {
    width: 60%;
}

.calculator-note[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    font-size: 0.875rem;
}

.calculator-note i[b-dt1u8k5ndh] {
    color: var(--primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Usage Dashboard */
.usage-dashboard[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 2rem 0;
}

.dashboard-header[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-header h3[b-dt1u8k5ndh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.dashboard-preview[b-dt1u8k5ndh] {
    padding: 1.25rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-preview img[b-dt1u8k5ndh] {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dashboard-features[b-dt1u8k5ndh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .dashboard-features[b-dt1u8k5ndh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dashboard-feature[b-dt1u8k5ndh] {
    display: flex;
    align-items: flex-start;
}

.feature-icon[b-dt1u8k5ndh] {
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    color: var(--primary);
}

.feature-details h4[b-dt1u8k5ndh] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.feature-details p[b-dt1u8k5ndh] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Cost Management Tools */
.cost-management-tools[b-dt1u8k5ndh] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.management-tool[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.tool-header[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tool-icon[b-dt1u8k5ndh] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(99, 102, 241, 0.2);
    margin-right: 1rem;
    flex-shrink: 0;
    color: var(--primary);
}

.tool-header h3[b-dt1u8k5ndh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.tool-body[b-dt1u8k5ndh] {
    padding: 1.25rem;
}

/* Steps Container */
.steps-container[b-dt1u8k5ndh] {
    margin: 1.5rem 0;
}

.step[b-dt1u8k5ndh] {
    display: flex;
    margin-bottom: 1.25rem;
}

.step:last-child[b-dt1u8k5ndh] {
    margin-bottom: 0;
}

.step-number[b-dt1u8k5ndh] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content[b-dt1u8k5ndh] {
    flex-grow: 1;
}

.step-content h4[b-dt1u8k5ndh] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.step-content p[b-dt1u8k5ndh] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Alert Types */
.alert-types[b-dt1u8k5ndh] {
    margin-top: 1.5rem;
}

.alert-type[b-dt1u8k5ndh] {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.alert-type:last-child[b-dt1u8k5ndh] {
    margin-bottom: 0;
}

.alert-icon[b-dt1u8k5ndh] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1rem;
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.alert-details[b-dt1u8k5ndh] {
    flex-grow: 1;
}

.alert-details h4[b-dt1u8k5ndh] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.alert-details p[b-dt1u8k5ndh] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Recommendation Examples */
.recommendation-examples[b-dt1u8k5ndh] {
    margin-top: 1.5rem;
}

.recommendation-example[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.recommendation-example:last-child[b-dt1u8k5ndh] {
    margin-bottom: 0;
}

.example-header[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(15, 23, 42, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.example-header i[b-dt1u8k5ndh] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.example-header span[b-dt1u8k5ndh] {
    font-weight: 600;
}

.example-content[b-dt1u8k5ndh] {
    padding: 0.75rem 1rem;
}

.example-content p[b-dt1u8k5ndh] {
    margin: 0;
    font-size: 0.875rem;
    font-style: italic;
}

.recommendation-note[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    padding: 0.75rem;
    background-color: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    font-size: 0.875rem;
}

.recommendation-note i[b-dt1u8k5ndh] {
    color: var(--primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Billing Info Cards */
.billing-info-card[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.billing-info-header[b-dt1u8k5ndh] {
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.2));
}

.billing-info-icon[b-dt1u8k5ndh] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(99, 102, 241, 0.2);
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--primary);
}

.billing-info-header h3[b-dt1u8k5ndh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.billing-info-body[b-dt1u8k5ndh] {
    padding: 1.25rem;
}

.billing-info-list[b-dt1u8k5ndh] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.billing-info-list li[b-dt1u8k5ndh] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.billing-info-list li:last-child[b-dt1u8k5ndh] {
    margin-bottom: 0;
}

.billing-info-list li i[b-dt1u8k5ndh] {
    color: var(--primary);
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.info-note[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
    font-size: 0.875rem;
}

.info-note i[b-dt1u8k5ndh] {
    color: #F59E0B;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Payment Methods */
.payment-methods[b-dt1u8k5ndh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-method[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
}

.payment-method-icon[b-dt1u8k5ndh] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(99, 102, 241, 0.2);
    margin-right: 1rem;
    flex-shrink: 0;
    color: var(--primary);
    font-size: 1rem;
}

.payment-method-details h4[b-dt1u8k5ndh] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.payment-method-details p[b-dt1u8k5ndh] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Invoices Section */
.invoices-section[b-dt1u8k5ndh] {
    margin: 2rem 0;
}

.invoice-sample[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.invoice-header[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.invoice-header h3[b-dt1u8k5ndh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.invoice-preview[b-dt1u8k5ndh] {
    padding: 1.25rem;
    overflow-x: auto;
}

.invoice-table[b-dt1u8k5ndh] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.invoice-table th[b-dt1u8k5ndh] {
    text-align: left;
    padding: 0.75rem;
    background-color: rgba(15, 23, 42, 0.6);
    font-weight: 600;
    font-size: 0.875rem;
}

.invoice-table th:first-child[b-dt1u8k5ndh] {
    border-top-left-radius: 6px;
}

.invoice-table th:last-child[b-dt1u8k5ndh] {
    border-top-right-radius: 6px;
    text-align: right;
}

.invoice-table td[b-dt1u8k5ndh] {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
}

.invoice-table td:last-child[b-dt1u8k5ndh] {
    text-align: right;
}

.invoice-item[b-dt1u8k5ndh] {
    display: flex;
    flex-direction: column;
}

.item-name[b-dt1u8k5ndh] {
    font-weight: 600;
}

.item-details[b-dt1u8k5ndh] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}

.subtotal-row[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.6);
    font-weight: 600;
}

.total-row[b-dt1u8k5ndh] {
    background-color: rgba(99, 102, 241, 0.1);
    font-weight: 700;
    font-size: 1rem;
}

.invoice-management h3[b-dt1u8k5ndh] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

/* Tagging System */
.tagging-system[b-dt1u8k5ndh] {
    margin: 2rem 0;
}

.tagging-overview h3[b-dt1u8k5ndh], .tagging-benefits h3[b-dt1u8k5ndh], .tagging-report h3[b-dt1u8k5ndh] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.tag-examples[b-dt1u8k5ndh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.tag-example[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.tag-key[b-dt1u8k5ndh] {
    padding: 0.5rem 0.75rem;
    background-color: rgba(99, 102, 241, 0.2);
    font-weight: 600;
    font-size: 0.875rem;
}

.tag-value[b-dt1u8k5ndh] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

.benefit-list[b-dt1u8k5ndh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .benefit-list[b-dt1u8k5ndh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.benefit-item[b-dt1u8k5ndh] {
    display: flex;
    align-items: flex-start;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 1rem;
}

.benefit-icon[b-dt1u8k5ndh] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(99, 102, 241, 0.2);
    margin-right: 1rem;
    flex-shrink: 0;
    color: var(--primary);
}

.benefit-content h4[b-dt1u8k5ndh] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.benefit-content p[b-dt1u8k5ndh] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.report-preview[b-dt1u8k5ndh] {
    margin: 1.5rem 0;
    text-align: center;
}

.report-preview img[b-dt1u8k5ndh] {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.report-options[b-dt1u8k5ndh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .report-options[b-dt1u8k5ndh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.report-option[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.875rem;
}

.report-option i[b-dt1u8k5ndh] {
    color: var(--primary);
    margin-right: 0.75rem;
}

/* Tips Section */
.tips-container[b-dt1u8k5ndh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .tips-container[b-dt1u8k5ndh] {
        grid-template-columns: 1fr 1fr;
    }
}

.tip[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
}

.tip-icon[b-dt1u8k5ndh] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.tip-content[b-dt1u8k5ndh] {
    flex-grow: 1;
}

.tip-content h3[b-dt1u8k5ndh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.tip-content ul[b-dt1u8k5ndh] {
    margin: 0;
    padding-left: 1.25rem;
}

.tip-content ul li[b-dt1u8k5ndh] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.tip-content ul li:last-child[b-dt1u8k5ndh] {
    margin-bottom: 0;
}

/* Info Box Warning */
.info-box.warning .info-box-header .info-box-icon[b-dt1u8k5ndh],
.info-box.warning .info-box-header .info-box-title[b-dt1u8k5ndh] {
    color: #F59E0B;
}

.info-box.warning[b-dt1u8k5ndh] {
    background-color: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #F59E0B;
}

/* Support Options */
.support-options[b-dt1u8k5ndh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (min-width: 768px) {
    .support-options[b-dt1u8k5ndh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.support-option[b-dt1u8k5ndh] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
}

.support-icon[b-dt1u8k5ndh] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.support-details[b-dt1u8k5ndh] {
    flex-grow: 1;
}

.support-details h3[b-dt1u8k5ndh] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.support-details p[b-dt1u8k5ndh] {
    margin: 0 0 1.25rem 0;
}

.contact-methods[b-dt1u8k5ndh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-method[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    font-size: 0.875rem;
}

.contact-method i[b-dt1u8k5ndh] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.kb-topics[b-dt1u8k5ndh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .kb-topics[b-dt1u8k5ndh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kb-topic[b-dt1u8k5ndh] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    font-size: 0.875rem;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
}

.kb-topic:hover[b-dt1u8k5ndh] {
    background-color: rgba(99, 102, 241, 0.2);
}

.kb-topic i[b-dt1u8k5ndh] {
    color: var(--primary);
    margin-right: 0.75rem;
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Dashboard.razor.rz.scp.css */
/* Dashboard Types */
.dashboard-types[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.dashboard-type[b-go6yyavdnw] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.dashboard-type:hover[b-go6yyavdnw] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.type-header[b-go6yyavdnw] {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-type.customer .type-header[b-go6yyavdnw] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
}

.dashboard-type.provider .type-header[b-go6yyavdnw] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.2));
}

.dashboard-type.admin .type-header[b-go6yyavdnw] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
}

.type-header i[b-go6yyavdnw] {
    font-size: 1.5rem;
    color: #f3f4f6;
}

.type-header h3[b-go6yyavdnw] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.type-content[b-go6yyavdnw] {
    padding: 1.5rem;
}

.type-content p[b-go6yyavdnw] {
    color: #d1d5db;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.feature-list[b-go6yyavdnw] {
    list-style: none;
    padding: 0;
}

.feature-list li[b-go6yyavdnw] {
    padding: 0.5rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
}

.feature-list li[b-go6yyavdnw]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #6366f1;
}

/* Dashboard Preview */
.dashboard-preview[b-go6yyavdnw] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    margin-top: 1.5rem;
}

.dashboard-header[b-go6yyavdnw] {
    margin-bottom: 2rem;
}

.dashboard-header h3[b-go6yyavdnw] {
    font-size: 1.5rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.dashboard-header p[b-go6yyavdnw] {
    color: #9ca3af;
}

/* Stats Grid */
.stats-grid[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-go6yyavdnw] {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
}

.stat-icon[b-go6yyavdnw] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.instances[b-go6yyavdnw] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.stat-icon.hours[b-go6yyavdnw] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.stat-icon.spending[b-go6yyavdnw] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.stat-icon.balance[b-go6yyavdnw] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.stat-icon.earnings[b-go6yyavdnw] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.stat-icon.servers[b-go6yyavdnw] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.stat-icon.utilization[b-go6yyavdnw] {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    color: white;
}

.stat-icon.rentals[b-go6yyavdnw] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

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

.stat-label[b-go6yyavdnw] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.stat-value[b-go6yyavdnw] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.stat-change[b-go6yyavdnw] {
    font-size: 0.75rem;
    color: #6b7280;
}

.stat-change.positive[b-go6yyavdnw] {
    color: #10b981;
}

.stat-change.negative[b-go6yyavdnw] {
    color: #ef4444;
}

/* Dashboard Widgets */
.dashboard-widgets[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.widget[b-go6yyavdnw] {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.widget h4[b-go6yyavdnw] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
}

.chart-placeholder[b-go6yyavdnw] {
    height: 200px;
    background: rgba(30, 30, 40, 0.5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.action-buttons[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quick-action[b-go6yyavdnw] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-action:hover[b-go6yyavdnw] {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.quick-action i[b-go6yyavdnw] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.quick-action span[b-go6yyavdnw] {
    font-size: 0.875rem;
    color: #d1d5db;
}

.activity-list[b-go6yyavdnw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item[b-go6yyavdnw] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.activity-icon[b-go6yyavdnw] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.success[b-go6yyavdnw] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.activity-icon.info[b-go6yyavdnw] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.activity-icon.warning[b-go6yyavdnw] {
    background: rgba(251, 146, 60, 0.2);
    color: #f59e0b;
}

.activity-details p[b-go6yyavdnw] {
    font-size: 0.875rem;
    color: #d1d5db;
    margin-bottom: 0.25rem;
}

.activity-details span[b-go6yyavdnw] {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Provider Widgets */
.provider-widgets[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.map-placeholder[b-go6yyavdnw] {
    height: 300px;
    background: rgba(30, 30, 40, 0.5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.server-list[b-go6yyavdnw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.server-item[b-go6yyavdnw] {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(30, 30, 40, 0.5);
    border-radius: 8px;
}

.server-info h5[b-go6yyavdnw] {
    font-size: 1rem;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.server-info p[b-go6yyavdnw] {
    font-size: 0.875rem;
    color: #9ca3af;
}

.server-stats[b-go6yyavdnw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.utilization[b-go6yyavdnw] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #10b981;
}

.revenue[b-go6yyavdnw] {
    font-size: 0.875rem;
    color: #9ca3af;
}

/* Widgets Catalog */
.widgets-catalog[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.widget-card[b-go6yyavdnw] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

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

.widget-header i[b-go6yyavdnw] {
    font-size: 1.5rem;
    color: #6366f1;
}

.widget-header h4[b-go6yyavdnw] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.widget-description p[b-go6yyavdnw] {
    color: #d1d5db;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.widget-description ul[b-go6yyavdnw] {
    list-style: none;
    padding: 0;
}

.widget-description li[b-go6yyavdnw] {
    padding: 0.25rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
}

.widget-description li[b-go6yyavdnw]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #6366f1;
}

/* Customization Options */
.customization-options[b-go6yyavdnw] {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.custom-feature[b-go6yyavdnw] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    backdrop-filter: blur(10px);
}

.feature-icon[b-go6yyavdnw] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i[b-go6yyavdnw] {
    font-size: 1.75rem;
    color: #3b82f6;
}

.feature-details[b-go6yyavdnw] {
    flex: 1;
}

.feature-details h3[b-go6yyavdnw] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.feature-details p[b-go6yyavdnw] {
    color: #9ca3af;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.layout-options[b-go6yyavdnw],
.theme-options[b-go6yyavdnw] {
    display: flex;
    gap: 0.75rem;
}

.layout-option[b-go6yyavdnw],
.theme-option[b-go6yyavdnw] {
    padding: 0.5rem 1rem;
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #9ca3af;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.layout-option.active[b-go6yyavdnw],
.theme-option.active[b-go6yyavdnw] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.interval-select[b-go6yyavdnw] {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: #f3f4f6;
    font-size: 0.875rem;
}

/* Navigation Guide */
.navigation-guide[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.nav-section[b-go6yyavdnw] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.nav-section h3[b-go6yyavdnw] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
}

.shortcuts-list[b-go6yyavdnw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shortcut[b-go6yyavdnw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.shortcut kbd[b-go6yyavdnw] {
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    color: #f3f4f6;
    font-family: monospace;
}

.shortcut span[b-go6yyavdnw] {
    color: #9ca3af;
    font-size: 0.875rem;
}

.menu-items[b-go6yyavdnw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.menu-item[b-go6yyavdnw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.menu-item i[b-go6yyavdnw] {
    width: 24px;
    color: #6366f1;
}

.menu-item span[b-go6yyavdnw] {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Metrics Guide */
.metrics-guide[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.metric-explanation[b-go6yyavdnw] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.metric-explanation h3[b-go6yyavdnw] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
}

.metric-explanation dl[b-go6yyavdnw] {
    margin: 0;
}

.metric-explanation dt[b-go6yyavdnw] {
    font-weight: 600;
    color: #d1d5db;
    margin-top: 0.75rem;
}

.metric-explanation dd[b-go6yyavdnw] {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-left: 0;
    margin-bottom: 0.75rem;
}

/* Tips Grid */
.tips-grid[b-go6yyavdnw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.tip-card[b-go6yyavdnw] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
}

.tip-icon[b-go6yyavdnw] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.tip-icon i[b-go6yyavdnw] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.tip-content h3[b-go6yyavdnw] {
    font-size: 1rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.tip-content p[b-go6yyavdnw] {
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-widgets[b-go6yyavdnw] {
        grid-template-columns: 1fr;
    }
    
    .provider-widgets[b-go6yyavdnw] {
        grid-template-columns: 1fr;
    }
    
    .action-buttons[b-go6yyavdnw] {
        grid-template-columns: 1fr;
    }
    
    .layout-options[b-go6yyavdnw],
    .theme-options[b-go6yyavdnw] {
        flex-wrap: wrap;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Instances.razor.rz.scp.css */
/* Instance Type Cards */
.instance-type-card[b-29b5qe7mhd] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: all 0.2s ease;
}

.instance-type-card:hover[b-29b5qe7mhd] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.instance-type-header[b-29b5qe7mhd] {
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.instance-type-header.standard[b-29b5qe7mhd] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.2));
}

.instance-type-header.compute[b-29b5qe7mhd] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(214, 51, 132, 0.2));
}

.instance-type-header.memory[b-29b5qe7mhd] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.2));
}

.instance-type-header.gpu[b-29b5qe7mhd] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.2));
}

.instance-type-header i[b-29b5qe7mhd] {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.instance-type-header h3[b-29b5qe7mhd] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.popular-badge[b-29b5qe7mhd] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.instance-type-body[b-29b5qe7mhd] {
    padding: 1rem;
}

.instance-specs[b-29b5qe7mhd] {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 0;
}

.instance-specs li[b-29b5qe7mhd] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.instance-specs li span:first-child[b-29b5qe7mhd] {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.instance-use-cases[b-29b5qe7mhd] {
    margin-top: 0.75rem;
}

.use-case-label[b-29b5qe7mhd] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-bottom: 0.5rem;
}

.use-case-tags[b-29b5qe7mhd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.use-case-tag[b-29b5qe7mhd] {
    font-size: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
}

/* Lifecycle Diagram */
.lifecycle-diagram[b-29b5qe7mhd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .lifecycle-diagram[b-29b5qe7mhd] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .lifecycle-arrow[b-29b5qe7mhd] {
        transform: rotate(90deg);
        margin: 1rem 0;
    }
}

.lifecycle-stage[b-29b5qe7mhd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 22%;
}

@media (max-width: 768px) {
    .lifecycle-stage[b-29b5qe7mhd] {
        width: 100%;
        flex-direction: row;
        text-align: left;
        margin-bottom: 0.5rem;
    }
    
    .lifecycle-details[b-29b5qe7mhd] {
        margin-left: 1rem;
    }
}

.lifecycle-icon[b-29b5qe7mhd] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.lifecycle-icon.create[b-29b5qe7mhd] {
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.lifecycle-icon.start[b-29b5qe7mhd] {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.lifecycle-icon.stop[b-29b5qe7mhd] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.lifecycle-icon.terminate[b-29b5qe7mhd] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.lifecycle-icon i[b-29b5qe7mhd] {
    font-size: 1.25rem;
}

.lifecycle-details h3[b-29b5qe7mhd] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.lifecycle-details p[b-29b5qe7mhd] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.lifecycle-arrow[b-29b5qe7mhd] {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Instance States */
.instance-states[b-29b5qe7mhd] {
    margin: 1.5rem 0;
}

.instance-state[b-29b5qe7mhd] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    background-color: rgba(15, 23, 42, 0.4);
}

.state-indicator[b-29b5qe7mhd] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 1rem;
    flex-shrink: 0;
}

.state-indicator.creating[b-29b5qe7mhd] {
    background-color: #6366F1;
    box-shadow: 0 0 6px #6366F1;
}

.state-indicator.running[b-29b5qe7mhd] {
    background-color: #10B981;
    box-shadow: 0 0 6px #10B981;
}

.state-indicator.starting[b-29b5qe7mhd] {
    background-color: #6366F1;
    box-shadow: 0 0 6px #6366F1;
    animation: pulse-b-29b5qe7mhd 2s infinite;
}

.state-indicator.stopping[b-29b5qe7mhd] {
    background-color: #F59E0B;
    box-shadow: 0 0 6px #F59E0B;
    animation: pulse-b-29b5qe7mhd 2s infinite;
}

.state-indicator.stopped[b-29b5qe7mhd] {
    background-color: #6B7280;
    box-shadow: 0 0 6px #6B7280;
}

.state-indicator.terminating[b-29b5qe7mhd] {
    background-color: #EF4444;
    box-shadow: 0 0 6px #EF4444;
    animation: pulse-b-29b5qe7mhd 1.5s infinite;
}

.state-indicator.error[b-29b5qe7mhd] {
    background-color: #EF4444;
    box-shadow: 0 0 6px #EF4444;
}

@keyframes pulse-b-29b5qe7mhd {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.state-details[b-29b5qe7mhd] {
    flex-grow: 1;
}

.state-details h4[b-29b5qe7mhd] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.state-details p[b-29b5qe7mhd] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Steps Container */
.steps-container[b-29b5qe7mhd] {
    margin: 2rem 0;
}

.step[b-29b5qe7mhd] {
    display: flex;
    margin-bottom: 1.5rem;
}

.step:last-child[b-29b5qe7mhd] {
    margin-bottom: 0;
}

.step-number[b-29b5qe7mhd] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content[b-29b5qe7mhd] {
    flex-grow: 1;
}

.step-content h3[b-29b5qe7mhd] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.step-content p[b-29b5qe7mhd] {
    margin: 0 0 0.75rem 0;
}

/* Configuration Options */
.configuration-options[b-29b5qe7mhd] {
    margin-top: 0.75rem;
    background-color: rgba(15, 23, 42, 0.4);
    border-radius: 6px;
    padding: 0.75rem;
}

.configuration-option[b-29b5qe7mhd] {
    display: flex;
    margin-bottom: 0.5rem;
}

.configuration-option:last-child[b-29b5qe7mhd] {
    margin-bottom: 0;
}

.option-label[b-29b5qe7mhd] {
    font-weight: 600;
    margin-right: 0.5rem;
    min-width: 5rem;
}

.option-value[b-29b5qe7mhd] {
    color: rgba(255, 255, 255, 0.7);
}

/* Connection Methods */
.connection-method-card[b-29b5qe7mhd] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.connection-method-header[b-29b5qe7mhd] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.connection-method-header i[b-29b5qe7mhd] {
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.connection-method-header h3[b-29b5qe7mhd] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.connection-method-body[b-29b5qe7mhd] {
    padding: 1rem;
}

.connection-steps[b-29b5qe7mhd] {
    margin-top: 1rem;
}

.connection-step[b-29b5qe7mhd] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.connection-step .step-number[b-29b5qe7mhd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--primary);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.connection-step .step-text[b-29b5qe7mhd] {
    font-size: 0.875rem;
}

/* Management Actions */
.management-actions[b-29b5qe7mhd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .management-actions[b-29b5qe7mhd] {
        grid-template-columns: 1fr 1fr;
    }
}

.management-action[b-29b5qe7mhd] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
}

.action-icon[b-29b5qe7mhd] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.action-icon.start[b-29b5qe7mhd] {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.action-icon.stop[b-29b5qe7mhd] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.action-icon.restart[b-29b5qe7mhd] {
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.action-icon.terminate[b-29b5qe7mhd] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.action-icon i[b-29b5qe7mhd] {
    font-size: 1.25rem;
}

.action-details[b-29b5qe7mhd] {
    flex-grow: 1;
}

.action-details h3[b-29b5qe7mhd] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.action-details p[b-29b5qe7mhd] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.75rem 0;
}

.action-steps[b-29b5qe7mhd] {
    margin-top: 0.75rem;
}

.action-step[b-29b5qe7mhd] {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.action-step i[b-29b5qe7mhd] {
    color: var(--primary);
    margin-right: 0.5rem;
    font-size: 0.75rem;
}

.warning-text[b-29b5qe7mhd] {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    color: #EF4444;
    font-size: 0.875rem;
}

.warning-text i[b-29b5qe7mhd] {
    margin-right: 0.5rem;
}

/* Monitoring Cards */
.monitoring-card[b-29b5qe7mhd] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.monitoring-card-header[b-29b5qe7mhd] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.monitoring-card-header i[b-29b5qe7mhd] {
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.monitoring-card-header h3[b-29b5qe7mhd] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.monitoring-card-body[b-29b5qe7mhd] {
    padding: 1rem;
}

.metric-list[b-29b5qe7mhd] {
    margin-top: 1rem;
}

.metric[b-29b5qe7mhd] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.metric-name[b-29b5qe7mhd] {
    width: 8rem;
    font-size: 0.875rem;
}

.metric-bar[b-29b5qe7mhd] {
    flex-grow: 1;
    height: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    margin: 0 0.75rem;
    overflow: hidden;
}

.metric-fill[b-29b5qe7mhd] {
    height: 100%;
    background: linear-gradient(90deg, #6366F1, #4F46E5);
    border-radius: 100px;
}

.metric-value[b-29b5qe7mhd] {
    width: 3rem;
    font-size: 0.875rem;
    text-align: right;
}

.alert-types[b-29b5qe7mhd] {
    margin-top: 1rem;
}

.alert-type[b-29b5qe7mhd] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.alert-icon[b-29b5qe7mhd] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.alert-icon.warning[b-29b5qe7mhd] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.alert-icon.error[b-29b5qe7mhd] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.alert-icon.info[b-29b5qe7mhd] {
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.alert-details[b-29b5qe7mhd] {
    flex-grow: 1;
}

.alert-details h4[b-29b5qe7mhd] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.alert-details p[b-29b5qe7mhd] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Tips */
.tips-container[b-29b5qe7mhd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .tips-container[b-29b5qe7mhd] {
        grid-template-columns: 1fr 1fr;
    }
}

.tip[b-29b5qe7mhd] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
}

.tip-icon[b-29b5qe7mhd] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.tip-content[b-29b5qe7mhd] {
    flex-grow: 1;
}

.tip-content h3[b-29b5qe7mhd] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.tip-content ul[b-29b5qe7mhd] {
    margin: 0;
    padding-left: 1.25rem;
}

.tip-content ul li[b-29b5qe7mhd] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.tip-content ul li:last-child[b-29b5qe7mhd] {
    margin-bottom: 0;
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Notifications.razor.rz.scp.css */
/* Notification Types Grid */
.notification-types-grid[b-l145mfsbz7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.notification-type-card[b-l145mfsbz7] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.notification-type-card:hover[b-l145mfsbz7] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.type-header[b-l145mfsbz7] {
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.type-header.system[b-l145mfsbz7] {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(156, 163, 175, 0.2));
}

.type-header.instance[b-l145mfsbz7] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
}

.type-header.billing[b-l145mfsbz7] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
}

.type-header.security[b-l145mfsbz7] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
}

.type-header.support[b-l145mfsbz7] {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(245, 158, 11, 0.2));
}

.type-header.provider[b-l145mfsbz7] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.2));
}

.type-header i[b-l145mfsbz7] {
    font-size: 1.5rem;
    color: #f3f4f6;
}

.type-header h3[b-l145mfsbz7] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.type-content[b-l145mfsbz7] {
    padding: 1.5rem;
}

.type-content p[b-l145mfsbz7] {
    color: #d1d5db;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.notification-examples[b-l145mfsbz7] {
    list-style: none;
    padding: 0;
}

.notification-examples li[b-l145mfsbz7] {
    padding: 0.5rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
}

.notification-examples li[b-l145mfsbz7]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #6366f1;
}

/* Delivery Channels */
.delivery-channels[b-l145mfsbz7] {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.channel-option[b-l145mfsbz7] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.channel-option:hover[b-l145mfsbz7] {
    border-color: rgba(59, 130, 246, 0.3);
}

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

.channel-header i[b-l145mfsbz7] {
    font-size: 1.5rem;
    color: #3b82f6;
    width: 32px;
}

.channel-header h3[b-l145mfsbz7] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
    flex: 1;
}

.channel-status[b-l145mfsbz7] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.channel-status.enabled[b-l145mfsbz7] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.channel-status.optional[b-l145mfsbz7] {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.channel-description p[b-l145mfsbz7] {
    color: #9ca3af;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.channel-features[b-l145mfsbz7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-tag[b-l145mfsbz7] {
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
}

/* Notification Center Preview */
.notification-center-preview[b-l145mfsbz7] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    margin-top: 1.5rem;
}

.notification-header[b-l145mfsbz7] {
    background: rgba(17, 24, 39, 0.8);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.notification-header h3[b-l145mfsbz7] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.notification-actions[b-l145mfsbz7] {
    display: flex;
    gap: 0.75rem;
}

.action-btn[b-l145mfsbz7] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn:hover[b-l145mfsbz7] {
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.2);
}

.action-btn.primary[b-l145mfsbz7] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.action-btn.primary:hover[b-l145mfsbz7] {
    background: #2563eb;
    border-color: #2563eb;
}

.notification-list[b-l145mfsbz7] {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item[b-l145mfsbz7] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.notification-item:hover[b-l145mfsbz7] {
    background: rgba(255, 255, 255, 0.02);
}

.notification-item.unread[b-l145mfsbz7] {
    background: rgba(59, 130, 246, 0.05);
    border-left: 3px solid #3b82f6;
}

.notification-icon[b-l145mfsbz7] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon.system[b-l145mfsbz7] {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.notification-icon.instance[b-l145mfsbz7] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.notification-icon.billing[b-l145mfsbz7] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.notification-icon.support[b-l145mfsbz7] {
    background: rgba(251, 146, 60, 0.2);
    color: #f59e0b;
}

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

.notification-content h4[b-l145mfsbz7] {
    font-size: 1rem;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.notification-content p[b-l145mfsbz7] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.notification-time[b-l145mfsbz7] {
    font-size: 0.75rem;
    color: #6b7280;
}

.notification-item .notification-actions[b-l145mfsbz7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-icon[b-l145mfsbz7] {
    background: transparent;
    border: 1px solid transparent;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-icon:hover[b-l145mfsbz7] {
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Notification Preferences */
.preferences-section[b-l145mfsbz7] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    margin-top: 1.5rem;
}

.preference-category[b-l145mfsbz7] {
    margin-bottom: 2rem;
}

.preference-category:last-child[b-l145mfsbz7] {
    margin-bottom: 0;
}

.preference-category h3[b-l145mfsbz7] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.preference-options[b-l145mfsbz7] {
    display: grid;
    gap: 1rem;
}

.preference-item[b-l145mfsbz7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(17, 24, 39, 0.3);
    border-radius: 8px;
}

.preference-info h4[b-l145mfsbz7] {
    font-size: 1rem;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.preference-info p[b-l145mfsbz7] {
    font-size: 0.875rem;
    color: #9ca3af;
}

.preference-toggles[b-l145mfsbz7] {
    display: flex;
    gap: 1rem;
}

.toggle-label[b-l145mfsbz7] {
    position: relative;
    cursor: pointer;
}

.toggle-label input[b-l145mfsbz7] {
    position: absolute;
    opacity: 0;
}

.toggle-icon[b-l145mfsbz7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #6b7280;
    transition: all 0.3s ease;
}

.toggle-label input:checked + .toggle-icon[b-l145mfsbz7] {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #3b82f6;
}

.toggle-icon.email:hover[b-l145mfsbz7] {
    border-color: #3b82f6;
}

.toggle-icon.app:hover[b-l145mfsbz7] {
    border-color: #10b981;
}

.toggle-icon.sms:hover[b-l145mfsbz7] {
    border-color: #f59e0b;
}

/* Custom Rules */
.custom-rules[b-l145mfsbz7] {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.rule-card[b-l145mfsbz7] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

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

.rule-header h3[b-l145mfsbz7] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.rule-status[b-l145mfsbz7] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.rule-status.active[b-l145mfsbz7] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.rule-conditions[b-l145mfsbz7] {
    margin-bottom: 1rem;
}

.condition[b-l145mfsbz7] {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.condition-label[b-l145mfsbz7] {
    color: #6b7280;
    min-width: 80px;
}

.condition-value[b-l145mfsbz7] {
    color: #d1d5db;
}

.rule-actions[b-l145mfsbz7] {
    display: flex;
    gap: 0.75rem;
}

.create-rule-btn[b-l145mfsbz7] {
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    color: #9ca3af;
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.create-rule-btn:hover[b-l145mfsbz7] {
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

/* Notification History */
.history-section[b-l145mfsbz7] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    margin-top: 1.5rem;
}

.history-filters[b-l145mfsbz7] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-box[b-l145mfsbz7] {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-box i[b-l145mfsbz7] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
}

.search-box input[b-l145mfsbz7] {
    width: 100%;
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    color: #f3f4f6;
    font-size: 0.875rem;
}

.search-box input:focus[b-l145mfsbz7] {
    outline: none;
    border-color: rgba(59, 130, 246, 0.3);
}

.filter-options[b-l145mfsbz7] {
    display: flex;
    gap: 0.75rem;
}

.filter-select[b-l145mfsbz7] {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #f3f4f6;
    font-size: 0.875rem;
    cursor: pointer;
}

.history-stats[b-l145mfsbz7] {
    display: flex;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.stat[b-l145mfsbz7] {
    text-align: center;
}

.stat-value[b-l145mfsbz7] {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.stat-label[b-l145mfsbz7] {
    font-size: 0.875rem;
    color: #9ca3af;
}

/* Best Practices */
.best-practices-grid[b-l145mfsbz7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.practice-item[b-l145mfsbz7] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
}

.practice-icon[b-l145mfsbz7] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.practice-icon i[b-l145mfsbz7] {
    font-size: 1.75rem;
    color: #3b82f6;
}

.practice-content h3[b-l145mfsbz7] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.practice-content p[b-l145mfsbz7] {
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notification-types-grid[b-l145mfsbz7] {
        grid-template-columns: 1fr;
    }
    
    .history-filters[b-l145mfsbz7] {
        flex-direction: column;
    }
    
    .search-box[b-l145mfsbz7] {
        min-width: auto;
    }
    
    .filter-options[b-l145mfsbz7] {
        width: 100%;
        justify-content: space-between;
    }
    
    .preference-item[b-l145mfsbz7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .preference-toggles[b-l145mfsbz7] {
        align-self: flex-end;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Organizations.razor.rz.scp.css */
/* Benefits Grid */
.benefits-grid[b-zdzn7fi3vz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.benefit-card[b-zdzn7fi3vz] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.benefit-card:hover[b-zdzn7fi3vz] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(59, 130, 246, 0.3);
}

.benefit-icon[b-zdzn7fi3vz] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.75rem;
    color: #3b82f6;
}

.benefit-content h3[b-zdzn7fi3vz] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.benefit-content p[b-zdzn7fi3vz] {
    font-size: 0.875rem;
    color: #9ca3af;
}

/* Setup Steps */
.setup-steps[b-zdzn7fi3vz] {
    margin-top: 1.5rem;
}

.setup-step[b-zdzn7fi3vz] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.setup-step:not(:last-child)[b-zdzn7fi3vz]::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 50px;
    width: 2px;
    height: calc(100% + 1rem);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.3), transparent);
}

.step-number[b-zdzn7fi3vz] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.step-content[b-zdzn7fi3vz] {
    flex: 1;
}

.step-content h3[b-zdzn7fi3vz] {
    font-size: 1.25rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.step-content p[b-zdzn7fi3vz] {
    color: #9ca3af;
    margin-bottom: 1rem;
}

.step-details[b-zdzn7fi3vz] {
    background: rgba(17, 24, 39, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
}

.detail-item[b-zdzn7fi3vz] {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.detail-label[b-zdzn7fi3vz] {
    color: #6b7280;
    min-width: 120px;
}

.detail-value[b-zdzn7fi3vz] {
    color: #d1d5db;
}

/* Roles Table */
.roles-table[b-zdzn7fi3vz] {
    overflow-x: auto;
    margin-top: 1.5rem;
}

.roles-table table[b-zdzn7fi3vz] {
    width: 100%;
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.roles-table th[b-zdzn7fi3vz] {
    background: rgba(17, 24, 39, 0.8);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #f3f4f6;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.roles-table td[b-zdzn7fi3vz] {
    padding: 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.roles-table tr:last-child td[b-zdzn7fi3vz] {
    border-bottom: none;
}

.role-info[b-zdzn7fi3vz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #f3f4f6;
}

.role-info i[b-zdzn7fi3vz] {
    width: 24px;
}

.role-owner .role-info i[b-zdzn7fi3vz] {
    color: #fbbf24;
}

.role-admin .role-info i[b-zdzn7fi3vz] {
    color: #3b82f6;
}

.role-member .role-info i[b-zdzn7fi3vz] {
    color: #10b981;
}

.role-viewer .role-info i[b-zdzn7fi3vz] {
    color: #9ca3af;
}

.permission-yes[b-zdzn7fi3vz] {
    color: #10b981;
}

.permission-partial[b-zdzn7fi3vz] {
    color: #fbbf24;
}

.permission-no[b-zdzn7fi3vz] {
    color: #6b7280;
}

.permission-yes i[b-zdzn7fi3vz],
.permission-partial i[b-zdzn7fi3vz],
.permission-no i[b-zdzn7fi3vz] {
    margin-right: 0.5rem;
}

/* Member Management */
.member-management[b-zdzn7fi3vz] {
    margin-top: 1.5rem;
}

.management-section[b-zdzn7fi3vz] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    margin-bottom: 1.5rem;
}

.management-section h3[b-zdzn7fi3vz] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
}

.invite-methods[b-zdzn7fi3vz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.invite-method[b-zdzn7fi3vz] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(17, 24, 39, 0.3);
    border-radius: 8px;
}

.method-icon[b-zdzn7fi3vz] {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    flex-shrink: 0;
}

.method-details h4[b-zdzn7fi3vz] {
    font-size: 1rem;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.method-details p[b-zdzn7fi3vz] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.code-snippet[b-zdzn7fi3vz] {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

.code-snippet code[b-zdzn7fi3vz] {
    font-size: 0.75rem;
    color: #a5b4fc;
    font-family: monospace;
}

.action-cards[b-zdzn7fi3vz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.action-card[b-zdzn7fi3vz] {
    background: rgba(17, 24, 39, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.action-card:hover[b-zdzn7fi3vz] {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.2);
}

.action-card i[b-zdzn7fi3vz] {
    font-size: 1.5rem;
    color: #6366f1;
    margin-bottom: 0.75rem;
}

.action-card h4[b-zdzn7fi3vz] {
    font-size: 0.875rem;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.action-card p[b-zdzn7fi3vz] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Resource Sharing */
.resource-sharing-grid[b-zdzn7fi3vz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.sharing-feature[b-zdzn7fi3vz] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.feature-header[b-zdzn7fi3vz] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-header i[b-zdzn7fi3vz] {
    font-size: 1.25rem;
    color: #a78bfa;
}

.feature-header h3[b-zdzn7fi3vz] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.feature-content[b-zdzn7fi3vz] {
    padding: 1.5rem;
}

.feature-content p[b-zdzn7fi3vz] {
    color: #d1d5db;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.feature-content ul[b-zdzn7fi3vz] {
    list-style: none;
    padding: 0;
}

.feature-content li[b-zdzn7fi3vz] {
    padding: 0.5rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
}

.feature-content li[b-zdzn7fi3vz]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #a78bfa;
}

/* Billing Features */
.billing-features[b-zdzn7fi3vz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.billing-card[b-zdzn7fi3vz] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.billing-header[b-zdzn7fi3vz] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.billing-header i[b-zdzn7fi3vz] {
    font-size: 1.25rem;
    color: #10b981;
}

.billing-header h3[b-zdzn7fi3vz] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.billing-content[b-zdzn7fi3vz] {
    padding: 1.5rem;
}

.billing-item[b-zdzn7fi3vz] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.item-label[b-zdzn7fi3vz] {
    color: #9ca3af;
}

.item-value[b-zdzn7fi3vz] {
    color: #d1d5db;
    font-weight: 500;
}

.spending-control[b-zdzn7fi3vz] {
    margin-bottom: 1.5rem;
}

.spending-control label[b-zdzn7fi3vz] {
    display: block;
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.control-value[b-zdzn7fi3vz] {
    position: relative;
}

.control-value > span:first-child[b-zdzn7fi3vz] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #f3f4f6;
}

.progress-bar[b-zdzn7fi3vz] {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin: 0.5rem 0;
    overflow: hidden;
}

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

.usage-text[b-zdzn7fi3vz] {
    font-size: 0.75rem;
    color: #6b7280;
}

.invoice-features[b-zdzn7fi3vz] {
    list-style: none;
    padding: 0;
}

.invoice-features li[b-zdzn7fi3vz] {
    padding: 0.5rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
}

.invoice-features li[b-zdzn7fi3vz]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
}

/* Settings Grid */
.settings-grid[b-zdzn7fi3vz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.settings-category[b-zdzn7fi3vz] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.settings-category h3[b-zdzn7fi3vz] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-category h3 i[b-zdzn7fi3vz] {
    color: #6366f1;
}

.settings-list[b-zdzn7fi3vz] {
    list-style: none;
    padding: 0;
}

.settings-list li[b-zdzn7fi3vz] {
    padding: 0.5rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
}

.settings-list li[b-zdzn7fi3vz]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #6366f1;
}

/* Best Practices */
.best-practices-org[b-zdzn7fi3vz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.practice-card[b-zdzn7fi3vz] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.practice-card:hover[b-zdzn7fi3vz] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.practice-icon[b-zdzn7fi3vz] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.practice-icon i[b-zdzn7fi3vz] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.practice-content h3[b-zdzn7fi3vz] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.practice-content p[b-zdzn7fi3vz] {
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .roles-table[b-zdzn7fi3vz] {
        font-size: 0.75rem;
    }
    
    .roles-table th[b-zdzn7fi3vz],
    .roles-table td[b-zdzn7fi3vz] {
        padding: 0.5rem;
    }
    
    .setup-step[b-zdzn7fi3vz] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .setup-step:not(:last-child)[b-zdzn7fi3vz]::after {
        left: 20px;
        top: 40px;
    }
    
    .invite-methods[b-zdzn7fi3vz] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Providers.razor.rz.scp.css */
/* Provider Dashboard Widgets */
.dashboard-widget[b-3omezwdj42] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.dashboard-widget:hover[b-3omezwdj42] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(59, 130, 246, 0.3);
}

.widget-icon[b-3omezwdj42] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.widget-icon.earnings[b-3omezwdj42] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.widget-icon.servers[b-3omezwdj42] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.widget-icon.utilization[b-3omezwdj42] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.widget-icon.rentals[b-3omezwdj42] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.widget-content h3[b-3omezwdj42] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.widget-value[b-3omezwdj42] {
    font-size: 2rem;
    font-weight: 700;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.widget-description[b-3omezwdj42] {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Server Features */
.server-features[b-3omezwdj42] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.feature-card[b-3omezwdj42] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

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

.feature-header i[b-3omezwdj42] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.feature-header h3[b-3omezwdj42] {
    font-size: 1.25rem;
    color: #f3f4f6;
    margin: 0;
}

.feature-content p[b-3omezwdj42] {
    color: #d1d5db;
    margin-bottom: 0.75rem;
}

.feature-content ul[b-3omezwdj42] {
    list-style: none;
    padding: 0;
}

.feature-content li[b-3omezwdj42] {
    padding: 0.5rem 0;
    color: #9ca3af;
    padding-left: 1.5rem;
    position: relative;
}

.feature-content li[b-3omezwdj42]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #3b82f6;
}

/* Financial Cards */
.financial-card[b-3omezwdj42] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.financial-header[b-3omezwdj42] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.financial-header i[b-3omezwdj42] {
    font-size: 1.75rem;
    color: #3b82f6;
}

.financial-header h3[b-3omezwdj42] {
    font-size: 1.25rem;
    color: #f3f4f6;
    margin: 0;
}

.financial-content[b-3omezwdj42] {
    padding: 1.5rem;
}

.revenue-features[b-3omezwdj42],
.payment-features[b-3omezwdj42] {
    margin-top: 1rem;
}

.revenue-feature[b-3omezwdj42],
.payment-feature[b-3omezwdj42] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #9ca3af;
}

.revenue-feature i[b-3omezwdj42],
.payment-feature i[b-3omezwdj42] {
    color: #6366f1;
    width: 20px;
    text-align: center;
}

/* Pricing Strategy Cards */
.pricing-strategies[b-3omezwdj42] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.strategy-card[b-3omezwdj42] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.strategy-card:hover[b-3omezwdj42] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.strategy-header[b-3omezwdj42] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.strategy-header i[b-3omezwdj42] {
    font-size: 1.5rem;
    color: #a78bfa;
}

.strategy-header h3[b-3omezwdj42] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.strategy-content[b-3omezwdj42] {
    padding: 1.5rem;
}

.strategy-content p[b-3omezwdj42] {
    color: #d1d5db;
    margin-bottom: 1rem;
}

.strategy-content ul[b-3omezwdj42] {
    list-style: none;
    padding: 0;
}

.strategy-content li[b-3omezwdj42] {
    padding: 0.5rem 0;
    color: #9ca3af;
    padding-left: 1.5rem;
    position: relative;
}

.strategy-content li[b-3omezwdj42]::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #a78bfa;
}

/* Support Cards */
.support-card[b-3omezwdj42] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.support-card:hover[b-3omezwdj42] {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.support-icon[b-3omezwdj42] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.support-icon i[b-3omezwdj42] {
    font-size: 1.75rem;
    color: #3b82f6;
}

.support-content h3[b-3omezwdj42] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.support-content p[b-3omezwdj42] {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboard-widget[b-3omezwdj42] {
        text-align: center;
    }
    
    .widget-icon[b-3omezwdj42] {
        margin: 0 auto 1rem;
    }
    
    .server-features[b-3omezwdj42],
    .pricing-strategies[b-3omezwdj42] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Support.razor.rz.scp.css */
/* Support Channels Grid */
.support-channels-grid[b-1iadp72keh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.channel-card[b-1iadp72keh] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.channel-card:hover[b-1iadp72keh] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(59, 130, 246, 0.3);
}

.channel-icon[b-1iadp72keh] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.channel-icon.knowledge-base[b-1iadp72keh] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.channel-icon.benson[b-1iadp72keh] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

.channel-icon.tickets[b-1iadp72keh] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.channel-icon.live-chat[b-1iadp72keh] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.channel-content h3[b-1iadp72keh] {
    font-size: 1.25rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.channel-content p[b-1iadp72keh] {
    color: #9ca3af;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.channel-features[b-1iadp72keh] {
    margin-bottom: 1rem;
}

.channel-features .feature[b-1iadp72keh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
}

.channel-features .feature i[b-1iadp72keh] {
    width: 16px;
    color: #6366f1;
}

.channel-link[b-1iadp72keh] {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.channel-link:hover[b-1iadp72keh] {
    color: #60a5fa;
    transform: translateX(3px);
}

.availability[b-1iadp72keh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #9ca3af;
}

.status[b-1iadp72keh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status.online[b-1iadp72keh] {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: pulse-b-1iadp72keh 2s infinite;
}

@keyframes pulse-b-1iadp72keh {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Knowledge Base Categories */
.knowledge-categories[b-1iadp72keh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.category-card[b-1iadp72keh] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.category-header[b-1iadp72keh] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.category-header i[b-1iadp72keh] {
    font-size: 1.25rem;
    color: #a78bfa;
}

.category-header h3[b-1iadp72keh] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.category-content[b-1iadp72keh] {
    padding: 1.5rem;
}

.article-list[b-1iadp72keh] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-list li[b-1iadp72keh] {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.article-list li:last-child[b-1iadp72keh] {
    border-bottom: none;
}

.article-list a[b-1iadp72keh] {
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-list a:hover[b-1iadp72keh] {
    color: #3b82f6;
    transform: translateX(3px);
}

.article-list a[b-1iadp72keh]::before {
    content: "→";
    color: #6366f1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.article-list a:hover[b-1iadp72keh]::before {
    opacity: 1;
}

/* Benson AI Features */
.benson-features[b-1iadp72keh] {
    margin-top: 1.5rem;
}

.benson-card[b-1iadp72keh] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.benson-header[b-1iadp72keh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.benson-avatar[b-1iadp72keh] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.benson-info h3[b-1iadp72keh] {
    font-size: 1.5rem;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.benson-info p[b-1iadp72keh] {
    color: #a78bfa;
    font-size: 1rem;
}

.benson-capabilities h4[b-1iadp72keh] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
}

.capability-grid[b-1iadp72keh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.capability[b-1iadp72keh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #d1d5db;
}

.capability i[b-1iadp72keh] {
    color: #a78bfa;
    width: 20px;
    text-align: center;
}

.benson-example h4[b-1iadp72keh] {
    font-size: 1rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
}

.example-questions[b-1iadp72keh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.example-question[b-1iadp72keh] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: left;
    color: #9ca3af;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.example-question:hover[b-1iadp72keh] {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #d1d5db;
}

/* Ticket Process */
.ticket-process[b-1iadp72keh] {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.process-step[b-1iadp72keh] {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.process-step:not(:last-child)[b-1iadp72keh]::after {
    content: "";
    position: absolute;
    top: 20px;
    left: calc(100% + 1rem);
    width: calc(100% - 2rem);
    height: 2px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), transparent);
}

.step-number[b-1iadp72keh] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
}

.step-content h3[b-1iadp72keh] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.step-content p[b-1iadp72keh] {
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.5;
}

/* Priority Grid */
.priority-grid[b-1iadp72keh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.priority-card[b-1iadp72keh] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.priority-card.critical[b-1iadp72keh] {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.priority-card.high[b-1iadp72keh] {
    border-color: rgba(251, 146, 60, 0.3);
    background: rgba(251, 146, 60, 0.05);
}

.priority-card.medium[b-1iadp72keh] {
    border-color: rgba(250, 204, 21, 0.3);
    background: rgba(250, 204, 21, 0.05);
}

.priority-card.low[b-1iadp72keh] {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.05);
}

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

.priority-header i[b-1iadp72keh] {
    font-size: 1.25rem;
}

.critical .priority-header i[b-1iadp72keh] {
    color: #ef4444;
}

.high .priority-header i[b-1iadp72keh] {
    color: #f97316;
}

.medium .priority-header i[b-1iadp72keh] {
    color: #fbbf24;
}

.low .priority-header i[b-1iadp72keh] {
    color: #60a5fa;
}

.priority-header h4[b-1iadp72keh] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
}

.priority-content p[b-1iadp72keh] {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.response-time[b-1iadp72keh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Best Practices */
.best-practices[b-1iadp72keh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.practice-card[b-1iadp72keh] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.practice-icon[b-1iadp72keh] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.practice-icon i[b-1iadp72keh] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.practice-content h3[b-1iadp72keh] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.75rem;
}

.practice-content ul[b-1iadp72keh] {
    list-style: none;
    padding: 0;
}

.practice-content li[b-1iadp72keh] {
    padding: 0.5rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
}

.practice-content li[b-1iadp72keh]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
}

/* Live Chat Info */
.live-chat-info[b-1iadp72keh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.chat-availability[b-1iadp72keh],
.chat-tips[b-1iadp72keh] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.chat-availability h3[b-1iadp72keh],
.chat-tips h3[b-1iadp72keh] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1rem;
}

.availability-grid[b-1iadp72keh] {
    margin-bottom: 1rem;
}

.day-hours[b-1iadp72keh] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.day-hours.closed[b-1iadp72keh] {
    opacity: 0.5;
}

.day[b-1iadp72keh] {
    color: #d1d5db;
    font-weight: 500;
}

.hours[b-1iadp72keh] {
    color: #9ca3af;
}

.holiday-notice[b-1iadp72keh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.2);
    border-radius: 8px;
    color: #fb923c;
    font-size: 0.875rem;
}

.chat-tips ul[b-1iadp72keh] {
    list-style: none;
    padding: 0;
}

.chat-tips li[b-1iadp72keh] {
    padding: 0.5rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    padding-left: 1.5rem;
    position: relative;
}

.chat-tips li[b-1iadp72keh]::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #3b82f6;
}

/* Community Channels */
.community-channels[b-1iadp72keh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.community-card[b-1iadp72keh] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.community-card:hover[b-1iadp72keh] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.community-icon[b-1iadp72keh] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.community-icon.discord[b-1iadp72keh] {
    background: #5865f2;
    color: white;
}

.community-icon.forum[b-1iadp72keh] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.community-icon.github[b-1iadp72keh] {
    background: #1f2937;
    color: white;
}

.community-content h3[b-1iadp72keh] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.community-content p[b-1iadp72keh] {
    color: #9ca3af;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.community-link[b-1iadp72keh] {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.community-link:hover[b-1iadp72keh] {
    color: #60a5fa;
}

/* Escalation Process */
.escalation-process[b-1iadp72keh] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    margin-top: 1.5rem;
}

.escalation-step[b-1iadp72keh] {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.escalation-step:last-child[b-1iadp72keh] {
    border-bottom: none;
}

.escalation-step h3[b-1iadp72keh] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.escalation-step p[b-1iadp72keh] {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ticket-process[b-1iadp72keh] {
        flex-direction: column;
    }
    
    .process-step:not(:last-child)[b-1iadp72keh]::after {
        display: none;
    }
    
    .support-channels-grid[b-1iadp72keh] {
        grid-template-columns: 1fr;
    }
    
    .example-questions[b-1iadp72keh] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Tunneling.razor.rz.scp.css */
/* Diagram Container */
.diagram-container[b-ll6zu23qhq] {
    max-width: 100%;
    margin: 2rem auto;
    text-align: center;
}

.diagram[b-ll6zu23qhq] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Tunnel Flow Steps */
.tunnel-flow-steps[b-ll6zu23qhq] {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tunnel-flow-step[b-ll6zu23qhq] {
    display: flex;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
}

.step-number[b-ll6zu23qhq] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-details[b-ll6zu23qhq] {
    flex-grow: 1;
}

.step-details h3[b-ll6zu23qhq] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.step-details p[b-ll6zu23qhq] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.tunnel-flow-arrow[b-ll6zu23qhq] {
    display: flex;
    justify-content: center;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.3);
    padding: 0.25rem 0;
}

/* Benefit Cards */
.benefit-card[b-ll6zu23qhq] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: all 0.2s ease;
}

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

.benefit-card-header[b-ll6zu23qhq] {
    padding: 1rem;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.benefit-card-header i[b-ll6zu23qhq] {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.benefit-card-header h3[b-ll6zu23qhq] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.benefit-card-body[b-ll6zu23qhq] {
    padding: 1rem;
}

.benefit-list[b-ll6zu23qhq] {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 0;
}

.benefit-list li[b-ll6zu23qhq] {
    margin-bottom: 0.5rem;
}

.benefit-list li:last-child[b-ll6zu23qhq] {
    margin-bottom: 0;
}

/* Tunnel Types */
.tunnel-types[b-ll6zu23qhq] {
    margin: 2rem 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .tunnel-types[b-ll6zu23qhq] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tunnel-type[b-ll6zu23qhq] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tunnel-type-header[b-ll6zu23qhq] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tunnel-type-icon[b-ll6zu23qhq] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.tunnel-type-icon.http[b-ll6zu23qhq] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    color: #6366F1;
}

.tunnel-type-icon.tcp[b-ll6zu23qhq] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
    color: #10B981;
}

.tunnel-type-icon.ssh[b-ll6zu23qhq] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
    color: #F59E0B;
}

.tunnel-type-header h3[b-ll6zu23qhq] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.tunnel-type-body[b-ll6zu23qhq] {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tunnel-type-example[b-ll6zu23qhq], .tunnel-type-ports[b-ll6zu23qhq] {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
}

.example-label[b-ll6zu23qhq], .ports-label[b-ll6zu23qhq], .features-label[b-ll6zu23qhq] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.example-value[b-ll6zu23qhq], .ports-value[b-ll6zu23qhq] {
    font-family: monospace;
    font-size: 0.875rem;
    word-break: break-all;
}

.tunnel-type-features[b-ll6zu23qhq] {
    margin-top: 1rem;
}

.features-list[b-ll6zu23qhq] {
    margin: 0.5rem 0 0 1.5rem;
    padding: 0;
}

.features-list li[b-ll6zu23qhq] {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

/* Configuration Options */
.tunnel-config-options[b-ll6zu23qhq] {
    margin-top: 0.75rem;
    background-color: rgba(15, 23, 42, 0.4);
    border-radius: 6px;
    padding: 0.75rem;
}

.config-option[b-ll6zu23qhq] {
    display: flex;
    margin-bottom: 0.5rem;
}

.config-option:last-child[b-ll6zu23qhq] {
    margin-bottom: 0;
}

.option-label[b-ll6zu23qhq] {
    font-weight: 600;
    margin-right: 0.5rem;
    min-width: 7rem;
}

.option-value[b-ll6zu23qhq] {
    color: rgba(255, 255, 255, 0.7);
}

/* Access Rules */
.access-rules[b-ll6zu23qhq] {
    margin-top: 0.75rem;
}

.access-rule[b-ll6zu23qhq] {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.access-rule:last-child[b-ll6zu23qhq] {
    border-bottom: none;
}

.rule-type[b-ll6zu23qhq] {
    font-weight: 600;
    margin-right: 0.5rem;
    min-width: 8rem;
}

.rule-desc[b-ll6zu23qhq] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* Security Features */
.security-features[b-ll6zu23qhq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .security-features[b-ll6zu23qhq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.security-feature[b-ll6zu23qhq] {
    display: flex;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.25rem;
}

.feature-icon[b-ll6zu23qhq] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(99, 102, 241, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    color: var(--primary);
    font-size: 1.25rem;
}

.feature-details[b-ll6zu23qhq] {
    flex-grow: 1;
}

.feature-details h3[b-ll6zu23qhq] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.feature-details p[b-ll6zu23qhq] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Analytics Cards */
.analytics-card[b-ll6zu23qhq] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.analytics-card-header[b-ll6zu23qhq] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.analytics-card-header i[b-ll6zu23qhq] {
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.analytics-card-header h3[b-ll6zu23qhq] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.analytics-card-body[b-ll6zu23qhq] {
    padding: 1rem;
}

.analytics-metrics[b-ll6zu23qhq], .geo-metrics[b-ll6zu23qhq] {
    margin-top: 1.5rem;
}

.metric[b-ll6zu23qhq], .geo-metric[b-ll6zu23qhq] {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.metric-name[b-ll6zu23qhq], .geo-region[b-ll6zu23qhq] {
    width: 8rem;
    font-size: 0.875rem;
}

.metric-bar[b-ll6zu23qhq], .geo-bar[b-ll6zu23qhq] {
    flex-grow: 1;
    height: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    margin: 0 0.75rem;
    overflow: hidden;
}

.metric-fill[b-ll6zu23qhq], .geo-fill[b-ll6zu23qhq] {
    height: 100%;
    background: linear-gradient(90deg, #6366F1, #4F46E5);
    border-radius: 100px;
}

.metric-fill.error[b-ll6zu23qhq] {
    background: linear-gradient(90deg, #EF4444, #B91C1C);
}

.metric-value[b-ll6zu23qhq], .geo-value[b-ll6zu23qhq] {
    width: 3rem;
    font-size: 0.875rem;
    text-align: right;
}

.security-metrics[b-ll6zu23qhq] {
    margin-top: 1rem;
}

.security-metric[b-ll6zu23qhq] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.security-icon[b-ll6zu23qhq] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 1rem;
}

.security-icon.blocked[b-ll6zu23qhq] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

.security-icon.auth[b-ll6zu23qhq] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.security-icon.bot[b-ll6zu23qhq] {
    background-color: rgba(99, 102, 241, 0.2);
    color: #6366F1;
}

.security-details h4[b-ll6zu23qhq] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.security-details p[b-ll6zu23qhq] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.performance-metrics[b-ll6zu23qhq] {
    margin-top: 1rem;
}

.performance-metric[b-ll6zu23qhq] {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.performance-metric:last-child[b-ll6zu23qhq] {
    margin-bottom: 0;
}

.perf-name[b-ll6zu23qhq] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.perf-value[b-ll6zu23qhq] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.25rem 0;
}

.trend[b-ll6zu23qhq] {
    font-size: 0.75rem;
}

.trend.up[b-ll6zu23qhq] {
    color: #10B981;
}

.trend.down[b-ll6zu23qhq] {
    color: #10B981; /* Using green for response time improvements */
}

.trend i[b-ll6zu23qhq] {
    margin-right: 0.25rem;
}

/* Code Blocks */
.code-block[b-ll6zu23qhq] {
    background-color: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5rem 0;
}

.code-header[b-ll6zu23qhq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-title[b-ll6zu23qhq] {
    font-size: 0.875rem;
    font-weight: 600;
}

.code-actions[b-ll6zu23qhq] {
    display: flex;
}

.code-action[b-ll6zu23qhq] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

.code-action:hover[b-ll6zu23qhq] {
    color: rgba(255, 255, 255, 0.8);
}

.code-block pre[b-ll6zu23qhq] {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
}

.code-block code[b-ll6zu23qhq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

/* Tips */
.tips-container[b-ll6zu23qhq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .tips-container[b-ll6zu23qhq] {
        grid-template-columns: 1fr 1fr;
    }
}

.tip[b-ll6zu23qhq] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
}

.tip-icon[b-ll6zu23qhq] {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.tip-content[b-ll6zu23qhq] {
    flex-grow: 1;
}

.tip-content h3[b-ll6zu23qhq] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.tip-content ul[b-ll6zu23qhq] {
    margin: 0;
    padding-left: 1.25rem;
}

.tip-content ul li[b-ll6zu23qhq] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.tip-content ul li:last-child[b-ll6zu23qhq] {
    margin-bottom: 0;
}
/* _content/WebUI/Components/Pages/Public/Docs/Features/Wallets.razor.rz.scp.css */
/* Wallet Overview */
.wallet-overview[b-uib4o2h3qk] {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.wallet-balance-card[b-uib4o2h3qk] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.balance-header[b-uib4o2h3qk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.balance-header h3[b-uib4o2h3qk] {
    font-size: 1.125rem;
    color: #9ca3af;
    margin: 0;
}

.balance-badge[b-uib4o2h3qk] {
    background: #10b981;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.balance-amount[b-uib4o2h3qk] {
    display: flex;
    align-items: baseline;
    margin-bottom: 2rem;
}

.balance-amount .currency[b-uib4o2h3qk] {
    font-size: 2rem;
    color: #6b7280;
    margin-right: 0.5rem;
}

.balance-amount .amount[b-uib4o2h3qk] {
    font-size: 3.5rem;
    font-weight: 700;
    color: #f3f4f6;
}

.balance-actions[b-uib4o2h3qk] {
    display: flex;
    gap: 1rem;
}

.wallet-stats[b-uib4o2h3qk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.stat-card[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    backdrop-filter: blur(10px);
}

.stat-icon[b-uib4o2h3qk] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.spending[b-uib4o2h3qk] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.stat-icon.auto-recharge[b-uib4o2h3qk] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.stat-icon.payment[b-uib4o2h3qk] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
}

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

.stat-label[b-uib4o2h3qk] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.stat-value[b-uib4o2h3qk] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.stat-change[b-uib4o2h3qk] {
    font-size: 0.75rem;
    color: #6b7280;
}

.stat-change.positive[b-uib4o2h3qk] {
    color: #10b981;
}

.stat-description[b-uib4o2h3qk] {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Funding Methods */
.funding-methods[b-uib4o2h3qk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.method-card[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.method-card:hover[b-uib4o2h3qk] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.method-header[b-uib4o2h3qk] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.method-header i[b-uib4o2h3qk] {
    font-size: 1.75rem;
    color: #3b82f6;
}

.method-header h3[b-uib4o2h3qk] {
    font-size: 1.25rem;
    color: #f3f4f6;
    margin: 0;
    flex: 1;
}

.method-badge[b-uib4o2h3qk] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.method-badge.instant[b-uib4o2h3qk] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.method-badge.new[b-uib4o2h3qk] {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
}

.method-content[b-uib4o2h3qk] {
    padding: 1.5rem;
}

.method-features[b-uib4o2h3qk] {
    margin-top: 1rem;
}

.method-features .feature[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #9ca3af;
}

.method-features .feature i[b-uib4o2h3qk] {
    color: #10b981;
    width: 16px;
}

/* Quick Add Funds */
.quick-add-container[b-uib4o2h3qk] {
    margin-top: 1.5rem;
}

.quick-add-grid[b-uib4o2h3qk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.quick-add-button[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.quick-add-button:hover[b-uib4o2h3qk] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.quick-add-button.popular[b-uib4o2h3qk] {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
}

.quick-add-button.custom[b-uib4o2h3qk] {
    border-style: dashed;
}

.quick-amount[b-uib4o2h3qk] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f3f4f6;
    display: block;
}

.popular-label[b-uib4o2h3qk] {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Auto Recharge */
.auto-recharge-section[b-uib4o2h3qk] {
    margin-top: 1.5rem;
}

.auto-recharge-card[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.recharge-header[b-uib4o2h3qk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.recharge-title[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.recharge-title i[b-uib4o2h3qk] {
    font-size: 1.5rem;
    color: #10b981;
}

.recharge-title h3[b-uib4o2h3qk] {
    font-size: 1.25rem;
    color: #f3f4f6;
    margin: 0;
}

.toggle-switch[b-uib4o2h3qk] {
    position: relative;
    width: 60px;
    height: 30px;
}

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

.toggle-switch label[b-uib4o2h3qk] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4b5563;
    transition: .4s;
    border-radius: 34px;
}

.toggle-switch label[b-uib4o2h3qk]:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked + label[b-uib4o2h3qk] {
    background-color: #10b981;
}

.toggle-switch input:checked + label[b-uib4o2h3qk]:before {
    transform: translateX(30px);
}

.recharge-setting[b-uib4o2h3qk] {
    margin-bottom: 1.5rem;
}

.recharge-setting label[b-uib4o2h3qk] {
    display: block;
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.setting-value[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #d1d5db;
}

.amount-input[b-uib4o2h3qk] {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: #f3f4f6;
    font-size: 1.125rem;
    font-weight: 600;
    width: 120px;
    text-align: right;
}

.payment-method-select[b-uib4o2h3qk] {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method-select:hover[b-uib4o2h3qk] {
    border-color: rgba(59, 130, 246, 0.3);
}

/* Payment Methods */
.payment-methods-grid[b-uib4o2h3qk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.payment-method-card[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.payment-method-card:hover[b-uib4o2h3qk] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.payment-method-card.primary[b-uib4o2h3qk] {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
}

.payment-method-card.add-new[b-uib4o2h3qk] {
    border-style: dashed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.card-type[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    color: #f3f4f6;
}

.card-type i[b-uib4o2h3qk] {
    font-size: 1.5rem;
}

.primary-badge[b-uib4o2h3qk] {
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.card-number[b-uib4o2h3qk] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 0.75rem;
    letter-spacing: 0.1em;
}

.card-details[b-uib4o2h3qk] {
    display: flex;
    justify-content: space-between;
    color: #9ca3af;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.card-actions[b-uib4o2h3qk] {
    display: flex;
    gap: 0.75rem;
}

.action-btn[b-uib4o2h3qk] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn:hover[b-uib4o2h3qk] {
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6;
    border-color: rgba(255, 255, 255, 0.2);
}

.add-card-content[b-uib4o2h3qk] {
    text-align: center;
}

.add-card-content i[b-uib4o2h3qk] {
    font-size: 2.5rem;
    color: #6366f1;
    margin-bottom: 1rem;
}

.add-card-content h3[b-uib4o2h3qk] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.add-card-content p[b-uib4o2h3qk] {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Transaction History */
.transaction-section[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    margin-top: 1.5rem;
}

.transaction-filters[b-uib4o2h3qk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.filter-group[b-uib4o2h3qk] {
    display: flex;
    gap: 0.5rem;
}

.filter-btn[b-uib4o2h3qk] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover[b-uib4o2h3qk] {
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6;
}

.filter-btn.active[b-uib4o2h3qk] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.date-filter[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: #d1d5db;
}

.transaction-list[b-uib4o2h3qk] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1rem;
}

.transaction-item[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.transaction-icon[b-uib4o2h3qk] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-icon.deposit[b-uib4o2h3qk] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.transaction-icon.charge[b-uib4o2h3qk] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.transaction-icon.refund[b-uib4o2h3qk] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.transaction-details[b-uib4o2h3qk] {
    flex: 1;
}

.transaction-details h4[b-uib4o2h3qk] {
    font-size: 1rem;
    color: #f3f4f6;
    margin-bottom: 0.25rem;
}

.transaction-details p[b-uib4o2h3qk] {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 0.25rem;
}

.transaction-date[b-uib4o2h3qk] {
    font-size: 0.75rem;
    color: #6b7280;
}

.transaction-amount[b-uib4o2h3qk] {
    font-size: 1.125rem;
    font-weight: 600;
}

.transaction-amount.positive[b-uib4o2h3qk] {
    color: #10b981;
}

.transaction-amount.negative[b-uib4o2h3qk] {
    color: #ef4444;
}

.transaction-footer[b-uib4o2h3qk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}

.pagination[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-btn[b-uib4o2h3qk] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover[b-uib4o2h3qk] {
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6;
}

.page-info[b-uib4o2h3qk] {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Analytics */
.analytics-section[b-uib4o2h3qk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.analytics-card[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.analytics-card h3[b-uib4o2h3qk] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin-bottom: 1.5rem;
}

.chart-container[b-uib4o2h3qk] {
    height: 250px;
    margin-bottom: 1.5rem;
}

.chart-legend[b-uib4o2h3qk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.legend-item[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #9ca3af;
}

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

.legend-color.gpu[b-uib4o2h3qk] {
    background: #3b82f6;
}

.legend-color.cpu[b-uib4o2h3qk] {
    background: #10b981;
}

.legend-color.storage[b-uib4o2h3qk] {
    background: #f59e0b;
}

.legend-color.other[b-uib4o2h3qk] {
    background: #8b5cf6;
}

.trend-chart[b-uib4o2h3qk] {
    height: 300px;
}

/* Alerts */
.alerts-grid[b-uib4o2h3qk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.alert-card[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

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

.alert-header i[b-uib4o2h3qk] {
    font-size: 1.5rem;
    color: #f59e0b;
}

.alert-header h3[b-uib4o2h3qk] {
    font-size: 1.125rem;
    color: #f3f4f6;
    margin: 0;
    flex: 1;
}

.alert-toggle[b-uib4o2h3qk] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.alert-content p[b-uib4o2h3qk] {
    color: #9ca3af;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.alert-setting[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-input[b-uib4o2h3qk] {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: #f3f4f6;
    font-size: 1rem;
    font-weight: 600;
    width: 100px;
    text-align: right;
}

.alert-info[b-uib4o2h3qk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6366f1;
    font-size: 0.875rem;
}

/* Security Tips */
.security-tips[b-uib4o2h3qk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.security-tip[b-uib4o2h3qk] {
    background: rgba(30, 30, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    backdrop-filter: blur(10px);
}

.security-tip .tip-icon[b-uib4o2h3qk] {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    flex-shrink: 0;
}

.security-tip .tip-content h3[b-uib4o2h3qk] {
    font-size: 1rem;
    color: #f3f4f6;
    margin-bottom: 0.5rem;
}

.security-tip .tip-content p[b-uib4o2h3qk] {
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wallet-stats[b-uib4o2h3qk] {
        grid-template-columns: 1fr;
    }
    
    .funding-methods[b-uib4o2h3qk] {
        grid-template-columns: 1fr;
    }
    
    .analytics-section[b-uib4o2h3qk] {
        grid-template-columns: 1fr;
    }
    
    .transaction-filters[b-uib4o2h3qk] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group[b-uib4o2h3qk] {
        justify-content: center;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/GettingStarted/Authentication.razor.rz.scp.css */
.steps-container[b-m6hv6h4oea] {
    margin: 2rem 0;
}

.step[b-m6hv6h4oea] {
    display: flex;
    margin-bottom: 1.5rem;
}

.step:last-child[b-m6hv6h4oea] {
    margin-bottom: 0;
}

.step-number[b-m6hv6h4oea] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content[b-m6hv6h4oea] {
    flex-grow: 1;
}

.step-content h3[b-m6hv6h4oea] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.step-content p[b-m6hv6h4oea] {
    margin: 0 0 0.75rem 0;
}

.login-method-card[b-m6hv6h4oea], .profile-section-card[b-m6hv6h4oea] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.login-method-header[b-m6hv6h4oea] {
    background-color: rgba(99, 102, 241, 0.1);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.login-method-header i[b-m6hv6h4oea] {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.login-method-header h3[b-m6hv6h4oea] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.login-method-body[b-m6hv6h4oea] {
    padding: 1rem;
}

.sso-badge[b-m6hv6h4oea] {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.sso-badge i[b-m6hv6h4oea] {
    margin-right: 0.25rem;
}

.mfa-option-card[b-m6hv6h4oea] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.mfa-option-icon[b-m6hv6h4oea] {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.mfa-option-card h4[b-m6hv6h4oea] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.mfa-option-card p[b-m6hv6h4oea] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.profile-section-card[b-m6hv6h4oea] {
    display: flex;
    padding: 1.5rem;
    text-decoration: none;
    color: white;
    transition: all 0.2s ease;
}

.profile-section-card:hover[b-m6hv6h4oea] {
    background-color: rgba(79, 70, 229, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.profile-section-icon[b-m6hv6h4oea] {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
}

.profile-section-content h3[b-m6hv6h4oea] {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.profile-section-content p[b-m6hv6h4oea] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0;
}

.info-box.warning[b-m6hv6h4oea] {
    background-color: rgba(217, 119, 6, 0.1);
    border-left: 4px solid #F59E0B;
}

.info-box.warning .info-box-icon[b-m6hv6h4oea],
.info-box.warning .info-box-title[b-m6hv6h4oea] {
    color: #F59E0B;
}

.accordion[b-m6hv6h4oea] {
    margin: 2rem 0;
}

.accordion-item[b-m6hv6h4oea] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.accordion-header[b-m6hv6h4oea] {
    padding: 1rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.accordion-header i:first-child[b-m6hv6h4oea] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.accordion-header h3[b-m6hv6h4oea] {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    flex-grow: 1;
}

.accordion-icon[b-m6hv6h4oea] {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon[b-m6hv6h4oea] {
    transform: rotate(180deg);
}

.accordion-content[b-m6hv6h4oea] {
    padding: 0 1rem 1rem 2.75rem;
    display: none;
}

.accordion-item.active .accordion-content[b-m6hv6h4oea] {
    display: block;
}
/* _content/WebUI/Components/Pages/Public/Docs/GettingStarted/Marketplace.razor.rz.scp.css */
.steps-container[b-2nhn16fife] {
    margin: 2rem 0;
}

.step[b-2nhn16fife] {
    display: flex;
    margin-bottom: 1.5rem;
}

.step:last-child[b-2nhn16fife] {
    margin-bottom: 0;
}

.step-number[b-2nhn16fife] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content[b-2nhn16fife] {
    flex-grow: 1;
}

.step-content h3[b-2nhn16fife] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.step-content p[b-2nhn16fife] {
    margin: 0 0 0.75rem 0;
}

.resource-card[b-2nhn16fife] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: all 0.2s ease;
}

.resource-card:hover[b-2nhn16fife] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.resource-card.featured[b-2nhn16fife] {
    border-color: rgba(99, 102, 241, 0.4);
    background-color: rgba(99, 102, 241, 0.1);
}

.resource-card-header[b-2nhn16fife] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.resource-card-header i[b-2nhn16fife] {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.resource-card-header h3[b-2nhn16fife] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.popular-tag[b-2nhn16fife] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(236, 72, 153, 0.2);
    color: #EC4899;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.resource-card-body[b-2nhn16fife] {
    padding: 1rem;
}

.resource-specs[b-2nhn16fife] {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 0;
}

.resource-specs li[b-2nhn16fife] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.resource-specs li span[b-2nhn16fife] {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.resource-use-case[b-2nhn16fife] {
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.resource-use-case strong[b-2nhn16fife] {
    color: var(--primary);
}

.app-category-card[b-2nhn16fife] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.25rem;
    display: flex;
    transition: all 0.2s ease;
    text-decoration: none;
    color: white;
}

.app-category-card:hover[b-2nhn16fife] {
    background-color: rgba(79, 70, 229, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.app-category-icon[b-2nhn16fife] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.1));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.app-category-content[b-2nhn16fife] {
    flex-grow: 1;
}

.app-category-content h3[b-2nhn16fife] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.app-category-content p[b-2nhn16fife] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.5rem 0;
}

.app-count[b-2nhn16fife] {
    font-size: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 0.1rem 0.5rem;
    display: inline-block;
}

.app-card[b-2nhn16fife] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.app-card:hover[b-2nhn16fife] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
}

.app-card-header[b-2nhn16fife] {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-logo[b-2nhn16fife] {
    width: 2rem;
    height: 2rem;
    border-radius: 4px;
}

.app-rating[b-2nhn16fife] {
    font-size: 0.75rem;
    color: #FFD700;
}

.app-rating span[b-2nhn16fife] {
    color: rgba(255, 255, 255, 0.7);
    margin-left: 0.25rem;
}

.app-card-body[b-2nhn16fife] {
    padding: 1rem;
}

.app-card-body h3[b-2nhn16fife] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.app-card-body p[b-2nhn16fife] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.75rem 0;
    height: 38px;
}

.app-tags[b-2nhn16fife] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-tag[b-2nhn16fife] {
    font-size: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 0.1rem 0.5rem;
}

.app-card-footer[b-2nhn16fife] {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-installs[b-2nhn16fife] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.app-details-link[b-2nhn16fife] {
    font-size: 0.75rem;
    color: var(--primary);
    text-decoration: none;
}

.app-details-link:hover[b-2nhn16fife] {
    text-decoration: underline;
}

.pricing-card[b-2nhn16fife] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.pricing-card-header[b-2nhn16fife] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-card-header i[b-2nhn16fife] {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.pricing-card-header h3[b-2nhn16fife] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.pricing-card-body[b-2nhn16fife] {
    padding: 1rem;
}

.pricing-details[b-2nhn16fife] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.pricing-details li[b-2nhn16fife] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.pricing-details li i[b-2nhn16fife] {
    color: var(--secondary);
    margin-right: 0.5rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.price-example[b-2nhn16fife] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 1rem;
}

.example-label[b-2nhn16fife] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-bottom: 0.5rem;
}

.example-prices[b-2nhn16fife] {
    display: flex;
    justify-content: space-around;
}

.price-option[b-2nhn16fife] {
    text-align: center;
}

.price-value[b-2nhn16fife] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    display: block;
}

.price-period[b-2nhn16fife] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.license-types[b-2nhn16fife] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.license-tag[b-2nhn16fife] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.license-tag i[b-2nhn16fife] {
    margin-right: 0.25rem;
}

.license-tag.free[b-2nhn16fife] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.license-tag.premium[b-2nhn16fife] {
    background-color: rgba(236, 72, 153, 0.1);
    color: #EC4899;
}

.license-tag.byol[b-2nhn16fife] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}
/* _content/WebUI/Components/Pages/Public/Docs/GettingStarted/Overview.razor.rz.scp.css */
.component-card[b-gxxk4ksxr3], .stack-card[b-gxxk4ksxr3], .role-card[b-gxxk4ksxr3] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.component-card-header[b-gxxk4ksxr3] {
    background-color: rgba(99, 102, 241, 0.1);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.component-card-header i[b-gxxk4ksxr3] {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 0.75rem;
}

.component-card-header h3[b-gxxk4ksxr3] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.component-card-body[b-gxxk4ksxr3] {
    padding: 1rem;
}

.component-features[b-gxxk4ksxr3] {
    list-style: disc;
    margin-left: 1.5rem;
    margin-top: 0.75rem;
}

.component-features li[b-gxxk4ksxr3] {
    margin-bottom: 0.25rem;
}

.architecture-table[b-gxxk4ksxr3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
}

.architecture-table th[b-gxxk4ksxr3], .architecture-table td[b-gxxk4ksxr3] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
    text-align: left;
}

.architecture-table th[b-gxxk4ksxr3] {
    font-weight: 600;
    background-color: rgba(15, 23, 42, 0.6);
}

.architecture-table td ul[b-gxxk4ksxr3] {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 0;
}

.stack-card-header[b-gxxk4ksxr3] {
    background-color: rgba(99, 102, 241, 0.1);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stack-card-header h3[b-gxxk4ksxr3] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.stack-card-body[b-gxxk4ksxr3] {
    padding: 0.5rem;
}

.stack-list[b-gxxk4ksxr3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stack-list li[b-gxxk4ksxr3] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stack-list li:last-child[b-gxxk4ksxr3] {
    border-bottom: none;
}

.stack-icon[b-gxxk4ksxr3] {
    width: 2rem;
    font-size: 1.25rem;
    color: var(--primary);
    display: flex;
    justify-content: center;
}

.stack-name[b-gxxk4ksxr3] {
    width: 8rem;
    font-weight: 500;
}

.stack-desc[b-gxxk4ksxr3] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.role-card[b-gxxk4ksxr3] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.role-icon[b-gxxk4ksxr3] {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.role-card h3[b-gxxk4ksxr3] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.role-capabilities[b-gxxk4ksxr3] {
    list-style: disc;
    text-align: left;
    margin-top: 1rem;
    padding-left: 1.5rem;
}

.role-capabilities li[b-gxxk4ksxr3] {
    margin-bottom: 0.25rem;
}

.image-container[b-gxxk4ksxr3] {
    max-width: 100%;
    margin: 2rem auto;
}

.image-container img[b-gxxk4ksxr3] {
    max-width: 100%;
    height: auto;
}
/* _content/WebUI/Components/Pages/Public/Docs/GettingStarted/Quickstart.razor.rz.scp.css */
.config-card[b-7nrhgmgqml] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.config-card-header[b-7nrhgmgqml] {
    background-color: rgba(99, 102, 241, 0.1);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.config-card-header h3[b-7nrhgmgqml] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.price[b-7nrhgmgqml] {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.config-card-body[b-7nrhgmgqml] {
    padding: 1rem;
}

.config-card-body ul[b-7nrhgmgqml] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.config-card-body ul li[b-7nrhgmgqml] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.config-card-body ul li i[b-7nrhgmgqml] {
    width: 1.5rem;
    color: var(--primary);
    margin-right: 0.5rem;
}

.steps-container[b-7nrhgmgqml] {
    margin: 2rem 0;
}

.step[b-7nrhgmgqml] {
    display: flex;
    margin-bottom: 1.5rem;
}

.step-number[b-7nrhgmgqml] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content h3[b-7nrhgmgqml] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.step-content p[b-7nrhgmgqml] {
    margin: 0;
}

.image-container[b-7nrhgmgqml] {
    max-width: 100%;
    margin: 2rem auto;
}

.image-container img[b-7nrhgmgqml] {
    max-width: 100%;
    height: auto;
}

.doc-link[b-7nrhgmgqml] {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.doc-link:hover[b-7nrhgmgqml] {
    text-decoration: underline;
}
/* _content/WebUI/Components/Pages/Public/Docs/Guides/Applications.razor.rz.scp.css */
.doc-content[b-jg41baidq4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.breadcrumb[b-jg41baidq4] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.breadcrumb-item[b-jg41baidq4] {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item:hover[b-jg41baidq4] {
    color: var(--primary);
    text-decoration: underline;
}

.breadcrumb-separator[b-jg41baidq4] {
    margin: 0 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    position: relative;
    top: -1px;
}

.breadcrumb-item-current[b-jg41baidq4] {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.version-badge[b-jg41baidq4] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border-radius: 0.375rem;
    margin-left: 0.75rem;
    vertical-align: middle;
}

.info-box[b-jg41baidq4] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.1));
    border-left: 4px solid var(--primary);
    border-radius: 0.375rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.steps-container[b-jg41baidq4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
}

.step[b-jg41baidq4] {
    display: flex;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.step-number[b-jg41baidq4] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content[b-jg41baidq4] {
    flex: 1;
}

.deployment-cards[b-jg41baidq4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.deployment-card[b-jg41baidq4] {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.deployment-card:hover[b-jg41baidq4] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.deployment-card h3[b-jg41baidq4] {
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workflow-diagram[b-jg41baidq4] {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 2rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.workflow-grid[b-jg41baidq4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.workflow-item[b-jg41baidq4] {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.375rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.workflow-arrow[b-jg41baidq4] {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    font-size: 1.5rem;
}

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

.observability-card[b-jg41baidq4] {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.observability-card h3[b-jg41baidq4] {
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doc-footer[b-jg41baidq4] {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4rem;
    padding-top: 2rem;
}

.doc-footer a[b-jg41baidq4] {
    display: flex;
    align-items: center;
    color: var(--primary);
    text-decoration: none;
    gap: 0.5rem;
}

.doc-feedback[b-jg41baidq4] {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 3rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.doc-feedback h3[b-jg41baidq4] {
    margin-bottom: 1rem;
}

.doc-feedback-buttons[b-jg41baidq4] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.best-practices-grid[b-jg41baidq4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.best-practice-card[b-jg41baidq4] {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1.5rem;
    border-left: 4px solid var(--primary);
}

.best-practice-card h3[b-jg41baidq4] {
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

code[b-jg41baidq4] {
    font-family: "Fira Code", monospace;
    font-size: 0.9rem;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
}

pre[b-jg41baidq4] {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

pre code[b-jg41baidq4] {
    background-color: transparent;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #e2e8f0;
}

table[b-jg41baidq4] {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

table th[b-jg41baidq4], table td[b-jg41baidq4] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

table th[b-jg41baidq4] {
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

@media (max-width: 768px) {
    .deployment-cards[b-jg41baidq4], 
    .workflow-grid[b-jg41baidq4],
    .observability-grid[b-jg41baidq4],
    .best-practices-grid[b-jg41baidq4] {
        grid-template-columns: 1fr;
    }
    
    .step[b-jg41baidq4] {
        flex-direction: column;
    }
    
    .step-number[b-jg41baidq4] {
        margin-bottom: 1rem;
    }
    
    .doc-footer[b-jg41baidq4] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Guides/Instances.razor.rz.scp.css */
/* Lifecycle Strategies */
.lifecycle-strategies[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.lifecycle-strategy[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.strategy-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.strategy-icon[b-efywtp03km] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.strategy-header h3[b-efywtp03km] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.strategy-body[b-efywtp03km] {
    padding: 1.5rem;
}

/* Steps Container */
.steps-container[b-efywtp03km] {
    margin: 1.5rem 0;
}

.step[b-efywtp03km] {
    display: flex;
    margin-bottom: 1.25rem;
}

.step:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

.step-number[b-efywtp03km] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.step-content[b-efywtp03km] {
    flex-grow: 1;
}

.step-content h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.step-content p[b-efywtp03km] {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Example Scenario */
.example-scenario[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.scenario-header[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.scenario-body p[b-efywtp03km] {
    margin: 0;
    font-size: 0.875rem;
}

/* Scaling Options */
.scaling-options[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}

.scaling-option[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 1rem;
}

.option-name[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.option-desc[b-efywtp03km] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Configuration Example */
.configuration-example[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.config-header[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.config-body ul[b-efywtp03km] {
    margin: 0;
    padding-left: 1.5rem;
}

.config-body li[b-efywtp03km] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.config-body li:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

.info-note[b-efywtp03km] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    font-size: 0.875rem;
    margin-top: 1.5rem;
}

.info-note i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Data Management Options */
.data-management-options[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.data-option[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.data-option-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-option-icon[b-efywtp03km] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.data-option-header h3[b-efywtp03km] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.data-option-body[b-efywtp03km] {
    padding: 1.5rem;
}

/* Volume Types */
.volume-types[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.volume-type[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.volume-type-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.volume-type-header i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.volume-type-header span[b-efywtp03km] {
    font-weight: 600;
}

.volume-type-body[b-efywtp03km] {
    padding: 1rem;
}

.volume-type-body p[b-efywtp03km] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
}

.volume-specs[b-efywtp03km] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.volume-specs li[b-efywtp03km] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.volume-specs li:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

/* Backup Types */
.backup-types[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.backup-type[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.backup-type-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.backup-type-header i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.backup-type-header span[b-efywtp03km] {
    font-weight: 600;
}

.backup-type-body[b-efywtp03km] {
    padding: 1rem;
}

.backup-type-body p[b-efywtp03km] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
}

.backup-features[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.backup-feature[b-efywtp03km] {
    display: flex;
    align-items: center;
}

.backup-feature i[b-efywtp03km] {
    color: #10B981;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.backup-feature span[b-efywtp03km] {
    font-size: 0.875rem;
}

.best-practices-list[b-efywtp03km] {
    margin-top: 1.5rem;
}

.best-practices-list h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.best-practices-list ul[b-efywtp03km] {
    margin: 0;
    padding-left: 1.5rem;
}

.best-practices-list li[b-efywtp03km] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.best-practices-list li:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

/* Use Cases */
.use-cases[b-efywtp03km] {
    margin-top: 1.5rem;
}

.use-cases h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.use-case-grid[b-efywtp03km] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .use-case-grid[b-efywtp03km] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.use-case[b-efywtp03km] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
}

.use-case i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.use-case span[b-efywtp03km] {
    font-size: 0.875rem;
}

/* Networking Options */
.networking-options[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.networking-option[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.networking-option-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.networking-option-icon[b-efywtp03km] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.networking-option-header h3[b-efywtp03km] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.networking-option-body[b-efywtp03km] {
    padding: 1.5rem;
}

/* Security Group Example */
.security-group-example[b-efywtp03km] {
    margin-top: 1.5rem;
}

.security-group-example h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.rule-table-container[b-efywtp03km] {
    overflow-x: auto;
}

.rule-table[b-efywtp03km] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.rule-table th[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rule-table td[b-efywtp03km] {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.security-tips[b-efywtp03km] {
    margin-top: 1.5rem;
}

.security-tips h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.security-tips ul[b-efywtp03km] {
    margin: 0;
    padding-left: 1.5rem;
}

.security-tips li[b-efywtp03km] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.security-tips li:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

/* VPN Types */
.vpn-types[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.vpn-type[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.vpn-type-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vpn-type-header i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.vpn-type-header span[b-efywtp03km] {
    font-weight: 600;
}

.vpn-type-body[b-efywtp03km] {
    padding: 1rem;
}

.vpn-type-body p[b-efywtp03km] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
}

.requirement-list[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.requirement[b-efywtp03km] {
    display: flex;
    align-items: center;
}

.requirement i[b-efywtp03km] {
    color: #10B981;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.requirement span[b-efywtp03km] {
    font-size: 0.875rem;
}

.configuration-steps[b-efywtp03km] {
    margin-top: 1.5rem;
}

.configuration-steps h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

/* Private Network Diagram */
.private-network-diagram[b-efywtp03km] {
    text-align: center;
    margin: 1.5rem 0;
}

.private-network-diagram img[b-efywtp03km] {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.network-components[b-efywtp03km] {
    margin-top: 1.5rem;
}

.network-components h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.component-list[b-efywtp03km] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .component-list[b-efywtp03km] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.network-component[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
}

.component-name[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.component-desc[b-efywtp03km] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.use-case-examples[b-efywtp03km] {
    margin-top: 1.5rem;
}

.use-case-examples h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.use-case-example[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.use-case-example:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

.use-case-name[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.use-case-desc ul[b-efywtp03km] {
    margin: 0;
    padding-left: 1.5rem;
}

.use-case-desc li[b-efywtp03km] {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.use-case-desc li:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

/* Monitoring Options */
.monitoring-options[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.monitoring-option[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.monitoring-option-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.monitoring-option-icon[b-efywtp03km] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.monitoring-option-header h3[b-efywtp03km] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.monitoring-option-body[b-efywtp03km] {
    padding: 1.5rem;
}

/* Advanced Metrics */
.advanced-metrics[b-efywtp03km] {
    margin-top: 1.5rem;
}

.advanced-metrics h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.metrics-grid[b-efywtp03km] {
    display: grid;
    grid-template-columns: 1fr;
    gap: a1.5rem;
}

@media (min-width: 768px) {
    .metrics-grid[b-efywtp03km] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.metric-category[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 1rem;
}

.category-name[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.metric-list[b-efywtp03km] {
    margin: 0;
    padding-left: 1.5rem;
}

.metric-list li[b-efywtp03km] {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.metric-list li:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

/* Alert Strategies */
.alert-strategies[b-efywtp03km] {
    margin-top: 1.5rem;
}

.alert-strategies h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.strategy-list[b-efywtp03km] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .strategy-list[b-efywtp03km] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.alert-strategy[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
}

.strategy-name[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.strategy-desc[b-efywtp03km] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.monitoring-tools[b-efywtp03km] {
    margin-top: 1.5rem;
}

.monitoring-tools h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.tool-list[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.monitoring-tool[b-efywtp03km] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
}

.monitoring-tool i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.monitoring-tool span[b-efywtp03km] {
    font-size: 0.875rem;
}

/* Infrastructure as Code */
.iac-options[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.iac-option[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.iac-option-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.iac-option-header i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.iac-option-header span[b-efywtp03km] {
    font-weight: 600;
}

.iac-option-body[b-efywtp03km] {
    padding: 1rem;
}

.iac-option-body p[b-efywtp03km] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
}

.benefits-list[b-efywtp03km] {
    margin-top: 1.5rem;
}

.benefits-list h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.benefits-grid[b-efywtp03km] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .benefits-grid[b-efywtp03km] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.benefit-item[b-efywtp03km] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
}

.benefit-item i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.benefit-item span[b-efywtp03km] {
    font-size: 0.875rem;
}

/* Performance Tuning */
.tuning-categories[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.tuning-category[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.tuning-category-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tuning-category-header i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.tuning-category-header span[b-efywtp03km] {
    font-weight: 600;
}

.tuning-category-body[b-efywtp03km] {
    padding: 1rem;
}

.tuning-tips[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tuning-tip[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.4);
    border-radius: 6px;
    padding: 0.75rem;
}

.tip-name[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.tip-desc[b-efywtp03km] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Automation Options */
.automation-options[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
}

.automation-option[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.automation-option-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.automation-option-icon[b-efywtp03km] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.automation-option-header h3[b-efywtp03km] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.automation-option-body[b-efywtp03km] {
    padding: 1.5rem;
}

/* Orchestration Features */
.orchestration-features[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.orchestration-feature[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    overflow: hidden;
}

.feature-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-header i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
}

.feature-header span[b-efywtp03km] {
    font-weight: 600;
}

.feature-body[b-efywtp03km] {
    padding: 1rem;
}

.feature-body p[b-efywtp03km] {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
}

.feature-body ul[b-efywtp03km] {
    margin: 0;
    padding-left: 1.5rem;
}

.feature-body li[b-efywtp03km] {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.feature-body li:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

/* Event-Driven Automation */
.event-automation-diagram[b-efywtp03km] {
    text-align: center;
    margin: 1.5rem 0;
}

.event-automation-diagram img[b-efywtp03km] {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.event-types[b-efywtp03km] {
    margin-top: 1.5rem;
}

.event-types h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.event-type-grid[b-efywtp03km] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .event-type-grid[b-efywtp03km] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.event-type[b-efywtp03km] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 0.75rem;
}

.event-type i[b-efywtp03km] {
    color: var(--primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.event-type span[b-efywtp03km] {
    font-size: 0.875rem;
}

.automation-examples[b-efywtp03km] {
    margin-top: 1.5rem;
}

.automation-examples h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.automation-example[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.automation-example:last-child[b-efywtp03km] {
    margin-bottom: 0;
}

.example-name[b-efywtp03km] {
    font-weight: 600;
    margin-bottom: 1rem;
}

.example-steps[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.workflow-step[b-efywtp03km] {
    display: flex;
    align-items: center;
    background-color: rgba(15, 23, 42, 0.4);
    border-radius: 6px;
    padding: 0.75rem;
}

.workflow-step .step-number[b-efywtp03km] {
    width: 1.75rem;
    height: 1.75rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.workflow-step .step-content[b-efywtp03km] {
    flex-grow: 1;
}

.workflow-step .step-content p[b-efywtp03km] {
    margin: 0;
    font-size: 0.875rem;
}

/* Best Practices */
.best-practices[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
}

.best-practice[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.best-practice-header[b-efywtp03km] {
    background-color: rgba(15, 23, 42, 0.6);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.best-practice-icon[b-efywtp03km] {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.3));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary);
    margin-right: 1rem;
    flex-shrink: 0;
}

.best-practice-header h3[b-efywtp03km] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.best-practice-body[b-efywtp03km] {
    padding: 1.5rem;
}

.practice-list[b-efywtp03km] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.practice-item[b-efywtp03km] {
    display: flex;
    align-items: flex-start;
}

.practice-item i[b-efywtp03km] {
    color: #10B981;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.practice-item div h4[b-efywtp03km] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.practice-item div p[b-efywtp03km] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Code Blocks */
.code-block[b-efywtp03km] {
    background-color: #1E293B;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5rem 0;
}

.code-header[b-efywtp03km] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-title[b-efywtp03km] {
    font-size: 0.875rem;
    font-weight: 600;
}

.code-actions[b-efywtp03km] {
    display: flex;
}

.code-action[b-efywtp03km] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

.code-action:hover[b-efywtp03km] {
    color: rgba(255, 255, 255, 0.8);
}

.code-block pre[b-efywtp03km] {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
}

.code-block code[b-efywtp03km] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}
/* _content/WebUI/Components/Pages/Public/Docs/Guides/Security.razor.rz.scp.css */
.security-section[b-x89iapcc0a] {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.security-section:last-child[b-x89iapcc0a] {
    border-bottom: none;
}

.security-section h2[b-x89iapcc0a] {
    color: var(--primary-color, #3498db);
    margin-bottom: 1rem;
    font-weight: 600;
}

.security-section h3[b-x89iapcc0a] {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem;
    color: #333;
}

.security-card[b-x89iapcc0a] {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--primary-color, #3498db);
}

.security-card.warning[b-x89iapcc0a] {
    border-color: #e74c3c;
}

.security-card.info[b-x89iapcc0a] {
    border-color: #2ecc71;
}

.security-list[b-x89iapcc0a] {
    list-style-type: none;
    padding-left: 0;
}

.security-list li[b-x89iapcc0a] {
    padding: 0.5rem 0 0.5rem 2rem;
    position: relative;
}

.security-list li[b-x89iapcc0a]::before {
    content: '✓';
    color: #2ecc71;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0.5rem;
}

.security-table[b-x89iapcc0a] {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

.security-table th[b-x89iapcc0a],
.security-table td[b-x89iapcc0a] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.security-table th[b-x89iapcc0a] {
    background: rgba(52, 152, 219, 0.1);
    font-weight: 600;
    color: #333;
}

.security-table tr:hover[b-x89iapcc0a] {
    background: rgba(52, 152, 219, 0.05);
}

.security-code[b-x89iapcc0a] {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 1.5rem;
    border-radius: 6px;
    margin: 1.5rem 0;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.security-code pre[b-x89iapcc0a] {
    margin: 0;
}

.security-tip[b-x89iapcc0a] {
    background: rgba(52, 152, 219, 0.1);
    border-left: 4px solid #3498db;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0 6px 6px 0;
}

.security-warning[b-x89iapcc0a] {
    background: rgba(231, 76, 60, 0.1);
    border-left: 4px solid #e74c3c;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0 6px 6px 0;
}

.security-grid[b-x89iapcc0a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.grid-item[b-x89iapcc0a] {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.grid-item h4[b-x89iapcc0a] {
    margin-top: 0;
    font-size: 1.1rem;
    color: var(--primary-color, #3498db);
}

.security-icon[b-x89iapcc0a] {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .security-grid[b-x89iapcc0a] {
        grid-template-columns: 1fr;
    }
    
    .security-table[b-x89iapcc0a] {
        font-size: 0.8rem;
    }
    
    .security-table th[b-x89iapcc0a],
    .security-table td[b-x89iapcc0a] {
        padding: 0.5rem;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Home.razor.rz.scp.css */
.doc-card[b-z03spcq99i] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    display: flex;
    text-decoration: none;
    color: white;
}

.doc-card:hover[b-z03spcq99i] {
    background-color: rgba(79, 70, 229, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.doc-card-icon[b-z03spcq99i] {
    font-size: 1.5rem;
    color: var(--primary);
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
}

.doc-card-content h3[b-z03spcq99i] {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.doc-card-content p[b-z03spcq99i] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0;
}
/* _content/WebUI/Components/Pages/Public/Docs/Resources/Glossary.razor.rz.scp.css */
/* Glossary page specific styles */

.glossary-search[b-anu3fc0z6g] {
    margin: 2rem 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--surface);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box[b-anu3fc0z6g] {
    position: relative;
    margin-bottom: 1rem;
}

.search-box i[b-anu3fc0z6g] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-secondary);
    font-size: 1rem;
}

#glossary-search[b-anu3fc0z6g] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    background-color: var(--surface-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.2s;
}

#glossary-search:focus[b-anu3fc0z6g] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.glossary-alpha-nav[b-anu3fc0z6g] {
    margin-top: 1rem;
}

.alpha-links[b-anu3fc0z6g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.alpha-link[b-anu3fc0z6g] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-card);
    border-radius: 0.25rem;
    font-weight: 600;
    transition: all 0.2s;
}

.alpha-link:hover[b-anu3fc0z6g], 
.alpha-link.active[b-anu3fc0z6g] {
    background-color: var(--primary-color);
    color: white;
}

.glossary-section[b-anu3fc0z6g] {
    margin-bottom: 3rem;
    scroll-margin-top: 160px;
}

.glossary-letter[b-anu3fc0z6g] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    position: relative;
}

.glossary-letter[b-anu3fc0z6g]:before {
    content: '';
    position: absolute;
    top: 0;
    left: -1rem;
    width: 4px;
    height: 70%;
    background-color: var(--primary-color);
    border-radius: 4px;
}

.glossary-term[b-anu3fc0z6g] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glossary-term:last-child[b-anu3fc0z6g] {
    border-bottom: none;
}

.glossary-term h3[b-anu3fc0z6g] {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    scroll-margin-top: 160px;
}

.glossary-definition[b-anu3fc0z6g] {
    padding-left: 1.5rem;
    border-left: 3px solid rgba(var(--primary-rgb), 0.3);
}

.glossary-definition p[b-anu3fc0z6g] {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.related-terms[b-anu3fc0z6g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.related-term-label[b-anu3fc0z6g] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color-secondary);
}

.related-term-link[b-anu3fc0z6g] {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s;
}

.related-term-link:hover[b-anu3fc0z6g] {
    background-color: rgba(var(--primary-rgb), 0.2);
}
/* _content/WebUI/Components/Pages/Public/Docs/Resources/SystemGuide.razor.rz.scp.css */
/* System Guide specific styles */

.monitoring-card[b-89s8ln45tn], .security-card[b-89s8ln45tn] {
    background-color: var(--surface-card);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.monitoring-card:hover[b-89s8ln45tn], .security-card:hover[b-89s8ln45tn] {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.monitoring-card-header[b-89s8ln45tn], .security-card-header[b-89s8ln45tn] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.monitoring-card-header i[b-89s8ln45tn], .security-card-header i[b-89s8ln45tn] {
    font-size: 1.5rem;
    margin-right: 0.75rem;
    color: var(--primary-color);
}

.monitoring-card-header h3[b-89s8ln45tn], .security-card-header h3[b-89s8ln45tn] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.tools-used[b-89s8ln45tn] {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tool-badge[b-89s8ln45tn] {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.security-measures[b-89s8ln45tn] {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0.5rem;
}

.security-measures li[b-89s8ln45tn] {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.security-measures li:last-child[b-89s8ln45tn] {
    border-bottom: none;
}

.accordion[b-89s8ln45tn] {
    border-radius: 0.5rem;
    overflow: hidden;
}

.accordion-item[b-89s8ln45tn] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--surface-card);
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.accordion-header[b-89s8ln45tn] {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    background-color: rgba(var(--primary-rgb), 0.05);
}

.accordion-header i[b-89s8ln45tn] {
    color: var(--primary-color);
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

.accordion-header h3[b-89s8ln45tn] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.accordion-content[b-89s8ln45tn] {
    padding: 1.5rem;
}

.accordion-content h4[b-89s8ln45tn] {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.accordion-content p[b-89s8ln45tn], .accordion-content ul[b-89s8ln45tn] {
    margin-bottom: 1rem;
}

.accordion-content ul[b-89s8ln45tn] {
    padding-left: 1.5rem;
}

.note-box[b-89s8ln45tn], .warning-box[b-89s8ln45tn] {
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.note-box[b-89s8ln45tn] {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 4px solid rgb(59, 130, 246);
}

.warning-box[b-89s8ln45tn] {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid rgb(239, 68, 68);
}

.note-box-header[b-89s8ln45tn], .warning-box-header[b-89s8ln45tn] {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.note-box-header[b-89s8ln45tn] {
    background-color: rgba(59, 130, 246, 0.2);
}

.warning-box-header[b-89s8ln45tn] {
    background-color: rgba(239, 68, 68, 0.2);
}

.note-box-header i[b-89s8ln45tn], .warning-box-header i[b-89s8ln45tn] {
    margin-right: 0.5rem;
}

.note-box-content[b-89s8ln45tn], .warning-box-content[b-89s8ln45tn] {
    padding: 1rem 1.5rem;
}
/* _content/WebUI/Components/Pages/Public/Docs/Resources/Tutorials.razor.rz.scp.css */
/* Tutorials page specific styles */

.tutorial-grid[b-8abyfjw5qr] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0 2.5rem;
}

@media (min-width: 768px) {
    .tutorial-grid[b-8abyfjw5qr] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tutorial-card[b-8abyfjw5qr] {
    background-color: var(--surface-card);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tutorial-card:hover[b-8abyfjw5qr] {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.tutorial-card-header[b-8abyfjw5qr] {
    padding: 1.5rem 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.tutorial-card-icon[b-8abyfjw5qr] {
    width: 50px;
    height: 50px;
    background-color: rgba(var(--primary-rgb), 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-card-icon i[b-8abyfjw5qr] {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.tutorial-card-meta[b-8abyfjw5qr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.tutorial-difficulty[b-8abyfjw5qr] {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tutorial-difficulty.beginner[b-8abyfjw5qr] {
    background-color: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
}

.tutorial-difficulty.intermediate[b-8abyfjw5qr] {
    background-color: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
}

.tutorial-difficulty.advanced[b-8abyfjw5qr] {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
}

.tutorial-time[b-8abyfjw5qr] {
    font-size: 0.8rem;
    color: var(--text-color-secondary);
}

.tutorial-card-content[b-8abyfjw5qr] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tutorial-card-content h3[b-8abyfjw5qr] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.tutorial-card-content p[b-8abyfjw5qr] {
    color: var(--text-color-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.tutorial-link[b-8abyfjw5qr] {
    align-self: flex-start;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.tutorial-link:hover[b-8abyfjw5qr] {
    color: var(--primary-color-light);
    text-decoration: underline;
}

.tutorial-link[b-8abyfjw5qr]:after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 0.5rem;
    font-size: 0.75rem;
}

/* Individual tutorial section */
.tutorial-section[b-8abyfjw5qr] {
    background-color: var(--surface-card);
    border-radius: 0.75rem;
    padding: 2rem;
    margin: 3rem 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tutorial-meta[b-8abyfjw5qr] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 1rem 0 2rem;
}

.tutorial-author[b-8abyfjw5qr] {
    font-size: 0.85rem;
    color: var(--text-color-secondary);
}

.tutorial-intro[b-8abyfjw5qr] {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color-secondary);
    margin-bottom: 2rem;
}

.tutorial-section h3[b-8abyfjw5qr] {
    margin: 2rem 0 1rem;
    font-size: 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.tutorial-section ul[b-8abyfjw5qr], .tutorial-section ol[b-8abyfjw5qr] {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.tutorial-section li[b-8abyfjw5qr] {
    margin-bottom: 0.75rem;
}

.tutorial-section li p[b-8abyfjw5qr] {
    margin: 0.5rem 0;
}

.tutorial-image[b-8abyfjw5qr] {
    margin: 1.5rem 0;
    text-align: center;
}

.tutorial-image img[b-8abyfjw5qr] {
    max-width: 100%;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.note-box[b-8abyfjw5qr] {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 4px solid rgb(59, 130, 246);
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.note-box-header[b-8abyfjw5qr] {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    background-color: rgba(59, 130, 246, 0.2);
}

.note-box-header i[b-8abyfjw5qr] {
    margin-right: 0.5rem;
}

.note-box-content[b-8abyfjw5qr] {
    padding: 1rem 1.5rem;
}

.tutorial-feedback[b-8abyfjw5qr] {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-feedback h4[b-8abyfjw5qr] {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.feedback-buttons[b-8abyfjw5qr] {
    display: flex;
    gap: 1rem;
}

.feedback-button[b-8abyfjw5qr] {
    background-color: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.feedback-button i[b-8abyfjw5qr] {
    margin-right: 0.5rem;
}

.feedback-button:hover[b-8abyfjw5qr] {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
}

.tutorial-nav[b-8abyfjw5qr] {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.tutorial-nav-button[b-8abyfjw5qr] {
    background-color: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.tutorial-nav-button i[b-8abyfjw5qr] {
    margin-right: 0.5rem;
}

.tutorial-nav-button:hover[b-8abyfjw5qr] {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
}
/* _content/WebUI/Components/Pages/Public/Docs/Support/Changelog.razor.rz.scp.css */
.docs-container[b-kf03ljbrhk] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.docs-lead[b-kf03ljbrhk] {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 2rem;
}

.changelog-timeline[b-kf03ljbrhk] {
    position: relative;
    margin: 3rem 0;
}

.changelog-timeline[b-kf03ljbrhk]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 180px;
    width: 4px;
    background: var(--primary-color, #3498db);
}

.timeline-item[b-kf03ljbrhk] {
    display: flex;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-date[b-kf03ljbrhk] {
    width: 160px;
    padding-right: 20px;
    text-align: right;
    flex-shrink: 0;
}

.timeline-date .date[b-kf03ljbrhk] {
    display: block;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.timeline-date .version[b-kf03ljbrhk] {
    display: block;
    font-family: monospace;
    color: #666;
}

.timeline-content[b-kf03ljbrhk] {
    flex-grow: 1;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 1.5rem;
    margin-left: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
}

.timeline-content[b-kf03ljbrhk]::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 1.5rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color, #3498db);
    border: 4px solid white;
    box-shadow: 0 0 0 2px var(--primary-color, #3498db);
}

.timeline-content h3[b-kf03ljbrhk] {
    margin-top: 0;
    color: var(--primary-color, #3498db);
}

.feature-list[b-kf03ljbrhk] {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.feature-list li[b-kf03ljbrhk] {
    margin-bottom: 0.75rem;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
}

.badge[b-kf03ljbrhk] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 0.5rem;
    min-width: 70px;
    text-align: center;
}

.badge.new[b-kf03ljbrhk] {
    background-color: #2ecc71;
    color: white;
}

.badge.improved[b-kf03ljbrhk] {
    background-color: #3498db;
    color: white;
}

.badge.fixed[b-kf03ljbrhk] {
    background-color: #e74c3c;
    color: white;
}

@media (max-width: 768px) {
    .changelog-timeline[b-kf03ljbrhk]::before {
        left: 20px;
    }
    
    .timeline-item[b-kf03ljbrhk] {
        flex-direction: column;
    }
    
    .timeline-date[b-kf03ljbrhk] {
        width: 100%;
        text-align: left;
        padding-left: 50px;
        margin-bottom: 1rem;
    }
    
    .timeline-content[b-kf03ljbrhk] {
        margin-left: 50px;
    }
    
    .timeline-content[b-kf03ljbrhk]::before {
        left: -30px;
    }
}
/* _content/WebUI/Components/Pages/Public/Docs/Support/FAQ.razor.rz.scp.css */
/* FAQ page specific styles */

.faq-search[b-kd78425vc0] {
    margin: 2rem 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--surface);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box[b-kd78425vc0] {
    position: relative;
    margin-bottom: 1rem;
}

.search-box i[b-kd78425vc0] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-secondary);
    font-size: 1rem;
}

#faq-search[b-kd78425vc0] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    background-color: var(--surface-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.2s;
}

#faq-search:focus[b-kd78425vc0] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.faq-categories[b-kd78425vc0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.category-button[b-kd78425vc0] {
    padding: 0.5rem 1rem;
    background-color: var(--surface-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.category-button:hover[b-kd78425vc0] {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.category-button.active[b-kd78425vc0] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.faq-section[b-kd78425vc0] {
    margin-bottom: 3rem;
}

.faq-section h2[b-kd78425vc0] {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.faq-item[b-kd78425vc0] {
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--surface-card);
}

.faq-question[b-kd78425vc0] {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.faq-question:hover[b-kd78425vc0] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.faq-question h3[b-kd78425vc0] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.faq-question i[b-kd78425vc0] {
    color: var(--text-color-secondary);
    transition: transform 0.3s;
}

.faq-item.active .faq-question i[b-kd78425vc0] {
    transform: rotate(180deg);
}

.faq-answer[b-kd78425vc0] {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.faq-item.active .faq-answer[b-kd78425vc0] {
    padding: 1.5rem;
    max-height: 2000px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-answer p[b-kd78425vc0] {
    margin-top: 0;
    margin-bottom: 1rem;
}

.faq-answer ul[b-kd78425vc0], 
.faq-answer ol[b-kd78425vc0] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.faq-answer li[b-kd78425vc0] {
    margin-bottom: 0.5rem;
}

.faq-answer .code-block[b-kd78425vc0] {
    margin: 1rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.faq-answer pre[b-kd78425vc0] {
    padding: 1rem;
    background-color: #1a1a1a;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.9rem;
    margin: 0;
}

.note-box[b-kd78425vc0], .warning-box[b-kd78425vc0] {
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.note-box[b-kd78425vc0] {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 4px solid rgb(59, 130, 246);
}

.warning-box[b-kd78425vc0] {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid rgb(239, 68, 68);
}

.note-box-header[b-kd78425vc0], .warning-box-header[b-kd78425vc0] {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.note-box-header[b-kd78425vc0] {
    background-color: rgba(59, 130, 246, 0.2);
}

.warning-box-header[b-kd78425vc0] {
    background-color: rgba(239, 68, 68, 0.2);
}

.note-box-header i[b-kd78425vc0], .warning-box-header i[b-kd78425vc0] {
    margin-right: 0.5rem;
}

.note-box-content[b-kd78425vc0], .warning-box-content[b-kd78425vc0] {
    padding: 1rem 1.5rem;
}
/* _content/WebUI/Components/Pages/Public/Docs/Support/Troubleshooting.razor.rz.scp.css */
/* Troubleshooting page specific styles */

.troubleshooting-search[b-ubtcc5anez] {
    margin: 2rem 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--surface);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box[b-ubtcc5anez] {
    position: relative;
    margin-bottom: 1rem;
}

.search-box i[b-ubtcc5anez] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color-secondary);
    font-size: 1rem;
}

#troubleshooting-search[b-ubtcc5anez] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    background-color: var(--surface-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.2s;
}

#troubleshooting-search:focus[b-ubtcc5anez] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.troubleshooting-categories[b-ubtcc5anez] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.category-button[b-ubtcc5anez] {
    padding: 0.5rem 1rem;
    background-color: var(--surface-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.category-button:hover[b-ubtcc5anez] {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.category-button.active[b-ubtcc5anez] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.troubleshooting-section[b-ubtcc5anez] {
    margin-bottom: 3rem;
}

.troubleshooting-section h2[b-ubtcc5anez] {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.troubleshooting-item[b-ubtcc5anez] {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--surface-card);
}

.issue-header[b-ubtcc5anez] {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.issue-header:hover[b-ubtcc5anez] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.issue-title[b-ubtcc5anez] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.issue-title h3[b-ubtcc5anez] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.severity-badge[b-ubtcc5anez] {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.severity-badge.high[b-ubtcc5anez] {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
}

.severity-badge.medium[b-ubtcc5anez] {
    background-color: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
}

.severity-badge.low[b-ubtcc5anez] {
    background-color: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
}

.issue-toggle i[b-ubtcc5anez] {
    color: var(--text-color-secondary);
    transition: transform 0.3s;
}

.troubleshooting-item.active .issue-toggle i[b-ubtcc5anez] {
    transform: rotate(180deg);
}

.issue-content[b-ubtcc5anez] {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.troubleshooting-item.active .issue-content[b-ubtcc5anez] {
    padding: 0 1.5rem 1.5rem;
    max-height: 5000px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.issue-description[b-ubtcc5anez] {
    margin-bottom: 1.5rem;
}

.issue-description p[b-ubtcc5anez] {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.issue-description h4[b-ubtcc5anez] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
}

.issue-description ul[b-ubtcc5anez] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.issue-description li[b-ubtcc5anez] {
    margin-bottom: 0.5rem;
}

.resolution-steps[b-ubtcc5anez],
.diagnostic-info[b-ubtcc5anez],
.common-errors[b-ubtcc5anez],
.debugging-techniques[b-ubtcc5anez],
.troubleshooting-flow[b-ubtcc5anez],
.optimization-tips[b-ubtcc5anez],
.preventative-measures[b-ubtcc5anez],
.contact-support[b-ubtcc5anez],
.cost-optimization[b-ubtcc5anez] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.resolution-steps h4[b-ubtcc5anez],
.diagnostic-info h4[b-ubtcc5anez],
.common-errors h4[b-ubtcc5anez],
.debugging-techniques h4[b-ubtcc5anez],
.troubleshooting-flow h4[b-ubtcc5anez],
.optimization-tips h4[b-ubtcc5anez],
.preventative-measures h4[b-ubtcc5anez],
.contact-support h4[b-ubtcc5anez],
.cost-optimization h4[b-ubtcc5anez] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.resolution-steps ol[b-ubtcc5anez] {
    padding-left: 1.5rem;
    counter-reset: item;
}

.resolution-steps li[b-ubtcc5anez] {
    margin-bottom: 1rem;
    counter-increment: item;
}

.resolution-steps strong[b-ubtcc5anez] {
    font-weight: 600;
    color: var(--primary-color);
}

.code-block[b-ubtcc5anez] {
    margin: 1rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.code-block pre[b-ubtcc5anez] {
    padding: 1rem;
    background-color: #1a1a1a;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.9rem;
    margin: 0;
}

.error-card[b-ubtcc5anez] {
    background-color: rgba(239, 68, 68, 0.05);
    border-left: 4px solid rgb(239, 68, 68);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.error-header[b-ubtcc5anez] {
    padding: 0.75rem 1rem;
    background-color: rgba(239, 68, 68, 0.1);
}

.error-code[b-ubtcc5anez] {
    font-family: monospace;
    font-weight: 600;
}

.error-description[b-ubtcc5anez] {
    padding: 1rem;
}

.error-description p[b-ubtcc5anez] {
    margin: 0 0 0.5rem;
}

.benchmark-table[b-ubtcc5anez] {
    overflow-x: auto;
}

.benchmark-table table[b-ubtcc5anez] {
    width: 100%;
    border-collapse: collapse;
}

.benchmark-table th[b-ubtcc5anez] {
    background-color: rgba(var(--primary-rgb), 0.1);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
}

.benchmark-table td[b-ubtcc5anez] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.troubleshooting-image[b-ubtcc5anez] {
    max-width: 100%;
    border-radius: 0.5rem;
    margin: 1rem 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.benson-tip[b-ubtcc5anez] {
    background-color: rgba(139, 92, 246, 0.1);
    border-left: 4px solid rgb(139, 92, 246);
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.benson-tip-header[b-ubtcc5anez] {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    background-color: rgba(139, 92, 246, 0.2);
}

.benson-tip-header i[b-ubtcc5anez] {
    margin-right: 0.5rem;
    color: rgb(139, 92, 246);
}

.benson-tip-content[b-ubtcc5anez] {
    padding: 1rem 1.5rem;
}

.benson-tip-content p[b-ubtcc5anez] {
    margin: 0.5rem 0;
}

/* Note and warning boxes */
.note-box[b-ubtcc5anez], .warning-box[b-ubtcc5anez] {
    border-radius: 0.5rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.note-box[b-ubtcc5anez] {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 4px solid rgb(59, 130, 246);
}

.warning-box[b-ubtcc5anez] {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid rgb(239, 68, 68);
}

.note-box-header[b-ubtcc5anez], .warning-box-header[b-ubtcc5anez] {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.note-box-header[b-ubtcc5anez] {
    background-color: rgba(59, 130, 246, 0.2);
}

.warning-box-header[b-ubtcc5anez] {
    background-color: rgba(239, 68, 68, 0.2);
}

.note-box-header i[b-ubtcc5anez], .warning-box-header i[b-ubtcc5anez] {
    margin-right: 0.5rem;
}

.note-box-content[b-ubtcc5anez], .warning-box-content[b-ubtcc5anez] {
    padding: 1rem 1.5rem;
}
/* _content/WebUI/Components/Pages/Public/Financing.razor.rz.scp.css */
.financing-hero[b-vfut5dom5m] {
    padding: 100px 0 60px;
    text-align: center;
}

.financing-hero h1[b-vfut5dom5m] {
    font-size: 48px;
    margin-bottom: 16px;
}

.hero-intro[b-vfut5dom5m] {
    max-width: 800px;
    margin: 0 auto 40px;
}

.hero-intro p[b-vfut5dom5m] {
    font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
}

.financing-section[b-vfut5dom5m],
.solutions-section[b-vfut5dom5m],
.summary-section[b-vfut5dom5m] {
    padding: 80px 0;
}

.section-title[b-vfut5dom5m] {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2[b-vfut5dom5m] {
    font-size: 36px;
    margin-bottom: 16px;
}

.section-title p[b-vfut5dom5m] {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.features-grid[b-vfut5dom5m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-card[b-vfut5dom5m] {
    background-color: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

.feature-card:hover[b-vfut5dom5m] {
    transform: translateY(-5px);
}

.feature-icon[b-vfut5dom5m] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.feature-icon.primary[b-vfut5dom5m] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
}

.feature-icon.secondary[b-vfut5dom5m] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
}

.feature-icon.tertiary[b-vfut5dom5m] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(190, 24, 93, 0.2));
}

.feature-card h3[b-vfut5dom5m] {
    font-size: 22px;
    margin-bottom: 12px;
}

.feature-card p[b-vfut5dom5m] {
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

.solutions-grid[b-vfut5dom5m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.solution-card[b-vfut5dom5m] {
    background-color: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

.solution-card:hover[b-vfut5dom5m] {
    transform: translateY(-5px);
}

.solution-card h3[b-vfut5dom5m] {
    font-size: 22px;
    margin-bottom: 16px;
    color: var(--primary-color-start);
}

.solution-card p[b-vfut5dom5m] {
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

.process-section[b-vfut5dom5m] {
    padding: 80px 0;
    background-color: rgba(15, 23, 42, 0.4);
}

.process-steps[b-vfut5dom5m] {
    max-width: 800px;
    margin: 50px auto 0;
}

.process-step[b-vfut5dom5m] {
    display: flex;
    margin-bottom: 30px;
    align-items: flex-start;
}

.step-number[b-vfut5dom5m] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    margin-right: 20px;
    flex-shrink: 0;
}

.step-content h3[b-vfut5dom5m] {
    margin-top: 0;
    margin-bottom: 8px;
}

.step-content p[b-vfut5dom5m] {
    color: var(--text-muted);
    margin: 0;
}

.benefits-section[b-vfut5dom5m] {
    padding: 80px 0;
}

.benefits-grid[b-vfut5dom5m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.benefit-card[b-vfut5dom5m] {
    background-color: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

.benefit-card:hover[b-vfut5dom5m] {
    transform: translateY(-5px);
}

.benefit-icon[b-vfut5dom5m] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.benefit-card h3[b-vfut5dom5m] {
    margin-bottom: 12px;
}

.benefit-card p[b-vfut5dom5m] {
    color: var(--text-muted);
    margin: 0;
}

.summary-section[b-vfut5dom5m] {
    text-align: center;
}

.summary-section h2[b-vfut5dom5m] {
    font-size: 36px;
    margin-bottom: 20px;
}

.summary-section p[b-vfut5dom5m] {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.6;
}

.cta[b-vfut5dom5m] {
    padding: 80px 0;
    text-align: center;
    background-color: rgba(15, 23, 42, 0.4);
}

.cta-buttons[b-vfut5dom5m] {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

.cta-footer[b-vfut5dom5m] {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 16px;
}

/* Modal Styles */
.modal-overlay[b-vfut5dom5m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.modal-container[b-vfut5dom5m] {
    background-color: var(--bg-card);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-vfut5dom5m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3[b-vfut5dom5m] {
    margin: 0;
    font-size: 24px;
    color: var(--primary-color-start);
}

.modal-close[b-vfut5dom5m] {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s;
}

.modal-close:hover[b-vfut5dom5m] {
    color: var(--primary-color-start);
}

.modal-body[b-vfut5dom5m] {
    padding: 30px;
}

/* Form Styles */
.form-group[b-vfut5dom5m] {
    margin-bottom: 20px;
}

.form-group label[b-vfut5dom5m] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-input[b-vfut5dom5m],
.form-textarea[b-vfut5dom5m],
.form-select[b-vfut5dom5m] {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(15, 23, 42, 0.3);
    color: #fff;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus[b-vfut5dom5m],
.form-textarea:focus[b-vfut5dom5m],
.form-select:focus[b-vfut5dom5m] {
    outline: none;
    border-color: var(--primary-color-start);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-textarea[b-vfut5dom5m] {
    resize: vertical;
    min-height: 120px;
}

.radio-group[b-vfut5dom5m] {
    display: flex;
    gap: 20px;
}

.radio-label[b-vfut5dom5m] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-label input[b-vfut5dom5m] {
    margin-right: 8px;
}

.form-actions[b-vfut5dom5m] {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

@media (max-width: 1200px) {
    .features-grid[b-vfut5dom5m],
    .benefits-grid[b-vfut5dom5m] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .financing-hero h1[b-vfut5dom5m] {
        font-size: 36px;
    }

    .features-grid[b-vfut5dom5m],
    .benefits-grid[b-vfut5dom5m] {
        grid-template-columns: 1fr;
    }

    .process-step[b-vfut5dom5m] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-number[b-vfut5dom5m] {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .cta-buttons[b-vfut5dom5m] {
        flex-direction: column;
        align-items: center;
    }

    .radio-group[b-vfut5dom5m] {
        flex-direction: column;
        gap: 10px;
    }
}

/* Success Modal Styles */
.modal-icon[b-vfut5dom5m] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.modal-icon i[b-vfut5dom5m] {
    font-size: 40px;
    color: white;
}

.modal-container h3[b-vfut5dom5m] {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    text-align: center;
}

.modal-container p[b-vfut5dom5m] {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
    text-align: center;
}

.modal-button[b-vfut5dom5m] {
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    margin: 0 auto;
}

.modal-button:hover[b-vfut5dom5m] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Validation Error Styles */
.form-input.error[b-vfut5dom5m] {
    border-color: #ef4444;
}

.error-message[b-vfut5dom5m] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

.required[b-vfut5dom5m] {
    color: #ef4444;
}
/* _content/WebUI/Components/Pages/Public/HardwareSales.razor.rz.scp.css */
/* Base Variables */
:root[b-q1z28u5nzc] {
    /* Brand Colors */
    --primary-color-start: #6366F1;
    --primary-color-end: #4F46E5;
    --secondary-color: #10B981;
    --tertiary-color: #EC4899;
    --bg-dark: #020617;
    --bg-darker: #0F172A;

    /* Additional Colors */
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --secondary: #10B981;
    --tertiary: #EC4899;
    --dark: #0F172A;
    --darker: #020617;
    --card-bg: rgba(11, 15, 25, 0.8);
    --light: #F8FAFC;
    --warning: #f59e0b;
    --danger: #ef4444;
}

/* Cleanup & Base Styles */
*[b-q1z28u5nzc] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html[b-q1z28u5nzc], body[b-q1z28u5nzc] {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body[b-q1z28u5nzc] {
    background-color: var(--bg-dark);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    position: relative;
}

h1[b-q1z28u5nzc], h2[b-q1z28u5nzc], h3[b-q1z28u5nzc], h4[b-q1z28u5nzc], h5[b-q1z28u5nzc] {
    font-family: 'Space Grotesk', sans-serif;
}

/* Starry Background Components */
.bg-orbs[b-q1z28u5nzc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.orb[b-q1z28u5nzc] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.orb-1[b-q1z28u5nzc] {
    top: 10%;
    right: 10%;
    width: 30vw;
    height: 30vw;
    background-color: var(--primary-color-start);
    opacity: 0.15;
    animation: float-slow-b-q1z28u5nzc 15s ease-in-out infinite alternate;
}

.orb-2[b-q1z28u5nzc] {
    bottom: 20%;
    left: 10%;
    width: 25vw;
    height: 25vw;
    background-color: var(--secondary-color);
    opacity: 0.15;
    animation: float-slow-b-q1z28u5nzc 20s ease-in-out infinite alternate-reverse;
}

.orb-3[b-q1z28u5nzc] {
    top: 50%;
    left: 40%;
    width: 20vw;
    height: 20vw;
    background-color: var(--tertiary-color);
    opacity: 0.1;
    animation: float-slow-b-q1z28u5nzc 17s ease-in-out infinite alternate;
}

/* Float animation for the orbs */
@keyframes float-slow-b-q1z28u5nzc {
    0% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(2%, 2%) rotate(5deg); }
    100% { transform: translate(-2%, 1%) rotate(-5deg); }
}

/* Starfield */
.starfield[b-q1z28u5nzc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}

.stars[b-q1z28u5nzc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
            radial-gradient(2px 2px at 40px 60px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(2px 2px at 20px 150px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(2px 2px at 100px 250px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(2px 2px at 160px 200px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(3px 3px at 200px 300px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(1px 1px at 300px 50px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(1px 1px at 350px 100px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(2px 2px at 400px 200px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(2px 2px at 450px 300px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(1px 1px at 500px 100px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(3px 3px at 550px 200px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
            radial-gradient(2px 2px at 600px 300px, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-repeat: repeat;
    background-size: 650px 350px;
    animation: twinkle-b-q1z28u5nzc 10s ease-in-out infinite, moveStars-b-q1z28u5nzc 90s linear infinite;
    opacity: 0.3;
}

/* Twinkle animation for stars */
@keyframes twinkle-b-q1z28u5nzc {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.4; }
}

/* Star movement animation */
@keyframes moveStars-b-q1z28u5nzc {
    0% { background-position: 0 0; }
    100% { background-position: 650px 350px; }
}

/* Grid Overlay */
.grid-overlay[b-q1z28u5nzc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
}

/* Particle Canvas */
#particle-canvas[b-q1z28u5nzc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    pointer-events: none;
}

/* Site Structure */
.site-wrapper[b-q1z28u5nzc] {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.header[b-q1z28u5nzc] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(11, 15, 25, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
}

.header-container[b-q1z28u5nzc] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo[b-q1z28u5nzc] {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.nav-menu[b-q1z28u5nzc] {
    display: flex;
    gap: 32px;
}

.nav-link[b-q1z28u5nzc] {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.nav-link:hover[b-q1z28u5nzc] {
    color: var(--primary);
}

.nav-link[b-q1z28u5nzc]::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.3s ease;
}

.nav-link:hover[b-q1z28u5nzc]::after {
    width: 100%;
}

.cta-button[b-q1z28u5nzc] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.cta-button:hover[b-q1z28u5nzc] {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
}

/* Hero Section */
.hero-section[b-q1z28u5nzc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 24px;
    min-height: 75vh;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.hero-content[b-q1z28u5nzc] {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-backdrop[b-q1z28u5nzc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, rgba(2, 6, 23, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.hero-title[b-q1z28u5nzc] {
    font-size: 56px;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.1;
}

.hero-subtitle[b-q1z28u5nzc] {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.gradient-text[b-q1z28u5nzc] {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Partner Showcase */
.partner-showcase[b-q1z28u5nzc] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 60px;
    width: 100%;
}

.partner-card[b-q1z28u5nzc] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    width: 220px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.partner-card:hover[b-q1z28u5nzc] {
    transform: translateY(-10px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.partner-logo[b-q1z28u5nzc] {
    width: 120px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    overflow: hidden;
}

.partner-logo img[b-q1z28u5nzc] {
    max-width: 90%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.partner-name[b-q1z28u5nzc] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.partner-type[b-q1z28u5nzc] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
}

.badge[b-q1z28u5nzc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-primary[b-q1z28u5nzc] {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Section Styling */
.section[b-q1z28u5nzc] {
    padding: 100px 24px;
    position: relative;
}

.container[b-q1z28u5nzc] {
    max-width: 1400px;
    margin: 0 auto;
}

.section-title[b-q1z28u5nzc] {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
}

.section-description[b-q1z28u5nzc] {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
    line-height: 1.6;
}

/* Solutions Grid */
.solutions-grid[b-q1z28u5nzc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.solution-card[b-q1z28u5nzc] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.solution-card:hover[b-q1z28u5nzc] {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.solution-image[b-q1z28u5nzc] {
    height: 180px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(16, 185, 129, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.solution-image i[b-q1z28u5nzc] {
    font-size: 64px;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.solution-details[b-q1z28u5nzc] {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.solution-title[b-q1z28u5nzc] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.solution-description[b-q1z28u5nzc] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.spec-list[b-q1z28u5nzc] {
    margin-bottom: 16px;
}

.spec-item[b-q1z28u5nzc] {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.spec-icon[b-q1z28u5nzc] {
    color: var(--primary);
    margin-right: 8px;
    font-size: 12px;
}

.chip-container[b-q1z28u5nzc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.chip[b-q1z28u5nzc] {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

/* Benefits Section */
.benefits-section[b-q1z28u5nzc] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(16, 185, 129, 0.05));
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.benefits-grid[b-q1z28u5nzc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.benefit-card[b-q1z28u5nzc] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.benefit-card:hover[b-q1z28u5nzc] {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.3);
}

.benefit-icon[b-q1z28u5nzc] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.benefit-icon i[b-q1z28u5nzc] {
    font-size: 28px;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.benefit-title[b-q1z28u5nzc] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

.benefit-description[b-q1z28u5nzc] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Hardware Monetization Section */
.monetization-section[b-q1z28u5nzc] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(99, 102, 241, 0.05));
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 80px 0;
}

.monetization-features[b-q1z28u5nzc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.feature-item[b-q1z28u5nzc] {
    text-align: center;
    padding: 30px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.feature-item:hover[b-q1z28u5nzc] {
    transform: translateY(-5px);
    border-color: rgba(16, 185, 129, 0.3);
}

.feature-item i[b-q1z28u5nzc] {
    font-size: 48px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.feature-item h3[b-q1z28u5nzc] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: white;
}

.feature-item p[b-q1z28u5nzc] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.monetization-cta[b-q1z28u5nzc] {
    text-align: center;
    margin-top: 40px;
}

/* Contact Form Section */
.contact-section[b-q1z28u5nzc] {
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, rgba(2, 6, 23, 0) 70%);
}

.contact-form-container[b-q1z28u5nzc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 1100px) {
    .contact-form-container[b-q1z28u5nzc] {
        grid-template-columns: 1fr;
    }
}

.contact-form-card[b-q1z28u5nzc] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-title[b-q1z28u5nzc] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
}

.form-subtitle[b-q1z28u5nzc] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
    line-height: 1.6;
}

.form-group[b-q1z28u5nzc] {
    margin-bottom: 20px;
}

.form-label[b-q1z28u5nzc] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

.form-control[b-q1z28u5nzc] {
    width: 100%;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-control:focus[b-q1z28u5nzc] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

select.form-control[b-q1z28u5nzc] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

textarea.form-control[b-q1z28u5nzc] {
    min-height: 120px;
    resize: vertical;
}

.form-row[b-q1z28u5nzc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.submit-btn[b-q1z28u5nzc] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px 24px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 16px;
}

.submit-btn:hover[b-q1z28u5nzc] {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
}

/* Reasons to Choose Us section */
.why-us-grid[b-q1z28u5nzc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.why-us-item[b-q1z28u5nzc] {
    display: flex;
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.why-us-item:hover[b-q1z28u5nzc] {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.3);
}

.why-us-icon[b-q1z28u5nzc] {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.why-us-icon i[b-q1z28u5nzc] {
    font-size: 24px;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.why-us-content[b-q1z28u5nzc] {
    flex-grow: 1;
}

.why-us-title[b-q1z28u5nzc] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.why-us-description[b-q1z28u5nzc] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Testimonials */
.testimonial-container[b-q1z28u5nzc] {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.testimonial-card[b-q1z28u5nzc] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 400px;
    transition: all 0.3s ease;
}

.testimonial-card:hover[b-q1z28u5nzc] {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.3);
}

.testimonial-content[b-q1z28u5nzc] {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
}

.testimonial-content[b-q1z28u5nzc]::before {
    content: "";
    font-size: 60px;
    position: absolute;
    top: -20px;
    left: -10px;
    color: rgba(99, 102, 241, 0.2);
    font-family: Georgia, serif;
}

.testimonial-author[b-q1z28u5nzc] {
    display: flex;
    align-items: center;
}

.author-avatar[b-q1z28u5nzc] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    color: white;
    font-weight: 600;
    font-size: 20px;
}

.author-details[b-q1z28u5nzc] {
    flex-grow: 1;
}

.author-name[b-q1z28u5nzc] {
    font-weight: 600;
    margin-bottom: 4px;
}

.author-role[b-q1z28u5nzc] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* CTA Section */
.cta-section[b-q1z28u5nzc] {
    padding: 100px 24px;
    text-align: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(16, 185, 129, 0.05));
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cta-container[b-q1z28u5nzc] {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title[b-q1z28u5nzc] {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

.cta-description[b-q1z28u5nzc] {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 40px;
}

.cta-buttons[b-q1z28u5nzc] {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.cta-secondary[b-q1z28u5nzc] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-secondary:hover[b-q1z28u5nzc] {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

/* Footer */
.footer[b-q1z28u5nzc] {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 60px 24px;
    margin-top: auto;
}

.footer-container[b-q1z28u5nzc] {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.footer-column[b-q1z28u5nzc] {
    display: flex;
    flex-direction: column;
}

.footer-logo[b-q1z28u5nzc] {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
}

.footer-description[b-q1z28u5nzc] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 24px;
}

.footer-title[b-q1z28u5nzc] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-links[b-q1z28u5nzc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link[b-q1z28u5nzc] {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.footer-link:hover[b-q1z28u5nzc] {
    color: var(--primary);
}

.social-links[b-q1z28u5nzc] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.social-link[b-q1z28u5nzc] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s ease;
}

.social-link:hover[b-q1z28u5nzc] {
    background: var(--primary);
    transform: translateY(-3px);
}

.footer-bottom[b-q1z28u5nzc] {
    max-width: 1400px;
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright[b-q1z28u5nzc] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-links[b-q1z28u5nzc] {
    display: flex;
    gap: 20px;
}

.footer-bottom-link[b-q1z28u5nzc] {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.footer-bottom-link:hover[b-q1z28u5nzc] {
    color: var(--primary);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .hero-title[b-q1z28u5nzc] {
        font-size: 46px;
    }

    .section[b-q1z28u5nzc] {
        padding: 80px 24px;
    }

    .partner-showcase[b-q1z28u5nzc] {
        gap: 16px;
    }

    .partner-card[b-q1z28u5nzc] {
        width: 200px;
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .hero-title[b-q1z28u5nzc] {
        font-size: 36px;
    }

    .hero-subtitle[b-q1z28u5nzc] {
        font-size: 16px;
    }

    .section-title[b-q1z28u5nzc] {
        font-size: 30px;
    }

    .section-description[b-q1z28u5nzc] {
        font-size: 16px;
    }

    .partner-showcase[b-q1z28u5nzc] {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .partner-card[b-q1z28u5nzc] {
        width: 100%;
        max-width: 300px;
    }

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

    .nav-menu[b-q1z28u5nzc] {
        display: none;
    }

    .footer-container[b-q1z28u5nzc] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-q1z28u5nzc] {
        flex-direction: column;
        gap: 16px;
    }
}
/* _content/WebUI/Components/Pages/Public/HardwareSalesTerms.razor.rz.scp.css */
/* Container and Layout */
.privacy-policy-container[b-cb51iromlv] {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    min-height: 100vh;
}

.privacy-header[b-cb51iromlv] {
    text-align: center;
    margin-bottom: 60px;
}

.privacy-header h1[b-cb51iromlv] {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.last-updated[b-cb51iromlv] {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.privacy-content[b-cb51iromlv] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.terms-breadcrumb[b-cb51iromlv] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    justify-content: center;
}

.terms-breadcrumb a[b-cb51iromlv] {
    color: var(--primary-color-start);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.terms-breadcrumb a:hover[b-cb51iromlv] {
    opacity: 0.8;
}

.terms-breadcrumb .separator[b-cb51iromlv] {
    color: var(--text-muted);
    opacity: 0.5;
}

.terms-breadcrumb .current[b-cb51iromlv] {
    color: var(--text-muted);
    font-weight: 500;
}

/* Table of Contents */
.table-of-contents[b-cb51iromlv] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.table-of-contents h2[b-cb51iromlv] {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 24px;
}

.table-of-contents ol[b-cb51iromlv] {
    list-style: none;
    counter-reset: toc-counter;
    padding: 0;
    margin: 0;
}

.table-of-contents ol li[b-cb51iromlv] {
    counter-increment: toc-counter;
    margin-bottom: 12px;
    position: relative;
    padding-left: 40px;
}

.table-of-contents ol li[b-cb51iromlv]::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: 600;
    font-size: 16px;
}

.table-of-contents a[b-cb51iromlv] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

.table-of-contents a:hover[b-cb51iromlv] {
    color: #fff;
    transform: translateX(4px);
}

/* Terms Section Styling */
.terms-section[b-cb51iromlv] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.terms-section h2[b-cb51iromlv] {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

/* Section Content */
.section-content[b-cb51iromlv] {
    margin-bottom: 40px;
}

.section-content:last-child[b-cb51iromlv] {
    margin-bottom: 0;
}

.section-content h3[b-cb51iromlv] {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.section-content h3[b-cb51iromlv]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    margin-right: 12px;
    border-radius: 2px;
}

.section-content h4[b-cb51iromlv] {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 24px 0 16px;
}

.section-content p[b-cb51iromlv] {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-align: justify;
}

.section-content p:last-child[b-cb51iromlv] {
    margin-bottom: 0;
}

.section-content strong[b-cb51iromlv] {
    color: #fff;
    font-weight: 600;
}

/* List Styling */
.section-content ul[b-cb51iromlv] {
    margin: 16px 0;
    padding-left: 24px;
    list-style: none;
}

.section-content ul li[b-cb51iromlv] {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.8;
    color: var(--text-muted);
    padding-left: 20px;
}

.section-content ul li[b-cb51iromlv]::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: bold;
}

.section-content ul li strong[b-cb51iromlv] {
    color: #fff;
    font-weight: 600;
}

/* Nested Lists */
.section-content ul ul[b-cb51iromlv] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.section-content ul ul li[b-cb51iromlv]::before {
    content: '◦';
    font-size: 12px;
}

/* Interactive Elements */
.section-content h3:hover[b-cb51iromlv] {
    color: var(--primary-color-start);
    transition: color 0.3s ease;
}

/* Highlight Important Text */
.section-content p:has(strong:first-child)[b-cb51iromlv] {
    background-color: rgba(99, 102, 241, 0.05);
    padding: 16px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color-start);
    margin: 20px 0;
}

/* Text Readability */
.section-content p[b-cb51iromlv],
.section-content li[b-cb51iromlv] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Visual Separation */
.terms-section + .terms-section[b-cb51iromlv] {
    margin-top: 40px;
}

/* Smooth Scrolling */
html[b-cb51iromlv] {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .privacy-content[b-cb51iromlv] {
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .privacy-policy-container[b-cb51iromlv] {
        padding: 60px 0;
    }
    
    .privacy-header h1[b-cb51iromlv] {
        font-size: 36px;
    }
    
    .terms-section[b-cb51iromlv] {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .terms-section h2[b-cb51iromlv] {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    .section-content h3[b-cb51iromlv] {
        font-size: 20px;
    }
    
    .section-content p[b-cb51iromlv] {
        font-size: 15px;
        text-align: left;
    }
    
    .terms-breadcrumb[b-cb51iromlv] {
        font-size: 12px;
        gap: 8px;
    }
    
    .table-of-contents[b-cb51iromlv] {
        padding: 24px;
    }
    
    .table-of-contents h2[b-cb51iromlv] {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .table-of-contents ol li[b-cb51iromlv] {
        padding-left: 32px;
        margin-bottom: 8px;
    }
    
    .table-of-contents a[b-cb51iromlv] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .privacy-header h1[b-cb51iromlv] {
        font-size: 28px;
    }
    
    .last-updated[b-cb51iromlv] {
        font-size: 16px;
    }
    
    .terms-section[b-cb51iromlv] {
        padding: 20px;
        border-radius: 12px;
    }
    
    .terms-section h2[b-cb51iromlv] {
        font-size: 24px;
    }
    
    .section-content h3[b-cb51iromlv] {
        font-size: 18px;
    }
    
    .section-content h3[b-cb51iromlv]::before {
        width: 3px;
        height: 20px;
        margin-right: 8px;
    }
    
    .table-of-contents[b-cb51iromlv] {
        padding: 20px;
    }
    
    .table-of-contents h2[b-cb51iromlv] {
        font-size: 18px;
    }
    
    .table-of-contents ol li[b-cb51iromlv] {
        padding-left: 28px;
    }
    
    .table-of-contents ol li[b-cb51iromlv]::before {
        font-size: 14px;
    }
}
/* _content/WebUI/Components/Pages/Public/Legal.razor.rz.scp.css */
.terms-navigation[b-be21drrppg] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.terms-navigation h2[b-be21drrppg] {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 16px;
}

.terms-navigation > p[b-be21drrppg] {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.terms-cards[b-be21drrppg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.terms-card[b-be21drrppg] {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.terms-card[b-be21drrppg]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(99, 102, 241, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.terms-card:hover[b-be21drrppg] {
    transform: translateY(-4px);
    border-color: var(--primary-color-start);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
}

.terms-card:hover[b-be21drrppg]::before {
    opacity: 1;
}

.card-icon[b-be21drrppg] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon i[b-be21drrppg] {
    font-size: 28px;
    color: white;
}

.terms-card h3[b-be21drrppg] {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.terms-card p[b-be21drrppg] {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.card-arrow[b-be21drrppg] {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    background-color: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.card-arrow i[b-be21drrppg] {
    font-size: 14px;
    color: var(--primary-color-start);
    transition: transform 0.3s ease;
}

.terms-card:hover .card-arrow[b-be21drrppg] {
    background-color: var(--primary-color-start);
}

.terms-card:hover .card-arrow i[b-be21drrppg] {
    color: white;
    transform: translateX(4px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .terms-navigation[b-be21drrppg] {
        padding: 24px;
    }
    
    .terms-navigation h2[b-be21drrppg] {
        font-size: 28px;
    }
    
    .terms-cards[b-be21drrppg] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .terms-card[b-be21drrppg] {
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .terms-navigation h2[b-be21drrppg] {
        font-size: 24px;
    }
    
    .terms-navigation > p[b-be21drrppg] {
        font-size: 16px;
    }
    
    .card-icon[b-be21drrppg] {
        width: 48px;
        height: 48px;
    }
    
    .card-icon i[b-be21drrppg] {
        font-size: 24px;
    }
    
    .terms-card h3[b-be21drrppg] {
        font-size: 20px;
    }
    
    .terms-card p[b-be21drrppg] {
        font-size: 14px;
    }
}
/* _content/WebUI/Components/Pages/Public/MarketplaceParticipationAgreement.razor.rz.scp.css */
/* Container and Layout */
.privacy-policy-container[b-csah7yqhcy] {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    min-height: 100vh;
}

.privacy-header[b-csah7yqhcy] {
    text-align: center;
    margin-bottom: 60px;
}

.privacy-header h1[b-csah7yqhcy] {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.last-updated[b-csah7yqhcy] {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.privacy-content[b-csah7yqhcy] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Breadcrumb Navigation */
.terms-breadcrumb[b-csah7yqhcy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    justify-content: center;
}

.terms-breadcrumb a[b-csah7yqhcy] {
    color: var(--primary-color-start);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.terms-breadcrumb a:hover[b-csah7yqhcy] {
    opacity: 0.8;
}

.terms-breadcrumb .separator[b-csah7yqhcy] {
    color: var(--text-muted);
    opacity: 0.5;
}

.terms-breadcrumb .current[b-csah7yqhcy] {
    color: var(--text-muted);
    font-weight: 500;
}

/* Table of Contents */
.table-of-contents[b-csah7yqhcy] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.table-of-contents h2[b-csah7yqhcy] {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 24px;
}

.table-of-contents ol[b-csah7yqhcy] {
    list-style: none;
    counter-reset: toc-counter;
    padding: 0;
    margin: 0;
}

.table-of-contents ol li[b-csah7yqhcy] {
    counter-increment: toc-counter;
    margin-bottom: 12px;
    position: relative;
    padding-left: 40px;
}

.table-of-contents ol li[b-csah7yqhcy]::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: 600;
    font-size: 16px;
}

.table-of-contents a[b-csah7yqhcy] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

.table-of-contents a:hover[b-csah7yqhcy] {
    color: #fff;
    transform: translateX(4px);
}

/* Terms Section Styling */
.terms-section[b-csah7yqhcy] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.terms-section h2[b-csah7yqhcy] {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

/* Section Content */
.section-content[b-csah7yqhcy] {
    margin-bottom: 40px;
}

.section-content:last-child[b-csah7yqhcy] {
    margin-bottom: 0;
}

.section-content h3[b-csah7yqhcy] {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.section-content h3[b-csah7yqhcy]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    margin-right: 12px;
    border-radius: 2px;
}

.section-content h4[b-csah7yqhcy] {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 24px 0 16px;
}

.section-content p[b-csah7yqhcy] {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-align: justify;
}

.section-content p:last-child[b-csah7yqhcy] {
    margin-bottom: 0;
}

.section-content strong[b-csah7yqhcy] {
    color: #fff;
    font-weight: 600;
}

/* List Styling */
.section-content ul[b-csah7yqhcy] {
    margin: 16px 0;
    padding-left: 24px;
    list-style: none;
}

.section-content ul li[b-csah7yqhcy] {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.8;
    color: var(--text-muted);
    padding-left: 20px;
}

.section-content ul li[b-csah7yqhcy]::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: bold;
}

.section-content ul li strong[b-csah7yqhcy] {
    color: #fff;
    font-weight: 600;
}

/* Nested Lists */
.section-content ul ul[b-csah7yqhcy] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.section-content ul ul li[b-csah7yqhcy]::before {
    content: '◦';
    font-size: 12px;
}

/* Interactive Elements */
.section-content h3:hover[b-csah7yqhcy] {
    color: var(--primary-color-start);
    transition: color 0.3s ease;
}

/* Highlight Important Text */
.section-content p:has(strong:first-child)[b-csah7yqhcy] {
    background-color: rgba(99, 102, 241, 0.05);
    padding: 16px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color-start);
    margin: 20px 0;
}

/* Text Readability */
.section-content p[b-csah7yqhcy],
.section-content li[b-csah7yqhcy] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Visual Separation */
.terms-section + .terms-section[b-csah7yqhcy] {
    margin-top: 40px;
}

/* Smooth Scrolling */
html[b-csah7yqhcy] {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .privacy-content[b-csah7yqhcy] {
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .privacy-policy-container[b-csah7yqhcy] {
        padding: 60px 0;
    }
    
    .privacy-header h1[b-csah7yqhcy] {
        font-size: 36px;
    }
    
    .terms-section[b-csah7yqhcy] {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .terms-section h2[b-csah7yqhcy] {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    .section-content h3[b-csah7yqhcy] {
        font-size: 20px;
    }
    
    .section-content p[b-csah7yqhcy] {
        font-size: 15px;
        text-align: left;
    }
    
    .terms-breadcrumb[b-csah7yqhcy] {
        font-size: 12px;
        gap: 8px;
    }
    
    .table-of-contents[b-csah7yqhcy] {
        padding: 24px;
    }
    
    .table-of-contents h2[b-csah7yqhcy] {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .table-of-contents ol li[b-csah7yqhcy] {
        padding-left: 32px;
        margin-bottom: 8px;
    }
    
    .table-of-contents a[b-csah7yqhcy] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .privacy-header h1[b-csah7yqhcy] {
        font-size: 28px;
    }
    
    .last-updated[b-csah7yqhcy] {
        font-size: 16px;
    }
    
    .terms-section[b-csah7yqhcy] {
        padding: 20px;
        border-radius: 12px;
    }
    
    .terms-section h2[b-csah7yqhcy] {
        font-size: 24px;
    }
    
    .section-content h3[b-csah7yqhcy] {
        font-size: 18px;
    }
    
    .section-content h3[b-csah7yqhcy]::before {
        width: 3px;
        height: 20px;
        margin-right: 8px;
    }
    
    .table-of-contents[b-csah7yqhcy] {
        padding: 20px;
    }
    
    .table-of-contents h2[b-csah7yqhcy] {
        font-size: 18px;
    }
    
    .table-of-contents ol li[b-csah7yqhcy] {
        padding-left: 28px;
    }
    
    .table-of-contents ol li[b-csah7yqhcy]::before {
        font-size: 14px;
    }
}
/* _content/WebUI/Components/Pages/Public/PrivacyPolicy.razor.rz.scp.css */
/* Container and Layout */
.privacy-policy-container[b-vdjsy49ojb] {
    padding: 80px 0;
    background-color: var(--bg-secondary);
    min-height: 100vh;
}

.privacy-header[b-vdjsy49ojb] {
    text-align: center;
    margin-bottom: 60px;
}

/* Breadcrumb Navigation */
.terms-breadcrumb[b-vdjsy49ojb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    justify-content: center;
}

.terms-breadcrumb a[b-vdjsy49ojb] {
    color: var(--primary-color-start);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.terms-breadcrumb a:hover[b-vdjsy49ojb] {
    opacity: 0.8;
}

.terms-breadcrumb .separator[b-vdjsy49ojb] {
    color: var(--text-muted);
    opacity: 0.5;
}

.terms-breadcrumb .current[b-vdjsy49ojb] {
    color: var(--text-muted);
    font-weight: 500;
}

/* Table of Contents */
.table-of-contents[b-vdjsy49ojb] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.table-of-contents h2[b-vdjsy49ojb] {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 24px;
}

.table-of-contents ol[b-vdjsy49ojb] {
    list-style: none;
    counter-reset: toc-counter;
    padding: 0;
    margin: 0;
}

.table-of-contents ol li[b-vdjsy49ojb] {
    counter-increment: toc-counter;
    margin-bottom: 12px;
    position: relative;
    padding-left: 40px;
}

.table-of-contents ol li[b-vdjsy49ojb]::before {
    content: counter(toc-counter) ".";
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: 600;
    font-size: 16px;
}

.table-of-contents a[b-vdjsy49ojb] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

.table-of-contents a:hover[b-vdjsy49ojb] {
    color: #fff;
    transform: translateX(4px);
}

.privacy-header h1[b-vdjsy49ojb] {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.last-updated[b-vdjsy49ojb] {
    font-size: 18px;
    color: var(--text-muted);
    font-weight: 500;
}

.privacy-content[b-vdjsy49ojb] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Terms Section Styling */
.terms-section[b-vdjsy49ojb] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.terms-section h2[b-vdjsy49ojb] {
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

/* Section Content */
.section-content[b-vdjsy49ojb] {
    margin-bottom: 40px;
}

.section-content:last-child[b-vdjsy49ojb] {
    margin-bottom: 0;
}

.section-content h3[b-vdjsy49ojb] {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.section-content h3[b-vdjsy49ojb]::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    margin-right: 12px;
    border-radius: 2px;
}

.section-content h4[b-vdjsy49ojb] {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 24px 0 16px;
}

.section-content p[b-vdjsy49ojb] {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-align: justify;
}

.section-content p:last-child[b-vdjsy49ojb] {
    margin-bottom: 0;
}

.section-content strong[b-vdjsy49ojb] {
    color: #fff;
    font-weight: 600;
}

/* List Styling */
.section-content ul[b-vdjsy49ojb] {
    margin: 16px 0;
    padding-left: 24px;
    list-style: none;
}

.section-content ul li[b-vdjsy49ojb] {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.8;
    color: var(--text-muted);
    padding-left: 20px;
}

.section-content ul li[b-vdjsy49ojb]::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color-start);
    font-weight: bold;
}

.section-content ul li strong[b-vdjsy49ojb] {
    color: #fff;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .privacy-content[b-vdjsy49ojb] {
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .terms-breadcrumb[b-vdjsy49ojb] {
        font-size: 12px;
        gap: 8px;
    }
    
    .table-of-contents[b-vdjsy49ojb] {
        padding: 24px;
    }
    
    .table-of-contents h2[b-vdjsy49ojb] {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .table-of-contents ol li[b-vdjsy49ojb] {
        padding-left: 32px;
        margin-bottom: 8px;
    }
    
    .table-of-contents a[b-vdjsy49ojb] {
        font-size: 14px;
    }
    
    .privacy-policy-container[b-vdjsy49ojb] {
        padding: 60px 0;
    }
    
    .privacy-header h1[b-vdjsy49ojb] {
        font-size: 36px;
    }
    
    .terms-section[b-vdjsy49ojb] {
        padding: 24px;
        margin-bottom: 24px;
    }
    
    .terms-section h2[b-vdjsy49ojb] {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    .section-content h3[b-vdjsy49ojb] {
        font-size: 20px;
    }
    
    .section-content p[b-vdjsy49ojb] {
        font-size: 15px;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .privacy-header h1[b-vdjsy49ojb] {
        font-size: 28px;
    }
    
    .last-updated[b-vdjsy49ojb] {
        font-size: 16px;
    }
    
    .terms-section[b-vdjsy49ojb] {
        padding: 20px;
        border-radius: 12px;
    }
    
    .terms-section h2[b-vdjsy49ojb] {
        font-size: 24px;
    }
    
    .section-content h3[b-vdjsy49ojb] {
        font-size: 18px;
    }
    
    .section-content h3[b-vdjsy49ojb]::before {
        width: 3px;
        height: 20px;
        margin-right: 8px;
    }
    
    .table-of-contents[b-vdjsy49ojb] {
        padding: 20px;
    }
    
    .table-of-contents h2[b-vdjsy49ojb] {
        font-size: 18px;
    }
    
    .table-of-contents ol li[b-vdjsy49ojb] {
        padding-left: 28px;
    }
    
    .table-of-contents ol li[b-vdjsy49ojb]::before {
        font-size: 14px;
    }
}

/* Improve readability for long text */
/* Text Readability */
.section-content p[b-vdjsy49ojb],
.section-content li[b-vdjsy49ojb] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Add hover effect to section headings */
/* Interactive Elements */
.section-content h3:hover[b-vdjsy49ojb] {
    color: var(--primary-color-start);
    transition: color 0.3s ease;
}

/* Style for nested lists if needed */
/* Nested Lists */
.section-content ul ul[b-vdjsy49ojb] {
    margin-top: 8px;
    margin-bottom: 8px;
}

.section-content ul ul li[b-vdjsy49ojb]::before {
    content: '◦';
    font-size: 12px;
}

/* Smooth scrolling for the entire page */
/* Smooth Scrolling */
html[b-vdjsy49ojb] {
    scroll-behavior: smooth;
}

/* Add some visual separation between major sections */
/* Visual Separation */
.terms-section + .terms-section[b-vdjsy49ojb] {
    margin-top: 40px;
}

/* Highlight important legal text */
/* Highlight Important Text */
.section-content p:has(strong:first-child)[b-vdjsy49ojb] {
    background-color: rgba(99, 102, 241, 0.05);
    padding: 16px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color-start);
    margin: 20px 0;
}
/* _content/WebUI/Components/Pages/Public/Protection.razor.rz.scp.css */
/* Protection Page Styles */
.protection-page[b-xcz5sv5ir2] {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

/* Hero Section */
.hero-section[b-xcz5sv5ir2] {
    text-align: center;
    margin-bottom: 80px;
}

.hero-section h1[b-xcz5sv5ir2] {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--text-light);
    line-height: 1.2;
}

.hero-subtitle[b-xcz5sv5ir2] {
    font-size: 24px;
    color: var(--text-light);
    margin-bottom: 24px;
    font-weight: 500;
}

.hero-description[b-xcz5sv5ir2] {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Content Sections */
.content-section[b-xcz5sv5ir2] {
    margin-bottom: 80px;
}

.content-section h2[b-xcz5sv5ir2] {
    font-size: 36px;
    margin-bottom: 40px;
    text-align: center;
    color: var(--text-light);
}

/* Features Grid */
.features-grid[b-xcz5sv5ir2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature-card[b-xcz5sv5ir2] {
    background-color: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card:hover[b-xcz5sv5ir2] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(99, 102, 241, 0.2);
}

.feature-icon[b-xcz5sv5ir2] {
    font-size: 36px;
    margin-bottom: 20px;
}

.feature-card h3[b-xcz5sv5ir2] {
    font-size: 22px;
    margin-bottom: 16px;
    color: var(--text-light);
}

.feature-card p[b-xcz5sv5ir2] {
    color: var(--text-muted);
    line-height: 1.6;
    flex-grow: 1;
}

/* Section Divider */
.section-divider[b-xcz5sv5ir2] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.divider-line[b-xcz5sv5ir2] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    flex-grow: 1;
    max-width: 200px;
}

.divider-icon[b-xcz5sv5ir2] {
    margin: 0 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}

/* Alternating Layout */
.alternating-layout[b-xcz5sv5ir2] {
    display: flex;
    gap: 60px;
    align-items: center;
}

.alternating-image[b-xcz5sv5ir2] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-placeholder[b-xcz5sv5ir2] {
    width: 300px;
    height: 300px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.9));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.image-placeholder i[b-xcz5sv5ir2] {
    font-size: 80px;
    color: var(--primary-color-start);
    position: relative;
    z-index: 2;
}

.glow-effect[b-xcz5sv5ir2] {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 70%);
    border-radius: 50%;
    animation: pulse-b-xcz5sv5ir2 3s ease-in-out infinite;
}

@keyframes pulse-b-xcz5sv5ir2 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

.alternating-content[b-xcz5sv5ir2] {
    flex: 1.5;
}

.warranty-feature[b-xcz5sv5ir2] {
    display: flex;
    margin-bottom: 30px;
    align-items: flex-start;
}

.warranty-icon[b-xcz5sv5ir2] {
    font-size: 30px;
    margin-right: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.9));
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.warranty-text h3[b-xcz5sv5ir2] {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--text-light);
}

.warranty-text p[b-xcz5sv5ir2] {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Advantage Section */
.advantage-section[b-xcz5sv5ir2] {
    text-align: center;
}

.advantage-intro[b-xcz5sv5ir2] {
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.advantage-cards[b-xcz5sv5ir2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.advantage-card[b-xcz5sv5ir2] {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.8));
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(99, 102, 241, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.advantage-card:hover[b-xcz5sv5ir2] {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
}

.advantage-icon[b-xcz5sv5ir2] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: white;
    font-size: 28px;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
}

.advantage-card h3[b-xcz5sv5ir2] {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--text-light);
}

.advantage-card p[b-xcz5sv5ir2] {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Full Width Banner */
.full-width-banner[b-xcz5sv5ir2] {
    padding: 80px 0;
    position: relative;
    background: linear-gradient(to right, rgba(99, 102, 241, 0.05), rgba(16, 185, 129, 0.05));
    margin: 80px 0;
    overflow: hidden;
}

.banner-background[b-xcz5sv5ir2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-orb[b-xcz5sv5ir2] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.banner-orb-1[b-xcz5sv5ir2] {
    top: -10%;
    right: -5%;
    width: 40vw;
    height: 40vw;
    background-color: rgba(99, 102, 241, 0.1);
    animation: float-slow 15s ease-in-out infinite alternate;
}

.banner-orb-2[b-xcz5sv5ir2] {
    bottom: -20%;
    left: -5%;
    width: 30vw;
    height: 30vw;
    background-color: rgba(16, 185, 129, 0.1);
    animation: float-slow 20s ease-in-out infinite alternate-reverse;
}

.full-width-banner h2[b-xcz5sv5ir2] {
    font-size: 36px;
    margin-bottom: 40px;
    text-align: center;
    color: var(--text-light);
}

/* Protection Reasons in Full-width Banner */
.protection-reasons[b-xcz5sv5ir2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 1;
}

.reason-card[b-xcz5sv5ir2] {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
    text-align: center;
}

.reason-card:hover[b-xcz5sv5ir2] {
    transform: translateY(-5px);
}

.reason-icon[b-xcz5sv5ir2] {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.reason-card h3[b-xcz5sv5ir2] {
    font-size: 22px;
    margin-bottom: 16px;
    color: var(--text-light);
}

.reason-card p[b-xcz5sv5ir2] {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Peace of Mind Section with Animated Background */
.peace-section[b-xcz5sv5ir2] {
    position: relative;
    padding: 60px 40px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.6));
    backdrop-filter: blur(10px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.floating-shapes[b-xcz5sv5ir2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.shape[b-xcz5sv5ir2] {
    position: absolute;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    filter: blur(30px);
    opacity: 0.15;
}

.shape-1[b-xcz5sv5ir2] {
    top: -10%;
    right: -10%;
    width: 300px;
    height: 300px;
    background-color: var(--primary-color-start);
    animation: float-shape-b-xcz5sv5ir2 20s ease-in-out infinite alternate;
}

.shape-2[b-xcz5sv5ir2] {
    bottom: -15%;
    left: -5%;
    width: 250px;
    height: 250px;
    background-color: var(--secondary-color);
    animation: float-shape-b-xcz5sv5ir2 25s ease-in-out infinite alternate-reverse;
}

.shape-3[b-xcz5sv5ir2] {
    top: 40%;
    left: 20%;
    width: 150px;
    height: 150px;
    background-color: var(--tertiary-color);
    animation: float-shape-b-xcz5sv5ir2 18s ease-in-out infinite alternate;
}

.shape-4[b-xcz5sv5ir2] {
    bottom: 30%;
    right: 15%;
    width: 180px;
    height: 180px;
    background-color: var(--primary-color-end);
    animation: float-shape-b-xcz5sv5ir2 22s ease-in-out infinite alternate-reverse;
}

@keyframes float-shape-b-xcz5sv5ir2 {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg) scale(1.1);
    }
    100% {
        transform: translateY(20px) rotate(-15deg) scale(0.9);
    }
}

.peace-section h2[b-xcz5sv5ir2] {
    margin-bottom: 30px;
}

.closing-text[b-xcz5sv5ir2] {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 18px;
}

.cta-container[b-xcz5sv5ir2] {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.cta-button[b-xcz5sv5ir2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    background: linear-gradient(to right, var(--primary-color-start), var(--primary-color-end));
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.cta-button[b-xcz5sv5ir2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

.cta-button:hover[b-xcz5sv5ir2] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.5);
}

.cta-button:hover[b-xcz5sv5ir2]::before {
    left: 100%;
}

.cta-button i[b-xcz5sv5ir2] {
    margin-left: 10px;
    transition: transform 0.3s;
}

.cta-button:hover i[b-xcz5sv5ir2] {
    transform: translateX(5px);
}

.cta-secondary[b-xcz5sv5ir2] {
    background: transparent;
    border: 1px solid var(--primary-color-start);
    color: var(--primary-color-start);
    box-shadow: none;
}

.cta-secondary:hover[b-xcz5sv5ir2] {
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
}

.testimonial-box[b-xcz5sv5ir2] {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 16px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.quote-mark[b-xcz5sv5ir2] {
    position: absolute;
    top: -15px;
    left: 30px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
}

.testimonial-text[b-xcz5sv5ir2] {
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    font-style: italic;
}

/* Media Queries */
@media (max-width: 992px) {
    .alternating-layout[b-xcz5sv5ir2] {
        flex-direction: column;
        gap: 40px;
    }

    .alternating-image[b-xcz5sv5ir2] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .hero-section h1[b-xcz5sv5ir2] {
        font-size: 36px;
    }

    .hero-subtitle[b-xcz5sv5ir2] {
        font-size: 20px;
    }

    .content-section h2[b-xcz5sv5ir2] {
        font-size: 28px;
    }

    .cta-container[b-xcz5sv5ir2] {
        flex-direction: column;
        align-items: center;
    }

    .cta-button[b-xcz5sv5ir2] {
        width: 100%;
    }

    .image-placeholder[b-xcz5sv5ir2] {
        width: 220px;
        height: 220px;
    }

    .image-placeholder i[b-xcz5sv5ir2] {
        font-size: 60px;
    }
}

@media (max-width: 576px) {
    .features-grid[b-xcz5sv5ir2] {
        grid-template-columns: 1fr;
    }

    .protection-reasons[b-xcz5sv5ir2] {
        grid-template-columns: 1fr;
    }

    .advantage-cards[b-xcz5sv5ir2] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/Pages/Public/Solutions.razor.rz.scp.css */
/* Infrastructure and Managed Services page styles */
.infrastructure-hero[b-unhe011xnl] {
    padding: 100px 0 60px;
    text-align: center;
}

.infrastructure-hero h1[b-unhe011xnl] {
    font-size: 48px;
    margin-bottom: 16px;
}


.hero-intro[b-unhe011xnl] {
    max-width: 800px;
    margin: 0 auto 40px;
}

.hero-intro p[b-unhe011xnl] {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.hero-buttons[b-unhe011xnl] {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.features-section[b-unhe011xnl],
.solutions-section[b-unhe011xnl],
.summary-section[b-unhe011xnl] {
    padding: 80px 0;
}

.section-title[b-unhe011xnl] {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2[b-unhe011xnl] {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--light);
}

.section-title p[b-unhe011xnl] {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin: 0 auto;
}

.features-grid[b-unhe011xnl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.features-grid.four-columns[b-unhe011xnl] {
    grid-template-columns: repeat(4, 1fr);
}

.feature-card[b-unhe011xnl] {
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card:hover[b-unhe011xnl] {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

.feature-icon[b-unhe011xnl] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.1));
}

.feature-icon.primary[b-unhe011xnl] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.2));
    color: var(--primary);
}

.feature-icon.secondary[b-unhe011xnl] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    color: var(--secondary);
}

.feature-icon.tertiary[b-unhe011xnl] {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(190, 24, 93, 0.2));
    color: var(--tertiary);
}

.feature-icon.quaternary[b-unhe011xnl] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
    color: #f59e0b;
}

.feature-card h3[b-unhe011xnl] {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--light);
}

.feature-card p[b-unhe011xnl] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
}

.solutions-grid[b-unhe011xnl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media (max-width: 1200px) {
    .solutions-grid[b-unhe011xnl],
    .features-grid[b-unhe011xnl],
    .features-grid.four-columns[b-unhe011xnl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .solutions-grid[b-unhe011xnl],
    .features-grid[b-unhe011xnl],
    .features-grid.four-columns[b-unhe011xnl] {
        grid-template-columns: 1fr;
    }
}

.solution-card[b-unhe011xnl] {
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

.solution-card:hover[b-unhe011xnl] {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.2);
}

.solution-card h3[b-unhe011xnl] {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
}

.solution-card p[b-unhe011xnl] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.6;
    font-size: 15px;
}

.process-section[b-unhe011xnl] {
    padding: 80px 0;
    background-color: rgba(15, 23, 42, 0.4);
}

.process-steps[b-unhe011xnl] {
    max-width: 800px;
    margin: 50px auto 0;
    position: relative;
}

.process-steps[b-unhe011xnl]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 2px;
    background: linear-gradient(to bottom,
    var(--primary-color-start),
    var(--secondary),
    var(--tertiary),
    var(--primary-color-end));
    height: calc(100% - 60px);
    margin-top: 30px;
}

.process-step[b-unhe011xnl] {
    display: flex;
    margin-bottom: 30px;
    position: relative;
    align-items: flex-start;
}

.step-number[b-unhe011xnl] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 24px;
    margin-right: 20px;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.process-step:nth-child(1) .step-number[b-unhe011xnl] {
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary));
}

.process-step:nth-child(2) .step-number[b-unhe011xnl] {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.process-step:nth-child(3) .step-number[b-unhe011xnl] {
    background: linear-gradient(135deg, var(--secondary), var(--tertiary));
}

.process-step:nth-child(4) .step-number[b-unhe011xnl] {
    background: linear-gradient(135deg, var(--tertiary), var(--primary-color-end));
}


.step-content[b-unhe011xnl] {
    padding-left: 20px;
}

.step-content h3[b-unhe011xnl] {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    background: linear-gradient(to right, white, rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.step-content p[b-unhe011xnl] {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.benefits-section[b-unhe011xnl] {
    padding: 80px 0;
}

.benefits-grid[b-unhe011xnl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.benefit-card[b-unhe011xnl] {
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.benefit-card:hover[b-unhe011xnl] {
    transform: translateY(-5px);
    border-color: rgba(99, 102, 241, 0.2);
}

.benefit-icon[b-unhe011xnl] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--primary);
}

.benefit-card h3[b-unhe011xnl] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.benefit-card p[b-unhe011xnl] {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.summary-section[b-unhe011xnl] {
    text-align: center;
}

.summary-section h2[b-unhe011xnl] {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

.summary-section p[b-unhe011xnl] {
    max-width: 800px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1.6;
}

.cta[b-unhe011xnl] {
    padding: 80px 0;
    text-align: center;
    background-color: rgba(15, 23, 42, 0.4);
}

.cta-buttons[b-unhe011xnl] {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

.cta-footer[b-unhe011xnl] {
    font-size: 18px;
    font-weight: 500;
    color: var(--light);
}

/* Button styles */
.btn[b-unhe011xnl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    letter-spacing: 0.5px;
}

.btn i[b-unhe011xnl] {
    margin-right: 10px;
}

.btn-outline[b-unhe011xnl] {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-outline:hover[b-unhe011xnl] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.15);
    color: white;
}

.container[b-unhe011xnl] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .infrastructure-hero h1[b-unhe011xnl] {
        font-size: 36px;
    }

    .hero-buttons[b-unhe011xnl] {
        flex-direction: column;
        align-items: center;
    }

    .process-step[b-unhe011xnl] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .step-number[b-unhe011xnl] {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .process-steps[b-unhe011xnl]::before {
        display: none;
    }

    .step-content[b-unhe011xnl] {
        padding-left: 0;
    }

    .step-content h3[b-unhe011xnl] {
        background: linear-gradient(135deg, white, rgba(255, 255, 255, 0.8));
        -webkit-background-clip: text;
        background-clip: text;
    }

    .cta-buttons[b-unhe011xnl] {
        flex-direction: column;
        align-items: center;
    }
}
/* _content/WebUI/Components/Pages/Shared/BetaBanner.razor.rz.scp.css */
/* Beta project banner for documentation home */
.beta-project-banner[b-dodypgtlpf] {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(236, 72, 153, 0.15));
    border: 1px solid rgba(251, 146, 60, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.beta-project-banner[b-dodypgtlpf]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(251, 146, 60, 0.1) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(251, 146, 60, 0.1) 50%, 
        rgba(251, 146, 60, 0.1) 75%, 
        transparent 75%, 
        transparent);
    background-size: 10px 10px;
    opacity: 0.2;
    z-index: 0;
}

.beta-project-content[b-dodypgtlpf] {
    position: relative;
    z-index: 1;
}

.beta-badge[b-dodypgtlpf] {
    display: inline-block;
    background-color: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #FB923C;
    border-radius: 100px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    position: relative;
    top: -2px;
}
/* _content/WebUI/Components/Pages/Shared/BetaTitle.razor.rz.scp.css */
h1[b-e1vmbwa2zz] {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.beta-badge[b-e1vmbwa2zz] {
    display: inline-block;
    background-color: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.3);
    color: #FB923C;
    border-radius: 100px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    position: relative;
    top: -2px;
}
/* _content/WebUI/Components/Pages/Shared/FeedbackForm.razor.rz.scp.css */
.doc-feedback[b-lg0de0ligj] {
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 40px;
}

.feedback-buttons[b-lg0de0ligj] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.feedback-button[b-lg0de0ligj] {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.feedback-button:hover[b-lg0de0ligj] {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.feedback-button i[b-lg0de0ligj] {
    margin-right: 0.5rem;
}

.feedback-textarea[b-lg0de0ligj] {
    width: 100%;
    min-height: 120px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.75rem;
    color: white;
    font-size: 0.875rem;
    resize: vertical;
}

.feedback-textarea:focus[b-lg0de0ligj] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.feedback-submit-button[b-lg0de0ligj] {
    background: linear-gradient(to right, var(--primary-color-start), var(--primary-color-end));
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-submit-button:hover[b-lg0de0ligj] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

.feedback-cancel-button[b-lg0de0ligj] {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-cancel-button:hover[b-lg0de0ligj] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}
/* _content/WebUI/Components/Pages/Support/Notifications.razor.rz.scp.css */
/* Note: Base styles, color variables, background components and layout are imported from platform.css */
/* Consumer-specific components and styles are imported from consumer.css */

/* ======================================
 * NOTIFICATIONS SPECIFIC STYLES
 * ======================================
 */

/* Filters bar */
.filters-bar[b-5i5ll0bwjw] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.filters-left[b-5i5ll0bwjw] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filters-right[b-5i5ll0bwjw] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Filter pills for notifications */
.filter-pill[b-5i5ll0bwjw] {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-pill.all[b-5i5ll0bwjw] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.filter-pill.unread[b-5i5ll0bwjw] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--secondary);
}

.filter-pill.system[b-5i5ll0bwjw] {
    background: rgba(56, 189, 248, 0.15);
    color: var(--info);
}

.filter-pill.account[b-5i5ll0bwjw] {
    background: rgba(16, 185, 129, 0.15);
    color: var(--secondary);
}

.filter-pill.security[b-5i5ll0bwjw] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.filter-pill.billing[b-5i5ll0bwjw] {
    background: rgba(236, 72, 153, 0.15);
    color: var(--tertiary);
}

.filter-pill.active[b-5i5ll0bwjw], .filter-pill:hover[b-5i5ll0bwjw] {
    background: var(--primary);
    color: white;
}

/* Search container */
.search-container[b-5i5ll0bwjw] {
    position: relative;
    flex-grow: 1;
    max-width: 300px;
}

.search-icon[b-5i5ll0bwjw] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
}

.search-input[b-5i5ll0bwjw] {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.6);
    color: white;
    font-size: 14px;
}

.search-input:focus[b-5i5ll0bwjw] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Notifications list */
.notifications-container[b-5i5ll0bwjw] {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Reduced gap between items */
}

.notification-date-header[b-5i5ll0bwjw] {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin: 8px 0;
    padding-left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-date-header[b-5i5ll0bwjw]::after {
    content: "";
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    flex-grow: 1;
    margin-left: 8px;
}

.notification-card[b-5i5ll0bwjw] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px; /* Reduced padding */
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    display: flex;
    gap: 12px; /* Reduced gap */
    align-items: center; /* Center vertically */
    position: relative;
}

.notification-card:hover[b-5i5ll0bwjw] {
    background: rgba(15, 23, 42, 0.8);
    transform: translateY(-1px); /* Reduced transform */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.notification-card.unread[b-5i5ll0bwjw] {
    border-left: 4px solid var(--primary);
}

.notification-icon[b-5i5ll0bwjw] {
    width: 36px; /* Reduced size */
    height: 36px; /* Reduced size */
    border-radius: 8px; /* Reduced border radius */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Reduced font size */
    flex-shrink: 0;
}

.notification-icon.system[b-5i5ll0bwjw] {
    background: rgba(56, 189, 248, 0.1);
    color: var(--info);
}

.notification-icon.account[b-5i5ll0bwjw] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.notification-icon.security[b-5i5ll0bwjw] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.notification-icon.billing[b-5i5ll0bwjw] {
    background: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.notification-content[b-5i5ll0bwjw] {
    flex-grow: 1;
    overflow: hidden; /* Prevent text overflow */
}

/* New condensed layout styles */
.notification-header-condensed[b-5i5ll0bwjw] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}

.notification-title-area[b-5i5ll0bwjw] {
    display: flex;
    flex-direction: column;
}

.notification-title[b-5i5ll0bwjw] {
    font-size: 15px; /* Reduced font size */
    font-weight: 600;
    margin-bottom: 2px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-message-condensed[b-5i5ll0bwjw] {
    font-size: 13px; /* Reduced font size */
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.notification-meta-condensed[b-5i5ll0bwjw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.notification-info[b-5i5ll0bwjw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-action-area[b-5i5ll0bwjw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-time[b-5i5ll0bwjw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.notification-category[b-5i5ll0bwjw] {
    font-size: 11px; /* Reduced font size */
    padding: 2px 6px;
    border-radius: 100px;
    font-weight: 500;
}

.notification-category.system[b-5i5ll0bwjw] {
    background: rgba(56, 189, 248, 0.1);
    color: var(--info);
}

.notification-category.account[b-5i5ll0bwjw] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.notification-category.security[b-5i5ll0bwjw] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.notification-category.billing[b-5i5ll0bwjw] {
    background: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.notification-actions[b-5i5ll0bwjw] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.notification-action[b-5i5ll0bwjw] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px; /* Reduced font size */
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
}

.notification-action:hover[b-5i5ll0bwjw] {
    color: white;
}

/* Condensed buttons */
.notification-buttons-condensed[b-5i5ll0bwjw] {
    display: flex;
    gap: 4px;
}

.action-button-small[b-5i5ll0bwjw] {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.notification-link-condensed[b-5i5ll0bwjw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    text-decoration: none;
    transition: all 0.2s ease;
}

.notification-link-condensed:hover[b-5i5ll0bwjw] {
    background: rgba(99, 102, 241, 0.2);
}

/* Empty state */
.empty-state[b-5i5ll0bwjw] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    margin: 40px 0;
}

.empty-state i[b-5i5ll0bwjw] {
    font-size: 40px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.3);
}

.settings-btn[b-5i5ll0bwjw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.settings-button-container[b-5i5ll0bwjw] {
    display: flex;
    justify-content: flex-end;
    margin: -10px 20px 10px 0;
}

/* Pagination styles */
.pagination[b-5i5ll0bwjw] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.pagination-controls[b-5i5ll0bwjw] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 100px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pagination-item[b-5i5ll0bwjw] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.7);
}

.pagination-item:hover[b-5i5ll0bwjw] {
    background: rgba(255, 255, 255, 0.1);
}

.pagination-item.active[b-5i5ll0bwjw] {
    background: var(--primary);
    color: white;
}

.pagination-item.disabled[b-5i5ll0bwjw] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* _content/WebUI/Components/Pages/UserView/Profile.razor.rz.scp.css */
/* Profile Page Layout */
.profile-container[b-hbg3rbuf7p] {
    margin: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profile-header[b-hbg3rbuf7p] {
    display: flex;
    align-items: center;
    gap: 20px;
}
.profile-image[b-hbg3rbuf7p] {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
}
.profile-image img[b-hbg3rbuf7p] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-info h3[b-hbg3rbuf7p] {
    margin: 0;
    font-size: 1.5rem;
}
.profile-info p[b-hbg3rbuf7p] {
    margin: 0.5rem 0 0;
    font-size: 1rem;
}
.profile-actions[b-hbg3rbuf7p] {
    margin-left: auto;
}

/* Icon Button for Actions */
.icon-btn[b-hbg3rbuf7p] {
    background: none;
    border: none;
    cursor: pointer;
    color: #3498db;
    font-size: 24px;
}
.icon-btn:hover[b-hbg3rbuf7p] {
    color: #2980b9;
}

/* ---------- Modal (Popup) Styles ---------- */
.modal-backdrop[b-hbg3rbuf7p] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;  /* Added this line */
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-hbg3rbuf7p] {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal-header[b-hbg3rbuf7p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h2[b-hbg3rbuf7p] {
    margin: 0;
    font-size: 1.5rem;
}
.modal-close[b-hbg3rbuf7p] {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: #aaa;
}
.modal-close:hover[b-hbg3rbuf7p] {
    color: #000;
}
.modal-body[b-hbg3rbuf7p] {
    margin-top: 1rem;
}
.modal-footer[b-hbg3rbuf7p] {
    margin-top: 1rem;
    text-align: right;
}

/* Form Controls inside Modal */
.form-group[b-hbg3rbuf7p] {
    margin-bottom: 1rem;
}
.form-group label[b-hbg3rbuf7p] {
    display: block;
    margin-bottom: 0.5rem;
}
.form-control[b-hbg3rbuf7p] {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #fff;
}
/* _content/WebUI/Components/UI/ApprovalModal.razor.rz.scp.css */
.approval-modal-overlay[b-fadffowkfd] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(2, 6, 23, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    overflow-y: auto;
}

.approval-modal[b-fadffowkfd] {
    background-color: var(--card-bg);
    max-width: 600px;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    animation: fade-in-b-fadffowkfd 0.3s ease-out;
}

@keyframes fade-in-b-fadffowkfd {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.approval-modal-header[b-fadffowkfd] {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.approval-modal-header h2[b-fadffowkfd] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: white;
}

.approval-modal-body[b-fadffowkfd] {
    padding: 24px;
    text-align: center;
}

.approval-icon[b-fadffowkfd] {
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 20px;
}

.approval-modal-body p[b-fadffowkfd] {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.interest-summary[b-fadffowkfd] {
    margin-top: 20px;
    padding: 16px;
    background-color: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    text-align: left;
}

.interest-summary p[b-fadffowkfd] {
    margin-bottom: 8px;
}

.platform-interest-form[b-fadffowkfd] {
    margin-top: 20px;
    text-align: left;
    background-color: rgba(99, 102, 241, 0.05);
    padding: 16px;
    border-radius: 8px;
}

.platform-interest-form h3[b-fadffowkfd] {
    font-size: 18px;
    margin-bottom: 10px;
}

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

.form-group label[b-fadffowkfd] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.form-control[b-fadffowkfd] {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-size: 14px;
    transition: all 0.2s;
}

.form-control:focus[b-fadffowkfd] {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.approval-modal-footer[b-fadffowkfd] {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
}

.btn[b-fadffowkfd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

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

.btn-primary:hover[b-fadffowkfd] {
    background-color: var(--primary-dark);
}

.btn-secondary[b-fadffowkfd] {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover[b-fadffowkfd] {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}
/* _content/WebUI/Components/UI/CodeEditor.razor.rz.scp.css */
.code-editor-component[b-tk9vl8jok0] {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.8);
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
}

.code-editor-header[b-tk9vl8jok0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.editor-language[b-tk9vl8jok0] {
    display: flex;
    flex-direction: column;
}

.editor-language span[b-tk9vl8jok0] {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: capitalize;
}

.editor-instruction[b-tk9vl8jok0] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.editor-actions[b-tk9vl8jok0] {
    display: flex;
    gap: 8px;
}

.editor-action-button[b-tk9vl8jok0] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.editor-action-button:hover[b-tk9vl8jok0] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.editor-action-button:active[b-tk9vl8jok0] {
    transform: translateY(0);
}

.code-editor-content[b-tk9vl8jok0] {
    position: relative;
}

.code-textarea-wrapper[b-tk9vl8jok0] {
    position: relative;
}

.code-textarea[b-tk9vl8jok0] {
    width: 100%;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 16px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(15, 23, 42, 0.95);
    border: none;
    resize: vertical;
    min-height: 200px;
    white-space: pre;
    tab-size: 4;
    overflow-x: auto;
    transition: all 0.2s ease;
}

.code-textarea:focus[b-tk9vl8jok0] {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.4);
}

.code-placeholder[b-tk9vl8jok0] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.code-placeholder i[b-tk9vl8jok0] {
    font-size: 32px;
    margin-bottom: 12px;
    color: rgba(99, 102, 241, 0.5);
}

.code-placeholder p[b-tk9vl8jok0] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    line-height: 1.5;
}

.code-placeholder code[b-tk9vl8jok0] {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

.code-display[b-tk9vl8jok0] {
    margin: 0;
    padding: 16px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(15, 23, 42, 0.95);
    white-space: pre;
    overflow-x: auto;
    min-height: 100px;
}

/* Line number styling */
.with-line-numbers[b-tk9vl8jok0] {
    padding-left: 3.5em;
    counter-reset: line;
    position: relative;
}

.with-line-numbers[b-tk9vl8jok0]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.5em;
    background: rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.code-display.with-line-numbers code[b-tk9vl8jok0] {
    display: block;
    position: relative;
    counter-reset: line;
}

.code-display.with-line-numbers code > span[b-tk9vl8jok0] {
    display: block;
    position: relative;
    line-height: 1.6;
}

.code-display.with-line-numbers code > span[b-tk9vl8jok0]:before {
    counter-increment: line;
    content: counter(line);
    position: absolute;
    left: -3em;
    width: 2.5em;
    text-align: right;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9em;
    padding-right: 0.5em;
}

/* Copy success toast */
.copy-toast[b-tk9vl8jok0] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(16, 185, 129, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: fadeInOut-b-tk9vl8jok0 1.5s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInOut-b-tk9vl8jok0 {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

/* Different language syntax highlighting colors */
.sh[b-tk9vl8jok0], .bash[b-tk9vl8jok0] {
    color: #b5cea8; /* Green for shell commands */
}

.comment[b-tk9vl8jok0] {
    color: #6a9955; /* Green for comments */
}

.string[b-tk9vl8jok0] {
    color: #ce9178; /* Orange for strings */
}

.keyword[b-tk9vl8jok0] {
    color: #569cd6; /* Blue for keywords */
}

.function[b-tk9vl8jok0] {
    color: #dcdcaa; /* Yellow for functions */
}

.variable[b-tk9vl8jok0] {
    color: #9cdcfe; /* Light blue for variables */
}

.number[b-tk9vl8jok0] {
    color: #b5cea8; /* Green for numbers */
}
/* _content/WebUI/Components/UI/CodeSnippet.razor.rz.scp.css */
.code-snippet-container[b-3kvsht7gs7] {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(15, 23, 42, 0.8);
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
}

pre[b-3kvsht7gs7] {
    margin: 0 !important;
    padding: 0 !important;
}

code[b-3kvsht7gs7] {
    display: block;
    padding: 16px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(15, 23, 42, 0.95) !important;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    border-radius: 0 !important;
}

/* Add custom styling for bash code */
.language-bash[b-3kvsht7gs7] {
    color: #a9b7c6;
}

.language-bash .hljs-keyword[b-3kvsht7gs7] {
    color: #cc7832;
}

.language-bash .hljs-string[b-3kvsht7gs7] {
    color: #6a8759;
}

.language-bash .hljs-variable[b-3kvsht7gs7] {
    color: #9876aa;
}

.language-bash .hljs-comment[b-3kvsht7gs7] {
    color: #808080;
}

/* Improve scrollbar appearance */
code[b-3kvsht7gs7]::-webkit-scrollbar {
    height: 8px;
    background-color: rgba(15, 23, 42, 0.9);
}

code[b-3kvsht7gs7]::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

code[b-3kvsht7gs7]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Add subtle gradient fade at edges to indicate scrolling content */
.code-snippet-container[b-3kvsht7gs7]::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.95));
    pointer-events: none;
    opacity: 0.8;
    z-index: 2;
}
/* _content/WebUI/Components/UI/Common/Benson.razor.rz.scp.css */
.benson-chat-container[b-z4fsl8r4mu] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    max-width: 90vw;
    height: 600px;
    max-height: 80vh;
    background: var(--surface-color, #1a1f3a);
    border: 1px solid var(--border-color, #233554);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: all 0.3s ease;
}

.benson-chat-container.minimized[b-z4fsl8r4mu] {
    height: auto;
    width: auto;
}

.benson-chat-container.expanded[b-z4fsl8r4mu] {
    width: 800px;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
}

.benson-header[b-z4fsl8r4mu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color, #233554);
    background: rgba(100, 255, 218, 0.05);
    border-radius: 12px 12px 0 0;
}

.benson-title h3[b-z4fsl8r4mu] {
    color: var(--primary-color, #64ffda);
    margin: 0;
    font-size: 1.25rem;
}

.benson-title p[b-z4fsl8r4mu] {
    color: var(--text-secondary, #a8b2d1);
    font-size: 0.75rem;
    margin: 0;
}

.benson-controls[b-z4fsl8r4mu] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-z4fsl8r4mu] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #a8b2d1);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-icon:hover[b-z4fsl8r4mu] {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e6f1ff);
}

.benson-messages[b-z4fsl8r4mu] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    scroll-behavior: smooth;
}

/* Custom scrollbar for messages */
.benson-messages[b-z4fsl8r4mu]::-webkit-scrollbar {
    width: 8px;
}

.benson-messages[b-z4fsl8r4mu]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.benson-messages[b-z4fsl8r4mu]::-webkit-scrollbar-thumb {
    background: rgba(100, 255, 218, 0.3);
    border-radius: 4px;
}

.benson-messages[b-z4fsl8r4mu]::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 255, 218, 0.5);
}

.message[b-z4fsl8r4mu] {
    margin-bottom: 1rem;
    animation: fadeIn-b-z4fsl8r4mu 0.3s ease-in;
}

.message.user[b-z4fsl8r4mu] {
    display: flex;
    justify-content: flex-end;
}

.message.assistant[b-z4fsl8r4mu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.message.error .message-content[b-z4fsl8r4mu] {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--error-color, #ff6b6b);
    color: var(--error-color, #ff6b6b);
}

.message-content[b-z4fsl8r4mu] {
    max-width: 70%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    line-height: 1.5;
    background: rgba(100, 255, 218, 0.1);
}

.message.user .message-content[b-z4fsl8r4mu] {
    background: rgba(255, 107, 107, 0.1);
    border-bottom-right-radius: 4px;
}

.message.assistant .message-content[b-z4fsl8r4mu] {
    border-bottom-left-radius: 4px;
}

.message-content p[b-z4fsl8r4mu] {
    margin: 0 0 0.5rem 0;
}

.message-content p:last-child[b-z4fsl8r4mu] {
    margin-bottom: 0;
}

.typing-indicator[b-z4fsl8r4mu] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(100, 255, 218, 0.1);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}

.typing-indicator span[b-z4fsl8r4mu] {
    height: 8px;
    width: 8px;
    background: var(--text-secondary, #a8b2d1);
    border-radius: 50%;
    display: inline-block;
    margin: 0 2px;
    animation: typing-b-z4fsl8r4mu 1.4s infinite;
}

.typing-indicator span:nth-child(2)[b-z4fsl8r4mu] {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)[b-z4fsl8r4mu] {
    animation-delay: 0.4s;
}

@keyframes typing-b-z4fsl8r4mu {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

@keyframes fadeIn-b-z4fsl8r4mu {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.benson-input[b-z4fsl8r4mu] {
    padding: 1rem;
    border-top: 1px solid var(--border-color, #233554);
}

.benson-input form[b-z4fsl8r4mu] {
    display: flex;
    gap: 0.5rem;
}

.message-input[b-z4fsl8r4mu] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--background-color, #0a0e27);
    border: 1px solid var(--border-color, #233554);
    border-radius: 6px;
    color: var(--text-primary, #e6f1ff);
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.message-input:focus[b-z4fsl8r4mu] {
    outline: none;
    border-color: var(--primary-color, #64ffda);
}

.message-input:disabled[b-z4fsl8r4mu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.send-button[b-z4fsl8r4mu] {
    padding: 0.5rem 0.75rem;
    background: var(--primary-color, #64ffda);
    color: var(--background-color, #0a0e27);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.send-button:hover:not(:disabled)[b-z4fsl8r4mu] {
    background: var(--secondary-color, #ff6b6b);
    transform: translateY(-1px);
}

.send-button:disabled[b-z4fsl8r4mu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-button i[b-z4fsl8r4mu] {
    font-size: 1rem;
}

.benson-footer[b-z4fsl8r4mu] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color, #233554);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.clear-button[b-z4fsl8r4mu] {
    padding: 0.25rem 0.75rem;
    background: transparent;
    color: var(--text-secondary, #a8b2d1);
    border: 1px solid var(--border-color, #233554);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.clear-button:hover[b-z4fsl8r4mu] {
    background: var(--border-color, #233554);
    color: var(--text-primary, #e6f1ff);
}

.status[b-z4fsl8r4mu] {
    color: var(--text-secondary, #a8b2d1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status[b-z4fsl8r4mu]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-color, #64ffda);
}

.status.error[b-z4fsl8r4mu]::before {
    background: var(--error-color, #ff6b6b);
}

.benson-minimized-bar[b-z4fsl8r4mu] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--text-primary, #e6f1ff);
    transition: all 0.2s;
    border-radius: 8px;
}

.benson-minimized-bar:hover[b-z4fsl8r4mu] {
    background: rgba(100, 255, 218, 0.1);
}

.benson-minimized-bar i[b-z4fsl8r4mu] {
    font-size: 1.25rem;
    color: var(--primary-color, #64ffda);
}

.unread-badge[b-z4fsl8r4mu] {
    background: var(--secondary-color, #ff6b6b);
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 12px;
    margin-left: auto;
    min-width: 20px;
    text-align: center;
}

.server-cards-container[b-z4fsl8r4mu] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 100%;
}

/* Configuration group styles */
.configuration-group[b-z4fsl8r4mu] {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(100, 255, 218, 0.1);
    border-radius: 8px;
}

.config-header[b-z4fsl8r4mu] {
    margin-bottom: 1rem;
}

.config-header h3[b-z4fsl8r4mu] {
    color: var(--primary-color, #64ffda);
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

.config-description[b-z4fsl8r4mu] {
    color: var(--text-secondary, #a8b2d1);
    font-size: 0.875rem;
}

.config-content-wrapper[b-z4fsl8r4mu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-metadata[b-z4fsl8r4mu] {
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 0.875rem;
}

.config-metadata > div[b-z4fsl8r4mu] {
    margin-bottom: 0.5rem;
}

.config-metadata > div:last-child[b-z4fsl8r4mu] {
    margin-bottom: 0;
}

.config-metadata strong[b-z4fsl8r4mu] {
    color: var(--primary-color, #64ffda);
    display: block;
    margin-bottom: 0.25rem;
}

.config-metadata ul[b-z4fsl8r4mu] {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--text-secondary, #a8b2d1);
}

.config-metadata ul li[b-z4fsl8r4mu] {
    margin-bottom: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .benson-chat-container[b-z4fsl8r4mu] {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .benson-chat-container.expanded[b-z4fsl8r4mu] {
        width: 100%;
        height: 100%;
    }
    
    .benson-header[b-z4fsl8r4mu] {
        border-radius: 0;
    }
    
    .message-content[b-z4fsl8r4mu] {
        max-width: 85%;
    }
    
    .benson-messages[b-z4fsl8r4mu] {
        padding: 0.75rem;
    }
    
    .benson-input[b-z4fsl8r4mu] {
        padding: 0.75rem;
    }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .benson-chat-container[b-z4fsl8r4mu] {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }
}

/* Animation for chat container appearance */
.benson-chat-container[b-z4fsl8r4mu] {
    animation: slideUp-b-z4fsl8r4mu 0.3s ease-out;
}

@keyframes slideUp-b-z4fsl8r4mu {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Focus styles for accessibility */
.btn-icon:focus[b-z4fsl8r4mu],
.message-input:focus[b-z4fsl8r4mu],
.send-button:focus[b-z4fsl8r4mu],
.clear-button:focus[b-z4fsl8r4mu] {
    outline: 2px solid var(--primary-color, #64ffda);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .benson-chat-container[b-z4fsl8r4mu] {
        border-width: 2px;
    }
    
    .message-content[b-z4fsl8r4mu] {
        border: 1px solid currentColor;
    }
}
/* _content/WebUI/Components/UI/Common/LogoSection/LogoSection.razor.rz.scp.css */
.sidebar-logo[b-ib44sqp2dp] {
    padding: 24px 24px 16px 24px;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
}
/* _content/WebUI/Components/UI/Common/OrganizationDisplay/OrganizationDisplay.razor.rz.scp.css */
.sidebar-profile[b-0y4mh537yy] {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* _content/WebUI/Components/UI/Common/PageHeader.razor.rz.scp.css */
.page-header-component[b-s3amcbbhaw] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-header-title h1[b-s3amcbbhaw] {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.page-header-description p[b-s3amcbbhaw] {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    margin: 4px 0 0 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-header-title h1[b-s3amcbbhaw] {
        font-size: 20px;
    }
    
    .page-header-description p[b-s3amcbbhaw] {
        font-size: 12px;
    }
}
/* _content/WebUI/Components/UI/Common/ProgressBar.razor.rz.scp.css */
/* Progress bars */
.progress-container[b-2vtxna7fa0] {
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.progress-bar[b-2vtxna7fa0] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
}

.progress-bar.warning[b-2vtxna7fa0] {
    background: linear-gradient(90deg, var(--warning), #fdba74);
}

.progress-bar.danger[b-2vtxna7fa0] {
    background: linear-gradient(90deg, var(--danger), #fca5a5);
}
/* _content/WebUI/Components/UI/Common/ServerCard.razor.rz.scp.css */
.server-card[b-3ubg5u45a0] {
    background: var(--surface-color, #1a1f3a);
    border: 1px solid var(--border-color, #233554);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.server-card:hover[b-3ubg5u45a0] {
    border-color: var(--primary-color, #64ffda);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(100, 255, 218, 0.1);
}

.card-header[b-3ubg5u45a0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.card-header-info[b-3ubg5u45a0] {
    flex: 1;
}

.server-id[b-3ubg5u45a0] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #e6f1ff);
    margin-bottom: 0.25rem;
}

.server-status[b-3ubg5u45a0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #a8b2d1);
}

.status-indicator[b-3ubg5u45a0] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary, #a8b2d1);
}

.status-indicator.available[b-3ubg5u45a0] {
    background: var(--success-color, #64ffda);
}

.status-indicator.busy[b-3ubg5u45a0] {
    background: var(--warning-color, #ffa500);
}

.status-indicator.offline[b-3ubg5u45a0] {
    background: var(--error-color, #ff6b6b);
}

.score-badge[b-3ubg5u45a0] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.score-badge.perfect[b-3ubg5u45a0] {
    background: rgba(100, 255, 218, 0.2);
    color: var(--primary-color, #64ffda);
}

.score-badge.excellent[b-3ubg5u45a0] {
    background: rgba(46, 213, 115, 0.2);
    color: #2ed573;
}

.score-badge.good[b-3ubg5u45a0] {
    background: rgba(255, 221, 87, 0.2);
    color: #ffdd57;
}

.score-badge.fair[b-3ubg5u45a0] {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
}

.score-badge.poor[b-3ubg5u45a0] {
    background: rgba(255, 107, 107, 0.2);
    color: var(--error-color, #ff6b6b);
}

.config-info[b-3ubg5u45a0] {
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(100, 255, 218, 0.05);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--primary-color, #64ffda);
}

.gpu-section[b-3ubg5u45a0] {
    margin-bottom: 0.75rem;
}

.gpu-model[b-3ubg5u45a0] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #e6f1ff);
    margin-bottom: 0.25rem;
}

.gpu-details[b-3ubg5u45a0] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #a8b2d1);
}

.specs-grid[b-3ubg5u45a0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.spec-item[b-3ubg5u45a0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #a8b2d1);
}

.spec-item i[b-3ubg5u45a0] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Animation for card appearance */
.server-card[b-3ubg5u45a0] {
    animation: fadeInUp-b-3ubg5u45a0 0.3s ease-out;
}

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

/* Responsive adjustments */
@media (max-width: 480px) {
    .server-card[b-3ubg5u45a0] {
        padding: 0.75rem;
    }
    
    .specs-grid[b-3ubg5u45a0] {
        grid-template-columns: 1fr;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .server-card[b-3ubg5u45a0] {
        border-width: 2px;
    }
    
    .score-badge[b-3ubg5u45a0] {
        font-weight: 700;
    }
}
/* _content/WebUI/Components/UI/Common/Spinner.razor.rz.scp.css */
.spinner-overlay[b-yi2hyao3d6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* semi-transparent overlay */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner-inline[b-yi2hyao3d6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner[b-yi2hyao3d6] {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-yi2hyao3d6 1s linear infinite;
}

.spinner-small[b-yi2hyao3d6] {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

.spinner-large[b-yi2hyao3d6] {
    width: 60px;
    height: 60px;
    border-width: 5px;
}

.spinner-text[b-yi2hyao3d6] {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

/* Also support the loader class used in some components */
.loader[b-yi2hyao3d6] {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top: 3px solid var(--primary);
    width: 40px;
    height: 40px;
    animation: spin-b-yi2hyao3d6 1s linear infinite;
    margin-bottom: 16px;
}

.loading-text[b-yi2hyao3d6] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    margin-top: 16px;
}

@keyframes spin-b-yi2hyao3d6 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* _content/WebUI/Components/UI/Common/StandardPageHeader.razor.rz.scp.css */
.standard-page-header[b-h7fvx2t4n1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.header-left[b-h7fvx2t4n1] {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.header-middle[b-h7fvx2t4n1] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-right[b-h7fvx2t4n1] {
    flex: 0 0 auto;
    margin-left: 20px;
}

.page-title[b-h7fvx2t4n1] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}

.page-description-wrapper[b-h7fvx2t4n1] {
    margin-top: 4px;
}

.page-description[b-h7fvx2t4n1] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    max-width: 600px;
    display: block;
    margin: 0;
}

.btn-group[b-h7fvx2t4n1] {
    display: flex;
    gap: 8px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .standard-page-header[b-h7fvx2t4n1] {
        flex-wrap: wrap;
    }
    
    .header-left[b-h7fvx2t4n1] {
        flex: 1 0 100%;
        margin-bottom: 16px;
    }
    
    .header-middle[b-h7fvx2t4n1] {
        flex: 1;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .standard-page-header[b-h7fvx2t4n1] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-left[b-h7fvx2t4n1], .header-middle[b-h7fvx2t4n1], .header-right[b-h7fvx2t4n1] {
        width: 100%;
        margin-bottom: 16px;
    }
    
    .header-right[b-h7fvx2t4n1] {
        margin-left: 0;
        display: flex;
        justify-content: flex-end;
    }
    
    .btn-group[b-h7fvx2t4n1] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* _content/WebUI/Components/UI/Common/ToastNotifications.razor.rz.scp.css */
/* Toast/Snackbar Notification styles */
.toast-container[b-xlyq490ozn] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 350px;
    max-width: 90%;
}

.toast-notification[b-xlyq490ozn] {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight-b-xlyq490ozn 0.3s ease-out;
    opacity: 0.97;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.95);
    border-left: 4px solid;
}

.toast-notification.success[b-xlyq490ozn] {
    border-color: #10B981;
}

.toast-notification.error[b-xlyq490ozn] {
    border-color: #ef4444;
}

.toast-notification.info[b-xlyq490ozn] {
    border-color: #06B6D4;
}

.toast-notification.warning[b-xlyq490ozn] {
    border-color: #f59e0b;
}

.toast-icon[b-xlyq490ozn] {
    flex-shrink: 0;
    margin-right: 12px;
    font-size: 20px;
    padding-top: 2px;
}

.toast-notification.success .toast-icon[b-xlyq490ozn] {
    color: #10B981;
}

.toast-notification.error .toast-icon[b-xlyq490ozn] {
    color: #ef4444;
}

.toast-notification.info .toast-icon[b-xlyq490ozn] {
    color: #06B6D4;
}

.toast-notification.warning .toast-icon[b-xlyq490ozn] {
    color: #f59e0b;
}

.toast-content[b-xlyq490ozn] {
    flex: 1;
}

.toast-title[b-xlyq490ozn] {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
}

.toast-message[b-xlyq490ozn] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.toast-close[b-xlyq490ozn] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    margin-left: 12px;
    font-size: 14px;
    align-self: flex-start;
    transition: color 0.2s;
}

.toast-close:hover[b-xlyq490ozn] {
    color: white;
}

.toast-notification.removing[b-xlyq490ozn] {
    animation: slideOutRight-b-xlyq490ozn 0.5s ease-in forwards;
}

@keyframes slideInRight-b-xlyq490ozn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 0.97;
    }
}

@keyframes slideOutRight-b-xlyq490ozn {
    from {
        transform: translateX(0);
        opacity: 0.97;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}
/* _content/WebUI/Components/UI/Common/UserAvatar/UserAvatar.razor.rz.scp.css */
.user-avatar-container[b-85hmdbk4cq] {
    position: relative;
    z-index: 100;
}

.user-avatar[b-85hmdbk4cq] {
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.avatar-circle[b-85hmdbk4cq] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #6366F1), var(--primary-dark, #4F46E5));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.avatar-circle.large[b-85hmdbk4cq] {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.user-avatar:hover .avatar-circle[b-85hmdbk4cq] {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.notification-count-small[b-85hmdbk4cq] {
    font-size: 10px;
    color: white;
    font-weight: bold;
}

.notification-dot[b-85hmdbk4cq] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    border-radius: 12px;
    background-color: var(--danger);
    border: 2px solid var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    z-index: 101;
}

/* Dropdown Menu */
.avatar-dropdown[b-85hmdbk4cq] {
    position: absolute;
    top: 60px;
    right: 0;
    width: 320px;
    background-color: var(--bg-darker, #0F172A);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.2s ease;
}

.dropdown-open[b-85hmdbk4cq] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.dropdown-user-info[b-85hmdbk4cq] {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-details[b-85hmdbk4cq] {
    flex: 1;
}

.user-name[b-85hmdbk4cq] {
    font-weight: 600;
    margin-bottom: 2px;
}

.user-email[b-85hmdbk4cq] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

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

.dropdown-tabs[b-85hmdbk4cq] {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-tabs .tab[b-85hmdbk4cq] {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.dropdown-tabs .tab.active[b-85hmdbk4cq] {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.dropdown-tabs .tab:hover:not(.active)[b-85hmdbk4cq] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.tab-notification-count[b-85hmdbk4cq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--danger);
    color: white;
    font-size: 10px;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 15px;
    height: 15px;
}

.dropdown-menu-items[b-85hmdbk4cq] {
    padding: 8px 0;
}

.dropdown-item[b-85hmdbk4cq] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover[b-85hmdbk4cq] {
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item i[b-85hmdbk4cq] {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.notification-count[b-85hmdbk4cq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--danger);
    color: white;
    font-size: 11px;
    border-radius: 10px;
    padding: 2px 6px;
    margin-left: auto;
}

.wallet-balance[b-85hmdbk4cq] {
    margin-left: auto;
    color: var(--secondary);
    font-weight: 500;
}

.logout-button[b-85hmdbk4cq] {
    margin: 10px 16px;
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notifications List */
.notifications-list[b-85hmdbk4cq] {
    max-height: 350px;
    overflow-y: auto;
}

.notification-item[b-85hmdbk4cq] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    position: relative;
    display: flex;
    transition: background-color 0.2s ease;
}

.notification-item:hover[b-85hmdbk4cq] {
    background-color: rgba(var(--background-color-rgb), 0.5);
}

.notification-item.unread[b-85hmdbk4cq] {
    background-color: rgba(var(--primary-rgb), 0.05);
}

.notification-icon[b-85hmdbk4cq] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.notification-icon.type-system[b-85hmdbk4cq] {
    background-color: rgba(var(--info-rgb), 0.15);
    color: var(--info);
}

.notification-icon.type-security[b-85hmdbk4cq] {
    background-color: rgba(var(--warning-rgb), 0.15);
    color: var(--warning);
}

.notification-icon.type-account[b-85hmdbk4cq] {
    background-color: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
}

.notification-icon.type-billing[b-85hmdbk4cq] {
    background-color: rgba(var(--success-rgb), 0.15);
    color: var(--success);
}

.notification-content[b-85hmdbk4cq] {
    flex: 1;
    min-width: 0;
}

.notification-title[b-85hmdbk4cq] {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-message[b-85hmdbk4cq] {
    font-size: 0.85rem;
    color: var(--text-color-secondary);
    margin-bottom: 6px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time[b-85hmdbk4cq] {
    font-size: 0.75rem;
    color: var(--text-color-tertiary);
}

.notifications-header[b-85hmdbk4cq] {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px;
}

.mark-all-read[b-85hmdbk4cq] {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.mark-all-read:hover[b-85hmdbk4cq] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.unread-indicator[b-85hmdbk4cq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary);
    position: absolute;
    top: 12px;
    right: 12px;
}

.empty-notifications[b-85hmdbk4cq] {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-color-secondary);
}

.empty-notifications i[b-85hmdbk4cq] {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-notifications p[b-85hmdbk4cq] {
    font-size: 0.9rem;
}

.notifications-loading[b-85hmdbk4cq] {
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-color-secondary);
}

.notifications-loading span[b-85hmdbk4cq] {
    margin-top: 12px;
    font-size: 0.9rem;
}

.view-all-container[b-85hmdbk4cq] {
    padding: 12px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.view-all-button[b-85hmdbk4cq] {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.view-all-button:hover[b-85hmdbk4cq] {
    background-color: rgba(var(--primary-rgb), 0.1);
}

.notification-actions[b-85hmdbk4cq] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.action-button[b-85hmdbk4cq] {
    padding: 4px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.action-button.primary-button[b-85hmdbk4cq] {
    background-color: var(--primary);
    color: white;
}

.action-button.primary-button:hover[b-85hmdbk4cq] {
    background-color: var(--primary-dark);
}

.action-button.secondary-button[b-85hmdbk4cq] {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.action-button.secondary-button:hover[b-85hmdbk4cq] {
    background-color: rgba(var(--text-color-rgb), 0.05);
}

/* Overlay for closing dropdown */
.dropdown-overlay[b-85hmdbk4cq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .avatar-dropdown[b-85hmdbk4cq] {
        width: 260px;
    }
}
/* _content/WebUI/Components/UI/Common/ViewToggle/ViewToggle.razor.rz.scp.css */
.view-toggle-container[b-eoeoeoml6s] {
    display: flex;
    background-color: rgba(30, 30, 40, 0.8);
    border-radius: 0;
    padding: 2px;
    margin: 0 0 16px 0;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    border-right: none;
    width: 100%;
}

.view-toggle-button[b-eoeoeoml6s] {
    flex: 1 1 50%;
    padding: 8px 16px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    width: 50%;
}

.view-toggle-button:hover[b-eoeoeoml6s] {
    color: rgba(255, 255, 255, 0.9);
}

.view-toggle-button.active[b-eoeoeoml6s] {
    background-color: rgba(70, 70, 220, 0.6);
    color: white;
}

.view-toggle-button i[b-eoeoeoml6s] {
    font-size: 14px;
}

.view-toggle-button span[b-eoeoeoml6s] {
    font-size: 14px;
    font-weight: 500;
}
/* _content/WebUI/Components/UI/ContactSalesModal.razor.rz.scp.css */
/* Modal Styles */
.modal-backdrop[b-u7c4naz5os] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
}

.modal-container[b-u7c4naz5os] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    border-radius: 24px;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.2);
    position: relative;
}

.modal-header[b-u7c4naz5os] {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.modal-close[b-u7c4naz5os] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-close:hover[b-u7c4naz5os] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
    transform: rotate(90deg);
}

.modal-content[b-u7c4naz5os] {
    padding: 40px;
}

/* Form Container */
.form-container[b-u7c4naz5os] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Form Title and Description */
.form-main-title[b-u7c4naz5os] {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 16px;
}

.form-subtitle[b-u7c4naz5os] {
    font-size: 20px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 12px;
}

.form-description[b-u7c4naz5os] {
    font-size: 16px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.6;
}

/* Trust Badges */
.trust-badges-grid[b-u7c4naz5os] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.trust-badge-item[b-u7c4naz5os] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.trust-badge-item i[b-u7c4naz5os] {
    font-size: 24px;
    color: var(--primary-color-start);
}

.trust-badge-item span[b-u7c4naz5os] {
    font-size: 14px;
    font-weight: 500;
}

.form-divider[b-u7c4naz5os] {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 40px 0;
}

/* Form Sections */
.form-section[b-u7c4naz5os] {
    margin-bottom: 40px;
}

.form-section h4[b-u7c4naz5os] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section h4 i[b-u7c4naz5os] {
    color: var(--primary-color-start);
}

/* Form Elements */
.form-row[b-u7c4naz5os] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-u7c4naz5os] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-u7c4naz5os] {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.required[b-u7c4naz5os] {
    color: #ef4444;
}

.form-input[b-u7c4naz5os],
.form-textarea[b-u7c4naz5os] {
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-input:focus[b-u7c4naz5os],
.form-textarea:focus[b-u7c4naz5os] {
    outline: none;
    border-color: var(--primary-color-start);
    background: rgba(15, 23, 42, 0.7);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input.error[b-u7c4naz5os],
.form-textarea.error[b-u7c4naz5os] {
    border-color: #ef4444;
}

.form-textarea[b-u7c4naz5os] {
    resize: vertical;
    min-height: 100px;
}

.field-help[b-u7c4naz5os] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.error-message[b-u7c4naz5os] {
    font-size: 13px;
    color: #ef4444;
    margin-top: 4px;
}

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

.checkbox-item[b-u7c4naz5os] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.checkbox-item:hover[b-u7c4naz5os] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.3);
}

.checkbox-item input[type="checkbox"][b-u7c4naz5os] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-item label[b-u7c4naz5os] {
    flex: 1;
    cursor: pointer;
}

.checkbox-item label strong[b-u7c4naz5os] {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.checkbox-item label small[b-u7c4naz5os] {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.section-description[b-u7c4naz5os] {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Consent Section */
.consent-section[b-u7c4naz5os] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    margin: 32px 0;
}

.consent-item[b-u7c4naz5os] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.consent-item:last-child[b-u7c4naz5os] {
    margin-bottom: 0;
}

.consent-item input[type="checkbox"][b-u7c4naz5os] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.consent-item label[b-u7c4naz5os] {
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
}

/* Submit Section */
.submit-section[b-u7c4naz5os] {
    text-align: center;
}

.submit-button[b-u7c4naz5os] {
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    color: white;
    border: none;
    padding: 16px 48px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.submit-button:hover:not(:disabled)[b-u7c4naz5os] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.submit-button:disabled[b-u7c4naz5os] {
    opacity: 0.7;
    cursor: not-allowed;
}

.value-props[b-u7c4naz5os] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 24px 0;
}

.value-prop[b-u7c4naz5os] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
}

.value-prop i[b-u7c4naz5os] {
    color: #10b981;
}

.submit-disclaimer[b-u7c4naz5os] {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 16px;
    line-height: 1.5;
}

/* Success Modal */
.modal-overlay[b-u7c4naz5os] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.success-modal-content[b-u7c4naz5os] {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-icon[b-u7c4naz5os] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.modal-icon i[b-u7c4naz5os] {
    font-size: 40px;
    color: white;
}

.success-modal-content h3[b-u7c4naz5os] {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.success-modal-content p[b-u7c4naz5os] {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}

.modal-button[b-u7c4naz5os] {
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-button:hover[b-u7c4naz5os] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-content[b-u7c4naz5os] {
        padding: 20px;
    }

    .form-main-title[b-u7c4naz5os] {
        font-size: 28px;
    }

    .form-subtitle[b-u7c4naz5os] {
        font-size: 18px;
    }

    .trust-badges-grid[b-u7c4naz5os] {
        grid-template-columns: 1fr;
    }

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

    .checkbox-grid[b-u7c4naz5os] {
        grid-template-columns: 1fr;
    }

    .value-props[b-u7c4naz5os] {
        flex-direction: column;
        gap: 12px;
    }

    .submit-button[b-u7c4naz5os] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .form-main-title[b-u7c4naz5os] {
        font-size: 24px;
    }

    .form-subtitle[b-u7c4naz5os] {
        font-size: 16px;
    }

    .form-description[b-u7c4naz5os] {
        font-size: 14px;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/AppMarketplaceElements/AppCard.razor.rz.scp.css */
.app-card[b-m7d6b6xai5] {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.app-card:hover[b-m7d6b6xai5] {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.app-card-header[b-m7d6b6xai5] {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.app-icon[b-m7d6b6xai5] {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
}

.app-icon-placeholder[b-m7d6b6xai5] {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.app-icon-placeholder i[b-m7d6b6xai5] {
    font-size: 2.5rem;
}

.app-card-body[b-m7d6b6xai5] {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-name[b-m7d6b6xai5] {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.app-description[b-m7d6b6xai5] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
}

.app-tags[b-m7d6b6xai5] {
    margin-bottom: 0.75rem;
}

.app-tags .badge[b-m7d6b6xai5] {
    margin-right: 0.25rem;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid;
    font-weight: 600;
    transition: all 0.2s ease;
}

.app-tags .badge.bg-light[b-m7d6b6xai5] {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.app-requirements[b-m7d6b6xai5] {
    margin-top: auto;
}

.app-requirements small[b-m7d6b6xai5] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.app-requirements small i[b-m7d6b6xai5] {
    color: rgba(99, 102, 241, 0.6);
}

.app-card-footer[b-m7d6b6xai5] {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 0.5rem;
}

.app-card-footer .btn[b-m7d6b6xai5] {
    flex: 1;
    border: none;
    transition: all 0.2s ease;
}

.app-card-footer .btn-primary[b-m7d6b6xai5] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
}

.app-card-footer .btn-primary:hover[b-m7d6b6xai5] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.app-card-footer .btn-outline-secondary[b-m7d6b6xai5] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.app-card-footer .btn-outline-secondary:hover[b-m7d6b6xai5] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
/* _content/WebUI/Components/UI/CustomerElements/AppMarketplaceElements/AppDetailsModal.razor.rz.scp.css */
/* Modal overlay */
.app-modal-overlay[b-v8ut6ps1wf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

/* Modal container */
.app-modal-container[b-v8ut6ps1wf] {
    background: #1e293b;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Modal header */
.app-modal-header[b-v8ut6ps1wf] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-modal-title[b-v8ut6ps1wf] {
    margin: 0;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.app-modal-close[b-v8ut6ps1wf] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.app-modal-close:hover[b-v8ut6ps1wf] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Modal body */
.app-modal-body[b-v8ut6ps1wf] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.app-modal-body h6[b-v8ut6ps1wf] {
    color: white;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.app-modal-body p[b-v8ut6ps1wf] {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Tags */
.tags-container .badge[b-v8ut6ps1wf] {
    background-color: rgba(99, 102, 241, 0.2);
    color: #818CF8;
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 4px 10px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Lists */
.list-unstyled li[b-v8ut6ps1wf] {
    color: rgba(255, 255, 255, 0.7);
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
}

.list-unstyled li i[b-v8ut6ps1wf] {
    color: #818CF8;
    margin-right: 0.5rem;
}

/* Table */
.table[b-v8ut6ps1wf] {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
}

.table thead th[b-v8ut6ps1wf] {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    padding: 0.75rem 0.5rem;
}

.table tbody td[b-v8ut6ps1wf] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
}

.table-responsive[b-v8ut6ps1wf] {
    margin: 0 -0.5rem;
}

/* Modal footer */
.app-modal-footer[b-v8ut6ps1wf] {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.app-modal-footer .btn[b-v8ut6ps1wf] {
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.app-modal-footer .btn-secondary[b-v8ut6ps1wf] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.app-modal-footer .btn-secondary:hover[b-v8ut6ps1wf] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.app-modal-footer .btn-primary[b-v8ut6ps1wf] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
}

.app-modal-footer .btn-primary:hover[b-v8ut6ps1wf] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Collapsible sections */
.collapsible-section[b-v8ut6ps1wf] {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.collapsible-header[b-v8ut6ps1wf] {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.collapsible-header:hover[b-v8ut6ps1wf] {
    background: rgba(255, 255, 255, 0.08);
}

.collapsible-header i[b-v8ut6ps1wf] {
    transition: transform 0.2s ease;
    font-size: 0.875rem;
}

.collapsible-content[b-v8ut6ps1wf] {
    padding: 1rem;
    animation: slideDown-b-v8ut6ps1wf 0.2s ease;
}

@keyframes slideDown-b-v8ut6ps1wf {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-header[b-v8ut6ps1wf] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
}

.notes-text[b-v8ut6ps1wf] {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .app-modal-overlay[b-v8ut6ps1wf] {
        padding: 10px;
    }
    
    .app-modal-container[b-v8ut6ps1wf] {
        max-height: 95vh;
    }
    
    .app-modal-header[b-v8ut6ps1wf],
    .app-modal-body[b-v8ut6ps1wf] {
        padding: 1rem;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/AppMarketplaceElements/AppGrid.razor.rz.scp.css */
.app-grid-container[b-8o2egd89p3] {
    padding: 1rem 0;
    min-height: 400px;
}

.app-grid[b-8o2egd89p3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.app-list[b-8o2egd89p3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-list .app-card[b-8o2egd89p3] {
    max-height: 200px;
}

.app-list .app-card-header[b-8o2egd89p3] {
    display: none;
}

.app-list .app-card-body[b-8o2egd89p3] {
    flex-direction: row;
    gap: 1rem;
}

.app-list .app-name[b-8o2egd89p3] {
    font-size: 1rem;
}

.app-list-item[b-8o2egd89p3] {
    max-width: 100%;
}

/* Empty state styling */
.text-center[b-8o2egd89p3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.text-center i[b-8o2egd89p3] {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

.text-center p[b-8o2egd89p3] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
}

@media (max-width: 768px) {
    .app-grid[b-8o2egd89p3] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/AppMarketplaceElements/CategorySidebar.razor.rz.scp.css */
.category-pills-container[b-moiq63kdp5] {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.category-pills[b-moiq63kdp5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.category-pill[b-moiq63kdp5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    outline: none;
    position: relative;
    overflow: hidden;
}

.category-pill:hover[b-moiq63kdp5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.category-pill.active[b-moiq63kdp5] {
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.category-pill.active:hover[b-moiq63kdp5] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.pill-name[b-moiq63kdp5] {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.category-pill:not(.active) .pill-name[b-moiq63kdp5] {
    opacity: 0.9;
}

.category-pill:hover:not(.active) .pill-name[b-moiq63kdp5] {
    opacity: 1;
}

.pill-count[b-moiq63kdp5] {
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
}

.category-pill.active .pill-count[b-moiq63kdp5] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.category-pill:hover .pill-count[b-moiq63kdp5] {
    background: rgba(255, 255, 255, 0.2);
}

/* Responsive behavior */
@media (max-width: 768px) {
    .category-pills-container[b-moiq63kdp5] {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .category-pills[b-moiq63kdp5] {
        gap: 0.5rem;
        justify-content: center;
    }
    
    .category-pill[b-moiq63kdp5] {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }
    
    .pill-name[b-moiq63kdp5] {
        font-size: 0.85rem;
    }
    
    .pill-count[b-moiq63kdp5] {
        font-size: 0.75rem;
        padding: 0.1rem 0.4rem;
    }
}

@media (max-width: 480px) {
    .category-pills[b-moiq63kdp5] {
        gap: 0.4rem;
    }
    
    .category-pill[b-moiq63kdp5] {
        padding: 0.35rem 0.8rem;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/AppMarketplaceElements/DeployAppModal.razor.rz.scp.css */
/* Modal overlay */
.app-modal-overlay[b-yo3cyv1hs2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

/* Modal container */
.app-modal-container[b-yo3cyv1hs2] {
    background: #1e293b;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Modal header */
.app-modal-header[b-yo3cyv1hs2] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-modal-title[b-yo3cyv1hs2] {
    margin: 0;
    color: white;
    font-weight: 600;
}

.app-modal-close[b-yo3cyv1hs2] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.app-modal-close:hover[b-yo3cyv1hs2] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Modal body */
.app-modal-body[b-yo3cyv1hs2] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* Form styling */
.form-label[b-yo3cyv1hs2] {
    color: white;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.form-select[b-yo3cyv1hs2],
.form-control[b-yo3cyv1hs2] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.form-select:focus[b-yo3cyv1hs2],
.form-control:focus[b-yo3cyv1hs2] {
    background: rgba(255, 255, 255, 0.08);
    border-color: #6366F1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    color: white;
    outline: none;
}

.form-select option[b-yo3cyv1hs2] {
    background: #1e293b;
    color: white;
}

.form-control[b-yo3cyv1hs2]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Alert styling */
.alert-danger[b-yo3cyv1hs2] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

/* Modal footer */
.app-modal-footer[b-yo3cyv1hs2] {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.app-modal-footer .btn[b-yo3cyv1hs2] {
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.app-modal-footer .btn-secondary[b-yo3cyv1hs2] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.app-modal-footer .btn-secondary:hover[b-yo3cyv1hs2] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.app-modal-footer .btn-primary[b-yo3cyv1hs2] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
}

.app-modal-footer .btn-primary:hover:not(:disabled)[b-yo3cyv1hs2] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.app-modal-footer .btn[disabled][b-yo3cyv1hs2] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner */
.spinner-border-sm[b-yo3cyv1hs2] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Responsive */
@media (max-width: 768px) {
    .app-modal-overlay[b-yo3cyv1hs2] {
        padding: 10px;
    }
    
    .app-modal-container[b-yo3cyv1hs2] {
        max-height: 95vh;
    }
    
    .app-modal-header[b-yo3cyv1hs2],
    .app-modal-body[b-yo3cyv1hs2] {
        padding: 1rem;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/AppMarketplaceElements/SearchAndFilters.razor.rz.scp.css */
.search-filters-container[b-xqedzhh9et] {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
}

.search-box .input-group-text[b-xqedzhh9et] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    color: rgba(255, 255, 255, 0.5);
}

.search-box .form-control[b-xqedzhh9et] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    color: rgba(255, 255, 255, 0.95);
}

.search-box .form-control:focus[b-xqedzhh9et] {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
}

.search-box .form-control[b-xqedzhh9et]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.view-toggle .btn[b-xqedzhh9et] {
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.view-toggle .btn.active[b-xqedzhh9et] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.view-toggle .btn:hover:not(.active)[b-xqedzhh9et] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.os-filter .form-select[b-xqedzhh9et] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}

.os-filter .form-select:focus[b-xqedzhh9et] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: none;
}

.os-filter .form-select option[b-xqedzhh9et] {
    background: #1e293b;
    color: white;
}

@media (max-width: 768px) {
    .search-filters-container .row > div[b-xqedzhh9et] {
        margin-bottom: 1rem;
    }
    
    .search-filters-container .row > div:last-child[b-xqedzhh9et] {
        margin-bottom: 0;
    }
    
    .text-end[b-xqedzhh9et] {
        text-align: left !important;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/ComputeMarketplaceElements/FeaturedResources.razor.rz.scp.css */
/* Featured grid layout */
.featured-grid[b-asnagv2lhd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

/* Compute card styling */
.compute-card[b-asnagv2lhd] {
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.compute-card:hover[b-asnagv2lhd] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Online servers - green outline */
.compute-card.online[b-asnagv2lhd] {
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.compute-card.online:hover[b-asnagv2lhd] {
    border-color: rgba(16, 185, 129, 0.6) !important;
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.2);
}

/* Offline servers - red outline */
.compute-card.offline[b-asnagv2lhd] {
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.compute-card.offline:hover[b-asnagv2lhd] {
    border-color: rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.2);
}

.card-header[b-asnagv2lhd] {
    position: relative;
    padding: 16px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-badge[b-asnagv2lhd] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 12px;
}

.badge-available[b-asnagv2lhd] {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-limited[b-asnagv2lhd] {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-unavailable[b-asnagv2lhd] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.card-title-area[b-asnagv2lhd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.card-title[b-asnagv2lhd] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
}

.card-title i[b-asnagv2lhd] {
    margin-right: 6px;
    color: var(--primary);
}

.card-subtitle[b-asnagv2lhd] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.card-price-tag[b-asnagv2lhd] {
    font-family: 'Space Grotesk', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary);
    margin-left: auto;
}

.card-body[b-asnagv2lhd] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.specs-container[b-asnagv2lhd] {
    margin-bottom: 16px;
}

.specs-row[b-asnagv2lhd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.spec-tag[b-asnagv2lhd] {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.rating-chip[b-asnagv2lhd] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

.rating-icon[b-asnagv2lhd] {
    margin-right: 6px;
}

.utilization-container[b-asnagv2lhd] {
    margin-bottom: 16px;
}

.utilization-header[b-asnagv2lhd] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.utilization-label[b-asnagv2lhd] {
    color: rgba(255, 255, 255, 0.7);
}

.utilization-value[b-asnagv2lhd] {
    font-weight: 500;
}

.utilization-bar[b-asnagv2lhd] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.utilization-progress[b-asnagv2lhd] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
}

.provider-container[b-asnagv2lhd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.provider-info[b-asnagv2lhd] {
    display: flex;
    align-items: center;
}

.provider-avatar[b-asnagv2lhd] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.provider-details[b-asnagv2lhd] {
    display: flex;
    flex-direction: column;
}

.provider-name[b-asnagv2lhd] {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

.provider-rating[b-asnagv2lhd] {
    display: flex;
    align-items: center;
}

.rating-stars[b-asnagv2lhd] {
    color: #f59e0b;
    font-size: 12px;
    margin-right: 6px;
}

.rating-count[b-asnagv2lhd] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.wishlist-button[b-asnagv2lhd] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.wishlist-button:hover[b-asnagv2lhd] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

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

.details-btn[b-asnagv2lhd] {
    position: relative;
}

/* For table view */
.data-grid[b-asnagv2lhd] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-grid th[b-asnagv2lhd] {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-grid td[b-asnagv2lhd] {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .featured-grid[b-asnagv2lhd] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/ComputeMarketplaceElements/PageHeader.razor.rz.scp.css */
/* Page header styling */
.page-header[b-0t0swc7u4w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.page-title[b-0t0swc7u4w] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-description[b-0t0swc7u4w] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    max-width: 600px;
}

.btn-group[b-0t0swc7u4w] {
    display: flex;
    gap: 8px;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .page-header[b-0t0swc7u4w] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .btn-group[b-0t0swc7u4w] {
        margin-top: 16px;
        width: 100%;
        justify-content: flex-start;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/ComputeMarketplaceElements/RentComputeModal.razor.rz.scp.css */
/* Modal Styles */
.modal[b-ex2762zz0p] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 20px;
}

.modal.visible[b-ex2762zz0p] {
    display: flex !important;
}

.modal-backdrop[b-ex2762zz0p] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.modal-content[b-ex2762zz0p] {
    background-color: #161b22;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 90%;
    max-width: 800px;
    margin: 30px auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn-b-ex2762zz0p 0.3s;
    position: relative;
    z-index: 1001;
    max-height: 90vh;
    overflow-y: auto;
}

.deploy-modal[b-ex2762zz0p] {
    background: linear-gradient(to bottom, #1f2937, #111827);
}

.modal-header[b-ex2762zz0p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title[b-ex2762zz0p] {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.close-button[b-ex2762zz0p] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.close-button:hover[b-ex2762zz0p] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

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

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

/* Form Sections */
.form-section[b-ex2762zz0p] {
    margin-bottom: 24px;
    padding: 20px;
    background-color: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.section-title[b-ex2762zz0p] {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.9);
}

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

.form-group label[b-ex2762zz0p] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.form-control[b-ex2762zz0p] {
    width: 100%;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px 12px;
    color: white;
    font-size: 14px;
    transition: border-color 0.3s;
}

.form-control:focus[b-ex2762zz0p] {
    border-color: var(--primary);
    outline: none;
}

.form-control.is-invalid[b-ex2762zz0p] {
    border-color: #ef4444;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ef4444' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 36px;
}

.validation-message[b-ex2762zz0p] {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.validation-message i[b-ex2762zz0p] {
    margin-right: 4px;
}

span.required[b-ex2762zz0p] {
    color: #ef4444;
    margin-left: 4px;
}

.form-row[b-ex2762zz0p] {
    display: flex;
    margin-left: -8px;
    margin-right: -8px;
}

.col-6[b-ex2762zz0p] {
    width: 50%;
    padding-left: 8px;
    padding-right: 8px;
}

/* Server Info Card */
.server-card[b-ex2762zz0p] {
    background-color: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.server-info-row[b-ex2762zz0p] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.server-info-row:last-child[b-ex2762zz0p] {
    border-bottom: none;
}

.server-info-label[b-ex2762zz0p] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.server-info-label i[b-ex2762zz0p] {
    margin-right: 8px;
    width: 18px;
    text-align: center;
    color: var(--primary);
}

.server-info-value[b-ex2762zz0p] {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.gpu-info[b-ex2762zz0p] {
    margin-bottom: 4px;
}

.gpu-cuda-version[b-ex2762zz0p] {
    font-size: 12px;
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.more-gpus[b-ex2762zz0p] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

/* Resource Sliders */
.resource-slider-container[b-ex2762zz0p] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.resource-slider[b-ex2762zz0p] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 2px;
    outline: none;
}

.resource-slider[b-ex2762zz0p]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.resource-slider[b-ex2762zz0p]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.resource-value[b-ex2762zz0p] {
    width: 80px;
    font-size: 14px;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

/* SSH Key Status */
.key-status[b-ex2762zz0p] {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.key-status p[b-ex2762zz0p] {
    margin: 0;
}

.key-exists[b-ex2762zz0p] {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.key-missing[b-ex2762zz0p] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.key-status i[b-ex2762zz0p] {
    margin-right: 8px;
}

.add-key-button[b-ex2762zz0p] {
    font-size: 14px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
}

.add-key-button i[b-ex2762zz0p] {
    margin-right: 6px;
}

.key-missing-alert[b-ex2762zz0p] {
    background-color: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 6px;
    padding: 12px;
    margin: 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.key-missing-alert i[b-ex2762zz0p] {
    color: #f59e0b;
    font-size: 18px;
    margin-top: 2px;
}

.key-missing-alert strong[b-ex2762zz0p] {
    display: block;
    margin-bottom: 4px;
    color: #f59e0b;
}

.key-missing-alert p[b-ex2762zz0p] {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

.deploy-tooltip[b-ex2762zz0p] {
    background-color: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #f59e0b;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-right: 10px;
    animation: pulse-b-ex2762zz0p 2s infinite;
}

.deploy-tooltip i[b-ex2762zz0p] {
    margin-right: 6px;
}

.ready-tooltip[b-ex2762zz0p] {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-left: 10px;
}

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

/* Pricing Card */
.pricing-card[b-ex2762zz0p] {
    padding: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(37, 99, 235, 0.1));
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin-top: 24px;
    position: relative;
    overflow: hidden;
}

.pricing-header[b-ex2762zz0p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-header h4[b-ex2762zz0p] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.pricing-value[b-ex2762zz0p] {
    font-size: 22px;
    font-weight: 700;
    color: #6366f1;
    font-family: 'Space Grotesk', monospace;
}

.pricing-details[b-ex2762zz0p] {
    font-size: 14px;
}

.pricing-detail-item[b-ex2762zz0p] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.7);
}

.pricing-detail-item:not(:last-child)[b-ex2762zz0p] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animation */
@keyframes modalFadeIn-b-ex2762zz0p {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bootstrap Scripts Section */
.section-description[b-ex2762zz0p] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
    margin-bottom: 15px;
}

.loading-scripts[b-ex2762zz0p] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.no-scripts-message[b-ex2762zz0p] {
    padding: 16px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.no-scripts-message i[b-ex2762zz0p] {
    font-size: 18px;
    color: #facc15;
}

.script-dropdown-container[b-ex2762zz0p] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.script-select-group[b-ex2762zz0p] {
    margin-bottom: 0;
}

.selected-script-details[b-ex2762zz0p] {
    margin-top: 5px;
}

.script-info-card[b-ex2762zz0p] {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    margin-top: 12px;
    transition: all 0.2s ease;
}

.script-info-header[b-ex2762zz0p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.script-title[b-ex2762zz0p] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

.script-badges[b-ex2762zz0p] {
    display: flex;
    gap: 8px;
}

.script-description[b-ex2762zz0p] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
    line-height: 1.5;
}

.script-actions[b-ex2762zz0p] {
    display: flex;
    justify-content: flex-end;
}

.os-badge[b-ex2762zz0p] {
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
}

.provision-badge[b-ex2762zz0p] {
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(80, 70, 229, 0.2);
    color: rgba(99, 102, 241, 0.9);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-script-btn[b-ex2762zz0p] {
    padding: 6px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.view-script-btn:hover[b-ex2762zz0p] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Script Details Modal */
.script-detail-modal .modal-content[b-ex2762zz0p] {
    max-width: 800px;
}

.script-info-section[b-ex2762zz0p] {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.script-meta[b-ex2762zz0p] {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.meta-item[b-ex2762zz0p] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-label[b-ex2762zz0p] {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.meta-value[b-ex2762zz0p] {
    color: white;
}

.script-full-description h5[b-ex2762zz0p],
.script-content-section h5[b-ex2762zz0p] {
    font-size: 16px;
    margin-bottom: 10px;
    color: white;
}

.script-full-description p[b-ex2762zz0p] {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.script-content-section[b-ex2762zz0p] {
    padding: 16px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.script-version-info[b-ex2762zz0p] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.version-number[b-ex2762zz0p] {
    font-weight: 500;
    color: white;
}

.version-status[b-ex2762zz0p] {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.status-active[b-ex2762zz0p] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-draft[b-ex2762zz0p] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-deprecated[b-ex2762zz0p] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-default[b-ex2762zz0p] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.script-code-block[b-ex2762zz0p] {
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.script-code[b-ex2762zz0p] {
    margin: 0;
    padding: 12px;
    background: rgba(15, 23, 42, 0.8);
    color: rgba(255, 255, 255, 0.9);
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    max-height: 350px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.script-execution-info[b-ex2762zz0p] {
    display: flex;
    gap: 20px;
    margin-top: 12px;
}

.execution-item[b-ex2762zz0p] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.execution-label[b-ex2762zz0p] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.execution-value[b-ex2762zz0p] {
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.no-content-message[b-ex2762zz0p] {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.no-content-message i[b-ex2762zz0p] {
    font-size: 20px;
    margin-right: 8px;
    color: #facc15;
}

.text-success[b-ex2762zz0p] {
    color: #10b981;
}

.text-muted[b-ex2762zz0p] {
    color: rgba(255, 255, 255, 0.5);
}

/* Wallet Balance Section */
.pricing-summary[b-ex2762zz0p] {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-summary.loading[b-ex2762zz0p] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    font-style: italic;
    color: var(--bs-gray-400);
}

.wallet-balance-row[b-ex2762zz0p] {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

.pricing-footer[b-ex2762zz0p] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    color: var(--bs-gray-300);
}

.balance-ok[b-ex2762zz0p] {
    color: #10b981;
}

.balance-low[b-ex2762zz0p] {
    color: #ef4444;
}

.insufficient-funds-alert[b-ex2762zz0p] {
    margin-top: 15px;
    padding: 12px;
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
    border-radius: 4px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.insufficient-funds-alert i[b-ex2762zz0p] {
    font-size: 1.2rem;
    color: #ef4444;
    margin-top: 3px;
}

.insufficient-funds-alert strong[b-ex2762zz0p] {
    display: block;
    margin-bottom: 4px;
}

.insufficient-funds-alert p[b-ex2762zz0p] {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.add-funds-button[b-ex2762zz0p] {
    margin-top: 10px;
    width: 100%;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .form-row[b-ex2762zz0p] {
        flex-direction: column;
    }
    
    .col-6[b-ex2762zz0p] {
        width: 100%;
        padding: 0;
    }
    
    .modal-content[b-ex2762zz0p] {
        padding: 16px;
        width: 100%;
        margin: 10px 0;
    }
    
    .pricing-header[b-ex2762zz0p] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .server-info-row[b-ex2762zz0p] {
        flex-direction: column;
        gap: 4px;
    }
    
    .server-info-value[b-ex2762zz0p] {
        padding-left: 26px;
    }
    
    .script-meta[b-ex2762zz0p] {
        flex-direction: column;
        gap: 10px;
    }
    
    .script-execution-info[b-ex2762zz0p] {
        flex-direction: column;
        gap: 10px;
    }
    
    .wallet-balance-row[b-ex2762zz0p],
    .pricing-footer[b-ex2762zz0p] {
        flex-direction: column;
        gap: 4px;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/ComputeMarketplaceElements/SearchFilters.razor.rz.scp.css */
/* Search container layout */
.search-container[b-oo8zaklmwc] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    margin-bottom: 24px;
}

/* Search box styling */
.search-box[b-oo8zaklmwc] {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.search-box:focus-within[b-oo8zaklmwc] {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.search-box input[b-oo8zaklmwc] {
    background: transparent;
    border: none;
    outline: none;
    flex-grow: 1;
    color: white;
    font-size: 14px;
}

.search-box input[b-oo8zaklmwc]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-icon[b-oo8zaklmwc] {
    color: rgba(255, 255, 255, 0.5);
    margin-right: 12px;
}

/* Filter dropdown styling */
.filter-dropdown[b-oo8zaklmwc] {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    color: white;
    font-size: 14px;
    min-width: 220px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.7)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-dropdown:focus[b-oo8zaklmwc] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .search-container[b-oo8zaklmwc] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/ComputeMarketplaceElements/SidebarFilters.razor.rz.scp.css */
/* Filter panel styling */
.filter-panel[b-uyawgryiva] {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    position: sticky;
    top: 24px;
    
    /* Add custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) rgba(15, 23, 42, 0.3);
}

/* Custom scrollbar for WebKit browsers */
.filter-panel[b-uyawgryiva]::-webkit-scrollbar {
    width: 6px;
}

.filter-panel[b-uyawgryiva]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 3px;
}

.filter-panel[b-uyawgryiva]::-webkit-scrollbar-thumb {
    background-color: rgba(99, 102, 241, 0.3);
    border-radius: 3px;
}

.filter-panel[b-uyawgryiva]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(99, 102, 241, 0.5);
}

.filter-section[b-uyawgryiva] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.filter-section:last-child[b-uyawgryiva] {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.filter-title[b-uyawgryiva] {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-reset[b-uyawgryiva] {
    font-size: 11px;
    color: var(--primary);
    cursor: pointer;
}

.filter-reset:hover[b-uyawgryiva] {
    text-decoration: underline;
}

/* Checkboxes */
.checkbox-group[b-uyawgryiva] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-item[b-uyawgryiva] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-input[b-uyawgryiva] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(15, 23, 42, 0.6);
    margin-right: 10px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.checkbox-input.checked[b-uyawgryiva] {
    background-color: var(--primary);
    border-color: var(--primary);
}

.checkbox-input.checked[b-uyawgryiva]:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label[b-uyawgryiva] {
    font-size: 14px;
    user-select: none;
}

/* Range slider */
.range-slider[b-uyawgryiva] {
    width: 100%;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    margin: 10px 0;
}

.range-slider[b-uyawgryiva]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.range-slider[b-uyawgryiva]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
}

.range-values[b-uyawgryiva] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Dual range input styles */
.dual-range-container[b-uyawgryiva] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
}

.range-input-group[b-uyawgryiva] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.range-input-group label[b-uyawgryiva] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 30px;
}

.range-number-input[b-uyawgryiva] {
    width: 70px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 6px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    transition: all 0.2s ease;
    -moz-appearance: textfield; /* Firefox */
}

.range-number-input:focus[b-uyawgryiva] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Hide the default spinner buttons */
.range-number-input[b-uyawgryiva]::-webkit-outer-spin-button,
.range-number-input[b-uyawgryiva]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Custom styled number input with spinner buttons */
.number-input-wrapper[b-uyawgryiva] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.number-input-controls[b-uyawgryiva] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.number-control-button[b-uyawgryiva] {
    flex: 1;
    background: rgba(15, 23, 42, 0.8);
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
}

.number-control-button:first-child[b-uyawgryiva] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.number-control-button:hover[b-uyawgryiva] {
    background: rgba(99, 102, 241, 0.2);
    color: white;
}

.number-control-button:active[b-uyawgryiva] {
    background: rgba(99, 102, 241, 0.3);
}

/* Price input specifics */
.price-input[b-uyawgryiva] {
    position: relative;
}

.price-input input[b-uyawgryiva] {
    padding-left: 20px;
}

.unit[b-uyawgryiva] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Dropdown styling */
.filter-dropdown[b-uyawgryiva] {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.7)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.filter-dropdown:focus[b-uyawgryiva] {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
}

/* Tooltip */
.tooltip[b-uyawgryiva] {
    position: relative;
    display: inline-block;
}

.tooltip-icon[b-uyawgryiva] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-left: 6px;
    cursor: help;
}

.tooltip-text[b-uyawgryiva] {
    visibility: hidden;
    width: 220px;
    background-color: rgba(15, 23, 42, 0.95);
    color: white;
    text-align: left;
    border-radius: 8px;
    padding: 10px 12px;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.tooltip-text[b-uyawgryiva]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
}

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

/* Loading indicator */
.loading-indicator[b-uyawgryiva] {
    padding: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.no-data[b-uyawgryiva] {
    padding: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
/* _content/WebUI/Components/UI/CustomerElements/DynamicFilters.razor.rz.scp.css */
.icon-button[b-fx4gw1jywc] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    /* Optionally, set a fixed size */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button .material-icons[b-fx4gw1jywc] {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.dynamic-filters[b-fx4gw1jywc] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Make each child only take up as much width as needed so they can wrap */
.dynamic-filters > *[b-fx4gw1jywc] {
    flex: 0 1 auto;
}

/* Optionally, if you want some spacing inside the active filters container */
.active-filters[b-fx4gw1jywc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-item[b-fx4gw1jywc] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius, 8px);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.filter-item label[b-fx4gw1jywc] {
    margin-bottom: 0.25rem;
    font-weight: bold;
    color: #ddd;
}
.filter-item select[b-fx4gw1jywc],
.filter-item input[b-fx4gw1jywc] {
    height: 40px;
    padding: 8px;
    border: none;
    border-radius: var(--border-radius, 8px);
    background: rgba(255, 255, 255, 0.2);
    color: #ddd;
}
.filter-item button.remove[b-fx4gw1jywc] {
    margin-top: 0.5rem;
    background: transparent;
    border: none;
    color: #ff6666;
    cursor: pointer;
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceElements/InstanceCardView.razor.rz.scp.css */
.instances-cards-container[b-2i8jljx5zq] {
    width: 100%;
}

/* Instance Cards Grid */
.instance-cards[b-2i8jljx5zq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

/* Instance Card */
.instance-card[b-2i8jljx5zq] {
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.instance-card:hover[b-2i8jljx5zq] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Instance Header */
.instance-header[b-2i8jljx5zq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.instance-header-left[b-2i8jljx5zq] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.instance-icon[b-2i8jljx5zq] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba(99, 102, 241, 0.15);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.instance-name[b-2i8jljx5zq] {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin: 0 0 4px 0;
}

.instance-id[b-2i8jljx5zq] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

/* Status Badges */
.instance-status[b-2i8jljx5zq] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-left: auto;
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.status-running[b-2i8jljx5zq] {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: rgb(16, 185, 129) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.status-stopped[b-2i8jljx5zq] {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: rgb(239, 68, 68) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.status-starting[b-2i8jljx5zq], .status-stopping[b-2i8jljx5zq] {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: rgb(245, 158, 11) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.status-error[b-2i8jljx5zq] {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: rgb(239, 68, 68) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.status-deleted[b-2i8jljx5zq], .status-deleting[b-2i8jljx5zq] {
    background-color: rgba(107, 114, 128, 0.1) !important;
    color: rgb(107, 114, 128) !important;
    border: 1px solid rgba(107, 114, 128, 0.2) !important;
}

.status-default[b-2i8jljx5zq] {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* Instance Details */
.instance-details[b-2i8jljx5zq] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 0;
    padding: 16px 20px;
    flex-grow: 1;
}

.detail-item[b-2i8jljx5zq] {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-label[b-2i8jljx5zq] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.detail-value[b-2i8jljx5zq] {
    font-size: 14px;
    color: white;
}

/* Instance Footer */
.instance-footer[b-2i8jljx5zq] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(15, 23, 42, 0.3);
}

.instance-actions[b-2i8jljx5zq] {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.action-icon[b-2i8jljx5zq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-icon:hover[b-2i8jljx5zq] {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.action-icon:disabled[b-2i8jljx5zq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-icon.primary[b-2i8jljx5zq] {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border-color: rgba(99, 102, 241, 0.2);
}

.action-icon.primary:hover[b-2i8jljx5zq] {
    background-color: rgba(99, 102, 241, 0.15);
}

.action-icon.success[b-2i8jljx5zq] {
    background-color: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
    border-color: rgba(16, 185, 129, 0.2);
}

.action-icon.success:hover[b-2i8jljx5zq] {
    background-color: rgba(16, 185, 129, 0.15);
}

.action-icon.warning[b-2i8jljx5zq] {
    background-color: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
    border-color: rgba(245, 158, 11, 0.2);
}

.action-icon.warning:hover[b-2i8jljx5zq] {
    background-color: rgba(245, 158, 11, 0.15);
}

.action-icon.danger[b-2i8jljx5zq] {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
    border-color: rgba(239, 68, 68, 0.2);
}

.action-icon.danger:hover[b-2i8jljx5zq] {
    background-color: rgba(239, 68, 68, 0.15);
}

.view-details-button[b-2i8jljx5zq] {
    padding: 10px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.view-details-button:hover[b-2i8jljx5zq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Loading and Empty States */
.loading-container[b-2i8jljx5zq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
}

.empty-state[b-2i8jljx5zq] {
    text-align: center;
    background-color: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 40px;
    margin: 0 auto;
    max-width: 600px;
}

.empty-icon[b-2i8jljx5zq] {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-title[b-2i8jljx5zq] {
    font-size: 20px;
    margin-bottom: 12px;
    color: white;
}

.empty-description[b-2i8jljx5zq] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
}

.action-button[b-2i8jljx5zq] {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.primary-button[b-2i8jljx5zq] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.primary-button:hover[b-2i8jljx5zq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.25);
}

.button-icon[b-2i8jljx5zq] {
    margin-right: 8px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .instance-cards[b-2i8jljx5zq] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .instance-cards[b-2i8jljx5zq] {
        grid-template-columns: 1fr;
    }
    
    .instance-header[b-2i8jljx5zq] {
        flex-direction: column;
        gap: 12px;
    }
    
    .instance-status[b-2i8jljx5zq] {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .detail-item[b-2i8jljx5zq] {
        flex: 1 1 100%;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceElements/InstanceDetails.razor.rz.scp.css */
/* Instance details panel */
.instance-details-panel[b-mij3ycxfi3] {
    background-color: rgba(15, 23, 42, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    animation: slideDown-b-mij3ycxfi3 0.3s ease-out forwards;
    overflow: hidden;
    width: 100%;
}

@keyframes slideDown-b-mij3ycxfi3 {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        max-height: 2000px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accordion Styles */
.accordion[b-mij3ycxfi3] {
    margin-bottom: 16px;
}

.accordion-item[b-mij3ycxfi3] {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.accordion-header[b-mij3ycxfi3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.accordion-header:hover[b-mij3ycxfi3] {
    background: rgba(15, 23, 42, 0.9);
}

.accordion-title[b-mij3ycxfi3] {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.accordion-icon[b-mij3ycxfi3] {
    font-size: 18px;
    transition: transform 0.3s;
}

.accordion-icon.expanded[b-mij3ycxfi3] {
    transform: rotate(180deg);
}

.accordion-content[b-mij3ycxfi3] {
    display: none;
    padding: 16px;
    background: rgba(15, 23, 42, 0.3);
}

.accordion-content.expanded[b-mij3ycxfi3] {
    display: block;
}

/* Details horizontal grid styling */
.details-grid-horizontal[b-mij3ycxfi3] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.detail-item[b-mij3ycxfi3] {
    flex: 1 1 200px;
    min-width: 200px;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.description-item[b-mij3ycxfi3] {
    flex: 1 1 100%;
}

.detail-label[b-mij3ycxfi3] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.detail-value[b-mij3ycxfi3] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

/* Legacy Details table styling (keep for backwards compatibility) */
.details-table[b-mij3ycxfi3] {
    width: 100%;
    margin-bottom: 16px;
}

.detail-row[b-mij3ycxfi3] {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px 0;
}

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

.status-badge[b-mij3ycxfi3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

/* Time progress */
.time-progress[b-mij3ycxfi3] {
    margin-bottom: 16px;
}

.progress-header[b-mij3ycxfi3] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.progress-label[b-mij3ycxfi3] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.progress-time[b-mij3ycxfi3] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

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

.progress-fill[b-mij3ycxfi3] {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    animation: progressAnimate-b-mij3ycxfi3 1s ease-out;
    background-image: linear-gradient(45deg, 
                      rgba(255,255,255,.15) 25%, 
                      transparent 25%, 
                      transparent 50%, 
                      rgba(255,255,255,.15) 50%, 
                      rgba(255,255,255,.15) 75%, 
                      transparent 75%, 
                      transparent);
    background-size: 20px 20px;
}

@keyframes progressAnimate-b-mij3ycxfi3 {
    from {
        width: 0;
    }
}

/* Detail cost info */
.detail-cost-info[b-mij3ycxfi3] {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

/* Cost information */
.cost-info[b-mij3ycxfi3] {
    display: flex;
    flex-direction: column;
}

.cost-label[b-mij3ycxfi3] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.cost-value[b-mij3ycxfi3] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.cost-rate[b-mij3ycxfi3] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* Endpoint Section */
.endpoints-list[b-mij3ycxfi3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.endpoint-item[b-mij3ycxfi3] {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.endpoint-url[b-mij3ycxfi3] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 12px;
    font-family: 'Courier New', monospace;
    margin-bottom: 12px;
}

.endpoint-url a[b-mij3ycxfi3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 14px;
}

.endpoint-url a:hover[b-mij3ycxfi3] {
    color: var(--primary);
}

.endpoint-details[b-mij3ycxfi3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.endpoint-detail[b-mij3ycxfi3] {
    display: flex;
    flex-direction: column;
}

.endpoint-detail label[b-mij3ycxfi3] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.endpoint-detail span[b-mij3ycxfi3] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.no-endpoints[b-mij3ycxfi3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.no-endpoints i[b-mij3ycxfi3] {
    font-size: 24px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* SSH Section */
.ssh-instructions[b-mij3ycxfi3] {
    padding: 0 12px;
}

.ssh-note[b-mij3ycxfi3] {
    margin-bottom: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.code-block[b-mij3ycxfi3] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
}

.ssh-command[b-mij3ycxfi3] {
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
}

.ssh-command pre[b-mij3ycxfi3] {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow-x: auto;
}

.code-block code[b-mij3ycxfi3] {
    overflow-x: auto;
    white-space: nowrap;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    display: inline;
    margin: 0;
    padding: 0;
}

.copy-button[b-mij3ycxfi3] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 4px;
}

.copy-button:hover[b-mij3ycxfi3] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.ssh-tips[b-mij3ycxfi3] {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    padding: 16px;
}

.ssh-tips h4[b-mij3ycxfi3] {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.ssh-tips ul[b-mij3ycxfi3] {
    margin: 0;
    padding-left: 20px;
}

.ssh-tips li[b-mij3ycxfi3] {
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.ssh-tips code[b-mij3ycxfi3] {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--primary);
}

/* Alert Section */
.alerts-container[b-mij3ycxfi3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-item[b-mij3ycxfi3] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 12px;
    border-radius: 8px;
}

.alert-item.error[b-mij3ycxfi3] {
    background: rgba(239, 68, 68, 0.15);
}

.alert-item.warning[b-mij3ycxfi3] {
    background: rgba(245, 158, 11, 0.15);
}

.alert-icon[b-mij3ycxfi3] {
    margin-right: 12px;
    font-size: 16px;
}

.alert-item.error .alert-icon[b-mij3ycxfi3] {
    color: #ef4444;
}

.alert-item.warning .alert-icon[b-mij3ycxfi3] {
    color: #f59e0b;
}

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

.alert-message[b-mij3ycxfi3] {
    font-size: 14px;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.9);
}

.alert-time[b-mij3ycxfi3] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.alert-actions[b-mij3ycxfi3] {
    margin-left: 8px;
}

.btn-icon[b-mij3ycxfi3] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover[b-mij3ycxfi3] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Actions Section */
.actions-container[b-mij3ycxfi3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.action-button[b-mij3ycxfi3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    gap: 8px;
}

.action-button:hover[b-mij3ycxfi3] {
    background: rgba(99, 102, 241, 0.2);
}

.action-button.danger[b-mij3ycxfi3] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.action-button.danger:hover[b-mij3ycxfi3] {
    background: rgba(239, 68, 68, 0.2);
}

.action-button:disabled[b-mij3ycxfi3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-button:disabled:hover[b-mij3ycxfi3] {
    background: rgba(99, 102, 241, 0.1);
}

.action-button.danger:disabled:hover[b-mij3ycxfi3] {
    background: rgba(239, 68, 68, 0.1);
}

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

@keyframes spin-b-mij3ycxfi3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceElements/InstanceDetailsModal.razor.rz.scp.css */
.modal[b-d3nficxj6a] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.modal.visible[b-d3nficxj6a] {
    display: block;
}

.modal-overlay[b-d3nficxj6a] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1001;
}

.modal-container[b-d3nficxj6a] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 850px; /* Slightly wider */
    max-height: 90vh;
    background-color: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 1002;
    display: flex;
    flex-direction: column;
}

.modal-header[b-d3nficxj6a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(15, 23, 42, 1);
}

.modal-title[b-d3nficxj6a] {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.instance-icon[b-d3nficxj6a] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: rgba(99, 102, 241, 0.15);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.modal-close[b-d3nficxj6a] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    transition: color 0.2s;
}

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

.modal-body[b-d3nficxj6a] {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 150px); /* Increased height for better scrolling */
    display: flex;
    flex-direction: column;
    gap: 24px;
    
    /* Better scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) rgba(15, 23, 42, 0.3);
}

/* Custom scrollbar for WebKit browsers */
.modal-body[b-d3nficxj6a]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-d3nficxj6a]::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 3px;
}

.modal-body[b-d3nficxj6a]::-webkit-scrollbar-thumb {
    background-color: rgba(99, 102, 241, 0.3);
    border-radius: 3px;
}

.modal-body[b-d3nficxj6a]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(99, 102, 241, 0.5);
}

.details-section[b-d3nficxj6a] {
    background-color: rgba(30, 41, 59, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.section-header[b-d3nficxj6a] {
    background-color: rgba(15, 23, 42, 0.5);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.section-header h4[b-d3nficxj6a] {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: white;
}

.details-grid[b-d3nficxj6a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 16px;
}

.detail-item[b-d3nficxj6a] {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.detail-label[b-d3nficxj6a] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.detail-value[b-d3nficxj6a] {
    font-size: 14px;
    color: white;
    word-break: break-word;
}

/* Status badges */
.status-badge[b-d3nficxj6a] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.status-running[b-d3nficxj6a] {
    background-color: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-stopped[b-d3nficxj6a] {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-starting[b-d3nficxj6a], .status-stopping[b-d3nficxj6a] {
    background-color: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-error[b-d3nficxj6a] {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-deleted[b-d3nficxj6a] {
    background-color: rgba(107, 114, 128, 0.1);
    color: rgb(107, 114, 128);
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.status-default[b-d3nficxj6a] {
    background-color: rgba(99, 102, 241, 0.1);
    color: rgb(99, 102, 241);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Connection details */
.connection-details[b-d3nficxj6a] {
    padding: 16px;
}

.connection-command[b-d3nficxj6a] {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 12px;
    font-family: monospace;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.connection-command code[b-d3nficxj6a] {
    color: rgb(139, 233, 253);
    font-size: 14px;
}

.copy-button[b-d3nficxj6a] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px 8px;
}

.copy-button:hover[b-d3nficxj6a] {
    color: white;
}

.connection-note[b-d3nficxj6a] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 8px;
}

.no-connection[b-d3nficxj6a] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    padding: 12px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Endpoints */
.endpoints-list[b-d3nficxj6a] {
    padding: 16px;
}

.endpoints-grid[b-d3nficxj6a] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.endpoint-item[b-d3nficxj6a] {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.endpoint-name[b-d3nficxj6a] {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.endpoint-url[b-d3nficxj6a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    word-break: break-all;
}

.endpoint-url a[b-d3nficxj6a] {
    color: var(--primary);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.endpoint-url a:hover[b-d3nficxj6a] {
    color: var(--primary-light);
    text-decoration: underline;
}

.no-endpoints[b-d3nficxj6a] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    padding: 12px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Modal footer */
.modal-footer[b-d3nficxj6a] {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(15, 23, 42, 0.8);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.instance-actions[b-d3nficxj6a] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.action-button[b-d3nficxj6a] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    gap: 8px;
}

.action-button.primary[b-d3nficxj6a] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.action-button.success[b-d3nficxj6a] {
    background-color: rgba(16, 185, 129, 0.1);
    color: rgb(16, 185, 129);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.action-button.success:hover[b-d3nficxj6a] {
    background-color: rgba(16, 185, 129, 0.2);
}

.action-button.warning[b-d3nficxj6a] {
    background-color: rgba(245, 158, 11, 0.1);
    color: rgb(245, 158, 11);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.action-button.warning:hover[b-d3nficxj6a] {
    background-color: rgba(245, 158, 11, 0.2);
}

.action-button.danger[b-d3nficxj6a] {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.action-button.danger:hover[b-d3nficxj6a] {
    background-color: rgba(239, 68, 68, 0.2);
}

.action-button.secondary[b-d3nficxj6a] {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-button.secondary:hover[b-d3nficxj6a] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Loading container */
.loading-container[b-d3nficxj6a] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-container[b-d3nficxj6a] {
        width: 95%;
        max-height: 95vh; /* More height on mobile */
    }
    
    .modal-body[b-d3nficxj6a] {
        max-height: calc(95vh - 150px); /* Adjust for mobile */
        padding: 16px; /* Slightly less padding on mobile */
    }
    
    .details-grid[b-d3nficxj6a] {
        grid-template-columns: 1fr;
        gap: 12px; /* Smaller gap on mobile */
    }
    
    .instance-actions[b-d3nficxj6a] {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .action-button[b-d3nficxj6a] {
        flex: 1 1 auto;
        padding: 10px 12px; /* Larger touch target */
        font-size: 13px; /* Slightly smaller text */
    }
    
    .detail-item[b-d3nficxj6a] {
        padding: 10px; /* Less padding in detail items */
    }
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceElements/InstanceFilters.razor.rz.scp.css */
/* Filter controls */
.filter-controls[b-q5d5tay2bo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    padding: 16px;
}

.filter-control[b-q5d5tay2bo] {
    display: flex;
    flex-direction: column;
}

.filter-label[b-q5d5tay2bo] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.filter-input[b-q5d5tay2bo] {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 14px;
}

.filter-input[b-q5d5tay2bo]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceElements/InstanceHeader.razor.rz.scp.css */
/* Instance header actions */
.instance-header-actions[b-xbrhqjo6ye] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
}

.action-button[b-xbrhqjo6ye] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.primary-button[b-xbrhqjo6ye] {
    background-color: var(--primary);
    color: white;
}

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

.button-icon[b-xbrhqjo6ye] {
    margin-right: 8px;
}

.header-actions[b-xbrhqjo6ye] {
    display: flex;
    gap: 12px;
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceElements/InstanceList.razor.rz.scp.css */
/* Instance List Items */
.instances-list-container[b-5hj8bk4age] {
    width: 100%;
}

.instance-list[b-5hj8bk4age] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.instance-card[b-5hj8bk4age] {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.instance-card:hover[b-5hj8bk4age] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

.instance-card.expanded[b-5hj8bk4age] {
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
    background-color: rgba(15, 23, 42, 0.6);
    transform: none;
}

.instance-card-header[b-5hj8bk4age] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    cursor: pointer;
    position: relative;
    width: 100%;
}

/* Status colors and indicators */
.status-running[b-5hj8bk4age] {
    color: #10B981;
}

.status-warning[b-5hj8bk4age] {
    color: #f59e0b;
}

.status-error[b-5hj8bk4age] {
    color: #ef4444;
}

.status-unknown[b-5hj8bk4age] {
    color: rgba(255, 255, 255, 0.5);
}

.status-running-icon[b-5hj8bk4age] {
    color: #10B981;
}

.status-warning-icon[b-5hj8bk4age] {
    color: #f59e0b;
}

.status-error-icon[b-5hj8bk4age] {
    color: #ef4444;
}

.status-unknown-icon[b-5hj8bk4age] {
    color: rgba(255, 255, 255, 0.5);
}

.instance-list-status[b-5hj8bk4age] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
}

.status-indicator[b-5hj8bk4age] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: pulse-b-5hj8bk4age 2s infinite;
}

.status-running[b-5hj8bk4age] {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.status-warning[b-5hj8bk4age] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-error[b-5hj8bk4age] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-starting[b-5hj8bk4age], .status-restarting[b-5hj8bk4age] {
    background: rgba(79, 70, 229, 0.15);
    color: #4f46e5;
}

.status-stopping[b-5hj8bk4age] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-stopped[b-5hj8bk4age] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.status-indicator.status-running[b-5hj8bk4age] {
    background-color: #10B981;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
}

.status-indicator.status-warning[b-5hj8bk4age] {
    background-color: #f59e0b;
    box-shadow: 0 0 0 rgba(245, 158, 11, 0.4);
}

.status-indicator.status-error[b-5hj8bk4age] {
    background-color: #ef4444;
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.4);
}

.status-indicator.status-starting[b-5hj8bk4age], .status-indicator.status-restarting[b-5hj8bk4age] {
    background-color: #4f46e5;
    box-shadow: 0 0 0 rgba(79, 70, 229, 0.4);
}

.status-indicator.status-stopping[b-5hj8bk4age] {
    background-color: #f59e0b;
    box-shadow: 0 0 0 rgba(245, 158, 11, 0.4);
}

.status-indicator.status-stopped[b-5hj8bk4age] {
    background-color: #6b7280;
    box-shadow: 0 0 0 rgba(107, 114, 128, 0.4);
    animation: none;
}

@keyframes pulse-b-5hj8bk4age {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Instance badges */
.instance-list-badges[b-5hj8bk4age] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.instance-badge[b-5hj8bk4age], .instance-type-badge[b-5hj8bk4age], .instance-location-badge[b-5hj8bk4age] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.instance-badge[b-5hj8bk4age] {
    background: rgba(91, 33, 182, 0.3);
    color: #c4b5fd;
}

.instance-type-badge[b-5hj8bk4age] {
    background: rgba(6, 182, 212, 0.2);
    color: var(--primary);
}

.instance-location-badge[b-5hj8bk4age] {
    background: rgba(15, 23, 42, 0.6);
    color: rgba(255, 255, 255, 0.8);
}

/* Header and content */
.instance-header[b-5hj8bk4age] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.instance-header-left[b-5hj8bk4age] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.instance-header-right[b-5hj8bk4age] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-width: 250px;
}

.status-and-buttons[b-5hj8bk4age] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.status-alerts-group[b-5hj8bk4age] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.instance-icon[b-5hj8bk4age] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 16px;
}

.instance-list-name[b-5hj8bk4age] {
    display: flex;
    align-items: flex-start;
    flex: 1;
}

.instance-details-container[b-5hj8bk4age] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.instance-header-first-line[b-5hj8bk4age] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.instance-name[b-5hj8bk4age] {
    font-size: 18px;
    margin: 0;
}

.instance-id[b-5hj8bk4age] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.server-id[b-5hj8bk4age] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.specs-inline[b-5hj8bk4age] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spec-item-inline[b-5hj8bk4age] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.instance-list-alerts[b-5hj8bk4age] {
    color: #f59e0b;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.expand-toggle[b-5hj8bk4age] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    transition: all 0.2s;
}

.expand-toggle:hover[b-5hj8bk4age] {
    color: white;
}

/* Instance Overview Section */
.instance-overview-section[b-5hj8bk4age] {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(15, 23, 42, 0.3);
}

.overview-flex[b-5hj8bk4age] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.overview-server-info[b-5hj8bk4age] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.server-name[b-5hj8bk4age] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.specs-list[b-5hj8bk4age] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.spec-item[b-5hj8bk4age] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 6px;
    border-radius: 4px;
}

/* Action Buttons */
.actions-row[b-5hj8bk4age] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.instance-action-button[b-5hj8bk4age] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.instance-action-button i[b-5hj8bk4age] {
    margin: 0;
}

.instance-action-button:hover[b-5hj8bk4age] {
    background: rgba(99, 102, 241, 0.2);
}

.instance-action-button.danger[b-5hj8bk4age] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.instance-action-button.danger:hover[b-5hj8bk4age] {
    background: rgba(239, 68, 68, 0.2);
}

.instance-action-button:disabled[b-5hj8bk4age] {
    opacity: 0.4;
    cursor: not-allowed;
}

.instance-action-button:disabled:hover[b-5hj8bk4age] {
    background: rgba(99, 102, 241, 0.1);
}

.instance-action-button.danger:disabled:hover[b-5hj8bk4age] {
    background: rgba(239, 68, 68, 0.1);
}

/* Empty state */
.empty-state[b-5hj8bk4age] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    margin-bottom: 24px;
    text-align: center;
}

.empty-icon[b-5hj8bk4age] {
    font-size: 36px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.3);
}

.empty-title[b-5hj8bk4age] {
    font-size: 20px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.empty-description[b-5hj8bk4age] {
    color: rgba(255, 255, 255, 0.6);
    max-width: 400px;
    margin-bottom: 16px;
}

/* Loading container */
.loading-container[b-5hj8bk4age] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    margin-bottom: 24px;
}

/* Expanded details styles */
.instance-expanded-details[b-5hj8bk4age] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: rgba(15, 23, 42, 0.3);
}

.instance-expanded-details :deep(.instance-details-panel)[b-5hj8bk4age] {
    padding: 0;
    margin: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceElements/InstanceStats.razor.rz.scp.css */
/* Stats cards */
.stats-cards[b-01957qvnui] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.stat-card[b-01957qvnui] {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.stat-icon[b-01957qvnui] {
    background: rgba(6, 182, 212, 0.2);
    color: var(--primary);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
}

.stat-title[b-01957qvnui] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.stat-value[b-01957qvnui] {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.stat-subtitle[b-01957qvnui] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceElements/ViewToggle.razor.rz.scp.css */
.view-toggle-container[b-7813n8o8ho] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.view-toggle[b-7813n8o8ho] {
    display: flex;
    background-color: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.view-toggle-button[b-7813n8o8ho] {
    background: none;
    border: none;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-button:hover[b-7813n8o8ho] {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.05);
}

.view-toggle-button.active[b-7813n8o8ho] {
    background-color: var(--primary);
    color: white;
}

@media (max-width: 768px) {
    .view-toggle-container[b-7813n8o8ho] {
        justify-content: center;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/InstanceMetricsChart.razor.rz.scp.css */
.metrics-chart-container[b-513yo8agfu] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 16px;
    margin-bottom: 20px;
}

.metrics-chart-container h3[b-513yo8agfu] {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 18px;
    color: #333;
}

.chart-wrapper[b-513yo8agfu] {
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
}

.chart-controls[b-513yo8agfu] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.metric-selector[b-513yo8agfu], .time-range-selector[b-513yo8agfu] {
    display: flex;
    align-items: center;
}

.metric-selector label[b-513yo8agfu], .time-range-selector label[b-513yo8agfu] {
    margin-right: 8px;
    font-weight: 500;
}

.chart-canvas-container[b-513yo8agfu] {
    flex-grow: 1;
    position: relative;
    min-height: 300px;
}

.loading-spinner[b-513yo8agfu], .error-message[b-513yo8agfu], .no-data-message[b-513yo8agfu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
}

.spinner[b-513yo8agfu] {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 30px;
    height: 30px;
    animation: spin-b-513yo8agfu 1s linear infinite;
    margin-bottom: 16px;
}

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

.error-message[b-513yo8agfu] {
    color: #e74c3c;
}

.no-data-message[b-513yo8agfu] {
    color: #7f8c8d;
}

select[b-513yo8agfu] {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-size: 14px;
}
/* _content/WebUI/Components/UI/CustomerElements/ManagementElements/MyAccountModal.razor.rz.scp.css */
/* Only include custom styles that are not in consumer.css */

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

.modal-overlay.modal-visible[b-t8yxqdbcbw] {
    opacity: 1;
    visibility: visible;
}

/* Override modal background color to match the site */
.modal-content[b-t8yxqdbcbw] {
    background-color: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn-b-t8yxqdbcbw 0.3s ease;
}

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

/* Form hint */
.form-hint[b-t8yxqdbcbw] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
    font-style: italic;
}

/* This ensures the textarea has enough vertical space */
textarea.form-input[b-t8yxqdbcbw] {
    min-height: 120px;
    resize: vertical;
}
/* _content/WebUI/Components/UI/CustomerElements/SearchComputeFilter.razor.rz.scp.css */
.filter-controls[b-c58cdljces] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    margin:auto;
}
.filter-item[b-c58cdljces] {
    display: flex;
    flex-direction: column;
}
.filter-item label[b-c58cdljces] {
    margin-bottom: 4px;
    font-weight: bold;
}
.filter-item input[type="range"][b-c58cdljces] {
    margin-top: 4px;
}
/* Glassmorphism style for dropdowns and number inputs with lighter text */
.filter-item select[b-c58cdljces],
.filter-item input[type="number"][b-c58cdljces] {
    width: 150px;
    padding: 8px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--border-radius, 8px);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ddd; /* lighter text color */
}
/* _content/WebUI/Components/UI/CustomerElements/SupportTicketElements/TicketDetailModal.razor.rz.scp.css */
/* Ticket Detail Modal Styling */
.modal[b-x7j41egqbz] {
    width: 900px;
    max-width: 90%;
    max-height: 90vh;
}

.modal-body[b-x7j41egqbz] {
    padding: 0;
}

.modal-title[b-x7j41egqbz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.ticket-id[b-x7j41egqbz] {
    color: rgba(255, 255, 255, 0.6);
    margin-left: 8px;
    font-size: 14px;
    font-weight: normal;
}

.ticket-priority[b-x7j41egqbz] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.priority-high[b-x7j41egqbz] {
    background-color: #ef4444;
    box-shadow: 0 0 5px #ef4444;
}

.priority-medium[b-x7j41egqbz] {
    background-color: #f59e0b;
    box-shadow: 0 0 5px #f59e0b;
}

.priority-low[b-x7j41egqbz] {
    background-color: #6366F1;
    box-shadow: 0 0 5px #6366F1;
}

/* Grid Layout */
.two-column-grid[b-x7j41egqbz] {
    display: grid;
    grid-template-columns: 1fr 280px;
    height: 100%;
    max-height: calc(90vh - 120px);
}

@media (max-width: 768px) {
    .two-column-grid[b-x7j41egqbz] {
        grid-template-columns: 1fr;
    }
}

/* Conversation Container */
.conversation-container[b-x7j41egqbz] {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 120px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: rgba(15, 23, 42, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Date separator */
.date-separator[b-x7j41egqbz] {
    position: relative;
    text-align: center;
    margin: 20px 0;
    z-index: 1;
}

.date-separator span[b-x7j41egqbz] {
    background-color: rgba(15, 23, 42, 0.7);
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.date-separator[b-x7j41egqbz]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: -1;
}

/* Message status indicator */
.status-indicator[b-x7j41egqbz] {
    text-align: right;
    margin: 8px 0 16px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.status-indicator span[b-x7j41egqbz] {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-indicator i[b-x7j41egqbz] {
    color: #10B981;
}

/* Message Styling */
.message[b-x7j41egqbz] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
}

/* User message alignment (right side) */
.user-message[b-x7j41egqbz] {
    flex-direction: row-reverse;
}

.message-avatar[b-x7j41egqbz] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.message-avatar.user[b-x7j41egqbz] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
}

.message-avatar.support[b-x7j41egqbz] {
    background: linear-gradient(135deg, #10B981, #059669);
}

.message-content[b-x7j41egqbz] {
    position: relative;
    padding: 16px;
    border-radius: 12px;
    max-width: calc(100% - 60px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Style messages as bubbles */
.user-message .message-content[b-x7j41egqbz] {
    background-color: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 12px;
}

.support-message .message-content[b-x7j41egqbz] {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 4px;
}

/* Add speech bubble tail */
.user-message .message-content[b-x7j41egqbz]::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -8px;
    width: 16px;
    height: 16px;
    background-color: rgba(99, 102, 241, 0.1);
    border-right: 1px solid rgba(99, 102, 241, 0.2);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    transform: rotate(-45deg) translateY(8px);
    border-radius: 0 0 4px 0;
    z-index: -1;
}

.support-message .message-content[b-x7j41egqbz]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 16px;
    height: 16px;
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 1px solid rgba(16, 185, 129, 0.2);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    transform: rotate(45deg) translateY(8px);
    border-radius: 0 0 0 4px;
    z-index: -1;
}

/* Ensure proper display for the initial message (without the user-message class) */
.message:not(.user-message):not(.support-message) .message-avatar.user + .message-content[b-x7j41egqbz] {
    background-color: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 12px;
}

.message-header[b-x7j41egqbz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.message-sender[b-x7j41egqbz] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.message-time[b-x7j41egqbz] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 16px;
}

.message-text[b-x7j41egqbz] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.5;
}

/* Attachments */
.message-file[b-x7j41egqbz] {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    margin-top: 12px;
}

.file-icon[b-x7j41egqbz] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

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

.file-name[b-x7j41egqbz] {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.file-size[b-x7j41egqbz] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

/* Reply Box */
.reply-box[b-x7j41egqbz] {
    margin-top: auto;
    padding: 16px;
    background-color: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.reply-box textarea[b-x7j41egqbz] {
    width: 100%;
    min-height: 100px;
    resize: vertical;
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    color: white;
    font-family: inherit;
}

.reply-box textarea:focus[b-x7j41egqbz] {
    outline: none;
    border-color: #6366F1;
}

.reply-actions[b-x7j41egqbz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.attachment-button[b-x7j41egqbz] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.2s;
}

.attachment-button:hover[b-x7j41egqbz] {
    color: white;
}

.pending-attachments[b-x7j41egqbz] {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Ticket Sidebar */
.ticket-sidebar[b-x7j41egqbz] {
    background-color: rgba(15, 23, 42, 0.5);
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-section[b-x7j41egqbz] {
    margin-bottom: 24px;
}

.sidebar-section-title[b-x7j41egqbz] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-item[b-x7j41egqbz] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.detail-label[b-x7j41egqbz] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.detail-value[b-x7j41egqbz] {
    font-weight: 500;
    font-size: 14px;
}

.assignee[b-x7j41egqbz] {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px; /* Add margin to prevent overlap with connection status */
}

.assignee-avatar[b-x7j41egqbz] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.suggested-articles[b-x7j41egqbz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggested-article[b-x7j41egqbz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.suggested-article:hover[b-x7j41egqbz] {
    background-color: rgba(255, 255, 255, 0.1);
}

.article-icon[b-x7j41egqbz] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(99, 102, 241, 0.2);
    color: #6366F1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Make sure the modal container is properly styled for this specific modal */
#ticket-detail-modal.modal-overlay[b-x7j41egqbz] {
    justify-content: center;
    align-items: center;
    padding-top: 0;
}

/* Typing Indicator */
.typing-indicator[b-x7j41egqbz] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    animation: fadeIn-b-x7j41egqbz 0.3s ease-in;
}

.typing-bubble[b-x7j41egqbz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: rgba(99, 102, 241, 0.1);
    border-radius: 18px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.typing-text[b-x7j41egqbz] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.typing-dots[b-x7j41egqbz] {
    display: flex;
    gap: 3px;
    align-items: center;
}

.typing-dots .dot[b-x7j41egqbz] {
    width: 6px;
    height: 6px;
    background-color: rgba(99, 102, 241, 0.8);
    border-radius: 50%;
    animation: typingDot-b-x7j41egqbz 1.4s infinite;
}

.typing-dots .dot:nth-child(2)[b-x7j41egqbz] {
    animation-delay: 0.2s;
}

.typing-dots .dot:nth-child(3)[b-x7j41egqbz] {
    animation-delay: 0.4s;
}

@keyframes typingDot-b-x7j41egqbz {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

@keyframes fadeIn-b-x7j41egqbz {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Connection Status Indicator */
.connection-status[b-x7j41egqbz] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.connection-dot[b-x7j41egqbz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-b-x7j41egqbz 2s infinite;
}

.connection-dot.connected[b-x7j41egqbz] {
    background-color: #4ade80;
}

.connection-dot.disconnected[b-x7j41egqbz] {
    background-color: #ef4444;
    animation: none;
}

@keyframes pulse-b-x7j41egqbz {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Agent Connection Status */
.agent-connection-status[b-x7j41egqbz] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 200px;
}

.status-indicator[b-x7j41egqbz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    width: 100%;
}

.status-indicator.online[b-x7j41egqbz] {
    color: #10b981;
}

.status-indicator.offline[b-x7j41egqbz] {
    color: #f59e0b; /* Orange for offline */
}

.status-indicator i[b-x7j41egqbz] {
    font-size: 8px;
}

.status-indicator.online i[b-x7j41egqbz] {
    animation: pulse-b-x7j41egqbz 2s ease-in-out infinite;
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/AddCardModal.razor.rz.scp.css */
/* Modal customizations specific to AddCardModal */
.modal[b-hkg2epn3f6] {
    width: 500px; /* Set a specific width for this modal */
}

.payment-form[b-hkg2epn3f6] {
    margin-top: 10px;
}

/* Form Elements */
.form-group[b-hkg2epn3f6] {
    margin-bottom: 20px;
}

.form-group label[b-hkg2epn3f6] {
    display: block;
    font-size: 14px;
    color: #F8FAFC;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-control[b-hkg2epn3f6] {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #F8FAFC;
    font-size: 14px;
}

.form-control:focus[b-hkg2epn3f6] {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.card-number-field[b-hkg2epn3f6] {
    position: relative;
}

.card-type[b-hkg2epn3f6] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
}

.form-row[b-hkg2epn3f6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Stripe Card Element */
#card-element[b-hkg2epn3f6] {
    background-color: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    height: 46px;
    color: #F8FAFC;
}

#card-element.StripeElement--focus[b-hkg2epn3f6] {
    border-color: #6366F1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

#card-element.StripeElement--invalid[b-hkg2epn3f6] {
    border-color: #ef4444;
}

/* Checkbox styling */
.checkbox-item[b-hkg2epn3f6] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.checkbox-item input[type="checkbox"][b-hkg2epn3f6] {
    margin-right: 8px;
    accent-color: #6366F1;
    width: 16px;
    height: 16px;
}

.checkbox-item label[b-hkg2epn3f6] {
    font-size: 14px;
    color: #F8FAFC;
    cursor: pointer;
    display: inline;
    margin-bottom: 0;
}

/* Validation */
.validation-error[b-hkg2epn3f6] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
}

/* Button Styles */
.btn[b-hkg2epn3f6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.btn-primary[b-hkg2epn3f6] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
}

.btn-primary:hover[b-hkg2epn3f6] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-outline-secondary[b-hkg2epn3f6] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-outline-secondary:hover[b-hkg2epn3f6] {
    background: rgba(255, 255, 255, 0.15);
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/AddFundsModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-o88k17csp8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal[b-o88k17csp8] {
    background: #0f172a;
    border-radius: 12px;
    width: 500px;
    max-width: 90%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: modalAppear-b-o88k17csp8 0.3s ease;
    position: relative;
}

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

.modal-header[b-o88k17csp8] {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0F172A;
}

.modal-title[b-o88k17csp8] {
    font-size: 18px;
    font-weight: 600;
    color: #F8FAFC;
    margin: 0;
}

.modal-close[b-o88k17csp8] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
    line-height: 1;
}

.modal-close:hover[b-o88k17csp8] {
    background: rgba(255, 255, 255, 0.2);
    color: #F8FAFC;
}

.modal-body[b-o88k17csp8] {
    padding: 24px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    background-color: #0F172A;
}

.modal-footer[b-o88k17csp8] {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background-color: #0F172A;
}

/* Form Elements */
.form-group[b-o88k17csp8] {
    margin-bottom: 20px;
}

.form-label[b-o88k17csp8] {
    display: block;
    font-size: 14px;
    color: #F8FAFC;
    margin-bottom: 8px;
    font-weight: 500;
}

.input-group[b-o88k17csp8] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-o88k17csp8] {
    position: absolute;
    left: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.form-input[b-o88k17csp8] {
    width: 100%;
    padding: 10px 12px 10px 28px;
    background-color: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #F8FAFC;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-input:focus[b-o88k17csp8] {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

/* Button Styles */
.btn[b-o88k17csp8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.btn-primary[b-o88k17csp8] {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    color: white;
}

.btn-primary:hover[b-o88k17csp8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-outline[b-o88k17csp8] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-outline:hover[b-o88k17csp8] {
    background: rgba(255, 255, 255, 0.15);
}

.btn-icon[b-o88k17csp8] {
    margin-right: 8px;
}

/* Summary Section */
.summary-section[b-o88k17csp8] {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
}

.summary-row[b-o88k17csp8] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #F8FAFC;
}

.summary-row.total[b-o88k17csp8] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 600;
    font-size: 16px;
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/RecentTransactions.razor.rz.scp.css */
.dashboard-card[b-0tqpe8i0sx] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-card:hover[b-0tqpe8i0sx] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.flex-between[b-0tqpe8i0sx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.subtitle[b-0tqpe8i0sx] {
    font-size: 18px;
    font-weight: 600;
    color: #F8FAFC;
    margin: 0;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}

.subtitle[b-0tqpe8i0sx]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #6366F1, rgba(99, 102, 241, 0));
    border-radius: 2px;
}

.text-link[b-0tqpe8i0sx] {
    color: #6366F1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.text-link:hover[b-0tqpe8i0sx] {
    color: #4F46E5;
    text-decoration: underline;
}

.text-link[b-0tqpe8i0sx]::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 6px;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.text-link:hover[b-0tqpe8i0sx]::after {
    transform: translateX(3px);
}

/* Transaction Item Styling */
.transaction-item[b-0tqpe8i0sx] {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.2s ease;
    border-radius: 10px;
    margin-bottom: 4px;
    cursor: pointer;
}

.transaction-item:last-child[b-0tqpe8i0sx] {
    border-bottom: none;
    margin-bottom: 0;
}

.transaction-item[b-0tqpe8i0sx]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    border-radius: 8px;
}

.transaction-item:hover[b-0tqpe8i0sx]::before {
    transform: scaleX(1);
}

.transaction-icon[b-0tqpe8i0sx] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.transaction-icon[b-0tqpe8i0sx]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.transaction-icon.credit[b-0tqpe8i0sx] {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.transaction-icon.debit[b-0tqpe8i0sx] {
    background: rgba(236, 72, 153, 0.1);
    color: #EC4899;
}

.transaction-item:hover .transaction-icon[b-0tqpe8i0sx] {
    transform: scale(1.1);
}

.transaction-item:hover .transaction-icon[b-0tqpe8i0sx]::after {
    background: rgba(255, 255, 255, 0.1);
}

.transaction-details[b-0tqpe8i0sx] {
    flex-grow: 1;
    min-width: 0; /* For text truncation */
    transition: all 0.2s ease;
}

.transaction-details div:first-child[b-0tqpe8i0sx] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.2s ease;
    margin-bottom: 2px;
}

.transaction-details div:last-child[b-0tqpe8i0sx] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.transaction-item:hover .transaction-details div:first-child[b-0tqpe8i0sx] {
    color: rgba(255, 255, 255, 1);
}

.transaction-item:hover .transaction-details div:last-child[b-0tqpe8i0sx] {
    color: rgba(255, 255, 255, 0.7);
}

.transaction-amount[b-0tqpe8i0sx] {
    font-weight: 600;
    font-family: 'Space Grotesk', monospace;
    margin-left: 12px;
    transition: all 0.2s ease;
    font-size: 15px;
    flex-shrink: 0;
}

.transaction-amount.credit[b-0tqpe8i0sx] {
    color: #10B981;
}

.transaction-amount.debit[b-0tqpe8i0sx] {
    color: #EC4899;
}

/* Empty state */
.empty-transactions[b-0tqpe8i0sx] {
    text-align: center;
    padding: 40px 0;
    color: rgba(255, 255, 255, 0.6);
    animation: fadeIn-b-0tqpe8i0sx 0.5s ease forwards;
}

.empty-transactions i[b-0tqpe8i0sx] {
    font-size: 32px;
    margin-bottom: 16px;
    opacity: 0.6;
    color: rgba(99, 102, 241, 0.5);
    display: inline-block;
    animation: pulse-b-0tqpe8i0sx 2s infinite;
}

.empty-transactions p:first-of-type[b-0tqpe8i0sx] {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
}

.empty-transactions p:last-of-type[b-0tqpe8i0sx] {
    font-size: 14px;
    opacity: 0.7;
}

@keyframes pulse-b-0tqpe8i0sx {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.6; }
}

/* Animation */
@keyframes fadeIn-b-0tqpe8i0sx {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.transaction-item[b-0tqpe8i0sx] {
    animation: fadeIn-b-0tqpe8i0sx 0.3s ease forwards;
}

.transaction-item:nth-child(1)[b-0tqpe8i0sx] { animation-delay: 0.05s; }
.transaction-item:nth-child(2)[b-0tqpe8i0sx] { animation-delay: 0.1s; }
.transaction-item:nth-child(3)[b-0tqpe8i0sx] { animation-delay: 0.15s; }
.transaction-item:nth-child(4)[b-0tqpe8i0sx] { animation-delay: 0.2s; }
.transaction-item:nth-child(5)[b-0tqpe8i0sx] { animation-delay: 0.25s; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .transaction-details div:first-child[b-0tqpe8i0sx] {
        max-width: 150px;
    }
    
    .dashboard-card[b-0tqpe8i0sx] {
        padding: 16px;
    }
    
    .transaction-icon[b-0tqpe8i0sx] {
        width: 34px;
        height: 34px;
        margin-right: 10px;
    }
    
    .transaction-amount[b-0tqpe8i0sx] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .transaction-details div:first-child[b-0tqpe8i0sx] {
        max-width: 120px;
    }
    
    .subtitle[b-0tqpe8i0sx] {
        font-size: 16px;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/SpendingBreakdownChart.razor.rz.scp.css */
.dashboard-card[b-6ylxbv5f42] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-card:hover[b-6ylxbv5f42] {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.flex-between[b-6ylxbv5f42] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.subtitle[b-6ylxbv5f42] {
    font-size: 18px;
    font-weight: 600;
    color: #F8FAFC;
    margin: 0;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}

.subtitle[b-6ylxbv5f42]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, #6366F1, rgba(99, 102, 241, 0));
    border-radius: 2px;
}

/* Chart Container */
.chart-container[b-6ylxbv5f42] {
    background: rgba(11, 15, 25, 0.5);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.chart-container:hover[b-6ylxbv5f42] {
    background: rgba(11, 15, 25, 0.6);
}

.chart-container[b-6ylxbv5f42]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(16, 185, 129, 0.03));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.chart-container:hover[b-6ylxbv5f42]::before {
    opacity: 1;
}

/* SVG styling */
svg[b-6ylxbv5f42] {
    font-family: 'Inter', sans-serif;
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.2));
}

svg text[b-6ylxbv5f42] {
    fill: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.chart-bar[b-6ylxbv5f42] {
    transition: all 0.3s ease;
    cursor: pointer;
}

.chart-bar:hover[b-6ylxbv5f42] {
    filter: brightness(1.2);
}

.chart-bar:hover text[b-6ylxbv5f42] {
    fill: rgba(255, 255, 255, 1);
    font-weight: 600;
}

.chart-bar rect[b-6ylxbv5f42] {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chart-bar:hover rect[b-6ylxbv5f42] {
    transform: translateY(-8px);
    filter: url(#glow);
}

.chart-bar text[b-6ylxbv5f42] {
    transition: all 0.3s ease;
}

.interactive-point[b-6ylxbv5f42] {
    transition: all 0.3s ease;
    cursor: pointer;
    filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
}

.interactive-point:hover[b-6ylxbv5f42] {
    r: 6;
    filter: url(#glow);
}

/* Spending Summary */
.spending-summary[b-6ylxbv5f42] {
    margin-top: 24px;
    background: rgba(11, 15, 25, 0.3);
    border-radius: 10px;
    padding: 12px 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.spending-item[b-6ylxbv5f42] {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 4px;
    cursor: pointer;
}

.spending-item:last-child[b-6ylxbv5f42] {
    border-bottom: none;
    margin-bottom: 0;
}

.spending-item[b-6ylxbv5f42]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    border-radius: 8px;
}

.spending-item:hover[b-6ylxbv5f42]::before {
    transform: scaleX(1);
}

.spending-icon[b-6ylxbv5f42] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.spending-item:hover .spending-icon[b-6ylxbv5f42] {
    transform: scale(1.1);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
}

.spending-details[b-6ylxbv5f42] {
    flex-grow: 1;
    min-width: 0; /* For text truncation */
    transition: all 0.2s ease;
}

.spending-details div:first-child[b-6ylxbv5f42] {
    font-weight: 500;
    color: #F8FAFC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    margin-bottom: 2px;
}

.spending-details div:last-child[b-6ylxbv5f42] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.spending-item:hover .spending-details div:first-child[b-6ylxbv5f42] {
    color: rgba(255, 255, 255, 1);
}

.spending-item:hover .spending-details div:last-child[b-6ylxbv5f42] {
    color: rgba(255, 255, 255, 0.8);
}

.spending-amount[b-6ylxbv5f42] {
    font-weight: 600;
    font-family: 'Space Grotesk', monospace;
    color: #F8FAFC;
    margin-left: 12px;
    transition: all 0.2s ease;
    font-size: 15px;
    flex-shrink: 0;
}

.spending-item:hover .spending-amount[b-6ylxbv5f42] {
    color: white;
    transform: scale(1.05);
}

/* Select Style */
select[b-6ylxbv5f42] {
    background-color: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 32px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

select:hover[b-6ylxbv5f42] {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(15, 23, 42, 0.8) !important;
}

select:focus[b-6ylxbv5f42] {
    outline: none !important;
    border-color: #6366F1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

/* Animation */
@keyframes barUp-b-6ylxbv5f42 {
    from { height: 0; y: 200; opacity: 0; }
    to { height: attr(height px); y: attr(y px); opacity: 1; }
}

.chart-bar rect[b-6ylxbv5f42] {
    animation: barUp-b-6ylxbv5f42 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chart-bar:nth-child(1) rect[b-6ylxbv5f42] { animation-delay: 0.1s; }
.chart-bar:nth-child(2) rect[b-6ylxbv5f42] { animation-delay: 0.2s; }
.chart-bar:nth-child(3) rect[b-6ylxbv5f42] { animation-delay: 0.3s; }
.chart-bar:nth-child(4) rect[b-6ylxbv5f42] { animation-delay: 0.4s; }

@keyframes textFadeIn-b-6ylxbv5f42 {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.chart-bar text[b-6ylxbv5f42] {
    animation: textFadeIn-b-6ylxbv5f42 0.6s ease forwards;
    opacity: 0;
}

.chart-bar:nth-child(1) text[b-6ylxbv5f42] { animation-delay: 0.4s; }
.chart-bar:nth-child(2) text[b-6ylxbv5f42] { animation-delay: 0.5s; }
.chart-bar:nth-child(3) text[b-6ylxbv5f42] { animation-delay: 0.6s; }
.chart-bar:nth-child(4) text[b-6ylxbv5f42] { animation-delay: 0.7s; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .spending-details div:first-child[b-6ylxbv5f42] {
        max-width: 150px;
    }
    
    .chart-container[b-6ylxbv5f42] {
        padding: 12px;
        height: 200px !important;
    }
    
    .spending-summary[b-6ylxbv5f42] {
        padding: 8px 4px;
    }
    
    .spending-item[b-6ylxbv5f42] {
        padding: 10px 6px;
    }
    
    .spending-icon[b-6ylxbv5f42] {
        width: 34px;
        height: 34px;
        margin-right: 10px;
    }
    
    .spending-amount[b-6ylxbv5f42] {
        font-size: 14px;
    }
    
    select[b-6ylxbv5f42] {
        padding: 4px 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .spending-details div:first-child[b-6ylxbv5f42] {
        max-width: 120px;
    }
    
    .subtitle[b-6ylxbv5f42] {
        font-size: 16px;
    }
    
    .chart-container[b-6ylxbv5f42] {
        padding: 10px;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/Tabs/OverviewTab.razor.rz.scp.css */
/* Stats Grid */
.stats-grid[b-fw15q2jcwb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stats-icon[b-fw15q2jcwb] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 15px;
}

.stats-icon.primary[b-fw15q2jcwb] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.stats-icon.secondary[b-fw15q2jcwb] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.stats-icon.tertiary[b-fw15q2jcwb] {
    background: rgba(236, 72, 153, 0.1);
    color: var(--tertiary);
}

.text-up[b-fw15q2jcwb] {
    color: #10b981;
}

.text-down[b-fw15q2jcwb] {
    color: #ef4444;
}

/* Two Column Grid */
.two-column-grid[b-fw15q2jcwb] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
}

/* Auto Recharge Card */
.auto-recharge-card[b-fw15q2jcwb] {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-row[b-fw15q2jcwb] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* Toggle Switch */
.toggle-container[b-fw15q2jcwb] {
    display: flex;
    align-items: center;
}

.toggle-switch[b-fw15q2jcwb] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.toggle-slider[b-fw15q2jcwb] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider[b-fw15q2jcwb]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-fw15q2jcwb] {
    background-color: var(--primary);
}

input:checked + .toggle-slider[b-fw15q2jcwb]:before {
    transform: translateX(20px);
}

/* Badges */
.badge[b-fw15q2jcwb] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.badge-success[b-fw15q2jcwb] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.badge-warning[b-fw15q2jcwb] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Loading container */
.loading-container[b-fw15q2jcwb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

.loading-container .spinner[b-fw15q2jcwb] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-fw15q2jcwb 1s linear infinite;
}

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

/* Dashboard Cards */
.dashboard-card[b-fw15q2jcwb] {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.subtitle[b-fw15q2jcwb] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.flex-between[b-fw15q2jcwb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .stats-grid[b-fw15q2jcwb] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .two-column-grid[b-fw15q2jcwb] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid[b-fw15q2jcwb] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/Tabs/PaymentMethodsTab.razor.rz.scp.css */
/* Payment Method Cards */
.payment-method-card[b-2rxobha0vj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.payment-method-info[b-2rxobha0vj] {
    display: flex;
    align-items: center;
}

.payment-method-icon[b-2rxobha0vj] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-right: 16px;
    color: var(--primary);
}

.payment-method-details[b-2rxobha0vj] {
    display: flex;
    flex-direction: column;
}

.payment-method-actions[b-2rxobha0vj] {
    display: flex;
    gap: 8px;
}

/* Dashboard Cards */
.dashboard-card[b-2rxobha0vj] {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.subtitle[b-2rxobha0vj] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.flex-between[b-2rxobha0vj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Loading container */
.loading-container[b-2rxobha0vj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

.loading-container .spinner[b-2rxobha0vj] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-2rxobha0vj 1s linear infinite;
}

@keyframes spin-b-2rxobha0vj {
    to {
        transform: rotate(360deg);
    }
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/Tabs/SettingsTab.razor.rz.scp.css */
/* Two Column Grid */
.two-column-grid[b-gsnv7dr09t] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
}

/* Dashboard Cards */
.dashboard-card[b-gsnv7dr09t] {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.subtitle[b-gsnv7dr09t] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Toggle Switch */
.toggle-container[b-gsnv7dr09t] {
    display: flex;
    align-items: center;
}

.toggle-switch[b-gsnv7dr09t] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.toggle-slider[b-gsnv7dr09t] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider[b-gsnv7dr09t]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider[b-gsnv7dr09t] {
    background-color: var(--primary);
}

input:checked + .toggle-slider[b-gsnv7dr09t]:before {
    transform: translateX(20px);
}

/* Form Elements */
.input-group[b-gsnv7dr09t] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix[b-gsnv7dr09t] {
    position: absolute;
    left: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.form-input[b-gsnv7dr09t] {
    width: 100%;
    padding: 10px 12px 10px 28px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-input:focus[b-gsnv7dr09t] {
    outline: none;
    border-color: var(--primary);
}

/* Form Group */
.form-group[b-gsnv7dr09t] {
    margin-bottom: 16px;
}

.form-label[b-gsnv7dr09t] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

/* Loading container */
.loading-container[b-gsnv7dr09t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

.loading-container .spinner[b-gsnv7dr09t] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-gsnv7dr09t 1s linear infinite;
}

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

/* Responsive Adjustments */
@media (max-width: 992px) {
    .two-column-grid[b-gsnv7dr09t] {
        grid-template-columns: 1fr;
    }
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/Tabs/TabNavigation.razor.rz.scp.css */
.tab-nav[b-hplsupvva8] {
    display: flex;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-item[b-hplsupvva8] {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-item.active[b-hplsupvva8] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.tab-item:hover:not(.active)[b-hplsupvva8] {
    background: rgba(255, 255, 255, 0.05);
}
/* _content/WebUI/Components/UI/CustomerElements/WalletElements/Tabs/TransactionsTab.razor.rz.scp.css */
/* Filter Chips */
.filter-chip[b-b8mb3ka89m] {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-chip i[b-b8mb3ka89m] {
    margin-right: 6px;
}

.filter-chip:hover[b-b8mb3ka89m] {
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.filter-chip.active[b-b8mb3ka89m] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Data Table */
.data-table[b-b8mb3ka89m] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.data-table th[b-b8mb3ka89m] {
    padding: 12px;
    text-align: left;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
}

.data-table td[b-b8mb3ka89m] {
    padding: 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.data-table tbody tr:hover[b-b8mb3ka89m] {
    background: rgba(255, 255, 255, 0.02);
}

.data-table tbody tr:last-child td[b-b8mb3ka89m] {
    border-bottom: none;
}

.sortable-header[b-b8mb3ka89m] {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable-header:hover[b-b8mb3ka89m] {
    color: white;
}

.sortable-header i[b-b8mb3ka89m] {
    margin-left: 5px;
    font-size: 12px;
}

/* Transaction Icons */
.transaction-icon[b-b8mb3ka89m] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transaction-icon.credit[b-b8mb3ka89m] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--secondary);
}

.transaction-icon.debit[b-b8mb3ka89m] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.transaction-icon.instance[b-b8mb3ka89m] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

/* Button Link */
.btn-link[b-b8mb3ka89m] {
    background: none;
    border: none;
    color: var(--primary);
    padding: 0;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-link i[b-b8mb3ka89m] {
    margin-right: 4px;
}

.btn-link:hover[b-b8mb3ka89m] {
    opacity: 0.8;
}

/* Dashboard Cards */
.dashboard-card[b-b8mb3ka89m] {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.subtitle[b-b8mb3ka89m] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.flex-between[b-b8mb3ka89m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Pagination */
.pagination-container[b-b8mb3ka89m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.pagination-info[b-b8mb3ka89m] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.pagination-controls[b-b8mb3ka89m] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination-btn[b-b8mb3ka89m] {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pagination-ellipsis[b-b8mb3ka89m] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Summary Grid */
.summary-grid[b-b8mb3ka89m] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.summary-card[b-b8mb3ka89m] {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-label[b-b8mb3ka89m] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.summary-value[b-b8mb3ka89m] {
    font-size: 24px;
    font-weight: 600;
    font-family: 'Space Grotesk', monospace;
}

.summary-value.credit[b-b8mb3ka89m] {
    color: var(--secondary);
}

.summary-value.debit[b-b8mb3ka89m] {
    color: var(--danger);
}

/* Export Controls */
.export-controls[b-b8mb3ka89m] {
    display: flex;
    gap: 16px;
}

/* Loading container */
.loading-container[b-b8mb3ka89m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

.loading-container .spinner[b-b8mb3ka89m] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin-b-b8mb3ka89m 1s linear infinite;
}

/* Status Badges */
.badge[b-b8mb3ka89m] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-completed[b-b8mb3ka89m] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-pending[b-b8mb3ka89m] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-failed[b-b8mb3ka89m] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-default[b-b8mb3ka89m] {
    background: rgba(71, 85, 105, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(71, 85, 105, 0.2);
}

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

/* Responsive Layout */
@media (max-width: 992px) {
    .summary-grid[b-b8mb3ka89m] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .export-controls[b-b8mb3ka89m] {
        flex-wrap: wrap;
    }
    
    .export-controls button[b-b8mb3ka89m] {
        flex: 1;
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .summary-grid[b-b8mb3ka89m] {
        grid-template-columns: 1fr;
    }
    
    .pagination-container[b-b8mb3ka89m] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .pagination-controls[b-b8mb3ka89m] {
        width: 100%;
        justify-content: center;
    }
}
/* _content/WebUI/Components/UI/HardwareMonetizationModal.razor.rz.scp.css */
/* Modal Backdrop */
.modal-backdrop[b-vdpx7mp9hv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
    animation: fadeIn-b-vdpx7mp9hv 0.3s ease-out;
    overflow-y: auto;
    padding: 40px 20px;
}

@keyframes fadeIn-b-vdpx7mp9hv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-vdpx7mp9hv] {
    background-color: var(--bg-darker);
    border-radius: 16px;
    max-width: 1200px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-vdpx7mp9hv 0.3s ease-out;
    position: relative;
    margin: auto;
}

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

/* Modal Header */
.modal-header[b-vdpx7mp9hv] {
    position: sticky;
    top: 0;
    background-color: var(--bg-darker);
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
    display: flex;
    justify-content: flex-end;
}

.modal-close[b-vdpx7mp9hv] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-muted);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 20px;
}

.modal-close:hover[b-vdpx7mp9hv] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Modal Content */
.modal-content[b-vdpx7mp9hv] {
    padding: 40px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Container */
.container[b-vdpx7mp9hv] {
    max-width: 100%;
    margin: 0 auto;
}


/* Form Container */
.form-container[b-vdpx7mp9hv] {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Form Header Elements */
.form-main-title[b-vdpx7mp9hv] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    background: linear-gradient(to right, var(--primary-color-start), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.form-subtitle[b-vdpx7mp9hv] {
    font-size: 18px;
    color: white;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.5;
    font-weight: 500;
}

.form-description[b-vdpx7mp9hv] {
    font-size: 16px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Value Props Grid */
.value-props-grid[b-vdpx7mp9hv] {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.value-prop-item[b-vdpx7mp9hv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 30px;
    color: var(--primary-color-start);
    font-weight: 500;
    transition: all 0.3s ease;
}

.value-prop-item:hover[b-vdpx7mp9hv] {
    background: rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.value-prop-item i[b-vdpx7mp9hv] {
    font-size: 20px;
    color: var(--primary-color-start);
}

.value-prop-item span[b-vdpx7mp9hv] {
    font-size: 15px;
}

/* Form Divider */
.form-divider[b-vdpx7mp9hv] {
    margin: 40px 0;
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Form Sections */
.form-section[b-vdpx7mp9hv] {
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-section h4[b-vdpx7mp9hv] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    margin-bottom: 24px;
    color: white;
}

.form-section h4 i[b-vdpx7mp9hv] {
    color: var(--primary-color-start);
}

/* Form Layout */
.form-row[b-vdpx7mp9hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-vdpx7mp9hv] {
    margin-bottom: 20px;
}

.form-group label[b-vdpx7mp9hv] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: white;
    font-size: 14px;
}

.required[b-vdpx7mp9hv] {
    color: var(--tertiary-color);
}

/* Form Inputs */
.form-input[b-vdpx7mp9hv],
.form-textarea[b-vdpx7mp9hv] {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(15, 23, 42, 0.3);
    color: white;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus[b-vdpx7mp9hv],
.form-textarea:focus[b-vdpx7mp9hv] {
    outline: none;
    border-color: var(--primary-color-start);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-input.error[b-vdpx7mp9hv],
.form-textarea.error[b-vdpx7mp9hv] {
    border-color: #ef4444;
}

.form-textarea[b-vdpx7mp9hv] {
    resize: vertical;
    min-height: 100px;
}

/* Select Styling */
select.form-input[b-vdpx7mp9hv] {
    cursor: pointer;
}

select.form-input option[b-vdpx7mp9hv] {
    background-color: var(--bg-darker);
    color: white;
}

/* Checkbox Grid */
.checkbox-grid[b-vdpx7mp9hv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.checkbox-item[b-vdpx7mp9hv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s;
}

.checkbox-item:hover[b-vdpx7mp9hv] {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.checkbox-item input[type="checkbox"][b-vdpx7mp9hv] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color-start);
    cursor: pointer;
}

.checkbox-item label[b-vdpx7mp9hv] {
    cursor: pointer;
    margin-bottom: 0;
    flex: 1;
}

.checkbox-item label strong[b-vdpx7mp9hv] {
    color: white;
    font-weight: 500;
}

.checkbox-item label small[b-vdpx7mp9hv] {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* Field Help */
.field-help[b-vdpx7mp9hv] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 5px;
}

/* Error Messages */
.error-message[b-vdpx7mp9hv] {
    color: #ef4444;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* Conditional Sections */
.conditional-section[b-vdpx7mp9hv] {
    margin-bottom: 30px;
    padding: 24px;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.conditional-header[b-vdpx7mp9hv] {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color-start);
    margin-bottom: 20px;
}

/* Consent Section */
.consent-section[b-vdpx7mp9hv] {
    margin: 30px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.consent-item[b-vdpx7mp9hv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.consent-item:last-child[b-vdpx7mp9hv] {
    margin-bottom: 0;
}

.consent-item input[type="checkbox"][b-vdpx7mp9hv] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color-start);
}

.consent-item label[b-vdpx7mp9hv] {
    margin-bottom: 0;
    color: var(--text-muted);
    cursor: pointer;
}

/* Submit Section */
.submit-section[b-vdpx7mp9hv] {
    text-align: center;
    margin-top: 40px;
}

.submit-button[b-vdpx7mp9hv] {
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 250px;
}

.submit-button:hover:not(:disabled)[b-vdpx7mp9hv] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.submit-button:disabled[b-vdpx7mp9hv] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.submit-disclaimer[b-vdpx7mp9hv] {
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-muted);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Success Modal */
.modal-overlay[b-vdpx7mp9hv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
    animation: fadeIn-b-vdpx7mp9hv 0.3s ease-out;
}

.success-modal-content[b-vdpx7mp9hv] {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp-b-vdpx7mp9hv 0.3s ease-out;
    text-align: center;
}

.modal-icon[b-vdpx7mp9hv] {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scaleIn-b-vdpx7mp9hv 0.5s ease-out 0.2s both;
}

@keyframes scaleIn-b-vdpx7mp9hv {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.modal-icon i[b-vdpx7mp9hv] {
    font-size: 40px;
    color: white;
}

.success-modal-content h3[b-vdpx7mp9hv] {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--primary-color-start);
}

.success-modal-content p[b-vdpx7mp9hv] {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 25px;
}

.modal-button[b-vdpx7mp9hv] {
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--primary-color-start), var(--primary-color-end));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-button:hover[b-vdpx7mp9hv] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-content[b-vdpx7mp9hv] {
        padding: 20px;
    }
    
    .form-main-title[b-vdpx7mp9hv] {
        font-size: 28px;
    }
    
    .form-subtitle[b-vdpx7mp9hv] {
        font-size: 16px;
    }
    
    .form-description[b-vdpx7mp9hv] {
        font-size: 14px;
    }
    
    
    .form-container[b-vdpx7mp9hv] {
        padding: 20px;
    }
    
    .form-section[b-vdpx7mp9hv] {
        padding: 20px;
    }
    
    .form-row[b-vdpx7mp9hv] {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid[b-vdpx7mp9hv] {
        grid-template-columns: 1fr;
    }
    
    
    .value-props-grid[b-vdpx7mp9hv] {
        flex-direction: column;
        gap: 15px;
    }
    
    .value-prop-item[b-vdpx7mp9hv] {
        width: 100%;
        justify-content: center;
    }
}

/* Scrollbar Styling */
.modal-content[b-vdpx7mp9hv]::-webkit-scrollbar {
    width: 8px;
}

.modal-content[b-vdpx7mp9hv]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-content[b-vdpx7mp9hv]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.modal-content[b-vdpx7mp9hv]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
/* _content/WebUI/Components/UI/PartnerApplicationModal.razor.rz.scp.css */
/* Partner Application Modal Styles */
.modal-backdrop[b-t5zpk56iaz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}

.modal-container[b-t5zpk56iaz] {
    background-color: var(--bg-darker);
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.modal-header[b-t5zpk56iaz] {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.modal-close[b-t5zpk56iaz] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.modal-close:hover[b-t5zpk56iaz] {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.modal-content[b-t5zpk56iaz] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.container[b-t5zpk56iaz] {
    padding: 40px;
}

.form-container[b-t5zpk56iaz] {
    max-width: 100%;
}

/* Form Title and Description */
.form-main-title[b-t5zpk56iaz] {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    text-align: center;
}

.form-subtitle[b-t5zpk56iaz] {
    font-size: 18px;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 12px;
}

.form-description[b-t5zpk56iaz] {
    font-size: 16px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 32px;
    line-height: 1.6;
}

/* Value Propositions Grid */
.value-props-grid[b-t5zpk56iaz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.value-prop-item[b-t5zpk56iaz] {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.value-prop-item:hover[b-t5zpk56iaz] {
    background: rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.value-prop-item i[b-t5zpk56iaz] {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 12px;
    display: block;
}

.value-prop-item span[b-t5zpk56iaz] {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

/* Form Sections */
.form-section[b-t5zpk56iaz] {
    margin-bottom: 40px;
}

.form-section h4[b-t5zpk56iaz] {
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-section h4 i[b-t5zpk56iaz] {
    color: var(--primary-color);
}

/* Form Elements */
.form-group[b-t5zpk56iaz] {
    margin-bottom: 20px;
}

.form-group label[b-t5zpk56iaz] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: white;
    margin-bottom: 8px;
}

.required[b-t5zpk56iaz] {
    color: #ef4444;
}

.form-input[b-t5zpk56iaz],
.form-textarea[b-t5zpk56iaz] {
    width: 100%;
    padding: 12px 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    transition: all 0.2s;
}

.form-input:focus[b-t5zpk56iaz],
.form-textarea:focus[b-t5zpk56iaz] {
    outline: none;
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-input.error[b-t5zpk56iaz],
.form-textarea.error[b-t5zpk56iaz] {
    border-color: #ef4444;
}

.form-textarea[b-t5zpk56iaz] {
    min-height: 100px;
    resize: vertical;
}

select.form-input[b-t5zpk56iaz] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.form-row[b-t5zpk56iaz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.checkbox-item[b-t5zpk56iaz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.checkbox-item input[type="checkbox"][b-t5zpk56iaz] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.checkbox-item label[b-t5zpk56iaz] {
    cursor: pointer;
    line-height: 1.5;
    flex: 1;
}

.checkbox-item label strong[b-t5zpk56iaz] {
    display: block;
    color: white;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Consent Section */
.consent-section[b-t5zpk56iaz] {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.consent-item[b-t5zpk56iaz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.consent-item:last-child[b-t5zpk56iaz] {
    margin-bottom: 0;
}

.consent-item input[type="checkbox"][b-t5zpk56iaz] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.consent-item label[b-t5zpk56iaz] {
    cursor: pointer;
    line-height: 1.5;
    flex: 1;
    font-size: 14px;
    color: var(--text-muted);
}

/* Form Divider */
.form-divider[b-t5zpk56iaz] {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 32px 0;
}

/* Submit Section */
.submit-section[b-t5zpk56iaz] {
    text-align: center;
    margin-top: 32px;
}

.submit-button[b-t5zpk56iaz] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-end));
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 200px;
}

.submit-button:hover:not(:disabled)[b-t5zpk56iaz] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.submit-button:disabled[b-t5zpk56iaz] {
    opacity: 0.7;
    cursor: not-allowed;
}

.submit-disclaimer[b-t5zpk56iaz] {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 16px;
}

/* Error Messages */
.error-message[b-t5zpk56iaz] {
    color: #ef4444;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

/* Success Modal */
.modal-overlay[b-t5zpk56iaz] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.success-modal-content[b-t5zpk56iaz] {
    background-color: var(--bg-darker);
    border-radius: 12px;
    padding: 40px;
    max-width: 500px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-icon[b-t5zpk56iaz] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.modal-icon i[b-t5zpk56iaz] {
    font-size: 40px;
    color: white;
}

.success-modal-content h3[b-t5zpk56iaz] {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
}

.success-modal-content p[b-t5zpk56iaz] {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}

.modal-button[b-t5zpk56iaz] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-end));
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-button:hover[b-t5zpk56iaz] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container[b-t5zpk56iaz] {
        padding: 24px;
    }
    
    .form-main-title[b-t5zpk56iaz] {
        font-size: 24px;
    }
    
    .form-subtitle[b-t5zpk56iaz] {
        font-size: 16px;
    }
    
    .value-props-grid[b-t5zpk56iaz] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .form-row[b-t5zpk56iaz] {
        grid-template-columns: 1fr;
    }
    
    .checkbox-grid[b-t5zpk56iaz] {
        grid-template-columns: 1fr;
    }
    
    .form-section h4[b-t5zpk56iaz] {
        font-size: 18px;
    }
    
    .submit-button[b-t5zpk56iaz] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .modal-container[b-t5zpk56iaz] {
        max-height: 100vh;
        border-radius: 0;
    }
    
    .container[b-t5zpk56iaz] {
        padding: 20px;
    }
    
    .form-main-title[b-t5zpk56iaz] {
        font-size: 20px;
    }
    
    .value-prop-item[b-t5zpk56iaz] {
        padding: 16px;
    }
    
    .value-prop-item i[b-t5zpk56iaz] {
        font-size: 24px;
    }
    
    .value-prop-item span[b-t5zpk56iaz] {
        font-size: 14px;
    }
}
/* _content/WebUI/Components/UI/ProviderElements/ServerElements/AddServerModal.razor.rz.scp.css */
/* Grid Overlay */
.grid-overlay[b-o1d7mqlexh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fixed layout structure */
.dashboard-layout[b-o1d7mqlexh] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
}


.menu-section[b-o1d7mqlexh] {
    padding: 16px 0;
}

.menu-header[b-o1d7mqlexh] {
    padding: 8px 24px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-item[b-o1d7mqlexh] {
    padding: 10px 24px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.menu-item.active[b-o1d7mqlexh] {
    background-color: rgba(79, 70, 229, 0.15);
    color: #6366F1;
    border-left-color: #6366F1;
}

.menu-item:hover[b-o1d7mqlexh] {
    background-color: rgba(255, 255, 255, 0.05);
}

.menu-icon[b-o1d7mqlexh] {
    width: 20px;
    margin-right: 12px;
    text-align: center;
}

/* Organizations dropdown */
.dropdown-content[b-o1d7mqlexh] {
    display: none;
    padding-left: 30px;
}

.dropdown-content.active[b-o1d7mqlexh] {
    display: block;
}

.dropdown-item[b-o1d7mqlexh] {
    padding: 8px 0 8px 24px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: all 0.2s ease;
    position: relative;
}

.dropdown-item:hover[b-o1d7mqlexh] {
    color: #6366F1;
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item.active[b-o1d7mqlexh] {
    color: #6366F1;
    background-color: rgba(79, 70, 229, 0.15);
    border-left: 3px solid #6366F1;
    font-weight: 500;
}

.dropdown-item.active[b-o1d7mqlexh]:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6366F1;
}

.dropdown-toggle[b-o1d7mqlexh] {
    cursor: pointer;
}

/* Page header */
.page-header[b-o1d7mqlexh] {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title[b-o1d7mqlexh] {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.page-description[b-o1d7mqlexh] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

/* Dashboard cards */
.dashboard-card[b-o1d7mqlexh] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

/* Action buttons */
.action-button[b-o1d7mqlexh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.primary-button[b-o1d7mqlexh] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.primary-button:hover[b-o1d7mqlexh] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.primary-button .button-icon[b-o1d7mqlexh] {
    margin-right: 8px;
}

/* Filter controls */
.filter-controls[b-o1d7mqlexh] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-control[b-o1d7mqlexh] {
    position: relative;
}

.filter-input[b-o1d7mqlexh] {
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    min-width: 180px;
}

.filter-input:focus[b-o1d7mqlexh] {
    outline: none;
    border-color: var(--primary);
}

.filter-label[b-o1d7mqlexh] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    display: block;
}

/* Server cards */
.server-cards-grid[b-o1d7mqlexh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.server-card[b-o1d7mqlexh] {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.server-card:hover[b-o1d7mqlexh] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.server-header[b-o1d7mqlexh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.server-name[b-o1d7mqlexh] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.server-id[b-o1d7mqlexh] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.server-status[b-o1d7mqlexh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-online[b-o1d7mqlexh] {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-provisioning[b-o1d7mqlexh] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-offline[b-o1d7mqlexh] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.server-section[b-o1d7mqlexh] {
    margin-bottom: 14px;
}

.section-title[b-o1d7mqlexh] {
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    font-weight: 600;
}

.spec-grid[b-o1d7mqlexh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.spec-item[b-o1d7mqlexh] {
    margin-bottom: 8px;
}

.spec-label[b-o1d7mqlexh] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2px;
}

.spec-value[b-o1d7mqlexh] {
    font-size: 14px;
    font-weight: 500;
}

.server-footer[b-o1d7mqlexh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.server-price[b-o1d7mqlexh] {
    font-size: 16px;
    font-weight: 600;
}

.server-actions[b-o1d7mqlexh] {
    display: flex;
    gap: 8px;
}

.action-icon[b-o1d7mqlexh] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.action-icon:hover[b-o1d7mqlexh] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.action-icon.primary[b-o1d7mqlexh] {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary);
}

.action-icon.primary:hover[b-o1d7mqlexh] {
    background: rgba(99, 102, 241, 0.3);
}

.action-icon.warning[b-o1d7mqlexh] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.action-icon.warning:hover[b-o1d7mqlexh] {
    background: rgba(245, 158, 11, 0.3);
}

.action-icon.danger[b-o1d7mqlexh] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.action-icon.danger:hover[b-o1d7mqlexh] {
    background: rgba(239, 68, 68, 0.3);
}

/* Server metrics */
.metric-group[b-o1d7mqlexh] {
    margin-bottom: 12px;
}

.metric-label[b-o1d7mqlexh] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
}

.metric-label-text[b-o1d7mqlexh] {
    color: rgba(255, 255, 255, 0.7);
}

.metric-value[b-o1d7mqlexh] {
    color: white;
    font-weight: 500;
}

.metric-bar[b-o1d7mqlexh] {
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.metric-fill[b-o1d7mqlexh] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px;
}

.metric-fill.warning[b-o1d7mqlexh] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.metric-fill.danger[b-o1d7mqlexh] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Modal styles */
.modal-overlay[b-o1d7mqlexh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: all 0.3s ease;
}

.modal-overlay.active[b-o1d7mqlexh] {
    opacity: 1;
    visibility: visible;
}

.modal-content[b-o1d7mqlexh] {
    background-color: var(--dark);
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.modal-overlay.active .modal-content[b-o1d7mqlexh] {
    transform: translateY(0);
}

.modal-header[b-o1d7mqlexh] {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-o1d7mqlexh] {
    font-size: 20px;
    font-weight: 600;
}

.modal-close[b-o1d7mqlexh] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.modal-close:hover[b-o1d7mqlexh] {
    background: rgba(255, 255, 255, 0.2);
}

.modal-body[b-o1d7mqlexh] {
    padding: 20px;
}

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

/* Form styles */
.form-group[b-o1d7mqlexh] {
    margin-bottom: 20px;
}

.form-label[b-o1d7mqlexh] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}

.form-input[b-o1d7mqlexh] {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-input:focus[b-o1d7mqlexh] {
    outline: none;
    border-color: var(--primary);
    background-color: rgba(15, 23, 42, 0.8);
}

.form-select[b-o1d7mqlexh] {
    width: 100%;
    padding: 10px 12px;
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' width='18px' height='18px'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all 0.2s ease;
}

.form-select:focus[b-o1d7mqlexh] {
    outline: none;
    border-color: var(--primary);
    background-color: rgba(15, 23, 42, 0.8);
}

.form-row[b-o1d7mqlexh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Badges */
.badge[b-o1d7mqlexh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-success[b-o1d7mqlexh] {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
}

.badge-warning[b-o1d7mqlexh] {
    background-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.badge-danger[b-o1d7mqlexh] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Server details modal */
.server-detail-grid[b-o1d7mqlexh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.server-detail-section[b-o1d7mqlexh] {
    margin-bottom: 24px;
}

.server-detail-title[b-o1d7mqlexh] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-item[b-o1d7mqlexh] {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}

.detail-label[b-o1d7mqlexh] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.detail-value[b-o1d7mqlexh] {
    font-size: 14px;
    font-weight: 500;
    color: white;
}

/* Tooltip */
.tooltip-base[b-o1d7mqlexh] {
    position: fixed;
    background: #0F172A;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    z-index: 99999;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: none;
    min-width: 280px;
    max-width: 350px;
    pointer-events: none;
}

/* Button spinner */
.button-spinner[b-o1d7mqlexh] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-o1d7mqlexh 0.8s linear infinite;
    margin-right: 8px;
}

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

/* Utils */
.gradient-text[b-o1d7mqlexh] {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-up[b-o1d7mqlexh] {
    color: var(--secondary);
}

.text-down[b-o1d7mqlexh] {
    color: #ef4444;
}

.flex-between[b-o1d7mqlexh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-link[b-o1d7mqlexh] {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.text-link:hover[b-o1d7mqlexh] {
    text-decoration: underline;
}

/* Script section styling */
.script-actions[b-o1d7mqlexh] {
    padding: 20px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.script-section-title[b-o1d7mqlexh] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: white;
}

.script-description[b-o1d7mqlexh] {
    margin-bottom: 16px;
}

.script-description p[b-o1d7mqlexh] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
}

.button-container[b-o1d7mqlexh] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.connectivity-error[b-o1d7mqlexh] {
    background: rgba(239, 68, 68, 0.2);
    border-left: 4px solid #ef4444;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.connectivity-error i[b-o1d7mqlexh] {
    color: #ef4444;
    margin-top: 2px;
}

.connectivity-error p[b-o1d7mqlexh] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.script-container[b-o1d7mqlexh] {
    margin-bottom: 24px;
}

/* Empty state */
.empty-state[b-o1d7mqlexh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon[b-o1d7mqlexh] {
    font-size: 48px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.2);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-title[b-o1d7mqlexh] {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-description[b-o1d7mqlexh] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
    max-width: 500px;
}
/* _content/WebUI/Components/UI/ProviderElements/ServerElements/IpInfoData.razor.rz.scp.css */
/* _content/WebUI/Components/UI/ProviderElements/ServerElements/ServerDetails.razor.rz.scp.css */
/* _content/WebUI/Components/UI/ProviderElements/ServerElements/ServerDetailsModal.razor.rz.scp.css */
.modal-overlay[b-flbkjt85up] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: all 0.3s ease;
}

.modal-content[b-flbkjt85up] {
    background-color: var(--dark);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal-header[b-flbkjt85up] {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--dark);
    z-index: 1;
}

.modal-title[b-flbkjt85up] {
    font-size: 20px;
    font-weight: 600;
}

.modal-title span[b-flbkjt85up] {
    color: var(--primary);
}

.modal-close[b-flbkjt85up] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.modal-close:hover[b-flbkjt85up] {
    background: rgba(255, 255, 255, 0.2);
}

.modal-body[b-flbkjt85up] {
    padding: 20px;
}

.modal-footer[b-flbkjt85up] {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
    background-color: var(--dark);
    z-index: 1;
}

/* Server status section */
.server-status-section[b-flbkjt85up] {
    margin-bottom: 24px;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.server-status-header[b-flbkjt85up] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.server-status-indicator[b-flbkjt85up] {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.server-status-indicator i[b-flbkjt85up] {
    margin-right: 8px;
}

.server-status-indicator.status-online[b-flbkjt85up] {
    background-color: rgba(16, 185, 129, 0.2);
    color: var(--secondary);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.server-status-indicator.status-offline[b-flbkjt85up] {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.server-uptime[b-flbkjt85up] {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.server-uptime i[b-flbkjt85up] {
    margin-right: 8px;
    color: var(--primary);
}

/* Metrics container */
.metrics-container[b-flbkjt85up] {
    margin-bottom: 20px;
}

.server-detail-title[b-flbkjt85up] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.last-updated[b-flbkjt85up] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
    font-style: italic;
}

/* Metrics */
.metric-group[b-flbkjt85up] {
    margin-bottom: 14px;
}

.metric-label[b-flbkjt85up] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.metric-label-text[b-flbkjt85up] {
    color: rgba(255, 255, 255, 0.7);
}

.metric-value[b-flbkjt85up] {
    color: white;
    font-weight: 500;
}

.metric-bar[b-flbkjt85up] {
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.metric-fill[b-flbkjt85up] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 4px;
}

.metric-fill.warning[b-flbkjt85up] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.metric-fill.critical[b-flbkjt85up] {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* No metrics state */
.no-metrics[b-flbkjt85up] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    background-color: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.no-metrics i[b-flbkjt85up] {
    font-size: 32px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.3);
}

/* Server detail sections */
.server-detail-section[b-flbkjt85up] {
    margin-bottom: 24px;
    background-color: rgba(15, 23, 42, 0.6);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.server-detail-grid[b-flbkjt85up] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item[b-flbkjt85up] {
    margin-bottom: 8px;
}

.detail-label[b-flbkjt85up] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-bottom: 4px;
}

.detail-value[b-flbkjt85up] {
    font-size: 14px;
    font-weight: 500;
    color: white;
}
/* _content/WebUI/Components/UI/ProviderElements/ServerElements/ServerLocationMap.razor.rz.scp.css */