/* منصة شاطر — الهوية البصرية (مستوحاة من reference/lesson1_quiz.html) */
:root{
  --board:#1F4D3D; --board-dark:#173A2E; --paper:#FFFDF5;
  --sun:#FFC53D; --sky:#3DA5D9; --coral:#F26B5B;
  --ink:#22303A; --green:#2E9E5B; --line:#E6DEC9;
  --ar:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  --en:'Fredoka','Cairo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ar); color:var(--ink); padding-bottom:60px;
  background:
    radial-gradient(circle at 12% 8%,  #FFE9A8 0 12px, transparent 13px),
    radial-gradient(circle at 88% 22%, #BFE3F5 0 10px, transparent 11px),
    radial-gradient(circle at 6% 62%,  #FFD3CC 0 9px,  transparent 10px),
    radial-gradient(circle at 94% 78%, #CFEBD8 0 11px, transparent 12px),
    var(--paper);
}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}

/* ===== السبورة ===== */
.board{
  background:var(--board); border:8px solid #A9743F; border-radius:22px;
  margin:22px auto 0; padding:26px 22px 22px; color:#fff; text-align:center;
  box-shadow:0 12px 0 #8A5C31, 0 20px 30px rgba(0,0,0,.15);
}
.board .eyebrow{font-family:var(--en);letter-spacing:.14em;font-size:13px;color:#BFE3C9;text-transform:uppercase;margin:0 0 6px}
.board h1{font-family:var(--en);font-weight:600;font-size:clamp(24px,5vw,38px);margin:0;line-height:1.15}
.board h2{font-weight:700;font-size:clamp(14px,3.4vw,18px);margin:10px 0 0;color:#FFE9A8}

/* ===== شريط التقدّم + برطمان النجوم ===== */
.hud{
  position:sticky;top:0;z-index:30;margin:18px 0 8px;
  background:rgba(255,253,245,.94);backdrop-filter:blur(6px);
  border:3px solid var(--line);border-radius:20px;padding:10px 14px;
  display:flex;align-items:center;gap:14px;box-shadow:0 6px 18px rgba(34,48,58,.08);
}
.jar{position:relative;width:54px;height:62px;flex:0 0 auto}
.jar .glass{position:absolute;inset:8px 4px 0 4px;border:3px solid #9CC7DA;border-top-width:0;border-radius:6px 6px 16px 16px;overflow:hidden;background:rgba(190,225,240,.25)}
.jar .lid{position:absolute;top:0;left:0;right:0;height:11px;background:var(--sky);border-radius:6px}
.jar .fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#FFD86B,#FFB020);transition:height .45s cubic-bezier(.34,1.4,.64,1)}
.jar .star{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:17px}
.hud-text{flex:1;min-width:0}
.hud-text b{font-size:16px}
.bar{height:12px;background:#EFE6D2;border-radius:99px;overflow:hidden;margin-top:6px}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sun),var(--coral));border-radius:99px;transition:width .4s ease}

/* ===== البطاقات ===== */
.card{background:#fff;border:3px solid var(--line);border-radius:24px;padding:20px 18px;margin:20px 0;box-shadow:0 6px 0 #F0E7D3}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.tag{font-family:var(--en);font-weight:600;background:var(--board);color:#fff;border-radius:12px;padding:6px 12px;font-size:13px;white-space:nowrap}
.card h3{margin:0;font-size:18px;font-weight:900}
.hint{margin:2px 0 16px;color:#6B7A83;font-size:14px}

/* ===== السؤال ===== */
.q{border-top:2px dashed var(--line);padding:18px 0 8px}
.q:first-of-type{border-top:0}
.q-en{font-family:var(--en);direction:ltr;text-align:left;font-size:18px;font-weight:500;margin:0 0 6px;line-height:1.5}
.q-ar{font-size:14px;color:#6B7A83;margin:0 0 12px}
.pic{font-size:46px;line-height:1;margin-bottom:10px}
.pic img{max-width:180px;border-radius:14px}

/* ===== اختيار من متعدد ===== */
.opts{display:flex;flex-direction:column;gap:10px}
.opts.inline{flex-direction:row;flex-wrap:wrap}
.opt{
  font-family:var(--en);font-size:17px;font-weight:500;direction:ltr;text-align:left;
  background:#FFF8E7;border:3px solid #F0DFAE;color:var(--ink);border-radius:16px;
  padding:11px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;
  transition:transform .12s ease,background .2s,border-color .2s;
}
.opt:hover:not(:disabled){transform:translateY(-3px);background:#FFF1CE}
.opt:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.opt .badge{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--coral);color:#fff;
  font-size:14px;font-weight:700;display:grid;place-items:center;
}
.opt.right{background:#DFF3E6;border-color:var(--green);color:#14572F}
.opt.right .badge{background:var(--green)}
.opt.wrong{background:#FDE3E0;border-color:var(--coral);color:#8E2B22}
.opt.chosen{border-color:var(--sky)}
.opt:disabled{cursor:default}

/* ===== اكتب الكلمة ===== */
.write-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;direction:ltr}
.write-hint{font-family:var(--en);font-size:26px;font-weight:600;color:var(--board)}
.write-input{
  font-family:var(--en);font-size:19px;padding:10px 14px;border-radius:14px;
  border:3px solid #F0DFAE;background:#FFF8E7;width:190px;
}
.write-input:focus{outline:3px solid var(--sky);outline-offset:2px}
.write-input.right{border-color:var(--green);background:#DFF3E6}
.write-input.wrong{border-color:var(--coral);background:#FDE3E0}
.write-input.answered{border-color:var(--sky);background:#EAF6FC}
.write-go{
  font-family:var(--ar);font-weight:700;font-size:15px;background:var(--sun);color:#4A3200;
  border:0;border-radius:14px;padding:11px 20px;cursor:pointer;box-shadow:0 4px 0 #C98F17;
}
.write-go:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #C98F17}
.write-go:disabled{opacity:.5;cursor:default}
.write-answer{font-family:var(--en);font-size:17px;font-weight:600;color:var(--green)}

/* ===== صندوق الكلمات ===== */
.bank{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 14px;padding:12px;background:#FFF8E7;border:3px dashed #F0DFAE;border-radius:18px}
.chip{font-family:var(--en);direction:ltr;font-size:16px;font-weight:500;background:#fff;border:3px solid #F0DFAE;border-radius:14px;padding:8px 16px;cursor:pointer;transition:transform .12s,background .2s}
.chip:hover:not(:disabled){transform:translateY(-3px)}
.chip.picked{border-color:var(--sky);background:#DCF0FA}
.chip:disabled{opacity:.45;cursor:default}
.sent{font-family:var(--en);direction:ltr;text-align:left;font-size:18px;margin:10px 0;line-height:2.1}
.blank{display:inline-block;min-width:104px;border-bottom:4px solid var(--sky);text-align:center;padding:0 8px;font-weight:600;color:var(--sky)}
.blank.right{border-color:var(--green);color:#14572F}
.blank.wrong{border-color:var(--coral);color:#8E2B22}

/* ===== ردود الفعل ===== */
.fb{font-size:14px;font-weight:700;margin-top:12px;min-height:20px}
.fb.ok{color:var(--green)}
.fb.no{color:var(--coral)}
.fb.saved{color:var(--sky)}

/* ===== الأزرار العامة ===== */
.btn{
  font-family:var(--ar);font-weight:700;font-size:16px;border:0;border-radius:16px;
  padding:13px 28px;cursor:pointer;background:var(--sun);color:#4A3200;box-shadow:0 5px 0 #C98F17;
}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #C98F17}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:#fff;color:var(--board);box-shadow:0 5px 0 var(--line);border:3px solid var(--line)}

/* ===== اختيار الوضع — التدريب هو الأساس ===== */
.mode{
  display:block;width:100%;background:#FFF8E7;border:3px solid #F0DFAE;border-radius:20px;
  padding:22px 18px;cursor:pointer;text-align:center;font-family:var(--ar);
  transition:transform .12s,border-color .2s,background .2s;
}
.mode + .mode{margin-top:12px}
.mode:hover{transform:translateY(-4px);border-color:var(--sky);background:#FFF1CE}
.mode .ico{font-size:38px;display:block;margin-bottom:8px}
.mode b{display:block;font-size:19px;margin-bottom:6px}
.mode small{color:#6B7A83;font-size:13px;line-height:1.8;display:block}

/* الاختيار الرئيسي — أكبر وأوضح */
.mode.primary{
  position:relative;background:linear-gradient(180deg,#FFF4D6,#FFE9B8);
  border-color:var(--sun);border-width:4px;padding:28px 18px 24px;
  box-shadow:0 6px 0 #E9C878;
}
.mode.primary .ico{font-size:52px}
.mode.primary b{font-size:24px;color:var(--board)}
.mode.primary small{color:#6A5426;font-size:14px}
.mode.primary .pill{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;font-size:12px;font-weight:700;
  padding:5px 14px;border-radius:99px;white-space:nowrap;
}

/* الاختيار الثانوي — سطر صغير تحت الزرار الرئيسي */
.alt-mode{text-align:center;margin:16px 0 0;color:#8C9AA3;font-size:13.5px}
.alt-mode span{color:#A9B4BB}
.linkish{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--ar);
  font-size:13.5px;font-weight:700;color:var(--sky);text-decoration:underline;
}
.linkish:hover{color:var(--coral)}

/* ===== ملخّص المحتوى في الرئيسية ===== */
.tally{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 4px;
}
.tally-item{
  background:#fff;border:3px solid var(--line);border-radius:18px;
  padding:14px 8px;text-align:center;box-shadow:0 4px 0 #F0E7D3;
}
.tally-item b{display:block;font-family:var(--en);font-size:26px;color:var(--board);line-height:1.1}
.tally-item span{font-size:12px;color:#6B7A83}

/* ===== كتالوج الصفوف ===== */
.card.grade{padding-bottom:12px}
.course{border-top:2px dashed var(--line);padding:14px 0 10px}
.course:first-of-type{border-top:0;padding-top:4px}
.course-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.course-head b{font-size:16px}
.course-head .term{font-size:13px;color:#6B7A83}
.course-head .count{
  background:#FFF3D6;color:#7A5A12;border-radius:99px;
  padding:3px 11px;font-size:12px;font-weight:700;
}
.course-head .count.soon{background:#EEF1F3;color:#5A6A72}
.course-head .lock{margin-inline-start:auto;font-size:12px;font-weight:700;color:#8E2B22}
.course-head .lock.on{color:var(--green)}

.lessons{display:flex;flex-direction:column;gap:8px}
.lesson{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  background:#FFF8E7;border:3px solid #F0DFAE;border-radius:14px;padding:10px 12px;
  transition:transform .12s,background .2s,border-color .2s;
}
a.lesson:hover{transform:translateY(-3px);background:#FFF1CE;border-color:var(--sun)}
.lesson .ln{
  flex:0 0 auto;background:var(--board);color:#fff;border-radius:9px;
  padding:4px 9px;font-size:12px;font-weight:700;white-space:nowrap;
}
.lesson .lt{
  flex:1;min-width:0;font-family:var(--en);direction:ltr;text-align:left;
  font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lesson .lp{flex:0 0 auto;font-size:13px;font-weight:700;color:#7A5A12}
.lesson.dim{background:#F7F5F0;border-color:#E6DEC9;color:#98A2A8;border-style:dashed}
.lesson.dim .ln{background:#B9C3C8}

@media (max-width:460px){
  .tally{grid-template-columns:repeat(2,1fr)}
  .lesson .lt{font-size:14px}
}

/* ===== النتيجة ===== */
.result{background:var(--board);color:#fff;border:8px solid #A9743F;border-radius:24px;padding:28px 20px;text-align:center;margin:26px 0;box-shadow:0 12px 0 #8A5C31;animation:pop .5s cubic-bezier(.34,1.5,.64,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.result .stars{font-size:44px;letter-spacing:6px}
.result h3{font-family:var(--en);font-size:28px;margin:10px 0 4px;font-weight:600}
.result .score{font-family:var(--en);font-size:22px;color:var(--sun);font-weight:600}
.result p{margin:12px auto 0;max-width:460px;font-size:15px;color:#DCEFE2}
.review{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.review i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:700;background:rgba(255,255,255,.12)}
.review i.ok{background:var(--green)}
.review i.no{background:var(--coral)}

/* ===== الدخول ===== */
.login{max-width:400px;margin:40px auto;background:#fff;border:3px solid var(--line);border-radius:24px;padding:28px 24px;box-shadow:0 6px 0 #F0E7D3}
.login h1{text-align:center;font-size:22px;margin:0 0 4px}
.login p.sub{text-align:center;color:#6B7A83;font-size:14px;margin:0 0 22px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field input{width:100%;font-family:var(--en);font-size:20px;text-align:center;letter-spacing:.18em;padding:12px;border:3px solid #F0DFAE;border-radius:14px;background:#FFF8E7}
.field input:focus{outline:3px solid var(--sky);outline-offset:2px}
.err{background:#FDE3E0;border:2px solid var(--coral);color:#8E2B22;border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:16px;text-align:center}
.who{text-align:center;color:#6B7A83;font-size:13px;margin-top:14px}
.who a{color:var(--coral)}

footer{text-align:center;color:#8C9AA3;font-size:13px;margin-top:26px}

@media (max-width:520px){
  .modes{grid-template-columns:1fr}
  .opt{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}