* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* scope background overlay to login page only */
body.login-page {
  background: #f0f4f8;
}

/* Full-page animated background overlay only for body.login-page */
body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(30% 30% at 15% 25%, rgba(91,110,246,0.90), transparent 28%),
    radial-gradient(30% 30% at 85% 75%, rgba(244,114,182,0.90), transparent 28%),
    linear-gradient(135deg, rgba(91,110,246,0.18), rgba(244,114,182,0.14));
  filter: blur(80px) saturate(120%);
  animation: bg-hue 20s linear infinite, bg-drift 18s ease-in-out infinite;
  will-change: transform, filter;
}

/* disable the container-limited rectangles (they produce the small square effect) */
.login-page-container::before,
.login-page-container::after {
  display: none;
}

/* ensure login container and card sit above overlay */
.login-page-container { position: relative; z-index: 10; }
.login-card { z-index: 30 !important; background: #fff !important; }

.login-page-container {
  display: flex;
  align-items: flex-start; /* Changed from center to move the card to the top */
  justify-content: center;
  min-height: 100vh;
  padding: 6rem 2rem 2rem; /* Increased top padding to push the card down from the very top */
  position: relative;
  overflow: hidden; /* Add this to contain the pseudo-elements */
}

/* Animated Background Shapes */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes color-cycle {
  0% { filter: hue-rotate(0deg) blur(100px); }
  100% { filter: hue-rotate(360deg) blur(100px); }
}

.login-page-container::before,
.login-page-container::after {
  content: "";
  position: absolute;
  z-index: 0;
  /* The filter property is now handled by the color-cycle animation */
  border-radius: 2rem; /* Changed from 50% to create rectangles with rounded corners */
  animation: spin 25s infinite linear, color-cycle 15s infinite linear alternate; /* Added color-cycle animation */
}

.login-page-container::before {
  width: 60vw; /* Changed to viewport width for a wider shape */
  height: 50vh; /* Changed to viewport height for a rectangular shape */
  background: linear-gradient(135deg, #5b6ef6, #8b5cf6);
  top: -10%; /* Adjusted position */
  left: -15%; /* Adjusted position */
}

.login-page-container::after {
  width: 60vw; /* Changed to viewport width for a wider shape */
  height: 50vh; /* Changed to viewport height for a rectangular shape */
  background: linear-gradient(135deg, #f472b6, #ec4899);
  bottom: -10%; /* Adjusted position */
  right: -15%; /* Adjusted position */
  animation-direction: reverse, normal; /* Set animation directions for spin and color-cycle */
}

/* --- Glassmorphism Card --- */
.login-card {
  position: relative;
  z-index: 20 !important; /* ensure card is above animated rectangles */
  width: 100%;
  max-width: 700px; /* increase size if desired */
  background: #ffffff !important; /* solid white so underlying colors don't show through */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(15,23,42,0.08);
}

.login-content {
  padding: 3rem; /* Increased padding for more space */
}

/* --- Typography & Form Elements --- */
.login-title {
  text-align: center;
  margin-bottom: 2rem;
}

.login-title h1 {
  font-size: 2rem; /* Increased font size */
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.login-title p {
  font-size: 1rem;
  color: #4b5563;
}

.form-group {
  margin-bottom: 2rem;
}

.form-group label {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background-color: rgba(249, 250, 251, 0.9);
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  color: #1f2937;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #5b6ef6;
  box-shadow: 0 0 0 3px rgba(91, 110, 246, 0.3);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.login-btn {
  width: 100%;
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(90deg, #5b6ef6 0%, #8b5cf6 100%);
  box-shadow: 0 4px 15px rgba(91, 110, 246, 0.2);
  transition: all 0.3s ease;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(91, 110, 246, 0.3);
}

.login-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: #4b5563;
}

.login-footer strong {
  color: #5b6ef6;
  font-weight: 600;
}

/* animations */
@keyframes bg-hue {
  from { filter: blur(80px) saturate(120%) hue-rotate(0deg); }
  to   { filter: blur(80px) saturate(120%) hue-rotate(360deg); }
}
@keyframes bg-drift {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-4%) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Responsive */
@media (max-width: 768px) { /* Adjusted breakpoint */
  .login-container {
    padding: 1rem;
  }
  .login-card {
    max-width: 95%;
  }
  .login-content {
    padding: 2rem 1.5rem;
  }
}