:root {
  --platform-bottom-nav-height: 67px;
  --web-visual-viewport-bottom-gap: 0px;
}

.platform-bottom-nav,
#webApp .platform-bottom-nav,
#webApp[class] .platform-bottom-nav {
  position: fixed !important;
  z-index: 40 !important;
  left: 50% !important;
  right: auto !important;
  bottom: var(--web-visual-viewport-bottom-gap, 0px) !important;
  width: min(100%, 430px) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  border: 1px solid rgba(222, 174, 72, .34) !important;
  border-top-color: #e7e2d3 !important;
  border-bottom: 0 !important;
  background: #fff !important;
  box-shadow: 0 -8px 18px rgba(82, 65, 34, .1) !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

.platform-bottom-nav .bottom-nav__item,
#webApp .platform-bottom-nav .bottom-nav__item {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 4px !important;
  display: grid !important;
  gap: 6px !important;
  align-content: center !important;
  justify-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #59627a !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color .16s ease, transform .16s ease !important;
}

.platform-bottom-nav .bottom-nav__item--active,
#webApp .platform-bottom-nav .bottom-nav__item--active {
  color: #b46e00 !important;
  background: transparent !important;
}

.platform-bottom-nav .bottom-nav__icon,
#webApp .platform-bottom-nav .bottom-nav__icon {
  --nav-icon-color: #3f3f3f !important;
  position: relative;
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: inherit;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: transform .16s ease !important;
}

.platform-bottom-nav .bottom-nav__icon::before,
#webApp .platform-bottom-nav .bottom-nav__icon::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: var(--nav-icon-color) !important;
  -webkit-mask: var(--nav-icon-mask) center / contain no-repeat;
  mask: var(--nav-icon-mask) center / contain no-repeat;
}

.platform-bottom-nav .bottom-nav__icon--home {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M28 125.5 118.8 35a13 13 0 0 1 18.4 0L228 125.5a13 13 0 0 1-18.4 18.4l-4.6-4.6V212a18 18 0 0 1-18 18h-45v-65a14 14 0 0 0-14-14h-18a14 14 0 0 0-14 14v65H69a18 18 0 0 1-18-18v-72.7l-4.6 4.6A13 13 0 0 1 28 125.5Z'/%3E%3C/svg%3E") !important;
}

.platform-bottom-nav .bottom-nav__icon--cards {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M62 22h104a18 18 0 0 1 18 18v144a18 18 0 0 1-18 18H62a18 18 0 0 1-18-18V40a18 18 0 0 1 18-18Zm52 41c-27 0-45 17-45 42s18 42 45 42c8 0 16-2 22-5v19h22V89h-22v31c-5 4-11 6-18 6-15 0-25-8-25-21s10-21 25-21c9 0 17 3 24 9l14-17c-11-9-25-13-42-13Z'/%3E%3Cpath fill='%23000' d='M94 202h100a18 18 0 0 0 18-18V63h-28v121a18 18 0 0 1-18 18H94Z' opacity='.55'/%3E%3C/svg%3E") !important;
}

.platform-bottom-nav .bottom-nav__icon--wallet {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M89 24c15 16 28 22 39 22s24-6 39-22c15-2 27 7 26 22-5 20-22 40-36 47H99C85 86 68 66 63 46 62 31 74 22 89 24Zm39 78c58 0 87 56 101 115 3 13-7 25-20 25H47c-13 0-23-12-20-25 14-59 43-115 101-115Z'/%3E%3C/svg%3E") !important;
}

.platform-bottom-nav .bottom-nav__icon--wallet::after,
#webApp .platform-bottom-nav .bottom-nav__icon--wallet::after {
  content: "\00A5";
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

@media (max-width: 430px) {
  .platform-bottom-nav,
  #webApp .platform-bottom-nav,
  #webApp[class] .platform-bottom-nav {
    width: var(--web-visual-viewport-width, 100%) !important;
    max-width: 100% !important;
  }
}

.platform-bottom-nav .bottom-nav__icon--support {
  --nav-icon-color: #3f3f3f !important;
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%23000' stroke-width='18' stroke-linecap='round' stroke-linejoin='round' d='M44 146v-28a84 84 0 0 1 168 0v28M55 116h11a14 14 0 0 1 14 14v44a14 14 0 0 1-14 14H55a22 22 0 0 1-22-22v-28a22 22 0 0 1 22-22Zm146 0h-11a14 14 0 0 0-14 14v44a14 14 0 0 0 14 14h11a22 22 0 0 0 22-22v-28a22 22 0 0 0-22-22Zm-25 64c0 30-18 48-49 48h-16'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='22' stroke-linecap='round' d='M102 228h28'/%3E%3C/svg%3E") !important;
}

.platform-bottom-nav .bottom-nav__icon--profile {
  --nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%23000' stroke-width='18' stroke-linecap='round' d='M128 31a48 48 0 1 1 0 96 48 48 0 0 1 0-96Zm-91 196c0-51 40-83 91-83s91 32 91 83'/%3E%3C/svg%3E") !important;
}

.platform-bottom-nav .bottom-nav__item--active .bottom-nav__icon,
#webApp .platform-bottom-nav .bottom-nav__item--active .bottom-nav__icon {
  --nav-icon-color: #b46e00 !important;
  transform: translateY(-1px) scale(1.04) !important;
}

.platform-bottom-nav .bottom-nav__item:active {
  transform: scale(.92) !important;
}

.card-hall {
  padding-bottom: calc(var(--platform-bottom-nav-height, 67px) + env(safe-area-inset-bottom, 0px) + var(--web-visual-viewport-bottom-gap, 0px) + 18px) !important;
}

.card-hall .toast {
  bottom: calc(var(--platform-bottom-nav-height, 67px) + env(safe-area-inset-bottom, 0px) + var(--web-visual-viewport-bottom-gap, 0px) + 18px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .platform-bottom-nav .bottom-nav__item,
  .platform-bottom-nav .bottom-nav__icon {
    transition-duration: .01ms !important;
  }
}