.login-page { display: grid; min-height: 100vh; min-height: 100dvh; grid-template-rows: minmax(0, 1fr) auto; background: var(--surface-soft); }
.login-shell { display: grid; width: min(960px, calc(100% - 64px)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-self: center; align-items: center; margin: 64px auto; }
.login-artwork { padding-right: 64px; }
.login-artwork img { display: block; width: min(320px, 100%); height: auto; margin-left: auto; }
.login-form { display: grid; min-width: 0; gap: 24px; padding-left: 64px; border-left: 1px solid var(--line); }
.login-form h1 { margin: 0 0 12px; font-size: 28px; font-weight: 400; line-height: 1.3; }
.login-field { display: grid; gap: 8px; }
.login-field label { font-size: 14px; font-weight: 500; }
.login-input-wrap { position: relative; }
.login-input-wrap > .ui-icon { position: absolute; top: 16px; left: 14px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.login-field input { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px 12px 40px; background: var(--surface); color: var(--ink); font-size: 14px; }
.login-field input:focus { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: -2px; }
.login-field input[type="password"], #login-password { padding-right: 48px; }
.password-toggle { position: absolute; inset: 4px 4px 4px auto; display: grid; width: 40px; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--muted); }
.password-toggle:focus-visible { outline: 2px solid var(--primary); }
.login-error { margin: 0; padding: 12px; border: 1px solid var(--danger); border-radius: 4px; background: var(--danger-soft); color: var(--danger); font-size: 14px; }
.login-error:empty { display: none; }
.login-submit { min-height: 52px; gap: 8px; font-size: 14px; }
.login-submit .ui-icon { width: 16px; height: 16px; }
.login-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; padding: 20px 24px; color: var(--muted); font-size: 12px; }
@media (max-width: 720px) {
  .login-shell { width: min(400px, calc(100% - 40px)); grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 32px auto; }
  .login-artwork { width: 160px; justify-self: center; padding: 0; }
  .login-form { padding: 0; border: 0; }
  .login-form h1 { text-align: center; }
}