/* 🌈 Gradient Background */
    body {
      font-family: "Poppins", sans-serif;
      background: linear-gradient(-45deg, #a1c4fd, #c2e9fb, #fbc2eb, #f6d365, #fddb92);
      background-size: 500% 500%;
      animation: gradientShift 20s ease infinite;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Glassmorphism Card */
    .auth-card {
      background: rgba(255, 255, 255, 0.75);
      border-radius: 20px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.35);
      padding: 40px 30px;
      width: 100%;
      max-width: 420px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      text-align: center;
    }

    /* Logo Image Only */
    .logo-img {
      height: 80px;
      width: auto;
      max-width: 260px;
      object-fit: contain;
      display: block;
      margin: 0 auto 20px auto;
    }

    .auth-card p {
      color: #374151;
      margin-bottom: 22px;
      font-size: 0.95rem;
    }

    /* ✅ Custom Message Styling */
    .auth-card .alert {
      background-color: #dc2626 !important; /* red */
      color: #fff !important;               /* white text */
      border: none;
      border-radius: 10px;
      font-weight: 500;
    }

    .form-control {
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #ddd;
      padding: 12px;
      font-size: 0.95rem;
    }

    .form-control:focus {
      background: #fff;
      outline: none;
      box-shadow: 0 0 0 2px #6a82fb;
      color: #111;
    }

    .form-control::placeholder { color: #666; }

    /* Gradient Button */
    .btn-custom {
      background: linear-gradient(90deg, #6a82fb, #fc5c7d);
      border: none;
      color: #fff;
      font-weight: 600;
      padding: 12px 20px;
      border-radius: 30px;
      transition: 0.3s;
      width: 100%;
      margin-top: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
      font-size: 1rem;
    }

    .btn-custom:hover {
      background: linear-gradient(90deg, #f7971e, #ffd200);
      transform: translateY(-2px) scale(1.03);
    }

    .auth-footer {
      margin-top: 20px;
      font-size: 0.9rem;
      opacity: 0.9;
      color: #444;
    }

    .auth-footer a {
      color: #6a82fb;
      text-decoration: none;
      font-weight: 500;
    }

    .auth-footer a:hover { color: #fc5c7d; }

    /* 📱 Responsive */
    @media (max-width: 576px) {
      .auth-card { padding: 30px 20px; border-radius: 16px; }
      .auth-card p { font-size: 0.85rem; }
      .form-control { font-size: 0.9rem; padding: 10px; }
      .btn-custom { font-size: 0.95rem; padding: 10px; }
      .logo-img { height: 70px; max-width: 200px; }
    }