/* ==========================================================
   Login / Register Pages
   ========================================================== */

.auth-section { padding: 60px 0 90px; position: relative; z-index: 1; }
.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 980px; }

.auth-art { text-align: center; position: relative; }
.auth-art .about-emoji { font-size: 3rem; }

.auth-card { max-width: 440px; margin: 0 auto; width: 100%; }
.auth-card-wide { max-width: 620px; }
.auth-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.auth-sub { color: var(--text-light); margin-bottom: 24px; font-size: 0.92rem; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--text-light); }
.auth-switch a { color: var(--brand); font-weight: 700; }

.role-tabs { display: flex; gap: 10px; margin-bottom: 24px; background: #f5efe9; padding: 6px; border-radius: 30px; }
.role-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-light);
  transition: all 0.2s ease;
}
.role-tab.active { background: var(--brand); color: var(--white); }

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