/* BantuSphere Auth 7.3.0
 * Presentation only. Native Sngine/BantuSocial auth forms and JS hooks remain untouched.
 */
:root {
  --ba-bg: #050914;
  --ba-panel: rgba(10, 16, 31, .78);
  --ba-card: rgba(12, 19, 36, .9);
  --ba-line: rgba(148, 163, 184, .16);
  --ba-text: #f8fafc;
  --ba-muted: #8f9bb1;
  --ba-pink: #ff2d8d;
  --ba-purple: #7c3cff;
  --ba-blue: #1d8dff;
  --ba-green: #12d77a;
  --ba-cyan: #00d3c7;
  --ba-orange: #ff8b2c;
}

html, body { min-height: 100%; background: var(--ba-bg) !important; }
body { overflow-x: hidden; }
body .main-wrapper { min-height: 100vh; background: transparent !important; }

.bsauth, .bsauth * { box-sizing: border-box; }
.bsauth {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  color: var(--ba-text);
  background:
    radial-gradient(circle at 14% 5%, rgba(124,60,255,.16), transparent 28%),
    radial-gradient(circle at 95% 20%, rgba(255,45,141,.12), transparent 25%),
    radial-gradient(circle at 55% 100%, rgba(0,211,199,.07), transparent 35%),
    linear-gradient(135deg, #040813 0%, #07101f 52%, #050914 100%);
}
.bsauth__mesh {
  position: absolute; inset: 0; pointer-events: none; opacity: .23;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 75%);
}
.bsauth__glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .14; }
.bsauth__glow--one { background: #7c3cff; left: 16%; top: 20%; }
.bsauth__glow--two { background: #ff2d8d; right: 6%; bottom: 4%; }

.bsauth__nav {
  position: relative; z-index: 5;
  height: 88px; max-width: 1480px; margin: 0 auto; padding: 0 38px;
  display: flex; align-items: center; justify-content: space-between;
}
.bsauth__brand, .bsauth__brand:hover { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.bsauth__brand-logo, .bsauth__mobile-logo {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 14px; padding: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.bsauth__brand-logo img, .bsauth__mobile-logo img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.bsauth__brand-logo > span, .bsauth__mobile-logo > span { font-weight: 900; color: #fff; }
.bsauth__brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.bsauth__brand-copy b { font-size: 20px; letter-spacing: -.4px; }
.bsauth__brand-copy small { margin-top: 5px; color: #ff55a5; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.bsauth__nav-actions { display: flex; align-items: center; gap: 18px; }
.bsauth__live { display: inline-flex; gap: 8px; align-items: center; color: #a9b4c8; font-size: 12px; }
.bsauth__live i { width: 8px; height: 8px; border-radius: 50%; background: #14d97b; box-shadow: 0 0 0 5px rgba(20,217,123,.1), 0 0 15px rgba(20,217,123,.55); }
.bsauth__nav-link { min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: #fff !important; font-size: 13px; font-weight: 800; text-decoration: none !important; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); backdrop-filter: blur(12px); }
.bsauth__nav-link:hover { border-color: rgba(255,45,141,.45); background: rgba(255,45,141,.1); }

.bsauth__stage {
  position: relative; z-index: 2; max-width: 1480px; margin: 0 auto; padding: 34px 38px 56px;
  min-height: calc(100vh - 150px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .75fr); gap: 86px; align-items: center;
}
.bsauth__experience { max-width: 770px; padding: 24px 0 30px; }
.bsauth__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: #9c8dff; font-size: 11px; font-weight: 900; letter-spacing: 2.1px; }
.bsauth__eyebrow i { font-size: 7px; color: #ff2d8d; box-shadow: 0 0 16px rgba(255,45,141,.8); border-radius: 50%; }
.bsauth__hero-copy h1 { margin: 0; color: #f8fbff; font-size: clamp(48px, 5.1vw, 78px); line-height: .98; font-weight: 800; letter-spacing: -3.5px; }
.bsauth__hero-copy h1 em { font-style: normal; background: linear-gradient(90deg, #ff4fa2, #9d68ff 52%, #3aa6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bsauth__hero-copy p { max-width: 650px; margin: 24px 0 0; color: #9ca8bc; font-size: 16px; line-height: 1.72; }

.bsauth__app-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin-top: 34px; }
.bsauth__app { min-width: 0; height: 88px; padding: 13px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(10,16,30,.58); box-shadow: inset 0 1px rgba(255,255,255,.03); backdrop-filter: blur(12px); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.bsauth__app:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); background: rgba(17,25,44,.8); }
.bsauth__app > span { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 16px; box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.bsauth__app div { min-width: 0; display: flex; flex-direction: column; }
.bsauth__app b { color: #f7f9fc; font-size: 12px; line-height: 1.2; }
.bsauth__app small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; color: #718096; font-size: 9.5px; }
.bsauth__app--social > span { background: linear-gradient(135deg,#782bff,#b04cff); }
.bsauth__app--market > span { background: linear-gradient(135deg,#e92877,#ff659a); }
.bsauth__app--fund > span { background: linear-gradient(135deg,#079f55,#23df83); }
.bsauth__app--jobs > span { background: linear-gradient(135deg,#0969d7,#2fa4ff); }
.bsauth__app--events > span { background: linear-gradient(135deg,#d65913,#ff9a38); }
.bsauth__app--groups > span { background: linear-gradient(135deg,#7440e8,#a775ff); }
.bsauth__app--movies > span { background: linear-gradient(135deg,#d92747,#ff536c); }
.bsauth__app--courses > span { background: linear-gradient(135deg,#008f8c,#17d9cc); }

.bsauth__signal-card { margin-top: 12px; padding: 15px 17px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: linear-gradient(90deg, rgba(124,60,255,.09), rgba(255,45,141,.06)); }
.bsauth__signal-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; color: #ffe272; background: rgba(255,207,65,.1); }
.bsauth__signal-card > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.bsauth__signal-card strong { font-size: 12px; color: #f5f7fb; }
.bsauth__signal-card span { margin-top: 3px; font-size: 10px; color: #7f8ba1; }
.bsauth__signal-bars { margin-left: auto; height: 26px; display: flex; align-items: flex-end; gap: 4px; }
.bsauth__signal-bars i { width: 3px; border-radius: 3px; background: linear-gradient(to top,#7c3cff,#ff2d8d); }
.bsauth__signal-bars i:nth-child(1){height:9px}.bsauth__signal-bars i:nth-child(2){height:15px}.bsauth__signal-bars i:nth-child(3){height:21px}.bsauth__signal-bars i:nth-child(4){height:26px}
.bsauth__metrics { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 26px; border-top: 1px solid rgba(255,255,255,.075); padding-top: 18px; }
.bsauth__metrics div { display: flex; align-items: center; gap: 9px; color: #758096; }
.bsauth__metrics strong { color: #3d4860; font-size: 11px; letter-spacing: 1px; }
.bsauth__metrics span { font-size: 11px; font-weight: 700; }

.bsauth__access { width: 100%; max-width: 520px; justify-self: end; }
.bsauth__mobile-brand { display: none; }
.bsauth__card { position: relative; padding: 34px; overflow: hidden; border-radius: 30px; border: 1px solid rgba(153,169,199,.18); background: linear-gradient(155deg, rgba(15,23,43,.94), rgba(7,13,26,.94)); box-shadow: 0 34px 90px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(24px); }
.bsauth__card:before { content:""; position:absolute; left:24px; right:24px; top:0; height:1px; background:linear-gradient(90deg,transparent,#ff2d8d 28%,#7c3cff 66%,transparent); opacity:.8; }
.bsauth__card:after { content:""; position:absolute; width:210px; height:210px; right:-110px; top:-110px; border-radius:50%; background:rgba(124,60,255,.13); filter:blur(15px); pointer-events:none; }
.bsauth__card-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.bsauth__card-kicker { display: block; margin-bottom: 9px; color: #ff4fa2; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.bsauth__card-top h2 { margin: 0; color: #fff; font-size: 29px; line-height: 1.1; letter-spacing: -1px; }
.bsauth__card-top p { margin: 9px 0 0; max-width: 355px; color: #8490a5; font-size: 12px; line-height: 1.55; }
.bsauth__shield { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 14px; color: #68eaaa; border: 1px solid rgba(35,216,128,.16); background: rgba(35,216,128,.07); }

/* Native auth form: styling only. No form structure or JS hook changes. */
.bsauth__native, .bsauth__native .welcome_page, .bsauth__native .ele_content { width: 100% !important; max-width: none !important; min-width: 0 !important; }
.bsauth__native .ele_content.card-register, .bsauth__native .card-register { padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
.bsauth__native .js_panel { width: 100%; }
.bsauth__native form { width: 100%; }
.bsauth__native .ele_field { position: relative; display: block; width: 100%; margin: 0 0 14px !important; }
.bsauth__native .ele_field input,
.bsauth__native .ele_field select,
.bsauth__native input.form-control,
.bsauth__native select.form-control,
.bsauth__native textarea.form-control {
  width: 100% !important; min-height: 54px !important; margin: 0 !important; padding: 20px 46px 7px 16px !important;
  color: #eef3fb !important; font-size: 14px !important; outline: none !important; border: 1px solid rgba(145,160,190,.17) !important; border-radius: 14px !important;
  background: rgba(3,8,18,.58) !important; box-shadow: inset 0 1px rgba(255,255,255,.02) !important; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bsauth__native .ele_field input:focus,
.bsauth__native .ele_field select:focus,
.bsauth__native input.form-control:focus,
.bsauth__native select.form-control:focus {
  border-color: rgba(255,45,141,.65) !important; background: rgba(7,12,25,.82) !important; box-shadow: 0 0 0 4px rgba(255,45,141,.08) !important;
}
.bsauth__native .ele_field > span { position: absolute !important; left: 16px !important; top: 7px !important; z-index: 2; transform: none !important; pointer-events: none; color: #69758a !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .65px; text-transform: uppercase; }
.bsauth__native .js_toggle-password { z-index: 4 !important; top: 7px !important; right: 10px !important; left: auto !important; margin: 0 !important; color: #7c879d !important; cursor: pointer; }
.bsauth__native .js_toggle-password svg { width: 20px !important; height: 20px !important; }
.bsauth__native .custom-control { color: #8e9aaf; font-size: 11px; }
.bsauth__native .custom-control-label { color: #8e9aaf !important; }
.bsauth__native a { color: #b89cff; }
.bsauth__native a:hover { color: #ff68ad; }
.bsauth__native .float-right { float: right; }
.bsauth__native .btn.btn-primary,
.bsauth__native button[type="submit"].btn {
  position: relative; width: 100%; min-height: 53px; margin-top: 4px; border: 0 !important; border-radius: 14px !important; color: #fff !important; font-size: 13px; font-weight: 900; letter-spacing: .3px;
  background: linear-gradient(100deg,#ff2388 0%,#a736ff 52%,#276bff 100%) !important; box-shadow: 0 14px 35px rgba(164,52,255,.2) !important; overflow: hidden;
}
.bsauth__native .btn.btn-primary:hover, .bsauth__native button[type="submit"].btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 17px 40px rgba(164,52,255,.27) !important; }
.bsauth__native .btn-secondary { min-height: 49px; border-radius: 14px !important; color: #e8edf7 !important; border: 1px solid rgba(150,164,194,.16) !important; background: rgba(255,255,255,.045) !important; }
.bsauth__native .hr-heading { position: relative; margin: 21px 0 !important; color: #626f84; }
.bsauth__native .hr-heading:before { border-color: rgba(255,255,255,.08) !important; }
.bsauth__native .hr-heading-text { color: #677389 !important; background: #0c1426 !important; }
.bsauth__native .alert { border-radius: 12px; font-size: 12px; }
.bsauth__native .valign.justify-content-center a { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); }
.bsauth__native .valign.justify-content-center img, .bsauth__native .valign.justify-content-center svg { max-width: 23px; max-height: 23px; }
.bsauth__native .form-row { margin-left: -4px; margin-right: -4px; }
.bsauth__native .form-row > .col { padding-left: 4px; padding-right: 4px; min-width: 0; }
.bsauth__native .g-recaptcha, .bsauth__native .cf-turnstile { max-width: 100%; overflow: hidden; }

/* Legacy modern landing form compatibility */
.bsauth__native .ele_login, .bsauth__native .ele_register, .bsauth__native .login_form, .bsauth__native .register_form { max-width: none !important; width: 100% !important; background: transparent !important; box-shadow: none !important; }

.bsauth__secure-row { margin-top: 24px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.075); display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #647086; font-size: 9.5px; }
.bsauth__secure-row span { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.bsauth__secure-row i { color: #3ebf88; }
.bsauth__mobile-feature-strip { display: none; }

.bsauth__footer { position: relative; z-index: 3; max-width: 1480px; margin: 0 auto; padding: 0 38px 25px; }
.bsauth__footer-inner { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(255,255,255,.055); padding-top: 18px; color: #526078; font-size: 10px; }
.bsauth__footer a { color: #657188 !important; }

@media (max-width: 1180px) {
  .bsauth__stage { grid-template-columns: minmax(0, .95fr) minmax(410px, .8fr); gap: 46px; }
  .bsauth__app-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bsauth__app { height: 76px; }
  .bsauth__hero-copy h1 { font-size: 56px; }
}

@media (max-width: 900px) {
  html, body, .main-wrapper { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
  .bsauth { min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
  .bsauth__nav { height: 70px; padding: 0 20px; }
  .bsauth__brand-copy { display: none; }
  .bsauth__live { display: none; }
  .bsauth__nav-link { min-height: 39px; padding: 0 14px; }
  .bsauth__stage { min-height: auto; display: block; padding: 18px 18px 35px; }
  .bsauth__experience { display: none; }
  .bsauth__access { max-width: 520px; margin: 0 auto; justify-self: auto; }
  .bsauth__mobile-brand { display: flex; align-items: center; gap: 11px; margin: 3px 4px 18px; }
  .bsauth__mobile-brand > div { display: flex; flex-direction: column; }
  .bsauth__mobile-brand b { color: #fff; font-size: 17px; }
  .bsauth__mobile-brand small { margin-top: 3px; color: #ff4fa2; font-size: 8px; font-weight: 900; letter-spacing: 1.8px; }
  .bsauth__mobile-logo { width: 41px; height: 41px; flex-basis: 41px; border-radius: 13px; }
  .bsauth__card { padding: 27px 22px 24px; border-radius: 23px; }
  .bsauth__card-top h2 { font-size: 26px; }
  .bsauth__card-top p { font-size: 11.5px; }
  .bsauth__shield { width: 40px; height: 40px; flex-basis: 40px; }
  .bsauth__mobile-feature-strip { margin-top: 13px; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
  .bsauth__mobile-feature-strip span { min-width: 0; height: 54px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; border:1px solid rgba(255,255,255,.07); border-radius:13px; color:#78859a; background:rgba(255,255,255,.025); font-size:8.5px; }
  .bsauth__mobile-feature-strip i { color:#b792ff; font-size:14px; }
  .bsauth__footer { padding: 0 18px calc(22px + env(safe-area-inset-bottom)); }
  .bsauth__footer-inner { display: block; text-align: center; line-height: 1.8; }
  .bsauth__footer-inner > div { margin-top: 6px; }
}

@media (max-width: 520px) {
  .bsauth__nav { height: 64px; padding: 0 14px; }
  .bsauth__brand-logo { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
  .bsauth__nav-link { font-size: 11px; }
  .bsauth__stage { padding: 12px 12px 28px; }
  .bsauth__mobile-brand { margin-left: 2px; }
  .bsauth__card { padding: 24px 16px 20px; border-radius: 21px; }
  .bsauth__card-top { margin-bottom: 20px; }
  .bsauth__card-top h2 { font-size: 23px; letter-spacing: -.6px; }
  .bsauth__card-top p { max-width: 255px; }
  .bsauth__shield { display: none; }
  .bsauth__native .ele_field input,
  .bsauth__native .ele_field select,
  .bsauth__native input.form-control,
  .bsauth__native select.form-control,
  .bsauth__native textarea.form-control { min-height: 55px !important; font-size: 16px !important; }
  .bsauth__native .custom-control { font-size: 10.5px; }
  .bsauth__native .float-right { float: none; display: block; margin-top: 7px; }
  .bsauth__native .form-row { display: block; margin: 0; }
  .bsauth__native .form-row > .col { padding: 0; width: 100%; max-width: 100%; }
  .bsauth__native .g-recaptcha { transform-origin: left top; }
  .bsauth__secure-row { flex-wrap: wrap; justify-content: flex-start; }
  .bsauth__secure-row span { flex: 0 0 auto; }
  .bsauth__mobile-feature-strip { gap: 5px; }
  .bsauth__footer { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 360px) {
  .bsauth__nav-actions { gap: 8px; }
  .bsauth__nav-link { padding: 0 10px; }
  .bsauth__card { padding-left: 13px; padding-right: 13px; }
  .bsauth__mobile-feature-strip span { font-size: 8px; }
}

/* ======================================================================
   BantuSphere 7.3.2 — authentication contrast/accessibility
   ====================================================================== */
.bsauth__card-top h2,
.bsauth__native .fr_welcome_title,
.bsauth__native h1,
.bsauth__native h2,
.bsauth__native h3,
.bsauth__native .card-title,
.bsauth__native .welcome-title {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.28) !important;
  font-weight: 800 !important;
}
.bsauth__native .fr_welcome_title {
  margin-bottom: 22px !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.7px !important;
}
/* If an old/alternate form branch supplies a pale surface, keep the title
   dark enough instead of allowing grey-on-white. */
.bsauth__native .bg-white .fr_welcome_title,
.bsauth__native .card.bg-white .fr_welcome_title,
.bsauth__native [style*="background: white"] .fr_welcome_title,
.bsauth__native [style*="background:#fff"] .fr_welcome_title {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
  text-shadow: none !important;
}


/* ======================================================================
   BantuSphere 7.4.2 — legacy modern form title contrast fix
   ====================================================================== */
.bsauth .bsauth__native.welcome_page .fr_auth_form .bsauth__form-title,
.bsauth .bsauth__native.welcome_page .fr_auth_form h2.fr_welcome_title {
  color: #070b14 !important;
  -webkit-text-fill-color: #070b14 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  background: transparent !important;
  font-weight: 900 !important;
  letter-spacing: -0.8px !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
@media (max-width: 768px) {
  .bsauth .bsauth__native.welcome_page .fr_auth_form .bsauth__form-title,
  .bsauth .bsauth__native.welcome_page .fr_auth_form h2.fr_welcome_title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 18px !important;
  }
}