#login-dialog{width:min(500px,calc(100% - 30px));border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:40px;border-radius:10px;max-height:90vh}
#login-dialog::backdrop{background:rgba(13,30,46,.55);backdrop-filter:blur(4px)}
#login-dialog h2{font-size:2.5rem;margin-bottom:24px}
#login-dialog form{display:grid;gap:16px}
#login-dialog label{display:grid;gap:5px;font-size:.82rem;font-weight:700}
#login-dialog input[type="text"],#login-dialog input[type="email"],#login-dialog input[type="password"]{width:100%;border:1px solid #bcc2c5;padding:10px 44px 10px 12px;background:#fff;border-radius:4px;color:var(--ink);font-size:16px}
#login-dialog input[type="text"],#login-dialog input[type="email"]{padding-right:12px}
#login-dialog .dialog-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:30px;color:var(--ink);width:40px;height:40px}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:18px}
#login-dialog .login-remember{display:flex;grid-template-columns:none;align-items:center;gap:4px;font-weight:400;color:var(--muted);white-space:nowrap;width:max-content}
.login-remember input{margin:0;flex:0 0 auto}
.login-reset{border:0;background:none;padding:0;color:var(--muted);font:inherit;font-size:.8rem;text-decoration:underline;text-underline-offset:3px}
.login-reset:hover{color:var(--copper)}
.password-field{position:relative;display:block}
.password-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;border-radius:4px;font-size:1rem;line-height:1}
.password-toggle:hover{color:var(--ink);background:#f2f0eb}
.password-toggle.is-visible{color:var(--copper)}
.login-status{margin:0;color:var(--muted);font-size:.78rem;min-height:1.2em;text-align:center}
@media(max-width:560px){#login-dialog{padding:35px 24px}.login-options{gap:10px;flex-wrap:wrap}}