:root { --verde:#1F4E3D; --fundo:#F4F6F5; --texto:#1d2421; --mudo:#66716c; --linha:#DDE3E0; --aviso:#FFF4D6; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 "Segoe UI", Arial, sans-serif; color:var(--texto); background:var(--fundo); }
.faixa-teste { background:var(--aviso); color:#6b5300; text-align:center; font-size:13px; padding:6px 16px; border-bottom:1px solid #f0dfa8; }
.centro { min-height:calc(100vh - 34px); display:grid; place-items:center; padding:24px 16px; }
.cartao { background:#fff; border:1px solid var(--linha); border-radius:10px; padding:28px; width:100%; max-width:380px; text-align:center; }
.cartao.largo { max-width:720px; text-align:left; }
.oculto { display:none; }
h1 { font-size:20px; margin:0 0 4px; }
.mudo { color:var(--mudo); margin:0 0 20px; }
.nota { color:var(--mudo); font-size:13px; margin:16px 0 0; }
.botao { font:inherit; padding:9px 16px; border-radius:6px; border:1px solid var(--linha); background:#fff; cursor:pointer; }
.botao.principal { background:var(--verde); border-color:var(--verde); color:#fff; width:100%; font-weight:600; }
.botao:focus-visible { outline:2px solid var(--verde); outline-offset:2px; }
.topo { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }