.bottom-nav {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 99;
      width: 100%;
      max-width: 480px;
      transform: translateX(-50%);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      height: 60px;
      padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
      background: rgba(255, 255, 255, 0.98);
      border-top: 1px solid #f0f0f0;
      backdrop-filter: blur(10px);
    }

    .bottom-nav-item {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 6px;
      color: #999;
      font-size: 12px;
      line-height: 1;
      text-decoration: none;
      transition: color 0.2s;
    }

    .bottom-nav-item .nav-icon {
      width: 22px;
      height: 22px;
      opacity: 0.5;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .bottom-nav-item.active {
      color: #2a6931;
      font-weight: 800;
    }
    .bottom-nav-item.active .nav-icon {
      opacity: 1;
    }
/* --- Refined Interactions --- */

.bottom-nav-item {
  transition: color 0.2s ease, transform 0.2s ease;
}
.bottom-nav-item:hover {
  color: #2a6931;
}
.bottom-nav-item:hover .nav-icon {
  opacity: 0.75;
}
.bottom-nav-item.active:hover .nav-icon {
  opacity: 1;
}
.bottom-nav-item:active {
  transform: scale(0.95);
}