.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--gap);

  background-image: var(--bg-image);
  background-size: var(--bg-image-size);
  background-position: var(--bg-image-position);

  .auth-box {
    width: min(440px, 100%);
    padding: var(--gap-lg);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);

    .back-link {
      display: flex;
      align-items: center;
      gap: .4rem;
      font-family: var(--font-heading);
      font-size: .8rem;
      font-weight: 700;
      color: var(--text-dim);
      margin-bottom: var(--gap-lg);

      &:hover {
        color: var(--text-warm);
      }
    }

    .auth-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .6rem;
      margin-bottom: var(--gap-lg);
      text-align: center;

      img {
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
      }

      h1 {
        font-family: var(--font-display);
        font-size: 1.6rem;
        color: var(--text);

        em {
          color: var(--color-accent-light);
          font-style: normal;
        }
      }

      p {
        font-family: var(--font-italic);
        font-style: italic;
        color: var(--text-dim);
        font-size: .9rem;
      }
    }

    .auth-error {
      display: none;
      margin-bottom: var(--gap);
      padding: .75rem 1rem;
      color: var(--danger);
      text-align: center;
      font-family: var(--font-heading);
      font-size: .875rem;
      font-weight: 700;
      background: rgba(var(--c-danger), .1);
      border: .1rem solid var(--danger);
      border-radius: var(--radius-sm);
    }

    .terms-note {
      font-family: var(--font-heading);
      font-size: .58rem;
      color: var(--text-dim);
      text-align: center;
      margin-top: var(--gap-sm);
      line-height: 1.8;
      letter-spacing: .15em;
    }

    .auth-footer {
      text-align: center;
      margin-top: var(--gap);
      font-family: var(--font-heading);
      font-size: .875rem;
      color: var(--text-dim);

      a {
        color: var(--color-accent-light);
      }
    }
  }
}