* { box-sizing: border-box; }
/* Loaded after design.css: undo the app-shell rules that share these selectors. */
body { margin: 0; background: var(--bg-soft); color: var(--fg-1); display: block; min-height: 0; }
a { color: var(--brand-600); }

.layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.hero {
  position: relative; overflow: hidden; color: var(--white);
  background: var(--gray-900) url('/static/login-hero.jpg') center bottom / cover no-repeat;
  padding: var(--s-8); display: flex; flex-direction: column; justify-content: flex-end; min-width: 0;
}
.hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,32,64,0.45) 0%, rgba(20,32,64,0.88) 100%);
}
.hero-copy { position: relative; display: flex; flex-direction: column; gap: var(--s-3); max-width: 460px; }
.hero-copy h1, .hero-copy p { margin: 0; }
.hero-copy p { color: rgba(255,255,255,0.78); }

.panel { background: var(--bg-soft); display: flex; align-items: center; justify-content: center; padding: var(--s-8); min-width: 0; }
.login-card {
  width: 400px; max-width: 100%; padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-5);
  background: var(--bg-page); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.brand-row { display: flex; align-items: center; gap: var(--s-3); }
.brand-row .brand-name, .brand-row .brand-sub { display: block; }
.login-heading h2, .login-heading p { margin: 0; }
.login-card .field { margin: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.login-card .field input { width: 100%; }
.remember { display: flex; align-items: center; gap: var(--s-2); color: var(--fg-3); cursor: pointer; }
.login-card .btn.block { width: 100%; justify-content: center; }
.login-foot { margin: 0; text-align: center; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .hero { display: none; }
  .panel { padding: var(--s-6) var(--s-4); }
}