/* auth pages: hero on the left, form on the right; stacks on phones */
body.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); background: var(--surface); overflow: auto; }
.auth-hero { background: var(--rail); color: #c7c5f0; padding: 2.4rem 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; position: relative; overflow: hidden; }
.auth-hero::after { content: ''; position: absolute; right: -90px; bottom: -110px; width: 360px; height: 360px; border-radius: 50%; border: 44px solid rgba(255,255,255,.035); }
.auth-hero .brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.auth-hero .brand img { width: 32px; }
.auth-hero h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.05; margin-bottom: 1rem; }
.auth-hero p { max-width: 460px; font-size: 1.05rem; }
.auth-jacks { display: grid; grid-template-columns: repeat(4, 64px); gap: .7rem; margin-top: 2rem; position: relative; z-index: 1; }
.auth-jacks span { height: 64px; border-radius: 14px; background: var(--rail-2); border: 1px solid #1c4a4d; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #cfe3e0; position: relative; }
.auth-jacks span::after { content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #3d5b5a; }
.auth-jacks span.on::after { background: #45e08a; box-shadow: 0 0 8px rgba(69,224,138,.8); }
.auth-form { display: grid; place-items: center; padding: 2rem 1.2rem; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { font-size: 1.8rem; }
.auth-card .nav-pills .nav-link { color: var(--muted); font-weight: 600; border-radius: 9px; }
.auth-card .nav-pills .nav-link.active { background: var(--teal); color: #fff; }
@media (max-width: 860px) {
  body.auth { grid-template-columns: 1fr; }
  .auth-hero { padding: 1.4rem 1.3rem 1.6rem; gap: 1rem; }
  .auth-hero h1 { font-size: 1.8rem; } .auth-hero p, .auth-jacks, .auth-hero small { display: none; }
  .auth-form { place-items: start center; padding-top: 1.6rem; }
}

.social-or { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 .75rem; color: var(--muted, #6b7f82); font-size: .8rem; }
.social-or::before, .social-or::after { content: ""; flex: 1; height: 1px; background: var(--line, rgba(16,39,42,.14)); }
.social-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; }
.social-btns .btn { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.auth-form { position: relative; }