* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0d0d0d;
      overflow: hidden;
      position: relative;
      transition: background 0.4s ease;
    }

    /* Particle Background */
    #particleCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.65);
      z-index: 1;
      transition: background 0.4s ease;
    }

    /* Theme Toggle Button */
    .theme-toggle {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 3;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 18px;
      color: #fff;
      transition: all 0.3s ease;
    }

    .theme-toggle:hover {
      transform: scale(1.1);
      background: rgba(255, 255, 255, 0.2);
    }

    /* Container */
    .container {
      position: relative;
      width: 360px;
      min-height: 520px;
      perspective: 1000px;
      z-index: 2;
    }

    /* Card Flip */
    .card {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transition: transform 0.8s ease-in-out;
    }

    .card.flipped {
      transform: rotateY(180deg);
    }

    /* Forms */
    .form {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 16px;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      animation: fadeIn 0.6s ease;
      transition: background 0.4s ease, color 0.4s ease;
    }

    .form img.logo {
      width: 100px;
      margin-bottom: 1rem;
    }

    .form h2 {
      text-align: center;
      margin-bottom: 1.2rem;
      font-weight: 500;
      letter-spacing: 1px;
    }

    /* Input groups */
    .input-group {
      width: 100%;
      margin-bottom: 1rem;
      position: relative;
    }

    .input-group input {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: 1px solid;
      outline: none;
      font-size: 15px;
      transition: all 0.3s ease;
    }

    .input-group input:focus {
      box-shadow: 0 0 10px rgba(156, 39, 176, 0.5);
    }

    /* Show/hide password */
    .toggle-password {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      font-size: 14px;
    }

    /* Validation message */
    .error-message {
      font-size: 13px;
      color: #ff4c4c;
      margin-top: -8px;
      margin-bottom: 10px;
      display: none;
    }

    /* Password strength */
    .strength {
      width: 100%;
      height: 6px;
      border-radius: 6px;
      margin-bottom: 1rem;
      overflow: hidden;
    }

    .strength-bar {
      height: 100%;
      width: 0%;
      background: red;
      transition: width 0.3s ease, background 0.3s ease;
    }

    /* Remember me */
    .remember {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      font-size: 14px;
    }

    .remember input {
      margin-right: 8px;
    }

    /* Primary Buttons */
    .btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 0.5rem;
    }

    .btn:hover {
      opacity: 0.9;
      transform: scale(1.02);
    }

    /* Switch Links 
    .switch-link {
      display: block;
      margin-top: 1rem;
      font-size: 14px;
      color: #9c27b0;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
      transition: color 0.3s ease;
    }*/

    .switch-link:hover {
      color: #e040fb;
      text-decoration: underline;
    }
.switch-wrapper {
  width: 100%;
  margin-top: 1rem;
  text-align: center;
}

.switch-link {
  font-size: 14px;
  color: #9c27b0;
  cursor: pointer;
  margin-top: 3rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.switch-link:hover {
  color: #e040fb;
  text-decoration: underline;
}

    /* Back form */
    .register {
      transform: rotateY(180deg);
    }

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

    /* THEME: DARK */
    body.dark .form {
      background: rgba(25, 25, 25, 0.9);
      backdrop-filter: blur(12px);
      color: #fff;
    }
    body.dark .input-group input {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.2);
      color: #fff;
    }
    body.dark .toggle-password { color: #ccc; }
    body.dark .btn {
      background: linear-gradient(135deg, #9c27b0, #4caf50);
      color: white;
    }

    /* THEME: LIGHT */
    body.light .overlay {
      background: rgba(255,255,255,0.65);
      color: black;
    }
    body.light .form {
      background: rgba(255, 255, 255, 0.85);
      color: #222;
    }
    body.light .input-group input {
      background: rgba(0, 0, 0, 0.05);
      border-color: rgba(0,0,0,0.2);
      color: #222;
    }
    body.light .toggle-password { color: #555; }
    body.light .btn {
      background: linear-gradient(135deg, #4caf50, #9c27b0);
      color: white;
    }

    /* Responsive */
    @media (max-width: 420px) {
      .container {
        width: 90%;
      }
    }