.footer-nav.liquid-tabbar {
  --liquid-count: 4;
  --liquid-x: 0px;
  --liquid-w: 92px;
  --liquid-light-x: 50%;
  --liquid-light-y: 50%;
  --liquid-light-alpha: 0;
  --liquid-lens-y: 0px;
  --liquid-lens-scale-x: 1;
  --liquid-lens-scale-y: 1;
  --liquid-bubble-x: 0px;
  --liquid-bubble-y: 0px;
  --liquid-bubble-w: 138px;
  --liquid-bubble-h: 100px;
  --liquid-bubble-top: -14px;
  --liquid-bubble-scale-x: 0.9;
  --liquid-bubble-scale-y: 0.9;
  --liquid-bubble-strip-x: 0px;
  --liquid-bubble-content-scale-x: 1;
  --liquid-bubble-content-scale-y: 1;
  --liquid-bubble-highlight-shift: 0px;
  --liquid-bubble-sheen-skew: 0deg;
  --liquid-edge-left-alpha: 0.34;
  --liquid-edge-right-alpha: 0.32;
  --liquid-edge-left-shadow-alpha: 0.14;
  --liquid-edge-right-shadow-alpha: 0.13;
  --liquid-edge-left-line-alpha: 0.46;
  --liquid-edge-right-line-alpha: 0.42;
  --liquid-edge-left-width: 3px;
  --liquid-edge-right-width: 3px;
  --liquid-edge-left-glow: 14%;
  --liquid-edge-right-glow: 86%;
  --liquid-blue: var(--accent, #49a6ff);
  --liquid-hover-alpha: 0;
  --liquid-hover-ray: transparent;
  --liquid-glass-border: rgba(185, 219, 255, 0.16);
  --liquid-glass-bg: rgba(13, 22, 32, 0.42);
  --liquid-glass-shadow:
    0 22px 60px rgba(0, 0, 0, 0.34),
    0 8px 22px rgba(6, 15, 25, 0.22);
  --liquid-glass-shine: none;
  --liquid-glass-shine-opacity: 0;
  --liquid-glass-inner-border: transparent;
  --liquid-glass-inner-shadow: none;
  --liquid-glass-active-bg: rgba(13, 22, 32, 0.48);
  --liquid-glass-active-shadow:
    0 24px 64px rgba(0, 0, 0, 0.38),
    0 9px 24px rgba(6, 15, 25, 0.26);
  --liquid-lens-bg: rgba(73, 166, 255, 0.16);
  --liquid-lens-shadow:
    inset 0 0 0 1px rgba(174, 218, 255, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.18);
  --liquid-lens-border: transparent;
  --liquid-lens-inner-shadow: none;
  --liquid-edge-rgb: 122, 188, 255;
  --liquid-bubble-bg: rgba(16, 26, 38, 0.52);
  --liquid-bubble-shadow:
    0 20px 42px rgba(0, 0, 0, 0.34),
    0 8px 18px rgba(4, 13, 22, 0.24);
  --liquid-bubble-highlight-bg: none;
  --liquid-bubble-highlight-opacity: 0;
  --liquid-bubble-border: transparent;
  --liquid-bubble-inner-shadow: none;
  --liquid-bubble-backdrop: blur(30px) saturate(150%) contrast(1.04) brightness(0.96);
  --liquid-bubble-color: rgba(232, 243, 255, 0.9);
  --liquid-bubble-icon-filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.24));
  --liquid-nav-color: rgba(220, 233, 245, 0.72);
  --liquid-nav-hover-color: rgba(255, 255, 255, 0.94);
  --liquid-nav-hidden-active-color: rgba(226, 238, 248, 0.82);
  --liquid-nav-icon-filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18));
  --liquid-pressed-shadow: none;
  --liquid-focus-ring: rgba(73, 166, 255, 0.5);
  width: min(520px, calc(100% - 18px));
  user-select: none;
  -webkit-user-select: none;
}

html[data-theme="light"] .footer-nav.liquid-tabbar {
  --liquid-blue: #007aff;
  --liquid-hover-alpha: 0;
  --liquid-hover-ray: transparent;
  --liquid-glass-border: rgba(15, 26, 36, 0.1);
  --liquid-glass-bg: rgba(255, 255, 255, 0.42);
  --liquid-glass-shadow:
    0 20px 52px rgba(15, 26, 36, 0.2),
    0 8px 20px rgba(15, 26, 36, 0.12);
  --liquid-glass-shine: none;
  --liquid-glass-shine-opacity: 0;
  --liquid-glass-inner-border: transparent;
  --liquid-glass-inner-shadow: none;
  --liquid-glass-active-bg: rgba(255, 255, 255, 0.5);
  --liquid-glass-active-shadow:
    0 22px 56px rgba(15, 26, 36, 0.22),
    0 9px 22px rgba(15, 26, 36, 0.14);
  --liquid-lens-bg: rgba(16, 22, 24, 0.055);
  --liquid-lens-shadow:
    inset 0 0 0 1px rgba(15, 26, 36, 0.08),
    0 10px 22px rgba(15, 26, 36, 0.08);
  --liquid-lens-border: transparent;
  --liquid-lens-inner-shadow: none;
  --liquid-edge-rgb: 255, 255, 255;
  --liquid-bubble-bg: rgba(255, 255, 255, 0.52);
  --liquid-bubble-shadow:
    0 20px 38px rgba(15, 26, 36, 0.16),
    0 8px 16px rgba(15, 26, 36, 0.08);
  --liquid-bubble-highlight-bg: none;
  --liquid-bubble-highlight-opacity: 0;
  --liquid-bubble-border: transparent;
  --liquid-bubble-inner-shadow: none;
  --liquid-bubble-backdrop: blur(30px) saturate(145%) contrast(1.03) brightness(1.02);
  --liquid-bubble-color: rgba(12, 16, 18, 0.88);
  --liquid-bubble-icon-filter: drop-shadow(0 10px 16px rgba(14, 28, 30, 0.1));
  --liquid-nav-color: rgba(12, 16, 18, 0.92);
  --liquid-nav-hover-color: rgba(12, 16, 18, 0.98);
  --liquid-nav-hidden-active-color: rgba(12, 16, 18, 0.92);
  --liquid-nav-icon-filter: none;
  --liquid-pressed-shadow: none;
  --liquid-focus-ring: rgba(0, 122, 255, 0.42);
}

.footer-nav.liquid-tabbar.liquid-tabbar--hovering {
  --liquid-light-alpha: var(--liquid-hover-alpha);
}

.footer-nav.liquid-tabbar .footer-nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--liquid-count), minmax(0, 1fr));
  align-items: stretch;
  gap: 4px;
  min-height: 82px;
  padding: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  cursor: grab;
  touch-action: none;
  animation: none;
}

.footer-nav.liquid-tabbar .footer-nav__inner::before,
.footer-nav.liquid-tabbar .footer-nav__inner::after {
  display: none;
}

.footer-nav.liquid-tabbar.liquid-tabbar--pressing .footer-nav__inner,
.footer-nav.liquid-tabbar.liquid-tabbar--dragging .footer-nav__inner {
  cursor: grabbing;
}

.footer-nav.liquid-tabbar .nav-indicator {
  display: none;
}

.liquid-tabbar__glass,
.liquid-tabbar__lens,
.liquid-tabbar__bubble {
  position: absolute;
  pointer-events: none;
}

.liquid-tabbar__glass {
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--liquid-glass-border);
  background: var(--liquid-glass-bg);
  box-shadow: var(--liquid-glass-shadow);
  backdrop-filter: blur(34px) saturate(210%) contrast(1.06);
  -webkit-backdrop-filter: blur(34px) saturate(210%) contrast(1.06);
  overflow: hidden;
  transition:
    transform 320ms cubic-bezier(0.17, 0.84, 0.24, 1),
    background 260ms ease,
    box-shadow 260ms ease;
}

.liquid-tabbar__glass::before,
.liquid-tabbar__glass::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  pointer-events: none;
}

.liquid-tabbar__glass::before {
  background: var(--liquid-glass-shine);
  opacity: var(--liquid-glass-shine-opacity);
}

.liquid-tabbar__glass::after {
  border: 1px solid var(--liquid-glass-inner-border);
  box-shadow: var(--liquid-glass-inner-shadow);
}

.footer-nav.liquid-tabbar.liquid-tabbar--pressing .liquid-tabbar__glass,
.footer-nav.liquid-tabbar.liquid-tabbar--dragging .liquid-tabbar__glass {
  background: var(--liquid-glass-active-bg);
  box-shadow: var(--liquid-glass-active-shadow);
}

.liquid-tabbar__lens {
  z-index: 1;
  top: 10px;
  left: 0;
  width: var(--liquid-w);
  height: calc(100% - 20px);
  border-radius: 999px;
  opacity: 1;
  transform:
    translate3d(var(--liquid-x), var(--liquid-lens-y), 0)
    scaleX(var(--liquid-lens-scale-x))
    scaleY(var(--liquid-lens-scale-y));
  transform-origin: 50% 50%;
  background: var(--liquid-lens-bg);
  box-shadow: var(--liquid-lens-shadow);
  transition:
    transform 520ms cubic-bezier(0.18, 1.18, 0.24, 1),
    width 520ms cubic-bezier(0.18, 1.18, 0.24, 1),
    opacity 160ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.liquid-tabbar__lens::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid var(--liquid-lens-border);
  box-shadow: var(--liquid-lens-inner-shadow);
}

.footer-nav.liquid-tabbar.liquid-tabbar--has-bubble .liquid-tabbar__lens {
  opacity: 0;
  transform: translate3d(var(--liquid-x), 0, 0) scale(0.74);
}

.liquid-tabbar__bubble {
  z-index: 5;
  left: 0;
  top: var(--liquid-bubble-top);
  width: var(--liquid-bubble-w);
  height: var(--liquid-bubble-h);
  border-radius: 999px;
  opacity: 0;
  transform:
    translate3d(calc(var(--liquid-bubble-x) - 50%), var(--liquid-bubble-y), 0)
    scaleX(var(--liquid-bubble-scale-x))
    scaleY(var(--liquid-bubble-scale-y));
  transform-origin: 50% 70%;
  background: var(--liquid-bubble-bg);
  box-shadow: var(--liquid-bubble-shadow);
  backdrop-filter: var(--liquid-bubble-backdrop);
  -webkit-backdrop-filter: var(--liquid-bubble-backdrop);
  transition:
    opacity 120ms ease,
    width 170ms ease,
    height 170ms ease,
    top 170ms ease;
  overflow: hidden;
}

.liquid-tabbar__bubble::before,
.liquid-tabbar__bubble::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
}

.liquid-tabbar__bubble::before {
  display: none;
}

.liquid-tabbar__bubble::after {
  z-index: 2;
  display: none;
}

.footer-nav.liquid-tabbar.liquid-tabbar--has-bubble .liquid-tabbar__bubble {
  opacity: 1;
}

.footer-nav.liquid-tabbar.liquid-tabbar--pressing:not(.liquid-tabbar--dragging):not(.liquid-tabbar--releasing) .liquid-tabbar__bubble {
  animation: liquidTabbarPressIn 340ms cubic-bezier(0.17, 0.86, 0.24, 1.14) both;
}

.footer-nav.liquid-tabbar.liquid-tabbar--dragging .liquid-tabbar__bubble {
  animation: none;
}

.footer-nav.liquid-tabbar.liquid-tabbar--releasing .liquid-tabbar__bubble {
  animation: liquidTabbarReleaseOut 460ms cubic-bezier(0.18, 0.92, 0.2, 1) both;
}

.liquid-tabbar__bubble-content {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform:
    scaleX(var(--liquid-bubble-content-scale-x))
    scaleY(var(--liquid-bubble-content-scale-y));
  transform-origin: 50% 50%;
}

.liquid-tabbar__bubble-strip {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--liquid-strip-w, 100%);
  height: 88px;
  display: grid;
  grid-template-columns: repeat(var(--liquid-count), minmax(0, 1fr));
  transform: translate3d(var(--liquid-bubble-strip-x), -50%, 0);
  transition: none;
  will-change: transform;
}

.liquid-tabbar__bubble-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--liquid-bubble-color);
  opacity: 0.92;
  transform: scale(1);
  transition:
    color 150ms ease,
    opacity 150ms ease,
    filter 150ms ease;
}

.footer-nav.liquid-tabbar .liquid-tabbar__bubble-item .nav-btn__icon {
  width: 58px;
  height: 58px;
  font-size: 43px;
  filter: var(--liquid-bubble-icon-filter);
  transition: filter 150ms ease;
}

.footer-nav.liquid-tabbar .liquid-tabbar__bubble-item .nav-btn__label {
  color: currentColor;
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1;
  letter-spacing: 0;
}

.liquid-tabbar__bubble-item.liquid-tabbar__bubble-item--active {
  color: var(--liquid-blue);
  opacity: 1;
  filter: saturate(1.05);
}

.footer-nav.liquid-tabbar .nav-btn {
  min-width: 0;
  min-height: 66px;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  color: var(--liquid-nav-color);
  background: transparent;
  overflow: hidden;
  transform: translateY(0) scale(1);
  transition:
    color 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-nav.liquid-tabbar .nav-btn:hover,
.footer-nav.liquid-tabbar .nav-btn:focus-visible {
  color: var(--liquid-nav-hover-color);
  transform: translateY(-2px);
}

.footer-nav.liquid-tabbar .nav-btn:focus-visible {
  outline: 2px solid var(--liquid-focus-ring);
  outline-offset: 4px;
}

.footer-nav.liquid-tabbar .nav-btn:active {
  transform: translateY(1px) scale(0.96);
}

.footer-nav.liquid-tabbar .nav-btn--active,
.footer-nav.liquid-tabbar .nav-btn--hover,
.footer-nav.liquid-tabbar .nav-btn.liquid-tabbar__item--preview {
  color: var(--liquid-blue);
}

.footer-nav.liquid-tabbar .nav-btn.liquid-tabbar__item--pressed {
  transform: translateY(-3px) scale(1.01);
  text-shadow: var(--liquid-pressed-shadow);
}

.footer-nav.liquid-tabbar .nav-btn__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  font-size: 20px;
  line-height: 1;
  filter: var(--liquid-nav-icon-filter);
  transition:
    opacity 80ms ease,
    filter 150ms ease;
}

.footer-nav.liquid-tabbar .nav-btn__label {
  max-width: 100%;
  color: currentColor;
  font-size: 0.66rem;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  transition: opacity 80ms ease;
}

.footer-nav.liquid-tabbar.liquid-tabbar--has-bubble .nav-btn--active {
  color: var(--liquid-nav-hidden-active-color);
}

.footer-nav.liquid-tabbar.liquid-tabbar--has-bubble .nav-btn.liquid-tabbar__item--preview {
  color: var(--liquid-blue);
}

.footer-nav.liquid-tabbar.liquid-tabbar--has-bubble .footer-nav__inner > .nav-btn {
  -webkit-mask-image: radial-gradient(
    ellipse var(--liquid-mask-rx, 0px) var(--liquid-mask-ry, 0px)
      at var(--liquid-mask-x, -999px) var(--liquid-mask-y, -999px),
    transparent 98.5%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse var(--liquid-mask-rx, 0px) var(--liquid-mask-ry, 0px)
      at var(--liquid-mask-x, -999px) var(--liquid-mask-y, -999px),
    transparent 98.5%,
    #000 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@keyframes liquidTabbarPressIn {
  0% {
    opacity: 0;
    transform:
      translate3d(calc(var(--liquid-bubble-x) - 50%), 9px, 0)
      scaleX(0.76)
      scaleY(0.82);
    filter: blur(1.1px) brightness(1.12);
  }
  54% {
    opacity: 1;
    transform:
      translate3d(calc(var(--liquid-bubble-x) - 50%), -2px, 0)
      scaleX(1.04)
      scaleY(1.025);
    filter: blur(0) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform:
      translate3d(calc(var(--liquid-bubble-x) - 50%), var(--liquid-bubble-y), 0)
      scaleX(var(--liquid-bubble-scale-x))
      scaleY(var(--liquid-bubble-scale-y));
    filter: blur(0) brightness(1);
  }
}

@keyframes liquidTabbarReleaseOut {
  0% {
    opacity: 1;
    transform:
      translate3d(calc(var(--liquid-bubble-x) - 50%), var(--liquid-bubble-y), 0)
      scaleX(var(--liquid-bubble-scale-x))
      scaleY(var(--liquid-bubble-scale-y));
    filter: blur(0) brightness(1.03);
  }
  32% {
    opacity: 1;
    transform:
      translate3d(calc(var(--liquid-bubble-x) - 50%), 0, 0)
      scaleX(0.94)
      scaleY(1.035);
    filter: blur(0) brightness(1.04);
  }
  68% {
    opacity: 0.92;
    transform:
      translate3d(calc(var(--liquid-bubble-x) - 50%), 1px, 0)
      scaleX(1.015)
      scaleY(0.985);
    filter: blur(0) brightness(1.02);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(calc(var(--liquid-bubble-x) - 50%), 8px, 0)
      scaleX(0.74)
      scaleY(0.78);
    filter: blur(0.7px) brightness(1.08);
  }
}

@media (max-width: 420px) {
  .footer-nav.liquid-tabbar .footer-nav__inner {
    min-height: 72px;
    padding: 7px;
  }

  .footer-nav.liquid-tabbar .nav-btn {
    min-height: 58px;
  }

  .footer-nav.liquid-tabbar .nav-btn__icon {
    width: 28px;
    height: 28px;
    font-size: 19px;
  }

  .footer-nav.liquid-tabbar .nav-btn__label {
    font-size: 0.62rem;
  }

  .liquid-tabbar__bubble-strip {
    height: 82px;
  }

  .footer-nav.liquid-tabbar .liquid-tabbar__bubble-item .nav-btn__icon {
    width: 52px;
    height: 52px;
    font-size: 39px;
  }

  .footer-nav.liquid-tabbar .liquid-tabbar__bubble-item .nav-btn__label {
    font-size: 0.72rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .footer-nav.liquid-tabbar *,
  .footer-nav.liquid-tabbar *::before,
  .footer-nav.liquid-tabbar *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}