body.login { min-height: 100vh; background: var(--nav); color: var(--ink); }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 440px) 1fr; }
.login-card { background: var(--surface); padding: 48px 40px; display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.login-brand { display: flex; gap: 14px; align-items: center; }
.login-brand h1 { font-size: 1.5714rem; margin: 0; letter-spacing: -.02em; }
.login-brand p { margin: 0; color: var(--ink-3); font-size: 0.9286rem; }
.login-card .btn.primary { padding: 10px 14px; font-size: 1.0714rem; }
.login-foot { font-size: 0.8571rem; color: var(--ink-3); margin: 0; }
.err { margin: 0; color: var(--rise); font-weight: 500; }
/* The right side: a slow tape of the score gauge — the product's signature, used as the welcome image. */
.login-tape { position: relative; overflow: hidden; display: flex; align-items: center; padding: 48px; }
.login-tape #tape { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 640px; opacity: .9; }
.tape-row { display: grid; grid-template-columns: 120px 1fr 64px; gap: 16px; align-items: center; color: #c9d2db; font-size: 0.9286rem; }
.tape-row .tr { position: relative; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #1c5bd0 0 20%, #3d5f93 20% 40%, #3a4653 40% 60%, #8f3a48 60% 80%, #d21f35 80% 100%); }
.tape-row .tr i { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; background: #fff; border-radius: 2px; transition: left 1.6s ease-in-out; }
.tape-row b { font-weight: 600; text-align: right; color: #fff; }
@media (max-width: 760px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-tape { display: none; }
  .login-card { padding: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) { .tape-row .tr i { transition: none; } }