/*
  قاعدة واحدة في هذا الملف: خصائص منطقية فقط.
  لا left ولا right ولا margin-left — عشان نسخة إنجليزية LTR لاحقًا تشتغل بنفس الملف.
*/

/*
  الهوية: ALNO Technologies — كحلي عميق، ذهبي، فضي (مقيسة من الشعار في assets/brand).
  --brand-* ثابتة في الوضعين (شريط العلامة أعلى الصفحة كحلي دائمًا).
  --accent يتبادل الدور: كحلي على الخلفية الفاتحة، ذهبي على الداكنة — حيث يقرأ كل منهما بوضوح.
  --good و --rose دلاليان (صح/خطأ) ومنفصلان عن ألوان العلامة.
  --external للمحتوى من خارج المنهج الرسمي: لون ثالث متعمَّد حتى لا يُقرأ كجزء من المنهج.
*/
:root {
    --brand-navy: #081329;
    --brand-navy-2: #0f1f3d;
    --brand-gold: #e3a844;
    --brand-silver: #e6e9f0;

    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #ebeff6;
    --ink: #0c1830;
    --muted: #55617a;
    --line: #d6dce8;
    --accent: #1c3b7a;
    --accent-soft: #e5ebf6;
    --accent-2: #9a5f12;
    --accent-2-soft: #f7ecd9;
    --good: #1d7a4b;
    --good-soft: #e1f2e8;
    --rose: #a02f3d;
    --rose-soft: #f6e3e5;
    --external: #5c4796;
    --external-soft: #eeeaf7;
    --measure: 74ch;
    --radius: 8px;
    --radius-lg: 14px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #070f1f;
        --surface: #0e1a30;
        --surface-2: #13223e;
        --ink: #e7ebf2;
        --muted: #9aa6bd;
        --line: #22314f;
        --accent: #e3a844;
        --accent-soft: #2b2413;
        --accent-2: #e3a844;
        --accent-2-soft: #2b2413;
        --good: #4cc38a;
        --good-soft: #10301f;
        --rose: #ef8a96;
        --rose-soft: #3a1a21;
        --external: #b8a6f0;
        --external-soft: #1f1a38;
        color-scheme: dark;
    }
}

* {
    box-sizing: border-box;
}

html {
    /* الأرقام اللاتينية داخل نص عربي — بدونها يخرج «3-1» معكوسًا في بعض المتصفحات. */
    font-variant-numeric: lining-nums;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: "Noto Kufi Arabic", system-ui, sans-serif;
    line-height: 1.4;
    text-wrap: balance;
}

h1 {
    font-weight: 700;
    font-size: clamp(26px, 5vw, 40px);
    margin-block: 0 16px;
}

h2 {
    font-weight: 700;
    font-size: clamp(19px, 3vw, 25px);
    margin-block: 40px 12px;
}

h3 {
    font-weight: 600;
    font-size: 16.5px;
    margin-block: 0 6px;
}

p {
    max-inline-size: var(--measure);
    margin-block: 0 14px;
}

a {
    color: var(--accent);
}

/* عزل اتجاه المصطلح الإنجليزي والكود داخل نص عربي. */
.en {
    unicode-bidi: isolate;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.9em;
}

/* ---------- الهيكل ---------- */

.shell {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
}

/* شريط العلامة كحلي في الوضعين — الشعار مصمَّم على كحلي، وعلى أبيض يفقد حافته الذهبية. */
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    padding: 10px 20px;
    border-block-end: 2px solid var(--brand-gold);
    background: linear-gradient(180deg, var(--brand-navy-2), var(--brand-navy));
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Noto Kufi Arabic", system-ui, sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--brand-silver);
    text-decoration: none;
}

.brand-mark {
    inline-size: 40px;
    block-size: 40px;
    flex: none;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nav-link {
    padding: 5px 12px;
    border-radius: 5px;
    color: color-mix(in srgb, var(--brand-silver) 72%, transparent);
    text-decoration: none;
    font-size: 14.5px;
}

.nav-link:hover {
    background: color-mix(in srgb, var(--brand-silver) 10%, transparent);
    color: var(--brand-silver);
}

.nav-link-active {
    background: color-mix(in srgb, var(--brand-gold) 18%, transparent);
    color: var(--brand-gold);
}

.nav-link:focus-visible,
.brand:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

/* ---------- كرت صاحب الموقع ---------- */

.author-trigger {
    margin-inline-start: auto;
    display: inline-grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--brand-gold) 55%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--brand-gold);
    cursor: pointer;
}

.author-trigger:hover {
    background: color-mix(in srgb, var(--brand-gold) 16%, transparent);
}

.author-trigger:focus-visible,
.author-close:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

.author-card {
    inline-size: min(92vw, 400px);
    padding: 26px 26px 22px;
    border: 1px solid var(--line);
    border-block-start: 3px solid var(--brand-gold);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--brand-navy) 40%, transparent);
}

.author-card::backdrop {
    background: color-mix(in srgb, var(--brand-navy) 62%, transparent);
}

.author-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-end: 18px;
}

.author-monogram {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    border: 2px solid var(--brand-gold);
    border-radius: 50%;
    background: var(--brand-navy);
    color: var(--brand-gold);
    font-family: "Noto Kufi Arabic", system-ui, sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
}

.author-name {
    margin-block: 0 2px;
    font-size: 19px;
}

.author-role {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--accent-2-soft);
    color: var(--accent-2);
    font-size: 13px;
    font-weight: 600;
}

.author-mission {
    margin-block: 0 10px;
    line-height: 1.9;
    text-wrap: balance;
}

.author-note {
    margin-block: 0 18px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--line);
    color: var(--muted);
}

.author-close {
    padding: 6px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.author-close:hover {
    border-color: var(--accent);
}

.content {
    flex: 1;
    inline-size: 100%;
    max-inline-size: 1040px;
    margin-inline: auto;
    padding: 40px 20px 72px;
}

.foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    padding: 18px 20px;
    border-block-start: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.foot-maker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.foot-maker img {
    inline-size: 26px;
    block-size: 26px;
}

/* ---------- الصفحة الرئيسية ---------- */

.hero {
    padding-block: 40px 24px;
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hero-brand img {
    flex: none;
    inline-size: clamp(72px, 14vw, 112px);
    block-size: auto;
    filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--brand-gold) 30%, transparent));
}

.hero-brand h1 {
    margin-block-end: 0;
}

.eyebrow {
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-block-end: 10px;
}

.lede {
    font-size: clamp(15.5px, 2vw, 18px);
    color: var(--muted);
    max-inline-size: 62ch;
}

.cta {
    display: inline-block;
    margin-block-start: 18px;
    padding: 10px 22px;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--bg);
    text-decoration: none;
    font-weight: 600;
}

/* ---------- خريطة المنهج ---------- */

.unit {
    margin-block-end: 12px;
}

.unit-head {
    display: flex;
    align-items: center;
    gap: 14px;
    border-block-end: 1px solid var(--line);
    padding-block-end: 14px;
}

.unit-head h2 {
    margin-block: 0;
}

.unit-num {
    font-size: 12.5px;
    color: var(--accent);
    flex: none;
}

.lessons {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 16px 0;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.lesson {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px 18px;
}

.lesson-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
}

.lesson-code {
    color: var(--accent);
    flex: none;
}

.lesson-title {
    font-family: "Noto Kufi Arabic", system-ui, sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ink);
}

.lesson-sum {
    color: var(--muted);
    font-size: 14px;
    margin-block: 8px 0;
}

.lesson-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-block: 10px 0;
    font-size: 12.5px;
    color: var(--muted);
}

.sim {
    color: var(--accent);
}

/* ---------- صفحة الدرس ---------- */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-block-end: 20px;
}

.lesson-head {
    border-block-end: 1px solid var(--line);
    padding-block-end: 20px;
}

.sim-note {
    display: inline-block;
    margin-block-start: 8px;
    padding: 5px 12px;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
}

.block {
    margin-block-start: 8px;
}

.hint {
    color: var(--muted);
    font-size: 13.5px;
}

.terms {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-block-start: 16px;
}

.term {
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--surface);
    padding: 14px 16px;
}

.term-name {
    margin-block: 0 2px;
}

.term-en {
    color: var(--accent);
    margin-block: 0 6px;
}

.term-def {
    color: var(--muted);
    font-size: 14px;
    margin-block: 0;
}

.questions {
    padding-inline-start: 1.4em;
    margin-block-start: 16px;
}

.question {
    margin-block-end: 20px;
    padding-inline-start: 6px;
}

.question::marker {
    color: var(--accent);
}

.q-text {
    font-weight: 500;
    margin-block-end: 6px;
}

.q-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block: 0 8px;
    font-size: 12px;
}

.q-kind,
.q-concept {
    padding: 2px 9px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--muted);
}

.q-concept {
    color: var(--accent);
}

.options {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 0;
    display: grid;
    gap: 6px;
    max-inline-size: var(--measure);
}

.options-order {
    list-style: decimal;
    padding-inline-start: 1.4em;
}

.options li {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    padding: 7px 12px;
    font-size: 14.5px;
}

.options-order li {
    list-style-position: outside;
}

.error {
    color: var(--rose);
}

/* ==========================================================================
   الحصة الحيّة — خصائص منطقية فقط، مثل باقي الملف
   ========================================================================== */

.narrow {
    max-inline-size: 46ch;
    margin-block-start: 24px;
}

.form {
    display: grid;
    gap: 14px;
    max-inline-size: 42ch;
    margin-block-start: 20px;
}

.field {
    display: grid;
    gap: 5px;
}

.field > span {
    font-size: 13.5px;
    color: var(--muted);
}

.field input,
.field .form-control {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    inline-size: 100%;
}

.field input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.code-input {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 26px;
    letter-spacing: 0.3em;
    text-align: center;
}

.inline-form {
    margin-block-start: 10px;
}

.cta-small {
    padding: 6px 14px;
    font-size: 14px;
}

.cta-quiet {
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--line);
}

.cta-danger {
    background: var(--rose);
    color: var(--bg);
}

.cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.nav-user {
    font-size: 13px;
    color: var(--muted);
    margin-inline-start: auto;
}

.nav-form {
    display: inline;
}

.nav-button {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

/* ---------- لوحة المعلم ---------- */

.console-head {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    border-block-end: 1px solid var(--line);
    padding-block-end: 16px;
}

.console-head h1 {
    margin-block: 0;
    font-size: clamp(20px, 3.4vw, 28px);
}

.console-code {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 20px;
    border: 1px solid var(--accent-line, var(--line));
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.code-label {
    font-size: 11.5px;
    color: var(--muted);
}

.code-big {
    font-size: 34px;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 600;
}

.console-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block: 16px;
}

.pill {
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
}

.pill-live {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.console-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 18px;
}

.verdict {
    padding: 12px 16px;
    border-inline-start: 3px solid var(--rose);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--surface);
    font-size: 16px;
}

.rationale {
    margin-block-start: 12px;
    padding: 10px 14px;
    border-inline-start: 3px solid var(--accent);
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
}

/* ---------- أعمدة التوزيع ---------- */

.bars {
    display: grid;
    gap: 8px;
    margin-block: 14px;
    max-inline-size: var(--measure);
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(8ch, 22ch) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
}

.bar-label {
    color: var(--muted);
}

.bar-track {
    display: block;
    block-size: 14px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.bar-fill {
    display: block;
    block-size: 100%;
    background: var(--muted);
    border-radius: 999px;
    min-inline-size: 2px;
}

.bar-count {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    color: var(--muted);
}

.bar-correct .bar-label,
.bar-correct .bar-count {
    color: var(--good);
    font-weight: 600;
}

.bar-correct .bar-fill {
    background: var(--good);
}

/* ---------- جدول المفاهيم ---------- */

.tblwrap {
    overflow-x: auto;
    margin-block: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

table {
    border-collapse: collapse;
    inline-size: 100%;
    min-inline-size: 520px;
    font-size: 14px;
}

th, td {
    padding: 9px 14px;
    text-align: start;
    border-block-end: 1px solid var(--line);
}

th {
    background: var(--surface-2);
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
}

tr:last-child td {
    border-block-end: none;
}

/* ---------- شاشة الطالب ---------- */

.student {
    padding-block-start: 12px;
}

.student-q {
    font-size: clamp(20px, 5vw, 30px);
    margin-block: 6px 20px;
}

.choices {
    display: grid;
    gap: 10px;
    max-inline-size: 46ch;
}

.choice {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 16px;
    text-align: start;
    cursor: pointer;
}

.choice:hover:not(:disabled) {
    border-color: var(--accent);
}

.choice:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.choice-picked {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    opacity: 1;
}

.sent {
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 16px;
    max-inline-size: 46ch;
}

/* ---------- شاشة العرض ---------- */

.stage {
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding: 32px;
    background: var(--bg);
}

.stage-center,
.stage-question {
    inline-size: 100%;
    max-inline-size: 1100px;
    text-align: center;
}

.stage-title {
    font-size: clamp(28px, 5vw, 54px);
    margin-block: 10px 24px;
}

.stage-sub {
    font-size: clamp(15px, 2vw, 22px);
    color: var(--muted);
    margin-inline: auto;
}

.stage-code {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: clamp(64px, 18vw, 190px);
    line-height: 1.05;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-block: 8px 18px;
}

.stage-url {
    font-size: clamp(20px, 4vw, 40px);
    color: var(--ink);
    margin-block: 4px 18px;
}

.stage-tally {
    font-size: clamp(18px, 3vw, 28px);
    color: var(--accent);
    margin-block-start: 24px;
    margin-inline: auto;
}

.options-big li {
    font-size: clamp(16px, 2.4vw, 26px);
    padding: 12px 18px;
}

.options-big {
    max-inline-size: 900px;
    margin-inline: auto;
}

.bars-big .bar-row {
    font-size: clamp(15px, 2.2vw, 24px);
    grid-template-columns: minmax(10ch, 26ch) 1fr auto;
}

.bars-big .bar-track {
    block-size: 22px;
}

.bars-big {
    max-inline-size: 900px;
    margin-inline: auto;
}

/* ==========================================================================
   المحاكيات
   ========================================================================== */

.sim-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 10px;
}

.sim-link {
    padding: 7px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
}

.checkpoints {
    padding-inline-start: 1.4em;
    margin-block: 16px;
    color: var(--muted);
    font-size: 14px;
    max-inline-size: var(--measure);
}

.checkpoints li::marker {
    color: var(--line);
}

.checkpoint-done {
    color: var(--accent);
    font-weight: 600;
}

.checkpoint-done::marker {
    color: var(--accent);
}

.editor {
    margin-block-start: 8px;
}

.editor-panes {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pane {
    display: grid;
    gap: 6px;
}

.pane-head {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--accent);
}

/* الطبقة المُزالة تبهت ولا تختفي: الطالب يجب أن يرى أن الكود ما زال مكتوبًا. */
.pane-off {
    opacity: 0.4;
}

.pane textarea {
    inline-size: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}

.pane textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 16px;
}

.editor-preview {
    display: grid;
    gap: 6px;
    margin-block-start: 8px;
}

/* ---- محاكيات: عناصر مشتركة ---- */

/* ---------- محرّكات المحاكاة ---------- */

.sim-prompt {
    font-family: "Noto Kufi Arabic", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(16px, 2.8vw, 20px);
    line-height: 1.6;
    margin-block: 6px 14px;
    max-inline-size: var(--measure);
}

.sim-complete {
    margin-block-start: 14px;
    padding: 12px 16px;
    border-inline-start: 3px solid var(--good);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--good-soft);
    color: var(--ink);
    max-inline-size: var(--measure);
}

.sim-toggle {
    cursor: pointer;
}

.pill-good {
    background: var(--good-soft);
    color: var(--good);
    border-color: var(--good);
}

.pill-bad {
    background: var(--rose-soft);
    color: var(--rose);
    border-color: var(--rose);
}

.sim-classifier {
    margin-block-start: 8px;
}

.ruler-frame {
    max-inline-size: 100%;
    margin-block: 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: inline-size 0.1s ease-out;
}

.ruler-nav {
    padding: 8px 12px;
    margin-block-end: 8px;
    border-radius: 6px;
    background: var(--surface-2);
    font-size: 13px;
    color: var(--muted);
}

.ruler-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ruler-card {
    flex: 1 1 160px;
    min-inline-size: 140px;
    padding: 16px 12px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    text-align: center;
    font-size: 13.5px;
}

.crap-mock {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-block: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.crap-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
}

.crap-item-1 {
    text-align: start;
    border: 1px dashed var(--line);
    border-radius: 0;
}

.crap-item-2 {
    text-align: center;
    border: 2px solid var(--muted);
    border-radius: 16px;
    margin-inline-start: 20px;
}

.crap-item-3 {
    text-align: end;
    border: 1px solid var(--accent);
    border-radius: 4px;
}

.crap-title,
.crap-price {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
}

.crap-mock.crap-aligned .crap-item {
    text-align: start;
    margin-inline-start: 0;
}

.crap-mock.crap-repeated .crap-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.crap-mock.crap-grouped {
    gap: 10px;
}

.crap-mock.crap-contrast .crap-title {
    font-weight: 700;
    font-size: 16px;
}

.crap-mock.crap-contrast .crap-price {
    color: var(--accent);
    font-weight: 600;
}

.editor-preview iframe {
    inline-size: 100%;
    block-size: 380px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

/* ==========================================================================
   الصفحة الرئيسية — إحصاءات وعرض المسار
   ========================================================================== */

.home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-block: 22px 0;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--line);
}

.stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-num {
    font-family: "Noto Kufi Arabic", system-ui, sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--accent);
}

.stat-label {
    color: var(--muted);
    font-size: 13.5px;
}

.value-props {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-block: 12px 0;
}

.value-prop {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.value-prop h3 {
    margin-block: 0 6px;
}

.value-prop p {
    color: var(--muted);
    font-size: 14px;
    margin-block-end: 0;
}

.path-preview {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 14px 0;
    display: grid;
    gap: 10px;
}

.path-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
}

.path-item:hover {
    border-color: var(--accent);
}

.path-num {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: 14px;
}

.path-body h3 {
    margin-block: 0 2px;
    font-size: 15px;
}

.path-body p {
    margin-block: 0;
    color: var(--muted);
    font-size: 13px;
}

.path-pilot {
    margin-inline-start: auto;
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-2-soft);
    color: var(--accent-2);
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   خريطة المنهج — بطاقات الوحدات
   ========================================================================== */

.unit-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 22px 24px 26px;
    margin-block-end: 18px;
}

.unit-badge {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: "Noto Kufi Arabic", system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
}

.unit-titles h2 {
    margin-block: 0;
}

.unit-sub {
    color: var(--muted);
    font-size: 13.5px;
    margin-block: 2px 0 0;
}

.lesson-order {
    display: inline-grid;
    place-items: center;
    inline-size: 22px;
    block-size: 22px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

.lesson-pilot {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-2-soft);
    color: var(--accent-2);
    font-size: 11px;
    font-weight: 600;
}

/* ==========================================================================
   صفحة الدرس — تجربة تعلّم (Hook / شرح / مقارنة / علاقة مفاهيم / خلاصة / تحقّق)
   ========================================================================== */

.section-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-block-end: 6px;
}

.hook {
    margin-block: 18px 0;
    padding: 16px 20px;
    border-inline-start: 4px solid var(--accent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background: var(--accent-soft);
}

.hook p {
    margin-block-end: 0;
    font-size: clamp(15.5px, 2vw, 18px);
    color: var(--ink);
}

/* ---- علاقة المفاهيم: دوائر متداخلة ---- */

.nesting {
    display: grid;
    gap: 10px;
    margin-block: 14px 0;
    max-inline-size: 560px;
}

.nesting-level {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

.nesting-tag {
    flex: none;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface);
}

.nesting-body strong {
    display: block;
    font-size: 14.5px;
}

.nesting-body span {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    margin-block-start: 2px;
}

.nesting-level:nth-child(1) { background: var(--accent-soft); margin-inline-end: 0; }
.nesting-level:nth-child(2) { background: color-mix(in srgb, var(--accent-soft) 75%, var(--surface)); margin-inline-end: 5%; }
.nesting-level:nth-child(3) { background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); margin-inline-end: 10%; }
.nesting-level:nth-child(4) { background: var(--surface); margin-inline-end: 15%; }

.nesting-level:nth-child(1) .nesting-tag { color: var(--accent); }
.nesting-level:nth-child(2) .nesting-tag,
.nesting-level:nth-child(3) .nesting-tag,
.nesting-level:nth-child(4) .nesting-tag { color: var(--ink); }

/* ---- أعمدة متكافئة (تصنيف مسطّح — لا تسلسل هرمي بينها) ---- */

.pillars {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-block: 14px 0;
}

.pillar {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-block-start: 3px solid var(--accent);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface);
}

.pillar-tag {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--muted);
}

.pillar strong {
    font-size: 14.5px;
}

.pillar-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.pillar span:last-child {
    color: var(--muted);
    font-size: 13px;
}

/* ---- تسلسل خطوات (عملية خطية، أو دائرية إن رجعت لبدايتها) ---- */

.process {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 14px 0;
    display: grid;
    gap: 8px;
    max-inline-size: var(--measure);
}

.process-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 14.5px;
}

.process-num {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    font-size: 12.5px;
}

.process-step-done {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.process-step-done .process-num {
    background: var(--accent);
    color: var(--bg);
}

.process-loop {
    color: var(--accent-2);
    font-size: 13.5px;
    margin-block-start: 4px;
}

/* ---- مقارنة عمودين ---- */

.comparison {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    margin-block: 14px 0;
    max-inline-size: 720px;
}

.comparison-col {
    padding: 16px 18px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.comparison-col:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.comparison-col:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-inline-start: none;
}

.comparison-col h3 {
    margin-block: 0 8px;
    font-size: 14.5px;
}

.comparison-col p {
    margin-block-end: 0;
    color: var(--muted);
    font-size: 13.5px;
}

.comparison-vs {
    display: grid;
    place-items: center;
    padding-inline: 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    background: var(--bg);
    border-block: 1px solid var(--line);
}

@media (max-width: 640px) {
    .comparison {
        grid-template-columns: 1fr;
    }

    .comparison-col:first-child,
    .comparison-col:last-child {
        border-radius: 0;
        border-inline-start: 1px solid var(--line);
    }

    .comparison-vs {
        border-inline: 1px solid var(--line);
        border-block: none;
        padding-block: 6px;
    }
}

/* ---- خلاصة / بطاقات الذاكرة ---- */

.takeaways {
    list-style: none;
    padding-inline-start: 0;
    margin-block: 14px 0;
    display: grid;
    gap: 8px;
    max-inline-size: var(--measure);
}

.takeaway {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 14.5px;
}

.takeaway-mark {
    flex: none;
    color: var(--accent);
    font-weight: 700;
}

/* ---- محتوى مكمِّل من خارج المنهج الرسمي — لازم يُميَّز بصريًا عن المصدر الرسمي ---- */

.external {
    margin-block: 14px 0;
    padding: 14px 18px;
    border: 1px dashed var(--external);
    border-radius: var(--radius-lg);
    background: var(--external-soft);
}

.external-badge {
    display: inline-block;
    margin-block-end: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--external);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.external h4 {
    margin-block: 0 6px;
    font-size: 14.5px;
    font-family: "Noto Kufi Arabic", system-ui, sans-serif;
}

.external p {
    margin-block-end: 0;
    color: var(--ink);
    font-size: 14px;
}

.external-source {
    display: block;
    margin-block-start: 8px;
    font-size: 12px;
    color: var(--muted);
}

/* ---- وقفة تحقّق سريع ---- */

.quickcheck {
    margin-block: 14px 0;
    padding: 18px 20px;
    border: 1px dashed var(--accent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

/* ==========================================================================
   تدريب تفاعلي على الأسئلة
   ========================================================================== */

.practice-list {
    display: grid;
    gap: 22px;
    margin-block-start: 16px;
}

.practice-item {
    padding-inline-start: 6px;
}

.choice-correct {
    border-color: var(--good);
    background: var(--good-soft);
    color: var(--good);
    opacity: 1;
}

.choice-incorrect {
    border-color: var(--rose);
    background: var(--rose-soft);
    color: var(--rose);
    opacity: 1;
}

.qp-options {
    display: grid;
    gap: 8px;
    max-inline-size: var(--measure);
    padding-inline-start: 0;
    list-style: none;
    margin-block: 0;
}

.qp-order {
    display: grid;
    gap: 6px;
    max-inline-size: var(--measure);
    padding-inline-start: 0;
    list-style: none;
    margin-block: 0;
}

.qp-order-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 14.5px;
}

.qp-order-text {
    flex: 1;
}

.qp-order-btns {
    flex: none;
    display: flex;
    gap: 4px;
}

.qp-icon-btn {
    inline-size: 26px;
    block-size: 26px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
}

.qp-icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qp-match {
    display: grid;
    gap: 10px;
    max-inline-size: var(--measure);
    margin-block: 0;
}

.qp-match-row {
    display: grid;
    grid-template-columns: 1fr minmax(160px, 220px);
    gap: 10px;
    align-items: center;
}

.qp-match-prompt {
    font-size: 14.5px;
}

.qp-match-row select {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
}

@media (max-width: 560px) {
    .qp-match-row {
        grid-template-columns: 1fr;
    }
}

.qp-blank-text {
    line-height: 2.4;
    font-size: 16px;
    max-inline-size: var(--measure);
}

.qp-blank-input {
    display: inline-block;
    inline-size: 11ch;
    padding: 3px 8px;
    margin-inline: 3px;
    border: none;
    border-block-end: 2px solid var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    text-align: center;
}

.qp-blank-input:focus-visible {
    outline: none;
    border-block-end-color: var(--rose);
}

.qp-submit {
    margin-block-start: 12px;
}

.qp-feedback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: 10px;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
}

.qp-feedback-correct {
    background: var(--good-soft);
    color: var(--good);
}

.qp-feedback-partial {
    background: var(--accent-2-soft);
    color: var(--accent-2);
}

.qp-feedback-incorrect {
    background: var(--rose-soft);
    color: var(--rose);
}

.qp-rationale {
    margin-block-start: 6px;
    color: var(--muted);
    font-size: 13.5px;
    max-inline-size: var(--measure);
}