/* AJ.Bank UX 2026 redesign layer
   Inspired by current mobile-app patterns: adaptive next actions, transparent AI
   guidance, restrained glass surfaces, inclusive contrast, and low-friction auth.
   Loaded last so it can unify the older page-specific design systems. */

:root{
  --ux-bg:#f6f8fb;
  --ux-bg-2:#eef3f7;
  --ux-surface:#ffffff;
  --ux-surface-2:#f9fbfd;
  --ux-ink:#102033;
  --ux-muted:#5f6f82;
  --ux-soft:#e3ebf2;
  --ux-line:#d8e2ec;
  --ux-primary:#007f8c;
  --ux-primary-deep:#075866;
  --ux-primary-soft:#dff8f6;
  --ux-amber:#f7b731;
  --ux-coral:#f26f5e;
  --ux-blue:#1f5f9f;
  --ux-green:#25a06a;
  --ux-danger:#b42318;
  --ux-radius:8px;
  --ux-radius-lg:12px;
  --ux-shadow:0 18px 45px rgba(16,32,51,.10);
  --ux-shadow-soft:0 8px 24px rgba(16,32,51,.07);
  --ux-font:'Prompt','Sarabun',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ux-body:'Sarabun','Prompt',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html{scroll-behavior:smooth;}
body,
body.studioBody,
body.toeicLanding,
body.adminLoginBody{
  background:
    linear-gradient(180deg,#fff 0,#f6f8fb 36%,#eef3f7 100%) !important;
  color:var(--ux-ink) !important;
  font-family:var(--ux-body) !important;
  letter-spacing:0;
}
body.studioBody{padding:0 !important;}
body:has(.experienceLanding){background:#fff !important;}
button,
input,
textarea,
select{
  font-family:var(--ux-font) !important;
}
button{transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;}
button:hover{transform:translateY(-1px);}
button:active{transform:translateY(0);}
a{color:inherit;}

/* Global brand and buttons */
.mark,
.kaMark,
.toeicMark,
.loginBrandMark,
.adminLoginBrand .mark{
  border-radius:var(--ux-radius) !important;
  background:linear-gradient(135deg,var(--ux-primary),#0ea5a4) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 8px 20px rgba(0,127,140,.18) !important;
}
.actionBtn,
.kaBtn,
.stEnter,
.stResume,
.stLiveCta,
.toeicPrimary,
.toeicSecondary,
.rpgEnterBtn,
.gazePrimary,
.gazeSecondary,
.gazeGoogle,
.rpgPrimaryChoice,
.rpgGhostChoice,
.loginModalInner .actionBtn,
.adminLoginShell button{
  border-radius:var(--ux-radius) !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}
.actionBtn.primary,
.kaBtn.primary,
.stEnter,
.stResume,
.stLiveCta,
.gazePrimary,
.rpgPrimaryChoice,
.adminLoginShell button{
  background:var(--ux-primary) !important;
  color:#fff !important;
  border-color:var(--ux-primary) !important;
  box-shadow:0 12px 24px rgba(0,127,140,.20) !important;
}
.actionBtn.primary:hover,
.kaBtn.primary:hover,
.stEnter:hover,
.stResume:hover,
.adminLoginShell button:hover{
  background:var(--ux-primary-deep) !important;
}
.actionBtn,
.kaBtn.ghost,
.kaBtn.secondary,
.gazeSecondary,
.rpgGhostChoice,
.toeicSecondary,
.stProfile,
.stIconBtn,
.stAdminBtn{
  background:#fff !important;
  color:var(--ux-ink) !important;
  border:1px solid var(--ux-line) !important;
  box-shadow:none !important;
}

/* Landing page: real app first, less decorative RPG chrome */
.alreadyBanner{
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
  border-bottom:1px solid var(--ux-line) !important;
}
.experienceLanding{
  min-height:100svh !important;
  height:auto !important;
  padding:0 !important;
  background:linear-gradient(180deg,#ffffff 0%,#f7fafc 100%) !important;
  overflow:hidden;
}
.experienceLanding::before,
.experienceLanding::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.rpgTopBar{
  position:sticky !important;
  top:0 !important;
  z-index:50 !important;
  width:min(1180px,calc(100% - 32px)) !important;
  margin:14px auto 0 !important;
  height:64px !important;
  border:1px solid rgba(216,226,236,.86) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.rpgBrand strong,
.gazeBrand,
.gazeHeroCopy h2{
  color:var(--ux-ink) !important;
  font-style:normal !important;
}
.rpgBrand small{color:var(--ux-muted) !important;}
.rpgEnterBtn{
  height:42px !important;
  padding:0 15px !important;
}
.aaMuteBtn{
  width:42px !important;
  height:42px !important;
  border-radius:var(--ux-radius) !important;
  border:1px solid var(--ux-line) !important;
  background:#fff !important;
  color:var(--ux-primary-deep) !important;
}
.experienceHero{
  width:min(1180px,calc(100% - 32px)) !important;
  min-height:calc(100svh - 92px) !important;
  margin:0 auto !important;
  padding:48px 0 76px !important;
  display:grid !important;
  grid-template-columns:minmax(300px,.88fr) minmax(340px,1.12fr) !important;
  align-items:center !important;
  gap:clamp(28px,5vw,72px) !important;
}
.gazeHeroCopy{
  position:relative !important;
  z-index:2 !important;
  max-width:560px !important;
  color:var(--ux-ink) !important;
}
.gazeBrand{
  display:inline-grid !important;
  place-items:center !important;
  min-height:40px !important;
  padding:0 12px !important;
  margin-bottom:18px !important;
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
  font:800 18px var(--ux-font) !important;
}
.gazeHeroCopy h2{
  max-width:520px !important;
  margin:0 0 18px !important;
  font:800 clamp(42px,6vw,76px)/.98 var(--ux-font) !important;
  letter-spacing:0 !important;
}
.gazeHeroCopy p{
  max-width:510px !important;
  color:var(--ux-muted) !important;
  font:500 clamp(15px,1.4vw,18px)/1.72 var(--ux-body) !important;
  margin:0 0 24px !important;
}
.gazeHeroActions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  max-width:440px !important;
}
.gazeHeroActions button{
  min-height:50px !important;
  border:1px solid var(--ux-line) !important;
  box-shadow:none !important;
}
.gazeGoogle{
  grid-column:1/-1 !important;
  justify-content:center !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
}
.gazeGoogle span{
  background:#fff !important;
  color:#1f5f9f !important;
  border:1px solid var(--ux-line) !important;
}
.experienceRail{
  position:relative !important;
  height:min(680px,calc(100svh - 130px)) !important;
  min-height:520px !important;
  justify-self:end !important;
  width:min(560px,100%) !important;
}
.gazePhone{
  right:0 !important;
  top:0 !important;
  width:min(500px,94vw) !important;
  min-height:0 !important;
  height:100% !important;
  padding:28px !important;
  border-radius:var(--ux-radius-lg) !important;
  transform:none !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(216,226,236,.9) !important;
  box-shadow:var(--ux-shadow) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
.gazePhoneTop strong{color:var(--ux-primary-deep) !important;font-style:normal !important;}
.gazePhoneTop button{
  width:42px !important;
  height:42px !important;
  border-radius:var(--ux-radius) !important;
  border:1px solid var(--ux-line) !important;
  box-shadow:none !important;
}
.gazeLesson{
  min-height:196px !important;
  border-radius:var(--ux-radius-lg) !important;
  background:
    linear-gradient(135deg,rgba(0,127,140,.94),rgba(31,95,159,.92)),
    linear-gradient(120deg,#007f8c,#1f5f9f) !important;
  box-shadow:0 18px 36px rgba(0,127,140,.16) !important;
}
.gazeLesson::before{opacity:.18 !important;}
.gazeLesson button{color:var(--ux-primary-deep) !important;border-radius:var(--ux-radius) !important;}
.gazeLesson b{background:rgba(255,255,255,.18) !important;box-shadow:inset 0 0 0 9px rgba(255,255,255,.76) !important;}
.gazeCourseHead strong{color:var(--ux-ink) !important;}
.gazeCourseHead button{color:var(--ux-primary) !important;}
.gazeCourse{
  border-radius:var(--ux-radius) !important;
  border:1px solid var(--ux-line) !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.gazeCourse span{border-radius:var(--ux-radius) !important;}
.gazeCourse.purple span,
body:has(.experienceLanding) .lpPoster{background:linear-gradient(135deg,#007f8c,#55d6cf) !important;}
.gazeCourse.coral span{background:linear-gradient(135deg,#f26f5e,#ffb36b) !important;}
.gazeCourse.mint span{background:linear-gradient(135deg,#25a06a,#b6e6c9) !important;}
.gazeCourse b{color:var(--ux-ink) !important;}
.gazeCourse small{color:var(--ux-muted) !important;}
.gazeBottomNav{
  border-radius:var(--ux-radius-lg) !important;
  border:1px solid var(--ux-line) !important;
  box-shadow:none !important;
}
.gazeBottomNav span:first-child{color:var(--ux-primary) !important;}
.xpPanel,
.xpStory,
.rpgHeroCopy,
.rpgVideoCard,
.rpgHookBg,
.rpgTrailer,
.heroTagline,
.aaDialogBar,
.aaObjFlash{display:none !important;}

/* Landing content below first viewport */
body:has(.experienceLanding) .landingPromos{
  padding:64px 0 88px !important;
  background:
    linear-gradient(180deg,#fff 0,#f7fafc 55%,#fff 100%) !important;
}
body:has(.experienceLanding) .lpInner{max-width:1180px !important;}
body:has(.experienceLanding) .lpIntro h2,
body:has(.experienceLanding) .lpRowHead b,
body:has(.experienceLanding) .lpAboutInfo h3{
  color:var(--ux-ink) !important;
  letter-spacing:0 !important;
}
body:has(.experienceLanding) .lpIntro p,
body:has(.experienceLanding) .lpUspCard p,
body:has(.experienceLanding) .lpAboutLead,
body:has(.experienceLanding) .lpAboutCols li,
body:has(.experienceLanding) .lpPartnerInfo small{
  color:var(--ux-muted) !important;
}
body:has(.experienceLanding) .lpPartnerCard,
body:has(.experienceLanding) .lpUspCard,
body:has(.experienceLanding) .lpAbout,
.loginPromoCard{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:#fff !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
body:has(.experienceLanding) .lpUspCard:nth-child(n){background:#fff !important;}
body:has(.experienceLanding) .lpUspIc{
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
  box-shadow:none !important;
}
body:has(.experienceLanding) .lpUspCard:nth-child(2) .lpUspIc{background:#fff1ed !important;color:var(--ux-coral) !important;}
body:has(.experienceLanding) .lpUspCard:nth-child(3) .lpUspIc{background:#fff8df !important;color:#8a6500 !important;}
body:has(.experienceLanding) .lpUspCard:nth-child(4) .lpUspIc{background:#e8f8ef !important;color:var(--ux-green) !important;}
body:has(.experienceLanding) .lpPartnerMark.xp,
body:has(.experienceLanding) .lpPartnerMark.ek{
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary-deep) !important;
  color:#fff !important;
}
body:has(.experienceLanding) .lpAboutTag,
body:has(.experienceLanding) .lpPartnersLabel{
  color:var(--ux-primary-deep) !important;
  background:var(--ux-primary-soft) !important;
  border:1px solid #cdecea !important;
  border-radius:var(--ux-radius) !important;
}
body:has(.experienceLanding) .lpAboutCta,
body:has(.experienceLanding) .landingLiveCta{
  background:var(--ux-primary) !important;
  color:#fff !important;
  border-radius:var(--ux-radius) !important;
  box-shadow:0 12px 24px rgba(0,127,140,.20) !important;
}
body:has(.experienceLanding) .lpPoster,
body:has(.experienceLanding) .lpBanner{
  border-radius:var(--ux-radius-lg) !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
body:has(.experienceLanding) .lpPoster:nth-child(2){background:linear-gradient(135deg,#f26f5e,#ffb36b) !important;}
body:has(.experienceLanding) .lpPoster:nth-child(3){background:linear-gradient(135deg,#1f5f9f,#7ec8ee) !important;}
body:has(.experienceLanding) .lpPoster:nth-child(4){background:linear-gradient(135deg,#25a06a,#b6e6c9) !important;}
body:has(.experienceLanding) .lpPoster:nth-child(5){background:linear-gradient(135deg,#102033,#1f5f9f) !important;}
body:has(.experienceLanding) .lpPoster:nth-child(6){background:linear-gradient(135deg,#007f8c,#f7b731) !important;}
body:has(.experienceLanding) .lpPoster::before,
.gazeCourse span::before{display:none !important;}
body:has(.experienceLanding) .lpPosterGrad{
  background:linear-gradient(180deg,rgba(16,32,51,0) 24%,rgba(16,32,51,.82) 100%) !important;
}
body:has(.experienceLanding) .lpPosterTitle,
body:has(.experienceLanding) .lpPosterTitle small{color:#fff !important;}

/* Landing login modal */
.loginModal{
  background:rgba(16,32,51,.52) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
.loginModalInner{
  border:1px solid rgba(216,226,236,.92) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
  box-shadow:var(--ux-shadow) !important;
}
.loginModalTitle{color:var(--ux-ink) !important;}
.loginModalSub,
.loginModalInner .demoNote,
.loginModalInner .fieldLabel{color:var(--ux-muted) !important;}
.loginModalClose{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
}
.loginModalInner .authModeTab.active,
.loginModalInner .roleTab.active{
  background:var(--ux-primary) !important;
  border-color:var(--ux-primary) !important;
  color:#fff !important;
  box-shadow:none !important;
}
body:has(.experienceLanding) #loginModal .loginModalInner #loginBtn.actionBtn.primary,
body:has(.experienceLanding) #loginModal .loginModalInner #verifyBtn.actionBtn.primary,
body:has(.experienceLanding) #loginModal .loginModalInner .signupSuccessStep .actionBtn.primary{
  background:var(--ux-primary) !important;
  background-image:none !important;
  border-color:var(--ux-primary) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(0,127,140,.20) !important;
}
.loginModalInner .fieldInput,
.fieldInput{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
}
.loginModalInner .fieldInput:focus,
.fieldInput:focus{
  border-color:var(--ux-primary) !important;
  box-shadow:0 0 0 4px rgba(0,127,140,.12) !important;
}
.googleSignInButton{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
  background:#fff !important;
}

/* Learner studio shell */
.stTop{
  position:sticky !important;
  top:0 !important;
  z-index:40 !important;
  height:72px !important;
  padding:0 24px !important;
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
  background:rgba(255,255,255,.84) !important;
  border-bottom:1px solid var(--ux-line) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
.stBrand{min-width:250px;}
.appLogoMark{
  width:44px !important;
  height:44px !important;
  border-radius:var(--ux-radius) !important;
  background:#fff !important;
  border:1px solid var(--ux-line) !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.appLogoMark img{border-radius:var(--ux-radius);}
.stBrandText strong,
.stSideHead strong{color:var(--ux-ink) !important;}
.stBrandText small,
.stSideHead small{color:var(--ux-muted) !important;}
.stTopNav{
  flex:1 !important;
  border:0 !important;
  background:transparent !important;
  justify-content:center !important;
  gap:6px !important;
}
.stTopNav a{
  border-radius:var(--ux-radius) !important;
  color:var(--ux-muted) !important;
  padding:10px 13px !important;
  font:800 13px var(--ux-font) !important;
  text-decoration:none !important;
}
.stTopNav a.active,
.stTopNav a:hover{
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
}
.stTopRight{display:flex !important;align-items:center !important;gap:8px !important;}
.stIconBtn,
.stAdminBtn,
.stProfile{
  min-height:42px !important;
  border-radius:var(--ux-radius) !important;
}
.stProfile{padding:7px 8px 7px 12px !important;}
.stAvatar{
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
  border-radius:var(--ux-radius) !important;
}
.stShell{
  display:grid !important;
  grid-template-columns:280px minmax(0,1fr) !important;
  min-height:calc(100vh - 72px) !important;
  gap:0 !important;
}
.stSidebar{
  position:sticky !important;
  top:72px !important;
  align-self:start !important;
  height:calc(100vh - 72px) !important;
  padding:22px 16px !important;
  background:#fff !important;
  border-right:1px solid var(--ux-line) !important;
  overflow:auto !important;
}
.stSideHead,
.stSideFoot,
.stCourseNav button,
.stResume{
  border-radius:var(--ux-radius) !important;
}
.stSideHead{
  background:var(--ux-surface-2) !important;
  border:1px solid var(--ux-line) !important;
  padding:14px !important;
}
.stCourseNav{display:grid !important;gap:8px !important;margin-top:14px !important;}
.stCourseNav button{
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--ux-muted) !important;
  text-align:left !important;
}
.stCourseNav button:hover,
.stCourseNav button.active{
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
  border-color:#cdecea !important;
}
.stMain{
  padding:28px clamp(18px,3.4vw,44px) 72px !important;
  background:linear-gradient(180deg,#f8fafc,#eef3f7) !important;
}
.stHero{
  position:relative !important;
  min-height:360px !important;
  display:grid !important;
  grid-template-columns:minmax(260px,1fr) minmax(180px,340px) !important;
  gap:24px !important;
  align-items:center !important;
  padding:34px !important;
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(240,248,249,.92)) !important;
  box-shadow:var(--ux-shadow-soft) !important;
  overflow:hidden !important;
}
.stHeroScene,
.stHeroSceneTint{display:none !important;}
.stHeroCopy{position:relative !important;z-index:2 !important;}
.stHeroPill{
  display:inline-flex !important;
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
  border:1px solid #cdecea !important;
  padding:7px 10px !important;
  font:800 11px var(--ux-font) !important;
  letter-spacing:.04em !important;
}
.stHero h1{
  max-width:620px !important;
  margin:14px 0 10px !important;
  color:var(--ux-ink) !important;
  font:800 clamp(32px,4.4vw,58px)/1.03 var(--ux-font) !important;
  letter-spacing:0 !important;
}
.stHeroSub{
  max-width:540px !important;
  color:var(--ux-muted) !important;
  font:500 17px/1.6 var(--ux-body) !important;
}
.stHero::after{
  content:"Next best lesson";
  position:absolute;
  right:32px;
  top:30px;
  z-index:1;
  padding:8px 10px;
  border:1px solid var(--ux-line);
  border-radius:var(--ux-radius);
  background:#fff;
  color:var(--ux-primary-deep);
  font:800 12px var(--ux-font);
}
.stHeroChar{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  align-self:end !important;
  justify-self:center !important;
  z-index:2 !important;
}
.stHeroChar img{
  max-height:300px !important;
  filter:drop-shadow(0 20px 30px rgba(16,32,51,.18)) !important;
}
.stCharBubble{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.stLiveSpotlight,
.stPartners,
.stCard,
.stStat,
.stProfileMatch,
.stDemandEmpty,
.adminUserCard,
.adminBundleCard,
.adminPaymentCard,
.modalCard,
.loginPromoCard{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.stLiveSpotlight{
  grid-template-columns:minmax(220px,320px) minmax(0,1fr) auto !important;
  margin-top:18px !important;
  background:#102033 !important;
  color:#fff !important;
}
.stLiveMedia{border-radius:var(--ux-radius) !important;background:linear-gradient(135deg,var(--ux-primary),var(--ux-blue)) !important;}
.stLiveCopy h2,
.stLiveCopy p,
.stLiveCopy small{color:inherit !important;}
.stPartners{
  padding:14px !important;
  margin-top:18px !important;
}
.stPartnerMark,
.kaPartnerMark{
  border-radius:var(--ux-radius) !important;
}
.stPartnerMark.xp,
.kaPartnerMark.xp{background:var(--ux-primary-deep) !important;color:#fff !important;box-shadow:none !important;}
.stPartnerMark.ek,
.kaPartnerMark.ek{background:var(--ux-amber) !important;color:#102033 !important;box-shadow:none !important;}
.stPromos{margin-top:18px !important;}
.stGrid{
  display:grid !important;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr) !important;
  gap:16px !important;
  margin-top:18px !important;
}
.stCard{padding:18px !important;}
.stCardHead b,
.stRowHead b,
.stProfileMatch h2{color:var(--ux-ink) !important;}
.stCardHead a,
.stRowHead a{color:var(--ux-primary) !important;}
.stMissions #stMissionList,
.stNext{min-width:0;}
.stStats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  margin-top:18px !important;
}
.stStat{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding:16px !important;
}
.stStatIc{
  display:grid !important;
  place-items:center !important;
  width:42px !important;
  height:42px !important;
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
}
.stStat b{color:var(--ux-ink) !important;}
.stStat small{color:var(--ux-muted) !important;}
.stPoster,
.stBanner{
  border-radius:var(--ux-radius-lg) !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.stPosterGrad{background:linear-gradient(180deg,rgba(16,32,51,0) 26%,rgba(16,32,51,.86)) !important;}
.stFeatureBanner::before{background:linear-gradient(90deg,rgba(16,32,51,.80),rgba(16,32,51,.24)) !important;}

/* Shared modal and AI tutor drawer */
#backdrop{
  background:rgba(16,32,51,.52) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
#modal{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
  box-shadow:var(--ux-shadow) !important;
}
#modal header{
  border-bottom:1px solid var(--ux-line) !important;
}
#modal header button,
#modal input,
#modal textarea,
#modal select,
.modalCard button{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
}
.modalCard button.primary,
#modal button.primary{
  background:var(--ux-primary) !important;
  border-color:var(--ux-primary) !important;
  color:#fff !important;
}
#drawer{
  width:min(460px,100vw) !important;
  border-left:1px solid var(--ux-line) !important;
  background:#fff !important;
  box-shadow:-18px 0 60px rgba(16,32,51,.16) !important;
}
#drawer header{
  border-bottom:1px solid var(--ux-line) !important;
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
#drawerIcon{
  border:0 !important;
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary) !important;
  color:#fff !important;
}
#drawer h3{color:var(--ux-ink) !important;}
#drawer p{color:var(--ux-muted) !important;}
#messages{
  background:var(--ux-bg) !important;
}
.msg{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  box-shadow:none !important;
}
.msg.agent{background:#fff !important;color:var(--ux-ink) !important;}
.msg.agent::after{
  content:"Why this answer: course source + learner context";
  display:block;
  margin-top:8px;
  color:var(--ux-primary-deep);
  font:700 11px var(--ux-font);
}
.msg.user{background:var(--ux-primary) !important;color:#fff !important;}
#chips{
  border-top:1px solid var(--ux-line) !important;
  background:#fff !important;
}
#chips button{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
  background:#fff !important;
  color:var(--ux-primary-deep) !important;
}
#drawer footer{
  border-top:1px solid var(--ux-line) !important;
  background:#fff !important;
  grid-template-columns:1fr 76px !important;
}
#drawer input{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
}
#drawer footer button{
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary) !important;
  color:#fff !important;
}
.drawerClose{
  border:1px solid var(--ux-line) !important;
  background:#fff !important;
  border-radius:var(--ux-radius) !important;
}

/* Post-login app splash */
.ajAppSplash{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,248,251,.96)) !important;
  color:var(--ux-ink) !important;
}
.ajAppSplash::before,
.ajAppSplash::after,
.ajSplashPhone::before{
  content:none !important;
  display:none !important;
}
.ajSplashStage{
  gap:18px !important;
}
.ajSplashPhone{
  width:min(260px,70vw) !important;
  height:min(360px,62vh) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:#fff !important;
  border:1px solid var(--ux-line) !important;
  box-shadow:var(--ux-shadow) !important;
  display:grid !important;
  place-items:center !important;
}
.ajSplashPhone img{
  width:72% !important;
  height:auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 16px 28px rgba(16,32,51,.12)) !important;
}
.ajSplashEnter{
  min-height:48px !important;
  border:1px solid var(--ux-primary) !important;
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary) !important;
  color:#fff !important;
  padding:0 22px !important;
  font:800 14px var(--ux-font) !important;
  box-shadow:0 12px 24px rgba(0,127,140,.20) !important;
}
.ajOnbOverlay,
.ajGuideOverlay{
  background:rgba(16,32,51,.52) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}
.ajOnbCard,
.ajGuideCard{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
  box-shadow:var(--ux-shadow) !important;
}
.ajOnbStepLabel,
.ajGuideCount{
  border-radius:var(--ux-radius) !important;
  border:1px solid #cdecea !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
  font:800 11px var(--ux-font) !important;
}
.ajOnbHeading,
.ajGuideTitle{
  color:var(--ux-ink) !important;
  font-family:var(--ux-font) !important;
  letter-spacing:0 !important;
}
.ajOnbBody,
.ajGuideBody,
.ajOnbHelp{
  color:var(--ux-muted) !important;
}
.ajOnbArt{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:var(--ux-primary-soft) !important;
  box-shadow:none !important;
}
.ajOnbFields input,
.ajOnbChoice,
.ajGuideBack,
.ajGuideSkip,
.ajOnbBack,
.ajOnbSkip{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
  background:#fff !important;
  color:var(--ux-ink) !important;
}
.ajOnbChoice:has(input:checked),
.ajOnbChoice.isSelected{
  border-color:var(--ux-primary) !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
}
.ajOnbNext,
.ajGuideNext{
  border:1px solid var(--ux-primary) !important;
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(0,127,140,.18) !important;
}
.ajOnbDot{
  background:#cbd5df !important;
}
.ajOnbDot.on{
  background:var(--ux-primary) !important;
}
.ajGuideTarget{
  outline:3px solid rgba(0,127,140,.38) !important;
  outline-offset:5px !important;
  border-radius:var(--ux-radius-lg) !important;
}

/* Study app */
.kaTop{
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid var(--ux-line) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
.kaPage{max-width:1180px !important;}
.kaBrand h1,
.kaHero h2,
.kaSectionHead h3,
.kaCard h4,
.kaCourseHeadCopy h2,
.kaLessonTitle,
.kaModalHead h3{
  color:var(--ux-ink) !important;
  letter-spacing:0 !important;
}
.kaBrand small,
.kaSectionHead p,
.kaCardDesc,
.kaCardMeta,
.kaProgressLabel,
.kaModBody p,
.kaSideCard p,
.kaContent,
.kaMaterialBody small{
  color:var(--ux-muted) !important;
}
.kaPlanPill{
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
}
.kaBackStudio{
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary) !important;
}
.kaHero,
.kaCourseHead{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:
    linear-gradient(135deg,#ffffff 0%,#eff8f8 100%) !important;
  color:var(--ux-ink) !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.kaHero::after,
.kaCourseHead::after{display:none !important;}
.kaHeroKicker,
.kaChip,
.kaBadge{
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
}
.kaHero p,
.kaCourseHeadCopy p{color:var(--ux-muted) !important;}
.kaHeroStat b,
.kaCourseMeta div b,
.kaPlanPrice b,
.kaDocPrice{color:var(--ux-primary-deep) !important;}
.kaHeroStat span,
.kaCourseMeta div span{color:var(--ux-muted) !important;}
.kaCard,
.kaModule,
.kaContent,
.kaQuiz,
.kaSideCard,
.kaMaterial,
.kaPlanCard,
.kaDocCard,
.kaPartnerCard,
.kaPreviewSummary,
.kaLockNote,
.kaModal{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:#fff !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.kaCardTop,
.kaCourseHeadCopy .kaChip{
  background:linear-gradient(135deg,var(--ux-primary),var(--ux-blue)) !important;
  color:#fff !important;
}
.kaCardTop.locked{background:linear-gradient(135deg,#667085,#98a2b3) !important;}
.kaCard:hover,
.kaModule:hover,
.kaDocCard:hover,
.kaPlanCard:hover{
  border-color:#b8c9d8 !important;
  transform:translateY(-2px) !important;
}
.kaProgress,
.mProgress{background:#e8eef4 !important;}
.kaProgress i,
.mProgress i{
  background:linear-gradient(90deg,var(--ux-primary),#3bd2c6) !important;
}
.kaBtn.primary{background:var(--ux-primary) !important;color:#fff !important;}
.kaBtn.secondary{background:#102033 !important;color:#fff !important;}
.kaBtn.locked{background:#eef2f6 !important;color:#667085 !important;}
.kaModNum,
.kaMaterialIcon,
.kaDocIcon{
  border-radius:var(--ux-radius) !important;
  background:var(--ux-primary-soft) !important;
  color:var(--ux-primary-deep) !important;
}
.kaTutorCard{
  background:linear-gradient(135deg,var(--ux-primary),#102033) !important;
  color:#fff !important;
}
.kaTutorCard h4,
.kaTutorCard p{color:#fff !important;}
.kaLiveSpotlight{
  border-radius:var(--ux-radius-lg) !important;
  background:#102033 !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.kaLiveSignal{border-radius:var(--ux-radius) !important;background:var(--ux-primary) !important;}
.kaQuizOpt,
.kaModalHead button{
  border-radius:var(--ux-radius) !important;
}

/* Admin and generated CMS panels */
body.adminLoginBody{
  background:
    linear-gradient(135deg,#ffffff 0 54%,#eef7f8 54% 100%) !important;
}
.adminLoginShell{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  box-shadow:var(--ux-shadow) !important;
  background:#fff !important;
}
.adminLoginShell h1{color:var(--ux-ink) !important;}
.adminLoginShell p,
.adminLoginBrand small{color:var(--ux-muted) !important;}
.adminLoginShell input{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
}
.adminLoginShell input:focus{
  outline:none !important;
  border-color:var(--ux-primary) !important;
  box-shadow:0 0 0 4px rgba(0,127,140,.12) !important;
}
.adminQuickStats div,
.adminSimpleManage,
.adminAccessDetails,
.adminMarketingEditor,
.adminLiveCard,
.adminEmptyState{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius-lg) !important;
  background:#fff !important;
  box-shadow:none !important;
}
.adminQuickStats b,
.adminSectionHead h3,
.adminUserTop h4,
.adminBundleCard b,
.adminAccessDetails summary{color:var(--ux-primary-deep) !important;}
.adminUserToolbar input,
.adminUserToolbar select,
.adminUserToolbar button,
.adminSimpleManage input,
.adminSimpleManage select,
.adminFormGrid input,
.adminFormGrid select,
.adminUserCard textarea,
.adminInline select{
  border:1px solid var(--ux-line) !important;
  border-radius:var(--ux-radius) !important;
}
.adminStatus.ok{background:#e8f8ef !important;color:#137348 !important;}
.adminStatus.bad{background:#fff0ed !important;color:var(--ux-danger) !important;}
.badge{
  border-radius:var(--ux-radius) !important;
  border:1px solid var(--ux-line) !important;
  background:var(--ux-surface-2) !important;
  color:var(--ux-primary-deep) !important;
}

/* TOEIC live page */
body.toeicLanding{
  --toeic-navy:#102033;
  --toeic-blue:#007f8c;
  --toeic-yellow:#f7b731;
  --toeic-paper:#f6f8fb;
}
.toeicNav{
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid var(--ux-line) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
.toeicBrand b{color:var(--ux-ink) !important;}
.toeicBrand small{color:var(--ux-muted) !important;}
.toeicHero{
  background:linear-gradient(135deg,#102033,#075866) !important;
}
.toeicBadge,
.toeicPrimary{
  border-radius:var(--ux-radius) !important;
}
.toeicBadge{background:var(--ux-coral) !important;}
.toeicMeta div,
.toeicSteps article,
.toeicTimeline div,
.toeicRegisterCard{
  border-radius:var(--ux-radius-lg) !important;
  border:1px solid var(--ux-line) !important;
  background:#fff !important;
  box-shadow:var(--ux-shadow-soft) !important;
}
.toeicSteps b{background:var(--ux-primary-soft) !important;color:var(--ux-primary-deep) !important;}
.toeicCurriculum{background:#f6f8fb !important;}
.toeicPack{background:#102033 !important;}

/* Avatar and simple utility pages inherit the same surface language. */
.avatarShell,
.avatarPanel,
.avatarCard{
  border-radius:var(--ux-radius-lg) !important;
  border:1px solid var(--ux-line) !important;
  background:#fff !important;
  box-shadow:var(--ux-shadow-soft) !important;
}

/* Mobile navigation and responsive tightening */
@media(max-width:1040px){
  .experienceHero{
    grid-template-columns:1fr !important;
    min-height:0 !important;
    padding-top:34px !important;
  }
  .gazeHeroCopy{
    text-align:left !important;
    justify-self:stretch !important;
  }
  .experienceRail{
    justify-self:center !important;
    height:610px !important;
  }
  .stShell{grid-template-columns:1fr !important;}
  .stSidebar{display:none !important;}
  .stGrid{grid-template-columns:1fr !important;}
}
@media(max-width:780px){
  body.studioBody{padding-bottom:72px !important;}
  .stTop{
    height:auto !important;
    min-height:64px !important;
    padding:10px 14px !important;
    flex-wrap:wrap !important;
  }
  .stBrand{min-width:0;flex:1;}
  .stTopNav{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    bottom:10px !important;
    z-index:80 !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:6px !important;
    padding:8px !important;
    border:1px solid var(--ux-line) !important;
    border-radius:var(--ux-radius-lg) !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 10px 32px rgba(16,32,51,.18) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
  }
  .stTopNav a{
    min-height:44px !important;
    display:grid !important;
    place-items:center !important;
    padding:6px !important;
    font-size:11px !important;
  }
  .stTopRight{width:100%;justify-content:flex-end;}
  .stMain{padding:18px 14px 94px !important;}
  .stHero{
    grid-template-columns:1fr !important;
    min-height:0 !important;
    padding:22px !important;
  }
  .stHero::after{display:none !important;}
  .stHeroChar{display:none !important;}
  .stStats{grid-template-columns:1fr !important;}
  .stLiveSpotlight{grid-template-columns:1fr !important;}
  #drawer{width:100vw !important;}
}
@media(max-width:620px){
  .rpgTopBar{
    width:calc(100% - 24px) !important;
    height:auto !important;
    min-height:60px !important;
    margin-top:12px !important;
    padding:8px !important;
  }
  .experienceHero{width:calc(100% - 24px) !important;padding:26px 0 54px !important;}
  .gazeBrand{font-size:16px !important;}
  .gazeHeroCopy h2{font-size:42px !important;}
  .gazeHeroActions{grid-template-columns:1fr !important;max-width:none !important;}
  .gazeGoogle{grid-column:auto !important;}
  .experienceRail{height:540px !important;min-height:0 !important;}
  .gazePhone{
    width:100% !important;
    padding:18px !important;
    transform:none !important;
  }
  .gazeLesson{min-height:168px !important;padding:22px !important;}
  .gazeLesson h3{font-size:22px !important;}
  .gazeCourses{grid-template-columns:1fr !important;}
  .gazeCourse span{height:54px !important;}
  .gazeCourse b{min-height:0 !important;}
  .gazeBottomNav{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
  body:has(.experienceLanding) .lpAbout{grid-template-columns:1fr !important;}
  .kaTopInner{padding:0 14px !important;}
  .kaPlanPill{display:none !important;}
  .kaHero,
  .kaCourseHead{padding:24px 18px !important;}
  .kaGrid,
  .kaUnlockGrid,
  .kaDocGrid{grid-template-columns:1fr !important;}
  .kaModule{grid-template-columns:46px 1fr !important;}
  .kaModAction{grid-column:1/-1 !important;}
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* Reference pass: purple bento layout inspired by the supplied ZenWave screen. */
:root{
  --zb-bg-a:#241889;
  --zb-bg-b:#342aa5;
  --zb-bg-c:#773bc5;
  --zb-panel:#4e5ab3;
  --zb-panel-2:#5c65bd;
  --zb-deep:#22264e;
  --zb-ink:#15172c;
  --zb-muted:#6f7288;
  --zb-white:#fffdf8;
  --zb-mint:#b9eed6;
  --zb-mint-2:#70dcc5;
  --zb-coral:#ff776f;
  --zb-cream:#fff0ce;
  --zb-line:rgba(255,255,255,.18);
  --zb-radius-xl:36px;
  --zb-radius-lg:26px;
  --zb-radius:18px;
  --zb-shadow:0 28px 70px rgba(10,12,44,.32);
  --zb-soft-shadow:0 18px 38px rgba(18,20,70,.20);
}

body:has(.experienceLanding),
body:has(.kaPage),
body.studioBody,
body.adminLoginBody,
body.toeicLanding{
  background:
    linear-gradient(124deg,rgba(16,13,93,.72) 0 28%,transparent 28% 100%),
    linear-gradient(302deg,transparent 0 58%,rgba(124,58,183,.55) 58% 100%),
    radial-gradient(circle at 72% 9%,rgba(124,58,183,.58),transparent 30%),
    linear-gradient(135deg,var(--zb-bg-a) 0%,var(--zb-bg-b) 48%,var(--zb-bg-c) 100%) !important;
  color:#fff !important;
}

body:has(.experienceLanding)::before,
body:has(.kaPage)::before,
body.studioBody::before,
body.toeicLanding::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
  background:
    linear-gradient(42deg,transparent 0 20%,rgba(255,255,255,.07) 20% 21%,transparent 21% 100%),
    linear-gradient(143deg,transparent 0 67%,rgba(255,255,255,.05) 67% 68%,transparent 68% 100%) !important;
}

body:has(.experienceLanding) .experienceLanding{
  background:transparent !important;
}

body:has(.kaPage) .kaPage{
  background:transparent !important;
}

.experienceLanding::before,
.experienceLanding::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.experienceLanding::before{
  width:70vw !important;
  height:72vh !important;
  left:-18vw !important;
  bottom:-20vh !important;
  background:linear-gradient(143deg,rgba(108,70,217,.72),rgba(72,56,181,.22)) !important;
  clip-path:polygon(0 22%,64% 0,100% 44%,48% 100%,0 76%) !important;
}

.experienceLanding::after{
  width:50vw !important;
  height:46vh !important;
  right:-19vw !important;
  top:14vh !important;
  background:linear-gradient(142deg,rgba(121,64,196,.58),rgba(40,32,145,.18)) !important;
  clip-path:polygon(12% 0,100% 20%,88% 100%,0 62%) !important;
}

.rpgTopBar{
  border-color:rgba(255,255,255,.18) !important;
  border-radius:24px !important;
  background:rgba(54,55,145,.68) !important;
  color:#fff !important;
  box-shadow:0 18px 44px rgba(11,13,64,.25) !important;
}

.rpgBrand strong,
.rpgBrand small,
.rpgTopBar a,
.rpgTopBar button{
  color:#fff !important;
}

.rpgEnterBtn,
.aaMuteBtn{
  border-color:rgba(255,255,255,.26) !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-radius:18px !important;
}

.experienceHero{
  position:relative !important;
  z-index:1 !important;
  grid-template-columns:minmax(320px,.95fr) minmax(420px,1fr) !important;
  gap:20px !important;
  min-height:calc(100svh - 90px) !important;
  padding:28px 0 68px !important;
}

.gazeHeroCopy{
  align-self:stretch !important;
  max-width:none !important;
  min-height:min(670px,calc(100svh - 145px)) !important;
  padding:clamp(34px,5vw,58px) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--zb-radius-xl) !important;
  background:
    linear-gradient(145deg,rgba(91,102,190,.76),rgba(69,78,168,.64)),
    rgba(68,74,171,.62) !important;
  color:#fff !important;
  box-shadow:var(--zb-shadow) !important;
  overflow:hidden !important;
}

.gazeHeroCopy::after{
  content:"Wifi Enabled" !important;
  position:absolute !important;
  left:clamp(34px,5vw,58px) !important;
  bottom:clamp(28px,4vw,48px) !important;
  padding-left:28px !important;
  color:rgba(255,255,255,.82) !important;
  font:700 13px/1 var(--ux-font) !important;
}

.gazeHeroCopy::before{
  content:"" !important;
  position:absolute !important;
  left:clamp(34px,5vw,58px) !important;
  bottom:clamp(27px,4vw,47px) !important;
  width:17px !important;
  height:17px !important;
  border:1.5px solid rgba(255,255,255,.86) !important;
  border-radius:50% !important;
  box-shadow:inset 4px 0 0 -2px rgba(255,255,255,.86) !important;
}

.gazeBrand{
  display:block !important;
  width:max-content !important;
  padding:0 !important;
  min-height:auto !important;
  margin:0 0 26px !important;
  background:transparent !important;
  color:#fff !important;
  font:900 20px/1 var(--ux-font) !important;
}

.gazeHeroCopy h2{
  max-width:620px !important;
  color:#fff !important;
  font:900 clamp(58px,6.8vw,86px)/1.08 var(--ux-font) !important;
  margin:0 0 26px !important;
}

.gazeHeroCopy p{
  max-width:420px !important;
  color:rgba(255,255,255,.78) !important;
  font:600 18px/1.55 var(--ux-body) !important;
}

.gazeHeroActions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  max-width:430px !important;
  margin-top:16px !important;
}

.gazeHeroActions button,
.gazePrimary,
.gazeSecondary,
.gazeGoogle{
  min-height:58px !important;
  padding:0 32px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:var(--zb-white) !important;
  color:var(--zb-ink) !important;
  box-shadow:0 12px 28px rgba(10,12,44,.18) !important;
}

.gazeSecondary,
.gazeGoogle{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}

.gazeGoogle span{
  border:0 !important;
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
}

.experienceRail{
  align-self:stretch !important;
  width:100% !important;
  min-height:min(670px,calc(100svh - 145px)) !important;
  max-height:720px !important;
  height:auto !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:minmax(255px,.92fr) minmax(300px,1fr) !important;
  gap:20px !important;
  overflow:visible !important;
}

.experienceRail::before,
.experienceRail::after{
  position:absolute !important;
  z-index:3 !important;
  pointer-events:none !important;
  border-radius:var(--zb-radius-lg) !important;
  box-shadow:var(--zb-soft-shadow) !important;
}

.experienceRail::before{
  content:"7.94\A Balance" !important;
  white-space:pre !important;
  right:0 !important;
  top:298px !important;
  width:172px !important;
  height:172px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  color:#fff !important;
  font:900 34px/1.15 var(--ux-font) !important;
  background:
    radial-gradient(circle at center,transparent 0 48%,rgba(255,255,255,.9) 49% 51%,transparent 52% 100%),
    linear-gradient(135deg,var(--zb-coral),#ff857b) !important;
}

.experienceRail::after{
  content:"" !important;
  white-space:pre !important;
  right:0 !important;
  bottom:4px !important;
  width:220px !important;
  height:155px !important;
  padding:30px 26px !important;
  display:none !important;
}

.experienceRail > .gazeFeatureStrip,
.experienceRail > .xpPanel,
.experienceRail > .xpStory{
  display:none !important;
}

.gazePhone{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  grid-template-rows:1.05fr .78fr .78fr !important;
  gap:18px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.gazePhoneTop{
  grid-column:1/-1 !important;
  min-height:255px !important;
  padding:38px 42% 34px 34px !important;
  border-radius:var(--zb-radius-xl) !important;
  background:
    radial-gradient(ellipse at 83% 42%,rgba(255,117,166,.92) 0 8%,transparent 9%),
    radial-gradient(ellipse at 78% 44%,rgba(110,245,218,.96) 0 25%,transparent 26%),
    linear-gradient(135deg,#c7efd7,#76dac7) !important;
  box-shadow:var(--zb-soft-shadow) !important;
  position:relative !important;
  overflow:hidden !important;
}

.gazePhoneTop::before{
  content:"AJ.Bank Bento 2.0\A Adaptive Learning" !important;
  white-space:pre !important;
  position:absolute !important;
  left:28px !important;
  top:32px !important;
  width:190px !important;
  min-height:130px !important;
  padding:24px !important;
  border-radius:18px !important;
  background:#fff !important;
  color:var(--zb-ink) !important;
  font:900 16px/1.55 var(--ux-font) !important;
  box-shadow:0 18px 40px rgba(28,34,82,.16) !important;
}

.gazePhoneTop::after{
  content:"" !important;
  position:absolute !important;
  right:40px !important;
  top:36px !important;
  width:210px !important;
  height:150px !important;
  border:30px solid rgba(190,255,235,.88) !important;
  border-right-color:rgba(255,108,156,.86) !important;
  border-bottom-color:rgba(112,220,197,.92) !important;
  border-radius:50% !important;
  transform:rotate(-18deg) !important;
  filter:drop-shadow(0 20px 28px rgba(28,34,82,.22)) !important;
}

.gazePhoneTop strong,
.gazePhoneTop small,
.gazePhoneTop button{
  position:relative !important;
  z-index:2 !important;
}

.gazePhoneTop strong,
.gazePhoneTop small{
  opacity:0 !important;
}

.gazePhoneTop button{
  position:absolute !important;
  left:210px !important;
  bottom:28px !important;
  width:58px !important;
  height:58px !important;
  border-radius:14px !important;
  background:#fff !important;
  color:var(--zb-ink) !important;
  border:0 !important;
}

.gazeLesson{
  grid-column:1 / span 1 !important;
  grid-row:2 !important;
  min-height:174px !important;
  border-radius:var(--zb-radius-lg) !important;
  background:#fff !important;
  color:var(--zb-ink) !important;
  box-shadow:var(--zb-soft-shadow) !important;
}

.gazeLesson::before{
  content:"25" !important;
  display:block !important;
  margin-bottom:18px !important;
  padding-top:34px !important;
  border-top:2px solid rgba(21,23,44,.18) !important;
  color:var(--zb-ink) !important;
  font:900 30px/1 var(--ux-font) !important;
}

.gazeLesson h3{
  font-size:0 !important;
}

.gazeLesson h3::after{
  content:"Dopamine Spikes" !important;
  font:800 12px/1.1 var(--ux-font) !important;
}

.gazeLesson p,
.gazeLesson .gazeProgress{
  display:none !important;
}

.gazeCourses{
  display:contents !important;
}

.gazeCourseHead{
  display:none !important;
}

.gazeCourse{
  min-height:174px !important;
  border:0 !important;
  border-radius:var(--zb-radius-lg) !important;
  box-shadow:var(--zb-soft-shadow) !important;
}

.gazeCourse:nth-child(1){
  grid-column:2 !important;
  grid-row:2 !important;
  background:var(--zb-deep) !important;
  color:#fff !important;
}

.gazeCourse:nth-child(1)::before{
  content:"5.32" !important;
  display:block !important;
  margin:42px 0 8px !important;
  color:#fff !important;
  font:900 31px/1 var(--ux-font) !important;
}

.gazeCourse:nth-child(2){
  grid-column:1 / span 2 !important;
  grid-row:3 !important;
  background:linear-gradient(135deg,#dff0dc,#c8e6dc) !important;
  color:var(--zb-ink) !important;
  padding-left:34px !important;
}

.gazeCourse:nth-child(2)::before{
  content:"Haisley AI" !important;
  display:block !important;
  color:var(--zb-ink) !important;
  font:700 12px/1 var(--ux-font) !important;
}

.gazeCourse span{
  display:none !important;
}

.gazeCourse:nth-child(3){
  grid-column:3 !important;
  grid-row:3 !important;
  background:var(--zb-cream) !important;
  color:var(--zb-ink) !important;
  padding:34px 24px !important;
}

.gazeCourse:nth-child(3)::after{
  content:"AppStore" !important;
  display:inline-grid !important;
  place-items:center !important;
  width:max-content !important;
  min-height:30px !important;
  margin-top:20px !important;
  padding:0 16px !important;
  border:1px solid rgba(21,23,44,.4) !important;
  border-radius:999px !important;
  color:var(--zb-ink) !important;
  font:800 11px/1 var(--ux-font) !important;
}

.gazeCourse b{
  color:inherit !important;
  margin-top:8px !important;
  font:900 18px/1.12 var(--ux-font) !important;
}

.gazeCourse small{
  color:inherit !important;
  opacity:.7 !important;
}

.gazeBottomNav{
  display:none !important;
}

body:has(.experienceLanding) .landingPromos,
body:has(.experienceLanding) .lpAbout,
body:has(.experienceLanding) .lpPartnerCard,
body:has(.experienceLanding) .lpUspCard,
body:has(.experienceLanding) .lpBanner{
  background:rgba(58,56,145,.58) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:var(--zb-radius-lg) !important;
  color:#fff !important;
  box-shadow:var(--zb-soft-shadow) !important;
}

body:has(.experienceLanding) .lpIntro h2,
body:has(.experienceLanding) .lpRowHead b,
body:has(.experienceLanding) .lpAboutInfo h3,
body:has(.experienceLanding) .lpUspCard h3,
body:has(.experienceLanding) .lpPartnerInfo b{
  color:#fff !important;
}

body:has(.experienceLanding) .lpIntro p,
body:has(.experienceLanding) .lpUspCard p,
body:has(.experienceLanding) .lpAboutLead,
body:has(.experienceLanding) .lpAboutCols li,
body:has(.experienceLanding) .lpPartnerInfo small{
  color:rgba(255,255,255,.74) !important;
}

body:has(.experienceLanding) .lpUspCard:nth-child(1),
body:has(.experienceLanding) .lpUspCard:nth-child(4){
  background:#fff !important;
  color:var(--zb-ink) !important;
}

body:has(.experienceLanding) .lpUspCard:nth-child(1) h3,
body:has(.experienceLanding) .lpUspCard:nth-child(4) h3{
  color:var(--zb-ink) !important;
}

body:has(.experienceLanding) .lpUspCard:nth-child(1) p,
body:has(.experienceLanding) .lpUspCard:nth-child(4) p{
  color:var(--zb-muted) !important;
}

.loginModalInner,
#modal .modalCard,
#drawer .modalCard,
.adminLoginShell{
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:var(--zb-radius-lg) !important;
  background:rgba(255,253,248,.96) !important;
  color:var(--zb-ink) !important;
  box-shadow:var(--zb-shadow) !important;
}

.loginModalInner h2,
.loginModalInner h3,
.loginModalInner .modalTitle,
.adminLoginShell h1{
  color:var(--zb-ink) !important;
}

.loginModalInner .authModeTab.active,
.loginModalInner .roleTab.active,
.loginModalInner .actionBtn.primary,
.adminLoginShell button{
  background:var(--zb-deep) !important;
  color:#fff !important;
  border-color:var(--zb-deep) !important;
  border-radius:18px !important;
  box-shadow:0 14px 28px rgba(34,38,78,.22) !important;
}

body:has(.experienceLanding) #loginModal .loginModalInner #loginBtn.actionBtn.primary,
body:has(.experienceLanding) #loginModal .loginModalInner #verifyBtn.actionBtn.primary,
body:has(.experienceLanding) #loginModal .loginModalInner .signupSuccessStep .actionBtn.primary{
  background:var(--zb-deep) !important;
  color:#fff !important;
  border-color:var(--zb-deep) !important;
  border-radius:18px !important;
  box-shadow:0 14px 28px rgba(34,38,78,.22) !important;
}

.loginModalInner .fieldInput,
.adminLoginShell input{
  border-radius:18px !important;
  background:#fff !important;
  border-color:#e1e2ee !important;
}

.stShell,
.stMain,
.kaApp,
.kaShell,
.kaMain{
  background:transparent !important;
}

.stTop,
.kaTop{
  background:rgba(45,43,133,.78) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#fff !important;
  box-shadow:0 16px 42px rgba(12,13,62,.24) !important;
}

.stBrandText strong,
.stBrandText small,
.stTopNav a,
.stTopRight button,
.kaBrand h1,
.kaBrand small,
.kaTop a,
.kaTop button{
  color:#fff !important;
}

body:has(.kaPage) .kaSectionHead h3,
body:has(.kaPage) .kaSectionHead p{
  color:#fff !important;
}

.stMain{
  padding:28px clamp(18px,3.4vw,44px) 72px !important;
}

.stHero,
.kaHero,
.kaCourseHead{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--zb-radius-xl) !important;
  background:
    linear-gradient(145deg,rgba(91,102,190,.8),rgba(70,79,169,.68)) !important;
  color:#fff !important;
  box-shadow:var(--zb-shadow) !important;
}

.stHero h1,
.stHeroSub,
.stHeroPill,
.kaHero h2,
.kaHero p,
.kaHeroKicker,
.kaHeroStat b,
.kaHeroStat span,
.kaCourseHeadCopy h2,
.kaCourseHeadCopy p,
.kaCourseMeta div b,
.kaCourseMeta div span{
  color:#fff !important;
}

.stHeroPill,
.kaHeroKicker,
.kaChip,
.kaBadge{
  border-color:rgba(255,255,255,.2) !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
}

.stHero::after{
  background:#fff !important;
  color:var(--zb-ink) !important;
  border:0 !important;
  border-radius:18px !important;
}

.stSidebar,
.stLiveSpotlight,
.stPartners,
.stCard,
.stStat,
.stProfileMatch,
.stDemandEmpty,
.adminQuickStats div,
.adminSimpleManage,
.adminAccessDetails,
.adminMarketingEditor,
.adminLiveCard,
.adminEmptyState,
.kaCard,
.kaModule,
.kaContent,
.kaQuiz,
.kaSideCard,
.kaMaterial,
.kaPlanCard,
.kaDocCard,
.kaPartnerCard,
.kaPreviewSummary,
.kaLockNote,
.kaModal,
.avatarShell,
.avatarPanel,
.avatarCard{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--zb-radius-lg) !important;
  background:rgba(255,253,248,.96) !important;
  color:var(--zb-ink) !important;
  box-shadow:var(--zb-soft-shadow) !important;
}

.stLiveSpotlight,
.kaTutorCard,
.kaLiveSpotlight{
  background:var(--zb-deep) !important;
  color:#fff !important;
}

.stLiveMedia,
.kaCardTop,
.kaCourseHeadCopy .kaChip{
  background:linear-gradient(135deg,var(--zb-mint),var(--zb-mint-2)) !important;
  color:var(--zb-ink) !important;
}

.stStat:nth-child(3n),
.kaPlanCard:nth-child(3n),
.adminQuickStats div:nth-child(3n){
  background:linear-gradient(135deg,var(--zb-coral),#ff8e83) !important;
  color:#fff !important;
}

.stStat:nth-child(3n) b,
.stStat:nth-child(3n) span,
.kaPlanCard:nth-child(3n) *,
.adminQuickStats div:nth-child(3n) *{
  color:#fff !important;
}

.stEnter,
.stResume,
.stLiveCta,
.kaBtn.primary,
.toeicPrimary,
.actionBtn.primary{
  background:var(--zb-white) !important;
  color:var(--zb-ink) !important;
  border-color:transparent !important;
  border-radius:999px !important;
  box-shadow:0 14px 32px rgba(13,14,58,.18) !important;
}

.kaBtn.secondary,
.toeicSecondary,
.stProfile,
.stIconBtn,
.stAdminBtn{
  border-color:rgba(255,255,255,.22) !important;
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-radius:18px !important;
}

.toeicHero,
.toeicOffer,
.toeicFormCard,
.toeicSyllabusCard,
.toeicFaqCard{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:var(--zb-radius-lg) !important;
  background:rgba(255,253,248,.96) !important;
  color:var(--zb-ink) !important;
  box-shadow:var(--zb-soft-shadow) !important;
}

.toeicHero{
  background:
    linear-gradient(145deg,rgba(91,102,190,.82),rgba(70,79,169,.68)) !important;
  color:#fff !important;
}

.toeicHero h1,
.toeicHero p,
.toeicHero small{
  color:#fff !important;
}

@media(max-width:1040px){
  .experienceHero{
    grid-template-columns:1fr !important;
  }

  .gazeHeroCopy{
    min-height:520px !important;
  }

  .experienceRail{
    min-height:760px !important;
  }
}

@media(max-width:720px){
  body:has(.experienceLanding),
  body.studioBody,
  body.adminLoginBody,
  body.toeicLanding{
    background:
      linear-gradient(140deg,rgba(30,23,132,.9),rgba(112,56,190,.88)),
      var(--zb-bg-a) !important;
  }

  .rpgTopBar{
    border-radius:20px !important;
  }

  .experienceHero{
    width:calc(100% - 24px) !important;
    padding-top:18px !important;
    gap:16px !important;
  }

  .gazeHeroCopy{
    min-height:520px !important;
    padding:32px 26px 92px !important;
    border-radius:30px !important;
  }

  .gazeHeroCopy h2{
    font-size:46px !important;
  }

  .gazeHeroCopy p{
    font-size:16px !important;
  }

  .gazeHeroCopy::before{
    left:26px !important;
  }

  .gazeHeroCopy::after{
    left:26px !important;
  }

  .experienceRail{
    min-height:890px !important;
    display:block !important;
  }

  .experienceRail::before,
  .experienceRail::after{
    display:none !important;
  }

  .experienceRail .gazePhone{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }

  .gazePhoneTop,
  .gazeLesson,
  .gazeCourse:nth-child(1),
  .gazeCourse:nth-child(2){
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    min-height:190px !important;
    border-radius:28px !important;
  }

  .gazeCourse:nth-child(3){
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    min-height:190px !important;
    border-radius:28px !important;
  }

  .gazePhoneTop{
    padding:24px !important;
  }

  .gazePhoneTop::before{
    left:20px !important;
    top:22px !important;
    width:160px !important;
    padding:18px !important;
  }

  .gazePhoneTop::after{
    right:-30px !important;
    top:45px !important;
    width:170px !important;
    height:120px !important;
  }

  .stHero,
  .kaHero,
  .kaCourseHead{
    border-radius:30px !important;
  }

  .stTopNav{
    background:rgba(45,43,133,.88) !important;
    border-color:rgba(255,255,255,.16) !important;
  }
}