/* ==========================================================================
   مساحة — نظام التصميم الموحّد (المرحلة ② · ٢٠٢٦-٠٩-١٧)
   ==========================================================================
   المصدر الوحيد: لوحة التصميم المعتمدة (Main · Phone · Listing · Archive ·
   SellerApp · BuyerApp · Admin). كل قيمة هنا **منقولة من شيفرة اللوحة
   حرفاً** — لا اجتهاد ولا تقريب؛ ومن أراد قيمة جديدة يضيفها هنا لا في
   قالب [§31: بيتٌ واحد للرموز].

   ⛔ هذا الملف **خامل عند نشره**: لا قاعدة فيه تمسّ وسماً عارياً (body/
   h1/a…)، وكل أصنافه بادئتها `.msd-` لا يستهلكها قالب بعد. الأثر المرئي
   يبدأ مع نشرة الرئيسية (المرحلة ③-١) حين تُكتب الأصناف في القوالب.

   قرارات المالك المقيِّدة (٢٠٢٦-٠٩-١٧):
   ① أخضر واتساب لواتساب حصراً — واللوحة تُصحَّح هنا، والذهب لبقية
     الأفعال الأولى (والقيمة تُكتب في رمزها أدناه وحده، لا هنا).
   ② لا أقواس ولا نقوش ولا علامات أقسام — القمرية في الشعار وحده.
   ③ أصل شعار واحد (قمرية ذهبية في مربع ليلي) للموقع والتطبيق.
   ④ الوضع الليلي يُشتق من هذه الرموز نفسها — والمبدّل يبقى.
   ⑤ Alexandria وحده خطّاً.

   جوال أولاً: كل مقاس أدناه مكتوبٌ لعرض 390px، وما يكبر يكبر عند
   نقطة الانتقال 700px فما فوق — لا العكس.
   ========================================================================== */

:root {
    /* ── الأرض والأسطح ── */
    --ds-ground:     #FFFDF8;  /* أرض الصفحة — عاجيّ دافئ */
    --ds-surface:    #FFFFFF;  /* البطاقات والأوراق */
    --ds-sand:       #F5F0E6;  /* أسطح ناعمة: حبوب التنقل، الرقاقات، الفراغ */
    --ds-sand-deep:  #E9E1D2;  /* حوامل الصور قبل تحميلها */

    /* ── الحبر ── */
    --ds-ink:        #17161A;  /* العناوين والكتل الليلية */
    --ds-ink-2:      #3C3934;  /* نص المتن الطويل */
    --ds-muted:      #6E675C;  /* الصامت: التسميات والمساعدة */

    /* ── الخطوط الفاصلة ── */
    --ds-line:       #E6DECD;  /* حدّ الزر الثانوي (1.5px) */
    --ds-hair:       #EFE9DD;  /* خيط الأقسام والتذييل */
    --ds-hair-2:     #F1EBDF;  /* خيط داخل البطاقة */

    /* ── الذهب: الفعل الأول وحده (≤10% من أي شاشة) ── */
    --ds-gold:       #C9962B;
    --ds-gold-text:  #C9962B;  /* الذهب نصّاً على الأرض الفاتحة */
    --ds-gold-soft:  #FFF4DD;  /* الذهب الناعم سطحاً */
    --ds-gold-ink:   #8F6A1E;  /* نصّ فوق الذهب الناعم */

    /* ── السطح الحبريّ: زوجٌ ينقلب معاً ──
       ⚠️ درسٌ مقيس على الشاشة: استُعمل `--ds-ink` (رمز **النصّ**) خلفيةً
       لأزرارٍ وشارات، فلمّا انقلب في الليل صار الزرّ عاجيّاً ونصُّه أبيض —
       زرٌّ بلا كلمة. فالسطح له رمزه ونصُّه رمزه، وينقلبان معاً لا أحدهما. */
    --ds-ink-surface:       #17161A;
    --ds-ink-surface-hover: #2A2830;
    --ds-on-ink:            #FFFFFF;

    /* ── داخل الكتل الليلية ── */
    --ds-night-2:    #2A2830;  /* المرتفع فوق الليل */
    --ds-on-night:       #FFFFFF;
    --ds-on-night-muted: #B9B3A6;
    --ds-on-night-dim:   #8D8778;

    /* ── الحالات الوظيفية (ثلاث لا رابع لها) ── */
    --ds-ok-bg:      #E8F3EE;  --ds-ok:      #1F6F5C;  /* منشور · نشط · مكتمل */
    --ds-warn-bg:    #FFF4DD;  --ds-warn:    #8F6A1E;  /* مراجعة · تمييز · انتباه */
    --ds-danger-bg:  #FBEAE4;  --ds-danger:  #B5472B;  /* تصحيح · بلاغ · رفض */

    /* ── لونٌ واحد خارج العائلة: واتساب [قرار المالك ①] ── */
    --ds-wa:         #25D366;
    --ds-wa-ink:     #FFFFFF;

    /* ── الزوايا: أربع عائلات لا ستّ عشرة ── */
    --ds-r-pill:     999px;  /* كل زر · رقاقة · شارة · حقل بحث · ترقيم */
    --ds-r-card:     22px;   /* البطاقة والورقة */
    --ds-r-card-sm:  18px;   /* بطاقة مصغّرة (لوحة · محفوظات) */
    --ds-r-block:    32px;   /* الكتل الكبرى (قسم ليليّ · دعوة) */
    --ds-r-img:      16px;   /* صورة داخل بطاقة */
    --ds-r-img-sm:   12px;   /* صورة مصغّرة */
    --ds-r-nav:      14px;   /* صفّ تنقّل */

    /* ── الظلال: ناعمة لا تُرى وحدها ── */
    --ds-shadow-soft:  0 6px 20px rgba(23, 22, 26, 0.05);
    --ds-shadow-card:  0 6px 24px rgba(23, 22, 26, 0.06);
    --ds-shadow-bar:   0 8px 28px rgba(23, 22, 26, 0.07);
    --ds-shadow-float: 0 16px 40px rgba(23, 22, 26, 0.10);

    /* ── الطباعة: Alexandria وحده [قرار ⑤] ── */
    --ds-font: 'Alexandria', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --ds-fs-11: 11px;  --ds-fs-12: 12px;  --ds-fs-13: 13px;  --ds-fs-14: 14px;
    --ds-fs-15: 15px;  --ds-fs-16: 16px;  --ds-fs-17: 17px;  --ds-fs-19: 19px;
    --ds-fs-20: 20px;  --ds-fs-22: 22px;  --ds-fs-26: 26px;  --ds-fs-30: 30px;
    --ds-fs-34: 34px;
    --ds-lh-tight: 1.35;  --ds-lh-body: 1.7;  --ds-lh-long: 1.9;

    /* ── الارتفاعات: أدناها 44 للمس [قاعدة ملزمة] ── */
    --ds-h-chip:  34px;  /* رقاقة عرضٍ لا تُلمس */
    --ds-h-touch: 44px;  /* الحدّ الأدنى لكل ما يُلمس */
    --ds-h-sm:    44px;
    --ds-h-md:    48px;
    --ds-h-lg:    52px;
    --ds-h-xl:    56px;

    /* ── التباعد: شبكة 4 ── */
    --ds-sp-1: 4px;   --ds-sp-2: 8px;   --ds-sp-3: 12px;  --ds-sp-4: 16px;
    --ds-sp-5: 20px;  --ds-sp-6: 24px;  --ds-sp-7: 32px;  --ds-sp-8: 40px;
    --ds-sp-9: 56px;  --ds-sp-10: 72px; --ds-sp-11: 96px;

    /* ── الحركة: خروجٌ ناعم لا ارتداد ── */
    --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ds-dur:  0.22s;
}

/* ==========================================================================
   الوضع الليلي — مشتقٌّ من الرموز نفسها [قرار المالك ④(أ)]
   الليل يصير أرضاً، والعاجيّ يصير حبراً؛ والذهب يفتح درجةً كي يُقرأ.
   ⛔ ولا رمز يُولد هنا: كل اسم أدناه معرَّف فوق — وإلا فُقد في النهار.
   ========================================================================== */
[data-theme="dark"] {
    --ds-ground:     #17161A;
    --ds-surface:    #201F27;
    --ds-sand:       #2A2830;
    --ds-sand-deep:  #343038;

    --ds-ink:        #FFFDF8;
    --ds-ink-2:      #E4DDD0;
    --ds-muted:      #A9A296;

    --ds-line:       #3A3640;
    --ds-hair:       #2A2830;
    --ds-hair-2:     #2F2C35;

    --ds-gold-text:  #E3B457;  /* الذهب نصّاً فوق الليل — يفتح للتباين */
    --ds-gold-soft:  #33291A;
    --ds-gold-ink:   #E8C46A;

    --ds-night-2:    #2A2830;

    --ds-ink-surface:       #FFFDF8;
    --ds-ink-surface-hover: #E4DDD0;
    --ds-on-ink:            #17161A;

    --ds-ok-bg:      #17302A;  --ds-ok:      #78CBAC;
    --ds-warn-bg:    #33291A;  --ds-warn:    #E8C46A;
    --ds-danger-bg:  #38221D;  --ds-danger:  #E39179;

    --ds-shadow-soft:  0 6px 20px rgba(0, 0, 0, 0.45);
    --ds-shadow-card:  0 6px 24px rgba(0, 0, 0, 0.50);
    --ds-shadow-bar:   0 8px 28px rgba(0, 0, 0, 0.55);
    --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, 0.60);
}

/* ==========================================================================
   ١ · الأزرار — عائلة واحدة بستّة أوجه
   ⛔ الذهب للفعل الأول وحده في الشاشة؛ والليل للبارز الثاني.
   ========================================================================== */
.msd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-2);
    min-height: var(--ds-h-touch);
    height: var(--ds-h-md);
    padding: 0 var(--ds-sp-5);
    border: 0;
    border-radius: var(--ds-r-pill);
    font-family: var(--ds-font);
    font-size: var(--ds-fs-15);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
}
.msd-btn--gold      { background: var(--ds-gold); color: #FFFFFF; }
.msd-btn--gold:hover{ background: #B58524; color: #FFFFFF; }
.msd-btn--ink       { background: var(--ds-ink-surface); color: var(--ds-on-ink); }
.msd-btn--ink:hover { background: var(--ds-ink-surface-hover); color: var(--ds-on-ink); }
.msd-btn--outline   { background: transparent; border: 1.5px solid var(--ds-line); color: var(--ds-ink); }
.msd-btn--outline:hover { border-color: var(--ds-gold); color: var(--ds-ink); }
.msd-btn--soft      { background: var(--ds-sand); color: var(--ds-ink); }
.msd-btn--gold-soft { background: var(--ds-gold-soft); color: var(--ds-gold-ink); }
/* [قرار المالك ①] الأخضر لواتساب حصراً — لا يُستعار لفعل آخر أبداً. */
.msd-btn--wa        { background: var(--ds-wa); color: var(--ds-wa-ink); }

.msd-btn--sm  { height: var(--ds-h-sm); padding: 0 var(--ds-sp-4); font-size: var(--ds-fs-13); }
.msd-btn--lg  { height: var(--ds-h-lg); padding: 0 var(--ds-sp-6); font-size: var(--ds-fs-16); }
.msd-btn--xl  { height: var(--ds-h-xl); padding: 0 var(--ds-sp-7); font-size: var(--ds-fs-16); }
.msd-btn--block { display: flex; width: 100%; }
.msd-btn[disabled], .msd-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.msd-btn svg { flex-shrink: 0; }

/* زر أيقونيّ دائريّ (حفظ · مشاركة · إغلاق) — 44 لمساً لا 34 */
.msd-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-h-touch);
    height: var(--ds-h-touch);
    padding: 0;
    border: 0;
    border-radius: var(--ds-r-pill);
    background: var(--ds-surface);
    color: var(--ds-ink);
    cursor: pointer;
    box-shadow: var(--ds-shadow-soft);
}

/* ==========================================================================
   ٢ · الحقول والنماذج
   ========================================================================== */
.msd-field { display: flex; flex-direction: column; gap: var(--ds-sp-1); }
.msd-label {
    font-size: var(--ds-fs-13);
    font-weight: 600;
    color: var(--ds-muted);
}
.msd-input, .msd-select, .msd-textarea {
    width: 100%;
    min-height: var(--ds-h-touch);
    padding: var(--ds-sp-3) var(--ds-sp-4);
    border: 1.5px solid var(--ds-line);
    border-radius: var(--ds-r-nav);
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-family: var(--ds-font);
    font-size: var(--ds-fs-15);
    font-weight: 500;
    transition: border-color var(--ds-dur) var(--ds-ease);
}
.msd-textarea { min-height: 96px; resize: vertical; line-height: var(--ds-lh-body); }
.msd-input:focus, .msd-select:focus, .msd-textarea:focus {
    outline: 2px solid var(--ds-gold);
    outline-offset: 2px;
    border-color: var(--ds-gold);
}
.msd-input::placeholder, .msd-textarea::placeholder { color: var(--ds-muted); opacity: 1; }
.msd-help  { font-size: var(--ds-fs-12); line-height: var(--ds-lh-body); color: var(--ds-muted); }
.msd-error { font-size: var(--ds-fs-13); font-weight: 600; color: var(--ds-danger); }

/* شريط البحث/الفلترة: حبّة بيضاء عائمة — عمودٌ على الجوال وصفٌّ على الشاشة */
.msd-bar {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-2);
    padding: var(--ds-sp-3);
    background: var(--ds-surface);
    border-radius: var(--ds-r-card);
    box-shadow: var(--ds-shadow-bar);
}
.msd-bar__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    padding: var(--ds-sp-2) var(--ds-sp-4);
    min-height: var(--ds-h-touch);
    justify-content: center;
}
.msd-bar__cell + .msd-bar__cell { border-top: 1px solid var(--ds-hair); }
.msd-bar__key { font-size: var(--ds-fs-12); color: var(--ds-muted); }
/* ⚠️ الوزن مقصود: قواعد النماذج العامّة تستهدف `input[type="text"]`
   (0,1,1) فتغلب صنفاً مفرداً (0,1,0) — قِيس حيّاً: حقل الكلمة خرج بإطارٍ
   وحشوةٍ داخل الشريط. فالصنف يُقرن بحاويته ليعلو بالوزن وحده — ولا
   يستعير سلاح الإلزام الذي يحرسه اختبارُ هذا الملف. */
.msd-bar .msd-bar__val,
input.msd-bar__val,
select.msd-bar__val {
    border: 0;
    padding: 0;
    min-height: 28px;
    background: transparent;
    color: var(--ds-ink);
    font-family: var(--ds-font);
    font-size: var(--ds-fs-15);
    font-weight: 600;
    width: 100%;
}
@media (min-width: 700px) {
    .msd-bar { flex-direction: row; align-items: center; border-radius: var(--ds-r-pill); padding: var(--ds-sp-2); }
    .msd-bar__cell + .msd-bar__cell { border-top: 0; border-inline-start: 1px solid var(--ds-hair); }
}

/* ==========================================================================
   ٣ · البطاقات والكتل
   ========================================================================== */
.msd-card {
    display: flex;
    flex-direction: column;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-5);
    background: var(--ds-surface);
    border-radius: var(--ds-r-card);
    box-shadow: var(--ds-shadow-card);
}
.msd-card--sm  { border-radius: var(--ds-r-card-sm); padding: var(--ds-sp-4); box-shadow: var(--ds-shadow-soft); }
.msd-card--sand{ background: var(--ds-sand); box-shadow: none; }
.msd-card--flat{ box-shadow: none; border: 1px solid var(--ds-hair-2); }

/* الكتلة الليلية: قسمٌ يقلب الأرض حبراً (طلبات المشترين · بطاقة المنصة) */
.msd-block-night {
    background: var(--ds-ink);
    color: var(--ds-on-night);
    border-radius: var(--ds-r-block);
    padding: var(--ds-sp-7);
}
[data-theme="dark"] .msd-block-night { background: var(--ds-surface); border: 1px solid var(--ds-line); }
/* ⚠️ الكتلة تلوّن **عنوانها هي** لا كلّ عنوانٍ تحتها: قاعدةٌ عامّة على
   h1/h2/h3 نزلت إلى عنوان بطاقةٍ بيضاء بداخلها فصار أبيضَ على أبيض في
   النهار (قِيس حيّاً: عنوان بطاقة الطلب لونه #FFF وخلفيّتها #FFF).
   ⇒ يُسمّى المستهدَف باسمه، والبطاقاتُ الداخليّة تحتفظ بألوانها. */
.msd-block-night > .msd-sechead .msd-sechead__title,
.msd-block-night > * > .msd-sechead__title { color: var(--ds-on-night); }
.msd-on-night-muted { color: var(--ds-on-night-muted); }

/* حامل الصورة قبل تحميلها — لا قوس ولا نقش [قرار ②] */
.msd-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--ds-r-img);
    background: var(--ds-sand-deep);
    color: var(--ds-muted);
    font-size: var(--ds-fs-13);
}
.msd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* بطاقة العقار — المكوّن الذي يتكرّر أكثر من غيره */
.msd-prop { padding: var(--ds-sp-2) var(--ds-sp-2) var(--ds-sp-4); gap: var(--ds-sp-3); text-decoration: none; color: var(--ds-ink); }
.msd-prop__media { height: 196px; }
.msd-prop__body  { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.msd-prop__price { font-size: var(--ds-fs-19); font-weight: 800; }
.msd-prop__title { font-size: var(--ds-fs-15); font-weight: 500; line-height: 1.5; }
.msd-prop__place { font-size: var(--ds-fs-13); color: var(--ds-muted); }
.msd-prop__specs { display: flex; align-items: center; gap: var(--ds-sp-2); flex-wrap: wrap; padding: 0 6px; }

/* ==========================================================================
   ٤ · الرقاقات والشارات
   ========================================================================== */
.msd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ds-h-chip);
    padding: 0 var(--ds-sp-3);
    border-radius: var(--ds-r-pill);
    background: var(--ds-sand);
    color: var(--ds-ink);
    font-size: var(--ds-fs-12);
    font-weight: 600;
    white-space: nowrap;
}
.msd-chip--gold { background: var(--ds-gold-soft); color: var(--ds-gold-ink); font-weight: 700; }
/* رقاقة تُلمس (فلتر مُزال · فئة) ترتفع للحدّ الآمن */
a.msd-chip, button.msd-chip { min-height: var(--ds-h-touch); cursor: pointer; text-decoration: none; }

.msd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--ds-sp-3);
    border-radius: var(--ds-r-pill);
    font-size: var(--ds-fs-12);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.msd-badge--sale      { background: var(--ds-ink-surface); color: var(--ds-on-ink); }
.msd-badge--rent      { background: var(--ds-surface); color: var(--ds-ink); }
.msd-badge--valuation { background: var(--ds-gold-soft); color: var(--ds-gold-ink); }
.msd-badge--ok        { background: var(--ds-ok-bg); color: var(--ds-ok); }
.msd-badge--warn      { background: var(--ds-warn-bg); color: var(--ds-warn); }
.msd-badge--danger    { background: var(--ds-danger-bg); color: var(--ds-danger); }
.msd-badge--neutral   { background: var(--ds-sand); color: var(--ds-muted); }
/* وسم «إعلان» فوق الكتل الليلية — إفصاحٌ لا زينة */
.msd-badge--ad        { background: var(--ds-night-2); color: var(--ds-on-night-dim); font-weight: 600; }

/* ==========================================================================
   ٥ · التبويب والتنقّل والترقيم
   ========================================================================== */
.msd-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border-radius: var(--ds-r-pill);
    background: var(--ds-sand);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.msd-tabs::-webkit-scrollbar { display: none; }
.msd-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-2);
    min-height: var(--ds-h-touch);
    padding: 0 var(--ds-sp-4);
    border: 0;
    border-radius: var(--ds-r-pill);
    background: transparent;
    color: var(--ds-muted);
    font-family: var(--ds-font);
    font-size: var(--ds-fs-14);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.msd-tab--active { background: var(--ds-surface); color: var(--ds-ink); font-weight: 700; }
.msd-tab--ink    { background: var(--ds-ink-surface); color: var(--ds-on-ink); font-weight: 700; }

.msd-pager { display: flex; align-items: center; justify-content: center; gap: var(--ds-sp-2); flex-wrap: wrap; }
.msd-pager__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ds-h-touch);
    min-height: var(--ds-h-touch);
    padding: 0 var(--ds-sp-3);
    border: 1.5px solid var(--ds-line);
    border-radius: var(--ds-r-pill);
    color: var(--ds-ink);
    font-size: var(--ds-fs-14);
    font-weight: 600;
    text-decoration: none;
}
.msd-pager__item--current { background: var(--ds-ink-surface); border-color: var(--ds-ink-surface); color: var(--ds-on-ink); }
.msd-pager__gap { padding: 0 6px; color: var(--ds-muted); }

/* شريط التنقّل السفليّ — لوحتا البائع والمشتري على الجوال [قرار ⑤] */
.msd-bottomnav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ds-sp-1);
    padding: 10px var(--ds-sp-4) max(var(--ds-sp-5), env(safe-area-inset-bottom));
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-hair);
}
.msd-bottomnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-1);
    min-height: var(--ds-h-touch);
    height: 54px;
    border-radius: var(--ds-r-nav);
    color: var(--ds-muted);
    font-size: var(--ds-fs-11);
    font-weight: 600;
    text-decoration: none;
}
.msd-bottomnav__item--active { background: var(--ds-sand); color: var(--ds-ink); font-weight: 700; }
.msd-bottomnav__item--fab    { background: var(--ds-gold); color: #FFFFFF; border-radius: var(--ds-r-img); }
.msd-bottomnav-space { height: 110px; }
@media (min-width: 700px) {
    .msd-bottomnav, .msd-bottomnav-space { display: none; }
}

/* ==========================================================================
   ٦ · الحالات: الفراغ · الملاحظة · التقدّم · الإحصاء
   ========================================================================== */
.msd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-8) var(--ds-sp-5);
    border-radius: var(--ds-r-card);
    background: var(--ds-sand);
    text-align: center;
}
.msd-empty__title { font-size: var(--ds-fs-17); font-weight: 700; color: var(--ds-ink); margin: 0; }
.msd-empty__text  { font-size: var(--ds-fs-14); line-height: var(--ds-lh-body); color: var(--ds-muted); margin: 0; max-width: 46ch; }

.msd-note {
    display: flex;
    align-items: center;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-4) var(--ds-sp-5);
    border-radius: var(--ds-r-card-sm);
    font-size: var(--ds-fs-14);
    font-weight: 600;
    line-height: var(--ds-lh-body);
}
.msd-note--gold   { background: var(--ds-gold-soft); color: var(--ds-gold-ink); }
.msd-note--ok     { background: var(--ds-ok-bg);     color: var(--ds-ok); }
.msd-note--danger { background: var(--ds-danger-bg); color: var(--ds-danger); }
.msd-note--sand   { background: var(--ds-sand);      color: var(--ds-ink-2); }

.msd-progress { height: 8px; border-radius: var(--ds-r-pill); background: var(--ds-sand); overflow: hidden; }
.msd-block-night .msd-progress { background: var(--ds-night-2); }
.msd-progress__fill { height: 100%; border-radius: var(--ds-r-pill); background: var(--ds-gold); }

.msd-stat { display: flex; flex-direction: column; gap: 6px; padding: var(--ds-sp-5); background: var(--ds-surface); border-radius: var(--ds-r-card-sm); box-shadow: var(--ds-shadow-soft); }
.msd-stat__label { font-size: var(--ds-fs-13); color: var(--ds-muted); }
.msd-stat__value { font-size: 28px; font-weight: 800; color: var(--ds-ink); line-height: 1.1; }
.msd-stat__delta { font-size: var(--ds-fs-12); font-weight: 600; }

.msd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--ds-r-pill);
    background: var(--ds-sand);
    color: var(--ds-gold-ink);
    font-size: var(--ds-fs-16);
    font-weight: 800;
}

/* ==========================================================================
   ٧ · الجدول — صفوفٌ على الشاشة، بطاقاتٌ على الجوال
   (الجدول الأفقيّ على 390px يكسر القراءة — فالصفّ يصير بطاقة بعناوينها)
   ========================================================================== */
.msd-table { width: 100%; border-collapse: collapse; text-align: start; }
.msd-table th {
    padding: var(--ds-sp-4);
    font-size: var(--ds-fs-13);
    font-weight: 600;
    color: var(--ds-muted);
    border-bottom: 1px solid var(--ds-hair);
    text-align: start;
}
.msd-table td { padding: var(--ds-sp-4); font-size: var(--ds-fs-14); border-bottom: 1px solid var(--ds-hair-2); vertical-align: middle; }
@media (max-width: 699px) {
    .msd-table, .msd-table tbody, .msd-table tr, .msd-table td { display: block; width: 100%; }
    .msd-table thead { display: none; }
    .msd-table tr {
        margin-bottom: var(--ds-sp-3);
        padding: var(--ds-sp-3);
        background: var(--ds-surface);
        border-radius: var(--ds-r-card-sm);
        box-shadow: var(--ds-shadow-soft);
    }
    .msd-table td { display: flex; justify-content: space-between; gap: var(--ds-sp-4); padding: var(--ds-sp-2) 0; border-bottom: 1px solid var(--ds-hair-2); }
    .msd-table td:last-child { border-bottom: 0; }
    .msd-table td::before { content: attr(data-label); color: var(--ds-muted); font-size: var(--ds-fs-13); font-weight: 600; }
}

/* ==========================================================================
   ٨ · الورقة المنبثقة — بلا زجاج [قرار ملزم: لا blur]
   ========================================================================== */
.msd-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(23, 22, 26, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.msd-sheet {
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    overflow-y: auto;
    padding: var(--ds-sp-6);
    background: var(--ds-surface);
    border-radius: var(--ds-r-block) var(--ds-r-block) 0 0;
    box-shadow: var(--ds-shadow-float);
}
@media (min-width: 700px) {
    .msd-scrim { align-items: center; padding: var(--ds-sp-6); }
    .msd-sheet { border-radius: var(--ds-r-card); }
}

/* ==========================================================================
   ٩ · مساعدات التخطيط — شبكة تبدأ عموداً وتتفرّع
   ========================================================================== */
.msd-grid { display: grid; gap: var(--ds-sp-4); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .msd-grid--2, .msd-grid--3, .msd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .msd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .msd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.msd-stack { display: flex; flex-direction: column; gap: var(--ds-sp-4); }
.msd-row   { display: flex; align-items: center; gap: var(--ds-sp-3); flex-wrap: wrap; }
.msd-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-4); flex-wrap: wrap; }
.msd-sechead { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-4); flex-wrap: wrap; }
.msd-sechead__title { margin: 0; font-size: var(--ds-fs-26); font-weight: 800; letter-spacing: -0.3px; color: var(--ds-ink); }
.msd-sechead__sub   { margin: 0; font-size: var(--ds-fs-15); line-height: var(--ds-lh-body); color: var(--ds-muted); }
@media (min-width: 700px) { .msd-sechead__title { font-size: var(--ds-fs-30); } }

.msd-crumbs { display: flex; align-items: center; gap: var(--ds-sp-2); flex-wrap: wrap; font-size: var(--ds-fs-13); color: var(--ds-muted); }
.msd-crumbs a { color: var(--ds-muted); text-decoration: none; }

/* التركيز: خطٌّ ذهبيّ واحد لكل ما يُركَّز عليه */
.msd-btn:focus-visible, .msd-iconbtn:focus-visible, .msd-tab:focus-visible,
.msd-chip:focus-visible, .msd-pager__item:focus-visible, .msd-bottomnav__item:focus-visible {
    outline: 2px solid var(--ds-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .msd-btn, .msd-input, .msd-select, .msd-textarea { transition: none; }
}