/* =========================================================
   TUTULMANIA GLOBAL THEME V2
   Visual language follows the supplied gaming login reference.
========================================================= */
:root{
 --tm-bg:#050505;
 --tm-bg2:#0b0b0b;
 --tm-card:#171717;
 --tm-card2:#202020;
 --tm-gold:#ffd21a;
 --tm-gold2:#ffad00;
 --tm-red:#f30d16;
 --tm-text:#fff;
 --tm-muted:#bdbdbd;
 --tm-border:rgba(255,210,26,.22);
}
body{
 background:
   radial-gradient(circle at 50% 0%,rgba(255,193,7,.08),transparent 25%),
   radial-gradient(circle at 50% 100%,rgba(255,0,0,.08),transparent 30%),
   #050505 !important;
 color:var(--tm-text);
}
.wrapper{
 max-width:480px;
 background:linear-gradient(180deg,#080808,#0b0b0b) !important;
 box-shadow:0 0 45px rgba(0,0,0,.6);
}
.wrapper::before{
 content:"";
 position:fixed;
 inset:0;
 pointer-events:none;
 opacity:.15;
 background-image:radial-gradient(rgba(255,215,0,.45) 1px,transparent 1px);
 background-size:13px 13px;
}
.topbar{
 background:linear-gradient(135deg,#111,#1b1b1b) !important;
 border-bottom:1px solid rgba(255,210,26,.16);
 box-shadow:0 5px 20px rgba(0,0,0,.45);
}
.logo-icon{
 background:linear-gradient(145deg,#ffd21a,#ffad00) !important;
 color:#080808 !important;
 box-shadow:0 0 20px rgba(255,193,7,.15);
}
.logo-text h2{color:#fff}
.logo-text small{color:#aaa}
.notify-btn{background:#202020 !important;color:#ffd21a !important}
.profile-avatar{
 background:linear-gradient(145deg,#ffd21a,#ffad00) !important;
 color:#080808 !important;
}
.profile-name small{color:#aaa}
a{color:#ffd21a}
a:hover{color:#ffe77a}
.dashboard{padding:18px;padding-bottom:100px}
.hero{
 background:linear-gradient(135deg,#202020,#101010) !important;
 border:1px solid rgba(255,210,26,.18);
 box-shadow:0 15px 35px rgba(0,0,0,.4);
}
.hero-logo{
 background:linear-gradient(145deg,#ffd21a,#ffad00) !important;
 color:#080808;
}
.hero-title,.hero p{color:#c7c7c7}
.balance-card{
 background:linear-gradient(180deg,#171717,#101010) !important;
 border:1px solid rgba(255,255,255,.05);
 box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.balance-card small{color:#aaa}
.balance-card h1{color:#ffd21a}
.balance-button button{
 background:linear-gradient(180deg,#ffd21a,#ffad00) !important;
 color:#080808 !important;
 box-shadow:0 7px 20px rgba(255,193,7,.18);
}
.balance-button button:last-child{
 background:linear-gradient(180deg,#ff2626,#e50000) !important;
 color:#fff !important;
 box-shadow:0 7px 20px rgba(255,0,0,.18);
}
.quick-menu{gap:10px}
.menu-item{
 background:#171717 !important;
 border:1px solid rgba(255,255,255,.04);
}
.menu-item:hover{background:#222 !important}
.menu-item span{color:#fff}
.menu-icon{filter:saturate(.9)}
.game-section{margin-top:28px}
.section-header h3{color:#fff}
.section-header a{color:#ffd21a}
.game-card{background:#171717;border:1px solid rgba(255,255,255,.04)}
.game-image{background:linear-gradient(135deg,#272727,#101010)}
.bottom-nav{
 background:linear-gradient(180deg,#151515,#0d0d0d) !important;
 border-top:1px solid rgba(255,210,26,.16);
}
.bottom-nav a{color:#8e8e8e}
.bottom-nav .active{color:#ffd21a}
.card,.bank-card{
 background:linear-gradient(180deg,#171717,#101010) !important;
 border:1px solid rgba(255,255,255,.05);
 color:#fff;
 box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.bank-header h3,.section-header h3{color:#fff}
.bank-name,.bank-number,.bank-owner{color:#fff}
.bank-number,.bank-owner{color:#aaa}
.bank-primary{
 background:rgba(255,193,7,.15) !important;
 color:#ffd21a !important;
 border:1px solid rgba(255,193,7,.25);
}
.bank-set-main,.bank-edit{color:#ffd21a !important}
.bank-delete{color:#ff4d4d !important}
input,select,textarea{
 background:#1f1f1f !important;
 color:#fff !important;
 border-color:#393939 !important;
}
input::placeholder{color:#888}
.save-btn,.add-bank-btn{
 background:linear-gradient(180deg,#ffd21a,#ffad00) !important;
 color:#080808 !important;
}
.quick-amount button{
 background:#242424 !important;
 color:#ffd21a !important;
 border:1px solid #444 !important;
}
.quick-amount button:hover{background:#333 !important}
.loading-overlay{background:rgba(0,0,0,.94) !important}
.loader{border-top-color:#ffd21a !important}
.toast{background:#222 !important;border:1px solid rgba(255,210,26,.2)}


/* =========================================================
   TUTULMANIA V6.1.1 - DASHBOARD HEADER
========================================================= */

.dashboard-topbar{
    min-height:74px;
    height:74px;
    padding:0 16px;
    gap:10px;
}

.dashboard-brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff !important;
    text-decoration:none;
}

.dashboard-brand-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:linear-gradient(145deg,#ffd21a,#ffad00);
    color:#090909;
    font-size:16px;
    font-weight:900;
    box-shadow:0 0 18px rgba(255,193,7,.14);
}

.dashboard-brand-text{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.dashboard-brand-text strong{
    color:#fff;
    font-size:18px;
    line-height:1.1;
    letter-spacing:.2px;
}

.dashboard-brand-text small{
    margin-top:4px;
    color:#9b9b9b;
    font-size:10px;
}

.dashboard-header-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.dashboard-deposit-link{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0 13px;
    border-radius:12px;
    background:linear-gradient(180deg,#ffd21a,#ffad00);
    color:#090909 !important;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    box-shadow:0 7px 17px rgba(255,193,7,.12);
}

.dashboard-deposit-icon{
    width:15px;
    height:15px;
    display:inline-flex;
}

.dashboard-deposit-icon svg{
    width:100%;
    height:100%;
}

.dashboard-profile-avatar{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#202020;
    color:#ffd21a;
    font-size:15px;
    font-weight:800;
    border:1px solid rgba(255,210,26,.1);
}

@media(max-width:380px){
    .dashboard-topbar{
        padding:0 12px;
    }

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

    .dashboard-brand-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:13px;
    }

    .dashboard-profile-avatar{
        width:36px;
        height:36px;
    }

    .dashboard-deposit-link{
        min-height:39px;
        padding:0 10px;
    }
}

/* Replace the old emoji notification with the same simple icon language. */
.header-right .notify-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.header-right .notify-btn svg{
    width:21px;
    height:21px;
}


/* Dashboard-specific overrides: keep the new dashboard controls independent
   from the global form theme. */
.dashboard-page .dash-search input{
    background:transparent !important;
    border:0 !important;
    color:#fff !important;
}

.dashboard-page .dash-search input:focus{
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
}

.dashboard-page .dash-btn-primary,
.dashboard-page .dash-btn-primary:hover{
    color:#090909 !important;
}

.dashboard-page .dash-btn-danger,
.dashboard-page .dash-btn-danger:hover{
    color:#fff !important;
}

.dashboard-page .dash-category{
    font-family:inherit;
}

.dashboard-page .dashboard-copyright{
    color:#777;
}

/* =========================================================
   GLOBAL COPYRIGHT — TUTULMANIA
   Copyright stays in normal document flow. It is therefore only
   reached/seen at the end of a long page instead of floating over
   page content while the user scrolls.
========================================================= */
body:not(.auth-page) .tm-dashboard-copyright,
body:not(.auth-page) .dashboard-copyright,
body:not(.auth-page) .tm-deposit-copyright,
body:not(.auth-page) .tm-withdraw-copyright,
body:not(.auth-page) .tm-history-copyright,
body:not(.auth-page) .tm-referral-copyright,
body:not(.auth-page) .tm-hadiah-copyright{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    z-index:auto !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:18px 16px 20px !important;
    text-align:center !important;
    color:#777 !important;
    font-size:13px !important;
    line-height:1.2 !important;
    letter-spacing:.2px !important;
    pointer-events:none !important;
}

/* Do not reserve an artificial fixed-footer zone. The copyright is
   part of the actual page flow and appears after the page content. */
body:not(.auth-page) .wrapper{
    padding-bottom:0 !important;
}

/* Central brand image for any legacy/global topbar. */
.global-brand-logo{
    display:block;
    width:min(220px, 55vw);
    height:42px;
    max-width:100%;
    object-fit:contain;
    object-position:left center;
}