/* Unified Securities White Theme v8 — hard final pass */
:root{
  --sw-page:#f5f7fb;
  --sw-card:#ffffff;
  --sw-text:#1f2937;
  --sw-heading:#111827;
  --sw-muted:#667085;
  --sw-border:#dbe3ee;
  --sw-border-strong:#c7d2e0;
  --sw-blue:#3978d6;
  --sw-blue-soft:#edf4ff;
  --sw-green:#16a36f;
  --sw-red:#e2484f;
}
html,body{background:var(--sw-page)!important;color:var(--sw-text)!important;}
body.broker-theme{background:var(--sw-page)!important;background-image:none!important;color:var(--sw-text)!important;}
body.broker-theme .container,
body.broker-theme .container-fluid,
body.broker-theme .modal-dialog,
body.broker-theme .modal-content,
body.broker-theme .modal-body,
body.broker-theme .deposit-form,
body.broker-theme .page-container,
body.broker-theme .main-container,
body.broker-theme .content,
body.broker-theme .content-wrapper,
body.broker-theme .main-content{
  /* background:var(--sw-page)!important; */
  background-image:none!important;color:var(--sw-text)!important;}
body.broker-theme .header,
body.broker-theme .language-header,
body.broker-theme .top-header,
body.broker-theme .page-header{background:#fff!important;background-image:none!important;color:var(--sw-heading)!important;border-bottom:1px solid #e5e7eb!important;box-shadow:none!important;}
body.broker-theme .header *,body.broker-theme .language-header *,body.broker-theme .top-header *,body.broker-theme .page-header *{color:var(--sw-heading)!important;}

/* General white cards / rows */
body.broker-theme .card,
body.broker-theme .section,
body.broker-theme .section-card,
body.broker-theme .panel,
body.broker-theme .box,
body.broker-theme .balance-section,
body.broker-theme .history-section,
body.broker-theme .record-item,
body.broker-theme .menu-item,
body.broker-theme .security-option,
body.broker-theme .language-item,
body.broker-theme .bank-item,
body.broker-theme .crypto-option,
body.broker-theme .deposit-option,
body.broker-theme .channel-item,
body.broker-theme .form-section,
body.broker-theme .important-notice,
body.broker-theme .deposit-instructions,
body.broker-theme .upload-area,
body.broker-theme .quick-option,
body.broker-theme .action-card,
body.broker-theme .plan-card,
body.broker-theme .position-content,
body.broker-theme .trading-form,
body.broker-theme .order-list,
body.broker-theme .wallet-card,
body.broker-theme .info-card{
  background:#fff!important;background-image:none!important;color:var(--sw-text)!important;
  border-color:var(--sw-border)!important;box-shadow:0 2px 10px rgba(15,23,42,.04)!important;
}
body.broker-theme .crypto-option,
body.broker-theme .deposit-option,
body.broker-theme .channel-item,
body.broker-theme .language-item,
body.broker-theme .menu-item,
body.broker-theme .security-option{border:1px solid var(--sw-border)!important;border-radius:12px!important;}
body.broker-theme .crypto-option:hover,
body.broker-theme .deposit-option:hover,
body.broker-theme .channel-item:hover,
body.broker-theme .language-item:hover,
body.broker-theme .menu-item:hover{background:#f9fbff!important;border-color:#bfd0e6!important;}

/* Text contrast */
body.broker-theme h1,body.broker-theme h2,body.broker-theme h3,body.broker-theme h4,body.broker-theme h5,body.broker-theme h6,
body.broker-theme .title,body.broker-theme .section-title,body.broker-theme .header-title,
body.broker-theme .form-label,body.broker-theme label{color:var(--sw-heading)!important;}
body.broker-theme p,body.broker-theme span,body.broker-theme div,body.broker-theme li,body.broker-theme td,body.broker-theme th{color:inherit;}
body.broker-theme .text-white:not(.btn):not(button):not(.badge),
body.broker-theme h1.text-white,body.broker-theme h2.text-white,body.broker-theme h3.text-white,body.broker-theme h4.text-white,body.broker-theme h5.text-white,body.broker-theme h6.text-white,
body.broker-theme p.text-white,body.broker-theme span.text-white{color:var(--sw-heading)!important;}
body.broker-theme .text-muted,body.broker-theme .instruction-text,body.broker-theme .subtitle,body.broker-theme .description,body.broker-theme small{color:var(--sw-muted)!important;}

/* Forms */
body.broker-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.broker-theme textarea,
body.broker-theme select,
body.broker-theme .form-control,
body.broker-theme .form-select,
body.broker-theme .input-group-text,
body.broker-theme .password-input-container,
body.broker-theme .amount-input-container,
body.broker-theme .address-input-container{
  background:#fff!important;background-image:none!important;color:var(--sw-heading)!important;
  /* border-color:var(--sw-border-strong)!important;box-shadow:none!important; */
}
body.broker-theme input::placeholder,body.broker-theme textarea::placeholder,body.broker-theme .form-control::placeholder{color:#98a2b3!important;opacity:1!important;}
body.broker-theme input:focus,body.broker-theme textarea:focus,body.broker-theme select:focus,body.broker-theme .form-control:focus{border-color:#8eb3e8!important;box-shadow:0 0 0 3px rgba(57,120,214,.10)!important;}

/* Secondary controls */
body.broker-theme .btn-outline-light,
body.broker-theme .btn-secondary,
body.broker-theme .chain-btn,
body.broker-theme .network-option,
body.broker-theme .percentage-btn,
body.broker-theme .amount-control,
body.broker-theme .total-control{
  background:#fff!important;background-image:none!important;color:var(--sw-heading)!important;border:1px solid var(--sw-border-strong)!important;box-shadow:none!important;
}
body.broker-theme .chain-btn.btn-primary,
body.broker-theme .chain-btn.active,
body.broker-theme .network-option.selected,
body.broker-theme .language-item.active,
body.broker-theme .selected{
  background:var(--sw-blue-soft)!important;color:var(--sw-blue)!important;border-color:#9fbce5!important;
}
body.broker-theme .submit-btn,
body.broker-theme button.btn-primary:not(.chain-btn),
body.broker-theme a.btn-primary:not(.chain-btn){background:var(--sw-blue)!important;color:#fff!important;border-color:var(--sw-blue)!important;}
body.broker-theme .submit-btn *,body.broker-theme button.btn-primary:not(.chain-btn) *,body.broker-theme a.btn-primary:not(.chain-btn) *{color:#fff!important;}

/* Deposit/withdrawal special */
body.broker-theme.page-money .modal-content,
body.broker-theme.page-money .modal-body,
body.broker-theme.page-money #depositSelection,
body.broker-theme.page-money #withdrawalSelection{background:var(--sw-page)!important;background-image:none!important;}
body.broker-theme.page-money .money-hero{background:#fff!important;background-image:none!important;border:1px solid var(--sw-border)!important;box-shadow:0 3px 12px rgba(15,23,42,.05)!important;}
body.broker-theme.page-money .money-hero h2{color:var(--sw-heading)!important;}
body.broker-theme.page-money .money-hero p{color:var(--sw-muted)!important;}
body.broker-theme.page-money .crypto-option p,
body.broker-theme.page-money .crypto-option span,
body.broker-theme.page-money .deposit-option h6,
body.broker-theme.page-money .channel-item span{color:var(--sw-heading)!important;font-weight:600!important;}
body.broker-theme.page-money .upload-area{background:#f8fafc!important;color:var(--sw-muted)!important;border:1px dashed #b9c5d5!important;}
body.broker-theme.page-money .important-notice,body.broker-theme.page-money .deposit-instructions{background:#fff!important;color:var(--sw-text)!important;border:1px solid var(--sw-border)!important;}
body.broker-theme.page-money .important-notice p,body.broker-theme.page-money .deposit-instructions p{color:var(--sw-muted)!important;}
body.broker-theme.page-money .qr-container{background:#fff!important;border:1px solid var(--sw-border)!important;}

/* Future/perpetual legacy dark controls */
body.broker-theme.ig-future-page .trading-form,
body.broker-theme.ig-future-page .order-list,
body.broker-theme.ig-future-page .position-content,
body.broker-theme.ig-future-page .bottom-section,
body.broker-theme.ig-future-page .position-tabs,
body.broker-theme.ig-future-page .order-book-title,
body.broker-theme.ig-future-page .contract-tabs,
body.broker-theme.ig-future-page .trading-pair-info{background:#fff!important;background-image:none!important;color:var(--sw-text)!important;border-color:var(--sw-border)!important;}
body.broker-theme.ig-future-page #leverage-select,
body.broker-theme.ig-future-page #pair-selector-menu,
body.broker-theme.ig-future-page .future-order-type-field,
body.broker-theme.ig-future-page .future-order-type-menu{background:#fff!important;color:var(--sw-heading)!important;border-color:var(--sw-border-strong)!important;}

/* Language/profile/list reference feeling */
body.broker-theme .language-item.active{background:#dce9fb!important;box-shadow:none!important;}
body.broker-theme .language-item .language-name,body.broker-theme .menu-item .menu-text{color:var(--sw-heading)!important;}

/* Hard override for inline legacy dark values. Keep icon circles/buttons exempt by class below. */
body.broker-theme [style*="background: rgba(45, 53, 97"],
body.broker-theme [style*="background:rgba(45, 53, 97"],
body.broker-theme [style*="background: rgba(26, 26, 46"],
body.broker-theme [style*="background:rgba(26, 26, 46"],
body.broker-theme [style*="background-color: #1a1a2e"],
body.broker-theme [style*="background-color:#1a1a2e"],
body.broker-theme [style*="background: #2d3561"],
body.broker-theme [style*="background:#2d3561"],
body.broker-theme [style*="background: #3b4a6b"],
body.broker-theme [style*="background:#3b4a6b"],
body.broker-theme [style*="background: #131a2e"],
body.broker-theme [style*="background:#131a2e"],
body.broker-theme [style*="background: #1B2134"],
body.broker-theme [style*="background:#1B2134"]{
  background:#fff!important;background-image:none!important;color:var(--sw-text)!important;border-color:var(--sw-border)!important;
}
/* Restore intended colored icon circles after the generic inline reset */
body.broker-theme .deposit-icon,
body.broker-theme .crypto-option>div:first-child,
body.broker-theme .coin-icon,
body.broker-theme .menu-icon,
body.broker-theme .quick-option-icon,
body.broker-theme .action-card-icon{color:inherit;}
body.broker-theme .crypto-option>div:first-child{color:#fff!important;border-color:transparent!important;}

/* Positive / negative semantics */
body.broker-theme .positive,body.broker-theme .profit,body.broker-theme .amount-positive{color:var(--sw-green)!important;}
body.broker-theme .negative,body.broker-theme .loss,body.broker-theme .amount-negative{color:var(--sw-red)!important;}

/* Navigation */
body.broker-theme iframe[src="nav.html"]{background:#fff!important;border-top:1px solid var(--sw-border)!important;box-shadow:0 -3px 12px rgba(15,23,42,.04)!important;}

@media(max-width:600px), (min-width: 601px){
  body.broker-theme .modal-body{padding-left:16px!important;padding-right:16px!important;}
  body.broker-theme .card,body.broker-theme .crypto-option,body.broker-theme .deposit-option,body.broker-theme .channel-item,body.broker-theme .language-item,body.broker-theme .menu-item{border-radius:12px!important;}
}

/* v9 — viewport-wide page header safeguard (all screen widths)
   Page content may stay inside compact/max-width wrappers, but top page headers
   must always span the physical viewport. */
body.broker-theme .header,
body.broker-theme .language-header,
body.broker-theme .trading-header,
body.broker-theme .staking-header,
body.broker-theme .profile-header {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: auto !important;
  right: auto !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

/* Headers nested in centered/max-width wrappers should not inherit wrapper clipping. */
body.broker-theme .language-container,
body.broker-theme .profile-container,
body.broker-theme .main-container,
body.broker-theme .staking-page,
body.broker-theme .help-container,
body.broker-theme .question-details,
body.broker-theme > .container,
body.broker-theme > .container-fluid {
  overflow-x: visible !important;
}

/* Keep the title visually centered in the viewport regardless of back/right actions. */
body.broker-theme .header,
body.broker-theme .language-header,
body.broker-theme .staking-header {
  position: relative !important;
}
body.broker-theme .header-title,
body.broker-theme .language-title,
body.broker-theme .staking-header-title {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100vw - 112px) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}
body.broker-theme .header .back-btn,
body.broker-theme .language-header .back-btn,
body.broker-theme .staking-header .back-btn {
  left: max(14px, env(safe-area-inset-left)) !important;
}

/* Prevent the viewport breakout itself from creating horizontal page scrolling. */
html, body.broker-theme {
  overflow-x: hidden !important;
}

@media (min-width: 601px) {
  body.broker-theme .header,
  body.broker-theme .language-header,
  body.broker-theme .trading-header,
  body.broker-theme .staking-header,
  body.broker-theme .profile-header {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}


/* v10 — fixed bottom-navigation clearance
   The nav iframe is fixed to the viewport, so normal page content must reserve
   its own space. This prevents the last market row/card/button from being
   hidden behind the navigation on different phone heights and safe areas. */
:root { --sw-bottom-nav-height: 80px; --sw-bottom-nav-gap: 18px; }

body.broker-theme.has-bottom-nav {
  padding-bottom: calc(var(--sw-bottom-nav-height) + var(--sw-bottom-nav-gap) + env(safe-area-inset-bottom)) !important;
}

/* Fallback for any existing page that has the iframe but no helper class. */
body.broker-theme:has(iframe[src="nav.html"]) {
  padding-bottom: calc(var(--sw-bottom-nav-height) + var(--sw-bottom-nav-gap) + env(safe-area-inset-bottom)) !important;
}

/* Keep the fixed iframe aligned with device safe-area and with a stable height. */
body.broker-theme iframe[src="nav.html"] {
  height: calc(var(--sw-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
  bottom: 0 !important;
}

/* Pages that use an inner scrolling/content wrapper also need real end space. */
body.broker-theme.has-bottom-nav .main-container,
body.broker-theme.has-bottom-nav .page-content,
body.broker-theme.has-bottom-nav .content-wrapper,
body.broker-theme.has-bottom-nav .profile-container,
body.broker-theme.has-bottom-nav .fund-container,
body.broker-theme.has-bottom-nav .staking-container,
body.broker-theme.has-bottom-nav .trading-pairs,
body.broker-theme.has-bottom-nav .position-content {
  scroll-padding-bottom: calc(var(--sw-bottom-nav-height) + var(--sw-bottom-nav-gap) + env(safe-area-inset-bottom)) !important;
}

/* Give the final flow element a little breathing room above the nav instead of
   making it look visually stuck to the fixed bar. */
body.broker-theme.has-bottom-nav > iframe[src="nav.html"] ~ * { }

@media (max-width: 600px), (min-width: 601px) {
  :root { --sw-bottom-nav-height: 78px; --sw-bottom-nav-gap: 20px; }
}

/* v11 — Home market table full-width
   The live trading-pair list should use the whole viewport width rather than
   looking like a narrow card inside the page. Keep only internal row padding. */
body.broker-theme.has-bottom-nav .trading-header,
body.broker-theme.has-bottom-nav .trading-pairs {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}
body.broker-theme.has-bottom-nav .trading-header > .container-fluid,
body.broker-theme.has-bottom-nav .trading-pairs > .container-fluid {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.broker-theme.has-bottom-nav .trading-header .row,
body.broker-theme.has-bottom-nav .trading-pair-item > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.broker-theme.has-bottom-nav .trading-header .row {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
body.broker-theme.has-bottom-nav .trading-pair-item > .row {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (max-width: 600px), (min-width: 601px) {
  body.broker-theme.has-bottom-nav .trading-header .row,
  body.broker-theme.has-bottom-nav .trading-pair-item > .row {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* v11 — Home market table full-width */
body.broker-theme.has-bottom-nav .trading-header,
body.broker-theme.has-bottom-nav .trading-pairs {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}
body.broker-theme.has-bottom-nav .trading-header > .container-fluid,
body.broker-theme.has-bottom-nav .trading-pairs > .container-fluid {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.broker-theme.has-bottom-nav .trading-header .row,
body.broker-theme.has-bottom-nav .trading-pair-item > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.broker-theme.has-bottom-nav .trading-header .row {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
body.broker-theme.has-bottom-nav .trading-pair-item > .row {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (max-width: 600px), (min-width: 601px) {
  body.broker-theme.has-bottom-nav .trading-header .row,
  body.broker-theme.has-bottom-nav .trading-pair-item > .row {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* v12 — unified internal page header + true full-viewport page surfaces
   Deposit header is the reference pattern. Only real page headers are targeted;
   market/table section headers are not converted into page headers. */
:root{
  --sw-page-header-height:48px;
  --sw-page-header-title-size:16px;
  --sw-page-header-side-pad:16px;
}

/* Every themed page owns the whole viewport canvas — no exposed legacy side background. */
html,
body.broker-theme{
  width:100% !important;
  min-width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:var(--sw-page) !important;
  background-image:none !important;
}

/* Deposit/withdraw fullscreen flows: remove Bootstrap/custom max-width and side gutters. */
body.broker-theme.page-money,
body.broker-theme.page-money > .container-fluid,
body.broker-theme.page-money #depositSelection,
body.broker-theme.page-money #withdrawalSelection,
body.broker-theme.page-money .deposit-form,
body.broker-theme.page-money .modal-dialog,
body.broker-theme.page-money .modal-dialog.modal-fullscreen,
body.broker-theme.page-money .modal-content,
body.broker-theme.page-money .modal-body{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
  background:var(--sw-page) !important;
  background-image:none !important;
}
body.broker-theme.page-money .modal-dialog,
body.broker-theme.page-money .modal-dialog.modal-fullscreen{
  margin-top:0 !important;
  margin-bottom:0 !important;
  min-height:100vh !important;
}
body.broker-theme.page-money .modal-content{
  min-height:100vh !important;
  border-radius:0 !important;
}

/* Standard internal page header — same proportions as Deposit. */
body.broker-theme .header,
body.broker-theme .language-header,
body.broker-theme .staking-header,
body.broker-theme .top-header,
body.broker-theme .page-header,
body.broker-theme.ig-future-page > .trading-header,
body.broker-theme:not(.has-bottom-nav) > .trading-header{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  height:var(--sw-page-header-height) !important;
  min-height:var(--sw-page-header-height) !important;
  width:100vw !important;
  min-width:100vw !important;
  max-width:100vw !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:0 var(--sw-page-header-side-pad) !important;
  border-radius:0 !important;
  border:0 !important;
  border-bottom:1px solid #e5e7eb !important;
  background:#fff !important;
  background-image:none !important;
  color:var(--sw-heading) !important;
  box-shadow:none !important;
  z-index:20 !important;
  overflow:visible !important;
}

/* Back action position/size. */
body.broker-theme .header > .back-btn,
body.broker-theme .language-header > .back-btn,
body.broker-theme .staking-header > .back-btn,
body.broker-theme .top-header > .back-btn,
body.broker-theme .page-header > .back-btn,
body.broker-theme.ig-future-page > .trading-header .back-btn,
body.broker-theme:not(.has-bottom-nav) > .trading-header .back-btn{
  position:absolute !important;
  left:max(14px, env(safe-area-inset-left)) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#10243e !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  line-height:1 !important;
  box-shadow:none !important;
  z-index:2 !important;
}

/* Center titles independently of left/right actions. */
body.broker-theme .header > .header-title,
body.broker-theme .language-header > .language-title,
body.broker-theme .staking-header > .staking-header-title,
body.broker-theme .top-header > .header-title,
body.broker-theme .page-header > .header-title{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:auto !important;
  max-width:calc(100vw - 104px) !important;
  margin:0 !important;
  padding:0 !important;
  color:#101828 !important;
  font-size:var(--sw-page-header-title-size) !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Generic text-only header titles when the page does not use the named title class. */
body.broker-theme .header:not(:has(.header-title)){
  font-size:var(--sw-page-header-title-size) !important;
  font-weight:700 !important;
}

/* Keep page content allowed to be compact, but never clip a viewport-wide header. */
body.broker-theme .language-container,
body.broker-theme .profile-container,
body.broker-theme .main-container,
body.broker-theme .staking-page,
body.broker-theme .help-container,
body.broker-theme .question-details,
body.broker-theme > .container,
body.broker-theme > .container-fluid{
  overflow-x:visible !important;
}

/* Home market table remains edge-to-edge; it is a data header, not a page header. */
body.broker-theme.has-bottom-nav .trading-header,
body.broker-theme.has-bottom-nav .trading-pairs{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

@media (max-width:380px){
  :root{ --sw-page-header-title-size:15px; --sw-page-header-side-pad:12px; }
  body.broker-theme .header > .header-title,
  body.broker-theme .language-header > .language-title,
  body.broker-theme .staking-header > .staking-header-title{
    max-width:calc(100vw - 92px) !important;
  }
}

/* v13 — Future trading mobile usability redesign */
body.broker-theme.ig-future-page{
  --future-blue:#1677ff;
  --future-blue-soft:#eef6ff;
  --future-green:#12b886;
  --future-green-soft:#ecfbf5;
  --future-red:#f04438;
  --future-red-soft:#fff1f0;
  --future-border:#d9e2ec;
  --future-muted:#667085;
  background:#f5f7fb !important;
}
body.broker-theme.ig-future-page > .container{
  width:100% !important;
  max-width:760px !important;
  margin:12px auto 0 !important;
  padding:0 12px !important;
  overflow:visible !important;
}
body.broker-theme.ig-future-page > .container > .row{
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;
  gap:10px !important;
  border:0 !important;
  padding:0 !important;
  align-items:start !important;
}
body.broker-theme.ig-future-page > .container > .row > .col-6{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  padding:0 !important;
}
body.broker-theme.ig-future-page .trading-form,
body.broker-theme.ig-future-page .order-book{
  background:#fff !important;
  border:1px solid var(--future-border) !important;
  border-radius:12px !important;
  box-shadow:0 2px 10px rgba(16,24,40,.045) !important;
  padding:10px !important;
  overflow:visible !important;
}
body.broker-theme.ig-future-page .trading-form .d-flex,
body.broker-theme.ig-future-page .trading-form span,
body.broker-theme.ig-future-page .trading-form label{
  color:#344054 !important;
}
body.broker-theme.ig-future-page #leverage-select{
  height:38px !important;
  min-width:64px !important;
  padding:0 28px 0 10px !important;
  background:#fff !important;
  color:#101828 !important;
  border:1px solid var(--future-border) !important;
  border-radius:9px !important;
  box-shadow:none !important;
}
body.broker-theme.ig-future-page .future-order-type-field{
  min-height:44px !important;
  padding:0 10px !important;
  margin-bottom:10px !important;
  border:1px solid #b9d9ff !important;
  border-radius:10px !important;
  background:var(--future-blue-soft) !important;
  box-shadow:none !important;
}
body.broker-theme.ig-future-page .future-order-type-field > .fa-info-circle{
  color:var(--future-blue) !important;
}
body.broker-theme.ig-future-page .future-order-type-trigger{
  min-height:42px !important;
  color:#101828 !important;
  font-size:14px !important;
  font-weight:700 !important;
  background:transparent !important;
}
body.broker-theme.ig-future-page .future-order-type-menu{
  background:#fff !important;
  border:1px solid var(--future-border) !important;
  border-radius:10px !important;
  box-shadow:0 10px 28px rgba(16,24,40,.12) !important;
}
body.broker-theme.ig-future-page .future-order-type-option{
  color:#344054 !important;
  background:#fff !important;
}
body.broker-theme.ig-future-page .future-order-type-option.is-selected,
body.broker-theme.ig-future-page .future-order-type-option:hover{
  color:var(--future-blue) !important;
  background:var(--future-blue-soft) !important;
}
/* Price / quantity rows are inline-styled in legacy markup: normalize them here. */
body.broker-theme.ig-future-page .trading-form > div[style*="background:#ffffff"],
body.broker-theme.ig-future-page .trading-form > div[style*="background: #ffffff"]{
  min-height:44px !important;
  padding:6px 10px !important;
  margin-bottom:10px !important;
  background:#fff !important;
  border:1px solid var(--future-border) !important;
  border-radius:10px !important;
  box-shadow:none !important;
}
body.broker-theme.ig-future-page #price-input,
body.broker-theme.ig-future-page #quantity-input{
  color:#101828 !important;
  background:transparent !important;
  font-size:14px !important;
}
body.broker-theme.ig-future-page #price-input::placeholder,
body.broker-theme.ig-future-page #quantity-input::placeholder{
  color:#98a2b3 !important;
}
body.broker-theme.ig-future-page #quantity-minus,
body.broker-theme.ig-future-page #quantity-plus{
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  border:1px solid var(--future-border) !important;
  border-radius:7px !important;
  background:#f8fafc !important;
  color:#475467 !important;
}
body.broker-theme.ig-future-page #volume-slider-track{
  height:5px !important;
  margin:10px 0 !important;
  border:0 !important;
  background:#e4e7ec !important;
}
body.broker-theme.ig-future-page #volume-slider-progress{
  background:var(--future-blue) !important;
}
body.broker-theme.ig-future-page #volume-slider-handle{
  width:16px !important;
  height:16px !important;
  top:-5.5px !important;
  background:#fff !important;
  border:4px solid var(--future-blue) !important;
  box-shadow:0 1px 5px rgba(22,119,255,.28) !important;
}
body.broker-theme.ig-future-page .trading-form button[onclick*="setVolumePercentage"]{
  min-width:0 !important;
  height:32px !important;
  padding:0 6px !important;
  border:1px solid #cfe1f6 !important;
  border-radius:8px !important;
  background:#f7fbff !important;
  color:#3b6f9f !important;
  font-size:11px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
body.broker-theme.ig-future-page .order-book{
  padding:8px !important;
}
body.broker-theme.ig-future-page .order-book-header{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr) !important;
  gap:5px !important;
  padding:2px 2px 8px !important;
  margin:0 !important;
  border-bottom:1px solid #edf0f4 !important;
}
body.broker-theme.ig-future-page .order-book-title{
  color:#667085 !important;
  font-size:10px !important;
  font-weight:600 !important;
  background:transparent !important;
}
body.broker-theme.ig-future-page .order-list{
  padding:2px 0 !important;
  border:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}
body.broker-theme.ig-future-page .order-item{
  min-height:25px !important;
  height:25px !important;
  padding:0 2px !important;
  border:0 !important;
  background:#fff !important;
  box-shadow:none !important;
  font-size:11px !important;
}
body.broker-theme.ig-future-page .sell-price{ color:var(--future-red) !important; }
body.broker-theme.ig-future-page .buy-price{ color:var(--future-blue) !important; }
body.broker-theme.ig-future-page .order-quantity{ color:#7d8fb3 !important; text-align:right !important; }
body.broker-theme.ig-future-page .last-price-display{
  margin:6px 0 !important;
  padding:12px 6px !important;
  border:0 !important;
  border-radius:10px !important;
  background:#f0fbf8 !important;
  box-shadow:none !important;
}
body.broker-theme.ig-future-page .last-price-value{
  color:#00a985 !important;
  font-size:24px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
}
body.broker-theme.ig-future-page .last-price-usd{
  color:#98a2b3 !important;
  font-size:10px !important;
}
body.broker-theme.ig-future-page .buy-sell-buttons{
  position:static !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin:12px auto 0 !important;
  padding:0 12px !important;
  width:100% !important;
  max-width:760px !important;
  background:transparent !important;
  border:0 !important;
}
body.broker-theme.ig-future-page .btn-buy-long,
body.broker-theme.ig-future-page .btn-sell-short{
  height:48px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:10px !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
body.broker-theme.ig-future-page .btn-buy-long{ background:var(--future-green) !important; }
body.broker-theme.ig-future-page .btn-sell-short{ background:var(--future-red) !important; }
body.broker-theme.ig-future-page .position-tabs{
  width:100% !important;
  max-width:760px !important;
  min-height:54px !important;
  height:auto !important;
  margin:12px auto 0 !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  background:#fff !important;
  border-top:1px solid #edf0f4 !important;
  border-bottom:1px solid #edf0f4 !important;
}
body.broker-theme.ig-future-page .position-tab{
  height:54px !important;
  display:flex !important;
  align-items:center !important;
  color:#667085 !important;
  font-size:13px !important;
  border-bottom:2px solid transparent !important;
}
body.broker-theme.ig-future-page .position-tab:not(.inactive),
body.broker-theme.ig-future-page .position-tab.active{
  color:var(--future-blue) !important;
  border-bottom-color:var(--future-blue) !important;
}
body.broker-theme.ig-future-page .position-content{
  width:100% !important;
  max-width:760px !important;
  min-height:180px !important;
  margin:0 auto !important;
  padding:18px 12px 110px !important;
  background:#fff !important;
  color:#667085 !important;
  border:0 !important;
  box-shadow:none !important;
}
body.broker-theme.ig-future-page .no-orders,
body.broker-theme.ig-future-page #open-orders-content:empty,
body.broker-theme.ig-future-page #hold-position-content:empty{
  color:#98a2b3 !important;
}

@media (max-width:600px), (min-width: 601px){
  body.broker-theme.ig-future-page > .container{
    margin-top:8px !important;
    padding:0 8px !important;
  }
  body.broker-theme.ig-future-page > .container > .row{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;
    gap:7px !important;
  }
  body.broker-theme.ig-future-page .trading-form,
  body.broker-theme.ig-future-page .order-book{
    border-radius:10px !important;
    padding:7px !important;
  }
  body.broker-theme.ig-future-page .trading-form .mb-2{ margin-bottom:7px !important; }
  body.broker-theme.ig-future-page .future-order-type-field,
  body.broker-theme.ig-future-page .trading-form > div[style*="background:#ffffff"],
  body.broker-theme.ig-future-page .trading-form > div[style*="background: #ffffff"]{
    min-height:40px !important;
    margin-bottom:7px !important;
  }
  body.broker-theme.ig-future-page .order-item{
    height:23px !important;
    min-height:23px !important;
    font-size:10px !important;
  }
  body.broker-theme.ig-future-page .last-price-value{font-size:20px !important;}
  body.broker-theme.ig-future-page .buy-sell-buttons{
    margin-top:10px !important;
    padding:0 8px !important;
    gap:8px !important;
  }
  body.broker-theme.ig-future-page .btn-buy-long,
  body.broker-theme.ig-future-page .btn-sell-short{height:46px !important;}
  body.broker-theme.ig-future-page .position-tabs{margin-top:10px !important;padding:0 10px !important;}
  body.broker-theme.ig-future-page .position-content{padding:16px 10px 105px !important;}
}


/* v14 — Future translation/count consistency + full-white lower canvas */
html:has(body.ig-future-page),
body.broker-theme.ig-future-page {
  background:#ffffff !important;
}

body.broker-theme.ig-future-page .position-tabs,
body.broker-theme.ig-future-page .position-content,
body.broker-theme.ig-future-page #hold-position-content,
body.broker-theme.ig-future-page #open-orders-tab-content,
body.broker-theme.ig-future-page #open-orders-content {
  background:#ffffff !important;
}

body.broker-theme.ig-future-page .position-content {
  min-height:calc(100vh - 590px) !important;
}

body.broker-theme.ig-future-page #hold-position-content {
  min-height:160px !important;
}

body.broker-theme.ig-future-page #open-orders-content > [data-translate],
body.broker-theme.ig-future-page #open-orders-tab-content > [data-translate] {
  color:#98a2b3 !important;
  font-size:14px !important;
}


/* v15 — production layout safety + Future no-overlap mobile layout */
body.broker-theme { overflow-x:hidden !important; }
body.broker-theme *, body.broker-theme *::before, body.broker-theme *::after { box-sizing:border-box !important; }
body.broker-theme img, body.broker-theme svg, body.broker-theme canvas, body.broker-theme video { max-width:100% !important; }
body.broker-theme input, body.broker-theme select, body.broker-theme textarea, body.broker-theme button { min-width:0; max-width:100%; }
body.broker-theme .container, body.broker-theme .container-fluid, body.broker-theme main, body.broker-theme section,
body.broker-theme .card, body.broker-theme .modal-dialog, body.broker-theme .modal-content,
body.broker-theme .form-section, body.broker-theme .content-section { max-width:100%; }
body.broker-theme .row > *, body.broker-theme [class*="col-"], body.broker-theme .d-flex > *, body.broker-theme .d-grid > * { min-width:0; }
body.broker-theme p, body.broker-theme span, body.broker-theme div, body.broker-theme label, body.broker-theme a { overflow-wrap:anywhere; }
body.broker-theme input:not([type="button"]):not([type="submit"]):not([type="reset"]),
body.broker-theme select, body.broker-theme textarea { color:#101828 !important; }
body.broker-theme input::placeholder, body.broker-theme textarea::placeholder { color:#98a2b3 !important; opacity:1 !important; }

body.broker-theme.ig-future-page > .container,
body.broker-theme.ig-future-page > .container > .row,
body.broker-theme.ig-future-page > .container > .row > .col-6 { position:relative !important; z-index:auto !important; }
body.broker-theme.ig-future-page .trading-form,
body.broker-theme.ig-future-page .order-book {
  width:100% !important; min-width:0 !important; max-width:100% !important;
  overflow:hidden !important; position:relative !important; z-index:1 !important;
}
body.broker-theme.ig-future-page .future-order-type-field { position:relative !important; z-index:4 !important; }
body.broker-theme.ig-future-page .future-order-type-menu {
  z-index:20 !important; left:0 !important; right:0 !important; width:100% !important; max-width:100% !important;
}
body.broker-theme.ig-future-page .order-current-price,
body.broker-theme.ig-future-page .position-item .order-current-price,
body.broker-theme.ig-future-page .order-item .order-current-price { color:#101828 !important; }

@media (max-width:600px), (min-width: 601px) {
  body.broker-theme.ig-future-page > .container { padding:0 10px !important; margin-top:10px !important; overflow:visible !important; }
  body.broker-theme.ig-future-page > .container > .row {
    display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important;
    width:100% !important; overflow:visible !important;
  }
  body.broker-theme.ig-future-page > .container > .row > .col-6 {
    width:100% !important; max-width:100% !important; flex:0 0 100% !important; padding:0 !important;
  }
  body.broker-theme.ig-future-page .trading-form,
  body.broker-theme.ig-future-page .order-book { width:100% !important; max-width:100% !important; border-radius:12px !important; padding:12px !important; }
  body.broker-theme.ig-future-page .order-book { margin-top:0 !important; }
  body.broker-theme.ig-future-page .order-book-header { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; padding:0 4px 8px !important; }
  body.broker-theme.ig-future-page .order-item { height:28px !important; min-height:28px !important; padding:0 4px !important; font-size:12px !important; }
  body.broker-theme.ig-future-page .last-price-display { padding:13px 8px !important; }
  body.broker-theme.ig-future-page .last-price-value { font-size:23px !important; }
  body.broker-theme.ig-future-page .buy-sell-buttons { padding:0 10px !important; margin-top:12px !important; }
  body.broker-theme.ig-future-page .position-tabs { margin-top:12px !important; }
}
@media (max-width:380px) {
  body.broker-theme.ig-future-page > .container { padding-left:8px !important; padding-right:8px !important; }
  body.broker-theme.ig-future-page .trading-form, body.broker-theme.ig-future-page .order-book { padding:10px !important; }
  body.broker-theme.ig-future-page .trading-form button[onclick*="setQuantityPercentage"],
  body.broker-theme.ig-future-page .trading-form button[onclick*="setVolumePercentage"] { font-size:10px !important; padding-left:4px !important; padding-right:4px !important; }
}


/* v16 — white-surface contrast audit + trading selector readability
   White/light surfaces always get dark readable foregrounds. */
body.broker-theme {
  --sw-on-white:#101828;
  --sw-secondary:#667085;
  --sw-placeholder:#98a2b3;
}

/* Native form controls: override legacy dark-theme text-fill rules too. */
body.broker-theme input:not([type="button"]):not([type="submit"]):not([type="reset"]),
body.broker-theme select,
body.broker-theme textarea {
  color:#101828 !important;
  -webkit-text-fill-color:#101828 !important;
  caret-color:#101828 !important;
}
body.broker-theme select option {
  color:#101828 !important;
  -webkit-text-fill-color:#101828 !important;
  background:#ffffff !important;
}
body.broker-theme input::placeholder,
body.broker-theme textarea::placeholder {
  color:#98a2b3 !important;
  -webkit-text-fill-color:#98a2b3 !important;
  opacity:1 !important;
}

/* Header symbol/pair dropdowns on Binary + Future. */
body.broker-theme #pair-selector-menu {
  background:#ffffff !important;
  color:#101828 !important;
  border:1px solid #d0d5dd !important;
  box-shadow:0 10px 28px rgba(16,24,40,.14) !important;
}
body.broker-theme #pair-selector-menu > div {
  color:#101828 !important;
  background:#ffffff !important;
  border-bottom-color:#e4e7ec !important;
}
body.broker-theme #pair-selector-menu > div:hover {
  background:#f2f4f7 !important;
  color:#101828 !important;
}
body.broker-theme #pair-selector-menu > div[style*="background"] {
  color:#101828 !important;
}

/* Bootstrap/light dropdown/popover/list surfaces used by remaining pages. */
body.broker-theme .dropdown-menu,
body.broker-theme .popover,
body.broker-theme .list-group-item,
body.broker-theme .offcanvas,
body.broker-theme .modal-content {
  color:#101828 !important;
}
body.broker-theme .dropdown-menu,
body.broker-theme .dropdown-item,
body.broker-theme .list-group-item {
  background-color:#ffffff !important;
}
body.broker-theme .dropdown-item,
body.broker-theme .dropdown-item *,
body.broker-theme .list-group-item,
body.broker-theme .list-group-item * {
  color:#101828 !important;
}
body.broker-theme .dropdown-item:hover,
body.broker-theme .dropdown-item:focus,
body.broker-theme .list-group-item:hover {
  background:#f2f4f7 !important;
}

/* Future controls: old ig-trading-theme uses -webkit-text-fill-color:white. */
body.broker-theme.ig-future-page #leverage-select,
body.broker-theme.ig-future-page #leverage-select option {
  color:#101828 !important;
  -webkit-text-fill-color:#101828 !important;
  color-scheme:light !important;
  opacity:1 !important;
}
body.broker-theme.ig-future-page #leverage-select:focus {
  color:#101828 !important;
  -webkit-text-fill-color:#101828 !important;
  background:#ffffff !important;
}
body.broker-theme.ig-future-page .future-order-type-trigger,
body.broker-theme.ig-future-page .future-order-type-label,
body.broker-theme.ig-future-page .future-order-type-option {
  color:#101828 !important;
  -webkit-text-fill-color:#101828 !important;
}
body.broker-theme.ig-future-page .future-order-type-option.is-selected,
body.broker-theme.ig-future-page .future-order-type-option:hover {
  color:#1677ff !important;
  -webkit-text-fill-color:#1677ff !important;
}
body.broker-theme.ig-future-page #price-input,
body.broker-theme.ig-future-page #quantity-input,
body.broker-theme.ig-future-page .trading-form span:not(.badge):not(.btn-text) {
  -webkit-text-fill-color:currentColor !important;
}

/* White order/history cards: legacy templates inserted white values. */
body.broker-theme .order-item[style*="background: #ffffff"] div[style*="color: white"],
body.broker-theme .order-item[style*="background:#ffffff"] div[style*="color: white"],
body.broker-theme .position-item[style*="background: #ffffff"] span[style="color: white;"],
body.broker-theme .position-item[style*="background:#ffffff"] span[style="color: white;"] {
  color:#101828 !important;
  -webkit-text-fill-color:#101828 !important;
}
/* Preserve intentional white text on colored action/status badges. */
body.broker-theme button.btn-primary,
body.broker-theme button.btn-primary *,
body.broker-theme .submit-btn,
body.broker-theme .submit-btn *,
body.broker-theme .btn-buy-long,
body.broker-theme .btn-buy-long *,
body.broker-theme .btn-sell-short,
body.broker-theme .btn-sell-short * {
  -webkit-text-fill-color:#ffffff !important;
}

/* Keep entire viewport surface consistent; no dark strips behind narrow content. */
html, body.broker-theme {
  min-width:100% !important;
  min-height:100% !important;
  background:#ffffff !important;
}


/* v18 — Future leverage dropdown final fix
   Use div-based options so global button styles cannot hide or recolor any item. */
html,
body.broker-theme {
  color-scheme: light !important;
}

body.broker-theme.ig-future-page .future-leverage-control {
  position: relative !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  flex: 0 0 76px !important;
  z-index: 100 !important;
}

body.broker-theme.ig-future-page .future-leverage-native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.broker-theme.ig-future-page .future-leverage-trigger {
  width: 76px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
  cursor: pointer !important;
}

body.broker-theme.ig-future-page .future-leverage-trigger i {
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
  font-size: 11px !important;
  flex: 0 0 auto !important;
  transition: transform .16s ease !important;
}

body.broker-theme.ig-future-page .future-leverage-control.is-open .future-leverage-trigger {
  border-color: #1677ff !important;
  box-shadow: 0 0 0 3px rgba(22, 119, 255, .10) !important;
}

body.broker-theme.ig-future-page .future-leverage-control.is-open .future-leverage-trigger i {
  transform: rotate(180deg) !important;
}

body.broker-theme.ig-future-page .future-leverage-menu {
  position: absolute !important;
  top: 44px !important;
  right: 0 !important;
  left: auto !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: auto !important;
  max-height: none !important;
  padding: 5px !important;
  margin: 0 !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .14) !important;
  overflow: visible !important;
  z-index: 10000 !important;
}

body.broker-theme.ig-future-page .future-leverage-menu[hidden] {
  display: none !important;
}

body.broker-theme.ig-future-page .future-leverage-option {
  all: unset !important;
  box-sizing: border-box !important;
  width: 82px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 34px !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.broker-theme.ig-future-page .future-leverage-option + .future-leverage-option {
  margin-top: 1px !important;
}

body.broker-theme.ig-future-page .future-leverage-option:hover {
  background: #f2f6fb !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}

body.broker-theme.ig-future-page .future-leverage-option.is-selected {
  background: #eaf3ff !important;
  color: #1677ff !important;
  -webkit-text-fill-color: #1677ff !important;
}

body.broker-theme select,
body.broker-theme select option {
  color-scheme: light !important;
}


/* v19 — leverage dropdown portal fix
   The menu is appended directly to <body> and uses fixed positioning, so no
   Future form row can cover 10x/50x and no parent overflow can clip it. */
body.broker-theme.ig-future-page #future-leverage-menu {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 5px !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(16,24,40,.18) !important;
  z-index: 2147483646 !important;
  isolation: isolate !important;
}

body.broker-theme.ig-future-page #future-leverage-menu[hidden] {
  display: none !important;
}

body.broker-theme.ig-future-page #future-leverage-menu .future-leverage-option {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  width: 86px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

body.broker-theme.ig-future-page #future-leverage-menu .future-leverage-option + .future-leverage-option {
  margin-top: 1px !important;
}

body.broker-theme.ig-future-page #future-leverage-menu .future-leverage-option:hover {
  background: #f2f6fb !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}

body.broker-theme.ig-future-page #future-leverage-menu .future-leverage-option.is-selected {
  background: #eaf3ff !important;
  color: #1677ff !important;
  -webkit-text-fill-color: #1677ff !important;
}


/* v20 — leverage popup anchor correction
   Older v18 rules used top/left !important, which overrode the portal's
   JavaScript coordinates and pushed the menu to the far-left of the page.
   Coordinates now flow through CSS variables with !important. */
body.broker-theme.ig-future-page #future-leverage-menu {
  left: var(--future-leverage-left, 0px) !important;
  top: var(--future-leverage-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Keep menu visually aligned with the right edge of the 1x trigger. */
body.broker-theme.ig-future-page .future-leverage-trigger {
  position: relative !important;
  z-index: 101 !important;
}


/* v21 — Home quick actions: clean securities-app layout
   Remove the blue outer slab/outline and heavy shadows. Keep only simple
   individual white tiles like the supplied reference. */
body.broker-theme .trading-functions {
  padding: 8px 14px 12px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broker-theme .trading-functions .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.broker-theme .trading-functions .row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broker-theme .trading-functions .col {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broker-theme .trading-functions .function-card {
  width: 100% !important;
  min-height: 74px !important;
  height: auto !important;
  padding: 9px 4px 7px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #eef1f5 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: none !important;
  color: #344054 !important;
  text-decoration: none !important;
}

body.broker-theme .trading-functions .function-card:hover,
body.broker-theme .trading-functions .function-card:active,
body.broker-theme .trading-functions .function-card:focus {
  background: #ffffff !important;
  border-color: #e7ebf0 !important;
  box-shadow: none !important;
  transform: none !important;
  outline: none !important;
}

body.broker-theme .trading-functions .function-icon {
  width: 38px !important;
  height: 38px !important;
  margin: 0 auto 5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.broker-theme .trading-functions .function-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  filter: none !important;
}

body.broker-theme .trading-functions .function-label {
  margin: 0 !important;
  max-width: 100% !important;
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Keep the second row aligned naturally when there are fewer than four items. */
@media (max-width: 600px), (min-width: 601px) {
  body.broker-theme .trading-functions {
    padding: 8px 12px 12px !important;
  }

  body.broker-theme .trading-functions .row {
    gap: 8px !important;
  }

  body.broker-theme .trading-functions .function-card {
    min-height: 70px !important;
    padding: 8px 3px 6px !important;
  }

  body.broker-theme .trading-functions .function-icon {
    width: 36px !important;
    height: 36px !important;
  }

  body.broker-theme .trading-functions .function-label {
    font-size: 10.5px !important;
  }
}


/* v22 — Profile / Setting page clean securities-app layout
   Reference direction: pale page canvas, white information cards, soft pastel
   icon blocks, separated list rows, no dark panels and no heavy shadows. */

body.broker-theme.ig-profile-page {
  background: #f5f7fb !important;
  color: #101828 !important;
}

body.broker-theme.ig-profile-page .profile-container {
  width: 100% !important;
  max-width: 430px !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 14px 14px 104px !important;
  background: #f5f7fb !important;
}

/* User summary — remove the large avatar-card feeling. */
body.broker-theme.ig-profile-page .profile-header {
  padding: 8px 2px 16px !important;
  margin: 0 !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broker-theme.ig-profile-page .profile-avatar {
  display: none !important;
}

body.broker-theme.ig-profile-page .profile-name {
  margin: 0 0 6px !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body.broker-theme.ig-profile-page .profile-id {
  display: block !important;
  margin: 2px 0 !important;
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body.broker-theme.ig-profile-page #profileCreditScore {
  color: #667085 !important;
}

body.broker-theme.ig-profile-page #creditScoreValue {
  display: inline-block !important;
  margin-left: 3px !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: #ecfdf3 !important;
  color: #12a36d !important;
  -webkit-text-fill-color: #12a36d !important;
  font-weight: 600 !important;
}

body.broker-theme.ig-profile-page .copy-icon {
  color: #1677ff !important;
  text-shadow: none !important;
  filter: none !important;
  font-size: 13px !important;
}

/* Login welcome block if the user is logged out. */
body.broker-theme.ig-profile-page .welcome-section {
  margin: 0 0 14px !important;
  padding: 16px !important;
  border: 1px solid #edf0f4 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.broker-theme.ig-profile-page .welcome-title {
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}

body.broker-theme.ig-profile-page .welcome-subtitle {
  color: #98a2b3 !important;
  -webkit-text-fill-color: #98a2b3 !important;
}

/* Section titles */
body.broker-theme.ig-profile-page .quick-entry-title,
body.broker-theme.ig-profile-page .section-title {
  margin: 12px 0 9px !important;
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Quick entry tiles — clean, flat, pale icons. */
body.broker-theme.ig-profile-page .quick-entry {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.broker-theme.ig-profile-page .quick-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
}

body.broker-theme.ig-profile-page .quick-option {
  min-width: 0 !important;
  padding: 9px 4px 8px !important;
  border: 1px solid #edf0f4 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  text-align: center !important;
}

body.broker-theme.ig-profile-page .quick-option-icon {
  width: 42px !important;
  height: 42px !important;
  margin: 0 auto 6px !important;
  padding: 7px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #f2f6ff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.broker-theme.ig-profile-page .quick-option:nth-child(2) .quick-option-icon {
  background: #eef8ff !important;
}

body.broker-theme.ig-profile-page .quick-option:nth-child(3) .quick-option-icon {
  background: #eefcf5 !important;
}

body.broker-theme.ig-profile-page .quick-option:nth-child(4) .quick-option-icon {
  background: #f2f3ff !important;
}

body.broker-theme.ig-profile-page .quick-option-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

body.broker-theme.ig-profile-page .quick-option-text {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

/* Deposit / quick-withdraw blocks — simple white information tiles. */
body.broker-theme.ig-profile-page .action-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 22px !important;
}

body.broker-theme.ig-profile-page .action-card {
  min-height: 108px !important;
  padding: 14px 13px !important;
  border: 1px solid #edf0f4 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.broker-theme.ig-profile-page .action-card:hover,
body.broker-theme.ig-profile-page .action-card:active {
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

body.broker-theme.ig-profile-page .action-card-icon {
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 10px !important;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #f5f7fb !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.broker-theme.ig-profile-page .action-card-icon img {
  filter: none !important;
}

body.broker-theme.ig-profile-page .action-card-title {
  margin: 0 0 4px !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body.broker-theme.ig-profile-page .action-card-subtitle {
  color: #98a2b3 !important;
  -webkit-text-fill-color: #98a2b3 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* General setting rows — image-2 style separate white cards. */
body.broker-theme.ig-profile-page .general-section {
  padding: 0 !important;
  background: transparent !important;
}

body.broker-theme.ig-profile-page .general-section > .menu-item,
body.broker-theme.ig-profile-page .menu-item {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 0 8px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #edf0f4 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.broker-theme.ig-profile-page .general-section > .menu-item:first-of-type {
  border-radius: 12px !important;
}

body.broker-theme.ig-profile-page .menu-icon {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  margin: 0 9px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  background: #f1f6ff !important;
  color: #5d83d7 !important;
  -webkit-text-fill-color: #5d83d7 !important;
  font-size: 15px !important;
  text-shadow: none !important;
}

body.broker-theme.ig-profile-page .menu-text {
  flex: 1 !important;
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body.broker-theme.ig-profile-page .menu-status {
  margin-right: 8px !important;
  color: #f79009 !important;
  -webkit-text-fill-color: #f79009 !important;
  font-size: 12px !important;
}

body.broker-theme.ig-profile-page .menu-arrow {
  color: #c0c7d1 !important;
  -webkit-text-fill-color: #c0c7d1 !important;
  font-size: 14px !important;
}

/* Logout behaves like a final settings row, not a heavy CTA. */
body.broker-theme.ig-profile-page .exit-button {
  width: 100% !important;
  height: 50px !important;
  margin: 12px 0 0 !important;
  border: 1px solid #fee2e2 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #e5484d !important;
  -webkit-text-fill-color: #e5484d !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.broker-theme.ig-profile-page .exit-button i {
  margin-right: 8px !important;
  color: #e5484d !important;
  -webkit-text-fill-color: #e5484d !important;
  text-shadow: none !important;
}

body.broker-theme.ig-profile-page iframe[src="nav.html"] {
  background: #ffffff !important;
  border-top: 1px solid #edf0f4 !important;
  box-shadow: none !important;
}

@media (max-width: 380px) {
  body.broker-theme.ig-profile-page .profile-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.broker-theme.ig-profile-page .quick-options {
    gap: 6px !important;
  }

  body.broker-theme.ig-profile-page .quick-option {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body.broker-theme.ig-profile-page .quick-option-icon {
    width: 39px !important;
    height: 39px !important;
  }

  body.broker-theme.ig-profile-page .quick-option-text {
    font-size: 10px !important;
  }
}


/* v23 — Bottom navigation reference-style redesign
   Visual-only change. Existing links / onclick / route behavior remain untouched.
   Direction: clean white bar, muted gray inactive items, one blue active item,
   no glow, no dark tile, no floating-card effect. */

body.broker-theme .bottom-nav,
body.broker-theme .bottom-navigation,
body.broker-theme nav.bottom-nav,
body.broker-theme .mobile-bottom-nav {
  background: #ffffff !important;
  background-image: none !important;
  border-top: 1px solid #eef1f5 !important;
  box-shadow: none !important;
}

body.broker-theme iframe[src="nav.html"] {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Rules that apply inside nav.html itself */
body.broker-theme.nav-page,
body.nav-page {
  margin: 0 !important;
  background: #ffffff !important;
  color: #98a2b3 !important;
}

body.nav-page .bottom-nav,
body.nav-page .bottom-navigation,
body.nav-page nav {
  width: 100% !important;
  min-height: 64px !important;
  padding: 6px 8px calc(5px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  border-top: 1px solid #eef1f5 !important;
  box-shadow: none !important;
}

body.nav-page .nav-item,
body.nav-page .bottom-nav-item,
body.nav-page a {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 3px 1px 2px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: #a5acb8 !important;
  -webkit-text-fill-color: #a5acb8 !important;
  text-decoration: none !important;
  transform: none !important;
}

body.nav-page .nav-item:hover,
body.nav-page .nav-item:active,
body.nav-page .bottom-nav-item:hover,
body.nav-page .bottom-nav-item:active,
body.nav-page a:hover,
body.nav-page a:active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Remove old glowing/boxed icon treatment. */
body.nav-page .nav-icon,
body.nav-page .bottom-nav-icon,
body.nav-page .icon-wrapper {
  width: 27px !important;
  height: 27px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.nav-page .nav-icon i,
body.nav-page .bottom-nav-icon i,
body.nav-page .icon-wrapper i,
body.nav-page .nav-item > i,
body.nav-page .bottom-nav-item > i,
body.nav-page a > i {
  color: #a5acb8 !important;
  -webkit-text-fill-color: #a5acb8 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}

body.nav-page .nav-icon img,
body.nav-page .bottom-nav-icon img,
body.nav-page .icon-wrapper img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  filter: grayscale(1) opacity(.62) !important;
}

/* Labels */
body.nav-page .nav-label,
body.nav-page .bottom-nav-label,
body.nav-page .nav-text,
body.nav-page a span:last-child {
  max-width: 100% !important;
  margin: 0 !important;
  color: #a5acb8 !important;
  -webkit-text-fill-color: #a5acb8 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

/* Active item: blue icon/text only, like the reference.
   No square, no red dot, no glow. */
body.nav-page .nav-item.active,
body.nav-page .bottom-nav-item.active,
body.nav-page a.active {
  background: transparent !important;
  box-shadow: none !important;
  color: #1769d2 !important;
  -webkit-text-fill-color: #1769d2 !important;
}

body.nav-page .nav-item.active .nav-icon,
body.nav-page .bottom-nav-item.active .bottom-nav-icon,
body.nav-page a.active .icon-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.nav-page .nav-item.active i,
body.nav-page .bottom-nav-item.active i,
body.nav-page a.active i,
body.nav-page .nav-item.active .nav-icon i,
body.nav-page .bottom-nav-item.active .bottom-nav-icon i {
  color: #1769d2 !important;
  -webkit-text-fill-color: #1769d2 !important;
  text-shadow: none !important;
  filter: none !important;
}

body.nav-page .nav-item.active img,
body.nav-page .bottom-nav-item.active img,
body.nav-page a.active img {
  filter: none !important;
}

body.nav-page .nav-item.active .nav-label,
body.nav-page .bottom-nav-item.active .bottom-nav-label,
body.nav-page .nav-item.active .nav-text,
body.nav-page a.active span:last-child {
  color: #1769d2 !important;
  -webkit-text-fill-color: #1769d2 !important;
  font-weight: 600 !important;
}

/* Neutralize any pseudo-element active background/badge from legacy styles. */
body.nav-page .nav-item::before,
body.nav-page .nav-item::after,
body.nav-page .bottom-nav-item::before,
body.nav-page .bottom-nav-item::after,
body.nav-page a::before,
body.nav-page a::after {
  box-shadow: none !important;
}

@media (max-width: 380px) {
  body.nav-page .bottom-nav,
  body.nav-page .bottom-navigation,
  body.nav-page nav {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.nav-page .nav-label,
  body.nav-page .bottom-nav-label,
  body.nav-page .nav-text,
  body.nav-page a span:last-child {
    font-size: 9px !important;
  }

  body.nav-page .nav-icon i,
  body.nav-page .bottom-nav-icon i,
  body.nav-page .nav-item > i,
  body.nav-page a > i {
    font-size: 19px !important;
  }
}


/* v24 — Bottom navigation alignment hard fix
   The previous visual pass accidentally applied the 6-column grid to <nav>
   itself, but nav.html actually contains:
   nav > .container-fluid > .row > .col > .nav-item
   This final layer targets that real Bootstrap structure directly. */

html:has(body.nav-page),
body.nav-page {
  width: 100% !important;
  min-width: 100% !important;
  height: 74px !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

body.nav-page .bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 74px !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: #ffffff !important;
  border: 0 !important;
  border-top: 1px solid #eef1f5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}

body.nav-page .bottom-nav > .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: block !important;
  background: #ffffff !important;
}

body.nav-page .bottom-nav > .container-fluid > .row {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  background: transparent !important;
}

body.nav-page .bottom-nav > .container-fluid > .row > .col {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  display: block !important;
  text-align: center !important;
  background: transparent !important;
}

body.nav-page .bottom-nav .nav-item {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 9px 1px 7px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
}

body.nav-page .bottom-nav .nav-item > i {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a8afb9 !important;
  -webkit-text-fill-color: #a8afb9 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  text-shadow: none !important;
  filter: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.nav-page .bottom-nav .nav-label {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #a8afb9 !important;
  -webkit-text-fill-color: #a8afb9 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

/* Active state: blue icon/text only. No box, glow, badge or pseudo-element. */
body.nav-page .bottom-nav .nav-item.active,
body.nav-page .bottom-nav .nav-item.active:hover,
body.nav-page .bottom-nav .nav-item.active:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.nav-page .bottom-nav .nav-item.active > i,
body.nav-page .bottom-nav .nav-item.active .nav-label {
  color: #1769d2 !important;
  -webkit-text-fill-color: #1769d2 !important;
  background: transparent !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.nav-page .bottom-nav .nav-item::before,
body.nav-page .bottom-nav .nav-item::after {
  content: none !important;
  display: none !important;
}

/* Parent pages: reserve exactly the same height as nav.html. */
body.broker-theme iframe[src="nav.html"] {
  width: 100% !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

@media (max-width: 380px) {
  body.nav-page .bottom-nav > .container-fluid {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  body.nav-page .bottom-nav .nav-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.nav-page .bottom-nav .nav-label {
    font-size: 9px !important;
  }

  body.nav-page .bottom-nav .nav-item > i {
    font-size: 19px !important;
  }
}


/* v25 — Bottom nav active-state consistency
   Every mapped page gets a clear blue active icon/text, without changing routes. */
body.nav-page .bottom-nav .nav-item.active > i,
body.nav-page .bottom-nav .nav-item.active .nav-label {
  color: #1769d2 !important;
  -webkit-text-fill-color: #1769d2 !important;
  opacity: 1 !important;
}

body.nav-page .bottom-nav .nav-item:not(.active) > i,
body.nav-page .bottom-nav .nav-item:not(.active) .nav-label {
  color: #a8afb9 !important;
  -webkit-text-fill-color: #a8afb9 !important;
  opacity: 1 !important;
}


/* v30 — clean 4-item bottom nav, rebuilt with valid HTML only.
   Visible: Home / Binary / Fund / Profile */
body.nav-page .bottom-nav > .container-fluid > .row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}


/* v31 — 5-item bottom navigation + binary order-history UI */
body.nav-page .bottom-nav > .container-fluid > .row {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Quote embedded order-history + standalone order-history page */
body.broker-theme .binary-history-list,
body.broker-theme #binary-order-history-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px 12px 96px !important;
  background: #f5f7fb !important;
}

body.broker-theme .binary-history-card {
  width: 100% !important;
  padding: 12px 13px !important;
  border: 1px solid #eef1f4 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #101828 !important;
}

body.broker-theme .binary-history-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 9px !important;
  border-bottom: 1px solid #f0f2f5 !important;
}

body.broker-theme .binary-history-title {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  min-width: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #101828 !important;
}

body.broker-theme .binary-history-duration {
  color: #d68631 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body.broker-theme .binary-history-side {
  flex: 0 0 auto !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
body.broker-theme .binary-history-side.long { color: #12a66a !important; }
body.broker-theme .binary-history-side.short { color: #ef4753 !important; }

body.broker-theme .binary-history-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px 16px !important;
}

body.broker-theme .binary-history-field {
  min-width: 0 !important;
}

body.broker-theme .binary-history-field.wide {
  grid-column: 1 / -1 !important;
}

body.broker-theme .binary-history-label {
  color: #98a2b3 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

body.broker-theme .binary-history-value {
  margin-top: 2px !important;
  color: #344054 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

body.broker-theme .binary-history-value.emphasis {
  color: #101828 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.broker-theme .binary-history-value.pnl-win {
  color: #12a66a !important;
  font-weight: 700 !important;
}
body.broker-theme .binary-history-value.pnl-lose {
  color: #ef4753 !important;
  font-weight: 700 !important;
}

body.broker-theme .binary-history-empty,
body.broker-theme .binary-history-loading {
  padding: 34px 16px !important;
  text-align: center !important;
  color: #98a2b3 !important;
  font-size: 13px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
}

/* Standalone history page */
body.broker-theme.order-history-page {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 0 90px !important;
  background: #f5f7fb !important;
  color: #101828 !important;
}

body.broker-theme.order-history-page .order-history-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  width: 100% !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
}

body.broker-theme.order-history-page .order-history-header .back-btn {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
  color: #25364a !important;
  font-size: 19px !important;
}

body.broker-theme.order-history-page .order-history-header h1 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #101828 !important;
}

body.broker-theme.order-history-page .order-history-filter {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef1f5 !important;
}

body.broker-theme.order-history-page .date-wrap {
  position: relative !important;
  min-width: 0 !important;
}

body.broker-theme.order-history-page .date-wrap i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #667085 !important;
  pointer-events: none !important;
}

body.broker-theme.order-history-page #history-date {
  width: 100% !important;
  height: 40px !important;
  padding: 0 10px 0 36px !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #344054 !important;
  font-size: 13px !important;
}

body.broker-theme.order-history-page .history-search-btn {
  min-width: 72px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #12b76a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.broker-theme.order-history-page .history-reset-btn {
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 10px !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #667085 !important;
  font-size: 12px !important;
}

body.broker-theme.order-history-page .order-history-filter-actions {
  display: flex !important;
  gap: 6px !important;
}

body.broker-theme.order-history-page .history-pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 4px 12px 96px !important;
}

body.broker-theme.order-history-page .history-pagination button {
  min-width: 82px !important;
  height: 36px !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #344054 !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

body.broker-theme.order-history-page .history-pagination button:disabled {
  opacity: .42 !important;
}

@media (max-width: 360px) {
  body.nav-page .bottom-nav .nav-label {
    font-size: 8.5px !important;
  }
  body.broker-theme .binary-history-grid {
    gap-left: 10px !important;
  }
}


/* v32 — Order History BO-style date range picker */
body.broker-theme.order-history-page .order-history-filter.range-filter {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 12px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef1f5 !important;
}

body.broker-theme.order-history-page .date-range-trigger {
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  font-size: 12px !important;
  text-align: left !important;
  box-shadow: none !important;
}

body.broker-theme.order-history-page .date-range-trigger > span {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
}

body.broker-theme.order-history-page .date-range-trigger > i {
  flex: 0 0 auto !important;
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
}

body.broker-theme.order-history-page .date-range-panel {
  position: absolute !important;
  top: calc(100% - 4px) !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 1000 !important;
  padding: 14px !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(16,24,40,.14) !important;
}

body.broker-theme.order-history-page .date-range-panel[hidden] {
  display: none !important;
}

body.broker-theme.order-history-page .date-range-inputs {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: end !important;
}

body.broker-theme.order-history-page .date-field label {
  display: block !important;
  margin-bottom: 5px !important;
  color: #667085 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

body.broker-theme.order-history-page .date-field input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 8px !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-size: 11px !important;
}

body.broker-theme.order-history-page .date-separator {
  padding-bottom: 10px !important;
  color: #98a2b3 !important;
  font-size: 12px !important;
}

body.broker-theme.order-history-page .date-preset-title {
  margin: 14px 0 8px !important;
  color: #667085 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

body.broker-theme.order-history-page .date-presets {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 7px !important;
}

body.broker-theme.order-history-page .date-preset {
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 7px !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #475467 !important;
  -webkit-text-fill-color: #475467 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

body.broker-theme.order-history-page .date-preset.active {
  border-color: #84adff !important;
  background: #eaf3ff !important;
  color: #1769d2 !important;
  -webkit-text-fill-color: #1769d2 !important;
}

body.broker-theme.order-history-page .date-preset-all {
  grid-column: span 3 !important;
}

body.broker-theme.order-history-page .date-range-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #f0f2f5 !important;
}

body.broker-theme.order-history-page .date-range-clear,
body.broker-theme.order-history-page .date-range-apply {
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.broker-theme.order-history-page .date-range-clear {
  border: 1px solid #dfe5ec !important;
  background: #ffffff !important;
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
}

body.broker-theme.order-history-page .date-range-apply {
  border: 0 !important;
  background: #1769d2 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 360px) {
  body.broker-theme.order-history-page .date-presets {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.broker-theme.order-history-page .date-preset-all {
    grid-column: span 2 !important;
  }
}


/* v33 — Profile top summary restored: centered avatar + centered score/invite.
   Keeps the current light securities theme; no business logic changes. */
body.broker-theme.ig-profile-page .profile-header {
  width: 100% !important;
  padding: 18px 10px 20px !important;
  margin: 0 0 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broker-theme.ig-profile-page .profile-avatar {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 10px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d7e7ff !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #eef6ff 0%, #e5f1ff 100%) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.broker-theme.ig-profile-page .profile-avatar i {
  font-size: 31px !important;
  color: #2f80ed !important;
  -webkit-text-fill-color: #2f80ed !important;
  text-shadow: none !important;
  filter: none !important;
}

body.broker-theme.ig-profile-page .profile-name {
  width: 100% !important;
  margin: 0 0 7px !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

body.broker-theme.ig-profile-page .profile-id,
body.broker-theme.ig-profile-page #profileCreditScore,
body.broker-theme.ig-profile-page #profileInvitationId {
  width: 100% !important;
  margin: 2px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

body.broker-theme.ig-profile-page #creditScoreValue {
  margin-left: 2px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #12a66a !important;
  -webkit-text-fill-color: #12a66a !important;
  font-weight: 600 !important;
}

body.broker-theme.ig-profile-page #invitationIdValue {
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
  font-weight: 500 !important;
}

body.broker-theme.ig-profile-page .copy-icon {
  margin-left: 2px !important;
  color: #5b7da5 !important;
  -webkit-text-fill-color: #5b7da5 !important;
  font-size: 12px !important;
  text-shadow: none !important;
  filter: none !important;
  cursor: pointer !important;
}

@media (max-width: 380px) {
  body.broker-theme.ig-profile-page .profile-header {
    padding-top: 15px !important;
    padding-bottom: 17px !important;
  }

  body.broker-theme.ig-profile-page .profile-avatar {
    width: 66px !important;
    height: 66px !important;
  }

  body.broker-theme.ig-profile-page .profile-avatar i {
    font-size: 28px !important;
  }

  body.broker-theme.ig-profile-page .profile-name {
    font-size: 20px !important;
  }
}


/* v34 — Profile desktop/mobile centering hard fix
   Earlier global "full-width page header" rules also matched .profile-header,
   causing the profile summary to break out to 100vw on desktop.
   Profile summary is NOT a page header, so keep it inside the profile container. */

body.broker-theme.ig-profile-page .profile-container {
  position: relative !important;
  width: 100% !important;
  max-width: 430px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

body.broker-theme.ig-profile-page .profile-header {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  /* Cancel the global 100vw breakout rule used by real page headers. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  padding: 18px 10px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: visible !important;
}

body.broker-theme.ig-profile-page .profile-header > * {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.broker-theme.ig-profile-page .profile-avatar {
  flex: 0 0 auto !important;
  align-self: center !important;
}

body.broker-theme.ig-profile-page .profile-name,
body.broker-theme.ig-profile-page .profile-id,
body.broker-theme.ig-profile-page #profileCreditScore,
body.broker-theme.ig-profile-page #profileInvitationId {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  align-self: center !important;
  text-align: center !important;
}

/* Desktop: keep the full profile app as a centered mobile-width panel,
   matching the rest of this project instead of stretching individual sections. */
@media (min-width: 431px) {
  body.broker-theme.ig-profile-page {
    display: block !important;
    background: #f5f7fb !important;
  }

  body.broker-theme.ig-profile-page .profile-container {
    width: 430px !important;
    max-width: 430px !important;
    margin: 0 auto !important;
  }

  body.broker-theme.ig-profile-page .profile-header {
    width: 430px !important;
    max-width: 430px !important;
    margin: 0 !important;
  }
}

/* Mobile remains naturally full width. */
@media (max-width: 430px), (min-width: 601px) {
  body.broker-theme.ig-profile-page .profile-container,
  body.broker-theme.ig-profile-page .profile-header {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* v35 — Deposit pages visually match Withdrawal style.
   Functionality, IDs, form handlers, QR, upload and API logic stay unchanged. */

/* Deposit selection page */
body.broker-theme .deposit-selection,
body.broker-theme #depositSelection,
body.broker-theme .deposit-page {
  background: #f5f7fb !important;
  color: #101828 !important;
}

body.broker-theme #depositSelection .modal-content,
body.broker-theme #depositSelection .modal-body,
body.broker-theme .deposit-selection .modal-content,
body.broker-theme .deposit-selection .modal-body {
  background: #f5f7fb !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broker-theme #depositSelection .deposit-banner,
body.broker-theme .deposit-selection .deposit-banner {
  margin: 12px !important;
  border: 1px solid #e6ebf1 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.broker-theme #depositSelection .deposit-banner .banner-content,
body.broker-theme .deposit-selection .deposit-banner .banner-content {
  background: linear-gradient(135deg,#ffffff 0%,#ffffff 62%,#eef8f5 100%) !important;
  color: #101828 !important;
}

body.broker-theme #depositSelection .deposit-banner h2,
body.broker-theme #depositSelection .deposit-banner h3,
body.broker-theme #depositSelection .deposit-banner p,
body.broker-theme .deposit-selection .deposit-banner h2,
body.broker-theme .deposit-selection .deposit-banner h3,
body.broker-theme .deposit-selection .deposit-banner p {
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}

body.broker-theme #depositSelection .deposit-banner p,
body.broker-theme .deposit-selection .deposit-banner p {
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
}

body.broker-theme #depositSelection .crypto-option,
body.broker-theme .deposit-selection .crypto-option {
  margin: 0 12px 10px !important;
  min-height: 64px !important;
  padding: 12px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #101828 !important;
  box-shadow: none !important;
}

body.broker-theme #depositSelection .crypto-option:hover,
body.broker-theme .deposit-selection .crypto-option:hover {
  background: #f9fbfd !important;
  border-color: #cfd8e3 !important;
  transform: none !important;
  box-shadow: none !important;
}

body.broker-theme #depositSelection .crypto-option .crypto-name,
body.broker-theme #depositSelection .crypto-option span,
body.broker-theme .deposit-selection .crypto-option .crypto-name,
body.broker-theme .deposit-selection .crypto-option span {
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  font-weight: 600 !important;
}

/* Deposit detail/fast deposit page */
body.broker-theme .deposit-detail,
body.broker-theme .deposit-form-page,
body.broker-theme .fast-deposit-page,
body.broker-theme #depositForm {
  background: #f5f7fb !important;
  color: #101828 !important;
}

body.broker-theme .deposit-detail .modal-content,
body.broker-theme .deposit-detail .modal-body,
body.broker-theme .deposit-form-page .modal-content,
body.broker-theme .deposit-form-page .modal-body,
body.broker-theme #depositForm .modal-content,
body.broker-theme #depositForm .modal-body {
  background: #f5f7fb !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.broker-theme .deposit-detail .deposit-card,
body.broker-theme .deposit-form-page .deposit-card,
body.broker-theme #depositForm .deposit-card,
body.broker-theme .deposit-detail .form-section,
body.broker-theme .deposit-form-page .form-section,
body.broker-theme #depositForm .form-section {
  margin: 12px !important;
  padding: 14px !important;
  border: 1px solid #e3e8ef !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.broker-theme .deposit-detail input,
body.broker-theme .deposit-detail textarea,
body.broker-theme .deposit-form-page input,
body.broker-theme .deposit-form-page textarea,
body.broker-theme #depositForm input,
body.broker-theme #depositForm textarea {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid #d9e1ea !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  box-shadow: none !important;
}

body.broker-theme .deposit-detail input::placeholder,
body.broker-theme .deposit-detail textarea::placeholder,
body.broker-theme .deposit-form-page input::placeholder,
body.broker-theme .deposit-form-page textarea::placeholder,
body.broker-theme #depositForm input::placeholder,
body.broker-theme #depositForm textarea::placeholder {
  color: #98a2b3 !important;
  -webkit-text-fill-color: #98a2b3 !important;
}

body.broker-theme .deposit-detail .chain-btn,
body.broker-theme .deposit-detail .network-option,
body.broker-theme .deposit-form-page .chain-btn,
body.broker-theme .deposit-form-page .network-option,
body.broker-theme #depositForm .chain-btn,
body.broker-theme #depositForm .network-option {
  min-height: 44px !important;
  border: 1px solid #dbe3ec !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
  box-shadow: none !important;
}

body.broker-theme .deposit-detail .chain-btn.active,
body.broker-theme .deposit-detail .network-option.active,
body.broker-theme .deposit-form-page .chain-btn.active,
body.broker-theme .deposit-form-page .network-option.active,
body.broker-theme #depositForm .chain-btn.active,
body.broker-theme #depositForm .network-option.active {
  border-color: #7db3ff !important;
  background: #eef6ff !important;
  color: #1769d2 !important;
  -webkit-text-fill-color: #1769d2 !important;
}

body.broker-theme .deposit-detail .upload-area,
body.broker-theme .deposit-form-page .upload-area,
body.broker-theme #depositForm .upload-area {
  min-height: 110px !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #667085 !important;
  box-shadow: none !important;
}

body.broker-theme .deposit-detail .important-notice,
body.broker-theme .deposit-form-page .important-notice,
body.broker-theme #depositForm .important-notice,
body.broker-theme .deposit-detail .notice-card,
body.broker-theme .deposit-form-page .notice-card,
body.broker-theme #depositForm .notice-card {
  margin-top: 12px !important;
  padding: 14px !important;
  border: 1px solid #e3e8ef !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #475467 !important;
  box-shadow: none !important;
}

body.broker-theme .deposit-detail .important-notice h3,
body.broker-theme .deposit-detail .important-notice strong,
body.broker-theme .deposit-form-page .important-notice h3,
body.broker-theme .deposit-form-page .important-notice strong,
body.broker-theme #depositForm .important-notice h3,
body.broker-theme #depositForm .important-notice strong {
  color: #101828 !important;
  -webkit-text-fill-color: #101828 !important;
}

/* QR block styling to feel consistent with withdrawal cards */
body.broker-theme .deposit-detail .qr-section,
body.broker-theme .deposit-form-page .qr-section,
body.broker-theme #depositForm .qr-section {
  margin: 12px !important;
  padding: 14px !important;
  border: 1px solid #e3e8ef !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.broker-theme .deposit-detail .copy-address-btn,
body.broker-theme .deposit-form-page .copy-address-btn,
body.broker-theme #depositForm .copy-address-btn {
  min-height: 38px !important;
  border: 1px solid #dbe3ec !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #1769d2 !important;
  -webkit-text-fill-color: #1769d2 !important;
  box-shadow: none !important;
}

/* v20260813ad — Auth viewport fix
   Keep the Login/Register screen as one full-height auth canvas (reference layout),
   while retaining the current Securities White colour theme. */
html:has(body.broker-theme.login-page),
html:has(body.broker-theme.register-page){
  min-height:100% !important;
  background:#f5f7fb !important;
  background-image:none !important;
}

body.broker-theme.login-page,
body.broker-theme.register-page{
  width:100% !important;
  min-width:0 !important;
  min-height:100vh !important;
  min-height:100svh !important;
  min-height:100dvh !important;
  margin:0 !important;
  padding:20px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow-x:hidden !important;
  background:#f5f7fb !important;
  background-image:none !important;
}

body.broker-theme.login-page .login-container,
body.broker-theme.register-page .register-container{
  flex:0 0 auto !important;
  width:min(100%, 360px) !important;
  max-width:360px !important;
  margin:auto !important;
  box-sizing:border-box !important;
}

/* Register can be taller than a small phone viewport: keep the same centered layout
   when it fits, but allow natural page scrolling instead of clipping the card. */
@media (max-height:760px){
  body.broker-theme.register-page{
    align-items:flex-start !important;
  }
}

@supports not selector(:has(*)){
  html{min-height:100% !important;}
}


/* 2026-08-21 v10 — page-specific quick-entry columns.
   Home must stay 4 across; profile stays 3 across. */
body.broker-theme.ig-home-page .trading-functions .row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.broker-theme.ig-profile-page .quick-options {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* v20260822-profile-bg-fix — Personal page background only.
   Keep this rule at the END of the stylesheet so the global
   `body.broker-theme { background-image:none !important; }` rule
   cannot override the Huatai profile artwork. */
body.broker-theme.ig-profile-page {
  position: relative !important;
  isolation: isolate !important;
  background: #f5f7fb !important;
  background-image: none !important;
}
body.broker-theme.ig-profile-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #f5f7fb;
  background-image: url('../img/profile-bg.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
body.broker-theme.ig-profile-page .profile-container {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}
body.broker-theme.ig-profile-page > iframe[src="nav.html"] {
  z-index: 1000 !important;
}