:root { color-scheme: light dark; --fundo: #f4f5f7; --caixa: #ffffff; --texto: #1d2330; --borda: #b8bfcc; --acento: #1f5fbf; --erro: #a8231a; }
@media (prefers-color-scheme: dark) {
  :root { --fundo: #14171d; --caixa: #1e232c; --texto: #e9ecf1; --borda: #4a5262; --acento: #6aa3ff; --erro: #ff8a80; }
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--fundo); color: var(--texto); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.caixa { width: 100%; max-width: 24rem; margin: 1rem; padding: 1.5rem; background: var(--caixa);
  border: 1px solid var(--borda); border-radius: 0.75rem; }
h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
.sub { margin: 0 0 1.25rem; }
label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 600; }
input { width: 100%; font-size: 1rem; padding: 0.75rem; border: 1px solid var(--borda); border-radius: 0.5rem;
  background: var(--fundo); color: var(--texto); }
input:focus-visible, button:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
button { width: 100%; margin-top: 1.25rem; min-height: 3rem; font-size: 1rem; font-weight: 600; border: 0;
  border-radius: 0.5rem; background: var(--acento); color: #ffffff; cursor: pointer; }
button[disabled] { opacity: 0.6; cursor: wait; }
.mensagem { min-height: 1.5rem; margin: 1rem 0 0; color: var(--erro); font-weight: 600; }