#app[hidden]{display:none!important}
#app.auth-page{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:calc(100svh - 32px);padding:32px 16px;border:0;border-radius:0}
#app .auth-card{width:100%;max-width:440px;padding:32px;background:var(--r-panel);border:1px solid var(--r-line);border-radius:16px;box-shadow:0 12px 40px light-dark(#202b3b0c,#0003)}
#app .auth-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:650;margin-bottom:28px}
#app .auth-card h1{font-size:26px;letter-spacing:-.5px;line-height:1.25;margin:0 0 8px}
#app .auth-intro{margin:0 0 24px;color:var(--r-sub);font-size:14px}
#app #login-form,#app .auth-dialog form{display:flex;flex-direction:column;gap:10px}
#app #login-form label,#app .auth-dialog label{font-weight:600;font-size:14px;margin-top:6px}
#app .auth-card input,#app .auth-dialog input{width:100%;min-width:0;min-height:44px;box-sizing:border-box;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--r-line);border-radius:7px;background:var(--r-bg);color:var(--r-fg)}
#app .auth-password{display:flex;align-items:stretch;gap:6px}
#app .auth-password input{flex:1}
#app .auth-password button{flex-shrink:0;min-width:52px;border:1px solid var(--r-line);border-radius:7px;background:var(--r-soft);color:var(--r-fg);font:inherit;cursor:pointer}
#app .auth-submit{min-height:44px;margin-top:14px;font-size:14px}
#app .auth-foot{margin:24px 0 0;color:var(--r-sub);font-size:12px;line-height:1.7}
#app .auth-card code{overflow-wrap:anywhere;white-space:normal;font-size:12px}
#app .auth-message{padding:10px 12px;margin:0 0 16px;border:1px solid var(--r-line);border-radius:7px;background:var(--r-amberbg);color:var(--r-amber);font-size:14px;overflow-wrap:anywhere}
#app .auth-setup{padding:16px;background:var(--r-soft);border-radius:8px;margin-bottom:20px;line-height:1.6}
#app .auth-setup h2{font-size:16px;margin:0}
#app .auth-setup p{font-size:14px}
#app .auth-setup .r-btn{min-height:44px}
#app .auth-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#app .auth-controls .r-btn{min-height:36px}
#app #auth-user{font-size:12px;max-width:160px;overflow-wrap:anywhere}
#app .auth-account-error{width:100%;font-size:12px;color:var(--r-amber)}
#app .auth-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow:auto;padding:24px;border:1px solid var(--r-line);border-radius:12px;background:var(--r-panel);color:var(--r-fg)}
#app .auth-dialog::backdrop{background:#10182799}
#app .auth-dialog h2{font-size:20px;margin:0 0 6px}
#app .auth-dialog .auth-hint{font-size:12px;color:var(--r-sub);margin:0 0 10px}
#app .auth-dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
#app .auth-dialog footer button{min-height:44px}
#app .auth-card :is(input,button):focus-visible,#app .auth-dialog :is(input,button):focus-visible,#app .auth-controls button:focus-visible{outline:2px solid var(--r-blue);outline-offset:3px}
#app .auth-password button:hover{background:var(--r-bluebg)}
#app :is(.auth-card,.auth-dialog) button:disabled{opacity:.65;cursor:wait}
@media(max-width:760px){#app.auth-page{min-height:calc(100svh - 16px);padding:16px 8px}#app .auth-card{padding:24px}#app .r-head{flex-wrap:wrap}#app .auth-controls{width:100%;justify-content:flex-end}#app .auth-controls .r-btn{min-height:44px}}