/* ───────────────────────────────────────────────────────────────
   Arterias — Authentication screens (split layout)
   ─────────────────────────────────────────────────────────────── */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth-aside {
  position: relative;
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.auth-aside .aurora-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-aurora);
  opacity: 0.8;
  z-index: 0;
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside .quote { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; max-width: 460px; }
.auth-aside .quote-meta { color: var(--text-mut); margin-top: var(--sp-4); }
.auth-bullets { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.auth-bullets .row { display: flex; gap: var(--sp-3); align-items: center; color: var(--text-soft); }
.auth-bullets .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--gradient-brand-soft); border: 1px solid var(--glass-border); display: grid; place-items: center; flex-shrink: 0; }

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand { margin-bottom: var(--sp-6); }
.auth-card h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.auth-card .sub { color: var(--text-mut); margin-bottom: var(--sp-6); }
.auth-foot { text-align: center; margin-top: var(--sp-5); color: var(--text-mut); font-size: var(--fs-sm); }
.auth-foot a { color: var(--brand-2); font-weight: 600; }

.auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--text-faint); font-size: var(--fs-xs); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.status-screen { text-align: center; padding: var(--sp-6) 0; }
.status-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--sp-5); background: var(--gradient-brand-soft); border: 1px solid var(--glass-border); }
.spin { animation: spin 0.8s linear infinite; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}