*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1d1d1f;background:#f2f2f0}
.tela{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;position:relative}
.faixa{position:absolute;inset:0 0 auto 0;height:46vh;background:#222;border-bottom:5px solid #C00000}
.cartao{position:relative;width:100%;max-width:380px;background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22);padding:28px 26px 24px}
.logo{display:flex;justify-content:center;margin:-4px 0 18px}
.logo img{width:165px;height:auto;image-rendering:auto}
h1{font-size:19px;margin:0 0 14px;color:#222}
label{display:block;font-size:13px;font-weight:600;color:#444;margin-bottom:12px}
input{display:block;width:100%;margin-top:5px;font:inherit;padding:11px 12px;border:1px solid #c9c9c9;border-radius:9px;background:#fff}
input:focus{outline:none;border-color:#C00000;box-shadow:0 0 0 3px rgba(192,0,0,.14)}
button{width:100%;font:inherit;font-weight:700;padding:12px;border:0;border-radius:9px;background:#C00000;color:#fff;cursor:pointer;margin-top:6px}
button:hover{background:#a50000}
button:disabled{opacity:.6;cursor:wait}
button.link{background:none;color:#555;font-weight:500;text-decoration:underline;margin-top:10px}
.erro{min-height:1.2em;color:#b00020;font-size:14px;margin:4px 0 6px}
.dica{font-size:14px;color:#555;margin:-6px 0 14px}
.rodape{position:relative;margin-top:22px;font-size:12px;color:#777;letter-spacing:.04em;text-transform:uppercase}