.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-4);
  background: radial-gradient(circle at top right, hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12), transparent 45%),
              radial-gradient(circle at bottom left, hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.1), transparent 40%),
              var(--background);
  transition: background var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: var(--radius-full);
  background: var(--primary);
  filter: blur(120px);
  opacity: 0.15;
  top: 15%;
  right: 15%;
  pointer-events: none;
  animation: pulse 8s infinite alternate ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.12; }
  100% { transform: scale(1.2) translate(-20px, 20px); opacity: 0.18; }
}

.card {
  width: 100%;
  max-width: 440px;
  padding: var(--space-8) var(--space-6);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  backdrop-filter: blur(8px);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  z-index: 1;
}

@media (min-width: 768px) {
  .card {
    padding: var(--space-12) var(--space-8);
  }
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 25px 4px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.22);
}

.header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.subtitle {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--primary);
  margin-bottom: var(--space-2);
}

.title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--foreground);
  letter-spacing: -0.02em;
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--foreground);
  opacity: 0.85;
}

.inputWrapper {
  position: relative;
}

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--foreground);
  background-color: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15);
}

.error {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: hsl(0, 85%, 60%);
  background-color: hsl(0, 85%, 97%);
  border: 1px solid hsl(0, 85%, 90%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: shake 0.3s ease-in-out;
}

[data-theme='dark'] .error {
  background-color: hsla(0, 85%, 20%, 0.15);
  border-color: hsla(0, 85%, 50%, 0.3);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.button {
  width: 100%;
  padding: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.25);
}

.button:active {
  transform: translateY(0);
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.footer {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--foreground);
  opacity: 0.6;
}
