/* Product-level feature surfaces not owned by theme/product.css.
   Loaded last so legacy page-specific !important declarations cannot leave
   light mode as a black/white hybrid. Layout and trading behaviour stay in
   their feature stylesheets; this file only normalises theme and a11y states. */

/* Markets ---------------------------------------------------------------- */
:root[data-theme="light"]:has(.bxmMarketPage),
:root[data-theme="light"] body:has(.bxmMarketPage),
:root[data-theme="light"] #root:has(.bxmMarketPage),
:root[data-theme="light"] .exScreen:has(.bxmMarketPage),
:root[data-theme="light"] .exContent:has(.bxmMarketPage),
:root[data-theme="light"] .bxmMarketPage,
:root[data-theme="light"] .bxmTargetMarket,
:root[data-theme="light"] .bxmTargetMain {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
}

:root[data-theme="light"] .bxmHeader {
  color: var(--app-text) !important;
  border-bottom-color: var(--app-border) !important;
  background: color-mix(in srgb, var(--app-bg) 94%, transparent) !important;
}

:root[data-theme="light"] .bxmLogo img,
:root[data-theme="light"] .bxCopyLogoImage {
  /* Shared wordmark asset has a fixed white fill. */
  filter: invert(1) brightness(.24) saturate(0) !important;
}

:root[data-theme="light"] .bxmIconButton,
:root[data-theme="light"] .bxmMenuButton { color: var(--app-text) !important; }
:root[data-theme="light"] .bxmMenuButton span { background: var(--app-text) !important; }

:root[data-theme="light"] .bxmTargetPrimary,
:root[data-theme="light"] .bxmProductTabs,
:root[data-theme="light"] .bxmStockTableHead,
:root[data-theme="light"] .bxmModeTabs,
:root[data-theme="light"] .bxmPagination,
:root[data-theme="light"] .bxmFavoriteManager {
  border-color: var(--app-border) !important;
}

:root[data-theme="light"] .bxmTargetPrimary button,
:root[data-theme="light"] .bxmStockCategories button,
:root[data-theme="light"] .bxmGenericCategories button,
:root[data-theme="light"] .bxmModeTabs button,
:root[data-theme="light"] .bxmStockTableHead,
:root[data-theme="light"] .bxmTargetMarket .bxmStockTableHead > span {
  color: var(--app-text-3) !important;
}

:root[data-theme="light"] .bxmTargetPrimary button.active,
:root[data-theme="light"] .bxmStockCategories button.active,
:root[data-theme="light"] .bxmGenericCategories button.active,
:root[data-theme="light"] .bxmModeTabs button.active {
  color: var(--app-text) !important;
}

:root[data-theme="light"] .bxmTargetPrimary button.active::after {
  background: var(--app-text) !important;
}

/* The mode switch is a pill; the category chips are not. They shared this rule
   while the stock categories still drew a filled pill on the selected chip, and
   kept the fill here after the base stylesheet dropped it. */
:root[data-theme="light"] .bxmModeTabs button.active {
  border-color: var(--app-border) !important;
  background: var(--app-surface-3) !important;
}

/* The sheet it opens is the same story: the reference is dark-only, this shell
   is not. Rows keep the chip's tint so the selected one still reads as the
   same control the trigger belongs to. */
:root[data-theme="light"] .bxmContractQuoteSheet {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
}
:root[data-theme="light"] .bxmContractQuoteOption { color: var(--app-text) !important; }
:root[data-theme="light"] .bxmContractQuoteOption.active { background: var(--app-surface-3) !important; }
:root[data-theme="light"] .bxmContractQuoteSheetClose { color: var(--app-text-3) !important; }

/* The contract-type selector is a filled chip, so its surface has to follow the
   theme rather than sit at the reference's dark rgba(42,44,44,.5). */
:root[data-theme="light"] .bxmContractQuoteTrigger {
  color: var(--app-text) !important;
  background: var(--app-surface-3) !important;
}

:root[data-theme="light"] .bxmStockCard,
:root[data-theme="light"] .bxmFavoriteManager,
:root[data-theme="light"] .bxmLoadMore {
  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"] .bxmStockCompactRow,
:root[data-theme="light"] .bxUnifiedMarketRow,
:root[data-theme="light"] .bxmStockRow {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: transparent !important;
}

:root[data-theme="light"] .bxmStockCompactRow:active,
:root[data-theme="light"] .bxUnifiedMarketRow:active,
:root[data-theme="light"] .bxmStockRow:active,
:root[data-theme="light"] .bxUnifiedMarketRow.isWatchlistEditing.isWatchlisted {
  background: var(--app-blue-soft) !important;
}

:root[data-theme="light"] .bxmAssetText strong,
:root[data-theme="light"] .bxmPriceCell strong,
:root[data-theme="light"] .bxmStockCard strong,
:root[data-theme="light"] .bxmStockCard b,
:root[data-theme="light"] .bxmStockIdentity,
:root[data-theme="light"] .bxmStockIdentity strong {
  color: var(--app-text) !important;
}

:root[data-theme="light"] .bxmAssetText small,
:root[data-theme="light"] .bxmPriceCell small,
:root[data-theme="light"] .bxmStockIdentity span,
:root[data-theme="light"] .bxmEmpty {
  color: var(--app-text-3) !important;
}

:root[data-theme="light"] .bxmPerpTag {
  color: var(--app-text-2) !important;
  background: var(--app-surface-3) !important;
}

:root[data-theme="light"] .bxmFavoriteManagerIntro label,
:root[data-theme="light"] .bxmMarketSearchPage label {
  color: var(--app-text-3) !important;
  border: 1px solid var(--app-border) !important;
  background: var(--app-surface-2) !important;
}

:root[data-theme="light"] .bxmFavoriteManagerIntro input,
:root[data-theme="light"] .bxmMarketSearchPage input {
  color: var(--app-text) !important;
}

:root[data-theme="light"] .bxmFavoriteManagerIntro input::placeholder,
:root[data-theme="light"] .bxmMarketSearchPage input::placeholder {
  color: var(--app-text-3) !important;
}

:root[data-theme="light"] .bxmMarketSearchPage,
:root[data-theme="light"] .bxmMarketSearchPage > header,
:root[data-theme="light"] .bxmMarketSearchResults {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-bg) !important;
}

:root[data-theme="light"] .bxmMarketSearchPage > header > button {
  color: var(--app-text) !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"] .exScreen:has(.bxCopyPage),
:root[data-theme="light"] .exContent:has(.bxCopyPage),
:root[data-theme="light"] .bxCopyPage,
:root[data-theme="light"] .bxCopyMain,
:root[data-theme="light"] .bxCopySquare,
:root[data-theme="light"] .bxCopyMineTarget,
:root[data-theme="light"] .bxCopyRedeemCenter,
:root[data-theme="light"] .bxCopyDetail {
  color: var(--app-text) !important;
  background: var(--app-bg) !important;
  scrollbar-color: var(--app-border-strong) var(--app-bg) !important;
}

:root[data-theme="light"] .bxCopySquareHeader,
:root[data-theme="light"] .bxCopyTargetHeader,
:root[data-theme="light"] .bxCopyHeader {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: color-mix(in srgb, var(--app-bg) 94%, transparent) !important;
}

:root[data-theme="light"] .bxCopySquareHeader > div button,
:root[data-theme="light"] .bxCopyTargetHeader > div button,
:root[data-theme="light"] .bxCopySquareBrand,
:root[data-theme="light"] .bxCopyTargetBrand {
  color: var(--app-text) !important;
}

:root[data-theme="light"] .bxCopySquareAccountActions button,
:root[data-theme="light"] .bxCopyMineModeTabs,
:root[data-theme="light"] .bxCopyDetailModeTabs,
:root[data-theme="light"] .bxCopyDataRedeemLink,
:root[data-theme="light"] .bxCopySecondary {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface-2) !important;
}

:root[data-theme="light"] .bxCopySquareAccountActions span,
:root[data-theme="light"] .bxCopySquareAccountActions b {
  color: var(--app-text) !important;
}

:root[data-theme="light"] .bxCopyMineModeTabs button,
:root[data-theme="light"] .bxCopyDetailModeTabs button,
:root[data-theme="light"] .bxCopyRankingTabs button,
:root[data-theme="light"] .bxCopyDetailTabs button,
:root[data-theme="light"] .bxCopyMineTabs button {
  color: var(--app-text-3) !important;
}

/* The plaza's ranking pills are filled, and only the selected one had a light
   surface here -- the unselected one kept the base sheet's background:#000, so
   it read as a black lozenge on a white page. */
:root[data-theme="light"] .bxCopySquareRankTabs button {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}

:root[data-theme="light"] .bxCopyMineModeTabs button.active,
:root[data-theme="light"] .bxCopyDetailModeTabs button.active,
:root[data-theme="light"] .bxCopyRankingTabs button.active,
:root[data-theme="light"] .bxCopyDetailTabs button.active,
:root[data-theme="light"] .bxCopyMineTabs button.active {
  color: var(--app-text) !important;
  border-color: var(--app-border-strong) !important;
  background: var(--app-surface) !important;
}

:root[data-theme="light"] .bxCopyRankingTabs,
:root[data-theme="light"] .bxCopyDetailTabs,
:root[data-theme="light"] .bxCopyMineTabs,
:root[data-theme="light"] .bxCopyMineSectionTitle,
:root[data-theme="light"] .bxCopyMineBalance {
  border-color: var(--app-border) !important;
}

:root[data-theme="light"] .bxCopyRankingTabs button.active::after,
:root[data-theme="light"] .bxCopyDetailTabs button.active::after,
:root[data-theme="light"] .bxCopyMineTabs button.active::after {
  background: var(--app-text) !important;
}

:root[data-theme="light"] .bxCopySquare .bxCopyNewScroller button,
:root[data-theme="light"] .bxCopySquare .bxCopyTraderCard,
:root[data-theme="light"] .bxCopyTraderCard,
:root[data-theme="light"] .bxCopyDataOrder,
:root[data-theme="light"] .bxCopyRedeemOrderList > button,
:root[data-theme="light"] .bxCopyOverviewPanel,
:root[data-theme="light"] .bxCopyFeedPanel article,
:root[data-theme="light"] .bxCopyPerformance,
: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;
  background-image: none !important;
  box-shadow: var(--app-shadow-sm) !important;
}

:root[data-theme="light"] .bxCopyRedeemOrderList > button.selected {
  border-color: var(--app-blue) !important;
  background: var(--app-blue-soft) !important;
}

:root[data-theme="light"] .bxCopyMineMetrics,
:root[data-theme="light"] .bxCopyRedeemSummary,
:root[data-theme="light"] .bxCopyDetailStats,
:root[data-theme="light"] .bxCopyOverviewGrid {
  border-color: var(--app-border) !important;
  background: var(--app-border) !important;
}

:root[data-theme="light"] .bxCopyMineMetrics > div,
:root[data-theme="light"] .bxCopyRedeemSummary > div,
:root[data-theme="light"] .bxCopyDetailStats > div,
:root[data-theme="light"] .bxCopyOverviewGrid > div {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
}

:root[data-theme="light"] .bxCopyMineMetrics span,
:root[data-theme="light"] .bxCopyRedeemSummary span,
:root[data-theme="light"] .bxCopyMineBalance,
:root[data-theme="light"] .bxCopyDataOrderHead small,
:root[data-theme="light"] .bxCopyDataOrderGrid span,
:root[data-theme="light"] .bxCopyRedeemOrderList span small,
:root[data-theme="light"] .bxCopyDetailHero span,
:root[data-theme="light"] .bxCopyDetailStats span,
:root[data-theme="light"] .bxCopyOverviewGrid span,
:root[data-theme="light"] .bxCopyFeedPanel p,
:root[data-theme="light"] .bxCopyFeedPanel time {
  color: var(--app-text-3) !important;
}

:root[data-theme="light"] .bxCopyMineBalance b,
:root[data-theme="light"] .bxCopyRedeemEmpty strong,
:root[data-theme="light"] .bxCopyOverviewGrid b,
:root[data-theme="light"] .bxCopyOverviewRow b {
  color: var(--app-text) !important;
}

/* Trader overview sections.
   Authored dark-only -- #000 cards, near-white headings, an rgba(42,44,44,.5)
   metric strip -- and the light override above reached the ROWS inside them
   (.bxCopyOverviewRow b) without ever reaching the cards those rows sit on.
   That produced both failures at once on one screen: values themed to
   near-black on a card that was still black, and hero figures still
   dark-theme white on a card that had turned white. */
:root[data-theme="light"] .bxCopyOverviewSection {
  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"] .bxCopyOverviewSection > header h2 { color: var(--app-text) !important; }
:root[data-theme="light"] .bxCopyOverviewPeriod > button {
  color: var(--app-text-2) !important;
  background: var(--app-surface-3) !important;
}
:root[data-theme="light"] .bxCopyOverviewPeriod > button i { color: var(--app-text-3) !important; }
:root[data-theme="light"] .bxCopyOverviewPeriodMenu {
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-lg) !important;
}
:root[data-theme="light"] .bxCopyOverviewPeriodMenu button { color: var(--app-text-2) !important; }
:root[data-theme="light"] .bxCopyOverviewPeriodMenu button:hover,
:root[data-theme="light"] .bxCopyOverviewPeriodMenu button.active {
  color: var(--app-text) !important;
  background: var(--app-surface-3) !important;
}
:root[data-theme="light"] .bxCopyOverviewPeriodMenu button span { color: var(--app-text) !important; }
/* The metric strip is inset inside the card, so it takes the next surface up
   rather than the card's own, exactly as the dark theme layers it. */
:root[data-theme="light"] .bxCopyOverviewHeroMetrics { background: var(--app-surface-2) !important; }
:root[data-theme="light"] .bxCopyOverviewHeroMetrics .separator { background: var(--app-border) !important; }
:root[data-theme="light"] .bxCopyOverviewHeroMetrics span,
:root[data-theme="light"] .bxCopyOverviewRow span,
:root[data-theme="light"] .bxCopyOverviewUpdate,
:root[data-theme="light"] .bxCopyOverviewUpdate span {
  color: var(--app-text-3) !important;
}
/* Profit and loss keep their own colours in both themes; only the neutral
   figure follows the text token. */
:root[data-theme="light"] .bxCopyOverviewHeroMetrics strong:not(.positive):not(.negative) {
  color: var(--app-text) !important;
}
/* The product selector's selected pill kept dark-theme white on a transparent
   ground, so its label disappeared. The 7/30/90-day pill below is a dark chip
   in both themes by design -- that is how the product draws it -- and is
   deliberately left alone. */
:root[data-theme="light"] .bxCopyLeadProducts button.active {
  color: var(--app-text) !important;
  border-color: var(--app-text) !important;
}

/* The performance chart card. Its shell was already themed above, but nothing
   inside it was, so the card turned white while its contents kept dark-theme
   colours -- including the cumulative-profit line at #e7e9ed, which on a white
   card draws nothing at all. */
:root[data-theme="light"] .bxCopyTargetMetrics span { color: var(--app-text-3) !important; }
:root[data-theme="light"] .bxCopyTargetMetrics strong { color: var(--app-text) !important; }
:root[data-theme="light"] .bxCopyChartLegend { color: var(--app-text-3) !important; }
:root[data-theme="light"] .bxCopyChartGrid { stroke: var(--app-border) !important; }
:root[data-theme="light"] .bxCopyChartProfit { stroke: var(--app-text-3) !important; }
:root[data-theme="light"] .bxCopyChartLegend i.profit { background: var(--app-text-3) !important; }
/* The white glow under the lines is a dark-theme device; on white it only
   fuzzes the stroke. */
:root[data-theme="light"] .bxCopyChartLine { filter: none !important; }
/* Unselected pills in both pickers -- and only those. The day-range pill is a
   dark chip with white text when selected, in light mode too, because that is
   how the product draws it; sweeping it in here turned its label grey on its
   own dark ground. */
:root[data-theme="light"] .bxCopyPeriodTabs button:not(.active),
:root[data-theme="light"] .bxCopyLeadProducts button:not(.active) {
  color: var(--app-text-2) !important;
  border-color: var(--app-border) !important;
}

/* The other four detail tabs -- positions, trades, followers, transfers. Same
   story as the overview above: every panel and card in them was authored
   dark-only, so the shared text tokens turned their contents near-black while
   the surfaces underneath stayed black. */
:root[data-theme="light"] .bxCopyTabPanel {
  color: var(--app-text) !important;
  background: var(--app-surface) !important;
}
/* The count chips beside the sub-tab labels ("當前持倉 0"). */
:root[data-theme="light"] .bxCopyTabPanel .bxCopySubTabs button > span {
  color: var(--app-text-3) !important;
  background: var(--app-surface-3) !important;
}
:root[data-theme="light"] .bxCopyTabPanel .bxCopySubTabs button.active > span {
  color: var(--app-blue) !important;
  background: var(--app-blue-soft) !important;
}
:root[data-theme="light"] .bxCopyPeriodFilter {
  color: var(--app-text) !important;
  background: var(--app-surface-3) !important;
}
/* Trade records: the card divider and the copy-mode chip. */
:root[data-theme="light"] .bxCopyTradeCard { border-color: var(--app-border) !important; }
:root[data-theme="light"] .bxCopyTradeMeta span {
  color: var(--app-text-2) !important;
  background: var(--app-surface-3) !important;
}
:root[data-theme="light"] .bxCopyTradeCard dd:not(.positive):not(.negative) {
  color: var(--app-text) !important;
}
/* Follower cards. */
:root[data-theme="light"] .bxCopyFollowerCard {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
  box-shadow: var(--app-shadow-sm) !important;
}
/* Transfers. The summary strip draws its dividers with its own background
   showing through a 1px grid gap, so the shell takes the border token and the
   cells take the surface. */
:root[data-theme="light"] .bxCopyTransferSummary {
  border-color: var(--app-border) !important;
  background: var(--app-border) !important;
}
:root[data-theme="light"] .bxCopyTransferSummary > div { background: var(--app-surface) !important; }
:root[data-theme="light"] .bxCopyTransferSummary strong:not(.positive):not(.negative) {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxCopyTransferRow { border-color: var(--app-border) !important; }
:root[data-theme="light"] .bxCopyTransferRow strong { color: var(--app-text) !important; }
/* The direction badges keep their in/out colours and take a soft tint of the
   same hue, rather than the deep near-black fills the dark theme uses. */
:root[data-theme="light"] .bxCopyTransferIcon {
  background: color-mix(in srgb, var(--app-green) 14%, transparent) !important;
}
:root[data-theme="light"] .bxCopyTransferRow.out .bxCopyTransferIcon {
  background: color-mix(in srgb, var(--app-red) 14%, transparent) !important;
}
:root[data-theme="light"] .bxCopyTransferEmpty > span {
  color: var(--app-text-3) !important;
  background: var(--app-surface-3) !important;
}
:root[data-theme="light"] .bxCopyTransferEmpty strong { color: var(--app-text) !important; }
/* Text that was white because the panel behind it used to be black: the
   selected sub-tab, the empty-state heading, and the contract label on a trade
   card. All three sat on a surface that is now white. */
:root[data-theme="light"] .bxCopyTabPanel .bxCopySubTabs button.active,
:root[data-theme="light"] .bxCopyProtectedEmpty strong,
:root[data-theme="light"] .bxCopyTradeMeta b {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxCopyTabPanel .bxCopyPagination button {
  color: var(--app-text-2) !important;
  border-color: var(--app-border) !important;
  background: var(--app-surface) !important;
}
/* Position history. This lives behind a sub-tab that is not the default, so
   the first sweep of this page never rendered it -- the panel opens on the
   empty "current positions" state. Same construction as the transfer summary:
   the strip draws its dividers with its own background showing through a 1px
   grid gap, so the shell takes the border token and the cells the surface. */
:root[data-theme="light"] .bxCopyHoldingSummary {
  border-color: var(--app-border) !important;
  background: var(--app-border) !important;
}
:root[data-theme="light"] .bxCopyHoldingSummary > div { background: var(--app-surface) !important; }
:root[data-theme="light"] .bxCopyHoldingSummary b:not(.positive):not(.negative) {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxCopyHoldingCard {
  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"] .bxCopyHoldingCard.expanded { border-color: var(--app-border-strong, var(--app-border)) !important; }
:root[data-theme="light"] .bxCopyHoldingCore,
:root[data-theme="light"] .bxCopyHoldingDetails { border-top-color: var(--app-border) !important; }
:root[data-theme="light"] .bxCopyHoldingHead strong:not(.positive):not(.negative),
:root[data-theme="light"] .bxCopyHoldingCore b:not(.positive):not(.negative),
:root[data-theme="light"] .bxCopyHoldingDetails b:not(.positive):not(.negative) {
  color: var(--app-text) !important;
}
:root[data-theme="light"] .bxCopyHoldingRedeem {
  color: var(--app-blue) !important;
  background: var(--app-blue-soft) !important;
}

:root[data-theme="light"] .bxCopyRedeemFooter,
:root[data-theme="light"] .bxCopyDetailFooter {
  border-color: var(--app-border) !important;
  background: color-mix(in srgb, var(--app-surface) 96%, transparent) !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08) !important;
}

:root[data-theme="light"] .bxCopySquarePagination button {
  color: var(--app-text-2) !important;
  border-color: var(--app-border) !important;
}
:root[data-theme="light"] .bxCopySquarePagination button.active,
:root[data-theme="light"] .bxCopyPrimary,
:root[data-theme="light"] .bxCopyCardAction,
:root[data-theme="light"] .bxCopyWatch {
  color: #fff !important;
  background: var(--app-blue) !important;
}

/* Feature layout / accessibility ---------------------------------------- */
.exSecurityPage button { white-space: nowrap; }
.exSecurityPage > div:nth-of-type(2) > div > div > div:first-child {
  min-width: 0;
  padding-right: 12px;
}
.exSecurityPage > div:nth-of-type(2) > div > div > button {
  min-width: max-content !important;
  flex: 0 0 auto;
}

.exSecurityModalOverlay,
.exKycRequiredModalOverlay {
  background: var(--app-overlay) !important;
}
.exSecurityModal,
.exKycRequiredModal {
  color: var(--app-text) !important;
  border: 1px solid var(--app-border) !important;
  background: var(--app-elevated) !important;
  box-shadow: var(--app-shadow-lg) !important;
}

.exRedeemRecords {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.exRedeemRecordsTitle {
  display: block;
  flex: 0 0 auto;
  width: 100%;
}
.exRedeemEmpty {
  display: grid;
  flex: 0 0 auto;
  width: 100%;
  min-height: 156px;
  margin: 0;
  place-items: center;
  color: var(--app-text-3) !important;
  border-top: 1px solid var(--app-border);
}
.exRedeemBackLink {
  padding: 4px 0;
  border: 0;
  color: var(--app-text-2);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.exCouponTabs button {
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.exRedeemBackLink:focus-visible,
.exCouponTabs button:focus-visible,
.kycUploadBox[role="button"]:focus-visible {
  outline: 2px solid var(--app-blue);
  outline-offset: 3px;
}

/* Shared toast now follows both palettes and exposes a live-region role. */
.mofangToast {
  border: 1px solid var(--app-border) !important;
  background: var(--app-elevated) !important;
  color: var(--app-text) !important;
  box-shadow: var(--app-shadow-lg) !important;
}
.mofangToast--success {
  border-color: color-mix(in srgb, var(--app-green) 54%, transparent) !important;
  background: var(--app-green) !important;
  color: #fff !important;
}

@media (forced-colors: active) {
  .mofangToast,
  .exSecurityModal,
  .exKycRequiredModal { border: 1px solid CanvasText !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mofangToast,
  .bxmMarketSearchPage,
  .bxCopyPage * { scroll-behavior: auto !important; }
}

/* Product KYC -----------------------------------------------------------
   Approved mobile prototype: flat exchange layout, token-driven light/dark
   palettes and a single responsive DOM for none/pending/verified states. */
.kycPageWrap.exKYCPage {
  min-height: 100dvh;
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  color: var(--app-text);
  background: var(--app-bg) !important;
  animation: fadeIn .22s ease-out both;
}

.kycPageWrap .kycHeader {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 66px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-bg) !important;
  box-sizing: border-box;
}

.kycPageWrap .kycBackBtn.bxUnifiedBack {
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  color: var(--app-text) !important;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--app-surface-2) !important;
  cursor: pointer;
}

.kycPageWrap .kycBackBtn.bxUnifiedBack svg {
  width: 21px;
  height: 21px;
}

.kycPageWrap .kycHeaderTitle {
  min-width: 0;
  margin: 0;
  color: var(--app-text);
  font-size: 19px;
  font-weight: 720;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -.01em;
}

.kycHeaderSpacer { width: 44px; height: 1px; }

.kycPageWrap .kycContent {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 22px 40px;
  box-sizing: border-box;
}

.kycIntro { margin: 0 0 28px; }
.kycIntroTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.kycIntro h2 {
  margin: 0;
  color: var(--app-text);
  font-size: clamp(22px, 5.8vw, 27px);
  font-weight: 730;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.kycIntro > p {
  margin: 13px 0 0;
  color: var(--app-text-2);
  font-size: 14px;
  line-height: 1.65;
}
.kycStateBadge {
  flex: 0 0 auto;
  padding: 7px 11px;
  color: var(--app-text-2);
  border: 1px solid var(--app-border);
  border-radius: 6px;
  background: var(--app-surface-2);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
}
.kycStateBadge.is-rejected {
  color: var(--app-red);
  border-color: rgba(196, 55, 76, .22);
  background: rgba(196, 55, 76, .08);
}
:root[data-theme="dark"] .kycStateBadge.is-rejected {
  border-color: rgba(255, 91, 109, .26);
  background: rgba(255, 91, 109, .11);
}

.kycRejectedAlert {
  display: grid;
  gap: 5px;
  margin: -8px 0 24px;
  padding: 13px 15px;
  color: var(--app-red);
  border: 1px solid rgba(196, 55, 76, .24);
  border-radius: 10px;
  background: rgba(196, 55, 76, .07);
  font-size: 13px;
  line-height: 1.5;
}
.kycRejectedAlert strong { font-size: 14px; }

.kycPageWrap .kycFormCard {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kycPageWrap .kycFormGroup { margin: 0 0 21px; }
.kycPageWrap .kycLabel,
.kycUploadSection > legend {
  display: block;
  margin: 0 0 9px;
  padding: 0;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}
.kycPageWrap .kycSelectWrap { position: relative; }
.kycPageWrap .kycSelectWrap::after {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--app-text-3);
  border-bottom: 1.5px solid var(--app-text-3);
  content: '';
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}
.kycPageWrap .kycSelect,
.kycPageWrap .kycInput {
  width: 100%;
  min-height: 56px;
  padding: 15px 17px;
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: 9px;
  outline: 0;
  background: var(--app-surface-2);
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}
.kycPageWrap .kycSelect { padding-right: 46px; }
.kycPageWrap .kycSelect option {
  color: var(--app-text);
  background: var(--app-elevated);
}
.kycPageWrap .kycInput::placeholder { color: var(--app-text-3); }
.kycPageWrap .kycSelect:focus,
.kycPageWrap .kycInput:focus {
  border-color: var(--app-blue);
  background: var(--app-surface);
  box-shadow: 0 0 0 3px var(--app-blue-soft);
}

.kycPageWrap .kycUploadSection {
  min-width: 0;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}
.kycHiddenFileInput {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.kycPageWrap .kycUploadBoxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.kycPageWrap .kycUploadBox {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 183px;
  padding: 12px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  color: var(--app-text-3);
  border: 1px solid var(--app-border-strong);
  border-radius: 10px;
  background: var(--app-surface);
  aspect-ratio: auto;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease !important;
}
.kycPageWrap .kycUploadBox:hover {
  color: var(--app-text-2);
  border-color: var(--app-text-3);
  background: var(--app-surface);
}
.kycPageWrap .kycUploadBox:active { transform: scale(.985) !important; }
.kycUploadSide {
  margin-bottom: 9px;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
}
.kycUploadInner {
  position: relative;
  display: flex;
  min-height: 138px;
  padding: 10px 8px;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed var(--app-border-strong);
  border-radius: 8px;
  background: var(--app-bg);
  box-sizing: border-box;
}
.kycDocumentMock {
  position: relative;
  width: min(116px, 88%);
  color: var(--app-text-3);
}
.kycDocumentMock > svg { display: block; width: 100%; height: auto; }
.kycCameraBadge {
  position: absolute;
  right: 10%;
  bottom: -5px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border: 3px solid var(--app-bg);
  border-radius: 50%;
  background: #626b78;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
  box-sizing: border-box;
}
.kycCameraBadge svg { width: 19px; height: 19px; }
.kycUploadAction {
  margin-top: 10px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}
.kycUploadHint {
  margin-top: 3px;
  color: var(--app-text-3);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}
.kycUploadPreview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kycPhotoReady {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  color: #fff;
  border-radius: 6px;
  background: rgba(8, 122, 91, .92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  font-size: 10px;
  font-weight: 700;
}
.kycPhotoReady svg { width: 12px; height: 12px; }
.kycUploadBox[data-has-image="true"] { border-color: rgba(8, 122, 91, .55); }

.kycBenefitsSummary { margin-top: 34px; }
.kycPageWrap .kycBenefitsTitle {
  margin: 0 0 17px;
  padding: 0;
  color: var(--app-text);
  border: 0;
  font-size: 18px;
  font-weight: 720;
  line-height: 1.3;
}
.kycBenefitMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kycBenefitMetric {
  min-width: 0;
  padding: 0 14px;
  border-right: 1px solid var(--app-border);
}
.kycBenefitMetric:first-child { padding-left: 0; }
.kycBenefitMetric:last-child { padding-right: 0; border-right: 0; }
.kycBenefitMetric span,
.kycBenefitMetric strong { display: block; }
.kycBenefitMetric span {
  min-height: 36px;
  color: var(--app-text-3);
  font-size: 11px;
  line-height: 1.45;
}
.kycBenefitMetric strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.kycPrivacyNote {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 32px;
  color: var(--app-text-3);
  font-size: 13px;
  line-height: 1.5;
}
.kycPrivacyIcon {
  display: inline-grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--app-text-2);
}
.kycPrivacyIcon svg { width: 21px; height: 21px; }

.kycPageWrap .kycSubmitBtn {
  width: 100%;
  min-height: 53px;
  margin: 27px 0 0;
  padding: 14px 18px;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: var(--app-blue);
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.kycPageWrap .kycSubmitBtn:hover { transform: none; box-shadow: none; }
.kycPageWrap .kycSubmitBtn:disabled { opacity: .58; cursor: wait; }

/* Verified and review states share the exact same shell as the application. */
.kycVerifiedHero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 8px 5px 28px;
  border-bottom: 1px solid var(--app-border);
}
.kycStatusIcon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
}
.kycStatusIcon svg { width: 28px; height: 28px; }
.kycStatusIconVerified {
  color: #fff;
  background: #0fb98a;
}
.kycVerifiedLead h2,
.kycPendingHero h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 23px;
  font-weight: 740;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.kycVerifiedLead p {
  margin: 5px 0 10px;
  color: var(--app-text-2);
  font-size: 17px;
  line-height: 1.4;
}
.kycLevelBadge {
  display: inline-flex;
  padding: 6px 10px;
  color: var(--app-green);
  border-radius: 7px;
  background: rgba(8, 122, 91, .10);
  font-size: 12px;
  font-weight: 700;
}
:root[data-theme="dark"] .kycLevelBadge { background: rgba(21, 201, 149, .13); }
.kycVerifiedMeta,
.kycPendingSummary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 5px;
  padding: 22px 0;
  border-bottom: 1px solid var(--app-border);
}
.kycVerifiedMeta > div,
.kycPendingSummary > div {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 0 18px;
  border-right: 1px solid var(--app-border);
}
.kycVerifiedMeta > div:first-child,
.kycPendingSummary > div:first-child { padding-left: 0; }
.kycVerifiedMeta > div:last-child,
.kycPendingSummary > div:last-child { padding-right: 0; border-right: 0; }
.kycVerifiedMeta span,
.kycPendingSummary span {
  color: var(--app-text-3);
  font-size: 12px;
}
.kycVerifiedMeta strong,
.kycPendingSummary strong {
  overflow: visible;
  color: var(--app-text);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.kycBenefitsLedger { margin: 36px 5px 0; }
.kycBenefitsLedger .kycBenefitsTitle {
  padding-left: 12px;
  border-left: 3px solid #0fb98a;
}
.kycPageWrap .kycBenefitsRows { border-top: 1px solid var(--app-border); }
.kycPageWrap .kycBenefitsRow {
  display: flex;
  min-height: 57px;
  padding: 13px 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--app-border);
  box-sizing: border-box;
}
.kycPageWrap .kycBenefitsRow > span:first-child {
  color: var(--app-text-2);
  font-size: 14px;
}
.kycPageWrap .kycBenefitsRow strong {
  color: var(--app-text);
  font-size: 14px;
  font-weight: 680;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kycBenefitCheck {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #0fb98a;
}
.kycBenefitCheck svg { width: 18px; height: 18px; }
.kycBenefitUnavailable { color: var(--app-text-3); font-size: 18px; }

.kycPendingHero {
  display: flex;
  padding: 13px 8px 30px;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--app-border);
  text-align: center;
}
.kycStatusIconPending {
  margin-bottom: 17px;
  color: #b7791f;
  background: rgba(183, 121, 31, .11);
}
:root[data-theme="dark"] .kycStatusIconPending {
  color: #f5b84c;
  background: rgba(245, 184, 76, .13);
}
.kycPendingHero p {
  max-width: 460px;
  margin: 9px 0 0;
  color: var(--app-text-2);
  font-size: 14px;
  line-height: 1.6;
}
.kycStatePending .kycBenefitsSummary { margin-top: 34px; }

.kycLoadingSkeleton {
  display: grid;
  gap: 16px;
  padding-top: 10px;
}
.kycLoadingSkeleton span {
  display: block;
  height: 54px;
  border-radius: 9px;
  background: var(--app-surface-2);
  animation: kycSkeletonPulse 1.15s ease-in-out infinite alternate;
}
.kycLoadingSkeleton span:first-child { width: 48%; height: 30px; }
.kycLoadingSkeleton span:last-child { height: 180px; }
@keyframes kycSkeletonPulse { from { opacity: .52; } to { opacity: 1; } }

@media (max-width: 380px) {
  .kycPageWrap .kycContent { padding-right: 16px; padding-left: 16px; }
  .kycPageWrap .kycHeader { padding-right: 12px; padding-left: 12px; }
  .kycPageWrap .kycUploadBoxes { gap: 9px; }
  .kycPageWrap .kycUploadBox { min-height: 174px; padding: 9px; }
  .kycUploadInner { min-height: 130px; }
  .kycBenefitMetric { padding-right: 9px; padding-left: 9px; }
  .kycBenefitMetric strong { font-size: 12px; }
  .kycBenefitMetric span { font-size: 10px; }
  .kycDocumentMock { width: min(106px, 91%); }
}

@media (min-width: 720px) {
  .kycPageWrap .kycContent { padding-top: 42px; padding-bottom: 64px; }
  .kycPageWrap .kycUploadBox { min-height: 220px; }
  .kycUploadInner { min-height: 174px; }
  .kycDocumentMock { width: 146px; }
  .kycBenefitMetric span { min-height: auto; font-size: 13px; }
  .kycBenefitMetric strong { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .kycPageWrap.exKYCPage,
  .kycLoadingSkeleton span { animation: none !important; }
  .kycPageWrap .kycUploadBox { transition: none !important; }
}