:root {
  --sky: #34b7e6;
  --sky-deep: #239dcc;
  --blue: #184b9f;
  --blue-2: #2e64c4;
  --coral: #ef625e;
  --orange: #f59b42;
  --green: #6bbf58;
  --yellow: #ffc94a;
  --purple: #6a50bd;
  --ink: #19334d;
  --muted: #6f8090;
  --line: #dfeaf2;
  --paper: #ffffff;
  --soft: #f6fbff;
  --shadow: 0 16px 42px rgba(29, 88, 128, .14);
  --radius: 26px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, #e9f9ff 0%, #f7fcff 42%, #f8fff4 100%);
  font-family: "Tajawal", Tahoma, Arial, sans-serif;
  font-weight: 400;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid rgba(24,75,159,.28); outline-offset: 2px; }

.title-font, h1, h2, h3, .big-letter, .stage-letter, .story-title {
  font-family: "Baloo Bhaijaan 2", "Tajawal", sans-serif;
}


[hidden] { display: none !important; }
.app-shell { min-height: 100vh; }
.persistent-brand {
  position: relative;
  width: 100%;
  background: var(--sky);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(27,92,135,.18);
  scroll-margin-top: 72px;
}
.persistent-brand img { display:block; width:100%; height:auto; object-fit:contain; object-position:center top; }

/* Visible project authorship notice: intentionally overlays the quiet lower field of the brand cover
   so attribution is prominent without changing the approved page layout. */
/* Visible project authorship notice: placed under the teacher area on the left side of the hero
   to double as attribution and teacher identification without disturbing the approved layout. */
/* Visible project authorship notice: centered under the teacher figure so it reads as both
   project attribution and teacher identification, while remaining compact and unobtrusive. */
.project-copyright {
  position: absolute;
  z-index: 3;
  left: 18.1%;
  bottom: clamp(8px, 1.15vw, 16px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  direction: rtl;
  max-width: min(40vw, 480px);
  padding: clamp(4px, .5vw, 7px) clamp(9px, .95vw, 15px);
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: #173f7c;
  box-shadow: 0 7px 18px rgba(25,75,110,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: clamp(.62rem, .86vw, .86rem);
  font-weight: 800;
  line-height: 1.16;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.project-copyright .copyright-mark {
  display: inline-block;
  color: inherit;
  font-family: Arial, sans-serif;
  font-size: 1.2em;
  font-weight: 900;
  line-height: 1;
}
@media (max-width: 900px) {
  .project-copyright {
    left: 18.1%;
    bottom: 6px;
    max-width: min(46vw, 320px);
    padding: 3px 7px;
    gap: .26em;
    font-size: clamp(.42rem, 1.35vw, .62rem);
    background: rgba(255,255,255,.8);
  }
  .project-copyright .copyright-mark { font-size: 1.16em; }
}
@media (max-width: 520px) {
  .project-copyright {
    left: 20.6%;
    bottom: 4px;
    max-width: 32vw;
    padding: 1px 4px;
    gap: .12em;
    border-width: .65px;
    font-size: clamp(.28rem, 1.05vw, .38rem);
    line-height: 1.02;
  }
  .project-copyright .copyright-mark { font-size: 1.1em; }
}
@media print { .project-copyright { display:none !important; } }
.home-start { padding: 22px 0 30px; }
#app { scroll-margin-top: 82px; }
#app { min-height: 55vh; padding-bottom: calc(88px + var(--safe-bottom)); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(24,75,159,.07);
  box-shadow: 0 5px 22px rgba(26,83,122,.08);
}
.top-title { text-align: center; line-height: 1; }
.top-title span { display: block; color: var(--blue); font-family: "Baloo Bhaijaan 2", sans-serif; font-size: 1.32rem; font-weight: 800; }
.top-title small { display: block; margin-top: 2px; color: var(--coral); font-weight: 700; }
.top-actions { display: flex; gap: 7px; }
.icon-btn {
  width: 46px; height: 46px; border: 0; border-radius: 15px;
  background: #edf7ff; color: var(--blue); font-weight: 800; cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(24,75,159,.07);
}
.icon-btn:active { transform: translateY(1px); }

.bottom-nav {
  position: fixed; z-index: 55; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(5,1fr);
  padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + var(--safe-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(24,75,159,.08);
  box-shadow: 0 -10px 30px rgba(25,75,110,.08);
}
.nav-item {
  border: 0; background: transparent; color: #7e8d99; cursor: pointer;
  display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 15px;
  font-weight: 800;
}
.nav-item span { font-size: 1.18rem; line-height: 1; }
.nav-item small { font-size: .74rem; font-weight: 800; }
.nav-item.active { color: var(--blue); background: #eef5ff; }

/* Home */
.hero-screen { padding: 0 0 28px; }
.hero-brand {
  width: 100%;
  background: var(--sky);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(27,92,135,.18);
}
.hero-brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center top;
}
.hero-cta {
  width: min(900px, calc(100% - 28px));
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(24,75,159,.08);
  border-radius: 28px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.hero-cta h1 { margin: 0; color: var(--blue); font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.1; }
.hero-cta p { margin: 5px 0 0; color: var(--muted); font-weight: 500; line-height: 1.8; }
.cta-btn, .primary-btn, .secondary-btn, .success-btn, .ghost-btn {
  border: 0; border-radius: 18px; cursor: pointer; padding: 14px 22px;
  font-family: "Tajawal", sans-serif; font-weight: 800; font-size: 1.03rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-btn, .primary-btn { color: #fff; background: linear-gradient(180deg, #2b62c6, #184b9f); box-shadow: 0 10px 22px rgba(24,75,159,.23); }
.cta-btn { min-width: 190px; font-size: 1.13rem; }
.secondary-btn { background: #fff; color: var(--blue); border: 2px solid #d9e8fb; }
.success-btn { background: linear-gradient(180deg, #7acb64, #59ac49); color: #fff; box-shadow: 0 10px 22px rgba(72,154,58,.2); }
.ghost-btn { background: #eef7ff; color: var(--blue); }
.cta-btn:active, .primary-btn:active, .secondary-btn:active, .success-btn:active, .ghost-btn:active { transform: translateY(2px); }

/* Journey */
.page { width: min(1160px, 100%); margin: 0 auto; padding: 28px 18px 34px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 22px; }
.page-head h2 { margin: 0; color: var(--blue); font-size: clamp(1.8rem, 4vw, 2.65rem); line-height: 1.1; }
.page-head p { margin: 5px 0 0; color: var(--muted); font-weight: 500; }
.progress-pill { direction: rtl; unicode-bidi: plaintext; background: #fff; color: var(--purple); border-radius: 999px; padding: 10px 15px; font-weight: 800; box-shadow: var(--shadow); white-space: nowrap; }
.journey-map { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.letter-stop {
  position: relative; min-height: 182px; border: 0; border-radius: 30px; padding: 22px;
  color: #fff; text-align: right; cursor: pointer; overflow: hidden; box-shadow: var(--shadow);
  font-weight: 700; transition: transform .16s ease;
}
.letter-stop:hover { transform: translateY(-3px); }
.letter-stop h3 { margin: 0 0 5px; font-size: 2rem; color: #fff; }
.letter-stop p { margin: 0; opacity: .94; line-height: 1.75; }
.letter-stop .big-letter { position: absolute; left: 16px; bottom: -26px; font-size: 8.8rem; opacity: .2; line-height: 1; }
.letter-stop .status { display: inline-flex; margin-top: 15px; border-radius: 999px; padding: 7px 12px; background: rgba(255,255,255,.18); font-size: .78rem; font-weight: 800; }
.letter-stop.m { background: linear-gradient(135deg,#f06a63,#dc4854); }
.letter-stop.b { background: linear-gradient(135deg,#2e77d1,#184ba7); }
.letter-stop.l { background: linear-gradient(135deg,#45b8e1,#238cb9); }
.letter-stop.d { background: linear-gradient(135deg,#f9ae44,#ed7b2e); }
.letter-stop.n { background: linear-gradient(135deg,#7bc865,#4aaa4e); }
.letter-stop.r { background: linear-gradient(135deg,#a36bd9,#6845bd); }

/* Lesson with right sidebar */
.lesson-page { width: min(1280px,100%); margin: 0 auto; padding: 20px 18px 34px; }
.lesson-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px; background: #fff; border-radius: 24px; padding: 16px 18px; box-shadow: var(--shadow);
}
.lesson-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.stage-letter {
  width: 66px; height: 66px; border-radius: 22px; color: #fff; display: grid; place-items: center;
  font-size: 3rem; line-height: 1; flex: none; box-shadow: inset 0 -4px 0 rgba(0,0,0,.07);
}
.lesson-head h2 { margin: 0; color: var(--blue); font-size: clamp(1.65rem, 3.5vw, 2.35rem); }
.lesson-head p { margin: 2px 0 0; color: var(--muted); font-weight: 500; }
 .mobile-section-picker { display:none; }
.lesson-layout {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0,1fr) 286px;
  gap: 18px;
  align-items: start;
}
.lesson-main, .lesson-sidebar { direction: rtl; }
.lesson-sidebar {
  position: sticky; top: 90px;
  background: #fff; border-radius: 26px; padding: 12px; box-shadow: var(--shadow);
  border: 1px solid rgba(24,75,159,.07);
}
.section-nav-title { padding: 7px 8px 12px; color: var(--blue); font-family: "Baloo Bhaijaan 2", sans-serif; font-size: 1.25rem; font-weight: 800; }
.section-nav { display: grid; gap: 8px; }
.section-nav-btn {
  width: 100%; border: 0; border-radius: 17px; background: #f7fbfe; color: var(--ink); cursor: pointer;
  display: grid; grid-template-columns: 44px minmax(0,1fr) 24px; align-items: center; gap: 9px;
  padding: 8px 9px; text-align: right; font-weight: 800; transition: .15s ease;
}
.section-nav-btn:hover { transform: translateX(-2px); }
.section-nav-btn.active { background: var(--section-soft); color: var(--section-color); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--section-color) 22%, transparent); }
.section-icon {
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; background: var(--section-color); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08);
}
.section-icon svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.section-nav-btn .nav-check { color: var(--green); font-weight: 800; opacity: 0; }
.section-nav-btn.done .nav-check { opacity: 1; }

.lesson-card {
  min-height: 590px;
  background: rgba(255,255,255,.98); border: 1px solid rgba(24,75,159,.07);
  border-radius: 30px; padding: 26px; box-shadow: var(--shadow); overflow: hidden;
}
.lesson-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.lesson-card-head h3 { margin: 0; color: var(--blue); font-size: clamp(1.65rem, 3.4vw, 2.35rem); line-height: 1.15; }
.lesson-card-head p { margin: 9px 0 0; color: #6e8092; line-height: 1.95; max-width: 760px; font-size: 1.06rem; font-weight: 700; }
.section-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 12px; color: var(--section-color); background: var(--section-soft); font-weight: 800; white-space: nowrap; }
.content-stack { display: grid; gap: 16px; }
.feature-box { background: #f8fcff; border: 1px solid #e2eef6; border-radius: 22px; padding: 18px; }
.feature-box h4 { margin: 0 0 8px; color: var(--blue); font-size: 1.1rem; font-weight: 800; }
.feature-box p { margin: 0; line-height: 1.95; }
.letter-orb {
  min-height: 285px; border-radius: 30px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 28%, #fff 0%, #fff8ed 47%, #ffe4ba 100%);
  border: 3px solid #fff; box-shadow: inset 0 0 0 1px #f3dfc2, 0 12px 35px rgba(34,89,125,.12);
}
.letter-orb .glyph { font-family: "Baloo Bhaijaan 2", sans-serif; font-size: clamp(9rem,24vw,14.5rem); color: var(--letter-color); line-height: .78; }
.letter-forms { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.form-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.form-tab { border:0; border-radius:16px; padding:12px 10px; background:#f1f7ff; color:var(--blue); font-weight:800; cursor:pointer; }
.form-tab.active { background:var(--letter-color); color:#fff; box-shadow:0 8px 18px color-mix(in srgb, var(--letter-color) 24%, transparent); }
.form-display { min-height:315px; text-align:center; }
.form-display-inner { width:min(760px,96%); display:grid; justify-items:center; gap:12px; padding:18px 10px 18px; overflow:visible; }
.form-position-visual {
  display:block;
  width:min(620px,100%);
  aspect-ratio:47 / 17;
  height:auto;
  object-fit:fill;
  object-position:center;
  margin-inline:auto;
  border-radius:20px;
}
.form-display .glyph { font-size:clamp(6.7rem,18vw,10.2rem); display:inline-block; line-height:.92; transform:translateY(var(--form-glyph-shift,0)) scale(var(--form-glyph-scale,1)); transform-origin:center top; }
.form-chip, .word-chip, .sound-choice, .quiz-choice, .hunt-chip {
  border: 0; border-radius: 16px; padding: 11px 15px; cursor: pointer; background: #f1f7ff; color: var(--blue); font-weight: 800;
}
.form-chip { font-family: "Baloo Bhaijaan 2", sans-serif; font-size: 1.5rem; min-width: 74px; }
.word-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.word-chip { min-height: 58px; font-size: 1.02rem; }
.word-chip:hover, .sound-choice:hover, .quiz-choice:hover, .hunt-chip:hover { background: #e7f1ff; }
.sound-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.sound-pair { text-align: center; border-radius: 22px; padding: 17px; background: #f7fbff; border: 1px solid #e2edf6; }
.sound-pair strong { display: block; font-family: "Baloo Bhaijaan 2", sans-serif; font-size: 2.15rem; color: var(--blue); }
.sound-pair span { color: var(--muted); font-weight: 700; }
.audio-btn { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 14px; padding: 10px 13px; background: #eef7ff; color: var(--blue); cursor: pointer; font-weight: 800; }
.audio-btn::before { content: "♪"; font-size: 1.15rem; }
.audio-note { border-radius: 16px; padding: 12px 14px; background: #fff8e4; color: #7e5d14; font-weight: 500; line-height: 1.7; }

.hunt-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding-left:clamp(185px,18vw,220px);
  align-items:stretch;
}
.hunt-grid .hunt-chip {
  width:100%;
  min-width:0;
  min-height:72px;
}
.quiz-grid { display:flex; flex-wrap:wrap; gap:10px; }
.hunt-chip.selected { background: #dcecff; box-shadow: inset 0 0 0 2px var(--blue); }
.hunt-chip.good, .quiz-choice.correct { background: #e2f7df; color: #2d7f31; box-shadow: inset 0 0 0 2px #72bf68; }
.hunt-chip.bad, .quiz-choice.wrong { background: #ffe7e5; color: #a73e39; box-shadow: inset 0 0 0 2px #ed7b73; }

.trace-wrap { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: 16px; align-items: stretch; }
.trace-board { position: relative; min-height: 360px; border-radius: 26px; overflow: hidden; background: #fcfdff; border: 2px dashed #c9ddeb; touch-action: none; }
.trace-guide { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Baloo Bhaijaan 2", sans-serif; font-size: min(47vw, 16rem); color: #e1e7ec; user-select: none; pointer-events: none; }
.trace-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.trace-tools { display: grid; align-content: center; gap: 10px; }
.trace-tools .status-box { background: #eff8ff; border-radius: 18px; padding: 14px; color: var(--blue); font-weight: 800; text-align: center; }

.story-box { position: relative; overflow: hidden; background: linear-gradient(135deg,#eef9ff,#fff8e7); border-radius: 26px; padding: 22px; }
.story-box::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(52,183,230,.12); left: -60px; bottom: -80px; }
.story-title { margin: 0 0 9px; color: var(--purple); font-size: 1.8rem; }
.story-box p { margin: 0; line-height: 2; position: relative; z-index: 1; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5eef5; }
.lesson-actions .side-actions { display: flex; gap: 10px; }

.empty-page { text-align: center; padding: 90px 18px; }
.empty-page h2 { color: var(--blue); font-size: 2.4rem; margin: 0 0 10px; }
.empty-page p { color: var(--muted); }
.badge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.badge-card { background: #fff; border-radius: 24px; padding: 20px; box-shadow: var(--shadow); text-align: center; }
.badge-card .badge-letter { font-family: "Baloo Bhaijaan 2", sans-serif; font-size: 4rem; color: var(--coral); }
.badge-card.locked { opacity: .45; }

.toast {
  position: fixed; z-index: 90; left: 50%; bottom: calc(98px + var(--safe-bottom)); transform: translateX(-50%) translateY(18px);
  width: min(520px, calc(100% - 28px)); padding: 13px 16px; border-radius: 16px; background: #18334b; color: #fff;
  text-align: center; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sync-status { position:fixed; inset-inline-end:12px; bottom:calc(74px + env(safe-area-inset-bottom)); z-index:80; padding:7px 11px; border-radius:999px; background:rgba(25,51,77,.92); color:#fff; font-size:.78rem; font-weight:700; box-shadow:0 5px 16px rgba(25,51,77,.18); }
.sync-status[hidden] { display:none; }
.studio-audio-audit { margin:12px 0 16px; padding:14px; border:1px solid #d8e6f2; border-radius:18px; background:#f8fcff; }

@media (max-width: 980px) {
  .journey-map { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lesson-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 14px; }
  .word-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  #app { padding-bottom: calc(82px + var(--safe-bottom)); }
  .hero-cta { grid-template-columns: 1fr; text-align: center; }
  .cta-btn { width: 100%; }
  .page-head, .lesson-head { align-items: flex-start; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-sidebar { display:none; }
  .mobile-section-picker {
    display:flex; align-items:center; gap:8px; width:fit-content; max-width:100%;
    margin:0 0 12px auto; padding:8px 10px; border-radius:16px;
    background:#fff; border:1px solid rgba(24,75,159,.10); box-shadow:0 7px 18px rgba(34,89,125,.08);
  }
  .mobile-section-picker label { color:var(--blue); font-weight:800; white-space:nowrap; }
  .mobile-section-picker select {
    min-width:170px; max-width:min(68vw,280px); border:1px solid #d8e6f2; border-radius:12px;
    background:#f7fbff; color:var(--ink); padding:9px 11px; font:800 .98rem "Tajawal",sans-serif; direction:rtl;
  }
  .lesson-card { min-height: 520px; padding: 20px 16px; }
  .lesson-card-head { display:block; }
  .trace-wrap { grid-template-columns: 1fr; }
  .trace-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trace-tools .status-box { grid-column: 1/-1; }
  .word-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hunt-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding-left:0; }
  .sound-row { grid-template-columns: 1fr; }
  .form-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .badge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .journey-map { grid-template-columns: 1fr; }
  .letter-stop { min-height: 150px; }
  .page { padding-inline: 12px; }
  .lesson-page { padding-inline: 10px; }
  .lesson-head { padding: 13px; }
  .stage-letter { width: 56px; height: 56px; font-size: 2.5rem; }
  .lesson-head p { display: none; }
  .progress-pill { display: none; }
  .word-grid { grid-template-columns: 1fr 1fr; }
  .badge-grid { grid-template-columns: 1fr 1fr; }
}

/* v4: writing form selector */
.trace-selected-label {
  width: fit-content;
  margin-inline: auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: #eef9ef;
  color: #2d7d3b;
  font-weight: 800;
}
.write-form-tabs { margin-bottom: 2px; }

/* v5: وسام الحرف وإثبات الإنجاز */
.section-nav-btn.badge-ready .nav-check,
.section-nav-btn.badge-locked .nav-check { opacity: 1; }
.section-nav-btn.badge-ready { background:#faf7ff; }
.section-nav-btn.badge-locked { opacity:.72; }
.section-nav-btn.badge-locked .section-icon { filter:saturate(.55); }

.badge-lock-panel {
  min-height: 430px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  text-align:center;
  padding:34px 18px;
  border-radius:28px;
  background:linear-gradient(145deg,#f8fbff,#faf7ff);
  border:1px solid #e5e9f7;
}
.badge-lock-icon { font-size:4.5rem; filter:drop-shadow(0 10px 16px rgba(82,65,137,.14)); }
.badge-lock-panel h4 { margin:0; color:var(--purple); font-size:1.45rem; }
.badge-lock-panel p { margin:0; color:var(--muted); }
.missing-sections { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:10px; }
.missing-section-btn {
  border:0; border-radius:16px; padding:10px 13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--section-soft); color:var(--section-color); font-weight:800;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--section-color) 18%,transparent);
}
.missing-section-btn span { width:28px; height:28px; display:grid; place-items:center; }
.missing-section-btn svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.badge-complete-wrap { display:grid; gap:18px; }
.badge-name-panel {
  display:grid; gap:8px; padding:16px 18px; border-radius:22px;
  background:#f8fcff; border:1px solid #e1eef6;
}
.badge-name-panel label { color:var(--blue); font-weight:800; }
.badge-name-panel small { color:var(--muted); line-height:1.7; }
.student-name-input {
  width:100%; min-height:52px; border:2px solid #dbe9f3; border-radius:16px; padding:10px 14px;
  background:#fff; color:var(--ink); font-weight:700; font-size:1.05rem; outline:none;
}
.student-name-input:focus { border-color:#91b9e8; box-shadow:0 0 0 4px rgba(46,100,196,.08); }

.achievement-badge {
  position:relative; overflow:hidden; text-align:center;
  padding:28px 22px 24px; border-radius:34px;
  background:linear-gradient(145deg,#e7f8ff 0%,#fff 48%,#f4ffec 100%);
  border:3px solid #fff;
  box-shadow:inset 0 0 0 1px #d9ebf5,0 18px 42px rgba(29,88,128,.14);
}
.achievement-badge::before,.achievement-badge::after {
  content:"★"; position:absolute; color:var(--yellow); font-size:2.1rem; opacity:.9;
}
.achievement-badge::before { right:28px; top:30px; transform:rotate(12deg); }
.achievement-badge::after { left:34px; bottom:35px; color:var(--sky); transform:rotate(-12deg); }
.badge-brand-title { color:var(--blue); font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-size:clamp(1.55rem,3vw,2.2rem); font-weight:800; }
.badge-ribbon { color:var(--coral); font-weight:800; margin-top:2px; }
.badge-medal {
  width:170px; height:170px; margin:20px auto 14px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--badge-letter-color);
  border:12px solid var(--yellow); box-shadow:0 14px 24px rgba(24,75,159,.15), inset 0 -8px 0 rgba(0,0,0,.07);
}
.badge-medal span { font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-size:7rem; line-height:.9; }
.achievement-badge h4 { margin:0; color:var(--ink); font-size:1.25rem; }
.badge-student { margin-top:10px; color:var(--blue); font-weight:800; font-size:clamp(1.55rem,3.4vw,2.35rem); }
.badge-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin-top:13px; color:var(--muted); font-weight:700; }
.badge-meta span { background:rgba(255,255,255,.76); border-radius:999px; padding:6px 10px; }
.badge-code { width:fit-content; margin:12px auto 0; border-radius:999px; padding:7px 12px; background:#f2efff; color:var(--purple); font-weight:800; direction:ltr; }

.badge-message-box {
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:16px 18px; border-radius:24px; background:#fff8e8; border:1px solid #f3e3b2;
}
.badge-message-box .message-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:17px; background:var(--yellow); color:#77520b; font-size:1.5rem; font-weight:800; }
.badge-message-box h4 { margin:0 0 3px; color:#735615; }
.badge-message-box p { margin:0; color:#66583d; line-height:1.9; }
.badge-actions-row { display:flex; justify-content:center; }


@media (max-width:760px) {
  .badge-message-box { grid-template-columns:48px minmax(0,1fr); }
  .badge-message-box .audio-btn { grid-column:1/-1; justify-self:stretch; justify-content:center; }
  .badge-medal { width:145px; height:145px; }
  .badge-medal span { font-size:6rem; }
}
.badge-card { border:0; color:var(--ink); font-family:inherit; cursor:pointer; }
.badge-card h3 { margin:5px 0; color:var(--blue); }
.badge-card p { margin:0 0 10px; color:var(--muted); }
.badge-card-action { display:inline-flex; border-radius:999px; padding:7px 11px; background:#eef5ff; color:var(--blue); font-weight:800; font-size:.84rem; }

/* v5.1 — فصل الأصوات القصيرة والطويلة */
.sound-groups { gap:18px; }
.sound-group {
  display:grid; gap:14px; padding:18px; border-radius:26px;
  border:1px solid #e1ebf4; background:#fbfdff;
}
.sound-group.short-sounds { background:linear-gradient(180deg,#f7fbff 0%,#fff 100%); }
.sound-group.long-sounds { background:linear-gradient(180deg,#f8f5ff 0%,#fff 100%); border-color:#e6dcfb; }
.sound-group-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.sound-group-head h4 { margin:0 0 3px; color:var(--blue); font-size:1.28rem; }
.sound-group-head p { margin:0; color:var(--muted); line-height:1.75; }
.sound-single strong { font-size:2.65rem; }
.long-sound-card strong { color:var(--purple); }
.sound-spelling-note { background:#fff7d9; border:1px solid #f1df9c; color:#765714; }
.sound-spelling-note strong { color:#61440a; }
@media (max-width:760px) {
  .sound-group-head { align-items:stretch; flex-direction:column; }
  .sound-group-head .audio-btn { width:100%; justify-content:center; }
}


/* v5.5 — نص الدرس + صورة موحدة + كلمات الاستماع */
.observe-composed-card {
  display:grid; grid-template-columns:1.2fr .95fr; gap:20px; align-items:center;
  padding:20px; border-radius:28px; background:#fff; border:1px solid #dbeaf4;
  box-shadow:0 12px 30px rgba(34,89,125,.10);
}
.observe-passages { display:grid; gap:14px; }
.observe-line {
  margin:0; padding:14px 16px; border-radius:20px; background:#f8fbff; border:1px solid #e3eef8;
  color:var(--ink); font-size:clamp(1.2rem,2vw,1.6rem); line-height:2.1; font-weight:700;
}
.observe-line .speaker { color:var(--blue); font-weight:800; }
.observe-line .target-word { color:var(--accent); font-weight:900; }
.observe-scene-figure {
  margin:0; overflow:hidden; border-radius:24px; background:#f7fbff; border:1px solid #dbe8f4;
  display:flex; align-items:center; justify-content:center; min-height:320px;
}
.observe-scene-figure img { display:block; width:100%; height:auto; object-fit:contain; }
.listen-task { padding:16px 18px; border-radius:22px; background:#fff8df; border:1px solid #f1dfaa; }
.listen-task h4 { margin:0 0 5px; color:#7a5a0c; font-size:1.2rem; }
.listen-task p { margin:0; color:#66583d; line-height:1.9; font-weight:600; }
.observe-word-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; }
.observe-word-card {
  display:grid; gap:11px; justify-items:center; align-content:center; min-height:150px; padding:18px 14px;
  border-radius:22px; background:#fff; border:1px solid #dce9f3; box-shadow:0 8px 20px rgba(34,89,125,.07);
}
.observe-word-text {
  font-family:"Tajawal",sans-serif; font-size:clamp(1.55rem,3vw,2.15rem); font-weight:800; color:var(--ink);
  line-height:1.55; text-align:center;
}
.observe-word-card .audio-btn { width:100%; justify-content:center; }
.observe-word-card.task-listened {
  background:#e9f8e7;
  border-color:#78c272;
  box-shadow:inset 0 0 0 2px #78c272, 0 7px 18px rgba(66,144,61,.08);
}
.observe-word-card.task-listened .observe-word-text { color:#2f8738; }
.observe-word-card.task-listened .audio-btn { background:#dff3dc; color:#2d7f31; }
@media (max-width:900px) {
  .observe-composed-card { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .observe-composed-card { padding:16px; border-radius:22px; }
  .observe-line { font-size:1.15rem; line-height:1.95; }
  .observe-word-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .observe-word-card { min-height:138px; padding:14px 10px; }
}
@media (max-width:420px) { .observe-word-grid { grid-template-columns:1fr; } }

/* v5.6 — تسلسل الحروف والانتقال المقيد بالوسام */
.continue-journey-card {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 0 20px; padding:16px 18px; border-radius:22px;
  background:linear-gradient(135deg,#eef7ff,#f4fff0); border:1px solid #d7e9f4; box-shadow:var(--shadow);
}
.continue-journey-card > div { display:grid; gap:4px; }
.continue-journey-card strong { color:var(--blue); font-size:1.15rem; }
.continue-journey-card span { color:var(--muted); font-weight:600; }
.continue-journey-card.complete { background:linear-gradient(135deg,#fff8df,#f4efff); }
.letter-stop.locked { filter:saturate(.35); opacity:.55; cursor:not-allowed; }
.letter-stop.locked:hover { transform:none; }
.letter-stop.locked::after {
  content:"🔒"; position:absolute; left:18px; top:16px; width:42px; height:42px; display:grid; place-items:center;
  border-radius:14px; background:rgba(255,255,255,.88); color:#27394a; font-size:1.2rem;
}
.letter-sequence {
  display:flex; align-items:center; gap:12px; margin-bottom:14px; padding:10px 12px;
  background:#fff; border:1px solid rgba(24,75,159,.08); border-radius:22px; box-shadow:var(--shadow);
}
.sequence-home-btn {
  flex:none; border:0; border-radius:14px; padding:10px 15px; background:#eef5ff; color:var(--blue);
  font-family:inherit; font-weight:800; cursor:pointer;
}
.sequence-track { display:flex; align-items:center; justify-content:center; gap:7px; flex:1; min-width:0; }
.sequence-letter {
  position:relative; width:46px; height:46px; border-radius:15px; border:1px solid #d9e7f2; background:#f7fafc;
  color:#617486; font-family:"Baloo Bhaijaan 2",sans-serif; font-size:1.55rem; font-weight:800; cursor:pointer;
  display:grid; place-items:center; line-height:1;
}
.sequence-letter small { position:absolute; left:3px; bottom:2px; font:700 .62rem "Tajawal",sans-serif; }
.sequence-letter.current { background:var(--letter-color); border-color:transparent; color:#fff; box-shadow:0 6px 14px rgba(24,75,159,.16); }
.sequence-letter.earned { background:#eef9ef; border-color:#bcdcbc; color:#2d7d3b; }
.sequence-letter.unlocked { background:#eef5ff; border-color:#bdd6f0; color:var(--blue); }
.sequence-letter.locked { opacity:.5; cursor:not-allowed; }
.sequence-arrow { color:#9cadbb; font-weight:800; }
.next-letter-btn {
  border:0; border-radius:14px; padding:11px 18px; background:linear-gradient(135deg,#2f74c9,#184b9f); color:#fff;
  font-family:inherit; font-weight:900; cursor:pointer; box-shadow:0 8px 18px rgba(24,75,159,.18);
}
.next-letter-btn.complete { background:linear-gradient(135deg,#8b63d5,#6545b6); }
@media (max-width:760px) {
  .continue-journey-card { align-items:stretch; flex-direction:column; }
  .continue-journey-card .primary-btn { width:100%; }
  .letter-sequence { align-items:stretch; flex-direction:column; overflow:hidden; }
  .sequence-home-btn { width:100%; }
  .sequence-track { width:100%; overflow-x:auto; justify-content:flex-start; padding-bottom:3px; }
  .sequence-letter { flex:0 0 43px; width:43px; height:43px; }
}
@media (max-width:520px) {
  .lesson-actions .side-actions { flex-wrap:wrap; width:100%; }
  .lesson-actions .side-actions button { flex:1 1 auto; }
}

/* v5.6.1 — توحيد أحجام النص التعليمي لطلاب الصف الأول */
/* كلمات مهمة الاستماع: خُفِّضت من الحجم الكبير إلى حجم تعليمي متوسط. */
.observe-word-text {
  font-size: clamp(1.55rem, 2.2vw, 1.85rem);
  line-height: 1.65;
}

/* أقرأ: تكبير الكلمات لتكون واضحة وقريبة من حجم كلمات الاستماع. */
.word-chip {
  min-height: 78px;
  padding: 14px 16px;
  font-size: clamp(1.5rem, 2.1vw, 1.82rem);
  line-height: 1.65;
}

/* أجرد الحرف + أحاكي + إنجازاتي: تكبير الاختيارات التعليمية. */
.hunt-chip,
.quiz-choice {
  min-height: 66px;
  padding: 13px 18px;
  font-size: clamp(1.42rem, 2vw, 1.75rem);
  line-height: 1.65;
}

/* الجمل والأسئلة التعليمية داخل أحاكي وإنجازاتي وغيرها. */
.lesson-card .feature-box h4 {
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  line-height: 1.8;
}

/* على الجوال تبقى الكلمات كبيرة وواضحة دون أن تخرج من البطاقات. */
@media (max-width: 760px) {
  .observe-word-text { font-size: 1.55rem; }
  .word-chip { min-height: 70px; font-size: 1.5rem; }
  .hunt-chip, .quiz-choice { min-height: 60px; font-size: 1.38rem; }
  .lesson-card .feature-box h4 { font-size: 1.28rem; }
}

/* v5.7 — بوابة المعلم وتتبع الطلاب */
.teacher-portal-btn {
  height:46px; border:0; border-radius:15px; padding:0 13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:#fff5dc; color:#75570e; font-weight:800;
  box-shadow:inset 0 -2px 0 rgba(117,87,14,.08);
}
.teacher-portal-btn span { font-size:1rem; }
.teacher-portal-btn.active { background:#e9f8e7; color:#2e7d36; box-shadow:inset 0 0 0 2px #bfe4bc; }
.teacher-mode-pill {
  display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:999px;
  background:#e9f8e7; color:#2f7c37; font-weight:800; white-space:nowrap;
  border:1px solid #c7e9c4;
}
.teacher-mode-pill::before { content:"●"; font-size:.7rem; }
.teacher-review-note { color:#2f7c37; font-weight:800; font-size:.86rem; white-space:nowrap; }
.teacher-sequence { border-color:#cfe8cc; background:linear-gradient(180deg,#fbfffb,#f3fbf2); }
.teacher-home-cta { border-color:#cde8ca; }
.teacher-journey .letter-stop.locked { opacity:1; filter:none; }
.teacher-actions { justify-content:flex-start; }
.teacher-actions .side-actions { width:100%; }

.journey-head-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.student-chip {
  border:1px solid #d8e7f2; border-radius:16px; background:#fff; color:var(--ink); cursor:pointer;
  padding:8px 12px; display:grid; text-align:right; box-shadow:0 8px 18px rgba(29,88,128,.08);
}
.student-chip span { font-weight:800; color:var(--blue); }
.student-chip small { color:var(--muted); font-size:.72rem; }

.student-identify-page {
  width:min(760px,100%); margin:0 auto; padding:42px 18px 60px;
}
.student-identify-card {
  background:#fff; border:1px solid #dfeaf2; border-radius:30px; padding:28px;
  box-shadow:var(--shadow); text-align:center;
}
.student-identify-icon { width:76px; height:76px; margin:0 auto 10px; border-radius:24px; display:grid; place-items:center; background:#fff6d8; color:#d89a08; font-size:2.1rem; }
.student-identify-card h2 { margin:0; color:var(--blue); font-size:2rem; }
.student-identify-card p { color:var(--muted); line-height:1.8; }
.student-identify-form { display:grid; gap:10px; max-width:480px; margin:20px auto 10px; text-align:right; }
.student-identify-form label { font-weight:800; color:var(--ink); }
.student-identify-form input,
.teacher-login-form input,
.teacher-panel textarea,
.teacher-filters select {
  width:100%; border:1px solid #cfe0ec; border-radius:16px; background:#fbfdff; color:var(--ink);
  padding:13px 14px; outline:none;
}
.student-identify-form input:focus,
.teacher-login-form input:focus,
.teacher-panel textarea:focus,
.teacher-filters select:focus { border-color:#6aa3dd; box-shadow:0 0 0 3px rgba(47,116,201,.12); }
.student-identify-card small { color:var(--muted); }

.teacher-portal-page { width:min(1240px,100%); margin:0 auto; padding:28px 18px 48px; }
.teacher-loading, .teacher-empty {
  padding:34px 18px; text-align:center; color:var(--muted); background:#fff; border-radius:22px; border:1px dashed #d4e2ec;
}
.teacher-empty.error { color:#a13e38; background:#fff5f4; }
.teacher-login-card {
  width:min(620px,100%); margin:22px auto; background:#fff; border:1px solid #dfeaf2; border-radius:30px;
  padding:28px; box-shadow:var(--shadow); text-align:center;
}
.teacher-gate-icon { width:78px; height:78px; border-radius:24px; margin:0 auto 10px; display:grid; place-items:center; background:#fff4d7; color:#8d6812; font-size:2rem; }
.teacher-login-card h2 { margin:0; color:var(--blue); font-size:2.15rem; }
.teacher-login-card p { color:var(--muted); line-height:1.8; }
.teacher-login-form { display:grid; gap:10px; text-align:right; margin:20px 0 12px; }
.teacher-login-form label { font-weight:800; }
.form-message { min-height:1.2em; font-size:.9rem; }
.form-message.error { color:#aa423d; }
.form-message.success { color:#337a39; }
.setup-alert {
  display:grid; gap:5px; text-align:right; padding:14px 16px; border-radius:18px; background:#fff8e5; color:#735817; border:1px solid #eddca6; margin:14px 0;
}
.setup-alert code { direction:ltr; display:inline-block; background:#fff; border-radius:7px; padding:2px 6px; }
.setup-alert.error { background:#fff5f4; border-color:#f0c6c2; color:#8a413b; }
.teacher-portal-head {
  display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px;
  background:#fff; border:1px solid #dfeaf2; border-radius:26px; padding:20px 22px; box-shadow:var(--shadow);
}
.teacher-portal-head h2 { margin:1px 0 3px; color:var(--blue); font-size:2.25rem; }
.teacher-portal-head p { margin:0; color:var(--muted); }
.teacher-eyebrow { color:#31803a; background:#eaf8e8; border-radius:999px; padding:5px 10px; font-weight:800; font-size:.82rem; }
.teacher-head-actions { display:flex; gap:9px; flex-wrap:wrap; }
.teacher-db-alert { margin-bottom:18px; }
.teacher-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(290px,.7fr); gap:18px; align-items:start; }
.teacher-panel { background:#fff; border:1px solid #dfeaf2; border-radius:26px; padding:20px; box-shadow:var(--shadow); }
.teacher-panel-head h3 { margin:0; color:var(--blue); font-size:1.55rem; }
.teacher-panel-head p { margin:4px 0 0; color:var(--muted); line-height:1.7; }
.teacher-filters { display:grid; grid-template-columns:150px 220px auto; gap:10px; align-items:end; margin:18px 0 12px; }
.teacher-filters label { display:grid; gap:5px; color:var(--muted); font-weight:700; font-size:.9rem; }
.teacher-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.teacher-summary span { background:#f5f9fc; border:1px solid #e0ebf2; border-radius:999px; padding:7px 11px; color:#627586; font-size:.84rem; }
.teacher-summary b { color:var(--blue); }
.teacher-table-wrap { overflow:auto; border:1px solid #e1ebf2; border-radius:18px; }
.teacher-table { width:100%; border-collapse:collapse; background:#fff; min-width:560px; }
.teacher-table th, .teacher-table td { padding:13px 14px; text-align:right; border-bottom:1px solid #e9f0f5; }
.teacher-table th { background:#f6faff; color:#607486; font-size:.86rem; }
.teacher-table tbody tr:last-child td { border-bottom:0; }
.teacher-table td:first-child { font-weight:800; color:var(--ink); }
.teacher-letter-cell { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:#edf5ff; color:var(--blue); font-family:"Baloo Bhaijaan 2",sans-serif; font-size:1.45rem; font-weight:800; }
.status-pill { display:inline-flex; border-radius:999px; padding:7px 11px; font-weight:800; font-size:.83rem; white-space:nowrap; }
.status-pill.not-started { background:#f1f4f6; color:#6f7f8a; }
.status-pill.in-progress { background:#fff4dc; color:#8a6413; }
.status-pill.completed { background:#e8f7e5; color:#347b39; }
.roster-panel form { display:grid; gap:10px; margin-top:16px; }
.teacher-panel textarea { resize:vertical; min-height:190px; line-height:1.8; }
.db-disabled .teacher-panel { opacity:.78; }
.teacher-badge-preview .achievement-badge { margin-inline:auto; }

@media (max-width:900px) {
  .teacher-dashboard-grid { grid-template-columns:1fr; }
  .teacher-filters { grid-template-columns:1fr 1fr; }
  .teacher-filters .ghost-btn { grid-column:1/-1; }
}
@media (max-width:760px) {
  .teacher-portal-head { align-items:flex-start; flex-direction:column; }
  .teacher-head-actions { width:100%; }
  .teacher-head-actions button { flex:1; }
  .teacher-filters { grid-template-columns:1fr; }
  .teacher-filters .ghost-btn { grid-column:auto; }
  .teacher-review-note { display:none; }
  .journey-head-tools { justify-content:flex-start; }
}
@media (max-width:560px) {
  .teacher-portal-btn { padding:0 9px; }
  .teacher-portal-btn b { max-width:74px; overflow:hidden; text-overflow:ellipsis; }
  .top-actions { gap:4px; }
  .teacher-portal-page { padding-inline:10px; }
  .teacher-panel, .teacher-login-card { padding:16px; border-radius:22px; }
  .teacher-portal-head { padding:16px; }
}

/* v5.7.1 — التحقق من إنجاز المهمة قبل إكمال القسم */
.cta-btn:disabled,
.primary-btn:disabled,
.secondary-btn:disabled,
.success-btn:disabled,
.ghost-btn:disabled,
.audio-btn:disabled {
  cursor:not-allowed;
  opacity:.48;
  filter:saturate(.55);
  box-shadow:none;
  transform:none !important;
}
.section-nav-btn.section-locked {
  opacity:.58;
  cursor:not-allowed;
  filter:saturate(.6);
}
.section-nav-btn.section-locked:hover { transform:none; }
.section-nav-btn.section-locked .nav-check { opacity:1; color:#8191a0; }
.section-nav-btn.section-locked .section-icon { filter:saturate(.55); }


.hunt-actions { display:flex; flex-wrap:wrap; gap:10px; }
.hunt-chip:disabled { cursor:default; }
.word-chip.task-read {
  background:#e5f6e2;
  color:#2d7f31;
  box-shadow:inset 0 0 0 2px #72bf68;
}
.word-chip.task-read::after { content:" ✓"; font-size:.8em; }
.audio-btn.task-used {
  background:#e8f7e6;
  color:#2d7f31;
  box-shadow:inset 0 0 0 1px #a9d9a4;
}



/* v5.7.2 — مشاهدة أشكال الحرف + الاستماع كلمة بكلمة */
.form-view-note {
  padding:12px 15px;
  border-radius:16px;
  background:#fff8e8;
  border:1px solid #f1dca5;
  color:#725a20;
  font-weight:700;
  line-height:1.7;
}
.form-progress-tabs .form-tab {
  background:#fff0ef;
  color:#a33b38;
  box-shadow:inset 0 0 0 2px #ef7772;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.form-progress-tabs .form-tab.form-unseen {
  background:#fff0ef;
  color:#a33b38;
  box-shadow:inset 0 0 0 2px #ef7772;
}
.form-progress-tabs .form-tab.form-viewed {
  background:#e8f7e6;
  color:#2f7c35;
  box-shadow:inset 0 0 0 2px #67b967;
}
.form-progress-tabs .form-tab.active {
  outline:3px solid color-mix(in srgb, var(--letter-color) 38%, white);
  outline-offset:2px;
  transform:translateY(-1px);
}
.read-listen-task small {
  display:block;
  margin-top:6px;
  color:#68798a;
  font-weight:700;
}
.read-audio-word {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.word-audio-mark {
  font-size:.75em;
  color:#2f74c9;
  line-height:1;
}
.read-audio-word.task-read .word-audio-mark { color:#2d7f31; }


/* v5.7.3 — وضوح الاستماع وإصلاح اتصال الكلمات العربية */
/* في ألاحظ وأستمع: يظهر نص الزر مختصرًا «استمع» فقط. */
.observe-listen-btn::before { content:none; }
.observe-listen-btn { justify-content:center; }

/* في أقرأ: الكلمة تبقى نصًا عربيًا واحدًا حتى لا تنفصل الحروف عند التلوين. */
.read-audio-word {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding-top:14px;
  padding-bottom:11px;
}
.read-word-label {
  display:block;
  width:100%;
  white-space:nowrap;
  direction:rtl;
  unicode-bidi:plaintext;
  text-align:center;
  line-height:1.7;
}
.read-word-audio-icon {
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e5f2ff;
  color:#2f74c9;
  flex:0 0 auto;
}
.read-word-audio-icon svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.read-audio-word.task-read .read-word-audio-icon {
  background:#e2f7df;
  color:#2d7f31;
}
.read-audio-word.task-read::after {
  content:"✓";
  font-size:.75em;
  color:#2d7f31;
}
@media (max-width:760px) {
  .read-word-audio-icon { width:32px; height:32px; }
  .read-word-audio-icon svg { width:20px; height:20px; }
}

/* v5.7.4 — إعادة بناء مكون أحاكي: نموذج بصري موحد ثم تطبيق بلا صوت */
.language-section { gap: 20px; }
.language-model-card {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eadfe4;
  box-shadow: 0 12px 30px rgba(43,76,109,.10);
}
.language-model-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.language-model-card figcaption {
  padding: 10px 14px 12px;
  text-align: center;
  color: #9d4160;
  background: #fff6f9;
  font-weight: 800;
  font-size: 1rem;
}
.language-practice {
  border-radius: 24px;
  padding: 18px;
  background: #fff8fb;
  border: 1px solid #f2dce5;
}
.language-practice-head { margin-bottom: 14px; }
.language-practice-head h4 {
  margin: 0;
  color: #b5486d;
  font-size: 1.45rem;
}
.language-practice-head p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.75;
}
.language-practice-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.language-question {
  min-width: 0;
  background: #fff;
  border-color: #f0dce5;
}
.language-question .quiz-grid { align-items: stretch; }
.language-question .quiz-choice { flex: 1 1 150px; }

/* وضوح أداة النفي «لَا» داخل تطبيق أحاكي، خصوصًا لحرف ف. */
.language-question .negation-la {
  display:inline-block;
  font-family:inherit;
  font-weight:inherit;
  color:inherit;
  padding-inline:0;
  line-height:inherit;
}
.language-visual-cue {
  display: grid;
  place-items: center;
  min-height: 70px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: #f3f8ff;
  font-size: 2.3rem;
  letter-spacing: .08em;
}

.practice-cue-icon {
  display:grid;
  place-items:center;
  width:100%;
}
.practice-cue-icon svg {
  width:min(112px,70%);
  height:auto;
  display:block;
}
@media (max-width: 760px) {
  .language-practice { padding: 14px; }
  .language-practice-grid { grid-template-columns: 1fr; }
  .language-model-card { border-radius: 20px; }
  .language-question .quiz-choice { flex-basis: 100%; }
}
.language-model-card { width: 100%; max-width: 820px; justify-self: center; }


/* v5.7.13 — تحسين صور أشكال الحرف + صور توضيحية للأصوات القصيرة */
.language-emphasis {
  color:#d94c52;
  font-weight:900;
}
.language-model-card { margin-bottom:4px; }
.language-model-card figcaption { display:none; }

.saudi-flag-cue {
  width:min(220px,72%);
  aspect-ratio:3/2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:auto;
  padding:12px 16px 13px;
  border-radius:10px;
  background:#006c35;
  box-shadow:0 8px 18px rgba(0,108,53,.18);
  color:#fff;
  overflow:hidden;
}
.saudi-shahada {
  display:block;
  color:#fff;
  font-family:"Tajawal",sans-serif;
  font-size:clamp(.72rem,1.8vw,1rem);
  line-height:1.45;
  font-weight:800;
  text-align:center;
  direction:rtl;
}
.saudi-sword {
  display:block;
  width:68%;
  height:4px;
  border-radius:999px;
  background:#fff;
  position:relative;
}
.saudi-sword::after {
  content:"";
  position:absolute;
  right:-8px;
  top:-3px;
  width:13px;
  height:8px;
  border-top:4px solid #fff;
  transform:skewX(-35deg);
}

.sound-listen-row {
  align-items:stretch;
}
.sound-listen-card {
  min-height:190px;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:center;
  justify-items:center;
  gap:10px;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.sound-listen-card .audio-btn {
  min-width:112px;
  justify-content:center;
  margin-top:4px;
}
.sound-listen-card.task-listened {
  background:#e9f8e7;
  border-color:#78c272;
  box-shadow:inset 0 0 0 2px #78c272, 0 7px 18px rgba(66,144,61,.08);
}
.sound-listen-card.task-listened strong {
  color:#2f8738;
}
.sound-listen-card.task-listened span:not(.section-icon) {
  color:#417b45;
}
.sound-listen-card.task-listened .audio-btn {
  background:#dff3dc;
  color:#2d7f31;
}
@media (max-width:760px) {
  .sound-listen-card { min-height:170px; }
  .sound-listen-card .audio-btn { width:100%; min-width:0; }
}

.short-sound-card {
  min-height:330px;
  grid-template-rows:auto auto auto;
  padding:16px 14px 18px;
}
.short-sound-visual {
  width:clamp(118px,11vw,154px);
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  border-radius:24px;
  margin:0 auto 2px;
  box-shadow:0 8px 18px rgba(33,79,118,.08);
}
.short-sound-card strong {
  margin-top:0;
  line-height:1;
}
@media (max-width:760px) {
  .short-sound-card { min-height:300px; padding:14px; }
  .short-sound-visual { width:min(150px,48vw); }
}


/* v5.7.13 — توضيح بصري للأصوات الطويلة */
.long-sound-card {
  min-height:300px;
  grid-template-rows:auto auto auto;
  padding:16px 14px 18px;
}
.long-sound-visual {
  width:min(250px,100%);
  aspect-ratio:16 / 9;
  height:auto;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:20px;
  margin:0 auto 2px;
  box-shadow:0 8px 18px rgba(71,54,125,.10);
}
.long-sound-card strong {
  margin-top:0;
  line-height:1;
}
@media (max-width:760px) {
  .long-sound-card { min-height:280px; padding:14px; }
  .long-sound-visual { width:min(260px,78vw); }
}

@media (max-width: 640px) {
  .form-display { min-height:300px; }
  .form-display-inner { gap:10px; padding:14px 6px 10px; }
  .form-position-visual {
    width:100%;
    aspect-ratio:47 / 17;
    height:auto;
    object-fit:fill;
    object-position:center;
    margin-inline:auto;
    border-radius:16px;
  }
  .form-display .glyph { font-size:clamp(6.7rem,34vw,9rem); }
}

/* v5.7.49 — نظام شارات موحد لأقسام القراءة والتجريد والإنجاز */
.lesson-card { position:relative; }
.lesson-head-copy { min-width:0; }
.lesson-card-head {
  align-items:center;
}
.lesson-card-head p {
  margin:9px 0 0;
  color:#6e8092;
  line-height:1.95;
  max-width:760px;
  font-size:1.06rem;
  font-weight:700;
}
.section-guide-banner {
  min-width:min(290px,100%);
  max-width:340px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%, var(--section-soft) 100%);
  border:1px solid color-mix(in srgb,var(--section-color) 18%, #dfeaf3 82%);
  box-shadow:0 10px 22px rgba(34,89,125,.08);
}
.section-guide-icon {
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:var(--section-color);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
}
.section-guide-icon svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.section-guide-copy { display:grid; gap:3px; }
.section-guide-copy strong { color:var(--blue); font-size:1.08rem; }
.section-guide-copy small { color:#6e8092; font-size:.96rem; font-weight:700; line-height:1.7; }
.read-listen-task p,
.listen-task p,
.feature-box small {
  color:#708294;
  font-weight:700;
}
.feature-box small { font-size:.96rem; line-height:1.8; }

/* الوسام: مظهر أبسط وأناقة أعلى */
.achievement-badge {
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:28px 22px 24px;
  border-radius:34px;
  background:linear-gradient(180deg,#f8fcff 0%, #ffffff 58%, #f7fbff 100%);
  border:1px solid #dbe8f3;
  box-shadow:0 18px 42px rgba(29,88,128,.12);
}
.achievement-badge::before,
.achievement-badge::after {
  content:"";
  position:absolute;
  border-radius:999px;
  background:rgba(52,183,230,.08);
}
.achievement-badge::before { width:170px; height:170px; top:-54px; left:-46px; }
.achievement-badge::after { width:200px; height:200px; right:-72px; bottom:-88px; }
.badge-brand-title { color:var(--blue); font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-size:clamp(1.5rem,3vw,2.05rem); font-weight:800; }
.badge-ribbon { color:#6a50bd; font-weight:800; margin-top:4px; }
.badge-medal {
  position:relative;
  width:150px;
  height:170px;
  margin:18px auto 14px;
  background:transparent;
  border:0;
  box-shadow:none;
  display:block;
}
.badge-medal::before,
.badge-medal::after {
  content:"";
  position:absolute;
  top:92px;
  width:28px;
  height:56px;
  background:linear-gradient(180deg,#7d61d3 0%, #5b45b2 100%);
}
.badge-medal::before { right:44px; border-radius:0 0 16px 16px; transform:rotate(8deg); }
.badge-medal::after { left:44px; border-radius:0 0 16px 16px; transform:rotate(-8deg); }
.badge-medal span {
  position:relative;
  z-index:1;
  width:118px;
  height:118px;
  margin:0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#ffd96f 0%, #f2b625 100%);
  color:var(--badge-letter-color);
  border:7px solid #fff4cf;
  box-shadow:0 12px 24px rgba(24,75,159,.12), inset 0 -6px 0 rgba(0,0,0,.06);
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif;
  font-size:5.7rem;
  line-height:.9;
}
.badge-student { margin-top:10px; color:var(--blue); font-weight:800; font-size:clamp(1.55rem,3.4vw,2.25rem); }
.badge-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin-top:13px; color:var(--muted); font-weight:700; }
.badge-meta span { background:#f3f8fc; border:1px solid #e1ebf3; border-radius:999px; padding:6px 10px; }
.badge-code { width:fit-content; margin:12px auto 0; border-radius:999px; padding:7px 12px; background:#f4f0ff; color:#6a50bd; font-weight:800; direction:ltr; }

@media (max-width:760px) {
  .lesson-card-head {
    display:grid;
    gap:14px;
  }
  .section-guide-banner {
    min-width:0;
    width:100%;
    max-width:none;
  }
}
@media (max-width:520px) {
  .section-guide-banner {
    padding:11px 12px;
    border-radius:18px;
  }
  .section-guide-icon {
    width:46px;
    height:46px;
    flex-basis:46px;
  }
  .section-guide-copy strong { font-size:1rem; }
  .section-guide-copy small { font-size:.9rem; }
  .badge-medal { width:138px; height:158px; }
  .badge-medal::before,
  .badge-medal::after { top:84px; height:50px; }
  .badge-medal::before { right:40px; }
  .badge-medal::after { left:40px; }
  .badge-medal span { width:108px; height:108px; font-size:5rem; }
}

/* v5.7.19 — استديو تسجيل المعلم سعد */
.recording-studio-page { width:min(1320px,100%); }
.studio-head { margin-bottom:14px; }
.studio-overall-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0 0 12px; }
.studio-overall-summary > div { background:#fff; border:1px solid #dfeaf2; border-radius:20px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:8px; box-shadow:0 6px 18px rgba(34,89,125,.06); }
.studio-overall-summary span { color:var(--muted); font-weight:700; }
.studio-overall-summary strong { color:var(--blue); font-size:1.35rem; }
.studio-local-note { background:#fff8e8; border:1px solid #f0d898; color:#71591d; border-radius:17px; padding:11px 14px; margin-bottom:14px; line-height:1.75; }
.studio-layout { display:grid; grid-template-columns:330px minmax(0,1fr); gap:16px; align-items:start; direction:rtl; }
.studio-sidebar,.studio-workspace { background:#fff; border:1px solid #dfeaf2; border-radius:26px; box-shadow:var(--shadow); }
.studio-sidebar { padding:15px; max-height:760px; overflow:hidden; display:flex; flex-direction:column; }
.studio-sidebar-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.studio-sidebar-head h3 { margin:0; color:var(--blue); font-size:1.45rem; }
.studio-sidebar-head p { margin:2px 0 0; color:var(--muted); font-size:.87rem; }
.studio-letter-count { background:#e8f7e6; color:#2f7c35; border-radius:999px; padding:7px 11px; font-weight:800; }
.studio-letter-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-bottom:10px; }
.studio-letter-tab { border:1px solid #dbe8f1; background:#f7fbff; border-radius:12px; padding:7px 3px; cursor:pointer; color:var(--blue); display:grid; gap:1px; place-items:center; }
.studio-letter-tab b { font-family:"Baloo Bhaijaan 2",sans-serif; font-size:1.25rem; line-height:1; }
.studio-letter-tab span { font-size:.7rem; font-weight:700; color:#738596; }
.studio-letter-tab.active { background:#eef0ff; border-color:#8d78d7; box-shadow:inset 0 0 0 1px #8d78d7; }
.studio-list-progress { height:8px; border-radius:999px; background:#e8eef2; overflow:hidden; margin-bottom:10px; }
.studio-list-progress div { height:100%; background:#62b96a; border-radius:inherit; }
.studio-record-list { overflow:auto; padding-left:3px; }
.studio-record-group { margin-bottom:12px; }
.studio-record-group h4 { margin:0 3px 6px; color:#66798b; font-size:.86rem; }
.studio-record-row { width:100%; border:0; background:#fff; border-radius:14px; padding:9px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; text-align:right; margin-bottom:5px; box-shadow:inset 0 0 0 1px #e7eef4; }
.studio-record-row:hover { background:#f7fbff; }
.studio-record-row.active { background:#f1efff; box-shadow:inset -4px 0 0 #6a50bd,inset 0 0 0 1px #ddd5ff; }
.studio-record-text { min-width:0; display:grid; gap:1px; }
.studio-record-text b { color:var(--ink); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.studio-record-text small { color:var(--muted); font-size:.73rem; }
.studio-mini-status { flex:0 0 auto; border-radius:999px; padding:5px 8px; font-weight:800; font-size:.72rem; }
.studio-mini-status.missing { background:#fff0ef; color:#aa4a45; }
.studio-mini-status.review { background:#fff4d9; color:#88620e; }
.studio-mini-status.approved { background:#e7f7e4; color:#2d7f31; }
.studio-mini-status.local { background:#eaf4ff; color:#245ca7; }
.studio-workspace { min-height:620px; padding:22px; display:grid; gap:16px; align-content:start; }
.studio-target-card { min-height:230px; border-radius:24px; background:linear-gradient(135deg,#f7fbff,#f4fff7); border:1px solid #e1edf4; display:grid; place-items:center; align-content:center; gap:12px; padding:24px; text-align:center; }
.studio-target-meta { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.studio-target-meta span { background:#fff; border:1px solid #dce8f0; border-radius:999px; padding:6px 10px; color:#66798b; font-weight:700; font-size:.8rem; }
.studio-target-text { font-family:"Baloo Bhaijaan 2",sans-serif; color:var(--blue); font-size:clamp(3rem,7vw,5.8rem); font-weight:800; line-height:1.15; direction:rtl; unicode-bidi:plaintext; }
.studio-target-key { color:#7b8a97; font-size:.82rem; }
.studio-target-key code { direction:ltr; display:inline-block; }
.studio-current-status { border-radius:999px; padding:7px 12px; font-weight:800; }
.studio-current-status.missing { background:#fff0ef; color:#a84d48; }
.studio-current-status.review { background:#fff4d9; color:#80600f; }
.studio-current-status.approved { background:#e5f6e2; color:#2d7f31; }
.studio-current-status.local { background:#eaf4ff; color:#245ca7; }
.studio-local-note.cloud-ready { background:#eef9ef; border-color:#b9dfbd; color:#296734; }
.studio-local-note.cloud-missing { background:#fff0ef; border-color:#f2c6c2; color:#99463f; }
.studio-recorder-card { border:1px solid #e0ebf2; border-radius:23px; padding:18px; background:#fff; }
.studio-audio-enhancement { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px 12px; margin-bottom:12px; padding:10px 13px; border:1px solid #c7e6d2; background:#f2fbf5; color:#2d7448; border-radius:15px; text-align:center; line-height:1.6; }
.studio-audio-enhancement strong { font-weight:900; }
.studio-audio-enhancement span { color:#5b7667; font-size:.88rem; }
.studio-meter { --studio-level:8%; height:13px; background:#edf2f5; border-radius:999px; overflow:hidden; margin-bottom:12px; }
.studio-meter span { display:block; width:var(--studio-level); height:100%; border-radius:inherit; background:#68bd70; opacity:.38; transition:width .11s linear,background .16s ease,opacity .16s ease; }
.studio-meter.recording span { opacity:1; }
.studio-meter.hot span { background:#e4a640; }
.studio-recorder-message { text-align:center; color:#66798b; line-height:1.7; margin-bottom:14px; }
.studio-recorder-actions,.studio-secondary-actions { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.studio-record-btn { border:0; border-radius:16px; padding:11px 17px; background:#22945b; color:#fff; font:800 1rem "Tajawal",sans-serif; cursor:pointer; box-shadow:0 8px 17px rgba(34,148,91,.2); }
.studio-record-btn:disabled { opacity:.45; cursor:not-allowed; }
.studio-recorder-card audio { width:100%; margin:14px 0 10px; }
.studio-record-details { margin-top:12px; text-align:center; color:#85929d; font-size:.8rem; }
.studio-mobile-pickers { display:none; }

@media(max-width:900px) {
  .studio-layout { grid-template-columns:280px minmax(0,1fr); }
  .studio-letter-tabs { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:760px) {
  .studio-overall-summary { grid-template-columns:repeat(2,1fr); }
  .studio-mobile-pickers { display:flex; gap:8px; align-items:end; margin-bottom:12px; }
  .studio-mobile-pickers label { flex:1; display:grid; gap:5px; color:var(--muted); font-weight:800; }
  .studio-mobile-pickers select { width:100%; border:1px solid #d8e6f2; border-radius:13px; padding:10px 12px; background:#fff; font:800 1rem "Tajawal",sans-serif; }
  .studio-layout { grid-template-columns:1fr; }
  .studio-sidebar { max-height:430px; }
  .studio-letter-tabs { display:none; }
  .studio-workspace { min-height:auto; padding:15px; }
  .studio-target-card { min-height:190px; padding:18px 12px; }
  .studio-target-text { font-size:clamp(3.2rem,16vw,5.2rem); }
  .studio-recorder-actions>* ,.studio-secondary-actions>* { flex:1 1 44%; }
}
@media(max-width:460px) {
  .studio-overall-summary { gap:7px; }
  .studio-overall-summary > div { padding:10px; display:grid; gap:3px; }
  .studio-mobile-pickers { align-items:stretch; flex-direction:column; }
  .studio-recorder-actions>* ,.studio-secondary-actions>* { flex-basis:100%; }
}

.teacher-local-studio-btn { width:100%; margin:0 0 10px; }


/* v5.7.23 — إدارة قائمة الطلاب */
.teacher-student-name-cell { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.teacher-student-actions { display:inline-flex; gap:6px; flex-wrap:wrap; }
.student-manage-btn { border:1px solid #d9e7f2; background:#f5f9fc; color:var(--blue); border-radius:10px; padding:6px 9px; font:800 .78rem "Tajawal",sans-serif; cursor:pointer; }
.student-manage-btn:hover { background:#eaf4ff; }
.student-manage-btn.delete { color:#a33b35; background:#fff5f4; border-color:#f1d2cf; }
.student-manage-btn.delete:hover { background:#ffe9e7; }
.student-manage-btn:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width:760px) {
  .teacher-student-name-cell { align-items:flex-start; flex-direction:column; }
  .student-manage-btn { min-height:36px; }
}


/* v5.7.24 — تقارير الحروف وطباعة قائمة جميع الطلاب */
.teacher-actions-col { text-align:center !important; width:150px; white-space:nowrap; }
.teacher-student-actions { justify-content:center; }
.teacher-report-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:12px 14px; border:1px solid #e1ebf2; border-radius:16px; background:#fbfdff; }
.teacher-report-note { color:#687b8c; line-height:1.7; font-size:.88rem; max-width:620px; }
.teacher-report-buttons { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.teacher-report-buttons button { min-height:42px; }
.teacher-summary .summary-completed { background:#edf8ea; border-color:#d3eacb; color:#397840; }
.teacher-summary .summary-completed b { color:#2f7e37; }
.teacher-summary .summary-in-progress { background:#fff7e6; border-color:#f0dfb8; color:#87671d; }
.teacher-summary .summary-in-progress b { color:#8a6413; }
.teacher-summary .summary-not-started { background:#f1f3f5; border-color:#dfe3e7; color:#697681; }
.teacher-summary .summary-not-started b { color:#65717b; }
.teacher-print-report { display:none; }
.teacher-print-sheet { font-family:"Tajawal",Arial,sans-serif; color:#19334d; direction:rtl; }
.teacher-print-head { text-align:center; border-bottom:2px solid #dce7ef; padding-bottom:14px; margin-bottom:18px; }
.teacher-print-brand { color:#ef625e; font-weight:800; font-size:14px; }
.teacher-print-head h1 { color:#184b9f; font-size:27px; margin:7px 0 8px; }
.teacher-print-meta { display:flex; justify-content:center; gap:22px; flex-wrap:wrap; color:#6e7f8e; font-size:13px; }
.teacher-print-counts { display:flex; justify-content:center; gap:9px; flex-wrap:wrap; margin-top:12px; }
.teacher-print-counts span { border-radius:999px; padding:7px 12px; font-weight:700; border:1px solid transparent; }
.teacher-print-counts .completed { background:#e8f7e5; color:#347b39; border-color:#cde8c8; }
.teacher-print-counts .in-progress { background:#fff4dc; color:#8a6413; border-color:#efdeb2; }
.teacher-print-counts .not-started { background:#f1f3f5; color:#65717b; border-color:#dfe3e7; }
.teacher-print-group { break-inside:avoid; margin:0 0 18px; border:1px solid #dfe7ed; border-radius:14px; overflow:hidden; }
.teacher-print-group-head { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; }
.teacher-print-group-head h2 { margin:0; font-size:19px; }
.teacher-print-group-head span { font-size:12px; font-weight:800; border-radius:999px; padding:5px 9px; background:rgba(255,255,255,.78); }
.teacher-print-group.completed .teacher-print-group-head { background:#e8f7e5; color:#347b39; }
.teacher-print-group.in-progress .teacher-print-group-head { background:#fff4dc; color:#8a6413; }
.teacher-print-group.not-started .teacher-print-group-head { background:#f1f3f5; color:#65717b; }
.teacher-print-group table { width:100%; border-collapse:collapse; }
.teacher-print-group th,.teacher-print-group td { text-align:right; padding:8px 10px; border-top:1px solid #e7edf2; font-size:12px; }
.teacher-print-group th { background:#fafcfd; color:#607486; }
.teacher-print-group td:first-child,.teacher-print-group th:first-child { width:44px; text-align:center; }
.teacher-print-empty { margin:0; padding:14px; color:#7b8994; }
.teacher-print-footer { margin-top:20px; padding:13px 16px; border-radius:12px; background:#eef7ff; color:#184b9f; text-align:center; font-weight:800; line-height:1.7; }
@media (max-width:760px) {
  .teacher-report-tools { align-items:stretch; flex-direction:column; }
  .teacher-report-buttons { width:100%; }
  .teacher-report-buttons button { flex:1; }
  .teacher-actions-col { width:126px; }
}
@media print {
  @page { size:A4; margin:11mm; }
  html, body { background:#fff !important; }
  body * { visibility:hidden !important; }
  .teacher-print-report, .teacher-print-report * { visibility:visible !important; }
  .teacher-print-report { display:block !important; position:absolute !important; inset:0 !important; width:100% !important; background:#fff !important; }
  .teacher-print-sheet, .teacher-print-sheet * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}

/* v5.7.25 — دخول الطالب الآمن وبطاقات QR */
.student-login-security-note {
  max-width:500px; margin:14px auto 0; padding:11px 14px; border-radius:16px;
  background:#f3f8ff; border:1px solid #dceaf6; color:#5f7487; display:grid; gap:3px; text-align:right;
}
.student-login-security-note strong { color:var(--blue); }
.student-login-security-note span { font-size:.86rem; line-height:1.65; }
.student-identify-form .student-code-input {
  text-align:center; direction:ltr; font-size:1.55rem; font-weight:800; letter-spacing:.45em; padding-inline:1.5em .9em;
}
.teacher-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.student-manage-btn.access { color:#2f6f8e; background:#eef8fc; border-color:#cfe6f0; }
.student-manage-btn.access:hover { background:#e1f3fa; }
.teacher-actions-col { width:210px; }

.student-access-overlay {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:18px;
  background:rgba(20,43,63,.56); backdrop-filter:blur(4px);
}
.student-access-dialog {
  position:relative; width:min(560px,100%); max-height:calc(100vh - 36px); overflow:auto;
  background:#fff; border-radius:28px; padding:22px; box-shadow:0 22px 70px rgba(15,42,62,.3);
}
.student-access-close {
  position:absolute; left:14px; top:12px; width:38px; height:38px; border:0; border-radius:50%;
  background:#f1f5f8; color:#5d7080; font-size:1.55rem; cursor:pointer; z-index:2;
}
.student-access-card {
  width:100%; background:#fff; border:2px solid #dce9f3; border-radius:24px; padding:18px;
  text-align:center; color:#19334d; box-shadow:0 9px 24px rgba(32,81,116,.08); break-inside:avoid;
}
.student-access-brand { color:#ef625e; font-weight:800; font-size:.82rem; }
.student-access-card h2 { margin:5px 0 10px; color:#184b9f; font-size:1.6rem; }
.student-access-qr { width:min(230px,72%); margin:0 auto; }
.student-qr-svg { display:block; width:100%; height:auto; background:#fff; }
.student-access-scan { margin:6px 0 10px; color:#677b8d; font-size:.86rem; }
.student-access-code {
  width:min(280px,100%); margin:0 auto 9px; padding:10px 14px; border-radius:16px;
  background:#f4f8fb; border:1px solid #dce7ef; display:flex; align-items:center; justify-content:center; gap:14px;
}
.student-access-code span { color:#697a89; font-size:.83rem; }
.student-access-code strong { direction:ltr; color:#184b9f; font-size:1.65rem; letter-spacing:.18em; }
.student-access-card small { display:block; color:#7a8996; line-height:1.55; }
.student-access-dialog-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.student-access-dialog-actions button { flex:1 1 145px; }
.student-access-warning { margin:10px 0 0; color:#8a681a; background:#fff8e8; border:1px solid #f0dfae; border-radius:13px; padding:9px 11px; font-size:.82rem; line-height:1.6; }
.rahlet-confirm-overlay { z-index:260; }
.rahlet-confirm-dialog { width:min(520px,100%); text-align:center; padding:28px 24px 22px; overflow:visible; }
.rahlet-confirm-mark {
  width:76px; height:76px; margin:0 auto 12px; display:grid; place-items:center; border-radius:24px;
  background:#fff3ce; color:#b57a00; font-size:2rem; font-weight:900; box-shadow:inset 0 0 0 1px #f4df9e;
}
.rahlet-confirm-copy { display:grid; gap:6px; }
.rahlet-confirm-copy > span { color:#ef625e; font-size:.8rem; font-weight:850; }
.rahlet-confirm-copy h3 { margin:0; color:var(--blue); font-size:1.45rem; line-height:1.55; }
.rahlet-confirm-copy p { margin:0; color:#566d80; line-height:1.75; font-weight:700; }
.rahlet-confirm-note { margin-top:7px; padding:10px 12px; border:1px solid #dce8f0; border-radius:15px; background:#f5f9fc; color:#6b7f8f; line-height:1.65; font-size:.88rem; font-weight:700; }
.rahlet-confirm-actions { margin-top:18px; }
.rahlet-confirm-actions .primary-btn { flex:1 1 230px; }
.rahlet-confirm-actions .ghost-btn { flex:0 1 120px; }
.student-access-print-sheet { font-family:"Tajawal",Arial,sans-serif; color:#19334d; direction:rtl; }
.student-access-print-sheet > header { text-align:center; margin-bottom:8mm; }
.student-access-print-sheet > header > div { color:#ef625e; font-weight:800; }
.student-access-print-sheet > header h1 { margin:4px 0; color:#184b9f; font-size:24px; }
.student-access-print-sheet > header p { margin:0; color:#6c7e8d; }
.student-access-print-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7mm; align-items:start; }
.student-access-print-grid .student-access-card { box-shadow:none; padding:12px; border-radius:16px; }
.student-access-print-grid .student-access-card h2 { font-size:20px; }
.student-access-print-grid .student-access-qr { width:150px; }
.student-access-print-grid .student-access-code { padding:7px 10px; }
.student-access-print-grid .student-access-code strong { font-size:20px; }
.student-access-print-grid .student-access-card small { font-size:10px; }

@media (max-width:760px) {
  .teacher-panel-head { flex-direction:column; }
  .teacher-panel-head > button { width:100%; }
  .teacher-actions-col { width:185px; }
  .student-access-dialog { padding:18px 14px; }
}
@media (max-width:460px) {
  .student-identify-page { padding-inline:10px; }
  .student-identify-card { padding:22px 15px; }
  .student-access-dialog-actions { flex-direction:column; }
  .student-access-dialog-actions button { flex-basis:auto; width:100%; }
  .rahlet-confirm-dialog { padding:24px 16px 18px; border-radius:24px; }
  .rahlet-confirm-mark { width:66px; height:66px; border-radius:21px; }
  .rahlet-confirm-copy h3 { font-size:1.22rem; }
}
@media print {
  .student-access-print-sheet, .student-access-print-sheet * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  .student-access-print-grid .student-access-card { page-break-inside:avoid; break-inside:avoid; }
}

/* v5.7.27 — خروج الطالب + التقويم الصوتي المرن */
.bottom-nav { grid-template-columns:repeat(auto-fit,minmax(0,1fr)); }
.student-session-btn {
  min-height:46px; border:0; border-radius:15px; padding:0 12px; cursor:pointer;
  background:#eef8f0; color:#2f7c37; font:800 .86rem "Tajawal",sans-serif;
  box-shadow:inset 0 0 0 1px #cfe8d2; white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
.student-session-btn:hover { background:#e5f4e8; }

.voice-assessment-page { padding-top:16px; }
.voice-page-head { align-items:center; }
.student-voice-name { padding:9px 14px; border-radius:999px; background:#eef7ff; color:var(--blue); font-weight:800; }
.voice-assessment-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.voice-assessment-tab {
  border:1px solid #dce8f1; border-radius:20px; background:#fff; padding:14px; cursor:pointer; text-align:right;
  display:grid; gap:5px; color:#19334d; box-shadow:0 7px 18px rgba(31,82,116,.06);
}
.voice-assessment-tab.active { border-color:#8cb9e7; box-shadow:inset 0 0 0 2px #d9ebfb,0 8px 20px rgba(31,82,116,.09); }
.voice-assessment-tab b { color:var(--blue); font-size:1.05rem; }
.voice-assessment-tab small { color:#758694; }
.voice-status { display:inline-flex; align-items:center; justify-content:center; width:fit-content; border-radius:999px; padding:6px 10px; font-weight:800; font-size:.79rem; }
.voice-status.reviewed { background:#e8f7e5; color:#347b39; }
.voice-status.submitted { background:#fff3d9; color:#8b6513; }
.voice-status.not-sent { background:#f1f3f5; color:#687680; }
.voice-status.large { font-size:.9rem; padding:8px 13px; }
.voice-student-card { min-height:auto; }
.voice-student-title { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.voice-student-title h3 { margin:7px 0 0; color:var(--blue); font-size:1.65rem; }
.voice-scope-pill { display:inline-flex; border-radius:999px; padding:6px 10px; background:#eef7ff; color:#527391; font-weight:800; font-size:.8rem; }
.voice-reading-prompt { border-radius:22px; background:linear-gradient(135deg,#f2fbff,#fff9ef); border:1px solid #dcebf2; padding:18px; display:grid; gap:8px; margin-bottom:16px; }
.voice-reading-prompt span { color:#758796; font-weight:700; }
.voice-reading-prompt strong { color:#19334d; font-size:1.55rem; line-height:2; font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; }
.voice-feedback-card { display:flex; gap:13px; align-items:flex-start; padding:15px; margin:0 0 16px; border-radius:18px; background:#eef9ef; border:1px solid #cfe8d0; }
.voice-feedback-icon { width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:grid; place-items:center; background:#5cb85c; color:#fff; font-weight:900; }
.voice-feedback-card h4 { margin:0 0 5px; color:#347b39; }
.voice-feedback-card p { margin:0; line-height:1.8; color:#456850; }
.voice-cloud-audio { display:grid; gap:7px; margin-bottom:16px; }
.voice-cloud-audio span { color:#667b8d; font-weight:800; }
.voice-cloud-audio audio, .voice-recorder-panel audio, .voice-review-dialog audio { width:100%; }
.voice-recorder-panel { border:1px solid #dfe9f1; border-radius:22px; padding:17px; background:#fbfdff; }
.voice-limit-note { padding:10px 12px; background:#fff8e6; color:#84631b; border-radius:14px; line-height:1.7; font-size:.86rem; }
.voice-record-state { text-align:center; color:#687c8d; margin:14px 0 10px; font-weight:700; }
.voice-record-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
.voice-record-actions button { min-width:145px; }
.voice-record-secondary { display:flex; justify-content:center; margin-top:10px; }
.voice-closed-note { padding:14px; border-radius:16px; background:#f1f3f5; color:#687680; text-align:center; font-weight:700; }
.voice-empty-card { min-height:auto; text-align:center; padding:38px 20px; }
.voice-empty-card h3 { color:var(--blue); margin-top:0; }

.voice-free-plan-note { margin:0 0 16px; padding:12px 15px; border:1px solid #d9ead6; background:#f2fbf1; color:#4a704d; border-radius:16px; line-height:1.75; }
.voice-teacher-config-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.voice-config-card { background:#fff; border:1px solid #dfe9f0; border-radius:22px; padding:16px; box-shadow:0 9px 24px rgba(31,82,116,.06); }
.voice-config-card.open { border-color:#b9dfb7; box-shadow:inset 0 0 0 2px #e4f4e2,0 9px 24px rgba(31,82,116,.06); }
.voice-config-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
.voice-config-head span:first-child { color:#7b8a96; font-size:.8rem; font-weight:700; }
.voice-config-head h3 { color:var(--blue); margin:3px 0 0; font-size:1.15rem; }
.voice-open-state { white-space:nowrap; border-radius:999px; padding:5px 8px; background:#f1f3f5; color:#687680; font-size:.75rem; font-weight:800; }
.voice-config-card.open .voice-open-state { background:#e8f7e5; color:#347b39; }
.voice-config-card label { display:grid; gap:6px; color:#65798a; font-weight:800; }
.voice-config-card textarea { width:100%; resize:vertical; border:1px solid #d8e5ee; border-radius:14px; padding:10px; font:500 .92rem/1.8 "Tajawal",sans-serif; color:#19334d; background:#fbfdff; }
.voice-config-stats { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; }
.voice-config-stats span { padding:5px 8px; border-radius:999px; background:#f3f7fa; color:#657889; font-size:.76rem; font-weight:800; }
.voice-config-actions { display:flex; gap:7px; flex-wrap:wrap; }
.voice-config-actions button { flex:1 1 110px; min-height:40px; }
.voice-submissions-panel { margin-top:4px; }
.voice-summary { margin-bottom:12px; }
.voice-table .voice-review-row-btn { min-height:38px; padding:7px 11px; }
.voice-feedback-inline { display:block; margin-top:6px; max-width:310px; color:#6a7d8c; line-height:1.55; }
.voice-muted { color:#9aa5ad; }
.voice-review-dialog { width:min(650px,100%); }
.voice-review-head { padding:3px 8px 12px; }
.voice-review-head span { color:#6a7e8f; font-weight:800; }
.voice-review-head h3 { color:var(--blue); margin:4px 0; font-size:1.55rem; }
.voice-review-head p { color:#70818f; margin:0; line-height:1.7; }
.voice-feedback-presets { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }
.voice-feedback-presets button { border:1px solid #d8e5ee; background:#f6fafd; color:#315e80; border-radius:999px; padding:8px 11px; cursor:pointer; font:800 .85rem "Tajawal",sans-serif; }
.voice-feedback-presets button.selected { background:#e7f3ff; border-color:#89bde7; color:#184b9f; box-shadow:inset 0 0 0 1px #89bde7; }
.voice-custom-feedback { display:grid; gap:6px; color:#65798a; font-weight:800; }
.voice-custom-feedback textarea { width:100%; resize:vertical; border:1px solid #d8e5ee; border-radius:14px; padding:10px; font:500 .95rem/1.7 "Tajawal",sans-serif; }
.voice-review-actions { display:flex; justify-content:flex-start; margin-top:12px; }

@media (max-width:980px) {
  .voice-teacher-config-grid { grid-template-columns:1fr; }
  .voice-assessment-tabs { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .student-session-btn { max-width:105px; padding-inline:9px; font-size:.77rem; }
  .voice-assessment-tabs { grid-template-columns:1fr; }
  .voice-student-title { flex-direction:column; }
  .voice-reading-prompt strong { font-size:1.35rem; }
  .voice-record-actions { flex-direction:column; }
  .voice-record-actions button { width:100%; min-width:0; }
  .voice-table { min-width:760px; }
  .voice-submissions-panel .teacher-table-wrap { overflow-x:auto; }
}
@media (max-width:560px) {
  .student-session-btn { width:46px; max-width:46px; padding:0; overflow:hidden; color:transparent; position:relative; }
  .student-session-btn::after { content:"↪"; color:#2f7c37; position:absolute; inset:0; display:grid; place-items:center; font-size:1.1rem; }
}

/* v5.7.27 — تقويمان صوتيان + عينة عشوائية + 3 تقييمات فقط */
.voice-teacher-config-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.voice-random-rule { display:grid; gap:5px; padding:12px; border-radius:15px; background:#f7fbff; border:1px solid #e0ecf4; color:#61798b; }
.voice-random-rule b { color:#214e73; }
.voice-random-rule small { color:#8695a0; line-height:1.6; }
.voice-random-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:7px; }
.voice-item-group { border-radius:16px; padding:12px; background:#fff; border:1px solid #dce8f1; }
.voice-item-group > span { display:block; margin-bottom:8px; color:#667e90; font-weight:800; font-size:.85rem; }
.voice-item-group > div { display:flex; flex-wrap:wrap; gap:7px; }
.voice-item-group b { display:inline-flex; align-items:center; gap:6px; border-radius:12px; padding:7px 9px; background:#f5f9fc; color:#173c5a; font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-size:1.15rem; }
.voice-item-group b em { width:19px; height:19px; border-radius:50%; display:grid; place-items:center; background:#e8f1f8; color:#577287; font:800 .68rem "Tajawal",sans-serif; font-style:normal; }
.voice-item-group.short { border-top:4px solid #6ab5e8; }
.voice-item-group.long { border-top:4px solid #f2b85d; }
.voice-item-group.words { border-top:4px solid #75bf70; }
.voice-result-card { display:grid; grid-template-columns:160px 1fr; gap:14px; align-items:center; padding:15px; margin-bottom:16px; border-radius:19px; background:#f2fbf1; border:1px solid #d1e9cf; }
.voice-result-card > div:first-child { text-align:center; }
.voice-result-card > div:first-child strong { display:block; color:#2f7c37; font-size:2.25rem; line-height:1; }
.voice-result-card > div:first-child span { color:#66816b; font-size:.8rem; font-weight:800; }
.voice-result-parts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.voice-result-parts span { padding:9px; border-radius:12px; background:#fff; color:#627786; text-align:center; font-size:.82rem; }
.voice-result-parts b { display:block; margin-top:3px; color:#214e73; }
.voice-rating-grid { display:grid; gap:10px; margin:14px 0; }
.voice-rating-group { border:1px solid #dce8f0; border-radius:16px; padding:11px; background:#fbfdff; }
.voice-rating-label { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; color:#244f70; }
.voice-rating-label span { color:#8795a0; font-weight:800; }
.voice-rating-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.voice-rating-options button { border:1px solid #d7e4ed; border-radius:12px; background:#fff; color:#526e82; padding:9px 6px; cursor:pointer; font:800 .82rem "Tajawal",sans-serif; }
.voice-rating-options button.selected { background:#e7f4e5; border-color:#76bd70; color:#2f7c37; box-shadow:inset 0 0 0 1px #76bd70; }
.voice-score-preview { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:15px; background:#eef6ff; color:#526f88; margin-bottom:12px; font-weight:800; }
.voice-score-preview strong { color:#184b9f; font-size:1.6rem; }
.voice-analytics-empty { padding:16px; border-radius:15px; background:#f6f8fa; color:#7a8994; text-align:center; margin-bottom:14px; }
.voice-analytics { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.8fr); gap:16px; margin:0 0 16px; padding:15px; border:1px solid #dfe9f0; border-radius:18px; background:#fbfdff; }
.voice-average-bars { display:grid; gap:10px; }
.voice-average-row > div:first-child { display:flex; justify-content:space-between; gap:10px; margin-bottom:5px; color:#5d7588; font-size:.85rem; }
.voice-average-row b { color:#184b9f; }
.voice-chart-track { height:11px; border-radius:999px; overflow:hidden; background:#e9eef2; }
.voice-chart-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5ca9df,#68bd68); }
.voice-distribution { display:grid; gap:8px; align-content:start; }
.voice-distribution h4 { margin:0 0 3px; color:#244f70; }
.voice-distribution > div { position:relative; min-height:34px; display:grid; grid-template-columns:1fr auto; align-items:center; padding:7px 9px; border-radius:10px; overflow:hidden; background:#f1f4f6; color:#566d7d; }
.voice-distribution > div i { position:absolute; inset-block:0; right:0; background:rgba(96,174,111,.14); z-index:0; }
.voice-distribution > div span,.voice-distribution > div b { position:relative; z-index:1; }
.voice-comparison { margin:0 0 18px; padding:16px; border-radius:20px; border:1px solid #dfe9f0; background:#fff; }
.voice-comparison h3 { color:var(--blue); margin:0 0 12px; }
.voice-comparison > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.voice-comparison > div > div { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:12px; background:#f8fbfd; border-radius:14px; }
.voice-comparison .voice-chart-track { grid-column:1/-1; }
.voice-table-score { display:inline-flex; min-width:55px; justify-content:center; padding:6px 9px; border-radius:999px; background:#eef7ff; color:#184b9f; }
.voice-review-dialog .voice-random-items { margin:8px 0 12px; }
@media (max-width:980px) {
  .voice-teacher-config-grid.two { grid-template-columns:1fr; }
  .voice-analytics { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .voice-random-items { grid-template-columns:1fr; }
  .voice-result-card { grid-template-columns:1fr; }
  .voice-result-parts { grid-template-columns:1fr; }
  .voice-rating-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .voice-comparison > div { grid-template-columns:1fr; }
}

/* v5.7.28 — قوائم كلمات مقننة للتقويم الصوتي */


/* v5.7.29 — قراءة التقويم في ثلاثة صفوف كبيرة + تحسين سرعة الفتح */
.voice-random-items {
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:12px;
}
.voice-item-group {
  padding:16px 18px;
  border-radius:20px;
}
.voice-item-group > span {
  margin-bottom:11px;
  font-size:1rem;
  text-align:right;
}
.voice-item-group > div {
  display:grid;
  align-items:stretch;
  gap:10px;
}
.voice-item-group.short > div { grid-template-columns:repeat(4,minmax(0,1fr)); }
.voice-item-group.long > div,
.voice-item-group.words > div { grid-template-columns:repeat(3,minmax(0,1fr)); }
.voice-item-group b {
  width:100%;
  min-height:74px;
  justify-content:center;
  text-align:center;
  padding:12px 10px;
  border-radius:16px;
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif;
  font-size:clamp(2rem,3.2vw,2.7rem);
  line-height:1.45;
  font-weight:800;
  white-space:nowrap;
}
.voice-item-group.words b {
  font-size:clamp(1.9rem,3vw,2.5rem);
}
.voice-item-group b em {
  flex:0 0 auto;
  width:24px;
  height:24px;
  font-size:.75rem;
}
.voice-review-dialog .voice-item-group b {
  min-height:58px;
  font-size:clamp(1.45rem,2.4vw,1.9rem);
}
@media (max-width:760px) {
  .voice-item-group { padding:14px 12px; }
  .voice-item-group > div { gap:7px; }
  .voice-item-group b {
    min-height:64px;
    padding:9px 5px;
    font-size:clamp(1.75rem,7.4vw,2.15rem);
  }
  .voice-item-group.words b { font-size:clamp(1.65rem,6.8vw,2rem); }
  .voice-item-group b em { width:20px; height:20px; font-size:.65rem; }
}
@media (max-width:430px) {
  .voice-item-group b { font-size:1.65rem; }
  .voice-item-group.words b { font-size:1.55rem; }
  .voice-item-group b em { width:18px; height:18px; font-size:.6rem; }
}


/* v5.7.30 — مؤقت مرئي للتقويم الصوتي حتى 60 ثانية */
.voice-recorder-timer {
  width:92px;
  min-height:46px;
  margin:12px auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #5dbb65;
  border-radius:13px;
  background:#edf9ef;
  color:#23813a;
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif;
  font-size:1.7rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  direction:ltr;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.voice-recorder-timer.warning {
  border-color:#e45959;
  background:#fff0ef;
  color:#c93d3d;
}
@media (max-width:760px) {
  .voice-recorder-timer { width:88px; min-height:44px; font-size:1.6rem; }
}

/* v5.7.42 — استديو بمعيار موحد: AudioWorklet + Mastering بعد التسجيل + إصلاح نقرات رقمية + قص ذكي */

/* v5.7.49 — اعتماد خط الكتاب الظاهر في عناوين المشروع للكلمات التعليمية */
:root { --student-word-font: "Baloo Bhaijaan 2", "Tajawal", sans-serif; }
.observe-word-text,
.word-chip,
.read-word-label,
.hunt-chip,
.sound-pair strong,
.observe-line .target-word {
  font-family: var(--student-word-font);
}
.observe-word-text,
.word-chip,
.read-word-label,
.hunt-chip,
.sound-pair strong {
  font-weight: 500;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
.observe-word-text {
  font-size: clamp(2.05rem, 3.4vw, 2.45rem);
  line-height: 1.82;
  padding-block: .05em .12em;
}
.word-chip {
  min-height: 94px;
  padding: 14px 16px;
  font-size: clamp(2.05rem, 3.2vw, 2.4rem);
  line-height: 1.82;
  overflow: visible;
}
.read-word-label {
  line-height: 1.82;
  padding-block: .04em .13em;
}
.hunt-chip {
  min-height: 78px;
  font-size: clamp(1.8rem, 2.6vw, 2.08rem);
  line-height: 1.78;
  overflow: visible;
}
.sound-pair strong {
  font-size: clamp(2.15rem, 3vw, 2.45rem);
  line-height: 1.65;
  padding-block: .04em .1em;
}
.observe-line .target-word { font-weight: 500; }
@media (max-width: 760px) {
  .observe-word-text { font-size: 2rem; line-height: 1.82; }
  .word-chip { min-height: 86px; font-size: 2rem; line-height: 1.82; }
  .hunt-chip { min-height: 72px; font-size: 1.72rem; line-height: 1.76; }
  .sound-pair strong { font-size: 2.15rem; }
}


/* v5.7.49 — إصلاح مكونات أقرأ/أجرد/إنجازاتي + تتويج جديد */
.lesson-card-with-guide .lesson-card-head { gap:18px; }
.section-guide-banner { flex:0 0 auto; }

.achievement-badge {
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:28px 26px 30px;
  border-radius:38px;
  background:#fff;
  border:1px solid #d9e7f2;
  box-shadow:0 18px 42px rgba(29,88,128,.12);
}
.achievement-badge::before,
.achievement-badge::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:#edf8ff;
  z-index:0;
}
.achievement-badge::before { width:210px; height:210px; left:-88px; top:-95px; }
.achievement-badge::after { width:240px; height:240px; right:-115px; bottom:-130px; }
.achievement-badge > * { position:relative; z-index:1; }
.badge-brand-title { margin-bottom:6px; }
.badge-crown {
  width:88px;
  height:66px;
  margin:8px auto 4px;
  color:#efb823;
  display:grid;
  place-items:center;
}
.badge-crown svg { width:80px; height:58px; stroke:currentColor; fill:rgba(255,201,74,.22); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.badge-student-top {
  margin:0 auto 4px;
  color:var(--blue);
  font-size:clamp(2rem,4.2vw,3.2rem);
  line-height:1.25;
}
.badge-ribbon {
  margin:0 auto 14px;
  color:#6a50bd;
  font-weight:800;
  font-size:1.05rem;
}
.badge-medal {
  position:relative;
  width:152px;
  height:152px;
  margin:12px auto 18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff8df;
  border:9px solid #f3bd2f;
  box-shadow:0 13px 26px rgba(24,75,159,.11);
}
.badge-medal::before,
.badge-medal::after { content:none !important; }
.badge-medal span {
  position:static;
  width:118px;
  height:118px;
  margin:0;
  border:0;
  background:var(--badge-letter-color);
  color:#fff;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.06);
  font-size:5.7rem;
}
.achievement-badge h4 { font-size:1.35rem; margin-top:2px; }
.badge-name-panel { display:none !important; }

@media (max-width:760px) {
  .lesson-card-with-guide .lesson-card-head { display:grid; grid-template-columns:1fr; }
  .badge-crown { width:76px; height:58px; }
  .badge-crown svg { width:70px; height:52px; }
  .badge-medal { width:138px; height:138px; }
  .badge-medal span { width:106px; height:106px; font-size:5rem; }
}


/* v5.7.49 — هوية محتوى هادئة دون تكرار + مشهد تتويج جديد */
.section-guide-banner { display:none !important; }
.lesson-card-read .lesson-card-head,
.lesson-card-isolate .lesson-card-head,
.lesson-card-achieve .lesson-card-head {
  position:relative;
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:0;
}
.lesson-card-read .lesson-card-head::after,
.lesson-card-isolate .lesson-card-head::after,
.lesson-card-achieve .lesson-card-head::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:86px;
  height:5px;
  border-radius:999px;
  background:var(--section-color);
  box-shadow:32px 0 0 color-mix(in srgb,var(--section-color) 32%, transparent);
}
.lesson-card-read { background:linear-gradient(180deg,#fff 0%,#fbfdff 100%); }
.lesson-card-isolate { background:linear-gradient(180deg,#fff 0%,#fffdf9 100%); }
.lesson-card-achieve { background:linear-gradient(180deg,#fff 0%,#fffdf8 100%); }
.section-inline-instruction {
  margin:-2px 0 2px;
  color:#6d8092;
  font-weight:700;
  font-size:1.03rem;
  line-height:1.8;
}
.read-content-stack { gap:14px; }
.lesson-card-read .word-chip {
  background:#f5f9ff;
  border:1px solid #e1ebf5;
  box-shadow:0 7px 16px rgba(34,89,125,.06);
}
.lesson-card-read .word-chip:hover { background:#eef6ff; }
.isolate-content-stack { gap:18px; }
.lesson-card-isolate .hunt-grid {
  padding:18px;
  border-radius:26px;
  background:linear-gradient(135deg,#fffaf3,#fff 58%,#fff8ee);
  border:1px solid #f1e2cb;
}
.lesson-card-isolate .hunt-chip {
  background:#fff;
  border:1px solid #efdfc7;
  box-shadow:0 7px 15px rgba(117,82,34,.05);
}
.lesson-card-isolate .hunt-chip.selected { background:#fff1dd; box-shadow:inset 0 0 0 2px var(--section-color); }
.lesson-card-isolate .hunt-actions { margin-top:0; }
.achieve-content-stack { gap:13px; }
.lesson-card-achieve .achievement-question {
  position:relative;
  padding:20px 72px 20px 20px;
  background:#fbfdff;
  border:1px solid #e0eaf3;
  box-shadow:none;
}
.lesson-card-achieve .achievement-question::before {
  content:attr(data-question-number);
  position:absolute;
  right:18px;
  top:19px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--section-color);
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 13px color-mix(in srgb,var(--section-color) 20%,transparent);
}
.lesson-card-achieve .achievement-question h4 { margin-bottom:13px; }
.lesson-card-achieve #quizResult { margin-top:2px; }

/* صفحة التتويج */
.lesson-card-badge-celebration {
  background:linear-gradient(180deg,#fffaf0 0%,#ffffff 58%,#f7f3ff 100%);
  border:1px solid #eee4cf;
  overflow:hidden;
}
.badge-celebration-shell {
  position:relative;
  min-height:650px;
  display:grid;
  justify-items:center;
  align-content:start;
  padding:18px 18px 8px;
  text-align:center;
}
.badge-celebration-shell::before,
.badge-celebration-shell::after {
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
}
.badge-celebration-shell::before { top:-100px; right:-80px; background:rgba(255,211,89,.12); }
.badge-celebration-shell::after { bottom:40px; left:-95px; background:rgba(106,80,189,.08); }
.badge-celebration-head { position:relative; z-index:2; display:grid; gap:2px; justify-items:center; }
.badge-celebration-head span { color:#6a50bd; font-weight:800; font-size:1.2rem; }
.badge-celebration-head strong { color:var(--blue); font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.1; }
.badge-celebration-head small { margin-top:3px; color:#718293; font-weight:700; font-size:1.05rem; }
.coronation-stage { position:relative; width:min(520px,92%); height:390px; margin:8px auto 0; z-index:1; }
.coronation-rays {
  position:absolute; inset:25px 60px 80px;
  border-radius:48% 48% 42% 42%;
  background:radial-gradient(circle at 50% 62%,rgba(255,220,104,.42) 0%,rgba(255,244,207,.30) 34%,rgba(255,255,255,0) 68%);
}
.coronation-crown { position:absolute; z-index:5; top:22px; left:50%; width:150px; height:86px; transform:translateX(-50%); background:linear-gradient(180deg,#ffd75b,#ecad1a); clip-path:polygon(0 28%,22% 64%,34% 12%,50% 60%,68% 10%,80% 63%,100% 27%,92% 100%,8% 100%); filter:drop-shadow(0 9px 10px rgba(165,115,8,.18)); }
.coronation-crown i { position:absolute; width:13px; height:13px; border-radius:50%; background:#fff2bd; top:13px; }
.coronation-crown i:nth-child(1){left:28px}.coronation-crown i:nth-child(2){left:69px;top:5px}.coronation-crown i:nth-child(3){right:28px}
.coronation-medal {
  position:absolute; z-index:4; top:105px; left:50%; transform:translateX(-50%);
  width:205px; height:205px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,#7d63d7,#5d43b7);
  border:10px solid #f4bf31;
  box-shadow:0 18px 34px rgba(73,49,145,.22), inset 0 0 0 5px #fff0b4;
}
.coronation-medal span { color:#fff; font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-size:8rem; line-height:.8; text-shadow:0 6px 0 rgba(0,0,0,.07); }
.coronation-laurel { position:absolute; z-index:3; top:145px; width:98px; height:150px; border:8px solid #e8ae22; border-top-color:transparent; border-bottom-color:transparent; border-radius:50%; }
.coronation-laurel::before { content:"✦  ✦  ✦"; position:absolute; color:#f0b628; font-size:1rem; letter-spacing:4px; top:25px; }
.coronation-laurel-right { right:76px; transform:rotate(-17deg); border-left-color:transparent; }
.coronation-laurel-right::before { right:-20px; transform:rotate(74deg); }
.coronation-laurel-left { left:76px; transform:rotate(17deg); border-right-color:transparent; }
.coronation-laurel-left::before { left:-20px; transform:rotate(-74deg); }
.coronation-podium { position:absolute; z-index:2; bottom:4px; left:50%; transform:translateX(-50%); width:330px; height:108px; display:grid; align-content:end; justify-items:center; }
.coronation-podium b { display:block; height:32px; border-radius:13px 13px 7px 7px; background:linear-gradient(180deg,#8268db,#6248bc); box-shadow:0 6px 12px rgba(83,58,160,.12); }
.coronation-podium b:nth-child(1){width:175px}.coronation-podium b:nth-child(2){width:235px}.coronation-podium b:nth-child(3){width:300px}
.badge-celebration-message { position:relative; z-index:2; margin-top:0; color:#19334d; font-size:clamp(1.25rem,2.3vw,1.65rem); font-weight:800; }
.badge-game-unlocked { position:relative; z-index:2; width:min(560px,92%); margin:-4px auto 14px; padding:12px 18px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; border:1px solid #bfe8db; border-radius:18px; background:linear-gradient(135deg,#effcf7,#f3fbff); box-shadow:0 10px 24px rgba(24,129,103,.10); color:#176f5a; text-align:center; font-weight:800; font-size:clamp(1.02rem,2vw,1.3rem); }
.badge-game-unlocked strong { color:#0d8b68; font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif; font-size:1.18em; }
.badge-game-unlocked span { color:#245d73; }
.badge-save-btn { margin-top:16px; min-width:235px; justify-content:center; font-size:1.05rem; }
.lesson-card-badge-celebration .lesson-actions { position:relative; z-index:2; }

@media (max-width:760px) {
  .lesson-card-achieve .achievement-question { padding:18px 62px 18px 16px; }
  .lesson-card-achieve .achievement-question::before { right:14px; top:16px; width:34px; height:34px; }
  .lesson-card-isolate .hunt-grid { padding:12px; }
  .badge-celebration-shell { min-height:570px; padding-inline:6px; }
  .coronation-stage { height:350px; width:min(440px,100%); }
  .coronation-crown { width:128px; height:74px; }
  .coronation-medal { top:96px; width:176px; height:176px; }
  .coronation-medal span { font-size:6.8rem; }
  .coronation-laurel { top:132px; width:82px; height:126px; }
  .coronation-laurel-right { right:54px; }.coronation-laurel-left { left:54px; }
  .coronation-podium { width:285px; }
  .coronation-podium b:nth-child(1){width:150px}.coronation-podium b:nth-child(2){width:205px}.coronation-podium b:nth-child(3){width:265px}
}
@media (max-width:440px) {
  .badge-celebration-head strong { font-size:2.7rem; }
  .coronation-stage { height:320px; }
  .coronation-medal { width:158px; height:158px; top:92px; }
  .coronation-medal span { font-size:6rem; }
  .coronation-laurel-right { right:30px; }.coronation-laurel-left { left:30px; }
  .coronation-podium { transform:translateX(-50%) scale(.88); transform-origin:center bottom; }
}


/* v5.7.49 — إعادة بناء بصري ووظيفي لأقرأ / أجرد الحرف / إنجازاتي */
.lesson-card-read,
.lesson-card-isolate,
.lesson-card-achieve { isolation:isolate; }
.lesson-card-read::before,
.lesson-card-isolate::before,
.lesson-card-achieve::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:250px;
  height:250px;
  border-radius:50%;
  left:-115px;
  bottom:-110px;
  opacity:.28;
  pointer-events:none;
}
.lesson-card-read::before { background:#dff2ff; }
.lesson-card-isolate::before { background:#fff0d7; }
.lesson-card-achieve::before { background:#fff0bd; }

/* أقرأ: مشهد كتاب ومسار استماع بدل بطاقة مكررة */
.read-experience { display:grid; gap:18px; }
.read-scene {
  position:relative;
  min-height:150px;
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 210px;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(115deg,#eef8ff 0%,#ffffff 52%,#f1fbff 100%);
  border:1px solid #d6eaf6;
  box-shadow:0 12px 30px rgba(35,104,155,.08);
}
.read-scene::after {
  content:""; position:absolute; width:170px; height:170px; border-radius:50%; left:-55px; top:-70px;
  background:rgba(50,169,208,.10);
}
.read-scene-book { position:relative; width:160px; height:110px; margin-inline:auto; filter:drop-shadow(0 10px 10px rgba(24,75,159,.12)); }
.read-page { position:absolute; top:28px; width:78px; height:64px; background:#fff; border:3px solid #52b5d5; }
.read-page-right { right:4px; border-radius:8px 22px 14px 8px; transform:rotate(5deg); }
.read-page-left { left:4px; border-radius:22px 8px 8px 14px; transform:rotate(-5deg); }
.read-page::before,.read-page::after { content:""; position:absolute; right:15px; left:15px; height:3px; background:#d8eaf3; border-radius:999px; }
.read-page::before { top:22px; }.read-page::after { top:36px; }
.read-book-spine { position:absolute; top:32px; left:77px; width:7px; height:64px; border-radius:999px; background:#299fc6; z-index:2; }
.read-floating-letter {
  position:absolute; display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
  font-family:var(--student-word-font); font-size:1.45rem; font-weight:700; color:#fff; box-shadow:0 7px 14px rgba(24,75,159,.12);
}
.read-letter-a { right:15px; top:0; background:#34a6d1; transform:rotate(8deg); }
.read-letter-b { left:12px; top:5px; background:#6a50bd; transform:rotate(-8deg); }
.read-letter-t { left:68px; top:-8px; background:#f4ad20; transform:rotate(3deg); }
.read-scene-copy { display:grid; gap:5px; }
.read-scene-copy strong { color:var(--blue); font-size:1.35rem; }
.read-scene-copy span { color:#708294; font-weight:700; line-height:1.7; }
.read-progress-card { display:grid; gap:8px; justify-items:stretch; }
.read-progress-card b { color:#2b789a; font-size:.95rem; text-align:center; }
.read-progress-track { height:13px; border-radius:999px; background:#dceef6; overflow:hidden; box-shadow:inset 0 1px 2px rgba(34,89,125,.10); }
.read-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#36afd3,#2086c5); transition:width .25s ease; }
.read-word-board {
  padding:18px;
  border-radius:28px;
  background:rgba(255,255,255,.88);
  border:1px solid #e0ebf4;
  box-shadow:0 12px 28px rgba(34,89,125,.06);
}
.read-board-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; color:#657b8e; font-weight:800; }
.read-board-spark { color:#f1aa17; font-size:1.25rem; }
.lesson-card-read .read-word-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.lesson-card-read .read-audio-word {
  min-height:126px;
  background:linear-gradient(180deg,#ffffff 0%,#f5faff 100%);
  border:1px solid #dceaf4;
  border-radius:22px;
  box-shadow:0 9px 19px rgba(34,89,125,.07);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.lesson-card-read .read-audio-word:hover { transform:translateY(-3px); box-shadow:0 13px 24px rgba(34,89,125,.10); }
.lesson-card-read .read-audio-word.task-read { border-color:#a9d8b0; background:linear-gradient(180deg,#ffffff,#f0fbf1); }
.lesson-card-read .read-audio-word.task-read::after { position:absolute; top:10px; left:12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#e0f5e2; }

/* أجرد الحرف: مساحة بحث فعلية بحرف هدف وعدسة */
.isolate-experience { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; align-items:stretch; }
.letter-hunt-target {
  position:relative;
  min-height:360px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:8px;
  padding:22px 16px;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(180deg,#fff8eb 0%,#fff 100%);
  border:1px solid #f0dec0;
  box-shadow:0 12px 28px rgba(138,91,27,.07);
  text-align:center;
}
.letter-hunt-target::before,.letter-hunt-target::after { content:""; position:absolute; border-radius:50%; background:rgba(245,155,66,.09); }
.letter-hunt-target::before { width:130px; height:130px; top:-48px; right:-40px; }
.letter-hunt-target::after { width:95px; height:95px; bottom:-32px; left:-25px; }
.target-lens { position:relative; width:126px; height:126px; border-radius:50%; display:grid; place-items:center; background:#fff; border:12px solid #f59b42; box-shadow:0 12px 24px rgba(151,93,27,.14),inset 0 0 0 5px #fff2df; margin-bottom:14px; }
.target-letter { font-family:var(--student-word-font); font-size:5.6rem; color:var(--letter-color); font-weight:700; line-height:.8; }
.lens-handle { position:absolute; width:22px; height:68px; border-radius:999px; background:#d77c28; left:-24px; bottom:-46px; transform:rotate(42deg); box-shadow:inset 0 -5px 0 rgba(0,0,0,.08); }
.letter-hunt-target > strong { color:var(--blue); font-size:1.15rem; }
.letter-hunt-target > small { color:#7b8792; font-size:.92rem; font-weight:700; }
.hunt-selection-count { margin-top:14px; display:flex; align-items:baseline; gap:5px; padding:8px 13px; border-radius:999px; background:#fff3df; color:#b66b20; }
.hunt-selection-count span { font-size:1.2rem; font-weight:900; }.hunt-selection-count small { font-weight:800; }
.hunt-board { position:relative; padding:18px; border-radius:28px; background:#fffdf9; border:1px solid #f0e0c8; box-shadow:0 12px 28px rgba(117,82,34,.05); overflow:hidden; }
.hunt-board-decoration { position:absolute; inset:0; pointer-events:none; opacity:.55; }
.hunt-board-decoration i { position:absolute; width:8px; height:8px; border-radius:50%; background:#f6bd68; }
.hunt-board-decoration i:nth-child(1){top:18px;right:22px}.hunt-board-decoration i:nth-child(2){top:40px;left:34px}.hunt-board-decoration i:nth-child(3){bottom:28px;right:42px}.hunt-board-decoration i:nth-child(4){bottom:18px;left:22px}
.lesson-card-isolate .hunt-grid { position:relative; z-index:1; padding:0; background:transparent; border:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.lesson-card-isolate .hunt-chip { min-height:104px; border-radius:20px; background:#fff; border:1px solid #edd9bc; box-shadow:0 8px 17px rgba(117,82,34,.06); transition:transform .18s ease,box-shadow .18s ease; }
.lesson-card-isolate .hunt-chip:hover { transform:translateY(-2px); box-shadow:0 11px 20px rgba(117,82,34,.09); }
.lesson-card-isolate .hunt-chip.selected { background:#fff1dc; border-color:#f2b45b; box-shadow:inset 0 0 0 2px #f2b45b; }
.lesson-card-isolate .hunt-chip.good { background:#e9f7e5; color:#2d7f31; border-color:#79c26e; box-shadow:inset 0 0 0 2px #79c26e; }
.lesson-card-isolate .hunt-chip.bad { background:#fde7e5; color:#a73e39; border-color:#ed7b73; box-shadow:inset 0 0 0 2px #ed7b73; }
.lesson-card-isolate .hunt-chip.good:hover,
.lesson-card-isolate .hunt-chip.bad:hover { transform:none; box-shadow:inset 0 0 0 2px currentColor; }
.lesson-card-isolate .hunt-chip:disabled { opacity:1; }
.lesson-card-isolate .hunt-actions { position:relative; z-index:1; display:flex; justify-content:flex-start; margin-top:16px; }

/* إنجازاتي: مسار تحديات تفاعلي لا قائمة أسئلة عادية */
.achievement-experience { display:grid; gap:18px; }
.achievement-dashboard {
  display:grid;
  grid-template-columns:78px 170px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border-radius:28px;
  background:linear-gradient(115deg,#fff8df 0%,#fff 50%,#fffaf0 100%);
  border:1px solid #f0dfad;
  box-shadow:0 11px 25px rgba(138,98,22,.07);
}
.achievement-trophy { width:64px; height:64px; border-radius:22px; display:grid; place-items:center; background:linear-gradient(180deg,#ffd766,#f0aa14); color:#fff; box-shadow:0 9px 16px rgba(174,115,11,.16),inset 0 -5px 0 rgba(0,0,0,.07); font-size:2rem; }
.achievement-progress-copy { display:grid; gap:3px; }.achievement-progress-copy strong { color:var(--blue); font-size:1.12rem; }.achievement-progress-copy span { color:#987022; font-weight:800; }
.achievement-progress-rail { display:flex; align-items:center; justify-content:flex-end; gap:6px; direction:rtl; }
.achievement-progress-rail > i { flex:1; height:4px; max-width:80px; background:#eadcae; border-radius:999px; }
.achievement-progress-rail > span { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid #eadcae; color:#a48543; transition:.2s ease; }
.achievement-progress-rail > span b { font-size:1rem; }
.achievement-progress-rail > span.done { background:#53b764; border-color:#53b764; color:#fff; transform:scale(1.05); box-shadow:0 7px 14px rgba(50,139,67,.15); }
.achievement-trail { position:relative; display:grid; gap:16px; padding-right:18px; }
.achievement-trail::before { content:""; position:absolute; top:28px; bottom:70px; right:38px; width:4px; border-radius:999px; background:linear-gradient(#f1c85f,#f5df9f); }
.lesson-card-achieve .achievement-question {
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:18px;
  border-radius:24px;
  background:#fff;
  border:1px solid #e5eaf0;
  box-shadow:0 9px 20px rgba(34,89,125,.055);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.lesson-card-achieve .achievement-question::before { display:none; }
.lesson-card-achieve .achievement-question:hover { transform:translateX(-2px); box-shadow:0 12px 24px rgba(34,89,125,.08); }
.achievement-step-marker { position:relative; z-index:2; width:48px; height:48px; border-radius:18px; display:grid; place-items:center; background:#fff6d9; border:2px solid #f0c34c; color:#9f7010; font-weight:900; box-shadow:0 6px 12px rgba(174,115,11,.10); }
.achievement-question.done .achievement-step-marker { background:#e7f7e9; border-color:#63b86c; color:#398342; }
.achievement-question.done .achievement-step-marker span { font-size:0; }.achievement-question.done .achievement-step-marker span::after { content:"✓"; font-size:1.2rem; }
.achievement-question-body h4 { margin:2px 0 12px; color:var(--blue); font-size:1.32rem; line-height:1.8; }
.lesson-card-achieve .quiz-grid { gap:10px; }
.lesson-card-achieve .quiz-choice { min-height:58px; background:#f5f9ff; border:1px solid #e0eaf4; border-radius:16px; font-family:var(--student-word-font); font-weight:600; }
.lesson-card-achieve .quiz-choice.correct { background:#e8f7e7; border-color:#91cb8d; color:#2f7c35; }.lesson-card-achieve .quiz-choice.wrong { background:#fff0ee; border-color:#efaaa4; color:#a44740; }
.achievement-result { display:flex; align-items:center; justify-content:center; gap:10px; min-height:58px; border-radius:20px; background:#fff8e3; border:1px solid #f0deaa; color:#8b681d; font-weight:800; }
.achievement-result span { font-size:1.45rem; color:#e7a815; }.achievement-result p { margin:0; }.achievement-result.complete { background:#edf9ec; border-color:#b7ddb5; color:#3d7d42; }.achievement-result.complete span { color:#4ca65a; }

@media (max-width:980px) {
  .read-scene { grid-template-columns:150px minmax(0,1fr); }
  .read-progress-card { grid-column:1/-1; grid-template-columns:minmax(0,1fr) 80px; align-items:center; }
  .read-scene-book { transform:scale(.88); }
  .isolate-experience { grid-template-columns:160px minmax(0,1fr); }
  .achievement-dashboard { grid-template-columns:64px 150px minmax(0,1fr); }
}
@media (max-width:760px) {
  .read-scene { grid-template-columns:1fr; text-align:center; padding:16px; }
  .read-scene-book { width:150px; height:100px; }
  .read-progress-card { grid-column:auto; }
  .lesson-card-read .read-word-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .read-word-board { padding:12px; }
  .isolate-experience { grid-template-columns:1fr; }
  .letter-hunt-target { min-height:auto; grid-template-columns:110px minmax(0,1fr); grid-template-rows:auto auto auto; text-align:right; justify-items:start; padding:16px 18px; }
  .target-lens { grid-row:1/4; width:95px; height:95px; border-width:9px; margin:0; }.target-letter { font-size:4.3rem; }.lens-handle { width:18px; height:52px; left:-18px; bottom:-35px; }
  .hunt-selection-count { margin-top:0; }
  .lesson-card-isolate .hunt-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .achievement-dashboard { grid-template-columns:58px minmax(0,1fr); }.achievement-progress-rail { grid-column:1/-1; justify-content:center; }.achievement-progress-copy { text-align:right; }
  .achievement-trail { padding-right:0; }.achievement-trail::before { display:none; }
}
@media (max-width:520px) {
  .lesson-card-read .read-word-grid,.lesson-card-isolate .hunt-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .lesson-card-read .read-audio-word { min-height:112px; }
  .lesson-card-isolate .hunt-chip { min-height:88px; }
  .letter-hunt-target { grid-template-columns:88px minmax(0,1fr); }.target-lens { width:78px; height:78px; border-width:8px; }.target-letter { font-size:3.55rem; }.lens-handle { display:none; }
  .achievement-dashboard { padding:13px; }.achievement-trophy { width:52px; height:52px; border-radius:17px; }.achievement-progress-rail > span { width:36px; height:36px; }
  .lesson-card-achieve .achievement-question { grid-template-columns:44px minmax(0,1fr); padding:14px; }.achievement-step-marker { width:40px; height:40px; border-radius:14px; }.achievement-question-body h4 { font-size:1.18rem; }
}

/* v5.7.49 — مؤشر تقدم مهمة الاستماع في ألاحظ وأستمع */
.observe-listen-task { display:grid; gap:9px; }
.observe-listen-task-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.observe-listen-task-head h4 { margin:0; }
.observe-listen-task-head b {
  min-width:64px;
  text-align:center;
  padding:5px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--section-color) 10%,#fff 90%);
  color:var(--section-color);
  font-size:.92rem;
  font-weight:900;
}
.observe-progress-track {
  width:100%;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb,var(--section-color) 14%,#fff 86%);
  box-shadow:inset 0 1px 2px rgba(34,89,125,.10);
}
.observe-progress-track span {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--section-color) 78%,#fff 22%),var(--section-color));
  transition:width .28s ease;
}
@media (max-width:520px) {
  .observe-listen-task-head { align-items:flex-start; }
  .observe-listen-task-head b { font-size:.86rem; min-width:58px; }
}

/* v5.7.55 — ألعابي: ست ألعاب مشتقة من محتوى الدروس */
.games-page { width:min(1240px,100%); }
.games-hero {
  position:relative; overflow:hidden; min-height:260px; margin-bottom:22px; padding:30px 34px;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:center; gap:24px;
  border-radius:32px; background:linear-gradient(135deg,#e9f8ff 0%,#fff 52%,#fff8e8 100%);
  border:1px solid #dceaf3; box-shadow:var(--shadow);
}
.games-hero::before,.games-hero::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.games-hero::before { width:220px;height:220px;right:-80px;top:-90px;background:rgba(50,169,208,.09); }
.games-hero::after { width:170px;height:170px;left:32%;bottom:-120px;background:rgba(255,201,74,.12); }
.games-hero-copy { position:relative; z-index:2; }
.games-eyebrow { display:inline-flex; padding:6px 11px; border-radius:999px; background:#fff4d8; color:#8d6812; font-weight:800; font-size:.88rem; }
.games-hero h2 { margin:8px 0 4px; color:var(--blue); font-size:clamp(2rem,4vw,3rem); }
.games-hero p { margin:0; color:#64798b; font-weight:700; line-height:1.9; }
.games-unlocked { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:17px; }
.games-unlocked b { color:#5e7486; margin-left:2px; }
.games-unlocked span,.game-mini-letters span {
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff;color:var(--letter-chip);border:1px solid color-mix(in srgb,var(--letter-chip) 28%,#e5edf3);font:800 1.42rem "Baloo Bhaijaan 2",sans-serif;box-shadow:0 6px 14px rgba(24,75,159,.06);
}
.games-hero-house { position:relative; z-index:2; width:250px; margin-inline:auto; filter:drop-shadow(0 18px 22px rgba(29,88,128,.12)); }
.games-house-roof { height:112px; display:flex; align-items:flex-end; justify-content:center; gap:10px; padding-bottom:17px; background:#ef625e; clip-path:polygon(50% 0,100% 72%,90% 72%,90% 100%,10% 100%,10% 72%,0 72%); }
.games-house-roof span { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#fff;color:#ef625e;font:800 2.1rem "Baloo Bhaijaan 2",sans-serif; }
.games-house-body { height:116px; display:flex; justify-content:center; gap:20px; align-items:center; background:#fff; border:1px solid #e5eaf0; border-top:0; border-radius:0 0 26px 26px; }
.games-house-body i { width:42px;height:57px;border-radius:20px 20px 8px 8px;background:#dff3fb;border:5px solid #65c7eb; }
.games-section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:8px 4px 15px; }
.games-section-head h3 { margin:0; color:var(--blue); font-size:1.6rem; }
.games-section-head p { margin:4px 0 0; color:var(--muted); font-weight:600; }
.games-section-head>span { padding:7px 11px; border-radius:999px; background:#eef8ef; color:#3f8246; font-weight:800; white-space:nowrap; }
.games-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.game-card {
  position:relative; overflow:hidden; min-height:190px; display:grid; grid-template-columns:74px minmax(0,1fr) auto; grid-template-rows:auto 1fr auto; gap:9px 15px; align-items:center;
  text-align:right; padding:20px; border:1px solid color-mix(in srgb,var(--game-color) 17%,#dce8f0); border-radius:27px; background:linear-gradient(145deg,#fff 0%,var(--game-soft) 120%); color:var(--ink); font-family:inherit; cursor:pointer; box-shadow:0 11px 28px rgba(34,89,125,.07); transition:.2s ease;
}
.game-card:hover { transform:translateY(-4px); box-shadow:0 17px 32px rgba(34,89,125,.11); border-color:color-mix(in srgb,var(--game-color) 38%,#dce8f0); }
.game-card::after { content:""; position:absolute; width:115px;height:115px;border-radius:50%;background:color-mix(in srgb,var(--game-color) 8%,transparent);left:-42px;bottom:-50px; }
.game-card-number { position:absolute; top:14px; left:17px; color:color-mix(in srgb,var(--game-color) 42%,#8494a0); font-weight:900; font-size:.8rem; letter-spacing:.08em; }
.game-card-icon { grid-row:1/3; width:68px;height:68px;display:grid;place-items:center;border-radius:22px;background:var(--game-color);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.07),0 10px 18px color-mix(in srgb,var(--game-color) 20%,transparent); }
.game-card-icon svg,.game-title-icon svg { width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.game-card-copy { display:grid; gap:4px; align-self:end; }
.game-card-copy strong { color:var(--blue); font-size:1.35rem; }
.game-card-copy small { color:#667b8c; font-weight:650; line-height:1.75; }
.game-card-score { display:grid; gap:2px; align-self:start; grid-column:2; }
.game-card-score b { color:#e3a51e; letter-spacing:.08em; }
.game-card-score small { color:#7b8c99; font-weight:700; }
.game-card-arrow { grid-column:3;grid-row:1/4;align-self:center;width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:#fff;color:var(--game-color);font-size:1.3rem;font-weight:900;border:1px solid color-mix(in srgb,var(--game-color) 18%,#e3ebf1); }

.game-play-page { padding-bottom:42px; }
.game-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.game-back-btn { border:1px solid #d9e6ef; background:#fff; color:var(--blue); border-radius:15px; padding:10px 14px; font-weight:800; cursor:pointer; }
.game-mini-letters { display:flex; gap:6px; flex-wrap:wrap; }
.game-mini-letters span { width:32px;height:32px;border-radius:10px;font-size:1.15rem;box-shadow:none; }
.game-title-row { display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:18px 20px;border-radius:24px;background:#fff;border:1px solid #e0ebf2;box-shadow:0 8px 22px rgba(34,89,125,.06); }
.game-title-icon { width:62px;height:62px;flex:0 0 62px;display:grid;place-items:center;border-radius:20px;background:var(--game-color);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.07); }
.game-title-row h2 { margin:0;color:var(--blue);font-size:1.8rem; }.game-title-row p{margin:3px 0 0;color:#6d8090;font-weight:650;}
.game-stage { position:relative; min-height:520px; padding:22px; border-radius:30px; background:linear-gradient(180deg,#fff 0%,var(--game-soft) 150%); border:1px solid color-mix(in srgb,var(--game-color) 13%,#dfe9f0); box-shadow:var(--shadow); }
.game-progress { display:grid;gap:7px; }.game-progress-label{display:flex;justify-content:space-between;align-items:center;color:#64798b;font-weight:800;}.game-progress-label b{color:var(--game-color);}.game-progress-track{height:12px;border-radius:999px;background:#edf2f6;overflow:hidden;}.game-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--game-color) 75%,#fff),var(--game-color));transition:width .35s ease;}
.game-feedback-line { padding:12px 15px;border-radius:15px;background:#fff;border:1px solid #e2eaf0;color:#617586;font-weight:750;text-align:center; }
.game-finish-card { margin-top:18px; padding:24px; border-radius:28px; text-align:center; background:linear-gradient(145deg,#fff9e7,#fff,#effaf0); border:1px solid #e6e1c7; box-shadow:0 15px 34px rgba(34,89,125,.10); }
.game-finish-card[hidden]{display:none}.game-finish-spark{width:58px;height:58px;margin:0 auto 9px;display:grid;place-items:center;border-radius:18px;background:#ffc94a;color:#7d5b0c;font-size:2rem}.game-finish-card strong{display:block;color:var(--blue);font-size:1.5rem}.game-finish-stars{margin:8px 0;color:#e4a51d;font-size:1.7rem;letter-spacing:.08em}.game-finish-card small{color:#718390;font-weight:700}.game-finish-actions{margin-top:16px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

/* صائد الحرف */
.hunter-stage { display:grid; gap:18px; background:radial-gradient(circle at 85% 10%,rgba(239,98,94,.10),transparent 24%),linear-gradient(180deg,#fff,#fff8f6); }
.hunter-mission { display:grid;grid-template-columns:100px minmax(0,1fr) 92px;align-items:center;gap:18px;padding:16px 19px;border-radius:24px;background:#fff;border:1px solid #f1dedd; }
.hunter-target-ring { width:90px;height:90px;display:grid;place-items:center;border-radius:50%;background:#fff1ef;border:10px solid #ef625e;box-shadow:inset 0 0 0 4px #fff; }.hunter-target-ring span{font:800 4rem "Baloo Bhaijaan 2",sans-serif;color:#ef625e;line-height:1}.hunter-mission small{color:#a56967;font-weight:800}.hunter-mission strong{display:block;color:var(--blue);font-size:1.32rem}.hunter-mission p{margin:3px 0 0;color:#728491}.hunter-counter{width:84px;height:84px;display:grid;place-items:center;border-radius:22px;background:#fff5e8;color:#b06e20;border:1px solid #f1d3aa}.hunter-counter b{font-size:1.65rem}.hunter-counter span{font-size:.82rem;font-weight:800;margin-top:-16px}.hunter-field{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.hunter-word{position:relative;min-height:88px;border:1px solid #dce8f0;border-radius:22px;background:#fff;color:var(--blue);font:800 1.55rem "Baloo Bhaijaan 2",sans-serif;cursor:pointer;box-shadow:0 8px 18px rgba(34,89,125,.06);transition:.2s ease;animation:hunterFloat 3.6s ease-in-out infinite;animation-delay:var(--float-delay)}.hunter-word span{position:absolute;top:8px;left:9px;color:#ef625e;font-size:.8rem}.hunter-word:hover{transform:translateY(-3px)}.hunter-word.caught{background:#e7f7e4;color:#347b39;border-color:#82c878;transform:scale(.94);opacity:.45}.hunter-word.miss{background:#fde7e5;color:#a63d39;border-color:#ec7b73;animation:hunterShake .28s linear 2}.hunter-bag{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:20px;background:#fff;border:1px dashed #e0b26d}.hunter-bag>span{font-weight:800;color:#9a6520;white-space:nowrap}.hunter-bag div{display:grid;grid-template-columns:repeat(4,minmax(70px,1fr));gap:8px;flex:1}.hunter-bag i{min-height:42px;display:grid;place-items:center;border-radius:13px;background:#fff8ec;border:1px dashed #e5c58f;color:#497b4e;font:800 1.05rem "Baloo Bhaijaan 2",sans-serif}.hunter-bag i.filled{background:#edf8eb;border-style:solid;border-color:#9ad091}@keyframes hunterFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes hunterShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* اسمع والتقط */
.listen-stage{display:grid;gap:18px;background:linear-gradient(180deg,#fff,#f7fbff)}
.listen-stage-head{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.listen-stage-head #listenProgress{align-self:center}
.listen-capture-basket{padding:14px 16px;border-radius:24px;background:linear-gradient(145deg,#fff8ea,#fff);border:1px solid #eddcc0;box-shadow:0 10px 24px rgba(117,82,34,.06)}
.listen-basket-title{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.listen-basket-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#f3b14e1f;font-size:1.7rem}
.listen-basket-title strong{display:block;color:var(--blue);font-size:1.08rem}
.listen-basket-title small{display:block;color:#8b7451;font-weight:800;font-size:.98rem}
.listen-captured-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.listen-captured-slot{min-height:54px;display:grid;place-items:center;border-radius:16px;background:#fff;border:1px dashed #e7cfad;color:#d2b68d;font:800 1.2rem "Baloo Bhaijaan 2",sans-serif;transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
.listen-captured-slot span{opacity:.7}
.listen-captured-slot.receiving{transform:scale(1.05);border-style:solid;border-color:#f1b258;background:#fff2db;box-shadow:0 0 0 4px rgba(241,178,88,.14)}
.listen-captured-slot.filled{background:#eaf8e7;border-style:solid;border-color:#81c977;color:#2f7b37;box-shadow:inset 0 0 0 2px #81c977}
.listen-captured-slot.filled span{opacity:1}
.listen-arena{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;padding:18px;border-radius:30px;background:linear-gradient(180deg,#f6fbff,#ffffff);border:1px solid #d6e7f5;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease}
.listen-arena::before,.listen-arena::after{content:"";position:absolute;border-radius:50%;pointer-events:none;opacity:.45}
.listen-arena::before{width:170px;height:170px;left:-55px;bottom:-65px;background:radial-gradient(circle,#d7ebff 0,rgba(215,235,255,0) 72%)}
.listen-arena::after{width:150px;height:150px;right:-42px;top:-48px;background:radial-gradient(circle,#f5e6c6 0,rgba(245,230,198,0) 70%)}
.listen-arena.listen-success{box-shadow:0 0 0 4px rgba(87,187,95,.12)}
.listen-arena.listen-miss{box-shadow:0 0 0 4px rgba(226,110,101,.12)}
.listen-console{position:relative;z-index:1;display:grid;place-items:center;align-content:center}
.listen-console-ring{width:100%;min-height:290px;display:grid;place-items:center;align-content:center;gap:12px;padding:18px;border-radius:28px;background:radial-gradient(circle at 50% 30%,#ffffff 0%,#edf6ff 62%,#e4f0fb 100%);border:1px solid #d6e7f5}
.listen-wave{height:52px;display:flex;align-items:center;gap:5px}.listen-wave i{width:7px;border-radius:999px;background:#2f74c9;animation:listenWave 1s ease-in-out infinite}.listen-wave i:nth-child(1),.listen-wave i:nth-child(5){height:16px}.listen-wave i:nth-child(2),.listen-wave i:nth-child(4){height:30px;animation-delay:.12s}.listen-wave i:nth-child(3){height:42px;animation-delay:.24s}@keyframes listenWave{50%{transform:scaleY(.55)}}
.listen-main-btn,.race-listen-btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:20px;padding:16px 20px;background:#2f74c9;color:#fff;font-weight:900;cursor:pointer;box-shadow:0 12px 24px rgba(47,116,201,.2);transition:transform .18s ease,box-shadow .18s ease}.listen-main-btn svg,.race-listen-btn svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2;}
.listen-main-btn.is-playing{transform:scale(1.03);box-shadow:0 16px 28px rgba(47,116,201,.28)}
.listen-console small{color:#6f8294;font-weight:800;font-size:1rem;line-height:1.85;text-align:center;max-width:230px}
.listen-options-zone{position:relative;z-index:1;display:grid;gap:14px}
.listen-arena-badge{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:18px;background:#fff;border:1px solid #dce9f4;color:#6f8192}
.listen-arena-badge span{display:inline-flex;align-items:center;gap:7px;color:#7a8fa3;font-weight:800}
.listen-arena-badge span::before{content:"✦";color:#f0aa3c}
.listen-arena-badge b{color:var(--blue);font-size:1.02rem}
.listen-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start;min-height:250px}
.listen-choice{--float-x:0px;--float-y:0px;position:relative;min-height:108px;border-radius:24px;border:1px solid #d9e7f2;background:linear-gradient(180deg,#fff,#fbfdff);color:var(--blue);font:800 1.78rem "Baloo Bhaijaan 2",sans-serif;cursor:pointer;box-shadow:0 9px 18px rgba(34,89,125,.06);display:grid;place-items:center;padding:12px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;animation:listenFloat 3.2s ease-in-out infinite;animation-delay:var(--float-delay)}
.listen-choice span{position:relative;z-index:1}
.listen-choice em{position:absolute;top:12px;left:14px;font-style:normal;color:#d5e7f8;font-size:1.1rem;transition:color .18s ease,transform .18s ease}
.listen-choice:hover{transform:translateY(-3px);box-shadow:0 12px 22px rgba(34,89,125,.1);border-color:#bcd8ef}
.listen-choice:disabled{cursor:default}
.listen-choice.correct{background:#e5f6e2;color:#347b39;border-color:#79c36f;box-shadow:0 10px 18px rgba(81,171,87,.13)}
.listen-choice.wrong{background:#fde7e5;color:#a73e39;border-color:#ed7b73;box-shadow:0 10px 18px rgba(211,103,94,.11)}
.listen-choice.captured{animation:listenCaptureShrink .55s ease forwards!important}
.listen-choice.correct em{color:#80c776;transform:scale(1.18)}
.listen-choice.wrong em{color:#ed7b73;transform:rotate(-10deg)}
.listen-capture-ghost{position:fixed;z-index:9999;display:grid;place-items:center;border-radius:24px;border:1px solid #79c36f;background:#e5f6e2;color:#347b39;font:800 1.45rem "Baloo Bhaijaan 2",sans-serif;box-shadow:0 10px 20px rgba(81,171,87,.16);transition:transform .56s cubic-bezier(.2,.8,.25,1),opacity .56s ease;pointer-events:none}
@keyframes listenFloat{0%,100%{transform:translate(var(--float-x),var(--float-y)) rotate(-.3deg)}50%{transform:translate(calc(var(--float-x) * -1),calc(var(--float-y) - 8px)) rotate(.45deg)}}
@keyframes listenCaptureShrink{45%{transform:scale(1.06) translateY(-8px)}100%{transform:scale(.76) translateY(14px);opacity:.28}}

/* سباق الأصوات */

.race-stage{display:grid;gap:20px;background:linear-gradient(180deg,#fff,#f8f5ff)}.race-scoreboard{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:18px}.race-scoreboard small{color:#85749e;font-weight:800}.race-scoreboard strong{display:block;color:var(--blue)}.race-track{padding:15px 18px 20px;border-radius:24px;background:#fff;border:1px solid #e4def2}.race-start{display:block;color:#806ba1;font-size:.82rem;font-weight:800;margin-bottom:8px}.race-lane{position:relative;height:84px;border-radius:18px;background:repeating-linear-gradient(90deg,#f5f0ff 0,#f5f0ff 52px,#fff 52px,#fff 104px);border-bottom:7px solid #6a50bd}.race-lane::after{content:"";position:absolute;inset:12px 32px auto auto;width:3px;height:58px;background:#cfc3ec}.race-lane>i{position:absolute;inset-inline-start:0;bottom:10px;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#6a50bd;color:#fff;transition:inset-inline-start .5s ease;box-shadow:0 7px 15px rgba(106,80,189,.22)}.race-lane>i svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2.4}.race-lane>b{position:absolute;left:7px;bottom:17px;font-size:2rem}.race-question{display:grid;gap:14px;justify-items:center}.race-question p{margin:0;color:#6e7f8f;font-weight:750}.race-options{width:min(720px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.race-choice{min-height:100px;border-radius:23px;border:1px solid #ddd7ec;background:#fff;color:#6a50bd;font:800 2.35rem "Baloo Bhaijaan 2",sans-serif;cursor:pointer}.race-choice.correct{background:#e6f6e3;color:#347b39;border-color:#80c776}.race-choice.wrong{background:#fde7e5;color:#a73e39;border-color:#ed7b73}

/* بيت الحرف */
.house-stage{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(300px,1.1fr);gap:22px;align-items:center;background:radial-gradient(circle at 12% 10%,rgba(232,95,134,.1),transparent 22%),#fff}.house-stage>#houseProgress{grid-column:1/-1}.letter-house{filter:drop-shadow(0 15px 22px rgba(123,62,89,.10));}.letter-house-roof{height:150px;display:grid;place-items:center;align-content:end;padding-bottom:26px;background:#e85f86;clip-path:polygon(50% 0,100% 68%,91% 68%,91% 100%,9% 100%,9% 68%,0 68%);color:#fff}.letter-house-roof span{font:800 4.8rem "Baloo Bhaijaan 2",sans-serif;line-height:.72}.letter-house-roof small{font-weight:800}.letter-house-body{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:18px;background:#fff6f9;border:1px solid #f1d7df;border-top:0;border-radius:0 0 28px 28px}.letter-house-body button{min-height:110px;display:grid;place-items:center;align-content:center;gap:6px;border-radius:19px;border:1px solid #efd7df;background:#fff;color:#9d4964;font-weight:800;cursor:pointer}.letter-house-body button i{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:#fff0f5;font-style:normal}.letter-house-body button.correct{background:#e7f6e4;color:#347b39;border-color:#82c878}.letter-house-body button.wrong{background:#fde7e5;color:#a73e39;border-color:#ed7b73}.house-word-card{min-height:320px;display:grid;place-items:center;align-content:center;gap:9px;text-align:center;border-radius:30px;background:linear-gradient(145deg,#fff,#fff5f8);border:1px solid #efdfe5}.house-word-card small{color:#8d6472;font-weight:800}.house-word-card strong{font:800 clamp(3rem,7vw,5.4rem) "Baloo Bhaijaan 2",sans-serif;color:var(--blue);line-height:1.5}.house-word-card p{margin:0;color:#758693;font-weight:750}

/* قطار الكلمات */
.train-stage{display:grid;gap:20px;background:linear-gradient(180deg,#fff,#fffaf2)}.train-mission{padding:17px 20px;border-radius:22px;background:#fff7e9;border:1px solid #eed5ae}.train-mission span{display:inline-block;padding:4px 9px;border-radius:999px;background:#f29a3f;color:#fff;font-weight:800;font-size:.82rem}.train-mission strong{display:block;margin-top:6px;color:var(--blue);font-size:1.25rem}.train-mission small{color:#806c50;font-weight:700}.word-train{direction:ltr;display:grid;grid-template-columns:140px repeat(3,minmax(150px,1fr));gap:8px;align-items:end;padding:25px 12px 13px;overflow:hidden}.train-engine,.train-car{position:relative;height:112px;background:#f29a3f;border-radius:24px 24px 15px 15px;border:5px solid #fff;box-shadow:0 10px 20px rgba(137,87,28,.12);display:grid;place-items:center}.train-engine::before{content:"";position:absolute;top:-28px;left:26px;width:37px;height:32px;border-radius:8px 8px 0 0;background:#536f88}.train-engine span{width:62px;height:62px;display:grid;place-items:center;border-radius:18px;background:#fff;color:#e6872e;font:800 3rem "Baloo Bhaijaan 2",sans-serif}.train-engine i,.train-car i{position:absolute;bottom:-18px;width:34px;height:34px;border-radius:50%;background:#536f88;border:6px solid #dfe7ed}.train-engine i{right:24px}.train-car i:first-of-type{right:23px}.train-car i:last-of-type{left:23px}.train-car{background:#fff4de;border-color:#f2c27f}.train-car span{direction:rtl;color:#a46920;font:800 1.45rem "Baloo Bhaijaan 2",sans-serif;text-align:center;padding:5px}.word-train.depart{animation:trainDepart .8s ease-in forwards}@keyframes trainDepart{to{transform:translateX(-35px)}}.train-station{display:grid;gap:13px;padding:17px;border-radius:25px;background:#fff;border:1px solid #eee0c9}.train-word-bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.train-word-bank button{min-height:65px;border-radius:17px;border:1px solid #ecd7b8;background:#fff;color:#95601d;font:800 1.3rem "Baloo Bhaijaan 2",sans-serif;cursor:pointer}.train-word-bank button.correct{background:#e6f6e3;color:#347b39;border-color:#80c776;opacity:.55}.train-word-bank button.wrong{background:#fde7e5;color:#a73e39;border-color:#ed7b73}

/* ذاكرة الصوت والكلمة */
.memory-stage{display:grid;gap:18px;background:linear-gradient(180deg,#fff,#f4fcf3)}.memory-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 130px 130px;gap:10px;align-items:center;padding:15px 18px;border-radius:22px;background:#fff;border:1px solid #dcebd9}.memory-dashboard small,.memory-dashboard span{color:#6d826b;font-weight:750}.memory-dashboard strong{display:block;color:var(--blue);font-size:1.2rem}.memory-dashboard>div:not(:first-child){display:grid;place-items:center;padding:8px;border-radius:15px;background:#f0f8ee}.memory-dashboard b{color:#3e8245}.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.memory-card{position:relative;min-height:145px;border:0;border-radius:22px;background:#4ca65a;color:#fff;cursor:pointer;transform-style:preserve-3d;transition:transform .35s ease,background .25s ease;box-shadow:0 9px 20px rgba(55,113,63,.13)}.memory-back,.memory-front{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border-radius:inherit}.memory-back{font-size:2rem;font-weight:900}.memory-front{padding:10px;background:#fff;color:#397840;border:1px solid #cfe5cb;transform:rotateY(180deg);font:800 1.55rem "Baloo Bhaijaan 2",sans-serif}.memory-front svg{width:38px;height:38px;stroke:currentColor;fill:none;stroke-width:2}.memory-front small{font:800 .82rem "Tajawal",sans-serif}.memory-card.revealed,.memory-card.matched{transform:rotateY(180deg)}.memory-card.matched .memory-front{background:#e6f6e3;border-color:#7dc675;box-shadow:inset 0 0 0 3px #7dc675}

@media(max-width:900px){.games-hero{grid-template-columns:minmax(0,1fr) 220px}.games-hero-house{width:205px}.game-card{grid-template-columns:64px minmax(0,1fr) auto}.hunter-field{grid-template-columns:repeat(2,minmax(0,1fr))}.house-stage{grid-template-columns:1fr}.house-stage>#houseProgress{grid-column:auto}.word-train{grid-template-columns:110px repeat(3,minmax(130px,1fr));overflow:auto}.memory-grid{grid-template-columns:repeat(4,minmax(110px,1fr));}}
@media(max-width:760px){.games-hero{grid-template-columns:1fr;padding:24px}.games-hero-house{display:none}.games-grid{grid-template-columns:1fr}.games-section-head{align-items:flex-start;flex-direction:column}.game-title-row{align-items:flex-start}.game-stage{padding:16px;min-height:470px}.hunter-mission{grid-template-columns:78px minmax(0,1fr)}.hunter-target-ring{width:72px;height:72px;border-width:8px}.hunter-target-ring span{font-size:3.3rem}.hunter-counter{grid-column:1/-1;width:100%;height:auto;display:flex;justify-content:center;gap:7px;padding:8px}.hunter-counter span{margin:0}.hunter-bag{align-items:flex-start;flex-direction:column}.hunter-bag div{width:100%}.listen-stage-head{grid-template-columns:1fr}.listen-arena{grid-template-columns:1fr}.listen-console-ring{min-height:220px}.race-scoreboard{grid-template-columns:1fr}.house-word-card{min-height:230px}.word-train{grid-template-columns:100px repeat(3,145px)}.train-word-bank{grid-template-columns:repeat(2,minmax(0,1fr))}.memory-dashboard{grid-template-columns:1fr 1fr}.memory-dashboard>div:first-child{grid-column:1/-1}.memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.memory-card{min-height:120px}}
@media(max-width:520px){.games-hero{padding:20px;border-radius:25px}.game-card{min-height:172px;padding:17px;grid-template-columns:58px minmax(0,1fr) 34px}.game-card-icon{width:56px;height:56px;border-radius:18px}.game-card-icon svg{width:32px;height:32px}.game-card-copy strong{font-size:1.2rem}.game-card-score{grid-column:1/3}.game-card-arrow{width:34px;height:34px}.game-title-row{padding:14px}.game-title-icon{width:52px;height:52px;flex-basis:52px}.game-title-icon svg{width:32px;height:32px}.hunter-field{grid-template-columns:repeat(2,minmax(0,1fr))}.hunter-word{min-height:76px;font-size:1.35rem}.hunter-bag div{grid-template-columns:repeat(2,1fr)}.listen-stage-head{grid-template-columns:1fr}.listen-captured-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.listen-options{grid-template-columns:1fr}.listen-choice{min-height:84px;font-size:1.55rem}.race-options{grid-template-columns:repeat(3,1fr)}.race-choice{min-height:82px;font-size:1.8rem}.letter-house-body{grid-template-columns:1fr;}.letter-house-body button{min-height:72px}.train-word-bank{grid-template-columns:repeat(2,1fr)}.memory-grid{gap:9px}.memory-card{min-height:108px}.memory-front{font-size:1.25rem}}

/* v5.7.55 — ألعاب كل حرف: مؤقت + أصوات + حركة + متابعة المعلم */
.games-letter-picker .game-letter-pick {
  width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
  background:#fff;color:var(--letter-chip);border:1px solid color-mix(in srgb,var(--letter-chip) 30%,#e3ebf1);
  font:800 1.5rem "Baloo Bhaijaan 2",sans-serif;cursor:pointer;box-shadow:0 6px 14px rgba(24,75,159,.06);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.games-letter-picker .game-letter-pick:hover { transform:translateY(-2px); }
.games-letter-picker .game-letter-pick.active {
  background:var(--letter-chip);color:#fff;box-shadow:0 9px 18px color-mix(in srgb,var(--letter-chip) 24%,transparent);
}
.game-letter-focus {
  width:48px;height:48px;display:grid;place-items:center;border-radius:15px!important;
  background:var(--review-letter-color)!important;color:#fff!important;font:800 2rem "Baloo Bhaijaan 2",sans-serif!important;
  padding:0!important;box-shadow:0 8px 17px color-mix(in srgb,var(--review-letter-color) 22%,transparent);
}
.game-live-meta { display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end; }
.game-review-letter,.game-timer {
  min-height:42px;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:14px;
  background:#fff;border:1px solid #dce8f0;color:#63788a;font-weight:800;box-shadow:0 6px 14px rgba(34,89,125,.05);
}
.game-review-letter b { color:var(--review-letter-color);font:800 1.45rem "Baloo Bhaijaan 2",sans-serif;line-height:1; }
.game-timer b { color:var(--game-color);font-variant-numeric:tabular-nums;direction:ltr; }
.game-result-time { width:fit-content;margin:9px auto;display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:#eef7ff;color:#687d8d;font-weight:800; }
.game-result-time b { color:var(--blue);direction:ltr; }

.game-stage { overflow:hidden; }
.game-motion-sky,.train-sky { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.game-motion-sky i,.train-sky i { position:absolute;border-radius:50%;opacity:.55;animation:gameDrift 5.8s ease-in-out infinite; }
.game-motion-sky i:nth-child(1){width:18px;height:18px;background:#ffd66d;top:18%;left:8%}
.game-motion-sky i:nth-child(2){width:13px;height:13px;background:#ef8a86;top:56%;left:3%;animation-delay:.8s}
.game-motion-sky i:nth-child(3){width:16px;height:16px;background:#8fd5ee;top:23%;right:7%;animation-delay:1.4s}
.game-motion-sky i:nth-child(4){width:11px;height:11px;background:#9fd696;bottom:14%;right:12%;animation-delay:2.1s}
.train-sky i { width:62px;height:24px;background:#fff;border:1px solid #f2dfc2;border-radius:999px;filter:blur(.1px); }
.train-sky i:nth-child(1){top:25%;right:9%;animation-duration:7s}.train-sky i:nth-child(2){top:38%;right:38%;animation-delay:1.2s}.train-sky i:nth-child(3){top:18%;left:9%;animation-delay:2s}
@keyframes gameDrift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(10px,-8px)} }

.hunter-word { --float-x:0px; }
@keyframes hunterFloat{0%,100%{transform:translate(var(--float-x),0) rotate(-.4deg)}50%{transform:translate(calc(var(--float-x) * -1),-7px) rotate(.4deg)}}
.hunter-word.caught { animation:gameCatchFly .48s ease forwards!important; }
@keyframes gameCatchFly { 50%{transform:scale(1.08) translateY(-9px);opacity:1} 100%{transform:scale(.7) translateY(28px);opacity:.38} }

.pop-correct { animation:gameCorrectPop .42s ease both!important; }
.shake-wrong { animation:gameWrongShake .34s linear 2!important; }
@keyframes gameCorrectPop { 0%{transform:scale(1)}45%{transform:scale(1.08) rotate(-1deg)}100%{transform:scale(1)} }
@keyframes gameWrongShake { 20%{transform:translateX(-7px) rotate(-1deg)}60%{transform:translateX(7px) rotate(1deg)}100%{transform:translateX(0)} }

.listen-wave i { animation-play-state:paused;opacity:.58; }
.listen-wave.playing i { animation-play-state:running;opacity:1; }
.listen-main-btn:active,.race-listen-btn:active { transform:scale(.97); }
.race-lane>i.race-boost { animation:raceBoost .52s ease; }
.race-track.track-miss { animation:gameWrongShake .32s linear 2; }
@keyframes raceBoost { 0%{transform:translateY(0)}45%{transform:translateY(-12px) rotate(-6deg)}100%{transform:translateY(0)} }
.room-bounce { animation:roomBounce .55s ease!important; }
.house-word-card.house-success { animation:houseWordSuccess .7s ease; }
@keyframes roomBounce { 45%{transform:scale(1.06) translateY(-4px)}100%{transform:scale(1)} }
@keyframes houseWordSuccess { 35%{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 30px rgba(232,95,134,.12)}100%{transform:none} }
.train-car.loaded { animation:carLoad .48s ease; }
.word-train.depart { animation:trainDepart 1.35s cubic-bezier(.2,.8,.25,1) forwards; }
.train-car.loaded i,.word-train.depart .train-engine i,.word-train.depart .train-car i { animation:wheelSpin .35s linear infinite; }
@keyframes carLoad { 45%{transform:translateY(-8px) rotate(-1deg)}100%{transform:none} }
@keyframes wheelSpin { to{transform:rotate(360deg)} }
@keyframes trainDepart { 0%{transform:translateX(0)}30%{transform:translateX(12px)}100%{transform:translateX(-115%)} }
.memory-card.memory-miss { animation:memoryMiss .35s linear 2; }
.memory-card.memory-match-pop .memory-front { animation:memoryMatch .55s ease; }
@keyframes memoryMiss { 25%{transform:rotateY(180deg) translateX(-5px)}75%{transform:rotateY(180deg) translateX(5px)} }
@keyframes memoryMatch { 45%{box-shadow:inset 0 0 0 4px #7dc675,0 0 0 8px rgba(125,198,117,.12)}100%{box-shadow:inset 0 0 0 3px #7dc675} }

.game-finish-card { position:relative;overflow:hidden;animation:finishRise .5s ease; }
.game-finish-spark { animation:finishStar 1.1s ease-in-out infinite; }
.game-confetti { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.game-confetti i { position:absolute;left:var(--x);top:-18px;width:9px;height:15px;border-radius:3px;background:hsl(calc(var(--i) * 37deg) 72% 60%);animation:confettiFall 1.9s ease-in var(--d) infinite;opacity:.9; }
@keyframes finishRise { from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1} }
@keyframes finishStar { 50%{transform:scale(1.13) rotate(6deg)} }
@keyframes confettiFall { to{transform:translateY(330px) rotate(520deg);opacity:.15} }

.teacher-games-panel { margin-top:18px; }
.teacher-games-head { display:flex;align-items:center;justify-content:space-between;gap:16px; }
.teacher-game-live-dot { display:inline-flex;align-items:center;gap:7px;color:#5f7484;font-weight:800;font-size:.9rem; }
.teacher-game-live-dot i { width:10px;height:10px;border-radius:50%;background:#4ca65a;box-shadow:0 0 0 5px rgba(76,166,90,.11); }
.teacher-game-filters { display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:16px 0 12px; }
.teacher-game-filters label { display:grid;gap:5px;color:var(--muted);font-weight:700;font-size:.9rem;min-width:180px; }
.teacher-game-filters select { width:100%;border:1px solid #cfe0ec;border-radius:14px;background:#fbfdff;color:var(--ink);padding:11px 12px;font:800 .96rem "Tajawal",sans-serif; }
.teacher-game-summary { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px; }
.teacher-game-summary span { padding:8px 11px;border-radius:999px;background:#f4f8fb;border:1px solid #e1eaf1;color:#667a89;font-weight:750; }
.teacher-game-summary span b { color:var(--blue); }
.teacher-game-summary .entered { background:#eef6ff; }.teacher-game-summary .completed { background:#eef9ef; }.teacher-game-summary .all { background:#fff7df; }
.teacher-games-table .no-game-activity { opacity:.62; }
.game-track-status { display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:6px 9px;border-radius:999px;font-weight:800;font-size:.84rem; }
.game-track-status.no { background:#f1f4f6;color:#6d7e89; }.game-track-status.yes { background:#edf5ff;color:#2f74c9; }.game-track-status.partial { background:#fff4dc;color:#8a6413; }.game-track-status.all { background:#e8f7e5;color:#347b39; }

@media(max-width:760px){
  .game-topbar{align-items:flex-start;flex-direction:column}.game-live-meta{width:100%;justify-content:space-between}.game-review-letter,.game-timer{flex:1;justify-content:center}.teacher-games-head{align-items:flex-start;flex-direction:column}.teacher-game-filters{align-items:stretch;flex-direction:column}.teacher-game-filters label{min-width:0;width:100%}
}
@media (prefers-reduced-motion: reduce) {
  .hunter-word,.game-motion-sky i,.train-sky i,.game-confetti i,.game-finish-spark,.race-lane>i,.word-train,.memory-card { animation:none!important;transition:none!important; }
}


/* v5.7.55 — refinement of per-letter games */
/* Larger, clearer instructional and muted text inside the games experience. */
.games-hero p,
.games-section-head p,
.game-title-row p,
.game-card-copy small,
.game-card-score small,
.hunter-mission p,
.listen-console small,
.race-question p,
.house-word-card small,
.house-word-card p,
.train-mission small,
.memory-dashboard small,
.memory-dashboard span,
.memory-row-title small,
.game-feedback-line,
.game-finish-card small {
  color:#617688;
  font-weight:750;
  line-height:1.85;
}
.games-section-head p,.game-title-row p,.hunter-mission p,.race-question p,.house-word-card p,.game-feedback-line { font-size:1.04rem; }
.game-card-copy small,.game-card-score small,.listen-console small,.train-mission small,.memory-row-title small,.game-finish-card small { font-size:.96rem; }

/* بيت الحرف: يبقى الحرف وحده في مثلث البيت. */
.letter-house-roof { align-content:end; padding-bottom:30px; }
.letter-house-roof span { font-size:5.35rem; }

/* سباق الأصوات: ست مراحل ظاهرة تمثل الأصوات القصيرة والطويلة كلها. */
.race-stage-dots { display:flex; gap:7px; margin-top:10px; direction:rtl; }
.race-stage-dots i { width:29px;height:29px;display:grid;place-items:center;border-radius:10px;background:#f1edfb;color:#7f6ab4;border:1px solid #ddd4f4;font-style:normal;transition:transform .3s ease,background .3s ease,color .3s ease; }
.race-stage-dots i span { font-weight:900;font-size:.82rem; }
.race-stage-dots i.done { background:#e6f6e3;color:#347b39;border-color:#8dcc84;transform:scale(1.08); }

/* ذاكرة الصوت والكلمة: خمسة أصوات في الأعلى وخمس كلمات في الأسفل. */
.memory-match-board { display:grid;gap:14px; }
.memory-match-section { padding:16px;border-radius:24px;background:#fff;border:1px solid #dcebd9;box-shadow:0 9px 20px rgba(55,113,63,.05); }
.memory-row-title { display:grid;grid-template-columns:44px auto minmax(0,1fr);align-items:center;gap:9px;margin-bottom:12px; }
.memory-row-title>span:first-child { width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eef8ec;color:#3f8246;font-weight:900; }
.memory-row-title>span svg { width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2; }
.memory-row-title strong { color:var(--blue);font-size:1.15rem; }
.memory-row-title small { text-align:left; }
.memory-audio-row,.memory-word-row { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px; }
.memory-audio-card,.memory-word-card { min-height:102px;border-radius:20px;border:1px solid #cfe5cb;background:#fff;color:#397840;cursor:pointer;box-shadow:0 8px 16px rgba(55,113,63,.06);transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease; }
.memory-audio-card { display:grid;place-items:center;align-content:center;gap:4px;background:linear-gradient(180deg,#f7fcf6,#fff); }
.memory-audio-card>span svg { width:31px;height:31px;stroke:currentColor;fill:none;stroke-width:2; }
.memory-audio-card b { width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:#eaf6e7;color:#3d7c43;font-size:.8rem; }
.memory-audio-card small { color:#658066;font-weight:800; }
.memory-word-card { padding:10px;font:800 1.52rem "Baloo Bhaijaan 2",sans-serif;color:var(--blue);line-height:1.55; }
.memory-audio-card:hover,.memory-word-card:hover { transform:translateY(-3px);box-shadow:0 12px 22px rgba(55,113,63,.1); }
.memory-audio-card.active { background:#eaf7ff;border-color:#69a8d9;color:#2f74c9;box-shadow:inset 0 0 0 2px #69a8d9,0 10px 20px rgba(47,116,201,.09);animation:memoryAudioPulse .8s ease-in-out infinite alternate; }
.memory-audio-card.matched,.memory-word-card.matched { background:#e5f6e2;border-color:#78c270;color:#2f7d35;box-shadow:inset 0 0 0 2px #78c270; }
.memory-audio-card.memory-audio-miss,.memory-word-card.memory-word-miss { background:#fde7e5;border-color:#ec7c74;color:#a73e39;animation:gameWrongShake .32s linear 2; }
.memory-word-card.memory-word-nudge { animation:gameWrongShake .28s linear 1; }
.memory-match-divider { position:relative;height:24px;display:grid;place-items:center; }
.memory-match-divider::before { content:"";position:absolute;left:2%;right:2%;height:2px;background:linear-gradient(90deg,transparent,#cfe1cc,transparent); }
.memory-match-divider span { position:relative;padding:3px 13px;border-radius:999px;background:#eef8ec;color:#4c8050;font-weight:800;font-size:.85rem; }
@keyframes memoryAudioPulse { to{transform:translateY(-3px) scale(1.02)} }

/* احتفال إكمال الألعاب الست للحرف. */
.letter-games-celebration { position:fixed;z-index:250;inset:0;display:grid;place-items:center;padding:22px;background:rgba(23,51,75,.22);backdrop-filter:blur(3px);animation:letterPartyFade .28s ease; }
.letter-games-celebration.leaving { opacity:0;transition:opacity .35s ease; }
.letter-games-party { position:absolute;inset:0;overflow:hidden;pointer-events:none; }
.letter-games-party i { position:absolute;left:var(--x);top:-32px;width:11px;height:22px;border-radius:4px;background:hsl(calc(var(--i)*43deg) 75% 59%);transform:rotate(var(--r));animation:letterPartyFall 2.45s cubic-bezier(.2,.75,.3,1) var(--d) forwards; }
.letter-games-celebration-card { position:relative;z-index:2;width:min(520px,92vw);display:grid;justify-items:center;gap:7px;padding:30px 24px;border-radius:34px;background:linear-gradient(145deg,#fff8dc,#fff,#eff9ff);border:3px solid #fff;box-shadow:0 25px 65px rgba(24,75,159,.22);text-align:center;animation:letterPartyPop .58s cubic-bezier(.2,1.2,.3,1); }
.letter-games-crown { width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:#ffc94a;color:#795609;font-size:2.2rem;box-shadow:0 10px 20px rgba(227,165,30,.2); }
.letter-games-celebration-card small { color:#7b6a37;font-weight:850;font-size:1rem; }
.letter-games-celebration-card strong { color:var(--blue);font-size:clamp(1.45rem,4vw,2rem);line-height:1.55; }
.letter-games-celebration-letter { width:104px;height:104px;display:grid;place-items:center;border-radius:32px;background:#fff;color:var(--review-letter-color,#ef625e);font:800 5rem "Baloo Bhaijaan 2",sans-serif;box-shadow:inset 0 0 0 2px #eef1f4,0 12px 26px rgba(34,89,125,.1); }
.letter-games-screen-shake .app-shell { animation:letterScreenShake .62s ease; }
@keyframes letterPartyFall { to{transform:translateY(105vh) rotate(620deg);opacity:.35} }
@keyframes letterPartyPop { 0%{transform:scale(.72) rotate(-2deg);opacity:0}65%{transform:scale(1.04) rotate(1deg)}100%{transform:scale(1);opacity:1} }
@keyframes letterPartyFade { from{opacity:0}to{opacity:1} }
@keyframes letterScreenShake { 0%,100%{transform:none}18%{transform:translateX(-5px) rotate(-.2deg)}36%{transform:translateX(6px) rotate(.2deg)}54%{transform:translateX(-4px)}72%{transform:translateX(3px)} }

/* Teacher portal: emphasize students who have completed all six games. */
.teacher-games-table tr.all-games-complete td { background:#f2fbf0; }
.teacher-games-table tr.all-games-complete td:first-child { color:#347b39; }

@media(max-width:760px){
  .memory-row-title { grid-template-columns:42px minmax(0,1fr); }
  .memory-row-title small { grid-column:1/-1;text-align:right;margin-top:-4px; }
  .memory-audio-row,.memory-word-row { grid-template-columns:repeat(5,minmax(72px,1fr));overflow-x:auto;padding-bottom:5px; }
  .memory-audio-card,.memory-word-card { min-height:94px; }
  .memory-word-card { font-size:1.3rem; }
}
@media(max-width:520px){
  .games-section-head p,.game-title-row p,.hunter-mission p,.race-question p,.house-word-card p,.game-feedback-line { font-size:1rem; }
  .memory-audio-row,.memory-word-row { grid-template-columns:repeat(5,82px); }
  .letter-house-roof span { font-size:5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .letter-games-party i,.letter-games-celebration-card,.letter-games-screen-shake .app-shell,.memory-audio-card.active { animation:none!important; }
}


/* v5.7.55 — طابق الصورة والكلمة: ذاكرة بصرية حقيقية من 8 بطاقات */
.picture-memory-stage { gap:20px; background:radial-gradient(circle at 88% 8%,rgba(76,166,90,.11),transparent 24%),linear-gradient(180deg,#fff,#f4fcf3); }
.picture-memory-dashboard p { margin:5px 0 0; color:#748775; font-weight:750; font-size:.98rem; }
.picture-memory-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; perspective:1200px; }
.picture-memory-card { position:relative; min-height:158px; padding:0; border:0; border-radius:24px; background:transparent; cursor:pointer; perspective:1000px; }
.picture-memory-inner { position:absolute; inset:0; display:block; border-radius:inherit; transform-style:preserve-3d; transition:transform .46s cubic-bezier(.2,.75,.25,1); box-shadow:0 12px 24px rgba(55,113,63,.11); }
.picture-memory-card.revealed .picture-memory-inner,
.picture-memory-card.matched .picture-memory-inner { transform:rotateY(180deg); }
.picture-memory-back,
.picture-memory-front { position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.picture-memory-back { grid-template-columns:repeat(3,auto); gap:7px; align-content:center; background:linear-gradient(145deg,#4ca65a,#3f914c); border:4px solid #eaf7e8; color:#fff; overflow:hidden; }
.picture-memory-back::before,.picture-memory-back::after { content:""; position:absolute; width:95px; height:95px; border-radius:50%; background:rgba(255,255,255,.08); }
.picture-memory-back::before { top:-38px; right:-30px; }.picture-memory-back::after { bottom:-42px; left:-28px; }
.picture-memory-back b { position:relative; z-index:1; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.16); font:800 1.55rem "Baloo Bhaijaan 2",sans-serif; }
.picture-memory-front { transform:rotateY(180deg); padding:12px; background:#fff; border:2px solid #cfe5cb; color:#397840; }
.picture-memory-front.is-picture { background:linear-gradient(145deg,#fff,#f2fbf0); }
.picture-memory-front.is-word strong { font:800 clamp(1.55rem,3.1vw,2.35rem) "Baloo Bhaijaan 2",sans-serif; color:var(--blue); line-height:1.5; }
.picture-memory-visual { width:104px; height:104px; display:grid; place-items:center; border-radius:30px; background:#f4fbf2; box-shadow:inset 0 0 0 2px #dbeed7; font-size:4.8rem; line-height:1; filter:drop-shadow(0 5px 5px rgba(30,70,35,.08)); }
.pm-scene{width:100%;height:100%;display:grid;place-items:center;position:relative;line-height:1;}
.pm-scene span{position:absolute;display:block;}
.pm-oil-bottle{width:100%;height:100%;display:grid;place-items:center;}
.pm-oil-bottle svg{width:86px;height:86px;display:block;filter:drop-shadow(0 6px 8px rgba(90,74,20,.12));}
.pm-sea span:first-child{font-size:4.5rem;bottom:10px;left:50%;transform:translateX(-50%);}
.pm-sea span:last-child{font-size:2.15rem;top:14px;right:14px;}
.pm-mountain span:first-child{font-size:4.4rem;bottom:12px;left:50%;transform:translateX(-50%);}
.pm-mountain span:last-child{font-size:1.7rem;top:14px;right:16px;}
.pm-paper span:first-child{font-size:4.1rem;left:14px;top:24px;transform:rotate(-8deg);}
.pm-paper span:last-child{font-size:2.3rem;right:12px;bottom:18px;transform:rotate(8deg);opacity:.92;}
.picture-memory-card:hover:not(.matched) .picture-memory-inner { box-shadow:0 16px 30px rgba(55,113,63,.16); }
.picture-memory-card.matched .picture-memory-front { background:#e5f6e2; border-color:#78c270; box-shadow:inset 0 0 0 3px #78c270; }
.picture-memory-card.memory-miss .picture-memory-front { background:#fde7e5; border-color:#ec7c74; box-shadow:inset 0 0 0 3px #ec7c74; }
.picture-memory-card.memory-miss { animation:gameWrongShake .28s linear 2; }
.picture-memory-card.memory-match-pop { animation:memoryMatch .55s ease; }
@media(max-width:760px){
  .picture-memory-board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .picture-memory-card { min-height:132px; }
  .picture-memory-visual { width:88px; height:88px; font-size:4rem; border-radius:25px; }
  .pm-sea span:first-child,.pm-mountain span:first-child{font-size:3.8rem;}
  .pm-sea span:last-child{font-size:1.85rem;top:10px;right:10px;}
  .pm-mountain span:last-child{font-size:1.45rem;top:10px;right:12px;}
  .pm-paper span:first-child{font-size:3.45rem;left:10px;top:20px;}
  .pm-paper span:last-child{font-size:2rem;right:8px;bottom:14px;}
}
@media(max-width:430px){
  .picture-memory-card { min-height:118px; }
  .picture-memory-front.is-word strong { font-size:1.5rem; }
  .picture-memory-visual { width:78px; height:78px; font-size:3.55rem; }
  .pm-sea span:first-child,.pm-mountain span:first-child{font-size:3.35rem;}
  .pm-sea span:last-child{font-size:1.55rem;top:9px;right:9px;}
  .pm-mountain span:last-child{font-size:1.2rem;top:9px;right:10px;}
  .pm-paper span:first-child{font-size:3rem;left:8px;top:17px;}
  .pm-paper span:last-child{font-size:1.7rem;right:7px;bottom:11px;}
  .picture-memory-back b { width:31px; height:31px; font-size:1.25rem; }
}

/* v5.8.0 — المنهج الكامل، المهارات، وإتاحة الصف */
.journey-current-status {
  margin:0 0 18px; padding:14px 16px; border:1px solid #dce9f3; border-radius:20px;
  background:#fff; display:flex; align-items:center; justify-content:space-between; gap:14px;
  box-shadow:0 8px 22px rgba(32,81,116,.07);
}
.journey-current-status div { min-width:0; display:grid; gap:3px; }
.journey-current-status small { color:var(--muted); font-weight:700; }
.journey-current-status strong { color:var(--blue); font-size:1.04rem; line-height:1.65; }
.journey-current-status > span { flex:0 0 auto; min-width:58px; text-align:center; padding:8px 10px; border-radius:14px; background:#eef7ff; color:var(--blue); font-weight:800; }
.journey-current-status.coming-soon { background:#fffaf0; border-color:#f0dfae; }
.curriculum-parts { display:grid; gap:22px; }
.curriculum-part { min-width:0; padding:18px; border:1px solid #dfeaf2; border-radius:26px; background:rgba(255,255,255,.82); box-shadow:0 10px 28px rgba(32,81,116,.06); }
.curriculum-part-head,.skills-part-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.curriculum-part-head h3,.skills-part-head h3 { margin:0; color:var(--blue); }
.curriculum-part-head span,.skills-part-head span { padding:6px 10px; border-radius:999px; background:#eef7ff; color:#567082; font-weight:800; white-space:nowrap; }
.curriculum-units { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.curriculum-unit-card { min-width:0; border:1px solid #dfebf3; border-radius:21px; background:#fff; padding:14px; }
.curriculum-unit-card.locked { background:#f7f9fb; opacity:.9; }
.curriculum-unit-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; margin-bottom:11px; }
.curriculum-unit-card-head h4 { margin:0; color:var(--ink); font-size:1.05rem; }
.curriculum-unit-card-head small { color:var(--muted); font-weight:700; }
.curriculum-letter-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.curriculum-letter { min-width:0; min-height:60px; border:1px solid #dce8f0; border-radius:15px; background:#f8fbfd; color:#53697b; cursor:pointer; display:grid; place-items:center; align-content:center; gap:1px; padding:5px 2px; }
.curriculum-letter strong { font:800 1.45rem "Baloo Bhaijaan 2",sans-serif; color:inherit; line-height:1; }
.curriculum-letter small { font-size:.65rem; line-height:1.25; text-align:center; font-weight:750; }
.curriculum-letter.open { background:#eef8ff; border-color:#bcdced; color:var(--blue); }
.curriculum-letter.completed { background:#eff9ed; border-color:#cce8c7; color:#397b40; }
.curriculum-letter.coming-soon { background:#fffaf0; border-color:#efdfb5; color:#8b6a1f; }
.curriculum-letter.locked { cursor:default; color:#8b99a5; }
.coming-letter-card { max-width:720px; margin:22px auto; text-align:center; padding:34px 22px; border:1px solid #f0dfae; border-radius:28px; background:#fffaf0; box-shadow:var(--shadow); }
.coming-letter-card .big-letter { margin:0 auto 12px; }
.coming-letter-card h2 { color:var(--blue); margin:6px 0; }
.coming-letter-card p { color:#6f8090; line-height:1.85; font-size:1.03rem; }

.skills-parts { display:grid; gap:22px; }
.skills-part { padding:18px; border:1px solid #dfeaf2; border-radius:26px; background:#fff; box-shadow:0 10px 28px rgba(32,81,116,.06); }
.skills-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.skill-card { min-width:0; position:relative; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:start; gap:11px; padding:14px; border:1px solid #dce8f0; border-radius:19px; background:#f9fbfd; }
.skill-card.open { background:#f4fbf2; border-color:#cfe7c9; }
.skill-number { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#eaf2f8; color:var(--blue); font-weight:900; direction:ltr; }
.skill-card.open .skill-number { background:#e2f3df; color:#3f7d43; }
.skill-copy { min-width:0; }
.skill-copy h4 { margin:0 0 5px; font-size:1rem; line-height:1.65; color:var(--ink); }
.skill-copy p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.6; font-weight:650; }
.skill-state { white-space:nowrap; padding:5px 8px; border-radius:999px; background:#edf1f4; color:#7a8995; font-size:.74rem; font-weight:800; }
.skill-card.open .skill-state { background:#e4f3e1; color:#397a3f; }
.skill-video-launch {
  /* Compact poster footer: keep «مهاراتي» cards short even when every skill has a video. */
  grid-column:1/-1; position:relative; width:calc(100% + 28px); height:74px; margin:5px -14px -14px; padding:0; overflow:hidden; align-self:end;
  border:0; border-top:1px solid #d3e3ec; border-radius:0 0 18px 18px; background:#eaf2f7; cursor:pointer; box-shadow:none;
}
.skill-video-poster { width:100%; height:100%; display:block; object-fit:cover; }
.skill-video-poster-fallback { display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#1d5c9d,#4f84bd); font-size:2.2rem; }
.skill-video-launch::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,31,49,.42),rgba(10,31,49,0) 58%); pointer-events:none; }
.skill-video-play {
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); z-index:2; width:40px; height:40px; display:grid; place-items:center;
  padding-inline-start:2px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--blue); font-size:1.05rem; box-shadow:0 5px 16px rgba(13,43,65,.22);
}
.skill-video-label { position:absolute; z-index:2; right:10px; bottom:7px; color:#fff; font-weight:850; font-size:.72rem; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.skill-video-launch:hover .skill-video-play { transform:translate(-50%,-50%) scale(1.06); }
.skill-video-overlay { z-index:270; }
.skill-video-dialog { width:min(860px,100%); padding:20px; overflow:visible; }
.skill-video-dialog-head { padding-inline-end:42px; margin-bottom:12px; }
.skill-video-dialog-head > span { color:#ef625e; font-size:.8rem; font-weight:850; }
.skill-video-dialog-head h3 { margin:2px 0; color:var(--blue); font-size:1.35rem; }
.skill-video-dialog-head p { margin:0; color:var(--muted); font-size:.86rem; font-weight:700; }
.skill-video-player { display:block; width:100%; max-height:min(68vh,540px); border-radius:18px; background:#12212e; }

.class-release-panel { margin-bottom:18px; }
.class-release-head { align-items:center; }
.class-release-head .teacher-eyebrow { display:inline-block; margin-bottom:4px; }
.class-release-head h3 { margin:0; }
.class-release-head p { max-width:780px; margin:4px 0 0; color:var(--muted); line-height:1.65; }
.class-release-content { display:grid; gap:14px; }
.class-release-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.class-release-stat { padding:12px 14px; border-radius:17px; background:#f5f9fc; border:1px solid #e0eaf1; display:grid; gap:3px; }
.class-release-stat small { color:var(--muted); font-weight:700; }
.class-release-stat strong { color:var(--blue); font-size:1.15rem; }
.class-release-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.class-release-actions article { min-width:0; padding:13px; border:1px solid #dce8f0; border-radius:18px; background:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.class-release-actions article div { min-width:0; display:grid; gap:2px; }
.class-release-actions article small { color:var(--muted); font-weight:700; }
.class-release-actions article strong { color:var(--ink); line-height:1.5; }
.class-release-actions button { flex:0 0 auto; }
.class-release-skills { border-top:1px solid #e4edf3; padding-top:13px; }
.class-release-skills-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.class-release-skills-head h4 { margin:0; color:var(--blue); }
.class-release-skills-head span { color:var(--muted); font-size:.86rem; font-weight:700; }
.class-release-skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.class-release-skill { min-width:0; padding:10px 11px; border:1px solid #e0e9ef; border-radius:15px; background:#f9fbfd; display:flex; align-items:center; justify-content:space-between; gap:9px; }
.class-release-skill.open { background:#f1f9ef; border-color:#d4e8cf; }
.class-release-skill > div { min-width:0; display:grid; gap:1px; }
.class-release-skill span { font-weight:800; line-height:1.5; }
.class-release-skill small { color:var(--muted); font-size:.75rem; }
.class-release-skill b { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:#dff1db; color:#397a3f; }
.class-release-skill button { flex:0 0 auto; padding:7px 9px; font-size:.78rem; }
.student-manage-btn.curriculum { color:#6a50bd; background:#f3efff; border-color:#dcd2fa; }
.student-manage-btn.curriculum:hover { background:#eae3ff; }
.curriculum-access-dialog { width:min(660px,100%); }
.curriculum-dialog-head { padding-inline-end:40px; }
.curriculum-dialog-head > span { color:var(--purple); font-weight:850; font-size:.8rem; }
.curriculum-dialog-head h3 { margin:2px 0; color:var(--blue); }
.curriculum-dialog-head p { margin:0 0 13px; color:var(--muted); line-height:1.65; }
.curriculum-dialog-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.curriculum-dialog-summary > div { min-width:0; padding:10px; border:1px solid #e0eaf1; border-radius:14px; background:#f7fafc; display:grid; gap:3px; }
.curriculum-dialog-summary small { color:var(--muted); font-weight:700; }
.curriculum-dialog-summary strong { color:var(--ink); line-height:1.5; }
.curriculum-dialog-access { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.curriculum-dialog-access span { padding:7px 9px; border-radius:999px; background:#eef7ff; color:#5e7384; font-size:.82rem; font-weight:700; }
.curriculum-dialog-access b { color:var(--blue); }

@media (max-width:900px) {
  .curriculum-units,.skills-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .class-release-skill-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .journey-current-status { align-items:flex-start; }
  .curriculum-part,.skills-part { padding:14px; border-radius:21px; }
  .curriculum-units,.skills-grid { grid-template-columns:1fr; }
  .curriculum-letter-row { grid-template-columns:repeat(6,minmax(42px,1fr)); overflow:hidden; }
  .class-release-overview { grid-template-columns:1fr; }
  .class-release-actions { grid-template-columns:1fr; }
  .class-release-actions article { align-items:stretch; flex-direction:column; }
  .class-release-actions button { width:100%; }
  .curriculum-dialog-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .teacher-actions-col { width:250px; }
}
@media (max-width:430px) {
  .journey-current-status { padding:12px; }
  .journey-current-status strong { font-size:.96rem; }
  .curriculum-letter-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .skill-card { grid-template-columns:42px minmax(0,1fr); }
  .skill-video-launch { height:60px; }
  .skill-video-play { width:34px; height:34px; font-size:.92rem; }
  .skill-video-label { right:9px; bottom:6px; font-size:.68rem; }
  .skill-state { grid-column:2; justify-self:start; }
  .class-release-skill { align-items:stretch; flex-direction:column; }
  .class-release-skill button { width:100%; }
  .curriculum-dialog-summary { grid-template-columns:1fr 1fr; }
  .teacher-actions-col { width:220px; }
}
.curriculum-unit-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:11px; }
.curriculum-unit-head > div { min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.curriculum-unit-head h4 { margin:0; color:var(--ink); font-size:1.05rem; }
.curriculum-unit-head span { padding:4px 7px; border-radius:999px; background:#eef7ff; color:var(--blue); font-size:.72rem; font-weight:800; }
.curriculum-unit-head > small { color:var(--muted); font-weight:750; white-space:nowrap; }
.curriculum-letter-glyph { font:800 1.5rem "Baloo Bhaijaan 2",sans-serif; line-height:1; }
.curriculum-letter-state { display:block; font-size:.63rem; line-height:1.3; font-weight:750; text-align:center; }
.coming-letter-glyph { width:92px; height:92px; margin:0 auto 10px; display:grid; place-items:center; border-radius:28px; background:#fff; color:var(--blue); font:800 4.4rem "Baloo Bhaijaan 2",sans-serif; box-shadow:inset 0 0 0 2px #e6edf2; }
@media (max-width:430px) {
  .curriculum-unit-head { align-items:center; }
  .curriculum-letter { min-height:64px; }
}

/* v5.8.0 — تنظيم إدارة الطلاب ومركز المتابعة */
.nav-item .nav-gamepad { display:grid; place-items:center; width:24px; height:24px; margin:auto; }
.nav-item .nav-gamepad svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.teacher-management-grid { grid-template-columns:minmax(0,1.6fr) minmax(290px,.65fr); }
.teacher-roster-database .teacher-table { min-width:680px; }
.teacher-roster-table td:first-child,.teacher-roster-table th:first-child { width:48px; text-align:center; }
.teacher-monitoring-page { display:grid; gap:18px; }
.teacher-monitor-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:8px; border:1px solid #dfeaf2; background:#fff; border-radius:20px; box-shadow:var(--shadow); position:sticky; top:72px; z-index:8; }
.teacher-monitor-tabs button { border:0; background:#f3f8fc; color:#607486; border-radius:14px; min-height:50px; padding:10px 12px; font:800 .95rem "Tajawal",sans-serif; cursor:pointer; }
.teacher-monitor-tabs button:hover { background:#eaf4ff; color:var(--blue); }
.teacher-monitor-tabs button.active { color:#fff; background:linear-gradient(135deg,#2d6bc4,#174da7); box-shadow:0 8px 18px rgba(32,88,171,.2); }
.monitoring-section { display:grid; gap:14px; }
.monitoring-section .teacher-filters,.monitoring-section .teacher-game-filters { margin:0; }
.monitoring-report-tools { margin:0; }
.monitoring-table { min-width:760px; }
.monitor-visit,.monitor-game-state { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:6px 10px; font-weight:800; font-size:.8rem; white-space:nowrap; }
.monitor-visit.yes { color:#347b39; background:#e9f7e7; }
.monitor-visit.no { color:#6d7a84; background:#f1f3f5; }
.monitor-game-state.complete { color:#347b39; background:#e9f7e7; }
.monitor-game-state.partial { color:#7d6019; background:#fff4dc; }
.monitor-game-state.started { color:#245c9e; background:#edf5ff; }
.monitor-game-state.opened { color:#6655a5; background:#f1edff; }
.monitor-game-state.not_entered { color:#6d7a84; background:#f1f3f5; }
.teacher-tabular-report .teacher-print-head p { margin:5px auto 10px; color:#687b8c; font-size:13px; }
.teacher-tabular-report .teacher-print-counts span { background:#f3f8ff; color:#184b9f; border-color:#dceaf6; }
.rahlet-confirm-dialog .danger-confirm { background:#b6453f; border-color:#b6453f; }

@media(max-width:900px) {
  .teacher-monitor-tabs { top:64px; }
  .teacher-management-grid { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  .teacher-monitor-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); position:static; }
  .monitoring-section .teacher-filters,.monitoring-section .teacher-game-filters { display:grid; grid-template-columns:1fr; }
  .monitoring-section .teacher-filters label,.monitoring-section .teacher-game-filters label { width:100%; min-width:0; }
}
@media(max-width:430px) {
  .teacher-monitor-tabs { gap:6px; padding:6px; border-radius:16px; }
  .teacher-monitor-tabs button { min-height:46px; padding:8px 6px; font-size:.86rem; }
  .teacher-head-actions button { flex:1 1 45%; }
}
.teacher-panel { min-width:0; }
.teacher-management-grid { min-width:0; }
.teacher-management-grid > * { min-width:0; }

/* v5.8.0 teacher information architecture: students / monitoring / permissions */
.teacher-section-nav .teacher-section-active{outline:3px solid rgba(52,115,201,.14);box-shadow:0 8px 22px rgba(34,79,145,.14)}
.teacher-home-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.teacher-home-card{border:1px solid #dce8f0;background:#fff;border-radius:22px;padding:22px;text-align:right;cursor:pointer;box-shadow:var(--shadow);font-family:"Tajawal",sans-serif;transition:.2s ease}
.teacher-home-card:hover{transform:translateY(-2px);border-color:#bfd6ea}
.teacher-home-card>span{display:inline-grid;place-items:center;min-width:42px;height:42px;border-radius:14px;background:#edf5ff;color:var(--blue);font-weight:900}
.teacher-home-card h3{margin:12px 0 6px;color:var(--blue);font-size:1.3rem}
.teacher-home-card p{margin:0;color:var(--muted);line-height:1.75;font-weight:600}
.teacher-permissions-page #teacherPermissionsContent{margin-top:18px}
.teacher-permission-tabs{margin-top:18px}
.class-release-overview.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.permission-current-list{border-top:1px solid #e4edf3;margin-top:14px;padding-top:14px;display:grid;gap:10px}
.permission-current-list h4{margin:0;color:var(--blue)}
.permission-current-list>div{display:flex;gap:7px;flex-wrap:wrap}
.permission-current-list span{padding:7px 10px;border-radius:12px;background:#f4f7f9;border:1px solid #e0e8ee;color:#7a8b98;font-weight:800}
.permission-current-list span.open{background:#eef8eb;border-color:#cee6c8;color:#397b3f}
.permission-feature-action{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid #dce8f0;border-radius:18px;background:#fff;margin-top:14px}
.permission-feature-action h4{margin:0 0 4px;color:var(--blue)}
.permission-feature-action p{margin:0;color:var(--muted);line-height:1.6}
.permission-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.permission-game-card{padding:14px;border:1px solid #e0e8ee;border-radius:16px;background:#f7f9fb;display:grid;gap:4px}
.permission-game-card strong{color:var(--ink)}
.permission-game-card span{color:var(--muted);font-size:.86rem;font-weight:700}
.permission-game-card.open{background:#eef8eb;border-color:#cfe5ca}.permission-game-card.open span{color:#397b3f}
.permission-game-card.eligible{background:#eef5ff;border-color:#cfe0f4}.permission-game-card.eligible span{color:#245eaa}
.permission-note{margin-top:14px}
.voice-review-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.voice-review-selector button{border:1px solid #dce8f0;background:#fff;border-radius:18px;padding:14px;text-align:right;font-family:"Tajawal",sans-serif;cursor:pointer;display:grid;gap:3px}
.voice-review-selector button.active{border-color:#9fc4ed;background:#eef6ff;box-shadow:0 7px 18px rgba(45,107,196,.12)}
.voice-review-selector span,.voice-review-selector small{color:var(--muted);font-weight:700}.voice-review-selector strong{color:var(--blue);font-size:1rem}
@media (max-width:900px){.teacher-home-cards{grid-template-columns:1fr}.permission-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.teacher-section-nav button{flex:1 1 45%}.class-release-overview.two{grid-template-columns:1fr}.permission-feature-action{align-items:stretch;flex-direction:column}.permission-feature-action button{width:100%}.permission-game-grid,.voice-review-selector{grid-template-columns:1fr}}


/* v5.8.0 final review polish */
.teacher-section-nav .teacher-section-btn{border:2px solid #d9e7f3;background:#fff;color:#194f9c;border-radius:18px;padding:11px 17px;font:800 1rem "Tajawal",sans-serif;cursor:pointer;box-shadow:none;transition:.2s ease}
.teacher-section-nav .teacher-section-btn:hover{transform:translateY(-1px);background:#f7fbff}
.teacher-section-nav .teacher-section-active{color:#fff!important;outline:0!important;box-shadow:0 9px 22px rgba(35,71,125,.16)!important}
.teacher-section-nav .teacher-section-students.teacher-section-active{background:#2f74c9;border-color:#2f74c9}
.teacher-section-nav .teacher-section-monitoring.teacher-section-active{background:#53aa50;border-color:#53aa50}
.teacher-section-nav .teacher-section-permissions.teacher-section-active{background:#6a50bd;border-color:#6a50bd}
.teacher-section-nav .teacher-section-studio.teacher-section-active{background:#d58a2e;border-color:#d58a2e}
.teacher-section-nav .teacher-section-review.teacher-section-active{background:#184b9f;border-color:#184b9f}
.teacher-section-nav .teacher-section-logout{background:#f3f8fd;color:#315d8a}
.curriculum-dialog-message{min-height:0;margin-top:8px;border-radius:13px;padding:0;font-weight:800}.curriculum-dialog-message.error{padding:10px 12px;background:#fdebea;border:1px solid #efb5b1;color:#9c3d37}
.teacher-summary .summary-not-started,.teacher-game-summary .summary-not-started{background:#fdebea!important;border-color:#efc6c2!important;color:#9b3f39!important}.teacher-summary .summary-not-started b,.teacher-game-summary .summary-not-started b{color:#8d332e!important}
.monitor-visit.no.danger,.monitor-game-state.not_started{background:#fdebea;color:#9b3f39}.monitor-game-state.in_progress{background:#fff3d7;color:#866215}.monitor-game-state.complete{background:#e8f7e5;color:#347b39}
.voice-status.not-sent{background:#fdebea!important;color:#9b3f39!important}.voice-status.submitted{background:#fff3d7!important;color:#866215!important}.voice-status.reviewed{background:#e8f7e5!important;color:#347b39!important}
.voice-review-top-summary{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:72%}.voice-review-score-pill,.voice-review-feedback-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:8px 12px;font-weight:800}.voice-review-score-pill{background:#e8f7e5;color:#2f7c37}.voice-review-score-pill b{font-size:1.15rem}.voice-review-feedback-pill{background:#eef6ff;color:#315d8a;max-width:520px;line-height:1.5}.voice-domain-score{display:inline-flex;margin-inline-start:8px;padding:4px 9px;border-radius:999px;background:#fff;color:#184b9f;border:1px solid #d7e7f5;font-size:.82rem;direction:ltr}
.picture-memory-front{opacity:0}.picture-memory-card.revealed .picture-memory-back,.picture-memory-card.matched .picture-memory-back{opacity:0;visibility:hidden;pointer-events:none}.picture-memory-card.revealed .picture-memory-front,.picture-memory-card.matched .picture-memory-front{opacity:1;visibility:visible}
@media(max-width:760px){
  .word-train{grid-template-columns:72px repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:20px 2px 12px!important;overflow:hidden!important;width:100%}
  .train-engine,.train-car{height:84px;border-width:3px;border-radius:17px 17px 11px 11px}.train-engine::before{top:-20px;left:15px;width:27px;height:23px}.train-engine span{width:48px;height:48px;border-radius:13px;font-size:2.25rem}.train-engine i,.train-car i{bottom:-13px;width:25px;height:25px;border-width:4px}.train-engine i{right:13px}.train-car i:first-of-type{right:10px}.train-car i:last-of-type{left:10px}.train-car span{font-size:1rem;padding:2px}
  .voice-student-title{align-items:flex-start;gap:8px}.voice-review-top-summary{max-width:100%;justify-content:flex-start}.voice-review-feedback-pill{border-radius:16px;white-space:normal}
  .voice-student-card{padding:12px!important}.voice-reading-prompt{padding:10px!important}.voice-random-items{gap:8px!important}.voice-item-group{padding:8px 9px!important}.voice-item-group>span{margin-bottom:5px!important;font-size:.84rem!important}.voice-item-group>div{gap:5px!important}.voice-item-group b{min-height:54px!important;font-size:1.45rem!important;padding:5px!important}.voice-item-group b em{font-size:.64rem!important}
  .voice-recorder-panel{position:sticky;bottom:76px;z-index:8;padding:9px 10px!important;border-radius:18px;box-shadow:0 -8px 25px rgba(26,70,110,.12)}.voice-limit-note{display:none}.voice-recorder-timer{font-size:1.6rem!important;margin:2px auto 5px!important}.voice-record-state{margin:4px 0 7px!important;font-size:.82rem}.voice-record-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px!important}.voice-record-actions button{min-width:0!important;padding:8px 4px!important;font-size:.72rem!important}.voice-recorder-panel audio{height:32px;margin:6px 0!important}.voice-record-secondary{margin-top:4px!important}.voice-record-secondary button{padding:6px 10px!important;font-size:.72rem!important}
}
@media print{
  .teacher-print-sheet{color:#142d45!important}.teacher-print-head h1{color:#163f78!important}.teacher-print-counts span,.teacher-tabular-report .teacher-print-counts span{background:#f1f6fb!important;color:#234b72!important;border-color:#ccdbe8!important}.teacher-print-group-head,.teacher-print-group.completed .teacher-print-group-head,.teacher-print-group.in-progress .teacher-print-group-head,.teacher-print-group.not-started .teacher-print-group-head{background:#edf3f8!important;color:#244660!important}.teacher-print-group th{background:#e7eef5!important;color:#264862!important}.teacher-print-footer{background:#edf4fa!important;color:#244f77!important}
}
.monitoring-section .status-pill.not-started{background:#fdebea;color:#9b3f39}


/* v5.8.0 monitoring/report follow-up */
.teacher-roster-table .teacher-actions-col{width:280px;min-width:280px}
.teacher-roster-table .teacher-student-actions{display:inline-flex;flex-wrap:nowrap;gap:6px;align-items:center;justify-content:center}
.teacher-roster-table .student-manage-btn{white-space:nowrap;padding-inline:8px}
.teacher-game-summary .summary-in-progress,.teacher-summary .summary-in-progress{background:#fff3d7!important;border-color:#efd79a!important;color:#866215!important}
.teacher-game-summary .summary-in-progress b,.teacher-summary .summary-in-progress b{color:#7a5911!important}
.teacher-game-summary .summary-completed,.teacher-summary .summary-completed{background:#e8f7e5!important;border-color:#cbe8c5!important;color:#347b39!important}
.teacher-game-summary .summary-completed b,.teacher-summary .summary-completed b{color:#2f7e37!important}
.teacher-game-summary .summary-not-started,.teacher-summary .summary-not-started{background:#fdebea!important;border-color:#efc6c2!important;color:#9b3f39!important}
.teacher-game-summary .summary-not-started b,.teacher-summary .summary-not-started b{color:#8d332e!important}
.journey-monitor-table th:nth-child(2),.journey-monitor-table td:nth-child(2){text-align:center}
/* Keep picture/word face visible after a card is flipped; do not override the 180deg front transform. */
.picture-memory-inner{will-change:transform}
.picture-memory-back{z-index:2;opacity:1;visibility:visible}
.picture-memory-front{z-index:1;opacity:0;visibility:hidden}
.picture-memory-card.revealed .picture-memory-back,.picture-memory-card.matched .picture-memory-back{z-index:0;opacity:0;visibility:hidden;pointer-events:none}
.picture-memory-card.revealed .picture-memory-front,.picture-memory-card.matched .picture-memory-front{z-index:3;opacity:1;visibility:visible}
@media(max-width:760px){
  .teacher-roster-table .teacher-actions-col{width:190px;min-width:190px}
  .teacher-roster-table .teacher-student-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .teacher-roster-table .student-manage-btn{width:100%;padding-inline:5px}
}

/* v5.8.0 individual-access verification */
.curriculum-dialog-message.success,.curriculum-dialog-message.warning,.curriculum-dialog-message.error{
  min-height:auto;margin-top:10px;padding:10px 12px;border-radius:13px;font-weight:800;line-height:1.65
}
.curriculum-dialog-message.success{background:#e9f7e7;border:1px solid #c6e5c2;color:#347b39}
.curriculum-dialog-message.warning{background:#fff4dc;border:1px solid #efd79a;color:#7d6019}
.curriculum-dialog-message.error{background:#fdebea;border:1px solid #efb5b1;color:#9c3d37}

/* v5.8.0 evening review fixes */
.progress-fraction{direction:rtl!important;unicode-bidi:isolate!important;display:inline-block;white-space:nowrap}
.letter-sequence{align-items:center;justify-content:space-between;gap:14px;overflow:hidden}
.sequence-lead{display:flex;align-items:center;gap:12px;min-width:220px;flex:0 0 auto}
.sequence-lead>div{display:grid;gap:3px}.sequence-lead strong{color:var(--blue);font-size:.98rem}.sequence-lead .teacher-review-note{position:static;display:block;color:#4f7a54;background:#eef8ec;border:1px solid #d0e8cc;border-radius:999px;padding:4px 9px;font-size:.74rem;font-weight:800;white-space:nowrap}
.letter-sequence .sequence-track{flex:0 1 auto;max-width:100%;overflow:hidden;justify-content:flex-end}
.section-completion-state{display:inline-flex;align-items:center;min-height:42px;padding:8px 12px;border-radius:13px;background:#fff5df;border:1px solid #efdca8;color:#7d6019;font-size:.84rem;font-weight:800;line-height:1.5}
.section-completion-state.complete{background:#e9f7e7;border-color:#c8e5c4;color:#347b39}
.lesson-next-btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.letter-name-listen{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#eef7ff,#f8fbff);border:1px solid #d7e8f5}
.letter-name-listen>div{display:grid;gap:2px}.letter-name-listen span{color:#6c8193;font-weight:700;font-size:.82rem}.letter-name-listen strong{color:var(--blue);font-size:1.25rem}
.monitoring-games-compact{gap:14px!important}.monitoring-games-compact .teacher-panel-head{align-items:flex-start}.monitoring-games-compact .teacher-game-live-dot{margin-top:3px}.teacher-games-table.compact{min-width:700px}
.skill-monitor-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skill-monitor-switch button{border:1px solid #dce8f0;background:#f7fafc;border-radius:16px;padding:12px 14px;text-align:right;display:grid;gap:4px;cursor:pointer;font-family:"Tajawal",sans-serif}.skill-monitor-switch button span{color:#738696;font-weight:800;font-size:.82rem}.skill-monitor-switch button strong{color:var(--blue);font-size:.98rem}.skill-monitor-switch button.active{background:#eef6ff;border-color:#9fc4ed;box-shadow:inset 0 0 0 1px #9fc4ed}.skill-monitor-switch button:disabled{opacity:.5;cursor:not-allowed}.teacher-readonly-field{width:100%;border:1px solid #cfe0ec;border-radius:14px;background:#f6f9fb;color:#315d7d;padding:11px 12px;font:800 .95rem "Tajawal",sans-serif}
.voice-review-score-pill{background:#eaf7ff;color:#184b9f;border:1px solid #c9e2f5}.voice-review-score-pill b{font-size:1.3rem}.voice-review-feedback-pill{background:#fff7df;color:#71571b;border:1px solid #ead59b}.voice-domain-score{font-size:.9rem!important;padding:5px 10px!important;border-width:2px!important}.voice-item-group.short .voice-domain-score{background:#eaf6ff;color:#14689d;border-color:#b9ddf2}.voice-item-group.long .voice-domain-score{background:#fff5df;color:#8a6115;border-color:#efd59b}.voice-item-group.words .voice-domain-score{background:#ecf8e9;color:#347b39;border-color:#c8e5c3}
.studio-overall-summary .studio-upload-pending{background:#fff4dc;border-color:#efd79a}.studio-overall-summary .studio-upload-pending span,.studio-overall-summary .studio-upload-pending strong{color:#7d6019}
@media(max-width:900px){.sequence-lead{min-width:0}.letter-sequence{flex-wrap:wrap}.letter-sequence .sequence-track{width:100%;justify-content:center;overflow:hidden}}
@media(max-width:760px){
  .letter-sequence{display:grid;grid-template-columns:1fr;gap:9px;padding:9px}.sequence-lead{justify-content:space-between}.sequence-lead>div{text-align:right}.sequence-lead .teacher-review-note{white-space:normal}.letter-sequence .sequence-track{display:flex;justify-content:center;overflow:hidden;gap:5px;padding:1px 0}.sequence-letter{flex:0 1 43px;width:43px;height:43px}.sequence-arrow{font-size:.75rem}
  .lesson-actions .side-actions{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;width:100%}.section-completion-state{min-height:38px;padding:6px 8px;font-size:.75rem}.lesson-actions .side-actions button{min-width:82px}
  .letter-name-listen{padding:9px 10px}.letter-name-listen .audio-btn{min-width:130px}
  .skill-monitor-switch{grid-template-columns:1fr}.teacher-games-table.compact{min-width:650px}
  /* Keep all reading targets visible before the recorder; the recorder is not an overlay. */
  .voice-random-items{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;align-items:start}.voice-item-group{padding:6px!important;border-radius:12px!important}.voice-item-group>span{font-size:.7rem!important;line-height:1.35!important;margin-bottom:4px!important}.voice-item-group>div{display:grid!important;grid-template-columns:1fr!important;gap:3px!important}.voice-item-group b{min-height:36px!important;font-size:1rem!important;padding:3px 4px!important;gap:3px!important;justify-content:center}.voice-item-group b em{width:15px!important;height:15px!important;font-size:.55rem!important}.voice-domain-score{display:flex!important;margin:3px 0 0!important;width:fit-content!important;font-size:.68rem!important;padding:2px 5px!important}.voice-recorder-panel{position:static!important;bottom:auto!important;z-index:auto!important;box-shadow:none!important;padding:8px 9px!important;margin-top:8px}.voice-limit-note{display:none!important}.voice-recorder-timer{font-size:1.45rem!important;margin:1px auto 4px!important}.voice-record-state{margin:3px 0 5px!important}.voice-record-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px!important}.voice-record-actions button{padding:7px 2px!important;font-size:.68rem!important}.voice-recorder-panel audio{height:30px;margin:4px 0!important}.voice-record-secondary{margin-top:2px!important}
}
@media(max-width:430px){.voice-reading-prompt{padding:7px!important}.voice-student-card{padding:9px!important}.voice-item-group b{font-size:.92rem!important}.voice-record-actions button{font-size:.64rem!important}.lesson-actions .side-actions{grid-template-columns:1fr 1fr}.section-completion-state{grid-column:1/-1;grid-row:1;text-align:center;justify-content:center}.lesson-actions [data-prev]{grid-column:1}.lesson-next-btn{grid-column:2}}
@media print{html,body{height:auto!important;min-height:0!important;overflow:visible!important}.teacher-print-report{height:auto!important;min-height:0!important;overflow:visible!important}.teacher-print-sheet{height:auto!important;min-height:0!important;page-break-after:auto!important;break-after:auto!important}.teacher-print-footer{page-break-after:auto!important;break-after:auto!important}}

/* v5.8.0 evening review — final compact monitoring + mobile voice layout */
.monitoring-games-compact .teacher-panel-head{margin-bottom:0}
.monitoring-games-compact .teacher-game-live-dot{font-size:.78rem;padding:6px 9px}
.monitoring-games-compact .teacher-table-wrap{margin-top:0}
.monitoring-games-compact .teacher-games-table.compact th,
.monitoring-games-compact .teacher-games-table.compact td{padding:10px 12px;font-size:.9rem}

@media(max-width:760px){
  /* Three compact reading rows so short/long/words remain visible above the recorder. */
  .voice-random-items{grid-template-columns:1fr!important;gap:4px!important;margin-top:5px!important}
  .voice-item-group{display:grid!important;grid-template-columns:84px minmax(0,1fr)!important;align-items:center!important;gap:5px!important;padding:5px 6px!important;border-radius:11px!important}
  .voice-item-group>span{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important;margin:0!important;font-size:.66rem!important;line-height:1.25!important}
  .voice-item-group>div{display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:3px!important;min-width:0!important}
  .voice-item-group b{flex:1 1 0!important;min-width:0!important;min-height:32px!important;padding:2px 2px!important;font-size:.9rem!important;line-height:1.2!important;white-space:nowrap!important;gap:2px!important;border-radius:8px!important}
  .voice-item-group.words b{font-size:.76rem!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .voice-item-group b em{width:13px!important;height:13px!important;font-size:.48rem!important;flex:0 0 13px!important}
  .voice-domain-score{margin:0!important;padding:2px 5px!important;font-size:.62rem!important;line-height:1.15!important}
  .voice-recorder-panel{position:static!important;inset:auto!important;z-index:auto!important;margin-top:5px!important;padding:6px 7px!important;box-shadow:none!important}
  .voice-recorder-timer{font-size:1.25rem!important;margin:0 auto 2px!important}
  .voice-record-state{font-size:.72rem!important;margin:2px 0 4px!important}
  .voice-record-actions{gap:3px!important}
  .voice-record-actions button{padding:6px 2px!important;font-size:.62rem!important}
  .voice-recorder-panel audio{height:28px!important;margin:3px 0!important}
}
@media(max-width:430px){
  .voice-item-group{grid-template-columns:72px minmax(0,1fr)!important}
  .voice-item-group b{font-size:.82rem!important}
  .voice-item-group.words b{font-size:.68rem!important}
}

/* v5.8.0 hotfix 8 — final monitoring order + compact assessment workspace */
.voice-domain-weight{
  display:inline-flex;align-items:center;justify-content:center;margin-inline-start:8px;
  padding:5px 10px;border-radius:999px;font:900 .86rem "Tajawal",sans-serif;white-space:nowrap
}
.voice-item-group.short .voice-domain-weight{background:#eaf6ff;color:#14689d;border:1px solid #b9ddf2}
.voice-item-group.long .voice-domain-weight{background:#fff5df;color:#8a6115;border:1px solid #efd59b}
.voice-item-group.words .voice-domain-weight{background:#ecf8e9;color:#347b39;border:1px solid #c8e5c3}
.skill-monitor-filters.current-skill-filter{align-items:end}

@media(min-width:901px){
  .voice-student-card-recordable{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,340px);gap:14px 16px;align-items:start
  }
  .voice-student-card-recordable .voice-student-title{grid-column:1/-1;margin-bottom:0}
  .voice-student-card-recordable .voice-reading-prompt{grid-column:1;margin-bottom:0}
  .voice-student-card-recordable .voice-recorder-panel{
    grid-column:2;align-self:start;position:sticky;top:92px;padding:12px;border-radius:18px;
    box-shadow:0 8px 22px rgba(26,70,110,.08)
  }
  .voice-student-card-recordable .voice-limit-note{padding:8px 10px;font-size:.78rem;line-height:1.55}
  .voice-student-card-recordable .voice-recorder-timer{margin:8px auto 6px}
  .voice-student-card-recordable .voice-record-state{margin:7px 0;font-size:.82rem}
  .voice-student-card-recordable .voice-record-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .voice-student-card-recordable .voice-record-actions button{min-width:0;width:100%;padding:9px 6px}
  .voice-student-card-recordable .voice-record-secondary{margin-top:6px}
  .voice-student-card-recordable audio[hidden]{display:none!important}
}
@media(max-width:900px){
  .voice-student-card-recordable{display:block}
  .voice-domain-weight{font-size:.7rem;padding:3px 6px;margin-inline-start:4px}
}

/* v5.8.0 hotfix 9 — clearer voice-assessment reading targets */
/* ترتيب العناصر معروف من موضعها؛ أرقام 1،2،3 حُذفت من HTML لتقليل التشتيت. */
.voice-item-group b em{display:none!important}
.voice-item-group b{
  font-size:clamp(2.15rem,3.45vw,2.9rem);
  line-height:1.35;
}
.voice-item-group.words b{
  font-size:clamp(2.05rem,3.25vw,2.75rem);
}
.voice-domain-weight{
  padding:3px 7px;
  font-size:.76rem;
  margin-inline-start:6px;
}
@media(max-width:900px){
  .voice-domain-weight{font-size:.64rem;padding:2px 5px;margin-inline-start:3px}
}
@media(max-width:760px){
  .voice-item-group b{
    min-height:38px!important;
    font-size:1.15rem!important;
    padding:3px 3px!important;
    gap:0!important;
  }
  .voice-item-group.words b{
    font-size:.95rem!important;
    line-height:1.25!important;
  }
  .voice-domain-weight{
    font-size:.58rem!important;
    padding:2px 4px!important;
    margin:2px 0 0!important;
  }
}
@media(max-width:430px){
  .voice-item-group b{font-size:1.08rem!important}
  .voice-item-group.words b{font-size:.88rem!important}
  .voice-domain-weight{font-size:.56rem!important;padding:1px 4px!important}
}

/* v5.8.0 hotfix 10 — keep final-assessment words fully visible */
.voice-reading-prompt,
.voice-random-items,
.voice-item-group.words,
.voice-item-group.words > div,
.voice-item-group.words b{
  overflow:visible!important;
}
.voice-item-group.words b{
  box-sizing:border-box;
  line-height:1.58;
  padding-block:14px 18px;
}
/* The final assessment has five words. Keep them in one row on wide screens
   so the last row does not fall below the recorder/viewport. */
@media(min-width:901px){
  .voice-item-group.words:has(> div > b:nth-child(5)) > div{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
  }
  .voice-item-group.words:has(> div > b:nth-child(5)) b{
    min-height:88px;
    padding:13px 8px 17px;
    font-size:clamp(1.85rem,2.45vw,2.35rem);
    line-height:1.55;
  }
}
@media(max-width:900px){
  .voice-item-group.words b{
    min-height:44px!important;
    padding-block:6px 8px!important;
    line-height:1.45!important;
  }
}

/* v5.8.0 hotfix 11 — keep four long sounds on one desktop row */
/* Final assessment: compact the four long-sound cards on wide screens only.
   Mobile/tablet layout remains responsive and unchanged. */
@media(min-width:901px){
  .voice-item-group.long:has(> div > b:nth-child(4)):not(:has(> div > b:nth-child(5))) > div{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
  }
  .voice-item-group.long:has(> div > b:nth-child(4)):not(:has(> div > b:nth-child(5))) b{
    min-height:82px;
    padding:10px 6px 14px;
    font-size:clamp(1.8rem,2.25vw,2.25rem);
    line-height:1.45;
  }
}

/* Hotfix 13 — شريط الطالب بأربع وجهات وأيقونات موحدة */
.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bottom-nav .nav-item {
  min-width: 0;
  gap: 4px;
  padding: 7px 4px 6px;
}
.bottom-nav .nav-item > .nav-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  line-height: 1;
}
.bottom-nav .nav-icon svg {
  width: 27px;
  height: 27px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bottom-nav .nav-icon svg * {
  vector-effect: non-scaling-stroke;
}
.bottom-nav .nav-item small {
  line-height: 1.25;
}
@media (max-width: 390px) {
  .bottom-nav .nav-item { padding-inline: 2px; }
  .bottom-nav .nav-item small { font-size: .72rem; }
}

/* v5.9.0 — تنظيم ألعابي والتقويم الصوتي بحسب الوحدات */
.games-unit-browser,
.voice-unit-browser {
  display:flex;
  flex-direction:column;
  gap:10px;
  direction:rtl;
  margin:0 0 14px;
}
.games-unit-list,
.voice-unit-list {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  padding:11px 12px 12px;
  background:#fff;
  border:1px solid #dfeaf2;
  border-radius:20px;
  box-shadow:0 7px 18px rgba(31,82,116,.05);
}
.games-unit-list>span,
.voice-unit-list>span {
  grid-column:1/-1;
  color:#6a7e8f;
  font-weight:800;
  font-size:.82rem;
  padding:0 4px 2px;
}
.game-unit-option,
.voice-unit-option {
  width:100%;
  min-height:62px;
  border:1px solid #dce8f1;
  border-radius:14px;
  background:#f8fbfe;
  color:#314b62;
  padding:8px 10px;
  text-align:center;
  cursor:pointer;
  display:grid;
  place-content:center;
  gap:2px;
  font-family:"Tajawal",sans-serif;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.game-unit-option strong,
.voice-unit-option strong { color:var(--blue); font-size:.97rem; }
.game-unit-option small,
.voice-unit-option small { color:#788b99; font-size:.69rem; line-height:1.35; }
.game-unit-option.active,
.voice-unit-option.active {
  background:#eaf4ff;
  border-color:#78ace0;
  box-shadow:inset 0 0 0 2px #d3e8fa,0 5px 13px rgba(34,102,170,.08);
  transform:translateY(-1px);
}
.voice-unit-option:disabled { opacity:.58; cursor:not-allowed; transform:none; }
.games-unit-letters,
.voice-unit-assessments {
  min-width:0;
  background:linear-gradient(180deg,#f7fbff 0%,#fff 100%);
  border:1px solid #cfe1ef;
  border-radius:20px;
  padding:12px;
  box-shadow:0 7px 18px rgba(31,82,116,.05);
}
.games-unit-title,
.voice-unit-assessments-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
  padding:8px 11px;
  border-radius:13px;
  background:#edf6ff;
  color:#6d8293;
  font-weight:800;
}
.games-unit-title strong,
.voice-unit-assessments-head strong { color:var(--blue); font-size:1.08rem; }
.games-letter-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(82px,1fr));
  gap:8px;
}
.games-letter-grid .game-letter-pick {
  width:auto;
  border:1px solid color-mix(in srgb,var(--letter-chip) 30%,#e3ebf1);
  background:#fff;
  color:var(--letter-chip);
  cursor:pointer;
  box-shadow:0 5px 12px rgba(24,75,159,.05);
  font-family:"Tajawal",sans-serif;
  height:76px;
  padding:7px 5px;
  display:grid;
  grid-template-rows:auto auto;
  place-items:center;
  gap:2px;
  border-radius:15px;
}
.games-letter-grid .game-letter-pick>span {
  font:800 1.72rem "Baloo Bhaijaan 2",sans-serif;
  line-height:1;
}
.games-letter-grid .game-letter-pick small {
  display:block;
  color:#738493;
  font:700 .6rem "Tajawal",sans-serif;
  line-height:1.2;
  text-align:center;
}
.games-letter-grid .game-letter-pick.active small { color:rgba(255,255,255,.9); }
.games-letter-grid .game-letter-pick.locked {
  background:#f4f6f8;
  color:#8a969f;
  border-color:#e1e6ea;
  box-shadow:none;
  cursor:pointer;
}
.games-letter-grid .game-letter-pick.locked i { font-style:normal; font-size:.7rem; line-height:1; }
.games-letter-grid .game-letter-pick.coming-soon { opacity:.75; }
.games-empty-unit,
.voice-unit-empty {
  min-height:92px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  padding:16px;
  text-align:center;
  border:1px dashed #d6e4ee;
  border-radius:16px;
  background:#fbfdff;
  color:#718493;
}
.games-empty-unit strong { color:var(--blue); font-size:1.12rem; }
.games-empty-unit p { margin:0; }
.voice-unit-assessments .voice-assessment-tabs {
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0;
  gap:10px;
}
.voice-unit-assessments .voice-assessment-tab { min-height:98px; }
.monitoring-section .teacher-filters.voice-monitor-filters { grid-template-columns:180px 220px 180px auto; }

/* الكلمات المستهدفة في نص ألاحظ وأستمع: لون ثابت موحّد في جميع الحروف */
:root { --observe-target-red:#c94b45; }
.observe-line .target-word,
.observe-line .speaker .target-word {
  color:var(--observe-target-red);
}

.pm-cage {
  width:70px;
  height:62px;
  border:4px solid #7d633f;
  border-radius:12px 12px 7px 7px;
  display:grid!important;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(#eef8ff,#fff6d9);
}
.pm-cage::after {
  content:"";
  position:absolute;
  inset:3px 5px;
  background:repeating-linear-gradient(90deg,transparent 0 10px,#7d633f 10px 13px);
  opacity:.8;
  pointer-events:none;
}
.pm-cage>span { position:relative; z-index:1; font-size:2rem; }

@media(max-width:900px) {
  .games-unit-list,.voice-unit-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .games-letter-grid { grid-template-columns:repeat(3,minmax(82px,1fr)); }
  .monitoring-section .teacher-filters.voice-monitor-filters { grid-template-columns:1fr 1fr; }
  .monitoring-section .teacher-filters.voice-monitor-filters .ghost-btn { grid-column:1/-1; }
}
@media(max-width:760px) {
  .games-unit-list,.voice-unit-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .voice-unit-assessments .voice-assessment-tabs { grid-template-columns:1fr; }
  .monitoring-section .teacher-filters.voice-monitor-filters { grid-template-columns:1fr!important; }
  .monitoring-section .teacher-filters.voice-monitor-filters .ghost-btn { grid-column:auto; }
}
@media(max-width:480px) {
  .games-unit-list,.voice-unit-list { grid-template-columns:1fr; }
  .games-letter-grid { grid-template-columns:repeat(2,minmax(78px,1fr)); }
  .games-unit-title,.voice-unit-assessments-head { align-items:flex-start; flex-direction:column; gap:2px; }
}
.games-letter-grid .game-letter-pick.open:hover { transform:translateY(-2px); }
.games-letter-grid .game-letter-pick.active {
  background:var(--letter-chip);
  color:#fff;
  border-color:var(--letter-chip);
  box-shadow:0 9px 18px color-mix(in srgb,var(--letter-chip) 24%,transparent);
}

/* v5.9.0 review 3 — تنظيم صلاحيات الألعاب والتقويم، ومرشحات المتابعة بحسب الوحدة */
.permission-unit-browser {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
  direction:rtl;
}
.permission-unit-tabs {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  padding:11px 12px 12px;
  background:#fff;
  border:1px solid #dfeaf2;
  border-radius:18px;
}
.permission-unit-tabs>span {
  grid-column:1/-1;
  color:#6a7e8f;
  font-weight:800;
  font-size:.82rem;
  padding:0 4px 2px;
}
.permission-unit-option {
  min-height:60px;
  border:1px solid #dce8f1;
  border-radius:14px;
  background:#f8fbfe;
  color:#314b62;
  padding:8px 9px;
  display:grid;
  place-content:center;
  gap:2px;
  text-align:center;
  cursor:pointer;
  font-family:"Tajawal",sans-serif;
  transition:.16s ease;
}
.permission-unit-option strong { color:var(--blue); font-size:.96rem; }
.permission-unit-option small { color:#788b99; font-size:.68rem; line-height:1.35; }
.permission-unit-option.active {
  background:#efeaff;
  border-color:#8f79d4;
  box-shadow:inset 0 0 0 2px #ded5fa,0 5px 13px rgba(91,70,170,.08);
  transform:translateY(-1px);
}
.permission-unit-content {
  background:linear-gradient(180deg,#fbfaff 0%,#fff 100%);
  border:1px solid #ddd6f2;
  border-radius:18px;
  padding:12px;
}
.permission-unit-content-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  padding:8px 11px;
  border-radius:13px;
  background:#f2effd;
  color:#6f668c;
  font-weight:800;
}
.permission-unit-content-head strong { color:#5d49aa; font-size:1.06rem; }
.permission-unit-content .permission-game-grid,
.permission-unit-content .voice-teacher-config-grid { margin-top:0; margin-bottom:0; }
.permission-game-card.coming-soon { opacity:.68; background:#f5f6f8; border-style:dashed; }
.monitoring-section .teacher-filters.unit-letter-monitor-filters {
  grid-template-columns:180px 150px 180px auto;
}
@media(max-width:900px) {
  .permission-unit-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .monitoring-section .teacher-filters.unit-letter-monitor-filters { grid-template-columns:1fr 1fr; }
  .monitoring-section .teacher-filters.unit-letter-monitor-filters .ghost-btn { grid-column:1/-1; }
}
@media(max-width:760px) {
  .permission-unit-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .monitoring-section .teacher-filters.unit-letter-monitor-filters { grid-template-columns:1fr!important; }
  .monitoring-section .teacher-filters.unit-letter-monitor-filters .ghost-btn { grid-column:auto; }
}
@media(max-width:480px) {
  .permission-unit-tabs { grid-template-columns:1fr; }
  .permission-unit-content-head { align-items:flex-start; flex-direction:column; gap:2px; }
}


/* Teacher-only full bank for voice assessment configuration/preview. */
.voice-bank-card {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid #dce9f5;
  border-radius: 24px;
  background: linear-gradient(180deg,#fff,#f8fbff);
  box-shadow: 0 10px 28px rgba(31,82,116,.06);
}
.voice-bank-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.voice-bank-head h3 { margin:4px 0 6px; color:var(--blue); }
.voice-bank-head p { margin:0; color:var(--muted); line-height:1.7; }
.voice-bank-total { min-width:130px; padding:12px 16px; border-radius:18px; background:#edf6ff; text-align:center; }
.voice-bank-total b { display:block; font-size:1.7rem; color:var(--blue); }
.voice-bank-total span { color:var(--muted); font-size:.88rem; }
.voice-bank-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.voice-bank-group { min-width:0; padding:14px; border:1px solid #e2ebf3; border-radius:18px; background:#fff; }
.voice-bank-group.short { border-top:4px solid #64afe0; }
.voice-bank-group.long { border-top:4px solid #f0b54f; }
.voice-bank-group.words { border-top:4px solid #6bbb68; }
.voice-bank-group-head { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:12px; }
.voice-bank-group-head strong { color:#264f75; }
.voice-bank-group-head small { color:#708495; white-space:nowrap; }
.voice-bank-items { display:flex; flex-wrap:wrap; gap:8px; }
.voice-bank-items b { min-width:48px; padding:9px 11px; border-radius:13px; background:#f3f7fb; text-align:center; font-family:var(--student-word-font); font-size:1.22rem; color:#153b5c; }
@media (max-width:900px) { .voice-bank-grid{grid-template-columns:1fr}.voice-bank-head{align-items:flex-start;flex-direction:column}.voice-bank-total{min-width:0;width:100%}.voice-bank-group-head{align-items:flex-start;flex-direction:column}.voice-bank-group-head small{white-space:normal} }

/* v5.9.2 — اعتماد خط الكلمات التعليمية للنص العلوي في ألاحظ وأستمع ولقسم أطبق في أحاكي */
/* الخط المرجعي نفسه المستخدم في: مهمة الاستماع، أقرأ، وأجرد الحرف. */
.observe-line,
.observe-line .speaker,
.observe-line .target-word,
.language-question h4,
.language-question .quiz-choice,
.language-question .quiz-choice .negation-la {
  font-family: var(--student-word-font);
  text-rendering: optimizeLegibility;
}
.observe-line {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 2.08;
}
.observe-line .target-word,
.observe-line .speaker {
  font-weight: 600;
}
.language-question h4 {
  font-weight: 500;
  line-height: 1.9;
}
.language-question .quiz-choice {
  font-weight: 500;
  line-height: 1.85;
}


/* v5.9.3 — وضوح الكلمات التعليمية ومراجعة حرف ز/أ */
/* الكلمات التعليمية تستخدم Tajawal بوزن 600 الحقيقي بدل الخط الأثقل. */
.observe-line,
.observe-line .speaker,
.observe-line .target-word,
.observe-word-text,
.word-chip,
.read-word-label,
.hunt-chip,
.sound-pair strong,
.language-question h4,
.language-question .quiz-choice,
.lesson-card-achieve .quiz-choice,
.lesson-card-achieve .achievement-question-body h4,
.picture-memory-front.is-word strong {
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif!important;
  font-weight:500!important;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
.observe-line {font-weight:500!important;line-height:2.08;}
.observe-line .target-word {font-weight:500!important;}
.picture-memory-front.is-word strong {line-height:1.75!important;}
/* حرف أ في لوحة أشكال الحرف يبقى أسفل الصورة التوضيحية ولا يمتد داخلها. */
.form-display[data-letter="أ"] .form-display-inner {gap:24px;}
.form-display[data-letter="أ"] .glyph {
  font-size:clamp(5.6rem,14vw,8.1rem)!important;
  line-height:1!important;
  margin-top:8px;
}


/* review5 — الخط التعليمي الأصلي بسماكة أخف فقط */
.observe-line,
.observe-line .speaker,
.observe-line .target-word,
.observe-word-text,
.word-chip,
.read-word-label,
.hunt-chip,
.sound-pair strong,
.language-question h4,
.language-question .quiz-choice,
.lesson-card-achieve .quiz-choice,
.lesson-card-achieve .achievement-question-body h4,
.picture-memory-front.is-word strong {
  font-family:"Baloo Bhaijaan 2","Tajawal",sans-serif!important;
  font-weight:500!important;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
.observe-line { line-height:2.08; }
.picture-memory-front.is-word strong { line-height:1.75!important; }

/* KSA font adoption — all current letter lessons. */
@font-face {
  font-family:"KSAProject";
  src: url("https://db.onlinewebfonts.com/t/3dc082e2236e187782e631ad6f610e21.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

/* Educational Arabic content only; navigation and general UI keep their interface fonts. */
.font-ksa-ready .lesson-page .observe-line,
.font-ksa-ready .lesson-page .observe-line .speaker,
.font-ksa-ready .lesson-page .observe-line .target-word,
.font-ksa-ready .lesson-page .observe-word-text,
.font-ksa-ready .lesson-page .word-chip,
.font-ksa-ready .lesson-page .read-word-label,
.font-ksa-ready .lesson-page .hunt-chip,
.font-ksa-ready .lesson-page .target-letter,
.font-ksa-ready .lesson-page .sound-pair strong,
.font-ksa-ready .lesson-page .language-question h4,
.font-ksa-ready .lesson-page .language-question .quiz-choice,
.font-ksa-ready .lesson-page .lesson-card-achieve .quiz-choice,
.font-ksa-ready .lesson-page .lesson-card-achieve .achievement-question-body h4,
.font-ksa-ready .lesson-page .form-display .glyph,
.font-ksa-ready .lesson-page .form-tab,
.font-ksa-ready .lesson-page .trace-guide,
.font-ksa-ready .lesson-page .trace-selected-label {
  font-family:"KSAProject",serif!important;
  font-weight:700!important;
  font-synthesis:none;
  letter-spacing:0!important;
  text-rendering:optimizeLegibility;
}

/* ألاحظ وأستمع: تكبير بسيط لنص القراءة. */
.font-ksa-ready .lesson-page .observe-line{
  font-size:clamp(1.58rem,2.48vw,2.08rem)!important;
  line-height:2.22!important;
  word-spacing:.16em;
}
/* مهمة الاستماع: نفس حجم النسخة السابقة، لكن بخط المملكة. */
.font-ksa-ready .lesson-page .observe-word-text{
  font-size:clamp(2.4rem,3.85vw,2.9rem)!important;
  line-height:1.7!important;
}
.font-ksa-ready .lesson-page .word-chip,
.font-ksa-ready .lesson-page .read-word-label{
  font-size:clamp(2.35rem,3.6vw,2.82rem)!important;
  line-height:1.68!important;
}
.font-ksa-ready .lesson-page .sound-pair strong{
  font-size:clamp(2.5rem,3.45vw,2.95rem)!important;
  line-height:1.55!important;
}
/* أجرد الحرف: كلمات أكبر. */
.font-ksa-ready .lesson-page .hunt-chip{
  font-size:clamp(2.02rem,3.1vw,2.42rem)!important;
  line-height:1.72!important;
  min-height:112px!important;
}
/* أحاكي. */
.font-ksa-ready .lesson-page .language-question h4{
  font-size:clamp(1.75rem,2.7vw,2.22rem)!important;
  line-height:2.05!important;
  word-spacing:.18em;
}
.font-ksa-ready .lesson-page .language-question .quiz-choice{
  font-size:clamp(1.9rem,2.85vw,2.3rem)!important;
  line-height:1.72!important;
  word-spacing:.14em;
}
/* أتعرف أشكال الحرف + أكتب الحرف. */
.font-ksa-ready .lesson-page .form-tab{
  font-size:clamp(1.52rem,2.2vw,1.82rem)!important;
  font-weight:800!important;
  color:#8b463d!important;
}
.font-ksa-ready .lesson-page .form-tab.active{
  color:#2e7f3e!important;
}
.font-ksa-ready .lesson-page .form-display .glyph{
  font-size:clamp(7.75rem,20vw,11.5rem)!important;
  line-height:.92!important;
}
.font-ksa-ready .lesson-page .trace-guide{
  font-size:min(52vw,18rem)!important;
  line-height:1!important;
}
.font-ksa-ready .lesson-page .trace-selected-label{
  font-size:1.52rem!important;
  color:#355d22!important;
}
/* إنجازاتي: سؤال أغمق بلون مستقل وخيارات أكبر. */
.font-ksa-ready .lesson-page .lesson-card-achieve .achievement-question-body h4{
  font-size:clamp(1.75rem,2.65vw,2.18rem)!important;
  line-height:1.95!important;
  color:#855c0d!important;
  font-weight:800!important;
}
.font-ksa-ready .lesson-page .lesson-card-achieve .quiz-choice{
  font-size:clamp(1.95rem,2.95vw,2.34rem)!important;
  line-height:1.72!important;
  min-height:68px!important;
}

@media(max-width:760px){
 .font-ksa-ready .lesson-page .observe-line{font-size:1.5rem!important}
 .font-ksa-ready .lesson-page .observe-word-text{font-size:2.24rem!important}
 .font-ksa-ready .lesson-page .hunt-chip{font-size:1.9rem!important;min-height:96px!important}
 .font-ksa-ready .lesson-page .form-tab{font-size:1.32rem!important}
 .font-ksa-ready .lesson-page .trace-selected-label{font-size:1.34rem!important}
 .font-ksa-ready .lesson-page .lesson-card-achieve .achievement-question-body h4{font-size:1.55rem!important}
 .font-ksa-ready .lesson-page .lesson-card-achieve .quiz-choice{font-size:1.72rem!important}
}

/* City J review 4 — keep the approved observe image at the same 4:3 frame as other lessons. */
.lesson-page[data-letter="ج"] .observe-scene-figure {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.lesson-page[data-letter="ج"] .observe-scene-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* KSA font — educational content only (games + voice assessment) */
/* Keep headings, navigation and explanatory UI on the original project typography. */
.font-ksa-ready .games-page :is(
  .hunter-word,.hunter-bag i,.listen-choice,.race-choice,.house-word-card strong,
  .train-car span,.train-word-bank button,.memory-word-card,
  .picture-memory-front.is-word strong
) {
  font-family:"KSAProject",serif!important;
  font-synthesis:none!important;
  letter-spacing:0!important;
  text-rendering:optimizeLegibility;
  line-height:1.65!important;
}

/* Slightly larger game words because KSA Project has a more compact visual body. */
.font-ksa-ready .games-page .hunter-word{font-size:2.25rem!important}
.font-ksa-ready .games-page .hunter-bag i{font-size:1.22rem!important}
.font-ksa-ready .games-page .listen-choice{font-size:2.45rem!important}
.font-ksa-ready .games-page .race-choice{font-size:2.55rem!important}
.font-ksa-ready .games-page .house-word-card strong{font-size:clamp(3.25rem,7vw,5.55rem)!important}
.font-ksa-ready .games-page .train-car span{font-size:1.95rem!important}
.font-ksa-ready .games-page .train-word-bank button{font-size:1.9rem!important}
.font-ksa-ready .games-page .memory-word-card{font-size:1.76rem!important}
.font-ksa-ready .games-page .picture-memory-front.is-word strong{font-size:clamp(1.82rem,3.25vw,2.5rem)!important}

/* Voice assessment: only the sounds/words use KSA Project; all headings stay unchanged. */
.font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group b,
.font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page) .voice-bank-items b {
  font-family:"KSAProject",serif!important;
  font-synthesis:none!important;
  letter-spacing:0!important;
  text-rendering:optimizeLegibility;
  line-height:1.58!important;
}
.font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.short b,
.font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.long b {
  font-size:clamp(2.45rem,3.8vw,3.2rem)!important;
}
.font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.words b {
  font-size:clamp(2.28rem,3.5vw,3rem)!important;
}
.font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page) .voice-bank-items b {
  font-size:1.58rem!important;
  min-width:56px;
  padding:10px 13px;
}

@media(max-width:760px){
  .font-ksa-ready .games-page .hunter-word{font-size:1.9rem!important}
  .font-ksa-ready .games-page .listen-choice{font-size:2.08rem!important}
  .font-ksa-ready .games-page .race-choice{font-size:2.05rem!important}
  .font-ksa-ready .games-page .train-word-bank button{font-size:1.62rem!important}
  .font-ksa-ready .games-page .train-car span{font-size:1.72rem!important}
  .font-ksa-ready .games-page .memory-word-card{font-size:1.5rem!important}
  .font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.short b,
  .font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.long b {
    font-size:1.58rem!important;
    min-height:48px!important;
    padding:6px 4px 8px!important;
  }
  .font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.words b {
    font-size:1.38rem!important;
    min-height:48px!important;
    padding:6px 4px 8px!important;
  }
  .font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page) .voice-bank-items b {
    font-size:1.38rem!important;
  }
}
@media(max-width:430px){
  .font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.short b,
  .font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.long b {font-size:1.48rem!important}
  .font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page,.voice-review-dialog) .voice-item-group.words b {font-size:1.3rem!important}
  .font-ksa-ready :is(.voice-assessment-page,.voice-teacher-page) .voice-bank-items b {font-size:1.3rem!important}
}

/* review6 — طباعة المتابعة على الجوال: اطبع التقرير فقط دون صفحات فارغة من واجهة التطبيق */
@media print {
  .app-shell { min-height:0 !important; }
  .app-shell > .topbar,
  .app-shell > .persistent-brand,
  .app-shell > .bottom-nav,
  body > .toast { display:none !important; }
  #app { min-height:0 !important; padding:0 !important; margin:0 !important; }
  .teacher-monitoring-page { display:block !important; min-height:0 !important; margin:0 !important; padding:0 !important; }
  .teacher-monitoring-page > *:not(.teacher-print-report) { display:none !important; }
  .teacher-print-report {
    display:block !important;
    position:static !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
}


/* Final release — safe manual app update */
.app-update-btn{
  position:relative;height:46px;min-width:78px;border:0;border-radius:15px;padding:0 11px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  background:#eef7ff;color:var(--blue);font:800 .82rem "Tajawal",sans-serif;
  box-shadow:inset 0 -2px 0 rgba(24,75,159,.07);transition:transform .15s ease,background .2s ease,color .2s ease
}
.app-update-btn:active{transform:translateY(1px)}
.app-update-dot{display:none;position:absolute;top:5px;left:5px;width:9px;height:9px;border-radius:50%;background:#ef625e;box-shadow:0 0 0 3px #fff}
.app-update-btn.update-available{background:#fff4dc;color:#805f12;box-shadow:inset 0 0 0 1px #efd79a}
.app-update-btn.update-available .app-update-dot{display:block}
.app-update-btn:disabled{cursor:wait;opacity:.72}
@media(max-width:760px){
  .app-update-btn{width:62px;min-width:62px;padding:0 8px;font-size:.78rem}
  .app-update-btn b{display:block}
}
@media(max-width:430px){
  .topbar{grid-template-columns:46px minmax(0,1fr) auto;gap:5px;padding-inline:8px}
  .top-actions{gap:3px}
  .teacher-portal-btn{width:42px;min-width:42px;height:42px;padding:0;justify-content:center}
  .teacher-portal-btn b{display:none}
  .app-update-btn{width:58px;min-width:58px;height:42px;border-radius:13px;padding:0 6px;font-size:.72rem}
  .icon-btn{width:42px;min-width:42px;height:42px;border-radius:13px}
}

/* final2 — إظهار عبارات بوابة المعلم/جلسة الطالب على الجوال بدل الكتل اللونية فقط */
@media (max-width:560px){
  .student-session-btn{
    width:58px;min-width:58px;max-width:58px;height:42px;min-height:42px;padding:2px 4px;
    overflow:hidden;color:#2f7c37;position:relative;white-space:normal;text-overflow:clip;
    text-align:center;font-size:.64rem;line-height:1.15;
  }
  .student-session-btn::after{display:none!important;content:none!important}
}
@media (max-width:430px){
  .topbar{grid-template-columns:42px minmax(50px,1fr) auto;gap:4px;padding-inline:6px}
  .top-actions{gap:2px;align-items:center}
  .top-title span{font-size:1rem}
  .top-title small{font-size:.62rem}
  .teacher-portal-btn{
    width:58px;min-width:58px;height:42px;padding:2px 4px;justify-content:center;gap:0;
  }
  .teacher-portal-btn span{display:none}
  .teacher-portal-btn b{
    display:block!important;max-width:none!important;overflow:visible!important;text-overflow:clip!important;
    white-space:normal;text-align:center;font-size:.64rem;line-height:1.15;
  }
  .app-update-btn{width:58px;min-width:58px;height:42px;font-size:.7rem}
  .icon-btn{width:36px;min-width:36px;height:42px}
}


/* v5.9.2 — ألاحظ وأستمع: خلفية نص موحدة لكل الحروف */
.observe-passages {
  display:grid;
  gap:0;
  align-content:center;
  padding:18px 20px;
  border-radius:22px;
  background:#f8fbff;
  border:1px solid #e3eef8;
  overflow:hidden;
}
.observe-passages .observe-line {
  margin:0;
  padding:5px 0;
  border:0;
  border-radius:0;
  background:transparent;
}
@media(max-width:760px){
  .observe-passages{padding:14px 16px;border-radius:18px}
  .observe-passages .observe-line{padding:3px 0}
}


/* Review 5.9.5: audio controls use the same speaker icon as أقرأ. */
.audio-btn.audio-icon-only{
  width:52px;
  height:52px;
  min-width:52px;
  padding:0;
  justify-content:center;
  border-radius:16px;
}
.audio-btn.audio-icon-only::before{content:none!important;}
.audio-btn.audio-icon-only .read-word-audio-icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
}
.audio-btn.audio-icon-only .read-word-audio-icon svg{width:100%;height:100%;display:block;}
.badge-celebration-head.badge-name-only{gap:0!important;}
.badge-celebration-head.badge-name-only strong{margin:0!important;}

/* v5.9.7 — fast startup feedback while session checks run */
.startup-loading{min-height:190px;display:grid;place-items:center;align-content:center;gap:8px;margin:20px auto 34px;max-width:620px;padding:28px;border-radius:26px;background:#f8fcff;border:1px solid #d9ebf5;color:#225f91;text-align:center;box-shadow:0 10px 28px rgba(34,89,125,.06)}
.startup-loading strong{font-size:1.2rem}.startup-loading small{color:#718899;font-weight:700}.startup-loading-dot{width:34px;height:34px;border-radius:50%;border:4px solid #d9edf7;border-top-color:#239dcc;animation:rahletStartupSpin .8s linear infinite}
@keyframes rahletStartupSpin{to{transform:rotate(360deg)}}

/* v5.9.14 — student lesson strip + word factory */
.student-sequence{
  display:grid;
  grid-template-columns:minmax(230px,1fr) minmax(180px,.8fr) auto;
  grid-template-areas:"track title back";
  align-items:center;
  gap:14px;
  padding:11px 14px;
}
.student-sequence .sequence-back-btn{
  grid-area:back;
  min-width:132px;
  padding:11px 18px;
  background:linear-gradient(135deg,#f39a3f,#e8792d);
  color:#fff;
  border:1px solid rgba(176,93,25,.16);
  box-shadow:0 7px 16px rgba(201,112,35,.22);
}
.student-sequence .sequence-back-btn:hover{transform:translateY(-1px);filter:brightness(1.02)}
.student-sequence .sequence-unit-title{grid-area:title;text-align:center;min-width:0}
.student-sequence .sequence-unit-title strong{display:block;color:var(--blue);font-size:1.1rem;font-weight:900;white-space:nowrap}
.student-sequence .sequence-track{grid-area:track;justify-content:flex-start;overflow:hidden}

.word-factory-stage{
  display:grid;
  gap:18px;
  background:
    radial-gradient(circle at 8% 10%,rgba(47,116,201,.10),transparent 24%),
    linear-gradient(180deg,#fff,#f2f8ff);
}
.factory-dashboard{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:14px;
  align-items:center;
  padding:16px 18px;
  border-radius:22px;
  background:#fff;
  border:1px solid #d7e6f6;
}
.factory-dashboard small{color:#6d8090;font-weight:800}
.factory-dashboard strong{display:block;color:var(--blue);font-size:1.25rem;margin-top:2px}
.factory-dashboard p{margin:4px 0 0;color:#728595;font-weight:700}
.factory-machine{
  position:relative;
  display:grid;
  gap:16px;
  padding:18px;
  border-radius:28px;
  background:linear-gradient(180deg,#dfeeff,#edf6ff 54%,#d7e8f6 54%,#e7f1f8);
  border:2px solid #b9d4eb;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.42),0 12px 28px rgba(49,101,145,.10);
  overflow:hidden;
}
.factory-machine::before,.factory-machine::after{content:"";position:absolute;top:0;width:90px;height:16px;background:repeating-linear-gradient(90deg,#f3b13f 0 18px,#2f74c9 18px 36px);opacity:.85}
.factory-machine::before{right:45px}.factory-machine::after{left:45px}
.factory-top-lights{display:flex;justify-content:center;gap:9px;position:relative;z-index:1}
.factory-top-lights i{width:18px;height:18px;border-radius:50%;background:#b9c9d5;border:3px solid #fff;box-shadow:0 2px 6px rgba(43,83,112,.15);transition:.25s}
.factory-top-lights i.done{background:#58b65f;box-shadow:0 0 0 5px rgba(88,182,95,.16),0 0 16px rgba(88,182,95,.42)}
.factory-workbench{display:grid;grid-template-columns:190px minmax(0,1fr) 170px;gap:18px;align-items:stretch;position:relative;z-index:1}
.factory-picture-card,.factory-output,.factory-build-zone{background:#fff;border:1px solid #cddfeb;border-radius:24px;box-shadow:0 8px 18px rgba(45,91,127,.08)}
.factory-picture-card{min-height:210px;display:grid;place-items:center;align-content:center;gap:8px;padding:16px;text-align:center}
.factory-picture-visual{font-size:5rem;line-height:1;min-height:92px;display:grid;place-items:center}
.factory-picture-visual .pm-scene{transform:scale(1.15)}
.factory-picture-card small{color:#6e8495;font-weight:800}
.factory-build-zone{display:grid;align-content:center;gap:14px;padding:20px;overflow:hidden}
.factory-build-label{font-weight:900;color:#456b89;text-align:center}
.factory-slots{direction:rtl;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-height:68px}
.factory-slots i{width:58px;height:62px;border-radius:16px;border:2px dashed #9bbdd9;background:#f6fbff;display:grid;place-items:center;font-style:normal;transition:.22s}
.factory-slots i span{font:800 1.8rem "KSAProject","Tajawal",sans-serif;color:#9bb0c1}
.factory-slots i.filled{border-style:solid;border-color:#64b66a;background:#eaf8e9;transform:translateY(-2px)}
.factory-slots i.filled span{color:#2f7d39}
.factory-conveyor{height:28px;border-radius:12px;background:#60798e;display:flex;align-items:center;justify-content:space-around;padding:0 10px;overflow:hidden}
.factory-conveyor i{width:18px;height:18px;border-radius:50%;background:#dfe9ef;border:3px solid #8ba1b1}
.factory-output{display:grid;place-items:center;align-content:center;gap:8px;padding:16px;text-align:center;border-color:#efd59e;background:linear-gradient(180deg,#fffdf7,#fff5df)}
.factory-output span{color:#8a6c2c;font-weight:800}.factory-output b{font:900 1.55rem "KSAProject","Tajawal",sans-serif;color:#8b6215;min-height:52px;display:grid;place-items:center}
.factory-token-tray{position:relative;z-index:1;display:grid;gap:10px;padding:15px 16px;border-radius:22px;background:#fff;border:1px solid #caddea}
.factory-token-tray>span{color:#56758d;font-weight:900}
.factory-token-tray>div{direction:rtl;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.factory-token{min-width:64px;min-height:62px;padding:7px 13px;border-radius:17px;border:1px solid #bcd5ea;background:#eef6ff;color:#1d5da6;font:900 1.8rem "KSAProject","Tajawal",sans-serif;cursor:pointer;box-shadow:0 5px 10px rgba(45,100,149,.08);transition:.18s}
.factory-token:hover{transform:translateY(-2px);border-color:#6fa5d4}.factory-token.used{background:#e9f7e7;color:#347b39;border-color:#7dc675;opacity:.55}.factory-token.wrong{background:#fde8e6;color:#a63e39;border-color:#e7857e}
.factory-machine.factory-success .factory-output{animation:factoryProductPop .62s ease;background:#eaf8e9;border-color:#7dc675}
.factory-machine.factory-success .factory-output b{color:#347b39}
.factory-machine.factory-success .factory-conveyor i{animation:factoryRoll .55s linear infinite}
@keyframes factoryProductPop{0%{transform:scale(.92)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes factoryRoll{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .student-sequence{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title back" "track track"}
  .student-sequence .sequence-track{justify-content:center;width:100%}
  .factory-dashboard{grid-template-columns:1fr}
  .factory-workbench{grid-template-columns:150px minmax(0,1fr)}
  .factory-output{grid-column:1/-1;min-height:90px}
}
@media(max-width:620px){
  .student-sequence{grid-template-columns:1fr auto;padding:9px}.student-sequence .sequence-unit-title{text-align:right}.student-sequence .sequence-unit-title strong{font-size:1rem}.student-sequence .sequence-back-btn{min-width:118px;padding:10px 12px}.student-sequence .sequence-track{gap:5px;overflow-x:auto;justify-content:flex-start}
  .factory-machine{padding:12px;border-radius:23px}.factory-workbench{grid-template-columns:1fr}.factory-picture-card{min-height:145px}.factory-picture-visual{font-size:4.2rem;min-height:72px}.factory-build-zone{padding:14px}.factory-output{grid-column:auto;min-height:78px}.factory-slots{gap:6px}.factory-slots i{width:49px;height:54px;border-radius:14px}.factory-slots i span,.factory-token{font-size:1.55rem}.factory-token{min-width:55px;min-height:56px;padding:6px 10px}.factory-token-tray>div{gap:7px}
}

/* v5.9.15 — شريط الدرس: رجوع يمين، الوحدة يسار، وسلسلة الحروف بجوارها */
.student-sequence{
  direction:ltr;
  grid-template-columns:auto minmax(250px,max-content) minmax(24px,1fr) auto;
  grid-template-areas:"track title . back";
  align-items:center;
  gap:12px;
}
.student-sequence .sequence-back-btn{
  grid-area:back;
  direction:rtl;
  justify-self:end;
}
.student-sequence .sequence-unit-title{
  grid-area:title;
  direction:rtl;
  justify-self:start;
  text-align:center;
  padding:10px 18px;
  border-radius:15px;
  background:linear-gradient(135deg,#e8f8ff,#dff4ff);
  border:1px solid #b9dff2;
  box-shadow:0 6px 14px rgba(61,151,193,.12);
}
.student-sequence .sequence-unit-title strong{
  color:#22749a;
  font-size:1.08rem;
  font-weight:900;
}
.student-sequence .sequence-track{
  grid-area:track;
  direction:rtl;
  justify-content:flex-start;
  width:auto;
  overflow:hidden;
}
@media(max-width:900px){
  .student-sequence{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"title back" "track track";
  }
  .student-sequence .sequence-unit-title{justify-self:start}
  .student-sequence .sequence-track{justify-content:flex-start;width:100%;overflow-x:auto}
}
@media(max-width:620px){
  .student-sequence{grid-template-columns:minmax(0,1fr) auto;padding:9px}
  .student-sequence .sequence-unit-title{padding:9px 13px;text-align:center}
  .student-sequence .sequence-unit-title strong{font-size:.96rem}
  .student-sequence .sequence-back-btn{min-width:116px;padding:10px 11px}
  .student-sequence .sequence-track{gap:5px;overflow-x:auto;justify-content:flex-start}
}

/* مصنع الكلمات: كل خيار حرف مجرد وفريد؛ الحرف المتكرر في الكلمة يُستخدم من الزر نفسه */
.factory-token{unicode-bidi:isolate;direction:rtl}
.factory-token:disabled.used{opacity:.5}


/* v5.9.16 — ترتيب شريط الطالب: اسم الوحدة ثم حروفها إلى يساره */
@media(min-width:901px){
  .student-sequence{grid-template-areas:"track title . back"}
}


/* v5.9.17 — teacher lesson strip mirrors student strip; journey permissions reorganized */
.teacher-sequence.student-sequence .sequence-unit-title .teacher-review-note{
  display:block;
  margin-top:3px;
  color:#4f7a54;
  font-size:.7rem;
  font-weight:800;
  white-space:nowrap;
}
.journey-release-overview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
.journey-release-column{
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid #dce8f0;
  border-radius:20px;
  background:linear-gradient(180deg,#fbfdff,#fff);
}
.journey-release-column .class-release-stat{
  min-height:94px;
}
.journey-next-release{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px;
  border:1px solid #e1eaf0;
  border-radius:16px;
  background:#fff;
}
.journey-next-release>div{
  min-width:0;
  display:grid;
  gap:3px;
}
.journey-next-release small{color:var(--muted);font-weight:800}
.journey-next-release strong{color:var(--ink);line-height:1.45}
.journey-next-release button{flex:0 0 auto}
.permission-journey-unit-option.open small{color:#397b3f}
.permission-journey-unit-option.locked small{color:#7a8b98}
.permission-journey-unit-option.open:not(.active){background:#f3fbf1;border-color:#cfe5ca}
.permission-journey-letter-card{min-height:72px;align-content:center;text-align:center}
.permission-journey-letter-card.open strong{color:#397b3f}
.permission-journey-letter-card.locked strong{color:#6f7f8b}
.permission-journey-letter-card.locked span{color:#8b98a2}
@media(max-width:900px){
  .journey-release-overview{grid-template-columns:1fr}
  .teacher-sequence.student-sequence .sequence-unit-title .teacher-review-note{white-space:normal}
}
@media(max-width:600px){
  .journey-next-release{align-items:stretch;flex-direction:column}
  .journey-next-release button{width:100%}
}


/* v5.9.18 — student journey modern layout with rollback flag in app.js */
.student-chip.static {
  cursor:default;
  box-shadow:0 10px 20px rgba(29,88,128,.06);
}
.student-chip.static small { color:#6f8090; }

.journey-modern .continue-journey-card {
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:26px;
  border:1px solid #d7e8f3;
  background:linear-gradient(135deg,#ffffff 0%,#f5fbff 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-shadow:0 14px 30px rgba(32,81,116,.08);
}
.journey-modern .continue-journey-card.coming-soon {
  background:linear-gradient(135deg,#fffef8 0%,#fff7e4 100%);
  border-color:#f0dfae;
}
.journey-modern .continue-journey-copy {
  min-width:0;
  display:grid;
  gap:7px;
}
.journey-modern .continue-journey-copy strong {
  color:var(--blue);
  font-size:1.16rem;
}
.journey-modern .continue-journey-copy > span {
  color:var(--muted);
  font-weight:700;
}
.journey-context-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.journey-context-tab {
  padding:7px 11px;
  border-radius:999px;
  font-size:.77rem;
  font-weight:850;
  line-height:1;
}
.journey-context-tab.part {
  background:#eef4ff;
  color:#4a6b98;
}
.journey-context-tab.unit {
  background:#f4f8fc;
  color:#5f7688;
}
.journey-modern .continue-journey-side {
  flex:0 0 auto;
  display:grid;
  gap:8px;
  justify-items:end;
}
.continue-journey-letter {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#e9f5ff;
  color:var(--blue);
  font:800 2.2rem "Baloo Bhaijaan 2",sans-serif;
  box-shadow:inset 0 0 0 1px #cfe4f4;
}
.continue-journey-progress {
  padding:6px 10px;
  border-radius:999px;
  background:#edf6fd;
  color:#5c7487;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}

.journey-modern .curriculum-parts { gap:18px; }
.journey-modern .curriculum-part {
  padding:18px;
  border-radius:30px;
  border:1px solid #dce8f2;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(249,252,255,.95) 100%);
}
.journey-modern .curriculum-part.current {
  border-color:#c6deef;
  box-shadow:0 18px 34px rgba(32,81,116,.08);
}
.journey-modern .curriculum-part-head {
  margin-bottom:12px;
}
.journey-modern .curriculum-part-title {
  min-width:0;
  display:grid;
  gap:6px;
}
.journey-modern .curriculum-part-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  max-width:100%;
  padding:10px 15px;
  border-radius:999px;
  background:#f2f7fb;
  color:var(--blue);
  font-weight:900;
}
.journey-modern .curriculum-part.current .curriculum-part-badge {
  background:#eef6ff;
  box-shadow:inset 0 0 0 1px #d4e7f4;
}
.journey-modern .curriculum-part-title small {
  color:var(--muted);
  font-weight:800;
}
.journey-modern .curriculum-part-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.journey-modern .curriculum-unit-tab {
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #dbe7ef;
  background:#f8fbfd;
  color:#6c8191;
  font-size:.78rem;
  font-weight:800;
}
.journey-modern .curriculum-unit-tab.open {
  background:#f3f9ff;
  color:#4c6f90;
}
.journey-modern .curriculum-unit-tab.current {
  background:#eaf5ff;
  border-color:#bfd8eb;
  color:var(--blue);
}
.journey-modern .curriculum-unit-tab.locked {
  background:#f7f9fb;
  color:#97a7b3;
}
.journey-modern .curriculum-units { gap:12px; }
.journey-modern .curriculum-unit-card {
  border-radius:24px;
  padding:15px;
  background:#fff;
}
.journey-modern .curriculum-unit-card.current {
  border-color:#c2dbed;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 10px 24px rgba(47,116,201,.08);
}
.journey-modern .curriculum-unit-card.current .curriculum-unit-head > small {
  color:var(--blue);
}
.journey-modern .curriculum-letter-row { gap:8px; }
.journey-modern .curriculum-letter {
  position:relative;
  min-height:76px;
  border-radius:18px;
  padding:7px 4px;
  gap:4px;
}
.journey-modern .curriculum-letter.current {
  border-color:#c6dced;
  background:#f2f8fe;
}
.journey-modern .curriculum-letter.focus {
  border-color:#82b5df;
  background:linear-gradient(180deg,#ffffff 0%,#e9f5ff 100%);
  box-shadow:0 0 0 3px rgba(72,136,190,.12);
  transform:translateY(-1px);
}
.journey-modern .curriculum-letter-glyph {
  font-size:1.6rem;
}
.journey-modern .curriculum-letter-state {
  font-size:.66rem;
  line-height:1.25;
}
.curriculum-letter-flag {
  position:absolute;
  top:8px;
  inset-inline-start:8px;
  padding:3px 6px;
  border-radius:999px;
  background:#dcf0ff;
  color:var(--blue);
  font-size:.56rem;
  font-weight:900;
  line-height:1;
}
.curriculum-letter-flag.subtle {
  background:#edf1f4;
  color:#738594;
}

@media (max-width:760px) {
  .journey-modern .continue-journey-card {
    align-items:stretch;
    flex-direction:column;
  }
  .journey-modern .continue-journey-side {
    width:100%;
    justify-items:stretch;
  }
  .journey-modern .continue-journey-letter {
    justify-self:start;
  }
  .journey-modern .continue-journey-side .primary-btn {
    width:100%;
  }
}
@media (max-width:430px) {
  .journey-modern .curriculum-part,
  .journey-modern .curriculum-unit-card {
    border-radius:22px;
  }
  .journey-modern .curriculum-part-badge,
  .journey-modern .curriculum-unit-tab,
  .journey-context-tab,
  .continue-journey-progress {
    font-size:.73rem;
  }
  .journey-modern .curriculum-letter {
    min-height:82px;
  }
}

/* v5.9.19 — refined student journey: part tabs + calmer identity badge */
.journey-modern .student-chip.static {
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:9px 14px;
  border-radius:15px;
  background:#fff;
}
.journey-modern .student-chip.static span {
  font-size:1rem;
  line-height:1.2;
}

.journey-part-nav {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0 0 16px;
  padding:7px;
  border:1px solid #dce8f1;
  border-radius:23px;
  background:#f5f9fc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.journey-part-nav-btn {
  min-width:0;
  border:1px solid transparent;
  border-radius:18px;
  background:transparent;
  padding:11px 13px;
  cursor:pointer;
  display:grid;
  gap:3px;
  text-align:right;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.journey-part-nav-btn:hover { transform:translateY(-1px); }
.journey-part-nav-btn span {
  color:#60788b;
  font-size:.98rem;
  font-weight:900;
}
.journey-part-nav-btn small {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8a9aa7;
  font-size:.7rem;
  font-weight:750;
}
.journey-part-nav-btn.active {
  border-color:#c5dded;
  background:#fff;
  box-shadow:0 8px 18px rgba(32,81,116,.07);
}
.journey-part-nav-btn.active span { color:var(--blue); }
.journey-part-nav-btn.active small { color:#6f8494; }

.journey-modern .curriculum-part {
  scroll-margin-top:18px;
}
.journey-modern .curriculum-part:not(.current) {
  box-shadow:0 9px 22px rgba(32,81,116,.045);
}
.journey-modern .curriculum-unit-head > small {
  padding:5px 8px;
  border-radius:999px;
  background:#f4f7fa;
}
.journey-modern .curriculum-unit-card.current .curriculum-unit-head > small {
  background:#eaf5ff;
}
.journey-modern .curriculum-letter.locked {
  opacity:.8;
}
.journey-modern .curriculum-letter.completed .curriculum-letter-state {
  color:#397b40;
}
.journey-modern .curriculum-letter.focus .curriculum-letter-glyph {
  transform:scale(1.08);
}

@media (max-width:560px) {
  .journey-part-nav {
    grid-template-columns:1fr;
    border-radius:20px;
  }
  .journey-part-nav-btn {
    padding:10px 12px;
  }
}


/* v5.9.20 — journey parts redesigned as right-side part card + stacked units */
.journey-modern .curriculum-parts {
  gap:20px;
}
.journey-modern .curriculum-part.journey-part-stacked {
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:18px;
  border-radius:30px;
  border:1px solid #dce8f2;
  background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(248,251,254,.96) 100%);
  box-shadow:0 10px 28px rgba(32,81,116,.06);
}
.journey-modern .curriculum-part.journey-part-stacked.current {
  border-color:#c5dced;
  box-shadow:0 16px 34px rgba(32,81,116,.08);
}
.journey-modern .journey-part-side {
  min-width:0;
}
.journey-modern .journey-part-side-card {
  min-height:100%;
  padding:20px 18px;
  border-radius:26px;
  border:1px solid #d7e7f2;
  background:linear-gradient(180deg,#ffffff 0%,#f4f9fd 100%);
  display:grid;
  gap:12px;
  align-content:start;
}
.journey-modern .journey-part-side-card strong {
  color:var(--blue);
  font-size:1.2rem;
}
.journey-modern .journey-part-side-card small {
  color:var(--muted);
  font-weight:800;
}
.journey-modern .journey-part-side-card .curriculum-part-badge {
  margin:0;
  width:100%;
  justify-content:flex-start;
  padding:14px 16px;
  font-size:1.05rem;
}
.journey-modern .journey-part-unit-list {
  display:grid;
  gap:8px;
}
.journey-modern .journey-part-unit-list span {
  display:block;
  padding:10px 12px;
  border-radius:16px;
  background:#f7fbfe;
  color:#657c8e;
  font-weight:800;
  border:1px solid #e1ebf2;
}
.journey-modern .journey-part-content {
  min-width:0;
}
.journey-modern .curriculum-units.stacked {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.journey-modern .curriculum-unit-card.modern {
  border-radius:24px;
  padding:16px;
  border:1px solid #dbe7f0;
  background:#fff;
}
.journey-modern .curriculum-unit-card.modern.current {
  border-color:#bfd9ec;
  box-shadow:0 10px 22px rgba(47,116,201,.08);
}
.journey-modern .curriculum-unit-head {
  margin-bottom:12px;
}
.journey-modern .curriculum-unit-head > div {
  gap:10px;
}
.journey-modern .curriculum-unit-head h4 {
  font-size:1.18rem;
}
.journey-modern .curriculum-unit-head > small {
  padding:8px 12px;
  border-radius:999px;
  background:#f3f8fc;
  color:#6a8091;
  font-size:.78rem;
  font-weight:850;
}
.journey-modern .curriculum-unit-card.current .curriculum-unit-head > small {
  background:#eaf5ff;
  color:var(--blue);
}
.journey-modern .curriculum-letter-row {
  grid-template-columns:repeat(6,minmax(72px,1fr));
  gap:9px;
}
.journey-modern .curriculum-letter {
  min-height:94px;
  padding:10px 4px;
  border-radius:18px;
  display:grid;
  grid-template-rows:auto auto;
  align-content:center;
  justify-items:center;
  gap:8px;
}
.journey-modern .curriculum-letter-glyph {
  font-size:1.8rem;
  line-height:1;
}
.journey-modern .curriculum-letter-state {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  font-size:.72rem;
  font-weight:900;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
}
.journey-modern .curriculum-letter.open .curriculum-letter-state,
.journey-modern .curriculum-letter.current .curriculum-letter-state {
  background:#ffffff;
}
.journey-modern .curriculum-letter.focus {
  border-color:#7fb1db;
  background:linear-gradient(180deg,#ffffff 0%,#e8f4ff 100%);
  box-shadow:0 0 0 3px rgba(72,136,190,.12);
}
.journey-modern .curriculum-letter.focus .curriculum-letter-state {
  background:#dff0ff;
  color:var(--blue);
}
.journey-modern .curriculum-letter.completed {
  background:#eef8ec;
}
.journey-modern .curriculum-letter.completed .curriculum-letter-state {
  background:#deefd9;
  color:#397b40;
}
.journey-modern .curriculum-letter.locked {
  background:#f7f9fb;
  color:#97a6b2;
}
.journey-modern .curriculum-letter.locked .curriculum-letter-state {
  background:#eef2f5;
  color:#8998a4;
}
.journey-modern .curriculum-letter.coming-soon .curriculum-letter-state {
  background:#fff2d9;
  color:#8b6a1f;
}

@media (max-width:1024px) {
  .journey-modern .curriculum-part.journey-part-stacked {
    grid-template-columns:220px minmax(0,1fr);
  }
}
@media (max-width:760px) {
  .journey-modern .curriculum-part.journey-part-stacked {
    grid-template-columns:1fr;
  }
  .journey-modern .journey-part-side-card {
    gap:10px;
  }
  .journey-modern .curriculum-letter-row {
    grid-template-columns:repeat(4,minmax(64px,1fr));
  }
}
@media (max-width:430px) {
  .journey-modern .curriculum-part.journey-part-stacked,
  .journey-modern .curriculum-unit-card.modern {
    padding:14px;
    border-radius:22px;
  }
  .journey-modern .curriculum-letter-row {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .journey-modern .curriculum-letter {
    min-height:88px;
  }
  .journey-modern .curriculum-unit-head {
    align-items:flex-start;
    flex-direction:column;
  }
}


/* v5.9.22 — compact horizontal journey parts (idea A) */
.journey-modern .curriculum-parts {
  display:grid;
  gap:14px;
}
.journey-modern .curriculum-part.journey-part-compact {
  display:flex;
  flex-direction:row-reverse;
  align-items:stretch;
  gap:12px;
  padding:14px;
  border-radius:26px;
  border:1px solid #dce8f2;
  background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%);
  box-shadow:0 10px 24px rgba(32,81,116,.05);
}
.journey-modern .curriculum-part.journey-part-compact.current {
  border-color:#c8deef;
  box-shadow:0 14px 28px rgba(32,81,116,.08);
}
.journey-modern .journey-part-side {
  flex:0 0 190px;
  min-width:190px;
}
.journey-modern .journey-part-side-card {
  height:100%;
  padding:16px 15px;
  border-radius:22px;
  border:1px solid #d7e6f0;
  background:linear-gradient(180deg,#fdfefe 0%,#f1f7fb 100%);
  display:grid;
  align-content:center;
  gap:10px;
  text-align:center;
}
.journey-modern .journey-part-side-card .curriculum-part-badge {
  width:100%;
  justify-content:center;
  margin:0;
  padding:12px 14px;
  border-radius:18px;
  font-size:1.06rem;
}
.journey-modern .journey-part-side-card strong {
  color:var(--blue);
  font-size:1.3rem;
  line-height:1;
}
.journey-modern .journey-part-side-card small {
  color:var(--muted);
  font-weight:850;
}
.journey-modern .journey-part-content {
  min-width:0;
  flex:1 1 auto;
}
.journey-modern .curriculum-units.compact {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.journey-modern .curriculum-unit-card.compact {
  border:1px solid #dbe7f0;
  border-radius:20px;
  background:#fff;
  padding:10px;
  min-width:0;
}
.journey-modern .curriculum-unit-card.compact.current {
  border-color:#bdd7ea;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  box-shadow:0 8px 18px rgba(47,116,201,.07);
}
.journey-modern .curriculum-unit-toggle {
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:inherit;
  cursor:pointer;
}
.journey-modern .curriculum-unit-card.compact .curriculum-unit-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.journey-modern .curriculum-unit-card.compact .curriculum-unit-head > div {
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.journey-modern .curriculum-unit-card.compact .curriculum-unit-head h4 {
  margin:0;
  font-size:1rem;
  color:var(--ink);
}
.journey-modern .curriculum-unit-card.compact .curriculum-unit-head span {
  padding:4px 7px;
  border-radius:999px;
  background:#eef7ff;
  color:var(--blue);
  font-size:.72rem;
  font-weight:850;
}
.journey-modern .curriculum-unit-card.compact .curriculum-unit-head small {
  padding:5px 9px;
  border-radius:999px;
  background:#f3f8fc;
  color:#6a8091;
  font-size:.72rem;
  font-weight:850;
  white-space:nowrap;
}
.journey-modern .curriculum-unit-card.compact.current .curriculum-unit-head small {
  background:#e7f3ff;
  color:var(--blue);
}
.journey-modern .curriculum-letter-row-wrap {
  min-width:0;
}
.journey-modern .curriculum-unit-card.compact .curriculum-letter-row {
  display:grid;
  grid-template-columns:repeat(6,minmax(48px,1fr));
  gap:6px;
}
.journey-modern .curriculum-unit-card.compact .curriculum-letter {
  min-height:72px;
  border-radius:16px;
  padding:8px 3px;
  gap:6px;
}
.journey-modern .curriculum-unit-card.compact .curriculum-letter-glyph {
  font-size:1.55rem;
  line-height:1;
}
.journey-modern .curriculum-unit-card.compact .curriculum-letter-state {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  font-size:.66rem;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.journey-modern .curriculum-unit-card.compact .curriculum-letter.focus .curriculum-letter-state {
  background:#dff0ff;
  color:var(--blue);
}
.journey-modern .curriculum-unit-card.compact .curriculum-letter.completed .curriculum-letter-state {
  background:#deefd9;
  color:#397b40;
}
.journey-modern .curriculum-unit-card.compact .curriculum-letter.locked .curriculum-letter-state {
  background:#edf1f4;
  color:#8b99a5;
}
.journey-modern .curriculum-unit-card.compact .curriculum-letter.coming-soon .curriculum-letter-state {
  background:#fff2d9;
  color:#8b6a1f;
}

@media (max-width:1100px) {
  .journey-modern .journey-part-side {
    flex-basis:170px;
    min-width:170px;
  }
  .journey-modern .curriculum-units.compact {
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:760px) {
  .journey-modern .curriculum-part.journey-part-compact {
    flex-direction:column;
    padding:12px;
  }
  .journey-modern .journey-part-side {
    min-width:0;
    flex-basis:auto;
  }
  .journey-modern .journey-part-side-card {
    text-align:right;
    align-content:start;
  }
  .journey-modern .journey-part-side-card .curriculum-part-badge {
    width:auto;
    justify-content:flex-start;
  }
  .journey-modern .curriculum-units.compact {
    grid-template-columns:1fr;
    gap:8px;
  }
  .journey-modern .curriculum-unit-card.compact {
    padding:9px;
  }
  .journey-modern .curriculum-unit-card.compact .curriculum-unit-head {
    margin-bottom:0;
  }
  .journey-modern .curriculum-letter-row-wrap {
    display:none;
    padding-top:9px;
  }
  .journey-modern .curriculum-unit-card.compact.current .curriculum-letter-row-wrap,
  .journey-modern .curriculum-unit-card.compact.manual-open .curriculum-letter-row-wrap {
    display:block;
  }
  .journey-modern .curriculum-unit-card.compact .curriculum-letter-row {
    grid-template-columns:repeat(6,minmax(42px,1fr));
  }
}
@media (max-width:430px) {
  .journey-modern .curriculum-unit-card.compact .curriculum-letter-row {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .journey-modern .curriculum-unit-card.compact .curriculum-letter {
    min-height:68px;
  }
}


/* v5.9.23 — row-based journey layout for student and teacher */
.journey-modern .journey-part-switcher {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0 0 16px;
}
.journey-modern .journey-part-switch {
  border:1px solid #d9e7f1;
  background:#fff;
  border-radius:22px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  color:inherit;
  box-shadow:0 8px 18px rgba(32,81,116,.05);
}
.journey-modern .journey-part-switch strong {
  color:var(--blue);
  font-size:1.06rem;
}
.journey-modern .journey-part-switch small {
  color:#6e8292;
  font-size:.82rem;
  font-weight:850;
  white-space:nowrap;
}
.journey-modern .journey-part-switch.active {
  background:linear-gradient(180deg,#ffffff 0%,#f3f9ff 100%);
  border-color:#bed8eb;
  box-shadow:0 12px 24px rgba(47,116,201,.08);
}
.journey-modern .curriculum-parts {
  gap:0;
}
.journey-modern .journey-part-panel {
  opacity:1 !important;
  transform:none !important;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:14px;
  padding:16px;
  border-radius:28px;
  border:1px solid #dce8f2;
  background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%);
  box-shadow:0 10px 26px rgba(32,81,116,.06);
}
.journey-modern .journey-part-summary {
  min-width:0;
}
.journey-modern .journey-part-summary-card {
  height:100%;
  padding:18px 16px;
  border-radius:24px;
  border:1px solid #d6e5f0;
  background:linear-gradient(180deg,#fbfdff 0%,#f2f8fc 100%);
  display:grid;
  align-content:center;
  gap:10px;
  text-align:center;
}
.journey-modern .journey-part-summary-card .curriculum-part-badge {
  width:100%;
  justify-content:center;
  margin:0;
  padding:13px 16px;
  border-radius:18px;
}
.journey-modern .journey-part-summary-card strong {
  color:var(--blue);
  font-size:1.36rem;
  line-height:1;
}
.journey-modern .journey-part-summary-card small {
  color:#6c8090;
  font-weight:850;
}
.journey-modern .journey-part-rows {
  display:grid;
  gap:10px;
}
.journey-modern .journey-unit-row {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid #dbe7f0;
  border-radius:22px;
  background:#fff;
}
.journey-modern .journey-unit-row.current {
  border-color:#bfd9ec;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  box-shadow:0 10px 20px rgba(47,116,201,.06);
}
.journey-modern .journey-unit-label {
  min-width:0;
  display:grid;
  gap:7px;
}
.journey-modern .journey-unit-label h4 {
  margin:0;
  color:var(--ink);
  font-size:1.08rem;
}
.journey-modern .journey-unit-meta {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.journey-modern .journey-unit-meta span,
.journey-modern .journey-unit-meta small {
  padding:5px 9px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:850;
  line-height:1;
}
.journey-modern .journey-unit-meta span {
  background:#eef7ff;
  color:var(--blue);
}
.journey-modern .journey-unit-meta small {
  background:#f3f8fc;
  color:#6a8091;
}
.journey-modern .journey-unit-row.current .journey-unit-meta small {
  background:#e7f3ff;
  color:var(--blue);
}
.journey-modern .journey-unit-letters {
  min-width:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.journey-modern .curriculum-letter.row-letter {
  min-height:78px;
  border-radius:18px;
  padding:8px 4px;
  gap:6px;
  box-shadow:none;
}
.journey-modern .curriculum-letter.row-letter .curriculum-letter-glyph {
  font-size:1.65rem;
  line-height:1;
}
.journey-modern .curriculum-letter.row-letter .curriculum-letter-state {
  min-height:24px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.journey-modern .curriculum-letter.row-letter.completed .curriculum-letter-state {
  background:#deefd9;
  color:#397b40;
}
.journey-modern .curriculum-letter.row-letter.focus .curriculum-letter-state {
  background:#dff0ff;
  color:var(--blue);
}
.journey-modern .curriculum-letter.row-letter.locked .curriculum-letter-state {
  background:#edf1f4;
  color:#8b99a5;
}
.journey-modern .curriculum-letter.row-letter.coming-soon .curriculum-letter-state {
  background:#fff2d9;
  color:#8b6a1f;
}

@media (max-width:980px) {
  .journey-modern .journey-part-panel {
    grid-template-columns:190px minmax(0,1fr);
  }
  .journey-modern .journey-unit-row {
    grid-template-columns:132px minmax(0,1fr);
  }
}
@media (max-width:760px) {
  .journey-modern .journey-part-switcher {
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .journey-modern .journey-part-switch {
    padding:12px 14px;
    border-radius:18px;
    align-items:flex-start;
    flex-direction:column;
  }
  .journey-modern .journey-part-panel {
    grid-template-columns:1fr;
    padding:14px;
    border-radius:24px;
  }
  .journey-modern .journey-part-summary-card {
    text-align:right;
    align-content:start;
  }
  .journey-modern .journey-part-summary-card .curriculum-part-badge {
    width:auto;
    justify-content:flex-start;
  }
  .journey-modern .journey-unit-row {
    grid-template-columns:1fr;
    align-items:start;
    gap:10px;
  }
  .journey-modern .journey-unit-letters {
    grid-template-columns:repeat(6,minmax(42px,1fr));
    gap:6px;
  }
  .journey-modern .curriculum-letter.row-letter {
    min-height:72px;
  }
}
@media (max-width:430px) {
  .journey-modern .journey-unit-letters {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .journey-modern .curriculum-letter.row-letter {
    min-height:70px;
  }
  .journey-modern .curriculum-letter.row-letter .curriculum-letter-glyph {
    font-size:1.55rem;
  }
}


/* v5.9.24 — fix progress HTML rendering + stronger state colors for open/focus */
.journey-modern .journey-part-switch .progress-fraction,
.journey-modern .journey-unit-meta .progress-fraction,
.journey-modern .journey-part-summary-card .progress-fraction {
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
}
.journey-modern .journey-part-summary-card strong .progress-fraction {
  color:var(--blue);
  font-size:1.36rem;
  font-weight:inherit;
}

.journey-modern .curriculum-letter.row-letter.open {
  background:linear-gradient(180deg,#fffdf0 0%,#fff6cf 100%);
  border-color:#efd98a;
}
.journey-modern .curriculum-letter.row-letter.open .curriculum-letter-glyph {
  color:#9b7600;
}
.journey-modern .curriculum-letter.row-letter.open .curriculum-letter-state {
  background:#f7eab0;
  color:#8b6a00;
}
.journey-modern .curriculum-letter.row-letter.focus {
  background:linear-gradient(180deg,#2d67c8 0%,#2155b6 100%);
  border-color:#1f4ea8;
  box-shadow:0 10px 18px rgba(33,85,182,.22);
}
.journey-modern .curriculum-letter.row-letter.focus .curriculum-letter-glyph {
  color:#ffffff;
}
.journey-modern .curriculum-letter.row-letter.focus .curriculum-letter-state {
  background:#ffffff;
  color:#2155b6;
}

.journey-modern .curriculum-letter.row-letter.completed {
  background:linear-gradient(180deg,#eef8ec 0%,#dff0d8 100%);
  border-color:#bfdcaf;
}
.journey-modern .curriculum-letter.row-letter.completed .curriculum-letter-glyph {
  color:#2f7a3b;
}
.journey-modern .curriculum-letter.row-letter.completed .curriculum-letter-state {
  background:#deefd9;
  color:#397b40;
}

/* v5.9.26 — persistent teacher review return control */
.teacher-preview-toolbar {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0 0 14px;
  flex-wrap:wrap;
}
.teacher-preview-toolbar .teacher-mode-pill {
  min-height:44px;
}
.teacher-preview-back-btn {
  min-height:44px;
  padding:11px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,#f39a3f,#e8792d);
  color:#fff;
  border:1px solid rgba(176,93,25,.16);
  box-shadow:0 7px 16px rgba(201,112,35,.22);
  font-family:inherit;
  font-weight:850;
  cursor:pointer;
}
.teacher-preview-back-btn:hover {
  transform:translateY(-1px);
  filter:brightness(1.02);
}
@media (max-width:560px) {
  .teacher-preview-toolbar {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .teacher-preview-toolbar .teacher-mode-pill {
    justify-content:center;
    min-width:0;
  }
  .teacher-preview-back-btn {
    min-width:118px;
    padding-inline:13px;
  }
}


/* v5.9.28 — media recovery without layout jumps */
.lesson-card img.lesson-media-failed { opacity:.18; filter:grayscale(1); }

/* v5.9.29 — final journey polish: denser, calmer, touch-safe */
.journey-modern .page-head { align-items:center; gap:14px; margin-bottom:16px; }
.journey-modern .journey-head-tools { gap:8px; }
.journey-modern .student-chip.static,
.journey-modern .progress-pill { box-shadow:0 6px 16px rgba(29,88,128,.055); }
.journey-modern .student-chip.static { min-height:42px; padding:8px 13px; border-radius:15px; }

.journey-modern .continue-journey-card {
  margin-bottom:14px; padding:13px 15px; border-radius:22px; gap:14px;
  box-shadow:0 9px 22px rgba(32,81,116,.065);
}
.journey-modern .continue-journey-copy { gap:5px; }
.journey-modern .continue-journey-copy strong { font-size:1.1rem; }
.journey-modern .continue-journey-copy > span { font-size:.93rem; line-height:1.55; }
.journey-context-tabs { gap:6px; }
.journey-context-tab { padding:6px 9px; font-size:.73rem; }
.journey-modern .continue-journey-side { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.continue-journey-letter { width:50px; height:50px; border-radius:17px; font-size:2rem; }
.continue-journey-progress { padding:6px 9px; font-size:.74rem; }
.journey-modern .continue-journey-side .primary-btn { min-height:44px; padding:10px 16px; border-radius:14px; }

.journey-modern .journey-part-switcher { gap:8px; margin-bottom:12px; }
.journey-modern .journey-part-switch {
  min-height:52px; padding:10px 14px; border-radius:18px; box-shadow:0 5px 14px rgba(32,81,116,.045);
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.journey-modern .journey-part-switch:hover { transform:translateY(-1px); border-color:#c9dfed; }
.journey-modern .journey-part-switch.active { box-shadow:0 7px 18px rgba(47,116,201,.07); }
.journey-modern .journey-part-switch strong { font-size:1rem; }
.journey-modern .journey-part-switch small { font-size:.77rem; }

.journey-modern .journey-part-panel {
  grid-template-columns:178px minmax(0,1fr); gap:11px; padding:13px; border-radius:24px;
  box-shadow:0 8px 22px rgba(32,81,116,.05);
}
.journey-modern .journey-part-summary-card { padding:14px 12px; border-radius:20px; gap:8px; }
.journey-modern .journey-part-summary-card .curriculum-part-badge { padding:11px 12px; border-radius:16px; font-size:.96rem; }
.journey-modern .journey-part-summary-card strong,
.journey-modern .journey-part-summary-card strong .progress-fraction { font-size:1.18rem; }
.journey-modern .journey-part-summary-card small { font-size:.76rem; }

.journey-modern .journey-part-rows { gap:8px; }
.journey-modern .journey-unit-row {
  grid-template-columns:138px minmax(0,1fr); gap:10px; padding:8px 10px; border-radius:19px;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.journey-modern .journey-unit-row.current { box-shadow:0 7px 16px rgba(47,116,201,.055); }
.journey-modern .journey-unit-label { gap:6px; }
.journey-modern .journey-unit-label h4 { font-size:1rem; }
.journey-modern .journey-unit-meta { gap:5px; }
.journey-modern .journey-unit-meta span,
.journey-modern .journey-unit-meta small { padding:4px 7px; font-size:.68rem; }

.journey-modern .journey-unit-letters { gap:7px; }
.journey-modern .curriculum-letter.row-letter {
  min-height:70px; border-radius:16px; padding:7px 3px; gap:5px;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.journey-modern .curriculum-letter.row-letter:not(.locked):hover { transform:translateY(-1px); }
.journey-modern .curriculum-letter.row-letter .curriculum-letter-glyph { font-size:1.62rem; }
.journey-modern .curriculum-letter.row-letter .curriculum-letter-state { min-height:22px; padding:3px 6px; font-size:.64rem; }
.journey-modern .curriculum-letter.row-letter.focus { box-shadow:0 7px 16px rgba(33,85,182,.18); }

.journey-modern .journey-part-switch:focus-visible,
.journey-modern .curriculum-letter.row-letter:focus-visible,
.teacher-preview-back-btn:focus-visible { outline:3px solid rgba(47,116,201,.28); outline-offset:2px; }

.teacher-preview-toolbar { gap:8px; margin-bottom:12px; }
.teacher-preview-toolbar .teacher-mode-pill,
.teacher-preview-back-btn { min-height:42px; }
.teacher-preview-back-btn { padding:9px 15px; border-radius:13px; box-shadow:0 5px 12px rgba(201,112,35,.18); }

@media (max-width:980px) {
  .journey-modern .journey-part-panel { grid-template-columns:158px minmax(0,1fr); }
  .journey-modern .journey-unit-row { grid-template-columns:124px minmax(0,1fr); }
  .journey-modern .curriculum-letter.row-letter { min-height:68px; }
}

@media (max-width:760px) {
  .journey-modern .page-head { gap:10px; margin-bottom:13px; }
  .journey-modern .continue-journey-card { padding:12px; gap:10px; }
  .journey-modern .continue-journey-side {
    display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; justify-items:stretch; gap:7px 9px;
  }
  .journey-modern .continue-journey-side .continue-journey-letter { grid-row:1; grid-column:1; }
  .journey-modern .continue-journey-side .continue-journey-progress { grid-row:1; grid-column:2; justify-self:start; }
  .journey-modern .continue-journey-side .primary-btn { grid-column:1 / -1; width:100%; }
  .journey-modern .journey-part-switch { min-height:48px; padding:9px 11px; border-radius:16px; gap:4px; }
  .journey-modern .journey-part-panel { grid-template-columns:1fr; gap:9px; padding:11px; border-radius:21px; }
  .journey-modern .journey-part-summary-card {
    min-height:0; grid-template-columns:auto auto 1fr; align-items:center; align-content:center; gap:8px;
    padding:9px 10px; text-align:right; border-radius:17px;
  }
  .journey-modern .journey-part-summary-card .curriculum-part-badge { width:auto; padding:8px 10px; border-radius:14px; }
  .journey-modern .journey-part-summary-card strong,
  .journey-modern .journey-part-summary-card strong .progress-fraction { font-size:1rem; white-space:nowrap; }
  .journey-modern .journey-part-summary-card small { justify-self:end; white-space:nowrap; }
  .journey-modern .journey-unit-row { grid-template-columns:1fr; gap:7px; padding:8px; border-radius:17px; }
  .journey-modern .journey-unit-label { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .journey-modern .journey-unit-meta { justify-content:flex-end; flex-wrap:nowrap; }
  .journey-modern .journey-unit-letters { grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
  .journey-modern .curriculum-letter.row-letter { min-height:64px; border-radius:14px; padding:6px 2px; }
  .journey-modern .curriculum-letter.row-letter .curriculum-letter-glyph { font-size:1.48rem; }
  .journey-modern .curriculum-letter.row-letter .curriculum-letter-state { min-height:20px; padding:2px 4px; font-size:.59rem; }
}

@media (max-width:360px) {
  .journey-modern .journey-unit-letters { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
}

@media (prefers-reduced-motion:reduce) {
  .journey-modern .journey-part-switch,
  .journey-modern .curriculum-letter.row-letter,
  .teacher-preview-back-btn { transition:none !important; transform:none !important; }
}

/* v5.9.54 — طباعة جماعية مرنة لبطاقات دخول الطلاب */
.student-print-options-dialog { width:min(620px,100%); }
.student-print-options-head { text-align:right; padding:4px 4px 0; }
.student-print-options-head > span { color:#ef625e; font-size:.8rem; font-weight:850; }
.student-print-options-head h3 { margin:4px 0 5px; color:var(--blue); font-size:1.5rem; }
.student-print-options-head p { margin:0; color:#617789; line-height:1.75; font-weight:650; }
.student-print-count { margin:15px 0 11px; padding:10px 13px; border-radius:14px; background:#f2f7fb; border:1px solid #dce8f0; color:#627789; }
.student-print-count b { color:var(--blue); font-size:1.05rem; }
.student-print-density { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.student-print-density label { cursor:pointer; }
.student-print-density input { position:absolute; opacity:0; pointer-events:none; }
.student-print-density span { min-height:108px; padding:14px 10px; border:2px solid #dce8f0; border-radius:18px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#486176; transition:.15s ease; }
.student-print-density span b { color:var(--blue); font-size:1.75rem; line-height:1; }
.student-print-density span small { color:#7a8b99; font-size:.78rem; }
.student-print-density input:checked + span { border-color:#79aaf0; background:#edf5ff; box-shadow:0 0 0 3px rgba(44,105,198,.08); }
.student-print-options-actions { display:flex; gap:9px; margin-top:15px; }
.student-print-options-actions .primary-btn { flex:1; }
.student-print-options-actions .ghost-btn { flex:0 0 110px; }
.student-print-hint { margin:10px 0 0; color:#7a8996; font-size:.8rem; line-height:1.6; text-align:center; }
@media (max-width:560px) {
  .student-print-density { grid-template-columns:1fr; }
  .student-print-density span { min-height:72px; flex-direction:row; gap:8px; }
  .student-print-density span small { margin-inline-start:auto; }
  .student-print-options-actions { flex-direction:column; }
  .student-print-options-actions .ghost-btn { flex-basis:auto; }
}

/* v5.9.56 — إعادة التسجيل الموثقة + مطابقة ألوان المتابعة في الطباعة */
.voice-rerecord-toggle,
.voice-rerecord-flag {
  display:inline-flex; align-items:center; justify-content:center; min-width:56px; min-height:32px;
  padding:5px 11px; border-radius:10px; font:inherit; font-weight:850; line-height:1; white-space:nowrap;
}
.voice-rerecord-toggle { cursor:pointer; }
.voice-rerecord-toggle.no,
.voice-rerecord-flag.no { background:#f1f3f5; color:#687680; border:1px solid #dfe3e7; }
.voice-rerecord-toggle.no:hover { background:#e9edf0; border-color:#cfd6dc; color:#53616b; }
.voice-rerecord-flag.needs { background:#fdebea; color:#9b3f39; border:1px solid #efc6c2; }
.voice-student-rerecord-request {
  display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px;
  border-radius:12px; border:1px solid #efc6c2; background:#fdebea; color:#9b3f39;
  font:inherit; font-weight:900; cursor:pointer; box-shadow:0 2px 0 rgba(141,51,46,.05);
}
.voice-student-rerecord-request:hover { background:#f9dfdd; border-color:#e8b3ae; }
.voice-rerecord-active-note {
  display:inline-flex; align-items:center; min-height:38px; padding:7px 12px; border-radius:12px;
  background:#fdebea; color:#8d332e; border:1px solid #efc6c2; font-weight:850;
}
.voice-attempts-table .voice-attempt-child td,
.voice-attempts-table .voice-attempt-pending td { background:#fbfdff; }
.voice-attempts-table .voice-attempt-child td:first-child,
.voice-attempts-table .voice-attempt-pending td:first-child { padding-inline-start:24px; }
.voice-attempt-label { color:#607789; font-weight:800; white-space:nowrap; }
.voice-attempt-pending .voice-attempt-label { color:#866215; }
.voice-attempt-pending td { border-top-style:dashed; }

/* نفس ألوان الحالات الظاهرة أعلى قوائم المتابعة، من دون تحويلها إلى أبيض وأسود عند الطباعة. */
.teacher-print-counts span.total,
.teacher-tabular-report .teacher-print-counts span.total {
  background:#f5f9fc!important; color:#627586!important; border-color:#e0ebf2!important;
}
.teacher-print-counts span.total b,
.teacher-tabular-report .teacher-print-counts span.total b { color:#184b9f!important; }
.teacher-print-counts span.completed,
.teacher-tabular-report .teacher-print-counts span.completed {
  background:#e8f7e5!important; color:#347b39!important; border-color:#cbe8c5!important;
}
.teacher-print-counts span.completed b,
.teacher-tabular-report .teacher-print-counts span.completed b { color:#2f7e37!important; }
.teacher-print-counts span.in-progress,
.teacher-tabular-report .teacher-print-counts span.in-progress {
  background:#fff3d7!important; color:#866215!important; border-color:#efd79a!important;
}
.teacher-print-counts span.in-progress b,
.teacher-tabular-report .teacher-print-counts span.in-progress b { color:#7a5911!important; }
.teacher-print-counts span.not-started,
.teacher-tabular-report .teacher-print-counts span.not-started {
  background:#fdebea!important; color:#9b3f39!important; border-color:#efc6c2!important;
}
.teacher-print-counts span.not-started b,
.teacher-tabular-report .teacher-print-counts span.not-started b { color:#8d332e!important; }
.teacher-print-status {
  display:inline-flex; align-items:center; justify-content:center; width:fit-content; border-radius:999px;
  padding:5px 9px; font-weight:850; white-space:nowrap; border:1px solid transparent;
}
.teacher-print-status.completed { background:#e8f7e5!important; color:#347b39!important; border-color:#cbe8c5!important; }
.teacher-print-status.in-progress { background:#fff3d7!important; color:#866215!important; border-color:#efd79a!important; }
.teacher-print-status.not-started { background:#fdebea!important; color:#9b3f39!important; border-color:#efc6c2!important; }
.teacher-print-status.rerecord-no { background:#f1f3f5!important; color:#687680!important; border-color:#dfe3e7!important; }
.teacher-print-status.rerecord-needed { background:#fdebea!important; color:#9b3f39!important; border-color:#efc6c2!important; }

@media print {
  .teacher-print-sheet,.teacher-print-sheet * { -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
  .teacher-print-counts span.total,.teacher-tabular-report .teacher-print-counts span.total { background:#f5f9fc!important; color:#627586!important; border-color:#e0ebf2!important; }
  .teacher-print-counts span.completed,.teacher-tabular-report .teacher-print-counts span.completed { background:#e8f7e5!important; color:#347b39!important; border-color:#cbe8c5!important; }
  .teacher-print-counts span.in-progress,.teacher-tabular-report .teacher-print-counts span.in-progress { background:#fff3d7!important; color:#866215!important; border-color:#efd79a!important; }
  .teacher-print-counts span.not-started,.teacher-tabular-report .teacher-print-counts span.not-started { background:#fdebea!important; color:#9b3f39!important; border-color:#efc6c2!important; }
}

@media (max-width:700px) {
  .voice-attempts-table .voice-attempt-child td:first-child,
  .voice-attempts-table .voice-attempt-pending td:first-child { padding-inline-start:14px; }
}


/* v5.9.57 — شرح البرنامج: شرحان قبل الدخول + مكتبة فيديو مرئية بعد الدخول */
.student-entry-guides {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px auto 0; width:100%;
}
.entry-guide-card {
  min-width:0; min-height:92px; border:1px solid transparent; border-radius:22px; padding:12px 13px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:right; font-family:inherit;
  box-shadow:0 9px 22px rgba(28,75,108,.08); transition:transform .16s ease,box-shadow .16s ease;
}
.entry-guide-card:hover { transform:translateY(-1px); box-shadow:0 12px 25px rgba(28,75,108,.12); }
.entry-guide-card.blue { background:#eaf4ff; color:#1f5fae; border-color:#bfd8f2; }
.entry-guide-card.green { background:#eaf8f1; color:#287a55; border-color:#c4e7d4; }
.entry-guide-copy { min-width:0; display:grid; gap:4px; }
.entry-guide-copy b { display:flex; align-items:center; gap:7px; font-size:.98rem; line-height:1.55; }
.entry-guide-copy b i { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.78); font-style:normal; flex:0 0 28px; }
.entry-guide-copy small { color:currentColor; opacity:.78; font-size:.73rem; font-weight:750; line-height:1.45; }
.entry-guide-qr { width:62px; flex:0 0 62px; background:#fff; border-radius:13px; padding:5px; box-shadow:inset 0 0 0 1px rgba(18,52,77,.08); }
.guide-qr-svg { display:block; width:100%; height:auto; background:#fff; }

.program-guide-page { max-width:1120px; margin-inline:auto; }
.program-guide-head { align-items:center; }
.program-guide-eyebrow { display:block; color:var(--coral); font-weight:850; font-size:.82rem; margin-bottom:3px; }
.program-guide-head h2 { margin:0 0 5px; color:var(--blue); }
.program-guide-head p { max-width:780px; margin:0; color:var(--muted); line-height:1.8; font-weight:650; }
.program-guide-count { flex:0 0 auto; padding:8px 12px; border-radius:999px; background:#eef7ff; color:#527286; font-weight:800; font-size:.82rem; white-space:nowrap; }
.program-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.program-guide-card {
  --guide-color:#2f74c9; --guide-soft:#edf5ff;
  min-width:0; min-height:118px; position:relative; border:1px solid color-mix(in srgb,var(--guide-color) 22%,#dce8f0); border-radius:23px;
  padding:15px; display:grid; grid-template-columns:48px 54px minmax(0,1fr); align-items:center; gap:11px;
  background:linear-gradient(135deg,var(--guide-soft),#fff 72%); color:var(--ink); text-align:right; cursor:pointer; font-family:inherit;
  box-shadow:0 8px 22px rgba(28,75,108,.06);
}
.program-guide-card.blue { --guide-color:#2f74c9; --guide-soft:#edf5ff; }
.program-guide-card.green { --guide-color:#3d9651; --guide-soft:#eef9ef; }
.program-guide-card.sky { --guide-color:#32a9d0; --guide-soft:#edfaff; }
.program-guide-card.coral { --guide-color:#ef625e; --guide-soft:#fff0ef; }
.program-guide-card.purple { --guide-color:#6a50bd; --guide-soft:#f2efff; }
.program-guide-card.gold { --guide-color:#c98d17; --guide-soft:#fff7df; }
.program-guide-card.red { --guide-color:#c5534e; --guide-soft:#fff0ef; }
.program-guide-card.pending { cursor:pointer; filter:saturate(.86); }
.program-guide-card:hover { transform:translateY(-1px); box-shadow:0 11px 26px rgba(28,75,108,.1); }
.program-guide-number { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:#fff; color:var(--guide-color); font-weight:900; direction:ltr; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--guide-color) 14%,transparent); }
.program-guide-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; background:var(--guide-color); color:#fff; }
.program-guide-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.program-guide-copy { min-width:0; display:grid; gap:4px; padding-inline-end:72px; }
.program-guide-copy b { color:var(--guide-color); font-size:1.04rem; line-height:1.55; }
.program-guide-copy small { color:var(--muted); font-size:.82rem; line-height:1.65; font-weight:650; }
.program-guide-state { position:absolute; inset-inline-end:14px; top:14px; padding:5px 8px; border-radius:999px; background:var(--guide-color); color:#fff; font-size:.7rem; font-weight:850; white-space:nowrap; }
.program-guide-card.pending .program-guide-state { background:#edf1f4; color:#71808b; }
.guide-video-overlay { z-index:275; }
.guide-video-dialog { width:min(880px,100%); }
.guide-unavailable-dialog { width:min(500px,100%); text-align:center; padding:30px 24px; }
.guide-unavailable-mark { width:68px; height:68px; display:grid; place-items:center; margin:0 auto 10px; border-radius:22px; background:#edf5ff; color:var(--blue); font-size:1.7rem; }
.guide-unavailable-dialog > span { color:var(--coral); font-weight:850; font-size:.8rem; }
.guide-unavailable-dialog h3 { margin:4px 0 7px; color:var(--blue); }
.guide-unavailable-dialog p { margin:0; color:var(--muted); line-height:1.8; font-weight:650; }

@media (max-width:760px) {
  .program-guide-grid { grid-template-columns:1fr; }
  .program-guide-head { align-items:flex-start; }
  .program-guide-count { margin-top:8px; }
  .bottom-nav .nav-item small { font-size:.68rem; }
}
@media (max-width:430px) {
  .student-entry-guides { gap:8px; }
  .entry-guide-card { min-height:86px; padding:10px; }
  .entry-guide-qr { width:54px; flex-basis:54px; padding:4px; border-radius:11px; }
  .entry-guide-copy b { font-size:.86rem; }
  .entry-guide-copy small { font-size:.66rem; }
  .program-guide-card { grid-template-columns:42px 48px minmax(0,1fr); padding:12px; gap:8px; }
  .program-guide-number { width:40px; height:40px; }
  .program-guide-icon { width:46px; height:46px; border-radius:15px; }
  .program-guide-copy { padding-inline-end:0; padding-top:24px; }
  .program-guide-state { top:10px; inset-inline-end:10px; }
  .bottom-nav { padding-inline:4px; }
  .nav-item { padding-inline:0; }
  .bottom-nav .nav-item small { font-size:.62rem; }
  .bottom-nav .nav-icon svg { width:21px; height:21px; }
}
@media (max-width:350px) {
  .student-entry-guides { grid-template-columns:1fr; }
}

/* v5.9.58 — واجهة الجوال: تبقى بوابة المعلم في مكانها ولونها، لكنها خاملة داخل جلسة الطالب */
.teacher-portal-btn:disabled,
.teacher-portal-btn[aria-disabled="true"]{
  background:#fff5dc;color:#75570e;opacity:1;cursor:default;
  box-shadow:inset 0 -2px 0 rgba(117,87,14,.08);transform:none;
}

/* v5.9.59 — تجميع محاولات التقويم الصوتي + سجل مختصر للنتائج */
.voice-attempts-table .voice-attempt-group tr td { background:#fff; }
.voice-attempts-table .voice-attempt-group tr:not(:last-child) td { border-bottom:0; }
.voice-attempts-table .voice-attempt-group:not(:last-of-type) tr:last-child td { border-bottom:1px solid #e9f0f5; }
.voice-attempts-table .voice-attempt-pending td { border-top-style:solid; }
.voice-attempt-label {
  display:inline-flex; align-items:center; gap:6px; color:#607789; font-weight:800; white-space:nowrap;
}
.voice-attempt-arrow {
  width:17px; height:17px; flex:0 0 17px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.voice-attempt-pending .voice-attempt-label { color:#607789; }

.voice-score-history {
  display:inline-flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap;
}
.voice-review-history-pill {
  display:inline-flex; align-items:center; gap:5px; min-height:38px; padding:7px 11px; border-radius:999px;
  background:#f2f5f8; color:#66798a; border:1px solid #dfe7ed; font-weight:800; white-space:nowrap;
}
.voice-review-history-pill b { color:#355f87; font-size:1.02rem; }
.voice-review-score-pill.current { box-shadow:0 0 0 2px rgba(24,75,159,.06); }

.teacher-print-row-group { break-inside:avoid-page; page-break-inside:avoid; }
.teacher-print-row-group tr+tr td { border-top:0!important; }
.teacher-print-attempt-label { display:inline-flex; align-items:center; gap:5px; color:#607789; font-weight:800; white-space:nowrap; }
.teacher-print-attempt-arrow { direction:ltr; unicode-bidi:isolate; font-weight:900; }

@media (max-width:700px) {
  .voice-score-history { justify-content:flex-start; }
  .voice-review-history-pill,.voice-review-score-pill.current { font-size:.86rem; }
}

@media print {
  .teacher-print-row-group { break-inside:avoid-page!important; page-break-inside:avoid!important; }
  .teacher-print-row-group tr+tr td { border-top:0!important; }
}

/* 0.2.0 foundation identity placeholder */
.foundation-brand{padding:18px 16px!important;background:#fff!important}.foundation-brand-placeholder{max-width:860px;margin:0 auto;text-align:center;border:1px solid #cfe2ec;border-radius:22px;padding:18px 20px;background:linear-gradient(135deg,#f3fbff,#fff)}.foundation-brand-placeholder strong{display:block;font-size:clamp(24px,5vw,42px);color:#1c74a5}.foundation-brand-placeholder span{display:block;margin-top:6px;color:#4f7187;font-weight:700}.foundation-brand-placeholder small{display:block;margin-top:7px;color:#8699a7;font-size:12px}