.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.05fr); }
.login-side { padding: 40px 56px; display: flex; flex-direction: column; gap: 40px; }
.side-cover { margin-top: auto; margin-bottom: auto; }
.side-line { font-family: var(--font-en); font-size: 16px; color: var(--night-muted); }
.side-en { font-family: var(--font-en); font-style: italic; font-weight: 400; color: #b4503f; font-size: clamp(56px, 6.4vw, 96px); line-height: 1; margin: 14px 0 34px -3px; }
.side-quote { font-family: var(--font-jp); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.9; color: var(--night-ink); }
.side-quote mark { color: #f0c2b6; background: linear-gradient(to top, #c25a49 0 2px, transparent 2px); font-weight: 400; }
.side-foot { font-family: var(--font-en); font-size: 14px; color: var(--night-muted); }
.login-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 24px; }
.login-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.login-card h1 { font-size: 28px; }
.login-card .link { align-self: flex-start; }
.form-msg { font-size: 13px; color: var(--good); min-height: 1.4em; }
.google-btn { width: 100%; }
.google-note { margin-top: -8px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 4px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.demo-card { border: 1px dashed var(--line-strong); padding: 18px; gap: 10px; }
.demo-card .caps { font-size: 14px; }
.demo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mobile-only { display: none; }
@media (max-width: 800px) {
  .login-page { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .mobile-only { display: inline-flex; align-self: center; max-width: 400px; width: 100%; }
  .login-main { justify-content: flex-start; padding-top: 32px; }
}