:root { --azul: #1f4e79; --borda: #dee2e6; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; color: #212529; }
main { max-width: 900px; margin: 0 auto; padding: 12px; }

button { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid #999; background: #fff; padding: 8px 14px; }
.azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.grande { flex: 1; }
.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.vazio { padding: 16px; color: #6c757d; text-align: center; }

.login { background: #f1f3f5; }
.cartao { max-width: 340px; margin: 15vh auto 0; padding: 24px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; }
.cartao h1 { margin: 0 0 16px; font-size: 1.4rem; }
.cartao label { display: block; margin-bottom: 12px; }
.cartao input { display: block; width: 100%; padding: 8px; margin-top: 4px; font: inherit; border: 1px solid var(--borda); border-radius: 6px; }
.cartao button { width: 100%; padding: 10px; }
.erro { color: #dc3545; margin: 0 0 12px; }