:root{
  --verde:#0e7c6b; --verde-escuro:#0a5d50; --verde-claro:#e8f2f0;
  --fundo:#fafaf8; --papel:#fff; --texto:#1c1c1a; --suave:#5f6360; --borda:#e6e6e2;
  --erro:#b3261e;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--fundo); color:var(--texto); line-height:1.6;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:grid; place-items:center; padding:24px;
}
a{color:var(--verde)}
.cartao{
  background:var(--papel); border:1px solid var(--borda); border-radius:20px;
  padding:44px 36px; max-width:460px; width:100%;
  box-shadow:0 1px 2px rgba(28,28,26,.04),0 12px 32px rgba(28,28,26,.06);
}
.marca{display:flex;align-items:center;gap:10px;justify-content:center;font-weight:650;font-size:1.15rem;
       letter-spacing:-.02em;text-decoration:none;color:var(--texto);margin-bottom:26px}
.marca svg{width:28px;height:28px;color:var(--verde)}
h1{font-size:1.45rem;font-weight:650;letter-spacing:-.025em;margin-bottom:10px;line-height:1.2}
.apoio{color:var(--suave);font-size:.98rem;margin-bottom:24px}
label{display:block;font-size:.9rem;font-weight:550;margin-bottom:6px}
.campo{display:flex;align-items:center;border:1px solid var(--borda);border-radius:10px;background:var(--fundo);
       overflow:hidden;transition:border-color .2s}
.campo:focus-within{border-color:var(--verde)}
.campo input{flex:1;min-width:0;border:0;background:transparent;padding:12px 14px;font:inherit;color:inherit;outline:none}
.campo .sufixo{padding:12px 14px 12px 0;color:var(--suave);font-size:.92rem;white-space:nowrap}
.dica{margin-top:8px;font-size:.85rem;color:var(--suave)}
.erro{margin-top:10px;font-size:.88rem;color:var(--erro)}
.erro[hidden]{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;
     font:inherit;font-weight:550;text-decoration:none;cursor:pointer;transition:background .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-cheio{background:var(--verde);color:#fff;padding:13px 22px;width:100%;margin-top:18px}
.btn-cheio:hover{background:var(--verde-escuro)}
.rodape{margin-top:28px;padding-top:22px;border-top:1px solid var(--borda);font-size:.85rem;color:var(--suave)}
.aviso{background:var(--verde-claro);color:var(--verde-escuro);border-radius:10px;padding:12px 14px;
       font-size:.9rem;margin-bottom:20px}
@media(max-width:480px){.cartao{padding:32px 22px}}