/* ===== قالب دروس الصفوف الأولية ===== */
html{direction:ltr;}
body[dir="rtl"]{direction:rtl;}
body[dir="ltr"]{direction:ltr;}
:root{
  --bg:#F3F7FC; --ink:#1B2838; --ink2:#4A5B70; --line:#E3E9F1;
  --pri:#1F5FBF; --pri-d:#16448A; --ok:#1E8E4E; --ok-l:#E6F6EC;
  --bad:#C0392B; --bad-l:#FDEDEC; --amber:#A86510; --amber-l:#FBF1E0; --k:#1F5FBF;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'IBM Plex Sans Arabic',sans-serif; background:var(--bg); color:var(--ink); font-size:18px; line-height:1.8; min-height:100vh;}
h1,h2{font-family:'Readex Pro',sans-serif; line-height:1.4;}
:focus-visible{outline:4px solid #B35C00; outline-offset:3px;}

.k-top{background:#fff; border-bottom:4px solid var(--k); position:sticky; top:0; z-index:30;}
.k-top-in{max-width:1140px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.k-back{font-family:'Readex Pro'; font-weight:600; font-size:14px; color:var(--ink2); text-decoration:none; padding:6px 14px; border-radius:12px; background:var(--bg);}
.k-back:hover{color:var(--pri);}
.k-ttl{font-family:'Readex Pro'; font-weight:700; font-size:16px; flex:1;}
.k-steps{display:flex; gap:7px;}
.k-steps i{width:14px; height:14px; border-radius:50%; background:var(--line); display:block;}
.k-steps i.done{background:var(--k); opacity:.45;}
.k-steps i.on{background:var(--k); transform:scale(1.3); animation:k-progress .34s ease-out;}
/* لمسة الحركة الوحيدة: مؤشّر التقدّم ينبض نبضة واحدة عند الانتقال لشاشة جديدة */
@keyframes k-progress{from{transform:scale(1)} 60%{transform:scale(1.5)} to{transform:scale(1.3)}}

.k-main{max-width:1140px; margin:0 auto; padding:22px 16px 70px; outline:none;}
.k-card{background:#fff; border-radius:28px; padding:26px 22px; box-shadow:0 10px 30px rgba(27,40,56,.07);}
.k-hero{text-align:center;}
.k-cover{width:170px; height:170px; margin:0 auto 8px;}
.k-cover svg,.k-art svg{width:100%; height:100%; display:block;}
/* الصور الحقيقية */
/* الصورة تظهر كاملة داخل إطارها دون قصّ (بعض الصور طولية وبعضها عرضية) */
.k-cover,.k-art{display:flex; align-items:center; justify-content:center;}
.k-cover img,.k-art img{max-width:100%; max-height:100%; width:auto; height:auto; display:block; border-radius:16px;}
.k-chip img,.k-slot img,.k-fix img,.k-bin-h img,.h-art img{width:100%; height:100%; display:block; object-fit:contain; border-radius:16px;}
.k-chip img{width:52px; height:52px; border-radius:10px;}
.k-slot img{width:80px; height:80px;}
.k-fix img{width:36px; height:36px; border-radius:8px;}
.k-bin-h img{width:34px; height:34px; border-radius:8px;}
.k-hero h1{font-size:clamp(26px,5vw,36px); margin-bottom:6px; outline:none;}
.k-sub{color:var(--ink2); margin-bottom:18px;}
.k-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; max-width:560px; margin:0 auto 6px; text-align:start;}
.k-fields label{font-family:'Readex Pro'; font-weight:600; font-size:15px; display:flex; flex-direction:column; gap:6px;}
.k-fields input{font:inherit; font-size:20px; padding:12px 14px; border:2.5px solid var(--line); border-radius:16px;}
.k-fields input:focus{border-color:var(--pri);}
.k-fields input:focus:not(:focus-visible){outline:none;}
.k-note{font-size:14px; color:var(--ink2); margin:10px 0;}

.k-btn{font-family:'Readex Pro'; font-weight:700; font-size:18px; border:0; border-radius:18px; padding:14px 26px; background:var(--pri); color:#fff; cursor:pointer; min-height:56px; transition:transform .16s cubic-bezier(.23,1,.32,1);}
/* الرفع بالمرور للفأرة فقط: على الآيباد يعلق بعد اللمس */
@media (hover:hover) and (pointer:fine){ .k-btn:hover:not(:disabled){transform:translateY(-2px);} }
/* استجابة فورية عند الضغط */
.k-btn:active:not(:disabled){transform:scale(.97);}
.k-btn:disabled{opacity:.4; cursor:not-allowed;}
.k-btn.big{font-size:20px; padding:16px 34px;}
.k-btn.ghost{background:#fff; color:var(--ink); border:2.5px solid var(--line);}
.k-btn.amber{background:var(--amber);}
.k-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap;}
.k-nav > :only-child{margin-inline-start:auto;}

.k-kick{font-size:clamp(22px,4vw,30px); margin-bottom:6px; color:var(--k); outline:none;}
.k-say{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%; border:0; background:var(--amber-l); color:var(--amber); cursor:pointer; vertical-align:middle; margin-inline-start:6px; flex-shrink:0;}
.k-say:hover{background:#F6E0B8;}

.k-ocs{list-style:none; display:grid; gap:12px; margin-top:12px;}
.k-ocs li{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; background:var(--bg); border-radius:18px; padding:12px 16px; font-weight:600;}
.k-ocs .k-oc-t{flex:1 1 200px; min-width:0;}
.k-n{flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--k); color:#fff; display:grid; place-items:center; font-family:'Readex Pro'; font-size:19px; font-weight:700;}

.k-learn{text-align:center;}
.k-art.big{width:min(260px,70vw); height:min(260px,70vw); margin:8px auto;}
.k-art.mid{width:150px; height:150px; margin:6px auto;}
.k-h2{font-size:28px; margin:6px 0;}
.k-say-txt{font-size:22px; font-weight:600; max-width:640px; margin:0 auto;}
.k-dots{display:flex; justify-content:center; gap:8px; margin-top:14px;}
.k-dots i{width:12px; height:12px; border-radius:50%; background:var(--line);}
.k-dots i.on{background:var(--k);}

.k-q{font-size:24px; margin:10px 0; text-align:center;}
.k-hint{text-align:center; color:var(--ink2); font-size:15px; margin-bottom:8px;}
.k-opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:12px;}
.k-opts.two{grid-template-columns:repeat(2,minmax(0,220px)); justify-content:center;}
.k-opt{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; background:#fff; border:3px solid var(--line); border-radius:22px; padding:12px; font:inherit; font-weight:700; font-size:17px; color:var(--ink); cursor:pointer; transition:transform .16s cubic-bezier(.23,1,.32,1), border-color .12s;}
/* على الأجهزة اللمسية يبقى الخيار مرفوعاً بعد لمسه فيبدو «مختاراً»، فالرفع للفأرة فقط */
@media (hover:hover) and (pointer:fine){ .k-opt:hover:not(:disabled){transform:translateY(-3px); border-color:var(--pri);} }
.k-opt:active:not(:disabled){transform:scale(.97);}
.k-opt:disabled{cursor:default;}
.k-opt .k-art{width:100px; height:100px;}
.k-opt.sm{font-size:14px; padding:8px;}
.k-opt.sm .k-art{width:70px; height:70px;}
.k-opt.sel{border-color:var(--pri); background:#EAF1FB; box-shadow:0 0 0 3px #BFD3F2;}
.k-opt.ok{border-color:var(--ok); background:var(--ok-l);}
.k-opt.bad{border-color:var(--bad); background:var(--bad-l);}
.k-opt.dim{opacity:.5;}
.mark{position:absolute; top:6px; inset-inline-end:10px; font-size:22px; font-weight:800;}
.ok .mark{color:var(--ok);} .bad .mark{color:var(--bad);}

.k-tray{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:12px 0;}
.k-tray .k-opt{width:120px;}
.k-bins{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
.k-bin{display:flex; flex-direction:column; gap:8px; min-height:170px; border:3px dashed #B9C7DA; border-radius:24px; background:#FAFCFF; padding:12px; font:inherit; cursor:pointer; color:var(--ink);}
.k-bin:hover:not(:disabled){border-color:var(--pri);}
.k-bin:disabled{cursor:default;}
.k-bin-h{font-family:'Readex Pro'; font-weight:700; font-size:19px; display:flex; align-items:center; justify-content:center; gap:8px;}
.k-bin-h svg{width:34px; height:34px;}
.k-bin-in{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.k-chip{position:relative; display:flex; flex-direction:column; align-items:center; width:84px; background:#fff; border:2px solid var(--line); border-radius:14px; padding:4px;}
.k-chip svg{width:52px; height:52px;}
.k-chip small{font-size:12px; font-weight:600;}
.k-chip .mark{font-size:16px; top:0; inset-inline-end:4px;}
.k-chip.ok{border-color:var(--ok); background:var(--ok-l);}
.k-chip.bad{border-color:var(--bad); background:var(--bad-l);}

.k-slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:10px;}
.k-slot{position:relative; min-height:150px; border:3px dashed #B9C7DA; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; background:#FAFCFF;}
.k-slot b{position:absolute; top:6px; inset-inline-start:12px; font-family:'Readex Pro'; font-size:19px; color:var(--k);}
.k-slot svg{width:80px; height:80px;}
.k-slot small{font-weight:600; font-size:13px;}
.k-slot.ok{border-style:solid; border-color:var(--ok); background:var(--ok-l);}
.k-slot.bad{border-style:solid; border-color:var(--bad); background:var(--bad-l);}
.k-tools{display:flex; justify-content:center; margin-top:6px;}

.k-match{display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin-top:10px;}
.k-col{display:flex; flex-direction:column; gap:12px;}
.k-col .k-opt{flex-direction:row; justify-content:flex-start; text-align:start; min-height:78px;}
.k-col .k-opt .k-art{width:56px; height:56px; flex-shrink:0;}
.k-badge{position:absolute; top:-10px; inset-inline-start:-10px; width:32px; height:32px; border-radius:50%; background:var(--k); color:#fff; display:grid; place-items:center; font-family:'Readex Pro'; font-size:19px; font-weight:700;}

.k-plate{width:min(320px,82vw); aspect-ratio:1; margin:10px auto; border-radius:50%; background:#fff; border:10px solid #E5E8E8; box-shadow:inset 0 0 0 14px #F4F6F6; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center; gap:6px; padding:44px;}
.k-plate .k-opt{width:88px; padding:4px; font-size:13px;}
.k-plate .k-opt .k-art{width:50px; height:50px;}

.k-fb{margin-top:18px; border-radius:22px; padding:16px 18px; border:3px solid;}
.k-fb.ok{background:var(--ok-l); border-color:var(--ok);}
.k-fb.no{background:var(--amber-l); border-color:var(--amber);}
.k-fb-h{display:flex; align-items:center; gap:10px; font-family:'Readex Pro'; font-size:22px;}
.k-fb-h svg{width:44px; height:44px;}
.k-fb p{margin-top:8px; font-weight:600;}
.k-fix{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; font-weight:600;}
.k-fix span{display:inline-flex; align-items:center; gap:6px; background:#fff; border-radius:12px; padding:4px 10px;}
.k-fix svg{width:36px; height:36px;}

.k-feel{margin-top:16px; text-align:center;}
.k-feel p{font-weight:700; font-size:20px;}
.k-faces{display:flex; justify-content:center; gap:14px; margin-top:8px; flex-wrap:wrap;}
.k-face{display:flex; flex-direction:column; align-items:center; gap:4px; width:112px; border:3px solid var(--line); border-radius:22px; background:#fff; padding:8px; font:inherit; font-weight:700; cursor:pointer; color:var(--ink);}
.k-face svg{width:64px; height:64px;}
.k-face[aria-checked="true"]{border-color:var(--pri); background:#EAF1FB; box-shadow:0 0 0 3px #BFD3F2;}

.k-res{text-align:center;}
.k-stars{display:flex; justify-content:center; gap:10px; margin:10px 0;}
.k-stars svg{width:84px; height:84px;}
.k-stars .on path{fill:#F5B700;} .k-stars .off path{fill:#E3E9F1;}
.k-score{font-family:'Readex Pro'; font-size:22px; font-weight:700;}
.k-pp{display:flex; justify-content:center; gap:12px; margin:14px 0; flex-wrap:wrap;}
.k-pp div{background:var(--bg); border-radius:18px; padding:10px 20px; min-width:140px;}
.k-pp b{display:block; font-size:20px;}
.k-rows{margin-top:10px;}
.k-row{display:flex; align-items:center; gap:12px; text-align:start; padding:12px 0; border-top:2px solid var(--bg);}
.k-row .k-ic{flex-shrink:0; width:40px; height:40px;}
.k-row .k-ic svg{width:40px; height:40px;}
.k-row .k-t{flex:1; font-weight:600;}
.k-row small{display:block; font-weight:700;}
.k-home{margin-top:16px; background:var(--amber-l); border-radius:22px; padding:16px 18px; text-align:start;}
.k-home h2{font-size:20px; color:var(--amber);}
.k-prev{position:fixed; bottom:12px; inset-inline-start:12px; background:#16202E; color:#fff; font-size:13px; padding:6px 14px; border-radius:20px; z-index:40;}

.fade{animation:kf .22s cubic-bezier(.23,1,.32,1);}
@keyframes kf{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (max-width:560px){
  .k-card{padding:20px 14px; border-radius:22px;}
  .k-q{font-size:21px;} .k-say-txt{font-size:19px;}
  .k-col .k-opt{flex-direction:column; text-align:center;}
  .k-match{gap:10px;}
}
/* تقليل الحركة: لا حركة مكانية، ويبقى ظهور الشاشة بتلاشٍ هادئ */
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;} .fade{animation:kf-o .2s ease-out!important;}}
@keyframes kf-o{from{opacity:0}}

/* خيارات نصية بلا صور (صح / خطأ) */
.k-opt.txt{font-family:'Readex Pro'; font-size:24px; min-height:96px; justify-content:center;}
.k-opt.txt.ok{color:var(--ok);} .k-opt.txt.bad{color:var(--bad);}
.k-face{width:auto; min-width:110px; padding:14px 22px; font-size:19px;}
.k-fb-h b{font-size:22px;}

/* مقطع الفيديو */
.k-video{position:relative; width:100%; max-width:680px; aspect-ratio:16/9; margin:10px auto 4px; border-radius:20px; overflow:hidden; background:#000; box-shadow:0 10px 30px rgba(27,40,56,.15);}
.k-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.k-credit{font-size:13px; color:var(--ink2); margin-bottom:6px;}

/* ===== قالب الدرس مع الشريط الجانبي (مثل دروس الوحدات) ===== */
.k-layout.shell{display:grid; grid-template-columns:260px minmax(0,1fr); max-width:1480px; margin:0 auto; gap:22px; align-items:start;}
/* داخل الشبكة: margin:auto يمنع العمود من التمدّد، فيُصفَّر ويُملأ العرض كاملًا */
.k-layout.shell .k-main{max-width:none; width:100%; margin:0; padding:22px 18px 70px;}
.k-side{position:sticky; top:74px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:16px 14px; margin-top:22px; box-shadow:0 8px 24px rgba(27,40,56,.06);}
.k-side-h{font-family:'Readex Pro'; font-weight:700; font-size:14px; color:var(--ink2); padding:0 8px 10px;}
.k-side nav{display:grid; gap:4px;}
.k-sn{display:flex; align-items:center; gap:10px; width:100%; text-align:start; border:0; background:none; font:inherit; font-size:15px; font-weight:600; color:var(--ink2); padding:10px 10px; border-radius:12px; cursor:pointer;}
.k-sn:hover:not(:disabled){background:var(--bg); color:var(--k);}
.k-sn:disabled{opacity:.45; cursor:default;}
.k-sn-i{width:26px; height:26px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; font-size:13px; background:var(--bg); color:var(--ink2);}
.k-sn.done{color:var(--ok);} .k-sn.done .k-sn-i{background:var(--ok-l); color:var(--ok);}
.k-sn.cur{color:var(--k); background:var(--bg); animation:k-cur .34s ease-out;}
@keyframes k-cur{from{background:transparent}} .k-sn.cur .k-sn-i{background:var(--k); color:#fff;}
@media (max-width:900px){
  .k-layout.shell{grid-template-columns:minmax(0,1fr); gap:0;}
  /* الجوال: شريط المحتويات أفقي يُمرَّر، مثل دروس كرة القدم */
  .k-side{position:static; margin:12px 16px 0; padding:8px; border-radius:18px;}
  .k-side-h{display:none;}
  .k-side nav{display:flex; gap:6px; overflow-x:auto;}
  .k-sn{flex:0 0 auto; width:auto; white-space:nowrap; padding:8px 12px; font-size:14px;}
}
.k-top.shell .k-top-in{max-width:1480px;}
.k-top.shell .k-steps{display:none;}

/* نص مخفي بصريًا لقارئ الشاشة */
.k-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* الجوال: الوجوه الثلاثة في سطر واحد */
@media (max-width:560px){
  .k-faces{gap:10px;}
  .k-face{flex:1 1 0; min-width:0; padding:12px 8px;}
}

/* نبضة خفيفة عند الإجابة الصحيحة (تُلغى مع «تقليل الحركة») */
.k-opt.ok,.k-chip.ok,.k-slot.ok{animation:kpop .32s ease-out;}
@keyframes kpop{45%{transform:scale(1.05);}}

/* ═════════════ هوية البوابة (خط ثمانية + الكحلي والذهبي) ═════════════
   تُطبَّق على كل الدروس وصفحتي الصفين دون تغيير بنيتها */
@font-face{font-family:'Thmanyah Sans';src:url(../assets/fonts/thmanyahsans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url(../assets/fonts/thmanyahsans-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url(../assets/fonts/thmanyahsans-Bold.woff2) format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url(../assets/fonts/thmanyahserifdisplay-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url(../assets/fonts/thmanyahserifdisplay-Black.woff2) format('woff2');font-weight:800 900;font-display:swap}
@font-face{font-family:'Readex Pro';src:url(../assets/fonts/thmanyahsans-Medium.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Readex Pro';src:url(../assets/fonts/thmanyahsans-Bold.woff2) format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../assets/fonts/thmanyahsans-Regular.woff2) format('woff2');font-weight:300 400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../assets/fonts/thmanyahsans-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../assets/fonts/thmanyahsans-Bold.woff2) format('woff2');font-weight:600 900;font-display:swap}

:root{
  --bg:#F7F7F5; --ink:#141B2A; --ink2:#3A4353; --line:#E7E6E1;
  --pri:#141B2A; --pri-d:#0A0F17; --amber:#9A6700; --amber-l:#FBF3DC;
  --gold:#B07F0B; --gold-2:#D9A91A; --gold-t:#9A6700;
}
/* لون كل درس يصير ذهبياً موحّداً بدل الألوان المتفرقة (ألوان الصح والخطأ تبقى) */
[style*="--k"]{--k:#9A6700 !important}
body{font-family:'Thmanyah Sans',sans-serif}
/* العناوين العريضة بخط ثمانية العرضي، وأسئلة الأطفال تبقى بالخط الواضح */
.k-hero h1,.k-kick,.h-hero h1{font-family:'Thmanyah Serif Display',serif;font-weight:900}
.k-top{border-bottom:1px solid var(--line);box-shadow:inset 0 -3px 0 var(--gold-2)}
.k-back{border-radius:999px}
.k-btn{border-radius:999px}
.k-btn.amber{background:var(--gold-t)}
.k-card{border-radius:32px;box-shadow:0 1px 2px rgba(20,27,42,.04),0 18px 40px rgba(20,27,42,.06)}
.k-say{background:var(--amber-l);color:var(--gold-t)}

/* خط متموّج رفيع أسفل رأس الصفحة */
@keyframes k-wave{to{transform:translateX(720px)}}
.k-wave{position:relative;overflow-x:clip}
.k-wave::after{content:"";position:absolute;left:-720px;right:0;bottom:0;height:34px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 34'%3E%3Cpath d='M0 17 Q90 3 180 17 T360 17 T540 17 T720 17' fill='none' stroke='%23B07F0B' stroke-opacity='.45' stroke-width='1.5'/%3E%3Cpath d='M0 21 Q90 31 180 21 T360 21 T540 21 T720 21' fill='none' stroke='%23D9A91A' stroke-opacity='.3' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x;
  background-size:720px 34px}
@media (prefers-reduced-motion:no-preference){ .k-wave::after{animation:k-wave 40s linear infinite} }

/* Clear teaching illustrations; preserve the existing page width and full image. */
.k-art.big{width:min(600px,100%);height:clamp(230px,29vw,360px)}
.k-art.mid{width:min(440px,100%);height:clamp(200px,24vw,280px)}
.k-opt .k-art{width:100%;height:180px}
.k-opt.sm .k-art{width:100%;height:125px}
.k-col .k-opt .k-art{width:130px;height:125px;flex-shrink:0}
.k-art img{object-fit:contain;max-width:100%;max-height:100%}
.k-opt:has(.k-art img){min-width:0}
.k-opts:has(.k-art img){grid-template-columns:repeat(2,minmax(0,1fr))}
.k-plate .k-opt .k-art{width:70px;height:70px}
@media(max-width:600px){
 .k-opt .k-art{height:135px}
 .k-opt.sm .k-art{height:100px}
 .k-col .k-opt .k-art{width:100%;height:110px}
 .k-art.big{height:240px}
 .k-art.mid{height:210px}
}

@media(max-width:480px){.k-opts:has(.k-art img){grid-template-columns:1fr}.k-opts .k-opt .k-art{height:190px}.k-plate .k-opts{grid-template-columns:repeat(2,minmax(0,1fr))}.k-plate .k-opt .k-art{height:70px}}

/* Five learning stages; preserves the existing lesson width and identity. */
.k-journey{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 16px;flex-wrap:wrap;font-size:13px}.k-journey li{padding:6px 12px;border:1px solid #d8d6d0;border-radius:18px;background:#fff;color:#565b64}.k-journey .current{background:#141b2a;color:#fff;border-color:#141b2a}.k-journey .passed{color:#795100;border-color:#b07f0b}.k-home textarea{display:block;width:100%;box-sizing:border-box;font:inherit;padding:12px;border:1px solid #a3a3a3;border-radius:12px;margin-top:8px;background:#fff;color:#141b2a}.k-credit a{color:#795100;text-underline-offset:3px}.k-tray .k-art:empty{display:none}@media(max-width:600px){.k-journey{gap:4px}.k-journey li{padding:5px 8px;font-size:12px}}

.k-video-select{display:block;max-width:850px;margin:0 auto 14px;text-align:start;font-size:16px;font-weight:600}.k-video-select select{display:block;width:100%;min-height:46px;margin-top:6px;font:inherit;color:#141b2a;background:#fff;border:1px solid #a3a3a3;border-radius:12px;padding:8px 12px}

/* Stage label belongs to the first screen; text choices do not reserve image space. */
.k-stage-label{margin:0 0 16px;color:var(--ink);font-size:16px;font-weight:500;text-align:center}.k-tray .k-opt:not(:has(.k-art)){min-height:64px;justify-content:center}.k-chip:not(:has(img,svg)){width:auto;min-width:84px;padding:12px}.k-slot:not(:has(img,svg)){min-height:100px}

/* بطاقة العنصر: عرض دروس الصفين بشكل الوحدات الإثرائية (بطاقات بعناوين، ولوحة نشاط، وشاشة نتيجة)
   القيم مأخوذة من shared/theme.css ومكوّنات fitness.html، مع تكبير الخط والصور والأزرار للصفوف الأولية. */
.ek{
  --e-ink:#141B2A; --e-ink-2:#3A4353; --e-ink-3:#5E6675;
  --e-line:#E7E6E1; --e-line-2:#D9D7CF; --e-bg:#F7F7F5; --e-surface:#fff;
  --e-gold:#9A6700; --e-gold-l:#FBF3DC; --e-ok:#1C7C4A; --e-ok-l:#E6F4EC; --e-bad:#B0352A; --e-bad-l:#FCEBEA;
  --e-radius:24px; --e-radius-s:16px;
  --e-shadow:0 1px 2px rgba(20,27,42,.04), 0 14px 30px rgba(20,27,42,.05);
  max-width:760px; margin:0 auto; text-align:start;
}
.ek-hero{margin:4px 0 18px;}
.ek-badge{display:inline-block; font-weight:600; font-size:14px; color:var(--e-gold); background:var(--e-gold-l); padding:5px 14px; border-radius:30px; margin-bottom:8px;}
.ek-hero h1{font-family:'Thmanyah Serif Display',serif; font-size:clamp(26px,6vw,34px); line-height:1.35; color:var(--e-ink); margin:0;}
.ek-card{background:var(--e-surface); border:1px solid var(--e-line); border-radius:var(--e-radius); padding:20px 20px; box-shadow:var(--e-shadow); margin-bottom:16px;}
.ek-media{padding:12px;}
.ek-media .k-art, .ek-media .k-art.big{width:100%; height:auto; margin:0;}
.ek-media .k-art img{width:auto; max-width:100%; height:auto; max-height:340px; object-fit:contain; margin:0 auto; border-radius:var(--e-radius-s);}
.ek-sec{display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; color:var(--e-gold); margin-bottom:8px;}
.ek-sec .dot{width:8px; height:8px; border-radius:50%; background:var(--e-gold);}
.ek-body{font-size:19px; line-height:2; color:var(--e-ink-2); margin:0;}
.ek-why{background:var(--e-gold-l); border-inline-start:4px solid var(--e-gold); border-radius:0 var(--e-radius-s) var(--e-radius-s) 0; padding:12px 16px; margin-top:12px; font-size:18px; line-height:1.9;}
.ek-why b{color:var(--e-gold);}
.ek-oc{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:12px;}
.ek-oc li{display:flex; gap:12px; align-items:flex-start; font-size:18px; line-height:1.8; color:var(--e-ink);}
.ek-oc .ck{width:28px; height:28px; flex-shrink:0; border-radius:50%; background:var(--e-ok-l); color:var(--e-ok); display:grid; place-items:center; font-size:14px; margin-top:3px;}

/* لوحة النشاط أسفل الشرح */
.ek-activity{border:1.5px solid var(--e-gold-l); background:linear-gradient(180deg,var(--e-gold-l) 0%,transparent 75%); border-radius:var(--e-radius); padding:20px; margin-bottom:16px;}
.ek-tag{display:inline-flex; font-weight:600; font-size:14px; color:var(--e-gold); background:#fff; border:1px solid var(--e-gold-l); padding:6px 14px; border-radius:30px; margin-bottom:12px;}
.ek-activity .k-w{margin:0;}
.ek-activity .k-q{font-size:20px; line-height:1.7; text-align:start; margin:0 0 14px;}
.ek-activity .k-opts, .ek-res .k-opts{display:grid; grid-template-columns:1fr; gap:10px;}
.ek-activity .k-opt, .ek-res .k-opt{flex-direction:row; justify-content:flex-start; gap:12px; text-align:start; min-height:60px; padding:12px 16px; border-radius:var(--e-radius-s); background:#fff; border:2px solid var(--e-line-2); font-size:19px;}
.ek-activity .k-opt .k-lbl, .ek-res .k-opt .k-lbl{font-size:19px; text-align:start;}
.ek-activity .k-opt.ok, .ek-res .k-opt.ok{background:var(--e-ok-l); border-color:var(--e-ok);}
.ek-activity .k-opt.bad, .ek-res .k-opt.bad{background:var(--e-bad-l); border-color:var(--e-bad);}
.ek-activity .k-fb, .ek-res .k-fb{margin-top:12px;}

.ek-dots{display:flex; justify-content:center; gap:6px; margin:6px 0 4px;}
.ek-dots i{width:8px; height:8px; border-radius:50%; background:var(--e-line-2);}
.ek-dots i.done{background:var(--e-gold); opacity:.45;}
.ek-dots i.on{background:var(--e-gold); transform:scale(1.3);}
.ek-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:14px 0 24px; flex-wrap:wrap;}
.ek-nav .k-btn[disabled]{opacity:.5; cursor:not-allowed;}
.ek-nav{flex-wrap:nowrap;}
.ek-nav .k-btn.big{flex:1; min-width:0; white-space:normal; line-height:1.4;}

/* شاشة النتيجة */
.ek-score{text-align:center; padding:6px 0 10px;}
.ek-score h1{font-family:'Thmanyah Serif Display',serif; font-size:clamp(24px,5.5vw,32px); margin:0 0 8px;}
.ek-level{display:inline-block; font-weight:700; font-size:16px; padding:7px 22px; border-radius:30px; margin-top:6px; background:var(--e-gold-l); color:var(--e-gold);}
.ek-level.l3, .ek-level.l2{background:var(--e-ok-l); color:var(--e-ok);}
.ek-table{width:100%; border-collapse:collapse;}
.ek-table td{padding:12px 4px; border-bottom:1px solid var(--e-line); font-size:17px;}
.ek-table tr:last-child td{border-bottom:0;}
.ek-table td:first-child{color:var(--e-ink-3);}
.ek-table td:last-child{text-align:end; font-weight:700;}
.ek-res .k-rows{margin:0;}
.ek-res .k-home{background:none; border:0; padding:0; margin:0;}
.ek-transfer{display:flex; gap:12px; align-items:flex-start; background:var(--e-bg); border:1px solid var(--e-line); border-radius:var(--e-radius-s); padding:14px 16px;}
.ek-transfer .n{width:28px; height:28px; border-radius:8px; background:var(--e-gold-l); color:var(--e-gold); display:grid; place-items:center; flex-shrink:0; font-weight:700;}
.ek-transfer p{font-size:18px; line-height:1.9; color:var(--e-ink-2); margin:0;}
@media (max-width:480px){ .ek-card{padding:16px 14px;} .ek-activity{padding:16px 14px;} }

/* ببساطة، ومثال من الواقع، وجرّب، ونصيحة — على نمط بطاقات الوحدات الإثرائية */
.ek-simple{background:#FFF7E3; border-inline-start:4px solid var(--e-gold); border-radius:0 var(--e-radius-s) var(--e-radius-s) 0; padding:12px 16px; margin-top:12px; font-size:18px; line-height:1.9; color:var(--e-ink);}
.ek-simple b{color:var(--e-gold);}
.ek-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
.ek-grid > .ek-card{margin-bottom:0;}
.ek-sec.navy{color:var(--e-ink);} .ek-sec.navy .dot{background:var(--e-ink);}
.ek-example{display:flex; gap:12px; align-items:flex-start;}
.ek-example .ic{width:34px; height:34px; flex-shrink:0; border-radius:10px; background:#EEF1F6; color:var(--e-ink); display:grid; place-items:center;}
.ek-example p{font-size:18px; line-height:1.9; color:var(--e-ink-2); margin:0;}
.ek-note{font-size:14px; color:var(--e-ink-3); margin:8px 0 0;}
.ek-tip{display:flex; gap:12px; align-items:flex-start; background:#EEF1F6; border:1px solid #DCE2EC; border-radius:var(--e-radius-s); padding:14px 16px; margin-bottom:16px;}
.ek-tip .ic{width:34px; height:34px; flex-shrink:0; border-radius:10px; background:#fff; color:var(--e-ink); display:grid; place-items:center;}
.ek-tip p{font-size:18px; line-height:1.9; color:var(--e-ink); margin:0;}
@media (max-width:600px){ .ek-grid{grid-template-columns:1fr;} }

/* عرض أوسع ومسافات أريح */
.ek{max-width:none;}
.ek-card, .ek-activity, .ek-tip{margin-bottom:22px;}
.ek-grid{gap:18px; margin-bottom:22px;}
.ek-top{display:block;}
.ek-top > .ek-card{margin-bottom:22px;}
@media (min-width:900px){
  .ek-top{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; margin-bottom:22px;}
  .ek-top.solo{grid-template-columns:1fr;}
  .ek-top > .ek-card{margin-bottom:0; height:100%;}
  .ek-media{display:flex; align-items:center; justify-content:center;}
  .ek-card{padding:24px 26px;}
  .ek-hero h1{font-size:38px;}
}
@media (max-width:480px){
  .k-main{padding-inline:10px;}
  .ek-card{padding:18px 16px;}
  .ek-activity{padding:18px 14px;}
}

/* المقاطع: صور مصغّرة مرقّمة، «المقطع ٢ من ٤»، علامة لما شاهده، وزر «المقطع التالي» */
.k-learn .k-video{max-width:760px;}
.kv-head{max-width:760px; margin:6px auto 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.kv-count{font-size:22px; font-weight:700; color:#141B2A;}
.kv-count b{color:#9A6700; font-size:26px;}
.kv-bar{display:flex; gap:6px;}
.kv-bar i{width:34px; height:8px; border-radius:99px; background:#E4E2DC;}
.kv-bar i.done{background:#D9A91A;}
.kv-bar i.on{background:#141B2A;}
.kv-name{max-width:760px; margin:10px auto 4px; font-size:18px; font-weight:700; color:#141B2A;}

.kv-next{display:inline-flex; align-items:center; justify-content:center; gap:10px; margin:8px auto 4px; min-width:260px;}
.kv-next svg{flex:none;}
[dir="rtl"] .kv-next svg{transform:scaleX(-1);}
.kv-done{max-width:760px; margin:10px auto 4px; padding:12px 16px; border-radius:14px; background:#FBF4DF; color:#7A5300; font-size:17px; font-weight:700;}
.kv-done.ok{background:#E7F6EC; color:#1E7A3C; display:flex; align-items:center; justify-content:center; gap:8px;}

.kv-list{max-width:760px; margin:16px auto 8px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.kv-tile{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:6px; padding:6px; border-radius:16px; background:#fff; border:2px solid #E4E2DC; text-align:start; transition:transform .15s ease, border-color .15s ease;}
.kv-tile:hover{transform:translateY(-2px); border-color:#D9A91A;}
.kv-tile:focus-visible{outline:3px solid #141B2A; outline-offset:2px;}
.kv-tile.on{border-color:#141B2A; box-shadow:0 0 0 2px #141B2A inset;}
.kv-thumb{position:relative; display:block; aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:#141B2A;}
.kv-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.kv-tile.seen .kv-thumb img{opacity:.55;}
.kv-num{position:absolute; top:6px; inset-inline-start:6px; width:34px; height:34px; border-radius:50%; background:#D9A91A; color:#141B2A; font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.25);}
.kv-play, .kv-tick{position:absolute; inset:0; margin:auto; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.kv-play{background:rgba(20,27,42,.75); color:#fff;}
.kv-tick{background:#1E7A3C; color:#fff;}
.kv-now{position:absolute; bottom:6px; inset-inline-start:6px; padding:3px 9px; border-radius:99px; background:#141B2A; color:#fff; font-size:13px; font-weight:700;}
.kv-title{font-size:14px; font-weight:700; color:#141B2A; line-height:1.35; padding:0 4px 4px;}

@media (max-width:600px){
  .kv-list{grid-template-columns:repeat(2,1fr);}
  .kv-next{width:100%; min-width:0;}
  .kv-count{font-size:19px;} .kv-count b{font-size:22px;}
  .kv-bar i{width:24px;}
}
@media (prefers-reduced-motion:reduce){ .kv-tile{transition:none;} .kv-tile:hover{transform:none;} }

/* مقاطع مقسّمة بالعناصر: قائمة بأسماء المقاطع لكل عنصر، والضغط على الاسم يُظهر المقطع تحته */
.kv-pick{max-width:760px; margin:4px auto 10px; font-size:17px; font-weight:700; color:#5B6170;}
.kv-gcount{font-size:13px; font-weight:600; color:#7A7F8A;}
.kv-gtick{width:28px; height:28px; border-radius:50%; background:#1E7A3C; color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.kv-sec{max-width:760px; margin:0 auto 14px; background:#fff; border:2px solid #E4E2DC; border-radius:18px; overflow:hidden; text-align:start;}
.kv-sec.on{border-color:#D9A91A;}
.kv-sh{display:flex; align-items:center; gap:12px; padding:10px 14px; background:#F7F7F5; border-bottom:1px solid #E4E2DC;}
.kv-sec.on .kv-sh{background:#FBF4DF;}
.kv-sh img{width:56px; height:56px; object-fit:contain; border-radius:12px; background:#fff; flex:none;}
.kv-sh b{font-size:21px; font-weight:800; color:#141B2A;}
.kv-sh .kv-gcount{margin-inline-start:auto;}
.kv-rows{list-style:none; margin:0; padding:6px;}
.kv-row{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:12px; font-size:18px; font-weight:700; color:#141B2A; transition:background-color .15s ease;}
.kv-row:hover{background:#F7F7F5;}
.kv-row:focus-visible{outline:3px solid #141B2A; outline-offset:-3px;}
.kv-row.on{background:#141B2A; color:#fff;}
.kv-rn{flex:none; width:32px; height:32px; border-radius:50%; background:#D9A91A; color:#141B2A; font-weight:800; display:flex; align-items:center; justify-content:center;}
.kv-rt{flex:1; line-height:1.4;}
.kv-rs{flex:none; display:flex; align-items:center; gap:4px; font-size:13px; color:#5B6170;}
.kv-row.seen .kv-rs{color:#1E7A3C;}
.kv-row.on .kv-rs{color:#F2D27A;}
.kv-open{padding:10px 4px 6px; text-align:center;}
.kv-open .k-video{margin-top:4px;}
@media (max-width:600px){ .kv-row{font-size:16px; padding:11px 8px;} .kv-sh b{font-size:19px;} .kv-sh img{width:46px; height:46px;} }
@media (prefers-reduced-motion:reduce){ .kv-row{transition:none;} }

.k-w textarea[data-open-key]{display:block;width:100%;font:inherit;padding:14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:#fff;resize:vertical}.k-w textarea[data-open-key]:focus-visible{outline:2px solid var(--gold-t);outline-offset:3px}

/* Portal typography applies to every form and learning control. */
button,input,select,textarea{font-family:inherit}

/* Optional guide-based technical steps; existing lesson widths are preserved. */
.ek-step-grid:has(> :only-child){grid-template-columns:1fr}
.ek-steps{margin:0;padding-inline-start:1.6em;line-height:1.9;color:var(--ink,#141B2A)}
.ek-steps li{padding-inline-start:.35em;margin-block:.6em}
.ek-step-grid h2.ek-sec{font-size:inherit;font-weight:600}

/* Review adds a third navigation button; keep its text within a narrow viewport. */
@media (max-width:560px){
  .ek-nav:has(> :nth-child(3)){flex-wrap:wrap;}
  .ek-nav:has(> :nth-child(3)) .k-btn.big{flex-basis:100%;}
}

/* Preview tools must not overlap lesson navigation on narrow screens. */
@media(max-width:760px){body.pe-preview-page{padding-bottom:76px}.k-prev{position:static;display:table;margin:16px auto 8px;max-width:calc(100% - 24px);text-align:center}}
/* T14: محتوى الدليل الحرفي — جملة المشاهدة، والأنواع، والقطع، والصور، و«اعرف أكثر» */
.ek-watch-why{margin:4px 0 12px;padding:10px 14px;border-radius:14px;background:#FFF7DD;border-inline-start:4px solid #D9A91A;color:#141B2A;font-weight:700;line-height:1.9}
.ek-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.ek-type{padding:14px 16px;border-radius:16px;background:#F7F7F5;border:1px solid #E6E3DA}
.ek-type b{display:block;color:#9A6700;font-size:1.05em;margin-bottom:4px}
.ek-type p{margin:0;line-height:1.9;color:#141B2A}
.ek-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.ek-chips li{padding:8px 14px;border-radius:999px;background:#FFF7DD;border:1px solid #EBD9A6;color:#141B2A;font-weight:700;line-height:1.6}
.ek-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;padding:0;margin:10px 0 0}
@media(max-width:600px){.ek-tiles{grid-template-columns:repeat(2,1fr)}
}
.ek-tiles li{text-align:center}
.ek-tiles .k-art img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block}
.ek-tiles b{display:block;margin-top:6px;color:#9A6700;font-size:1.05em}
.ek-more summary{cursor:pointer;list-style:none}
.ek-more summary::-webkit-details-marker{display:none}
.ek-more summary::after{content:"+";margin-inline-start:auto;font-weight:700;color:#9A6700;padding-inline-start:10px}
.ek-more[open] summary::after{content:"−"}
.ek-more summary{display:flex;align-items:center}
.ek-more ul{margin-top:10px}
/* T15: اختيار «طالب/طالبة» في شاشة الدخول */
.k-gender{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0 14px}
.k-gender-l{font-weight:700;color:#141B2A}
.k-g{display:inline-flex;align-items:center;gap:10px;min-width:132px;justify-content:center;padding:12px 22px;border-radius:999px;border:2px solid #E6E3DA;background:#fff;color:#141B2A;font:inherit;font-weight:800;font-size:1.1em;cursor:pointer}
.k-g:hover{border-color:#D9A91A}
.k-g.on{border-color:#B07F0B;background:#FFF7DD}
.k-g:focus-visible{outline:3px solid #141B2A;outline-offset:2px}
.k-g-dot{width:18px;height:18px;border-radius:50%;border:2px solid #9A6700;display:inline-block;position:relative}
.k-g.on .k-g-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#9A6700}