/* ============================================================================
   جنبك — نظام الهوية البصرية (Design Tokens) · الإصدار ٢
   ----------------------------------------------------------------------------
   ملف واحد يحكم هوية المنصة كلها: تطبيق الراكب، تطبيق الكابتن، لوحة التحكم،
   سوق جنبك، بوابة التاجر، وصفحات التثبيت. تغيير الرمز هنا يغيّره في كل مكان.

   الهوية: «رمل · نيل · ذهب»
     ┌───────────────────────────────────────────────────────────────────┐
     │  الرمل  → الأسطح. دافئة لا رمادية — أرض السودان لا مكتب زجاجي.   │
     │  النيل  → الفعل. كل زرّ أساسي ومسار وحركة.                        │
     │  الذهب  → القيمة. الأرباح، الباقات، التقييم، ما يستحق الانتباه.   │
     └───────────────────────────────────────────────────────────────────┘

   قاعدة الذهب: لا يُستخدم للزينة. ظهوره يعني «هنا مال أو امتياز».
   إن ظهر في كل مكان فقد معناه وصار أصفر عادياً.

   ملاحظة توافق: كل أسماء الرموز في الإصدار الأول محفوظة كما هي، فلا يكسر
   هذا الملف أيّ قالب قائم. الجديد يُضاف، والقديم يُعاد ضبط قيمته فقط.
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════ الخطوط */

/*
 * IBM Plex Sans Arabic — خطّ الواجهة.
 *
 * لماذا خطّ مُستضاف ذاتياً لا اسم في قائمة الاحتياط؟ الإصدار السابق أعلن
 * "Noto Kufi Arabic" وهو غير مثبّت على أي جهاز تقريباً، فكان يسقط صامتاً
 * إلى Tahoma على أندرويد وSegoe UI على ويندوز — أي أن المنصة كانت تبدو
 * مختلفة على كل جهاز. الآن الملف معنا: نفس الشكل في كل مكان.
 *
 * أربعة أوزان حقيقية (400/500/600/700) تعني أن العناوين تثقُل فعلاً بدل
 * أن «يُسمّنها» المتصفّح صناعياً فتتداخل حروفها.
 *
 * كل وزن مقسوم إلى نطاقين: عربي ولاتيني. المتصفّح لا ينزّل اللاتيني إلا
 * إن ظهر حرف لاتيني على الشاشة — وهو ما يوفّر نحو ٨٠ كيلوبايت على أول
 * تحميل لمستخدم لا يرى إلا العربية، وهذا يهمّ على شبكة سودانية بطيئة.
 */
@font-face{font-family:"Plex AR";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/plex-ar-400.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC;}
@font-face{font-family:"Plex AR";font-weight:500;font-style:normal;font-display:swap;
  src:url("../fonts/plex-ar-500.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC;}
@font-face{font-family:"Plex AR";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/plex-ar-600.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC;}
@font-face{font-family:"Plex AR";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/plex-ar-700.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFC;}

@font-face{font-family:"Plex AR";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/plex-la-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:"Plex AR";font-weight:500;font-style:normal;font-display:swap;
  src:url("../fonts/plex-la-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:"Plex AR";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/plex-la-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:"Plex AR";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/plex-la-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;}

/*
 * Mobily — خطّ العلامة وحده.
 *
 * حروفه رفيعة مزخرفة: جميل جداً في كلمة «جنبك» بحجم ٣٢ بكسل، وغير مقروء
 * إطلاقاً في سطر ١٣ بكسل. الإصدار الأول استعمله لكل العناوين فظهرت الصفحات
 * باهتة مرهقة. الآن حدّه: الشعار والشاشة الافتتاحية ولا شيء غير ذلك.
 */
@font-face{
  font-family:"Mobily";
  src:url("../fonts/mobily.ttf") format("truetype");
  font-weight:normal;font-style:normal;font-display:swap;
}

/* ═══════════════════════════════════════════════════════ الرموز — النهاري */
:root {

  /* ─────────────────────────────────────────────────────────── ١ · النيل
     اللون الأساسي. أخضر نيلي عميق مأخوذ من هوية سوق جنبك (#0F766E)
     ومُعمَّق نحو الزمرد: أغنى في الظلال، وأوضح فوق صور الأهرامات الرملية.
     كل زرّ أساسي، كل مسار على الخريطة، كل حالة «تمّ» — من هذا السلّم.     */
  --brand-50:  #EDF8F4;
  --brand-100: #D2EFE6;
  --brand-200: #A6DFCE;
  --brand-300: #6BC7AF;
  --brand-400: #31A98D;
  --brand-500: #128B71;   /* الأساس — أزرار وأيقونات */
  --brand-600: #0D6E5B;   /* مرساة الهوية — الشعار والعناوين الملوّنة */
  --brand-700: #0A564A;
  --brand-800: #07403A;
  --brand-900: #052E2B;

  /* ─────────────────────────────────────────────────────────── ٢ · الذهب
     ذهب نوبي لا أصفر إعلاني. الفرق أن التشبّع أقل والحُمرة أعلى، فيقرأ
     كمعدن لا كتحذير — وهذا ما يفصله بصرياً عن لون التنبيه (--warn).
     استعماله: الأرباح، الباقات المدفوعة، النجوم، شارة «مميّز».           */
  --accent-50:  #FDF8EA;
  --accent-100: #F9EDC8;
  --accent-200: #F2DC9B;
  --accent-300: #E9C669;
  --accent-400: #D8AB3E;   /* الأساس */
  --accent-500: #C3922A;
  --accent-600: #A0741E;
  --accent-700: #7B5817;

  /* ─────────────────────────────────────────────────── ٣ · ألوان الهوية
     ثلاثة ألوان مساندة مأخوذة من صور الهوية نفسها لا من عجلة ألوان:
     رمل الصحراء من صورة مروي، أزرق النيل من صورة القوارب، وطين مروي.    */
  --sand-50:   #FCFAF4;
  --sand-100:  #F7F1E4;
  --sand-200:  #EDE3CE;
  --sand-300:  #DFCFAF;
  --nile-500:  #1D8FC4;   /* أزرق النيل — المعلومات، المسارات، التتبّع */
  --nile-600:  #16719C;
  --sun-500:   #E8A626;   /* شمس الظهيرة — العروض والتخفيضات */
  --clay-500:  #C2703C;   /* طين مروي — الشحن الدولي والبضائع */
  --henna-500: #9C4A38;   /* حِنّاء — التنبيهات الحرجة غير الخطأ */

  /* ───────────────────────────────────────────── ٤ · الحبر والأسطح (نهاري)
     الأسطح رملية دافئة لا رمادية باردة.

     لماذا ‎#FFFCF6‎ لا ‎#FFFFFF‎؟ الأبيض النقي فوق خلفية رملية يقرأ كورقة
     مقصوصة ملصوقة — الحافة تصرخ. الأبيض الدافئ يجلس على الرمل فتبدو
     البطاقة جزءاً من السطح لا فوقه. هذا وحده أكبر فرق بين واجهة تبدو
     «قالباً مجانياً» وواجهة تبدو مصمَّمة.                                  */
  --ink:        #16211D;   /* حبر ليل النيل — أخضر مُطفأ لا أسود ولا أزرق */
  --ink-2:      #253430;
  --ink-3:      #3E514B;
  --muted:      #63736C;   /* تباين ~٥:١ على السطح — صالح للنصّ الجاري */
  --muted-2:    #8B9992;   /* ثانوي — للتسميات والحواشي فقط */
  --line:       rgba(40, 30, 12, .10);
  --line-2:     rgba(40, 30, 12, .055);
  --line-gold:  rgba(168, 122, 32, .26);
  --surface:    #FFFCF6;   /* أبيض دافئ — البطاقات */
  --surface-2:  #F9F4EA;
  --surface-3:  #F1EADB;
  --bg:         #F5EFE3;   /* الرمل — أرضية المنصة كلها */

  /* ────────────────────────────────────────────────── ٥ · ألوان الحالة
     الأخضر هنا ليس نفس أخضر العلامة عمداً: لو تطابقا لصار كل زرّ أساسي
     يبدو كرسالة نجاح، ولفقدت رسالة النجاح معناها.                        */
  --ok:      #0E9E6E;
  --ok-bg:   #E4F7EF;
  --warn:    #D07C08;
  --warn-bg: #FDF2DE;
  --err:     #D93F45;
  --err-bg:  #FDECEC;
  --info:    #1D8FC4;
  --info-bg: #E6F3FA;

  /* ─────────────────────────────────────────────────────── ٦ · التدرّجات */
  --grad-brand:  linear-gradient(135deg, #0A564A 0%, #0D6E5B 45%, #1FA184 100%);
  --grad-gold:   linear-gradient(135deg, #A0741E 0%, #D8AB3E 46%, #F2DC9B 100%);
  --grad-accent: var(--grad-gold);        /* توافق مع الإصدار الأول */
  --grad-ink:    linear-gradient(160deg, #1B2823 0%, #0A1311 100%);
  --grad-nile:   linear-gradient(135deg, #0A564A 0%, #128B71 48%, #1D8FC4 100%);
  --grad-sand:   linear-gradient(135deg, #F7F1E4 0%, #FFFCF6 52%, #EDE3CE 100%);

  /* خلفية «البطل»: شمس ذهبية أعلى، نيل أسفل، رمل بينهما */
  --grad-hero:   radial-gradient(circle at 88% 4%,  rgba(216,171,62,.20), transparent 42%),
                 radial-gradient(circle at 6%  96%, rgba(29,143,196,.14), transparent 40%),
                 linear-gradient(150deg, #FDFAF2 0%, #FFFCF6 46%, #EFF7F3 100%);

  --grad-mesh:   radial-gradient(at 10% 0%,  rgba(13,110,91,.16)  0px, transparent 55%),
                 radial-gradient(at 95% 6%,  rgba(216,171,62,.15) 0px, transparent 48%),
                 radial-gradient(at 48% 100%, rgba(29,143,196,.10) 0px, transparent 55%);

  /* ────────────────────────────────────── ٧ · حُجُب الصور (Image Scrims)
     كل صورة في المنصة تُغطّى بأحد هذه الحُجُب — بلا استثناء.

     السبب عملي لا جمالي: صور الهوية ملتقطة في ضوء نهار قاسٍ، وأي نصّ
     أبيض فوقها مباشرة يختفي في السماء الفاتحة. الحجاب يضمن تبايناً كافياً
     مهما كانت الصورة، ويجعل كل صور المنصة تبدو من عائلة واحدة رغم أن
     مصادرها مختلفة.                                                       */
  --scrim-bottom: linear-gradient(to top,
                    rgba(6,20,17,.92) 0%, rgba(6,20,17,.58) 34%,
                    rgba(6,20,17,.16) 68%, rgba(6,20,17,0) 100%);
  --scrim-full:   linear-gradient(135deg, rgba(7,64,58,.86) 0%, rgba(6,20,17,.62) 100%);
  --scrim-soft:   linear-gradient(to top, rgba(6,20,17,.72), rgba(6,20,17,.10));
  --scrim-gold:   linear-gradient(135deg, rgba(123,88,23,.80) 0%, rgba(6,20,17,.66) 100%);

  /* ─────────────────────────────────────────────────────── ٨ · الاستدارة */
  --r-xs:   9px;
  --r-sm:   13px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   30px;
  --r-2xl:  38px;
  --r-pill: 999px;

  /* ────────────────────────────────────────────────────────── ٩ · الظلال
     ظلال دافئة بنّية لا رمادية، وكل واحد طبقتان:
     طبقة قريبة ضيّقة ترسم الحافة، وطبقة بعيدة واسعة ترسم الارتفاع.
     الظلّ ذو الطبقة الواحدة هو ما يجعل البطاقة تبدو «ملصقة» لا «مرفوعة». */
  --sh-xs:  0 1px 2px rgba(48,34,12,.06);
  --sh-sm:  0 1px 2px rgba(48,34,12,.05), 0 3px 10px rgba(48,34,12,.05);
  --sh-md:  0 2px 4px rgba(48,34,12,.04), 0 8px 24px rgba(48,34,12,.08);
  --sh-lg:  0 4px 8px rgba(48,34,12,.04), 0 18px 44px rgba(48,34,12,.11);
  --sh-xl:  0 8px 16px rgba(48,34,12,.05), 0 34px 80px rgba(48,34,12,.16);
  --sh-brand:  0 2px 6px rgba(13,110,91,.20),  0 12px 30px rgba(13,110,91,.28);
  --sh-gold:   0 2px 6px rgba(160,116,30,.22), 0 12px 30px rgba(160,116,30,.30);
  --sh-accent: var(--sh-gold);            /* توافق مع الإصدار الأول */
  --sh-inset:  inset 0 1px 0 rgba(255,255,255,.55);

  /* ────────────────────────────────────────────────────────── ١٠ · الحركة */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .15s var(--ease);
  --t-base: .25s var(--ease);
  --t-slow: .42s var(--ease-out);

  /* ────────────────────────────────────────────────────────── ١١ · الخطوط */
  --font-display: "Mobily", "Plex AR", "Segoe UI", Tahoma, sans-serif;
  --font:         "Plex AR", "Segoe UI", "Dubai", Tahoma, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* سلّم الحجم — نسبة ١.٢٥، مضبوط على قراءة عربية لا لاتينية.
     العربية تحتاج ارتفاع سطر أعلى (١.٧–١.٩) لأن التشكيل والنقاط تمتدّ
     فوق خطّ الأساس وتحته أكثر من اللاتينية.                                */
  --fs-xs:  11.5px;
  --fs-sm:  13px;
  --fs-md:  14.5px;   /* النصّ الجاري */
  --fs-lg:  16.5px;
  --fs-xl:  19px;
  --fs-2xl: 23px;
  --fs-3xl: 28px;
  --fs-4xl: 34px;
  --lh-tight: 1.45;
  --lh-base:  1.75;
  --lh-loose: 1.9;

  /* ──────────────────────────────────────────────────────── ١٢ · المسافات */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;  --s-9: 52px;  --s-10: 68px;

  /* ────────────────────────────────────────────────────────── ١٣ · المقاسات */
  --header-h:  64px;
  --nav-h:     70px;
  --sidebar-w: 262px;

  /* ─────────────────────────────────────────────────────────── ١٤ · الزجاج */
  --glass-1:     rgba(255,252,246,.74);
  --glass-2:     rgba(255,252,246,.88);
  --glass-strip: linear-gradient(135deg, rgba(255,252,246,.96), rgba(240,247,243,.94));
  --glass-blur:  blur(18px) saturate(1.6);
}

/* ══════════════════════════════════════════════════════ الرموز — الليلي */
/*
 * الوضع الليلي ليس عكساً للنهاري بل مشهد آخر: «ليل على النيل».
 * الأسطح خضراء داكنة لا رمادية، فيبقى الدفء ولا تنقلب الهوية إلى واجهة
 * تقنية باردة. الذهب يفتح درجة لأنه على خلفية داكنة يقرأ أغمق مما هو.
 */
:root[data-theme="dark"] {
  --ink:       #ECF3F0;
  --ink-2:     #CBDCD7;
  --ink-3:     #A3B7B1;
  --muted:     #94A8A2;
  --muted-2:   #7C908A;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.05);
  --line-gold: rgba(233,198,105,.30);
  --surface:   #101B18;
  --surface-2: #16231F;
  --surface-3: #1E2E29;
  --bg:        #0A1311;

  /* الذهب على الداكن: درجة أفتح حتى يبقى معدناً لا بنّياً */
  --accent-400: #E9C669;
  --accent-500: #D8AB3E;
  --grad-gold:  linear-gradient(135deg, #C3922A 0%, #E9C669 48%, #F9EDC8 100%);

  --ok-bg:   rgba(14,158,110,.15);
  --warn-bg: rgba(208,124,8,.15);
  --err-bg:  rgba(217,63,69,.15);
  --info-bg: rgba(29,143,196,.15);

  --sh-xs: 0 1px 2px rgba(0,0,0,.34);
  --sh-sm: 0 1px 2px rgba(0,0,0,.36), 0 3px 10px rgba(0,0,0,.30);
  --sh-md: 0 2px 4px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.42);
  --sh-lg: 0 4px 8px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.52);
  --sh-xl: 0 8px 16px rgba(0,0,0,.36), 0 34px 80px rgba(0,0,0,.62);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.06);

  --grad-hero: radial-gradient(circle at 88% 4%,  rgba(216,171,62,.16), transparent 44%),
               radial-gradient(circle at 6%  96%, rgba(29,143,196,.14), transparent 42%),
               linear-gradient(150deg, #13211D 0%, #101B18 52%, #0C1917 100%);
  --grad-mesh: radial-gradient(at 10% 0%, rgba(18,139,113,.22) 0px, transparent 55%),
               radial-gradient(at 95% 6%, rgba(216,171,62,.13) 0px, transparent 50%);
  --grad-sand: linear-gradient(135deg, #16231F 0%, #101B18 52%, #1E2E29 100%);

  --glass-1:     rgba(255,255,255,.065);
  --glass-2:     rgba(255,255,255,.05);
  --glass-strip: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

/* نفس القيم لمن لم يختر سمة صراحةً وجهازه ليلي */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#ECF3F0; --ink-2:#CBDCD7; --ink-3:#A3B7B1;
    --muted:#94A8A2; --muted-2:#7C908A;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.05);
    --line-gold:rgba(233,198,105,.30);
    --surface:#101B18; --surface-2:#16231F; --surface-3:#1E2E29; --bg:#0A1311;
    --accent-400:#E9C669; --accent-500:#D8AB3E;
    --grad-gold:linear-gradient(135deg,#C3922A 0%,#E9C669 48%,#F9EDC8 100%);
    --ok-bg:rgba(14,158,110,.15); --warn-bg:rgba(208,124,8,.15);
    --err-bg:rgba(217,63,69,.15); --info-bg:rgba(29,143,196,.15);
    --sh-xs:0 1px 2px rgba(0,0,0,.34);
    --sh-sm:0 1px 2px rgba(0,0,0,.36),0 3px 10px rgba(0,0,0,.30);
    --sh-md:0 2px 4px rgba(0,0,0,.34),0 8px 24px rgba(0,0,0,.42);
    --sh-lg:0 4px 8px rgba(0,0,0,.34),0 18px 44px rgba(0,0,0,.52);
    --sh-xl:0 8px 16px rgba(0,0,0,.36),0 34px 80px rgba(0,0,0,.62);
    --sh-inset:inset 0 1px 0 rgba(255,255,255,.06);
    --grad-hero:radial-gradient(circle at 88% 4%,rgba(216,171,62,.16),transparent 44%),
                radial-gradient(circle at 6% 96%,rgba(29,143,196,.14),transparent 42%),
                linear-gradient(150deg,#13211D 0%,#101B18 52%,#0C1917 100%);
    --grad-mesh:radial-gradient(at 10% 0%,rgba(18,139,113,.22) 0px,transparent 55%),
                radial-gradient(at 95% 6%,rgba(216,171,62,.13) 0px,transparent 50%);
    --grad-sand:linear-gradient(135deg,#16231F 0%,#101B18 52%,#1E2E29 100%);
    --glass-1:rgba(255,255,255,.065); --glass-2:rgba(255,255,255,.05);
    --glass-strip:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  }
}

/* ══════════════════════════════════════════════════════════════ الأساسيات */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* أرقام بعرض ثابت: المبالغ في جدول لا ترقص عند التحديث اللحظي */
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--brand-200); color: var(--brand-900); }

:focus-visible {
  outline: 2.5px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--muted-2); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }

/* ══════════════════════════════════════════════════════════════ الطباعة */
/*
 * Mobily للعلامة وحدها. العناوين تستعمل خطّ الواجهة بوزن ٧٠٠ حقيقي —
 * فتثقُل فعلاً بدل أن يوسّعها المتصفّح أفقياً حتى تتداخل حروفها.
 */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* الشعار والشاشة الافتتاحية فقط — لا ثِقل صناعي ولا تقارب حروف */
.jb-logo .wm, .auth-wm, .splash-wm, .home-brand .wm, .sidebar-head .logo b {
  font-family: var(--font-display);
  font-weight: normal;
  font-synthesis: none;
  font-synthesis-weight: none;
  letter-spacing: 0;
}

.jb-kicker, .kicker {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-600);
}
.tiny  { font-size: var(--fs-xs); }
.small { font-size: var(--fs-sm); }
.auth-p, .hint, .sub, .card-sub { font-weight: 500; color: var(--muted); }

/* رقم مالي — الذهب يعني «هذا مال» */
.jb-amount { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.jb-amount.gold { color: var(--accent-600); }
:root[data-theme="dark"] .jb-amount.gold { color: var(--accent-400); }

/* ══════════════════════════════════════════════════════════════ الحركات */
@keyframes jb-fade-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes jb-fade    { from{opacity:0} to{opacity:1} }
@keyframes jb-pop     { 0%{opacity:0;transform:scale(.94)} 100%{opacity:1;transform:scale(1)} }
@keyframes jb-spin    { to{transform:rotate(360deg)} }
@keyframes jb-pulse   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.93)} }
@keyframes jb-shimmer { 0%{background-position:-420px 0} 100%{background-position:420px 0} }
@keyframes jb-ripple  { 0%{transform:scale(.7);opacity:.55} 100%{transform:scale(2.4);opacity:0} }
@keyframes jb-slide-up{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
/* لمعة معدنية تمرّ على الذهب — للباقات وبطاقات الأرباح فقط */
@keyframes jb-sheen   { 0%{transform:translateX(-120%) skewX(-18deg)} 60%,100%{transform:translateX(220%) skewX(-18deg)} }

.jb-in      { animation: jb-fade-up .42s var(--ease-out) both; }
.jb-in-fade { animation: jb-fade .3s var(--ease) both; }
.jb-in-pop  { animation: jb-pop .3s var(--ease-spring) both; }
.jb-in-up   { animation: jb-slide-up .5s var(--ease-out) both; }
.jb-d1{animation-delay:.05s} .jb-d2{animation-delay:.10s} .jb-d3{animation-delay:.16s}
.jb-d4{animation-delay:.22s} .jb-d5{animation-delay:.28s} .jb-d6{animation-delay:.34s}

.jb-ping { position: relative; }
.jb-ping::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background: var(--brand-500); animation: jb-ripple 1.8s var(--ease-out) infinite;
}

.jb-skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--line-2) 50%, var(--surface-3) 75%);
  background-size: 420px 100%;
  animation: jb-shimmer 1.3s linear infinite;
  border-radius: var(--r-sm);
}

.jb-spinner {
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.28); border-top-color: currentColor;
  animation: jb-spin .7s linear infinite; display:inline-block;
}

/* اللمعة المعدنية — تُضاف على عنصر بـ position:relative و overflow:hidden */
.jb-sheen { position: relative; overflow: hidden; }
.jb-sheen::before {
  content:""; position:absolute; top:0; bottom:0; width:38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation: jb-sheen 4.5s var(--ease-out) infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════ العلامة */
.jb-logo {
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:-.5px; text-decoration:none; color:inherit;
}
.jb-logo .mark {
  width:36px; height:36px; border-radius:12px;
  background: var(--grad-brand); display:grid; place-items:center;
  box-shadow: var(--sh-brand); flex:none; position:relative; overflow:hidden;
}
/* حافة ذهبية رفيعة داخل الشعار — تفصيلة صغيرة تصنع الإحساس الفاخر */
.jb-logo .mark::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(242,220,155,.42); pointer-events:none;
}
.jb-logo .mark svg { width:21px; height:21px; position:relative; z-index:1; }
.jb-logo .wm { font-size:22px; line-height:1; }
.jb-logo .wm b { color: var(--brand-600); font-weight:inherit; }
:root[data-theme="dark"] .jb-logo .wm b { color: var(--brand-300); }

/* ══════════════════════════════════════════════════════════════ الأزرار */
.jb-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border:0; border-radius: var(--r-sm);
  font:inherit; font-size: var(--fs-lg); font-weight:700; cursor:pointer;
  background: var(--grad-brand); color:#fff;
  box-shadow: var(--sh-brand), var(--sh-inset);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
  position:relative; overflow:hidden; text-decoration:none; white-space:nowrap;
  /* أدنى مساحة لمس ٤٤ بكسل — معيار الوصولية على الهاتف */
  min-height:48px;
}
.jb-btn:hover  { transform: translateY(-1.5px); box-shadow: 0 6px 14px rgba(13,110,91,.22), 0 18px 40px rgba(13,110,91,.34); }
.jb-btn:active { transform: translateY(0) scale(.985); }
.jb-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; filter: grayscale(.35); }

.jb-btn.gold, .jb-btn.accent {
  background: var(--grad-gold); color:#2E2003; box-shadow: var(--sh-gold), var(--sh-inset);
}
.jb-btn.gold:hover, .jb-btn.accent:hover { box-shadow: 0 6px 14px rgba(160,116,30,.24), 0 18px 40px rgba(160,116,30,.36); }
.jb-btn.ghost { background: var(--surface); color: var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.jb-btn.ghost:hover { border-color: var(--brand-500); color: var(--brand-600); transform:none; box-shadow: var(--sh-sm); }
.jb-btn.quiet { background: var(--surface-2); color: var(--ink-2); box-shadow:none; }
.jb-btn.danger{ background: linear-gradient(135deg,#B5262C,#D93F45); box-shadow:0 2px 6px rgba(217,63,69,.2),0 12px 30px rgba(217,63,69,.28); }
.jb-btn.sm    { padding:9px 16px; font-size: var(--fs-sm); border-radius: var(--r-xs); min-height:38px; }
.jb-btn.lg    { padding:17px 34px; font-size: var(--fs-xl); border-radius: var(--r-md); min-height:56px; }
.jb-btn.block { width:100%; }

.jb-btn::after { content:""; position:absolute; inset:0; background:#fff; opacity:0; transition: opacity var(--t-fast); }
.jb-btn:active::after { opacity:.16; }

/* ══════════════════════════════════════════════════════════════ البطاقات */
.jb-card {
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.jb-card.hover:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: var(--brand-200); }
/* بطاقة بامتياز — حافة ذهبية. للباقات المدفوعة والمحتوى المميّز */
.jb-card.premium { border-color: var(--line-gold); box-shadow: var(--sh-sm), inset 0 0 0 1px rgba(216,171,62,.10); }

/* ══════════════════════════════════════════════════════════════ الحقول */
.jb-input {
  width:100%; padding:14px 16px; font:inherit; font-size: var(--fs-lg);
  background: var(--surface); color: var(--ink);
  border:1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  min-height:50px;
}
.jb-input::placeholder { color: var(--muted-2); }
.jb-input:focus { outline:none; border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--brand-50); }
:root[data-theme="dark"] .jb-input:focus { box-shadow: 0 0 0 4px rgba(18,139,113,.18); }

/* ══════════════════════════════════════════════════════════════ الشارات */
.jb-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight:700; white-space:nowrap;
}
.jb-badge.ok   { background: var(--ok-bg);   color: var(--ok); }
.jb-badge.warn { background: var(--warn-bg); color: var(--warn); }
.jb-badge.err  { background: var(--err-bg);  color: var(--err); }
.jb-badge.info { background: var(--info-bg); color: var(--info); }
.jb-badge.mute { background: var(--surface-3); color: var(--muted); }
.jb-badge.gold { background: var(--grad-gold); color:#2E2003; box-shadow:0 2px 8px rgba(160,116,30,.28); }

/* ══════════════════════════════════════════════ الأيقونات — الطراز الثنائي */
/*
 * أيقونات الإصدار الأول كانت خطّاً واحداً بسماكة ١.٩ — واضحة لكن بلا وزن،
 * وكلّها تبدو متشابهة في شريط التنقّل فيصعب التقاط الأيقونة المطلوبة بالنظر
 * السريع. الطراز الجديد ثنائي الطبقة: طبقة مملوءة خفيفة ترسم الكتلة، وطبقة
 * خطّية فوقها ترسم التفصيل. النتيجة أن كل أيقونة لها صورة ظلّية مميّزة
 * تُعرف من طرف العين، وهو ما يهمّ فعلاً في تطبيق يُستعمل أثناء القيادة.
 *
 * الطبقة المملوءة ترث اللون بشفافية منخفضة فتعمل تلقائياً على أي خلفية،
 * ولا تحتاج نسخة ثانية من الأيقونة للوضع الليلي.
 */
.jb-i { display:inline-block; vertical-align:middle; flex:none; }
.jb-i .fl { fill: currentColor; opacity: .17; stroke: none; }
.jb-i .st { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* داخل قرص ملوّن (الشريط الجانبي، بطاقات الخدمات) الطبقة المملوءة تُقوّى */
.jb-ibox .jb-i .fl { opacity: .24; }
/* الأيقونة النشطة تمتلئ أكثر، فيُقرأ الاختيار بلا حاجة إلى لون إضافي */
.active > .jb-i .fl, .on > .jb-i .fl, .jb-i.solid .fl { opacity: .34; }

/* قرص الأيقونة — الحاوية الموحّدة لكل أيقونة داخل بطاقة أو قائمة */
.jb-ibox {
  width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  background: var(--brand-50); color: var(--brand-600); flex:none;
  transition: transform var(--t-base), background var(--t-base);
}
.jb-ibox.sm   { width:38px; height:38px; border-radius:12px; }
.jb-ibox.lg   { width:58px; height:58px; border-radius:19px; }
.jb-ibox.gold { background: var(--accent-50);  color: var(--accent-600); }
.jb-ibox.nile { background: var(--info-bg);    color: var(--nile-600); }
.jb-ibox.clay { background: rgba(194,112,60,.12); color: var(--clay-500); }
.jb-ibox.ink  { background: var(--surface-3);  color: var(--ink-2); }
.jb-ibox.solid{ background: var(--grad-brand); color:#fff; box-shadow: var(--sh-brand); }
.jb-ibox.solid-gold { background: var(--grad-gold); color:#2E2003; box-shadow: var(--sh-gold); }
:root[data-theme="dark"] .jb-ibox      { background: rgba(18,139,113,.16); color: var(--brand-300); }
:root[data-theme="dark"] .jb-ibox.gold { background: rgba(216,171,62,.15);  color: var(--accent-400); }
:root[data-theme="dark"] .jb-ibox.ink  { background: var(--surface-3); color: var(--ink-2); }
a:hover > .jb-ibox, button:hover > .jb-ibox { transform: scale(1.06); }

/* ══════════════════════════════════════════════════════ الصور — طبقة موحّدة */
/*
 * كل صورة في المنصة تمرّ من هنا. لا وسم ‎<img>‎ عارٍ في قالب.
 *
 *   .jb-img          إطار الصورة (نسبة ثابتة + خلفية تحميل + قصّ)
 *   .jb-img > img    الصورة نفسها
 *   .jb-img.scrim    يضيف الحجاب فوقها
 *   .jb-img .on-img  المحتوى فوق الصورة (نصّ، شارة، زرّ)
 */
.jb-img {
  position:relative; overflow:hidden; border-radius: var(--r-lg);
  background: var(--surface-3) var(--grad-sand); isolation:isolate;
}
.jb-img > img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .55s var(--ease-out);
}
.jb-img.zoom:hover > img { transform: scale(1.06); }
.jb-img::after { content:""; position:absolute; inset:0; pointer-events:none; }
.jb-img.scrim::after      { background: var(--scrim-bottom); }
.jb-img.scrim-full::after { background: var(--scrim-full); }
.jb-img.scrim-soft::after { background: var(--scrim-soft); }
.jb-img.scrim-gold::after { background: var(--scrim-gold); }
.jb-img .on-img {
  position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
  padding: var(--s-5); color:#fff;
}
.jb-img .on-img h1, .jb-img .on-img h2, .jb-img .on-img h3, .jb-img .on-img h4 { color:#fff; }
.jb-img .on-img p { color: rgba(255,255,255,.86); margin:0; }
/* نسب شائعة */
.jb-img.r-1  { aspect-ratio: 1/1; }
.jb-img.r-43 { aspect-ratio: 4/3; }
.jb-img.r-169{ aspect-ratio: 16/9; }
.jb-img.r-21 { aspect-ratio: 21/9; }
.jb-img.r-32 { aspect-ratio: 3/2; }

/* ══════════════════════════════════════════════════════════ لوحة البطل */
.jb-hero {
  position:relative; overflow:hidden;
  border-radius: var(--r-xl); padding: var(--s-6);
  background: var(--grad-hero);
  border:1px solid var(--line);
  box-shadow: var(--sh-md);
}
/* البطل بصورة خلفية — النصّ يبقى مقروءاً بفضل الحجاب */
.jb-hero.photo { border:0; color:#fff; }
.jb-hero.photo > img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.jb-hero.photo::before { content:""; position:absolute; inset:0; z-index:1; background: var(--scrim-full); }
.jb-hero.photo > *:not(img) { position:relative; z-index:2; }
.jb-hero.photo h1, .jb-hero.photo h2, .jb-hero.photo h3 { color:#fff; }
.jb-hero.photo p { color: rgba(255,255,255,.88); }
.jb-hero.photo .jb-kicker { color: var(--accent-300); }
.jb-hero h2, .jb-hero h3 { letter-spacing:-.02em; margin:0 0 6px; }
.jb-hero p { color: var(--muted); margin:0; line-height: var(--lh-base); }
.jb-hero-copy { max-width: 680px; }

/* ══════════════════════════════════════════════════════════ شرائط الوسوم */
.jb-chip-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.jb-chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius: var(--r-pill);
  background: var(--glass-1); border:1px solid var(--line);
  color: var(--ink); font-size: var(--fs-sm); font-weight:600;
  text-decoration:none; transition: var(--t-fast); cursor:pointer;
}
.jb-chip:hover { border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-1px); }
.jb-chip.on { background: var(--grad-brand); color:#fff; border-color:transparent; box-shadow: var(--sh-brand); }
.jb-chip.gold.on { background: var(--grad-gold); color:#2E2003; box-shadow: var(--sh-gold); }

/* ══════════════════════════════════════════════════════════ بطاقات المؤشرات */
.jb-metrics { display:grid; grid-template-columns: repeat(auto-fit, minmax(146px,1fr)); gap:14px; margin-top:20px; }
.jb-metric {
  padding:16px 18px; border-radius: var(--r-md);
  background: var(--glass-2); border:1px solid var(--line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.jb-metric strong { display:block; color: var(--ink); font-size: var(--fs-2xl); line-height:1.15; font-variant-numeric: tabular-nums; }
.jb-metric span   { color: var(--muted); font-size: var(--fs-sm); }
.jb-metric.gold strong { color: var(--accent-600); }
:root[data-theme="dark"] .jb-metric.gold strong { color: var(--accent-400); }

/* ══════════════════════════════════════════════════════════ شريط الموقع */
.jb-strip {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; padding:16px 18px; border-radius: var(--r-md);
  background: var(--glass-strip); border:1px solid var(--line); box-shadow: var(--sh-sm);
}
.jb-strip strong { color: var(--ink); display:block; }
.jb-strip span   { color: var(--muted); font-size: var(--fs-sm); }

/* ══════════════════════════════════════════════════════════ شبكة البلاطات */
.jb-tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:14px; }
.jb-tile {
  height:100%; padding:18px; border-radius: var(--r-lg);
  background: var(--surface); border:1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  text-decoration:none; color:inherit; display:block; position:relative; overflow:hidden;
}
.jb-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--brand-200); }
.jb-tile .icon {
  width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  background: var(--brand-50); color: var(--brand-600); margin-bottom:12px;
}
:root[data-theme="dark"] .jb-tile .icon { background: rgba(18,139,113,.16); color: var(--brand-300); }
.jb-tile h4 { margin:0 0 4px; font-size: var(--fs-lg); }
.jb-tile p  { margin:0; color: var(--muted); font-size: var(--fs-sm); line-height:1.7; }
/* بلاطة بصورة خلفية */
.jb-tile.photo { color:#fff; border:0; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; }
.jb-tile.photo > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform .55s var(--ease-out); }
.jb-tile.photo::before { content:""; position:absolute; inset:0; z-index:1; background: var(--scrim-bottom); }
.jb-tile.photo > *:not(img) { position:relative; z-index:2; }
.jb-tile.photo:hover > img { transform: scale(1.07); }
.jb-tile.photo h4 { color:#fff; }
.jb-tile.photo p  { color: rgba(255,255,255,.85); }

/* ══════════════════════════════════════════════════════════ بطاقة منتج */
.jb-product {
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  transition: transform var(--t-base), box-shadow var(--t-base);
  text-decoration:none; color:inherit;
}
.jb-product:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.jb-product .ph { aspect-ratio:1/1; background: var(--surface-3) var(--grad-sand); overflow:hidden; position:relative; }
.jb-product .ph img { width:100%; height:100%; object-fit:cover; transition: transform .45s var(--ease-out); }
.jb-product:hover .ph img { transform: scale(1.06); }
.jb-product .tag {
  position:absolute; inset-block-start:10px; inset-inline-start:10px;
  background: var(--grad-gold); color:#2E2003; font-size:11px; font-weight:800;
  padding:3px 9px; border-radius: var(--r-pill); box-shadow:0 2px 8px rgba(160,116,30,.3);
}
.jb-product .bd { padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:5px; }
.jb-product .nm { font-size: var(--fs-md); font-weight:600; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.jb-product .mr { font-size: var(--fs-xs); color: var(--muted); }
.jb-product .pr { margin-top:auto; font-size: var(--fs-xl); font-weight:700; color: var(--brand-600); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .jb-product .pr { color: var(--brand-300); }
.jb-product .old { font-size: var(--fs-sm); color: var(--muted); text-decoration: line-through; margin-inline-start:6px; font-weight:500; }

/* ══════════════════════════════════════════════════════════════ أدوات */
.jb-glass {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.jb-mesh    { background-image: var(--grad-mesh); }
.jb-elevate { transition: transform var(--t-base), box-shadow var(--t-base); }
.jb-elevate:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.jb-tap     { transition: transform .1s var(--ease); }
.jb-tap:active { transform: scale(.96); }
.jb-gold-line { border:1px solid var(--line-gold); }
.jb-divider { height:1px; background: var(--line); border:0; margin: var(--s-5) 0; }
/* فاصل بنقشة نوبية — لا يُستعمل أكثر من مرّة في الشاشة الواحدة */
.jb-divider.motif {
  height:14px; border:0;
  background: repeating-linear-gradient(90deg, var(--line-gold) 0 1px, transparent 1px 7px);
  opacity:.55;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}