.account-wrap{display:grid;place-items:center;padding:32px 0 72px;min-height:0;flex:1;width:100%}
.account-card{width:min(100%,420px);background:#111;border:4px solid #000;border-radius:16px;box-shadow:6px 6px 0 #000;padding:22px 20px 24px;display:grid;gap:12px}
.account-card h1{font:400 clamp(28px,5vw,40px)/1 "Archivo Black",sans-serif;margin:0}
.account-lead{color:#bdbdbd;font-weight:800;margin:0}
.account-form{display:grid;gap:12px;margin-top:6px}
.account-form label{display:grid;gap:6px;font:800 12px Archivo,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#cfcfcf}
.account-form input{font:500 16px Archivo,sans-serif;padding:12px 14px;border:3px solid #000;border-radius:10px;background:#fff;color:#000}
.account-form .btn{width:100%;margin-top:4px}
.hint-inline{font:500 11px Archivo,sans-serif;letter-spacing:0;text-transform:none;color:#8f8f8f;font-weight:500}
.account-msg{min-height:1.3em;font-weight:800;margin:0;padding-bottom:2px}
.account-msg.err{color:var(--pink)}
.account-msg.ok{color:var(--acid)}
.account-switch{font-weight:800;color:#9a9a9a;margin:4px 0 0}
.account-switch a{color:var(--acid)}
.account-email{font:400 18px "Archivo Black",sans-serif;color:var(--acid);word-break:break-all}

.account-wrap,.account-card{min-width:0;max-width:100%}
.account-card input{min-width:0;max-width:100%}
@media(max-width:560px){
 .account-wrap{padding:24px max(8px,env(safe-area-inset-left,0px)) 48px max(8px,env(safe-area-inset-right,0px))}
 .account-card{padding:22px 16px 24px}
 .account-card .btn-row{flex-direction:column;width:100%;align-items:stretch}
 .account-card .btn-row .btn{width:100%;text-align:center;white-space:normal}
}