:root { color-scheme: light dark; --verde: #15803d; --borda: #8884; --suave: #8882; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, sans-serif; }
main { max-width: 680px; margin: auto; padding: 16px; }
h1 { margin: 8px 0 12px; font-size: 1.5rem; }
h2 { margin: 28px 0 10px; font-size: 1.15rem; }
label { display: block; font-size: .875rem; font-weight: 600; }
input, select, button { font: inherit; min-height: 44px; border-radius: 8px; border: 1px solid var(--borda); padding: 8px 10px; }
input, select { width: 100%; font-weight: 400; margin-top: 4px; background: transparent; color: inherit; }
select option { color: #111; }
button { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; }
button.secundario { background: transparent; color: inherit; border-color: var(--borda); font-weight: 400; }
.linha { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.linha input { margin-top: 0; }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.marca { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-weight: 400; }
.marca input { width: 20px; min-height: 20px; margin: 0; }
.erro { color: #dc2626; margin: 8px 0 0; }
#confirma { padding: 4px 0 8px; }
#total { font-weight: 600; }
#lista { list-style: none; margin: 0; padding: 0; }
#lista li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borda); }
#lista li > div { flex: 1; min-width: 0; }
#lista strong, #lista small { display: block; overflow-wrap: anywhere; }
#lista small { opacity: .75; }
.ganho { color: var(--verde); font-weight: 600; }
@media (max-width: 420px) { .grade { grid-template-columns: 1fr; } }
.entrar { max-width: 420px; margin: 20vh auto 0; padding: 16px; text-align: center; }
.topo { align-items: center; margin-top: 0; }
.topo h1 { flex: 1; margin: 0; }