/* TUTULMANIA 6.2.75 - precision visual fixes
 * Loaded last so the shared member shell is deterministic across pages.
 */

/* =========================================================
   SHARED MEMBER HEADER — Terms reference baseline
========================================================= */
.dashboard-page .tm-dashboard-header{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:100%!important;
    max-width:480px!important;
    height:74px!important;
    padding:0 22px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    z-index:1100!important;
}

.dashboard-page .tm-header-left{
    position:static!important;
    width:42px!important;
    min-width:42px!important;
    flex:0 0 42px!important;
    display:flex!important;
    align-items:center!important;
}

.dashboard-page .tm-dashboard-logo{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:auto!important;
    max-width:58vw!important;
    height:50px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.dashboard-page .tm-dashboard-logo img{
    display:block!important;
    width:min(230px,58vw)!important;
    max-width:none!important;
    height:50px!important;
    object-fit:contain!important;
    object-position:center!important;
}

.dashboard-page .tm-header-actions{
    width:48px!important;
    min-width:48px!important;
    flex:0 0 48px!important;
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
}

.dashboard-page .tm-header-notify{
    width:46px!important;
    height:46px!important;
    padding:3px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

/* =========================================================
   TERMS — restore the exact two-column numbered rows
   This intentionally overrides legacy/global list rules.
========================================================= */
.terms-page.dashboard-page .page-content{
    display:block!important;
    width:100%!important;
    max-width:480px!important;
    margin:0 auto!important;
    padding:0!important;
    background:#050505!important;
}

.terms-page .terms-main{
    display:block!important;
    width:100%!important;
    max-width:480px!important;
    margin:0 auto!important;
    padding:14px 18px 0!important;
}

.terms-page .terms-card{
    display:block!important;
    width:100%!important;
    margin:0 auto!important;
    padding:0 10px 14px!important;
    border:2px solid rgba(255,210,26,.78)!important;
    border-radius:18px!important;
    background:#070808!important;
    overflow:hidden!important;
}

.terms-page .terms-banner{
    display:block!important;
    width:calc(100% + 20px)!important;
    height:auto!important;
    margin:0 -10px 7px!important;
    aspect-ratio:661/167!important;
    object-fit:cover!important;
}

.terms-page .terms-list{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
    gap:4px!important;
}

.terms-page .terms-list > li{
    display:grid!important;
    grid-template-columns:55px minmax(0,1fr)!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:51px!important;
    margin:0!important;
    padding:5px 10px 5px 6px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:11px!important;
    background:linear-gradient(180deg,rgba(25,28,28,.95),rgba(12,14,14,.95))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 2px 4px rgba(0,0,0,.25)!important;
}

.terms-page .terms-list > li > .terms-number{
    grid-column:1!important;
    width:39px!important;
    height:39px!important;
    min-width:39px!important;
    min-height:39px!important;
    margin:0!important;
    border:2px solid #ffd21a!important;
    border-radius:11px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#ffd21a!important;
    background:transparent!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:700!important;
}

.terms-page .terms-list > li > p{
    grid-column:2!important;
    min-width:0!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    color:#f0f0f0!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:400!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
}

.terms-page .terms-list > li > p strong{
    color:#ffd21a!important;
    font-weight:800!important;
}

.terms-page .terms-closing{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:8px 0 7px!important;
    padding:9px 12px!important;
}

/* =========================================================
   DASHBOARD ACCOUNT CARD — compact proportions from ref 7
========================================================= */
.dashboard-page .tm-dashboard-account{
    min-height:118px!important;
    height:118px!important;
    padding:10px 10px 9px 11px!important;
    gap:5px!important;
    overflow:hidden!important;
}

.dashboard-page .tm-dashboard-account-main{
    min-width:0!important;
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
    gap:8px!important;
    align-self:stretch!important;
}

.dashboard-page .tm-dashboard-avatar{
    width:56px!important;
    height:56px!important;
    flex:0 0 56px!important;
    font-size:29px!important;
}

.dashboard-page .tm-dashboard-account-copy{
    min-width:0!important;
    flex:1 1 auto!important;
    padding-bottom:3px!important;
}

.dashboard-page .tm-dashboard-account-copy strong{
    font-size:17px!important;
    line-height:1.05!important;
}

.dashboard-page .tm-dashboard-account-copy span{
    margin-top:4px!important;
    font-size:11px!important;
    line-height:1!important;
}

.dashboard-page .tm-dashboard-account-copy b{
    margin-top:5px!important;
    font-size:18px!important;
    line-height:1!important;
}

.dashboard-page .tm-balance-eye{
    width:20px!important;
    height:20px!important;
    margin-left:3px!important;
}
.dashboard-page .tm-balance-eye svg{width:18px!important;height:18px!important}

.dashboard-page .tm-dashboard-vip{
    left:10px!important;
    bottom:7px!important;
    height:24px!important;
    padding:0 8px!important;
    border-radius:12px!important;
    font-size:10px!important;
}
.dashboard-page .tm-dashboard-vip svg{width:12px!important;height:12px!important}

.dashboard-page .tm-dashboard-account-actions{
    flex:0 0 215px!important;
    width:215px!important;
    max-width:215px!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    align-self:center!important;
}

.dashboard-page .tm-account-action{
    gap:4px!important;
}

.dashboard-page .tm-action-icon{
    width:39px!important;
    height:39px!important;
    border-radius:9px!important;
}
.dashboard-page .tm-action-icon svg{width:23px!important;height:23px!important}
.dashboard-page .tm-account-action small{
    font-size:9px!important;
    line-height:1!important;
}

/* Notification target is now a real link. */
.dashboard-page a.tm-header-notify{text-decoration:none!important;color:#fff!important}

/* =========================================================
   QUICK MENU — improved Referral icon treatment
========================================================= */
.dashboard-page .tm-dashboard-quick:nth-child(2) .tm-dashboard-quick-icon,
.dashboard-page .tm-dashboard-quick:nth-child(2) .tm-referral-icon{color:#ffd21a}

/* =========================================================
   PAYMENT CARD — reduce total height by ~4px
========================================================= */
.dashboard-page .tm-dashboard-payment-grid{gap:7px!important}
.dashboard-page .tm-dashboard-payment-item{
    height:43px!important;
}

/* =========================================================
   BENEFIT CARDS — tighter vertical rhythm and shorter cards
========================================================= */
.dashboard-page .tm-dashboard-benefits{
    gap:8px!important;
    margin-top:14px!important;
    padding-bottom:16px!important;
}
.dashboard-page .tm-dashboard-benefits > div{
    min-height:62px!important;
    height:62px!important;
    padding:5px 4px!important;
    grid-template-columns:25px 1fr!important;
    grid-template-rows:auto auto!important;
    column-gap:4px!important;
}
.dashboard-page .tm-dashboard-benefits svg{
    width:24px!important;
    height:24px!important;
}
.dashboard-page .tm-dashboard-benefits b{
    margin:0!important;
    font-size:8.5px!important;
    line-height:1.02!important;
}
.dashboard-page .tm-dashboard-benefits small{
    margin:1px 0 0!important;
    font-size:7px!important;
    line-height:1.02!important;
}

@media(max-width:600px){
    .dashboard-page .tm-dashboard-header{padding:0 13px!important}
    .dashboard-page .tm-dashboard-logo img{width:min(230px,58vw)!important;height:48px!important}
    .dashboard-page .tm-dashboard-account{height:116px!important;min-height:116px!important}
    .dashboard-page .tm-dashboard-account-actions{flex-basis:212px!important;width:212px!important;max-width:212px!important;gap:3px!important}
}

@media(max-width:430px){
    .dashboard-page .tm-dashboard-header{height:74px!important}
    .dashboard-page .tm-dashboard-account{
        height:116px!important;
        min-height:116px!important;
        padding:9px 8px 8px 9px!important;
    }
    .dashboard-page .tm-dashboard-account-main{gap:7px!important}
    .dashboard-page .tm-dashboard-avatar{width:54px!important;height:54px!important;flex-basis:54px!important;font-size:28px!important}
    .dashboard-page .tm-dashboard-account-copy strong{font-size:16px!important}
    .dashboard-page .tm-dashboard-account-copy span{font-size:10px!important}
    .dashboard-page .tm-dashboard-account-copy b{font-size:17px!important}
    .dashboard-page .tm-dashboard-account-actions{
        flex-basis:208px!important;
        width:208px!important;
        max-width:208px!important;
        gap:2px!important;
    }
    .dashboard-page .tm-action-icon{width:38px!important;height:38px!important}
    .dashboard-page .tm-action-icon svg{width:22px!important;height:22px!important}
    .dashboard-page .tm-account-action small{font-size:8.5px!important}

    .dashboard-page .tm-dashboard-payment-item{height:43px!important}

    .dashboard-page .tm-dashboard-benefits > div{
        min-height:61px!important;
        height:61px!important;
        padding:4px 3px!important;
        grid-template-columns:23px 1fr!important;
        column-gap:3px!important;
    }
    .dashboard-page .tm-dashboard-benefits svg{width:23px!important;height:23px!important}
    .dashboard-page .tm-dashboard-benefits b{font-size:8px!important}
    .dashboard-page .tm-dashboard-benefits small{font-size:6.5px!important;margin-top:1px!important}

    .terms-page .terms-main{padding:13px 9px 0!important}
    .terms-page .terms-card{border-width:1.5px!important;border-radius:15px!important;padding:0 6px 9px!important}
    .terms-page .terms-banner{width:calc(100% + 12px)!important;margin-left:-6px!important;margin-right:-6px!important;margin-bottom:6px!important}
    .terms-page .terms-list > li{
        grid-template-columns:47px minmax(0,1fr)!important;
        min-height:47px!important;
        padding:4px 6px 4px 4px!important;
        border-radius:10px!important;
    }
    .terms-page .terms-list > li > .terms-number{
        width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
        border-radius:9px!important;font-size:17px!important;
    }
    .terms-page .terms-list > li > p{font-size:12.5px!important;line-height:1.24!important}
}

/* 6.2.77 TERMS BANNER FINAL VISIBILITY FIX */
/* The shared member header is fixed; reserve its full height before the
   Terms content so the banner is never rendered underneath the header. */
.terms-page.dashboard-page .page-content{
    padding-top:74px!important;
    min-height:100dvh!important;
    display:block!important;
    box-sizing:border-box!important;
}

.terms-page .terms-banner{
    display:block!important;
    position:relative!important;
    z-index:1!important;
    width:calc(100% + 20px)!important;
    height:auto!important;
    min-height:121px!important;
    aspect-ratio:661 / 167!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin-top:0!important;
    margin-left:-10px!important;
    margin-right:-10px!important;
    margin-bottom:7px!important;
}

@media(max-width:430px){
    .terms-page .terms-banner{
        width:calc(100% + 12px)!important;
        min-height:96px!important;
        margin-left:-6px!important;
        margin-right:-6px!important;
        margin-bottom:6px!important;
    }
}



/* =========================================================
   DASHBOARD 6.2.79 — PRECISION ACCOUNT / HERO / PAYMENT FIX
   Scope: dashboard only. Existing structure and functionality preserved.
========================================================= */

/* Account card: keep balance clear of the right-side actions. */
.dashboard-page .tm-dashboard-account{
    position:relative!important;
    height:116px!important;
    min-height:116px!important;
    padding:9px 8px 8px 9px!important;
    overflow:hidden!important;
}

.dashboard-page .tm-dashboard-account-main{
    position:relative!important;
    display:block!important;
    flex:1 1 auto!important;
    width:calc(100% - 154px)!important;
    max-width:none!important;
    min-width:0!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
}

.dashboard-page .tm-dashboard-avatar{
    position:absolute!important;
    left:10px!important;
    top:10px!important;
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
    margin:0!important;
    font-size:28px!important;
}

.dashboard-page .tm-dashboard-account-copy{
    position:relative!important;
    margin-left:74px!important;
    padding:5px 0 0!important;
    min-width:0!important;
    max-width:calc(100% - 74px)!important;
}

.dashboard-page .tm-dashboard-account-copy strong{
    font-size:17px!important;
    line-height:1.05!important;
}

/* Saldo Utama is intentionally more prominent than the username label. */
.dashboard-page .tm-dashboard-account-copy span{
    margin-top:5px!important;
    font-size:15px!important;
    line-height:1.05!important;
}

.dashboard-page .tm-dashboard-account-copy b{
    margin-top:5px!important;
    font-size:18px!important;
    line-height:1!important;
}

/* VIP is centered horizontally under the avatar, with a small clear gap. */
.dashboard-page .tm-dashboard-vip{
    left:-2px!important;
    top:67px!important;
    bottom:auto!important;
    width:78px!important;
    height:23px!important;
    min-height:23px!important;
    padding:0!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:12px!important;
    font-size:10px!important;
    box-sizing:border-box!important;
}
.dashboard-page .tm-dashboard-vip svg{width:11px!important;height:11px!important}

/* Only Deposit + Withdraw remain; pin them to the right side. */
.dashboard-page .tm-dashboard-account-actions{
    position:absolute!important;
    top:50%!important;
    right:8px!important;
    transform:translateY(-50%)!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    flex:none!important;
    width:142px!important;
    max-width:142px!important;
    gap:5px!important;
    margin:0!important;
    align-self:auto!important;
}

.dashboard-page .tm-account-action{gap:3px!important}
.dashboard-page .tm-action-icon{
    width:39px!important;
    height:39px!important;
    border-radius:9px!important;
}
.dashboard-page .tm-action-icon svg{width:22px!important;height:22px!important}
.dashboard-page .tm-account-action small{font-size:9px!important;line-height:1!important}

/* Hero: real horizontal slider viewport. The existing dashboard JS supplies
   the 3-second autoplay, click targets, dots and pointer swipe behavior. */
.dashboard-page .tm-dashboard-hero{
    margin-top:13px!important;
}
.dashboard-page .tm-hero-viewport{
    width:100%!important;
    overflow:hidden!important;
    border:1.5px solid #ffd21a!important;
    border-radius:14px!important;
    background:#111!important;
    line-height:0!important;
    box-shadow:0 3px 10px rgba(0,0,0,.3)!important;
    touch-action:pan-y!important;
    user-select:none!important;
    -webkit-user-select:none!important;
    cursor:grab!important;
}
.dashboard-page .tm-hero-viewport:active{cursor:grabbing!important}
.dashboard-page .tm-hero-track{
    display:flex!important;
    width:400%!important;
    margin:0!important;
    padding:0!important;
    transform:translate3d(0,0,0);
    will-change:transform!important;
}
.dashboard-page .tm-hero-slide{
    display:block!important;
    flex:0 0 25%!important;
    width:25%!important;
    min-width:25%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    line-height:0!important;
    text-decoration:none!important;
}
.dashboard-page .tm-hero-slide img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:665/198!important;
    object-fit:cover!important;
    pointer-events:none!important;
}
.dashboard-page .tm-hero-dots{
    height:25px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
}
.dashboard-page .tm-hero-dots button{
    width:10px!important;
    height:10px!important;
    min-width:10px!important;
    min-height:10px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#555!important;
    box-shadow:none!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    cursor:pointer!important;
}
.dashboard-page .tm-hero-dots button.active{background:#ffd21a!important}

/* Payment logos: reduce each white logo tile by approximately 4px. */
.dashboard-page .tm-dashboard-payment-item{
    height:39px!important;
}

/* Benefits: tighter text rhythm and a shorter, more proportional card. */
.dashboard-page .tm-dashboard-benefits{
    gap:7px!important;
    margin-top:13px!important;
    padding-bottom:14px!important;
}
.dashboard-page .tm-dashboard-benefits > div{
    min-height:54px!important;
    height:54px!important;
    padding:3px 3px!important;
    grid-template-columns:22px 1fr!important;
    grid-template-rows:auto auto!important;
    column-gap:3px!important;
    row-gap:0!important;
}
.dashboard-page .tm-dashboard-benefits svg{
    width:22px!important;
    height:22px!important;
}
.dashboard-page .tm-dashboard-benefits b{
    margin:0!important;
    font-size:8px!important;
    line-height:1!important;
}
.dashboard-page .tm-dashboard-benefits small{
    margin:0!important;
    font-size:6.5px!important;
    line-height:1!important;
}

@media(max-width:430px){
    .dashboard-page .tm-dashboard-account{
        height:116px!important;
        min-height:116px!important;
        padding:9px 8px 8px 9px!important;
    }
    .dashboard-page .tm-dashboard-account-main{
        width:calc(100% - 150px)!important;
    }
    .dashboard-page .tm-dashboard-avatar{
        left:10px!important;
        top:10px!important;
        width:54px!important;
        height:54px!important;
        min-width:54px!important;
        min-height:54px!important;
        font-size:28px!important;
    }
    .dashboard-page .tm-dashboard-account-copy{
        margin-left:74px!important;
        padding-top:5px!important;
    }
    .dashboard-page .tm-dashboard-account-copy span{font-size:15px!important}
    .dashboard-page .tm-dashboard-account-copy b{font-size:18px!important}
    .dashboard-page .tm-dashboard-vip{
        left:-2px!important;
        top:67px!important;
        width:78px!important;
        height:23px!important;
        min-height:23px!important;
    }
    .dashboard-page .tm-dashboard-account-actions{
        right:7px!important;
        width:140px!important;
        max-width:140px!important;
        gap:4px!important;
    }
    .dashboard-page .tm-action-icon{width:38px!important;height:38px!important}
    .dashboard-page .tm-action-icon svg{width:21px!important;height:21px!important}
    .dashboard-page .tm-account-action small{font-size:8.5px!important}

    .dashboard-page .tm-dashboard-payment-item{height:39px!important}

    .dashboard-page .tm-dashboard-benefits{
        gap:6px!important;
        margin-top:12px!important;
        padding-bottom:13px!important;
    }
    .dashboard-page .tm-dashboard-benefits > div{
        min-height:53px!important;
        height:53px!important;
        padding:2px 2px!important;
        grid-template-columns:21px 1fr!important;
        column-gap:2px!important;
        row-gap:0!important;
    }
    .dashboard-page .tm-dashboard-benefits svg{width:21px!important;height:21px!important}
    .dashboard-page .tm-dashboard-benefits b{font-size:7.5px!important;line-height:1!important}
    .dashboard-page .tm-dashboard-benefits small{font-size:6.2px!important;line-height:1!important}
}

/* =========================================================
   TUTULMANIA 6.2.81 — REFERENCE UI ALIGNMENT
   Scope: member dashboard, shared account bar, provider,
   referral, transaction, memo, deposit, withdraw and drawer.
========================================================= */

/* Shared member account bar */
.dashboard-page .tm-account-hero{
    position:relative!important;
    min-height:112px!important;
    margin:10px 14px 0!important;
    padding:10px 8px 9px 10px!important;
    border:1.5px solid #ffd21a!important;
    border-radius:15px!important;
    background:linear-gradient(145deg,#151616,#080909)!important;
    box-shadow:0 7px 18px rgba(0,0,0,.38)!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}
.dashboard-page .tm-account-avatar{
    width:58px!important;height:58px!important;flex:0 0 58px!important;
    margin:0!important;border-radius:50%!important;
    background:linear-gradient(145deg,#303030,#111)!important;
    border:1px solid #575757!important;color:#eee!important;
    font-size:31px!important;font-weight:900!important;
}
.dashboard-page .tm-account-copy{
    min-width:0!important;padding:3px 0 0!important;margin-left:0!important;
}
.dashboard-page .tm-account-copy strong{font-size:18px!important;line-height:1.05!important;color:#fff!important}
.dashboard-page .tm-account-copy span{font-size:12px!important;margin-top:5px!important;color:#a8a8a8!important}
.dashboard-page .tm-account-copy b{font-size:19px!important;margin-top:6px!important;color:#ffd21a!important;white-space:nowrap!important}
.dashboard-page .tm-vip-badge{
    left:10px!important;right:auto!important;top:auto!important;bottom:8px!important;
    height:23px!important;min-width:78px!important;padding:0 7px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
    border:2px solid #ffd21a!important;border-radius:13px!important;
    background:#101010!important;color:#ffd21a!important;font-size:10px!important;box-sizing:border-box!important;
}
.dashboard-page .tm-vip-badge svg{width:12px!important;height:12px!important}
.dashboard-page .tm-account-refresh{top:74%!important;right:8px!important}

.dashboard-page .tm-account-actions-shared{
    position:absolute!important;right:7px!important;top:50%!important;transform:translateY(-50%)!important;
    width:55%!important;max-width:220px!important;display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;
}
.dashboard-page .tm-account-shared-action{
    min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;gap:4px!important;color:#fff!important;text-decoration:none!important;
}
.dashboard-page .tm-account-shared-action .tm-action-icon{width:43px!important;height:43px!important;border-radius:9px!important}
.dashboard-page .tm-account-shared-action.active .tm-action-icon{border-color:#ffd21a!important;color:#ffd21a!important;background:linear-gradient(145deg,#29230d,#111)!important}
.dashboard-page .tm-account-shared-action small{font-size:9px!important;line-height:1!important;font-weight:700!important;white-space:nowrap!important}

/* Dashboard account: four actions like the member reference. */
.dashboard-page .tm-dashboard-account{height:126px!important;min-height:126px!important;padding:10px 8px 8px 10px!important}
.dashboard-page .tm-dashboard-account-main{width:43%!important;height:100%!important;gap:10px!important}
.dashboard-page .tm-dashboard-avatar{left:7px!important;top:10px!important;width:58px!important;height:58px!important;font-size:31px!important}
.dashboard-page .tm-dashboard-account-copy{margin-left:72px!important;padding-top:6px!important}
.dashboard-page .tm-dashboard-account-copy strong{font-size:18px!important}
.dashboard-page .tm-dashboard-account-copy span{font-size:12px!important;margin-top:5px!important}
.dashboard-page .tm-dashboard-account-copy b{font-size:19px!important;margin-top:6px!important}
.dashboard-page .tm-dashboard-vip{left:4px!important;top:auto!important;bottom:8px!important;width:78px!important;height:23px!important}
.dashboard-page .tm-dashboard-account-actions{right:7px!important;top:50%!important;transform:translateY(-50%)!important;width:55%!important;max-width:220px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}
.dashboard-page .tm-action-icon{width:43px!important;height:43px!important}
.dashboard-page .tm-account-action small{font-size:9px!important}

/* Provider lobby */
.provider-page .tm-catalog-page{padding:0 12px 22px!important;background:#050505!important}
.provider-page .tm-catalog-page:before{content:"";display:block;height:1px}
.provider-page .tm-provider-lobby-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 12px}
.provider-page .tm-provider-lobby-title{display:flex;align-items:center;gap:9px;min-width:0}
.provider-page .tm-provider-lobby-title svg{width:28px;height:28px;color:#ffd21a;flex:0 0 28px}
.provider-page .tm-provider-lobby-title h1{margin:0;color:#fff;font-size:17px;line-height:1;font-weight:900;white-space:nowrap}
.provider-page .tm-provider-lobby-search{width:210px;height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #555;border-radius:22px;background:#222;box-sizing:border-box}
.provider-page .tm-provider-lobby-search svg{width:20px;height:20px;color:#fff;flex:0 0 20px}
.provider-page .tm-provider-lobby-search input{width:100%;min-width:0;border:0!important;outline:0;background:transparent!important;color:#fff!important;font-size:14px}
.provider-page .tm-provider-lobby-search input::placeholder{color:#aaa}
.provider-page .tm-provider-banner-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
.provider-page .tm-provider-banner-card{display:block!important;overflow:hidden!important;border:1.5px solid #ffd21a!important;border-radius:10px!important;background:#111!important;line-height:0!important}
.provider-page .tm-provider-banner-card img{display:block!important;width:100%!important;aspect-ratio:323/105!important;height:auto!important;object-fit:cover!important}

/* Sidebar */
.dashboard-page .tm-side-menu{width:min(61vw,410px)!important;background:linear-gradient(180deg,#111,#090909)!important}
.dashboard-page .tm-side-head{height:70px!important;padding:7px 14px!important;box-sizing:border-box!important;background:#090909!important}
.dashboard-page .tm-side-head .tm-live-chat{height:auto!important;border:0!important;background:transparent!important;color:#fff!important;font-size:0!important}
.dashboard-page .tm-side-head .tm-live-chat:after{content:"TUTULMANIA";font-size:24px;font-weight:900;letter-spacing:-.8px;color:#fff}
.dashboard-page .tm-menu-close{width:48px!important;height:48px!important;border:1px solid #ffd21a!important;border-radius:9px!important;background:#111!important;color:#fff!important;font-size:38px!important}
.dashboard-page .tm-side-account{padding:12px 14px 10px;border-bottom:1px solid rgba(255,210,26,.28);background:#0d0d0d}
.dashboard-page .tm-side-account-main{position:relative;min-height:78px;display:flex;align-items:center;gap:12px;padding-bottom:22px}
.dashboard-page .tm-side-avatar{width:62px;height:62px;flex:0 0 62px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#303030,#111);border:1px solid #555;color:#eee;font-size:32px;font-weight:900}
.dashboard-page .tm-side-account-copy{min-width:0;display:flex;flex-direction:column}
.dashboard-page .tm-side-account-copy strong{font-size:20px;line-height:1.05;color:#fff}
.dashboard-page .tm-side-account-copy>span{margin-top:5px;color:#aaa;font-size:12px}
.dashboard-page .tm-side-account-copy b{margin-top:5px;color:#ffd21a;font-size:18px;line-height:1;white-space:nowrap}
.dashboard-page .tm-side-eye{font-size:14px;color:#ffd21a}
.dashboard-page .tm-side-vip{position:absolute;left:0;bottom:0;height:23px;min-width:78px;display:flex;align-items:center;justify-content:center;gap:3px;border:2px solid #ffd21a;border-radius:13px;color:#ffd21a;background:#101010;font-size:10px;font-weight:900}
.dashboard-page .tm-side-vip svg{width:11px;height:11px}
.dashboard-page .tm-side-account-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.dashboard-page .tm-side-account-actions a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;text-decoration:none}
.dashboard-page .tm-side-action-icon{width:43px;height:43px;border:1px solid #343434;border-radius:9px;background:#171717;display:flex;align-items:center;justify-content:center;color:#fff;font-size:23px;font-weight:800}
.dashboard-page .tm-side-account-actions a:first-child .tm-side-action-icon{color:#ffd21a}
.dashboard-page .tm-side-account-actions small{font-size:9px;font-weight:700}
.dashboard-page .tm-language-switcher{order:3;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:4px!important;padding:8px 14px!important;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.dashboard-page .tm-side-nav{order:2;display:flex!important;flex-direction:column!important;padding:7px 10px 6px!important;gap:4px!important}
.dashboard-page .tm-side-item{min-height:58px!important;padding:0 13px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:10px!important;background:linear-gradient(90deg,#151515,#101010)!important;font-size:17px!important}
.dashboard-page .tm-side-icon{width:30px!important;height:30px!important;flex:0 0 30px!important}
.dashboard-page .tm-side-item i{width:9px!important;height:9px!important;border-radius:0!important;background:transparent!important;border-right:2px solid #ffd21a!important;border-top:2px solid #ffd21a!important;transform:rotate(45deg)!important}
.dashboard-page .tm-side-item.active{border-color:#ffd21a!important;background:linear-gradient(90deg,#3a3210,#171717)!important;color:#ffd21a!important}
.dashboard-page .tm-side-item b{margin-left:auto!important;width:28px!important;height:28px!important;border-radius:50%!important;background:#f02626!important}

/* Generic compact banner used on internal reference pages. */
.tm-reference-banner{width:100%;height:154px;overflow:hidden;border:1.5px solid #ffd21a;border-radius:14px;background:#111;position:relative;margin-bottom:12px}
.tm-reference-banner img{width:100%;height:100%;display:block;object-fit:cover}
.tm-reference-banner .tm-reference-banner-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:18px 22px;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.08));color:#fff}
.tm-reference-banner h1{margin:0;color:#fff;font-size:30px;font-weight:900;text-transform:uppercase}
.tm-reference-banner p{margin:5px 0 0;color:#fff;font-size:13px;font-weight:700}

/* Shared internal page shell */
.referral-page .page-content,.transaction-page .page-content,.memo-page .page-content{padding-top:0!important;background:#050505!important}
.referral-page .tm-reference-dashboard,.transaction-page .tm-reference-dashboard,.memo-page .tm-reference-dashboard{max-width:480px;margin:0 auto;background:#050505}

/* Payment cards */
.dashboard-page .tm-dashboard-payment-item,.tm-payment-item,.tm-withdraw-bank-pill{height:40px!important}
.tm-payment-item img,.tm-withdraw-bank-pill img{object-fit:contain!important}

@media(max-width:600px){
    .dashboard-page .tm-dashboard-account{height:126px!important;min-height:126px!important}
    .dashboard-page .tm-dashboard-account-main{width:42%!important}
    .dashboard-page .tm-dashboard-account-actions,.dashboard-page .tm-account-actions-shared{width:57%!important;max-width:none!important;gap:2px!important}
    .dashboard-page .tm-action-icon,.dashboard-page .tm-account-shared-action .tm-action-icon{width:40px!important;height:40px!important}
    .dashboard-page .tm-account-action small,.dashboard-page .tm-account-shared-action small{font-size:8px!important}
    .provider-page .tm-provider-lobby-head{align-items:flex-start}
    .provider-page .tm-provider-lobby-search{width:190px;height:40px}
    .provider-page .tm-provider-lobby-title h1{font-size:15px}
}
@media(max-width:430px){
    .dashboard-page .tm-account-hero{margin:9px 9px 0!important;min-height:116px!important}
    .dashboard-page .tm-account-actions-shared{width:57%!important;right:5px!important}
    .dashboard-page .tm-account-shared-action .tm-action-icon{width:37px!important;height:37px!important}
    .dashboard-page .tm-account-shared-action small{font-size:7.5px!important}
    .dashboard-page .tm-dashboard-account{height:122px!important;min-height:122px!important}
    .dashboard-page .tm-dashboard-account-main{width:42%!important}
    .dashboard-page .tm-dashboard-account-copy{margin-left:70px!important;padding-top:5px!important}
    .dashboard-page .tm-dashboard-account-copy strong{font-size:16px!important}
    .dashboard-page .tm-dashboard-account-copy span{font-size:11px!important}
    .dashboard-page .tm-dashboard-account-copy b{font-size:17px!important}
    .dashboard-page .tm-dashboard-account-actions{width:57%!important;right:5px!important}
    .dashboard-page .tm-action-icon{width:37px!important;height:37px!important}
    .dashboard-page .tm-account-action small{font-size:7.5px!important}
    .provider-page .tm-catalog-page{padding-left:9px!important;padding-right:9px!important}
    .provider-page .tm-provider-lobby-head{gap:7px}
    .provider-page .tm-provider-lobby-search{width:175px;height:38px}
    .provider-page .tm-provider-lobby-title svg{width:25px;height:25px}
    .provider-page .tm-provider-lobby-title h1{font-size:13px}
    .provider-page .tm-provider-banner-grid{gap:5px!important}
    .provider-page .tm-provider-banner-card{border-radius:9px!important}
    .tm-reference-banner{height:130px}
    .tm-reference-banner h1{font-size:24px}
}
.dashboard-page .tm-account-action.active .tm-action-icon{border-color:#ffd21a!important;color:#ffd21a!important;background:linear-gradient(145deg,#29230d,#111)!important}
.dashboard-page .tm-side-head .tm-live-chat{background:url('/assets/brand/logo.png') left center/contain no-repeat!important;color:transparent!important;height:48px!important}
.dashboard-page .tm-side-head .tm-live-chat:after{display:none!important}
.dashboard-page .tm-side-live-chat{order:4;margin:7px 10px 10px;min-height:54px;padding:0 13px;display:grid;grid-template-columns:34px 1fr 12px;grid-template-rows:1fr 1fr;align-items:center;column-gap:8px;border:1px solid #ffd21a;border-radius:10px;background:#111;color:#fff;text-decoration:none}
.dashboard-page .tm-side-live-chat>span{grid-row:1/3;font-size:25px;color:#ffd21a}.dashboard-page .tm-side-live-chat strong{font-size:15px;line-height:1}.dashboard-page .tm-side-live-chat small{color:#aaa;font-size:9px}.dashboard-page .tm-side-live-chat i{grid-column:3;grid-row:1/3;width:9px;height:9px;border-top:2px solid #ffd21a;border-right:2px solid #ffd21a;transform:rotate(45deg)}
.dashboard-page .tm-dashboard-header{position:fixed!important}
.dashboard-page .tm-dashboard-logo{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important}
.dashboard-page .tm-header-left{width:48px!important;min-width:48px!important}
