@layer components {
  .auth-container {
    align-items: center;
    background:
      radial-gradient(ellipse 80% 60% at 50% 40%, rgba(184, 134, 11, 0.07), transparent),
      radial-gradient(ellipse 60% 50% at 30% 60%, rgba(92, 61, 46, 0.05), transparent);
    display: flex;
    justify-content: center;
    min-block-size: 100dvh;
    padding: var(--space-3xl);
  }

  .auth-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    inline-size: 100%;
    max-inline-size: 400px;
    padding: var(--space-4xl);
  }

  .auth-title {
    color: var(--color-bark);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-block-end: var(--space-2xl);
    text-align: center;
  }

  .auth-alert {
    background: var(--color-alert-bg);
    border-radius: var(--radius-sm);
    color: var(--color-alert-text);
    font-size: 0.875rem;
    margin-block-end: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
  }

  .auth-errors {
    background: var(--color-error-bg);
    border-radius: var(--radius-sm);
    color: var(--color-error-text);
    font-size: 0.875rem;
    margin-block-end: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
  }

  .auth-errors p + p {
    margin-block-start: var(--space-xs);
  }

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

  .auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .auth-field label {
    color: var(--color-bark);
    font-size: 0.875rem;
    font-weight: 600;
  }

  .auth-field input {
    background: var(--color-sand);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-bark);
    font-size: 0.9375rem;
    inline-size: 100%;
    padding: 0.625rem 0.875rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .auth-field input {
      transition: border-color var(--transition-normal), background var(--transition-normal);
    }
  }

  .auth-field input:focus-visible {
    background: var(--color-white);
    border-color: var(--color-gold);
    outline: none;
  }

  .auth-field input:user-valid:not(:focus-visible) {
    border-color: oklch(55% 0.15 145);
  }

  .auth-field input:user-invalid:not(:focus-visible) {
    border-color: oklch(55% 0.2 25);
  }

  .auth-footer {
    color: var(--color-bark-60);
    font-size: 0.875rem;
    margin-block-start: var(--space-2xl);
    text-align: center;
  }

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

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