/* Bottom navigation: seamless Polymarket-like mobile tab bar. */
.mobile-bottom-nav {
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(calc(100vw - 28px), 492px) !important;
  min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  border: 1px solid #e5e7eb !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background: #fff !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08) !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

.mobile-bottom-nav button {
  min-height: 46px !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}

.mobile-bottom-nav button.active {
  background: transparent !important;
  color: #111827 !important;
}

.mobile-bottom-nav small {
  color: currentColor !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
}

.mobile-bottom-nav span[class^="icon-"] {
  position: relative !important;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: currentColor !important;
  opacity: 1 !important;
  transform: none !important;
}

.mobile-bottom-nav span[class^="icon-"]::before,
.mobile-bottom-nav span[class^="icon-"]::after {
  content: "" !important;
  position: absolute !important;
  box-sizing: border-box !important;
  background: none !important;
  border-color: currentColor !important;
}

.mobile-bottom-nav .icon-grid::before {
  left: 5px !important;
  top: 4px !important;
  width: 12px !important;
  height: 12px !important;
  border-left: 1.8px solid currentColor !important;
  border-top: 1.8px solid currentColor !important;
  border-radius: 2px 0 0 0 !important;
  transform: rotate(45deg) !important;
}

.mobile-bottom-nav .icon-grid::after {
  left: 6px !important;
  top: 10px !important;
  width: 10px !important;
  height: 8px !important;
  border: 1.8px solid currentColor !important;
  border-top: 0 !important;
  border-radius: 0 0 3px 3px !important;
}

.mobile-bottom-nav .icon-message::before {
  left: 3px !important;
  top: 3px !important;
  width: 13px !important;
  height: 13px !important;
  border: 1.8px solid currentColor !important;
  border-radius: 50% !important;
}

.mobile-bottom-nav .icon-message::after {
  left: 14px !important;
  top: 14px !important;
  width: 6px !important;
  height: 1.8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(45deg) !important;
}

.mobile-bottom-nav .icon-wallet::before {
  left: 3px !important;
  top: 9px !important;
  width: 16px !important;
  height: 9px !important;
  border-top: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  border-radius: 999px !important;
}

.mobile-bottom-nav .icon-wallet::after {
  left: 5px !important;
  top: 4px !important;
  width: 12px !important;
  height: 8px !important;
  border-top: 1.8px solid currentColor !important;
  border-radius: 50% 50% 0 0 !important;
}

.mobile-bottom-nav .icon-user::before {
  left: 7px !important;
  top: 3px !important;
  width: 8px !important;
  height: 8px !important;
  border: 1.8px solid currentColor !important;
  border-radius: 50% !important;
}

.mobile-bottom-nav .icon-user::after {
  left: 4px !important;
  top: 13px !important;
  width: 14px !important;
  height: 7px !important;
  border: 1.8px solid currentColor !important;
  border-bottom: 0 !important;
  border-radius: 9px 9px 0 0 !important;
}