/* Android reference: values/{colors,dimens,type}.xml, HomeViews.kt and
   MainInteractionsController.kt. Loaded last to contain legacy overrides. */
:root {
  --app-current-green: #198f36;
  --app-current-red: #d7263d;
  --green: #198f36;
  --danger: #d7263d;
  --red: #d7263d;
}
html[data-theme="dark"] {
  --app-current-green: #33ff3d;
  --app-current-red: #ff3333;
  --green: #33ff3d;
  --danger: #ff3333;
  --red: #ff3333;
}
.app-shell .positive, .side-sheet .positive { color: var(--app-current-green) !important; }
.app-shell .negative, .side-sheet .negative { color: var(--app-current-red) !important; }
.app-shell[data-view="home"] .home-native-board {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.app-shell[data-view="home"] .home-native-balance { padding: 0 0 8px !important; }
.app-shell[data-view="home"] .home-native-wallet-select {
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
.app-shell[data-view="home"] .home-native-balance-label { margin-top: 10px !important; font-size: 13px !important; }
.app-shell[data-view="home"] .home-native-balance-value {
  margin-top: 4px !important;
  font-size: 32px !important;
  line-height: 1.25 !important;
}
.app-shell[data-view="home"] .home-native-balance-delta { margin-top: 4px !important; font-size: 12px !important; }
.app-shell[data-view="home"] .home-native-cash-actions {
  width: 100% !important;
  margin-top: 16px !important;
  height: 68px !important;
}
.app-shell[data-view="home"] .home-native-action { font-size: 13px !important; }
.app-shell[data-view="home"] .home-native-action-surface {
  width: 54px !important;
  height: 44px !important;
  min-height: 44px !important;
}
.app-shell[data-view="home"] .home-native-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 6px !important;
}
.app-shell[data-view="home"] .home-native-metric {
  height: 96px !important;
  min-height: 96px !important;
  padding: 8px !important;
  justify-content: flex-start !important;
}
.app-shell[data-view="home"] .home-native-metric strong { font-size: 18px !important; line-height: 28px !important; }
.app-shell[data-view="home"] .home-native-metric.positive strong { color: var(--app-current-green) !important; }
.app-shell[data-view="home"] .home-native-metric.negative strong { color: var(--app-current-red) !important; }
.app-shell[data-view="home"] .home-native-metric.neutral strong { color: var(--muted) !important; }
.app-shell[data-view="home"] .home-native-metric .stats-help-button {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
}
.app-shell[data-view="home"] .home-native-menu {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  height: auto !important;
  margin-top: 10px !important;
  overflow: visible !important;
}
.app-shell[data-view="home"] .home-native-menu-scroll { display: contents !important; }
.app-shell[data-view="home"] .home-native-menu-action {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 68px !important;
  padding: 0 !important;
  font-size: 11px !important;
  color: var(--app-current-icon) !important;
}
.app-shell[data-view="home"] .home-native-more { grid-column: 4 !important; }
.app-shell[data-view="home"] .home-native-menu.is-expanded .is-extra { animation: native-page-enter 180ms ease both; }
.app-shell[data-view="home"] .home-native-chart { margin-top: 4px !important; }
.app-shell[data-view="home"] .home-native-chart :is(.profit-chart-canvas, .profit-chart-viewport, .profit-chart-svg) {
  height: 214px !important;
  min-height: 214px !important;
}
.app-shell[data-view="home"] .home-native-chart .chart-filters {
  height: 40px !important;
  min-height: 40px !important;
  padding: 2px !important;
}
.app-shell[data-view="home"] .chart-filters::before {
  left: 2px;
  top: 2px;
  width: calc((100% - 4px) / 6);
  height: calc(100% - 4px);
}
.risk-limits-button { width: 100%; margin-bottom: 12px; }
.account-avatar-render {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}
.account-avatar-render.has-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.account-avatar > .account-avatar-render,
.sidebar-account-avatar > .account-avatar-render { width: 100%; height: 100%; }
.settings-account-avatar.account-avatar-render,
.settings-profile-avatar.account-avatar-render,
.avatar-picker-preview.account-avatar-render { flex: 0 0 auto; }
.settings-profile-avatar-button {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.settings-profile-avatar-button .settings-profile-avatar { display: grid; }
.settings-profile-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--app-current-bg, #121414);
  border-radius: 50%;
  background: var(--app-current-green);
}
.settings-profile-avatar-edit .app-icon-svg { width: 16px; height: 16px; }
.avatar-picker-page,
.avatar-cropper { display: grid; justify-items: center; gap: 16px; text-align: center; }
.avatar-picker-page p,
.avatar-cropper p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.avatar-picker-preview { width: 128px; height: 128px; font-size: 34px; }
.avatar-cropper-preview {
  width: min(100%, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #111416;
  box-shadow: 0 0 0 1px var(--line);
}
.avatar-cropper label { width: min(100%, 360px); display: grid; gap: 7px; text-align: left; font-size: 13px; color: var(--muted); }
.avatar-cropper input[type="range"] { accent-color: var(--app-current-green); }
.avatar-cropper .primary-button,
.avatar-picker-page .primary-button,
.avatar-picker-page .secondary-button { width: min(100%, 360px); }
.avatar-rotate-button { width: min(100%, 180px); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.avatar-rotate-button .app-icon-svg { width: 18px; height: 18px; }
.avatar-remove-button { color: var(--app-current-red) !important; }
/* The Android bank editor groups starting balance and stake in one row. */
#wallet-modal .wallet-form-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 22px 0;
}
#wallet-modal .wallet-form-pair label { min-width: 0; }
#wallet-modal .wallet-form-pair input { width: 100%; min-width: 0; }
#wallet-modal #wallet-currency {
  width: 100%;
  appearance: none;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 20px 20px !important;
  padding-right: 44px;
}
/* A retained animation transform makes fixed form actions follow the form. */
.app-shell[data-view="add"] :is(.view, .add-layout) {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
@media (max-width: 900px) {
  html, body { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
  .app-shell > .main {
    width: 100% !important;
    padding: 54px 0 calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .app-shell .view { width: 100% !important; padding: 16px !important; box-sizing: border-box; }
  .app-shell[data-view="home"] #page-title { font-size: 18px !important; }
  .app-shell:not([data-view="home"]) #page-title { font-size: 16px !important; }
  .app-shell > .sidebar,
  .app-shell > .sidebar:hover,
  .app-shell > .sidebar:focus-within {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid var(--line) !important;
  }
  #wallet-modal .wallet-form-pair { margin-inline: 16px; }
}
/* Desktop changes the available width and dock axis, retaining app order. */
@media (min-width: 901px) {
  .app-shell > .main,
  .app-shell > .sidebar:hover ~ .main,
  .app-shell > .sidebar:focus-within ~ .main {
    width: calc(100% - 88px) !important;
    margin-left: 88px !important;
    padding-bottom: 24px !important;
  }
  .app-shell .topbar, .app-shell .view {
    width: min(984px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
  }
  .app-shell[data-view="home"] .home-native-board {
    width: min(100%, 760px) !important;
    margin-inline: auto !important;
  }
  .app-shell > .sidebar,
  .app-shell > .sidebar:hover,
  .app-shell > .sidebar:focus-within {
    inset: 50% auto auto 12px !important;
    width: 64px !important;
    height: 320px !important;
    min-height: 320px !important;
    padding: 4px !important;
    border: 1px solid var(--line) !important;
    border-radius: 32px !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
  }
  .app-shell > .sidebar .nav {
    width: 54px !important;
    height: 310px !important;
    grid-template-columns: 54px !important;
    grid-template-rows: repeat(5, 54px) !important;
    align-content: space-between !important;
    gap: 0 !important;
  }
  .app-shell > .sidebar .nav-item,
  .app-shell > .sidebar .nav-item:hover,
  .app-shell > .sidebar .nav-item:focus-visible {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
  }
  .app-shell > .sidebar .button-icon,
  .app-shell > .sidebar .app-icon-svg { width: 28px !important; height: 28px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .home-native-menu .is-extra { animation: none !important; }
}