#login{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);padding:24px max(16px,env(safe-area-inset-left,0px))}
.login-card{width:min(420px,100%);background:var(--panel);border-radius:20px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.login-card h1{margin:0;font-size:28px;letter-spacing:-.02em}
.login-card p{margin:0;color:var(--ink-2)}
.login-card form{display:flex;flex-direction:column;gap:12px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--ink-3)}
.login-card input{font:inherit;font-size:16px;color:var(--ink);background:var(--sunk);border:1px solid transparent;border-radius:10px;padding:10px 12px}
.login-msg{font-size:13px;color:var(--ink-3)!important;min-height:1.2em}
.userbar{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:50;display:flex;gap:10px;align-items:center;background:var(--panel);border-radius:999px;padding:6px 12px;box-shadow:var(--shadow);font-size:12.5px;color:var(--ink-2)}
#clave{position:fixed;inset:0;z-index:110;display:grid;place-items:center;background:rgba(0,0,0,.35);padding:24px 16px}
#clave .login-card{display:flex;flex-direction:column;gap:12px}
#clave label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--ink-3)}
#clave input{font:inherit;font-size:16px;color:var(--ink);background:var(--sunk);border:1px solid transparent;border-radius:10px;padding:10px 12px}
.login-alt summary{cursor:pointer;font-size:13.5px;color:var(--accent)}
.login-alt p{font-size:13px;margin:8px 0!important}
@media(max-width:600px){.userbar{position:absolute}.userbar span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}