body {
      font-family: 'Montserrat', 'Segoe UI', sans-serif;
      animation: fadeIn 0.6s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .glass {
      background-color: rgba(24, 24, 27, 0.85);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }
    input:focus {
      outline: none;
      box-shadow: 0 0 0 2px #6366f1, 0 0 6px #6366f1;
      transition: box-shadow 0.3s ease;
    }
    input {
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .fade-toggle {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity 0.35s ease, transform 0.35s ease;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .fade-toggle.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .spinner {
      border: 2px solid transparent;
      border-top-color: white;
      border-radius: 9999px;
      width: 1rem;
      height: 1rem;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
.login-bg {
  background-image: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0)),
                    url('/static/login-bg.jpg');
  background-size: cover;
  background-position: center;
}

.pt-login {
  padding-top: 150px;
}