/* Unified product palette --------------------------------------------------
   This file is intentionally loaded after every feature stylesheet. It only
   owns colour, elevation and focus treatment; existing layout and trading
   behaviour remain untouched. */
:root,
:root[data-theme="light"] {
  --app-bg: #f6f8fb;
  --app-surface: #ffffff;
  --app-surface-2: #f0f3f7;
  --app-surface-3: #e8edf3;
  --app-elevated: #ffffff;
  --app-text: #111827;
  --app-text-2: #4b5563;
  /* Secondary microcopy is deliberately darker than a typical neutral-500.
     At the smallest sizes used by the mobile UI it keeps a >= 4.5:1 ratio
     on both the white and the #f6f8fb application surfaces. */
  --app-text-3: #647083;
  --app-border: #e1e6ed;
  --app-border-strong: #cfd6df;
  --app-blue: #1769ff;
  --app-blue-soft: rgba(23, 105, 255, .10);
  /* Accessible semantic text colours for the light palette.  The chart and
     order-book palettes are isolated, so this does not flatten their more
     vivid trading signal colours. */
  --app-green: #087a5b;
  --app-red: #c4374c;
  --app-overlay: rgba(17, 24, 39, .38);
  --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
  --app-shadow-lg: 0 20px 52px rgba(15, 23, 42, .15);

  --bg: var(--app-bg);
  --bg-primary: var(--app-bg);
  --bg-secondary: var(--app-surface-2);
  --bg-card: var(--app-surface);
  --panel: rgba(15, 23, 42, .035);
  --panel-2: rgba(15, 23, 42, .065);
  --text: var(--app-text);
  --text-primary: var(--app-text);
  --text-secondary: var(--app-text-2);
  --text-tertiary: var(--app-text-3);
  --text-muted: var(--app-text-3);
  --muted: var(--app-text-3);
  --border: var(--app-border);
  --border-color: var(--app-border);
  --shadow: var(--app-shadow-sm);
  --green: var(--app-green);
  --red: var(--app-red);
  --blue: var(--app-blue);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --app-bg: #080b10;
  --app-surface: #0e131b;
  --app-surface-2: #131a24;
  --app-surface-3: #192230;
  --app-elevated: #171f2b;
  --app-text: #f4f7fb;
  --app-text-2: #b8c1ce;
  --app-text-3: #828d9d;
  --app-border: #222c39;
  --app-border-strong: #303c4b;
  --app-blue: #2f75ff;
  --app-blue-soft: rgba(47, 117, 255, .16);
  --app-green: #15c995;
  --app-red: #ff5b6d;
  --app-overlay: rgba(0, 0, 0, .68);
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .22), 0 8px 24px rgba(0, 0, 0, .20);
  --app-shadow-lg: 0 24px 64px rgba(0, 0, 0, .48);

  --bg: var(--app-bg);
  --bg-primary: var(--app-bg);
  --bg-secondary: var(--app-surface-2);
  --bg-card: var(--app-surface);
  --panel: rgba(255, 255, 255, .055);
  --panel-2: rgba(255, 255, 255, .09);
  --text: var(--app-text);
  --text-primary: var(--app-text);
  --text-secondary: var(--app-text-2);
  --text-tertiary: var(--app-text-3);
  --text-muted: var(--app-text-3);
  --muted: var(--app-text-3);
  --border: var(--app-border);
  --border-color: var(--app-border);
  --shadow: var(--app-shadow-sm);
  --green: var(--app-green);
  --red: var(--app-red);
  --blue: var(--app-blue);
  color-scheme: dark;
}

html,
body,
#root {
  background: var(--app-bg) !important;
  color: var(--app-text);
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
.exScreen,
.exContent,
.exPageAnim,
.exPage,
.exBottomNav,
.bxCampaignMenuDrawer,
.bxLegalSheet,
.profileAvatarDialog,
.welfareModalSheet {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

input,
select,
textarea {
  caret-color: var(--app-blue);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  /* Solid fallback first for WebViews which do not implement color-mix(). */
  outline: 2px solid var(--app-blue);
  outline-offset: 2px;
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline-color: color-mix(in srgb, var(--app-blue) 82%, white 18%);
  }
}

::selection { color: #fff; background: var(--app-blue); }

/* Shared application chrome. */
:root[data-theme="light"] .exScreen,
:root[data-theme="light"] .exContent,
:root[data-theme="light"] .exPageAnim,
:root[data-theme="light"] .exPage {
  background-color: var(--app-bg) !important;
  color: var(--app-text);
}

:root[data-theme="dark"] .exScreen,
:root[data-theme="dark"] .exContent,
:root[data-theme="dark"] .exPageAnim,
:root[data-theme="dark"] .exPage {
  background-color: var(--app-bg) !important;
  color: var(--app-text);
}

.exBottomNav.bingxBottomNav {
  background: var(--app-bg) !important;
  border-top-color: var(--app-border) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .04);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:root[data-theme="light"] .bingxBottomNav .exBottomTab { color: #697586; }
:root[data-theme="light"] .bingxBottomNav .exBottomTabActive { color: var(--app-blue); }

:root[data-theme="light"] .exScreen:has(.bingxLoggedHome),
:root[data-theme="light"] .exContent:has(.bingxLoggedHome),
:root[data-theme="light"] .bingxLoggedHome,
:root[data-theme="light"] .bingxLoggedHomeFrame,
:root[data-theme="light"] .mofangGuestHome,
:root[data-theme="light"] .mofangGuestHome iframe {
  background: var(--app-bg) !important;
}

/* Canonical navigation drawer and mode selector. */
.bxCampaignMenuOverlay { background: var(--app-overlay); }
.bxCampaignMenuDrawer {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  box-shadow: -18px 0 54px rgba(0, 0, 0, .26);
}
.bxCampaignMenuHeader,
.bxCampaignMenuDivider { border-color: var(--app-border) !important; }
.bxCampaignMenuDivider { background: var(--app-border) !important; }
.bxCampaignMenuList > button,
.bingxMenuThemeRow,
.bxCampaignInstallHint { color: var(--app-text) !important; }
.bxCampaignMenuList > button .material-icons-round { color: var(--app-text-3) !important; }
.bxCampaignBrand,
.bxCampaignBrand b,
.bingxHomeSupportButton,
.bxCampaignMenuClose { color: var(--app-text) !important; }
:root[data-theme="light"] .bxCampaignMenuLogo {
  filter: invert(1) brightness(.22) saturate(0);
}
:root[data-theme="dark"] .bxCampaignMenuLogo { filter: none; }
.bingxMenuThemeSwitch {
  border-color: var(--app-border-strong) !important;
  background: var(--app-surface-2) !important;
}
.bingxMenuThemeSwitch .bingxThemeOption + .bingxThemeOption { border-left-color: var(--app-border) !important; }
.bingxMenuThemeSwitch:not(.active) .bingxThemeSun,
.bingxMenuThemeSwitch.active .bingxThemeMoon {
  color: var(--app-text) !important;
  background: var(--app-elevated) !important;
  box-shadow: var(--app-shadow-sm);
}
.bxCampaignLanguageGrid button {
  color: var(--app-text-2) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
.bxCampaignLanguageGrid button.active {
  color: var(--app-text) !important;
  border-color: var(--app-blue) !important;
  background: var(--app-blue-soft) !important;
}

/* Market catalogue. */
:root[data-theme="light"] .exScreen:has(.bxmMarketPage),
:root[data-theme="light"] .exContent:has(.bxmMarketPage),
:root[data-theme="light"] .bxmMarketPage,
:root[data-theme="light"] .bxmHeader {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .bxmHeader { border-bottom-color: var(--app-border) !important; }
:root[data-theme="light"] .bxmLogo,
:root[data-theme="light"] .bxmIconButton,
:root[data-theme="light"] .bxmMenuButton { color: var(--app-text) !important; }
:root[data-theme="light"] .bxmTargetPrimary,
:root[data-theme="light"] .bxmModeTabs,
:root[data-theme="light"] .bxmGenericCategories,
:root[data-theme="light"] .bxmTableHead { border-color: var(--app-border) !important; }
:root[data-theme="light"] .bxmTargetPrimary button,
:root[data-theme="light"] .bxmGenericCategories button,
:root[data-theme="light"] .bxmTableHead { color: var(--app-text-3) !important; }
:root[data-theme="light"] .bxmTargetPrimary button.active,
:root[data-theme="light"] .bxmGenericCategories button.active { color: var(--app-text) !important; }
:root[data-theme="light"] .bxUnifiedMarkets .bxmModeTabs button.active {
  color: var(--app-text) !important;
  background: var(--app-surface-3) !important;
}
:root[data-theme="light"] .bxmMarketRow { border-color: var(--app-border) !important; }
:root[data-theme="light"] .bxmMarketRow:active { background: var(--app-surface-2) !important; }
:root[data-theme="light"] .bxmSymbol,
:root[data-theme="light"] .bxmPrice { color: var(--app-text) !important; }

/* Support and generic feature sheets. */
:root[data-theme="light"] .exPageAnim:has(.bxSupportPage),
:root[data-theme="light"] .bxSupportPage {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .bxSupportPage .bxUnifiedBack {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
  box-shadow: var(--app-shadow-sm);
}
:root[data-theme="light"] .bxSupportPage .exPageTitle,
:root[data-theme="light"] .bxSupportGreeting { color: var(--app-text) !important; }
:root[data-theme="light"] .bxSupportHours { color: var(--app-text-3) !important; }

.bxUnifiedBack {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex-basis: 40px !important;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  border-radius: 12px !important;
  background: var(--app-surface) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 22px rgba(15, 23, 42, .07) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: transform 140ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}
.bxUnifiedBack:hover {
  color: var(--app-text) !important;
  border-color: var(--app-border-strong) !important;
  background: var(--app-surface-2) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .07), 0 10px 26px rgba(15, 23, 42, .10) !important;
  transform: translateY(-1px);
}
.bxUnifiedBack:active {
  background: var(--app-surface-3) !important;
  transform: scale(.96) !important;
}
.bxUnifiedBackIcon {
  width: 18px !important;
  height: 18px !important;
}
:root[data-theme="light"] .bxUnifiedBackIcon {
  /* The source SVG has a fixed white stroke. */
  filter: invert(1) brightness(.22) saturate(0) !important;
}

/* Rewards / welfare -- the light-mode patch layer that used to live here
   was removed: styles.css now styles the welfare centre from --app-* tokens,
   so one set of rules covers both themes and there is nothing to override. */

/* Profile / account center. */
.bxRewardsProfilePage,
.profileAvatarOverlay,
.profileAvatarDialog {
  --profile-avatar-bg: #191e27;
  --profile-avatar-ink: #e7ebf2;
  --profile-avatar-soft: #667085;
  --profile-avatar-accent: #3b78ff;
}
.bxRewardsProfileIdentity .profileAvatarEditBadge {
  right: -1px !important;
  bottom: -1px !important;
  width: 17px !important;
  height: 17px !important;
  border: 1px solid #343b47 !important;
  border-radius: 50% !important;
  color: #aeb6c3 !important;
  background: rgba(27, 32, 40, .94) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22) !important;
}
.bxRewardsProfileIdentity .profileAvatarEditBadge svg {
  width: 10px !important;
  height: 10px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.45 !important;
}
.bxRewardsProfileIdentity .profileAvatarEditBadge svg path {
  fill: none !important;
  stroke: currentColor !important;
}
:root[data-theme="light"] .exScreen:has(.bxRewardsProfilePage),
:root[data-theme="light"] .exContent:has(.bxRewardsProfilePage),
:root[data-theme="light"] .exPageAnim:has(.bxRewardsProfilePage),
:root[data-theme="light"] .bxRewardsProfilePage,
:root[data-theme="light"] .profileAvatarOverlay,
:root[data-theme="light"] .profileAvatarDialog {
  --profile-avatar-bg: #f1f4f8;
  --profile-avatar-ink: #344054;
  --profile-avatar-soft: #dce5f2;
  --profile-avatar-accent: #246bfd;
}
:root[data-theme="light"] .bxRewardsProfilePage {
  color: var(--app-text) !important;
  background: linear-gradient(180deg, #f7f9fc 0, #f3f6fa 210px, var(--app-bg) 100%) !important;
}
:root[data-theme="light"] .bxRewardsProfileIdentity .profileAvatarEditBadge {
  color: #667085 !important;
  border-color: #dce3ec !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .11) !important;
}
:root[data-theme="light"] .bxRewardsProfilePage::before { opacity: .08; }
:root[data-theme="light"] .bxRewardsProfileTopActions button,
:root[data-theme="light"] .bxRewardsProfileIdentityText strong,
:root[data-theme="light"] .bxRewardsProfileMenu button { color: var(--app-text) !important; }
:root[data-theme="light"] .bxRewardsProfileTopActions .bxProfileTopAsset {
  /* These three production assets contain a fixed white fill. */
  filter: invert(1) brightness(.35) saturate(0) !important;
  opacity: .82 !important;
}
:root[data-theme="light"] .bxRewardsProfileIdentityText span,
:root[data-theme="light"] .bxRewardsProfileMenu .material-icons-round { color: var(--app-text-3) !important; }
:root[data-theme="light"] .bxRewardsProfileMenu,
:root[data-theme="light"] .bxRewardsProfileLogout {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm);
}
:root[data-theme="light"] .bxRewardsProfileTopbar .bxUnifiedBack {
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm) !important;
}
:root[data-theme="light"] .bxRewardsProfileMenu > div > .material-icons-round:first-child,
:root[data-theme="light"] .bxRewardsProfileMenu > div > span:nth-child(2) {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxRewardsProfileMenu > div > .material-icons-round:last-child {
  color: var(--app-text-3) !important;
}
.bxRewardsProfileLogout {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.bxRewardsProfileLogout button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 50px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,91,109,.18) !important;
  border-bottom: 1px solid rgba(255,91,109,.18) !important;
  border-radius: 0 !important;
  color: #ff7385 !important;
  background: rgba(255,91,109,.10) !important;
  font-weight: 600 !important;
}
.bxProfileLogoutIcon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root[data-theme="light"] .bxRewardsProfileLogout button {
  color: #d9485d !important;
  border-color: #f3d3d9 !important;
  background: #fff1f3 !important;
}

/* Avatar, legal, bank and generic modals. */
.profileAvatarOverlay,
.welfareModalMask,
.bxLegalOverlay,
.exCreditHelpOverlay { background: var(--app-overlay) !important; }
.profileAvatarDialog,
.welfareModalSheet,
.bxLegalSheet,
.exCreditHelpModal,
.exModalSheet,
.optModal {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-elevated) !important;
  box-shadow: var(--app-shadow-lg) !important;
}
.profileAvatarDialog h2,
.welfareModalSheet h3,
.bxLegalHeader h2,
.exCreditHelpHeader span,
.exCreditHelpTitle { color: var(--app-text) !important; }
.exCreditHelpBody p,
.exCreditHelpBody li { color: var(--app-text-2) !important; }
.bxLegalHeader,
.exCreditHelpHeader { border-color: var(--app-border) !important; }
.bxLegalHeader span,
.bxLegalBody p { color: var(--app-text-2) !important; }
.bxLegalBody h3 { color: var(--app-text) !important; }
.bxLegalHeader button {
  color: var(--app-text) !important;
  background: var(--app-surface-2) !important;
}
.bxLegalHandle { background: var(--app-border-strong) !important; }
.bxLegalBodyFrame,
.bxLegalBodyFrame iframe,
.bxLegalFooter {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-elevated) !important;
}

:root[data-theme="light"] .profileAvatarDialog > header button {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .profileAvatarPreview,
:root[data-theme="light"] .profileAvatarChoices > button {
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .profileAvatarChoices > .profileAvatarUpload {
  color: var(--app-text-2) !important;
  border-color: var(--app-border-strong) !important;
  background: var(--app-surface) !important;
}

:root[data-theme="light"] .welfareModalSheet [style*="var(--text-primary)"] {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .welfareModalSheet [style*="var(--text-secondary)"],
:root[data-theme="light"] .welfareModalSheet [style*="var(--text-muted)"] {
  color: var(--app-text-2) !important;
}
:root[data-theme="light"] .welfareModalSheet [style*="var(--bg-card)"] {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
}
:root[data-theme="light"] .welfareModalSheet [style*="var(--bg-secondary)"],
:root[data-theme="light"] .welfareModalClose {
  color: var(--app-text-2) !important;
  background: var(--app-surface-2) !important;
}

/* Deposit / withdrawal. */
:root[data-theme="light"] .exScreen:has(.bxDepositPremium),
:root[data-theme="light"] .exContent:has(.bxDepositPremium),
:root[data-theme="light"] .exPageAnim:has(.bxDepositPremium),
:root[data-theme="light"] .exPage:has(.bxDepositPremium),
:root[data-theme="light"] .exPageAnim:has(.bxCashoutPage),
:root[data-theme="light"] .bxCashoutPage {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .bxCashoutPage,
:root[data-theme="light"] .bxCashoutPage .exPageTop,
:root[data-theme="light"] .bxCashoutPage .exPageBody,
:root[data-theme="light"] .bxCashoutPremium {
  --bg-card: var(--app-surface);
  --bg-secondary: var(--app-surface-2);
  --text-primary: var(--app-text);
  --text-secondary: var(--app-text-2);
  --text-muted: var(--app-text-3);
  --border-color: var(--app-border);
  --shadow: var(--app-shadow-sm);
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .exScreen:has(.bxCashoutPage),
:root[data-theme="light"] .exContent:has(.bxCashoutPage),
:root[data-theme="light"] .exPageAnim:has(.bxCashoutPage) {
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .exPage:has(.bxDepositPremium) .exPageTitle,
:root[data-theme="light"] .bxCashoutPage .exPageTitle,
:root[data-theme="light"] .bxDepositCard h2,
:root[data-theme="light"] .bxDepositRecords h3,
:root[data-theme="light"] .bxCashoutRecords h3 { color: var(--app-text) !important; }
:root[data-theme="light"] .bxDepositPremium {
  --bg-card: var(--app-surface);
  --bg-secondary: var(--app-surface-2);
  --border-color: var(--app-border);
  --text-primary: var(--app-text);
  --text-secondary: var(--app-text-2);
  --text-muted: var(--app-text-3);
}
:root[data-theme="light"] .bxDepositHero,
:root[data-theme="light"] .bxDepositCard,
:root[data-theme="light"] .bxCashoutAmountSection,
:root[data-theme="light"] .bxCashoutSecuritySection,
:root[data-theme="light"] .bxCashoutRecords {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm) !important;
}

/* Recent deposits reads as a plain list, not a panel: no surface, no border,
   no shadow in either theme.  It sits directly on the page like the rest of
   the section content. */
.bxDepositRecords {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The deposit artwork is decorative, not a card.  Let its transparent canvas
   dissolve into the page instead of showing a second white panel. */
:root[data-theme="light"] .bxDepositHero {
  height: 166px !important;
  margin: -6px 0 10px !important;
  border-color: transparent !important;
  background: radial-gradient(
    ellipse 58% 46% at 50% 52%,
    rgba(36, 107, 253, 0.10) 0%,
    rgba(36, 107, 253, 0.04) 46%,
    rgba(36, 107, 253, 0) 78%
  ) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .bxDepositHero img {
  width: 286px !important;
  content: url("/assets/bingx-deposit/deposit-overview-illustration-light.svg") !important;
  opacity: 1;
  filter: none !important;
}

/* Use the same borderless illustration system in dark mode.  The former
   black PNG on a pure-black panel read as one large opaque block; the shared
   light-blue vector keeps the artwork legible while a soft brand glow adapts
   it to the dark canvas. */
:root[data-theme="dark"] .bxDepositHero {
  height: 166px !important;
  margin: -6px 0 10px !important;
  border-color: transparent !important;
  background: radial-gradient(
    ellipse 58% 48% at 50% 53%,
    rgba(47, 117, 255, 0.22) 0%,
    rgba(47, 117, 255, 0.08) 46%,
    rgba(47, 117, 255, 0) 80%
  ) !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .bxDepositHero img {
  width: 286px !important;
  content: url("/assets/bingx-deposit/deposit-overview-illustration-light.svg") !important;
  opacity: 0.94;
  filter:
    brightness(0.92)
    saturate(1.06)
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.24)) !important;
}
:root[data-theme="light"] .bxDepositTabs,
:root[data-theme="light"] .bxCashoutTabs { border-color: var(--app-border) !important; background: var(--app-surface-2) !important; }
:root[data-theme="light"] .bxDepositTabIndicator,
:root[data-theme="light"] .bxCashoutTabIndicator { background: var(--app-surface) !important; box-shadow: var(--app-shadow-sm) !important; }
:root[data-theme="light"] .bxDepositTab.active,
:root[data-theme="light"] .bxCashoutTab.isActive { color: var(--app-text) !important; }
:root[data-theme="light"] .bxDepositInput,
:root[data-theme="light"] .bxCashoutSecuritySection input {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxDepositNetwork { border-color: var(--app-border) !important; background: var(--app-surface) !important; }
:root[data-theme="light"] .bxCashoutNetwork {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
:root[data-theme="light"] .bxCashoutPage .exPageTitle,
:root[data-theme="light"] .bxCashoutAccountSection > div:first-child label,
:root[data-theme="light"] .bxCashoutAmountSection label,
:root[data-theme="light"] .bxCashoutSecuritySection label,
:root[data-theme="light"] .bxCashoutRecords h3 {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxCashoutAccountSection > div:first-child button {
  color: var(--app-blue) !important;
}
:root[data-theme="light"] .bxCashoutAmountSection > div:nth-child(2),
:root[data-theme="light"] .bxCashoutSecuritySection > div > input {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxCashoutAmountSection > div:nth-child(3) > div:last-child span:last-child {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxCashoutBankFlow > p:last-child,
:root[data-theme="light"] .bxCashoutRecords > div > div {
  color: var(--app-text-3) !important;
  border-color: var(--app-border) !important;
}
:root[data-theme="light"] .bxCashoutSubmitReceipt {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
:root[data-theme="light"] .bxCashoutSubmitReceipt .exDepTitle,
:root[data-theme="light"] .bxCashoutSubmitReceipt .exDepKv strong {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxCashoutSubmitReceipt .exDepKv span {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .bxCashoutSubmitReceipt .exDepMiniBtn {
  color: var(--app-text-2) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxDepositNetwork:not(.active) > span:first-of-type,
:root[data-theme="light"] .bxCashoutNetwork:not(.active) > span:first-of-type {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxDepositNetwork:not(.active) > span:nth-of-type(2),
:root[data-theme="light"] .bxCashoutNetwork:not(.active) > span:nth-of-type(2) {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .bxDepositSubmitted {
  color: var(--app-green) !important;
  border-color: rgba(8, 122, 91, .20) !important;
  background: rgba(8, 122, 91, .07) !important;
}
:root[data-theme="light"] .bxDepositSubmitted > div:first-child {
  color: var(--app-green) !important;
}

/* The legacy deposit/withdraw tabs ship with an inline white indicator and
   fixed slate labels.  They must also remain legible when the selected mode
   changes without remounting the React route. */
:root[data-theme="dark"] .bxDepositTabIndicator,
:root[data-theme="dark"] .bxCashoutTabIndicator {
  border-color: var(--app-border) !important;
  background: var(--app-surface-3) !important;
  box-shadow: var(--app-shadow-sm) !important;
}
:root[data-theme="dark"] .bxDepositTab:not(.active),
:root[data-theme="dark"] .bxCashoutTab:not(.isActive) {
  color: var(--app-text-3) !important;
}
:root[data-theme="dark"] .bxDepositNetwork:not(.active) > span:first-of-type,
:root[data-theme="dark"] .bxCashoutNetwork:not(.active) > span:first-of-type {
  color: var(--app-text) !important;
}
:root[data-theme="dark"] .bxDepositNetwork:not(.active) > span:nth-of-type(2),
:root[data-theme="dark"] .bxCashoutNetwork:not(.active) > span:nth-of-type(2) {
  color: var(--app-text-3) !important;
}
:root[data-theme="dark"] .bxDepositSubmitted {
  color: var(--app-green) !important;
  border-color: rgba(21, 201, 149, .22) !important;
  background: rgba(21, 201, 149, .09) !important;
}
:root[data-theme="dark"] .bxDepositSubmitted > div:first-child {
  color: var(--app-green) !important;
}

/* Assets and fund flow -- the bxAssets light patches were removed: the
   assets overview now owns both themes in styles.css, so there is nothing
   here to override. */

/* Conversion / transfer ticket. */
:root[data-theme="light"] .bxTransferPage,
:root[data-theme="light"] .bxTransferHeader { color: var(--app-text) !important; background: var(--app-bg) !important; }
:root[data-theme="light"] .bxTransferHeader .exPageTitle {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxTransferAssetBar,
:root[data-theme="light"] .bxTransferReceiveSurface,
:root[data-theme="light"] .bxTransferCoinPicker {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
:root[data-theme="light"] .bxTransferAmountInput,
:root[data-theme="light"] .bxTransferCoinSearch {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxTransferCoinOption { color: var(--app-text) !important; border-color: var(--app-border) !important; }
:root[data-theme="light"] .bxTransferAmountSurface,
:root[data-theme="light"] .bxTransferFlowArrow,
:root[data-theme="light"] .bxTransferTicket .bxTransferAmountSurface {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
:root[data-theme="light"] .bxTransferHeroAsset,
:root[data-theme="light"] .bxTransferAssetIdentity strong,
:root[data-theme="light"] .bxTransferHeroIdentity strong,
:root[data-theme="light"] .bxTransferPricePrimary > strong,
:root[data-theme="light"] .bxTransferMarketPrice strong,
:root[data-theme="light"] .bxTransferFeeRow strong,
:root[data-theme="light"] .bxTransferSummaryRow strong,
:root[data-theme="light"] .bxTransferCoinSearch input,
:root[data-theme="light"] .bxTransferCoinPrice {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxTransferSectionLabel,
:root[data-theme="light"] .bxTransferHeroChevron,
:root[data-theme="light"] .bxTransferPricePrimary > span,
:root[data-theme="light"] .bxTransferPriceControls > b,
:root[data-theme="light"] .bxTransferAmountHeading label,
:root[data-theme="light"] .bxTransferAmountHeading span,
:root[data-theme="light"] .bxTransferMarketPrice small,
:root[data-theme="light"] .bxTransferFeeRow > span,
:root[data-theme="light"] .bxTransferSummaryRow span,
:root[data-theme="light"] .bxTransferBalance,
:root[data-theme="light"] .bxTransferCoinIdentity small,
:root[data-theme="light"] .bxTransferCoinEmpty,
:root[data-theme="light"] .bxTransferCoinSearch {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .bxTransferAmountActions,
:root[data-theme="light"] .bxTransferFeeRow {
  border-color: var(--app-border) !important;
}
:root[data-theme="light"] .bxTransferCoinOption:hover,
:root[data-theme="light"] .bxTransferCoinOption.isActive {
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxTransferSubmit:disabled {
  color: var(--app-text-3) !important;
  background: var(--app-surface-3) !important;
}

/* Copy trading. */
:root[data-theme="light"]:has(.bxCopyPage),
:root[data-theme="light"] body:has(.bxCopyPage),
:root[data-theme="light"] #root:has(.bxCopyPage),
:root[data-theme="light"] .bxCopyPage {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
  scrollbar-color: var(--app-border-strong) var(--app-bg);
}
:root[data-theme="light"] .bxCopyHeader { color: var(--app-text) !important; border-color: var(--app-border) !important; background: rgba(246,248,251,.94) !important; }
:root[data-theme="light"] .bxCopySearch,
:root[data-theme="light"] .bxCopyTraderCard,
:root[data-theme="light"] .bxCopyNewScroller button,
:root[data-theme="light"] .bxCopyDataPanel,
:root[data-theme="light"] .bxCopyOverviewPanel,
:root[data-theme="light"] .bxCopyFeedPanel,
:root[data-theme="light"] .bxCopySheet,
:root[data-theme="light"] .bxCopyMetricSheet {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm);
}
:root[data-theme="light"] .bxCopySearch input,
:root[data-theme="light"] .bxCopyField input,
:root[data-theme="light"] .bxCopyTwinFields input { color: var(--app-text) !important; }
:root[data-theme="light"] .bxCopyRankingTabs,
:root[data-theme="light"] .bxCopySheet > header { border-color: var(--app-border) !important; }
:root[data-theme="light"] .bxCopyRankingTabs button.active { color: var(--app-text) !important; }
:root[data-theme="light"] .bxCopyRankingTabs button.active::after { background: var(--app-text) !important; }
:root[data-theme="light"] .bxCopyField > div,
:root[data-theme="light"] .bxCopyTwinFields label > div,
:root[data-theme="light"] .bxCopyModeTabs { border-color: var(--app-border) !important; background: var(--app-surface-2) !important; }

/* Futures shell. The retained chart itself receives the mode over the shared
   theme bridge; these rules own the locally-rendered order and account panels. */
:root[data-theme="light"] .fmPage {
  --bg: var(--app-bg);
  --panel: var(--app-surface);
  --line: var(--app-border);
  --muted: var(--app-text-3);
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .fmNav,
:root[data-theme="light"] .fmChartWrap,
:root[data-theme="light"] .fmContractChart,
:root[data-theme="light"] .fmDrawToolbar,
:root[data-theme="light"] .fmChartFooter,
:root[data-theme="light"] .fmChartLoading,
:root[data-theme="light"] .fmOrderbook,
:root[data-theme="light"] .fmTrade,
:root[data-theme="light"] .fmAccounts {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .fmTopTabs button.active,
:root[data-theme="light"] .fmOrderbook > nav button.active,
:root[data-theme="light"] .fmAccounts > nav button.active { color: var(--app-text) !important; }
:root[data-theme="light"] .fmTopTabs button.active::after,
:root[data-theme="light"] .fmOrderbook > nav button.active::after,
:root[data-theme="light"] .fmAccounts > nav button.active::after { background: var(--app-text) !important; }
:root[data-theme="light"] .fmTimeframes button { color: var(--app-text-2) !important; }
:root[data-theme="light"] .fmTimeframes button.active { color: var(--app-text) !important; background: var(--app-surface-3) !important; }
:root[data-theme="light"] .fmGrid line { stroke: var(--app-border) !important; }
:root[data-theme="light"] .fmGrid text { fill: var(--app-text-3) !important; }
:root[data-theme="light"] .fmSheet,
:root[data-theme="light"] .fmSymbolSelector,
:root[data-theme="light"] .fmContractTradeSheet {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-elevated) !important;
}
:root[data-theme="light"] .fmOriginalContractTop,
:root[data-theme="light"] .fmOriginalContractFrame,
:root[data-theme="light"] .fmOriginalLoading,
:root[data-theme="light"] .fmNativeOrderbookHost,
:root[data-theme="light"] .fmNativeOrderbookFallback,
:root[data-theme="light"] .fmNativeOrderbookFrame,
:root[data-theme="light"] #mofang-orderbook-frame-layer,
:root[data-theme="light"] .fmNativeHoldings,
:root[data-theme="light"] .fmMobileTradeDock {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-bg) !important;
}
/* Light theme keeps the same "this is a chart area, it is filling in" reading
   as the dark one: the surface and grid follow the theme tokens rather than
   staying at the dark chart's near-black. Background only, same as dark -- see
   futures-mirror.css. */
:root[data-theme="light"] .fmOriginalContractTop {
  background-color: var(--app-bg) !important;
  background-image:
    linear-gradient(var(--app-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--app-border) 1px, transparent 1px) !important;
  background-size: 64px 48px !important;
}
:root[data-theme="light"] .fmOriginalContractTop::before {
  color: var(--app-text-dim, #667085);
}
:root[data-theme="light"] #mofang-contract-frame-layer {
  background-color: var(--app-bg) !important;
  background-image:
    linear-gradient(var(--app-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--app-border) 1px, transparent 1px) !important;
  background-size: 64px 48px !important;
}
:root[data-theme="light"] #mofang-contract-frame-layer::before {
  color: var(--app-text-dim, #667085);
}
:root[data-theme="light"] .fmNativeOrderbookFallback > nav,
:root[data-theme="light"] .fmNativeHoldingsTabs,
:root[data-theme="light"] .fmNativePositionRows article,
:root[data-theme="light"] .fmNativeOrderRows article,
:root[data-theme="light"] .fmNativeAssetPane > div {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
:root[data-theme="light"] .fmNativeOrderbookFallback > nav button,
:root[data-theme="light"] .fmNativeHoldingsTabs > button,
:root[data-theme="light"] .fmNativeHoldingsEmpty,
:root[data-theme="light"] .fmNativeHoldingsEmpty strong,
:root[data-theme="light"] .fmNativeHoldingsEmpty p,
:root[data-theme="light"] .fmNativePositionRows article > div,
:root[data-theme="light"] .fmNativeOrderRows article > div,
:root[data-theme="light"] .fmNativeHistoryRows article > time,
:root[data-theme="light"] .fmNativeAssetPane span {
  color: var(--app-text-3) !important;
}
/* The retained futures empty-state artwork is an opaque PNG whose black
   canvas is intentional in dark mode.  Keep its box in the flow so the
   account panel does not jump, but replace only the light-mode pixels with a
   neutral line illustration drawn by CSS. */
:root[data-theme="light"] .fmNativeHoldingsEmpty {
  position: relative;
}
:root[data-theme="light"] .fmNativeHoldingsEmpty > img {
  visibility: hidden !important;
}
:root[data-theme="light"] .fmNativeHoldingsEmpty::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 108px;
  height: 96px;
  transform: translateX(-50%);
  pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='96' viewBox='0 0 108 96' fill='none'%3E%3Cpath d='M15 48.5h58l12 13.5-10 19H17L7 62l8-13.5Z' fill='%23E8EDF3' stroke='%23C1CAD6' stroke-width='2'/%3E%3Cpath d='M26 61h28M30 68h20' stroke='%23A5AFBD' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='62' cy='29' r='20' fill='%23F6F8FB' stroke='%23939EAD' stroke-width='5'/%3E%3Ccircle cx='62' cy='29' r='13' stroke='%23C1CAD6' stroke-width='2'/%3E%3Cpath d='m77 44 17 17' stroke='%23939EAD' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .fmNativeOrderbookFallback > nav button.active,
:root[data-theme="light"] .fmNativeHoldingsTabs > button.active,
:root[data-theme="light"] .fmNativeRecord.active,
:root[data-theme="light"] .fmNativeAssetPane b {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .fmNativeOrderbookFallback > nav button.active::after,
:root[data-theme="light"] .fmNativeHoldingsTabs > button.active::after {
  background: var(--app-text) !important;
}
:root[data-theme="light"] .fmOrderbook select,
:root[data-theme="light"] .fmQuick button,
:root[data-theme="light"] .fmInput,
:root[data-theme="light"] .fmSide button,
:root[data-theme="light"] .fmNativeCloseAll,
:root[data-theme="light"] .fmNativeAssetPane > button,
:root[data-theme="light"] .fmNativeOrderRows article > button,
:root[data-theme="light"] .fmNativePositionRows article > div:last-child button {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .fmInput input { color: var(--app-text) !important; }
:root[data-theme="light"] .fmContractTradeSheet > footer {
  border-color: var(--app-border) !important;
  background: var(--app-elevated) !important;
  box-shadow: 0 -8px 18px rgba(15, 23, 42, .08) !important;
}
:root[data-theme="light"] .fmContractTradeQuick button,
:root[data-theme="light"] .fmContractOpenClose button,
:root[data-theme="light"] .fmContractField,
:root[data-theme="light"] .fmTargetUnitMenu,
:root[data-theme="light"] .fmChoice button,
:root[data-theme="light"] .fmIndicatorGrid button,
:root[data-theme="light"] .fmLeverage button {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .fmContractField input,
:root[data-theme="light"] .fmContractCapacity > div:first-child b,
:root[data-theme="light"] .fmTargetUnitMenu b,
:root[data-theme="light"] .fmContractUnit {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .fmTargetUnitMenu span,
:root[data-theme="light"] .fmBestPrice,
:root[data-theme="light"] .fmContractField > span,
:root[data-theme="light"] .fmContractField em,
:root[data-theme="light"] .fmContractCapacity > div:first-child {
  color: var(--app-text-3) !important;
  border-color: var(--app-border) !important;
}
:root[data-theme="light"] .fmSymbolSearch,
:root[data-theme="light"] .fmSymbolCategories button,
:root[data-theme="light"] .fmSymbolSelector .fmSymbolList button.selected {
  color: var(--app-text-2) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .fmSymbolSearch input,
:root[data-theme="light"] .fmSymbolSections button.active,
:root[data-theme="light"] .fmSymbolUnits button.active,
:root[data-theme="light"] .fmSymbolCategories button.active {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .fmSymbolSelector .symbol-picker__sub-tab,
:root[data-theme="light"] .fmSymbolSelector .symbol-picker__third-tab {
  background: transparent !important;
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .fmSymbolSelector .symbol-picker__sub-tab.active,
:root[data-theme="light"] .fmSymbolSelector .symbol-picker__third-tab.active {
  background: transparent !important;
  color: var(--app-text) !important;
}
:root[data-theme="light"] .fmSymbolSelector .symbol-picker__fullscreen-header,
:root[data-theme="light"] .fmSymbolSelector .symbol-picker__search,
:root[data-theme="light"] .fmSymbolSelector .fmSymbolContent {
  border-color: var(--app-border) !important;
  background: var(--app-elevated) !important;
}

/* Invitation and promotional modules. */
:root[data-theme="light"] .inviteReferralPage,
:root[data-theme="light"] .irHeader,
:root[data-theme="light"] .contestMirror,
:root[data-theme="light"] .promotionHubPage {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .irBrand,
:root[data-theme="light"] .irHeaderActions button,
:root[data-theme="light"] .irHero h1,
:root[data-theme="light"] .irStats strong,
:root[data-theme="light"] .irInfoRow button,
:root[data-theme="light"] .irPartnerRow { color: var(--app-text) !important; }
:root[data-theme="light"] .irInviteCard,
:root[data-theme="light"] .irPartnerRow,
:root[data-theme="light"] .irSheet,
:root[data-theme="light"] .irMenu,
:root[data-theme="light"] .contestMyCard,
:root[data-theme="light"] .contestRulesPanel,
:root[data-theme="light"] .contestRankCard,
:root[data-theme="light"] .contestPrizePanel {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm);
}

/* The invitation hero is drawn for the dark theme: its grid lines are white at
   3.5%, its lower fade resolves to #000, and the artwork is a fully opaque PNG
   with the black ground baked in (no alpha channel), so it cannot simply be
   placed on a light surface.  Tone the artwork the same way the home carousel
   does -- inverting lifts the black ground to near-white while the hue rotation
   keeps the blue wallet blue -- then flip the grid and the fade to match, so
   the whole block belongs to the light palette instead of being a black slab.
   The hero copy keeps the dark text colour set by the shared rules above.
   These must stay after those rules so they win on source order. */
:root[data-theme="light"] .irHero {
  background-color: var(--app-surface) !important;
  background-image:
    linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px) !important;
  border-bottom-color: var(--app-border) !important;
}
/* No contrast step here, unlike the carousel: invert/hue-rotate/saturate leave
   the baked black ground at exactly #ffffff, so pinning the hero to
   --app-surface makes the artwork edge disappear.  Adding contrast(.92) would
   land it on #f5f5f5 and outline the image as a faint grey rectangle. */
:root[data-theme="light"] .irHero > img {
  filter: invert(1) hue-rotate(180deg) saturate(1.15) !important;
}
:root[data-theme="light"] .irHero:after {
  background: linear-gradient(180deg, transparent, var(--app-surface) 88%) !important;
}
:root[data-theme="light"] .irStats > div + div {
  border-left-color: var(--app-border) !important;
}

/* Login remains image-led, but every functional sheet follows the selected
   palette instead of being permanently dark. */
:root[data-theme="light"] .bxCampaignLoginSheet,
:root[data-theme="light"] .bxRegisterDocument,
:root[data-theme="light"] .bxRegisterCard,
:root[data-theme="light"] .bxRegisterV2,
:root[data-theme="light"] .bxOauthCompleteOverlay > div {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-elevated) !important;
  box-shadow: var(--app-shadow-lg) !important;
}
:root[data-theme="light"] .bxCampaignLoginSheet input,
:root[data-theme="light"] .bxRegisterField input {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxCampaignSheetHeader h2 {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxCampaignSheetClose {
  color: var(--app-text-2) !important;
}
:root[data-theme="light"] .bxCampaignSheetClose:hover {
  color: var(--app-text) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxCampaignForm .bxLoginInput::placeholder,
:root[data-theme="light"] .bxCampaignForm .bxLoginEyeBtn {
  color: var(--app-text-3) !important;
  opacity: 1;
}
:root[data-theme="light"] .bxCampaignForm .bxLoginInput:focus {
  border-color: var(--app-blue) !important;
  background: var(--app-surface) !important;
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .12) !important;
}
:root[data-theme="light"] .bxCampaignForm .bxLoginRegister {
  color: var(--app-text-2) !important;
  border-top-color: var(--app-border) !important;
}
:root[data-theme="light"] .bxCampaignLegal,
:root[data-theme="light"] .bxCampaignLegalLinks {
  color: var(--app-text-2) !important;
}
:root[data-theme="light"] .bxCampaignForm .bxLoginForgot a,
:root[data-theme="light"] .bxCampaignForm .bxLoginRegister a,
:root[data-theme="light"] .bxCampaignLegal a {
  color: var(--app-blue) !important;
}

/* Registration is authored as a dark marketing document and also writes
   black backgrounds with !important onto the document shell.  In light mode
   every functional and marketing surface is explicitly re-skinned so white
   copy cannot disappear on the light form fields. */
:root[data-theme="light"].bxRegisterDocument,
:root[data-theme="light"] body.bxRegisterDocument,
:root[data-theme="light"] body.bxRegisterDocument #root,
:root[data-theme="light"] body.bxRegisterDocument .exScreen,
:root[data-theme="light"] body.bxRegisterDocument .exContent,
:root[data-theme="light"] body.bxRegisterDocument .exPageAnim,
:root[data-theme="light"] .bxRefRegister,
:root[data-theme="light"] .bxRefRegisterMain,
:root[data-theme="light"] .bxRefRegisterStory,
:root[data-theme="light"] .bxRefStoryContent,
:root[data-theme="light"] .bxRefRegisterFormPanel {
  color: var(--app-text) !important;
  background-color: var(--app-bg) !important;
}
:root[data-theme="light"] .bxRefRegister::before {
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .bxRefRegisterHeader {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}
:root[data-theme="light"] .bxRefBrand img {
  filter: invert(1) brightness(.22) saturate(0);
}
:root[data-theme="light"] .bxRefNav {
  border-color: var(--app-border) !important;
}
:root[data-theme="light"] .bxRefNav a,
:root[data-theme="light"] .bxRefLoginLink,
:root[data-theme="light"] .bxRefHeaderIcon,
:root[data-theme="light"] .bxRefLanguageButton {
  color: var(--app-text-2) !important;
}
:root[data-theme="light"] .bxRefNav a:hover,
:root[data-theme="light"] .bxRefLoginLink:hover,
:root[data-theme="light"] .bxRefLanguageButton:hover {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxRefBack,
:root[data-theme="light"] .bxRefLanguageButton:hover {
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxRefHeaderDot { background: var(--app-border) !important; }
:root[data-theme="light"] .bxRefLanguageMenu {
  border-color: var(--app-border) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--app-shadow-lg) !important;
}
:root[data-theme="light"] .bxRefLanguageMenu button {
  color: var(--app-text-2) !important;
}
:root[data-theme="light"] .bxRefLanguageMenu button:hover,
:root[data-theme="light"] .bxRefLanguageMenu button.active {
  color: var(--app-text) !important;
  background: var(--app-blue-soft) !important;
}
:root[data-theme="light"] .bxRefJourneyCard,
:root[data-theme="light"] .bxRefProofCard,
:root[data-theme="light"] .bxRefRegisterFormCard {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm) !important;
}
:root[data-theme="light"] .bxRefMetricGrid,
:root[data-theme="light"] .bxRefFeature,
:root[data-theme="light"] .bxRefProofIcon {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxRefMetric,
:root[data-theme="light"] .bxRefMetric + .bxRefMetric,
:root[data-theme="light"] .bxRefProofItem + .bxRefProofItem {
  border-color: var(--app-border) !important;
}
:root[data-theme="light"] .bxRefJourneyCard h2,
:root[data-theme="light"] .bxRefMetric strong,
:root[data-theme="light"] .bxRefProofItem h3,
:root[data-theme="light"] .bxRefFormHeading h2,
:root[data-theme="light"] .bxRefAccountMode button {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxRefMetric span,
:root[data-theme="light"] .bxRefProofItem p,
:root[data-theme="light"] .bxRefFormHeading p,
:root[data-theme="light"] .bxRefTerms,
:root[data-theme="light"] .bxRefExisting {
  color: var(--app-text-2) !important;
}
:root[data-theme="light"] .bxRefAccountMode {
  border-color: var(--app-border) !important;
}
:root[data-theme="light"] .bxRefRegisterFormCard .bxRegisterField input {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .bxRefRegisterFormCard .bxRegisterField input::placeholder {
  color: var(--app-text-3) !important;
  opacity: 1;
}
:root[data-theme="light"] .bxRefRegisterField > button,
:root[data-theme="light"] .bxRegisterField > button {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .bxMobileRegisterBar {
  border-color: var(--app-border) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 -10px 28px rgba(15, 23, 42, .08);
}

/* ==================================================================
   注册页：无边框版式

   原来的排布是「灰底页面 → 白卡片 → 灰色输入块」，三层不同的底色叠在一起，
   每一层都在争夺注意力，真正重要的东西（你要填什么）反而被框住了。

   这一版把框全部去掉，只留三样东西建立秩序：留白、字重、一条下划线。
   表单直接坐在页面底色上，输入框没有填充块也没有描边，聚焦时下划线变蓝
   并加粗到 2px —— 光标在哪里一眼就看得到，而静止时整页是安静的。

   下划线用 box-shadow 而不是 border-bottom：border 会在聚焦变粗时把输入框
   的高度顶掉 1px，整列字段跟着抖一下。box-shadow 不占布局空间。
   ================================================================== */

/* 卡片本身不再是一张卡：去掉白底、描边和阴影，与页面融为一体 */
:root[data-theme="light"] .bxRefRegisterFormCard {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 字段之间靠间距分隔，不靠边框 */
:root[data-theme="light"] .bxRefFields {
  gap: 4px !important;
}

/* 输入框：无填充、无描边，仅一条静默的下划线 */
:root[data-theme="light"] .bxRefRegisterFormCard .bxRegisterField input {
  height: 58px !important;
  padding-left: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 0 var(--app-border) !important;
  font-size: 15px !important;
  transition: box-shadow .18s ease, color .18s ease !important;
}

/* 聚焦：只让下划线变蓝加粗，不要整圈描边。

   本文件靠前有一条全局无障碍规则 input:focus-visible { outline: 2px solid }，
   它会在输入框四周画一整圈蓝框，和这里的下划线叠在一起，看起来就是「填字
   的时候多了个蓝色边框」。这里单独取消那圈 outline。

   取消 outline 不等于取消焦点提示：变蓝加粗的下划线本身就是提示，键盘操作
   时依然看得出光标在哪一行。焦点指示只是换了形式，没有被删掉。 */
:root[data-theme="light"] .bxRefRegisterFormCard .bxRegisterField input:focus,
:root[data-theme="light"] .bxRefRegisterFormCard .bxRegisterField input:focus-visible {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 0 var(--app-blue) !important;
}

/* 占位符压低对比：它是提示，不是内容 */
:root[data-theme="light"] .bxRefRegisterFormCard .bxRegisterField input::placeholder {
  color: var(--app-text-3) !important;
  opacity: .78 !important;
}

/* 显示密码那颗眼睛跟着贴到右边线上 */
:root[data-theme="light"] .bxRefRegisterFormCard .bxRegisterField > button {
  right: 0 !important;
}

/* 标题区：加大主标题、拉开与表单的距离，让层级由字重决定 */
:root[data-theme="light"] .bxRefFormHeading h2 {
  font-size: 30px !important;
  letter-spacing: -.03em !important;
}
:root[data-theme="light"] .bxRefFormHeading p {
  margin-bottom: 30px !important;
}

/* 提交按钮是整页唯一的实心色块，所以它必须是最重的那一个 */
:root[data-theme="light"] .bxRefSubmit {
  height: 54px !important;
  margin-top: 6px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(23, 105, 255, .22) !important;
}

/* 条款一行与底部链接：拉开呼吸，不加分隔线 */
:root[data-theme="light"] .bxRefTerms {
  margin: 22px 0 !important;
}
:root[data-theme="light"] .bxRefExisting {
  margin-top: 26px !important;
}

/* 表单面板去掉多余留白，让内容更靠近顶部标题 */
:root[data-theme="light"] .bxRefRegisterFormPanel {
  background: transparent !important;
}

/* Keep expensive market frames visually continuous while they are prewarmed. */
.klineHost__frame,
#mofang-kline-frame-parking,
.klineHost__status { background: var(--app-bg) !important; }
.klineHost__status { color: var(--app-text-3) !important; }

/* Standalone recovery, support and legal documents. */
.mofangStandaloneForgot body,
.mofangStandaloneForgot .page,
.mofangStandaloneChat body,
.mofangStandaloneLegal body {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}
.mofangStandaloneForgot {
  --card: var(--app-surface);
  --card-2: var(--app-surface-2);
  --line: var(--app-border);
  --muted: var(--app-text-3);
  --text: var(--app-text);
}
.mofangStandaloneForgot[data-theme="light"] .page {
  color: var(--app-text) !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(23, 105, 255, .10), transparent 31%),
    radial-gradient(circle at 86% 92%, rgba(23, 105, 255, .06), transparent 28%),
    var(--app-bg) !important;
}
.mofangStandaloneForgot[data-theme="light"] .header {
  color: var(--app-text) !important;
  border-bottom-color: var(--app-border) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.mofangStandaloneForgot[data-theme="light"] .back,
.mofangStandaloneForgot[data-theme="light"] .language-button,
.mofangStandaloneForgot[data-theme="light"] .brand {
  color: var(--app-text) !important;
}
.mofangStandaloneForgot[data-theme="light"] .back {
  border: 1px solid var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm);
}
.mofangStandaloneForgot[data-theme="light"] .back:hover,
.mofangStandaloneForgot[data-theme="light"] .language-button:hover {
  background: var(--app-surface-2) !important;
}
.mofangStandaloneForgot[data-theme="light"] .language-menu {
  border-color: var(--app-border) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--app-shadow-lg) !important;
}
.mofangStandaloneForgot[data-theme="light"] .language-menu button {
  color: var(--app-text-2) !important;
}
.mofangStandaloneForgot[data-theme="light"] .language-menu button:hover,
.mofangStandaloneForgot[data-theme="light"] .language-menu button.active {
  color: var(--app-text) !important;
  border-color: var(--app-blue) !important;
  background: var(--app-blue-soft) !important;
}
.mofangStandaloneForgot[data-theme="light"] .intro h1,
.mofangStandaloneForgot[data-theme="light"] .reset-panel h2,
.mofangStandaloneForgot[data-theme="light"] .step b,
.mofangStandaloneForgot[data-theme="light"] .label {
  color: var(--app-text) !important;
}
.mofangStandaloneForgot[data-theme="light"] .intro-copy,
.mofangStandaloneForgot[data-theme="light"] .step p,
.mofangStandaloneForgot[data-theme="light"] .security,
.mofangStandaloneForgot[data-theme="light"] .panel-desc,
.mofangStandaloneForgot[data-theme="light"] .support span {
  color: var(--app-text-2) !important;
}
.mofangStandaloneForgot[data-theme="light"] .step {
  border-color: var(--app-border) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: var(--app-shadow-sm);
}
.mofangStandaloneForgot[data-theme="light"] .step-number { color: var(--app-text-3) !important; }
.mofangStandaloneForgot[data-theme="light"] .step-icon,
.mofangStandaloneForgot[data-theme="light"] .panel-mark {
  color: var(--app-blue) !important;
  border-color: rgba(23, 105, 255, .18) !important;
  background: var(--app-blue-soft) !important;
}
.mofangStandaloneForgot[data-theme="light"] .reset-panel {
  color: var(--app-text) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mofangStandaloneForgot[data-theme="light"] .input {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
.mofangStandaloneForgot[data-theme="light"] .input::placeholder { color: var(--app-text-3) !important; }
.mofangStandaloneForgot[data-theme="light"] .input-wrap svg { color: var(--app-text-3) !important; }
.mofangStandaloneForgot[data-theme="light"] .input:focus {
  border-color: var(--app-blue) !important;
  background: var(--app-surface) !important;
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .12) !important;
}
.mofangStandaloneForgot[data-theme="light"] .security {
  border: 1px solid rgba(23, 105, 255, .14) !important;
  background: rgba(23, 105, 255, .06) !important;
}
.mofangStandaloneForgot[data-theme="light"] .success {
  color: #086b51 !important;
  border-color: rgba(8, 122, 91, .22) !important;
  background: rgba(8, 122, 91, .08) !important;
}
.mofangStandaloneForgot[data-theme="light"] .panel-divider { background: var(--app-border) !important; }
.mofangStandaloneChat .header,
.mofangStandaloneLegal .header {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
.mofangStandaloneChat .header .back,
.mofangStandaloneLegal .header .back { color: var(--app-text) !important; }
.mofangStandaloneChat .chat-container,
.mofangStandaloneChat .input-area,
.mofangStandaloneLegal .content,
.mofangStandaloneLegal .section,
.mofangStandaloneLegal .update-notice {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
.mofangStandaloneLegal p,
.mofangStandaloneLegal li { color: var(--app-text-2) !important; }
.mofangStandaloneLegal h1,
.mofangStandaloneLegal h2,
.mofangStandaloneLegal h3 { color: var(--app-text) !important; }

/* The legacy support document is authored with a light-only palette.  Keep
   its structure, but fully skin every interactive and conversational layer
   when the shared runtime selects dark mode. */
.mofangStandaloneChat[data-theme="dark"] body,
.mofangStandaloneChat[data-theme="dark"] .chat-container,
.mofangStandaloneChat[data-theme="dark"] .messages {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}
.mofangStandaloneChat[data-theme="dark"] .header,
.mofangStandaloneChat[data-theme="dark"] .input-area {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
.mofangStandaloneChat[data-theme="dark"] .message.admin .message-content {
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  background: var(--app-surface-2) !important;
  box-shadow: var(--app-shadow-sm) !important;
}
.mofangStandaloneChat[data-theme="dark"] .message-time {
  color: var(--app-text-3) !important;
}
.mofangStandaloneChat[data-theme="dark"] .input-row textarea {
  color: var(--app-text) !important;
  border-color: var(--app-border-strong) !important;
  background: var(--app-surface-2) !important;
  caret-color: var(--app-blue);
}
.mofangStandaloneChat[data-theme="dark"] .input-row textarea::placeholder {
  color: var(--app-text-3) !important;
  opacity: 1;
}
.mofangStandaloneChat[data-theme="dark"] .input-row textarea:focus {
  border-color: var(--app-blue) !important;
  box-shadow: 0 0 0 3px rgba(47, 117, 255, .14);
}
.mofangStandaloneChat[data-theme="dark"] .send-btn:disabled {
  color: var(--app-text-3) !important;
  background: var(--app-surface-3) !important;
}

@media (forced-colors: active) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }

  .bxCampaignMenuDrawer,
  .profileAvatarDialog,
  .welfareModalSheet,
  .bxLegalSheet,
  .exCreditHelpModal,
  .exModalSheet,
  .optModal {
    border: 1px solid CanvasText !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .exScreen,
  .exContent,
  .exPageAnim,
  .exPage,
  .exBottomNav,
  .bxCampaignMenuDrawer,
  .bxLegalSheet,
  .profileAvatarDialog,
  .welfareModalSheet { transition: none !important; }
}

/* Cashout product v2 -----------------------------------------------------
   Compact account picker and ledger rows. This scope intentionally does not
   touch UnifiedBankCard, which remains shared with bank-card management. */
.bxCashoutPremium {
  --co-surface: var(--app-surface, #111419);
  --co-surface-2: var(--app-surface-2, #171b22);
  --co-text: var(--app-text, #f5f7fa);
  --co-text-2: var(--app-text-2, #a3aab7);
  --co-text-3: var(--app-text-3, #687181);
  --co-line: var(--app-border, rgba(255,255,255,.08));
  --co-blue: var(--app-blue, #4b72ff);
  --co-green: var(--app-green, #16c784);
  --co-red: var(--app-red, #ff5c6c);
  --co-receipt-value: #8aaeff;
  margin-right: -12px;
  margin-left: -12px;
}

:root[data-theme="light"] .bxCashoutPremium {
  --co-surface: #fff;
  --co-surface-2: #f5f7fa;
  --co-text: #101828;
  --co-text-2: #667085;
  --co-text-3: #98a2b3;
  --co-line: #e6eaf0;
  --co-blue: #175cff;
  --co-green: #0a9f70;
  --co-red: #d6455a;
  --co-receipt-value: #31537f;
}

.bxCashoutPremium .bxCashoutTabs {
  height: 46px !important;
  margin-bottom: 26px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--co-text) 5%, var(--co-surface)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--co-surface) 65%, transparent) !important;
}

.bxCashoutPremium .bxCashoutTabIndicator {
  display: block !important;
  top: 4px !important;
  width: calc(50% - 4px) !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--co-surface) !important;
  box-shadow: 0 4px 12px rgba(16,24,40,.09), inset 0 1px 0 color-mix(in srgb, var(--co-surface) 82%, transparent) !important;
}

.bxCashoutPremium .bxCashoutTabIndicator.isBank { left: 4px !important; }
.bxCashoutPremium .bxCashoutTabIndicator.isUsdt { left: 50% !important; }
.bxCashoutPremium .bxCashoutTab { padding: 0 8px !important; color: var(--co-text-2) !important; font-size: 14px !important; font-weight: 580 !important; letter-spacing: .01em; }
.bxCashoutPremium .bxCashoutTab.isActive { color: var(--co-blue) !important; font-weight: 700 !important; }
.bxCashoutPremium .bxCashoutTab.isActive::after {
  display: none;
  content: none;
}

.bxCashoutBankFlowV2 { color: var(--co-text); }
.bxCashoutPremium .bxCashoutAccountSectionV2 { margin-bottom: 27px !important; }
.bxCashoutPremium .bxCashoutAccountHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.bxCashoutAccountHeader label { color: var(--co-text) !important; font-size: 16px !important; font-weight: 720 !important; }
.bxCashoutAccountHeader button { padding: 4px 0; border: 0; background: transparent; color: var(--co-blue) !important; font-size: 14px !important; font-weight: 650; }
.bxCashoutAccountPicker {
  display: grid;
  width: 100%;
  min-height: 88px;
  grid-template-columns: 48px minmax(0,1fr) 20px;
  gap: 13px;
  align-items: center;
  padding: 12px 14px 12px 13px;
  border: 1px solid var(--co-line);
  border-radius: 11px;
  background: var(--co-surface);
  color: var(--co-text);
  text-align: left;
  box-shadow: none;
}
.bxCashoutAccountPicker:focus-visible { outline: 2px solid color-mix(in srgb, var(--co-blue) 55%, transparent); outline-offset: 2px; }
.bxCashoutAccountIcon {
  display: grid;
  width: 48px;
  height: 48px;
  align-self: center;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--co-text) 88%, var(--co-blue));
  box-shadow: none;
}
.bxCashoutAccountIcon .bxBankUiIcon { width: 29px; height: 29px; }
:root[data-theme="light"] .bxCashoutAccountIcon {
  color: #34445f;
}
.bxCashoutAccountMain { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.bxCashoutAccountMainV17 { justify-content: center; }
.bxCashoutAccountName,
.bxCashoutAccountPrimary { display: flex; min-width: 0; align-items: center; gap: 8px; }
.bxCashoutAccountName strong, .bxCashoutAccountEmptyTitle { overflow: hidden; color: var(--co-text); font-size: 14px; font-style: normal; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.bxCashoutAccountPrimary strong { overflow: hidden; color: var(--co-text); font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.bxCashoutAccountMask { color: var(--co-text); font-size: 13px; font-weight: 680; letter-spacing: .05em; white-space: nowrap; }
.bxCashoutDefaultBadge { padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--co-blue) 55%, transparent); border-radius: 4px; color: var(--co-blue); font-size: 9px; font-style: normal; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.bxCashoutAccountMeta { overflow: hidden; color: var(--co-text-3); font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.bxCashoutAccountOwnerBank,
.bxCashoutAccountBranch {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 14px;
  align-items: center;
  white-space: nowrap;
}
.bxCashoutAccountOwnerBank { color: var(--co-text-2); font-size: 10px; font-weight: 560; }
.bxCashoutAccountOwnerBank span + span { color: var(--co-text-3); font-weight: 450; }
.bxCashoutAccountBranch { color: var(--co-text-3); font-size: 9.5px; }
.bxCashoutAccountOwnerBank span,
.bxCashoutAccountBranch span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bxCashoutAccountHolderLine { display: flex; min-width: 0; align-items: center; gap: 9px; overflow: hidden; color: var(--co-text-2); font-size: 11px; white-space: nowrap; }
.bxCashoutAccountHolderLine small { flex: 0 0 auto; color: var(--co-text-3); font-size: 10px; }
.bxCashoutAccountHolderLine span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bxCashoutAccountChevron { color: var(--co-text-2); font-size: 26px; font-weight: 300; line-height: 1; }

.bxCashoutPremium .bxCashoutAmountSectionV2 { margin-bottom: 34px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.bxCashoutPremium .bxCashoutAmountHeader {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.bxCashoutAmountHeader > label { padding-top: 2px; color: var(--co-text) !important; font-size: 16px !important; font-weight: 720 !important; }
.bxCashoutBalance { text-align: right; font-variant-numeric: tabular-nums; }
.bxCashoutBalance div { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; }
.bxCashoutBalance span { color: var(--co-text-3); font-size: 11px; }
.bxCashoutBalance strong { color: var(--co-receipt-value); font-size: 13px; font-weight: 750; }
.bxCashoutBalance small { display: block; margin-top: 3px; color: var(--co-text-3); font-size: 10px; }
.bxCashoutPremium .bxCashoutAmountPanel {
  display: block !important;
  min-height: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--co-line) !important;
  border-radius: 11px !important;
  background: var(--co-surface) !important;
  color: var(--co-text) !important;
  box-shadow: 0 5px 16px rgba(16,24,40,.035) !important;
}
.bxCashoutAmountEntry { position: relative; min-height: 68px; padding: 10px 12px 9px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 32px 17px; column-gap: 14px; align-items: center; transition: background-color .16s ease; }
.bxCashoutAmountEntry:focus-within { background: color-mix(in srgb, var(--co-text) 2.5%, transparent); }
.bxCashoutAmountInput { grid-column: 1; grid-row: 1; display: block; width: 100%; min-width: 0; height: 32px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--co-text); font-size: 24px !important; font-weight: 720; letter-spacing: -.02em; line-height: 32px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; box-shadow: none; }
.bxCashoutAmountInput:focus,
.bxCashoutAmountInput:focus-visible { border: 0 !important; outline: 0 !important; outline-offset: 0 !important; font-size: 24px !important; box-shadow: none !important; }
.bxCashoutAmountInput::-webkit-outer-spin-button,
.bxCashoutAmountInput::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.bxCashoutAmountInput::placeholder { color: var(--co-text-3); opacity: 1; }
.bxCashoutAmountRange { grid-column: 1; grid-row: 2; display: block; margin: 0; color: var(--co-text-3); font-size: 11px; line-height: 17px; }
.bxCashoutAmountActions { grid-column: 2; grid-row: 1 / span 2; position: static; display: flex; width: auto; flex-direction: row; align-items: center; gap: 8px; }
.bxCashoutCurrencyLabel { display: inline-flex; height: 32px; align-items: center; justify-content: center; padding: 0 2px; color: var(--co-text-2); font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.bxCashoutAmountAll { width: 66px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--co-blue) 9%, var(--co-surface)); color: var(--co-blue); font-size: 12px; font-weight: 700; }
.bxCashoutActualReceipt { padding: 2px 1px 0; }
.bxCashoutActualReceiptTop, .bxCashoutProcessingFee { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bxCashoutActualReceiptTop > .bxCashoutActualReceiptCopy { display: grid; min-width: 0; max-width: 46%; align-items: start; gap: 3px; color: var(--co-text); }
.bxCashoutActualReceiptLabel { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; }
.bxCashoutActualReceiptCaption { overflow: hidden; color: var(--co-text-3); font-size: 11px; font-weight: 500; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.bxCashoutActualReceiptMoney { display: inline-grid; width: 16px; height: 17px; place-items: center; color: var(--co-receipt-value); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 750; line-height: 17px; }
.bxCashoutActualReceiptTop > strong { flex: 0 0 auto; color: var(--co-receipt-value); font-size: 23px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bxCashoutActualReceiptTop > strong small { margin-left: 5px; color: color-mix(in srgb, var(--co-receipt-value) 78%, var(--co-text-2)); font-size: 13px; font-weight: 650; letter-spacing: 0; }
.bxCashoutProcessingFee { margin-top: 8px; color: var(--co-text-3); font-size: 11px; }
.bxCashoutProcessingFee strong { color: var(--co-text-2); font-size: 12px; font-weight: 650; }
.bxCashoutActualReceipt .bxCashoutProcessingFee { display: none; }

.bxCashoutPremium .bxCashoutSecuritySectionV2 { margin: 0 0 18px !important; }
.bxCashoutSecuritySectionV2 > label { display: block; margin: 0 0 9px; padding: 0 !important; color: var(--co-text) !important; font-size: 13px !important; font-weight: 700 !important; }
.bxCashoutPasswordField { display: grid; min-height: 48px; grid-template-columns: 20px minmax(0,1fr) 34px; gap: 10px; align-items: center; padding: 0 8px 0 14px; border: 1px solid var(--co-line); border-radius: 9px; background: var(--co-surface); }
.bxCashoutPasswordField > .bxBankUiIcon { width: 18px; height: 18px; color: var(--co-text-3); }
:root[data-theme] .bxCashoutPremium .bxCashoutPasswordField input { width: 100%; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; background: transparent !important; color: var(--co-text) !important; font-size: 13px; box-shadow: none !important; }
.bxCashoutPasswordField input::placeholder { color: var(--co-text-3); opacity: 1; }
.bxCashoutPasswordField button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--co-text-3); }
.bxCashoutPasswordField button .bxBankUiIcon { width: 19px; height: 19px; }
.bxCashoutBankAddPasswordField {
  display: grid;
  min-height: 42px;
  grid-template-columns: 18px minmax(0,1fr) 36px;
  gap: 9px;
  align-items: center;
  padding: 0 5px 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.bxCashoutBankAddPasswordField:focus-within {
  border-color: color-mix(in srgb, var(--app-blue, #2563eb) 58%, var(--border-color));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-blue, #2563eb) 10%, transparent);
}
.bxCashoutBankAddPasswordField > .bxBankUiIcon { width: 17px; height: 17px; color: var(--text-muted); }
:root[data-theme] .bxCashoutBankAddPasswordField > input.exDepInput {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
.bxCashoutBankAddPasswordToggle {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
}
.bxCashoutBankAddPasswordToggle:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary); }
.bxCashoutBankAddPasswordToggle .bxBankUiIcon { width: 19px; height: 19px; }
.exModalActions .exDepBtn:disabled { cursor: default; opacity: .55; }
.bxCashoutPremium .bxCashoutSubmit { display: flex !important; width: 100% !important; min-height: 50px !important; align-items: center !important; justify-content: center !important; margin: 0 0 18px !important; padding: 0 16px !important; border: 0 !important; border-radius: 8px !important; background: linear-gradient(90deg,#1559ff,#0f5fff) !important; color: #fff !important; font-size: 15px !important; font-weight: 720 !important; box-shadow: 0 7px 16px rgba(15,95,255,.16) !important; }
.bxCashoutPremium .bxCashoutSubmit.isUnavailable:not(:disabled) { opacity: 1; }
.bxCashoutPremium .bxCashoutSubmit.isReady { opacity: 1; }

/* The original cashout theme has older nth-child rules with higher
   specificity. Keep the approved V17 card treatment authoritative without
   changing the USDT flow or the shared bank-card manager. */
:root[data-theme] .bxCashoutPremium .bxCashoutTab.isActive { color: var(--co-blue) !important; }
:root[data-theme] .bxCashoutPremium .bxCashoutAmountSectionV2 {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAmountSectionV2 > .bxCashoutAmountPanel {
  padding: 0 !important;
  color: var(--co-text) !important;
  border-color: var(--co-line) !important;
  background: var(--co-surface) !important;
}
:root[data-theme="light"] .exScreen:has(.bxCashoutPage),
:root[data-theme="light"] .exContent:has(.bxCashoutPage),
:root[data-theme="light"] .exPageAnim:has(.bxCashoutPage),
:root[data-theme="light"] .bxCashoutPage,
:root[data-theme="light"] .bxCashoutPage .exPageTop,
:root[data-theme="light"] .bxCashoutPage .exPageBody,
:root[data-theme="light"] .bxCashoutPremium { background: var(--co-surface, #fff) !important; }
:root[data-theme] .bxCashoutPage .exPageTitle { font-size: 22px !important; font-weight: 760 !important; }

.bxCashoutPremium .bxCashoutRecordsV2 { margin-top: 30px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.bxCashoutRecordsV2 h3 { margin: 0 0 13px !important; color: var(--co-text) !important; font-size: 16px !important; font-weight: 750 !important; }
.bxCashoutRecordList { display: flex; flex-direction: column; gap: 8px; }
.bxCashoutRecordRow { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; align-items: start; padding: 11px 0; border: 0; border-radius: 0; background: transparent; color: var(--co-text); cursor: pointer; }
.bxCashoutRecordRow:focus-visible { outline: 2px solid color-mix(in srgb, var(--co-blue) 55%, transparent); outline-offset: 2px; }
.bxCashoutRecordIcon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; }
.bxCashoutRecordIcon.isBank { background: var(--co-surface-2); color: var(--co-text-3); }
.bxCashoutRecordIcon.isBank .bxBankUiIcon { width: 25px; height: 25px; }
.bxCashoutRecordIcon.isUsdt { background: color-mix(in srgb, #26a17b 12%, transparent); }
.bxCashoutRecordIcon.isUsdt img, .bxCashoutRecordIcon.isUsdt svg { width: 32px !important; height: 32px !important; }
.bxCashoutRecordBody { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.bxCashoutRecordTop { display: flex; min-width: 0; align-items: center; gap: 5px; line-height: 1.3; }
.bxCashoutRecordTitle { color: var(--co-text); font-size: 13px; font-weight: 720; white-space: nowrap; }
.bxCashoutRecordTitle.isUsdt { color: var(--co-blue); }
.bxCashoutRecordDot { color: var(--co-text-3); }
.bxCashoutRecordAmount { overflow: hidden; color: var(--co-text); font-size: 13px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.bxCashoutRecordStatus { flex: 0 0 auto; margin-left: auto; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-style: normal; font-weight: 720; white-space: nowrap; }
.bxCashoutRecordStatus.isPending { background: color-mix(in srgb, var(--co-blue) 12%, transparent); color: var(--co-blue); }
.bxCashoutRecordStatus.isApproved { background: color-mix(in srgb, var(--co-green) 13%, transparent); color: var(--co-green); }
.bxCashoutRecordStatus.isRejected { background: color-mix(in srgb, var(--co-red) 13%, transparent); color: var(--co-red); }
.bxCashoutRecordOrder { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--co-text-3); font-size: 10px; }
.bxCashoutRecordOrder > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxCashoutRecordCopy { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--co-text-3); }
.bxCashoutRecordCopy svg { width: 13px; height: 13px; }
.bxCashoutRecordTime { color: var(--co-text-3); font-size: 10px; font-variant-numeric: tabular-nums; }
.bxCashoutRecordsEmpty { padding: 32px 12px; color: var(--co-text-3); font-size: 13px; text-align: center; }

@media (max-width: 380px) {
  .bxCashoutAmountEntry { min-height: 66px; padding: 9px 10px 8px 13px; grid-template-rows: 31px 17px; column-gap: 9px; }
  .bxCashoutAmountInput,
  .bxCashoutAmountInput:focus,
  .bxCashoutAmountInput:focus-visible { height: 31px; font-size: 22px !important; line-height: 31px; }
  .bxCashoutAmountActions { width: auto; gap: 6px; }
  .bxCashoutAmountAll { width: 58px; height: 30px; padding: 0 7px; }
  .bxCashoutActualReceiptTop > strong { font-size: 21px; }
  .bxCashoutSettlementItem { padding-right: 11px; padding-left: 11px; }
  .bxCashoutSettlementItem strong { font-size: 12px; }
  .bxCashoutAccountName, .bxCashoutAccountPrimary { gap: 5px; }
  .bxCashoutAccountPrimary strong { font-size: 11px; }
  .bxCashoutAccountMask { font-size: 11.5px; }
  .bxCashoutDefaultBadge { padding-right: 4px; padding-left: 4px; }
  .bxCashoutAccountHolderLine { gap: 6px; font-size: 10px; }
  .bxCashoutAccountHolderLine small { font-size: 9px; }
  .bxCashoutAccountPicker { min-height: 84px; grid-template-columns: 42px minmax(0,1fr) 16px; gap: 10px; padding-right: 11px; padding-left: 11px; }
  .bxCashoutAccountIcon { width: 42px; height: 42px; }
  .bxCashoutRecordRow { padding-right: 10px; padding-left: 10px; }
}

/* Asset record centre -----------------------------------------------------
   This surface intentionally uses its own semantic palette and the new
   bxAssetRecord* hooks.  The legacy fund-flow page still uses
   .bxFundOverview, so keeping this layer scoped prevents the old blue card
   treatment from leaking into the portfolio view. */
.bxOrdersPage.bxAssetRecordCenter {
  --ar-page: #f5f7fa;
  --ar-surface: #ffffff;
  --ar-surface-raised: #ffffff;
  --ar-surface-soft: #f4f6f9;
  --ar-text: #0f141c;
  --ar-text-2: #525d6c;
  --ar-text-3: #7d8898;
  --ar-line: #e6eaf0;
  --ar-line-strong: #d8dee7;
  --ar-brand: #246bfd;
  --ar-brand-soft: rgba(36, 107, 253, .09);
  --ar-positive: #078c67;
  --ar-positive-soft: rgba(7, 140, 103, .09);
  --ar-negative: #d2475b;
  --ar-negative-soft: rgba(210, 71, 91, .09);
  --ar-green: var(--ar-positive);
  --ar-red: var(--ar-negative);
  --ar-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 9px 28px rgba(15, 23, 42, .055);

  --bg-primary: var(--ar-page);
  --bg-card: var(--ar-surface);
  --bg-secondary: var(--ar-surface-soft);
  --border-color: var(--ar-line);
  --text-primary: var(--ar-text);
  --text-secondary: var(--ar-text-2);
  --text-muted: var(--ar-text-3);

  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: var(--ar-text) !important;
  background: var(--ar-page) !important;
  overflow-x: clip;
  font-variant-numeric: tabular-nums;
}

:root[data-theme="light"] .bxOrdersPage.bxAssetRecordCenter {
  --ar-page: #f5f7fa;
  --ar-surface: #ffffff;
  --ar-surface-raised: #ffffff;
  --ar-surface-soft: #f4f6f9;
  --ar-text: #0f141c;
  --ar-text-2: #525d6c;
  --ar-text-3: #7d8898;
  --ar-line: #e6eaf0;
  --ar-line-strong: #d8dee7;
  --ar-brand: #246bfd;
  --ar-brand-soft: rgba(36, 107, 253, .09);
  --ar-positive: #078c67;
  --ar-positive-soft: rgba(7, 140, 103, .09);
  --ar-negative: #d2475b;
  --ar-negative-soft: rgba(210, 71, 91, .09);
  --ar-green: var(--ar-positive);
  --ar-red: var(--ar-negative);
  --ar-shadow: 0 1px 2px rgba(15, 23, 42, .025), 0 9px 28px rgba(15, 23, 42, .055);
}

:root[data-theme="dark"] .bxOrdersPage.bxAssetRecordCenter {
  --ar-page: #070a0f;
  --ar-surface: #0e131a;
  --ar-surface-raised: #121820;
  --ar-surface-soft: #171e28;
  --ar-text: #f5f7fb;
  --ar-text-2: #a7b0be;
  --ar-text-3: #727e8f;
  --ar-line: #202936;
  --ar-line-strong: #2b3746;
  --ar-brand: #4b7fff;
  --ar-brand-soft: rgba(75, 127, 255, .14);
  --ar-positive: #18c994;
  --ar-positive-soft: rgba(24, 201, 148, .11);
  --ar-negative: #ff6375;
  --ar-negative-soft: rgba(255, 99, 117, .11);
  --ar-green: var(--ar-positive);
  --ar-red: var(--ar-negative);
  --ar-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 12px 34px rgba(0, 0, 0, .23);
}

.bxAssetRecordCenter *,
.bxAssetRecordCenter *::before,
.bxAssetRecordCenter *::after {
  box-sizing: border-box;
}

.bxAssetRecordCenter .bxOrdersHeader {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 60px;
  padding: 10px 14px !important;
  color: var(--ar-text) !important;
  border-bottom: 1px solid var(--ar-line) !important;
  background: var(--ar-surface) !important;
  background: color-mix(in srgb, var(--ar-surface) 94%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.bxAssetRecordCenter .bxOrdersHeader .bxUnifiedBack {
  width: 38px !important;
  height: 38px !important;
  color: var(--ar-text) !important;
  border: 1px solid var(--ar-line) !important;
  border-radius: 50% !important;
  background: var(--ar-surface-soft) !important;
  box-shadow: none !important;
}

.bxAssetRecordCenter .bxOrdersHeader .bxUnifiedBack:active {
  transform: scale(.96);
  background: var(--ar-line) !important;
}

.bxAssetRecordCenter .bxOrdersHeader > div:last-child {
  color: var(--ar-text) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em;
}

.bxAssetRecordCenter .bxOrdersContent {
  width: 100%;
  min-width: 0;
  padding: 16px 14px 36px !important;
  color: var(--ar-text) !important;
  background: var(--ar-page) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--ar-line-strong) transparent;
}

.bxAssetRecordCenter .bxAssetRecordContent {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
  margin: 0;
}

/* Quiet balance sheet: a neutral financial surface without promotional glow. */
.bxAssetRecordCenter .bxAssetRecordOverview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: 18px 16px 0;
  color: var(--ar-text);
  border: 1px solid var(--ar-line);
  border-radius: 16px;
  background: var(--ar-surface);
  box-shadow: var(--ar-shadow);
}

:root[data-theme="dark"] .bxAssetRecordCenter .bxAssetRecordOverview {
  background: var(--ar-surface);
}

.bxAssetRecordCenter .bxAssetRecordOverview::before {
  content: none;
}

.bxAssetRecordOverviewLabel {
  color: var(--ar-text-2);
  font-size: 12px;
  font-weight: 520;
  line-height: 18px;
}

.bxAssetRecordOverviewValue {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
  margin-top: 3px;
  letter-spacing: -.025em;
}

.bxAssetRecordOverviewValue strong {
  min-width: 0;
  color: var(--ar-text) !important;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bxAssetRecordOverviewValue.isCompact strong { font-size: 29px; }
.bxAssetRecordOverviewValue.isTight strong { font-size: 24px; }

.bxAssetRecordOverviewValue span {
  flex: 0 0 auto;
  color: var(--ar-text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .015em;
}

.bxAssetRecordOverviewFiat {
  margin-top: 5px;
  color: var(--ar-text-3);
  font-size: 12px;
  line-height: 18px;
}

.bxAssetRecordOverviewMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 17px -16px 0;
  border-top: 1px solid var(--ar-line);
  background: color-mix(in srgb, var(--ar-surface-soft) 64%, transparent);
}

.bxAssetRecordOverviewMetric {
  min-width: 0;
  padding: 11px 10px 12px;
}

.bxAssetRecordOverviewMetric + .bxAssetRecordOverviewMetric {
  border-left: 1px solid var(--ar-line);
}

.bxAssetRecordOverviewMetric span,
.bxAssetRecordOverviewMetric strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bxAssetRecordOverviewMetric span {
  color: var(--ar-text-3);
  font-size: 10.5px;
  line-height: 16px;
}

.bxAssetRecordOverviewMetric strong {
  margin-top: 2px;
  color: var(--ar-text) !important;
  font-size: 14px;
  font-weight: 650;
  line-height: 19px;
}

/* Portfolio / ledger switch. */
.bxAssetRecordTabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 48px;
  padding: 0 10px;
  border: 1px solid var(--ar-line);
  border-radius: 14px;
  background: var(--ar-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
}

.bxAssetRecordTab {
  position: relative;
  min-width: 0;
  padding: 0 8px;
  color: var(--ar-text-3);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 540;
  cursor: pointer;
  transition: color .18s ease;
}

.bxAssetRecordTab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--ar-brand);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}

.bxAssetRecordTab:hover { color: var(--ar-text-2); }
.bxAssetRecordTab.active {
  color: var(--ar-text);
  font-weight: 650;
}
.bxAssetRecordTab.active::after { transform: translateX(-50%) scaleX(1); }

/* Every account bucket is kept visible; this is deliberately a vertical
   balance sheet instead of a market-style table that clips on phones. */
.bxAssetRecordAssets,
.bxAssetRecordFlowPanel {
  min-width: 0;
}

.bxAssetRecordSectionHeader {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px;
}

.bxAssetRecordSectionHeader strong {
  color: var(--ar-text);
  font-size: 14px;
  font-weight: 650;
}

.bxAssetRecordSectionHeader span {
  color: var(--ar-text-3);
  font-size: 12px;
}

.bxAssetRecordAssetList {
  overflow: hidden;
  border: 1px solid var(--ar-line);
  border-radius: 16px;
  background: var(--ar-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
}

.bxAssetRecordAssetRow {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(112px, 42%);
  min-height: 74px;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
}

.bxAssetRecordAssetRow + .bxAssetRecordAssetRow {
  border-top: 1px solid var(--ar-line);
}

.bxAssetRecordCoinIcon,
.bxAssetRecordAccountIcon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

.bxAssetRecordCoinIcon > * {
  width: 36px !important;
  height: 36px !important;
}

.bxAssetRecordAccountIcon {
  color: var(--ar-brand);
  border: 1px solid rgba(36, 107, 253, .14);
  background: var(--ar-brand-soft);
}

.bxAssetRecordAccountIcon.copy {
  color: var(--ar-positive);
  border-color: rgba(7, 140, 103, .17);
  background: var(--ar-positive-soft);
}

.bxAssetRecordAccountIcon.timed {
  color: #7357d7;
  border-color: rgba(115, 87, 215, .16);
  background: rgba(115, 87, 215, .09);
}

:root[data-theme="dark"] .bxAssetRecordAccountIcon.timed {
  color: #a996ff;
  background: rgba(169, 150, 255, .12);
}

.bxAssetRecordAssetIdentity,
.bxAssetRecordAssetAmount {
  min-width: 0;
}

.bxAssetRecordAssetIdentity strong,
.bxAssetRecordAssetIdentity span,
.bxAssetRecordAssetAmount strong,
.bxAssetRecordAssetAmount span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bxAssetRecordAssetIdentity strong {
  color: var(--ar-text);
  font-size: 14px;
  font-weight: 630;
  line-height: 20px;
}

.bxAssetRecordAssetIdentity span {
  margin-top: 2px;
  color: var(--ar-text-3);
  font-size: 11px;
  line-height: 17px;
}

/* Cash keeps both balance buckets in one quiet ledger strip.  The outer
   asset row supplies the surface; only hairlines separate the two values. */
.bxAssetRecordAssetRow.isCash {
  align-items: center;
  padding-bottom: 11px;
}

.bxAssetRecordCashBreakdown {
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  margin-top: 1px;
  padding-top: 9px;
  border-top: 1px solid var(--ar-line);
}

.bxAssetRecordCashMetric {
  min-width: 0;
  padding: 0 12px 1px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bxAssetRecordCashMetric + .bxAssetRecordCashMetric {
  padding-right: 0;
  padding-left: 12px;
  border-left: 1px solid var(--ar-line);
}

.bxAssetRecordCashMetric span,
.bxAssetRecordCashMetric strong {
  display: block;
  min-width: 0;
}

.bxAssetRecordCashMetric span {
  color: var(--ar-text-3);
  font-size: 10.5px;
  line-height: 15px;
}

.bxAssetRecordCashMetric strong {
  margin-top: 2px;
  color: var(--ar-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bxAssetRecordCashMetric strong small {
  color: var(--ar-text-3);
  font-size: 9px;
  font-weight: 550;
}

.bxAssetRecordCashMetric.frozen strong {
  color: var(--ar-text-2);
}

.bxAssetRecordAssetAmount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bxAssetRecordAssetAmount strong {
  color: var(--ar-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 20px;
}

.bxAssetRecordAssetAmount span {
  margin-top: 2px;
  color: var(--ar-text-3);
  font-size: 11px;
  line-height: 17px;
}

.bxAssetRecordAssetsEmpty {
  padding: 13px 8px 2px;
  color: var(--ar-text-3);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* Flow summary and compact, horizontally scrollable filters. */
.bxAssetRecordStats {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
  border: 1px solid var(--ar-line);
  border-radius: 14px;
  background: var(--ar-surface);
}

.bxAssetRecordStat {
  min-width: 0;
  padding: 13px 11px 12px;
}

.bxAssetRecordStat + .bxAssetRecordStat { border-left: 1px solid var(--ar-line); }

.bxAssetRecordStat span,
.bxAssetRecordStat strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bxAssetRecordStat span {
  color: var(--ar-text-3);
  font-size: 10.5px;
  line-height: 16px;
}

.bxAssetRecordStat strong {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 660;
  line-height: 20px;
}

.bxAssetRecordStat.positive strong { color: var(--ar-positive); }
.bxAssetRecordStat.negative strong { color: var(--ar-negative); }

.bxAssetRecordFilters {
  overflow: hidden;
  margin-bottom: 12px;
  padding: 3px 0 7px;
  border-bottom: 1px solid var(--ar-line);
}

.bxAssetRecordFilterRow {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bxAssetRecordFilterRow::-webkit-scrollbar { display: none; }
.bxAssetRecordFilterRow + .bxAssetRecordFilterRow { margin-top: 3px; }

.bxAssetRecordFilter {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 11px;
  color: var(--ar-text-3);
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 520;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}

.bxAssetRecordFilter:hover {
  color: var(--ar-text-2);
  background: var(--ar-surface-soft);
}

.bxAssetRecordFilter.active {
  color: var(--ar-brand);
  background: var(--ar-brand-soft);
  font-weight: 630;
}

.bxAssetRecordFilter[data-direction="in"].active {
  color: var(--ar-positive);
  background: var(--ar-positive-soft);
}

.bxAssetRecordFilter[data-direction="out"].active {
  color: var(--ar-negative);
  background: var(--ar-negative-soft);
}

/* Grouped ledger.  Child combinators restyle the existing inline flow row
   without altering its tested expand/collapse and accounting behaviour. */
.bxAssetRecordLedger {
  display: grid;
  gap: 10px;
}

.bxAssetRecordLedgerGroup {
  overflow: hidden;
  border: 1px solid var(--ar-line);
  border-radius: 15px;
  background: var(--ar-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .02);
}

.bxAssetRecordLedgerDate {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  color: var(--ar-text-3);
  border-bottom: 1px solid var(--ar-line);
  background: var(--ar-surface-soft);
}

.bxAssetRecordLedgerDate strong {
  color: var(--ar-text-2);
  font-size: 12px;
  font-weight: 620;
}

.bxAssetRecordLedgerDate span { font-size: 11px; }

.bxAssetRecordLedgerRows .bxFundFlowItem {
  position: relative;
  border-bottom-color: var(--ar-line) !important;
  background: transparent;
}

.bxAssetRecordLedgerRows .bxFundFlowItem:last-child { border-bottom: 0 !important; }

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child {
  min-height: 74px;
  padding: 13px 12px 13px 14px !important;
  transition: background-color .16s ease;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child:hover {
  background: var(--ar-surface-soft);
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:first-child {
  width: 34px !important;
  height: 34px;
  flex: 0 0 34px;
  margin-right: 10px !important;
  color: var(--ar-brand);
  border: 1px solid var(--ar-line);
  border-radius: 50%;
  background: var(--ar-surface-soft);
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:first-child svg {
  width: 18px;
  height: 18px;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(2) {
  min-width: 0;
  padding-right: 7px;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(2) > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(2) > div:first-child {
  color: var(--ar-text) !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  line-height: 19px;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(2) > div:last-child {
  color: var(--ar-text-3) !important;
  font-size: 11px !important;
  line-height: 16px;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(3) {
  max-width: 146px;
  min-width: 104px;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(3) > div:first-child {
  font-size: 14px !important;
  font-weight: 660 !important;
  line-height: 19px;
  white-space: nowrap;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(3) > div:not(:first-child) {
  color: var(--ar-text-3) !important;
  font-size: 10.5px !important;
  line-height: 15px;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:last-child {
  position: relative;
  width: 14px;
  height: 18px;
  flex: 0 0 14px;
  margin-left: 5px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:last-child::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ar-text-3);
  border-bottom: 1.5px solid var(--ar-text-3);
  transform: rotate(45deg);
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:nth-child(2) {
  padding: 0 12px 13px 58px !important;
  color: var(--ar-text-2) !important;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:nth-child(2) > div {
  padding: 11px !important;
  border: 1px solid var(--ar-line);
  border-radius: 10px !important;
  background: var(--ar-surface-soft) !important;
}

.bxAssetRecordLedgerRows .bxFundFlowItem > div:nth-child(2) span {
  color: var(--ar-text-2);
}

.bxAssetRecordLoadMore {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  padding: 9px 16px;
  color: var(--ar-text-2);
  border: 1px solid var(--ar-line);
  border-radius: 12px;
  background: var(--ar-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.bxAssetRecordLoadMore:hover:not(:disabled) {
  color: var(--ar-brand);
  border-color: color-mix(in srgb, var(--ar-brand) 35%, var(--ar-line));
  background: var(--ar-brand-soft);
}

.bxAssetRecordLoadMore:disabled { cursor: default; opacity: .55; }

.bxAssetRecordSkeleton {
  display: grid;
  overflow: hidden;
  gap: 1px;
  border: 1px solid var(--ar-line);
  border-radius: 15px;
  background: var(--ar-line);
}

.bxAssetRecordSkeleton span {
  position: relative;
  display: block;
  height: 72px;
  overflow: hidden;
  background: var(--ar-surface);
}

.bxAssetRecordSkeleton span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(127, 141, 160, .12) 48%, transparent 76%);
  transform: translateX(-100%);
  animation: bxAssetRecordShimmer 1.35s ease-in-out infinite;
}

@keyframes bxAssetRecordShimmer {
  to { transform: translateX(100%); }
}

.bxAssetRecordCenter .bxOrdersEmpty {
  min-height: 280px;
  padding: 48px 0 !important;
  color: var(--ar-text-3);
}

.bxAssetRecordCenter .bxOrdersEmpty > span { color: var(--ar-text-3) !important; }
.bxAssetRecordCenter .bxOrdersEmpty svg rect,
.bxAssetRecordCenter .bxOrdersEmpty svg line,
.bxAssetRecordCenter .bxOrdersEmpty svg circle { stroke: var(--ar-line-strong) !important; }
.bxAssetRecordCenter .bxOrdersEmpty svg circle { fill: var(--ar-surface) !important; }

/* 425 px is the primary mobile canvas; the tighter rules preserve all three
   overview metrics and both amount columns down through 380 px. */
@media (max-width: 425px) {
  .bxAssetRecordCenter .bxOrdersContent { padding-inline: 12px !important; }
}

@media (max-width: 390px) {
  .bxAssetRecordCenter .bxOrdersHeader { padding-inline: 12px !important; }
  .bxAssetRecordCenter .bxOrdersContent { padding: 12px 10px 30px !important; }
  .bxAssetRecordCenter .bxAssetRecordContent { gap: 10px; }

  .bxAssetRecordCenter .bxAssetRecordOverview { padding: 16px 13px 0; }
  .bxAssetRecordOverviewValue strong { font-size: 30px; }
  .bxAssetRecordOverviewValue.isCompact strong { font-size: 27px; }
  .bxAssetRecordOverviewValue.isTight strong { font-size: 22px; }
  .bxAssetRecordOverviewMetrics { margin: 15px -13px 0; }
  .bxAssetRecordOverviewMetric { padding: 10px 7px 11px; }
  .bxAssetRecordOverviewMetric span { font-size: 10px; }
  .bxAssetRecordOverviewMetric strong { font-size: 13px; }

  .bxAssetRecordAssetRow {
    grid-template-columns: 34px minmax(0, 1fr) minmax(98px, 42%);
    min-height: 70px;
    gap: 9px;
    padding: 11px 12px;
  }
  .bxAssetRecordCoinIcon,
  .bxAssetRecordAccountIcon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .bxAssetRecordCoinIcon > * { width: 34px !important; height: 34px !important; }
  .bxAssetRecordAssetIdentity strong,
  .bxAssetRecordAssetAmount strong { font-size: 13px; }
  .bxAssetRecordCashMetric { padding-right: 9px; }
  .bxAssetRecordCashMetric + .bxAssetRecordCashMetric { padding-right: 0; padding-left: 9px; }
  .bxAssetRecordCashMetric strong { font-size: 12px; }

  .bxAssetRecordStat { padding-inline: 8px; }
  .bxAssetRecordStat strong { font-size: 13px; }
  .bxAssetRecordFilter { padding-inline: 10px; }

  .bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child {
    min-height: 70px;
    padding: 12px 9px 12px 11px !important;
  }
  .bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:first-child {
    width: 32px !important;
    height: 32px;
    flex-basis: 32px;
    margin-right: 8px !important;
  }
  .bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(3) {
    max-width: 126px;
    min-width: 96px;
  }
  .bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(3) > div:first-child {
    font-size: 13px !important;
  }
  .bxAssetRecordLedgerRows .bxFundFlowItem > div:nth-child(2) {
    padding: 0 10px 12px !important;
  }
}

/* Cashout / add-bank dialog ----------------------------------------------
   This component is rendered through a portal, so it establishes its own
   semantic palette instead of relying on the cashout page wrapper. */
:root[data-theme] .bxCashoutBankModalMask {
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(5, 9, 15, .58) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

:root[data-theme] .bxCashoutBankModal {
  --cbm-surface: var(--app-elevated, #0e131b);
  --cbm-field: var(--app-surface-2, #131a24);
  --cbm-field-hover: var(--app-surface-3, #192230);
  --cbm-text: var(--app-text, #f4f7fb);
  --cbm-text-2: var(--app-text-2, #a7b0be);
  --cbm-text-3: var(--app-text-3, #828d9d);
  --cbm-line: var(--app-border, #263140);
  --cbm-blue: var(--app-blue, #2f75ff);
  width: 100% !important;
  color: var(--cbm-text) !important;
  background: var(--cbm-surface) !important;
  border-color: var(--cbm-line) !important;
}

:root[data-theme="light"] .bxCashoutBankModal {
  --cbm-surface: #ffffff;
  --cbm-field: #ffffff;
  --cbm-field-hover: #f7f9fc;
  --cbm-text: #101828;
  --cbm-text-2: #667085;
  --cbm-text-3: #98a2b3;
  --cbm-line: #dfe4ea;
  --cbm-blue: #175cff;
}

:root[data-theme] .bxCashoutBankModal.isAddMode {
  max-width: 520px !important;
  max-height: calc(100dvh - 24px) !important;
  border: 1px solid var(--cbm-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(3, 8, 18, .28) !important;
}

:root[data-theme="dark"] .bxCashoutBankModal.isAddMode {
  box-shadow: 0 28px 72px rgba(0, 0, 0, .52) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalHead {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: 22px 56px 12px !important;
  border: 0 !important;
  background: transparent !important;
}

:root[data-theme] .bxCashoutBankModalHero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

:root[data-theme] .bxCashoutBankModalHeroIcon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
  color: #8c97a9;
}

:root[data-theme] .bxCashoutBankModalHeroIcon .bxBankUiIcon {
  width: 38px;
  height: 38px;
  stroke-width: 1.55;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalTitle {
  max-width: 100%;
  margin: 0 !important;
  color: var(--cbm-text) !important;
  font-size: 22px !important;
  font-weight: 760 !important;
  line-height: 30px !important;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

:root[data-theme] .bxCashoutBankModalDivider {
  position: relative;
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 12px;
  background: linear-gradient(90deg, transparent, var(--cbm-line) 22%, var(--cbm-line) 78%, transparent);
}

:root[data-theme] .bxCashoutBankModalDivider::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--cbm-surface);
  border: 1px solid var(--cbm-line);
  transform: translate(-50%, -50%) rotate(45deg);
}

:root[data-theme] .bxCashoutBankModal .bxCashoutBankModalClose {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: var(--cbm-text-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalClose {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2;
}

:root[data-theme] .bxCashoutBankModal .bxCashoutBankModalClose svg {
  width: 20px;
  height: 20px;
}

:root[data-theme] .bxCashoutBankModal .bxCashoutBankModalClose:hover,
:root[data-theme] .bxCashoutBankModal .bxCashoutBankModalClose:active {
  background: var(--cbm-field-hover) !important;
}

:root[data-theme] .bxCashoutBankModal .bxCashoutBankModalClose:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cbm-blue) 58%, transparent) !important;
  outline-offset: 2px !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalBody {
  min-height: 0 !important;
  padding: 8px 14px 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: transparent !important;
  scrollbar-width: thin;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddForm {
  display: grid !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField {
  display: grid !important;
  grid-template-columns: 22px 92px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  color: var(--cbm-text) !important;
  background: var(--cbm-field) !important;
  border: 1px solid var(--cbm-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .045) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

:root[data-theme="dark"] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField:hover {
  background: var(--cbm-field-hover) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField:focus-within {
  background: var(--cbm-field) !important;
  border-color: var(--cbm-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbm-blue) 10%, transparent) !important;
}

:root[data-theme] .bxCashoutBankAddFieldIcon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: #596579;
}

:root[data-theme="dark"] .bxCashoutBankAddFieldIcon {
  color: #9aa6b8;
}

:root[data-theme] .bxCashoutBankAddFieldIcon .bxBankUiIcon {
  width: 20px;
  height: 20px;
  stroke-width: 1.65;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > .exDepLabel {
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--cbm-text-2) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > input.exDepInput {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--cbm-text) !important;
  caret-color: var(--cbm-blue) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 560 !important;
  line-height: 20px !important;
  text-align: left !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > input.exDepInput::placeholder {
  color: var(--cbm-text-3) !important;
  opacity: 1 !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankBack {
  color: var(--cbm-text-2) !important;
  background: var(--cbm-field-hover) !important;
}

:root[data-theme="light"] .bxCashoutBankModal.isAddMode .bxCashoutBankBack {
  background: #e8ebef !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankSave {
  color: #fff !important;
  background: linear-gradient(135deg, #174f85, #0f5e98) !important;
  box-shadow: 0 8px 18px rgba(16, 81, 135, .20) !important;
}

:root[data-theme="dark"] .bxCashoutBankModal.isAddMode .bxCashoutBankSave {
  background: linear-gradient(135deg, #286de4, #1754ba) !important;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .26) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions .bxBankUiIcon,
:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn:not(:disabled):active {
  transform: translateY(1px);
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 24%, transparent) inset !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankSave:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .48) inset, 0 8px 18px rgba(16, 81, 135, .20) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn:disabled {
  cursor: default !important;
  opacity: .58 !important;
}

.bxCashoutBankSaveSpinner {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bxCashoutBankSaveSpin .72s linear infinite;
}

@keyframes bxCashoutBankSaveSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 380px) {
  :root[data-theme] .bxCashoutBankModalMask {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode {
    border-radius: 16px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalHead {
    padding: 18px 48px 10px !important;
  }
  :root[data-theme] .bxCashoutBankModalHeroIcon {
    width: 34px;
    height: 34px;
    margin-bottom: 9px;
  }
  :root[data-theme] .bxCashoutBankModalHeroIcon .bxBankUiIcon {
    width: 34px;
    height: 34px;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalTitle {
    font-size: 20px !important;
    line-height: 27px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalBody {
    padding: 7px 12px 12px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddForm {
    gap: 10px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField {
    grid-template-columns: 20px 82px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 0 11px !important;
  }
  :root[data-theme] .bxCashoutBankAddFieldIcon,
  :root[data-theme] .bxCashoutBankAddFieldIcon .bxBankUiIcon {
    width: 20px;
    height: 20px;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > .exDepLabel {
    font-size: 12px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > input.exDepInput {
    height: 40px !important;
    font-size: 13px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions {
    gap: 10px !important;
    margin-top: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bxCashoutBankSaveSpinner { animation-duration: 1.4s; }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField,
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn {
    transition: none !important;
  }
}

@media (max-width: 380px) {
  .bxAssetRecordAssetAmount { max-width: 112px; }
  .bxAssetRecordFilterRow { gap: 2px; }
}

@media (max-width: 360px) {
  .bxAssetRecordOverviewValue strong { font-size: 28px; }
  .bxAssetRecordOverviewMetric { padding-inline: 5px; }
  .bxAssetRecordOverviewMetric strong { font-size: 12px; }

  .bxAssetRecordAssetRow { grid-template-columns: 32px minmax(0, 1fr) minmax(91px, 42%); }
  .bxAssetRecordCoinIcon,
  .bxAssetRecordAccountIcon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .bxAssetRecordCoinIcon > * { width: 32px !important; height: 32px !important; }
  .bxAssetRecordAssetIdentity span,
  .bxAssetRecordAssetAmount span { font-size: 10px; }
  .bxAssetRecordCashBreakdown { grid-column: 1 / -1; }
  .bxAssetRecordCashMetric { padding-right: 8px; }
  .bxAssetRecordCashMetric + .bxAssetRecordCashMetric { padding-right: 0; padding-left: 8px; }
  .bxAssetRecordCashMetric strong { font-size: 11.5px; }
  .bxAssetRecordCashMetric strong small { font-size: 8.5px; }

  .bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child > div:nth-child(3) {
    max-width: 112px;
    min-width: 88px;
  }
}

/* Touch navigation keeps the selected underline as its only focus signal;
   this avoids a browser-default rectangular halo after tapping a tab. */
.bxAssetRecordCenter .bxAssetRecordTab:focus,
.bxAssetRecordCenter .bxAssetRecordTab:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* The application bottom navigation is fixed.  Keep the final ledger row and
   load-more control fully scrollable above it on every mobile viewport. */
.bxAssetRecordCenter .bxOrdersContent {
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

@media (hover: none) {
  .bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child:hover,
  .bxAssetRecordFilter:hover { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .bxAssetRecordTab,
  .bxAssetRecordTab::after,
  .bxAssetRecordFilter,
  .bxAssetRecordLedgerRows .bxFundFlowItem > div:first-child { transition: none !important; }
  .bxAssetRecordSkeleton span::after { animation: none !important; }
}

/* Semantic ledger-row DOM -------------------------------------------------
   The row is now a real button for keyboard and screen-reader support. These
   hooks supersede the legacy child-div compatibility selectors above. */
.bxAssetRecordLedgerRows .bxAssetRecordFlowItem {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ar-line) !important;
  background: transparent;
}

.bxAssetRecordLedgerRows .bxAssetRecordFlowItem:last-child {
  border-bottom: 0 !important;
}

.bxAssetRecordFlowMain {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 74px;
  grid-template-columns: 34px minmax(0, 1fr) minmax(104px, 146px) 14px;
  align-items: center;
  gap: 10px;
  padding: 13px 12px 13px 14px;
  color: var(--ar-text);
  border: 0;
  border-radius: 0;
  outline: 0 !important;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease;
}

.bxAssetRecordFlowMain:hover {
  background: var(--ar-surface-soft);
}

.bxAssetRecordFlowMain:focus,
.bxAssetRecordFlowMain:focus-visible {
  outline: 0 !important;
}

.bxAssetRecordFlowMain:focus-visible {
  background: var(--ar-brand-soft);
  box-shadow: inset 3px 0 0 var(--ar-brand);
}

.bxAssetRecordFlowIcon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  color: var(--ar-brand);
  border: 1px solid var(--ar-line);
  border-radius: 50%;
  background: var(--ar-surface-soft);
}

.bxAssetRecordFlowIcon.in {
  color: var(--ar-green);
  border-color: color-mix(in srgb, var(--ar-green) 18%, var(--ar-line));
  background: var(--ar-positive-soft);
}

.bxAssetRecordFlowIcon.out {
  color: var(--ar-red);
  border-color: color-mix(in srgb, var(--ar-red) 18%, var(--ar-line));
  background: var(--ar-negative-soft);
}

.bxAssetRecordFlowIcon svg {
  width: 18px;
  height: 18px;
}

.bxAssetRecordFlowCopy,
.bxAssetRecordFlowAmount {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.bxAssetRecordFlowCopy {
  align-items: flex-start;
  padding-right: 2px;
}

.bxAssetRecordFlowCopy strong,
.bxAssetRecordFlowCopy small,
.bxAssetRecordFlowAmount strong,
.bxAssetRecordFlowAmount small,
.bxAssetRecordFlowAmount time {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bxAssetRecordFlowCopy strong {
  color: var(--ar-text);
  font-size: 13px;
  font-weight: 620;
  line-height: 19px;
}

.bxAssetRecordFlowCopy small {
  margin-top: 2px;
  color: var(--ar-text-3);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.bxAssetRecordFlowAmount {
  align-items: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bxAssetRecordFlowAmount strong {
  font-size: 14px;
  font-weight: 660;
  line-height: 19px;
}

.bxAssetRecordFlowAmount small,
.bxAssetRecordFlowAmount time {
  margin-top: 1px;
  color: var(--ar-text-3);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
}

.bxAssetRecordFlowChevron {
  position: relative;
  display: block;
  width: 14px;
  height: 18px;
  color: transparent;
  font-size: 0;
  transition: transform .18s ease;
}

.bxAssetRecordFlowChevron::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ar-text-3);
  border-bottom: 1.5px solid var(--ar-text-3);
  transform: rotate(45deg);
}

.bxAssetRecordFlowChevron.expanded {
  transform: rotate(180deg);
}

.bxAssetRecordFlowDetails {
  padding: 0 12px 13px 58px;
  color: var(--ar-text-2);
  font-size: 13px;
}

.bxAssetRecordFlowDetails > div {
  padding: 11px;
  color: var(--ar-text-2);
  border: 1px solid var(--ar-line);
  border-radius: 10px;
  background: var(--ar-surface-soft);
}

.bxAssetRecordFlowDetails span {
  color: var(--ar-text-2);
}

/* A mouse click must not leave the browser's full-width blue focus frame.
   Keyboard focus remains visible as a restrained tonal fill. */
.bxAssetRecordTab:focus,
.bxAssetRecordFilter:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

.bxAssetRecordTab:focus-visible {
  outline: 0 !important;
  background: transparent;
  box-shadow: none !important;
}

.bxAssetRecordFilter:focus-visible {
  outline: 0 !important;
  background: var(--ar-brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ar-brand) 34%, transparent) !important;
}

@media (max-width: 390px) {
  .bxAssetRecordFlowMain {
    min-height: 70px;
    grid-template-columns: 32px minmax(0, 1fr) minmax(96px, 126px) 12px;
    gap: 8px;
    padding: 12px 9px 12px 11px;
  }

  .bxAssetRecordFlowIcon {
    width: 32px;
    height: 32px;
  }

  .bxAssetRecordFlowAmount strong { font-size: 13px; }
  .bxAssetRecordFlowDetails { padding: 0 10px 12px; }
}

@media (max-width: 360px) {
  .bxAssetRecordFlowMain {
    grid-template-columns: 30px minmax(0, 1fr) minmax(88px, 112px) 10px;
    gap: 7px;
    padding-inline: 9px 7px;
  }

  .bxAssetRecordFlowIcon {
    width: 30px;
    height: 30px;
  }

  .bxAssetRecordFlowCopy strong { font-size: 12.5px; }
  .bxAssetRecordFlowCopy small,
  .bxAssetRecordFlowAmount small,
  .bxAssetRecordFlowAmount time { font-size: 10px; }

  .bxAssetRecordFlowDetails > div > div {
    grid-template-columns: 1fr !important;
  }
}

@media (hover: none) {
  .bxAssetRecordFlowMain:hover { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .bxAssetRecordFlowMain,
  .bxAssetRecordFlowChevron { transition: none !important; }
}

/* Bank-card management ----------------------------------------------------
   The withdrawal and management screens deliberately share the same card
   artwork and DOM structure. Everything around the card follows the product
   theme tokens so the artwork stays identical in light and dark modes. */
.bxUnifiedBankCard {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  font: inherit;
  text-align: left;
  isolation: isolate;
}

.bxBankUiIcon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

button.bxUnifiedBankCard {
  cursor: pointer;
  touch-action: manipulation;
}

.bxUnifiedBankCard .bxCashoutBankCardInner {
  position: relative;
  z-index: 1;
}

.bxUnifiedBankCard .bxCashoutBankCardTop,
.bxUnifiedBankCard .bxCashoutBankCardBottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.bxUnifiedBankCard .bxCashoutBankCardBottom { align-items: flex-end; }

.bxUnifiedBankCard .bxCashoutCardNumber {
  margin-top: auto !important;
}

.bxUnifiedBankCard .bxCashoutBankCardBottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  margin-top: 0;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.13);
}

.bxUnifiedBankCard .bxCashoutCardField {
  min-width: 0;
}

.bxUnifiedBankCard .bxCashoutCardFieldMeta {
  padding-right: 24px;
  text-align: right;
}

.bxUnifiedBankCard .bxCashoutCardFieldLabel {
  display: block;
  margin-bottom: 4px;
  color: #8f959f;
  font-size: 10px;
  font-weight: 560;
  letter-spacing: .035em;
  line-height: 1.25;
}

.bxUnifiedBankCard .bxCashoutCardHolder,
.bxUnifiedBankCard .bxCashoutCardMeta {
  display: block;
  overflow: hidden;
  margin: 0 !important;
  color: #a9aeb7 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: .025em !important;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.bxUnifiedBankCard .bxCashoutCardMeta {
  max-width: 100% !important;
}

.bxUnifiedBankCard .bxCashoutBankBrand {
  display: flex;
  align-items: center;
}

.bxUnifiedBankCard .bxCashoutBankMark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bxUnifiedBankCard .bxCashoutBankMark .material-icons-round,
.bxUnifiedBankCard .bxCashoutBankMark .bxBankUiIcon {
  color: #fff;
  font-size: 17px;
}

.bxUnifiedBankCard .bxCashoutContactless {
  width: 27px;
  height: 27px;
}

.bxUnifiedBankCardSelected {
  position: absolute;
  right: 14px;
  bottom: 13px;
  z-index: 2;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(24, 201, 139, .88);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .24);
}

.bxUnifiedBankCardSelected .material-icons-round,
.bxUnifiedBankCardSelected .bxBankUiIcon { width: 14px; height: 14px; font-size: 14px; }

.bxUnifiedBankCard.isInteractive {
  transition: transform .18s ease, box-shadow .18s ease;
}

.bxUnifiedBankCard.isInteractive:active { transform: scale(.992); }

.bxUnifiedBankCard:focus-visible {
  outline: 3px solid rgba(47, 117, 255, .42);
  outline-offset: 3px;
}

/* Day-mode compact machined-steel card. The dark product keeps the original
   matte-black artwork; only the light palette uses the approved steel card. */
:root[data-theme="light"] .bxUnifiedBankCard {
  height: 218px !important;
  color: #171d24 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background-color: #aeb4b9 !important;
  background-image: url('/assets/bingx-cashout/machined-steel-card-surface-v2.png') !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  box-shadow: 0 13px 27px rgba(30,38,48,.18), 0 2px 5px rgba(30,38,48,.1) !important;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutBankCardInner {
  padding: 20px 22px 17px !important;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutBankMark {
  width: 32px !important;
  height: 32px !important;
  color: #252d35 !important;
  border: 1px solid rgba(42,50,58,.48) !important;
  border-radius: 8px !important;
  background: rgba(238,241,243,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28) !important;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutBankMark .material-icons-round,
:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutBankMark .bxBankUiIcon {
  color: #252d35 !important;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutBankBrand > div:last-child span {
  color: #1b2229 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutContactless {
  color: #2f3740 !important;
  opacity: .82;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutCardNumber {
  margin-bottom: 14px !important;
  color: #171d24 !important;
  font-size: clamp(18px, 5.4vw, 22px) !important;
  font-weight: 690 !important;
  letter-spacing: .16em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42), 0 -1px 0 rgba(50,57,64,.24) !important;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutBankCardBottom {
  gap: 24px;
  padding-top: 12px;
  border-top-color: transparent;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutCardFieldLabel {
  color: #414a54 !important;
  font-size: 10px;
  font-weight: 620;
}

:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutCardHolder,
:root[data-theme="light"] .bxUnifiedBankCard .bxCashoutCardMeta {
  color: #20272f !important;
  font-size: 12px !important;
  font-weight: 680 !important;
}

:root[data-theme="light"] .bxUnifiedBankCardSelected {
  width: 18px;
  height: 18px;
  color: #fff;
  border: 0;
  background: #1b8069;
  box-shadow: 0 2px 6px rgba(28,61,53,.2);
}

.bxBankManagerPage {
  min-height: 100dvh;
  background: var(--app-bg) !important;
  color: var(--app-text);
}

.bxBankManagerHeader {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  min-height: 58px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  padding: max(0px, env(safe-area-inset-top)) 10px 0;
  border-bottom: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}

.bxBankManagerHeader h1 {
  overflow: hidden;
  margin: 0;
  color: var(--app-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bxBankManagerBack {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-text);
  cursor: pointer;
}

.bxBankManagerBack:hover { background: var(--app-surface-2); }

.bxBankManagerHeaderSpacer { width: 40px; height: 40px; }

.bxBankManagerMain {
  width: min(100%, 620px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px 18px calc(106px + env(safe-area-inset-bottom, 0px));
}

.bxBankManagerVerifyMain {
  display: flex;
  min-height: calc(100dvh - 58px - 78px);
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(28px, 8vh, 72px);
}

.bxBankManagerVerifyPanel {
  width: min(100%, 430px);
  box-sizing: border-box;
  padding: clamp(24px, 7vw, 32px);
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.bxBankManagerSecurityIcon {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border: 1px solid color-mix(in srgb, var(--app-blue) 22%, var(--app-border));
  border-radius: 15px;
  background: var(--app-blue-soft);
  color: var(--app-blue);
}

.bxBankManagerSecurityIcon .material-icons-round,
.bxBankManagerSecurityIcon .bxBankUiIcon { width: 25px; height: 25px; font-size: 25px; }

.bxBankManagerIntro { margin-bottom: 26px; text-align: center; }

.bxBankManagerIntro h2,
.bxBankManagerPageIntro h2,
.bxBankManagerListHead h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -.025em;
}

.bxBankManagerIntro p,
.bxBankManagerPageIntro p,
.bxBankManagerListHead p {
  margin: 8px 0 0;
  color: var(--app-text-3);
  font-size: 13px;
  line-height: 1.55;
}

.bxBankManagerFieldLabel,
.bxBankManagerField label {
  display: block;
  margin: 0 0 8px;
  color: var(--app-text-2);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.4;
}

.bxBankManagerField label span { margin-left: 3px; color: var(--app-red); }

.bxBankManagerPasswordField {
  display: flex;
  min-height: 52px;
  align-items: center;
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  background: var(--app-surface-2);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bxBankManagerPasswordField:focus-within,
.bxBankManagerField input:focus {
  border-color: var(--app-blue);
  box-shadow: 0 0 0 3px var(--app-blue-soft);
  outline: none;
}

.bxBankManagerPasswordField input {
  min-width: 0;
  flex: 1;
  padding: 14px 2px 14px 15px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--app-text);
  font: inherit;
  font-size: 15px;
}

.bxBankManagerPasswordField input::placeholder,
.bxBankManagerField input::placeholder { color: var(--app-text-3); opacity: .82; }

.bxBankManagerPasswordField button {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  margin: 0 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--app-text-3);
  cursor: pointer;
}

.bxBankManagerPasswordField button .material-icons-round,
.bxBankManagerPasswordField button .bxBankUiIcon { width: 21px; height: 21px; font-size: 21px; }

.bxBankManagerError {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  color: var(--app-red);
  font-size: 12.5px;
  line-height: 1.45;
}

.bxBankManagerError .material-icons-round,
.bxBankManagerError .bxBankUiIcon { width: 17px; height: 17px; margin-top: 1px; font-size: 17px; }

.bxBankManagerPrimary,
.bxBankManagerAddButton {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 18px 0 0;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  background: var(--app-blue);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 680;
  cursor: pointer;
  touch-action: manipulation;
  transition: filter .18s ease, transform .18s ease, opacity .18s ease;
}

.bxBankManagerPrimary:not(:disabled):active,
.bxBankManagerAddButton:active { transform: scale(.992); }

.bxBankManagerPrimary:disabled {
  cursor: not-allowed;
  opacity: .44;
}

.bxBankManagerSpinner {
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 999px;
  animation: bxBankManagerSpin .72s linear infinite;
}

@keyframes bxBankManagerSpin { to { transform: rotate(360deg); } }

.bxBankManagerSecurityNote,
.bxBankManagerCardStatus {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--app-text-3);
  font-size: 11.5px;
  line-height: 1.45;
}

.bxBankManagerSecurityNote .material-icons-round,
.bxBankManagerSecurityNote .bxBankUiIcon,
.bxBankManagerCardStatus .material-icons-round,
.bxBankManagerCardStatus .bxBankUiIcon { width: 16px; height: 16px; flex: 0 0 auto; font-size: 16px; }

.bxBankManagerPageIntro { margin: 2px 0 22px; }

.bxBankManagerAddForm {
  padding: 20px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.bxBankManagerField { min-width: 0; margin-bottom: 18px; }

.bxBankManagerField input {
  display: block;
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--app-border-strong);
  border-radius: 11px;
  outline: 0;
  background: var(--app-surface-2);
  color: var(--app-text);
  font: inherit;
  font-size: 15px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.bxBankManagerFieldPair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 34%);
  gap: 12px;
}

.bxBankManagerAddForm > .bxBankManagerSecurityNote { margin: 0 0 2px; }

.bxBankManagerListHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 2px 0 20px;
}

.bxBankManagerCount {
  display: inline-flex;
  min-width: 27px;
  height: 27px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface-2);
  color: var(--app-text-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bxBankManagerAddButton { margin: 0 0 20px; }
.bxBankManagerAddButton .material-icons-round,
.bxBankManagerAddButton .bxBankUiIcon { width: 20px; height: 20px; font-size: 20px; }

.bxBankManagerCards {
  display: grid;
  gap: 20px;
}

.bxBankManagerCardEntry { min-width: 0; }

.bxBankManagerCardStatus {
  justify-content: flex-end;
  margin: 9px 3px 0;
  text-align: right;
}

.bxBankManagerEmpty {
  display: flex;
  min-height: 290px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  border: 1px dashed var(--app-border-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--app-surface) 82%, transparent);
  text-align: center;
}

.bxBankManagerEmptyIcon {
  display: flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  border-radius: 16px;
  background: var(--app-surface-2);
  color: var(--app-text-3);
}

.bxBankManagerEmptyIcon .material-icons-round,
.bxBankManagerEmptyIcon .bxBankUiIcon { width: 27px; height: 27px; font-size: 27px; }

.bxBankManagerEmpty h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 16px;
  font-weight: 680;
}

.bxBankManagerEmpty p {
  max-width: 300px;
  margin: 8px 0 20px;
  color: var(--app-text-3);
  font-size: 13px;
  line-height: 1.5;
}

.bxBankManagerEmpty button {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--app-border-strong);
  border-radius: 10px;
  background: var(--app-surface);
  color: var(--app-text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

@media (hover: hover) {
  .bxUnifiedBankCard.isInteractive:hover { transform: translateY(-1px); }
  .bxBankManagerPrimary:not(:disabled):hover,
  .bxBankManagerAddButton:hover { filter: brightness(1.06); }
}

@media (max-width: 380px) {
  .bxBankManagerMain { padding-right: 14px; padding-left: 14px; }
  .bxBankManagerVerifyPanel { padding: 24px 18px; border-radius: 16px; }
  .bxBankManagerAddForm { padding: 18px 15px; }
  .bxBankManagerFieldPair { grid-template-columns: minmax(0, 1fr) 96px; gap: 9px; }
  .bxBankManagerField label { min-height: 36px; display: flex; align-items: flex-end; }
  .bxBankManagerCardStatus { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .bxUnifiedBankCard.isInteractive,
  .bxBankManagerPrimary,
  .bxBankManagerAddButton,
  .bxBankManagerPasswordField,
  .bxBankManagerField input { transition: none !important; }
  .bxBankManagerSpinner { animation-duration: 1.5s; }
}

/* Cashout reference composition -------------------------------------------
   Final visual pass for the approved compact bank-withdrawal layout.  This
   layer is deliberately presentation-only: the selected bank, amount,
   password verification, submission, and withdrawal-record handlers remain
   owned by CashoutFeaturePage. */
:root[data-theme] .bxCashoutPremium {
  --co-reference-soft: color-mix(in srgb, var(--co-text) 2.8%, var(--co-surface));
  --co-reference-row: color-mix(in srgb, var(--co-text) 3.6%, var(--co-surface));
  --co-reference-button: #417bb8;
}
:root[data-theme="dark"] .bxCashoutPremium {
  --co-reference-soft: color-mix(in srgb, var(--co-text) 5%, var(--co-surface));
  --co-reference-row: color-mix(in srgb, var(--co-text) 6.5%, var(--co-surface));
  --co-reference-button: #356da9;
}

:root[data-theme] .bxCashoutPremium .bxCashoutTabs {
  height: 50px !important;
  margin-bottom: 34px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--co-reference-row) !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutTabIndicator {
  top: 4px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--co-surface) !important;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--co-text) 9%, transparent) !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutTab {
  border: 0 !important;
  border-radius: 11px !important;
  color: var(--co-text-3) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutTab.isActive {
  color: var(--co-text-2) !important;
  font-weight: 700 !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutTab:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--co-text-3) 28%, transparent) !important;
}

:root[data-theme] .bxCashoutPremium .bxCashoutAccountSectionV2 {
  margin-bottom: 29px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountHeader {
  margin-bottom: 15px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountHeader button {
  color: var(--co-receipt-value) !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountPicker {
  min-height: 98px !important;
  grid-template-columns: 52px minmax(0,1fr) 18px !important;
  gap: 12px !important;
  padding: 15px 16px 15px 14px !important;
  border-color: color-mix(in srgb, var(--co-line) 82%, transparent) !important;
  border-radius: 11px !important;
  background: var(--co-reference-soft) !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountIcon {
  width: 52px !important;
  height: 52px !important;
  color: var(--co-text) !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountIcon .bxBankUiIcon {
  width: 32px !important;
  height: 32px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountMainV17 {
  gap: 10px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountPrimary strong,
:root[data-theme] .bxCashoutPremium .bxCashoutAccountMask {
  font-size: 13px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutDefaultBadge {
  display: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountHolderLine {
  gap: 10px !important;
  font-size: 11px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountHolderLine small {
  font-size: 10px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAccountChevron {
  color: var(--co-text) !important;
  font-size: 27px !important;
}

:root[data-theme] .bxCashoutPremium .bxCashoutAmountSectionV2 {
  margin-bottom: 37px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAmountHeader {
  margin-bottom: 14px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAmountPanel {
  min-height: 78px !important;
  margin-bottom: 28px !important;
  border-color: color-mix(in srgb, var(--co-line) 82%, transparent) !important;
  border-radius: 11px !important;
  background: var(--co-surface) !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutBalanceCoin {
  display: inline-grid;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  place-items: center;
  transform: translateY(1.5px);
}
:root[data-theme] .bxCashoutPremium .bxCashoutBalanceCoin img,
:root[data-theme] .bxCashoutPremium .bxCashoutBalanceCoin svg {
  display: block;
  width: 13px !important;
  height: 13px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAmountEntry {
  min-height: 76px !important;
  padding: 12px 13px 11px 17px !important;
  grid-template-rows: 34px 17px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAmountInput,
:root[data-theme] .bxCashoutPremium .bxCashoutAmountInput:focus,
:root[data-theme] .bxCashoutPremium .bxCashoutAmountInput:focus-visible {
  height: 34px !important;
  font-size: 24px !important;
  line-height: 34px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutAmountAll {
  width: 66px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: var(--co-reference-row) !important;
  color: var(--co-text-2) !important;
}

/* Preserve the currently approved blue-grey financial-value tone. */
:root[data-theme] .bxCashoutPremium .bxCashoutBalance strong,
:root[data-theme] .bxCashoutPremium .bxCashoutActualReceiptMoney,
:root[data-theme] .bxCashoutPremium .bxCashoutActualReceiptTop > strong {
  color: var(--co-receipt-value) !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutActualReceipt {
  min-height: 66px !important;
  padding: 0 !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutActualReceiptTop {
  min-height: 66px !important;
  align-items: center !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutActualReceiptTop > .bxCashoutActualReceiptCopy {
  max-width: 57% !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutActualReceiptTop > strong {
  font-size: clamp(23px, 6.35vw, 27px) !important;
}

:root[data-theme] .bxCashoutPremium .bxCashoutSecuritySectionV2 {
  margin: 0 0 19px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutPasswordField {
  min-height: 52px !important;
  border-color: color-mix(in srgb, var(--co-line) 88%, transparent) !important;
  border-radius: 9px !important;
  background: var(--co-surface) !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutSubmit {
  min-height: 56px !important;
  margin-bottom: 28px !important;
  border-radius: 8px !important;
  background: var(--co-reference-button) !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutSubmit.isReady {
  background: var(--co-blue) !important;
}

:root[data-theme] .bxCashoutPremium .bxCashoutRecordsV2 {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutRecordsV2 h3 {
  margin-bottom: 14px !important;
  font-size: 17px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutRecordList {
  gap: 9px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutRecordRow {
  min-height: 91px !important;
  grid-template-columns: 42px minmax(0,1fr) !important;
  gap: 11px !important;
  align-items: start !important;
  padding: 12px 11px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--co-reference-row) !important;
  box-shadow: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutRecordIcon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutRecordIcon.isUsdt {
  background: transparent !important;
}
:root[data-theme="light"] .bxCashoutPremium .bxCashoutRecordIcon.isBank {
  background: color-mix(in srgb, var(--co-text) 6.5%, var(--co-surface)) !important;
  color: #182235 !important;
}
:root[data-theme="dark"] .bxCashoutPremium .bxCashoutRecordIcon.isBank {
  background: color-mix(in srgb, var(--co-text) 9%, var(--co-surface)) !important;
  color: var(--co-text) !important;
}
:root[data-theme="light"] .bxCashoutPremium .bxCashoutRecordIcon.isUsdt img,
:root[data-theme="light"] .bxCashoutPremium .bxCashoutRecordIcon.isUsdt svg {
  filter: none !important;
}
:root[data-theme="dark"] .bxCashoutPremium .bxCashoutRecordIcon.isUsdt img,
:root[data-theme="dark"] .bxCashoutPremium .bxCashoutRecordIcon.isUsdt svg {
  filter: none !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutRecordBody {
  gap: 5px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutRecordTitle,
:root[data-theme] .bxCashoutPremium .bxCashoutRecordAmount {
  font-size: 13px !important;
}
:root[data-theme] .bxCashoutPremium .bxCashoutRecordTitle.isUsdt {
  color: var(--co-text) !important;
}

@media (max-width: 380px) {
  :root[data-theme] .bxCashoutPremium .bxCashoutTabs {
    margin-bottom: 30px !important;
  }
  :root[data-theme] .bxCashoutPremium .bxCashoutAccountPicker {
    min-height: 94px !important;
    grid-template-columns: 46px minmax(0,1fr) 16px !important;
    gap: 9px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  :root[data-theme] .bxCashoutPremium .bxCashoutAccountIcon {
    width: 46px !important;
    height: 46px !important;
  }
  :root[data-theme] .bxCashoutPremium .bxCashoutAmountEntry {
    min-height: 74px !important;
    padding-right: 11px !important;
    padding-left: 14px !important;
  }
  :root[data-theme] .bxCashoutPremium .bxCashoutAmountInput,
  :root[data-theme] .bxCashoutPremium .bxCashoutAmountInput:focus,
  :root[data-theme] .bxCashoutPremium .bxCashoutAmountInput:focus-visible {
    font-size: 22px !important;
  }
  :root[data-theme] .bxCashoutPremium .bxCashoutActualReceiptTop > .bxCashoutActualReceiptCopy {
    max-width: 55% !important;
  }
  :root[data-theme] .bxCashoutPremium .bxCashoutActualReceiptTop > strong {
    font-size: 22px !important;
  }
  :root[data-theme] .bxCashoutPremium .bxCashoutRecordRow {
    min-height: 88px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}

/* Cashout / premium bank-information dialog ------------------------------
   Higher-fidelity composition layered over the stable add-card controls. */
:root[data-theme] .bxCashoutBankModal {
  --cbm-hero-card-top: #3a475a;
  --cbm-hero-card-bottom: #1d2735;
  --cbm-hero-card-line: #a1adbf;
  --cbm-hero-stripe: #8290a4;
  --cbm-hero-chip: #c0cad8;
  --cbm-hero-accent-top: #4f86ff;
  --cbm-hero-accent-bottom: #1c4ea7;
  --cbm-hero-shadow: #000000;
  --cbm-hero-ground: rgba(0, 0, 0, .18);
  --cbm-icon-surface-a: #263140;
  --cbm-icon-surface-b: #1a2330;
  --cbm-icon-line: #364457;
}

:root[data-theme="light"] .bxCashoutBankModal {
  --cbm-hero-card-top: #f7f9fc;
  --cbm-hero-card-bottom: #dbe3ee;
  --cbm-hero-card-line: #69778c;
  --cbm-hero-stripe: #8b97a9;
  --cbm-hero-chip: #aeb9c8;
  --cbm-hero-accent-top: #4b7fff;
  --cbm-hero-accent-bottom: #1e55b7;
  --cbm-hero-shadow: #24354e;
  --cbm-hero-ground: rgba(41, 55, 76, .13);
  --cbm-icon-surface-a: #f7f9fc;
  --cbm-icon-surface-b: #edf1f6;
  --cbm-icon-line: #dce2ea;
}

:root[data-theme] .bxCashoutBankModal.isAddMode {
  max-width: 402px !important;
  border-radius: 20px !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .42),
    0 10px 30px rgba(0, 0, 0, .24),
    inset 0 1px rgba(255, 255, 255, .055) !important;
}

:root[data-theme="light"] .bxCashoutBankModal.isAddMode {
  box-shadow:
    0 34px 90px rgba(15, 23, 42, .22),
    0 8px 26px rgba(15, 23, 42, .08),
    inset 0 1px rgba(255, 255, 255, .92) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalHead {
  padding: 22px 56px 13px !important;
}

:root[data-theme] .bxCashoutBankModalHero {
  position: relative;
  isolation: isolate;
}

:root[data-theme] .bxCashoutBankModalHero::before {
  position: absolute;
  top: -18px;
  left: 50%;
  z-index: -1;
  width: 150px;
  height: 92px;
  content: "";
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--cbm-hero-accent-top) 10%, transparent), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}

:root[data-theme] .bxCashoutBankModalHeroIcon {
  width: 58px;
  height: 54px;
  margin-bottom: 9px;
  overflow: visible;
}

:root[data-theme] .bxCashoutBankHeroArtwork {
  display: block;
  width: 58px;
  height: 58px;
  overflow: visible;
}

:root[data-theme] .bxCashoutBankHeroGround {
  fill: var(--cbm-hero-ground);
}

:root[data-theme] .bxCashoutBankHeroCardBorder {
  fill: none;
  stroke: var(--cbm-hero-card-line);
  stroke-width: 1.45;
}

:root[data-theme] .bxCashoutBankHeroStripe {
  stroke: var(--cbm-hero-stripe);
  stroke-width: 2.15;
}

:root[data-theme] .bxCashoutBankHeroChip {
  fill: color-mix(in srgb, var(--cbm-hero-chip) 34%, transparent);
  stroke: var(--cbm-hero-chip);
  stroke-width: 1.2;
}

:root[data-theme] .bxCashoutBankHeroDetail {
  fill: none;
  stroke: var(--cbm-hero-card-line);
  stroke-width: 1.6;
  stroke-linecap: round;
}

:root[data-theme] .bxCashoutBankHeroStatus {
  fill: var(--cbm-hero-accent-top);
}

:root[data-theme] .bxCashoutBankHeroShieldBody {
  stroke: color-mix(in srgb, var(--cbm-hero-accent-top) 62%, #ffffff);
  stroke-width: 1.25;
}

:root[data-theme] .bxCashoutBankHeroShieldInner {
  fill: none;
  stroke: rgba(255, 255, 255, .35);
  stroke-width: 1.1;
}

:root[data-theme] .bxCashoutBankHeroCheck {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-theme] .bxCashoutBankHeroSpark {
  fill: none;
  stroke: var(--cbm-hero-accent-top);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .72;
}

:root[data-theme] .bxCashoutBankHeroDot {
  fill: var(--cbm-hero-card-line);
  opacity: .72;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalTitle {
  font-size: 22px !important;
  font-weight: 780 !important;
  letter-spacing: -.025em !important;
}

:root[data-theme] .bxCashoutBankModalDivider {
  width: 76px;
  margin-top: 11px;
  background: linear-gradient(90deg, transparent, var(--cbm-line) 29%, var(--cbm-line) 71%, transparent);
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalBody {
  padding: 8px 14px 15px !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddForm {
  gap: 10px !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField {
  grid-template-columns: 22px 74px minmax(0, 1fr) !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 0 12px 0 10px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cbm-field) 94%, #ffffff 6%), var(--cbm-field)) !important;
  border-color: color-mix(in srgb, var(--cbm-line) 88%, transparent) !important;
  border-radius: 13px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .14),
    0 7px 18px rgba(0, 0, 0, .16),
    inset 0 1px rgba(255, 255, 255, .035) !important;
}

:root[data-theme="light"] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField {
  background: linear-gradient(180deg, #ffffff, #fbfcfe) !important;
  border-color: #d9e0e8 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .035),
    0 6px 16px rgba(15, 23, 42, .048),
    inset 0 1px rgba(255, 255, 255, .88) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField.isGroupStart {
  margin-top: 5px !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cbm-field-hover) 94%, #ffffff 6%), var(--cbm-field-hover)) !important;
}

:root[data-theme="light"] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField:hover {
  background: linear-gradient(180deg, #ffffff, #f7f9fc) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField:focus-within {
  background: var(--cbm-field) !important;
  border-color: color-mix(in srgb, var(--cbm-blue) 50%, var(--cbm-line)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cbm-blue) 8%, transparent),
    0 12px 26px rgba(0, 0, 0, .14),
    inset 0 1px rgba(255, 255, 255, .06) !important;
}

:root[data-theme="light"] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField:focus-within {
  background: #ffffff !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cbm-blue) 8%, transparent),
    0 12px 26px rgba(15, 23, 42, .07),
    inset 0 1px rgba(255, 255, 255, .98) !important;
}

:root[data-theme] .bxCashoutBankAddFieldIcon {
  width: 22px;
  height: 22px;
  color: var(--cbm-text-2);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: color .16s ease;
}

:root[data-theme="light"] .bxCashoutBankAddFieldIcon {
  color: #59677a;
  box-shadow: none;
}

:root[data-theme] .bxCashoutBankAddFieldIcon .bxBankUiIcon {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}

:root[data-theme] .bxCashoutBankAddField:focus-within .bxCashoutBankAddFieldIcon {
  color: color-mix(in srgb, var(--cbm-blue) 72%, var(--cbm-text-2));
  transform: none;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > .exDepLabel {
  color: var(--cbm-text-2) !important;
  font-size: 12.5px !important;
  font-weight: 660 !important;
  letter-spacing: .005em;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > input.exDepInput {
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 550 !important;
}

:root:lang(en)[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField,
:root[data-theme] .bxCashoutBankModal.isAddMode:lang(en) .bxCashoutBankAddField {
  grid-template-columns: 22px 92px minmax(0, 1fr) !important;
}

:root[data-theme="light"] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > input.exDepInput::placeholder {
  color: #778294 !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions {
  gap: 12px !important;
  margin-top: 16px !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn {
  position: relative;
  height: 46px !important;
  min-height: 46px !important;
  overflow: hidden;
  border-radius: 23px !important;
  font-size: 14px !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankBack {
  color: var(--cbm-text-2) !important;
  background: linear-gradient(180deg, var(--cbm-field-hover), var(--cbm-field)) !important;
  border: 1px solid var(--cbm-line) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 7px 16px rgba(0, 0, 0, .10) !important;
}

:root[data-theme="light"] .bxCashoutBankModal.isAddMode .bxCashoutBankBack {
  background: linear-gradient(180deg, #edf0f4, #e2e6eb) !important;
  border-color: #d4d9e1 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 7px 16px rgba(15, 23, 42, .06) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankSave {
  position: relative;
  isolation: isolate;
  background: linear-gradient(112deg, #1b4f7e 0%, #0f5d94 58%, #0d4c79 100%) !important;
  box-shadow:
    0 14px 28px rgba(8, 63, 108, .28),
    inset 0 1px rgba(255, 255, 255, .24),
    inset 0 -1px rgba(0, 0, 0, .16) !important;
}

:root[data-theme="dark"] .bxCashoutBankModal.isAddMode .bxCashoutBankSave {
  background: linear-gradient(112deg, #286dd1 0%, #1952a3 60%, #123d7d 100%) !important;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankSave::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, .10) 45%, transparent 67%);
  pointer-events: none;
}

:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankSave > .bxBankUiIcon,
:root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankSave > span {
  position: relative;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn:not(:disabled):hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 380px) {
  :root[data-theme] .bxCashoutBankModal.isAddMode {
    border-radius: 17px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalHead {
    padding: 17px 48px 10px !important;
  }
  :root[data-theme] .bxCashoutBankModalHeroIcon {
    width: 54px;
    height: 50px;
    margin-bottom: 6px;
  }
  :root[data-theme] .bxCashoutBankHeroArtwork {
    width: 54px;
    height: 54px;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalTitle {
    font-size: 20.5px !important;
    line-height: 27px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankModalBody {
    padding: 7px 12px 12px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddForm {
    gap: 9px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField {
    grid-template-columns: 20px 68px minmax(0, 1fr) !important;
    gap: 7px !important;
    min-height: 44px !important;
    padding: 0 10px 0 9px !important;
    border-radius: 12px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField.isGroupStart {
    margin-top: 4px !important;
  }
  :root[data-theme] .bxCashoutBankAddFieldIcon {
    width: 20px;
    height: 20px;
    border-radius: 0;
  }
  :root[data-theme] .bxCashoutBankAddFieldIcon .bxBankUiIcon {
    width: 18px;
    height: 18px;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > .exDepLabel {
    font-size: 12px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField > input.exDepInput {
    height: 42px !important;
    font-size: 13px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions {
    gap: 10px !important;
    margin-top: 14px !important;
  }
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    font-size: 14px !important;
  }
  :root:lang(en)[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddField,
  :root[data-theme] .bxCashoutBankModal.isAddMode:lang(en) .bxCashoutBankAddField {
    grid-template-columns: 20px 82px minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .bxCashoutBankAddFieldIcon,
  :root[data-theme] .bxCashoutBankModal.isAddMode .bxCashoutBankAddActions > .exDepBtn {
    transition: none !important;
    transform: none !important;
  }
}

/* Official company-information iframe host -------------------------------- */
:root[data-theme] .bxCompanyInfoPage {
  min-height: 100%;
  background: var(--app-bg);
  color: var(--app-text);
}

:root[data-theme] .bxCompanyInfoHeader {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  min-height: 58px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--app-bg) 91%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

:root[data-theme] .bxCompanyInfoBack {
  justify-self: start;
}

:root[data-theme] .bxCompanyInfoHeaderTitle {
  min-width: 0;
  margin: 0;
  color: var(--app-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -.015em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme] .bxCompanyInfoHeaderSpacer {
  width: 40px;
  height: 40px;
}

:root[data-theme] .bxCompanyInfoFrameStage {
  position: relative;
  width: 100%;
  min-height: 640px;
  overflow: hidden;
  background: var(--app-bg);
}

:root[data-theme] .bxCompanyInfoFrame {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
  opacity: 0;
  background: var(--app-bg);
  transition: opacity .22s ease;
}

:root[data-theme] .bxCompanyInfoFrame.isReady {
  opacity: 1;
}

:root[data-theme] .bxCompanyInfoFrameSkeleton {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 640px;
  padding: 72px 20px 48px;
  pointer-events: none;
  background: var(--app-bg);
}

:root[data-theme] .bxCompanyInfoFrameSkeleton span {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--app-surface-2) 20%, var(--app-surface-3) 50%, var(--app-surface-2) 80%);
  background-size: 220% 100%;
  animation: bxCompanyInfoSkeleton 1.15s ease-in-out infinite;
}

:root[data-theme] .bxCompanyInfoFrameSkeleton span:nth-child(1) { width: min(82%, 430px); height: 42px; }
:root[data-theme] .bxCompanyInfoFrameSkeleton span:nth-child(2) { width: min(62%, 330px); height: 18px; }
:root[data-theme] .bxCompanyInfoFrameSkeleton span:nth-child(3) { width: 100%; height: 280px; margin-top: 18px; border-radius: 20px; }

@keyframes bxCompanyInfoSkeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .bxCompanyInfoFrame,
  :root[data-theme] .bxCompanyInfoFrameSkeleton span {
    transition: none;
    animation: none;
  }
}

/* Trading contest light-mode contrast repair. */
:root[data-theme="light"] .contestMirror .contestHero p,
:root[data-theme="light"] .contestMirror .contestHero small,
:root[data-theme="light"] .contestMirror .contestUser span,
:root[data-theme="light"] .contestMirror .contestRanking > p,
:root[data-theme="light"] .contestMirror .contestUpdate {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .contestMirror .contestTimeBox {
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm);
}
:root[data-theme="light"] .contestMirror .contestTimeBox strong {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .contestMirror .contestTimeBox span {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .contestMirror .contestJoin.joined {
  color: var(--app-text-2) !important;
  border: 1px solid var(--app-border-strong) !important;
  background: var(--app-surface-3) !important;
}
:root[data-theme="light"] .contestMirror .contestTabs {
  border-color: var(--app-border) !important;
  background: var(--app-bg) !important;
}
:root[data-theme="light"] .contestMirror .contestTabs button {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .contestMirror .contestTabs button.active {
  color: var(--app-blue) !important;
  border-color: var(--app-blue) !important;
}
:root[data-theme="light"] .contestMirror .contestMyStats {
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  background: var(--app-surface-2) !important;
}
:root[data-theme="light"] .contestMirror .contestMyStats span {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .contestMirror .contestMyStats b {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .contestMirror .contestMyStats p {
  color: #5f4700 !important;
  background: #fff3b8 !important;
}
:root[data-theme="light"] .contestMirror .contestRulesPanel ol {
  color: var(--app-text-2) !important;
}
:root[data-theme="light"] .contestMirror .contestRankMetrics span,
:root[data-theme="light"] .contestMirror .contestPlainRank {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .contestMirror .contestRankMetrics b {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .contestMirror .contestRankWarning {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .contestMirror .contestPrizePanel {
  border-color: #dfe5ee !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
  box-shadow: 0 12px 34px rgba(23, 32, 51, 0.08) !important;
}
:root[data-theme="light"] .contestMirror .contestPrizeIntro {
  color: #2c3648 !important;
  font-weight: 550;
  letter-spacing: 0.01em;
}
:root[data-theme="light"] .contestMirror .contestPrizeIntro b {
  color: #9a6b00 !important;
  font-weight: 750;
}
:root[data-theme="light"] .contestMirror .contestPrizeIntro i {
  color: #c18b00 !important;
  text-shadow: 0 2px 10px rgba(193, 139, 0, 0.18) !important;
}
:root[data-theme="light"] .contestMirror .contestPrizeRow {
  color: #172033 !important;
  border: 1px solid #dcbc63 !important;
  border-left: 3px solid #c99a13 !important;
  border-radius: 12px;
  background: linear-gradient(118deg, #f3dc9c 0%, #e6c46d 22%, #fffdf2 46%, #e2bd5d 64%, #f7ead0 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 18px rgba(150, 108, 0, 0.16);
}
:root[data-theme="light"] .contestMirror .contestPrizeRow.prize2 {
  border-color: #bcc6d4 !important;
  border-left-color: #8a96a8 !important;
  background: linear-gradient(118deg, #e3e9f1 0%, #ced7e3 22%, #ffffff 46%, #cad3e0 64%, #eef2f7 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 18px rgba(79, 93, 115, 0.14);
}
:root[data-theme="light"] .contestMirror .contestPrizeRow.prize3 {
  border-color: #dda880 !important;
  border-left-color: #c2734a !important;
  background: linear-gradient(118deg, #f2d0b3 0%, #e0ab80 22%, #fff7ef 46%, #dda67a 64%, #f7e3d3 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(138, 67, 31, 0.16);
}
:root[data-theme="light"] .contestMirror .contestPrizeRow.prize4,
:root[data-theme="light"] .contestMirror .contestPrizeRow.prize5 {
  border-color: #e0e6ee !important;
  border-left-color: #7487a4 !important;
  background: linear-gradient(105deg, #f6f8fb 0%, #fbfcfe 100%) !important;
  box-shadow: 0 4px 14px rgba(65, 83, 110, 0.04);
}
:root[data-theme="light"] .contestMirror .contestPrizeRow > strong {
  color: #7b5700 !important;
  font-family: inherit !important;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0.035em;
}
:root[data-theme="light"] .contestMirror .contestPrizeRow.prize2 > strong {
  color: #4f5d73 !important;
}
:root[data-theme="light"] .contestMirror .contestPrizeRow.prize3 > strong {
  color: #8a431f !important;
}
:root[data-theme="light"] .contestMirror .contestPrizeRow.prize4 > strong,
:root[data-theme="light"] .contestMirror .contestPrizeRow.prize5 > strong {
  color: #41536e !important;
}
:root[data-theme="light"] .contestMirror .contestPrizeRow > p b {
  color: #172033 !important;
  font-family: inherit !important;
  font-size: 25px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}
:root[data-theme="light"] .contestMirror .contestPrizeRow > p,
:root[data-theme="light"] .contestMirror .contestPrizeRow > p span {
  color: #647083 !important;
}
:root[data-theme="light"] .contestMirror .contestFooter {
  color: var(--app-text-2) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
:root[data-theme="light"] .contestMirror .contestFooterLogo {
  filter: brightness(0);
}
:root[data-theme="light"] .contestMirror .contestCopyright {
  color: var(--app-text-3) !important;
}
:root[data-theme="light"] .contestMirror .contestFooterDivider {
  background: var(--app-border) !important;
}
:root[data-theme="light"] .contestMirror .contestRisk h3 {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .contestMirror .contestRisk p {
  color: var(--app-text-2) !important;
}
/* End trading contest light-mode contrast repair. */

/* Chart fullscreen ---------------------------------------------------------
   Both chart routes keep a transparent hit target over the top-right corner
   (.klineHost__menuHitTarget on spot, .fmContractMenuHitTarget on perpetual) so
   the shared drawer opens regardless of iframe load timing. Those targets live
   in this document and therefore beat anything the chart frame draws in that
   corner -- which, in fullscreen, is the control that collapses the chart. The
   press opened the menu instead. The frame sets this class on the shell while
   the chart owns the screen, and clears it on collapse. */
:root.mofang-chart-fullscreen .klineHost__menuHitTarget,
:root.mofang-chart-fullscreen .fmContractMenuHitTarget {
  display: none !important;
  pointer-events: none !important;
}