* { box-sizing: border-box; }
body { margin: 0; padding: 32px 16px; background: #f3f4f6; color: #20252d; font: 16px/1.5 system-ui, sans-serif; }
main { width: 100%; max-width: 460px; margin: 3vh auto; padding: 28px; background: white; border: 1px solid #d9dee5; border-radius: 10px; }
.brand { margin: 0; font-weight: 700; color: #46566b; }
h1 { margin-top: 12px; font-size: 26px; }
label { display: block; margin-top: 18px; font-weight: 600; }
input:not([type=hidden]), button { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 5px; font: inherit; }
input:not([type=hidden]) { border: 1px solid #8995a5; margin-top: 5px; }
button { margin-top: 22px; border: 0; color: white; background: #234b75; cursor: pointer; }
button:hover { background: #193b5e; }
.secondary { background: #525c69; }
a { color: #234b75; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid #5388bb; outline-offset: 3px; }
.notice { border-left: 3px solid #927321; padding: 12px; background: #fff7df; }
.hint { font-size: 14px; color: #535e6d; }
@media (max-width: 400px) { main { padding: 20px; } }