/* BALELE Phase 7 Auth Pages */
body.balele-page-register,
body.balele-page-login,
body.balele-page-register .balele-body,
body.balele-page-login .balele-body{
  overflow-y:auto !important;
  min-height:100vh;
  background:linear-gradient(135deg,#fffaf2 0%,#f9f7ff 48%,#fff4f6 100%);
}
.balele-auth-page{
  min-height:calc(100vh - 72px);
  padding:48px clamp(18px,4vw,72px) 72px;
  color:#241d1b;
}
.balele-auth-shell{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,520px);
  gap:28px;
  align-items:stretch;
}
.balele-auth-visual,
.balele-auth-card{
  border:1px solid rgba(36,29,27,.06);
  background:rgba(255,255,255,.82);
  border-radius:32px;
  box-shadow:0 28px 80px rgba(124,92,252,.10);
  overflow:hidden;
}
.balele-auth-visual{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:flex-end;
  padding:36px;
  background:linear-gradient(135deg,rgba(255,247,237,.92),rgba(244,240,255,.92));
}
.balele-auth-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(4px);
  opacity:.78;
}
.balele-auth-orb-one{width:260px;height:260px;background:#ffd166;top:58px;left:8%;}
.balele-auth-orb-two{width:360px;height:360px;background:#ff6f61;right:-90px;bottom:-90px;opacity:.20;}
.balele-auth-pin-card{
  position:relative;
  width:min(520px,100%);
  padding:34px;
  border-radius:28px;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.70);
  backdrop-filter:blur(18px);
  box-shadow:0 20px 48px rgba(36,29,27,.08);
}
.balele-auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9b6a20;
  margin-bottom:12px;
}
.balele-auth-pin-card h1,
.balele-auth-heading h2,
.balele-auth-state h2{
  margin:0;
  font-size:clamp(34px,5vw,62px);
  line-height:.98;
  letter-spacing:-.055em;
  color:#241d1b;
}
.balele-auth-heading h2,
.balele-auth-state h2{font-size:clamp(30px,3.5vw,44px);line-height:1.03;}
.balele-auth-pin-card p,
.balele-auth-heading p,
.balele-auth-state p{
  margin:18px 0 0;
  color:#6f655f;
  font-size:16px;
  line-height:1.65;
  font-weight:650;
}
.balele-auth-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:26px;
}
.balele-auth-feature-grid span{
  padding:13px 14px;
  border-radius:16px;
  background:#fff7ea;
  color:#7f5617;
  font-weight:900;
  font-size:13px;
}
.balele-auth-card{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.balele-register-form,.balele-login-form{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.balele-auth-step{
  padding:18px;
  border-radius:22px;
  background:rgba(255,250,244,.75);
  border:1px solid rgba(36,29,27,.07);
}
.balele-auth-step-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.balele-auth-step-head span{
  width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center;
  background:#241d1b;color:#fff;font-weight:950;font-size:13px;
}
.balele-auth-step-head strong{font-size:16px;color:#241d1b;}
.balele-auth-field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.balele-auth-field span{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#9b6a20;}
.balele-auth-field input{
  width:100%;
  min-height:48px;
  padding:0 15px;
  border:1px solid rgba(36,29,27,.12);
  border-radius:16px;
  background:#fff;
  color:#241d1b;
  font:700 15px/1.2 inherit;
  outline:none;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.balele-auth-field input:focus{
  border-color:#7c5cfc;
  box-shadow:0 0 0 4px rgba(124,92,252,.12);
}
.balele-auth-code-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;}
.balele-auth-field-code{margin-bottom:0;}
.balele-auth-secondary,
.balele-auth-ghost,
.balele-auth-primary,
.balele-auth-primary-link{
  min-height:48px;
  border:0;
  border-radius:16px;
  padding:0 20px;
  font:900 14px/1 inherit;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s, opacity .18s, box-shadow .18s;
}
.balele-auth-secondary{background:#fff0c7;color:#7f5617;white-space:nowrap;}
.balele-auth-ghost{background:#fff;color:#241d1b;border:1px solid rgba(36,29,27,.10);width:100%;}
.balele-auth-primary,.balele-auth-primary-link{background:#241d1b;color:#fff;box-shadow:0 16px 36px rgba(36,29,27,.16);}
.balele-auth-primary{width:100%;min-height:56px;font-size:16px;}
.balele-auth-primary:hover,.balele-auth-secondary:hover,.balele-auth-ghost:hover,.balele-auth-primary-link:hover{transform:translateY(-1px);}
.balele-auth-primary[disabled],.balele-auth-secondary[disabled],.balele-auth-ghost[disabled]{opacity:.55;cursor:not-allowed;transform:none;}
.balele-auth-help,.balele-auth-footnote{margin:10px 0 0;color:#8a817b;font-size:13px;line-height:1.55;font-weight:650;}
.balele-auth-footnote{text-align:center;}
.balele-auth-footnote a{color:#7c5cfc;font-weight:900;}
.balele-auth-message{
  padding:13px 15px;
  border-radius:16px;
  font-weight:850;
  font-size:14px;
  line-height:1.45;
  background:#f0ecff;
  color:#4a36c9;
  border:1px solid rgba(124,92,252,.16);
}
.balele-auth-message.is-error{background:#fff1f2;color:#be123c;border-color:rgba(244,63,94,.18);}
.balele-auth-message.is-success{background:#ecfdf5;color:#047857;border-color:rgba(16,185,129,.20);}
.balele-auth-state{padding:18px;}

.balele-auth-check{
  display:flex;
  align-items:center;
  gap:10px;
  color:#6f655f;
  font-weight:850;
  font-size:14px;
  margin-top:4px;
}
.balele-auth-check input{width:18px;height:18px;accent-color:#7c5cfc;}
.balele-auth-links-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:2px;
  font-weight:900;
  font-size:14px;
}
.balele-auth-links-row a{color:#7c5cfc;text-decoration:none;}
.balele-auth-links-row a:hover{text-decoration:underline;}


@media(max-width:900px){
  .balele-auth-page{padding:18px 14px 98px;}
  .balele-auth-shell{grid-template-columns:1fr;gap:16px;}
  .balele-auth-visual{min-height:auto;padding:18px;align-items:stretch;}
  .balele-auth-pin-card{padding:22px;}
  .balele-auth-card{padding:20px;border-radius:28px;}
  .balele-auth-heading h2,.balele-auth-state h2{font-size:34px;}
  .balele-auth-pin-card h1{font-size:42px;}
  .balele-auth-code-row{grid-template-columns:1fr;}
  .balele-auth-feature-grid{grid-template-columns:1fr 1fr;}
}

/* Phase 7 Step 4 — Forgot Password + Mobile Auth Cleanup */
body.balele-page-forgot-password,
body.balele-page-forgot-password .balele-body{
  overflow-y:auto !important;
  min-height:100vh;
  background:linear-gradient(135deg,#fffaf2 0%,#f9f7ff 48%,#fff4f6 100%);
}
.balele-forgot-form{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.balele-forgot-page .balele-auth-card{min-height:560px;}
.balele-forgot-page .balele-auth-heading h2{letter-spacing:-.045em;}

@media(max-width:760px){
  body.balele-page-register,
  body.balele-page-login,
  body.balele-page-forgot-password{
    background:linear-gradient(180deg,#fffaf2 0%,#f9f7ff 48%,#fff7f7 100%) !important;
  }
  .balele-auth-page{
    min-height:auto;
    padding:14px 12px 94px;
  }
  .balele-auth-shell,
  .balele-login-shell,
  .balele-forgot-shell{
    width:100%;
    display:block;
    margin:0 auto;
  }
  .balele-auth-visual{
    display:none !important;
  }
  .balele-auth-card{
    width:100%;
    padding:18px 16px 20px;
    border-radius:26px;
    background:rgba(255,255,255,.92);
    box-shadow:0 18px 52px rgba(124,92,252,.10);
    border:1px solid rgba(36,29,27,.07);
    overflow:visible;
    justify-content:flex-start;
  }
  .balele-forgot-page .balele-auth-card{min-height:auto;}
  .balele-auth-heading{
    margin-bottom:12px;
  }
  .balele-auth-kicker{
    font-size:10px;
    letter-spacing:.16em;
    margin-bottom:8px;
  }
  .balele-auth-heading h2,
  .balele-auth-state h2{
    font-size:32px;
    line-height:1.02;
    letter-spacing:-.055em;
  }
  .balele-register-page .balele-auth-heading h2{
    font-size:30px;
  }
  .balele-auth-heading p,
  .balele-auth-state p{
    margin-top:10px;
    font-size:13px;
    line-height:1.45;
    font-weight:700;
    color:#756b67;
  }
  .balele-register-page .balele-auth-heading p{
    display:none;
  }
  .balele-register-form,
  .balele-login-form,
  .balele-forgot-form{
    gap:10px;
    margin-top:12px;
  }
  .balele-auth-step{
    padding:13px;
    border-radius:20px;
    background:#fffaf4;
  }
  .balele-auth-step-head{
    gap:8px;
    margin-bottom:10px;
  }
  .balele-auth-step-head span{
    width:22px;
    height:22px;
    font-size:11px;
  }
  .balele-auth-step-head strong{
    font-size:14px;
  }
  .balele-auth-field{
    gap:6px;
    margin-bottom:9px;
  }
  .balele-auth-field span{
    font-size:10px;
    letter-spacing:.08em;
  }
  .balele-auth-field input{
    min-height:44px;
    border-radius:14px;
    padding:0 13px;
    font-size:14px;
  }
  .balele-auth-code-row{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .balele-auth-secondary,
  .balele-auth-ghost,
  .balele-auth-primary,
  .balele-auth-primary-link{
    min-height:44px;
    border-radius:14px;
    font-size:13px;
  }
  .balele-auth-primary{
    min-height:50px;
    font-size:15px;
  }
  .balele-auth-help{
    display:none;
  }
  .balele-auth-message{
    padding:11px 12px;
    border-radius:14px;
    font-size:13px;
  }
  .balele-auth-links-row{
    margin-top:0;
    font-size:13px;
    gap:10px;
  }
  .balele-auth-footnote{
    font-size:12px;
    margin-top:8px;
  }
  .balele-auth-check{
    font-size:13px;
  }
}

@media(max-width:390px){
  .balele-auth-page{padding-left:10px;padding-right:10px;}
  .balele-auth-card{padding:16px 14px 18px;border-radius:24px;}
  .balele-auth-heading h2,.balele-auth-state h2{font-size:29px;}
  .balele-register-page .balele-auth-heading h2{font-size:27px;}
  .balele-auth-step{padding:12px;}
  .balele-auth-field input{min-height:42px;}
}

/* Phase 7 Step 5 — Auto code verification + auth polish */
.balele-auth-field input.is-verifying{
  border-color:#a78bfa;
  box-shadow:0 0 0 4px rgba(124,92,252,.12);
  background:linear-gradient(90deg,#fff,#f7f3ff);
}
.balele-auth-field input.is-verified{
  border-color:#10b981;
  box-shadow:0 0 0 4px rgba(16,185,129,.12);
  background:#f7fffb;
}
.balele-auth-field input.is-invalid{
  border-color:#f43f5e;
  box-shadow:0 0 0 4px rgba(244,63,94,.10);
  background:#fff7f8;
}
.balele-auth-message.is-info{
  background:#f5f3ff;
  color:#5b21b6;
  border-color:rgba(124,92,252,.16);
}
.balele-auth-code-row + .balele-auth-help{
  margin-top:8px;
}

@media(max-width:760px){
  .balele-auth-code-row{
    grid-template-columns:1fr auto;
    align-items:end;
  }
  .balele-auth-code-row .balele-auth-secondary{
    min-width:104px;
    padding:0 12px;
  }
  .balele-auth-step[data-step="1"]{
    padding-bottom:12px;
  }
}

@media(max-width:390px){
  .balele-auth-code-row{
    grid-template-columns:1fr;
  }
}

/* Phase 9I1 — Google Login / Auto Registration */
.balele-google-auth-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:14px 0 4px;
  padding:14px;
  border:1px solid rgba(36,29,27,.08);
  border-radius:20px;
  background:rgba(255,255,255,.72);
}
.balele-google-auth-panel.is-busy{
  opacity:.82;
  pointer-events:none;
}
.balele-google-button-wrap{
  width:100%;
  min-height:44px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.balele-google-auth-note{
  margin:0;
  color:#756b67;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
  text-align:center;
}
.balele-auth-divider{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  color:#a19994;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.balele-auth-divider:before,
.balele-auth-divider:after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(36,29,27,.10);
}
.balele-auth-divider span{white-space:nowrap;}
.balele-register-form .balele-google-auth-panel{
  margin-top:0;
  background:rgba(255,250,244,.78);
}

@media(max-width:760px){
  .balele-google-auth-panel{
    margin:10px 0 2px;
    padding:12px;
    border-radius:18px;
  }
  .balele-google-auth-note{
    font-size:11px;
  }
}

/* Phase 9I1A — Google button render diagnostics */
.balele-google-button-loading{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:1px dashed rgba(36,29,27,.16);
  border-radius:999px;
  color:#8b817c;
  font-size:12px;
  font-weight:800;
}
.balele-google-auth-note.is-error{
  color:#b42318;
}