body {
            font-family: 'Inter', sans-serif;
            background: #000000; /* Full black background */
            color: #e2e8f0;
        }

        /* Navbar Styling */
        .navbar {
            backdrop-filter: blur(12px);
            background-color: rgba(255, 255, 255, 0.05);
            position: fixed;
            top: 25px;
            left: 30px;
            right: 30px;
            border-radius: 50px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        @media (max-width: 640px) {
            .navbar {
                left: 15px;
                right: 15px;
                top: 15px;
            }
        }

        .floating-button {
            transition: all 0.3s ease-in-out;
        }
        .floating-button:hover {
            transform: translateY(-3px) scale(1.02);
        }

        .gradient-button {
            background: linear-gradient(to right, #007bff, #00c6ff);
        }

        .text-gray-600 {
            color: #a0aec0;
        }
.mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000000;
            z-index: 40;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Aligned to the top */
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
        }
        .mobile-menu.active {
            transform: translateX(0);
        }
        .mobile-menu-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
        }
        .mobile-menu-links {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Aligned to the top */
            align-items: flex-start;
            padding: 2rem 0; /* Adjusted padding */
        }
        .mobile-menu-links a, .mobile-menu-links div {
            width: 100%;
            padding: 1rem 1.5rem; /* Adjusted padding */
            font-size: 1.25rem;
            font-weight: 500;
            color: #e2e8f0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .mobile-menu-bottom {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .mobile-menu-bottom button {
            width: 100%;
            padding: 0.75rem;
            border-radius: 9999px;
            font-size: 1rem;
            font-weight: 600;
        }
        .card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 20px;
            border-radius: 16px;
            transition: all 0.3s;
        }

        .card:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-5px);
        }

        /* Card Stack Section */
        .panel {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .stack-card {
            background: #000;
            border: 1px solid #222;
            border-radius: 20px;
            width: 80%;
            max-width: 1200px;
            min-height: 70%;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            transition: transform 0.4s ease;
        }
        .stack-card img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.stack-card img {
  object-fit: contain;
  max-height: 100%;
}
.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px;
  border-radius: 16px;
  transition: all 0.3s ease;
}
.card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
}
.card img {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.card:hover img {
  opacity: 1;
}

 .section-title {
      font-size: 2.5rem;
      font-weight: 700;
    }
    .gradient-text {
      background: linear-gradient(to right, #6EE7B7, #3B82F6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .icon-box {
      background-color: #000000;
      border: 1px solid #000000;
      transition: transform 0.3s ease;
    }
    .icon-box:hover {
      transform: translateY(-10px);
    }
@media (min-width: 768px) {
    .stack-card img {
        max-width: 300px;
    }
}
 .upload-box {
      border: 2px dashed rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.05);
      padding: 40px;
      border-radius: 16px;
      backdrop-filter: blur(10px);
      transition: 0.3s ease;
    }

    .upload-box:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .choose-button {
      background: linear-gradient(to right, #007bff, #00c6ff);
      box-shadow: 0 0 20px rgba(0, 198, 255, 0.4);
      transition: transform 0.3s ease;
    }

    .choose-button:hover {
      transform: scale(1.03);
    }

    .section-card {
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      padding: 30px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Center the form’s children and add spacing */
.upload-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Email input styling: rounded, readable, and responsive */
.email-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  padding: 12px 20px;
  border-radius: 9999px;
  outline: none;
  /* Slightly wider than the button: responsive clamp */
  width: clamp(260px, 62vw, 560px);
}

/* Focus glow to match your neon-ish aesthetic */
.email-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.35);
}

/* Mobile spacing adjustments */
@media (max-width: 640px) {
  .upload-form { gap: 10px; }
  .email-input { width: clamp(240px, 80vw, 560px); }
}
#results img { height: auto; display: block; margin-inline: auto; }

/* new code here */
    .tab-btn {
      transition: all 0.3s ease;
    }
    .tab-btn.active {
      color: white;
      border-bottom: 2px solid #00c6ff;
    }
    .email-input {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #e2e8f0;
      padding: 12px 20px;
      border-radius: 9999px;
      outline: none;
      width: 100%;
    }
    .email-input:focus {
      box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.35);
    }
    .gradient-button {
      background: linear-gradient(to right, #007bff, #00c6ff);
      box-shadow: 0 0 20px rgba(0, 198, 255, 0.4);
      transition: transform 0.3s ease;
      width: 100%;
    }
    .gradient-button:hover {
      transform: scale(1.05);
    }
    .auth-form {
      transition: opacity 0.3s ease, transform 0.3s ease;
      width: 100%;
    }
    .auth-form.hidden {
      opacity: 0;
      transform: translateX(50px);
      position: absolute;
      pointer-events: none;
    }