/* Sign-in page — tokens from app.css */
.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--space-10));
  padding: var(--space-8) var(--space-4);
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 380px);
  gap: var(--space-5);
  align-items: stretch;
  width: 100%;
  max-width: 880px;
}
.intro-panel,
.login-panel { padding: var(--space-6); }
.login-panel { display: flex; flex-direction: column; gap: var(--space-4); }
.login-panel h1 { margin-bottom: var(--space-2); font-size: var(--text-2xl); letter-spacing: -0.022em; }
.intro-panel h1 {
  margin-bottom: var(--space-3);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  line-height: 1.12;
  letter-spacing: -0.022em;
}
.intro-panel h2 { margin-bottom: var(--space-1); font-size: var(--text-md); }
.lead,
.panel p { color: var(--text-secondary); line-height: 1.5; }
.feature-list { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.feature {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}
.feature strong { display: block; margin-bottom: 0.2rem; color: var(--text); font-weight: 600; }
.login-panel form { display: grid; gap: var(--space-3); }
.login-panel form p { margin: 0; }
.login-panel form label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-1); }
.login-panel .submit-btn { margin-top: var(--space-2); }
.note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-tertiary); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; max-width: 460px; }
  .intro-panel { display: none; }
}