/* ─────────────────────────────────────────────────────────────
   refine.css — exchange-grade global polish (loaded last)
   Targets the look/feel of Binance / Huobi / OKX:
   dark surfaces, tighter type, slimmer controls, mono numerics,
   refined accents. Overrides layout.css / responsive.css /
   bu.css / ann_style.css without modifying them.
   ───────────────────────────────────────────────────────────── */

/* ── Type: UI (Manrope) + Mono (JetBrains) + Display (Mona Sans) ── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Mona+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Surfaces (light) */
  --rx-bg:           #f7faff;
  --rx-bg-2:         #f5f7fa;
  --rx-surface-1:    #ffffff;
  --rx-surface-2:    #f3f5f9;
  --rx-surface-3:    #e9edf3;
  --rx-surface-4:    #dde3eb;
  --rx-elev:         #ffffff;

  /* Borders */
  --rx-border:       #e3e8ef;
  --rx-border-mid:   #cbd5e1;
  --rx-border-strong:#94a3b8;
  --rx-divider:      rgba(15,23,42,.06);

  /* Text */
  --rx-text:         #0f172a;
  --rx-text-2:       #334155;
  --rx-muted:        #64748b;
  --rx-faint:        #94a3b8;

  /* Accent — royal blue (client brand) */
  --rx-accent:       #2f6bff;
  --rx-accent-2:      #143676;
  --rx-accent-deep:  #0a4ee0;
  --rx-accent-soft:  rgba(30,99,255,.08);
  --rx-accent-glow:  rgba(30,99,255,.18);
  --rx-accent-glow-strong: rgba(30,99,255,.32);

  /* Brand secondary — lighter blue tint for highlights. */
  --rx-accent-warm:    #6ea0ff;
  --rx-accent-warm-2:  #aac4ff;
  --rx-accent-warm-soft: rgba(110,160,255,.10);

  /* Brand gradient — royal blue. Use sparingly: hero numerics,
     primary CTA shines, focused logomark. Never on body copy. */
  --rx-brand-grad: linear-gradient(118deg,
    var(--rx-accent-2)     0%,
    var(--rx-accent)      28%,
    var(--rx-accent-deep) 78%,
    var(--rx-accent)     100%);
  --rx-brand-glow: 0 0 28px rgba(30,99,255,.30),
                   0 0 64px rgba(110,160,255,.16);

  /* Status (soft tint alphas tuned for white surfaces) */
  --rx-warn:         #F0B90B;
  --rx-warn-soft:    rgba(240,185,11,.18);
  --rx-good:         #16C784;
  --rx-good-soft:    rgba(22,199,132,.16);
  --rx-bad:          #ea3943;
  --rx-bad-soft:     rgba(234,57,67,.14);

  /* Radii (small, exchange-y) */
  --rx-r-xs: 3px;
  --rx-r-sm: 5px;
  --rx-r-md: 8px;
  --rx-r-lg: 12px;

  /* Type families */
  --rx-font:         'Manrope', 'PoppinsRegular', system-ui, -apple-system, sans-serif;
  --rx-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --rx-font-display: 'Mona Sans', 'Manrope', system-ui, -apple-system, sans-serif;

  /* Display type scale — for hero numerics, page-defining moments only */
  --rx-display-1: 56px;   /* hero balance on desktop */
  --rx-display-2: 40px;   /* hero balance on mobile / sub-hero figures */
  --rx-display-3: 28px;

  /* Motion vocabulary — formalised easings + durations. Reach for
     these instead of hand-rolling cubic-beziers per component. */
  --rx-ease-snap:   cubic-bezier(.2,.8,.2,1);    /* UI feedback (hover, tap) */
  --rx-ease-soft:   cubic-bezier(.4,0,.2,1);     /* entering content */
  --rx-ease-spring: cubic-bezier(.34,1.56,.64,1);/* primary CTA overshoot */
  --rx-ease-rise:   cubic-bezier(.22,.61,.36,1); /* existing list reveal */
  --rx-dur-fast:    .15s;
  --rx-dur-base:    .25s;
  --rx-dur-slow:    .45s;

  /* Focus ring — single source of truth for keyboard-visible focus */
  --rx-focus-ring:  0 0 0 3px var(--rx-accent-glow),
                    0 0 0 1px var(--rx-accent);

  /* Shadows (softer, for light surfaces) */
  --rx-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --rx-shadow-md: 0 4px 12px -2px rgba(15,23,42,.08);
  --rx-shadow-lg: 0 18px 40px -10px rgba(15,23,42,.12);
  --rx-shadow-lift: 0 8px 24px -8px rgba(15,23,42,.14),
                    0 0 0 1px var(--rx-accent-glow);

  /* Charts */
  --rx-chart-up:      var(--rx-good);
  --rx-chart-up-soft: var(--rx-good-soft);
  --rx-chart-down:    var(--rx-bad);
  --rx-chart-down-soft: var(--rx-bad-soft);
  --rx-chart-neutral: var(--rx-muted);
  --rx-chart-grid:    rgba(15,23,42,.05);
  --rx-chart-axis:    var(--rx-faint);
  --rx-chart-bg:      var(--rx-surface-1);
}

/* ── Global reset of legacy chunkiness ──────────────────────── */
html, body {
  background: var(--rx-bg) !important;
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11','ss01';
}

/* Kill the global heavy uppercase + wide tracking that ages the UI */
body, body * {
  letter-spacing: 0 !important;
}

/* Selectively allow caption tracking back where it reads better */
.ttu, .uppercase, .caption-rx {
  letter-spacing: .04em !important;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--rx-muted);
  font-weight: 600;
}

/* Default heading scale — tighter, subtler */
h1, .h1 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.01em !important; line-height: 1.2 !important; color: var(--rx-text) !important; }
h2, .h2 { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -.005em !important; line-height: 1.25 !important; color: var(--rx-text) !important; }
h3, .h3 { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--rx-text) !important; }
h4, .h4 { font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--rx-text) !important; }
h5, .h5 { font-size: 12px !important; font-weight: 600 !important; color: var(--rx-text) !important; }

/* Default link color in dark */
a { color: var(--rx-accent) !important; transition: color .15s ease !important; }
a:hover { color: var(--rx-accent-deep) !important; text-decoration: none !important; }

/* Selection */
::selection { background: var(--rx-accent-soft); color: var(--rx-text); }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--rx-bg); }
::-webkit-scrollbar-thumb { background: var(--rx-surface-3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--rx-border-strong); }

/* ── Keyboard focus ring (single source of truth) ────────────
   :focus-visible only — pointer focus stays unobtrusive. */
:where(button, a, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: var(--rx-focus-ring) !important;
  border-radius: var(--rx-r-xs);
}

/* ── Brand-gradient text utility ─────────────────────────────
   Apply to a single inline element (numeric, headline). Falls
   back to solid accent in browsers without background-clip. */
.rx-text-brand {
  background: var(--rx-brand-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rx-accent); /* fallback */
}

/* ── Privacy blur (e.g., balance hide) ───────────────────────── */
.rx-privacy-blur {
  filter: blur(10px) saturate(.8);
  transition: filter var(--rx-dur-base) var(--rx-ease-soft);
  user-select: none;
}

/* ── Container / common shells ───────────────────────────────── */
.container, .container-fluid {
  max-width: 1240px;
}

/* common-section padding tightened */
.common-section { padding: 20px 0 !important; }

/* curved-box → clean dark card */
.curved-box {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 14px !important;
  margin: 10px 0 !important;
  box-shadow: var(--rx-shadow-sm);
  color: var(--rx-text);
}

/* ── Header (was bright-blue gradient) → dark, refined ──────── */

.header {
  border: none !important;
  border-bottom: 1px solid var(--rx-accent-deep) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px -8px rgba(30,99,255,.35) !important;
  padding: 10px 18px !important;
  min-height: 52px;
}
.header .logo img { height: 22px; width: auto; }

/* Header text only — actual nav text/active state are handled in
   revamp.css media-queried block to avoid overriding the active pill. */
.header { color: #ffffff !important; }

.menu_toggle { color: #ffffff !important; }
.menu_toggle img { filter: brightness(0) invert(1) opacity(.95); }

/* Trading view ticker bar — flat white */
.trading_view_ticker {
  background: #ffffff;
  border-bottom: 1px solid var(--rx-border);
  font-size: 11px !important;
}
.tradingview-widget-container,
.tradingview-widget-container * { font-size: 11px !important; }


/* ── Banner buttons (Subscribe Now, etc.) ────────────────────── */
.banner_buttons { gap: 6px !important; margin-top: 8px !important; }

/* ── BUTTONS: thinner, sharper, no uppercase shouting ─────── */
.btn,
.btn-primary,
.btn-secondary,
.primary-btn,
.white-btn,
.lite-btn,
.btn-bordered,
.btn-bordered-dark,
.grey-btn {
  padding: 8px 14px !important;
  font-family: var(--rx-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: .005em !important;
  border-radius: var(--rx-r-sm) !important;
  border: 0px solid transparent !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease !important;
  line-height: 1.2 !important;
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:hover,
.btn:focus,
.btn:active { transform: none !important; }
.btn::before { display: none !important; }

.btn-primary,
.primary-btn {
  background: linear-gradient(180deg, var(--rx-accent-2) 0%, var(--rx-accent-2) 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 14px -4px rgba(30,99,255,.35) !important;
}
.btn-primary:hover,
.primary-btn:hover {
  filter: brightness(1.06);
  color: #ffffff !important;
}

.btn-secondary {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
  border-color: var(--rx-border-strong) !important;
}
.btn-secondary:hover {
  background: var(--rx-surface-4) !important;
  color: var(--rx-text) !important;
  border-color: var(--rx-border-strong) !important;
}

.white-btn {
  background: var(--rx-surface-2) !important;
  color: var(--rx-text) !important;
  border-color: var(--rx-border) !important;
}
.white-btn:hover { background: var(--rx-surface-3) !important; color: var(--rx-text) !important; }

.btn-bordered {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-text-2) !important;
  border-color: var(--rx-border-strong) !important;
}
.btn-bordered:hover {
  color: var(--rx-text) !important;
  border-color: var(--rx-accent) !important;
  background: var(--rx-accent-soft) !important;
}
.btn-bordered-dark {
  background: transparent !important;
  color: var(--rx-text-2) !important;
  border-color: var(--rx-border) !important;
}

.lite-btn {
  background: var(--rx-warn-soft) !important;
  color: var(--rx-warn) !important;
  border-color: rgba(240,185,11,.25) !important;
}

.grey-btn,
.disabled-btn {
  background: var(--rx-surface-2) !important;
  color: var(--rx-muted) !important;
  border-color: var(--rx-border) !important;
}

.btn-small {
  padding: 5px 10px !important;
  font-size: 11px !important;
  min-height: 26px !important;
}

/* ── Form controls / form-group ──────────────────────────────── */
.form-group {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 6px 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group:focus-within {
  border-color: var(--rx-accent) !important;
  box-shadow: 0 0 0 3px var(--rx-accent-soft);
}
.form-group label {
  font-family: var(--rx-font) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .06em !important;
  color: var(--rx-muted) !important;
  margin-bottom: 1px !important;
}
.form-group .form-control,
.form-control {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  height: 36px !important;
  padding: 0 10px !important;
}
.form-control::placeholder { color: var(--rx-faint) !important; }

/* Standalone inputs not in form-group */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
textarea, select {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--rx-accent) !important;
  box-shadow: 0 0 0 3px var(--rx-accent-soft) !important;
}

/* ── Numerics: tabular mono everywhere they belong ───────────── */
.assets_card_value,
.margin_value,
.price_sec_value,
.price_sec_title.is-num,
.bid, .ask,
.timer span,
td.num, td.amount, td.price, td.value,
.num, .mono,
[data-num] {
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.01em !important;
}

/* ── Cards / asset cards ─────────────────────────────────────── */

.assets_currency_main .assets_currency_title {
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
  color: var(--rx-muted) !important;
  margin-bottom: 8px !important;
}

.assets_card_title {
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
  color: var(--rx-muted) !important;
  font-weight: 500 !important;
}
.assets_card_value {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--rx-text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--rx-text) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

/* ── Currency main / currency cards ──────────────────────────── */
.currency_main {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-r-md) !important;
  padding: 12px !important;
}
.currency_cards_main .currency_card {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 12px !important;
}
.currency_cards_main .currency_card .currency_card_header {
  margin-bottom: 12px !important;
  padding: 0 !important;
}
.currency_select_main {
  background: var(--rx-surface-3) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 4px 6px 4px 12px !important;
}
.currency_name {
  font-size: 11px !important;
  letter-spacing: .05em !important;
  color: var(--rx-text-2) !important;
}

/* ── Price / bid / ask ───────────────────────────────────────── */
.price_chart_main { gap: 12px !important; }
.price_sec {
  background: var(--rx-surface-2) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 6px 12px !important;
}
.price_sec_title,
.price_sec_value {
  font-size: 11px !important;
  letter-spacing: .04em !important;
  color: var(--rx-text-2) !important;
}
.price_sec_value {
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  color: var(--rx-text) !important;
}

.bid_ask { gap: 8px !important; }
.bid {
  color: var(--rx-good) !important;
  border: 1px solid rgba(22,199,132,.35) !important;
  background: var(--rx-good-soft) !important;
  font-size: 11.5px !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--rx-r-sm) !important;
  box-shadow: none !important;
  min-height: 32px !important;
}
.ask {
  color: var(--rx-bad) !important;
  border: 1px solid rgba(234,57,67,.35) !important;
  background: var(--rx-bad-soft) !important;
  font-size: 11.5px !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--rx-r-sm) !important;
  box-shadow: none !important;
  min-height: 32px !important;
}
.last_update {
  font-size: 11px !important;
  color: var(--rx-muted) !important;
  letter-spacing: 0 !important;
}

/* ── Tables (order list, history, etc.) ──────────────────────── */
.order_list_table table { background: transparent; }
.order_list_table thead tr th,
table thead tr th {
  font-family: var(--rx-font) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  color: var(--rx-muted) !important;
  text-transform: uppercase;
  border: none !important;
  padding: 8px 12px !important;
  background: var(--rx-surface-1);
}
.order_list_table tbody tr td,
table tbody tr td {
  font-family: var(--rx-font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--rx-text) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--rx-border) !important;
}
table tbody tr:hover td {
  background: var(--rx-surface-1);
}
.completed_order { color: var(--rx-good) !important; }
.pending_order   { color: var(--rx-warn) !important; }

/* ── Order margin row ────────────────────────────────────────── */
.order_margin_row {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
}
.order_margin_row .margin_title {
  font-size: 10px !important;
  letter-spacing: .06em !important;
  color: var(--rx-muted) !important;
}
.order_margin_row .margin_value {
  font-size: 13px !important;
  letter-spacing: -.01em !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--rx-text) !important;
  text-transform: none !important;
}

/* ── Footer / footer menu ────────────────────────────────────── */
footer {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--rx-border);
  height: auto !important;
  padding: 0 !important;
}
.footer_menu {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 4px !important;
}
.footer_menu ul li a {
  font-size: 10px !important;
  letter-spacing: .05em !important;
  color: var(--rx-muted) !important;
  gap: 3px !important;
}
.footer_menu ul li a img {
  width: 20px !important;
  filter: brightness(0) invert(1) opacity(.6);
  transition: opacity .15s ease;
}
.footer_menu ul li a:hover {
  color: var(--rx-accent) !important;
}
.footer_menu ul li a:hover img,
.footer_menu ul li a.active img {
  filter: invert(72%) sepia(48%) saturate(2890%) hue-rotate(140deg) brightness(95%) contrast(89%);
  opacity: 1;
}

/* ── Modals ──────────────────────────────────────────────────── */
.modal-backdrop.show { opacity: .72 !important; background: #000 !important; }
.modal-content {
  background: linear-gradient(180deg, var(--rx-surface-1) 0%, var(--rx-bg-2) 100%) !important;
  border: 1px solid var(--rx-border-mid) !important;
  border-radius: var(--rx-r-md) !important;
  color: var(--rx-text) !important;
  box-shadow: var(--rx-shadow-lg) !important;
}
.modal-dialog.modal-dialog-centered { max-width: 380px !important; }
.modal-body { padding: 16px !important; }
.modal-header, .modal-footer { border-color: var(--rx-border) !important; padding: 12px 16px !important; }

.temrs_header { margin-bottom: 12px !important; }
.temrs_header h5 {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--rx-text) !important;
}
.modal_close_btn {
  width: 30px; height: 30px;
  display: inline-grid !important;
  place-items: center;
  border-radius: var(--rx-r-sm) !important;
  color: var(--rx-text-2);
  background: var(--rx-surface-2);
  border: 1px solid var(--rx-border);
  transition: all .15s ease;
}
.modal_close_btn:hover { background: var(--rx-bad); border-color: var(--rx-bad); color: #ffffff; }
.modal_close_btn img { filter: brightness(0) opacity(.7); width: 12px; }
.modal_close_btn:hover img { filter: brightness(0) invert(1) opacity(1); }

.terms_content_main .terms_content_head {
  font-size: 13px !important;
  color: var(--rx-text) !important;
}
.terms_content_main p {
  font-size: 12px !important;
  color: var(--rx-text-2) !important;
  line-height: 1.55 !important;
}

/* ── Toasts ──────────────────────────────────────────────────── */
.toast {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
  border: 1px solid var(--rx-border-mid) !important;
  font-family: var(--rx-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 8px 14px !important;
  border-radius: var(--rx-r-sm) !important;
  box-shadow: var(--rx-shadow-md) !important;
}
.toast.success {
  background: var(--rx-good-soft) !important;
  color: var(--rx-good) !important;
  border-color: rgba(22,199,132,.35) !important;
}
.toast.failed {
  background: var(--rx-bad-soft) !important;
  color: var(--rx-bad) !important;
  border-color: rgba(234,57,67,.35) !important;
}

/* ── Landing / login ─────────────────────────────────────────── */
.landing_page_section {
  background: var(--rx-bg) !important;
}
.landing_page_section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(30,99,255,.07), transparent 60%),
    radial-gradient(800px 400px at 80% 110%, rgba(240,185,11,.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.landing_main {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 24px 18px !important;
}
.landing_main .landing_header {
  background: linear-gradient(135deg, var(--rx-accent-2), var(--rx-accent-2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  margin-bottom: 18px !important;
}
.landing_content .welcome_area {
  background: rgba(30,99,255,.06) !important;
  border-color: var(--rx-border-mid) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 16px !important;
  backdrop-filter: blur(10px);
}
.landing_content .welcome_area .heading,
.landing_content .welcome_area .para {
  font-size: 12px !important;
  letter-spacing: 0 !important;
  color: var(--rx-text-2) !important;
}
.landing_content .welcome_area .heading {
  color: var(--rx-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-bottom: 4px;
}
.remember_me_main, .remember_me_main .remember_me {
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
  color: var(--rx-text-2) !important;
}
.landing_link {
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
  color: var(--rx-text-2) !important;
}
.landing_link a, .remember_me_main a {
  background: none !important;
  -webkit-text-fill-color: var(--rx-accent) !important;
  color: var(--rx-accent) !important;
  font-weight: 600 !important;
}

/* ── Promotion banner / swiper ───────────────────────────────── */
.promotion_banner {
  border-radius: var(--rx-r-md) !important;
  overflow: hidden;
  border: 1px solid var(--rx-border);
}
.swiper-pagination-bullet {
  width: 6px !important; height: 6px !important;
  background: rgba(255,255,255,.3) !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background: var(--rx-accent) !important;
  width: 18px !important;
  border-radius: 99px !important;
}

/* ── Timer pill ──────────────────────────────────────────────── */
.timer-wrapper .timer-container {
  font-family: var(--rx-font-mono) !important;
  font-size: 11px !important;
  color: var(--rx-text-2) !important;
}
.timer-wrapper .timer-container .pill {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
  border-radius: var(--rx-r-xs) !important;
  padding: 2px 6px !important;
  font-variant-numeric: tabular-nums;
}
.timer span {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
  border-radius: var(--rx-r-xs) !important;
}

/* ── Charts ──────────────────────────────────────────────────── */
.chart-container {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-r-md) !important;
}
.grid-line { stroke: rgba(255,255,255,.06) !important; }
.chart-line { stroke: var(--rx-accent) !important; stroke-width: 2 !important; }

/* ── Dropdown menu (Bootstrap) ───────────────────────────────── */
.dropdown-menu {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border-mid) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 4px !important;
  box-shadow: var(--rx-shadow-md) !important;
}
.dropdown-item {
  color: var(--rx-text-2) !important;
  font-size: 12.5px !important;
  padding: 7px 10px !important;
  border-radius: var(--rx-r-xs) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background .12s ease, color .12s ease;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
}
.dropdown-item.active {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
}
.dropdown-submenu .dropdown-toggle::after {
  border-color: var(--rx-muted) transparent transparent transparent !important;
}

/* ── Menu list (mobile slide-out) ────────────────────────────── */
.menu_list {
  background: var(--rx-bg-2) !important;
  border-left: 1px solid var(--rx-border) !important;
}
.menu_list ul li a {
  color: var(--rx-text-2) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.menu_list ul li a:hover,
.menu_list ul li a.active {
  color: var(--rx-accent) !important;
}
.menu_text {
  color: var(--rx-muted) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}

/* ── Page bottom decorative vector — disable on dark ────────── */
.page_bottom_content { background: none !important; }

/* ── Bootstrap muted utilities ───────────────────────────────── */
.text-muted { color: var(--rx-muted) !important; }
.bg-white   { background: var(--rx-surface-1) !important; color: var(--rx-text) !important; }
.bg-light   { background: var(--rx-surface-2) !important; color: var(--rx-text) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right {
  border-color: var(--rx-border) !important;
}

/* ── Status colors helpers ──────────────────────────────────── */
.text-success, .green { color: var(--rx-good) !important; }
.text-danger, .red    { color: var(--rx-bad) !important; }
.text-warning         { color: var(--rx-warn) !important; }

/* ── Subtle ambient on body ─────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 600px at 50% -20%, rgba(30,99,255,.05), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(240,185,11,.025), transparent 60%);
}
header, .container, .container-fluid, footer { position: relative; z-index: 1; }

/* ── Tighten body bottom padding (footer is now slimmer) ─── */
body { padding-bottom: 70px !important; }

/* ═══════════════════════════════════════════════════════════
   DEEP OVERRIDES — catches legacy light-on-light components
   that weren't covered by the global rules above
   ═══════════════════════════════════════════════════════════ */

/* ── Deposit / Withdraw / Transfer / Trade modals ──────────── */
.modal-contents-wrapper { color: var(--rx-text); }
.trade_popup            { color: var(--rx-text); }

/* The wallet balance card inside trade/deposit modals */
.trade_wallet_main {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}
.trade_wallet_main .heading,
.trade_wallet_main .trade_title,
.trade_title {
  color: var(--rx-muted) !important;
  font-family: var(--rx-font) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  margin: 0 0 4px !important;
}
.trade_wallet_main .trade_value,
.trade_value,
.trade_popup .trade_wallet_main .list_row .right.trade_value,
h3.trade_value,
h2.trade_value {
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--rx-text) !important;
  color: var(--rx-text) !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
}

/* Inside-trade list rows (BTC/USDT/etc.) */
.trade_popup .list_contents_main .list_row {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 8px 12px !important;
  margin-bottom: 4px !important;
}
.trade_popup .order_cards_main .heading {
  color: var(--rx-text-2) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
}

/* QR code area */
.popup_qr {
  text-align: center;
  margin: 12px 0;
}
.popup_qr .qr_code_main {
  display: inline-block;
  background: #fff;
  padding: 10px;
  border-radius: var(--rx-r-sm);
}
.scan_text {
  color: var(--rx-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  margin: 8px 0 14px !important;
}

/* Copy input with button */
.copy_input {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: var(--rx-surface-2);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-r-sm);
  overflow: hidden;
  margin-top: 4px;
}
.copy_input .form-control,
.copy_input .copy_target {
  flex: 1;
  padding: 8px 10px !important;
  font-family: var(--rx-font-mono) !important;
  font-size: 11.5px !important;
  color: var(--rx-text) !important;
  background: transparent !important;
  border: none !important;
  word-break: break-all;
}
.copy_input .input_copy_btn {
  background: var(--rx-surface-2) !important;
  border: none !important;
  border-left: 1px solid var(--rx-border) !important;
  padding: 0 12px !important;
  color: var(--rx-accent) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  transition: background .12s ease;
}
.copy_input .input_copy_btn:hover { background: var(--rx-accent-soft) !important; }
.copy_input .input_copy_btn img {
  width: 14px;
  /* Royal blue filter (#2f6bff from any source) */
  filter: brightness(0) saturate(100%) invert(28%) sepia(98%) saturate(3200%) hue-rotate(220deg) brightness(102%) contrast(101%) !important;
  transition: filter .15s ease;
}
.copy_input .input_copy_btn:hover img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(4500%) hue-rotate(225deg) brightness(95%) contrast(105%) !important;
}

/* Notice card (yellow warn box) */
.notice_card {
  background: var(--rx-warn-soft) !important;
  border: 1px solid rgba(240,185,11,.25) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
}
.notice_card .notice_head {
  color: var(--rx-warn) !important;
  font-family: var(--rx-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  margin: 0 0 6px !important;
}
.notice_card ul { padding-left: 16px !important; }
.notice_card ul li,
.notice_card p {
  color: var(--rx-text-2) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 4px !important;
}
.notice_card .red_text,
.red_text {
  color: var(--rx-bad) !important;
  font-weight: 600 !important;
}
.form_info {
  color: var(--rx-bad) !important;
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
  margin: 6px 0 !important;
}

/* Value range buttons (25/50/75/100 %) */
.value_range_main {
  gap: 6px !important;
  margin: 8px 0 !important;
}
.value_range_main .value_range {
  background: var(--rx-surface-2) !important;
  color: var(--rx-text-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 6px 0 !important;
  cursor: pointer;
  transition: all .12s ease;
}
.value_range_main .value_range:hover,
.value_range_main .value_range.active {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
  border-color: var(--rx-accent) !important;
}

/* ── Select2 widget (chain dropdown, currency dropdown) ────── */
.select_dropdown {
  margin-top: 2px;
}
.select2-container--default .select2-selection--single {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  height: 36px !important;
  padding: 0 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  padding: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
  right: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--rx-muted) transparent transparent transparent !important;
}
.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--rx-text) transparent !important;
}
.select2-dropdown {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border-mid) !important;
  border-radius: var(--rx-r-sm) !important;
  box-shadow: var(--rx-shadow-md) !important;
}
.select2-results__option {
  color: var(--rx-text-2) !important;
  font-size: 12.5px !important;
  padding: 8px 12px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
}

/* ── Asset titles (asset page header rows) ─────────────────── */
.asste_title_main {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  margin-bottom: 8px !important;
}
.asste_title_main .asste_title {
  color: var(--rx-text-2) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
}
.asste_title_main .asste_title_icon {
  background: linear-gradient(135deg, var(--rx-accent-2) 0%, var(--rx-accent-2) 100%) !important;
  border-radius: 50%;
  box-shadow: 0 3px 8px -2px rgba(30,99,255,.35) !important;
}
.asste_title_main .asste_title_icon img { filter: brightness(0) invert(1) opacity(1); }


.tabs_header {
  background: transparent!important;
}

.asset_btns { gap: 6px !important; }
.tabs_header,
.header_with_btn {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-r-md) !important;
  padding: 8px 12px !important;
}
.icon_btn {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  width: 32px; height: 32px;
  display: inline-grid !important;
  place-items: center;
}
.icon_btn img {  width: 14px; }

/* History table responsive */
.history_table_main .table-responsive,
.history_table {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-r-md) !important;
}

/* Datepicker input */
.datepicker_input {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  color: var(--rx-text) !important;
  border-radius: var(--rx-r-sm) !important;
}

/* ── Profile head card (was light-on-blue gradient) ────────── */
.profile_head_card_main {
  gap: 12px !important;
  align-items: center !important;
}
.profile_head_card_main figure {
  border-radius: var(--rx-r-md) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
  min-width: 72px !important;
  width: 72px;
}
.profile_head_card_main .user_subtitle {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
  font-size: 10px !important;
  letter-spacing: .04em !important;
  padding: 3px 8px !important;
  border-radius: 99px !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}
.profile_head_card_main .user_title {
  color: var(--rx-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── Footer "More" dots → accent ───────────────────────────── */
footer .footer_menu .more_dots span {
  border-color: var(--rx-muted) !important;
  background: transparent;
  transition: border-color .12s ease;
}
footer .footer_menu .footer_more_toggle:hover .more_dots span,
footer .footer_menu .footer_more_toggle.active .more_dots span,
footer .footer_menu .footer_more_dropdown.show .more_dots span {
  border-color: var(--rx-accent) !important;
}
footer .footer_menu .footer_more_toggle .more_text {
  color: var(--rx-muted) !important;
  font-size: 10px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
}


/* Footer "More" dropdown menu */
footer .footer_menu .footer_more_dropdown_menu {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border-mid) !important;
  border-radius: var(--rx-r-md) !important;
  box-shadow: var(--rx-shadow-lg) !important;
  padding: 4px !important;
  min-width: 180px !important;
}
footer .footer_menu .footer_more_dropdown_item {
  border-radius: var(--rx-r-sm) !important;
  color: var(--rx-text-2) !important;
  padding: 9px 12px !important;
  gap: 10px !important;
}
footer .footer_menu .footer_more_dropdown_item:hover {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
}
footer .footer_menu .footer_more_dropdown_item img {
  filter: brightness(0) invert(1) opacity(.7);
  width: 16px !important;
}
footer .footer_menu .footer_more_dropdown_item:hover img {
  opacity: 1;
}
footer .footer_menu .footer_more_dropdown_item .footer_more_dropdown_item_label {
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* ── Menu overlay (dim layer when slide-out menu is open) ──── */
.menu_overlay {
  background: rgba(0,0,0,.6) !important;
  backdrop-filter: blur(2px);
}

/* ── Dropdown submenu in main nav ──────────────────────────── */
.dropdown-submenu .dropdown-menu {
  margin-left: 4px !important;
}

/* ── Generic legacy color forcers (catches stragglers) ─────── */
/* If a legacy element still uses #3D3D3D, #333, #000 text on
   a now-dark surface, lift the text to readable. */
[style*="color: #3D3D3D"],
[style*="color:#3D3D3D"],
[style*="color: #3d3d3d"],
[style*="color:#3d3d3d"],
[style*="color: #333"],
[style*="color:#333"] {
  color: var(--rx-text-2) !important;
}
/* Light backgrounds inline → dark surface */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: white"],
[style*="background-color: white"] {
  background: var(--rx-surface-1) !important;
}

/* ── Final sweep: known light surfaces from bu.scss / ann ─── */
.bg-white, .bg-light, .white-bg { background: var(--rx-surface-1) !important; color: var(--rx-text) !important; }
.text-dark, .grey-title { color: var(--rx-text) !important; }

/* Range/slider inputs for trade page */
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  height: 4px;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: var(--rx-surface-3);
  height: 4px;
  border-radius: 99px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rx-accent);
  margin-top: -5px;
  box-shadow: 0 0 0 3px rgba(30,99,255,.18);
  cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--rx-accent);
}

/* ═══════════════════════════════════════════════════════════
   PAGE-LEVEL OVERRIDES — copyright footer, history, profile, trade
   These have higher specificity than the generic rules above so
   they win against the legacy bright-blue gradients in bu.scss.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Desktop copyright footer (was bright blue gradient) ── */
.footer-containers {
  background: linear-gradient(180deg, #f3f5f9 0%, #e9edf3 100%) !important;
  border-top: 1px solid var(--rx-border) !important;
  color: var(--rx-muted) !important;
  font-family: var(--rx-font) !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
  padding: 14px 24px !important;
  text-align: center;
  margin-top: 24px !important;
}

/* ── 2. History tables (deposit/withdraw/etc.) ─────────────── */
.history_table_main .table-responsive {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  max-height: 480px !important;
}
.history_table { background: transparent !important; }
.history_table thead tr th {
  background: var(--rx-surface-2) !important;
  color: var(--rx-muted) !important;
  font-family: var(--rx-font) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--rx-border) !important;
}
.history_table thead tr th:first-child { border-radius: var(--rx-r-md) 0 0 0 !important; }
.history_table thead tr th:last-child  { border-radius: 0 var(--rx-r-md) 0 0 !important; }
.history_table tbody tr {
  border-bottom: 1px solid var(--rx-border) !important;
  transition: background .12s ease;
}
.history_table tbody tr:hover { background: var(--rx-surface-2) !important; }
.history_table tbody tr:last-child { border-bottom: none !important; }
.history_table tbody td {
  color: var(--rx-text-2) !important;
  font-family: var(--rx-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  text-transform: none !important; 
}

/* Empty-state row */
.history_table tbody.empty-space td,
.empty-space {
  padding: 36px 0 !important;
  color: var(--rx-muted) !important;
}

/* TRANSACTION REPORT title row + Reset/Filter actions */
.header_with_btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--rx-border) !important;
  border-radius: 0 !important;
  padding: 8px 4px 12px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.header_with_btn .assets_currency_title {
  flex: 1;
  margin: 0 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  color: var(--rx-muted) !important;
  text-transform: uppercase;
  text-align: center;
}
.header_with_btn .filter_reset { gap: 6px !important; }

/* Tabs header (← page title →) on history pages */
.tabs_header {
  border: 0px!important;
  border-bottom: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 6px 0px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}
.tabs_header .tabs_heading {
  flex: 1;
  text-align: center;
  margin: 0 !important;
  font-size: 12.5px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  color: var(--rx-text) !important;
  font-weight: 700 !important;
}

.tabs_header svg,
.order_area_title svg {
  width: 12px;
  height: 12px;
}

.tabs_header a {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px; height: 28px;
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-xs) !important;
  color: var(--rx-text-2) !important;
  transition: all .12s ease;
  text-decoration: none !important;
}
.tabs_header a:hover {
  background: var(--rx-surface-3) !important;
  color: var(--rx-accent) !important;
}
.tabs_header a img {
  width: 12px;
  transition: filter .12s ease;
}
.tabs_header a:hover img {
  opacity: 1;
}

/* Wallet card .wallet sub-symbol (USDT after the number) */
.assets_card_value .wallet {
  font-family: var(--rx-font-mono) !important;
  color: var(--rx-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-left: 4px;
}

/* ── 3. PROFILE PAGE ────────────────────────────────────────── */

/* Blue gradient banner (account header) → dark with subtle accent */
.blue_main,
.assets_currency_main.blue_main {
  background: linear-gradient(135deg, #2f6bff 0%, #0a4ee0 100%) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  position: relative;
  overflow: hidden;
}
.blue_main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at 80% 100%, rgba(30,99,255,.08), transparent 70%);
  pointer-events: none;
}
.blue-sub-box {
  padding: 18px !important;
  border-radius: var(--rx-r-md) !important;
  position: relative;
  z-index: 1;
}
.blue-sub-box .linesss {
  background: linear-gradient(180deg, var(--rx-accent-2) 0%, var(--rx-accent-2) 100%) !important;
}
.blue-sub-box .assets_currency_title,
.kyc-banner .assets_currency_title {
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
}
.blue-sub-box p {
  color: var(--rx-text-2) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* Grey gradient card → dark surface */
.grey_card_main,
.grey_card_bg {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 14px !important;
  color: var(--rx-text-2) !important;
}
.white_card_bg {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  color: var(--rx-text) !important;
}

/* Copy referral link row — center label + accent code + button */
.copy_main {
  color: var(--rx-text-2) !important;
  font-family: var(--rx-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px !important;
}
.copy_main .copy_text {
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--rx-accent) !important;
  color: var(--rx-accent) !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.copy_main .copy_btn {
  background: var(--rx-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--rx-accent) !important;
  border-radius: var(--rx-r-xs) !important;
  width: 26px; height: 26px;
  display: inline-grid !important;
  place-items: center;
  transition: background .15s ease, transform .15s ease;
}
.copy_main .copy_btn:hover { background: var(--rx-accent-deep) !important; border-color: var(--rx-accent-deep) !important; transform: scale(1.05); }
.copy_main .copy_btn img {
  width: 12px;
  filter: brightness(0) invert(1) opacity(1) !important;
}

/* Section subhead used across profile */
.small_title {
  color: var(--rx-text-2) !important;
  font-family: var(--rx-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
}

/* QR area on 2FA page */
.qr_area p {
  color: var(--rx-text-2) !important;
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
}
.qr_code_main .qrcode,
.qr_code_main #qrcode,
#qrkyc {
  background: #fff !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 8px !important;
  box-shadow: 0 0 0 1px var(--rx-border-mid);
}

/* 2FA box container */
.box-2fa-container {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 14px !important;
  color: var(--rx-text-2) !important;
}

/* Page tabs (active tab underline) */
.page_tabs_main { gap: 18px !important; margin-bottom: 12px !important; }
.page_tabs_main a {
  color: var(--rx-muted) !important;
  font-family: var(--rx-font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 6px 0 8px !important;
}
.page_tabs_main a::after {
  height: 2px !important;
  background: transparent !important;
  border-radius: 2px !important;
}
.page_tabs_main a:hover { color: var(--rx-text-2) !important; }
.page_tabs_main .active {
  color: var(--rx-accent) !important;
}
.page_tabs_main .active::after {
  background: var(--rx-accent) !important;
}

/* Logout button at bottom of profile */
.logout_btn {
  background: var(--rx-bad-soft) !important;
  color: var(--rx-bad) !important;
  border: 1px solid rgba(234,57,67,.3) !important;
}
.logout_btn:hover {
  background: rgba(234,57,67,.18) !important;
  color: var(--rx-bad) !important;
}

/* "Terminate" / destructive section spacing */
.terminate_section { margin-top: 24px !important; }

/* Profile no-avatar tweak */
.profile_head_card_main.no-avatar { padding: 8px 0 !important; }

/* ── 4. TRADE PAGES ─────────────────────────────────────────── */

/* Top "head_area" — two-tone version had bright blue */
.head_area {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}
.head_area.bg2 {
  background: var(--rx-surface-2) !important;
}
.head_area_title {
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}

/* Trade-page inner wrapper */
.inner_page_main { padding: 6px 0 !important; }

/* Buy/Sell row */
.buy_area { gap: 8px !important; }
.buy_content {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  height: 36px !important;
  padding: 0 12px !important;
}
.buy_content .buy_text {
  color: var(--rx-text) !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.drop_with_icon { width: 130px !important; }
.drop_with_icon .select2-container--default .select2-selection--single {
  height: 36px !important;
  padding: 0 30px 0 10px !important;
}
.drop_with_icon::after {
  top: 12px !important;
  right: 8px !important;
  width: 12px !important;
  height: 7px !important;
  filter: brightness(0) invert(1) opacity(.6);
}

/* Big value display */
.widget_value_main {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 14px 0 !important;
  margin: 10px 0 !important;
}
.widget_value_main .main_value {
  color: var(--rx-text) !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
.widget_value_main .sub_value {
  color: var(--rx-muted) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}

/* 25/50/75/100 quick-amount tabs */
.amount_tabs_main { gap: 6px !important; margin: 0 0 12px !important; }
.amount_tabs_main .amount_single {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  color: var(--rx-text-2) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--rx-r-sm) !important;
  min-height: 32px !important;
  cursor: pointer;
  transition: all .12s ease;
}
.amount_tabs_main .amount_single:hover,
.amount_tabs_main .amount_single.active {
  background: var(--rx-accent-soft) !important;
  border-color: var(--rx-accent) !important;
  color: var(--rx-accent) !important;
}

/* Pair cards (BTC/USDT etc.) */
.upcoming_pair_wrapper {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
}
.upcoming_pair_wrapper .pair_title {
  color: var(--rx-muted) !important;
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}
.upcoming_pair_wrapper .pair_cards { gap: 8px !important; }
.upcoming_pair_wrapper .pair_card_single {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 10px 12px !important;
}
.upcoming_pair_wrapper .pair_card_single .pair_card_title {
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--rx-text) !important;
  color: var(--rx-text) !important;
  font-family: var(--rx-font-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.upcoming_pair_wrapper .pair_card_single .pair_type {
  color: var(--rx-muted) !important;
  font-size: 10.5px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}
.pair_card_single.upc { border-color: rgba(30,99,255,.3) !important; }

/* Order area / order title bar */
.order_area_main {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
}
.order_area_title {
  display: grid !important;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 10px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 10px !important;
  margin: 0 0 12px !important;
  border-bottom: 1px solid var(--rx-border) !important;
}
.order_title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  justify-self: center;
  text-align: center;
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* Order cards (Buy/Sell containers) */
.order_cards_main {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.order_cards_single,
.card.order_cards_single {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 10px 12px !important;
  color: var(--rx-text) !important;
}

/* Trade list rows */
.list_contents_main {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 4px 10px !important;
}
.list_contents_main .list_row {
  background: transparent !important;
  border-bottom: 1px solid var(--rx-border) !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list_contents_main .list_row:last-child,
.list_row.last_row { border-bottom: none !important; }
.list_row .left,
.list_row .left.volume-base,
.list_row .left.webhook-details {
  color: var(--rx-muted) !important;
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.list_row .right {
  color: var(--rx-text) !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Custom progress bar */
.custom_progressbar {
  background: var(--rx-surface-3) !important;
  border-radius: 99px !important;
  overflow: hidden;
  height: 18px !important;
  position: relative;
}
.custom_progressbar > * {
  background: white!important;
  height: 100% !important;
  border-radius: 99px !important;
}

/* Custom badge (rate / status pills) */
.custom_badge {
  display: inline-flex !important;
  align-items: center;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: var(--rx-surface-3) !important;
  color: var(--rx-text-2) !important;
}
.custom_badge.badge_red,
.badge_red {
  background: var(--rx-bad-soft) !important;
  color: var(--rx-bad) !important;
}
.custom_badge.badge_green,
.badge_green {
  background: var(--rx-good-soft) !important;
  color: var(--rx-good) !important;
}

/* Custom timer (countdown) */
.custom-timer,
.custom-timer1 {
  font-family: var(--rx-font-mono) !important;
}
.custom-timer .time-box,
.custom-timer1 .time-box {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-xs) !important;
  font-family: var(--rx-font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.custom-timer .colon,
.custom-timer1 .colon {
  color: var(--rx-muted) !important;
}

/* Pagination */
.pagination-container { padding: 8px 0 !important; }
.pagination {
  display: inline-flex !important;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination li a,
.pagination li span {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  color: var(--rx-text-2) !important;
  font-family: var(--rx-font-mono) !important;
  font-size: 11.5px !important;
  border-radius: var(--rx-r-xs) !important;
  padding: 5px 10px !important;
  min-width: 28px;
  text-align: center;
  transition: all .12s ease;
}
.pagination li a:hover {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text) !important;
  border-color: var(--rx-border-strong) !important;
}
.pagination li.active a,
.pagination li.active span {
  background: var(--rx-accent-soft) !important;
  border-color: var(--rx-accent) !important;
  color: var(--rx-accent) !important;
}
.order_page_link {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px; height: 28px;
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-xs) !important;
  color: var(--rx-text-2) !important;
  transition: all .12s ease;
  text-decoration: none !important;
}
.order_page_link.invisible { visibility: hidden; }

/* Filter chips row (currency filter chips on trade) */
.filter_chips_row { gap: 6px !important; }
.filter_chips_row .btn-filter-static {
  background: var(--rx-surface-2) !important;
  color: var(--rx-text-2) !important;
  border: 1px solid var(--rx-border) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 6px 10px !important;
  border-radius: var(--rx-r-sm) !important;
}
.filter_chips_row .btn-filter-static.active,
.filter_chips_row .btn-filter-static:hover {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
  border-color: var(--rx-accent) !important;
}
.btn-filter {
  background: var(--rx-surface-2) !important;
  color: var(--rx-text-2) !important;
  border: 1px solid var(--rx-border) !important;
}
.btn-filter:hover { background: var(--rx-surface-3) !important; }
.btn-filter.active {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
  border-color: var(--rx-accent) !important;
}

/* Trade page main_content wrapper */
.main_content {
  background: transparent;
  color: var(--rx-text);
}

/* Empty data placeholder */
.nodata,
.nodata.text-center {
  color: var(--rx-muted) !important;
  padding: 24px 0 !important;
  font-size: 12px !important;
}

/* Bootstrap btn-success / btn-dark mapped to dark theme */
.btn-success {
  background: linear-gradient(180deg, #1ee08f, var(--rx-good)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.btn-dark {
  background: var(--rx-surface-3) !important;
  border-color: var(--rx-border-strong) !important;
  color: var(--rx-text) !important;
}
.btn-dark:hover { background: var(--rx-surface-4) !important; color: var(--rx-text) !important; }

/* ── 5. KYC banner / blue gradient sidekicks ───────────────── */
.kyc-banner,
.kyc-banner.blue_main {
  background: linear-gradient(135deg, #2f6bff 0%, #0a4ee0 100%) !important;
  border: 1px solid var(--rx-border) !important;
}

/* ── 6. Catch-all bright-blue gradient kill-switch ─────────── */
/* Anything still painted with the legacy #003cff → #00acef
   gradient gets remapped to a subtle dark surface. */
[class*="blue_"]:not(.btn-primary):not(.primary-btn),
.referal-details {
  background: var(--rx-surface-2) !important;
  border-color: var(--rx-border) !important;
  color: var(--rx-text-2) !important;
}

/* ═══════════════════════════════════════════════════════════
   ▒▒  PROFILE PAGE — DESIGN REVAMP                          ▒▒
   Treat the page as a real account dashboard:
   1. Hero account card (avatar + identity + chips)
   2. Clean section cards with labelled headers
   3. Read-only inputs render as label/value rows
   ═══════════════════════════════════════════════════════════ */

/* ── Profile hero card (was bright blue gradient) ──────────── */
.assets_currency_main.blue_main {
  background:
    radial-gradient(600px 200px at 80% 110%, rgba(30,99,255,.10), transparent 70%),
    linear-gradient(135deg, #2f6bff 0%, #0a4ee0 100%) !important;
  border: 1px solid var(--rx-border-mid) !important;
  border-radius: var(--rx-r-lg) !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}
.assets_currency_main.blue_main::after { display: none !important; }
.assets_currency_main.blue_main .blue-sub-box {
  padding: 22px 22px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Decorative gradient line (kept, but trimmed) */
.assets_currency_main.blue_main .linesss {
  padding: 1px !important;
  background: linear-gradient(180deg, rgba(61,126,255,.6) 0%, rgba(30,99,255,.05) 80%) !important;
  opacity: .8;
}

/* Identity block */
.assets_currency_main.blue_main .profile_head_card_main {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* Generated avatar disc (CSS-only, no markup change needed) */
.assets_currency_main.blue_main .profile_head_card_main.no-avatar::before {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--rx-accent-2), var(--rx-accent-2) 70%),
    linear-gradient(135deg, var(--rx-accent-2), var(--rx-accent-2));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 6px 20px -6px rgba(30,99,255,.5);
  flex-shrink: 0;
  position: relative;
}
.assets_currency_main.blue_main .profile_head_card_main.no-avatar::after {
  content: "";
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302181a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.418 3.582-8 8-8s8 3.582 8 8'/></svg>") center/contain no-repeat;
  pointer-events: none;
}

.assets_currency_main.blue_main .user_details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.assets_currency_main.blue_main .user_subtitle {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(240,185,11,.18), rgba(240,185,11,.08)) !important;
  color: var(--rx-warn) !important;
  border: 1px solid rgba(240,185,11,.25);
  font-family: var(--rx-font) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  padding: 2px 7px !important;
  border-radius: 99px !important;
  text-transform: uppercase;
  margin: 0 0 2px !important;
}
.assets_currency_main.blue_main .user_title {
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assets_currency_main.blue_main .mail {
  color: var(--rx-muted) !important;
  font-family: var(--rx-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2FA enabled chip */
.assets_currency_main.blue_main .box-2fa-container {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  background: var(--rx-good-soft) !important;
  color: var(--rx-good) !important;
  border: 1px solid rgba(22,199,132,.3) !important;
  border-radius: 99px !important;
  padding: 4px 10px 4px 8px !important;
  font-family: var(--rx-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.assets_currency_main.blue_main .box-2fa-container img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(70%) saturate(444%) hue-rotate(108deg) brightness(96%) contrast(89%);
  width: 12px !important;
  height: 12px !important;
  margin-left: 2px !important;
}

/* ── Profile main form card ────────────────────────────────── */
.grey_card_main {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-lg) !important;
  padding: 18px !important;
}

/* Section labels (was small_title) → uppercase header with line */
.grey_card_main .small_title {
  position: relative;
  text-align: left !important;
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding-bottom: 8px !important;
  margin: 24px 0 14px !important;
  border-bottom: 1px solid var(--rx-border);
}
.grey_card_main .small_title:first-child,
.grey_card_main > .row:first-child .small_title { margin-top: 0 !important; }
.grey_card_main .small_title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 11px;
  background: var(--rx-accent);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -1px;
}

/* Editable form-groups (password, fullname, id) — keep as bordered */
.grey_card_main .form-group {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
}


/* Password container — eye icon visibility */
.grey_card_main .password-container { gap: 8px; }
.grey_card_main .toggle-icon {
  width: 16px;
  filter: brightness(0) invert(1) opacity(.5);
  cursor: pointer;
  transition: opacity .12s, filter .12s;
}
.grey_card_main .toggle-icon:hover {
  opacity: 1;
}

/* Save / Change button alignment — make it right-aligned, slim */
.grey_card_main .text-center {
  /* text-align: right !important; */
  margin-top: 12px !important;
}
.grey_card_main .text-center .btn-secondary {
  background: linear-gradient(180deg, var(--rx-accent-2), var(--rx-accent-2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  padding: 7px 18px !important;
  box-shadow: 0 4px 14px -4px rgba(30,99,255,.35) !important;
}
.grey_card_main .text-center .btn-secondary:hover { filter: brightness(1.06); }

/* 2FA section — qr area */
.grey_card_main .qr_area { margin-top: 18px !important; }
.grey_card_main .qr_area p {
  text-align: left !important;
  color: var(--rx-text-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin: 0 0 12px !important;
}
.grey_card_main .qr_area p::before {
  content: "01.";
  color: var(--rx-accent);
  font-family: var(--rx-font-mono);
  font-weight: 600;
  margin-right: 8px;
}
.grey_card_main .qr_area .qr_code_main {
  background: var(--rx-surface-2);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-r-md);
  padding: 12px;
  margin: 12px 0;
}
.grey_card_main .qr_area .qrcode {
  background: #fff !important;
  border-radius: var(--rx-r-sm) !important;
  width: 200px !important;
  height: 200px !important;
  padding: 8px !important;
  margin: 0 auto !important;
}
.grey_card_main .qr_area .copy_main {
  justify-content: center;
  background: var(--rx-surface-2);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-r-sm);
  padding: 8px 12px;
  margin: 12px 0 !important;
  font-size: 11px !important;
}

/* eContract section */
.grey_card_main .text-success {
  color: var(--rx-good) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.grey_card_main .text-success img {
  filter: brightness(0) saturate(100%) invert(67%) sepia(70%) saturate(444%) hue-rotate(108deg) brightness(96%) contrast(89%);
  width: 14px !important;
}
.grey_card_main .text-warning {
  color: var(--rx-warn) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* eContract "view" link card */
.grey_card_main .assets_currency_main.currency_main.bg-none {
  background: transparent !important;
  border: 1px dashed var(--rx-border-mid) !important;
  border-radius: var(--rx-r-sm) !important;
  padding: 8px !important;
  margin: 8px 0 !important;
}
.grey_card_main .assets_currency_main.currency_main.bg-none .assets_currency_title {
  color: var(--rx-accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  margin: 0 !important;
}

/* "Generate / Regenerate" buttons in eContract section — restore center */
.grey_card_main .text-center.mt-2.mb-4 { text-align: center !important; }

/* Terminate (danger zone) section */
.terminate_section {
  border: 1px dashed rgba(234,57,67,.3);
  border-radius: var(--rx-r-md);
  padding: 14px !important;
  margin-top: 28px !important;
}
.terminate_section .btn-secondary {
  background: var(--rx-bad-soft) !important;
  color: var(--rx-bad) !important;
  border: 1px solid rgba(234,57,67,.35) !important;
  padding: 7px 18px !important;
}
.terminate_section .btn-secondary:hover {
  background: rgba(234,57,67,.18) !important;
}
.terminate_section::before {
  content: "Danger Zone";
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rx-bad);
  margin-bottom: 10px;
  opacity: .8;
}

/* ═══════════════════════════════════════════════════════════
   ▒▒  DASHBOARD — DESIGN REVAMP                              ▒▒
   1. Section header w/ accent rule
   2. Wallet cards as exchange-grade balance rows
   3. Currency pair tickers like Binance/Huobi market list
   ═══════════════════════════════════════════════════════════ */

/* Section heading style for "Asset Overview" / "Currency Pairs" */
.assets_currency_main {
  background: var(--rx-surface-1) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-lg) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.assets_currency_main > .assets_currency_title:first-child {
  display: block;
  position: relative;
  text-align: left !important;
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--rx-border);
}
.assets_currency_main > .assets_currency_title:first-child::before {
  content: "";
  display: inline-block;
  width: 3px; height: 11px;
  background: var(--rx-accent);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: -1px;
}

/* ── Wallet asset cards — exchange-row style ───────────────── */
.assets_cards_main {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 6px !important;
}
@media (min-width: 768px) {
  .assets_cards_main:has(> .assets_card:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }

  .assets_card:hover {
    border-color: var(--rx-border-strong) !important;
  }

  .dx-wallet:hover,
  .assets_card:hover {
    border-color: var(--rx-accent)!important;
    transform: translateY(-3px);
    box-shadow: var(--rx-shadow-lift);
  }
}

.assets_card {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  transition: border-color .15s ease, transform .12s ease;
  position: relative;
}


.assets_card .top_section {
  align-items: center !important;
  gap: 12px;
}

.assets_card .assets_card_title {
  color: var(--rx-muted) !important;
  font-family: var(--rx-font) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.assets_card .assets_card_value {
  color: var(--rx-text) !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--rx-text) !important;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.assets_card .assets_card_value .wallet {
  color: var(--rx-muted) !important;
  font-family: var(--rx-font) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  margin-left: 0 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--rx-muted) !important;
}

/* Right-side action button — slim ghost */
.assets_card .top_section .right .btn,
.assets_card .top_section .right .btn-secondary {
  background: var(--rx-surface-3) !important;
  color: var(--rx-text-2) !important;
  border: 1px solid var(--rx-border) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  min-height: 28px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--rx-r-sm) !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: nowrap;
}
.assets_card .top_section .right .btn:hover,
.assets_card .top_section .right .btn-secondary:hover {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
  border-color: var(--rx-accent) !important;
}

/* Info icons in card titles */
.assets_card .top_section .left img[src*="info"] {
  width: 14px !important;
  height: 14px !important;
  filter: brightness(0) invert(1) opacity(.45);
  cursor: pointer;
  transition: opacity .12s;
}
.assets_card .top_section .left img[src*="info"]:hover {
  opacity: .85;
}

/* Sub-rows inside cards (margin info / ROI) */
.assets_card .order_margin_row {
  background: var(--rx-bg-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-xs) !important;
  padding: 5px 9px !important;
  margin: 6px 0 0 !important;
}
.assets_card .order_margin_row .margin_title {
  color: var(--rx-muted) !important;
  font-size: 10px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
}
.assets_card .order_margin_row .margin_value {
  color: var(--rx-text) !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Multiple stake action buttons stacked */
.assets_card .right.d-flex.flex-column .btn { margin-bottom: 4px !important; }
.assets_card .right.d-flex.flex-column .btn:last-child { margin-bottom: 0 !important; }

/* Promo card top row (with info image) */
.assets_card .middle .promo-value {
  background: var(--rx-warn-soft);
  border: 1px solid rgba(240,185,11,.3);
  border-radius: 50%;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .15s ease;
}
.assets_card .middle .promo-value:hover {
  background: rgba(240,185,11,.18);
  transform: scale(1.05);
}
.assets_card .middle .promo-value img {
  width: 24px !important;
  filter: brightness(0) saturate(100%) invert(76%) sepia(78%) saturate(569%) hue-rotate(2deg) brightness(98%) contrast(98%);
}

/* ── Currency Pair tickers — Binance/Huobi market list ─────── */
.assets_currency_main.currency_main {
  padding: 14px !important;
}
.currency_cards_main {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 768px) {
  .currency_cards_main {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px) {
  .currency_cards_main {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.currency_cards_main .currency_card {
  background: var(--rx-surface-2) !important;
  border: 1px solid var(--rx-border) !important;
  border-radius: var(--rx-r-md) !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  transition: border-color .15s, transform .12s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.currency_cards_main .currency_card:hover {
  border-color: var(--rx-accent) !important;
  transform: translateY(-1px);
}

/* Card header — flag + symbol + view link */
.currency_cards_main .currency_card .currency_card_header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 10px !important;
}
.currency_cards_main .currency_card .flag {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1px solid var(--rx-border);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.currency_cards_main .currency_card .flag img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.currency_cards_main .currency_card .currency_select_main {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  min-width: 0;
}
.currency_cards_main .currency_card .currency_name {
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.currency_cards_main .currency_card .currency_select .btn-primary {
  background: transparent !important;
  color: var(--rx-accent) !important;
  border: 1px solid var(--rx-border-strong) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  min-height: 24px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--rx-r-xs) !important;
  box-shadow: none !important;
}
.currency_cards_main .currency_card .currency_select .btn-primary:hover {
  background: var(--rx-accent-soft) !important;
  border-color: var(--rx-accent) !important;
  color: var(--rx-accent) !important;
}

/* Body — price chart layout */
.currency_cards_main .currency_card .price_chart_main {
  display: grid !important;
  grid-template-columns: 1fr 110px;
  gap: 12px !important;
  align-items: stretch;
}
.currency_cards_main .currency_card .price_area {
  width: auto !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Price row */
.currency_cards_main .currency_card .price_sec {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.currency_cards_main .currency_card .price_sec_title {
  color: var(--rx-muted) !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  margin: 0 !important;
  font-weight: 600 !important;
}
.currency_cards_main .currency_card .price_sec_value {
  color: var(--rx-text) !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  margin: 0 !important;
}

/* Bid/Ask compact pills */
.currency_cards_main .currency_card .bid_ask {
  gap: 6px !important;
  margin: 0 !important;
}
.currency_cards_main .currency_card .bid,
.currency_cards_main .currency_card .ask {
  font-size: 10.5px !important;
  font-family: var(--rx-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--rx-r-xs) !important;
  padding: 3px 6px !important;
  min-height: 24px !important;
  border-width: 1px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.currency_cards_main .currency_card .bid::before {
  content: "▲";
  font-size: 8px;
  margin-right: 3px;
  opacity: .8;
}
.currency_cards_main .currency_card .ask::before {
  content: "▼";
  font-size: 8px;
  margin-right: 3px;
  opacity: .8;
}

.currency_cards_main .currency_card .last_update {
  font-size: 9.5px !important;
  color: var(--rx-faint) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
}

/* Chart area on the right of each ticker */
.currency_cards_main .currency_card .chart_area {
  width: 110px !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}
.currency_cards_main .currency_card .chart-box {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  flex: 1;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  border-radius: var(--rx-r-xs);
  transition: background .12s;
}
.currency_cards_main .currency_card .chart-box:hover {
  background: var(--rx-accent-soft);
}
.currency_cards_main .currency_card .chart-box canvas {
  height: 60px !important;
  width: 100% !important;
}
.currency_cards_main .currency_card .timer-wrapper {
  margin: 0 !important;
}

/* "See more" button for currency list */
.assets_currency_main.currency_main + .text-center,
.assets_currency_main.currency_main .text-center {
  margin-top: 14px !important;
}
.assets_currency_main.currency_main .text-center .btn-secondary,
#loadMoreBtn {
  background: var(--rx-surface-2) !important;
  color: var(--rx-text-2) !important;
  border: 1px solid var(--rx-border-strong) !important;
  font-weight: 600 !important;
  padding: 7px 24px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#loadMoreBtn:hover {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
  border-color: var(--rx-accent) !important;
}

/* Promotion banner (commented out in markup but rules ready) */
.promotion_banner .swiper-slide article .banner_title {
  color: var(--rx-text) !important;
  font-family: var(--rx-font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

/* Dashboard mini-mobile-only wrapper — just a container */
.assets_cards_main.mini-mobile-only { display: grid !important; }

/* Promo small dashboard (top stake row spec) */
.assets_card:has(.promo-value) {
  background: linear-gradient(135deg, rgba(240,185,11,.06), var(--rx-surface-2) 60%) !important;
  border-color: rgba(240,185,11,.18) !important;
}


.history_table tbody tr td .badge-warning {
  background: var(--rx-warn-soft) !important;
  color: var(--rx-warn) !important;
  border-color: rgba(240,185,11,.3) !important;
}
.history_table tbody tr td .badge-success {
  background: var(--rx-good-soft) !important;
  color: var(--rx-good) !important;
  border-color: rgba(22,199,132,.3) !important;
}
.history_table tbody tr td .badge-primary {
  background: var(--rx-accent-soft) !important;
  color: var(--rx-accent) !important;
  border-color: rgba(30,99,255,.3) !important;
}
.history_table tbody tr td .badge-danger {
  background: var(--rx-bad-soft) !important;
  color: var(--rx-bad) !important;
  border-color: rgba(234,57,67,.3) !important;
}