/* Paginas de acesso (login, cadastro por convite, termos): abertas sem login. */
:root {
  --fundo: #f5f6f8; --superficie: #fff; --borda: #d0d5dd; --texto: #101828; --texto-2: #344054; --texto-3: #667085;
  --primaria: #2563eb; --primaria-hover: #1d4ed8; --primaria-suave: #eff4ff; --perigo: #b42318; --perigo-suave: #fef3f2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0c111d; --superficie: #161b26; --borda: #333a4b; --texto: #f5f5f6; --texto-2: #cecfd2; --texto-3: #94969c;
    --primaria: #4f86f7; --primaria-hover: #6b9bff; --primaria-suave: #172446; --perigo: #f97066; --perigo-suave: #2d1514;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5;
  background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: 400px; }
main.largo { max-width: 720px; }
.marca { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
h1 { font-size: 22px; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 16px; margin: 20px 0 6px; }
.marca p { margin: 0; color: var(--texto-3); }
form, .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 4px 12px rgba(16,24,40,0.06); }
.cartao { display: block; color: var(--texto-2); }
label { font-size: 13px; font-weight: 550; display: block; margin-bottom: 6px; }
.ajuda { font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.senha { position: relative; }
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%; font: inherit; height: 40px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
}
.senha input { padding-right: 70px; }
input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
.mostrar { position: absolute; right: 6px; top: 6px; height: 28px; border: 0; background: none; color: var(--texto-3); cursor: pointer; font: inherit; font-size: 12px; padding: 0 8px; border-radius: 6px; }
.mostrar:hover { color: var(--texto); }
.aceite { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13px; cursor: pointer; }
.aceite input { margin-top: 3px; accent-color: var(--primaria); }
button[type="submit"] {
  height: 40px; font: inherit; font-weight: 600; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--primaria); color: #fff;
}
button[type="submit"]:hover { background: var(--primaria-hover); }
a { color: var(--primaria); }
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }
.erro { display: flex; gap: 8px; align-items: flex-start; background: var(--perigo-suave); color: var(--perigo); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.rodape { text-align: center; color: var(--texto-3); font-size: 12px; margin-top: 16px; }