/* ZERP — sign-in / registration shell.
   Split layout: a brand panel (the ZERP mark, large) beside a calm form column. Below 900px only the form remains. */
:root { --au-ink: #12172b; --au-indigo: #2e2a8f; --au-sky: #1fa6d6; --au-cyan: #1fc3e0; --au-ice: #bdf3ff; }
html { background: #fff; }
body.zauth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); background: #fff; color: var(--text); overflow-x: hidden; }

/* ── Brand panel ─────────────────────────────────────────── */
.zauth-art { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5vw, 64px); color: #fff;
  background: radial-gradient(900px 560px at 8% -8%, #2e2a8f 0%, rgba(46,42,143,0) 62%), linear-gradient(160deg, #181d3d 0%, #12172b 58%, #0f1425 100%); }
.zauth-art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: -1; background: linear-gradient(0deg, rgba(31,166,214,.16), rgba(31,166,214,0)); }
.zauth-art-logo { height: 34px; width: auto; align-self: flex-start; }
.zauth-glyph { position: absolute; z-index: -1; right: -7%; top: 15%; width: 90%; max-width: 720px; height: auto; pointer-events: none; }
.zauth-pitch { max-width: 460px; }
.zauth-pitch h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 2.7vw, 2.4rem); line-height: 1.16; letter-spacing: -.02em; color: #fff; margin: 0 0 14px; }
.zauth-pitch p { font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 400px; }

/* ── Form column ─────────────────────────────────────────── */
.zauth-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px); }
.zauth-box { width: 100%; max-width: 420px; }
.zauth-box.wide { max-width: 480px; }
.zauth-mobile-logo { display: none; height: 34px; width: auto; margin: 0 0 28px; }
.zauth-box h1 { font-size: 1.75rem; margin: 0 0 6px; }
.zauth-lead { color: var(--text-2); margin: 0 0 26px; font-size: .98rem; }
.zauth-box .form-control:focus { border-color: var(--au-indigo); box-shadow: 0 0 0 3px rgba(31,166,214,.28); outline: none; }
.zauth-pw { position: relative; }
.zauth-pw .form-control { padding-right: 68px; }
.zauth-pw .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.zauth-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; color: var(--text-3); font-size: .85rem; }
.zauth-or::before, .zauth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.zauth-alt { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-2); font-size: .92rem; }
.zauth-alt a { font-weight: 600; }
.zauth-foot { margin-top: 36px; font-size: .8rem; color: var(--text-3); }

@media (max-width: 900px) {
  body.zauth { grid-template-columns: 1fr; background: linear-gradient(180deg, #f2f4fa 0, #fff 220px); }
  .zauth-art { display: none; }
  .zauth-main { justify-content: flex-start; padding-top: max(28px, env(safe-area-inset-top)); }
  .zauth-mobile-logo { display: block; }
  .zauth-box h1 { font-size: 1.55rem; }
}
@media (max-height: 760px) and (min-width: 901px) { .zauth-glyph { top: 11%; width: 74%; } .zauth-pitch p { display: none; } }