/**
 * auth.css
 * Telas de login (auth.js) e cadastro (registro.js) — cartão centralizado.
 */
.auth-screen {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-help {
  position: absolute; top: 16px; left: 16px; z-index: 3;
}

.auth-card {
  background: var(--giz); color: var(--preto);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 36px 32px;
  max-width: 380px; width: 100%;
  text-align: center;
}

.auth-logo {
  display: block; width: 100%; max-width: 230px; height: auto;
  margin: 0 auto 18px;
}
.auth-logo-sm { max-width: 132px; margin-bottom: 10px; }

.auth-card h1 { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 0.04em; margin: 0; }
.auth-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra);
  margin: 4px 0 22px;
}

#loginForm, #regForm,
#phoneAskForm, #phoneCodeForm, #phonePassForm { text-align: left; }
#loginForm label, #regForm label,
#phoneAskForm label, #phoneCodeForm label, #phonePassForm label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(23, 21, 18, 0.55); margin-bottom: 6px;
}
#loginForm input, #regForm input,
#phoneAskForm input, #phoneCodeForm input, #phonePassForm input {
  width: 100%;
  background: rgba(23, 21, 18, 0.06);
  border: 1px solid rgba(23, 21, 18, 0.18);
  color: var(--preto);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 0.98rem;
  font-family: 'Inter', sans-serif;
  margin-bottom: 12px;
}
#loginForm .btn-block, #regForm .btn-block { margin-top: 4px; }

.auth-switch { font-size: 0.82rem; color: rgba(23, 21, 18, 0.6); margin: 14px 0 0; }
.auth-note { font-size: 0.75rem; color: rgba(23, 21, 18, 0.45); margin: 14px 0 0; line-height: 1.5; }

.auth-install { margin-top: 14px; }
.auth-hint {
  font-size: 0.76rem; color: rgba(23, 21, 18, 0.55); line-height: 1.5;
  margin: 14px 0 0; background: rgba(23, 21, 18, 0.04);
  border: 1px dashed rgba(23, 21, 18, 0.18); border-radius: 8px; padding: 8px 10px;
}
.auth-hint b { color: rgba(23, 21, 18, 0.75); }
.auth-demo {
  font-size: 0.74rem; background: rgba(35, 77, 53, 0.08); border: 1px solid rgba(35, 77, 53, 0.2);
  color: var(--campo); border-radius: 8px; padding: 8px 10px; margin: 12px 0 0; line-height: 1.5;
}
.auth-demo b { color: var(--campo); }

.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: inherit; font-weight: 700;
  color: var(--terra); text-decoration: underline;
}
.auth-reset { display: block; margin: 18px auto 0; font-size: 0.8rem; color: rgba(23, 21, 18, 0.4); }

.auth-modes {
  display: flex; gap: 6px; margin: 0 0 16px;
  background: rgba(23, 21, 18, 0.06); border-radius: 10px; padding: 4px;
}
.auth-modes button {
  flex: 1; border: none; background: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: rgba(23, 21, 18, 0.55); padding: 8px 10px; border-radius: 7px;
}
.auth-modes button.on { background: var(--branco); color: var(--campo); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.auth-demo-inline { color: rgba(23, 21, 18, 0.45); }

#loginForm label.auth-keep,
#phoneAskForm label.auth-keep,
#phoneCodeForm label.auth-keep,
#phonePassForm label.auth-keep {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.82rem; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: rgba(23, 21, 18, 0.7); margin: 2px 0 14px;
}
#loginForm label.auth-keep input,
#phoneAskForm label.auth-keep input,
#phoneCodeForm label.auth-keep input,
#phonePassForm label.auth-keep input {
  width: 16px; height: 16px; margin: 0; accent-color: var(--campo); flex: none;
}
.auth-passkey { margin-top: 10px; }