@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@600;700;800;900&display=swap');

/* ==========================================================================
   ZYROHOST PTEROCA SIDEBAR & SHADCN COMPOSITION
   Clean PteroCA Nav Items • No Ugly Scrollbar Line • Sticky Header & Footer • Flush Layout
   ========================================================================== */

/* 0. EasyAdmin Layout & Sidebar Variables Override */
:root {
    --sidebar-max-width: 250px !important;
    --sidebar-min-width: 250px !important;
    --sidebar-width: 250px !important;
    --sidebar-padding-left: 0px !important;
    --sidebar-padding-right: 0px !important;
    --resize-handler-width: 0px !important;
}

/* 1. Core Layout & Flush Structure */
html,
body.ea {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

.wrapper {
    display: flex !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: #000000 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

@media (min-width: 992px) {
    .sidebar-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
        inline-size: 250px !important;
        min-inline-size: 250px !important;
        max-inline-size: 250px !important;
        flex-shrink: 0 !important;
        z-index: 1020 !important;
        background: #000000 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-content {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
        max-width: calc(100% - 250px) !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: transparent !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

.sidebar,
#app-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    inline-size: 250px !important;
    min-inline-size: 250px !important;
    max-inline-size: 250px !important;
    background: #000000 !important;
    border-right: 1px solid #141414 !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
}

.ea-dark-scheme .sidebar-wrapper {
    background: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

.ea-dark-scheme .sidebar,
.ea-dark-scheme #app-sidebar {
    background: #000000 !important;
    border-right: 1px solid #141414 !important;
}

#sidebar-resizer-handler,
#content-resizer-handler,
.resizer-handler {
    display: none !important;
    width: 0 !important;
    inline-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* 2. Top Bar (content-top) Flush & Aligned */
.content-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 1.25rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.content-top-left-actions,
.sidebar-trigger-btn,
#sidebar-toggle-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.sidebar-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: 1px solid #1c1c1c !important;
    color: #888888 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
}

.sidebar-trigger-btn:hover {
    background-color: #141414 !important;
    color: #FFFFFF !important;
    border-color: #2a2a2a !important;
}

.sidebar-trigger-icon {
    width: 16px !important;
    height: 16px !important;
}

.navbar-custom-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-left: auto !important;
}

/* 3. Sticky Sidebar Header (Workspace Floating Row - Resend style) */
.main-header.sidebar-header {
    flex-shrink: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0.6rem 0.85rem !important;
    border-bottom: none !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.sidebar-header-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    cursor: default !important;
    pointer-events: none !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.sidebar-header-card:hover {
    background-color: transparent !important;
}

.sidebar-header-chevrons {
    display: none !important;
    visibility: hidden !important;
}

.sidebar-header-logo-box {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.sidebar-brand-logo {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    display: block !important;
    filter: none !important;
}

.sidebar-header-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

.sidebar-header-title {
    font-family: 'Plus Jakarta Sans', 'Outfit', 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.025em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.sidebar-header-title .brand-zyro {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}

.sidebar-header-title .brand-host {
    color: #38bdf8 !important; /* Flat light blue */
    font-weight: 800 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
    letter-spacing: -0.025em !important;
}

.sidebar-header-subtitle {
    display: none !important;
}

.sidebar-header-chevrons,
.sidebar-user-chevrons {
    color: #666666 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease !important;
}

.sidebar-header-card:hover .sidebar-header-chevrons,
.sidebar-user-card:hover .sidebar-user-chevrons {
    color: #a1a1a1 !important;
}

/* 4. Scrollable Middle Content - SCROLLBAR COMPLETELY HIDDEN */
.sidebar-content-scrollable,
#main-menu,
.sidebar {
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE 10+ */
}

.sidebar-content-scrollable::-webkit-scrollbar,
#main-menu::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    display: none !important;
    /* Chrome / Safari / Edge */
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.sidebar-content-scrollable {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #000000 !important;
}

/* 5. Resend Nav Items Layout & Aesthetics */
#main-menu {
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    background: #000000 !important;
}

#main-menu .menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Section Header (MENU) - Completely hidden */
#main-menu .menu .menu-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#main-menu .menu .menu-header .menu-header-contents,
#main-menu .menu .menu-header .menu-item-label {
    display: none !important;
    visibility: hidden !important;
}

/* Resend Menu Items */
#main-menu .menu .menu-item {
    border-radius: 8px !important;
    margin: 2px 10px !important;
    transition: all 0.12s ease !important;
    list-style: none !important;
    position: relative !important;
    border: none !important;
}

#main-menu .menu .menu-item-contents {
    display: flex !important;
    align-items: center !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    text-decoration: none !important;
    color: #A1A1A1 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    /* 14px */
    letter-spacing: -0.01em !important;
    background: transparent !important;
    border: none !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

#main-menu .menu .menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 14px !important;
    margin-right: 10px !important;
    color: #8F8F8F !important;
    flex-shrink: 0 !important;
    transition: color 0.12s ease !important;
}

#main-menu .menu .menu-item-label {
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-grow: 1 !important;
}

/* Resend Hover State: Background #121212, text white */
#main-menu .menu .menu-item:hover>.menu-item-contents,
#main-menu .menu .menu-item-contents:hover {
    background: #121212 !important;
    color: #ffffff !important;
    border: none !important;
}

#main-menu .menu .menu-item:hover .menu-item-label,
#main-menu .menu .menu-item:hover .menu-icon,
#main-menu .menu .menu-item-contents:hover .menu-icon {
    color: #ffffff !important;
}

/* Resend Active State: Solid dark capsule #1F1F1F, text & icon pure white */
#main-menu .menu .menu-item.active>.menu-item-contents,
#main-menu .menu .menu-item.active {
    background: #1F1F1F !important;
    border: none !important;
    border-radius: 8px !important;
}

#main-menu .menu .menu-item.active>.menu-item-contents {
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

#main-menu .menu .menu-item.active .menu-item-label,
#main-menu .menu .menu-item.active:not(.expanded) a {
    color: #ffffff !important;
    font-weight: 500 !important;
}

#main-menu .menu .menu-item.active .menu-icon,
#main-menu .menu .menu-item.active:not(.expanded) .menu-icon {
    color: #ffffff !important;
}

#main-menu .menu .menu-icon.fas,
#main-menu .menu .menu-icon.fa-solid,
#main-menu .menu .menu-icon i.fas,
#main-menu .menu .menu-icon i.fa-solid,
.server-tab-item .menu-icon.fas,
.server-tab-item .menu-icon.fa-solid,
.server-tab-item .menu-icon i {
    font-weight: 900 !important;
    font-style: normal !important;
}

/* Submenu Indicator */
.menu-item .icon.submenu-toggle-icon,
#main-menu .menu .submenu-toggle-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    color: #555555 !important;
    font-size: 10px !important;
    transition: transform 0.2s ease, color 0.12s ease !important;
}

#main-menu .menu .menu-item:hover .submenu-toggle-icon {
    color: #888888 !important;
}

#main-menu .menu .menu-item.active .submenu-toggle-icon {
    color: #ffffff !important;
}

#main-menu .menu .menu-item.expanded>.submenu-toggle-icon,
#main-menu .menu .menu-item.expanded .menu-item-contents>.submenu-toggle-icon {
    transform: rotate(90deg) !important;
}

/* Submenu items */
#main-menu .menu .submenu {
    list-style: none !important;
    padding: 0.25rem 0 0.25rem 0.5rem !important;
    margin: 2px 0 3px 20px !important;
    border-left: 1px solid #141414 !important;
}

#main-menu .menu .submenu .menu-item {
    margin: 2px 0 !important;
    background: transparent !important;
    border: none !important;
}

#main-menu .menu .submenu .menu-item-contents {
    padding: 6px 10px 6px 18px !important;
    font-size: 0.8125rem !important;
    /* 13px */
    font-weight: 400 !important;
    color: #888888 !important;
    border-radius: 6px !important;
}

#main-menu .menu .submenu .menu-item:hover>.menu-item-contents {
    background: #121212 !important;
    color: #ffffff !important;
}

#main-menu .menu .submenu .menu-item.active>.menu-item-contents {
    background: #1F1F1F !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* 6. Sticky Sidebar Footer (User Profile Floating Row - Resend style) */
.sidebar-footer {
    flex-shrink: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0.5rem 0.65rem !important;
    border-top: none !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.sidebar-user-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    padding: 0.45rem 0.6rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    user-select: none;
    box-sizing: border-box !important;
}

.sidebar-user-card:hover {
    background-color: #121212 !important;
}

.sidebar-user-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 1px solid #222222 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #161616 !important;
}

.sidebar-user-avatar .user-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.sidebar-user-avatar .user-avatar-placeholder {
    color: #888888 !important;
    font-size: 0.75rem !important;
}

.sidebar-user-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

.sidebar-user-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.84375rem !important;
    /* 13.5px */
    font-weight: 500 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
}

.sidebar-user-email {
    display: none !important;
}

.sidebar-footer .dropdown-menu {
    background: #0a0a0a !important;
    border: 1px solid #1c1c1c !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
    padding: 6px !important;
}

.sidebar-footer .dropdown-menu .dropdown-item {
    color: #999999 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
    transition: all 0.15s ease !important;
}

.sidebar-footer .dropdown-menu .dropdown-item:hover {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

.sidebar-footer .dropdown-menu .dropdown-divider {
    border-top: 1px solid #1a1a1a !important;
    margin: 4px 0 !important;
}

/* 7. COLLAPSED ICON MODE (width: 64px) */
@media (min-width: 992px) {

    body.sidebar-collapsed .sidebar-wrapper,
    html.sidebar-collapsed .sidebar-wrapper {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        inline-size: 64px !important;
        min-inline-size: 64px !important;
        max-inline-size: 64px !important;
    }

    body.sidebar-collapsed .sidebar,
    html.sidebar-collapsed .sidebar,
    .sidebar.collapsed,
    #app-sidebar.collapsed {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
        inline-size: 64px !important;
        min-inline-size: 64px !important;
        max-inline-size: 64px !important;
        background: #000000 !important;
        border-right: 1px solid #141414 !important;
    }

    body.sidebar-collapsed .sidebar-header-card,
    html.sidebar-collapsed .sidebar-header-card,
    .sidebar.collapsed .sidebar-header-card {
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border-color: transparent !important;
    }

    body.sidebar-collapsed .sidebar-header-logo-box,
    html.sidebar-collapsed .sidebar-header-logo-box,
    .sidebar.collapsed .sidebar-header-logo-box {
        margin: 0 auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
    }

    body.sidebar-collapsed .sidebar-header-info,
    body.sidebar-collapsed .sidebar-header-chevrons,
    html.sidebar-collapsed .sidebar-header-info,
    html.sidebar-collapsed .sidebar-header-chevrons,
    .sidebar.collapsed .sidebar-header-info,
    .sidebar.collapsed .sidebar-header-chevrons {
        display: none !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-header,
    html.sidebar-collapsed #main-menu .menu .menu-header,
    .sidebar.collapsed #main-menu .menu .menu-header {
        height: 1px !important;
        margin: 0.5rem 0.5rem !important;
        background: #141414 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-header *,
    html.sidebar-collapsed #main-menu .menu .menu-header *,
    .sidebar.collapsed #main-menu .menu .menu-header * {
        display: none !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-item,
    html.sidebar-collapsed #main-menu .menu .menu-item,
    .sidebar.collapsed #main-menu .menu .menu-item {
        margin: 3px 0 !important;
        display: flex !important;
        justify-content: center !important;
        border-left: none !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-item-contents,
    html.sidebar-collapsed #main-menu .menu .menu-item-contents,
    .sidebar.collapsed #main-menu .menu .menu-item-contents {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-item.active>.menu-item-contents,
    html.sidebar-collapsed #main-menu .menu .menu-item.active>.menu-item-contents,
    .sidebar.collapsed #main-menu .menu .menu-item.active>.menu-item-contents {
        background: #1F1F1F !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-item.active .menu-icon,
    html.sidebar-collapsed #main-menu .menu .menu-item.active .menu-icon,
    .sidebar.collapsed #main-menu .menu .menu-item.active .menu-icon {
        color: #ffffff !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-item-label,
    body.sidebar-collapsed #main-menu .menu .submenu-toggle-icon,
    body.sidebar-collapsed #main-menu .menu .menu-item-badge,
    body.sidebar-collapsed #main-menu .menu .submenu,
    html.sidebar-collapsed #main-menu .menu .menu-item-label,
    html.sidebar-collapsed #main-menu .menu .submenu-toggle-icon,
    html.sidebar-collapsed #main-menu .menu .menu-item-badge,
    html.sidebar-collapsed #main-menu .menu .submenu,
    .sidebar.collapsed #main-menu .menu .menu-item-label,
    .sidebar.collapsed #main-menu .menu .submenu-toggle-icon,
    .sidebar.collapsed #main-menu .menu .menu-item-badge,
    .sidebar.collapsed #main-menu .menu .submenu {
        display: none !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-icon,
    html.sidebar-collapsed #main-menu .menu .menu-icon,
    .sidebar.collapsed #main-menu .menu .menu-icon {
        margin: 0 !important;
        font-size: 15px !important;
        width: 18px !important;
        height: 18px !important;
        color: #8F8F8F !important;
    }

    body.sidebar-collapsed #main-menu .menu .menu-item.active .menu-icon {
        color: #ffffff !important;
    }

    body.sidebar-collapsed .sidebar-user-card,
    html.sidebar-collapsed .sidebar-user-card,
    .sidebar.collapsed .sidebar-user-card {
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border-color: transparent !important;
    }

    body.sidebar-collapsed .sidebar-user-avatar,
    html.sidebar-collapsed .sidebar-user-avatar,
    .sidebar.collapsed .sidebar-user-avatar {
        margin: 0 auto !important;
        background: #161616 !important;
        border: 1px solid #222222 !important;
        border-radius: 50% !important;
    }

    body.sidebar-collapsed .sidebar-user-info,
    body.sidebar-collapsed .sidebar-user-chevrons,
    html.sidebar-collapsed .sidebar-user-info,
    html.sidebar-collapsed .sidebar-user-chevrons,
    .sidebar.collapsed .sidebar-user-info,
    .sidebar.collapsed .sidebar-user-chevrons {
        display: none !important;
    }

    .sidebar-backdrop {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* 8. Mobile Responsive Offcanvas (< 992px) */
@media (max-width: 991.98px) {
    .wrapper {
        flex-direction: column !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    .main-content {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .responsive-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.65rem !important;
        background: #000000 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 0 16px !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1025 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    /* Clean Frameless Hamburger Button (No Box, No Card, No Border) */
    .responsive-nav-toggler,
    #navigation-toggler {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        color: #ffffff !important;
        font-size: 1.35rem !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
        box-shadow: none !important;
        outline: none !important;
        flex-shrink: 0 !important;
    }

    .responsive-nav-toggler:hover,
    #navigation-toggler:hover,
    .responsive-nav-toggler:focus,
    #navigation-toggler:focus {
        background: transparent !important;
        border: none !important;
        border-color: transparent !important;
        color: #38bdf8 !important;
        transform: scale(1.08) !important;
        box-shadow: none !important;
    }

    /* Mobile Header Right Controls: Search, Notification, Avatar */
    .responsive-header-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-left: auto !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
    }

    /* Search Bar */
    .responsive-search-box {
        position: relative !important;
        flex: 1 1 auto !important;
        max-width: 190px !important;
        min-width: 110px !important;
    }

    .responsive-search-form {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .responsive-search-icon {
        position: absolute !important;
        left: 10px !important;
        color: #64748b !important;
        font-size: 12px !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .responsive-search-input {
        width: 100% !important;
        height: 34px !important;
        padding: 0 10px 0 30px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        font-size: 12.5px !important;
        font-family: inherit !important;
        outline: none !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
    }

    .responsive-search-input:focus {
        background: rgba(255, 255, 255, 0.09) !important;
        border-color: #38bdf8 !important;
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
    }

    .responsive-search-input::placeholder {
        color: #64748b !important;
    }

    /* Notification Icon */
    .responsive-notif-dropdown {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .responsive-notif-btn {
        background: transparent !important;
        border: none !important;
        color: #94a3b8 !important;
        font-size: 1.15rem !important;
        padding: 4px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        position: relative !important;
        transition: color 0.15s ease !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .responsive-notif-btn:hover {
        color: #38bdf8 !important;
    }

    .responsive-notif-badge {
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        width: 6px !important;
        height: 6px !important;
        background: #38bdf8 !important;
        border-radius: 50% !important;
        box-shadow: 0 0 4px #38bdf8 !important;
    }

    .responsive-notif-menu {
        min-width: 200px !important;
        background: #0d0f14 !important;
        border: 1px solid #1e2433 !important;
        border-radius: 10px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    }

    /* Avatar Circle */
    .responsive-user-dropdown {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .responsive-avatar-btn {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        box-shadow: none !important;
    }

    .responsive-avatar-img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
        display: block !important;
        transition: border-color 0.15s ease !important;
    }

    .responsive-avatar-btn:hover .responsive-avatar-img,
    .responsive-avatar-btn:focus .responsive-avatar-img {
        border-color: #38bdf8 !important;
    }

    .responsive-avatar-circle {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #111827 !important;
        border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #38bdf8 !important;
        font-size: 13px !important;
        transition: all 0.15s ease !important;
    }

    .responsive-avatar-btn:hover .responsive-avatar-circle {
        border-color: #38bdf8 !important;
        color: #ffffff !important;
    }

    /* Permanently hide old logo branding & user/settings action buttons on mobile header */
    .responsive-brand-container,
    #responsive-header-logo,
    .responsive-header-actions,
    .responsive-header .responsive-brand-container,
    .responsive-header #responsive-header-logo,
    .responsive-header .responsive-header-actions {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Permanently hide top navbar balance, user account profile, and settings on mobile preview */
    .content-top .navbar-custom-menu,
    .content-top .user-menu-wrapper,
    .content-top .user-details,
    .content-top .dropdown-settings {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .content-top.ea-search-disabled {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .content-top {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1045 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        cursor: pointer !important;
        touch-action: none;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.ea-mobile-sidebar-open .sidebar-backdrop,
    body.ea-mobile-sidebar-visible .sidebar-backdrop,
    html.ea-mobile-sidebar-open .sidebar-backdrop,
    html.ea-mobile-sidebar-visible .sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }

    /* Suppress duplicate dynamic modal-backdrop created by EasyAdmin */
    .modal-backdrop.fade.show {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .sidebar-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        inset-block-start: 0 !important;
        inset-block-end: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 85vw !important;
        inline-size: 280px !important;
        min-inline-size: 280px !important;
        max-inline-size: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 1050 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
        box-shadow: none !important;
        background: #090909 !important;
        border-right: 1px solid #1a1a1a !important;
        border-left: none !important;
        border-top: none !important;
        border-bottom: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.ea-mobile-sidebar-open .sidebar-wrapper,
    body.ea-mobile-sidebar-visible .sidebar-wrapper,
    html.ea-mobile-sidebar-open .sidebar-wrapper,
    html.ea-mobile-sidebar-visible .sidebar-wrapper {
        transform: translateX(0) !important;
        box-shadow: 12px 0 35px rgba(0, 0, 0, 0.75) !important;
    }

    .sidebar,
    #app-sidebar {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        inset: auto !important;
        inset-block-start: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        inset-block-end: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        inline-size: 100% !important;
        min-inline-size: 100% !important;
        max-inline-size: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        block-size: 100% !important;
        min-block-size: 100% !important;
        max-block-size: 100% !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1 !important;
    }

    body.ea-mobile-sidebar-open,
    body.ea-mobile-sidebar-visible,
    html.ea-mobile-sidebar-open,
    html.ea-mobile-sidebar-visible {
        overflow: hidden !important;
    }

    .main-header.sidebar-header {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 60px !important;
        min-height: 60px !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    .sidebar-header-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    .sidebar-header-info,
    .sidebar-header-chevrons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .sidebar-content-scrollable {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    #main-menu,
    #main-menu .menu,
    #main-menu .menu .menu-item,
    #main-menu .menu .menu-item-contents {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #main-menu {
        display: block !important;
    }

    #main-menu .menu {
        flex-direction: column !important;
    }

    #main-menu .menu .menu-header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #main-menu .menu .menu-item-label {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .sidebar-footer {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 58px !important;
        min-height: 58px !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    .sidebar-user-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    .sidebar-user-info,
    .sidebar-user-chevrons {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .sidebar-trigger-btn {
        display: none !important;
    }

    .main-content {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active,
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active:focus,
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):focus,
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
}

.btn-outline-primary:hover i,
.btn-outline-primary:focus i,
.btn-outline-primary:active i {
    color: #fff !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    color: #fff !important;
}

.btn-outline-success:hover i,
.btn-outline-success:focus i,
.btn-outline-success:active i {
    color: #fff !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: #fff !important;
}

.btn-outline-info:hover i,
.btn-outline-info:focus i,
.btn-outline-info:active i {
    color: #fff !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: #fff !important;
}

.btn-outline-secondary:hover i,
.btn-outline-secondary:focus i,
.btn-outline-secondary:active i {
    color: #fff !important;
}

.ea-dark-scheme .form-switch .form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-bs-theme="light"] input.form-control:read-only,
[data-bs-theme="light"] textarea.form-control:read-only,
[data-bs-theme="light"] select.form-select:disabled {
    background-color: #d5d5d5;
}

[data-bs-theme="dark"] input.form-control:read-only,
[data-bs-theme="dark"] textarea.form-control:read-only,
[data-bs-theme="dark"] select.form-select:disabled {
    background-color: var(--bs-secondary-bg);
}


.dropdown-settings .dropdown-item.active {
    box-shadow: inset 0 0 0 1px rgba(89, 134, 165, 0.5);
}

.panel-sidebar-logo {
    width: 95%;
}

.panel-login-logo {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 1rem;
}

/* Split Screen Login Layout */
/* Override EasyAdmin default login styles */
/* ==========================================================================
   ZYROHOST 100% RESEND-STYLE CENTERED AUTH (Gen Z Minimalist Canvas)
   ========================================================================== */
.page-login-resend,
.page-login-split,
.ea-dark-scheme.page-login-resend,
.ea-light-scheme.page-login-resend,
.ea-dark-scheme.page-login-split,
.ea-light-scheme.page-login-split {
    background-color: #000000 !important;
    color: #ffffff !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.page-login-resend .wrapper,
.page-login-resend .content-wrapper,
.page-login-split .wrapper,
.page-login-split .content-wrapper {
    min-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: transparent !important;
}

/* Top Left < Home Navigation */
.auth-home-link {
    position: fixed;
    top: 28px;
    left: 36px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #888888 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
}

.auth-home-link:hover {
    color: #ffffff !important;
    transform: translateX(-2px);
}

/* Resend Silk Fabric Background */
.auth-resend-silk {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.auth-resend-silk svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Center Main Stage */
.auth-resend-container {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 40px 20px;
}

.auth-resend-card {
    width: 100%;
    max-width: 410px;
    background: transparent;
    margin: 0 auto;
    position: relative;
    transform-origin: center top;
    will-change: transform, opacity, min-height;
}

/* Brand Logo - Pure Logo, No Rounded Card Box, Bigger Size */
.auth-brand-logo-wrapper,
.auth-brand-logo-box {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px auto !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.auth-brand-logo-wrapper:hover,
.auth-brand-logo-box:hover {
    transform: scale(1.08) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.auth-brand-logo,
.auth-brand-logo-wrapper img,
.auth-brand-logo-box img {
    height: 62px !important;
    max-height: 68px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.45)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.85)) !important;
    transition: filter 0.3s ease, transform 0.3s ease !important;
}

.auth-brand-logo-wrapper:hover img,
.auth-brand-logo-box:hover img,
.auth-brand-logo:hover {
    filter: drop-shadow(0 0 28px rgba(0, 229, 255, 0.75)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.95)) !important;
}

/* Title & Subtitle */
.auth-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
}

.auth-subtitle {
    font-size: 13.5px !important;
    color: #888888 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
}

.auth-switch-btn {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}

.auth-switch-btn:hover {
    color: #38bdf8 !important;
}

/* Social Auth Buttons Grid */
.social-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.social-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    height: 42px;
}

.social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.social-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* Badge Last Used */
.badge-last-used {
    position: absolute;
    top: -9px;
    right: 10px;
    background: #1c1d22;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Divider 'or' */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.auth-divider .line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-divider .text {
    color: #555555;
    font-size: 12px;
    padding: 0 12px;
    text-transform: lowercase;
    font-weight: 500;
}

/* Resend Form Controls */
.page-login-resend .form-label,
.page-login-split .form-label {
    display: block;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #999999 !important;
    margin-bottom: 7px !important;
}

.resend-input,
.page-login-resend .form-control,
.page-login-split .form-control {
    width: 100% !important;
    background-color: #0e1015 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    padding: 10px 14px !important;
    height: 42px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.resend-input::placeholder,
.page-login-resend .form-control::placeholder,
.page-login-split .form-control::placeholder {
    color: #444444 !important;
    font-size: 13.5px !important;
}

.resend-input:focus,
.page-login-resend .form-control:focus,
.page-login-split .form-control:focus {
    background-color: #12141a !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 16px rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Password Input Wrapper with Integrated Eye Button */
.input-password-wrapper {
    position: relative;
    width: 100%;
}

.input-password-wrapper .form-control {
    padding-right: 40px !important;
}

.btn-toggle-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #666666;
    cursor: pointer;
    padding: 4px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.btn-toggle-eye:hover {
    color: #ffffff;
}

.forgot-link {
    font-size: 12px;
    color: #888888 !important;
    text-decoration: none !important;
    font-weight: 400;
    transition: color 0.15s ease;
}

.forgot-link:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Submit Button */
.btn-resend-primary,
.page-login-resend .btn-primary,
.page-login-resend button[type="submit"],
.page-login-split .btn-primary,
.page-login-split button[type="submit"] {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    height: 42px !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-top: 18px;
}

.btn-resend-primary:hover,
.page-login-resend .btn-primary:hover,
.page-login-resend button[type="submit"]:hover,
.page-login-split .btn-primary:hover,
.page-login-split button[type="submit"]:hover {
    background: #e6e6e6 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

.btn-resend-primary:active,
.page-login-resend .btn-primary:active,
.page-login-resend button[type="submit"]:active,
.page-login-split .btn-primary:active,
.page-login-split button[type="submit"]:active {
    transform: translateY(0);
}

/* Checkbox & Terms */
.page-login-resend .form-check,
.page-login-split .form-check,
.auth-checkbox-wrapper {
    display: flex !important;
    align-items: center !important;
    margin-top: 16px !important;
    margin-bottom: 22px !important;
    padding-left: 0 !important;
}

.auth-checkbox-wrapper .form-check {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding-left: 0 !important;
}

.page-login-resend .form-check-input,
.page-login-split .form-check-input {
    background-color: #0e1015 !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    float: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.page-login-resend .form-check-input:hover,
.page-login-split .form-check-input:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.page-login-resend .form-check-input:checked,
.page-login-split .form-check-input:checked {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='m5 10 3.5 3.5 7-7'/%3e%3c/svg%3e") !important;
    background-size: 11px 11px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.25) !important;
}

.page-login-resend .form-check-label,
.page-login-split .form-check-label {
    color: #888888 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    margin-left: 9px !important;
    user-select: none !important;
    line-height: 1.4 !important;
}

.page-login-resend .form-check-label:hover,
.page-login-split .form-check-label:hover {
    color: #ffffff !important;
}

/* Alerts */
.page-login-resend .alert,
.page-login-split .alert {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
}

.page-login-resend .alert-info,
.page-login-split .alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: #93c5fd !important;
}

.page-login-resend .alert-success,
.page-login-split .alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    color: #6ee7b7 !important;
}

/* Disclaimer Footer */
.auth-disclaimer {
    font-size: 12px;
    color: #555555;
    text-align: center;
    margin-top: 24px;
    line-height: 1.5;
}

.auth-disclaimer a {
    color: #888888 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.auth-disclaimer a:hover {
    color: #ffffff !important;
}

/* Responsiveness */
@media (max-width: 576px) {
    .auth-home-link {
        top: 20px;
        left: 20px;
    }
    .auth-resend-container {
        padding: 70px 16px 30px 16px;
    }
    .social-buttons-grid {
        grid-template-columns: 1fr;
    }
}

.login-wrapper .form-widget input {
    border-color: rgba(93, 137, 186, 0.5);
}

.form-widget .custom-file-input:focus~.custom-file-label,
.form-widget .form-select:focus,
.form-widget input.form-check-input:focus,
.form-widget input.form-control:focus,
.form-widget textarea.form-control:focus {
    border-color: #b8a494;
}

.form-check-input:checked {
    background-color: rgb(93, 137, 186);
    border-color: rgb(93, 137, 186);
}

.form-check-input:focus {
    border-color: rgb(93, 137, 186);
}

.main-header.register-header {
    margin-top: 50%;
}

.login-wrapper .content {
    padding-top: 1rem;
}

.login-wrapper .login-title {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    padding-bottom: 1.5rem;
}

.powered-by {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.powered-by a {
    color: inherit;
}

.default-page.container {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.ea-dark-scheme .default-page.container {
    background: var(--bs-body-bg);
}

.default-page.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, #f9f9f9 0%, #eaeaea 100%);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.default-page.container .row {
    padding: 20px;
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.05);
}

.product-image-container {
    height: 200px;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    border-radius: 7px;
}

.product-image {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.card-header {
    padding-top: 0.8rem;
    background-color: var(--primary-color);
    color: #FFFFFF;
}

input#command {
    border: 0.1 solid var(--bs-border-color);
    border-bottom: 0.13rem solid var(--primary-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-family: 'Fira Code', monospace, sans-serif;
    padding: 5px;
}

.server-stats-row {
    min-width: 300px;
}

.menu-item .icon.submenu-toggle-icon {
    color: #FFFFFF !important;
}

.hover-pointer:hover {
    cursor: pointer;
}

.user-menu-wrapper .user-avatar {
    background: unset;
}

.responsive-header {
    background: var(--primary-color);
}

.responsive-header i {
    color: #FFFFFF;
}

.responsive-header i.fa-user {
    color: var(--primary-color);
}

.responsive-header .dropdown-menu i {
    color: inherit;
}

.responsive-header .user-balance a {
    color: #FFFFFF;
}

.logo-compact {
    color: #FFFFFF;
}

.configuration-wrapper {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.configuration-wrapper .configuration-title,
.configuration-wrapper .configuration-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    padding-bottom: 1.5rem;
}

.configuration-wrapper .configuration-subtitle {
    font-size: 1rem;
}

body.page-configurator {
    background: var(--primary-color) !important;
    min-height: 100vh;
}

body.page-configurator::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    z-index: -1;
}

.page-configurator {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 3rem 1rem 2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Configurator Container */
.configurator-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Configurator Header */
.configurator-header {
    text-align: center;
    margin-bottom: 3rem;
}

.configurator-logo {
    margin-bottom: 1.5rem;
}

.configurator-logo img {
    max-height: 80px;
}

.configurator-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.configurator-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
}

/* Progress Stepper */
.configurator-stepper {
    position: relative;
    margin-bottom: 2.5rem;
    padding: 0 2rem;
}

.stepper-line {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 0;
}

.stepper-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ffffff;
    transition: width 0.5s ease;
}

.stepper-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.stepper-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.25rem;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.stepper-step.active .stepper-circle {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stepper-step.completed .stepper-circle {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    color: #22c55e;
}

.stepper-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    max-width: 100px;
    line-height: 1.3;
}

.stepper-step.active .stepper-label {
    color: #ffffff;
    font-weight: 600;
}

.stepper-step.completed .stepper-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Configuration Card */
.configuration-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
}

.configuration-card-body {
    padding: 2.5rem;
}

.configuration-card-body .row {
    margin: 0;
}

/* Configuration Step Visibility */
.configuration-step {
    display: none;
    margin-top: 0;
}

.configuration-step[data-step="0"] {
    display: block !important;
}

.configuration-step.d-none {
    display: none !important;
}

.configuration-card h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--stripe-gray-900);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.configuration-card .text-muted {
    color: var(--stripe-gray-600) !important;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.configuration-card .configuration-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--stripe-gray-900);
    margin-bottom: 1rem;
    margin-top: 0;
    text-align: center;
    letter-spacing: -0.01em;
}

.configuration-card .configuration-subtitle+.text-muted {
    margin-bottom: 1.5rem;
    margin-top: 0;
}

.configuration-card .form-label {
    font-weight: 500;
    color: var(--stripe-gray-700);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.configuration-card .form-control,
.configuration-card .form-select {
    border: 1px solid var(--stripe-gray-300);
    border-radius: var(--stripe-radius);
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    transition: all 0.15s ease;
}

.configuration-card .form-control:focus,
.configuration-card .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.configuration-card .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: var(--stripe-radius);
    font-size: 0.9375rem;
}

.configuration-card .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;
    color: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.configuration-card .btn-primary:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 85%, black) 0%, color-mix(in srgb, var(--secondary-color) 85%, black) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.configuration-card .btn-secondary {
    background: #ffffff;
    border: 1px solid var(--stripe-gray-300);
    color: var(--stripe-gray-700);
}

.configuration-card .btn-secondary:hover {
    background: var(--stripe-gray-50);
    border-color: var(--stripe-gray-400);
}

/* Configurator Footer */
.configurator-footer {
    text-align: center;
    padding-bottom: 1.5rem;
}

.configurator-footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.configurator-footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.configurator-footer-links a:hover {
    color: #ffffff;
}

.configurator-footer-links i {
    margin-right: 0.375rem;
}

.powered-by-configurator {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.powered-by-configurator a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.powered-by-configurator a:hover {
    color: #ffffff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .configurator-header {
        margin-bottom: 2rem;
    }

    .configurator-title {
        font-size: 1.5rem;
    }

    .configurator-subtitle {
        font-size: 0.875rem;
    }

    .configurator-stepper {
        padding: 0 1rem;
        margin-bottom: 2rem;
    }

    .stepper-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .stepper-label {
        font-size: 0.75rem;
        max-width: 80px;
    }

    .configuration-card-body {
        padding: 1.5rem;
    }

    .configuration-card h2 {
        font-size: 1.25rem;
    }

    .configurator-footer-links {
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 576px) {
    .page-configurator {
        padding: 1rem 0.5rem;
    }

    .stepper-circle {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    .stepper-label {
        font-size: 0.6875rem;
        max-width: 60px;
    }

    .stepper-line {
        top: 18px;
    }

    .configuration-card-body {
        padding: 1.25rem;
    }

    .configurator-logo img {
        max-height: 60px;
    }
}

/* Hide default configuration wrapper styles for new design */
.page-configurator .configuration-wrapper {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

#cart-ip-address {
    min-width: 150px;
    display: inline-block;
    font-weight: 600;
}

.placeholder {
    background-color: #b2b2b2;
    border-radius: 4px;
    min-width: 80px;
}

.server-card {
    transition: all 0.3s ease;
    border-radius: 12px !important;
    overflow: hidden;
}

.server-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.server-card-banner {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: transparent !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    line-height: 0 !important;
}

.server-banner-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 468 / 60 !important;
    object-fit: fill !important;
    object-position: top center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.3s ease !important;
}

.server-card:hover .server-banner-img {
    transform: scale(1.02) !important;
}

.server-banner-overlay {
    display: none !important;
}

.server-image {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.server-image:hover {
    transform: scale(1.05);
}

.spec-item {
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.spec-item:hover {
    border-color: #dee2e6;
    background-color: #f8f9fa !important;
}

.spec-value {
    font-weight: 600;
    color: #495057;
}

.server-actions .btn,
.server-action-btn {
    border-radius: 10px;
    font-weight: 600;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.server-actions .btn:hover,
.server-action-btn:hover {
    transform: translateY(-1.5px);
}

.expiry-info {
    border: 1px solid #e9ecef;
}

.badge {
    font-size: 0.75rem;
    font-weight: 500;
}

@media (max-width: 576px) {
    .server-specs .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .server-actions .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }
}

/* ===== Stripe-inspired Design System ===== */
:root {
    --stripe-gray-50: #f9fafb;
    --stripe-gray-100: #f3f4f6;
    --stripe-gray-200: #e5e7eb;
    --stripe-gray-300: #d1d5db;
    --stripe-gray-400: #9ca3af;
    --stripe-gray-500: #6b7280;
    --stripe-gray-600: #4b5563;
    --stripe-gray-700: #374151;
    --stripe-gray-800: #1f2937;
    --stripe-gray-900: #111827;

    --stripe-blue-50: #eff6ff;
    --stripe-blue-100: #dbeafe;
    --stripe-blue-500: #3b82f6;
    --stripe-blue-600: #2563eb;

    --stripe-green-50: #f0fdf4;
    --stripe-green-100: #dcfce7;
    --stripe-green-500: #22c55e;
    --stripe-green-600: #16a34a;

    --stripe-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --stripe-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --stripe-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --stripe-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);

    --stripe-radius: 8px;
    --stripe-radius-lg: 12px;

    /* Customizable brand colors - defaults */
    --primary-color: #5470D3;
    --background-color: #ffffff;
    --body-bg: #ffffff;
    --content-bg: #f6f9fc;
    --secondary-color: color-mix(in srgb, var(--primary-color) 92%, black 8%);
    --link-color: var(--primary-color);
    --link-hover-color: color-mix(in srgb, var(--primary-color) 85%, black 15%);
}

/* Dark mode color overrides */
.ea-dark-scheme {
    --stripe-gray-50: #1f2937;
    --stripe-gray-100: #374151;
    --stripe-gray-200: #4b5563;
    --stripe-gray-300: #6b7280;
    --stripe-gray-400: #9ca3af;
    --stripe-gray-500: #9ca3af;
    --stripe-gray-600: #d1d5db;
    --stripe-gray-700: #e5e7eb;
    --stripe-gray-800: #f3f4f6;
    --stripe-gray-900: #f9fafb;

    /* Customizable brand colors - dark mode defaults */
    --primary-color: #5470D3;
    --background-color: #0E1E2F;
    --body-bg: #1A2B3D;
    --content-bg: #0E1E2F;
    --secondary-color: color-mix(in srgb, var(--primary-color) 92%, black 8%);
    --link-color: var(--primary-color);
    --link-hover-color: color-mix(in srgb, var(--primary-color) 85%, white 15%);
    --bs-border-color: #243B53;
    --bs-card-cap-bg: #243B53;
    --bs-body-color: #E6EDF3;
    --bs-heading-color: #F8FAFC;
}

/* Fix text-dark in dark mode */
.ea-dark-scheme .text-dark {
    color: var(--bs-body-color) !important;
}

.ea-dark-scheme .text-muted {
    color: var(--bs-secondary-color) !important;
}

/* Card Styling - Stripe inspired */
.card {
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--stripe-shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ea-dark-scheme .card {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

.card:hover {
    box-shadow: var(--stripe-shadow-md);
    border-color: var(--stripe-gray-300);
}

.ea-dark-scheme .card:hover {
    border-color: var(--bs-border-color);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1.25rem 1.5rem;
    color: var(--stripe-gray-900);
    font-weight: 600;
}

.ea-dark-scheme .card-header {
    background-color: var(--bs-card-cap-bg);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-heading-color);
}

.card-header h5 {
    color: var(--stripe-gray-900);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
}

.ea-dark-scheme .card-header h5 {
    color: var(--bs-heading-color);
}

.card-header .text-white {
    color: var(--stripe-gray-900) !important;
}

.ea-dark-scheme .card-header .text-white {
    color: var(--bs-heading-color) !important;
}

.card-body {
    padding: 1.5rem;
}

/* Remove old colored headers */
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-primary {
    background-color: #fff !important;
}

.ea-dark-scheme .card-header.bg-success,
.ea-dark-scheme .card-header.bg-info,
.ea-dark-scheme .card-header.bg-primary {
    background-color: var(--bs-card-bg) !important;
}

/* Badge Styling - Stripe inspired */
.badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
    vertical-align: middle;
}

/* Override padding for badges with px-3 py-2 classes */
.badge.px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.badge.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.badge-success {
    background-color: var(--stripe-green-100);
    color: var(--stripe-green-600);
}

.badge-warning {
    background-color: #fef3c7;
    color: #d97706;
}

.badge-danger {
    background-color: #fee2e2;
    color: #dc2626;
}

.badge-secondary {
    background-color: var(--stripe-gray-200);
    color: var(--stripe-gray-700);
}

.badge-primary {
    background-color: var(--stripe-blue-100);
    color: var(--stripe-blue-600);
}

/* Bootstrap bg-* classes for badges */
.badge.bg-secondary {
    background-color: var(--stripe-gray-600) !important;
    color: #fff !important;
}

.badge.bg-warning {
    background-color: #f59e0b !important;
    color: #fff !important;
}

.badge.bg-success {
    background-color: var(--stripe-green-600) !important;
    color: #fff !important;
}

.badge.bg-danger {
    background-color: #dc2626 !important;
    color: #fff !important;
}

.badge.bg-primary {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.badge.bg-info {
    background-color: var(--stripe-blue-500) !important;
    color: #fff !important;
}

/* Ensure badge colors work in tables and anywhere else */
table .badge-success,
.table .badge-success {
    background-color: var(--stripe-green-100) !important;
    color: var(--stripe-green-600) !important;
}

table .badge-warning,
.table .badge-warning {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
}

table .badge-danger,
.table .badge-danger {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}

table .badge-secondary,
.table .badge-secondary {
    background-color: var(--stripe-gray-200) !important;
    color: var(--stripe-gray-700) !important;
}

table .badge-primary,
.table .badge-primary {
    background-color: var(--stripe-blue-100) !important;
    color: var(--stripe-blue-600) !important;
}

/* Button Styling - Stripe inspired */
.btn {
    font-weight: 500;
    border-radius: var(--stripe-radius);
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
    font-size: 0.875rem;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn-primary i {
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary:hover i,
.btn-primary:focus i,
.btn-primary:active i {
    color: #fff !important;
}

.btn-success {
    background-color: var(--stripe-green-600);
    border-color: var(--stripe-green-600);
    color: #fff;
}

.btn-success i {
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--stripe-green-500) !important;
    border-color: var(--stripe-green-500) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.btn-success:hover i,
.btn-success:focus i,
.btn-success:active i {
    color: #fff !important;
}

.btn-danger {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn-danger i {
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.btn-danger:hover i,
.btn-danger:focus i,
.btn-danger:active i {
    color: #fff !important;
}

.btn-danger {
    --button-danger-bg: #dc2626;
    --button-danger-color: #fff;
    --button-danger-border-color: #dc2626;
    --button-danger-hover-bg: #b91c1c;
    --button-danger-hover-color: #fff;
}

.ea-dark-scheme .btn-danger {
    --button-danger-bg: #b62324;
    --button-danger-color: #fff;
    --button-danger-hover-bg: #9a1b22;
    --button-danger-hover-color: #fff;
}

.btn-outline-primary {
    border-color: var(--stripe-gray-300);
    color: var(--stripe-gray-700);
    background-color: #fff;
}

.ea-dark-scheme .btn-outline-primary {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.btn-outline-primary i {
    color: var(--stripe-gray-700);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--stripe-gray-50) !important;
    border-color: var(--stripe-gray-400) !important;
    color: var(--stripe-gray-900) !important;
}

.btn-outline-primary:hover i,
.btn-outline-primary:focus i,
.btn-outline-primary:active i {
    color: var(--stripe-gray-900) !important;
}

.btn-outline-primary.active {
    background-color: var(--stripe-blue-600) !important;
    border-color: var(--stripe-blue-600) !important;
    color: #fff !important;
}

.btn-outline-primary.active i {
    color: #fff !important;
}

.btn-outline-success {
    border-color: var(--stripe-gray-300);
    color: var(--stripe-gray-700);
    background-color: #fff;
}

.bg-primary {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.ea-dark-scheme .btn-outline-success {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.btn-outline-success i {
    color: var(--stripe-gray-700);
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--stripe-green-50) !important;
    border-color: var(--stripe-green-600) !important;
    color: var(--stripe-green-600) !important;
}

.btn-outline-success:hover i,
.btn-outline-success:focus i,
.btn-outline-success:active i {
    color: var(--stripe-green-600) !important;
}

.btn-outline-success.active {
    background-color: var(--stripe-green-600) !important;
    border-color: var(--stripe-green-600) !important;
    color: #fff !important;
}

.btn-outline-success.active i {
    color: #fff !important;
}

.btn-outline-info {
    border-color: var(--stripe-gray-300);
    color: var(--stripe-gray-700);
    background-color: #fff;
}

.ea-dark-scheme .btn-outline-info {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.btn-outline-info i {
    color: var(--stripe-gray-700);
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: var(--stripe-blue-50) !important;
    border-color: var(--stripe-blue-600) !important;
    color: var(--stripe-blue-600) !important;
}

.btn-outline-info:hover i,
.btn-outline-info:focus i,
.btn-outline-info:active i {
    color: var(--stripe-blue-600) !important;
}

.btn-outline-info.active {
    background-color: var(--stripe-blue-600) !important;
    border-color: var(--stripe-blue-600) !important;
    color: #fff !important;
}

.btn-outline-info.active i {
    color: #fff !important;
}

.btn-outline-secondary {
    border-color: var(--stripe-gray-300);
    color: var(--stripe-gray-700);
    background-color: #fff;
}

.ea-dark-scheme .btn-outline-secondary {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.btn-outline-secondary i {
    color: var(--stripe-gray-700);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--stripe-gray-50) !important;
    border-color: var(--stripe-gray-400) !important;
    color: var(--stripe-gray-900) !important;
}

.btn-outline-secondary:hover i,
.btn-outline-secondary:focus i,
.btn-outline-secondary:active i {
    color: var(--stripe-gray-900) !important;
}

.btn-outline-secondary.active {
    background-color: var(--stripe-gray-700) !important;
    border-color: var(--stripe-gray-700) !important;
    color: #fff !important;
}

.btn-outline-secondary.active i {
    color: #fff !important;
}

/* Table Styling - Stripe inspired */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: var(--stripe-gray-50);
    color: var(--stripe-gray-700);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
}

.table tbody tr {
    border-bottom: 1px solid var(--bs-border-color);
}

.table tbody tr:hover {
    background-color: var(--stripe-gray-50);
}

.table tbody td {
    padding: 1rem;
    color: var(--stripe-gray-700);
}

/* List Group Styling - Stripe inspired */
.list-group-item {
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
    transition: background-color 0.15s ease;
}

.list-group-item:hover {
    background-color: var(--stripe-gray-50);
}

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

/* Typography improvements */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--stripe-gray-900);
    font-weight: 600;
}

.text-muted {
    color: var(--stripe-gray-500) !important;
}

/* Icon styling */
.card-header i {
    color: var(--stripe-gray-600);
}

/* Rounded corners */
.rounded-3 {
    border-radius: var(--stripe-radius-lg) !important;
}

.rounded-pill {
    border-radius: 50rem !important;
}

/* Shadow utilities */
.shadow-sm {
    box-shadow: var(--stripe-shadow-sm) !important;
}

.shadow {
    box-shadow: var(--stripe-shadow) !important;
}

.shadow-md {
    box-shadow: var(--stripe-shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--stripe-shadow-lg) !important;
}

/* Background utilities */
.bg-light {
    background-color: var(--stripe-gray-50) !important;
}

.bg-opacity-10 {
    opacity: 0.1;
}

/* Dashboard / Page header styling: remove banner card and legacy icon/title/subtitle */
.dashboard-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

.ea-dark-scheme .dashboard-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.dashboard-header .rounded-circle,
.dashboard-header .bg-primary.rounded-circle,
.dashboard-header .bg-warning.rounded-circle,
.dashboard-header h4,
.dashboard-header .text-muted {
    display: none !important;
}

.dashboard-header .d-flex.align-items-center.justify-content-between {
    justify-content: flex-end !important;
}

.dashboard-header .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Widget spacing improvements */
.card+.card {
    margin-top: 0;
}

/* Server list item styling */
.list-group-item h6 {
    color: var(--stripe-gray-900);
    font-weight: 600;
    font-size: 0.9375rem;
}

.list-group-item .text-muted,
.list-group-item small {
    color: var(--stripe-gray-500) !important;
    font-size: 0.8125rem;
}

/* Icon in list styling */
.list-group-item .fa-server {
    color: var(--stripe-gray-600);
}

/* Empty state styling */
.card-body .text-center h6 {
    color: var(--stripe-gray-900);
}

.card-body .text-center .text-muted {
    color: var(--stripe-gray-500) !important;
}

.card-body .text-center .bg-light {
    background-color: var(--stripe-gray-100) !important;
}

.card-body .text-center .text-muted.fs-5 {
    color: var(--stripe-gray-400) !important;
}

/* Table improvements for activity log */
.table thead th i {
    opacity: 0.6;
}

.table tbody td .badge {
    background-color: var(--bs-border-color, #2D3F52);
    color: var(--stripe-gray-600);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
}

/* Improve icon containers */
.rounded-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Focus states for better accessibility */
.btn:focus-visible {
    outline: 2px solid var(--stripe-blue-500);
    outline-offset: 2px;
}

/* Smooth transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

*:not(.btn):not(.card):not(.list-group-item):not(.badge) {
    transition: none;
}

/* Container spacing */
.container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1200px) {
    .container-fluid {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Row gap improvements */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* Main content area background */
body {
    background-color: var(--content-bg);
}

/* Better text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Link styling */
a {
    color: var(--stripe-blue-600);
    text-decoration: none;
}

a:hover {
    color: var(--stripe-blue-500);
}

/* Input and form styling improvements */
.form-control,
.form-select {
    border-color: var(--stripe-gray-300);
    border-radius: var(--stripe-radius);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Better placeholder text */
::placeholder {
    color: var(--stripe-gray-400);
}

/* Stripe-like dividers */
hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

/* Alert/notification styling */
.alert {
    border-radius: var(--stripe-radius-lg);
    border: 1px solid var(--bs-border-color);
}

/* Modal improvements */
.modal-content {
    border-radius: var(--stripe-radius-lg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--stripe-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1.25rem 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 1.25rem 1.5rem;
}

/* Dropdown improvements */
.dropdown-menu {
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--stripe-shadow-lg);
    border-radius: var(--stripe-radius);
}

.dropdown-item {
    color: var(--stripe-gray-700);
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.dropdown-item:hover {
    background-color: var(--stripe-gray-50);
    color: var(--stripe-gray-900);
}

/* Pagination improvements */
.pagination {
    gap: 0.25rem;
}

.page-link {
    border-color: var(--stripe-gray-300);
    color: var(--stripe-gray-700);
    border-radius: var(--stripe-radius);
}

.page-link:hover {
    background-color: var(--stripe-gray-50);
    border-color: var(--stripe-gray-400);
    color: var(--stripe-gray-900);
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff !important;
}

/* Quick actions styling */
.btn.w-100 {
    padding: 0.625rem 1rem;
    font-weight: 500;
}

.btn i {
    opacity: 0.8;
}

.btn:hover i {
    opacity: 1;
}

/* Button size refinements */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
}

/* Card body padding consistency */
.card-body.p-0 {
    padding: 0 !important;
}

.card-body.p-3 {
    padding: 1rem !important;
}

.card-body.p-4 {
    padding: 1.5rem !important;
}

/* Gap utilities for rows */
.g-2 {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
}

.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* Margin utilities with proper Stripe spacing */
.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

/* Ensure proper spacing between sections */
.row+.row {
    margin-top: 0;
}

/* Navigation Tabs - Stripe inspired */
.nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1.5rem;
}

.nav-tabs .nav-link {
    color: var(--stripe-gray-600);
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-bottom: 2px solid transparent;
    background-color: transparent;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.nav-tabs .nav-link:hover {
    color: var(--stripe-gray-900);
    border-bottom-color: var(--stripe-gray-300);
}

.nav-tabs .nav-link.active {
    color: var(--stripe-blue-600);
    background-color: transparent;
    border-bottom-color: var(--stripe-blue-600);
}

.nav-tabs .nav-item {
    margin-bottom: 0;
}

/* Tab content */
.tab-content {
    padding-top: 0;
}

.tab-content>.tab-pane {
    display: none;
}

.tab-content>.active {
    display: block;
}

/* Terminal Styling - Stripe inspired */
#terminal {
    background-color: #0d1117;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--stripe-radius-lg);
    box-shadow: var(--stripe-shadow-sm);
    overflow: hidden;
    margin-bottom: 1rem;
}

#terminal>div {
    padding: 1.25rem;
}

#terminal .xterm {
    padding: 0.8rem;
}

#terminal .xterm-viewport {
    border-radius: var(--stripe-radius);
}

/* Custom scrollbar for terminal - Stripe inspired */
#terminal .xterm-viewport::-webkit-scrollbar {
    width: 10px;
}

#terminal .xterm-viewport::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
}

#terminal .xterm-viewport::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    transition: background 0.2s ease;
}

#terminal .xterm-viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

#terminal .xterm-viewport::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.4);
}

/* Firefox scrollbar */
#terminal .xterm-viewport {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

/* Command input styling */
#command {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    background-color: #fff;
    border: 1px solid var(--stripe-gray-300);
    border-radius: var(--stripe-radius);
    padding: 0.625rem 1rem;
    transition: all 0.15s ease;
}

#command:focus {
    border-color: var(--stripe-blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

#command::placeholder {
    color: var(--stripe-gray-400);
}

#send-command {
    border-radius: var(--stripe-radius);
    font-weight: 500;
    transition: all 0.15s ease;
}

#send-command:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Server Stats Cards */
.server-stats-row .card {

    height: auto;
}

.server-stats-row .card-body {
    padding: 1rem;
}

.server-stats-row .card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--stripe-gray-700);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.server-stats-row .card-text {
    font-size: 0.9375rem;
    color: var(--stripe-gray-900);
    font-weight: 500;
}

.server-stats-row .fa-3x {
    color: var(--stripe-gray-400);
    font-size: 2.9rem;
}

/* Marketplace Sidebar */
.marketplace-sidebar-panel {
    width: 310px;
    min-width: 280px;
    min-height: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .07) !important;
}

.marketplace-sidebar-header {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #5a6fd8 100%);
    color: #fff;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.marketplace-sidebar-header .mp-title {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.marketplace-sidebar-header .mp-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}

.marketplace-sort-bar {
    padding: .5rem .75rem;
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    flex-shrink: 0;
}

.marketplace-sort-bar .form-select {
    font-size: .8rem;
    padding: .3rem .65rem;
    border-color: rgba(0, 0, 0, .12);
    background-color: #fff;
}

.marketplace-products-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

.marketplace-product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .65rem .75rem;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    transition: background 0.15s;
}

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

.marketplace-product-item:hover {
    background: rgba(var(--bs-primary-rgb), .04);
}

.marketplace-product-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .07);
}

.marketplace-product-img-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f0f2ff 0%, #e8ebf8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    flex-shrink: 0;
    font-size: 17px;
    border: 1px solid rgba(0, 0, 0, .06);
}

.marketplace-product-body {
    flex: 1;
    min-width: 0;
}

.marketplace-product-name {
    font-size: .82rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.marketplace-product-desc {
    font-size: .74rem;
    color: #888;
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

.marketplace-product-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: .7rem;
    color: #aaa;
}

.marketplace-product-meta .mp-meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.marketplace-badge-free {
    font-size: .65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #d1fae5;
    color: #065f46;
    flex-shrink: 0;
}

.marketplace-badge-paid {
    font-size: .65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #dbeafe;
    color: #1e40af;
    flex-shrink: 0;
}

.marketplace-dl-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    text-decoration: none;
    font-size: .8rem;
    transition: background .15s, transform .1s;
}

.marketplace-dl-btn:hover {
    background: #3a56c5;
    color: #fff;
    transform: scale(1.08);
}

.marketplace-sidebar-footer {
    padding: .5rem .75rem;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.marketplace-sidebar-footer .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: .75rem;
}

.marketplace-sidebar-footer .mp-page-info {
    font-size: .75rem;
    color: #888;
}

.server-stats-row [data-uptime-icon].text-success {
    color: var(--stripe-green-600) !important;
}

.server-stats-row [data-uptime-icon].text-danger {
    color: #dc2626 !important;
}

.payment-gateway-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-gateway-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid var(--stripe-gray-300) !important;
    background-color: #fff;
    margin-bottom: 0;
}

.ea-dark-scheme .payment-gateway-card {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color) !important;
}

.payment-gateway-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.ea-dark-scheme .payment-gateway-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.payment-gateway-input:checked+.payment-gateway-card {
    border-color: var(--primary-color) !important;
    background-color: rgba(84, 112, 211, 0.05);
    box-shadow: 0 0 0 3px rgba(84, 112, 211, 0.1);
    position: relative;
}

.ea-dark-scheme .payment-gateway-input:checked+.payment-gateway-card {
    background-color: rgba(84, 112, 211, 0.15);
}

.payment-gateway-input:checked+.payment-gateway-card::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--primary-color);
    font-size: 1rem;
}

.payment-gateway-input:disabled+.payment-gateway-card {
    opacity: 0.6;
    cursor: not-allowed;
}

.payment-gateway-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.payment-gateway-card .card-title {
    color: var(--stripe-gray-900);
}

.ea-dark-scheme .payment-gateway-card .card-title {
    color: var(--bs-heading-color);
}

.card-input-element {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.card-input-element+label {
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.card-input-element:checked+label {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.5);
}

.card-input-element:disabled+label {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-select-lg,
.form-control,
.input-group-text {
    font-size: 0.95rem !important;
}

.page-login-split .input-group-lg .input-group-text {
    min-height: calc(1.5em + 1rem + 2px);
    display: flex;
    align-items: center;
}

.page-login-split .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    border: none !important;
    color: white !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.page-login-split .btn-primary:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 85%, black) 0%, color-mix(in srgb, var(--secondary-color) 85%, black) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 40%, transparent) !important;
}

.list-group-item .bg-opacity-10 {
    background-color: transparent !important;
    opacity: 1 !important;
}

.list-group-item .bg-info.bg-opacity-10 i,
.list-group-item .bg-warning.bg-opacity-10 i,
.list-group-item .bg-success.bg-opacity-10 i,
.list-group-item .bg-danger.bg-opacity-10 i,
.list-group-item .bg-primary.bg-opacity-10 i,
.list-group-item .bg-secondary.bg-opacity-10 i,
.list-group-item .bg-dark.bg-opacity-10 i {
    opacity: 1 !important;
}

.card-header.bg-success {
    background-color: #fff !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.ea-dark-scheme .card-header.bg-success {
    background-color: var(--bs-card-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.card-header.bg-success h5,
.card-header.bg-success .card-title {
    color: var(--stripe-gray-900) !important;
}

.card-header.bg-success i {
    color: var(--stripe-gray-600) !important;
}

.card-header.bg-success .text-white {
    color: var(--stripe-gray-900) !important;
}

/* Fix description card header */
.card-header.bg-secondary {
    background-color: #fff !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.ea-dark-scheme .card-header.bg-secondary {
    background-color: var(--bs-card-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

.card-header.bg-secondary h5,
.card-header.bg-secondary .card-title {
    color: var(--stripe-gray-900) !important;
}

.card-header.bg-secondary i {
    color: var(--stripe-gray-600) !important;
}

.card-header.bg-secondary .text-white {
    color: var(--stripe-gray-900) !important;
}

/* Product summary box styling */
.product-summary-box {
    background-color: var(--stripe-green-50) !important;
    border: 1px solid var(--stripe-green-200) !important;
}

/* Top search bar styling - Stripe inspired */
.form-widget:has(.content-search-icon) {
    position: relative;
}

.content-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--stripe-gray-400) !important;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 2;
}

.content-search-label {
    position: relative;
    display: block;
    margin: 0;
}

.content-search-label input[type="search"] {
    padding-left: 2.5rem !important;
    padding-right: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border: 1px solid var(--stripe-gray-300) !important;
    border-radius: var(--stripe-radius) !important;
    background-color: #fff !important;
    font-size: 0.875rem !important;
    transition: all 0.15s ease !important;
    min-width: 250px;
}

.ea-dark-scheme .content-search-label input[type="search"] {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

.content-search-label input[type="search"]:focus {
    border-color: var(--stripe-blue-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

.content-search-label input[type="search"]::placeholder {
    color: var(--stripe-gray-400) !important;
}

/* Hide default search icon from browser */
.content-search-label input[type="search"]::-webkit-search-cancel-button,
.content-search-label input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Hide empty form row separators that cause large gaps */
.field-form_row.flex-fill {
    display: none !important;
}

/* ===== Stripe-inspired Dark Mode ===== */

/* Main content areas */
.ea-dark-scheme .content-top {
    border-bottom: 1px solid var(--bs-border-color, #2D3F52);
}

/* Dark Mode Sidebar - shadcn styles handled in core */

/* Enhanced card styling */
.ea-dark-scheme .card {
    border-color: var(--bs-border-color, #2D3F52) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2) !important;
}

.ea-dark-scheme .card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
}

/* Text colors */
.ea-dark-scheme h1,
.ea-dark-scheme h2,
.ea-dark-scheme h3,
.ea-dark-scheme h4,
.ea-dark-scheme h5,
.ea-dark-scheme h6 {
    color: var(--stripe-dark-text-heading, #F8FAFC) !important;
}

/* Buttons in dark mode */
.ea-dark-scheme .btn-outline-primary:hover,
.ea-dark-scheme .btn-outline-primary:focus,
.ea-dark-scheme .btn-outline-primary:active {
    background-color: var(--bs-body-bg, #243B53) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

.ea-dark-scheme .btn-outline-primary:hover i,
.ea-dark-scheme .btn-outline-primary:focus i,
.ea-dark-scheme .btn-outline-primary:active i {
    color: var(--bs-body-color) !important;
}

.ea-dark-scheme .btn-outline-secondary:hover {
    background-color: var(--stripe-dark-hover, #243B53) !important;
}

.ea-dark-scheme .btn-outline-success:hover,
.ea-dark-scheme .btn-outline-success:focus,
.ea-dark-scheme .btn-outline-success:active {
    background-color: var(--stripe-dark-hover, #243B53) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

.ea-dark-scheme .btn-outline-success:hover i,
.ea-dark-scheme .btn-outline-success:focus i,
.ea-dark-scheme .btn-outline-success:active i {
    color: var(--bs-body-color) !important;
}

.ea-dark-scheme .btn-outline-info:hover,
.ea-dark-scheme .btn-outline-info:focus,
.ea-dark-scheme .btn-outline-info:active {
    background-color: var(--stripe-dark-hover, #243B53) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

.ea-dark-scheme .btn-outline-info:hover i,
.ea-dark-scheme .btn-outline-info:focus i,
.ea-dark-scheme .btn-outline-info:active i {
    color: var(--bs-body-color) !important;
}

/* Links */
.ea-dark-scheme a:not(.btn) {
    color: var(--link-color, #6BA5F2);
}

.ea-dark-scheme a:not(.btn):hover {
    color: var(--link-hover-color, #8ABAFF);
}

/* ===== Additional Stripe Dark Mode Refinements ===== */

/* Improve form inputs in dark mode */
.ea-dark-scheme .form-control,
.ea-dark-scheme .form-select,
.ea-dark-scheme input[type="text"],
.ea-dark-scheme input[type="email"],
.ea-dark-scheme input[type="password"],
.ea-dark-scheme textarea {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: #E6EDF3 !important;
}

.ea-dark-scheme .form-control:focus,
.ea-dark-scheme .form-select:focus {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(107, 165, 242, 0.1) !important;
}

.ea-dark-scheme .form-control::placeholder {
    color: #9AA5B1;
}

.ea-dark-scheme .table {
    color: #E6EDF3;
    border-radius: 0.5rem;
}

.ea-dark-scheme .table thead th {
    border-color: var(--bs-border-color, #2D3F52);
    color: #F8FAFC;
    padding: 0.75rem 1rem;
}

.ea-dark-scheme .table tbody td {
    border-color: var(--bs-border-color, #2D3F52);
    padding: 1rem;
}

.ea-dark-scheme .table tbody th {
    padding: 1rem;
}

.ea-dark-scheme .table-hover tbody tr:hover {
    background-color: rgba(36, 59, 83, 0.5);
}

.ea-dark-scheme .badge {
    border: 1px solid var(--bs-border-color, #2D3F52);
}

.ea-dark-scheme .badge.bg-secondary {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

.d-flex.flex-wrap .badge+.badge {
    margin-inline-start: 0 !important;
}

.ea-dark-scheme .dropdown-menu {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

.ea-dark-scheme .dropdown-item {
    color: #E6EDF3 !important;
}

.ea-dark-scheme .dropdown-item:hover,
.ea-dark-scheme .dropdown-item:focus {
    background-color: var(--primary-color) !important;
    color: #F8FAFC !important;
}

.ea-dark-scheme .alert {
    border-color: var(--bs-border-color, #2D3F52);
}

.ea-dark-scheme .alert-info {
    background-color: rgba(107, 165, 242, 0.1) !important;
    border-color: #6BA5F2 !important;
    color: #6BA5F2 !important;
}

.ea-dark-scheme .alert-success {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
}

.ea-dark-scheme .alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

.ea-dark-scheme .alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.ea-dark-scheme .pagination .page-link {
    background-color: #1A2B3D;
    border-color: var(--bs-border-color, #2D3F52);
    color: #E6EDF3;
}

.ea-dark-scheme .pagination .page-link:hover {
    background-color: #243B53;
    border-color: var(--bs-border-color, #2D3F52);
    color: #F8FAFC;
}

.ea-dark-scheme .pagination .page-item.active .page-link {
    background-color: #6BA5F2;
    border-color: #6BA5F2;
}

.ea-dark-scheme .motd-icon-box {
    background-color: rgba(107, 165, 242, 0.1) !important;
}

.ea-dark-scheme .motd-icon {
    color: #6BA5F2 !important;
}

.ea-dark-scheme .motd-message {
    color: #E6EDF3 !important;
}

.ea-dark-scheme .product-summary-box {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.alert {
    border-radius: 0.75rem !important;
    background-clip: padding-box !important;
    border: 1px solid !important;
    padding: 1rem 1.25rem !important;
    font-weight: 500 !important;
}

.alert-success {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-info {
    background-color: #eff6ff !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}

.btn-close {
    opacity: 0.6;
}

.btn-close:hover {
    opacity: 1;
}

.form-check {
    padding-left: 0 !important;
}

.ea-dark-scheme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.ea-dark-scheme .btn-close:hover {
    opacity: 1;
}

.ea-dark-scheme .bg-opacity-10 {
    background-color: transparent !important;
    opacity: 1 !important;
}

.ea-dark-scheme i.text-primary {
    color: #6BA5F2 !important;
}

.ea-dark-scheme i.text-info {
    color: #6BA5F2 !important;
}

.ea-dark-scheme i.text-success {
    color: #22c55e !important;
}

.ea-dark-scheme i.text-warning {
    color: #f59e0b !important;
}

.ea-dark-scheme i.text-danger {
    color: #ef4444 !important;
}

.ea-dark-scheme i.text-secondary {
    color: #9ca3af !important;
}

.ea-dark-scheme .list-group-item {
    background-color: unset;
}

.flash-messages-container {
    margin-right: 0.5rem;
}

.flash-messages-container> :first-child {
    margin-top: 1.5rem !important;
}

.flash-messages-container> :last-child {
    margin-bottom: 0 !important;
}

.content-top {
    background: var(--body-bg) !important;
}

.global-footer {
    padding: 1.25rem 0 !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
    width: 100% !important;
}

.global-footer-content {
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(2rem, 5vw, 4.5rem) !important;
    padding-right: clamp(2rem, 5vw, 4.5rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
}

.global-footer p {
    margin: 0;
    font-size: 0.7125rem;
    color: var(--text-muted);
}

.global-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.global-footer a:hover {
    color: var(--text-color);
    text-decoration: none;
}

.verification-icon-container {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 193, 7, 0.15);
}

.verification-icon {
    font-size: 2rem;
    color: #ff9800;
}

.store-product-placeholder {
    height: 200px;
    background: linear-gradient(135deg, var(--stripe-gray-100) 0%, var(--stripe-gray-50) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-product-icon {
    font-size: 3rem;
    color: var(--stripe-gray-400);
}

.store-category-placeholder {
    height: 200px;
    background: linear-gradient(135deg, var(--stripe-blue-100) 0%, var(--stripe-blue-50) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-category-icon {
    font-size: 3rem;
    color: var(--stripe-blue-600);
}

.permission-roles-list .role-card {
    background-color: #f8f9fa;
    transition: box-shadow 0.2s;
}

.permission-roles-list .role-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.role-permissions-display {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.permission-section-card {
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
}

.permission-section-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.permission-section-card .section-header {
    background: linear-gradient(to bottom, #f7fafc, #edf2f7);
    border-bottom: 1px solid #e3e8ee;
    padding: 12px 16px;
}

.permission-section-card .section-header h6 {
    color: #2d3748;
    font-weight: 600;
    font-size: 0.95rem;
}

.permission-section-card .section-content {
    padding: 0;
}

.permissions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.permission-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s;
}

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

.permission-item:hover {
    background-color: #f7fafc;
}

.permission-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.permission-name {
    font-size: 0.9rem;
    color: #2d3748;
    display: flex;
    align-items: center;
}

.permission-name strong {
    font-weight: 500;
}

.permission-meta {
    font-size: 0.8rem;
    color: #718096;
    display: flex;
    align-items: center;
}

.permission-meta code {
    background: #edf2f7;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
}

.permissions-summary {
    border-left: 4px solid #4299e1;
}

.permissions-summary .bg-light {
    background-color: #f7fafc !important;
    border: 1px solid #e3e8ee;
}

#main-menu .menu .submenu a {
    padding: 3px 0 3px 15px;
}

#main-menu .menu .submenu .menu-item.active a {
    padding: 3px 0 3px 12px;
}

.ea-dark-scheme .permissions-summary .bg-light {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
}

.ea-dark-scheme .permissions-summary h6 {
    color: var(--bs-heading-color) !important;
}

.ea-dark-scheme .permission-section-card {
    background: var(--bs-card-bg);
    border-color: var(--bs-border-color) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ea-dark-scheme .permission-section-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.ea-dark-scheme .permission-section-card .section-header {
    background: linear-gradient(to bottom, var(--bs-card-cap-bg), var(--bs-body-bg));
    border-bottom: 1px solid var(--bs-border-color);
}

.ea-dark-scheme .permission-section-card .section-header h6 {
    color: var(--bs-heading-color);
}

.ea-dark-scheme .permission-item {
    border-bottom-color: var(--bs-border-color);
}

.ea-dark-scheme .permission-item:hover {
    background-color: rgba(36, 59, 83, 0.3);
}

.ea-dark-scheme .permission-name {
    color: var(--bs-body-color);
}

.ea-dark-scheme .permission-name strong {
    color: var(--bs-heading-color);
}

.ea-dark-scheme .permission-meta {
    color: #9AA5B1;
}

.ea-dark-scheme .permission-meta code {
    background: var(--bs-body-bg);
    color: #9AA5B1;
    border: 1px solid var(--bs-border-color);
}

.ea-dark-scheme .permission-meta .text-muted {
    color: #9AA5B1 !important;
}

.content-top {
    display: flex;
    align-items: center;
    gap: 0;
}

.navbar-custom-menu {
    display: flex;
    align-items: center;
    gap: 0;
}

.content-search {
    flex: 1;
}

.user-balance {
    display: inline-block;
    align-items: center;
}

.user-balance a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.user-balance a:hover {
    color: var(--bs-primary);
}

.ea-dark-scheme .user-balance a {
    color: #9AA5B1;
}

.ea-dark-scheme .user-balance a:hover {
    color: #FFFFFF;
}

.btn.success {
    background-color: var(--stripe-green-600);
    border-color: var(--stripe-green-600);
    color: #fff;
}

.btn.success i {
    color: #fff !important;
}

.btn.success:hover,
.btn.success:focus,
.btn.success:active {
    background-color: var(--stripe-green-500) !important;
    border-color: var(--stripe-green-500) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.btn.success:hover i,
.btn.success:focus i,
.btn.success:active i {
    color: #fff !important;
}

.btn.danger {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn.danger i {
    color: #fff !important;
}

.btn.danger:hover,
.btn.danger:focus,
.btn.danger:active {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.btn.danger:hover i,
.btn.danger:focus i,
.btn.danger:active i {
    color: #fff !important;
}

.btn.primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn.primary i {
    color: #fff !important;
}

.btn.primary:hover,
.btn.primary:focus,
.btn.primary:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    opacity: 0.9;
}

.btn.primary:hover i,
.btn.primary:focus i,
.btn.primary:active i {
    color: #fff !important;
}

.btn.secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn.secondary i {
    color: #fff !important;
}

.btn.secondary:hover,
.btn.secondary:focus,
.btn.secondary:active {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.1);
}

.btn.secondary:hover i,
.btn.secondary:focus i,
.btn.secondary:active i {
    color: #fff !important;
}

.btn.warning {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.btn.warning i {
    color: #fff !important;
}

.btn.warning:hover,
.btn.warning:focus,
.btn.warning:active {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.btn.warning:hover i,
.btn.warning:focus i,
.btn.warning:active i {
    color: #fff !important;
}

.btn.info {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

.btn.info i {
    color: #fff !important;
}

.btn.info:hover,
.btn.info:focus,
.btn.info:active {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.btn.info:hover i,
.btn.info:focus i,
.btn.info:active i {
    color: #fff !important;
}

.datagrid .dropdown-actions .dropdown-toggle {
    padding: 4px 6px;
    min-width: 32px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.datagrid .dropdown-actions .dropdown-toggle .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.datagrid .dropdown-actions .dropdown-toggle .icon svg {
    width: 100%;
    height: 100%;
}

.datagrid tr:not(.selected-row):hover .actions-as-dropdown .dropdown-actions>.dropdown-toggle {
    background: var(--dropdown-toggle-bg);
    border-color: var(--dropdown-toggle-border-color);
}

.ea-dark-scheme .datagrid .dropdown-actions .dropdown-toggle {
    padding: 4px 6px;
    min-width: 32px;
    min-height: 28px;
}

#flash-messages .alert {
    margin: 0 !important;
}

/* =========================================================
   ZYROHOST 9ROUTER CYBER GRID THEME & SPACIOUS CONTAINER
   Technical subtle grid lines • Controlled width • Generous breathing room
   ========================================================= */
html.ea-dark-scheme,
body.ea-dark-scheme,
.ea-dark-scheme .wrapper,
.ea-dark-scheme .main-content {
    background-color: #090a0d !important;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    background-size: 38px 38px !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    color: #EDEDED !important;
}

.ea-dark-scheme .content,
.ea-dark-scheme .content-wrapper,
.ea-dark-scheme .content-body {
    background-color: transparent !important;
    color: #EDEDED !important;
}

/* 100% Transparent Top Navbar with Zero Outline / Border */
.ea-dark-scheme .content-top {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Solid Sidebar Surface Separation */
.ea-dark-scheme .sidebar-wrapper,
.ea-dark-scheme .sidebar,
.ea-dark-scheme #app-sidebar {
    background-color: #000000 !important;
    background-image: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Controlled Layout Width & Generous Breathing Room (9Router Style) - Default for Simple / Content Pages */
.content-wrapper {
    flex: 1 0 auto !important;
    width: 100% !important;
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(2rem, 5vw, 4.5rem) !important;
    padding-right: clamp(2rem, 5vw, 4.5rem) !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    box-sizing: border-box !important;
}

.content-top {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding-left: clamp(2rem, 5vw, 4.5rem) !important;
    padding-right: clamp(2rem, 5vw, 4.5rem) !important;
}

/* ==========================================================================
   ZYRO ADMIN & CRUD DATA TABLES: 100% FULL-WIDTH & ISOLATED HORIZONTAL SCROLL
   Fixes Table Pushed to Center & Page Body Horizontal Overflow (Server, Pembayaran, Pengguna, etc.)
   ========================================================================== */

/* 100% Full-Width Flush Alignment for Server Dashboard, All CRUD Index Views, Tables & List Pages */
body.page-server-dashboard .content-wrapper,
body.ea-index .content-wrapper,
body.ea-content-width-full .content-wrapper,
body[data-ea-content-width="full"] .content-wrapper,
body[class*="ea-index-"] .content-wrapper,
.content-wrapper:has(.datagrid),
.content-wrapper:has(.table) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(1rem, 1.5vw, 2rem) !important;
    padding-right: clamp(1rem, 1.5vw, 2rem) !important;
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
    display: block !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.page-server-dashboard .content-top,
body.ea-index .content-top,
body.ea-content-width-full .content-top,
body[data-ea-content-width="full"] .content-top,
body[class*="ea-index-"] .content-top {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(1rem, 1.5vw, 2rem) !important;
    padding-right: clamp(1rem, 1.5vw, 2rem) !important;
    box-sizing: border-box !important;
}

body.page-server-dashboard .global-footer-content,
body.page-server-dashboard.ea-dark-scheme .global-footer .global-footer-content,
body.ea-index .global-footer-content,
body.ea-index.ea-dark-scheme .global-footer .global-footer-content,
body.ea-content-width-full .global-footer-content,
body.ea-content-width-full.ea-dark-scheme .global-footer .global-footer-content,
body[class*="ea-index-"] .global-footer-content {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(1rem, 1.5vw, 2rem) !important;
    padding-right: clamp(1rem, 1.5vw, 2rem) !important;
    box-sizing: border-box !important;
}

body.page-server-dashboard .content,
body.page-server-dashboard .content-body,
body.ea-index .content,
body.ea-index .content-body,
body.ea-index #main,
body[class*="ea-index-"] .content,
body[class*="ea-index-"] .content-body,
body[class*="ea-index-"] #main,
.content:has(.datagrid),
.content-body:has(.datagrid) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Datagrid Table Clean Typography & Layout */
.ea-dark-scheme table.datagrid,
table.datagrid {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

.ea-dark-scheme table.datagrid thead th {
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 0.75rem 0.65rem !important;
    color: #94a3b8 !important;
}

.ea-dark-scheme table.datagrid tbody td {
    vertical-align: middle !important;
    padding: 0.75rem 0.65rem !important;
    font-size: 12.5px !important;
    color: #f1f5f9 !important;
}

/* Compact specific columns to fit 100% screen without horizontal slide */
.ea-dark-scheme table.datagrid th.batch-actions-selector,
.ea-dark-scheme table.datagrid td.batch-actions-selector {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding-left: 0.5rem !important;
    padding-right: 0.25rem !important;
    text-align: center !important;
}

.ea-dark-scheme table.datagrid th[data-column="id"],
.ea-dark-scheme table.datagrid td[data-column="id"] {
    width: 48px !important;
    min-width: 40px !important;
    max-width: 55px !important;
    text-align: center !important;
}

.ea-dark-scheme table.datagrid th[data-column="pterodactylServerIdentifier"],
.ea-dark-scheme table.datagrid td[data-column="pterodactylServerIdentifier"] {
    width: 95px !important;
    max-width: 110px !important;
    font-family: monospace !important;
    font-size: 12px !important;
}

.ea-dark-scheme table.datagrid th[data-column="name"],
.ea-dark-scheme table.datagrid td[data-column="name"] {
    max-width: 160px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ea-dark-scheme table.datagrid th[data-column="serverProduct"],
.ea-dark-scheme table.datagrid td[data-column="serverProduct"] {
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ea-dark-scheme table.datagrid th[data-column="user"],
.ea-dark-scheme table.datagrid td[data-column="user"] {
    max-width: 190px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ea-dark-scheme table.datagrid th[data-column="expiresAt"],
.ea-dark-scheme table.datagrid td[data-column="expiresAt"] {
    white-space: nowrap !important;
    font-size: 12px !important;
}

.ea-dark-scheme table.datagrid th[data-column="memory"],
.ea-dark-scheme table.datagrid td[data-column="memory"],
.ea-dark-scheme table.datagrid th[data-column="cpu"],
.ea-dark-scheme table.datagrid td[data-column="cpu"] {
    width: 70px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.ea-dark-scheme table.datagrid th[data-column="isSuspended"],
.ea-dark-scheme table.datagrid td[data-column="isSuspended"] {
    width: 65px !important;
    text-align: center !important;
}

.ea-dark-scheme table.datagrid th[data-column="healthStatus"],
.ea-dark-scheme table.datagrid td[data-column="healthStatus"] {
    width: 110px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.ea-dark-scheme table.datagrid th.actions,
.ea-dark-scheme table.datagrid td.actions {
    width: 48px !important;
    text-align: center !important;
}

/* Isolated container: ONLY scroll if screen is too narrow (<1280px) */
body.ea-index #main.content-body,
body[class*="ea-index-"] #main.content-body,
.content-body:has(.datagrid) {
    overflow-x: auto;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
    padding-bottom: 0.5rem !important;
}

body.ea-index #main.content-body::-webkit-scrollbar,
.content-body:has(.datagrid)::-webkit-scrollbar {
    height: 6px !important;
}

body.ea-index #main.content-body::-webkit-scrollbar-track,
.content-body:has(.datagrid)::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 4px !important;
}

body.ea-index #main.content-body::-webkit-scrollbar-thumb,
.content-body:has(.datagrid)::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18) !important;
    border-radius: 4px !important;
}

body.ea-index #main.content-body::-webkit-scrollbar-thumb:hover,
.content-body:has(.datagrid)::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32) !important;
}

@media (min-width: 1280px) {
    body.ea-index #main.content-body,
    body[class*="ea-index-"] #main.content-body,
    .content-body:has(.datagrid) {
        overflow-x: visible !important;
    }
}

/* Sticky pagination footer to prevent shifting during horizontal table scroll */
.content-panel-footer {
    width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
    left: 0 !important;
}

/* Server Dashboard Dedicated Sidebar Styles */
.server-back-item {
    margin: 4px 10px 10px 10px !important;
}

.server-back-btn {
    color: #A1A1A1 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.server-back-btn:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    transform: translateX(-2px);
}

.server-nav-header {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    margin: 4px 10px 12px 10px !important;
    padding: 8px 12px !important;
}

.server-nav-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
    flex-shrink: 0;
}

.server-tab-item {
    cursor: pointer !important;
    list-style: none !important;
    margin: 2px 10px !important;
    border-radius: 8px !important;
    transition: all 0.12s ease !important;
}

.server-tab-item .server-tab-link {
    cursor: pointer !important;
}

.server-tab-item.active,
.server-tab-item.active > .server-tab-link,
.server-tab-link.active {
    background: #1F1F1F !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

.server-tab-item.active .menu-icon,
.server-tab-link.active .menu-icon {
    color: #FFFFFF !important;
}

.server-tab-item.active .menu-icon.fas,
.server-tab-item.active .menu-icon.fa-solid,
.server-tab-link.active .menu-icon.fas,
.server-tab-link.active .menu-icon.fa-solid,
.server-tab-item.active .menu-icon i,
.server-tab-link.active .menu-icon i {
    font-weight: 900 !important;
    color: #FFFFFF !important;
}

/* Sidebar Permanently Fixed - Minimize System Completely Disabled */
.sidebar-wrapper,
.sidebar,
#app-sidebar,
body.sidebar-collapsed .sidebar-wrapper,
html.sidebar-collapsed .sidebar-wrapper,
body.sidebar-collapsed .sidebar,
html.sidebar-collapsed .sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    inline-size: 250px !important;
    min-inline-size: 250px !important;
    max-inline-size: 250px !important;
}

body.sidebar-collapsed .sidebar-header-info,
body.sidebar-collapsed .sidebar-header-chevrons,
html.sidebar-collapsed .sidebar-header-info,
html.sidebar-collapsed .sidebar-header-chevrons,
body.sidebar-collapsed #main-menu .menu .menu-item-label,
html.sidebar-collapsed #main-menu .menu .menu-item-label,
body.sidebar-collapsed .sidebar-user-info,
html.sidebar-collapsed .sidebar-user-info {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.content,
.content-body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cards & Surface Modules: Solid cyber surface with high-tech borders */
.ea-dark-scheme .card,
.ea-dark-scheme .form-panel,
.ea-dark-scheme .datagrid-box,
.ea-dark-scheme .box,
.ea-dark-scheme .dashboard-card {
    background-color: #0e0f14 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

.ea-dark-scheme .card:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important;
}

.ea-dark-scheme .card-header,
.ea-dark-scheme .card-footer {
    background-color: #0c0c0c !important;
    border-color: #161616 !important;
    color: #FFFFFF !important;
}

.ea-dark-scheme table,
.ea-dark-scheme .table,
.ea-dark-scheme .datagrid {
    background-color: #000000 !important;
    border-color: #141414 !important;
}

.ea-dark-scheme table thead th,
.ea-dark-scheme .table thead th {
    background-color: #080808 !important;
    border-bottom: 1px solid #161616 !important;
    border-top: none !important;
    color: #888888 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.ea-dark-scheme table tbody tr,
.ea-dark-scheme .table tbody tr,
.ea-dark-scheme table.table tbody tr,
.ea-dark-scheme table tbody tr td,
.ea-dark-scheme .table tbody tr td {
    background-color: #000000 !important;
    border-bottom: 1px solid #121212 !important;
    border-top: none !important;
    color: #D4D4D4 !important;
}

.ea-dark-scheme table tbody tr:hover td,
.ea-dark-scheme .table tbody tr:hover td,
.ea-dark-scheme .datagrid tbody tr:hover td {
    background-color: #0c0c0c !important;
}

.ea-dark-scheme .global-footer {
    margin-top: auto !important;
    background-color: transparent !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #666666 !important;
    width: 100% !important;
    padding: 1.25rem 0 !important;
}

.ea-dark-scheme .global-footer .global-footer-content {
    max-width: 1220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(2rem, 5vw, 4.5rem) !important;
    padding-right: clamp(2rem, 5vw, 4.5rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
}

.ea-dark-scheme .global-footer a {
    color: #888888 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.ea-dark-scheme .global-footer a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

.ea-dark-scheme .form-control,
.ea-dark-scheme .form-select,
.ea-dark-scheme input[type="text"],
.ea-dark-scheme input[type="search"],
.ea-dark-scheme input[type="email"],
.ea-dark-scheme input[type="password"] {
    background-color: #060606 !important;
    border: 1px solid #1a1a1a !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

.ea-dark-scheme .form-control:focus,
.ea-dark-scheme .form-select:focus,
.ea-dark-scheme input:focus {
    background-color: #090909 !important;
    border-color: #333333 !important;
    box-shadow: 0 0 0 1px #333333 !important;
    color: #FFFFFF !important;
}

.ea-dark-scheme .dropdown-menu {
    background-color: #0a0a0a !important;
    border: 1px solid #1c1c1c !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85) !important;
    border-radius: 10px !important;
}

.ea-dark-scheme .dropdown-menu .dropdown-item {
    color: #A1A1A1 !important;
    border-radius: 6px !important;
}

.ea-dark-scheme .dropdown-menu .dropdown-item:hover,
.ea-dark-scheme .dropdown-menu .dropdown-item:focus {
    background-color: #1a1a1a !important;
    color: #FFFFFF !important;
}

.ea-dark-scheme .modal-content {
    background-color: #080808 !important;
    border: 1px solid #1c1c1c !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9) !important;
    color: #EDEDED !important;
}

.ea-dark-scheme .modal-header,
.ea-dark-scheme .modal-footer {
    border-color: #141414 !important;
}

.ea-dark-scheme .badge {
    border: 1px solid #222222 !important;
}

/* Quick Actions: Clean Clickable Text with Animated Underline (Always 4 in one horizontal row) */
.quick-actions-bar {
    width: 100%;
    margin-bottom: 1.75rem;
    padding: 0.5rem 0;
    display: flex !important;
    justify-content: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.quick-actions-bar::-webkit-scrollbar {
    display: none !important;
}

.quick-actions-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem 2.5rem !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
}

.quick-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
    color: #999999 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    cursor: pointer !important;
    position: relative;
    padding: 4px 0;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    .quick-actions-bar {
        margin-bottom: 1.25rem !important;
        padding: 0.25rem 0.25rem !important;
    }
    .quick-actions-nav {
        gap: 1.35rem !important;
        justify-content: center !important;
    }
    .quick-action-link {
        font-size: 0.85rem !important;
        gap: 0.45rem !important;
    }
    .quick-action-icon {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .quick-actions-nav {
        gap: 1.15rem !important;
    }
    .quick-action-link {
        font-size: 0.82rem !important;
        gap: 0.4rem !important;
    }
    .quick-action-icon {
        font-size: 0.82rem !important;
    }
}

@media (max-width: 360px) {
    .quick-actions-nav {
        gap: 0.85rem !important;
    }
    .quick-action-link {
        font-size: 0.78rem !important;
        gap: 0.35rem !important;
    }
}

.quick-action-icon {
    font-size: 0.875rem !important;
    color: #666666 !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-block;
}

.quick-action-text {
    position: relative;
    display: inline-block;
    color: inherit;
    line-height: 1.4;
}

.quick-action-desktop-text {
    display: inline !important;
}

.quick-action-mobile-text {
    display: none !important;
}

@media (max-width: 991.98px) {
    .quick-action-desktop-text {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    .quick-action-mobile-text {
        display: inline !important;
        visibility: visible !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
    }
}

/* Animasi garis meluncur dari awal huruf sampai akhir huruf */
.quick-action-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    border-radius: 1px;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effects */
.quick-action-link:hover {
    color: #ffffff !important;
}

.quick-action-link:hover .quick-action-icon {
    color: #ffffff !important;
    transform: translateY(-1.5px) scale(1.1);
}

.quick-action-link:hover .quick-action-text::after {
    width: 100%;
}

.quick-action-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Dashboard Servers Widget - Cardless Void Design */
.dashboard-servers-widget {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100%;
}

.dashboard-servers-header {
    margin-bottom: 0.5rem;
}

/* Button: Lihat semua server (Clear, high contrast, sleek) */
.btn-servers-view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.12) !important;
}

.btn-servers-view-all span {
    color: #000000 !important;
}

.btn-servers-view-all i {
    color: #000000 !important;
    font-size: 0.75rem !important;
    transition: transform 0.2s ease !important;
}

.btn-servers-view-all:hover {
    background-color: #e5e5e5 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
}

.btn-servers-view-all:hover i {
    transform: translateX(2px) !important;
}

/* Cool Line Separator Effect: Futuristic Hairline with Center Glow */
.servers-cool-separator {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 1rem 0 1.5rem 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 15%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.15) 85%,
        rgba(255, 255, 255, 0) 100%
    );
}

.servers-cool-separator::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 35%;
    max-width: 240px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    filter: blur(2px);
    pointer-events: none;
}

/* Button: Pesan server pertama (Empty State) */
.btn-servers-order-first {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    border-radius: 9999px !important;
    padding: 8px 22px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15) !important;
}

.btn-servers-order-first span,
.btn-servers-order-first i {
    color: #000000 !important;
}

.btn-servers-order-first:hover {
    background-color: #e5e5e5 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
}

/* Button: Manage Server in List */
.btn-servers-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.btn-servers-action-btn:hover {
    background-color: #252525 !important;
    color: #ffffff !important;
    border-color: #383838 !important;
}

.btn-servers-action-btn i {
    color: #ffffff !important;
}

/* Fix global button contrast in dark scheme */
.ea-dark-scheme .btn.primary,
.ea-dark-scheme .btn-primary {
    color: #000000 !important;
}
.ea-dark-scheme .btn.primary i,
.ea-dark-scheme .btn-primary i {
    color: #000000 !important;
}

/* ==========================================================================
   ZYRO INSTANT NAVIGATION & ULTRA-FAST TRANSITIONS
   Instant Visual Feedback • Top Progress Bar • Seamless Content Entrance
   ========================================================================== */
#zyro-top-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 3px !important;
    width: 0% !important;
    background: linear-gradient(90deg, #2563eb, #06b6d4, #38bdf8) !important;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.85), 0 0 4px rgba(37, 99, 235, 0.6) !important;
    z-index: 9999999 !important;
    pointer-events: none !important;
    transition: width 0.22s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.25s ease !important;
    opacity: 0 !important;
}

#zyro-top-loader.loading {
    opacity: 1 !important;
    width: 78% !important;
}

#zyro-top-loader.done {
    width: 100% !important;
    opacity: 0 !important;
    transition: width 0.12s ease, opacity 0.25s 0.08s ease !important;
}

/* Ultra-smooth content fade in to eliminate jarring full-page refresh feel */
.content-wrapper,
.main-content > .content,
.content-body {
    animation: zyroContentFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes zyroContentFadeIn {
    0% {
        opacity: 0.82;
        transform: translateY(2px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   ZYRO THE VOID TOAST NOTIFICATION SYSTEM (100% IMAGE PARITY)
   Pure Dark Void Aesthetic • Glassmorphism • Status Bar Accent
   ========================================================= */

#flash-messages,
.zyro-toast-container {
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999999 !important;
    width: calc(100% - 32px) !important;
    max-width: 580px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: none !important;
}

.alerts-wrapper,
.content-wrapper.alerts-wrapper {
    flex: 0 0 0px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 0px !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: visible !important;
    display: block !important;
    pointer-events: none !important;
}

.zyro-toast {
    position: relative !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 14px 18px 17px !important;
    border-radius: 6px !important;
    background: rgba(9, 10, 13, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    animation: zyroToastSlideDown 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    margin: 0 !important;
}

.zyro-toast.zyro-toast-closing {
    animation: zyroToastSlideUp 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    pointer-events: none !important;
}

@keyframes zyroToastSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-40px) scale(0.96);
    }
    65% {
        opacity: 1;
        transform: translateY(3px) scale(1.008);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes zyroToastSlideUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 160px;
        margin-bottom: 12px;
    }
    100% {
        opacity: 0;
        transform: translateY(-24px) scale(0.95);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Sisi Kiri: Icon + Konten */
.zyro-toast-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Icon Container & SVG Outline */
.zyro-toast-icon {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.zyro-toast-icon-svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
}

/* Area Judul & Pesan */
.zyro-toast-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.zyro-toast-title {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    margin: 0 0 2px 0 !important;
    letter-spacing: -0.01em !important;
}

.zyro-toast-message,
.zyro-toast-body {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-break: break-word !important;
}

/* Sisi Kanan: Action Text, Separator, Close Button */
.zyro-toast-right,
.zyro-toast-actions {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: 14px !important;
}

.zyro-toast-action,
.zyro-toast-action-btn {
    background: transparent !important;
    border: none !important;
    padding: 4px 6px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    text-decoration: none !important;
}

.zyro-toast-action:hover,
.zyro-toast-action-btn:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

.zyro-toast-divider {
    display: inline-block !important;
    width: 1px !important;
    height: 20px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    margin: 0 12px !important;
    flex-shrink: 0 !important;
}

/* Minimalist Close Button */
.zyro-toast-close,
.zyro-toast-close-btn,
.zyro-toast .btn-close {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.zyro-toast-close:hover,
.zyro-toast-close-btn:hover,
.zyro-toast .btn-close:hover {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    transform: scale(1.15) !important;
}

/* Bottom Accent Bar & Progress */
.zyro-toast-bottom-bar,
.zyro-toast-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3.5px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.zyro-toast-progress-bar {
    height: 100% !important;
    width: 100% !important;
    transform-origin: left !important;
    animation: zyroToastProgress 5s linear forwards !important;
    border-radius: 0 !important;
}

@keyframes zyroToastProgress {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

/* Hide legacy badge/indicator if ever rendered */
.zyro-toast-indicator,
.zyro-toast-header {
    display: none !important;
}

/* =========================================================
   THE VOID STATUS PALETTES (SUCCESS, ERROR, WARNING, INFO)
   ========================================================= */

/* SUCCESS: HIJAU NEON (MATCH GAMBAR 1) */
.zyro-toast-success,
.ea-dark-scheme #flash-messages .alert-success {
    background: rgba(9, 10, 13, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.zyro-toast-success .zyro-toast-icon,
.zyro-toast-success .zyro-toast-icon-svg {
    color: #22c55e !important;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
}
.zyro-toast-success .zyro-toast-progress-bar,
.zyro-toast-success .zyro-toast-bottom-bar {
    background: #22c55e !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6) !important;
}

/* DANGER / ERROR: MERAH CYBER (MATCH GAMBAR 4) */
.zyro-toast-danger,
.zyro-toast-error,
.ea-dark-scheme #flash-messages .alert-danger,
.ea-dark-scheme #flash-messages .alert-error {
    background: rgba(9, 10, 13, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.zyro-toast-danger .zyro-toast-icon,
.zyro-toast-danger .zyro-toast-icon-svg,
.zyro-toast-error .zyro-toast-icon,
.zyro-toast-error .zyro-toast-icon-svg {
    color: #ef4444 !important;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.45));
}
.zyro-toast-danger .zyro-toast-progress-bar,
.zyro-toast-danger .zyro-toast-bottom-bar,
.zyro-toast-error .zyro-toast-progress-bar,
.zyro-toast-error .zyro-toast-bottom-bar {
    background: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
}

/* WARNING: KUNING / AMBER (MATCH GAMBAR 3) */
.zyro-toast-warning,
.ea-dark-scheme #flash-messages .alert-warning {
    background: rgba(9, 10, 13, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.zyro-toast-warning .zyro-toast-icon,
.zyro-toast-warning .zyro-toast-icon-svg {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.45));
}
.zyro-toast-warning .zyro-toast-progress-bar,
.zyro-toast-warning .zyro-toast-bottom-bar {
    background: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6) !important;
}

/* INFO: BIRU SINYAL (MATCH GAMBAR 2) */
.zyro-toast-info,
.ea-dark-scheme #flash-messages .alert-info {
    background: rgba(9, 10, 13, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.zyro-toast-info .zyro-toast-icon,
.zyro-toast-info .zyro-toast-icon-svg {
    color: #0099ff !important;
    filter: drop-shadow(0 0 6px rgba(0, 153, 255, 0.45));
}
.zyro-toast-info .zyro-toast-progress-bar,
.zyro-toast-info .zyro-toast-bottom-bar {
    background: #0099ff !important;
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.6) !important;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    #flash-messages,
    .zyro-toast-container {
        top: 14px !important;
        width: calc(100% - 24px) !important;
    }
    .zyro-toast {
        padding: 12px 14px 15px !important;
        gap: 12px !important;
    }
    .zyro-toast-icon {
        width: 24px !important;
        height: 24px !important;
    }
    .zyro-toast-icon-svg {
        width: 22px !important;
        height: 22px !important;
    }
    .zyro-toast-title {
        font-size: 0.88rem !important;
    }
    .zyro-toast-message,
    .zyro-toast-body {
        font-size: 0.8rem !important;
    }
    .zyro-toast-action,
    .zyro-toast-action-btn {
        font-size: 0.8rem !important;
        padding: 2px 4px !important;
    }
    .zyro-toast-divider {
        margin: 0 8px !important;
        height: 18px !important;
    }
}

/* =========================================================
   ZYROHOST SUPPORT TICKET & DISCORD WIDGET REDESIGN
   SaaS Cyberpunk Interface • Modern Split Layout • Touch-Friendly
   ========================================================= */

.zyro-support-container {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
}

.zyro-ticket-card,
.zyro-discord-card {
    background: rgba(13, 16, 23, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
    overflow: hidden;
}

.zyro-ticket-card:hover,
.zyro-discord-card:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65) !important;
}

/* Page Header */
.zyro-ticket-page-header {
    margin-bottom: 1.25rem;
}

.zyro-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38bdf8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.zyro-ticket-main-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0.35rem 0 0.2rem 0;
}

.zyro-ticket-main-subtitle {
    font-size: 0.88rem;
    color: #94a3b8;
    margin-bottom: 0;
}

/* Card Body Layout */
.zyro-ticket-card-body {
    padding: 2rem 1.75rem;
}

/* Top Channels Navigation (Discord, Whatsapp, Blogs) */
.zyro-ticket-channels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding-bottom: 0.5rem;
}

.zyro-ticket-channel-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.zyro-ticket-channel-link i {
    font-size: 1.15rem;
    transition: transform 0.2s ease;
}

.zyro-ticket-channel-link:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.zyro-ticket-channel-link:hover i {
    transform: scale(1.15);
}

.zyro-ticket-channel-link.discord-link:hover i {
    color: #5865F2;
}

.zyro-ticket-channel-link.whatsapp-link:hover i {
    color: #22c55e;
}

.zyro-ticket-channel-link.blog-link:hover i {
    color: #38bdf8;
}

/* Horizontal Glowing Divider with Center Dot */
.zyro-ticket-glow-divider {
    position: relative;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 20%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.18) 80%, transparent 100%);
    margin: 1.25rem 0 2rem;
}

.zyro-ticket-glow-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 10px #ffffff, 0 0 20px #38bdf8, 0 0 30px rgba(56, 189, 248, 0.6);
}

/* Centered Hero Create Ticket Button */
.zyro-ticket-hero-action {
    display: flex;
    justify-content: center;
    margin-bottom: 2.25rem;
}

.zyro-btn-create-ticket-hero {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 34px !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(2, 132, 199, 0.3) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 24px rgba(14, 165, 233, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.zyro-btn-create-ticket-hero:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35) 0%, rgba(2, 132, 199, 0.5) 100%) !important;
    border-color: #38bdf8 !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.45), 0 0 20px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

.zyro-btn-create-ticket-hero i:first-child {
    font-size: 1.15rem;
    color: #38bdf8;
}

.zyro-btn-create-ticket-hero i.fa-plus {
    font-size: 0.85rem;
    color: #e2e8f0;
}

/* Section Header: TIKET KAMU (3) */
.zyro-ticket-section-title {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Rectangular Void Ticket Card with Blue Footer & Half-Submerged Mascot */
.zyro-ticket-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.zyro-ticket-rect-card {
    position: relative;
    background: rgba(13, 16, 23, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    overflow: hidden;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
}

.zyro-ticket-rect-card:hover {
    border-color: rgba(56, 189, 248, 0.35) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(14, 165, 233, 0.15) !important;
}

.zyro-ticket-rect-body {
    position: relative;
    padding: 1.4rem 1.6rem 1.15rem 1.6rem;
    padding-right: 140px; /* Space for the half-submerged mascot */
    flex-grow: 1;
    z-index: 1;
}

.zyro-ticket-rect-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.76rem;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 6px;
    padding: 2px 8px;
}

.zyro-ticket-rect-category {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}

.zyro-ticket-rect-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.08rem !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-top: 0 !important;
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

.zyro-ticket-rect-desc {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 0.65rem;
    line-height: 1.45;
}

.zyro-ticket-rect-meta {
    font-size: 0.75rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Half-Submerged SVG Mascot in the Middle-Right Corner */
.zyro-ticket-rect-svg-wrapper {
    position: absolute;
    right: 12px;
    bottom: -32px; /* Lower body tucked behind the blue footer */
    width: 130px;
    height: 130px;
    pointer-events: none;
    z-index: 1;
    transition: transform 0.28s ease, filter 0.28s ease;
}

.zyro-ticket-rect-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}

.zyro-ticket-rect-card:hover .zyro-ticket-rect-svg-wrapper {
    transform: translateY(-6px) scale(1.04);
}

/* Blue Card Footer: "View Chat" */
.zyro-ticket-rect-footer {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    padding: 10px 1.6rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease;
}

.zyro-ticket-rect-card:hover .zyro-ticket-rect-footer {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
}

.zyro-ticket-rect-footer i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.zyro-ticket-rect-card:hover .zyro-ticket-rect-footer i {
    transform: translateX(4px);
}

.zyro-ticket-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.zyro-ticket-status-pill.selesai {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.zyro-ticket-status-pill.open {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

@media (max-width: 576px) {
    .zyro-ticket-channels {
        gap: 1.25rem;
    }
    .zyro-ticket-channel-link {
        font-size: 0.85rem;
    }
    .zyro-ticket-rect-body {
        padding: 1.25rem 1.25rem 1rem 1.25rem;
        padding-right: 95px;
    }
    .zyro-ticket-rect-svg-wrapper {
        width: 95px;
        height: 95px;
        bottom: -22px;
        right: 8px;
    }
    .zyro-ticket-rect-title {
        font-size: 0.95rem !important;
    }
    .zyro-ticket-rect-desc {
        font-size: 0.8rem;
    }
    .zyro-ticket-rect-footer {
        padding: 9px 1.25rem;
        font-size: 0.82rem;
    }
}

/* Standalone Discord Widget (No Card / No Wrapper) */
.zyro-discord-standalone-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.zyro-discord-standalone-wrapper iframe {
    width: 350px !important;
    max-width: 100% !important;
    height: 500px !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Modal Styling */
.zyro-modal-content {
    background: #0d1017 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
    color: #e2e8f0 !important;
}

.zyro-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1.25rem 1.75rem !important;
}

.zyro-modal-body {
    padding: 1.75rem !important;
}

.zyro-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1rem 1.75rem !important;
}

.zyro-form-control,
.zyro-form-select {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.zyro-form-control:focus,
.zyro-form-select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
}

/* =========================================================
   SERVER CONSOLE RESPONSIVE MOBILE REORDERING & PROPORTIONS
   Mobile Flow: Terminal -> Actions (Start/Restart/Stop) -> Stat Cards -> Charts
   Zero Impact on Desktop (min-width: 1200px)
   ========================================================= */

@media (max-width: 1199.98px) {
    /* Equal Height & Balanced Spacing for 8 Stat Cards (2 Columns Mobile) */
    .server-stats-row {
        --bs-gutter-x: 0.5rem !important;
        --bs-gutter-y: 0.5rem !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .server-stats-row > [class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0.5rem !important;
    }
    .server-stats-row .card {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        border-radius: 10px !important;
        margin-bottom: 0 !important;
        background: #090b0e !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .server-stats-row .card-body {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0.65rem 0.75rem !important;
    }
    .server-stats-row .card-title {
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        color: #888888 !important;
        margin-bottom: 0.3rem !important;
        text-transform: uppercase !important;
    }
    .server-stats-row .card-text {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
    }
    .server-stats-row .server-ip-censor {
        font-size: 0.78rem !important;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    }
}

/* Server Sparkline Charts (Original Clean Look, No Heavy Borders/Backgrounds) */
.server-chart-box {
    position: relative !important;
    width: 100% !important;
    height: 85px !important;
}
.server-chart-box canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

@media (min-width: 769px) {
    .server-chart-box {
        height: 120px !important;
    }
}

@media (max-width: 768px) {
    /* 3 Control Buttons: Mulai, Mulai ulang, Berhenti (Side-by-side in 1 Row) */
    .console-actions-wrapper {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    .console-actions-wrapper .row {
        --bs-gutter-x: 0.4rem !important;
    }
    .console-actions-wrapper .btn {
        padding: 0.65rem 0.25rem !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        gap: 0.3rem !important;
    }
    .console-actions-wrapper .btn i {
        font-size: 0.72rem !important;
        margin-right: 0 !important;
    }

    /* Generous, Safe, Symmetrical Side Margins on Mobile Screen (No Touching/Cutoff on Left Edge) */
    body.page-server-dashboard .content-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
}

/* ==========================================================================
   ZYROHOST DEDICATED ACCOUNT PAGE & SIDEBAR EXPERIENCE
   ========================================================================== */

/* 1. Account Sidebar Header */
.main-header.sidebar-header.account-sidebar-header {
    height: auto !important;
    min-height: auto !important;
    padding: 12px 14px 10px 14px !important;
    align-items: flex-start !important;
    background: #000000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.sidebar-account-header-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 2px 2px 0 2px !important;
}

/* "<- Kembali ke dashboard" Link: Kecil & Tanpa Bungkus Card */
.sidebar-account-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #71717a !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: color 0.15s ease !important;
    width: auto !important;
    align-self: flex-start !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.sidebar-account-back-btn i {
    font-size: 0.65rem !important;
    transition: transform 0.15s ease !important;
    color: inherit !important;
}

.sidebar-account-back-btn:hover {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
}

.sidebar-account-back-btn:hover i {
    transform: translateX(-2px) !important;
}

/* User Profile: Murni Baris Tanpa Bungkus Card */
.sidebar-account-user-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Circle Foto Profile: Simetris Sempurna 1:1 Tanpa Asimetri */
.sidebar-account-avatar-wrapper {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: #111111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.sidebar-account-avatar-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    transform: scale(1.15) !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
}

.sidebar-account-user-meta {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}

.sidebar-account-username {
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sidebar-account-email {
    font-size: 0.6875rem !important;
    color: #71717a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* 2. Account Sidebar Nav Menu */
.account-sidebar-nav {
    padding: 8px 0 !important;
}

.account-sidebar-nav .menu {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.account-sidebar-nav .menu-item {
    border-radius: 8px !important;
    margin: 3px 10px !important;
    transition: all 0.12s ease !important;
    list-style: none !important;
}

.account-sidebar-nav .menu-item-contents {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    min-height: 38px !important;
    text-decoration: none !important;
    color: #A1A1A1 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

.account-sidebar-nav .menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 14px !important;
    margin-right: 10px !important;
    color: #8F8F8F !important;
    flex-shrink: 0 !important;
    transition: color 0.12s ease !important;
}

.account-sidebar-nav .menu-item:hover>.menu-item-contents,
.account-sidebar-nav .menu-item-contents:hover {
    background: #141414 !important;
    color: #ffffff !important;
}

.account-sidebar-nav .menu-item:hover .menu-icon,
.account-sidebar-nav .menu-item-contents:hover .menu-icon {
    color: #ffffff !important;
}

.account-sidebar-nav .menu-item.active>.menu-item-contents,
.account-sidebar-nav .menu-item.active {
    background: #1F1F1F !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.account-sidebar-nav .menu-item.active .menu-icon,
.account-sidebar-nav .menu-item.active .menu-item-label {
    color: #ffffff !important;
}

/* 3. Account Sidebar Footer */
.sidebar-account-footer-wrapper {
    padding: 10px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.sidebar-account-logout-btn {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: #ef4444 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: rgba(239, 68, 68, 0.04) !important;
    border: 1px solid rgba(239, 68, 68, 0.09) !important;
    transition: all 0.15s ease !important;
}

.sidebar-account-logout-btn:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
    text-decoration: none !important;
}

/* 4. Account Settings Page Content Styling */
.account-settings-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 1rem 0.5rem 3rem 0.5rem !important;
}

.account-settings-header {
    background: #090a0d !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.account-nav-pills-bar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px !important;
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    margin-top: 1rem !important;
    overflow-x: auto !important;
}

.account-nav-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    border-radius: 7px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.account-nav-pill:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.account-nav-pill.active {
    color: #ffffff !important;
    background: #1f1f1f !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.account-card-panel {
    background: #090a0d !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    padding: 1.75rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 1.5rem !important;
}

.account-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.account-card-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 0.25rem !important;
}

.account-card-desc {
    font-size: 0.8125rem !important;
    color: #9ca3af !important;
    margin-bottom: 0 !important;
}

/* Social Connection Cards */
.connection-item-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.25rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.connection-item-card:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.connection-item-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
}

.connection-item-icon.discord {
    background: rgba(88, 101, 242, 0.12) !important;
    color: #5865F2 !important;
    border: 1px solid rgba(88, 101, 242, 0.25) !important;
}

.connection-item-icon.google {
    background: rgba(234, 67, 53, 0.12) !important;
    color: #EA4335 !important;
    border: 1px solid rgba(234, 67, 53, 0.25) !important;
}

.connection-item-icon.whatsapp {
    background: rgba(37, 211, 102, 0.12) !important;
    color: #25D366 !important;
    border: 1px solid rgba(37, 211, 102, 0.25) !important;
}

/* API Key Box */
.api-key-box {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    font-size: 0.875rem !important;
    color: #00f2fe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

/* ==========================================================================
   Antigravity-Style Git Changes Card (Gambar 2 - Rounded, Outline Only, Transparent)
   ========================================================================== */
.zyro-changes-card {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.zyro-changes-card:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.changes-card-header {
    background: transparent !important;
    user-select: none !important;
    padding: 9px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.changes-review-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px !important;
    color: #cbd5e1 !important;
    font-size: 11.5px !important;
    padding: 3px 10px !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.changes-review-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.changes-file-row {
    padding: 6px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: background-color 0.15s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.changes-file-row:last-child {
    border-bottom: none !important;
}

.changes-file-row:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

.changes-file-name {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    letter-spacing: -0.01em !important;
}

.changes-file-dir {
    color: #94a3b8 !important;
    font-size: 11.5px !important;
    opacity: 0.65 !important;
    font-family: 'JetBrains Mono', monospace !important;
}

.changes-reboot-bar {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: background-color 0.25s ease !important;
}

.changes-reboot-bar.is-healthy {
    background: rgba(34, 197, 94, 0.03) !important;
}

.changes-reboot-bar.is-crashed {
    background: rgba(239, 68, 68, 0.05) !important;
    border-top-color: rgba(239, 68, 68, 0.25) !important;
}

.live-pulse-dot {
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    display: inline-block;
    animation: livePulseAnim 1.6s infinite ease-in-out;
}

@keyframes livePulseAnim {
    0% { transform: scale(0.85); opacity: 0.65; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.85); opacity: 0.65; }
}