.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-side { background: var(--ink); color: #e9eefa; display: flex; align-items: center; justify-content: center; padding: 3rem; position: relative; overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .login-side { background: #0a1121; } }
.side-inner { max-width: 440px; }
.side-kicker { font-family: var(--display); font-stretch: 118%; font-weight: 700; font-size: 1.05rem; color: var(--gold); margin-bottom: 2rem; }
.pin-demo { display: flex; gap: .6rem; margin-bottom: 2rem; }
.pin-demo span {
  font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1;
  width: 1.15em; padding: .12em 0; text-align: center; color: #10264a; background: #f2b227; border-radius: 12px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12);
}
.side-copy { font-size: 1.15rem; line-height: 1.6; color: #c9d3ea; max-width: 34ch; }
.login-main { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.login-card { width: min(100%, 400px); }
.login-card .brand { margin-bottom: 2.25rem; }
.login-card h1 { font-size: 2rem; margin-bottom: 1.25rem; }
.login-links { margin-top: 1rem; text-align: center; }
.linklike { background: none; border: 0; padding: .25rem; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.login-foot { margin-top: 2.5rem; font-size: .88rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.notice { background: var(--blue-weak); border-radius: var(--radius-s); padding: .6rem .8rem; }
@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .login-main { align-items: flex-start; padding-top: 3rem; }
}