/* ===== منصة القدرات — الأنماط ===== */
/* ألوان الهوية. تُعاد تسمية الثلاثة الأولى في chem.css و math.css فتتبعها
   المنصّتان كاملتين. والقيم مختارة لتفي بمعيار AA: --teal يحمل نصًّا أبيض في
   الأزرار والشريط العلوي فلا يقلّ تباينه عن 4.5، و--teal-d يُكتب نصًّا على
   أبيض وعلى --teal-l معًا. */
:root{
  --teal:#0c8080;        /* نصّ أبيض عليه 4.76 (كان #0e9494 عند 3.70 — راسب) */
  --teal-d:#0a6f6f;      /* نصّ على أبيض 5.97 */
  --teal-l:#e6f6f6;
  --gold:#b45309;        /* نصّ أبيض عليه 5.02 (كان #d98324 عند 2.91 — راسب) */
  --green:#16a34a;
  --green-l:#dcfce7;
  --red:#dc2626;
  --red-l:#fee2e2;
  --ink:#12262b;
  --muted:#5d7379;
  --line:#d7e5e7;
  --bg:#f4f8f9;
  --card:#ffffff;
  --shadow:0 2px 14px rgba(14,80,90,.08);
  --r:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Tajawal","Cairo","Segoe UI","Noto Naskh Arabic","Geeza Pro",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.9;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}
button{font-family:inherit}

/* ---------- Header ---------- */
.topbar{background:linear-gradient(160deg,var(--teal) 0%,var(--teal-d) 100%);color:#fff;padding-top:14px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:26px;font-weight:800;border:2px solid rgba(255,255,255,.35)
}
.brand h1{font-size:21px;margin:0;font-weight:800;letter-spacing:-.3px}
.brand p{margin:0;font-size:13px;opacity:.85}
.menu-btn{display:none;background:rgba(255,255,255,.15);border:0;color:#fff;font-size:22px;
  width:42px;height:42px;border-radius:12px;cursor:pointer}

.tabs{display:flex;gap:6px;max-width:1060px;margin:12px auto 0;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:rgba(255,255,255,.12);border:0;color:#fff;padding:11px 18px;border-radius:12px 12px 0 0;
  font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s;opacity:.85
}
.tab:hover{background:rgba(255,255,255,.22);opacity:1}
.tab.active{background:var(--bg);color:var(--teal-d);opacity:1;font-weight:800}

/* ---------- Blocks ---------- */
main{padding:26px 16px 40px;min-height:60vh}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
h2.sec{font-size:24px;margin:0 0 6px;font-weight:800}
h2.sec small{display:block;font-size:14px;font-weight:500;color:var(--muted);margin-top:2px}
h3{font-size:19px;margin:0 0 10px;font-weight:800;color:var(--teal-d)}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}.menu-btn{display:block}}

/* اختيار الأقسام */
.pick{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:18px;
  cursor:pointer;text-align:right;transition:.15s;display:block;width:100%;font-size:16px
}
.pick:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow)}
.pick .ico{font-size:30px;display:block;margin-bottom:6px}
.pick b{display:block;font-size:17px;margin-bottom:3px}
.pick span.d{font-size:13.5px;color:var(--muted);line-height:1.6;display:block}

.btn{
  background:var(--teal);color:#fff;border:0;border-radius:12px;padding:13px 26px;
  font-size:16px;font-weight:700;cursor:pointer;transition:.15s
}
.btn:hover{background:var(--teal-d)}
.btn.ghost{background:#fff;color:var(--teal-d);border:2px solid var(--teal)}
.btn.ghost:hover{background:var(--teal-l)}
.btn.gold{background:var(--gold)}
.btn.sm{padding:9px 16px;font-size:14px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.pill{display:inline-block;background:var(--teal-l);color:var(--teal-d);border-radius:999px;
  padding:4px 13px;font-size:13px;font-weight:700;margin-inline-end:6px}
.pill.g{background:var(--green-l);color:#166534}
.pill.r{background:var(--red-l);color:#991b1b}
.pill.o{background:#fff2e0;color:#9a5b12}

/* ---------- السؤال ---------- */
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.q-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.q-num{background:var(--teal);color:#fff;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none}
.q-text{font-size:20px;font-weight:700;line-height:2.1;margin:0 0 16px}
.q-text .blank{color:var(--teal);font-weight:800;letter-spacing:2px}
.pair{font-size:23px;font-weight:800;color:var(--teal-d);text-align:center;background:var(--teal-l);
  border-radius:12px;padding:12px;margin-bottom:16px}

/* نصّ استيعاب المقروء */
.passage{background:#f7fbfb;border:2px solid var(--line);border-inline-start:6px solid var(--teal);
  border-radius:12px;padding:16px 18px;margin-bottom:16px}
.passage b{display:block;color:var(--teal-d);font-size:17px;margin-bottom:6px}
.passage p{margin:0;font-size:17px;line-height:2.2;text-align:justify}

/* الكلمات المعلَّمة في الخطأ السياقي */
.q-text .prompt{display:block;font-size:15px;font-weight:600;color:var(--muted);margin-bottom:10px}
.mark{background:#fff3bf;border-radius:7px;padding:2px 9px;font-weight:800;
  white-space:nowrap;display:inline-block;margin:2px 1px}

.choices{display:grid;gap:9px}
@media(min-width:600px){.choices.two{grid-template-columns:1fr 1fr}}
.choice{
  display:flex;align-items:center;gap:11px;background:#fbfdfd;border:2px solid var(--line);
  border-radius:12px;padding:12px 14px;cursor:pointer;font-size:17px;transition:.12s;text-align:right;width:100%
}
.choice:hover:not(.locked){border-color:var(--teal);background:var(--teal-l)}
.choice .k{
  width:32px;height:32px;border-radius:9px;background:var(--teal-l);color:var(--teal-d);
  display:grid;place-items:center;font-weight:800;flex:none;font-size:15px
}
.choice.correct{border-color:var(--green);background:var(--green-l)}
.choice.correct .k{background:var(--green);color:#fff}
.choice.wrong{border-color:var(--red);background:var(--red-l)}
.choice.wrong .k{background:var(--red);color:#fff}
.choice.locked{cursor:default}

/* خيارات على شكل رسوم (الاستدلال المكاني) */
.choices.figs{grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:640px){.choices.figs{grid-template-columns:repeat(2,1fr)}}
.fig-choice{flex-direction:column;gap:8px;padding:14px 8px;justify-content:center}
.fig-choice svg{display:block;margin:0 auto;max-width:100%;height:auto}
.fig-choice > span:last-child{display:flex;justify-content:center;width:100%}

.verdict{margin-top:14px;padding:13px 16px;border-radius:12px;font-weight:700;font-size:16px}
.verdict.ok{background:var(--green-l);color:#166534}
.verdict.no{background:var(--red-l);color:#991b1b}

/* ---------- الشرح المكبّر ---------- */
.zoom-overlay{position:fixed;inset:0;background:rgba(6,40,45,.72);z-index:99;display:grid;place-items:center;padding:14px;overflow-y:auto}
.zoom-overlay[hidden]{display:none}
.zoom-box{background:#fff;border-radius:20px;max-width:800px;width:100%;padding:26px;position:relative;
  max-height:94vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.zoom-close{position:absolute;left:16px;top:16px;background:var(--red-l);color:var(--red);border:0;
  width:38px;height:38px;border-radius:11px;font-size:19px;cursor:pointer;font-weight:800}

.zq{font-size:24px;font-weight:800;line-height:2.1;background:var(--teal-l);border-radius:14px;
  padding:18px;margin:8px 0 20px;text-align:center}

.rule{background:#fff8ec;border-inline-start:6px solid var(--gold);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.rule b{display:block;font-size:18px;color:#8a5011;margin-bottom:4px}
.rule p{margin:0;font-size:18px;line-height:2}

.step{display:flex;gap:14px;align-items:flex-start;background:#fbfdfd;border:2px solid var(--line);
  border-radius:14px;padding:16px;margin-bottom:11px;opacity:0;transform:translateY(8px);
  animation:pop .35s ease forwards}
@keyframes pop{to{opacity:1;transform:none}}
.step .n{width:40px;height:40px;border-radius:12px;background:var(--teal);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:19px;flex:none}
.step .t{font-size:19px;line-height:2;font-weight:600}
.step .t .hl{background:#fff3bf;padding:1px 7px;border-radius:6px;font-weight:800}
.step.final{border-color:var(--green);background:var(--green-l)}
.step.final .n{background:var(--green)}

.trick{background:var(--teal-l);border-radius:12px;padding:16px 18px;margin-top:16px;font-size:18px}
.trick b{color:var(--teal-d);display:block;margin-bottom:4px;font-size:18px}

.stepper{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* رسم توضيحي */
.fig{display:flex;justify-content:center;margin:0 0 18px}
.fig svg{max-width:100%;height:auto}

/* ---------- الدروس ---------- */
.lesson-body{font-size:17px;line-height:2.1}
.lesson-body h4{font-size:18px;color:var(--teal-d);margin:20px 0 8px}
.lesson-body ul{padding-inline-start:22px;margin:8px 0}
.lesson-body li{margin-bottom:7px}
.ex{background:var(--teal-l);border-radius:12px;padding:14px 16px;margin:12px 0;font-size:17px}
.ex b{color:var(--teal-d)}

table.tbl{width:100%;border-collapse:collapse;font-size:16px;margin:10px 0}
table.tbl th,table.tbl td{border:1px solid var(--line);padding:10px 12px;text-align:right}
table.tbl th{background:var(--teal-l);color:var(--teal-d);font-weight:800}
table.tbl tr:nth-child(even) td{background:#fbfdfd}

/* ---------- الاختبار ---------- */
.exam-bar{position:sticky;top:0;z-index:20;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 18px;box-shadow:var(--shadow);margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.timer{font-size:20px;font-weight:800;color:var(--teal-d);font-variant-numeric:tabular-nums}
.timer.low{color:var(--red)}
.bar{height:9px;background:var(--line);border-radius:99px;overflow:hidden;flex:1;min-width:120px}
.bar i{display:block;height:100%;background:var(--teal);border-radius:99px;transition:width .3s}

.score-ring{text-align:center;padding:10px 0}
.score-ring .big{font-size:56px;font-weight:800;color:var(--teal-d);line-height:1.2}
.score-ring .lbl{font-size:16px;color:var(--muted)}

.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.stat .v{font-size:30px;font-weight:800;color:var(--teal-d)}
.stat .l{font-size:14px;color:var(--muted)}

.empty{text-align:center;color:var(--muted);padding:40px 10px;font-size:17px}
.foot{color:var(--muted);font-size:13px;text-align:center;padding:0 16px 26px}

.hero{background:linear-gradient(160deg,var(--teal),var(--teal-d));color:#fff;border-radius:20px;padding:30px;margin-bottom:20px}
.hero h2{font-size:28px;margin:0 0 8px;font-weight:800}
.hero p{margin:0 0 18px;font-size:16.5px;opacity:.92;max-width:640px;line-height:2}
.hero .btn{background:#fff;color:var(--teal-d)}
.hero .btn:hover{background:var(--teal-l)}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.14)}

select,input[type=number]{
  font-family:inherit;font-size:15px;padding:10px 12px;border:2px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink)
}
label.fld{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:5px}

@media print{.topbar,.tabs,.foot,.no-print{display:none}}

/* رابط التنقّل بين المنصّتين */
.switch-app{background:rgba(255,255,255,.16);color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:11px;font-size:14px;font-weight:700;
  border:1px solid rgba(255,255,255,.3);white-space:nowrap;transition:.15s}
.switch-app:hover{background:rgba(255,255,255,.28)}
/* شريط التنقّل بين المنصّات الثلاث */
.switch-wrap{display:flex;gap:8px;flex-wrap:wrap}

/* ===== بنية مشتركة بين منصّتَي المنهج (الكيمياء والرياضيات) =====
   كانت هذه الأصناف معرَّفة في chem.css وحدها، بينما يستعملها math-app.js
   أيضًا — فكانت بطاقات الفصول وصناديق المعطيات والمطلوب والقانون تظهر بلا
   أي تنسيق على منصة الرياضيات. وهي أصلًا مبنية على متغيّرات الهوية، فمكانها
   الملف الأساس لتتبع كلَّ منصة بلونها. */
/* ترقيم الفصول */
.ch-card{display:flex; gap:14px; align-items:flex-start; text-align:right; width:100%;
  background:var(--card); border:2px solid var(--line); border-radius:var(--r);
  padding:18px; cursor:pointer; transition:.15s}
.ch-card:hover{border-color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow)}
.ch-num{width:52px;height:52px;flex:none;border-radius:14px;background:var(--teal);
  color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800}
.ch-card b{display:block;font-size:18px;margin-bottom:4px}
.ch-card .idea{font-size:14px;color:var(--muted);line-height:1.8}
.ch-card .secs{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.sec-chip{background:var(--teal-l);color:var(--teal-d);border-radius:8px;
  padding:3px 10px;font-size:12.5px;font-weight:700}

/* صندوق الفكرة الرئيسة */
.big-idea{background:linear-gradient(135deg,var(--teal-l),#fff);border-inline-start:6px solid var(--teal);
  border-radius:12px;padding:14px 18px;margin-bottom:18px;font-size:17px;line-height:2}
.big-idea b{color:var(--teal-d);display:block;font-size:14px;margin-bottom:4px}

/* صندوق القانون داخل الدروس */
.law{background:#fff8ec;border:2px solid #f0d9b5;border-radius:12px;
  padding:14px 18px;margin:14px 0;font-size:17px;line-height:2}
.law b{color:#8a5011}
.law .eq{display:block;text-align:center;font-size:20px;font-weight:800;
  color:var(--teal-d);background:#fff;border-radius:10px;padding:10px;margin:10px 0;
  direction:ltr;unicode-bidi:embed}

/* المعطيات والمطلوب */
.gw{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:560px){.gw{grid-template-columns:1fr}}
.gw>div{border-radius:12px;padding:14px 16px;font-size:16px;line-height:2}
.gw .given{background:#eef6ff;border:2px solid #cfe2ff}
.gw .want{background:#fff0f0;border:2px solid #ffd0d0}
.gw h5{margin:0 0 8px;font-size:14px;font-weight:800;color:var(--muted)}
.gw ul{margin:0;padding-inline-start:18px}
.gw li{direction:ltr;text-align:right;unicode-bidi:plaintext}

/* تقويم الإجابة */
.evaluate{background:#eafaf0;border-inline-start:6px solid var(--green);
  border-radius:12px;padding:14px 18px;margin-top:14px;font-size:17px;line-height:2}
.evaluate b{color:#166534;display:block;margin-bottom:4px}

.mastery{height:10px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:8px}
.mastery i{display:block;height:100%;background:var(--teal);border-radius:99px}

/* صندوق قاعدة داخل نصّ الدرس، وتنبيه على خطأ شائع — يستعملهما درسا الرياضيات */
.rulebox{background:var(--teal-l);border-inline-start:6px solid var(--teal);
  border-radius:12px;padding:12px 16px;margin:12px 0;font-size:17px;line-height:2}
.rulebox b{color:var(--teal-d)}
.warn{background:#fff4ed;border-inline-start:6px solid var(--gold);
  border-radius:12px;padding:12px 16px;margin:12px 0;font-size:16.5px;line-height:2}
.warn b{color:#9a3412}