* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; color: #17202c; background: #10233a; font-family: ui-sans-serif, system-ui, sans-serif; }
.gateway-card { width: min(100%, 460px); padding: 36px; border-radius: 14px; background: #fff; box-shadow: 0 20px 60px #0003; }
.gateway-logo { display: block; width: 260px; max-width: 100%; margin-bottom: 30px; }
.gateway-logo svg { display: block; width: 100%; }
h1 { margin: 0 0 12px; color: #10233a; font-size: 1.7rem; }
p { color: #687585; line-height: 1.55; }
form { display: grid; gap: 10px; margin: 24px 0; }
label { font-size: .85rem; font-weight: 750; }
input,button { min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid #c5ced7; border-radius: 8px; font: inherit; }
button { margin-top: 6px; color: #fff; border-color: #183554; background: #183554; font-weight: 750; cursor: pointer; }
:focus-visible { outline: 3px solid #78a7d2; outline-offset: 3px; }
.error { margin: 0; color: #b52a2a; }
small { color: #687585; line-height: 1.5; }
@media(max-width:420px) { body { padding: 16px; } .gateway-card { padding: 26px 22px; } }