/* Ult application dark theme — shared by every customer-facing screen. */
:root {
  color-scheme: dark;
  --ult-bg: #121212;
  --ult-surface: #1b1b1e;
  --ult-surface-2: #232327;
  --ult-surface-3: #2b2b30;
  --ult-border: #34343a;
  --ult-text: #f6f7f9;
  --ult-muted: #9a9faa;
  --ult-accent: #49dcf7;
  --ult-accent-ink: #071416;
  --ult-green: #25c981;
  --ult-red: #ff627d;

  --bg: var(--ult-bg) !important;
  --card: var(--ult-surface) !important;
  --soft: var(--ult-surface-2) !important;
  --ink: var(--ult-text) !important;
  --text-main: var(--ult-text) !important;
  --text-muted: var(--ult-muted) !important;
  --section-label: #7f8591 !important;
  --muted: var(--ult-muted) !important;
  --line: var(--ult-border) !important;
  --border: var(--ult-border) !important;
  --brand: var(--ult-accent) !important;
  --primary: var(--ult-accent) !important;
  --primary-hover: #72e6fa !important;
  --blue: var(--ult-accent) !important;
  --accent: var(--ult-accent) !important;
  --green: var(--ult-green) !important;
  --red: var(--ult-red) !important;
  --danger: var(--ult-red) !important;
  --chip: var(--ult-surface-2) !important;
  --chip-active-bg: rgba(73,220,247,.14) !important;
  --chip-active-border: var(--ult-accent) !important;
  --chip-active-text: var(--ult-accent) !important;
  --badge-bg: var(--ult-surface-2) !important;
  --badge-text: #c3c7cf !important;
  --skelA: #202024 !important;
  --skelB: #2b2b31 !important;
  --loaderA: #202024 !important;
  --loaderB: #2b2b31 !important;

  --perp-bg: var(--ult-bg) !important;
  --perp-card: var(--ult-surface) !important;
  --perp-gray: #c8cbd2 !important;
  --perp-muted: var(--ult-muted) !important;
  --perp-line: var(--ult-border) !important;
  --perp-blue: var(--ult-accent) !important;
}

html,
body {
  background: var(--ult-bg) !important;
  color: var(--ult-text) !important;
}

body,
button,
input,
select,
textarea {
  color: var(--ult-text);
}

body::before,
.app-bg {
  background-color: var(--ult-bg) !important;
}

/* Main page and full-page containers. */
.app,
.page,
.screen,
.view,
.main,
.content,
.page-wrap,
.page-shell,
.settings-screen,
.settings-panel,
.settings-main,
.auth-shell,
.earn-page,
.send-page,
.receive-page,
.swap-page,
.token-page,
.premium-page,
.perp-root,
.perp-page,
.perp-page-inner,
#pageWallet,
#pageWallet .wallet-tabs-pages,
#pageWallet .wallet-tab-page,
#pageHome,
#pageMarkets,
#pagePerp,
#pageSwap,
.ult-markets-page {
  background-color: var(--ult-bg) !important;
  color: var(--ult-text) !important;
}

/* Headers, bottom bars and fixed chrome. */
.topbar,
.header,
.page-header,
.screen-header,
.settings-header,
.asset-header,
.receive-header,
.send-header,
.swap-header,
.earn-header,
.sheet-header,
.sheet__header,
.modal-header,
.footer,
.page-footer,
.screen-footer,
.sheet-footer,
.sheet__composer,
.tabbar,
.bottom-bar,
.bottom-nav,
.nav-bar {
  background-color: rgba(18,18,18,.96) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

.topbar {
  background-image: none !important;
  background-color: var(--ult-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Reusable cards, rows, sheets and menus. */
.sheet,
.sheet__body,
.modal,
.modal-content,
.dialog,
.drawer,
.panel,
.settings-card,
.settings-loader-card,
.wallet-list-sheet,
.wallet-actions-sheet,
.swap-menu-sheet,
.method-card,
.fiat-card,
.summary-card,
.details-card,
.swap-card,
.asset-card,
.token-card,
.earn-card,
.staking-card,
.premium-card-panel,
.info-card,
.form-card,
.network-card,
.support-card,
.chat-card,
.empty-card,
.result-card,
.success-card,
.warning-card,
.confirm-card,
.receive-card,
.send-card,
.perp-modal,
.perp-card,
.perp-order-card,
.perp-position-card {
  background: var(--ult-surface) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
  box-shadow: none !important;
}

.row,
.coin-row,
.token-row,
.asset-row,
.wallet-row,
.network-row,
.settings-row,
.details-row,
.tx-row,
.sum-row,
.s5-row,
.fiat-row,
.method-row,
.confirm-row,
.approval-row,
.notification-row,
.community-row,
.task-row,
.referral-row,
.activity-row,
.bank-row,
.dapp-row,
.rpc-row,
.list-item,
.menu-item,
.swap-menu-item,
.wallet-add-row,
.wallet-net-item {
  background-color: var(--ult-surface) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

.row:active,
.coin-row:active,
.token-row:active,
.wallet-row:active,
.settings-row:active,
.list-item:active,
.menu-item:active,
.wallet-add-row:active,
.swap-menu-item:active {
  background-color: var(--ult-surface-3) !important;
}

.list,
.tabs,
.wallet-total,
.wallet-quick,
.wallet-tabs,
.wallet-manage-wrap,
.wallet-tabs-pages,
.wallet-tab-page,
.home-total,
.cards-scroller,
.skeleton-list,
.explore-tail,
.settings-loader,
.sheet-body,
.modal-body,
.modal-footer,
.search-results,
.token-list,
.coin-list,
.network-list,
.activity-list {
  background-color: var(--ult-bg) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

/* Typography and icon colors. */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.page-title,
.header-title,
.sheet-title,
.sheet__title,
.settings-title,
.settings-cell-title,
.coin-title,
.token-title,
.asset-title,
.wallet-row-title,
.amount,
.price,
.value,
.total,
.balance,
.big,
label,
strong {
  color: var(--ult-text) !important;
}

.muted,
.subtitle,
.sub,
.caption,
.hint,
.note,
.description,
.section-label,
.settings-section-label,
.settings-cell-sub,
.settings-cell-value,
.wallet-row-sub,
.coin-sub,
.token-sub,
.asset-sub,
.qty,
.kicker,
.explore-balance-label,
.explore-period,
.explore-tail-labels,
.legal {
  color: var(--ult-muted) !important;
}

a,
.link,
.text-link,
.action-link,
.card-action.secondary,
.wallet-manage,
.change-btn,
.copy-btn {
  color: var(--ult-accent) !important;
}

svg:not([data-preserve-color]) {
  color: inherit;
}

/* Inputs and search controls. */
input,
textarea,
select,
.input,
.field,
.search,
.search-box,
.search-input,
.address-input-wrap,
.amount-input-wrap,
.composer,
.wallet-actions-input,
.d-field-input,
.explore-search-preview {
  background-color: var(--ult-surface-2) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #737984 !important;
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.input:focus-within,
.field:focus-within,
.address-input-wrap:focus-within {
  border-color: var(--ult-accent) !important;
  outline-color: var(--ult-accent) !important;
}

/* Accent buttons and selected controls. */
.btn,
.btn-primary,
.primary-btn,
.button-primary,
.cta,
.action-primary,
.share-btn,
.send-btn,
.send-btn-square,
.card-action:not(.secondary),
.wallet-action-btn.primary,
.ult-topup,
button.primary,
button[type="submit"] {
  background: var(--ult-accent) !important;
  color: var(--ult-accent-ink) !important;
  border-color: var(--ult-accent) !important;
  box-shadow: 0 8px 24px rgba(73,220,247,.16) !important;
}

.btn:disabled,
.btn-primary:disabled,
.primary-btn:disabled,
.button-primary:disabled,
button[type="submit"]:disabled {
  background: #315158 !important;
  color: #85979a !important;
  border-color: #315158 !important;
  box-shadow: none !important;
}

.btn-secondary,
.secondary-btn,
.button-secondary,
.chip,
.badge,
.pill,
.token-btn,
.network-btn,
.q-btn,
.method-btn,
.keypad-btn,
.ico-btn,
.icon-btn,
.btn-icon,
.sheet__close,
.sheet-close-x,
.modal-close,
.cancel-button,
.wallet-action-btn.cancel {
  background-color: var(--ult-surface-2) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

.active,
.selected,
.chip.active,
.tab.active,
.wallet-tab.active,
.filter.active,
[aria-selected="true"] {
  color: var(--ult-accent) !important;
  border-color: var(--ult-accent) !important;
}

.chip.active,
.tab.active,
.filter.active,
[aria-selected="true"] {
  background-color: rgba(73,220,247,.13) !important;
}

.danger,
.danger-btn,
.wallet-action-btn.danger,
button.danger {
  background-color: rgba(255,98,125,.13) !important;
  color: var(--ult-red) !important;
  border-color: rgba(255,98,125,.35) !important;
  box-shadow: none !important;
}

.chg.up,
.delta.pos,
.positive,
.profit,
.perp-change.pos {
  color: var(--ult-green) !important;
}

.chg.down,
.delta.neg,
.negative,
.loss,
.error,
.perp-change.neg {
  color: var(--ult-red) !important;
}

/* Main Explore screen. */
.ult-brand,
.ult-brand-logo,
.ult-wallet-name {
  background-color: transparent !important;
}

.ult-brand-logo img {
  filter: brightness(0) invert(1) !important;
}

.splash__logo {
  filter: none !important;
}

.top-right--wallet img {
  filter: grayscale(1) brightness(1.9) !important;
  opacity: .72 !important;
}

#pageWallet .wallet-total,
#pageWallet .wallet-tab-page,
#pageWallet .list,
.explore-tail,
.ult-markets-page {
  background: var(--ult-bg) !important;
}

#pageWallet .wallet-total .amount,
#pageWallet .wallet-total .amount .cents,
#pageWallet .grow .title,
#pageWallet .price,
.explore-section-title,
.ult-markets-placeholder h1 {
  color: var(--ult-text) !important;
}

#pageWallet .row {
  background: var(--ult-surface) !important;
  border-color: var(--ult-border) !important;
}

#pageWallet .logo {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#pageWallet .logo img {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.wallet-list-skeleton-row,
.skeleton-row,
.skeleton,
.skel-line,
.skel-pill,
.settings-loader-back,
.settings-loader-title {
  background: linear-gradient(90deg,#202024 20%,#2b2b31 50%,#202024 80%) !important;
  background-size: 220% 100% !important;
}

/* Wallet picker: remove the legacy white body gradient and keep rows distinct. */
#walletListSheet,
#walletListSheet .wallet-list-body {
  background: var(--ult-bg) !important;
}

#walletListSheet .wallet-add-row {
  background: var(--ult-surface-2) !important;
  border: 1px solid var(--ult-border) !important;
}

#walletListSheet .wallet-add-row:active {
  background: var(--ult-surface-3) !important;
}

.explore-search-preview {
  background: rgba(35,35,39,.86) !important;
  color: var(--ult-muted) !important;
  border-color: var(--ult-border) !important;
}

.tabbar {
  background: linear-gradient(145deg,rgba(37,37,41,.94),rgba(20,20,22,.9)) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 14px 38px rgba(0,0,0,.45) !important;
}

.tabbar .tbi,
.tabbar .swap-nav-icon {
  color: #9297a1 !important;
}

.tabbar .tbi.active {
  color: var(--ult-accent) !important;
  background: rgba(73,220,247,.14) !important;
}

.tabbar .tbi-icon--explore {
  filter: grayscale(1) saturate(0) brightness(.9) !important;
  opacity: .82;
}

.tabbar .tbi.active .tbi-icon--explore {
  filter: none !important;
  opacity: 1;
}

/* Overlays and loading states. */
.sheet-backdrop,
.modal-backdrop,
.perp-modal-backdrop,
.method-sheet-ov {
  background-color: rgba(0,0,0,.72) !important;
}

.splash {
  background: #57ddff !important;
}

.loader,
.frame-loader,
.earn-frame-loader,
.loading-overlay {
  background-color: var(--ult-bg) !important;
  color: var(--ult-muted) !important;
}

.spinner {
  border-color: rgba(255,255,255,.16) !important;
  border-top-color: var(--ult-accent) !important;
}

/* Settings screens. */
.settings-screen,
.settings-panel,
.settings-main,
.settings-header,
.settings-loader {
  background: var(--ult-bg) !important;
}

.settings-card {
  background: var(--ult-surface) !important;
  box-shadow: 0 0 0 1px var(--ult-border) !important;
}

.settings-row + .settings-row {
  border-color: var(--ult-border) !important;
}

.settings-back-icon svg {
  stroke: var(--ult-text) !important;
}

.settings-back-icon img,
.back img,
.back-btn img {
  filter: grayscale(1) brightness(2) !important;
}

/* Settings bottom sheets: language, currency and backup. */
.lang-sheet,
.lang-sheet-card {
  color: var(--ult-text) !important;
}

.lang-sheet-card,
.lang-option,
.lang-cancel {
  background: var(--ult-surface) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

.lang-option + .lang-option {
  border-color: var(--ult-border) !important;
}

.lang-option.active,
.lang-option[aria-selected="true"] {
  background: rgba(73,220,247,.13) !important;
  color: var(--ult-accent) !important;
}

.lang-cancel {
  box-shadow: 0 0 0 1px var(--ult-border) !important;
}

/* Preserve a light quiet zone around scannable QR codes. */
.qr-wrap,
.qr-canvas,
#qrCanvas,
.qr-code,
.qr-code-box {
  background: #fff !important;
  color: #111 !important;
}

/* Authorization page. */
.auth-shell {
  --bg: var(--ult-bg);
  background: var(--ult-bg) !important;
}

.web3-button {
  border-color: var(--ult-accent) !important;
  color: var(--ult-accent) !important;
}

.register-sheet {
  background: var(--ult-surface) !important;
  border-color: var(--ult-border) !important;
}

/* Earn pages. */
.top,
.wrap,
.entry-view,
.confirm-view,
.receipt-view,
.keypad-wrap,
.amount-main,
.balance-head,
.balance-line,
.promo-wrap,
.rec-grid,
.empty {
  background-color: var(--ult-bg) !important;
  color: var(--ult-text) !important;
}

.rec,
.pool,
.asset-row,
.earn-row,
.confirm-card,
.confirm-row,
.receipt-card,
.receipt-row,
.status-pill,
.confirm-chip {
  background-color: var(--ult-surface) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
  box-shadow: none !important;
}

.rec-apy,
.pool-apy,
.reward,
.status-pill.active {
  color: var(--ult-green) !important;
}

.add-btn,
.confirm-add-eth,
.primary.enabled,
.confirm-btn.primary,
.action-btn,
.conf-btn,
.pend-close-btn {
  background: var(--ult-accent) !important;
  color: var(--ult-accent-ink) !important;
  border-color: var(--ult-accent) !important;
}

.keypad-btn,
.clear,
.max,
.back,
.balance-eye {
  color: var(--ult-text) !important;
}

/* Premium cards and banking surfaces. Keep the card artwork, darken its UI. */
.page-root,
.hdr,
.intro,
.cards-list,
.sheet-wrap,
.pend-body,
.bank-screen,
.bank-main,
.bank-header,
.cards-page,
.cards-main {
  background-color: var(--ult-bg) !important;
  color: var(--ult-text) !important;
}

.card-item,
.active-strip,
.conf-head,
.conf-section,
.conf-payment,
.pend-details,
.pend-next,
.card-balance,
.card-actions,
.transfer-info,
.ticker-row,
.amount-wrap,
.sheet-inner,
.hist-list,
.confirm-box,
.hist-tx-row {
  background-color: var(--ult-surface) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

.card-name,
.card-price,
.stat-val,
.conf-row-val,
.pend-val,
.hist-tx-title,
.confirm-box-title {
  color: var(--ult-text) !important;
}

.ticker-tab.active,
.ticker-btn.active,
.ca-btn:not(.danger) {
  color: var(--ult-accent) !important;
  border-color: var(--ult-accent) !important;
  background-color: rgba(73,220,247,.12) !important;
}

/* Support chat. */
.chat-app,
.chat-messages,
#chatMessages,
.chat-header,
.chat-input-area {
  background-color: var(--ult-bg) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

.chat-empty,
.chat-date-separator,
.chat-meta,
.chat-time {
  color: var(--ult-muted) !important;
}

.chat-message-admin .chat-bubble,
.chat-input-wrapper,
.chat-attachment-preview,
.chat-attachment-doc {
  background-color: var(--ult-surface-2) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

.chat-message-user .chat-bubble,
.chat-send-btn {
  background-color: var(--ult-accent) !important;
  color: var(--ult-accent-ink) !important;
}

.chat-input-wrapper textarea {
  background: transparent !important;
}

.chat-app {
  min-height: 100svh;
}

/* Every nested settings page. */
.page-container,
.page-main,
.activity-screen,
.activity-main,
.activity-header,
.approvals-screen,
.approvals-main,
.approvals-header,
.community-screen,
.community-main,
.community-header,
.dapps-screen,
.dapps-main,
.dapps-header,
.help-screen,
.help-main,
.help-header,
.networks-screen,
.networks-main,
.networks-header,
.notifications-screen,
.notifications-main,
.notifications-header,
.referrals-screen,
.referrals-main,
.referrals-header,
.seed-screen,
.seed-main,
.seed-header,
.tasks-screen,
.tasks-main,
.tasks-header,
.tokens-screen,
.tokens-main,
.tokens-header {
  background-color: var(--ult-bg) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

/* Notification page uses the shorter notif-* prefix. */
.notif-screen,
.notif-header,
.notif-main {
  background-color: var(--ult-bg) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
}

.notif-card,
.notif-row,
.social-card,
.social-row,
.seed-grid-wrap,
.seed-item,
.task-item,
.lang-sheet-card,
.confirm-box {
  background-color: var(--ult-surface) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
  box-shadow: none !important;
}

.notif-row + .notif-row,
.social-row + .social-row {
  border-color: var(--ult-border) !important;
}

.notif-title,
.notif-label,
.social-text,
.seed-word,
.task-title {
  color: var(--ult-text) !important;
}

.notif-back-icon svg,
.seed-back-icon svg,
.community-back-icon svg,
.dapps-back-icon svg,
.approvals-back-icon svg {
  stroke: var(--ult-text) !important;
}

.add-type-switch,
.ticker-row,
.amount-wrap,
.form-note {
  background-color: var(--ult-surface-2) !important;
  color: var(--ult-muted) !important;
  border-color: var(--ult-border) !important;
}

.tx-card,
.stats-card,
.help-card,
.networks-card,
.approvals-card,
.community-card,
.dapps-card,
.notifications-card,
.referral-card,
.seed-card,
.tasks-card,
.tokens-card,
.info-banner,
.empty-state,
.add-network-btn,
.network-filter,
.tx-details-sheet {
  background-color: var(--ult-surface) !important;
  color: var(--ult-text) !important;
  border-color: var(--ult-border) !important;
  box-shadow: none !important;
}

.activity-back-icon svg,
.help-back-icon svg,
.networks-back-icon svg,
.back-icon svg {
  stroke: var(--ult-text) !important;
}

/* Settings controls must stay visible on the dark canvas. Keep every
   navigation arrow and close glyph consistently white, including pages that
   still ship an older inline icon colour. */
.settings-back-icon svg,
.notif-back-icon svg,
.seed-back-icon svg,
.community-back-icon svg,
.dapps-back-icon svg,
.approvals-back-icon svg,
.activity-back-icon svg,
.help-back-icon svg,
.networks-back-icon svg,
.back-icon svg,
.hdr-back svg,
.approvals-help-btn svg,
.networks-help-btn svg,
.help-arrow svg path,
.network-arrow svg path,
.social-arrow svg path {
  stroke: #fff !important;
}

.settings-cell-arrow-inner {
  border-color: #fff !important;
}

.sheet__close,
.sheet-close-x,
.modal-close,
#supportCloseBtn,
#supportFileRemove {
  color: #fff !important;
}

.switch input:checked + .slider,
.toggle input:checked + .slider,
.toggle-on,
[role="switch"][aria-checked="true"] {
  background-color: var(--ult-accent) !important;
}

.stats-badge,
.owned-tag,
.tx-status-badge {
  border-color: var(--ult-border) !important;
}

/* Common full-screen QR scanner remains black; only the accent follows Ult. */
.qr-scan,
.qr-scan-panel,
.qr-scan-camera,
.qr-scan-footer,
.qr-scan-header {
  background-color: #000 !important;
  color: #fff !important;
}

.qr-scan-cutout {
  border-color: var(--ult-accent) !important;
}

/* Scrollbars stay subtle but visible on desktop. */
* {
  scrollbar-color: #3b3b42 var(--ult-bg);
}

@media (max-width: 768px) {
  html,
  body,
  .app {
    background: var(--ult-bg) !important;
  }
  html,
  body {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .app {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

/* -------------------------------------------------------------------------
   Universal 35px viewport safety rails.

   These are deliberately shared by the main document and every full-screen
   iframe.  The app is frequently used inside mobile browser/WebView chrome,
   where controls placed at y=0 or directly on the bottom edge can sit under
   the system shade or gesture area.  Keep one minimum inset everywhere;
   devices with a larger native safe area still win via max().
   ------------------------------------------------------------------------- */
:root {
  --ult-viewport-safe-top: max(35px, env(safe-area-inset-top, 0px));
  --ult-viewport-safe-bottom: max(35px, env(safe-area-inset-bottom, 0px));
}

/* Full-page headers. Bottom-sheet headers are intentionally excluded: their
   top edge is not the viewport edge. */
.topbar,
.header,
.settings-header,
.activity-header,
.approvals-header,
.community-header,
.dapps-header,
.help-header,
.networks-header,
.notifications-header,
.notif-header,
.referrals-header,
.seed-header,
.tasks-header,
.tokens-header,
.bank-header,
.hdr,
.chat-header,
.top {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: calc(var(--ult-viewport-safe-top) + 44px) !important;
  padding-top: var(--ult-viewport-safe-top) !important;
}

/* Perps has no standalone topbar; its page wrapper owns the viewport edge. */
.perp-wrap {
  padding-top: var(--ult-viewport-safe-top) !important;
}

/* The liquid-glass dock is shared by Explore, Markets, Perps, Swap and
   Search. It must float a full 35px above the lower viewport edge. */
.tabbar {
  bottom: var(--ult-viewport-safe-bottom) !important;
}

/* Scrollable settings screens need a real trailing quiet zone too. */
.settings-main,
.activity-main,
.approvals-main,
.community-main,
.dapps-main,
.help-main,
.networks-main,
.notifications-main,
.notif-main,
.referrals-main,
.seed-main,
.tasks-main,
.tokens-main,
.bank-main {
  padding-bottom: var(--ult-viewport-safe-bottom) !important;
  scroll-padding-bottom: var(--ult-viewport-safe-bottom) !important;
}

/* Full-screen controls that actually touch the lower viewport edge. */
.chat-input-area,
.page-footer,
.page-footer-import,
.cta {
  padding-bottom: var(--ult-viewport-safe-bottom) !important;
}

.page-footer-import,
.cta .link {
  margin-bottom: 0 !important;
}

.topup-cta {
  bottom: var(--ult-viewport-safe-bottom) !important;
}

/* Translucent liquid-glass navigation. This late override intentionally wins
   over the solid dark theme layer so the page remains visible through glass. */
.tabbar {
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: rgba(16,17,21,.42) !important;
  background-image:
    linear-gradient(112deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.035) 31%,rgba(73,220,247,.075) 55%,rgba(121,95,255,.085) 78%,rgba(12,13,17,.2) 100%) !important;
  border: 1px solid rgba(255,255,255,.23) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.055),
    inset 1px 0 0 rgba(255,255,255,.07),
    0 16px 40px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(27px) saturate(185%) contrast(108%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(27px) saturate(185%) contrast(108%) brightness(1.08) !important;
}

.tabbar::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -95% -30%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 13% 58%,rgba(73,220,247,.34) 0 9%,rgba(73,220,247,.10) 22%,transparent 38%),
    radial-gradient(ellipse at 48% 26%,rgba(255,255,255,.25) 0 7%,transparent 29%),
    radial-gradient(ellipse at 82% 67%,rgba(125,98,255,.30) 0 8%,rgba(125,98,255,.08) 25%,transparent 40%);
  filter: blur(14px);
  mix-blend-mode: screen;
  opacity: .76;
  animation: ult-liquid-glass-flow 10s cubic-bezier(.45,.05,.35,1) infinite alternate;
  will-change: transform;
}

.tabbar::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.19),transparent 30%,transparent 72%,rgba(255,255,255,.035)),
    linear-gradient(104deg,transparent 18%,rgba(255,255,255,.03) 34%,rgba(255,255,255,.24) 47%,rgba(255,255,255,.045) 57%,transparent 72%);
  background-size: 100% 100%,220% 100%;
  background-position: 0 0,-150% 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  animation: ult-liquid-glass-sheen 7.4s cubic-bezier(.42,0,.2,1) infinite;
}

.tabbar .tbi {
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.34);
}

.tabbar .tbi.active {
  color: #58e6ff !important;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.18),transparent 47%),
    linear-gradient(145deg,rgba(73,220,247,.22),rgba(73,220,247,.085)) !important;
  border: 1px solid rgba(118,232,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 -1px 0 rgba(73,220,247,.055),
    0 5px 17px rgba(36,196,228,.10) !important;
}

@keyframes ult-liquid-glass-flow {
  0% { transform: translate3d(-8%,2%,0) rotate(-3deg) scale(1.03); }
  48% { transform: translate3d(3%,-4%,0) rotate(1.5deg) scale(1.11); }
  100% { transform: translate3d(9%,3%,0) rotate(4deg) scale(1.05); }
}

@keyframes ult-liquid-glass-sheen {
  0%,17% { background-position: 0 0,-150% 0; opacity: .52; }
  44% { opacity: .9; }
  62%,100% { background-position: 0 0,150% 0; opacity: .52; }
}

@media (prefers-reduced-motion: reduce) {
  .tabbar::before,.tabbar::after { animation: none !important; }
  .markets-search-preview { animation: none !important; }
}