.needs-login { overflow: auto; }
.needs-login #app { display: none; }
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, #62adff 13%, transparent), transparent 65%), var(--bg); }
.login-card { width: min(100%, 400px); padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 20px 80px #0002; }
.login-logo { width: 60px; height: 60px; border-radius: 17px; }
.login-card h1 { font-size: 28px; margin: 20px 0 12px; }
.login-intro, .login-note { color: var(--text-2); line-height: 1.7; }
.login-intro { margin-bottom: 28px; font-size: 15px; }
.login-note { font-size: 12px; margin-top: 22px; }
.login-card label { display: block; margin: 18px 0; font-size: 14px; }
.login-card input { display: block; width: 100%; box-sizing: border-box; margin-top: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 13px; font: inherit; font-size: 16px; }
.login-card input:focus { outline: 2px solid #62adff; outline-offset: 2px; }
.login-submit { width: 100%; min-height: 46px; background: #62adff; color: #10151c; font-weight: 650; }
.login-error { color: #e17171; font-size: 14px; line-height: 1.5; }