/**
 * Material Symbols nav contract — Stream + DXFI chrome.
 * Loaded last so it beats the older emoji / color-tile rules.
 */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
}

.nav-item.active .material-symbols-outlined,
.mobile-nav-item.active .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
  color: #1fddfe;
  filter: drop-shadow(0 0 8px rgba(31, 221, 254, 0.45));
}

html.light .icon-sun,
html.light .nav-item .icon-sun,
html.light .mobile-nav-item .icon-sun {
  display: inline-block !important;
}
html.light .icon-moon,
html.light .nav-item .icon-moon,
html.light .mobile-nav-item .icon-moon {
  display: none !important;
}
html:not(.light) .icon-sun,
html:not(.light) .nav-item .icon-sun,
html:not(.light) .mobile-nav-item .icon-sun {
  display: none !important;
}
html:not(.light) .icon-moon,
html:not(.light) .nav-item .icon-moon,
html:not(.light) .mobile-nav-item .icon-moon {
  display: inline-block !important;
}

.toggle-btn #toggleIcon.material-symbols-outlined {
  font-size: 22px;
  color: inherit;
}

.sidebar .nav-item,
body.dx-dashboard-terminal .sidebar .nav-item,
body.stream-hud-layout .sidebar .nav-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #9aa8b3 !important;
  border-radius: 16px !important;
  aspect-ratio: auto !important;
  max-width: 72px !important;
  max-height: none !important;
  height: 58px !important;
  padding: 6px 4px !important;
  gap: 2px !important;
  transform: none !important;
}
.sidebar .nav-item:hover,
body.dx-dashboard-terminal .sidebar .nav-item:hover,
body.stream-hud-layout .sidebar .nav-item:hover {
  background: transparent !important;
  color: #e8f4f8 !important;
  transform: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.sidebar .nav-item.active,
.sidebar .nav-item.trade,
.sidebar .nav-item.stream,
body.dx-dashboard-terminal .sidebar .nav-item.trade,
body.dx-dashboard-terminal .sidebar .nav-item.stream,
body.stream-hud-layout .sidebar .nav-item.trade,
body.stream-hud-layout .sidebar .nav-item.stream {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #9aa8b3 !important;
}
.sidebar .nav-item.active,
body.dx-dashboard-terminal .sidebar .nav-item.active,
body.stream-hud-layout .sidebar .nav-item.active {
  background: transparent !important;
  color: #1fddfe !important;
}
.sidebar .nav-item-icon,
body.dx-dashboard-terminal .sidebar .nav-item-icon,
body.stream-hud-layout .sidebar .nav-item-icon {
  font-size: 24px !important;
  width: 56px !important;
  height: 32px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: transparent;
}
.sidebar .nav-item:hover .nav-item-icon,
body.dx-dashboard-terminal .sidebar .nav-item:hover .nav-item-icon,
body.stream-hud-layout .sidebar .nav-item:hover .nav-item-icon {
  background: rgba(31, 221, 254, 0.10);
}
.sidebar .nav-item.active .nav-item-icon,
body.dx-dashboard-terminal .sidebar .nav-item.active .nav-item-icon,
body.stream-hud-layout .sidebar .nav-item.active .nav-item-icon {
  background: rgba(31, 221, 254, 0.20);
  box-shadow:
    inset 0 0 0 1px rgba(31, 221, 254, 0.28),
    0 0 18px rgba(31, 221, 254, 0.16);
}
.sidebar .nav-item-text,
body.dx-dashboard-terminal .sidebar .nav-item-text {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: inherit !important;
}

html.light .sidebar .nav-item,
html.light body.dx-dashboard-terminal .sidebar .nav-item,
html.light body.stream-hud-layout .sidebar .nav-item {
  color: #5b6b75 !important;
}
html.light .sidebar .nav-item:hover,
html.light body.dx-dashboard-terminal .sidebar .nav-item:hover {
  background: transparent !important;
  color: #123044 !important;
}
html.light .sidebar .nav-item.active,
html.light body.dx-dashboard-terminal .sidebar .nav-item.active {
  background: transparent !important;
  color: #0284c7 !important;
}
html.light .sidebar .nav-item.active .nav-item-icon,
html.light body.dx-dashboard-terminal .sidebar .nav-item.active .nav-item-icon {
  background: rgba(2, 132, 199, 0.14);
  box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.22);
}
html.light .nav-item.active .material-symbols-outlined,
html.light .mobile-nav-item.active .material-symbols-outlined {
  filter: none;
}

@media (max-width: 768px) {
  /* Help is desktop sidebar only. */
  #helpModal,
  .help-modal {
    display: none !important;
  }

  /* VAL is nested inside the account chip. Never restyle it as a second gold pill. */
  .top-header > .token-balance-pill,
  .top-header-right > .token-balance-pill {
    display: none !important;
  }

  .mobile-nav,
  body.dx-dashboard-terminal .mobile-nav,
  body.stream-hud-layout .mobile-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 56px !important;
    grid-template-areas: "home trade mid theme" !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0 4px !important;
    padding: 4px max(6px, env(safe-area-inset-left, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px)) !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .mobile-nav-token-balance,
  body.dx-dashboard-terminal .mobile-nav-token-balance,
  body.stream-hud-layout .mobile-nav-token-balance,
  .mobile-nav .mobile-nav-token-balance {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  .mobile-nav .mobile-nav-trade,
  body.dx-dashboard-terminal .mobile-nav-trade,
  body.stream-hud-layout .mobile-nav-trade {
    grid-area: trade !important;
  }
  .mobile-nav .mobile-nav-home,
  body.dx-dashboard-terminal .mobile-nav-home,
  body.stream-hud-layout .mobile-nav-home {
    grid-area: home !important;
  }
  .mobile-nav .mobile-nav-stream,
  .mobile-nav .mobile-nav-dashboard,
  .mobile-nav .mobile-nav-earn,
  body.dx-dashboard-terminal .mobile-nav-stream,
  body.stream-hud-layout .mobile-nav-dashboard {
    grid-area: mid !important;
  }
  .mobile-nav .mobile-nav-theme,
  body.dx-dashboard-terminal .mobile-nav-theme,
  body.stream-hud-layout .mobile-nav-theme {
    grid-area: theme !important;
  }

  .mobile-nav-help,
  .mobile-nav .mobile-nav-help {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    grid-area: auto !important;
  }

  .mobile-nav-item:not(.mobile-nav-help),
  body.dx-dashboard-terminal .mobile-nav-item:not(.mobile-nav-help),
  body.stream-hud-layout .mobile-nav-item:not(.mobile-nav-help),
  .mobile-nav-trade,
  .mobile-nav-home,
  .mobile-nav-stream,
  .mobile-nav-dashboard,
  .mobile-nav-earn,
  .mobile-nav-theme,
  body.dx-dashboard-terminal .mobile-nav-trade,
  body.dx-dashboard-terminal .mobile-nav-home,
  body.dx-dashboard-terminal .mobile-nav-stream,
  body.dx-dashboard-terminal .mobile-nav-theme,
  body.stream-hud-layout .mobile-nav-trade,
  body.stream-hud-layout .mobile-nav-home,
  body.stream-hud-layout .mobile-nav-dashboard,
  body.stream-hud-layout .mobile-nav-theme {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 48px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9aa8b3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .mobile-nav-item.active,
  .mobile-nav-home.active,
  body.dx-dashboard-terminal .mobile-nav-item.active,
  body.dx-dashboard-terminal .mobile-nav-home,
  body.stream-hud-layout .mobile-nav-item.active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #1fddfe !important;
  }
  .mobile-nav-item.active .mobile-nav-icon,
  .mobile-nav-home.active .mobile-nav-icon,
  body.dx-dashboard-terminal .mobile-nav-item.active .mobile-nav-icon,
  body.stream-hud-layout .mobile-nav-item.active .mobile-nav-icon {
    background: rgba(31, 221, 254, 0.20) !important;
    box-shadow:
      inset 0 0 0 1px rgba(31, 221, 254, 0.28),
      0 0 14px rgba(31, 221, 254, 0.16);
  }

  .mobile-nav-home,
  body.dx-dashboard-terminal .mobile-nav-home {
    overflow: visible !important;
  }

  .mobile-nav-icon,
  body.dx-dashboard-terminal .mobile-nav-icon,
  body.dx-dashboard-terminal .mobile-nav-home .mobile-nav-icon {
    font-size: 22px !important;
    width: 56px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
  }

  .mobile-nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    text-align: center;
  }

  body.dx-dashboard-terminal,
  body.stream-hud-layout {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 360px) {
  .mobile-nav-label {
    font-size: 9px;
  }
  .mobile-nav-icon,
  body.dx-dashboard-terminal .mobile-nav-icon,
  body.dx-dashboard-terminal .mobile-nav-home .mobile-nav-icon {
    font-size: 20px !important;
  }
}

html.light .mobile-nav-item,
html.light body.dx-dashboard-terminal .mobile-nav-item {
  color: #5b6b75 !important;
  background: transparent !important;
}
html.light .mobile-nav-item.active,
html.light body.dx-dashboard-terminal .mobile-nav-item.active,
html.light body.dx-dashboard-terminal .mobile-nav-home {
  color: #0284c7 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.light .mobile-nav-item.active .mobile-nav-icon,
html.light body.dx-dashboard-terminal .mobile-nav-item.active .mobile-nav-icon {
  background: rgba(2, 132, 199, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.22);
}

/* ===== Account chip: one header control, VAL nested inside ===== */
.top-header-right #walletPillBtn.wallet-pill,
#walletPillBtn.wallet-pill,
.landing-header-wallet #walletPillBtn.wallet-pill {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px 0 8px !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  color: #e8f4f8 !important;
  transform: none !important;
  overflow: hidden !important;
}
.top-header-right #walletPillBtn.wallet-pill:hover,
#walletPillBtn.wallet-pill:hover {
  transform: none !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
#walletPillBtn.wallet-pill:not(.connected) {
  padding: 0 14px !important;
  color: #1fddfe !important;
  background: rgba(31, 221, 254, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(31, 221, 254, 0.55),
    0 0 16px rgba(31, 221, 254, 0.20) !important;
}
#walletPillBtn.wallet-pill:not(.connected):hover {
  background: rgba(31, 221, 254, 0.16) !important;
  box-shadow:
    0 0 0 1px rgba(31, 221, 254, 0.75),
    0 0 20px rgba(31, 221, 254, 0.28) !important;
}
#walletPillBtn.wallet-pill.connected {
  background: rgba(244, 183, 62, 0.08) !important;
  box-shadow:
    0 0 0 1px rgba(244, 183, 62, 0.42),
    0 0 14px rgba(244, 183, 62, 0.16) !important;
  color: #e8f4f8 !important;
}
#walletPillBtn.wallet-pill.connected:hover {
  background: rgba(244, 183, 62, 0.12) !important;
  box-shadow:
    0 0 0 1px rgba(244, 183, 62, 0.58),
    0 0 18px rgba(244, 183, 62, 0.22) !important;
}
#walletPillBtn.wallet-pill::before {
  display: none !important;
}
#walletPillBtn #walletPillAddress,
#walletPillBtn .wallet-pill-address {
  display: none !important;
}
#walletPillBtn #tokenBalancePill,
#walletPillBtn .token-balance-pill {
  display: none !important;
  align-items: center !important;
  gap: 5px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  overflow: visible !important;
  color: #f4b73e !important;
}
#walletPillBtn.connected #tokenBalancePill:not(.hidden),
#walletPillBtn.connected #tokenBalancePill[style*="display: flex"],
#walletPillBtn.connected #tokenBalancePill[style*="display: inline-flex"] {
  display: inline-flex !important;
}
#walletPillBtn #tokenBalancePill::before {
  display: none !important;
}
#walletPillBtn .token-balance-logo {
  width: 14px !important;
  height: 14px !important;
}
#walletPillBtn .token-balance-value {
  font-family: Inter, Roboto, Segoe UI, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f4b73e !important;
  max-width: 8ch !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
#walletPillBtn .account-chip-caret,
#walletPillBtn #walletPillArrow {
  font-size: 18px !important;
  color: #9aa8b3 !important;
  line-height: 1 !important;
}
#walletPillBtn .wallet-pill-text {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html.light #walletPillBtn.wallet-pill {
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
  color: #1a2a33 !important;
}
html.light #walletPillBtn.wallet-pill:not(.connected) {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.45) !important;
}
html.light #walletPillBtn.wallet-pill.connected {
  background: rgba(244, 183, 62, 0.10) !important;
  box-shadow: 0 0 0 1px rgba(196, 138, 18, 0.40) !important;
}

.wallet-dropdown-val .wallet-dropdown-val-exact,
#walletDropdownValExact {
  color: #f4b73e;
  font-weight: 600;
  word-break: break-all;
}

#mobileTokenBalancePill {
  display: none !important;
}

#linkWhopBtn {
  background: transparent !important;
  color: #1fddfe !important;
  border: 1px solid #1fddfe !important;
  border-radius: 999px !important;
  justify-content: center !important;
  margin: 6px 16px 10px !important;
  padding: 6px 14px !important;
  box-shadow: none !important;
}
#linkWhopBtn:hover:not(:disabled) {
  background: rgba(31, 221, 254, 0.08) !important;
  transform: none !important;
  box-shadow: none !important;
}