:root{
  --talk-ink:#22233d;
  --talk-violet:#6455df;
  --talk-blue:#38afd0;
  --talk-yellow:#ffdf45;
  --talk-coral:#ff786b;
  --talk-paper:#fff;
  --talk-line:#e8e8f2;
}
body{
  background:
    radial-gradient(circle at 9% 10%,#dff5fb 0,transparent 24rem),
    radial-gradient(circle at 92% 78%,#eee8ff 0,transparent 25rem),
    #f7f7fc!important;
  color:var(--talk-ink);
}
#subjectChooser.subjectChooser{
  width:min(1260px,calc(100vw - 28px));
  max-width:1260px;
  max-height:calc(100dvh - 24px);
  margin:12px auto;
  padding:clamp(14px,2.5vw,32px);
  overflow:auto;
  border:1px solid #e7e5f3;
  border-radius:30px;
  background:#fff;
  box-shadow:0 24px 80px #2724512b;
}
#subjectChooser::backdrop{
  background:#15143a77;
  backdrop-filter:blur(8px);
}
.portalTop{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  padding:12px 16px;
  border:1px solid #eeeef6;
  border-radius:20px;
  background:#fff;
  box-shadow:0 6px 22px #2421530b;
}
.portalBrand{gap:10px}
.portalBrand strong{display:inline-flex;align-items:center;padding:7px 14px;border:2px solid var(--talk-yellow);border-radius:999px;background:linear-gradient(120deg,#5142c4,#348fb9);color:#fff!important;font-size:18px;box-shadow:0 0 0 3px #ffdf454d}
.portalBrand small{color:#777790}
.portalMark{
  background:linear-gradient(145deg,var(--talk-violet),#358ecb)!important;
  color:#fff!important;
  box-shadow:0 7px 18px #6455df40;
}
.gradePill{
  border:1px solid #dcd8ff;
  background:#f1efff;
  color:#5144c3;
  font-weight:800;
}
.portalHero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);
  align-items:center;
  min-height:clamp(250px,30vw,350px);
  margin:0 0 24px;
  padding:clamp(24px,4vw,52px);
  overflow:hidden;
  border:0;
  border-radius:32px;
  background:linear-gradient(118deg,#6958e8 0%,#5364d8 48%,#36a9cc 100%);
  box-shadow:0 18px 38px #5449bd2b;
  color:#fff;
}
.portalHero:before,.portalHero:after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.portalHero:before{
  width:310px;height:310px;left:8%;top:-180px;
  background:#ffffff20;
}
.portalHero:after{
  width:250px;height:250px;right:-80px;bottom:-160px;
  background:#ffdf4530;
}
.portalHeroCopy{position:relative;z-index:2;max-width:620px}
.portalEyebrow,.portalHeroCopy small{color:#fff2a4!important;font-weight:900;letter-spacing:.02em}
.portalHeroCopy h2{
  margin:10px 0 12px;
  color:#fff!important;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.18;
  text-wrap:balance;
}
.portalHeroCopy p{
  max-width:540px;
  color:#f3f3ff!important;
  font-size:clamp(15px,1.6vw,19px);
  line-height:1.9;
}
.heroPrompt{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:11px 18px;
  border:0;
  border-radius:999px;
  background:var(--talk-yellow);
  color:#352c62!important;
  font-weight:900;
  box-shadow:0 8px 18px #221d5c28;
}
.portalHeroArt{z-index:1;transform:scale(.95)}
.heroOrb{background:#ffffff20!important;border-color:#ffffff38!important}
.heroBook{
  display:grid;place-items:center;
  width:118px;height:118px;
  border:6px solid #fff;
  border-radius:34px;
  background:linear-gradient(145deg,#fff9db,#fff);
  box-shadow:0 16px 32px #23204b38;
  font-size:58px;
  transform:rotate(-7deg);
}
.heroMini{border:3px solid #fff!important;box-shadow:0 8px 18px #24204b30}
.miniMath{background:var(--talk-yellow)!important;color:#43358f!important}
.miniScience{background:#a9e8d6!important;color:#1f746d!important}
.heroSpark{color:#fff1a1!important}
.subjectSectionHead{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin:0 auto 14px;
}
.subjectSectionHead small{color:#7063d6;font-weight:900}
.subjectSectionHead h3{margin:4px 0 0;color:#292746;font-size:clamp(21px,2.5vw,28px)}
.subjectCount{
  padding:7px 12px;
  border-radius:999px;
  background:#e9f7fb;
  color:#267991;
  font-weight:800;
}
.gradeGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
.gradeCard{
  min-height:118px!important;
  grid-template-columns:56px minmax(0,1fr) auto!important;
  gap:12px!important;
  padding:14px!important;
  border:1px solid var(--talk-line)!important;
  border-bottom:4px solid #c9c8e9!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 20px #25244a0a;
  transition:transform .18s,box-shadow .18s,border-color .18s!important;
}
.gradeCard:hover:not(:disabled),.subjectCard:hover:not(:disabled){
  transform:translateY(-4px);
  box-shadow:0 16px 30px #25244a18;
}
.gradeCard:nth-child(3n+1){border-bottom-color:#f4a48d!important}
.gradeCard:nth-child(3n+2){border-bottom-color:#73c6d7!important}
.gradeCard:nth-child(3n){border-bottom-color:#9c8cf0!important}
.gradeCard.gradeAvailable{
  border:2px solid #8b7bea!important;
  border-bottom-width:5px!important;
  background:linear-gradient(135deg,#fbfaff,#fff)!important;
}
.gradeNumber{
  display:grid!important;
  place-items:center;
  width:54px!important;height:54px!important;
  border:0!important;
  border-radius:18px!important;
  background:#eeeaff!important;
  color:#5749c7!important;
  font-size:28px!important;
  box-shadow:none!important;
}
.gradeCard:nth-child(3n+1) .gradeNumber{background:#fff0eb!important;color:#be5e49!important}
.gradeCard:nth-child(3n+2) .gradeNumber{background:#e7f8fc!important;color:#287c91!important}
.gradeCard:nth-child(3n) .gradeNumber{background:#efedff!important;color:#6656ca!important}
.gradeCopy strong{color:#2b2947;font-size:17px}
.gradeCopy small{color:#7b7b92}
.gradeStatus{
  padding:8px 11px;
  border-radius:999px;
  background:#f2f1fb;
  color:#62617e;
  font-size:12px;
  font-weight:900;
}
.gradeAvailable .gradeStatus{
  background:var(--talk-yellow);
  color:#3d3267;
}
.subjectGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}
.subjectCard{
  position:relative;
  display:flex!important;
  flex-direction:column;
  align-items:stretch!important;
  min-height:320px;
  padding:0!important;
  overflow:hidden;
  border:1px solid #e8e7f0!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 9px 24px #24234a10;
  text-align:right;
  transition:transform .18s,box-shadow .18s!important;
}
.subjectCard>img{
  width:100%!important;
  height:180px!important;
  min-height:180px;
  object-fit:cover;
  border-radius:0!important;
  background:#eff8fb;
}
.subjectCardBody{
  display:flex!important;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:18px!important;
}
.subjectCardBody strong{color:#292746;font-size:24px}
.subjectCardBody small{color:#77778c;font-size:14px}
.subjectAction{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding:10px 16px;
  border-radius:999px;
  background:var(--talk-yellow);
  color:#352c62!important;
  font-weight:900;
}
.subjectBadge{
  position:absolute!important;
  top:12px;right:12px;left:auto!important;
  padding:7px 11px!important;
  border:1px solid #ffffffb0;
  border-radius:999px!important;
  background:#fff!important;
  color:#4f45a7!important;
  box-shadow:0 4px 12px #17163b1c;
  font-weight:900;
}
.portalFoot{
  margin-top:18px;
  color:#74748c!important;
}
.portalBack,#subjectsBack,#scienceBack,#scienceLessonBack,#mathBack,#mathLessonBack,#mathUnitBack,#returnSubjects,#returnLetters,#worksheetBack,#catchReturn,#catchBackLetters,.mathFooterActions button,.scienceHome>.actions button{
  min-height:44px;
  padding:10px 16px!important;
  border:1px solid #dcd8fb!important;
  border-radius:14px!important;
  background:#f2f0ff!important;
  color:#4d42b5!important;
  font-weight:900!important;
  box-shadow:0 4px 10px #4f43bd0d;
}
#subjectChooser button:not(.gradeCard):not(.subjectCard):not(.portalBack),
#sciencePreview button:not(.scienceChoice),
#mathPreview button:not(.mathChoice),
#summary button,#help button{
  min-height:44px;
  border-radius:14px;
  font-weight:900;
  transition:transform .16s,box-shadow .16s,filter .16s;
}
#subjectChooser button:hover,#sciencePreview button:hover,#mathPreview button:hover,#summary button:hover,#help button:hover{
  filter:brightness(1.03);
}
#sciencePreview,.mathPortal{
  max-width:1100px!important;
  margin:0 auto!important;
  padding:clamp(14px,3vw,28px)!important;
  border:1px solid #e8e7f0!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 14px 40px #25244a12!important;
}
.scienceHero,.mathHero{
  border-radius:26px!important;
  overflow:hidden;
}
.scienceHero{
  padding:clamp(18px,3vw,32px);
  background:linear-gradient(120deg,#eef5ff,#f3efff)!important;
}
.scienceHero h2,.mathHero h2{color:#30286f!important}
.scienceEdition{
  border-color:#e6d975!important;
  background:#fff6c8!important;
  color:#705b14!important;
}
.scienceUnitHeading{
  padding:18px;
  border:1px solid #eceaf4!important;
  border-radius:20px;
  background:#fbfaff;
}
.scienceLessons{gap:16px!important}
.scienceLessonCard,.mathChapterCard,.mathLessonCard{
  min-height:96px;
  border:1px solid #e7e6f1!important;
  border-inline-start:5px solid var(--talk-violet)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 7px 18px #24234a0b;
  transition:transform .18s,box-shadow .18s,border-color .18s!important;
}
.scienceLessonCard:hover,.mathChapterCard:hover,.mathLessonCard:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 22px #24234a16;
}
.scienceChoice,.mathChoice{
  border-radius:18px!important;
  background:#f0f8fc!important;
  border-color:#d9ebf3!important;
}
.scienceChoice.selected,.mathChoice.selected{
  border-color:var(--talk-violet)!important;
  background:#f0edff!important;
}
.scienceNext,.mathNext,.mathPrimary,.primaryButton,#next,#mathNext,#scienceNext{
  border:0!important;
  border-radius:999px!important;
  background:var(--talk-yellow)!important;
  color:#352c62!important;
  box-shadow:0 7px 16px #d7ac241e;
  font-weight:900!important;
}
@media(max-width:780px){
  #subjectChooser.subjectChooser{
    width:calc(100vw - 14px);
    max-height:calc(100dvh - 12px);
    margin:6px auto;
    padding:12px;
    border-radius:22px;
  }
  .portalTop{padding:10px 12px;border-radius:16px}
  .portalHero{
    grid-template-columns:1fr;
    min-height:260px;
    padding:24px;
    border-radius:24px;
  }
  .portalHeroCopy{max-width:100%}
  .portalHeroArt{
    position:absolute!important;
    left:-18px!important;
    bottom:-35px!important;
    transform:scale(.64)!important;
    transform-origin:left bottom!important;
    opacity:.8;
  }
  .portalHeroCopy h2{max-width:560px;font-size:clamp(29px,8vw,42px)}
  .portalHeroCopy p{max-width:480px}
  .gradeGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .gradeCard{
    min-height:100px!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    padding:10px!important;
  }
  .gradeNumber{width:42px!important;height:42px!important;font-size:23px!important;border-radius:14px!important}
  .gradeStatus{grid-column:2;justify-self:start;padding:5px 9px;font-size:11px}
  .subjectGrid{grid-template-columns:1fr!important}
  .subjectCard{display:grid!important;grid-template-columns:38% 1fr;min-height:160px}
  .subjectCard>img{height:100%!important;min-height:160px;grid-row:1;grid-column:1}
  .subjectCardBody{grid-row:1;grid-column:2;padding:16px!important}
  .subjectBadge{top:8px;right:8px;font-size:10px}
}
@media(max-width:440px){
  .portalBrand strong{font-size:15px}
  .portalBrand small{font-size:10px}
  .gradePill{font-size:10px;padding:5px 8px}
  .subjectSectionHead{align-items:flex-start}
  .subjectCount{font-size:11px}
  .gradeCopy strong{font-size:15px}
  .gradeCopy small{font-size:11px}
  .gradeStatus{font-size:10px}
  .subjectCardBody strong{font-size:20px}
  .subjectCardBody small{font-size:12px}
  .subjectAction{font-size:12px;padding:8px 12px}
  .scienceHero>img{height:150px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}

/* ألوان 51Talk المرحة لصفحات لغتي الداخلية */
.adventure{
  border:0!important;
  border-radius:24px!important;
  background:linear-gradient(118deg,#6958e8 0%,#5364d8 52%,#36a9cc 100%)!important;
  box-shadow:0 14px 30px #5449bd26!important;
  color:#fff!important;
}
.adventure h2{color:#fff!important}
.adventure p{color:#f4f4ff!important}
.adventure .stationHint,.stationHint{
  display:block!important;
  width:fit-content;
  max-width:100%;
  margin:10px 0;
  padding:7px 13px;
  border:1px solid #ffffff55;
  border-radius:999px;
  background:#ffffff20;
  color:#fff!important;
  font-weight:800;
}
.map{
  padding:12px;
  border:1px solid #e5e2fa!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#f5f2ff,#eefaff)!important;
  box-shadow:inset 0 1px #fff;
}
.route{
  padding:14px 10px!important;
  border:1px solid #e8e6f4;
  border-radius:18px;
  background:#faf9ff;
}
.route:before{border-color:#65bfd2!important}
.map button,#letters button,.catchActions button,.journeyPanel button{
  border:1px solid #dedaf7!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#443b9b!important;
  font-weight:900!important;
  box-shadow:0 5px 12px #5146ae12;
  transition:transform .16s,box-shadow .16s,background .16s;
}
.map button:hover,#letters button:hover,.catchActions button:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 17px #5146ae20;
}
.map .selected,#letters button.secondary,#letters button:focus-visible{
  outline:3px solid #ffdf45!important;
  outline-offset:1px;
  background:#fff7ce!important;
  color:#42356f!important;
}
.map .done,#letters button.letterDone{
  border-color:#9ad9c8!important;
  background:#e2f7ef!important;
  color:#176b5e!important;
}
.map .selected.done,#letters button.letterDone.secondary{
  outline-color:#ffdf45!important;
  background:#d7f3e9!important;
}
.card{
  border:1px solid #e7e4f3!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 13px 34px #28245112!important;
}
.card .top .pill,.pill{
  border:1px solid #d8f0f5;
  border-radius:999px;
  background:#e9f8fb!important;
  color:#277d91!important;
  font-weight:900;
}
#visual{
  border:1px solid #e4edf8;
  background:linear-gradient(135deg,#eff8ff,#f4f0ff)!important;
  color:#5145bd!important;
}
#visual:after{color:#e4b925!important}
.bookIntro{
  padding:14px;
  border:1px solid #e8e5f5;
  border-radius:20px;
  background:linear-gradient(120deg,#f5f2ff,#effaff);
}
.bookCover{
  border:3px solid #fff!important;
  box-shadow:0 8px 20px #5146ae20!important;
}
.letterChoice,.choiceWithLetterImage{
  border:1px solid #e3e0f4!important;
  border-bottom:4px solid #8b7bea!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 7px 18px #28245110;
}
.letterChoice:nth-child(3n+1),.choiceWithLetterImage:nth-child(3n+1){border-bottom-color:#ff9e84!important}
.letterChoice:nth-child(3n+2),.choiceWithLetterImage:nth-child(3n+2){border-bottom-color:#62bfd2!important}
.letterChoice:nth-child(3n),.choiceWithLetterImage:nth-child(3n){border-bottom-color:#8b7bea!important}
.letterChoice:hover,.choiceWithLetterImage:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 22px #28245119;
}
.bookLetterCue{
  margin:14px auto;
  padding:12px;
  border:1px solid #e4e1f5;
  border-radius:18px;
  background:#f8f7ff;
}
.bookLetterCue small{color:#68668a!important;font-weight:800}
#choices button,.pickerChoices button{
  border:1px solid #dedaf7!important;
  border-radius:16px!important;
  background:#f3f1ff!important;
  color:#443b9b!important;
  font-weight:900!important;
  box-shadow:0 5px 12px #5146ae10;
}
#choices button:hover,.pickerChoices button:hover{
  border-color:#8b7bea!important;
  background:#e9f8fb!important;
}
#feedback{
  border:1px solid #dcecf3;
  border-radius:16px!important;
  background:#f0f9fc!important;
  color:#315469;
}
#feedback.good{border-color:#a4dec9;background:#e2f7ef!important;color:#176b5e}
#feedback.retry{border-color:#ffc4b8;background:#fff0ed!important;color:#9b4338}
.treasureDialog{
  border:1px solid #e4e1f5!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,#fff,#f8f7ff)!important;
  box-shadow:0 22px 70px #28245135!important;
}
.treasure-button{
  border:0!important;
  border-radius:999px!important;
  background:var(--talk-yellow)!important;
  color:#352c62!important;
  font-weight:900!important;
  box-shadow:0 8px 18px #d7ac2430;
}
.catchHeader small{color:#6455df!important}
.catchHeader h2{color:#30286f!important}
.catchHeader p{color:#555575!important}
#catchArea{
  border:1px solid #dce9f4;
  border-radius:20px;
  background:linear-gradient(135deg,#eff8ff,#f4f0ff);
}
.portalBack,#subjectsBack,#scienceBack,#scienceLessonBack,#mathBack,#mathLessonBack,#mathUnitBack,#returnSubjects,#returnLetters,#worksheetBack,#catchReturn,#catchBackLetters{
  border-color:#dcd8fb!important;
  background:#f2f0ff!important;
  color:#4d42b5!important;
}
#next,#begin,#resumeJourney,#catchStart,#catchSpeak,#openChest,.catchActions .primary{
  border:0!important;
  border-radius:999px!important;
  background:var(--talk-yellow)!important;
  color:#352c62!important;
  font-weight:900!important;
}
@media(max-width:680px){
  .adventure{padding:12px!important;border-radius:18px!important}
  .map{padding:8px;border-radius:16px!important}
  .route{padding:8px!important;overflow-x:auto}
  .card{padding:14px!important;border-radius:18px!important}
  .bookIntro{padding:10px;gap:10px}
  .letterChoice,.choiceWithLetterImage{border-radius:14px!important}
  #choices button,.pickerChoices button{min-height:56px}
}

/* تناسق عمود خريطة الحروف مع واجهة النشاط */
main:has(.adventure)>aside{
  border:1px solid #ffffff35!important;
  border-radius:26px!important;
  background:linear-gradient(155deg,#5142c4 0%,#3d66bf 55%,#236e88 100%)!important;
  color:#fff!important;
  box-shadow:0 16px 38px #28245124;
}
main:has(.adventure)>aside h2{color:#fff!important}
main:has(.adventure)>aside>small{color:#d7f5ff!important}
main:has(.adventure)>aside .loot{
  border:1px solid #ffe894!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#fff5c7,#ffe889)!important;
  color:#43376e!important;
}
main:has(.adventure)>aside .journeyPanel{
  border-color:#ffffff3d!important;
  background:#ffffff19!important;
  box-shadow:none!important;
}
main:has(.adventure)>aside .journeyCopy strong,
main:has(.adventure)>aside .journeyCopy small:last-child{color:#fff!important}
main:has(.adventure)>aside .journeyCopy>small:first-child{color:#ffe88a!important}
main:has(.adventure)>aside .journeyIcon{background:#ffffff25!important}
main:has(.adventure)>aside .journeyBar{background:#ffffff38!important}
main:has(.adventure)>aside .journeyBar span{background:linear-gradient(90deg,#67d3dc,#ffdf45)!important}
main:has(.adventure)>aside .journeyPanel button{
  border:0!important;
  background:#fff!important;
  color:#4d42b5!important;
}
@media(max-width:680px){
  main:has(.adventure)>aside{border-radius:19px!important}
}

/* تباين أوضح لبطاقات رحلة الطالب وشريط التنقل */
main:has(.adventure)>aside .loot[style]{
  border:1px solid #d8d2ff!important;
  background:linear-gradient(135deg,#eeeaff,#e5f8fb)!important;
  color:#3e367f!important;
}
main:has(.adventure)>aside .loot[style] strong{color:#443b9b!important}
main:has(.adventure)>aside .loot[style] small{color:#5d6285!important}
body:has(.adventure)>header{
  border-bottom:1px solid #e7e5f1!important;
  background:#fff!important;
  box-shadow:0 5px 20px #2824510a;
}
body:has(.adventure)>header button{
  border:1px solid #dedaf7!important;
  border-radius:14px!important;
  background:#f2f0ff!important;
  color:#4d42b5!important;
  font-weight:900!important;
}
body:has(.adventure)>header button:hover{background:#e9f8fb!important}

/* نظام موحّد لكل واجهات مسار المعرفة */
:root{
  --talk-ink:#22233d;
  --talk-ink-soft:#62627d;
  --talk-violet:#6455df;
  --talk-violet-dark:#4c40b3;
  --talk-blue:#38afd0;
  --talk-yellow:#ffdf45;
  --talk-coral:#ff786b;
  --talk-green:#67c7a4;
  --talk-paper:#ffffff;
  --talk-line:#e6e5f0;
  --talk-lavender:#f2f0ff;
  --talk-cyan:#eaf8fb;
}
body{
  color:var(--talk-ink)!important;
  background:
    radial-gradient(circle at 8% 8%,#e4f7fb 0,transparent 22rem),
    radial-gradient(circle at 92% 72%,#eeeaff 0,transparent 26rem),
    #f7f7fc!important;
}
body>header{
  position:relative;
  z-index:2;
  padding:14px clamp(14px,3vw,42px)!important;
  border-bottom:1px solid var(--talk-line)!important;
  background:#ffffff!important;
  box-shadow:0 5px 20px #2824510a;
}
header .brand,header .brand strong{color:var(--talk-ink)!important}
header button,main button,dialog button,.mathFooterActions button,.scienceHome>.actions button{
  min-height:42px;
  border:1px solid #dedaf7!important;
  border-radius:14px!important;
  background:var(--talk-lavender)!important;
  color:var(--talk-violet-dark)!important;
  font:inherit;
  font-weight:850!important;
  box-shadow:0 4px 12px #5146ae0d;
  transition:transform .16s,box-shadow .16s,background .16s,border-color .16s,filter .16s;
}
header button:hover,main button:hover:not(:disabled),dialog button:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:#bdb4f2!important;
  background:var(--talk-cyan)!important;
  box-shadow:0 8px 18px #5146ae18;
}
header button:focus-visible,main button:focus-visible,dialog button:focus-visible{
  outline:3px solid var(--talk-yellow)!important;
  outline-offset:2px;
}
header button:disabled,main button:disabled,dialog button:disabled{
  opacity:.58;
  filter:grayscale(.2);
  box-shadow:none;
  transform:none;
}
button.secondary,.secondary,
button[id*="back" i],button[id^="return" i],
.portalBack,#subjectsBack,#introBack,#worksheetBack,#returnSubjects,#returnLetters,
#scienceBack,#scienceLessonBack,#mathBack,#mathLessonBack,#mathUnitBack,
#catchReturn,#catchBackLetters,#treasureBackLetters{
  border:1px solid #dedaf7!important;
  background:#f2f0ff!important;
  color:#4d42b5!important;
}
#next,#begin,#resumeJourney,#catchStart,#openChest,#scienceNext,#mathNext,
.scienceNext,.mathNext,.mathPrimary,.primaryButton,#mathWorksheetPrint,
#worksheetPrint,#visitorFeedbackSend,.enrichmentLaunch,
button.primary,.primary{
  border:0!important;
  border-radius:999px!important;
  background:var(--talk-yellow)!important;
  color:#352c62!important;
  font-weight:900!important;
  box-shadow:0 8px 18px #d7ac2430!important;
}
#next:hover:not(:disabled),#begin:hover:not(:disabled),#resumeJourney:hover,
#catchStart:hover,#openChest:hover,#scienceNext:hover:not(:disabled),
#mathNext:hover:not(:disabled),#visitorFeedbackSend:hover{
  background:#ffe974!important;
}
main{
  width:min(1380px,100%);
  margin-inline:auto;
}
main h1,main h2,main h3,dialog h1,dialog h2,dialog h3{
  color:var(--talk-ink)!important;
}
main p,dialog p{color:var(--talk-ink-soft)}
footer{
  width:min(1180px,100%);
  margin-inline:auto!important;
  color:#686884!important;
  text-align:center;
}
.card,.intro,.storyCard,.storyPanel,.enrichmentCard,.mathActivityPanel,
.scienceActivity,.scienceHome,.sciencePortal,.mathPortal,
#sciencePreview,#mathPreview,#summary,#help,
.visitorFeedbackDialog,.worksheetDialog,.mathWorksheetDialog{
  border:1px solid var(--talk-line)!important;
  border-radius:22px!important;
  background:#fff!important;
  color:var(--talk-ink)!important;
  box-shadow:0 12px 32px #28245110!important;
}
#sciencePreview,.scienceHome,.sciencePortal,.mathPortal,#mathPreview{
  width:min(1100px,calc(100vw - 24px))!important;
  margin:12px auto!important;
  padding:clamp(14px,3vw,28px)!important;
}
.scienceHero,.mathHero,.portalHero{
  border:0!important;
  border-radius:26px!important;
  background:linear-gradient(118deg,#6958e8 0%,#5364d8 52%,#36a9cc 100%)!important;
  color:#fff!important;
  box-shadow:0 16px 34px #5449bd24;
}
.scienceHero h1,.scienceHero h2,.scienceHero h3,
.mathHero h1,.mathHero h2,.mathHero h3,
.portalHero h1,.portalHero h2,.portalHero h3{color:#fff!important}
.scienceHero p,.mathHero p,.portalHero p{color:#f4f4ff!important}
.scienceEdition,.gradePill,.subjectCount,.pill,
.scienceActivityTop,.mathProgress,.mathSectionHeading{
  border:1px solid #dcd8ff;
  border-radius:999px;
  background:#f1efff!important;
  color:#5144c3!important;
  font-weight:850;
}
.scienceUnitHeading,.mathSectionHeading,.bookIntro,.bookLetterCue,
.enrichmentHead,.visitorFeedbackHeader,.worksheetToolbar,.mathWorksheetToolbar{
  border:1px solid #e6e3f3!important;
  border-radius:18px!important;
  background:linear-gradient(120deg,#f7f5ff,#effaff)!important;
}
.scienceLessonCard,.mathChapterCard,.mathLessonCard,
.enrichmentCard,.subjectCard,.gradeCard,.letterChoice,.choiceWithLetterImage{
  border:1px solid #e5e3f0!important;
  border-bottom:4px solid #8b7bea!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 20px #28245110!important;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.scienceLessonCard:hover,.mathChapterCard:hover,.mathLessonCard:hover,
.enrichmentCard:hover,.subjectCard:hover,.gradeCard:hover,
.letterChoice:hover,.choiceWithLetterImage:hover{
  transform:translateY(-3px);
  box-shadow:0 13px 25px #28245118!important;
}
.scienceLessonCard:nth-child(3n+1),.mathChapterCard:nth-child(3n+1),
.mathLessonCard:nth-child(3n+1),.enrichmentCard:nth-child(3n+1){border-bottom-color:#ff9e84!important}
.scienceLessonCard:nth-child(3n+2),.mathChapterCard:nth-child(3n+2),
.mathLessonCard:nth-child(3n+2),.enrichmentCard:nth-child(3n+2){border-bottom-color:#62bfd2!important}
.scienceLessonCard:nth-child(3n),.mathChapterCard:nth-child(3n),
.mathLessonCard:nth-child(3n),.enrichmentCard:nth-child(3n){border-bottom-color:#8b7bea!important}
.scienceChoices button,.scienceChoice,.mathChoice,
#choices button,.pickerChoices button,.choice{
  min-height:52px;
  border:1px solid #dedaf7!important;
  border-radius:16px!important;
  background:#f2f0ff!important;
  color:#443b9b!important;
  font-weight:900!important;
  box-shadow:0 5px 12px #5146ae10!important;
}
.scienceChoices button.selected,.scienceChoice.selected,.mathChoice.selected,
#choices button.selected,.choice.selected,.letterChoice.selected,
.map .selected,#letters button.secondary{
  outline:3px solid var(--talk-yellow)!important;
  outline-offset:1px;
  border-color:#8b7bea!important;
  background:#fff7ce!important;
  color:#42356f!important;
}
#feedback.good,.scienceFeedback.good,.correct,.isCorrect,[data-state="correct"]{
  border-color:#91d8bd!important;
  background:#e1f7ed!important;
  color:#176b5e!important;
}
#feedback.retry,.scienceFeedback.retry,.wrong,.incorrect,.isWrong,[data-state="wrong"]{
  border-color:#ffc2b7!important;
  background:#fff0ed!important;
  color:#963e37!important;
}
dialog{
  max-width:min(820px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  padding:clamp(16px,3vw,28px);
  overflow:auto;
  border:1px solid #e5e2f1!important;
  border-radius:26px!important;
  background:#fff!important;
  color:var(--talk-ink)!important;
  box-shadow:0 24px 80px #28245135!important;
}
dialog::backdrop{background:#17163370;backdrop-filter:blur(7px)}
#subjectChooser.subjectChooser{
  width:min(1260px,calc(100vw - 28px));
  max-width:1260px;
  max-height:calc(100dvh - 24px);
}
#enrichmentDialog,#visitorFeedbackDialog,#treasureChest,
#worksheetDialog,#mathWorksheetDialog{
  width:min(820px,calc(100vw - 24px));
}
.enrichmentIcon,.journeyIcon,.portalMark,.gradeNumber,
.mathChapterNumber,.scienceLessonNum,.scienceLessonThumb,
.catchTarget,.meemTarget,.heroMini,.heroOrb,.subjectBadge,
.completionBadge,.catchPoints,.catchScoreBar{
  border-radius:16px!important;
}
.portalMark,.enrichmentIcon,.journeyIcon,.mathChapterNumber,
.scienceLessonNum,.scienceLessonThumb,.catchTarget,.meemTarget{
  display:inline-grid;
  place-items:center;
  background:linear-gradient(145deg,#eeeaff,#e6f8fb)!important;
  color:#5144c3!important;
  box-shadow:inset 0 0 0 1px #dcd8ff;
}
.gradeNumber,.mathChapterNumber,.scienceLessonNum{
  color:#5144c3!important;
}
.heroMini,.miniMath,.miniScience,.heroOrb,.heroBook,.heroSpark,
.enrichmentIcon,.journeyIcon,.portalMark,.gradeNumber,
.mathChapterNumber,.scienceLessonThumb,.subjectBadge{
  transition:transform .18s,filter .18s;
}
.subjectCard>img,.scienceLessonThumb img,.storyArt img,
.storyboard img,.bookCover,.bookLetterCue img,
.scienceQuestionImage,.enrichmentCard img{
  border-radius:16px!important;
}
.storyPanel,.storyCard,.storyIntro,.storyboard,.storyQuestion{
  border-color:#e3e0f2!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,#f8f6ff,#eefaff)!important;
  color:var(--talk-ink)!important;
}
.treasureDialog,.enrichmentDialog,.visitorFeedbackDialog,
.worksheetDialog,.mathWorksheetDialog{
  border:1px solid #e5e2f1!important;
  background:linear-gradient(145deg,#fff,#f8f7ff)!important;
  box-shadow:0 22px 70px #28245135!important;
}
.visitorFeedbackLauncher,.visitorFeedbackClose,.visitorFeedbackSend{
  border-radius:999px!important;
}
.visitorFeedbackLauncher,.visitorFeedbackSend{
  background:var(--talk-yellow)!important;
  color:#352c62!important;
}
.loot{border-radius:18px!important;box-shadow:0 6px 15px #28245114}
.progress,progress,.journeyBar,.scienceProgressTrack{
  accent-color:var(--talk-violet);
}
progress::-webkit-progress-value,.scienceProgressTrack span,.journeyBar span{
  background:linear-gradient(90deg,var(--talk-violet),var(--talk-blue),var(--talk-yellow));
}
input,textarea,select{
  border:1px solid #dcdaf0!important;
  border-radius:13px!important;
  background:#fff!important;
  color:var(--talk-ink)!important;
}
input:focus,textarea:focus,select:focus{
  outline:3px solid #dedaff!important;
  border-color:var(--talk-violet)!important;
}
@media(max-width:780px){
  body>header{gap:8px;padding:10px 12px!important}
  header button,main button,dialog button{min-height:42px}
  .scienceHome,.sciencePortal,.mathPortal,#sciencePreview,#mathPreview{
    width:calc(100vw - 14px)!important;
    margin:7px auto!important;
    padding:12px!important;
    border-radius:18px!important;
  }
  .scienceLessonCard,.mathChapterCard,.mathLessonCard,.enrichmentCard{border-radius:16px!important}
  dialog{max-width:calc(100vw - 14px);max-height:calc(100dvh - 14px);padding:14px;border-radius:20px!important}
  #enrichmentDialog,#visitorFeedbackDialog,#treasureChest,#worksheetDialog,#mathWorksheetDialog{
    width:calc(100vw - 14px);
  }
}
@media(prefers-reduced-motion:reduce){
  button,article,.subjectCard,.gradeCard,.letterChoice,.scienceLessonCard,.mathChapterCard,.mathLessonCard{
    transition:none!important;
    animation:none!important;
  }
}


/* استبدال بقايا لوحة الألوان القديمة عبر جميع الشاشات */
:root{
  --mk-ink:var(--talk-ink);
  --mk-teal:var(--talk-violet);
  --mk-surface:#fff;
  --mk-line:var(--talk-line);
  --mk-gold:var(--talk-yellow);
  --mk-radius:20px;
}
body{color:var(--talk-ink)!important}
small{color:#777790!important}
h1,h2,h3,h4{color:var(--talk-ink)}
.journeyPanel{
  border:1px solid #dedaf7!important;
  border-radius:20px!important;
  background:linear-gradient(110deg,#f2f0ff 0%,#edf9fc 100%)!important;
  box-shadow:0 9px 24px #5146ae12!important;
}
.journeyPanel .journeyIcon{
  background:linear-gradient(145deg,#eeeaff,#e6f8fb)!important;
  color:#5144c3!important;
}
.journeyPanel .journeyCopy strong{color:#30286f!important}
.journeyPanel .journeyCopy small{color:#777790!important}
.journeyPanel .journeyBar{background:#e1dffa!important}
.journeyPanel .journeyBar span{background:linear-gradient(90deg,#6455df,#38afd0,#ffdf45)!important}
.journeyPanel button{
  border:0!important;
  border-radius:999px!important;
  background:var(--talk-yellow)!important;
  color:#352c62!important;
  box-shadow:0 6px 15px #d7ac2425!important;
}
.team{background:linear-gradient(120deg,#5142c4,#358ecb)!important;color:#fff!important}
.stop b{
  border:2px solid #fff!important;
  background:#e9f8fb!important;
  color:#5144c3!important;
  box-shadow:0 4px 12px #5146ae18!important;
}
.route b{background:#eeeaff!important;color:#5144c3!important}
.loot{
  border:1px solid #f1d36b!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fff6cf,#ffdf45)!important;
  color:#43376e!important;
}
.subjectCard.availableCard>.subjectCardBody{
  background:linear-gradient(145deg,#fff 0%,#f4f2ff 100%)!important;
}
.subjectCardBody{color:var(--talk-ink)!important}
.subjectCardBody strong{color:#292746!important}
.subjectCardBody small{color:#777790!important}
.gradePill,.availableBadge{
  border-color:#dedaf7!important;
  background:#f1efff!important;
  color:#5144c3!important;
}
#visitorFeedbackLauncher{
  border:1px solid #f1d36b!important;
  background:var(--talk-yellow)!important;
  color:#352c62!important;
  box-shadow:0 7px 18px #5146ae24!important;
}
#visitorFeedbackDialog[open]{
  border-color:#dedaf7!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,#fff,#f8f7ff)!important;
  color:var(--talk-ink)!important;
}
#siteViewCount{
  border:1px solid #dedaf7!important;
  background:#f1efff!important;
  color:#5144c3!important;
}
.worksheetPage{
  border-color:#bdb4f2!important;
  border-radius:22px!important;
  background:#fff!important;
  color:var(--talk-ink)!important;
}
#mathWorksheetDialog[open]{
  border-color:#dedaf7!important;
  border-radius:23px!important;
  background:#f8f7ff!important;
}
.mathTenFrame,.mathSkillCard,.mathPatternFixed,.mathPatternGap,
.mathOrderLine>span,.mathCombineGroups>div,.mathCompositionWays,
.mathNumberWord,.mathBuildPad{
  border-color:#dcd8ff!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#f2f0ff,#edf9fc)!important;
  color:#443b9b!important;
}
.mathNumberWord{color:#443b9b!important}
.mathSectionHeading p{color:#777790!important}
.scienceLessonThumb,.scienceQuestionImage[src$='.svg']{background:#edf9fc!important}
.scienceLessonNum{
  background:linear-gradient(145deg,#eeeaff,#e6f8fb)!important;
  color:#5144c3!important;
}
.scienceChoice{
  border-color:#d9ebf3!important;
  background:#f0f8fc!important;
  color:#443b9b!important;
}
.scienceChoice.correct{
  border-color:#67c7a4!important;
  background:#e2f7ef!important;
  color:#176b5e!important;
}
@media(max-width:780px){.journeyPanel{border-radius:16px!important}}


/* توحيد شارات حالة الدروس وأدوات العلوم والرياضيات */
.mathChapterState,.mathLessonState,.scienceLessonState{
  border:1px solid #dedaf7!important;
  border-radius:999px!important;
  background:#f1efff!important;
  color:#5144c3!important;
}
.scienceSound,.mathAudioToggle,[data-math-audio-toggle]{
  border-color:#dedaf7!important;
  border-radius:999px!important;
  background:#f1efff!important;
  color:#5144c3!important;
}
.scienceSound input,.mathAudioToggle input{accent-color:#6455df!important}
.scienceProgressTrack,.mathProgressTrack,.mathProgress{
  background:#e9e7f6!important;
}
.scienceProgressTrack span,.mathProgressTrack span,.mathProgress span{
  background:linear-gradient(90deg,#6455df,#38afd0,#ffdf45)!important;
}
.mathHero small,.scienceHero small{
  color:#fff2a4!important;
}

/* تباين شارة طبعة كتاب العلوم فوق خلفيتها الفاتحة */
.scienceHero .scienceEdition{color:#5144c3!important}


/* iPhone and narrow-screen horizontal overflow guard */
html,body{max-width:100%;overflow-x:hidden!important}
@media(max-width:780px){
  *,*::before,*::after{box-sizing:border-box}
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }
  body>*{max-width:100vw}
  main,main>*{min-width:0}
  #subjectChooser,#intro,#help,#summary,#enrichmentDialog,
  #treasureChest,#worksheetDialog,#mathWorksheetDialog,
  #visitorFeedbackDialog{
    box-sizing:border-box;
    max-width:calc(100vw - 16px)!important;
  }
  #sciencePreview,#mathPreview,.sciencePortal,.mathPortal,
  .scienceHome,.mathHome,.subjectHome,.gradeHome,
  .scienceActivity,.mathActivityPanel,.mathActivityTop,
  .scienceLessons,.mathChapterGrid,.mathLessonGrid,
  .subjectGrid,.gradeGrid,.card,.journeyPanel{
    box-sizing:border-box;
    min-width:0;
    max-width:100%;
  }
  img,video,canvas,svg{max-width:100%}
}