/* SmartTradeBinary app extras on SmartTradeBinary shell */
.crypto-chart-host,
.crypto-chart-host iframe {
  background: var(--rt-card-bg) !important;
}

.crypto-chart-host {
  overflow: hidden;
}

.crypto-chart-host > div,
.crypto-chart-host iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}

.crypto-chart-host iframe {
  pointer-events: auto;
}

.ba-mode-card {
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
  background: var(--rt-card-bg);
  padding: 1.25rem;
  height: 100%;
  transition: var(--rt-trans);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.ba-mode-card:hover {
  border-color: var(--rt-primary);
  color: inherit;
}

.ba-mode-card.is-active {
  border-color: var(--rt-primary);
  box-shadow: 0 0 0 1px rgba(249, 11, 11, 0.35), 0 0 24px rgba(249, 11, 11, 0.12);
}

.ba-mode-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 11, 11, 0.12);
  color: var(--rt-primary);
  font-size: 1.25rem;
}

.ba-mode-card:not(.is-active) .ba-mode-icon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--rt-text-muted);
}

.ba-kpi .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.ba-activity-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rt-border);
}

.ba-activity-item:last-child {
  border-bottom: 0;
}

.ba-activity-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ba-activity-icon.win {
  background: rgba(22, 128, 60, 0.15);
  color: var(--rt-success);
}

.ba-activity-icon.loss {
  background: rgba(255, 77, 103, 0.15);
  color: var(--rt-danger);
}

.ba-activity-icon.info {
  background: rgba(14, 165, 233, 0.15);
  color: var(--rt-info);
}

.ba-footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding-top: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  font-size: 0.8rem;
}

.ba-online-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--rt-primary);
  display: inline-block;
  box-shadow: 0 0 8px var(--rt-primary);
}

.ba-header-mode {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.25rem;
  border: 0;
  background: transparent;
  font-size: 0.8rem;
  color: var(--rt-primary);
}

.ba-trade-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  min-height: calc(100vh - 140px);
}

@media (max-width: 1199.98px) {
  .ba-trade-layout {
    grid-template-columns: 1fr;
  }
}

.ba-chart-panel,
.ba-trade-panel {
  background: var(--rt-card-bg);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius);
}

.ba-digit-bar {
  height: 4.5rem;
  border-radius: 0.35rem;
  background: var(--rt-body-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0.35rem;
  border: 1px solid var(--rt-border);
}

.ba-digit-bar .fill {
  width: 70%;
  border-radius: 0.25rem 0.25rem 0 0;
  background: var(--rt-primary);
  min-height: 8%;
}

.ba-digit-bar.is-hot .fill {
  background: var(--rt-warning);
}

.ba-digit-bar.is-cold .fill {
  background: var(--rt-danger);
}

.ba-stake-chip {
  border: 1px solid var(--rt-border);
  background: var(--rt-body-bg);
  color: var(--rt-text);
  border-radius: 0.4rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.ba-stake-chip.active {
  background: var(--rt-primary);
  border-color: var(--rt-primary);
  color: #fff;
}

.ba-match-digit.active,
.ba-match-digit.btn-primary {
  background: var(--rt-primary);
  border-color: var(--rt-primary);
  color: #fff;
  font-weight: 700;
}

.ba-btn-over {
  background: var(--rt-primary);
  border: 0;
  color: #fff;
  font-weight: 700;
  min-height: 3rem;
}

.ba-btn-under {
  background: var(--rt-danger);
  border: 0;
  color: #fff;
  font-weight: 700;
  min-height: 3rem;
}

.sidebar-brand .brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 0;
  object-fit: contain;
}

.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .12);
}

.ba-mode-switch {
  width: 34px;
  height: 19px;
  padding: 2px;
  border-radius: 999px;
  background: var(--rt-primary);
  align-items: center;
  text-decoration: none;
}

.ba-mode-switch span {
  width: 15px;
  height: 15px;
  margin-left: auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.ba-switch-account {
  gap: .45rem;
  align-items: center;
  padding: .4rem .55rem;
  color: var(--rt-text);
  font-size: .78rem;
  text-decoration: none;
}

.ba-switch-account:hover {
  color: var(--rt-primary);
}

.header-profile .avatar-fallback,
.avatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(249, 11, 11, 0.2);
  color: var(--rt-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.ba-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--rt-text-muted);
}

.app-sidebar .menu-link.active,
.app-sidebar .submenu-link.active {
  color: var(--rt-primary);
}

.app-sidebar .sidebar-heading-overview {
  display: none;
}

.ba-page-tight .page-content {
  padding-bottom: 0.5rem;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ba-check-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.ba-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}

.ba-crypto-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  font-size: 0.8rem;
}

.ba-crypto-stats strong {
  display: block;
  color: var(--rt-heading);
  font-size: 0.9rem;
}

.ba-orderbook {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.ba-orderbook .row-sell {
  color: var(--rt-danger);
}

.ba-orderbook .row-buy {
  color: var(--rt-primary);
}

.ba-orderbook .mid {
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--rt-primary);
  padding: 0.5rem 0;
  border-top: 1px solid var(--rt-border);
  border-bottom: 1px solid var(--rt-border);
  margin: 0.35rem 0;
}

#baWatchTable .ba-watch-row {
  cursor: pointer;
}

#baWatchTable .ba-watch-row.table-active td {
  color: var(--rt-primary);
}

#baPairSelect {
  background: var(--rt-card-bg);
  border-color: var(--rt-border);
  color: var(--rt-heading);
}

#baTradeChartFocus .input-group {
  width: auto;
  max-width: none;
}

#baMarketSelect,
#baMarketSelect:focus,
#baMarketSelect:focus-visible {
  width: auto;
  max-width: none;
  field-sizing: content;
  border: 0;
  outline: none;
  box-shadow: none;
  background-color: transparent;
  color: var(--rt-heading);
}

.ba-predict.active {
  box-shadow: 0 0 0 1px rgba(249, 11, 11, 0.45);
}

#baOpenEmpty {
  display: block;
}

#baOpenTable:has(tbody tr)+#baOpenEmpty,
#baOpenBody:not(:empty)~#baOpenEmpty {
  display: none;
}

.tradingview-widget-container,
.tradingview-widget-container__widget {
  height: 100%;
  width: 100%;
}

.ba-deposit-steps {
  counter-reset: dep-step;
}

.ba-deposit-steps .ba-step {
  counter-increment: dep-step;
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 1.25rem;
}

.ba-deposit-steps .ba-step::before {
  content: counter(dep-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(249, 11, 11, 0.15);
  color: var(--rt-primary);
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dashboard mockup states */
.ba-dashboard-page .page-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dashboard-hero {
  min-height: 90px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 594px;
  align-items: center;
  gap: 16px;
}

.dashboard-hero h1 {
  margin: 0 0 .35rem;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.035em;
}

.dashboard-hero p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .88rem;
}

.dashboard-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.dashboard-mode-card {
  min-height: 90px;
  padding: .85rem;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: start;
  gap: .75rem;
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  background: var(--rt-card-bg);
  color: var(--rt-text);
  text-decoration: none;
}

.dashboard-mode-card:hover,
.dashboard-mode-card.is-active {
  color: var(--rt-text);
  border-color: var(--rt-primary);
}

.dashboard-mode-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .035);
  color: #52606a;
  font-size: 1.45rem;
}

.dashboard-mode-card.is-active .dashboard-mode-icon {
  background: rgba(249, 11, 11, .10);
  color: var(--rt-primary);
}

.dashboard-mode-card strong {
  display: block;
  margin: .1rem 0 .25rem;
  font-size: .87rem;
}

.dashboard-mode-card.is-active strong {
  color: var(--rt-primary);
}

.dashboard-mode-card small {
  display: block;
  color: var(--rt-text-muted);
  font-size: .72rem;
  line-height: 1.55;
}

.dashboard-mode-card .mode-dot {
  margin-top: .35rem;
  color: var(--rt-primary);
  font-size: .58rem;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.dashboard-kpi-card {
  height: 132px;
  padding: 1.15rem;
  position: relative;
  overflow: hidden;
  justify-content: center;
}

.dashboard-kpi-card>div:first-child {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .36rem;
}

.dashboard-kpi-card .kpi-label {
  color: var(--rt-text-muted);
  font-size: .78rem;
}

.dashboard-kpi-card strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1.1;
}

.dashboard-kpi-card small {
  font-size: .72rem;
}

.dashboard-kpi-card.best-market-card strong {
  max-width: 185px;
  font-size: 1.02rem;
  line-height: 1.3;
}

.kpi-watermark {
  position: absolute;
  right: 20px;
  top: 42px;
  color: rgba(167, 180, 188, .08);
  font-size: 3rem;
}

.dashboard-kpi-spark {
  position: absolute;
  right: 12px;
  top: 34px;
  width: 118px;
  height: 62px;
}

.dashboard-winrate {
  position: absolute;
  right: 12px;
  top: 18px;
  width: 92px;
  height: 92px;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(340px, 2fr);
  gap: 15px;
}

.dashboard-chart-card,
.dashboard-activity-card {
  overflow: hidden;
}

.dashboard-card-heading {
  min-height: 50px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-card-heading h2 {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
}

.dashboard-card-heading a {
  color: var(--rt-primary);
  font-size: .72rem;
  text-decoration: none;
}

.dashboard-card-heading .form-select {
  width: 100px;
  background-color: transparent;
  border-color: var(--rt-border);
  color: var(--rt-text);
  font-size: .72rem;
}

.dashboard-chart-card #chart-performance {
  padding: 0 .25rem;
}

.dashboard-activity-list {
  padding: 0 1rem;
}

.dashboard-activity-row {
  height: 55px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  border-top: 1px solid var(--rt-border);
}

.dashboard-activity-row .ba-activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.activity-copy,
.activity-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.activity-copy strong,
.activity-meta strong {
  font-size: .75rem;
  line-height: 1.2;
}

.activity-copy small,
.activity-meta small {
  overflow: hidden;
  color: var(--rt-text-muted);
  font-size: .68rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-meta {
  align-items: flex-end;
  text-align: right;
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 30.5% 31.5% minmax(0, 1fr);
  gap: 15px;
}

.dashboard-bottom-grid>.card {
  height: 278px;
  overflow: hidden;
}

.dashboard-table-card {
  display: flex;
  flex-direction: column;
}

.dashboard-table-card .table {
  font-size: .72rem;
}

.dashboard-table-card .table> :not(caption)>*>* {
  padding: .38rem 1rem;
  border-color: var(--rt-border);
  white-space: nowrap;
}

.dashboard-table-card .table thead th {
  color: var(--rt-text-muted);
  font-size: .67rem;
  font-weight: 500;
}

.dashboard-summary-card {
  padding: 0 1rem .85rem;
}

.dashboard-summary-card .dashboard-card-heading {
  padding-left: 0;
  padding-right: 0;
}

.dashboard-summary-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .42rem;
  font-size: .75rem;
}

.dashboard-summary-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-summary-list .summary-divider {
  margin-top: .2rem;
  padding-top: .62rem;
  border-top: 1px solid var(--rt-border);
}

.dashboard-summary-card .btn,
.dashboard-strategies-card>.btn {
  border-radius: 5px;
}

.dashboard-strategies-card>.btn {
  margin: auto 1rem .85rem;
  width: calc(100% - 2rem) !important;
}

.strategy-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--rt-primary);
}

.strategy-status i {
  font-size: .42rem;
}

.strategy-status.is-paused {
  color: var(--rt-warning);
}

@media (max-width: 1199.98px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-main-grid,
  .dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-bottom-grid>.card {
    height: auto;
    min-height: 260px;
  }
}

@media (max-width: 575.98px) {

  .dashboard-mode-grid,
  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-main-grid>.card {
    height: auto;
    min-height: 320px;
  }

  .dashboard-hero h1 {
    font-size: 1.45rem;
  }

  .dashboard-activity-row {
    grid-template-columns: 34px minmax(0, 1fr);
    height: auto;
    min-height: 60px;
  }

  .activity-meta {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
    padding-bottom: .5rem;
  }
}

/* Live wallet dashboard */
.header-wallet-balance {
  min-width: 132px;
  padding: 0 1.35rem;
  flex-direction: column;
  border-left: 1px solid var(--rt-border);
  border-right: 1px solid var(--rt-border);
  line-height: 1.2;
}

.header-wallet-balance strong {
  font-size: .82rem;
}

.header-wallet-balance small {
  margin-top: .15rem;
  color: var(--rt-text-muted);
  font-size: .64rem;
}

.ba-toast-below-header {
  top: calc(var(--rt-header-h, 56px) + .5rem) !important;
}

.ba-trade-notif {
  width: max-content;
  max-width: min(14rem, calc(100% - 1rem));
  z-index: 5;
  pointer-events: none;
}

.ba-trade-notif.position-fixed {
  top: calc(var(--rt-header-h, 56px) + .5rem) !important;
  z-index: 1080;
}

@media (max-width: 575.98px) {
  .header-wallet-balance {
    min-width: 0;
    padding: 0 .4rem;
  }
}

.ba-dashboard-live {
  --rt-sidebar-width: 198px;
  --rt-header-h: 56px;
}

.ba-dashboard-live .sidebar-nav {
  padding-top: .45rem;
}

.ba-dashboard-live .sidebar-menu .menu-link {
  padding-top: .41rem;
  padding-bottom: .41rem;
  font-size: 12px;
}

.ba-dashboard-live .sidebar-heading {
  padding-top: .55rem;
  font-size: 9px;
}

.ba-dashboard-live .page-content {
  padding: 14px 16px 10px 24px;
  gap: 12px;
}

.ba-dashboard-live .app-footer {
  height: 57px;
  margin: 0;
  padding: .65rem 1.25rem;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .62rem;
}

.app-footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.app-footer-links a {
  margin: 0;
  color: var(--rt-text-muted);
  text-decoration: none;
}

.app-footer-social {
  display: flex;
  gap: .7rem;
}

.app-footer-social a {
  width: 35px;
  height: 35px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-border);
  border-radius: 50%;
  color: var(--rt-text-muted);
  text-decoration: none;
}

.live-dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 359px;
  gap: 18px;
}

.live-dashboard-primary,
.live-dashboard-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-dashboard-heading {
  height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.live-dashboard-heading h1 {
  margin: 0 0 .22rem;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.live-dashboard-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .75rem;
}

.live-dashboard-heading .btn {
  min-width: 165px;
  margin-top: 10px;
  font-size: .68rem;
}

.live-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
}

.live-kpi-card {
  height: 138px;
  padding: .85rem;
  position: relative;
  overflow: hidden;
}

.live-kpi-card>span {
  color: var(--rt-text-muted);
  text-transform: uppercase;
  font-size: .62rem;
}

.live-kpi-card>strong {
  display: block;
  margin-top: .55rem;
  font-size: 1.28rem;
  line-height: 1;
}

.live-kpi-card>small {
  display: block;
  margin-top: .5rem;
  color: var(--rt-text-muted);
  font-size: .58rem;
}

.live-kpi-card>.kpi-change {
  margin-top: .85rem;
  font-weight: 600;
}

.live-kpi-icon {
  position: absolute;
  top: 27px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
}

.live-kpi-card.tone-green .live-kpi-icon {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .13);
}

.live-kpi-card.tone-blue .live-kpi-icon {
  color: #0d82ff;
  background: rgba(13, 130, 255, .13);
}

.live-kpi-card.tone-purple .live-kpi-icon {
  color: #8b5cf6;
  background: rgba(139, 92, 246, .14);
}

.live-kpi-card.tone-amber .live-kpi-icon {
  color: #f5b942;
  background: rgba(245, 185, 66, .14);
}

.live-kpi-card.tone-red .live-kpi-icon {
  color: #ef302b;
  background: rgba(239, 48, 43, .14);
}

.live-kpi-spark {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 72px;
  height: 35px;
}

.live-profit-card {
  height: 299px;
  overflow: hidden;
}

.live-card-heading {
  min-height: 45px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.live-card-heading h2 {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
}

.live-card-heading a {
  color: #0ea5e9;
  font-size: .66rem;
  text-decoration: none;
}

.live-card-heading .btn {
  min-width: 49px;
  font-size: .62rem;
}

.live-profit-card #live-profit-performance {
  height: 252px;
}

.live-bottom-grid {
  height: 280px;
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 12px;
}

.live-bottom-grid>.card {
  overflow: hidden;
}

.live-bots-card,
.live-assets-card {
  display: flex;
  flex-direction: column;
}

.live-bots-card .table {
  font-size: .61rem;
}

.live-bots-card .table> :not(caption)>*>* {
  padding: .26rem .65rem;
  border-color: var(--rt-border);
  white-space: nowrap;
}

.live-bots-card .table th {
  color: var(--rt-text-muted);
  font-size: .55rem;
  font-weight: 500;
}

.live-bots-card td:first-child {
  display: flex;
  align-items: center;
  gap: .42rem;
}

.live-round-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .72rem;
}

.tone-green {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .14);
}

.tone-blue {
  color: #0d82ff;
  background: rgba(13, 130, 255, .14);
}

.tone-purple {
  color: #9b60ee;
  background: rgba(155, 96, 238, .14);
}

.tone-amber {
  color: #ffab0a;
  background: rgba(255, 171, 10, .14);
}

.tone-red {
  color: var(--rt-danger);
  background: rgba(255, 77, 103, .14);
}

.live-status {
  margin-left: auto;
  padding: .18rem .35rem;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
  font-size: .5rem;
}

.live-status.paused {
  color: #f59e0b;
  background: rgba(245, 158, 11, .12);
}

.live-card-link {
  margin-top: auto;
  min-height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--rt-border);
  color: var(--rt-primary);
  font-size: .62rem;
  text-decoration: none;
}

.live-assets-content {
  flex: 1;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: .75rem;
}

#live-assets-donut {
  height: 165px;
}

.live-assets-legend {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: .63rem;
}

.live-assets-legend div {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: .45rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.green {
  background: var(--rt-primary);
}

.legend-dot.blue {
  background: #0d82ff;
}

.legend-dot.purple {
  background: #7c3fc3;
}

.live-referral-banner {
  height: 60px;
  padding: .7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(139, 92, 246, .3);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .18), rgba(139, 92, 246, .05));
}

.live-gift-icon {
  width: 46px;
  text-align: center;
  color: #9b60ee;
  font-size: 2rem;
}

.live-referral-banner div {
  display: flex;
  flex-direction: column;
  font-size: .7rem;
}

.live-referral-banner small {
  margin-top: .15rem;
  color: var(--rt-text-muted);
  font-size: .62rem;
}

.live-referral-banner .btn {
  margin-left: auto;
  min-width: 142px;
  color: #fff;
  background: rgba(139, 92, 246, .22);
}

.live-dashboard-rail>.card {
  border-radius: 7px;
}

.live-wallet-card {
  height: 321px;
  padding: 0 1rem 1rem;
}

.live-wallet-card .live-card-heading {
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid var(--rt-border);
}

.live-wallet-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: .75rem;
}

.live-wallet-split>div {
  position: relative;
  padding: .75rem .35rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-right: 1px solid var(--rt-border);
}

.live-wallet-split>div:last-child {
  padding-left: .75rem;
  border-right: 0;
}

.live-wallet-split small,
.live-total-balance small {
  color: var(--rt-text-muted);
  font-size: .62rem;
}

.live-wallet-split strong {
  font-size: 1.08rem;
}

.live-wallet-split .live-round-icon {
  position: absolute;
  right: 7px;
  bottom: 10px;
  border-radius: 5px;
}

.live-total-balance {
  position: relative;
  padding: .75rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  border-top: 1px solid var(--rt-border);
}

.live-total-balance>strong {
  font-size: 1.45rem;
}

.live-total-balance .badge {
  position: absolute;
  right: 0;
  top: 18px;
  font-size: .55rem;
}

.live-total-balance>small:last-child {
  position: absolute;
  right: 0;
  bottom: 15px;
}

.live-wallet-card .btn {
  height: 43px;
  margin-top: .65rem;
  font-size: .74rem;
}

.live-rail-activity {
  height: 310px;
  overflow: hidden;
}

.live-rail-row {
  height: 52px;
  padding: .4rem 1rem;
  display: grid;
  grid-template-columns: 27px 1fr auto auto;
  align-items: center;
  gap: .55rem;
  border-top: 1px solid var(--rt-border);
}

.live-rail-row>span:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.live-rail-row strong {
  font-size: .62rem;
}

.live-rail-row small {
  color: var(--rt-text-muted);
  font-size: .56rem;
  white-space: nowrap;
}

.live-market-card {
  height: 225px;
  overflow: hidden;
}

.live-market-row {
  height: 43px;
  padding: .35rem 1rem;
  display: grid;
  grid-template-columns: 27px 1fr auto auto 38px 14px;
  align-items: center;
  gap: .45rem;
  border-top: 1px solid var(--rt-border);
  font-size: .58rem;
}

.live-market-row .live-round-icon {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
}

@media (max-width: 1199.98px) {
  .ba-dashboard-live {
    --rt-sidebar-width: 236px;
    --rt-header-h: 58px;
  }

  .live-dashboard-shell {
    grid-template-columns: 1fr;
  }

  .live-dashboard-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-market-card {
    height: auto;
    min-height: 225px;
  }
}

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

  .live-kpi-card:last-child {
    grid-column: 1 / -1;
  }

  .live-bottom-grid {
    height: auto;
    grid-template-columns: 1fr;
  }

  .live-bottom-grid>.card {
    min-height: 280px;
  }

  .live-dashboard-rail {
    grid-template-columns: 1fr;
  }

  .live-dashboard-heading {
    height: auto;
  }

  .live-dashboard-heading .btn {
    display: none;
  }

  .live-referral-banner {
    height: auto;
  }
}

@media (max-width: 575.98px) {
  .live-kpi-grid {
    grid-template-columns: 1fr;
  }

  .live-kpi-card:last-child {
    grid-column: auto;
  }

  .live-assets-content {
    grid-template-columns: 1fr;
  }

  .app-footer-links,
  .app-footer-social {
    display: none;
  }
}

/* Dense dashboard overview */
.ba-dashboard-overview {
  --rt-sidebar-width: 223px;
  --rt-header-h: 56px;
}

.ba-dashboard-overview .page-content {
  padding: 20px 32px 12px;
  gap: 13px;
}

.ba-dashboard-overview .app-footer {
  height: 55px;
  margin: 0;
  padding: .65rem 1.25rem;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .62rem;
}

.overview-heading {
  height: 47px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.overview-heading h1 {
  margin: 0 0 .2rem;
  font-size: 1.45rem;
  letter-spacing: -.03em;
}

.overview-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .72rem;
}

.overview-heading>div:last-child {
  display: flex;
  gap: 12px;
}

.overview-heading .btn {
  min-width: 154px;
  font-size: .66rem;
}

.overview-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.overview-kpi-card {
  height: 124px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.overview-kpi-card>span {
  color: var(--rt-text-muted);
  text-transform: uppercase;
  font-size: .62rem;
}

.overview-kpi-card>strong {
  display: block;
  margin-top: .65rem;
  font-size: 1.35rem;
}

.overview-kpi-card>small {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.overview-kpi-card small b {
  color: var(--rt-primary);
  font-style: normal;
}

.overview-kpi-card small em {
  color: var(--rt-danger);
  font-style: normal;
}

.overview-kpi-card>div {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 78px;
  height: 46px;
}

.overview-kpi-art {
  position: absolute;
  right: 16px;
  bottom: 24px;
  color: var(--rt-primary);
  font-size: 2.1rem;
}

.overview-kpi-card #overview-winrate-donut {
  right: 9px;
  top: 7px;
  bottom: auto;
  width: 95px;
  height: 95px;
}

.overview-kpi-card .overview-market {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.05rem;
}

.overview-market i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: #ff9700;
  font-size: .8rem;
}

.overview-main-grid {
  height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr);
  gap: 14px;
}

.overview-left-column,
.overview-right-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.overview-performance-card {
  height: 371px;
  overflow: hidden;
}

#overview-performance-chart {
  height: 262px;
}

.overview-profit-summary {
  height: 63px;
  padding: .7rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rt-border);
}

.overview-profit-summary div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  border-right: 1px solid var(--rt-border);
}

.overview-profit-summary div:last-child {
  border-right: 0;
}

.overview-profit-summary small {
  color: var(--rt-text-muted);
  font-size: .56rem;
}

.overview-profit-summary strong {
  font-size: .76rem;
}

.overview-lower-grid {
  height: 236px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 13px;
}

.overview-lower-grid>.card {
  overflow: hidden;
}

.overview-distribution-card .live-assets-content {
  grid-template-columns: 140px 1fr;
}

#overview-trades-donut {
  height: 155px;
}

.legend-dot.amber {
  background: #ffab0a;
}

.overview-bars {
  padding: .25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.overview-bars div {
  display: grid;
  grid-template-columns: 68px 1fr 62px;
  align-items: center;
  gap: .6rem;
  font-size: .62rem;
}

.overview-bars i {
  height: 10px;
  width: var(--bar);
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #D90808, var(--rt-primary));
}

.overview-bars i.other {
  background: #52606a;
}

.overview-trades-card {
  height: 262px;
  overflow: hidden;
}

.overview-trade-row {
  height: 43px;
  padding: .3rem .85rem;
  display: grid;
  grid-template-columns: 27px 1fr auto 90px;
  align-items: center;
  gap: .5rem;
  border-top: 1px solid var(--rt-border);
}

.overview-trade-row>span:nth-child(2),
.overview-trade-row>span:last-child {
  display: flex;
  flex-direction: column;
}

.overview-trade-row>span:last-child {
  text-align: right;
}

.overview-trade-row strong {
  font-size: .62rem;
}

.overview-trade-row small {
  color: var(--rt-text-muted);
  font-size: .54rem;
}

.tone-dark {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.overview-health-card {
  height: 213px;
  overflow: hidden;
}

.overview-health-card>div {
  flex: 1;
  display: grid;
  grid-template-columns: 145px 1fr;
  align-items: center;
  padding: 0 1rem;
}

#overview-health-donut {
  height: 125px;
}

.overview-health-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  color: var(--rt-text-muted);
  font-size: .61rem;
}

.overview-health-card li {
  display: flex;
  justify-content: space-between;
}

.overview-health-card li::before {
  content: '•';
  margin-right: .4rem;
  color: var(--rt-primary);
}

.overview-health-card li b {
  margin-left: auto;
  color: var(--rt-primary);
}

.overview-health-card p {
  margin: 0 .75rem .65rem;
  padding: .55rem .7rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  color: var(--rt-primary);
  font-size: .7rem;
}

.overview-health-card p span {
  display: flex;
  flex-direction: column;
  color: var(--rt-text);
}

.overview-health-card p small {
  margin-top: .15rem;
  color: var(--rt-text-muted);
  font-size: .52rem;
}

.overview-bots-card {
  height: 119px;
  overflow: hidden;
}

.overview-bots-card>div {
  height: 24px;
  padding: .2rem .85rem;
  display: grid;
  grid-template-columns: 1fr 60px 60px;
  gap: .5rem;
  border-top: 1px solid var(--rt-border);
  font-size: .58rem;
}

.overview-bots-card>div b,
.overview-bots-card>div strong {
  color: var(--rt-primary);
}

.overview-market-update {
  height: 50px;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid #0d82ff;
  border-radius: 7px;
  color: #0ea5e9;
  background: rgba(14, 165, 233, .05);
}

.overview-market-update>span {
  display: flex;
  flex-direction: column;
  color: var(--rt-text);
  font-size: .66rem;
}

.overview-market-update small {
  margin-top: .1rem;
  color: var(--rt-text-muted);
  font-size: .54rem;
}

.overview-market-update a {
  margin-left: auto;
  color: #0ea5e9;
  font-size: .66rem;
  text-decoration: none;
}

@media (max-width: 1199.98px) {
  .ba-dashboard-overview {
    --rt-sidebar-width: 236px;
    --rt-header-h: 58px;
  }

  .overview-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-main-grid {
    height: auto;
    grid-template-columns: 1fr;
  }

  .overview-left-column,
  .overview-right-column {
    min-height: 620px;
  }
}

@media (max-width: 767.98px) {
  .overview-heading {
    height: auto;
  }

  .overview-heading>div:last-child {
    display: none;
  }

  .overview-kpi-grid {
    grid-template-columns: 1fr;
  }

  .overview-lower-grid {
    height: auto;
    grid-template-columns: 1fr;
  }

  .overview-lower-grid>.card {
    min-height: 236px;
  }

  .overview-profit-summary {
    height: auto;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .overview-profit-summary div {
    border-right: 0;
  }

  .overview-market-update {
    height: auto;
  }

  .overview-market-update a {
    display: none;
  }
}

/* Finance pages: wallet, deposits, withdrawals, transactions */
.ba-finance-page {
  --rt-sidebar-width: 229px;
  --rt-header-h: 68px;
}

.ba-finance-page .page-content {
  padding: 23px 32px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ba-finance-page .sidebar-menu .menu-link {
  padding-top: .48rem;
  padding-bottom: .48rem;
}

.finance-page-heading {
  min-height: 75px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

.finance-page-heading h1 {
  margin: 0 0 .35rem;
  font-size: 1.7rem;
  line-height: 1.15;
  letter-spacing: -.035em;
}

.finance-page-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .83rem;
}

.finance-security-card {
  width: 506px;
  min-height: 75px;
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid rgba(21, 36, 51, .8);
  border-radius: 11px;
  background: linear-gradient(110deg, rgba(249, 11, 11, .035), var(--rt-card-bg));
}

.finance-security-card>span {
  width: 43px;
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .11);
  font-size: 1.25rem;
}

.finance-security-card div {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.finance-security-card strong {
  font-size: .78rem;
}

.finance-security-card small {
  color: var(--rt-text-muted);
  font-size: .7rem;
}

.wallet-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1.04fr 1.16fr;
  gap: 22px;
}

.wallet-balance-card {
  height: 139px;
  padding: 1.45rem 1.35rem;
  position: relative;
  overflow: hidden;
}

.wallet-balance-card.is-primary {
  border-color: var(--rt-primary);
}

.wallet-balance-card>span {
  text-transform: uppercase;
  font-size: .76rem;
}

.wallet-balance-card.tone-green>span {
  color: var(--rt-primary);
}

.wallet-balance-card.tone-blue>span {
  color: #2685ff;
}

.wallet-balance-card.tone-purple>span {
  color: #a362ef;
}

.wallet-balance-card>strong {
  display: block;
  margin-top: .85rem;
  font-size: 1.65rem;
  line-height: 1;
}

.wallet-balance-card>small {
  display: block;
  margin-top: .7rem;
  color: var(--rt-text-muted);
  font-size: .72rem;
}

.wallet-balance-card img {
  position: absolute;
  right: 24px;
  top: 43px;
  width: 63px;
  height: 63px;
  object-fit: contain;
}

.wallet-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.51fr) minmax(410px, 1fr);
  gap: 18px;
}

.wallet-transfer-card {
  padding: 1.2rem;
}

.wallet-transfer-card header h2,
.wallet-transactions-card header h2,
.wallet-summary-card h2 {
  margin: 0;
  font-size: .9rem;
}

.wallet-transfer-card header p {
  margin: .55rem 0 1.35rem;
  color: var(--rt-text-muted);
  font-size: .72rem;
}

.wallet-transfer-pair {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 1rem;
  align-items: end;
}

.wallet-transfer-pair label,
.wallet-amount-label {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: .72rem;
}

.wallet-transfer-pair .form-select {
  height: 51px;
  font-size: .75rem;
}

.wallet-transfer-arrow {
  width: 61px;
  height: 61px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  border: 1px solid var(--rt-border);
  border-radius: 50%;
  color: var(--rt-primary);
  font-size: 1.35rem;
}

.wallet-amount-label {
  position: relative;
  margin-top: 1.5rem;
}

.wallet-amount-label>small {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--rt-text-muted);
}

.wallet-amount-label>small b {
  color: #0ea5e9;
  font-weight: 500;
}

.wallet-amount-control {
  position: relative;
  display: block;
}

.wallet-amount-control input {
  height: 50px;
  padding-right: 60px;
  font-weight: 600;
}

.wallet-amount-control b {
  position: absolute;
  right: 18px;
  top: 15px;
  font-size: .75rem;
}

.wallet-amount-chips {
  margin-top: .7rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .55rem;
}

.wallet-amount-chips .ba-stake-chip {
  height: 40px;
  border-radius: 6px;
}

.wallet-transfer-button {
  height: 53px;
  margin-top: 1rem;
  position: relative;
  font-size: .8rem;
}

.wallet-transfer-button i {
  position: absolute;
  right: 20px;
  top: 18px;
}

.wallet-how-card {
  margin-top: 1.85rem;
  min-height: 77px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid var(--rt-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .015);
}

.wallet-how-card>i {
  color: #0ea5e9;
  font-size: 1.4rem;
}

.wallet-how-card div {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.wallet-how-card strong {
  font-size: .72rem;
}

.wallet-how-card small {
  color: var(--rt-text-muted);
  font-size: .66rem;
}

.wallet-transactions-card {
  padding: 1.15rem 1rem .75rem;
  display: flex;
  flex-direction: column;
}

.wallet-transactions-card>header {
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.wallet-transactions-card header a {
  color: var(--rt-primary);
  font-size: .7rem;
  text-decoration: none;
}

.wallet-transaction-row {
  height: 80px;
  display: grid;
  grid-template-columns: 45px 1fr auto;
  gap: .75rem;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
}

.wallet-transaction-row .live-round-icon {
  width: 43px;
  height: 43px;
  flex-basis: 43px;
  border-radius: 50%;
  font-size: 1rem;
}

.wallet-transaction-row>span:nth-child(2),
.wallet-transaction-row>span:last-child {
  display: flex;
  flex-direction: column;
  gap: .22rem;
}

.wallet-transaction-row strong {
  font-size: .72rem;
}

.wallet-transaction-row small {
  color: var(--rt-text-muted);
  font-size: .62rem;
}

.wallet-transaction-row>span:last-child {
  align-items: flex-end;
}

.wallet-transaction-row>span:last-child b {
  padding: .18rem .45rem;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
  font-size: .54rem;
  font-weight: 500;
}

.wallet-transactions-card>.btn {
  height: 40px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: .68rem;
}

.wallet-transactions-card>.btn i {
  position: absolute;
  right: 15px;
}

.wallet-summary-card {
  height: 121px;
  padding: 1rem 1.2rem;
}

.wallet-summary-card>div {
  height: 67px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.wallet-summary-card article {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-right: 1px solid var(--rt-border);
  padding: 0 .8rem;
}

.wallet-summary-card article:first-child {
  padding-left: 0;
}

.wallet-summary-card article:last-child {
  border-right: 0;
}

.wallet-summary-card article>span:last-child {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.wallet-summary-card small {
  color: var(--rt-text-muted);
  font-size: .64rem;
}

.wallet-summary-card article strong {
  font-size: 1.12rem;
}

.tone-teal {
  color: #F90B0B;
  background: rgba(249, 11, 11, .12);
}

@media (max-width: 1199.98px) {
  .ba-finance-page {
    --rt-sidebar-width: 236px;
    --rt-header-h: 58px;
  }

  .finance-security-card {
    width: 420px;
  }

  .wallet-main-grid {
    grid-template-columns: 1fr;
  }

  .wallet-main-grid>.card {
    height: auto;
    min-height: 480px;
  }

  .wallet-summary-card {
    height: auto;
  }

  .wallet-summary-card>div {
    height: auto;
    grid-template-columns: repeat(2, 1fr);
  }

  .wallet-summary-card article {
    min-height: 70px;
    border-right: 0;
  }
}

@media (max-width: 767.98px) {
  .finance-page-heading {
    flex-direction: column;
  }

  .finance-security-card {
    width: 100%;
  }

  .wallet-balance-grid {
    grid-template-columns: 1fr;
  }

  .wallet-transfer-pair {
    grid-template-columns: 1fr;
  }

  .wallet-transfer-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .wallet-summary-card>div {
    grid-template-columns: 1fr;
  }

  .wallet-amount-chips {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ba-deposit-page {
  --rt-header-h: 63px;
}

.ba-deposit-page .page-content {
  padding: 13px 23px 12px 26px;
  gap: 10px;
}

.deposit-page-heading {
  min-height: 56px;
}

.deposit-page-heading h1 {
  margin-top: 7px;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.deposit-page-heading p {
  font-size: .7rem;
}

.deposit-page-heading .finance-security-card {
  min-height: 55px;
  width: 489px;
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.deposit-page-heading .finance-security-card>span {
  width: 37px;
  height: 37px;
}

.deposit-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.445fr) minmax(430px, 1fr);
  gap: 22px;
}

.deposit-primary-column,
.deposit-side-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deposit-setup-card {
  padding: 1.15rem 1.35rem;
}

.deposit-step-block {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rt-border);
}

.deposit-step-block:last-child {
  margin: 0;
  padding: 0;
  border: 0;
}

.deposit-step-block h2,
.deposit-payment-card h2,
.deposit-side-column h2 {
  margin: 0 0 1rem;
  font-size: .72rem;
  text-transform: uppercase;
}

.deposit-amount-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.deposit-amount-grid .ba-stake-chip {
  height: 46px;
  position: relative;
  border-radius: 6px;
}

.deposit-amount-grid .ba-stake-chip i {
  position: absolute;
  right: -8px;
  top: -10px;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--rt-primary);
  font-size: .6rem;
}

.deposit-step-block label {
  margin-top: .8rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .65rem;
}

.deposit-step-block>small {
  display: block;
  margin-top: .45rem;
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.deposit-step-block>small b {
  margin: 0 .45rem;
}

.deposit-input-wrap,
.deposit-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.deposit-input-wrap input {
  height: 42px;
  padding-right: 85px;
}

.deposit-input-wrap>b {
  position: absolute;
  right: 16px;
  font-size: .66rem;
}

.deposit-method-card {
  width: 100%;
  height: 66px;
  padding: .7rem .85rem;
  display: grid;
  grid-template-columns: 78px 1fr 31px 14px;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--rt-primary);
  border-radius: 7px;
  color: var(--rt-text);
  background: transparent;
  text-align: left;
}

.deposit-method-card img {
  width: 72px;
}

.deposit-method-card span {
  display: flex;
  flex-direction: column;
}

.deposit-method-card strong {
  font-size: .7rem;
}

.deposit-method-card small {
  color: var(--rt-text-muted);
  font-size: .58rem;
}

.deposit-method-card>i:nth-last-child(2) {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--rt-primary);
}

.finance-info-strip,
.finance-important-strip {
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid rgba(14, 165, 233, .35);
  border-radius: 7px;
  color: #0ea5e9;
  background: rgba(14, 165, 233, .08);
}

.finance-info-strip {
  min-height: 52px;
  margin-top: .75rem;
  padding: .55rem .85rem;
  font-size: .62rem;
}

.finance-info-strip>i {
  font-size: 1.1rem;
}

.deposit-phone-wrap {
  height: 42px;
  border: 1px solid var(--rt-border);
  border-radius: 7px;
}

.deposit-phone-wrap>b {
  padding-left: .75rem;
}

.deposit-phone-wrap>strong {
  padding: 0 .65rem;
  font-size: .68rem;
}

.deposit-phone-wrap>i {
  padding-right: .75rem;
  font-size: .55rem;
}

.deposit-phone-wrap input {
  height: 40px;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
}

.deposit-phone-wrap>i:last-child {
  padding: 0 .85rem;
  color: var(--rt-text-muted);
  font-size: .85rem;
}

.deposit-payment-card {
  height: 215px;
  padding: 1rem 1.2rem;
}

.deposit-payment-card>div {
  height: 155px;
  padding: .2rem .9rem;
  display: grid;
  grid-template-columns: 1.65fr .9fr;
  gap: 1rem;
  border: 1px solid var(--rt-border);
  border-radius: 7px;
}

.deposit-payment-card>div>span {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.deposit-payment-card small {
  color: var(--rt-text-muted);
  font-size: .58rem;
}

.deposit-pay-identifiers {
  display: grid;
  grid-template-columns: 1fr 1.25fr 34px;
  align-items: end;
  gap: 1rem;
}

.deposit-pay-identifiers>span {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.deposit-pay-identifiers strong {
  font-size: 1.18rem;
}

.deposit-pay-identifiers span:first-child strong {
  color: var(--rt-primary);
}

.deposit-pay-identifiers button {
  width: 31px;
  height: 31px;
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  color: var(--rt-text-muted);
  background: transparent;
}

.deposit-pay-total {
  padding-left: 1.5rem;
  border-left: 1px dashed var(--rt-border);
  text-align: center;
}

.deposit-pay-total strong {
  font-size: 1.2rem;
}

.deposit-pay-total b {
  color: var(--rt-primary);
  font-size: .68rem;
}

.finance-important-strip {
  min-height: 65px;
  padding: .7rem 1.2rem;
}

.finance-important-strip>i {
  font-size: 1.45rem;
}

.finance-important-strip>span {
  display: flex;
  flex-direction: column;
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.finance-important-strip strong {
  color: var(--rt-text);
}

.finance-important-strip small {
  margin-top: .3rem;
  color: var(--rt-text-muted);
}

.deposit-summary-card {
  height: 290px;
  padding: 1rem;
}

.deposit-summary-card>div {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .66rem;
}

.deposit-summary-card>div strong {
  color: var(--rt-text);
}

.deposit-summary-card .deposit-receive {
  min-height: 55px;
  margin-top: .2rem;
  border-top: 1px solid var(--rt-border);
}

.deposit-summary-card .deposit-receive strong {
  color: var(--rt-primary);
  font-size: 1.25rem;
}

.deposit-waiting {
  min-height: 70px !important;
  padding: .75rem;
  flex-direction: column;
  justify-content: center !important;
  gap: .45rem;
  border: 1px solid var(--rt-primary);
  border-radius: 7px;
  background: rgba(249, 11, 11, .05);
}

.deposit-waiting strong {
  font-size: .78rem;
}

.deposit-waiting small {
  color: var(--rt-text-muted);
}

.deposit-how-card {
  height: 267px;
  padding: 1rem;
}

.deposit-how-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .42rem;
}

.deposit-how-card li {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--rt-text-muted);
  font-size: .64rem;
}

.deposit-how-card li span {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .11);
  font-size: .57rem;
}

.deposit-recent-card {
  height: 260px;
  padding: .9rem 1rem .7rem;
}

.deposit-recent-card header {
  display: flex;
  justify-content: space-between;
}

.deposit-recent-card header a,
.deposit-recent-card>a {
  color: var(--rt-primary);
  font-size: .65rem;
  text-decoration: none;
}

.deposit-recent-row {
  height: 54px;
  display: grid;
  grid-template-columns: 36px 1fr 64px 72px 65px 10px;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--rt-border);
}

.deposit-recent-row img,
.deposit-recent-row .live-round-icon {
  width: 35px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.deposit-recent-row>span:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.deposit-recent-row strong,
.deposit-recent-row small {
  font-size: .58rem;
}

.deposit-recent-row small {
  color: var(--rt-text-muted);
}

.deposit-recent-row b {
  padding: .2rem .4rem;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .11);
  font-size: .52rem;
  font-weight: 500;
}

.deposit-recent-card>a {
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: end;
  color: #0ea5e9;
}

@media (max-width: 1199.98px) {
  .deposit-page-grid {
    grid-template-columns: 1fr;
  }

  .deposit-primary-column>*,
  .deposit-side-column>* {
    height: auto;
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .deposit-amount-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .deposit-payment-card>div {
    grid-template-columns: 1fr;
    height: auto;
  }

  .deposit-pay-total {
    border-left: 0;
    border-top: 1px dashed var(--rt-border);
    padding: 1rem 0;
  }

  .deposit-setup-card {
    height: auto;
  }

  .deposit-recent-row {
    grid-template-columns: 36px 1fr auto;
  }

  .deposit-recent-row> :nth-child(3),
  .deposit-recent-row> :nth-child(5),
  .deposit-recent-row> :nth-child(6) {
    display: none;
  }
}

.ba-withdraw-page {
  --rt-header-h: 63px;
}

.ba-withdraw-page .page-content {
  padding: 18px 19px 17px 22px;
  gap: 10px;
}

.withdraw-page-heading {
  min-height: 60px;
}

.withdraw-page-heading h1 {
  margin-top: 1px;
  font-size: 1.28rem;
  text-transform: uppercase;
}

.withdraw-page-heading p {
  font-size: .7rem;
}

.withdraw-page-heading .finance-security-card {
  min-height: 55px;
  width: 529px;
  padding-top: .55rem;
  padding-bottom: .55rem;
}

.withdraw-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.365fr) minmax(445px, 1fr);
  gap: 20px;
}

.withdraw-form-card {
  height: 836px;
  padding: 1rem 1.2rem;
}

.withdraw-side-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.withdraw-step {
  padding-bottom: .9rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--rt-border);
}

.withdraw-step:last-child {
  margin: 0;
  padding: 0;
  border: 0;
}

.withdraw-step h2,
.withdraw-side-column h2 {
  margin: 0 0 .8rem;
  font-size: .7rem;
  text-transform: uppercase;
}

.withdraw-wallet-selector {
  width: 100%;
  height: 88px;
  padding: .8rem .9rem;
  display: grid;
  grid-template-columns: 1fr 72px 14px;
  align-items: center;
  gap: .8rem;
  border: 1px solid var(--rt-border);
  border-radius: 7px;
  color: var(--rt-text);
  background: transparent;
  text-align: left;
}

.withdraw-wallet-selector>span {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.withdraw-wallet-selector small {
  color: var(--rt-text-muted);
  font-size: .66rem;
}

.withdraw-wallet-selector strong {
  font-size: 1.25rem;
}

.withdraw-wallet-selector b {
  color: var(--rt-primary);
  font-size: .62rem;
}

.withdraw-wallet-selector img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.withdraw-step label {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .65rem;
}

.withdraw-amount-control {
  position: relative;
}

.withdraw-amount-control input {
  height: 42px;
  padding-right: 60px;
}

.withdraw-amount-control b {
  position: absolute;
  right: 15px;
  top: 12px;
}

.withdraw-amount-grid {
  margin-top: .6rem;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .65rem;
}

.withdraw-amount-grid .ba-stake-chip {
  height: 39px;
  position: relative;
  border-radius: 6px;
}

.withdraw-amount-grid .ba-stake-chip i {
  position: absolute;
  right: -7px;
  top: -10px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--rt-primary);
  font-size: .55rem;
}

.withdraw-step>small {
  display: block;
  margin-top: .55rem;
  color: var(--rt-text-muted);
  font-size: .59rem;
}

.withdraw-step>small b {
  margin: 0 .45rem;
}

.withdraw-step .deposit-method-card {
  height: 60px;
}

.withdraw-step .finance-info-strip {
  min-height: 35px;
  margin-top: .55rem;
  padding: .35rem .7rem;
}

.withdraw-confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.withdraw-confirm-grid>div:first-child {
  padding: .65rem;
  border: 1px solid var(--rt-border);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.withdraw-confirm-grid>div:first-child span {
  display: flex;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .59rem;
}

.withdraw-confirm-grid>div:first-child strong {
  color: var(--rt-primary);
}

.withdraw-confirm-grid>div:first-child span:last-child {
  margin-top: .2rem;
  padding-top: .55rem;
  border-top: 1px solid var(--rt-border);
}

.withdraw-confirm-grid .finance-info-strip {
  margin: 0;
  min-height: 89px;
}

.withdraw-confirm-grid .finance-info-strip span {
  display: flex;
  flex-direction: column;
  color: var(--rt-text-muted);
}

.withdraw-confirm-grid .finance-info-strip strong {
  margin-bottom: .25rem;
  color: var(--rt-text);
}

.withdraw-confirm-step>.btn {
  width: 100%;
  height: 43px;
  margin-top: .65rem;
  position: relative;
  font-size: .72rem;
}

.withdraw-confirm-step>.btn i {
  position: absolute;
  right: 18px;
}

.withdrawal-summary-card {
  height: 270px;
  padding: 1rem;
}

.withdrawal-summary-card>div {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .66rem;
}

.withdrawal-summary-card>div strong {
  color: var(--rt-text);
}

.withdrawal-summary-card .withdraw-receive {
  min-height: 53px;
  margin-top: .25rem;
  border-top: 1px solid var(--rt-border);
}

.withdrawal-summary-card .withdraw-receive strong {
  color: var(--rt-primary);
  font-size: 1.18rem;
}

.withdrawal-summary-card .finance-info-strip {
  min-height: 58px;
  margin-top: .25rem;
  justify-content: flex-start;
}

.pending-withdrawals-card {
  height: 205px;
  padding: 1rem;
}

.pending-withdrawals-card header,
.recent-withdrawals-card header {
  display: flex;
  justify-content: space-between;
}

.pending-withdrawals-card header a,
.recent-withdrawals-card header a,
.recent-withdrawals-card>a {
  color: var(--rt-primary);
  font-size: .65rem;
  text-decoration: none;
}

.pending-withdrawals-card>div {
  height: 135px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}

.pending-withdrawals-card>div i {
  color: var(--rt-text-muted);
  font-size: 2.7rem;
}

.pending-withdrawals-card>div strong {
  font-size: .72rem;
}

.pending-withdrawals-card>div small {
  color: var(--rt-text-muted);
  font-size: .64rem;
}

.recent-withdrawals-card {
  height: 335px;
  padding: 1rem;
}

.recent-withdrawals-card .deposit-recent-row {
  height: 58px;
}

.recent-withdrawals-card>a {
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: end;
  color: #0ea5e9;
}

@media (max-width: 1199.98px) {
  .withdraw-page-grid {
    grid-template-columns: 1fr;
  }

  .withdraw-form-card,
  .withdraw-side-column>* {
    height: auto;
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .withdraw-amount-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .withdraw-confirm-grid {
    grid-template-columns: 1fr;
  }

  .withdraw-form-card {
    height: auto;
  }
}

.ba-transactions-page {
  --rt-sidebar-width: 213px;
  --rt-header-h: 63px;
}

.ba-transactions-page .page-content {
  padding: 19px 18px 17px 24px;
  gap: 13px;
}

.transactions-heading {
  height: 55px;
}

.transactions-heading h1 {
  margin: 0 0 .35rem;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.transactions-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .68rem;
}

.transactions-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.56fr) minmax(320px, 1fr);
  gap: 24px;
}

.transactions-main-column {
  min-width: 0;
}

.transaction-toolbar {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.transaction-tabs {
  display: flex;
}

.transaction-tabs button {
  height: 35px;
  padding: 0 .9rem;
  border: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  background: transparent;
  font-size: .62rem;
}

.transaction-tabs button:first-child {
  border-radius: 6px 0 0 6px;
}

.transaction-tabs button:last-child {
  border-radius: 0 6px 6px 0;
}

.transaction-tabs button.active {
  color: #fff;
  background: #F90B0B;
  border-color: #F90B0B;
}

.transaction-search {
  display: flex;
  gap: .7rem;
}

.transaction-search label {
  position: relative;
}

.transaction-search input {
  width: 203px;
  height: 35px;
  padding-right: 32px;
  font-size: .62rem;
}

.transaction-search label i {
  position: absolute;
  right: 12px;
  top: 11px;
  color: var(--rt-text-muted);
  font-size: .62rem;
}

.transaction-search .btn {
  height: 35px;
  font-size: .62rem;
}

.transactions-table-card {
  height: 757px;
  overflow: hidden;
}

.transactions-table-card .table {
  font-size: .59rem;
}

.transactions-table-card .table> :not(caption)>*>* {
  height: 42px;
  padding: .35rem .55rem;
  border-color: var(--rt-border);
  vertical-align: middle;
  white-space: nowrap;
}

.transactions-table-card thead th {
  height: 44px !important;
  color: var(--rt-text-muted);
  font-weight: 500;
}

.transactions-table-card td:first-child span {
  margin-right: .45rem;
}

.transactions-table-card td:first-child small {
  color: var(--rt-text-muted);
}

.transactions-table-card td:nth-child(2),
.transactions-table-card td:nth-child(3) {
  display: table-cell;
}

.transactions-table-card td:nth-child(3) img {
  width: 30px;
  height: 22px;
  margin-right: .35rem;
  object-fit: contain;
  border-radius: 4px;
}

.transaction-type-icon,
.transaction-method-icon {
  width: 21px;
  height: 21px;
  margin-right: .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: .58rem;
}

.transaction-status {
  padding: .25rem .45rem;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .11);
  font-size: .52rem;
  font-weight: 500;
}

.transactions-table-card td:last-child a {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text-muted);
  text-decoration: none;
}

.transactions-table-card>footer {
  height: 83px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.transactions-table-card>footer nav {
  display: flex;
  gap: .35rem;
  align-items: center;
}

.transactions-table-card>footer a,
.transactions-table-card>footer nav span {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text-muted);
  text-decoration: none;
}

.transactions-table-card>footer a.active {
  color: var(--rt-primary);
  border-color: var(--rt-primary);
}

.transactions-side-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.transactions-side-column h2 {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase;
}

.transaction-summary-panel {
  height: 259px;
  padding: 1rem;
}

.transaction-summary-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rt-border);
}

.transaction-summary-panel header button {
  height: 30px;
  padding: 0 .75rem;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  color: var(--rt-text);
  background: transparent;
  font-size: .56rem;
}

.transaction-summary-panel>div {
  height: 142px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.transaction-summary-panel>div span {
  padding: .85rem .25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-right: 1px solid var(--rt-border);
  border-bottom: 1px solid var(--rt-border);
}

.transaction-summary-panel>div span:nth-child(even) {
  padding-left: .8rem;
  border-right: 0;
}

.transaction-summary-panel small {
  color: var(--rt-text-muted);
  font-size: .61rem;
}

.transaction-summary-panel strong {
  font-size: .95rem;
}

.transaction-summary-panel>a {
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-primary);
  border-radius: 5px;
  color: var(--rt-primary);
  font-size: .66rem;
  text-decoration: none;
}

.transaction-breakdown-panel {
  height: 243px;
  padding: 1rem;
}

.transaction-breakdown-panel>div {
  height: 165px;
  display: grid;
  grid-template-columns: 135px 1fr;
  align-items: center;
  gap: .5rem;
}

.transaction-donut {
  width: 125px;
  height: 125px;
  padding: 20px;
  border-radius: 50%;
  background: conic-gradient(var(--rt-primary) 0 48.4%, var(--rt-danger) 48.4% 79.7%, #8b5cf6 79.7% 92.2%, #2685ff 92.2% 100%);
}

.transaction-donut>span {
  width: 85px;
  height: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rt-card-bg);
}

.transaction-donut strong {
  font-size: 1.25rem;
}

.transaction-donut small {
  color: var(--rt-text-muted);
  font-size: .58rem;
}

.transaction-breakdown-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.transaction-breakdown-panel li {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: .55rem;
  color: var(--rt-text-muted);
  font-size: .59rem;
}

.transaction-breakdown-panel li i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.transaction-breakdown-panel li i.green {
  background: var(--rt-primary)
}

.transaction-breakdown-panel li i.red {
  background: var(--rt-danger)
}

.transaction-breakdown-panel li i.purple {
  background: #8b5cf6
}

.transaction-breakdown-panel li i.blue {
  background: #2685ff
}

.transaction-breakdown-panel li strong {
  color: var(--rt-text);
}

.transaction-breakdown-panel>a,
.transaction-activity-panel>a {
  display: flex;
  justify-content: center;
  color: #0ea5e9;
  font-size: .64rem;
  text-decoration: none;
}

.transaction-activity-panel {
  height: 344px;
  padding: 1rem;
}

.transaction-activity-panel>h2 {
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rt-border);
}

.transaction-activity-panel article {
  height: 55px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: .65rem;
  align-items: center;
  position: relative;
}

.transaction-activity-panel article:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 43px;
  width: 1px;
  height: 24px;
  background: var(--rt-border);
}

.transaction-activity-panel article .live-round-icon {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  background: transparent;
  border: 1px solid currentColor;
}

.transaction-activity-panel article>span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.transaction-activity-panel article strong {
  font-size: .61rem;
}

.transaction-activity-panel article small {
  color: var(--rt-text-muted);
  font-size: .54rem;
}

.transaction-activity-panel>a {
  margin-top: .6rem;
}

@media (max-width: 1199.98px) {
  .ba-transactions-page {
    --rt-sidebar-width: 236px;
    --rt-header-h: 58px;
  }

  .transactions-page-grid {
    grid-template-columns: 1fr;
  }

  .transactions-side-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .transaction-activity-panel {
    grid-column: 1/-1;
  }

  .transactions-table-card {
    height: auto;
    min-height: 700px;
  }
}

@media (max-width: 767.98px) {
  .transaction-toolbar {
    height: auto;
    flex-direction: column;
  }

  .transaction-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .transaction-tabs button {
    white-space: nowrap;
  }

  .transaction-search {
    width: 100%;
  }

  .transaction-search label,
  .transaction-search input {
    width: 100%;
  }

  .transactions-side-column {
    grid-template-columns: 1fr;
  }

  .transactions-table-card>footer {
    align-items: flex-start;
    gap: 1rem;
    flex-direction: column;
  }

  .transactions-table-card .table {
    min-width: 850px;
  }
}

/* Crypto exchange desk: the reference requires a dense three-column trading grid. */
.ba-trading-page {
  --rt-sidebar-width: 209px;
  --rt-header-h: 63px;
}

.ba-trading-page .page-content {
  padding: 1px 14px 8px 12px;
}

.crypto-desk {
  display: grid;
  grid-template-columns: minmax(550px, 2.75fr) minmax(235px, 1fr) minmax(315px, 1.36fr);
  grid-template-rows: 76px 552px 280px;
  gap: 10px;
  min-width: 0;
}

.crypto-desk .card {
  border-radius: 8px;
}

.crypto-desk button {
  color: var(--rt-text-muted);
  background: transparent;
  border: 0;
}

.crypto-market-header {
  grid-column: 1/3;
  grid-row: 1;
  padding: .65rem .9rem;
  display: grid;
  grid-template-columns: 190px 145px repeat(3, 100px) 1fr;
  align-items: center;
  gap: 10px;
}

.crypto-pair-identity {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.crypto-pair-identity img {
  width: 39px;
  height: 39px;
}

.crypto-pair-identity>span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.crypto-pair-identity select {
  width: 125px;
  height: 25px;
  padding: 0 1.6rem 0 0;
  border: 0;
  color: var(--rt-text);
  background-color: transparent;
  font-size: .9rem;
  font-weight: 700;
}

.crypto-pair-identity small,
.crypto-header-stat small {
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.crypto-live-price {
  display: flex;
  flex-direction: column;
  padding-left: .7rem;
  border-left: 1px solid var(--rt-border);
}

.crypto-live-price strong {
  font-size: 1.08rem;
}

.crypto-live-price small {
  font-size: .64rem;
}

.crypto-header-stat {
  height: 40px;
  padding-left: .75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  border-left: 1px solid var(--rt-border);
}

.crypto-header-stat strong {
  font-size: .69rem;
}

.crypto-watch-link {
  justify-self: end;
  color: var(--rt-text-muted);
  font-size: .63rem;
  text-decoration: none;
}

.crypto-chart-card {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  overflow: visible;
}

.crypto-chart-tabs {
  height: 45px;
  padding: 0 .75rem;
  display: flex;
  gap: 1.7rem;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
}

.crypto-chart-tabs button {
  height: 45px;
  position: relative;
  font-size: .68rem;
}

.crypto-chart-tabs button.active {
  color: var(--rt-text);
}

.crypto-chart-tabs button.active:after,
.crypto-order-entry header button.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rt-primary);
}

.crypto-chart-toolbar {
  height: 48px;
  padding-left: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rt-border);
}

.crypto-chart-toolbar>span {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--rt-text-muted);
  font-size: .62rem;
}

.crypto-chart-toolbar button {
  padding: .35rem .45rem;
  font-size: .62rem;
}

.crypto-chart-toolbar button.active {
  color: var(--rt-text);
  background: rgba(255, 255, 255, .05);
  border-radius: 4px;
}

.crypto-chart-toolbar button.active-green {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1);
  border-radius: 4px;
}

.crypto-chart-toolbar>span:last-child {
  padding-right: .85rem;
}

.crypto-drawing-tools {
  position: absolute;
  left: 0;
  top: 93px;
  bottom: 39px;
  z-index: 2;
  width: 51px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-right: 1px solid var(--rt-border);
  background: rgba(4, 14, 21, .92);
  color: var(--rt-text-muted);
  font-size: .76rem;
}

.crypto-chart-meta {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--rt-border);
  background: var(--rt-card-bg);
  color: var(--rt-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.crypto-chart-meta span {
  color: var(--rt-text);
}

.crypto-chart-host {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  /* Toolbar + digit row + header leave ~13.5rem; keep the plot inside the viewport. */
  min-height: 140px;
  height: clamp(140px, calc(100vh - var(--rt-header-h, 63px) - 13.5rem), 300px);
  height: clamp(140px, calc(100dvh - var(--rt-header-h, 63px) - 13.5rem), 300px);
}

.ba-local-crypto-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.crypto-chart-card footer {
  height: 39px;
  padding: 0 .8rem 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  font-size: .58rem;
}

.crypto-chart-card footer b {
  color: #0ea5e9;
}

.crypto-order-entry {
  grid-column: 2;
  grid-row: 2;
  padding: .75rem;
}

.crypto-order-entry>header {
  height: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rt-border);
}

.crypto-order-entry>header button {
  position: relative;
  font-size: .66rem;
}

.crypto-order-entry>header button.active {
  color: var(--rt-primary);
}

.crypto-buy-sell {
  height: 44px;
  margin-top: .7rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.crypto-buy-sell button {
  background: rgba(255, 255, 255, .025);
  font-size: .7rem;
}

.crypto-buy-sell button:first-child {
  border-radius: 5px 0 0 5px;
}

.crypto-buy-sell button:last-child {
  border-radius: 0 5px 5px 0;
}

.crypto-buy-sell button.active {
  color: #fff;
  background: #F90B0B;
}

.crypto-order-types {
  height: 46px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
}

.crypto-order-types button {
  height: 46px;
  position: relative;
  font-size: .6rem;
}

.crypto-order-types button.active {
  color: var(--rt-text);
}

.crypto-order-types button.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rt-primary);
}

.crypto-amount-label {
  margin-top: 1.45rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  font-size: .62rem;
}

.crypto-amount-label>span:first-child {
  display: flex;
  justify-content: space-between;
}

.crypto-amount-label small {
  color: var(--rt-text-muted);
  font-size: .5rem;
}

.crypto-amount-label>span:last-child {
  position: relative;
}

.crypto-amount-label input {
  height: 45px;
  padding-right: 52px;
}

.crypto-amount-label b {
  position: absolute;
  right: 12px;
  top: 14px;
  font-size: .6rem;
}

.crypto-percent-row {
  margin-top: .55rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
}

.crypto-percent-row button {
  height: 30px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .035);
  font-size: .57rem;
}

.crypto-estimate {
  margin: 1.35rem 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.crypto-estimate small {
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.crypto-estimate strong {
  color: var(--rt-primary);
  font-size: 1rem;
}

.crypto-order-entry>.btn {
  width: 100%;
  height: 47px;
  margin-bottom: .55rem;
  border: 0;
  font-size: .7rem;
}

.crypto-order-entry>.btn-danger {
  background: #d5323a;
}

.crypto-order-entry>footer {
  margin-top: .2rem;
  padding-top: .55rem;
  border-top: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  font-size: .56rem;
  line-height: 1.45;
}

.crypto-market-list {
  grid-column: 3;
  grid-row: 1/3;
  height: 446px;
  margin-top: 8px;
  padding: .75rem;
}

.crypto-search {
  position: relative;
}

.crypto-search i {
  position: absolute;
  left: 12px;
  top: 11px;
  color: var(--rt-text-muted);
  font-size: .65rem;
}

.crypto-search input {
  height: 37px;
  padding-left: 33px;
  font-size: .6rem;
}

.crypto-market-filters {
  height: 43px;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.crypto-market-filters button {
  padding: .35rem .65rem;
  border-radius: 4px;
  font-size: .58rem;
  background: rgba(255, 255, 255, .025);
}

.crypto-market-filters button.active-green {
  border: 1px solid var(--rt-primary);
  color: var(--rt-text);
}

.crypto-market-columns {
  display: grid;
  grid-template-columns: 1.45fr .8fr 1fr 15px;
  align-items: center;
  height: 25px;
  color: var(--rt-text-muted);
  font-size: .55rem;
}

.ba-watch-row.active,
.ba-watch-row.table-active {
  background: rgba(249, 11, 11, .06);
}

.ba-watch-row i {
  color: var(--rt-text-muted);
}

.crypto-open-orders {
  grid-column: 1;
  grid-row: 3;
}

.crypto-open-orders header {
  height: 48px;
  padding: 0 .9rem;
  display: flex;
  gap: 1.6rem;
  border-bottom: 1px solid var(--rt-border);
}

.crypto-open-orders header button {
  position: relative;
  font-size: .66rem;
}

.crypto-open-orders header button.active {
  color: var(--rt-text);
}

.crypto-open-orders header button.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rt-primary);
}

.crypto-open-orders header b {
  color: var(--rt-primary);
}

.crypto-open-orders .table {
  font-size: .6rem;
}

.crypto-open-orders .table> :not(caption)>*>* {
  height: 42px;
  padding: .4rem .8rem;
  border-color: var(--rt-border);
  white-space: nowrap;
}

.crypto-open-orders th {
  color: var(--rt-text-muted);
  font-weight: 400;
}

.crypto-recent-trades {
  grid-column: 2;
  grid-row: 3;
  padding: .9rem;
}

.crypto-recent-trades h2,
.crypto-order-book h2 {
  margin: 0 0 1rem;
  font-size: .7rem;
}

.crypto-recent-trades>div {
  height: 31px;
  display: grid;
  grid-template-columns: 1fr 1fr .8fr;
  align-items: center;
  font-size: .58rem;
}

.crypto-recent-trades>div span:last-child {
  text-align: right;
  color: var(--rt-text-muted);
}

.crypto-recent-trades .crypto-trade-head {
  color: var(--rt-text-muted);
  font-size: .53rem;
}

.crypto-order-book {
  grid-column: 3;
  grid-row: 2/4;
  height: 466px;
  margin-top: 378px;
  padding: .8rem;
}

.crypto-order-book header {
  height: 34px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--rt-border);
}

.crypto-order-book header button {
  padding: .35rem .6rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  font-size: .54rem;
}

.crypto-book-head,
.crypto-order-book #baBookSells>div,
.crypto-order-book #baBookBuys>div {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
}

.crypto-book-head {
  height: 34px;
  align-items: end;
  padding-bottom: .45rem;
  color: var(--rt-text-muted);
  font-size: .52rem;
}

.crypto-book-head span:nth-child(n+2),
.crypto-order-book #baBookSells span:nth-child(n+2),
.crypto-order-book #baBookBuys span:nth-child(n+2) {
  text-align: right;
}

.crypto-order-book #baBookSells>div,
.crypto-order-book #baBookBuys>div {
  height: 31px;
  align-items: center;
  margin: 0 !important;
  font-size: .61rem;
}

.crypto-order-book .row-sell span:first-child {
  color: #ff455d;
}

.crypto-order-book .row-buy span:first-child {
  color: var(--rt-primary);
}

.crypto-order-book>strong {
  height: 39px;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
}

.crypto-order-book>strong small {
  margin-left: auto;
  color: var(--rt-text-muted);
  font-size: .5rem;
}

@media (max-width:1199.98px) {
  .crypto-desk {
    grid-template-columns: minmax(0, 1fr) 290px;
    grid-template-rows: auto;
  }

  .crypto-market-header {
    grid-column: 1/3;
    grid-row: auto;
  }

  .crypto-chart-card {
    grid-column: 1;
    grid-row: auto;
  }

  .crypto-order-entry {
    grid-column: 2;
    grid-row: auto;
  }

  .crypto-market-list,
  .crypto-open-orders,
  .crypto-recent-trades,
  .crypto-order-book {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    height: auto;
    margin: 0;
  }

  .crypto-market-list,
  .crypto-order-book {
    min-height: 430px;
  }
}

@media (min-width:768px) {
  .crypto-chart-host > div,
  .crypto-chart-host iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
  }
}

@media (max-width:767.98px) {
  .crypto-desk {
    display: flex;
    flex-direction: column;
  }

  .crypto-market-header {
    min-height: 260px;
    grid-template-columns: 1fr 1fr;
  }

  .crypto-watch-link {
    justify-self: start;
  }

  .crypto-chart-card {
    min-height: 0;
  }

  .crypto-chart-meta {
    padding: 0.35rem 0.5rem !important;
    line-height: 1.35;
  }

  .crypto-chart-host > div,
  .crypto-chart-host iframe {
    margin-left: 0;
    width: 100% !important;
    height: 100% !important;
  }

  .crypto-chart-toolbar>span:last-child {
    display: none;
  }

  .crypto-order-entry {
    min-height: 540px;
  }

  .crypto-market-list,
  .crypto-order-book {
    min-height: 440px;
  }

  .crypto-open-orders .table {
    min-width: 650px;
  }
}

@media (min-width:1200px) {
  .crypto-open-orders {
    width: 621px;
  }

  .crypto-recent-trades {
    grid-column: 1/3;
    width: 319px;
    margin-left: 631px;
  }
}

.crypto-order-entry>.btn-primary {
  color: #fff;
  background: #F90B0B;
}

.crypto-order-entry>.btn-danger {
  color: #fff;
  background: #d5323a;
}

/* Binary terminal: fixed desktop instrument grid with responsive stacking. */
.ba-binary-page {
  --rt-sidebar-width: 200px;
  --rt-header-h: 63px;
}

.ba-binary-page .page-content {
  padding: 0 18px 8px 15px;
}

.binary-desk {
  display: grid;
  grid-template-columns: minmax(710px, 2.32fr) minmax(340px, 1fr);
  grid-template-rows: 64px minmax(400px, auto) 145px;
  gap: 10px;
}

.binary-desk .card {
  border-radius: 8px;
}

.binary-desk button {
  border: 0;
  color: var(--rt-text-muted);
  background: transparent;
}

.binary-market-bar {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: minmax(510px, 1.2fr) minmax(390px, 1fr) 210px 38px;
  align-items: center;
  padding: .55rem .5rem;
}

.binary-market-identity {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.binary-market-identity>span {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1);
  font-size: .65rem;
}

.binary-market-identity select {
  width: 186px;
  height: 32px;
  padding: 0 1.5rem 0 0;
  border: 0;
  color: var(--rt-text);
  background-color: transparent;
  font-size: .76rem;
  font-weight: 600;
}

.binary-market-identity>b {
  padding: .35rem .5rem;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
  font-size: .55rem;
  font-style: normal;
}

.binary-market-identity>b i,
.binary-chart-card header i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--rt-primary);
}

.binary-market-identity>strong {
  font-size: .78rem;
}

.binary-market-identity>em {
  padding: .35rem .6rem;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .08);
  font-size: .6rem;
  font-style: normal;
}

.binary-market-identity>em.negative {
  color: #ff455d;
  background: rgba(255, 69, 93, .08);
}

.binary-timeframes,
.binary-chart-types {
  height: 34px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, .02);
}

.binary-timeframes button {
  flex: 1;
  height: 34px;
  font-size: .58rem;
}

.binary-chart-types button {
  width: 70px;
  height: 34px;
  font-size: .58rem;
}

.binary-timeframes button.active,
.binary-chart-types button.active {
  color: var(--rt-text);
  border: 1px solid var(--rt-primary);
  border-radius: 5px;
  background: rgba(249, 11, 11, .05);
}

.binary-expand {
  width: 34px;
  height: 34px;
  border: 1px solid var(--rt-border) !important;
  border-radius: 5px;
}

.binary-chart-card {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  overflow: visible;
}

#baTradeChartFocus {
  scroll-margin-top: calc(var(--rt-header-h, 63px) + 0.75rem);
}

/* The rail floats over the chart; only the square icon size is beyond Bootstrap. */
@media (min-width: 768px) {
  .binary-chart-tools .ba-chart-tool {
    width: 1.85rem;
    height: 1.85rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

.binary-chart-tools .ba-chart-tool {
  color: var(--rt-text-muted);
}

.binary-chart-tools .ba-chart-tool.active,
.binary-chart-tools .ba-chart-tool.btn-primary {
  color: #fff;
}

.binary-chart-card header {
  height: 37px;
  padding: 0 .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .57rem;
}

.binary-chart-card header span:first-child {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Market, chart type, and timeframe sit on the plot as one row of widgets. */
.ba-chart-widgets {
  width: max-content;
  max-width: calc(100% - 1rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.ba-chart-widgets::-webkit-scrollbar {
  height: 0;
}

.ba-chart-widgets .input-group,
.ba-chart-widgets .btn-group,
.ba-chart-widgets [aria-label="Chart timeframe"] {
  border: 1px solid var(--rt-border);
  border-radius: 999px;
  background: var(--rt-card-bg);
  box-shadow: none;
}

.ba-chart-widgets .btn-group,
.ba-chart-widgets [aria-label="Chart timeframe"] {
  flex-shrink: 0;
  padding: .15rem;
  gap: .15rem;
}

#baBinaryChart .ba-chart-widgets .btn-group > .btn,
#baBinaryChart .ba-chart-widgets .ba-tf {
  border: 0;
  border-radius: 999px;
  font-weight: 600;
}

#baBinaryChart .ba-chart-widgets .btn-outline-secondary {
  background: transparent;
  color: var(--rt-text-muted);
}

#baBinaryChart .ba-chart-widgets .btn-primary {
  background: var(--rt-primary);
  color: #fff;
}

#baBinaryChart .ba-chart-widgets .form-select,
#baBinaryChart .ba-chart-widgets .input-group-text {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 600;
}

#baBinaryChart .ba-chart-widgets #baMktBadge {
  margin: .15rem;
  border-radius: 999px;
  background: var(--rt-primary);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .ba-chart-widgets {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: .35rem;
    overflow: visible !important;
  }

  .ba-chart-widgets .input-group {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .ba-chart-widgets .input-group .form-select {
    min-width: 0;
    width: 100%;
  }

  .ba-chart-widgets .btn-group {
    min-width: 0;
    gap: 0;
    padding: .12rem;
  }

  #baBinaryChart .ba-chart-widgets .btn-group > .btn {
    padding: .35rem .45rem;
    font-size: .7rem;
    white-space: nowrap;
  }

  .ba-chart-widgets [aria-label="Chart timeframe"] {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: .12rem;
    gap: .1rem;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .ba-chart-widgets [aria-label="Chart timeframe"]::-webkit-scrollbar {
    display: none;
  }

  #baBinaryChart .ba-chart-widgets .ba-tf {
    padding: .35rem .45rem;
    font-size: .7rem;
  }
}

.binary-chart-host {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  min-height: 140px;
  height: clamp(140px, calc(100vh - var(--rt-header-h, 63px) - 13.5rem), 300px);
  height: clamp(140px, calc(100dvh - var(--rt-header-h, 63px) - 13.5rem), 300px);
}

#baBinaryChartCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.binary-chart-host svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

@media (min-width: 768px) {
  .binary-chart-host,
  .crypto-chart-host {
    min-height: 180px;
    height: clamp(180px, calc(100vh - var(--rt-header-h, 63px) - 12.5rem), 340px);
    height: clamp(180px, calc(100dvh - var(--rt-header-h, 63px) - 12.5rem), 340px);
  }
}

@media (min-width: 992px) {
  .binary-chart-host,
  .crypto-chart-host {
    min-height: 200px;
    height: clamp(200px, calc(100vh - var(--rt-header-h, 63px) - 11.5rem), 380px);
    height: clamp(200px, calc(100dvh - var(--rt-header-h, 63px) - 11.5rem), 380px);
  }

  /*
   * Binary + forex: nothing sits under the chart on desktop, so grow the plot
   * into the leftover viewport. Crypto keeps the clamp above (markets list below).
   * Flex grows the host box; ba-binary-trade.js redraws to that size (no SVG stretch).
   */
  #baBinaryDesk > .row.g-2 {
    min-height: calc(100vh - var(--rt-header-h, 63px) - 2rem);
    min-height: calc(100dvh - var(--rt-header-h, 63px) - 2rem);
    align-items: stretch;
  }

  #baBinaryDesk > .row.g-2 > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #baBinaryDesk #baTradeChartFocus {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    margin-bottom: 0 !important;
    min-height: 0;
  }

  #baBinaryDesk #baTradeChartFocus > .card-body.border-bottom {
    flex: 0 0 auto;
  }

  #baBinaryDesk #baTradeChartFocus > .position-relative.overflow-hidden {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #baBinaryDesk .binary-chart-host {
    flex: 1 1 auto;
    width: 100%;
    min-height: 320px;
    height: auto;
  }

  #baBinaryDesk #baDigitRow {
    flex-shrink: 0;
  }

  #baBinaryDesk #baTradeTicket {
    flex: 1 1 auto;
    height: 100%;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .binary-chart-host,
  .crypto-chart-host {
    /* Phone/tablet: leave room for the ticket stacked under the chart. */
    min-height: 140px;
    height: clamp(140px, calc(100vh - var(--rt-header-h, 63px) - 18rem), 260px);
    height: clamp(140px, calc(100dvh - var(--rt-header-h, 63px) - 18rem), 260px);
  }
}

.binary-digit-card {
  grid-column: 1;
  grid-row: 3;
  padding: .75rem 1rem;
}

.binary-digit-card h2 {
  margin: 0 0 .65rem;
  font-size: .61rem;
  text-transform: uppercase;
}

.binary-digit-card h2 span {
  color: var(--rt-text-muted);
  font-weight: 400;
}

.binary-digit-card>div {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.binary-digit-card article {
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-right: 1px solid var(--rt-border);
  font-size: .63rem;
}

.binary-digit-card article:last-child {
  border-right: 0;
}

.binary-digit-card article strong {
  font-size: .8rem;
}

.binary-digit-card article>i {
  width: 52px;
  height: 7px;
  border-radius: 4px;
  background: #26343e;
  overflow: hidden;
}

.binary-digit-card article .fill {
  height: 100%;
  display: block;
  border-radius: 4px;
  background: #35434e;
}

.binary-digit-card .tone-green {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .045);
}

.binary-digit-card .tone-green .fill {
  background: var(--rt-primary);
}

.binary-digit-card .tone-amber strong,
.binary-digit-card .tone-amber .ba-digit-pct {
  color: #ffad2f;
}

.binary-digit-card .tone-amber .fill {
  background: #ffad2f;
}

.binary-digit-card .tone-red strong,
.binary-digit-card .tone-red .ba-digit-pct {
  color: #ff455d;
}

.binary-digit-card .tone-red .fill {
  background: #ff455d;
}

.binary-positions-card {
  grid-column: 1;
  grid-row: 4;
  position: relative;
  overflow: hidden;
}

.binary-positions-card>header {
  height: 49px;
  padding: 0 .75rem;
  display: flex;
  gap: .7rem;
  border-bottom: 1px solid var(--rt-border);
}

.binary-positions-card>header button {
  min-width: 105px;
  position: relative;
  font-size: .6rem;
}

.binary-positions-card>header button.active {
  color: var(--rt-primary);
}

.binary-positions-card>header button.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rt-primary);
}

.binary-positions-card .table {
  font-size: .55rem;
}

.binary-positions-card .table> :not(caption)>*>* {
  height: 41px;
  padding: .4rem .65rem;
  border-color: var(--rt-border);
  white-space: nowrap;
}

.binary-positions-card th {
  color: var(--rt-text-muted);
  font-weight: 400;
}

.binary-empty {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  color: var(--rt-text-muted);
}

.binary-empty i {
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-border);
  border-radius: 50%;
}

.binary-empty strong {
  color: var(--rt-text);
  font-size: .65rem;
}

.binary-empty small {
  font-size: .58rem;
}

.binary-trade-panel {
  grid-column: 2;
  grid-row: 2/4;
  height: auto;
  padding: .7rem;
}

.binary-contract-tabs {
  height: 39px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .2rem;
}

.binary-contract-tabs button {
  border-radius: 5px;
  font-size: .58rem;
}

.binary-contract-tabs button.active {
  color: var(--rt-primary);
  background: #FFF0F0;
}

.binary-trade-panel>header {
  height: 41px;
  margin: .5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  padding: 0 .75rem;
  text-transform: uppercase;
}

.binary-trade-panel>header strong {
  font-size: .7rem;
}

.binary-trade-panel>header span {
  color: #ffad2f;
  font-size: .55rem;
}

.binary-predictions {
  height: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: .8rem;
}

.binary-predictions button {
  border: 1px solid var(--rt-border);
  font-size: .62rem;
}

.binary-predictions button:first-child {
  border-radius: 5px 0 0 5px;
}

.binary-predictions button:last-child {
  border-radius: 0 5px 5px 0;
}

.binary-predictions button.active {
  color: var(--rt-text);
  border-color: var(--rt-primary);
  border-bottom-width: 2px;
}

.binary-trade-panel>label {
  margin: .1rem 0 .45rem;
  display: block;
  color: var(--rt-text-muted);
  font-size: .55rem;
  text-transform: uppercase;
}

.binary-stake-chips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .4rem;
  margin-bottom: .55rem;
}

.binary-stake-chips button {
  height: 35px;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  font-size: .6rem;
}

.binary-stake-chips button.active {
  color: #fff;
  background: var(--rt-primary);
  border-color: var(--rt-primary);
  font-weight: 700;
}

.binary-stepper {
  height: 41px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  margin-bottom: .65rem;
  border: 1px solid var(--rt-border);
  border-radius: 6px;
}

.binary-stepper input {
  min-width: 0;
  border: 0;
  color: var(--rt-text);
  background: transparent;
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
}

.binary-payout {
  height: 41px;
  margin-bottom: .65rem;
  padding: 0 .65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rt-border);
  border-radius: 6px;
  font-size: .6rem;
}

.binary-payout strong {
  color: var(--rt-primary);
  font-size: .72rem;
}

.binary-risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
  margin: .8rem 0;
}

.binary-risk-grid>span {
  height: 60px;
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border: 1px solid var(--rt-border);
  border-radius: 6px;
}

.binary-risk-grid small {
  font-size: .52rem;
}

.binary-risk-grid strong {
  font-size: .65rem;
}

.binary-risk-grid .green {
  color: var(--rt-primary);
}

.binary-risk-grid .red {
  color: #ff455d;
}

.binary-risk-grid .amber {
  color: #ffad2f;
}

.binary-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.binary-action-row button {
  height: 69px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: 6px;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.binary-action-row button:first-child {
  background: #F90B0B;
}

.binary-action-row button:last-child {
  background: #ef3340;
}

.binary-action-row small {
  font-size: .54rem;
  font-weight: 400;
}

.binary-account-card {
  grid-column: 2;
  grid-row: 3/5;
  height: 239px;
  margin-top: 136px;
  padding: .8rem;
}

.binary-account-card h2 {
  margin: 0 -.8rem .25rem;
  padding: 0 .8rem .75rem;
  border-bottom: 1px solid var(--rt-border);
  font-size: .68rem;
  text-transform: uppercase;
}

.binary-account-card div {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rt-border);
  font-size: .61rem;
}

.binary-account-card div:last-child {
  border-bottom: 0;
}

@media(max-width:1199.98px) {
  .binary-desk {
    grid-template-columns: 1fr;
    grid-template-rows: auto
  }

  .binary-market-bar,
  .binary-chart-card,
  .binary-digit-card,
  .binary-positions-card,
  .binary-trade-panel,
  .binary-account-card {
    grid-column: 1;
    grid-row: auto;
    width: auto;
    height: auto;
    margin: 0
  }

  .binary-market-bar {
    min-height: 150px;
    grid-template-columns: 1fr 1fr
  }

  .binary-chart-card {
    min-height: 0
  }

  .binary-trade-panel {
    min-height: 0
  }

  .binary-account-card {
    min-height: 239px
  }
}

@media(max-width:767.98px) {
  .binary-market-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .7rem
  }

  .binary-market-identity {
    flex-wrap: wrap
  }

  .binary-timeframes {
    overflow-x: auto
  }

  .binary-timeframes button {
    min-width: 44px
  }

  .binary-chart-types {
    justify-content: center
  }

  .binary-expand {
    display: none
  }

  .binary-digit-card {
    overflow-x: auto
  }

  .binary-digit-card>div {
    min-width: 650px
  }

  .binary-positions-card {
    min-height: 230px
  }

  .binary-positions-card .table {
    min-width: 850px
  }

  .binary-stake-chips {
    grid-template-columns: repeat(3, 1fr)
  }

  .binary-chart-card {
    min-height: 0
  }

  .binary-chart-tools {
    max-width: 100%
  }

}

#baDigitRow {
  background: var(--rt-card-bg);
}

#baDigitRow .ba-digit-title {
  color: var(--rt-heading);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}

#baDigitRow .ba-digit-window {
  color: var(--rt-text-muted);
  font-size: .62rem;
  line-height: 1.2;
}

#baDigitCircles {
  gap: .2rem;
}

#baDigitCircles .ba-digit {
  min-width: 0;
  gap: .2rem;
}

#baDigitCircles .ba-digit-mark {
  width: 100%;
  max-width: 2rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rt-border);
  border-radius: .55rem;
  background: var(--rt-card-bg);
  color: var(--rt-heading);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

#baDigitCircles .ba-digit-pct {
  color: var(--rt-text-muted);
  font-size: .58rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

#baDigitCircles .ba-digit-meter {
  width: min(100%, 1.5rem);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--rt-border);
}

#baDigitCircles .ba-digit-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rt-primary, #F90B0B);
  transition: width .3s ease;
}

#baDigitCircles .ba-digit[data-state="cur"] .ba-digit-mark {
  border-color: var(--rt-danger);
  background: var(--rt-danger);
  color: #fff;
  box-shadow: 0 0 0 2px var(--rt-danger-light);
  transform: translateY(-1px);
}

#baDigitCircles .ba-digit[data-pct="max"] .ba-digit-pct {
  color: var(--rt-success);
}

#baDigitCircles .ba-digit[data-pct="min"] .ba-digit-pct {
  color: var(--rt-danger);
}

#baDigitCircles .ba-digit-meter-fill[data-pct="max"] {
  background: var(--rt-success);
}

#baDigitCircles .ba-digit-meter-fill[data-pct="min"] {
  background: var(--rt-danger);
}

#notificationList .ba-notif-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 1.15rem;
}

#notificationList .ba-notif-row.is-unread {
  background: rgba(249, 11, 11, .07);
}

.ba-referral-link {
  border: 1px solid var(--rt-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--rt-card-bg);
}

.ba-referral-link > .form-control,
.ba-referral-link > .input-group-text,
.ba-referral-link > .btn {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ba-referral-link > .btn {
  margin: .25rem;
  border-radius: 999px;
  background: #F90B0B;
  color: #fff;
}

/* Bot marketplace and shared bot identity system. */
.ba-bot-page {
  --rt-sidebar-width: 219px;
  --rt-header-h: 63px;
}

.ba-bot-page .page-content {
  padding: 16px 18px 10px 27px;
}

.ba-bot-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 56px;
  min-height: 56px;
  margin: 0 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .65rem 1.25rem;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .62rem;
}

.bot-market-grid {
  display: grid;
  grid-template-columns: minmax(730px, 1fr) 310px;
  gap: 20px;
}

.bot-market-main,
.bot-market-side {
  min-width: 0;
}

.bot-page-heading {
  height: 58px;
}

.bot-page-heading h1 {
  margin: 0 0 .3rem;
  font-size: 1.18rem;
  text-transform: uppercase;
}

.bot-page-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .68rem;
}

.bot-benefits {
  height: 62px;
  padding: .65rem 1.1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.bot-benefits article {
  display: flex;
  align-items: center;
  gap: .8rem;
  border-right: 1px solid var(--rt-border);
}

.bot-benefits article:last-child {
  border-right: 0;
}

.bot-benefits article>i {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1);
}

.bot-benefits span {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.bot-benefits strong {
  font-size: .6rem;
}

.bot-benefits small {
  color: var(--rt-text-muted);
  font-size: .55rem;
}

.bot-market-toolbar {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bot-category-tabs {
  display: flex;
  overflow-x: auto;
}

.bot-category-tabs button,
.bot-sort {
  height: 36px;
  padding: 0 1rem;
  border: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  background: transparent;
  font-size: .58rem;
  white-space: nowrap;
}

.bot-category-tabs button:first-child {
  border-radius: 5px 0 0 5px;
}

.bot-category-tabs button:last-child {
  border-radius: 0 5px 5px 0;
}

.bot-category-tabs button.active {
  color: #fff;
  background: #F90B0B;
  border-color: #F90B0B;
}

.bot-sort {
  min-width: 153px;
  border-radius: 5px;
}

.bot-sort b {
  color: var(--rt-text);
}

.bot-sort i {
  margin-left: 1.7rem;
}

.bot-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.bot-market-card {
  height: 277px;
  padding: .9rem;
  position: relative;
  overflow: hidden;
}

.bot-popular {
  position: absolute;
  left: -26px;
  top: 11px;
  width: 105px;
  padding: .2rem 0;
  transform: rotate(-31deg);
  color: #fff;
  background: #F90B0B;
  text-align: center;
  text-transform: uppercase;
  font-size: .47rem;
}

.bot-market-card header {
  height: 105px;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: .75rem;
  border-bottom: 1px solid var(--rt-border);
}

.bot-market-card header img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.bot-market-card header h2 {
  margin: .15rem 0 .35rem;
  font-size: .78rem;
  text-transform: uppercase;
}

.bot-market-card header b {
  display: inline-flex;
  padding: .2rem .45rem;
  border-radius: 4px;
  font-size: .52rem;
  font-weight: 500;
}

.bot-market-card .tone-green {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
}

.bot-market-card .tone-blue {
  color: #2d9cff;
  background: rgba(45, 156, 255, .12);
}

.bot-market-card .tone-purple {
  color: #b96ee8;
  background: rgba(185, 110, 232, .12);
}

.bot-market-card .tone-amber {
  color: #f5ad22;
  background: rgba(245, 173, 34, .12);
}

.bot-market-card .tone-cyan {
  color: #F90B0B;
  background: rgba(8, 213, 199, .12);
}

.bot-market-card .tone-pink {
  color: #ff68a8;
  background: rgba(255, 104, 168, .12);
}

.bot-market-card header p {
  margin: .45rem 0 0;
  color: var(--rt-text-muted);
  font-size: .55rem;
  line-height: 1.45;
}

.bot-card-metrics {
  height: 58px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.bot-card-metrics span {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  border-right: 1px solid var(--rt-border);
}

.bot-card-metrics span:nth-child(n+2) {
  padding-left: .65rem;
}

.bot-card-metrics span:last-child {
  border-right: 0;
}

.bot-card-metrics small {
  color: var(--rt-text-muted);
  font-size: .5rem;
}

.bot-card-metrics strong {
  color: var(--rt-primary);
  font-size: .77rem;
}

.bot-card-metrics .risk-high {
  color: #ff455d;
}

.bot-card-metrics .risk-medium {
  color: #ffc107;
}

.bot-traits {
  height: 38px;
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow: hidden;
}

.bot-traits b {
  padding: .25rem .45rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text-muted);
  background: rgba(255, 255, 255, .025);
  font-size: .47rem;
  font-weight: 400;
  white-space: nowrap;
}

.bot-market-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bot-market-card footer>span {
  display: flex;
  flex-direction: column;
}

.bot-market-card footer strong {
  font-size: .9rem;
}

.bot-market-card footer small {
  color: var(--rt-text-muted);
  font-size: .52rem;
}

.bot-market-card footer a {
  height: 38px;
  padding: 0 .9rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  border-radius: 5px;
  color: #fff;
  background: #F90B0B;
  font-size: .58rem;
  text-decoration: none;
}

.bot-guarantee {
  height: 88px;
  margin-top: 12px;
  padding: 1rem;
  display: grid;
  grid-template-columns: 47px 1fr auto;
  align-items: center;
  gap: .8rem;
}

.bot-guarantee>i {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rt-text-muted);
  background: rgba(255, 255, 255, .04);
  font-size: 1.2rem;
}

.bot-guarantee span {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.bot-guarantee strong {
  font-size: .68rem;
}

.bot-guarantee small,
.bot-guarantee a {
  color: var(--rt-text-muted);
  font-size: .58rem;
}

.bot-guarantee a {
  text-decoration: none;
}

.bot-market-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bot-filter-card {
  height: 451px;
  padding: 1rem;
}

.bot-market-side h2 {
  margin: 0 0 .55rem;
  font-size: .72rem;
  text-transform: uppercase;
}

.bot-filter-card p {
  margin: 0 0 .7rem;
  color: var(--rt-text-muted);
  font-size: .61rem;
  line-height: 1.5;
}

.bot-filter-card label {
  margin-bottom: .45rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  color: var(--rt-text-muted);
  font-size: .55rem;
}

.bot-filter-card .form-select,
.bot-filter-card .form-control {
  height: 32px;
  font-size: .58rem;
}

.bot-filter-card .btn {
  height: 36px;
  margin-top: .35rem;
  font-size: .6rem;
}

.bot-reset {
  width: 100%;
  height: 30px;
  margin-top: .35rem;
  color: var(--rt-text-muted);
  background: transparent;
  border: 0;
  font-size: .55rem;
}

.bot-why-card {
  height: 278px;
  padding: 1rem;
}

.bot-why-card article {
  min-height: 54px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: .7rem;
  align-items: start;
}

.bot-why-card article>i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-text-muted);
  border-radius: 50%;
  font-size: .57rem;
}

.bot-why-card article span {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.bot-why-card strong {
  font-size: .62rem;
}

.bot-why-card small {
  color: var(--rt-text-muted);
  font-size: .56rem;
  line-height: 1.3;
}

.bot-help-card {
  height: 126px;
  padding: 1rem;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-content: start;
  gap: .75rem;
}

.bot-help-card>i {
  color: var(--rt-primary);
  font-size: 1.35rem;
}

.bot-help-card span {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.bot-help-card strong {
  font-size: .64rem;
}

.bot-help-card small {
  color: var(--rt-text-muted);
  font-size: .56rem;
  line-height: 1.4;
}

.bot-help-card a {
  grid-column: 1/3;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(249, 11, 11, .45);
  border-radius: 4px;
  color: var(--rt-primary);
  font-size: .58rem;
  text-decoration: none;
}

@media(max-width:1199.98px) {
  .bot-market-grid {
    grid-template-columns: 1fr
  }

  .bot-market-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .bot-help-card {
    height: auto
  }

  .bot-card-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:767.98px) {

  .bot-card-grid,
  .bot-market-side,
  .bot-benefits {
    grid-template-columns: 1fr
  }

  .bot-benefits {
    height: auto
  }

  .bot-benefits article {
    min-height: 55px;
    border-right: 0;
    border-bottom: 1px solid var(--rt-border)
  }

  .bot-market-toolbar {
    height: auto;
    padding: 1rem 0;
    flex-direction: column;
    align-items: stretch
  }

  .bot-category-tabs {
    width: 100%
  }

  .bot-sort {
    align-self: flex-end
  }

  .bot-market-card {
    height: auto;
    min-height: 277px
  }

  .bot-guarantee {
    height: auto;
    grid-template-columns: 47px 1fr
  }

  .bot-guarantee a {
    grid-column: 1/3
  }

  .bot-filter-card,
  .bot-why-card {
    height: auto;
    min-height: 300px
  }
}

.ba-bot-details-page .page-content {
  padding: 10px 24px 12px;
}

.bot-details-grid {
  display: grid;
  grid-template-columns: minmax(700px, 1fr) 382px;
  gap: 24px;
}

.bot-details-grid>*,
.my-bots-grid>* {
  min-width: 0;
}

.bot-breadcrumb {
  height: 34px;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--rt-text-muted);
  font-size: .62rem;
}

.bot-breadcrumb a {
  color: var(--rt-text-muted);
  text-decoration: none;
}

.bot-detail-hero {
  height: 213px;
  padding: 1.1rem;
  position: relative;
  overflow: hidden;
}

.bot-detail-hero>header {
  height: 113px;
  display: grid;
  grid-template-columns: 102px 1fr 150px;
  gap: 1rem;
  border-bottom: 1px solid var(--rt-border);
}

.bot-detail-hero header img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.bot-detail-hero header>div>span {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.bot-detail-hero h1 {
  margin: 0;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.bot-detail-hero header>div>span b {
  padding: .25rem .5rem;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1);
  font-size: .56rem;
}

.bot-detail-hero header p {
  margin: .75rem 0 .45rem;
  color: var(--rt-text-muted);
  font-size: .65rem;
}

.bot-detail-hero header aside {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: start;
  gap: .4rem;
}

.bot-detail-hero header aside strong {
  font-size: .8rem;
}

.bot-detail-hero header aside span {
  color: #ffbf00;
  letter-spacing: .1rem;
}

.bot-detail-hero header aside small {
  width: 100%;
  color: var(--rt-text-muted);
  font-size: .52rem;
  text-align: right;
}

.bot-detail-metrics {
  height: 72px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}

.bot-detail-metrics span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  border-right: 1px solid var(--rt-border);
}

.bot-detail-metrics span:last-child {
  border-right: 0;
}

.bot-detail-metrics small {
  color: var(--rt-text-muted);
  font-size: .56rem;
}

.bot-detail-metrics strong {
  font-size: .86rem;
}

.bot-detail-metrics .green {
  color: var(--rt-primary);
}

.bot-detail-metrics .amber {
  color: #ffc107;
}

.bot-detail-metrics .white {
  color: var(--rt-text);
}

.bot-detail-overview {
  height: 443px;
  margin-top: 14px;
}

.bot-detail-overview>nav {
  height: 49px;
  display: flex;
  border-bottom: 1px solid var(--rt-border);
}

.bot-detail-overview>nav button {
  flex: 1;
  position: relative;
  border: 0;
  color: var(--rt-text-muted);
  background: transparent;
  font-size: .58rem;
  text-transform: uppercase;
}

.bot-detail-overview>nav button.active {
  color: var(--rt-primary);
}

.bot-detail-overview>nav button.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rt-primary);
}

.bot-overview-body {
  height: 285px;
  padding: 1.2rem;
  display: grid;
  grid-template-columns: .95fr 1.25fr;
  gap: 20px;
}

.bot-overview-body>article:first-child {
  padding-right: 1rem;
  border-right: 1px solid var(--rt-border);
}

.bot-overview-body h2,
.bot-compat-row h2 {
  margin: 0 0 .85rem;
  font-size: .64rem;
  text-transform: uppercase;
}

.bot-overview-body p,
.bot-overview-body li {
  color: var(--rt-text-muted);
  font-size: .58rem;
  line-height: 1.75;
}

.bot-overview-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bot-overview-body li:before {
  content: "✓";
  margin-right: .65rem;
  color: var(--rt-primary);
  font-weight: 700;
}

.bot-performance header {
  display: flex;
  justify-content: space-between;
}

.bot-performance header button {
  height: 30px;
  padding: 0 .7rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .52rem;
}

.bot-performance svg {
  width: 100%;
  height: 205px;
}

.bot-performance footer {
  display: flex;
  justify-content: space-around;
  color: var(--rt-text-muted);
  font-size: .5rem;
}

.bot-feature-row {
  height: 108px;
  padding: .75rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  border-top: 1px solid var(--rt-border);
}

.bot-feature-row article {
  padding: .55rem;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: .55rem;
  align-items: start;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
}

.bot-feature-row i {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(249, 11, 11, .4);
  border-radius: 50%;
  color: var(--rt-primary);
}

.bot-feature-row span {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.bot-feature-row strong {
  font-size: .56rem;
}

.bot-feature-row small {
  color: var(--rt-text-muted);
  font-size: .47rem;
  line-height: 1.4;
}

.bot-compat-row {
  height: 121px;
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
}

.bot-compat-row section {
  padding: 1rem;
}

.bot-compat-row section>div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.bot-compat-row span {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.bot-compat-row i {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .08);
}

.bot-compat-row b {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .57rem;
}

.bot-compat-row small {
  color: var(--rt-text-muted);
  font-size: .48rem;
  font-weight: 400;
}

.bot-details-side {
  padding-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bot-purchase-card {
  height: 426px;
  padding: 1.2rem;
}

.bot-details-side h2 {
  margin: 0 0 1rem;
  font-size: .72rem;
  text-transform: uppercase;
}

.bot-purchase-card>small {
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.bot-purchase-card>strong {
  display: block;
  margin: .55rem 0 1rem;
  font-size: 1.45rem;
}

.bot-purchase-card ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.bot-purchase-card li {
  margin: .55rem 0;
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.bot-purchase-card li:before {
  content: "✓";
  margin-right: .65rem;
  color: var(--rt-primary);
}

.bot-purchase-card>button {
  width: 100%;
  height: 42px;
  margin-bottom: .7rem;
  font-size: .68rem;
}

.bot-wishlist {
  border: 1px solid var(--rt-primary) !important;
  border-radius: 5px !important;
  color: var(--rt-primary) !important;
  background: transparent !important;
}

.bot-purchase-card>div {
  min-height: 75px;
  padding: .7rem;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: .65rem;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
}

.bot-purchase-card>div>i {
  color: var(--rt-primary);
  font-size: 1.6rem;
}

.bot-purchase-card>div span {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.bot-purchase-card>div b {
  font-size: .62rem;
}

.bot-purchase-card>div small {
  color: var(--rt-text-muted);
  font-size: .56rem;
  line-height: 1.4;
}

.bot-results-card {
  height: 169px;
  padding: 1rem 1.2rem;
}

.bot-results-card h2 {
  margin-bottom: .4rem;
}

.bot-results-card div {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rt-border);
  font-size: .6rem;
}

.bot-results-card strong {
  color: var(--rt-primary);
  font-size: .72rem;
}

.bot-reviews-card {
  height: 210px;
  padding: 1rem 1.2rem;
}

.bot-reviews-card>header {
  display: flex;
  justify-content: space-between;
}

.bot-reviews-card header a {
  color: var(--rt-primary);
  font-size: .55rem;
  text-decoration: none;
}

.bot-reviews-card article {
  min-height: 75px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: .65rem;
  border-bottom: 1px solid var(--rt-border);
}

.bot-reviews-card article>span {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
}

.bot-reviews-card .purple {
  background: #743bc2;
}

.bot-reviews-card .amber {
  background: #ed7a14;
}

.bot-reviews-card article strong {
  font-size: .58rem;
}

.bot-reviews-card article strong b {
  margin-left: .5rem;
  color: #ffbf00;
  letter-spacing: .08rem;
}

.bot-reviews-card article p {
  margin: .35rem 0;
  color: var(--rt-text-muted);
  font-size: .54rem;
}

.bot-reviews-card article small {
  display: block;
  color: var(--rt-text-muted);
  font-size: .48rem;
  text-align: right;
}

.ba-my-bots-page .page-content {
  padding: 16px 18px 12px 24px;
}

.my-bots-grid {
  display: grid;
  grid-template-columns: minmax(700px, 1fr) 354px;
  gap: 31px;
}

.my-bot-toolbar {
  height: 50px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.my-bot-toolbar>div {
  display: flex;
}

.my-bot-toolbar button {
  height: 36px;
  padding: 0 1rem;
  border: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  background: transparent;
  font-size: .58rem;
}

.my-bot-toolbar>div button.active {
  color: #fff;
  background: #F90B0B;
}

.my-bot-toolbar label {
  width: 234px;
  margin-left: auto;
  position: relative;
}

.my-bot-toolbar input {
  height: 36px;
  padding-right: 30px;
  font-size: .58rem;
}

.my-bot-toolbar label i {
  position: absolute;
  right: 12px;
  top: 11px;
  color: var(--rt-text-muted);
  font-size: .6rem;
}

.my-bot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-bot-card {
  height: 161px;
  padding: 1rem;
  display: grid;
  grid-template-columns: 75px 235px 1fr 170px;
  gap: .8rem;
  position: relative;
}

.my-bot-card>img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.my-bot-identity {
  display: flex;
  flex-direction: column;
  gap: .42rem;
  border-right: 1px solid var(--rt-border);
}

.my-bot-identity>span {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.my-bot-identity h2 {
  margin: 0;
  font-size: .82rem;
  text-transform: uppercase;
}

.my-bot-identity>span b {
  padding: .25rem .5rem;
  border-radius: 4px;
  font-size: .52rem;
  font-weight: 500;
}

.status-active {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1);
}

.status-paused {
  color: #ffc107;
  background: rgba(255, 193, 7, .1);
}

.status-stopped {
  color: #ff455d;
  background: rgba(255, 69, 93, .1);
}

.my-bot-identity p {
  margin: 0 0 .65rem;
  font-size: .59rem;
}

.my-bot-identity small {
  color: var(--rt-text-muted);
  font-size: .54rem;
}

.my-bot-identity small b {
  color: var(--rt-primary);
}

.my-bot-stats {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.my-bot-stats>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
}

.my-bot-stats>div:last-child {
  border-bottom: 0;
}

.my-bot-stats span {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.my-bot-stats small {
  color: var(--rt-text-muted);
  font-size: .51rem;
}

.my-bot-stats strong {
  color: var(--rt-primary);
  font-size: .75rem;
}

.my-bot-stats .white {
  color: var(--rt-text);
}

.my-bot-stats b {
  font-size: .55rem;
  font-weight: 400;
}

.status-text-active {
  color: var(--rt-text);
}

.status-text-paused {
  color: #ffc107;
}

.status-text-stopped {
  color: var(--rt-text-muted);
}

.my-bot-actions {
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.my-bot-actions button,
.my-bot-actions a {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  color: var(--rt-text);
  background: transparent;
  font-size: .6rem;
  text-decoration: none;
}

.my-bot-actions .primary {
  color: #fff;
  background: #F90B0B;
  border-color: #F90B0B;
}

.my-bot-more {
  position: absolute;
  right: 12px;
  top: 28px;
  color: var(--rt-text-muted);
}

.bot-explore {
  height: 84px;
  margin-top: 10px;
  padding: .8rem 1rem;
  display: grid;
  grid-template-columns: 50px 1fr 205px;
  align-items: center;
  gap: .8rem;
}

.bot-explore img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.bot-explore span {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.bot-explore strong {
  font-size: .75rem;
}

.bot-explore small {
  color: var(--rt-text-muted);
  font-size: .56rem;
}

.bot-explore a {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 5px;
  color: #fff;
  background: #F90B0B;
  font-size: .62rem;
  text-decoration: none;
}

.my-bots-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-bots-side>.card {
  padding: 1rem;
}

.my-bots-side h2 {
  margin: 0 0 .85rem;
  font-size: .72rem;
  text-transform: uppercase;
}

.my-bots-side .bot-help-card {
  height: 109px;
  padding: .75rem 1rem;
}

.my-bots-side .bot-help-card a {
  height: 30px;
}

.bots-overview {
  height: 214px;
}

.bots-overview>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}

.bots-overview span {
  height: 71px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
}

.bots-overview small {
  color: var(--rt-text-muted);
  font-size: .56rem;
}

.bots-overview strong {
  font-size: 1.25rem;
}

.bots-performance {
  height: 320px;
  position: relative;
}

.bots-performance>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.bots-performance>div span {
  min-height: 59px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border-right: 1px solid var(--rt-border);
}

.bots-performance>div span:nth-child(even) {
  padding-left: 1rem;
  border-right: 0;
}

.bots-performance small {
  color: var(--rt-text-muted);
  font-size: .56rem;
}

.bots-performance strong {
  color: var(--rt-primary);
  font-size: .82rem;
}

.bots-performance b {
  font-size: .72rem;
}

.bots-performance svg {
  width: 100%;
  height: 115px;
}

.bots-performance button {
  position: absolute;
  left: 1rem;
  bottom: .6rem;
  height: 29px;
  padding: 0 .7rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text-muted);
  background: transparent;
  font-size: .52rem;
}

.bots-subscription {
  height: 195px;
}

.bots-subscription>div {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
}

.subscription-donut {
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 9px solid var(--rt-primary);
  border-right-color: #e7a319;
  border-bottom-color: #ef3e43;
  border-radius: 50%;
}

.subscription-donut b {
  font-size: 1.05rem;
}

.subscription-donut small {
  color: var(--rt-text-muted);
  font-size: .5rem;
}

.bots-subscription ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bots-subscription li {
  height: 30px;
  display: grid;
  grid-template-columns: 12px 1fr 15px;
  align-items: center;
  color: var(--rt-text-muted);
  font-size: .55rem;
}

.bots-subscription li i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.bots-subscription .green {
  background: var(--rt-primary);
}

.bots-subscription .amber {
  background: #e7a319;
}

.bots-subscription .red {
  background: #ef3e43;
}

.bots-subscription a {
  height: 36px;
  margin-top: .45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  font-size: .56rem;
  text-decoration: none;
}

@media(max-width:1199.98px) {

  .bot-details-grid,
  .my-bots-grid {
    grid-template-columns: 1fr
  }

  .bot-details-side,
  .my-bots-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 0
  }

  .my-bot-card {
    grid-template-columns: 75px 210px 1fr 160px
  }

  .bot-reviews-card,
  .bot-help-card {
    height: auto
  }
}

@media(max-width:767.98px) {
  .bot-detail-hero {
    height: auto
  }

  .bot-detail-hero>header {
    height: auto;
    grid-template-columns: 80px minmax(0, 1fr)
  }

  .bot-detail-hero header img {
    width: 72px;
    height: 72px
  }

  .bot-detail-hero header>div {
    min-width: 0
  }

  .bot-detail-hero header>div>span {
    flex-wrap: wrap
  }

  .bot-detail-hero header p {
    overflow-wrap: anywhere
  }

  .bot-detail-hero header aside {
    grid-column: 1/3;
    margin: .5rem 0;
    justify-content: flex-start
  }

  .bot-detail-hero header aside small {
    text-align: left
  }

  .bot-detail-metrics {
    height: auto;
    grid-template-columns: 1fr 1fr
  }

  .bot-detail-metrics span {
    min-height: 65px
  }

  .bot-detail-overview {
    height: auto
  }

  .bot-detail-overview>nav {
    overflow-x: auto
  }

  .bot-detail-overview>nav button {
    min-width: 105px
  }

  .bot-overview-body {
    height: auto;
    grid-template-columns: 1fr
  }

  .bot-overview-body>article:first-child {
    border-right: 0
  }

  .bot-feature-row,
  .bot-compat-row,
  .bot-details-side,
  .my-bots-side {
    height: auto;
    grid-template-columns: 1fr
  }

  .bot-feature-row article {
    min-height: 80px
  }

  .bot-compat-row section {
    min-height: 120px
  }

  .my-bot-toolbar {
    height: auto;
    flex-wrap: wrap;
    margin-bottom: 1rem
  }

  .my-bot-toolbar>div {
    width: 100%;
    overflow-x: auto
  }

  .my-bot-toolbar>div button {
    white-space: nowrap
  }

  .my-bot-toolbar label {
    width: 100%;
    margin-left: 0
  }

  .my-bot-card {
    height: auto;
    grid-template-columns: 70px 1fr
  }

  .my-bot-identity {
    border-right: 0
  }

  .my-bot-stats,
  .my-bot-actions {
    grid-column: 1/3
  }

  .my-bot-stats {
    min-height: 130px
  }

  .bot-explore {
    height: auto;
    grid-template-columns: 50px 1fr
  }

  .bot-explore a {
    grid-column: 1/3
  }
}

@media(max-width:767.98px) {
  .ba-bot-page .app-footer {
    width: 100%;
    margin-left: 0
  }
}

/* Affiliate dashboard and downloadable marketing creative gallery. */
.ba-affiliate-page {
  --rt-sidebar-width: 219px;
  --rt-header-h: 63px
}

.ba-affiliate-page .page-content {
  padding: 16px 18px 10px 24px
}

.ba-affiliate-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 70px;
  min-height: 70px;
  margin: 0 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .8rem 1.25rem;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .62rem
}

.affiliate-grid {
  display: grid;
  grid-template-columns: minmax(700px, 1fr) 420px;
  gap: 20px
}

.affiliate-grid>* {
  min-width: 0
}

.affiliate-heading {
  height: 53px
}

.affiliate-heading h1 {
  margin: 0 0 .2rem;
  font-size: 1.18rem;
  text-transform: uppercase
}

.affiliate-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .68rem
}

.affiliate-heading p b {
  color: var(--rt-primary)
}

.affiliate-side {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.affiliate-side h2,
.affiliate-main h2 {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase
}

.affiliate-side .card {
  padding: 1rem
}

.referral-link-card {
  /* height: 166px; */
  padding: .85rem 1rem
}

.referral-link-card h2 {
  margin-bottom: .7rem
}

.referral-link-fields {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px
}

.referral-copy-field,
.referral-code-field {
  height: 47px;
  display: flex;
  align-items: center;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  background: rgba(0, 0, 0, .12)
}

.referral-copy-field>i {
  margin: 0 .7rem;
  color: var(--rt-text-muted)
}

.referral-copy-field strong,
.referral-code-field>strong {
  font-size: .62rem;
  white-space: nowrap
}

.referral-copy-field button,
.referral-code-field button {
  height: 31px;
  margin-left: auto;
  margin-right: .45rem;
  padding: 0 .8rem;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #F90B0B;
  font-size: .58rem
}

.referral-code-field {
  position: relative;
  padding-top: .9rem;
  padding-left: .8rem
}

.referral-code-field>small {
  position: absolute;
  left: .8rem;
  top: .25rem;
  color: var(--rt-text-muted);
  font-size: .48rem
}

.referral-link-card>small {
  display: block;
  margin: .5rem 0 .35rem;
  font-size: .55rem
}

.referral-share-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px
}

.referral-share-row button,
.referral-share-row a {
  height: 35px;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: #10232d;
  font-size: .55rem;
  text-align: left;
  padding-left: .85rem;
  display: flex;
  align-items: center;
  text-decoration: none
}

.referral-share-row i {
  width: 22px;
  font-size: .85rem
}

.referral-share-row button:last-child {
  background: rgba(112, 52, 161, .2)
}

.referral-share-row .fa-whatsapp {
  color: #36d66b
}

.referral-share-row .fa-telegram {
  color: #2aa7e8
}

.referral-share-row .fa-facebook-f {
  color: #4c7cff
}

.referral-stat-grid {
  /* height: 110px; */
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px
}

.referral-stat-grid article {
  padding: .8rem;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: .55rem;
  align-items: start
}

.referral-stat-grid>article>i {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.3rem
}

.referral-stat-grid .tone-green {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1)
}

.referral-stat-grid .tone-purple {
  color: #c063ef;
  background: rgba(192, 99, 239, .14)
}

.referral-stat-grid .tone-blue {
  color: #168cff;
  background: rgba(22, 140, 255, .13)
}

.referral-stat-grid .tone-amber {
  color: #ffbf00;
  background: rgba(255, 191, 0, .13)
}

.referral-stat-grid span {
  display: flex;
  flex-direction: column;
  gap: .17rem
}

.referral-stat-grid small {
  font-size: .5rem;
  text-transform: uppercase;
  white-space: nowrap
}

.referral-stat-grid strong {
  font-size: 1.1rem
}

.referral-stat-grid b {
  color: var(--rt-primary);
  font-size: .55rem
}

.referral-stat-grid em {
  color: var(--rt-text-muted);
  font-size: .48rem;
  font-style: normal;
  white-space: nowrap
}

.referral-chart-card {
  height: 199px;
  margin-top: 12px;
  padding: .8rem 1rem
}

.referral-chart-card header {
  height: 28px;
  display: flex;
  align-items: start;
  justify-content: space-between
}

.referral-chart-card header button,
.referral-history-card header button {
  height: 28px;
  padding: 0 .7rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .52rem
}

.referral-chart-legend {
  height: 22px;
  display: flex;
  justify-content: center;
  gap: 2rem;
  color: var(--rt-text-muted);
  font-size: .48rem
}

.referral-chart-legend span:before {
  content: "";
  width: 18px;
  height: 2px;
  margin-right: .4rem;
  display: inline-block;
  vertical-align: middle
}

.referral-chart-legend .green:before {
  background: #16803C
}

.referral-chart-legend .purple:before {
  background: #9254d4
}

.referral-chart-legend .blue:before {
  background: #168cff
}

.referral-chart-legend .amber:before {
  background: #ffb300
}

.referral-chart-card svg {
  width: 100%;
  height: 113px;
  display: block
}

.referral-chart-card footer {
  display: flex;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .45rem
}

.referral-history-card {
  height: 289px;
  margin-top: 12px;
  overflow: hidden
}

.referral-history-card>header {
  height: 45px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--rt-border)
}

.referral-history-card header>div {
  margin-left: 1.5rem;
  display: flex;
  gap: .5rem
}

.referral-history-card header>a {
  margin-left: auto;
  color: var(--rt-primary);
  font-size: .52rem;
  text-decoration: none
}

.referral-history-card table {
  font-size: .51rem
}

.referral-history-card .table>:not(caption)>*>* {
  height: 47px;
  padding: .35rem .5rem;
  border-color: var(--rt-border);
  vertical-align: middle;
  white-space: nowrap
}

.referral-history-card th {
  color: var(--rt-text-muted);
  font-weight: 400
}

.referral-history-card td>small {
  display: block;
  color: var(--rt-text-muted);
  font-size: .45rem
}

.referral-person {
  display: flex;
  align-items: center;
  gap: .55rem
}

.referral-person>b {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: .52rem
}

.referral-person .red {
  background: #df3b47
}

.referral-person .purple {
  background: #7c35b7
}

.referral-person .olive {
  background: #F90B0B
}

.referral-person .pink {
  background: #9f657e
}

.referral-person .green {
  background: #16803C
}

.referral-person span {
  display: flex;
  flex-direction: column
}

.referral-person strong {
  font-size: .52rem
}

.referral-status {
  padding: .2rem .4rem;
  border-radius: 3px;
  color: var(--rt-text-muted);
  background: #1b2931;
  font-size: .45rem
}

.referral-status.paid {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1)
}

.commission-card h2 {
  margin-bottom: .8rem
}

.commission-card>div {
  display: grid;
  grid-template-columns: 1.15fr 1fr
}

.commission-card>div>span {
  display: flex;
  flex-direction: column;
  gap: .45rem
}

.commission-card>div>span:first-child {
  border-right: 1px solid var(--rt-border)
}

.commission-card small {
  color: var(--rt-text-muted);
  font-size: .52rem
}

.commission-card strong {
  font-size: 1.15rem
}

.commission-card span:first-child strong {
  color: var(--rt-primary)
}

.commission-card b {
  font-size: .62rem
}

.commission-card button,
.commission-card > div > span:first-child a {
  width: 167px;
  height: 34px;
  border: 1px solid rgba(249, 11, 11, .4);
  border-radius: 4px;
  color: var(--rt-primary);
  background: transparent;
  font-size: .52rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none
}

.commission-card p {
  height: 53px;
  margin: .7rem 0 0;
  padding: .6rem .8rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  color: var(--rt-text-muted);
  font-size: .55rem;
  line-height: 1.45
}

.commission-card p i {
  color: #F90B0B;
  font-size: 1.2rem
}

.referral-benefits {
  height: 269px
}

.referral-benefits article {
  height: 56px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: .7rem
}

.referral-benefits article>i {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-size: 1rem
}

.referral-benefits .green {
  background: #F90B0B
}

.referral-benefits .blue {
  background: #164c91
}

.referral-benefits .purple {
  background: #6735a2
}

.referral-benefits .amber {
  background: #a47608
}

.referral-benefits article span {
  display: flex;
  flex-direction: column;
  gap: .2rem
}

.referral-benefits strong {
  font-size: .61rem
}

.referral-benefits small {
  color: var(--rt-text-muted);
  font-size: .54rem;
  line-height: 1.35
}

.referral-levels {
  height: 163px
}

.referral-levels h2 {
  margin-bottom: .15rem
}

.referral-levels p {
  margin: 0 0 .25rem;
  color: var(--rt-text-muted);
  font-size: .5rem
}

.referral-levels table {
  width: 100%;
  font-size: .48rem
}

.referral-levels th {
  color: var(--rt-text-muted);
  font-weight: 400
}

.referral-levels td {
  height: 24px;
  border-top: 1px solid var(--rt-border)
}

.referral-levels td b {
  color: var(--rt-primary);
  font-weight: 400
}

.referral-levels td:first-child i {
  margin-right: .3rem;
  color: #d99a12
}

.top-referrers {
  height: 181px
}

.top-referrers header {
  display: flex;
  justify-content: space-between
}

.top-referrers header a {
  color: var(--rt-primary);
  font-size: .52rem;
  text-decoration: none
}

.top-referrers article {
  height: 47px;
  display: grid;
  grid-template-columns: 26px 35px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--rt-border)
}

.top-referrers article:last-child {
  border-bottom: 0
}

.top-referrers article>b {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #c89017;
  border-radius: 50%;
  font-size: .55rem
}

.top-referrers img {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  object-fit: cover
}

.top-referrers span {
  display: flex;
  flex-direction: column
}

.top-referrers strong {
  font-size: .56rem
}

.top-referrers small {
  color: var(--rt-text-muted);
  font-size: .48rem
}

.top-referrers em {
  color: var(--rt-primary);
  font-size: .8rem;
  font-style: normal
}

.marketing-grid {
  grid-template-columns: minmax(760px, 1fr) 345px;
  gap: 28px
}

.marketing-toolbar {
  height: 57px;
  display: flex;
  align-items: start;
  justify-content: space-between
}

.marketing-toolbar>div {
  display: flex;
  overflow-x: auto
}

.marketing-toolbar button {
  height: 34px;
  padding: 0 1rem;
  border: 1px solid var(--rt-border);
  color: var(--rt-text);
  background: transparent;
  font-size: .56rem;
  white-space: nowrap
}

.marketing-toolbar>div button:first-child {
  border-radius: 5px 0 0 5px
}

.marketing-toolbar>div button:last-child {
  border-radius: 0 5px 5px 0
}

.marketing-toolbar button.active {
  color: #fff;
  background: #F90B0B;
  border-color: #F90B0B
}

.marketing-toolbar>button {
  border-radius: 5px
}

.marketing-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.marketing-creative {
  height: 328px;
  padding: .7rem;
  overflow: hidden
}

.marketing-creative>header {
  height: 38px;
  display: flex;
  align-items: start;
  gap: .55rem
}

.marketing-creative>header i {
  font-size: .9rem
}

.marketing-creative[data-marketing-channel=whatsapp]>header i {
  color: #39d353
}

.marketing-creative[data-marketing-channel=instagram]>header i {
  color: #e1306c
}

.marketing-creative[data-marketing-channel=facebook]>header i {
  color: #4d8cff
}

.marketing-creative[data-marketing-channel=telegram]>header i {
  color: #39aee8
}

.marketing-creative[data-marketing-channel=video]>header i {
  color: #f04444
}

.marketing-creative h2 {
  font-size: .62rem
}

.creative-preview {
  height: 227px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  background: #02090d
}

.creative-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}

.creative-play {
  width: 58px;
  height: 58px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  font-size: 1.15rem
}

.marketing-creative footer {
  height: 51px;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 6px;
  align-items: end
}

.marketing-creative footer button,
.marketing-creative footer a {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .51rem;
  text-decoration: none
}

.marketing-creative footer .share {
  color: #fff;
  background: #F90B0B;
  border-color: #F90B0B
}

.marketing-top-tip {
  height: 94px;
  margin-top: 20px;
  padding: 1rem;
  display: grid;
  grid-template-columns: 54px 1fr 200px;
  gap: .75rem;
  align-items: center;
  border-color: rgba(255, 191, 0, .5);
  background: linear-gradient(90deg, rgba(255, 191, 0, .1), rgba(255, 191, 0, .025))
}

.marketing-top-tip>i {
  color: #ffc21c;
  font-size: 2.4rem
}

.marketing-top-tip span {
  display: flex;
  flex-direction: column;
  gap: .2rem
}

.marketing-top-tip span strong {
  color: #ffc21c;
  font-size: .62rem;
  text-transform: uppercase
}

.marketing-top-tip span b {
  font-size: .66rem
}

.marketing-top-tip span small {
  color: var(--rt-text-muted);
  font-size: .55rem
}

.marketing-top-tip a {
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border: 1px solid rgba(255, 191, 0, .25);
  border-radius: 5px;
  color: var(--rt-text);
  font-size: .57rem;
  text-decoration: none
}

.marketing-link {
  height: 202px
}

.marketing-link p {
  margin: .35rem 0 .75rem;
  color: var(--rt-text-muted);
  font-size: .55rem
}

.marketing-link>div {
  height: 42px;
  margin-bottom: .75rem;
  padding-left: .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rt-border);
  border-radius: 4px
}

.marketing-link>div>strong {
  min-width: 0;
  overflow: hidden;
  font-size: .6rem;
  white-space: nowrap
}

.marketing-link>div>span {
  display: flex;
  flex-direction: column
}

.marketing-link small {
  color: var(--rt-text-muted);
  font-size: .48rem
}

.marketing-link button {
  width: 35px;
  height: 32px;
  margin-right: .3rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text-muted);
  background: transparent
}

.marketing-stats {
  height: 258px
}

.marketing-stats header {
  height: 36px;
  display: flex;
  justify-content: space-between
}

.marketing-stats header button {
  height: 29px;
  padding: 0 .6rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .5rem
}

.marketing-stats>div {
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rt-border);
  font-size: .59rem
}

.marketing-stats>div span {
  color: var(--rt-text-muted)
}

.marketing-stats>a {
  height: 37px;
  margin-top: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  border: 1px solid rgba(249, 11, 11, .35);
  border-radius: 4px;
  color: var(--rt-primary);
  font-size: .56rem;
  text-decoration: none
}

.marketing-tips {
  height: 196px
}

.marketing-tips h2 {
  margin-bottom: .65rem
}

.marketing-tips p {
  min-height: 35px;
  margin: 0;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: .45rem;
  color: var(--rt-text-muted);
  font-size: .53rem;
  line-height: 1.35
}

.marketing-tips p b {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-text-muted);
  border-radius: 50%;
  color: var(--rt-text);
  font-size: .48rem
}

.marketing-help {
  height: 124px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-content: start;
  border-color: rgba(166, 77, 227, .35);
  background: linear-gradient(90deg, rgba(120, 50, 170, .12), rgba(120, 50, 170, .03))
}

.marketing-help>i {
  color: #b65cff;
  font-size: 1.5rem
}

.marketing-help span {
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.marketing-help strong {
  font-size: .62rem;
  text-transform: uppercase
}

.marketing-help small {
  color: var(--rt-text-muted);
  font-size: .53rem
}

.marketing-help a {
  grid-column: 1/3;
  height: 37px;
  margin-top: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(166, 77, 227, .35);
  border-radius: 4px;
  color: #c264ff;
  font-size: .56rem;
  text-decoration: none
}

@media(max-width:1199.98px) {
  .affiliate-grid {
    grid-template-columns: 1fr
  }

  .affiliate-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .marketing-card-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:767.98px) {
  .ba-affiliate-page .page-content {
    padding: 16px
  }

  .ba-affiliate-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .affiliate-side,
  .marketing-card-grid,
  .referral-stat-grid {
    grid-template-columns: 1fr
  }

  .referral-link-card,
  .referral-stat-grid,
  .referral-chart-card,
  .referral-history-card,
  .commission-card,
  .referral-benefits,
  .referral-levels,
  .top-referrers,
  .marketing-creative,
  .marketing-link,
  .marketing-stats,
  .marketing-tips,
  .marketing-help {
    height: auto
  }

  .referral-link-fields {
    grid-template-columns: 1fr
  }

  .referral-link-card {
    padding-bottom: 1rem
  }

  .referral-share-row {
    grid-template-columns: repeat(2, 1fr)
  }

  .referral-stat-grid article {
    min-height: 95px
  }

  .referral-chart-card {
    min-height: 230px;
    overflow-x: auto
  }

  .referral-chart-card svg,
  .referral-chart-card footer {
    min-width: 700px
  }

  .referral-history-card .table {
    min-width: 820px
  }

  .marketing-toolbar {
    height: auto;
    margin-bottom: 1rem;
    gap: .75rem;
    flex-direction: column
  }

  .marketing-toolbar>div {
    width: 100%
  }

  .marketing-creative {
    min-height: 328px
  }

  .marketing-top-tip {
    height: auto;
    grid-template-columns: 54px 1fr
  }

  .marketing-top-tip a {
    grid-column: 1/3
  }

  .creative-preview {
    height: 227px
  }
}

.referral-history-card thead th {
  height: 30px
}

.referral-history-card tbody td {
  height: 42px
}

.ba-referrals-page .referral-history-card .table>thead>tr>th {
  height: 34px;
  padding: .25rem .5rem
}

.ba-referrals-page .referral-history-card .table>tbody>tr>td {
  height: 42px;
  padding: .25rem .5rem
}

@media(min-width:768px) {
  .marketing-creative:nth-child(n+4) {
    height: 296px
  }

  .marketing-creative:nth-child(n+4) .creative-preview {
    height: 195px
  }
}

/* Trade history ledger and performance rail. */
.ba-history-page {
  --rt-sidebar-width: 219px;
  --rt-header-h: 63px
}

.ba-history-page .page-content {
  padding: 16px 17px 14px 26px
}

.ba-history-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 60px;
  min-height: 60px;
  margin: 0 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .7rem 1.25rem;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .62rem
}

.history-grid {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 377px;
  gap: 18px
}

.history-grid>* {
  min-width: 0
}

.history-heading {
  height: 62px
}

.history-heading h1 {
  margin: 0 0 .25rem;
  font-size: 1.18rem;
  text-transform: uppercase
}

.history-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .68rem
}

.history-market-tabs {
  width: 494px;
  height: 35px;
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.history-market-tabs button {
  border: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  background: transparent;
  font-size: .58rem;
  text-transform: uppercase
}

.history-market-tabs button:first-child {
  border-radius: 5px 0 0 5px
}

.history-market-tabs button:last-child {
  border-radius: 0 5px 5px 0
}

.history-market-tabs button.active {
  color: #fff;
  background: #F90B0B;
  border-color: #F90B0B;
  font-weight: 600
}

.history-filters {
  height: 57px;
  display: grid;
  grid-template-columns: 222px 128px 139px 146px 1fr;
  gap: 11px;
  align-items: center
}

.history-filters button {
  height: 34px;
  padding: 0 .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  color: var(--rt-text);
  background: transparent;
  font-size: .57rem
}

.history-filters button:last-child {
  width: 94px;
  justify-self: end;
  color: var(--rt-text-muted)
}

.history-table-card {
  height: 614px;
  overflow: hidden
}

.history-table-card table {
  width: 100%;
  font-size: .51rem
}

.history-table-card .table>:not(caption)>*>* {
  padding: .35rem .38rem;
  border-color: var(--rt-border);
  vertical-align: middle;
  white-space: nowrap
}

.history-table-card thead th {
  height: 42px;
  color: var(--rt-text-muted);
  font-weight: 400
}

.history-table-card tbody td {
  height: 52px
}

.history-table-card td>small {
  display: block;
  margin-top: .18rem;
  color: var(--rt-text-muted);
  font-size: .46rem
}

.history-table-card td:last-child {
  color: var(--rt-text-muted)
}

.history-table-card>footer {
  height: 52px;
  padding: 0 .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .52rem
}

.history-table-card>footer nav {
  display: flex;
  gap: .45rem
}

.history-table-card>footer button {
  width: 31px;
  height: 31px;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .52rem
}

.history-table-card>footer button.active {
  color: var(--rt-primary);
  border-color: var(--rt-primary);
  background: rgba(249, 11, 11, .08)
}

.history-asset {
  display: flex;
  align-items: center;
  gap: .45rem
}

.history-asset>i {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  font-style: normal;
  font-size: .72rem
}

.history-asset>i img {
  width: 100%;
  height: 100%;
  display: block
}

.history-asset>span {
  display: flex;
  flex-direction: column
}

.history-asset strong {
  font-size: .55rem
}

.history-asset small {
  color: var(--rt-text-muted);
  font-size: .47rem
}

.history-asset-eur {
  background: #154c93
}

.history-asset-gbp {
  background: #20436d
}

.history-asset-ada {
  color: #fff;
  background: #17489b
}

.history-direction {
  font-size: .56rem
}

.history-direction.high {
  color: var(--rt-primary)
}

.history-direction.low {
  color: #ff3f4f
}

.history-result {
  padding: .25rem .45rem;
  border-radius: 4px;
  font-size: .49rem;
  font-weight: 500;
  font-style: normal
}

.history-result.won {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1)
}

.history-result.lost {
  color: #ff455d;
  background: rgba(255, 69, 93, .12)
}

.history-summary {
  height: 79px;
  margin-top: 14px;
  padding: .65rem 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr)
}

.history-summary span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-right: 1px solid var(--rt-border)
}

.history-summary span:last-child {
  border-right: 0;
  border-left: 1px dashed var(--rt-border)
}

.history-summary small {
  color: var(--rt-text-muted);
  font-size: .55rem
}

.history-summary strong {
  font-size: .92rem
}

.history-summary .green {
  color: var(--rt-primary)
}

.history-summary .red {
  color: #ff3f4f
}

.history-side {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.history-side .card {
  padding: 1rem
}

.history-side h2 {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase
}

.history-performance {
  height: 332px
}

.history-performance header {
  height: 43px;
  display: flex;
  justify-content: space-between
}

.history-performance header button {
  height: 31px;
  padding: 0 .7rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .52rem
}

.history-performance-metrics {
  height: 137px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rt-border)
}

.history-performance-metrics span {
  padding: .25rem 0;
  display: flex;
  flex-direction: column;
  gap: .45rem
}

.history-performance-metrics span:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--rt-border)
}

.history-performance-metrics span:nth-child(n+3) {
  padding-top: .8rem;
  border-top: 1px solid var(--rt-border)
}

.history-performance-metrics small,
.history-rate small,
.history-best small {
  color: var(--rt-text-muted);
  font-size: .56rem
}

.history-performance-metrics strong {
  color: var(--rt-primary);
  font-size: 1.02rem
}

.history-performance-metrics .red {
  color: #ff3f4f
}

.history-rate {
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem
}

.history-rate-ring {
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--rt-primary) 0 62.9%, #21303a 62.9% 100%);
  position: relative
}

.history-rate-ring:after {
  content: "";
  width: 88px;
  height: 88px;
  position: absolute;
  border-radius: 50%;
  background: var(--rt-card-bg)
}

.history-rate-ring b {
  position: relative;
  z-index: 1;
  font-size: 1rem
}

.history-rate>span:last-child {
  display: flex;
  flex-direction: column;
  gap: .55rem
}

.history-rate>span:last-child strong {
  color: var(--rt-primary);
  font-size: 1rem
}

.history-best {
  height: 94px
}

.history-best h2 {
  margin-bottom: .55rem
}

.history-best>div {
  display: grid;
  grid-template-columns: 1fr 74px 84px;
  align-items: center
}

.history-best>div>span:nth-child(n+2) {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: center
}

.history-best b {
  color: var(--rt-primary);
  font-size: .7rem
}

.history-best .history-asset>i {
  width: 36px;
  height: 36px
}

.history-best .history-asset>strong {
  font-size: .78rem
}

.history-recent {
  height: 365px;
  padding-bottom: .7rem !important
}

.history-recent>header {
  height: 34px;
  display: flex;
  justify-content: space-between
}

.history-recent header a {
  color: var(--rt-primary);
  font-size: .55rem;
  text-decoration: none
}

.history-recent article {
  height: 58px;
  display: grid;
  grid-template-columns: 1.15fr .62fr .55fr .65fr .42fr;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  font-size: .51rem
}

.history-recent article>b {
  font-weight: 400
}

.history-recent article>strong {
  text-align: right
}

.history-recent article>em {
  justify-self: end
}

.history-recent .history-asset>i {
  width: 28px;
  height: 28px
}

.history-view-all {
  height: 35px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: .7rem;
  color: #12b8ff;
  font-size: .58rem;
  text-decoration: none
}

@media(max-width:1199.98px) {
  .history-grid {
    grid-template-columns: 1fr
  }

  .history-side {
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .history-recent {
    height: auto;
    min-height: 365px
  }
}

@media(max-width:767.98px) {
  .ba-history-page .page-content {
    padding: 16px
  }

  .ba-history-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .history-market-tabs {
    width: 100%;
    overflow-x: auto
  }

  .history-market-tabs button {
    min-width: 130px
  }

  .history-filters {
    height: auto;
    margin: 12px 0;
    grid-template-columns: 1fr 1fr
  }

  .history-filters button:first-child,
  .history-filters button:last-child {
    width: 100%;
    grid-column: 1/3
  }

  .history-filters button:last-child {
    justify-self: stretch
  }

  .history-table-card {
    height: auto;
    min-height: 614px
  }

  .history-table-card .table {
    min-width: 880px
  }

  .history-table-card>footer {
    height: auto;
    min-height: 70px;
    align-items: flex-start;
    padding: .8rem;
    gap: 1rem;
    flex-direction: column
  }

  .history-table-card>footer nav {
    max-width: 100%;
    overflow-x: auto
  }

  .history-summary {
    height: auto;
    grid-template-columns: 1fr 1fr
  }

  .history-summary span {
    min-height: 72px
  }

  .history-summary span:last-child {
    grid-column: 1/3;
    border-left: 0
  }

  .history-side {
    grid-template-columns: 1fr
  }

  .history-performance,
  .history-best,
  .history-recent {
    height: auto
  }

  .history-performance {
    min-height: 332px
  }

  .history-best {
    min-height: 110px
  }

  .history-recent {
    min-height: 365px
  }
}

/* Market overview dashboard, compact charts, heatmap, and information rail. */
.ba-market-page {
  --rt-sidebar-width: 203px;
  --rt-header-h: 62px
}

.ba-market-page .page-content {
  padding: 14px 16px 14px 23px
}

.ba-market-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 76px;
  min-height: 76px;
  margin: 0 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .85rem 28px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .61rem
}

.market-overview-grid {
  display: grid;
  grid-template-columns: minmax(730px, 1fr) 424px;
  gap: 21px
}

.market-overview-grid>* {
  min-width: 0
}

.market-heading {
  height: 61px
}

.market-heading h1 {
  margin: 0 0 .3rem;
  font-size: 1.17rem;
  text-transform: uppercase
}

.market-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .68rem
}

.market-main h2,
.market-side h2 {
  margin: 0;
  font-size: .71rem;
  text-transform: uppercase
}

.market-main a,
.market-side a {
  color: var(--rt-primary);
  font-size: .55rem;
  text-decoration: none
}

.market-kpis {
  height: 149px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px
}

.market-kpi {
  height: 149px;
  padding: 1rem;
  position: relative;
  overflow: hidden
}

.market-kpi>small {
  display: block;
  color: var(--rt-text-muted);
  font-size: .58rem
}

.market-kpi>strong {
  margin-top: .8rem;
  display: block;
  font-size: 1.28rem
}

.market-kpi>b {
  margin-top: .55rem;
  display: block;
  color: var(--rt-primary);
  font-size: .57rem
}

.market-kpi>svg {
  width: 112px;
  height: 43px;
  position: absolute;
  right: 12px;
  bottom: 10px;
  overflow: visible
}

.market-kpi>svg polyline,
.market-sparkline polyline {
  fill: none;
  stroke: var(--rt-primary);
  stroke-width: 1.35;
  stroke-linejoin: round;
  stroke-linecap: round
}

.market-fear-card {
  padding-bottom: .4rem
}

.market-fear-gauge {
  width: 140px;
  height: 76px;
  margin: .45rem auto 0;
  position: relative;
  overflow: hidden
}

.market-fear-gauge:before {
  content: "";
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(from 270deg, #ff7a00 0 24%, #ffc100 24% 42%, #F90B0B 42% 50%, transparent 50% 100%)
}

.market-fear-gauge:after {
  content: "";
  width: 102px;
  height: 102px;
  position: absolute;
  left: 19px;
  top: 19px;
  border-radius: 50%;
  background: var(--rt-card-bg)
}

.market-fear-gauge>span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center
}

.market-fear-gauge strong {
  font-size: 1.25rem
}

.market-fear-gauge b {
  color: var(--rt-primary);
  font-size: .6rem
}

.market-fear-card>em {
  display: block;
  color: var(--rt-text-muted);
  font-size: .52rem;
  font-style: normal;
  text-align: center
}

.market-movers-card {
  height: 315px;
  margin-top: 12px;
  overflow: hidden
}

.market-movers-card>header,
.market-heatmap-card>header,
.market-side article>header {
  height: 45px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.market-movers-card table {
  font-size: .55rem
}

.market-movers-card .table>:not(caption)>*>* {
  height: 36px;
  padding: .25rem .45rem;
  border-color: var(--rt-border);
  vertical-align: middle;
  white-space: nowrap
}

.market-movers-card thead th {
  height: 32px;
  color: var(--rt-text-muted);
  font-weight: 400
}

.market-coin {
  display: grid;
  grid-template-columns: 25px auto 1fr;
  align-items: center;
  gap: .45rem
}

.market-coin img {
  width: 25px;
  height: 25px
}

.market-coin b {
  font-size: .55rem
}

.market-coin small {
  color: var(--rt-text-muted);
  font-size: .48rem
}

.market-sparkline {
  width: 74px;
  height: 25px
}

.market-sparkline.down polyline {
  stroke: #ff3f4f
}

.market-movers-card>footer {
  height: 56px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .51rem
}

.market-movers-card>footer nav {
  display: flex;
  gap: 7px
}

.market-movers-card>footer button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .51rem
}

.market-movers-card>footer button.active {
  color: var(--rt-primary);
  border-color: var(--rt-primary);
  background: rgba(249, 11, 11, .08)
}

.market-heatmap-card {
  height: 292px;
  margin-top: 12px;
  padding: 0 7px 7px
}

.market-heatmap-card>header {
  height: 48px;
  padding: 0 9px
}

.market-heatmap-card>header h2 i {
  margin-left: .35rem;
  color: var(--rt-text-muted)
}

.market-heatmap-card>header>div {
  display: flex;
  gap: 7px
}

.market-heatmap-card button {
  height: 29px;
  padding: 0 .65rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .51rem
}

.market-heatmap {
  height: 226px;
  display: grid;
  grid-template-columns: 1.2fr 1.05fr .86fr .86fr .86fr .72fr;
  grid-template-rows: 76px 76px 72px;
  gap: 3px
}

.market-heatmap>span {
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #F90B0B;
  border-radius: 4px;
  background: linear-gradient(135deg, #F90B0B, #06452f);
  overflow: hidden
}

.market-heatmap b {
  font-size: .77rem
}

.market-heatmap small,
.market-heatmap em {
  font-size: .53rem;
  font-style: normal
}

.market-heatmap .loss {
  border-color: #9a3333;
  background: linear-gradient(135deg, #85302f, #5a2224)
}

.heat-btc {
  grid-column: 1;
  grid-row: 1/4
}

.heat-eth {
  grid-column: 2;
  grid-row: 1/4
}

.heat-bnb {
  grid-column: 3;
  grid-row: 1
}

.heat-sol {
  grid-column: 4;
  grid-row: 1
}

.heat-xrp {
  grid-column: 5/7;
  grid-row: 1
}

.heat-ada {
  grid-column: 3;
  grid-row: 2
}

.heat-doge {
  grid-column: 4;
  grid-row: 2
}

.heat-matic {
  grid-column: 5;
  grid-row: 2
}

.heat-dot {
  grid-column: 6;
  grid-row: 2
}

.heat-avax {
  grid-column: 3;
  grid-row: 3
}

.heat-link {
  grid-column: 4;
  grid-row: 3
}

.heat-trx {
  grid-column: 5;
  grid-row: 3
}

.heat-ltc {
  grid-column: 6;
  grid-row: 3
}

.heat-bch {
  display: none !important
}

.heat-other {
  display: none !important
}

.market-side {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.market-side .card {
  overflow: hidden
}

.market-positions {
  height: 321px
}

.market-positions table {
  font-size: .55rem
}

.market-positions .table>:not(caption)>*>* {
  height: 35px;
  padding: .23rem .36rem;
  border-color: var(--rt-border);
  white-space: nowrap
}

.market-positions thead th {
  height: 32px;
  color: var(--rt-text-muted);
  font-weight: 400
}

.market-positions td em {
  padding: .17rem .3rem;
  border: 1px solid rgba(249, 11, 11, .18);
  border-radius: 3px;
  color: var(--rt-text-muted);
  font-size: .49rem;
  font-style: normal
}

.market-positions td:last-child small {
  display: block;
  font-size: .45rem
}

.market-positions td:last-child span {
  width: 62px;
  height: 5px;
  display: block;
  border-radius: 4px;
  background: #22323c
}

.market-positions td:last-child i {
  height: 5px;
  display: block;
  border-radius: 4px;
  background: var(--rt-primary)
}

.market-positions td:last-child i[data-progress="85"] {
  width: 85%
}

.market-positions td:last-child i[data-progress="62"] {
  width: 62%
}

.market-positions td:last-child i[data-progress="48"] {
  width: 48%
}

.market-positions td:last-child i[data-progress="72"] {
  width: 72%
}

.market-position-total {
  height: 43px;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr .8fr 1fr auto;
  align-items: center;
  font-size: .53rem
}

.market-position-total span:nth-of-type(2) {
  text-align: right
}

.market-position-total strong {
  color: var(--rt-primary)
}

.market-trade-link {
  height: 37px;
  margin: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-primary);
  border-radius: 4px;
  font-size: .62rem !important;
  font-weight: 600
}

.market-trade-link i {
  margin-left: auto;
  margin-right: 13px
}

.market-news {
  height: 306px
}

.market-news-item {
  height: 65px;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
  color: var(--rt-text) !important
}

.market-news-item img {
  width: 82px;
  height: 47px;
  border-radius: 4px;
  object-fit: cover;
  filter: saturate(.75) brightness(.8)
}

.market-news-item span {
  display: flex;
  flex-direction: column;
  gap: .4rem
}

.market-news-item b {
  font-size: .55rem
}

.market-news-item small {
  color: var(--rt-text-muted);
  font-size: .5rem
}

.market-calendar {
  height: 192px
}

.market-calendar-head,
.market-calendar>div:not(.market-calendar-head) {
  height: 44px;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 42px 68px 1fr 62px 62px 9px;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  font-size: .52rem
}

.market-calendar-head {
  height: 16px !important;
  border-bottom: 0 !important
}

.market-calendar-head small {
  color: var(--rt-text-muted);
  font-size: .45rem
}

.market-calendar b {
  font-size: .5rem;
  font-weight: 400
}

.market-calendar>div small {
  font-size: .51rem
}

.market-calendar>div i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F90B0B
}

.market-calendar>div:last-child {
  border-bottom: 0
}

@media(max-width:767.98px) {
  .ba-market-page .page-content {
    padding: 16px
  }

  .ba-market-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .market-kpis {
    height: auto;
    grid-template-columns: 1fr 1fr
  }

  .market-movers-card {
    height: auto;
    min-height: 315px
  }

  .market-movers-card .table {
    min-width: 820px
  }

  .market-movers-card>footer {
    height: auto;
    min-height: 75px;
    align-items: flex-start;
    gap: 1rem;
    padding: .8rem;
    flex-direction: column
  }

  .market-movers-card>footer nav {
    max-width: 100%;
    overflow-x: auto
  }

  .market-heatmap-card {
    height: auto;
    min-height: 292px;
    overflow-x: auto
  }

  .market-heatmap-card>header,
  .market-heatmap {
    min-width: 710px
  }

  .market-side {
    grid-template-columns: 1fr
  }

  .market-calendar {
    grid-column: auto
  }

  .market-positions,
  .market-news,
  .market-calendar {
    height: auto;
    min-height: 192px
  }

  .market-positions {
    min-height: 321px
  }

  .market-positions .table {
    min-width: 410px
  }

  .market-news {
    min-height: 306px
  }
}

.market-heatmap {
  grid-template-columns: repeat(12, 1fr)
}

.heat-btc {
  grid-column: 1/3
}

.heat-eth {
  grid-column: 3/5
}

.heat-bnb {
  grid-column: 5/8
}

.heat-sol {
  grid-column: 8/10
}

.heat-xrp {
  grid-column: 10/13
}

.heat-ada {
  grid-column: 5/7
}

.heat-doge {
  grid-column: 7/9
}

.heat-matic {
  grid-column: 9/11
}

.heat-dot {
  grid-column: 11/13
}

.heat-avax {
  grid-column: 5/7
}

.heat-link {
  grid-column: 7/9
}

.heat-trx {
  grid-column: 9/10
}

.heat-ltc {
  grid-column: 10/11
}

.heat-bch {
  display: flex !important;
  grid-column: 11/12;
  grid-row: 3
}

.heat-other {
  display: flex !important;
  grid-column: 12/13;
  grid-row: 3
}

@media(max-width:1399.98px) and (min-width:768px) {
  .market-overview-grid {
    grid-template-columns: 1fr
  }

  .market-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .market-calendar {
    grid-column: 1/3
  }
}

/* Trading analytics dashboard. */
.ba-analytics-page {
  --rt-sidebar-width: 193px;
  --rt-header-h: 56px
}

.ba-analytics-page .page-content {
  padding: 15px 21px 22px 29px
}

.ba-analytics-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 69px;
  min-height: 69px;
  margin: 0 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .75rem 20px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .61rem
}

.analytics-grid {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 334px;
  gap: 20px
}

.analytics-grid>* {
  min-width: 0
}

.analytics-main h2,
.analytics-side h2 {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase
}

.analytics-heading {
  height: 59px
}

.analytics-heading h1 {
  margin: 0 0 .25rem;
  font-size: 1.16rem;
  text-transform: uppercase
}

.analytics-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .64rem
}

.analytics-toolbar {
  height: 54px;
  display: flex;
  align-items: start;
  justify-content: space-between
}

.analytics-toolbar nav {
  display: flex
}

.analytics-toolbar button {
  height: 35px;
  padding: 0 1rem;
  border: 1px solid var(--rt-border);
  color: var(--rt-text);
  background: transparent;
  font-size: .55rem
}

.analytics-toolbar nav button:first-child {
  border-radius: 5px 0 0 5px
}

.analytics-toolbar nav button:last-child {
  border-radius: 0 5px 5px 0
}

.analytics-toolbar nav button.active {
  color: #fff;
  background: #F90B0B;
  border-color: #F90B0B
}

.analytics-toolbar .analytics-export {
  border-radius: 5px
}

.analytics-toolbar .analytics-export i {
  margin-right: .5rem
}

.analytics-kpis {
  height: 132px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px
}

.analytics-kpi {
  height: 132px;
  padding: .9rem;
  position: relative;
  overflow: hidden
}

.analytics-kpi>small {
  display: block;
  color: var(--rt-text-muted);
  font-size: .51rem;
  text-transform: uppercase
}

.analytics-kpi>strong {
  margin-top: .45rem;
  display: block;
  font-size: 1.15rem
}

.analytics-kpi>b {
  margin-top: .45rem;
  display: block;
  color: var(--rt-primary);
  font-size: .57rem
}

.analytics-kpi>em {
  color: var(--rt-text-muted);
  font-size: .49rem;
  font-style: normal
}

.analytics-kpi>i {
  width: 47px;
  height: 47px;
  position: absolute;
  right: 13px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.22rem
}

.analytics-kpi>svg {
  width: 80px;
  height: 30px;
  position: absolute;
  right: 10px;
  bottom: 11px
}

.analytics-kpi>svg polyline {
  fill: none;
  stroke: var(--rt-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.analytics-kpi.tone-green>strong {
  color: var(--rt-primary)
}

.analytics-kpi.tone-green>i {
  color: var(--rt-primary);
  border: 1px solid rgba(249, 11, 11, .55);
  background: rgba(249, 11, 11, .12)
}

.analytics-kpi.tone-blue>i {
  color: #168bff;
  background: rgba(22, 139, 255, .17)
}

.analytics-kpi.tone-blue>svg polyline {
  stroke: #168bff
}

.analytics-kpi.tone-purple>i {
  color: #9348d9;
  background: rgba(147, 72, 217, .18)
}

.analytics-kpi.tone-purple>svg polyline {
  stroke: #9348d9
}

.analytics-kpi.tone-amber>i {
  color: #ff9f00;
  background: rgba(255, 159, 0, .17)
}

.analytics-kpi.tone-amber>svg polyline {
  stroke: #ff9f00
}

.analytics-kpi.tone-red>b {
  color: #ff3b3b
}

.analytics-kpi.tone-red>i {
  color: #ff3535;
  background: rgba(255, 53, 53, .14)
}

.analytics-kpi.tone-red>svg polyline {
  stroke: #ff3535
}

.analytics-performance {
  height: 308px;
  margin-top: 12px;
  padding: 0 16px 8px
}

.analytics-performance>header {
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.analytics-performance>header>div {
  display: flex;
  gap: 7px
}

.analytics-performance button {
  height: 30px;
  padding: 0 .75rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .51rem
}

.analytics-performance button.active {
  color: var(--rt-primary);
  border-color: rgba(249, 11, 11, .35);
  background: rgba(249, 11, 11, .08)
}

.analytics-chart-legend {
  height: 24px;
  display: flex;
  justify-content: center;
  gap: 35px;
  font-size: .5rem
}

.analytics-chart-legend span:before,
.analytics-distribution li:before,
.analytics-ratio li:before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  display: inline-block;
  border-radius: 50%;
  background: currentColor
}

.analytics-chart-legend .green {
  color: var(--rt-primary)
}

.analytics-chart-legend .blue {
  color: #168bff
}

.analytics-chart-legend .purple {
  color: #9348d9
}

.analytics-performance-chart {
  width: 100%;
  height: 225px;
  display: block;
  overflow: visible
}

.analytics-grid-lines line {
  stroke: var(--rt-border);
  stroke-width: 1
}

.analytics-y-labels,
.analytics-x-labels {
  fill: var(--rt-text-muted);
  font-size: 10px
}

.analytics-area-profit {
  fill: url(#analyticsProfitFill)
}

.analytics-area-trades {
  fill: url(#analyticsTradeFill)
}

.analytics-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.analytics-line.green {
  stroke: var(--rt-primary)
}

.analytics-line.blue {
  stroke: #168bff
}

.analytics-line.purple {
  stroke: #9348d9
}

.analytics-bottom {
  height: 282px;
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 12px
}

.analytics-bottom>.card {
  height: 282px
}

.analytics-pairs header,
.analytics-hourly header {
  height: 47px;
  padding: 0 16px;
  display: flex;
  align-items: center
}

.analytics-pairs table {
  font-size: .54rem
}

.analytics-pairs .table>:not(caption)>*>* {
  height: 34px;
  padding: .2rem .45rem;
  border-color: var(--rt-border);
  white-space: nowrap
}

.analytics-pairs thead th {
  height: 28px;
  color: var(--rt-text-muted);
  font-weight: 400
}

.analytics-pairs tbody td:nth-child(n+3) {
  color: var(--rt-primary)
}

.analytics-pairs tbody tr:last-child td:nth-child(3) {
  color: #a052cf
}

.analytics-pair-identity {
  display: flex;
  align-items: center;
  gap: .45rem
}

.analytics-pair-identity img,
.analytics-pair-identity>i {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .8rem;
  font-style: normal
}

.analytics-pair-identity img {
  display: block
}

.analytics-pairs>a {
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  color: var(--rt-primary);
  font-size: .56rem;
  text-decoration: none
}

.analytics-hourly header span {
  font-size: .6rem;
  text-transform: none
}

.analytics-hourly-chart {
  height: 190px;
  padding: 0 18px 0 48px;
  position: relative
}

.analytics-hourly-axis {
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .48rem
}

.analytics-hourly-bars {
  height: 160px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--rt-border);
  border-bottom: 1px solid var(--rt-border);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rt-border) 32px)
}

.analytics-hourly-bars i {
  width: calc((100% - 126px)/22);
  min-width: 5px;
  display: block;
  background: #16803C
}

.analytics-hourly-bars .negative {
  align-self: flex-start;
  margin-top: 80px;
  background: #e94040
}

.analytics-hourly-bars .positive {
  align-self: flex-end;
  margin-bottom: 80px
}

.analytics-hourly-bars .level-1 {
  height: 1px
}

.analytics-hourly-bars .level-4 {
  height: 4px
}

.analytics-hourly-bars .level-7 {
  height: 7px
}

.analytics-hourly-bars .level-8 {
  height: 8px
}

.analytics-hourly-bars .level-12 {
  height: 12px
}

.analytics-hourly-bars .level-14 {
  height: 14px
}

.analytics-hourly-bars .level-17 {
  height: 17px
}

.analytics-hourly-bars .level-19 {
  height: 19px
}

.analytics-hourly-bars .level-20 {
  height: 20px
}

.analytics-hourly-bars .level-23 {
  height: 23px
}

.analytics-hourly-bars .level-24 {
  height: 24px
}

.analytics-hourly-bars .level-25 {
  height: 25px
}

.analytics-hourly-bars .level-27 {
  height: 27px
}

.analytics-hourly-bars .level-31 {
  height: 31px
}

.analytics-hourly-bars .level-32 {
  height: 32px
}

.analytics-hourly-bars .level-35 {
  height: 35px
}

.analytics-hourly-bars .level-36 {
  height: 36px
}

.analytics-hourly-bars .level-42 {
  height: 42px
}

.analytics-hourly-bars .level-44 {
  height: 44px
}

.analytics-hourly-bars .level-46 {
  height: 46px
}

.analytics-hourly-labels {
  height: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .47rem
}

.analytics-hourly p {
  margin: 0;
  padding-left: 22px;
  color: var(--rt-text-muted);
  font-size: .54rem
}

.analytics-hourly p strong {
  margin-left: .4rem;
  color: var(--rt-primary);
  font-size: .72rem
}

.analytics-side {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.analytics-side>.card {
  padding: 16px
}

.analytics-distribution {
  height: 192px
}

.analytics-distribution {
  display: grid;
  grid-template-columns: 116px 1fr;
  grid-template-rows: 32px 1fr;
  column-gap: 10px
}

.analytics-distribution h2 {
  grid-column: 1/3
}

.analytics-donut {
  width: 105px;
  height: 105px;
  position: relative;
  border-radius: 50%
}

.distribution-donut {
  background: conic-gradient(#16803C 0 46.3%, #168bff 46.3% 79.5%, #7c38c5 79.5% 100%)
}

.analytics-donut:after {
  content: "";
  width: 77px;
  height: 77px;
  position: absolute;
  left: 14px;
  top: 14px;
  border-radius: 50%;
  background: var(--rt-card-bg)
}

.analytics-distribution ul,
.analytics-ratio ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none
}

.analytics-distribution li {
  height: 36px;
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  font-size: .5rem
}

.analytics-distribution li:before,
.analytics-ratio li:before {
  width: 7px;
  height: 7px;
  margin: 0
}

.analytics-distribution li span {
  color: var(--rt-text-muted)
}

.analytics-distribution li.green,
.analytics-ratio li.green {
  color: #16803C
}

.analytics-distribution li.blue {
  color: #168bff
}

.analytics-distribution li.purple {
  color: #7c38c5
}

.analytics-distribution li b {
  color: var(--rt-text)
}

.analytics-breakdown {
  height: 234px
}

.analytics-breakdown h2 {
  height: 42px
}

.analytics-breakdown>div {
  height: 43px;
  display: grid;
  grid-template-columns: 1fr 80px 63px;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  font-size: .58rem
}

.analytics-breakdown>div:last-child {
  border-bottom: 0
}

.analytics-breakdown span {
  color: var(--rt-text-muted)
}

.analytics-breakdown b {
  text-align: right;
  font-size: .7rem
}

.analytics-breakdown em {
  color: var(--rt-primary);
  font-size: .52rem;
  font-style: normal;
  text-align: right
}

.analytics-breakdown>div:last-child b {
  color: var(--rt-primary)
}

.analytics-ratio {
  height: 186px;
  display: grid;
  grid-template-columns: 126px 1fr;
  grid-template-rows: 30px 1fr
}

.analytics-ratio h2 {
  grid-column: 1/3
}

.ratio-donut {
  width: 112px;
  height: 112px;
  background: conic-gradient(#16803C 0 76.26%, #ef3434 76.26% 100%)
}

.ratio-donut:after {
  width: 89px;
  height: 89px;
  left: 11.5px;
  top: 11.5px
}

.ratio-donut>span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.ratio-donut b {
  font-size: .95rem
}

.ratio-donut small {
  color: var(--rt-text-muted);
  font-size: .48rem
}

.analytics-ratio li {
  height: 48px;
  display: grid;
  grid-template-columns: 13px 1fr;
  align-items: center;
  font-size: .52rem
}

.analytics-ratio li span,
.analytics-ratio li b {
  grid-column: 2
}

.analytics-ratio li b {
  margin-top: -18px
}

.analytics-ratio li.red {
  color: #ef3434
}

.analytics-best-bot {
  height: 185px
}

.analytics-best-bot h2 {
  text-align: center
}

.analytics-best-bot>div {
  height: 99px;
  display: grid;
  grid-template-columns: 71px 1fr 48px 62px;
  align-items: center;
  gap: 8px
}

.analytics-best-bot img {
  width: 66px;
  height: 66px;
  border: 1px solid #008fcf;
  border-radius: 50%;
  object-fit: cover
}

.analytics-best-bot>div>span {
  display: flex;
  flex-direction: column;
  gap: .3rem
}

.analytics-best-bot strong {
  font-size: .65rem;
  text-transform: uppercase;
  white-space: nowrap
}

.analytics-best-bot strong em {
  margin-left: .5rem;
  padding: .2rem .35rem;
  border-radius: 3px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
  font-size: .46rem;
  font-style: normal;
  text-transform: none
}

.analytics-best-bot small {
  color: var(--rt-text-muted);
  font-size: .47rem
}

.analytics-best-bot b {
  color: var(--rt-primary);
  font-size: .6rem
}

.analytics-best-bot>a {
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  font-size: .56rem;
  text-decoration: none
}

@media(max-width:1399.98px) {
  .analytics-grid {
    grid-template-columns: 1fr
  }

  .analytics-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .analytics-best-bot {
    height: 192px
  }
}

@media(max-width:767.98px) {
  .ba-analytics-page .page-content {
    padding: 16px
  }

  .ba-analytics-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .analytics-toolbar {
    height: auto;
    margin-bottom: 14px;
    gap: 10px;
    align-items: stretch;
    flex-direction: column
  }

  .analytics-toolbar nav {
    overflow-x: auto
  }

  .analytics-toolbar nav button {
    min-width: 105px
  }

  .analytics-export {
    align-self: flex-end
  }

  .analytics-kpis {
    height: auto;
    grid-template-columns: 1fr 1fr
  }

  .analytics-performance {
    height: auto;
    min-height: 308px;
    overflow-x: auto
  }

  .analytics-performance>header,
  .analytics-chart-legend,
  .analytics-performance-chart {
    min-width: 760px
  }

  .analytics-bottom {
    height: auto;
    grid-template-columns: 1fr
  }

  .analytics-bottom>.card {
    height: 282px
  }

  .analytics-pairs {
    overflow-x: auto
  }

  .analytics-pairs table,
  .analytics-pairs header,
  .analytics-pairs>a {
    min-width: 570px
  }

  .analytics-side {
    grid-template-columns: 1fr
  }

  .analytics-side>.card {
    height: auto;
    min-height: 186px
  }

  .analytics-best-bot>div {
    grid-template-columns: 71px 1fr 48px 62px
  }
}

/* Notifications workspace with category rail, inbox, and account controls. */
.ba-notifications-page {
  --rt-sidebar-width: 194px;
  --rt-header-h: 57px
}

.ba-notifications-page .page-content {
  padding: 0 18px 20px 0
}

.ba-notifications-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 66px;
  min-height: 66px;
  margin: 0 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .75rem 20px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .61rem
}

.notifications-shell {
  display: grid;
  grid-template-columns: 183px minmax(650px, 1fr) 336px;
  gap: 22px
}

.notifications-shell>* {
  min-width: 0
}

.notifications-rail {
  min-height: 881px;
  padding: 15px 5px;
  border-right: 1px solid var(--rt-border)
}

.notifications-rail a {
  height: 41px;
  padding: 0 11px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  border-radius: 5px;
  color: var(--rt-text);
  font-size: .59rem;
  text-decoration: none
}

.notifications-rail a.active {
  color: #fff;
  border-left: 2px solid var(--rt-primary);
  background: linear-gradient(90deg, #F90B0B, rgba(8, 118, 78, .28));
  box-shadow: 0 0 18px rgba(249, 11, 11, .08)
}

.notifications-rail a i {
  font-size: .67rem
}

.notifications-rail a b {
  min-width: 21px;
  padding: .13rem .35rem;
  border-radius: 10px;
  color: #fff;
  background: #F90B0B;
  font-size: .47rem;
  text-align: center
}

.notifications-main {
  padding-top: 16px
}

.notifications-heading {
  height: 66px;
  display: flex;
  justify-content: space-between
}

.notifications-heading h1 {
  margin: 0 0 .3rem;
  font-size: 1.16rem;
  text-transform: uppercase
}

.notifications-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .63rem
}

.notifications-heading>span {
  display: flex;
  gap: 10px
}

.notifications-heading button {
  height: 35px;
  padding: 0 .9rem;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  color: var(--rt-text);
  background: transparent;
  font-size: .55rem
}

.notifications-heading button i {
  margin-right: .45rem
}

.notification-tabs {
  height: 46px;
  display: flex;
  overflow-x: auto
}

.notification-tabs button {
  height: 34px;
  padding: 0 .85rem;
  border: 1px solid var(--rt-border);
  color: var(--rt-text);
  background: transparent;
  font-size: .53rem;
  white-space: nowrap
}

.notification-tabs button:first-child {
  border-radius: 5px 0 0 5px
}

.notification-tabs button:last-child {
  border-radius: 0 5px 5px 0
}

.notification-tabs button.active {
  color: #fff;
  background: #F90B0B;
  border-color: #F90B0B
}

.notification-list {
  overflow: hidden
}

.notification-row {
  height: 90px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 56px 1fr 75px 14px;
  align-items: center;
  border-bottom: 1px solid var(--rt-border)
}

.notification-row-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.08rem
}

.notification-row .tone-green,
.notification-types .tone-green {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .13)
}

.notification-row .tone-blue,
.notification-types .tone-blue {
  color: #168bff;
  background: rgba(22, 139, 255, .17)
}

.notification-row .tone-purple,
.notification-types .tone-purple {
  color: #9a50df;
  background: rgba(154, 80, 223, .18)
}

.notification-row .tone-orange,
.notification-types .tone-orange {
  color: #ff7b00;
  background: rgba(255, 123, 0, .18)
}

.notification-row .tone-red,
.notification-types .tone-red {
  color: #ff3535;
  background: rgba(255, 53, 53, .16)
}

.notification-row .tone-yellow,
.notification-types .tone-yellow {
  color: #ffc000;
  background: rgba(255, 192, 0, .17)
}

.notification-row .tone-gray,
.notification-types .tone-gray {
  color: #cbd2d6;
  background: rgba(203, 210, 214, .12)
}

.notification-row h2 {
  margin: 0 0 .35rem;
  font-size: .63rem
}

.notification-row p {
  margin: 0 0 .34rem;
  color: var(--rt-text);
  font-size: .59rem
}

.notification-row small {
  display: block;
  color: var(--rt-text-muted);
  font-size: .51rem;
  white-space: pre
}

.notification-row time {
  align-self: start;
  margin-top: 20px;
  color: var(--rt-text-muted);
  font-size: .49rem;
  text-align: right
}

.notification-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rt-primary)
}

.notification-read-icon {
  color: var(--rt-text);
  font-size: .65rem
}

.notification-list>footer {
  height: 33px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .5rem
}

.notification-list>footer nav {
  display: flex;
  gap: 7px
}

.notification-list>footer button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .5rem
}

.notification-list>footer button.active {
  color: #fff;
  background: #F90B0B
}

.notification-list>footer button:disabled {
  color: #35505f
}

.notifications-side {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px
}

.notifications-side>.card {
  padding: 16px
}

.notifications-side h2 {
  margin: 0;
  font-size: .71rem;
  text-transform: uppercase
}

.notification-overview {
  height: 225px;
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-template-rows: 42px 116px 43px
}

.notification-overview h2 {
  grid-column: 1/3
}

.notification-overview-ring {
  width: 112px;
  height: 112px;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(#16803C 0 25%, #168bff 25% 72%, #7c3fc9 72% 100%)
}

.notification-overview-ring:after {
  content: "";
  width: 91px;
  height: 91px;
  position: absolute;
  left: 10.5px;
  top: 10.5px;
  border-radius: 50%;
  background: var(--rt-card-bg)
}

.notification-overview-ring>span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.notification-overview-ring b {
  font-size: 1.1rem
}

.notification-overview-ring small {
  color: var(--rt-text-muted);
  font-size: .48rem
}

.notification-overview ul {
  margin: 0;
  padding: 5px 0 0;
  list-style: none
}

.notification-overview li {
  height: 31px;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  font-size: .54rem
}

.notification-overview li:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor
}

.notification-overview li.green {
  color: #16803C
}

.notification-overview li.blue {
  color: #168bff
}

.notification-overview li.purple {
  color: #7c3fc9
}

.notification-overview li span,
.notification-overview li b {
  color: var(--rt-text)
}

.notification-overview>button {
  grid-column: 1/3;
  height: 36px;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .56rem
}

.notification-overview>button i {
  margin-right: .55rem
}

.notification-types {
  height: 263px
}

.notification-types h2 {
  height: 34px
}

.notification-types>div {
  height: 26px;
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  font-size: .55rem
}

.notification-types>div i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .55rem
}

.notification-types>a {
  height: 37px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-primary);
  font-size: .55rem;
  text-decoration: none
}

.notification-preferences {
  height: 241px
}

.notification-preferences h2 {
  margin-bottom: .35rem
}

.notification-preferences>p {
  margin: 0 0 8px;
  color: var(--rt-text-muted);
  font-size: .52rem
}

.notification-preferences>a:not(.manage) {
  height: 40px;
  display: grid;
  grid-template-columns: 26px 1fr 30px 12px;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  color: var(--rt-text);
  font-size: .54rem;
  text-decoration: none
}

.notification-preferences>a>b {
  color: var(--rt-primary);
  font-weight: 400
}

.notification-preferences>a>i:last-child {
  color: var(--rt-text-muted);
  font-size: .48rem
}

.notification-preferences .manage {
  height: 36px;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  font-size: .54rem;
  text-decoration: none
}

.notification-help {
  height: 101px !important;
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  border-color: rgba(144, 71, 218, .35);
  background: linear-gradient(90deg, rgba(85, 39, 145, .2), rgba(85, 39, 145, .07))
}

.notification-help>i {
  color: #a251ec;
  font-size: 1.75rem
}

.notification-help>span {
  display: flex;
  flex-direction: column;
  gap: .3rem
}

.notification-help strong {
  font-size: .6rem
}

.notification-help small {
  color: var(--rt-text-muted);
  font-size: .52rem
}

.notification-help a {
  color: #a95af0;
  font-size: .55rem;
  text-decoration: none
}

.notification-help a i {
  margin-left: .55rem
}

@media(max-width:1399.98px) {
  .notifications-shell {
    grid-template-columns: 183px minmax(650px, 1fr)
  }

  .notifications-side {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .notification-help {
    height: 225px !important
  }

  .notification-help>i {
    align-self: start;
    margin-top: 1.5rem
  }
}

@media(max-width:767.98px) {
  .ba-notifications-page .page-content {
    padding: 0 16px 16px
  }

  .ba-notifications-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .notifications-shell {
    display: block
  }

  .notifications-rail {
    min-height: 0;
    padding: 10px 0;
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rt-border)
  }

  .notifications-rail a {
    min-width: 135px
  }

  .notifications-main {
    padding-top: 14px
  }

  .notifications-heading {
    height: auto;
    gap: 14px;
    flex-direction: column
  }

  .notifications-heading>span {
    padding: 12px 0
  }

  .notification-tabs {
    margin-bottom: 10px
  }

  .notification-list {
    height: auto;
    min-height: 753px
  }

  .notification-row {
    height: auto;
    min-height: 105px;
    padding: 12px;
    grid-template-columns: 48px 1fr 12px
  }

  .notification-row-icon {
    width: 40px;
    height: 40px
  }

  .notification-row time {
    grid-column: 2;
    grid-row: 2;
    margin: 5px 0 0;
    text-align: left
  }

  .notification-row>div {
    grid-column: 2
  }

  .notification-row>span,
  .notification-row>.notification-read-icon {
    grid-column: 3;
    grid-row: 1
  }

  .notification-row small {
    white-space: normal
  }

  .notification-list>footer {
    height: auto;
    min-height: 70px;
    padding: 10px;
    gap: 10px;
    align-items: flex-start;
    flex-direction: column
  }

  .notifications-side {
    padding-top: 14px;
    display: grid;
    grid-template-columns: 1fr
  }

  .notifications-side>.card {
    height: auto;
    min-height: 225px
  }

  .notification-help {
    min-height: 120px !important
  }
}

/* Profile identity, contact verification, and account summary workspace. */
.ba-profile-page {
  --rt-sidebar-width: 211px;
  --rt-header-h: 62px
}

.ba-profile-page .page-content {
  padding: 17px 20px 32px
}

.ba-profile-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 70px;
  min-height: 70px;
  margin: 0 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .75rem 20px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .61rem
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 453px;
  gap: 20px
}

.profile-grid>* {
  min-width: 0
}

.profile-main h2,
.profile-side h2 {
  margin: 0;
  font-size: .72rem;
  text-transform: uppercase
}

.profile-heading {
  height: 69px;
  padding-left: 9px
}

.profile-heading h1 {
  margin: 0 0 .25rem;
  font-size: 1.17rem;
  text-transform: uppercase
}

.profile-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .64rem
}

.profile-tabs {
  height: 54px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rt-border)
}

.profile-tabs button {
  height: 54px;
  border: 0;
  color: var(--rt-text);
  background: transparent;
  font-size: .59rem
}

.profile-tabs button.active {
  color: var(--rt-primary);
  border-bottom: 2px solid var(--rt-primary)
}

.profile-information {
  height: 431px;
  margin-top: 18px;
  padding: 0 20px 16px;
  display: grid;
  grid-template-columns: 185px 1fr;
  grid-template-rows: 45px 1fr 52px
}

.profile-information>header {
  grid-column: 1/3;
  display: flex;
  align-items: center
}

.profile-identity {
  display: flex;
  align-items: flex-start;
  flex-direction: column
}

.profile-photo-wrap {
  width: 126px;
  height: 126px;
  margin: 12px 0 13px 25px;
  position: relative
}

.profile-photo-wrap>img,
.profile-photo-wrap>.avatar {
  width: 126px;
  height: 126px;
  display: flex;
  border-radius: 50%;
  object-fit: cover;
  font-size: 2.75rem;
  color: #fff;
}

.profile-photo-wrap>button {
  width: 37px;
  height: 37px;
  position: absolute;
  right: -2px;
  bottom: 0;
  border: 1px solid var(--rt-border);
  border-radius: 50%;
  color: var(--rt-text);
  background: #0a1720
}

.profile-identity h3 {
  margin: 0 0 9px;
  font-size: .82rem
}

.profile-identity>b {
  padding: .25rem .45rem;
  border-radius: 3px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
  font-size: .5rem;
  font-weight: 500
}

.profile-identity p {
  margin: 11px 0 7px;
  color: var(--rt-text-muted);
  font-size: .52rem
}

.profile-identity small {
  font-size: .52rem
}

.profile-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px
}

.profile-field-grid label {
  height: 63px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--rt-text-muted);
  font-size: .54rem
}

.profile-field-grid label>strong {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  color: var(--rt-text);
  font-size: .61rem;
  font-weight: 400
}

.profile-field-grid label>strong.level i {
  margin-right: .5rem;
  color: #bd55ec
}

.profile-field-grid label>b {
  position: absolute;
  right: 3px;
  bottom: 7px;
  padding: .22rem .45rem;
  border-radius: 3px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .11);
  font-size: .48rem;
  font-weight: 400
}

.profile-field-grid label>i {
  position: absolute;
  right: 12px;
  bottom: 13px;
  color: var(--rt-text-muted);
  font-size: .57rem
}

.profile-information>footer {
  grid-column: 1/3;
  display: flex;
  align-items: end;
  gap: 13px
}

.profile-information>footer p {
  height: 52px;
  margin: 0;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex: 1;
  border: 1px solid rgba(249, 11, 11, .35);
  border-radius: 5px;
  color: var(--rt-text-muted);
  font-size: .53rem
}

.profile-information>footer p i {
  color: var(--rt-primary);
  font-size: .8rem
}

.profile-information>footer button {
  width: 114px;
  height: 34px;
  margin: 0 15px 9px 0;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #F90B0B;
  font-size: .55rem
}

.profile-contact {
  margin-top: 16px;
  padding: 0 20px
}

.profile-contact>header {
  height: 52px;
  display: flex;
  align-items: center
}

.profile-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px 20px
}

.profile-contact-grid>label {
  height: 61px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: end
}

.profile-contact-grid>label>i {
  margin-bottom: 14px;
  font-size: .85rem
}

.profile-contact-grid>label>span {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.profile-contact-grid small {
  color: var(--rt-text-muted);
  font-size: .52rem
}

.profile-contact-grid strong {
  height: 39px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  font-size: .59rem;
  font-weight: 400
}

.profile-contact-grid b,
.profile-contact-grid button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: .2rem .4rem;
  border: 0;
  border-radius: 3px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
  font-size: .47rem;
  font-weight: 400
}

.profile-contact-grid button {
  height: 27px;
  bottom: 6px;
  border: 1px solid var(--rt-border);
  color: var(--rt-text);
  background: transparent
}

.profile-contact-grid span>i {
  position: absolute;
  right: 15px;
  bottom: 14px;
  color: var(--rt-text-muted);
  font-size: .5rem
}

.profile-contact>a {
  height: 57px;
  margin-top: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  border-top: 1px solid var(--rt-border);
  color: var(--rt-text);
  font-size: .57rem;
  text-decoration: none
}

.profile-contact>a i:last-child {
  margin-left: .5rem
}

.profile-side {
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.profile-side>.card {
  padding: 18px 20px
}

.profile-overview {
  height: 346px
}

.profile-overview h2 {
  height: 42px
}

.profile-overview>div {
  height: 46px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  font-size: .57rem
}

.profile-overview>div:last-child {
  border-bottom: 0
}

.profile-overview>div>span {
  color: var(--rt-text-muted)
}

.profile-overview>div>b {
  font-size: .58rem
}

.profile-overview>div>a {
  margin-left: 50px;
  color: #13b7ff;
  font-size: .52rem;
  text-decoration: none
}

.profile-overview .active {
  padding: .3rem .65rem;
  border-radius: 4px;
  color: #FECACA;
  background: rgba(249, 11, 11, .13)
}

.profile-overview .level i {
  margin-right: .4rem;
  color: #bd55ec
}

.profile-overview .verified {
  color: var(--rt-primary)
}

.profile-overview .pending {
  color: #ffc000
}

.profile-actions {
  height: 230px
}

.profile-actions h2 {
  height: 39px
}

.profile-actions>a {
  height: 43px;
  display: grid;
  grid-template-columns: 38px 1fr 10px;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  color: var(--rt-text);
  font-size: .57rem;
  text-decoration: none
}

.profile-actions>a:last-child {
  border-bottom: 0
}

.profile-actions>a>i:first-child {
  font-size: .76rem
}

.profile-actions>a>i:last-child {
  color: var(--rt-text-muted);
  font-size: .5rem
}

.profile-activity {
  height: 224px
}

.profile-activity>header {
  height: 39px;
  display: flex;
  justify-content: space-between
}

.profile-activity>header span {
  font-size: .53rem
}

.profile-activity>div {
  height: 118px;
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.profile-activity>div>span {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-right: 1px solid var(--rt-border)
}

.profile-activity>div>span:last-child {
  border-right: 0
}

.profile-activity>div i {
  width: 37px;
  height: 37px;
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .92rem
}

.profile-activity .green i {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12)
}

.profile-activity .amber i {
  color: #ffae00;
  background: rgba(255, 174, 0, .12)
}

.profile-activity .blue i {
  color: #168bff;
  background: rgba(22, 139, 255, .12)
}

.profile-activity .purple i {
  color: #a44de5;
  background: rgba(164, 77, 229, .13)
}

.profile-activity>div b {
  font-size: .76rem
}

.profile-activity>div small {
  margin-top: .28rem;
  color: var(--rt-text-muted);
  font-size: .49rem
}

.profile-activity>a {
  height: 48px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 1.5rem;
  border-top: 1px solid var(--rt-border);
  color: var(--rt-primary);
  font-size: .55rem;
  text-decoration: none
}

@media(max-width:1399.98px) {
  .profile-grid {
    grid-template-columns: 1fr
  }

  .profile-side {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .profile-activity {
    height: 230px
  }
}

@media(max-width:767.98px) {
  .ba-profile-page .page-content {
    padding: 16px
  }

  .ba-profile-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .profile-tabs {
    display: flex;
    overflow-x: auto
  }

  .profile-tabs button {
    min-width: 160px
  }

  .profile-information {
    height: auto;
    display: block
  }

  .profile-information>header {
    height: 45px
  }

  .profile-identity {
    align-items: center
  }

  .profile-photo-wrap {
    margin-left: 0
  }

  .profile-field-grid {
    margin-top: 20px;
    grid-template-columns: 1fr
  }

  .profile-information>footer {
    margin-top: 18px;
    align-items: stretch;
    flex-direction: column
  }

  .profile-information>footer button {
    align-self: flex-end
  }

  .profile-contact {
    height: auto;
    min-height: 268px
  }

  .profile-contact-grid {
    grid-template-columns: 1fr
  }

  .profile-contact>a {
    margin-bottom: 10px
  }

  .profile-side {
    grid-template-columns: 1fr
  }

  .profile-side>.card {
    height: auto;
    min-height: 224px
  }

  .profile-overview {
    min-height: 346px
  }

  .profile-overview>div>a {
    margin-left: 15px
  }

  .profile-activity>div {
    overflow-x: auto
  }

  .profile-activity>div>span {
    min-width: 105px
  }
}

/* Security password, activity, session, and account protection workspace. */
.ba-security-page {
  --rt-sidebar-width: 208px;
  --rt-header-h: 60px
}

.ba-security-page .page-content {
  padding: 17px 25px 16px
}

.ba-security-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 70px;
  min-height: 70px;
  margin: 16px 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .75rem 20px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .61rem
}

.security-grid {
  display: grid;
  grid-template-columns: minmax(710px, 1fr) 446px;
  gap: 25px
}

.security-grid>* {
  min-width: 0
}

.security-main h2,
.security-side h2 {
  margin: 0;
  font-size: .7rem;
  text-transform: uppercase
}

.security-heading {
  height: 70px
}

.security-heading h1 {
  margin: 0 0 .25rem;
  font-size: 1.2rem;
  text-transform: uppercase
}

.security-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .64rem
}

.security-tabs {
  height: 54px;
  display: grid;
  grid-template-columns: 1.35fr 1.3fr .8fr .85fr;
  border-bottom: 1px solid var(--rt-border)
}

.security-tabs button {
  height: 54px;
  padding: 0;
  border: 0;
  color: var(--rt-text);
  background: transparent;
  font-size: .57rem
}

.security-tabs button.active {
  color: var(--rt-primary);
  border-bottom: 2px solid var(--rt-primary)
}

.security-password {
  margin-top: 16px;
  padding: 15px 24px
}

.security-password>header {
  height: 51px;
  display: grid;
  grid-template-columns: 45px 1fr auto;
  align-items: start
}

.security-password>header>span,
.security-summary>header>span {
  width: 41px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #F90B0B;
  border-radius: 50%;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .08);
  font-size: .87rem
}

.security-password>header h2 {
  margin: 4px 0 7px
}

.security-password>header p,
.security-summary>header p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .56rem
}

.security-password>header>b {
  margin-top: 2px;
  padding: .47rem .75rem;
  border-radius: 4px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .11);
  font-size: .55rem;
  font-weight: 500
}

.security-password-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px 28px
}

.security-password-fields>label {
  height: 65px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--rt-text-muted);
  font-size: .56rem
}

.security-password-input {
  position: relative
}

.security-password-input input {
  height: 41px;
  padding: 0 42px 0 12px;
  font-size: .59rem
}

.security-password-input button {
  width: 38px;
  height: 39px;
  position: absolute;
  right: 1px;
  top: 1px;
  border: 0;
  color: var(--rt-text);
  background: transparent;
  font-size: .62rem
}

.security-password-rules {
  height: 129px;
  padding: 4px 0 0 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid rgba(249, 11, 11, .65);
  font-size: .55rem
}

.security-password-rules strong {
  margin-bottom: 2px
}

.security-password-rules span {
  display: flex;
  align-items: center;
  gap: 9px
}

.security-password-rules i {
  color: var(--rt-primary);
  font-size: .62rem
}

.security-primary-button {
  width: 147px;
  height: 36px;
  margin-top: -15px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #F90B0B;
  font-size: .57rem;
  font-weight: 600
}

.security-summary {
  height: 263px;
  margin-top: 17px;
  padding: 13px 15px
}

.security-summary>header {
  height: 59px;
  display: grid;
  grid-template-columns: 45px 1fr;
  align-items: start
}

.security-summary>header>span {
  width: 41px;
  height: 41px
}

.security-summary>header h2 {
  margin: 5px 0 7px
}

.security-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px
}

.security-summary-grid article {
  height: 114px;
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rt-border);
  border-radius: 5px
}

.security-summary-grid article>span {
  color: var(--rt-text-muted);
  font-size: .54rem
}

.security-summary-grid article>strong {
  margin-top: 6px;
  color: var(--rt-primary);
  font-size: .72rem
}

.security-summary-grid article>i {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 11px;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #F90B0B;
  border-radius: 50%;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .08);
  font-size: .78rem
}

.security-summary-grid article>small {
  margin-top: auto;
  color: var(--rt-text);
  font-size: .5rem
}

.security-strength {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px
}

.security-strength b {
  height: 6px;
  border-radius: 2px;
  background: #F90B0B
}

.security-strength b:nth-child(-n+4) {
  background: #F90B0B
}

.security-summary-note {
  height: 40px;
  margin: 13px 0 0;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  font-size: .52rem
}

.security-summary-note i {
  color: var(--rt-primary);
  font-size: .72rem
}

.security-settings {
  height: 121px;
  margin-top: 17px;
  padding: 13px 15px
}

.security-settings>header {
  height: 35px;
  display: flex;
  align-items: flex-start;
  gap: 11px
}

.security-settings>header>span {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rt-text);
  background: rgba(255, 255, 255, .06);
  font-size: .65rem
}

.security-settings>header h2 {
  margin-top: 7px
}

.security-settings>div {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr
}

.security-settings article,
.security-settings a {
  height: 52px;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  border-right: 1px solid var(--rt-border);
  color: var(--rt-text);
  text-decoration: none
}

.security-settings a:last-child {
  border-right: 0
}

.security-settings article>i,
.security-settings a>i:first-child {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rt-border);
  border-radius: 5px;
  font-size: .78rem
}

.security-settings span {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.security-settings strong {
  font-size: .54rem
}

.security-settings small {
  color: var(--rt-text-muted);
  font-size: .43rem;
  white-space: nowrap
}

.security-settings a>i:last-child {
  font-size: .5rem
}

.security-switch {
  width: 36px;
  height: 19px;
  padding: 2px;
  border: 0;
  border-radius: 12px;
  background: #F90B0B
}

.security-switch b {
  width: 15px;
  height: 15px;
  display: block;
  margin-left: auto;
  border-radius: 50%;
  background: #fff
}

.security-side {
  padding-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.security-side>.card {
  padding: 0 16px
}

.security-side header {
  height: 47px;
  display: flex;
  align-items: center
}

.security-side header>a {
  margin-left: auto;
  color: #16b9ff;
  font-size: .52rem;
  text-decoration: none
}

.security-activity {
  height: 381px
}

.security-activity-head {
  height: 32px;
  display: grid;
  grid-template-columns: 1.55fr .85fr .75fr;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  font-size: .49rem
}

.security-activity>article {
  height: 52px;
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr .85fr .75fr;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  font-size: .52rem
}

.security-activity>article>span,
.security-activity time {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.security-activity>article small {
  color: var(--rt-text-muted);
  font-size: .49rem;
  font-weight: 400
}

.security-activity>article>b {
  position: absolute;
  left: 95px;
  top: 12px;
  padding: .16rem .38rem;
  border-radius: 3px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
  font-size: .45rem;
  font-weight: 400
}

.security-activity time {
  font-style: normal
}

.security-card-link {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  color: var(--rt-primary);
  font-size: .55rem;
  text-decoration: none
}

.security-sessions {
  height: 239px
}

.security-sessions>article {
  height: 52px;
  display: grid;
  grid-template-columns: 36px 1fr 84px 56px;
  align-items: center;
  border-bottom: 1px solid var(--rt-border)
}

.security-sessions>article>i {
  font-size: .72rem
}

.security-sessions>article>span,
.security-sessions time {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .52rem
}

.security-sessions>article small {
  color: var(--rt-text-muted);
  font-size: .48rem;
  font-weight: 400
}

.security-sessions>article span b {
  color: var(--rt-primary);
  font-size: .46rem;
  font-weight: 400
}

.security-sessions time {
  font-style: normal
}

.security-sessions time.active {
  grid-column: 3/5;
  color: var(--rt-primary);
  text-align: right
}

.security-sessions button {
  height: 27px;
  border: 1px solid #d61e26;
  border-radius: 4px;
  color: #ff3038;
  background: transparent;
  font-size: .48rem
}

.security-sessions .security-card-link {
  height: 35px
}

.security-tips {
  height: 197px
}

.security-tips header {
  gap: 10px
}

.security-tips header>span {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .1);
  font-size: .65rem
}

.security-tips ul {
  height: 111px;
  margin: 0;
  padding: 1px 0 0 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  list-style: none;
  color: var(--rt-text-muted);
  font-size: .51rem
}

.security-tips li {
  position: relative
}

.security-tips li:before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: -19px;
  top: 5px;
  border-radius: 50%;
  background: var(--rt-primary)
}

.security-tips .security-card-link {
  height: 38px;
  border-top: 1px solid var(--rt-border)
}

@media(max-width:1399.98px) {
  .security-grid {
    grid-template-columns: 1fr
  }

  .security-side {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .security-activity {
    grid-row: span 2;
    height: 455px
  }

  .security-activity>article {
    height: 66px
  }

  .security-tips {
    height: 200px
  }
}

@media(max-width:767.98px) {
  .ba-security-page .page-content {
    padding: 16px
  }

  .ba-security-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .security-tabs {
    display: flex;
    overflow-x: auto
  }

  .security-tabs button {
    min-width: 190px
  }

  .security-password {
    height: auto
  }

  .security-password>header {
    height: auto;
    min-height: 66px
  }

  .security-password-fields {
    grid-template-columns: 1fr
  }

  .security-password-rules {
    height: auto;
    min-height: 129px
  }

  .security-primary-button {
    margin-top: 15px
  }

  .security-summary {
    height: auto
  }

  .security-summary-grid {
    grid-template-columns: 1fr 1fr
  }

  .security-settings {
    height: auto
  }

  .security-settings>div {
    grid-template-columns: 1fr
  }

  .security-settings article,
  .security-settings a {
    border-right: 0;
    border-bottom: 1px solid var(--rt-border)
  }

  .security-side {
    grid-template-columns: 1fr
  }

  .security-activity {
    height: 455px
  }

  .security-sessions {
    height: 239px
  }

  .security-tips {
    height: 197px
  }
}

@media(max-width:479.98px) {
  .security-password>header {
    grid-template-columns: 45px 1fr
  }

  .security-password>header>b {
    display: none
  }

  .security-summary-grid {
    grid-template-columns: 1fr
  }

  .security-summary-grid article {
    height: 114px
  }

  .security-activity {
    overflow-x: auto
  }

  .security-activity>* {
    min-width: 400px
  }
}

/* Support Center topic discovery, ticket tracking, and direct-contact workspace. */
.ba-support-page {
  --rt-sidebar-width: 205px;
  --rt-header-h: 59px
}

.ba-support-page .page-content {
  padding: 16px 20px 16px 27px
}

.ba-support-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 61px;
  min-height: 61px;
  margin: 17px 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .7rem 20px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .6rem
}

.support-grid {
  display: grid;
  grid-template-columns: minmax(730px, 1fr) 388px;
  gap: 30px
}

.support-grid>* {
  min-width: 0
}

.support-main h2,
.support-side h2 {
  margin: 0;
  font-size: .68rem;
  text-transform: uppercase
}

.support-heading {
  height: 64px
}

.support-heading h1 {
  margin: 0 0 .28rem;
  font-size: 1.2rem;
  text-transform: uppercase
}

.support-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .61rem
}

.support-search {
  height: 39px;
  position: relative;
  display: block
}

.support-search>i {
  position: absolute;
  left: 14px;
  top: 13px;
  z-index: 1;
  color: var(--rt-text-muted);
  font-size: .62rem
}

.support-search input {
  height: 39px;
  padding-left: 39px;
  font-size: .58rem
}

.support-topics {
  margin-top: 27px
}

.support-topics>h2 {
  height: 28px;
  padding-left: 9px
}

.support-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 11px
}

.support-topic {
  height: 145px;
  padding: 17px 14px;
  display: grid;
  grid-template-columns: 39px 1fr;
  gap: 9px;
  border: 1px solid var(--rt-border);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(9, 29, 39, .55), rgba(5, 17, 25, .25))
}

.support-topic>i {
  font-size: 1.55rem
}

.support-topic h3 {
  margin: 1px 0 11px;
  font-size: .67rem
}

.support-topic p {
  height: 56px;
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .52rem;
  line-height: 1.55
}

.support-topic a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: currentColor;
  font-size: .52rem;
  text-decoration: none
}

.support-topic.tone-blue {
  color: #0ba4ff
}

.support-topic.tone-green {
  color: #16803C
}

.support-topic.tone-orange {
  color: #ff8b00
}

.support-topic.tone-purple {
  color: #a25ee6
}

.support-topic.tone-cyan {
  color: #F90B0B
}

.support-topic.tone-pink {
  color: #f04d75
}

.support-topic.tone-amber {
  color: #ffb100
}

.support-topic h3,
.support-topic p {
  color: var(--rt-text)
}

.support-topic p {
  color: var(--rt-text-muted)
}

.support-submit {
  height: 71px;
  margin-top: 20px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.support-submit h2 {
  margin-bottom: 8px
}

.support-submit p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .54rem
}

.support-submit button {
  height: 36px;
  padding: 0 17px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #F90B0B;
  font-size: .56rem;
  font-weight: 600
}

.support-submit button i {
  margin-right: 7px
}

.support-tickets {
  height: 312px;
  margin-top: 12px;
  overflow: hidden
}

.support-tickets>header {
  height: 37px;
  padding: 0 10px;
  display: flex;
  align-items: center
}

.support-tickets>nav {
  height: 39px;
  padding: 0 9px;
  display: flex;
  gap: 8px
}

.support-tickets>nav button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .52rem
}

.support-tickets>nav button.active {
  border-color: #F90B0B;
  background: #F90B0B
}

.support-ticket-table {
  height: 194px;
  border: 1px solid var(--rt-border);
  border-right: 0;
  border-left: 0
}

.support-ticket-head,
.support-ticket-table>article {
  display: grid;
  grid-template-columns: 125px 200px 136px 122px 188px 1fr;
  align-items: center
}

.support-ticket-head {
  height: 29px;
  padding: 0 11px;
  color: var(--rt-text-muted);
  font-size: .43rem;
  text-transform: uppercase
}

.support-ticket-table>article {
  height: 33px;
  padding: 0 11px;
  border-top: 1px solid var(--rt-border);
  font-size: .49rem
}

.support-ticket-table>article strong {
  font-size: .49rem
}

.support-ticket-table>article b {
  width: max-content;
  padding: .22rem .43rem;
  border-radius: 3px;
  font-size: .45rem;
  font-weight: 400
}

.support-ticket-table .open,
.support-ticket-table .resolved {
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12)
}

.support-ticket-table .awaiting {
  color: #ffae00;
  background: rgba(255, 174, 0, .12)
}

.support-ticket-table>article a {
  color: var(--rt-primary);
  text-decoration: none
}

.support-tickets>footer {
  height: 40px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rt-text-muted);
  font-size: .48rem
}

.support-tickets>footer nav {
  display: flex;
  gap: 7px
}

.support-tickets>footer button {
  width: 29px;
  height: 29px;
  border: 1px solid var(--rt-border);
  border-radius: 4px;
  color: var(--rt-text);
  background: transparent;
  font-size: .48rem
}

.support-tickets>footer button.active {
  color: #fff;
  background: #F90B0B
}

.support-tickets>footer button:disabled {
  color: #39505c
}

.support-side {
  display: flex;
  flex-direction: column;
  gap: 15px
}

.support-side>.card {
  padding: 0 18px
}

.support-contact {
  height: 310px
}

.support-contact>header {
  height: 67px;
  padding-top: 18px
}

.support-contact>header p {
  margin: 8px 0 0;
  color: var(--rt-text-muted);
  font-size: .53rem
}

.support-contact>article {
  height: 65px;
  display: grid;
  grid-template-columns: 41px 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--rt-border)
}

.support-contact>article>i {
  color: var(--rt-primary);
  font-size: 1.2rem
}

.support-contact>article span {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.support-contact>article strong {
  font-size: .57rem
}

.support-contact>article small {
  color: var(--rt-text-muted);
  font-size: .5rem
}

.support-contact>article a,
.support-contact>article button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #F90B0B;
  border-radius: 5px;
  color: var(--rt-primary);
  background: transparent;
  font-size: .51rem;
  text-decoration: none
}

.support-contact>article a {
  display: flex;
  align-items: center
}

.support-contact>p {
  height: 46px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--rt-text-muted);
  font-size: .52rem
}

.support-contact>p i {
  font-size: .7rem
}

.support-articles {
  height: 280px
}

.support-articles>header {
  height: 48px;
  display: flex;
  align-items: center
}

.support-articles>a:not(.support-card-link) {
  height: 37px;
  display: grid;
  grid-template-columns: 28px 1fr 10px;
  align-items: center;
  border-bottom: 1px solid var(--rt-border);
  color: var(--rt-text);
  font-size: .51rem;
  text-decoration: none
}

.support-articles>a>i:first-child {
  font-size: .6rem
}

.support-articles>a>i:last-child {
  color: var(--rt-text-muted);
  font-size: .47rem
}

.support-card-link {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  color: var(--rt-primary);
  font-size: .53rem;
  text-decoration: none
}

.support-hours {
  height: 108px;
  padding: 17px 21px !important;
  display: grid;
  grid-template-columns: 44px 1fr
}

.support-hours>i {
  color: var(--rt-primary);
  font-size: 1.35rem
}

.support-hours h2 {
  margin: 2px 0 8px
}

.support-hours p {
  margin: 0 0 17px;
  color: var(--rt-text-muted);
  font-size: .51rem
}

.support-hours span {
  display: flex;
  justify-content: space-between;
  font-size: .51rem
}

.support-hours b {
  padding: .2rem .45rem;
  border-radius: 3px;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .12);
  font-size: .46rem
}

.support-community {
  height: 129px;
  padding: 18px !important;
  border-color: rgba(130, 71, 213, .25) !important;
  background: linear-gradient(110deg, rgba(69, 36, 125, .2), rgba(20, 22, 64, .32)) !important
}

.support-community h2 {
  margin-bottom: 8px
}

.support-community p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .51rem
}

.support-community nav {
  margin-top: 13px;
  display: flex;
  gap: 15px
}

.support-community a {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 50%;
  color: var(--rt-text);
  background: rgba(255, 255, 255, .04);
  font-size: .9rem;
  text-decoration: none
}

.support-community a:first-child {
  color: #14adff
}

.support-community a:nth-child(2) {
  color: #1e8fff
}

.support-community a:nth-child(3) {
  color: #F90B0B
}

@media(max-width:1399.98px) {
  .support-grid {
    grid-template-columns: 1fr
  }

  .support-side {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .support-contact {
    grid-row: span 2;
    height: 403px
  }

  .support-contact>article {
    height: 82px
  }

  .support-articles {
    height: 280px
  }

  .support-community {
    height: 108px
  }
}

@media(max-width:991.98px) {
  .support-topic-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .support-ticket-table {
    overflow-x: auto
  }

  .support-ticket-head,
  .support-ticket-table>article {
    min-width: 860px
  }
}

@media(max-width:767.98px) {
  .ba-support-page .page-content {
    padding: 16px
  }

  .ba-support-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .support-topic-grid {
    grid-template-columns: 1fr
  }

  .support-topic {
    height: auto;
    min-height: 145px
  }

  .support-submit {
    height: auto;
    min-height: 105px;
    gap: 15px;
    align-items: flex-start;
    flex-direction: column;
    padding: 18px
  }

  .support-tickets {
    height: 312px
  }

  .support-tickets>nav {
    overflow-x: auto
  }

  .support-tickets>nav button {
    min-width: max-content
  }

  .support-side {
    grid-template-columns: 1fr
  }

  .support-contact {
    height: 310px
  }

  .support-community {
    height: 129px
  }
}

/* Risk Disclosure acknowledgement, guidance, and policy workspace. */
.ba-disclosure-page {
  --rt-sidebar-width: 205px;
  --rt-header-h: 60px
}

.ba-disclosure-page .page-content {
  padding: 17px 25px 0 26px
}

.ba-disclosure-page .app-footer {
  width: calc(100% + var(--rt-sidebar-width));
  height: 60px;
  min-height: 60px;
  margin: 16px 0 0 calc(var(--rt-sidebar-width) * -1);
  padding: .7rem 20px;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  font-size: .6rem
}

.disclosure-grid {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 398px;
  gap: 26px
}

.disclosure-grid>* {
  min-width: 0
}

.disclosure-main h2,
.disclosure-side h2 {
  margin: 0;
  font-size: .69rem
}

.disclosure-heading {
  height: 65px
}

.disclosure-heading h1 {
  margin: 0 0 .3rem;
  font-size: 1.2rem;
  text-transform: uppercase
}

.disclosure-heading p {
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .62rem
}

.disclosure-warning {
  height: 71px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 43px 1fr;
  align-items: center;
  border: 1px solid rgba(207, 130, 0, .43);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(133, 75, 0, .14), rgba(62, 40, 0, .08))
}

.disclosure-warning>i {
  color: #f39a00;
  font-size: 1.3rem
}

.disclosure-warning>span {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.disclosure-warning strong {
  font-size: .61rem
}

.disclosure-warning small {
  color: var(--rt-text-muted);
  font-size: .54rem
}

.disclosure-risks {
  height: 629px;
  margin-top: 17px;
  overflow: hidden
}

.disclosure-risks>article {
  height: 89.8px;
  padding: 0 19px 0 17px;
  display: grid;
  grid-template-columns: 78px 1fr 25px;
  align-items: center;
  border-bottom: 1px solid var(--rt-border)
}

.disclosure-risks>article:last-child {
  border-bottom: 0
}

.disclosure-risks>article>i {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(249, 11, 11, .08);
  border-radius: 50%;
  color: var(--rt-primary);
  background: rgba(249, 11, 11, .08);
  font-size: 1.25rem
}

.disclosure-risks h2 {
  margin-bottom: 7px
}

.disclosure-risks p {
  max-width: 695px;
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .55rem;
  line-height: 1.55
}

.disclosure-risks button {
  width: 25px;
  height: 35px;
  padding: 0;
  border: 0;
  color: var(--rt-text);
  background: transparent;
  font-size: .52rem
}

.disclosure-accept {
  height: 71px;
  margin-top: 17px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.disclosure-accept label {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer
}

.disclosure-accept input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.disclosure-accept label>span {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #71818a;
  border-radius: 4px;
  color: transparent;
  font-size: .65rem
}

.disclosure-accept input:checked+span {
  border-color: var(--rt-primary);
  color: #00140e;
  background: var(--rt-primary)
}

.disclosure-accept input:focus-visible+span {
  outline: 2px solid #fff;
  outline-offset: 2px
}

.disclosure-accept label>b {
  font-size: .56rem;
  font-weight: 400
}

.disclosure-accept>button {
  width: 149px;
  height: 38px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #F90B0B;
  font-size: .61rem;
  font-weight: 600
}

.disclosure-side {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.disclosure-side>.card {
  padding: 18px
}

.disclosure-side h2 {
  text-transform: uppercase
}

.disclosure-summary {
  height: 186px;
  display: grid;
  grid-template-columns: 116px 1fr;
  grid-template-rows: 31px 1fr;
  gap: 0 17px
}

.disclosure-summary h2 {
  grid-column: 1/3
}

.disclosure-risk-ring {
  width: 114px;
  height: 114px;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(#de8d0a 0 39%, #f03712 39% 75%, #bd6508 75% 100%)
}

.disclosure-risk-ring:after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--rt-card-bg)
}

.disclosure-risk-ring span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .83rem;
  line-height: 1.2;
  text-align: center
}

.disclosure-summary p {
  margin: 10px 0 0;
  color: var(--rt-text-muted);
  font-size: .56rem;
  line-height: 1.55
}

.disclosure-summary p strong {
  display: block;
  margin-top: 16px;
  color: #ff352d;
  font-size: .58rem
}

.disclosure-practices {
  height: 214px
}

.disclosure-practices h2 {
  height: 39px
}

.disclosure-practices ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none
}

.disclosure-practices li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--rt-text-muted);
  font-size: .55rem
}

.disclosure-practices li i {
  color: var(--rt-primary);
  font-size: .72rem
}

.disclosure-help {
  height: 168px
}

.disclosure-help h2 {
  margin-bottom: 11px
}

.disclosure-help p {
  height: 48px;
  margin: 0;
  color: var(--rt-text-muted);
  font-size: .56rem;
  line-height: 1.5
}

.disclosure-help a {
  height: 48px;
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #F90B0B;
  border-radius: 4px;
  color: var(--rt-primary);
  font-size: .6rem;
  text-decoration: none
}

.disclosure-links {
  height: 204px
}

.disclosure-links h2 {
  height: 37px
}

.disclosure-links a {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rt-border);
  color: var(--rt-text-muted);
  font-size: .56rem;
  text-decoration: none
}

.disclosure-links a:last-child {
  border-bottom: 0
}

.disclosure-links i {
  font-size: .57rem
}

@media(max-width:1399.98px) {
  .disclosure-grid {
    grid-template-columns: 1fr
  }

  .disclosure-side {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .disclosure-side>.card {
    height: auto;
    min-height: 186px
  }
}

@media(max-width:767.98px) {
  .ba-disclosure-page .page-content {
    padding: 16px
  }

  .ba-disclosure-page .app-footer {
    width: 100%;
    height: 56px;
    min-height: 56px;
    margin-left: 0
  }

  .disclosure-warning {
    height: auto;
    min-height: 85px
  }

  .disclosure-risks {
    height: auto
  }

  .disclosure-risks>article {
    height: auto;
    min-height: 118px;
    grid-template-columns: 58px 1fr 18px;
    padding: 14px
  }

  .disclosure-risks>article>i {
    width: 45px;
    height: 45px;
    font-size: 1rem
  }

  .disclosure-accept {
    height: auto;
    min-height: 125px;
    gap: 20px;
    align-items: stretch;
    flex-direction: column;
    padding: 18px
  }

  .disclosure-accept>button {
    align-self: flex-end
  }

  .disclosure-side {
    grid-template-columns: 1fr
  }
}

/* Reusable transactional-email desktop/mobile preview and design guide. */
.ba-email-preview-page {
  min-width: 320px;
  margin: 0;
  color: #fff;
  background: #030b11;
  font-family: "DM Sans", Arial, sans-serif
}

.email-preview-layout {
  min-height: 1024px;
  padding: 1px 8px 7px;
  position: relative;
  display: grid;
  grid-template-columns: 309px 807px 316px;
  gap: 22px;
  background: radial-gradient(circle at 55% 32%, rgba(249, 11, 11, .025), transparent 31%), #030b11
}

.email-guide {
  height: 1016px;
  padding: 25px 24px;
  border: 1px solid #18303c;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(7, 23, 31, .95), rgba(4, 16, 23, .76))
}

.email-guide h1 {
  margin: 0 0 7px;
  font-family: Outfit, "DM Sans", sans-serif;
  font-size: 1.13rem;
  text-transform: uppercase
}

.email-guide header>p,
.email-guide section>p {
  margin: 0;
  color: #bac5cc;
  font-size: .61rem;
  line-height: 1.55
}

.email-guide h2,
.email-best-practices h2 {
  margin: 0;
  color: #F90B0B;
  font-size: .62rem;
  text-transform: uppercase
}

.email-guide section {
  border-bottom: 1px solid #18303c
}

.email-guide-usage {
  height: 452px;
  padding-top: 35px
}

.email-guide-usage>p {
  margin: 14px 0 10px !important
}

.email-guide ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.email-guide li {
  height: 33px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  font-size: .59rem
}

.email-guide li i {
  color: #F90B0B;
  font-size: .75rem
}

.email-guide-system {
  height: 207px;
  padding-top: 20px
}

.email-guide-system h2 {
  height: 27px
}

.email-guide-system>div {
  height: 29px;
  display: grid;
  grid-template-columns: 39px 82px 1fr;
  align-items: center
}

.email-guide-system strong {
  font-size: .58rem
}

.email-guide-system span {
  color: #99a8b1;
  font-size: .49rem
}

.email-swatch {
  width: 23px;
  height: 23px;
  display: block;
  border: 1px solid #213440;
  border-radius: 4px
}

.email-swatch.green {
  background: #F90B0B
}

.email-swatch.dark {
  background: #0d1117
}

.email-swatch.card {
  background: #1a1f2b
}

.email-swatch.muted {
  background: #cbd5e1
}

.email-swatch.white {
  background: #fff
}

.email-guide-type {
  height: 129px;
  padding-top: 20px
}

.email-guide-type h2 {
  margin-bottom: 13px
}

.email-guide-type p {
  margin-bottom: 9px !important;
  color: #fff !important
}

.email-guide-social {
  padding-top: 20px;
  border-bottom: 0 !important
}

.email-guide-social h2 {
  margin-bottom: 21px
}

.email-guide-social nav,
.email-message-footer nav,
.email-mobile-footer nav {
  display: flex;
  gap: 12px
}

.email-guide-social a,
.email-message-footer nav a,
.email-mobile-footer nav a {
  width: 41px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #172c37;
  border-radius: 50%;
  color: #fff;
  background: #0c1922;
  font-size: 1rem;
  text-decoration: none
}

.email-desktop-stage {
  min-width: 700px;
  padding-top: 46px;
  position: relative
}

.email-preview-tabs {
  height: 37px;
  position: absolute;
  left: 48.5%;
  top: 7px;
  display: flex;
  transform: translateX(-50%);
  border: 1px solid #152b36;
  border-radius: 7px;
  overflow: hidden
}

.email-preview-tabs button {
  height: 35px;
  padding: 0 17px;
  border: 0;
  color: #8e9ba4;
  background: #08121a;
  font-size: .56rem
}

.email-preview-tabs button.active {
  color: #F90B0B;
  background: #0d2423
}

.email-shell {
  width: 700px;
  margin: 0 0 0 50px;
  border: 1px solid #19313d;
  border-radius: 8px;
  overflow: hidden;
  background: #06121a
}

.email-shell-desktop {
  height: 862px
}

.email-message-header {
  height: 67px;
  padding: 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #172b36
}

.email-message-header>a:last-child {
  color: #fff;
  font-size: .53rem;
  text-decoration: none
}

.email-brand {
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none
}

.email-brand img {
  width: 30px;
  height: 30px;
  margin-right: 8px
}

.email-brand strong {
  font-family: Outfit, "DM Sans", sans-serif;
  font-size: .86rem
}

.email-brand strong span {
  color: #F90B0B
}

.email-message-hero {
  height: 267px;
  padding: 35px 40px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 280px;
  overflow: hidden;
  background: radial-gradient(circle at 68% 52%, rgba(249, 11, 11, .18), transparent 37%), radial-gradient(circle at 38% 60%, rgba(249, 11, 11, .06), transparent 28%)
}

.email-message-hero:after {
  content: "";
  width: 300px;
  height: 180px;
  position: absolute;
  right: 25px;
  bottom: -50px;
  border-radius: 50%;
  background-image: radial-gradient(rgba(249, 11, 11, .2) 1px, transparent 1px);
  background-size: 9px 9px;
  transform: rotate(-8deg)
}

.email-message-hero>div {
  z-index: 2
}

.email-message-hero h2 {
  margin: 3px 0 14px;
  font-family: Outfit, "DM Sans", sans-serif;
  font-size: 1.38rem
}

.email-message-hero p {
  max-width: 340px;
  margin: 0 0 22px;
  color: #c6d0d6;
  font-size: .73rem;
  line-height: 1.65
}

.email-message-hero a {
  width: 186px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #fff;
  background: #F90B0B;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .65rem;
  font-weight: 600;
  text-decoration: none
}

.email-message-hero>img {
  width: 235px;
  height: 235px;
  z-index: 1;
  align-self: center;
  justify-self: center;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(249, 11, 11, .12))
}

.email-transaction {
  height: 339px;
  padding: 0 20px 11px
}

.email-transaction>h3 {
  height: 47px;
  margin: 0;
  padding: 19px 12px 0;
  border: 1px solid #17303c;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: #F90B0B;
  font-size: .57rem;
  text-transform: uppercase
}

.email-transaction>div {
  height: 36px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 34px 1fr 225px;
  align-items: center;
  border-right: 1px solid #17303c;
  border-bottom: 1px solid #17303c;
  border-left: 1px solid #17303c;
  color: #bec9cf;
  font-size: .57rem
}

.email-transaction>div>i {
  color: #F90B0B
}

.email-transaction>div>strong {
  font-weight: 400
}

.email-transaction .amount {
  color: #fff
}

.email-transaction .status {
  width: max-content;
  padding: .19rem .4rem;
  border-radius: 3px;
  color: #F90B0B;
  background: rgba(249, 11, 11, .12);
  font-size: .5rem
}

.email-transaction>p {
  height: 74px;
  margin: 0;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  border: 1px solid #203a48;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  color: #fff;
  font-size: .57rem;
  line-height: 1.6
}

.email-transaction>p>i {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #F90B0B;
  background: rgba(249, 11, 11, .12);
  font-size: 1rem
}

.email-message-footer {
  height: 188px;
  padding: 14px 38px 0;
  border-top: 1px solid #172c37;
  background: #06121a
}

.email-footer-brand {
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #172c37
}

.email-message-footer nav a {
  width: 31px;
  height: 31px;
  font-size: .67rem
}

.email-message-footer>p {
  margin: 12px 0 10px;
  color: #8f9ca5;
  font-size: .54rem
}

.email-footer-contact {
  height: 31px;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #172c37
}

.email-footer-contact>* {
  padding: 0 18px;
  border-right: 1px solid #42505a;
  color: #c0c9cf;
  font-size: .5rem;
  text-decoration: none
}

.email-footer-contact>*:first-child {
  padding-left: 0
}

.email-footer-contact>*:last-child {
  border-right: 0
}

.email-footer-contact i {
  margin-right: 9px;
  color: #F90B0B
}

.email-footer-legal {
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #75838c;
  font-size: .48rem
}

.email-footer-legal nav {
  gap: 10px
}

.email-footer-legal nav a {
  width: auto;
  height: auto;
  border: 0;
  color: #87949c;
  background: transparent;
  font-size: .48rem
}

.email-footer-legal b {
  font-weight: 400
}

.email-mobile-stage {
  height: 937px;
  padding: 12px 14px;
  border: 1px solid #152b36;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(7, 23, 31, .96), rgba(4, 16, 23, .84))
}

.email-mobile-stage>h2 {
  height: 31px;
  margin: 0;
  color: #F90B0B;
  font-size: .57rem;
  text-align: center
}

.email-mobile-shell {
  height: 668px;
  border: 1px solid #19313d;
  border-radius: 7px;
  overflow: hidden;
  background: #07141c
}

.email-mobile-shell .email-message-header {
  height: 48px;
  padding: 0 14px
}

.email-mobile-shell .email-brand img {
  width: 23px;
  height: 23px;
  margin-right: 5px
}

.email-mobile-shell .email-brand strong {
  font-size: .57rem
}

.email-mobile-shell .email-message-header>a:last-child {
  font-size: .34rem
}

.email-mobile-hero {
  height: 286px;
  padding: 8px 14px 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column
}

.email-mobile-hero>img {
  width: 133px;
  height: 133px;
  align-self: center;
  object-fit: contain
}

.email-mobile-hero h3 {
  margin: 2px 0 9px;
  font-family: Outfit, "DM Sans", sans-serif;
  font-size: .91rem
}

.email-mobile-hero p {
  margin: 0 0 10px;
  color: #d0d8dd;
  font-size: .53rem;
  line-height: 1.55
}

.email-mobile-hero>a {
  width: 100%;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: #fff;
  background: #F90B0B;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .5rem;
  font-weight: 600;
  text-decoration: none
}

.email-mobile-transaction {
  height: 323px;
  margin: 0 12px;
  padding: 0 9px;
  border: 1px solid #18313d;
  border-radius: 6px
}

.email-mobile-transaction>h3 {
  height: 39px;
  margin: 0;
  padding-top: 13px;
  border-bottom: 1px solid #203540;
  color: #F90B0B;
  font-size: .46rem;
  text-transform: uppercase
}

.email-mobile-transaction>div {
  height: 38px;
  display: grid;
  grid-template-columns: 25px 1fr;
  align-items: center;
  border-bottom: 1px solid #203540
}

.email-mobile-transaction>div>i {
  color: #F90B0B;
  font-size: .55rem
}

.email-mobile-transaction span {
  display: flex;
  flex-direction: column
}

.email-mobile-transaction b {
  color: #9ca9b1;
  font-size: .39rem;
  font-weight: 400
}

.email-mobile-transaction small {
  color: #d4dce1;
  font-size: .38rem
}

.email-mobile-transaction small.amount {
  color: #F90B0B
}

.email-mobile-transaction small.status {
  width: max-content;
  padding: .11rem .3rem;
  border-radius: 2px;
  color: #F90B0B;
  background: rgba(249, 11, 11, .12)
}

.email-mobile-transaction>p {
  height: 74px;
  margin: 0;
  display: grid;
  grid-template-columns: 37px 1fr;
  align-items: center;
  color: #fff;
  font-size: .43rem;
  line-height: 1.55
}

.email-mobile-transaction>p i {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #F90B0B;
  background: rgba(249, 11, 11, .12)
}

.email-mobile-footer {
  height: 208px;
  margin-top: 9px;
  padding: 14px 18px;
  border: 1px solid #19313d;
  border-radius: 7px;
  color: #bec7cd;
  font-size: .42rem
}

.email-mobile-footer>p {
  margin: 0 0 9px
}

.email-mobile-footer>a,
.email-mobile-footer>span {
  height: 23px;
  display: flex;
  align-items: center;
  color: #d0d7dc;
  text-decoration: none
}

.email-mobile-footer>a i,
.email-mobile-footer>span i {
  width: 25px;
  color: #F90B0B
}

.email-mobile-footer nav {
  height: 45px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #1a303a
}

.email-mobile-footer nav a {
  width: 29px;
  height: 29px;
  font-size: .6rem
}

.email-mobile-footer>div {
  margin: 10px 0;
  color: #77858e
}

.email-mobile-footer>small {
  display: flex;
  gap: 8px;
  color: #71808a;
  font-size: .37rem
}

.email-mobile-footer>small a {
  color: #71808a;
  text-decoration: none
}

.email-mobile-footer>small b {
  font-weight: 400
}

.email-best-practices {
  height: 81px;
  position: absolute;
  left: 340px;
  bottom: 7px;
  width: 912px;
  padding: 11px 18px;
  border: 1px solid #1c3440;
  border-radius: 7px;
  background: #07141c
}

.email-best-practices h2 {
  height: 21px
}

.email-best-practices>div {
  display: grid;
  grid-template-columns: repeat(6, 1fr)
}

.email-best-practices article {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  color: #c5ced4;
  font-size: .49rem
}

.email-best-practices article>i {
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #F90B0B;
  background: rgba(249, 11, 11, .08);
  font-size: .7rem
}

@media(max-width:1491.98px) {
  .email-preview-layout {
    grid-template-columns: 270px minmax(700px, 1fr)
  }

  .email-guide {
    grid-row: 1/3
  }

  .email-mobile-stage {
    grid-column: 2;
    width: 316px;
    margin: 22px auto 100px
  }

  .email-best-practices {
    left: 292px;
    right: 8px;
    width: auto
  }

  .email-preview-layout {
    min-height: 1990px
  }

  .email-guide {
    height: 1016px;
    position: sticky;
    top: 0
  }

  .email-shell {
    margin: 0 auto
  }
}

@media(max-width:991.98px) {
  .email-preview-layout {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 12px;
    gap: 20px
  }

  .email-guide {
    width: min(700px, 100%);
    height: auto;
    position: static
  }

  .email-guide-usage,
  .email-guide-system,
  .email-guide-type {
    height: auto;
    padding-bottom: 20px
  }

  .email-desktop-stage {
    width: 100%;
    min-width: 0
  }

  .email-shell {
    width: min(700px, 100%);
    height: auto;
    margin: 0 auto
  }

  .email-shell-desktop {
    min-height: 862px
  }

  .email-message-hero {
    grid-template-columns: 1fr 230px
  }

  .email-mobile-stage {
    width: 316px;
    margin: 0
  }

  .email-best-practices {
    width: min(700px, 100%);
    height: auto;
    position: static
  }

  .email-best-practices>div {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
  }

  .email-best-practices article {
    min-height: 40px
  }
}

@media(max-width:575.98px) {
  .email-preview-tabs {
    display: none
  }

  .email-desktop-stage {
    padding-top: 0
  }

  .email-message-header {
    padding: 0 15px
  }

  .email-message-hero {
    height: auto;
    grid-template-columns: 1fr;
    padding: 22px
  }

  .email-message-hero>img {
    grid-row: 1;
    width: 180px;
    height: 180px
  }

  .email-message-hero h2 {
    font-size: 1.08rem
  }

  .email-transaction {
    height: auto;
    padding: 12px
  }

  .email-transaction>div {
    grid-template-columns: 27px 1fr auto
  }

  .email-message-footer {
    height: auto;
    padding: 15px
  }

  .email-footer-brand,
  .email-footer-contact,
  .email-footer-legal {
    height: auto;
    gap: 12px;
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 0
  }

  .email-footer-contact>* {
    padding: 0;
    border-right: 0
  }

  .email-mobile-stage {
    width: min(316px, 100%)
  }

  .email-best-practices>div {
    grid-template-columns: 1fr
  }
}

/* Phone Deposit FAB: soft brand pulse (respect reduced motion) */
@keyframes ba-mobile-deposit-fab-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(249, 11, 11, 0.35);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 6px 22px rgba(249, 11, 11, 0.55);
  }
}

.ba-mobile-deposit-fab {
  animation: ba-mobile-deposit-fab-pulse 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ba-mobile-deposit-fab {
    animation: none !important;
  }
}

/* Trade desks: ticket keeps contract tabs + AUTO TRADE in view while the controls scroll */
@media (min-width: 992px) {

  /* clip, not hidden: overflow-x:hidden forces overflow-y:auto, which breaks sticky children */
  body.trade-rail .app-main {
    overflow-x: clip;
  }

  #baTradeTicket {
    position: sticky;
    top: calc(var(--rt-header-h) + .5rem);
    max-height: calc(100vh - var(--rt-header-h) - 1rem);
  }

  #baTradeTicket>#baTicketBody {
    min-height: 0;
    overflow-y: auto;
  }

  /* One screen: the document does not scroll. The ticket scrolls only if its controls do not fit. */
  html:has(body.trade-rail) {
    height: 100dvh;
    overflow: hidden;
  }

  body.trade-rail {
    height: 100dvh;
    overflow: hidden;
  }

  body.trade-rail .app-wrapper,
  body.trade-rail .app-content {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.trade-rail .app-content {
    margin-bottom: 0;
  }

  body.trade-rail .app-footer {
    display: none;
  }

  body.trade-rail .app-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* 12px matches the sidebar and header inset. !important beats the phone FAB's pb-5. */
    padding: 12px 0 !important;
  }

  body.trade-rail .page-content,
  body.trade-rail #baBinaryDesk,
  body.trade-rail #baCryptoDesk {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.trade-rail #baBinaryDesk > .row.g-2,
  body.trade-rail #baCryptoDesk > .row.g-2 {
    flex: 1 1 0;
    min-height: 0 !important;
    height: 100%;
    overflow: hidden;
    --bs-gutter-x: 12px;
    --bs-gutter-y: 0;
    margin-top: 0;
  }

  body.trade-rail #baBinaryDesk > .row.g-2 > [class*="col-"],
  body.trade-rail #baCryptoDesk > .row.g-2 > [class*="col-"] {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body.trade-rail #baBinaryDesk #baTradeChartFocus,
  body.trade-rail #baCryptoDesk #baTradeChartFocus,
  body.trade-rail #baTradeTicket {
    margin-bottom: 0 !important;
  }

  body.trade-rail #baBinaryDesk #baTradeChartFocus,
  body.trade-rail #baCryptoDesk #baTradeChartFocus {
    flex: 1 1 0;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }

  body.trade-rail #baBinaryDesk .binary-chart-host,
  body.trade-rail #baCryptoDesk .crypto-chart-host {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  /* Pair list stays a short strip so the crypto plot uses the rest of the column. */
  body.trade-rail #baCryptoDesk #baMarketsDesktopSlot {
    flex: 0 0 auto;
    max-height: 13.5rem;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Crypto plot sits under a toolbar, so the card has to be a column or the host collapses. */
  body.trade-rail #baCryptoDesk #baTradeChartFocus > .card-body.border-bottom,
  body.trade-rail #baCryptoDesk #baTradeChartFocus .crypto-chart-meta,
  body.trade-rail #baCryptoDesk #baDigitRow {
    flex: 0 0 auto;
  }

  body.trade-rail #baCryptoDesk #baTradeChartFocus > .card-body.p-0,
  body.trade-rail #baCryptoDesk #baTradeChartFocus .position-relative.overflow-hidden {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.trade-rail #baCryptoDesk #baMarketsCard {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    margin-bottom: 0 !important;
    overflow: hidden;
  }

  body.trade-rail #baCryptoDesk #baMarketsCard .table-responsive {
    max-height: none !important;
    min-height: 0;
  }

  body.trade-rail #baTradeTicket {
    position: relative;
    top: auto;
    max-height: 100%;
    min-height: 0;
    flex: 1 1 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.trade-rail #baTradeTicket > #baTicketHead {
    flex: 0 0 auto;
  }

  body.trade-rail #baTradeTicket > #baTicketBody {
    flex: 1 1 auto;
    overflow-y: auto;
  }
}

#baAiScanModal .ba-scan-mark {
  width: 3.5rem;
  height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--rt-primary-light, #FFF0F0);
  color: var(--rt-primary, #F90B0B);
  font-size: 1.5rem;
}

[data-theme="dark"] #baAiScanModal .ba-scan-mark {
  background: rgba(249, 11, 11, .16);
}

#baAiScanModal .ba-scan-field {
  background: var(--rt-body-bg, #F7F8FA);
  border: 0;
  border-radius: .75rem;
  font-weight: 600;
}

#baAiScanModal .ba-scan-field:focus {
  background: var(--rt-body-bg, #F7F8FA);
  box-shadow: none;
}

#baAiScanModal .progress {
  height: .4rem;
  background: var(--rt-border, #E0E4EA);
}

#baAiScanModal .progress-bar {
  background: var(--rt-primary, #F90B0B);
}

#baTradeTicket {
  border-radius: 1rem;
}

#baTradeTicket .form-label {
  margin-bottom: .3rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--rt-text-muted);
}

#baContractTabs {
  padding: .2rem;
  border: 1px solid var(--rt-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--rt-body-bg);
}

#baContractTabs .btn {
  border: 0;
  border-radius: 999px;
  font-weight: 600;
}

#baContractTabs .btn-outline-secondary {
  background: transparent;
  color: var(--rt-text-muted);
}

#baContractTabs .btn-primary {
  background: var(--rt-primary);
  color: #fff;
}

#baAutoTradeBtn,
#baAiScanBtn {
  border-radius: 999px;
  font-weight: 700;
  min-height: 2.5rem;
}

#baStakeChips {
  flex-wrap: nowrap;
}

#baStakeChips > .btn {
  flex: 1 1 0;
  padding-left: 0;
  padding-right: 0;
  border-radius: 999px;
  font-weight: 700;
}

#baStakeChips > .btn-primary,
#baStakeChips > .btn-primary.active {
  --bs-btn-bg: var(--rt-primary);
  --bs-btn-border-color: var(--rt-primary);
  --bs-btn-hover-bg: var(--rt-primary-dark);
  --bs-btn-hover-border-color: var(--rt-primary-dark);
  --bs-btn-active-bg: var(--rt-primary);
  --bs-btn-active-border-color: var(--rt-primary);
  background: var(--rt-primary);
  border-color: var(--rt-primary);
  color: #fff;
}

#baTradeTicket .input-group {
  border-radius: 999px;
  overflow: hidden;
}

#baTradeTicket .input-group > .form-control {
  text-align: center;
  font-weight: 700;
}

#baTradeTicket .input-group > .btn,
#baTradeTicket .input-group > .input-group-text {
  background: transparent;
}

#baPayoutLabel {
  font-variant-numeric: tabular-nums;
}

#baBtnOver,
#baBtnUnder {
  border-radius: 999px;
  min-height: 2.75rem;
  font-weight: 700;
  color: #fff;
}

#baBtnUnder.btn-danger {
  --bs-btn-bg: var(--rt-primary);
  --bs-btn-border-color: var(--rt-primary);
  --bs-btn-hover-bg: var(--rt-primary-dark);
  --bs-btn-hover-border-color: var(--rt-primary-dark);
  --bs-btn-active-bg: var(--rt-primary-dark);
  --bs-btn-active-border-color: var(--rt-primary-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

#withdrawCard {
  border-radius: 1rem;
}

.ba-withdraw-step-num {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--rt-border);
  border-radius: 999px;
  color: var(--rt-text-muted);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
}

.ba-withdraw-step.is-current .ba-withdraw-step-num {
  border-color: #F90B0B;
  background: #F90B0B;
  color: #fff;
}

.ba-withdraw-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--rt-border);
}

.ba-withdraw-step.is-current + .ba-withdraw-line {
  background: #F90B0B;
}

#withdrawCard [data-withdraw-wallet] {
  border-radius: 1rem;
  border-width: 2px;
  background: var(--rt-card-bg);
  color: var(--rt-text);
}

#withdrawCard [data-withdraw-wallet].btn-primary {
  border-color: #F90B0B;
  background: rgba(249, 11, 11, .1);
  color: var(--rt-text);
}

#withdrawCard .input-group {
  border: 1px solid var(--rt-border);
  border-radius: .75rem;
  overflow: hidden;
  background: var(--rt-card-bg);
}

#withdrawCard .input-group > .form-control,
#withdrawCard .input-group > .input-group-text,
#withdrawCard .input-group > .btn {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#withdrawCard .input-group > .form-control {
  font-weight: 700;
}

#withdrawCard [data-withdraw-amount] {
  border-radius: .75rem;
  font-weight: 600;
}

#withdrawCard #withdrawMaxBtn {
  border: 1px solid #F90B0B;
  border-radius: .75rem;
  min-width: 4.25rem;
  background: transparent;
  color: #F90B0B;
  font-weight: 700;
}

#withdrawCard [data-withdraw-amount].btn-primary {
  background: #F90B0B;
  border-color: #F90B0B;
}

#withdrawCard [data-withdraw-method-card] {
  cursor: pointer;
  border-radius: 1rem;
}

#withdrawCard [data-withdraw-method-card].border-primary {
  border-color: #F90B0B !important;
}

#withdrawCard [data-withdraw-method-card].border-primary::after {
  content: "";
  width: .7rem;
  height: .7rem;
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #F90B0B;
  box-shadow: 0 0 0 4px rgba(249, 11, 11, .18);
}

#withdrawSubmitBtn {
  border-radius: .75rem;
  min-height: 2.85rem;
  font-weight: 700;
}


/* Home and account pages. Scoped so the trading desk keeps its own controls. */

/* landing-home.css */
html:has(body.ba-home){
  --mint: #F90B0B;
  --mint-press: #D90808;
  --success: #16803C;
  --ink: #151922;
  --panel: #FFFFFF;
  --elev: #F7F8FA;
  --line: #E0E4EA;
  --text: #151922;
  --muted: #5D6675;
  --soft: #5D6675;
  --danger: #DC2626;
  --page: #F7F8FA;
  --footer: #F7F8FA;
}
html[data-theme="dark"]:has(body.ba-home),
html[data-bs-theme="dark"]:has(body.ba-home){
  --ink: #F5F7FA;
  --panel: #111621;
  --elev: #171E2B;
  --line: #293142;
  --text: #F5F7FA;
  --muted: #A9B2C1;
  --soft: #A9B2C1;
  --mint-press: #FF3030;
  --success: #4ADE80;
  --danger: #FF6464;
  --page: #080B12;
  --footer: #080B12;
  color-scheme: dark;
}
body.ba-home *{ box-sizing: border-box; }
html:has(body.ba-home){ scroll-behavior: smooth; background: var(--page); color-scheme: light; overflow-x: clip; }
html[data-theme="dark"]:has(body.ba-home){ color-scheme: dark; }
html[data-bs-theme="dark"]:has(body.ba-home){ color-scheme: dark; }
body.ba-home{
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.5;
}
body.ba-home img{ max-width: 100%; display: block; }
body.ba-home a{ color: inherit; }
body.ba-home .skip{
  position: absolute; left: 16px; top: -48px; z-index: 80;
  background: var(--mint); color: #fff; padding: 8px 14px;
  border-radius: 999px; font-weight: 600; text-decoration: none;
}
body.ba-home .skip:focus{ top: 12px; }
body.ba-home .wrap{ width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
body.ba-home section[id],
body.ba-home [id^="desk-"]{ scroll-margin-top: 92px; }

body.ba-home .site-header{
  position: sticky; top: 0; z-index: 40;
  padding: .75rem 0;
  margin-bottom: calc(-1 * var(--home-header-overlap, 5.0625rem));
  background: transparent;
  border-bottom: 0;
}
body.ba-home .nav{
  position: relative;
  width: min(1160px, calc(100% - 24px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand links end";
  align-items: center;
  gap: .75rem;
  padding: .35rem .4rem .35rem .85rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.ba-home.is-scrolled .nav,
body.ba-home .nav.is-open{
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 .35rem 1.4rem rgba(8, 11, 18, .08);
}
html[data-theme="dark"]:has(body.ba-home) body.ba-home.is-scrolled .nav,
html[data-theme="dark"]:has(body.ba-home) body.ba-home .nav.is-open{
  background: #111621;
  border-color: var(--line);
  box-shadow: 0 .35rem 1.4rem rgba(0, 0, 0, .35);
}
body.ba-home .brand{ grid-area: brand; }
body.ba-home .links{ grid-area: links; }
body.ba-home .end{ grid-area: end; }
body.ba-home .brand{
  display: flex; align-items: center; gap: .5rem;
  font-family: Outfit, "DM Sans", sans-serif;
  font-weight: 700; letter-spacing: -.03em; text-decoration: none; color: var(--text);
  white-space: nowrap;
}
body.ba-home .brand img{ height: 2.25rem; width: auto; max-width: 11rem; object-fit: contain; }
body.ba-home .logo-on-dark{ display: none; }
html[data-theme="dark"]:has(body.ba-home) .logo-on-light{ display: none !important; }
html[data-theme="dark"]:has(body.ba-home) .logo-on-dark,
body.ba-home footer.site .logo-on-dark{ display: block; }
body.ba-home .links{
  justify-self: center;
  display: flex; align-items: center; gap: 1.5rem;
}
body.ba-home .links a:not(.btn){
  color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600;
  padding: .25rem 0; position: relative;
  transition: color .2s ease;
}
body.ba-home .links a:not(.btn):hover,
body.ba-home .links a:not(.btn).is-on{ color: var(--mint); }
body.ba-home .links a.btn-mint,
body.ba-home .links a.btn-mint:hover{ color: #fff; background: var(--mint); }
body.ba-home .links a.btn-mint:hover{ background: var(--mint-press); }
body.ba-home .links a.btn-ghost,
body.ba-home .links a.btn-ghost:hover{ color: var(--text); background: var(--panel); }
body.ba-home .links a .ti{ display: none; }
body.ba-home .links .nav-login,
body.ba-home .links .nav-open{ display: none; }
body.ba-home .links .nav-login.is-on::after,
body.ba-home .links .nav-open.is-on::after{ content: none; }
body.ba-home .end{ display: flex; gap: .5rem; align-items: center; justify-self: end; position: relative; z-index: 60; }
body.ba-home .menu-btn{
  width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer;
  display: none; place-items: center; color: #fff; background: transparent;
  border: 1px solid rgba(255,255,255,.2); font-size: 1.25rem;
  position: relative; z-index: 60; pointer-events: auto;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

body.ba-home .btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; font-size: 14px;
  transition: transform .2s ease, background .2s ease;
}
body.ba-home .btn:hover{ transform: translateY(-1px); }
body.ba-home .btn:focus-visible,
body.ba-home .menu-btn:focus-visible,
body.ba-home summary:focus-visible{
  outline: 2px solid var(--mint); outline-offset: 3px;
}
body.ba-home .btn-ghost{ border-color: var(--line); color: var(--text); background: transparent; }
body.ba-home .hero .btn-ghost{ border-color: var(--line); color: var(--text); background: var(--panel); }
body.ba-home .menu-btn,
body.ba-home .site-header .btn-ghost{ border-color: var(--line); color: var(--text); background: transparent; }
body.ba-home.is-scrolled .site-header .btn-ghost,
body.ba-home.is-scrolled .site-header .menu-btn,
body.ba-home .site-header.is-open .menu-btn{ border-color: var(--line); color: var(--text); background: var(--panel); }
html[data-theme="dark"]:has(body.ba-home) .btn-ghost{ border-color: rgba(255,255,255,.35); color: #fff; }
body.ba-home .btn-mint{ background: var(--mint); color: #fff; }
body.ba-home .btn-mint:hover{ background: var(--mint-press); }
body.ba-home .btn-light{ background: #fff; color: #071018; }

body.ba-home .hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  margin-top: 0;
  padding: 3.25rem 0 3rem;
  background: var(--page);
  min-height: calc(clamp(34rem, 78vh, 46rem) + var(--home-header-overlap, 5.0625rem));
  padding-top: calc(3.25rem + var(--home-header-overlap, 5.0625rem));
  display: flex;
  align-items: center;
}
body.ba-home .hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 78%;
  z-index: 0;
  animation: heroKen 26s ease-in-out infinite alternate;
}
body.ba-home .hero-bg-photo,
body.ba-home .hero-market-bg,
body.ba-home .hero-wave{
  display: none;
}
body.ba-home .hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
  background: linear-gradient(90deg,
    rgba(247, 248, 250, .94) 0%,
    rgba(247, 248, 250, .78) 24%,
    rgba(247, 248, 250, .28) 46%,
    rgba(247, 248, 250, 0) 62%);
}
html[data-theme="dark"]:has(body.ba-home) body.ba-home .hero::after{
  background:
    radial-gradient(ellipse 52% 76% at 64% 56%,
      rgba(8, 11, 18, 0) 38%,
      rgba(8, 11, 18, .55) 62%,
      #080B12 84%),
    linear-gradient(90deg,
      rgba(8, 11, 18, .92) 0%,
      rgba(8, 11, 18, .74) 26%,
      rgba(8, 11, 18, .3) 48%,
      rgba(8, 11, 18, 0) 64%);
}
body.ba-home #practice{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(112deg, #bd0812 0%, var(--mint) 52%, #c90812 100%);
}
body.ba-home #practice::before{
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 -45%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.025) 34%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.025) 66%, transparent 100%);
  animation: practiceBandSweep 8s ease-in-out infinite;
}
body.ba-home #practice > .card{
  position: relative;
  z-index: 1;
  width: 100%;
  color: #fff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
body.ba-home #practice h2,
body.ba-home #practice .step-accent{ color: #fff; }
body.ba-home #practice .sub{ color: rgba(255,255,255,.88); }
body.ba-home #practice .practice-frame{
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
@keyframes practiceBandSweep{
  from{ transform: translateX(0) skewX(-12deg); }
  to{ transform: translateX(360%) skewX(-12deg); }
}
@media (prefers-reduced-motion: reduce){
  body.ba-home #practice::before{ animation: none; }
}
html[data-theme="dark"]:has(body.ba-home) body.ba-home #markets .card .ratio{
  background: #111621;
}
html[data-theme="dark"]:has(body.ba-home) body.ba-home #markets .card img{
  background: #111621;
}
body.ba-home .hero-market-bg{
  position: absolute;
  right: -5%;
  top: 90px;
  width: min(58%, 820px);
  height: 65%;
  object-fit: cover;
  opacity: .12;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: heroSoftIn 1.2s ease .2s both;
}
body.ba-home .hero-wave{
  position: absolute;
  left: -5%;
  bottom: 72px;
  width: 105%;
  height: 160px;
  max-height: 330px;
  opacity: .4;
  z-index: 1;
  pointer-events: none;
  animation: heroWaveIn 1.4s ease .35s both, heroWaveDrift 14s ease-in-out 1.6s infinite alternate;
}
body.ba-home .hero-inner{ position: relative; z-index: 2; }
body.ba-home .hero h1{
  margin: 0 0 1rem;
  max-width: 100%;
  font-family: Outfit, "DM Sans", sans-serif;
  font-size: clamp(2.35rem, 4.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 800;
}
body.ba-home .hero h1 span{
  display: block;
  color: var(--mint);
  font-size: .92em;
  line-height: 1.05;
}
body.ba-home .lede{
  max-width: 36rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin: 0 0 1.5rem;
}
body.ba-home .hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}
body.ba-home .hero-actions .btn-lg{
  min-height: 3.25rem;
  padding-inline: 1.5rem;
}
body.ba-home .hero-actions .btn-mint{
  box-shadow: 0 .625rem 1.75rem rgba(249, 11, 11, .32);
}
body.ba-home .hero-actions .btn-ghost{
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}
body.ba-home .hero-feature{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
}
body.ba-home .hero-feature img,
body.ba-home .hero-feature i,
body.ba-home .hero-stat i{
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #F90B0B;
  font-size: 1.35rem;
  border-radius: 999px;
  background: rgba(249, 11, 11, .1);
}
body.ba-home .hero-checks i,
body.ba-home .hero-toast i{ color: #F90B0B; }
body.ba-home .hero-feature strong,
body.ba-home .hero-feature span{ display: block; line-height: 1.25; }
body.ba-home .hero-feature strong{ font-size: .9rem; }
body.ba-home .hero-feature span{ color: var(--muted); font-size: .78rem; margin-top: .15rem; }
body.ba-home .hero-checks{
  margin-top: .25rem;
  color: var(--muted);
  font-size: .85rem;
}
body.ba-home .hero-checks span{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
body.ba-home .hero-checks img{ width: 1.1rem; height: 1.1rem; }
body.ba-home .hero-visual{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 1.75rem;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
}
body.ba-home .hero-visual::after{ display: none; }
body.ba-home .hero-portrait{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
body.ba-home .theme-on-dark{ display: none !important; }
html[data-theme="dark"]:has(body.ba-home) body.ba-home .theme-on-light{ display: none !important; }
html[data-theme="dark"]:has(body.ba-home) body.ba-home .theme-on-dark{ display: block !important; }
@media (min-width: 992px) {
  html:has(body.ba-home) body.ba-home .hero-bg.hero-bg-phone{ display: none !important; }
}
@media (max-width: 991.98px) {
  html:has(body.ba-home) body.ba-home .hero-bg.hero-bg-wide{ display: none !important; }
}
body.ba-home .hero-caption{
  position: absolute;
  right: 1.25rem;
  bottom: .85rem;
  z-index: 2;
  max-width: 10rem;
  margin: 0;
  color: #fff;
  font-family: "Great Vibes", cursive;
  font-size: 2.15rem;
  line-height: 1.05;
  text-align: right;
  text-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, .65);
}
body.ba-home .hero-toast,
body.ba-home .hero-chart-card{
  position: absolute;
  z-index: 3;
  background: rgba(4, 18, 20, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px);
  border-radius: 1rem;
}
body.ba-home .hero-toast{
  top: 8%;
  right: 2%;
  z-index: 4;
  padding: .7rem .85rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 12.5rem;
}
body.ba-home .hero-toast small,
body.ba-home .hero-toast strong{ display: block; line-height: 1.2; }
body.ba-home .hero-toast small{ font-size: .75rem; color: #D7E1DF; }
body.ba-home .hero-toast strong{ font-size: .95rem; color: var(--mint); }
body.ba-home .hero-toast > span{ margin-left: auto; font-size: .7rem; color: #A6B5B1; }
body.ba-home .hero-chart-card{
  right: 0;
  bottom: 8%;
  width: min(17rem, 88%);
  padding: .8rem;
}
body.ba-home #baHeroChart{
  display: block;
  width: 100%;
  height: 6.75rem;
}
body.ba-home .hero-tf{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .3rem;
  margin-top: .5rem;
}
body.ba-home .hero-tf span{
  text-align: center;
  background: #102529;
  color: #B6C3C0;
  padding: .35rem .15rem;
  border-radius: .4rem;
  font-size: .7rem;
}
body.ba-home .hero-tf .is-on{
  background: #DCE7E4;
  color: #071312;
  font-weight: 700;
}
body.ba-home .hero-buy,
body.ba-home .hero-sell{
  display: block;
  text-align: center;
  border-radius: .55rem;
  padding: .65rem .45rem;
  font-weight: 800;
  color: #fff;
  font-size: .85rem;
}
body.ba-home .hero-buy{ background: var(--mint); color: #fff; }
body.ba-home .hero-sell{ background: var(--danger); }
body.ba-home .hero-stats{
  margin-top: 2rem;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 1.25rem;
  overflow: hidden;
  color: var(--text);
}
body.ba-home .hero-stat{
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 1.25rem;
  height: 100%;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body.ba-home .hero-stats .col:nth-child(2n) .hero-stat{ border-right: 0; }
@media (min-width: 992px) {
  body.ba-home .hero-stats .col .hero-stat{ border-bottom: 0; }
  body.ba-home .hero-stats .col:nth-child(2n) .hero-stat{ border-right: 1px solid var(--line); }
  body.ba-home .hero-stats .col:last-child .hero-stat{ border-right: 0; }
}
body.ba-home .hero-stat img{ width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
body.ba-home .hero-stat strong,
body.ba-home .hero-stat span{ display: block; line-height: 1.25; }
body.ba-home .hero-stat strong{ font-size: .95rem; }
body.ba-home .hero-stat span{ font-size: .75rem; color: var(--muted); margin-top: .15rem; }
body.ba-home .hero-in{ animation: rise .75s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--delay, 0ms); }
body.ba-home .hero-toast{
  animation: heroFloatIn .8s cubic-bezier(.22, 1, .36, 1) .55s both;
}
body.ba-home .hero-chart-card{
  animation: heroCardIn .85s cubic-bezier(.22, 1, .36, 1) .7s both;
}
body.ba-home .hero-chart-pct{
  animation: heroPctGlow 2.4s ease-in-out 1.8s infinite;
}
body.ba-home .hero-buy{
  animation: heroBuyPulse 2.8s ease-in-out 2s infinite;
}
body.ba-home .hero-tf .is-on{
  animation: heroTfPulse 2.2s ease-in-out 1.9s infinite;
}
body.ba-home .hero-stats .hero-stat{
  animation: rise .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(420ms + var(--stat-i, 0) * 80ms);
}
body.ba-home .hero-stats .col:nth-child(1) .hero-stat{ --stat-i: 0; }
body.ba-home .hero-stats .col:nth-child(2) .hero-stat{ --stat-i: 1; }
body.ba-home .hero-stats .col:nth-child(3) .hero-stat{ --stat-i: 2; }
body.ba-home .hero-stats .col:nth-child(4) .hero-stat{ --stat-i: 3; }
@keyframes rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: none; }
}
@keyframes heroBgIn {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroKen {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
@keyframes heroSoftIn {
  from { opacity: 0; }
  to { opacity: .12; }
}
@keyframes heroWaveIn {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: .4; transform: none; }
}
@keyframes heroWaveDrift {
  from { transform: translateX(0); }
  to { transform: translateX(-2%); }
}
@keyframes heroFloatIn {
  from { opacity: 0; transform: translateY(-.75rem) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(1.25rem) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes heroPctGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; opacity: 1; }
  50% { text-shadow: 0 0 .55rem rgba(249, 11, 11, .55); opacity: .92; }
}
@keyframes heroBuyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 11, 11, 0); transform: translateZ(0); }
  50% { box-shadow: 0 0 0 .2rem rgba(249, 11, 11, .28); }
}
@keyframes heroTfPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50% { box-shadow: inset 0 0 0 1px rgba(249, 11, 11, .35); }
}
@media (max-width: 991.98px) {
  body.ba-home .hero{
    min-height: calc(100svh + var(--home-header-overlap, 5.0625rem));
    align-items: flex-start;
    padding-top: calc(1.35rem + var(--home-header-overlap, 5.0625rem));
    padding-bottom: 2rem;
  }
  body.ba-home .hero-bg-phone{
    inset: auto 0 0;
    height: 56%;
    object-position: center 34%;
  }
  body.ba-home .hero::after{
    background: linear-gradient(180deg,
      var(--page) 0%,
      var(--page) 42%,
      color-mix(in srgb, var(--page) 94%, transparent) 58%,
      color-mix(in srgb, var(--page) 54%, transparent) 76%,
      transparent 100%);
  }
  html[data-theme="dark"]:has(body.ba-home) body.ba-home .hero::after{
    background: linear-gradient(180deg,
      var(--page) 0%,
      var(--page) 42%,
      color-mix(in srgb, var(--page) 94%, transparent) 58%,
      color-mix(in srgb, var(--page) 54%, transparent) 76%,
      transparent 100%);
  }
  body.ba-home .hero-visual{
    max-width: 22rem;
    margin-inline: auto;
    margin-bottom: .5rem;
  }
  body.ba-home .hero-toast{
    top: .35rem;
    right: .15rem;
  }
  body.ba-home .hero-chart-card{
    width: min(16rem, 72%);
    right: 0;
    bottom: 0;
    max-height: calc(100% - 3.75rem);
  }
  body.ba-home .hero-market-bg{ width: 100%; right: -20%; top: 140px; height: 40%; }
  body.ba-home .hero-feature{
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: .65rem;
    width: fit-content;
    margin-inline: auto;
  }
  body.ba-home .hero-feature span{ display: none; }
  body.ba-home .hero-feature img{ width: 2.4rem; height: 2.4rem; }
  body.ba-home .hero-actions .btn-lg,
  body.ba-home .btn-mint.btn-lg{ width: 100%; }
}
@media (max-width: 575.98px) {
  body.ba-home .hero-bg-photo{ object-position: 60% 12%; }
  body.ba-home .hero-toast,
body.ba-home .hero-chart-card{
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    max-height: none;
  }
  body.ba-home .hero-toast{ min-width: 0; width: min(12.5rem, 100%); padding: .5rem .6rem; }
  body.ba-home .hero-chart-card{ width: min(14rem, 100%); padding: .55rem; }
  body.ba-home #baHeroChart{ height: 4.75rem; }
  body.ba-home .hero-checks{ font-size: .75rem; gap: .65rem !important; justify-content: center; }
  body.ba-home .hero-features{ text-align: center; }
}

body.ba-home section{ padding: 0; }
body.ba-home h1,
body.ba-home .h1,
body.ba-home h2,
body.ba-home .h2,
body.ba-home h3,
body.ba-home .h3,
body.ba-home h4,
body.ba-home .h4,
body.ba-home h5,
body.ba-home .h5,
body.ba-home h6,
body.ba-home .h6{
  font-family: Outfit, "DM Sans", sans-serif;
}
body.ba-home h3,
body.ba-home .h3,
body.ba-home h4,
body.ba-home .h4,
body.ba-home h5,
body.ba-home .h5,
body.ba-home h6,
body.ba-home .h6{
  font-weight: 600;
}
body.ba-home h2{
  font-family: Outfit, "DM Sans", sans-serif;
  font-size: clamp(28px, 4vw, 44px); letter-spacing: -.04em; margin: 0 0 12px; font-weight: 800;
}
body.ba-home .sub{ color: var(--muted); margin: 0; max-width: 560px; }
body.ba-home .center{ text-align: center; }
body.ba-home .center .sub{ margin-left: auto; margin-right: auto; }
body.ba-home .eyebrow{
  color: var(--mint); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px;
}

body.ba-home .card{
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
}
html[data-theme="dark"]:has(body.ba-home) body.ba-home .card{
  border-color: var(--line);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28);
}
body.ba-home .landing-wave{
  display: none !important;
}
body.ba-home a.card{
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
body.ba-home a.card:hover{
  border-color: rgba(249, 11, 11,.45);
  color: var(--text);
  transform: translateY(-.25rem);
  box-shadow: 0 .75rem 1.5rem rgba(249, 11, 11,.12);
}

body.ba-home .desk-ico{
  width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: grid; place-items: center;
  background: var(--elev); color: var(--mint); font-size: 1.25rem;
}
body.ba-home .mkt-spark{ width: 4.5rem; height: 1.75rem; overflow: visible; }
body.ba-home .mkt-spark path{
  fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
html.js-ready:has(body.ba-home) .mkt-spark path{
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
body.ba-home .mkt-spark.is-up path{ stroke: var(--success); }
body.ba-home .mkt-spark.is-down path{ stroke: var(--danger); }
html.js-ready:has(body.ba-home) .reveal.is-in .mkt-spark path{
  animation: sparkDraw .85s ease forwards;
  animation-delay: calc(var(--delay, 0ms) + .2s);
}
@keyframes sparkDraw {
  to { stroke-dashoffset: 0; }
}
body.ba-home .plat-ok{ color: var(--mint); flex-shrink: 0; margin-top: .15rem; }
body.ba-home a.card:hover .desk-go{ transform: translateX(4px); }
body.ba-home .desk-go{
  display: inline-flex; color: var(--mint); font-weight: 700; font-size: 14px;
  transition: transform .2s ease;
}

body.ba-home .up{ color: var(--success); }
body.ba-home .down{ color: var(--danger); }

body.ba-home .fine{ color: var(--muted); font-size: 14px; }

body.ba-home #steps{ position: relative; }
body.ba-home .step-num{
  width: 3rem; height: 3rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--page); color: var(--muted);
  border: 2px solid var(--line);
  font-weight: 800; font-size: 1rem; letter-spacing: .02em;
  position: relative; z-index: 1;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
body.ba-home #stepTrack{ position: relative; }
body.ba-home .step-flow{
  display: none;
}
@media (min-width: 768px) {
  body.ba-home .step-flow{
    display: block;
    position: absolute;
    left: 16.67%;
    right: 16.67%;
    width: auto;
    max-width: none;
    top: 2.5rem;
    height: 2px;
    background: var(--line);
    z-index: 0;
    pointer-events: none;
  }
  body.ba-home .step-flow span{
    display: block;
    height: 100%;
    width: 0;
    background: var(--mint);
    transition: width .75s cubic-bezier(.22, 1, .36, 1);
  }
  body.ba-home #stepTrack.is-ready[data-step="1"] .step-flow span{ width: 0; }
  body.ba-home #stepTrack.is-ready[data-step="2"] .step-flow span{ width: 50%; }
  body.ba-home #stepTrack.is-ready[data-step="3"] .step-flow span{ width: 100%; }
}
body.ba-home #steps .step-card.is-done .step-num,
body.ba-home #steps .step-card.is-active .step-num{
  background: var(--mint);
  color: #fff;
  border-color: var(--mint);
}
body.ba-home #steps .step-card{
  opacity: 1;
  transform: none;
  text-align: left;
  border-color: var(--line);
}
html.js-ready:has(body.ba-home) #steps .step-card.reveal{
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, box-shadow .35s ease;
  transition-delay: var(--delay, 0ms);
}
html.js-ready:has(body.ba-home) #steps .step-card.reveal.is-in{
  opacity: 1;
  transform: none;
}
body.ba-home #steps .step-card.is-active{
  border-color: color-mix(in srgb, var(--mint) 55%, var(--line));
  box-shadow: 0 .75rem 1.75rem rgba(249, 11, 11, .1);
}
body.ba-home .step-accent{ color: var(--mint); }
body.ba-home #steps .btn-mint:hover{ box-shadow: 0 .5rem 1.5rem rgba(249, 11, 11,.28); }
html.js-ready:has(body.ba-home) .plat-candle,
html.js-ready:has(body.ba-home) .plat-price{
  opacity: 0;
}
html.js-ready:has(body.ba-home) .reveal.is-in .plat-candle{
  animation: platCandle .42s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 42ms);
}
html.js-ready:has(body.ba-home) .reveal.is-in .plat-price{
  animation: platCandle .4s ease .9s forwards;
}
@keyframes platCandle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
html.js-ready:has(body.ba-home) .reveal.is-in .practice-frame{
  animation: practiceFloat 4.8s ease-in-out .3s infinite alternate;
}
body.ba-home .practice-frame{
  width: min(100%, 20rem);
}
body.ba-home .practice-frame{
  border: 1px solid var(--line);
  background: var(--elev);
}
@keyframes practiceFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

body.ba-home .quote{
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  transition: border-color .25s ease, box-shadow .25s ease, opacity .35s ease, transform .35s ease;
}
body.ba-home .quote:hover{ border-color: rgba(249, 11, 11,.35); }
body.ba-home .quote p{ color: var(--muted); margin: 0 0 16px; }
body.ba-home .quote-who{ display: flex; align-items: center; gap: 10px; }
body.ba-home .quote-who img,
body.ba-home .quote-ava{
  width: 40px; height: 40px; border-radius: 999px; object-fit: cover;
}
body.ba-home .quote-ava{
  display: grid; place-items: center; background: var(--mint); color: #fff; font-weight: 700; font-size: 12px;
}
body.ba-home .quote strong{ display: block; font-size: 14px; }
body.ba-home .quote small{ color: var(--muted); }

body.ba-home #reviews h2 span{ color: var(--mint); }
body.ba-home .review-nav{
  width: 2.75rem; min-width: 2.75rem; padding: 0;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
body.ba-home .review-nav:hover{
  border-color: var(--mint); color: var(--mint);
}
body.ba-home .review-nav:disabled{
  opacity: .35; transform: none; pointer-events: none;
}
body.ba-home .review-track{
  transition: transform .45s ease;
  will-change: transform;
}
body.ba-home .review-viewport{
  touch-action: pan-y;
  cursor: grab;
}
body.ba-home .review-card{
  min-width: 0;
  opacity: .78;
}
body.ba-home .review-card > p{ margin-bottom: 0; }
body.ba-home .review-card .quote-who{ border-top: 1px solid var(--line); }
body.ba-home .review-card.is-visible{ opacity: .92; }
body.ba-home .review-card.is-on{
  opacity: 1;
  border-color: rgba(249, 11, 11,.45);
  box-shadow: 0 .5rem 1.5rem rgba(249, 11, 11,.12);
  transform: translateY(-.15rem);
}
body.ba-home .quote-mark{
  display: block;
  color: var(--mint);
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: .35rem;
  opacity: .8;
}
body.ba-home .review-card.is-on .quote-mark{
  animation: quotePop .45s ease;
}
@keyframes quotePop {
  from { opacity: 0; transform: translateY(-.35rem) scale(.88); }
  to { opacity: .8; transform: none; }
}
body.ba-home .review-dot{
  width: .5rem; height: .5rem; padding: 0; border: 0;
  border-radius: 999px; background: rgba(255,255,255,.22);
  transition: width .25s ease, background .25s ease;
}
html[data-bs-theme="light"]:has(body.ba-home) .review-dot{ background: rgba(7,16,24,.22); }
body.ba-home .review-dot.is-on{
  width: 1.35rem;
  background: var(--mint);
}

body.ba-home .risk-note{
  margin: 0;
  color: var(--soft);
  font-size: .75rem;
  line-height: 1.45;
}
body.ba-home .risk-note a{ color: var(--muted); font-weight: 600; text-decoration: none; }
body.ba-home .risk-note a:hover{ color: var(--mint); text-decoration: underline; }

body.ba-home #landingFaq .accordion-item,
body.ba-home #landingFaq .accordion-button,
body.ba-home #landingFaq .accordion-button:not(.collapsed){
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
body.ba-home #landingFaq .accordion-item{ border-color: var(--line); }
body.ba-home #landingFaq .accordion-button:focus{ box-shadow: none; }
body.ba-home #faq a.fw-semibold{ color: var(--mint); text-decoration: none; }
body.ba-home #faq a.fw-semibold:hover{ text-decoration: underline; }

body.ba-home .cta{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.5rem;
  background: #080B12;
  --cta-angle: 105deg;
  --cta-mint-a: .72;
  --cta-mid-a: .7;
  --cta-end-a: .92;
  --cta-shift-x: 0%;
  --cta-shift-y: 0%;
}
body.ba-home .cta-bg{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  animation: ctaKen 22s ease-in-out infinite alternate;
}
body.ba-home .cta::after{
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    var(--cta-angle),
    rgba(249, 11, 11, var(--cta-mint-a)) 0%,
    rgba(5, 15, 22, var(--cta-mid-a)) 50%,
    rgba(5, 15, 22, var(--cta-end-a)) 100%
  );
  transform: translate3d(var(--cta-shift-x), var(--cta-shift-y), 0);
  will-change: transform;
}
@keyframes ctaKen {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
body.ba-home .cta h2{ position: relative; z-index: 1; color: #fff; }
body.ba-home .cta h2 span{ color: var(--mint); }
body.ba-home .cta .fine{ position: relative; z-index: 1; color: #E8EEF1; }
body.ba-home .cta .hero-actions{ position: relative; z-index: 1; }
body.ba-home .cta .hero-actions .btn-ghost{
  background: transparent;
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
body.ba-home #ready .cta{ min-height: 16rem; }
body.ba-home #ready .cta .btn{ position: relative; z-index: 1; }
body.ba-home .cta.cta-plain{ background: #080B12; }
body.ba-home .cta.cta-plain::after{ display: none; }
body.ba-home .cta.cta-plain .fine{ max-width: 36rem; margin-inline: auto; }

body.ba-home footer.site{
  color: #A9B2C1; font-size: .875rem;
  background: #080B12;
}
body.ba-home footer.site h4{ margin: 0 0 .75rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
body.ba-home footer.site a{ color: #C5C7CC; text-decoration: none; }
body.ba-home footer.site a:hover{ color: #fff; }
body.ba-home footer.site .logo-on-light{ display: none !important; }
body.ba-home .foot-brand{ margin-bottom: .75rem; color: #fff; }
body.ba-home .legal{
  font-size: .75rem; color: #8B8E95; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: .5rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
body.ba-home .mobile-cta{
  display: none;
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 25;
  width: min(22rem, calc(100% - 2rem));
  transform: translateX(-50%);
}
@supports (width: 1svw){
  body.ba-home .mobile-cta{
    left: 50svw;
    width: min(22rem, calc(100svw - 2rem));
  }
}


html.js-ready:has(body.ba-home) .reveal{ opacity: 0; transform: translateY(1.25rem); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--delay, 0ms); }
html.js-ready:has(body.ba-home) .reveal.is-in{ opacity: 1; transform: none; }
html.js-ready:has(body.ba-home) .reveal-left{ transform: translateX(-1.25rem); }
html.js-ready:has(body.ba-home) .reveal-right{ transform: translateX(1.25rem); }
html.js-ready:has(body.ba-home) .reveal-scale{ transform: translateY(1rem) scale(.96); }
html.js-ready:has(body.ba-home) .reveal-left.is-in,
html.js-ready:has(body.ba-home) .reveal-right.is-in,
html.js-ready:has(body.ba-home) .reveal-scale.is-in{ transform: none; }
html.js-ready:has(body.ba-home) a.card.reveal.is-in:hover{
  transform: translateY(-.25rem);
}

@media (max-width: 960px) {
  body.ba-home .nav{
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand end";
  }
  body.ba-home .menu-btn{ display: grid; }
  body.ba-home .links{
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    left: auto;
    width: min(18rem, calc(100vw - 1.5rem));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    margin: 0;
    padding: .85rem .9rem 1rem;
    z-index: 55;
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .45);
    backdrop-filter: blur(1rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.4rem) scale(.98);
    transform-origin: top right;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  body.ba-home .links.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
  }
  body.ba-home .links a:not(.btn){
    display: flex; justify-content: space-between; align-items: center;
    padding: .7rem .35rem;
    color: var(--text);
  }
  body.ba-home .links a:not(.btn):hover,
body.ba-home .links a:not(.btn).is-on{ color: var(--mint); }
  body.ba-home .links a:not(.btn).is-on::after{ content: none; }
  body.ba-home .links a .ti{ display: inline; color: var(--muted); font-size: .85rem; }
  body.ba-home .links a:not(.btn):hover .ti,
body.ba-home .links a:not(.btn).is-on .ti{ color: var(--mint); }
  body.ba-home .links .nav-login,
body.ba-home .links .nav-open{ display: inline-flex; width: 100%; margin-top: .35rem; }
  body.ba-home .end .btn{ display: none; }
  body.ba-home.nav-open{
    overflow: hidden;
  }
  body.ba-home.nav-open::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(5, 15, 22, .55);
    pointer-events: none;
  }
  body.ba-home .cta-bg{ object-position: 24% center; }
  body.ba-home .cta{
    --cta-angle: 180deg;
    --cta-mint-a: .78;
    --cta-mid-a: .42;
    --cta-end-a: .92;
  }
  body.ba-home .cta::after{
    background: linear-gradient(
      var(--cta-angle),
      rgba(5, 15, 22, var(--cta-mid-a)) 0%,
      rgba(249, 11, 11, var(--cta-mint-a)) 40%,
      rgba(5, 15, 22, var(--cta-end-a)) 100%
    );
  }
  body.ba-home .mobile-cta{ display: block; }
  body.ba-home .mobile-cta .btn{ width: 100%; }
  body.ba-home{ padding-bottom: 5.5rem; }
  body.ba-home:has(.mobile-cta) .ba-support-widget{ margin-bottom: 5rem; }
}
@media (max-width: 720px) {
  body.ba-home .wrap{ width: min(1160px, calc(100% - 28px)); }
}
@media (max-width: 640px) {
  body.ba-home .hero h1{ font-size: clamp(1.85rem, 8.5vw, 2.35rem); }
  body.ba-home .brand{ font-size: 15px; }
  body.ba-home .cta-bg{ object-position: 18% center; }
}
body.ba-home .ticket-head{ margin-bottom: 1.75rem; max-width: 40rem; }
body.ba-home .ticket-head .sub{ margin-bottom: 0; }
body.ba-home .desk-tabs{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.15rem; }
body.ba-home .desk-tab{
  min-height: 2.5rem; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font: inherit; font-weight: 700; font-size: .8125rem; cursor: pointer;
}
body.ba-home .desk-tab:hover{ border-color: rgba(249, 11, 11, .45); }
body.ba-home .desk-tab:focus-visible{ outline: 2px solid var(--mint); outline-offset: 2px; }
body.ba-home .desk-tab.is-on{ background: var(--mint); border-color: var(--mint); color: #fff; }
body.ba-home .trade-walk{
  list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem;
  position: relative;
}
body.ba-home .trade-walk li{ position: relative; z-index: 1; }
body.ba-home .trade-walk::before{
  content: "";
  position: absolute;
  left: 1.85rem; top: 1.75rem; bottom: 1.75rem;
  border-left: 2px dashed rgba(249, 11, 11, .35);
  pointer-events: none;
}
body.ba-home .trade-walk-item{
  width: 100%; display: flex; align-items: flex-start; gap: .85rem;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 1rem; padding: .85rem 1rem;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
body.ba-home .trade-walk-item strong{ display: block; font-size: 1rem; margin-bottom: .15rem; }
body.ba-home .trade-walk-item span span{ color: var(--muted); font-size: .875rem; }
body.ba-home .trade-walk-item:hover{ border-color: rgba(249, 11, 11, .45); }
body.ba-home .trade-walk-item:focus-visible{ outline: 2px solid var(--mint); outline-offset: 2px; }
body.ba-home .trade-walk-item.is-on{
  border-color: var(--mint);
  box-shadow: 0 .6rem 1.75rem rgba(249, 11, 11, .14);
  transform: translateX(.25rem);
}
body.ba-home .trade-walk-num{
  width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 999px;
  display: grid; place-items: center; font-size: .8125rem; font-weight: 700;
  background: var(--elev); color: var(--text); border: 1px solid var(--line);
}
body.ba-home .trade-walk-item.is-on .trade-walk-num{
  background: var(--mint); color: #fff; border-color: var(--mint);
  animation: tradeWalkPulse 1.8s ease-in-out infinite;
}
body.ba-home .trade-shot{
  background: #111621; color: #F5F7FA;
  border: 1px solid #293142; border-radius: 1.5rem; padding: 1.15rem;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .28);
}
html.js-ready:has(body.ba-home) .reveal.is-in .trade-shot{ animation: ticketFloat 6s ease-in-out infinite; }
@keyframes ticketFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-.4rem); }
}
body.ba-home .tw-bar{
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .875rem; margin-bottom: .75rem; flex-wrap: wrap;
}
body.ba-home .tw-bar img{ width: 1.4rem; height: 1.4rem; }
body.ba-home .tw-desk-tag{
  margin-left: auto; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #F90B0B; border: 1px solid rgba(249, 11, 11, .45);
  border-radius: 999px; padding: .2rem .55rem;
}
body.ba-home .tw-region{
  border-radius: .85rem; padding: .65rem;
  border: 1px solid transparent;
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
body.ba-home .tw-region.is-lit{
  border-color: rgba(249, 11, 11, .7);
  background: rgba(249, 11, 11, .1);
  box-shadow: 0 0 0 4px rgba(249, 11, 11, .14);
}
body.ba-home .tw-contracts{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
body.ba-home .tw-contracts[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ba-home .tw-chips, body.ba-home .tw-confirm{ display: flex; flex-wrap: wrap; gap: .4rem; }
body.ba-home .tw-contracts span,
body.ba-home .tw-chips span,
body.ba-home .tw-confirm span{
  border-radius: 999px; padding: .45rem .75rem; font-size: .8125rem; font-weight: 600;
  background: #171E2B; color: #A9B2C1; cursor: pointer; text-align: center;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
body.ba-home .tw-region.is-lit .tw-contracts span.is-on,
body.ba-home .tw-region.is-lit .tw-chips span.is-on,
body.ba-home .tw-region.is-lit .tw-confirm span.is-on:not(.is-odd){
  animation: tradeWalkPulse 1.4s ease-in-out infinite;
}
body.ba-home .tw-contracts span.is-on,
body.ba-home .tw-chips span.is-on,
body.ba-home .tw-confirm span.is-on{ background: #F90B0B; color: #fff; }
body.ba-home .tw-confirm span.is-on.is-odd{
  background: #FF6464; color: #080B12;
  animation: none;
}
body.ba-home .digits{ display: flex; gap: .2rem; margin: .75rem 0; }
body.ba-home .digits span{
  flex: 1; min-width: 0; height: 1.4rem; border-radius: .3rem;
  background: #171E2B; color: #A9B2C1; font-size: .7rem; display: grid; place-items: center;
  cursor: pointer;
}
body.ba-home .digits .on{ background: #F90B0B; color: #fff; animation: digitGlow 1.8s ease-in-out infinite; }
body.ba-home .tw-digits{ margin: .25rem 0 .5rem; }
body.ba-home .tw-label{ font-size: .75rem; color: #A9B2C1; margin-bottom: .5rem; }
body.ba-home .tw-stake{ margin-top: .5rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -.04em; color: #F5F7FA; }
body.ba-home .tw-row{
  display: flex; justify-content: space-between; gap: .75rem;
  font-size: .875rem; color: #A9B2C1; padding: .4rem 0; border-top: 1px solid #293142;
}
body.ba-home .tw-row:first-child{ border-top: 0; padding-top: 0; }
body.ba-home .tw-row b{ color: #F5F7FA; font-weight: 600; }
body.ba-home .tw-confirm{ margin-top: .15rem; }
body.ba-home .tw-confirm span{ flex: 1; text-align: center; padding: .75rem; }
@keyframes tradeWalkPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}
@keyframes digitGlow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(249, 11, 11, .2); }
  50%{ box-shadow: 0 0 0 4px rgba(249, 11, 11, .18); }
}
@media (max-width: 640px){
  body.ba-home .trade-shot{ padding: .85rem; }
  body.ba-home .tw-stake{ font-size: 1.4rem; }
  body.ba-home .tw-chips span, body.ba-home .tw-contracts span{ padding: .35rem .55rem; font-size: .75rem; }
  body.ba-home .tw-row{ flex-direction: column; align-items: flex-start; gap: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.ba-home){ scroll-behavior: auto; }
  html.js-ready:has(body.ba-home) #steps .step-card.reveal,
  body.ba-home #stepTrack .step-flow span,
  body.ba-home #steps .step-num{
    transition: none;
  }
  html.js-ready:has(body.ba-home) .reveal,
body.ba-home .hero-in,
body.ba-home .step-card,
body.ba-home .review-card,
body.ba-home .quote-mark,
body.ba-home .faq-ico,
body.ba-home .hero-float,
body.ba-home .hero-bg-photo,
body.ba-home .hero-market-bg,
body.ba-home .hero-wave,
body.ba-home .hero-toast,
body.ba-home .hero-chart-card,
body.ba-home .hero-stats .hero-stat,
body.ba-home .hero-chart-pct,
body.ba-home .hero-buy,
body.ba-home .hero-tf .is-on,
body.ba-home .hero-portrait,
body.ba-home .practice-frame,
body.ba-home .practice-gift,
html.js-ready:has(body.ba-home) #steps .step-card.reveal,
html.js-ready:has(body.ba-home) .plat-candle,
html.js-ready:has(body.ba-home) .plat-price{
    opacity: 1; transform: none; animation: none;
  }
  body.ba-home .review-track{ transition: none; }
  body.ba-home .ba-ticker-track,
  body.ba-home .hero-bg,
body.ba-home .hero-bg img,
body.ba-home .cta-bg,
body.ba-home #ready .cta-bg,
body.ba-home .cta::after{
    animation: none;
  }
  body.ba-home .cta::after{
    transform: none;
  }
html.js-ready:has(body.ba-home) .reveal.is-in .mkt-spark path,
html.js-ready:has(body.ba-home) .reveal.is-in .plat-candle,
html.js-ready:has(body.ba-home) .reveal.is-in .plat-price,
html.js-ready:has(body.ba-home) .reveal.is-in .practice-gift,
body.ba-home .trade-walk-item.is-on .trade-walk-num,
body.ba-home .digits .on,
body.ba-home .tw-region.is-lit .tw-contracts span.is-on,
body.ba-home .tw-region.is-lit .tw-chips span.is-on,
body.ba-home .tw-region.is-lit .tw-confirm span.is-on,
html.js-ready:has(body.ba-home) .reveal.is-in .trade-shot{
    animation: none;
  }
  body.ba-home .mkt-spark path{ stroke-dashoffset: 0; }
  body.ba-home a.card:hover,
html.js-ready:has(body.ba-home) a.card.reveal.is-in:hover,
body.ba-home .trade-walk-item.is-on{ transform: none; }
  body.ba-home .links{
    transition: none;
    transform: none;
  }
}

/* auth.css */
/* Auth pages — shared shell aligned with landing-home tokens */
html:has(body.ba-auth){
  --mint: #F90B0B;
  --mint-press: #D90808;
  --primary: #F90B0B;
  --ink: #151922;
  --bg-deep: #F7F8FA;
  --bg-main: #F7F8FA;
  --page: #F7F8FA;
  --panel: #FFFFFF;
  --elev: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --border: #E0E4EA;
  --line: #E0E4EA;
  --text: #151922;
  --text-primary: #151922;
  --text-secondary: #5D6675;
  --text-muted: #5D6675;
  --muted: #5D6675;
  --soft: #5D6675;
  --success: #16803C;
  --danger: #DC2626;
  --warning: #B45309;
}

html[data-theme="dark"]:has(body.ba-auth){
  --ink: #F5F7FA;
  --mint-press: #FF3030;
  --bg-deep: #080B12;
  --bg-main: #080B12;
  --page: #080B12;
  --panel: #111621;
  --elev: #171E2B;
  --bg-card: #111621;
  --bg-elevated: #171E2B;
  --border: #293142;
  --line: #293142;
  --text: #F5F7FA;
  --text-primary: #F5F7FA;
  --text-secondary: #A9B2C1;
  --text-muted: #A9B2C1;
  --muted: #A9B2C1;
  --soft: #A9B2C1;
  --success: #4ADE80;
  --danger: #FF6464;
  --warning: #FBBF24;
}

body.ba-auth{
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  line-height: 1.5;
  --iti-hover-color: rgba(249, 11, 11, 0.12);
  --iti-border-color: var(--border);
  --iti-country-selector-bg: var(--bg-elevated);
  --iti-icon-color: var(--text-muted);
}
body.ba-auth h1,
body.ba-auth h2,
body.ba-auth h3,
body.ba-auth h4,
body.ba-auth h5,
body.ba-auth h6{
  font-family: Outfit, "DM Sans", sans-serif;
}

body.ba-auth .ba-auth-split{
  min-height: 100vh;
  min-height: 100dvh;
}

.ba-auth > .container-fluid{
  padding: 0;
}

body.ba-auth .ba-auth-promo{
  position: relative;
  overflow: hidden;
  background: #080B12;
  border-right: 0;
}
body.ba-auth .ba-auth-hero{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% center;
}

body.ba-auth .ba-auth-promo-inner{
  position: relative;
  z-index: 1;
  min-height: 100%;
}

/* TradeWise pattern: left visual stays put; right form column scrolls */
@media (min-width: 992px) {
  body.ba-auth{
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body.ba-auth .ba-auth-split{
    height: 100%;
    min-height: 0;
  }

  body.ba-auth .ba-auth-promo{
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  body.ba-auth .ba-auth-content,
  body.ba-auth .ba-auth-caption{
    display: none;
  }

  body.ba-auth .ba-auth-promo-inner{
    height: 100%;
  }

  body.ba-auth .ba-auth-panel{
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .08) transparent;
  }

  body.ba-auth .ba-auth-panel::-webkit-scrollbar{
    width: 4px;
  }

  body.ba-auth .ba-auth-panel::-webkit-scrollbar-track{
    background: transparent;
  }

  body.ba-auth .ba-auth-panel::-webkit-scrollbar-thumb{
    background: rgba(255, 255, 255, .08);
  }
}

body.ba-auth .ba-auth-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

body.ba-auth .ba-auth-logo{
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  background: transparent;
  display: block;
}

body.ba-auth .ba-auth-logo-full{
  height: 2.5rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  background: transparent;
  display: block;
}

body.ba-auth .ba-auth-logo-full.logo-on-dark{ display: none; }
html[data-theme="dark"]:has(body.ba-auth) .ba-auth-logo-full.logo-on-light{ display: none !important; }
html[data-theme="dark"]:has(body.ba-auth) .ba-auth-logo-full.logo-on-dark{ display: block; }
html[data-theme="dark"]:has(body.ba-auth) .ba-auth-promo .logo-on-light{ display: block !important; }
html[data-theme="dark"]:has(body.ba-auth) .ba-auth-promo .logo-on-dark{ display: none !important; }

body.ba-auth .ba-auth-card-brand{
  display: flex;
  justify-content: center;
  text-decoration: none;
}

body.ba-auth .ba-auth-eyebrow{
  color: var(--mint);
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

body.ba-auth .ba-auth-title{
  font-family: Outfit, "DM Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #fff;
}

body.ba-auth .ba-auth-title .accent,
body.ba-auth .ba-auth-card h1 em{
  color: var(--mint);
  font-style: normal;
}

body.ba-auth .ba-auth-card h1{
  font-family: Outfit, "DM Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.ba-auth .ba-auth-intro,
body.ba-auth .ba-auth-lede{
  color: var(--muted);
  max-width: 28rem;
}

body.ba-auth .ba-auth-promo,
body.ba-auth .ba-auth-promo .fw-semibold{
  color: #fff;
}

body.ba-auth .ba-auth-promo .ba-auth-intro,
body.ba-auth .ba-auth-promo .ba-auth-muted,
body.ba-auth .ba-auth-promo .ba-auth-secondary{
  color: rgba(255, 255, 255, 0.78);
}

body.ba-auth .ba-auth-muted{
  color: var(--soft);
}

body.ba-auth .ba-auth-secondary{
  color: var(--muted);
}

body.ba-auth .ba-feature-icon{
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(249, 11, 11, 0.4);
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
  background: rgba(249, 11, 11, 0.1);
  flex-shrink: 0;
}

body.ba-auth .ba-feature-icon-round{
  border-radius: 50%;
}

body.ba-auth .ba-avatar-stack{
  display: flex;
  align-items: center;
}

body.ba-auth .ba-avatar{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  margin-left: -0.45rem;
}

body.ba-auth .ba-avatar:first-child{
  margin-left: 0;
}

body.ba-auth .ba-phone-group{
  display: flex;
  gap: 0.5rem;
}

body.ba-auth .ba-phone-group .ba-dial{
  width: 5.5rem;
  flex-shrink: 0;
  padding-left: 0.65rem;
  background: var(--elev);
  border: 1px solid var(--line);
  color: var(--text);
  min-height: 3rem;
}

.ba-auth .form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AA8B0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.ba-auth .form-select:focus{
  background-color: var(--elev);
  border-color: var(--mint);
  color: var(--text);
  box-shadow: 0 0 0 0.2rem rgba(249, 11, 11, 0.15);
}

body.ba-auth .ba-stats-bar{
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
}

body.ba-auth .ba-risk-box{
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

body.ba-auth .ba-auth-panel{
  background: var(--page);
}
body.ba-auth .ba-auth-card{
  margin-inline: auto;
}

body.ba-auth .ba-auth-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  max-width: 28rem;
  width: 100%;
  color: var(--text);
  box-shadow: 0 12px 32px rgba(21, 25, 34, 0.08);
}

body.ba-auth .ba-auth-card-wide{
  max-width: 28rem;
}

body.ba-auth .ba-auth-tabs{
  border-bottom: 1px solid var(--line);
  gap: 1.25rem;
}

body.ba-auth .ba-auth-tabs .nav-link{
  border: 0;
  border-radius: 0;
  color: var(--soft);
  padding: 0.65rem 0;
  background: transparent;
}

body.ba-auth .ba-auth-tabs .nav-link.active{
  color: var(--mint);
  border-bottom: 2px solid var(--mint);
  background: transparent;
}

.ba-auth .form-control,
.ba-auth .form-select{
  background: var(--elev);
  border: 1px solid var(--line);
  color: var(--text);
  min-height: 3rem;
  padding-left: 2.75rem;
  border-radius: 10px;
}

.ba-auth .form-control:focus{
  background: var(--elev);
  border-color: var(--mint);
  color: var(--text);
  box-shadow: 0 0 0 0.2rem rgba(249, 11, 11, 0.15);
}

.ba-auth .form-control::placeholder{
  color: var(--soft);
}

body.ba-auth .ba-input-wrap{
  position: relative;
}

body.ba-auth .ba-input-wrap .ba-input-icon{
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--soft);
  pointer-events: none;
  z-index: 2;
}

body.ba-auth .ba-input-wrap .ba-input-action{
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--soft);
  z-index: 2;
}

.ba-auth .form-check-input:checked{
  background-color: var(--mint);
  border-color: var(--mint);
}

.ba-auth .form-check-input:focus{
  border-color: var(--mint);
  box-shadow: 0 0 0 0.2rem rgba(249, 11, 11, 0.25);
}

.ba-auth .form-check-label{
  color: var(--muted);
}

.ba-auth .form-label{
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ba-auth .form-text{
  margin-top: 0.25rem;
  margin-bottom: 0;
}

.ba-auth [id$="Feedback"]:empty{
  display: none;
}

.ba-auth [id$="Feedback"]:not(:empty){
  margin-top: 0.25rem;
}

body.ba-auth .btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mint);
  --bs-btn-border-color: var(--mint);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mint-press);
  --bs-btn-hover-border-color: var(--mint-press);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mint-press);
  --bs-btn-active-border-color: var(--mint-press);
  --bs-btn-disabled-bg: var(--mint);
  --bs-btn-disabled-border-color: var(--mint);
  --bs-btn-disabled-color: #fff;
  --bs-btn-focus-shadow-rgb: 249, 11, 11;
}

body.ba-auth .ba-alert-host:empty{
  display: none;
}

body.ba-auth .ba-btn-auth{
  background-color: var(--mint);
  border-color: var(--mint);
  color: #fff;
  font-weight: 700;
  min-height: 3rem;
  border-radius: 999px;
}

body.ba-auth .btn-primary.ba-btn-auth:hover,
body.ba-auth .btn-primary.ba-btn-auth:focus,
body.ba-auth .btn-primary.ba-btn-auth:focus-visible,
body.ba-auth .ba-btn-auth:hover,
body.ba-auth .ba-btn-auth:focus,
body.ba-auth .ba-btn-auth:focus-visible{
  background-color: var(--mint-press);
  border-color: var(--mint-press);
  color: #fff;
}

body.ba-auth :not(.btn-check) + .btn-primary:active,
body.ba-auth .btn-primary:first-child:active,
body.ba-auth .btn-primary.active,
body.ba-auth .btn-primary:active,
body.ba-auth .ba-btn-auth:active,
body.ba-auth .ba-btn-auth.active{
  background-color: var(--mint-press);
  border-color: var(--mint-press);
  color: #fff;
}

body.ba-auth .ba-btn-social{
  background: var(--elev);
  border: 1px solid var(--line);
  color: var(--text);
  min-height: 3rem;
  border-radius: 999px;
}

body.ba-auth .ba-btn-social:hover{
  border-color: var(--mint);
  color: var(--mint);
  background: var(--elev);
}

body.ba-auth .ba-btn-outline-auth{
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
  min-height: 3rem;
  border-radius: 999px;
}

body.ba-auth .ba-btn-outline-auth:hover{
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

body.ba-auth .ba-auth-card .ba-btn-outline-auth{
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}

body.ba-auth .ba-auth-card .ba-btn-outline-auth:hover,
body.ba-auth .ba-auth-card .ba-btn-outline-auth:focus{
  border-color: var(--mint);
  color: var(--mint);
  background: transparent;
}

.ba-auth .alert{
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 12px;
  padding: .85rem 1.1rem;
  color: var(--text);
  animation: baAuthNoticeIn .24s ease-out both;
}

.ba-auth .invalid-feedback:not(:empty),
.ba-auth .valid-feedback:not(:empty){
  animation: baAuthFieldFeedbackIn .18s ease-out both;
}

@keyframes baAuthNoticeIn{
  from { opacity: 0; transform: translateY(.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes baAuthFieldFeedbackIn{
  from { opacity: 0; transform: translateY(.2rem); }
  to { opacity: 1; transform: translateY(0); }
}

.ba-auth .alert-warning{
  background: rgba(180, 83, 9, 0.12);
  border-left-color: #B45309;
}

.ba-auth .alert-danger{
  background: rgba(249, 11, 11, 0.1);
  border-left-color: #F90B0B;
}

.ba-auth .alert-success{
  background: rgba(22, 128, 60, 0.12);
  border-left-color: #16803C;
}

.ba-auth .alert-info{
  background: rgba(37, 99, 235, 0.1);
  border-left-color: #2563EB;
}

.ba-auth a.link-primary{
  color: var(--mint) !important;
  text-decoration: none;
}

.ba-auth a.link-primary:hover{
  text-decoration: underline;
}

.ba-auth .text-primary{
  color: var(--mint) !important;
}

body.ba-auth .ba-divider{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--soft);
  font-size: 0.85rem;
}

body.ba-auth .ba-divider::before,
body.ba-auth .ba-divider::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

body.ba-auth .ba-logo-word{
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.ba-auth .ba-secure-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(249, 11, 11, 0.28);
  border-radius: 999px;
  color: var(--mint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(249, 11, 11, 0.08);
}

body.ba-auth .ba-auth-icon-circle{
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 11, 11, 0.12);
  color: var(--mint);
  font-size: 1.35rem;
  border: 1px solid rgba(249, 11, 11, 0.35);
}

body.ba-auth-page{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.ba-auth .ba-auth-topbar,
body.ba-auth .ba-auth-footer{
  background: var(--page);
  border-color: var(--line);
}

body.ba-auth .ba-auth-topbar{
  border-bottom: 1px solid var(--line);
}

body.ba-auth .ba-auth-footer{
  border-top: 1px solid var(--line);
  margin-top: auto;
}

body.ba-auth .ba-auth-body{
  flex: 1;
  min-height: 0;
}

body.ba-auth .ba-footer-link{
  color: var(--soft);
  text-decoration: none;
}

body.ba-auth .ba-footer-link:hover{
  color: var(--mint);
}

body.ba-auth .ba-social{
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  font-size: 0.85rem;
}

body.ba-auth .ba-req-box{
  background: rgba(249, 11, 11, 0.06);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
}

body.ba-auth .ba-req-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

body.ba-auth .ba-req-list li{
  color: var(--soft);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

body.ba-auth .ba-req-list li i{
  color: var(--line);
}

body.ba-auth .ba-req-list li.is-met{
  color: var(--muted);
}

body.ba-auth .ba-req-list li.is-met i{
  color: var(--mint);
}

body.ba-auth .ba-strength{
  display: flex;
  align-items: center;
  gap: 1rem;
}

body.ba-auth .ba-strength-bars{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

body.ba-auth .ba-strength-bars span{
  height: 0.3rem;
  border-radius: 999px;
  background: var(--line);
}

body.ba-auth .ba-strength-bars.level-1 span:nth-child(1){
  background: var(--danger);
}

body.ba-auth .ba-strength-bars.level-2 span:nth-child(-n + 2){
  background: var(--warning);
}

body.ba-auth .ba-strength-bars.level-3 span:nth-child(-n + 3){
  background: var(--warning);
}

body.ba-auth .ba-strength-bars.level-4 span{
  background: var(--success);
}

body.ba-auth .ba-register-phone-field{
  position: relative;
  z-index: 30;
}

body.ba-auth .ba-register-phone-field .iti{
  position: relative;
  z-index: 30;
}

body.ba-auth .ba-auth-panel .iti{
  width: 100%;
  display: block;
}

body.ba-auth .ba-auth-panel .iti .iti__tel-input,
body.ba-auth .ba-auth-panel .iti input.form-control{
  width: 100%;
  min-height: 3rem;
  padding-right: 0.75rem;
  padding-left: 0;
  border-radius: 0.85rem;
  background: var(--elev);
  border: 1px solid var(--line);
  color: var(--text);
}

body.ba-auth .ba-auth-panel .iti__selected-country-primary{
  padding-left: 0.75rem;
  padding-right: 0.35rem;
}

body.ba-auth .ba-auth-panel .iti__selected-dial-code{
  color: var(--text);
  font-size: 0.95rem;
}

body.ba-auth .ba-auth-panel .iti__arrow{
  border-color: var(--soft);
}

body.ba-auth .ba-auth-panel .iti__country-list,
body.ba-auth .ba-auth-panel .iti__country-selector{
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45);
  color: var(--text);
  z-index: 1060;
}

body.ba-auth .ba-auth-panel .iti__search-input-wrapper{
  border-color: var(--line);
}

body.ba-auth .ba-auth-panel .iti__search-input{
  background: var(--panel);
  color: var(--text);
}

body.ba-auth .ba-auth-panel .iti__country.iti__highlight,
body.ba-auth .iti__country.iti__highlight{
  background: rgba(249, 11, 11, 0.12);
}

body.ba-auth .iti--detached-country-selector .iti__country-selector,
body.ba-auth .iti--detached-country-selector .iti__country-list{
  background: var(--elev);
  border-color: var(--line);
  color: var(--text);
}

body.ba-auth .iti--detached-country-selector:not(.iti--fullscreen-popup) .iti__country-selector{
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

body.ba-auth .iti--detached-country-selector .iti__search-input-wrapper{
  border-color: var(--line);
  background: var(--panel);
}

body.ba-auth .iti--detached-country-selector .iti__search-input{
  background: var(--panel);
  color: var(--text);
}

body.ba-auth .iti--detached-country-selector .iti__search-icon-svg{
  stroke: var(--soft);
}

body.ba-auth .iti--detached-country-selector .iti__country-check{
  color: var(--mint);
}

body.ba-auth .iti--fullscreen-popup.iti--detached-country-selector{
  z-index: 2000;
}

body.ba-auth .iti--fullscreen-popup .iti__country-selector{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  color: var(--text);
  max-height: calc(100vh - 60px);
}

body.ba-auth .iti--fullscreen-popup .iti__search-input-wrapper{
  border-color: var(--line);
}

body.ba-auth .iti--fullscreen-popup .iti__search-input{
  background: var(--elev);
  color: var(--text);
}

body.ba-auth .ba-register-steps{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

body.ba-auth .ba-register-step{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--soft);
  font-size: 0.85rem;
}

body.ba-auth .ba-register-step.is-active,
body.ba-auth .ba-register-step.is-complete{
  color: var(--text);
}

body.ba-auth .ba-register-step-num{
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

body.ba-auth .ba-register-step.is-active .ba-register-step-num{
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}

body.ba-auth .ba-register-step.is-complete .ba-register-step-num{
  background: rgba(22, 128, 60, 0.15);
  border-color: var(--success);
  color: var(--success);
}

body.ba-auth .ba-register-step-line{
  flex: 1;
  max-width: 3.5rem;
  height: 1px;
  background: var(--line);
}

body.ba-auth .ba-register-step-line.is-complete{
  background: var(--mint);
}

@media (max-width: 991.98px) {
  body.ba-auth .ba-auth-promo{
    display: block !important;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: 15rem;
    min-height: 15rem;
    border: 0;
  }
  body.ba-auth .ba-auth-hero{
    object-position: 16% 32%;
  }

  body.ba-auth .ba-auth-promo-inner{
    display: none !important;
  }

  body.ba-auth .ba-auth-panel{
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 0;
    background: var(--page);
  }
}

@media (max-width: 575.98px) {
  body.ba-auth .ba-register-step-label{
    display: none;
  }

  body.ba-auth .ba-strength{
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }

  body.ba-auth .ba-phone-group .ba-dial{
    width: 4.75rem;
  }
}

/* Mockup split: light copy on the left, form card on the right. */
body.ba-auth .ba-auth-promo{
  background: var(--page) !important;
  background-image: none !important;
  border-right: 1px solid var(--border);
  color: var(--text);
}

/* Fallback when hero <img> is unavailable; desktop marketing uses the lifestyle <img> instead. */
body.ba-auth .ba-auth-promo::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--page) 0%, rgba(247, 248, 250, 0) 36%),
    url("../images/landing/auth-hero.webp") 22% 80% / cover no-repeat;
  pointer-events: none;
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth-promo::after{
  background:
    linear-gradient(180deg, #080B12 0%, rgba(8, 11, 18, 0) 36%),
    url("../images/landing/auth-hero-dark.webp") 22% 80% / cover no-repeat;
}

body.ba-auth .ba-auth-promo,
body.ba-auth .ba-auth-promo .fw-semibold,
body.ba-auth .ba-auth-title{
  color: var(--text);
}

body.ba-auth .ba-auth-promo .ba-auth-content{
  position: relative;
  z-index: 1;
  margin-top: 1rem !important;
  margin-bottom: auto !important;
}
body.ba-auth .ba-auth-promo-brand{
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
  text-decoration: none;
}

body.ba-auth .ba-auth-promo .ba-auth-intro,
body.ba-auth .ba-auth-promo .ba-auth-muted,
body.ba-auth .ba-auth-promo .ba-auth-secondary{
  color: var(--muted);
}

body.ba-auth .ba-feature-icon{
  border-radius: 50%;
  background: rgba(249, 11, 11, 0.1);
  border-color: transparent;
  color: var(--mint);
}

html[data-theme="dark"]:has(body.ba-auth) .ba-feature-icon{
  background: rgba(249, 11, 11, 0.2);
}

html:has(body.ba-auth){
  background: var(--page);
  color-scheme: light;
}

html[data-theme="dark"]:has(body.ba-auth){
  color-scheme: dark;
}

body.ba-auth{
  height: auto !important;
  overflow: auto !important;
  background: var(--page);
  color: var(--text);
}

@media (min-width: 992px) {
  body.ba-auth{
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
}

body.ba-auth .ba-auth-panel{
  background: var(--page);
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4.75rem 1.25rem 5.5rem !important;
  scrollbar-color: rgba(21, 25, 34, .28) transparent;
}

body.ba-auth .ba-auth-card{
  margin-top: auto;
  margin-bottom: auto;
  flex: 0 0 auto;
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth-panel{
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

@media (min-width: 992px) {
  body.ba-auth .ba-auth-promo-inner{
    padding-top: clamp(4.5rem, 10vh, 7rem) !important;
    padding-bottom: 5.5rem !important;
  }
  body.ba-auth .ba-auth-promo .ba-auth-content{
    margin-top: 0 !important;
  }
}

@media (max-height: 920px) and (min-width: 992px) {
  body.ba-auth .ba-auth-promo::after{
    content: none;
  }
}

body.ba-auth .ba-auth-card{
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(21, 25, 34, 0.06);
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth-card{
  box-shadow: none;
}

body.ba-auth .ba-auth-card-brand.d-lg-none{
  display: inline-flex !important;
}

body.ba-auth .ba-auth-card h1,
.ba-auth .form-label{
  color: var(--text);
}

body.ba-auth .ba-auth-card .ba-auth-secondary,
.ba-auth .form-check-label,
.ba-auth .form-text{
  color: var(--muted);
}

.ba-auth .form-control,
.ba-auth .form-select{
  background: var(--elev);
  color: var(--text);
  border-color: var(--border);
}

.ba-auth .form-control:focus,
.ba-auth .form-select:focus{
  background: var(--elev);
  color: var(--text);
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(249, 11, 11, .28);
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth .form-control,
html[data-theme="dark"]:has(body.ba-auth) .ba-auth .form-select,
html[data-theme="dark"]:has(body.ba-auth) .ba-auth .form-control:focus,
html[data-theme="dark"]:has(body.ba-auth) .ba-auth .form-select:focus{
  background: var(--page);
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth .form-control:focus,
html[data-theme="dark"]:has(body.ba-auth) .ba-auth .form-select:focus{
  box-shadow: 0 0 0 4px rgba(249, 11, 11, .40);
}

.ba-auth .form-control::placeholder{
  color: var(--muted);
}

body.ba-auth [data-stb-theme-toggle]{
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
  z-index: 1080;
}

@media (max-width: 991.98px) {
  body.ba-auth .ba-auth-panel{
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}

@media (max-width: 575.98px) {
  body.ba-auth .ba-auth-card{
    padding: 1.15rem !important;
  }
}

.ba-auth-marketing .ba-auth-title{
  font-size: clamp(2rem, 3.2vw, 3.15rem);
}

.ba-auth-marketing .ba-auth-promo::after{
  background:
    linear-gradient(180deg, var(--page) 0%, rgba(247, 248, 250, 0) 28%),
    url("../images/landing/auth-hero.webp") 22% 80% / cover no-repeat;
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth-marketing .ba-auth-promo::after{
  background:
    linear-gradient(180deg, #080B12 0%, rgba(8, 11, 18, 0) 28%),
    url("../images/landing/auth-hero-dark.webp") 22% 80% / cover no-repeat;
}

.ba-auth-marketing .ba-auth-caption{
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  z-index: 1;
  max-width: 11rem;
  margin: 0;
  color: #fff;
  font-family: "Great Vibes", cursive;
  font-size: 2.15rem;
  line-height: 1.05;
  text-align: right;
  text-shadow: 0 0.15rem 0.6rem rgba(0, 0, 0, .65);
}

.ba-auth-marketing .ba-auth-panel{
  background: var(--page);
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth-marketing .ba-auth-panel{
  background: #080B12;
}

body.ba-auth.ba-auth-marketing .ba-auth-card{
  background: #fff;
  border-color: #E0E4EA;
  box-shadow: 0 1.25rem 3rem rgba(21, 25, 34, .16);
  backdrop-filter: none;
}

html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-card{
  background: #111621;
  border-color: #293142;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .45);
}

/* Mockup split: copy on top-left, large lifestyle hero anchored lower-left (writing-block.md). */
@media (min-width: 992px) {
  body.ba-auth .container-fluid.ba-auth-split,
  body.ba-auth .row.ba-auth-split{
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--page) !important;
    background-image: none !important;
  }
  body.ba-auth .ba-auth-promo,
  .ba-auth-marketing .ba-auth-promo{
    position: relative;
    overflow: hidden;
    background: var(--page) !important;
    background-image: none !important;
    border-right: 0 !important;
  }
  /* No duplicate wave/scrim layers — lifestyle hero already has the scene. */
  body.ba-auth .ba-auth-promo::after,
  .ba-auth-marketing .ba-auth-promo::after,
  body.ba-auth.ba-auth-marketing .ba-auth-promo::before,
  body.ba-auth.ba-auth-marketing .ba-auth-promo-inner::before{
    content: none !important;
    display: none !important;
  }
  body.ba-auth .ba-auth-hero{
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 62%;
    min-height: 22rem;
    object-fit: cover;
    object-position: 18% 55%;
    z-index: 0;
    pointer-events: none;
    /* Soft fade into page color so the photo has no hard box edge. */
    -webkit-mask-image: linear-gradient(to top, #000 72%, rgba(0,0,0,.55) 90%, transparent 100%);
    mask-image: linear-gradient(to top, #000 72%, rgba(0,0,0,.55) 90%, transparent 100%);
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth .ba-auth-hero{
    /* Dark asset already sits on black — keep subject left, blend into page. */
    object-position: 12% 48%;
    -webkit-mask-image: linear-gradient(to top, #000 78%, rgba(0,0,0,.5) 92%, transparent 100%);
    mask-image: linear-gradient(to top, #000 78%, rgba(0,0,0,.5) 92%, transparent 100%);
  }
  body.ba-auth .ba-auth-hero-light{ display: block !important; }
  body.ba-auth .ba-auth-hero-dark{ display: none !important; }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth .ba-auth-hero-light{ display: none !important; }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth .ba-auth-hero-dark{ display: block !important; }
  body.ba-auth .ba-auth-panel,
  .ba-auth-marketing .ba-auth-panel,
  html[data-theme="dark"]:has(body.ba-auth) .ba-auth-marketing .ba-auth-panel{
    position: relative;
    z-index: 3;
    background: var(--page) !important;
    background-image: none !important;
  }
  body.ba-auth.ba-auth-marketing .ba-auth-promo-inner{
    position: relative;
    z-index: 2;
    justify-content: flex-start !important;
    padding-top: 1.5rem !important;
    padding-bottom: 42% !important;
    min-height: 100%;
  }
  body.ba-auth.ba-auth-marketing .ba-auth-content{
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 34rem;
    flex: 0 0 auto;
  }
  body.ba-auth.ba-auth-marketing .ba-auth-title,
  body.ba-auth.ba-auth-marketing .ba-auth-promo,
  body.ba-auth.ba-auth-marketing .ba-auth-promo .fw-semibold{
    color: #151922 !important;
  }
  body.ba-auth.ba-auth-marketing .ba-auth-title .accent{
    color: #F90B0B !important;
  }
  body.ba-auth.ba-auth-marketing .ba-auth-promo .ba-auth-intro,
  body.ba-auth.ba-auth-marketing .ba-auth-promo .ba-auth-muted{
    color: #5D6675 !important;
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-title,
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-promo,
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-promo .fw-semibold{
    color: #F5F7FA !important;
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-title .accent{
    color: #F90B0B !important;
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-promo .ba-auth-intro,
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-promo .ba-auth-muted{
    color: #A9B2C1 !important;
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-promo .logo-on-light{
    display: none !important;
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-promo .logo-on-dark{
    display: block !important;
  }
  body.ba-auth.ba-auth-marketing .ba-auth-content .col > .d-flex{
    align-items: center !important;
    padding: 0 !important;
    border-radius: 0;
    background: transparent !important;
  }
  body.ba-auth.ba-auth-marketing .ba-feature-icon{
    width: 2.65rem;
    height: 2.65rem;
    border: 1.5px solid #F90B0B;
    border-radius: 50%;
    background: transparent;
    color: #F90B0B;
    box-shadow: none;
    flex: 0 0 auto;
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-feature-icon{
    background: transparent;
    border: 1.5px solid #F90B0B;
  }
  body.ba-auth.ba-auth-marketing .ba-auth-caption{
    display: block !important;
    position: absolute;
    left: 1.5rem;
    right: auto;
    bottom: 7%;
    max-width: 15rem;
    margin: 0;
    font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive;
    font-size: 1.65rem;
    line-height: 1.2;
    color: #fff;
    text-align: left;
    text-shadow: 0 0.12rem 0.55rem rgba(0, 0, 0, .55);
    z-index: 2;
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth.ba-auth-marketing .ba-auth-caption{
    color: #fff;
  }
  body.ba-auth.ba-auth-marketing .ba-auth-caption::after{
    content: "";
    display: block;
    width: 72%;
    height: .18rem;
    margin-top: .2rem;
    margin-left: .35rem;
    background: #F90B0B;
    border-radius: 1rem;
    transform: rotate(-8deg);
  }
  body.ba-auth .ba-auth-panel{
    padding: 1.15rem 1.5rem !important;
    justify-content: center !important;
  }
  body.ba-auth .ba-auth-card{
    width: min(100%, 28rem);
    max-width: min(100%, 28rem);
    padding: 1.1rem 1.35rem .9rem !important;
  }
  body.ba-auth .ba-auth-card > .mb-4{
    margin-bottom: .65rem !important;
  }
  body.ba-auth .ba-auth-card .form-check,
  body.ba-auth .ba-auth-card .ba-btn-auth{
    margin-bottom: .65rem !important;
  }
  body.ba-auth .ba-auth-card .ba-auth-card-brand{
    margin-bottom: .65rem !important;
  }
  body.ba-auth .ba-auth-card .form-label{
    margin-bottom: .2rem;
  }
  body.ba-auth .ba-auth-card .form-control,
  body.ba-auth .ba-auth-panel .iti .iti__tel-input,
  body.ba-auth .ba-auth-panel .iti input.form-control,
  body.ba-auth .ba-auth-card .ba-btn-auth{
    min-height: 2.55rem;
  }
  body.ba-auth .ba-req-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .2rem 1rem;
  }
}

@media (max-width: 991.98px) {
  body.ba-auth .ba-auth-promo,
  body.ba-auth .ba-auth-hero{
    display: none !important;
  }
  body.ba-auth .container-fluid.ba-auth-split,
  body.ba-auth .row.ba-auth-split{
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  body.ba-auth .ba-auth-panel,
  .ba-auth-marketing .ba-auth-panel,
  html[data-theme="dark"]:has(body.ba-auth) .ba-auth-marketing .ba-auth-panel{
    display: flex !important;
    flex: 1 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
    justify-content: safe center !important;
    margin-inline: 0 !important;
    background: var(--page) !important;
    background-image: none !important;
    padding: 4.25rem 1rem !important;
  }
  body.ba-auth .ba-auth-card{
    width: min(100%, 28rem);
    margin: auto !important;
  }
}

@media (max-height: 920px) and (min-width: 992px) {
  .ba-auth-marketing .ba-auth-caption{
    display: none;
  }
}

.ba-auth-marketing .ba-auth-content,
.ba-auth-marketing .ba-auth-card{
  animation: authRise .7s cubic-bezier(.22, 1, .36, 1) both;
}

.ba-auth-marketing .ba-auth-card{
  animation-delay: .12s;
}

@keyframes authRise {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-auth-marketing .ba-auth-content,
.ba-auth-marketing .ba-auth-card{
    animation: none;
  }
  .ba-auth .alert,
  .ba-auth .invalid-feedback:not(:empty),
  .ba-auth .valid-feedback:not(:empty){
    animation: none;
  }
}

/* landing.css */
/* SmartTradeBinary public pages. Light is the default. */
html:has(body.ba-landing){
  --primary: #F90B0B;
  --primary-hover: #D90808;
  --bg-deep: #F7F8FA;
  --bg-main: #F7F8FA;
  --bg-card: #FFFFFF;
  --bg-elevated: #F7F8FA;
  --border: #E0E4EA;
  --text-primary: #151922;
  --text-secondary: #5D6675;
  --text-muted: #5D6675;
  --success: #16803C;
  --danger: #DC2626;
  --warning: #B45309;

  --ba-primary: var(--primary);
  --ba-primary-hover: var(--primary-hover);
  --ba-bg-deep: var(--bg-deep);
  --ba-bg-main: var(--bg-main);
  --ba-bg-card: var(--bg-card);
  --ba-bg-elevated: var(--bg-elevated);
  --ba-border: var(--border);
  --ba-text: var(--text-primary);
  --ba-text-secondary: var(--text-secondary);
  --ba-text-muted: var(--text-muted);
  --ba-danger: var(--danger);
  --ba-warning: var(--warning);
}

html:has(body.ba-landing):has(body.ba-landing){
  background: var(--ba-bg-main);
  color-scheme: light;
}

html[data-theme="dark"]:has(body.ba-landing):has(body.ba-landing){
  color-scheme: dark;
}

body.ba-landing{
  --bs-primary: #F90B0B;
  --bs-primary-rgb: 249, 11, 11;
  --bs-success: #16803C;
  --bs-success-rgb: 22, 128, 60;
  --bs-danger: #DC2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-warning: #B45309;
  --bs-warning-rgb: 180, 83, 9;
  --bs-body-bg: #F7F8FA;
  --bs-body-bg-rgb: 247, 248, 250;
  --bs-body-color: #151922;
  --bs-body-color-rgb: 21, 25, 34;
  --bs-secondary-color: #5D6675;
  --bs-secondary-color-rgb: 93, 102, 117;
  --bs-tertiary-color: #5D6675;
  --bs-border-color: #E0E4EA;
  --bs-secondary-bg: #FFFFFF;
  --bs-tertiary-bg: #F7F8FA;
  --bs-link-color: #F90B0B;
  --bs-link-hover-color: #D90808;
  --bs-emphasis-color: #151922;
  --bs-primary-text-emphasis: #F90B0B;
  --bs-success-text-emphasis: #16803C;
  --bs-danger-text-emphasis: #DC2626;
  --bs-card-bg: #FFFFFF;
  --bs-card-cap-bg: #F7F8FA;
  --bs-card-border-color: #E0E4EA;
  background: var(--ba-bg-main);
  color: var(--ba-text);
  font-family: "DM Sans", system-ui, sans-serif;
}

body.ba-landing h1,
body.ba-landing h2,
body.ba-landing h3,
body.ba-landing h4,
body.ba-landing h5,
body.ba-landing h6{
  font-family: Outfit, "DM Sans", sans-serif;
}

html[data-theme="dark"]:has(body.ba-landing){
  --bg-deep: #080B12;
  --bg-main: #080B12;
  --bg-card: #111621;
  --bg-elevated: #171E2B;
  --border: #293142;
  --text-primary: #F5F7FA;
  --text-secondary: #A9B2C1;
  --text-muted: #A9B2C1;
  --primary-hover: #FF3030;
  --success: #4ADE80;
  --danger: #FF6464;
  --warning: #FBBF24;
}

html[data-theme="dark"]:has(body.ba-landing) body.ba-landing{
  --bs-body-bg: #080B12;
  --bs-body-bg-rgb: 8, 11, 18;
  --bs-body-color: #F5F7FA;
  --bs-body-color-rgb: 245, 247, 250;
  --bs-secondary-color: #A9B2C1;
  --bs-secondary-color-rgb: 169, 178, 193;
  --bs-tertiary-color: #A9B2C1;
  --bs-border-color: #293142;
  --bs-secondary-bg: #111621;
  --bs-tertiary-bg: #171E2B;
  --bs-emphasis-color: #F5F7FA;
  --bs-card-bg: #111621;
  --bs-card-cap-bg: #171E2B;
  --bs-card-border-color: #293142;
  --bs-success: #4ADE80;
  --bs-success-rgb: 74, 222, 128;
  --bs-danger: #FF6464;
  --bs-danger-rgb: 255, 100, 100;
  --bs-warning: #FBBF24;
  --bs-link-hover-color: #FF3030;
  --bs-success-text-emphasis: #4ADE80;
  --bs-danger-text-emphasis: #FF6464;
}

.ba-landing .navbar{
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ba-border);
}

html[data-theme="dark"]:has(body.ba-landing) .ba-landing .navbar{
  background: rgba(8, 11, 18, 0.92);
}

.ba-landing .navbar-brand img{
  height: 40px;
  width: auto;
}

.ba-landing .nav-link{
  color: var(--ba-text-secondary) !important;
}

.ba-landing .nav-link:hover,
.ba-landing .nav-link:focus,
.ba-landing .nav-link.active{
  color: var(--ba-primary) !important;
}

body.ba-landing .ba-dropdown{
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
}

body.ba-landing .ba-lang{
  color: var(--ba-text-secondary);
  padding: 0.25rem 0.5rem;
}

body.ba-landing .ba-btn-primary{
  background: var(--ba-primary);
  border-color: var(--ba-primary);
  color: #fff;
  font-weight: 700;
}

body.ba-landing .ba-btn-primary:hover{
  background: var(--ba-primary-hover);
  border-color: var(--ba-primary-hover);
  color: #fff;
}

.ba-landing .btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: #F90B0B;
  --bs-btn-border-color: #F90B0B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #D90808;
  --bs-btn-hover-border-color: #D90808;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #D90808;
  --bs-btn-active-border-color: #D90808;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #F90B0B;
  --bs-btn-disabled-border-color: #F90B0B;
  --bs-btn-focus-shadow-rgb: 249, 11, 11;
  font-weight: 700;
}

.ba-landing .btn-success{
  --bs-btn-color: #fff;
  --bs-btn-bg: #16803C;
  --bs-btn-border-color: #16803C;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #15803D;
  --bs-btn-hover-border-color: #15803D;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #15803D;
  --bs-btn-active-border-color: #15803D;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #16803C;
  --bs-btn-disabled-border-color: #16803C;
  --bs-btn-focus-shadow-rgb: 22, 128, 60;
  font-weight: 700;
}

.ba-landing .btn-danger{
  --bs-btn-color: #fff;
  --bs-btn-bg: #F90B0B;
  --bs-btn-border-color: #F90B0B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #D90808;
  --bs-btn-hover-border-color: #D90808;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #D90808;
  --bs-btn-active-border-color: #D90808;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #F90B0B;
  --bs-btn-disabled-border-color: #F90B0B;
  --bs-btn-focus-shadow-rgb: 249, 11, 11;
  font-weight: 700;
}

.ba-landing .btn-outline-secondary,
.ba-landing .btn-outline-primary{
  --bs-btn-color: var(--ba-text);
  --bs-btn-border-color: var(--ba-border);
  --bs-btn-hover-color: #F90B0B;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #F90B0B;
  --bs-btn-active-color: #F90B0B;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #F90B0B;
  --bs-btn-disabled-color: var(--ba-text-muted);
  --bs-btn-disabled-border-color: var(--ba-border);
  --bs-btn-focus-shadow-rgb: 249, 11, 11;
}

.ba-landing .card{
  --bs-card-bg: var(--ba-bg-card);
  --bs-card-cap-bg: var(--ba-bg-elevated);
  --bs-card-border-color: var(--ba-border);
  --bs-card-color: var(--ba-text);
  color: var(--ba-text);
}

.ba-landing .text-muted{
  color: var(--ba-text-muted) !important;
}

.ba-landing .badge-soft-primary{
  background: rgba(249, 11, 11, 0.12);
  color: #F90B0B;
  border: 1px solid rgba(249, 11, 11, 0.28);
}

.ba-landing .badge-soft-secondary{
  background: rgba(167, 180, 188, 0.08);
  color: #A7B4BC;
  border: 1px solid var(--ba-border);
}

body.ba-landing .ba-btn-ghost{
  border: 1px solid var(--ba-border);
  color: var(--ba-text);
  background: transparent;
}

body.ba-landing .ba-btn-ghost:hover{
  border-color: var(--ba-primary);
  color: var(--ba-primary);
  background: transparent;
}

body.ba-landing .ba-hero{
  position: relative;
  overflow: hidden;
  min-height: 0;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(249, 11, 11, 0.09), transparent 50%),
    linear-gradient(180deg, var(--ba-bg-deep), var(--ba-bg-main));
}

@media (max-width: 991.98px) {
  body.ba-landing.ba-has-mobile-signup-bar{
    padding-bottom: 5.25rem;
  }
}

@media (min-width: 1400px) {
  .ba-landing .container{
    max-width: 1440px;
  }
}

/* The index mockup uses a compact fixed composition rather than a full-height
   hero; Bootstrap does not provide the required asymmetric column offset. */
@media (min-width: 992px) {
  body.ba-landing .ba-hero .row > .col-lg-5{
    flex: 0 0 38%;
    max-width: 38%;
    padding-top: 3rem;
  }

  body.ba-landing .ba-hero .row > .col-lg-7{
    flex: 0 0 62%;
    max-width: 62%;
  }
}

body.ba-landing .ba-hero-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.32;
  animation: baOrb 14s ease-in-out infinite alternate;
}

body.ba-landing .ba-hero-orb-a{
  width: 28rem;
  height: 28rem;
  top: -8rem;
  right: -6rem;
  background: rgba(249, 11, 11, 0.14);
}

body.ba-landing .ba-hero-orb-b{
  width: 18rem;
  height: 18rem;
  bottom: 10%;
  left: -4rem;
  background: rgba(249, 11, 11, 0.08);
  animation-delay: -4s;
}

@keyframes baOrb {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2%, 4%, 0) scale(1.08); }
}

body.ba-landing .ba-float{
  animation: baFloat 5.5s ease-in-out infinite;
}

@keyframes baFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

body.ba-landing .ba-hero-title{
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

body.ba-landing .ba-hero-title .accent{
  color: var(--ba-primary);
}

body.ba-landing .ba-hero-img{
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

body.ba-landing .ba-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--ba-border);
  background: var(--ba-bg-card);
  color: var(--ba-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.ba-landing .ba-pill .dot{
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ba-primary);
  box-shadow: 0 0 8px var(--ba-primary);
}

body.ba-landing .ba-trust-row{
  color: var(--ba-text-secondary);
  font-size: 0.85rem;
}

@media (min-width: 992px) {
  body.ba-landing .ba-hero .ba-trust-row{
    gap: 0.7rem !important;
    font-size: 0.75rem;
  }

  body.ba-landing .ba-hero > .container{
    padding-bottom: 3.5rem !important;
  }
}

body.ba-landing .ba-trust{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

body.ba-landing .ba-trust i{
  color: var(--ba-primary);
}

body.ba-landing .ba-trade-card{
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

body.ba-landing .ba-trade-card .ba-chart{
  height: 350px;
  background:
    linear-gradient(180deg, transparent 55%, rgba(249, 11, 11, 0.1)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 260' preserveAspectRatio='none'%3E%3Cg stroke='%23152433' stroke-width='1' opacity='.75'%3E%3Cpath d='M0 52h600M0 104h600M0 156h600M0 208h600M100 0v260M200 0v260M300 0v260M400 0v260M500 0v260'/%3E%3C/g%3E%3Cpolyline fill='none' stroke='%23F90B0B' stroke-width='3' points='0,190 18,207 35,178 52,196 70,149 88,165 105,130 122,155 140,116 157,128 175,82 192,102 210,70 228,88 245,51 262,91 280,66 298,112 315,94 332,137 350,105 368,128 385,93 402,115 420,74 438,99 455,61 472,87 490,48 508,72 525,42 542,68 560,35 578,54 600,31'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat,
    var(--ba-bg-elevated);
}

body.ba-landing .ba-trade-card .nav-link.active{
  background: var(--ba-primary) !important;
  color: var(--ba-bg-deep) !important;
  font-weight: 700;
}

body.ba-landing .ba-chart-live{
  position: relative;
  overflow: hidden;
}

body.ba-landing .ba-tv-chart-layer,
body.ba-landing .ba-tv-chart-layer .tradingview-widget-container,
body.ba-landing .ba-tv-chart-layer .tradingview-widget-container__widget,
body.ba-landing .ba-tv-chart-layer iframe{
  width: 100% !important;
  height: 100% !important;
}

body.ba-landing .ba-tv-chart-layer{
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.ba-landing .ba-tv-widget-shield{
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: default;
}

body.ba-landing .ba-tv-chart-layer iframe,
body.ba-landing .ba-ticker-live iframe{
  background-color: var(--ba-bg-elevated) !important;
  color-scheme: dark;
  pointer-events: none !important;
}

body.ba-landing .ba-stake{
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  color: var(--ba-text-secondary);
  font-weight: 600;
}

body.ba-landing .ba-stake.active{
  border-color: var(--ba-primary);
  color: var(--ba-primary);
  background: rgba(249, 11, 11, 0.1);
}

body.ba-landing .ba-amount-fake{
  background: var(--ba-bg-card);
  border-color: var(--ba-border);
  color: var(--ba-text);
}

body.ba-landing .ba-higher{
  background: var(--ba-primary);
  color: #fff;
  font-weight: 700;
}

body.ba-landing .ba-lower{
  background: var(--ba-danger);
  color: #fff;
  font-weight: 700;
}

body.ba-landing .ba-ticker{
  position: relative;
  min-height: 56px;
  background: var(--ba-bg-elevated);
  border-block: 1px solid var(--ba-border);
  overflow: hidden;
  color-scheme: dark;
}

body.ba-landing .ba-ticker-live,
body.ba-landing .ba-ticker-live .tradingview-widget-container,
body.ba-landing .ba-ticker-live .tradingview-widget-container__widget,
body.ba-landing .ba-ticker-live iframe{
  width: 100% !important;
  height: 56px !important;
}

body.ba-landing .ba-ticker-live,
body.ba-landing .ba-ticker-live .tradingview-widget-container,
body.ba-landing .ba-ticker-live .tradingview-widget-container__widget,
body.ba-landing .ba-ticker-live iframe{
  background-color: var(--ba-bg-elevated) !important;
  color-scheme: dark;
}

body.ba-landing .ba-ticker-live{
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}

body.ba-landing .ba-ticker.is-ready .ba-ticker-live{
  opacity: 1;
}

body.ba-landing .ba-ticker.is-ready .ba-ticker-fallback{
  visibility: hidden;
}

body.ba-landing .ba-ticker-track{
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: baTicker 32s linear infinite;
}

body.ba-landing .ba-ticker-item{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  color: var(--ba-text-secondary);
  font-size: 0.9rem;
}

body.ba-landing .ba-ticker-item img{
  flex: 0 0 auto;
  border-radius: 50%;
}

body.ba-landing .ba-ticker-symbol-icon{
  width: 1.375rem;
  height: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  font-size: 0.68rem;
  font-weight: 800;
}

body.ba-landing .ba-ticker-item .up{ color: var(--ba-primary); }
body.ba-landing .ba-ticker-item .down{ color: var(--ba-danger); }

@keyframes baTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

body.ba-landing .ba-feature-card,
body.ba-landing .ba-step-card,
body.ba-landing .ba-bot-card,
body.ba-landing .ba-automation-card,
body.ba-landing .ba-market-card,
body.ba-landing .ba-quote-card,
body.ba-landing .ba-perf-card{
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  border-radius: 0.9rem;
}

body.ba-landing .ba-feature-icon{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ba-primary);
  background: rgba(249, 11, 11, 0.12);
  border: 1px solid var(--ba-border);
  font-size: 1.1rem;
}

body.ba-landing .ba-step-circle{
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid var(--ba-border);
  background: rgba(249, 11, 11, 0.1);
  color: var(--ba-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  position: relative;
}

@media (min-width: 992px) {
  body.ba-landing .ba-step-card{
    min-height: 140px;
  }
}

body.ba-landing .ba-step-index{
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.ba-landing .ba-eyebrow{
  color: var(--ba-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.ba-landing .ba-check-list{
  list-style: none;
  padding-left: 0;
}

body.ba-landing .ba-check-list li{
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

body.ba-landing .ba-check-list i{
  color: var(--ba-primary);
  margin-top: 0.15rem;
}

body.ba-landing .ba-market-card{
  min-height: 205px;
}

body.ba-landing .ba-market-icon{
  width: 2.15rem;
  height: 2.15rem;
  object-fit: contain;
  flex: 0 0 auto;
}

body.ba-landing .ba-market-icon-gold{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 185, 66, 0.38);
  border-radius: 50%;
  color: var(--ba-warning);
  background: rgba(245, 185, 66, 0.1);
}

body.ba-landing .ba-automation-card{
  min-height: 295px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 45%, rgba(249, 11, 11, 0.13), transparent 38%),
    var(--ba-bg-card);
}

body.ba-landing .ba-automation-visual{
  min-height: 196px;
  display: grid;
  grid-template-columns: minmax(105px, 48%) 1fr;
  align-items: center;
  gap: 0.65rem;
}

body.ba-landing .ba-automation-visual img{
  width: 100%;
  height: auto;
  max-height: 168px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(249, 11, 11, 0.24));
  animation: baAutomationFloat 5.5s ease-in-out infinite;
}

@keyframes baAutomationFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

body.ba-landing .ba-sparkline{
  height: 2.25rem;
  border-radius: 0.35rem;
  opacity: 0.9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%23F90B0B' stroke-width='2' points='0,30 20,28 40,22 60,18 80,12 100,8 120,10'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

body.ba-landing .ba-sparkline.down{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%23F90B0B' stroke-width='2' points='0,10 20,12 40,16 60,22 80,28 100,30 120,34'/%3E%3C/svg%3E");
}

body.ba-landing .ba-perf-card{
  min-height: 295px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(249, 11, 11, 0.18), transparent 50%),
    var(--ba-bg-card);
}

body.ba-landing .ba-perf-badge{
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(249, 11, 11, 0.15);
  border: 1px solid rgba(249, 11, 11, 0.35);
  color: var(--ba-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

body.ba-landing .ba-perf-chart{
  height: 120px;
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, rgba(249, 11, 11, 0.25), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%23F90B0B' stroke-width='3' points='0,100 80,95 160,88 240,70 320,55 400,40 480,22 560,12 600,8'/%3E%3C/svg%3E")
      center bottom / 100% 100% no-repeat,
    var(--ba-bg-elevated);
}

body.ba-landing .ba-stats-band{
  background: var(--ba-bg-deep);
  border: 0 !important;
}

body.ba-landing .ba-perf-value{
  color: var(--ba-primary);
  font-size: 1.65rem;
  font-weight: 800;
}

body.ba-landing .ba-stats-band .container{
  padding: 1.25rem 1.5rem;
  background: var(--ba-bg-elevated);
  border: 1px solid var(--ba-border);
  border-radius: 0.9rem;
}

body.ba-landing .ba-stat-inline i{
  color: var(--ba-primary);
  display: block;
  margin-bottom: 0.35rem;
}

body.ba-landing .ba-quote-mark{
  font-size: 1.75rem;
  color: var(--ba-primary);
  display: block;
  margin-bottom: 0.75rem;
}

body.ba-landing .ba-avatar{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(249, 11, 11, 0.2);
  border: 1px solid var(--ba-border);
  color: var(--ba-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

body.ba-landing .ba-avatar-img{
  object-fit: cover;
  padding: 0;
  background: var(--ba-bg-elevated);
}

body.ba-landing .ba-stars{
  color: var(--ba-primary);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

body.ba-landing .ba-testimonial-stage{
  padding-inline: 2rem;
}

body.ba-landing .ba-testimonial-track{
  scroll-behavior: smooth;
  scrollbar-width: none;
}

body.ba-landing .ba-testimonial-track::-webkit-scrollbar{
  display: none;
}

body.ba-landing .ba-carousel-arrow{
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ba-border);
  border-radius: 50%;
  color: var(--ba-text-secondary);
  background: var(--ba-bg-card);
  transform: translateY(-50%);
}

body.ba-landing .ba-carousel-arrow:hover,
body.ba-landing .ba-carousel-arrow:focus-visible{
  border-color: var(--ba-primary);
  color: var(--ba-primary);
}

body.ba-landing .ba-carousel-prev{ left: -0.15rem; }
body.ba-landing .ba-carousel-next{ right: -0.15rem; }

body.ba-landing .ba-cta-banner{
  background:
    radial-gradient(ellipse at 10% 50%, rgba(249, 11, 11, 0.2), transparent 45%),
    var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  border-radius: 1rem;
}

body.ba-landing .ba-cta-icon{
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 11, 11, 0.15);
  border: 1px solid rgba(249, 11, 11, 0.35);
  color: var(--ba-primary);
  font-size: 1.75rem;
}

body.ba-landing .ba-section-muted{
  background: var(--ba-bg-main);
}

body.ba-landing .ba-logo-mark{
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}

body.ba-landing .logo-on-dark{ display: none; }
html[data-theme="dark"]:has(body.ba-landing) .logo-on-light{ display: none !important; }
html[data-theme="dark"]:has(body.ba-landing) .logo-on-dark{ display: block; }

body.ba-landing .ba-footer-links a{
  color: var(--ba-text-muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.45rem;
}

body.ba-landing .ba-footer-links a:hover{
  color: var(--ba-primary);
}

body.ba-landing .ba-social{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--ba-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ba-text-muted);
}

body.ba-landing .ba-news{
  display: flex;
  gap: 0.5rem;
}

body.ba-landing .ba-news .form-control{
  background: var(--ba-bg-elevated);
  border-color: var(--ba-border);
  color: var(--ba-text);
}

body.ba-landing .ba-news .form-control:focus{
  background: var(--ba-bg-elevated);
  border-color: var(--ba-primary);
  color: var(--ba-text);
  box-shadow: 0 0 0 0.2rem rgba(249, 11, 11, 0.15);
}

body.ba-landing .ba-reveal{
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: var(--ba-delay, 0ms);
}

body.ba-landing .ba-reveal.is-in{
  opacity: 1;
  transform: none;
}

@media (min-width: 992px) {
  body.ba-landing .ba-steps .col-lg-3:not(:last-child) .ba-step-card::after{
    content: "";
    position: absolute;
    top: 2.75rem;
    right: -12%;
    width: 24%;
    border-top: 2px dashed var(--ba-border);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ba-landing .ba-ticker-track,
body.ba-landing .ba-reveal,
body.ba-landing .ba-float,
body.ba-landing .ba-hero-orb,
body.ba-landing .ba-automation-visual img,
body.ba-landing .ba-join-phone-wrap,
body.ba-landing .ba-join-phone-wrap::after,
body.ba-landing .ba-join-phone,
body.ba-landing .ba-join-candles{
    animation: none !important;
    transition: none !important;
  }
  body.ba-landing .ba-reveal{ opacity: 1; transform: none; }
  body.ba-landing .ba-float{ transform: none; }
  body.ba-landing .ba-join-phone{
    transform: none;
  }
}

@media (max-width: 767.98px) {
  body.ba-landing .ba-automation-visual{
    grid-template-columns: 42% 1fr;
  }

  body.ba-landing .ba-testimonial-track{
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  body.ba-landing .ba-testimonial-track > [class*="col-"]{
    flex: 0 0 calc(100% - 1.5rem);
    scroll-snap-align: center;
  }
}

@media (max-width: 575.98px) {
  body.ba-landing .ba-automation-visual{
    grid-template-columns: 1fr;
    text-align: center;
  }

  body.ba-landing .ba-automation-visual img{
    width: 150px;
    margin-inline: auto;
  }
}

/* ——— Join (ads landing) ——— */
body.ba-landing .ba-join-hero{
  position: relative;
  overflow: visible;
  background:
    radial-gradient(ellipse at 78% 35%, rgba(249, 11, 11, 0.14), transparent 42%),
    radial-gradient(ellipse at 15% 0%, rgba(249, 11, 11, 0.06), transparent 40%),
    linear-gradient(180deg, var(--ba-bg-deep), var(--ba-bg-main));
}

body.ba-landing .ba-join-eyebrow{
  letter-spacing: 0.08em;
}

body.ba-landing .ba-join-icon{
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: rgba(249, 11, 11, 0.12);
  font-size: 1.1rem;
}

body.ba-landing .ba-join-btn-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.7rem;
}

/* Stage: static candles + animated phone */
body.ba-landing .ba-join-phone-stage{
  position: relative;
  display: inline-block;
  max-width: 480px;
  width: 100%;
  padding: 1rem 0.5rem 1.5rem;
}

body.ba-landing .ba-join-candles{
  position: absolute;
  inset: -4% -18% 0 -22%;
  z-index: 0;
  pointer-events: none;
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.ba-landing .ba-join-candles-art{
  width: 100%;
  max-width: 560px;
  height: auto;
  opacity: 0.92;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(249, 11, 11, 0.18));
}

body.ba-landing .ba-join-phone-wrap{
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 400px;
  padding: 1.25rem 1.5rem 2.5rem;
  animation: baJoinPhoneIn 0.9s ease-out both;
}

body.ba-landing .ba-join-phone-wrap::before{
  content: "";
  position: absolute;
  inset: 8% 12% 12%;
  border-radius: 2rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(249, 11, 11, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body.ba-landing .ba-join-phone-wrap::after{
  content: "";
  position: absolute;
  left: 18%;
  right: 12%;
  bottom: 4%;
  height: 22%;
  background: radial-gradient(ellipse at center, rgba(249, 11, 11, 0.55), transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: rotate(-8deg);
  animation: baJoinGlow 3.6s ease-in-out infinite;
}

body.ba-landing .ba-join-phone{
  position: relative;
  z-index: 1;
  max-height: 560px;
  width: auto;
  /* Asset is already slanted — avoid extra rotate (softens pixels) */
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.35))
    drop-shadow(0 28px 40px rgba(0, 0, 0, 0.55));
  animation: baJoinPhoneFloat 5.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes baJoinPhoneIn {
  from {
    opacity: 0;
    transform: translate3d(1.5rem, 1.25rem, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes baJoinPhoneFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes baJoinGlow {
  0%, 100% {
    opacity: 0.55;
    transform: rotate(-8deg) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: rotate(-8deg) scale(1.08);
  }
}

@media (min-width: 992px) {
  body.ba-landing .ba-join-hero .col-lg-6.text-center{
    overflow: visible;
    padding-inline: 1rem;
  }

  body.ba-landing .ba-join-phone{
    max-height: 580px;
  }
}

/* Solid accent strip like mockup feature bar */
body.ba-landing .ba-join-strip{
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  border: 0;
}

body.ba-landing .ba-join-mid-cta{
  background: linear-gradient(145deg, var(--ba-bg-elevated), var(--ba-bg-card));
  border: 1px solid var(--ba-border);
  border-radius: 1rem;
}

body.ba-landing .ba-join-title-rule{
  width: 3rem;
  height: 3px;
  border-radius: 999px;
  background: var(--ba-primary);
}

body.ba-landing .ba-join-step-num{
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ba-bg-deep);
  background: var(--ba-primary);
}

body.ba-landing .ba-join-step-icon{
  font-size: 1.35rem;
}

@media (min-width: 992px) {
  body.ba-landing .ba-join-steps > [class*="col-"]:not(:last-child) .ba-join-step{
    position: relative;
  }

  body.ba-landing .ba-join-steps > [class*="col-"]:not(:last-child) .ba-join-step::after{
    content: "";
    position: absolute;
    top: 1.1rem;
    left: calc(50% + 1.4rem);
    width: calc(100% - 1.5rem);
    border-top: 2px dashed var(--ba-border);
    pointer-events: none;
  }
}

body.ba-landing .ba-join-refer{
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  border-radius: 1rem;
}

body.ba-landing .ba-join-refer-item-icon{
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgba(249, 11, 11, 0.12);
  margin-bottom: 0.5rem;
}

body.ba-landing .ba-join-refer-visual{
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px dashed var(--ba-border);
  background:
    radial-gradient(circle at center, rgba(249, 11, 11, 0.12), transparent 65%);
}

body.ba-landing .ba-join-refer-core{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-weight: 700;
  font-size: 1.1rem;
}

body.ba-landing .ba-join-refer-core small{
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

body.ba-landing .ba-join-refer-node{
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ba-bg-elevated);
  border: 1px solid var(--ba-border);
  color: var(--ba-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.ba-landing .ba-join-refer-node--1{ top: 8%; left: 50%; transform: translateX(-50%); }
body.ba-landing .ba-join-refer-node--2{ top: 50%; right: 6%; transform: translateY(-50%); }
body.ba-landing .ba-join-refer-node--3{ bottom: 8%; left: 50%; transform: translateX(-50%); }
body.ba-landing .ba-join-refer-node--4{ top: 50%; left: 6%; transform: translateY(-50%); }

body.ba-landing .ba-join-bottom-cta{
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
}

body.ba-landing .ba-join-bottom-cta .h5{
  color: var(--ba-bg-deep);
}

body.ba-landing .ba-join-bottom-cta .btn-light{
  color: var(--ba-bg-deep);
  border-color: transparent;
}

body.ba-landing .ba-join-footer{
  border-top: 1px solid var(--ba-border);
  background: var(--ba-bg-deep);
}

body.ba-landing .ba-landing-trust{
  background: var(--ba-bg-card);
  border-block: 1px solid var(--ba-border);
}

body.ba-landing .ba-landing-band-247{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(249, 11, 11, 0.1), transparent 65%),
    var(--ba-bg-elevated);
  border-block: 1px solid var(--ba-border);
}

body.ba-landing .ba-landing-support{
  background: var(--ba-bg-main);
}

/* Pages that do not load theme.css still share alert, card, and modal styling. */
html:has(body.ba-home),
html:has(body.ba-auth),
html:has(body.ba-landing){
  --rt-card-bg: #FFFFFF;
  --rt-text: #151922;
  --rt-border: #E0E4EA;
}

html[data-theme="dark"]:has(body.ba-home),
html[data-theme="dark"]:has(body.ba-auth),
html[data-theme="dark"]:has(body.ba-landing){
  --rt-card-bg: #111621;
  --rt-text: #F5F7FA;
  --rt-border: #293142;
}

body.ba-home .alert,
body.ba-landing .alert{
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 12px;
  padding: .85rem 1.1rem;
}

body.ba-home .alert-danger,
body.ba-landing .alert-danger,
body.ba-home .alert-primary,
body.ba-landing .alert-primary{
  background: rgba(249, 11, 11, .1);
  color: #9F1239;
  border-left-color: #F90B0B;
}

body.ba-home .alert-success,
body.ba-landing .alert-success{
  background: rgba(22, 128, 60, .12);
  color: #166534;
  border-left-color: #16803C;
}

body.ba-home .alert-warning,
body.ba-landing .alert-warning{
  background: rgba(180, 83, 9, .12);
  color: #92400E;
  border-left-color: #B45309;
}

body.ba-home .alert-info,
body.ba-landing .alert-info{
  background: rgba(37, 99, 235, .1);
  color: #1E3A8A;
  border-left-color: #2563EB;
}

html[data-theme="dark"]:has(body.ba-home) .alert-danger,
html[data-theme="dark"]:has(body.ba-landing) .alert-danger,
html[data-theme="dark"]:has(body.ba-home) .alert-primary,
html[data-theme="dark"]:has(body.ba-landing) .alert-primary{
  background: rgba(249, 11, 11, .14);
  color: #FCA5A5;
}

html[data-theme="dark"]:has(body.ba-home) .alert-success,
html[data-theme="dark"]:has(body.ba-landing) .alert-success{
  background: rgba(22, 128, 60, .16);
  color: #86EFAC;
}

html[data-theme="dark"]:has(body.ba-home) .alert-warning,
html[data-theme="dark"]:has(body.ba-landing) .alert-warning{
  background: rgba(180, 83, 9, .16);
  color: #FCD34D;
}

html[data-theme="dark"]:has(body.ba-home) .alert-info,
html[data-theme="dark"]:has(body.ba-landing) .alert-info{
  background: rgba(37, 99, 235, .16);
  color: #93C5FD;
}

body.ba-landing .card{
  border: 1px solid var(--rt-border);
  border-radius: 16px;
  background: var(--rt-card-bg);
  color: var(--rt-text);
}

body.ba-home .modal-content,
body.ba-auth .modal-content,
body.ba-landing .modal-content{
  border: 1px solid var(--rt-border, #E0E4EA);
  border-radius: 16px;
  background: var(--rt-card-bg, #fff);
  color: var(--rt-text, #151922);
}

.ba-auth .form-control.is-invalid,
.ba-auth .form-select.is-invalid{
  border-color: #DC2626;
}

.ba-auth .form-control.is-invalid:focus,
.ba-auth .form-select.is-invalid:focus{
  border-color: #DC2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .28);
}

.ba-auth .invalid-feedback{
  color: #DC2626;
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth .form-control.is-invalid,
html[data-theme="dark"]:has(body.ba-auth) .ba-auth .form-select.is-invalid{
  border-color: #FF6464;
}

html[data-theme="dark"]:has(body.ba-auth) .ba-auth .invalid-feedback{
  color: #FF6464;
}

/* Disclosure and other public pages reuse the home pill nav. */
html:has(body.ba-site-nav){
  --mint: #F90B0B;
  --mint-press: #D90808;
  --panel: #FFFFFF;
  --line: #E0E4EA;
  --text: #151922;
  --muted: #5D6675;
}
html[data-theme="dark"]:has(body.ba-site-nav),
html[data-bs-theme="dark"]:has(body.ba-site-nav){
  --panel: #111621;
  --line: #293142;
  --text: #F5F7FA;
  --muted: #A9B2C1;
  --mint-press: #FF3030;
}
body.ba-site-nav #main [id]{ scroll-margin-top: 6.5rem; }
body.ba-site-nav .skip{
  position: absolute; left: 16px; top: -48px; z-index: 80;
  background: var(--mint); color: #fff; padding: 8px 14px;
  border-radius: 999px; font-weight: 600; text-decoration: none;
}
body.ba-site-nav .skip:focus{ top: 12px; }
body.ba-site-nav .site-header{
  position: sticky; top: 0; z-index: 40;
  padding: .75rem 0;
  background: transparent;
  border-bottom: 0;
}
body.ba-site-nav .nav{
  position: relative;
  width: min(1160px, calc(100% - 24px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand links end";
  align-items: center;
  gap: .75rem;
  padding: .35rem .4rem .35rem .85rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 .35rem 1.4rem rgba(8, 11, 18, .08);
}
html[data-theme="dark"]:has(body.ba-site-nav) .nav{
  background: #111621;
  box-shadow: 0 .35rem 1.4rem rgba(0, 0, 0, .35);
}
body.ba-site-nav .brand{ grid-area: brand; }
body.ba-site-nav .links{ grid-area: links; }
body.ba-site-nav .end{ grid-area: end; }
body.ba-site-nav .brand{
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--text);
}
body.ba-site-nav .brand img{ height: 2.5rem; width: auto; max-width: 11rem; object-fit: contain; }
body.ba-site-nav .brand img.d-lg-none{ width: 2.5rem; height: 2.5rem; }
body.ba-site-nav .links{
  justify-self: center;
  display: flex; align-items: center; gap: 1.5rem;
}
body.ba-site-nav .links a:not(.btn){
  color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600;
  padding: .25rem 0;
}
body.ba-site-nav .links a:not(.btn):hover,
body.ba-site-nav .links a:not(.btn).is-on{ color: var(--mint); }
body.ba-site-nav .links a.btn-mint,
body.ba-site-nav .links a.btn-mint:hover{ color: #fff; background: var(--mint); }
body.ba-site-nav .links a.btn-mint:hover{ background: var(--mint-press); }
body.ba-site-nav .links a.btn-ghost,
body.ba-site-nav .links a.btn-ghost:hover{ color: var(--text); background: var(--panel); }
body.ba-site-nav .links .nav-login,
body.ba-site-nav .links .nav-open{ display: none; }
body.ba-site-nav .links .nav-theme-toggle,
body.ba-home .links .nav-theme-toggle{ display: none; }
body.ba-site-nav .end{ display: flex; gap: .5rem; align-items: center; justify-self: end; position: relative; z-index: 60; }
body.ba-site-nav .site-header .btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; font-size: 14px;
}
body.ba-site-nav .site-header .btn-ghost{ border-color: var(--line); color: var(--text); background: var(--panel); }
body.ba-site-nav .site-header .btn-mint{ background: var(--mint); color: #fff; border-color: transparent; }
body.ba-site-nav .site-header .btn-mint:hover{ background: var(--mint-press); color: #fff; }
body.ba-site-nav .menu-btn{
  width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer;
  display: none; place-items: center; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); font-size: 1.25rem;
  position: relative; z-index: 60;
}
@media (max-width: 960px) {
  body.ba-site-nav .nav{
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand end";
  }
  body.ba-site-nav .menu-btn{ display: grid; }
  body.ba-site-nav .links{
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    width: min(18rem, calc(100vw - 1.5rem));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .85rem .9rem 1rem;
    z-index: 55;
    border-radius: 1rem;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body.ba-site-nav .links.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.ba-site-nav .links a:not(.btn){
    display: flex; justify-content: space-between; align-items: center;
    padding: .7rem .35rem;
    color: var(--text);
  }
  body.ba-site-nav .links .nav-login,
  body.ba-site-nav .links .nav-open{ display: inline-flex; width: 100%; margin-top: .35rem; }
  body.ba-site-nav .links .nav-theme-toggle,
  body.ba-home .links .nav-theme-toggle{ display: inline-flex; width: 100%; margin-top: .35rem; gap: .5rem; }
  body.ba-site-nav .end .btn{ display: none; }
}

/* Serve one landing hero image at a time: theme and viewport choose its source. */
body.ba-home .hero{
  background-image: url('../images/landing/hero-cover.webp');
  background-position: 62% 54%;
  background-size: cover;
  animation: heroBackgroundDrift 26s ease-in-out infinite alternate;
}
html[data-theme="dark"]:has(body.ba-home) body.ba-home .hero{
  background-image: url('../images/landing/hero-cover-dark.webp');
}
@media (max-width: 991.98px){
  body.ba-home .hero{ background-image: url('../images/landing/hero-phone.webp'); background-position: center 40%; }
  html[data-theme="dark"]:has(body.ba-home) body.ba-home .hero{ background-image: url('../images/landing/hero-phone-dark.webp'); }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference){
  html.js-ready:has(body.ba-home) .reveal-left,
  html.js-ready:has(body.ba-home) .reveal-right{ transform: translateY(1.25rem); }
  body.ba-home #ready .cta-bg{
    inset: 0;
    width: 100%;
    height: 100%;
    animation: ctaMobilePan 22s ease-in-out infinite alternate;
  }
  @keyframes ctaMobilePan{
    from{ object-position: 18% 50%; }
    to{ object-position: 22% 50%; }
  }
}
@keyframes heroBackgroundDrift{
  from{ background-position: 62% 54%; }
  to{ background-position: 60% 51%; }
}
@media (max-width: 991.98px){
  @keyframes heroBackgroundDrift{
    from{ background-position: center 40%; }
    to{ background-position: center 36%; }
  }
}

/* Keep the hero portrait visible at phone widths and preserve negative space on tablets. */
@media (min-width: 576px) and (max-width: 991.98px){
  @keyframes heroBackgroundDrift{
    from{ background-position: 64% 52%; }
    to{ background-position: 62% 50%; }
  }
  body.ba-home .hero{
    background-image: url('../images/landing/hero-cover.webp');
    background-position: 64% center;
  }
  html[data-theme="dark"]:has(body.ba-home) body.ba-home .hero{
    background-image: url('../images/landing/hero-cover-dark.webp');
  }
  body.ba-home .hero::after{
    background: linear-gradient(90deg, rgba(247,248,250,.96) 0%, rgba(247,248,250,.86) 42%, rgba(247,248,250,.28) 67%, rgba(247,248,250,0) 100%);
  }
  html[data-theme="dark"]:has(body.ba-home) body.ba-home .hero::after{
    background: linear-gradient(90deg, rgba(8,11,18,.96) 0%, rgba(8,11,18,.86) 42%, rgba(8,11,18,.3) 67%, rgba(8,11,18,0) 100%);
  }
  body.ba-home .hero-inner > .row > .col-12:first-child{ max-width: min(74%, 38rem); }
}
@media (max-width: 575.98px){
  body.ba-home .hero{
    background-image: url('../images/landing/hero-phone.webp');
    background-position: center 40%;
    animation: none;
  }
  body.ba-home .hero::after{
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--page) 42%, transparent) 0%,
      color-mix(in srgb, var(--page) 72%, transparent) 12%,
      color-mix(in srgb, var(--page) 82%, transparent) 21%,
      color-mix(in srgb, var(--page) 66%, transparent) 28%,
      color-mix(in srgb, var(--page) 20%, transparent) 37%,
      transparent 44%);
  }
  html[data-theme="dark"]:has(body.ba-home) body.ba-home .hero::after{
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--page) 18%, transparent) 0%,
      color-mix(in srgb, var(--page) 28%, transparent) 12%,
      color-mix(in srgb, var(--page) 42%, transparent) 21%,
      color-mix(in srgb, var(--page) 30%, transparent) 30%,
      color-mix(in srgb, var(--page) 12%, transparent) 40%,
      transparent 48%);
  }
}

body.ba-home #ready .cta::after{
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(249,11,11,.12) 0%, rgba(8,11,18,.08) 36%, rgba(8,11,18,.28) 68%, rgba(8,11,18,.12) 100%);
}
body.ba-home #ready .cta > .position-relative{ z-index: 1; }
html[data-theme="light"]:has(body.ba-home) body.ba-home #ready .cta{
  background: #F7F8FA;
  border: 1px solid var(--line);
}
html[data-theme="light"]:has(body.ba-home) body.ba-home #ready .cta::after{
  background: linear-gradient(90deg, rgba(247,248,250,.02) 0%, rgba(247,248,250,.12) 34%, rgba(247,248,250,.88) 63%, #F7F8FA 100%);
}
html[data-theme="light"]:has(body.ba-home) body.ba-home #ready .cta h2{ color: var(--text); }
html[data-theme="light"]:has(body.ba-home) body.ba-home #ready .cta .fine{ color: var(--muted); }
@media (max-width: 640px){
  body.ba-home #ready .cta::after{
    background: linear-gradient(180deg, rgba(8,11,18,.38) 0%, rgba(8,11,18,.62) 48%, rgba(8,11,18,.9) 100%);
  }
  html[data-theme="light"]:has(body.ba-home) body.ba-home #ready .cta::after{
    background: linear-gradient(180deg, rgba(247,248,250,.2) 0%, rgba(247,248,250,.86) 46%, #F7F8FA 100%);
  }
}
/* Auth promo photography uses a theme-aware background so the hidden variant is not downloaded. */
@media (min-width: 992px){
  body.ba-auth .ba-auth-promo::before,
  body.ba-auth.ba-auth-marketing .ba-auth-promo::before{
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    min-height: 22rem;
    z-index: 0;
    pointer-events: none;
    background: url('../images/landing/auth-hero.webp') 18% 55% / cover no-repeat;
    -webkit-mask-image: linear-gradient(to top, #000 72%, rgba(0,0,0,.55) 90%, transparent 100%);
    mask-image: linear-gradient(to top, #000 72%, rgba(0,0,0,.55) 90%, transparent 100%);
  }
  html[data-theme="dark"]:has(body.ba-auth) body.ba-auth .ba-auth-promo::before{
    background-image: url('../images/landing/auth-hero-dark.webp');
    background-position: 12% 48%;
    -webkit-mask-image: linear-gradient(to top, #000 78%, rgba(0,0,0,.5) 92%, transparent 100%);
    mask-image: linear-gradient(to top, #000 78%, rgba(0,0,0,.5) 92%, transparent 100%);
  }
}
@media (max-width: 767.98px){
  body.ba-auth .ba-auth-promo{ display: none !important; }
}
@media (prefers-reduced-motion: reduce){
  body.ba-home .hero{ animation: none !important; }
}

body.ba-site-nav .wrap{
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
}
body.ba-site-nav .disclosure-jump-nav{ top: 5.5rem; z-index: 20; }
body.ba-site-nav footer.site{
  color: #A9B2C1;
  font-size: .875rem;
  background: #080B12;
}
body.ba-site-nav footer.site h4{
  margin: 0 0 .75rem;
  font-family: Outfit, "DM Sans", sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
body.ba-site-nav footer.site a{ color: #C5C7CC; text-decoration: none; }
body.ba-site-nav footer.site a:hover{ color: #fff; }
body.ba-site-nav footer.site .logo-on-light{ display: none !important; }
body.ba-site-nav .foot-brand{ margin-bottom: .75rem; color: #fff; }
body.ba-site-nav .legal{
  font-size: .75rem;
  color: #8B8E95;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
body.ba-site-nav footer.site .logo-on-dark{ display: block; }