.studio-login { min-height: 100vh; display: grid; align-items: center; }
.studio-login-shell { display: grid; grid-template-columns: 1fr 420px; gap: 64px; width: min(1060px, 100%); margin: auto; padding: 48px 32px; }
.studio-intro { align-self: center; }
.studio-intro .logo { margin-bottom: 48px; }
.studio-intro h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 12px 0 24px; line-height: 1.2; }
.studio-intro > p:not(.crumb) { color: var(--muted); max-width: 440px; margin-bottom: 28px; }
.studio-login-card { min-width: 0; padding: 32px; }
.studio-login-card h2 { font-size: 1.45rem; margin-bottom: 10px; }
.studio-login-card > p { color: var(--muted); font-size: .9375rem; margin-bottom: 28px; }
.studio-login-card button { width: 100%; }
.studio-login-error { color: var(--danger); font-size: .875rem; min-height: 1.5em; overflow-wrap: anywhere; }
.studio-login-card .studio-login-note { margin: 24px 0 0; font-size: .8125rem; }
.sidefoot a { display: block; margin-top: 12px; }
.sidefoot #logout { width: 100%; margin-top: 12px; }
@media (max-width: 800px) {
  .studio-login-shell { grid-template-columns: 1fr; max-width: 540px; gap: 32px; padding: 32px 20px; }
  .studio-intro .logo { margin-bottom: 28px; }
  .studio-login-card { padding: 24px; }
}