body { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-panel { width:min(420px,100%); margin:0; padding:32px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.login-brand { display:flex; align-items:center; gap:12px; font-weight:600; margin-bottom:32px; }
.login-brand>span { padding:4px 9px; border:1px solid var(--border); border-top-color:var(--accent); border-radius:4px; }
.login-panel h1 { font-size:30px; }
.login-panel label { display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--muted); margin-bottom:18px; }
.login-panel input[type=email],.login-panel input[type=password],.login-panel input[type=text] { background:var(--inset); color:var(--text); width:100%; min-height:44px; padding:11px; border:1px solid var(--border); border-radius:4px; font:inherit; }
.login-panel input:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.login-panel .show-password { flex-direction:row; align-items:center; }
.login-panel button { width:100%; }
#login-error { color:var(--negative); font-size:13px; margin:14px 0; }
.login-footer { color:var(--muted); font-size:12px; margin-top:24px; }
@media(max-width:450px) { .login-panel { padding:24px; } .login-panel input { font-size:16px!important; } }