/* Auth Page Layout */
.auth-page {
  max-width: 450px;
  margin: var(--space-16) auto;
  padding: var(--space-8);
}

.auth-page h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  text-align: center;
}

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

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

.auth-form label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  padding: var(--space-form-input-padding) var(--space-3);
  border: 1px solid var(--color-border-secondary);
  border-radius: 6px;
  font-size: 1rem;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-form input::placeholder {
  color: var(--color-text-muted);
}

/* OTP Input */
.auth-form .otp-input {
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 1.5rem;
  font-family: monospace;
  padding: var(--space-3) var(--space-4);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.auth-link {
  text-align: center;
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-neutral-500);
}

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

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

.auth-link .btn-link {
  background: none;
  border: none;
  color: var(--color-primary-500);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}

.auth-link .btn-link:hover {
  text-decoration: underline;
}

/* Auth Description */
.auth-description {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
}

/* Field Help Text */
.field-help {
  margin-top: var(--space-1);
  font-size: 0.75rem;
  text-align: right;
}

.field-help a {
  color: var(--color-primary-500);
  text-decoration: none;
}

.field-help a:hover {
  text-decoration: underline;
}

/* Error Messages */
.error-messages {
  background: var(--color-error-50);
  border: 1px solid var(--color-error-200);
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}

.error-messages p {
  color: var(--color-error-800);
  font-size: 0.875rem;
  margin: var(--space-1) 0;
}

/* Flash Messages */
.flash-notice,
.flash-alert {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: 0.875rem;
}

.flash-notice {
  background: var(--color-success-50);
  color: var(--color-success-800);
}

.flash-alert {
  background: var(--color-error-50);
  color: var(--color-error-800);
}

/* Buttons */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2-5) var(--space-4);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-decoration: none;
  border: none;
}

.btn-primary {
  background: var(--color-primary-500);
  color: var(--color-neutral-white);
}

.btn-primary:hover {
  background: var(--color-primary-600);
}

.btn-secondary {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.btn-secondary:hover {
  background: var(--color-neutral-200);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.workspace-status {
  font-size: 0.875rem;
  color: var(--color-success-600);
  background: var(--color-success-50);
  padding: var(--space-1-5) var(--space-3);
  border-radius: 4px;
}