:root { --fundo: #07090d; --cartao: #10141c; --linha: #232a38; --texto: #f2f5fa; --apagado: #8d97aa; --azul: #4da3ff; --vermelho: #ff6b61; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--fundo); color: var(--texto);
  font: 16px/1.45 "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding: 20px; -webkit-font-smoothing: antialiased; }
.cartao { width: 100%; max-width: 380px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 26px 22px; text-align: center; }
h1 { font-size: 22px; margin: 0 0 6px; } .apagado { color: var(--apagado); margin: 0 0 18px; font-size: 14px; }
.pin { width: 100%; background: #0a0d13; border: 1px solid var(--linha); color: var(--texto); border-radius: 12px; padding: 14px 10px; font-size: 34px; letter-spacing: .4em;
  text-align: center; font-variant-numeric: tabular-nums; }
.pin:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.botao { margin-top: 12px; width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--azul); color: #04121f; font: 700 16px inherit; cursor: pointer; }
.botao:disabled { opacity: .45; } .msg { min-height: 22px; margin: 14px 0 0; color: var(--vermelho); font-size: 14px; }