.login-page { display:flex; justify-content:center; padding:48px 16px; }
.login-card { width:100%; max-width:420px; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:32px; }
.login-card__title { font-size:var(--fs-24); margin:0 0 6px; color:var(--text-main); }
.login-card__sub { color:var(--text-muted); font-size:var(--fs-14); margin:0 0 24px; }
.login-form { display:flex; flex-direction:column; gap:16px; }
.login-field { display:flex; flex-direction:column; gap:6px; font-size:var(--fs-13); color:var(--text-muted); }
.login-field input { padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-control); font-size:var(--fs-14); }
.login-submit { margin-top:4px; }
.login-switch { font-size:var(--fs-13); color:var(--text-muted); margin:16px 0; text-align:center; }
.login-link { background:none; border:none; color:var(--primary-ink); cursor:pointer; font-size:var(--fs-13); padding:0; }
.login-roles { display:flex; flex-direction:column; gap:8px; padding:16px 0; border-top:1px solid var(--border); }
.login-role { font-size:var(--fs-13); color:var(--text-muted); }
.login-role b { color:var(--text-main); margin-right:8px; }
.login-demo { font-size:var(--fs-12); color:var(--text-subtle); text-align:center; margin:8px 0 0; }