:root {
  --dating-bottom-nav-height: 64px;
}
body.dating-bottom-nav-enabled {
  padding-bottom: calc(var(--dating-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
}
body.dating-bottom-nav-enabled .app {
  min-height: calc(100vh - 14px - var(--safe-top, 0px) - var(--safe-bot, 0px) - var(--dating-bottom-nav-height));
  min-height: calc(100dvh - 14px - var(--safe-top, 0px) - var(--safe-bot, 0px) - var(--dating-bottom-nav-height));
}
#dating-bottom-nav {
  position: fixed;
  z-index: 9990;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: var(--dating-bottom-nav-height);
  padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: rgba(14, 8, 24, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#dating-bottom-nav[hidden],
body.dating-overlay-open #dating-bottom-nav,
body:has(.modal.open) #dating-bottom-nav,
body:has(#photo-wall.open) #dating-bottom-nav,
body:has(.photo-viewer.open) #dating-bottom-nav {
  display: none !important;
  pointer-events: none !important;
}
#dating-bottom-nav .dating-bottom-nav__item {
  min-width: 0;
  min-height: 50px;
  padding: 4px 1px;
  border-radius: 12px;
  color: #aa9abc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}
#dating-bottom-nav .dating-bottom-nav__item:active {
  transform: scale(0.96);
  background: rgba(168, 85, 247, 0.12);
}
#dating-bottom-nav .dating-bottom-nav__item[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.24), rgba(124, 92, 255, 0.22));
}
#dating-bottom-nav .dating-bottom-nav__icon {
  font-size: 20px;
  line-height: 1;
}
@media (max-width: 350px) {
  #dating-bottom-nav .dating-bottom-nav__item { font-size: 9px; }
}