/*
 * Shared mobile bottom navigation.
 * Every page with a bottom tab bar must include `app-bottom-nav` on <nav>.
 */
.app-bottom-nav,
.market-bottom-nav.app-bottom-nav,
.hot-bottom-nav.app-bottom-nav,
.quotes-bottom-nav.app-bottom-nav,
.fund-bottom-nav.app-bottom-nav,
.profile-bottom-nav.app-bottom-nav,
.bottom-nav.app-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: 100%;
  max-width: none;
  height: 64px;
  padding: 6px 18px calc(6px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-content: initial;
  transform: none;
  background: #101722;
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 -10px 28px rgba(0,0,0,.22);
  overflow: visible;
}

.app-bottom-nav a,
.market-bottom-nav.app-bottom-nav a,
.hot-bottom-nav.app-bottom-nav a,
.quotes-bottom-nav.app-bottom-nav a,
.fund-bottom-nav.app-bottom-nav a,
.profile-bottom-nav.app-bottom-nav a,
.bottom-nav.app-bottom-nav a {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  flex: initial;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  overflow: visible;
}

.app-bottom-nav img,
.market-bottom-nav.app-bottom-nav img,
.hot-bottom-nav.app-bottom-nav img,
.quotes-bottom-nav.app-bottom-nav img,
.fund-bottom-nav.app-bottom-nav img,
.profile-bottom-nav.app-bottom-nav img,
.bottom-nav.app-bottom-nav img {
  position: static;
  width: 22px;
  height: 22px;
  margin: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.app-bottom-nav a.active,
.market-bottom-nav.app-bottom-nav a.active,
.hot-bottom-nav.app-bottom-nav a.active,
.quotes-bottom-nav.app-bottom-nav a.active,
.fund-bottom-nav.app-bottom-nav a.active,
.profile-bottom-nav.app-bottom-nav a.active,
.bottom-nav.app-bottom-nav a.active {
  color: #d5ff00;
}

.app-bottom-nav a.active img,
.market-bottom-nav.app-bottom-nav a.active img,
.hot-bottom-nav.app-bottom-nav a.active img,
.quotes-bottom-nav.app-bottom-nav a.active img,
.fund-bottom-nav.app-bottom-nav a.active img,
.profile-bottom-nav.app-bottom-nav a.active img,
.bottom-nav.app-bottom-nav a.active img {
  filter: brightness(0) saturate(100%) invert(91%) sepia(94%) saturate(1669%) hue-rotate(21deg) brightness(107%) contrast(105%);
}

.app-bottom-nav .trade-center,
.app-bottom-nav .trade-entry,
.market-bottom-nav.app-bottom-nav .trade-center,
.hot-bottom-nav.app-bottom-nav .trade-center,
.quotes-bottom-nav.app-bottom-nav .trade-center,
.fund-bottom-nav.app-bottom-nav .trade-center,
.profile-bottom-nav.app-bottom-nav .trade-center,
.bottom-nav.app-bottom-nav .trade-entry {
  align-self: start;
  margin-top: -22px;
  z-index: 2;
}

.app-bottom-nav .trade-center img,
.app-bottom-nav .trade-entry img,
.market-bottom-nav.app-bottom-nav .trade-center img,
.hot-bottom-nav.app-bottom-nav .trade-center img,
.quotes-bottom-nav.app-bottom-nav .trade-center img,
.fund-bottom-nav.app-bottom-nav .trade-center img,
.profile-bottom-nav.app-bottom-nav .trade-center img,
.bottom-nav.app-bottom-nav .trade-entry img {
  width: 48px;
  height: 48px;
  display: block;
  opacity: 1;
  visibility: visible;
  filter: none !important;
}

.app-bottom-nav .trade-center.active img,
.market-bottom-nav.app-bottom-nav .trade-center.active img,
.hot-bottom-nav.app-bottom-nav .trade-center.active img,
.quotes-bottom-nav.app-bottom-nav .trade-center.active img,
.fund-bottom-nav.app-bottom-nav .trade-center.active img,
.profile-bottom-nav.app-bottom-nav .trade-center.active img {
  filter: none !important;
}

/* Quotes page active state: a restrained dark pedestal behind the original icon. */
.quotes-bottom-nav.app-bottom-nav .trade-center.active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, #263349, #141c2a);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .34), inset 0 1px 1px rgba(255, 255, 255, .05);
  pointer-events: none;
}

.quotes-bottom-nav.app-bottom-nav .trade-center.active img {
  position: relative;
  z-index: 1;
  filter: none !important;
}

.app-bottom-nav .trade-center span,
.app-bottom-nav .trade-entry span,
.bottom-nav.app-bottom-nav .trade-entry span {
  min-height: 16px;
}

body:not(.verification-body) {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

@media (min-width: 620px) {
  .app-bottom-nav,
  .market-bottom-nav.app-bottom-nav,
  .hot-bottom-nav.app-bottom-nav,
  .quotes-bottom-nav.app-bottom-nav,
  .fund-bottom-nav.app-bottom-nav,
  .profile-bottom-nav.app-bottom-nav,
  .bottom-nav.app-bottom-nav {
    left: 50%;
    right: auto;
    width: 620px;
    transform: translateX(-50%);
  }
}