/* ============================================
   AUTH PAGES — Login / Register
   ============================================ */

.auth-body {
  min-height: 100vh;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-container {
  display: flex;
  width: 100%;
  max-width: 1000px;
  min-height: 620px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Visual Panel */
.auth-visual {
  flex: 1;
  background:
    linear-gradient(160deg, rgba(196,101,122,0.85) 0%, rgba(44,44,44,0.9) 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><defs><pattern id="p" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1.5" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect fill="url(%23p)" width="400" height="400"/></svg>');
  background-color: #8B4A5E;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  overflow: hidden;
}

.auth-visual--register {
  background:
    linear-gradient(160deg, rgba(139,168,136,0.85) 0%, rgba(44,44,44,0.88) 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><defs><pattern id="p" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1.5" fill="rgba(255,255,255,0.08)"/></pattern></defs><rect fill="url(%23p)" width="400" height="400"/></svg>');
  background-color: #4A6B47;
}

.auth-visual-content {
  position: relative; z-index: 1; color: white; text-align: left;
}

.auth-logo {
  font-size: 40px; margin-bottom: 32px;
  opacity: 0.9; display: block;
  animation: floatGently 4s ease-in-out infinite;
}

@keyframes floatGently {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.auth-headline {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  line-height: 1.15;
  color: white;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}
.auth-headline em { font-style: italic; font-weight: 400; }

.auth-tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  max-width: 280px;
}

.auth-dots { display: flex; gap: 8px; margin-top: 40px; }
.auth-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.auth-dots span:first-child { background: rgba(255,255,255,0.9); width: 24px; border-radius: 3px; }

/* Decorative circles */
.auth-visual::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
}
.auth-visual::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Form Panel */
.auth-form-panel {
  width: 420px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 44px;
}

.auth-form-inner { width: 100%; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.auth-brand-mark {
  font-size: 24px;
  color: var(--rose);
}
.auth-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1;
}
.auth-brand-sub {
  font-size: 12px;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.auth-form-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.auth-form-subtitle {
  font-size: 14px;
  color: var(--charcoal-soft);
  margin-bottom: 28px;
}

.auth-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--charcoal-soft);
  font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-footnote {
  font-size: 12px;
  color: var(--charcoal-soft);
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}

/* Flash on auth page */
.auth-body .flash {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  min-width: 300px; text-align: center; z-index: 100;
  box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
  .auth-container { flex-direction: column; min-height: unset; }
  .auth-visual { min-height: 220px; padding: 40px 28px; }
  .auth-headline { font-size: 32px; }
  .auth-form-panel { width: 100%; padding: 32px 24px; }
}