@import url('/v4/design-tokens.css');
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body.login-page{display:grid;place-items:center;min-height:100dvh;padding:24px;background:var(--n3-bg);color:var(--n3-text);font:14px/1.5 var(--font-ui)}
.login-card{width:100%;max-width:440px;padding:32px;border:1px solid var(--n3-line);border-radius:var(--radius-dialog);background:var(--n3-panel)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px;font-size:19px}
.login-brand>span{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:var(--n3-action);color:#fff;font-size:14px;font-weight:700}
h1{margin:0 0 12px;font-size:24px;line-height:1.3;letter-spacing:-.3px}
p{color:var(--n3-muted);margin:0 0 20px}
#tgLoginBox{min-height:42px;margin:24px 0 12px}
#loginStatus{font-size:13px;margin-bottom:16px}
#loginError{padding:12px;border:1px solid var(--n3-line2);border-radius:var(--radius-control);color:var(--n3-text);background:var(--n3-panel2);overflow-wrap:anywhere}
button{font:inherit;min-height:40px;padding:8px 14px;border:1px solid var(--n3-line2);border-radius:var(--radius-control);background:var(--n3-panel);color:var(--n3-text);cursor:pointer}
button:hover{background:var(--n3-hover)}
a{display:inline-block;color:var(--n3-accent);margin-top:12px;text-underline-offset:3px}
:is(button,a):focus-visible{outline:2px solid var(--n3-accent);outline-offset:3px}
[hidden]{display:none!important}
@media(max-width:480px){body.login-page{padding:16px}.login-card{padding:24px}h1{font-size:22px}}