:root {
  --fundo: #f6f7f5;
  --texto: #1d2420;
  --suave: #5c6862;
  --marca: #1f5f4a;
  --erro: #b3261e;
  --cartao: #ffffff;
  --borda: #d9ded9;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121614;
    --texto: #e6ebe8;
    --suave: #9aa6a0;
    --marca: #6fc2a2;
    --erro: #f2b8b5;
    --cartao: #1b211e;
    --borda: #2c3531;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

header { padding: 16px 0 8px; }
h1 { margin: 0; font-size: 1.6rem; color: var(--marca); }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
.meta { margin: 2px 0 0; color: var(--suave); font-size: 0.85rem; }

section {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
}

label { display: block; margin: 12px 0; font-weight: 600; }
input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 400;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
}

button {
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  border: 0;
  background: var(--marca);
  color: #fff;
}
button.secundario { background: transparent; color: var(--marca); border: 1px solid var(--marca); }
button:disabled { opacity: 0.5; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 16px 0 0; }
dt { color: var(--suave); }
dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.erro { color: var(--erro); font-weight: 600; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; max-height: 50vh; overflow: auto; }
code { font-size: 0.9em; }