/* TOP WIN shared layout source of truth.
   Header/sidebar/common desktop canvas/mobile drawer rules live here.
   Keep page-specific presentation in assets/css/pages/*.css. */
:root{--tw-shared-side:190px;--tw-shared-header:62px;--tw-shared-bg:#f4f6f5}
html,body{margin:0;min-width:0;background:var(--tw-shared-bg)}
*,*:before,*:after{box-sizing:border-box}
#drawer-toggle{position:absolute;opacity:0;pointer-events:none}

/* ===== Shared header ===== */
.tw-global-header[data-topwin-global-header]{position:sticky!important;top:0!important;z-index:200!important;width:100%!important;height:var(--tw-shared-header)!important;min-height:var(--tw-shared-header)!important;margin:0!important;padding:0 18px 0 30px!important;display:flex!important;align-items:center!important;gap:0!important;background:#fff!important;border-bottom:1px solid #e8efed!important;box-shadow:0 1px 8px rgba(20,80,67,.04)!important;overflow:visible!important}
.tw-global-header[data-topwin-global-header]>.tw-global-mobile-logo{display:block!important;flex:0 0 168px!important;width:168px!important;height:54px!important;margin:0!important;padding:0!important;font-size:0!important;background:url('../images/home/topwin-logo-v15.png') left center/contain no-repeat!important}
.tw-global-header[data-topwin-global-header]>nav.tw-global-nav.tw-header-cat-nav{display:flex!important;flex:1 1 auto!important;flex-direction:row!important;align-items:stretch!important;justify-content:flex-start!important;gap:13px!important;height:var(--tw-shared-header)!important;min-width:0!important;margin-left:56px!important;overflow:visible!important}
.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b{position:relative!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;width:auto!important;min-width:0!important;height:var(--tw-shared-header)!important;margin:0!important;padding:0 7px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-decoration:none!important;transform:none!important}
.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b>.tw-icon-box{display:flex!important;flex:0 0 22px!important;align-items:center!important;justify-content:center!important;width:22px!important;height:22px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b>.tw-icon-box:before,.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b>.tw-icon-box:after,.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b:before{display:none!important;content:none!important}
.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b>.tw-icon-box>img{display:block!important;width:22px!important;height:22px!important;object-fit:contain!important;margin:0!important}
.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b>em{display:block!important;margin:0!important;padding:0!important;font-style:normal!important;font-size:11px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;color:#16473d!important}
.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b.active:after,.tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b:hover:after{content:""!important;position:absolute!important;left:7px!important;right:7px!important;bottom:0!important;height:2px!important;border-radius:2px!important;background:#12b99a!important}
.tw-global-header[data-topwin-global-header]>.tw-global-actions{position:static!important;display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;height:var(--tw-shared-header)!important;margin:0 0 0 auto!important;padding:0!important;transform:none!important}
.tw-global-header[data-topwin-global-header]>.tw-global-actions>*{position:relative!important;inset:auto!important;float:none!important;margin:0!important;transform:none!important}
.tw-global-header[data-topwin-global-header]>.tw-global-actions>a:last-child{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;min-width:38px!important;height:38px!important;padding:0!important;line-height:1!important;font-size:17px!important;border-radius:11px!important}
.tw-mobile-hamburger{display:none!important}

/* ===== Shared desktop sidebar ===== */
@media(min-width:1100px){
 .tw-side-nav.drawer{display:block!important;position:fixed!important;left:0!important;top:var(--tw-shared-header)!important;bottom:0!important;width:var(--tw-shared-side)!important;height:calc(100vh - var(--tw-shared-header))!important;overflow-y:auto!important;overflow-x:hidden!important;padding:14px 12px 24px!important;background:linear-gradient(180deg,#fff,#fbfdfc)!important;border-right:1px solid #e3ebe7!important;box-shadow:6px 0 22px rgba(19,47,40,.035)!important;z-index:100!important;scrollbar-width:none!important;transform:none!important}
 .tw-side-nav.drawer::-webkit-scrollbar{display:none!important}
 .tw-side-nav .drawer-head{display:none!important}
 .tw-side-nav .tw-side-brand{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 12px!important;padding:8px 6px 14px!important;border-bottom:1px solid #edf2f0!important;text-decoration:none!important;color:#173d34!important}
 .tw-side-nav .tw-side-avatar{width:36px!important;height:36px!important;min-width:36px!important;border-radius:11px!important;display:grid!important;place-items:center!important;background:linear-gradient(145deg,#0db092,#067964)!important;color:#fff!important;font-size:12px!important;font-weight:900!important}
 .tw-side-nav .tw-side-brand-name{font-size:13px!important;font-weight:900!important;color:#173d34!important;letter-spacing:.03em!important}
 .tw-side-nav .tw-side-group{margin-top:13px!important}
 .tw-side-nav .tw-side-group h4{margin:0 7px 7px!important;font-size:8px!important;line-height:1!important;font-weight:900!important;letter-spacing:.18em!important;color:#98a8a2!important}
 .tw-side-nav .tw-side-group a{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;min-height:46px!important;margin:2px 0!important;padding:6px 7px!important;border-radius:11px!important;text-decoration:none!important;color:#4e5f59!important;background:transparent!important}
 .tw-side-nav .tw-side-group a.active{background:linear-gradient(90deg,#e3f5ef,#f2faf7)!important;color:#087b66!important;box-shadow:inset 3px 0 0 #0b9a7c!important}
 .tw-side-nav .tw-side-icon{width:30px!important;height:30px!important;min-width:30px!important;border-radius:9px!important;display:grid!important;place-items:center!important;color:#087b66!important;background:#eef8f5!important;box-shadow:inset 0 0 0 1px #d9eee7!important}
 .tw-side-nav .tw-side-icon svg{display:block!important;width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
 .tw-side-nav .tw-side-group a.active .tw-side-icon{background:#0b9a7c!important;color:#fff!important;box-shadow:0 5px 12px rgba(11,154,124,.18)!important}
 .tw-side-nav .tw-side-label{display:block!important;min-width:0!important}
 .tw-side-nav .tw-side-label b{display:block!important;font-size:12px!important;line-height:1.12!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 .tw-side-nav .tw-side-label small{display:block!important;margin-top:2px!important;font-size:8px!important;line-height:1.1!important;color:#9aa7a2!important;font-weight:600!important}

 /* Every desktop page uses the same available canvas beside the sidebar. */
 main.cat-page,main.page{margin-left:var(--tw-shared-side)!important;width:calc(100% - var(--tw-shared-side))!important;max-width:none!important;padding-left:20px!important;padding-right:20px!important}
 .cat-shell{width:100%!important;max-width:none!important;margin:0 auto!important}
 .page>.wrap,.page>.shell,.page>.container{max-width:none!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}
 .account-page,#account{position:relative!important;inset:auto!important;display:block!important;width:100%!important;min-height:100vh!important;padding-left:calc(var(--tw-shared-side) + 20px)!important;padding-right:20px!important;background:#f4f5f5!important;overflow:visible!important}
 .account-wrap{width:100%!important;max-width:none!important;margin:0 auto!important;padding-left:0!important;padding-right:0!important}
}

/* ===== Shared mobile header + drawer ===== */
@media(max-width:1099px){
 html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
 .tw-global-header[data-topwin-global-header]{height:54px!important;min-height:54px!important;padding:0 7px!important;gap:5px!important;max-width:100vw!important}
 .tw-mobile-hamburger{display:flex!important;order:0!important;flex:0 0 34px!important;align-items:center!important;justify-content:center!important;width:34px!important;height:34px!important;margin:0!important;border:1px solid #e0ece7!important;border-radius:9px!important;background:#fff!important;color:#087f68!important;cursor:pointer!important}
 .tw-global-header[data-topwin-global-header]>.tw-global-mobile-logo{display:block!important;order:1!important;flex:0 0 88px!important;width:88px!important;min-width:88px!important;height:44px!important;margin:0!important;background-image:url('../images/home/topwin-logo-v15.png')!important;background-position:left center!important;background-size:contain!important;background-repeat:no-repeat!important}
 .tw-global-header[data-topwin-global-header]>nav.tw-global-nav.tw-header-cat-nav{display:none!important}
 .tw-global-header[data-topwin-global-header]>.tw-global-actions{order:2!important;min-width:0!important;height:54px!important;margin-left:auto!important;gap:5px!important}
 .tw-side-nav.drawer{display:block!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(286px,88vw)!important;height:100dvh!important;max-height:100dvh!important;padding:18px 16px 28px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;transform:translateX(-110%)!important;visibility:visible!important;z-index:1002!important;transition:transform .24s ease!important;background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%)!important;border-right:1px solid #e3ebe7!important;box-shadow:10px 0 34px rgba(20,55,45,.13)!important}
 #drawer-toggle:checked~.tw-side-nav.drawer{transform:translateX(0)!important}
 .tw-side-nav .drawer-head{display:none!important}
 .tw-side-nav .tw-side-brand{display:flex!important;align-items:center!important;gap:11px!important;margin:0 0 4px!important;padding:10px 10px 16px!important;border-bottom:1px solid #edf2f0!important;text-decoration:none!important;color:#173d34!important}
 .tw-side-nav .tw-side-avatar{width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important;display:grid!important;place-items:center!important;background:linear-gradient(145deg,#0db092,#067964)!important;color:#fff!important;font-size:13px!important;font-weight:900!important}
 .tw-side-nav .tw-side-brand-name{font-size:13px!important;font-weight:900!important;color:#173d34!important}
 .tw-side-nav .tw-side-group{margin-top:16px!important}.tw-side-nav .tw-side-group h4{margin:0 10px 8px!important;font-size:9px!important;line-height:1!important;font-weight:900!important;letter-spacing:.18em!important;color:#a0ada8!important}
 .tw-side-nav .tw-side-group a{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;min-height:50px!important;margin:3px 0!important;padding:7px 10px!important;border-radius:13px!important;text-decoration:none!important;color:#4e5f59!important;background:transparent!important}
 .tw-side-nav .tw-side-group a.active{background:linear-gradient(90deg,#e3f5ef,#f2faf7)!important;color:#087b66!important;box-shadow:inset 3px 0 0 #0b9a7c!important}
 .tw-side-nav .tw-side-icon{width:32px!important;height:32px!important;min-width:32px!important;border-radius:10px!important;display:grid!important;place-items:center!important;color:#087b66!important;background:#eef8f5!important;box-shadow:inset 0 0 0 1px #d9eee7!important}
 .tw-side-nav .tw-side-icon svg{display:block!important;width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}.tw-side-nav .tw-side-group a.active .tw-side-icon{background:#0b9a7c!important;color:#fff!important}
 .tw-side-nav .tw-side-label b{display:block!important;font-size:13px!important;line-height:1.15!important;font-weight:800!important;white-space:nowrap!important}.tw-side-nav .tw-side-label small{display:block!important;margin-top:3px!important;font-size:9px!important;line-height:1.1!important;color:#a0aaa6!important;font-weight:600!important}
 main.cat-page,main.page{margin-left:0!important;width:100%!important;max-width:100%!important}
 .cat-shell{width:100%!important;max-width:none!important}
 .account-page,#account{padding-left:0!important;padding-right:0!important;width:100%!important;max-width:100%!important}
 html.tw-drawer-open,body.tw-drawer-open{overflow:hidden!important;overscroll-behavior:none!important}
 body.tw-drawer-open{position:fixed!important;width:100%!important;left:0!important;right:0!important}
}

/* ===== Shared mobile shell + bottom navigation source of truth (v37+) =====
   Every page follows the index mobile header/sidebar/bottom-nav layout.
   Do not recreate these rules in page CSS. */
@media(max-width:1099px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))!important}
  main,main.page,main.cat-page,.tw-page,.tw-main,.tw-content,.tw-home-main{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;transform:none!important;overflow-x:hidden!important}

  /* Account used to be a full-screen fixed surface, which let it sit underneath
     the shared header. On mobile it now participates in the same document flow as index. */
  .account-page,#account{position:relative!important;inset:auto!important;z-index:auto!important;display:block!important;width:100%!important;max-width:100%!important;min-height:calc(100dvh - 54px)!important;padding:0!important;overflow:visible!important}
  .account-wrap{box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin:0 auto!important;padding-bottom:84px!important}

  /* The same index bottom navigation is rendered on every page. */
  .tw-mobile-nav{position:fixed!important;z-index:500!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:100vw!important;min-height:70px!important;height:calc(70px + env(safe-area-inset-bottom))!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch!important;margin:0!important;padding:0 0 env(safe-area-inset-bottom)!important;background:#fff!important;border-top:1px solid #e3e8e6!important;box-shadow:0 -5px 18px rgba(18,48,39,.06)!important;overflow:hidden!important}
  .tw-mobile-nav a{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;height:70px!important;min-height:70px!important;margin:0!important;padding:4px 2px 3px!important;text-decoration:none!important;color:#8a9490!important;background:transparent!important}
  .tw-mobile-nav a>span{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;width:100%!important;min-width:0!important;line-height:1!important;text-align:center!important}
  .tw-mobile-nav a span>b{display:block!important;flex:0 0 34px!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;margin:0 auto!important;font-size:0!important;background-position:center!important;background-repeat:no-repeat!important;background-size:contain!important}
  .tw-mobile-nav a:nth-child(1) span>b{background-image:url('../images/home/bottom-nav/01_home.png')!important}
  .tw-mobile-nav a:nth-child(2) span>b{background-image:url('../images/home/bottom-nav/04_promotion.png')!important}
  .tw-mobile-nav a:nth-child(3) span>b{background-image:url('../images/home/bottom-nav/03_deposit.png')!important}
  .tw-mobile-nav a:nth-child(4) span>b{background-image:url('../images/home/bottom-nav/02_games.png')!important}
  .tw-mobile-nav a:nth-child(5) span>b{background-image:url('../images/home/bottom-nav/05_profile.png')!important}
  .tw-mobile-nav .tw-nav-home>*{display:none!important}
  .tw-mobile-nav a em{display:block!important;margin:0!important;font-style:normal!important;font-size:11px!important;font-weight:600!important;line-height:1.05!important;white-space:nowrap!important;color:inherit!important}
  .tw-mobile-nav a.active,.tw-mobile-nav a.active em{color:#07856d!important}

  /* Old account-only navigation must never reappear over the shared nav. */
  .account-bottom{display:none!important}
}
@media(min-width:1100px){.tw-mobile-nav{display:none!important}}


/* ===== v38: complete shared header/action contract =====
   IMPORTANT: every header control is defined here so page CSS cannot leave
   different mobile/desktop variants behind. */
.tw-global-header[data-topwin-global-header] .tw-gh-btn,
.tw-global-header[data-topwin-global-header] .tw-gh-wallet,
.tw-global-header[data-topwin-global-header] .tw-gh-deposit,
.tw-global-header[data-topwin-global-header] .tw-gh-user,
.tw-global-header[data-topwin-global-header] .tw-gh-vip{
  box-sizing:border-box!important;text-decoration:none!important;align-items:center!important;justify-content:center!important;
}
.tw-global-header[data-topwin-global-header] .tw-gh-btn,
.tw-global-header[data-topwin-global-header] .tw-gh-wallet,
.tw-global-header[data-topwin-global-header] .tw-gh-deposit,
.tw-global-header[data-topwin-global-header] .tw-gh-user{
  height:38px!important;border:1px solid #e1eae6!important;background:#fff!important;border-radius:11px!important;
  display:inline-flex!important;color:#41605a!important;box-shadow:0 4px 12px rgba(17,48,40,.045)!important;
}
.tw-global-header[data-topwin-global-header] .tw-gh-btn{width:38px!important;min-width:38px!important;font-size:17px!important}
.tw-global-header[data-topwin-global-header] .tw-gh-wallet{gap:7px!important;padding:0 12px!important;font-size:12px!important;font-weight:900!important;color:#0a6f5d!important;white-space:nowrap!important}
.tw-global-header[data-topwin-global-header] .tw-gh-wallet:before{content:""!important;font-size:15px!important}
.tw-global-header[data-topwin-global-header] .tw-gh-deposit{padding:0 15px!important;background:linear-gradient(135deg,#078d73,#11b28e)!important;border-color:#078d73!important;color:#fff!important;font-size:12px!important;font-weight:900!important;box-shadow:0 7px 15px rgba(8,141,115,.18)!important;white-space:nowrap!important}
.tw-global-header[data-topwin-global-header] .tw-gh-user{min-width:38px!important;padding:0 11px!important;border-radius:999px!important;background:#eaf8f3!important;color:#07856d!important;font-weight:900!important;font-size:11px!important}
.tw-global-header[data-topwin-global-header] .tw-gh-vip{display:grid!important;width:38px!important;height:38px!important;border-radius:11px!important;background:linear-gradient(145deg,#fff4bd,#ffd65a)!important;color:#8b5b00!important;border:1px solid #f4d66b!important;box-shadow:0 5px 12px rgba(218,164,25,.12)!important;font-size:17px!important}

@media(max-width:1099px){
  /* Match the approved index mobile header on every page: hamburger + logo,
     then search, balance and deposit only. */
  .tw-global-header[data-topwin-global-header] .tw-gh-vip,
  .tw-global-header[data-topwin-global-header] .tw-gh-user,
  .tw-global-header[data-topwin-global-header]>.tw-global-actions>a:last-child{display:none!important}
  .tw-global-header[data-topwin-global-header] .tw-gh-btn{display:inline-flex!important;width:34px!important;min-width:34px!important;height:34px!important;border-radius:10px!important;font-size:15px!important}
  .tw-global-header[data-topwin-global-header] .tw-gh-wallet{display:inline-flex!important;height:34px!important;padding:0 8px!important;font-size:10px!important;gap:5px!important}
  .tw-global-header[data-topwin-global-header] .tw-gh-wallet:before{font-size:12px!important}
  .tw-global-header[data-topwin-global-header] .tw-gh-deposit{display:inline-flex!important;height:34px!important;padding:0 10px!important;font-size:10px!important}

  /* Account sub-panels are still part of the same mobile shell. They must not
     cover the shared header or shared bottom navigation. */
  .acct-panel{top:54px!important;right:0!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;left:0!important;height:auto!important;min-height:0!important;z-index:190!important;padding:0!important;background:#f5f5f5!important;overflow-y:auto!important;overflow-x:hidden!important}
  .acct-panel:target{display:block!important}
  .acct-panel .acct-sheet{width:100%!important;min-height:100%!important;height:auto!important;border-radius:0!important;box-shadow:none!important}
  .acct-panel .acct-sheet-head{padding-top:15px!important}
  .acct-panel .acct-sheet-body{padding-bottom:22px!important}
}


/* ===== v39: unified desktop shell visual contract =====
   One shared desktop Header + Sidebar for every page.
   This block intentionally comes last and overrides legacy page rules. */
@media(min-width:1100px){
  :root{--tw-shared-side:190px;--tw-shared-header:62px}

  /* Header and sidebar remain physically joined while the page scrolls. */
  .tw-global-header[data-topwin-global-header]{
    position:fixed!important;top:0!important;left:0!important;right:0!important;
    z-index:400!important;width:100%!important;height:var(--tw-shared-header)!important;
    min-height:var(--tw-shared-header)!important;margin:0!important;
    padding:0 18px 0 22px!important;display:flex!important;align-items:center!important;
    gap:18px!important;background:#fff!important;border-bottom:1px solid #e4ece8!important;
    box-shadow:0 2px 12px rgba(20,80,67,.06)!important;overflow:visible!important;
  }
  body{padding-top:var(--tw-shared-header)!important}

  .tw-global-header[data-topwin-global-header]>.tw-global-mobile-logo{
    display:block!important;flex:0 0 var(--tw-shared-side)!important;width:var(--tw-shared-side)!important;
    height:46px!important;margin:0!important;padding:0!important;font-size:0!important;
    background:url('../images/home/topwin-logo-v15.png') 8px center/122px auto no-repeat!important;
  }
  .tw-mobile-hamburger{display:none!important}

  /* One exact category size/spacing on every desktop page. */
  .tw-global-header[data-topwin-global-header]>nav.tw-global-nav.tw-header-cat-nav{
    display:flex!important;flex:1 1 auto!important;align-items:stretch!important;justify-content:flex-start!important;
    gap:9px!important;height:var(--tw-shared-header)!important;min-width:0!important;margin:0!important;overflow:visible!important;
  }
  .tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b{
    position:relative!important;display:flex!important;flex:0 0 auto!important;flex-direction:row!important;
    align-items:center!important;justify-content:flex-start!important;gap:6px!important;
    width:auto!important;min-width:0!important;height:var(--tw-shared-header)!important;
    margin:0!important;padding:0 8px!important;border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;text-decoration:none!important;transform:none!important;
  }
  .tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b>.tw-icon-box{
    display:flex!important;flex:0 0 22px!important;align-items:center!important;justify-content:center!important;
    width:22px!important;height:22px!important;margin:0!important;padding:0!important;border:0!important;
    border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;
  }
  .tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b>.tw-icon-box>img{
    display:block!important;width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;
    object-fit:contain!important;margin:0!important;
  }
  .tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b>em{
    display:block!important;margin:0!important;padding:0!important;font-style:normal!important;
    font-size:11px!important;font-weight:800!important;line-height:1!important;white-space:nowrap!important;color:#17463d!important;
  }
  .tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b.active:after,
  .tw-global-header[data-topwin-global-header]>.tw-header-cat-nav>a.tw-cat-b:hover:after{
    content:""!important;position:absolute!important;left:8px!important;right:8px!important;bottom:0!important;
    height:2px!important;border-radius:999px!important;background:#12b99a!important;
  }

  .tw-global-header[data-topwin-global-header]>.tw-global-actions{
    position:static!important;display:flex!important;flex:0 0 auto!important;align-items:center!important;
    justify-content:flex-end!important;gap:7px!important;height:var(--tw-shared-header)!important;
    margin:0 0 0 auto!important;padding:0!important;transform:none!important;
  }

  /* Sidebar is part of the same fixed shell; it starts exactly below the header. */
  .tw-side-nav.drawer{
    display:block!important;position:fixed!important;left:0!important;top:var(--tw-shared-header)!important;bottom:0!important;
    z-index:300!important;width:var(--tw-shared-side)!important;height:calc(100vh - var(--tw-shared-header))!important;
    margin:0!important;padding:12px 11px 22px!important;overflow-y:auto!important;overflow-x:hidden!important;
    background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%)!important;border-right:1px solid #e4ece8!important;
    box-shadow:6px 0 20px rgba(19,47,40,.035)!important;scrollbar-width:none!important;transform:none!important;
  }
  .tw-side-nav.drawer::-webkit-scrollbar{display:none!important}
  .tw-side-nav .drawer-head{display:none!important}
  .tw-side-nav .tw-side-brand{display:none!important}
  .tw-side-nav .tw-side-group{margin-top:12px!important}
  .tw-side-nav .tw-side-group h4{margin:0 7px 7px!important;font-size:8px!important;line-height:1!important;font-weight:900!important;letter-spacing:.14em!important;color:#97a6a1!important}
  .tw-side-nav .tw-side-group a{
    display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:center!important;gap:8px!important;
    min-height:46px!important;margin:2px 0!important;padding:6px 7px!important;border-radius:11px!important;
    text-decoration:none!important;color:#4e5f59!important;background:transparent!important;box-shadow:none!important;transform:none!important;
  }
  .tw-side-nav .tw-side-group a:hover{background:#f4f9f7!important;color:#087b66!important}
  .tw-side-nav .tw-side-group a.active{background:linear-gradient(90deg,#e3f5ef,#f3faf8)!important;color:#087b66!important;box-shadow:inset 3px 0 0 #0b9a7c!important}

  /* Consistent icon geometry + intentional category colors on every page. */
  .tw-side-nav .tw-side-icon{
    width:30px!important;height:30px!important;min-width:30px!important;border-radius:9px!important;
    display:grid!important;place-items:center!important;color:#fff!important;box-shadow:0 5px 11px rgba(17,55,46,.10)!important;
    border:0!important;
  }
  .tw-side-nav .tw-side-icon.home{background:linear-gradient(145deg,#20d2aa,#07846c)!important}
  .tw-side-nav .tw-side-icon.account{background:linear-gradient(145deg,#43cfff,#1b7ed5)!important}
  .tw-side-nav .tw-side-icon.fav{background:linear-gradient(145deg,#ff7aad,#d42b70)!important}
  .tw-side-nav .tw-side-icon.search{background:linear-gradient(145deg,#8a93ff,#5356cf)!important}
  .tw-side-nav .tw-side-icon.slot{background:linear-gradient(145deg,#c654ff,#7226d7)!important}
  .tw-side-nav .tw-side-icon.sports{background:linear-gradient(145deg,#33e1a5,#07975f)!important}
  .tw-side-nav .tw-side-icon.live{background:linear-gradient(145deg,#ff5ca8,#c31b69)!important}
  .tw-side-nav .tw-side-icon.card{background:linear-gradient(145deg,#2bdcff,#087dad)!important}
  .tw-side-nav .tw-side-icon.fish{background:linear-gradient(145deg,#46b7ff,#245cd8)!important}
  .tw-side-nav .tw-side-icon.esport{background:linear-gradient(145deg,#ff9a4d,#e64d1d)!important}
  .tw-side-nav .tw-side-icon.lottery{background:linear-gradient(145deg,#ffdc55,#f19b07)!important}
  .tw-side-nav .tw-side-icon.promo{background:linear-gradient(145deg,#ff6d73,#cf1c39)!important}
  .tw-side-nav .tw-side-icon.support{background:linear-gradient(145deg,#26dfd2,#078e9b)!important}
  .tw-side-nav .tw-side-icon.app{background:linear-gradient(145deg,#51d8ff,#2a66df)!important}
  .tw-side-nav .tw-side-icon svg{display:block!important;width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
  .tw-side-nav .tw-side-group a.active .tw-side-icon{filter:saturate(1.08) brightness(1.03)!important;box-shadow:0 6px 13px rgba(11,154,124,.16)!important}
  .tw-side-nav .tw-side-label b{display:block!important;font-size:12px!important;line-height:1.12!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .tw-side-nav .tw-side-label small{display:block!important;margin-top:2px!important;font-size:8px!important;line-height:1.1!important;color:#9aa7a2!important;font-weight:600!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* One desktop canvas offset everywhere. */
  main,main.page,main.cat-page,.tw-page,.tw-main,.tw-content,.tw-home-main{
    margin-left:var(--tw-shared-side)!important;max-width:none!important;min-width:0!important;
  }
  main.page,main.cat-page{width:calc(100% - var(--tw-shared-side))!important}
  .account-page,#account{
    padding-left:calc(var(--tw-shared-side) + 20px)!important;padding-right:20px!important;
  }
}


/* ===== v40: final shared-shell normalization =====
   This block is authoritative and intentionally more specific than legacy page rules. */
@media(min-width:1100px){
  :root{
    --tw-shared-side:190px;
    --tw-shared-header:62px;
  }

  html body .tw-global-header[data-topwin-global-header]{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:var(--tw-shared-header)!important;
    min-height:var(--tw-shared-header)!important;
    margin:0!important;
    padding:0 18px 0 22px!important;
    z-index:500!important;
  }
  html body{
    padding-top:var(--tw-shared-header)!important;
  }

  html body .tw-side-nav.drawer{
    position:fixed!important;
    top:var(--tw-shared-header)!important;
    left:0!important;
    bottom:0!important;
    width:var(--tw-shared-side)!important;
    height:calc(100vh - var(--tw-shared-header))!important;
    margin:0!important;
    padding:12px 11px 22px!important;
    z-index:450!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%)!important;
    border-right:1px solid #e4ece8!important;
    box-shadow:6px 0 20px rgba(19,47,40,.035)!important;
    scrollbar-width:none!important;
  }
  html body .tw-side-nav.drawer::-webkit-scrollbar{display:none!important}

  html body .tw-side-nav.drawer .tw-side-group{
    margin-top:12px!important;
  }
  html body .tw-side-nav.drawer .tw-side-group h4{
    margin:0 7px 7px!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.14em!important;
    color:#97a6a1!important;
  }
  html body .tw-side-nav.drawer .tw-side-group a{
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    min-height:46px!important;
    margin:2px 0!important;
    padding:6px 7px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#4e5f59!important;
    box-shadow:none!important;
    transform:none!important;
  }
  html body .tw-side-nav.drawer .tw-side-group a:hover{
    background:#f4f9f7!important;
    color:#087b66!important;
  }
  html body .tw-side-nav.drawer .tw-side-group a.active{
    background:linear-gradient(90deg,#e3f5ef,#f3faf8)!important;
    color:#087b66!important;
    box-shadow:inset 3px 0 0 #0b9a7c!important;
  }

  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    display:grid!important;
    place-items:center!important;
    border:0!important;
    border-radius:9px!important;
    color:#fff!important;
    box-shadow:0 5px 11px rgba(17,55,46,.10)!important;
    filter:none!important;
    opacity:1!important;
  }

  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.home{background:linear-gradient(145deg,#20d2aa,#07846c)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.account{background:linear-gradient(145deg,#43cfff,#1b7ed5)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.fav{background:linear-gradient(145deg,#ff7aad,#d42b70)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.search{background:linear-gradient(145deg,#8a93ff,#5356cf)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.slot{background:linear-gradient(145deg,#c654ff,#7226d7)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.sports{background:linear-gradient(145deg,#33e1a5,#07975f)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.live{background:linear-gradient(145deg,#ff5ca8,#c31b69)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.card{background:linear-gradient(145deg,#2bdcff,#087dad)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.fish{background:linear-gradient(145deg,#46b7ff,#245cd8)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.esport{background:linear-gradient(145deg,#ff9a4d,#e64d1d)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.lottery{background:linear-gradient(145deg,#ffdc55,#f19b07)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.promo{background:linear-gradient(145deg,#ff6d73,#cf1c39)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.support{background:linear-gradient(145deg,#26dfd2,#078e9b)!important}
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon.app{background:linear-gradient(145deg,#51d8ff,#2a66df)!important}

  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon svg{
    width:17px!important;
    height:17px!important;
    max-width:17px!important;
    max-height:17px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
  }
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon::before,
  html body .tw-side-nav.drawer .tw-side-group a .tw-side-icon::after{
    opacity:0!important;
  }

  html body .tw-side-nav.drawer .tw-side-label b{
    display:block!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:12px!important;
    line-height:1.12!important;
    font-weight:800!important;
    color:inherit!important;
  }
  html body .tw-side-nav.drawer .tw-side-label small{
    display:block!important;
    margin-top:2px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:8px!important;
    line-height:1.1!important;
    color:#9aa7a2!important;
    font-weight:600!important;
  }

  html body main,
  html body main.page,
  html body main.cat-page,
  html body .tw-page,
  html body .tw-main,
  html body .tw-content,
  html body .tw-home-main{
    margin-left:var(--tw-shared-side)!important;
    min-width:0!important;
    max-width:none!important;
  }
  html body main.page,
  html body main.cat-page{
    width:calc(100% - var(--tw-shared-side))!important;
  }
}


/* ===== v47 clearer personal-center shortcut ===== */
.tw-global-header[data-topwin-global-header] .tw-gh-account-center{
  border-color:#cfe6df !important;
  background:#f3fbf8 !important;
}
.tw-global-header[data-topwin-global-header] .tw-gh-account-center .tw-ui-img{
  width:17px !important;
  height:17px !important;
}
.tw-global-header[data-topwin-global-header] .tw-gh-account-center:hover{
  border-color:#9fd6c6 !important;
  background:#eaf8f3 !important;
}


/* ===== v55 remove duplicate account entry =====
   Keep one clear personal-center control in the header. */
.tw-global-header[data-topwin-global-header] .tw-global-actions{
  gap:8px !important;
}
.tw-global-header[data-topwin-global-header] .tw-gh-deposit + .tw-gh-account-center{
  margin-left:0 !important;
}


/* v86 responsive deposit label */
.tw-gh-deposit .tw-deposit-mobile{display:none}
.tw-gh-deposit .tw-deposit-desktop{display:inline}


/* ===== v87 mobile shell scroll-stability authority ===== */
@media(max-width:1099px){
  :root{
    --tw-mobile-fixed-header:56px;
    --tw-mobile-fixed-bottom:70px;
  }

  /* Header is viewport-anchored, not sticky inside whichever scroll context happens to be active. */
  html body .tw-global-header[data-topwin-global-header]{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100vw!important;
    height:var(--tw-mobile-fixed-header)!important;
    min-height:var(--tw-mobile-fixed-header)!important;
    margin:0!important;
    z-index:900!important;
    transform:none!important;
    will-change:auto!important;
  }

  /* Reserve the exact viewport space occupied by the fixed header. */
  html body{
    padding-top:var(--tw-mobile-fixed-header)!important;
    scroll-padding-top:calc(var(--tw-mobile-fixed-header) + 8px)!important;
  }

  /* In-page destinations must never land underneath the header. */
  html body [id]{
    scroll-margin-top:calc(var(--tw-mobile-fixed-header) + 8px);
  }

  /* Fixed bottom nav remains the only persistent bottom surface. */
  html body .tw-mobile-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:850!important;
    transform:none!important;
  }

  /* Account modal surfaces live BETWEEN persistent header and bottom nav. */
  html body .acct-panel{
    top:var(--tw-mobile-fixed-header)!important;
    bottom:calc(var(--tw-mobile-fixed-bottom) + env(safe-area-inset-bottom))!important;
    height:auto!important;
    max-height:none!important;
  }
}


/* ===== v90 universal mobile drawer backdrop ===== */
.tw-drawer-backdrop{
  display:none;
}

@media(max-width:1099px){
  .tw-drawer-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    background:rgba(17,39,33,.48)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:1001!important; /* drawer itself is 1002 */
    transition:opacity .18s ease,visibility .18s ease!important;
    cursor:default!important;
    touch-action:manipulation!important;
  }

  #drawer-toggle:checked~.tw-drawer-backdrop{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Sidebar stays above backdrop. */
  #drawer-toggle:checked~.tw-side-nav.drawer{
    z-index:1002!important;
  }
}


/* ===== v91 Bottom Nav must survive open drawer ===== */
@media(max-width:1099px){
  #drawer-toggle:checked~.tw-side-nav.drawer{
    bottom:calc(var(--tw-mobile-fixed-bottom,70px) + env(safe-area-inset-bottom))!important;
    height:auto!important;
  }

  #drawer-toggle:checked~.tw-drawer-backdrop{
    bottom:calc(var(--tw-mobile-fixed-bottom,70px) + env(safe-area-inset-bottom))!important;
    height:auto!important;
  }

  .tw-mobile-nav{
    z-index:1100!important;
  }
}


/* ===== v96 auth-safe header / VIP cleanup ===== */
.tw-global-header [hidden]{
  display:none!important;
}
.tw-global-header .tw-gh-vip{
  display:none!important;
}


/* ===== v97 drawer / Bottom Nav relationship ===== */
@media(max-width:1099px){

  #drawer-toggle:checked ~ .tw-side-nav.drawer{
    bottom:0!important;
    height:100dvh!important;
    z-index:1002!important;
  }

  #drawer-toggle:checked ~ .tw-drawer-backdrop{
    bottom:0!important;
    height:100dvh!important;
    z-index:1001!important;
  }

  /* Bottom Nav is hidden while drawer is open, restored on close. */
  #drawer-toggle:checked ~ .tw-mobile-nav,
  html.tw-drawer-open .tw-mobile-nav,
  body.tw-drawer-open .tw-mobile-nav{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(100%)!important;
  }
}


/* ===== v98 shared return-to-account control ===== */
.support-return-account,
.tw-page-return-account{
  min-height:34px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid #d8e8e2;
  border-radius:11px;
  background:#fff;
  color:#176b5b;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.support-return-account .tw-ui-img,
.tw-page-return-account .tw-ui-img{
  width:12px;
  height:12px;
}


/* ===== v100 return controls are mobile-only additions ===== */
@media(min-width:1100px){
  .support-return-account,
  .tw-page-return-account{
    display:none!important;
  }
}


/* ===== v101 desktop support header simplification ===== */
@media(min-width:1100px){
  #support .support-return-account{
    display:none!important;
  }
  #support .support-topline{
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }
  #support .support-close{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    margin-left:auto!important;
    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.12)!important;
    color:#fff!important;
    opacity:1!important;
    visibility:visible!important;
  }
  #support .support-close .tw-ui-img{
    width:16px!important;
    height:16px!important;
    filter:brightness(0) invert(1)!important;
  }
  #support .support-close:hover{
    background:rgba(255,255,255,.20)!important;
  }
}