/* Asila · login. Built on ui.css. */
body.login { display: grid; place-items: center; min-height: 100dvh; padding: var(--s4); }
.login-card { width: min(420px, 100%); padding: var(--s6) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-1); }
.login-brand { display: grid; justify-items: start; gap: var(--s2); margin-bottom: var(--s6); }
.login-logo { display: block; width: 220px; max-width: 100%; height: auto; }
.login-brand small { font-size: var(--fs-sm); color: var(--muted); }
.login-card h1 { font-size: var(--fs-display); margin: 0 0 var(--s2); }
.login-note { margin: 0 0 var(--s4); font-size: var(--fs-md); color: var(--muted); line-height: 1.5; }
.login-error { margin: 0 0 var(--s4); padding: var(--s3) 14px; border: 1px solid var(--danger-line); border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-md); }
.google-login { margin: 0 0 var(--s2); }
.login-split { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.login-split::before, .login-split::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-card form { display: grid; gap: var(--s3); }
.login-card form .primary { margin-top: var(--s2); }