/* ═══════════════════════════════════════════════════════════════════════
   Zad UI — نظام التصميم الجديد للوحة التحكّم
   ───────────────────────────────────────────────────────────────────────
   المصدر: docs/prototypes/lessons.html — الألوان والأنصاف والظلال منقولة
   منه حرفياً (القسم :root)، فما يراه المصمّم في النموذج هو ما يُبنى هنا.

   ⭐ قاعدتان تحكمان هذا الملف كلّه — docs/ADMIN-REDESIGN-PLAN.md:

   1. كل قاعدة تبدأ بـ .zui أو بصنفٍ يبدأ بـ zui- ، فلا يمسّ الملفّ أيّ
      صفحة قديمة. الاستبدال تدريجيّ: الصفحة التي تختار ZuiLayout وحدها
      ترى هذا التصميم.

   2. لا reset عامّ داخل .zui (لا `.zui button{background:none}`).
      السبب: نوافذ Blazorise (UiMessageAlert) وأيّ صفحة قديمة تُعرض داخل
      الإطار الجديد مبنيّة على أصناف bootstrap مثل .btn-primary، و reset
      عامّ بنفس الوزن ويأتي بعدها يمحو خلفيّاتها. فكلّ مكوّن يضبط ما
      يحتاجه في صنفه هو.
   ═══════════════════════════════════════════════════════════════════════ */

.zui {
    /* ── العلامة — من النموذج ── */
    --primary: #18A171;
    --primary-dark: #127452;
    --primary-light: #E7F8F2;
    --secondary: #43B78F;
    --on-primary: #FFFFFF;
    --btn: #12805B;
    --btn-hover: #0E6547;

    /* ── الأسطح والخطوط والنصوص ── */
    --card: #FFFFFF;
    --card-2: #F9FAFB;
    --card-3: #F3F4F6;
    --line: #E9EBEE;
    --line-2: #D1D5DB;
    --text: #1A1A1A;
    --text-2: #374151;
    --text-3: #6B7280;

    /* ── المسرح (البثّ المباشر) ── */
    --stage: #10221C;
    --stage-2: #17332A;
    --stage-3: #204436;
    --stage-text: #EAF5F0;
    --stage-text-2: #9DB5AA;

    /* ── الحالات ── */
    --warn: #8A6100;
    --warn-bg: #FDF7EA;
    --warn-line: #F0E2C2;
    --warn-solid: #D9A036;
    --stop: #C0392B;
    --stop-bg: #FDF1F0;
    --stop-line: #F3D4D0;
    --stop-text: #B03229;
    --stop-solid: #C0392B;
    --info: #374151;
    --info-bg: #F3F4F6;
    --info-line: #E5E7EB;

    /* ── لونان فئويّان للأيقونات فقط (ليسا في النموذج) ──
       بلاطات الإحصاء بلونٍ واحد تتشابه فيضيع المعنى؛ هذان يميّزان
       «الأشخاص» عن «المحتوى» دون أن يزاحما الأخضر أو ألوان الحالة. */
    --blue: #1D4ED8;
    --blue-bg: #EEF3FF;
    --blue-line: #C9D7FB;
    --violet: #6D28D9;
    --violet-bg: #F4EFFF;
    --violet-line: #DDD0FA;

    /* ── لون الأنشطة التفاعلية في مشغّل الطالب — من النموذج (--act) ── */
    --act: #127452;
    --act-bg: #EDF7F3;
    --act-line: #CDE7DB;

    /* ── الظلال والأنصاف والخطوط ── */
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .05);
    --shadow-xl: 0 20px 32px -8px rgba(0, 0, 0, .12), 0 8px 12px -6px rgba(0, 0, 0, .06);
    --r-chrome: 10px;
    --r-tile: 12px;
    --r-card: 16px;
    --r-pill: 999px;
    --ui: 'Tajawal', 'Segoe UI', system-ui, sans-serif;

    /* ── الإطار ── */
    --bg: #FFFFFF;
    --bg-grad: linear-gradient(135deg, #1274520d 0%, #328e6e26 100%);
    --side-w: 264px;
    --side-w-mini: 76px;
    --top-h: 64px;
    /* اتجاه الانزلاق: الدرج يدخل من جهة البداية (اليمين في RTL) */
    --dir: 1;

    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.zui:dir(ltr) { --dir: -1; }

/* الوضع الداكن — قيم النموذج نفسها. يُفعَّل بالزرّ فقط لا بإعداد النظام:
   الصفحات القديمة فاتحة، وتبديلٌ تلقائيّ يجعل الانتقال بينها وبين الجديدة
   وميضاً من الأسود إلى الأبيض. */
.zui[data-theme="dark"] {
    --primary: #2FBE8B;
    --primary-dark: #7BE0B4;
    --primary-light: #12332A;
    --secondary: #3FCF9B;
    --on-primary: #06231A;
    --btn: #2FBE8B;
    --btn-hover: #4FCF9E;
    --card: #17191A;
    --card-2: #141617;
    --card-3: #1F2223;
    --line: #2A2E2F;
    --line-2: #3A3F40;
    --text: #ECEDED;
    --text-2: #B4B9B8;
    --text-3: #8E9694;
    --stage: #0A1512;
    --stage-2: #12261F;
    --stage-3: #1D4034;
    --warn: #EFC067;
    --warn-bg: #2E250F;
    --warn-line: #4C3D19;
    --stop: #E4635B;
    --stop-bg: #331A18;
    --stop-line: #512724;
    --stop-text: #F08D86;
    --info: #B4B9B8;
    --info-bg: #1F2223;
    --info-line: #33383A;
    --blue: #93B4FF;
    --blue-bg: #17213A;
    --blue-line: #2A3A62;
    --violet: #C4A8FF;
    --violet-bg: #231B38;
    --violet-line: #3A2D5C;
    --act: #7BE0B4;
    --act-bg: #12312A;
    --act-line: #234E42;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 14px 30px -10px rgba(0, 0, 0, .6), 0 4px 10px -4px rgba(0, 0, 0, .4);
    --shadow-xl: 0 24px 48px -14px rgba(0, 0, 0, .7), 0 8px 16px -8px rgba(0, 0, 0, .5);
    --bg: #0E1513;
    --bg-grad: linear-gradient(135deg, #12745226 0%, #328e6e1f 100%);
    color-scheme: dark;
}

/* ── النغمات: متغيّرات يقرؤها كل مكوّن ملوّن ── */
.zui-tone--neutral { --tone-bg: var(--info-bg); --tone-fg: var(--text-2); --tone-line: var(--info-line); --tone-solid: var(--text-3); }
.zui-tone--brand { --tone-bg: var(--primary-light); --tone-fg: var(--primary-dark); --tone-line: var(--secondary); --tone-solid: var(--primary); }
.zui-tone--blue { --tone-bg: var(--blue-bg); --tone-fg: var(--blue); --tone-line: var(--blue-line); --tone-solid: var(--blue); }
.zui-tone--violet { --tone-bg: var(--violet-bg); --tone-fg: var(--violet); --tone-line: var(--violet-line); --tone-solid: var(--violet); }
.zui-tone--warn { --tone-bg: var(--warn-bg); --tone-fg: var(--warn); --tone-line: var(--warn-line); --tone-solid: var(--warn-solid); }
.zui-tone--act { --tone-bg: var(--act-bg); --tone-fg: var(--act); --tone-line: var(--act-line); --tone-solid: var(--act); }
.zui-tone--stop { --tone-bg: var(--stop-bg); --tone-fg: var(--stop-text); --tone-line: var(--stop-line); --tone-solid: var(--stop-solid); }

.zui-icon { flex: none; display: block; }
.zui:dir(ltr) .zui-icon--dir { transform: scaleX(-1); }
.zui .num { font-variant-numeric: tabular-nums; }
.zui :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }


/* ═══════════════════════════════════════════════════════════════════════
   الإطار: شريط جانبي + شريط علوي + المحتوى
   ═══════════════════════════════════════════════════════════════════════ */

/* styles.css يحجز 72px أعلى body للترويسة العامّة الثابتة، والإطار الجديد
   لا ترويسة ثابتة فيه — نفس ما تفعله .inner-shell في InnerLayout. */
/* ⚠️ overflow-x: clip لا hidden. الأنماط القديمة تضع overflow-x:hidden على
   html و body معاً، فلا ينتقل overflow الـ body إلى النافذة ويصير body حاوية
   تمرير لا تتحرّك أبداً (ارتفاعها = محتواها). و sticky يلتصق بأقرب حاوية
   تمرير، فبقي الشريطان الجانبي والعلوي يمرّان مع الصفحة.
   مقيس: scrollY=1117 و .zui-side top=-1118. و clip يقصّ دون أن ينشئ حاوية. */
body:has(.zui-app) { padding-top: 0 !important; overflow-x: clip; overflow-y: visible; }

/* styles.css يزيّن body بشكلين absolute للموقع العام (::before بـ 400px و ::after
   بـ 500px). كان body حاوية تمرير فيقصّهما؛ بعد clip أعلاه صارا يمدّان الصفحة
   تحت الإطار — مقيس: المستند 1044px والإطار 900px، والفرق أبيض. */
body:has(.zui-app)::before,
body:has(.zui-app)::after { display: none; }

/* تذييل الموقع العام (footer#contact في App.razor بعد <Routes/>) لا مكان له
   في لوحة التحكّم: كان يظهر بارتفاع 342px أسفل كل صفحة في الإطار الجديد. */
body:has(.zui-app) > footer.footer { display: none; }

.zui-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    background-color: var(--bg);
    background-image: var(--bg-grad);
    transition: grid-template-columns .25s ease;
}

/* ── الشريط الجانبي ── */
.zui-side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card);
    border-inline-end: 1px solid var(--line);
    z-index: 40;
}

.zui-side__brand {
    height: var(--top-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
}

.zui-brand { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; text-decoration: none; }
.zui-brand img { height: 36px; width: auto; }
.zui[data-theme="dark"] .zui-brand img { filter: brightness(1.25) saturate(1.1); }

/* مُحدِّدٌ بصنفين: .zui-iconbtn يأتي بعد هذا في الملف ويضع display:grid،
   فبصنفٍ واحد كان زرّ الإغلاق يظهر على سطح المكتب أيضاً. */
.zui-side .zui-side__close { display: none; }

.zui-side__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 12px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}

.zui-side__label {
    margin: 10px 0 6px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .02em;
}
.zui-side__label:first-child { margin-top: 0; }

.zui-side__foot { flex: none; padding: 12px; border-top: 1px solid var(--line); }

/* ── عناصر التنقّل ── */
.zui-nav { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.zui-nav__item { margin: 0; }

.zui-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-chrome);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.zui-nav__link:hover { background: var(--card-3); color: var(--text); }
.zui-nav__link.is-active { background: var(--primary-light); color: var(--primary-dark); font-weight: 700; }
.zui-nav__link.is-active::before {
    content: "";
    position: absolute;
    inset-inline-start: -12px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
}
.zui-nav__link.has-active { color: var(--text); }

.zui-nav__icon { width: 20px; flex: none; display: grid; place-items: center; font-size: 17px; color: var(--text-3); }
.zui-nav__link:hover .zui-nav__icon { color: var(--text-2); }
.zui-nav__link.is-active .zui-nav__icon,
.zui-nav__link.has-active .zui-nav__icon { color: var(--primary); }

.zui-nav__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zui-nav__chev { color: var(--text-3); transition: transform .2s ease; }
.zui-nav__item.is-open > .zui-nav__link .zui-nav__chev { transform: rotate(180deg); }

/* الطيّ بحيلة 0fr -> 1fr على شبكةٍ بصفٍّ واحد — الـ <ul> وحده ابنها،
   وإلا انطبقت 0fr على الابن الأوّل فقط (العطل الذي وثّقه ZbNavItem). */
.zui-nav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.zui-nav__item.is-open > .zui-nav__sub { grid-template-rows: 1fr; }
.zui-nav__sub > ul {
    min-height: 0;
    overflow: hidden;
    margin: 0 0 0 0;
    margin-inline-start: 21px;
    padding: 0;
    padding-inline-start: 10px;
    list-style: none;
    display: grid;
    gap: 1px;
    border-inline-start: 1px solid var(--line);
}
.zui-nav__item.is-open > .zui-nav__sub > ul { padding-block: 4px; }
.zui-nav__sub .zui-nav__link { height: 36px; font-size: 13px; font-weight: 400; }
.zui-nav__sub .zui-nav__link.is-active { font-weight: 700; }
.zui-nav__sub .zui-nav__link.is-active::before { display: none; }
.zui-nav__sub .zui-nav__icon { display: none; }

/* ── بطاقة المستخدم أسفل الشريط ── */
.zui-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-tile); background: var(--card-2); border: 1px solid var(--line); }
.zui-user__avatar { border-radius: 10px !important; flex: none; }
.zui-user__info { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.zui-user__info b { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zui-user__info small { font-size: 11.5px; color: var(--text-3); }

/* ── الشريط العلوي ── */
.zui-main { min-width: 0; display: flex; flex-direction: column; }

.zui-top {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--top-h);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.zui-top__spacer { flex: 1; }
.zui-top__date { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.zui-top__sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.zui-top__mob { display: none !important; }

.zui-iconbtn {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-chrome);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}
.zui-iconbtn:hover { background: var(--card-3); color: var(--text); }

/* قائمة المستخدم */
.zui-usermenu { position: relative; }
.zui-usermenu__btn {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 10px;
    padding-inline-start: 5px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--text-2);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.zui-usermenu__btn:hover { border-color: var(--line-2); background: var(--card-2); }
.zui-usermenu__btn .zb-user-avatar { border-radius: 50%; }
.zui-usermenu__name { max-width: 14ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }

/* خلفيّة الإغلاق بالنقر خارجاً. الشريط العلوي sticky لا transform ولا
   backdrop-filter فيه، فـ fixed هنا نسبةٌ للنافذة فعلاً — قيس بـ
   getBoundingClientRect قبل إضافة أيّ filter إلى .zui-top. */
.zui-click-away { position: fixed; inset: 0; z-index: 1; }

.zui-pop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 2;
    min-width: 240px;
    max-width: calc(100vw - 2rem);
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    box-shadow: var(--shadow-xl);
    animation: zui-pop .14s ease-out;
}
.zui-pop__head { display: grid; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); line-height: 1.4; }
.zui-pop__head b { font-size: 13.5px; color: var(--text); }
.zui-pop__head small { font-size: 12px; color: var(--text-3); }
.zui-pop__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13.5px;
    text-decoration: none;
}
.zui-pop__item:hover { background: var(--card-3); color: var(--text); }
.zui-pop__item--stop:hover { background: var(--stop-bg); color: var(--stop-text); }
.zui-pop__sep { height: 1px; background: var(--line); margin: 6px 4px; }

.zui-content { flex: 1; min-width: 0; }

/* ── صفحةٌ قديمة داخل الإطار الجديد (المرحلة 2) ──
   الصفحة التي لم تنتقل إلى ZuiPage تُعرض كما كانت في InnerLayout: حشو 24px
   (كان p-4 هناك) وخطّ body نفسه 16px. تلبيسها ألوان التصميم في المرحلة 4.
   ZuiPage يرسم .zui-page-head ابناً مباشراً لـ main، فغيابه يميّز القديمة. */
.zui-content:not(:has(> .zui-page-head)) { padding: 24px; font-size: 16px; line-height: 1.6; color: #1A1A1A; }
@media (max-width: 640px) { .zui-content:not(:has(> .zui-page-head)) { padding: 16px; } }

/* dark mode: المحتوى القديم مكتوبٌ بألوان فاتحة ثابتة (بطاقات بيضاء، عناوين
   داكنة على الخلفية مباشرة)، فعلى الخلفية الداكنة يصير نصّاً داكناً على داكن.
   فيبقى على ورقةٍ فاتحة حتى يُنقل. */
.zui[data-theme="dark"] .zui-content:not(:has(> .zui-page-head)) {
    margin: 16px;
    border-radius: var(--r-card);
    background: #F4F7F6;
    color-scheme: light;
}

/* مرساة لقائمةٍ منبثقة (المستخدم، اللغة) */
.zui-anchor { position: relative; }
.zui-pop--narrow { min-width: 190px; }
button.zui-pop__item { width: 100%; border: 0; background: transparent; font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; }
.zui-pop__item.is-current { color: var(--primary-dark); font-weight: 700; }
.zui-pop__label { flex: 1; }
.zui-lang__code {
    min-width: 26px;
    padding: 1px 5px;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;
}

/* ── الشريط المطويّ (سطح المكتب) ── */
@media (min-width: 1024px) {
    .zui-app.is-mini { grid-template-columns: var(--side-w-mini) minmax(0, 1fr); }
    .zui-app.is-mini .zui-nav__text,
    .zui-app.is-mini .zui-nav__chev,
    .zui-app.is-mini .zui-nav__sub,
    .zui-app.is-mini .zui-side__label,
    .zui-app.is-mini .zui-brand__word,
    .zui-app.is-mini .zui-user__info,
    .zui-app.is-mini .zui-user__act { display: none; }
    .zui-app.is-mini .zui-side__brand { padding: 0; justify-content: center; }
    .zui-app.is-mini .zui-brand { flex: none; }
    .zui-app.is-mini .zui-nav__link { justify-content: center; padding: 0; }
    .zui-app.is-mini .zui-nav__link.is-active::before { inset-inline-start: -12px; }
    .zui-app.is-mini .zui-user { justify-content: center; padding: 6px 0; background: transparent; border-color: transparent; }
}

/* ── الجوال والأجهزة اللوحيّة: الشريط درجٌ فوق خلفيّة معتمة ── */
@media (max-width: 1023.98px) {
    .zui-app { grid-template-columns: minmax(0, 1fr); }
    .zui-side {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(292px, 86vw);
        height: 100dvh;
        display: none;
        box-shadow: var(--shadow-xl);
    }
    .zui-app.is-drawer .zui-side { display: flex; animation: zui-drawer .22s ease-out; }
    .zui-side .zui-side__close { display: grid; }
    .zui-top { padding: 0 12px; }
    .zui-top__mob { display: grid !important; }
    .zui-top__desk { display: none !important; }
}
@media (max-width: 640px) {
    .zui-top__date, .zui-usermenu__name, .zui-top__sep { display: none; }
}

.zui-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(16, 34, 28, .45); animation: zui-fade .2s ease-out; }
@media (min-width: 1024px) { .zui-scrim { display: none; } }

@keyframes zui-drawer { from { transform: translateX(calc(var(--dir) * 100%)); } to { transform: none; } }
@keyframes zui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zui-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes zui-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* ═══════════════════════════════════════════════════════════════════════
   الصفحة: ترويسة بعرض كامل ثم جسم
   ═══════════════════════════════════════════════════════════════════════ */

.zui-page-head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 28px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.zui-page-head__main { flex: 1; min-width: min(100%, 12rem); }
/* ⭐ حدٌّ أدنى للعنوان لا صفر: بصورةٍ في البداية وزرّين في النهاية على الجوال كان
   العمود ينضغط إلى 40px فيُقصّ المسار («حسا…» في حسابي). الآن تنزل الأزرار سطراً
   حين لا يتّسع لها، ويبقى الزرّ الواحد بجانب العنوان حين يتّسع. */

.zui-crumb { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 6px; font-size: 12px; color: var(--text-3); }
.zui-crumb a { color: var(--text-3); text-decoration: none; }
.zui-crumb a:hover { color: var(--primary-dark); }
.zui-crumb__sep { opacity: .5; }
.zui-crumb__cur { color: var(--text-2); font-weight: 500; }

.zui-page-title { margin: 0; font-family: inherit; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
/* FocusOnNavigate في Routes.razor يضع التركيز على h1 بعد كل انتقال لقارئ
   الشاشة؛ الإطار حوله كان يظهر للجميع كأن العنوان حقلٌ محدَّد. كل h1 لا
   عنوان ZuiPage وحده: الصفحات القديمة داخل الإطار ظهر فيها الإطار نفسه. */
.zui h1:focus { outline: none; }
.zui-page-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }
.zui-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* container-type: الشبكات داخل الجسم تتكيّف مع عرضه هو لا مع النافذة،
   لأن الشريط المطويّ يغيّر المساحة المتاحة 188px دون أن تتغيّر النافذة. */
/* ⚠️ لا حركة دخول على محتوى الصفحة: الانتقال من الـ prerender إلى الرسم
   التفاعليّ يعيد إنشاء العناصر فتُعاد الحركة، فيومض المحتوى مرّتين. */
.zui-page-body { container-type: inline-size; display: grid; gap: 20px; padding: 24px 28px 44px; }

@media (max-width: 640px) {
    .zui-page-head { padding: 16px; }
    .zui-page-title { font-size: 20px; }
    .zui-page-body { padding: 16px 16px 32px; gap: 16px; }
}

.zui-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@container (min-width: 980px) { .zui-grid-2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

/* ── ترتيب: ZuiStack · ZuiSpacer · ZuiSection · ZuiMeta ── */
.zui-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.zui-stack--row { flex-direction: row; align-items: center; flex-wrap: wrap; }
.zui-stack--sm { gap: 8px; }
.zui-stack--lg { gap: 20px; }
.zui-spacer { flex: 1; }
.zui-section { display: grid; gap: 12px; min-width: 0; margin-top: 8px; }
.zui-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--primary-dark); }
.zui-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.zui-meta { font-size: 12px; color: var(--text-3); }


/* ═══════════════════════════════════════════════════════════════════════
   المكوّنات
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الزرّ ── */
.zui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-chrome);
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.zui-btn--primary { background: var(--btn); color: var(--on-primary); box-shadow: 0 1px 2px rgba(18, 116, 82, .25); }
.zui-btn--primary:hover { background: var(--btn-hover); color: var(--on-primary); }
.zui-btn--quiet { background: var(--card); border-color: var(--line-2); color: var(--text-2); }
.zui-btn--quiet:hover { background: var(--primary-light); border-color: var(--secondary); color: var(--primary-dark); }
.zui-btn--ghost { color: var(--text-2); }
.zui-btn--ghost:hover { background: var(--card-3); color: var(--text); }
.zui-btn--danger { background: var(--stop-bg); border-color: var(--stop-line); color: var(--stop-text); }
.zui-btn--danger:hover { background: var(--stop-solid); border-color: var(--stop-solid); color: #fff; }
.zui-btn--sm { height: 32px; padding: 0 11px; font-size: 12.5px; gap: 6px; }
.zui-btn--lg { height: 46px; padding: 0 22px; font-size: 15px; }
.zui-btn--icon { width: 38px; padding: 0; }
.zui-btn--icon.zui-btn--sm { width: 32px; }
.zui-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── الشارة ── */
.zui-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border: 1px solid var(--tone-line, var(--line-2));
    border-radius: var(--r-pill);
    background: var(--tone-bg, var(--card-2));
    color: var(--tone-fg, var(--text-2));
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}
.zui-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.zui-pill--live .zui-pill__dot { animation: zui-blink 1.2s ease-in-out infinite; }
@keyframes zui-blink { 50% { opacity: .25; } }

/* ── المرشّح ── */
.zui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-chrome);
    background: var(--card);
    color: var(--text-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.zui-chip b { font-weight: 500; color: var(--text); }
.zui-chip:hover { border-color: var(--secondary); color: var(--primary-dark); }
.zui-chip.is-on { background: var(--primary-light); border-color: var(--secondary); color: var(--primary-dark); }
.zui-chip.is-on b { color: var(--primary-dark); }

/* ── البحث ── */
.zui-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 220px;
    max-width: 380px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-chrome);
    background: var(--card);
    color: var(--text-3);
    transition: border-color .12s, box-shadow .12s;
}
.zui-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.zui-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 13.5px; }
.zui-search input::placeholder { color: var(--text-3); }
/* ⭐ الصندوق يُبرز تركيزه (:focus-within)، فالإطار العامّ (.zui :focus-visible) حول الحقل
   الداخليّ زائد — وكان يغلب outline:none أعلاه بوزنه فيُرسم مستطيلٌ أخضر داخل الصندوق المستدير */
.zui-search input:focus-visible { outline: none; }

.zui-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* ── البطاقة ── */
.zui-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.zui-card__head { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.zui-card__icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--tone-bg, var(--primary-light));
    color: var(--tone-fg, var(--primary-dark));
}
.zui-card__titles { flex: 1; min-width: 0; }
.zui-card__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--text); }
.zui-card__count {
    min-width: 22px;
    padding: 0 7px;
    border-radius: var(--r-pill);
    background: var(--tone-bg, var(--card-3));
    color: var(--tone-fg, var(--text-2));
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.zui-card__sub { margin: 1px 0 0; font-size: 12px; color: var(--text-3); }
.zui-card__actions { display: flex; align-items: center; gap: 6px; }
.zui-card__body { flex: 1; padding: 18px; }
.zui-card__body--flush { padding: 0; }
.zui-card__foot { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); background: var(--card-2); font-size: 12.5px; color: var(--text-3); }
.zui-card--alert { border-color: var(--tone-line, var(--warn-line)); box-shadow: 0 0 0 3px var(--tone-bg, var(--warn-bg)), var(--shadow); }

/* ── بلاطة الإحصاء ── */
.zui-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@container (min-width: 620px) { .zui-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1060px) { .zui-stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .zui-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.zui-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 16px 16px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.zui-stat:hover { border-color: var(--tone-line, var(--secondary)); box-shadow: var(--shadow-lg); transform: translateY(-2px); color: inherit; }
.zui-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zui-stat__label { font-size: 12.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zui-stat__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--tone-bg); color: var(--tone-fg); }
.zui-stat__value { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.zui-stat--alert .zui-stat__value { color: var(--tone-fg); }
.zui-stat__note { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 12px; color: var(--text-3); }
.zui-stat__go { position: absolute; inset-inline-end: 14px; bottom: 14px; color: var(--text-3); opacity: 0; transition: opacity .15s; }
a.zui-stat:hover .zui-stat__go { opacity: 1; color: var(--tone-fg); }

/* ── القوائم داخل البطاقات ── */
.zui-list { margin: 0; padding: 0; list-style: none; }
.zui-list__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    transition: background .12s;
}
.zui-list > li:last-child > .zui-list__row { border-bottom: 0; }
/* [href] لا a وحدها: ZuiListItem بلا رابط يبقى <a> بلا href فلا يتلوّن */
a[href].zui-list__row:hover { background: var(--card-2); color: inherit; }
.zui-list__main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.zui-list__title { font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zui-list__meta { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zui-list__end { flex: none; display: grid; justify-items: end; gap: 3px; text-align: end; }
.zui-list__time { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.zui-list__hint { font-size: 11.5px; color: var(--text-3); }

.zui-datebox { width: 50px; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: center; }
.zui-datebox__m { display: block; padding: 2px 0; background: var(--primary-light); color: var(--primary-dark); font-size: 10.5px; font-weight: 700; }
.zui-datebox__d { display: block; font-size: 18px; font-weight: 800; line-height: 1.55; color: var(--text); font-variant-numeric: tabular-nums; }
.zui-datebox.is-live { border-color: var(--stop-line); }
.zui-datebox.is-live .zui-datebox__m { background: var(--stop-solid); color: #fff; }

/* ── الصورة الرمزية ── */
.zui-avatar {
    width: var(--s, 36px);
    height: var(--s, 36px);
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--tone-bg);
    color: var(--tone-fg);
    font-size: calc(var(--s, 36px) * .4);
    font-weight: 700;
    line-height: 1;
}
.zui-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── شريط التقدّم ── */
.zui-bar { display: flex; align-items: center; gap: 9px; min-width: 110px; }
.zui-bar__track { flex: 1; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--card-3); }
.zui-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--tone-solid, var(--primary)); transition: width .4s ease; }
.zui-bar__val { flex: none; min-width: 3ch; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── الحالة الفارغة ── */
.zui-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.zui-empty__icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 50%; background: var(--tone-bg, var(--card-3)); color: var(--tone-fg, var(--text-3)); }
.zui-empty__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.zui-empty__text { margin: 0; max-width: 42ch; font-size: 12.5px; color: var(--text-3); }
.zui-empty__actions { margin-top: 8px; display: flex; gap: 8px; }

/* ── تنبيه داخل الصفحة ── */
.zui-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--tone-line);
    border-radius: var(--r-tile);
    background: var(--tone-bg);
    color: var(--tone-fg);
    font-size: 13.5px;
}
.zui-callout__body { flex: 1; min-width: 0; }
.zui-callout__body b { font-weight: 700; }

/* ── شريط «يُبثّ الآن» بألوان المسرح ── */
.zui-live {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    overflow: hidden;
    border-radius: var(--r-card);
    background: linear-gradient(115deg, var(--stage) 0%, var(--stage-2) 55%, var(--stage-3) 100%);
    color: var(--stage-text);
    box-shadow: var(--shadow-lg);
}
.zui-live::after {
    content: "";
    position: absolute;
    inset-inline-end: -60px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 190, 139, .28) 0%, transparent 70%);
    pointer-events: none;
}
.zui-live__pulse { position: relative; width: 14px; height: 14px; flex: none; border-radius: 50%; background: #FF5A4F; }
.zui-live__pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #FF5A4F; animation: zui-ring 1.6s ease-out infinite; }
@keyframes zui-ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.zui-live__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.zui-live__title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.zui-live__text { margin: 2px 0 0; font-size: 13px; color: var(--stage-text-2); }
.zui-live .zui-btn { position: relative; z-index: 1; background: #fff; color: var(--stage); }
.zui-live .zui-btn:hover { background: var(--primary-light); color: var(--stage); }

/* ── إجراءات سريعة ── */
/* أعمدة ثابتة لا auto-fill: الستّة كانت 4 ثم 2 فيبقى صفٌّ أعرج */
.zui-quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 520px) { .zui-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 860px) { .zui-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zui-quick__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    background: var(--card);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.zui-quick__item:hover { border-color: var(--secondary); background: var(--primary-light); color: inherit; }
.zui-quick__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--card-3); color: var(--text-2); transition: background .15s, color .15s; }
.zui-quick__item:hover .zui-quick__icon { background: var(--card); color: var(--primary-dark); }
.zui-quick__t { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.zui-quick__d { display: block; font-size: 12px; color: var(--text-3); }

/* ── جدول البيانات ── */
.zui-tbl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.zui-tbl { width: 100%; margin: 0; border-collapse: collapse; font-size: 13.5px; color: var(--text); }
.zui-tbl thead th {
    padding: 11px 16px;
    background: var(--card-2);
    border-bottom: 1px solid var(--line);
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 500;
    text-align: start;
    white-space: nowrap;
}
.zui-tbl tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.zui-tbl tbody tr:last-child td { border-bottom: 0; }
.zui-tbl tbody tr { transition: background .1s; }
.zui-tbl tbody tr:hover { background: var(--card-2); }
.zui-tbl .t-idx { width: 44px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ZuiPerson · ZuiRowActions */
.zui-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zui-person__text { min-width: 0; }
.zui-person__name { font-weight: 500; line-height: 1.35; color: var(--text); }
/* سطرٌ واحد: وصف المنهج فقرةٌ كاملة كان يمدّ الصفّ أربعة أسطر — النصّ كاملاً في title */
.zui-person__sub { display: -webkit-box; max-width: 60ch; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 11.5px; color: var(--text-3); }
.zui-row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.zui-row-actions .zui-btn { color: var(--text-3); }
.zui-row-actions .zui-btn:hover { color: var(--primary-dark); }
.zui-tbl-foot { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--card-2); font-size: 12.5px; color: var(--text-3); }

/* ── حقول النماذج ── */
/* align-content: start — حقلان في صفٍّ واحد من ZuiFormGrid وتحت أحدهما تلميح:
   كانت صفوف الآخر (التسمية والحقل) تتمدّد لتملأ الارتفاع فينزل حقله 13px عن جاره
   (إعدادات الدفع، المرحلة 9ب). الآن يبقى المحتوى أعلى الخليّة والفراغ تحته */
.zui-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.zui-field__label { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.zui-field__req { color: var(--stop-text); }
.zui-field__hint { font-size: 11.5px; color: var(--text-3); }
.zui-field__error { font-size: 11.5px; color: var(--stop-text); }
.zui-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-chrome);
    background: var(--card-2);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
textarea.zui-input { height: auto; min-height: 92px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
.zui-input:focus { outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-light); }
.zui-input.is-invalid { border-color: var(--stop-solid); }
.zui-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 640px) { .zui-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zui-field--wide { grid-column: 1 / -1; }

/* ── المفتاح ── */
.zui-switch { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.zui-switch__track { position: relative; width: 38px; height: 22px; flex: none; border-radius: var(--r-pill); background: var(--line-2); transition: background .15s; }
.zui-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: inset-inline-start .15s;
}
.zui-switch.is-on .zui-switch__track { background: var(--primary); }
.zui-switch.is-on .zui-switch__track::after { inset-inline-start: 19px; }

/* ── هيكل التحميل ── */
.zui-skel { border-radius: var(--r-card); background: linear-gradient(90deg, var(--card-3) 0%, var(--card-2) 50%, var(--card-3) 100%); background-size: 200% 100%; animation: zui-shimmer 1.3s linear infinite; }
@keyframes zui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── عيّنات الألوان في صفحة المكوّنات ── */
.zui-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.zui-swatch { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card); }
.zui-swatch__c { height: 54px; }
.zui-swatch__t { padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.zui-swatch__t b { display: block; font-weight: 700; color: var(--text); }
.zui-swatch__t code { font-size: 11px; color: var(--text-3); direction: ltr; unicode-bidi: isolate; }

/* ═══════════════════════════════════════════════════════════════════════
   النوافذ والإشعارات — المرحلة 3
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ZuiModal على <dialog> في الطبقة العليا ── */
.zui-modal {
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow-xl);
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.6;
}
.zui-modal--sm { width: min(420px, calc(100vw - 32px)); }
.zui-modal--lg { width: min(760px, calc(100vw - 32px)); }
.zui-modal[open] { animation: zui-modal-in .18s ease-out; }
/* ::backdrop لا يرث متغيّرات الصفحة في كل المتصفّحات — لونٌ صريح */
.zui-modal::backdrop { background: rgba(16, 34, 28, .5); backdrop-filter: blur(2px); }
@keyframes zui-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.zui-modal__box { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.zui-modal__head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.zui-modal__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--tone-bg, var(--primary-light)); color: var(--tone-fg, var(--primary-dark)); }
.zui-modal__titles { flex: 1; min-width: 0; }
.zui-modal__title { margin: 0; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--text); }
.zui-modal__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.zui-modal__x { margin-inline-start: auto; color: var(--text-3); }
.zui-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; container-type: inline-size; }
.zui-modal__foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--card-2); }

/* نصّ رسالة التأكيد في ZuiMessageHost */
.zui-msg { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-2); white-space: pre-line; }

/* ── ZuiToastHost: إشعارات في popover بالطبقة العليا ── */
.zui-toasts {
    position: fixed;
    inset: auto;
    top: calc(var(--top-h) + 12px);
    inset-inline-end: 16px;
    z-index: 1100;
    width: min(380px, calc(100vw - 32px));
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    display: grid;
    gap: 10px;
    pointer-events: none;
}
/* popover مغلق يخفيه المتصفّح؛ هذا لمتصفّحٍ لا يعرف popover فيبقى ظاهراً */
.zui-toasts:not(:popover-open):empty { display: none; }

.zui-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 12px 14px 14px;
    padding-inline: 14px 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--tone-solid);
    border-radius: var(--r-tile);
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow-xl);
    font-family: var(--ui);
    pointer-events: auto;
    animation: zui-toast-in .22s ease-out;
}
.zui-toast__icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tone-bg); color: var(--tone-fg); }
.zui-toast__body { flex: 1; min-width: 0; display: grid; gap: 1px; padding-top: 4px; font-size: 13.5px; line-height: 1.55; }
.zui-toast__title { font-weight: 700; color: var(--text); }
.zui-toast__msg { color: var(--text-2); overflow-wrap: anywhere; }
.zui-toast__close {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}
.zui-toast__close:hover { background: var(--card-3); color: var(--text); }
/* شريط الوقت المتبقّي حتى يختفي الإشعار */
.zui-toast__timer {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: var(--tone-solid);
    opacity: .5;
    transform-origin: var(--timer-origin, right);
    animation: zui-timer var(--d, 5s) linear forwards;
}
.zui:dir(ltr) .zui-toast__timer { --timer-origin: left; }
@keyframes zui-toast-in { from { opacity: 0; transform: translateX(calc(var(--dir) * -24px)); } to { opacity: 1; transform: none; } }
@keyframes zui-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .zui-toast, .zui-modal[open] { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   المرحلة 5 — بطاقات البرامج، المرشّحات، صورة صاحب اللوحة
   ═══════════════════════════════════════════════════════════════════════ */

.zui-page-head:has(> .zui-page-head__lead) { align-items: center; }
.zui-page-head__lead { flex: none; }

/* قائمة المرشّح تُفتح من جهة البداية تحت الرقاقة، لا من النهاية كقائمة المستخدم */
.zui-pop--start { inset-inline-end: auto; inset-inline-start: 0; }

.zui-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }

.zui-pcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card);
    box-shadow: var(--shadow);
    transition: box-shadow .15s, border-color .15s;
}
.zui-pcard:hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.zui-pcard__media {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--card-3) 100%);
    color: var(--primary-dark);
}
.zui-pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.zui-pcard__flag { position: absolute; top: 10px; inset-inline-start: 10px; }
.zui-pcard__body { flex: 1; display: grid; align-content: start; gap: 8px; padding: 16px; }
.zui-pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-3); }
.zui-pcard__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.zui-pcard__title { margin: 0; font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--text); }
.zui-pcard__text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-3);
}
.zui-pcard__progress { display: grid; gap: 6px; margin-top: 4px; }
.zui-pcard__foot { display: flex; gap: 8px; padding: 0 16px 16px; }
.zui-pcard__foot > .zui-btn { flex: 1; }

/* ═══ المرحلة 6 — ترقيم الصفحات ═══ */
.zui-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.zui-pager__pages { display: flex; align-items: center; gap: 4px; }
.zui-pager__num {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--card);
    color: var(--text-2);
    font: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.zui-pager__num:hover { border-color: var(--secondary); background: var(--primary-light); color: var(--primary-dark); }
.zui-pager__num.is-on { border-color: var(--btn); background: var(--btn); color: var(--on-primary); cursor: default; }
.zui-pager__gap { padding: 0 4px; color: var(--text-3); }
/* ═══ المرحلة 7 — قائمة إجراءات الصفّ ZuiMenu (popover في الطبقة العليا) ═══ */
.zui-menu[popover] {
    position: fixed;
    inset: auto;
    margin: 0;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow-xl);
    font-family: var(--ui);
}
/* قبل أن يضعها zui.js بجانب زرّها: مخفيّة، فلا تومض في وسط الشاشة */
.zui-menu:popover-open:not([data-placed]) { visibility: hidden; }
.zui-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 13.5px;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.zui-menu__item:hover { background: var(--card-3); color: var(--text); }
.zui-menu__item.is-danger { color: var(--stop-text); }
.zui-menu__item.is-danger:hover { background: var(--stop-bg); color: var(--stop-text); }
/* ── فهرس الأيقونات في صفحة المرجع ── */
.zui-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.zui-icons__item { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card); color: var(--text-2); }
.zui-icons__item:hover { border-color: var(--secondary); color: var(--primary-dark); }
.zui-icons__item code { font-size: 10.5px; color: var(--text-3); direction: ltr; unicode-bidi: isolate; }

/* ═══ المرحلة 8ب — محرّر الدرس (Pages/Lessons/CreateUpdate.razor و Pages/Lessons/Editor/*) ═══
   أصناف le-* بدل style="" الذي كان في الصفحة، وألوان شجرة المفردات من المتغيّرات.
   ⚠️ الصفحة صارت على ZuiPage فخرجت من «الورقة الفاتحة» التي يأخذها المحتوى القديم في
   dark mode، وعُقد الشجرة (details-panel في styles.css) كانت bg-light و bg-white و #fff
   ثابتة — فيصير نصّها فاتحاً على أبيض. قواعد التخطيط في styles.css باقية كما هي. */
.zui .le-editor :is(img, video, audio) { max-width: 100%; }
.zui .le-cover { width: 250px; height: 300px; object-fit: cover; border-radius: var(--r-tile); }
.zui .le-img { width: 150px; height: 150px; object-fit: cover; border-radius: var(--r-tile); }
.zui .le-video { max-width: 100%; }
.zui .le-video--sm { max-height: 200px; }
.zui .le-node { border-color: var(--line-2); background: var(--card-2); color: var(--text); }
.zui .le-node--leaf { background: var(--card); }
.zui .le-node__head { background: var(--card); }
.zui .le-node__body { border-top-color: var(--line-2); }
.zui .le-node__body--card { background: var(--card); }
/* ═══ المرحلة 9د — الاختبارات والتمارين: شجرة السؤال وخياراته وإجاباته ═══
   أصناف صفحةٍ (qb-*) لمكوّنٍ واحد: Pages/Semesters/QuestionBankEditor.razor.
   الشكل من «بنية الدرس» في docs/prototypes/lessons.html: رقمٌ في مربّع، واسمٌ
   وسطرٌ باهت تحته، وأزرارٌ في الطرف، والخيار مُزاحٌ بخطٍّ أخضر في بدايته.
   إن احتاجت شجرة محرّر الدرس الشكل نفسه صارت مكوّناً يجمعهما. */
.zui .qb-tree { display: grid; gap: 10px; }
.zui .qb-q {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    background: var(--card);
    box-shadow: var(--shadow);
    transition: border-color .12s;
}
.zui .qb-q:hover,
.zui .qb-q.is-open { border-color: var(--line-2); }
.zui .qb-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; }
.zui .qb-row > .zui-row-actions { flex: none; }
/* زرّ الطيّ: الرقم والنصّ والشارات — والأزرار بجانبه لا داخله */
.zui .qb-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: var(--r-chrome);
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.zui .qb-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.zui .qb-chev { flex: none; color: var(--text-3); transition: transform .15s; }
.zui .qb-q.is-open .qb-chev { transform: rotate(180deg); }
.zui .qb-num {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.zui .qb-main { display: grid; gap: 3px; flex: 1; min-width: 0; }
.zui .qb-name { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.zui .qb-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.zui .qb-q.is-off > .qb-row .qb-name { color: var(--text-3); }
.zui .qb-body { display: grid; gap: 12px; padding: 14px; border-top: 1px solid var(--line); }
/* نصّ السؤال من CKEditor: صوره وجداوله لا تتجاوز البطاقة */
.zui .qb-html { color: var(--text-2); font-size: 13.5px; line-height: 1.8; overflow-wrap: anywhere; }
.zui .qb-html > :last-child { margin-bottom: 0; }
.zui .qb-html :is(img, video, iframe, table) { max-width: 100%; height: auto; }
.zui .qb-media { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.zui .qb-media audio { max-width: 100%; height: 36px; }
/* المقطع والصورة هنا وفي نوافذ التعديل — كانا style="max-height:200px" و style="height:150px;width:150px" */
.zui .qb-video { display: block; max-width: 100%; max-height: 200px; border-radius: var(--r-chrome); background: #000; }
.zui .qb-img { width: 150px; height: 150px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-chrome); background: var(--card-2); }
.zui .qb-opt {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding-bottom: 10px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--secondary);
    border-radius: var(--r-tile);
    background: var(--card-2);
}
.zui .qb-opt > .qb-row { padding: 8px 10px; }
.zui .qb-opt > :not(.qb-row) { margin-inline: 12px; }
.zui .qb-opt .qb-num { min-width: 26px; height: 26px; border-radius: 8px; background: var(--card-3); color: var(--text-2); }
.zui .qb-opt .qb-img { width: 96px; height: 96px; }
.zui .qb-answers { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zui .qb-ans {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-chrome);
    background: var(--card);
}
.zui .qb-ans > .qb-media { grid-column: 2 / -1; }
.zui .qb-ans .qb-num { min-width: 24px; height: 24px; border-radius: 7px; background: var(--card-3); color: var(--text-3); font-size: 12px; }
.zui .qb-ans .qb-name { font-size: 13.5px; font-weight: 400; }
.zui .qb-ans.is-correct { border-color: var(--secondary); }
.zui .qb-ans.is-correct .qb-num { background: var(--primary-light); color: var(--primary-dark); }
.zui .qb-ans .qb-img { width: 72px; height: 72px; }
.zui .qb-add { justify-self: start; }
@container (max-width: 520px) {
    .zui .qb-row { padding: 8px; }
    .zui .qb-body { padding: 12px 10px; }
    .zui .qb-opt > :not(.qb-row) { margin-inline: 8px; }
}

/* ══ المرحلة 9ب — صفحات الإدارة المتبقّية (admin-misc) ══ */
/* ── نصٌّ حرّ في خليّة جدول (ZuiCellText) ── */
/* العرض الأدنى: على الجوال يمرّر الجدول داخل إطاره فينكمش كل عمود إلى أطول كلمة
   فيه — بهذا تلتفّ الخليّة أسطراً قليلة لا كلمةً في كل سطر */
.zui-celltext { min-width: 13rem; max-width: 40rem; }
.zui-celltext__title { font-weight: 500; line-height: 1.45; color: var(--text); }
.zui-celltext__sub {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════════════
   المرحلة 9أ — مركز التقارير
   بطاقة الرابط، خلايا الأرقام، الحقائق، ترويسة الورقة، والطباعة.
   المرجع: docs/prototypes/reports.html (.rcard · .tbl td[data-t] · .dl · .paper)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ZuiLinkCard: بطاقةٌ كلّها رابط، عناصرها في ZuiCardGrid ── */
.zui-lcard {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.zui-lcard:hover { border-color: var(--secondary); box-shadow: var(--shadow-lg); transform: translateY(-2px); color: inherit; }
.zui-lcard__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zui-lcard__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--tone-bg); color: var(--tone-fg); }
.zui-lcard__title { flex: 1; min-width: 0; margin: 0; font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--text); }
.zui-lcard__text { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.zui-lcard__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
/* المصدر اسمٌ تقنيّ لاتينيّ (Payment · EnrolledLesson): خطٌّ ثابت العرض معزولُ الاتجاه */
.zui-lcard__meta { margin-inline-start: auto; font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: var(--text-3); direction: ltr; unicode-bidi: isolate; }
.zui-lcard.is-blocked { border-style: dashed; border-color: var(--stop-line); background: var(--stop-bg); }
.zui-lcard.is-blocked .zui-lcard__title { color: var(--stop-text); }
.zui-lcard.is-blocked:hover { border-color: var(--stop-solid); }
@media (prefers-reduced-motion: reduce) { .zui-lcard, .zui-lcard:hover { transition: none; transform: none; } }

/* ── ZuiCell: الأرقام والمبالغ والنسب والتواريخ ──
   المحاذاة فيزيائيّة (right) للرأس والخليّة معاً، والخليّة LTR معزولة — ZuiCell.razor */
.zui-tbl .zui-cell--num,
.zui-tbl .zui-cell--money,
.zui-tbl .zui-cell--pct,
.zui-tbl .zui-cell--date { text-align: right; font-variant-numeric: tabular-nums; }
.zui-tbl td.zui-cell--num,
.zui-tbl td.zui-cell--money,
.zui-tbl td.zui-cell--pct,
.zui-tbl td.zui-cell--date { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.zui-tbl td.zui-cell--date { color: var(--text-2); }
.zui-tbl td.zui-cell--money { font-weight: 500; }
.zui-tbl .zui-cell--index { width: 44px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.zui-tbl td.zui-cell--total { border-top: 2px solid var(--line-2); background: var(--card-2); font-weight: 700; }

/* جدولٌ داخل بطاقةٍ بـ Flush (قسمٌ في مستند): البطاقة إطاره، فلا إطار ثانٍ بداخلها */
.zui-card__body--flush > .zui-tbl-wrap { border: 0; border-radius: 0; box-shadow: none; }

/* ── ZuiFacts · ZuiFact: قيمٌ للقراءة ──
   الفواصل حدٌّ على كلّ حقيقة، والحوافّ الخارجية تقصّها البطاقة بالهامش السالب.
   لا gap بلون الخطّ خلف الشبكة: الصفّ الأخير الناقص كان يظهر به مربّعاتٍ رمادية. */
.zui-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0 0 -1px; margin-inline-start: -1px; }
.zui-fact { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
.zui-fact dt { margin: 0; font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.zui-fact dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.zui-fact__ltr { display: inline-block; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* ── الطباعة: ZuiScreenOnly · ZuiPrintHead · الإطار ── */
.zui-screen-only { display: contents; }
.zui-printhead { display: none; }

@media print {
    /* الإطار وأدوات التحكّم لا تُطبع: الشريطان والمسار والأزرار والقوائم والبحث والترقيم */
    .zui-side,
    .zui-top,
    .zui-scrim,
    .zui-crumb,
    .zui-page-actions,
    .zui-screen-only,
    .zui-tbl-foot,
    .zui-btn,
    .zui-search,
    .zui-menu,
    .zui-toasts { display: none !important; }

    /* الشبكة تبقى بعمودين والشريط مخفيّ، فيُطبع المحتوى في عمودٍ بعرض 264px */
    .zui-app { display: block; min-height: 0; background: none; }

    /* ترويسة الورقة تحلّ محلّ ترويسة الشاشة في الصفحة التي فيها واحدة */
    .zui-content:has(.zui-printhead) > .zui-page-head { display: none; }
    .zui-page-head { padding: 0 0 12px; border: 0; background: none; }
    .zui-page-body { gap: 12px; padding: 0; }

    .zui-card, .zui-stat, .zui-lcard, .zui-tbl-wrap { box-shadow: none; }
    .zui-tbl-wrap { overflow: visible; }
    .zui-tbl { font-size: 12px; }
    .zui-tbl thead th,
    .zui-tbl tbody td { padding: 7px 9px; }

    /* البلاطات الأربع في صفٍّ واحد على A4 — الرابعة كانت تهبط وحدها */
    .zui-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .zui-stat { padding: 9px 11px; }
    .zui-stat__value { font-size: 19px; }

    .zui-stats, .zui-stat, .zui-card, .zui-tbl tr { break-inside: avoid; }

    /* الشارة والشريط لونٌ ومعنى: تُطبع خلفيّتهما ولو أُطفئت «رسومات الخلفية» */
    .zui-pill,
    .zui-bar__track,
    .zui-bar__fill,
    .zui-tbl td.zui-cell--total,
    .zui-printhead__crit { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

    .zui-printhead { display: block; color: #1A1A1A; break-after: avoid; }
    .zui-printhead__top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #18A171; }
    .zui-printhead__logo { width: auto; height: 40px; }
    .zui-printhead__org { display: grid; line-height: 1.45; }
    .zui-printhead__org b { font-size: 15px; }
    .zui-printhead__org small { font-size: 10.5px; color: #6B7280; }
    .zui-printhead__meta { margin-inline-start: auto; text-align: end; font-size: 10.5px; line-height: 1.8; color: #6B7280; }
    .zui-printhead__title { margin: 14px 0 2px; font-family: inherit; font-size: 18px; font-weight: 700; color: #1A1A1A; }
    .zui-printhead__sub { margin: 0; font-size: 12px; color: #374151; }
    .zui-printhead__crit { margin-top: 10px; padding: 9px 12px; border-radius: 7px; background: #F3F4F6; font-size: 11px; line-height: 1.8; color: #374151; }

    /* الورق أبيض: الوضع الداكن يُطبع بألوان الفاتح، وإلّا خرج نصٌّ فاتحٌ على ورقٍ أبيض */
    .zui[data-theme="dark"] {
        --primary: #18A171;
        --primary-dark: #127452;
        --primary-light: #E7F8F2;
        --secondary: #43B78F;
        --on-primary: #FFFFFF;
        --btn: #12805B;
        --btn-hover: #0E6547;
        --card: #FFFFFF;
        --card-2: #F9FAFB;
        --card-3: #F3F4F6;
        --line: #E9EBEE;
        --line-2: #D1D5DB;
        --text: #1A1A1A;
        --text-2: #374151;
        --text-3: #6B7280;
        --warn: #8A6100;
        --warn-bg: #FDF7EA;
        --warn-line: #F0E2C2;
        --warn-solid: #D9A036;
        --stop: #C0392B;
        --stop-bg: #FDF1F0;
        --stop-line: #F3D4D0;
        --stop-text: #B03229;
        --stop-solid: #C0392B;
        --info: #374151;
        --info-bg: #F3F4F6;
        --info-line: #E5E7EB;
        --blue: #1D4ED8;
        --blue-bg: #EEF3FF;
        --blue-line: #C9D7FB;
        --violet: #6D28D9;
        --violet-bg: #F4EFFF;
        --violet-line: #DDD0FA;
        --bg: #FFFFFF;
        color-scheme: light;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   المرحلة 9ج — صفحات الطالب وحسابي: ZuiFileButton · ZuiPrintSheet
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ZuiFileButton: label بشكل الزرّ يلفّ InputFile ──
   الحقل مخفيٌّ بصرياً لا display:none، فيبقى في ترتيب Tab ويُفتح بالمسافة؛
   وإطار التركيز يُرسم على الزرّ نفسه لا على حقلٍ لا يُرى. */
.zui-file { position: relative; cursor: pointer; }
.zui-file__input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.zui-file:has(.zui-file__input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.zui-file.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ── ZuiPrintSheet: وثيقةٌ بعرضٍ مصمَّم تُطبع وحدها ──
   على الشاشة تُصغَّر بالنسبة نفسها إن ضاق المكان ولا تُكبَّر: الحاوية تقيس عرضها
   (container) و tan(atan2(أ، ب)) يُعطي النسبة أ÷ب رقماً بلا وحدة — فالشهادة على
   الجوال هي نفسها بحجمٍ أصغر، لا نسخةٌ ملتفّة يخرج رمز تحقّقها عن إطارها. */
.zui-sheet { container-type: inline-size; min-width: 0; }
.zui-sheet__paper {
    width: var(--sheet-w);
    margin-inline: auto;
    zoom: min(1, tan(atan2(100cqw, var(--sheet-w))));
    color-scheme: light;
}

@media print {
    /* لا يُطبع من الصفحة غير الوثيقة: لا ترويسة ولا ما جاورها في جسم الصفحة */
    .zui-content:has(.zui-page-body > .zui-sheet) > .zui-page-head { display: none !important; }
    .zui-page-body:has(> .zui-sheet) > :not(.zui-sheet) { display: none !important; }
    .zui-content:has(.zui-page-body > .zui-sheet),
    .zui-page-body:has(> .zui-sheet) { padding: 0 !important; gap: 0; }
    .zui-sheet { container-type: normal; }
    .zui-sheet__paper { width: auto; zoom: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   مشغّل الطالب — docs/STUDENT-PLAYER-PLAN.md
   منقولٌ من شاشة «learn» في docs/prototypes/lessons.html (السيناريوهات 9–17)،
   بأصنافٍ تبدأ بـ zui-learn. المكوّنات في UIComponents/Zui/ZuiLearn*.razor.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── الإطار: بلا شريط التطبيق — المشغّل يستبدله بقائمة الدورة ── */
.zui-app.zui-app--focus {
    display: block;
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-image: none;
    background-color: var(--card-2);
}

.zui-learn { height: 100%; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); overflow: hidden; }
/* على الجوال تختفي القائمة كما في النموذج، و«خريطة الدورة» في المسرح تقوم مقامها */
/* ⚠️ «.zui-learn .zui-learn-side» لا «.zui-learn-side»: قاعدة القائمة (display: grid) تأتي
   بعد هذا الموضع بالوزن نفسه فتغلبه — قيس: القائمة ظاهرةٌ فوق الدرس على 390px */
@media (max-width: 900px) {
    .zui-learn { grid-template-columns: minmax(0, 1fr); }
    .zui-learn .zui-learn-side { display: none; }
}

/* ── القائمة الجانبية ── */
.zui-learn-side {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: var(--card);
    border-inline-end: 1px solid var(--line);
}
.zui-learn-side__top { padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
.zui-learn-side__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 11px; font-size: 12px; color: var(--text-3); text-decoration: none; }
.zui-learn-side__back:hover { color: var(--primary-dark); }
.zui-learn-side__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text); }
.zui-learn-side__sub { margin: 3px 0 10px; font-size: 11.5px; color: var(--text-3); }
.zui-learn-side__prog { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.zui-learn-side__top .zui-bar { min-width: 0; }
.zui-learn-side__list { display: flex; flex-direction: column; gap: 9px; overflow: auto; padding: 11px 11px 22px; }
/* بلا flex:none تُضغط بطاقة الوحدة فيُقصّ آخر درس فيها — ملاحظة النموذج نفسه */
.zui-learn-side__list > .zui-learn-unit { flex: none; }

.zui-learn-unit { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card-2); }
.zui-learn-unit__head {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}
.zui-learn-unit__head:hover { background: var(--card-2); }
.zui-learn-unit__check { color: var(--text-3); }
.zui-learn-unit.is-done .zui-learn-unit__check { color: var(--primary); }
.zui-learn-unit__name { flex: 1; min-width: 0; }
.zui-learn-unit__count { font-size: 10.5px; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zui-learn-unit__chev { color: var(--text-3); transition: transform .15s; }
.zui-learn-unit.is-closed .zui-learn-unit__chev { transform: rotate(-90deg); }
.zui-learn-unit__body { display: grid; gap: 3px; padding: 6px; border-top: 1px solid var(--line); }
.zui-learn-unit.is-closed .zui-learn-unit__body { display: none; }

.zui-learn-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
.zui-learn-row:hover { background: var(--card-3); color: var(--text); }
.zui-learn-row__icon { display: grid; place-items: center; color: var(--text-3); }
.zui-learn-row__meta { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zui-learn-row.is-now { border-color: var(--secondary); background: var(--primary-light); color: var(--primary-dark); font-weight: 500; }
.zui-learn-row.is-now .zui-learn-row__icon { color: var(--primary-dark); }
.zui-learn-row.is-done .zui-learn-row__icon { color: var(--primary); }
.zui-learn-row.is-lock { color: var(--text-3); opacity: .7; cursor: not-allowed; }

/* ── المسرح: ترويسة ثم شريط الخطوات ثم المحتوى ── */
.zui-learn-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.zui-learn-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 24px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.zui-learn-head__main { flex: 1; min-width: min(100%, 12rem); }
.zui-learn-head__eye { font-size: 11.5px; font-weight: 700; color: var(--primary-dark); }
.zui-learn-head__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--text); }
.zui-learn-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* شريط خطوات الدرس — خريطة لا نسبة. النقاط تنضغط حتى 6px فيتّسع درسٌ من 40 خطوة
   بلا تمرير (النموذج صُمّم على 8)، والجارية تبقى أعرض */
.zui-learn-dots {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 11px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
    background: var(--card-2);
    border-bottom: 1px solid var(--line);
}
.zui-learn-dot {
    flex: 1 1 26px;
    min-width: 6px;
    max-width: 26px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--line-2);
    cursor: pointer;
    transition: background .15s, width .15s;
}
.zui-learn-dot.is-done { background: var(--primary); }
.zui-learn-dot.is-act { background: var(--act-line); }
.zui-learn-dot.is-act.is-done { background: var(--act); }
.zui-learn-dot.is-now { flex-basis: 46px; min-width: 22px; max-width: 46px; background: var(--primary-dark); }
.zui-learn-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.zui-learn-dots__sep { flex: none; width: 1px; height: 14px; margin: 0 4px; background: var(--line-2); }
.zui-learn-dots__label { flex: none; margin-inline-start: auto; padding-inline-start: 14px; font-size: 11px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.zui-learn-stage { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; justify-items: center; padding: 24px; }
.zui-learn-stage__in { display: grid; gap: 18px; width: min(860px, 100%); }

@media (max-width: 640px) {
    .zui-learn-head { padding: 12px 16px; }
    /* «الخطوة 19 من 38» سطرٌ فوق النقاط: 38 نقطةً والعدّاد أعرض من 390 فكان العدّاد يُمرَّر خارج الشاشة
       (سيناريو 29 سبتمبر)، والنقاط تنكمش لتسع سطراً واحداً بلا شريط تمرير */
    .zui-learn-dots { gap: 3px; row-gap: 6px; padding: 10px 16px; flex-wrap: wrap; }
    .zui-learn-dots .zui-learn-dot { min-width: 4px; flex: 1 1 4px; }
    .zui-learn-dots__label { order: -1; flex-basis: 100%; margin-inline-start: 0; padding-inline-start: 0; }
    .zui-learn-stage { padding: 16px; }
}

/* ── النصوص المشتركة ── */
.zui-learn-display { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; font-size: 26px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--text); }
.zui-learn-prose { font-size: 15px; line-height: 1.95; color: var(--text); overflow-wrap: anywhere; }
.zui-learn-prose p { margin: 0 0 12px; }
.zui-learn-prose > :last-child { margin-bottom: 0; }
.zui-learn-prose img,
.zui-learn-prose video,
.zui-learn-prose iframe { max-width: 100%; height: auto; border-radius: var(--r-tile); }
.zui-learn-prose table { max-width: 100%; }
/* H6 (تقرير الجامعة 1) — صورة المفردة بعرض البطاقة حتى 560px، مستطيلةً 16:10 بلا قصّ (contain).
   !important يغلب مقاس المحرّر المكتوب في الصورة (style="width:…") — الشكوى كانت صغرها.
   والنصّ المساند (--sm) يبقى بمقاساته. */
.zui-learn-prose:not(.zui-learn-prose--sm) img {
    display: block;
    width: 100% !important;
    max-width: 560px;
    height: auto !important;
    aspect-ratio: 16 / 10;
    margin: 6px auto 14px;
    object-fit: contain;
    background: var(--card-2);
}
.zui-learn-prose--sm { font-size: 14.5px; color: var(--text-2); }
/* الأهداف من محرّر HTML: قائمةٌ تصير علامات صحّ كما في النموذج */
.zui-learn-prose--goals ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zui-learn-prose--goals li { position: relative; padding-inline-start: 30px; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.zui-learn-prose--goals li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    top: 3px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: var(--r-pill);
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 700;
}

.zui-learn-snd {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--secondary);
    border-radius: var(--r-pill);
    background: var(--primary-light);
    color: var(--primary-dark);
    cursor: pointer;
}
.zui-learn-snd:hover,
.zui-learn-snd[data-playing="1"] { background: var(--primary); color: var(--on-primary); }
.zui-learn-snd[data-playing="1"] .zui-icon { animation: zui-learn-pulse .7s ease-in-out infinite; }
/* الملفّ تعذّر تشغيله: لونُ التوقّف، وتلميح الزرّ يقول السبب */
.zui-learn-snd[data-error="1"] { color: var(--stop); border-color: var(--stop-line); background: var(--stop-bg); }
@keyframes zui-learn-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.86); } }

/* ── مدخل الدرس ── */
.zui-learn-cover { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-lg); }
.zui-learn-cover__img {
    display: grid;
    place-items: center;
    height: 190px;
    background:
        linear-gradient(135deg, rgba(24, 161, 113, .9), rgba(67, 183, 143, .75)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 12px, transparent 12px 24px);
    color: #fff;
}
.zui-learn-cover__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zui-learn-cover__glyph { font-size: 52px; font-weight: 700; letter-spacing: .04em; opacity: .9; }
.zui-learn-cover__body { display: grid; gap: 14px; padding: 22px 24px; }
.zui-learn-cover__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zui-learn-cover__top .zui-eyebrow { flex: 1; min-width: 10rem; }
@media (max-width: 640px) {
    .zui-learn-cover__img { height: 140px; }
    .zui-learn-cover__body { padding: 18px 16px; }
    .zui-learn-display { font-size: 22px; }
}

.zui-learn-roadmap { display: grid; gap: 7px; }
.zui-learn-rm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    background: var(--card-2);
}
.zui-learn-rm__n {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-pill);
    background: var(--card-3);
    color: var(--text-2);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.zui-learn-rm__t { display: block; font-size: 13px; font-weight: 500; color: var(--text); }
.zui-learn-rm__s { display: block; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.zui-learn-rm.is-now { border-color: var(--secondary); background: var(--primary-light); }
.zui-learn-rm.is-now .zui-learn-rm__n,
.zui-learn-rm.is-done .zui-learn-rm__n { background: var(--primary); color: var(--on-primary); }
.zui-learn-rm.is-lock { opacity: .7; }

.zui-learn-resume {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--secondary);
    border-radius: var(--r-card);
    background: var(--primary-light);
    box-shadow: var(--shadow);
}
.zui-learn-resume__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); }
.zui-learn-resume__t { display: block; font-size: 14.5px; font-weight: 700; color: var(--primary-dark); }
.zui-learn-resume__p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.zui-learn-resume__acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .zui-learn-resume { grid-template-columns: auto minmax(0, 1fr); }
    .zui-learn-resume__acts { grid-column: 1 / -1; }
}

/* نسخة صفحة المرجع: ارتفاعٌ ثابت بدل ملء النافذة */
.zui-learn--demo { height: 680px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card-2); }

/* ── بطاقة المحتوى والنشاط ── */
.zui-learn-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); }
.zui-learn-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.zui-learn-card__title { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--text); }
.zui-learn-card__head-text { flex: 1; min-width: 0; }
.zui-learn-card__kicker { display: block; font-size: 12.5px; font-weight: 700; color: var(--act); }
.zui-learn-card__small { display: block; font-size: 11px; color: var(--text-3); }
.zui-learn-tico {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--tone-bg, var(--primary-light));
    color: var(--tone-fg, var(--primary-dark));
}
.zui-learn-card--act .zui-learn-card__head { background: var(--act-bg); border-bottom-color: var(--act-line); }
.zui-learn-card--act .zui-learn-tico { background: var(--act); color: #fff; }
.zui-learn-card__body { display: grid; gap: 14px; padding: 20px; }
.zui-learn-card__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 20px;
    border-top: 1px solid var(--line);
    background: var(--card-2);
}
@media (max-width: 640px) {
    .zui-learn-card__head,
    .zui-learn-card__foot { padding-inline: 14px; }
    .zui-learn-card__body { padding: 16px 14px; }
}

/* H4 (تقرير الجامعة 1) — ترويسة المفردة البارزة: شريطٌ بلون القسم، وعنوانٌ أكبر فوقه ترتيب المفردة،
   وحركة دخولٍ خفيفة. البطاقة تُرسم من جديد عند الانتقال إلى مفردةٍ أخرى (@key)، فتعود الحركة مع
   كلّ مفردة ولا تتكرّر بين محتويات المفردة الواحدة. */
.zui-learn-card--hero .zui-learn-card__head {
    gap: 14px;
    padding-block: 18px;
    border-inline-start: 4px solid var(--tone-solid, var(--primary));
    border-bottom-color: var(--tone-line, var(--secondary));
    background: var(--tone-bg, var(--primary-light));
}
.zui-learn-card--hero .zui-learn-tico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--card);
    color: var(--tone-fg, var(--primary-dark));
    box-shadow: 0 0 0 1px var(--tone-line, var(--secondary));
    animation: zui-learn-hero-ico .5s cubic-bezier(.3, 1.4, .5, 1) both;
}
.zui-learn-card__eyebrow { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--tone-fg, var(--primary-dark)); }
.zui-learn-card--hero .zui-learn-card__title { font-size: 21px; font-weight: 800; line-height: 1.4; }
.zui-learn-card--hero .zui-learn-card__head-text { animation: zui-rise .45s ease .06s both; }
@keyframes zui-learn-hero-ico { from { opacity: 0; transform: scale(.6) rotate(-10deg); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .zui-learn-card--hero .zui-learn-card__head { padding-block: 14px; }
    .zui-learn-card--hero .zui-learn-card__title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .zui-learn-card--hero .zui-learn-tico,
    .zui-learn-card--hero .zui-learn-card__head-text { animation: none; }
}

/* مقطعٌ بحشو البطاقة داخل بطاقةٍ بلا حشو (Flush) */
.zui-learn-block { display: grid; gap: 12px; padding: 6px 20px 16px; }
@media (max-width: 640px) { .zui-learn-block { padding-inline: 14px; } }

.zui-learn-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 20px; background: var(--card-2); border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.zui-learn-tab {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
.zui-learn-tab.is-done { color: var(--primary-dark); }
.zui-learn-tab.is-on { border-color: var(--secondary); background: var(--primary-light); color: var(--primary-dark); font-weight: 500; }

/* جملة المحتوى بصوتها — «المثال» في النموذج */
.zui-learn-say { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--secondary); border-radius: var(--r-tile); background: var(--primary-light); }
.zui-learn-say__text { flex: 1; min-width: 0; font-size: 20px; font-weight: 500; line-height: 1.9; color: var(--primary-dark); overflow-wrap: anywhere; }

.zui-learn-media { overflow: hidden; border-radius: var(--r-tile); background: var(--stage); }
.zui-learn-media video,
.zui-learn-media img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: var(--stage); }

/* ── الحوار ── */
.zui-learn-chat { display: grid; gap: 12px; padding: 20px; }
.zui-learn-msg { display: flex; align-items: flex-start; gap: 11px; max-width: 82%; }
.zui-learn-msg--b { flex-direction: row-reverse; margin-inline-start: auto; }
.zui-learn-msg__av {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-pill);
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
}
.zui-learn-msg--b .zui-learn-msg__av { background: var(--info-bg); color: var(--info); }
.zui-learn-msg__row { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.zui-learn-msg--b .zui-learn-msg__row { flex-direction: row-reverse; }
.zui-learn-bub {
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card-2);
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--text);
    overflow-wrap: anywhere;
}
.zui-learn-bub p { margin: 0; }
.zui-learn-msg--a .zui-learn-bub { border-start-start-radius: 4px; }
.zui-learn-msg--b .zui-learn-bub { border-color: var(--secondary); border-start-end-radius: 4px; background: var(--primary-light); }
.zui-learn-bub__who { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.zui-learn-bub__tr { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--text-3); unicode-bidi: plaintext; }
.zui-learn-chat.is-plain .zui-learn-bub__tr { display: none; }
@media (max-width: 640px) {
    .zui-learn-chat { padding: 16px 14px; }
    .zui-learn-msg { max-width: 100%; }
}

/* ── الفيديو: اللوح الداكن الوحيد ── */
.zui-learn-watch { overflow: hidden; border-radius: var(--r-card); background: var(--stage); box-shadow: var(--shadow-lg); }
.zui-learn-watch video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--stage); }
.zui-learn-watch__empty {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: radial-gradient(60% 60% at 50% 40%, rgba(47, 190, 139, .16), transparent 70%), var(--stage);
    color: var(--stage-text-2);
}
.zui-learn-transcript {
    display: grid;
    gap: 9px;
    max-height: 190px;
    overflow: auto;
    padding: 16px 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: var(--stage-2);
    color: var(--stage-text-2);
}
.zui-learn-tline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; font-size: 13.5px; line-height: 1.75; }
.zui-learn-tline__mark { padding-top: 4px; font-size: 10.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.zui-learn-tline p { margin: 0; }
/* بتوقيت: يُنقر للقفز، ويُضاء المسموع */
.zui-learn-tline[data-t] { margin: -2px -5px; padding: 2px 5px; border-radius: 7px; cursor: pointer; }
.zui-learn-tline[data-t]:hover { background: rgba(255, 255, 255, .06); }
.zui-learn-tline[data-on="1"] { color: var(--stage-text); }
.zui-learn-tline[data-on="1"] .zui-learn-tline__mark { opacity: 1; color: var(--secondary); }

/* ── الأنشطة ── */
.zui-learn-q { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 20px 20px 6px; font-size: 17px; font-weight: 500; line-height: 1.7; color: var(--text); }
.zui-learn-q__n {
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 5px;
    border-radius: var(--r-pill);
    background: var(--act-bg);
    color: var(--act);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.zui-learn-q__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.zui-learn-q__text p { margin: 0; }
.zui-learn-q .zui-learn-snd { margin-top: 3px; }
.zui-learn-part { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 20px 0; font-size: 15px; font-weight: 500; color: var(--text-2); }
.zui-learn-part img { max-width: 180px; border-radius: 9px; }
.zui-learn-part video { max-width: 260px; border-radius: 9px; background: #000; }
.zui-learn-part span:empty { display: none; }

/* سؤال «اربط الكلمة بالصورة» — H13 · H14: صورة الجزء أو فيديوه في جانب، وإجاباته مكدّسةً في الآخر.
   على الجوال عمودٌ واحد: الصورة فوق، وإجاباتها تحتها. */
.zui-learn-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: center; padding: 14px 20px 20px; }
.zui-learn-pair .zui-learn-part { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; text-align: center; }
.zui-learn-pair .zui-learn-part img,
.zui-learn-pair .zui-learn-part video { width: 100%; max-width: none; aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card-2); }
.zui-learn-pair .zui-learn-part .zui-learn-snd { align-self: center; }
.zui-learn-pair .zui-learn-opts { padding: 0; }
@media (max-width: 640px) {
    .zui-learn-pair { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-inline: 14px; }
    .zui-learn-pair .zui-learn-part img,
    .zui-learn-pair .zui-learn-part video { max-height: 240px; }
}

.zui-learn-opts { display: grid; gap: 9px; padding: 14px 20px 20px; }
/* إجاباتٌ قصيرة (صح أو خطأ، كلمة واحدة): عمودان بدل سطرين عريضين */
.zui-learn-opts--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.zui-learn-opt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-tile);
    background: var(--card-2);
    color: var(--text);
    font: inherit;
    font-size: 14.5px;
    text-align: start;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.zui-learn-opt:not(:disabled):hover { border-color: var(--secondary); background: var(--card); }
.zui-learn-opt:disabled { cursor: default; }
.zui-learn-opt__k {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--card-3);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
}
.zui-learn-opt__text { min-width: 0; overflow-wrap: anywhere; }
.zui-learn-opt__text img,
.zui-learn-opt__text video { display: block; max-width: 200px; max-height: 160px; margin-top: 8px; border-radius: 9px; }
.zui-learn-opt__mk { flex: none; color: var(--text-3); opacity: 0; }
.zui-learn-opt.is-pick { border-color: var(--primary); background: var(--primary-light); }
.zui-learn-opt.is-right { border-color: var(--primary); background: var(--primary-light); }
.zui-learn-opt.is-right .zui-learn-opt__k { background: var(--primary); color: var(--on-primary); }
.zui-learn-opt.is-right .zui-learn-opt__mk { opacity: 1; color: var(--primary-dark); }
.zui-learn-opt.is-wrong { border-color: var(--stop-line); background: var(--stop-bg); }
.zui-learn-opt.is-wrong .zui-learn-opt__k { background: var(--stop-solid); color: #fff; }
.zui-learn-opt.is-wrong .zui-learn-opt__mk { opacity: 1; color: var(--stop-text); }
.zui-learn-opt.is-miss { border-style: dashed; border-color: var(--secondary); }
.zui-learn-opt.is-miss .zui-learn-opt__k { background: var(--primary-light); color: var(--primary-dark); }
.zui-learn-opt.is-miss .zui-learn-opt__mk { opacity: 1; color: var(--primary-dark); }

.zui-learn-write { padding: 14px 20px 20px; }

/* التغذية الراجعة */
.zui-learn-fb {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0 20px 20px;
    padding: 14px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-tile);
    background: var(--card-2);
}
.zui-learn-fb__ic { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: var(--r-pill); }
.zui-learn-fb__t { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 700; }
.zui-learn-fb__p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--text-2); }
.zui-learn-fb.is-right { border-color: var(--secondary); background: var(--primary-light); }
.zui-learn-fb.is-right .zui-learn-fb__ic { background: var(--primary); color: var(--on-primary); }
.zui-learn-fb.is-right .zui-learn-fb__t { color: var(--primary-dark); }
.zui-learn-fb.is-wrong { border-color: var(--stop-line); background: var(--stop-bg); }
.zui-learn-fb.is-wrong .zui-learn-fb__ic { background: var(--stop-solid); color: #fff; }
.zui-learn-fb.is-wrong .zui-learn-fb__t { color: var(--stop-text); }
/* H9 (تقرير الجامعة 1) — احتفالٌ صامت بالإجابة الصحيحة (قصاصاتٌ تتناثر من العلامة) وهزّةٌ خفيفة
   للخاطئة. بلا صوت، ويسكن كلّه مع «تقليل الحركة». is-live وحدها تتحرّك: ما أُجيب في جلسةٍ سابقة
   يُعرض ساكناً. القصاصات خارج العلامة (لا تكبر معها) وخارج الشبكة (position: absolute). */
.zui-learn-fb.is-live { position: relative; }
.zui-learn-fb.is-live.is-right .zui-learn-fb__ic { animation: zui-learn-cheer .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.zui-learn-fb.is-live.is-wrong { animation: zui-learn-shake .45s ease both; }
.zui-learn-fb__burst { position: absolute; top: 28px; inset-inline-start: 29px; width: 0; height: 0; pointer-events: none; }
.zui-learn-fb__burst i {
    position: absolute;
    top: -5px;
    left: -3px;
    width: 6px;
    height: 10px;
    border-radius: 2px;
    background: var(--c, var(--primary));
    opacity: 0;
    animation: zui-learn-confetti .95s cubic-bezier(.12, .7, .3, 1) forwards;
}
.zui-learn-fb__burst i:nth-child(1) { --x: 46px; --y: -6px; --r: 200deg; --c: var(--primary); }
.zui-learn-fb__burst i:nth-child(2) { --x: 30px; --y: -30px; --r: 320deg; --c: var(--warn-solid); animation-delay: .03s; }
.zui-learn-fb__burst i:nth-child(3) { --x: 12px; --y: -48px; --r: 150deg; --c: var(--blue); }
.zui-learn-fb__burst i:nth-child(4) { --x: -14px; --y: -44px; --r: 280deg; --c: var(--violet); animation-delay: .05s; }
.zui-learn-fb__burst i:nth-child(5) { --x: -34px; --y: -28px; --r: 190deg; --c: var(--act); }
.zui-learn-fb__burst i:nth-child(6) { --x: -48px; --y: -4px; --r: 340deg; --c: var(--secondary); animation-delay: .02s; }
.zui-learn-fb__burst i:nth-child(7) { --x: -36px; --y: 24px; --r: 120deg; --c: var(--warn-solid); }
.zui-learn-fb__burst i:nth-child(8) { --x: -14px; --y: 40px; --r: 260deg; --c: var(--primary); animation-delay: .04s; }
.zui-learn-fb__burst i:nth-child(9) { --x: 12px; --y: 42px; --r: 210deg; --c: var(--violet); }
.zui-learn-fb__burst i:nth-child(10) { --x: 34px; --y: 26px; --r: 300deg; --c: var(--blue); animation-delay: .06s; }
.zui-learn-fb__burst i:nth-child(11) { --x: 24px; --y: -14px; --r: 90deg; --c: var(--act); animation-delay: .1s; }
.zui-learn-fb__burst i:nth-child(12) { --x: -24px; --y: 12px; --r: 240deg; --c: var(--secondary); animation-delay: .08s; }
@keyframes zui-learn-confetti {
    0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 14px)) rotate(var(--r)) scale(1); }
}
@keyframes zui-learn-cheer { 0% { transform: scale(.3); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes zui-learn-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
    .zui-learn-fb.is-live,
    .zui-learn-fb.is-live .zui-learn-fb__ic { animation: none; }
    .zui-learn-fb__burst { display: none; }
}
.zui-learn-fb__ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px dashed var(--secondary);
    background: none;
    color: var(--primary-dark);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* السحب والإفلات */
.zui-learn-dnd { display: grid; gap: 16px; padding: 18px 20px 20px; }
.zui-learn-bank { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card-3); }
.zui-learn-bank__label { width: 100%; margin-bottom: 2px; font-size: 12px; color: var(--text-3); }
.zui-learn-token {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    cursor: grab;
}
.zui-learn-token:hover { border-color: var(--secondary); }
.zui-learn-token.is-drag { opacity: .4; }
.zui-learn-token.is-used { opacity: .35; box-shadow: none; cursor: default; }
.zui-learn-token__g { color: var(--text-3); }
.zui-learn-token img { max-height: 48px; border-radius: 6px; }
.zui-learn-slots { display: grid; gap: 9px; }
.zui-learn-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1.5px dashed var(--line-2);
    border-radius: var(--r-tile);
    background: var(--card-2);
}
.zui-learn-slot__lab { font-size: 15px; line-height: 2; color: var(--text); }
.zui-learn-slot__well {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 168px;
    min-height: 38px;
    padding: 4px 16px;
    border: 1.5px dashed var(--line-2);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--text-3);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.zui-learn-slot.is-target .zui-learn-slot__well,
.zui-learn-slot.is-over .zui-learn-slot__well { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.zui-learn-slot.is-filled { border-style: solid; border-color: var(--secondary); background: var(--primary-light); }
.zui-learn-slot.is-filled .zui-learn-slot__well { border-style: solid; border-color: var(--secondary); color: var(--primary-dark); font-weight: 500; }
.zui-learn-slot.is-wrong { border-style: solid; border-color: var(--stop-line); background: var(--stop-bg); }
.zui-learn-slot.is-wrong .zui-learn-slot__well { border-color: var(--stop-line); color: var(--stop-text); }
.zui-learn-chip {
    padding: 3px 11px;
    border: 1px solid var(--secondary);
    border-radius: var(--r-pill);
    background: var(--card);
    color: inherit;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

/* الترتيب */
.zui-learn-sort { display: grid; gap: 8px; }
.zui-learn-sortrow {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-tile);
    background: var(--card);
    box-shadow: var(--shadow);
    font-size: 14.5px;
    color: var(--text);
}
.zui-learn-sortrow.is-drag { opacity: .4; }
.zui-learn-sortrow.is-over { box-shadow: 0 -3px 0 0 var(--primary), var(--shadow); }
.zui-learn-sortrow.is-right { border-color: var(--secondary); background: var(--primary-light); }
.zui-learn-sortrow.is-wrong { border-color: var(--stop-line); background: var(--stop-bg); }
.zui-learn-sortrow__idx {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.zui-learn-sortrow__arrows { display: grid; gap: 2px; }
.zui-learn-sortrow__arrows button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-3);
    cursor: pointer;
}
.zui-learn-sortrow__arrows button:hover:not(:disabled) { background: var(--card-3); color: var(--primary-dark); }
.zui-learn-sortrow__arrows button:disabled { opacity: .3; cursor: default; }
.zui-learn-sortrow__text { min-width: 0; overflow-wrap: anywhere; }
.zui-learn-sortrow__grip { color: var(--text-3); cursor: grab; }

/* شاهد واستمع: بطاقات وسائط */
.zui-learn-mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 14px 20px 20px; }
.zui-learn-mcard { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card-2); }
.zui-learn-mcard img,
.zui-learn-mcard video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--stage); }
.zui-learn-mcard__text { flex: 1; min-width: 0; }
.zui-learn-mcard__body { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 15px; font-weight: 500; color: var(--text); }

/* ── خاتمة الدرس ── */
.zui-learn-done {
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 30px 24px 24px;
    background: radial-gradient(60% 70% at 50% 0%, var(--primary-light), transparent 70%);
    text-align: center;
}
.zui-learn-done__badge { display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-lg); }
.zui-learn-done__sub { margin: 0; font-size: 13.5px; color: var(--text-2); }
.zui-learn-score { display: flex; align-items: baseline; justify-content: center; gap: 5px; font-variant-numeric: tabular-nums; }
.zui-learn-score b { font-size: 40px; font-weight: 700; line-height: 1; color: var(--primary-dark); }
.zui-learn-score span { font-size: 17px; color: var(--text-3); }

/* الجدول نفسه ZuiDataTable — هنا ما يخصّ خلاياه في المشغّل */
.zui-learn-results__q { font-weight: 500; }
.zui-learn-results__t { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-3); }
.zui-learn-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--card-3); color: var(--text-3); }
.zui-learn-mark.is-right { background: var(--primary-light); color: var(--primary-dark); }
.zui-learn-mark.is-wrong { background: var(--stop-bg); color: var(--stop-text); }

/* ── التقييم بالنجوم ── */
.zui-rating { display: inline-flex; gap: 4px; }
.zui-rating__star { display: grid; place-items: center; padding: 2px; border: 0; background: none; color: var(--line-2); cursor: pointer; }
.zui-rating__star:hover,
.zui-rating__star.is-on { color: var(--warn-solid); }
.zui-rating__star.is-on .zui-icon { fill: currentColor; }

/* ═══════════════════════════════════════════════════════════════════════
   متابعة المدرّب — السيناريوهان 18 و19 (docs/STUDENT-PLAYER-PLAN.md، المرحلة 5)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ZuiSpread: توزيعٌ في شريطٍ واحد ومفتاحه تحته ── */
.zui-spread { display: grid; gap: 6px; min-width: 150px; }
.zui-spread__bar { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 4px; background: var(--card-3); }
.zui-spread__bar i { display: block; height: 100%; background: var(--tone-solid, var(--line-2)); }
.zui-spread__bar i.zui-tone--neutral { background: var(--line-2); }
.zui-spread__key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.zui-spread__key i { display: inline-block; width: 9px; height: 9px; margin-inline-end: 5px; border-radius: 3px; background: var(--tone-solid, var(--line-2)); vertical-align: -1px; }
.zui-spread__key i.zui-tone--neutral { background: var(--line-2); }

/* ── ZuiJourney: رحلة الطالب على خطٍّ رأسيّ ── */
.zui-journey { display: grid; padding: 4px 0; }
.zui-jrow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 11px 4px; }
.zui-jrow::before { content: ""; position: absolute; inset-inline-start: 18px; top: 30px; bottom: -8px; width: 2px; background: var(--line); }
.zui-jrow:last-child::before { display: none; }
.zui-jrow__dot {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--card);
    color: var(--text-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.zui-jrow.is-done .zui-jrow__dot { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.zui-jrow.is-fail .zui-jrow__dot { border-color: var(--stop-solid); background: var(--stop-solid); color: #fff; }
.zui-jrow.is-here .zui-jrow__dot { border-color: var(--warn-solid); background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.zui-jrow.is-todo { opacity: .6; }
.zui-jrow__t { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.zui-jrow__d { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.zui-jrow.is-fail .zui-jrow__d { color: var(--stop-text); }
.zui-jrow__m { padding-top: 3px; font-size: 11px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════
   المرحلة 6 — محرّر الدرس (docs/prototypes/lessons.html: editor)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ZuiTabs · ZuiTab ── */
/* overflow-y: hidden صراحةً: overflow-x وحده يجعل الآخر auto، فيظهر سهما تمريرٍ رأسيّان
   بسبب margin-bottom: -1px على التبويب (قِيس على المحرّر). */
.zui-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.zui-tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; margin-bottom: -1px;
    background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-2);
    font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer;
}
.zui-tab:hover { color: var(--text); }
.zui-tab.is-on { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 500; }
.zui-tab--end { margin-inline-start: auto; }
.zui-tab__count { font-size: 10.5px; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: var(--r-pill); background: var(--card-3); color: var(--text-3); }
.zui-tab.is-on .zui-tab__count { background: var(--primary-light); color: var(--primary-dark); }

/* ── ZuiTree · ZuiTreeNode · ZuiTreeAdd ── */
.zui-tree { display: grid; gap: 6px; }
.zui-tnode {
    display: flex; align-items: center; gap: 6px; padding-inline-end: 8px;
    border-radius: var(--r-tile); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.zui-tnode:hover { border-color: var(--line-2); }
.zui-tnode[data-sel="1"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light), var(--shadow); }
.zui-tnode[data-kind="item"],
.zui-tnode[data-kind="act"] { margin-inline-start: 34px; box-shadow: none; background: var(--card-2); }
.zui-tnode[data-kind="item"] { border-inline-start: 3px solid var(--secondary); }
.zui-tnode[data-kind="act"] { border-inline-start: 3px solid var(--act); }
.zui-tnode[data-sel="1"][data-kind="item"],
.zui-tnode[data-sel="1"][data-kind="act"] { box-shadow: 0 0 0 3px var(--primary-light); }
.zui-tnode[data-off="1"] { opacity: .58; }
.zui-tnode__main {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 10px 12px;
    background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.zui-tnode__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--primary-light); color: var(--primary-dark); }
.zui-tnode[data-kind="item"] .zui-tnode__ico { width: 26px; height: 26px; border-radius: 8px; background: var(--card-3); color: var(--text-2); }
.zui-tnode[data-kind="act"] .zui-tnode__ico { width: 26px; height: 26px; border-radius: 8px; background: var(--act-bg); color: var(--act); }
.zui-tnode__text { min-width: 0; display: grid; gap: 2px; }
.zui-tnode__name { font-size: 13.5px; font-weight: 500; line-height: 1.45; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.zui-tnode[data-kind="item"] .zui-tnode__name,
.zui-tnode[data-kind="act"] .zui-tnode__name { font-weight: 400; font-size: 13px; }
.zui-tnode__meta { font-size: 11.5px; color: var(--text-3); }
.zui-tnode__side { display: flex; align-items: center; gap: 2px; flex: none; }
.zui-tadd {
    margin-inline-start: 34px; display: flex; align-items: center; gap: 8px; padding: 9px 13px;
    border-radius: var(--r-tile); border: 1.5px dashed var(--line-2); background: transparent; color: var(--text-3);
    font: inherit; font-size: 12.5px; text-align: start; cursor: pointer;
}
.zui-tadd:hover { border-color: var(--secondary); color: var(--primary-dark); background: var(--primary-light); }
.zui-tadd--top { margin-inline-start: 0; justify-content: center; padding: 13px; }

/* ── ZuiSidePanel: ملتصقٌ داخل عمود الشبكة، وارتفاعه محدود بالنافذة وتمريره داخليّ ── */
.zui-sidepanel {
    align-self: start; position: sticky; top: 12px; display: flex; flex-direction: column;
    max-height: calc(100vh - 110px); overflow: hidden; scroll-margin-top: 76px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg);
}
.zui-sidepanel__head { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.zui-sidepanel__head h3 { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.zui-sidepanel__ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--primary-light); color: var(--primary-dark); }
.zui-sidepanel__where { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 15px; font-size: 11px; color: var(--text-3); background: var(--primary-light); border-bottom: 1px solid var(--line); }
.zui-sidepanel__where b { font-weight: 500; color: var(--primary-dark); }
.zui-sidepanel__where span { opacity: .55; }
.zui-sidepanel__body { min-height: 0; overflow: auto; padding: 15px; display: grid; gap: 14px; align-content: start; }
.zui-sidepanel__foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 15px; border-top: 1px solid var(--line); background: var(--card-2); }

/* ── ZuiItemRow: صفٌّ للقراءة بأزراره ── */
.zui-itemrow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card); }
.zui-itemrow[data-tone="brand"] { border-color: var(--secondary); background: var(--primary-light); }
.zui-itemrow__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.zui-itemrow__title { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.zui-itemrow__meta { font-size: 11.5px; color: var(--text-3); line-height: 1.5; overflow-wrap: anywhere; }
.zui-itemrow__end { display: flex; align-items: center; gap: 2px; flex: none; }

/* ── ZuiStateCell ── */
.zui-statecell {
    width: 30px; height: 30px; padding: 0; border-radius: 9px; display: inline-grid; place-items: center;
    border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-3); cursor: pointer;
}
button.zui-statecell:hover { border-color: var(--secondary); }
.zui-statecell[data-s="ok"] { background: var(--primary-light); border-color: var(--secondary); color: var(--primary-dark); }
.zui-statecell[data-s="stale"] { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.zui-statecell[data-s="none"] { border-style: dashed; }
.zui-statecell[data-s="na"] { background: transparent; border: 0; opacity: .45; cursor: default; }
span.zui-statecell { cursor: default; }

/* ── ZuiLevel: اسمٌ بمستوى داخل جدول ── */
.zui-lvl { display: inline-flex; align-items: center; gap: 9px; }
.zui-lvl[data-depth="1"] { padding-inline-start: 26px; }
.zui-lvl[data-depth="2"] { padding-inline-start: 52px; }
.zui-lvl[data-depth="0"] .zui-lvl__text { font-weight: 600; }
.zui-lvl__ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--primary-light); color: var(--primary-dark); }
.zui-lvl[data-kind="item"] .zui-lvl__ico { background: var(--card-3); color: var(--text-2); }
.zui-lvl[data-kind="act"] .zui-lvl__ico { background: var(--act-bg); color: var(--act); }

/* ── ZuiCheckRow ── */
.zui-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 13px; border-radius: var(--r-tile); border: 1px solid var(--line); background: var(--card-2); }
.zui-check[data-s="ok"] { border-color: var(--secondary); background: var(--primary-light); }
.zui-check[data-s="warn"] { border-color: var(--warn-line); background: var(--warn-bg); }
.zui-check[data-s="stop"] { border-color: var(--stop-line); background: var(--stop-bg); }
.zui-check__ic { width: 24px; height: 24px; border-radius: var(--r-pill); display: grid; place-items: center; }
.zui-check[data-s="ok"] .zui-check__ic { background: var(--primary); color: var(--on-primary); }
.zui-check[data-s="warn"] .zui-check__ic { background: var(--warn-solid); color: var(--text); }
.zui-check[data-s="stop"] .zui-check__ic { background: var(--stop-solid); color: var(--on-primary); }
.zui-check__tx { display: grid; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.zui-check__tx small { margin-top: 1px; font-size: 11.5px; color: var(--text-3); }

/* ── ZuiPreviewFrame ── */
.zui-preview { margin: 0; align-self: start; overflow: hidden; background: var(--card-3); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.zui-preview__bar { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--text-3); }
.zui-preview__dots { display: flex; gap: 4px; }
.zui-preview__dots i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--line-2); }
.zui-preview__in { padding: 18px; display: grid; gap: 13px; }

/* ── ZuiMediaPreview ── */
.zui-media { margin: 0; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card-2); }
.zui-media figcaption { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.zui-media audio { width: 100%; height: 36px; }
.zui-media video { width: 100%; max-height: 220px; border-radius: 8px; background: var(--stage); }
.zui-media img { max-width: 100%; max-height: 180px; border-radius: 8px; object-fit: contain; justify-self: start; }