/* ========================================
   AUTH PAGES STYLES
   Login & Register Pages
   ======================================== */

/* ========================================
   FORM CARD LAYOUT
   ======================================== */

.form-card { 
  max-width: 480px; 
  margin: 8vh auto; 
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ========================================
   AUTH SPECIFIC STYLES
   ======================================== */

/* Login form specific styling */
#login-form {
  /* Additional login-specific styles can be added here */
}

/* Register form specific styling */
#register-form {
  /* Additional register-specific styles can be added here */
}

/* Auth page specific animations */
.auth-card {
  animation: fadeInUp 0.6s ease-out;
}

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

/* Auth page responsive design */
@media (max-width: 600px) {
  .form-card {
    margin: 4vh auto;
    max-width: 95vw;
  }
  
  .content {
    padding: 16px;
  }
}