body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(120deg, #9333ea, #a855f7, #ec4899, #f43f5e);
      background-size: 400% 400%;
      animation: gradientBG 12s ease infinite;
      font-family: Georgia, 'Times New Roman', Times, serif;
      position: relative;
      overflow: hidden;
}

/* Floating shapes */
.shape {
      position: absolute;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      animation: float 16s linear infinite;
}

.shape:nth-child(1) { width: 70px; height: 70px; top: 20%; left: 10%; animation-duration: 18s; }
.shape:nth-child(2) { width: 110px; height: 110px; top: 60%; left: 25%; animation-duration: 20s; }
.shape:nth-child(3) { width: 80px; height: 80px; top: 30%; right: 15%; animation-duration: 15s; }
.shape:nth-child(4) { width: 130px; height: 130px; bottom: 15%; right: 10%; animation-duration: 25s; }

@keyframes float {
      0% { transform: translateY(0) rotate(0); }
      50% { transform: translateY(-40px) rotate(180deg); }
      100% { transform: translateY(0) rotate(360deg); }
}

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

    .login-card {
      width: 100%;
      max-width: 420px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      padding: 35px 30px;
      border-radius: 14px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.25);
      animation: fadeIn 0.8s ease-in-out;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      z-index: 2;
    }

    .login-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(0,0,0,0.35);
    }

    .login-card h3 {
      font-weight: 700;
      margin-bottom: 10px;
      color: #4c1d95;
    }

    .login-card p {
      color: #6b7280;
      margin-bottom: 20px;
    }

    .form-control {
      border-radius: 10px;
      padding: 12px;
      border: 1px solid #d1d5db;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      border-color: #9333ea;
      box-shadow: 0 0 10px rgba(147,51,234,0.4);
    }

    .btn-dark {
      background: linear-gradient(135deg, #9333ea, #ec4899);
      border: none;
      border-radius: 10px;
      font-weight: 600;
      padding: 12px;
      transition: all 0.3s ease;
    }

    .btn-dark:hover {
      background: linear-gradient(135deg, #7e22ce, #db2777);
      transform: scale(1.05);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Responsive */
    @media (max-width: 576px) {
      .login-card {
        margin: 15px;
        padding: 25px;
      }
      .login-card h3 {
        font-size: 1.4rem;
      }
    }