/* ═══════════════════════════════════════════
   Auth Pages (Login / Register)
   ═══════════════════════════════════════════ */

.auth {
  display: flex;
  min-height: 100vh;
}

.auth--centered {
  align-items: center;
  justify-content: center;
}

.auth__form-wrapper--centered {
  text-align: center;
  max-width: 480px;
}

.auth__title--code404 {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.auth__text-muted {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* Promo side */
.auth__side {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-16);
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}

.auth__side-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.06;
  filter: blur(100px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.auth__side-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
  position: relative;
}

.auth__side-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-10);
  position: relative;
}

.auth__stats {
  display: flex;
  gap: var(--space-8);
  position: relative;
}

.auth__stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

.auth__stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Features list (register page) */
.auth__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

.auth__feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.auth__feature-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success-soft);
  color: var(--color-success);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

/* Form side */
.auth__form-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-16);
}

.auth__form-wrapper {
  width: 100%;
  max-width: 400px;
}

.auth__form-header {
  margin-bottom: var(--space-8);
}

.auth__form-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.auth__form-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.auth__form .form-group {
  margin-bottom: var(--space-5);
}

.auth__form .form-row {
  display: flex;
  gap: var(--space-4);
}

.auth__form .btn {
  margin-top: var(--space-2);
}

/* Check group */
.auth__check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.auth__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  accent-color: var(--color-primary);
}

.auth__check label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.auth__check a {
  color: var(--color-primary);
}
.auth__check a:hover {
  text-decoration: underline;
}

/* Auth extras (forgot password, etc.) */
.auth__extras {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.auth__forgot {
  font-size: var(--text-sm);
  color: var(--color-primary);
}
.auth__forgot:hover { text-decoration: underline; }

/* Divider */
.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.auth__divider::before,
.auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* Switch link */
.auth__switch {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.auth__switch a {
  color: var(--color-primary);
  font-weight: 500;
}
.auth__switch a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   Responsive — Auth
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
  .auth__side {
    display: none;
  }
  .auth__form-side {
    padding: var(--space-8);
  }
}

@media (max-width: 480px) {
  .auth__form-side {
    padding: var(--space-6) var(--space-4);
  }
  .auth__form .form-row {
    flex-direction: column;
    gap: 0;
  }
}