@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;400;500;600;700&family=Alata:wght@400");

@font-face {
    font-family: 'Geogrotesque';
    font-style: normal;
    font-weight: 300;
    font-display: auto;
    src: url('/fonts/Geogrotesque/Geogtq-Rg.otf') format("opentype");
}
@font-face {
    font-family: 'Geogrotesque';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url('/fonts/Geogrotesque/Geogtq-Sb.otf') format("opentype");
}
@font-face {
    font-family: 'Geogrotesque';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Geogrotesque/Geogtq-Sb.otf') format("opentype");
}
* {
    box-sizing: border-box
}

body {
    --primary: #c8a064;
    --secondary: rgba(1, 183, 197, .7);
    --primary-gradient: linear-gradient(90deg, #c8a064 0%, #dbc59e 42%, #e9d69b 84%, #fcf1d1);
    --primary-gradient-hover: linear-gradient(90deg, #dbc59e 0%, #e9d69b 42%, #fcf1d1 84%, #fff8e0);
    --secondary-gradient: linear-gradient(104deg, #00F243 1.1%, #E5FF0D 98.9%);
    --secondary-gradient-hover: linear-gradient(104deg, #9838d3 1.1%, #00d0ff 98.9%);
    --lightblue-gradient: linear-gradient(90deg, #A8C2F6 0%, #DFEAFF 50%, #A8C2F6 100%);
    --lightblue-gradient-hover: linear-gradient(90deg,rgba(99, 127, 192, 1) 0%, rgba(146, 170, 214, 1) 42%, rgba(165, 193, 241, 1) 84%, rgba(228, 236, 255, 1) 100%);
    --secondary-gradient-hover: linear-gradient(104deg, #9838d3 1.1%, #00d0ff 98.9%);
    --third-gradient: radial-gradient(188.45% 102.4% at 71.52% 73.3%, #7b7b7b 0%, #a7a7a7 42%, #d0d0d0 84%, #f4f4f4 100%);
    --third-gradient-hover: radial-gradient(188.45% 102.4% at 71.52% 73.3%, #8a8a8a 0%, #b8b8b8 42%, #dedede 84%, #fff 100%);
    --primary-purple: #0f163b;
    --secondary-purple: #471861;
    --third-purple: #203387;
    --dark: #000;
    --app-height: 100vh;
    --dark-blue: #0f163b;
    --blue-gradient: radial-gradient(circle at 30% 40%, #471861, transparent 60%), radial-gradient(circle at 80% 70%, #0f163b, transparent 70%), linear-gradient(135deg, #203387, #0f163b 25%, #0f163b 45%, #202b66 80%, #8a92aa);
    --blue-gradient-hover: radial-gradient(circle at 30% 40%, #5a2380, transparent 60%), radial-gradient(circle at 80% 70%, #202b66, transparent 70%), linear-gradient(135deg, #8e3aa6, #5c4d9b 35%, #232f6d 65%, #273374 80%, #b0b9d6);
    --blue-gradient-radial: radial-gradient(circle at 60% 50%, #036cb4, #202b66 60%), radial-gradient(circle at 80% 70%, #000, #000 70%), linear-gradient(135deg, #203387, #4558b6 25%, #0f163b 65%, #000);
    --purple-gradient: linear-gradient(135deg, #a73ee7 50%, #00ebff);
    --purple-gradient-hover: linear-gradient(135deg, #b84ff8 50%, #1affff);
    --accent-gold: #f4c430;
    --gold-gradient: linear-gradient(90deg, #FFBB55 0%, #FFE89E 50%, #FFBB55 100%);
    --gold-gradient-radial: radial-gradient( #c8a064 0%, #dbc59e 42%, #e9d69b 84%, #fcf1d1 100%);
    --text-light: #fff;
    --text-muted: #b7b7b7;
    --text-dark: #000;
    --text-secondary: #abbcd4;
    --text-tertiary: #97a6b4;
    --text-success: #00dc72;
    --text-warning: #e0e620;
    --text-error: #ff4c47;
    --bg-primary: #0f163b;
    --bg-secondary: #131943;
    --bg-tertiary: #272c47;
    --bg-overlay: rgba(32, 33, 37, .6);
    --bg-medium-dark: #272c47;
    --bg-dark: #202125;
    --bg-darker: #212528;
    --border-light: hsla(0, 0%, 100%, .05);
    --border-medium: hsla(0, 0%, 100%, .1);
    --border-dark: rgba(0, 0, 0, .18);
    --shadow-small: 0 0.125rem 0.5rem rgba(0, 0, 0, .3);
    --shadow-medium: 0 0.25rem 0.75rem rgba(0, 0, 0, .3);
    --shadow-glow: 0 0 0.99375rem rgba(193, 162, 0, .59);
    --function-red: #f2554b;
    --function-green: #36ba73;
    --font-size-xxs: 0.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --spacing-xxs: 0.125rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;
    color: var(--text-light);
    margin: 0;
    font-family: Geogrotesque, sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal)
}

* {
    scrollbar-width: thin;
    scrollbar-color: hsla(0, 0%, 100%, .2) hsla(0, 0%, 100%, .05)
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    background: hsla(0, 0%, 100%, .05);
    border-radius: 3px
}

::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 100%, .2);
    border-radius: 3px
}

    ::-webkit-scrollbar-thumb:hover {
        background: hsla(0, 0%, 100%, .3)
    }

.hide-scrollbar,
.overflow-x-hidden-scrollbar,
.overflow-y-hidden-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

    .hide-scrollbar::-webkit-scrollbar,
    .overflow-x-hidden-scrollbar::-webkit-scrollbar,
    .overflow-y-hidden-scrollbar::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0
    }

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: inset 0 0 0 1000px transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-transition: background-color 9999s ease-in-out 0s !important;
    transition: background-color 9999s ease-in-out 0s !important
}

input:-webkit-autofill {
    background-color: transparent !important;
    background-image: none !important;
    color: #fff !important
}

.cursor-pointer {
    cursor: pointer
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Geogrotesque, sans-serif
}

h3 {
    font-size: 1.125rem;
    font-weight: 700
}

a,
div,
li,
p,
small,
span {
    font-family: Geogrotesque, sans-serif
}

.alata-font {
    font-family: Alata, sans-serif !important
}

.font-barlow {
    font-family: Barlow, sans-serif
}

.font-alata {
    font-family: Alata, sans-serif
}

.text-xxs {
    font-size: var(--font-size-xxs)
}

.text-xs {
    font-size: var(--font-size-xs)
}

.text-sm {
    font-size: var(--font-size-sm)
}

.text-base {
    font-size: var(--font-size-base)
}

.text-md {
    font-size: var(--font-size-md)
}

.text-lg {
    font-size: var(--font-size-lg)
}

.text-xl {
    font-size: var(--font-size-xl)
}

.text-2xl {
    font-size: var(--font-size-2xl)
}

.line-height-tight {
    line-height: var(--line-height-tight)
}

.line-height-normal {
    line-height: var(--line-height-normal)
}

.line-height-relaxed {
    line-height: var(--line-height-relaxed)
}

hr {
    --separator-gradient: linear-gradient(90deg, #4353a3 0%, #8b9ef4 100%, #8b9ef4 0);
    border: none;
    height: 2px;
    background: var(--separator-gradient);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 1rem 0;
    border-radius: 1px
}

.list-item {
    color: var(--text-light);
    text-decoration: none
}

.bg-dark-overlay {
    background: #3c3d3e90
}

.text-success {
    color: #1de84c !important
}

.ratio-32x9 {
    aspect-ratio: 32/9
}

@media (max-width:768px) {
    body {
        --font-size-xxs: 0.5rem;
        --font-size-xs: 0.625rem;
        --font-size-sm: 0.75rem;
        --font-size-base: 0.875rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.25rem;
        --font-size-2xl: 1.5rem;
        --spacing-xxs: 0.125rem;
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.375rem;
        --spacing-md: 0.5rem;
        --spacing-lg: 0.75rem;
        --spacing-xl: 1rem;
        --spacing-2xl: 1.5rem;
        --spacing-3xl: 2rem;
        font-size: var(--font-size-base)
    }
}

.authPage {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: black;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

    .authPage .mobile-only {
        display: none
    }

.mobile-auth-back {
    display: none;
    position: absolute;
    top: 1.1875rem;
    left: .9375rem;
    z-index: 100
}

    .mobile-auth-back .back-btn {
    }

.mobile-auth-banner {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 19rem;
    z-index: 1;
    overflow: hidden
}

.mobile-auth-banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16.6875rem;
    background: linear-gradient(to bottom, rgba(15, 22, 59, 0) 23.84%, var(--bg-primary) 60.71%);
    z-index: 2
}

.mobile-auth-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    position: relative;
    z-index: 1
}

.mobile-auth-panel {
    max-width: 62.25rem;
    max-height: 50rem;
    background: var(--bg-primary);
    border-radius: 1rem;
    box-shadow: 0 .45rem 3.87rem rgba(0, 0, 0, .12);
    outline: 3.59px solid hsla(0, 0%, 100%, 0);
    overflow: hidden;
    display: flex;
    z-index: 5
}

.mobile-auth-panel,
.mobile-auth-wrapper {
    width: 100%;
    height: 100%;
    position: relative
}

.authPage .backgroundEffects {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1
}

.authPage .orangeGlow {
    left: -10.1rem;
    top: 8.91rem;
    background: radial-gradient(circle, rgba(251, 146, 60, .4) 0, rgba(234, 179, 8, 0) 100%);
    filter: blur(0)
}

.authPage .orangeGlow,
.authPage .purpleGlow {
    width: 31.25rem;
    height: 31.25rem;
    position: absolute;
    transform-origin: top left;
    transform: rotate(-72.02deg);
    opacity: .5;
    border-radius: 50%
}

.authPage .purpleGlow {
    left: -21.375rem;
    top: 16rem;
    background: radial-gradient(circle, #a855f7 0, rgba(30, 64, 175, 0) 100%);
    filter: blur(7.4rem)
}

.authPage .blueGlow {
    width: 31.25rem;
    height: 31.25rem;
    position: absolute;
    right: -20rem;
    bottom: -20rem;
    transform-origin: top left;
    transform: rotate(151.19deg);
    opacity: .5;
    background: radial-gradient(circle, rgba(56, 189, 248, .6) 0, rgba(139, 92, 246, 0) 100%);
    border-radius: 50%
}

.mobile-auth-form-panel {
    width: 37.5rem;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem 8.125rem 3rem 2.5rem;
    box-sizing: border-box;
    z-index: 1
}

    .mobile-auth-form-panel::-webkit-scrollbar {
        display: none
    }

.mobile-auth-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem
}

    .mobile-auth-brand img {
        max-width: 100%;
        height: auto
    }

.mobile-auth-welcome {
    display: none
}

.mobile-auth-welcome-logo {
    width: 8rem;
    height: auto
}

.authPage .desktop-only {
    display: flex;
    align-items: center
}

.mobile-auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    justify-content: flex-start;
}

.mobile-auth-tab {
    background: transparent;
    border: none;
    padding: .25rem 1.5rem .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    transition: all .3s ease;
    position: relative
}

    .mobile-auth-tab .mobile-auth-tab-label {
        font-size: 3.125rem;
        font-weight: 600;
        line-height: 3.125rem;
        color: var(--text-light);
        transition: all .3s ease
    }

    .mobile-auth-tab.active .mobile-auth-tab-label {
        background: var(--secondary-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

.mobile-auth-tab-indicator {
    width: 2.5rem;
    height: .25rem;
    background: linear-gradient(90deg, #00F243 0%, #E5FF0D 100%);
    border-radius: .25rem
}

.mobile-auth-tab-content {
    flex: 1 1;
    display: flex;
    flex-direction: column
}

.authPage .auth-form {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.authPage .inputGroup {
    width: 100%
}

.authPage .inputContainer {
    background: #FFFFFF1F;
    border: 4px solid var(--bg-tertiary);
    border-radius: 10px;
    padding: .625rem 1rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 3.5rem
}

.authPage .inputIcon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0
}

.authPage .countryCode {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.745rem;
    color: var(--text-light);
    margin-right: .25rem
}

.authPage .input {
    flex: 1 1;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    outline: none;
    padding: 0
}

.authPage select {
    flex: 1 1;
    border: none;
    background: #212f21;
    color: white;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    outline: none;
    padding: 0;
    color-scheme: dark;
}

    .authPage .input::placeholder {
        color: hsla(0, 0%, 100%, .4)
    }

.authPage .eyeIcon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
    opacity: .8;
    transition: opacity .2s
}

    .authPage .eyeIcon:hover {
        opacity: 1
    }

.authPage .forgotPassword {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.75rem;
    margin-top: .5rem;
    margin-bottom: .5rem
}

.authPage .forgotText {
    color: var(--text-light)
}

.authPage .forgotLink {
    background: var(--secondary-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .1875rem;
    text-decoration-thickness: .0625rem
}

    .authPage .forgotLink:hover {
        opacity: .8
    }


.authPage .checkboxContainer {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: .625rem 0
}

.authPage .checkbox {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--primary);
    margin-top: .125rem;
    flex-shrink: 0;
    cursor: pointer
}

.authPage .checkboxLabel {
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: hsla(0, 0%, 100%, .6);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

    .authPage .checkboxLabel a {
        color: var(--primary);
        text-decoration: underline
    }

.mobile-auth-character {
    flex: 1 1;
    height: 100%;
    position: relative;
    overflow: hidden
}

.mobile-auth-character-container {
    width: 100%;
    height: 100%;
    position: relative
}

.mobile-auth-character-background {
    position: absolute;
    inset: 0;
    background: var(--text-light)
}

.mobile-auth-character-gradient {
    position: absolute;
    top: 7.375rem;
    left: 0;
    width: 100%;
    height: 14.0625rem;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0) 58%, hsla(0, 0%, 100%, 0))
}

.mobile-auth-character-image {
    position: absolute;
    inset: 0;
    background-image: url(../images/login-banner.webp);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: 1
}

.mobile-auth-character-overlay {
    position: absolute;
    bottom: 0;
    right: -6.25rem;
    width: 28.234rem;
    height: auto;
    max-width: none;
    z-index: 2;
    pointer-events: none
}

@media (max-width:991px) {
    .mobile-auth-panel {
        max-width: 100%;
        border-radius: 0;
        outline: none
    }

    .mobile-auth-form-panel {
        width: 100%;
        padding-right: 2.5rem
    }

    .mobile-auth-character {
        display: none
    }
}

@media (max-width:768px) {
    .authPage {
        background: black
    }

        .authPage .mobile-only,
        .mobile-auth-back,
        .mobile-auth-banner {
            display: block
        }

        .authPage .desktop-only {
            display: none !important
        }

    .mobile-auth-welcome {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 10.9375rem;
        margin-bottom: .625rem;
        padding: 0 1.5rem;
        position: relative;
        z-index: 10
    }

    .mobile-auth-welcome-title {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 2.8125rem;
        color: var(--text-light);
        text-shadow: 0 .25rem .25rem rgba(0, 0, 0, .25);
        margin: 0
    }

    .mobile-auth-welcome-logo {
        margin-top: .25rem
    }

    .mobile-auth-panel {
        max-height: none;
        min-height: 100vh;
        border-radius: 0;
        outline: none;
        background: transparent
    }

    .authPage .backgroundEffects {
        display: block
    }

    .mobile-auth-form-panel {
        width: 100%;
        padding: 0 1.5rem 2rem;
        gap: .625rem;
        position: relative;
        z-index: 10
    }

    .mobile-auth-tabs {
        justify-content: center;
        margin-bottom: 1rem;
        padding: 0
    }

    .mobile-auth-tab {
        flex: 1 1;
        padding: .25rem 1.5rem .75rem
    }

        .mobile-auth-tab .mobile-auth-tab-label {
            font-size: 1rem;
            line-height: 1.5rem
        }

    .mobile-auth-tab-indicator {
        width: 2.5rem;
        height: .25rem
    }

    .authPage .auth-form {
        gap: .75rem
    }

    .authPage .inputContainer {
        min-height: 3.5rem
    }

    .authPage .forgotPassword {
        font-size: .9375rem;
        margin-top: .625rem;
        margin-bottom: .625rem
    }

    .mobile-auth-form .mobile-auth-submit {
        height: 2.875rem;
        margin-top: 1.875rem;
        font-size: .9375rem !important
    }

    .authPage .checkboxLabel {
        font-size: .75rem
    }

    .authPage .inputContainer .btn {
        height: 2rem;
        padding: 0 1rem;
        font-size: .8125rem !important;
        min-width: auto
    }
}

@media (max-width:480px) {
    .mobile-auth-form-panel {
        padding: 0 1rem 1.5rem
    }

    .mobile-auth-welcome {
        padding: 0 1rem
    }

    .mobile-auth-tab {
        padding: .25rem 1rem .75rem
    }
}

.auth-desktop-wrapper {
    width: 100%;
    height: 100%;
    padding: 2.5rem;
    box-sizing: border-box
}

.desktop-auth {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    max-height: 800px;
    margin: 0 auto;
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    background: radial-gradient(circle at 20% 20%, rgba(135, 84, 255, .3), transparent 60%), radial-gradient(circle at 60% 0, rgba(9, 213, 255, .25), transparent 55%), linear-gradient(145deg, #1d1446, #060b1c 60%, #030512);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, .45)
}

.desktop-auth-panel {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    z-index: 2;
    background: radial-gradient(ellipse at 0% 0%, #00703a 0%, transparent 50%), radial-gradient(ellipse at 100% 100%, #004d20 0%, transparent 50%), linear-gradient(180deg, #1a2240 0%, #0d1128 100%);
}

.desktop-auth-brand {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.desktop-auth-logo img {
    width: 10rem;
    height: auto
}

.desktop-auth-tagline {
    margin: 0;
    font-size: .95rem;
    color: hsla(0, 0%, 100%, .7)
}

.desktop-auth-tabs {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 1rem
}

.desktop-auth-tab {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
    position: relative;
    padding-bottom: .5rem;
    cursor: pointer;
    transition: color .2s ease;
    margin-top: 3rem
}

    .desktop-auth-tab.active {
        color: #fff;
        background: var(--secondary-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

        .desktop-auth-tab.active:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: .25rem;
            border-radius: 999px;
            background: linear-gradient(104deg, #00F243 1.1%, #E5FF0D 98.9%);
        }

.desktop-auth-hero {
    flex: 1 1;
    position: relative;
    background: url(../images/auth-banner.webp) 50%/cover no-repeat, #030920;
    overflow: visible
}

    .desktop-auth-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(2, 6, 26, 0), rgba(2, 6, 26, .8) 70%);
        z-index: 1
    }

.desktop-auth-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(hsla(0, 0%, 100%, .12) 1px, transparent 0);
    background-size: 32px 32px;
    opacity: .25;
    z-index: 2
}

.desktop-auth-hero-image {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: -20%;
    transform: translateY(-50%);
    width: 130%;
    max-width: none;
    pointer-events: none
}

@media (max-width:1200px) {
    .auth-desktop-wrapper {
        padding: 1.5rem
    }

    .desktop-auth-panel {
        padding: 2.5rem
    }
}

.desktop-auth-form .inputContainer {
    background: rgba(9, 13, 34, .85);
    border: 1px solid hsla(0, 0%, 100%, .08);
    border-radius: .75rem;
    padding: .75rem 1.25rem;
    min-height: 3.5rem
}

.desktop-auth-form .input {
    color: #fff;
    font-weight: 600
}

    .desktop-auth-form .input::placeholder {
        color: hsla(0, 0%, 100%, .5)
    }

.desktop-auth-form .countryCode {
    color: #fff;
    font-weight: 600
}

.desktop-auth-form .code-button {
    color: #1a1d2f !important;
    min-width: auto;
    padding: .35rem 1.25rem;
    font-size: .85rem;
    box-shadow: none
}

.desktop-auth-form .forgotPassword {
    text-align: center;
    margin-top: .25rem
}

.desktop-auth-form .checkboxContainer {
    align-items: flex-start
}

.desktop-auth-form .checkboxLabel {
    color: hsla(0, 0%, 100%, .75);
    font-size: .9rem
}

.desktop-auth-form .desktop-auth-submit {
    background: linear-gradient(94deg, #5076ff, #0dd2ff);
    border: none;
    box-shadow: 0 .75rem 1.5rem rgba(26, 108, 255, .35), inset 0 1px 0 hsla(0, 0%, 100%, .3)
}

    .desktop-auth-form .desktop-auth-submit:hover {
        background: linear-gradient(94deg, #6f8eff, #2de5ff)
    }

button {
    all: unset;
    padding: 0
}

.btn,
button {
    font-weight: 700;
    box-sizing: border-box
}

.btn {
    border: none;
    border-radius: .5rem;
    font-size: var(--font-size-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
    min-width: 7.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none
}

    .btn,
    .btn:hover:not(:disabled) {
        color: var(--text-dark)
    }

        .btn:disabled {
            opacity: .6;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important
        }

.btn-link {
    all: unset;
    color: var(--primary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    text-decoration: underline;
    -webkit-text-decoration-color: var(--primary);
    text-decoration-color: var(--primary);
    text-underline-offset: .3125rem;
    cursor: pointer
}

    .btn-link:hover {
        color: var(--primary-hover);
        -webkit-text-decoration-color: var(--primary-hover);
        text-decoration-color: var(--primary-hover)
    }

.btn-close {
    opacity: 1
}

.primary {
    background: var(--primary-gradient);
    box-shadow: 0 2px 4px hsla(36, 48%, 59%, .2), inset 0 1px 0 hsla(0, 0%, 100%, .2) !important
}

    .primary:hover:not(:disabled) {
        background: var(--primary-gradient-hover);
        box-shadow: 0 4px .75rem hsla(36, 48%, 59%, .3), inset 0 1px 0 hsla(0, 0%, 100%, .3)
    }

    .primary:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 2px 4px hsla(36, 48%, 59%, .2), inset 0 1px 0 hsla(0, 0%, 100%, .2)
    }

.secondary {
    color: black;
    background: var(--secondary-gradient);
    box-shadow: 0 2px 4px hsla(0, 0%, 63%, .2), inset 0 1px 0 hsla(0, 0%, 100%, .3)
}

    .secondary:hover:not(:disabled) {
        color: black;
        background: var(--secondary-gradient);
        box-shadow: 0 2px 4px hsla(0, 0%, 63%, .2), inset 0 1px 0 hsla(0, 0%, 100%, .3)
    }

    .secondary:active:not(:disabled) {
        color: black;
        background: var(--secondary-gradient);
        box-shadow: 0 2px 4px hsla(0, 0%, 63%, .2), inset 0 1px 0 hsla(0, 0%, 100%, .3)
    }

.dark {
    background: rgba(8, 12, 40, .9);
    box-shadow: 0 2px .5rem rgba(0, 0, 0, .35)
}

    .dark,
    .dark:hover:not(:disabled) {
        color: var(--text-light);
        border: 1px solid hsla(0, 0%, 100%, .12)
    }

        .dark:hover:not(:disabled) {
            background: #040614;
            box-shadow: 0 4px 1rem rgba(0, 0, 0, .4)
        }

        .dark:active:not(:disabled) {
            transform: translateY(0)
        }

.neutral {
    background: var(--bg-medium-dark);
    border: none;
    min-width: auto;
    padding: .375rem 1rem;
    border-radius: .3rem
}

    .neutral,
    .neutral:hover:not(:disabled) {
        color: var(--text-light);
        box-shadow: none
    }

        .neutral:hover:not(:disabled) {
            background: #2f3652
        }

        .neutral:active:not(:disabled) {
            background: #23273c;
            transform: translateY(0)
        }

.third {
    color: var(--text-dark);
    background: var(--third-gradient);
    box-shadow: 0 2px 4px hsla(0, 0%, 48%, .2), inset 0 1px 0 hsla(0, 0%, 100%, .3)
}

    .third:hover:not(:disabled) {
        color: var(--text-dark);
        background: var(--third-gradient-hover);
        box-shadow: 0 4px .75rem hsla(0, 0%, 48%, .3), inset 0 1px 0 hsla(0, 0%, 100%, .4)
    }

    .third:active:not(:disabled) {
        color: var(--text-dark);
        transform: translateY(0);
        box-shadow: 0 2px 4px hsla(0, 0%, 48%, .2), inset 0 1px 0 hsla(0, 0%, 100%, .3)
    }

.btn-sm {
    font-size: .8rem;
    min-width: 4.375rem
}

.btn-md {
/*    font-size: 1rem;
    min-width: 4.625rem*/
}

.btn-lg {
    font-size: 1.4rem;
    min-width: 7.5rem
}

.fullWidth {
    width: 100%
}

:root {
    --header-height: 4.625rem;
    --header-height-2: 4rem;
    --sidebar-width: 16.9375rem;
    --nav-height: 3.5rem;
    --header-nav-height: calc(var(--header-height) + var(--nav-height))
}

.main-layout {
    background: #000f01;
    position: relative;
    overflow: hidden
}

.main-layout-body {
    position: relative;
    height: 100%;
    background: transparent
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100
}

.top-header {
    height: var(--header-height);
    background: linear-gradient(90deg, #272C47 0%, #003D19 50%, #272C47 100%);
    box-shadow: 0 2px 1rem rgba(32, 24, 90, .12)
}

.sidebar {
    position: fixed;
    left: 0;
    width: var(--sidebar-width);
    background: var(--primary-purple);
    box-shadow: 2px 0 1rem rgba(32, 24, 90, .12);
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 100
}

.main-content,
.sidebar {
    overflow-y: auto;
    overflow-x: hidden
}

.main-content {
    position: relative;
    overscroll-behavior: contain;
    min-height: calc(var(--app-height) - 74px);
}

.offcanvas-body {
    overflow-y: auto;
    scrollbar-width: auto;
    -webkit-overflow-scrolling: touch
}

    .offcanvas-body::-webkit-scrollbar {
        width: .5rem;
        height: .5rem
    }

    .offcanvas-body::-webkit-scrollbar-thumb {
        background: hsla(0, 0%, 100%, .4);
        border-radius: .5rem
    }

    .offcanvas-body::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, .2)
    }

    .offcanvas-body .category-item.active,
    .offcanvas-body .category-item:hover,
    .offcanvas-body .list-item:hover {
        background: var(--primary-gradient-hover);
        color: var(--text-dark);
        border-radius: .5rem
    }

.main-nav {
    padding: .5rem 0;
    border-top: 1px solid hsla(0, 0%, 100%, .15);
    overflow-x: auto;
    height: var(--nav-height);
    background: var(--blue-gradient)
}

    .main-nav::-webkit-scrollbar {
        height: 0;
        background: transparent
    }

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0 1rem
}

.navbar a {
    color: var(--text-light);
    text-decoration: none;
    min-width: 6.25rem;
    min-height: 2.5rem;
    padding: .3125rem 1rem;
    white-space: nowrap;
    border: 2px solid transparent
}

    .navbar a.active,
    .navbar a:hover {
        border-radius: 3px;
        border: 2px inset rgba(139, 158, 244, .65);
        box-shadow: 0 0 0 1px rgba(139, 158, 244, .3), 0 6px 1.125rem rgba(17, 24, 39, .25);
        background: rgba(139, 158, 244, .08)
    }

.balance-container {
    gap: 0;
    background: #FFFFFF40;

    border-radius: .3rem
}

.balance-container,
.balance-input-wrapper {
    display: flex;
    align-items: center;
    padding: .25rem
}

.balance-input-wrapper {
    gap: .25rem
}

.balance-input {
    background: transparent;
    border: none;
    color: white;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02rem;
    text-transform: uppercase;
    width: 6rem;
    outline: none;
}

    .balance-input::placeholder {
        color: var(--text-muted)
    }

.balance-dropdown-btn {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .25rem;
    transform: rotate(180deg) scaleY(-1)
}

    .balance-dropdown-btn:hover {
    }

.deposit-btn {
    height: 2.125rem;
    padding: .375rem 1.8125rem;
    border-radius: .25rem;
    box-shadow: inset 0 -2px 0 0 #4f5b90
}

.header-icon-btn {
    border: none;
    border-radius: .5rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer
}

    .header-icon-btn:hover {
        background: #1a1f3d
    }

.notification-badge {
    position: absolute;
    top: -.25rem;
    left: -.1875rem;
    background: var(--blue-gradient-hover);
    color: var(--text-light);
    font-size: .8rem;
    font-weight: 600;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--dark);
    border-radius: 50%;
    justify-content: center;
    line-height: 0
}

.notification-badge,
.user-profile-btn,
.user-profile-dropdown {
    display: flex;
    align-items: center
}

.user-profile-btn {
    background: var(--primary-purple);
    border: none;
    border-radius: .5rem;
    padding: .3125rem;
    gap: .25rem;
    cursor: pointer
}

    .user-profile-btn:hover {
        background: #1a1f3d
    }

    .user-profile-btn img {
        border-radius: .2rem;
        object-fit: cover
    }

.user-avatar {
    border: 2px solid #33373d;
    border-radius: .5rem;
    width: 2.125rem;
    height: 2.125rem;
    object-fit: cover
}

.user-dropdown-icon {
    transform: rotate(270deg)
}

.sidebar-toggle-btn {
    background: #465950;
    border: none;
    border-radius: .25rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-light)
}

    .sidebar-toggle-btn:hover {
    }

    .sidebar-toggle-btn svg {
        width: 1.125rem;
        height: 1rem;
        transform: rotate(180deg) scaleY(-1)
    }

.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease
}

    .offcanvas-overlay.show {
        opacity: 1;
        visibility: visible
    }
.offcanvas-backdrop {
    display: none !important;
}

.offcanvas-sidebar {
    position: fixed;
    top: var(--header-height);
    right: -16.9375rem;
    width: 16.9375rem;
    height: 100vh;
    background: var(--primary-purple);
    z-index: 1050;
    transition: right .3s ease;
    overflow-y: auto
}

    .offcanvas-sidebar.show {
        right: 0
    }

    .offcanvas-sidebar::-webkit-scrollbar {
        width: 6px
    }

    .offcanvas-sidebar::-webkit-scrollbar-track {
        background: hsla(0, 0%, 100%, .05)
    }

    .offcanvas-sidebar::-webkit-scrollbar-thumb {
        background: hsla(0, 0%, 100%, .2);
        border-radius: 3px
    }

        .offcanvas-sidebar::-webkit-scrollbar-thumb:hover {
            background: hsla(0, 0%, 100%, .3)
        }

.mobile-balance-display {
    display: flex;
    align-items: center;
    gap: .375rem;
    background: rgba(15, 22, 59, .8);
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: .5rem;
    padding: .375rem .625rem;
    height: 2rem
}

    .mobile-balance-display img {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0
    }

.balance-amount {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap
}

.mobile-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 1.25rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .3rem;
    cursor: pointer;
    transition: all .2s ease;
    position: relative
}

    .mobile-icon-btn:hover {
        background: hsla(0, 0%, 100%, .1)
    }

    .mobile-icon-btn:active {
        transform: scale(.95)
    }

.mobile-notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #4353a3;
    color: var(--text-light);
    font-size: .625rem;
    font-weight: 600;
    width: .875rem;
    height: .875rem;
    border: 1.5px solid var(--primary-purple);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1
}

.hamburger-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all .2s ease
}

    .hamburger-btn:hover {
        opacity: .8
    }

    .hamburger-btn:active {
        transform: scale(.95)
    }

@media (max-width:768px) {
    .balance-input {
    }
}

.offcanvas-desktop {
    --bs-offcanvas-width: 18rem;
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-top: var(--header-height);
    overflow-y: auto;
    background: url('/images/side bg.webp'),#000F01;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.offcanvas-desktop,
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm)
}


.sidebar-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
    height: 2.625rem;
    background: linear-gradient(90deg, #374775, #131F42);
    border-radius: var(--spacing-sm);
    text-decoration: none;
    transition: all .2s ease;
    cursor: pointer;
    padding: 10px 16px;
}

    .sidebar-menu-item:hover {
    }

    .sidebar-menu-item.active {
        background: var(--secondary-gradient);
    }

.sidebar-menu-icon {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    flex-shrink: 0;
    object-fit: contain
}

.sidebar-menu-label {
    font-size: var(--font-size-base);
    color: #abbcd4;
    white-space: nowrap;
        margin-left:5px;
}

.sidebar-menu-item.active .sidebar-menu-label {
    color: black;
}

.sidebar-categories {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm)
}

.sidebar-category-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
    height: 2.625rem;
    background: #201746;
    border-radius: var(--spacing-sm);
    text-decoration: none;
    transition: all .2s ease;
    cursor: pointer
}

    .sidebar-category-item:hover {
        background: hsla(0, 0%, 100%, .1)
    }

    .sidebar-category-item.active {
        background: linear-gradient(90deg, #4353a3, #8b9ef4)
    }

.sidebar-category-icon {
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    flex-shrink: 0;
    object-fit: contain
}

.sidebar-category-label {
    font-weight: 700;
    font-size: var(--font-size-base);
    color: #abbcd4;
    text-transform: uppercase;
    white-space: nowrap
}

.sidebar-category-item.active .sidebar-category-label {
    color: var(--text-light)
}

.offcanvas-mobile {
    width: 20rem !important;
    background: var(--bg-primary) !important
}

    .offcanvas-mobile .offcanvas-header {
        padding: 1.5rem 1rem;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem
    }

    .offcanvas-mobile .offcanvas-body {
        padding: 0 0.5rem 1.5rem;
        overflow-y: auto
    }

.offcanvas-close-btn {
    padding: 0;
    border: none;
    border-radius: .1rem;
    background: var(--secondary-gradient-hover);
    opacity: 1 !important;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease
}

    .offcanvas-close-btn i {
        color: black;
        font-size: .625rem;
        line-height: 1
    }

    .offcanvas-close-btn:hover {
        transform: scale(1.05);
        opacity: .9 !important
    }

    .offcanvas-close-btn:focus {
        box-shadow: none;
        outline: none
    }

.offcanvas-user-profile {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0
}

.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--gold-gradient-radial)
}

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

.user-info {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.user-vip-badge {
    display: flex;
    align-items: center;
    gap: .25rem
}

    .user-vip-badge img {
        width: 1.25rem;
        height: 1.25rem
    }

.user-name {
    font-size: .625rem;
    font-weight: 600;
    color: #fff
}

.offcanvas-menu-section {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-bottom: .5rem
}

.offcanvas-menu-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    height: 2.5rem;
    background: #272c47;
    border-radius: .1rem;
    text-decoration: none;
    transition: all .2s ease
}

    .offcanvas-menu-item:hover {
        background: hsla(0, 0%, 100%, .1)
    }

    .offcanvas-menu-item.active {
        background: linear-gradient(90deg, #4353a3, #8b9ef4)
    }

    .offcanvas-menu-item .menu-icon {
        width: .9375rem;
        height: .9375rem;
        flex-shrink: 0;
        object-fit: contain
    }

    .offcanvas-menu-item .menu-label {
        font-size: 1rem;
        font-weight: 600;
        color: #abbcd4;
        white-space: nowrap
    }

    .offcanvas-menu-item.active .menu-label {
        color: #fff
    }

.offcanvas-category-section {
    margin-top: .5rem
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: .5rem;
    gap: .5rem;
    padding: .75rem;
    background: #272c47;
    border-radius: .1rem
}

.category-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem .25rem;
    text-decoration: none;
    transition: all .2s ease;
    border-radius: .25rem;
    min-height: 60px
}

    .category-grid-item:hover {
        background: hsla(0, 0%, 100%, .05)
    }

    .category-grid-item.active {
        background: hsla(0, 0%, 100%, .1)
    }

.category-icon-wrapper {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center
}

    .category-icon-wrapper img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

.category-label {
    color: #fff;
    text-align: center;
    text-transform: uppercase
}

.category-grid-item.active .category-label {
    color: #fff
}

.panel {
    background: hsla(0, 0%, 100%, .06);
    border-radius: 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(17, 24, 39, .35);
    backdrop-filter: blur(.375rem);
    -webkit-backdrop-filter: blur(.375rem);
    overflow: hidden;
    position: relative
}

.panel-animate:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(.5rem);
    -webkit-backdrop-filter: blur(.5rem);
    opacity: 0;
    transition: opacity .3s ease-in-out;
    z-index: 1;
    pointer-events: none;
    padding: .2rem
}

.panel-animate:hover:before {
    opacity: 1;
    pointer-events: auto
}

.panel-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .3s ease-in-out;
    z-index: 2;
    pointer-events: none
}

.panel-animate:hover .panel-play-button {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1.05)
}

.ggs-viewport .panel-play-button .btn {
    font-size: .85rem;
    padding: .1rem .2rem
}

.ggs-viewport .panel-animate:hover .panel-play-button {
    transform: translate(-50%, -50%)
}

.panel-header {
    text-align: center;
    padding: .3rem .8rem;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .08), hsla(0, 0%, 100%, .02))
}

.panel-body {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem
}

.title-with-line {
    position: relative;
    display: inline-block;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0 var(--twl-gap);
    --twl-line-width: 6.25rem;
    --twl-line-height: 3px;
    --twl-gap: 1rem
}

    .title-with-line:after,
    .title-with-line:before {
        content: "";
        position: absolute;
        top: 50%;
        width: var(--twl-line-width);
        height: var(--twl-line-height);
        background: var(--primary-gradient);
        transform: translateY(-50%)
    }

    .title-with-line:before {
        left: 0
    }

    .title-with-line:after {
        right: 0
    }

.game-cover {
    aspect-ratio: 1/1
}

:root {
    --mobile-nav-height: 3.75rem
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-nav-height);
    background: linear-gradient(135deg, var(--primary-purple) 0, #1a0d3f 100%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -2px .625rem rgba(0, 0, 0, .3)
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    color: var(--text-light);
    text-decoration: none;
    font-size: .75rem;
    transition: color .2s
}

    .mobile-nav-item:active,
    .mobile-nav-item:hover {
        color: var(--primary)
    }

    .mobile-nav-item img {
        filter: brightness(0) invert(1)
    }

    .mobile-nav-item:active img,
    .mobile-nav-item:hover img {
        filter: brightness(1)
    }

.mobile-tab {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 1rem;
    gap: 1rem
}

.mobile-category-sidebar {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    grid-column: 1;
    width: 4.625rem
}

.category-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 1rem .5rem;
    background: linear-gradient(135deg, #4f5b90, #4b3557 50%, #272c47);
    border: 2px solid #979797;
    border-radius: .75rem;
    color: var(--text-light);
    text-decoration: none;
    text-align: center;
    transition: all .2s;
    width: 4.375rem;
    height: 4.375rem;
    aspect-ratio: 1/1;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

    .category-box.active,
    .category-box:hover {
        background: transparent;
        color: var(--text-light);
        border-color: hsla(36, 48%, 59%, .6);
        transform: scale(1.05)
    }

.category-label {
    font-size: .6rem;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word
}

.mobile-game-cards {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
    grid-gap: .75rem;
    gap: .75rem
}

.game-section-title {
    color: var(--text-light);
    font-size: .9rem;
    font-weight: 600;
    margin: 0 0 1rem;
    text-transform: uppercase
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: .625rem;
    gap: .625rem
}

.game-grid-item {
    text-decoration: none;
    display: block
}

.game-grid-card {
    background: #272d4a;
    border-radius: .25rem;
    overflow: hidden;
    transition: transform .2s ease
}

    .game-grid-card:hover {
        transform: translateY(-2px)
    }

.game-grid-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 138.5/150;
    overflow: hidden
}

.game-grid-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.game-grid-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0, rgba(0, 0, 0, .4) 50%, transparent);
    pointer-events: none
}

.game-grid-card-title {
    padding: .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-light);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #272d4a
}

.game-card {
    display: flex;
    flex-direction: column;
    background: rgba(15, 22, 59, .8);
    border-radius: .75rem;
    overflow: hidden;
    text-decoration: none;
    transition: transform .2s;
    position: relative
}

    .game-card:active,
    .game-card:hover {
        transform: translateY(-4px)
    }

.game-card-image {
    position: relative;
    width: 100%;
    padding-top: 75%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.game-card-overlay {
    position: absolute;
    inset: 0;
    background: var(--blue-gradient);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-lg)
}

.game-card-title {
    font-size: var(--font-size-2xl);
    font-weight: 400;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5)
}

.game-card-subtitle,
.game-card-title {
    color: var(--text-light);
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.game-card-subtitle {
    font-size: var(--font-size-xs);
    opacity: .9;
    margin: .25rem 0 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5)
}

.game-card-footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(0, 0, 0, .3);
    color: #4ade80;
    font-size: var(--font-size-sm);
    font-weight: 600
}

    .game-card-footer img {
        filter: brightness(0) saturate(100%) invert(70%) sepia(76%) saturate(445%) hue-rotate(76deg) brightness(95%) contrast(91%)
    }

.game-card-vertical {
    position: relative;
    width: 100%;s
    border-radius: var(--virtual-card-border-radius, 4px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-medium-dark);
    transition: transform .2s ease
}

.game-card-clickable {
    cursor: pointer
}

    .game-card-clickable:hover {
        transform: translateY(-4px)
    }

.game-card-link {
    text-decoration: none;
    display: block
}

.game-card-vertical-background {
    display: none
}

.game-card-vertical-image-container {
    flex: 1 1;
    width: 100%;
    min-height: 0;
    position: relative
}

.game-card-vertical-image {
    width: 100%;
    height: 100%;
    background: #cedfe8;
    overflow: hidden
}

.game-card-vertical-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block
}

.game-card-vertical-img-placeholder {
    background: #cedfe8;
    width: 100%;
    height: 100%
}

.game-card-vertical-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--virtual-card-overlay-height, 7.1875rem);
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, .4) 50%, transparent);
    pointer-events: none
}

.game-card-vertical-content {
    position: absolute;
    bottom: 2.5rem;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    width: 100%;
    padding: 0 var(--spacing-sm);
    z-index: 1
}

.game-card-vertical-title {
    font-size: var(--font-size-xl);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .5)
}

.game-card-vertical-subtitle,
.game-card-vertical-title {
    font-weight: 600;
    color: var(--text-light);
    line-height: var(--line-height-tight);
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.game-card-vertical-subtitle {
    font-size: var(--font-size-xs);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    letter-spacing: .09375rem
}

.game-card-vertical-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--bg-medium-dark);
    padding: var(--spacing-sm);
    z-index: 1
}

.game-card-vertical-views {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-light);
    line-height: var(--line-height-tight);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs)
}

    .game-card-vertical-views svg {
        width: .625rem;
        height: .78125rem;
        fill: var(--virtual-view-icon-color, #0f0);
        flex-shrink: 0
    }

.game-card-wrapper {
    width: 100%;
    min-width: 0
}

.scrollable-section-container.scroll-mode .game-card-wrapper {
    width: 8.65625rem;
    min-width: 8.65625rem
}

.promotion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: .9375rem;
    gap: .9375rem;
    padding: .5625rem
}

.promo-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.promo-tabs-inner {
    display: flex;
    gap: .75rem;
    padding: .75rem .5rem;
    flex-wrap: nowrap
}

.promo-card {
    position: relative;
    background: hsla(0, 0%, 100%, .04);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 1rem rgba(17, 24, 39, .5)
}

    .promo-card:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 1rem;
        padding: 3px;
        background: var(--blue-gradient);
        -webkit-mask: linear-gradient(var(--text-light) 0 0) content-box, linear-gradient(var(--text-light) 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 1;
        transition: all 1s ease
    }

    .promo-card:hover:before {
        background: var(--blue-gradient-hover)
    }

    .promo-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 1px dashed hsla(0, 0%, 100%, .25)
    }

.promo-content {
    color: var(--text-light);
    padding: .2rem
}

.promo-meta {
    color: var(--text-muted)
}

@media (max-width:768px) {
    .promotion-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:480px) {
    .promotion-grid {
        grid-template-columns: 1fr
    }
}

.promotion-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .2s ease;
    width: 100%
}

    .promotion-card:hover {
        transform: translateY(-4px)
    }

.promotion-card-banner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: .65625rem .65625rem 0 0;
    background: linear-gradient(135deg, #1a2547 0, var(--primary-purple) 100%)
}

.promotion-card-content {
    background: var(--bg-medium-dark);
    border-radius: 0 0 .65625rem .65625rem;
    padding: .4375rem .375rem;
    display: flex;
    flex-direction: column;
    gap: .3125rem;
}

.promotion-card-title {
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.1875rem;
    color: var(--text-light);
    margin: 0;
    text-transform: capitalize;
    padding: 0 .625rem
}

.promotion-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px
}

.promotion-card-date {
    font-weight: 600;
    font-size: .6875rem;
    line-height: 1.0625rem;
    color: #abbcd4;
    text-transform: capitalize;
    padding-left: .625rem
}

.promotion-card-details {
    display: flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity .2s ease
}

    .promotion-card-details:hover {
        opacity: .8
    }

    .promotion-card-details span {
        font-weight: 600;
        font-size: .675rem;
        line-height: 1.0625rem;
        background: linear-gradient(90deg, #00F243 0%, #E5FF0D 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-transform: capitalize;
        white-space: nowrap
    }

    .promotion-card-details svg {
        flex-shrink: 0;
        width: .34375rem;
        height: 1.0625rem
    }

.promotion-footer {
    gap: .625rem;
    margin-top: 2.5rem
}

.promotion-footer,
.promotion-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.promotion-progress {
    gap: .5rem;
    max-width: 94.25rem
}

.promotion-progress-bar {
    width: 9.375rem;
    height: .3125rem;
    background: #1a1c20;
    border-radius: 4px;
    overflow: hidden
}

.promotion-progress-fill {
    height: 100%;
    background: var(--purple-gradient);
    border-radius: 4px;
    transition: width .3s ease
}

.promotion-progress-text {
    font-weight: 600;
    font-size: .75rem;
    line-height: 1.125rem;
    color: #636f82;
    text-align: center
}

:root {
    --esports-section-title-size: 1.375rem
}

.esports-match-card {
    background: var(--blue-gradient);
    background-size: cover;
    background-position: 50%;
    overflow: hidden;
    aspect-ratio: 3/2;
    width: 100%;
    height: 100%;
    transition: transform .2s ease
}

.esports-match-card-clickable {
    cursor: pointer
}

    .esports-match-card-clickable:hover {
        transform: translateY(-4px)
    }

.esports-match-card-link {
    text-decoration: none;
    display: block
}

.esports-match-card-image {
    width: 100%;
    height: 100%;
    position: relative
}

    .esports-match-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.esports-match-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: #cedfe8
}

.esports-section {
    width: 100%
}

.esports-section-title {
    font-size: var(--esports-section-title-size);
    font-weight: 600;
    color: var(--text-light)
}

.esports-match-card-wrapper {
    width: 100%;
    min-width: 0
}

.scrollable-section-container.scroll-mode .esports-match-card-wrapper {
    flex: 0 0 auto;
    width: 350px;
    min-width: 350px
}

.esports-tabs {
    padding: 0 .75rem;
    margin-bottom: 1rem
}

.esports-tab {
    background: var(--bg-medium-dark);
    border: none;
    border-radius: .3rem;
    padding: .5rem 1.25rem;
    color: var(--text-light);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap
}

    .esports-tab:hover {
        background: hsla(0, 0%, 100%, .1)
    }

.esports-tab-active {
    background: linear-gradient(90deg, #4353a3, #8b9ef4)
}

:root {
    --virtual-card-overlay-height: 7.1875rem;
    --virtual-card-border-radius: 4px;
    --virtual-view-icon-color: #0f0
}

.virtual-section {
    width: 100%
}

.virtual-section-header {
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-lg)
}

.virtual-section-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-light)
}

.virtual-section-games {
    position: relative;
    padding: 0 var(--spacing-md)
}

.virtual-games-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 8.65625rem;
    grid-gap: .916rem;
    gap: .916rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--spacing-sm)
}

@media (max-width:62rem) {
    :root {
        --virtual-card-overlay-height: 6.25rem
    }
}

.games-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .03125rem
}

.games-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 8.65625rem;
    grid-gap: .916rem;
    gap: .916rem;
    overflow-x: auto;
    overflow-y: hidden
}

.games-grid-item {
    width: 100%;
    min-width: 0
}

.scrollable-section-container.scroll-mode .games-grid-item {
    width: 8.65625rem;
    min-width: 8.65625rem
}

.scrollable-section-container.pagination-mode .games-grid-item {
    width: 100%;
    min-width: 0
}

.games-grid-2rows {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 8.65625rem;
    grid-gap: .916rem;
    gap: .916rem;
    overflow-x: auto;
    overflow-y: hidden
}

@media (max-width:768px) {
    .games-section-title {
        font-size: .9rem
    }
}

@media (max-width:36rem) {
    .games-section-title {
        font-size: .9375rem
    }
}

.promotion-modal-dialog-fullscreen {
    padding: 1rem;
    background: #000f01;
}

.promotion-modal-content {
    background: #000f01;
    max-width: 62.5rem;
    display: block;
    margin: 0 auto
}

.promotion-modal-header {
    padding: 1rem 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
    flex-shrink: 0
}

.promotion-modal-banner {
    width: 100%;
    overflow: hidden;
    background: #000;
    flex-shrink: 0
}

    .promotion-modal-banner img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
        max-height: 21.875rem
    }

.promotion-modal-body {
    padding: 2rem 1.5rem;
    overflow-y: auto;
    flex: 1 1;
    max-width: 62.5rem
}

.promotion-content {
    max-width: 62.5rem;
    margin: 0 auto;
    color: var(--text-light)
}

@media (max-width:30rem) {
    .promotion-modal-content {
        border-radius: 0
    }

    .promotion-modal-banner img {
        max-height: 12.5rem
    }

    .promotion-modal-body {
        padding: 1rem
    }
}

.tab-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .625rem;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: .25rem;
    scroll-behavior: smooth
}

    .tab-navigation::-webkit-scrollbar {
        display: none
    }

.tab-nav-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: .6125rem 1.25rem;
    background: #1C2333;
    border: 1px solid #FFFFFF33; border-radius: .3rem;
    color: #b7bbcc;
    font-weight: 700;
    font-size: var(--font-size-sm);
    line-height: 1.05275rem;
    text-transform: capitalize;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease, text-shadow .3s ease;
    position: relative;
    min-width: -moz-fit-content;
    min-width: fit-content;
    flex-shrink: 0;
    overflow: visible
}


.tab-nav-button-active, .tab-nav-button.selected {
    background: var(--secondary-gradient);
    color: black;
    text-shadow: 0 0 .99375rem rgba(193, 162, 0, .59);
    position: relative
}

.tab-nav-dropdown-toggle {
    background: transparent !important;
    border: 1px solid var(--border-light)
}
.moving-banner {
display:none;
}
.tab-nav-icon {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center
}

    .tab-nav-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.tab-nav-label {
    white-space: nowrap
}

.tab-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1875rem;
    height: 1.1875rem;
    padding: var(--spacing-xs);
    background: hsla(0, 0%, 100%, .1);
    border-radius: .25rem;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-light);
    line-height: 1
}

.tab-nav-button-active .tab-nav-count {
    background: black;
}

@media (min-width:768px) {
    .tab-nav-button {
        flex: 0 0 auto !important
    }
}

.personal-center-container {
    padding: 1rem
}

.personal-center-tabs {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center
}

.personal-center-content {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    min-height: 25rem
}

.tab-content-wrapper {
    animation: fadeIn .3s ease-in
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-gap: 1.1875rem;
    gap: 1.1875rem;
    max-width: 68.75rem
}

.avatar-selector-card {
    background: var(--primary-purple);
    border-radius: .3125rem;
    padding: 1.375rem .5rem 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 18.75rem
}

.avatar-image {
    width: 100%;
    max-width: 22rem;
    height: auto;
    object-fit: contain;
    margin-bottom: 1rem
}

.avatar-wheel {
    position: relative;
    width: 100%;
    height: 17.5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.avatar-wheel-inner {
    position: relative;
    width: 17.5rem;
    height: 17.5rem
}

.avatar-center {
    object-fit: cover;
    background: #84828a
}

.btn-save-avatar {
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

    .btn-save-avatar:hover {
        opacity: 1
    }

.profile-info-card {
    border-radius: .3rem;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .3125rem
}

.profile-info-card,
.profile-info-item {

}

.profile-info-item-clickable,
.profile-info-item-editable {
    cursor: pointer;
    transition: background .3s ease
}

    .profile-info-item-clickable:hover,
    .profile-info-item-editable:hover {
        background: rgba(39, 44, 71, .5)
    }

.info-icon {
    font-size: .9rem;
    color: var(--text-light);
    opacity: .7;
    min-width: 1rem;
    text-align: center
}

.info-label,
.info-value {
    font-weight: 600;
    font-size: .8rem;
    color: var(--text-light)
}

.info-arrow {
    font-size: .75rem;
    color: var(--text-light);
    opacity: .7
}

.bonus-placeholder,
.notice-placeholder,
.records-placeholder,
.settings-placeholder {
    text-align: center;
    padding: 3.75rem 1.25rem;
    color: #abbcd4;
    font-size: .9rem
}

.notice-tab-container {
    width: 100%;
    padding: 1.5rem
}

.notice-sub-tabs {
    margin-bottom: 1.5rem
}

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.notice-placeholder {
    color: var(--text-muted);
    text-align: center;
    padding: 3rem 0
}

.notice-card {
    background: linear-gradient(90deg,rgba(14, 89, 48, 1) 0%, rgba(38, 44, 70, 1) 30%, rgba(38, 44, 70, 1) 70%, rgba(54, 66, 55, 1) 100%);
    border-radius: .5rem;
    padding: 1.25rem;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden
}


.notice-icon-wrapper {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--secondary-gradient);
    border: 1px solid var(--secondary);
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.notice-icon {
    font-size: 1.25rem;
    color: var(--text-light)
}

.notice-icon-image {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain
}

.notice-content {
    flex: 1 1
}

.notice-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .02em
}

.notice-message {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5
}

.notice-time {
    font-size: .75rem;
    color: hsla(0, 0%, 100%, .4);
    margin: 0
}

.btn-notice-action {
    min-width: 7.5rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0
}

.notice-tab-mobile {
    padding-bottom: 5rem
}

.notice-mobile-bottom-action {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(34, 43, 89, .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: .75rem 1rem;
    z-index: 100;
    border-top: 1px solid hsla(0, 0%, 100%, .1)
}

.btn-mark-all-read {
    width: 100%;
    font-size: .9375rem;
    font-weight: 600;
    text-transform: none;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem
}

    .btn-mark-all-read i {
        font-size: .9rem
    }

@media (max-width:768px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .notice-tab-mobile .notice-card {
        padding: 0;
        flex-direction: column
    }

    .notice-tab-mobile .btn-notice-action {
        width: 100%;
        border-radius: 0;
        font-size: .6875rem
    }

    .notice-tab-mobile .notice-message,
    .notice-tab-mobile .notice-title {
        font-size: .75rem
    }

    .notice-tab-mobile .notice-time {
        font-size: .6875rem
    }
}

.profile-banner {
    margin-bottom: 1.5rem
}

.profile-banner-content {
    position: relative;
    background: radial-gradient(70% 70% at 0% 20%, rgba(0, 205, 24, 0.4) 0%, transparent 100%), radial-gradient(70% 70% at 100% 100%, rgba(0, 205, 24, 0.4) 0%, transparent 100%), #0F163B;
    border-radius: 1.03125rem;
    padding: 1.5rem 4.5rem;
    min-height: 11.6875rem;
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: "avatar balance bonus coin" "avatar actions actions coin";
    grid-column-gap: 2.5rem;
    column-gap: 2.5rem;
    grid-row-gap: 1rem;
    row-gap: 1rem;
    align-items: center;
    overflow: hidden
}

.profile-avatar-section {
    grid-area: avatar;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    position: relative;
    z-index: 2
}

.profile-avatar-wrapper {
    position: relative
}

.profile-avatar-ring {
    width: 4.625rem;
    height: 4.625rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #E5FF0D 0%, #00F243 100%);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center
}

.profile-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-purple)
}

.profile-vip-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: .5rem
}

.vip-icon {
    width: 1.9375rem;
    height: 1.9375rem
}

.profile-name,
.vip-level {
    font-size: .9rem
}

.profile-name {
    color: var(--text-light);
    margin-top: 4px
}

.profile-balance-item {
    grid-area: balance
}

.profile-balance-item,
.profile-bonus-item {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    position: relative;
    z-index: 2
}

.profile-bonus-item {
    grid-area: bonus
}

.balance-label {
    color: var(--text-light)
}

.balance-amount,
.balance-label {
    font-size: .9rem;
    margin: 0;
    text-align: left
}

.balance-amount {
    color: #efefff;
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.balance-currency {
    color: #abbcd4
}

.refresh-button {
    width: .859375rem;
    height: .859375rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: .7;
    transition: opacity .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

    .refresh-button:hover {
        opacity: 1
    }

    .refresh-button img {
        width: 100%;
        height: 100%
    }

.profile-actions {
    grid-area: actions;
    display: flex;
    gap: 1.125rem;
    position: relative;
    z-index: 2;
    align-items: center;
    padding-left: 0
}

.profile-coin-decoration {
    grid-area: coin;
    width: 8.59375rem;
    height: 8.59375rem;
    opacity: .8;
    pointer-events: none;
    z-index: 1;
    justify-self: end;
    align-self: center
}

.personal-center-mobile {
    padding-bottom: 1.25rem;
    min-height: 100vh
}

.personal-center-mobile-menu {
    margin: 1.1875rem .6875rem;
    background: linear-gradient(270deg, #272C47 0%, rgba(1, 17, 2, 0) 100%);
    border-radius: .3rem;
    padding: .5rem .75rem
}

.personal-center-mobile-menu-item,
.profile-info-item,
.profile-info-item-editable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .375rem;
    background: transparent;
    border: none;
    border-radius: .3rem;
    width: 100%;
    cursor: pointer;
    transition: background .2s ease;
    height: 3rem
}

    .personal-center-mobile-menu-item:hover {
        background: var(--border-light)
    }

.menu-item-content {
    display: flex;
    align-items: center;
    gap: .75rem
}

.menu-item-icon-wrapper {
    position: relative;
    width: 1.25rem;
    height: 1.25rem
}

.menu-item-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain
}

.menu-item-badge {
    position: absolute;
    top: -.375rem;
    left: -.375rem;
    background: var(--function-red);
    font-size: .5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.menu-item-badge,
.menu-item-label {
    color: var(--text-light);
    font-weight: 600
}

.menu-item-label {
    font-size: .8rem
}

.menu-item-arrow {
    color: var(--text-light);
    font-size: .75rem;
    opacity: .7
}

.personal-center-mobile-logout {
    margin: 0 .6875rem;
    background: linear-gradient(270deg, #272C47 0%, rgba(1, 17, 2, 0) 100%);
    border-radius: .3rem;
    padding: .625rem .75rem
}

.logout-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .5rem .375rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .2s ease
}

    .logout-button:hover {
        background: var(--border-light);
        border-radius: .3rem
    }

    .logout-button > div:first-child {
        display: flex;
        align-items: center;
        gap: .75rem
    }

.logout-icon {
    font-size: 1.125rem;
    color: var(--text-light);
    margin-right: .75rem
}

.logout-button span {
    color: var(--text-light);
    font-size: .9rem;
    font-weight: 600
}

.personal-center-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    animation: fadeIn .3s ease-out
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.personal-center-modal {
    background: #0a0e2a;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    position: relative;
    animation: slideInRight .3s ease-out
}

.personal-center-modal-header,
.personal-center-modal-header-profile {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: rgba(34, 43, 89, .63);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 5.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .625rem;
    z-index: 10
}

    .personal-center-modal-header-profile:after,
    .personal-center-modal-header:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: #0b1822
    }

.modal-title {
    font-size: 1.25rem;
    font-weight: 600
}

.modal-title,
.modal-title-profile {
    color: var(--text-light);
    flex: 1 1;
    text-align: center;
    margin: 0 .625rem
}

.modal-title-profile {
    font-size: 1.75rem;
    font-weight: 400
}

.modal-spacer {
    width: 1.5rem;
    height: 1.5rem
}

.personal-center-modal-content {
    padding: .625rem .625rem 2.5rem
}

.profile-modal-content {
    display: flex;
    flex-direction: column;
    gap: 1.1875rem;
    padding: 1.1875rem .625rem
}

.avatar-selector-section {
    width: 100%;
    margin: 0 auto;
    max-width: 22.1875rem
}

.avatar-selector-container {
    background: var(--bg-primary);
    border: 2.98px solid #a73ee7;
    border-radius: .3125rem;
    padding: 1.375rem .5rem .25rem;
    position: relative;
    height: 18.75rem;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.avatar-selector-circle {
    width: 17.5rem;
    height: 17.5rem
}

.avatar-center,
.avatar-selector-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.avatar-center {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #84828a;
    z-index: 2
}

.avatar-center-image {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.avatar-checkmark {
    position: absolute;
    top: -.3125rem;
    right: -.3125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: #01b7c5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3
}

    .avatar-checkmark i {
        font-size: .625rem;
        color: var(--text-light)
    }

.avatar-option {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid hsla(255, 3%, 53%, .4);
    cursor: pointer;
    transition: all .3s ease;
    background: #84828a
}

    .avatar-option img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .avatar-option.active,
    .avatar-option:hover {
        border-color: #84828a;
        transform: scale(1.1)
    }

.avatar-save-button {
    position: absolute;
    bottom: .25rem;
    right: 0;
    padding: .5rem 1.25rem;
    background: var(--primary-gradient);
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: .3125rem 0 .3125rem 0;
    cursor: pointer;
    box-shadow: 4px 38px 62px 0 rgba(0, 0, 0, .5), inset -3px -4px 7px 0 hsla(0, 0%, 100%, .15);
    transition: all .2s ease;
    z-index: 5
}

    .avatar-save-button:hover {
        transform: translateY(-.125rem);
        box-shadow: 6px 40px 64px 0 rgba(0, 0, 0, .6), inset -3px -4px 7px 0 hsla(0, 0%, 100%, .15)
    }

.mobile-avatar-card {
    background: radial-gradient(70% 70% at 0% 20%, rgba(0, 205, 24, 0.4) 0%, transparent 100%), radial-gradient(70% 70% at 100% 100%, rgba(0, 205, 24, 0.4) 0%, transparent 100%), #0F163B;
    border-radius: .5rem;
    padding: 1.5rem 1rem;
    min-height: 18.75rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.mobile-avatar-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center
}

.mobile-avatar-circle {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    border: 3px solid hsla(0, 0%, 100%, .25);
    overflow: hidden;
    background: #0a0e2a;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .45)
}

.mobile-avatar-circle-image {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mobile-avatar-customize-btn {
    min-width: 8rem
}

.mobile-avatar-customize {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.mobile-avatar-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem
}

.mobile-avatar-circle-lg {
    width: 9rem;
    height: 9rem;
    position: relative
}

.mobile-avatar-check {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #00c6ff;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    box-shadow: 0 .25rem .75rem rgba(0, 198, 255, .35)
}

.mobile-avatar-current-label {
    font-size: .85rem;
    color: hsla(0, 0%, 100%, .75)
}

.mobile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-gap: .75rem;
    gap: .75rem;
    padding-right: .25rem
}

    .mobile-avatar-grid::-webkit-scrollbar {
        width: .35rem
    }

    .mobile-avatar-grid::-webkit-scrollbar-thumb {
        background: hsla(0, 0%, 100%, .15);
        border-radius: 999px
    }

.mobile-avatar-grid-item {
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid hsla(0, 0%, 100%, .2);
    padding: 0;
    background: #050c1f;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    aspect-ratio: 1/1
}

    .mobile-avatar-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .5
    }

    .mobile-avatar-grid-item.active,
    .mobile-avatar-grid-item:focus-visible,
    .mobile-avatar-grid-item:hover {
        border-color: #01b7c5;
        box-shadow: 0 0 .75rem rgba(1, 183, 197, .35);
        transform: scale(1.05)
    }

        .mobile-avatar-grid-item.active img,
        .mobile-avatar-grid-item:focus-visible img,
        .mobile-avatar-grid-item:hover img {
            opacity: 1
        }

.mobile-avatar-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem
}

.profile-info-list {
    background: var(--bg-primary);
    border-radius: .3rem;
    padding: .5rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .3125rem;
    width: 100%;
    max-width: 22.1875rem;
    margin: 0 auto
}

.profile-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .375rem;
    min-height: 2.5rem;
    border-radius: .3rem;
    position: relative
}

    .profile-info-item.clickable {
        cursor: pointer;
        transition: background .2s ease
    }

        .profile-info-item.clickable:hover {
            background: var(--border-light)
        }

.profile-info-label,
.profile-info-value {
    color: var(--text-light);
    font-size: .8rem;
    font-weight: 600
}

.profile-info-value {
    margin-right: auto;
    margin-left: 1.25rem
}

.profile-info-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .7;
    font-size: .75rem;
    margin-left: .5rem
}

.customer-service-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    animation: fadeIn .3s ease-out
}

.customer-service-modal {
    background: #0a0e2a;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    position: relative;
    animation: slideInRight .3s ease-out
}

.customer-service-modal-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: rgba(34, 43, 89, .63);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 5.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .625rem;
    z-index: 10
}

    .customer-service-modal-header:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: #0b1822
    }

.customer-service-modal-content {
    padding: 1.25rem;
    min-height: calc(100vh - 5.375rem)
}

.profile-banner-mobile {
    padding: var(--spacing-md) var(--spacing-xs);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
}

.profile-banner-mobile-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm)
}

.profile-avatar-mobile {
    position: relative;
    flex-shrink: 0
}

.profile-avatar-mobile-ring {
    width: 76px;
    height: 76px;
    position: relative
}

    .profile-avatar-mobile-ring,
    .profile-avatar-mobile-ring:before {
        border-radius: 50%;
        background: linear-gradient(135deg, #01b7c5, #8e44ad);
        padding: 3px
    }

        .profile-avatar-mobile-ring:before {
            content: "";
            position: absolute;
            inset: 0;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude
        }

.profile-avatar-mobile-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #0f163b
}

.profile-info-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs)
}

.profile-vip-badge-mobile {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs)
}

.vip-icon-mobile {
    width: 32px;
    height: 32px;
    object-fit: contain
}

.vip-level-mobile {
    color: hsla(0, 0%, 100%, .9);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
    background: radial-gradient(circle at 30% 30%, #fff 0, hsla(0, 0%, 100%, 0) 69.792%, hsla(0, 0%, 100%, 0) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .7
}

.profile-name-mobile,
.vip-level-mobile {
    font-size: var(--font-size-base);
    font-weight: 600
}

.profile-name-mobile {
    color: #fff
}

.profile-balance-card-mobile {
    position: relative;
    background: linear-gradient(-51.3471deg, rgba(69, 242, 248, .2) .78811%, transparent 72.407%), linear-gradient(90deg, rgba(83, 23, 182, 0), rgba(83, 23, 182, 0));
    border-radius: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    overflow: hidden
}

.balance-card-decoration {
    position: absolute;
    top: var(--spacing-md);
    right: 0;
    width: 100px;
    height: 100px;
    object-fit: contain;
    opacity: .15;
    pointer-events: none
}

.balance-row-mobile {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 1
}

.balance-item-mobile {
    flex: 1 1
}

    .balance-item-mobile:first-child {
        padding-right: var(--spacing-lg)
    }

    .balance-item-mobile:last-child {
        padding-left: var(--spacing-lg);
        border-left: 1px solid hsla(0, 0%, 100%, .1)
    }

.balance-label-mobile {
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-xs)
}

.balance-amount-mobile {
    color: #efefff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs)
}

.balance-currency-mobile {
    color: #abbcd4
}

.refresh-button-mobile {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: var(--spacing-xs);
    color: #efefff;
    opacity: .7;
    transition: opacity .2s ease, transform .3s ease
}

    .refresh-button-mobile:hover {
        opacity: 1
    }

    .refresh-button-mobile:active {
        transform: rotate(180deg)
    }

    .refresh-button-mobile i {
        font-size: var(--font-size-xxs)
    }

.balance-actions-mobile {
    display: flex;
    gap: var(--spacing-sm);
    position: relative;
    z-index: 1
}

.deposit-btn-mobile,
.withdraw-btn-mobile {
    flex: 1 1;
    height: 34px;
    border-radius: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all .2s ease
}

.deposit-btn-mobile {
    background: radial-gradient(circle at 50% -50%, #c8a064 0, #dbc59e 42%, #e9d69b 84%, #fcf1d1 100%);
    color: #000;
    box-shadow: inset 0 -2px 0 0 #c3a656
}

    .deposit-btn-mobile:hover {
        transform: translateY(-2px);
        box-shadow: inset 0 -2px 0 0 #c3a656, 0 4px 8px rgba(0, 0, 0, .2)
    }

.withdraw-btn-mobile {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 -2px 0 0 #4f5b90;
    border: 1px solid rgba(79, 91, 144, .5)
}

    .withdraw-btn-mobile:hover {
        transform: translateY(-2px);
        background: rgba(79, 91, 144, .1);
        box-shadow: inset 0 -2px 0 0 #4f5b90, 0 4px 8px rgba(0, 0, 0, .2)
    }

.mobile-fluid-modal-dialog {
    max-width: 33.75rem
}

.mobile-fluid-modal-content {
    background: #272C47;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
    position: relative
}

.mobile-fluid-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background: var(--secondary-gradient);
    border: 1px solid var(--secondary);
    border-radius: .3rem;
    color: black;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    z-index: 10;
    padding: 0
}


    .mobile-fluid-modal-close i {
        font-size: .8rem
    }

.mobile-fluid-modal-body {
    padding: 2.5rem 2rem 2rem
}

    .mobile-fluid-modal-body form {
        width: 100%
    }

.mobile-fluid-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 2rem;
    text-align: center
}

.mobile-fluid-modal-dialog.modal-sm {
    max-width: 25rem
}

.mobile-fluid-modal-dialog.modal-md {
    max-width: 33.75rem
}

.mobile-fluid-modal-dialog.modal-lg {
    max-width: 50rem
}

@media (max-width:768px) {
    .mobile-fluid-modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem)
    }

    .mobile-fluid-modal-body {
        padding: 2rem 1.5rem 1.5rem
    }

    .mobile-fluid-modal-title {
        font-size: 1.25rem
    }

    .mobile-fluid-modal-close {
        top: .75rem;
        right: .75rem
    }
}

.mobile-fluid-modal-dialog-fullscreen {
    margin: 0;
    background: var(--bg-primary, var(--primary-purple));
    animation: slideInRight .3s ease-out
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

.mobile-fluid-modal-content-fullscreen {
    background: var(--blue-gradient);
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    border: none
}

.mobile-fluid-modal-header-mobile {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: rgba(34, 43, 89, .63);
    -webkit-backdrop-filter: blur(.625rem);
    backdrop-filter: blur(.625rem);
    height: 5.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
    flex-shrink: 0;
    border-bottom: 1px solid #0b1822
}

.mobile-fluid-modal-title-mobile {
    color: var(--text-light);
    font-size: 1.25rem;
    font-weight: 600;
    flex: 1 1;
    text-align: center;
    margin: 0
}

.mobile-fluid-modal-body-mobile {
    overflow-y: auto;
    flex: 1 1
}

    .mobile-fluid-modal-body-mobile form {
        max-width: 25rem;
        margin: 0 auto;
        width: 100%
    }

.form-input-group {
    margin-bottom: 1.25rem
}

.form-input-label {
    font-weight: 600;
    font-size: .8rem;
    color: var(--text-light);
    margin-bottom: .5rem
}

.form-input-wrapper {
    position: relative
}

.form-input {
    width: 100%;
    padding: .75rem 1rem;
    background: #FFFFFF1F;
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: .3rem;
    color: var(--text-light);
    font-size: .8rem;
    transition: all .3s ease;
    outline: none;
    color-scheme: dark
}

    .form-input::placeholder {
        color: hsla(0, 0%, 100%, .3)
    }

    .form-input:focus {
        border-color: var(--secondary);
        background: #272c47
    }

    .form-input:disabled {
        opacity: .5;
        cursor: not-allowed
    }

    .form-input::-webkit-calendar-picker-indicator {
        color: var(--text-light);
        filter: invert(1);
        opacity: .7;
        cursor: pointer
    }

        .form-input::-webkit-calendar-picker-indicator:hover {
            opacity: 1
        }

    .form-input[type=color]::-webkit-color-swatch-wrapper {
        padding: 0
    }

    .form-input[type=color]::-webkit-color-swatch {
        border: none;
        border-radius: .25rem
    }

.form-input-wrapper:has(.form-input-end-button) .form-input {
    padding-right: 5.5rem
}

.form-input-end-button {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%)
}

    .form-input-end-button button {
        padding: .375rem 1rem;
        font-size: .75rem
    }

.back-btn-wrapper {
    display: inline-flex;
    gap: .5rem;
    font-size: .8rem
}

.back-btn,
.back-btn-wrapper {
    align-items: center;
    color: var(--text-light)
}


.back-btn {
    display: flex;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: var(--secondary-gradient);
    border-radius: .3rem;
    cursor: pointer;
    transition: all .3s ease;
    color:black;
}


    .back-btn i {
        font-size: .8rem
    }

.navigation-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: var(--secondary-gradient);
    border: 1px solid var(--secondary);
    border-radius: var(--spacing-xs);
    color: var(--text-light);
    cursor: pointer;
    transition: all .3s ease
}

    .navigation-icon-button:hover {
        background: var(--secondary-gradient-hover);
        transform: scale(1.05);
        color: var(--text-light)
    }

    .navigation-icon-button i {
        font-size: var(--font-size-base);
        color: var(--text-light)
    }

    .navigation-icon-button.with-border {
        border: 1.548px solid var(--border-light);
        border-radius: 6.194px
    }

        .navigation-icon-button.with-border i {
            font-size: var(--font-size-sm)
        }

.team-cell {
    display: flex;
    align-items: center;
    gap: .5rem
}

.team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain
}

.team-name {
    color: var(--text-light);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium)
}

.result-badge {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase
}

    .result-badge.win {
        background: rgba(0, 220, 114, .1);
        color: var(--text-success)
    }

    .result-badge.loss {
        background: rgba(255, 76, 71, .1);
        color: var(--text-error)
    }

    .result-badge.draw {
        background: rgba(224, 230, 32, .1);
        color: var(--text-warning)
    }

.state-badge {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase
}

    .state-badge.win {
        color: var(--text-success)
    }

    .state-badge.lose {
        color: var(--text-error)
    }

.time-cell {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.time-date {
    color: var(--text-light);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap
}

.time-detail {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    white-space: nowrap
}

.status-badge {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase
}

    .status-badge.status-success {
        background: rgba(0, 220, 114, .1);
        color: var(--text-success)
    }

    .status-badge.status-pending {
        background: rgba(224, 230, 32, .1);
        color: var(--text-warning)
    }

    .status-badge.status-failed {
        background: rgba(255, 76, 71, .1);
        color: var(--text-error)
    }

.available-bonus-filters {
    background: var(--primary-purple);
    border-radius: var(--spacing-xs)
}

    .available-bonus-filters .dropdown-filter-wrapper,
    .available-bonus-filters .filter-dropdowns {
        position: relative
    }

    .available-bonus-filters .data-table-select {
        background: var(--primary-purple);
        border: 1px solid var(--border-light);
        border-radius: var(--spacing-xs);
        padding: var(--spacing-md) 2.5rem var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-sm);
        font-weight: 600;
        color: var(--text-light);
        min-width: 10rem;
        cursor: pointer;
        transition: all .2s ease;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none
    }

        .available-bonus-filters .data-table-select:hover {
            border-color: var(--secondary-gradient)
        }

        .available-bonus-filters .data-table-select:focus {
            border-color: var(--secondary-gradient);
            box-shadow: none;
            background: var(--primary-purple);
            color: var(--text-light);
            outline: none
        }

        .available-bonus-filters .data-table-select option {
            background: var(--primary-purple);
            color: var(--text-light);
            padding: var(--spacing-sm)
        }

    .available-bonus-filters .dropdown-filter-wrapper:after {
        content: "\f078";
        font-family: Font Awesome\ 5 Free;
        font-weight: 900;
        position: absolute;
        right: var(--spacing-lg);
        top: 50%;
        transform: translateY(-50%);
        color: #abbcd4;
        font-size: var(--font-size-xs);
        pointer-events: none;
        transition: color .2s ease
    }

    .available-bonus-filters .dropdown-filter-wrapper:hover:after {
        color: var(--text-light)
    }

.available-bonus-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bonus-item {
    background: transparent;
    border-radius: var(--spacing-xs);
    overflow: hidden
}

.bonus-item-header {
    background: linear-gradient(270deg, #272C47 0%, #011102 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: 12px;
    padding-right: 12px;
}

.bonus-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
}

.bonus-title {
    font-weight: 700
}

.bonus-date,
.bonus-title {
    color: var(--text-light);
    font-size: .75rem;
    line-height: normal
}

.bonus-date {
    font-weight: 300
}

.bonus-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-end
}

.bonus-amount {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .0175rem;
    text-align: right
}

.bonus-balance,
.bonus-state {
    color: var(--text-light);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase
}

.status-indicator {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    flex-shrink: 0
}

    .status-indicator.status-not-started {
        background: var(--text-light)
    }

    .status-indicator.status-progress {
        background: #f4c430
    }

    .status-indicator.status-completed {
        background: #36ba73
    }

@media (max-width:768px) {
    .available-bonus-filters .filter-dropdowns {
        width: 100%
    }

    .available-bonus-filters .dropdown-filter-wrapper {
        flex: 1 1;
        min-width: 0
    }

    .available-bonus-filters .data-table-select {
        width: 100%;
        min-width: auto
    }

    .available-bonus-tab-mobile {
        padding: 0
    }

        .available-bonus-tab-mobile .available-bonus-filters {
            padding: 0;
            background: transparent;
            margin-bottom: .75rem
        }

        .available-bonus-tab-mobile .filter-dropdowns {
            width: 100%;
            display: flex;
            gap: .5rem
        }

        .available-bonus-tab-mobile .dropdown-filter-wrapper {
            flex: 1 1;
            min-width: 0
        }

            .available-bonus-tab-mobile .dropdown-filter-wrapper:after {
                color: var(--text-light);
                font-size: .8rem
            }
}

.affiliate-container {
    padding: 1rem
}

@media (max-width:768px) {
    .affiliate-container {
        padding: .5rem;
        font-size: .8rem
    }

    .affiliate-tabs .tab-navigation {
        overflow-x: auto;
        gap: .5rem
    }

    .affiliate-tabs .tab-nav-button {
        font-size: .8rem;
        padding: .75rem 1.25rem;
        flex-shrink: 0
    }

    .affiliate-tabs .tab-nav-icon {
        display: none
    }
}

.affiliate-banner-gradient {
    background: linear-gradient(90deg, #0b622d 0%, #242b45 30%, #2b3242 70%, #344037 100%);
    border-radius: var(--spacing-lg);
    padding: var(--spacing-2xl);
    position: relative;
    min-height: 187px
}

.team-level-section {
    padding-right: var(--spacing-lg)
}

.team-level-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .05em
}

.team-level-icon-wrapper {
    margin-bottom: var(--spacing-xl)
}

.team-level-icon {
    width: 60px;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .3))
}

.progress-group {
    margin-bottom: var(--spacing-xl)
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm)
}

.progress-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase
}

    .progress-label,
    .progress-label i,
    .progress-value {
        font-size: var(--font-size-xs)
    }

.progress-value {
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase
}

.progress-bar-wrapper {
    width: 100%;
    height: 7px;
    background: #202125;
    border-radius: var(--spacing-xxs);
    overflow: hidden;
    position: relative
}

.progress-bar-fill {
    height: 100%;
    border-radius: var(--spacing-xxs);
    transition: width .3s ease
}

.gradient-fill {
    background: linear-gradient(90deg, #6ff238, #f8b218 50.5%, #ff4c47)
}

.vertical-divider {
    width: 1px;
    height: 129px;
    background: rgba(0, 0, 0, .18);
    margin: 0 var(--spacing-lg)
}

.commission-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-left: var(--spacing-lg)
}

.commission-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
    letter-spacing: .05em
}

.commission-tiers {
    display: flex;
    gap: var(--spacing-2xl);
    justify-content: space-between;
    flex-wrap: wrap
}

.commission-tier {
    flex-direction: column;
    gap: var(--spacing-sm)
}

.commission-tier,
.tier-icon {
    display: flex;
    align-items: center
}

.tier-icon {
    width: 54px;
    height: 54px;
    justify-content: center;
    margin-bottom: var(--spacing-sm)
}

    .tier-icon img {
        width: 100%;
        height: auto
    }

.tier-info {
    text-align: center
}

.tier-level {
    color: var(--text-light);
    margin-bottom: var(--spacing-xs)
}

.tier-level,
.tier-rate {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase
}

.tier-rate {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    justify-content: center
}

.rate-label {
    color: var(--text-light)
}

.rate-value {
    color: #e0e620
}

@media (max-width:768px) {
    .commission-section,
    .team-level-section {
        padding-left: 0;
        padding-right: 0
    }

    .team-level-icon-wrapper {
        margin-bottom: var(--spacing-lg)
    }

    .commission-title {
        font-size: var(--font-size-xs)
    }

    .team-level-section {
        margin-bottom: var(--spacing-2xl)
    }

    .affiliate-banner-gradient {
        padding: var(--spacing-xl)
    }

    .commission-tiers {
        gap: var(--spacing-lg)
    }

    .tier-icon {
        width: 40px;
        height: 40px
    }
}

.overview-tab {
    padding: 1rem 0
}

.overview-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5rem;
    gap: 1.5rem
}

.overview-card {
    background: linear-gradient(270deg, #272C47 0%, #011102 100%);
    border-radius: .4375rem;
    padding: 1.5rem;
    position: relative;
    min-height: 20.25rem
}

.social-share-card {
    position: relative;
    overflow: hidden
}

.input-copy-group {
    position: relative;
    margin-bottom: 1.5rem;
    z-index: 1
}

.input-label {
    font-weight: 600;
    color: #97a6b4;
    text-transform: capitalize
}

.input-copy-wrapper {
    background: rgba(32, 33, 37, .6);
    border-radius: .5rem;
    display: flex;
    align-items: center;
    gap: .2rem;
    overflow: hidden;
    height: 3rem
}

.input-value {
    flex: 1 1;
    padding: 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.btn-copy,
.input-value {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-light)
}

.btn-copy {
    color:black;
    background: var(--secondary-gradient);
    border: none;
    padding: 0 1.5rem;
    height: 100%;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease;
    border-radius: .5rem;
    border-radius: .5rem
}

    .btn-copy:hover {
        background: var(--secondary-gradient)
    }

.social-share-title {
    font-size: .9rem;
    font-weight: 600;
    color: #efefff;
    text-align: center;
    margin: 2rem 0 1rem;
    position: relative;
    z-index: 1
}

.social-icons {
    gap: 1rem;
    position: relative;
    z-index: 1
}

    .social-icons,
    .social-icons a {
        display: flex;
        justify-content: center
    }

        .social-icons a {
            align-items: center;
            transition: all .3s ease
        }

.social-icon-img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    transition: all .3s ease
}

.social-icons a:hover .social-icon-img {
    transform: translateY(-.125rem) scale(1.05);
    filter: brightness(1.1)
}

.reward-history-card {
    display: flex;
    flex-direction: column
}

.card-title {
    font-size: .90625rem;
    font-weight: 600;
    color: var(--text-light)
}

.empty-state {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0
}

.empty-icon {
    width: 5rem;
    height: auto;
    opacity: .4
}

.empty-text {
    color: #636f82;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0
}

.btn-view-all,
.empty-text {
    font-size: .78125rem;
    font-weight: 600
}

.btn-view-all {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: .3rem;
    padding: .75rem;
    color: var(--text-light);
    cursor: pointer;
    transition: background .3s ease;
    margin-top: auto
}

    .btn-view-all:hover {
        background: hsla(0, 0%, 100%, .05)
    }

.overview-faq {
    max-width: 100%
}

.section-title {
    color: var(--text-light);
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1.5rem
}

.faq-item {
    background: transparent;
    border: none;
    border-radius: .375rem !important;
    margin-bottom: .5rem;
    overflow: hidden
}

    .faq-item:last-child {
        margin-bottom: 0
    }

    .faq-item .accordion-button {
        background: var(--bg-medium-dark);
        color: var(--text-light);
        font-size: .75rem;
        font-weight: 400;
        padding: 1rem 1.25rem;
        border: none;
        box-shadow: none;
        transition: all .3s ease;
        border-radius: .3rem;
        position: relative;
        font-family: Gidugu, Noto Sans JP, sans-serif
    }

        .faq-item .accordion-button:not(.collapsed) {
            background: #2d3254;
            color: var(--text-light)
        }

        .faq-item .accordion-button:hover {
        }

        .faq-item .accordion-button:focus {
            box-shadow: none;
            border-color: transparent
        }

        .faq-item .accordion-button:after {
            display: none
        }

.faq-icon {
    position: absolute;
    right: 1.25rem;
    font-size: .75rem;
    color: #abbcd4;
    transition: transform .3s ease
}

.faq-item .accordion-button:not(.collapsed) .faq-icon {
    transform: rotate(90deg)
}

.faq-question {
    flex: 1 1;
    text-align: left;
    padding-right: 2rem
}

.faq-body {
    background: #1a1f3b;
    color: #abbcd4;
    padding: 1.5rem 1.25rem;
    font-size: .8rem;
    line-height: 1.6;
    border: none;
    border-top: 1px solid hsla(0, 0%, 100%, .05)
}

.faq-answer {
    margin: 0;
    color: #abbcd4
}

@media (max-width:768px) {
    .overview-cards-row {
        grid-template-columns: 1fr
    }

    .overview-card {
        min-height: auto
    }

    .overview-tab {
        padding: .5rem 0
    }

    .overview-card {
        padding: 1rem
    }

    .input-copy-wrapper {
        height: 3rem
    }

    .social-icons {
        flex-wrap: wrap
    }

    .social-icon-img {
        width: 2.5rem;
        height: 2.5rem
    }

    .section-title {
        font-size: 1.125rem
    }

    .faq-item .accordion-button {
        padding: .875rem 1rem;
        font-size: .6875rem
    }

    .faq-body {
        padding: 1rem;
        font-size: .8125rem
    }
}

.my-team-table .account-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.my-team-table .level-cell {
    font-size: .8rem
}

.my-team-table .amount-cell,
.my-team-table .type-cell {
    font-weight: 700
}

.my-team-table .time-cell {
    font-size: .625rem;
    font-weight: 500;
    line-height: .75rem
}

@media (max-width:768px) {
    .my-team-table .account-cell {
        max-width: 4rem
    }
}

.my-rewards-table .amount-cell {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-light)
}

.my-rewards-table .team-bet-cell {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--text-light)
}

.my-rewards-table .team-level-cell {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-light)
}

.my-rewards-table .state-cell {
    font-size: 1.25rem;
    font-weight: var(--fw-regular)
}

.reward-state {
    display: inline-block;
    text-transform: capitalize
}

    .reward-state.receive {
        color: var(--function-green)
    }

    .reward-state.expired {
        color: var(--function-red)
    }

.my-rewards-table .time-cell {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-light)
}

    .my-rewards-table .time-cell .time {
        line-height: 1.2
    }

        .my-rewards-table .time-cell .time br {
            display: block;
            content: "";
            margin-top: .125rem
        }

.data-table-filters {
    background: var(--primary-purple);
    border-radius: .3rem
}

    .data-table-filters .date-picker-wrapper {
        position: relative;
        display: inline-block;
        flex-shrink: 0
    }

    .data-table-filters .date-picker-input {
        padding: 0;
        min-width: 2.75rem;
        width: 2.75rem;
        height: 2.75rem;
        background: transparent;
        border: none;
        border-radius: .3rem;
        color: transparent;
        cursor: pointer;
        position: relative;
        font-size: 0;
        opacity: 0;
        z-index: 2
    }

        .data-table-filters .date-picker-input::-webkit-calendar-picker-indicator {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer
        }

        .data-table-filters .date-picker-input:hover {
            background: transparent
        }

        .data-table-filters .date-picker-input:focus {
            outline: none;
            box-shadow: none;
            background: transparent
        }

    .data-table-filters .calendar-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #abbcd4;
        pointer-events: none;
        font-size: var(--font-size-sm);
        background: var(--primary-purple);
        width: 2.75rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: .3rem;
        transition: background .3s ease, color .3s ease, transform .2s ease;
        z-index: 1
    }

    .data-table-filters .date-picker-wrapper:hover .calendar-icon {
        color: black;
        background: var(--secondary-gradient);
        transform: translate(-50%, -50%) translateY(-1px)
    }

.dropdown-filter-wrapper:after {
    content: "\f078";
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #abbcd4;
    font-size: .75rem;
    pointer-events: none;
    transition: color .3s ease, transform .2s ease
}

.dropdown-filter-wrapper:hover:after {
    color: var(--text-light);
    transform: translateY(-50%) rotate(180deg)
}

.data-table-card {
    background: transparent;
    border: none;
    border-radius: .25rem
}

    .data-table-card .card-body {
        padding: 1rem
    }

    .data-table-card .date-label {
        letter-spacing: .02em
    }

    .data-table-card .date-label,
    .data-table-card .date-value {
        color: var(--text-light);
        font-size: .75rem;
        font-weight: 700
    }

.data-table {
    width: 100%;
    margin-bottom: 0
}

    .data-table thead {
        background: var(--bg-medium-dark);
        border-radius: .3rem
    }

    .data-table .table-header-row {
        height: 3rem
    }

        .data-table .table-header-row th {
            background: #434A6D;
            color: #abbcd4;
            font-size: .8rem;
            font-weight: 600;
            padding: .5rem;
            vertical-align: middle;
            border: none
        }

            .data-table .table-header-row th:first-child {
                border-top-left-radius: .375rem;
                border-bottom-left-radius: .375rem
            }

            .data-table .table-header-row th:last-child {
                border-top-right-radius: .375rem;
                border-bottom-right-radius: .375rem
            }

    .data-table .table-data-row,
    .data-table tbody {
        background: transparent;
    }

    .data-table .table-data-row {
        height: 3rem;
        border-radius: .3rem;
        margin-bottom: .25rem
    }

        .data-table .table-data-row td {
            background: transparent;
            color: var(--text-light);
            font-size: .75rem;
            font-weight: 600;
            padding: 1rem .5rem;
            vertical-align: middle;
            border-right: 1px solid var(--border-light);
            height: 2rem
        }

            .data-table .table-data-row td:last-child {
                border-right: none
            }

.empty-state {
    padding: 2rem 1rem;
    text-align: center
}

    .empty-state .empty-text {
        color: #636f82;
        font-size: .8rem;
        font-weight: 600
    }

@media (max-width:768px) {
    .data-table-filters {
        padding: .5rem;
        background: transparent
    }

        .data-table-filters .date-picker-wrapper {
            flex-shrink: 0
        }

        .data-table-filters .date-picker-input {
            background: transparent;
            opacity: 0;
            z-index: 2
        }

            .data-table-filters .date-picker-input::-webkit-calendar-picker-indicator {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer
            }

        .data-table-filters .calendar-icon {
            background: #1C2333;
            z-index: 1
        }

    .filter-dropdowns .dropdown-filter-wrapper {
        flex: 1 1;
        min-width: 0
    }

    .data-table {
        font-size: .7rem
    }

        .data-table .table-data-row td,
        .data-table .table-header-row th {
            padding: .375rem .25rem;
            font-size: .7rem
        }

    .filtered-data-table-mobile .filter-dropdowns {
        display: flex;
        gap: .5rem;
        width: 100%
    }

        .filtered-data-table-mobile .filter-dropdowns .dropdown-filter-wrapper {
            flex: 1 1;
            min-width: 0
        }

    .filtered-data-table-mobile .dropdown-filter-wrapper:after {
        color: #636f82;
        font-size: .75rem;
        transition: color .3s ease, transform .2s ease
    }

    .filtered-data-table-mobile .dropdown-filter-wrapper:hover:after {
        color: var(--text-light);
        transform: translateY(-50%) rotate(180deg)
    }

    .filtered-data-table-mobile .card-body {
        padding: 0
    }

    .filtered-data-table-mobile .date-label,
    .filtered-data-table-mobile .date-value {
        font-size: .75rem
    }

    .data-table-mobile {
        font-size: .625rem
    }

        .data-table-mobile thead {
            background: var(--bg-medium-dark)
        }

        .data-table-mobile .table-header-row th {
            background: var(--bg-medium-dark);
            padding: .5rem .4rem;
            font-size: .8rem;
            font-weight: 600;
            height: 3rem
        }

        .data-table-mobile .table-data-row td {
            background: var(--bg-primary);
            padding: .5rem .4rem;
            font-size: .75rem;
            border-right: 1px solid hsla(0, 0%, 100%, .05);
            height: 3rem
        }

            .data-table-mobile .table-data-row td:last-child {
                border-right: none
            }

    .filtered-data-table-mobile .empty-state {
        padding: 3rem 1rem
    }
}

.vip-club-container {
    padding: var(--spacing-md)
}

.vip-section-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-xl);
    text-align: left
}

.vip-levels-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
}

    .vip-levels-scroll-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0
    }

.vip-levels-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(14.9375rem, 1fr));
    grid-gap: var(--spacing-md);
    gap: var(--spacing-md);
    grid-auto-rows: 1fr;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 100%
}

.vip-level-card {
    background: var(--bg-medium-dark);
    border-radius: var(--spacing-sm);
    padding: var(--spacing-md);
    position: relative;
    transition: all .3s ease;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    min-width: 14.9375rem;
    width: 14.9375rem
}

    .vip-level-card:hover {
        transform: translateY(-.125rem);
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .3)
    }

.vip-card-badge {
    width: 4.875rem;
    height: 2.875rem
}

.vip-card-badge-image {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.vip-card-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--text-light);
    text-align: left;
    margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-xs)
}

.vip-card-level {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600
}

.vip-card-turnover {
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    text-align: left;
    margin-bottom: var(--spacing-sm);
    color: var(--text-light)
}

    .vip-card-turnover span {
        background: var(--gold-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

.vip-benefits {
    flex-direction: column;
    margin-top: var(--spacing-md);
    flex: 1 1
}

.vip-benefit-item,
.vip-benefits {
    display: flex;
    gap: var(--spacing-sm)
}

.vip-benefit-item {
    background: var(--bg-primary);
    border-radius: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-sm);
    align-items: center;
    height: 4.125rem
}

.vip-benefit-icon {
    width: 2.875rem;
    height: 2.875rem;
    object-fit: contain;
    flex-shrink: 0
}

.vip-benefit-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1 1
}

.vip-benefit-label {
    font-size: var(--font-size-sm);
    line-height: normal
}

.vip-benefit-label,
.vip-benefit-value {
    font-weight: 600;
    color: var(--text-light);
    text-transform: capitalize
}

.vip-benefit-value {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight)
}

.vip-qa-section {
    margin-top: var(--spacing-3xl)
}

.vip-banner,
.vip-qa-section {
    margin-bottom: var(--spacing-2xl)
}

.vip-banner-gradient {
    background: linear-gradient(135deg, rgba(45, 37, 56, .94), rgba(102, 26, 64, .94));
    border-radius: var(--spacing-md);
    padding: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-2xl);
    align-items: flex-start;
    justify-content: space-between;
    min-height: 243px;
    box-shadow: 0 0 4px 0 rgba(23, 21, 27, .32), 0 4px 8px 0 rgba(142, 64, 108, .08);
    position: relative;
    overflow: hidden
}

    .vip-banner-gradient:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 602.579px;
        height: 107px;
        background-image: url(../images/vip-club/banner-background.webp);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 0 100%;
        pointer-events: none;
        z-index: 1
    }

.vip-current-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
    z-index: 2;
    flex: 0 0 auto
}

.vip-badge-level-group {
    width: 116px;
    height: 69px;
    position: relative
}

.vip-badge-image {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.vip-turnover-card {
    background: rgba(0, 0, 0, .2);
    border-radius: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    width: 280px;
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-md)
}

.vip-level-text {
    font-weight: 700;
    font-size: var(--font-size-lg);
    line-height: 1;
    background: radial-gradient(circle at 35% 80%, #c8a064 0, #dbc59e 42%, #e9d69b 84%, #fcf1d1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.vip-turnover-label {
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 17px;
    color: var(--text-light);
    margin: 0 0 var(--spacing-xs) 0
}

.vip-turnover-values {
    display: flex;
    align-items: center;
    margin-top: var(--spacing-md);
    gap: var(--spacing-xxs)
}

.vip-turnover-current {
    font-weight: 600;
    font-size: var(--font-size-xs);
    line-height: 1;
    background: radial-gradient(circle at 35% 80%, #c8a064 0, #dbc59e 42%, #e9d69b 84%, #fcf1d1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.vip-turnover-separator {
    font-size: var(--font-size-base);
    color: var(--text-light);
    line-height: 1
}

.vip-turnover-required {
    font-weight: 600;
    font-size: var(--font-size-xs);
    line-height: 1;
    color: var(--text-light)
}

.vip-progress-bar-wrapper {
    width: 100%;
    height: 6px;
    background: hsla(0, 0%, 85%, .2);
    border-radius: var(--spacing-xxs);
    overflow: hidden
}

.vip-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6ff238, #f8b218 50.5%, #ff4c47);
    border-radius: var(--spacing-xxs);
    transition: width .3s ease
}

.vip-graphic-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    height: 15rem
}

.vip-hero-graphic {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative
}

@media (max-width:768px) {
    .vip-banner-gradient {
        flex-direction: row;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
        min-height: auto;
        align-items: center;
        justify-content: space-between
    }

        .vip-banner-gradient:before {
            width: 100%;
            height: 107px
        }

    .vip-current-section {
        flex: 1 1;
        gap: var(--spacing-sm)
    }

    .vip-badge-level-group {
        width: 64px;
        height: 38px
    }

    .vip-turnover-card {
        width: 100%;
        max-width: 200px;
        padding: var(--spacing-sm) var(--spacing-md);
        margin-top: var(--spacing-xs)
    }

    .vip-turnover-label {
        font-size: var(--font-size-xs)
    }

    .vip-turnover-values {
        gap: var(--spacing-xxs)
    }

    .vip-turnover-current,
    .vip-turnover-required,
    .vip-turnover-separator {
        font-size: var(--font-size-xs)
    }

    .vip-progress-bar-wrapper {
        height: 4px;
        width: 70%
    }

    .vip-graphic-section {
        flex: 0 0 auto;
        width: 140px;
        height: 140px;
        justify-content: flex-end;
        position: relative;
        z-index: 1
    }

    .vip-hero-graphic {
        max-width: 140px;
        max-height: 140px;
        object-fit: contain
    }
}

.accordion {
    width: 100%
}

.accordion-item {
    background: #272C47;
    border: none;
    border-radius: .3rem;
    margin-bottom: .5rem;
    overflow: hidden
}

.accordion-button {
    background: var(--bg-medium-dark);
    color: var(--text-light);
    font-family: var(--font-primary);
    font-size: .75rem;
    font-weight: 400;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: .3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    transition: all .3s ease;
    position: relative;
    box-shadow: none
}

    .accordion-button:hover {
    }

    .accordion-button:focus {
        outline: none;
        box-shadow: none;
        border-color: transparent
    }

    .accordion-button:not(.collapsed) {
        background: var(--bg-medium-dark);
        color: var(--text-light);
        box-shadow: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .accordion-button:after {
        display: none
    }

.accordion-question {
    flex: 1 1;
    text-align: left;
    padding-right: 2rem
}

.accordion-icon {
    position: absolute;
    right: 1.25rem;
    font-size: .75rem;
    color: #abbcd4;
    transition: transform .3s ease;
    flex-shrink: 0
}

.accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(90deg)
}

.accordion-collapse {
    border: none
}

.accordion-body {
    background: var(--bg-dark);
    color: #abbcd4;
    font-family: var(--font-primary);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.6;
    padding: 1.5rem 1.25rem;
    border: none;
    border-top: 1px solid hsla(0, 0%, 100%, .05);
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem
}

.accordion-answer {
    margin: 0;
    color: #abbcd4
}

@media (max-width:768px) {
    .accordion-button {
        font-size: .6875rem;
        padding: .875rem 1rem
    }

    .accordion-body {
        font-size: .8125rem;
        padding: 1rem
    }

    .accordion-icon {
        font-size: .6875rem;
        right: 1rem
    }

    .accordion-question {
        padding-right: 1.5rem
    }
}

.nav-button {
    background: var(--bg-tertiary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all .3s ease;
    color: var(--text-light);
    font-size: 10.3px;
    min-width: 30px;
    min-height: 26px
}

    .nav-button i {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .nav-button.active:not(:disabled),
    .nav-button:hover:not(:disabled) {
        background: var(--secondary-gradient);
        transform: translateY(-1px);
        box-shadow: var(--shadow-small)
    }

    .nav-button.disabled,
    .nav-button:disabled {
        opacity: .5;
        cursor: not-allowed;
        pointer-events: none;
        background: var(--bg-tertiary);
        transform: none
    }

    .nav-button:focus {
        outline: 2px solid rgba(1, 183, 197, .5);
        outline-offset: 2px
    }

    .nav-button:active:not(:disabled) {
        transform: translateY(0)
    }

.scrollable-section {
    margin-bottom: 1rem
}

.scrollable-section-content {
    position: relative
}

.scrollable-section-container {
    display: flex;
    gap: .625rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none
}

    .scrollable-section-container::-webkit-scrollbar {
        display: none;
        height: 0
    }

    .scrollable-section-container.multi-row {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        align-items: start
    }

        .scrollable-section-container.multi-row[style*=grid-template-columns] {
            grid-auto-flow: row;
            grid-auto-columns: auto
        }

    .scrollable-section-container > * {
        flex: 0 0 auto;
        width: var(--item-width, auto);
        min-width: var(--item-width, auto)
    }

    .scrollable-section-container.multi-row > * {
        flex: initial;
        width: 100%;
        min-width: 0
    }

.scrollable-section-pagination {
    position: relative;
    overflow: hidden;
    width: 100%
}

.scrollable-section-pages {
    display: flex;
    will-change: transform
}

    .scrollable-section-pages > div {
        flex-shrink: 0;
        box-sizing: border-box
    }

.scrollable-section-container.pagination-mode {
    width: 100%;
    box-sizing: border-box
}

    .scrollable-section-container.pagination-mode .esports-match-card-wrapper,
    .scrollable-section-container.pagination-mode .game-card-wrapper,
    .scrollable-section-container.pagination-mode .games-grid-item,
    .scrollable-section-container.pagination-mode .hot-carousel-item,
    .scrollable-section-container.pagination-mode .hot-promo-item {
        width: 100%;
        min-width: 0;
        box-sizing: border-box
    }

footer li,
footer li a {
    color: var(--text-muted);
    font-size: .9rem
}

    footer li a:hover {
        color: var(--text-light)
    }

.crypto-deposit-banner {
    background: var(--blue-gradient-radial);
    box-shadow: 0 0 .5rem rgba(8, 11, 16, .25);
    position: relative
}

.crypto-deposit-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2rem;
    height: 100%
}

.crypto-deposit-banner__title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    max-width: 20rem
}

.crypto-deposit-banner__crypto-list {
    display: flex;
    align-items: center;
    gap: 1.5rem
}

.crypto-deposit-banner__crypto-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    opacity: .6
}

.crypto-deposit-banner__crypto-icon {
    width: 1.86rem;
    height: 1.86rem;
    object-fit: contain
}

.crypto-deposit-banner__crypto-name {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap
}

@media (max-width:768px) {
    .crypto-deposit-banner__content {
        flex-direction: column;
        gap: .6rem;
        padding: .7rem .5rem
    }

    .crypto-deposit-banner__title {
        font-size: 1.2rem;
        text-align: center;
        max-width: 100%;
        line-height: 1.3;
        text-transform:uppercase;
        
    }

    .crypto-deposit-banner__crypto-list {
        order: 3
    }

    .crypto-deposit-banner__cta-button {
        order: 2
    }

    .crypto-deposit-banner__crypto-item {
        gap: .25rem
    }

    .crypto-deposit-banner__crypto-icon {
        width: 1.25rem;
        height: 1.25rem
    }

    .crypto-deposit-banner__crypto-name {
        font-size: .7rem
    }
}

.deposit-panel {
    overflow: hidden;
    color: var(--text-light);
    position: relative
}

.deposit-panel-mobile {
    border-radius: 0;
    min-height: 100vh
}

.deposit-back-navigation {
    position: relative;
    margin-bottom: 2rem;
    background: transparent
}

.deposit-panel-header {
    background: rgba(34, 43, 89, .63);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.deposit-header-pill {
    background: var(--bg-tertiary);
    border: 1.5px solid rgba(151, 165, 178, .2);
    border-radius: .375rem;
    padding: .5rem;
    color: var(--text-light);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.deposit-content-wrapper {
    display: flex;
    gap: 1.5rem;
}

.deposit-tab-toggle {
    gap: .25rem;
    min-width: 156px
}

.deposit-tab-content {
    flex: 1 1;
    min-width: 0
}

.deposit-toggle-button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: .625rem 1rem;
    border-radius: .375rem;
    cursor: pointer;
    transition: all .2s;
    text-align: left;
    white-space: nowrap
}

    .deposit-toggle-button.active {
        background: var(--secondary-gradient);
        color: var(--text-light)
    }

    .deposit-toggle-button:hover:not(.active) {
        background: hsla(0, 0%, 100%, .05)
    }

.deposit-crypto {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.deposit-select-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: .5rem;
    gap: .5rem
}

.deposit-dropdown-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0
}

.deposit-dropdown-inner {
    background: var(--bg-tertiary);
    border-radius: .375rem;
    padding: .625rem;
    position: relative
}

.deposit-dropdown-display {
    width: 100%
}

.deposit-dropdown-icon {
    flex-shrink: 0
}

.deposit-dropdown-label-text {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1;
    margin-bottom: .25rem
}

.deposit-dropdown-select {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: var(--font-size-sm);
    font-weight: 600;
    height: auto;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding: 0 1.5rem 0 0
}

    .deposit-dropdown-select:focus {
        outline: none;
        box-shadow: none;
        border: none;
        background-color: transparent
    }

    .deposit-dropdown-select option {
        background: var(--bg-tertiary);
        color: var(--text-light);
        padding: .5rem
    }

.deposit-select-card {
    background: var(--bg-tertiary);
    border-radius: .375rem;
    padding: .625rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    cursor: pointer;
    transition: background .2s
}

    .deposit-select-card:hover {
        background: var(--bg-medium-dark)
    }

.deposit-select-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 600;
    margin: 0
}

.deposit-wallet-row {
    display: flex;
    gap: .625rem;
    align-items: flex-start
}

.deposit-qr-card {
    background: var(--bg-dark);
    border-radius: .375rem;
    padding: .5rem;
    flex-shrink: 0
}

.deposit-qr {
    width: 8.2rem;
    height: 8.2rem;
    background: linear-gradient(135deg, #f4f4f4, #d0d0d0 50%, #a7a7a7);
    border-radius: .375rem
}

.deposit-wallet-card {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.deposit-wallet-address {
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: .75rem;
    border-radius: .375rem;
    word-break: break-all;
    line-height: 1.4;
    margin: 0
}

.deposit-copy-button {
    background: var(--secondary-gradient);
    color: var(--text-light);
    border: none;
    border-radius: .375rem;
    padding: .625rem 1rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background .2s
}

    .deposit-copy-button:hover {
        background: var(--secondary-gradient-hover)
    }

    .deposit-copy-button i {
        font-size: .875rem
    }

.deposit-info-card {
    background: var(--bg-tertiary);
    border-radius: .375rem;
    padding: .75rem;
    display: flex;
    gap: .5rem;
    align-items: flex-start
}

    .deposit-info-card i {
        color: var(--text-secondary);
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: .125rem
    }

    .deposit-info-card p {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 0
    }

.deposit-legal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.deposit-method-card {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.deposit-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: .5rem;
    gap: .5rem
}

.deposit-quick-button {
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    color: var(--text-light);
    border-radius: .375rem;
    padding: 1rem;
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    position: relative
}

    .deposit-quick-button.active,
    .deposit-quick-button:hover {
        background: var(--bg-medium-dark)
    }

    .deposit-quick-button.active {
        border-color: var(--primary)
    }

.deposit-amount-section {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.deposit-input-group {
    display: flex;
    flex-direction: column;
    gap: .625rem
}

    .deposit-input-group label {
        font-weight: 600
    }

    .deposit-input-group label,
    .deposit-range {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0
    }

.deposit-amount-wrapper {
    background: var(--bg-tertiary);
    border-radius: .375rem;
    padding: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

    .deposit-amount-wrapper input {
        flex: 1 1;
        background: transparent;
        border: none;
        color: var(--text-light);
        font-size: var(--font-size-base);
        font-weight: 700;
        outline: none
    }

        .deposit-amount-wrapper input::placeholder {
            color: var(--text-muted)
        }

        .deposit-amount-wrapper input::-webkit-inner-spin-button,
        .deposit-amount-wrapper input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

        .deposit-amount-wrapper input[type=number] {
            -webkit-appearance: textfield;
            appearance: textfield;
            -moz-appearance: textfield
        }

.deposit-bonus-tag {
    background: var(--bg-primary);
    border-radius: .3125rem;
    padding: .5625rem .5rem;
    font-size: var(--font-size-sm);
    color: var(--text-light);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .5rem
}

    .deposit-bonus-tag strong {
        background: var(--gold-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        text-transform: uppercase
    }

.deposit-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 0
}

    .deposit-total-row span {
        font-weight: 600
    }

    .deposit-total-row span,
    .deposit-total-row strong {
        font-size: var(--font-size-base);
        background: var(--gold-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

    .deposit-total-row strong {
        font-weight: 700
    }

.deposit-gradient-button {
    background: var(--secondary-gradient);
    border: none;
    border-radius: .3125rem;
    padding: .75rem 2rem;
    color: var(--text-light);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 0 0 rgba(38, 99, 100, .8);
    transition: all .2s;
    text-transform: uppercase
}

    .deposit-gradient-button:hover {
        background: var(--secondary-gradient-hover);
        transform: translateY(-1px);
        box-shadow: 0 3px 0 0 rgba(38, 99, 100, .8)
    }

    .deposit-gradient-button:active {
        transform: translateY(0);
        box-shadow: 0 1px 0 0 rgba(38, 99, 100, .8)
    }

@media (max-width:768px) {
    .deposit-content-wrapper {
        flex-direction: column;
    }

    .deposit-tab-toggle {
        width: auto
    }
}

.withdrawal-panel {
    overflow: hidden;
    color: var(--text-light);
    position: relative;
}

.withdrawal-panel-mobile {
    border-radius: 0;
    min-height: 100vh
}

.withdrawal-back-navigation {
    position: relative;
    margin-bottom: 2rem;
    background: transparent
}

.withdrawal-panel-header {
    background: rgba(34, 43, 89, .63);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.withdrawal-header-pill {
    background: var(--bg-tertiary);
    border: 1.5px solid rgba(151, 165, 178, .2);
    border-radius: .375rem;
    padding: .5rem;
    color: var(--text-light);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.withdrawal-content-wrapper {
    display: flex;
    gap: 1.5rem;
}

.withdrawal-tab-toggle {
    gap: .25rem;
    min-width: 156px
}

.withdrawal-tab-content {
    flex: 1 1;
    min-width: 0
}

.withdrawal-crypto,
.withdrawal-legal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.withdrawal-bank-section {
    width: 100%
}

.withdrawal-input-section {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.withdrawal-label {
    font-weight: 600;
    margin: 0
}

.withdrawal-input,
.withdrawal-label {
    font-size: var(--font-size-sm);
    color: var(--text-light)
}
.withdrawal-bank-section select {
    background: #FFFFFF1F !important;
}
.withdrawal-input {
    background: #FFFFFF1F;
    border: none;
    border-radius: .375rem;
    font-weight: 500;
    padding: .875rem .75rem;
    transition: background .2s
}

    .withdrawal-input::placeholder {
        color: var(--text-secondary);
        opacity: .6
    }

    .withdrawal-input:focus {
        outline: none;
        background: #FFFFFF1F;
    }

.withdrawal-amount-section {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.withdrawal-amount-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.withdrawal-balance {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500
}

    .withdrawal-balance .currency {
        font-weight: 600;
        color: var(--text-secondary)
    }

    .withdrawal-amount-input,
    .withdrawal-balance strong {
        color: var(--text-light);
        font-weight: 700
    }

.withdrawal-amount-input {
    background: var(--bg-tertiary);
    border: none;
    border-radius: .375rem;
    font-size: var(--font-size-sm);
    padding: .875rem .75rem;
    transition: background .2s
}

    .withdrawal-amount-input::placeholder {
        color: var(--text-secondary);
        opacity: .6
    }

    .withdrawal-amount-input:focus {
        outline: none;
        background: var(--bg-medium-dark)
    }

    .withdrawal-amount-input::-webkit-inner-spin-button,
    .withdrawal-amount-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .withdrawal-amount-input[type=number] {
        -moz-appearance: textfield;
        -webkit-appearance: textfield;
        appearance: textfield
    }

.withdrawal-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: .5rem;
    gap: .5rem
}

.withdrawal-quick-button {
    background: var(--bg-tertiary);
    border: none;
    border-radius: .375rem;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: .75rem .625rem;
    cursor: pointer;
    transition: all .2s;
    text-transform: uppercase
}

    .withdrawal-quick-button.active,
    .withdrawal-quick-button:hover {
        background: #FFFFFF1F;
    }

    .withdrawal-quick-button.active {
        color: var(--text-light)
    }

.withdrawal-min-amount {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
    text-align: right
}

    .withdrawal-min-amount .currency {
        font-weight: 600;
        color: var(--text-light)
    }

    .withdrawal-min-amount strong {
        color: var(--text-light);
        font-weight: 700
    }

.withdrawal-summary {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bg-tertiary)
}

.withdrawal-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary)
}

    .withdrawal-summary-row span {
        font-weight: 500
    }

    .withdrawal-summary-row strong {
        color: var(--text-light);
        font-weight: 600
    }

    .withdrawal-summary-row i {
        font-size: .75rem;
        opacity: .7
    }

.withdrawal-total {
    font-size: var(--font-size-md)
}

    .withdrawal-total .total-label {
        font-weight: 600
    }

    .withdrawal-total .total-label,
    .withdrawal-total .total-value {
        background: linear-gradient(135deg, #c8a064, #dbc59e 42%, #e9d69b 84%, #fcf1d1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

    .withdrawal-total .total-value {
        font-weight: 700;
        font-size: var(--font-size-lg)
    }

.withdrawal-info-card {
    background: var(--bg-tertiary);
    border-radius: .375rem;
    padding: .75rem;
    display: flex;
    gap: .5rem;
    align-items: flex-start
}

    .withdrawal-info-card i {
        color: var(--text-secondary);
        font-size: 1rem;
        flex-shrink: 0;
        margin-top: .125rem
    }

    .withdrawal-info-card p {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 0
    }

@media (max-width:768px) {
    .withdrawal-panel {
        border-radius: 0
    }

    .withdrawal-content-wrapper {
        flex-direction: column;
        gap: 1rem
    }

    .withdrawal-tab-toggle {
        display: flex;
        flex-direction: row;
        min-width: 100%;
        width: 100%;
        border-radius: .375rem;
        overflow: hidden
    }

    .withdrawal-tab-content {
        width: 100%
    }

    .withdrawal-quick-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: .375rem
    }

    .withdrawal-amount-header {
        align-items: flex-start;
        gap: .25rem
    }

    .withdrawal-summary {
        gap: .625rem
    }

    .withdrawal-summary-row {
        font-size: var(--font-size-xs)
    }

    .withdrawal-total {
        font-size: var(--font-size-sm)
    }

        .withdrawal-total .total-value {
            font-size: var(--font-size-md)
        }
}

@media (max-width:576px) {
    .withdrawal-content-wrapper {
    }

    .withdrawal-crypto,
    .withdrawal-legal {
        gap: 1rem
    }

    .withdrawal-amount-input,
    .withdrawal-input {
        padding: .75rem .625rem;
        font-size: var(--font-size-xs)
    }

    .withdrawal-label {
        font-size: var(--font-size-xs)
    }
}

.dropdown-select {
    background: var(--bg-tertiary);
    border-radius: .5rem;
    padding: .75rem 1rem;
    min-height: 4.25rem;
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .08);
    transition: box-shadow .2s ease
}

    .dropdown-select:focus-within {
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .25), 0 0 0 2px hsla(0, 0%, 100%, .05)
    }

    .dropdown-select .dropdown-select-native {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none
    }

.dropdown-select-visual {
    pointer-events: none;
    z-index: 1;
    width: 100%
}

.dropdown-select-content {
    display: flex;
    align-items: center;
    gap: .5rem
}

.dropdown-select-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 600;
    line-height: 1.2
}

.dropdown-select-value {
    font-size: var(--font-size-md);
    color: var(--text-light);
    font-weight: 600;
    line-height: 1.2
}

.dropdown-select-chevron {
    font-size: .875rem;
    color: var(--text-secondary);
    transition: color .2s ease
}

.dropdown-select:focus-within .dropdown-select-chevron {
    color: var(--text-light)
}

@media (max-width:768px) {
    .dropdown-select-value {
        font-size: var(--font-size-sm)
    }
}
.sidebar-categories img {
    width: 24px;
    height: 24px;
    margin-left:-4px;
}
.sidebar-categories .sidebar-menu-label {
    margin-left: 1px;
}
.slick-dots
{
    bottom:5px !important;
  

}
.slick-dotted.slick-slider {
    margin-bottom: 0px !important;
}
.slick-dots li {
    width: 8px !important;
    height: 8px !important;
}
.slick-dots li button:before {
    opacity: 0.75;
}
    .slick-dots li button:before {
        font-size: 5px !important;
        line-height: 20px;
        color: white;
        width: 8px !important;
        height: 8px !important;
    }
.slick-active button:before {
    background-color: #1ccefb !important;
    color: #1ccefb !important;
}
.slick-dots li button:before {
    background-color: white;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    text-indent: -9999px;
    overflow: hidden;
}

@media screen and (min-width: 768px) {

    .is-mobile {
        display:none !important;
    }
}
@media screen and (max-width: 767px) {

    .is-desktop {
        display:none !important;
    }
    .main-content {
        min-height: calc(var(--app-height) - 144px) !important;
    }
}
.forgotLink {
    background: var(--secondary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

    .forgotLink::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background: var(--secondary-gradient);
    }
    .justify-content-space-between{
        justify-content:space-between;
    }
.datatables-bt {
    background: var(--secondary-gradient);
    border: none;
    color: black;
    margin-left:5px;
    width:70px;
    text-align:center;
    display:block;
}
.slot-nav:hover .inner-div {
    display: block !important;
}

.inner-div {
    position: fixed !important;
    width: 100% !important;
    padding-left: 5%;
    padding-right: 5%;
    text-align:center;
}

.slot-nav {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-left: 1.3vw;
    padding-right: 1.3vw;
}

    .slot-nav:hover div, .slot-nav:hover a {
        display: flex !important;
        background: linear-gradient(90deg, #00F243 0%, #E5FF0D 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-decoration:underline !important;
    }

.main-color {
    background: linear-gradient(90deg, #00F243 0%, #E5FF0D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mobile-fluid-modal-content input {
}

.sidenav-category-selection {
    border-radius: 6px;
    width: 100%;
    text-align:center;
    padding:10px 5px;
    display:block;
    color:white;
    text-decoration:none;
    cursor:pointer;
}
.top-series {
display:flex;
align-items:center;
gap:10px;
}
.background-responsive {
    flex: 1;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.game-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width:568px) {
    .game-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width:768px) {
    .game-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width:900px) {
    .game-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width:1200px) {
    .game-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }
}
.grid-4-cols {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.grid-2-cols {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.grid-3-cols {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

@media only screen and (min-width: 568px) {
    .grid-sm-5-cols {
        grid-template-columns: repeat(5,minmax(0,1fr));
    }
}

@media only screen and (min-width: 968px) {
    .grid-md-5-cols {
        grid-template-columns: repeat(5,minmax(0,1fr));
    }

    .grid-md-6-cols {
        grid-template-columns: repeat(6,minmax(0,1fr));
    }

    .grid-md-7-cols {
        grid-template-columns: repeat(7,minmax(0,1fr));
    }

    .grid-md-8-cols {
        grid-template-columns: repeat(8,minmax(0,1fr));
    }

    .grid-md-9-cols {
        grid-template-columns: repeat(9,minmax(0,1fr));
    }
}