static/styles.css

body {
      font-family: "Roboto", sans-serif;
      background-color: #f0f9f4;
      scroll-behavior: smooth;
    }
    .tab-btn {
      @apply px-5 py-3 rounded-lg text-green-900 font-semibold transition-colors duration-300;
    }
    .tab-btn.active {
      @apply bg-green-600 text-white shadow-lg;
    }
    .tab-btn:hover:not(.active) {
      @apply bg-green-200;
    }
    .output {
      @apply mt-4 p-5 bg-white rounded-lg shadow-md text-gray-800;
      min-height: 4rem;
    }
    .metrics > div {
      @apply bg-white rounded-lg shadow p-6 text-center text-green-900 font-semibold;
      transition: transform 0.3s ease;
    }
    .metrics > div:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 15px rgba(34, 197, 94, 0.4);
    }
    /* Animate fade-in */
    .fade-in {
      animation: fadeInUp 0.8s ease forwards;
      opacity: 0;
      transform: translateY(20px);
    }
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* Scrollbar for chat answer */
    #answer-container::-webkit-scrollbar {
      width: 8px;
    }
    #answer-container::-webkit-scrollbar-thumb {
      background-color: #34d399;
      border-radius: 10px;
    }