:root[data-bs-theme=dark] {
    color-scheme: dark;
    --ct-body-color-rgb: 170, 184, 197;
    --ct-body-bg: #1B1725;
    --ct-menu-bg: #0000008c !important;
    --ct-card-bg: #0000008c !important;
    --ct-body-color: #9a979e !important;
    --ct-rt-black: #202020 !important;
    --ct-rt-gray: #353535 !important;
    --ct-rt-purple: #8956FF !important;
    --ct-secondary-bg: #0000008c !important;
    --ct-dropdown-link-active-bg: #0000008c !important;
    --ct-card-heading: #000000 !important;
    --ct-topbar-bg: #000000 !important;
    --ct-topbar-item-color: #ffffff !important;
    --ct-topbar-item-hover-color: #935cff !important;
    --ct-topbar-search-bg: #000000 !important;
    --ct-menu-item-color: #e2e2e2 !important;
    --ct-menu-item-hover-color: #9e62ff !important;
    --ct-menu-item-hover-bg: #000000 !important;
    --ct-menu-item-active-color: #8756ff !important;
    --ct-border-color: #242424 !important;
    --ct-secondary-color: #777777 !important;
    --ct-border-color-translucent: #ffffff1a !important;
    --ct-heading-color: #dfdfdf !important;
    --ct-light: #202020 !important;
    --ct-light-rgb: 32, 32, 32 !important;
    --ct-pagination-hover-color: rgb(255 255 255) !important;
    --ct-pagination-hover-bg: #8d4ffb !important;
    --ct-pagination-hover-border-color: var(--ct-border-color) !important;
    --ct-pagination-focus-color: rgb(255 255 255 !important);
    --ct-pagination-focus-bg: var(--ct-secondary-bg) !important;
    --ct-pagination-focus-box-shadow: none !important;
    --ct-pagination-active-color: #fff !important;
    --ct-pagination-active-bg: #8956FF !important;
    --ct-pagination-active-border-color: #8956FF !important;

    /* Full Color Pallete Vars [Rage|LAZARUS] */
    /** Base colors */
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    /** Dark theme primary colors */
    --clr-primary-a0: #8956ff;
    --clr-primary-a10: #9a69ff;
    --clr-primary-a20: #a97bff;
    --clr-primary-a30: #b78eff;
    --clr-primary-a40: #c4a1ff;
    --clr-primary-a50: #d1b3ff;

    /** Dark theme surface colors */
    --clr-surface-a0: #202020;
    --clr-surface-a10: #353535;
    --clr-surface-a20: #4b4b4b;
    --clr-surface-a30: #626262;
    --clr-surface-a40: #7a7a7a;
    --clr-surface-a50: #939393;

    /** Dark theme tonal surface colors */
    --clr-surface-tonal-a0: #2b2633;
    --clr-surface-tonal-a10: #3f3a47;
    --clr-surface-tonal-a20: #55505b;
    --clr-surface-tonal-a30: #6b6771;
    --clr-surface-tonal-a40: #827e87;
    --clr-surface-tonal-a50: #9a979e;
}

/* LIGHT + DARK RULES BELOW */
.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: auto;
    max-width: inherit;
    max-height: inherit;
}

.rspsListHeading {
    font-size: 24px;
}

.rtPurpleBG {
    background: -webkit-gradient(linear, left top, right top, from(#9968ff), to(#6700ff));
    background: linear-gradient(to bottom, #9968ff, #6700ff);
}

.logo-lg img {
    height: 38px !important;
}

.authBody {
    max-width: 100% !important;
    margin: 0 auto;
}

.listInline {
    display: flex;
    flex-wrap: wrap; /* Ensures wrapping when needed */
    gap: 4px; /* Adjusts space between items */
    padding: 0;
    list-style: none;
}

.listInline li {
    display: inline; /* Keeps all users inline */
    font-size: 14px; /* Adjust font size */
}

.listInline li:not(:last-child)::after {
    content: ", "; /* Adds a comma after every user except the last */
}

.auth-bg {
    background-image: url(../images/bg-auth.png);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-position: left !important;
}

.serverListing {
    margin-bottom: 20px;
}

.serverDetails {
    padding: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.homePills {
    justify-content: center !important;
}

/* END LIGHT+DARK RULES */

:root[data-bs-theme=light] {
    color-scheme: light;
    --ct-card-heading: #fff;
    --ct-menu-bg: #fff !important;

    .page-title {
        color: #000 !important;
    }

    .serverDetails {
        padding: 10px;
        margin-left: 5px;
        margin-right: 5px;
        background: #fffff;
        border-radius: 9px;
        min-height: 150px;
        max-height: 150px;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .card-header {
        border-bottom: 0;
        background: var(--ct-card-heading) !important;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        margin-bottom: 0px;
    }
}

[data-bs-theme=dark] {

    ::selection {
        color: #fff;
        background: #202020;
    }

    a {
        color: #fff;
    }

    .rtMarquee {
        background-color: rgb(90 77 143 / 15%) !important;
        border-radius: 6px;
    }

    .serverDetails {
        padding: 10px;
        margin-left: 5px;
        margin-right: 5px;
        background: #202020;
        border-radius: 9px;
        border: 1px solid #ffffff0a;
        min-height: 150px;
        max-height: 150px;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .serverFilterContainer {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px;
        background: #1B1725;
        border-radius: 5px;
    }

    .serverCarousel {
        display: flex;
        gap: 15px;
        transition: transform 0.5s ease-in-out;
        overflow-x: auto;
        scroll-behavior: smooth;
        white-space: nowrap;
        padding: 10px;
        height: 60vh;
    }

    /* 🌑 SERVER CARD (Default for Desktop) */
    .serverCard {
        background: #1B1725;
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s ease-in-out;
        flex: 0 0 calc(33.333% - 15px); /* Default: 3 per row */
        max-width: calc(33.333% - 15px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
        min-height: 100%;
        overflow: hidden;
    }

    /* 📲 Tablet (2 per row) */
    @media (max-width: 1024px) {
        .serverCard {
            flex: 0 0 calc(50% - 15px); /* 2 per row */
            max-width: calc(50% - 15px);
        }
    }

    /* 📱 Mobile (1.5 per row for scrolling hint) */
    @media (max-width: 768px) {
        .serverCard {
            flex: 0 0 calc(75% - 15px); /* 1 full + 50% of the next card */
            max-width: calc(75% - 15px);
        }
    }


    /* 🏆 HEADER */
    .serverHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        background: linear-gradient(90deg, rgba(32, 32, 42, 0.95), rgba(50, 50, 70, 0.95));
        border-radius: 10px;
        color: white;
        font-weight: bold;
        box-shadow: inset 0px 1px 2px rgba(255, 255, 255, 0.05);
    }

    /* 🏅 RANK BADGE */
    .serverRank {
        background: linear-gradient(45deg, #5a3aa2, #7b5ee8);
        color: #ffffff;
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 12px;
        display: flex;
        align-items: center;
        font-family: "Orbitron", sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0px 2px 5px rgba(137, 86, 255, 0.25);
    }

    /* 🟢 SERVER STATUS */
    .serverStatusContainer {
        font-size: 12px;
        font-weight: bold;
        font-family: "Share Tech Mono", monospace;
        text-transform: uppercase;
        background: rgba(0, 255, 128, 0.2);
        padding: 5px 12px;
        border-radius: 8px;
    }

    /* 👑 OWNER BADGE */
    .serverOwnerBadge {
        background: linear-gradient(45deg, #7b5ee8, #5a3aa2);
        color: white;
        font-size: 13px;
        padding: 5px 12px;
        border-radius: 5px;
        font-weight: bold;
        display: flex;
        align-items: center;
    }

    .serverBannerContainer {
        width: 100%;
        background: linear-gradient(180deg, rgba(30, 30, 30, 0.85), rgba(45, 45, 45, 0.85));
        padding: 6px;
        display: flex;
        justify-content: center;
        border-radius: 8px;
    }

    .serverIcon {
        width: 200px;
        height: 200px;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .serverBanner {
        width: 100%;
        max-width: 420px;
        height: auto;
        object-fit: contain;
        border-radius: 5px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
    }

    .serverStatsGrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        text-align: center;
        margin-top: 6px;
        padding: 6px;
        width: 100%;
        box-sizing: border-box;
    }

    .serverStat {
        background: rgba(255, 255, 255, 0.07);
        padding: 4px;
        border-radius: 6px;
        font-size: 12px; /* Smaller text */
        font-weight: bold;
        color: #c5c5c5;
    }

    .serverStat i {
        color: #8956FF;
        margin-right: 5px;
    }

    .serverLinks {
        display: flex;
        gap: 10px;
        margin-top: 12px;
        width: 100%;
        justify-content: space-between;
    }

    .serverLinks a.websiteBtn {
        background: linear-gradient(45deg, #5a3aa2, #7b5ee8);
        color: white;
        font-size: 14px;
        font-weight: bold;
        padding: 12px;
        border-radius: 8px;
        text-transform: uppercase;
        transition: 0.3s ease-in-out;
        box-shadow: 0px 0px 5px rgba(137, 86, 255, 0.2);
        width: 50%; /* Each button takes 50% */
        text-align: center;
    }

    .serverLinks a.websiteBtn:hover {
        background: linear-gradient(45deg, #4a2b90, #6a4acc);
        box-shadow: 0px 0px 7px rgba(137, 86, 255, 0.3);
    }

    .serverLinks a.discordBtn {
        background: linear-gradient(45deg, #303244, #424660);
        color: white;
        font-size: 14px;
        font-weight: bold;
        padding: 12px;
        border-radius: 8px;
        text-transform: uppercase;
        transition: 0.3s ease-in-out;
        box-shadow: 0px 0px 5px rgba(114, 137, 218, 0.2);
        width: 50%;
        text-align: center;
    }

    .serverLinks a.discordBtn:hover {
        background: linear-gradient(45deg, #2e2f3d, #3a4060);
        box-shadow: 0px 0px 7px rgba(114, 137, 218, 0.3);
    }

    .serverLinks a:only-child {
        width: 100%;
    }

    .serverTitle {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin-top: 6px;
        color: #e3e3e3;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: "Orbitron", sans-serif;
    }


    .scrollLeft, .scrollRight {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        padding: 8px;
        font-size: 16px;
        cursor: pointer;
    }

    .scrollLeft { left: 10px; }
    .scrollRight { right: 10px; }


    .serverCarouselContainer {
        width: 100%;
        overflow: hidden;
        position: relative;
        max-width: 1200px;
    }

    .serverCarousel {
        overflow-x: auto;
        display: flex;
        gap: 15px;
        scroll-behavior: smooth;
        white-space: nowrap;
        padding: 10px;
        scrollbar-width: thin;
        scrollbar-color: #888 #222;
    }

    .serverCarousel::-webkit-scrollbar {
        height: 16px;
    }

    .serverCarousel::-webkit-scrollbar-track {
        background: #222;
    }

    .serverCarousel::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    .serverCarousel::-webkit-scrollbar-thumb:hover {
        background: #aaa;
    }

    .serverCarouselContainer {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .scrollLeft, .scrollRight {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.9);
        color: white;
        border: none;
        padding: 8px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 9px;
        z-index: 999;
        transition: background 0.3s ease-in-out;
    }

    .scrollLeft {
        left: 15px;
    }

    .scrollRight {
        right: 15px;
    }

    .scrollLeft:hover, .scrollRight:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .serverCarousel {
        position: relative;
        overflow-x: auto;
        display: flex;
        gap: 15px;
        scroll-behavior: smooth;
        white-space: nowrap;
        padding: 10px;
        scrollbar-width: thin; /* Slim scrollbar */
        scrollbar-color: #888 #222; /* Custom scrollbar color */
    }



    .nav-pills {
        --ct-nav-pills-link-active-color: #ffffff;
        --ct-nav-pills-link-active-bg: #8956ff;
    }

    .nav {
        --ct-nav-link-hover-color: rgb(127 86 255);
    }

    .active>.page-link, .page-link.active {
        z-index: 3;
        color: var(--ct-pagination-active-color);
        background-color: #8956ff;
        border-color: #8956ff;
    }

    .page-link:hover, page-link:focus {
        z-index: 3;
        color: var(--ct-pagination-active-color);
        background-color: #8956ff;
        border-color: #8956ff;
    }

    .page-link:active, .page-link:focus {
        color: #fff !important;
    }

    .dropdown-toggle:a, .dropdown-toggle:focus, .dropdown-toggle:hover {
        color: var(--ct-rt-purple); !important;
    }

    .form-control {
        color: var(--ct-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--ct-secondary-bg);
        background-image: var(--ct-form-select-bg-img), var(--ct-form-select-bg-icon, none);
        background-repeat: no-repeat;
        background-position: right .77rem center;
        background-size: 14px 10px;
        border: var(--ct-border-width) solid var(--ct-border-color-translucent);
    }

    .bg-body-secondary {
        --ct-bg-opacity: 1;
        background-color: rgb(14 14 14) !important;
    }

    .app-topbar .topbar-menu .topbar-item .topbar-link {
        color: #fff;
    }

    .app-topbar .topbar-menu .topbar-item .topbar-link:hover, .app-topbar .topbar-menu .topbar-item .topbar-link:focus, .app-topbar .topbar-menu .topbar-item .topbar-link:active {
        color: var(--ct-rt-purple) !important;
    }

    .chat-list .odd .chat-message {
        background-color: var(--ct-rt-purple);
        color: #fff;
    }

    .chat .users-list .chat-users.active {
        background-color: rgb(255 255 255 / 6%);
    }

    .btn-primary {
        --ct-btn-color: var(--clr-light-a0); /* White text */
        --ct-btn-bg: var(--clr-primary-a0); /* Fluorescent Purple */
        --ct-btn-border-color: var(--clr-primary-a10); /* Slightly lighter purple */

        /* Hover State */
        --ct-btn-hover-color: var(--clr-light-a0); /* White */
        --ct-btn-hover-bg: var(--clr-primary-a20); /* Medium purple */
        --ct-btn-hover-border-color: var(--clr-primary-a30); /* Lighter purple */

        /* Active (Pressed) State */
        --ct-btn-active-color: var(--clr-light-a0); /* White */
        --ct-btn-active-bg: var(--clr-primary-a40); /* Even lighter purple */
        --ct-btn-active-border-color: var(--clr-primary-a50); /* Softest purple */
        --ct-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); /* Slight press effect */

        /* Focus (Accessibility) */
        --ct-btn-focus-shadow-rgb: 137, 86, 255, 0.5; /* Fluorescent purple glow */

        /* Disabled State */
        --ct-btn-disabled-color: var(--clr-surface-a40); /* Muted gray */
        --ct-btn-disabled-bg: var(--clr-surface-a20); /* Dark gray */
        --ct-btn-disabled-border-color: var(--clr-surface-a30); /* Slightly lighter gray */
    }

    .btn-soft-primary {
        /* Subtle text color */
        --ct-btn-color: var(--clr-primary-a30); /* Faint mid-tone purple */
        --ct-btn-bg: #1c1c1c;
        --ct-btn-border-color: #292929;

        /* Hover State */
        --ct-btn-hover-color: var(--clr-light-a0); /* White for contrast */
        --ct-btn-hover-bg: var(--clr-primary-a10); /* Slightly brighter purple */
        --ct-btn-hover-border-color: var(--clr-primary-a20); /* Subtle purple border */


        /* Active (Pressed) State */
        --ct-btn-active-color: var(--clr-light-a0); /* White */
        --ct-btn-active-bg: var(--clr-primary-a20); /* Medium purple */
        --ct-btn-active-border-color: var(--clr-primary-a30); /* Mid-tone purple */

        /* Disabled State */
        --ct-btn-disabled-color: var(--clr-surface-a40); /* Muted gray */
        --ct-btn-disabled-bg: var(--clr-surface-a20); /* Dark gray */
        --ct-btn-disabled-border-color: var(--clr-surface-a30); /* Slightly lighter gray */

        /* Focus (Accessibility) */
        --ct-btn-focus-shadow-rgb: 137, 86, 255, 0.2; /* Soft, barely visible purple glow */
    }


    .text-muted {
        color: #737373 !important;
    }

    .card {
        background: var(--ct-card-bg) !important;
        border: 1px solid #3d3d3d52;
        box-shadow: 0px 0px 10px -5px #000000;
    }

    .sidenav-menu {
        border: 1px solid #3d3d3d52 !important;
        box-shadow: 0px 0px 10px -5px #000000;
    }

    .sidenav-menu .sidenav-toggle-button {
        background-color: #171717 !important;
    }

    .dropdown-menu {
        background: #000000;
        border: 1px solid #ffffff21;
        text-align: left;
        box-shadow: 0 0 50px 20px #000000;
        transition: ease-out 0.3s;
    }

    .notification-item .notification-item-close {
        position: absolute;
        right: 0;
        display: none;
        top: 0;
        bottom: 0;
        padding: 20px;
        background-color: #212121;
    }

    .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
        background: var(--ct-card-bg) !important;
    }

    .dropdown-item.active, .dropdown-item:active {
        background: #141414;
    }

    .offcanvas-backdrop.show {
        opacity: 1.0;
    }
    .offcanvas-backdrop.fade {
        opacity: 0.5;
    }
    .offcanvas-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;
        width: 100vw;
        height: 100vh;
        background-color: #272727db;
    }

    .border-bottom {
        border-bottom: 1px dashed #ffffff2b !important
    }

    .card .card-header {
        border-bottom: 0;
        background: var(--ct-card-heading) !important;
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        margin-bottom: 0px;
    }

    .card .header-title {
        margin-bottom: 0;
        font-weight: 600;
        color: #dbdbdb;
    }

    .btn-light {
        --ct-btn-color: var(--clr-light-a0); /* Text color */
        --ct-btn-bg: var(--clr-primary-a0); /* Background color */
        --ct-btn-border-color: transparent;

        /* Hover State */
        --ct-btn-hover-color: var(--clr-light-a0); /* Fluorescent Purple */
        --ct-btn-hover-bg: var(--clr-primary-a20); /* Slightly lighter dark gray */
        --ct-btn-hover-border-color: var(--clr-primary-a10); /* Fluorescent Purple Border */

        /* Active State */
        --ct-btn-active-bg: var(--clr-primary-a10); /* Slightly lighter purple */
        --ct-btn-active-color: var(--clr-light-a0); /* White Text */
        --ct-btn-active-border-color: var(--clr-primary-a20); /* Mid-tone Purple */

        /* Focus Shadow */
        --ct-btn-focus-shadow-rgb: 138, 86, 255, 0.7; /* Soft purple glow */
        transition: ease-in 0.3s;
    }

    html:not([data-layout=topnav]) .app-topbar.topbar-active .topbar-menu {
        background-color: #000000 !important;
    }

    @media (max-width: 767.98px) {
        --ct-topbar-item-color: #fff !important;
        --ct-topbar-item-hover-color: #a058ff !important;
        .app-topbar {
            border: none;
            padding: 0;
            background-color: #000 !important;
            border-bottom: 1px solid #ffffff14;
            color: #fff;
        }
    }

    @media (min-width: 768px) {
        html:not([data-layout=topnav]) .app-topbar:not(.topbar-active) {
            --ct-topbar-item-color: #ffffff !important;
            --ct-topbar-item-hover-color: #a058ff !important;
            margin-bottom: 20px;
            color: #fff;
        }
    }

    .page-title {
        --ct-topbar-item-color: #ffffff !important;
        --ct-topbar-item-hover-color: #a058ff !important;
        margin-bottom: 20px;
        color: #fff;
    }
}

:root[data-bs-theme=light] {
    --ct-body-bg: #f8f9fa;
    --ct-card-bg: #ffffff;
    --ct-rt-gray: #e2e2e2;
    --ct-border-color: #d1d1d1;
    --ct-heading-color: #222;
    --ct-menu-bg: #ffffff;
    --ct-rt-purple: #8956FF;
}

[data-bs-theme=light] .serverCarousel {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    padding: 10px;
    align-items: flex-start; /* Align items to the top */
}

[data-bs-theme=light] .serverCard {
    flex: 0 0 calc(33.333% - 15px);
    max-width: calc(33.333% - 15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--ct-card-bg);
    border: 1px solid var(--ct-border-color);
    border-radius: 10px;
    text-align: center;
    transition: 0.3s ease-in-out;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 500px; /* Make sure all cards match */
    overflow: hidden;
}

@media (max-width: 1024px) {
    [data-bs-theme=light] .serverCard {
        flex: 0 0 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    [data-bs-theme=light] .serverCard {
        flex: 0 0 calc(75% - 15px);
        max-width: calc(75% - 15px);
    }
}

[data-bs-theme=light] .serverIcon {
    width: 250px;
    height: 250px;
    margin: auto;
    padding: 10px;
}

[data-bs-theme=light] .serverHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(240, 240, 240, 0.9), rgba(220, 220, 220, 0.9));
    border-radius: 10px;
    color: #333;
    font-weight: bold;
    height: 40px; /* Reduce height to prevent extra gap */
    line-height: 40px;
}

[data-bs-theme=light] .serverRank {
    background: linear-gradient(45deg, #8956FF, #b78eff);
    color: white;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
}

[data-bs-theme=light] .serverStatusContainer {
    font-size: 12px;
    font-weight: bold;
    font-family: "Share Tech Mono", monospace;
    text-transform: uppercase;
    background: rgba(0, 255, 128, 0.2);
    padding: 5px 12px;
    border-radius: 8px;
    margin-top: -5px; /* Move it up slightly */
}

[data-bs-theme=light] .serverTitle {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 6px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: "Orbitron", sans-serif;
}

[data-bs-theme=light] .serverStatsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    text-align: center;
    margin-top: 6px;
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
}

[data-bs-theme=light] .serverStat {
    background: rgba(0, 0, 0, 0.07);
    padding: 4px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

[data-bs-theme=light] .serverStat i {
    color: var(--ct-rt-purple);
    margin-right: 5px;
}

[data-bs-theme=light] .serverLinks {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
    justify-content: space-between;
}

[data-bs-theme=light] .serverLinks a {
    background: linear-gradient(45deg, var(--ct-rt-purple), #b78eff);
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    border-radius: 8px;
    text-transform: uppercase;
    text-align: center;
    transition: 0.3s ease-in-out;
    box-shadow: 0px 0px 5px rgba(137, 86, 255, 0.2);
}

[data-bs-theme=light] .serverLinks a:hover {
    background: linear-gradient(45deg, #6a4acc, #8956FF);
    box-shadow: 0px 0px 7px rgba(137, 86, 255, 0.3);
}

[data-bs-theme=light] .serverLinks a.websiteBtn {
    width: 50%;
}

[data-bs-theme=light] .serverLinks a.discordBtn {
    width: 50%;
    background: linear-gradient(45deg, #6a6d9d, #424660);
}

[data-bs-theme=light] .scrollLeft,
[data-bs-theme=light] .scrollRight {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.1);
    color: #333;
    border-radius: 9px;
    padding: 8px;
    font-size: 16px;
    z-index: 10;
    transition: background 0.3s ease-in-out;
}

[data-bs-theme=light] .scrollLeft:hover,
[data-bs-theme=light] .scrollRight:hover {
    background: rgba(0, 0, 0, 0.2);
}

[data-bs-theme=light] .scrollLeft {
    left: 10px;
}

[data-bs-theme=light] .scrollRight {
    right: 10px;
}

/* 🌟 Team Card Styling */
.team-card {
    background: var(--ct-card-bg);
    border: 1px solid var(--ct-border-color);
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease-in-out;
}

.team-card:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

.team-card .card-img-top {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin: 15px auto;
    border-radius: 50%;
}

.team-card .card-body {
    padding: 15px;
}

.teamBadge {
    font-weight: bold;
    text-transform: uppercase;
}

.teamTitle {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: var(--ct-heading-color);
}

.teamTitle:hover {
    color: var(--ct-rt-purple);
}

/* 🔗 Link Colors */
.runeGreen a {
    color: var(--ct-rt-purple);
    text-decoration: none;
}

.runeGreen a:hover {
    text-decoration: underline;
}

/* 🌟 Team Card Styling */
.team-card {
    background: var(--ct-card-bg);
    border: 1px solid var(--ct-border-color);
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease-in-out;
}

.team-card:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.team-card .card-img-top {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin: 15px auto;
    border-radius: 50%;
}

.team-card .card-body {
    padding: 15px;
}

.teamBadge {
    font-weight: bold;
    text-transform: uppercase;
}

.teamInfo {
    font-size: 14px;
    color: var(--ct-body-color);
}

.teamStats {
    font-size: 14px;
    background: var(--ct-secondary-bg);
    padding: 10px;
    border-radius: 6px;
}

.teamTitle {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: var(--ct-heading-color);
}

.teamTitle:hover {
    color: var(--ct-rt-purple);
}

/* Rank Badge */
.rankBadge {
    width: 100%;
    max-width: 180px;
    margin-top: 5px;
}