#modal:has(.login-code-form){width:532px;max-width:calc(100vw - 24px);padding:40px 48px 32px;border-radius:24px}
#modal:has(.login-code-form) .login-art,#modal:has(.login-code-form) .login-legal{display:none}
#modal:has(.login-code-form) .login-brand{position:static;display:block;width:84px;height:24px;margin:0 auto 32px}
#modal:has(.login-code-form) h2{font-size:35px;line-height:37px;margin:0 0 8px}
#modal:has(.login-code-form) .login-subtitle{font-size:16px;line-height:20px;margin:0 0 20px;overflow-wrap:anywhere}
#modal .login-code-form{gap:0}
.login-code-control{position:relative;width:100%;height:64px}
#modal .login-code-control input{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:text;font-size:16px}
.login-code-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;height:100%;pointer-events:none}
.login-code-cells span{display:grid;place-items:center;min-width:0;border:1px solid #6e6e6e;border-radius:6px;background:#ffffff02;color:#818181;font-size:26px;line-height:32px}
.login-code-cells span.filled{color:#fffffd}
.login-code-cells span.focused{border-color:#fead6e;box-shadow:inset 0 0 0 1px #fead6e}
#modal .login-code-status{display:flex;flex-direction:column;justify-content:center;min-height:52px;text-align:center}
#modal .login-spam-hint,#modal .login-resend-row,#modal #login-code-error{font-size:14px;line-height:20px;margin:8px 0;overflow-wrap:anywhere}
#modal .login-spam-hint{margin-bottom:0;color:#bebebe}
#modal .login-resend{padding:0;background:none;border:0;color:#bebebe;font:inherit;text-decoration:underline;text-underline-offset:3px}
#modal .login-resend:disabled{cursor:default;text-decoration:none;opacity:1}
#modal #login-code-error{color:#ff4c4c}
#modal #login-code-error:before{content:'!';display:inline-grid;place-items:center;width:14px;height:14px;margin-right:8px;border:1px solid currentColor;border-radius:50%;font-size:11px;line-height:1;vertical-align:1px}
#modal #login-code-error[hidden],#modal .login-resend-row[hidden]{display:none}
#modal .login-code-form .modal-action{height:70px;min-height:70px;margin:0;font-size:18px;gap:12px}
#modal .login-code-form .modal-action:disabled{opacity:.55;cursor:default;box-shadow:none}
#modal .login-code-form .modal-action.is-checking{opacity:1}
#modal .login-code-form .modal-action.is-checking:after{width:18px;height:18px;background:currentColor;mask:url('/admin/icons/RefreshCw.svg') center/contain no-repeat;animation:code-check 1s linear infinite}
#modal .login-code-form .login-change-email{align-self:center;min-height:44px;margin-top:10px;padding:12px;color:#bebebe;font-size:16px;line-height:20px;text-decoration:underline;text-underline-offset:3px}
#modal .login-code-form .login-change-email:disabled{opacity:.5;cursor:default}
#modal .login-code-form button:focus-visible{outline:2px solid #fead6e;outline-offset:3px}
@media(hover:hover){#modal .login-code-form .login-change-email:hover,#modal .login-resend:not(:disabled):hover{color:#fffffd}}
@keyframes code-check{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#modal .login-code-form .modal-action.is-checking:after{animation:none}}
@media(max-width:600px){
 #modal:has(.login-code-form){padding:40px 20px 24px;max-width:calc(100vw - 16px)}
 #modal:has(.login-code-form) .login-brand{margin-bottom:24px}
 #modal:has(.login-code-form) h2{font-size:28px;line-height:34px}
 .login-code-control{height:54px}
 .login-code-cells{gap:6px}
 .login-code-cells span{font-size:22px;line-height:28px}
 #modal .login-code-form .modal-action{height:56px;min-height:56px}
}