html[data-aj-theme="original"] .experienceHero{
  display:none !important;
}

html[data-aj-theme="original"] .rpgScene.experienceLanding{
  background:inherit;
}

.ajThemeChooser{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:2147483000;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:calc(100vw - 32px);
  padding:8px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:18px;
  background:rgba(18,20,54,.78);
  color:#fff;
  box-shadow:0 16px 38px rgba(8,9,34,.28);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  font-family:'Prompt','Sarabun',system-ui,sans-serif;
}

.ajThemeChooserLabel{
  padding:0 6px 0 4px;
  font-size:11px;
  font-weight:900;
  letter-spacing:0;
  opacity:.82;
}

.ajThemeChooser button{
  min-width:54px;
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font:800 11px/1 'Prompt','Sarabun',system-ui,sans-serif;
  letter-spacing:0;
  cursor:pointer;
}

.ajThemeChooser button.is-active{
  background:#fffdf8;
  color:#15172c;
  border-color:#fffdf8;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

html[data-aj-theme="style2"]{
  --zb-bg-a:#e8f9f5;
  --zb-bg-b:#c8efe7;
  --zb-bg-c:#ffe3d7;
  --zb-panel:#f8fffc;
  --zb-panel-2:#d8f5ed;
  --zb-deep:#073b44;
  --zb-ink:#09232a;
  --zb-muted:#557178;
  --zb-white:#ffffff;
  --zb-mint:#90ead4;
  --zb-mint-2:#41c5b5;
  --zb-coral:#ff8d72;
  --zb-cream:#fff5d7;
}

html[data-aj-theme="style2"] body:has(.experienceLanding),
html[data-aj-theme="style2"] body:has(.kaPage),
html[data-aj-theme="style2"] body.studioBody,
html[data-aj-theme="style2"] body.adminLoginBody,
html[data-aj-theme="style2"] body.toeicLanding{
  background:
    linear-gradient(124deg,rgba(0,127,140,.13) 0 30%,transparent 30% 100%),
    linear-gradient(302deg,transparent 0 58%,rgba(255,141,114,.24) 58% 100%),
    linear-gradient(135deg,#e9fbf6 0%,#c9f0e7 52%,#ffe0d2 100%) !important;
  color:#09232a !important;
}

html[data-aj-theme="style2"] .gazeHeroCopy,
html[data-aj-theme="style2"] .stHero,
html[data-aj-theme="style2"] .kaHero,
html[data-aj-theme="style2"] .kaCourseHead,
html[data-aj-theme="style2"] .toeicHero{
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(183,239,226,.72)) !important;
  color:#09232a !important;
  border-color:rgba(7,59,68,.12) !important;
}

html[data-aj-theme="style2"] .gazeHeroCopy h2,
html[data-aj-theme="style2"] .gazeHeroCopy p,
html[data-aj-theme="style2"] .gazeBrand,
html[data-aj-theme="style2"] .gazeHeroCopy::after,
html[data-aj-theme="style2"] .stHero h1,
html[data-aj-theme="style2"] .stHeroSub,
html[data-aj-theme="style2"] .kaHero h2,
html[data-aj-theme="style2"] .kaHero p,
html[data-aj-theme="style2"] .toeicHero h1,
html[data-aj-theme="style2"] .toeicHero p,
html[data-aj-theme="style2"] body:has(.kaPage) .kaSectionHead h3,
html[data-aj-theme="style2"] body:has(.kaPage) .kaSectionHead p{
  color:#09232a !important;
}

html[data-aj-theme="style2"] .rpgTopBar,
html[data-aj-theme="style2"] .stTop,
html[data-aj-theme="style2"] .kaTop{
  background:rgba(255,255,255,.74) !important;
  color:#09232a !important;
  border-color:rgba(7,59,68,.12) !important;
}

html[data-aj-theme="style2"] .rpgBrand strong,
html[data-aj-theme="style2"] .rpgBrand small,
html[data-aj-theme="style2"] .stBrandText strong,
html[data-aj-theme="style2"] .stBrandText small,
html[data-aj-theme="style2"] .stTopNav a,
html[data-aj-theme="style2"] .kaBrand h1,
html[data-aj-theme="style2"] .kaBrand small{
  color:#09232a !important;
}

html[data-aj-theme="style3"]{
  --zb-bg-a:#090d1e;
  --zb-bg-b:#151f3f;
  --zb-bg-c:#2d1d59;
  --zb-panel:#1d2850;
  --zb-panel-2:#222f5f;
  --zb-deep:#060914;
  --zb-ink:#11172c;
  --zb-muted:#5f6681;
  --zb-white:#f7f4ea;
  --zb-mint:#46e0c1;
  --zb-mint-2:#24a7d8;
  --zb-coral:#ff6b67;
  --zb-cream:#ffe6a8;
}

html[data-aj-theme="style3"] body:has(.experienceLanding),
html[data-aj-theme="style3"] body:has(.kaPage),
html[data-aj-theme="style3"] body.studioBody,
html[data-aj-theme="style3"] body.adminLoginBody,
html[data-aj-theme="style3"] body.toeicLanding{
  background:
    linear-gradient(124deg,rgba(9,13,30,.9) 0 32%,transparent 32% 100%),
    linear-gradient(302deg,transparent 0 58%,rgba(89,61,172,.42) 58% 100%),
    linear-gradient(135deg,#090d1e 0%,#151f3f 52%,#2d1d59 100%) !important;
}

html[data-aj-theme="style3"] .gazeHeroCopy,
html[data-aj-theme="style3"] .stHero,
html[data-aj-theme="style3"] .kaHero,
html[data-aj-theme="style3"] .kaCourseHead,
html[data-aj-theme="style3"] .toeicHero{
  background:linear-gradient(145deg,rgba(36,47,95,.88),rgba(20,28,63,.76)) !important;
  border-color:rgba(255,255,255,.12) !important;
}

html[data-aj-theme="style3"] .gazePhoneTop{
  background:
    radial-gradient(ellipse at 83% 42%,rgba(255,107,103,.92) 0 8%,transparent 9%),
    radial-gradient(ellipse at 78% 44%,rgba(70,224,193,.88) 0 25%,transparent 26%),
    linear-gradient(135deg,#182b4d,#24a7d8) !important;
}

/* Style 4: clean teal/white product UI from the supplied generated board. */
html[data-aj-theme="style4"]{
  --ux-bg:#f3f5f7;
  --ux-bg-2:#eef2f5;
  --ux-surface:#ffffff;
  --ux-surface-2:#f8fafb;
  --ux-ink:#081d2a;
  --ux-muted:#5d6b76;
  --ux-line:#d9e0e6;
  --ux-primary:#008c95;
  --ux-primary-deep:#006b76;
  --ux-primary-soft:#e4f8f8;
  --ux-coral:#ff5a5f;
  --ux-green:#55a630;
  --ux-radius:12px;
  --ux-radius-lg:18px;
  --ux-shadow:0 18px 46px rgba(8,29,42,.12);
  --ux-shadow-soft:0 10px 28px rgba(8,29,42,.08);
  --zb-deep:#081d2a;
  --zb-ink:#081d2a;
  --zb-muted:#5d6b76;
  --zb-white:#ffffff;
  --zb-mint:#dff7f4;
  --zb-mint-2:#008c95;
  --zb-coral:#ff5a5f;
  --zb-cream:#f8fafb;
}

html[data-aj-theme="style4"] body:has(.experienceLanding),
html[data-aj-theme="style4"] body:has(.kaPage),
html[data-aj-theme="style4"] body.studioBody,
html[data-aj-theme="style4"] body.adminLoginBody,
html[data-aj-theme="style4"] body.toeicLanding{
  background:linear-gradient(180deg,#fbfcfd 0%,#f1f4f6 100%) !important;
  color:#081d2a !important;
}

html[data-aj-theme="style4"] body:has(.experienceLanding)::before,
html[data-aj-theme="style4"] body:has(.kaPage)::before,
html[data-aj-theme="style4"] body.studioBody::before,
html[data-aj-theme="style4"] body.toeicLanding::before,
html[data-aj-theme="style4"] .experienceLanding::before,
html[data-aj-theme="style4"] .experienceLanding::after,
html[data-aj-theme="style4"] .gazeHeroCopy::before,
html[data-aj-theme="style4"] .gazeHeroCopy::after,
html[data-aj-theme="style4"] .experienceRail::before,
html[data-aj-theme="style4"] .experienceRail::after{
  display:none !important;
}

html[data-aj-theme="style4"] .rpgTopBar,
html[data-aj-theme="style4"] .stTop,
html[data-aj-theme="style4"] .kaTop{
  border:1px solid var(--ux-line) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.92) !important;
  color:#081d2a !important;
  box-shadow:var(--ux-shadow-soft) !important;
}

html[data-aj-theme="style4"] .rpgBrand strong,
html[data-aj-theme="style4"] .rpgBrand small,
html[data-aj-theme="style4"] .rpgTopBar a,
html[data-aj-theme="style4"] .rpgTopBar button,
html[data-aj-theme="style4"] .stBrandText strong,
html[data-aj-theme="style4"] .stBrandText small,
html[data-aj-theme="style4"] .stTopNav a,
html[data-aj-theme="style4"] .stTopRight button,
html[data-aj-theme="style4"] .kaBrand h1,
html[data-aj-theme="style4"] .kaBrand small,
html[data-aj-theme="style4"] .kaTop a,
html[data-aj-theme="style4"] .kaTop button{
  color:#081d2a !important;
}

html[data-aj-theme="style4"] .mark,
html[data-aj-theme="style4"] .kaMark,
html[data-aj-theme="style4"] .toeicMark,
html[data-aj-theme="style4"] .loginBrandMark,
html[data-aj-theme="style4"] .adminLoginBrand .mark{
  background:#008c95 !important;
  border-radius:10px !important;
}

html[data-aj-theme="style4"] .experienceHero{
  grid-template-columns:minmax(280px,.72fr) minmax(520px,1.28fr) !important;
  gap:20px !important;
  min-height:calc(100svh - 96px) !important;
}

html[data-aj-theme="style4"] .gazeHeroCopy{
  min-height:720px !important;
  padding:42px 32px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:center !important;
  border:1px solid var(--ux-line) !important;
  border-radius:34px !important;
  background:#fff !important;
  color:#081d2a !important;
  box-shadow:var(--ux-shadow) !important;
}

html[data-aj-theme="style4"] .gazeBrand{
  margin:54px 0 10px !important;
  color:#081d2a !important;
  font:900 40px/1 var(--ux-font) !important;
}

html[data-aj-theme="style4"] .gazeBrand::after{
  content:"Future Workforce" !important;
  display:block !important;
  margin-top:6px !important;
  color:#081d2a !important;
  font:900 20px/1.1 var(--ux-font) !important;
}

html[data-aj-theme="style4"] .gazeHeroCopy h2{
  max-width:260px !important;
  margin:0 auto 16px !important;
  color:#081d2a !important;
  font:900 0/1 var(--ux-font) !important;
}

html[data-aj-theme="style4"] .gazeHeroCopy h2::after{
  content:"AJ.Bank" !important;
  display:block !important;
  color:#081d2a !important;
  font:900 0/1 var(--ux-font) !important;
}

html[data-aj-theme="style4"] .gazeHeroCopy p{
  max-width:250px !important;
  margin:0 auto 280px !important;
  color:#2b3c49 !important;
  font:600 16px/1.55 var(--ux-body) !important;
}

html[data-aj-theme="style4"] .gazeHeroActions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  max-width:none !important;
  gap:12px !important;
  margin-top:auto !important;
  padding-bottom:10px !important;
}

html[data-aj-theme="style4"] .gazeHeroActions button,
html[data-aj-theme="style4"] .gazePrimary,
html[data-aj-theme="style4"] .gazeSecondary,
html[data-aj-theme="style4"] .gazeGoogle{
  width:100% !important;
  min-height:54px !important;
  border-radius:12px !important;
  border:1px solid var(--ux-line) !important;
  background:#fff !important;
  color:#081d2a !important;
  box-shadow:none !important;
}

html[data-aj-theme="style4"] .gazePrimary,
html[data-aj-theme="style4"] .gazeSecondary{
  background:#008c95 !important;
  border-color:#008c95 !important;
  color:#fff !important;
}

html[data-aj-theme="style4"] .gazePrimary{
  order:3 !important;
}

html[data-aj-theme="style4"] .gazeSecondary{
  order:2 !important;
}

html[data-aj-theme="style4"] .gazeGoogle{
  order:1 !important;
}

html[data-aj-theme="style4"] .gazeGoogle span{
  color:#008c95 !important;
  background:#fff !important;
}

html[data-aj-theme="style4"] .experienceRail{
  min-height:720px !important;
  max-height:720px !important;
}

html[data-aj-theme="style4"] .gazePhone{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:240px 1fr 150px !important;
  gap:18px !important;
  padding:28px !important;
  border:1px solid var(--ux-line) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:var(--ux-shadow) !important;
}

html[data-aj-theme="style4"] .gazePhoneTop{
  min-height:0 !important;
  padding:28px !important;
  border:1px solid #b7c2ca !important;
  border-radius:18px !important;
  background:#fff !important;
  color:#081d2a !important;
  box-shadow:none !important;
}

html[data-aj-theme="style4"] .gazePhoneTop::before{
  content:"Next best lesson\A Giving & Responding\A to Feedback" !important;
  left:28px !important;
  top:28px !important;
  width:auto !important;
  min-height:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#081d2a !important;
  font:900 24px/1.3 var(--ux-font) !important;
}

html[data-aj-theme="style4"] .gazePhoneTop::after{
  display:none !important;
}

html[data-aj-theme="style4"] .gazePhoneTop strong,
html[data-aj-theme="style4"] .gazePhoneTop small{
  opacity:0 !important;
}

html[data-aj-theme="style4"] .gazePhoneTop button{
  left:auto !important;
  right:28px !important;
  bottom:28px !important;
  width:auto !important;
  min-width:142px !important;
  height:42px !important;
  border-radius:10px !important;
  background:#008c95 !important;
  color:#fff !important;
}

html[data-aj-theme="style4"] .gazeLesson,
html[data-aj-theme="style4"] .gazeCourse{
  border:1px solid var(--ux-line) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#081d2a !important;
  box-shadow:none !important;
}

html[data-aj-theme="style4"] .gazeLesson{
  grid-column:auto !important;
  grid-row:auto !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;
}

html[data-aj-theme="style4"] .gazeLesson::before{
  content:"Course Path" !important;
  margin:0 0 20px !important;
  padding:0 !important;
  border:0 !important;
  color:#081d2a !important;
  font:900 20px/1 var(--ux-font) !important;
}

html[data-aj-theme="style4"] .gazeLesson::before{
  position:absolute !important;
  left:28px !important;
  top:26px !important;
}

html[data-aj-theme="style4"] .gazeLesson > div{
  margin-top:42px !important;
}

html[data-aj-theme="style4"] .gazeLesson > b{
  margin-top:42px !important;
  color:#081d2a !important;
}

html[data-aj-theme="style4"] .gazeLesson h3{
  font-size:18px !important;
}

html[data-aj-theme="style4"] .gazeLesson h3::after{
  content:"" !important;
}

html[data-aj-theme="style4"] .gazeCourses{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:12px !important;
}

html[data-aj-theme="style4"] .gazeCourse:nth-child(1),
html[data-aj-theme="style4"] .gazeCourse:nth-child(2),
html[data-aj-theme="style4"] .gazeCourse:nth-child(3){
  grid-column:auto !important;
  grid-row:auto !important;
  min-height:144px !important;
  padding:20px !important;
  background:#fff !important;
  color:#081d2a !important;
}

html[data-aj-theme="style4"] .gazeCourse:nth-child(1){
  border-color:#008c95 !important;
  box-shadow:inset 0 0 0 1px #008c95 !important;
}

html[data-aj-theme="style4"] .gazeCourse:nth-child(1)::before,
html[data-aj-theme="style4"] .gazeCourse:nth-child(2)::before,
html[data-aj-theme="style4"] .gazeCourse:nth-child(3)::after{
  display:none !important;
}

html[data-aj-theme="style4"] .gazeCourse b{
  color:#081d2a !important;
  font-size:14px !important;
}

html[data-aj-theme="style4"] .gazeCourse small{
  color:#5d6b76 !important;
}

html[data-aj-theme="style4"] .loginModalInner,
html[data-aj-theme="style4"] #modal .modalCard,
html[data-aj-theme="style4"] #drawer .modalCard,
html[data-aj-theme="style4"] .adminLoginShell{
  border:1px solid var(--ux-line) !important;
  border-radius:18px !important;
  background:#fff !important;
  color:#081d2a !important;
  box-shadow:var(--ux-shadow) !important;
}

html[data-aj-theme="style4"] .loginModalInner .authModeTab.active,
html[data-aj-theme="style4"] .loginModalInner .roleTab.active,
html[data-aj-theme="style4"] .loginModalInner .actionBtn.primary,
html[data-aj-theme="style4"] .adminLoginShell button,
html[data-aj-theme="style4"] body:has(.experienceLanding) #loginModal .loginModalInner #loginBtn.actionBtn.primary,
html[data-aj-theme="style4"] body:has(.experienceLanding) #loginModal .loginModalInner #verifyBtn.actionBtn.primary,
html[data-aj-theme="style4"] body:has(.experienceLanding) #loginModal .loginModalInner .signupSuccessStep .actionBtn.primary{
  background:#008c95 !important;
  color:#fff !important;
  border-color:#008c95 !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

html[data-aj-theme="style4"] .stShell{
  grid-template-columns:250px 1fr !important;
  gap:0 !important;
  background:#fff !important;
  border:1px solid var(--ux-line) !important;
}

html[data-aj-theme="style4"] .stSidebar{
  border-right:1px solid var(--ux-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html[data-aj-theme="style4"] .stHero,
html[data-aj-theme="style4"] .kaHero,
html[data-aj-theme="style4"] .kaCourseHead,
html[data-aj-theme="style4"] .toeicHero{
  border:1px solid #b7c2ca !important;
  border-radius:18px !important;
  background:#fff !important;
  color:#081d2a !important;
  box-shadow:none !important;
}

html[data-aj-theme="style4"] .stHero h1,
html[data-aj-theme="style4"] .stHeroSub,
html[data-aj-theme="style4"] .stHeroPill,
html[data-aj-theme="style4"] .kaHero h2,
html[data-aj-theme="style4"] .kaHero p,
html[data-aj-theme="style4"] .kaHeroKicker,
html[data-aj-theme="style4"] .kaHeroStat b,
html[data-aj-theme="style4"] .kaHeroStat span,
html[data-aj-theme="style4"] .toeicHero h1,
html[data-aj-theme="style4"] .toeicHero p,
html[data-aj-theme="style4"] body:has(.kaPage) .kaSectionHead h3,
html[data-aj-theme="style4"] body:has(.kaPage) .kaSectionHead p{
  color:#081d2a !important;
}

html[data-aj-theme="style4"] .stLiveSpotlight,
html[data-aj-theme="style4"] .stPartners,
html[data-aj-theme="style4"] .stCard,
html[data-aj-theme="style4"] .stStat,
html[data-aj-theme="style4"] .stProfileMatch,
html[data-aj-theme="style4"] .kaCard,
html[data-aj-theme="style4"] .kaModule,
html[data-aj-theme="style4"] .kaContent,
html[data-aj-theme="style4"] .kaQuiz,
html[data-aj-theme="style4"] .kaSideCard,
html[data-aj-theme="style4"] .kaMaterial,
html[data-aj-theme="style4"] .kaPlanCard,
html[data-aj-theme="style4"] .kaDocCard,
html[data-aj-theme="style4"] .kaPartnerCard{
  border:1px solid var(--ux-line) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#081d2a !important;
  box-shadow:none !important;
}

html[data-aj-theme="style4"] .stEnter,
html[data-aj-theme="style4"] .stResume,
html[data-aj-theme="style4"] .stLiveCta,
html[data-aj-theme="style4"] .kaBtn.primary,
html[data-aj-theme="style4"] .toeicPrimary,
html[data-aj-theme="style4"] .actionBtn.primary{
  background:#008c95 !important;
  color:#fff !important;
  border-color:#008c95 !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

/* Style 5: dark mobile challenge/feed reference with red neon action accents. */
html[data-aj-theme="style5"]{
  --ux-bg:#050506;
  --ux-bg-2:#0a0a0c;
  --ux-surface:#0d0d10;
  --ux-surface-2:#16161a;
  --ux-ink:#f8f8fb;
  --ux-muted:#9a9aa3;
  --ux-line:#26262d;
  --ux-primary:#ff2d35;
  --ux-primary-deep:#d91621;
  --ux-primary-soft:rgba(255,45,53,.13);
  --ux-coral:#ff2d35;
  --ux-green:#35e28f;
  --ux-radius:16px;
  --ux-radius-lg:26px;
  --ux-shadow:0 30px 70px rgba(0,0,0,.62);
  --ux-shadow-soft:0 18px 42px rgba(0,0,0,.42);
  --zb-deep:#050506;
  --zb-ink:#f8f8fb;
  --zb-muted:#9a9aa3;
  --zb-white:#111115;
  --zb-mint:#172224;
  --zb-mint-2:#00f0d0;
  --zb-coral:#ff2d35;
  --zb-cream:#171719;
}

html[data-aj-theme="style5"] body:has(.experienceLanding),
html[data-aj-theme="style5"] body:has(.kaPage),
html[data-aj-theme="style5"] body.studioBody,
html[data-aj-theme="style5"] body.adminLoginBody,
html[data-aj-theme="style5"] body.toeicLanding{
  background:
    radial-gradient(circle at 74% 22%,rgba(255,45,53,.22),transparent 28%),
    radial-gradient(circle at 18% 82%,rgba(0,240,208,.10),transparent 24%),
    linear-gradient(180deg,#000 0%,#08080a 52%,#030304 100%) !important;
  color:#f8f8fb !important;
}

html[data-aj-theme="style5"] body:has(.experienceLanding)::before,
html[data-aj-theme="style5"] body:has(.kaPage)::before,
html[data-aj-theme="style5"] body.studioBody::before,
html[data-aj-theme="style5"] body.toeicLanding::before{
  background:
    linear-gradient(120deg,transparent 0 42%,rgba(255,45,53,.07) 42% 43%,transparent 43% 100%),
    linear-gradient(40deg,transparent 0 68%,rgba(255,255,255,.05) 68% 69%,transparent 69% 100%) !important;
}

html[data-aj-theme="style5"] .experienceLanding::before,
html[data-aj-theme="style5"] .experienceLanding::after{
  display:none !important;
}

html[data-aj-theme="style5"] .rpgTopBar,
html[data-aj-theme="style5"] .stTop,
html[data-aj-theme="style5"] .kaTop{
  border:1px solid #202026 !important;
  border-radius:28px !important;
  background:rgba(8,8,10,.88) !important;
  color:#f8f8fb !important;
  box-shadow:var(--ux-shadow-soft) !important;
}

html[data-aj-theme="style5"] .rpgBrand strong,
html[data-aj-theme="style5"] .rpgBrand small,
html[data-aj-theme="style5"] .rpgTopBar a,
html[data-aj-theme="style5"] .rpgTopBar button,
html[data-aj-theme="style5"] .stBrandText strong,
html[data-aj-theme="style5"] .stBrandText small,
html[data-aj-theme="style5"] .stTopNav a,
html[data-aj-theme="style5"] .stTopRight button,
html[data-aj-theme="style5"] .kaBrand h1,
html[data-aj-theme="style5"] .kaBrand small,
html[data-aj-theme="style5"] .kaTop a,
html[data-aj-theme="style5"] .kaTop button{
  color:#f8f8fb !important;
}

html[data-aj-theme="style5"] .mark,
html[data-aj-theme="style5"] .kaMark,
html[data-aj-theme="style5"] .toeicMark,
html[data-aj-theme="style5"] .loginBrandMark,
html[data-aj-theme="style5"] .adminLoginBrand .mark{
  background:#ff2d35 !important;
  border-radius:14px !important;
  box-shadow:0 12px 28px rgba(255,45,53,.22) !important;
}

html[data-aj-theme="style5"] .experienceHero{
  grid-template-columns:minmax(290px,.72fr) minmax(460px,1.28fr) !important;
  gap:28px !important;
  min-height:calc(100svh - 96px) !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy{
  min-height:720px !important;
  padding:34px 28px !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  border:1px solid #1f1f25 !important;
  border-radius:34px !important;
  background:#080809 !important;
  color:#f8f8fb !important;
  box-shadow:var(--ux-shadow) !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy::before{
  content:"9:41" !important;
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  box-shadow:none !important;
  color:#f8f8fb !important;
  font:900 13px/1 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy::after{
  content:"Challenges" !important;
  position:static !important;
  display:block !important;
  margin:18px 0 16px !important;
  padding:0 !important;
  color:#f8f8fb !important;
  text-align:center !important;
  font:900 18px/1 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeBrand{
  order:3 !important;
  margin:16px 0 8px !important;
  color:#f8f8fb !important;
  font:900 14px/1 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy h2{
  order:4 !important;
  margin:0 0 8px !important;
  color:#f8f8fb !important;
  font:900 25px/1.08 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy h2::before{
  content:"Digital Learning Challenge" !important;
  display:block !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy h2{
  font-size:0 !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy h2::before{
  font:900 25px/1.08 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy p{
  order:5 !important;
  max-width:none !important;
  margin:0 0 18px !important;
  color:#b9bac2 !important;
  font:700 14px/1.5 var(--ux-body) !important;
}

html[data-aj-theme="style5"] .gazeHeroCopy p::before{
  content:"Prize $40";
  float:right;
  color:#fff;
  font:900 20px/1 var(--ux-font);
  margin-left:12px;
}

html[data-aj-theme="style5"] .gazeHeroActions{
  order:6 !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  margin-top:auto !important;
}

html[data-aj-theme="style5"] .gazeHeroActions::before{
  content:"";
  display:block;
  height:220px;
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55)),
    url('../assets/studio-background.webp.png') center/cover no-repeat,
    linear-gradient(135deg,#18181e,#080809);
  border:1px solid #23232a;
}

html[data-aj-theme="style5"] .gazeHeroActions button,
html[data-aj-theme="style5"] .gazePrimary,
html[data-aj-theme="style5"] .gazeSecondary,
html[data-aj-theme="style5"] .gazeGoogle{
  min-height:48px !important;
  border-radius:999px !important;
  border:1px solid #27272f !important;
  background:#141418 !important;
  color:#f8f8fb !important;
  box-shadow:none !important;
}

html[data-aj-theme="style5"] .gazePrimary,
html[data-aj-theme="style5"] .gazeSecondary{
  background:#ff2d35 !important;
  border-color:#ff2d35 !important;
  color:#fff !important;
}

html[data-aj-theme="style5"] .gazeGoogle span{
  color:#ff2d35 !important;
  background:transparent !important;
}

html[data-aj-theme="style5"] .experienceRail{
  min-height:720px !important;
  max-height:720px !important;
}

html[data-aj-theme="style5"] .experienceRail::before,
html[data-aj-theme="style5"] .experienceRail::after{
  display:none !important;
}

html[data-aj-theme="style5"] .gazePhone{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:1.1fr .86fr .86fr !important;
  gap:18px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

html[data-aj-theme="style5"] .gazePhoneTop{
  grid-column:1 / span 2 !important;
  grid-row:1 !important;
  min-height:0 !important;
  padding:34px !important;
  border:1px solid #202026 !important;
  border-radius:34px !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.66)),
    url('../assets/studio-background.webp.png') center/cover no-repeat,
    #101014 !important;
  color:#f8f8fb !important;
  box-shadow:var(--ux-shadow) !important;
}

html[data-aj-theme="style5"] .gazePhoneTop::before{
  content:"My Wallet\A Available Balance\A $ 10.00" !important;
  white-space:pre !important;
  left:34px !important;
  top:34px !important;
  width:auto !important;
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  font:900 18px/2.0 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazePhoneTop::after{
  content:"General" !important;
  position:absolute !important;
  right:34px !important;
  top:34px !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  transform:none !important;
  filter:none !important;
  color:#fff !important;
  font:900 15px/1 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazePhoneTop strong,
html[data-aj-theme="style5"] .gazePhoneTop small{
  opacity:0 !important;
}

html[data-aj-theme="style5"] .gazePhoneTop button{
  left:auto !important;
  right:30px !important;
  bottom:28px !important;
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  background:#ff2d35 !important;
  color:#fff !important;
  border:0 !important;
}

html[data-aj-theme="style5"] .gazeLesson,
html[data-aj-theme="style5"] .gazeCourse{
  border:1px solid #202026 !important;
  border-radius:26px !important;
  background:#0d0d10 !important;
  color:#f8f8fb !important;
  box-shadow:var(--ux-shadow-soft) !important;
}

html[data-aj-theme="style5"] .gazeLesson{
  grid-column:1 !important;
  grid-row:2 / span 2 !important;
  min-height:0 !important;
  padding:24px !important;
}

html[data-aj-theme="style5"] .gazeLesson::before{
  content:"Recent" !important;
  display:block !important;
  margin:0 0 28px !important;
  padding:0 !important;
  border:0 !important;
  color:#fff !important;
  font:900 18px/1 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeLesson h3{
  font-size:0 !important;
}

html[data-aj-theme="style5"] .gazeLesson h3::after{
  content:"Added money to wallet\A Donate money to Alexa\A Received donation money" !important;
  white-space:pre !important;
  color:#e8e8ed !important;
  font:800 14px/2.3 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeLesson p,
html[data-aj-theme="style5"] .gazeLesson .gazeProgress{
  display:none !important;
}

html[data-aj-theme="style5"] .gazeLesson > b{
  color:#fff !important;
  font-size:22px !important;
}

html[data-aj-theme="style5"] .gazeCourses{
  display:contents !important;
}

html[data-aj-theme="style5"] .gazeCourse:nth-child(1),
html[data-aj-theme="style5"] .gazeCourse:nth-child(2),
html[data-aj-theme="style5"] .gazeCourse:nth-child(3){
  min-height:0 !important;
  padding:24px !important;
  color:#fff !important;
  border-color:#202026 !important;
}

html[data-aj-theme="style5"] .gazeCourse:nth-child(1){
  grid-column:2 !important;
  grid-row:2 !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.7)),
    url('../assets/ajbank-poses/Act_3_HoldChart.png') right bottom/contain no-repeat,
    linear-gradient(135deg,#320006,#121216) !important;
}

html[data-aj-theme="style5"] .gazeCourse:nth-child(1)::before{
  content:"Challenge 1" !important;
  display:block !important;
  margin:0 0 18px !important;
  color:#fff !important;
  font:900 17px/1 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeCourse:nth-child(2){
  grid-column:2 !important;
  grid-row:3 !important;
  background:#121216 !important;
}

html[data-aj-theme="style5"] .gazeCourse:nth-child(2)::before{
  content:"Send money to bank" !important;
  display:block !important;
  margin:0 0 20px !important;
  color:#fff !important;
  font:900 16px/1 var(--ux-font) !important;
}

html[data-aj-theme="style5"] .gazeCourse:nth-child(3){
  display:none !important;
}

html[data-aj-theme="style5"] .gazeCourse b{
  color:#fff !important;
  font-size:15px !important;
}

html[data-aj-theme="style5"] .gazeCourse small{
  color:#a5a5af !important;
}

html[data-aj-theme="style5"] .loginModalInner,
html[data-aj-theme="style5"] #modal .modalCard,
html[data-aj-theme="style5"] #drawer .modalCard,
html[data-aj-theme="style5"] .adminLoginShell{
  border:1px solid #202026 !important;
  border-radius:28px !important;
  background:#0d0d10 !important;
  color:#f8f8fb !important;
  box-shadow:var(--ux-shadow) !important;
}

html[data-aj-theme="style5"] .loginModalInner h2,
html[data-aj-theme="style5"] .loginModalInner h3,
html[data-aj-theme="style5"] .loginModalInner .modalTitle,
html[data-aj-theme="style5"] .adminLoginShell h1,
html[data-aj-theme="style5"] .adminLoginShell p,
html[data-aj-theme="style5"] .adminLoginBrand small{
  color:#f8f8fb !important;
}

html[data-aj-theme="style5"] .loginModalInner .fieldInput,
html[data-aj-theme="style5"] .adminLoginShell input{
  border-color:#2b2b34 !important;
  background:#151519 !important;
  color:#fff !important;
}

html[data-aj-theme="style5"] .loginModalInner .authModeTab.active,
html[data-aj-theme="style5"] .loginModalInner .roleTab.active,
html[data-aj-theme="style5"] .loginModalInner .actionBtn.primary,
html[data-aj-theme="style5"] .adminLoginShell button,
html[data-aj-theme="style5"] body:has(.experienceLanding) #loginModal .loginModalInner #loginBtn.actionBtn.primary,
html[data-aj-theme="style5"] body:has(.experienceLanding) #loginModal .loginModalInner #verifyBtn.actionBtn.primary,
html[data-aj-theme="style5"] body:has(.experienceLanding) #loginModal .loginModalInner .signupSuccessStep .actionBtn.primary{
  background:#ff2d35 !important;
  color:#fff !important;
  border-color:#ff2d35 !important;
  border-radius:999px !important;
  box-shadow:0 14px 28px rgba(255,45,53,.22) !important;
}

html[data-aj-theme="style5"] .stShell,
html[data-aj-theme="style5"] .stMain,
html[data-aj-theme="style5"] .kaApp,
html[data-aj-theme="style5"] .kaShell,
html[data-aj-theme="style5"] .kaMain{
  background:transparent !important;
}

html[data-aj-theme="style5"] .stHero,
html[data-aj-theme="style5"] .kaHero,
html[data-aj-theme="style5"] .kaCourseHead,
html[data-aj-theme="style5"] .toeicHero{
  border:1px solid #202026 !important;
  border-radius:30px !important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.72)),
    url('../assets/studio-background.webp.png') center/cover no-repeat,
    #101014 !important;
  color:#f8f8fb !important;
  box-shadow:var(--ux-shadow) !important;
}

html[data-aj-theme="style5"] .stHero h1,
html[data-aj-theme="style5"] .stHeroSub,
html[data-aj-theme="style5"] .stHeroPill,
html[data-aj-theme="style5"] .kaHero h2,
html[data-aj-theme="style5"] .kaHero p,
html[data-aj-theme="style5"] .kaHeroKicker,
html[data-aj-theme="style5"] .kaHeroStat b,
html[data-aj-theme="style5"] .kaHeroStat span,
html[data-aj-theme="style5"] .toeicHero h1,
html[data-aj-theme="style5"] .toeicHero p,
html[data-aj-theme="style5"] body:has(.kaPage) .kaSectionHead h3,
html[data-aj-theme="style5"] body:has(.kaPage) .kaSectionHead p{
  color:#f8f8fb !important;
}

html[data-aj-theme="style5"] .stSidebar,
html[data-aj-theme="style5"] .stLiveSpotlight,
html[data-aj-theme="style5"] .stPartners,
html[data-aj-theme="style5"] .stCard,
html[data-aj-theme="style5"] .stStat,
html[data-aj-theme="style5"] .stProfileMatch,
html[data-aj-theme="style5"] .kaCard,
html[data-aj-theme="style5"] .kaModule,
html[data-aj-theme="style5"] .kaContent,
html[data-aj-theme="style5"] .kaQuiz,
html[data-aj-theme="style5"] .kaSideCard,
html[data-aj-theme="style5"] .kaMaterial,
html[data-aj-theme="style5"] .kaPlanCard,
html[data-aj-theme="style5"] .kaDocCard,
html[data-aj-theme="style5"] .kaPartnerCard{
  border:1px solid #202026 !important;
  border-radius:24px !important;
  background:#0d0d10 !important;
  color:#f8f8fb !important;
  box-shadow:var(--ux-shadow-soft) !important;
}

html[data-aj-theme="style5"] .stCard *,
html[data-aj-theme="style5"] .stStat *,
html[data-aj-theme="style5"] .kaCard *,
html[data-aj-theme="style5"] .kaModule *,
html[data-aj-theme="style5"] .kaContent *,
html[data-aj-theme="style5"] .kaSideCard *{
  color:inherit !important;
}

html[data-aj-theme="style5"] .stEnter,
html[data-aj-theme="style5"] .stResume,
html[data-aj-theme="style5"] .stLiveCta,
html[data-aj-theme="style5"] .kaBtn.primary,
html[data-aj-theme="style5"] .toeicPrimary,
html[data-aj-theme="style5"] .actionBtn.primary{
  background:#ff2d35 !important;
  color:#fff !important;
  border-color:#ff2d35 !important;
  border-radius:999px !important;
  box-shadow:0 14px 28px rgba(255,45,53,.22) !important;
}

@media(max-width:720px){
  body{
    padding-bottom:74px !important;
  }

  .ajThemeChooser{
    left:12px;
    right:12px;
    bottom:10px;
    justify-content:center;
    border-radius:16px;
  }

  .ajThemeChooser button{
    min-width:0;
    flex:1;
    padding:0 6px;
  }

  html[data-aj-theme="style4"] .experienceHero{
    grid-template-columns:1fr !important;
  }

  html[data-aj-theme="style4"] .gazeHeroCopy{
    min-height:720px !important;
    padding:30px 20px !important;
  }

  html[data-aj-theme="style4"] .gazeHeroCopy p{
    margin-bottom:210px !important;
  }

  html[data-aj-theme="style4"] .experienceRail .gazePhone{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    max-height:none !important;
    padding:18px !important;
  }

  html[data-aj-theme="style4"] .gazeCourses{
    grid-template-columns:1fr !important;
  }

  html[data-aj-theme="style5"] .experienceHero{
    grid-template-columns:1fr !important;
  }

  html[data-aj-theme="style5"] .gazeHeroCopy{
    min-height:760px !important;
  }

  html[data-aj-theme="style5"] .experienceRail{
    min-height:860px !important;
    max-height:none !important;
  }

  html[data-aj-theme="style5"] .experienceRail .gazePhone{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:0 !important;
  }

  html[data-aj-theme="style5"] .gazePhoneTop,
  html[data-aj-theme="style5"] .gazeLesson,
  html[data-aj-theme="style5"] .gazeCourse:nth-child(1),
  html[data-aj-theme="style5"] .gazeCourse:nth-child(2){
    width:100% !important;
    min-height:220px !important;
  }
}