:root { color-scheme: light dark; --borda: #8884; --sutil: #888; --destaque: #2563eb; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: Canvas; color: CanvasText; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--borda); }
header h1 { margin: 0; font-size: 1.25rem; }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }
form { display: grid; gap: .75rem; padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--borda); border-radius: 8px; }
form h2, form h3 { margin: 0; }
label { display: grid; gap: .25rem; font-weight: 600; }
input, textarea, select, button { font: inherit; padding: .5rem; border: 1px solid var(--borda); border-radius: 6px; background: Field; color: FieldText; }
button { cursor: pointer; background: var(--destaque); color: #fff; border: 0; justify-self: start; }
button:disabled { opacity: .6; }
#voltar, #sair { background: transparent; color: var(--destaque); padding: 0; }
a { color: var(--destaque); }
ul, ol { padding-left: 1.25rem; }
li { margin: .35rem 0; }
article { border: 1px solid var(--borda); border-radius: 8px; padding: .5rem 1rem; margin-bottom: 1rem; }
article h4 { margin: .5rem 0; overflow-wrap: anywhere; }
code { margin-left: .5rem; font-size: .8rem; color: var(--sutil); }
.sutil { color: var(--sutil); }
#mensagem { min-height: 1.5rem; font-weight: 600; }