/*
 * اللوحة كما وردت في ملفّ التصميم (my_librairie) حرفًا بحرف.
 *
 * قِيست كلُّها على الخلفية: أدناها تباينًا #6b675f عند 5.35 وأعلاها
 * #1c1b18 عند 16.38 — وكلُّها فوق 4.5 المطلوبة للنصّ. إلّا #d8b64a
 * فتباينه 1.86، ولذلك لا يُستعمل في التصميم نصًّا قطّ بل مربّعَ دلالةٍ
 * فحسب، وهنا مثله: --warn-dot للمربّع، و--warn لونٌ داكن للنصّ.
 *
 * والدرجاتُ الفاتحة تُشتقّ من --accent لا تُكتب أرقامًا، فتتبع اللون
 * المميّز إن بدّله المدير في صفحة الإعدادات.
 */
:root {
    --ink: #1c1b18;
    --muted: #3d3a35;
    --muted-light: #6b675f;
    --rule: #e6e2da;
    --stripe: #faf8f4;
    --track: #f1eee7;
    --accent: #1f6f87;
    --accent-hover: #17545f;
    --accent-soft: #e8eff2;
    --accent-faint: #f6fafb;
    --bg: #fbf9f5;
    --ok: #2f6f4f;
    --ok-soft: #e6f2ea;
    --bad: #a33a2f;
    --bad-soft: #f7e8e6;
    --warn: #8a6516;
    --warn-soft: #fbf1de;
    --warn-dot: #d8b64a;
    --neutral-soft: #f2efe9;

    /*
     * صفرٌ بقصد. ملفّ التصميم يقول: «لا تُدوَّر زاويةٌ في أيّ موضع» —
     * الشبكةُ وقوّةُ الفواصل هما ما ينظّم، لا الحوافُّ الليّنة.
     * وهو رمزٌ لا رقمٌ مبثوث، فتبديلُه في سطرٍ واحد يعيد الاستدارة كلَّها.
     */
    --radius: 0;
}

/*
 * الدرجاتُ الفاتحة تُشتقّ من اللون المميّز حيث يُدعم color-mix.
 *
 * المدير يبدّل --accent في صفحة الإعدادات، والقيم أعلاه ثابتةٌ مضبوطةٌ
 * على أحمر الشعار — فلو بدّله إلى أزرقَ بقيت خلفيةُ الرابط النشط حمراء.
 * وتبقى الثابتة احتياطًا لمتصفّحٍ لا يعرف color-mix، فتُرى لوحةٌ متّسقة
 * في كل حال.
 */
@supports (color: color-mix(in srgb, red 10%, white)) {
    :root {
        --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--bg));
        --accent-faint: color-mix(in srgb, var(--accent) 5%, var(--bg));
        --ok-soft: color-mix(in srgb, var(--ok) 14%, var(--bg));
        --bad-soft: color-mix(in srgb, var(--bad) 12%, var(--bg));
    }
}

* { box-sizing: border-box; }

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

/* --- الهيكل: قائمةٌ جانبية وعمودُ محتوى --- */
.shell { display: flex; min-height: 100dvh; }

.side {
    display: flex; flex-direction: column;
    width: 264px; flex-shrink: 0;
    background: #fff; border-inline-end: 1px solid var(--rule);
    transition: margin-inline-start .2s ease, transform .2s ease;
    /*
     * القائمةُ بارتفاع الشاشة لا بارتفاع الصفحة.
     *
     * كانت تمتدّ بامتداد المحتوى، فيهبط زرُّ الخروج إلى أسفل صفحةٍ طولُها
     * عشراتُ الأسطر — والمعلّمُ يمرّر دقيقةً ليخرج. فالآن تلتصق بأعلى
     * الشاشة (sticky) وارتفاعُها ارتفاعُها، وقائمةُ الروابط تُمرَّر داخلها
     * وحدها، فيبقى الخروجُ ظاهرًا دائمًا.
     */
    position: sticky; top: 0; align-self: flex-start;
    height: 100dvh; max-height: 100dvh;
}
.side-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 18px 16px; border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.side-brand { display: flex; align-items: center; text-decoration: none; min-width: 0; flex: 1; }
/*
 * سقفان لا مقاسٌ مفروض: عرضُ القائمة وارتفاعٌ أقصى. أيّهما بلغه الشعار
 * أوّلًا وقف عنده، ويتبعه ارتفاعُ الترويسة نفسها — فلا min-height مقدّرٌ
 * على نسبةٍ بعينها.
 *
 * ولا قيمة مأخوذة من شعارٍ بذاته: شعارٌ مربّع يخرج 76×76، وعريضٌ يقف عند
 * عرض القائمة فيقصر ارتفاعُه وترويستُه معه. المدير يبدّل شعاره في صفحة
 * الإعدادات، ولا ينبغي أن يُبدَّل معه ملفُّ أنماط.
 */
.side-brand img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 76px;
    object-fit: contain; object-position: right center;
}

.side-body { flex: 1; overflow-y: auto; padding: 10px 0; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.side-group {
    font-size: .72rem; font-weight: 600; color: var(--muted-light);
    padding: 16px 12px 6px; letter-spacing: .02em;
}

.side-link {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: var(--radius);
    color: var(--muted); text-decoration: none; font-size: .9rem;
    transition: background .12s, color .12s;
}
/* الحدُّ الشفّاف محجوزٌ سلفًا: لو أُضيف عند التنشيط وحده لأزاح النصَّ 3px */
.side-link { border-inline-start: 3px solid transparent; }
.side-link:hover { background: var(--stripe); color: var(--ink); }
.side-link.is-active {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
    border-inline-start-color: var(--accent);
}
@supports (color: color-mix(in srgb, red 10%, white)) {
    /* الصفُّ النشط يأخذ لونَ عائلته، فلا يصطدم أزرقُ الخلفية بذهبيّ الأيقونة */
    .side-link.is-active { background: color-mix(in srgb, var(--tint) 11%, var(--bg)); }
}
/*
 * لونُ الأيقونة: خمسُ عائلاتٍ لا لونٌ لكلّ بند.
 *
 * القائمةُ تُقرأ بالعين قبل أن تُقرأ بالحرف، فاللونُ يصنّف: بحريٌّ لعمل
 * المعلّم اليوميّ، وذهبيٌّ للمال، وأرجوانيٌّ للناس، ونيليٌّ لأدوات
 * الإدارة، وبنفسجيٌّ لنِبراس. ولو لُوِّن كلُّ بندٍ وحدَه لصار اللونُ ضجيجًا.
 *
 * والمربّعُ خلف الأيقونة بلا استدارة كسائر الصفحة، ويشتدّ عند المرور
 * والتنشيط — فيُرى الطريقُ الذي تسلكه اليدُ لا أن يُعلَن.
 */
.side-link { --tint: var(--accent); }
.side-link.t-work { --tint: #1f6f87; }
.side-link.t-money { --tint: #a8730f; }
.side-link.t-people { --tint: #7a3f6d; }
.side-link.t-admin { --tint: #3c4f8a; }
.side-link.t-ai { --tint: #5b3fd1; }

/*
 * الأيقونةُ رسمٌ بلا صندوق.
 *
 * كانت على مربّعٍ ملوّنٍ خفيف، فصار الشريطُ صفَّ مربّعاتٍ تتنافس على النظر
 * ويضيع بينها ما يُقصد. واللونُ باقٍ في الخطّ نفسِه — وهو يكفي للتصنيف —
 * والمربّعُ زينةٌ نُزعت.
 */
.side-link .icon {
    width: 21px; height: 21px; flex-shrink: 0;
    color: var(--tint);
    stroke-width: 1.7;
}
.side-link:hover .icon, .side-link.is-active .icon { stroke-width: 2; }

/* والنصُّ والحدُّ كذلك: البندُ النشط قطعةٌ واحدة في لون واحد */
.side-link.is-active { color: var(--tint); border-inline-start-color: var(--tint); }

/* ------------------------ بابا العمل اليوميّ ------------------------ */

/*
 * الدفترُ والجدولُ قبل كلّ شيء.
 *
 * ثلاثةَ عشرَ بندًا في الشريط، والمعلّمُ يجيء لأجل اثنين: دفترِ يومه
 * وجدولِ حصصه. فيُفصلان عن البقيّة بمساحةٍ وخطٍّ فاصل، ويكبُر خطُّهما
 * وتغلُظ أيقونتُهما — تمييزٌ بالبنية لا بلونٍ ثالثٍ يزيد الضجيج.
 */
.side-link.is-key {
    font-size: .96rem; font-weight: 600; color: var(--ink);
    padding-block: 12px;
}
.side-link.is-key .icon { width: 23px; height: 23px; stroke-width: 2; }
.side-link.is-key:hover { background: var(--stripe); }

/*
 * خطٌّ تحت آخرِ بندٍ بارزٍ في كلّ مجموعة.
 *
 * البارزون ثلاثة: الدفترُ والجدولُ متجاوران (عملُ اليوم)، والمتجرُ وحدَه
 * أسفلَ القائمة (بابُ الشراء). فالقاعدةُ تفصل المجموعتين كلتيهما، ولا
 * تحتاج استثناءً: `is-key` يليه ما ليس بـ`is-key` يعني نهايةَ مجموعة.
 */
.side-nav .is-key + :not(.is-key) { margin-block-start: 10px; padding-block-start: 12px; border-block-start: 1px solid var(--rule); }
.side-link.as-button {
    width: 100%; font: inherit; font-size: .9rem;
    background: none; border: 0; cursor: pointer; text-align: start;
}

.side-foot { border-top: 1px solid var(--rule); padding: 10px; flex-shrink: 0; }
.side-user { padding: 4px 12px 10px; display: flex; flex-direction: column; min-width: 0; }
.side-user-name { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.side-user-role { font-size: .76rem; color: var(--muted-light); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; gap: 12px;
    /* min-height لا height: الشريطُ ينمو إن كبُر خطُّ المتصفّح، ولا
       يقصّ ما فيه. وheight ثابتٌ كان يدفع محتواه فوق حدّه السفليّ */
    min-height: 58px; padding: 0 16px;
    border-bottom: 1px solid var(--rule); background: #fff;
    position: sticky; top: 0; z-index: 10;
}

/* العنوانُ وحدَه ينكمش: عنصرُ المرونة لا ينزل تحت عرض محتواه إلّا
   بـmin-width، فبدونها يدفع العنوانُ الطويل المحفظةَ خارج الشريط */
.topbar-title {
    font-weight: 600; font-size: .95rem;
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* اسمُ الداخل في الشريط: على الهاتف تكون القائمة مطويّةً أكثر الوقت،
   فلا يبقى في الصفحة ما يقول لمن هذا الحساب */
.topbar-who {
    display: inline-flex; align-items: baseline; gap: 8px;
    color: var(--muted-light); font-size: .82rem;
    flex: 0 1 auto; min-width: 0; max-width: 30%;
    overflow: hidden; white-space: nowrap;
}
.topbar-name { overflow: hidden; text-overflow: ellipsis; }

/* القسمُ في إطارٍ خفيف: صفةٌ ثابتة لا اسمٌ ثانٍ، والإطارُ يفصلهما بلا
   نقطةٍ أو شرطةٍ تُقرأ جزءًا من الاسم */
.topbar-grade {
    flex: 0 0 auto; font-size: .7rem; font-weight: 600; color: var(--muted);
    padding: 1px 7px; border: 1px solid var(--rule); background: var(--bg);
    text-decoration: none;
}
.topbar-grade.warn { color: var(--warn); border-color: var(--warn-dot); background: var(--warn-soft); }
.topbar-grade.warn:hover { border-color: var(--warn); }

/* المحفظة في الشريط: رقمان بخطٍّ بينهما، يُقرآن في لمحة ولا يُجمعان.
   ويُدفع إلى الطرف بـauto فيفصلهما عن العنوان فصلًا واضحًا. */
.bar-purse {
    margin-inline-start: auto;
    /* لا ينكمش ولا يمتدّ: رقمٌ مقصوصٌ أسوأ من لا رقم */
    flex: 0 0 auto; align-self: center;
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--rule); background: var(--bg);
    text-decoration: none; color: var(--ink); white-space: nowrap;
    line-height: 1;
}
.bar-purse:hover { border-color: var(--muted-light); }
.bar-purse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/*
 * الخانة: الرقمُ فوق ووحدتُه تحته، لا سطرًا واحدًا.
 *
 * كانا «0 دج | 0 نقطة» في سطرٍ واحد، فيُقرأ الأربعةُ سلسلةً واحدة ولا
 * يُعرف أيُّ رقمٍ لأيّة وحدة إلّا بتأمّل. والرقمُ فوق وحدتِه يُفرزان
 * فرزًا، ويبقى الفرزُ قائمًا على الهاتف حيث يضيق كلُّ شيء.
 *
 * والخطُّ السفليُّ الملوَّن هو المفتاح: ذهبيٌّ للدينار وبحريٌّ للنقطة،
 * كألوان العائلات في القائمة الجانبية. وهو يعمل حين لا تُقرأ الوحدةُ
 * أصلًا — والألوانُ وحدها لا يُعوَّل عليها، فالوحدةُ مكتوبةٌ معها دائمًا.
 */
.bar-purse-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; padding: 5px 12px 4px; min-inline-size: 62px;
    border-block-end: 2px solid var(--cell);
    background: var(--cell-soft);
    transition: background .12s;
}
.bar-purse-cell.is-dinar { --cell: #a8730f; --cell-soft: #fdf6e9; }
.bar-purse-cell.is-point { --cell: #1f6f87; --cell-soft: #eef5f7; }

/* الأرقامُ جدوليّة: الرصيدُ يتبدّل بعد كلّ شراء، وعرضٌ متغيّر يُقفز الشريط */
.bar-purse-value {
    font-size: .95rem; font-weight: 700; line-height: 1.15; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.bar-purse-unit {
    font-size: .63rem; line-height: 1; font-weight: 600;
    letter-spacing: .02em; color: var(--cell);
}

.bar-purse-sep { inline-size: 1px; background: var(--rule); }

@supports (color: color-mix(in srgb, red 10%, white)) {
    .bar-purse-cell.is-dinar { --cell-soft: color-mix(in srgb, #a8730f 8%, var(--bg)); }
    .bar-purse-cell.is-point { --cell-soft: color-mix(in srgb, #1f6f87 8%, var(--bg)); }
    .bar-purse:hover .bar-purse-cell { background: color-mix(in srgb, var(--cell) 16%, var(--bg)); }
}

/* على الهاتف: الرصيد أولى بالمكان من اسمِ صاحبه — الاسمُ في القائمة */
/* على الهاتف: الرصيد أولى بالمكان من اسمِ صاحبه — الاسمُ في القائمة.
   وحين يضيق أكثر تسقط كلمتا «دج» و«نقطة» ويبقى الرقمان مفصولين بالخطّ:
   رقمٌ بلا وحدةٍ يُفهم من موضعه، ورقمٌ مقصوصٌ لا يُفهم أبدًا */
@media (max-width: 560px) {
    /* الاسمُ يسقط والقسمُ يبقى: الاسمُ في القائمة، والقسمُ ليس في مكانٍ آخر */
    .topbar-name { display: none; }

    /*
     * الشريطُ على الهاتف كان يزدحم حتى يُقصّ طرفاه (ملاحظة 17/09).
     * فيسقط منه ما له مكانٌ آخر: عنوانُ الصفحة مكتوبٌ تحته مباشرةً في العنوان
     * الرئيسيّ، ونِبراس في القائمة الجانبيّة. ويبقى ما لا بديلَ له: القائمة
     * والمحفظةُ والشحنُ والجرسُ والقسم.
     */
    .topbar-title { display: none; }
    .topbar { gap: 6px; }
    .topbar-who { max-width: none; }
    .bar-purse-cell { padding: 5px 9px 4px; min-inline-size: 54px; }
    .bar-purse-value { font-size: .88rem; }
}

/*
 * وفي أضيق الشاشات تبقى الوحدةُ ويضيق ما حولها.
 *
 * كانت تسقط فيبقى رقمان عاريان لا يُفرَّق بينهما — وهي الحال التي كتبنا
 * الخانةَ كلَّها لأجلها. فالحشوُ هو ما يُقلَّم، لا المعنى.
 */
@media (max-width: 380px) {
    .bar-purse-cell { padding: 4px 7px 3px; min-inline-size: 46px; }
    .bar-purse-value { font-size: .82rem; }
    .bar-purse-unit { font-size: .58rem; }
}
.content { flex: 1; padding: 24px; min-width: 0; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius); flex-shrink: 0;
    color: var(--muted); cursor: pointer; border: 0; background: none;
}
.icon-btn:hover { background: var(--stripe); color: var(--ink); }
.icon-btn .icon { width: 21px; height: 21px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.drawer-backdrop { display: none; }
/* زرّ الإغلاق داخل القائمة لا معنى له إلا حين تكون درجًا يغطّي */
.drawer-close { display: none; }

/* --- الشاشة الواسعة: القائمة ظاهرة، والزرّ يطويها ليتّسع الجدول --- */
@media (min-width: 861px) {
    .drawer-toggle:checked ~ .side {
        margin-inline-start: -264px;
        /* لا تُقرأ ولا تُدرَك حين تكون مطويّة */
        visibility: hidden;
    }
}

/* --- الهاتف واللوح: القائمة درجٌ يغطّي، ويبدأ مغلقًا --- */
@media (max-width: 860px) {
    .drawer-close { display: inline-flex; }

    .side {
        position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
        align-self: stretch; top: auto;
        width: min(280px, 84vw);
        /* الجهة البادئة في مستندٍ يمينيّ هي اليمين، فالخروج نحو اليمين */
        transform: translateX(100%);
    }
    .drawer-toggle:checked ~ .side { transform: none; }
    .drawer-toggle:checked ~ .drawer-backdrop {
        display: block; position: fixed; inset: 0; z-index: 30;
        background: rgba(28, 27, 24, .45);
    }

    .content { padding: 16px 14px 48px; }
    .topbar { padding: 0 10px; gap: 8px; }

    /*
     * الدرجُ المطويّ يخرج بـtranslateX(100%) فيبقى محسوبًا في عرض الصفحة:
     * المتصفّح يمدّ مساحةَ التمرير 280 بكسل إلى اليمين، فتنزاح الصفحةُ كلُّها
     * ويظهر شريطُ تمريرٍ أفقيّ ويُقصّ ما على الحافّة. والقصُّ هنا لا يكسر
     * اللصوق (sticky) لأنّ الدرجَ في هذا العرض ثابتٌ (fixed) لا لاصق.
     */
    .shell { overflow-x: hidden; }
    /* والدرجُ ثابتٌ (fixed) فلا يقصّه أبٌ ذو overflow: يُقصّ من الجذر نفسِه */
    html, body { overflow-x: hidden; max-width: 100%; }
}
html[dir="ltr"] .side { transform: translateX(-100%); }
@media (min-width: 861px) { html[dir="ltr"] .side { transform: none; } }

.wrap { max-width: 900px; margin: 0 auto; }
.wrap.wide { max-width: 1240px; }

h1 { font-size: 1.5rem; margin: 0 0 4px; }
.subtitle { color: var(--muted); margin: 0 0 22px; }

.card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 18px;
}
/* عنوانٌ يفصله خطٌّ صريح: الفواصل هي ما ينظّم، لا الفراغ وحده */
.card h2 {
    font-size: .95rem; font-weight: 600; letter-spacing: .04em;
    margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.card .hint { color: var(--muted); font-size: .86rem; margin: 0 0 16px; }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; }
.field .desc { color: var(--muted-light); font-size: .8rem; margin: 0 0 6px; }
/*
 * هيئةُ كلّ ما يُكتب فيه أو يُختار منه، أينما وقع.
 *
 * كان التنسيق موزّعًا على .field و.toolbar و.plan-bar، فأيُّ عنصرٍ يُوضع
 * خارج هذه الثلاثة يخرج بمظهر المتصفّح: زاويةٌ مستديرة وإطارٌ لا يشبه
 * شيئًا في الصفحة. وهذا ما وقع لقائمة المعلّمين في ترويسة جدول الزمن.
 * فصار الإطارُ هنا مرّةً واحدة، ولا يبقى للأشرطة إلّا مقاسُها.
 */
.field input, .field select, .field textarea,
.toolbar input, .toolbar select,
.plan-bar input, .plan-bar select,
.plan-head select {
    font: inherit;
    padding: 9px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
}
.field input, .field select, .field textarea { width: 100%; }
/* قائمةُ الترويسة لا تبتلع عرض الصفحة ولا تُقصّ أطولَ اسمٍ فيها */
.plan-head select { max-width: 240px; }

.field input:focus, .field select:focus,
.toolbar input:focus, .toolbar select:focus,
.plan-bar input:focus, .plan-bar select:focus,
.plan-head select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field input.ltr { direction: ltr; text-align: left; font-family: "IBM Plex Mono", monospace; font-size: .86rem; }
.field .err { color: var(--bad); font-size: .82rem; margin-top: 4px; }

.pill {
    display: inline-block;
    font-size: .74rem;
    padding: 2px 9px;
    border-radius: var(--radius);
    margin-inline-start: 6px;
    vertical-align: middle;
}
.pill.set { background: var(--ok-soft); color: var(--ok); }
.pill.unset { background: var(--neutral-soft); color: var(--muted-light); }

/*
 * الزرّ مسطّحٌ بإطارٍ 2px. ونصُّه ملاصقٌ لحافّته لا موسَّط: زرٌّ أعرض من
 * نصّه يبدأ نصُّه عند حدّ الحشو، كما ينصّ ملفّ التصميم.
 */
.btn {
    font: inherit;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--radius);
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--bg);
    cursor: pointer;
    text-align: start;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
/* تركيز لوحة المفاتيح مُصمَّم لا متروكٌ لأزرق المتصفّح */
.btn:focus-visible, .flat-btn:focus-visible, .side-link:focus-visible,
.chip:focus-visible, .tab:focus-visible, .icon-btn:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn[disabled] { opacity: .55; cursor: default; }

/* شريطٌ على الحافّة البادئة كإنذار اللوحة: البلاغان لغةٌ واحدة */
.flash {
    padding: 11px 16px; border-radius: var(--radius); margin-bottom: 16px;
    font-size: .9rem; border-inline-start: 3px solid;
}
.flash.ok { background: var(--ok-soft); color: var(--ok); border-inline-start-color: var(--ok); }
.flash.bad { background: var(--bad-soft); color: var(--bad); border-inline-start-color: var(--bad); }
/* خبرٌ لا نجاحَ فيه ولا عطب: وضعُ العرض تبدّل، والمعلّم يحتاج أن يعرف */
.flash.notice { background: var(--accent-soft); color: var(--ink); border-inline-start-color: var(--accent); }
/* عملٌ ناقصٌ ينتظر يدًا: لا خطأَ وقع، لكنّ شيئًا لن يحدث حتّى يُضغط */
.flash.warn { background: var(--warn-soft); color: var(--ink); border-inline-start-color: var(--warn-dot); }

.actions { display: flex; align-items: center; gap: 10px; }
.muted { color: var(--muted); font-size: .85rem; }

/* --- صفحات الضيف --- */
body.guest { display: grid; place-items: center; min-height: 100vh; }
body.guest .main-col { display: contents; }
.guest-wrap { width: 100%; max-width: 400px; padding: 24px; }
.guest-card {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    padding: 30px 28px;
}
.guest-card h1 { font-size: 1.35rem; margin: 0 0 2px; }
/* السقفان هنا أوسع: صفحة الدخول لا شيء فيها غيره */
.guest-logo {
    display: block; margin: 0 auto 16px;
    width: auto; height: auto;
    max-width: 100%; max-height: 104px; object-fit: contain;
}
.guest-card .subtitle { margin-bottom: 22px; }
.check { display: flex; align-items: center; gap: 7px; font-size: .88rem; margin: 4px 0 18px; }
.check input { width: auto; }
.btn.wide { width: 100%; padding: 11px; }

/* --- الدفتر اليوميّ --- */
/* أوسع من .wrap: الجدول ستّة أعمدة، وحصرُه في 900px يخنق عمود الكفاءة */
/*
 * الدفترُ يأخذ عرضَ الشاشة كلَّه.
 *
 * كان محبوسًا في 1240 بكسل، فيبقى على شاشةٍ عريضةٍ فراغٌ عن يمينه ويساره
 * وجدولُ الحصص مضغوطٌ في الوسط — وهو جدولٌ عرضُه معناه: كلّما اتّسع
 * اتّسعت خانةُ «الوضعيات» التي فيها كلامُ الدرس.
 *
 * ويكفيه حشوُ .content (24 بكسل) فاصلًا عن الحافّة.
 */
.plan { max-width: 100%; }
/*
 * ترويسةُ الصفحة، وهي واحدةٌ في الموقع كلّه (اسمُها من الدفتر لأنه أوّل
 * من استعملها). العنوانُ يمينًا وأدواتُه يسارًا، ويفصلها عن المحتوى خطُّ
 * حبرٍ بسمك 2px — الفاصلُ هو ما يُنظّم، لا الفراغ.
 */
.plan-head, .dash-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 24px;
}
.plan-head h1, .dash-head h1 { font-size: 1.4rem; letter-spacing: -.01em; }
.plan-head .subtitle { margin-bottom: 0; font-size: .86rem; }
.plan-head .warn { color: var(--bad); }
/* أدواتُ الترويسة تُحاذي خطَّها السفليّ لا أعلى العنوان */
.plan-head .actions, .plan-head > select, .plan-head > .btn { align-self: flex-end; }

.plan-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; margin-bottom: 18px;
    background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
}
.plan-bar input, .plan-bar select { padding: 7px 10px; }
.btn.sm { padding: 6px 12px; font-size: .86rem; }

/* «عرضٌ فقط»: دفترُ مستوًى يتصفّحه المدير — الخاناتُ لا تُكتب فيها */
.plan-readonly { font-size: .86rem; color: var(--muted); }
.plan-readonly a { color: var(--brand); }

/* المسحُ الشامل: فعلٌ نادرٌ لا رجعةَ فيه، فيُفصَل بخطٍّ ويُلوَّن بلون
   التحذير — ظاهرٌ بلا أن يُزاحم أفعالَ اليوم المتكرّرة. */
.plan-clear-wrap {
    display: inline-flex; align-items: center;
    padding-inline-start: 10px; border-inline-start: 1px solid var(--rule);
}
.btn.plan-clear { color: var(--bad); border-color: var(--bad); }
.btn.plan-clear:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

.shift { margin-bottom: 26px; }
.shift h2 { font-size: 1.05rem; margin: 0 0 8px; }
.shift .range {
    font-family: "IBM Plex Mono", monospace; font-size: .82rem;
    color: var(--accent); font-weight: 400; margin-inline-start: 8px; direction: ltr;
    display: inline-block;
}

/* الجدول لا يقلّص الصفحة: يمرَّر داخل غلافه وحده */
.scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.plan-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: .88rem; }
.plan-table th {
    background: var(--ink); color: var(--bg);
    font-size: .82rem; font-weight: 600; text-align: right; padding: 9px 10px;
}
/* السطرُ المحرَّر يُعلَّم على حافّته البادئة كسائر ما يُميَّز في الموقع.
   والخلفيةُ لا تصلح هنا: الصفوفُ مخطَّطةٌ سلفًا فتضيع العلامة في الزوجيّ */
.plan-table td { border-bottom: 1px solid var(--rule); padding: 4px 6px; vertical-align: top; }
.plan-table tr.edited > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
html[dir="ltr"] .plan-table tr.edited > td:first-child { box-shadow: inset -3px 0 0 var(--accent); }
.plan-table tbody tr:nth-child(even) { background: var(--stripe); }
.plan-table tbody tr:last-child td { border-bottom: 0; }

.c-time { width: 9%; white-space: nowrap; padding-top: 10px !important; }
.c-seg  { width: 11%; }
.c-dom  { width: 14%; }
.c-act  { width: 11%; }
.c-cnt  { width: 17%; }
.c-goal { width: 23%; }
.c-min  { width: 6%; }
/* العمود اتّسع حين صار فيه فعلان لا علامةٌ واحدة */
.c-do   { width: 9%; text-align: center; padding-top: 9px !important; }

.c-time .time { display: block; font-family: "IBM Plex Mono", monospace; font-size: .8rem; direction: ltr; }

/*
 * الهاتفُ قائمًا: كلُّ حصّةٍ بطاقةٌ لا سطرٌ في جدولٍ عرضُه 900 بكسل.
 *
 * الجدولُ ثمانيةُ أعمدةٍ فيها حقولٌ تُكتب — والكتابةُ في خانةٍ عرضُها
 * ستّون بكسلًا بينما الصفحةُ تُدفع أفقيًّا تحت الإصبع عملٌ لا يُطاق.
 * والأعمدةُ تصير أسطرًا، كلُّ سطرٍ باسمه إذ سقطت الترويسة.
 */
@media (max-width: 720px) {
    .scroll { overflow-x: visible; border: 0; background: none; }
    .plan-table { display: block; min-width: 0; }
    .plan-table thead { display: none; }
    .plan-table tbody { display: grid; gap: 12px; }

    /*
     * حقلان في السطر لا حقلٌ واحد.
     *
     * ثمانيةُ حقولٍ مكدَّسةٍ واحدًا تحت واحدٍ تجعل الحصّةَ الواحدةَ شاشةً
     * كاملةً، فستُّ حصصٍ ستُّ شاشاتٍ يُبحث فيها بالإبهام. والقصيرُ منها
     * (المقطع، الميدان، النشاط، المدة) يسع نصفَ السطر، والطويلُ وحدَه
     * (المحتوى، الكفاءة) يأخذ السطرَ كلَّه.
     */
    .plan-table tbody tr,
    .plan-table tbody tr:nth-child(even) {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff;
        border: 1px solid var(--rule); border-radius: var(--radius);
        padding: 0 12px 10px;
    }
    .c-time, .c-cnt, .c-goal, .c-do { grid-column: 1 / -1; }

    /* والقصيرُ يُجاور القصيرَ: المدّةُ تصعد إلى جانب النشاط فلا يبقى
       نصفُ سطرٍ فارغًا بينهما */
    .c-seg { order: 1; } .c-dom { order: 2; }
    .c-act { order: 3; } .c-min { order: 4; }
    .c-cnt { order: 5; } .c-goal { order: 6; } .c-do { order: 7; }
    .c-time { order: 0; }
    .plan-table tbody tr.edited { box-shadow: inset 3px 0 0 var(--accent); }
    .plan-table tr.edited > td:first-child { box-shadow: none; }

    .plan-table td {
        display: block; width: auto; padding: 8px 0 0; border-bottom: 0;
    }
    .plan-table tbody tr:last-child td { border-bottom: 0; }

    /* الوقتُ ترويسةُ البطاقة: هو ما يبحث عنه المعلّمُ أوّلًا */
    .c-time {
        display: flex !important; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
        margin-inline: -12px; padding: 9px 12px !important;
        background: var(--stripe); border-block-end: 1px solid var(--rule);
    }
    .c-time .time { display: inline; }

    /* اسمُ الحصّة يلفّ ولا يُقصّ: «تربية إسلامية» كانت تخرج من حرفها الأوّل */
    .c-time .slot {
        margin-top: 0; flex-basis: 100%;
        font-weight: 600; color: var(--ink);
    }

    /* اسمُ الخانة فوقها، بحجم اسمِ الحقل لا بحجم النصّ */
    .plan-table td[data-label]::before {
        content: attr(data-label);
        display: block; margin-block-end: 3px;
        font-size: .74rem; font-weight: 600; color: var(--muted);
    }

    /*
     * الحقلُ يُرى فارغًا.
     *
     * على الشاشة الكبيرة تبدو الخانةُ نصًّا حتى تُلمس، وحدودُ الجدول تدلّ
     * عليها. وفي البطاقة لا جدولَ ولا مرورَ فأرةٍ يُظهر الحدَّ — فحقلٌ
     * فارغٌ بلا حدٍّ بياضٌ لا يُعرف أنّه يُكتب فيه.
     */
    .plan-table .cell {
        min-block-size: 44px;
        border-color: var(--rule); background: #fff;
    }
    .c-min .cell { inline-size: 100%; max-inline-size: none; text-align: start; }
    .act-select { max-inline-size: 100%; }
    .act-nav { margin-block-end: 6px; }

    /* خانةُ العلامات: تُخفى إن خلت، ولا تُترك اسمًا بلا شيءٍ تحته */
    .plan-table td.c-do:not(:has(.marks > *)) { display: none; }

    /* والاسمُ والعلاماتُ في سطرٍ واحد: سطرٌ لكلمةٍ وسطرٌ لنقطةٍ إسرافٌ.
       وأزرارُ المذكّرة تلزم الطرفَ الآخرَ من السطر نفسِه */
    .plan-table td.c-do {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        margin-block-start: 4px; padding-block-start: 10px;
        border-block-start: 1px solid var(--rule);
    }
    .plan-table td.c-do::before { margin-block-end: 0; }
    .plan-table td.c-do .marks { justify-content: flex-start; margin: 0; }
    .plan-table td.c-do .doc-actions {
        margin-inline-start: auto; display: flex; gap: 6px; align-items: center;
    }
}
.c-time .time:last-of-type { color: var(--muted-light); }
.c-time .slot { display: block; font-size: .76rem; color: var(--muted); margin-top: 3px; }

/* الخلية تبدو نصًّا حتى تُلمس: الشاشة يجب أن تشبه الورقة */
.cell {
    width: 100%; font: inherit; font-size: .88rem; line-height: 1.5;
    padding: 5px 6px; border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--ink); resize: vertical;
    min-height: 2.4em; field-sizing: content;
}
input.cell { min-height: 0; text-align: center; font-family: "IBM Plex Mono", monospace; }
.cell:hover { border-color: var(--rule); background: #fff; }
.cell:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; border-color: transparent; }
/* ما كتبه الأستاذ بيده يبقى مميّزًا: الدفتر يوقّعه المدير */
.cell.own { border-inline-start: 3px solid var(--accent); background: #fff; }

.marks { display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; }
.dot { display: inline-block; width: 9px; height: 9px; }
.dot.high { background: var(--ok); }
.dot.medium { background: var(--warn-dot); }
.dot.low { background: var(--bad); }
.tag {
    font-size: .68rem; padding: 1px 5px; border-radius: var(--radius);
    background: var(--neutral-soft); color: var(--muted);
}
.tag.alt { background: var(--accent-soft); color: var(--accent); }
.undo {
    background: none; border: 0; cursor: pointer; color: var(--muted-light);
    font-size: 1rem; padding: 2px 4px; line-height: 1;
}
.undo:hover { color: var(--accent); }

/* --- صندوقُ اختيار المذكرة في خانة النشاط --- */
.tag.pick { background: var(--accent); color: var(--bg); }

/* سطرٌ صغير فوق نصّ النشاط: سابق · قائمةٌ بالمختارة · تالٍ */
.act-nav { display: flex; align-items: stretch; gap: 2px; margin-bottom: 4px; }
.act-step {
    flex-shrink: 0; font: inherit; font-size: .9rem; line-height: 1; width: 20px;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: #fff; color: var(--muted); cursor: pointer; padding: 0;
}
.act-step:hover { border-color: var(--ink); color: var(--ink); background: var(--accent-soft); }
.act-select {
    flex: 1; min-width: 0; font: inherit; font-size: .72rem; padding: 2px 4px;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: #fff; color: var(--ink); cursor: pointer;
}
.act-select:hover { border-color: var(--ink); }

/* --- تحميل PDF مجّانًا في صفحة المذكرة --- */
.free-left { font-size: .72rem; opacity: .7; margin-inline-start: 4px; }
.btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.card.empty { color: var(--muted); text-align: center; padding: 30px; }
.legend { color: var(--muted-light); font-size: .8rem; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.legend .dot { margin-inline-start: 6px; }

/* --- المحفظة --- */
/* auto-fill لا auto-fit: بطاقةٌ واحدة (صفحةُ السحوبات) كانت تُمطّ على
   عرض الشاشة كلِّه فتصير لافتةً لا بطاقة */
.balances {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px; margin-bottom: 18px;
}
.balance {
    background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 2px;
    border-top: 3px solid var(--accent);
}
.balance.earn { border-top-color: var(--ok); }
.balance-label { font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); }
.balance-value {
    font-family: "IBM Plex Mono", monospace; font-size: 1.75rem; font-weight: 600;
    direction: ltr; unicode-bidi: isolate; text-align: start; font-variant-numeric: tabular-nums;
}
.balance-value small { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: .9rem; font-weight: 400; color: var(--muted); }
.balance-note { font-size: .76rem; color: var(--muted-light); }

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
    font: inherit; font-size: .86rem; padding: 7px 15px;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: #fff; color: var(--ink); cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }

.topup-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.topup-form .field { flex: 1; min-width: 180px; margin-bottom: 0; }

.ledger { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .87rem; }
.ledger th {
    text-align: start; font-size: .74rem; font-weight: 600; color: var(--muted);
    letter-spacing: .04em; padding: 8px 10px; border-bottom: 2px solid var(--ink);
}
.ledger td { padding: 9px 10px; border-bottom: 1px solid var(--rule); }
.ledger tr:last-child td { border-bottom: 0; }
.ltr-cell {
    direction: ltr; unicode-bidi: isolate; text-align: right;
    font-family: "IBM Plex Mono", monospace; font-size: .82rem; font-variant-numeric: tabular-nums;
}

.state, .pill, .tag, .badge, .doc {
    letter-spacing: .02em; font-weight: 600;
}
.state { font-size: .74rem; padding: 3px 9px; border-radius: var(--radius); display: inline-block; }
.state.completed { background: var(--ok-soft); color: var(--ok); }
.state.pending   { background: var(--warn-soft); color: var(--warn); }
/* المسار الرماديّ للأشرطة، كما في ملفّ التصميم */
.track { background: var(--track); }
.state.failed    { background: var(--bad-soft); color: var(--bad); }

/* --- الحساب --- */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.facts dt { color: var(--muted-light); font-size: .84rem; }
.facts dd { margin: 0; font-size: .9rem; }

/* رابط المذكرة في سطر الدفتر */
/*
 * فِعلا المذكرة. «عرض» مفرَّغٌ لأنّه مجّانيّ ولا يغيّر شيئًا، و«تحميل»
 * ممتلئٌ بالحبر لأنّه الفعل الذي يترتّب عليه شيء — والشراءُ يلبس اللونَ
 * المميّز ويحمل ثمنَه مكتوبًا: لا يُنقَر زرٌّ يأخذ مالًا دون أن يقول كم.
 */
/* ثلاثةُ أزرارٍ في عمودٍ تُطيل السطر: تُلفّ في صفٍّ يضيق عند الحاجة */
.doc-actions { display: flex; flex-wrap: wrap; gap: 3px; align-items: stretch; margin-top: 4px; }
.doc {
    font: inherit; font-size: .68rem; line-height: 1.6;
    padding: 2px 6px; border-radius: var(--radius); border: 1px solid var(--ink);
    background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600;
    cursor: pointer; text-align: center; white-space: nowrap;
}
.doc:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.doc:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.doc[disabled] { opacity: .55; cursor: default; }

.doc.ghost { background: transparent; color: var(--ink); }
.doc.ghost:hover { background: var(--ink); color: var(--bg); }

.doc.buy { background: var(--accent); border-color: var(--accent); }
.doc.buy:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* رصيدٌ لا يكفي: لا زرٌّ معطَّل بلا مخرج، بل طريقٌ إلى الشحن */
.doc.short { background: transparent; color: var(--bad); border-color: var(--bad); }
.doc.short:hover { background: var(--bad); color: var(--bg); border-color: var(--bad); }

/* --- صفحات الإدارة --- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar input, .toolbar select { font-size: .88rem; padding: 7px 11px; }
.toolbar input[type=search] { flex: 1; min-width: 200px; }
.toolbar .muted { margin-inline-start: auto; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.ledger.lessons td { font-size: .84rem; vertical-align: top; }
.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager { margin-top: 14px; }
.pager nav { display: flex; gap: 6px; align-items: center; font-size: .85rem; }
.pager svg { width: 16px; height: 16px; }

.link-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.badge {
    background: var(--bad); color: #fff; font-size: .7rem; font-weight: 700;
    border-radius: var(--radius); padding: 1px 7px; line-height: 1.5;
}

/* النموذج المنبثق: التحرير في الجدول يخفي ما يُغيَّر */
/**
 * hidden يعلو على كلّ إظهار.
 *
 * قاعدةُ المتصفّح [hidden]{display:none} من ورقته هو، وأيُّ قاعدةٍ لنا
 * تُعطي display تغلبها مهما ضعفت — فكانت .modal-back{display:grid} تُظهر
 * الطبقةَ المخفيّة فوق الصفحة كلَّها، فتحجب ما تحتها وتبتلع كلّ نقرة.
 */
[hidden] { display: none !important; }

.modal-back {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(28, 27, 24, .5);
    display: grid; place-items: center; padding: 20px;
    overflow-y: auto;
}
.modal {
    background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
    padding: 26px 28px;
    width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
}
/*
 * منبثقُ خبر الحفظ في صفحة الحساب.
 *
 * ولِمَ منبثقٌ لا شريطٌ في الأعلى: الصفحةُ طويلة، والمعلّمُ يحفظ من
 * أسفلها، فيُكتب الخبرُ فوق الشاشة ولا يُرى. وقد قيل ذلك ثلاث مرّات.
 */
.ac-said { max-width: 420px; text-align: center; }
.ac-said h2 { margin: 0 0 10px; }
.ac-said-body { margin: 0 0 20px; line-height: 1.9; font-size: .98rem; }
.ac-said .actions { justify-content: center; }
.ac-said .btn { min-inline-size: 140px; }

/*
 * إغلاقُ الحساب: بابٌ يوجد ولا يُزيَّن.
 *
 * فمن أراد الانصراف له أن ينصرف بلا أن يستأذن أحدًا — وذلك من احترامه.
 * لكنّه ليس فعلًا نُغري به: فالبطاقةُ باهتةٌ في آخر الصفحة، وزرُّها
 * مسطَّحٌ لا ممتلئ، ولا يحمر إلّا في المنبثق حين يكون القرارُ قد اتُّخذ.
 */
.ac-close { border-color: var(--rule); opacity: .92; }
.ac-close h2 { font-size: .95rem; }
.ac-close-go { color: var(--bad, #b42318); }
.ac-close-go:hover { text-decoration: underline; }

.ac-bye { max-width: 520px; }
.ac-bye .hint { margin: 0 0 16px; line-height: 1.9; }
.ac-bye-q { font-size: .95rem; margin: 0 0 10px; }
.ac-bye-q .muted { font-weight: 400; font-size: .82rem; }
.ac-bye-reasons { display: grid; gap: 6px; margin-bottom: 12px; }
.ac-bye-r { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .92rem; }
.ac-bye-r input { inline-size: auto; margin: 0; }
.ac-bye textarea { inline-size: 100%; }
.ac-bye-acts { justify-content: flex-end; margin-block-start: 16px; }
.ac-bye-del { background: var(--bad, #b42318); border-color: var(--bad, #b42318); color: #fff; }
.ac-bye-del:hover { filter: brightness(1.1); }

/* ودعوةُ العودة في صفحة الدخول: خبرٌ لا إنذار */
.closed-note { text-align: start; }
.closed-note p { margin: 6px 0 12px; }
.closed-note .actions { justify-content: flex-start; gap: 8px; }

/* عنوانُ المنبثق بلا خطٍّ تحته: الإطارُ 2px يفصله عمّا وراءه أصلًا */
.modal h2 { margin: 0 0 4px; font-size: 1.1rem; border: 0; padding: 0; letter-spacing: 0; }
.modal .hint { color: var(--muted); font-size: .85rem; margin: 0 0 18px; }

/*
 * تنبيهُ الشاشة الصغيرة.
 *
 * مغلقٌ في الأصل، ولا يُفتح إلّا بشرطين معًا: شاشةٌ ضيّقة (الوسيط)،
 * وذاكرةٌ لم يُسجَّل فيها إغلاقُه (النصّ). فالحاسوبُ لا يراه أبدًا ولو
 * تعطّل النصّ، ومن أغلقه لا يراه ولو ضاقت شاشتُه.
 */
.wide-tip { display: none; }

@media (max-width: 620px) {
    .wide-tip.is-on {
        display: grid; place-items: center;
        position: fixed; inset: 0; z-index: 60;
        background: rgba(28, 27, 24, .55);
        padding: 20px;
    }

    .wide-tip-box {
        background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
        padding: 22px 20px; max-inline-size: 380px; text-align: center;
    }

    .wide-tip-ico { font-size: 2rem; display: block; margin-block-end: 10px; }

    .wide-tip-box h2 {
        margin: 0 0 8px; font-size: 1.02rem; line-height: 1.6;
        border: 0; padding: 0; letter-spacing: 0;
    }

    .wide-tip-sub { margin: 0 0 18px; color: var(--muted); font-size: .86rem; line-height: 1.7; }

    .wide-tip-box .btn { inline-size: 100%; min-block-size: 46px; }
}

/*
 * وثائقُ التوزيع فوق الجدول: ثلاثُ بطاقاتٍ متساويةٍ، لكلٍّ لونُها.
 *
 * كانت الأزرارُ والحقولُ تقف حيث انتهى نصُّ كلِّ بطاقةٍ، فتتفاوت مواضعُها
 * ويبدو الصفُّ مائلًا. فصارت البطاقةُ عمودًا يُدفع فيه صفُّ الفعل إلى
 * القاع (margin-block-start: auto)، فتستوي الأزرارُ على خطٍّ واحدٍ مهما
 * طال نصٌّ أو قصر.
 *
 * واللونُ يفرّق بينها: شريطٌ علويٌّ وأرضيّةٌ خفيفة. ولا استدارةَ — الملفُّ
 * يقول: «لا تُدوَّر زاويةٌ في أيّ موضع».
 */
.tt-docs { margin-bottom: 16px; }
.tt-docs h2 { font-size: 1rem; margin: 0 0 14px; }

.tt-docs-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; align-items: stretch;
}

.tt-doc {
    display: flex; flex-direction: column;
    padding: 14px; border: 1px solid var(--rule);
    border-block-start: 3px solid var(--accent);
    background: var(--accent-faint);
}
.tt-doc h3 { font-size: .92rem; margin: 0 0 4px; color: var(--ink); }
.tt-doc .desc { margin: 0 0 12px; }

/* صفُّ الفعل في القاع: هو ما يستوي بين البطاقات */
.tt-doc-actions { margin-block-start: auto; display: grid; gap: 8px; }
.tt-doc-actions .btn, .tt-doc-actions select, .tt-doc-actions input {
    min-block-size: 42px; inline-size: 100%;
}
.tt-doc-actions .btn {
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; margin: 0;
}

/* الشهريُّ: قائمةٌ ثمّ زرّ، وهما سطرٌ واحدٌ على السعة */
.tt-doc-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.tt-doc-form select { min-inline-size: 0; }
.tt-doc-form .btn { inline-size: auto; padding-inline: 18px; }

/* حقلا المدرسة والولاية: متساويان جنبًا إلى جنب */
.tt-doc-ident { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tt-doc-ident input { min-inline-size: 0; }

/* الألوانُ الثلاثة: كلُّ وثيقةٍ تُعرف من بعيد */
.tt-doc.is-yearly { border-block-start-color: var(--accent); background: var(--accent-faint); }
.tt-doc.is-yearly .btn { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tt-doc.is-yearly .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.tt-doc.is-cover { border-block-start-color: var(--ok); background: var(--ok-soft); }
.tt-doc.is-cover .btn { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.tt-doc.is-cover .btn:hover { filter: brightness(1.12); }

.tt-doc.is-monthly { border-block-start-color: var(--warn); background: var(--warn-soft); }
.tt-doc.is-monthly .btn { background: var(--warn); border-color: var(--warn); color: var(--bg); }
.tt-doc.is-monthly .btn:hover { filter: brightness(1.12); }

/*
 * الزرُّ الثانوي في البطاقة مفرَّغ.
 *
 * وانتقاؤه مطوَّلٌ عمدًا: `.tt-doc.is-monthly .btn` أقوى من `.btn.ghost`،
 * فلولاه لخرج «نزّل الغلاف وحدَه» ممتلئًا بلون البطاقة كالزرّ الأوّل،
 * فلا يُعرف أيُّهما الفعلُ المقصود.
 */
.tt-doc .btn.ghost {
    background: transparent; color: var(--ink);
    border-color: var(--rule);
}
.tt-doc.is-yearly .btn.ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tt-doc.is-cover .btn.ghost:hover { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.tt-doc.is-monthly .btn.ghost:hover { background: var(--warn); border-color: var(--warn); color: var(--bg); }

@media (max-width: 900px) {
    .tt-docs-row { grid-template-columns: 1fr; }
    .tt-doc-actions .btn, .tt-doc-actions select, .tt-doc-actions input { min-block-size: 44px; }
}

/*
 * ملفّا السنة كاملةً — البطاقتان المدفوعتان.
 *
 * مفصولتان عن «وثائق التوزيع» في بطاقةٍ أخرى لا مضمومتان إليها: تلك
 * مجّانيّةٌ وهاتان بثمن، وصفٌّ واحدٌ يخلط المجّانيَّ بالمدفوع يجعل
 * المعلّمَ يضغط ما لم يقصد. والثمنُ أبرزُ سطرٍ في البطاقة بعد عنوانها.
 */
.tt-year { margin-bottom: 16px; }
.tt-year h2 { font-size: 1rem; margin: 0 0 6px; }
.tt-year-head .desc { margin: 0 0 14px; }

.tt-year-row {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px; align-items: stretch;
}

.tt-year-card {
    display: flex; flex-direction: column;
    padding: 14px; border: 1px solid var(--rule);
    border-block-start: 3px solid var(--ink);
    background: var(--card, transparent);
}
.tt-year-card h3 { font-size: .92rem; margin: 0 0 4px; color: var(--ink); }
.tt-year-card .desc { margin: 0 0 10px; }

/* الثمنُ يُدفع إلى القاع مع صفّ الفعل، فتستوي البطاقتان مهما طال نصّ */
.tt-year-price { margin: auto 0 10px; font-size: 1.05rem; }
.tt-year-price .num { font-size: 1.35rem; }
.tt-year-price .muted { font-size: .82rem; margin-inline-start: 6px; }

.tt-year-card .tt-doc-actions { margin-block-start: 0; display: grid; gap: 8px; }
.tt-year-card .tt-doc-actions .btn { min-block-size: 42px; inline-size: 100%;
    display: inline-flex; align-items: center; justify-content: center; margin: 0; }

/* الجاهزُ يُعرف من بعيد: اشتُري وخرج، ولم يبقَ إلّا تنزيله */
.tt-year-card.is-ready { border-block-start-color: var(--ok); background: var(--ok-soft); }
.tt-year-card.is-ready .tt-doc-actions .btn {
    background: var(--ok); border-color: var(--ok); color: var(--bg);
}
.tt-year-card.is-ready .tt-doc-actions .btn:hover { filter: brightness(1.12); }

@media (max-width: 900px) {
    .tt-year-row { grid-template-columns: 1fr; }
    .tt-year-card .tt-doc-actions .btn { min-block-size: 44px; }
}

/* --- جدول استعمال الزمن --- */
/* أعمدةٌ أيّام لا صفوفٌ زمنية: الحصص تختلف مدّةً وبدايةً من يومٍ إلى يوم */
/* جدول استعمال الزمن: أيامٌ في الصفوف وأوقاتٌ في الأعمدة.
   جدولٌ حقيقيّ لا شبكةُ divs — الصفُّ صفٌّ والعمودُ عمود، ويقرؤه قارئُ
   الشاشة كما يقرأ المعلّمُ المطبوعَ الذي بين يديه. وشكلُه شكلُ الجدول
   الرسميّ في v1: توسيطٌ، وخانةٌ فارغةٌ مخطّطة، وصفوفٌ متناوبة. */
.tt-scroll { overflow-x: auto; border: 1px solid var(--rule); background: #fff; }

.tt { border-collapse: collapse; inline-size: 100%; min-inline-size: 860px; font-size: .86rem; }

.tt th, .tt td {
    border: 1px solid var(--rule);
    padding: 8px 6px; text-align: center; vertical-align: middle; line-height: 1.35;
}

.tt-head, thead .tt-daycol {
    background: var(--ink); color: var(--bg);
    font-weight: 600; font-size: .72rem; white-space: nowrap;
    font-family: "IBM Plex Mono", monospace; direction: ltr;
}
thead .tt-daycol { font-family: inherit; direction: rtl; font-size: .82rem; }

tbody .tt-daycol {
    background: var(--stripe); color: var(--ink);
    font-weight: 700; white-space: nowrap; font-size: .84rem;
}

/* الاستراحةُ عمودٌ رأسيّ يمتدّ على الأيام كلِّها: هي حدٌّ في اليوم لا
   خانةٌ فيه، فتُكتب مرّةً واحدة عموديًّا */
.tt-rest {
    inline-size: 32px; padding: 6px 2px;
    background: var(--warn-soft); color: var(--warn);
    font-size: .68rem; font-weight: 600;
    writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
}
.tt-rest-time { font-family: "IBM Plex Mono", monospace; font-weight: 500; margin-block-start: 6px; }

/* صفوفٌ متناوبة: خمسةُ أيامٍ بعشرة أعمدة، والعينُ تتيه في السطر بلا فرقٍ يمسكه */
.tt tbody tr:nth-child(even) td { background: var(--stripe); }

.tt-cell { border-block-start: 3px solid transparent; }
.tt tbody tr:nth-child(even) .tt-cell.mine, .tt-cell.mine {
    background: var(--accent-faint); border-block-start-color: var(--accent);
}

.tt-subject { display: block; font-size: .82rem; color: var(--muted); }
.tt-cell.mine .tt-subject { color: var(--ink); font-weight: 600; }

/* ساعاتُ الجدول بيد الأستاذ: قلمٌ في الخانة، وإزاحةٌ في عمود اليوم،
   وتنبيهٌ تحت اليوم. كلُّها باهتةٌ حتّى تُلمَس — الجدولُ يُقرأ أوّلًا. */
/* القلمُ ظاهرٌ دائمًا لا عند مرور الفأر: أكثرُ الأساتذة على الهاتف، ولا
   مرورَ فيه — وما لا يُرى لا يُنقَر. */
.tt-edit {
    display: inline-block; margin-inline-start: 4px; vertical-align: middle;
    border: 1px solid var(--rule); background: #fff; cursor: pointer;
    padding: 0 5px; line-height: 1.4; font-size: .78rem;
    color: var(--brand); border-radius: 5px;
}
.tt-cell:hover .tt-edit, .tt-edit:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 2px var(--accent-faint); }
.tt-edit.static { position: static; cursor: default; }
.tt-cell.tt-picked { outline: 2px solid var(--brand); outline-offset: -2px; }

.tt-shift { display: inline-flex; gap: 2px; margin-inline-start: 6px; }
.tt-shift button {
    border: 1px solid var(--rule); background: #fff; border-radius: 4px; cursor: pointer;
    font-size: .66rem; padding: 1px 4px; color: var(--muted);
    font-family: "IBM Plex Mono", monospace;
}
.tt-shift button:hover { color: var(--brand); border-color: var(--brand); }

.tt-warn-row td { background: #fff7ed; padding: 4px 8px; }
.tt-warn { display: inline-block; margin-inline-end: 12px; font-size: .78rem; color: #92400e; }

/* منبثقُ الحصّة: النشاطُ والساعةُ في لوحةٍ واحدةٍ فوق الصفحة، لا سطرًا
   في أسفلها لا يراه صاحبُ الهاتف. */
.tt-timebox { max-width: 380px; }
.tt-timebox .tt-field { display: block; margin-block-end: 12px; font-size: .88rem; color: var(--muted); }
.tt-timebox .tt-field select, .tt-timebox .tt-field input[type="time"] {
    display: block; inline-size: 100%; margin-block-start: 4px; padding: 8px 10px;
}
.tt-timebox .tt-field input[type="time"] { font-family: "IBM Plex Mono", monospace; }
.tt-times { display: flex; gap: 12px; }
.tt-times .tt-field { flex: 1; }
.tt-modal-acts { display: flex; gap: 10px; margin-block-start: 6px; }

.tt-time {
    display: block; margin-block-start: 4px;
    font-family: "IBM Plex Mono", monospace; font-size: .68rem;
    color: var(--accent); font-weight: 600;
    direction: ltr; unicode-bidi: isolate;
}
.tt-mins { color: var(--muted-light); font-weight: 500; }

/* الفارغُ مخطَّطٌ لا أبيض: أبيضُ يُقرأ خانةً لم تُملأ بعد، والمخطَّطُ
   يُقرأ وقتًا لا حصّةَ فيه — وهو المقصود */
.tt-empty, .tt tbody tr:nth-child(even) .tt-empty {
    background: repeating-linear-gradient(
        135deg, var(--stripe), var(--stripe) 6px, var(--track) 6px, var(--track) 12px);
}

.tt-none { padding: 14px; margin: 0; color: var(--muted-light); font-size: .85rem; }

/*
 * الهاتفُ قائمًا: الجدولُ ينفكّ إلى أيّامٍ مكدَّسة.
 *
 * عشرةُ أعمدةٍ في عرض 390 بكسل تعني جدولًا عرضُه ضعفا الشاشة، فيُدفع
 * أفقيًّا بإصبعٍ ليُقرأ سطرٌ واحد — والمعلّمُ إنّما يفتحه بين حصّتين
 * ليرى «ماذا عندي الآن». فيصير كلُّ يومٍ بطاقةً وحصصُه تحتَه سطرًا سطرًا.
 *
 * ولا نسخةَ ثانيةً من الشيفرة: هو الجدولُ نفسُه بخلاياه نفسِها — تبديلُ
 * المادّة يعمل فيه كما يعمل في الشاشة الكبيرة، لأنّه ليس غيرَه.
 */
@media (max-width: 640px) {
    .tt { font-size: .75rem; }
    .tt th, .tt td { padding: 6px 3px; }
    .tt-time { font-size: .62rem; }
}

@media (max-width: 620px) {
    .tt-scroll { overflow-x: visible; border: 0; background: none; }
    .tt { display: block; min-inline-size: 0; border-collapse: separate; }

    /* رؤوسُ الأوقات تسقط: كلُّ حصّةٍ تحمل وقتَها مكتوبًا فيها */
    .tt thead { display: none; }

    .tt tbody { display: grid; gap: 12px; }
    .tt tbody tr {
        display: block; background: #fff;
        border: 1px solid var(--rule); border-radius: var(--radius);
        overflow: hidden;
    }
    .tt tbody tr:nth-child(even) td { background: #fff; }

    /* اسمُ اليوم ترويسةُ البطاقة */
    .tt tbody .tt-daycol {
        display: block; inline-size: auto; text-align: start;
        background: var(--ink); color: var(--bg);
        font-size: .9rem; padding: 9px 12px; border: 0;
    }

    /* الفراغُ والاستراحةُ لا يُكدَّسان: بياضٌ لا يُقرأ ويطيل البطاقة.
       والانتقاءُ مطوَّلٌ عمدًا ليغلب `.tt tbody td` التاليةَ له — وإلّا
       بقيت الخانةُ الفارغةُ مخطَّطةً في البطاقة بلا معنًى */
    .tt tbody td.tt-empty, .tt tbody td.tt-rest { display: none; }

    .tt tbody td {
        display: flex; align-items: center; gap: 10px;
        inline-size: auto; text-align: start;
        border: 0; border-block-start: 1px solid var(--rule);
        padding: 9px 12px;
    }

    /* المادّةُ تأخذ ما بقي، والوقتُ يلزم طرفَه */
    .tt-cell > .tt-pick, .tt-cell > .tt-subject:first-child { flex: 1; min-inline-size: 0; }
    .tt-cell .tt-time { margin-block-start: 0; white-space: nowrap; font-size: .72rem; }
    .tt-cell .tt-flags:empty { display: none; }

    .tt-pick { font-size: .82rem; padding: 7px 8px; }

    /* يومٌ لا حصّةَ له: بطاقةٌ برأسها وحدَه — ولا يُترك بلا خبر */
    .tt tbody tr:has(> th:only-child)::after,
    .tt tbody tr:not(:has(td:not(.tt-empty):not(.tt-rest)))::after {
        content: "لا حصص"; display: block;
        padding: 10px 12px; color: var(--muted-light); font-size: .8rem;
    }
}

.swatch {
    display: inline-block; width: 10px; height: 10px; border-radius: var(--radius);
    background: var(--rule); margin-inline-start: 6px;
}
.swatch.mine { background: var(--accent); }

/* --- معاينة المذكرة --- */
.modal.wide-modal { max-width: 780px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal-head h2 { margin: 0 0 2px; }

.doc-title { font-size: .9rem; margin: 20px 0 8px; color: var(--muted); }
/* النصّ المستخرَج يحتفظ بأسطره: بنيةُ المذكرة نصفُ معناها */
.doc-text {
    white-space: pre-wrap; word-break: break-word;
    background: var(--stripe); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 14px 16px; max-height: 46vh; overflow-y: auto;
    font-size: .86rem; line-height: 1.75;
}

/* --- صفحة المذكرة --- */
.lesson-cols { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.lesson-preview { display: flex; flex-direction: column; }
/* العارض إطارٌ خارجيّ لا يعرف ارتفاع محتواه، فيُعطى ارتفاعًا صريحًا */
.office-frame {
    width: 100%; height: min(72vh, 760px);
    border: 1px solid var(--rule); border-radius: var(--radius); background: #fff;
}
.lesson-preview .hint { margin: 10px 0 0; }
.doc-text.tall { max-height: none; }

/* --- الهاتف --- */
@media (max-width: 860px) {
    .lesson-cols { grid-template-columns: 1fr; }
    .office-frame { height: 70vh; }

    /* العنوان وأزراره يتراصّان بدل أن يتزاحما */
    .plan-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .plan-head .actions,
    .plan-head .btn { width: 100%; }
    .plan-head select { max-width: none; width: 100%; }

    .plan-bar { padding: 10px; }
    .plan-bar input[type=date], .plan-bar select { flex: 1; min-width: 140px; }

    .toolbar > * { flex: 1 1 140px; }
    .toolbar .muted { flex-basis: 100%; margin-inline-start: 0; }

    .balances { grid-template-columns: 1fr; }
    .topup-form { flex-direction: column; align-items: stretch; }
    .topup-form .btn { width: 100%; }

    .modal { padding: 20px 18px; border-radius: var(--radius); }
    .modal-back { padding: 12px; align-items: start; }

    /* التسمية والقيمة يتراصّان: عمودٌ بعرض المحتوى يخنق الآخر */
    .facts { grid-template-columns: 1fr; gap: 2px; }
    .facts dt { margin-top: 8px; }

    h1 { font-size: 1.25rem; }
    .card { padding: 16px 15px; }
}

/* شاشاتٌ ضيّقة جدًّا: الأزرار تحت بعضها بدل أن تُقصّ */
@media (max-width: 420px) {
    .row-actions { flex-direction: column; align-items: stretch; }
    .actions { flex-wrap: wrap; }
    .actions .btn { flex: 1 1 auto; }
}

/* الإدخال 16px على الأقلّ في iOS: أصغر منه يجعل سفاري يقرّب الصفحة عند اللمس */
@media (max-width: 860px) {
    input, select, textarea, .cell { font-size: 16px !important; }
    .plan-table .cell { line-height: 1.45; }
}

/* --- ألسنة الإعدادات --- */
.tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--rule); margin-bottom: 18px;
}
.tab {
    font: inherit; font-size: .88rem; padding: 9px 15px;
    background: none; border: 0; border-bottom: 2px solid transparent;
    color: var(--muted); cursor: pointer; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab { border-bottom-width: 2px; margin-bottom: -2px; }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

/* لسانٌ غير مفتوح يُخفى ولا يُنزَع: حقوله تبقى في النموذج فيحفظها الزرّ
   الواحد كما كانت، ولا يُمحى ما لم يُنظَر إليه */

.colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.colour-row { display: flex; gap: 8px; align-items: center; }
.colour-row input[type=color] {
    width: 44px; height: 38px; padding: 2px; flex-shrink: 0;
    border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; cursor: pointer;
}
.colour-row input[type=text] { flex: 1; text-transform: lowercase; }

.preview-strip {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding: 14px 16px;
    border: 1px solid var(--rule); border-radius: var(--radius); font-size: .9rem;
}
.dot-lg { width: 18px; height: 18px; flex-shrink: 0; }

.brand-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.brand-thumb {
    display: block; max-height: 60px; width: auto; margin-bottom: 10px;
    background: var(--stripe); border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px;
}
.brand-thumb.small { max-height: 32px; }
.field input[type=file] { font-size: .84rem; }

/* ======================= لوحة القيادة ================   أسلوبٌ مسطّح شبكيّ: فواصلُ صريحة بدل الظلال، وزوايا حادّة، ونصٌّ
   مُلاصقٌ لحافّة السطر. الشبكة نفسها هي ما ينظّم، لا الإطارات.

   بدأ هنا ثمّ عُمّم: الموقع كلُّه صار على هذا الأسلوب — لا زاويةَ مستديرة
   ولا ظلّ، وترويسةُ كلّ صفحة يفصلها خطُّ حبرٍ 2px كترويسة اللوحة. فما
   بقي في هذا القسم إنّما هو ما تنفرد به اللوحة من شبكاتٍ ورسوم.
   ---------------------------------------------------------- */
.dash { max-width: 1240px; margin: 0 auto; }
.num, .dash .num {
    font-family: "IBM Plex Mono", monospace;
    /* أرقامٌ في نصٍّ يمينيّ تنقلب إن لم تُعزَل: «14 200» تصير «200 14» */
    direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums;
}

/* ترويسةُ اللوحة هي ترويسةُ الموقع نفسها (انظر .plan-head) بفارقٍ واحد:
   بياناتُها السفلية تُحاذي خطَّ الأساس لا أعلى العنوان */
.dash-head { align-items: baseline; gap: 20px; margin-bottom: 30px; }
.dash-head h1 { margin: 0; }
.dash-sub { margin: 2px 0 0; color: var(--muted); font-size: .86rem; }
.dash-meta { display: flex; gap: 18px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; }

.dash-sec { margin-bottom: 34px; }
.dash-sec.last { margin-bottom: 0; }
.dash-sec-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.dash-sec-head h2 { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: .05em; }

/* المربّع الصغير بدل النقطة الدائرية: النظام كلّه حادّ الزوايا */
.sq { width: 9px; height: 9px; flex-shrink: 0; display: inline-block; background: var(--muted); }
.sq.ok { background: var(--ok); }
.sq.bad { background: var(--bad); }
.sq.warn { background: var(--warn-dot); }
.sq.accent { background: var(--accent); }

.all-clear {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 24px 2px; border-bottom: 1px solid var(--rule); font-size: .95rem;
}

.decisions {
    display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr);
    border-bottom: 1px solid var(--rule);
}
.decision {
    padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 11px;
    border-inline-start: 1px solid var(--rule);
}
.decision:first-child { border-inline-start: 0; }
.kicker {
    display: flex; align-items: center; gap: 8px;
    font-size: .7rem; font-weight: 600; letter-spacing: .07em; color: var(--muted);
}
.decision-n { display: flex; align-items: baseline; gap: 10px; }
.num.big { font-size: 2.5rem; font-weight: 600; line-height: .9; letter-spacing: -.02em; }
.decision .unit { font-size: .88rem; font-weight: 600; }
.decision-detail { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--muted); flex: 1; }

/* زرٌّ مسطّح: إطارٌ 2px بلا استدارة، والنصّ مُلاصقٌ للحافّة لا موسَّط */
.flat-btn {
    align-self: flex-start; font-size: .78rem; font-weight: 600;
    border: 2px solid var(--ink); padding: 8px 14px;
    color: var(--ink); text-decoration: none; transition: background .12s, color .12s;
}
.flat-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.flat-btn:active { background: var(--accent-hover); border-color: var(--accent-hover); }
.flat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.alarm {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; margin-top: 18px;
    background: var(--bad-soft); border-inline-start: 3px solid var(--bad);
    font-size: .86rem; line-height: 1.6;
}
.alarm .sq { margin-top: 6px; }

/* --- شبكة التغطية --- */
.grid-scroll { overflow-x: auto; padding: 20px 0 6px; }
.cov {
    display: grid;
    grid-template-columns: 116px repeat(var(--weeks), minmax(24px, 1fr));
    gap: 2px; align-items: center; min-width: 820px;
}
.cov-corner { }
.cov-week { font-size: .58rem; color: var(--muted-light); text-align: center; }
.cov-label {
    font-size: .78rem; color: var(--muted); padding-inline-end: 10px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.cov-teachers { font-size: .68rem; color: var(--muted-light); }

.cov-cell {
    height: 26px; display: flex; align-items: center; justify-content: center;
    font-size: .58rem; border: 1px solid var(--rule); color: var(--ink);
    text-decoration: none; cursor: pointer; transition: outline-color .1s, transform .05s;
    outline: 2px solid transparent; outline-offset: -2px;
}
/* رابطٌ لا زخرفة: العنصرُ خليّةٌ في الشبكة، فيرث لونَه ولا يُسطَّر */
a.cov-cell:hover { outline-color: var(--ink); z-index: 1; }
a.cov-cell:focus-visible { outline-color: var(--ink); }
/* الخانة الفارغة مُعلَّمةٌ بالحدّ لا بالتعبئة: الفراغ يجب أن يُرى فراغًا */
.cov-cell.s0 { background: var(--bg); border: 2px solid var(--bad); color: var(--bad); font-weight: 700; }
.cov-cell.sx { background: var(--bg); color: var(--muted); }
.cov-cell.s1 { background: color-mix(in srgb, var(--accent) 15%, var(--bg)); }
.cov-cell.s2 { background: color-mix(in srgb, var(--accent) 30%, var(--bg)); }
.cov-cell.s3 { background: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.cov-cell.s4 { background: color-mix(in srgb, var(--accent) 65%, var(--bg)); color: var(--bg); }
.cov-cell.s5 { background: var(--accent); color: var(--bg); }

.cov-legend {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding: 10px 0 20px; border-bottom: 1px solid var(--rule);
    font-size: .74rem; color: var(--muted);
}
.scale { display: flex; align-items: center; gap: 5px; }
.sw { width: 22px; height: 13px; display: inline-block; border: 1px solid var(--rule); }
.sw.s0 { background: var(--bg); border: 2px solid var(--bad); }
.sw.s1 { background: color-mix(in srgb, var(--accent) 15%, var(--bg)); }
.sw.s2 { background: color-mix(in srgb, var(--accent) 30%, var(--bg)); }
.sw.s3 { background: color-mix(in srgb, var(--accent) 45%, var(--bg)); }
.sw.s4 { background: color-mix(in srgb, var(--accent) 65%, var(--bg)); }
.sw.s5 { background: var(--accent); }

/* --- أرقام الثغرات والحسابات --- */
.gaps { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.gap { padding: 20px 22px; border-inline-start: 1px solid var(--rule); }
.gap:first-child { border-inline-start: 0; }
.gap-n { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.gap-n.bad { color: var(--bad); }
.gap-n.warn { color: var(--warn); }
.gap-n.ok { color: var(--ok); }
.gap-n.muted { color: var(--muted-light); }
.gap-label { font-size: .8rem; font-weight: 600; margin-top: 7px; }
.gap-note { font-size: .72rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }

.pending-list { margin: 16px 0 0; padding: 0; list-style: none; }
.pending-list li {
    padding: 11px 0 11px 0; border-bottom: 1px solid var(--rule);
    font-size: .84rem; color: var(--muted); line-height: 1.6;
}
.pending-list li:last-child { border-bottom: 0; }
.pending-list strong { color: var(--ink); }

@media (max-width: 860px) {
    .decisions, .gaps { grid-template-columns: 1fr; }
    .decision, .gap { border-inline-start: 0; border-bottom: 1px solid var(--rule); }
    .decision:last-child, .gap:last-child { border-bottom: 0; }
    .dash-head { margin-bottom: 22px; }
}

/* ------------------------- الرسوم البيانية -------------------------
   العلامات رفيعة والشبكة متراجعة: البيانات وحدها هي المسموح لها أن
   تعلوَ. ولا نصٌّ يلبس لون السلسلة — التسميات بأحبار النصّ، والهويّة
   من المربّع الملوّن بجانبها.
   ------------------------------------------------------------------ */
.panels { display: grid; grid-template-columns: 1.7fr 1fr; gap: 0; border-bottom: 1px solid var(--rule); }
.panel { padding: 22px 24px 24px; border-inline-start: 1px solid var(--rule); min-width: 0; }
.panel:first-child { border-inline-start: 0; }
.panel.wide { border-inline-start: 0; border-bottom: 1px solid var(--rule); }
.panel h3 { margin: 0; font-size: .88rem; font-weight: 700; }
.panel-why { margin: 6px 0 18px; font-size: .74rem; color: var(--muted-light); line-height: 1.55; }

.chart { margin: 0; position: relative; }
.chart-svg { width: 100%; height: auto; display: block; direction: ltr; overflow: visible; }
.chart-tick { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; fill: var(--muted-light); }
.chart-value { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; fill: var(--muted); }
.chart-hit { cursor: crosshair; }
.chart-cap { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--rule); font-size: .72rem; color: var(--muted-light); line-height: 1.6; }

/* القراءة عند التحويم: القيمة هي البارزة والتسمية تابعة */
.chart-tip {
    position: absolute; top: 0; transform: translateX(-50%);
    background: var(--ink); color: var(--bg); padding: 5px 10px;
    font-size: .74rem; white-space: nowrap; pointer-events: none; z-index: 2;
}
.chart-tip strong { font-family: "IBM Plex Mono", monospace; font-size: .84rem; }
html[dir="rtl"] .chart-tip { transform: translateX(50%); }

/* --- الأعمدة الأفقية --- */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 58px; align-items: center; gap: 14px; }
.bar-label { font-size: .8rem; color: var(--muted); display: flex; flex-direction: column; gap: 1px; }
.bar-sub { font-size: .66rem; color: var(--muted-light); }
/* المسار الرماديّ يُظهر ما لم يُملأ: الشريط وحده لا يقول من الكلّ كم */
.bar-track { display: flex; height: 18px; background: var(--track); align-items: stretch; }
.bar-seg { display: block; min-width: 2px; }
/* فجوةٌ بلون السطح لا حدٌّ مرسوم: الحدّ حبرٌ زائد ليس بيانات */
.bar-seg.complete { background: var(--accent); }
.bar-seg.incomplete { background: var(--bad); margin-inline-start: 2px; }
.bar-none { font-size: .7rem; color: var(--bad); padding: 0 8px; align-self: center; font-weight: 600; }
.bar-value { font-family: "IBM Plex Mono", monospace; font-size: .78rem; text-align: end; }

.chart-legend {
    display: flex; gap: 22px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule);
    font-size: .72rem; color: var(--muted-light);
}
.chart-legend span { display: flex; align-items: center; gap: 7px; }
.key { width: 11px; height: 11px; flex-shrink: 0; display: inline-block; }
.key.complete { background: var(--accent); }
.key.incomplete { background: var(--bad); }

/* --- المقياس بعتبة --- */
.gauge-n { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.gauge-n .big { font-size: 2.4rem; font-weight: 600; line-height: .9; }
.gauge-n .big.ok { color: var(--ok); }
.gauge-n .big.bad { color: var(--bad); }
.gauge-note { font-size: .74rem; color: var(--muted-light); line-height: 1.5; }
.gauge-track { position: relative; height: 20px; background: var(--track); }
.gauge-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--accent); }
.gauge-fill.ok { background: var(--ok); }
/* علامة العتبة تتجاوز الشريط علوًّا وسفلًا: حدٌّ لا جزءٌ من القياس */
.gauge-mark { position: absolute; top: -5px; width: 2px; height: 30px; background: var(--ink); }

@media (max-width: 860px) {
    .panels { grid-template-columns: 1fr; }
    .panel { border-inline-start: 0; border-bottom: 1px solid var(--rule); }
    .bar-row { grid-template-columns: 110px 1fr 46px; gap: 9px; }
    .bar-label { font-size: .74rem; }
}


/* شريطُ الهامش في صفحة التسعير: نتيجةُ الرقمين فوقه، تُقرأ لا تُستنتَج */
.margin-strip {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-top: 4px; padding: 12px 14px;
    background: var(--stripe); border-inline-start: 3px solid var(--rule);
    font-size: .85rem; color: var(--muted);
}
.margin-strip strong { color: var(--bad); }

/*
 * ما يُشترى ولماذا: يُقال فوق المعاينة لا تحتها.
 *
 * وليس flex: كان كذلك، فصار كلُّ <span> في الجملة عنصرًا مرنًا مستقلًّا —
 * على الحاسوب يتّسع فيبدو سطرًا، وعلى الهاتف ينضغط فتصير الجملةُ أعمدةً
 * رأسيّةً لا تُقرأ. والنصُّ نصٌّ: يجري كفقرةٍ واحدة، والمربّعُ علامةٌ فيه.
 */
.buy-note {
    display: block;
    margin: 0 0 16px; padding: 12px 15px;
    background: var(--accent-faint); border-inline-start: 3px solid var(--accent);
    font-size: .85rem; line-height: 1.65;
}
.buy-note .sq { display: inline-block; margin-inline-end: 7px; vertical-align: middle; }

/* --- الاشتراك السنويّ --- */
.sub-buy { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.sub-price {
    font-family: "IBM Plex Mono", monospace; direction: ltr; unicode-bidi: isolate;
    font-size: 1.6rem; font-weight: 600; line-height: 1;
}
.sub-price small {
    font-family: "IBM Plex Sans Arabic", sans-serif; font-size: .82rem;
    font-weight: 400; color: var(--muted);
}
/* البابان متساويان في الوزن البصريّ: الاختيار للمعلّم لا نوجّهه إليه */
.sub-ways { display: flex; gap: 10px; flex-wrap: wrap; }
.sub-ways .btn { flex: 1 1 220px; }
.sub-ways .btn small { font-weight: 400; opacity: .85; }
@media (max-width: 560px) { .sub-ways .btn { flex-basis: 100%; } }

/* الأرباح رقمان: ما نضج وما زال محجوزًا */
.split { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--rule); }
.split-row { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--muted); }
.split-note { font-size: .72rem; color: var(--muted-light); line-height: 1.55; margin-top: 3px; }

/* --- رفع المذكرات --- */
.upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.tally-row {
    display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--rule);
    font-size: .84rem; color: var(--muted);
}
.tally-row > span { display: flex; align-items: center; gap: 7px; }
.tally-earned { margin-inline-start: auto; font-weight: 600; color: var(--ink); }
@media (max-width: 560px) { .tally-earned { margin-inline-start: 0; } }
/* شارةٌ محايدة: ما ينتظر المراجعة ليس خطأً يُحمَّر */
.badge.soft { background: var(--warn-soft); color: var(--warn); }

/* ======================= لوحة المعلّم ================   نفسُ نظام لوحة القيادة، بنبرةٍ أخرى: هناك تُحصى أخطاءُ ألفٍ ومئتين،
   وهنا يفتح المعلّم صفحتَه على نفسه. فالخانةُ الفارغة تُعرض عملًا باقيًا
   ومعها الطريقُ إليه، لا نسبةً مئوية تلخّص التقصير.

   والتفريق بين المكتوب والفارغ ليس باللون وحده: المكتوب مملوءٌ بالحبر
   المميّز، والفارغ محدَّدٌ بإطارٍ على الخلفية — شكلان مختلفان لا لونان،
   ثمّ نصٌّ صريح في كلٍّ منهما. فيبقى الفرق قائمًا في عمى الألوان وفي
   الطباعة بالأسود والأبيض.
   ---------------------------------------------------------- */
.board .dash-sec-head .flat-btn { align-self: center; }
.sec-note { font-size: .74rem; color: var(--muted-light); }

/* --- ما لا وجود له: يُقال ولا يُملأ --- */
.void { padding: 30px 2px 26px; border-bottom: 1px solid var(--rule); }
.void.slim { padding: 20px 2px 18px; }
.void-what { margin: 0; font-size: 1.02rem; font-weight: 600; }
.void-who { margin: 8px 0 0; font-size: .88rem; color: var(--muted); }
.void-note { margin: 14px 0 0; font-size: .76rem; color: var(--muted-light); line-height: 1.6; max-width: 52ch; }

/* --- حصص اليوم --- */
.slots {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--rule);
}
.slot-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px 16px;
    border-bottom: 1px solid var(--rule); border-inline-end: 1px solid var(--rule);
    background: var(--accent-faint);
}
.slot-time { font-size: .78rem; color: var(--muted-light); }
.slot-subject { font-size: .94rem; font-weight: 600; }
.slot-state { font-size: .76rem; color: var(--muted); }

/* الفارغة: خلفيةُ الصفحة وإطارُ إنذارٍ داخليّ — تُرى فراغًا لا لونًا آخر */
.slot-card.is-empty { background: var(--bg); box-shadow: inset 0 0 0 2px var(--bad); }
.slot-card.is-empty .slot-state { color: var(--bad); font-weight: 600; }

.tally {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
    font-size: .88rem; color: var(--muted);
}
.tally strong { color: var(--ink); }

/* --- أيام الأسبوع --- */
.days {
    display: grid; grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--rule); border-inline-start: 1px solid var(--rule);
    margin-top: 18px;
}
.day {
    display: flex; flex-direction: column; gap: 7px;
    padding: 15px 14px 17px; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--rule); border-inline-end: 1px solid var(--rule);
    transition: background .12s;
}
.day:hover { background: var(--stripe); }
.day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* اليومُ الجاري يُعلَّم بخطٍّ علويّ سميك لا بلون: يبقى ظاهرًا في كل حال */
.day.is-today { box-shadow: inset 0 3px 0 var(--ink); background: var(--stripe); }
.day.is-future .day-name { color: var(--muted-light); }

.day-name { font-size: .84rem; font-weight: 600; }
/* مربّعٌ لكلّ مقطع لا شريطٌ بنسبة: الأيّام تختلف عددًا (4 إلى 7)،
   والنسبةُ تخفي أنّ «نصف يومٍ من أربعة» ليس «نصف يومٍ من سبعة» */
.marks-row { display: flex; gap: 3px; flex-wrap: wrap; }
.mk { width: 11px; height: 11px; flex-shrink: 0; display: inline-block; }
.mk.done { background: var(--accent); }
/* المنتظِرُ مفرَّغٌ بإطارِ حبر: شكلٌ مختلف لا لونٌ آخر، فيبقى الفرق
   قائمًا في عمى الألوان وفي الطباعة بالأسود والأبيض */
.mk.wait { background: var(--bg); box-shadow: inset 0 0 0 2px var(--ink); }
/* ويومٌ لم يحن بعد ليس متروكًا: رماديٌّ صامت لا إنذار */
.mk.later { background: var(--track); }
.day-tally { font-size: .76rem; color: var(--muted); }
.day-state { font-size: .72rem; color: var(--ink); font-weight: 600; }
.day.is-future .day-state { color: var(--muted-light); font-weight: 400; }
.day-none { font-size: .74rem; color: var(--muted-light); }
.day-mark {
    align-self: flex-start; font-size: .66rem; font-weight: 700; letter-spacing: .06em;
    background: var(--ink); color: var(--bg); padding: 1px 7px;
}

/* --- الحصّة القادمة --- */
.next {
    display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
    margin-top: 18px; padding: 20px 22px;
    border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent);
    background: #fff;
}
.next-time { font-size: 2.1rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.next-body { display: flex; flex-direction: column; gap: 3px; }
.next-subject { font-size: 1rem; font-weight: 600; }
.next-meta { font-size: .8rem; color: var(--muted); }

/* --- المحفظة --- */
.purse {
    display: grid; grid-template-columns: 1fr 1fr;
    margin-top: 18px; border: 1px solid var(--rule); background: #fff;
}
/* الفاصل خطٌّ كامل لا فراغ: الرصيدان معنيان لا رقمان متجاوران */
.purse-half { padding: 20px 22px; display: flex; flex-direction: column; gap: 3px; }
.purse-half + .purse-half { border-inline-start: 1px solid var(--rule); }
.purse-half { border-top: 3px solid var(--accent); }
.purse-half.earn { border-top-color: var(--ok); }
.purse-label { font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); }
.purse-value { font-size: 1.7rem; font-weight: 600; line-height: 1.15; }
.purse-value small { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: .85rem; font-weight: 400; color: var(--muted); }
.purse-note { font-size: .76rem; color: var(--muted-light); display: flex; align-items: center; gap: 6px; }

/* إنذارٌ محايد: العطلةُ ليست خطأً يُحمَّر */
.alarm.neutral { background: var(--neutral-soft); border-inline-start-color: var(--muted-light); }

@media (max-width: 860px) {
    /* الأيامُ الخمسة صفًّا واحدًا تصير 60px للعمود: تُكدَّس اثنين اثنين */
    .days { grid-template-columns: repeat(2, 1fr); }
    .slots { grid-template-columns: 1fr; }
    .purse { grid-template-columns: 1fr; }
    .purse-half + .purse-half { border-inline-start: 0; border-top: 3px solid var(--ok); }
    .next { padding: 16px 16px; gap: 12px; }
    .next-time { font-size: 1.7rem; }
    .board .dash-sec-head .flat-btn { align-self: flex-start; }
}

.days-legend {
    display: flex; gap: 20px; flex-wrap: wrap;
    padding: 11px 0 0; font-size: .72rem; color: var(--muted-light);
}
.days-legend span { display: flex; align-items: center; gap: 7px; }

/* ما ينتظر الكتابة اليوم: جملةٌ واحدة قبل المقاطع */
.waiting { margin: 16px 0 0; font-size: .92rem; color: var(--muted); line-height: 1.6; }
.waiting strong { color: var(--ink); }

/* فعلٌ في المقطع نفسه: أقصرُ طريقٍ من «ينقصني» إلى «كتبتُه» */
.slot-act {
    align-self: flex-start; margin-top: 6px;
    font-size: .7rem; font-weight: 600; padding: 4px 9px;
    border: 2px solid var(--ink); color: var(--ink); text-decoration: none;
}
.slot-act:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.slot-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- ما لا وجود له: يُقال ولا يُزيَّن --- */
.notice {
    margin-top: 18px; padding: 20px 22px;
    background: var(--stripe); border-inline-start: 3px solid var(--muted-light);
}
.notice.warn { background: var(--warn-soft); border-inline-start-color: var(--warn-dot); }
.notice-kicker {
    display: flex; align-items: center; gap: 8px;
    font-size: .7rem; font-weight: 600; letter-spacing: .07em; color: var(--muted);
}
.notice.warn .notice-kicker { color: var(--warn); }
.notice-title { margin: 9px 0 0; font-size: 1.02rem; font-weight: 600; }
.notice-body { margin: 8px 0 0; font-size: .86rem; color: var(--muted); line-height: 1.7; max-width: 62ch; }
.notice-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.flat-btn.ghost { border-color: var(--rule); color: var(--muted); }
.flat-btn.ghost:hover { border-color: var(--accent); background: var(--accent); color: var(--bg); }

/* مقياسُ بلوغ حدّ السحب */
.thermo { display: block; height: 8px; background: var(--track); margin-top: 10px; }
.thermo-fill { display: block; height: 100%; background: var(--ok); }

/* --- الرسائل --- */
.threads { list-style: none; margin: 0; padding: 0; }
.thread { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.thread:last-child { border-bottom: 0; }
.thread-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .84rem; }
.thread-body { margin: 9px 0 0; font-size: .9rem; line-height: 1.7; white-space: pre-wrap; }
.thread-reply {
    margin-top: 12px; padding: 12px 15px;
    background: var(--accent-faint); border-inline-start: 3px solid var(--accent);
}
.thread-who { font-size: .72rem; font-weight: 600; letter-spacing: .05em; color: var(--accent); }
.thread-reply p { margin: 5px 0 0; font-size: .88rem; line-height: 1.7; white-space: pre-wrap; }
.thread-form { margin-top: 12px; }
.field textarea {
    width: 100%; font: inherit; padding: 9px 12px; line-height: 1.6;
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: #fff; color: var(--ink); resize: vertical;
}
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.sub-or { font-size: .8rem; color: var(--muted-light); margin: 0 4px; }

/* --- الانضمام بدعوة --- */
.join-card { max-width: 420px; }
.otp-input { font-size: 1.3rem !important; letter-spacing: .5em; text-align: center; }
.back-btn { margin-top: 12px; width: 100%; text-align: center; }
.join-foot { margin: 18px 0 0; text-align: center; }

/* --- الدعوات --- */
.invite-acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.code-chip {
    display: inline-block; padding: 2px 10px; letter-spacing: .12em;
    background: var(--ink); color: var(--bg);
}
.invitee { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.invitee-name { font-weight: 600; font-size: .9rem; }
.invitee .state { margin-inline-start: auto; }

/*
 * صفُّ ابنٍ في «أبنائي»: عموديٌّ بطوابقَ ثابتة، لا أفقيٌّ يُحشر فيه كلُّ
 * شيء. الأفقيُّ (.invitee) يصلح لاسمٍ وشارةٍ لا غير؛ وهنا حصصٌ وأزرارٌ
 * وتواريخ، فتضيق أيَّ عرضٍ إن أُجبرت في سطرٍ واحد — على الهاتف والحاسوب معًا.
 */
.child-row { padding-block: 14px; border-block-end: 1px solid var(--rule); display: grid; gap: 8px; }
.child-row:last-child { border-block-end: 0; }
.child-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.child-membership {
    display: grid; gap: 6px; padding: 8px 10px;
    background: var(--stripe); border-inline-start: 3px solid var(--rule);
}
.child-membership-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; }
.child-class {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    font-size: .86rem;
}

/* ============================ المحادثة ============================ */
.chat-card { display: flex; flex-direction: column; gap: 0; padding: 0; }

/*
 * شريطُ الغرفة: سطرٌ واحدٌ يقول ما جرى اليومَ ويُعرِّف المكان.
 *
 * ولا نقطةَ خضراءَ تنبض: النبضُ يوحي بحضورٍ لحظيٍّ لا نقيسه، والرقمُ
 * يقول الحقيقةَ كاملةً — «اليومَ ٣٤ رسالةً من ٧ معلّمين» أو «لم يكتب
 * أحدٌ اليوم بعد»، وكلاهما خبرٌ يُبنى عليه قرارُ الكتابة.
 */
.chat-room {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 12px 16px; border-block-end: 1px solid var(--rule);
    background: var(--stripe);
}
.chat-room b { font-family: "Cairo", "IBM Plex Sans Arabic", sans-serif; font-size: .92rem; }
.chat-room-live { font-size: .74rem; color: var(--muted-light); }

/*
 * السجلّ: صفحةٌ واحدةٌ ينزلها خطُّ هامشٍ متّصل.
 *
 * فلا فجوةَ بين الرسائل — الفجوةُ تقطع الخطَّ فيصير شُرطًا — بل حشوةٌ
 * داخلَ كلِّ مدخلة. والخطُّ نفسُه على .chat-msg لا على جسمها، ليبقى
 * موضعُه واحدًا في المضمومة وغيرِ المضمومة.
 */
.chat-log {
    display: flex; flex-direction: column; gap: 0;
    max-height: min(60vh, 560px); overflow-y: auto;
    padding: 14px 16px 16px;
}

/*
 * التاريخُ يُكتب فوق الخطّ كما يُكتب في أوّل يومٍ من الدفتر: يبدأ من
 * الهامش، ويقطع الخطَّ بخلفيّته، ويمدّ شرطةً إلى آخر السطر.
 */
.chat-day { display: flex; align-items: center; gap: 10px; padding-block: 14px 6px; }
.chat-day:first-child { padding-block-start: 0; }
.chat-day span {
    font-family: "Cairo", "IBM Plex Sans Arabic", sans-serif;
    font-size: .74rem; font-weight: 700; color: var(--muted-light);
    background: #fff; padding-inline-end: 10px; margin-inline-start: -2px;
}
.chat-day::after { content: ""; flex: 1; block-size: 1px; background: var(--rule); }

.chat-loading-more {
    text-align: center; padding: 6px 0 10px;
    font-size: .78rem; color: var(--muted-light);
    animation: chat-pulse 1.1s ease-in-out infinite;
}
@keyframes chat-pulse { 50% { opacity: .35; } }
.chat-empty { margin: 24px 0; text-align: center; }
/* ما يُعرض بدل صفّ الكتابة (خطأٌ أو إيقافُ مشاركة) يأخذ حشوةَ الحافّة نفسَها */
.chat-card > .flash, .chat-card > .hint { margin: 0; padding: 12px 16px; border-block-start: 1px solid var(--rule); }

/* المدخلةُ تتعلّق بالخطّ: الخطُّ حدُّها، والصورةُ تجلس عليه */
.chat-msg {
    position: relative;
    border-inline-start: 2px solid var(--rule);
    padding: 10px 0 12px;
    padding-inline-start: 30px;
}
/* والمضمومةُ أقربُ إلى ما قبلها: هي تتمّةُ كلامٍ لا مدخلةٌ جديدة */
.chat-msg.is-grouped { padding-block: 0 10px; }

/*
 * صورةُ الكاتب مربّعةٌ تجلس على الخطّ نفسِه.
 *
 * فالصورةُ في عمودٍ مستقلٍّ تُزيح النصَّ عن الهامش وتترك بياضًا طوليًّا
 * لا يملؤه شيء. وهنا هي ختمٌ على الحاشية: تُعرَف الوجوهُ من بعيد،
 * والنصُّ يبدأ من الهامش نفسِه في كلّ مدخلة.
 */
.chat-who {
    position: absolute; inset-inline-start: -15px; inset-block-start: 8px;
    text-decoration: none; z-index: 1;
}
.chat-avatar {
    display: block; inline-size: 28px; block-size: 28px; object-fit: cover;
    border: 1px solid var(--rule); background: #fff;
}
.chat-avatar-none {
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--muted-light); font-size: .8rem;
}

/* رسالةُ المرء نفسه: هامشُه بلونه، لا فقاعةٌ تقفز إلى الجهة الأخرى */
.chat-msg.is-mine { border-inline-start-color: var(--accent); }
.chat-msg.is-mine .chat-avatar { border-color: var(--accent); }

/* رسالةُ الإدارة والمشرف تُلمَح من بعيد: في غرفةٍ من ألفٍ ومئتين، ردُّ
   الإدارة لا يُقرأ حرفًا حرفًا ليُعرف مصدرُه */
.chat-msg.is-admin { border-inline-start-color: var(--ink); border-inline-start-width: 4px; }
.chat-msg.is-admin .chat-body { background: var(--neutral-soft); padding: 8px 10px; margin-inline-start: -10px; }
.chat-msg.is-admin .chat-avatar, .chat-msg.is-admin .chat-avatar-none { border-color: var(--ink); }
.chat-msg.is-mod { border-inline-start-color: var(--accent); border-inline-start-width: 4px; }

.chat-body { min-width: 0; }
.chat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.chat-name {
    font-family: "Cairo", "IBM Plex Sans Arabic", sans-serif;
    font-size: .84rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
.chat-name:hover { color: var(--accent); }

/* الوقتُ حاشيةٌ لا شارة: بخطّ الأرقام نفسِه الذي تُكتب به أرقامُ المنصّة */
.chat-time {
    font-family: "IBM Plex Mono", monospace; font-size: .68rem;
    color: var(--muted-light); margin-inline-start: auto;
}
/* ووقتُ المضمومة معلَّقٌ في الهامش وحدَه، بلا اسمٍ يُعاد */
.chat-time.is-hanging {
    position: absolute; inset-inline-start: -46px; inset-block-start: 3px;
    margin: 0; opacity: 0; transition: opacity .12s;
}
.chat-msg:hover .chat-time.is-hanging, .chat-msg:focus-within .chat-time.is-hanging { opacity: 1; }

.chat-text { margin: 0; font-size: .93rem; line-height: 1.8; overflow-wrap: anywhere; }

/*
 * صورةٌ في الرسالة: مصغَّرةٌ محدودةُ الارتفاع، تُفتح بحجمها بالنقر.
 *
 * فصفحةُ كتابٍ بعرض السجلّ تدفع الكلامَ كلَّه تحتها، وصفحةٌ بعرض
 * إبهامٍ لا تُقرأ. ومئتان وأربعون بكسلًا تكفي لتُعرف، والنقرةُ للباقي.
 */
.chat-img { display: inline-block; margin-block-start: 7px; max-inline-size: 100%; line-height: 0; }
.chat-img img {
    display: block; max-inline-size: min(100%, 320px); max-block-size: 240px;
    object-fit: cover; border: 1px solid var(--rule); background: var(--stripe);
}
.chat-img:hover img { border-color: var(--accent); }

/*
 * مشبكُ الورق: زرٌّ بحجم الأيقونة بجانب الحقل.
 *
 * وحقلُ الملفّ لا يظهر حتّى يُضغط — أكثرُ الرسائل كلامٌ، وحقلٌ ظاهرٌ
 * دائمًا يزاحم الكتابةَ على عرضٍ ضيّقٍ أصلًا في الهاتف.
 */
.chat-clip {
    flex: 0 0 auto; display: grid; place-items: center;
    inline-size: 40px; block-size: 40px; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--rule); color: var(--muted-light);
}
.chat-clip:hover { border-color: var(--accent); color: var(--accent); }
.chat-clip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chat-clip .icon { inline-size: 19px; block-size: 19px; }

.chat-clip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-clip-row input[type="file"] { font: inherit; font-size: .82rem; flex: 1 1 220px; min-inline-size: 0; }
.chat-clip-pick {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
    padding: 6px 10px; background: #fff; border: 1px solid var(--rule);
}
.chat-clip-pick img { inline-size: 40px; block-size: 40px; object-fit: cover; border: 1px solid var(--rule); }
.chat-clip-name { flex: 1; min-inline-size: 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }

.chat-hide {
    font: inherit; font-size: .68rem; padding: 1px 7px; cursor: pointer;
    background: none; border: 1px solid var(--rule); color: var(--muted-light);
}
.chat-hide:hover { border-color: var(--bad); color: var(--bad); }

/*
 * «ردّ» يظهر عند المرور لا دائمًا.
 *
 * كلمةٌ مكرّرةٌ تحت كلّ رسالةٍ في صفحةٍ من خمسين مدخلةً تصير خمسين
 * كلمةً تُقرأ قبل النصّ الذي جاء له القارئ. وعلى اللمس لا مرورَ أصلًا،
 * فيبقى ظاهرًا هناك — ويظهر بالتركيز فلا يضيع على لوحة المفاتيح.
 */
.chat-reply {
    display: block; margin-top: 5px; font: inherit; font-size: .74rem; font-weight: 600;
    padding: 0; cursor: pointer; background: none; border: 0; color: var(--muted-light);
    opacity: 0; transition: opacity .12s;
}
.chat-msg:hover .chat-reply, .chat-reply:focus-visible { opacity: 1; }
.chat-reply:hover { color: var(--accent); text-decoration: underline; }
@media (hover: none) { .chat-reply { opacity: 1; } }

/*
 * مقتطفُ الردّ فوق نصّ الرسالة: شريطٌ رفيعٌ ملوَّنٌ بلون الحدّ نفسِه الذي
 * يميّز الرسالة، فيبقى الردُّ من بيت الرسالة الأصليّة نفسِه لا زخرفةً
 * منفصلة. يُنقر فيُقفز إلى الأصل داخل السجلّ.
 */
.chat-quote {
    display: block; margin-bottom: 6px; padding: 5px 9px;
    border-inline-start: 2px solid var(--rule); background: var(--stripe);
    text-decoration: none; font-size: .78rem; line-height: 1.55; color: var(--muted);
}
.chat-quote:hover { border-inline-start-color: var(--accent); background: var(--accent-faint); }
.chat-quote-name { font-weight: 700; color: var(--ink); }
.chat-quote-name::after { content: '\2003'; } /* فراغٌ عريض بين الاسم والمقتطف */
.chat-quote-body { overflow-wrap: anywhere; }

/*
 * وميضٌ لحظيٌّ على الرسالة المقصودة بعد القفز إليها — إطارٌ لا خلفيّة،
 * فلا يصطدم بخلفيّات الأدوار المختلفة (عاديّةٍ ومديرٍ ومشرف).
 */
.chat-flash { animation: chat-flash-ring 1.2s ease-out; }
@keyframes chat-flash-ring {
    0% { box-shadow: inset 3px 0 0 var(--warn-dot), 0 0 0 2px var(--warn-soft); }
    100% { box-shadow: none; }
}

/* شريطُ الردّ الجاري فوق حقل الكتابة — كإشعار فيسبوك «Replying to…» */
.chat-replying {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 10px; margin-bottom: 6px;
    background: var(--stripe); border-inline-start: 3px solid var(--accent);
    font-size: .8rem;
}
.chat-replying-label { font-weight: 700; color: var(--ink); }
.chat-replying-body { color: var(--muted); margin-inline-start: 6px; overflow-wrap: anywhere; }
.chat-replying-x {
    flex-shrink: 0; font: inherit; cursor: pointer; background: none; border: 0;
    color: var(--muted-light); font-size: .9rem; padding: 2px 6px;
}
.chat-replying-x:hover { color: var(--bad); }

/* الرتبةُ تُقرأ لا تُلمَّح: الكلمةُ مكتوبةٌ في الشارة نفسها */
.rank { font-size: .66rem; font-weight: 700; letter-spacing: .05em; padding: 1px 7px; }
.rank-admin { background: var(--ink); color: var(--bg); }
.rank-mod { background: var(--accent); color: var(--bg); }

/* الدرعُ مربّعٌ ملوّن + اسمُه: اللونُ وحده لا يفرّق بين برونزيٍّ وذهبيّ
   في عمى الألوان، والاسمُ يفرّق دائمًا */
.shield { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 600; color: var(--muted); }
.shield-mark { width: 9px; height: 9px; display: inline-block; }
.shield-bronze .shield-mark { background: #8a6516; }
.shield-silver .shield-mark { background: #6b675f; }
.shield-gold .shield-mark { background: #d8b64a; border: 1px solid #8a6516; }
.shield-platinum .shield-mark { background: var(--accent); }

/* @فلان في نصّ الرسالة: يُبرَز كالرابط تمامًا — وسمٌ لا زخرفة */
.mention { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; padding: 0 3px; }

/*
 * صفُّ الكتابة حافّةُ الصفحة السفلى: يُفصل بخطٍّ ويجلس على أرضٍ أفتح.
 *
 * فهو أهمُّ ما في الصفحة — الدعوةُ إلى الكلام — وكان أقلَّها تصميمًا:
 * حقلٌ عاديٌّ لا يُفرَّق عن حقل بحث.
 *
 * عمودٌ لا صفّ: شريطُ الردّ الجاري يعلو صفَّ الإدخال، لا يزاحمه فيه.
 */
.chat-form {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px 14px; border-block-start: 1px solid var(--rule); background: var(--stripe);
}
.chat-form-row { display: flex; gap: 10px; }
.mention-input-wrap { position: relative; flex: 1; }
.chat-form input {
    width: 100%; font: inherit; padding: 11px 13px;
    border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.chat-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* قائمةُ اقتراحات الوسم: تفتح فوق الحقل لا تحته — الحقلُ في أسفل الصفحة */
.mention-list {
    position: absolute; inset-inline: 0; bottom: calc(100% + 4px);
    background: #fff; border: 1px solid var(--rule); box-shadow: 0 -4px 14px rgba(28,27,24,.08);
    max-height: 220px; overflow-y: auto; z-index: 5;
}
.mention-opt {
    display: block; width: 100%; text-align: start; font: inherit; font-size: .86rem;
    padding: 8px 12px; background: none; border: none; border-bottom: 1px solid var(--rule); cursor: pointer;
}
.mention-opt:last-child { border-bottom: none; }
.mention-opt:hover, .mention-opt:focus { background: var(--accent-faint); }

@media (max-width: 560px) {
    .chat-log { max-height: 58vh; padding: 12px 12px 14px; }
    .chat-room, .chat-form { padding-inline: 12px; }
    /* الهامشُ أضيقُ على الهاتف، والصورةُ تصغر معه — والخطُّ يبقى */
    .chat-msg { padding-inline-start: 24px; }
    .chat-who { inset-inline-start: -13px; }
    .chat-avatar { inline-size: 24px; block-size: 24px; }
    .chat-avatar-none { font-size: .72rem; }
    /* ووقتُ المضمومة لا هامشَ يتّسع له: يعود سطرًا فوق نصّه */
    .chat-time.is-hanging { position: static; opacity: 1; display: block; margin-bottom: 2px; }
}

/* ========================= الملفّ الشخصيّ ========================= */
.prof-id { display: flex; align-items: center; gap: 16px; }
.prof-avatar { display: block; width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--rule); flex-shrink: 0; }
.prof-avatar-none {
    display: flex; align-items: center; justify-content: center;
    background: var(--stripe); color: var(--muted-light); font-size: 1.7rem; font-weight: 700;
}

.prof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.prof-stat { padding: 14px 18px; border-inline-start: 1px solid var(--rule); }
.prof-stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.prof-n { font-size: 1.8rem; font-weight: 600; line-height: 1; display: block; }
.prof-label { font-size: .78rem; color: var(--muted); margin-top: 5px; display: block; }

.shield-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.shield-card {
    display: flex; flex-direction: column; gap: 5px;
    padding: 15px 16px; border: 1px solid var(--rule); background: #fff;
    border-top: 3px solid var(--rule);
}
.shield-card.shield-bronze { border-top-color: #8a6516; }
.shield-card.shield-silver { border-top-color: #6b675f; }
.shield-card.shield-gold { border-top-color: #d8b64a; }
.shield-card.shield-platinum { border-top-color: var(--accent); }
.shield-mark-lg { width: 14px; height: 14px; }
.shield-name { font-size: .88rem; font-weight: 600; }
.shield-when { font-size: .72rem; color: var(--muted-light); }

.prof-sub { font-size: .8rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); margin: 22px 0 12px; }
.prog-list { display: flex; flex-direction: column; gap: 16px; }
.prog { border-inline-start: 2px solid var(--rule); padding-inline-start: 12px; }
.prog-head { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin-bottom: 8px; }
.prog-step { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.prog-track { display: block; height: 7px; background: var(--track); }
.prog-fill { display: block; height: 100%; background: var(--accent); }
.prog-text { font-size: .74rem; color: var(--muted); }

/* ============================== المتجر ============================== */

/* الرصيدان في الترويسة: النقاط والدينار جنبًا إلى جنب ولا يُجمعان.
   الفاصلُ بينهما خطٌّ لا مسافة — مسافةٌ وحدها تُقرأ رقمًا واحدًا */
.store-purse { display: flex; }
.store-purse-cell { padding: 4px 16px; border-inline-start: 1px solid var(--rule); text-align: start; }
.store-purse-cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
.store-purse-n { font-size: 1.5rem; font-weight: 600; line-height: 1; display: block; }
.store-purse-label { font-size: .72rem; color: var(--muted); margin-top: 4px; display: block; }

/* شريطٌ أفقيّ: الوسومُ والدروعُ صفٌّ واحد يُمرَّر جانبيًّا لا شبكةٌ تلتفّ */
.shop-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.shop-item {
    flex: 0 0 230px; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 15px; border: 1px solid var(--rule); background: #fff;
    border-top: 3px solid var(--rule);
}
.shop-item.is-owned { background: var(--stripe); }
/* المعلَّقُ يُعرف من حافّته لا من لونه وحده */
.shop-item.is-on { border-top-color: var(--accent); }
.shop-item.shield-bronze { border-top-color: #8a6516; }
.shop-item.shield-silver { border-top-color: #6b675f; }
.shop-item.shield-gold { border-top-color: #d8b64a; }

.shop-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-hint { font-size: .74rem; color: var(--muted); margin: 0; flex: 1; }
.shop-own { font-size: .74rem; color: var(--muted-light); margin: 0; }
.shop-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

.btn.small { padding: 6px 11px; font-size: .78rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; color: var(--ink); border-color: var(--rule); }

/* الوسم: كلمةٌ في إطارٍ باهت، مختلفةُ الشكل عن الرتبة والدرع — الثلاثةُ
   تتجاور في سطر المحادثة، وتشابهُها يجعلها كتلةً واحدة لا تُقرأ */
.badge-tag {
    display: inline-block; font-size: .68rem; font-weight: 500; color: var(--muted);
    padding: 1px 7px; border: 1px solid var(--rule); background: var(--bg);
}

/* الدرعُ المشترى: علامتُه مجوّفة لا مصمتة. فرقٌ يُرى بلا لونٍ ولا نصّ،
   والنصُّ فوقه في العنوان لمن أراد التفصيل */
.shield-bought .shield-mark { background: transparent !important; border: 2px solid var(--muted-light); }

@media (max-width: 560px) {
    .store-purse { margin-top: 12px; }
    .shop-grid { grid-template-columns: 1fr; }
}

/* ===================== خارج السنة · هديّة التسجيل ===================== */

.out-of-year { text-align: start; }
.out-of-year h2 { margin: 0 0 8px; }
.out-of-year p { margin: 0 0 10px; color: var(--muted); }
.out-of-year .actions { margin-top: 14px; }

/* الهديّة: شريطُ تقدّمٍ وقائمةُ ما ينقص. والحدُّ العلويّ يميّزها عن
   بقيّة البطاقات — هي دعوةٌ إلى عملٍ لا خبرٌ يُقرأ */
.bonus-card { border-top: 3px solid var(--accent); }
.bonus-bar { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.bonus-bar .prog-track { flex: 1; }
.bonus-count { font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: var(--muted); }

.bonus-missing { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bonus-missing li { font-size: .84rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* خانةُ الاختيار: العلامةُ والنصُّ في سطرٍ واحد يُنقر كلُّه */
.check-field label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.check-field input { inline-size: 16px; block-size: 16px; accent-color: var(--accent); }

/* تعديلُ المعلّم على جدوله */
.tt-edit { border-top: 3px solid var(--accent); }
.tt-edit-form { display: grid; gap: 4px; margin-top: 6px; }
/* الوسمُ علامةٌ صغيرة بجانب المادة: المعلّم يعرف أين خالف جدولُه المستند */
.tt-flag {
    display: inline-block; font-family: "IBM Plex Mono", monospace;
    font-size: .7rem; font-weight: 700; color: var(--accent);
}
.tt-cell.tt-edited { border-block-start-color: var(--warn-dot); }

/* ترويسة الجدول: الزرّ والمنتقي في سطرٍ واحد ينكسر على الضيّق */
.tt-head-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* شريطُ الجدول: لسانان وأفعالٌ في سطرٍ واحد فوق الشبكة مباشرةً.
   ولا بطاقةَ تعديلٍ قبلها — كانت تدفع الجدولَ أسفلَ الشاشة، والجدولُ
   هو ما جاء المعلّم لأجله */
.tt-bar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
    border-bottom: 2px solid var(--rule);
}
.tt-tabs { margin-bottom: 0; border-bottom: 0; flex: 1; min-inline-size: 0; }
.tt-bar-acts { display: flex; gap: 8px; padding-bottom: 4px; }

@media (max-width: 560px) {
    .tt-bar { align-items: stretch; }
    .tt-bar-acts { padding-bottom: 0; }
}

/* زرّا التعديل: يفتحان وضعًا ولا ينفّذان فعلًا، فلهما حالةُ «مفتوح»
   ظاهرة. والعلامةُ في صدرهما هي نفسُها التي تُوسَم بها الخانةُ في
   الشبكة (↔ منقولة · + مضافة)، فيُقرأ الزرُّ وأثرُه بلغةٍ واحدة */
.tt-act {
    display: inline-flex; align-items: center; gap: 7px;
    font: inherit; font-size: .8rem; font-weight: 600;
    padding: 7px 13px; cursor: pointer;
    /* الحدُّ 2px بلون الحبر كسائر أزرار التطبيق: بـ--rule كان تباينُه
       1.29 على الأبيض — أضعفُ من أن يرسم للزرّ شكلًا يُميّزه ممّا حوله،
       والحدُّ هنا هو كلُّ ما يقول إنّ هذا زرٌّ يُضغط */
    border: 2px solid var(--ink); background: #fff; color: var(--ink);
    transition: color .12s, border-color .12s, background .12s;
}
.tt-act:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.tt-act:hover .tt-act-mark { color: var(--bg); }
.tt-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* المفتوحُ مصمت: الفرقُ في التعبئة لا في اللون وحده، فيبقى بيّنًا في
   عمى الألوان وعلى شاشةٍ باهتة */
.tt-act.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tt-act.on:hover { background: var(--accent); border-color: var(--accent); }

.tt-act-mark {
    font-family: "IBM Plex Mono", monospace; font-size: .88rem; font-weight: 700;
    line-height: 1; color: var(--accent);
}
.tt-act.on .tt-act-mark { color: var(--bg); }

/* الأزرارُ الثلاثة: العلامةُ فوق النصّ لا بجانبه — ثلاثةُ أزرارٍ في سطرٍ
   واحد بعلاماتٍ جانبية تطول فتزاحم الألسنة، والعموديُّ يجمعها مربّعاتٍ
   متساوية تُقرأ دفعةً واحدة */
.tt-act { flex-direction: column; gap: 3px; padding: 6px 12px; min-inline-size: 74px; }
.tt-act-text { font-size: .74rem; }
.tt-act-mark { font-size: 1rem; }

@media (max-width: 560px) {
    .tt-act { min-inline-size: 0; padding: 6px 9px; }
    .tt-act-text { font-size: .68rem; }
}

/* زرُّ تنزيل الدفتر: في طرف شريط التنقّل، مدفوعًا إليه بـauto.
   مصمتٌ بالحبر لا شبحيّ: هو الفعلُ الوحيد في الشريط الذي يُخرج وثيقةً،
   وبقيّتُه تنقّلٌ بين الأيام — والتساوي في الشكل يُخفي الفرق. */
/* المجموعة: معاينةٌ ومفتاحٌ وتنزيل، ملتصقةٌ في طرف الشريط.
   والمفتاحُ بينهما لأنّه يقرّر ما يظهر فيهما. */
/*
 * أفعالُ الورقة: صفٌّ واحدٌ لا يُكسَر.
 *
 * ثلاثةُ أزرارٍ متلازمة — معاينةٌ وتنزيلٌ وحزمة — وكسرُها بينها يجعل
 * الشريطَ سطرين وقد اتّسعت الصفحةُ لهما جميعًا.
 */
.plan-sheet-acts {
    margin-inline-start: auto;
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}

.pdf-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .82rem; font-weight: 600; padding: 7px 14px;
    border: 2px solid var(--ink); background: var(--ink); color: var(--bg);
    text-decoration: none; white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.pdf-btn:hover { background: var(--accent); border-color: var(--accent); }
/* زرُّ «عايِن الدفتر» <button> لا <a>: المتصفّحُ لا يورّث الأزرارَ خطَّ الصفحة ولا ارتفاعَ سطرها، فخرج أصغرَ من جاريه */
button.pdf-btn { font-family: inherit; line-height: inherit; cursor: pointer; }
.pdf-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdf-mark { font-family: "IBM Plex Mono", monospace; font-size: .95rem; line-height: 1; }

/*
 * على الشاشة الواسعة: الشريطُ كلُّه سطرٌ واحد.
 *
 * منتقي التاريخ والأزرارُ الثلاثة معًا — وقائمةُ المعلّمين (للمدير) هي
 * ما يُسمَح له بالانكماش، فاسمٌ مقصوصٌ في قائمةٍ أهونُ من شريطٍ مكسور.
 */
@media (min-width: 1024px) {
    .plan-bar { flex-wrap: nowrap; }
    .plan-bar select { min-inline-size: 0; flex: 0 1 auto; }
    .plan-sheet-acts { min-inline-size: 0; }
    .pdf-btn { white-space: nowrap; }
    .pdf-btn.pack-cta { min-inline-size: 0; overflow: hidden; }
    .pdf-btn.pack-cta > span:last-child { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 1023px) {
    /* على الضيّق تأخذ المجموعةُ سطرَها كاملًا: مدفوعةً إلى الطرف كانت
       تنضغط بين منتقي التاريخ وحافّة الشريط فيُقصّ نصفُها */
    .plan-sheet-acts { margin-inline-start: 0; flex: 1 0 100%; justify-content: space-between; flex-wrap: wrap; }
}

/* معاينةُ الدفتر: ملءُ الشاشة.

   المعلّم على هاتفٍ يقلبه عرضًا ليقرأ ورقةً عرضُها أكبرُ من طولها،
   ونافذةٌ بحوافَّ تضيّع نصفَ ما كسبه بالقلب. */
.preview-full {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column;
    background: var(--ink);
}

.preview-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 12px; flex: 0 0 auto;
    background: var(--ink); color: var(--bg);
    border-block-end: 1px solid rgba(251, 249, 245, .25);
}
.preview-title {
    font-size: .84rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-bar-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.preview-bar .icon-btn { color: var(--bg); }
.preview-bar .icon-btn:hover { background: rgba(251, 249, 245, .15); }

/* المسرحُ يأخذ ما بقي.
   minmax(0,1fr) لا 1fr: المسارُ الافتراضيّ ينمو بمحتواه، فكانت الورقةُ
   تتجاوز الشاشةَ رغم max-block-size — والحدُّ الأدنى صفرًا هو ما يجعله
   يقصّ نفسَه لا محتواه. */
.preview-stage {
    flex: 1; min-block-size: 0;
    display: grid; place-items: center;
    grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
    padding: 10px; overflow: auto;
    background: #4a4741;
}

#plan-preview-img {
    display: block; margin: auto;
    max-inline-size: 100%; max-block-size: 100%;
    background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
    cursor: zoom-in;
}

/**
 * التكبير: ورقةٌ كاملة على هاتفٍ لا يُقرأ نصُّها مهما قُلب.
 *
 * فالافتراضُ ملءُ الشاشة ليرى الورقةَ كلَّها، ونقرةٌ تكبّرها إلى عرضها
 * الكامل فيمرّر ويقرأ. ونقرةٌ ثانية تُرجعها.
 */
#plan-preview-img.zoomed {
    max-inline-size: none; max-block-size: none;
    inline-size: auto; cursor: zoom-out;
}
.preview-state { margin: 0; color: rgba(251, 249, 245, .8); font-size: .86rem; }

/* الجسمُ لا يتحرّك خلف الطبقة: الإصبعُ على الهاتف كان يمرّر ما تحتها */
body.no-scroll { overflow: hidden; }

/* الهاتفُ عرضًا: الشريطُ يضيق ليتّسع المسرح */
@media (max-height: 460px) {
    .preview-bar { padding: 4px 10px; }
    .preview-title { font-size: .76rem; }
    .preview-stage { padding: 4px; }
}

/* مفتاحُ الشعار: زرٌّ بهيئة on/off.

   زرٌّ لا خانةُ اختيار: الخانةُ تقلب نفسَها قبل أن يُسأل الخادم، فترفضُ
   التأكيدَ وتبقى مضاءةً تكذب. والزرُّ لا حالةَ له من نفسه — ما عليه هو
   ما في الخادم، وaria-checked تقولها لقارئ الشاشة. */
.logo-switch {
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit; padding: 0; border: 0; background: none;
    cursor: pointer; user-select: none; white-space: nowrap;
}

.logo-track {
    inline-size: 38px; block-size: 21px; flex: 0 0 auto;
    display: block; position: relative;
    background: var(--track); border: 2px solid var(--muted-light);
    transition: background .14s, border-color .14s;
}
.logo-knob {
    position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
    inline-size: 13px; block-size: 13px; background: var(--muted-light);
    transition: inset-inline-start .14s, background .14s;
}

/* المرفوعُ مصمتٌ بلون التمييز، والزرُّ ينتقل إلى الطرف: الحالةُ تُقرأ
   من الموضع لا من اللون وحده */
.logo-switch[aria-checked="true"] .logo-track { background: var(--accent); border-color: var(--accent); }
.logo-switch[aria-checked="true"] .logo-knob { inset-inline-start: 19px; background: var(--bg); }

.logo-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.logo-switch:hover .logo-track { border-color: var(--ink); }
.logo-switch[aria-checked="true"]:hover .logo-track { border-color: var(--accent-hover); background: var(--accent-hover); }

.logo-switch:disabled { cursor: default; }
.logo-switch:disabled .logo-track { opacity: .55; }

.logo-label { font-size: .8rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: baseline; gap: 6px; }
.logo-note { font-size: .7rem; font-weight: 500; color: var(--muted-light); }

/* ===================== سجلّ حساب المعلّم ===================== */

.ledger-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 1px solid var(--rule); background: #fff; margin-bottom: 18px; }
.ledger-sum { padding: 16px 20px; border-inline-start: 1px solid var(--rule); border-block-start: 3px solid var(--accent); }
.ledger-sum:first-child { border-inline-start: 0; }
.ledger-sum.warn { border-block-start-color: var(--warn-dot); background: var(--warn-soft); }
.ledger-sum-label { font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); display: block; }
.ledger-sum-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; display: block; margin-top: 4px; }
.ledger-sum-value small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.ledger-sum-note { font-size: .74rem; color: var(--muted-light); display: block; margin-top: 4px; }

.ledger td { vertical-align: top; }
/* الإشارةُ مكتوبةٌ (+/−) واللونُ يعضدها: نسخةٌ مطبوعةٌ بالأسود تبقى مقروءة */
.ledger-in { color: var(--ok); font-weight: 600; }
.ledger-out { color: var(--bad); font-weight: 600; }
/* ما لم يكتمل: يبقى في السجلّ ولا يُحسب، ويُرى أنّه لا يُحسب */
.ledger-void { opacity: .6; }
.ledger-why { font-size: .82rem; color: var(--muted); max-width: 380px; }
.ledger-ref { display: block; font-size: .66rem; color: var(--muted-light); word-break: break-all; margin-top: 3px; }
.ledger-doc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ledger-doc .btn { padding: 3px 8px; font-size: .72rem; }

/* بطاقةُ إثبات الرقم: دعوةٌ إلى فعلٍ لا خبرٌ يُقرأ */
.proof-card { border-top: 3px solid var(--accent); }
.proof-fallback code {
    font-family: "IBM Plex Mono", monospace; font-size: .78rem;
    background: var(--stripe); padding: 2px 6px; border: 1px solid var(--rule);
}

/* ردودٌ تنتظر قرارًا: معلّمٌ راسَل من هاتفٍ غير المسجَّل */
.unmatched-card { border-top: 3px solid var(--warn-dot); }
.thread.unmatched { display: grid; gap: 4px; grid-template-columns: 1fr; }
.unmatched-from { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: .84rem; }
.unmatched-body { font-size: .82rem; color: var(--muted); }
.unmatched-who { font-size: .78rem; color: var(--muted-light); }
.unmatched-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* تبديل الرقم: حقلٌ وزرٌّ في سطر */
.phone-change { border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 4px; }
.phone-change-row { display: flex; gap: 8px; flex-wrap: wrap; }
.phone-change-row input { flex: 1; min-inline-size: 160px; }

/* ============================ جرس الإشعارات ============================ */

.bell-wrap { position: relative; flex: 0 0 auto; }
.bell-wrap.bell-lead { margin-inline-start: auto; }
.bell-btn { position: relative; }

/* الشارةُ رقمٌ لا نقطة: «٣» تُقرأ، و«شيءٌ ما جديد» تُتجاهَل */
.bell-badge {
    position: absolute; inset-block-start: -2px; inset-inline-end: -2px;
    min-inline-size: 16px; padding: 0 4px;
    font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center;
    background: var(--bad); color: #fff;
}

/* الطبقةُ تلتقط النقرَ خارج اللوح: زرٌّ لا div، فيُغلَق باللمس والمفاتيح */
.bell-scrim {
    position: fixed; inset: 0; z-index: 40;
    border: 0; padding: 0; background: transparent; cursor: default;
}

.bell-panel {
    position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0;
    z-index: 41; inline-size: min(340px, calc(100vw - 24px));
    max-block-size: 70vh; overflow-y: auto;
    background: #fff; border: 2px solid var(--ink);
}

.bell-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 14px; border-block-end: 1px solid var(--rule);
    font-size: .86rem;
}
.bell-close { padding: 4px 10px; font-size: .72rem; }

.bell-item {
    display: grid; grid-template-columns: 8px 1fr auto; gap: 9px; align-items: baseline;
    padding: 11px 14px; border-block-end: 1px solid var(--rule);
    text-decoration: none; color: var(--ink);
}
.bell-item:last-child { border-block-end: 0; }
.bell-item:hover { background: var(--accent-faint); }

/* مربّعٌ لا دائرة، ولونُه يقول نوعَه — والنصُّ يقوله أيضًا */
.bell-dot { inline-size: 8px; block-size: 8px; background: var(--muted-light); }
.bell-message, .bell-reply, .bell-chat { background: var(--accent); }
/* الوسمُ نداءٌ باسمه لا رسالةٌ عامّة: نقطةٌ منفصلة عن bell-chat وإن تشابه اللون */
.bell-mention { background: var(--accent); }
.bell-lesson { background: var(--warn-dot); }
.bell-approved { background: var(--ok); }
/* الرفض: نقطةٌ حمراء تُفرَّق عن الاعتماد بلا قراءةِ النصّ */
.bell-rejected { background: var(--bad); }
/* الإعلانُ خبرٌ عامٌّ لا قرارٌ على عمل المعلّم، فلونُه لونُ التنبيه */
.bell-announce { background: var(--warn); }
/* زرّا الرأس: «امسح الكلّ» و«أغلِق» جنبًا إلى جنب */
.bell-acts { display: flex; align-items: center; gap: 6px; }

/* نصُّ الإعلان يُعرض بأسطره كما كُتب: طيُّها يجعله فقرةً لا تُقرأ */
.ann-body { white-space: pre-line; line-height: 1.9; }
/* التحويلُ البريديّ: ذهبيٌّ كلونِ المال في القائمة الجانبية */
.bell-transfer { background: #a8730f; }
/* طلبُ كارت ثقة: مالٌ يخرج قبل أن يُقبض، فنقطتُه بلون الحبر لا لونَ إشعارٍ عاديّ */
.bell-trust { background: var(--ink); }

.bell-text { font-size: .82rem; line-height: 1.45; }
.bell-when { font-size: .68rem; color: var(--muted-light); white-space: nowrap; }
.bell-empty { margin: 0; padding: 18px 14px; font-size: .84rem; color: var(--muted-light); }

@media (max-width: 560px) {
    .bell-panel { position: fixed; inset-block-start: 58px; inset-inline: 8px; inline-size: auto; }
}

/* البابُ الثاني في التسجيل: يُفصَل بخطٍّ لا بمسافة — طريقان لا خطوتان */
.join-alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }

/* معاينةُ الورقة في الإدارة */
.edge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.edge-row .tt-act { flex-direction: row; min-inline-size: 0; padding: 7px 13px; }

/* الإطارُ بأبعاد A4: ما يُرى هنا هو ما يُطبع */
.sheet-frame { border: 1px solid var(--rule); background: var(--muted-light); padding: 16px; overflow: auto; }
.sheet-frame iframe {
    display: block; margin: 0 auto;
    inline-size: 794px; block-size: 1123px; border: 0; background: #fff;
}
@media (max-width: 900px) {
    .sheet-frame { padding: 8px; }
    .sheet-frame iframe { inline-size: 100%; min-inline-size: 0; }
}

/* زرُّ الورقة المصمَّمة في قائمة المذكرات: علامتُه تميّزه عن «اعرض» */
.sheet-btn { border-color: var(--accent); color: var(--accent); }
.sheet-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* أيقونةُ عنصر المتجر (SVG منقّى) */
.item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;flex:0 0 auto}
.item-icon svg{inline-size:100%;block-size:100%;display:block}
.shop-head .item-icon{margin-inline-end:8px;inline-size:36px;block-size:36px}
.name-icon{display:inline-flex;inline-size:18px;block-size:18px;vertical-align:-3px;margin-inline-end:3px}
.name-icon svg{inline-size:100%;block-size:100%}

.item-icon img,.name-icon img{inline-size:100%;block-size:100%;object-fit:contain;display:block}

/* ============================ دوراتُ الفيديو ============================ */
/* بطاقاتُ الدورات في المتجر */
.course-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.course-card{ display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:var(--radius,12px);
    overflow:hidden; background:#fff; text-decoration:none; color:inherit; transition:box-shadow .15s,transform .15s; }
.course-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }
.course-cover{ position:relative; aspect-ratio:16/9; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; }
.course-cover img{ width:100%; height:100%; object-fit:cover; }
.course-cover-ph{ font-size:34px; opacity:.6; }
.course-owned{ position:absolute; inset-block-start:8px; inset-inline-start:8px; background:var(--ok); color:#fff;
    font-size:12px; padding:2px 8px; border-radius:999px; }
.course-body{ padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.course-title{ font-size:15px; line-height:1.4; }
.course-meta{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; }
.course-price{ color:var(--accent); font-weight:600; }

/* صفحةُ الدورة: عمودان */
.course-grid{ display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
.course-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.course-side{ display:flex; flex-direction:column; gap:16px; }
@media (max-width:900px){ .course-grid{ grid-template-columns:1fr; } }

.player-card{ display:flex; flex-direction:column; gap:8px; }
.player-title{ display:flex; align-items:center; gap:8px; font-size:15px; }

.buy-card .buy-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }

/* شريطُ التقدّم */
.progress-bar{ height:10px; border-radius:999px; background:var(--accent-soft); overflow:hidden; margin:6px 0 4px; }
.progress-bar span{ display:block; height:100%; background:var(--ok); border-radius:999px; transition:width .3s; }

/* المنهج */
.curriculum .cur-section{ margin-bottom:14px; }
.cur-section-title{ font-weight:600; margin-bottom:6px; color:var(--muted); }
.cur-lessons{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.cur-lesson-btn{ display:flex; align-items:center; gap:8px; width:100%; text-align:start; background:none;
    border:none; border-radius:8px; padding:8px 10px; cursor:pointer; color:inherit; font:inherit; }
.cur-lesson-btn:hover{ background:var(--accent-faint); }
.cur-lesson.is-active .cur-lesson-btn{ background:var(--accent-soft); font-weight:600; }
.cur-lesson-btn.locked{ cursor:default; color:var(--muted-light); }
.cur-lesson-btn.locked:hover{ background:none; }
.cur-ico{ inline-size:18px; text-align:center; flex:none; color:var(--accent); }
.cur-lesson-btn.locked .cur-ico{ color:var(--muted-light); }
.cur-name{ flex:1; min-width:0; }
.cur-dur{ font-size:12px; color:var(--muted-light); font-variant-numeric:tabular-nums; }
.tag.sm{ font-size:11px; padding:1px 6px; }

/* ==================== شريطُ الإنجازات والصورة المكبَّرة ==================== */
/* شريطٌ أفقيّ للدروع والوسوم — في الصفحة العامّة والحساب */
.ach-bar{ display:flex; gap:10px; overflow-x:auto; padding:2px 0 8px; scroll-snap-type:x proximity; }
.ach-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
    padding:6px 13px 6px 9px; border:1px solid var(--rule); border-radius:999px;
    background:#fff; scroll-snap-align:start; }
.ach-chip.shield-bronze{ border-color:#8a6516; }
.ach-chip.shield-silver{ border-color:#6b675f; }
.ach-chip.shield-gold{ border-color:#d8b64a; }
.ach-chip.shield-platinum{ border-color:var(--accent); }
.ach-ico{ inline-size:30px; block-size:30px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ach-ico svg, .ach-ico img{ inline-size:100%; block-size:100%; object-fit:contain; }
.ach-name{ font-size:.8rem; font-weight:600; white-space:nowrap; }

/* الصورة المكبَّرة بالنقر */
[x-cloak]{ display:none !important; }
.is-zoomable{ cursor:zoom-in; }
.avatar-lightbox{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
    justify-content:center; padding:24px; background:rgba(15,23,42,.82); cursor:zoom-out; }
.avatar-lightbox img{ max-inline-size:min(90vw,520px); max-block-size:90vh;
    border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.45); }

/* درعُ المعلّم ووسمُه في الشريط العلويّ */
.topbar-ach{ display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
.topbar-ach-ico{ inline-size:24px; block-size:24px; display:inline-flex; align-items:center; justify-content:center; }
.topbar-ach-ico svg, .topbar-ach-ico img{ inline-size:100%; block-size:100%; object-fit:contain; }
.topbar-ach{ align-self:center; }

/* ============================ حزمُ المذكرات ============================ */
.pack-pdf{ inline-size:100%; block-size:70vh; border:1px solid var(--rule); border-radius:10px; background:#fff; }
.pack-preview-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.pack-preview-link{ display:flex; align-items:center; gap:10px; padding:8px 11px; border:1px solid var(--rule);
    border-radius:8px; text-decoration:none; color:inherit; }
.pack-preview-link:hover{ background:var(--accent-faint); }
.pack-preview-ico{ flex:none; }
.pack-preview-name{ flex:1; min-width:0; font-weight:600; }

/* بطاقاتُ الحزم في المتجر */
.pack-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.pack-card{ display:flex; flex-direction:column; gap:8px; padding:14px 15px; border:1px solid var(--rule);
    border-top:3px solid var(--accent); background:#fff; border-radius:8px; text-decoration:none; color:inherit;
    transition:box-shadow .15s, transform .15s; }
.pack-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }
.pack-card.is-owned{ background:var(--stripe); }
.pack-card-head{ display:flex; align-items:center; gap:8px; }
.pack-card-ico{ font-size:22px; }
.pack-card-title{ font-weight:700; font-size:.95rem; }
.pack-card-foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; }
.pack-card-price{ color:var(--accent); font-weight:700; }
.pack-card-owned{ color:var(--ok); font-weight:600; font-size:.8rem; }

/* ============================ كيف تربح ============================ */
.earn-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:16px; }
.earn-card{ display:flex; flex-direction:column; gap:8px; }
.earn-card .earn-ico{ font-size:32px; }
.earn-card h2{ margin:0; }
.earn-amt{ font-weight:700; color:var(--accent); margin:0; }
.earn-card .btn{ margin-top:auto; align-self:flex-start; }

/* البابُ المقدَّم: حدٌّ ملوّنٌ في جهة البداية يميّزه بلا أن يصرخ */
.earn-card.featured{ border-inline-start:3px solid var(--accent); background:var(--accent-faint); }
.earn-card.featured .earn-amt{ font-size:1.05rem; line-height:1.5; }
.earn-card .hint.muted{ margin:0; font-size:.82rem; opacity:.75; }

/* البند الوامض في القائمة الجانبيّة */
.side-link.earn-blink{ animation: earnBlink 1.8s ease-in-out infinite; border-radius:8px; font-weight:600; }
@keyframes earnBlink{
    0%, 100%{ background:transparent; color:inherit; }
    50%{ background:var(--accent-soft); color:var(--accent); }
}
@media (prefers-reduced-motion: reduce){
    .side-link.earn-blink{ animation:none; background:var(--accent-soft); color:var(--accent); }
}

/* زرُّ تخصيص المذكرة — كبيرٌ ملوّن يلفت النظر */
.btn.btn-personalize{
    background:linear-gradient(135deg, var(--accent), #8a4fbf);
    color:#fff; border:none; font-weight:700; font-size:1.02rem;
    padding:12px 22px; border-radius:12px; box-shadow:0 6px 18px rgba(31,111,135,.28);
}
.btn.btn-personalize:hover{ filter:brightness(1.06); box-shadow:0 8px 22px rgba(31,111,135,.36); transform:translateY(-1px); }

/* عيّنةُ حزمة المذكرات — بطاقاتٌ بتفاصيلها */
.sample-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.sample-card{ display:flex; flex-direction:column; gap:6px; padding:12px 13px; border:1px solid var(--rule);
    border-radius:10px; background:#fff; }
.sample-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sample-subject{ font-size:.72rem; font-weight:700; color:var(--accent); background:var(--accent-soft);
    padding:2px 8px; border-radius:999px; }
.sample-tag{ font-size:.66rem; color:var(--muted-light); border:1px dashed var(--rule); padding:1px 6px; border-radius:6px; }
.sample-title{ font-weight:700; font-size:.92rem; line-height:1.4; }
.sample-meta{ display:flex; flex-wrap:wrap; gap:5px; }
.sample-meta span{ font-size:.7rem; color:var(--muted); background:var(--bg); border:1px solid var(--rule);
    padding:1px 7px; border-radius:6px; }
.sample-obj{ font-size:.78rem; color:var(--muted); margin:2px 0 4px; line-height:1.5; }
.sample-card .btn{ align-self:flex-start; margin-top:auto; }

/* ============================ نِبراس (المساعد) ============================ */
@keyframes nibras-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
@keyframes nibras-shadow { 0%,100%{ transform: scaleX(1); opacity:.16; } 50%{ transform: scaleX(.9); opacity:.1; } }
@keyframes nibras-blink { 0%,90%,100%{ transform: scaleY(0); } 94%{ transform: scaleY(1); } }
@keyframes nibras-think-tilt { 0%,100%{ transform: rotate(-3deg); } 50%{ transform: rotate(3deg); } }
@keyframes nibras-orbit-rotate { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes nibras-speak-bounce { 0%,100%{ transform: translateY(0); } 30%{ transform: translateY(-10px); } 60%{ transform: translateY(3px); } }
@keyframes nibras-success-pulse { 0%,100%{ transform: translateY(0) scale(1); } 30%{ transform: translateY(-26px) scale(1.03); } 60%{ transform: translateY(0) scale(.99); } }
@keyframes nibras-error-shake { 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-10px); } 75%{ transform: translateX(10px); } }
@keyframes nibras-spark-twinkle { 0%,100%{ opacity:.75; transform: scale(1) rotate(0deg); } 50%{ opacity:1; transform: scale(1.18) rotate(20deg); } }
@keyframes nibras-spark-burst { 0%,100%{ transform: scale(1); opacity:.9; } 40%{ transform: scale(1.7); opacity:1; } }
@keyframes nibras-badge-pop { 0%{ transform: scale(.6); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
@keyframes nibras-zz { 0%{ transform: translateY(0); opacity:0; } 30%{ opacity:1; } 100%{ transform: translateY(-40px); opacity:0; } }
@keyframes nibras-eyes-look { 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(8px,-6px); } }
@keyframes nibras-hand-wave { 0%,100%{ transform: rotate(0deg); } 50%{ transform: rotate(-12deg); } }
@media (prefers-reduced-motion: reduce){ .nibras svg *{ animation: none !important; } }

/* صفحة نِبراس (معاينة) */
.nibras-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; }
.nibras-cell{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:18px 12px;
    border:1px solid var(--rule); border-radius:12px; background:#fff; }
.nibras-label{ font-weight:700; }
.nibras-code{ font-size:11px; color:var(--accent); background:var(--accent-soft); padding:1px 7px; border-radius:6px; }
.nibras-sizes{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:24px; }
.nibras-appicon{ inline-size:96px; block-size:96px; border-radius:22px; background:#1E4BB8; display:flex;
    align-items:center; justify-content:center; overflow:hidden; }
.nibras-appicon .nibras{ transform:translateY(10px) scale(1.15); }
.nibras-chat{ max-width:380px; border:1px solid var(--rule); border-radius:12px; padding:20px; display:flex;
    flex-direction:column; gap:14px; background:#fff; }
.nibras-chat-head{ display:flex; flex-direction:column; gap:2px; }
.nibras-chat-body{ display:flex; justify-content:center; padding:6px 0; }
.nibras-chat-msg{ margin:0; line-height:1.6; }
.nibras-chat-input{ display:flex; align-items:center; gap:8px; border:1px solid var(--rule); border-radius:8px; padding:10px 12px; }
.nibras-chat-input .muted{ flex:1; }
.nibras-send{ background:#1E4BB8; color:#fff; border-radius:6px; padding:2px 9px; font-size:12px; }

/* ==================== صفحة تفاصيل الحزمة (تصميم ملوّن) ==================== */
.pack-detail{ color:#1f2a34; }
.pack-detail .pd-title,.pack-detail .pd-h2,.pack-detail .pd-sample-title,.pack-detail .pd-buy-title{
    font-family:'Noto Naskh Arabic', var(--font, serif); }

.pd-hero{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
.pd-badge{ display:inline-flex; flex:none; inline-size:56px; block-size:56px; border-radius:16px;
    background:color-mix(in oklab, var(--pd-accent) 16%, white); color:var(--pd-accent);
    align-items:center; justify-content:center; font-family:'Noto Naskh Arabic',serif; font-size:26px; font-weight:700; }
.pd-hero-text{ display:flex; flex-direction:column; gap:8px; flex:1 1 320px; min-width:0; }
.pd-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pd-title{ margin:0; font-size:30px; font-weight:700; line-height:1.3; }
.pd-count{ font-size:13px; font-weight:600; color:var(--pd-accent);
    background:color-mix(in oklab, var(--pd-accent) 12%, white); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.pd-summary{ margin:0; font-size:15.5px; line-height:1.7; color:#5b6670; }
.pd-back{ margin-inline-start:auto; align-self:flex-start; text-decoration:none; color:var(--accent);
    font-size:14px; font-weight:600; padding:8px 14px; border-radius:10px; border:1px solid #cfe0e6; background:#fff; }
.pd-back:hover{ background:#eaf3f6; }

.pd-cols{ display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; }
.pd-main{ flex:1 1 560px; min-width:0; display:flex; flex-direction:column; gap:18px; }
.pd-side{ flex:1 1 300px; max-inline-size:380px; position:sticky; top:20px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:820px){ .pd-side{ position:static; max-inline-size:none; } }

.pd-sec-head{ display:flex; flex-direction:column; gap:8px; }
.pd-h2{ margin:0; font-size:23px; font-weight:700; }
.pd-note{ margin:0; font-size:14px; line-height:1.8; color:#5b6670; background:#fff;
    border:1px solid #ebe6dc; border-radius:12px; padding:12px 16px; }

.pd-samples{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.pd-sample{ display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid #ebe6dc;
    border-top:5px solid var(--sc,#1f6f87); border-radius:16px; padding:16px;
    box-shadow:0 1px 2px rgba(31,42,52,.05),0 6px 18px rgba(31,42,52,.06); }
.pd-sample-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pd-subject{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
    color:var(--sc); background:color-mix(in oklab, var(--sc) 14%, white); padding:4px 10px; border-radius:999px; }
.pd-subject-dot{ inline-size:8px; block-size:8px; border-radius:50%; background:var(--sc); }
.pd-tag{ font-size:11.5px; color:#7a838c; border:1.5px dashed #c9c2b6; padding:2px 8px; border-radius:6px; }
.pd-sample-title{ margin:0; font-size:20px; font-weight:700; line-height:1.35; }
.pd-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pd-chip{ font-size:11.5px; color:#4a5560; background:#f4f1ea; padding:3px 8px; border-radius:6px; white-space:nowrap; }
.pd-obj{ margin:0; font-size:13.5px; line-height:1.75; color:#5b6670; }
.pd-view-btn{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
    border:1.5px solid var(--sc); color:var(--sc); background:#fff; text-decoration:none;
    font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:10px; }
.pd-view-btn:hover{ background:color-mix(in oklab, var(--sc) 10%, white); }

.pd-legend{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:#5b6670; padding-top:4px; }
.pd-legend-label{ font-weight:600; color:#1f2a34; }
.pd-legend-item{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#4a5560; }
.pd-legend-dot{ inline-size:10px; block-size:10px; border-radius:3px; }

/* الشراء */
.pd-buy{ display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid #ebe6dc;
    border-radius:18px; padding:22px; box-shadow:0 1px 2px rgba(31,42,52,.05),0 10px 26px rgba(31,42,52,.08); }
.pd-buy-title{ margin:0; font-size:22px; font-weight:700; }
.pd-buy-sub{ margin:0; font-size:14px; line-height:1.7; color:#5b6670; }
.pd-buy-sub strong{ color:#1f2a34; font-weight:600; }
.pd-price-btn{ display:flex; align-items:center; justify-content:center; inline-size:100%; background:var(--accent);
    color:#fff; border:0; border-radius:14px; padding:16px 18px; font:inherit; font-size:20px; font-weight:700;
    cursor:pointer; box-shadow:0 3px 0 var(--accent-hover),0 8px 18px rgba(31,111,135,.28); }
.pd-price-btn:hover{ filter:brightness(1.06); }
.pd-price-btn:focus-visible{ outline:3px solid #f0a33a; outline-offset:3px; }
.pd-price-btn[disabled]{ opacity:.6; cursor:progress; }
.pd-balance{ margin:0; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
    font-size:13.5px; color:#5b6670; background:var(--bg); border:1px dashed #ddd6c9; border-radius:10px; padding:10px 12px; }
.pd-balance strong{ color:#1f2a34; font-weight:600; }
.pd-balance a{ color:var(--accent); font-weight:600; text-decoration:none; border-bottom:1.5px solid #9fc8d6; }
.pd-owned{ display:flex; align-items:center; gap:10px; background:#e3f3e8; color:#1f6b3f; border-radius:12px;
    padding:12px 14px; font-size:15px; font-weight:600; }
.pd-owned-check{ display:inline-flex; flex:none; inline-size:26px; block-size:26px; border-radius:50%;
    background:#2e8b57; color:#fff; align-items:center; justify-content:center; font-size:14px; }
.pd-dl-btn{ display:flex; align-items:center; justify-content:center; inline-size:100%; background:#2e8b57;
    color:#fff; text-decoration:none; border-radius:14px; padding:15px 18px; font-size:17px; font-weight:700;
    box-shadow:0 3px 0 #226a42,0 8px 18px rgba(46,139,87,.28); }
.pd-perks{ list-style:none; margin:0; padding:0 6px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:#5b6670; }
.pd-perks li{ display:flex; gap:8px; align-items:flex-start; }
.pd-perk-check{ color:#2e8b57; font-weight:700; }

/* إطار الـPDF الداكن */
.pd-pdf{ margin:0; display:flex; flex-direction:column; gap:12px; }
.pd-pdf-frame{ background:#2b3540; border-radius:18px; padding:14px; box-shadow:0 12px 30px rgba(31,42,52,.18); }
.pd-pdf-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 6px 12px; color:#d6dde3; font-size:13px; }
.pd-pdf-file{ display:inline-flex; align-items:center; gap:8px; }
.pd-pdf-dot{ inline-size:10px; block-size:12px; background:#b5462a; border-radius:2px; }
.pd-pdf-pages{ background:rgba(255,255,255,.1); padding:3px 10px; border-radius:999px; }
.pd-pdf-view{ inline-size:100%; block-size:60vh; border:0; border-radius:10px; background:#fff; display:block; }
.pd-pdf-cap{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:14px; color:#5b6670; }
.pd-pdf-cap span:first-child{ font-weight:600; color:#1f2a34; }

/* ============================ محادثة نِبراس ============================ */
/* المحادثةُ تملأ عمودَ المحتوى: هوامشُ المحتوى تُلغى بهامشٍ سالب، والارتفاعُ ما تحت الشريط */
.nibras-page{ display:flex; flex-direction:column; margin:-24px; height:calc(100dvh - 58px); min-height:420px; background:var(--bg); }
.nb-head{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-block-end:1px solid var(--rule); background:#fff; }
.nb-head-mascot{ flex:none; inline-size:48px; display:inline-flex; justify-content:center; align-items:flex-end; }
.nb-head-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.nb-head-line{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.nb-head-line strong{ color:var(--accent); }
.nb-head-line .muted{ font-size:.82rem; }
.nb-meter{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted-light); }
.nb-meter-bar{ flex:1; max-inline-size:160px; block-size:4px; background:var(--rule); overflow:hidden; }
.nb-meter-bar span{ display:block; block-size:100%; background:var(--accent); }
.nb-clear{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--rule); background:#fff; color:var(--muted);
    font:600 .83rem "IBM Plex Sans Arabic",sans-serif; cursor:pointer; white-space:nowrap; }
.nb-clear:hover{ border-color:var(--bad); color:var(--bad); }
.nb-clear .icon{ inline-size:16px; block-size:16px; }
.nb-msgs{ flex:1; min-block-size:0; overflow-y:auto; padding:18px 20px 8px; display:flex; flex-direction:column; gap:14px; inline-size:100%; max-inline-size:900px; margin:0 auto; box-sizing:border-box; }
.nb-msg{ display:flex; gap:8px; }
.nb-user{ justify-content:flex-start; }
.nb-bot{ align-items:flex-end; flex-direction:row-reverse; }
.nb-bubble{ padding:10px 14px; line-height:1.7; font-size:14.5px; white-space:pre-line; overflow-wrap:anywhere; }
.nb-user .nb-bubble{ max-inline-size:78%; background:var(--accent); color:#fff; border-radius:12px 12px 12px 3px; }
.nb-answer{ display:flex; flex-direction:column; gap:6px; max-inline-size:78%; }
.nb-bot .nb-bubble{ background:#fff; border:1px solid var(--rule); color:var(--ink); border-radius:12px 12px 3px 12px; }
.nb-tag{ display:inline-flex; align-items:center; gap:5px; align-self:flex-end; font-size:.74rem; font-weight:600; color:var(--muted-light); }
.nb-tag.ok{ color:var(--ok); }
.nb-tag .icon{ inline-size:14px; block-size:14px; }
.nb-avatar{ flex:none; inline-size:40px; display:inline-flex; align-items:flex-end; justify-content:center; }
.nb-dots{ display:inline-flex; align-items:center; gap:5px; padding:12px 16px; background:#fff; border:1px solid var(--rule); border-radius:12px 12px 3px 12px; }
.nb-dots i{ inline-size:7px; block-size:7px; border-radius:50%; background:var(--accent); animation:nb-dots 1.2s ease-in-out infinite; }
.nb-dots i:nth-child(2){ animation-delay:.2s; } .nb-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes nb-dots{ 0%,80%,100%{ opacity:.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
.nb-welcome{ margin:auto; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:10px; max-inline-size:560px; padding:12px 0; }
.nb-welcome strong{ color:var(--ink); font-size:1.05rem; }
.nb-welcome p{ margin:0; font-size:.92rem; }
.nb-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:6px; }
.nb-chip{ padding:8px 14px; border:1px solid var(--rule); background:#fff; color:var(--ink); font:.88rem "IBM Plex Sans Arabic",sans-serif; cursor:pointer; }
.nb-chip:hover{ border-color:var(--accent); background:var(--accent-faint); }
.nb-compose{ display:flex; flex-direction:column; gap:8px; padding:12px 20px 14px; border-block-start:1px solid var(--rule); background:#fff; }
.nb-input{ display:flex; gap:8px; }
.nb-input input{ flex:1; min-block-size:46px; padding:0 14px; border:1px solid var(--rule); background:#fff; font:inherit; color:var(--ink); }
.nb-input input:focus{ outline:2px solid var(--accent); outline-offset:-1px; }
.nb-send{ flex:none; inline-size:48px; min-block-size:46px; border:2px solid var(--ink); background:var(--ink); color:var(--bg); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.nb-send .icon{ inline-size:20px; block-size:20px; }
.nb-send[disabled]{ opacity:.5; cursor:progress; }
.nb-foot{ margin:0; font-size:.74rem; color:var(--muted-light); }
.nb-notice{ padding:14px 16px; text-align:center; color:var(--muted); border-block-start:1px solid var(--rule); background:#fff; font-size:14px; }
@media (max-width:700px){
    .nibras-page{ margin:-16px; height:calc(100dvh - 58px); }
    .nb-head{ padding:8px 12px; } .nb-clear span{ display:none; } .nb-clear{ padding:8px; }
    .nb-msgs{ padding:14px 12px 8px; } .nb-user .nb-bubble, .nb-answer{ max-inline-size:86%; } .nb-avatar{ inline-size:36px; }
    .nb-compose{ padding:10px 12px 12px; }
}

@keyframes nb-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes nb-tilt{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
@keyframes nb-bounce{ 0%,100%{ transform:translateY(0); } 30%{ transform:translateY(-9px); } 60%{ transform:translateY(2px); } }
@keyframes nb-pop{ 0%,100%{ transform:translateY(0) scale(1); } 30%{ transform:translateY(-11px) scale(1.05); } }
@keyframes nb-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
@media (prefers-reduced-motion: reduce){ [class^="nibras-"], [class*=" nibras-"]{ animation: none !important; } }

/* ===== وثائق المساعدة الحرّة ===== */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.doc-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line, #e7e3da);
  border-radius: 12px; background: var(--card, #fff); }
.doc-card .doc-ext { flex: 0 0 auto; inline-size: 46px; block-size: 46px; display: grid; place-items: center;
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font-weight: 700; font-size: .72rem; }
.doc-card .doc-body { flex: 1 1 auto; min-inline-size: 0; }
.doc-card .doc-body strong { display: block; }
.doc-card .doc-body .desc { margin: 2px 0 4px; }
.btn.danger { color: #b3261e; border-color: color-mix(in srgb, #b3261e 40%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, #b3261e 10%, transparent); }

/* ===== نِبراس في الشريط العلويّ ===== */
.topbar-nibras { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 4px;
  padding: 5px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .85rem;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); white-space: nowrap; }
.topbar-nibras:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.topbar-nibras[aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.topbar-nibras .topbar-nibras-ico { font-size: 1rem; line-height: 1; }
@media (max-width: 560px) { .topbar-nibras .topbar-nibras-txt { display: none; } .topbar-nibras { padding: 6px 9px; } }

/* ===== ترقيم الصفحات (قالب رفيق) — مسطّحٌ مربّع الحواف كسائر الواجهة ===== */
.rpag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; font-size: .82rem; }
.rpag-btn { display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 34px; block-size: 32px; padding: 0 11px; border-radius: var(--radius);
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  text-decoration: none; font-weight: 600; line-height: 1;
  transition: background .12s, border-color .12s, color .12s; }
.rpag-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.rpag-btn.is-current { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rpag-btn.is-disabled { opacity: .4; pointer-events: none; }
.rpag-gap { padding: 0 2px; color: var(--muted-light, var(--muted)); }
.rpag-count { margin-inline-start: auto; color: var(--muted); font-weight: 500; unicode-bidi: isolate; }
@media (max-width: 560px) { .rpag-count { inline-size: 100%; margin-block-start: 4px; } }

/* ============================ لوحة المعلّم — بألوان الشعار ============================ */
.bd{ --bd-red:#e8461f; --bd-red-dark:#b93412; --bd-orange:#ff7a45; --bd-teal:#12b5a5; --bd-teal-dark:#0d8a7e; --bd-violet:#6a4cff; --bd-violet-dark:#4b2fd6;
     --bd-yellow:#ffe66d; --bd-gold:#8a6516; --bd-shadow:0 4px 14px rgba(28,27,24,.06);
     display:flex; flex-direction:column; gap:26px; max-width:1080px; margin:0 auto; }
.bd h1, .bd h2{ font-family:"Cairo","IBM Plex Sans Arabic",sans-serif; margin:0; }
.bd-hero{ display:flex; flex-direction:column; gap:14px; padding:26px 28px; border-radius:18px; color:#fff;
    background:linear-gradient(135deg,var(--bd-red) 0%,var(--bd-orange) 60%,#ffb347 100%); box-shadow:0 10px 28px rgba(232,70,31,.25); }
.bd-hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.bd-hero-id{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bd-hero-date{ font-size:.86rem; color:#fff3e8; }
.bd-hero h1{ font-size:1.9rem; font-weight:900; line-height:1.3; color:#fff; }
.bd-pill{ display:inline-flex; align-items:center; gap:6px; background:rgba(17,17,17,.28); padding:5px 12px; border-radius:999px; font-size:.83rem; font-weight:700; white-space:nowrap; }
.bd-hero-acts{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bd-cta{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 22px; background:#111; color:var(--bd-yellow);
    border-radius:12px; text-decoration:none; font:800 1.05rem "Cairo",sans-serif; box-shadow:0 8px 20px rgba(0,0,0,.22); }
.bd-cta:hover{ background:#2a2926; color:var(--bd-yellow); }
.bd-cta .icon{ inline-size:18px; block-size:18px; }
.bd-meter{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:600; }
.bd-meter-marks{ display:inline-flex; gap:4px; }
.bd-meter-marks i{ inline-size:10px; block-size:10px; border-radius:3px; background:rgba(255,255,255,.35); display:block; }
.bd-meter-marks i.on{ background:var(--bd-yellow); }
.bd-sec{ display:flex; flex-direction:column; gap:12px; }
.bd-sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.bd-sec-head h2{ font-size:1.25rem; font-weight:800; }
.bd-sec-note{ font-size:.8rem; color:var(--muted-light); }
.bd-link{ font-size:.86rem; font-weight:700; text-decoration:none; color:var(--accent); }
.bd-note{ display:flex; flex-direction:column; gap:8px; padding:16px 18px; background:#fff; border-radius:14px; box-shadow:var(--bd-shadow); border-inline-start:5px solid var(--bd-teal); }
.bd-note.warn{ border-inline-start-color:var(--bd-red); }
.bd-note p{ margin:0; color:var(--muted); font-size:.92rem; }
.bd-note-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.bd-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px; background:var(--ink); color:var(--bg); border-radius:10px; text-decoration:none; font-weight:700; font-size:.9rem; align-self:flex-start; }
.bd-btn.ghost{ background:#fff; color:var(--ink); border:2px solid var(--ink); }
.bd-slots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.bd-slot{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; background:#fff; border-radius:14px; border-top:5px solid var(--bd-teal); box-shadow:var(--bd-shadow); min-width:0; }
.bd-slot.is-empty{ border-top-color:var(--bd-red); }
.bd-slot-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bd-slot-time{ font-family:"IBM Plex Mono",monospace; font-size:.86rem; font-weight:600; direction:ltr; }
.bd-next-tag{ display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:700; color:var(--bd-violet-dark); background:#f0ecff; padding:2px 10px; border-radius:999px; }
.bd-next-tag .icon{ inline-size:13px; block-size:13px; }
.bd-slot-subject{ font-size:1.05rem; line-height:1.35; }
.bd-slot-act{ font-size:.84rem; color:var(--muted); }
.bd-slot-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px; flex-wrap:wrap; }
.bd-state{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.bd-state .icon{ inline-size:13px; block-size:13px; }
.bd-state.done{ color:var(--bd-teal-dark); background:#e6f8f6; }
.bd-state.wait{ color:var(--bd-red-dark); background:#fff1eb; }
.bd-write{ font-size:.84rem; font-weight:700; color:var(--bd-red); text-decoration:none; }
.bd-days{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.bd-day{ display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; background:#fff; color:var(--ink); text-decoration:none; box-shadow:var(--bd-shadow); min-width:0; }
.bd-day:hover{ box-shadow:0 8px 22px rgba(28,27,24,.12); color:var(--ink); }
.bd-day.is-today{ background:var(--bd-violet); color:#fff; }
.bd-day.is-today:hover{ color:#fff; }
.bd-day-head{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.bd-today{ font-size:.72rem; font-weight:800; background:var(--bd-yellow); color:var(--ink); padding:1px 8px; border-radius:999px; }
.bd-marks{ display:flex; flex-wrap:wrap; gap:4px; }
.bd-marks i, .bd-legend i{ inline-size:12px; block-size:12px; border-radius:4px; display:block; }
.bd-marks i.done, .bd-legend i.done{ background:var(--bd-teal); }
.bd-marks i.wait, .bd-legend i.wait{ background:var(--bd-red); }
.bd-marks i.later, .bd-legend i.later{ background:#e9e4dc; }
.bd-day-tally{ font-family:"IBM Plex Mono",monospace; font-size:1.15rem; font-weight:600; direction:ltr; text-align:right; }
.bd-day-state, .bd-day-none{ font-size:.8rem; color:var(--muted-light); }
.bd-day.is-today .bd-day-state{ color:#ece7ff; }
.bd-legend{ display:flex; gap:16px; font-size:.8rem; color:var(--muted-light); flex-wrap:wrap; }
.bd-legend span{ display:inline-flex; align-items:center; gap:6px; }
.bd-two{ display:grid; grid-template-columns:1fr 1.4fr; gap:26px; align-items:start; }
.bd-next{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:14px; color:#fff;
    background:linear-gradient(135deg,var(--bd-teal) 0%,var(--bd-teal-dark) 100%); box-shadow:0 8px 22px rgba(18,181,165,.28); }
.bd-next-time{ font-family:"IBM Plex Mono",monospace; font-size:1.9rem; font-weight:600; direction:ltr; line-height:1; }
.bd-next-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bd-next-body strong{ font-size:1.1rem; }
.bd-next-body span{ font-size:.84rem; color:#dff7f3; }
.bd-purse{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.bd-tile{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:14px; }
.bd-tile.gold{ background:#fff3c4; border:1px solid #ffe08a; }
.bd-tile.violet{ background:#f0ecff; border:1px solid #c9bdff; }
.bd-tile-label{ font-size:.84rem; font-weight:700; }
.bd-tile.gold .bd-tile-label{ color:var(--bd-gold); }
.bd-tile.violet .bd-tile-label{ color:var(--bd-violet-dark); }
.bd-tile-value{ font-family:"IBM Plex Mono",monospace; font-size:1.8rem; font-weight:600; direction:ltr; text-align:right; line-height:1.2; }
.bd-tile-value small{ font-family:"IBM Plex Sans Arabic",sans-serif; font-size:.9rem; font-weight:500; }
.bd-tile-note{ font-size:.8rem; color:var(--muted-light); display:inline-flex; align-items:center; gap:5px; }
.bd-tile-note.ok{ color:var(--ok); font-weight:600; }
.bd-tile-note .icon{ inline-size:14px; block-size:14px; }
.bd-thermo{ display:block; block-size:8px; border-radius:999px; background:#fff; overflow:hidden; }
.bd-thermo span{ display:block; block-size:100%; background:var(--bd-violet); }
/* ---- أدواتُك: أبوابُ المنصّة في صفٍّ واحد ---- */
.bd-tools{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:stretch; }
/*
 * بطاقاتُ «أدواتك» متساويةٌ قياسًا.
 *
 * وكانت تختلف: واحدةٌ عريضةٌ تمتدّ على الصفّ، وأخرى تحمل غلافًا بنسبة
 * 16:9 فتطول، وثالثةٌ سطران. فيبدو الصفُّ مكسورًا، ويُقرأ الاختلافُ
 * أهمّيّةً لا وجودَ لها. فصارت كلُّها بارتفاعٍ واحدٍ في الصفّ (stretch)،
 * والغلافُ بارتفاعٍ ثابتٍ لا بنسبةٍ تتمدّد، و«اذهب» ملتصقٌ بالأسفل.
 */
.bd-tool{ display:flex; flex-direction:column; gap:8px; padding:16px 18px; background:#fff; border-radius:14px;
    box-shadow:var(--bd-shadow); text-decoration:none; color:var(--ink); min-width:0;
    transition:box-shadow .18s ease, transform .18s ease; }
.bd-tool:hover{ color:var(--ink); box-shadow:0 8px 22px rgba(28,27,24,.12); transform:translateY(-2px); }
.bd-tool strong{ font-size:1.04rem; line-height:1.35; }
.bd-tool-note{ font-size:.86rem; color:var(--muted); line-height:1.55; }
.bd-tool-go{ margin-top:auto; padding-top:4px; display:inline-flex; align-items:center; gap:6px;
    font-size:.86rem; font-weight:700; color:var(--bd-violet-dark); }
.bd-tool-go .icon{ inline-size:15px; block-size:15px; }
.bd-tool-ico{ inline-size:40px; block-size:40px; display:grid; place-items:center; border-radius:12px;
    background:#e6f8f6; color:var(--bd-teal-dark); }
.bd-tool-ico .icon{ inline-size:21px; block-size:21px; }
.bd-tool-ico.violet{ background:#f0ecff; color:var(--bd-violet-dark); }
.bd-tool-ico.gold{ background:#fff6d8; color:var(--bd-gold); }
.bd-tool-ico.sky{ background:#e4f1fb; color:#1c6ea4; }
.bd-tool-ico.plain{ background:transparent; inline-size:auto; justify-content:flex-start; }
.bd-tool-cover{ inline-size:100%; block-size:104px; object-fit:cover; border-radius:10px; display:block; }
.bd-tool-tag{ align-self:flex-start; font-size:.74rem; font-weight:800; padding:2px 10px; border-radius:999px;
    background:#e6f8f6; color:var(--bd-teal-dark); }

/* البابُ الذي يدرّ مالًا: مملوءٌ بلون الشعار، وما عداه أبيض */
.bd-tool.is-live{ background:linear-gradient(135deg,var(--bd-teal) 0%,var(--bd-teal-dark) 55%,var(--bd-violet-dark) 100%);
    color:#fff; box-shadow:0 10px 26px rgba(13,138,126,.28); }
.bd-tool.is-live:hover{ color:#fff; box-shadow:0 12px 30px rgba(13,138,126,.34); }
.bd-tool.is-live .bd-tool-ico{ background:rgba(255,255,255,.18); color:#fff; }
.bd-tool.is-live .bd-tool-note{ color:rgba(255,255,255,.88); }
.bd-tool.is-live .bd-tool-go{ color:var(--bd-yellow); }
.bd-tool-slogan{ font-size:.95rem; font-weight:800; color:var(--bd-yellow); }

/* الشريطُ العريض: بطاقةٌ أفقيّةٌ تأخذ الصفَّ كلَّه */
/* لم تعد تُستعمل في «أدواتك» (وُحِّدت القياسات 14/09/2026) — تبقى لمن يحتاجها */
.bd-tool.is-wide{ grid-column:1/-1; flex-direction:row; align-items:center; gap:14px; }
.bd-tool-wide-body{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.bd-tool.is-wide .bd-tool-ico{ flex:none; }
.bd-tool.is-wide .bd-tool-go{ margin-top:0; padding-top:0; white-space:nowrap; }

@media (max-width:900px){ .bd-tools{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .bd-tools{ grid-template-columns:1fr; }
    .bd-tool.is-wide{ flex-direction:column; align-items:flex-start; gap:8px; } }

@media (max-width:900px){ .bd-slots{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bd-two{ grid-template-columns:1fr; } }
@media (max-width:640px){
    .bd{ gap:22px; }
    .bd-hero{ padding:22px 18px; } .bd-hero h1{ font-size:1.6rem; } .bd-cta{ width:100%; }
    .bd-slots{ grid-template-columns:1fr; }
    .bd-days{ display:flex; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
    .bd-day{ flex:none; inline-size:150px; scroll-snap-align:start; }
    .bd-purse{ grid-template-columns:1fr; }
}

/* شريطُ التنكّر: المديرُ داخلٌ باسم معلّم */
.impersonate-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px 16px; background: var(--warn-soft); color: var(--warn); border-bottom: 2px solid var(--warn-dot); font-size: .88rem; margin: 0; }
.impersonate-bar strong { color: var(--ink); }

/* ---- المسجَّلون الجدد: جدولٌ يسع الشاشة ---- */
.leads-table .table td, .leads-table .table th { white-space: nowrap; padding-block: 8px; }
.leads-table .lead-name { white-space: normal; min-width: 140px; max-width: 220px; }
.leads-table .sub { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.leads-table .row-actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .stats .card { padding: 10px; } .stats .num { font-size: 1.2rem !important; } }

/* ---- ثبّت التطبيق (PWA): شريطٌ يظهر حين يأذن المتصفّح ---- */
.pwa-install[hidden] { display: none; }
.pwa-install { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 8px 16px; background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--rule); font-size: .88rem; line-height: 1.4; }
.pwa-install-text { flex: 1 1 240px; min-width: 0; }
.pwa-install-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
@media (max-width: 640px) { .pwa-install { padding: 8px 12px; font-size: .82rem; } }

/* ترقيمُ Livewire: أزرارٌ لا روابط، فتُورَّث الخطوط ويُظهَر المؤشّر */
button.rpag-btn { font: inherit; font-weight: 600; cursor: pointer; }
button.rpag-btn:disabled { opacity: .5; cursor: progress; }

/* ---- كلمة السرّ من الإدارة ---- */
.pw-box { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.pw-value { font-size: 1.6rem; font-weight: 700; letter-spacing: .12em; padding: 8px 14px; background: var(--accent-soft); border-radius: var(--radius); user-select: all; }
.pw-msg summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.pw-msg pre { white-space: pre-wrap; font: inherit; font-size: .88rem; background: var(--bg-soft, #f6f4ef); padding: 10px 12px; border-radius: var(--radius); margin: 8px 0; }

/* ---- تحرير الحساب من الإدارة: حقلان في السطر على الواسع ---- */
.modal .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.modal .grid-2 .check { display: block; margin: 4px 0; }
@media (max-width: 640px) { .modal .grid-2 { grid-template-columns: 1fr; } }

/* ---- الدخول بحساب Google ---- */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #fff; color: #1f1f1f; border: 2px solid var(--rule); font-weight: 700; }
.google-btn:hover { background: #f6f6f6; }
.google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.or-line { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--muted); font-size: .82rem; }
.or-line::before, .or-line::after { content: ""; height: 1px; background: var(--rule); flex: 1; }

/* ---- الفحص الآليّ للمذكّرة في نموذج الرفض ---- */
.audit { background: var(--bg-soft, #f6f4ef); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.audit-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .86rem; margin-bottom: 8px; }
.audit-note { font-size: .85rem; color: var(--bad); margin: 0 0 8px; }
.audit-note.ok { color: var(--ok, #1c7c54); }
.audit-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-tags .tag { font-size: .78rem; }
.audit-tags .tag.bad { background: color-mix(in srgb, #b3261e 12%, transparent); color: #b3261e; }

/* ---- صفحة استعمال الذكاء الاصطناعيّ ---- */
.ai-h { margin: 26px 0 12px; font-size: 1.1rem; }
.ai-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ai-num { font-size: 1.6rem; font-weight: 600; }
.ai-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.ai-cols h3, .ai-spark h3 { font-size: .95rem; margin: 0 0 10px; }
.ai-q { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: .86rem; }
.ai-q:last-child { border-bottom: 0; }
.ai-q span:nth-child(2) { flex: 1; min-width: 0; }
/* الأعمدة: ارتفاعٌ نسبيّ داخل صندوقٍ ثابت، فلا يقفز التخطيط */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.spark-col { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.spark-col span { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }
@media (max-width: 860px) { .ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-cols { grid-template-columns: 1fr; } }

/* ---- سياسةُ المذكّرات في «مذكّرات اليوم» ---- */
.policy-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.policy-head h2 { margin: 0; }
.policy-list { margin: 0 0 12px; padding-inline-start: 20px; }
.policy-list li { margin-bottom: 6px; font-size: .9rem; color: var(--muted); }
.policy-list b { color: var(--ink); }

/* ------------------------- بابا الدفع في المحفظة ------------------------- */

/*
 * بابان متجاوران بحجمٍ واحد: لو صُغّر البريديُّ وكُبّر زرُّ البطاقة لقُرئ
 * أنّ البطاقةَ هي الطريق وأنّ الآخر استثناءٌ — والواقع عكسُه عند أكثر
 * المعلّمين.
 */
.pay-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.pay-way {
    display: flex; flex-direction: column; gap: 3px; text-align: start;
    padding: 12px 14px; background: #fff; cursor: pointer;
    border: 1px solid var(--rule); border-inline-start: 3px solid var(--rule);
    font: inherit; color: var(--muted);
}
.pay-way:hover { border-color: var(--muted-light); }
.pay-way.on { border-color: var(--accent); border-inline-start-color: var(--accent); background: var(--accent-faint); color: var(--ink); }
.pay-way-title { font-weight: 600; font-size: .95rem; }
.pay-way-note { font-size: .82rem; color: var(--muted-light); }

/* الطمأنة: تُقرأ ولا تصرخ — إطارٌ أخضر خفيف لا شارةٌ لامعة */
.pay-safe {
    margin: 12px 0 0; padding: 10px 12px; font-size: .86rem; line-height: 1.7;
    background: var(--ok-soft); color: var(--muted); border-inline-start: 3px solid var(--ok);
}

.pay-ccp { margin-top: 14px; padding: 14px; background: var(--stripe); border: 1px solid var(--rule); }
.pay-ccp h3 { margin: 0 0 10px; font-size: 1rem; }
.pay-rows { margin: 0 0 10px; display: grid; gap: 8px; }
.pay-rows > div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pay-rows dt { min-width: 110px; color: var(--muted-light); font-size: .84rem; }
.pay-rows dd { margin: 0; font-weight: 600; font-size: 1.02rem; user-select: all; }

.pay-pending { margin-top: 14px; padding: 12px 14px; background: var(--warn-soft); border-inline-start: 3px solid var(--warn-dot); }
.pay-pending h3 { margin: 0 0 6px; font-size: .95rem; }
.pay-pending ul { margin: 0; padding-inline-start: 18px; font-size: .88rem; color: var(--muted); }

@media (max-width: 560px) {
    .pay-ways { grid-template-columns: 1fr; }
}

/* --------------------------- زرُّ الشحن في الشريط -------------------------- */

/*
 * الزرُّ الوحيد المملوء في الشريط: ما عداه محضُ حدودٍ ولون نصّ. وذلك
 * مقصود — نقطةُ الجذب واحدة، ولو مُلئ زرّان لتنازعا ولم يُر أحدُهما.
 *
 * وذهبيٌّ لا لونَ العلامة: اللونُ المميّز يعني «أنت هنا» في هذه الواجهة،
 * والذهبيُّ هو لونُ المال في القائمة الجانبية — فيقرأ الأستاذُ الزرَّ
 * مالًا قبل أن يقرأ حرفَه.
 */
.topbar-pay {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 7px 14px; text-decoration: none;
    font-weight: 700; font-size: .87rem;
    background: #b8791a; color: #fff;
    border: 1px solid #8a5a0f;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    transition: background .12s;
}
.topbar-pay:hover, .topbar-pay:focus-visible { background: #8a5a0f; color: #fff; }
.topbar-pay .icon { width: 17px; height: 17px; }

/* على الضيّق يبقى الرمزُ ويسقط الحرف — كزرّ نِبراس بجانبه */
@media (max-width: 560px) {
    .topbar-pay .topbar-pay-txt { display: none; }
    .topbar-pay { padding: 7px 10px; }
}

/*
 * هدفُ الزرّ: صندوقُ الدفع يقف تحت الشريط اللاصق لا خلفه، ويُومض ومضةً
 * واحدةً عند الوصول ليعرف الأستاذُ أين وقعت به النقرة.
 */
#topup { scroll-margin-top: 74px; }
#topup:target { animation: payLand 1.6s ease-out 1; }

@keyframes payLand {
    0%, 22% { box-shadow: inset 0 0 0 2px #b8791a; }
    100% { box-shadow: inset 0 0 0 2px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    #topup:target { animation: none; box-shadow: inset 0 0 0 2px #b8791a; }
}

/*
 * تأكيدُ وصولِ الوصل، مكانَ النموذج لا في أعلى الصفحة.
 *
 * صندوقُ الدفع في نصف الصفحة الأسفل، ورسالةُ الفلاش تخرج في أعلاها —
 * فوق رأس المعلّم حيث لا ينظر. فيظنّ أنّ شيئًا لم يقع فيرفع الوصلَ
 * ثانيةً، ويصير في الطابور تحويلان لدفعةٍ واحدة.
 */
.pay-done {
    margin-top: 14px; padding: 16px 18px;
    background: var(--ok-soft); border: 1px solid var(--ok);
    border-inline-start-width: 4px;
}
.pay-done strong { display: block; font-size: 1.05rem; color: var(--ok); margin-bottom: 6px; }
.pay-done p { margin: 0 0 10px; font-size: .9rem; line-height: 1.75; color: var(--muted); }
.pay-done .pay-done-warn { color: var(--ink); }
.pay-done .pay-done-warn strong { display: inline; font-size: inherit; color: var(--bad); }

/* ------------------------ مرشِّحاتُ وثائق المساعدة ------------------------ */

/*
 * أربعةُ مرشِّحات في صندوقٍ واحد فوق النتائج.
 *
 * والخياراتُ رقائقُ لا قوائمُ منسدلة: المعلّمُ يرى كلَّ ما يستطيع اختيارَه
 * وعددَ ما فيه بنظرةٍ واحدة، بلا فتحِ قائمةٍ وإغلاقها لمعرفة ما فيها.
 * وقائمةٌ منسدلةٌ تُخفي أنّ تصنيفًا فارغٌ حتى يُختار.
 */
.doc-filters { display: flex; flex-direction: column; gap: 12px; }

.doc-search input {
    inline-size: 100%; padding: 11px 13px; font: inherit; font-size: .95rem;
    border: 1px solid var(--rule); background: var(--bg); color: var(--ink);
}
.doc-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

.doc-rows { display: flex; flex-direction: column; gap: 8px; }
.doc-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-row-label {
    flex: 0 0 auto; inline-size: 56px; font-size: .78rem; font-weight: 600;
    color: var(--muted-light);
}

/* العددُ داخل الرقيقة: يُقرأ ولا يُزاحم اسمَها */
.chip-n {
    display: inline-block; margin-inline-start: 5px; padding: 0 5px;
    font-size: .74rem; background: var(--track); color: var(--muted-light);
}
.chip.on .chip-n { background: rgba(255, 255, 255, .22); color: inherit; }

.doc-count {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-top: 4px; border-top: 1px solid var(--rule); font-size: .86rem;
}

/* تصنيفُ الوثيقة على بطاقتها: يُعرف مصدرُها بلا فتح المرشِّح */
.doc-card .doc-tag {
    display: inline-block; margin: 3px 0; padding: 1px 7px;
    font-size: .74rem; background: var(--accent-soft); color: var(--accent);
}

@media (max-width: 560px) {
    .doc-row-label { inline-size: 100%; }
}

/* ------------------------ زرُّ حزمة القسم في الدفتر ------------------------ */

/*
 * الزرُّ الوحيدُ المملوءُ في شريط الدفتر.
 *
 * وما حوله («عايِن»، «تحميل PDF») حدودٌ ولونُ نصّ — فلا يتنازع اثنان على
 * النظر. وذهبيٌّ كلونِ المال في القائمة الجانبية وزرِّ الشحن في الشريط
 * العلويّ: المعلّمُ يقرؤه مالًا قبل أن يقرأ حرفَه.
 */
.pdf-btn.pack-cta {
    background: #b8791a; border-color: #8a5a0f; color: #fff; font-weight: 700;
}
.pdf-btn.pack-cta:hover, .pdf-btn.pack-cta:focus-visible { background: #8a5a0f; color: #fff; }
.pdf-btn.pack-cta .pdf-mark { color: #ffe9b8; }
.pdf-btn.pack-cta b { font-weight: 800; margin-inline-start: 4px; }

/* روابطُ الرسائل: تُقرأ رابطًا ولا تكسر السطر مهما طالت */
.chat-text a, .nb-bubble a {
    color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
    overflow-wrap: anywhere; word-break: break-word;
}
.chat-text a:hover, .nb-bubble a:hover { color: var(--accent-hover); }

/* ---------------------- تاريخُ المراسلة في لوحة الرسائل ---------------------- */

/*
 * سجلٌّ مطويٌّ فوق مربّع الجواب.
 *
 * فوقَه لا تحته: المديرُ يقرأ ما سبق ثمّ يكتب، لا يكتب ثمّ يكتشف أنّه
 * أجاب عن هذا قبل أسبوع.
 */
.thread-history {
    margin: 10px 0; padding: 10px 12px;
    background: var(--stripe); border-inline-start: 3px solid var(--rule);
}
.thread-history > summary {
    cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--muted);
    list-style: none;
}
.thread-history > summary::-webkit-details-marker { display: none; }
.thread-history > summary::before { content: '▾ '; color: var(--muted-light); }
.thread-history:not([open]) > summary::before { content: '▸ '; }

.hist-item { padding: 10px 0; border-block-start: 1px solid var(--rule); }
.hist-item:first-of-type { border-block-start: 0; }
.hist-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.hist-body { margin: 0; font-size: .88rem; line-height: 1.75; }
.hist-reply {
    margin: 6px 0 0; padding: 6px 10px;
    background: var(--accent-faint); border-inline-start: 2px solid var(--accent);
}
.hist-reply p { margin: 2px 0 0; font-size: .86rem; line-height: 1.7; }

/* --------------------------- أعمدةُ التسجيل اليوميّ --------------------------- */

/*
 * أشرطةٌ أفقيّةٌ لا رسمٌ بيانيّ.
 *
 * السؤالُ «أيُّ يومٍ ارتفع؟» لا «كم بالضبط؟» — وشريطٌ بطولٍ نسبيّ يجيب
 * عنه في لمحة، بلا مكتبةِ رسمٍ تُحمَّل لأجل واحدٍ وعشرين رقمًا.
 */
.spark-rows { display: flex; flex-direction: column; gap: 3px; }
.spark-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.spark-row > .num:last-child { min-inline-size: 34px; text-align: end; font-weight: 600; }
.spark-row > .ltr-cell { min-inline-size: 44px; color: var(--muted-light); }
.spark-bar {
    flex: 1 1 auto; block-size: 14px; background: var(--track); position: relative;
}
.spark-bar::before {
    content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: var(--w, 0%); background: var(--accent); min-inline-size: 2px;
}

/* --------------------- تنسيقُ جواب نِبراس --------------------- */

/*
 * الفقرةُ الأولى بلا هامشٍ علويّ والأخيرةُ بلا سفليّ: الفقاعةُ حشوُها
 * كافٍ، وهوامشُ الفقرات تُضاعفه فيبدو الجوابُ عائمًا في فراغ.
 */
.nb-rich > :first-child { margin-block-start: 0; }
.nb-rich > :last-child { margin-block-end: 0; }
.nb-rich p { margin-block: .5em; line-height: 1.85; }
.nb-rich strong { font-weight: 700; color: inherit; }
.nb-rich em { font-style: italic; }
.nb-rich code {
    font-family: "IBM Plex Mono", monospace; font-size: .88em;
    padding: 1px 5px; background: var(--track); direction: ltr; display: inline-block;
}
.nb-rich ul, .nb-rich ol { margin-block: .5em; padding-inline-start: 1.4em; }
.nb-rich li { margin-block: .25em; line-height: 1.8; }
.nb-rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* --------------------- معالجُ التوليد من الصفر --------------------- */

/*
 * شاشةٌ لسؤالٍ واحد. والمعلّمُ يفتحها على هاتفه بين حصّتين، فالقياسُ
 * للهاتف أوّلًا: عمودٌ واحدٌ، وأهدافُ لمسٍ لا تقلّ عن 44 نقطة.
 *
 * والجرأةُ كلُّها في زرّ الميكروفون وحدَه — هو الفعلُ المطلوب، وما سواه
 * يخدمه. ولو زُيِّن الجميعُ لم يُعرف أيُّهما يُضغط.
 */
.wiz { max-inline-size: 780px; }

/* شريطُ الخطوات: أين هو، وكم بقي، وما الذي مضى */
.wiz-rail {
    display: flex; gap: 2px; list-style: none; margin: 0 0 18px; padding: 0;
    overflow-x: auto; scrollbar-width: none;
}
.wiz-rail::-webkit-scrollbar { display: none; }
.wiz-dot { flex: 1 1 0; min-inline-size: 92px; }
.wiz-dot > button, .wiz-dot > span {
    display: flex; align-items: center; gap: 7px; inline-size: 100%;
    padding: 8px 10px; font: inherit; font-size: .78rem; text-align: start;
    background: var(--track); color: var(--muted-light);
    border: 0; border-block-end: 3px solid var(--rule);
}
.wiz-dot > button { cursor: pointer; }
.wiz-dot > button:hover { background: var(--accent-soft); color: var(--ink); }
.wiz-dot.is-done > button { color: var(--ok); border-block-end-color: var(--ok); }
.wiz-dot.is-now > span {
    background: var(--accent-soft); color: var(--ink); font-weight: 600;
    border-block-end-color: var(--accent);
}
.wiz-num {
    inline-size: 20px; block-size: 20px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .75rem; background: var(--bg);
}
.wiz-dot.is-now .wiz-num { background: var(--accent); color: #fff; }
/* الاسمُ يُخفى على الهاتف: الرقمُ والموضعُ يكفيان، والأسماءُ الخمسةُ تزدحم */
@media (max-width: 620px) { .wiz-name { display: none; } .wiz-dot { min-inline-size: 0; } }

.wiz-card { padding: 20px; }

/* السؤال: مسموعٌ ومقروءٌ في كتلةٍ واحدة */
.wiz-ask { display: flex; align-items: flex-start; gap: 14px; margin-block-end: 20px; }
.wiz-ask h2 { margin: 0 0 6px; font-size: 1.05rem; }
.wiz-q { margin: 0; font-size: 1.05rem; line-height: 1.9; color: var(--ink); }
.wiz-ask .desc { margin-block-start: 6px; }
.wiz-play {
    flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center;
    gap: 2px; inline-size: 54px; padding: 8px 0; font: inherit; font-size: .7rem;
    cursor: pointer; background: transparent; color: var(--accent);
    border: 2px solid var(--accent); border-radius: var(--radius);
}
.wiz-play:hover { background: var(--accent); color: #fff; }
.wiz-play .icon { inline-size: 20px; block-size: 20px; }

/* الجواب */
.wiz-answer { border-block-start: 1px solid var(--rule); padding-block-start: 18px; }
.wiz-voice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }

/*
 * زرُّ التسجيل: هو وحدَه المسموحُ له أن يصرخ. وحالتاه تُقرآن بلا لون —
 * النصُّ يتبدّل والنقطةُ تنبض — فلا يُترك عمياءُ الألوانِ في حَيرة.
 */
.wiz-mic {
    display: inline-flex; align-items: center; gap: 10px;
    min-block-size: 48px; padding: 0 22px; font: inherit; font-weight: 700;
    cursor: pointer; border-radius: var(--radius);
    border: 2px solid var(--accent); background: var(--accent); color: #fff;
}
.wiz-mic:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.wiz-mic[disabled] { opacity: .5; cursor: default; }
.wiz-mic-dot { inline-size: 11px; block-size: 11px; flex: 0 0 auto; background: currentColor; }
.wiz-mic.is-rec { background: var(--bad); border-color: var(--bad); }
.wiz-mic.is-rec .wiz-mic-dot { animation: wiz-pulse 1s steps(2, end) infinite; }
@keyframes wiz-pulse { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .wiz-mic.is-rec .wiz-mic-dot { animation: none; } }

.wiz-timer { font-family: "IBM Plex Mono", monospace; font-size: .85rem; color: var(--bad); }
.wiz-busy { font-size: .85rem; color: var(--muted-light); }

/* «فهمنا: الرياضيات — السنة الثالثة» — التأكيدُ قبل المضيّ لا بعده */
.wiz-read {
    margin: 12px 0 0; padding: 9px 12px; font-size: .9rem;
    background: var(--ok-soft); color: var(--ok); border-inline-start: 3px solid var(--ok);
}
/* المستوى والمادّة: جنبًا إلى جنبٍ على الشاشة، وفوق بعضهما على الهاتف */
.wiz-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wiz-picks .field { margin-bottom: 0; }

@media (max-width: 560px) {
    .wiz-picks { grid-template-columns: 1fr; }
}

/* القوائمُ الطويلةُ تُلمس بالإصبع: ارتفاعٌ لا يقلّ عن أربعٍ وأربعين */
.wiz-answer select { min-block-size: 44px; }

/* «من المنهاج» — بيانُ المصدر بجانب الكفاءة في المراجعة */
.wiz-src {
    font-size: .72rem; color: var(--muted-light); font-weight: 500;
    padding-inline-start: 6px;
}

/* ما سُمع خامًا: صغيرٌ لأنّه شاهدٌ لا نصٌّ يُقرأ */
.wiz-heard { margin: 10px 0 0; font-size: .78rem; color: var(--muted-light); line-height: 1.7; }

/* عددُ الصور: أرقامٌ تُلمس */
.wiz-count { display: flex; gap: 8px; flex-wrap: wrap; }
.wiz-num-btn {
    inline-size: 56px; block-size: 56px; font: inherit; font-size: 1.15rem; font-weight: 700;
    cursor: pointer; border-radius: var(--radius);
    border: 2px solid var(--rule); background: var(--bg); color: var(--ink);
}
.wiz-num-btn:hover { border-color: var(--accent); }
.wiz-num-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* المراجعة */
.wiz-review { margin: 0 0 20px; border-block-start: 1px solid var(--rule); }
.wiz-review > div {
    display: grid; grid-template-columns: 150px 1fr; gap: 12px;
    padding: 12px 0; border-block-end: 1px solid var(--rule);
}
.wiz-review dt { color: var(--muted-light); font-size: .85rem; }
.wiz-review dd { margin: 0; line-height: 1.8; }
.wiz-review dd button {
    margin-inline-start: 10px; padding: 0; font: inherit; font-size: .8rem;
    background: none; border: 0; cursor: pointer;
    color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
@media (max-width: 560px) { .wiz-review > div { grid-template-columns: 1fr; gap: 4px; } }

.wiz-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* «التالي» و«أكّد» في آخر السطر: الفعلُ الأمامُ حيث ينتهي القراءة */
.wiz-nav .btn:last-child { margin-inline-start: auto; }
.wiz-go { background: var(--ok); border-color: var(--ok); }
.wiz-go:hover { background: var(--ok); border-color: var(--ink); }
/* لم يحن بعد: يُقرأ ولا يُضغط، ولا يتظاهر بأنّه زرّ */
.wiz-go.is-off {
    background: transparent; color: var(--muted-light);
    border-color: var(--rule); cursor: default;
}

/* --------------------- نِبراس: عرضُ الإكمال بثمن --------------------- */

/*
 * يظهر مكانَ صندوق الكتابة حين يبلغ المعلّمُ سقفَه اليوميّ. والثمنُ
 * والرصيدُ في السطر نفسِه: من يقرّر أن يدفع يحتاج الرقمين معًا، لا رقمًا
 * ثمّ بحثًا عن الآخر في صفحةٍ أخرى.
 */
.nb-offer { padding: 16px; background: var(--warn-soft); border-block-start: 3px solid var(--warn-dot); }
.nb-offer-q { margin: 0 0 8px; font-size: .88rem; color: var(--muted); }
.nb-offer-price { margin: 0 0 12px; font-size: 1rem; color: var(--ink); }
.nb-offer-price strong { font-size: 1.15rem; }
.nb-offer-bal { color: var(--muted-light); font-size: .88rem; }
.nb-offer-do { display: flex; gap: 10px; flex-wrap: wrap; margin-block-end: 8px; }

/* --------------------- اختباراتٌ وتعليقاتٌ من المذكّرة --------------------- */

.xtra { max-inline-size: 900px; }

/* النوعان بطاقتان لا قائمةٌ منسدلة: الفرقُ بينهما يُقرأ قبل أن يُختار */
.xtra-kinds { display: flex; gap: 10px; flex-wrap: wrap; margin-block-end: 18px; }
.xtra-kind {
    flex: 1 1 220px; text-align: start; padding: 12px 14px; font: inherit; cursor: pointer;
    background: var(--bg); color: var(--ink);
    border: 2px solid var(--rule); border-radius: var(--radius);
    display: flex; flex-direction: column; gap: 3px;
}
.xtra-kind:hover { border-color: var(--accent); }
.xtra-kind strong { font-size: 1rem; }
.xtra-kind span { font-size: .82rem; color: var(--muted-light); }
.xtra-kind.is-on { border-color: var(--accent); background: var(--accent-faint); }
.xtra-kind.is-on span { color: var(--muted); }

.xtra-price {
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
    padding: 10px 12px; margin-block-start: 6px;
    background: var(--track); border-inline-start: 3px solid var(--accent);
}
.xtra-price strong { font-size: 1.1rem; }
/* رصيدٌ لا يكفي: البطاقةُ نفسُها تقول ذلك، لا سطرٌ تحتها يُقرأ بعد الضغط */
.xtra-price.is-short { background: var(--bad-soft); border-inline-start-color: var(--bad); }

/* ثمنُ النوع على لسانه: القرارُ بين الاختبار والتقويم ثمنُه جزءٌ منه */
.xtra-tag {
    align-self: flex-start; margin-block-start: 4px;
    font-size: .78rem; font-weight: 600; color: var(--accent);
    background: var(--accent-faint); border-radius: 999px; padding: 2px 9px;
}
.xtra-kind.is-on .xtra-tag { background: var(--bg); }

.xtra-item { margin-block-start: 16px; }
.xtra-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-block-end: 10px; }
.xtra-head h2 { margin: 0; }
.xtra-head .flat-btn { margin-inline-start: auto; color: var(--bad); }

/*
 * الناتجُ نصٌّ محفوظُ الأسطر: النموذجُ يرقّم ويسرد، وطيُّ أسطره يخلط
 * السؤالَ بجوابه. و`pre` بخطّ المتن لا بخطٍّ أحاديّ — هذا كلامٌ عربيّ.
 */
.xtra-body {
    margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
    font: inherit; line-height: 1.9; color: var(--ink);
    padding: 14px; background: var(--stripe); border-inline-start: 3px solid var(--rule);
}

/* ضبطُ أوقات الدعم: يومٌ يومًا، ونوافذُ كلٍّ تحته */
.sh-day { padding-block: 12px; border-block-end: 1px solid var(--rule); }
.sh-day:last-of-type { border-block-end: 0; }
.sh-day-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 8px; }
.sh-day-a { display: flex; gap: 12px; }
.sh-win { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-end: 7px; }
.sh-win input { inline-size: 130px; }
.sh-none { margin: 0; font-size: .88rem; }

/* ==================== مواعيدُ الحصص ==================== */

/*
 * المدّةُ ثمّ الموعد: بطاقتان تُنقران بدل ثلاثة حقولٍ تُملأ.
 *
 * والمعروضُ كلُّه صالحٌ للحجز — فلا لونَ للمرفوض ولا حاجةَ إليه: ما لا
 * يصحّ لا يُرسم أصلًا.
 */
.slot-durations { display: flex; gap: 8px; flex-wrap: wrap; }
.slot-dur {
    font: inherit; cursor: pointer; padding: 9px 16px;
    border: 2px solid var(--rule); background: #fff; color: var(--ink);
    font-weight: 700;
}
.slot-dur span { font-weight: 400; font-size: .8rem; color: var(--muted); }
.slot-dur:hover { border-color: var(--accent); }
.slot-dur.is-on { border-color: var(--accent); background: var(--accent-soft); }

/* الأيّامُ صفوفٌ تُمرَّر أفقيًّا على الهاتف: عشرةُ أيّامٍ لا تسع شاشةً */
.slot-days { display: grid; gap: 14px; max-block-size: 380px; overflow-y: auto; padding-inline-end: 4px; }
.slot-day-h {
    font-weight: 700; font-size: .92rem; margin-block-end: 7px;
    display: flex; align-items: center; gap: 8px;
}
.slot-today {
    font-size: .72rem; font-weight: 600; color: var(--ok);
    background: var(--ok-soft); padding: 2px 8px; border-radius: 999px;
}
.slot-times { display: flex; gap: 7px; flex-wrap: wrap; }
.slot-none { margin: 0; font-size: .84rem; color: var(--muted); }
.slot-chip {
    font: inherit; cursor: pointer; padding: 8px 14px;
    border: 1px solid var(--rule); background: var(--bg); color: var(--ink);
}
.slot-chip:hover { border-color: var(--accent); background: #fff; }
/* المختارُ لا يُعرف بحدٍّ أدقّ بل بانقلاب اللون: يُرى من طرف الشاشة */
.slot-chip.is-on {
    border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700;
}

/* متجرُ الكروت: الفئاتُ بطاقاتٌ تُختار، والأرقامُ فيها مستورةٌ دائمًا */
.cstore { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cstore-item {
    font: inherit; text-align: start; cursor: pointer;
    display: grid; gap: 8px; padding: 16px;
    background: #fff; color: var(--ink);
    border: 2px solid var(--rule); border-block-end: 5px solid var(--tier, #10b981);
}
.cstore-item:hover { border-color: var(--tier, #10b981); }
.cstore-item.is-on { border-color: var(--tier, #10b981); background: var(--accent-faint); }
.cstore-name { font-weight: 700; font-size: 1.05rem; }
.cstore-value { font-size: .82rem; color: var(--muted); }
.cstore-value b { font-size: 1.6rem; color: var(--ink); }
.cstore-perks { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }
.cstore-stock { font-size: .78rem; color: var(--muted-light); }

/*
 * كارتُ الثقة في رأس متجر الكروت.
 *
 * الوجهُ إلى جانب الكلام لا تحته: الكارتُ شيءٌ يُمسك، وصورتُه هي الحجّة.
 * والأرضيّةُ داكنةٌ لتُفرده عن بقيّة الصفحة — هو البابُ الذي لا يُدفع فيه
 * شيء، فلا يُقرأ بطاقةً بين بطاقات. ولا زوايا مدوّرة: قاعدةُ الطقم.
 */
.trust-hero {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    padding: 26px; margin-block-end: 18px;
    color: #eaf3fa; background:
        radial-gradient(90% 120% at 92% 0%, rgba(31,95,150,.55) 0%, transparent 60%),
        linear-gradient(135deg, #0f172a 0%, #10372b 100%);
    border-inline-start: 4px solid #10b981;
}
.trust-hero-art { flex: 0 0 320px; max-inline-size: 100%; }
.trust-hero-art .rk-card { max-width: none; box-shadow: 0 6px 22px rgba(0,0,0,.45); }
.trust-hero-b { flex: 1 1 300px; min-width: 0; display: grid; gap: 10px; }
.trust-hero-eyebrow {
    justify-self: start; padding: 3px 10px; font-size: .74rem; font-weight: 700;
    background: #10b981; color: #06281d;
}
.trust-hero-b h2 { margin: 0; font-family: "Cairo", sans-serif; font-size: 1.5rem; line-height: 1.35; color: #fff; }
.trust-hero-b > p { margin: 0; font-size: .92rem; line-height: 1.85; opacity: .9; }
.trust-hero-b b { color: #7ee2b8; }

/* الخطواتُ مرقّمةٌ لأنّها تسلسلٌ فعلًا: طلبٌ ثمّ تسليمٌ ثمّ استعمال */
.trust-steps { display: grid; gap: 7px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: ts; }
.trust-steps li { display: flex; align-items: center; gap: 10px; font-size: .88rem; counter-increment: ts; }
.trust-steps li::before {
    content: counter(ts); flex: none;
    inline-size: 22px; block-size: 22px; display: grid; place-items: center;
    font-weight: 800; font-size: .76rem; color: #06281d; background: #7ee2b8;
}
/* خطواتُ الشرح في النافذة: أطولُ سطرًا من خطوات البطاقة، فتُحاذى من أعلى */
.gate-steps { text-align: start; margin-block: 10px 14px; }
.gate-steps li { align-items: flex-start; line-height: 1.7; }
.gate-steps li::before { margin-block-start: 3px; border-radius: 4px; }

.trust-hero-go { justify-self: start; margin-block-start: 6px; background: #10b981; border-color: #10b981; color: #06281d; font-weight: 800; }
.trust-hero-go:hover { background: #0ea371; border-color: #0ea371; color: #fff; }
.trust-hero-done { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: .9rem; }
.trust-hero-fine { margin: 2px 0 0; font-size: .78rem; line-height: 1.7; opacity: .72; }
@media (max-width: 560px) { .trust-hero { padding: 18px; gap: 18px; } .trust-hero-art { flex-basis: 100%; } }

.section-h { margin-block: 24px 12px; font-size: 1.1rem; }

/* ألوانُ الفئات لإطار بطاقة المتجر — والتصميمُ الكاملُ في .rk-* أسفلَ الملفّ */
.rcard--trust { --tier: #10b981; }
.rcard--customer { --tier: #b07d3a; }
.rcard--partner { --tier: #8a939b; }
.rcard--earner { --tier: #1f6f87; }
.rcard--teacher { --tier: #c9a227; }
.rcard--business { --tier: #1f2a3a; }

/* نطاقُ الامتحان: صفٌّ من القوائم يضيق إلى عمودٍ على الهاتف */
.xscope { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.xscope .field { margin: 0; }

/* المواضيع: صناديقُ اختيارٍ كثيرةٌ في مساحةٍ محدودةٍ تُمرَّر */
.xtopics {
    display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    max-block-size: 260px; overflow-y: auto;
    padding: 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg);
}
.xtopic { display: flex; align-items: flex-start; gap: 7px; line-height: 1.5; cursor: pointer; }
.xtopic input { margin-block-start: 4px; flex-shrink: 0; }
.xtopic span { font-size: .9rem; }

/*
 * معاينةُ الاختبار داخل الصفحة.
 *
 * الورقةُ المطبوعة كحليّةٌ زمرّديّة (lesson/quiz-paper)، وهذه المعاينةُ
 * بألوان الموقع: هي جزءٌ من الصفحة لا نافذةٌ على الورق، ولوحتان في شاشةٍ
 * واحدة تتنازعان. والبنيةُ نفسُها في الاثنتين — رقمٌ في مربّع، ثمّ النصّ.
 */
.xq { list-style: none; margin: 16px 0 0; padding: 0; }
.xq-item {
    display: grid; grid-template-columns: 30px 1fr; gap: 11px;
    padding: 13px 0; border-block-end: 1px solid var(--rule);
}
.xq-item:last-child { border-block-end: 0; }
.xq-n {
    inline-size: 30px; block-size: 30px; border-radius: 7px;
    border: 2px solid var(--ok); color: var(--ok);
    display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.xq-text { margin: 3px 0 0; font-weight: 600; line-height: 1.75; }
.xq-items { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.xq-items li { position: relative; padding-inline-start: 15px; line-height: 1.75; }
.xq-items li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .65em;
    inline-size: 6px; block-size: 6px; border-radius: 2px; background: var(--ok);
}
.xq-opts { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 9px 0 0; }
.xq-opt { display: flex; align-items: center; gap: 6px; }
.xq-opt b {
    inline-size: 23px; block-size: 23px; border-radius: 50%;
    border: 1.5px solid var(--rule); color: var(--muted);
    display: inline-grid; place-items: center; font-size: .78rem; flex-shrink: 0;
}
/* الجوابُ يُرى في المعاينة لأنّها للمعلّم وحدَه — وورقةُ التلميذ تُطبع بلا أجوبة */
.xq-ans {
    margin: 9px 0 0; padding: 6px 11px; border-inline-start: 3px solid var(--accent);
    background: var(--stripe); color: var(--ink); line-height: 1.6;
}
.xq-ans b { color: var(--accent); font-size: .8rem; margin-inline-end: 5px; }
.xq-raw { margin-block-start: 16px; }
.xq-raw summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.xq-raw .xtra-body { margin-block-start: 10px; }

/* --------------------- دورةٌ تُسلَّم خارجَ المنصّة --------------------- */

/*
 * لا مشغّلَ لها: الفيديوهاتُ على RegalMach. فمكانُ المشغّل يشغله ما
 * يحتاجه القارئ — عرضٌ قبل الشراء، وتعليماتُ التفعيل بعده.
 */
.ext-pitch { text-align: center; padding: 8px 0 20px; }
.ext-cover { inline-size: 100%; max-block-size: 340px; object-fit: cover; display: block; margin-block-end: 16px; }
.ext-lead { margin: 0; font-size: 1.1rem; line-height: 1.9; color: var(--muted); }

.ext-done { padding: 18px; background: var(--ok-soft); border-inline-start: 3px solid var(--ok); }
.ext-done h2 { margin: 0 0 10px; color: var(--ok); }
.ext-note { line-height: 1.95; color: var(--ink); }

/* --------------------- مُلقي الدورة --------------------- */

/*
 * الوجهُ والاسمُ قبل الوصف لا بعده: المعلّمُ الجزائريّ يشتري ممّن يعرفه،
 * و«شكون هذا؟» سؤالٌ يسبق «شنو فيها؟».
 *
 * والصورةُ مربّعةٌ لا دائريّة: ملفُّ التصميم لا يُدوّر زاويةً في أيّ موضع.
 */
.tutor {
    display: flex; align-items: center; gap: 14px;
    padding: 14px; margin-block: 18px;
    background: var(--stripe); border-inline-start: 3px solid var(--accent);
}
.tutor-face {
    inline-size: 72px; block-size: 72px; flex: 0 0 auto;
    object-fit: cover; display: block; filter: saturate(.95);
}
.tutor-id { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.tutor-role { font-size: .74rem; color: var(--muted-light); }
.tutor-id strong { font-size: 1.02rem; color: var(--ink); }
.tutor-title { font-size: .85rem; color: var(--muted); line-height: 1.6; }

/* --------------------- أدواتُ الذكاء الاصطناعيّ --------------------- */

.tools { max-inline-size: 980px; }

/* الرصيدُ شريطٌ فوق كلّ شيء: ما تحته كلُّه يُدفع منه */
.purse-bar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 14px 18px; margin-block-end: 20px;
    background: var(--accent-soft); border-inline-start: 3px solid var(--accent);
}
.purse-num { display: flex; flex-direction: column; gap: 2px; margin-inline-end: auto; }
.purse-label { font-size: .78rem; color: var(--muted); }
.purse-num strong { font-size: 1.6rem; line-height: 1; color: var(--ink); }
.purse-cur { font-size: .9rem; font-weight: 600; }

.tool-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* البطاقةُ رابطٌ كامل: تُنقر كلُّها لا زرُّها وحدَه */
.tool-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px; background: var(--bg); border: 2px solid var(--rule);
    text-decoration: none; color: inherit;
}
a.tool-card { cursor: pointer; }
a.tool-card:hover { border-color: var(--accent); background: var(--accent-faint); }
a.tool-card:hover .tool-go { background: var(--accent); border-color: var(--accent); color: var(--bg); }
a.tool-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* غيرُ الجاهزة لا تُغري: بلا إطارٍ لافتٍ ولا استجابةٍ للمرور */
.tool-card.is-soon { background: var(--stripe); border-style: dashed; }
.tool-card.is-soon:hover { border-color: var(--rule); }

.tool-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-top h2 { margin: 0; font-size: 1.05rem; }

/*
 * أيقونةُ الأداة: مربّعٌ ملوَّنٌ بلون عائلتها.
 *
 * والعائلاتُ الخمسُ هي نفسُها في القائمة الجانبيّة — من تعلّم أنّ
 * البنفسجيّ ذكاءٌ اصطناعيّ هناك يعرفه هنا. ولونٌ سادسٌ لهذه الصفحة
 * وحدَها يُبطل ما تعلّمه.
 */
.tool-ico {
    inline-size: 44px; block-size: 44px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--tint) 12%, transparent);
    color: var(--tint);
}
.tool-ico .icon { inline-size: 26px; block-size: 26px; stroke-width: 1.8; }
.tool-ico.t-work { --tint: #1f6f87; }
.tool-ico.t-money { --tint: #a8730f; }
.tool-ico.t-people { --tint: #7a3f6d; }
.tool-ico.t-admin { --tint: #3c4f8a; }
.tool-ico.t-ai { --tint: #5b3fd1; }

/* غيرُ الجاهزة: أيقونتُها رماديّةٌ فلا تَعِد بما لم يحن */
.tool-card.is-soon .tool-ico { background: var(--track); color: var(--muted-light); }

/* الاسمُ يأخذ ما بقي، والسعرُ يُزاح إلى آخر السطر */
.tool-top h2 { flex: 1 1 auto; }
.tool-price { margin-inline-start: auto; text-align: end; white-space: nowrap; }
.tool-price strong { font-size: 1.15rem; color: var(--accent); }
.tool-price span { display: block; font-size: .72rem; color: var(--muted-light); }
.tool-soon {
    margin-inline-start: auto; padding: 2px 8px; font-size: .74rem;
    background: var(--warn-soft); color: var(--warn);
}

.tool-what { margin: 0; line-height: 1.8; color: var(--muted); font-size: .92rem; }
.tool-note { margin: 0; line-height: 1.7; color: var(--muted-light); font-size: .82rem; }
.tool-go { margin-block-start: auto; text-align: center; text-decoration: none; }
/* المعطَّلُ يبقى في مكانه ليُقرأ، ولا يُنقر */
.tool-go.is-off {
    background: transparent; color: var(--muted-light);
    border-color: var(--rule); cursor: default;
}

.tools-how { margin-block-start: 20px; }
.tools-how p { line-height: 1.9; margin-block: .6em; }

/* --------------------- المعالج: الكلفةُ والتوليد --------------------- */

.wiz-price {
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
    padding: 12px 14px; margin-block-end: 14px;
    background: var(--track); border-inline-start: 3px solid var(--accent);
}
.wiz-price strong { font-size: 1.15rem; }
.wiz-price em { font-style: normal; color: var(--muted-light); font-size: .85rem; }
.wiz-price.is-free { background: var(--ok-soft); border-inline-start-color: var(--ok); flex-direction: column; gap: 4px; }
.wiz-price.is-free strong { color: var(--ok); font-size: 1.05rem; }
.wiz-price.is-short { background: var(--bad-soft); border-inline-start-color: var(--bad); }

/* أثناء البناء: الخطوةُ مكتوبةٌ لا شريطٌ يدور بلا كلام */
.wiz-working { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--accent-faint); }
.wiz-working strong { display: block; font-size: 1.05rem; }
.wiz-step { color: var(--accent); font-size: .92rem; }
.wiz-spin {
    inline-size: 22px; block-size: 22px; flex: 0 0 auto; margin-block-start: 2px;
    border: 3px solid var(--rule); border-top-color: var(--accent);
    border-radius: 50%; animation: wiz-turn .9s linear infinite;
}
@keyframes wiz-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wiz-spin { animation-duration: 3s; } }

.wiz-made { padding: 18px; background: var(--ok-soft); border-inline-start: 3px solid var(--ok); }
.wiz-made h2 { margin: 0 0 6px; color: var(--ok); }
.wiz-made p { margin: 0 0 14px; }
.wiz-made .btn { margin-inline-end: 8px; text-decoration: none; display: inline-block; }

/* سعرٌ قبل التخفيض وبعده — رقمان لا جملة */
.price-cut { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; }
.price-cut s { color: var(--muted-light); font-size: .95rem; }
.price-cut strong { font-size: 1.5rem; color: var(--ok); }

/* إطارُ يوتيوب — نسبةٌ ثابتةٌ 16:9 بلا قفزٍ عند التحميل */
.yt-frame { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; background: #000; }
.yt-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }

/* صفُّ طلبِ انضمامٍ إلى دورة */
.req-row {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 12px 0; border-block-end: 1px solid var(--rule);
}
.req-row:last-of-type { border-block-end: 0; }
.req-who, .req-what { display: flex; flex-direction: column; gap: 2px; }
.req-what { margin-inline-end: auto; }
.req-who .muted, .req-what .muted { font-size: .82rem; }
.req-do { display: flex; gap: 10px; align-items: center; }
.req-do .flat-btn { color: var(--bad); }

/* --------------------- دعوةُ تلغرام --------------------- */

/*
 * تُوضع بعد لحظةِ رضًا لا قبلها. ولونُها لونُ الناس (أرجوانيّ) لا لونُ
 * عملٍ ولا مال: هي دعوةٌ إلى مجتمعٍ، لا زرُّ إنجاز.
 */
.tg-invite {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; text-decoration: none;
    background: var(--stripe); color: var(--ink);
    border-inline-start: 3px solid #7a3f6d;
}
.tg-invite:hover { background: var(--accent-faint); }
.tg-invite strong { display: block; font-size: .95rem; }
.tg-sub { display: block; font-size: .82rem; color: var(--muted-light); }
.tg-ico {
    inline-size: 34px; block-size: 34px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; background: #7a3f6d; color: #fff;
}
.wiz-tg { margin-block-start: 16px; }
.tools-tg { margin-block-start: 18px; }

/* --------------------- سلكةُ المادّة في خانة الجدول --------------------- */

/*
 * تبدو نصًّا حتّى تُلمس: الجدولُ يُقرأ أكثرَ ممّا يُعدَّل، وسلكةٌ بإطارٍ
 * في كلّ خانةٍ تُحيل الجدولَ إلى استمارة. والسهمُ وحدَه يقول إنّها تُفتح.
 */
.tt-pick {
    inline-size: 100%; font: inherit; font-weight: 600; font-size: .82rem;
    color: var(--ink); background: transparent; border: 0; padding: 0 2px;
    border-radius: var(--radius); cursor: pointer; appearance: none;
    text-align: center; text-align-last: center;
}
.tt-pick:hover, .tt-pick:focus { background: var(--paper, #fff); outline: 2px solid var(--accent); outline-offset: -2px; }
.tt-flags { display: block; min-block-size: 0; }

/* نسبةُ الصورة: صغيرةٌ تحتها، تُطبع ولا تزاحم */
.img-credit {
    display: block; margin-block-start: 4px;
    font-size: .62rem; color: var(--muted-light); line-height: 1.5;
}

/* ---- التذييلُ الضيّق: سطرٌ واحد أسفلَ المحتوى، لا يزاحمه ---- */
.site-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap;
    padding: 10px 24px; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--muted); background: var(--bg); }
.site-foot-links { display: flex; gap: 6px 16px; flex-wrap: wrap; }
.site-foot-links a { color: var(--muted); text-decoration: none; }
.site-foot-links a:hover { color: var(--accent); text-decoration: underline; }
.site-foot-copy { white-space: nowrap; }
body.guest .site-foot { justify-content: center; background: transparent; border-top: 0; }
@media (max-width: 640px) { .site-foot { padding: 10px 16px; justify-content: center; text-align: center; } }

/* --- /create: بابان — من الصفر بالمعالج، أو على منوال مذكّرةٍ رفعها المعلّم --- */
.wiz-mode { display: flex; gap: 6px; margin: 0 0 18px; }
.wiz-mode button {
    flex: 1 1 0; padding: 10px 12px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
    background: var(--track); color: var(--muted-light); border: 0; border-block-end: 3px solid var(--rule);
}
.wiz-mode button.is-on { background: var(--accent-soft); color: var(--ink); border-block-end-color: var(--accent); }
.wiz-models { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wiz-models li { display: flex; align-items: stretch; border: 1px solid var(--rule); background: #fff; }
.wiz-models li.is-on { border-color: var(--accent); background: var(--accent-soft); }
.wiz-model-pick {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start;
    padding: 8px 12px; font: inherit; background: transparent; border: 0; cursor: pointer; color: var(--ink);
}
.wiz-model-pick strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-model-pick .muted { font-size: .78rem; }
.wiz-model-x { flex: 0 0 auto; padding: 0 12px; background: transparent; border: 0; border-inline-start: 1px solid var(--rule); color: var(--muted-light); cursor: pointer; font: inherit; }
.wiz-model-x:hover { color: var(--bad); }
.wiz-paste-go { margin-top: 6px; }

/*
 * المسجَّلون الجدد على الهاتف: كلُّ واحدٍ بطاقةٌ لا سطرٌ في جدولٍ من ثمانية
 * أعمدة يُدفع أفقيًّا. النمطُ نمطُ الدفتر اليوميّ نفسُه (انظر .plan-table):
 * حقلان في السطر، والاسمُ ترويسةً والأزرارُ ذيلًا على عرض البطاقة.
 */
@media (max-width: 720px) {
    .leads-table .table { display: block; min-width: 0; }
    .leads-table .table thead { display: none; }
    .leads-table .table tbody { display: grid; gap: 12px; padding: 10px; }
    .leads-table .table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff; border: 1px solid var(--rule); padding: 0 12px 10px;
    }
    .leads-table .table td { display: block; width: auto; white-space: normal; padding: 8px 0 0; border-bottom: 0; }
    .leads-table .table td[data-label]::before {
        content: attr(data-label); display: block; margin-block-end: 2px;
        font-size: .72rem; font-weight: 600; color: var(--muted);
    }
    .leads-table .lead-name {
        grid-column: 1 / -1; max-width: none; margin-inline: -12px; padding: 9px 12px;
        background: var(--stripe); border-block-end: 1px solid var(--rule); font-weight: 600;
    }
    .leads-table .sub { max-width: none; }
    .leads-table .row-actions { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; white-space: normal; padding-top: 10px; }
    .leads-table .row-actions .btn { flex: 1 1 auto; }
    .leads-table td[colspan] { grid-column: 1 / -1; }
}

/* بطاقةُ المذكّرة المستخرَجة تحت اسم النموذج: حقلٌ واسمُه، بلا جدول */
.wiz-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: .78rem; color: var(--ink); white-space: normal; }
.wiz-facts b { color: var(--accent); font-weight: 600; margin-inline-end: 3px; }
.wiz-facts-none { font-size: .76rem; white-space: normal; }

/* ==================== كروتُ الشحن — التصميمُ المعتمَد (12/09/2026) ============= *
 * الكارتُ 85.6 × 54 مم، ويُرسم بوحدة الحاوية: --mm ملّيمترٌ واحدٌ نسبةً إلى
 * عرض الكارت، فيصغر على الهاتف ويكبر على الحاسوب ولا يتغيّر رسمُه.
 * لكلّ فئةٍ ثلاثُ درجاتٍ مسطّحةٍ من لونها (فاتح/متوسّط/غامق)، والكودُ
 * والرقمُ التسلسليُّ بالحبر الأسود. لا زوايا مدوّرة.
 */
.rk-pair { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.rk-pair.is-used { opacity: .6; }
.rk-card {
    container-type: inline-size; position: relative; overflow: hidden;
    width: 100%; max-width: 428px; aspect-ratio: 85.6 / 54;
    background: var(--rk-light, #eaf3fa); color: #1c1b18;
    box-shadow: 0 0 0 .5px rgba(0,0,0,.35);
    --mm: calc(100cqw / 85.6);
    --kufi: "Noto Kufi Arabic", "Cairo", sans-serif;
    --naskh: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;
    --mono: "IBM Plex Mono", monospace;
}
@supports not (width: 1cqw) { .rk-card { --mm: 4px; width: 342px; } }
.rk-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-mono { font-family: var(--mono); }
.rk-deep { color: var(--rk-deep); }
.rk-shield { width: calc(var(--mm) * 6); height: auto; display: block; color: var(--rk-deep); flex: none; }

.rk--trust    { --rk-light: #eaf3fa; --rk-mid: #a9cfe9; --rk-deep: #1f5f96; }
.rk--customer { --rk-light: #f3e8df; --rk-mid: #d9ab84; --rk-deep: #8a4a25; }
.rk--partner  { --rk-light: #eef0f2; --rk-mid: #c3c8cf; --rk-deep: #4a5563; }
.rk--earner   { --rk-light: #e8f1f4; --rk-mid: #9cc4d1; --rk-deep: #1f6f87; }
.rk--teacher  { --rk-light: #f7efd6; --rk-mid: #e3c76a; --rk-deep: #b8891c; }
.rk--business { --rk-light: #e7eaee; --rk-mid: #33425a; --rk-deep: #1f2a3a; }

/*
 * الوجهُ المرسومُ بالـCSS لفئةٍ لم يصلها رسمٌ بعد.
 *
 * وتخطيطُه تخطيطُ المرسومة نفسُه ليُقرأ من الطقم: العلامةُ أعلى اليمين،
 * والشعارُ المائلُ خلفَها، والاسمُ وسطًا، وخانةُ القيمة أسفلَ اليمين،
 * والدرعُ كبيرًا يسارًا، وشريطُ العنوان في الأسفل. ويكفي أن يُسقَط
 * public/img/cards/<القيمة>.jpg ليحلّ الرسمُ محلَّه بلا تبديل شيفرة.
 */
.rk-front-css {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    padding: calc(var(--mm) * 3.4) calc(var(--mm) * 4.2) 0;
    background:
        radial-gradient(120% 90% at 88% 15%, color-mix(in srgb, var(--rk-mid) 70%, #fff) 0%, transparent 55%),
        linear-gradient(135deg, color-mix(in srgb, var(--rk-light) 92%, #fff) 0%, var(--rk-light) 55%, color-mix(in srgb, var(--rk-mid) 45%, var(--rk-light)) 100%);
}
.rk-fc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--mm) * 2); flex: none; }
.rk-fc-brand { display: flex; align-items: center; gap: calc(var(--mm) * 1.6); }
.rk-fc-brand .rk-shield { width: calc(var(--mm) * 7); color: var(--rk-deep); }
.rk-fc-brand b { display: block; font-family: var(--kufi); font-weight: 800; font-size: calc(var(--mm) * 3.2); color: #0f172a; line-height: 1.2; }
.rk-fc-brand i { display: block; font-family: var(--naskh); font-style: normal; font-size: calc(var(--mm) * 2.1); color: #1c1b18; }
.rk-fc-tag { font-family: var(--naskh); font-size: calc(var(--mm) * 2.2); color: var(--rk-deep); text-align: end; max-inline-size: calc(var(--mm) * 26); line-height: 1.4; }

.rk-fc-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--mm) * 1); min-height: 0; }
.rk-fc-name { font-family: var(--kufi); font-weight: 800; font-size: calc(var(--mm) * 5.4); color: #0f172a; line-height: 1.15; }
.rk-fc-sub { font-family: var(--naskh); font-size: calc(var(--mm) * 2.4); color: #1c1b18; }

.rk-fc-foot { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--mm) * 2); padding-bottom: calc(var(--mm) * 2.4); }
.rk-fc-val { display: grid; gap: calc(var(--mm) * .4); padding: calc(var(--mm) * 1.4) calc(var(--mm) * 2.4); background: color-mix(in srgb, #fff 80%, var(--rk-light)); box-shadow: 0 0 0 .3px rgba(0,0,0,.3); }
.rk-fc-val i { font-family: var(--naskh); font-style: normal; font-size: calc(var(--mm) * 2); color: #1c1b18; }
.rk-fc-val b { font-family: var(--kufi); font-weight: 800; font-size: calc(var(--mm) * 4); color: var(--rk-deep); line-height: 1; }
.rk-fc-emblem .rk-shield { width: calc(var(--mm) * 14); color: color-mix(in srgb, var(--rk-deep) 80%, #fff); }

.rk-fc-band { flex: none; height: calc(var(--mm) * 6); margin-inline: calc(var(--mm) * -4.2); background: var(--rk-deep); color: #fbf9f5; display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--mm) * 4.2); font-weight: 700; font-size: calc(var(--mm) * 2.5); }
.rk-fc-band span:first-child { font-family: var(--kufi); }

/* الظهر */
.rk-back { display: flex; flex-direction: column; }
.rk-band-top { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--mm) * 9); background: var(--rk-mid); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 45%); }
.rk-body { position: relative; flex: 1; display: flex; flex-direction: column; padding: calc(var(--mm) * 3) calc(var(--mm) * 4.2) 0; min-height: 0; }
.rk-head { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--mm) * 2); flex: none; }
.rk-name { display: flex; gap: calc(var(--mm) * 1.5); align-items: center; font-family: var(--kufi); font-weight: 700; font-size: calc(var(--mm) * 3); color: #0f172a; line-height: 1.2; }
.rk-value { font-family: var(--kufi); font-weight: 800; font-size: calc(var(--mm) * 3.2); color: #0f172a; white-space: nowrap; }
.rk-cols { flex: 1; display: flex; gap: calc(var(--mm) * 3.5); min-height: 0; padding: calc(var(--mm) * 2.4) 0 calc(var(--mm) * 2); }
.rk-steps { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.rk-steps-h { font-family: var(--kufi); font-weight: 700; font-size: calc(var(--mm) * 2.6); color: var(--rk-deep); margin-bottom: calc(var(--mm) * 1.4); }
.rk-steps-l { display: flex; flex-direction: column; gap: calc(var(--mm) * 1.1); font-family: var(--naskh); font-weight: 600; font-size: calc(var(--mm) * 2.7); line-height: 1.35; }
.rk-steps-l .rk-mono { font-size: calc(var(--mm) * 2.4); font-weight: 600; }
.rk-fine { font-family: var(--naskh); font-size: calc(var(--mm) * 2.1); line-height: 1.4; }
.rk-codecol { width: calc(var(--mm) * 36); flex: none; display: flex; flex-direction: column; justify-content: space-between; }
.rk-code-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(var(--mm) * 1); font-family: var(--kufi); font-weight: 700; font-size: calc(var(--mm) * 2.4); color: #0f172a; }
.rk-serial { font-size: calc(var(--mm) * 2); font-weight: 500; }
.rk-box {
    position: relative; width: 100%; height: calc(var(--mm) * 13); box-sizing: border-box; overflow: hidden;
    border: calc(var(--mm) * .35) solid #0f172a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--mm) * .7);
    font: inherit; color: #1c1b18; padding: 0; margin: 0;
}
.rk-box--foil { background: #b9bcbf; }
button.rk-box--foil { cursor: pointer; }
button.rk-box--foil:hover { background: #adb1b5; }
button.rk-box--foil:disabled { cursor: progress; }
.rk-box--open { background: #fbf9f5; }
.rk-scratch { font-family: var(--kufi); font-weight: 700; font-size: calc(var(--mm) * 2.8); }
.rk-mask { font-size: calc(var(--mm) * 2.1); font-weight: 500; }
.rk-code { font-size: calc(var(--mm) * 2.6); font-weight: 600; white-space: nowrap; position: relative; user-select: all; }
/* بقايا الطبقة الفضّية على حافّتَي المربّع بعد الكشط — كما في التصميم */
.rk-edge { position: absolute; top: 0; bottom: 0; background: #b9bcbf; }
.rk-edge-r { right: 0; width: calc(var(--mm) * 1.6); }
.rk-edge-l { left: 0; width: calc(var(--mm) * 1); }
.rk-phone { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(var(--mm) * 2.4); line-height: 1.3; color: #0f172a; border-top: calc(var(--mm) * .35) solid #0f172a; padding-top: calc(var(--mm) * 1.2); }
.rk-phone .rk-mono { font-weight: 600; }
.rk-phone-l { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; font-size: calc(var(--mm) * 2.3); }
.rk-band-bottom { height: calc(var(--mm) * 6); flex: none; background: var(--rk-deep); color: #fbf9f5; display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--mm) * 4.2); font-weight: 700; font-size: calc(var(--mm) * 2.7); line-height: 1; }
.rk-band-bottom span:first-child { font-family: var(--kufi); }
.rk-band-bottom span:last-child { font-family: "IBM Plex Sans Arabic", sans-serif; }
.rk-spent { font-family: var(--kufi); font-weight: 700; font-size: calc(var(--mm) * 3); color: #8a8a8a; }

/* «كروتي»: الوجهُ والظهرُ متجاوران على الواسع، متعاقبان على الهاتف؛ والزرُّ تحتهما */
.rk-mine { padding: 16px 0 22px; border-block-end: 1px solid var(--rule); }
.rk-mine .rk-pair { max-width: 900px; }
.rk-mine .rk-card { flex: 1 1 300px; }
.rk-mine-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; max-width: 900px; }
.rk-mine-actions .btn { flex: 0 1 420px; }
.rk-mine-done { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin-top: 10px; }

/* المتجر: الوجهُ وحدَه، والأرقامُ لا تُعرض أصلًا */
.cstore-item .rk-card { max-width: none; margin-bottom: 10px; }

/* اختيارُ نموذج الذكاء الاصطناعيّ: بطاقاتٌ يُقرأ فيها الثمنُ قبل الاختيار */
.ai-picks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ai-pick { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 11px 12px; background: #fff; border: 1px solid var(--rule); }
.ai-pick:hover { border-color: var(--accent); }
.ai-pick.is-on { border-color: var(--accent); background: var(--accent-faint); }
.ai-pick input { inline-size: auto; width: auto; margin-block-start: 4px; flex: none; }
.ai-pick-b { display: grid; gap: 3px; min-width: 0; }
.ai-pick-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ai-pick-b .muted { font-size: .8rem; line-height: 1.5; }
.ai-pick-p { font-size: .84rem; font-weight: 600; color: var(--accent); }

/* رفُّ المتجر في لوحة الكروت: فئةٌ في كلّ سطرٍ وعددُ ما عُرض منها */
.cshelf { display: grid; gap: 6px; }
.cshelf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-block-end: 1px solid var(--rule); }
.cshelf-row:last-child { border-block-end: 0; }
.cshelf-n { font-weight: 600; margin-inline-end: auto; }
.cshelf-c { font-size: .86rem; color: var(--muted); }
.cshelf-c strong { color: var(--ink); font-size: 1rem; }

/* مصدرُ التوليد في صفحة الاختبارات: ملفٌّ يرفعه المعلّم بدل ورقته */
.xtra-src-on { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: .9rem; }
.xtra-src-on strong { overflow: hidden; text-overflow: ellipsis; max-inline-size: 260px; white-space: nowrap; }

/* تأشيرُ الكروت دفعةً في لوحة الإدارة */
.cpick, .cpick-h { inline-size: 34px; text-align: center; }
.cpick input { inline-size: auto; width: auto; margin: 0; }
.cpick-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 12px; background: var(--accent-faint); }
.cpick-bar .actions { margin-inline-start: auto; }

/* كارتُ الثقة في لوحة المعلّم: دعوةٌ واحدةٌ لا بطاقةُ إحصاء */
.bd-trust {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 16px 18px; text-decoration: none; color: #fbf9f5;
    background: linear-gradient(135deg, #0f172a 0%, #10372b 100%);
    border-inline-start: 4px solid #10b981;
}
.bd-trust:hover { filter: brightness(1.08); color: #fbf9f5; }
/* وجهُ الكارت: عرضٌ ثابتٌ لا يبتلع السطر، ويُخفى على الضيّق جدًّا */
.bd-trust-card { flex: 0 0 260px; max-inline-size: 100%; }
.bd-trust-card .rk-card { max-width: none; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.bd-trust-b { display: grid; gap: 6px; flex: 1 1 260px; min-width: 0; }
.bd-trust-b strong { font-family: "Cairo", sans-serif; font-size: 1.15rem; line-height: 1.4; }
.bd-trust-b > span { font-size: .86rem; opacity: .88; line-height: 1.7; }
.bd-trust-go {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start;
    margin-block-start: 4px; padding: 8px 14px; font-weight: 700; opacity: 1;
    white-space: nowrap; background: #10b981; color: #06281d;
}
@media (max-width: 520px) { .bd-trust-card { flex-basis: 100%; } }

/* كروتُ الشحن في رأس المتجر العامّ */
.store-cards-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-cards-h h2 { margin: 0 auto 0 0; }
/*
 * الكروتُ شريطٌ يُمرَّر أفقيًّا لا شبكةٌ تتمدّد.
 *
 * صارت ستًّا، وشبكةً كانت تأخذ صفَّين في رأس المتجر فتدفع كلَّ ما تحتها
 * — الدوراتِ والحزمَ والوسومَ — خارجَ الشاشة. والشريطُ يُبقي رأسَ الصفحة
 * سطرًا واحدًا، والكارتُ المقطوعُ عند الحافّة هو ما يقول إنّ خلفه مزيدًا.
 *
 * وعرضُ البطاقة ثابتٌ (لا 1fr): في الشريط لا معنى للتمدّد، والثابتُ
 * يجعل خطوةَ التمرير معلومةً فتقف كلُّ بطاقةٍ في مكانها (scroll-snap).
 */
/* الشريطُ وسهماه: الموضعُ نسبيٌّ ليقعا على حافّتيه */
.store-slider { position: relative; }
.store-arrow {
    position: absolute; top: calc(50% - 22px); z-index: 2;
    inline-size: 38px; block-size: 44px; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    font: inherit; font-size: 1.7rem; line-height: 1;
    background: var(--ink); color: var(--bg); border: 0;
    opacity: .86; transition: opacity .12s;
}
.store-arrow:hover { opacity: 1; }
.store-arrow[hidden] { display: none; }
.store-arrow.is-prev { inset-inline-start: -6px; }
.store-arrow.is-next { inset-inline-end: -6px; }
/* السهمان زينةٌ للفأرة: اللمسُ يمرّر بالإصبع، والضيّقُ لا يتّسع لهما فوق البطاقة */
@media (max-width: 560px) { .store-arrow { display: none; } }

.store-cards {
    display: flex; gap: 14px; margin-block-start: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-behavior: smooth;
    padding-block-end: 10px;
    scrollbar-width: thin;
}
.store-cards::-webkit-scrollbar { block-size: 8px; }
.store-cards::-webkit-scrollbar-thumb { background: var(--rule); }
.store-cards::-webkit-scrollbar-thumb:hover { background: var(--muted-light); }
.store-card { flex: 0 0 clamp(230px, 74vw, 268px); scroll-snap-align: start; }
.store-card { display: grid; gap: 4px; padding: 12px; text-decoration: none; color: var(--ink); border: 1px solid var(--rule); background: #fff; }
.store-card:hover { border-color: var(--accent); }
.store-card .rk-card { max-width: none; }
.store-card-n { font-weight: 700; margin-block-start: 8px; }
.store-card-v { font-size: .84rem; color: var(--muted); }
.store-card-v b { font-size: 1.3rem; color: var(--ink); }
.store-card-s { font-size: .8rem; color: var(--muted-light); }

/* ما وُلّد بالذكاء الاصطناعيّ في «مشترياتي» */
.made-h { margin: 18px 0 8px; font-size: .95rem; }
.made-h:first-of-type { margin-top: 10px; }
.made-imgs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.made-img { margin: 0; border: 1px solid var(--rule); background: #fff; }
.made-img img { display: block; inline-size: 100%; block-size: 150px; object-fit: cover; }
.made-img figcaption { display: flex; align-items: center; gap: 8px; padding: 7px 9px; font-size: .78rem; line-height: 1.5; }
.made-img figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.made-img figcaption .doc { margin-inline-start: auto; }

/*
 * نافذةُ «وثّق رقمَك» قبل كارت الثقة.
 *
 * تُبنى على .modal لا على صنفٍ جديد: المنبثقاتُ في الموقع واحدةٌ شكلًا،
 * وما يزيد هنا هو العلامةُ والخطوات — لأنّ هذه نافذةُ دعوةٍ لا نافذةَ
 * خطأ، والمعلّمُ فيها على بابِ شيءٍ يأخذه بلا دفع.
 */
.modal.gate { max-width: 520px; border-color: #10b981; text-align: start; }
.gate-mark {
    display: grid; place-items: center; inline-size: 54px; block-size: 54px;
    margin-block-end: 14px; background: #10b981; color: #06281d;
}
.gate-mark .rk-shield { width: 30px; color: currentColor; }
.modal.gate h2 { font-family: "Cairo", sans-serif; font-size: 1.3rem; line-height: 1.4; }
.gate-lead { margin: 8px 0 0; font-size: .92rem; line-height: 1.85; color: var(--ink); }
.gate-lead b { color: var(--ok); }
.gate-steps { display: grid; gap: 8px; margin: 16px 0 18px; padding: 0; list-style: none; counter-reset: g; }
.gate-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; line-height: 1.7; counter-increment: g; }
.gate-steps li::before {
    content: counter(g); flex: none; margin-block-start: 2px;
    inline-size: 21px; block-size: 21px; display: grid; place-items: center;
    font-weight: 800; font-size: .74rem; color: #fff; background: var(--ink);
}
.gate-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-acts .btn { flex: 1 1 auto; }
.gate-go { background: #10b981; border-color: #10b981; color: #06281d; font-weight: 800; }
.gate-go:hover { background: #0ea371; border-color: #0ea371; color: #fff; }
.gate-fine { margin: 14px 0 0; font-size: .78rem; line-height: 1.7; color: var(--muted); }

/* فحصُ فهم كارت الثقة: الخيارُ يُضغط كاملًا لا نقطتُه — الأصبعُ لا يُصيب دائرةً قطرُها 14 بكسل */
.quiz-q { border: 0; padding: 0; margin: 16px 0 0; }
.quiz-q legend { padding: 0; margin-block-end: 8px; font-weight: 700; font-size: .9rem; line-height: 1.7; color: var(--ink); }
.quiz-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; margin-block-end: 6px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 3px;
    font-size: .88rem; line-height: 1.6;
}
.quiz-opt:hover { border-color: var(--ink); }
.quiz-opt:has(input:checked) { border-color: #10b981; background: #ecfdf5; }
.quiz-opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.quiz-opt input { flex: none; margin: 0; }
.quiz-q .err { margin: 4px 0 0; }
.quiz-q + .gate-acts, form .gate-acts { margin-block-start: 18px; }

/* فاتورةُ الدفع عند الاستلام: ثمنُ الكارت والتوصيل وما يُدفع عند الباب */
.cod-bill { display: grid; gap: 6px; margin: 10px 0 4px; padding: 12px 14px; background: var(--stripe); border: 1px solid var(--rule); }
.cod-bill span { display: flex; align-items: baseline; gap: 10px; font-size: .88rem; }
.cod-bill i { font-style: normal; color: var(--muted); margin-inline-end: auto; }
.cod-bill b { font-weight: 700; }
.cod-bill-t { padding-block-start: 7px; border-block-start: 1px solid var(--rule); }
.cod-bill-t i { color: var(--ink); font-weight: 600; }
.cod-bill-t b { font-size: 1.15rem; color: var(--accent); }

/* شارةُ الأعلى على كارت البيزنس في المتجر */
.store-card-top { justify-self: start; padding: 2px 8px; font-size: .7rem; font-weight: 700; background: #1f2a3a; color: #fbf9f5; }

@media (prefers-reduced-motion: reduce) { .store-cards { scroll-behavior: auto; } }

/* المدى الزمنيّ: وعاءٌ عربيٌّ فيه رقمان لاتينيّان — البدايةُ يمينًا */
.time-range { direction: rtl; unicode-bidi: isolate; white-space: nowrap; }

/*
 * «حُفظ ✓» بجانب الزرّ الذي ضُغط.
 *
 * وصفحةُ الحساب ستّةُ نماذجَ تحت بعضها، والرسالةُ كانت في أعلاها وحدَها.
 * فمن حفظ «كلمة السرّ» في أسفلها لا يرى شيئًا إلّا أن يصعد — ولا أحدَ
 * يصعد. فيُعيد الحفظَ، أو يترك الصفحةَ وهو لا يدري أوقع أم لا.
 *
 * ويخفت بعد أربع ثوانٍ بلا جافاسكربت: الرسالةُ خبرٌ للحظته لا حالةٌ تبقى.
 */
.saved-ok {
    font-size: .82rem; font-weight: 700; color: var(--ok);
    animation: saved-fade 4s ease-out forwards;
}
@keyframes saved-fade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .saved-ok { animation: none; } }

/*
 * القسمُ المعروضُ يُضغط.
 *
 * «كيف أغيّر المستوى من الثانية إلى الثالثة؟» أكثرُ ما يُسأل على واتساب،
 * والجوابُ حقلٌ في «حسابي». والمستوى معروضٌ في الشريط وفي الجدول وفي
 * الدفتر — نصًّا لا يبدو أنّه يُضغط. فيُعطى هيئةَ ما يُضغط.
 */
.tt-grade { color: inherit; text-decoration-style: dotted; text-underline-offset: 3px; }
.tt-grade:hover { color: var(--accent); text-decoration-style: solid; }
a.topbar-grade { text-decoration: none; }
a.topbar-grade:hover { border-color: var(--accent); color: var(--accent); }

/* ===================== من لا يدخل ===================== */
.lock-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lock-f { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); }
.lock-wrap { padding: 0; }
.lock-wrap .table { inline-size: 100%; }
.lk-acts { white-space: nowrap; }

@media (max-width: 720px) {
    .lock-wrap { overflow-x: visible; }
    .lock-wrap .table { display: block; min-width: 0; }
    .lock-wrap .table thead { display: none; }
    .lock-wrap .table tbody { display: grid; gap: 12px; padding: 10px; }
    .lock-wrap .table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff; border: 1px solid var(--rule); padding: 0 12px 10px;
    }
    .lock-wrap .table td { display: block; width: auto; white-space: normal; padding: 8px 0 0; border-bottom: 0; }
    .lock-wrap .table td[data-label]::before {
        content: attr(data-label); display: block; margin-block-end: 2px;
        font-size: .72rem; font-weight: 600; color: var(--muted);
    }
    .lock-wrap .table td.lk-who {
        grid-column: 1 / -1; margin-inline: -12px; padding: 9px 12px;
        background: var(--stripe); border-block-end: 1px solid var(--rule);
    }
    .lock-wrap .table td.lk-acts {
        grid-column: 1 / -1; display: grid; gap: 6px;
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        padding-top: 10px; white-space: normal;
    }
    .lock-wrap .table td.lk-acts .btn { inline-size: 100%; text-align: center; }
    .lock-wrap .table td[colspan] { grid-column: 1 / -1; }
}

/* ===================== لقطاتُ الشرح ===================== */
/*
 * نسبةُ 4:5 مفروضةٌ في العرض لا مرجوّةٌ من الملفّ.
 *
 * فما رُفع بنسبةٍ أخرى — ومَن يصوّر بالهاتف يخلط — يُقصّ من طرفيه
 * ويبقى الشريطُ مستويًا. وشريطٌ بطاقاتُه مختلفةُ الارتفاع يقفز عند كلّ
 * تمريرة.
 */
.tip-media {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--neutral-soft); border: 1px solid var(--rule);
}
.tip-media > video, .tip-media > img {
    inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
}

.tip-card { flex: 0 0 clamp(190px, 58vw, 224px); scroll-snap-align: start; display: grid; gap: 4px; }
.tip-title { font-size: .88rem; line-height: 1.45; margin-block-start: 8px; }
.tip-cap { font-size: .78rem; color: var(--muted); line-height: 1.5; }

/* ولا شريطَ تمريرٍ سفليٌّ للقطات: البطاقةُ طويلةٌ والشريطُ يبعد عنها */
.tip-track { padding-block-end: 4px; }

/* ---- لوحةُ الإدارة ---- */
.tip-form .field { max-inline-size: 520px; }

.tip-grid {
    display: grid; gap: 16px; margin-block-start: 14px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tip-item { display: grid; gap: 4px; align-content: start; }
.tip-meta { font-size: .74rem; color: var(--muted-light); }
/* ما لم يُنشر يُقال عليه: شارةٌ على وجه اللقطة لا سطرٌ تحتها يُتجاوَز بالعين */
.tip-flag {
    position: absolute; inset-block-start: 8px; inset-inline-start: 8px;
    background: var(--ink); color: var(--bg); font-size: .68rem; font-weight: 700; padding: 2px 8px;
}
.tip-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-block-start: 6px; }
.tip-acts .btn { padding-inline: 10px; }
.tip-del:hover { border-color: var(--bad); color: var(--bad); }

/* شريطُ الرفع: ملفٌّ بمئتي ميغابايت يأخذ دقائقَ، وصفحةٌ ساكنةٌ تُقرأ معطَّلة */
.tip-progress { margin-block-start: 8px; }
.tip-bar {
    position: relative; display: block; block-size: 22px;
    background: var(--stripe); border: 1px solid var(--rule);
}
.tip-bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--accent); transition: inline-size .15s; }
.tip-bar-n {
    position: relative; display: block; text-align: center; line-height: 20px;
    font-size: .72rem; font-weight: 700; color: var(--ink);
}

/*
 * صفحةُ الإعدادات تأخذ عرضَ الشاشة.
 *
 * ألسنتُها أحدَ عشرَ لسانًا، وحبسُها في تسع مئة بكسلٍ يكسر صفَّها إلى
 * ثلاثة أسطر فيضيع اللسانُ المطلوب بين ما لا يخصّه. والحقولُ داخلها
 * تبقى بعرضٍ يُقرأ: العرضُ للألسنة والبطاقات لا للسطر المكتوب.
 */
.settings-wide { max-width: min(1600px, 100%); }
.settings-wide .tabs { flex-wrap: wrap; }
/* السطرُ المكتوبُ لا يتمدّد بتمدّد الصفحة: ثمانون حرفًا حدُّ القراءة */
.settings-wide .hint, .settings-wide .desc, .settings-wide .subtitle { max-inline-size: 78ch; }
.settings-wide .field input, .settings-wide .field select, .settings-wide .field textarea { max-inline-size: 620px; }

/* كارتُ الثقة في «كيف تربح»: أوّلُ بابٍ لمن جيبُه فارغ */
.earn-trust {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding: 22px 24px; margin-block-end: 18px; text-decoration: none; color: #eaf3fa;
    background:
        radial-gradient(90% 120% at 92% 0%, rgba(31,95,150,.5) 0%, transparent 60%),
        linear-gradient(135deg, #0f172a 0%, #10372b 100%);
    border-inline-start: 4px solid #10b981;
}
.earn-trust:hover { filter: brightness(1.07); color: #eaf3fa; }
.earn-trust-art { flex: 0 0 300px; max-inline-size: 100%; }
.earn-trust-art .rk-card { max-width: none; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.earn-trust-b { flex: 1 1 280px; min-width: 0; display: grid; gap: 7px; }
.earn-trust-eyebrow { justify-self: start; padding: 3px 10px; font-size: .72rem; font-weight: 700; background: #10b981; color: #06281d; }
.earn-trust-b strong { font-family: "Cairo", sans-serif; font-size: 1.35rem; line-height: 1.4; color: #fff; }
.earn-trust-b > span { font-size: .88rem; line-height: 1.8; opacity: .9; }
.earn-trust-b b { color: #7ee2b8; }
.earn-trust-go {
    justify-self: start; display: inline-flex; align-items: center; gap: 6px;
    margin-block-start: 4px; padding: 8px 14px; font-weight: 800; opacity: 1;
    white-space: nowrap; background: #10b981; color: #06281d;
}
@media (max-width: 560px) { .earn-trust-art { flex-basis: 100%; } }
/* صفحةُ وقف كارت الثقة: تذكيرٌ لا عقوبة */
.hold { max-inline-size: 640px; padding-block: 40px; }
.hold-card { padding: 30px 32px; background: #fff; border: 2px solid var(--ink); border-inline-start: 6px solid #10b981; }
.hold-mark { display: grid; place-items: center; inline-size: 56px; block-size: 56px; margin-block-end: 16px; background: #10b981; color: #06281d; }
.hold-mark .rk-shield { width: 32px; color: currentColor; }
.hold-card h1 { margin: 0 0 14px; font-family: "Cairo", sans-serif; font-size: 1.5rem; line-height: 1.4; }
.hold-lead { margin: 0 0 12px; font-size: .95rem; line-height: 1.9; }
.hold-lead b { color: var(--ok); }
.hold-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-block: 20px 16px; }
.hold-go { background: #10b981; border-color: #10b981; color: #06281d; font-weight: 800; }
.hold-go:hover { background: #0ea371; border-color: #0ea371; color: #fff; }
.hold-fine { margin: 0; font-size: .82rem; line-height: 1.8; color: var(--muted); }

/* صفحةُ كارت الثقة عند المعلّم */
.trustp-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.trustp-rows { display: grid; gap: 2px; margin-block: 14px 16px; }
.trustp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-block-end: 1px solid var(--rule); font-size: .9rem; }
.trustp-row span { color: var(--muted); }
.trustp-row.is-head { border-block-end: 0; border-block-start: 2px solid var(--ink); margin-block-start: 4px; padding-block-start: 12px; font-weight: 700; }
.trustp-row.is-head b { font-size: 1.25rem; color: var(--ok); }
.trustp-bar { block-size: 8px; background: var(--rule); overflow: hidden; }
.trustp-bar span { display: block; block-size: 100%; background: #10b981; }
.trustp-sub { margin-block: 22px 6px; font-size: .95rem; }
.trustp-ccp { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-block: 10px 16px; font-size: .88rem; }
.trustp-ccp dt { color: var(--muted); }
.trustp-ccp dd { margin: 0; font-weight: 600; }
.trustp-pay { background: #10b981; border-color: #10b981; color: #06281d; font-weight: 800; }
.trustp-pay:hover { background: #0ea371; border-color: #0ea371; color: #fff; }
.trust-done h2 { color: var(--ok); }

/* دفترُ كروت الثقة عند الإدارة */
.tg-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-block-end: 18px; }
.tg-tile { padding: 14px 16px; background: #fff; border: 2px solid var(--ink); display: grid; gap: 2px; }
.tg-tile b { font-size: 1.5rem; line-height: 1.2; }
.tg-tile span { font-size: .8rem; color: var(--muted); }
.tg-tile.is-warn { border-inline-start: 5px solid #b45309; }
.tg-tile.is-warn b { color: #b45309; }
.table tr.is-late td { background: #fff7ed; }
.tg-phone { display: block; font-size: .78rem; }
/* «دج» بعد الرقم: تُخفى على الشاشة الواسعة — العمودُ معنون */
.tg-unit { display: none; }

/*
 * دفترُ الثقة على الهاتف: كلُّ منحةٍ بطاقة.
 *
 * وهو نمطُ /admin/users و/admin/card-orders نفسُه — والتخصيصُ بـ`td.`
 * لا بالصنف وحدَه: قاعدةُ الخليّة تغلبه فتُلغي الشبكةَ بصمت (وقد وقع).
 */
@media (max-width: 720px) {
    .tg-table { overflow-x: visible; }
    .tg-table .table { display: block; min-width: 0; }
    .tg-table .table thead { display: none; }
    .tg-table .table tbody { display: grid; gap: 12px; padding: 10px; }
    .tg-table .table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff; border: 1px solid var(--rule); padding: 0 12px 10px;
    }
    /* المتأخّرُ يُعرف من حافّته: لونُ الخلفيّة وحدَه يضيع بين البطاقات */
    .tg-table .table tbody tr.is-late { border-inline-start: 5px solid #b45309; }
    .tg-table .table td { display: block; width: auto; white-space: normal; padding: 8px 0 0; border-bottom: 0; }
    .tg-table .table td[data-label]::before {
        content: attr(data-label); display: block; margin-block-end: 2px;
        font-size: .72rem; font-weight: 600; color: var(--muted);
    }
    /* الاسمُ ترويسةُ البطاقة، ورقمُ الكارت شارةٌ فوقه */
    .tg-table .table td.tg-who {
        grid-column: 1 / -1; margin-inline: -12px; padding: 9px 12px;
        background: var(--stripe); border-block-end: 1px solid var(--rule);
    }
    .tg-table .table td.tg-serial {
        grid-column: 1 / -1; order: -1; margin-inline: -12px; padding: 6px 12px 0;
        font-size: .75rem; color: var(--muted);
    }
    .tg-table .table td.tg-serial::before { display: inline; margin-inline-end: 3px; }
    .tg-table .table td.tg-acts { grid-column: 1 / -1; padding-top: 10px; }
    .tg-table .table td.tg-acts .btn { inline-size: 100%; text-align: center; white-space: normal; }
    .tg-table .table td[colspan] { grid-column: 1 / -1; }
    .tg-unit { display: inline; font-size: .8em; color: var(--muted); }
    /* أربعُ لوحاتٍ في سطرين لا في أربعة */
    .tg-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tg-tile { padding: 10px 12px; }
    .tg-tile b { font-size: 1.25rem; }
}

/*
 * المعلّمون على الهاتف: كلُّ واحدٍ بطاقةٌ لا سطرٌ في جدولٍ من سبعة أعمدة
 * يُدفع أفقيًّا. وهو نمطُ «المسجَّلون الجدد» نفسُه (انظر .leads-table):
 * حقلان في السطر، والاسمُ ترويسةً والأزرارُ ذيلًا على عرض البطاقة.
 */
@media (max-width: 720px) {
    .users-table { overflow-x: visible; }
    .users-table .ledger { display: block; min-width: 0; }
    .users-table .ledger thead { display: none; }
    .users-table .ledger tbody { display: grid; gap: 12px; }
    .users-table .ledger tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff; border: 1px solid var(--rule); padding: 0 12px 10px;
    }
    .users-table .ledger td { display: block; width: auto; white-space: normal; padding: 8px 0 0; border-bottom: 0; }
    .users-table .ledger td[data-label]::before {
        content: attr(data-label); display: block; margin-block-end: 2px;
        font-size: .72rem; font-weight: 600; color: var(--muted);
    }
    /*
     * `td.` لا `.u-name` وحدَه.
     *
     * فقاعدةُ `.users-table .ledger td` أرجحُ منه (0,2,1 مقابل 0,2,0)،
     * فكانت تسحب منه الحشوَ والحدَّ السفليّ: ترويسةُ البطاقة تخرج بلا
     * فاصلٍ ولا هامش. والشبكةُ نجت وحدَها لأنّ قاعدةَ الخليّة لا تذكر
     * `grid-column`.
     */
    .users-table .ledger td.u-name {
        grid-column: 1 / -1; margin-inline: -12px; padding: 9px 12px;
        background: var(--stripe); border-block-end: 1px solid var(--rule); font-weight: 600;
    }
    /* الهاتفُ وشارتُه سطرٌ واحدٌ يلتفّ، لا سطرٌ يُقصّ */
    .users-table .ltr-cell { white-space: normal; }
    /*
     * الأزرارُ شبكةٌ تقتسم السطرَ بالتساوي، لا صفٌّ مرن.
     *
     * فالمرنُ يَزِن كلَّ زرٍّ بطول نصّه: «أوقف» يضيق و«ادخل باسمه» يتمدّد،
     * فيوحيان بأهمّيّةٍ لا وجودَ لها وتخطئ الإصبعُ الضيّق. وauto-fit يضعها
     * في سطرٍ واحدٍ إن اتّسع وينزلها إن ضاق — وعددُها يختلف بالمعلّم:
     * صاحبُ الحساب لا يوقف نفسَه، والمديرُ لا يُدخَل باسمه.
     */
    .users-table .ledger td.row-actions {
        grid-column: 1 / -1; display: grid; gap: 6px;
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        padding-top: 10px; white-space: normal;
    }
    .users-table .ledger td.row-actions form { display: block; }
    .users-table .ledger td.row-actions .btn {
        inline-size: 100%; text-align: center; padding-inline: 6px;
        white-space: normal; line-height: 1.35;
    }
    .users-table td[colspan] { grid-column: 1 / -1; }
}
/* محادثاتُ تلغرام المكتشَفة: تُختار بالاسم لا بالرقم */
.tg-chats { display: grid; gap: 6px; margin-block: 6px 4px; max-inline-size: 520px; }
.tg-chats .btn { justify-content: space-between; display: flex; gap: 10px; text-align: start; }

/*
 * طلباتُ الكروت على الهاتف: كلُّ طلبٍ بطاقةٌ لا سطرٌ في سبعة أعمدة.
 *
 * وهو نمطُ /admin/users و/admin/leads نفسُه. والتخصيصُ بـtd.: قاعدةُ
 * الخليّة تغلب الصنفَ المجرّد فتُلغي الشبكةَ بصمت (وقد وقع).
 */
@media (max-width: 720px) {
    .orders-table { overflow-x: visible; }
    .orders-table .table { display: block; min-width: 0; }
    .orders-table .table thead { display: none; }
    .orders-table .table tbody { display: grid; gap: 12px; padding: 10px; }
    .orders-table .table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff; border: 1px solid var(--rule); padding: 0 12px 10px;
    }
    .orders-table .table td { display: block; width: auto; white-space: normal; padding: 8px 0 0; border-bottom: 0; }
    .orders-table .table td[data-label]::before {
        content: attr(data-label); display: block; margin-block-end: 2px;
        font-size: .72rem; font-weight: 600; color: var(--muted);
    }
    /* الاسمُ ترويسةٌ، ورقمُ الطلب شارةٌ في زاويتها */
    .orders-table .table td.o-name {
        grid-column: 1 / -1; margin-inline: -12px; padding: 9px 12px;
        background: var(--stripe); border-block-end: 1px solid var(--rule); font-weight: 600;
    }
    .orders-table .table td.o-id {
        grid-column: 1 / -1; order: -1; margin-inline: -12px; padding: 6px 12px 0;
        font-size: .75rem; color: var(--muted);
    }
    .orders-table .table td.o-id::before { display: inline; margin-inline-end: 3px; }
    /* العنوانُ يطول فيأخذ السطرَ كلَّه */
    .orders-table .table td.o-ship { grid-column: 1 / -1; }
    .orders-table .table td.o-acts {
        grid-column: 1 / -1; display: grid; gap: 6px;
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        padding-top: 10px; white-space: normal;
    }
    .orders-table .table td.o-acts .btn,
    .orders-table .table td.o-acts .flat-btn { inline-size: 100%; text-align: center; white-space: normal; }
    .orders-table .table td[colspan] { grid-column: 1 / -1; }
}

/*
 * دفترُ المال الداخل: ثلاثةُ جداولَ في صفحة.
 *
 * وكان تنسيقُها كلُّه في `style=` داخلَ الوسم — فلا يُبلَغ بوسيطٍ ولا
 * يُغلَب: الأسلوبُ السطريُّ يعلو كلَّ قاعدةٍ في الملفّ. فنُقل إلى هنا
 * حرفًا بحرف، ليصير للهاتف قولٌ فيه.
 */
.pay-bar { margin-block-end: 16px; }
.pay-bar select { flex: 0 1 auto; min-inline-size: 0; }

.pay-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block-end: 18px; }
.pay-big { font-size: 1.6rem; font-weight: 600; }
.pay-unit { font-size: .9rem; }

.pay-ch { margin-block-end: 18px; }
.pay-ch h2 { margin-block-start: 0; }
.pay-ch .table { inline-size: 100%; }

.pay-table, .pay-rows { padding: 0; }
.pay-table { margin-block-end: 18px; }
.pay-table .table, .pay-rows .table { inline-size: 100%; }
.pay-acts { white-space: nowrap; }
.pay-acts form { display: inline; }
.pay-none { text-align: center; padding: 24px; }
.pay-orphans { margin-block-start: 12px; }

/*
 * وعلى الهاتف: كلُّ دافعٍ — وكلُّ دفعةٍ — بطاقة.
 *
 * والتخصيصُ بـ`td.` لا بالصنف وحدَه: قاعدةُ `.pay-table .table td`
 * أرجحُ منه فتسحب الحشوَ والشبكةَ بصمت (يحرسها PhoneTablesTest).
 */
@media (max-width: 720px) {
    /* المرشِّحان يقتسمان السطر: مكدَّسَين يتركان نصفَ العرض بياضًا */
    .pay-bar select { flex: 1 1 44%; }

    /* المالُ الداخلُ هو الخبر: سطرٌ له، والعدّادان تحته */
    .pay-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pay-stat.is-lead { grid-column: 1 / -1; }
    .pay-big { font-size: 1.35rem; }

    /* اسمُ البابِ يلتفّ ولا يُقصّ: «تحويل بريديّ — BaridiMob / CCP» سطران */
    .pay-ch .table td, .pay-ch .table th { white-space: normal; }
    /* إلّا المبلغَ: «4 000» ثمّ «دج» في سطرٍ تحته رقمٌ مقطوعٌ لا مبلغ */
    .pay-ch .table td.num { white-space: nowrap; }

    .pay-table, .pay-rows { overflow-x: visible; }
    .pay-table .table { display: block; min-width: 0; }
    .pay-rows .table { display: block; min-width: 0; }
    .pay-table .table thead { display: none; }
    .pay-rows .table thead { display: none; }
    .pay-table .table tbody { display: grid; gap: 12px; padding: 10px; }
    .pay-rows .table tbody { display: grid; gap: 12px; padding: 10px; }
    .pay-table .table tbody tr, .pay-rows .table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff; border: 1px solid var(--rule); padding: 0 12px 10px;
    }
    .pay-table .table td, .pay-rows .table td {
        display: block; width: auto; white-space: normal; padding: 8px 0 0; border-bottom: 0;
    }
    .pay-table .table td[data-label]::before, .pay-rows .table td[data-label]::before {
        content: attr(data-label); display: block; margin-block-end: 2px;
        font-size: .72rem; font-weight: 600; color: var(--muted);
    }
    /* الاسمُ ترويسةُ البطاقة */
    .pay-table .table td.pay-who, .pay-rows .table td.pay-who {
        grid-column: 1 / -1; margin-inline: -12px; padding: 9px 12px;
        background: var(--stripe); border-block-end: 1px solid var(--rule);
    }
    /* والتاريخُ شارةٌ فوقه: هو ترتيبُ القائمة لا خبرٌ في ذاته */
    .pay-rows .table td.pay-when {
        grid-column: 1 / -1; order: -1; margin-inline: -12px; padding: 6px 12px 0; font-size: .72rem;
    }
    .pay-rows .table td.pay-when::before { display: inline; margin-inline-end: 3px; }
    /* والمرجعُ سلسلةٌ طويلةٌ تأخذ السطرَ وتنكسر حيث تشاء */
    .pay-rows .table td.pay-ref { grid-column: 1 / -1; word-break: break-all; }
    .pay-table .table td.pay-acts {
        grid-column: 1 / -1; display: grid; gap: 6px;
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        padding-top: 10px; white-space: normal;
    }
    .pay-table .table td.pay-acts form { display: block; }
    .pay-table .table td.pay-acts .btn { inline-size: 100%; text-align: center; white-space: normal; }
    .pay-table .table td[colspan], .pay-rows .table td[colspan] { grid-column: 1 / -1; }
}

/* زياراتُ الصفحات: بحثٌ ومدّة، وبطاقاتٌ على الهاتف */
.pv-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pv-q { flex: 1 1 260px; min-inline-size: 0; }
.pv-bar select { flex: 0 0 auto; }

@media (max-width: 720px) {
    .pv-table { overflow-x: visible; }
    .pv-table .table { display: block; min-width: 0; }
    .pv-table .table thead { display: none; }
    .pv-table .table tbody { display: grid; gap: 10px; padding: 10px; }
    .pv-table .table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff; border: 1px solid var(--rule); padding: 0 12px 10px;
    }
    .pv-table .table td { display: block; width: auto; white-space: normal; padding: 8px 0 0; border-bottom: 0; }
    .pv-table .table td[data-label]::before {
        content: attr(data-label); display: block; margin-block-end: 2px;
        font-size: .72rem; font-weight: 600; color: var(--muted);
    }
    .pv-table .table td.pv-name {
        grid-column: 1 / -1; margin-inline: -12px; padding: 9px 12px;
        background: var(--stripe); border-block-end: 1px solid var(--rule); font-weight: 600;
    }
    /* التاريخُ والوقتُ لا يُقسمان على عمودٍ ضيّق */
    .pv-table .table td.pv-last { grid-column: 1 / -1; }
    .pv-table .table td[colspan] { grid-column: 1 / -1; }
}
/* «نسيتَ كلمة السرّ؟» يُبرَز بعد محاولةٍ فاشلة: هو البابُ المطلوب حينئذٍ */
.login-forgot.is-lit { font-weight: 700; color: var(--accent); text-decoration: underline; }

/* ═══════════ تلاميذي وكرّاسُ التنقيط ═══════════ */
.std-load h2 { margin-block-end: 6px; }
.std-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 14px 16px; }
.std-file { margin-block-start: 4px; padding-block-start: 14px; border-block-start: 1px solid var(--rule); }

.std-pick { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; }
.std-pick-row { display: grid; gap: 4px; flex: 1 1 200px; }
.std-pick-row label { font-size: .82rem; font-weight: 600; color: var(--muted); }

/* الكرّاس: صفٌّ لكلّ تلميذ، وحقلان يُملآن بإصبع */
.std-table th { white-space: nowrap; font-size: .82rem; }
.std-table td { vertical-align: middle; }
.std-n { inline-size: 44px; color: var(--muted); }
.std-name { font-weight: 600; min-inline-size: 160px; }
.std-name .sub { display: block; font-weight: 400; font-size: .74rem; }
.std-mark { inline-size: 116px; }
.std-in {
    inline-size: 100%; max-inline-size: 92px; text-align: center;
    font-size: 1.05rem; font-weight: 600; padding: 7px 4px;
}
.std-in::placeholder { font-weight: 400; color: var(--rule); }
.std-avg { inline-size: 104px; font-weight: 600; }
.std-avg b { font-size: 1.05rem; }
.std-low { color: var(--bad); }
.std-rank { inline-size: 68px; color: var(--muted); }
.std-note { margin-block-start: 12px; }

/* والهاتف: كلُّ تلميذٍ بطاقة — الجدولُ سبعةُ أعمدةٍ لا تسعها شاشة */
@media (max-width: 720px) {
    .std-book { overflow-x: visible; }
    .std-table { display: block; min-width: 0; }
    .std-table thead { display: none; }
    .std-table tbody { display: grid; gap: 10px; padding: 10px; }
    .std-table tbody tr {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
        background: #fff; border: 1px solid var(--rule); padding: 0 12px 10px;
    }
    .std-table td { display: block; inline-size: auto; max-inline-size: none; white-space: normal; padding: 8px 0 0; border-bottom: 0; }
    .std-table td[data-label]::before {
        content: attr(data-label); display: block; margin-block-end: 3px;
        font-size: .72rem; font-weight: 600; color: var(--muted);
    }
    .std-table td.std-name {
        grid-column: 1 / -1; margin-inline: -12px; padding: 9px 12px;
        background: var(--stripe); border-block-end: 1px solid var(--rule);
    }
    /* رقمُ التلميذ شارةٌ فوق اسمه لا عمودٌ مستقلّ */
    .std-table td.std-n { grid-column: 1 / -1; order: -1; margin-inline: -12px; padding: 6px 12px 0; font-size: .75rem; }
    .std-table td.std-n::before { display: inline; margin-inline-end: 3px; }
    .std-in { max-inline-size: none; font-size: 1.15rem; padding: 10px 4px; }
    .std-pick-row { flex-basis: 100%; }
}

/* ---------------- الملاحظات والاقتراحات (admin/feedback) ---------------- */
.feedback .fb-kinds { display: flex; gap: 18px; flex-wrap: wrap; }
.feedback .fb-kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.feedback .fb-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 8px; }
.feedback .fb-thumb { display: flex; flex-direction: column; gap: 4px; inline-size: 150px; }
.feedback .fb-thumb img { inline-size: 150px; block-size: 100px; object-fit: cover; border: 1px solid var(--rule); background: var(--bg); }
.feedback .fb-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    inline-size: 150px; block-size: 100px; border: 1px solid var(--rule); background: var(--bg); text-align: center; padding: 6px; }
.feedback .fb-file b { font-size: 1.05rem; letter-spacing: .04em; color: var(--brand); }
.feedback .fb-file span { font-size: .78rem; line-height: 1.25; word-break: break-word; }
.feedback .fb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 14px; }
.feedback .fb-item { border-block-start: 1px solid var(--rule); padding-block: 14px; display: grid; gap: 6px; }
.feedback .fb-item.st-done { opacity: .7; }
.feedback .fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feedback .fb-body { white-space: pre-line; margin: 0; }
.feedback .fb-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback .fb-del { color: var(--bad); }
.grade-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block-start: 10px; }

/* إخفاءُ «نِبراس» من شريط الهاتف — بعد قاعدته أدناه كي تغلبها (ملاحظة 17/09) */
@media (max-width: 560px) { .topbar-nibras { display: none; } }