/* Sign-in page: brand panel (same cobalt in both themes) + sign-in card */
.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.brand-side { position: relative; overflow: hidden; background: var(--brand-bg); color: var(--brand-ink); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px 48px; padding-left: max(48px, env(safe-area-inset-left)); }
.brand-side .plate { position: absolute; right: -180px; bottom: -180px; width: 560px; height: 560px; pointer-events: none; }
.bs-top { display: flex; align-items: center; gap: 12px; position: relative; }
.bs-top b { display: block; font-family: var(--f-display); font-size: 20px; line-height: 1.1; }
.bs-top small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-soft); }
.bs-mid { position: relative; max-width: 30rem; }
.bs-mid h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -.02em; }
.bs-mid p { color: var(--brand-soft); font-size: 17px; margin: 16px 0 0; max-width: 40ch; }
.bs-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.bs-list li { display: flex; gap: 12px; align-items: flex-start; }
.bs-list svg { flex: none; margin-top: 3px; }
.bs-foot { position: relative; font-size: 12px; color: var(--brand-soft); }

.sign-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; padding-right: max(24px, env(safe-area-inset-right)); }
.card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 12px 32px -18px rgba(20,29,51,.35); }
.card form { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.card h2 { font-size: 28px; line-height: 1.15; }
.card p { margin: 0; color: var(--muted); }
.fine { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 14px; }
.fine svg { flex: none; margin-top: 1px; }

@media (max-width: 900px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .brand-side { padding: max(24px, env(safe-area-inset-top)) 20px 28px; gap: 22px; }
  .brand-side .plate { width: 320px; height: 320px; right: -110px; bottom: -130px; opacity: .6; }
  .bs-mid h1 { font-size: 30px; }
  .bs-mid p { font-size: 15px; margin-top: 8px; }
  .bs-list, .bs-foot { display: none; }
  .sign-side { align-items: flex-start; padding: 24px 16px 32px; }
  .card { padding: 22px; gap: 16px; box-shadow: none; }
  .card h2 { font-size: 24px; }
}