/* Login page. The right-hand visual keeps fixed dark colours in both themes (it is a brand surface, not themed UI). */
.login-body { display: block; height: auto; min-height: 100dvh; overflow: auto; }
.login { display: grid; grid-template-columns: minmax(380px, 5fr) 6fr; min-height: 100dvh; }
.login-form-col { display: flex; flex-direction: column; padding: var(--s-6) var(--s-10); background: var(--surface); }
.login-top { display: flex; align-items: center; justify-content: space-between; }
.login-tools { display: flex; align-items: center; gap: var(--s-2); }
.login-main { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 380px; margin: 0 auto; padding: var(--s-10) 0; }
.login-title { font: 600 var(--fs-2xl)/1.15 var(--f-display); letter-spacing: -0.02em; }
.login-lead { margin-top: var(--s-2); color: var(--fg-2); font-size: var(--fs-md); }
.login-form { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.input { width: 100%; height: 40px; padding: 0 var(--s-3); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); font-size: var(--fs-md); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.input:hover { border-color: var(--fg-3); }
.input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.input[aria-invalid="true"] { border-color: var(--err); }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 44px; }
.input-toggle { position: absolute; right: 4px; top: 4px; }
.login-error { padding: var(--s-3); border-radius: var(--r); background: var(--err-soft); color: var(--err); border: 1px solid var(--err); font-size: var(--fs-sm); }
.login-submit { width: 100%; height: 40px; font-size: var(--fs-md); }
.login-contact { margin-top: var(--s-6); color: var(--fg-2); font-size: var(--fs-sm); }
.login-foot { color: var(--fg-3); font-size: var(--fs-xs); }

.login-visual { position: relative; overflow: hidden; background: #0c0d0e; color: #f2f1ee; isolation: isolate; }
.heat-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.visual-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(12, 13, 14, 0.55) 0%, rgba(12, 13, 14, 0) 22%, rgba(12, 13, 14, 0.7) 42%, rgba(12, 13, 14, 0.92) 60%, rgba(12, 13, 14, 0.96) 100%); }
.visual-content { position: relative; height: 100%; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-8) var(--s-10); }
.visual-brand { display: flex; align-items: center; gap: var(--s-2); }
.visual-brand .brand-mark { width: 28px; height: 27px; }
.visual-wordmark { font: 600 var(--fs-xl)/1 var(--f-display); letter-spacing: -0.01em; }
.visual-copy { max-width: 520px; display: grid; gap: var(--s-3); }
.visual-claim { font: 600 var(--fs-3xl)/1.08 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; }
.visual-sub { color: #d6d5d1; font-size: var(--fs-lg); max-width: 46ch; }
.visual-sources { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(242, 241, 238, 0.28); color: #bdbcb8; font: 450 var(--fs-xs)/1.55 var(--f-body); }

@media (max-width: 899px) {
  .login .brand-name { display: inline; }
  .login { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-form-col { padding: var(--s-4) var(--s-4) var(--s-6); }
  .login-main { padding: var(--s-8) 0; }
}