@layer pages {
  .auth-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-16) var(--space-4) var(--space-6);
  }

  .auth-page__container {
    width: 100%;
    max-width: 28rem;
  }

  .devise {
    .devise__header {
      margin-bottom: var(--space-6);
      .devise__title {
        text-align: center;
      }
      .devise__subtitle {
        font-size: var(--text-base);
        color: var(--color-gray-600);
        text-align: center;
      }
    }

    .devise__footer {
      margin-top: 1.25rem;
      .devise__footer-links {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
      }
    }
  }

  .auth-links__link {
    color: var(--color-link);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
  }

  .auth-links__link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  .auth-links__link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
}