/* --- Auth Pages --- */
.auth-page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: var(--spacing-8) var(--spacing-6);
  overflow: hidden;
}

.auth-page__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(120px);
}

.auth-page__glow--top-left {
  top: -6rem;
  left: -6rem;
  width: 24rem;
  height: 24rem;
  background: rgba(250, 93, 25, 0.1);
}

.auth-page__glow--right {
  top: 50%;
  right: -12rem;
  width: 30rem;
  height: 30rem;
  background: rgba(5, 102, 217, 0.05);
}

.auth-page__glow--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 37rem;
  height: 37rem;
  background: rgba(250, 93, 25, 0.05);
}

/* Auth Card */
.auth-card {
  width: 100%;
  max-width: 420px;
  z-index: 1;
}

.auth-card--signup {
  max-width: 480px;
  background: var(--surface-container-low);
  padding: var(--spacing-10) var(--spacing-8);
}

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

.auth-card--signup .auth-card__header {
  text-align: left;
}

.auth-card__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
}

.auth-card__brand-text {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--primary-container);
}

.auth-card__brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-tint);
  box-shadow: 0 0 10px rgba(255, 181, 155, 0.6);
}

.auth-card__title {
  font-family: var(--font-display);
  font-size: var(--headline-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin-bottom: var(--spacing-1);
}

.auth-card__subtitle {
  font-size: var(--label-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--on-surface-variant);
}

/* Auth Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.auth-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.auth-form__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--on-surface-variant);
  margin-left: var(--spacing-1);
  transition: color var(--transition-fast);
}

.auth-form__group:focus-within .auth-form__label {
  color: var(--primary-container);
}

.auth-form__input-wrap {
  position: relative;
}

.auth-form__icon {
  position: absolute;
  left: var(--spacing-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: var(--on-surface-variant);
  pointer-events: none;
}

.auth-form__input {
  padding: var(--spacing-4) var(--spacing-4);
  font-size: var(--body-md);
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  border: 1px solid rgba(90, 65, 56, 0.15);
}

.auth-form__input:focus {
  border-color: rgba(250, 93, 25, 0.5);
  background: var(--surface-container-low);
}

[data-theme="light"] .auth-form__input:focus {
  border-color: rgba(59, 130, 246, 0.5);
}

/* Invalid required field: red flush + shake */
.auth-form__input--error,
.auth-form__input--error:focus {
  border-color: #fb6a6a;
  background: var(--surface-container-low);
  box-shadow: 0 0 0 3px rgba(251, 106, 106, 0.18);
}

[data-theme="light"] .auth-form__input--error,
[data-theme="light"] .auth-form__input--error:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}

.auth-form__input--shake {
  animation: ttd-field-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes ttd-field-shake {
  0% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-11px, 0, 0); }
  30% { transform: translate3d(9px, 0, 0); }
  45% { transform: translate3d(-6px, 0, 0); }
  60% { transform: translate3d(4px, 0, 0); }
  75% { transform: translate3d(-2px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-form__input--shake {
    animation: none;
  }
}

/* Invalid required checkbox (e.g. terms agreement) */
.auth-form__checkbox--error {
  color: #fb6a6a;
}

.auth-form__checkbox--error input[type="checkbox"] {
  border-color: #fb6a6a;
  outline: 2px solid rgba(251, 106, 106, 0.35);
  outline-offset: 1px;
}

[data-theme="light"] .auth-form__checkbox--error {
  color: #dc2626;
}

[data-theme="light"] .auth-form__checkbox--error input[type="checkbox"] {
  border-color: #dc2626;
  outline-color: rgba(220, 38, 38, 0.35);
}

.auth-form__checkbox--shake {
  animation: ttd-field-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@media (prefers-reduced-motion: reduce) {
  .auth-form__checkbox--shake {
    animation: none;
  }
}

.auth-form__icon + .auth-form__input {
  padding-left: var(--spacing-12);
}

.auth-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: 0 var(--spacing-1);
}

.auth-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.auth-form__checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(90, 65, 56, 0.3);
  background: var(--surface-container);
  accent-color: var(--primary-container);
  cursor: pointer;
}

.auth-form__checkbox span {
  font-size: 11px;
  color: var(--on-surface-variant);
  transition: color var(--transition-fast);
}

.auth-form__checkbox span a {
  color: var(--on-surface);
}

.auth-form__checkbox span a:hover {
  color: var(--primary-container);
}

.auth-form__link {
  font-size: 11px;
  color: var(--on-surface-variant);
  letter-spacing: -0.01em;
}

.auth-form__link:hover {
  color: var(--primary-container);
}

/* FriendlyCaptcha widget styling */
.auth-form__captcha {
  margin-top: var(--spacing-3);
  display: flex;
  justify-content: center;
}

.frc-captcha {
  background: var(--surface-base);
  border: 1px solid var(--surface-elevated);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
}

.frc-container {
  font-family: var(--font-mono);
  font-size: var(--body-sm);
}

[data-theme="light"] .frc-captcha {
  background: var(--surface-base);
  border-color: rgba(90, 65, 56, 0.15);
}

.auth-form__submit {
  width: 100%;
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--body-md);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(250, 93, 25, 0.1);
}

.auth-form__submit:active {
  transform: scale(0.98);
}

.auth-form__divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.auth-form__divider::before,
.auth-form__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(90, 65, 56, 0.1);
}

.auth-form__divider span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--outline-variant);
}

.auth-form__alt-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-4);
  background: transparent;
  border: 1px solid rgba(90, 65, 56, 0.2);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--body-sm);
  transition: all var(--transition-fast);
}

.auth-form__alt-link:hover {
  border-color: rgba(250, 93, 25, 0.4);
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.auth-form__alt-link span {
  color: var(--primary-container);
  margin-left: var(--spacing-2);
}

.auth-form__alt-text {
  text-align: center;
  font-size: var(--body-md);
  color: var(--on-surface-variant);
}

.auth-form__alt-action {
  color: var(--primary-container);
  font-weight: 600;
  margin-left: var(--spacing-1);
}

.auth-form__alt-action:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth-form__error {
  padding: var(--spacing-3) var(--spacing-4);
  background: rgba(147, 0, 10, 0.15);
  border: 1px solid rgba(255, 180, 171, 0.2);
  border-radius: var(--radius-md);
  color: #ffb4ab;
  font-size: var(--body-sm);
  display: none;
}

[data-theme="light"] .auth-form__error {
  background: rgba(185, 28, 28, 0.1);
  border: 1px solid rgba(185, 28, 28, 0.25);
  color: #b91c1c;
}

.auth-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-6) var(--spacing-4);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--body-sm);
}

.auth-form__success-icon {
  font-size: 2.5rem;
  color: var(--primary-container);
}

[data-theme="light"] .auth-form__success-icon {
  color: var(--primary-container);
}

/* Auth Layout (signup two-column) */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 960px;
  width: 100%;
  z-index: 1;
}

/* Editorial Panel */
.auth-editorial {
  display: none;
}

.auth-editorial__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--spacing-6);
}

.auth-editorial__title span {
  color: var(--primary-container);
}

.auth-editorial__desc {
  font-size: var(--body-lg);
  color: var(--on-surface-variant);
  line-height: 1.6;
  margin-bottom: var(--spacing-8);
  opacity: 0.8;
}

.auth-editorial__features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.auth-editorial__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.auth-editorial__feature-icon {
  font-size: 24px;
  line-height: 1;
  color: var(--primary-container);
  flex-shrink: 0;
  margin-top: 2px;
}

.auth-editorial__feature-title {
  font-size: var(--body-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface);
  margin-bottom: var(--spacing-1);
}

.auth-editorial__feature-desc {
  font-size: var(--body-sm);
  color: var(--on-surface-variant);
}

@media (min-width: 1024px) {
  .auth-layout {
    grid-template-columns: 5fr 7fr;
  }

  .auth-editorial {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-12);
    background: var(--surface-container-lowest);
    border-right: 1px solid rgba(90, 65, 56, 0.1);
  }
}