/* Porta da InteliNinja: as cores e letras do Ninja White (vitrine/estatico/estilo.css). */
:root { --fundo: #0A0A0C; --cartao: #141418; --borda: #2A2A31; --creme: #F2EFE9; --apagado: #8B8B95; --lamina: #FF2E4D; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--fundo); color: var(--creme); font: 400 17px/1.5 'Roboto Condensed', 'Arial Narrow', sans-serif; display: grid; place-items: center; padding: 16px; }
.porta { width: 100%; max-width: 380px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 28px 22px; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca i { width: 38px; height: 38px; border-radius: 9px; background: var(--lamina); color: #fff; font-style: normal; font-weight: 700; font-size: 22px; display: grid; place-items: center; }
.marca b { font: 400 26px/1 'Anton', Impact, sans-serif; letter-spacing: 0.04em; }
.sub { color: var(--apagado); margin: 14px 0 22px; }
.botao { width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: var(--lamina); color: #fff; font: 700 17px 'Roboto Condensed', sans-serif; cursor: pointer; }
.botao:disabled { opacity: 0.5; }
label { display: block; margin: 18px 0 6px; color: var(--apagado); font-size: 15px; }
input { width: 100%; min-height: 52px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--borda); background: #0E0E12; color: var(--creme); font: 400 28px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: 0.3em; text-align: center; }
input:focus { outline: 2px solid var(--lamina); outline-offset: 1px; }
.msg { min-height: 1.5em; margin: 14px 0 0; color: var(--apagado); font-size: 15px; }
.msg.erro { color: #FF6B80; }