/* ===== منصة الرياضيات — الهوية البرتقالية (تُبنى فوق app.css) =====
   تُعاد تسمية متغيّرات app.css الثلاثة كما تفعل chem.css تمامًا، لا أن تُرقَّع
   القواعد واحدةً واحدة. فـ app.css يقرأ var(--teal) في تسعةٍ وثلاثين موضعًا —
   منها بطاقة .hero وعناوين h3 — ولا يقرأ أسماءً أخرى. فتعريف --brand وحده كان
   يترك تلك المواضع فيروزية على منصة برتقالية. */
body.math{
  --teal:#b4531a;        /* برتقالي محروق: نصّ أبيض عليه 5.01 — يفي AA */
  --teal-d:#8a3f12;      /* نصّ على أبيض 7.50 — يفي AAA */
  --teal-l:#fdf1e8;
  --gold:#0f766e;        /* أزرق مخضرّ يكمّل البرتقالي ويتميّز عنه، 5.47 على الأبيض */
}
body.math .hl{background:#ffe6d2;color:var(--teal-d);padding:1px 5px;border-radius:5px;font-weight:700}

/* حاوية الرسم */
.plotbox{background:#fff;border:1px solid #ecd9cb;border-radius:12px;padding:10px;
  display:flex;justify-content:center;margin:10px 0}
.plotbox svg{display:block}

/* ممالق المرسم التفاعلي */
.sliders{display:grid;gap:14px;margin-top:12px}
.slider-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.slider-row label{font-weight:700;min-width:82px;color:var(--teal-d)}
.slider-row input[type=range]{width:100%;accent-color:var(--teal)}
.slider-row output{min-width:34px;text-align:center;font-weight:700;
  background:var(--teal-l);color:var(--teal-d);border-radius:7px;padding:3px 8px}
.rule-live{margin-top:12px;text-align:center;font-size:20px;font-weight:800;
  color:var(--teal-d);background:var(--teal-l);border-radius:10px;padding:12px;direction:ltr}

/* أين الخطأ؟ */
.fe-step{display:block;width:100%;text-align:right;margin:8px 0;padding:14px 16px;
  border:1.5px solid #e3e9e9;border-radius:12px;background:#fff;cursor:pointer;
  font:inherit;line-height:1.9;transition:.15s}
.fe-step:hover{border-color:var(--teal);background:#fffaf6}
.fe-step .n{display:inline-block;min-width:26px;height:26px;line-height:26px;
  text-align:center;border-radius:8px;background:#f1f4f4;font-weight:700;margin-left:10px}
.fe-step.bad{border-color:#c0392b;background:#fdeceb}
.fe-step.bad .n{background:#c0392b;color:#fff}
.fe-step.ok{border-color:#2e9e63;background:#eefaf3}
.fe-step.ok .n{background:#2e9e63;color:#fff}
.fe-fix{margin-top:14px;padding:14px 16px;border-radius:12px;
  background:#fff6e8;border:1px solid #f0d9b8;line-height:2}

/* شبكة المصفوفة */
.mat{border-collapse:separate;border-spacing:0;direction:ltr;margin:0 auto}
.mat caption{caption-side:top;font-weight:800;color:var(--teal-d);padding-bottom:6px}
.mat td{min-width:46px;height:42px;text-align:center;vertical-align:middle;
  font-size:17px;font-weight:600;background:#fff;border:1px solid #ecd9cb;
  transition:.12s}
.mat-hl-row{background:#fff2e6 !important}
.mat-hl-col{background:#fff2e6 !important}
.mat-hl-cell{background:var(--teal) !important;color:#fff !important}
.mat-wrap{display:flex;gap:18px;align-items:center;justify-content:center;
  flex-wrap:wrap;margin:14px 0}
.mat-op{font-size:26px;font-weight:800;color:var(--teal-d)}
.mat-terms{text-align:center;font-size:19px;font-weight:700;
  background:var(--teal-l);color:var(--teal-d);border-radius:10px;padding:14px;margin-top:12px}
.mat-terms .expr{display:inline-block;direction:ltr;unicode-bidi:isolate;
  font-family:monospace;font-size:20px;margin-inline-start:6px}
.mat-input{width:52px;height:38px;text-align:center;font:inherit;font-weight:600;
  border:1px solid #ddd;border-radius:8px}
.mat-bad{background:#fdeceb;border:1px solid #f0b8b3;border-radius:12px;
  padding:14px 16px;line-height:2;color:#8a2018;margin-top:12px}

/* شبكة القسمة التركيبية */
.synth{border-collapse:collapse;direction:ltr;margin:0 auto;font-size:18px}
.synth td{min-width:56px;height:40px;text-align:center;font-weight:600;padding:4px 8px}
.synth .rbox{border:2px solid var(--teal);border-radius:8px;background:var(--teal-l);
  font-weight:800;color:var(--teal-d)}
.synth .line td{border-top:2px solid var(--teal-d)}
.synth .cur{background:#ffe6d2;border-radius:8px}
.synth .quo{color:var(--teal);font-weight:800}
.synth .rem{background:var(--teal);color:#fff;border-radius:8px;font-weight:800}
.synth-note{background:#fff6e8;border:1px solid #f0d9b8;border-radius:12px;
  padding:14px 16px;margin-top:14px;line-height:2}
.synth-thm{background:#eefaf3;border:1px solid #b9e3cd;border-radius:12px;
  padding:14px 16px;margin-top:12px;line-height:2}