/* Safari/iOS 滚动优化 - 禁用overscroll回弹 */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* ★ 客服聊天容器 - 使用dvh实现键盘自适应（主流方案） */
/* 100dvh在键盘弹出时自动缩小到可视区域高度，输入框自然在键盘上方 */
.exChatWrap {
  height: 100vh;
  height: 100dvh;
}

:root {
  /* 背景色 */
  --bg: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-card: #ffffff;
  --panel: rgba(0, 0, 0, 0.04);
  --panel-2: rgba(0, 0, 0, 0.06);
  
  /* 文字颜色 - 日间模式 */
  --text: #1a1a1a;
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-tertiary: #6b6b6b;
  --text-muted: #8c8c8c;
  --muted: #8c8c8c;
  
  /* 边框和阴影 */
  --border: rgba(0, 0, 0, 0.1);
  --border-color: #e5e5e5;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  
  /* 功能色 - 更专业的配色 */
  --green: #089981;
  --red: #f23645;
  --blue: #2563eb;
  --yellow: #f0b90b;

  --radius: 16px;
  --maxw: 1100px;
  color-scheme: light;
}

[data-theme="dark"] {
  /* 背景色 - 夜间模式 */
  --bg: #0d0d0d;
  --bg-primary: #0d0d0d;
  --bg-secondary: #1a1a1a;
  --bg-card: #1f1f1f;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-2: rgba(255, 255, 255, 0.10);
  
  /* 文字颜色 - 夜间模式（高对比度优化） */
  --text: #f5f5f5;
  --text-primary: #f5f5f5;
  --text-secondary: #d1d1d1;
  --text-tertiary: #a8a8a8;
  --text-muted: #888888;
  --muted: #a8a8a8;
  
  /* 边框和阴影 */
  --border: rgba(255, 255, 255, 0.12);
  --border-color: #3a3a3a;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  
  /* 功能色 - 夜间模式（专业配色） */
  --green: #26a69a;
  --red: #ef5350;
  --blue: #60a5fa;
  --yellow: #ffd966;
  
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px;
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease;
}

.headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brandMark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(74, 163, 255, 0.9), rgba(43, 214, 123, 0.7));
  box-shadow: 0 10px 30px rgba(74, 163, 255, 0.25);
}

.brandTitle {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brandTitle strong {
  font-size: 14px;
  letter-spacing: 0.2px;
}

.brandTitle span {
  font-size: 12px;
  color: var(--muted);
}

.headerRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 999px;
  color: var(--muted);
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  background: var(--panel-2);
  border-color: var(--border);
}

.btn:active {
  transform: translateY(1px);
}

.btnPrimary {
  border-color: rgba(74, 163, 255, 0.35);
  background: rgba(74, 163, 255, 0.15);
}

.btnPrimary:hover {
  background: rgba(74, 163, 255, 0.22);
}

.btnDanger {
  border-color: rgba(255, 77, 79, 0.35);
  background: rgba(255, 77, 79, 0.12);
}

.btnDanger:hover {
  background: rgba(255, 77, 79, 0.18);
}

.mainGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px 0;
}

.panel {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background-color 0.3s ease;
}

.panelHeader {
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panelHeader h2 {
  font-size: 14px;
  margin: 0;
  letter-spacing: 0.2px;
}

.panelBody {
  padding: 14px;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
}

.table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}

.rowLink {
  cursor: pointer;
}

.rowLink:hover {
  background: var(--panel);
}

.coinCell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.coinIcon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 18px;
}

.coinNames {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.coinNames strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coinNames span {
  font-size: 12px;
  color: var(--muted);
}

.price {
  font-variant-numeric: tabular-nums;
}

.pctUp { color: var(--green); }
.pctDown { color: var(--red); }

.kpiRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kpi {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.kpi label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.kpi div {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.chartWrap {
  height: 360px;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-secondary);
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 50;
}

.modal {
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid var(--border);
}

.modalHeader strong { font-size: 14px; }

.modalBody { padding: 14px; }

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.field label {
  font-size: 12px;
  color: var(--muted);
}

.input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  outline: none;
}

.input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 71, 255, 0.15);
}

.optModal {
  width: min(520px, 100%);
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(17,24,39,0.12);
  box-shadow: 0 22px 70px rgba(0,0,0,0.22);
  overflow: hidden;
  position: relative;
}

.optModal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(37, 99, 235, 0.06), transparent 62%),
    radial-gradient(900px 520px at 100% 10%, rgba(22, 199, 132, 0.05), transparent 62%),
    radial-gradient(900px 520px at 50% 120%, rgba(234, 57, 67, 0.045), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0));
  pointer-events: none;
}

.optModal::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.03) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.022) 0 1px, transparent 1px);
  background-size: 18px 18px, 22px 22px;
  opacity: 0.45;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.optHeader {
  position: relative;
  padding: 16px 16px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.optHeaderLeft {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.optSubTitle {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}

.optTitle {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--text);
}

.optClose {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: rgba(17,24,39,0.05);
  color: rgba(17,24,39,0.70);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.optClose:hover {
  background: rgba(17,24,39,0.08);
}

.optBody {
  position: relative;
  padding: 12px 16px 16px 16px;
}

.optRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.optDir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,0.10);
  background: rgba(255,255,255,0.70);
}

.optDirText {
  font-weight: 900;
}

.optDirArrow {
  flex: 0 0 auto;
}

.optLabel {
  font-size: 12px;
  color: var(--text-muted);
}

.optValue {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.optSectionTitle {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.optExpiryGrid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.optExpiryBtn {
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.82);
  border-radius: 12px;
  padding: 10px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.05s ease, border-color 120ms ease, background 120ms ease;
}

.optExpiryBtn:hover {
  border-color: rgba(17,24,39,0.18);
  background: rgba(255,255,255,0.92);
}

.optExpiryBtn:active {
  transform: translateY(1px);
}

.optExpirySec {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
}

.optExpiryPct {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.optExpiryBtnActive {
  border-color: rgba(17,24,39,0.18);
  background: rgba(17,24,39,0.03);
}

.optField {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.optMetaCards {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.optMetaCard {
  border: 1px solid rgba(17,24,39,0.08);
  background: rgba(255,255,255,0.78);
  border-radius: 14px;
  padding: 10px 12px;
}

.optMetaCardLabel {
  font-size: 12px;
  color: var(--text-muted);
}

.optMetaCardValue {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .optMetaCards {
    grid-template-columns: 1fr;
  }
}

.optInput {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  outline: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.optMeta {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.optMetaItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.optMetaItem strong {
  color: var(--text);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.optWarn {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #b91c1c;
}

.optActions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.optBtn {
  height: 44px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.optBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.optBtnGhost {
  background: linear-gradient(180deg, #f1f3f6, #d7dbe1);
  color: rgba(17,24,39,0.72);
  border: 1px solid rgba(17,24,39,0.10);
}

.optBtnGhost:hover {
  background: linear-gradient(180deg, #eef1f5, #cfd4dd);
}

.optBtnPrimary {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 10px 22px rgba(17,24,39,0.10);
}

.optBtnPrimaryDisabled {
  opacity: 0.55;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: none;
  box-shadow: none;
  border: 1px solid rgba(17,24,39,0.08);
}

.optBtnPrimaryDisabled.optUp {
  opacity: 1;
  background: linear-gradient(180deg, #9ae8c7, #5bd8a9) !important;
  color: rgba(255,255,255,0.96) !important;
}

.optBtnPrimaryDisabled.optDown {
  opacity: 1;
  background: linear-gradient(180deg, #ffb1c2, #ff7ea0) !important;
  color: rgba(255,255,255,0.96) !important;
}

.optUp {
  color: #16c784;
}

.optDown {
  color: #ea3943;
}

.optBtnPrimary.optUp {
  background: linear-gradient(180deg, #2fd18b, #11a96a);
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.optBtnPrimary.optDown {
  background: linear-gradient(180deg, #ff6b8a, #ff3c74);
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.optExpiryBtnActive.optUp {
  border-color: rgba(22,199,132,0.40);
  background: rgba(22,199,132,0.10);
}

.optExpiryBtnActive.optDown {
  border-color: rgba(234,57,67,0.40);
  background: rgba(234,57,67,0.10);
}

@media (max-width: 420px) {
  .optExpiryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.small {
  font-size: 12px;
  color: var(--muted);
}

.footerNote {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* Phase-2 retained route deck. Hidden boards stay mounted so returning to
   Home/Markets/Futures/Spot/Assets preserves component and chart state. */
.mofangRouteSurface {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  contain: layout paint style;
}
.mofangRouteSurface[hidden],
.mofangRouteSurface[data-route-active="0"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.mofangRouteSurface.is-active {
  display: block;
  visibility: visible;
}

.exScreen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* iOS安全区域适配 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* iOS全局防回弹 */
html, body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

.exContent {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 74px;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-overscroll-behavior: none;
}

/* 页面切换丝滑动画 */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.exPageAnim {
  animation: pageEnter 0.22s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  will-change: opacity, transform;
}

.exHome {
  padding: 0;
  background: #ffffff;
  min-height: 100%;
}

[data-theme="dark"] .exHome {
  background: var(--bg);
}

/* Legacy mk* market page styles removed after unified mobile market migration. */

.exHero {
  width: calc(100% - 32px);
  height: 160px;
  border-radius: 16px;
  overflow: hidden;
  background: #000000;
  margin: 8px 16px 0 16px;
  position: relative;
}

.exHeroOverlay {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.exHeroOverlayCrystal {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  max-width: 55%;
}

.exHeroOverlayChelsea {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  max-width: 45%;
}

.exHeroOverlayShow {
  opacity: 1;
}

.exHeroBrand {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.exHeroBrandB {
  color: rgba(255, 255, 255, 0.95);
}

.exHeroBrandX {
  color: rgba(255, 255, 255, 0.95);
}

.exHeroBrandSub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.80);
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.exHeroCrystalTitle {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.exHeroCrystalSub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.exHeroChelseaTitle {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.exHeroChelseaSub {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  white-space: pre-line;
}

.exHeroTrack {
  height: 100%;
  display: flex;
  transition: transform 320ms ease;
}

.exHeroMedia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  flex: 0 0 100%;
}

.exHeroDots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.exHeroDot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: pointer;
  padding: 0;
}

.exHeroDotActive {
  width: 16px;
  background: rgba(255,255,255,0.95);
}

.exTopRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
}

[data-theme="dark"] .exTopRow {
  background: var(--bg-card);
}

.exAvatarBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.exAvatarMark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.exSearchWrap {
  height: 36px;
  border-radius: 8px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex: 1;
  max-width: 280px;
}

.exSearchIcon {
  color: var(--muted);
  font-size: 13px;
}

.exSearch {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  width: 100%;
}

.exHomeSearch {
  position: relative;
  flex: 1;
}

.exHomeSearchDrop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(40px + 8px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  overflow: hidden;
  z-index: 9999;
  max-height: 400px;
  overflow-y: auto;
}

.exHomeSearchEmpty {
  padding: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.exHomeSearchItem {
  width: 100%;
  border: none;
  background: var(--bg-card);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.exHomeSearchItem:last-child {
  border-bottom: none;
}

.exHomeSearchItem:hover {
  background: rgba(17, 24, 39, 0.04);
}

.exHomeSearchLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.exHomeSearchIcon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f3f4f6;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.exHomeSearchIconImg {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.exHomeSearchIconFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  font-weight: 900;
  font-size: 13px;
}

.exHomeSearchNames {
  min-width: 0;
}

.exHomeSearchSym {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exHomeSearchRight {
  text-align: right;
  flex-shrink: 0;
  min-width: 80px;
}

.exHomeSearchPrice {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.exHomeSearchPct {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
}

.exTopIcons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.exIconBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exIconBtn .material-icons-round {
  font-size: 22px;
  color: #6b7280;
  transition: color 0.2s;
}

.exIconBtn:hover .material-icons-round {
  color: #2563eb;
}

.exIconBtnBell {
  position: relative;
}

.exDot {
  position: absolute;
  top: 0px;
  right: -2px;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

.exAsset {
  margin: 0;
  padding: 20px 16px 16px 16px;
  background: #ffffff;
}

[data-theme="dark"] .exAsset {
  background: var(--bg);
}

.exAssetTitleRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.exAssetTitle {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}

[data-theme="dark"] .exAssetTitle {
  color: var(--text-tertiary);
}

.exEyeBtn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #999999;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.exAssetValue {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: #1a1a1a;
  line-height: 1.1;
}

.exAssetUnit {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-left: 6px;
  letter-spacing: 0;
}

[data-theme="dark"] .exAssetUnit {
  color: var(--text-tertiary);
}

[data-theme="dark"] .exAssetValue {
  color: var(--text);
}

.exAssetFiat {
  margin-top: 6px;
  font-size: 14px;
  color: #999999;
}

.exPromoCard {
  margin: 12px 16px 0 16px;
  padding: 16px 18px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid transparent;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .exPromoCard {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.exContractLeft {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.exContractIcon {
  font-size: 22px;
  color: #374151;
}

[data-theme="dark"] .exContractIcon {
  color: var(--text-secondary);
}

.exContractTitle {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
}

[data-theme="dark"] .exContractTitle {
  color: var(--text);
}

.exContractSub {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .exContractSub {
  color: var(--text-tertiary);
}


.exContractBadge {
  font-size: 11px;
  font-weight: 700;
  color: #065f46;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.22);
  padding: 2px 8px;
  border-radius: 999px;
}

[data-theme="dark"] .exContractBadge {
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.28);
}

.exContractRight {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  z-index: 1;
}

.exContractCta {
  font-size: 13px;
  font-weight: 700;
  color: #10b981;
}

.exContractArrow {
  font-size: 16px;
  color: #10b981;
}

.exPromoIcon {
  font-size: 28px;
  color: #10b981;
  flex-shrink: 0;
}

.exPromoLeft {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.exPromoTitle {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

[data-theme="dark"] .exPromoTitle {
  color: var(--text);
}

.exPromoSub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

[data-theme="dark"] .exPromoSub {
  color: var(--text-tertiary);
}

.exPromoRight {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #10b981;
  font-size: 14px;
  font-weight: 500;
}

.exQuickGrid {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 18px 16px 22px 16px;
  background: transparent;
  margin: 4px 0 0 0;
}

[data-theme="dark"] .exQuickGrid {
  background: transparent;
}

.exQuickItem {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  cursor: pointer;
  min-width: 60px;
}

.exQuickItem:active {
  opacity: 0.7;
}

.exQuickIcon {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid #e6e8ee;
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
}

[data-theme="dark"] .exQuickIcon {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.exQuickIconSvg {
  display: block;
  font-size: 22px;
  color: #111827;
}

[data-theme="dark"] .exQuickIconSvg {
  color: var(--text-secondary);
}

.exQuickLabel {
  font-size: 12px;
  font-weight: 500;
  color: #666666;
  white-space: nowrap;
}

[data-theme="dark"] .exQuickLabel {
  color: var(--text-secondary);
}

.exSecTabs {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 16px 0 16px;
  background: #ffffff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .exSecTabs {
  background: var(--bg-card);
}

.exSecTab {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #999999;
  padding: 0 0 12px 0;
  position: relative;
  white-space: nowrap;
}

[data-theme="dark"] .exSecTab {
  color: var(--text-tertiary);
}

.exSecTab:hover {
  color: #1a1a1a;
}

[data-theme="dark"] .exSecTab:hover {
  color: var(--text);
}

.exSecTabActive {
  color: #1a1a1a;
  font-weight: 600;
}

[data-theme="dark"] .exSecTabActive {
  color: var(--text);
}

.exSecTabActive::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #1a1a1a;
  border-radius: 2px;
}

[data-theme="dark"] .exSecTabActive::after {
  background: var(--text);
}

.exMarketList {
  padding: 0 16px 16px 16px;
  background: #ffffff;
}

[data-theme="dark"] .exMarketList {
  background: var(--bg-card);
}

.exMarketMoreWrap {
  padding: 12px 0 4px 0;
  display: flex;
  justify-content: center;
}

.exMarketMoreBtn {
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.exMarketMoreBtn:hover {
  background: var(--panel);
}

.exSec {
  margin-top: 12px;
  padding: 18px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.exSecTitle {
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--text);
}

.exSecTitleDot {
  color: #2563eb;
}

.exSecList {
  margin-top: 14px;
  display: grid;
  gap: 18px;
}

.exSecItem {
  text-align: center;
}

.exSecIcon {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.exSecIconSvg {
  display: block;
}

.exSecItemTitle {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.exSecItemDesc {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-tertiary);
  white-space: pre-line;
}

.exEvt {
  margin-top: 12px;
}

.exEvtTitle {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.18;
}

.exEvtTitleDot {
  color: #2563eb;
}

.exEvtList {
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.exEvtCard {
  border-radius: 18px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 10px 26px rgba(17,24,39,0.12);
}

.exEvtImg {
  height: 190px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.exEvtOverlay {
  width: 100%;
  padding: 14px 14px;
}

.exEvtCardTitle {
  color: rgba(255,255,255,0.96);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  white-space: pre-line;
  text-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

@media (max-width: 420px) {
  .exEvtImg {
    height: 170px;
  }
  .exEvtCardTitle {
    font-size: 18px;
  }
}

.exPartner {
  margin-top: 18px;
  padding-top: 6px;
}

.exPartnerTitle {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--text);
}

.exPartnerTitleDot {
  color: #2563eb;
}

.exPartnerDesc {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-tertiary);
  white-space: pre-line;
}

.exPartnerBanner {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  height: 190px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 26px rgba(17,24,39,0.12);
}

.exPartnerMarquee {
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

.exPartnerMarquee::before,
.exPartnerMarquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  pointer-events: none;
  z-index: 2;
}

.exPartnerMarquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.exPartnerMarquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

.exPartnerMarqueeTrack {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 12px 18px;
  width: max-content;
  animation: exPartnerMarquee 18s linear infinite;
}

.exPartnerLogo {
  height: 22px;
  width: auto;
  opacity: 0.92;
  filter: grayscale(1);
}

@keyframes exPartnerMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 420px) {
  .exPartnerTitle {
    font-size: 22px;
  }
  .exPartnerBanner {
    height: 170px;
  }
  .exPartnerMarqueeTrack {
    gap: 20px;
    padding: 10px 14px;
  }
  .exPartnerLogo {
    height: 18px;
  }
}

.exFooter {
  margin-top: 18px;
  padding: 14px 0 12px 0;
}

.exFooterBrand {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}

.exFooterCopy {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.exFooterSocial {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.exFooterSocialBtn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #111827;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
}

.exFooterSocialBtn:hover {
  background: #0b1220;
}

.exFooterSocialSvg {
  display: block;
}

.exMarketRow {
  display: grid;
  grid-template-columns: 2.2fr 1.5fr 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 6px;
  border-bottom: none;
  border-radius: 10px;
  cursor: pointer;
}

[data-theme="dark"] .exMarketRow {
  border-bottom-color: var(--border);
}

.exMarketRow:last-child {
  border-bottom: none;
}

.exMarketRow:hover {
  background: rgba(17, 24, 39, 0.04);
}

[data-theme="dark"] .exMarketRow:hover {
  background: rgba(255, 255, 255, 0.06);
}

.exMarketRow:active {
  opacity: 0.7;
}

.exMarketLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.exMarketIcon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  border: 1px solid #eef0f3;
  display: grid;
  place-items: center;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

[data-theme="dark"] .exMarketIcon {
  background: var(--bg-secondary);
  border-color: rgba(255, 255, 255, 0.08);
}

.exMarketIconImg {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.exMarketIconFallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  font-weight: 900;
  font-size: 14px;
}

.exMarketNames {
  min-width: 0;
}

.exMarketPair {
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 1.1;
}

.exMarketBase {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .exMarketBase {
  color: var(--text);
}

.exMarketSlash {
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  margin: 0 1px;
}

[data-theme="dark"] .exMarketSlash {
  color: var(--text-tertiary);
}

.exMarketQuote {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
}

[data-theme="dark"] .exMarketQuote {
  color: var(--text-tertiary);
}

.exMarketSym {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

[data-theme="dark"] .exMarketSym {
  color: var(--text);
}

.exMarketSub {
  margin-top: 3px;
  font-size: 12px;
  color: #999999;
}

.exMarketSparkWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.exSpark {
  display: block;
}

.exSparkPath {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  transition: none;
}

.exSparkVisible .exSparkPath {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.exSparkUp {
  stroke: rgba(16, 185, 129, 0.9);
}

.exSparkDown {
  stroke: rgba(239, 68, 68, 0.9);
}

@keyframes exSparkDraw {
  to {
    stroke-dashoffset: 0;
  }
}

[data-theme="dark"] .exMarketSub {
  color: var(--text-muted);
}

.exMarketMid {
  text-align: center;
}

.exMarketPrice {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

[data-theme="dark"] .exMarketPrice {
  color: var(--text);
}

.exMarketFiat {
  margin-top: 2px;
  font-size: 11px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

[data-theme="dark"] .exMarketFiat {
  color: var(--text-muted);
}

.exMarketPct {
  min-width: 0;
  text-align: right;
  padding: 0;
  border-radius: 0;
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: #111827;
  background: transparent;
}

.exMarketPct.pctUp {
  color: #10b981;
  background: transparent;
}

.exMarketPct.pctDown {
  color: #ef4444;
  background: transparent;
}

[data-theme="dark"] .exMarketPct {
  color: var(--text);
}

[data-theme="dark"] .exMarketPct.pctUp {
  color: #34d399;
  background: transparent;
}

[data-theme="dark"] .exMarketPct.pctDown {
  color: #f87171;
  background: transparent;
}

.exBottomNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px)) 6px;
  transition: background-color 0.3s ease;
  z-index: 100;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.exBottomTab {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: var(--muted);
  letter-spacing: 0.1px;
  transition: color 140ms ease;
}

.exBottomTabActive {
  color: var(--blue);
}

.exBottomIcon {
  width: 22px;
  height: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.exBottomLabel {
  font-size: 11px;
  font-weight: 800;
}

/* BingX mobile navigation: original icon assets and target interaction geometry. */
.exBottomNav.bingxBottomNav {
  height: calc(65px + env(safe-area-inset-bottom, 0px));
  padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
  background: #050505;
  border-top: 1px solid #1b1b1d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bingxBottomNav .exBottomTab {
  height: 55px;
  min-width: 0;
  padding: 0;
  gap: 1px;
  color: #96989e;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease;
}

.bingxBottomNav .exBottomTab:active {
  transform: none !important;
  opacity: 1 !important;
}

.bingxBottomNav .exBottomTabActive { color: #0f5fff; }

.bingxBottomNav .exBottomIcon {
  width: 56px;
  height: 28px;
  border-radius: 16px;
  transition: background-color .18s ease, transform .14s ease;
}

.bingxBottomNav .exBottomIconMask {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--bottom-icon) center / contain no-repeat;
  mask: var(--bottom-icon) center / contain no-repeat;
}

.bingxBottomNav .exBottomLabel {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.bingxBottomNav .exBottomTabActive .exBottomIcon {
  background: rgba(15, 95, 255, .17);
  animation: bingxBottomPill .22s cubic-bezier(.2,.8,.2,1);
}

.bingxBottomNav .exBottomTab:active .exBottomIcon { transform: scale(.88); }

@keyframes bingxBottomPill {
  0% { transform: scale(.84); }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.exPage {
  padding: 10px 12px 14px 12px;
}

.exPageTop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 10px 0;
}

.exPageBack {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 14px;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exPageBack .material-icons-round {
  font-size: 20px;
}

.exPageTitle {
  font-size: 16px;
  font-weight: 900;
}

.exPageBody {
  padding-top: 6px;
}

/* Customer service center: compact dark gateway before entering live chat. */
.bxSupportPage {
  box-sizing: border-box;
  min-height: calc(100dvh - 65px);
  padding: 12px 16px max(24px, env(safe-area-inset-bottom));
  color: #f7f8fa;
  background: #050505;
}

.exPageAnim:has(.bxSupportPage) {
  min-height: calc(100dvh - 65px);
  background: #050505;
}

.bxSupportHeader {
  min-height: 44px;
  gap: 12px;
  padding: 2px 0 6px;
}

.bxSupportPage .bxUnifiedBack {
  flex: 0 0 40px;
  color: #f4f5f7;
  background: #17191d;
  border: 1px solid #262930;
  border-radius: 50%;
  box-shadow: none;
}

.bxSupportPage .exPageTitle {
  color: #f7f8fa;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.2px;
}

.bxSupportBody {
  box-sizing: border-box;
  display: flex;
  min-height: min(570px, calc(100dvh - 92px));
  padding: clamp(70px, 13vh, 112px) 8px 32px;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.bxSupportAvatar {
  display: block;
  width: 82px;
  height: 82px;
  margin: 0 0 22px;
  object-fit: contain;
}

.bxSupportGreeting {
  box-sizing: border-box;
  width: 100%;
  padding: 0 10px;
  overflow: hidden;
  color: #f7f8fa;
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -.45px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bxSupportHours {
  margin-top: 14px;
  color: #8f949e;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.5;
}

.bxSupportContact {
  width: 100%;
  max-width: 344px;
  min-height: 52px;
  margin-top: 34px;
  padding: 14px 24px;
  color: #fff;
  background: #1f6bff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bxSupportContact:active {
  background: #195fe8;
  transform: scale(.99);
}

@media (max-height: 650px) {
  .bxSupportBody {
    min-height: auto;
    padding-top: 46px;
  }
}

.exDepTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 2px 0 12px 0;
}

.exDepTab {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  color: var(--muted);
}

.exDepTabActive {
  border-color: rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue);
}

.exDepCard {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  transition: background-color 0.3s ease;
}

.exDepCardInner {
  background: rgba(255,255,255,0.92);
}

.exDepTitle {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}

.exDepSub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.exDepForm {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  position: relative;
}

.exDepField {
  display: grid;
  gap: 6px;
}

.exDepLabel {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.exDepInput,
.exDepSelect {
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 0 12px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.exDepAddr {
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--bg-secondary);
  padding: 10px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  color: var(--text);
}

.exDepActions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.exDepBtn {
  height: 40px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
}

.exDepBtnPrimary {
  border-color: rgba(37, 99, 235, 0.35);
  background: #ffffff;
  color: #2563eb;
}

.exDepBtnGhost {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
}

.exDepKv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.exDepKv:last-child {
  border-bottom: none;
}

.exDepKv span {
  display: inline-block;
  min-width: 74px;
  color: var(--muted);
  font-size: 12px;
  margin-right: 8px;
}

.exDepKv strong {
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.exDepMiniBtn {
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  color: rgba(17, 24, 39, 0.78);
}

.exDepHint {
  margin-top: 12px;
  padding: 10px 0;
  white-space: pre-line;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.exDepMetaRow {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.exDepMeta {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.92);
}

.exDepMetaK {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 800;
}

.exDepMetaV {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.exDepQrRow {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  align-items: start;
}

.exDepQr {
  width: 108px;
  height: 108px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
}

.exDepAddrBox {
  min-width: 0;
}

.exDepRecCard {
  margin-top: 6px;
}

.exDepRecList {
  margin-top: 10px;
  display: grid;
}

.exDepRecRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.exDepRecRow:last-child {
  border-bottom: none;
}

.exDepRecLeft {
  min-width: 0;
}

.exDepRecMain {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exDepRecSub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exDepRecEmpty {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.exDepBadge {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
}

.exDepBadgeOk {
  background: #16c784;
}

.exDepBadgeMid {
  background: #2563eb;
}

.exDepBadgeWait {
  background: rgba(17, 24, 39, 0.55);
}

.exDepBadgeErr {
  background: #ea3943;
}

.exCashBankRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.exCashBankInfo {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.02);
  padding: 10px 12px;
  min-width: 0;
}

.exCashBankMain {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exCashBankSub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exCashBankEmpty {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border: 2px dashed rgba(0,0,0,0.15);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: center;
  background: rgba(17, 24, 39, 0.02);
}

.exModalMask {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 12px;
  z-index: 99999;
  -webkit-transform: none !important;
  transform: none !important;
  isolation: isolate;
}

.exModalSheet {
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  border-radius: 18px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.exModalHead {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.exModalTitle {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}

.exModalClose {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(17, 24, 39, 0.02);
  cursor: pointer;
  font-size: 14px;
}

.exModalBody {
  padding: 12px 14px 14px 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.exModalActions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.exBankList {
  display: grid;
  gap: 10px;
}

.exBankItem {
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  border-radius: 14px;
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.exBankItemActive {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
}

.exBankItemLeft {
  min-width: 0;
}

.exBankItemMain {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exBankItemSub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exBankItemMark {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.exBankEmpty {
  padding: 10px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.exIceHero {
  border-radius: 0;
  border: none;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: none;
  padding: 22px 16px 10px 16px;
  overflow: hidden;
  position: relative;
}

.exIceHero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none !important;
  pointer-events: none;
}

.exIceHeroTop {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
  align-items: center;
}

.exIceHeroLeft {
  min-width: 0;
}

.exIceK {
  font-size: 14px;
  font-weight: 1000;
  color: var(--text);
}

.exIceV {
  margin-top: 6px;
  font-size: 44px;
  font-weight: 1100;
  letter-spacing: -0.8px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.exIceSub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

.exIceHeroRight {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  background: transparent;
}

.exIceCrystalStage {
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

.exIceCrystalChroma {
  position: relative;
  width: 100%;
  height: 100%;
}

.exIceCrystalCanvas {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 70%;
  animation: exIceFloat 3.6s ease-in-out infinite;
}

.exIceCrystalSrc {
  position: absolute;
  left: -99999px;
  top: -99999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.exIceCrystalStage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0) 48%, rgba(255,255,255,0.92) 70%, rgba(255,255,255,1) 84%);
  pointer-events: none;
  z-index: 2;
}

.exIceHeroRight::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: none;
  filter: blur(0.2px);
  pointer-events: none;
}

.exIceHeroRight::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: none;
  pointer-events: none;
  z-index: 2;
}

.exIceCrystal {
  width: 170px;
  height: auto;
  transform-origin: 50% 70%;
  animation: exIceFloat 3.6s ease-in-out infinite;
}

.exIceCrystalVideo {
  width: 220px;
  height: 220px;
  object-fit: contain;
  transform-origin: 50% 70%;
  animation: exIceFloat 3.6s ease-in-out infinite;
  border-radius: 0;
  background: transparent;
  position: relative;
  z-index: 1;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 54%, rgba(0,0,0,0) 80%);
  mask-image: radial-gradient(circle at 50% 42%, #000 54%, rgba(0,0,0,0) 80%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mix-blend-mode: normal;
  filter: saturate(1.02) contrast(1.02);
}

@keyframes exIceFloat {
  0% {
    transform: translateY(0) rotate(-1.2deg);
    filter: drop-shadow(0 18px 26px rgba(37, 99, 235, 0.22));
  }
  50% {
    transform: translateY(-8px) rotate(1.2deg);
    filter: drop-shadow(0 26px 34px rgba(37, 99, 235, 0.28));
  }
  100% {
    transform: translateY(0) rotate(-1.2deg);
    filter: drop-shadow(0 18px 26px rgba(37, 99, 235, 0.22));
  }
}

.exIceHint {
  position: relative;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.06);
  color: rgba(37, 99, 235, 0.98);
  font-size: 12px;
  line-height: 1.55;
}

.exIceHintItem + .exIceHintItem {
  margin-top: 4px;
}

.exIceQuickGrid {
  position: relative;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.exIceQuickCard {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(17, 24, 39, 0.02);
  padding: 12px;
}

.exIceQuickTitle {
  font-size: 13px;
  font-weight: 1000;
  color: var(--text);
}

.exIceQuickValue {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 1100;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.exIceQuickMeta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.exIcePlus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.exIceBtn {
  margin-top: 10px;
  height: 38px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  font-size: 13px;
  font-weight: 1000;
  cursor: pointer;
}

.exIceBtnPrimary {
  border-color: rgba(37, 99, 235, 0.30);
  background: #2563eb;
  color: #ffffff;
}

.exIceBtnGhost {
  border-color: rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  color: rgba(17, 24, 39, 0.80);
}

.exIceSectionTitle {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 1100;
  color: var(--text);
  padding: 2px 2px;
}

.exIceTaskCard {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  padding: 14px;
}

.exIceTaskTop {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.exIceTaskClock {
  min-width: 76px;
  height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(17, 24, 39, 0.03);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 1100;
  color: rgba(17, 24, 39, 0.78);
  font-variant-numeric: tabular-nums;
}

.exIceTaskTitle {
  font-size: 13px;
  font-weight: 1100;
  color: var(--text);
}

.exIceTaskSub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

.exIceTaskArt {
  display: grid;
  place-items: center;
}

.exIceChest {
  width: 86px;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(37, 99, 235, 0.16));
}

.exIceChestImg {
  width: 86px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 26px rgba(37, 99, 235, 0.16));
}

.exIceProgressRow {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.exIceProgressTrack {
  height: 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
  overflow: hidden;
  position: relative;
}

.exIceProgressFill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 1), rgba(34, 197, 94, 0.92));
  position: relative;
}

.exIceProgressFill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent);
  transform: translateX(-60%);
  animation: exIceShimmer 1.6s ease-in-out infinite;
}

@keyframes exIceShimmer {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(120%); }
}

.exIceProgressMeta {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 1000;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.exIceTaskActions {
  margin-top: 12px;
}

.exIceLink {
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 12px;
  font-weight: 1100;
  cursor: pointer;
  padding: 0;
}

.exWelWrap {
  display: grid;
  gap: 12px;
}

.exBingxWrap {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: #ffffff;
}

.exBingxFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}

.exBingxBack {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(240, 240, 240, 0.92);
  color: rgba(0, 0, 0, 0.82);
  font-size: 18px;
  font-weight: 900;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,0.10);
}

.exWelHero {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background:
    radial-gradient(700px 260px at 12% 0%, rgba(37, 99, 235, 0.24), transparent 60%),
    radial-gradient(620px 260px at 92% 0%, rgba(34, 197, 94, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  box-shadow: 0 10px 28px rgba(0,0,0,0.07);
  padding: 16px 14px;
}

.exWelHeroTag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

.exWelHeroTitle {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 1000;
  color: var(--text);
  letter-spacing: 0.2px;
}

.exWelHeroSub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.55;
}

.exWelHeroActions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.exWelBtn {
  height: 40px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.10);
  background: #ffffff;
  color: rgba(17, 24, 39, 0.86);
}

.exWelBtnPrimary {
  border-color: rgba(37, 99, 235, 0.30);
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #ffffff;
}

.exWelBtnGhost {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
}

.exWelBtnDisabled,
.exWelBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.exWelStats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.exWelStatCard {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 12px 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.exWelStatLabel {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 900;
}

.exWelStatValue {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 1000;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.exWelCard {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.exWelCardTitle {
  font-size: 14px;
  font-weight: 1000;
  color: var(--text);
}

.exWelSteps {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.exWelStep {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
}

.exWelStepNo {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(17, 24, 39, 0.06);
  border: 1px solid rgba(0,0,0,0.08);
  color: rgba(17, 24, 39, 0.78);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

.exWelStepTitle {
  font-size: 13px;
  font-weight: 1000;
  color: var(--text);
}

.exWelStepSub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.55;
}

.exWelRedeemGrid {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.exWelRedeemItem {
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(17, 24, 39, 0.02);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.exWelRedeemTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.exWelRedeemTitle {
  font-size: 13px;
  font-weight: 1000;
  color: var(--text);
}

.exWelRedeemCost {
  font-size: 12px;
  font-weight: 1000;
  color: rgba(17, 24, 39, 0.68);
  font-variant-numeric: tabular-nums;
}

.exWelRedeemSub {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.55;
}

.exWelRecordList {
  margin-top: 10px;
  display: grid;
}

.exWelRecordRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.exWelRecordRow:last-child {
  border-bottom: none;
}

.exWelRecordMain {
  min-width: 0;
}

.exWelRecordTitle {
  font-size: 13px;
  font-weight: 1000;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exWelRecordMeta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.exWelRecordStatus {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(17, 24, 39, 0.04);
  color: rgba(17, 24, 39, 0.78);
  white-space: nowrap;
}

.exWelEmpty {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.exWelFaq {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.exWelFaqItem {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.02);
  padding: 10px 12px;
}

.exWelFaqItem summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 1000;
  color: var(--text);
}

.exWelFaqBody {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.exWelFootNote {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.exAssetCard {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  margin-bottom: 12px;
}

.exAssetCardValue {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.exPosList {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.exPosRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 900px) {
  .mainGrid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
  .kpiRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .table th:nth-child(3), .table td:nth-child(3) {
    display: none;
  }
  .exWelStats {
    grid-template-columns: 1fr;
  }

  .exIceHeroTop {
    grid-template-columns: 1fr 150px;
  }

  .exIceV {
    font-size: 40px;
  }

  .exIceCrystal {
    width: 146px;
  }

  .exIceCrystalVideo {
    width: 146px;
    height: 146px;
  }

  .exIceCrystalStage {
    width: 160px;
    height: 160px;
  }

  .exIceQuickGrid {
    grid-template-columns: 1fr;
  }

  .exIceTaskTop {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .exIceTaskArt {
    grid-column: 2;
    justify-self: end;
    margin-top: -8px;
  }

}

/* 资产页面标题样式 */
.bxAssetsTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

/* 统一返回按钮样式 */
.kycBackBtn,
.bxLoginBack,
.exBingxBack {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.kycBackBtn .material-icons-round,
.bxLoginBack .material-icons-round,
.exBingxBack .material-icons-round {
  font-size: 20px;
}

/* K线图页面返回按钮 */
/* ========== 保护元素隔离规则 ========== */
/* 只保护冰晶视频不受全局动画影响 */
.exProtectedVideo,
.exProtectedVideo *,
.exProtectedVideo video {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* 福利页面动画 */
.exWelfarePage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 行情页面动画 */
.exMarketPage, .exMarketsPage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 资产页面动画 */
.bxAssetsPage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bxAssetsHeader {
  animation: fadeInDown 0.35s ease-out both;
}

.bxAssetsCard {
  animation: fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 100ms;
}

.bxAssetsList, .bxAssetsListItem {
  animation: fadeInUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bxAssetsListItem:nth-child(1) { animation-delay: 50ms; }
.bxAssetsListItem:nth-child(2) { animation-delay: 80ms; }
.bxAssetsListItem:nth-child(3) { animation-delay: 110ms; }
.bxAssetsListItem:nth-child(4) { animation-delay: 140ms; }
.bxAssetsListItem:nth-child(5) { animation-delay: 170ms; }

/* 通知页面动画 */
.exNotificationPage, .exNotificationsPage, .exNotifications {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.exNotificationItem {
  animation: fadeInLeft 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background-color 0.15s ease !important;
}

.exNotificationItem:nth-child(1) { animation-delay: 0ms; }
.exNotificationItem:nth-child(2) { animation-delay: 40ms; }
.exNotificationItem:nth-child(3) { animation-delay: 80ms; }
.exNotificationItem:nth-child(4) { animation-delay: 120ms; }
.exNotificationItem:nth-child(5) { animation-delay: 160ms; }

/* KYC身份验证页面动画 */
.exKYCPage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 银行卡管理页面动画 */
.exBankCardPage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 卡券中心页面动画 */
.exCouponsPage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 安全设置页面动画 */
.exSecurityPage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 偏好设定页面动画 */
.exPreferencePage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 关于我们页面动画 */
.exAboutPage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 个人中心页面动画 */
.exProfilePage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 合约页面动画 */
.exFuturesPage {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ========== 全方位动画效果系统 ========== */

/* 基础动画定义 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 页面切换动画 - 使用纯淡入避免跳动 */
.exPage, .exHome, .exContent {
  animation: fadeIn 0.25s ease-out both;
}

/* 页面头部动画 - 使用纯淡入避免跳动 */
.exPageTop, .exHomeTop, .exTop {
  animation: fadeIn 0.2s ease-out both;
}

/* 底部导航动画 */
.exBottomNav {
  animation: slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.exBottomNavItem {
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.exBottomNavItem:active {
  transform: scale(0.85) !important;
}

.exBottomNavItem.active {
  animation: pulse 0.3s ease-out;
}

.exBottomNavIcon {
  transition: transform 0.2s ease;
}

.exBottomNavItem:active .exBottomNavIcon {
  transform: scale(0.8);
}

/* 所有按钮点击效果 */
button:not(.exProtectedVideo *), 
[role="button"]:not(.exProtectedVideo *),
.exIconBtn, 
.exBtn {
  transition: all 0.15s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

button:not(.exProtectedVideo *):active, 
[role="button"]:not(.exProtectedVideo *):active,
.exIconBtn:active, 
.exBtn:active {
  transform: scale(0.92) !important;
  opacity: 0.85 !important;
}

/* 卡片动画 */
.exCard, .exMarketCard, .exAssetCard {
  animation: fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.exCard:active, .exMarketCard:active, .exAssetCard:active {
  transform: scale(0.98) !important;
}

/* 列表项逐个显示动画 */
.exListItem, .exMenuItem {
  animation: fadeInUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.exListItem:nth-child(1), .exMenuItem:nth-child(1) { animation-delay: 0ms; }
.exListItem:nth-child(2), .exMenuItem:nth-child(2) { animation-delay: 30ms; }
.exListItem:nth-child(3), .exMenuItem:nth-child(3) { animation-delay: 60ms; }
.exListItem:nth-child(4), .exMenuItem:nth-child(4) { animation-delay: 90ms; }
.exListItem:nth-child(5), .exMenuItem:nth-child(5) { animation-delay: 120ms; }
.exListItem:nth-child(6), .exMenuItem:nth-child(6) { animation-delay: 150ms; }
.exListItem:nth-child(7), .exMenuItem:nth-child(7) { animation-delay: 180ms; }
.exListItem:nth-child(8), .exMenuItem:nth-child(8) { animation-delay: 210ms; }

/* 个人中心菜单项动画 */
.exProfileMenuItem {
  animation: fadeInLeft 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.exProfileMenuItem:nth-child(1) { animation-delay: 50ms; }
.exProfileMenuItem:nth-child(2) { animation-delay: 80ms; }
.exProfileMenuItem:nth-child(3) { animation-delay: 110ms; }
.exProfileMenuItem:nth-child(4) { animation-delay: 140ms; }
.exProfileMenuItem:nth-child(5) { animation-delay: 170ms; }
.exProfileMenuItem:nth-child(6) { animation-delay: 200ms; }

.exProfileMenuItem:active {
  transform: translateX(4px) !important;
  background-color: rgba(0, 71, 255, 0.08) !important;
}

/* 头像动画 */
.exAvatar, .exUserAvatar {
  animation: scaleIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 余额/数字显示动画 */
.exBalance, .exAmount {
  animation: fadeIn 0.5s ease-out both;
  animation-delay: 150ms;
}

/* KYC/安全页面动画 */
.exKYC, .exSecurity, [class*="KYC"], [class*="Security"] {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* 帮助/关于页面动画 */
.exHelp, .exAbout, [class*="Help"], [class*="About"] {
  animation: fadeInUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* 登录/注册页面动画 */
.bxLogin, .bxRegister, .exLogin, .exRegister {
  animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.bxLoginBtn, .exLoginBtn {
  transition: all 0.2s ease !important;
}

.bxLoginBtn:active, .exLoginBtn:active {
  transform: scale(0.96) !important;
}

/* 语言选择动画 */
.exLangOption {
  animation: fadeInRight 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background-color 0.15s ease !important;
}

.exLangOption:nth-child(1) { animation-delay: 0ms; }
.exLangOption:nth-child(2) { animation-delay: 40ms; }
.exLangOption:nth-child(3) { animation-delay: 80ms; }
.exLangOption:nth-child(4) { animation-delay: 120ms; }
.exLangOption:nth-child(5) { animation-delay: 160ms; }

/* Toast/提示动画 */
.exToast, [class*="Toast"] {
  animation: bounceIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* 模态框/弹窗动画 */
.exModal, .exPopup, .exDialog {
  animation: scaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.exModalOverlay, .exPopupOverlay {
  animation: fadeIn 0.2s ease-out both;
}

/* 输入框聚焦效果 */
input:focus, textarea:focus, select:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 标签页切换动画 */
.exTab {
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.exTab.active {
  animation: pulse 0.2s ease-out;
}

/* 行情页面币种列表动画 */
.exCoinRow {
  animation: fadeInUp 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: background-color 0.15s ease !important;
}

.exCoinRow:nth-child(1) { animation-delay: 0ms; }
.exCoinRow:nth-child(2) { animation-delay: 25ms; }
.exCoinRow:nth-child(3) { animation-delay: 50ms; }
.exCoinRow:nth-child(4) { animation-delay: 75ms; }
.exCoinRow:nth-child(5) { animation-delay: 100ms; }
.exCoinRow:nth-child(6) { animation-delay: 125ms; }
.exCoinRow:nth-child(7) { animation-delay: 150ms; }
.exCoinRow:nth-child(8) { animation-delay: 175ms; }
.exCoinRow:nth-child(9) { animation-delay: 200ms; }
.exCoinRow:nth-child(10) { animation-delay: 225ms; }

.exCoinRow:active {
  background-color: rgba(0, 71, 255, 0.05) !important;
}

/* 快捷操作按钮动画 */
.exQuickBtn {
  animation: scaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.15s ease !important;
}

.exQuickBtn:nth-child(1) { animation-delay: 100ms; }
.exQuickBtn:nth-child(2) { animation-delay: 150ms; }
.exQuickBtn:nth-child(3) { animation-delay: 200ms; }
.exQuickBtn:nth-child(4) { animation-delay: 250ms; }

.exQuickBtn:active {
  transform: scale(0.9) !important;
}

/* 图表canvas动画效果 - 排除受保护的元素 */
canvas:not(.exProtectedVideo canvas) {
  animation: fadeIn 0.6s ease-out both;
}

/* ========== 夜间模式隔离样式 ========== */
/* K线图页面夜间模式 - 使用html属性选择器确保优先级 */
/* 资产页面夜间模式 */
html[data-theme="dark"] .bxAssetsPage {
  background: #0d0d0d !important;
}

html[data-theme="dark"] .bxAssetsPremium .bxAssetsHeader,
/* 資産一覧 also has to opt out of the legacy dark slab below.
   That rule paints .bxAssetsList #1a1a1a, and on the premium page -- whose
   ground is #080b10 -- it lands as a lighter grey block sitting behind the
   USDT row with a hard edge on all four sides. The premium skin separates
   rows with hairlines instead, so the slab is not just redundant, it is the
   thing that reads as abrupt. .bxAssetsPremium .bxAssetsList already asks for
   transparent, but the dark rule carries an extra element in its selector and
   outranks it -- hence this override, matching how the header opts out. */
html[data-theme="dark"] .bxAssetsPremium .bxAssetsList { background: transparent !important; }
html[data-theme="dark"] .bxAssetsCard,
html[data-theme="dark"] .bxAssetsTrend,
html[data-theme="dark"] .bxAssetsHeader {
  background: #1a1a1a !important;
}

html[data-theme="dark"] .bxAssetsList {
  background: #1a1a1a !important;
}

html[data-theme="dark"] .bxAssetsListItem {
  background: transparent !important;
  border-bottom-color: #2a2a2a !important;
}

html[data-theme="dark"] .bxAssetsLabel,
html[data-theme="dark"] .bxAssetsValue,
html[data-theme="dark"] .bxAssetsCoin,
html[data-theme="dark"] .bxAssetsAmount {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .bxAssetsSubtext {
  color: #888 !important;
}

/* 福利页面冰晶视频 - 在夜间模式添加发光效果 */
html[data-theme="dark"] .exProtectedVideo video {
  filter: drop-shadow(0 0 20px rgba(100, 150, 255, 0.5)) !important;
}

/* 订单确认弹窗夜间模式 */
html[data-theme="dark"] .optModal {
  background: #1a1a1a !important;
  border-color: #333 !important;
}

html[data-theme="dark"] .optModal::before {
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(37, 99, 235, 0.1), transparent 62%),
    radial-gradient(900px 520px at 100% 10%, rgba(22, 199, 132, 0.08), transparent 62%),
    radial-gradient(900px 520px at 50% 120%, rgba(234, 57, 67, 0.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) !important;
}

html[data-theme="dark"] .optModal::after {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.022) 0 1px, transparent 1px) !important;
  mix-blend-mode: screen !important;
}

html[data-theme="dark"] .optHeader {
  border-bottom-color: #333 !important;
}

html[data-theme="dark"] .optClose {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
}

html[data-theme="dark"] .optClose:hover {
  background: rgba(255,255,255,0.15) !important;
}

html[data-theme="dark"] .optDir {
  background: rgba(0,0,0,0.3) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

html[data-theme="dark"] .optExpiryBtn {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

html[data-theme="dark"] .optExpiryBtn:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

html[data-theme="dark"] .optExpiryBtnActive {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

html[data-theme="dark"] .optInput {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .optMetaCard {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* 语言选择菜单夜间模式 */
html[data-theme="dark"] .exLangMenu {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
}

html[data-theme="dark"] .exLangMenu button {
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .exLangMenu button:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* 银行卡弹窗夜间模式 */
html[data-theme="dark"] .exModalSheet {
  background: #1a1a1a !important;
  border-color: #333 !important;
}

html[data-theme="dark"] .exModalHead {
  border-bottom-color: #333 !important;
}

html[data-theme="dark"] .exModalClose {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .exBankItem {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

html[data-theme="dark"] .exBankItemActive {
  background: rgba(59,130,246,0.2) !important;
  border-color: #3b82f6 !important;
}

html[data-theme="dark"] .exDepInput {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #f5f5f5 !important;
}

html[data-theme="dark"] .exDepLabel {
  color: #999 !important;
}

/* BingX logged-in home replacement: the captured mobile component owns its viewport. */
.exScreen:has(.bingxLoggedHome) {
  background: #000 !important;
}
.exContent:has(.bingxLoggedHome) {
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
.exPageAnim:has(.bingxLoggedHome) {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  animation: none !important;
}
.bingxLoggedHome {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
}
.bingxLoggedHome .bingxHomeMenuOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  z-index: 1200;
}
.bingxLoggedHome .bingxHomeMenuOverlay .bxCampaignMenuDrawer {
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.bingxHomeMenuHeaderActions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.bingxHomeSupportButton {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  place-items: center;
  cursor: pointer;
}
.bingxHomeSupportButton .material-icons-round {
  font-size: 23px;
  font-weight: 300;
}
.bingxLoggedMenuList > button {
  min-height: 48px;
}
.bingxLoggedHomeFrame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  border: 0;
  background: #000;
}

/* K-line pages keep their real market iframes in fixed layers at z-index
   100/110. The shared homepage drawer is portaled to body, so it must sit
   above those permanent chart layers rather than merely existing in the DOM
   behind them. This applies identically to spot and perpetual contracts. */
.klineCanonicalMenuOverlay,
.fmCanonicalMenuOverlay {
  z-index: 1000000 !important;
  pointer-events: none;
}
.klineCanonicalMenuOverlay.open,
.fmCanonicalMenuOverlay.open {
  pointer-events: auto;
}
@media (min-width: 560px) {
  .bingxLoggedHome {
    max-width: 492px;
    margin: 0 auto;
  }
}

/* BingX mobile futures market mirror — mobile-only production surface */
.exScreen:has(.bxmMarketPage) {
  background: #000 !important;
}
.exContent:has(.bxmMarketPage) {
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #000 !important;
}
.exPageAnim:has(.bxmMarketPage) {
  width: 100% !important;
  min-height: 100% !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
.bxmMarketPage,
.bxmMarketPage * { box-sizing: border-box; }
.bxmMarketPage {
  width: 100%;
  min-height: calc(100dvh - 64px);
  padding-bottom: 14px;
  overflow-x: hidden;
  background: #000;
  color: #f5f7fa;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", Arial, sans-serif;
}
.bxmHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  width: 100%;
  height: 65px;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #202124;
  background: #000;
}
.bxmLogo {
  display: block;
  width: 76px;
  height: 24px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
}
.bxmLogo img { display:block; width:76px; height:24px; }
.bxmHeaderActions { display:flex; align-items:center; gap:8px; }
.bxmIconButton,.bxmMenuButton {
  display:grid;
  width:31px;
  height:38px;
  padding:0;
  border:0;
  color:#fff;
  background:transparent;
  place-items:center;
  cursor:pointer;
}
.bxmIconButton svg { width:22px; height:22px; }
.bxmMenuButton { gap:4px; padding:9px 3px; }
.bxmMenuButton span { display:block; width:21px; height:2px; border-radius:2px; background:#fff; }
.bxmSearchBar { display:grid; width:100%; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; }
.bxmSearchBar svg { width:20px; height:20px; color:#c9cdd4; }
.bxmSearchBar input { min-width:0; height:38px; padding:0 12px; border:0; border-radius:8px; outline:0; color:#fff; background:#18191b; font-size:15px; }
.bxmSearchBar button { padding:8px 2px 8px 8px; border:0; color:#aeb3bb; background:transparent; font-size:14px; }
.bxmMarketMain { width:100%; background:#000; }
.bxmPrimaryTabs {
  display:flex;
  height:52px;
  padding:0 15px;
  align-items:flex-end;
  gap:27px;
  overflow-x:auto;
  border-bottom:1px solid #1b1c1f;
  scrollbar-width:none;
}
.bxmPrimaryTabs::-webkit-scrollbar,.bxmCategoryScroller::-webkit-scrollbar { display:none; }
.bxmPrimaryTabs button {
  position:relative;
  flex:0 0 auto;
  height:51px;
  padding:0;
  border:0;
  color:#92969d;
  background:transparent;
  font-size:16px;
  line-height:51px;
  white-space:nowrap;
}
.bxmPrimaryTabs button.active { color:#fff; }
.bxmPrimaryTabs button.active::after {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:2px;
  background:#fff;
  content:"";
}
.bxmCategoryScroller {
  display:flex;
  width:100%;
  height:48px;
  padding:0 15px;
  align-items:center;
  gap:25px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.bxmCategoryScroller button {
  display:flex;
  flex:0 0 auto;
  min-height:29px;
  padding:4px 0;
  align-items:center;
  gap:5px;
  border:0;
  border-radius:5px;
  color:#8d9199;
  background:transparent;
  font-size:14px;
  white-space:nowrap;
  scroll-snap-align:start;
}
.bxmCategoryScroller button.active { padding:4px 9px; color:#fff; background:#1d1f22; }
.bxmCategoryScroller em { padding:1px 4px; border-radius:3px; color:#ff9d0a; background:#3a2504; font-size:10px; font-style:normal; }
.bxmTableHead {
  display:grid;
  min-height:34px;
  padding:0 16px;
  grid-template-columns:minmax(0,1fr) 104px 82px;
  align-items:center;
  column-gap:6px;
  color:#858a93;
}
.bxmTableHead button { display:flex; min-width:0; padding:0; align-items:center; border:0; color:inherit; background:transparent; font-size:12px; white-space:nowrap; }
.bxmTableHead button:first-child { justify-content:flex-start; }
.bxmTableHead button:nth-child(2),.bxmTableHead button:nth-child(3) { justify-content:flex-end; }
.bxmTableHead b { padding:0 4px; color:#4e5157; font-weight:400; }
.bxmSortGlyph { display:inline-flex; width:7px; margin-left:4px; flex-direction:column; gap:2px; }
.bxmSortGlyph i { display:block; width:0; height:0; border-right:3px solid transparent; border-left:3px solid transparent; }
.bxmSortGlyph i:first-child { border-bottom:4px solid #50545b; }
.bxmSortGlyph i:last-child { border-top:4px solid #50545b; }
.bxmSortGlyph.active i:first-child { border-bottom-color:#aeb4bd; }
.bxmMarketList { width:100%; }
.bxmMarketRow {
  display:grid;
  width:100%;
  min-height:63px;
  padding:7px 16px;
  grid-template-columns:minmax(0,1fr) 104px 82px;
  align-items:center;
  column-gap:6px;
  border:0;
  color:#fff;
  background:#000;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.bxmMarketRow:active { background:#0d0e10; }
.bxmAssetCell { display:flex; min-width:0; align-items:center; gap:11px; }
.bxmAssetCell > img { width:30px; height:30px; flex:0 0 30px; border-radius:50%; object-fit:contain; }
.bxmAssetText { display:flex; min-width:0; flex-direction:column; gap:3px; }
.bxmAssetText strong { overflow:hidden; color:#fff; font-size:15px; font-weight:500; line-height:20px; text-overflow:ellipsis; white-space:nowrap; }
.bxmAssetText small { overflow:hidden; color:#8b9098; font-size:11px; line-height:14px; text-overflow:ellipsis; white-space:nowrap; }
.bxmAssetText i { display:inline-block; padding:0 2px; border-radius:2px; font-size:9px; font-style:normal; line-height:13px; vertical-align:1px; }
.bxmPerpTag { color:#fff; background:#24272b; }
.bxmHotTag { color:#ff9800; background:#3a2504; }
.bxmPriceCell { display:flex; min-width:0; align-items:flex-end; flex-direction:column; }
.bxmPriceCell strong { color:#fff; font-size:15px; font-weight:500; line-height:20px; white-space:nowrap; }
.bxmPriceCell small { color:#89909a; font-size:11px; line-height:15px; white-space:nowrap; }
.bxmChange { display:flex; width:76px; height:31px; justify-self:end; align-items:center; justify-content:center; border-radius:5px; color:#fff; font-size:15px; font-weight:500; white-space:nowrap; }
.bxmChange.up { background:#13c784; }
.bxmChange.down { background:#ff5364; }
.bxmEmpty { padding:70px 20px; color:#777d86; text-align:center; }
.bxmMenuOverlay { position:fixed !important; z-index:1500 !important; }
@media (min-width: 560px) {
  .bxmMarketPage { max-width:492px; margin:0 auto; }
}


/* Mobile market precision pass: measured against the 430px target viewport. */
.bxmMarketPage {
  font-family: "Source Sans Pro", "Microsoft YaHei", Inter, system-ui, sans-serif;
}
.bxmCategoryScroller button.active {
  padding: 4px 0;
  background: transparent;
}
.bxmTableHead {
  color: rgba(255,255,255,.48);
}
.bxmTableHead button {
  font-size: 11px;
  line-height: 16px;
}
.bxmMarketRow {
  align-items: start;
}
.bxmAssetCell,
.bxmPriceCell,
.bxmChange {
  align-self: start;
}
.bxmAssetText strong {
  line-height: 18px;
}
.bxmPriceCell strong {
  line-height: 18px;
}
.bxmChange {
  margin-top: 0;
}
.bxmPagination {
  display: flex;
  min-height: 66px;
  padding: 16px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-top: 1px solid #151619;
}
.bxmPagination button,
.bxmPagination span {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  color: rgba(255,255,255,.64);
  background: transparent;
  place-items: center;
  font-size: 13px;
}
.bxmPagination button.active {
  color: #fff;
  background: #202226;
}


/* Local target typography and final mobile-market alignment. */
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/source-sans/source-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/source-sans/source-sans-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/source-sans/source-sans-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/assets/fonts/source-sans/source-sans-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.bxmCategoryScroller button { line-height: 17px; }
.bxmTableHead button { transform: translateY(5px); }

.bxmFavoriteManager {
  display: flex;
  min-height: 52px;
  padding: 8px 16px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #151619;
  border-bottom: 1px solid #151619;
  background: #090a0c;
}

/* Target mobile stock-market surface (measured from BingX mobile layout). */
.bxmTargetMarket {
  min-height: 100dvh !important;
  padding-bottom: 72px !important;
  background: #020202 !important;
  color: #fff;
  font-family: "Source Sans Pro", "Microsoft YaHei", Inter, system-ui, sans-serif !important;
}
.bxmTargetMarket .bxmHeader {
  height: 65px;
  padding: 0 16px;
  border-bottom-color: #202124;
  background: #020202;
}
.bxmTargetMain { width: 100%; background: #020202; }
.bxmTargetSearch {
  display: flex;
  width: calc(100% - 38px);
  height: 44px;
  margin: 24px 16px 0;
  padding: 4px 20px 4px 12px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(42,44,44,.5);
  border-radius: 50px;
  background: rgba(42,44,44,.5);
  color: #92969d;
}
.bxmTargetSearch svg { width: 16px; height: 16px; flex: 0 0 16px; }
.bxmTargetSearch input {
  width: 100%; min-width: 0; padding: 0; border: 0; outline: 0;
  color: #fff; background: transparent; font: 400 14px/17px "Source Sans Pro", "Microsoft YaHei", Inter, system-ui, sans-serif !important;
}
.bxmTargetSearch input::placeholder { color: rgba(255,255,255,.38); }
.bxmTargetSearch button { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; color: #92969d; background: transparent; font-size: 19px; }
.bxmTargetPrimary {
  display: flex;
  width: 100%;
  height: 63px;
  padding: 0 16px;
  align-items: flex-end;
  gap: 12px;
  overflow-x: auto;
  border-bottom: 1px solid #1b1c1f;
  scrollbar-width: none;
}
.bxmTargetPrimary::-webkit-scrollbar,
.bxmStockCards::-webkit-scrollbar,
.bxmStockCategories::-webkit-scrollbar { display: none; }
.bxmTargetPrimary button {
  position: relative; flex: 0 0 auto; height: 43px; padding: 0 4px; border: 0;
  color: rgba(255,255,255,.55); background: transparent; font-size: 16px; font-weight: 400; line-height: 43px;
  white-space: nowrap;
}
.bxmTargetPrimary button:first-child,
.bxmTargetPrimary button:last-child { padding-right: 0; padding-left: 0; }
.bxmTargetPrimary button.active { color: #fff; font-weight: 500; }
/* One underline that slides, rather than a per-button ::after that cuts. The
   offset is measured from the active button so it stays right when the labels
   change width between locales. */
.bxmTargetPrimary { position: relative; }
.bxmTabSlider {
  position: absolute; bottom: 0; left: 0; height: 2px; border-radius: 1px;
  background: #fff; pointer-events: none;
  transition: transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) { .bxmTabSlider { transition: none; } }

/* The category scroller and the contract-type selector on one line, measured
   from the reference at a 375 viewport: the row opens 16px under the primary
   underline, the selector is a 34px chip and the chips are centred against it,
   with 12px between the two. The scroller takes what is left, so a long
   category list is clipped by the selector rather than wrapping past it. */
.bxmCategoryRow { display: flex; padding: 16px 16px 0; align-items: center; gap: 12px; }
.bxmCategoryRow > nav { min-width: 0; flex: 1 1 0; padding: 0; }

/* The contract-type selector, sitting at the right of the category row. */
.bxmContractQuote { position: relative; display: flex; flex: 0 0 auto; justify-content: flex-end; }
.bxmContractQuoteTrigger {
  display: inline-flex; height: 34px; padding: 8px 12px; align-items: center; gap: 8px;
  border: 0; border-radius: 8px;
  background: rgba(42,44,44,.5); color: #fff;
  font-size: 12px; font-weight: 400; font-family: inherit; line-height: 18px; white-space: nowrap; cursor: pointer;
}
/* A 16px box so the caret occupies the same slot as the reference icon, with
   the same 200ms flip when the list opens. */
.bxmContractQuoteTrigger i {
  position: relative; width: 16px; height: 16px; flex: 0 0 16px;
  transition: transform .2s ease-in-out;
}
.bxmContractQuoteTrigger i::before {
  position: absolute; top: 5px; left: 4px; width: 6px; height: 6px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg); content: "";
}
.bxmContractQuote.isOpen .bxmContractQuoteTrigger i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .bxmContractQuoteTrigger i { transition: none; } }

/* At this width the product opens a bottom sheet, not a popover. Measured from
   the reference at 375: a 32px top radius over 16px 0 padding, a 36px header
   holding only a 24px close control 16px in from the right, and 48px option
   rows with 12px 16px padding and 4px corners inset 16px from the page edge.
   The selected row carries the same rgba(42,44,44,.5) as the trigger chip. */
.bxmContractQuoteOverlay {
  position: fixed; inset: 0; z-index: 3200; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.64); animation: bxmFadeIn .18s ease-out both;
}
/* The page-transition wrappers own a stacking context; without this the sheet
   is painted behind them. Same escape the stock sheet already uses. */
.exPageAnim:has(.bxmContractQuoteOverlay) { position: relative !important; z-index: 200 !important; }
.exContent:has(.bxmContractQuoteOverlay) { position: relative !important; z-index: 200 !important; }
.bxmContractQuoteSheet {
  width: min(100%, 492px); padding: 16px 0; border-radius: 32px 32px 0 0;
  color: #fff; background: #111212;
  animation: bxmSheetUp .28s cubic-bezier(.2,.85,.28,1) both;
}
.bxmContractQuoteSheetHead { display: flex; height: 36px; padding: 0 16px 12px; align-items: flex-start; justify-content: flex-end; }
.bxmContractQuoteSheetClose {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  color: rgba(255,255,255,.64); background: transparent; font-size: 15px; line-height: 24px; cursor: pointer;
}
.bxmContractQuoteSheetList { padding: 0 16px 8px; }
.bxmContractQuoteOption {
  display: block; width: 100%; padding: 12px 16px; border: 0; border-radius: 4px;
  background: transparent; color: #fff;
  font-size: 14px; font-family: inherit; line-height: 24px; text-align: left; cursor: pointer;
}
.bxmContractQuoteOption.active { background: rgba(42,44,44,.5); }
@media (prefers-reduced-motion: reduce) {
  .bxmContractQuoteOverlay, .bxmContractQuoteSheet { animation: none; }
}

/* Sortable column headers: label plus a two-arrow indicator that fills in the
   direction actually applied. */
.bxmSortKey {
  display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.bxmSortKey i {
  position: relative; width: 7px; height: 12px; opacity: .45;
}
.bxmSortKey i::before, .bxmSortKey i::after {
  position: absolute; left: 0; border-right: 3.5px solid transparent;
  border-left: 3.5px solid transparent; content: "";
}
.bxmSortKey i::before { top: 1px; border-bottom: 4px solid currentColor; }
.bxmSortKey i::after { bottom: 1px; border-top: 4px solid currentColor; }
.bxmSortKey.isSorted i { opacity: 1; }
.bxmSortKey.isSorted.asc i::after, .bxmSortKey.isSorted.desc i::before { opacity: .3; }

/* The turnover the product prints beside the instrument name. */
.bxmRowTurnover { margin-left: 6px; font-style: normal; opacity: .75; }
.bxmStockCards {
  display: flex;
  width: calc(100% - 32px);
  height: 162px;
  margin: 0 16px;
  padding: 20px 0;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.bxmStockCard {
  position: relative;
  display: flex;
  width: 160px;
  height: 122px;
  padding: 12px;
  flex: 0 0 160px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background: rgba(42,44,44,.5);
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.bxmStockCard:active { transform: scale(.985); }
.bxmStockCard strong,.bxmStockCard b,.bxmStockCard span { position: relative; z-index: 2; display: block; }
.bxmStockCard strong { overflow: hidden; font-size: 13px; font-weight: 400; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.bxmStockCard b { margin-top: 5px; font-size: 17px; font-weight: 500; line-height: 20px; }
.bxmStockCard span { margin-top: 1px; font-size: 13px; line-height: 16px; }
.bxmStockCard span.up { color: #12ca84; }
.bxmStockCard span.down { color: #ef5967; }
.bxmStockCard img { position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 136px; height: 36px; object-fit: fill; opacity: .96; }
.bxmStockCard .bxmLiveSpark {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 1;
  width: 136px;
  height: 42px;
  overflow: visible;
  pointer-events: none;
}
.bxmStockCard .bxmLiveSpark path {
  transition: stroke .2s ease;
}
.bxmStockCompactRow .bxmPriceCell strong,
.bxmStockCompactRow .bxmChange,
.bxmStockCard b,
.bxmStockCard span {
  font-variant-numeric: tabular-nums;
  transition: color .18s ease, background-color .18s ease;
}
.bxmStockCategories {
  display: flex;
  width: 100%;
  height: 34px;
  padding: 0 16px;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bxmStockCategories button {
  flex: 0 0 auto; height: 17px; padding: 0; border: 0;
  color: rgba(255,255,255,.48); background: transparent; font-size: 14px; font-weight: 400; line-height: 17px; white-space: nowrap;
}
/* The active category used to be a filled pill here and plain text on every
   other tab, which is two answers to one question. The reference gives it
   neither a pill nor an underline: the weight steps 400 -> 500 and the colour
   goes to full white, and that is the whole of it. */
.bxmStockCategories button.active { color: #fff; }

/* One chip treatment for every category row, measured from the reference at a
   375 viewport: 14px over a 17px line, 400 -> 500 on selection, 48% white
   dropping to full white, 16px between chips, no pill and no underline. */
.bxmGenericCategories button,
.bxmStockCategories button {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 400; line-height: 17px; white-space: nowrap;
}
.bxmGenericCategories button.active,
.bxmStockCategories button.active { font-weight: 500; }

/* HOT and NEW. The reference draws both as the accent colour over the same
   colour at 16% alpha -- #e26e00 for HOT, #27ad75 for NEW -- 10px over a 12px
   line with half a pixel of tracking, 2px 4px inside 4px corners. The tag keeps
   its own colour on an unselected chip, where the label beside it is dimmed;
   that contrast is the point of it. */
.bxmCatTag {
  display: inline-flex; height: 16px; padding: 2px 4px; align-items: center; justify-content: center;
  flex-shrink: 0; box-sizing: border-box; border-radius: 4px;
  font-size: 10px; font-weight: 400; line-height: 12px; letter-spacing: .5px;
}
.bxmCatTag.isHot { color: #e26e00; background: rgba(226,110,0,.16); }
.bxmCatTag.isNew { color: #27ad75; background: rgba(39,173,117,.16); }
.bxmStockList { width: 100%; padding: 0 16px; }
.bxmStockRow {
  display: grid;
  width: 100%;
  height: 71px;
  grid-template-columns: 20px 30px minmax(0,1fr) 48px 50px;
  align-items: center;
  column-gap: 9px;
  padding-right: 7px;
  border-bottom: 1px solid #1b1c1f;
  background: #020202;
}
.bxmStockRow button { -webkit-tap-highlight-color: transparent; }
.bxmStockStar {
  width: 20px; height: 30px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 23px; font-weight: 300; line-height: 30px;
}
.bxmStockStar.selected { color: #2f72ff; }
.bxmStockIcon { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; background: #111; }
.bxmStockIdentity {
  display: flex; min-width: 0; height: 44px; padding: 0; align-items: flex-start; justify-content: center; flex-direction: column;
  border: 0; color: #fff; background: transparent; text-align: left;
}
.bxmStockIdentity strong { display: block; max-width: 100%; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.bxmStockIdentity span { display: block; max-width: 100%; overflow: hidden; color: rgba(255,255,255,.5); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.bxmStockIdentity em { display: inline-block; margin-left: 4px; padding: 0 3px; border-radius: 2px; color: #fff; background: #323436; font-size: 9px; font-style: normal; line-height: 13px; vertical-align: 1px; }
.bxmStockDetailBtn,.bxmStockTradeBtn {
  height: 28px; padding: 0; border: 0; border-radius: 14px; color: #fff; font-size: 13px; line-height: 28px; text-align: center;
}
.bxmStockDetailBtn { width:50px; }
.bxmStockDetailBtn { background: #1d1f21; }
.bxmStockTradeBtn { background: #1f66ff; }
.bxmStockDetailBtn:active,.bxmStockTradeBtn:active { filter: brightness(1.16); transform: scale(.97); }

/* Logged-in stock market: the target page has no large search field and uses
   compact quote rows instead of the logged-out detail/trade actions. */
.bxmLoggedStocks .bxmTargetPrimary {
  height: 41px;
  padding: 0 12px;
  gap: 15px;
}
.bxmLoggedStocks .bxmTargetPrimary button {
  height: 41px;
  padding: 0;
  line-height: 41px;
}
.bxmLoggedStocks button:focus,
.bxmLoggedStocks button:focus-visible { outline: none; }
.bxmLoggedStocks .bxmStockCards {
  width: calc(100% - 24px);
  margin: 0 12px;
}
/* The row wrapper owns the page edge now, so the scroller inside it carries no
   horizontal padding of its own. */
.bxmLoggedStocks .bxmStockCategories {
  padding: 0;
}
.bxmStockTableHead {
  display: grid;
  width: 100%;
  height: 40px;
  padding: 9px 12px 0;
  grid-template-columns: minmax(0,1fr) 104px 76px;
  column-gap: 8px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 16px;
}
.bxmStockTableHead span:nth-child(n+2) { text-align: right; }
.bxmLoggedStocks .bxmStockList { padding: 0 12px; }
.bxmStockCompactRow {
  display: grid;
  width: 100%;
  height: 62px;
  padding: 0;
  grid-template-columns: minmax(0,1fr) 104px 76px;
  align-items: center;
  column-gap: 8px;
  border: 0;
  color: #fff;
  background: #020202;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.bxmStockCompactRow:active { background: #0b0c0e; }
.bxmStockCompactRow .bxmAssetCell { gap: 10px; }
.bxmStockCompactRow .bxmAssetCell > img { width: 30px; height: 30px; flex: 0 0 30px; }
.bxmStockCompactRow .bxmAssetText strong { font-size: 16px; font-weight: 500; line-height: 19px; }
.bxmStockCompactRow .bxmAssetText small { font-size: 11px; line-height: 14px; }
.bxmStockCompactRow .bxmPriceCell strong { font-size: 16px; line-height: 20px; }
.bxmStockCompactRow .bxmChange { width: 76px; height: 31px; font-size: 14px; }

.bxmMarketSearchPage {
  position: fixed;
  inset: 0;
  z-index: 3600;
  width: min(100%,492px);
  margin: 0 auto;
  overflow-y: auto;
  color: #fff;
  background: #020202;
  animation: bxmSearchIn .2s ease-out both;
}
.bxmMarketSearchPage > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  height: 65px;
  padding: 0 12px;
  grid-template-columns: 30px minmax(0,1fr) 42px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #1b1c1f;
  background: #020202;
}
.bxmMarketSearchPage > header > button { height: 38px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 15px; }
.bxmMarketSearchPage > header > button:first-child { font-size: 30px; line-height: 30px; }
.bxmMarketSearchPage label { display: flex; height: 38px; padding: 0 12px; align-items: center; gap: 8px; border-radius: 20px; background: #1a1b1d; color: #92969d; }
.bxmMarketSearchPage label svg { width: 17px; height: 17px; flex: 0 0 17px; }
.bxmMarketSearchPage input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 14px !important; }
.bxmMarketSearchResults { padding: 8px 12px 24px; }
@keyframes bxmSearchIn { from { opacity: .5; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.bxmGenericCategories {
  display: flex; height: 34px; padding: 0 16px; align-items: center; gap: 16px; overflow-x: auto; scrollbar-width: none;
}
.bxmGenericCategories button { flex: 0 0 auto; padding: 0; border: 0; color: rgba(255,255,255,.48); background: transparent; font-size: 14px; }
.bxmGenericCategories button.active { color: #fff; }
.bxmTargetMarket .bxmTableHead { grid-template-columns: minmax(0,1fr) 104px 82px; }
.bxmTargetMarket .bxmTableHead > span { color: rgba(255,255,255,.48); font-size: 11px; }
.bxmTargetMarket .bxmTableHead > span:nth-child(n+2) { text-align: right; }
.bxmStockSheetOverlay {
  position: fixed; inset: 0; z-index: 3200; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.64); animation: bxmFadeIn .18s ease-out both;
}
.exPageAnim:has(.bxmStockSheetOverlay) { position: relative !important; z-index: 200 !important; }
.exContent:has(.bxmStockSheetOverlay) { position: relative !important; z-index: 200 !important; }
.bxmStockSheet {
  position: relative; width: min(100%,492px); min-height: 360px; padding: 27px 16px 24px; border-radius: 20px 20px 0 0;
  color: #fff; background: #191a1c; animation: bxmSheetUp .28s cubic-bezier(.2,.85,.28,1) both;
}
.bxmSheetGrabber { position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; border-radius: 4px; background: #676b72; transform: translateX(-50%); }
.bxmSheetClose { position: absolute; top: 18px; right: 16px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #b8bdc5; background: #292b2f; font-size: 22px; }
.bxmSheetTitle { display: flex; align-items: center; gap: 12px; }
.bxmSheetTitle img { width: 42px; height: 42px; border-radius: 50%; }
.bxmSheetTitle h2 { margin: 0; font-size: 21px; font-weight: 600; }
.bxmSheetTitle p { margin: 2px 0 0; color: #949aa4; font-size: 13px; }
.bxmSheetPrice { display: flex; margin-top: 28px; align-items: baseline; justify-content: space-between; }
.bxmSheetPrice strong { font-size: 32px; font-weight: 600; }
.bxmSheetPrice span { font-size: 15px; }
.bxmSheetPrice .up { color: #12ca84; }.bxmSheetPrice .down { color: #ff5364; }
.bxmSheetMetrics { display: grid; margin-top: 22px; grid-template-columns: repeat(3,1fr); border: 1px solid #303238; border-radius: 10px; }
.bxmSheetMetrics div { display: flex; min-width: 0; padding: 13px 10px; flex-direction: column; gap: 5px; }
.bxmSheetMetrics div+div { border-left: 1px solid #303238; }
.bxmSheetMetrics span { color: #8f949c; font-size: 11px; }.bxmSheetMetrics b { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bxmSheetTrade { width: 100%; height: 46px; margin-top: 24px; border: 0; border-radius: 23px; color: #fff; background: #1f66ff; font-size: 16px; font-weight: 600; }
@keyframes bxmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes bxmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 389px) {
  .bxmTargetPrimary { gap: 18px; }
  .bxmStockRow { grid-template-columns: 18px 28px minmax(0,1fr) 45px 47px; column-gap: 7px; }
  .bxmStockIcon { width: 28px; height: 28px; }
}

/* Unified mobile market catalogue.  The existing application bottom navigation
   intentionally remains untouched; these rules only own the scrolling market
   surface above it. */
/* 16px labels, 12px apart, against a 16px page edge -- the reference's own
   measurements at 375. Seven of them do not fit that width there either; the
   row scrolls rather than shrinking the type to make them. */
.bxUnifiedMarkets .bxmTargetPrimary {
  gap: 12px;
  padding-right: 16px;
  padding-left: 16px;
  overflow-x: auto;
}
.bxUnifiedMarkets .bxmTargetPrimary button { font-size: 16px; }
.bxUnifiedMarkets .bxmModeTabs {
  display: flex;
  height: 42px;
  padding: 7px 14px 5px;
  align-items: center;
  gap: 10px;
}
.bxUnifiedMarkets .bxmModeTabs button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: #8d9299;
  background: transparent;
  font-size: 14px;
}
.bxUnifiedMarkets .bxmModeTabs button.active { color:#fff; background:#202225; }
.bxUnifiedMarkets .bxmGenericCategories,
.bxUnifiedMarkets .bxmStockCategories {
  height: 34px;
  width: 100%;
  padding: 0;
  justify-content: flex-start;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  cursor: grab;
  user-select: none;
}
.bxUnifiedMarkets .bxmGenericCategories.isDragging,
.bxUnifiedMarkets .bxmStockCategories.isDragging { cursor: grabbing; }
.bxUnifiedMarkets .bxmGenericCategories button,
.bxUnifiedMarkets .bxmStockCategories button {
  min-width: max-content;
  flex: 0 0 auto;
  padding-right: 0;
  padding-left: 0;
  font-size: 14px;
}
.bxUnifiedMarkets .bxmGenericCategories::-webkit-scrollbar,
.bxUnifiedMarkets .bxmStockCategories::-webkit-scrollbar { display:none; }
.bxUnifiedMarkets .bxmStockTableHead {
  height: 34px;
  padding: 7px 14px 0;
  grid-template-columns: minmax(0,1fr) 106px 77px;
}
.bxUnifiedMarkets .bxmUnifiedMarketList { padding:0 14px; }
.bxUnifiedMarkets .bxUnifiedMarketRow {
  height: 60px;
  grid-template-columns: minmax(0,1fr) 106px 77px;
}
.bxUnifiedMarkets .bxUnifiedMarketRow .bxmAssetText { min-width:0; }
.bxUnifiedMarkets .bxUnifiedMarketRow .bxmAssetText strong,
.bxUnifiedMarkets .bxUnifiedMarketRow .bxmAssetText small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bxUnifiedMarkets .bxUnifiedMarketRow .bxmAssetText small { color:#858a92; }
.bxUnifiedMarkets .bxUnifiedMarketRow .bxmPriceCell { min-width:0; text-align:right; }
.bxUnifiedMarkets .bxUnifiedMarketRow .bxmPriceCell small { display:block; color:#858a92; font-size:11px; }
.bxUnifiedMarkets .bxmLoadMore {
  display:block;
  width:calc(100% - 28px);
  height:42px;
  margin:10px 14px 18px;
  border:0;
  border-radius:7px;
  color:#fff;
  background:#191a1c;
  font-size:14px;
}
.bxUnifiedMarkets .bxmEmpty { padding:80px 20px; color:#777d85; text-align:center; font-size:14px; }
.bxUnifiedMarkets .bxmFavoriteManagerIntro { padding:12px 14px 8px; }
.bxUnifiedMarkets .bxmFavoriteManagerIntro label {
  display:flex; height:40px; padding:0 12px; align-items:center; gap:9px; border-radius:8px; background:#17191d; color:#858a92;
}
.bxUnifiedMarkets .bxmFavoriteManagerIntro svg { width:18px; height:18px; flex:0 0 18px; }
.bxUnifiedMarkets .bxmFavoriteManagerIntro input { width:100%; border:0; outline:0; color:#fff; background:transparent; font-size:14px; }
.bxUnifiedMarkets .bxmFavoriteTypeTabs { height:44px; padding:0 14px; align-items:flex-end; }
.bxUnifiedMarkets .bxmFavoriteTypeTabs button { height:40px; line-height:40px; }
.bxUnifiedMarkets .bxUnifiedMarketRow.isWatchlistEditing { grid-template-columns:minmax(0,1fr) 106px 46px; }
.bxUnifiedMarkets .bxUnifiedMarketRow.isWatchlistEditing.isWatchlisted { background:#080c14; }
.bxUnifiedMarkets .bxmFavoriteToggle {
  display:flex; width:32px; height:32px; margin-left:auto; align-items:center; justify-content:center;
  border:0; color:#7d828a; background:transparent; font-size:27px; font-weight:400; line-height:1;
}
.bxUnifiedMarkets .bxmFavoriteToggle.active { color:#f5c542; background:transparent; font-size:27px; font-weight:400; }
.bxUnifiedMarkets .bxmWatchlistToast {
  position:fixed; z-index:3800; bottom:84px; left:50%; min-width:120px; padding:10px 18px;
  transform:translateX(-50%); border-radius:8px; color:#fff; background:rgba(35,38,43,.96); text-align:center; font-size:14px;
}
@media (max-width: 374px) {
  .bxUnifiedMarkets .bxmTargetPrimary { gap:12px; }
  .bxUnifiedMarkets .bxmTargetPrimary button { font-size:14px; }
  .bxUnifiedMarkets .bxmStockTableHead,
  .bxUnifiedMarkets .bxUnifiedMarketRow { grid-template-columns:minmax(0,1fr) 92px 70px; }
  .bxUnifiedMarkets .bxmUnifiedMarketList,
  .bxUnifiedMarkets .bxmStockTableHead { padding-right:10px; padding-left:10px; }
}

/* Copy-trading pages contain viewport-fixed action bars.  The generic page
   entrance animation leaves a transform on this ancestor, which otherwise
   makes those bars fixed to the long document instead of the phone viewport. */
.exScreen:has(.bxCopyPage) {
  background: #000 !important;
}
.exContent:has(.bxCopyPage) {
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
.exPageAnim:has(.bxCopyPage) {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
.bxmFavoriteManager > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.bxmFavoriteManager strong {
  color: #fff;
  font-size: 15px;
  line-height: 20px;
}
.bxmFavoriteManager span {
  color: rgba(255,255,255,.48);
  font-size: 12px;
  line-height: 16px;
}
.bxmFavoriteManager > button {
  min-width: 58px;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: #1769ff;
  font-size: 13px;
}
.bxmMarketRow.is-managing {
  grid-template-columns: minmax(0,1fr) 86px 72px 30px;
  column-gap: 4px;
  cursor: default;
}
.bxmMarketRow.is-managing:active { background: #000; }
.bxmMarketRow.is-managing .bxmChange { width: 68px; font-size: 13px; }
.bxmFavoriteToggle {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  color: rgba(255,255,255,.38);
  background: transparent;
  place-items: center;
  font-size: 23px;
  line-height: 1;
}
.bxmFavoriteToggle.selected { color: #f5bd25; }
/* BingX-style crystal welfare page */
.exScreen:has(.welfareBingxPage),
.exContent:has(.welfareBingxPage),
.exPageAnim:has(.welfareBingxPage),
.exBingxWrap:has(.welfareBingxPage) {
  background: #000;
}

.exContent:has(.welfareBingxPage) {
  padding-bottom: 0;
}

/* Welfare centre -----------------------------------------------------------
   Rewritten to be token-driven so a single set of rules serves both themes;
   the light-mode override block that used to live in theme/product.css is gone
   with it.  The crystal is the only saturated element on the page: one accent,
   hairline dividers instead of five stacked cards, and "completed" demoted to
   quiet text rather than a bright green disc. */
.welfareBingxPage {
  /* The shell floats its back control over this page: .exBingxBack is
     absolute at top:12px and 40px tall, so it owns the first 52px of the
     wrapper.  Reserving that band plus a gutter keeps the hero copy clear
     of it on any shell, rather than guessing a padding that only holds at
     one viewport. */
  --wf-topbar: 52px;
  --wf-acc: #5b3fe8;
  --wf-acc-deep: #3b2aa6;
  --wf-wash: #f0ecfe;
  --wf-good: #1e7a5e;
  --wf-balance: linear-gradient(168deg, #7cc0ff 0%, #3b6bee 46%, #3a2ba8 100%);
  padding: 0 0 28px;
  color: var(--app-text);
  background: var(--app-bg);
}
:root[data-theme="dark"] .welfareBingxPage {
  --wf-acc: #9b85ff;
  --wf-acc-deep: #c3b4ff;
  --wf-wash: #1d1830;
  --wf-good: #3dbf95;
  --wf-balance: linear-gradient(168deg, #c2e9ff 0%, #82abff 46%, #9b85ff 100%);
}
.welfareBingxPage button,
.welfareBingxPage input { font: inherit; }
.welfareBingxPage button { -webkit-tap-highlight-color: transparent; cursor: pointer; }

/* The shell's back control is absolutely positioned over this hero (40px tall,
   ending 32px into it), so the copy starts below it instead of underneath. */
.welfareHero { position: relative; min-height: 252px; padding: calc(var(--wf-topbar) + 12px) 20px 22px; }
.welfareBalanceCopy { position: relative; z-index: 2; width: 62%; }
.welfareEyebrow { margin-bottom: 2px; color: var(--app-text-3); font-size: 12px; letter-spacing: .06em; }
.welfareBalanceCopy strong {
  display: block;
  color: var(--wf-acc);
  background-image: var(--wf-balance);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 54px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1;
}
.welfareBalanceCopy p { margin: 6px 0 0; color: var(--app-text-3); font-size: 13px; line-height: 1.5; }

/* z-index makes this a stacking context, so the video's blend mode resolves
   against this element rather than the page.  With a transparent background the
   loop's opaque white ground had nothing to blend with and showed as a white
   rectangle; painting the page colour here gives the blend its backdrop back.
   Light multiplies the white away, dark inverts it to black and screens it off
   -- both land exactly on --app-bg, so the stage has no visible edge. */
.welfareCrystalStage {
  position: absolute;
  z-index: 1;
  top: var(--wf-topbar);
  right: 6px;
  width: 154px;
  height: 202px;
  overflow: hidden;
  background: var(--app-bg);
  pointer-events: none;
}
/* The source loop is a blue crystal rendered on an opaque white ground, so it
   cannot simply sit on a surface.  Light mode multiplies the white away; dark
   mode inverts it to black against a black stage and screens that off. */
.welfareCrystalStage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .welfareCrystalStage video {
  filter: invert(1) hue-rotate(180deg) saturate(1.55) contrast(1.08) brightness(1.15);
  mix-blend-mode: screen;
}

.welfareHeroTitle { position: relative; z-index: 2; margin-top: 14px; }
.welfareHeroTitle h1 { margin: 0; color: var(--app-text); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.welfareHeroTitle p { margin: 2px 0 0; max-width: 19ch; color: var(--app-text-3); font-size: 13px; }

/* Sections are separated by hairlines rather than floating cards. */
.welfareSurface {
  padding: 22px 20px 4px;
  border: 0;
  border-top: 1px solid var(--app-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.welfareSurface h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.welfareSurface h2 > img { width: 15px; height: 15px; object-fit: contain; }
.welfareSurface h2 > .material-icons-round { color: var(--app-text-3); font-size: 17px; }

.welfareSummary {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  padding: 16px 0;
  gap: 0;
}
.welfareSummary::before {
  content: "";
  grid-row: 1;
  grid-column: 2;
  background: var(--app-border);
}
.welfareSummaryColumn { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 0 20px; }
.welfareSummaryColumn:first-child { grid-column: 1; }
.welfareSummaryColumn:last-child { grid-column: 3; }
.welfareSummaryLabel { display: block; margin: 0; color: var(--app-text-3); font-size: 12px; }
.welfareSummaryColumn > strong {
  display: block;
  margin: 0;
  color: var(--app-text);
  font-size: 23px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.welfareSummaryBottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.welfareRewardChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  color: var(--wf-acc-deep);
  background: var(--wf-wash);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.welfareRewardChip img { width: 13px; height: 13px; object-fit: contain; }

/* Exactly one filled button on the page; every other action is outlined. */
.welfareSummaryBottom button,
.welfareTaskAction {
  min-width: 64px;
  padding: 7px 15px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--wf-acc);
  font-size: 13px;
  font-weight: 500;
}
.welfareSummaryBottom button.is-complete,
.welfareSummaryBottom button.is-quiet,
.welfareTaskRow.is-pending .welfareTaskAction {
  color: var(--app-text-2);
  background: transparent;
  border: 1px solid var(--app-border);
  box-shadow: none;
}

.welfareTaskTimeline { position: relative; display: flex; flex-direction: column; }
.welfareTaskRow {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  align-items: flex-start;
  border: 0;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  padding-bottom: 18px;
}
.welfareTaskRow:last-child { padding-bottom: 4px; }
.welfareTaskRow:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 18px;
  bottom: -4px;
  left: 11px;
  width: 1px;
  background: var(--app-border);
}
.welfareTaskCheck {
  position: relative;
  z-index: 1;
  justify-self: center;
  margin-top: 2px;
  color: var(--wf-acc);
  background: transparent;
  font-size: 17px;
}
.welfareTaskRow.is-pending .welfareTaskCheck { color: var(--app-text-3); }
.welfareTaskCopy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.welfareTaskLabel {
  overflow: hidden;
  color: var(--app-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.welfareCompleted { color: var(--wf-good); font-size: 12px; }
.welfareTaskRow .welfareRewardChip { align-self: flex-start; }

.welfareExchange dl { margin: 0 0 4px; }
.welfareExchange dl > div {
  display: flex;
  min-height: 0;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--app-border);
}
.welfareExchange dt { color: var(--app-text-3); font-size: 13px; }
.welfareExchange dd { margin: 0; color: var(--app-text); font-size: 13px; font-variant-numeric: tabular-nums; }
.welfareExchange dd.balance { color: var(--app-text); font-size: 19px; font-weight: 500; letter-spacing: -.02em; }

/* Below the redemption threshold the button can only sit inert, so the page
   states the shortfall instead of leaving a dead control unexplained. */
/* The redemption meter is the one place the page reports progress, so it gets
   the same ice-to-crystal ramp as the balance figure rather than a flat bar:
   an inset track, a gradient fill, a bright leading edge, and a single sheen
   pass after it settles.  It replays on every entry because the fill is keyed
   on its own percentage in app.js. */
.welfareMeter { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.welfareMeterTrack {
  position: relative;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--app-surface-3);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .07);
}
.welfareMeterFill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background-image: linear-gradient(90deg, #7cc0ff 0%, #5b7cf0 52%, #5b3fe8 100%);
  transform-origin: left center;
  animation: welfareMeterGrow 1.15s cubic-bezier(.16, .84, .28, 1) both;
}
:root[data-theme="dark"] .welfareMeterFill {
  background-image: linear-gradient(90deg, #a9dcff 0%, #8fa4ff 52%, #9b85ff 100%);
}
.welfareMeterFill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55));
}
.welfareMeterFill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: welfareMeterSheen 1s ease-out .95s both;
}
@keyframes welfareMeterGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes welfareMeterSheen { from { transform: translateX(-130%); } to { transform: translateX(340%); } }
.welfareMeterCaption { display: flex; justify-content: space-between; gap: 12px; color: var(--app-text-3); font-size: 12px; }
.welfareMeterCaption span + span { color: var(--app-text-2); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.welfareAmountField {
  display: flex;
  height: 46px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid var(--app-border);
  border-radius: 11px;
  background: var(--app-surface);
}
.welfareAmountField:focus-within { border-color: var(--wf-acc); }
.welfareAmountField.is-invalid:focus-within { border-color: var(--app-red); }
.welfareAmountField.is-insufficient:focus-within { border-color: var(--app-amber, #e5a72b); }
.welfareAmountInput {
  min-width: 0;
  height: 100%;
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  color: var(--app-text);
  background: transparent;
  box-sizing: border-box;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.welfareAmountInput:focus { box-shadow: none; }
.welfareAmountInput::placeholder { color: var(--app-text-3); }
.welfareAmountMax {
  border: 0;
  background: transparent;
  color: var(--wf-acc);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}

.welfareExchangeButton {
  width: 100%;
  height: 46px;
  margin-top: 12px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--wf-acc);
  font-size: 15px;
  font-weight: 500;
}
.welfareExchangeButton.is-idle,
.welfareExchangeButton.is-invalid,
.welfareExchangeButton.is-insufficient {
  border: 1px dashed var(--app-border);
  color: var(--app-text-3);
  background: transparent;
  box-shadow: none;
}
.welfareExchangeButton.is-ready { color: #fff; background: var(--wf-acc); }

.welfareHistory { min-height: 0; background: transparent; }
.welfareEmptyHistory {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
  padding: 26px 16px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  color: var(--app-text-3);
  font-size: 12px;
}
.welfareEmptyHistory img { width: 22px; height: 22px; margin-bottom: 2px; object-fit: contain; opacity: .55; }
.welfareEmptyHistory strong { color: var(--app-text); font-size: 13px; font-weight: 500; }
.welfareHistoryRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--app-border);
}
.welfareHistoryRow > div { display: flex; flex-direction: column; gap: 4px; }
.welfareHistoryRow strong { color: var(--app-text); font-size: 13px; font-weight: 500; }
.welfareHistoryRow span { color: var(--app-text-3); font-size: 11px; }
.welfareHistoryRow em { color: var(--wf-good); font-size: 12px; font-style: normal; }

/* Honour reduced motion by holding the artwork and the meter still -- never by
   hiding them, which is what removed the crystal from the page entirely. */
@media (prefers-reduced-motion: reduce) {
  .welfareCrystalStage video { animation-play-state: paused; }
  /* The grow reports progress, so it is information, not decoration: keep it
     and just shorten it, dropping only the decorative sheen.  Removing the
     motion outright is what hid this from anyone with the OS setting on. */
  .welfareMeterFill { animation-duration: .6s; }
  .welfareMeterFill::before { animation: none; opacity: 0; }
}

.welfareToast {
  position: fixed;
  z-index: 10000;
  top: 50%;
  left: 50%;
  max-width: 280px;
  transform: translate(-50%,-50%);
  padding: 12px 20px;
  border: 1px solid #343840;
  border-radius: 20px;
  color: #f7f8fa;
  background: #202226;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  font-size: 13px;
  text-align: center;
  /* The global [class*="Toast"] bounce animation replaces transform and used
     to cancel translate(-50%, -50%), leaving this notice visibly off-centre. */
  animation: welfareToastIn .28s cubic-bezier(.22, 1, .36, 1) both !important;
}

@keyframes welfareToastIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* The narrow-viewport block that used to sit here belonged to the previous
   welfare hero, where the crystal was 270px wide and bled off the right edge
   and the title ran at 36px.  Both fought the redesign on any phone under
   380px -- the stage no longer needs to overflow and the title is 19px. */

/* BingX rewards-account visual language for the personal center. */
.bxRewardsProfilePage {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100dvh !important;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden;
  color: #f5f6f8;
  background:
    radial-gradient(circle at 84% 7%, rgba(51, 64, 86, .18), transparent 22%),
    linear-gradient(180deg, #070809 0, #050505 330px, #050505 100%) !important;
}
.bxRewardsProfilePage::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 54px;
  right: -70px;
  width: 300px;
  height: 160px;
  opacity: .3;
  pointer-events: none;
  background:
    linear-gradient(145deg, transparent 42%, rgba(116, 130, 151, .28) 43% 44%, transparent 45%),
    repeating-linear-gradient(165deg, transparent 0 8px, rgba(112, 125, 145, .12) 9px 10px);
  transform: skewY(-10deg);
}
.bxRewardsProfilePage > * { position: relative; z-index: 1; }
.bxRewardsProfileTopbar {
  min-height: 52px;
  justify-content: flex-end;
  padding: 6px 14px !important;
}
.bxRewardsProfileTopbar .bxUnifiedBack {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #d9dce1 !important;
  background: #181a1e !important;
  box-shadow: none !important;
}
.bxRewardsProfileTopActions { display: flex; gap: 3px; align-items: center; }
.bxRewardsProfileTopActions button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  place-items: center;
  border: 0;
  color: #aeb3bb;
  background: transparent;
  cursor: pointer;
}
.bxRewardsProfileTopActions .material-icons-round { font-size: 23px; }
.bxRewardsProfileTopActions .bxProfileTopAsset {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .68;
}
.bxRewardsProfileIdentity {
  box-sizing: border-box;
  min-height: 108px;
  margin: 0;
  padding: 12px 20px 28px !important;
  border-radius: 0;
  background: transparent;
}
.bxRewardsProfileIdentity .profileAvatarButton {
  width: 60px;
  height: 60px;
  flex-basis: 60px;
  margin-right: 14px;
  align-self: center;
}
.bxRewardsProfileIdentity .profileAvatarButton > svg,
.bxRewardsProfileIdentity .profileAvatarButton > img {
  width: 60px !important;
  height: 60px !important;
}
.bxRewardsProfileIdentity .profileAvatarEditBadge {
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
}
.bxRewardsProfileIdentityText {
  display: flex;
  min-height: 60px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.bxRewardsProfileIdentityText > div:first-child { margin-bottom: 0 !important; }
.bxRewardsProfileIdentity [style*="var(--text-primary)"] { color: #fff !important; }
.bxRewardsProfileIdentity [style*="var(--text-muted)"] { color: #8d929a !important; }
.bxRewardsProfileIdentity [style*="rgba(255,255,255,0.9)"] {
  border-color: #626872 !important;
  background: #17191d !important;
}
.bxRewardsProfileIdentity [style*="color: '#666'"] { color: #c8ccd2 !important; }
.bxRewardsProfileMenu {
  box-sizing: border-box;
  flex: 1 0 auto;
  margin: 0;
  padding: 11px 18px !important;
  border-radius: 18px 18px 0 0;
  background: #18191b;
}
.bxRewardsProfileMenu > div {
  min-height: 52px;
  padding: 0 !important;
}
.bxRewardsProfileMenu > div > .material-icons-round:first-child {
  width: 25px;
  margin-right: 13px !important;
  color: #eceef1 !important;
  opacity: 1 !important;
  font-size: 20px !important;
}
.bxRewardsProfileMenu > div > span:nth-child(2) {
  color: #f1f2f4 !important;
  font-size: 14px !important;
}
.bxRewardsProfileMenu > div > .material-icons-round:last-child {
  color: #70757d !important;
  font-size: 18px !important;
}
.bxRewardsProfileLogout {
  margin: 0;
  padding: 20px 8px 10px !important;
  background: #18191b;
}
.bxRewardsProfileLogout button {
  height: 47px;
  padding: 0 !important;
  border: 1px solid #323438 !important;
  border-radius: 9px !important;
  color: #b5bac2 !important;
  background: #1d1f22 !important;
}
.exScreen:has(.bxRewardsProfilePage),
.exContent:has(.bxRewardsProfilePage),
.exPageAnim:has(.bxRewardsProfilePage) { background: #050505 !important; }

/* Premium deposit flow: BingX-style black surface with restrained blue focus. */
.exScreen:has(.bxDepositPremium),
.exContent:has(.bxDepositPremium),
.exPageAnim:has(.bxDepositPremium),
.exPage:has(.bxDepositPremium) {
  background: #000 !important;
}

.exPage:has(.bxDepositPremium) {
  min-height: 100vh;
  padding: 8px 14px 48px;
  color: #f5f7fa;
}

.exPage:has(.bxDepositPremium) .exPageTop {
  padding: 10px 2px 18px;
}

.exPage:has(.bxDepositPremium) .exPageTitle {
  color: #f7f8fa;
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -0.025em;
}

.exPage:has(.bxDepositPremium) .exPageBody {
  padding-top: 0;
}

.bxDepositPremium {
  --bg-card: #111315;
  --bg-secondary: #1a1c20;
  --border-color: rgba(255, 255, 255, 0.07);
  --text-primary: #f5f7fa;
  --text-secondary: #9197a1;
  --text-muted: #656b75;
  --shadow: none;
  padding-bottom: 28px;
  color: var(--text-primary);
}

.bxDepositHero {
  height: 112px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 18px;
  background: #111315;
}

.bxDepositHero img {
  width: 176px;
  height: auto;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.bxDepositTabs {
  height: 50px;
  padding: 4px !important;
  margin-bottom: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px !important;
  background: #0c0d0f !important;
}

.bxDepositTabIndicator {
  top: 4px !important;
  height: calc(100% - 8px) !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #202329 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.bxDepositTab {
  padding: 10px 8px !important;
  color: #777e89 !important;
  font-size: 14px !important;
  font-weight: 560 !important;
}

.bxDepositTab.active {
  color: #fff !important;
  font-weight: 680 !important;
}

.bxDepositTab:focus,
.bxDepositTab:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.bxDepositCard {
  padding: 22px 20px 20px !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  border-radius: 20px !important;
  background: linear-gradient(150deg, #15171b 0%, #0d0f12 72%) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28) !important;
}

.bxDepositAmbient {
  top: -78px !important;
  right: -54px !important;
  width: 210px !important;
  height: 210px !important;
  background: rgba(36, 107, 253, 0.16) !important;
  filter: blur(60px) !important;
}

.bxDepositArtwork {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 58px;
  height: 58px;
  object-fit: contain;
  opacity: 0.18;
  filter: grayscale(1) brightness(1.7);
  pointer-events: none;
}

.bxDepositCard h2,
.bxDepositRecords h3 {
  color: #f7f8fa !important;
  letter-spacing: -0.015em;
}

.bxDepositCard p,
.bxDepositCard label,
.bxDepositCard li span:last-child {
  color: #8e949e !important;
}

.bxDepositInput {
  height: 50px;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: #1a1c20 !important;
  color: #f7f8fa !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: border-color 160ms ease, background-color 160ms ease !important;
}

.bxDepositInput:focus {
  border-color: rgba(52, 116, 243, 0.9) !important;
  background: #1d2025 !important;
  outline: none;
}

.bxDepositInput::placeholder {
  color: #666d78;
}

.bxDepositPremium input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.bxDepositPremium input[type='number']::-webkit-inner-spin-button,
.bxDepositPremium input[type='number']::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.bxDepositSubmit {
  min-height: 52px;
  border-radius: 13px !important;
  background: #246bfd !important;
  box-shadow: 0 10px 28px rgba(36, 107, 253, 0.2) !important;
}

.bxDepositSubmit:active {
  transform: scale(0.99);
}

.bxDepositNetwork {
  min-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  background: #15171b !important;
}

.bxDepositNetwork span {
  color: #8d949f !important;
}

.bxDepositNetwork.active {
  border-color: #3474f3 !important;
  background: rgba(52, 116, 243, 0.11) !important;
}

.bxDepositNetwork.active span:first-of-type {
  color: #6e9aff !important;
}

.bxDepositSubmitted {
  border-color: rgba(24, 201, 139, 0.2) !important;
  background: rgba(24, 201, 139, 0.08) !important;
}

.bxDepositSubmitted > div:first-child {
  color: #35d49d !important;
}

.bxDepositRecords {
  padding: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 20px !important;
  background: #0b0c0e !important;
  box-shadow: none !important;
}

.bxDepositRecords h3 {
  margin-bottom: 16px !important;
}

.bxDepositRecords > div > div {
  border-color: rgba(255, 255, 255, 0.065) !important;
}

@media (max-width: 380px) {
  .exPage:has(.bxDepositPremium) { padding-right: 10px; padding-left: 10px; }
  .bxDepositCard, .bxDepositRecords { padding-right: 16px !important; padding-left: 16px !important; }
  .bxDepositHero { height: 104px; }
  .bxDepositHero img { width: 162px; }
}

/* Selected deposit direction: one calm surface, minimal containers. */
.exPage:has(.bxDepositPremium) {
  padding-right: 0;
  padding-left: 0;
}

.exPage:has(.bxDepositPremium) .exPageTop {
  padding-right: 18px;
  padding-left: 18px;
}

.bxDepositPremium {
  padding: 0 20px 96px;
}

.bxDepositHero {
  height: 178px;
  margin: -6px 0 4px;
  border: 0;
  border-radius: 0;
  background: #000;
}

.bxDepositHero img {
  width: 280px;
}

.bxDepositTabs {
  height: 50px;
  margin-bottom: 30px !important;
  padding: 3px !important;
  border-color: #303238;
  border-radius: 29px !important;
  background: transparent !important;
}

.bxDepositTabIndicator {
  top: 3px !important;
  height: calc(100% - 6px) !important;
  border-radius: 25px !important;
  background: #246bfd !important;
  box-shadow: none !important;
}

.bxDepositTab {
  font-size: 15px !important;
}

.bxDepositCard {
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bxDepositBankCard .bxDepositAmbient {
  display: none;
}

.bxDepositUsdtCard .bxDepositAmbient {
  display: none;
}

.bxDepositBankCard label {
  margin-bottom: 10px !important;
  color: #8d939d !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.bxDepositBankCard > div:last-child > div:nth-child(1),
.bxDepositBankCard > div:last-child > div:nth-child(2) {
  margin-bottom: 16px !important;
}

.bxDepositUsdtCard label {
  margin-bottom: 10px !important;
  color: #8d939d !important;
  font-size: 13px !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.bxDepositBankCard .bxDepositInput {
  height: 56px;
  border: 1px solid #292c31 !important;
  border-radius: 10px !important;
  background: #111315 !important;
  box-shadow: none;
}

.bxDepositBankCard .bxDepositInput:focus {
  border-color: #3474f3 !important;
  background: #14171b !important;
}

.bxDepositUsdtCard .bxDepositInput {
  height: 58px;
  border: 1px solid #292c31 !important;
  border-radius: 10px !important;
  background: #111315 !important;
  box-shadow: none;
}

.bxDepositUsdtCard .bxDepositNetwork {
  min-height: 62px;
  border-color: #292c31 !important;
  border-radius: 10px !important;
  background: #111315 !important;
}

.bxDepositUsdtCard .bxDepositNetwork.active {
  border-color: #3474f3 !important;
  background: rgba(52, 116, 243, 0.09) !important;
}

.bxDepositConciseNote {
  margin: 0 0 20px !important;
  padding: 0 !important;
  color: #737984 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.bxDepositBankCard .bxDepositSubmit {
  min-height: 54px;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.bxDepositRecords {
  margin-top: 32px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.bxDepositRecords h3 {
  margin: 0 0 12px !important;
  padding-bottom: 6px;
  border-bottom: 0;
  font-size: 18px !important;
  font-weight: 650 !important;
}

.bxDepositRecords > div {
  gap: 8px !important;
}

.bxDepositRecords > div > div {
  min-height: 64px;
  align-items: center !important;
  gap: 12px;
  padding: 13px 0 !important;
  border-bottom: 0 !important;
}

.bxDepositRecordIcon {
  flex: 0 0 auto;
  font-size: 22px;
}

.bxDepositRecordIcon.approved { color: #18c98b; }
.bxDepositRecordIcon.pending { color: #8c929c; }
.bxDepositRecordIcon.rejected { color: #ff5364; }

/* This was a dark-theme literal with no light counterpart, so in light mode
   the deposit type label rendered near-white on a white panel -- measured
   contrast 1.09:1, effectively invisible.  A token reads correctly in both. */
.bxDepositRecords > div > div > div > div:first-child {
  color: var(--app-text-2) !important;
}

.bxDepositRecordStatus {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Premium cash-out flow: matte-black physical card */
.bxCashoutPage,
.bxCashoutPage .exPageTop,
.bxCashoutPage .exPageBody,
.bxCashoutPremium {
  --bg-card: #000;
  --bg-secondary: #15171b;
  --text-primary: #f5f7fa;
  --text-secondary: #a6acb6;
  --text-muted: #737a85;
  --border-color: #292c32;
  --shadow: none;
  background: #000 !important;
  color: #f5f7fa !important;
}

.exScreen:has(.bxCashoutPage),
.exContent:has(.bxCashoutPage),
.exPageAnim:has(.bxCashoutPage) {
  background: #000 !important;
}

.exPageAnim:has(.bxCashoutPage) {
  min-height: 100% !important;
}

.bxCashoutPage {
  min-height: 100dvh;
}

.bxCashoutPage .exPageTop {
  border-bottom: 0 !important;
  padding: 14px 16px 8px !important;
}

.bxCashoutPage .exPageTitle {
  color: #f7f8fa !important;
  font-weight: 720 !important;
}

.bxCashoutPage .exPageBody {
  padding: 14px 16px 42px !important;
}

.bxCashoutTabs {
  height: 50px;
  margin-bottom: 28px !important;
  padding: 3px !important;
  overflow: hidden;
  border: 1px solid #2a2d33;
  border-radius: 13px !important;
  background: #0e1013 !important;
}

.bxCashoutTabIndicator {
  top: 3px !important;
  left: 3px !important;
  width: calc(50% - 3px) !important;
  height: calc(100% - 6px) !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #246bfd !important;
  box-shadow: none !important;
}

.bxCashoutTabIndicator.isUsdt {
  left: 50% !important;
}

.bxCashoutTab {
  color: #858b95 !important;
  font-size: 14px !important;
  font-weight: 620 !important;
}

.bxCashoutTab.isActive {
  color: #fff !important;
}

.bxCashoutUsdtFlow {
  margin-bottom: 20px !important;
  padding: 6px 10px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bxCashoutUsdtLogo {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 18px rgba(38, 161, 123, .18);
}

.bxCashoutUsdtLogo svg {
  display: block;
  width: 32px;
  height: 32px;
}

.bxCashoutSubmitReceipt {
  margin-bottom: 24px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px !important;
  background: #14161a !important;
  box-shadow: none !important;
}

.bxCashoutSubmitReceipt .exDepTitle {
  color: #f3f4f6 !important;
}

.bxCashoutSubmitReceipt .exDepKv span {
  color: #858b95 !important;
}

.bxCashoutSubmitReceipt .exDepKv strong {
  color: #f3f4f6 !important;
}

.bxCashoutSubmitReceipt .exDepMiniBtn {
  border-color: rgba(255, 255, 255, .08) !important;
  background: #202329 !important;
  color: #d9dce2 !important;
}

.bxCashoutAccountSection > div:first-child {
  margin-bottom: 14px !important;
  padding: 0 !important;
}

.bxCashoutAccountSection > div:first-child label {
  color: #c5c9d0 !important;
  font-size: 14px !important;
}

.bxCashoutAccountSection > div:first-child button {
  color: #4380ff !important;
  font-size: 13px !important;
}

.bxCashoutBankCard {
  width: 100% !important;
  max-width: none;
  height: 176px !important;
  aspect-ratio: auto;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background-color: #111318 !important;
  background-image: url('/assets/bingx-cashout/matte-black-card-surface.png') !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-blend-mode: luminosity !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .055) !important;
}

.bxCashoutBankCard > div:first-child:not(.bxCashoutBankCardInner) {
  display: none !important;
}

.bxCashoutBankCardInner {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  padding: 18px 22px 17px !important;
}

.bxCashoutBankCardTop {
  margin-bottom: 0 !important;
}

.bxCashoutBankBrand {
  gap: 10px !important;
}

.bxCashoutBankMark {
  width: 31px !important;
  height: 31px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .09) !important;
  backdrop-filter: none !important;
}

.bxCashoutBankBrand > div:last-child span {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 15px !important;
  font-weight: 680 !important;
  letter-spacing: .015em;
}

.bxCashoutContactless {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 27px !important;
}

.bxCashoutBankCardBottom {
  margin-top: auto;
  padding-top: 12px;
}

.bxCashoutBankCardBottom > div > p:first-child {
  display: none !important;
}

.bxCashoutCardNumber {
  margin: 0 0 11px !important;
  color: rgba(255, 255, 255, .9) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: clamp(16px, 5vw, 22px) !important;
  font-weight: 570 !important;
  letter-spacing: .13em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .16), 0 -1px 0 rgba(0, 0, 0, .7);
}

.bxCashoutCardHolder {
  margin: 0 !important;
  color: #a9aeb7;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.bxCashoutCardMeta {
  max-width: 38%;
  color: #8f959f !important;
  font-size: 10px !important;
  letter-spacing: .05em;
  text-align: right;
}

.bxCashoutAmountSection {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bxCashoutAmountSection > div:first-child {
  margin-bottom: 14px !important;
}

.bxCashoutAmountSection label,
.bxCashoutSecuritySection label {
  color: #c7cbd2 !important;
}

.bxCashoutAmountSection > div:nth-child(2),
.bxCashoutSecuritySection > div > input {
  border: 1px solid #292c32 !important;
  border-radius: 12px !important;
  background: #15171b !important;
  box-shadow: none !important;
}

.bxCashoutAmountSection > div:nth-child(2) {
  min-height: 62px;
  margin-bottom: 18px !important;
  padding: 10px 12px 10px 16px !important;
}

.bxCashoutAmountSection > div:nth-child(3) {
  padding: 15px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.bxCashoutAmountSection > div:nth-child(3) > div:nth-child(2) {
  height: 0 !important;
  margin: 8px 0 !important;
  background: transparent !important;
}

.bxCashoutAmountSection > div:nth-child(3) > div:last-child span:last-child {
  color: #fff !important;
}

.bxCashoutSecuritySection {
  margin-top: 2px;
  margin-bottom: 18px !important;
}

.bxCashoutSecuritySection input {
  min-height: 54px;
}

.bxCashoutSubmit {
  min-height: 54px;
  margin-bottom: 12px !important;
  border-radius: 11px !important;
  background: #246bfd !important;
  box-shadow: none !important;
}

.bxCashoutBankFlow > p:last-child {
  color: #6f7580 !important;
}

.bxCashoutRecords {
  margin-top: 30px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bxCashoutRecords h3 {
  margin: 0 0 16px !important;
  color: #f2f4f7 !important;
  font-size: 17px !important;
}

.bxCashoutRecords > div > div {
  border-bottom-color: rgba(255, 255, 255, .045) !important;
}

@media (max-width: 380px) {
  .bxCashoutPage .exPageBody { padding-right: 14px !important; padding-left: 14px !important; }
  .bxCashoutBankCard { height: 164px !important; }
  .bxCashoutBankCardInner { padding: 16px 18px 15px !important; }
  .bxCashoutCardNumber { font-size: 16px !important; }
}

@media (max-width: 380px) {
  .bxDepositPremium { padding-right: 16px; padding-left: 16px; }
  .bxDepositHero { height: 166px; }
  .bxDepositHero img { width: 256px; }
}
.welfareModalMask {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .74) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.welfareModalSheet {
  background: #111317 !important;
  color: #f4f6f8 !important;
  border: 1px solid #2a2d33;
  box-shadow: 0 -18px 52px rgba(0, 0, 0, .55) !important;
}

.welfareModalSheet h2,
.welfareModalSheet h3 {
  color: #fff !important;
}

.welfareModalSheet [style*="var(--text-primary)"] {
  color: #fff !important;
}

.welfareModalSheet [style*="var(--text-secondary)"],
.welfareModalSheet [style*="var(--text-muted)"] {
  color: #9ba1ab !important;
}

.welfareModalSheet [style*="var(--bg-card)"] {
  background: #0c0e11 !important;
}

.welfareModalSheet [style*="var(--bg-secondary)"] {
  background: #25282d !important;
  color: #8f959f !important;
}

.welfareModalClose {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #202328;
  color: #9ba1ab;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.welfareModalClose .material-icons-round {
  font-size: 20px;
}

.welfareModalClose:active {
  background: #2a2d33;
  color: #fff;
}

.welfareTaskSheet {
  border-radius: 16px !important;
}

/* Keep every welfare popup aligned to the viewport, not to the app shell. */
.welfareModalMask > .welfareCheckinSheet,
.welfareModalMask > .welfareWealthSheet {
  box-sizing: border-box;
  width: min(100%, 420px) !important;
  margin-inline: auto !important;
}

.welfareTaskMask > .welfareTaskSheet {
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px)) !important;
  margin-inline: auto !important;
}

/* Profile avatar editor */
.profileAvatarButton {
  position: relative;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  margin: 0 14px 0 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.profileAvatarButton > svg,
.profileAvatarButton > img,
.profileAvatarChoices svg,
.profileAvatarChoices img,
.profileAvatarPreview svg,
.profileAvatarPreview img {
  display: block;
  border-radius: 50%;
  object-fit: cover;
}
.profileAvatarEditBadge {
  position: absolute;
  right: 0;
  bottom: 3px;
  display: grid;
  box-sizing: border-box;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid #33363c;
  border-radius: 5px;
  color: #fff;
  background: #101114;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
}
.profileAvatarEditBadge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profileAvatarOverlay {
  position: fixed;
  z-index: 1000000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.profileAvatarDialog {
  box-sizing: border-box;
  width: min(430px, calc(100vw - 24px));
  max-height: min(680px, calc(100vh - 24px));
  overflow: auto;
  padding: 24px;
  border: 1px solid #292c31;
  border-radius: 14px;
  color: #f7f8fa;
  background: #18191c;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}
.profileAvatarDialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.profileAvatarDialog h2 { margin: 0; font-size: 19px; font-weight: 650; }
.profileAvatarDialog > header button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  color: #eef0f4;
  background: transparent;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
.profileAvatarPreview {
  display: grid;
  width: 208px;
  height: 208px;
  margin: 0 auto 30px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #0c0d10;
}
.profileAvatarChoices {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  width: 100%;
  margin: 0 0 22px;
  padding: 4px 0;
  overflow: visible;
}
.profileAvatarChoices::-webkit-scrollbar { display: none; }
.profileAvatarChoices > button {
  display: grid;
  width: min(54px, 100%);
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  justify-self: center;
  place-items: center;
  padding: 1px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #090a0c;
  cursor: pointer;
}
.profileAvatarChoices > button:not(.profileAvatarUpload) > svg,
.profileAvatarChoices > button:not(.profileAvatarUpload) > img {
  width: 100% !important;
  height: 100% !important;
}
.profileAvatarChoices > button.selected {
  border-color: #1769ff;
  box-shadow: 0 0 0 2px rgba(23, 105, 255, .2);
}
.profileAvatarChoices > .profileAvatarUpload {
  margin-left: 0;
  border: 1px solid #30343a;
  color: #e9ebef;
  background: #15171a;
}
.profileAvatarUpload .material-icons-round { font-size: 25px; }
.profileAvatarError {
  margin: -8px 0 14px;
  color: #ff6577;
  font-size: 12px;
  text-align: center;
}
.profileAvatarConfirm {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #1d55c7;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.profileAvatarConfirm:disabled { opacity: .55; cursor: wait; }
@media (max-width: 380px) {
  .profileAvatarDialog { padding: 20px 16px; }
  .profileAvatarPreview { width: 184px; height: 184px; }
  .profileAvatarPreview > * { width: 184px !important; height: 184px !important; }
}
@media (max-width: 440px) {
  .profileAvatarOverlay { padding: 0; }
  .profileAvatarDialog {
    width: min(430px, 100vw);
    padding: 24px 18px 20px;
  }
}
/* Unified premium back control: one visual language across every secondary page. */
.bxUnifiedBack {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.085) !important;
  border-radius: 50% !important;
  background: rgba(18, 20, 24, 0.94) !important;
  color: #fff !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease !important;
}
.bxUnifiedBack:hover {
  background: rgba(28, 30, 35, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.bxUnifiedBack:active { transform: scale(0.94) !important; }
.bxUnifiedBack:focus-visible {
  outline: 2px solid rgba(38, 109, 255, 0.78) !important;
  outline-offset: 2px !important;
}
.bxUnifiedBackIcon {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  max-width: none !important;
  pointer-events: none !important;
  user-select: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .bxUnifiedBack { transition: none !important; }
}
/* Assets overview — paper and ink.
   Warm paper ground, pure ink, no cards, no borders, no shadows, no brand blue.
   Hierarchy comes from type size and whitespace alone.  Light and dark are
   defined here rather than patched in theme/product.css, so one block owns the
   whole page and there is nothing to override. */
.bxAssetsPage.bxAssetsPremium {
  /* The page had its own warm-paper palette, which made it the only screen
     in the product that was not on the shared ground.  It now takes the
     application tokens, so it matches every other page and follows the theme
     automatically instead of carrying a second definition. */
  --pa-bg: var(--app-bg);
  --pa-ink: var(--app-text);
  --pa-mute: var(--app-text-2);
  --pa-faint: var(--app-text-3);
  --pa-line: var(--app-border);
  --pa-down: var(--app-red);
  --pa-up: var(--app-green);
  min-height: 100vh;
  padding-bottom: 76px;
  color: var(--pa-ink);
  background: var(--pa-bg) !important;
}

/* Still needs the html[] prefix: the legacy dark isolation rule for
   .bxAssetsPage outranks a bare class selector even with !important. */
html[data-theme="dark"] .bxAssetsPage.bxAssetsPremium {
  background: var(--app-bg) !important;
}

.exScreen:has(.bxAssetsPage.bxAssetsPremium),
.exContent:has(.bxAssetsPage.bxAssetsPremium),
.exPageAnim:has(.bxAssetsPage.bxAssetsPremium) {
  background: var(--app-bg) !important;
}

html[data-theme="dark"] .exScreen:has(.bxAssetsPage.bxAssetsPremium),
html[data-theme="dark"] .exContent:has(.bxAssetsPage.bxAssetsPremium),
html[data-theme="dark"] .exPageAnim:has(.bxAssetsPage.bxAssetsPremium) {
  background: var(--app-bg) !important;
}

/* Header ------------------------------------------------------------------ */
.bxAssetsPremium .bxAssetsHeader {
  position: relative;
  top: auto;
  z-index: 1;
  padding: 22px 22px 0;
  border: 0;
  background: transparent !important;
  animation: none;
}

.bxAssetsPremium .bxAssetsTitle {
  color: var(--pa-ink);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.bxAssetsPremium .bxAssetsHeaderRight { align-items: center; gap: 18px; }

.bxAssetsPremium .bxAssetsIconBtn {
  display: grid;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 0;
  place-items: center;
  color: var(--pa-ink) !important;
  background: transparent !important;
  opacity: 1;
}

.bxAssetsPremium .bxAssetsIconBtn .material-icons-round {
  color: var(--pa-ink) !important;
  font-size: 23px !important;
}

.bxAssetsPremium .bxAssetsContent { padding: 0; }

/* Balance ----------------------------------------------------------------- */
.bxAssetsPremium .bxAssetsTotalSection {
  margin: 0 !important;
  padding: 40px 22px 0 !important;
  background: transparent;
  box-shadow: none !important;
}

.bxAssetsPremium .bxAssetsTotalLabel {
  margin-bottom: 0 !important;
  color: var(--pa-mute);
  font-size: 12px;
  letter-spacing: .1em;
}

/* figure, unit and yen conversion share one baseline so they read as one object */
.bxAssetsPremium .bxAssetsTotalRow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 9px;
  margin: 18px 0 0 !important;
}

.bxAssetsPremium .bxAssetsTotalValue {
  color: var(--pa-ink);
  font-size: 41px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: 1.05;
}

.bxAssetsPremium .bxAssetsTotalUsd {
  color: var(--pa-mute);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.bxAssetsPremium .bxAssetsPnl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 16px;
  color: var(--pa-down) !important;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.bxAssetsPremium .bxAssetsPnl > span:first-child { color: var(--pa-mute); }
.bxAssetsPremium .bxAssetsPnl > span:last-child { margin-left: 0 !important; }
.bxAssetsPremium .bxAssetsPnl.is-up { color: var(--pa-up) !important; }

/* Trend — a horizon line, not a panel ------------------------------------- */
.bxAssetsPremium .bxAssetsChartSection {
  display: flex;
  flex-direction: column;
  margin: 30px 0 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* the ranges belong under the line, so the header is reordered rather than
   restructured in the render */
.bxAssetsPremium .bxAssetsChartHeader { order: 2; margin: 18px 0 0 !important; padding: 0 22px; }
.bxAssetsPremium .bxAssetsChartWrapper { order: 1; position: relative; margin: 0; border: 0; padding: 0 16px; }
.bxAssetsPremium .bxAssetsChartWrapper::before { display: none; }
.bxAssetsPremium .bxAssetsChart { position: relative; z-index: 1; height: 118px !important; }

/* the section title is dropped: the ranges already say what this is */
.bxAssetsPremium .bxAssetsChartHeader > div:first-child > span:first-child { display: none; }
.bxAssetsPremium .bxAssetsChartHeader > div:first-child { margin-bottom: 0 !important; }

.bxAssetsPremium .bxAssetsChartTabs {
  gap: 26px !important;
  margin-left: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bxAssetsPremium .bxAssetsChartTab {
  min-width: 0;
  padding: 0 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--pa-faint) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums;
}

.bxAssetsPremium .bxAssetsChartTab.active {
  color: var(--pa-ink) !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 var(--pa-ink) !important;
  font-weight: 500 !important;
}

/* the period summary sits with the ranges */
.bxAssetsPremium .bxAssetsChartHeader > div:last-child { margin: 10px 0 0 !important; }
.bxAssetsPremium .bxAssetsChartHeader > div:last-child > span:first-child { color: var(--pa-mute) !important; }

/* Actions — no container, all four equal ---------------------------------- */
.bxAssetsPremium .bxAssetsActions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 !important;
  padding: 30px 12px 30px;
  border: 0;
  border-top: 1px solid var(--pa-line);
  margin-top: 30px !important;
}

.bxAssetsPremium .bxAssetsActionBtn {
  position: relative;
  gap: 11px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.bxAssetsPremium .bxAssetsActionBtn + .bxAssetsActionBtn::before { display: none; }

.bxAssetsPremium .bxAssetsActionIcon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bxAssetsPremium .bxAssetsActionIcon svg {
  width: 27px;
  height: 27px;
  stroke: var(--pa-ink) !important;
}

.bxAssetsPremium .bxAssetsActionIcon svg[data-fill="1"] {
  fill: var(--pa-ink) !important;
  stroke: none !important;
}

/* the exchange mark is typographic; sized by its ink, not by its font size */
.bxAssetsPremium .bxAssetsActionIcon .bxAssetsGlyph {
  color: var(--pa-ink);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1;
}

.bxAssetsPremium .bxAssetsActionBtn span:last-child {
  color: var(--pa-ink);
  font-size: 12.5px;
}

/* Holdings ---------------------------------------------------------------- */
.bxAssetsPremium .bxAssetsListSection { padding: 0 22px 44px; }

.bxAssetsPremium .bxAssetsListHeader { margin-bottom: 2px; }

.bxAssetsPremium .bxAssetsListHeader span {
  color: var(--pa-mute);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
}

.bxAssetsPremium .bxAssetsList { gap: 0; background: transparent !important; }

.bxAssetsPremium .bxAssetsItem {
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--pa-line);
  background: transparent;
}

.bxAssetsPremium .bxAssetsItemLeft { gap: 14px; }

.bxAssetsPremium .bxAssetsItemIcon {
  width: 34px;
  height: 34px;
  border: 0;
  font-size: 15px;
  font-weight: 700;
}

.bxAssetsPremium .bxAssetsItemIcon:not(.usdt):not(.btc) { background: var(--pa-line) !important; color: var(--pa-ink); }

.bxAssetsPremium .bxAssetsItemName,
.bxAssetsPremium .bxAssetsItemAmount {
  color: var(--pa-ink);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.bxAssetsPremium .bxAssetsItemDesc,
.bxAssetsPremium .bxAssetsItemUsd {
  color: var(--pa-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 380px) {
  .bxAssetsPremium .bxAssetsHeader,
  .bxAssetsPremium .bxAssetsTotalSection,
  .bxAssetsPremium .bxAssetsListSection { padding-right: 16px; padding-left: 16px; }
  .bxAssetsPremium .bxAssetsChartHeader { padding-right: 16px; padding-left: 16px; }
  .bxAssetsPremium .bxAssetsTotalValue { font-size: 36px; }
  .bxAssetsPremium .bxAssetsChartTabs { gap: 18px !important; }
}

/* Transfer — restrained two-step conversion flow */
/* Orders and fund-flow: dark exchange styling shared with the rest of the app. */
.exScreen:has(.bxOrdersPage.bxOrdersPremium),
.exContent:has(.bxOrdersPage.bxOrdersPremium),
.exPageAnim:has(.bxOrdersPage.bxOrdersPremium) {
  background: #000 !important;
}

.bxOrdersPage.bxOrdersPremium {
  --bg-primary: #000;
  --bg-card: #090a0c;
  --bg-secondary: #111316;
  --border-color: #22252a;
  --text-primary: #f4f4f5;
  --text-secondary: #b1b4ba;
  --text-muted: #777c84;
  min-height: 100vh;
  padding-bottom: 74px;
  background: #000 !important;
  color: #f4f4f5;
}

.bxOrdersPremium .bxOrdersHeader {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 68px;
  padding: 14px 16px !important;
  border-bottom: 1px solid #15171a;
  background: rgba(0, 0, 0, 0.94) !important;
  backdrop-filter: blur(14px);
}

.bxOrdersPremium .bxOrdersHeader .bxUnifiedBack {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #25282d !important;
  border-radius: 50% !important;
  background: #131518 !important;
  box-shadow: none !important;
}

.bxOrdersPremium .bxOrdersHeader > div:last-child {
  color: #f4f4f5 !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em;
}

.bxOrdersPremium .bxOrdersTabs {
  position: sticky;
  top: 68px;
  z-index: 4;
  justify-content: space-between;
  gap: 0 !important;
  padding: 12px 18px 0 !important;
  border-bottom: 1px solid #181a1e;
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(14px);
}

.bxOrdersPremium .bxOrdersTab {
  flex: 0 0 auto;
  padding: 0 2px 12px !important;
  border-bottom-color: transparent !important;
}

.bxOrdersPremium .bxOrdersTab.active {
  border-bottom-color: #f4f4f5 !important;
}

.bxOrdersPremium .bxOrdersTab span {
  color: #777c84 !important;
  font-size: 14px !important;
}

.bxOrdersPremium .bxOrdersTab.active span {
  color: #f4f4f5 !important;
  font-weight: 650 !important;
}

.bxOrdersPremium .bxOrdersContent {
  padding: 18px 14px 32px !important;
  background: #000;
}

.bxOrdersPremium .bxFundOverview {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px !important;
  padding: 20px !important;
  border: 1px solid #26303a;
  border-radius: 18px !important;
  background: radial-gradient(circle at 100% 0, rgba(35, 92, 118, 0.24), transparent 48%), linear-gradient(145deg, #151b20 0%, #0c0f12 62%, #090b0d 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

.bxOrdersPremium .bxFundOverview::after {
  content: '';
  position: absolute;
  right: -42px;
  bottom: -72px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(35, 207, 162, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.bxOrdersPremium .bxFundMiniStats { margin-bottom: 0 !important; }

.bxOrdersPremium .bxFundMiniStat {
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: none !important;
}

.bxOrdersPremium .bxFundCategories { margin-bottom: 16px !important; }

.bxOrdersPremium .bxFundCategory {
  min-width: 0;
  padding: 13px 11px !important;
  border: 1px solid #22252a !important;
  border-radius: 14px !important;
  background: #0a0c0e !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.bxOrdersPremium .bxFundCategory:active { transform: scale(.98); }
.bxOrdersPremium .bxFundCategory.active { border-color: #39424d !important; background: #11151a !important; }
.bxOrdersPremium .bxFundCategory span { color: #a0a5ad !important; }
.bxOrdersPremium .bxFundFilters { margin-bottom: 16px !important; }

.bxOrdersPremium .bxFundFilterRow {
  gap: 8px !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.bxOrdersPremium .bxFundFilterRow::-webkit-scrollbar { display: none; }

.bxOrdersPremium .bxFundFilter {
  flex: 0 0 auto;
  padding: 7px 14px !important;
  border: 1px solid #272a2f !important;
  border-radius: 18px !important;
  background: #0a0c0e !important;
  color: #8a9099 !important;
  box-shadow: none !important;
}

.bxOrdersPremium .bxFundFilter.active {
  border-color: #4c74ff !important;
  background: rgba(52, 98, 255, 0.13) !important;
  color: #7796ff !important;
}

.bxOrdersPremium .bxFundFilter.active[data-direction='in'] {
  border-color: #1f8e68 !important;
  background: rgba(39, 173, 117, 0.10) !important;
  color: #35c78c !important;
}

.bxOrdersPremium .bxFundFilter.active[data-direction='out'] {
  border-color: #9b3e4a !important;
  background: rgba(240, 97, 109, 0.10) !important;
  color: #ff7180 !important;
}

.bxOrdersPremium .bxFundFlowList {
  border: 1px solid #202328;
  border-radius: 14px !important;
  background: #090b0d !important;
}

.bxOrdersPremium .bxFundFlowItem { border-bottom-color: #1c1f23 !important; }

.bxOrdersPremium .bxOrdersEmpty {
  min-height: 280px;
  padding: 58px 0 80px !important;
}

.bxOrdersPremium .bxOrdersEmpty svg rect,
.bxOrdersPremium .bxOrdersEmpty svg line,
.bxOrdersPremium .bxOrdersEmpty svg circle { stroke: #3b3f46 !important; }
.bxOrdersPremium .bxOrdersEmpty svg circle { fill: #090b0d !important; }
.bxOrdersPremium .bxOrdersEmpty > span { color: #646971 !important; }

@media (max-width: 360px) {
  .bxOrdersPremium .bxOrdersTabs { padding-right: 12px !important; padding-left: 12px !important; }
  .bxOrdersPremium .bxOrdersContent { padding-right: 10px !important; padding-left: 10px !important; }
  .bxOrdersPremium .bxFundCategory { padding-right: 8px !important; padding-left: 8px !important; }
}

/* BingX-like asset record layout: information-first, flat surfaces, restrained accent. */
.bxOrdersPremium .bxOrdersHeader {
  min-height: 60px;
  border-bottom-color: #17191c;
}

.bxOrdersPremium .bxOrdersContent {
  padding-top: 10px !important;
}

.bxOrdersPremium .bxFundOverview {
  overflow: visible;
  margin: 0 0 8px !important;
  padding: 16px 2px 14px !important;
  border: 0;
  border-bottom: 1px solid #1d2024;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bxOrdersPremium .bxFundOverview::after { display: none; }

.bxOrdersPremium .bxFundOverview > div:first-child {
  margin-bottom: 16px !important;
}

.bxOrdersPremium .bxFundOverview > div:first-child > div:first-child > div:first-child,
.bxOrdersPremium .bxFundOverview > div:first-child > div:last-child > div:first-child {
  color: #747980 !important;
}

.bxOrdersPremium .bxFundOverview > div:first-child > div:first-child > div:last-child {
  font-size: 32px !important;
  letter-spacing: -0.035em !important;
}

.bxOrdersPremium .bxFundMiniStats {
  gap: 0 !important;
  padding-top: 14px;
  border-top: 1px solid #171a1e;
}

.bxOrdersPremium .bxFundMiniStat {
  padding: 2px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.bxOrdersPremium .bxFundMiniStat:first-child {
  padding-left: 0 !important;
  border-right: 1px solid #1d2024 !important;
}

.bxOrdersPremium .bxFundCategories {
  margin: 0 0 14px !important;
  border-bottom: 1px solid #1d2024;
}

.bxOrdersPremium .bxFundCategories > div {
  gap: 0 !important;
}

.bxOrdersPremium .bxFundCategory {
  padding: 13px 10px 15px !important;
  border: 0 !important;
  border-right: 1px solid #1a1d21 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.bxOrdersPremium .bxFundCategory:first-child { padding-left: 2px !important; }
.bxOrdersPremium .bxFundCategory:last-child { border-right: 0 !important; }
.bxOrdersPremium .bxFundCategory.active { background: transparent !important; }

.bxOrdersPremium .bxFundCategory.active::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 9px;
  border-radius: 2px;
  background: currentColor;
  opacity: .75;
}

.bxOrdersPremium .bxFundFilters {
  margin: 0 -2px 12px !important;
}

.bxOrdersPremium .bxFundFilterRow {
  gap: 18px !important;
  margin-bottom: 0 !important;
  padding: 0 2px;
  border-bottom: 1px solid #171a1e;
}

.bxOrdersPremium .bxFundFilterRow + .bxFundFilterRow {
  margin-top: 1px;
}

.bxOrdersPremium .bxFundFilter {
  position: relative;
  padding: 12px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #747a82 !important;
}

.bxOrdersPremium .bxFundFilter.active {
  border: 0 !important;
  background: transparent !important;
  color: #f4f4f5 !important;
}

.bxOrdersPremium .bxFundFilter.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #f4f4f5;
}

.bxOrdersPremium .bxFundFilter.active[data-direction='in'] { color: #36c792 !important; }
.bxOrdersPremium .bxFundFilter.active[data-direction='out'] { color: #ff6b7a !important; }
.bxOrdersPremium .bxFundFilter.active[data-direction='in']::after { background: #36c792; }
.bxOrdersPremium .bxFundFilter.active[data-direction='out']::after { background: #ff6b7a; }

.bxOrdersPremium .bxFundFlowList {
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
}

.bxOrdersPremium .bxOrdersEmpty {
  min-height: 250px;
  padding-top: 44px !important;
}

.bxOrdersPremium .bxOrdersEmpty > div {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 12px !important;
  transform: scale(.8);
}

.bxTransferPage {
  min-height: 100dvh;
  background: #000 !important;
  color: #f4f6fa;
  overflow-x: hidden;
}

.bxTransferHeader {
  height: 66px;
  padding: 0 16px;
  background: #000 !important;
  border: 0 !important;
}

.bxTransferHeader .exPageTitle {
  color: #f7f8fa;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bxTransferMain {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  min-height: calc(100dvh - 144px);
  margin: 0 auto;
  padding: 18px 18px calc(30px + env(safe-area-inset-bottom));
}

.bxTransferFlow {
  width: 100%;
}

.bxTransferSectionLabel {
  margin: 0 0 9px;
  color: #8b9099;
  font-size: 14px;
  font-weight: 500;
}

.bxTransferAssetBar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: #15171a;
  color: #f4f6fa;
}

.bxTransferAssetButton {
  cursor: pointer;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.bxTransferAssetButton:active {
  background: #191c20;
}

.bxTransferAssetIdentity {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.bxTransferAssetIdentity strong {
  color: #f6f7f9;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bxTransferChevron {
  color: #8f949d;
  font-size: 24px;
}

.bxTransferAmountSurface,
.bxTransferReceiveSurface {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 92px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  background: #15171a;
}

.bxTransferAmountInput {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f5f6f8;
  font: inherit;
  font-size: clamp(25px, 7vw, 32px);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.bxTransferAmountInput::placeholder {
  color: #737880;
  opacity: 1;
}

.bxTransferAmountInput::-webkit-inner-spin-button,
.bxTransferAmountInput::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.bxTransferAmountActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  margin-left: 12px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  color: #dfe2e8;
  font-size: 15px;
  font-weight: 600;
}

.bxTransferAmountActions button {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #2f7cff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.bxTransferBalance {
  margin-top: 9px;
  color: #81868f;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bxTransferError {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: #ff5669;
  font-size: 12px;
}

.bxTransferError .material-icons-round {
  font-size: 17px;
}

.bxTransferFlowArrow {
  display: grid;
  width: 40px;
  height: 40px;
  margin: 16px auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  background: #17191d;
  color: #f0f2f6;
  place-items: center;
}

.bxTransferFlowArrow .material-icons-round {
  font-size: 21px;
}

.bxTransferPickerAnchor {
  position: relative;
}

.bxTransferReceiveSurface {
  justify-content: flex-start;
  gap: 10px;
  min-height: 76px;
  color: #19c987;
}

.bxTransferReceiveSurface strong {
  font-size: clamp(27px, 7vw, 34px);
  font-weight: 650;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.bxTransferReceiveSurface span {
  font-size: 16px;
  font-weight: 650;
}

.bxTransferMarketRow,
.bxTransferFeeRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bxTransferMarketRow {
  margin-top: 20px;
}

.bxTransferMarketPrice {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 9px;
}

.bxTransferMarketPrice small,
.bxTransferFeeRow > span {
  color: #898e97;
  font-size: 13px;
  font-weight: 500;
}

.bxTransferMarketPrice strong,
.bxTransferFeeRow strong {
  color: #f0f2f6;
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bxTransferLock {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2f7cff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.bxTransferLock .material-icons-round {
  font-size: 18px;
}

.bxTransferLock b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.bxTransferFeeRow {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.bxTransferSubmit {
  width: 100%;
  min-height: 52px;
  margin-top: auto;
  border: 0;
  border-radius: 12px;
  background: #246bfd;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}

.bxTransferSubmit:disabled {
  background: #171a20;
  color: #666c76;
  cursor: not-allowed;
}

.bxTransferCoinPicker {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #111316;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
}

.bxTransferCoinSearch {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px;
  padding: 0 12px;
  border-radius: 10px;
  background: #1a1d21;
  color: #7f858e;
}

.bxTransferCoinSearch .material-icons-round {
  font-size: 19px;
}

.bxTransferCoinSearch input {
  width: 100%;
  height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4f6f8;
  font: inherit;
  font-size: 14px;
}

.bxTransferCoinList {
  max-height: min(330px, 42vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bxTransferCoinOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: #f3f5f8;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bxTransferCoinOption:hover,
.bxTransferCoinOption.isActive {
  background: #1a1d21;
}

.bxTransferCoinIdentity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bxTransferCoinIdentity > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bxTransferCoinIdentity strong {
  font-size: 14px;
  font-weight: 650;
}

.bxTransferCoinIdentity small {
  color: #737983;
  font-size: 10px;
}

.bxTransferCoinPrice {
  color: #cfd3da;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.bxTransferCoinEmpty {
  padding: 34px 16px;
  color: #7e848e;
  font-size: 13px;
  text-align: center;
}

@media (max-height: 780px) {
  .bxTransferMain {
    min-height: calc(100dvh - 138px);
    padding-top: 12px;
  }

  .bxTransferHeader {
    height: 60px;
  }

  .bxTransferAmountSurface {
    min-height: 76px;
  }

  .bxTransferFlowArrow {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .bxTransferSubmit {
    margin-top: 24px;
  }
}

@media (max-width: 370px) {
  .bxTransferMain {
    padding-right: 14px;
    padding-left: 14px;
  }

  .bxTransferAmountSurface,
  .bxTransferReceiveSurface {
    padding-right: 14px;
    padding-left: 14px;
  }

  .bxTransferAmountActions {
    gap: 8px;
    margin-left: 8px;
    padding-left: 10px;
  }
}

/* Transfer — selected compact market-ticket composition */
.bxTransferTicketPage .bxTransferMain {
  display: block;
  min-height: calc(100dvh - 144px);
  padding: 26px 22px calc(28px + env(safe-area-inset-bottom));
}

.bxTransferHeroPicker {
  position: relative;
  margin: 10px 0 30px;
}

.bxTransferHeroAsset {
  display: inline-flex;
  align-items: center;
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f6f7fa;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bxTransferHeroIdentity {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.bxTransferHeroIdentity strong {
  font-size: 29px;
  font-weight: 720;
  letter-spacing: -0.035em;
}

.bxTransferHeroChevron {
  margin-left: -4px;
  color: #858a93;
  font-size: 25px;
}

.bxTransferHeroPicker .bxTransferCoinPicker {
  top: calc(100% + 8px);
}

.bxTransferPriceBlock {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 44px;
}

.bxTransferPricePrimary,
.bxTransferPriceControls {
  display: flex;
  flex-direction: column;
}

.bxTransferPricePrimary {
  gap: 8px;
}

.bxTransferPricePrimary > span {
  color: #8d929b;
  font-size: 14px;
  font-weight: 500;
}

.bxTransferPricePrimary > strong {
  color: #f4f5f7;
  font-size: clamp(27px, 7.8vw, 35px);
  font-weight: 650;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bxTransferPriceControls {
  align-items: flex-end;
  gap: 7px;
  padding-top: 1px;
}

.bxTransferPriceControls .bxTransferLock {
  min-height: 28px;
  font-size: 14px;
}

.bxTransferPriceControls > b {
  min-height: 18px;
  color: #8b9099;
  font-size: 14px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.bxTransferAmountBlock {
  margin-top: 0;
}

.bxTransferAmountHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.bxTransferAmountHeading label {
  color: #8e939c;
  font-size: 14px;
  font-weight: 500;
}

.bxTransferAmountHeading span {
  color: #969ba4;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bxTransferTicket .bxTransferAmountSurface {
  min-height: 68px;
  margin-top: 0;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #17191c;
}

.bxTransferTicket .bxTransferAmountInput {
  font-size: clamp(22px, 6.5vw, 28px);
  font-weight: 520;
}

.bxTransferSummary {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 34px;
  padding: 0 6px;
}

.bxTransferSummaryRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.bxTransferSummaryRow span {
  color: #8f949d;
  font-size: 14px;
  font-weight: 500;
}

.bxTransferSummaryRow strong {
  color: #f3f5f8;
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bxTransferSummaryRow.isReceive strong {
  color: #20c983;
}

.bxTransferTicket .bxTransferSubmit {
  min-height: 56px;
  margin-top: 38px;
  border-radius: 8px;
}

/* Exchange — same compact market-ticket language as transfer */
.bxExchangeTicketPage .bxTransferMain {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.bxExchangeTicket .bxTransferHeroPicker {
  margin-bottom: 30px;
}

.bxExchangeAssetPicker {
  width: min(100%, 400px);
}

.bxExchangeSummary {
  gap: 18px;
}

.bxExchangePnl strong {
  color: #20c983;
}

.bxExchangePnl.isLoss strong {
  color: #ff5669;
}

.bxExchangeEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 260px);
  gap: 14px;
  color: #7f858e;
  text-align: center;
}

.bxExchangeEmpty > .material-icons-round {
  color: #646a74;
  font-size: 46px;
}

.bxExchangeEmpty strong {
  color: #a6abb3;
  font-size: 15px;
  font-weight: 550;
}

.bxExchangeEmpty button {
  min-width: 118px;
  min-height: 40px;
  margin-top: 2px;
  border: 0;
  border-radius: 8px;
  background: #246bfd;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

@media (max-height: 760px) {
  .bxTransferTicketPage .bxTransferMain {
    padding-top: 16px;
  }

  .bxTransferHeroPicker {
    margin-bottom: 20px;
  }

  .bxTransferPriceBlock {
    margin-bottom: 28px;
  }

  .bxTransferSummary {
    margin-top: 24px;
  }

  .bxTransferTicket .bxTransferSubmit {
    margin-top: 28px;
  }
}

/* ===== mofang-desktop-shell =====================================
   Two desktop presentations, because the product is two different things at
   two sizes.

   560-1023px is tablet territory: no route has a layout wide enough to earn
   the extra space, so the app sits in one centred phone-width column against
   a backdrop -- the standard way a mobile-first web app presents itself.

   From 1024px that column is the problem. The trading routes carry genuine
   desktop layouts (the captured pages switch to a horizontal product nav and
   a full-width chart; .fmPage declares min-width:980px for its orderbook and
   trade panel side by side) and a 480px shell was clipping all of it -- the
   futures page overflowed its own container and sat visibly off-centre.
   Hand those routes the window, and give the routes that are still composed
   for a phone a deliberate reading width instead of an arbitrary one.     */
@media (min-width: 560px) and (max-width: 1023.98px) {
  html, body {
    background: var(--app-desktop-backdrop, #eef1f6);
  }
  .exScreen {
    /* The shell is fixed:inset:0, so it is centred by insetting the sides
       rather than with margin:auto. */
    left: 50%;
    right: auto;
    width: min(var(--app-desktop-width, 480px), 100vw);
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 18px 48px rgba(15, 23, 42, .10);
  }
  /* Pages that previously centred themselves inside a full-width shell must
     stop doing so, or they would be centred twice and end up narrower. */
  .bingxLoggedHome,
  .bxmMarketPage {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 1024px) {
  html, body {
    background: var(--app-desktop-backdrop, #eef1f6);
  }
  .exScreen {
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    box-shadow: none;
  }
  /* Lists gain from width -- more rows visible, columns that stop colliding.
     Cap them at a reading width so the eye is not dragged across a monitor
     between a coin's name and its price. */
  .bxmMarketPage {
    width: 100%;
    max-width: var(--app-desktop-list-width, 1080px);
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Assets is one balance, one equity curve and a short holdings list. At the
     market list's width it reads as a mostly empty page, so it gets its own
     narrower measure. */
  .bxAssetsPage {
    width: 100%;
    max-width: var(--app-desktop-detail-width, 760px);
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* The home route is an iframe of a capture that only ever existed at phone
     width. It now carries its own desktop composition (see
     bingx-home/mofang-home-desktop.css), which keys off the *frame's* width --
     so handing the frame real width is what switches it on. */
  .bingxLoggedHome {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* A market row carries two fields, name and price, pinned to its two ends.
     Stretched to a desktop width they end up a hand-span apart with nothing
     between them, which is the "phone screenshot on a monitor" look at its
     most obvious. Two columns of rows spend the width on more of the market
     instead -- roughly twenty coins visible without scrolling. */
  .bxmStockList.bxmUnifiedMarketList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    align-content: start;
  }
  /* Its three labels annotate one column of rows and cannot be repeated over
     the second, so at two columns they line up with neither. They carry no
     sorting -- they are three plain spans -- and the rows say the same thing
     in their own layout, so the honest move is to drop them here. */
  .bxmStockTableHead:has(+ .bxmStockList.bxmUnifiedMarketList) {
    display: none;
  }

  /* The tab bar is a five-column grid, so justify-content alone cannot pull it
     in -- the columns themselves have to stop being a fifth of the window. */
  .exBottomNav,
  .bingxBottomNav {
    grid-template-columns: repeat(5, minmax(0, 128px));
    justify-content: center;
  }
}

/* The home route is an iframe of a capture that only ever existed at phone
   width. It now carries its own desktop composition, in
   bingx-home/mofang-home-desktop.css, which keys off the *frame's* width -- so
   handing the frame real width is what switches it on.

   1026 rather than 1024 on purpose, and the two pixels are the whole point.
   The frame's width is what the inner stylesheet measures, and the capture's
   own desktop rules start at 1025. Widening at 1024 would hand the frame a
   width the capture still considers a phone, and the phone layout would simply
   stretch. Widening one pixel above the capture's own threshold guarantees
   that whenever the frame is wide, every stylesheet involved agrees it is a
   desktop. */
@media (min-width: 1026px) {
  .bingxLoggedHome {
    width: 100%;
    max-width: none;
  }
  .bingxLoggedHomeFrame {
    width: 100% !important;
  }
}

@media (min-width: 560px) {
  :root { --app-desktop-backdrop: #eef1f6; }
  :root[data-theme="dark"] { --app-desktop-backdrop: #05070a; }
}