:root {
      --primary: #7b61ff;
      --primary-gradient: linear-gradient(90deg, #7b61ff, #9a6eff);
      --bg: #f8f9fb;
      --card-bg: #fff;
      --text: #111;
      --muted: #666;
    }

    * {
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }

body {
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  min-height: 100dvh; /* ✅ modern fix for mobile viewport height */
}

    .card {
      background: var(--card-bg);
      padding: 2rem;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      width: 100%;
      max-width: 380px;
      text-align: center;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-3px);
    }

    .logo {
      width: 80px;
      height: auto;
      margin-bottom: 0.5rem;
    }

    .title {
      font-weight: 500;
      color: #7b61ff;
      margin-bottom: 0.8rem;
    }

    .intro {
      font-size: 1rem;
      color: var(--text);
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    input {
      padding: 0.9rem;
      border-radius: 10px;
      border: 1px solid #ddd;
      font-size: 1rem;
      width: 100%;
    }

    button {
      padding: 0.9rem;
      border: none;
      border-radius: 10px;
      background: var(--primary-gradient);
      color: white;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    button:hover {
      opacity: 0.9;
    }

    .footer {
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: 1.2rem;
      line-height: 1.4;
    }

    @media (max-width: 500px) {
      .card {
        padding: 1.5rem;
      }
    }