:root {
  --fundo: #fbfaf7;
  --texto: #1d2433;
  --suave: #5b6475;
  --linha: #c9d3e3;
  --destaque: #1a2a6c;
  --destaque-texto: #ffffff;
  --erro: #b3261e;
  --erro-fundo: #fde7e5;
  --cartao: #ffffff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #14171f;
    --texto: #eef1f6;
    --suave: #a7b0c0;
    --linha: #3a4458;
    --destaque: #9fb3ff;
    --destaque-texto: #10142a;
    --erro: #ffb4ab;
    --erro-fundo: #3d1714;
    --cartao: #1d212c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 20px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 960px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.6rem; margin: 0.5rem 0 1rem; }
p { margin: 0.5rem 0; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
button, .botao {
  min-height: 56px;
  min-width: 56px;
  padding: 0 24px;
  font: inherit;
  font-weight: 600;
  border-radius: 14px;
  border: 2px solid var(--destaque);
  background: var(--cartao);
  color: var(--destaque);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
button.principal, .botao.principal { background: var(--destaque); color: var(--destaque-texto); }
button:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, .botao:focus-visible, textarea:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; }
.progresso { height: 14px; background: var(--linha); border-radius: 7px; overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--destaque); width: 0; transition: width 0.3s; }
.aviso { padding: 12px 16px; border-radius: 12px; background: var(--erro-fundo); color: var(--erro); }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 16px; }
.escondido { display: none !important; }