:root{
    --bg:#070a12;
    --surface:#0e1421;
    --surface2:#141b2a;
    --line:#202a3d;
    --text:#f5f7ff;
    --muted:#8994aa;
    --accent:#7657ff;
    --accent-hover:#896fff;

    /* Theme compatibility variables */
    --theme-background:#070a12;
    --theme-card:#0e1421;
    --theme-text:#f5f7ff;
    --theme-muted:#8994aa;
}

*{
    box-sizing:border-box;
}

html{
    background:var(--bg);
}

body{
    margin:0;
    background:var(--theme-background);
    color:var(--theme-text);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:14px;
}

a{
    color:inherit;
    text-decoration:none;
}

.container{
    width:min(1200px,calc(100% - 32px));
    margin:auto;
}

/* HEADER */

.topbar{
    position:sticky;
    top:0;
    z-index:50;
    height:62px;
    background:rgba(7,10,18,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(18px);
}

.nav{
    height:62px;
    display:flex;
    align-items:center;
    gap:30px;
}

.brand{
    font-size:19px;
    font-weight:850;
    letter-spacing:-.045em;
}

.navlinks{
    display:flex;
    gap:22px;
    flex:1;
}

.navlinks a{
    color:var(--muted);
    font-size:13px;
}

.navlinks a:hover{
    color:#fff;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 15px;
    border-radius:9px;
    background:var(--theme-accent);
    color:#fff;
    font-weight:700;
}

.wallet{
    padding:9px 13px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--surface);
}

/* LOBBY */

.lobby{
    width:min(1200px,calc(100% - 32px));
    margin:auto;
    padding:32px 0 100px;
}

.lobby-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}

.eyebrow{
    color:#9585ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.13em;
    margin-bottom:7px;
}

.lobby-head h1{
    margin:0;
    font-size:42px;
    line-height:1;
    letter-spacing:-.055em;
}

.lobby-head p{
    margin:10px 0 0;
    color:var(--muted);
}

.game-count{
    min-width:80px;
    padding:12px 15px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    text-align:center;
}

.game-count strong{
    display:block;
    font-size:20px;
}

.game-count span{
    color:var(--muted);
    font-size:10px;
}

/* PROVIDERS */

.provider-area{
    margin-bottom:30px;
}

.provider-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.provider-title span{
    font-size:13px;
    font-weight:750;
}

.provider-title small{
    color:var(--muted);
    font-size:10px;
}

.provider-row{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:3px 1px 9px;
    scrollbar-width:none;
}

.provider-row::-webkit-scrollbar{
    display:none;
}

.provider{
    flex:0 0 auto;
    padding:9px 14px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--surface);
    color:#aeb7c9;
    font-size:12px;
    white-space:nowrap;
    transition:.18s;
}

.provider:hover{
    color:#fff;
    border-color:#35415b;
}

.provider.selected{
    color:#fff;
    border-color:rgba(118,87,255,.65);
    background:rgba(118,87,255,.15);
}

/* SECTION */

.games-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:13px;
}

.games-section-head h2{
    margin:0;
    font-size:19px;
}

.games-section-head span{
    color:var(--muted);
    font-size:11px;
}

/* GAME GRID */

.game-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
}

.game{
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:13px;
    transition:transform .18s,border-color .18s;
}

.game:hover{
    transform:translateY(-3px);
    border-color:#35415b;
}

.game-image{
    position:relative;
    display:block;
    aspect-ratio:1.55;
    overflow:hidden;
    background:var(--surface2);
}

.game-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s;
}

.game:hover .game-image img{
    transform:scale(1.04);
}

.image-placeholder{
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    color:#707b91;
    font-size:11px;
    font-weight:800;
}

.play-circle{
    position:absolute;
    right:9px;
    bottom:9px;
    display:flex;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--theme-accent);
    color:#fff;
    font-size:12px;
    box-shadow:0 7px 20px rgba(0,0,0,.35);
}

.game-info{
    padding:11px;
}

.game-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:750;
}

.game-provider{
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
}

.play-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    height:38px;
    margin-top:10px;
    border-radius:8px;
    background:var(--theme-accent);
    color:#fff;
    font-size:12px;
    font-weight:800;
}

.play-btn:hover{
    background:var(--accent-hover);
}

/* ERROR / EMPTY */

.lobby-error{
    padding:13px;
    margin-bottom:20px;
    border:1px solid #55303b;
    border-radius:10px;
    background:#24131a;
    color:#ffb7c4;
}

.empty-lobby{
    padding:70px 20px;
    text-align:center;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
}

.empty-icon{
    font-size:36px;
}

.empty-lobby h2{
    margin:12px 0 5px;
}

.empty-lobby p{
    margin:0;
    color:var(--muted);
}

/* BOTTOM */

.bottomnav{
    display:none;
}

.site-footer{
    padding:30px 0 70px;
    border-top:1px solid var(--line);
    color:var(--muted);
}

@media(max-width:1000px){

    .game-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

}

@media(max-width:760px){

    .container{
        width:calc(100% - 24px);
    }

    .topbar,
    .nav{
        height:58px;
    }

    .nav{
        gap:12px;
    }

    .brand{
        font-size:17px;
    }

    .navlinks{
        display:none;
    }

    .nav .btn{
        margin-left:auto;
        padding:8px 14px;
        font-size:12px;
    }

    .lobby{
        width:calc(100% - 24px);
        padding-top:24px;
        padding-bottom:90px;
    }

    .lobby-head{
        align-items:center;
        margin-bottom:23px;
    }

    .lobby-head h1{
        font-size:32px;
    }

    .lobby-head p{
        font-size:12px;
    }

    .game-count{
        min-width:64px;
        padding:9px 10px;
    }

    .provider-title small{
        display:none;
    }

    .provider{
        padding:8px 13px;
        border-radius:18px;
    }

    .game-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .game{
        border-radius:12px;
    }

    .game-image{
        aspect-ratio:1.48;
    }

    .play-circle{
        width:34px;
        height:34px;
        right:7px;
        bottom:7px;
        font-size:10px;
    }

    .game-info{
        padding:9px;
    }

    .game-name{
        font-size:12px;
    }

    .game-provider{
        font-size:9px;
    }

    .play-btn{
        height:44px;
        margin-top:8px;
        font-size:11px;
    }

    .bottomnav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:100;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        height:62px;
        background:#090d17;
        border-top:1px solid var(--line);
        padding-bottom:env(safe-area-inset-bottom);
    }

    .bottomnav a{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        color:var(--muted);
        font-size:10px;
    }

    .bottomnav a:first-child{
        color:#fff;
    }

    .bottomnav a br{
        display:none;
    }

    body{
        padding-bottom:65px;
    }
}

@media(max-width:430px){

    .lobby-head h1{
        font-size:29px;
    }

    .lobby-head p{
        font-size:11px;
    }

    .game-count strong{
        font-size:17px;
    }

    .game-grid{
        gap:8px;
    }

    .game-image{
        aspect-ratio:1.45;
    }
}

/* =========================================================
   NEXUS PLAY — GLOBAL UI 2
   ========================================================= */

.brand{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:max-content;
}

.brand-mark{
    width:31px;
    height:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:linear-gradient(135deg,#8b5cff,#5b32e8);
    box-shadow:0 8px 22px rgba(118,87,255,.25);
}

.brand-mark svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-text strong{
    font-size:15px;
    letter-spacing:-.035em;
}

.brand-text small{
    margin-top:4px;
    color:#7f89a0;
    font-size:6px;
    letter-spacing:.14em;
    font-weight:700;
}

.header-login{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:72px;
    height:38px;
    padding:0 15px;
    border-radius:10px;
    background:linear-gradient(
        135deg,
        #8a63ff,
        #683cff
    );
    color:#fff;
    font-size:12px;
    font-weight:800;
    box-shadow:0 8px 24px rgba(118,87,255,.2);
}

.wallet{
    display:flex;
    align-items:center;
    gap:7px;
}

.wallet-icon{
    width:17px;
    height:17px;
    display:flex;
}

.wallet-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.mobile-menu{
    display:none;
    width:36px;
    height:44px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--surface);
    color:#fff;
}

.mobile-menu svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
}

/* PREMIUM BOTTOM NAV */

.bottomnav{
    align-items:stretch;
}

.bottomnav a{
    position:relative;
    gap:4px;
    transition:.18s;
}

.bottomnav .nav-icon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.bottomnav .nav-icon svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.bottomnav a span:last-child{
    font-size:9px;
    font-weight:600;
}

.bottomnav a:hover{
    color:#fff;
}

/* ACTIVE STYLE */
.bottomnav a:active{
    color:#9b7cff;
}

@media(max-width:760px){

    .topbar,
    .nav{
        height:60px;
    }

    .brand-mark{
        width:29px;
        height:29px;
    }

    .brand-text strong{
        font-size:14px;
    }

    .brand-text small{
        font-size:5px;
    }

    .mobile-menu{
        display:flex;
        align-items:center;
        justify-content:center;
        margin-left:2px;
    }

    .header-login{
        min-width:68px;
        height:44px;
        padding:0 13px;
        font-size:11px;
    }

    .bottomnav{
        height:66px;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .bottomnav .nav-icon{
        width:21px;
        height:21px;
    }

    .bottomnav .nav-icon svg{
        width:20px;
        height:20px;
    }

    .bottomnav a span:last-child{
        font-size:9px;
    }
}


/* =========================================================
   NEXUS PLAY — LIVE CASINO QUALITY PASS
   ========================================================= */

:root{
    --np-bg:#060911;
    --np-surface:#0c1220;
    --np-surface-2:#101827;
    --np-border:#1b2639;
    --np-text:#f4f6ff;
    --np-muted:#8994aa;
    --np-purple:#7652ff;
    --np-purple-2:#6238f5;
}

/* LOBBY */

.lobby{
    max-width:1240px;
    margin:0 auto;
    padding:30px 20px 100px;
}

.lobby-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin:12px 0 34px;
}

.lobby-head .eyebrow{
    margin-bottom:8px;
    color:#947cff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
}

.lobby-head h1{
    margin:0;
    color:var(--np-text);
    font-size:42px;
    line-height:1.05;
    letter-spacing:-.045em;
}

.lobby-head p{
    margin:12px 0 0;
    color:var(--np-muted);
    font-size:15px;
}

/* GAME COUNT */

.game-count{
    min-width:108px;
    padding:16px 18px;
    border:1px solid var(--np-border);
    border-radius:17px;
    background:
        linear-gradient(
            145deg,
            rgba(20,28,45,.96),
            rgba(10,15,26,.96)
        );
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.game-count strong{
    display:block;
    color:#fff;
    font-size:29px;
    line-height:1;
    letter-spacing:-.04em;
}

.game-count span{
    display:block;
    margin-top:6px;
    color:#7f8aa0;
    font-size:11px;
    font-weight:600;
}

/* PROVIDERS */

.provider-area{
    margin-bottom:35px;
}

.provider-title{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:15px;
    margin-bottom:12px;
}

.provider-title span{
    color:#f0f2fa;
    font-size:17px;
    font-weight:800;
    letter-spacing:-.02em;
}

.provider-title small{
    color:#69758c;
    font-size:10px;
}

.provider-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:2px 1px 7px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.provider-row::-webkit-scrollbar{
    display:none;
}

.provider{
    flex:0 0 auto;
    min-height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border:1px solid #1c273a;
    border-radius:13px;
    background:#0d1422;
    color:#a6afc1;
    font-size:13px;
    font-weight:650;
    white-space:nowrap;
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.provider:hover{
    transform:translateY(-1px);
    border-color:#34415a;
    color:#fff;
}

.provider.selected{
    color:#fff;
    border-color:rgba(126,88,255,.72);
    background:
        linear-gradient(
            135deg,
            rgba(118,82,255,.24),
            rgba(96,54,235,.10)
        );
    box-shadow:
        0 0 0 1px rgba(118,82,255,.12),
        0 8px 22px rgba(91,55,235,.12);
}

/* SECTION */

.games-section{
    margin-top:6px;
}

.games-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:16px;
}

.games-section-head h2{
    margin:0;
    color:#f2f4fb;
    font-size:27px;
    line-height:1.1;
    letter-spacing:-.035em;
}

.games-section-head span{
    display:block;
    margin-top:6px;
    color:#707c92;
    font-size:12px;
}

/* GAME GRID */

.game-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

/* CARD */

.game{
    min-width:0;
    overflow:hidden;
    border:1px solid #1a2537;
    border-radius:17px;
    background:
        linear-gradient(
            180deg,
            #101827 0%,
            #0c1320 100%
        );
    box-shadow:
        0 12px 30px rgba(0,0,0,.17);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.game:hover{
    transform:translateY(-2px);
    border-color:#293750;
    box-shadow:
        0 18px 36px rgba(0,0,0,.24);
}

/* IMAGE */

.game-image{
    position:relative;
    display:block;
    overflow:hidden;
    aspect-ratio:1.55;
    background:#0a0f1a;
}

.game-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .35s ease;
}

.game:hover .game-image img{
    transform:scale(1.025);
}

.game-image::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 58%,
            rgba(0,0,0,.18)
        );
}

/* PLAY CIRCLE */

.play-circle{
    position:absolute;
    right:13px;
    bottom:13px;
    z-index:2;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:2px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    background:linear-gradient(
        135deg,
        #8a64ff,
        #643af0
    );
    color:#fff;
    font-size:14px;
    box-shadow:
        0 8px 22px rgba(67,35,185,.42);
}

/* GAME INFO */

.game-info{
    padding:14px 14px 15px;
}

.game-name{
    height:38px;
    display:-webkit-box;
    overflow:hidden;
    color:#f2f4fa;
    font-size:14px;
    line-height:19px;
    font-weight:800;
    letter-spacing:-.01em;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.game-provider{
    height:18px;
    margin-top:3px;
    overflow:hidden;
    color:#78849a;
    font-size:10px;
    line-height:18px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* PLAY BUTTON */

.play-btn{
    width:100%;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:11px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
    background:
        linear-gradient(
            135deg,
            #805cff,
            #673cf0
        );
    color:#fff;
    font-size:12px;
    font-weight:850;
    letter-spacing:.02em;
    box-shadow:
        0 8px 20px rgba(92,55,225,.20);
    transition:
        transform .18s ease,
        filter .18s ease;
}

.play-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
}

/* ERROR */

.lobby-error{
    margin:15px 0;
    padding:13px 15px;
    border:1px solid rgba(255,92,117,.22);
    border-radius:12px;
    background:rgba(255,92,117,.07);
    color:#ff9bab;
}

/* EMPTY */

.empty-lobby{
    padding:55px 20px;
    border:1px dashed #263249;
    border-radius:17px;
    text-align:center;
    background:#0b111d;
}

.empty-lobby .empty-icon{
    margin-bottom:10px;
    font-size:30px;
}

.empty-lobby h2{
    margin:0;
    color:#fff;
}

.empty-lobby p{
    color:#7b879c;
}

/* MOBILE */

@media(max-width:760px){

    .lobby{
        padding:25px 20px 96px;
    }

    .lobby-head{
        align-items:center;
        margin-bottom:29px;
    }

    .lobby-head h1{
        font-size:36px;
    }

    .lobby-head p{
        margin-top:9px;
        font-size:13px;
    }

    .game-count{
        min-width:108px;
        padding:15px 14px;
    }

    .game-count strong{
        font-size:27px;
    }

    .provider-title small{
        display:none;
    }

    .games-section-head h2{
        font-size:25px;
    }

    .game-grid{
        gap:12px;
    }

    .game{
        border-radius:16px;
    }

    .game-image{
        aspect-ratio:1.48;
    }

    .play-circle{
        width:44px;
        height:44px;
        right:10px;
        bottom:10px;
    }

    .game-info{
        padding:12px;
    }

    .game-name{
        height:38px;
        font-size:13px;
        line-height:19px;
    }

    .game-provider{
        font-size:10px;
    }

    .play-btn{
        height:43px;
        margin-top:10px;
        border-radius:10px;
    }
}

@media(max-width:430px){

    .lobby{
        padding-left:14px;
        padding-right:14px;
    }

    .lobby-head{
        gap:12px;
    }

    .lobby-head h1{
        font-size:32px;
    }

    .lobby-head p{
        font-size:12px;
    }

    .game-count{
        min-width:92px;
        padding:13px 10px;
        border-radius:15px;
    }

    .game-count strong{
        font-size:24px;
    }

    .game-grid{
        gap:9px;
    }

    .game-image{
        aspect-ratio:1.43;
    }

    .game-info{
        padding:10px;
    }

    .game-name{
        font-size:12px;
        line-height:17px;
        height:34px;
    }

    .game-provider{
        height:16px;
        line-height:16px;
        font-size:9px;
    }

    .play-btn{
        height:44px;
        margin-top:8px;
        font-size:11px;
    }

    .play-circle{
        width:40px;
        height:44px;
        right:8px;
        bottom:8px;
        font-size:12px;
    }

    .provider{
        min-height:44px;
        padding:0 15px;
        font-size:12px;
    }
}


/* =========================================================
   NEXUS PLAY — FINAL PREMIUM FINISH
   ========================================================= */

.lobby{
    position:relative;
}

.lobby-head{
    position:relative;
}

.lobby-head::before{
    content:"";
    position:absolute;
    width:260px;
    height:180px;
    left:-80px;
    top:-70px;
    background:radial-gradient(
        circle,
        rgba(113,73,255,.13),
        transparent 70%
    );
    pointer-events:none;
}

.game-count{
    position:relative;
    overflow:hidden;
}

.game-count::before{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    right:-30px;
    top:-35px;
    border-radius:50%;
    background:rgba(125,82,255,.12);
    filter:blur(5px);
}

/* Provider */

.provider.selected{
    position:relative;
    font-weight:800;
    transform:translateY(-1px);
}

.provider.selected::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:7px;
    height:7px;
    transform:translateX(-50%) rotate(45deg);
    border-radius:2px;
    background:#8b65ff;
    box-shadow:0 0 14px rgba(139,101,255,.9);
}

/* Game section header */

.games-section-head{
    align-items:center;
}

.games-section-head > div:first-child{
    min-width:0;
}

.games-section-head h2{
    display:flex;
    align-items:center;
    gap:8px;
}

.games-section-head h2::after{
    content:"✓";
    width:17px;
    height:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#7751ff;
    color:#fff;
    font-size:10px;
    font-weight:900;
}

/* Game card */

.game{
    position:relative;
}

.game-image{
    isolation:isolate;
}

.game-image::before{
    content:"POPULAR";
    position:absolute;
    z-index:3;
    left:10px;
    top:10px;
    padding:6px 9px;
    border-radius:8px;
    background:rgba(12,16,27,.82);
    border:1px solid rgba(255,255,255,.09);
    color:#fff;
    font-size:9px;
    font-weight:850;
    letter-spacing:.02em;
    backdrop-filter:blur(8px);
}

.game-image::after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 40%,
            rgba(0,0,0,.28) 100%
        );
}

/* LIVE badge */

.game-image .play-circle::before{
    content:"LIVE";
    position:absolute;
    right:48px;
    top:-72px;
    min-width:40px;
    padding:6px 8px;
    border-radius:7px;
    background:#7650f8;
    color:#fff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.03em;
    box-shadow:0 5px 15px rgba(88,47,220,.3);
}

/* Play circle */

.play-circle{
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.game:hover .play-circle{
    transform:scale(1.06);
    box-shadow:
        0 10px 28px rgba(91,48,225,.55);
}

/* Game info */

.game-info{
    position:relative;
}

.game-name{
    font-size:15px;
    font-weight:800;
}

.game-provider{
    color:#8995ab;
}

/* Favorite */

.game-info::after{
    content:"♡";
    position:absolute;
    right:14px;
    top:12px;
    color:#8995ab;
    font-size:27px;
    line-height:1;
    transition:.18s;
}

.game:hover .game-info::after{
    color:#b29cff;
}

/* Button */

.play-btn{
    height:47px;
    background:
        linear-gradient(
            135deg,
            #865cff 0%,
            #6a3bf0 100%
        );
    box-shadow:
        0 9px 24px rgba(91,53,220,.25);
}

.play-btn:hover{
    box-shadow:
        0 12px 28px rgba(91,53,220,.38);
}

/* Bottom navigation */

.bottomnav{
    background:
        linear-gradient(
            180deg,
            rgba(7,10,18,.92),
            rgba(5,8,15,.99)
        );
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.bottomnav a{
    position:relative;
}

.bottomnav a::before{
    content:"";
    position:absolute;
    top:4px;
    width:24px;
    height:3px;
    border-radius:99px;
    background:transparent;
}

.bottomnav a:active::before,
.bottomnav a:hover::before{
    background:#7c55ff;
    box-shadow:0 0 12px rgba(124,85,255,.8);
}

.bottomnav .nav-icon svg{
    transition:.18s ease;
}

.bottomnav a:hover .nav-icon svg{
    transform:translateY(-1px);
}

/* Mobile */

@media(max-width:760px){

    .lobby{
        padding-top:22px;
    }

    .lobby-head{
        margin-bottom:26px;
    }

    .games-section-head{
        margin-bottom:13px;
    }

    .games-section-head h2{
        font-size:24px;
    }

    .game-image .play-circle::before{
        right:42px;
        top:-65px;
    }

    .game-name{
        font-size:13px;
    }

    .game-info::after{
        right:10px;
        top:10px;
        font-size:23px;
    }

    .play-btn{
        height:43px;
    }
}

@media(max-width:430px){

    .lobby{
        padding-left:14px;
        padding-right:14px;
    }

    .lobby-head h1{
        font-size:31px;
    }

    .game-count{
        min-width:88px;
    }

    .game-count strong{
        font-size:23px;
    }

    .game-image::before{
        left:7px;
        top:7px;
        padding:5px 7px;
        font-size:8px;
    }

    .game-image .play-circle::before{
        right:38px;
        top:-58px;
        padding:5px 7px;
        font-size:8px;
    }

    .play-circle{
        width:39px;
        height:39px;
        right:7px;
        bottom:7px;
    }

    .game-info{
        padding:10px;
    }

    .game-name{
        padding-right:25px;
    }

    .game-info::after{
        right:8px;
        top:9px;
    }

    .play-btn{
        height:44px;
    }
}


/* =========================================================
   HEADER REFINEMENT — MATCH CURRENT UI.PHP
   ========================================================= */

.topbar{
    height:72px;
    background:rgba(5,8,16,.96);
    border-bottom:1px solid rgba(31,42,61,.8);
    box-shadow:0 4px 20px rgba(0,0,0,.12);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.topbar .container.nav{
    height:72px;
    min-height:72px;
    max-width:1240px;
    padding:0 20px;
    gap:14px;
}

/* LOGO */

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    margin-right:auto;
}

.brand-mark{
    width:38px;
    height:38px;
    min-width:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:linear-gradient(135deg,#8058ff,#6338ed);
    box-shadow:0 7px 20px rgba(100,58,235,.28);
}

.brand-mark svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.brand-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    line-height:1;
}

.brand-text strong{
    color:#f5f6ff;
    font-size:16px;
    line-height:17px;
    font-weight:900;
    letter-spacing:-.035em;
    white-space:nowrap;
}

.brand-text small{
    margin-top:4px;
    color:#737f96;
    font-size:6px;
    line-height:7px;
    font-weight:750;
    letter-spacing:.13em;
    white-space:nowrap;
}

/* DESKTOP NAV */

.navlinks{
    display:flex;
    align-items:center;
    gap:2px;
    margin-left:auto;
}

.navlinks a{
    padding:8px 10px;
    border-radius:9px;
    color:#7f8ba1;
    font-size:11px;
    font-weight:650;
}

.navlinks a:hover{
    color:#fff;
    background:#101725;
}

/* LOGIN */

.header-login{
    height:42px;
    min-width:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:11px;
    background:linear-gradient(135deg,#8058ff,#683cf0);
    color:#fff;
    font-size:12px;
    font-weight:850;
    box-shadow:0 8px 20px rgba(94,54,220,.24);
    transition:.18s ease;
}

.header-login:hover{
    transform:translateY(-1px);
    filter:brightness(1.06);
}

/* WALLET */

.wallet{
    height:42px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 12px;
    border:1px solid #202b40;
    border-radius:11px;
    background:var(--theme-card);
    color:#f1f4fc;
    font-size:11px;
    font-weight:800;
}

.wallet-icon{
    width:17px;
    height:17px;
}

.wallet-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* MENU */

.mobile-menu{
    width:42px;
    height:42px;
    min-width:42px;
    display:none;
    align-items:center;
    justify-content:center;
    padding:9px;
    border:1px solid #202b40;
    border-radius:11px;
    background:var(--theme-card);
    color:#e8ecf8;
}

.mobile-menu svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
}

/* TABLET / MOBILE */

@media(max-width:900px){

    .topbar{
        height:68px;
    }

    .topbar .container.nav{
        height:68px;
        min-height:68px;
        padding:0 18px;
        gap:9px;
    }

    .navlinks{
        display:none;
    }

    .mobile-menu{
        display:flex;
    }

    .brand{
        gap:9px;
    }

    .brand-mark{
        width:37px;
        height:37px;
        min-width:37px;
    }

    .brand-text strong{
        font-size:15px;
    }

    .header-login{
        height:44px;
        min-width:78px;
        padding:0 14px;
    }

}

/* SMALL PHONE */

@media(max-width:430px){

    .topbar{
        height:64px;
    }

    .topbar .container.nav{
        height:64px;
        min-height:64px;
        padding:0 13px;
        gap:7px;
    }

    .brand{
        gap:8px;
    }

    .brand-mark{
        width:34px;
        height:34px;
        min-width:34px;
        border-radius:9px;
    }

    .brand-mark svg{
        width:21px;
        height:21px;
    }

    .brand-text strong{
        font-size:14px;
        line-height:15px;
    }

    .brand-text small{
        margin-top:3px;
        font-size:5px;
        letter-spacing:.11em;
    }

    .header-login{
        height:38px;
        min-width:70px;
        padding:0 12px;
        border-radius:10px;
        font-size:11px;
    }

    .mobile-menu{
        width:38px;
        height:38px;
        min-width:38px;
        padding:8px;
        border-radius:10px;
    }

    .wallet{
        height:38px;
        padding:0 9px;
        font-size:10px;
    }

}


/* =========================================================
   NEXUS PLAY — HOME PREMIUM
   ========================================================= */

.home-page{
    max-width:1240px;
    margin:auto;
    padding:24px 20px 105px;
}

/* HERO */

.home-hero{
    position:relative;
    min-height:475px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    overflow:hidden;
    margin-bottom:48px;
    border:1px solid #1b2639;
    border-radius:25px;
    background:
        radial-gradient(
            circle at 72% 40%,
            rgba(115,75,255,.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #101827,
            #080d17
        );
    box-shadow:0 24px 60px rgba(0,0,0,.22);
}

.hero-content{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:55px;
}

.hero-eyebrow,
.section-eyebrow{
    color:#957cff;
    font-size:10px;
    font-weight:850;
    letter-spacing:.17em;
}

.hero-content h1{
    max-width:570px;
    margin:12px 0 17px;
    color:#f6f7ff;
    font-size:48px;
    line-height:1.03;
    letter-spacing:-.055em;
}

.hero-content h1 span{
    display:block;
    color:#9275ff;
}

.hero-content p{
    max-width:500px;
    margin:0;
    color:#8d98ad;
    font-size:15px;
    line-height:1.7;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:27px;
}

.hero-primary,
.hero-secondary{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    font-size:12px;
    font-weight:800;
}

.hero-primary{
    gap:16px;
    padding:0 18px;
    background:linear-gradient(135deg,#825aff,#6638ee);
    color:#fff;
    box-shadow:0 10px 28px rgba(92,52,222,.25);
}

.hero-primary b{
    font-size:17px;
}

.hero-secondary{
    padding:0 17px;
    border:1px solid #263249;
    background:#0d1421;
    color:#d9deea;
}

.hero-stats{
    display:flex;
    gap:28px;
    margin-top:38px;
}

.hero-stats div{
    display:flex;
    flex-direction:column;
}

.hero-stats strong{
    color:#fff;
    font-size:15px;
}

.hero-stats span{
    margin-top:4px;
    color:#69758b;
    font-size:9px;
}

/* HERO VISUAL */

.hero-visual{
    position:relative;
    min-height:475px;
    overflow:hidden;
}

.hero-glow{
    position:absolute;
    width:400px;
    height:400px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:rgba(112,71,255,.18);
    filter:blur(55px);
}

.hero-game-image{
    position:absolute;
    z-index:2;
    width:74%;
    height:72%;
    left:13%;
    top:14%;
    object-fit:cover;
    border-radius:21px;
    transform:rotate(3deg);
    box-shadow:0 30px 55px rgba(0,0,0,.45);
}

.hero-placeholder{
    position:absolute;
    z-index:2;
    inset:15%;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:#121b2c;
    color:#fff;
    font-weight:900;
}

.hero-orbit{
    position:absolute;
    border:1px solid rgba(135,104,255,.2);
    border-radius:50%;
}

.orbit-one{
    width:390px;
    height:390px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(25deg);
}

.orbit-two{
    width:500px;
    height:260px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-28deg);
}

.hero-floating-card{
    position:absolute;
    z-index:5;
    left:8%;
    bottom:8%;
    width:220px;
    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(10,15,26,.87);
    backdrop-filter:blur(15px);
    box-shadow:0 18px 35px rgba(0,0,0,.3);
}

.floating-label{
    display:block;
    color:#8d72ff;
    font-size:8px;
    font-weight:850;
    letter-spacing:.1em;
}

.hero-floating-card strong{
    display:block;
    margin-top:6px;
    overflow:hidden;
    color:#fff;
    font-size:13px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.hero-floating-card small{
    display:block;
    margin-top:4px;
    color:#78849a;
    font-size:9px;
}

/* SECTIONS */

.home-section{
    margin-bottom:48px;
}

.section-heading{
    margin-bottom:18px;
}

.section-heading-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.section-heading h2{
    margin:6px 0 5px;
    color:#f3f5fb;
    font-size:28px;
    letter-spacing:-.04em;
}

.section-heading p{
    margin:0;
    color:#707c92;
    font-size:12px;
}

.section-link{
    color:#9a81ff;
    font-size:11px;
    font-weight:750;
}

/* CATEGORY */

.category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
}

.category-card{
    min-height:105px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:14px;
    padding:18px;
    border:1px solid #1a2537;
    border-radius:16px;
    background:var(--theme-card);
    transition:.18s;
}

.category-card:hover{
    transform:translateY(-2px);
    border-color:#34415b;
}

.category-icon{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#171d32;
    color:#9277ff;
}

.category-icon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.category-card strong{
    display:block;
    color:#fff;
    font-size:14px;
}

.category-card span{
    display:block;
    margin-top:5px;
    color:#6f7b91;
    font-size:10px;
}

.category-card > b{
    color:#7d879b;
    font-size:18px;
}

/* GAME GRID */

.home-game-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:13px;
}

.home-game-card{
    overflow:hidden;
    border:1px solid #1a2537;
    border-radius:15px;
    background:#0d1421;
    transition:.2s;
}

.home-game-card:hover{
    transform:translateY(-2px);
    border-color:#2b3850;
}

.home-game-image{
    position:relative;
    display:block;
    aspect-ratio:1.42;
    overflow:hidden;
    background:#0a0f18;
}

.home-game-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:.3s;
}

.home-game-card:hover .home-game-image img{
    transform:scale(1.025);
}

.home-popular{
    position:absolute;
    left:8px;
    top:8px;
    padding:5px 7px;
    border-radius:6px;
    background:rgba(9,13,22,.82);
    color:#fff;
    font-size:7px;
    font-weight:850;
}

.home-play{
    position:absolute;
    right:9px;
    bottom:9px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:2px;
    border-radius:50%;
    background:linear-gradient(135deg,#865cff,#6638ef);
    color:#fff;
    font-size:11px;
    box-shadow:0 8px 20px rgba(75,40,190,.4);
}

.home-game-info{
    padding:10px;
}

.home-game-name{
    height:34px;
    display:-webkit-box;
    overflow:hidden;
    color:#f1f3f9;
    font-size:11px;
    line-height:17px;
    font-weight:800;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.home-game-provider{
    margin-top:3px;
    color:#707c91;
    font-size:8px;
}

.home-play-button{
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:8px;
    border-radius:9px;
    background:linear-gradient(135deg,#8058ff,#6738ee);
    color:#fff;
    font-size:9px;
    font-weight:850;
}

/* PROMO */

.home-promo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:28px 30px;
    border:1px solid #1b2639;
    border-radius:18px;
    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(116,76,255,.14),
            transparent 35%
        ),
        #0c1320;
}

.home-promo h2{
    margin:6px 0;
    color:#fff;
    font-size:24px;
    letter-spacing:-.035em;
}

.home-promo p{
    margin:0;
    color:#727e94;
    font-size:11px;
}

/* ERROR */

.home-error{
    margin-bottom:25px;
    padding:13px;
    border:1px solid rgba(255,92,117,.22);
    border-radius:11px;
    background:rgba(255,92,117,.07);
    color:#ff9aaa;
}

/* MOBILE */

@media(max-width:900px){

    .home-page{
        padding:20px 18px 100px;
    }

    .home-hero{
        min-height:440px;
        grid-template-columns:1fr;
    }

    .hero-content{
        padding:34px 30px 25px;
    }

    .hero-content h1{
        font-size:39px;
    }

    .hero-visual{
        min-height:280px;
    }

    .hero-game-image{
        width:52%;
        height:80%;
        left:24%;
        top:4%;
    }

    .hero-floating-card{
        left:6%;
        bottom:7%;
    }

    .home-game-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:600px){

    .home-page{
        padding:16px 14px 96px;
    }

    .home-hero{
        margin-bottom:38px;
        border-radius:20px;
    }

    .hero-content{
        padding:28px 21px 20px;
    }

    .hero-content h1{
        font-size:32px;
    }

    .hero-content p{
        font-size:12px;
        line-height:1.6;
    }

    .hero-actions{
        margin-top:21px;
    }

    .hero-primary,
    .hero-secondary{
        min-height:43px;
    }

    .hero-stats{
        gap:18px;
        margin-top:27px;
    }

    .hero-visual{
        min-height:250px;
    }

    .hero-game-image{
        width:58%;
        height:78%;
        left:21%;
    }

    .hero-floating-card{
        width:185px;
        padding:11px;
    }

    .category-grid{
        grid-template-columns:1fr;
    }

    .category-card{
        min-height:82px;
    }

    .section-heading h2{
        font-size:24px;
    }

    .home-game-grid{
        grid-template-columns:repeat(2,1fr);
        gap:9px;
    }

    .home-promo{
        flex-direction:column;
        align-items:flex-start;
        padding:23px;
    }

    .home-promo .hero-primary{
        width:100%;
    }
}


/* ===== SLOT SEARCH FINAL ===== */

.section-eyebrow{
    margin-bottom:5px;
    color:#9278ff;
    font-size:9px;
    font-weight:850;
    letter-spacing:.14em;
}

.games-section-head{
    gap:18px;
}

.games-section-head span b{
    color:#b6a5ff;
    font-weight:800;
}

.game-tools{
    display:flex;
    align-items:center;
    gap:8px;
}

.game-search{
    width:210px;
    height:42px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 12px;
    border:1px solid #202c41;
    border-radius:11px;
    background:var(--theme-card);
    transition:.18s ease;
}

.game-search:focus-within{
    border-color:#6949e3;
    box-shadow:0 0 0 3px rgba(105,73,227,.1);
}

.game-search svg{
    width:16px;
    height:16px;
    flex:0 0 16px;
    fill:none;
    stroke:#7f8ba0;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.game-search input{
    width:100%;
    min-width:0;
    height:100%;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
    color:#edf0f8;
    font-size:11px;
}

.game-search input::placeholder{
    color:#667289;
}

@media(max-width:600px){

    .games-section-head{
        flex-direction:column;
        align-items:flex-start;
        gap:13px;
    }

    .game-tools,
    .game-search{
        width:100%;
    }

    .game-search{
        height:43px;
    }
}


/* =========================================================
   NEXUS PLAY — AUTH PREMIUM
   ========================================================= */

.auth-page{
    position:relative;
    min-height:calc(100vh - 72px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:45px 20px 90px;
    overflow:hidden;
}

.auth-page::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:50%;
    top:40%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:rgba(105,66,240,.10);
    filter:blur(80px);
    pointer-events:none;
}

.auth-shell{
    position:relative;
    z-index:2;
    width:100%;
    max-width:430px;
    padding:32px;
    border:1px solid #1d293c;
    border-radius:22px;
    background:rgba(10,15,25,.94);
    box-shadow:
        0 28px 70px rgba(0,0,0,.30);
}

.auth-register-shell{
    max-width:560px;
}

.auth-brand{
    margin-bottom:30px;
}

.auth-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
}



.auth-logo strong{
    display:block;
    color:#f5f6ff;
    font-size:16px;
    font-weight:900;
}

.auth-logo small{
    display:block;
    margin-top:3px;
    color:#68758b;
    font-size:6px;
    font-weight:750;
    letter-spacing:.13em;
}

.auth-header{
    margin-bottom:23px;
}

.auth-eyebrow{
    color:#9277ff;
    font-size:9px;
    font-weight:850;
    letter-spacing:.16em;
}

.auth-header h1{
    margin:7px 0 6px;
    color:#f5f6fb;
    font-size:31px;
    letter-spacing:-.045em;
}

.auth-header p{
    margin:0;
    color:#78849a;
    font-size:12px;
    line-height:1.6;
}

.auth-error{
    margin-bottom:16px;
    padding:11px 13px;
    border:1px solid rgba(255,92,117,.25);
    border-radius:10px;
    background:rgba(255,92,117,.07);
    color:#ff9aaa;
    font-size:11px;
}

.auth-form{
    display:grid;
    gap:15px;
}

.auth-form label{
    display:grid;
    gap:7px;
}

.auth-form label > span{
    color:#aeb7c8;
    font-size:10px;
    font-weight:700;
}

.auth-form label em{
    color:#626f85;
    font-style:normal;
    font-weight:500;
}

.auth-form input,
.auth-form select{
    width:100%;
    height:47px;
    padding:0 13px;
    border:1px solid #202c40;
    border-radius:11px;
    outline:none;
    background:#0b121f;
    color:#edf0f8;
    font:inherit;
    font-size:12px;
    transition:.18s;
}

.auth-form input::placeholder{
    color:#5f6b81;
}

.auth-form input:focus,
.auth-form select:focus{
    border-color:#6949df;
    box-shadow:0 0 0 3px rgba(105,73,223,.10);
}

.password-field{
    position:relative;
}

.password-field input{
    padding-right:48px;
}

.password-toggle{
    position:absolute;
    right:5px;
    top:5px;
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#66738a;
    cursor:pointer;
}

.password-toggle svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.auth-submit{
    width:100%;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin-top:4px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#8058ff,#6538ed);
    color:#fff;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(91,51,215,.25);
    transition:.18s;
}

.auth-submit b{
    font-size:17px;
}

.auth-submit:hover{
    transform:translateY(-1px);
    filter:brightness(1.06);
}

.auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:22px 0 17px;
    color:#59667b;
    font-size:9px;
}

.auth-divider::before,
.auth-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:#1c2739;
}

.auth-register{
    display:flex;
    justify-content:center;
    gap:5px;
    color:#6e7a90;
    font-size:10px;
}

.auth-register a{
    color:#9a82ff;
    font-weight:800;
}

.auth-back{
    display:block;
    margin-top:19px;
    text-align:center;
    color:#68758a;
    font-size:10px;
}

.auth-back:hover{
    color:#fff;
}

.auth-section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:7px;
    padding-bottom:2px;
}

.auth-section-title span{
    color:#9278ff;
    font-size:9px;
    font-weight:850;
    letter-spacing:.13em;
}

.auth-section-title small{
    color:#59667b;
    font-size:8px;
}

.auth-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.payment-fields{
    display:none;
    gap:15px;
}

@media(max-width:600px){

    .auth-page{
        min-height:calc(100vh - 64px);
        padding:24px 14px 90px;
        align-items:flex-start;
    }

    .auth-shell{
        margin-top:12px;
        padding:25px 19px;
        border-radius:19px;
    }

    .auth-register-shell{
        max-width:100%;
    }

    .auth-row{
        grid-template-columns:1fr;
        gap:15px;
    }

    .auth-header h1{
        font-size:28px;
    }

    .auth-section-title{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }
}


/* =========================================================
   NEXUS PLAY — DASHBOARD PREMIUM
   ========================================================= */

.dashboard-page{
    max-width:1100px;
    margin:auto;
    padding:28px 20px 105px;
}

.dashboard-welcome{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.dashboard-eyebrow{
    color:#9278ff;
    font-size:9px;
    font-weight:850;
    letter-spacing:.15em;
}

.dashboard-welcome h1{
    margin:7px 0 5px;
    color:#f5f6fc;
    font-size:30px;
    letter-spacing:-.045em;
}

.dashboard-welcome p{
    margin:0;
    color:#707d93;
    font-size:12px;
}

.dashboard-profile{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 13px;
    border:1px solid #202c40;
    border-radius:11px;
    background:var(--theme-card);
    color:#aeb7c8;
    font-size:10px;
    font-weight:750;
}

.dashboard-profile svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* BALANCE */

.balance-card{
    position:relative;
    min-height:205px;
    overflow:hidden;
    padding:24px 25px;
    border:1px solid #293553;
    border-radius:21px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(128,85,255,.22),
            transparent 30%
        ),
        linear-gradient(135deg,#161d32,#0b111e);
    box-shadow:0 20px 50px rgba(0,0,0,.22);
}

.balance-glow{
    position:absolute;
    width:180px;
    height:180px;
    right:-50px;
    bottom:-80px;
    border-radius:50%;
    background:rgba(112,70,255,.15);
    filter:blur(35px);
}

.balance-top,
.balance-bottom{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.balance-top{
    color:#7e8ba1;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
}

.balance-status{
    padding:5px 8px;
    border-radius:20px;
    background:rgba(48,211,145,.08);
    color:#6edcae;
    font-size:8px;
    letter-spacing:0;
}

.balance-main{
    position:relative;
    z-index:2;
    margin:17px 0 25px;
}

.balance-main strong{
    color:#fff;
    font-size:37px;
    letter-spacing:-.045em;
}

.balance-bottom{
    border-top:1px solid rgba(255,255,255,.07);
    padding-top:16px;
}

.balance-bottom div:first-child{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.balance-bottom span{
    color:#707d93;
    font-size:9px;
}

.balance-bottom strong{
    color:#d9def0;
    font-size:12px;
}

.balance-wallet-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:rgba(127,86,255,.13);
    color:#967cff;
}

.balance-wallet-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* ACTIONS */

.dashboard-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:16px 0 38px;
}

.dashboard-action{
    min-height:78px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:15px;
    border:1px solid #1d293c;
    border-radius:15px;
    background:#0d1421;
    transition:.18s;
}

.dashboard-action:hover{
    transform:translateY(-2px);
    border-color:#33415c;
}

.dashboard-action.primary{
    border-color:rgba(123,82,255,.35);
    background:
        linear-gradient(
            135deg,
            rgba(119,79,255,.14),
            #0d1421
        );
}

.action-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#171e31;
    color:#9378ff;
}

.action-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dashboard-action strong{
    display:block;
    color:#eef1f8;
    font-size:12px;
}

.dashboard-action small{
    display:block;
    margin-top:4px;
    color:#68758b;
    font-size:9px;
}

.dashboard-action > b{
    color:#747f93;
    font-size:16px;
}


/* QUICK ACCESS */

.dashboard-section{
    margin-bottom:20px;
}

.dashboard-section-head{
    margin-bottom:15px;
}

.dashboard-section-head h2{
    margin:6px 0 0;
    color:#f0f2f8;
    font-size:23px;
    letter-spacing:-.035em;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:11px;
}

.dashboard-tile{
    position:relative;
    min-height:135px;
    padding:17px;
    border:1px solid #1b273a;
    border-radius:15px;
    background:var(--theme-card);
    transition:.18s;
}

.dashboard-tile:hover{
    transform:translateY(-2px);
    border-color:#303d56;
}

.tile-icon{
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:15px;
    border-radius:10px;
    background:#171e31;
    color:#8f75ff;
}

.tile-icon svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dashboard-tile strong{
    display:block;
    color:#eef1f8;
    font-size:11px;
}

.dashboard-tile span{
    display:block;
    margin-top:4px;
    color:#68758b;
    font-size:8px;
}

.dashboard-tile > b{
    position:absolute;
    right:15px;
    bottom:15px;
    color:#68758b;
}


/* INFO */

.dashboard-info{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
    padding:15px;
    border:1px solid #1a2638;
    border-radius:14px;
    background:#0b121e;
}

.dashboard-info-icon{
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#171e31;
    color:#8f75ff;
}

.dashboard-info-icon svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dashboard-info div{
    flex:1;
}

.dashboard-info strong{
    display:block;
    color:#e9edf6;
    font-size:10px;
}

.dashboard-info span{
    display:block;
    margin-top:3px;
    color:#657188;
    font-size:8px;
}

.dashboard-info > b{
    color:#dcdff0;
    font-size:11px;
}


/* MOBILE */

@media(max-width:700px){

    .dashboard-page{
        padding:20px 15px 95px;
    }

    .dashboard-welcome{
        align-items:flex-start;
    }

    .dashboard-welcome h1{
        font-size:25px;
    }

    .dashboard-profile{
        padding:9px;
    }

    .dashboard-profile span{
        display:none;
    }

    .balance-card{
        min-height:190px;
        padding:21px;
    }

    .balance-main strong{
        font-size:31px;
    }

    .dashboard-actions{
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-bottom:32px;
    }

    .dashboard-action{
        min-height:73px;
        padding:12px;
        gap:8px;
    }

    .action-icon{
        width:37px;
        height:37px;
    }

    .dashboard-grid{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .dashboard-tile{
        min-height:120px;
    }
}


/* =========================================================
   NEXUS PLAY — DEPOSIT / PAYMENT UI
   ========================================================= */

.payment-page{
    max-width:760px;
    margin:auto;
    padding:30px 20px 105px;
}

.payment-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.payment-eyebrow{
    color:#9278ff;
    font-size:9px;
    font-weight:850;
    letter-spacing:.15em;
}

.payment-head h1{
    margin:7px 0 5px;
    color:#f5f6fc;
    font-size:30px;
    letter-spacing:-.045em;
}

.payment-head p{
    margin:0;
    color:#707d93;
    font-size:12px;
}

.payment-balance{
    min-width:175px;
    padding:12px 14px;
    border:1px solid #202c40;
    border-radius:12px;
    background:var(--theme-card);
}

.payment-balance span{
    display:block;
    color:#68758b;
    font-size:8px;
    font-weight:800;
    letter-spacing:.1em;
}

.payment-balance strong{
    display:block;
    margin-top:5px;
    color:#e9ecf6;
    font-size:13px;
}

.payment-card{
    padding:24px;
    border:1px solid #1d293c;
    border-radius:20px;
    background:#0b121e;
    box-shadow:0 20px 55px rgba(0,0,0,.18);
}

.payment-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:23px;
}

.payment-label{
    color:#69768c;
    font-size:8px;
    font-weight:800;
    letter-spacing:.13em;
}

.payment-card-head h2{
    margin:6px 0 0;
    color:#eef1f8;
    font-size:20px;
    letter-spacing:-.025em;
}

.payment-icon{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#171e31;
    color:#9278ff;
}

.payment-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.payment-form{
    display:grid;
    gap:17px;
}

.payment-field{
    display:grid;
    gap:7px;
}

.payment-field > span{
    color:#aeb7c8;
    font-size:10px;
    font-weight:700;
}

.amount-input{
    height:58px;
    display:flex;
    align-items:center;
    border:1px solid #26334a;
    border-radius:13px;
    background:#0d1523;
    overflow:hidden;
}

.amount-input > span{
    padding-left:16px;
    color:#7c889d;
    font-size:12px;
    font-weight:800;
}

.amount-input input{
    width:100%;
    height:100%;
    padding:0 15px 0 8px;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:24px;
    font-weight:800;
}

.amount-input:focus-within{
    border-color:#704ee8;
    box-shadow:0 0 0 3px rgba(112,78,232,.1);
}

.payment-field select{
    width:100%;
    height:48px;
    padding:0 13px;
    border:1px solid #202c40;
    border-radius:11px;
    outline:none;
    background:#0d1523;
    color:#edf0f8;
    font-size:11px;
}

.payment-field select:focus{
    border-color:#704ee8;
}

.quick-amounts{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px;
    margin-top:-6px;
}

.quick-amounts button{
    height:44px;
    border:1px solid #202c40;
    border-radius:9px;
    background:#101827;
    color:#8995aa;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.quick-amounts button:hover,
.quick-amounts button.active{
    border-color:#7350ed;
    background:rgba(115,80,237,.12);
    color:#a48fff;
}

.method-info{
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px;
    border:1px solid #1b2739;
    border-radius:12px;
    background:#0e1624;
}

.method-info-icon{
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 35px;
    border-radius:9px;
    background:#171e31;
    color:#8f75ff;
}

.method-info-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.method-info strong{
    display:block;
    color:#e6eaf3;
    font-size:10px;
}

.method-info span{
    display:block;
    margin-top:3px;
    color:#68758b;
    font-size:8px;
    line-height:1.5;
}

.payment-submit{
    width:100%;
    height:49px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#8058ff,#6538ed);
    color:#fff;
    font-size:11px;
    font-weight:850;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(92,51,216,.22);
}

.payment-submit b{
    font-size:17px;
}

.payment-alert{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:15px;
    padding:13px 15px;
    border-radius:12px;
    font-size:9px;
}

.payment-alert strong{
    font-size:10px;
}

.payment-alert span{
    color:#8290a5;
}

.payment-alert.success{
    border:1px solid rgba(39,215,165,.25);
    background:rgba(39,215,165,.07);
    color:#71dfba;
}

.payment-alert.danger{
    border:1px solid rgba(255,92,117,.25);
    background:rgba(255,92,117,.07);
    color:#ff9aaa;
}

.payment-note{
    display:flex;
    gap:11px;
    margin-top:14px;
    padding:14px;
    border:1px solid #192536;
    border-radius:13px;
    background:#0a111c;
}

.payment-note-icon{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 24px;
    border:1px solid #35435c;
    border-radius:50%;
    color:#8995aa;
    font-size:10px;
    font-weight:800;
}

.payment-note strong{
    color:#aeb7c8;
    font-size:9px;
}

.payment-note p{
    margin:4px 0 0;
    color:#657188;
    font-size:8px;
    line-height:1.6;
}

.payment-note b{
    color:#8995aa;
}

@media(max-width:600px){

    .payment-page{
        padding:20px 15px 95px;
    }

    .payment-head{
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
    }

    .payment-head h1{
        font-size:27px;
    }

    .payment-balance{
        width:100%;
    }

    .payment-card{
        padding:19px;
        border-radius:17px;
    }

    .quick-amounts{
        grid-template-columns:repeat(3,1fr);
    }

    .amount-input input{
        font-size:22px;
    }
}


/* WITHDRAW DESTINATION */

.payment-destination{
    width:100%;
    height:48px;
    padding:0 13px;
    border:1px solid #202c40;
    border-radius:11px;
    outline:none;
    background:#0d1523;
    color:#edf0f8;
    font-size:11px;
    transition:.18s;
}

.payment-destination::placeholder{
    color:#5f6b81;
}

.payment-destination:focus{
    border-color:#704ee8;
    box-shadow:0 0 0 3px rgba(112,78,232,.10);
}


/* =========================================================
   NEXUS PLAY — PROFILE
   ========================================================= */

.profile-page{
    max-width:760px;
    margin:auto;
    padding:28px 20px 105px;
}

.profile-hero{
    display:flex;
    align-items:center;
    gap:15px;
    padding:22px;
    border:1px solid #1d293c;
    border-radius:19px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(122,80,255,.13),
            transparent 30%
        ),
        #0b121e;
}

.profile-avatar{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 58px;
    border-radius:17px;
    background:linear-gradient(135deg,#8058ff,#6338ed);
    color:#fff;
    font-size:22px;
    font-weight:900;
    box-shadow:0 10px 25px rgba(95,54,220,.25);
}

.profile-identity{
    flex:1;
    min-width:0;
}

.profile-eyebrow{
    color:#9278ff;
    font-size:8px;
    font-weight:850;
    letter-spacing:.15em;
}

.profile-identity h1{
    margin:5px 0 3px;
    overflow:hidden;
    color:#f3f5fb;
    font-size:22px;
    letter-spacing:-.035em;
    text-overflow:ellipsis;
}

.profile-identity span{
    color:#69768c;
    font-size:9px;
}

.profile-status{
    display:flex;
    align-items:center;
    gap:5px;
    padding:6px 9px;
    border:1px solid rgba(48,211,145,.15);
    border-radius:20px;
    background:rgba(48,211,145,.06);
    color:#71dcb0;
    font-size:8px;
    font-weight:750;
}

.profile-status i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#48d49b;
}


.profile-balance{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
    padding:19px 21px;
    border:1px solid #222f44;
    border-radius:16px;
    background:linear-gradient(135deg,#151d31,#0c1320);
}

.profile-balance span{
    display:block;
    color:#6e7b91;
    font-size:8px;
    font-weight:800;
    letter-spacing:.1em;
}

.profile-balance strong{
    display:block;
    margin-top:6px;
    color:#fff;
    font-size:25px;
    letter-spacing:-.04em;
}

.profile-wallet{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#171e31;
    color:#9278ff;
}

.profile-wallet svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}


.profile-section{
    margin-top:28px;
}

.profile-section-head{
    margin-bottom:12px;
}

.profile-section-head h2{
    margin:5px 0 0;
    color:#edf0f7;
    font-size:19px;
    letter-spacing:-.025em;
}

.profile-list{
    overflow:hidden;
    border:1px solid #1b2739;
    border-radius:15px;
    background:#0b121e;
}

.profile-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
}

.profile-item + .profile-item{
    border-top:1px solid #182436;
}

.profile-item-icon{
    width:36px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    border-radius:10px;
    background:#151d2e;
    color:#8e74ff;
}

.profile-item-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-item span{
    display:block;
    color:#657188;
    font-size:8px;
}

.profile-item strong{
    display:block;
    margin-top:3px;
    overflow:hidden;
    color:#dfe3ed;
    font-size:10px;
    text-overflow:ellipsis;
}


.profile-actions{
    display:grid;
    gap:8px;
    margin-top:18px;
}

.profile-action{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:11px;
    min-height:67px;
    padding:11px 14px;
    border:1px solid #1b2739;
    border-radius:13px;
    background:#0b121e;
    transition:.18s;
}

.profile-action:hover{
    transform:translateY(-1px);
    border-color:#303d56;
}

.profile-action.primary{
    border-color:rgba(123,82,255,.30);
    background:rgba(113,76,236,.07);
}

.profile-action-icon{
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#171e31;
    color:#8e74ff;
}

.profile-action-icon svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-action strong{
    display:block;
    color:#e9edf5;
    font-size:10px;
}

.profile-action small{
    display:block;
    margin-top:3px;
    color:#657188;
    font-size:8px;
}

.profile-action > b{
    color:#657188;
    font-size:15px;
}


.profile-logout{
    margin-top:15px;
}

.profile-logout form{
    margin:0;
}

.profile-logout button{
    width:100%;
    height:45px;
    border:1px solid rgba(255,92,117,.20);
    border-radius:11px;
    background:rgba(255,92,117,.05);
    color:#ef7f92;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}

.profile-logout button:hover{
    background:rgba(255,92,117,.09);
}


@media(max-width:600px){

    .profile-page{
        padding:20px 15px 95px;
    }

    .profile-hero{
        padding:17px;
    }

    .profile-avatar{
        width:51px;
        height:51px;
        flex-basis:51px;
        border-radius:15px;
        font-size:19px;
    }

    .profile-identity h1{
        font-size:19px;
    }

    .profile-status{
        align-self:flex-start;
    }

    .profile-balance{
        padding:17px;
    }

    .profile-balance strong{
        font-size:22px;
    }
}


/* =========================================================
   NEXUS PLAY — REFERRAL
   ========================================================= */

.referral-page{
    max-width:760px;
    margin:auto;
    padding:28px 20px 105px;
}

.referral-hero{
    display:flex;
    align-items:center;
    gap:15px;
    padding:22px;
    border:1px solid #1d293c;
    border-radius:19px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(122,80,255,.14),
            transparent 32%
        ),
        #0b121e;
}

.referral-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 52px;
    border-radius:15px;
    background:#171e31;
    color:#9278ff;
}

.referral-icon svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.referral-eyebrow{
    color:#9278ff;
    font-size:8px;
    font-weight:850;
    letter-spacing:.15em;
}

.referral-hero h1{
    margin:5px 0 4px;
    color:#f3f5fb;
    font-size:26px;
    letter-spacing:-.04em;
}

.referral-hero p{
    margin:0;
    color:#6e7b91;
    font-size:10px;
}


.referral-code-card{
    margin-top:14px;
    padding:21px;
    border:1px solid #293553;
    border-radius:18px;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(128,85,255,.18),
            transparent 30%
        ),
        linear-gradient(135deg,#151d31,#0b121e);
    box-shadow:0 18px 45px rgba(0,0,0,.18);
}

.referral-code-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.referral-code-head span{
    display:block;
    color:#707d93;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}

.referral-code-head strong{
    display:block;
    margin-top:7px;
    color:#fff;
    font-size:27px;
    letter-spacing:.08em;
}

.referral-code-icon{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#171e31;
    color:#9278ff;
}

.referral-code-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
}

.referral-copy{
    width:100%;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    border:1px solid #303d56;
    border-radius:11px;
    background:#101827;
    color:#a898ff;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.referral-copy:hover{
    border-color:#7553ec;
    background:#151d30;
}

.referral-copy b{
    font-size:14px;
}


.referral-share{
    margin-top:27px;
}

.referral-section-label{
    color:#9278ff;
    font-size:8px;
    font-weight:850;
    letter-spacing:.15em;
}

.referral-share h2{
    margin:6px 0 4px;
    color:#edf0f7;
    font-size:20px;
    letter-spacing:-.025em;
}

.referral-share p{
    margin:0;
    color:#68758b;
    font-size:9px;
    line-height:1.6;
}

.referral-share-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:15px;
}

.referral-share-button{
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid #202c40;
    border-radius:11px;
    background:#0d1523;
    color:#aeb7c8;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.referral-share-button.primary{
    border-color:rgba(123,82,255,.35);
    background:linear-gradient(135deg,#8058ff,#6538ed);
    color:#fff;
    box-shadow:0 9px 22px rgba(92,51,216,.18);
}

.referral-share-button span{
    font-size:15px;
}


.referral-info{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-top:14px;
    padding:14px;
    border:1px solid #192536;
    border-radius:13px;
    background:#0a111c;
}

.referral-info-icon{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 24px;
    border:1px solid #35435c;
    border-radius:50%;
    color:#8995aa;
    font-size:10px;
    font-weight:800;
}

.referral-info strong{
    color:#aeb7c8;
    font-size:9px;
}

.referral-info p{
    margin:4px 0 0;
    color:#657188;
    font-size:8px;
    line-height:1.6;
}


@media(max-width:600px){

    .referral-page{
        padding:20px 15px 95px;
    }

    .referral-hero{
        padding:17px;
    }

    .referral-hero h1{
        font-size:23px;
    }

    .referral-code-card{
        padding:18px;
    }

    .referral-code-head strong{
        font-size:23px;
    }

    .referral-share-buttons{
        grid-template-columns:1fr 1fr;
    }
}


/* =========================================================
   NEXUS PLAY — LIVE CHAT
   ========================================================= */

.chat-page{
    max-width:760px;
    margin:auto;
    padding:28px 20px 105px;
}

.chat-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px;
}

.chat-agent{
    display:flex;
    align-items:center;
    gap:12px;
}

.chat-avatar{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg,#8058ff,#6538ed);
    color:#fff;
    box-shadow:0 9px 22px rgba(92,51,216,.20);
}

.chat-avatar svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.chat-eyebrow{
    color:#9278ff;
    font-size:8px;
    font-weight:850;
    letter-spacing:.15em;
}

.chat-head h1{
    margin:4px 0 3px;
    color:#f2f4fa;
    font-size:22px;
    letter-spacing:-.035em;
}

.chat-online{
    display:flex;
    align-items:center;
    gap:5px;
    color:#69768c;
    font-size:8px;
}

.chat-online i,
.chat-status i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#48d49b;
}

.chat-status{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border:1px solid rgba(48,211,145,.15);
    border-radius:20px;
    background:rgba(48,211,145,.06);
    color:#71dcb0;
    font-size:8px;
    font-weight:750;
}


.chat-window{
    overflow:hidden;
    border:1px solid #1d293c;
    border-radius:18px;
    background:#0a111c;
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.chat-welcome{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:22px 20px;
    border-bottom:1px solid #182436;
    text-align:center;
}

.chat-welcome-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:9px;
    border-radius:11px;
    background:#171e31;
    color:#9278ff;
}

.chat-welcome-icon svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
}

.chat-welcome strong{
    color:#dfe4ee;
    font-size:10px;
}

.chat-welcome span{
    max-width:420px;
    margin-top:4px;
    color:#647187;
    font-size:8px;
    line-height:1.5;
}


.chat-messages{
    height:430px;
    overflow-y:auto;
    padding:20px 16px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(104,70,230,.035),
            transparent 45%
        );
}

.chat-messages::-webkit-scrollbar{
    width:4px;
}

.chat-messages::-webkit-scrollbar-thumb{
    border-radius:10px;
    background:#27334a;
}

.chat-message{
    display:flex;
    margin-bottom:11px;
}

.chat-message.from-admin{
    justify-content:flex-start;
}

.chat-message.from-user{
    justify-content:flex-end;
}

.chat-bubble{
    max-width:72%;
    padding:10px 12px;
    border-radius:13px;
}

.from-admin .chat-bubble{
    border:1px solid #1d293c;
    border-top-left-radius:4px;
    background:#111927;
}

.from-user .chat-bubble{
    border:1px solid rgba(123,82,255,.28);
    border-top-right-radius:4px;
    background:rgba(111,75,235,.13);
}

.chat-message-label{
    margin-bottom:4px;
    color:#77849a;
    font-size:7px;
    font-weight:800;
}

.from-user .chat-message-label{
    color:#9d8bff;
}

.chat-message-text{
    color:#dce1eb;
    font-size:10px;
    line-height:1.55;
    word-break:break-word;
}

.chat-empty{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#69768c;
    font-size:10px;
}

.chat-empty span{
    margin-top:5px;
    color:#4f5c72;
    font-size:8px;
}


.chat-form{
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:11px;
    border-top:1px solid #182436;
    background:#0c1421;
}

.chat-form textarea{
    flex:1;
    min-height:42px;
    max-height:120px;
    resize:none;
    padding:12px 13px;
    border:1px solid #202c40;
    border-radius:11px;
    outline:none;
    background:#101827;
    color:#edf0f8;
    font-family:inherit;
    font-size:10px;
    line-height:1.4;
}

.chat-form textarea::placeholder{
    color:#59667c;
}

.chat-form textarea:focus{
    border-color:#704ee8;
    box-shadow:0 0 0 3px rgba(112,78,232,.08);
}

.chat-form button{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg,#8058ff,#6538ed);
    color:#fff;
    font-size:19px;
    font-weight:800;
    cursor:pointer;
}

.chat-note{
    margin-top:10px;
    color:#515e74;
    text-align:center;
    font-size:7px;
}


@media(max-width:600px){

    .chat-page{
        padding:20px 15px 95px;
    }

    .chat-head h1{
        font-size:20px;
    }

    .chat-status{
        padding:6px 8px;
    }

    .chat-messages{
        height:calc(100vh - 390px);
        min-height:330px;
        max-height:500px;
    }

    .chat-bubble{
        max-width:82%;
    }

    .chat-welcome{
        padding:18px 15px;
    }

}


/* =========================================================
   NEXUS PLAY — AUTH FINISH
   ========================================================= */

.auth-page{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    padding:30px 16px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(113,76,235,.13),
            transparent 35%
        ),
        #070a12;
}

.auth-shell{
    position:relative;
    z-index:2;
    width:100%;
    max-width:440px;
    padding:30px;
    border:1px solid #1d293c;
    border-radius:22px;
    background:rgba(10,16,27,.96);
    box-shadow:
        0 30px 80px rgba(0,0,0,.38),
        0 0 70px rgba(92,51,216,.06);
}

.auth-register-shell{
    max-width:520px;
}

.auth-brand{
    display:flex;
    justify-content:center;
    margin-bottom:28px;
}

.auth-logo{
    display:flex;
    align-items:center;
    gap:10px;
}



.auth-logo strong{
    display:block;
    color:#f2f4fa;
    font-size:14px;
    font-weight:900;
    letter-spacing:.03em;
}

.auth-logo small{
    display:block;
    margin-top:2px;
    color:#626f84;
    font-size:7px;
    letter-spacing:.13em;
}

.auth-header{
    margin-bottom:22px;
    text-align:center;
}

.auth-eyebrow{
    color:#9278ff;
    font-size:8px;
    font-weight:850;
    letter-spacing:.16em;
}

.auth-header h1{
    margin:7px 0 6px;
    color:#f5f6fb;
    font-size:27px;
    letter-spacing:-.045em;
}

.auth-header p{
    margin:0;
    color:#69768c;
    font-size:10px;
    line-height:1.5;
}

.auth-form{
    display:grid;
    gap:14px;
}

.auth-form label{
    display:grid;
    gap:7px;
}

.auth-form label > span{
    color:#aeb7c8;
    font-size:9px;
    font-weight:700;
}

.auth-form label > span em{
    color:#5f6b81;
    font-style:normal;
    font-weight:500;
}

.auth-form input,
.auth-form select{
    width:100%;
    height:47px;
    padding:0 13px;
    border:1px solid #202c40;
    border-radius:11px;
    outline:none;
    background:#0d1523;
    color:#edf0f8;
    font-family:inherit;
    font-size:10px;
    transition:.18s;
}

.auth-form input::placeholder{
    color:#58657a;
}

.auth-form input:focus,
.auth-form select:focus{
    border-color:#704ee8;
    box-shadow:0 0 0 3px rgba(112,78,232,.09);
}

.password-field{
    position:relative;
}

.password-field input{
    padding-right:48px;
}

.password-toggle{
    position:absolute;
    right:6px;
    top:5px;
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#657188;
    cursor:pointer;
}

.password-toggle:hover{
    color:#a18cff;
    background:#151d2e;
}

.password-toggle svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.auth-submit{
    width:100%;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:4px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg,#8058ff,#6538ed);
    color:#fff;
    font-size:10px;
    font-weight:850;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(92,51,216,.22);
    transition:.18s;
}

.auth-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 13px 30px rgba(92,51,216,.28);
}

.auth-submit b{
    font-size:16px;
}

.auth-error{
    margin-bottom:14px;
    padding:11px 13px;
    border:1px solid rgba(255,92,117,.22);
    border-radius:10px;
    background:rgba(255,92,117,.06);
    color:#f08a9b;
    font-size:9px;
    line-height:1.5;
}

.auth-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:20px 0 14px;
    color:#4f5c71;
    font-size:8px;
}

.auth-divider::before,
.auth-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:#192537;
}

.auth-register{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#657188;
    font-size:9px;
}

.auth-register a{
    color:#9a84ff;
    font-weight:800;
}

.auth-register a:hover{
    color:#b0a0ff;
}

.auth-back{
    display:block;
    margin-top:19px;
    color:#56647a;
    text-align:center;
    font-size:8px;
}

.auth-back:hover{
    color:#8b98ac;
}


/* REGISTER */

.auth-section-title{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:7px 0 1px;
    padding-top:3px;
    border-top:1px solid #182436;
}

.auth-section-title span{
    color:#9278ff;
    font-size:8px;
    font-weight:850;
    letter-spacing:.14em;
}

.auth-section-title small{
    color:#5e6b80;
    font-size:8px;
}

.auth-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.payment-fields{
    display:none;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.auth-decoration{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.auth-decoration div:first-child{
    position:absolute;
    width:280px;
    height:280px;
    top:-170px;
    left:-100px;
    border-radius:50%;
    background:rgba(113,76,235,.07);
    filter:blur(50px);
}

.auth-decoration div:last-child{
    position:absolute;
    width:260px;
    height:260px;
    right:-100px;
    bottom:-150px;
    border-radius:50%;
    background:rgba(74,49,170,.07);
    filter:blur(50px);
}


@media(max-width:600px){

    .auth-page{
        align-items:flex-start;
        padding:20px 13px;
    }

    .auth-shell,
    .auth-register-shell{
        max-width:none;
        margin-top:5px;
        padding:23px 18px;
        border-radius:18px;
    }

    .auth-brand{
        margin-bottom:23px;
    }

    .auth-header h1{
        font-size:25px;
    }

    .auth-form{
        gap:12px;
    }

    .auth-row,
    .payment-fields{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   NEXUS PLAY — TRANSACTIONS
   ========================================================= */

.transactions-page{
    max-width:760px;
    margin:auto;
    padding:28px 20px 105px;
}

.transactions-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:17px;
}

.transactions-eyebrow{
    color:#9278ff;
    font-size:8px;
    font-weight:850;
    letter-spacing:.15em;
}

.transactions-head h1{
    margin:6px 0 4px;
    color:#f3f5fb;
    font-size:25px;
    letter-spacing:-.04em;
}

.transactions-head p{
    margin:0;
    color:#68758b;
    font-size:9px;
}

.transactions-wallet{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 45px;
    border:1px solid #293650;
    border-radius:13px;
    background:#111a2a;
    color:#9278ff;
}

.transactions-wallet svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}


.transaction-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    padding:4px;
    margin-bottom:12px;
    border:1px solid #1a2638;
    border-radius:12px;
    background:#0a111c;
}

.transaction-tabs a{
    display:flex;
    align-items:center;
    justify-content:center;
    height:34px;
    border-radius:8px;
    color:#657188;
    font-size:9px;
    font-weight:750;
}

.transaction-tabs a.active{
    background:#181f32;
    color:#a797ff;
    box-shadow:0 2px 8px rgba(0,0,0,.16);
}


.transaction-list{
    overflow:hidden;
    border:1px solid #1b2739;
    border-radius:15px;
    background:#0a111c;
}

.transaction-item{
    display:flex;
    gap:12px;
    padding:15px;
}

.transaction-item + .transaction-item{
    border-top:1px solid #182436;
}

.transaction-icon{
    width:39px;
    height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 39px;
    border-radius:11px;
}

.transaction-icon.deposit{
    background:rgba(56,207,150,.08);
    color:#55d9a4;
}

.transaction-icon.withdraw{
    background:rgba(142,116,255,.09);
    color:#9b86ff;
}

.transaction-icon svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.transaction-main{
    min-width:0;
    flex:1;
}

.transaction-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.transaction-title-row strong{
    color:#e5e9f1;
    font-size:10px;
}

.transaction-amount{
    font-size:10px;
    font-weight:850;
    white-space:nowrap;
}

.transaction-amount.positive{
    color:#55d9a4;
}

.transaction-amount.negative{
    color:#a898ff;
}

.transaction-meta{
    display:flex;
    gap:5px;
    margin-top:5px;
    color:#5f6c81;
    font-size:7px;
}

.transaction-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:9px;
}

.transaction-reference{
    overflow:hidden;
    color:#505d72;
    font-family:monospace;
    font-size:7px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.transaction-status{
    padding:4px 7px;
    border-radius:6px;
    font-size:7px;
    font-weight:800;
    white-space:nowrap;
}

.status-pending{
    background:rgba(245,185,70,.08);
    color:#d8ad59;
}

.status-paid{
    background:rgba(56,207,150,.08);
    color:#55d9a4;
}

.status-rejected{
    background:rgba(255,92,117,.08);
    color:#ee7e92;
}


.transaction-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:270px;
    padding:30px;
    text-align:center;
}

.transaction-empty-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:11px;
    border-radius:14px;
    background:#151e30;
    color:#7661cf;
}

.transaction-empty-icon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
}

.transaction-empty strong{
    color:#aeb7c8;
    font-size:10px;
}

.transaction-empty span{
    margin-top:5px;
    color:#566378;
    font-size:8px;
}


@media(max-width:600px){

    .transactions-page{
        padding:20px 15px 95px;
    }

    .transactions-head h1{
        font-size:22px;
    }

    .transaction-item{
        padding:13px;
    }

    .transaction-amount{
        font-size:9px;
    }

}


/* =========================================================
   GLOBAL FLOATING LIVE CHAT
   ========================================================= */

.floating-chat{
    position:fixed;
    right:18px;
    bottom:82px;
    z-index:999;

    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(153,128,255,.35);
    border-radius:50%;

    background:linear-gradient(135deg,#8058ff,#6538ed);
    color:#fff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.32),
        0 5px 18px rgba(95,54,220,.28);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.floating-chat:hover{
    transform:translateY(-3px) scale(1.03);

    box-shadow:
        0 16px 35px rgba(0,0,0,.36),
        0 7px 22px rgba(95,54,220,.35);
}

.floating-chat:active{
    transform:scale(.95);
}

.floating-chat-icon{
    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.floating-chat-icon svg{
    width:23px;
    height:23px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.floating-chat-dot{
    position:absolute;
    top:3px;
    right:3px;

    width:9px;
    height:9px;

    border:2px solid #0a111c;
    border-radius:50%;
    background:#48d49b;
}

@media(max-width:600px){

    .floating-chat{
        right:15px;
        bottom:78px;

        width:51px;
        height:51px;
    }

    .floating-chat-icon svg{
        width:21px;
        height:21px;
    }

}


/* =========================================================
   DASHBOARD RECENT ACTIVITY
   ========================================================= */

.dashboard-activity{
    margin-top:28px;
}

.dashboard-see-all{
    color:#9a7cff;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.dashboard-see-all:hover{
    color:#b7a2ff;
}

.activity-list{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.activity-item{
    min-height:72px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:13px 15px;

    border:1px solid rgba(128,145,180,.13);
    border-radius:18px;

    background:rgba(13,21,35,.72);
    text-decoration:none;
    color:inherit;

    transition:
        border-color .18s ease,
        transform .18s ease,
        background .18s ease;
}

.activity-item:hover{
    transform:translateY(-1px);
    border-color:rgba(126,83,255,.28);
    background:rgba(18,27,45,.9);
}

.activity-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;
    background:rgba(126,83,255,.10);
}

.activity-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:#9b7cff;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.activity-main{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.activity-main strong{
    font-size:14px;
    color:#f3f5fb;
}

.activity-main small{
    color:#78849a;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.activity-amount{
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}

.activity-amount.positive{
    color:#65d6a0;
}

.activity-amount.negative{
    color:#d3d9e5;
}

.activity-empty{
    padding:22px 16px;
    display:flex;
    flex-direction:column;
    gap:5px;

    border:1px dashed rgba(128,145,180,.18);
    border-radius:18px;
    background:rgba(13,21,35,.55);
}

.activity-empty strong{
    color:#e9edf5;
}

.activity-empty span{
    color:#778399;
    font-size:13px;
}

@media(max-width:600px){

    .dashboard-activity{
        margin-top:24px;
    }

    .activity-item{
        min-height:68px;
        padding:12px;
        border-radius:16px;
    }

    .activity-icon{
        width:40px;
        height:44px;
        flex-basis:40px;
    }

    .activity-amount{
        font-size:12px;
    }

}


/* =========================================================
   MOBILE DRAWER MENU
   ========================================================= */

.mobile-menu{
    position:relative;
    z-index:1001;
    display:none;

    width:40px;
    height:44px;
    padding:0;

    align-items:center;
    justify-content:center;

    border:1px solid #253249;
    border-radius:11px;

    background:#0d1523;
    color:#d9def0;

    cursor:pointer;
}

.mobile-menu svg{
    width:21px;
    height:21px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.mobile-menu-overlay{
    position:fixed;
    inset:0;
    z-index:1090;

    background:rgba(2,5,10,.72);
    backdrop-filter:blur(3px);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.mobile-menu-overlay.open{
    opacity:1;
    visibility:visible;
}

.mobile-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;

    z-index:1100;

    width:min(340px,86vw);

    padding:20px 17px;

    background:#0a111c;
    border-left:1px solid #1d2a40;

    box-shadow:-18px 0 45px rgba(0,0,0,.38);

    transform:translateX(105%);
    transition:transform .25s cubic-bezier(.2,.8,.2,1);

    overflow-y:auto;
}

.mobile-drawer.open{
    transform:translateX(0);
}

.mobile-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-bottom:18px;
    border-bottom:1px solid #182438;
}

.mobile-drawer-brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.mobile-drawer-logo{
    width:37px;
    height:37px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #6248b9;
    border-radius:11px;

    background:#17142b;
    color:#a88dff;

    font-weight:900;
    font-size:17px;
}

.mobile-drawer-brand span:last-child{
    display:flex;
    flex-direction:column;
}

.mobile-drawer-brand strong{
    color:#edf0f7;
    font-size:11px;
    letter-spacing:.04em;
}

.mobile-drawer-brand small{
    margin-top:2px;
    color:#5f6d82;
    font-size:6px;
    letter-spacing:.14em;
}

.mobile-drawer-close{
    width:38px;
    height:38px;

    border:1px solid #26344b;
    border-radius:10px;

    background:#101a2a;
    color:#9aa6bb;

    font-size:25px;
    line-height:1;

    cursor:pointer;
}

.mobile-drawer-nav{
    display:flex;
    flex-direction:column;
    gap:5px;

    padding-top:15px;
}

.mobile-drawer-nav a{
    min-height:48px;

    display:flex;
    align-items:center;
    gap:13px;

    padding:0 13px;

    border:1px solid transparent;
    border-radius:12px;

    color:#aeb8ca;
    text-decoration:none;

    font-size:10px;
    font-weight:700;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.mobile-drawer-nav a:hover{
    background:#111b2b;
    border-color:#202f46;
    color:#fff;
}

.mobile-drawer-nav svg{
    width:19px;
    height:19px;

    flex:0 0 19px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.mobile-drawer-nav .mobile-drawer-login{
    margin-top:8px;
    background:#6946e8;
    border-color:#7959f0;
    color:#fff;
}

.mobile-drawer-nav .mobile-drawer-danger{
    margin-top:8px;
    color:#e47d91;
}

body.menu-open{
    overflow:hidden;
}

@media(max-width:800px){

    .mobile-menu{
        display:flex;
    }

    .navlinks{
        display:none !important;
    }

    .topbar .wallet,
    .topbar .header-login{
        margin-left:auto;
        margin-right:8px;
    }

}

@media(min-width:801px){

    .mobile-drawer,
    .mobile-menu-overlay{
        display:none !important;
    }

}


/* =========================================================
   PROFILE WITHDRAWAL INFO
   ========================================================= */

.profile-withdrawal{
    margin-top:22px;
}

.profile-empty-withdrawal{
    display:flex;
    flex-direction:column;
    gap:5px;

    padding:17px;

    border:1px dashed rgba(128,145,180,.18);
    border-radius:15px;

    background:rgba(13,21,35,.55);
}

.profile-empty-withdrawal strong{
    color:#dfe4ee;
    font-size:13px;
}

.profile-empty-withdrawal span{
    color:#69768c;
    font-size:11px;
}

.profile-withdrawal .profile-list{
    overflow:hidden;
}

.profile-withdrawal .profile-item strong{
    max-width:100%;
    word-break:break-word;
}

@media(max-width:600px){

    .profile-withdrawal{
        margin-top:18px;
    }

    .profile-empty-withdrawal{
        padding:15px;
    }

}


.payment-field > span small{
    margin-left:5px;
    color:#69768c;
    font-size:10px;
    font-weight:600;
}


.payment-field > span small{
    margin-left:5px;
    color:#69768c;
    font-size:10px;
    font-weight:600;
}


/* =========================================================
   WITHDRAW REGISTERED DESTINATION
   ========================================================= */

.withdraw-destination-card{
    margin-top:8px;
    padding:15px 16px;

    border:1px solid rgba(126,83,255,.18);
    border-radius:15px;

    background:rgba(16,24,40,.72);
}

.withdraw-destination-main{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.withdraw-destination-main strong{
    color:#eef1f8;
    font-size:14px;
}

.withdraw-destination-main span{
    color:#9ca8bb;
    font-size:13px;
    letter-spacing:.02em;
}

.withdraw-destination-card > small{
    display:block;
    margin-top:10px;
    color:#68758a;
    font-size:10px;
}

.withdraw-no-destination{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.withdraw-no-destination strong{
    color:#e5e9f1;
    font-size:13px;
}

.withdraw-no-destination span{
    color:#758196;
    font-size:11px;
}


/* =========================================================
   BACKOFFICE DASHBOARD
   ========================================================= */

.admin-dashboard{
    max-width:1180px;
    margin:0 auto;
    padding:34px 20px 80px;
}

.admin-dashboard-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.admin-eyebrow,
.admin-card-eyebrow{
    color:#8063ed;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
}

.admin-dashboard-head h1{
    margin:7px 0 5px;
    color:var(--theme-text);
    font-size:30px;
}

.admin-dashboard-head p{
    margin:0;
    color:var(--theme-muted);
    font-size:13px;
}

.admin-status{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border:1px solid #203128;
    border-radius:12px;
    background:#0c1714;
    color:#79d4a5;
    font-size:11px;
    font-weight:700;
}

.admin-status i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#55cf91;
}

.admin-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.admin-stat-card{
    padding:20px;
    border:1px solid #1c293d;
    border-radius:18px;
    background:var(--theme-card);
    text-decoration:none;
    transition:.18s ease;
}

.admin-stat-card:hover{
    transform:translateY(-2px);
    border-color:#3b3260;
}

.admin-stat-label{
    display:block;
    color:var(--theme-muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
}

.admin-stat-card strong{
    display:block;
    margin-top:9px;
    color:#f0f3f8;
    font-size:27px;
}

.admin-stat-card small{
    display:block;
    margin-top:5px;
    color:#8171ca;
    font-size:11px;
}

.admin-operation-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:18px;
}

.admin-operation-card,
.admin-balance-card,
.admin-tools{
    padding:21px;
    border:1px solid #1c293d;
    border-radius:18px;
    background:var(--theme-card);
}

.admin-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.admin-card-head h2{
    margin:7px 0 0;
    color:var(--theme-text);
    font-size:17px;
}

.admin-count-badge{
    min-width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
    border-radius:10px;
    background:#211b3b;
    color:#a992ff;
    font-size:11px;
    font-weight:800;
}

.admin-operation-amount{
    margin-top:22px;
    color:#f0f3f8;
    font-size:22px;
    font-weight:800;
}

.admin-operation-card p,
.admin-balance-card p{
    color:var(--theme-muted);
    font-size:11px;
}

.admin-action-primary{
    display:inline-flex;
    margin-top:9px;
    padding:10px 13px;
    border-radius:10px;
    background:var(--theme-accent);
    color:#fff;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
}

.admin-balance-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:16px;
}

.admin-balance-card h2{
    margin:7px 0 0;
    color:var(--theme-text);
    font-size:17px;
}

.admin-balance-card > strong{
    color:#f0f3f8;
    font-size:21px;
    white-space:nowrap;
}

.admin-tools{
    margin-top:16px;
}

.admin-tool-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
    margin-top:16px;
}

.admin-tool-grid a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px;
    border:1px solid #1b293d;
    border-radius:11px;
    background:#101a29;
    color:#aeb8c9;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
}

.admin-tool-grid a:hover{
    border-color:#3a3260;
    color:#fff;
}

.admin-tool-grid b{
    color:#8166ed;
}

@media(max-width:800px){

    .admin-dashboard{
        padding:24px 14px 70px;
    }

    .admin-dashboard-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-dashboard-head h1{
        font-size:25px;
    }

    .admin-stat-grid{
        grid-template-columns:1fr 1fr;
    }

    .admin-operation-grid{
        grid-template-columns:1fr;
    }

    .admin-tool-grid{
        grid-template-columns:1fr 1fr;
    }

    .admin-balance-card{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-balance-card > strong{
        font-size:19px;
    }

}

@media(max-width:430px){

    .admin-stat-grid{
        gap:9px;
    }

    .admin-stat-card{
        padding:15px;
    }

    .admin-stat-card strong{
        font-size:22px;
    }

    .admin-tool-grid{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   BACKOFFICE TRANSACTION PAGES
   ========================================================= */

.admin-page{
    max-width:1250px;
    margin:0 auto;
    padding:34px 20px 80px;
}

.admin-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.admin-page-head h1{
    margin:7px 0 5px;
    color:var(--theme-text);
    font-size:29px;
}

.admin-page-head p{
    margin:0;
    color:var(--theme-muted);
    font-size:12px;
}

.admin-page-summary{
    min-width:100px;
    padding:12px 15px;
    border:1px solid #1d2a3d;
    border-radius:13px;
    background:var(--theme-card);
    text-align:right;
}

.admin-page-summary span{
    display:block;
    color:var(--theme-muted);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.admin-page-summary strong{
    display:block;
    margin-top:4px;
    color:#a992ff;
    font-size:19px;
}

.admin-queue-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:17px 20px;
    margin-bottom:17px;
    border:1px solid #1d2a3d;
    border-radius:16px;
    background:var(--theme-card);
}

.admin-queue-card span{
    display:block;
    color:var(--theme-muted);
    font-size:10px;
}

.admin-queue-card strong{
    display:block;
    margin-top:4px;
    color:var(--theme-text);
    font-size:20px;
}

.admin-queue-card a{
    padding:9px 13px;
    border:1px solid #29364b;
    border-radius:9px;
    color:#aeb8c9;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
}

.admin-table-card{
    overflow:hidden;
    border:1px solid #1c293d;
    border-radius:18px;
    background:var(--theme-card);
}

.admin-table-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:20px;
    border-bottom:1px solid #19263a;
}

.admin-table-head h2{
    margin:7px 0 0;
    color:var(--theme-text);
    font-size:17px;
}

.admin-table-head > span{
    color:var(--theme-muted);
    font-size:10px;
}

.admin-table-scroll{
    overflow-x:auto;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    min-width:1050px;
}

.admin-table th{
    padding:12px 15px;
    border-bottom:1px solid #19263a;
    background:#101a29;
    color:var(--theme-muted);
    font-size:9px;
    font-weight:800;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.admin-table td{
    padding:14px 15px;
    border-bottom:1px solid #172337;
    color:#9da8ba;
    font-size:11px;
    vertical-align:middle;
}

.admin-table tbody tr:hover{
    background:#101a29;
}

.admin-table tbody tr:last-child td{
    border-bottom:0;
}

.admin-user-cell{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.admin-user-cell strong{
    color:#e7ebf2;
    font-size:12px;
}

.admin-user-cell small{
    color:#647188;
    font-size:9px;
}

.admin-money{
    color:var(--theme-text);
    white-space:nowrap;
}

.admin-method{
    display:inline-block;
    padding:5px 8px;
    border:1px solid #24334a;
    border-radius:7px;
    color:#a9b4c7;
    font-size:9px;
}

.admin-reference{
    color:#6f7d94;
    font-family:monospace;
    font-size:9px;
}

.admin-destination{
    color:#aab4c4;
    font-family:monospace;
    font-size:10px;
    white-space:nowrap;
}

.admin-date{
    color:#69778e;
    font-size:9px;
    white-space:nowrap;
}

.admin-status-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:7px;
    font-size:8px;
    font-weight:800;
    letter-spacing:.06em;
}

.admin-status-badge.status-pending{
    background:#2b2412;
    color:#d8b45d;
}

.admin-status-badge.status-paid{
    background:#11271e;
    color:#71d29b;
}

.admin-status-badge.status-rejected{
    background:#2a171b;
    color:#e58a96;
}

.admin-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.admin-actions form{
    margin:0;
}

.admin-actions button{
    padding:7px 9px;
    border:0;
    border-radius:7px;
    cursor:pointer;
    font-size:9px;
    font-weight:800;
}

.admin-approve{
    background:#245c43;
    color:#b9f0d0;
}

.admin-reject{
    background:#5b252c;
    color:#ffc1c8;
}

.admin-approve:hover,
.admin-reject:hover{
    filter:brightness(1.15);
}

.admin-no-action{
    color:#445168;
}

.admin-empty{
    padding:50px 20px !important;
    color:#69778e !important;
    text-align:center;
}

@media(max-width:700px){

    .admin-page{
        padding:24px 13px 70px;
    }

    .admin-page-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-page-head h1{
        font-size:25px;
    }

    .admin-page-summary{
        width:100%;
        text-align:left;
        box-sizing:border-box;
    }

    .admin-queue-card{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-queue-card a{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

}


/* =========================================================
   BACKOFFICE USERS
   ========================================================= */

.admin-search-card{
    margin-bottom:17px;
    padding:16px 20px;
    border:1px solid #1c293d;
    border-radius:16px;
    background:var(--theme-card);
}

.admin-search-form{
    display:flex;
    align-items:flex-end;
    gap:9px;
}

.admin-search-form > div{
    flex:1;
}

.admin-search-form span{
    display:block;
    margin-bottom:6px;
    color:var(--theme-muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
}

.admin-search-form input{
    width:100%;
    box-sizing:border-box;
    padding:11px 13px;
    border:1px solid #24334a;
    border-radius:9px;
    outline:none;
    background:#101a29;
    color:var(--theme-text);
    font-size:11px;
}

.admin-search-form input:focus{
    border-color:var(--theme-accent);
}

.admin-search-form button,
.admin-search-form > a{
    padding:11px 14px;
    border:1px solid #29364b;
    border-radius:9px;
    background:var(--theme-accent);
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    font-size:10px;
    font-weight:800;
}

.admin-search-form > a{
    background:#101a29;
    color:#9da8ba;
}

.admin-bonus{
    color:#8d7bc9;
    font-size:10px;
    white-space:nowrap;
}

.admin-payout{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.admin-payout strong{
    color:#dce2eb;
    font-size:10px;
}

.admin-payout small{
    color:#69778e;
    font-family:monospace;
    font-size:9px;
}

.admin-no-data{
    color:#536177;
    font-size:9px;
}


/* =========================================================
   ADMIN USER DETAIL
   ========================================================= */

.admin-back-button{
    padding:10px 14px;
    border:1px solid #29364b;
    border-radius:10px;
    background:#101a29;
    color:#aeb8c9;
    text-decoration:none;
    font-size:10px;
    font-weight:700;
}

.admin-user-hero{
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px;
    margin-bottom:17px;
    border:1px solid #1c293d;
    border-radius:18px;
    background:var(--theme-card);
}

.admin-user-avatar{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:#211b3b;
    color:#a992ff;
    font-size:20px;
    font-weight:800;
}

.admin-user-identity{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.admin-user-identity strong{
    color:var(--theme-text);
    font-size:17px;
}

.admin-user-identity span{
    color:#9ba7b9;
    font-size:11px;
}

.admin-user-identity small{
    color:#68768d;
    font-size:10px;
}

.admin-user-stat-grid{
    margin-bottom:17px;
}

.admin-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:17px;
}

.admin-detail-card{
    padding:20px;
    border:1px solid #1c293d;
    border-radius:18px;
    background:var(--theme-card);
}

.admin-detail-list{
    margin-top:16px;
}

.admin-detail-list > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:11px 0;
    border-bottom:1px solid #172337;
}

.admin-detail-list > div:last-child{
    border-bottom:0;
}

.admin-detail-list span{
    color:var(--theme-muted);
    font-size:10px;
}

.admin-detail-list strong{
    color:#dce2eb;
    font-size:10px;
    text-align:right;
    word-break:break-word;
}

@media(max-width:700px){

    .admin-user-hero{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .admin-user-identity{
        min-width:calc(100% - 70px);
    }

    .admin-user-hero > .admin-status-badge{
        margin-left:67px;
    }

    .admin-detail-grid{
        grid-template-columns:1fr;
    }

    .admin-back-button{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

}


.admin-view{
    display:inline-flex;
    align-items:center;
    padding:7px 9px;
    border:1px solid #29364b;
    border-radius:7px;
    background:#101a29;
    color:#aeb8c9;
    text-decoration:none;
    font-size:9px;
    font-weight:800;
}

.admin-view:hover{
    border-color:var(--theme-accent);
    color:#fff;
}


/* =========================================================
   ADMIN TRANSACTION LEDGER
   ========================================================= */

.admin-filter-card{
    margin-bottom:16px;
    padding:16px 20px;
    border:1px solid #1c293d;
    border-radius:16px;
    background:var(--theme-card);
}

.admin-filter-form{
    display:flex;
    align-items:flex-end;
    gap:9px;
}

.admin-filter-group,
.admin-filter-search{
    min-width:145px;
}

.admin-filter-search{
    flex:1;
}

.admin-filter-form span{
    display:block;
    margin-bottom:6px;
    color:var(--theme-muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
}

.admin-filter-form select,
.admin-filter-form input{
    width:100%;
    box-sizing:border-box;
    padding:10px 11px;
    border:1px solid #24334a;
    border-radius:9px;
    outline:none;
    background:#101a29;
    color:#dce2eb;
    font-size:10px;
}

.admin-filter-form button,
.admin-filter-form > a{
    padding:10px 13px;
    border:1px solid #29364b;
    border-radius:9px;
    background:var(--theme-accent);
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    font-size:10px;
    font-weight:800;
}

.admin-filter-form > a{
    background:#101a29;
    color:#9da8ba;
}

.admin-ledger-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:16px;
}

.admin-ledger-summary > div{
    padding:16px 19px;
    border:1px solid #1c293d;
    border-radius:15px;
    background:var(--theme-card);
}

.admin-ledger-summary span{
    display:block;
    color:var(--theme-muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
}

.admin-ledger-summary strong{
    display:block;
    margin-top:6px;
    color:var(--theme-text);
    font-size:18px;
}

.admin-type-badge{
    display:inline-flex;
    padding:5px 8px;
    border-radius:7px;
    font-size:8px;
    font-weight:800;
    letter-spacing:.06em;
}

.admin-type-badge.type-deposit{
    background:#132b21;
    color:#76d5a0;
}

.admin-type-badge.type-withdraw{
    background:#282039;
    color:#b39cff;
}

@media(max-width:760px){

    .admin-filter-form{
        align-items:stretch;
        flex-direction:column;
    }

    .admin-filter-group,
    .admin-filter-search{
        width:100%;
    }

    .admin-filter-form button,
    .admin-filter-form > a{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

    .admin-ledger-summary{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   ADMIN PENDING QUEUE
   ========================================================= */

.admin-small-link{
    color:#8f7bea;
    font-size:9px;
    font-weight:800;
    text-decoration:none;
}

.admin-small-link:hover{
    color:#fff;
}

.admin-queue-list{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:7px;
}

.admin-queue-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid #172337;
    border-radius:11px;
    background:#101a29;
    text-decoration:none;
    transition:.15s ease;
}

.admin-queue-item:hover{
    border-color:#34425b;
    transform:translateY(-1px);
}

.admin-queue-avatar{
    width:31px;
    height:31px;
    flex:0 0 31px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#211b3b;
    color:#a992ff;
    font-size:10px;
    font-weight:800;
}

.admin-queue-user{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.admin-queue-user strong{
    overflow:hidden;
    color:#dce2eb;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-queue-user small{
    overflow:hidden;
    color:#66748a;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.admin-queue-amount{
    color:var(--theme-text);
    font-size:10px;
    white-space:nowrap;
}

.admin-empty-inline{
    margin-top:14px;
    padding:15px;
    border:1px dashed #24334a;
    border-radius:10px;
    color:#69778e;
    font-size:10px;
    text-align:center;
}

@media(max-width:700px){

    .admin-queue-item{
        padding:9px;
    }

    .admin-queue-amount{
        font-size:9px;
    }

}


/* =========================================================
   NEXUS PLAY BACKOFFICE UI
   Balance Management / User Detail
   ========================================================= */

.admin-page{
    width:min(1380px,calc(100% - 32px));
    margin:0 auto;
    padding:32px 0 80px;
}

.admin-page-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
}

.admin-eyebrow,
.admin-card-eyebrow{
    display:block;
    color:#9b7cff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin-bottom:8px;
}

.admin-page-head h1{
    margin:0;
    font-size:32px;
    line-height:1.15;
}

.admin-page-head p{
    margin:8px 0 0;
    color:#7f8ba3;
}

.admin-page-summary{
    min-width:130px;
    padding:14px 18px;
    border:1px solid #202c42;
    border-radius:14px;
    background:#0d1626;
    text-align:right;
}

.admin-page-summary span{
    display:block;
    color:#7f8ba3;
    font-size:12px;
}

.admin-page-summary strong{
    display:block;
    margin-top:3px;
    font-size:24px;
}


/* USER HERO */

.admin-user-hero{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:18px;
    padding:24px;
    margin-bottom:20px;
    border:1px solid #1e2a40;
    border-radius:20px;
    background:linear-gradient(145deg,#101a2b,#0b1422);
    box-shadow:0 12px 35px rgba(0,0,0,.18);
}

.admin-user-avatar{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:linear-gradient(135deg,#7654ff,#9c62ff);
    color:#fff;
    font-size:27px;
    font-weight:800;
}

.admin-user-identity{
    min-width:0;
}

.admin-user-identity strong{
    display:block;
    font-size:22px;
}

.admin-user-identity span,
.admin-user-identity small{
    display:block;
    margin-top:4px;
    color:#8490a8;
}

.admin-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 11px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
}

.status-active,
.status-paid{
    background:rgba(36,190,119,.12);
    color:#48d49a;
    border:1px solid rgba(36,190,119,.25);
}

.status-pending{
    background:rgba(245,183,66,.12);
    color:#f5bd4f;
    border:1px solid rgba(245,183,66,.25);
}

.status-rejected,
.status-blocked{
    background:rgba(239,74,86,.12);
    color:#ff6976;
    border:1px solid rgba(239,74,86,.25);
}


/* STAT CARDS */

.admin-stat-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:20px;
}

.admin-stat-card{
    display:block;
    padding:20px;
    border:1px solid #1d2a40;
    border-radius:17px;
    background:#0d1727;
    color:inherit;
    text-decoration:none;
    transition:.2s ease;
}

.admin-stat-card:hover{
    transform:translateY(-2px);
    border-color:#493b87;
    background:#101c30;
}

.admin-stat-label{
    display:block;
    color:#8792aa;
    font-size:11px;
    font-weight:800;
    letter-spacing:.1em;
}

.admin-stat-card strong{
    display:block;
    margin:9px 0 4px;
    font-size:24px;
}

.admin-stat-card small{
    color:#748097;
}


/* DETAIL CARDS */

.admin-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-bottom:20px;
}

.admin-detail-card{
    padding:24px;
    border:1px solid #1d2a40;
    border-radius:19px;
    background:#0d1727;
}

.admin-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.admin-card-head h2{
    margin:0;
    font-size:20px;
}

.admin-detail-list{
    display:flex;
    flex-direction:column;
}

.admin-detail-list > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:13px 0;
    border-bottom:1px solid #19253a;
}

.admin-detail-list > div:last-child{
    border-bottom:0;
}

.admin-detail-list span{
    color:#78859d;
    font-size:13px;
}

.admin-detail-list strong{
    color:#e9edf5;
    text-align:right;
    overflow-wrap:anywhere;
}


/* =========================================================
   BALANCE MANAGEMENT
   ========================================================= */

.admin-balance-management{
    margin:20px 0;
    padding:24px;
    border:1px solid #273750;
    border-radius:20px;
    background:linear-gradient(145deg,#0e192a,#0a1422);
    box-shadow:0 15px 45px rgba(0,0,0,.20);
}

.admin-balance-current{
    margin-bottom:22px;
}

.admin-balance-current span{
    display:block;
    color:#8490a8;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.admin-balance-current strong{
    display:block;
    margin-top:6px;
    color:#55d89c;
    font-size:30px;
    line-height:1.1;
}

.admin-balance-forms{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.admin-balance-form{
    padding:20px;
    border:1px solid #24334b;
    border-radius:16px;
    background:#0a1422;
}

.admin-balance-form.add{
    border-top:2px solid #32c889;
}

.admin-balance-form.deduct{
    border-top:2px solid #e94b58;
}

.admin-balance-form h3{
    margin:0 0 5px;
    font-size:17px;
}

.admin-balance-form.add h3{
    color:#4fd49b;
}

.admin-balance-form.deduct h3{
    color:#ff6873;
}

.admin-balance-form p{
    margin:0 0 18px;
    color:#758198;
    font-size:13px;
}

.admin-balance-field{
    margin-bottom:14px;
}

.admin-balance-field label{
    display:block;
    margin-bottom:7px;
    color:#a9b3c5;
    font-size:12px;
    font-weight:700;
}

.admin-balance-input{
    width:100%;
    min-height:46px;
    box-sizing:border-box;
    padding:0 14px;
    border:1px solid #2a3850;
    border-radius:10px;
    outline:none;
    background:#101b2d;
    color:#f1f4f8;
    font:inherit;
}

.admin-balance-input:focus{
    border-color:#7557ee;
    box-shadow:0 0 0 3px rgba(117,87,238,.12);
}

.admin-balance-submit{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:10px;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.admin-balance-submit.add{
    background:#20ad72;
}

.admin-balance-submit.add:hover{
    background:#25c783;
}

.admin-balance-submit.deduct{
    background:#d9434f;
}

.admin-balance-submit.deduct:hover{
    background:#ed5360;
}

.admin-balance-note{
    margin-top:18px;
    padding:14px 16px;
    border:1px solid #244b70;
    border-radius:12px;
    background:#0b1b2d;
    color:#8190a8;
    font-size:12px;
    line-height:1.6;
}

.admin-balance-note strong{
    display:block;
    margin-bottom:4px;
    color:#58aef4;
}


/* TABLE */

.admin-table-card{
    overflow:hidden;
    border:1px solid #1d2a40;
    border-radius:19px;
    background:#0d1727;
}

.admin-table-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 22px;
    border-bottom:1px solid #1c293d;
}

.admin-table-head h2{
    margin:0;
    font-size:20px;
}

.admin-table-head > span{
    color:#748097;
    font-size:12px;
}

.admin-table-scroll{
    width:100%;
    overflow-x:auto;
}

.admin-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}

.admin-table th{
    padding:13px 16px;
    background:#0a1321;
    color:#758198;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-align:left;
    white-space:nowrap;
}

.admin-table td{
    padding:15px 16px;
    border-top:1px solid #19253a;
    color:#b4bed0;
    font-size:13px;
    vertical-align:middle;
}

.admin-table tbody tr:hover{
    background:#101c2e;
}

.admin-money{
    color:#edf2f8;
}

.admin-reference{
    color:#8996ac;
    font-size:12px;
}

.admin-date{
    color:#748097;
    font-size:12px;
}

.admin-method{
    color:#a8b2c4;
}

.admin-empty{
    padding:40px!important;
    text-align:center;
    color:#6f7b91!important;
}


/* ACTIONS */

.admin-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

.admin-actions form{
    margin:0;
}

.admin-actions button,
.admin-view{
    min-height:34px;
    padding:7px 11px;
    border-radius:8px;
    border:1px solid #29374e;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
}

.admin-approve{
    background:#123d30;
    border-color:#1c7557!important;
    color:#58dca3;
}

.admin-reject{
    background:#3c1820;
    border-color:#71303a!important;
    color:#ff737d;
}

.admin-view{
    display:inline-flex;
    align-items:center;
    background:#18243a;
    color:#aab7cc;
}

.admin-no-action{
    color:#59667b;
}


/* BACK BUTTON */

.admin-back-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 15px;
    border:1px solid #26344c;
    border-radius:10px;
    background:#101b2d;
    color:#b7c1d1;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}


/* MOBILE */

@media(max-width:800px){

    .admin-page{
        width:calc(100% - 24px);
        padding:20px 0 60px;
    }

    .admin-page-head{
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
    }

    .admin-page-head h1{
        font-size:27px;
    }

    .admin-user-hero{
        grid-template-columns:auto 1fr;
        padding:18px;
    }

    .admin-user-hero > .admin-status-badge{
        grid-column:1/-1;
        justify-self:start;
    }

    .admin-stat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .admin-stat-card{
        padding:16px;
    }

    .admin-stat-card strong{
        font-size:20px;
    }

    .admin-detail-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .admin-detail-card{
        padding:18px;
    }

    .admin-balance-management{
        padding:18px;
        border-radius:17px;
    }

    .admin-balance-forms{
        grid-template-columns:1fr;
        gap:12px;
    }

    .admin-balance-form{
        padding:17px;
    }

    .admin-table-head{
        padding:17px;
    }

}

@media(max-width:480px){

    .admin-page{
        width:calc(100% - 16px);
    }

    .admin-stat-grid{
        grid-template-columns:1fr 1fr;
    }

    .admin-user-hero{
        gap:12px;
    }

    .admin-user-avatar{
        width:52px;
        height:52px;
        border-radius:14px;
        font-size:22px;
    }

    .admin-user-identity strong{
        font-size:18px;
    }

    .admin-detail-list > div{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .admin-detail-list strong{
        text-align:left;
    }

    .admin-balance-current strong{
        font-size:25px;
    }

    .admin-balance-form h3{
        font-size:16px;
    }

}


/* =========================================================
   BACKOFFICE PROMOTION FORM
   ========================================================= */

.admin-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.admin-form-field{
    min-width:0;
}

.admin-form-full{
    grid-column:1 / -1;
}

.admin-form-field label{
    display:block;
    margin-bottom:7px;
    color:var(--theme-muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.admin-form-field input,
.admin-form-field textarea{
    width:100%;
    box-sizing:border-box;
    padding:11px 13px;
    border:1px solid #24334a;
    border-radius:9px;
    outline:none;
    background:#101a29;
    color:var(--theme-text);
    font-size:11px;
    font-family:inherit;
}

.admin-form-field textarea{
    min-height:220px;
    resize:vertical;
    line-height:1.6;
}

.admin-form-field input:focus,
.admin-form-field textarea:focus{
    border-color:var(--theme-accent);
}

.admin-form-help{
    display:block;
    margin-top:6px;
    color:#59677d;
    font-size:9px;
    line-height:1.5;
}

.admin-form-check{
    display:flex !important;
    align-items:center;
    gap:9px;
    margin:0 !important;
    padding:3px 0;
    color:#aeb8c9 !important;
    font-size:11px !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    cursor:pointer;
}

.admin-form-check input{
    width:16px;
    height:16px;
    margin:0;
    accent-color:#6b4be8;
}

@media(max-width:700px){

    .admin-form-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .admin-form-full{
        grid-column:auto;
    }

    .admin-form-field input,
    .admin-form-field textarea{
        font-size:12px;
    }

    .admin-form-field textarea{
        min-height:200px;
    }

}

/* =========================================================
   GLOBAL USER PROMOTIONS
   ========================================================= */

.global-promo{
    max-width:1200px;
    margin:28px auto 90px;
    padding:0 20px;
}

.global-promo-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;
    margin-bottom:14px;
}

.global-promo-head h2{
    margin:5px 0 0;
    color:#fff;
    font-size:20px;
    letter-spacing:-.025em;
}

.global-promo-head a{
    color:#8793a8;
    font-size:10px;
    font-weight:800;
    text-decoration:none;
}

.global-promo-head a:hover{
    color:#fff;
}

.global-promo-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.global-promo-card{
    overflow:hidden;
    border:1px solid #1b293d;
    border-radius:16px;
    background:var(--theme-card);
}

.global-promo-banner{
    display:block;
    background:#080d16;
}

.global-promo-banner img{
    display:block;
    width:100%;
    aspect-ratio:4 / 1;
    object-fit:cover;
}

.global-promo-content{
    padding:14px 16px 16px;
}

.global-promo-category{
    display:inline-flex;
    padding:4px 7px;
    border:1px solid #293850;
    border-radius:6px;
    color:#8793a8;
    font-size:8px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.global-promo-content h3{
    margin:9px 0 12px;
    color:var(--theme-text);
    font-size:14px;
    line-height:1.4;
}

.global-promo-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:8px;
    background:var(--theme-accent);
    color:#fff;
    font-size:9px;
    font-weight:800;
    text-decoration:none;
}

.global-promo-button:hover{
    filter:brightness(1.12);
}

@media(max-width:700px){

    .global-promo{
        margin:22px auto 85px;
        padding:0 13px;
    }

    .global-promo-head{
        align-items:center;
    }

    .global-promo-head h2{
        font-size:17px;
    }

    .global-promo-list{
        grid-template-columns:1fr;
        gap:12px;
    }

    .global-promo-card{
        border-radius:13px;
    }

    .global-promo-banner img{
        aspect-ratio:16 / 6;
    }

    .global-promo-content{
        padding:12px 13px 14px;
    }

}


/* =========================================================
   PROMOTION PAGE
   ========================================================= */

.promotion-page{
    max-width:1200px;
    margin:0 auto;
    padding:34px 20px 100px;
}

.promotion-head{
    margin-bottom:24px;
}

.promotion-head h1{
    margin:6px 0 8px;
    color:#fff;
    font-size:32px;
    letter-spacing:-.04em;
}

.promotion-head p{
    max-width:620px;
    margin:0;
    color:#727e94;
    font-size:12px;
    line-height:1.7;
}

.promotion-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin-bottom:18px;
    padding-bottom:3px;
    scrollbar-width:none;
}

.promotion-tabs::-webkit-scrollbar{
    display:none;
}

.promotion-tab{
    flex:0 0 auto;
    padding:9px 14px;
    border:1px solid #24334a;
    border-radius:9px;
    background:#101a29;
    color:#7f8ca1;
    font-family:inherit;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}

.promotion-tab.active{
    border-color:var(--theme-accent);
    background:var(--theme-accent);
    color:#fff;
}

.promotion-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.promotion-card{
    overflow:hidden;
    border:1px solid #1c293d;
    border-radius:17px;
    background:var(--theme-card);
    transition:transform .2s ease,border-color .2s ease;
}

.promotion-card:hover{
    border-color:#334461;
    transform:translateY(-2px);
}

.promotion-hidden{
    display:none;
}

.promotion-banner{
    position:relative;
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:#080d16;
    cursor:pointer;
}

.promotion-banner img{
    display:block;
    width:100%;
    aspect-ratio:4 / 1;
    object-fit:cover;
}

.promotion-banner-overlay{
    position:absolute;
    right:12px;
    bottom:12px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:rgba(7,10,18,.78);
    color:#fff;
    font-size:9px;
    font-weight:800;
    opacity:0;
    transform:translateY(4px);
    transition:.2s ease;
}

.promotion-banner:hover .promotion-banner-overlay{
    opacity:1;
    transform:translateY(0);
}

.promotion-body{
    padding:17px 18px 18px;
}

.promotion-meta span{
    display:inline-flex;
    padding:5px 8px;
    border:1px solid #293850;
    border-radius:7px;
    color:#8793a8;
    font-size:8px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.promotion-body h2{
    margin:10px 0 12px;
    color:var(--theme-text);
    font-size:17px;
    letter-spacing:-.025em;
}

.promotion-content{
    color:#8c98aa;
    font-size:11px;
    line-height:1.7;
}

.promotion-content strong{
    color:#e7ebf2;
}

.promotion-content table{
    width:100%;
    margin:13px 0;
    border-collapse:collapse;
}

.promotion-content th,
.promotion-content td{
    padding:8px;
    border:1px solid #24334a;
}

.promotion-content th{
    background:#101a29;
    color:#aeb8c9;
}

.promotion-content ul,
.promotion-content ol{
    padding-left:20px;
}

.promotion-button{
    margin-top:15px;
}

.promotion-card.open .promotion-body{
    border-top:1px solid #19263a;
}

@media(max-width:700px){

    .promotion-page{
        padding:27px 13px 90px;
    }

    .promotion-head{
        margin-bottom:19px;
    }

    .promotion-head h1{
        font-size:27px;
    }

    .promotion-head p{
        font-size:11px;
    }

    .promotion-list{
        grid-template-columns:1fr;
        gap:13px;
    }

    .promotion-card{
        border-radius:14px;
    }

    .promotion-banner img{
        aspect-ratio:16 / 6;
    }

    .promotion-banner-overlay{
        opacity:1;
        transform:none;
    }

    .promotion-body{
        padding:14px 14px 16px;
    }

    .promotion-body h2{
        font-size:15px;
    }

}


/* =========================================================
   GLOBAL PROMO CAROUSEL
   ========================================================= */

.global-promo-list.has-carousel{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-bottom:4px;
}

.global-promo-list.has-carousel::-webkit-scrollbar{
    display:none;
}

.global-promo-list.has-carousel .global-promo-card{
    flex:0 0 calc(50% - 7px);
    scroll-snap-align:start;
}

.global-promo-list.single-promo{
    display:block;
}

.global-promo-list.single-promo .global-promo-card{
    max-width:760px;
}

@media(max-width:700px){

    .global-promo-list.has-carousel{
        gap:12px;
        margin-right:-13px;
        padding-right:13px;
    }

    .global-promo-list.has-carousel .global-promo-card{
        flex:0 0 88%;
    }

}


/* =========================================================
   HOME HEADER AUTH ACTIONS
   ========================================================= */

.header-auth-actions{
    display:flex;
    align-items:center;
    gap:7px;
    margin-left:auto;
}

.header-auth-actions .header-login{
    margin:0;
}

.header-register{
    height:42px;
    min-width:82px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    box-sizing:border-box;
    border:1px solid #7655ee;
    border-radius:11px;
    background:linear-gradient(135deg,#8058ff,#683cf0);
    color:#fff;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
    transition:filter .18s ease,transform .18s ease;
}

.header-register:hover{
    filter:brightness(1.1);
    transform:translateY(-1px);
}

@media(max-width:800px){

    .header-auth-actions{
        gap:5px;
    }

    .header-auth-actions .header-login,
    .header-register{
        height:38px;
        min-width:auto;
        padding:0 11px;
        border-radius:9px;
        font-size:10px;
    }

}


/* HOME AUTH — MOBILE REFINEMENT */
@media(max-width:800px){

    .header-auth-actions{
        display:flex;
        align-items:center;
        gap:8px;
        margin-left:auto;
        margin-right:4px;
    }

    .header-auth-actions .header-login,
    .header-auth-actions .header-register{
        width:90px;
        min-width:90px;
        height:44px;
        padding:0;
        border-radius:11px;
        box-sizing:border-box;
        font-size:12px;
        font-weight:800;
    }

    .header-auth-actions .header-login{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .header-auth-actions .header-register{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .mobile-menu{
        width:44px;
        height:44px;
        flex:0 0 44px;
        border-radius:11px;
    }

}

/* MOBILE HEADER AUTH CALIBRATION */
@media(max-width:800px){

    .header-auth-actions{
        gap:6px;
        margin-left:auto;
    }

    .header-auth-actions .header-login,
    .header-auth-actions .header-register{
        width:82px;
        min-width:82px;
        height:38px;
        padding:0;
        border-radius:10px;
        font-size:10px;
        font-weight:800;
    }

    .header-register{
        background:linear-gradient(135deg,#8058ff,#683cf0);
    }

}

/* =========================================================
   BACKOFFICE BRANDING FORM POLISH
   ========================================================= */

.admin-form-field label{
    color:#aeb8ca;
}

.admin-form-field input,
.admin-form-field textarea{
    background:#101a29;
    color:#edf1f8;
    border-color:#263650;
}

.admin-form-field input::placeholder,
.admin-form-field textarea::placeholder{
    color:#69778e;
}

.admin-form-field input:focus,
.admin-form-field textarea:focus{
    border-color:var(--theme-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--theme-accent) 15%, transparent);
}

.admin-form-help{
    color:#718097;
}

.admin-action-primary,
.admin-action-secondary{
    min-height:44px;
    padding:0 18px;
    border-radius:10px;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.admin-action-primary{
    border:1px solid var(--theme-accent);
    background:var(--theme-accent);
    color:#fff;
}

.admin-action-secondary{
    border:1px solid #2a3952;
    background:#101a29;
    color:#c8d0df;
}

.admin-action-primary:hover{
    filter:brightness(1.08);
}

.admin-action-secondary:hover{
    border-color:#3a4c68;
    color:#fff;
}


/* =========================================================
   BRANDING PAGE — MATCH BACKOFFICE STYLE
   ========================================================= */

.admin-page-head .admin-eyebrow{
    color:#9b7cff;
}

.admin-page-head h1{
    margin:0;
    color:#edf1f8;
    font-size:32px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.025em;
}

.admin-page-head p{
    margin:8px 0 0;
    color:#7f8ba3;
    font-size:13px;
    line-height:1.5;
}


/* =========================================================
   BRANDING PAGE — MATCH BACKOFFICE STYLE
   ========================================================= */

.admin-page-head .admin-eyebrow{
    color:#9b7cff;
}

.admin-page-head h1{
    margin:0;
    color:#edf1f8;
    font-size:32px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.025em;
}

.admin-page-head p{
    margin:8px 0 0;
    color:#7f8ba3;
    font-size:13px;
    line-height:1.5;
}


/* =========================================================
   BACKOFFICE BRANDING COLOR CONTROL
   ========================================================= */

.admin-color-control{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:48px;
    box-sizing:border-box;
    padding:6px 10px;
    border:1px solid #24334a;
    border-radius:10px;
    background:#101a29;
}

.admin-color-control input[type="color"]{
    width:38px;
    height:44px;
    flex:0 0 38px;
    padding:3px;
    border:1px solid #34445d;
    border-radius:8px;
    background:#0d1626;
    cursor:pointer;
}

.admin-color-value{
    color:#dce2eb;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
}

.admin-color-control:focus-within{
    border-color:var(--theme-accent);
    box-shadow:0 0 0 2px rgba(107,75,232,.14);
}


/* =========================================================
   BACKOFFICE BRANDING ACTION BUTTONS
   ========================================================= */

.admin-form-field .admin-action-primary,
.admin-form-field .admin-action-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border-radius:10px;
    box-sizing:border-box;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    transition:.16s ease;
}

.admin-form-field .admin-action-primary{
    border:1px solid #7657ef;
    background:#6B4BE8;
    color:#fff;
    box-shadow:0 5px 18px rgba(107,75,232,.20);
}

.admin-form-field .admin-action-primary:hover{
    background:#7958f0;
    border-color:#896df5;
    transform:translateY(-1px);
}

.admin-form-field .admin-action-secondary{
    border:1px solid #263650;
    background:#101a29;
    color:#cbd4e3;
}

.admin-form-field .admin-action-secondary:hover{
    border-color:#3a4c68;
    background:#142035;
    color:#fff;
    transform:translateY(-1px);
}

@media(max-width:520px){
    .admin-form-field .admin-action-primary,
    .admin-form-field .admin-action-secondary{
        flex:1 1 100%;
        width:100%;
    }
}


/* =========================================================
   DYNAMIC BRAND LOGO
   ========================================================= */

.brand-mark img{
    display:block;
    width:30px;
    height:30px;
    object-fit:contain;
    object-position:center;
    border-radius:6px;
}


/* =========================================================
   BRANDING LOGO — HORIZONTAL
   ========================================================= */

.brand{
    gap:12px;
}

.brand-mark{
    width:150px;
    height:42px;
    min-width:150px;
    border-radius:0;
    background:none;
    box-shadow:none;
}

.brand-mark img{
    width:150px;
    height:42px;
    object-fit:contain;
    object-position:left center;
    border-radius:0;
}

.brand-text{
    display:none;
}

@media(max-width:700px){
    .brand-mark{
        width:145px;
        min-width:145px;
        height:44px;
    }

    .brand-mark img{
        width:145px;
        height:44px;
    }
}


/* =========================================================
   BRAND LOGO — FINAL BACKOFFICE REFINEMENT
   ========================================================= */

.admin-branding-logo{
    padding:20px;
    margin-bottom:24px;
    border:1px solid #202c42;
    border-radius:16px;
    background:#0d1626;
}

.admin-branding-logo h2{
    margin:0;
    color:var(--theme-text) !important;
    font-size:20px;
    font-weight:700;
}

.admin-branding-logo > p{
    margin:7px 0 18px;
    color:var(--theme-muted) !important;
    font-size:11px;
    line-height:1.55;
}

.admin-logo-upload-row{
    display:flex;
    align-items:center;
    gap:16px;
}

.admin-logo-preview{
    width:180px;
    height:64px;
    flex:0 0 180px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-sizing:border-box;
    border:1px solid #24334a;
    border-radius:12px;
    background:#101a29;
    color:var(--theme-accent);
}

.admin-logo-preview span{
    color:var(--theme-accent) !important;
    font-size:22px;
    font-weight:800;
}

.admin-logo-preview img{
    display:block;
    width:100%;
    height:100%;
    padding:8px 14px;
    box-sizing:border-box;
    object-fit:contain;
}

.admin-logo-upload-control{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1;
}

.admin-logo-upload-control input[type="file"]{
    min-width:0;
    flex:1;
    color:var(--theme-muted);
    font-size:10px;
}

.admin-logo-upload-control input[type="file"]::file-selector-button{
    margin-right:8px;
    padding:9px 12px;
    border:1px solid #2b3951;
    border-radius:9px;
    background:#101a29;
    color:var(--theme-text);
    font:inherit;
}

.admin-logo-upload-control .admin-action-primary{
    flex:0 0 auto;
    white-space:nowrap;
}

@media(max-width:700px){

    .admin-branding-logo{
        padding:16px;
    }

    .admin-logo-upload-row{
        display:block;
    }

    .admin-logo-preview{
        width:100%;
        height:72px;
        margin-bottom:12px;
    }

    .admin-logo-upload-control{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:8px;
    }

    .admin-logo-upload-control input[type="file"]{
        flex:1;
        min-width:0;
    }
}


/* BRAND LOGO FILE PICKER */

.admin-logo-file-button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    padding:10px 14px;
    border:1px solid #2b3951;
    border-radius:9px;
    background:#101a29;
    color:var(--theme-text);
    font-size:10px;
    font-weight:700;
    cursor:pointer;
    overflow:hidden;
}

.admin-logo-file-button:hover{
    border-color:var(--theme-accent);
}

.admin-logo-file-button input[type="file"]{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}

.admin-logo-file-name{
    min-width:0;
    overflow:hidden;
    color:var(--theme-muted);
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media(max-width:700px){

    .admin-logo-upload-control{
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        gap:8px;
    }

    .admin-logo-file-button{
        min-width:88px;
    }

    .admin-logo-file-name{
        align-self:center;
    }

    .admin-logo-upload-control .admin-action-primary{
        grid-column:1 / -1;
        width:100%;
    }

}


/* BRAND LOGO — MOBILE FINAL */

@media(max-width:700px){

    .admin-branding-logo{
        padding:16px;
        border-radius:14px;
        margin-bottom:20px;
    }

    .admin-branding-logo h2{
        font-size:18px;
        margin-top:2px;
    }

    .admin-branding-logo > p{
        margin:7px 0 14px;
        font-size:10px;
        line-height:1.5;
    }

    .admin-logo-preview{
        height:88px;
        margin-bottom:12px;
        border-radius:11px;
    }

    .admin-logo-preview img{
        padding:10px 18px;
        max-width:100%;
    }

    .admin-logo-upload-control{
        display:grid;
        grid-template-columns:auto minmax(0,1fr);
        gap:8px;
    }

    .admin-logo-file-button{
        min-width:86px;
        padding:10px 12px;
        border-radius:9px;
        font-size:10px;
    }

    .admin-logo-file-name{
        min-width:0;
        align-self:center;
        font-size:9px;
    }
}

/* BRAND LOGO — TEXT CONTRAST FIX */

.admin-branding-logo h2{
    color:#EDF1F8 !important;
}

.admin-branding-logo > p{
    color:#7F8BA1 !important;
}

.admin-logo-file-button{
    color:#EDF1F8 !important;
}

.admin-logo-file-name{
    color:#7F8BA1 !important;
}

/* BRAND LOGO — BUTTONS MATCH BACKOFFICE */

.admin-logo-file-button{
    min-height:44px;
    padding:10px 14px;
    border:1px solid #2b3951;
    border-radius:9px;
    background:#101a29;
    color:#EDF1F8 !important;
    font-size:10px;
    font-weight:700;
    line-height:1;
    box-sizing:border-box;
    transition:.15s ease;
}

.admin-logo-file-button:hover{
    border-color:var(--theme-accent);
    transform:translateY(-1px);
}

@media(max-width:700px){

    .admin-logo-file-button{
        min-width:88px;
        min-height:44px;
    }
}


/* BRAND LOGO — UPLOAD BUTTON MATCH BACKOFFICE */
.admin-logo-upload-control .admin-action-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border:1px solid #7657ef !important;
    border-radius:10px;
    background:#6B4BE8 !important;
    color:#fff !important;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    box-sizing:border-box;
    white-space:nowrap;
    box-shadow:0 5px 18px rgba(107,75,232,.20);
}

.admin-logo-upload-control .admin-action-primary:hover{
    background:#7958f0 !important;
    border-color:#896df5 !important;
    transform:translateY(-1px);
}

@media(max-width:700px){
    .admin-logo-upload-control .admin-action-primary{
        width:100%;
        min-height:44px;
    }
}

/* AUTH — LOGO BRANDING HORIZONTAL */
.auth-logo-mark{
    width:140px;
    height:44px;
    flex:0 0 140px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background:none;
    box-shadow:none;
    border-radius:0;
    overflow:hidden;
}

.auth-logo-mark img{
    display:block;
    width:140px;
    height:44px;
    max-width:140px;
    max-height:44px;
    object-fit:contain;
    object-position:left center;
}

@media(max-width:700px){
    .auth-logo-mark{
        width:140px;
        height:44px;
        flex-basis:140px;
    }

    .auth-logo-mark img{
        width:140px;
        height:44px;
    }
}



/* ADMIN LOGIN LOGO */
.admin-login-logo-mark{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:linear-gradient(135deg,#8058ff,#6538ed);
    color:#fff;
    font-size:18px;
    font-weight:900;
    line-height:1;
    box-shadow:0 8px 22px rgba(95,54,220,.28);
    box-sizing:border-box;
}

.admin-login-logo-mark + span{
    text-align:left;
}

/* CAPTCHA - Register */
.captcha-box{
    display:grid;
    grid-template-columns:minmax(120px, .75fr) minmax(0, 1fr);
    gap:10px;
    align-items:center;
}

.captcha-box > strong{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:47px;
    padding:0 14px;
    border:1px solid #2b3650;
    border-radius:11px;
    background:linear-gradient(135deg,#151d30,#101827) !important;
    color:#ffffff !important;
    font-size:17px !important;
    font-weight:800;
    letter-spacing:3px;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
    white-space:nowrap;
}

.captcha-box input{
    min-width:0;
}

@media (max-width:520px){
    .captcha-box{
        grid-template-columns:1fr;
    }

    .captcha-box > strong{
        min-height:44px;
    }
}

/* Registration success message */
.auth-success{
    display:grid;
    gap:5px;
    padding:12px 14px;
    border:1px solid rgba(120,88,255,.35);
    border-radius:11px;
    background:rgba(112,78,232,.10);
    color:#cbd2e2 !important;
}

.auth-success strong{
    color:#ffffff !important;
    font-size:12px;
    font-weight:800;
}

.auth-success span{
    color:#aeb7c8 !important;
    font-size:11px;
}

.auth-success b{
    color:#9b7cff !important;
    font-weight:800;
}

/* =========================================================
   GLOBAL LOGIN MODAL
   ========================================================= */

.login-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.login-modal.is-open{
    display:flex;
}

.login-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.login-modal-dialog{
    position:relative;
    z-index:1;
    width:min(420px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:30px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    background:var(--theme-card,#0D1624);
    color:var(--theme-text,#EDF1F8);
    box-shadow:0 25px 80px rgba(0,0,0,.5);
    animation:loginModalIn .18s ease-out;
}

@keyframes loginModalIn{
    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.login-modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:var(--theme-text,#EDF1F8);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.login-modal-close:hover{
    background:rgba(255,255,255,.12);
}

.login-modal-brand{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}

.login-modal-brand span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:16px;
    background:var(--theme-accent,#6B4BE8);
    color:#fff;
    font-size:24px;
    font-weight:800;
}

.login-modal-header{
    text-align:center;
    margin-bottom:24px;
}

.login-modal-header > span{
    display:block;
    margin-bottom:7px;
    color:var(--theme-accent,#6B4BE8);
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
}

.login-modal-header h2{
    margin:0;
    font-size:28px;
}

.login-modal-header p{
    margin:8px 0 0;
    color:var(--theme-muted,#7F8BA1);
    font-size:14px;
}

.login-modal-form{
    display:grid;
    gap:16px;
}

.login-modal-form label{
    display:grid;
    gap:7px;
}

.login-modal-form label > span{
    font-size:13px;
    font-weight:600;
}

.login-modal-form input{
    width:100%;
    box-sizing:border-box;
    min-height:48px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    outline:none;
    background:rgba(255,255,255,.045);
    color:var(--theme-text,#EDF1F8);
    font:inherit;
}

.login-modal-form input::placeholder{
    color:var(--theme-muted,#7F8BA1);
}

.login-modal-form input:focus{
    border-color:var(--theme-accent,#6B4BE8);
    box-shadow:0 0 0 3px rgba(107,75,232,.14);
}

.login-modal-password{
    position:relative;
}

.login-modal-password input{
    padding-right:70px;
}

.login-modal-password-toggle{
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:var(--theme-accent,#6B4BE8);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.login-modal-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:50px;
    margin-top:4px;
    border:0;
    border-radius:12px;
    background:var(--theme-accent,#6B4BE8);
    color:#fff;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.login-modal-submit:hover{
    filter:brightness(1.08);
}

.login-modal-submit b{
    font-size:18px;
}

.login-modal-register{
    display:flex;
    justify-content:center;
    gap:5px;
    margin-top:20px;
    color:var(--theme-muted,#7F8BA1);
    font-size:13px;
}

.login-modal-register a{
    color:var(--theme-accent,#6B4BE8);
    font-weight:700;
    text-decoration:none;
}

body.login-modal-open{
    overflow:hidden;
}

@media(max-width:600px){
    .login-modal{
        padding:12px;
        align-items:flex-end;
    }

    .login-modal-dialog{
        width:100%;
        max-height:calc(100vh - 24px);
        padding:25px 20px 22px;
        border-radius:22px;
    }
}


/* Login modal - site logo */
.login-modal-brand img{
    display:block;
    width:auto;
    max-width:180px;
    height:56px;
    object-fit:contain;
}

@media(max-width:600px){
    .login-modal-brand img{
        max-width:170px;
        height:52px;
    }
}


/* =========================================================
   PENDING DEPOSIT UI
   ========================================================= */

.payment-pending-alert{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin:0 0 20px;
    padding:20px;
    border:1px solid rgba(139,92,246,.35);
    border-radius:18px;
    background:linear-gradient(
        135deg,
        rgba(139,92,246,.12),
        rgba(15,15,25,.92)
    );
    box-shadow:0 12px 35px rgba(0,0,0,.18);
}

.payment-pending-icon{
    width:46px;
    height:46px;
    min-width:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:rgba(139,92,246,.16);
    color:#a78bfa;
}

.payment-pending-icon svg{
    width:22px;
    height:22px;
}

.payment-pending-content{
    min-width:0;
    flex:1;
}

.payment-pending-label{
    margin-bottom:5px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    color:#a78bfa;
}

.payment-pending-content h2{
    margin:0 0 7px;
    font-size:20px;
    line-height:1.25;
}

.payment-pending-content p{
    margin:0;
    color:rgba(255,255,255,.72);
    line-height:1.6;
}

.payment-pending-content p strong{
    color:#fff;
}

.payment-pending-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 22px;
    margin-top:15px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:13px;
    color:rgba(255,255,255,.65);
}

.payment-pending-meta b{
    color:#fff;
}

#pendingDepositCountdown{
    display:inline-flex;
    align-items:center;
    min-width:74px;
    justify-content:center;
    margin-left:4px;
    padding:5px 9px;
    border-radius:8px;
    background:rgba(139,92,246,.14);
    color:#c4b5fd;
    font-variant-numeric:tabular-nums;
    font-weight:800;
}

.payment-pending-content small{
    display:block;
    margin-top:13px;
    color:rgba(255,255,255,.5);
    line-height:1.5;
}

.payment-form-locked{
    opacity:.68;
}

.payment-form-locked input:disabled,
.payment-form-locked select:disabled{
    cursor:not-allowed;
    opacity:.6;
}

.payment-form-locked .payment-submit:disabled{
    cursor:not-allowed;
    opacity:.45;
    transform:none;
}

@media (max-width:600px){

    .payment-pending-alert{
        gap:13px;
        padding:16px;
        border-radius:16px;
    }

    .payment-pending-icon{
        width:40px;
        height:40px;
        min-width:40px;
        border-radius:12px;
    }

    .payment-pending-content h2{
        font-size:17px;
    }

    .payment-pending-meta{
        flex-direction:column;
        gap:8px;
    }

    #pendingDepositCountdown{
        margin-left:2px;
    }
}


/* Transaction Pay Button */
.transaction-pay-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-left:auto;
    padding:8px 13px;
    border-radius:9px;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    color:#fff;
    background:rgba(139,92,246,.9);
    border:1px solid rgba(167,139,250,.35);
    box-shadow:0 6px 18px rgba(0,0,0,.16);
    transition:transform .15s ease, background .15s ease;
}

.transaction-pay-button:hover{
    background:rgba(124,58,237,1);
    transform:translateY(-1px);
}

.transaction-pay-button:active{
    transform:translateY(0);
}

@media (max-width:600px){
    .transaction-pay-button{
        padding:8px 11px;
        font-size:11px;
    }
}


/* Deposit pending payment button */
.deposit-pending-pay{
    display:flex;
    align-items:center;
    justify-content:center;
    width:fit-content;
    min-width:185px;
    margin-top:14px;
    margin-bottom:14px;
    padding:11px 18px;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
}

.deposit-pending-pay:hover{
    transform:translateY(-1px);
}

@media (max-width:600px){
    .deposit-pending-pay{
        width:100%;
        min-width:0;
        margin-top:15px;
        margin-bottom:14px;
    }
}


/* =========================================================
   ADMIN USER DETAIL — RESET PASSWORD
   ========================================================= */

.admin-reset-password{
    padding:20px;
}

.admin-reset-password p{
    margin:6px 0 20px;
    color:#758198;
    font-size:13px;
    line-height:1.6;
}

.admin-reset-password-fields{
    max-width:620px;
}

.admin-reset-password-field{
    margin-bottom:16px;
}

.admin-reset-password-field label{
    display:block;
    margin-bottom:7px;
    color:#a9b3c5;
    font-size:12px;
    font-weight:700;
}

.admin-reset-password-input{
    display:block;
    width:100%;
    min-height:46px;
    box-sizing:border-box;
    padding:0 14px;
    border:1px solid #2a3850;
    border-radius:10px;
    outline:none;
    background:#101b2d;
    color:#f1f4f8;
    font:inherit;
}

.admin-reset-password-input:focus{
    border-color:#7557ee;
    box-shadow:0 0 0 3px rgba(117,87,238,.12);
}

.admin-reset-password-button{
    width:100%;
    max-width:620px;
    min-height:46px;
    padding:0 18px;
    border:1px solid #7557ee;
    border-radius:10px;
    background:#7557ee;
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.admin-reset-password-button:hover{
    background:#8469f2;
    border-color:#8469f2;
}

@media (max-width:640px){
    .admin-reset-password{
        padding:16px;
    }

    .admin-reset-password-fields{
        max-width:none;
    }

    .admin-reset-password-button{
        max-width:none;
    }
}