/* @layer-wrapped:pages */
/* Telas de conta: autenticacao em duas etapas (setup forcado + gerenciamento).
   Paginas standalone (fora do shell do dashboard), montadas sobre o head padrao:
   tokens semanticos cuidam do claro/escuro sem regra extra aqui. */
@layer pages {
  .account-2fa-page .account-2fa-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .account-2fa-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .account-2fa-brand {
    font-size: var(--font-size-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
  }

  .account-2fa-card {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .account-2fa-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  .account-2fa-heading h1 {
    margin: 0;
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
  }

  .account-2fa-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  .account-2fa-status--on {
    background: var(--color-success-soft);
    color: var(--color-success-text);
  }

  .account-2fa-status--off {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
  }

  .account-2fa-lead {
    margin: 0;
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
  }

  .account-2fa-steps {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-text);
  }

  .account-2fa-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .account-2fa-section h2 {
    margin: 0;
    font-size: var(--font-size-lg);
  }

  .account-2fa-section p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
  }

  .account-2fa-section--danger {
    border-color: var(--color-danger-soft);
  }

  .account-2fa-section--danger h2,
  .account-2fa-warning {
    color: var(--color-danger-text);
  }

  .account-2fa-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
  }

  .account-2fa-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .account-2fa-field label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
  }

  .account-2fa-field input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-solid);
    color: var(--color-text);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-md);
    min-width: 220px;
  }

  .account-2fa-field input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
  }

  .account-2fa-code-input {
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-xl);
    letter-spacing: 0.35em;
    text-align: center;
    max-width: 220px;
  }

  /* O QR precisa de fundo claro fixo para ser lido pelo celular tambem no tema
     escuro — mesmo racional do backplate de logos escuros no navy. */
  .account-2fa-qr {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }

  .account-2fa-qr img {
    display: block;
    width: 220px;
    height: auto;
  }

  .account-2fa-secret {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }

  .account-2fa-secret code {
    font-family: var(--font-mono, monospace);
    background: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
    color: var(--color-text);
  }

  .account-2fa-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    background: var(--color-surface-solid);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-family: var(--font-mono, monospace);
    font-size: var(--font-size-md);
    color: var(--color-text);
  }

  .account-2fa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .account-2fa-danger-btn {
    background: var(--color-danger);
    border: 1px solid var(--color-danger);
    color: var(--color-danger-fg);
  }

  .account-2fa-danger-btn:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
  }

  .account-2fa-footer {
    display: flex;
    justify-content: center;
  }

  .account-2fa-footer a {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  @media (max-width: 560px) {
    .account-2fa-card {
      padding: var(--space-4);
    }

    .account-2fa-codes {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}