.login-shell { width: min(620px, calc(100% - 32px)); padding: 64px 0 76px; }
.login-shell h1 { margin-bottom: 16px; }
.login-shell > .muted { font-size: 1.05rem; line-height: 1.7; }
.login-steps { display: flex; gap: 28px; margin: 30px 0 0; padding: 0; list-style: none; color: #686559; font-size: .88rem; }
.login-steps li { display: flex; gap: 8px; align-items: center; }
.login-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e6e4da; }
.login-steps [aria-current] { color: #2d5a27; font-weight: 600; }
.login-steps [aria-current] span { background: #2d5a27; color: white; }
.login-shell .panel { margin-top: 22px; border-color: #cfddc6; }
.login-shell label { margin-bottom: 8px; font-weight: 600; }
.login-shell form > p { margin: 18px 0 0; }
.login-shell form > p:first-of-type { line-height: 1.6; }
.login-shell .login-help { font-size: .85rem; color: #625d54; }
.login-shell button[type='submit'] { width: 100%; background: #2d5a27; color: #fffdf8; border-radius: 8px; padding: 14px; }
.login-shell button[type='submit']:hover { background: #254f25; }
.login-shell .login-code { max-width: 260px; font-size: 1.8rem; letter-spacing: .23em; }
.login-shell #code-form label { margin-top: 24px; }
.login-shell #code-form .actions { margin-top: 22px; }
.login-shell .login-change { border: 0; background: transparent; color: #2d5a27; text-decoration: underline; padding: 10px 0; }
.login-support { margin-top: 24px; font-size: .9rem; color: #625d54; }
.login-shell input:focus-visible, .login-shell button:focus-visible { outline: 3px solid #7da26f; outline-offset: 3px; }
@media(max-width: 560px) { .login-shell { padding-top: 32px; } .login-shell .actions { flex-direction: column; align-items: stretch; } }