.app-bottom-nav {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px 10px 10px;
  background:
    linear-gradient(180deg, rgba(40, 28, 18, 0.1), rgba(9, 9, 10, 0.86)),
    linear-gradient(180deg, rgba(74, 48, 24, 0.78), rgba(17, 13, 12, 0.96));
  border-top: 1px solid rgba(255, 240, 205, 0.12);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
}

.app-bottom-nav__item {
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: #f7dfad;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.app-bottom-nav__button-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  display: block;
}

.app-bottom-nav__button-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.app-bottom-nav__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8d77b;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.app-bottom-nav__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.app-bottom-nav__label {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.app-bottom-nav__item:active {
  transform: translateY(1px);
}
