/* login.css — schermata di accesso. */

@layer pages {
  .login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-bg);
  }

  .login-card {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .login-card__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
  }

  .login-card__brand h1 {
    font-size: var(--fs-24);
  }

  .login-card__subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-14);
  }

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

  .login-form .btn {
    width: 100%;
    margin-top: var(--space-2);
  }

  .login-form__aside {
    text-align: center;
    font-size: var(--fs-14);
  }

  .login-wait {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-14);
  }

  .login-wait strong {
    color: var(--color-text);
    font-variant-numeric: var(--numeric-variant);
  }
  /* Pagine di sistema (404 ecc.) che riusano la stessa impaginazione. */
  .system-message {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
}