:root {
  --fundo: #f4f4f2;
  --cartao: #ffffff;
  --texto: #1d1d1b;
  --suave: #5c5c58;
  --destaque: #b8860b;
  --erro: #a32020;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141413;
    --cartao: #1f1f1d;
    --texto: #f0efe9;
    --suave: #a9a8a1;
    --destaque: #e0b040;
    --erro: #ff8a80;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.cartao {
  width: 100%;
  max-width: 440px;
  padding: 28px;
  border-radius: 14px;
  background: var(--cartao);
  box-shadow: 0 2px 16px rgb(0 0 0 / 0.08);
}

h1 { margin: 0 0 12px; font-size: 1.35rem; }

.erro { color: var(--erro); }

.acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

button {
  font: inherit;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid var(--destaque);
}

button:disabled { opacity: 0.6; cursor: wait; }

.primario { background: var(--destaque); color: #1d1d1b; font-weight: 600; }

.secundario { background: transparent; color: var(--texto); }

.rodape { margin-top: 24px; }

.link { border: 0; padding: 0; background: none; color: var(--suave); text-decoration: underline; }