.loop-login { min-height: 100svh; display: flex; flex-direction: column; background: #1b1b1b; color: #eee; }
.loop-login .loop-topbar { padding-right: 28px; }
.login-security { display: inline-flex; align-items: center; gap: 7px; color: #b8bcbc; font-size: 12px; }
.login-main { display: grid; place-items: center; flex: 1; padding: 60px 24px 80px; min-width: 0; }
.login-content { width: 100%; max-width: 360px; }
.login-heading { margin-bottom: 30px; }
.login-eyebrow { display: block; font-size: 11px; color: #b8bcbc; margin-bottom: 12px; }
.login-heading h1 { font-size: 26px; line-height: 1.35; font-weight: 600; margin: 0 0 10px; }
.login-heading p { font-size: 13px; color: #b8bcbc; margin: 0; }
#loginForm { display: grid; }
#loginForm label { font-size: 13px; margin-bottom: 8px; }
#loginForm input { width: 100%; height: 46px; min-width: 0; border: 1px solid #505050; border-radius: 3px; background: #202020; color: #eee; padding: 10px 12px; font: inherit; letter-spacing: 0; }
#loginForm input::placeholder { color: #858c8c; font-size: 13px; }
#loginForm input:focus-visible { outline: 2px solid #c3c8c8; outline-offset: 3px; border-color: #c3c8c8; }
#loginForm #username { margin-bottom: 24px; }
#loginForm #code { font: 21px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.login-feedback { min-height: 44px; padding: 10px 0; }
.login-error { color: #ffa8a2; font-size: 12px; margin: 0; overflow-wrap: anywhere; }
#loginForm .login-submit { display: flex; justify-content: space-between; width: 100%; height: 44px; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.login-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 28px; border-top: 1px solid #383838; color: #8f9696; font-size: 11px; }
.login-footer span:last-child { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.loop-login svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 480px) {
  .loop-login .loop-topbar { padding: 14px 20px; }
  .login-main { padding: 44px 24px 64px; }
  .login-heading h1 { font-size: 24px; }
  .login-footer { padding: 16px 20px; gap: 10px; }
  .login-security { font-size: 11px; }
}
@media (max-height: 600px) { .login-main { padding-top: 32px; padding-bottom: 36px; } }