/* Auth — mesga-02 / mesga-17 */
.mesga-auth-page { min-height: 100vh; display: flex; }

.mesga-auth-brand {
  flex: 1; background: var(--mesga-navy); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px; min-height: 100vh;
}
.mesga-auth-brand__ribbon {
  position: absolute; inset: 0; opacity: .6;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(114,10,164,.5) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(147,51,234,.4) 0%, transparent 50%);
}
.mesga-auth-brand__ribbon::after {
  content: ''; position: absolute; width: 120%; height: 60%;
  top: 20%; left: -10%; transform: rotate(-12deg);
  background: linear-gradient(135deg, transparent 20%, rgba(114,10,164,.3) 40%, rgba(168,85,247,.2) 60%, transparent 80%);
  border-radius: 50%;
}
.mesga-auth-brand__content { position: relative; z-index: 1; text-align: center; }
.mesga-auth-brand__logo { width: 80px; height: 80px; border-radius: 20px; background: var(--mesga-purple); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 800; color: #fff; margin: 0 auto 24px; }
.mesga-auth-brand__name { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.mesga-auth-brand__tagline { font-size: 1.125rem; color: rgba(255,255,255,.6); }

.mesga-auth-form-side {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 48px; background: #fff; min-height: 100vh;
}
.mesga-auth-form { width: 100%; max-width: 420px; }
.mesga-auth-form__title { font-size: 1.75rem; font-weight: 700; margin-bottom: 8px; }
.mesga-auth-form__subtitle { color: var(--mesga-text-secondary); margin-bottom: 32px; font-size: 0.9375rem; }
.mesga-auth-form__links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 0.875rem; }
.mesga-auth-form__footer { margin-top: 32px; text-align: center; font-size: 0.8125rem; color: var(--mesga-text-muted); line-height: 1.6; }
.mesga-auth-tg-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border: 1.5px solid var(--mesga-border); border-radius: var(--mesga-radius-sm);
  background: #fff; font-weight: 500; cursor: pointer; color: var(--mesga-text); transition: border-color .2s;
}
.mesga-auth-tg-btn:hover { border-color: #2AABEE; }
.mesga-auth-tg-btn svg { color: #2AABEE; }

/* Registration — centered card */
.mesga-register-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #EDE5F7 0%, #E8E0F5 30%, #F0EBFA 60%, #E5DBF3 100%);
  position: relative; overflow: hidden;
}
.mesga-register-page::before, .mesga-register-page::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.mesga-register-page::before { width: 400px; height: 400px; background: rgba(114,10,164,.15); top: -100px; right: -100px; }
.mesga-register-page::after { width: 300px; height: 300px; background: rgba(147,51,234,.12); bottom: -80px; left: -80px; }

.mesga-register-card {
  width: 100%; max-width: 460px; background: #fff; border-radius: var(--mesga-radius-lg);
  padding: 40px; box-shadow: var(--mesga-shadow-lg); position: relative; z-index: 1;
}
.mesga-register-card__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.mesga-register-card__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.mesga-register-card__subtitle { color: var(--mesga-text-secondary); font-size: 0.875rem; margin-bottom: 28px; }
.mesga-phone-prefix {
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border-right: 1.5px solid var(--mesga-border); height: 100%;
  font-size: 0.875rem; font-weight: 500; color: var(--mesga-text);
}
.mesga-input--phone { display: flex; padding: 0; overflow: hidden; }
.mesga-input--phone input { border: none; padding: 12px 16px; flex: 1; outline: none; }
.mesga-register-divider { margin: 24px 0; }
.mesga-register-login { text-align: center; font-size: 0.875rem; color: var(--mesga-text-secondary); }

@media (max-width: 768px) {
  .mesga-auth-brand { display: none; }
  .mesga-auth-form-side { flex: 1; }
}