/* =========================================================================
   FastWin 777 - two fixes, 28 Aug 2026
   =========================================================================
   Loaded after theme-3d.css. Nothing else is touched.

   Both reported problems have the same cause: theme-3d.css deliberately keeps
   these surfaces translucent so the page shows through them (line 1204: "the
   alpha is kept low enough that the blur behind the bar is actually visible").
   That is why the dark area under a selected tab looks like it only half
   covers, and why the balance block and the four history blocks let the
   background through.

   The colours below are the CURRENT translucent colours already composited
   over the page background, so nothing changes shade - the surfaces simply
   stop being see-through.

     rgba(20,46,88,.80) over #07111F  ->  #11284D
     rgba(13,32,64,.72) over #07111F  ->  #0B1C37
   ========================================================================= */

:root {
  /* One flat card colour. A gradient looked fine on a short card but a
     tall one (the promotion agency box) showed its dark end as a band
     across the bottom. */
  --fx-card:        #12294A;
  --fx-card-top:    #12294A;
  --fx-card-bottom: #12294A;
  --fx-nav:         #0B1524;
}


/* =========================================================================
   1. BOTTOM NAVIGATION - solid bar, and the selected tab sits inside it
   ========================================================================= */

.tabbar__container,
[class*="tabbar__container"]:not([class*="-item"]) {
  /* One opaque surface. The blur is pointless once nothing shows through,
     and dropping it also removes the containing-block risk that a
     backdrop-filter carries. */
  background: var(--fx-nav) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  border-top: 1px solid rgba(34, 211, 238, .22) !important;
  box-shadow: 0 -10px 26px -16px rgba(0, 0, 0, .95) !important;
}

/*
 * theme-3d.css lifts the selected tab with translateY(-3px), which pushes it
 * out of the bar and leaves its highlight looking clipped at the bottom.
 * Keeping it in place is what makes it sit correctly against the bottom edge.
 */
.tabbar__container .tabbar__container-item.active[class],
.tabbar__container .tabbar__container-item[class*="active"][class] {
  transform: none !important;
}


/* =========================================================================
   2. ACCOUNT PAGE BLOCKS - opaque, so the page no longer shows through
   -------------------------------------------------------------------------
   theme-3d.css carries a rule that blanks a card sitting inside another card
   so the glass does not stack:

       :is(<card list>) :is(<card list>):not(.active):not(...)...
           { background: transparent !important }

   Two :is() plus ten :not() put that near (0,12,0) specificity, which is why
   a plain class selector loses to it. Prefixing with #app scores (1,1,0) - an
   id outranks any number of classes - so these win without disturbing the
   nesting rule anywhere else.

   The class names come from the account page's own bundle
   (page-main-index.vue_vue_type_script_setup...js), not from guesswork:
     totalSavings__container   - balance block, Wallet/Deposit/Withdraw/VIP
     serviceCenter__container  - the four history blocks
     settingPanel__container   - Notification / Gifts / statistics / Language
     financialServices__container
   ========================================================================= */

#app .totalSavings__container,
#app .serviceCenter__container,
#app .settingPanel__container,
#app .financialServices__container,
#app .balanceAssets,
#app [class*="balanceAssets"] {
  background-color: var(--fx-card-bottom) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/*
 * The blocks sit on a page wrapper that is pulled upward (top: -2.18rem), so
 * anything transparent between them exposes the page behind. Giving the
 * wrapper the page colour means any gap reads as page, never as a see-through
 * hole in a card.
 */
#app .userinfo-content {
  background-color: transparent !important;
}


/* =========================================================================
   3. CHECKBOXES - the checked state has to look different
   -------------------------------------------------------------------------
   In Vant the visible box is the inner <i class="van-icon">, not the
   .van-checkbox__icon wrapper around it. Two rules in theme-3d.css break it
   there:

       .van-icon, .van-badge__wrapper, [class*="van-icon"]
           { background-color: transparent !important }   <- kills the fill
       .van-icon, [class*="icon"]:not([class*="hotIcon"])
           { color: var(--t-cyan) }                       <- shows the tick
                                                             while unchecked

   Together they made ticking a box change nothing on screen: verified on the
   login box, where clicking flips aria-checked false -> true and adds
   --checked while every computed colour stays the same.

   The checked selectors below carry an extra class so they outrank the
   unchecked ones outright rather than relying on source order.

   Covers "Remember me" on login, "I agree" on register and "No more reminders
   today" in the first-deposit popup - all the same Vant checkbox.
   ========================================================================= */

/* unchecked: empty box, tick present but invisible (how Vant expects it) */
#app .van-checkbox__icon .van-icon,
#app .van-checkbox__icon .van-badge__wrapper {
  background-color: transparent !important;
  border: 1px solid rgba(156, 175, 196, .6) !important;
  color: transparent !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

/* checked: filled box, dark tick on cyan */
#app .van-checkbox__icon--checked.van-checkbox__icon .van-icon,
#app .van-checkbox__icon--checked.van-checkbox__icon .van-badge__wrapper {
  background-color: #22D3EE !important;
  border-color: #22D3EE !important;
  color: #04121A !important;
  box-shadow: 0 0 10px rgba(34, 211, 238, .45) !important;
}

/* disabled reads as inert rather than as a dim tick */
#app .van-checkbox__icon--disabled.van-checkbox__icon .van-icon {
  background-color: rgba(255, 255, 255, .06) !important;
  border-color: rgba(156, 175, 196, .3) !important;
  color: rgba(156, 175, 196, .45) !important;
}

/* the wrapper itself must stay bare, or it draws a second box */
#app .van-checkbox__icon,
#app .van-checkbox__icon--round {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================================
   4. QUICK TRAY - the floating side icons collapse behind one button
   -------------------------------------------------------------------------
   .float is the app's own fixed stack (bottom:4rem; right:.4rem) holding the
   .float-entry shortcuts. Behaviour lives in ui-tray.js; this is only how it
   looks. Nothing is hidden unless the script is running, so the icons stay
   usable if it ever fails to load.
   ========================================================================= */

.float.qt-tray {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  bottom: 4rem;
  z-index: 1200 !important;
}
.float.qt-tray.qt-dragging { transition: none !important; }

/* collapsed: entries tuck behind the button */
.float.qt-tray .float-entry {
  opacity: 0 !important;
  transform: translateY(14px) scale(.55) !important;
  pointer-events: none !important;
  transition: opacity .2s cubic-bezier(.22,.8,.3,1),
              transform .24s cubic-bezier(.22,.8,.3,1) !important;
  margin-bottom: 0 !important;
}
.float.qt-tray.qt-open .float-entry {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
/* a short stagger so they fan out rather than appear all at once */
.float.qt-tray.qt-open .float-entry:nth-child(1) { transition-delay: .02s }
.float.qt-tray.qt-open .float-entry:nth-child(2) { transition-delay: .05s }
.float.qt-tray.qt-open .float-entry:nth-child(3) { transition-delay: .08s }
.float.qt-tray.qt-open .float-entry:nth-child(4) { transition-delay: .11s }
.float.qt-tray.qt-open .float-entry:nth-child(5) { transition-delay: .14s }

/* the button itself */
.float.qt-tray .qt-toggle {
  flex: none;
  width: 52px; height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* the Telegram disc, drawn to match the one supplied - the site only ships
     an orange square version and a grey outline, neither of which fits */
  background: url("/assets/png/tray-telegram.png") center/100% 100% no-repeat;
  box-shadow: 0 8px 20px -8px rgba(34,155,214,.85), 0 0 16px rgba(42,171,238,.28);
  cursor: pointer;
  position: relative;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.22,.8,.3,1), box-shadow .2s;
}
.float.qt-tray .qt-toggle:active { transform: scale(.92); }

/* four dots that rotate into a tighter cluster when open */
.float.qt-tray .qt-ico { display: none; }   /* the image carries the icon now */
.float.qt-tray .qt-toggle {
  transition: transform .2s cubic-bezier(.22,.8,.3,1), box-shadow .2s;
}
.float.qt-tray.qt-open .qt-toggle { transform: rotate(-12deg) scale(1.04); }
.float.qt-tray.qt-open .qt-toggle:active { transform: rotate(-12deg) scale(.94); }

/* how many shortcuts are tucked away */
.float.qt-tray .qt-count {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: #F4C65A;
  color: #241a02;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: opacity .18s;
}
.float.qt-tray.qt-open .qt-count { opacity: 0; }


/* =========================================================================
   5. PROMOTION PAGE - the agency box
   -------------------------------------------------------------------------
   .commission sets background-color: var(--bg_color_L2) on itself, but the
   theme paints .content (its parent, and a member of the card list) with a
   gradient that darkens toward 72% down. Wherever the box is transparent the
   bottom of that gradient shows through as a black band under the stats.
   Giving the box the same solid colour as every other card removes the band
   and matches the rest of the page.
   ========================================================================= */

#app .content .commission,
#app .commission,
#app .promote__cell {
  background-color: var(--fx-card-bottom) !important;
  background-image: none !important;
}

/* the two stat columns sit on the box, so they stay clear */
#app .commission__body,
#app .commission__body > div,
#app .commission__title {
  background-color: transparent !important;
  background-image: none !important;
}


/* =========================================================================
   6. QUICK TRAY - the four shortcut icons
   -------------------------------------------------------------------------
   Class names come from the home bundle: .reBenefit, .rewardCenter,
   .turntable-lottery and .big-turntable.

   Some entries are <img> and some are <div> that carry their picture as a
   background, so each icon is set BOTH ways. An earlier version cleared
   background-image on every entry, which replaced the img ones correctly and
   left the div ones blank - the button still there, just invisible.
   ========================================================================= */

.float.qt-tray .float-entry {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)) !important;
}

.float.qt-tray .reBenefit {
  content: url("/assets/png/tray-rebenefit.png") !important;
  background-image: url("/assets/png/tray-rebenefit.png") !important;
}
.float.qt-tray .rewardCenter {
  content: url("/assets/png/tray-reward.png") !important;
  background-image: url("/assets/png/tray-reward.png") !important;
}
.float.qt-tray .turntable-lottery {
  content: url("/assets/png/tray-wheel.png") !important;
  background-image: url("/assets/png/tray-wheel.png") !important;
}
.float.qt-tray .big-turntable {
  content: url("/assets/png/tray-bigwheel.png") !important;
  background-image: url("/assets/png/tray-bigwheel.png") !important;
}

/* any entry the four rules above do not name keeps whatever picture it had */


/* =========================================================================
   7. WITHDRAW PAGE
   -------------------------------------------------------------------------
   The blank account card was a data problem, not a styling one: the page
   binds walletName / mobileNO while getWithdrawals.php only ever set
   bankName / mobileNo, so both lines rendered empty. That is fixed in the API
   (aliases added, original keys kept). What is left here is the layout.

   Colours follow the popup system: #1C2533 cards, #0B1220 inputs,
   #49D5ED -> #249DB9 for the primary action.
   ========================================================================= */

/* ---- balance: one compact card ---------------------------------------
   The app fixes .balanceAssets at height:3.46667rem (~130px) while its
   content needs barely half that, so the card carried a large empty band
   down the middle. Height goes to auto and the two lines sit on their own
   rows, which is what actually makes it shorter.
   -------------------------------------------------------------------- */
#app .balanceAssets[class] {
  height: auto !important;
  min-height: 104px !important;
  background-image: none !important;
  background-color: #1C2533 !important;
  border: 1px solid rgba(73, 213, 237, .16) !important;
  border-radius: 18px !important;
  padding: 16px 118px 16px 16px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-content: center !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px 12px !important;
  text-align: left !important;
  position: relative !important;
}

/* theme-3d section 15 also forces flex-direction:column and
   justify-content:center, and [class*="balanceAssets"] catches the children
   too - which is why the wallet icon sat above the word "Balance" instead of
   beside it, and the whole card read as centred. Put both rows back on the
   horizontal axis. */
#app .balanceAssets__header[class],
#app .balanceAssets__header__left[class],
#app .balanceAssets__main[class] {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Flatten the inner wrappers.
   theme-3d.css matches [class*="balanceAssets"], which catches every CHILD as
   well as the card, and hands each one min-height:2.4rem (93.6px). The header
   and the tip block were therefore ~94px each on their own - that, not the
   card's own height, was what made this section tall. */
#app .balanceAssets [class*="balanceAssets"],
#app .balanceAssets > div,
#app .balanceAssets > div > div {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

#app .balanceAssets__header {
  height: auto !important;
  width: 100% !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}
#app .balanceAssets__header__left {
  justify-content: flex-start !important;
  color: #AAB4C3 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}
#app .balanceAssets__header__left img {
  width: 22px !important;
  height: 22px !important;
  margin-right: 8px !important;
}

#app .balanceAssets__main {
  height: auto !important;
  min-height: 0 !important;
  margin: 2px 0 0 !important;
  color: #F5F7FA !important;
  font-size: 29px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
#app .balanceAssets__main p {
  margin-left: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
#app .balanceAssets__main img { width: 20px !important; height: 14px !important; margin-left: 10px !important; }

/* the security note rides on the right rather than adding a row */
#app .balanceAssets[class]::after {
  content: "🛡️ 100% Secure";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(39, 214, 176, .12);
  border: 1px solid rgba(39, 214, 176, .28);
  color: #27D6B0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
/* the decorative corner art the theme pinned inside the card */
#app .balanceAssets__tip,
#app .balanceAssets__tip img { display: none !important; }

@media (max-width: 359px) {
  #app .balanceAssets[class] { padding-right: 16px !important; }
  #app .balanceAssets[class]::after {
    position: static;
    transform: none;
    margin-top: 8px;
  }
  #app .balanceAssets__main { font-size: 26px !important; }
}

/* ---- page rhythm ------------------------------------------------------ */
#app .balanceAssets[class] { margin-bottom: 20px !important; }
#app .van-tabs__nav--card { margin-bottom: 20px !important; }
#app .wC4Id { margin-bottom: 20px !important; }

/* ---- payment method cards -------------------------------------------- */
#app .van-tabs__nav--card { gap: 10px !important; padding: 0 !important; }
#app .van-tabs__nav--card .van-tab--card {
  height: auto !important;
  min-height: 74px !important;
  max-height: 130px !important;
  padding: 10px 6px !important;
  border-radius: 16px !important;
  background: #1C2533 !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  color: #AAB4C3 !important;
  transition: border-color .2s, background .2s, box-shadow .2s !important;
}
#app .van-tabs__nav--card .van-tab--card.van-tab--active {
  background: rgba(73, 213, 237, .10) !important;
  border-color: #28B6D1 !important;
  color: #F5F7FA !important;
  box-shadow: 0 0 0 1px rgba(40, 182, 209, .35), 0 6px 18px -10px rgba(40, 182, 209, .8) !important;
  position: relative;
}
/* a tick marks the choice, rather than colour alone */
#app .van-tabs__nav--card .van-tab--card.van-tab--active::after {
  content: "✓";   /* the literal glyph - a  13 escape parsed as one char */
  position: absolute;
  top: 6px; right: 8px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #28B6D1;
  color: #06232C;
  font-size: 11px;
  font-weight: 900;
  line-height: 17px;
  text-align: center;
}

/* ---- selected account card ------------------------------------------- */
#app .wC4Id {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 16px 46px 16px 16px !important;
  background: #1C2533 !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#app .wC4Id .title {
  color: #F5F7FA !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  height: auto !important;
  line-height: 1.35 !important;
  padding-left: .69333rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#app .wC4Id .name,
#app .wC4Id > div:not(.title):not(.right-icon) {
  color: #AAB4C3 !important;
  font-size: 13.5px !important;
  height: auto !important;
  line-height: 1.4 !important;
  margin-top: 0 !important;
  padding-left: .69333rem !important;
  letter-spacing: .3px !important;
  /* a long USDT address truncates instead of pushing the card sideways */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#app .wC4Id .right-icon { color: #AAB4C3 !important; }

/* "no account yet" keeps its own centred prompt */
#app .wC4Id.noUpi {
  display: block !important;
  color: #AAB4C3 !important;
  padding: 1.46667rem 0 .4rem !important;
  border-style: dashed !important;
  border-color: rgba(73, 213, 237, .28) !important;
}

/* ---- amount input ----------------------------------------------------- */
#app .Withdraw__content-paymoney {
  background: #1C2533 !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
  padding: 14px !important;
}
#app .Withdraw__content-paymoney__title {
  color: #F5F7FA !important;
  font-weight: 700 !important;
}
#app .WC4__C-input,
#app .Withdraw__content-paymoney .van-field,
#app .Withdraw__content-paymoney input {
  background: #0B1220 !important;
  border-radius: 14px !important;
  color: #F5F7FA !important;
}

/* ---- primary action --------------------------------------------------- */
#app .Withdraw__content-paymoney .van-button,
#app .WC4__C .van-button--primary,
#app .van-button--block.van-button--primary {
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #49D5ED, #249DB9) !important;
  color: #06232C !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 26px -12px rgba(40, 182, 209, .9) !important;
  transition: transform .12s cubic-bezier(.22,.8,.3,1), filter .18s !important;
}
#app .van-button--block.van-button--primary:active { transform: scale(.98) !important; }
/* a disabled button must not look tappable */
#app .van-button--primary.van-button--disabled,
#app .van-button--primary[disabled] {
  background: rgba(255, 255, 255, .07) !important;
  color: #6C7A8C !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ---- the fixed nav must not sit on top of the action ------------------ */
#app .Withdraw__container,
#app [class*="Withdraw__content"] {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* the fairness badge floats over the withdraw controls and means nothing
   here, so it is kept off this one page */
body:has(.wC4Id) .t-fairbadge { display: none !important; }

/* =========================================================================
   8. WinGo result popup - entrance, confetti, and a sound toggle
   -------------------------------------------------------------------------
   The popup itself is rendered by the prebuilt bundle (.WinningTip__C), so
   nothing here changes what it says or when it appears - only how it arrives.

   The card centres itself with `transform: translate(-50%) translateY(-50%)`.
   Every keyframe below repeats that translate; drop it from even one frame and
   the card jumps to the top-left corner mid-animation.
   ========================================================================= */

.WinningTip__C[class] { animation: fwTipFade .2s ease-out both; }
@keyframes fwTipFade { from { opacity: 0 } to { opacity: 1 } }

/* win: overshoots slightly, so it lands like a reward */
.WinningTip__C-body[class] { animation: fwTipPop .42s cubic-bezier(.2, 1.25, .4, 1) both; }
@keyframes fwTipPop {
  0%   { opacity: 0; transform: translate(-50%) translateY(-50%) scale(.72) }
  60%  { opacity: 1; transform: translate(-50%) translateY(-50%) scale(1.04) }
  100% { opacity: 1; transform: translate(-50%) translateY(-50%) scale(1) }
}

/* loss: same move without the bounce - a losing round should not feel playful */
.WinningTip__C.fw-tip-lose .WinningTip__C-body[class] { animation: fwTipSoft .34s ease-out both; }
@keyframes fwTipSoft {
  0%   { opacity: 0; transform: translate(-50%) translateY(-50%) scale(.92) }
  100% { opacity: 1; transform: translate(-50%) translateY(-50%) scale(1) }
}

/* The result chips (colour / number / big-small) land one after another.
   No [class] hook here: the outer two chips are plain <div>Red</div> with no
   class attribute at all, so [class] matched only the number. Animations win
   over normal declarations by origin, so the bare selector is enough. */
.WinningTip__C-body-l2 > div { animation: fwChip .28s ease-out both; }
.WinningTip__C-body-l2 > div:nth-child(1) { animation-delay: .18s }
.WinningTip__C-body-l2 > div:nth-child(2) { animation-delay: .26s }
.WinningTip__C-body-l2 > div:nth-child(3) { animation-delay: .34s }
@keyframes fwChip {
  from { opacity: 0; transform: translateY(7px) scale(.78) }
  to   { opacity: 1; transform: none }
}

/* the amount is the point of the popup, so it arrives last and largest */
.WinningTip__C-body-l3 .bonus[class] { animation: fwBonus .52s cubic-bezier(.2, 1.3, .4, 1) .34s both; }
@keyframes fwBonus {
  0%   { opacity: 0; transform: scale(.55) }
  70%  { opacity: 1; transform: scale(1.14) }
  100% { opacity: 1; transform: scale(1); text-shadow: 0 0 14px rgba(251, 91, 91, .55) }
}
.WinningTip__C.fw-tip-lose .WinningTip__C-body-l3 .isLose[class] {
  animation: fwLoseIn .34s ease-out .12s both;
}
@keyframes fwLoseIn { from { opacity: 0 } to { opacity: 1 } }

/* ---- confetti, win only ------------------------------------------------ */
.fw-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.fw-confetti i {
  position: absolute;
  top: -8%;
  width: 8px;
  height: 13px;
  opacity: 0;
  animation-name: fwFall;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
@keyframes fwFall {
  0%   { opacity: 0; top: -8% }
  12%  { opacity: 1 }
  85%  { opacity: 1 }
  100% { opacity: 0; top: 108% }
}

/* ---- sound toggle ------------------------------------------------------ */
.fw-snd {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  font-size: 16px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
.fw-snd:active { transform: scale(.9) }

@media (prefers-reduced-motion: reduce) {
  .WinningTip__C[class],
  .WinningTip__C-body[class],
  .WinningTip__C-body-l2 > div,
  .WinningTip__C-body-l3 .bonus[class] { animation: none !important }
  .fw-confetti { display: none }
}

/* =========================================================================
   9. Deposit page - spacing
   -------------------------------------------------------------------------
   Nothing here changes what the page does; only the rhythm between sections.

   Where the empty space actually came from (read off the route's own
   stylesheet, not guessed): every section is a `.boxStyle` card carrying
   margin-top .26667rem + padding .4/.42667rem + margin-bottom .4rem, and the
   items inside carry their own .26667rem bottom margin on top of that.
   Between the channel cards and "Deposit amount" that added up to ~63px of
   nothing. The fix is to put those existing values on one scale - no negative
   margins anywhere.

   Scale: 6 / 10 / 12 / 16 / 20px.
   ========================================================================= */

/* ---- page container ---------------------------------------------------- */
.Recharge__box[class] { padding-bottom: 92px !important; }   /* clears the tab bar */
.Recharge__box .Recharge__container[class] { padding: 0 16px 16px !important; }

/* ---- balance card -> payment methods ----------------------------------- */
.Recharge__container-tabcard[class] {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  grid-column-gap: 10px !important;
}
/* the logo block inside each method card carried its own 12px/5px margins */
.Recharge__container-tabcard__top[class] { margin: 10px auto 6px !important; }

/* ---- every section card: one rhythm ------------------------------------ */
.boxStyle[class] {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  padding: 12px !important;
}
/* quickInfo set its own .53333rem bottom margin on top of boxStyle's */
.Recharge__content-quickInfo[class] { margin-bottom: 0 !important; }

/* ---- headings sit 12px above their content ----------------------------- */
.Recharge__content-quickInfo__title[class],
.Recharge__content-paymoney__title[class] { margin-bottom: 10px !important; }

/* ---- channel cards ------------------------------------------------------ */
/* the row gap used to come from each item's own margin-bottom; the grid owns
   it now, so there is one value to change instead of two */
.Recharge__content-quickInfo .rechargeTypes_list[class] {
  grid-column-gap: 10px !important;
  grid-row-gap: 10px !important;
}
.Recharge__content-quickInfo__item[class] {
  margin-bottom: 0 !important;
  max-width: 100% !important;
}
.Recharge__content-quickInfo__item .other[class] { padding: 12px !important; }

/* ---- deposit amount grid ------------------------------------------------ */
/* the item width is computed from the gutter, so both have to move together:
   3 columns with two 10px gutters -> (100% - 20px) / 3 */
.Recharge__content-paymoney__money-list[class] { margin-bottom: 4px !important; }
.Recharge__content-paymoney__money-list__item[class] {
  width: calc((100% - 16px) / 3) !important;
  margin-right: 8px !important;
  margin-bottom: 8px !important;
  min-height: 52px !important;                 /* was 36-39px, under a usable touch target */
  padding: 6px 0 !important;
}
.Recharge__content-paymoney__money-list__item[class]:nth-child(3n) { margin-right: 0 !important; }

/* ---- custom amount input -> action ------------------------------------- */
.Recharge__content-fixed[class] { margin-top: 16px !important; margin-bottom: 16px !important; }
.Recharge__container-rechageBtn[class] { margin-bottom: 16px !important; }

/* On a 360px screen the two channel cards leave ~123px for their text, and
   "Balance:300 - 100K" needs about that much - so it wrapped to a second line
   and the cards grew from 93px to 108px, cancelling the space saved elsewhere.
   A little less padding on the narrowest phones keeps them on one line. */
@media (max-width: 375px) {
  .Recharge__content-quickInfo__item .other[class] { padding: 10px !important; }
  .Recharge__content-quickInfo .rechargeTypes_list[class] { grid-column-gap: 8px !important; }
}

/* =========================================================================
   10. Profile verification - account page card, form overlay, verified mark
   -------------------------------------------------------------------------
   Injected by assets/js/ui-verify.js. Everything is a new `fw-` class, so it
   cannot collide with the app's own rules; only .fw-vtick, .fw-vdot and
   .fw-uidcopy attach to elements the app already renders.

   Spacing scale: 8 / 12 / 16 / 20 / 24px.
   ========================================================================= */

/* ---- status card ------------------------------------------------------- */
.fw-verify {
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 16px;
  background: #13233A;
  border: 1px solid rgba(73, 213, 237, .16);
  color: #F5F7FA;
}
.fw-verify__head { display: flex; align-items: center; gap: 10px; }
.fw-verify__icon {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(73, 213, 237, .12);
  font-size: 15px; line-height: 1;
}
.fw-verify__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.fw-verify__body { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: #AAB4C3; }

.fw-verify__reason {
  margin-top: 12px; padding: 10px 12px;
  border-radius: 10px;
  background: rgba(249, 89, 89, .08);
  border: 1px solid rgba(249, 89, 89, .28);
}
.fw-verify__reason-k {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #F98A8A;
}
.fw-verify__reason-v { display: block; margin-top: 3px; font-size: 13px; color: #F5F7FA; }

.fw-verify__cta {
  margin-top: 14px;
  width: 100%; min-height: 46px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #49D5ED, #249DB9);
  color: #06232C; font-size: 14.5px; font-weight: 700;
}
.fw-verify__cta:active { transform: scale(.985); }

/* the states differ by accent only - a warning should not shout */
.fw-verify--pending  .fw-verify__icon { background: rgba(253, 172, 50, .14); color: #FDAC32; }
.fw-verify--approved .fw-verify__icon { background: rgba(39, 214, 176, .14); color: #27D6B0; }
.fw-verify--rejected .fw-verify__icon { background: rgba(249, 89, 89, .14); color: #F95959; font-weight: 800; }

/* ---- verified marks ---------------------------------------------------- */
/* the tick beside the username */
.fw-vtick {
  display: inline-block;
  width: 15px; height: 15px;
  margin-left: 5px;
  vertical-align: -2px;
  border-radius: 50%;
  background-color: #28B6D1;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.6 11.4 3.8 8.6l1.1-1.1 1.7 1.7 4.5-4.5 1.1 1.1z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
/* the small badge on the avatar */
.fw-vdot {
  position: absolute;
  /* on the edge of the avatar, not hanging off it - hanging off is what the
     wrapper's overflow was slicing in half */
  right: 0; bottom: 0;
  width: 19px; height: 19px;
  border-radius: 50%;
  background-color: #28B6D1;
  border: 2px solid #13233A;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.6 11.4 3.8 8.6l1.1-1.1 1.7 1.7 4.5-4.5 1.1 1.1z'/%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  pointer-events: none;
}

.fw-uidcopy {
  margin-left: 8px; padding: 2px 8px;
  border: 1px solid rgba(73, 213, 237, .32);
  border-radius: 999px;
  background: rgba(73, 213, 237, .10);
  color: #49D5ED;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  cursor: pointer;
}

/* ---- form overlay ------------------------------------------------------ */
body.fw-vlock { overflow: hidden; }

.fw-vmodal {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .66);
}
.fw-vsheet {
  width: 100%; max-width: 520px; max-height: 92vh;
  display: flex; flex-direction: column;
  border-radius: 20px 20px 0 0;
  background: #07111F;
  border: 1px solid rgba(73, 213, 237, .16);
  border-bottom: 0;
  color: #F5F7FA;
  animation: fwVUp .26s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes fwVUp { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }

.fw-vsheet__head {
  flex: none; display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.fw-vsheet__title { margin: 0; font-size: 17px; font-weight: 800; }
.fw-vsheet__sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #AAB4C3; }
.fw-vsheet__x {
  flex: none; margin-left: auto;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #AAB4C3; font-size: 20px; line-height: 30px; cursor: pointer;
}
.fw-vsheet__body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.fw-vsheet__foot {
  flex: none; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ---- benefits ---------------------------------------------------------- */
.fw-vben {
  padding: 14px 16px; margin-bottom: 20px;
  border-radius: 14px;
  background: #13233A;
  border: 1px solid rgba(73, 213, 237, .16);
}
.fw-vben__title {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #AAB4C3;
}
.fw-vben__list { margin: 0; padding: 0; list-style: none; }
.fw-vben__list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.5;
}
.fw-vben__list li + li { margin-top: 8px; }
.fw-vben__tick {
  flex: none; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%;
  background-color: rgba(39, 214, 176, .16);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2327D6B0' d='M6.6 11.4 3.8 8.6l1.1-1.1 1.7 1.7 4.5-4.5 1.1 1.1z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* ---- fields ------------------------------------------------------------ */
.fw-vstep { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.fw-vstep__n {
  font-size: 10px; font-weight: 800; letter-spacing: .09em;
  color: #49D5ED; text-transform: uppercase;
}
.fw-vstep__l { font-size: 14px; font-weight: 700; }

.fw-vinput {
  width: 100%; min-height: 46px; margin-bottom: 20px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  background: #13233A;
  color: #F5F7FA; font-size: 14px;
  -webkit-appearance: none; appearance: none;
}
.fw-vinput::placeholder { color: #6E7A8C; }
.fw-vinput:focus { outline: none; border-color: #28B6D1; }
.fw-vselect {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23AAB4C3' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 8px;
}
.fw-vinput option { background: #13233A; color: #F5F7FA; }

.fw-verr {
  margin: -14px 0 16px;
  font-size: 12.5px; line-height: 1.45; color: #F98A8A;
}

/* ---- upload ------------------------------------------------------------ */
.fw-vfile { margin-bottom: 12px; }
.fw-vfile__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fw-vfile__empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px;
  border: 1px dashed rgba(73, 213, 237, .30);
  border-radius: 14px;
  background: rgba(73, 213, 237, .04);
  cursor: pointer; text-align: center;
}
.fw-vfile__cam { font-size: 26px; line-height: 1; }
.fw-vfile__label { font-size: 14px; font-weight: 600; }
.fw-vfile__hint { font-size: 12px; color: #AAB4C3; }
.fw-vfile__btn {
  margin-top: 6px; padding: 8px 18px;
  border-radius: 999px;
  background: rgba(73, 213, 237, .14);
  border: 1px solid rgba(73, 213, 237, .34);
  color: #49D5ED; font-size: 13px; font-weight: 700;
}
.fw-vfile__filled { display: none; }
.fw-vfile.has-file .fw-vfile__empty { display: none; }
.fw-vfile.has-file .fw-vfile__filled { display: block; }
.fw-vfile__cap {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #AAB4C3;
}
.fw-vfile__preview {
  display: block; width: 100%; max-height: 210px;
  object-fit: contain;
  border-radius: 12px; background: #0B1220;
  border: 1px solid rgba(255, 255, 255, .08);
}
.fw-vfile__acts { display: flex; gap: 10px; margin-top: 10px; }
.fw-vfile__act {
  flex: 1; min-height: 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: transparent;
  color: #F5F7FA; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fw-vfile__act--danger { color: #F98A8A; border-color: rgba(249, 89, 89, .32); }
.fw-vfile__opt { margin: 6px 0 0; font-size: 11.5px; color: #6E7A8C; }

/* ---- declaration + submit ---------------------------------------------- */
.fw-vdec {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 8px 0 4px;
  font-size: 13px; line-height: 1.5; color: #AAB4C3;
}
.fw-vdec__box {
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: #28B6D1;
}
.fw-vsubmit {
  width: 100%; min-height: 50px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #49D5ED, #249DB9);
  color: #06232C; font-size: 15px; font-weight: 800;
}
.fw-vsubmit:disabled { opacity: .6; cursor: default; }

/* ---- submitted --------------------------------------------------------- */
.fw-vok { padding: 34px 22px calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.fw-vok__tick {
  width: 58px; height: 58px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(39, 214, 176, .14);
  border: 1px solid rgba(39, 214, 176, .34);
  color: #27D6B0; font-size: 27px; font-weight: 800;
}
.fw-vok__title { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.fw-vok__body { margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; color: #AAB4C3; }

@media (prefers-reduced-motion: reduce) { .fw-vsheet { animation: none } }

/* =========================================================================
   11. Account page - section order
   -------------------------------------------------------------------------
   The brief's order is:

     header -> profile card -> verification -> balance -> quick access
     -> activity -> more / settings

   `.userinfo-content` is the account page's own wrapper and has no CSS of its
   own; its children are the balance, financial-services, setting-panel and
   service-centre components. Turning it into a flex column lets `order` pin
   the sequence no matter what order a future build emits them in.

   The containers carry no vertical margins of their own (checked in
   page-main-index...-d9204ab3.css), so a single `gap` is the only spacing and
   nothing collapses differently than it did as a block.

   ui-verify.js sets the same order values on the DIRECT children, because a
   component's root element does not always carry the container class itself.
   ========================================================================= */
.userinfo-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* keep the single gap authoritative */
.userinfo-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.userinfo-content .fw-verify { margin-bottom: 0 !important; }

/* 1 verification, 2 balance, 3 quick access + activity, 4 more, 5 service centre */
.userinfo-content > .fw-verify            { order: 1; }
.userinfo-content .totalSavings__container       { order: 2; }
.userinfo-content .financialServices__container  { order: 3; }
.userinfo-content .settingPanel__container       { order: 4; }
.userinfo-content .serviceCenter__container      { order: 5; }

/* =========================================================================
   12. Account page - verified identity, profile photo, compaction
   -------------------------------------------------------------------------
   An approved profile no longer gets a verification card. Everything that card
   said now sits in one line under the header, which is where most of the
   vertical space on this page was going.
   ========================================================================= */

/* ---- verified name, on its own line under the username ----------------- */
.fw-ident {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 3px 0 2px;
  font-size: 13.5px;
  line-height: 1.3;
}
/* the tick leads the line, so it reads as "verified: this name" */
.fw-ident__tick { margin-left: 0 !important; flex: none; }
.fw-ident__name {
  min-width: 0;
  color: #F5F7FA;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fw-ident__lock {
  flex: none;
  width: 11px; height: 13px;
  opacity: .6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath fill='none' stroke='%23AAB4C3' stroke-width='1.6' d='M4 7V4.5a3 3 0 1 1 6 0V7'/%3E%3Crect x='2' y='7' width='10' height='7.5' rx='1.5' fill='%23AAB4C3'/%3E%3C/svg%3E");
}

/* ---- camera button on the avatar --------------------------------------- */
.fw-photo-btn {
  position: absolute;
  right: 0; top: 0;
  width: 24px; height: 24px;
  padding: 0;
  border: 2px solid #13233A;
  border-radius: 50%;
  background-color: #28B6D1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath fill='%23ffffff' d='M7.5 0 6 2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-4l-1.5-2zM10 5.5A5 5 0 1 1 10 15a5 5 0 0 1 0-9.5m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6'/%3E%3C/svg%3E");
  cursor: pointer;
  z-index: 3;
}
.fw-photo-btn:active { transform: scale(.9); }

/* ---- photo sheet -------------------------------------------------------- */
.fw-vsheet--photo .fw-vsheet__body { text-align: center; }
.fw-photo-stage { margin: 4px 0 18px; }
.fw-photo-preview {
  width: 152px; height: 152px;
  border-radius: 50%;
  object-fit: cover;
  background: #13233A;
  border: 1px solid rgba(73, 213, 237, .22);
}
.fw-photo-choose {
  display: block;
  min-height: 46px; line-height: 44px;
  border-radius: 12px;
  background: rgba(73, 213, 237, .12);
  border: 1px solid rgba(73, 213, 237, .34);
  color: #49D5ED;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.fw-photo-note {
  margin: 12px 0 0;
  font-size: 11.5px; line-height: 1.5; color: #6E7A8C;
}
.fw-photo-foot { display: flex; gap: 10px; align-items: center; }
.fw-photo-foot .fw-vfile__act { flex: 0 0 auto; min-height: 50px; padding: 0 16px; }
.fw-photo-foot .fw-vsubmit { flex: 1 1 auto; }

/* ---- compaction --------------------------------------------------------- */

/* The fairness badge is fixed to the viewport and floats over whatever is
   under it - here that is the notification row. It already had to be hidden on
   the withdraw page for the same reason; the account page is the other one. */
body:has(.userinfo-content) .t-fairbadge { display: none !important; }

/* the balance card: keep it inside the requested envelope without a fixed
   height, so it still grows if the wallet row wraps on a narrow screen */
.userinfo-content .totalSavings__container {
  padding: 14px 16px !important;
}
.userinfo-content .totalSavings__container-header { margin-bottom: 4px !important; }

/* Activity tiles: the titles were wrapping onto a second line and pushing the
   tiles taller than each other. Tightened type and padding so both lines fit
   at 360px, with the subtitle allowed to ellipsize rather than wrap. */
.userinfo-content .financialServices__container-box {
  padding: 12px !important;
}
.userinfo-content .financialServices__container-box-para {
  min-width: 0 !important;
}
.userinfo-content .financialServices__container-box-para > *:first-child {
  font-size: 13.5px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.userinfo-content .financialServices__container-box-para > *:last-child {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- verification bonus receipt, one compact line ---------------------- */
.fw-vbonus {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(39, 214, 176, .08);
  border: 1px solid rgba(39, 214, 176, .28);
  font-size: 12.5px;
  line-height: 1.3;
}
.fw-vbonus__icon { flex: none; font-size: 14px; }
.fw-vbonus__label { color: #C9D2DE; }
.fw-vbonus__amt {
  margin-left: auto;
  flex: none;
  color: #27D6B0;
  font-weight: 700;
  white-space: nowrap;
}

/* the menu rows were taller than their content needed */
.userinfo-content .settingPanel__container { padding: 4px 12px !important; }
.userinfo-content .serviceCenter__container { padding: 14px 12px !important; }