/* Login: brandbook vertical lockup (mark 72 px, 16 px gap, wordmark 187x26) above a modal-style card. */
.login {
  display: grid; grid-template-columns: minmax(0, 380px); justify-content: center; align-content: center;
  min-height: 100vh; padding: 24px; background: var(--bg-app);
}
.login__box { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; }
.login__lockup { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--text-primary); }
.login__card {
  display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 22px 24px;
  border: 1px solid var(--border-default); border-radius: var(--r-xl); background: var(--bg-card);
  box-shadow: var(--shadow-modal);
}
.login__head { display: flex; flex-direction: column; gap: 6px; }
.login__title { font-size: var(--fs-modal); font-weight: 600; }
.login__sub { color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.login__error {
  padding: 9px 12px; border: 1px solid var(--danger-line); border-radius: var(--r-md);
  background: var(--danger-soft); color: var(--danger); font-size: var(--fs-meta); line-height: 1.45;
}
.login__card .btn--primary { margin-top: 6px; }
.login__foot { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); font-size: var(--fs-small); }