:root{
    --bg-body:#121212;
    --bg-home-section-one: #191919;
    --bg-home-section-two: #1F1F1F;
    --bg-section-one: #191919;
    --bg-section-two: #1F1F1F;
    --bg-section-three: #2D2D2D;
    --bg-header:#121212;
    --bg-sidebar:#191919;
    --bg-footer:#111827;
    --bg-card:#111827;
    --bg-soft:#1e293b;
    --bg-input:#020204;
    --bg-overlay:rgba(0,0,0,.5);
    --bg-auth-modal:#121212;
    --primary-hover:color-mix(in srgb, var(--primary) 60%, transparent);
    --bg-primary:var(--primary);
    --text-primary:var(--primary);
    --text-secondary:rgba(255,255,255,.60);
    --text-dark:#000000;
    --color-second:var(--primary);
    --color-second-hover:color-mix(in srgb, var(--primary) 60%, transparent);
    --border-color:rgba(255,255,255,.05);
    --icon-color:#ffffff;
    --icon-text-color:#ffffff;
    --icon-active-color:var(--primary);
    --icon-text-active-color:var(--primary);
    --icon-second-color:var(--primary);
    --icon-text-second-color:var(--primary);
    --bg-footer-guest: #121212;
    --border-footer-guest: rgba(255,255,255,.05);
    --bg-footer-auth-base-top: #2e2e2e;
    --bg-footer-auth-base-mid: #161616;
    --bg-footer-auth-base-bottom: #0a0a0a;
    --bg-footer-auth-spot-center: #4a4a4a;
    --bg-footer-auth-spot-mid: #1e1e1e;
    --border-footer-auth: #555555;
    --bg-toast: #ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

html,
body{
    width:100%;
    min-height:100%;
    font-family:'Inter',sans-serif;
}

body{
    background:var(--bg-body);
    color:var(--text-primary);
    font-family:'Inter',sans-serif;
}

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

img{
    user-select:none;
    pointer-events:none;
}

.header{
    background:var(--bg-header);
    border-color:var(--border-color);
}

.sidebar{
    background:var(--bg-sidebar);
}

.auth-modal{
    background:var(--bg-auth-modal);
}

.footer{
    background:var(--bg-footer);
    border-color:var(--border-color);
}

.footer-guest-menu{
    background: var(--bg-footer-guest);
    border-top: 1px solid var(--border-footer-guest);
}

.footer-auth-menu{
    background: var(--bg-footer-auth-base-bottom);
}

.card{
    background:var(--bg-card);
}

.soft-bg{
    background:var(--bg-soft);
}

.input-bg{
    background:var(--bg-input);
    color:var(--text-primary);
}

.btn-primary{
    background:var(--primary);
    color:var(--text-dark);
}

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

.btn-second{
    background:var(--color-second);
    color:var(--text-primary);
}

.btn-second:hover{
    background:var(--color-second-hover);
}

.text-brand{
    color:var(--primary);
}

.text-secondary-color{
    color:var(--text-secondary);
}

.icon{
    color:var(--icon-color);
}

.icon svg{
    stroke:var(--icon-color);
    fill:var(--icon-color);
}

.icon-text{
    color:var(--icon-text-color);
}

.icon-active{
    color:var(--icon-active-color);
}

.icon-active svg{
    stroke:currentColor;
    fill:currentColor;
}

.icon-text-active{
    color:var(--icon-text-active-color);
}

.icon-second{
    color:var(--icon-second-color);
}

.icon-second svg{
    stroke:var(--icon-second-color);
    fill:var(--icon-second-color);
}

.icon-text-second{
    color:var(--icon-text-second-color);
}

.overlay-bg{
    background:var(--bg-overlay);
}

#sidebar.active{
    left:0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    box-shadow: 0 0 0px 1000px var(--bg-input) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
}

.tab-btn .tab-icon-box{
    background-color: rgba(255,255,255,0.08);
}

.tab-btn .tab-icon{
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

.tab-btn .tab-label{
    color: rgba(255,255,255,0.6);
}

.tab-btn.active-tab .tab-icon-box{
    background-color: var(--bg-primary, var(--icon-second-color, #f59e0b));
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.tab-btn.active-tab .tab-icon{
    filter: brightness(0) invert(1);
    opacity: 1;
}

.tab-btn.active-tab .tab-label{
    color: #ffffff;
}

.nav-menu-item .nav-svg{
    color: #ffffff;
}

.nav-menu-item .nav-label{
    color: #ffffff;
}

.nav-menu-item.active-nav .nav-svg{
    color: var(--text-primary);
}

.nav-menu-item.active-nav .nav-label{
    color: var(--text-primary);
}

.footer-active { color: var(--text-primary) !important; }
.footer-active i, .footer-active span { color: var(--text-primary) !important; }

.login-blink { animation: loginBlink 1.8s ease-in-out infinite; }
@keyframes loginBlink {
    0%,100% { opacity:1; color:var(--text-primary); }
    50%      { opacity:.45; color:#fff; }
}

.footer-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    gap: 4px;
    font-size: 11px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.deposit-btn-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 10px;
    gap: 4px;
    cursor: pointer;
}
.deposit-circle-outer {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 4px solid var(--bg-background);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transform: translateY(-28px);
    margin-bottom: -28px;
}
.deposit-circle-inner {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
}

#depositPopup {
    position: fixed;
    background: var(--bg-primary, #e00000);
    border-radius: 14px;
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 500;
    overflow: visible;
    opacity: 0; pointer-events: none;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
#depositPopup.open { opacity:1; pointer-events:auto; transform:translateY(0); }
.deposit-popup-inner { display:flex; align-items:stretch; border-radius:14px; overflow:hidden; }
#depositPopup a {
    color:#fff; font-weight:800; font-size:13px; letter-spacing:.04em;
    padding:13px 22px; text-decoration:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-primary,#e00000); transition:background .15s;
}
#depositPopup a:hover { background:rgba(255,255,255,.15); }
.popup-divider { width:1.5px; background:rgba(255,255,255,.3); align-self:stretch; margin:8px 0; }
#depositPopupArrow {
    position:absolute; bottom:-7px;
    transform:translateX(-50%);
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:7px solid var(--bg-primary,#e00000);
    pointer-events:none;
}

#deposit-overlay { display:none; position:fixed; inset:0; z-index:490; }
#deposit-overlay.active { display:block; }
#float-overlay { display:none; position:fixed; inset:0; z-index:590; background:rgba(0,0,0,.4); backdrop-filter:blur(2px); }
#float-overlay.active { display:block; }

#floatMenuBtn {
    position: fixed;
    left: 14px;
    bottom: 30%;
    width: 54px; height: 54px;
    border-radius: 18px;
    border: none; outline: none;
    cursor: pointer;
    z-index: 600;
    overflow: hidden;
    background: var(--bg-primary, #e00000);
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.18),
        0 0 20px 4px rgba(var(--bg-primary-rgb, 200,0,0),.45),
        0 6px 24px rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    transition: border-radius .35s ease, box-shadow .3s ease, transform .2s ease;
}
#floatMenuBtn:active { transform: scale(.92); }
#floatMenuBtn.open {
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.3),
        0 0 28px 6px rgba(var(--bg-primary-rgb,200,0,0),.6),
        0 6px 24px rgba(0,0,0,.55);
}
#floatMenuBtn::before {
    content:'';
    position:absolute; inset:-6px;
    border-radius: inherit;
    border:2px solid var(--bg-primary,#e00000);
    opacity:0;
    animation: floatPulse 2.4s ease-out infinite;
}
@keyframes floatPulse {
    0%   { transform:scale(.85); opacity:.7; }
    70%  { transform:scale(1.35); opacity:0; }
    100% { opacity:0; }
}
.fham {
    position: absolute;
    display: flex; flex-direction: column; gap: 5px;
    transition: opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
.fham span {
    display: block;
    width: 24px; height: 2.5px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
#floatMenuBtn.open .fham span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#floatMenuBtn.open .fham span:nth-child(2) { opacity:0; transform: scaleX(0); }
#floatMenuBtn.open .fham span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

#floatMenu {
    position: fixed;
    left: 14px;
    z-index: 595;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.float-item {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-20px) scale(.7) rotate(-120deg);
    transform-origin: 27px center;
    transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.float-item.visible { opacity:1; transform:translateX(0) scale(1) rotate(0deg); pointer-events:auto; }
#floatMenu .float-item:nth-child(5).visible { transition-delay:.00s; }
#floatMenu .float-item:nth-child(4).visible { transition-delay:.07s; }
#floatMenu .float-item:nth-child(3).visible { transition-delay:.14s; }
#floatMenu .float-item:nth-child(2).visible { transition-delay:.21s; }
#floatMenu .float-item:nth-child(1).visible { transition-delay:.28s; }
#floatMenu .float-item:nth-child(1) { transition-delay:.00s; }
#floatMenu .float-item:nth-child(2) { transition-delay:.05s; }
#floatMenu .float-item:nth-child(3) { transition-delay:.10s; }
#floatMenu .float-item:nth-child(4) { transition-delay:.15s; }
#floatMenu .float-item:nth-child(5) { transition-delay:.20s; }
.float-item-icon {
    width: 50px; height: 50px;
    border-radius: 15px;
    background: rgba(10,10,10,.92);
    border: 2px solid var(--bg-primary,#e00000);
    box-shadow: 0 4px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.float-item-icon::after {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.08), transparent 70%);
    pointer-events:none;
}
.float-item-icon i { font-size:22px; color:#fff; position:relative; z-index:1; }
.float-item-icon.ic-fb { border-color:#1877f2; }
.float-item-icon.ic-fb i { color:#1877f2; }
.float-item-icon.ic-tg { border-color:#229ed9; }
.float-item-icon.ic-tg i { color:#229ed9; }
.float-item-icon.ic-wa { border-color:#25d366; }
.float-item-icon.ic-wa i { color:#25d366; }
.float-item-icon.ic-apk { border-color:#a4c639; }
.float-item-icon.ic-apk i { color:#a4c639; }
.float-item-icon.ic-rtp { border-color:var(--bg-primary,#e00000); background:var(--bg-primary,#e00000); }
.float-item-icon.ic-rtp i { color:#fff; }
.float-item-label {
    background: rgba(10,10,10,.82);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

@media (min-width: 1024px) {
    .footer-auth-menu,
    .footer-guest-menu { display: none !important; }
    #floatMenuBtn { display: none !important; }
}