/* auth.css */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--background) 0%, var(--surface-active) 100%);
  position: relative;
  overflow: hidden;
}

[data-bs-theme='dark'] .auth-page {
  background: radial-gradient(circle at top right, var(--primary-light), var(--background) 50%);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: var(--spacing-2xl);
  margin: var(--spacing-lg);
  z-index: var(--z-normal);
}

.auth-logo {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.auth-logo img {
  height: 48px;
  width: auto;
}

.auth-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.auth-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-sm);
}

.floating-label-group {
  position: relative;
  margin-bottom: var(--spacing-lg);
}

.floating-label-group input {
  height: 56px;
  padding: 24px 16px 8px;
}

.floating-label-group label {
  position: absolute;
  top: 18px;
  left: 16px;
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
  pointer-events: none;
  font-size: 1rem;
}

[dir="rtl"] .floating-label-group label {
  left: auto;
  right: 16px;
}

.floating-label-group input:focus ~ label,
.floating-label-group input:not(:placeholder-shown) ~ label {
  top: 8px;
  font-size: 0.75rem;
  color: var(--primary);
}

.auth-footer {
  text-align: center;
  margin-top: var(--spacing-xl);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.auth-footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Background Blobs for Premium Feel */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: var(--z-below);
  opacity: 0.5;
  pointer-events: none;
}

.blob-1 {
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: rgba(37, 99, 235, 0.3);
}

.blob-2 {
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: rgba(249, 115, 22, 0.2);
}