.login-columns { display:grid; grid-template-columns:minmax(0,400px) minmax(0,400px); gap:24px; width:min(100%,824px); align-items:stretch; }
.login-columns .login-card { width:100%; min-width:0; }
.qr-login { text-align:center; display:flex; flex-direction:column; justify-content:center; }
.qr-login h2 { margin:0 0 8px; font:700 22px var(--font-display); }
.qr-login > p { color:var(--text-muted); margin:0 0 20px; }
.qr-login-frame { position:relative; width:240px; height:240px; max-width:100%; margin:auto; background:#fff; border-radius:12px; overflow:hidden; }
.qr-login-image { display:block; width:100%; height:100%; }
.qr-login-image:not([src]) { visibility:hidden; }
.qr-login-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.72); }
.qr-login-overlay[hidden] { display:none; }
.qr-login-spinner { width:42px; height:42px; border:4px solid #cad5e2; border-top-color:#1684c5; border-radius:50%; animation:qr-login-spin .8s linear infinite; background:#fff; box-shadow:0 0 0 9px #fff; }
@keyframes qr-login-spin { to { transform:rotate(360deg); } }
.qr-login-code { display:block; margin:16px 0 8px; font-size:15px; letter-spacing:1px; min-height:23px; }
.qr-login-status { font-size:13px; line-height:1.6; min-height:62px; color:var(--text-muted); }
.qr-login .btn { margin-top:16px; width:100%; }
.login-screen { max-height:100dvh; overflow-y:auto; align-items:safe center; padding:76px 24px 24px; }
@media(max-width:720px) { .login-columns { grid-template-columns:minmax(0,400px); justify-content:center; } .login-screen { padding:76px 16px 24px; } }