@charset "UTF-8";
/* ==========================================================================
   KFOO BOT — ورقة الأنماط الأساسية
   عربية · RTL · أخضر فاتح وأبيض

   ملاحظات تصميمية اتُّخذت عن قصد:
   • الظلّ ليس أداة الفصل هنا — الحدّ بسمك بكسل واحد هو الأداة. الظلال
     الثقيلة تجعل كل شيء يطفو، وشاشة التداول تحتاج ثباتاً لا طفواً.
   • الأرقام كلها بخطّ أحادي المسافة وأرقام جدولية، حتى لا يرقص عمود
     الأسعار وهو يتحدّث كل ثانية.
   • الأخضر لون الهوية، لا لون الربح. الربح والخسارة لهما درجتان أخريان
     مختلفتان عمداً، وإلّا اختلط شعار المنصّة بحالة الصفقة.
   ========================================================================== */

:root {
  /* --- الهوية --- */
  --green-900:#0d3826;
  --green-800:#14523a;
  --green-700:#1a6b4a;
  --green-600:#218a5e;
  --green-500:#2fa36b;
  --green-400:#5cbb8c;
  --green-300:#95d5b4;
  --green-200:#c4e8d5;
  --green-100:#e2f3ea;
  --green-050:#f1faf5;

  /* --- السماوي: لون الملاحة وحدها ---
     مقصورٌ على الشريط الجانبي عمداً. الأخضر يبقى لون الهوية والأزرار،
     والأحمر والأخضر للربح والخسارة — فلو تسرّب السماوي إلى المحتوى
     لصار لوناً رابعاً بلا معنى مخصّص له. دوره هنا واحد: فصل الملاحة
     عن مساحة البيانات بصرياً. */
  --sky-800:#075985;   /* النصّ فوق التلوين */
  --sky-700:#0369a1;
  --sky-600:#0284c7;   /* شريط العنصر النشط */
  --sky-500:#0ea5e9;
  --sky-400:#38bdf8;
  --sky-200:#bae6fd;   /* الحدود */
  --sky-100:#e0f2fe;   /* التلوين */
  --sky-050:#f0f9ff;

  /* --- البرتقالي: النماذج ---
     النموذج ليس اتّجاهاً — «انفجار العملة» يحمل صعوداً وهبوطاً معاً،
     فأخضره كذبٌ على نصفه وأحمره كذبٌ على نصفه الآخر. ولذلك لونٌ ثالث
     لا يزاحم دلالة الربح والخسارة. */
  --amber-800:#7c3a06;   /* النصّ فوق التلوين */
  --amber-600:#d97706;   /* الشريط */
  --amber-500:#f59e0b;

  /* أزرقُ تيفاني — لبطاقة المفضّلة وحدَها.
     ⚠ والأساسُ واحدٌ في النمطَين لأنّه يُخلَط لا يُكتب نصّاً، والحبرُ
        يختلف: ‎#0ABAB5‎ على الأبيض تباينُه دون الثلاثة فلا يُقرأ. */
  --tiffany:#0abab5;
  --tiffany-ink:#0c8b87;
  --amber-200:#fde3af;   /* الحدود */
  --amber-100:#fef2dc;   /* التلوين */

  /* --- الحياد --- */
  --ink:#10241b;
  --ink-2:#2c4438;
  --muted:#63796d;
  --muted-2:#8ba095;
  --line:#e3ece7;
  --line-2:#eef4f1;

  /* ══════════════════════════════════════════════════════════════
     المِسْطار — حافّةُ البطاقة التي تُبرَز
     ══════════════════════════════════════════════════════════════
     ⚠ و«أبيض» لا تُنفَّذ ‎#fff‎ حرفاً في السمتَين: البطاقةُ في النهار
        بيضاءُ أصلاً (‎--surface:#ffffff‎) على صفحةٍ شبهِ بيضاء، فإطارٌ
        أبيضُ عليها لا يُرى — وطلبُ «أبرِز هذه البطاقة» يعود بلا أثر.

        فالمقصودُ حافّةٌ فاتحةٌ **تُرى**: في الليل بيضاءُ بحقٍّ، وفي
        النهار حبرٌ خفيفٌ يؤدّي الدورَ نفسَه — إبرازُ حدٍّ كان ذائباً. */
  --frame-edge:color-mix(in srgb, var(--ink) 22%, transparent);
  --frame-halo:color-mix(in srgb, var(--ink) 5%,  transparent);

  /* وهَجُ الصفّ الطازج في بطاقة النتائج — من عائلة إطارها لا من
     الكهرمان. و‎#fff‎ حرفاً لا تصلح نهاراً: بيضاءُ على بيضاء. */
  --fresh-wash:color-mix(in srgb, var(--ink) 9%, transparent);

  /* إطار تبويبات الأسواق — انظر .mk-tab.
     على الورقة البيضاء لا يفصل الأبيضُ شيئاً، فالحدّ الحادّ هنا داكن. */
  --tab-line:#c4d3cb;
  --tab-line-hi:#7d9488;

  --surface:#ffffff;
  --surface-2:#f7fbf9;
  --surface-3:#f1f7f4;

  /* --- الحالات: مقصود ألّا يكون أخضر الربح هو أخضر الهوية --- */
  --up:#0f9d58;
  --up-bg:#e6f6ee;
  --down:#d1453b;
  --down-bg:#fdecea;
  --warn:#b7791f;
  --warn-bg:#fdf6e3;
  --info:#2b6cb0;
  --info-bg:#ebf4fb;

  /* --- القياسات --- */
  --r-sm:6px;
  --r:10px;
  --r-lg:14px;
  --r-pill:999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:44px;

  --shadow-1:0 1px 2px rgba(16,36,27,.05);
  --shadow-2:0 4px 16px -6px rgba(16,36,27,.14);
  --shadow-3:0 18px 48px -20px rgba(16,36,27,.28);

  --sidebar-w:248px;
  --topbar-h:62px;

  --font:"Segoe UI","Tahoma",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* خطُّ الأرقام — واحدٌ في المشروع كلِّه ومنصّاته.
     ------------------------------------------------------------------
     كان ‎Consolas‎ وأخواتُه: خطُّ آلةٍ كاتبة، حروفُه عريضةٌ متباعدة
     وأرقامُه ثقيلة. وهو خطُّ الشيفرة لا خطُّ السعر.

     وهذه سلسلةُ منصّات التداول نفسُها، فيقع الرقمُ على الشاشة كما يقع
     هناك على أيّ نظام: ‎-apple-system‎ في ماك، و‎Trebuchet‎ في ويندوز،
     و‎Roboto/Ubuntu‎ في لينكس.

     ⚠ و‎tabular-nums‎ شرطٌ لا زينة: السعرُ يتبدّل عشرين مرّةً في
        الثانية، وأرقامٌ متفاوتةُ العرض تجعل الرقمَ يرقص في مكانه
        فيتعذّر تتبّعه بالعين. */
  --num:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;

  /* ⚠ اسمٌ قديمٌ باقٍ: عشراتُ القواعد تستعمله، وكلُّها أرقامٌ ورموزُ
     أدواتٍ لا شيفرة — فتُحوَّل كلُّها بسطرٍ واحدٍ إلى خطّ الأرقام. */
  --mono:var(--num);

  --topbar-bg:rgba(255,255,255,.92);
  --overlay:rgba(16,36,27,.42);

  /* قضيب مدى اليوم — ألوان مستقلّة عن ألوان الربح والخسارة كي يُضبط
     تشبّعها وحدها دون المساس بمعنى الأخضر والأحمر في بقيّة الواجهة */
  --range-low:#e8695e;
  --range-mid:#dfe8e3;
  --range-high:#1eb87a;
  --range-edge:rgba(16,36,27,.08);
  --range-knob:var(--ink-2);

  color-scheme:light;
}

/* ==========================================================================
   الوضع المظلم

   كل ألوان الواجهة متغيّرات منذ البداية، فالوضع المظلم إعادة تعريف لها
   لا ورقة أنماط ثانية.

   ملاحظة على تدرّج الأخضر: في الوضع الفاتح تُستعمل الدرجات الفاتحة
   (050–200) خلفياتٍ، والغامقة (700–800) نصّاً فوقها. وفي المظلم ينقلب
   الدوران: الخلفيات تصير غامقة والنصّ فاتحاً. لذلك تُقلب هذه الدرجات
   هنا بدل أن تُظلَّم كلها بالتساوي — وإلّا صار النصّ الأخضر الغامق فوق
   خلفية خضراء غامقة غير مقروء.
   ========================================================================== */

/* الحياد هنا رماديّ خالص لا مخضرّ — على منوال لوحة Binance المظلمة:
   صفحة شديدة الإعتام (#0B0E11)، وبطاقات أفتح منها بدرجة (#181A20)،
   وفواصل رمادية (#2B3139). الخضرة تبقى في المعنى — الربح والهوية —
   لا في الخلفية، فخلفية مخضرّة تصبغ كل رقم فوقها وتُذهب حياد البيانات. */
:root[data-theme="dark"]{
  /* إطار تبويبات الأسواق: أبيضُ خافتٌ لا أبيضُ خالص.
     ────────────────────────────────────────────────────────────────
     اثنا عشر مستطيلاً بحدٍّ ‎#fff‎ على أرضيةٍ شديدة الإعتام تصير شبكةً
     تسحب العين عن الأرقام — وهي المقصودة. و‎72%‎ يبقى أبيضَ في الإدراك
     ويقصّ التبويب عن أرضيته بوضوح، ولا يزاحم ما بداخله. */
  --tab-line:rgba(255,255,255,.72);
  --tab-line-hi:#ffffff;

  /* تدرّج مقلوب: الخلفيات غامقة، والنصّ فاتح */
  --green-900:#0b0e11;   /* يبقى غامقاً: تذييل الصفحة العامّة يستعمله خلفيةً */
  --green-800:#8fe7bd;   /* نصّ فوق التلوين */
  --green-700:#5fd6a2;   /* الروابط */
  --green-600:#0ecb81;   /* خلفية الأزرار — أخضر Binance صريحاً */
  --green-500:#2ebd85;
  --green-400:#2c8f68;
  --green-300:#1f5c45;
  --green-200:#1b3d2f;   /* حدود التلوين */
  --green-100:#132720;   /* خلفية التلوين */
  --green-050:#101a16;

  /* السماوي مقلوب كالأخضر: الفاتح للنصّ والغامق للخلفية */
  --sky-800:#7dd3fc;   /* النصّ فوق التلوين */
  --sky-700:#38bdf8;
  --sky-600:#0ea5e9;   /* شريط العنصر النشط */
  --sky-500:#0284c7;
  --sky-400:#0c4a6e;
  --sky-200:#12384f;   /* الحدود */
  --sky-100:#0e2938;   /* خلفية التلوين */
  --sky-050:#0b1a24;

  /* البرتقالي مقلوب كغيره: الفاتح للنصّ والغامق للخلفية */
  --amber-800:#fcd34d;
  --amber-600:#f59e0b;
  --amber-500:#d97706;

  /* والحبرُ هنا الكلاسيكيُّ الفاتح — يُقرأ على ‎#181a20‎ */
  --tiffany:#0abab5;
  --tiffany-ink:#81d8d0;
  --amber-200:#4a3410;
  --amber-100:#2e2109;

  --ink:#eaecef;
  --ink-2:#b7bdc6;
  --muted:#848e9c;
  --muted-2:#5e6673;
  --line:#2b3139;
  --line-2:#222630;

  /* أبيضُ بحقٍّ هنا — لكن ثلثاً لا كاملاً: الخطُّ الأبيضُ الصريح على
     ‎#181a20‎ يسبق محتوى البطاقة إلى العين، والإطارُ يؤطّر ولا يُنافس. */
  --frame-edge:color-mix(in srgb, #ffffff 34%, transparent);
  --frame-halo:color-mix(in srgb, #ffffff 7%,  transparent);
  --fresh-wash:color-mix(in srgb, #ffffff 13%, transparent);

  --surface:#181a20;     /* البطاقات والشريط الجانبي */
  --surface-2:#0b0e11;   /* خلفية الصفحة ورؤوس الجداول */
  --surface-3:#1e2329;   /* التمرير والألواح الخفيفة */

  /* الربح والخسارة بلوني Binance نفسيهما */
  --up:#0ecb81;
  --up-bg:#0d2a20;
  --down:#f6465d;
  --down-bg:#2d1219;
  --warn:#f0b90b;
  --warn-bg:#2b2208;
  --info:#4a9fff;
  --info-bg:#101d2e;

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 4px 16px -6px rgba(0,0,0,.7);
  --shadow-3:0 18px 48px -20px rgba(0,0,0,.9);

  --topbar-bg:rgba(24,26,32,.92);
  --overlay:rgba(0,0,0,.65);

  --range-low:#f6465d;
  --range-mid:#2b3139;
  --range-high:#0ecb81;
  --range-edge:rgba(0,0,0,.5);
  --range-knob:var(--ink-2);

  color-scheme:dark;
}

/* المواضع التي يختلف فيها المعنى بين الوضعين، لا لونها فقط */
:root[data-theme="dark"] .brand-mark{
  background:linear-gradient(150deg,#2fa36b,#1a6b4a);
  box-shadow:0 2px 6px -1px rgba(0,0,0,.5);
}
/* لوح تسجيل الدخول: يبدأ من سواد الصفحة نفسه ثم يميل إلى الأخضر تدريجياً
   — الهوية حاضرة دون أن يقفز اللوح عن بقيّة الواجهة. */
:root[data-theme="dark"] .auth-side{
  background:linear-gradient(155deg,#0b0e11,#10241b 55%,#16452f);
}
:root[data-theme="dark"] ::selection{background:var(--green-400);color:#fff}
:root[data-theme="dark"] .btn-soft:hover{color:var(--green-800)}
:root[data-theme="dark"] .section-head .eyebrow{color:var(--green-700)}
:root[data-theme="dark"] .plan li .ico{color:var(--green-500)}
:root[data-theme="dark"] .feature .ico-box,
:root[data-theme="dark"] .rule-ico{color:var(--green-800)}
:root[data-theme="dark"] .pub-foot{border-top:1px solid var(--line)}
:root[data-theme="dark"] .switch i::before{background:#e8f2ec}
/* الزرّ الأساسي أخضر Binance؛ وعند المرور يُظلَّم درجةً كما عندهم، لا
   يُضاء — الإضاءة فوق أخضر بهذا التشبّع تُذهب تباين النصّ الأبيض. */
:root[data-theme="dark"] .btn-primary:hover{background:#0bb871;border-color:#0bb871;color:#fff}

/* سهم القوائم المنسدلة مرسوم بلون ثابت داخل الصورة */
:root[data-theme="dark"] select.input{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23848e9c' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
}

/* الرسوم المرسومة بألوان صريحة داخل السمة الفاتحة */
:root[data-theme="dark"] .range-bar{
  background:linear-gradient(90deg,var(--down-bg),var(--line),var(--up-bg));
}
:root[data-theme="dark"] .range-bar i{background:var(--ink)}

/* أثناء التبديل تُعطَّل كل الانتقالات.
   بعض العناصر (الأزرار، عناصر التنقّل) تحمل transition على اللون، وبقيّة
   الصفحة لا تحمله. فبلا هذا التعطيل ينقلب نصف الواجهة فوراً ويتلوّن
   نصفها الآخر خلال جزء من الثانية — يبدو كخلل لا كانتقال. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after{
  transition:none !important;
}

/* ========================================================================
   إعادة الضبط
   ======================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.65;
  color:var(--ink);
  background:var(--surface-2);
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{margin:0;font-weight:600;line-height:1.35}
h1{font-size:23px}
h2{font-size:19px}
h3{font-size:16px}
h4{font-size:14px}
p{margin:0 0 var(--sp-3)}
a{color:var(--green-700);text-decoration:none}
a:hover{color:var(--green-800);text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}
::selection{background:var(--green-200);color:var(--green-900)}

/* الأرقام لا ترقص.
   تنبيه: هذه المجموعة تفرض خطّ الأرقام واتجاهاً من اليسار — ولذلك لا
   يجوز أن يُضاف إليها صنف قد يحمل نصّاً عربياً. خطُّ الأرقام لاتينيٌّ
   لا يحوي العربية فتسقط إلى بديل، والاتجاه المفروض يقلب ترتيب الجملة.
   لهذا يُوسم الرقم بـ .num صراحةً بدل أن يُفترض من موضعه. */
/* الأرقام داخل النصّ: عنصر مستقلّ لا يرث اتجاه الجملة العربية. */
.num:not(td):not(th),.price,.money{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.02em;
  direction:ltr;
  unicode-bidi:embed;
  display:inline-block;
}

/* خلايا الجدول الرقمية.
   تأخذ نفس المعالجة الرقمية **دون display:inline-block** — لأن تغيير
   نوع العرض على td أو th يُخرجها من خوارزمية تخطيط الجدول، فتنهار
   محاذاة الأعمدة وتتضاعف ارتفاعات الصفوف. */
td.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.02em;
  direction:ltr;
  unicode-bidi:embed;
}

/* عنوان العمود نصّه عربي وإن كان العمود رقمياً: لا خطّ أحادي ولا
   اتجاه لاتيني — المحاذاة وحدها.

   انتبه: الخليّة الرقمية اتجاهها ltr، فـ end فيها = اليمين الفعلي.
   أمّا العنوان فيبقى rtl، وend فيه = اليسار الفعلي. لو استُعملت end
   في الاثنين لانزاح العنوان إلى الجهة المقابلة لأرقامه — لذا يُحاذى
   العنوان بـ start ليقف فوق الأرقام تماماً. */
th.num{text-align:start}

/* ══════════════════════════════════════════════════════════════════
   الخانةُ الأخيرةُ مرفوعة — شكلُ الأرقام في منصّات التداول
   ══════════════════════════════════════════════════════════════════
       4,445.39⁵        بدل      4,445.395
       +0.0⁹%           بدل      +0.09%

   العينُ تلتقط ‎4,445.39‎ بلمحة، ومن أراد الخانةَ الأخيرة وجدها فوقها.
   وهي في الأصل «البِيبِتّ» — عُشرُ أصغرِ وحدةِ تسعير — ثمّ عُمّمت على
   كلّ رقمٍ في الواجهة كي لا يختلف شكلُ الرقم بين صفحةٍ وأخرى.

   تُولَّد من ‎nsup()‎ في PHP ومن ‎NX.sup()‎ في الجافاسكربت — لا تُكتب
   يدوياً في الصفحات.

   ⚠ وحجمُها نسبةٌ من الحرف (‎em‎) لا مقاسٌ ثابت: أرقامُ هذه الواجهة
      بين ‎9‎ و‎30‎ بكسلاً، ومقاسٌ واحدٌ يصلح لطرفٍ ويشوّه الآخر.

   ⚠ ولها أرضيّةٌ بالبكسل: ‎.6em‎ من رقمٍ بتسعة بكسلات = خمسةٌ ونصف،
      وهو حدٌّ لا يُقرأ. فتُؤخذ الأكبر.

   ⚠ و‎vertical-align:baseline‎ مع إزاحةٍ صريحة لا ‎super‎: الأخيرةُ
      تُوسّع سطرَ الكتابة كلَّه، فتتباعد صفوفُ الجدول لأجل خانةٍ واحدة. */
.nsup{
  font-size:max(9px,.6em);
  font-weight:inherit;
  line-height:1;
  vertical-align:baseline;
  position:relative;
  top:-.45em;
  margin-inline-start:.06em;
  opacity:.92;
}

.up{color:var(--up)}
.down{color:var(--down)}
.mut{color:var(--muted)}
.mut-2{color:var(--muted-2)}
.tiny{font-size:11.5px}
.small{font-size:12.5px}
.bold{font-weight:600}
.ltr{direction:ltr;unicode-bidi:embed}
.nowrap{white-space:nowrap}
.center{text-align:center}
.hidden{display:none !important}

/* ========================================================================
   الهيكل
   ======================================================================== */

.app{min-height:100vh}

/* في اتجاه RTL: inline-start = اليمين، وinline-end = اليسار.
   الشريط الجانبي في واجهة عربية مكانه اليمين، فيُثبَّت على
   inset-inline-start. والحدّ على inline-end لأنه الوجه المقابل للمحتوى.
   وحين يُغلق الدرج، translateX(100%) يدفعه يميناً خارج الشاشة تماماً. */
/* البلوك كلّه بتدرّج سماوي: الملاحة ليست بيانات، فتلوينها يفصلها عن
   مساحة الأرقام بدل أن تسبح معها على سطح واحد. والتدرّج رأسيّ ممتدّ على
   كامل الارتفاع — لا يتلاشى في المنتصف — كي يبقى البلوك وحدةً واحدة. */
.sidebar{
  position:fixed;
  inset-block:0;
  inset-inline-start:0;
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--sky-100),var(--sky-050) 58%,var(--sky-100));
  border-inline-end:1px solid var(--sky-200);
  display:flex;
  flex-direction:column;
  z-index:120;
}

/* ستارة الدرج على الشاشات الصغيرة.
   بدونها يبدو الدرج «طائراً» فوق صفحة ما زالت تُقرأ وتُمرَّر خلفه،
   ولا يعرف المستخدم أين ينقر ليُغلقه. */
.sidebar-backdrop{
  position:fixed;inset:0;z-index:110;
  background:rgba(16,36,27,.42);
  /* ضبابٌ زجاجيّ لا شاشٌ رمادي: ‎٢‎ بكسل كانت تُعتّم ولا تُخفي، فتبقى
     الأرقام مقروءةً خلف الستارة. و‎saturate‎ دون الواحد يسحب اللون فيقرأ
     ما خلفها «مؤجّلاً» لا «معروضاً باهتاً». */
  -webkit-backdrop-filter:blur(9px) saturate(.75);
          backdrop-filter:blur(9px) saturate(.75);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.sidebar-backdrop.is-open{opacity:1;visibility:visible}

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

   والإخفاء هنا وظيفةٌ لا زينة، فالضبابُ قويّ عمداً: ما يُقرأ من خلف
   الزجاج ليس مخفيّاً. */
/* ⚠ الترتيب هنا ليس تفصيلاً.
   ────────────────────────────────────────────────────────────────
   سِمةُ ‎hidden‎ تعمل بقاعدةٍ في المتصفّح: ‎[hidden]{display:none}‎، ووزنُها
   وزنُ سِمة — أي أقلُّ من وزن الصنف. فإعطاءُ ‎.dim-veil‎ قيمةَ ‎display‎
   يُبطلها بصمت: الستارةُ مرسومةٌ دائماً فوق الصفحة بشفافيّةٍ صفر، تبتلع
   كلَّ ضغطةٍ — فتبدو الصفحة معلّقةً وهي سليمة.

   فالإخفاءُ يُعلَن هنا صراحةً، ويُقطَع التقاطُ الضغطات ما لم تكن نازلة —
   حارسان لا واحد، لأن ثمنَ الخطأ شاشةٌ لا تستجيب. */
.dim-veil[hidden]{display:none}
.dim-veil:not(.is-on){pointer-events:none}

.dim-veil{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;
  cursor:pointer;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.28), rgba(0,0,0,.62));
  -webkit-backdrop-filter:blur(26px) saturate(.5) brightness(.62);
          backdrop-filter:blur(26px) saturate(.5) brightness(.62);
  opacity:0;
  transition:opacity .28s ease;
}
.dim-veil.is-on{opacity:1}

.dim-hint{
  display:grid;justify-items:center;gap:5px;
  padding:var(--sp-5) var(--sp-7);
  border-radius:var(--r-lg);
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.8);
  text-align:center;
  /* لا يشدّ العين: هو تذكيرٌ لا محتوى */
  opacity:.85;
}
.dim-hint b{font-size:14px;font-weight:650}
.dim-hint span{font-size:11.5px;opacity:.75}
.dim-hint svg{opacity:.75}

/* الزرّ يقول إنه فاعلٌ الآن — ولولا ذلك لبدا أنه لم يعمل بعد رفع الستارة */
.dim-toggle[aria-pressed="true"]{
  color:var(--amber-600);
  background:var(--amber-100);
  border-color:var(--amber-200);
}

/* قفل تمرير الصفحة أثناء فتح الدرج */
body.nav-open{overflow:hidden}

.sidebar-brand{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:0 var(--sp-5);
  border-bottom:1px solid var(--sky-200);
  flex:none;
}

.brand-mark{
  width:30px;height:30px;
  border-radius:8px;
  background:linear-gradient(150deg,var(--green-500),var(--green-700));
  display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:14px;
  flex:none;
  box-shadow:0 2px 6px -1px rgba(33,138,94,.45);
}

.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text b{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.brand-text span{font-size:10.5px;color:var(--muted-2)}

.sidebar-nav{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-3)}
.sidebar-nav::-webkit-scrollbar{width:5px}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--sky-200);border-radius:9px}

.nav-group{margin-bottom:var(--sp-5)}
.nav-label{
  font-size:10.5px;font-weight:600;
  color:var(--sky-700);opacity:.72;text-transform:uppercase;
  padding:0 var(--sp-3);margin-bottom:var(--sp-2);
}

.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px var(--sp-3);
  border-radius:var(--r-sm);
  color:var(--ink-2);
  font-size:13.5px;
  margin-bottom:1px;
  position:relative;
  transition:background .13s ease,color .13s ease;
}
/* نفس أسلوب رقائق الاستراتيجيات: شريط عند الحافّة يحمل اللون كاملاً،
   وتدرّج يتلاشى نحو الداخل فيبقى النصّ مقروءاً. */
.nav-item:hover{
  background:linear-gradient(to left,var(--sky-200),transparent 72%);
  color:var(--sky-800);text-decoration:none;
}
.nav-item.is-active{
  background:linear-gradient(to left,var(--sky-200),transparent 38%);
  color:var(--sky-800);font-weight:600;
  box-shadow:0 0 18px -10px var(--sky-500);
}
.nav-item.is-active::before{
  content:"";position:absolute;
  inset-inline-start:calc(var(--sp-3) * -1);
  top:50%;transform:translateY(-50%);
  width:3px;height:18px;
  border-start-end-radius:3px;border-end-end-radius:3px;
  background:var(--sky-600);
}
.nav-item .ico{width:17px;height:17px;flex:none;opacity:.8}
.nav-item.is-active .ico{opacity:1}
.nav-item .badge{margin-inline-start:auto}

.sidebar-foot{
  flex:none;padding:var(--sp-3);
  border-top:1px solid var(--sky-200);
}

.main{
  margin-inline-start:var(--sidebar-w);
  min-height:100vh;
  display:flex;flex-direction:column;
}

.topbar{
  height:var(--topbar-h);
  background:var(--topbar-bg);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:var(--sp-4);
  padding:0 var(--sp-6);
  position:sticky;top:0;z-index:50;
}

/* العنوان هو الذي يتقلّص عند ضيق الشاشة، لا شريط الأدوات */
.topbar-title{min-width:0;flex:1 1 auto}
.topbar h1{font-size:16.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .sub{font-size:11.5px;color:var(--muted-2);margin-top:-2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sp-2);flex:none}

.page{padding:var(--sp-6);flex:1;max-width:1560px;width:100%}
.page-head{display:flex;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.page-head .grow{flex:1;min-width:220px}
.page-head h2{margin-bottom:2px}
.page-head p{color:var(--muted);font-size:13px;margin:0}

.menu-toggle{display:none}

/* ========================================================================
   البطاقات والأسطح
   ======================================================================== */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-1);
}
.card-head{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line-2);
}
.card-head h3{font-size:14.5px}

/* ══════════════════════════════════════════════════════════════════
   بطاقةُ النتائج — مؤطَّرةٌ ورؤوسُها مفتوحة
   ══════════════════════════════════════════════════════════════════
   ⚠ والهالةُ ظِلٌّ لا حدٌّ ثانٍ: ‎box-shadow‎ بنصف قطرٍ صفرٍ وامتدادِ
      ثلاثةِ بكسلات يرسم طوقاً خارجَ الحدّ لا يزيح شيئاً في التخطيط
      (بخلاف حدٍّ ثانٍ أو ‎outline-offset‎ يدفعان الجوار). فيبدو الإطارُ
      سميكاً من غير أن تتحرّك البطاقةُ بكسلاً واحداً.

   ⚠ ورؤوسُ الجدول كانت ‎--surface-2‎ — وهي في الليل ‎#0b0e11‎، أي
      **خلفيّةُ الصفحة** نفسُها. فالرأسُ أغمقُ من البطاقة التي يقع فيها،
      فيُقرأ ثقباً في وسطها لا عنواناً لأعمدتها. والمزجُ مع الحبر يرفعه
      فوق سطح البطاقة في السمتَين معاً: يفتحُ في الليل، ويُحدَّد في
      النهار — والاتّجاهان صحيحان، لأنّ المطلوب أن **يُرى** لا أن يبيضّ. */
#scr-card{
  border-color:var(--frame-edge);
  box-shadow:0 0 0 3px var(--frame-halo), var(--shadow-2);
}

#scr-card .card-head{border-bottom-color:var(--frame-edge)}

#scr-card .tbl th{
  background:color-mix(in srgb, var(--ink) 7%, var(--surface));
  border-bottom-color:var(--frame-edge);
}

/* والرأسُ لاصقٌ عند التمرير (‎position:sticky‎)، فحدُّه السفليُّ هو ما
   يفصله عن الصفوف المارّة تحته — ويبقى بلونه لا بلون الجدول. */
#scr-card .tbl thead tr:last-child th{box-shadow:0 1px 0 var(--frame-halo)}

/* ══════════════════════════════════════════════════════════════════
   اسمُ الشركة — مقصوصٌ لا جارٌّ للجدول
   ══════════════════════════════════════════════════════════════════
   ⚠ و‎max-width‎ على العنصر الداخليّ لا على الخليّة: الخليّةُ تتمدّد
      بمحتواها، فتحديدُها وحدَها لا يمنع النصَّ الذي لا ينكسر من دفعها.
      والقصُّ يقع حيث يُقاس الطولُ فعلاً — على الصندوق الذي يحمل النصّ. */
/* شارةُ التثبيت — علامةٌ لا لون: هي تقول «وُضع» لا «صاعد» ولا
   «جديد»، فلا تأخذ من ألوان المعنى شيئاً. */
/* ⚠ ولا تُستعمل ‎background‎ المختصرة على قائمةٍ منسدلة.
   ══════════════════════════════════════════════════════════════════
   كان هنا ‎.input:disabled{background:...}‎ لخانةٍ أُقفلت. والمختصرةُ
   تُصفّر ما لم يُذكَر فيها — ومنه ‎background-repeat‎، و‎select.input‎
   أدناه ترسم سهمَها صورةً بـ‎no-repeat‎. فصار السهمُ يتبلّط على الخانة
   كلِّها: شبكةُ أسهمٍ مكان القائمة.

   وحُذفت الخانةُ فحُذف معها النمط. ومن أراد تلوينَ حقلٍ مقفلٍ يوماً
   فليكتب ‎background-color‎ وحدَها. */

.pin-badge{
  display:inline-flex;align-items:center;
  margin-inline-start:5px;color:var(--muted);opacity:.7;
  vertical-align:middle;
}

.sym-name{
  display:block;max-width:158px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   وهَجُ الرصدة الجديدة — أبيضُ هنا، كهرمانيٌّ في السجلّ
   ══════════════════════════════════════════════════════════════════
   الكهرمانُ هويّةُ «سجلّ الرصد» كلِّه: حدُّه ‎--amber-200‎ ورأسُه متدرّجٌ
   بـ‎--amber-100‎. فحين يكون وهَجُ الصفّ الطازج كهرمانيّاً في **الجدولَين**
   يذوب الفرقُ بين البطاقتَين — واللوحةُ تُقرأ كتلةً واحدة.

   فيُنسَب كلُّ وهَجٍ إلى بطاقته: النتائجُ إلى إطارها الأبيض، والسجلُّ
   يبقى على كهرمانه. والقاعدةُ العامّة لم تُمَسّ — سجلُّ الرصد يرثها. */
#scr-card .tbl tbody tr.is-fresh{
  background:linear-gradient(to left, var(--fresh-wash), transparent 45%);
}
.card-head .actions{margin-inline-start:auto;display:flex;gap:var(--sp-2);align-items:center}
.card-body{padding:var(--sp-5)}
.card-body.tight{padding:var(--sp-4)}
.card-foot{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--line-2);background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}

.grid{display:grid;gap:var(--sp-4)}
/* نفس فخّ \u200E.dim-veil\u200E أعلاه: \u200Edisplay:grid\u200E من صنفٍ في ورقة المؤلّف يعلو
   على \u200E[hidden]{display:none}\u200E من ورقة المتصفّح، فتبقى الشبكة مرسومةً
   وسِمةُ \u200Ehidden\u200E عليها. والإعلان هنا يجعل السِّمة تعمل على كل شبكة —
   فلا يُكتشف الخلل حقلاً بعد حقل. */
.grid[hidden]{display:none}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g-cards{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}

/* تخطيط «محتوى + عمود جانبي».
   كان كل صفحة تكتب نسبتها وتكرّر استعلام الوسائط بنفسها، فسقطت منها
   صفحتان بلا استجابة إطلاقاً. الآن صنف واحد يحكم الجميع. */
.g-split{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.g-split-rev{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}

.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}

/* عنصر مرن لا يقلّ عن محتواه افتراضياً، فيدفع أباه إلى تمرير أفقي.
   هذا السطر وحده يمنع أكثر حالات الطفح شيوعاً في التخطيطات المرنة. */
.stack > *,.row > *,.grid > *{min-width:0}
.card,.pos,.stat{min-width:0}

/* ========================================================================
   لوحة الإحصاء
   ======================================================================== */

.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--sp-4) var(--sp-5);
  position:relative;
  overflow:hidden;
}
.stat-label{
  font-size:11.5px;color:var(--muted);
  display:flex;align-items:center;gap:6px;
  margin-bottom:6px;
}
/* التضييق يُطبَّق على الأرقام وحدها: الخطّ العربي متّصل، وتضييق
   المسافات فيه يفكّ اتصال الحروف بصرياً. */
.stat-value{font-size:22px;font-weight:600;line-height:1.2}
.stat-value.num{letter-spacing:-.03em}
/* حقول رقمية: نستعمل type=text مع inputmode لأن Chrome يشكّل أرقام
   type=number بأرقام هندية حين تكون لغة الصفحة عربية، فتختلف عن كل
   أرقام الواجهة الأخرى. */
input[inputmode=decimal]{font-family:var(--mono);direction:ltr;text-align:start}
.stat-sub{font-size:11.5px;color:var(--muted-2);margin-top:3px}
.stat-tag{
  position:absolute;inset-block-start:var(--sp-4);inset-inline-start:var(--sp-4);
  font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--r-pill);
}
.stat.accent{background:linear-gradient(180deg,var(--green-050),var(--surface));border-color:var(--green-200)}

/* ========================================================================
   الأزرار
   ======================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:13px;font-weight:550;
  padding:8px 15px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  background:var(--surface);
  color:var(--ink-2);
  cursor:pointer;
  white-space:nowrap;
  transition:background .13s ease,border-color .13s ease,color .13s ease,transform .06s ease;
  user-select:none;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(.5px)}
.btn:disabled,.btn.is-loading{opacity:.55;pointer-events:none}
.btn .ico{width:15px;height:15px}

.btn-primary{background:var(--green-600);color:#fff;border-color:var(--green-600)}
.btn-primary:hover{background:var(--green-700);border-color:var(--green-700);color:#fff}

.btn-soft{background:var(--green-100);color:var(--green-800);border-color:var(--green-200)}
.btn-soft:hover{background:var(--green-200);color:var(--green-900)}

.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-3);border-color:var(--green-200)}

.btn-danger{background:var(--down);color:#fff;border-color:var(--down)}
.btn-danger:hover{background:#b83a31;border-color:#b83a31;color:#fff}

.btn-danger-soft{background:var(--down-bg);color:var(--down);border-color:#f6d5d2}
.btn-danger-soft:hover{background:#fbdedb}

.btn-sm{padding:5px 11px;font-size:12px;border-radius:var(--r-sm)}
.btn-xs{padding:3px 9px;font-size:11.5px}
.btn-lg{padding:11px 22px;font-size:14.5px}
.btn-block{width:100%}
.btn-icon{padding:7px;width:32px;height:32px}

/* زرّ تبديل السمة: أيقونتان في نفس المكان، تظهر واحدة حسب الوضع.
   عرض الشمس في الوضع المظلم يعني «اضغط لتُضيء» — الأيقونة تدلّ على
   الوجهة لا على الحالة الراهنة. */
.theme-toggle .ico{display:none}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:block}
:root:not([data-theme="dark"]) .theme-toggle .ico-moon{display:block}
.theme-toggle{transition:color .15s ease,background .15s ease}
.theme-toggle:hover{color:var(--green-700)}

.btn-group{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.btn-group .btn{border:0;border-radius:0;background:var(--surface)}
.btn-group .btn+.btn{border-inline-start:1px solid var(--line)}
.btn-group .btn.is-active{background:var(--green-100);color:var(--green-800);font-weight:600}

/* ========================================================================
   الشارات
   ======================================================================== */

.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:600;line-height:1.6;
  padding:1px 8px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--muted);
  border:1px solid transparent;
  white-space:nowrap;
}
.badge-green{background:var(--green-100);color:var(--green-800)}
.badge-up{background:var(--up-bg);color:var(--up)}
.badge-down{background:var(--down-bg);color:var(--down)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-line{background:transparent;border-color:var(--line);color:var(--muted)}
.badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

.pulse{position:relative}
.pulse::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:currentColor;opacity:.45;
  animation:pulse 1.9s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.45}
  70%{transform:scale(2.6);opacity:0}
  100%{opacity:0}
}

/* ========================================================================
   تذكرة الصفقة — قلب الواجهة

   كل ما في التذكرة — الحدُّ والزاويةُ والظلُّ والحلقةُ والتخريمُ وخلايا
   الرأس — يشتقّ لونَه من متغيّرٍ واحد: ‎--t‎. تُبدَّل نبرةُ البطاقة بصفٍّ
   واحد (‎.pos-up‎ / ‎.pos-down‎ / ‎.pos-flat‎)، فتتبعه سبعُ طبقاتٍ دفعةً
   واحدة، ولا يبقى موضعٌ يُنسى فيُظهر ربحاً بلون خسارة.

   والحياد لونٌ ثالث لا درجةٌ باهتة من الأخضر: صفقةٌ نتيجتها أجزاءُ سنتٍ
   ليست رابحة، وصبغُها خضراء كذبٌ صغيرٌ يُبنى عليه قرار.
   ======================================================================== */

.pos{
  --t:var(--muted-2);
  position:relative;isolation:isolate;
  background:linear-gradient(180deg,
              color-mix(in srgb,var(--t) 8%,var(--surface)) 0,
              var(--surface) 46%);
  border:1px solid color-mix(in srgb,var(--t) 26%,var(--line));
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-1),0 14px 30px -22px color-mix(in srgb,var(--t) 75%,transparent);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.pos-up  {--t:var(--up)}
.pos-down{--t:var(--down)}
.pos-flat{--t:var(--muted-2)}

.pos:hover{
  border-color:color-mix(in srgb,var(--t) 48%,var(--line));
  box-shadow:var(--shadow-1),0 22px 46px -24px color-mix(in srgb,var(--t) 90%,transparent);
}

/* المحتوى فوق الطبقتين الزخرفيتين دائماً، والرأسُ فوق الجميع: الأرقام
   الكبيرة لا يصحّ أن يمرّ فوقها شيءٌ زخرفيّ مهما تغيّر ترتيب العناصر */
.pos > *{position:relative;z-index:1}
.pos-stub,.pos-perf{z-index:3}
.pos-head{z-index:4}

/* الجهة كانت شريطاً أخضر أو أحمر على الحافّة. وقد صار الحدُّ كلّه يحمل
   نتيجةَ الصفقة، فبقاءُ الشريط يعني خطّاً أخضر على تذكرةٍ حمراء: لونان
   متضادّان في إطارٍ واحد، أحدهما يقول «شراء» والآخر يقول «خسارة»، ولا
   شيء في الشكل يميّز أيّهما يتكلّم عن ماذا. فانتقلت الجهة إلى سهمٍ في
   شارتها — رمزٌ لا لون، فلا يزاحم. */

/* ── الزاوية: لطخةٌ مائلة تنزل من الكتف، لا مستطيلٌ ملوّن ───────────
   الميلُ وحده هو ما يجعل الخلفية تُقرأ حركةً لا حشوة. وهي تخرج عن حدّ
   البطاقة من الجانبين ثم يقصّها ‎overflow‎، فيبقى القطعُ نظيفاً. */
.pos-angle{
  position:absolute;z-index:0;pointer-events:none;
  inset-block-start:-58px;inset-inline:-12%;height:186px;
  transform:skewY(-7deg);
  background:
    linear-gradient(115deg,
      color-mix(in srgb,var(--t) 32%,transparent) 0,
      color-mix(in srgb,var(--t) 13%,transparent) 38%,
      transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--t) 14%,transparent) 0,
      transparent 100%);
  /* القناعُ يُذيب الطبقة عند طرفها السفلي.
     التدرّج المائل ‎115deg‎ لا يخفت في الاتّجاه الرأسي، فكان يُقطع عند
     حافّة العنصر قطعاً حادّاً — وحافّةُ العنصر مائلةٌ بميل الزاوية،
     فيظهر خطٌّ قُطريّ يعبر الشريط والشبكة ويُقرأ خدشاً. والقناع يُطبَّق
     في إحداثيّات العنصر قبل الميل، فيميل الذوبانُ مع الطبقة نفسها. */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 100%);
}
/* لا خيطَ على حافّة الزاوية.
   كان هناك خطٌّ بسمك بكسل يرسم القطع، وهو مائلٌ بميل الزاوية، فيمرّ
   قُطرياً عبر الشريط والشبكة ويُقرأ خدشاً في البطاقة لا حدّاً لطبقةٍ
   خلفها. والتدرّجُ وحده يكفي لقول ما كان يقوله. */

/* ── العلامة الغائرة: ختمٌ ذهبيّ مستقيمٌ في قلب التذكرة ────────────
   ذهبيّةٌ عمداً فوق أخضرَ أو أحمر: الشعار هوية، والهويةُ لا تتلوّن
   بنتيجة الصفقة.

   وهي مركزيّةٌ لا ركنيّة: الختمُ في وسط الورقة تقليدُ التذاكر المطبوعة،
   والوسطُ هنا آمن — الأرقام تقع على شبكةٍ لها خلفيّتها الخاصّة، فلا
   يمرّ الختم تحت رقمٍ يُقرأ. */
.pos-watermark{
  position:absolute;z-index:0;pointer-events:none;
  inset:0;margin:auto;
  width:56%;max-width:196px;aspect-ratio:1;
  background:url("../images/kfoo-mark.png") center/contain no-repeat;
  opacity:.1;
  filter:drop-shadow(0 8px 14px rgba(16,36,27,.4));
}
/* على أرضيةٍ داكنة يبتلع السوادُ الذهبَ، فيُرفع قليلاً ليبقى ختماً يُرى،
   ويُبدَّل ظلُّه أسودَ خالصاً لأن ظلّ الوضع الفاتح مخضرٌّ لا يُقرأ هنا */
:root[data-theme="dark"] .pos-watermark{
  opacity:.14;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.7));
}

/* ── كعب التذكرة ──────────────────────────────────────────────── */
.pos-stub{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:9px var(--sp-5) 7px;
}
.pos-brand{display:flex;align-items:center;gap:7px;min-width:0}
/* الشعار الصغير يقع على أرضيّةٍ ملوّنة، فيحتاج ظلّاً يقصّه عنها كي
   يُقرأ معدناً لا لطخةً ذهبيّة */
.pos-brand-mark{
  width:26px;height:26px;flex:none;object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))
         drop-shadow(0 0 1px rgba(0,0,0,.35));
}
.pos-brand-txt{display:flex;flex-direction:column;line-height:1.08;min-width:0}
.pos-brand-txt b{
  font-size:11.5px;font-weight:800;letter-spacing:.12em;
  direction:ltr;color:var(--ink-2);white-space:nowrap;
}
/* السطر الثاني عربيّ الآن، فلا تباعدَ لاتينيّاً ولا اتّجاهاً مفروضاً:
   ‎letter-spacing‎ على العربية يفصل حروف الكلمة الموصولة */
.pos-brand-txt em{
  font-size:8.5px;font-style:normal;font-weight:600;
  color:var(--muted-2);white-space:nowrap;
}
.pos-serial{
  margin-inline-start:auto;
  font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--muted-2);direction:ltr;letter-spacing:.03em;
}

/* نبض السعر: التذكرة تقول إن رقمها حيٌّ الآن، أو إنه متوقّف */
.pos-live{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-pill);
  color:var(--up);
  background:color-mix(in srgb,var(--up) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--up) 30%,transparent);
}
.pos-live i{
  width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
  animation:pos-beat 2s ease-out infinite;
}
.pos-live em{font-style:normal;white-space:nowrap}
.pos-live .off,.pos-live .closing{display:none}
@keyframes pos-beat{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}
  70% {box-shadow:0 0 0 6px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ── خطّ التخريم: ما يجعلها تذكرةً لا بطاقة ───────────────────────
   الثقبان نصفُ دائرتين لأن البطاقة تقصّ ما خرج عنها؛ فالنصف الظاهر
   يبدو محفوراً في الحافّة لا ملصقاً عليها. */
.pos-perf{
  position:relative;display:block;height:1px;margin:2px 18px 0;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--t) 45%,var(--line)) 0 5px,transparent 5px 10px);
}
.pos-perf::before,.pos-perf::after{
  content:"";position:absolute;inset-block-start:-8px;
  width:16px;height:16px;border-radius:50%;
  background:var(--surface-2);
  border:1px solid color-mix(in srgb,var(--t) 26%,var(--line));
}
.pos-perf::before{inset-inline-start:-26px}
.pos-perf::after {inset-inline-end:-26px}

.pos-head{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5) var(--sp-3);
}

/* حلقةُ الرمز: العملة في مركزٍ محاطٍ بلون الحالة — كبيرة عمداً لأنها
   أوّل ما تقع عليه العين في التذكرة */
.pos-ring{
  position:relative;flex:none;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb,var(--t) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--t) 34%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--t) 7%,transparent);
}

.pos-sym{display:flex;flex-direction:column;min-width:0;line-height:1.25}
/* الرقم كبيرٌ ولا يُلفّ، فالرمزُ هو الذي يتنازل: يُقصّ بنقاطٍ ثلاث بدل
   أن يدفع الربحَ خارج البطاقة */
.pos-sym b{
  font-size:17px;font-weight:700;letter-spacing:-.02em;
  direction:ltr;font-feature-settings:"tnum" 1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pos-sym .meta{font-size:11.5px;color:var(--muted-2);display:flex;align-items:center;gap:5px;margin-top:1px}

.pos-side{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-sm);
}
.pos-side::before{font-size:8px;line-height:1}
.pos-side.long::before{content:"▲"}
.pos-side.short::before{content:"▼"}
.pos-side.long{background:var(--up-bg);color:var(--up)}
.pos-side.short{background:var(--down-bg);color:var(--down)}

.pos-lev{
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  padding:2px 7px;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--ink-2);
  border:1px solid var(--line);
  direction:ltr;
}

/* ── منطقة الربح: رقمٌ عارٍ ─────────────────────────────────────────
   لا لوحَ أسود، ولا خاناتِ حاسبةٍ خلفه، ولا توهّج. الرقمُ وحده على
   أرضيّة التذكرة.

   وكلُّ ما سبق كان يحاول تعويضَ تباينٍ ناقص بزينة. التباينُ يأتي من
   الحجم والوزن: ‎27‎ بكسل بوزن ‎700‎ وأرقامٌ جدوليّة لا ترقص وهي تتحدّث
   كل ثانية — وهذا وحده يكفي. */
.pos-pnl{
  margin-inline-start:auto;text-align:end;line-height:1.2;flex:none;
}
.pos-pnl .amount,
.pos-pnl .roi{
  font-family:var(--mono);font-weight:700;
  direction:ltr;display:block;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.pos-pnl .amount{font-size:27px;letter-spacing:-.02em;line-height:1.06}
.pos-pnl .roi{font-size:15px;margin-top:2px}

/* التذكرة المحايدة رماديّة حتى في أرقامها.
   الجافاسكربت الحيّ لا يعرف إلا ‎up‎/‎down‎ — والصفر عنده ربح — فالحياد
   يُفرَض هنا من صفّ البطاقة، ويبقى المحرّك على ثنائيّته دون كذب. */
.pos-flat .pos-pnl .amount,
.pos-flat .pos-pnl .roi{color:var(--muted)}

/* ── شريط الأرباح ──────────────────────────────────────────────────
   منتصفُ الشريط هو سعر الدخول لا نقطةٌ مجرّدة، فصار مُعلَّماً باسمه
   ورقمه: القارئ يعرف من أين تُقاس المسافة التي يراها، بدل أن يخمّن أن
   الوسط «صفرٌ» ما.

   والحدُّ المرسوم يمينَ الشريط وشمالَه هو ‎±٥٠٪‎ عائد؛ ما بعده يُقصّ،
   وهو مقصود: بعد نصف رأس المال لا يعود موضع الشريط هو الخبر. */
/* ‎z-index‎ أعلى من إخوته: شاخصُ الدخول يتدلّى خارج الشريط، والشبكةُ
   تليه في ترتيب الرسم فكانت تمرّ فوق اسمه ورقمه */
.pos-gauge{
  position:relative;z-index:2;height:7px;margin:0 var(--sp-5) 27px;
}
.pos-gauge .track{
  position:absolute;inset:0;border-radius:var(--r-pill);overflow:hidden;
  background:linear-gradient(180deg,var(--line),var(--line-2));
  box-shadow:inset 0 1px 2px rgba(16,36,27,.12);
}
.pos-gauge i{
  position:absolute;inset-block:0;border-radius:var(--r-pill);
  transition:width .35s ease;
}
/* التعبئة متدرّجةٌ من الوسط إلى الطرف مع هالة: قضيبٌ مسطّحٌ بلون واحد
   يقرأ حشوةً، والتدرّجُ يقرأ اتّجاهاً */
.pos-gauge i.up{
  inset-inline-start:50%;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--up) 55%,transparent),var(--up));
  box-shadow:0 0 10px color-mix(in srgb,var(--up) 60%,transparent);
}
.pos-gauge i.down{
  inset-inline-end:50%;
  background:linear-gradient(270deg,
    color-mix(in srgb,var(--down) 55%,transparent),var(--down));
  box-shadow:0 0 10px color-mix(in srgb,var(--down) 60%,transparent);
}
.pos-flat .pos-gauge i{background:var(--muted-2);box-shadow:none}

/* علامة الدخول: شاخصٌ في المنتصف تحته اسمه ورقمه */
.pos-gauge .entry{
  position:absolute;left:50%;top:-3px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0;
  pointer-events:none;
}
.pos-gauge .entry::before{
  content:"";width:2px;height:13px;border-radius:1px;
  background:var(--ink-2);opacity:.75;
  box-shadow:0 0 0 2px var(--surface);
}
.pos-gauge .entry em{
  font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.02em;
  color:var(--muted-2);margin-top:2px;white-space:nowrap;
}
.pos-gauge .entry b{
  font-family:var(--mono);font-size:10px;font-weight:700;direction:ltr;
  color:var(--muted);white-space:nowrap;line-height:1.1;
}

/* شبكة التفاصيل */
.pos-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-2);
}
.pos-cell{
  padding:10px var(--sp-4);
  border-inline-start:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  min-width:0;
}
.pos-cell:nth-child(3n+1){border-inline-start:0}
.pos-cell .k{font-size:10.5px;color:var(--muted-2);display:block;margin-bottom:2px}
.pos-cell .v{
  font-family:var(--mono);font-size:13px;font-weight:600;
  direction:ltr;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pos-cell .v small{font-family:var(--font);font-size:10.5px;font-weight:500;color:var(--muted-2);margin-inline-start:3px}

/* الصفّ المميَّز يحمل تلوين الحالة كبقيّة التذكرة، لا أخضرَ الهويّة:
   المال المرصود في الصفقة يُقرأ مع نتيجتها لا بمعزلٍ عنها */
.pos-cell.hl{background:color-mix(in srgb,var(--t) 9%,transparent)}

/* ── شريط الرحلة: الزمن والسعران ───────────────────────────────────
   رماديٌّ كلُّه إلّا سعرَ الخروج — سياقٌ لا خبر. والربح فوقه بلونه،
   فلو صُبغ هذا مثله لتنافس رقمان على العين وليس لأحدهما أولويّة.

   ولا حدّ علويّ له: الشبكة فوقه تُغلق صفوفها بحدٍّ سفليّ، فحدٌّ آخر هنا
   يُنتج خطّين متلاصقين يُقرآن سُمكاً لا فصلاً. */
.pos-trip{
  display:grid;grid-template-columns:1fr auto 1fr 1fr;
  align-items:center;gap:var(--sp-2);
  padding:8px var(--sp-4) 9px;
  border-bottom:1px solid var(--line-2);
  background:color-mix(in srgb,var(--muted-2) 4%,transparent);
}
.pos-trip .trip{display:flex;flex-direction:column;min-width:0;gap:1px}
.pos-trip .trip em{
  font-style:normal;font-size:9.5px;line-height:1.2;
  color:var(--muted-2);opacity:.85;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pos-trip .trip b{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  color:var(--muted);direction:ltr;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pos-trip .trip i{
  font-style:normal;font-family:var(--mono);font-size:10.5px;
  color:var(--muted-2);direction:ltr;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* سعر الخروج وحده يحمل نبرة النتيجة — هو الرقم الذي يتحرّك */
.pos-trip .trip i.up{color:color-mix(in srgb,var(--up) 78%,var(--muted-2))}
.pos-trip .trip i.down{color:color-mix(in srgb,var(--down) 78%,var(--muted-2))}

.pos-trip .trip-sep{
  font-size:12px;color:var(--muted-2);opacity:.5;
  padding-inline:2px;align-self:center;
}
/* المدّة تُقرأ من طرف البطاقة، فتُحاذى إلى الطرف */
.pos-trip .trip-age{text-align:end}
.pos-trip .trip-age b{font-size:12px;color:var(--ink-2)}

@media (max-width:380px){
  .pos-trip{grid-template-columns:1fr auto 1fr;row-gap:7px}
  .pos-trip .trip-age{grid-column:1 / -1;text-align:start}
}

/* ── ممرّ المخاطرة ─────────────────────────────────────────────────
   كان شريطاً يقول «‎١٠٫٩٪‎ إلى التصفية» ولا يقول عند أيّ سعرٍ تقع، ولا
   أين يقطع وقفُ الخسارة الطريقَ قبلها. والنسبةُ وحدها لا يُضبط عليها
   أمر: السوق يتحرّك بالأسعار.

   فصار المحورُ سعراً: طرفُه التصفية وطرفُه الآخر الدخول، وعليه علامتان
   — أين نحن الآن، وأين يُطلَق الوقف. والمسافة بين التصفية والوقف هي
   الجزء المكشوف من الممرّ فتُصبغ به وحده.

   وخلفيّتُه شفّافة لا صمّاء: الختمُ الذهبيّ يمرّ تحته، وكلُّ نصٍّ في
   البطاقة فوقه، فلا يُدفن ولا يُعكّر. */
.pos-risk{
  padding:9px var(--sp-5) 10px;
  background:color-mix(in srgb,var(--t) 6%,transparent);
  border-bottom:1px solid var(--line-2);
}

.pos-risk-top{
  display:flex;align-items:baseline;gap:5px;
  font-size:11.5px;margin-bottom:7px;
}
.pos-risk-top .k{color:var(--muted-2);font-size:10.5px}
.pos-risk-top .num{margin-inline-start:auto;font-family:var(--mono);direction:ltr}
.pos-risk-top .to{color:var(--muted-2);font-size:10.5px}

/* منحدرٌ لا تعبئة.
   ────────────────────────────────────────────────────────────────
   جرّبتُ تعبئةً تصبغ ما بين التصفية والوقف، فكانت تقرأ عكسَ معناها:
   وقفٌ ضيّقٌ قربَ الدخول — وهو الأفضل — يترك خلفه ممرّاً طويلاً فيمتلئ
   الشريط أحمر، فتبدو الصفقةُ المحميّة أخطرَ من المكشوفة.

   فصار الشريط منحدرَ خطرٍ ثابتاً: أحمرُ عند طرف التصفية يخفت نحو طرف
   الدخول. والقراءةُ موضعُ المقبضة عليه لا طولُ لونٍ خلفها — كلّما
   ابتعدت عن الطرف الأحمر كانت أبعد عن التصفية، وهذا يصحّ دائماً.

   والتدرّج فيزيائيّ ‎(to left)‎ لأن الصفر منطقيّ ‎(inset-inline-start)‎،
   والصفحة عربيةٌ دائماً فالبداية يمين: الأحمر يمين والدخول يسار. */
.pos-risk-bar{
  position:relative;height:7px;
  border-radius:var(--r-pill);
  background:linear-gradient(to left,
    var(--down) 0,
    color-mix(in srgb,var(--down) 55%,var(--warn)) 18%,
    color-mix(in srgb,var(--warn) 45%,var(--line)) 44%,
    var(--line) 78%,
    color-mix(in srgb,var(--t) 22%,var(--line)) 100%);
  box-shadow:inset 0 1px 2px rgba(16,36,27,.14);
}

/* علامة الوقف: قاطعٌ رأسيّ لا نقطة — هو حدٌّ لا موضع */
.pos-risk-bar .stop{
  position:absolute;inset-block:-3px;width:3px;
  transform:translateX(50%);
  border-radius:2px;background:var(--warn);
  box-shadow:0 0 0 1.5px var(--surface);
}
/* السعر الآن: مِقبضةٌ تتحرّك مع كل تحديث */
.pos-risk-bar .now{
  position:absolute;inset-block-start:50%;
  width:12px;height:12px;margin-block-start:-6px;
  transform:translateX(50%);
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--t);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:inset-inline-start .35s ease;
}

.pos-risk-legend{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:7px;font-size:10px;color:var(--muted-2);
}
.pos-risk-legend .lg{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;min-width:0}
.pos-risk-legend .lg b{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  direction:ltr;color:var(--muted);
}
/* نقطةٌ ملوّنة قبل كل اسم تربطه بما يقابله على الشريط */
.pos-risk-legend .lg::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
}
.pos-risk-legend .lg-liq::before  {background:var(--down)}
.pos-risk-legend .lg-stop::before {background:var(--warn)}
.pos-risk-legend .lg-entry::before{background:var(--t)}
.pos-risk-legend .lg-none::before {background:var(--muted-2);opacity:.5}
.pos-risk-legend .lg-bad::before  {background:var(--down)}
.pos-risk-legend .lg-none{color:var(--muted-2)}
.pos-risk-legend .lg-bad {color:var(--down);font-weight:700}

/* بلا وقفٍ نافع: الممرّ كلُّه مكشوف، فلا يصحّ أن يبقى نصفُه أخضر */
.pos-risk.is-unguarded .pos-risk-bar{
  background:linear-gradient(180deg,var(--line),var(--line-2));
}

/* القواعد المطبَّقة على هذه الصفقة */
.pos-rules{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px var(--sp-5);
  border-bottom:1px solid var(--line-2);
  min-height:40px;align-items:center;
}
.rule-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--muted);
  border:1px solid var(--line);
}
.rule-chip b{font-family:var(--mono);font-weight:700;direction:ltr}
.rule-chip.armed{background:var(--green-100);color:var(--green-800);border-color:var(--green-200)}
.rule-chip.near{background:var(--warn-bg);color:var(--warn);border-color:#f0e2c0}
.rule-chip.danger{background:var(--down-bg);color:var(--down);border-color:#f6d5d2}

/* ذيل التذكرة: خطٌّ ملوّنٌ رفيع في أسفلها يقابل زاويتها في أعلاها */
.pos-foot{
  position:relative;
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  background:color-mix(in srgb,var(--t) 7%,transparent);
  margin-top:auto;
}
.pos-foot::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,
    transparent,color-mix(in srgb,var(--t) 55%,transparent),transparent);
}
.pos-foot .age{font-size:11px;color:var(--muted-2);margin-inline-end:auto}

/* صفقة بلا سعر حيّ: الرقم متوقّف ويجب أن يبدو كذلك، لا أن يُعرض
   كأنه حديث. الصمت حالة لا غياب — وشارةُ الكعب هي التي تقولها الآن،
   فالنصُّ تحت الرقم كان يزحزح تخطيط البطاقة كلّما انقطعت القناة. */
.pos.is-stale{opacity:.66}
.pos.is-stale .pos-live{
  color:var(--warn);
  background:color-mix(in srgb,var(--warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn) 32%,transparent);
}
.pos.is-stale .pos-live i{animation:none}
.pos.is-stale .pos-live .on{display:none}
.pos.is-stale .pos-live .off{display:inline}

/* حالة إغلاق قيد التنفيذ — تحلّ محلّ شارة «مباشر» في موضعها نفسه.
   وضعُها لصق رقم التذكرة كان يزحمها بالهويّة في كعبٍ عرضه محدود، فتُقصّ
   الكلمة عند حافّة البطاقة. */
.pos.is-closing{opacity:.82}
.pos.is-closing .pos-live{
  color:var(--warn);
  background:color-mix(in srgb,var(--warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn) 32%,transparent);
}
.pos.is-closing .pos-live .on,
.pos.is-closing .pos-live .off{display:none}
.pos.is-closing .pos-live .closing{display:inline}

/* ========================================================================
   الفرز المتقدّم
   ======================================================================== */

.scr-strip{
  display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--sp-3) var(--sp-5);
}
.scr-stat{display:flex;flex-direction:column;gap:1px;min-width:0}
.scr-stat .k{font-size:11px;color:var(--muted-2);white-space:nowrap}
.scr-stat .v{font-size:16px;font-weight:650;line-height:1.2}
/* عدّاد المطابقات هو الرقم الذي يُنظَر إليه، فيُميَّز لا يُساوى بالبقيّة */
.scr-stat.is-hit .v{color:var(--up)}
.scr-live{cursor:pointer;display:flex;align-items:center}
.scr-live input{display:none}
.scr-live input:not(:checked) + .badge{opacity:.45;filter:grayscale(1)}

/* عمودان على السطح، وعمود واحد دونه */
/* min-width:0 على العمودين ضروري لا تجميلي: عنصر الشبكة عرضه الأدنى
   محتواه، فشريط الاستراتيجيات الأفقي كان يمدّ العمود بدل أن ينزلق داخله. */
.scr-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--sp-4);align-items:start}
/* ── عمود الاستراتيجيات: تمرير مستقلّ ──────────────────────────────
   القائمة تطول بطول ما تنشئه، والصفحة لا يصحّ أن تطول معها: النتائج
   في العمود المجاور تُقرأ وهي ثابتة، فلو حرّك المستخدم الصفحة ليصل
   إلى استراتيجية في الأسفل لذهبت النتائج من أمامه.

   فالعمود يُقصر على ارتفاع الشاشة، ورأسه (العنوان وزرّ «جديدة») يبقى
   ظاهراً، والقائمة وحدها هي التي تنزلق داخله.

   min-height:0 ليس تزيّداً: عنصر flex ارتفاعه الأدنى محتواه، فبدونها
   يتمدّد الغلاف ولا يظهر شريط تمرير أبداً. */
.scr-side{
  position:sticky;
  top:calc(var(--topbar-h) + var(--sp-4));
  min-width:0;
  max-height:calc(100vh - var(--topbar-h) - var(--sp-6));
  display:flex;
}
/* overflow:hidden يقصّ القائمة عند الزوايا المستديرة — بدونه يبرز
   شريط التمرير خارج انحناء البطاقة */
.scr-side > .card{display:flex;flex-direction:column;min-height:0;width:100%;overflow:hidden}
.scr-side > .card > .card-head{flex:none}
.scr-main{min-width:0}

/* الارتفاع مقيَّد مرّتين عمداً:
     • flex:1 + min-height:0  يقتسم ما تبقّى داخل البطاقة
     • max-height              يقيّده مباشرةً بلا اعتماد على سلسلة الآباء
   الثانية ليست تكراراً: لو انكسرت السلسلة يوماً (غلافٌ جديد، أو قاعدة
   تلغي min-height) بقي التمرير عاملاً. */
/* ١٧٠ لا ١١٨: بين الرأس والقائمة صار منتقي السوق، وهو الذي يقسم القائمة
   فيلزم أن يبقى ظاهراً معها. والرقم احتياطٌ لا حاكم — flex:1 أعلاه هو
   القياس الحقيقي. */
.scr-pick{padding:0 var(--sp-3) var(--sp-2);flex:none}
/* عنوانٌ صغيرٌ يفصل هذا المُنتقي عن مُنتقي المحرّر — انظر شرحَه في ‎screener.php‎ */
.scr-pick-cap{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin:0 2px 4px}
/* زرّ القوالب أسفل القائمة: خارج منطقة التمرير كي يبقى في المتناول */
.scr-seed{flex:none;margin:var(--sp-2);justify-content:center;width:calc(100% - var(--sp-4))}
.scr-pick .input{width:100%;font-size:12.5px;padding:7px 12px 7px 30px;background-position:left 10px center}

.scr-list{
  display:flex;flex-direction:column;padding:var(--sp-2);
  flex:1;min-height:0;
  max-height:calc(100vh - var(--topbar-h) - 170px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;                              /* فَيَرفُكس */
  scrollbar-color:var(--muted-2) transparent;
}

/* الشريط يُرى: ثمانية بكسلات ولونٌ يفرقه عن أرضية البطاقة.
   خمسةٌ بلون --line كانت تختفي في الوضع المظلم (#2b3139 على #181a20). */
.scr-list::-webkit-scrollbar{width:8px}
.scr-list::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.scr-list::-webkit-scrollbar-thumb{
  background:var(--muted-2);
  border-radius:9px;
  border:2px solid var(--surface);   /* يُنحّف الإبهام بصرياً دون أن يُخفيه */
}
.scr-list::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.scr-item{
  display:flex;flex-direction:column;gap:3px;
  padding:9px var(--sp-3);border-radius:var(--r-sm);
  color:var(--ink-2);text-decoration:none;
  border:1px solid transparent;
  /* flex-shrink:0 شرطٌ لظهور التمرير لا تجميل:
     في حاوية flex عمودية مقيَّدة الارتفاع، الأبناء ينكمشون افتراضاً
     ليتّسع لهم القيد — فلا يفيض شيء ولا يظهر شريط، وتُسحق العناصر
     بدل أن تنزلق. */
  flex:none;
}
.scr-item:hover{background:var(--surface-3);text-decoration:none}
.scr-item.is-active{background:var(--green-100);border-color:var(--green-200);color:var(--green-800)}
.scr-item-name{font-size:13px;font-weight:600}
.scr-item-meta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted-2)}

/* ── حذف من القائمة ────────────────────────────────────────────────
   الصفّ رابطٌ يفتح الاستراتيجية، والزرّ بداخله يحذفها — فلا بدّ أن
   يمنع الزرُّ انتشارَ الضغطة إلى الرابط (يفعل ذلك في الجافاسكربت).

   ويظهر بالمرور لا دائماً: القائمة تطول، وزرُّ حذفٍ أحمر بجانب كل
   صفٍّ يجعلها تبدو لوحةَ إنذارات. ويبقى ظاهراً على المفتوحة وعند
   التركيز بلوحة المفاتيح كي لا يُفقَد بلا فأرة. */
.scr-item{position:relative}
.scr-item-del{
  position:absolute;inset-block-start:7px;inset-inline-start:7px;
  display:grid;place-items:center;
  width:22px;height:22px;padding:0;
  border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--muted-2);
  cursor:pointer;opacity:0;
  transition:opacity .14s ease,color .14s ease,background .14s ease;
}
.scr-item:hover .scr-item-del,
.scr-item.is-active .scr-item-del{opacity:.55}
.scr-item-del:hover{
  opacity:1;color:var(--down);
  background:var(--down-bg);
  border-color:color-mix(in srgb,var(--down) 28%,transparent);
}
.scr-item-del:focus-visible{
  opacity:1;color:var(--down);
  outline:2px solid color-mix(in srgb,var(--down) 45%,transparent);outline-offset:1px;
}

/* ── منتقي القسم في نافذة الإنشاء ─────────────────────────────────
   لكل قسمٍ لونُه في كل حالاته: الدائرة، والحدّ، والأرضية، والمرور،
   والاختيار. وكان الأخضر يُستعمل للمختار أيّاً كان القسم — فيُختار
   «هابطة» فتضيء خضراء، وهو تناقضٌ بين ما اخترتَ وما تراه.

   والمتغيّر ‎--opt‎ يحمل لون القسم، وكل ما بعده يشتقّ منه — فلا قاعدةَ
   لكل لونٍ في كل حالة، بل قاعدةٌ واحدة وأربعة أسطرٍ تُسنِد اللون. */
.scr-bias-pick{display:grid;gap:6px}

.scr-bias-opt{
  --opt:var(--muted);
  position:relative;
  display:flex;align-items:flex-start;gap:10px;
  padding:9px var(--sp-3);border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease;
}
.scr-bias-opt.bias-up   {--opt:var(--up)}
.scr-bias-opt.bias-down {--opt:var(--down)}
.scr-bias-opt.bias-flat {--opt:var(--muted)}
.scr-bias-opt.bias-model{--opt:var(--amber-600)}

/* المُدخَل مخفيٌّ بصرياً لا وظيفياً: يبقى قابلاً للتركيز ولوحة المفاتيح
   تتنقّل بين الخيارات كما تفعل مع أيّ مجموعة أزرار راديو */
.scr-bias-opt input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}

/* الدائرة هي زرّ الراديو المرئيّ، ولونُها لون القسم */
.scr-bias-opt .dot{
  flex:none;margin-top:2px;
  width:16px;height:16px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--opt) 40%,var(--line));
  display:grid;place-items:center;
  transition:border-color .14s ease;
}
.scr-bias-opt .dot::after{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--opt);
  transform:scale(0);transition:transform .16s ease;
}

.scr-bias-opt b{display:block;font-size:13px;font-weight:650;transition:color .14s ease}
.scr-bias-opt em{display:block;font-style:normal;font-size:11px;color:var(--muted-2);margin-top:1px}

.scr-bias-opt:hover{
  border-color:color-mix(in srgb,var(--opt) 45%,var(--line));
  background:color-mix(in srgb,var(--opt) 7%,var(--surface-2));
}
.scr-bias-opt:hover .dot{border-color:color-mix(in srgb,var(--opt) 70%,var(--line))}

.scr-bias-opt:has(input:checked){
  border-color:color-mix(in srgb,var(--opt) 55%,transparent);
  background:color-mix(in srgb,var(--opt) 12%,transparent);
}
.scr-bias-opt:has(input:checked) .dot{border-color:var(--opt)}
.scr-bias-opt:has(input:checked) .dot::after{transform:scale(1)}
.scr-bias-opt:has(input:checked) b{color:var(--opt)}

.scr-bias-opt:has(input:focus-visible){
  outline:2px solid color-mix(in srgb,var(--opt) 50%,transparent);outline-offset:2px;
}

/* ── تلوين الاستراتيجيات باتّجاهها ──────────────────────────────────
   الاتّجاه يُقرأ قبل الاسم، فيوفّر على العين قراءة أحد عشر عنواناً
   للعثور على واحد.

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

   القيم كلّها من رموز النظام، فتنقلب مع الوضع المظلم من تلقائها. */

.scr-item.bias-up   {--bias:var(--up);   --bias-bg:var(--up-bg)}
.scr-item.bias-down {--bias:var(--down); --bias-bg:var(--down-bg)}
.scr-item.bias-flat {--bias:var(--muted-2); --bias-bg:var(--surface-3)}
.scr-item.bias-model{--bias:var(--amber-600); --bias-bg:var(--amber-100)}

.scr-item.is-bias{
  position:relative;overflow:hidden;
  /* الصفحة RTL: «to left» يعني من الحافّة الداخلية إلى الخارج */
  background:linear-gradient(to left,var(--bias-bg),transparent 68%);
  transition:background .16s ease,box-shadow .16s ease;
}
.scr-item.is-bias::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:var(--bias);opacity:.5;transition:opacity .16s ease,width .16s ease;
}
.scr-item.is-bias:hover{
  background:linear-gradient(to left,var(--bias-bg),transparent 48%);
}
.scr-item.is-bias:hover::before{opacity:.85;width:3px}

/* المحدَّدة: الشريط كامل الإضاءة، وهالة خافتة تفصلها عن جاراتها دون
   إطار صارخ. الانتشار السالب يبقي الهالة قريبة فلا تسيل على ما حولها. */
.scr-item.is-bias.is-active{
  background:linear-gradient(to left,var(--bias-bg),transparent 30%);
  border-color:var(--bias);
  color:var(--ink);
  box-shadow:0 0 20px -10px var(--bias), inset 0 1px 0 0 rgba(255,255,255,.03);
}
.scr-item.is-bias.is-active::before{opacity:1;width:3px}
.scr-item.is-bias.is-active .scr-item-name{color:var(--bias)}

/* عنوان المجموعة */
.scr-group{
  display:flex;align-items:center;gap:6px;
  flex:none;                       /* كالعناصر: لا ينكمش فيمنع التمرير */
  padding:var(--sp-3) var(--sp-3) 5px;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--muted-2);text-transform:uppercase;
}
.scr-group .dot{width:5px;height:5px;border-radius:50%;background:var(--bias)}
.scr-group .n{
  margin-inline-start:auto;font-family:var(--mono);font-size:9.5px;
  padding:0 5px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--muted-2);
}
.scr-group.bias-up   {--bias:var(--up)}
.scr-group.bias-down {--bias:var(--down)}
.scr-group.bias-flat {--bias:var(--muted-2)}
.scr-group.bias-model{--bias:var(--amber-600)}
.scr-group:first-child{padding-top:var(--sp-1)}

/* ── سجلّ رصد النماذج ───────────────────────────────────────────── */
.pattern-log{border-color:var(--amber-200)}
.pattern-log .card-head{
  background:linear-gradient(to left,var(--amber-100),transparent 62%);
  border-bottom-color:var(--amber-200);
}
.pattern-log .card-head h3{color:var(--amber-800)}
.pattern-hint{
  margin:0;padding:11px var(--sp-5);
  font-size:12.5px;line-height:1.75;color:var(--muted);
  border-bottom:1px solid var(--line-2);
}
.score-pill{
  display:inline-block;font-family:var(--mono);font-weight:650;font-size:12.5px;
  padding:2px 9px;border-radius:var(--r-pill);direction:ltr;
  background:var(--amber-100);color:var(--amber-800);
}
/* ========================================================================
   الأسواق العالمية — فوركس وأسهم وسلع
   ======================================================================== */

/* تبويبات الأسواق: كلٌّ يحمل عدده وحالته، فيُعرَف السوق النائم قبل فتحه */
/* الفجوة ستّة لا ثمانية، والتمرير يبقى مسموحاً لا مطلوباً: اثنا عشر
   تبويباً تسع في ١٢٤٠ بكسلاً بعد التصغير، وما دونها يمرّر بدل أن يُقصّ. */
.mk-tabs{
  display:flex;gap:5px;overflow-x:auto;padding:var(--sp-1) 0 var(--sp-2);
  scrollbar-width:thin;
}
/* ثلاثة أسطر صارت سطرين، والأيقونة تحمل ما كان يحمله الطول.
   الشريط كان يأخذ ١١٠ بكسلاً ارتفاعاً لأجل ثلاثة عشر تبويباً، وأكثره
   فراغ. والعرض الأدنى نزل من ١٣٢ إلى ١٠٤ فيسع الجميع بلا تمرير على
   الشاشات المتوسّطة. */
/* الإطار متغيّرٌ لا لونٌ مكتوب: أبيضُ على الداكن يقصّ التبويب عن أرضيته،
   وأبيضُ على الفاتح يختفي في الورقة. فالمقصود «حدٌّ حادّ يفصل» لا اللون
   بعينه — والمتغيّر يحمل المقصود ويتبدّل بالوضع. */
/* تتمدّد لتملأ الصفّ كما تملأ البطاقةُ عرضَ الصفحة.
   ────────────────────────────────────────────────────────────────────
   كانت flex:none فتقف عند عرض محتواها، ويبقى ما فضل من الحاوية فراغاً
   على طرفٍ واحد — شريطٌ معلّق بين بطاقتين تملآن العرض، فيبدو ناقصاً لا
   مقصوداً.

   و shrink صفرٌ عمداً: لو سُمح بالانكماش لانضغط التبويب دون محتواه فقُصَّ
   الاسم بثلاث نقاط **ثم ظهر شريط التمرير أيضاً** — عيبان مكان واحد.
   فتنمو ولا تنكمش: تملأ حين يتّسع، وتمرّر حين يضيق، ولا تُقصّ أبداً. */
/* ── التبويب صار بطاقةً ────────────────────────────────────────────
   كان يقول حالةً: «مفتوح · ١٦٦ متحرّكة». والحالةُ ليست خبراً — السعرُ
   يقول أين وصل السوق، والخطُّ يقول من أين جاء. فأُعطي ارتفاعاً يسع
   السطرين، وصار صفُّ الرأس فوق والنبض تحته.

   والخطُّ خلف الرقم لا بجانبه: عرضُ الشريط محدود، ووضعُهما جنباً إلى
   جنب يقصّ أحدهما. والرقم فوق طبقةٍ أعلى فلا يُبتلع. */
.mk-tab{
  position:relative;overflow:hidden;
  flex:1 0 auto;min-width:118px;
  display:flex;flex-direction:column;gap:4px;
  padding:6px 8px 7px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--tab-line);
  color:var(--ink-2);text-decoration:none;
  transition:border-color .14s ease,background .14s ease;
}

/* صفُّ الرأس: الأيقونة والاسم والحالة — كما كان التبويب كلّه */
.mk-tab-head{display:flex;align-items:center;gap:5px;position:relative;z-index:1}

/* ── النبض: الخطّ فوق والرقم تحته ────────────────────────────────
   جرّبتُ الرقمَ فوق الخطّ لتوفير الارتفاع، فابتلع اللوحُ نصفَ المسار
   ولم يبقَ من «الشارت» ما يُرى. والطبقتان تتنازعان مساحةً واحدة مهما
   ضُبطت الشفافية: إمّا يُقرأ الرقم أو يُقرأ الخطّ.

   فصار لكلٍّ سطرُه: ‎٣٤‎ بكسل للمسار وحده — تكفي لقراءة قمّةٍ وقاع —
   وسطرٌ تحته للسعر والتغيّر. والبطاقة تطول، وهو المطلوب. */
/* النبض ملصوقٌ بأسفل البطاقة لا بما فوقه.
   ────────────────────────────────────────────────────────────────
   رأسُ التبويب سطران أو ثلاثة: المغلق يحمل «يفتح غداً ١٠:٠٠» والمباشر
   لا يحمله. فلو تبع النبضُ ما قبله لنزل في بطاقةٍ وارتفع في أخرى،
   وصار صفُّ الأسعار متعرّجاً — وهو صفٌّ يُقرأ أفقياً بالمقارنة، فتعرّجُه
   يُبطل فائدته.

   و‎margin-top:auto‎ يدفعه إلى القاع مهما طال الرأس، والشريطُ يمدّ
   التبويبات إلى ارتفاعٍ واحد أصلاً — فتستوي الأسعار كلُّها على خطّ. */
.mk-pulse{
  display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:3px;
}
.mk-pulse[hidden]{display:none}

.mk-spark{
  display:block;width:100%;height:34px;flex:none;
  overflow:visible;
}
/* خطٌّ رفيع بلا محاور ولا نقاط: السلسلة كلّها سياقٌ لرقمٍ واحد */
.mk-spark .line{
  fill:none;stroke:var(--muted-2);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.mk-spark .area{fill:var(--muted-2);opacity:.1}

.mk-pulse.is-up   .line{stroke:var(--up)}
.mk-pulse.is-up   .area{fill:var(--up)}
.mk-pulse.is-down .line{stroke:var(--down)}
.mk-pulse.is-down .area{fill:var(--down)}

/* الرقم في سطره: لا لوحَ خلفه ولا مزاحمةَ للخطّ */
.mk-quote{
  display:flex;align-items:baseline;gap:5px;
  max-width:100%;min-width:0;
}
/* رمز الممثّل: يقول أيَّ أداةٍ يخصّ الرقم — «٤٬٢٤٧» ذهبٌ أم بلاتين؟
   ويُقصَّر آخرَ الجميع لأنه أقلُّهم إلحاحاً، لكن بعرضٍ يسع رمزاً كاملاً */
.mk-quote b{
  font-size:8.5px;font-weight:700;letter-spacing:.01em;
  color:var(--muted-2);direction:ltr;flex:0 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mk-quote .px{flex:none}
.mk-quote em{flex:none}
/* الرقم الرئيسي بأرقامٍ نِسبيّة لا جدوليّة: قيمةٌ مفردة لا عمود */
.mk-quote .px{
  font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--ink);direction:ltr;white-space:nowrap;

  /* ══ سقالة النبضة ══════════════════════════════════════════════
     حركة ‎.px-up/.px-down‎ معرَّفة في هذا الملفّ منذ الجداول، وتحتاج
     شيئين لم يكونا هنا: موضعاً نسبيّاً، و‎::before‎ يحمل التوهّج. فكان
     الرقم يتلوّن ولا يتوهّج — نصفُ النبضة.

     و‎tabular-nums‎ مقصودة رغم أنها «قيمةٌ مفردة»: الرقم يتبدّل كل ثانية،
     وبأرقامٍ نِسبيّة يتراقص عرضُه فيهتزّ التبويب كلُّه مع كل تيك. */
  position:relative;isolation:isolate;
  font-variant-numeric:tabular-nums;
}
.mk-quote .px::before{
  content:"";position:absolute;z-index:-1;
  inset:-4px -7px;border-radius:6px;
  opacity:0;pointer-events:none;
}
.mk-quote em{
  font-family:var(--mono);font-style:normal;font-size:9.5px;font-weight:700;
  direction:ltr;white-space:nowrap;
}
.mk-pulse.is-up   em{color:var(--up)}
.mk-pulse.is-down em{color:var(--down)}
.mk-tab:hover{border-color:var(--tab-line-hi);text-decoration:none}
.mk-tab:hover .mk-tab-ico{opacity:1}

/* الأيقونة باهتةٌ قليلاً حتى يُنظر إليها: صفٌّ من ثلاثة عشر علماً
   بكامل تشبّعها يسحب العين عن الأرقام — وهي المقصودة. */
.mk-tab-ico{
  display:flex;align-items:center;flex:none;
  opacity:.82;transition:opacity .14s ease;color:var(--muted)
}
.mk-tab-ico .mk-flag{display:block;border-radius:2.4px}

.mk-tab-text{display:flex;flex-direction:column;gap:0;min-width:0}
.mk-tab-name{
  font-size:11px;font-weight:640;color:var(--ink);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mk-tab-meta{
  display:flex;align-items:baseline;gap:3px;
  font-size:9px;color:var(--muted-2);line-height:1.35
}
.mk-tab-meta b{font-family:var(--mono);font-size:10px;color:var(--muted)}

/* الحالة على السطر نفسه بفاصلٍ رفيع بدل سطرٍ ثالث */
.mk-tab-state{
  display:inline-flex;align-items:center;gap:4px;
  font-style:normal;font-size:9px;font-family:var(--mono);
  color:var(--muted-2);letter-spacing:.02em;
  padding-inline-start:4px;margin-inline-start:3px;
  border-inline-start:1px solid var(--line);
  direction:ltr   /* Online / Closed لاتينيّتان — لا تُقلبان مع الصفحة */
}

/* ── نقطة الحالة ─────────────────────────────────────────────────────
   الوميض للحيّ وحده. ولو ومض الجميع لصار الوميض خلفيةً لا إشارة —
   وما يُومض دائماً لا يُرى أبداً.

   والحلقة المتمدّدة (‎.pulse‎) من نظام التصميم نفسه: هي التي تنبض في
   شارة «رصد لحظي»، فتُقرأ هنا بالمعنى ذاته بلا تعلُّمٍ جديد. */
.mk-dot{
  width:5px;height:5px;border-radius:50%;flex:none;
  background:currentColor;color:var(--muted-2);opacity:.55
}

/* أربع حالاتٍ بأربعة ألوان — واللون يسبق الكلمة إلى العين.
   الأخضر يعمل · الكهرماني ينتظر دقائق · الأحمر الباهت عطلة يوم ·
   والرمادي مغلقٌ إلى الغد. */
.mk-tab-state.is-online {color:var(--up);font-weight:600}
.mk-tab-state.is-online .mk-dot{color:var(--up);opacity:1}

.mk-tab-state.is-break{color:var(--amber-600);font-weight:600}
.mk-tab-state.is-break .mk-dot{color:var(--amber-600);opacity:1}

.mk-tab-state.is-holiday{color:var(--down);font-weight:600}
.mk-tab-state.is-holiday .mk-dot{color:var(--down);opacity:.9}

/* الشارة نفسها في رأس نتائج الفرز — بلونها ونقطتها */
.mk-sess{display:inline-flex;align-items:center;gap:5px}
.mk-sess.is-online {color:var(--up);border-color:color-mix(in srgb,var(--up) 35%,transparent)}
.mk-sess.is-break  {color:var(--amber-600);border-color:color-mix(in srgb,var(--amber-600) 35%,transparent)}
.mk-sess.is-holiday{color:var(--down);border-color:color-mix(in srgb,var(--down) 35%,transparent)}
.mk-sess.is-online .mk-dot,
.mk-sess.is-break .mk-dot,
.mk-sess.is-holiday .mk-dot{color:currentColor;opacity:1}

@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .mk-sess.is-online{border-color:var(--up)}
  .mk-sess.is-break{border-color:var(--amber-600)}
  .mk-sess.is-holiday{border-color:var(--down)}
}

/* موعد العودة أو اسم العطلة — سطرٌ ثالث لا يظهر إلّا حين يقول شيئاً */
.mk-tab-when{
  display:block;font-style:normal;
  font-size:8.5px;font-family:var(--mono);color:var(--muted-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px;opacity:.85
}
.mk-tab.is-active .mk-tab-when{opacity:1}

/* السوق الحيّ يُعلَّم بلون الربح، والمحدَّد بإنارة الحافّة نفسها.
   ⚠ و is-live غير is-open: الأولى «فيه أدواتٌ تتحرّك الآن» وتُقاس من
   التيكات، والثانية «جدول جلسته يقول إنه مفتوح». وقد تفترقان — عطلةٌ
   رسمية تجعل الجدول يقول مفتوحاً ولا تيك يصل. فلا تُدهَن الحالةُ
   بلون الربح إلّا إن كانت مفتوحةً فعلاً. */
.mk-tab.is-live .mk-tab-meta b{color:var(--up)}
.mk-tab.is-active{
  background:linear-gradient(to left,var(--sky-100),transparent 55%);
  border-color:var(--sky-600);
  box-shadow:0 0 20px -12px var(--sky-500);
}
.mk-tab.is-active .mk-tab-name{color:var(--sky-800)}
.mk-tab.is-active .mk-tab-ico{opacity:1;color:var(--sky-600)}

/* المرشّحات */
.mk-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
}
.mk-field{display:flex;flex-direction:column;gap:4px;min-width:118px}
.mk-field.grow{flex:1;min-width:180px}
.mk-field > span{font-size:10.5px;color:var(--muted-2);font-weight:600}
.mk-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);cursor:pointer}

/* ── مبدّل النطاق ───────────────────────────────────────────────
   ثلاث حالات يُنتقل بينها بنقرة، ولا زرّ تنفيذٍ بعدها: النقر هو الأمر.

   والشكل مضبوطٌ على .input لا مقارَبٌ له — الحدّ نفسه، ونصف القطر
   نفسه، وقياس الخطّ نفسه، وحلقة التركيز نفسها. فيجاور مُنتقي الفريم
   كأنّهما من عائلة واحدة، لا عنصرَين تصادفا في سطر.

   والمسار الغائر (surface-3) مع الزرّ النشط البارز (surface) يعطي
   عمقاً يقول أيّهما مختارٌ قبل أن يُقرأ نصّه — وهو أسرع ما تلتقطه
   العين حين تمسح شريطاً. */
.mk-seg{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  background:var(--surface-3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}

/* مُنتقي الفريم بجانب المبدّل — بقياسه لا بقياس حقل نموذج.
   الحقل الأصل يتمدّد إلى عرض حاويته (width:100%) لأنه مصمَّم للنماذج.
   وفي رأس بطاقةٍ يُقاس بمحتواه. */
.mk-pick{
  width:auto;
  font-size:12.5px;
  padding:7px 12px 7px 30px;
  background-position:left 10px center;
}

.mk-seg button{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:12.5px;font-weight:550;
  color:var(--muted);
  padding:5px 11px;
  background:transparent;
  border:0;
  border-radius:4px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease;
}
.mk-seg button:hover{color:var(--ink-2)}

.mk-seg button.is-active{
  background:var(--surface);
  color:var(--ink);
  font-weight:650;
  /* حلقةٌ بلون الحدّ لا ظلٌّ رماديّ: الظلّ يختفي على الداكن، والحلقة
     تتبع المتغيّر فتُرى في الثيمتين. */
  box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.06);
}

.mk-seg button:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--green-100);
}

/* النقطة حالةٌ لا زينة: خضراء لِما ينبض، رمادية لِما سكن. */
.mk-seg i{
  position:relative;
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
  flex:none;
}
.mk-seg [data-scope="online"]  i{color:var(--up)}
.mk-seg [data-scope="offline"] i{color:var(--muted-2)}

/* النبض على المختار وحده: ثلاث نقاط تنبض معاً ضجيج، وواحدة تقول
   «هذه هي الحالة الجارية». */
.mk-seg [data-scope="online"].is-active i::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:currentColor;opacity:.45;
  animation:pulse 1.9s ease-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .mk-seg i::after{animation:none}
}

/* الأداة: الرمز والاسم والوسيط في عمود واحد دون أن يتمدّد */
.mk-inst{display:flex;flex-direction:column;gap:2px;min-width:0}

/* ══════════════════════════════════════════════════════════════════
   الأداةُ التي لها مقابلٌ في كفو — تُضغَط، ويُرى أنّها تُضغَط
   ══════════════════════════════════════════════════════════════════
   ⚠ ولا يُلوَّن الرمزُ بلونٍ دالّ: العمودُ بجانبه أخضرُ وأحمرُ للاتّجاه،
      ورابطٌ أزرقُ أو أخضرُ يُقرأ حالةَ سعرٍ لا وجهةَ ضغط. فالإشارةُ
      شكلٌ لا لون: مؤشّرُ الفأرة، وسهمٌ يظهر عند المرور، وحبرٌ يشتدّ.

   ⚠ وما لا مقابلَ له يبقى ‎div‎ لا ‎a‎ — فلا يُلبَس ثوبَ المضغوط. رابطٌ
      يبدو رابطاً ولا يذهب إلى شيءٍ يُجرَّب مرّةً ثمّ يُهجَر البابُ كلُّه. */
a.mk-go{
  text-decoration:none;color:inherit;
  cursor:pointer;border-radius:var(--r-sm);
  transition:color .12s ease;
}
a.mk-go .sym{position:relative;padding-inline-end:13px}

/* السهمُ معلَّقٌ على الرمز لا على الخليّة — والخليّةُ أعرضُ منه بكثير */
a.mk-go .sym::after{
  content:"↗";
  position:absolute;inset-inline-end:0;top:50%;
  transform:translateY(-50%);
  font-size:10px;opacity:0;
  transition:opacity .12s ease;
}
a.mk-go:hover{color:var(--ink)}
a.mk-go:hover .sym::after{opacity:.7}
a.mk-go:focus-visible{outline:2px solid var(--frame-edge);outline-offset:2px}
.mk-inst .sym{font-family:var(--mono);font-weight:650;font-size:13px;direction:ltr}
.mk-name{
  font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px;
}
.mk-tags{display:flex;gap:4px}
.mk-tags i{
  font-style:normal;font-size:9.5px;font-family:var(--mono);
  padding:0 5px;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--muted-2);
}

/* ══════════════════════════════════════════════════════════════════
   عملةُ التسعير بجانب الرقم — كما في بطاقة الطرفيّة
   ══════════════════════════════════════════════════════════════════
   المقاسُ والحبرُ من ‎#btcterm .pxBig i‎ نفسِها: عشرةُ بكسلاتٍ وحبرٌ
   خافت. فتُقرأ حين تُطلب ولا تُزاحم الرقمَ حين لا تُطلب.

   ⚠ ولا خلفيّةَ لها ولا إطار — بخلاف وسوم ‎.mk-tags‎ فوقها.
   ────────────────────────────────────────────────────────────────
   تلك تقف وحدَها في سطرٍ فتحتاج ما يحدُّها، وهذه ملتصقةٌ برقمٍ بارزٍ
   فحدُّها يصنع صندوقاً صغيراً يسرق النظرَ من الرقم نفسِه.

   ⚠ و‎unicode-bidi:isolate‎ ضرورةٌ لا زينة: الصفحةُ من اليمين، والرمزُ
      لاتينيٌّ بجانب رقمٍ لاتينيّ. فبلا عزلٍ يتبادلان موضعَيهما عند بعض
      القيم — وهو ما يقع مع السالب تحديداً. */
.mk-cur{
  font-style:normal;
  font-size:10px;
  font-family:var(--mono);
  color:var(--muted-2);
  letter-spacing:.4px;
  margin-inline-start:5px;
  direction:ltr;
  unicode-bidi:isolate;
}

/* شريط مدى اليوم: أين السعر بين قاع اليوم وقمّته — يُقرأ بلمحة */
.mk-range{
  position:relative;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--down-bg),var(--surface-3),var(--up-bg));
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.mk-range b{
  position:absolute;top:50%;transform:translate(50%,-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--ink-2);box-shadow:0 0 0 2px var(--surface);
}

/* ═══════════════════════════════════════════════════════════════════
   خطّ حركة الإطار
   ═══════════════════════════════════════════════════════════════════
   حلّ محلّ شريط «مدى اليوم». والشريط كان يقول أين يقف السعر بين قاع
   اليوم وقمّته — نقطةٌ واحدة بلا طريق. فلا يُعرف منها أوصل إلى موضعه
   صعوداً أم هبوطاً، ولا أفي اندفاع هو أم في سكون.

   والخطّ يقول الطريق. وثلاث طبقات تجعله يُقرأ في ثلاثين بكسلاً:

     • خطُّ المرساة — أفقيٌّ متقطّع عند سعر افتتاح الدلو. وهو المرجع:
       ما فوقه ربحٌ في هذا الإطار وما تحته خسارة. وبدونه يطفو الخطّ
       بلا معنى — يُرى صاعداً وهو دون نقطة البداية.

     • المساحة — تدرّجٌ يخفت نزولاً. تعطي الخطّ ثِقلاً بصرياً يُميّزه
       عن خطوط الجدول نفسها، فلا يُقرأ حدّاً بين خليّتين.

     • رأس السهم — يومض عند طرف الخطّ باتجاه الحركة. وهو ما تلتقطه
       العين أوّلاً حين يمسح المستخدم عموداً فيه مئتا صفّ. */

.spark{
  display:block;
  overflow:visible;                 /* رأس السهم يتجاوز الحدّ قليلاً */
}

.spark-line{
  fill:none;
  stroke-width:1.5;
  stroke-linejoin:round;
  stroke-linecap:round;

  /* الرسم أدقّ من الشاشة: خطٌّ بعرض ١٫٥ بكسل بين نقطتين متقاربتين
     يُموّه فيبدو رمادياً. والتحسين للحدّة يُبقيه لوناً واحداً. */
  shape-rendering:geometricPrecision;
}

.spark-area{stroke:none}
.spark-base{
  stroke:var(--line);
  stroke-width:1;
  stroke-dasharray:2 3;
  shape-rendering:crispEdges;       /* خطٌّ أفقيّ — التمويه يُثخّنه بلا داعٍ */
}

.spark-up   .spark-line{stroke:var(--up)}
.spark-down .spark-line{stroke:var(--down)}
.spark-up   .spark-area{fill:url(#sparkFillUp)}
.spark-down .spark-area{fill:url(#sparkFillDown)}

/* ألوان التدرّج من القواعد لا من سمات العنصر: السمة تُكتب مرّةً في
   HTML فتُجمّد على ثيمةٍ واحدة، والقاعدة تتبع المتغيّر فتنقلب مع
   الثيمة بلا لمس شجرة. */
#sparkFillUp   .s0{stop-color:var(--up);   stop-opacity:.32}
#sparkFillUp   .s1{stop-color:var(--up);   stop-opacity:0}
#sparkFillDown .s0{stop-color:var(--down); stop-opacity:.32}
#sparkFillDown .s1{stop-color:var(--down); stop-opacity:0}
.spark-up   .spark-head{fill:var(--up)}
.spark-down .spark-head{fill:var(--down)}

/* الوميض على رأس السهم وحده: العين تُمسك بالطرف — هناك آخر ما وقع.
   والنبض هادئ ودائم، فهو يقول «حيّ» لا «انتبه»؛ والإلحاح على مئتَي
   صفّ معاً يُلغي نفسه. */
@keyframes spark-beat{
  0%,100%{opacity:1;   transform:scale(1)}
  50%    {opacity:.42; transform:scale(.82)}
}
.spark-head{
  animation:spark-beat 1.6s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;           /* بدونها يدور حول أصل الـSVG لا حول نفسه */
}

/* «يجمع…» — الخطّ يحتاج نقطتين، والثانية تصل بعد نبضة */
.spark-wait{
  display:inline-block;
  font-size:10.5px;color:var(--muted-2);
  padding:6px 0;
}

@media (prefers-reduced-motion:reduce){
  .spark-head{animation:none}
}

/* علامة التقريب: المرساة وُضعت في منتصف الدلو */
.mk-approx{
  font-style:normal;font-size:10px;color:var(--muted-2);
  margin-inline-start:3px;cursor:help;
}

/* ── مرشد الترتيب ───────────────────────────────────────────────
   كان حرفاً نصّياً (▾ و ▴). والحرف يعتمد على وجوده في الخطّ المستعمل،
   و Consolas لا يحمله — فيستبدله المتصفّح بمِحرفٍ من خطٍّ احتياطي، أو
   يرسم شرطةً. ولهذا كان يُرى خطّاً صغيراً لا سهماً.

   فيُرسم هنا هندسةً بحدود شفّافة: مثلّثٌ لا حرف، فلا يعتمد على خطّ
   ولا يتغيّر حجمُه بتغيّر font-size.

   والسهمان يظهران معاً خافتَين على كل عمودٍ قابل للترتيب — وهذا نصف
   الفائدة: أن يُعرف العمود قابلاً للترتيب **قبل** النقر لا بعده. ثم
   يشتدّ أحدهما عند النقر فيقول أيّ الاتجاهين جارٍ. */

.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--ink)}

/* السهمان يُعلَّقان على **النصّ** لا على الخلية.
   والخلية قد تكون أضعاف عرض عنوانها، فتعليقُهما على حافّتها يتركهما
   معلّقَين في فراغ بعيداً عمّا يصفانه. والغلاف يجعلهما يلاصقان الاسم
   مهما اتّسع العمود. */
.tbl th.sortable > span{
  position:relative;
  display:inline-block;
  padding-inline-end:13px;
}

.tbl th.sortable > span::before,
.tbl th.sortable > span::after{
  content:"";
  position:absolute;
  inset-inline-end:0;
  width:0;height:0;
  /* الجانبان شفّافان بالتساوي ⇒ مثلّث متساوي الساقين. ولا يُستعمل
     المنطقي (inline-start/end) هنا: الشكل هندسة لا اتجاه قراءة. */
  border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;
  transition:opacity .14s ease;
}

/* الشكل واللون والنتيجة — ثلاثتها تقول شيئاً واحداً.
   ────────────────────────────────────────────────────────────────
   السهم الصاعد أخضر ويجلب أشدّ الارتفاع، والهابط أحمر ويجلب أشدّ
   الانخفاض. فلا يحتاج المستخدم أن يتعلّم اصطلاحاً: رأسُ السهم ولونُه
   وما يظهر في الصدارة — كلّها تشير إلى الجهة نفسها.

   والمقابلة مع اصطلاح الترتيب مقلوبة عمداً: السهم **الصاعد** يُنتج
   فرزاً **تنازلياً** (من الأكبر إلى الأصغر)، لأن ما يعني المستخدم هو
   ما يراه في الصدارة لا اتجاه المسح في الذاكرة. ومن رأى `desc` مقترناً
   بسهمٍ صاعد فليقرأ هذا السطر قبل أن يعكسه. */

/* الصاعد: رأسه لفوق، أخضر ⇒ الصدارة لأشدّ ارتفاع (تنازلي) */
.tbl th.sortable > span::before{
  top:50%;margin-top:-6.5px;
  border-bottom:4.5px solid var(--up);
}

/* الهابط: رأسه لتحت، أحمر ⇒ الصدارة لأشدّ انخفاض (تصاعدي) */
.tbl th.sortable > span::after{
  top:50%;margin-top:2px;
  border-top:4.5px solid var(--down);
}

.tbl th.sortable > span::before,
.tbl th.sortable > span::after{opacity:.38}

.tbl th.sortable:hover > span::before,
.tbl th.sortable:hover > span::after{opacity:.62}

/* النشط يشتدّ، وأخوه يخفت — فلا يبقى في اللبس موضع.
   ⚠ desc يُضيء الصاعد و asc يُضيء الهابط — وهذا مقصود، انظر أعلاه. */
.tbl th.sortable[data-dir="desc"] > span::before{opacity:1}
.tbl th.sortable[data-dir="desc"] > span::after {opacity:.14}
.tbl th.sortable[data-dir="asc"]  > span::after {opacity:1}
.tbl th.sortable[data-dir="asc"]  > span::before{opacity:.14}

@media (max-width:640px){
  .mk-filters{padding:var(--sp-3)}
  .mk-field{min-width:104px}
}

/* ── شعلة التكرار ───────────────────────────────────────────────
   كم مرّةً تحقّق الشرط على هذه الأداة. الرقم هو الحقيقة، واللون قراءةٌ
   سريعة قبلها: باردٌ فدافئٌ فمشتعل.

   والشدّة نسبيّةٌ إلى أعلى رقمٍ في النتيجة نفسها لا إلى عتبةٍ ثابتة —
   شاشةٌ تمسح كل ثانيتين تُراكم مئاتِ التأكيدات وأخرى كل ربع ساعة
   تُراكم عشرات، وعتبةٌ واحدة تصلح لإحداهما وتكذب على الأخرى. */
.fire{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:700;direction:ltr;
  padding:2px 7px;border-radius:var(--r-pill);
  color:var(--muted);
  background:var(--surface-3);
  border:1px solid var(--line-2);
}
.fire svg{opacity:.5;flex:none}
.fire.is-warm{
  color:var(--amber-800);
  background:var(--amber-100);
  border-color:var(--amber-200);
}
.fire.is-warm svg{opacity:.85}
.fire.is-hot{
  color:var(--down);
  background:var(--down-bg);
  border-color:color-mix(in srgb,var(--down) 30%,transparent);
}
.fire.is-hot svg{opacity:1}

/* نوبةٌ بدأت في هذه المسحة: حلقةٌ حولها تقول «هذا هو الجديد».
   وهي تعلو الترتيب أصلاً، فالحلقة تأكيدٌ بصريّ لا وسيلةُ إيجاد. */
.fire.is-fresh{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--up) 40%,transparent);
}

.mini-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-family:var(--mono);
  padding:2px 6px;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--muted);
  border:1px solid var(--line-2);
}

/* وقت الرصد بخطّ أحادي وأرقام جدولية: العمود يُقرأ رأسياً للمقارنة،
   فاختلاف عرض الأرقام يكسر استقامته. */
.stamp{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;font-weight:600;color:var(--ink-2);direction:ltr;
}

/* ── شارة الجديد ────────────────────────────────────────────────
   الرصدة الطازجة هي المطلوبة، والقائمة تطول. فتُعلَّم بما يُقرأ قبل
   الاسم: لون النموذج نفسه، ونبضة خافتة تلفت دون أن تُلحّ. */
.new-badge{
  display:inline-block;margin-inline-start:6px;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;
  padding:1px 6px;border-radius:var(--r-pill);
  background:var(--amber-600);color:#fff;
  vertical-align:middle;
  animation:new-pulse 2.4s ease-in-out infinite;
}
@keyframes new-pulse{
  0%,100%{opacity:1}
  50%    {opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .new-badge{animation:none}
}

.stamp.sm{font-size:11.5px;font-weight:550}

/* الصفّ الطازج: إنارة حافّة خفيفة — نفس أسلوب بقيّة اللوحة.
   تسري على جدول النتائج كما على سجلّ النماذج: الجدّة صفةُ صفٍّ لا
   صفةُ لوحة. */
.tbl tbody tr.is-fresh{
  background:linear-gradient(to left,var(--amber-100),transparent 45%);
}
.frame-chip{
  font-family:var(--mono);font-size:10px;
  padding:1px 6px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--ink-2);
}

.scr-settings{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line-2);
}
.scr-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.scr-field > span{font-size:11.5px;color:var(--muted);font-weight:600}

/* ‎display:flex‎ يغلب ‎[hidden]{display:none}‎ في ورقة المتصفّح — انظر
   التعليق أعلى ‎.dim-veil[hidden]‎. و«أولويّة الفحص» تُخفى بالسمة. */
.scr-field[hidden]{display:none}

/* زرُّ المزامنة تحت الفريم الرئيسي — صغيرٌ لأنه فعلٌ نادر، وظاهرٌ
   لأنه الفعل الذي يُبحث عنه حين تُبدَّل الفريمات ولا تتحرّك الشروط. */
.scr-sync{
  display:inline-flex;align-items:center;gap:4px;
  align-self:flex-start;
  padding:3px 8px;border-radius:6px;cursor:pointer;
  font-size:10.5px;font-family:inherit;
  color:var(--warn,#d9a441);background:transparent;
  border:1px dashed color-mix(in srgb,var(--warn,#d9a441) 45%,var(--line));
  transition:background .12s ease,color .12s ease;
}
.scr-sync:hover{background:color-mix(in srgb,var(--warn,#d9a441) 12%,transparent)}
.scr-sync:disabled{opacity:.6;cursor:default}

/* المثبَّتُ يُعلَّم في قائمته: حدٌّ متقطّع يقول «هذا لا يتبع الرئيسي».
   ولولا العلامة لاستوى «دقيقة» و«افتراضي (دقيقة)» في العين، وافترقا
   عند أوّل تبديلٍ للرئيسي — بعد فوات وقت الفهم. */
.scr-frame.is-pinned{
  border-style:dashed;
  border-color:color-mix(in srgb,var(--warn,#d9a441) 45%,var(--line));
}

/* ── بلوك الشرط ─────────────────────────────────────────────────
   البلوك وحدة قائمة بذاتها: حقل وعامل وقيمة وإطار ومعاملات. وحدّه
   الملوّن على الحافة يميّز شرط السوق (فوري) من شرط المؤشر (يحتاج
   شموعاً) — والفرق ليس تجميلياً: الثاني أبطأ ومحدود العدد. */
.scr-blocks{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5)}

/* ═══ شروط استراتيجية البوت — عرضٌ للقراءة ═══
   تُشبه \u200E.scr-block\u200E عمداً: الشرط نفسه في الصفحتين، فاختلافُ شكله يوهم
   أنّه شيءٌ آخر. والفارق أنّ هذه بلا مدخلات — التحرير في الفرز وحده. */
.bot-cond{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);margin-bottom:var(--sp-4);overflow:hidden;
}
.bot-cond[hidden]{display:none}
.bot-cond-head{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:7px var(--sp-3);border-bottom:1px solid var(--line-2);
  font-size:12px;font-weight:700;
}
.bot-cond-head .badge{margin-inline-start:auto}
.bot-cond-row{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:7px var(--sp-3);font-size:12px;
  border-inline-start:3px solid var(--green-500);
}
.bot-cond-row + .bot-cond-row{border-top:1px solid var(--line-2)}
.bot-cond-row.is-off{opacity:.45}
.bot-cond-row.is-deep{border-inline-start-color:var(--info)}
.bot-cond-kind{
  font-size:10.5px;font-weight:700;flex:none;
  padding:1px 8px;border-radius:var(--r-pill);
  background:var(--green-100);color:var(--green-800);
}
.bot-cond-row.is-deep .bot-cond-kind{background:var(--info-bg);color:var(--info)}
.bot-cond-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bot-cond-frame{margin-inline-start:auto;flex:none;font-size:11px;color:var(--muted-2)}
.bot-cond-empty{padding:var(--sp-4);font-size:12px;color:var(--muted)}
.bot-cond-foot{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:8px var(--sp-3);border-top:1px solid var(--line-2);
}
.bot-cond-foot[hidden]{display:none}
.bot-cond-foot .tiny{margin-inline-start:auto}

/* ═══ محرّر الشروط داخل نافذة ═══
   ────────────────────────────────────────────────────────────────────
   الحاوي لا الشاشة هو ما يضيق هنا.

   شبكةُ الفرز خمسةُ أعمدة ثابتة، ولها في الجوال استعلامُ وسائط يردّها
   إلى عمودين. وذلك ينفع في صفحةٍ عرضُها عرضُ الشاشة، ولا ينفع في نافذة:
   الشاشة ١٩٢٠ والنافذة ٥٢٠، فالاستعلام لا يُستدعى أصلاً وتبقى الخمسة
   في أربعمئة بكسل — تسعون لكل خانة، فتصير «أكبر من أو يساوي» «أكب…».

   و auto-fit يقيس **الحاوي**: يعطي ما وسعه من أعمدةٍ لا تنقص عن الحدّ،
   وينزل إلى عمودٍ واحد في أضيق هاتف — بلا استعلامٍ واحد، وبلا أن يعرف
   كم عرض الشاشة. */
.cond-editor > .scr-block{margin:var(--sp-3)}

/* ⚠ مرونةٌ لا شبكة — والسبب فخٌّ مقيس.
   ────────────────────────────────────────────────────────────────────
   المحاولة الأولى كانت \u200Erepeat(auto-fit,minmax(132px,1fr))\u200E مع إعطاء
   الحقل \u200Egrid-column:1/-1\u200E. وقياسُها في هاتفٍ عرضُه ٣٩٠ أعطى للحقل ٣٩٠ —
   أي عرض الشاشة كلَّها، والنافذة تفيض والنصّ يُقصّ.

   السبب أن \u200E-1\u200E في شبكةٍ ذات \u200Eauto-fit\u200E لا يشير إلى عمودٍ معلوم: عددُ
   الأعمدة يُشتقّ من المحتوى، والعنصرُ الممتدّ يُقاس بعرضه الجوهري —
   وعرضُ \u200E<select>\u200E الجوهريّ هو أطولُ خيارٍ فيه. فالحقل يفرض «القوة
   النسبية (RSI) · RSI» على الصفّ كلِّه.

   والمرونة لا تعرف \u200E-1\u200E: الحقل يأخذ \u200Eflex-basis:100%\u200E فينزل وحده، والباقي
   \u200Eflex:1 1 132px\u200E فيلتفّ بحسب ما وسع الحاويَ — بلا استعلام وسائطٍ واحد،
   لأن العبرة بعرض النافذة لا بعرض الشاشة. */
.cond-editor .scr-block-body{
  display:flex;flex-wrap:wrap;align-items:center;
}
.cond-editor .scr-block-body > *{flex:1 1 132px;min-width:0}
.cond-editor .scr-block-body > select:first-child{flex:1 1 100%}
.cond-editor .scr-block-body > [hidden]{display:none}

/* والفريم هنا كأخيه في الفرز: ‎132px‎ أساسٌ يقصّ «افتراضي · ٣٠ دقيقة»،
   فأساسُه ‎158px‎ — انظر قياسَه فوق ‎.scr-block-body‎ */
.cond-editor .scr-block-body > .scr-frame{flex:1.3 1 158px}

/* النصّ الكامل أو نقاطٌ صريحة — لا قصٌّ صامت عند الحافة */
.cond-editor .scr-block-body .input{text-overflow:ellipsis;padding-inline:10px}

/* ═══ منتقي الاستراتيجية — قائمةٌ مبنيّة لا <select> أصليّ ═══
   ────────────────────────────────────────────────────────────────────
   السبب أن المتصفّح يرسم القائمة الأصلية بنفسه ولا يقبل فيها إلّا القليل
   من الأنماط: لونٌ وخلفيةٌ صلبة أحياناً — والتدرّج لا يصل إلى <option>
   في أي متصفّح. فبُنيت من عناصر عادية ليكون لكل اتّجاه تدرّجُه. */
.spick{position:relative}

.spick-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  text-align:start;cursor:pointer;
}
.spick-btn .spick-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spick-btn svg{flex:none;transform:rotate(-90deg);opacity:.6}
.spick-btn[aria-expanded="true"] svg{transform:rotate(90deg)}

/* نقطة الاتّجاه على الزرّ: تُقرأ الحالة بلا فتح القائمة */
.spick-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line-2)}
.spick-btn.bias-up    .spick-dot{background:var(--green-500)}
.spick-btn.bias-down  .spick-dot{background:var(--down)}
.spick-btn.bias-model .spick-dot{background:var(--warn)}
.spick-btn.bias-flat  .spick-dot{background:var(--muted-2)}

.spick-panel{
  position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:60;
  max-height:340px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-3);
  padding:4px;
}
.spick-panel[hidden]{display:none}

/* عناوين المجموعات — أكبر وأثقل كما طُلبت */
.spick-group{
  display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:800;letter-spacing:-.2px;
  padding:9px 10px 7px;margin-top:4px;
}
.spick-group:first-child{margin-top:0}
.spick-gdot{width:9px;height:9px;border-radius:50%;flex:none}
.spick-gn{
  margin-inline-start:auto;font-size:11px;font-weight:700;
  padding:1px 8px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--muted);
}

.spick-group.bias-up    {color:var(--green-700)}
.spick-group.bias-up    .spick-gdot{background:var(--green-500)}
.spick-group.bias-down  {color:var(--down)}
.spick-group.bias-down  .spick-gdot{background:var(--down)}
.spick-group.bias-model {color:var(--warn)}
.spick-group.bias-model .spick-gdot{background:var(--warn)}
.spick-group.bias-flat  {color:var(--muted)}
.spick-group.bias-flat  .spick-gdot{background:var(--muted-2)}

/* العنصر — والتدرّج يبدأ من حافّة الاتّجاه ويخفت */
.spick-item{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;margin:2px 0;border-radius:var(--r-sm);
  cursor:pointer;font-size:12.5px;
  border-inline-start:3px solid transparent;
  transition:filter .12s ease;
}
.spick-item b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spick-meta{font-size:11px;color:var(--muted-2)}
.spick-item:hover{filter:brightness(1.06)}
.spick-item.is-on{outline:1.5px solid var(--green-500);outline-offset:-1.5px}

.spick-item.bias-up{
  background:linear-gradient(to left, var(--green-100), transparent 78%);
  border-inline-start-color:var(--green-500);
}
.spick-item.bias-down{
  background:linear-gradient(to left, var(--down-bg), transparent 78%);
  border-inline-start-color:var(--down);
}
.spick-item.bias-model{
  background:linear-gradient(to left, var(--warn-bg), transparent 78%);
  border-inline-start-color:var(--warn);
}
.spick-item.bias-flat{
  background:linear-gradient(to left, var(--surface-2), transparent 78%);
  border-inline-start-color:var(--muted-2);
}
.spick-none{
  color:var(--muted);border-inline-start-color:var(--line-2);
  background:var(--surface-2);
}

/* حقلٌ قيمتُه تتبع غيرَه — يُقرأ ولا يُحرَّر.
   ولا يُستعمل \u200Edisabled\u200E: المعطّل لا يُرسل مع النموذج، والقيمة هنا يجب
   أن تصل الخادم. فالمنع في المعالج والمظهر يقوله. */
.input.is-locked{
  background:var(--surface-2);
  border-style:dashed;
  cursor:not-allowed;
  opacity:.9;
}

/* لوحة تعديل البوت داخل بطاقته
   ────────────────────────────────────────────────────────────────────
   flex لا grid — وهذا فرقٌ وظيفيّ لا ذوقيّ: عنصرُ الشبكة اللاصق يُحصَر
   في خليّته وحدها فلا يجد مسافةً يلتصق فيها، وعنصرُ الفليكس يُحصَر في
   حاوية الفليكس كلّها. وشريط التطبيق أسفلَه يعتمد على ذلك. */
.bot-edit{
  border-top:1px solid var(--line);
  background:var(--surface-2);
  padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.bot-edit[hidden]{display:none}
.bot-edit-head{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;
}
.bot-edit .field label{font-size:11.5px}
.bot-edit .input{padding:6px 10px;font-size:12.5px}

/* كتلة الاستراتيجية وشروطها وإطارها — قرارٌ واحد في إطارٍ واحد.
   وكانت أجزاؤه الثلاثة متفرّقةً في ثلاثة مواضع، فيقع التعارض بينها
   ولا يُرى: استراتيجيةٌ إطارُها ساعة على بوتٍ إطارُه خمس ثوانٍ. */
.bot-strat{
  display:flex;flex-direction:column;gap:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);padding:var(--sp-3);
}
.bot-strat-head{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--muted);
}
/* القائمة تأخذ ما بقي، والزرّ بقدر نصّه — فلا ينكمش عند ضيق البطاقة */
.bot-strat-row{display:flex;align-items:center;gap:6px}
.bot-strat-row > .input{flex:1 1 auto;min-width:0}
.bot-strat-edit{flex:0 0 auto;white-space:nowrap}

/* زرٌّ معلَّق: عددُه يصف ما سيصير لا ما هو — والحدُّ المتقطّع يقول ذلك
   قبل أن يُقرأ التلميح. */
.bot-strat-edit.is-pending{
  border-style:dashed;
  border-color:color-mix(in srgb,var(--warn,#d9a441) 60%,var(--line));
  opacity:.85;
}
.bot-strat-edit.is-pending .badge{
  color:var(--warn,#d9a441);
  border-color:color-mix(in srgb,var(--warn,#d9a441) 50%,transparent);
}

/* طرفا القاعدة جنباً إلى جنب: «بعد ١٠٪» ← «التعادل».
   وقراءتُهما في سطرٍ واحد هي ما يجعل القاعدة جملةً مفهومة لا رقمين. */
/* سطر الخطّة — ما سيحدث عند التطبيق، لا ما هو حاصل الآن.
   ولونُه لونُ التنبيه لا الخطأ: هو إخبارٌ بأثرٍ مقصود، لا اعتراضٌ عليه. */
.strat-plan{
  margin-top:6px;padding:6px 9px;border-radius:6px;
  font-size:11px;line-height:1.7;
  border-inline-start:2px solid var(--warn,#d9a441);
  background:color-mix(in srgb,var(--warn,#d9a441) 10%,transparent);
  color:var(--ink);
}
.strat-plan[hidden]{display:none}

.guard-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.guard-pair > .input{min-width:0}

/* الحماية الإضافية — مفصولةٌ بخطٍّ لا بصندوقٍ ثانٍ داخل صندوق */
.bot-guard-more{
  margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px dashed var(--line);
}
.bot-guard-more .bot-guard-head{margin-bottom:var(--sp-3)}

/* شريط التطبيق — في آخر البطاقة، خارج لوحة التعديل.
   ────────────────────────────────────────────────────────────────────
   كان داخل اللوحة فلا يُرى إلّا بعد فتحها والنزول إلى آخرها. وموضعُه
   الآن آخرُ عنصرٍ في البطاقة: يراه من ينظر إليها، مفتوحةً كانت اللوحة
   أم مطويّة. و‎sticky‎ تُبقيه في الشاشة ما دامت بطاقتُه فيها.

   والزاوية السفلى تُستردّ منه لا من ‎.card-foot‎: هو آخرُ ما في البطاقة
   الآن، فحدُّها المستدير حدُّه. */
.bot-apply-bar{
  position:sticky;bottom:0;z-index:6;
  padding:var(--sp-3) var(--sp-5);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
  border-radius:0 0 var(--r) var(--r);
  background:color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.card:has(.bot-apply-bar) .card-foot{border-radius:0}
.bot-apply-note{text-align:center;margin-top:6px}

/* زرّ التطبيق — أخضر وعريض في الأسفل كما طُلب */
.bot-apply{
  width:100%;justify-content:center;
  font-weight:700;
}

/* حين يوجد تعديلٌ لم يُطبَّق بعدُ: الشريط يقول ذلك ولا ينتظر أن يُسأل.
   ونبضةٌ واحدةٌ عند أوّل تغيير — لا نبضٌ دائم يزاحم النظر. */
.bot-apply-bar.is-dirty{
  border-top-color:color-mix(in srgb, var(--up) 55%, var(--line));
  box-shadow:0 -10px 26px -18px color-mix(in srgb, var(--up) 70%, transparent);
}
.bot-apply-bar.is-dirty .bot-apply{animation:applyNudge .5s ease}
.bot-apply-bar.is-dirty .bot-apply-note{color:var(--up)}
@keyframes applyNudge{
  0%{transform:translateY(0)}
  40%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .bot-apply-bar.is-dirty .bot-apply{animation:none}
}

/* كتلة حماية الصفقة في نافذة البوت */
.bot-guard{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);padding:var(--sp-3);margin-top:var(--sp-4);
}
.bot-guard-head{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;margin-bottom:var(--sp-3);
}
.bot-guard-head .tiny{margin-inline-start:auto;font-weight:400}
.bot-guard .impact{margin-top:var(--sp-2)}

/* رابط استراتيجية البوت في البطاقة */
.bot-screen-link{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;margin-bottom:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:12px;color:inherit;text-decoration:none;
  transition:border-color .15s ease;
}
.bot-screen-link:hover{border-color:var(--green-500)}
.bot-screen-link b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bot-screen-link .tiny{margin-inline-start:auto;flex:none}

.scr-block{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);
  border-inline-start:3px solid var(--green-500);
  transition:opacity .15s ease,border-color .15s ease;
}
.scr-block.is-deep{border-inline-start-color:var(--info)}
.scr-block.is-off{opacity:.45}
.scr-block.is-saving{border-color:var(--green-500)}

.scr-block-head{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:6px var(--sp-3);border-bottom:1px solid var(--line-2);
}
.scr-kind{
  font-size:10.5px;font-weight:700;letter-spacing:0;
  padding:1px 8px;border-radius:var(--r-pill);
  background:var(--green-100);color:var(--green-800);
}
.scr-block.is-deep .scr-kind{background:var(--info-bg);color:var(--info)}
.scr-block-head .btn{margin-inline-start:auto}

/* عمودُ الفريم أعرضُ من إخوته — نصُّه أطولُها.
   ────────────────────────────────────────────────────────────────────
   «افتراضي · ٣٠ دقيقة» أطولُ من «أكبر من» ومن رقمٍ في خانة، فحصّةٌ
   متساوية تقصّه إلى «افتراضي · ٣ …». والعمود الأخير كان ‎1fr‎ كالقيمة،
   فصار ‎1.6fr‎ — ويُقتطع الفرقُ من عمود الحقل الذي يحتمل الاقتطاع
   لأنّ فيه ‎text-overflow:ellipsis‎ ونصَّه معروفٌ من اختيار صاحبه.

   والحصّةُ النسبية وحدها لا تكفي: ‎1.6fr‎ من حاوٍ ضيّق تعطي ١٤٠ بكسلاً،
   والنصّ يحتاج ١٤٦. فللعمود أرضيّةٌ صريحة ‎158px‎ — قياسٌ لا تقدير:
   أطولُ نصٍّ ‎102px‎ + ٣٢ للسهم + ١٢ للحافة + هامشُ أمانٍ ١٢.
   وإخوتُه ‎minmax(0,…)‎ فينكمشون قبله، لأنّ نصوصَهم تحتمل الاقتطاع.

   ⚠ والعرضُ وحده لم يكن العلّة — بل موضعُ الخانة.
   ────────────────────────────────────────────────────────────────────
   في البلوك ستّة أبناء لا خمسة: حقلٌ وعاملٌ وقيمةٌ وطرفُ مدىً وحالةٌ
   وفريم. والظاهرُ منها أربعةٌ عادةً — الحالةُ تختفي مع العامل الرقميّ،
   وطرفُ المدى لا يظهر إلّا مع «بين». والمخفيُّ ‎display:none‎ يخرج من
   الشبكة كلَّها، فينزلق الفريمُ إلى العمود **الرابع**.

   والقياس على الصفحة الحقيقية: المساراتُ
   ‎248 · 158 · 110 · 110 · 234‎ — والفريمُ في الرابع (١١٠) والخامسُ
   (٢٣٤) فارغٌ وراءه. فلا عرضٌ أُعطي للعمود يبلغ الخانةَ ما دامت في
   عمودٍ آخر.

   فيُثبَّت الفريمُ في المسار الأخير ‎grid-column:-2‎ مهما اختفى قبله،
   ويصير مسارُ طرف المدى ‎fit-content(130px)‎ — ينكمش إلى صفرٍ حين يغيب
   فلا يترك فجوةً وراءه، ويأخذ ١٣٠ حين يظهر.

   والسقفُ ضروريّ: ‎auto‎ وحدها تعطيه عرضَ ‎<input>‎ الجوهريّ (١٨٣) وهو
   مسارٌ غيرُ مرن، فتنكمش إخوتُه ‎fr‎ قبله — وقيسَ ذلك في لوحٍ عرضُه ٤٩٧:
   ‎46 · 29 · 25 · 183 · 158‎. فالسقفُ يردّ الحصص إلى نصابها. */
.scr-block-body{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(0,1.15fr) minmax(0,1fr) fit-content(130px) minmax(158px,1.7fr);
  gap:var(--sp-2);padding:var(--sp-3);
}
.scr-block-body > .scr-frame{grid-column:-2}
.scr-block-body .input{min-width:0}
.scr-num,.scr-text{font-family:var(--mono);direction:ltr;text-align:start}
.scr-block-body [hidden]{display:none}

/* الضبط اليدوي: يظهر داخل البلوك لا في نافذة منفصلة، لأن تعديل الفترة
   جزء من تعريف الشرط لا إعداد جانبي */
.scr-params{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-3) var(--sp-3);
  border-top:1px dashed var(--line);
}
.scr-params-label{
  font-size:11px;color:var(--muted-2);display:flex;align-items:center;gap:5px;
  flex:1 1 100%;
}
/* كلُّ معاملٍ بطاقةٌ صغيرة: اسمٌ، وخانةٌ بوحدتها، وسطرٌ يقول أثر تغييره.
   وكان صفّاً واحداً بلا شرح — فيُقرأ «المضاعف: 3» ولا يُعرف مضاعفُ ماذا. */
.scr-param{
  display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;color:var(--muted);
  flex:1 1 190px;min-width:170px;max-width:280px;
}
.scr-param-name{font-size:11.5px;color:var(--ink);font-weight:600}
.scr-param .input{width:100%;padding:4px 8px;font-size:12px;font-family:var(--mono);direction:ltr}
.scr-param-note{font-size:10.5px;line-height:1.55;color:var(--muted-2)}

/* ── الوحدة ملصقةً بالخانة ─────────────────────────────────────────
   «1.5» و«1.5٪» شرطان مختلفان، وسطرُ الشرح تحت الخانة يُقرأ بعد أن
   يُكتب الرقم — أي بعد فوات وقته. فتُطبع العلامة على الحافّة نفسها. */
/* ⚠ الجهةُ هنا فيزيائية لا منطقية — وهذا هو بيت القصيد.
   ────────────────────────────────────────────────────────────────────
   الصفحة RTL والخانة ‎direction:ltr‎ (لأن محتواها أرقام). فالمنطقيُّ
   ‎inset-inline-end‎ يُحسب على الغلاف فيقع يساراً، والرقمُ يبدأ يساراً
   أيضاً — فيلتصق أحدهما بالآخر: «٪1».

   والحلُّ أن تُثبَّت العلامة يميناً بالمعنى الفيزيائي: هناك الفراغُ
   الذي يتركه الرقمُ المحاذي لليسار، مهما كان اتّجاه الصفحة. */
.scr-unit{position:relative;display:block;min-width:0}
.scr-unit > .input{width:100%}
.scr-unit.has-unit > .input{padding-right:40px;padding-left:10px}

/* والسهمان في ‎type=number‎ يسكنان يمين الخانة أيضاً — فيزاحمان
   العلامة. ولا حاجة إليهما: القيمةُ تُكتب أو تُملأ بنقرة من الرقائق. */
.scr-unit.has-unit > input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.scr-unit.has-unit > input[type="number"]::-webkit-outer-spin-button,
.scr-unit.has-unit > input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

.scr-unit-tag{
  position:absolute;right:1px;top:1px;bottom:1px;
  display:flex;align-items:center;
  padding:0 9px;
  font-size:11px;font-weight:700;color:var(--muted-2);
  pointer-events:none;font-family:var(--mono);
  /* خطٌّ فاصل: به تُقرأ العلامةُ وحدةً للخانة لا رقماً فيها */
  border-left:1px solid var(--line-2);
  border-radius:0 calc(var(--r-sm, 6px) - 1px) calc(var(--r-sm, 6px) - 1px) 0;
  background:color-mix(in srgb,var(--surface-2) 70%,transparent);
}
.scr-unit.has-unit:focus-within .scr-unit-tag{
  color:var(--accent,var(--up));
  border-left-color:color-mix(in srgb,var(--accent,var(--up)) 40%,var(--line-2));
}

/* الخانة الصغيرة في صفّ المعاملات تحتاج فسحةً أقلّ */
.scr-param .scr-unit.has-unit > .input{padding-right:34px}
.scr-param .scr-unit-tag{padding:0 7px;font-size:10.5px}

/* مفتاح التعطيل */
.scr-toggle{position:relative;display:inline-flex;cursor:pointer}
.scr-toggle input{position:absolute;opacity:0;width:0;height:0}
.scr-toggle i{
  width:30px;height:17px;border-radius:var(--r-pill);
  background:var(--line);position:relative;transition:background .15s ease;
}
.scr-toggle i::before{
  content:"";position:absolute;top:2px;inset-inline-start:2px;
  width:13px;height:13px;border-radius:50%;background:var(--surface);
  transition:inset-inline-start .15s ease;
}
.scr-toggle input:checked + i{background:var(--green-500)}
.scr-toggle input:checked + i::before{inset-inline-start:15px}

/* رقائق القيَم المطابِقة داخل صفّ النتيجة */
.match-row{display:flex;flex-wrap:wrap;gap:5px}
.match-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;padding:2px 7px;border-radius:var(--r-sm);
  background:var(--surface-3);color:var(--muted);
  border:1px solid var(--line-2);
}
.match-chip.ok{background:var(--up-bg);color:var(--up);border-color:transparent}
.match-chip.down{background:var(--down-bg);color:var(--down);border-color:transparent}
.match-chip b{font-weight:700;font-family:var(--mono);direction:ltr}
.match-chip i{font-style:normal;opacity:.6;font-family:var(--mono);font-size:9.5px}

.btn.is-busy{opacity:.6;pointer-events:none}

/* ========================================================================
   المفضّلة — البحث وقائمته
   ======================================================================== */
/* ══════════════════════════════════════════════════════════════════
   بطاقةُ المفضّلة — تُميَّز بلون النجمة لا بلونٍ جديد
   ══════════════════════════════════════════════════════════════════
   ⚠ واللونُ أزرقُ تيفاني (‎--tiffany‎) — اختيارُ صاحب اللوحة. وكان
      كهرمانَ النجمة، والنجمةُ تبقى عليه: هي زرٌّ يتكرّر في جدول
      النتائج كلِّه، وتبديلُ لونِها هناك تبديلُ معنىً في مكانٍ لم يُطلَب.
      فلونُ البطاقة غيرُ لون النجمة — مقصودٌ يُقال لا سهوٌ يُكتشف.

   ⚠ وقربُه من ألوان المعنى مقيسٌ لا مظنون: ‎--up‎ أخضرُ عند ‎157°‎
      وتيفاني عند ‎178°‎ و‎--sky‎ سماويٌّ عند ‎199°‎ — فرقٌ يُرى. وهو على
      مساحةٍ كبيرةٍ لا على شارةٍ صغيرة، فلا يُقرأ اتّجاهَ سعرٍ ولا حالة.

   ⚠ وخفيفٌ لا صارخ: فيها أرقامٌ يُتصرَّف عليها، وأرضيّةٌ مشبَعةٌ تسحب
      العينَ عن الرقم. فسبعةٌ بالمئة عند الرأس تخفّ إلى صفرٍ بعده.

   ⚠ ولا نبضَ ولا حركة: الساكنُ يقول «هذه بطاقتُك»، والنابضُ يقول «انظر
      إليّ الآن» — وهي قائمةٌ تُراجَع لا نداءٌ يُلتفَت إليه.

   ⚠ ويُخلَط بالمتغيّر لا بلونٍ مكتوب: اللوحةُ مقلوبةٌ في النمط الداكن،
      فلونٌ صريحٌ يصلح في أحدهما ويصير لطخةً في الآخر. */
#fav-card{
  position:relative;
  border-color:color-mix(in srgb, var(--tiffany) 32%, var(--line));

  /* التلوينُ عند الرأس وحدَه: هو ما يُميّز البطاقة، والجدولُ تحته
     يبقى على أرضيّته كي تُقرأ أرقامُه بلا مزاحمة. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tiffany) 7%, var(--surface)) 0,
      var(--surface) 150px);

  box-shadow:
    var(--shadow-1),
    0 0 0 1px color-mix(in srgb, var(--tiffany) 12%, transparent),
    0 16px 44px -28px color-mix(in srgb, var(--tiffany) 60%, transparent);
}

/* حافّةٌ مبدئيّةٌ تقول «هذه لك» بلا كلمة — وتخفّ نزولاً فلا تُقسِم
   البطاقةَ خطّاً حادّاً. و‎inset-inline-start‎ لا ‎left‎: الصفحةُ عربيّة
   فالبدايةُ يمينٌ، ولو كُتبت ‎left‎ لَوقع الشريطُ في آخر البطاقة. */
#fav-card::before{
  content:'';
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:3px;
  border-start-start-radius:var(--r);
  border-end-start-radius:var(--r);
  background:linear-gradient(180deg,
    var(--tiffany) 0,
    color-mix(in srgb, var(--tiffany) 22%, transparent) 60%,
    transparent 100%);
  pointer-events:none;
}

#fav-card .card-head{
  border-bottom-color:color-mix(in srgb, var(--tiffany) 24%, var(--line-2));
}

/* الأيقونةُ وحدَها تُلوَّن — والعنوانُ يبقى حبراً: عنوانٌ ملوَّنٌ في
   لوحةٍ عناوينُها حبرٌ يُقرأ استثناءً، والأيقونةُ تكفي للتمييز. */
#fav-card .card-head h3 svg{ color:var(--tiffany-ink) }

/* ولا يُقلَب النمطُ حين تُفتح لوحةُ البحث فوقه */
#fav-card .fav-drop{ box-shadow:var(--shadow-3) }

/* ⚠ والتوهّجُ يُرفَع في الداكن وحدَه — تعديلُ إدراكٍ لا ذوق: الشفافيّةُ
   نفسُها تُرى ظلّاً واضحاً على الأبيض، وتكاد تختفي على ‎#181a20‎. */
:root[data-theme="dark"] #fav-card{
  box-shadow:
    var(--shadow-1),
    0 0 0 1px color-mix(in srgb, var(--tiffany) 18%, transparent),
    0 18px 52px -24px color-mix(in srgb, var(--tiffany) 78%, transparent);
}

.fav-find{position:relative}
.fav-find .input{width:230px;font-size:12.5px;padding:7px 12px}

/* القائمة تطفو ولا تدفع: ظهورها لا يزحزح الجدول تحتها، فما كانت العين
   عليه يبقى مكانه. */
.fav-drop{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;
  min-width:340px;max-width:min(460px, 92vw);max-height:min(360px, 60vh);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  z-index:40;padding:var(--sp-1)
}
.fav-hit{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;
  width:100%;padding:7px 10px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--text);cursor:pointer;text-align:start;font:inherit
}
.fav-hit:hover:not(:disabled){background:var(--surface-3)}
.fav-hit:disabled{opacity:.5;cursor:default}
.fav-hit .sym{font-weight:700;font-size:12.5px;font-family:var(--mono);direction:ltr}
.fav-hit .nm{font-size:11px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-hit .px{font-size:11.5px;font-family:var(--mono);color:var(--muted);direction:ltr}
.fav-hit .tag{font-size:10px;color:var(--muted-2);white-space:nowrap}
.fav-hit .tag.add{color:var(--green-600);font-weight:600}
.fav-none{padding:10px 12px;font-size:12px;color:var(--muted-2)}

/* رقاقة شرطٍ معطَّل: تُقرأ ولا تُصرخ — هي معلومة لا نتيجة */
.match-chip.is-off{opacity:.55;border-style:dashed}

/* ── شرطٌ حاد عن قالبه ───────────────────────────────────────────────
   الشارة تُخبر، والزرّ يردّ. وكلاهما لا يظهر إلّا عند الحيود فعلاً —
   زرُّ إعادةٍ على شرطٍ لم يُمسّ ضجيجٌ في كل صفّ لا يقول شيئاً. */
.scr-edited{
  font-size:9.5px;font-weight:600;letter-spacing:.2px;
  padding:1px 6px;border-radius:999px;
  color:var(--amber-600);background:var(--amber-100);
  border:1px solid var(--amber-200)
}

/* ── ذيل البلوك: زرّ العودة أسفلَ يساراً ────────────────────────────
   بعيداً عن سلّة الحذف في الرأس عمداً — أحدهما يستردّ والآخر يمحو،
   وتجاورُهما يجعل الخطأ في الضغط خسارةً لا تراجُع عنها.

   والصفحة عربية، فـ inline-end هو اليسار البصري. وهي لا تُكتب left
   صراحةً كي يبقى التخطيط صحيحاً لو قُلب اتّجاه الصفحة يوماً. */
.scr-block-foot{
  display:flex;justify-content:flex-end;align-items:center;
  padding:0 var(--sp-2) var(--sp-1);
  margin-top:calc(var(--sp-1) * -1)
}

/* شفافٌ حتى يُقصَد، لا مختفٍ: ٦٠٪ تُرى من طرف العين ولا تزاحم الحقول.
   وعند التصويب يكتمل ويصطبغ بالكهرماني — لون شارة «مُعدَّل» نفسه،
   فيُقرأ الزرُّ والشارة شيئاً واحداً. */
.scr-reset{
  opacity:.6;color:var(--muted-2);
  transition:opacity .14s ease, color .14s ease, transform .2s ease
}
.scr-reset:hover:not(:disabled):not(.is-busy){opacity:1;color:var(--amber-600)}
.scr-reset:hover:not(:disabled):not(.is-busy) .ico{transform:rotate(-90deg)}
.scr-reset .ico{transition:transform .25s ease}
.scr-reset:focus-visible{opacity:1;outline:2px solid var(--amber-200);outline-offset:1px}

/* شرطٌ صنعه صاحبه: لا أصل يُردّ إليه. يبقى الزرّ في مكانه ليُقرأ الصفّ
   واحداً، ومعطَّلاً ليقول التلميحُ لماذا. */
.scr-reset:disabled{opacity:.22;cursor:not-allowed}

/* والمُعدَّل يُبرَز: هو الذي يُقصَد الزرّ لأجله */
.scr-block:has(.scr-edited) .scr-reset{opacity:.95;color:var(--amber-600)}

/* ── زرّ إرجاع ترتيب النتائج ────────────────────────────────────
   لا يُخفَّت. التخفيتُ يليق بأزرار الشروط لأنها حاضرةٌ دائماً بجانب كل
   شرطٍ سواء عُدِّل أم لا، فخفوتُها يقول «لستُ مقصوداً الآن». أمّا هذا
   فلا يظهر أصلاً إلّا حين يفارق الترتيبُ الافتراضي — فظهورُه نفسه هو
   الدعوة، وإخفاتُه بعدها تناقض. */
#scr-sort-reset{opacity:1;color:var(--amber-600)}
#scr-sort-reset:hover{opacity:1;color:var(--amber-800)}

@media (prefers-reduced-motion:reduce){
  .scr-reset,.scr-reset .ico{transition:none}
  .scr-reset:hover .ico{transform:none}
}

/* ── نجمة الإضافة السريعة ────────────────────────────────────────────
   خافتةٌ حتى تُضاء: صفٌّ فيه عشرون نجمةً ذهبية يصير زينةً لا معلومة.
   فالمطفأة رمادية باهتة تُرى عند التصويب، والمضيئة ذهبيةٌ مملوءة تُرى
   من طرف العين — والفرق بين الحالتين هو كل وظيفتها. */
.act-row{display:flex;align-items:center;gap:6px;justify-content:flex-end}

.star-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;flex:none;
  border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--muted-2);opacity:.45;cursor:pointer;
  transition:color .14s ease, opacity .14s ease, transform .14s ease
}
.star-btn:hover:not(:disabled){opacity:1;color:var(--amber-600);background:var(--surface-3)}
.star-btn:active:not(:disabled){transform:scale(.88)}
.star-btn:disabled{cursor:default}
.star-btn:focus-visible{outline:2px solid var(--amber-200);outline-offset:1px;opacity:1}

.star-btn.is-fav{
  color:var(--amber-500);opacity:1;
  /* المملوءة تُقرأ من بعيد؛ والحدّ يبقى كي لا تذوب على الأرضية الفاتحة */
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))
}
.star-btn.is-fav svg{fill:currentColor}

/* ومضةٌ عند الإضافة: تأكيدٌ لا احتفال — ٣٢٠ مللي ثم تسكن */
.star-btn.is-fav{animation:star-pop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes star-pop{
  0%{transform:scale(.6) rotate(-18deg)}
  60%{transform:scale(1.18) rotate(4deg)}
  100%{transform:scale(1) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .star-btn,.star-btn.is-fav{transition:none;animation:none}
}

@media (max-width:640px){
  .fav-find{width:100%}
  .fav-find .input{width:100%}
  .fav-drop{inset-inline:0;min-width:0}
}

@media (max-width:980px){
  .scr-layout{grid-template-columns:1fr}
  /* الشريط يصير أفقياً هنا، فقيد الارتفاع والتمرير الرأسي يُرفعان */
  .scr-side{position:static;max-height:none;display:block}

  /* ⚠ يلتفّ ولا ينزلق.
     ────────────────────────────────────────────────────────────────
     كان صفّاً واحداً بتمرير أفقي، وهو مقبولٌ لخمس بطاقات وخادعٌ لسبع
     عشرة: ما بعد حافّة الشاشة لا يُرى ولا يُعلَم أنه هناك — يبدو أن
     القائمة انتهت. والتمرير الأفقي لا يُلمح على الفأرة أصلاً.

     فالالتفاف يُظهر الجميع، والقسمة بالسوق تُبقي العدد صغيراً. */
  .scr-list{
    flex-direction:row;flex-wrap:wrap;
    overflow:visible;max-height:none;
    gap:var(--sp-2);
  }
  .scr-item{min-width:170px;flex:1 1 170px;max-width:100%;border:1px solid var(--line)}

  /* ⚠ العنوان يظهر هنا، وكان مخفياً — والسبب زال.
     ────────────────────────────────────────────────────────────────
     كان الشريط صفّاً واحداً بتمرير أفقي، فعنوانُ المجموعة يقطعه بدل أن
     يعنونه. ومع الالتفاف صار للعنوان سطرٌ كامل يسبق مجموعته، فيؤدّي
     وظيفته: اللون يجمع والعنوان يسمّي.

     واللون وحده لا يكفي — أحمرُ «هابطة» وكهرمانيُّ «النماذج» يفترقان
     بالدرجة لا بالمعنى، ومن لا يميّزهما لا يجد ما يخبره. */
  .scr-group{flex:1 0 100%;margin-top:var(--sp-2)}
  .scr-group:first-child{margin-top:0}
}
@media (max-width:640px){
  .scr-block-body{grid-template-columns:1fr 1fr}
  .scr-block-body [data-cond-field]{grid-column:1 / -1}
  /* عمودان لا خمسة — فالتثبيت في «الأخير» يصطدم بالحقل الممتدّ */
  .scr-block-body > .scr-frame{grid-column:auto}
  .scr-strip{gap:var(--sp-4);padding:var(--sp-3)}
  .scr-stat .v{font-size:14px}
}

/* ========================================================================
   لوحة الرصد
   ======================================================================== */

/* شريط ملخّص السوق */
.mkt-strip{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.mkt-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.mkt-item .k{font-size:11px;color:var(--muted-2)}
.mkt-item .v{font-size:17px;font-weight:650;line-height:1.2}

/* شريط اتّساع السوق: صاعد مقابل هابط */
.breadth{display:flex;height:6px;border-radius:4px;overflow:hidden;min-width:120px;background:var(--line-2)}
.breadth i{display:block;height:100%}
.breadth .up{background:var(--up)}
.breadth .down{background:var(--down)}

/* أزرار الفرز — تنزلق أفقياً على الجوال بدل أن تتكدّس */
.sort-bar{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.sort-bar::-webkit-scrollbar{height:4px}
.sort-bar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.sort-bar .btn{flex:none}

/* شارة العملة.
   الشعار الحقيقي إن نُزِّل إلى assets/coins، وإلا حرفان بلون مشتقّ من اسم
   العملة. البديل ليس عيباً: نحو عشر عملات في العقود أسهم ومؤشرات مرمّزة
   لا شعار رقمي لها أصلاً، والحرف الملوّن ثابت — نفس العملة تأخذ نفس اللون
   دائماً فتُميَّز بالعين بسرعة. */
.coin{display:flex;align-items:center;gap:9px;min-width:0}
.coin-mark{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;
  letter-spacing:-.02em;direction:ltr;
}
/* الشعار صورة: نفس الحيّز تماماً كي لا يتغيّر التخطيط بين عملة لها شعار
   وأخرى بلا شعار. والخلفية الفاتحة لأن كثيراً من الشعارات أبيض شفّاف. */
img.coin-mark{
  object-fit:contain;background:var(--surface-3);
  padding:2px;
  /* حلقة رفيعة: كثير من الشعارات أبيض على شفّاف، فبدونها تختفي حدودها
     في الوضع الفاتح ويبدو الصفّ كأن شعاره ناقص. */
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.coin-mark.xs{width:20px;height:20px;font-size:9px;padding:1px}
.coin-mark.pos-logo{width:32px;height:32px;font-size:12px;align-self:center}

/* رمز الزوج مسبوقاً بشعاره داخل خلايا الجداول */
.sym-cell{display:inline-flex;align-items:center;gap:7px;min-width:0}

/* رابط الشارت الخارجي.
   السهم يظهر بالمرور لا دائماً: صفٌّ فيه ستّون سهماً ضجيجٌ بصري، وغيابه
   بالكامل يُخفي أن العملة قابلة للنقر. فالحلّ إظهاره خافتاً عند اللمس. */
.tv-link{display:inline-flex;align-items:center;gap:7px;min-width:0;color:inherit;text-decoration:none}
.tv-link:hover{color:var(--green-700);text-decoration:none}
.tv-ico{opacity:0;transition:opacity .15s ease;flex:none;vertical-align:middle}
.tv-link:hover .tv-ico,.tv-link:focus-visible .tv-ico{opacity:.75}
.tv-link:focus-visible{outline:2px solid var(--green-500);outline-offset:2px;border-radius:var(--r-sm)}

/* على الشاشات اللمسية لا وجود للمرور، فيبقى السهم ظاهراً خافتاً */
@media (hover:none){
  .tv-ico{opacity:.5}
}

.coin-name{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.coin-name b{font-size:13.5px;font-weight:650;direction:ltr;letter-spacing:-.01em}
.coin-name span{font-size:10.5px;color:var(--muted-2);direction:ltr}

/* مدى اليوم مع موقع السعر.
   القضيب يقرأ من اليسار إلى اليمين دائماً — قاع اليوم يساراً وقمّته يميناً —
   لأن مقاييس الأسعار عالمياً تُقرأ هكذا حتى في الواجهات العربية. */
.day-range{min-width:104px;direction:ltr}

/* هامش جانبي بعرض نصف المؤشّر: يسمح للمؤشّر أن يبلغ الطرف تماماً عند
   قمّة اليوم أو قاعه دون أن يخرج من الخليّة أو يُقصّ. */
.day-range .bar{
  position:relative;height:6px;border-radius:var(--r-pill);
  margin-inline:6px;
  /* الطرفان وحدهما ملوّنان والوسط محايد: التدرّج المتّصل من الأحمر إلى
     الأخضر يمرّ بدرجة طينية تُفسد المظهر وتوحي بمعنى لا وجود له. */
  background:linear-gradient(90deg,
    var(--range-low)   0%,
    var(--range-low)   7%,
    var(--range-mid)  36%,
    var(--range-mid)  64%,
    var(--range-high) 93%,
    var(--range-high) 100%);
  box-shadow:inset 0 0 0 1px var(--range-edge);
}

/* المؤشّر: قرص أبيض بحلقة، لا شرطة رفيعة تضيع على الخلفية */
.day-range .bar i{
  position:absolute;top:50%;inset-inline-start:var(--pos,50%);
  width:10px;height:10px;border-radius:50%;
  background:var(--surface);
  box-shadow:0 0 0 2px var(--range-knob), 0 1px 4px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
  transition:inset-inline-start .5s cubic-bezier(.4,0,.2,1);
}
.day-range .bar i.near-high{--range-knob:var(--up)}
.day-range .bar i.near-low{--range-knob:var(--down)}

.day-range .ends{
  display:flex;justify-content:space-between;gap:var(--sp-2);
  font-size:10px;color:var(--muted-2);margin-top:4px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.day-range .ends span:first-child{color:var(--down)}
.day-range .ends span:last-child{color:var(--up)}

/* خلية التغيّر */
.chg{
  display:inline-block;font-family:var(--mono);font-weight:650;font-size:13px;
  padding:2px 7px;border-radius:var(--r-sm);direction:ltr;
}
.chg.up{background:var(--up-bg);color:var(--up)}
.chg.down{background:var(--down-bg);color:var(--down)}

/* العقود المفتوحة: القيمة وتغيّرها على سطر واحد، وإلا اختلّ ارتفاع الصفوف
   وابتعدت الأرقام عن خطّ أساس بقيّة الأعمدة. */
/* شبكة بعمودين: عمود التغيّر محجوز دائماً، فتبقى القيم على استقامة واحدة
   حتى في الصفوف التي لا تغيّر فيها أو لا بيانات لها. */
.oi{display:inline-grid;grid-template-columns:60px auto;gap:6px;align-items:baseline;direction:ltr}
.oi-v{grid-column:2}
.oi-d{
  grid-column:1;justify-self:end;
  font-size:10.5px;font-weight:600;letter-spacing:0;
  padding:1px 5px;border-radius:var(--r-sm);
}
.oi-d.up{background:var(--up-bg);color:var(--up)}
.oi-d.down{background:var(--down-bg);color:var(--down)}

/* وميض التغيّر: أخضر إن صعد السعر وأحمر إن نزل، ثم يعود لونه.
   الوميض لا الثبات — لأن اللون هنا يصف حدثاً لحظياً لا حالة مستمرّة. */
@keyframes tick-up{
  0%  {color:var(--up);   background:var(--up-bg)}
  100%{color:inherit;     background:transparent}
}
@keyframes tick-down{
  0%  {color:var(--down); background:var(--down-bg)}
  100%{color:inherit;     background:transparent}
}
.tick-up  {animation:tick-up   .8s ease-out}
.tick-down{animation:tick-down .8s ease-out}

@media (prefers-reduced-motion:reduce){
  .tick-up,.tick-down{animation:none}
  .day-range .bar i,.day-range .bar::before{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════
   نبضة السعر — للتيكات اللحظية في صفحة الأسواق
   ═══════════════════════════════════════════════════════════════════
   الوميض أعلاه (.tick-up) يملأ الخلية لوناً ثم يخبو خطّياً. وهو صحيح
   في بابه، لكنه يعامل التغيّر **حالةً**: مستطيلٌ ملوّن يظهر ويختفي.

   والتغيّر ليس حالة بل حدث — له لحظةُ وقوعٍ واتجاه. ومن هنا ثلاثة
   فوارق تجعل هذه النبضة تُقرأ لا تُلاحَظ فحسب:

   ١) الاتجاه في الحركة لا في اللون وحده
      التوهّج يصعد إن ارتفع السعر وينزل إن انخفض. فمن لا يميّز الأحمر
      من الأخضر — وهم واحد من كل اثني عشر رجلاً — يقرأ الاتجاه. واللون
      يبقى للبقيّة، لا بديلاً عنه.

   ٢) هجومٌ حادّ وذيلٌ طويل
      الانحدار المتساوي يُضيّع لحظة الوقوع: العين تلتقط بداية الحركة،
      فإبطاؤها يُخفي اللمحة ويُبقي الضجيج. هنا تبلغ الذروة في ٦٣ مللي
      ثم تخبو أُسّياً على ٩٠٠ — فتُلتقط البداية ويهدأ الأثر وحده.

   ٣) توهّجٌ بيضويّ لا مستطيل
      الحدّ المستقيم يرسم صندوقاً حول الرقم فيقطعه عن عمود الأرقام.
      والتدرّج الشعاعي يخبو قبل حافّته، فيبقى العمود متّصلاً.

   والقياس على عرض الأرقام لا على عرض الخلية — ولذلك يلزم الغلاف
   .px داخل td: الخلية عريضة والرقم فيها محاذٍ لطرفها، فتوهّجُ الخلية
   كلّها يُضيء فراغاً لا رقماً. */

.px{
  position:relative;
  display:inline-block;
  direction:ltr;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.02em;

  /* سياق تكديس مستقلّ: بدونه يهبط التوهّج (z-index:-1) خلف خلفية
     الصفّ فيختفي عند المرور بالمؤشّر. */
  isolation:isolate;
}

/* التوهّج */
.px::before{
  content:"";
  position:absolute;
  inset:-5px -9px;
  z-index:-1;
  border-radius:var(--r-sm);
  opacity:0;
  pointer-events:none;
}

/* الخبوّ الأُسّي: النقاط كثيفة في أوّله متباعدة في آخره.
   والتوقيت linear عمداً — المنحنى في النقاط لا في الدالّة، فيُقرأ
   ويُعدَّل بلا تخمين.

   والاتجاه محمولٌ على حركة التوهّج نفسه: يصعد إن ارتفع السعر وينزل
   إن انخفض. كان خيطاً تحت الرقم فأُزيل، ونُقل ما كان يحمله إلى
   التوهّج بدل أن يسقط — الاتجاه لا يُترك للّون وحده. */
@keyframes px-glow-up{
  0%   {opacity:0;   transform:translateY(4px)  scale(.9)}
  7%   {opacity:1;   transform:translateY(0)    scale(1)}
  22%  {opacity:.52}
  45%  {opacity:.2}
  70%  {opacity:.07}
  100% {opacity:0;   transform:translateY(-3px) scale(1)}
}

@keyframes px-glow-down{
  0%   {opacity:0;   transform:translateY(-4px) scale(.9)}
  7%   {opacity:1;   transform:translateY(0)    scale(1)}
  22%  {opacity:.52}
  45%  {opacity:.2}
  70%  {opacity:.07}
  100% {opacity:0;   transform:translateY(3px)  scale(1)}
}

@keyframes px-ink-up{
  0%   {color:var(--up)}
  45%  {color:var(--up)}
  100% {color:inherit}
}

@keyframes px-ink-down{
  0%   {color:var(--down)}
  45%  {color:var(--down)}
  100% {color:inherit}
}

.px-up,.px-down{animation:.9s linear both}
.px-up  {animation-name:px-ink-up}
.px-down{animation-name:px-ink-down}

.px-up::before  {animation:px-glow-up   .9s linear}
.px-down::before{animation:px-glow-down .9s linear}

/* اللون يُشتقّ من رمز الحالة نفسه لا يُكتب رقماً: ثيمتان، ولكلٍّ
   أخضرُها وأحمرُها.

   والنسبة قِيست بالنظر لا بالتقدير: ٢٤٪ اختفت على الأبيض، فرُفعت إلى
   ٤٢ وضُيّق التدرّج إلى ٦٤٪ ليتركّز خلف الأرقام بدل أن ينتشر فيبهت.
   والحدّ الأعلى هنا هو نفاذ اللون إلى الرقم — فوقه يُقرأ اللون خلفيةً
   لا توهّجاً، وهو الوميض القديم بعينه. */
.px-up::before{
  background:radial-gradient(ellipse at center,
    color-mix(in srgb, var(--up) 42%, transparent) 0%, transparent 64%);
}
.px-down::before{
  background:radial-gradient(ellipse at center,
    color-mix(in srgb, var(--down) 42%, transparent) 0%, transparent 64%);
}
/* متصفّح بلا color-mix: التوهّج يسقط إلى لون الخلفية الجاهز، والحركة
   تعمل كما هي. يخفت ولا ينكسر. */
@supports not (color: color-mix(in srgb, red, blue)){
  .px-up::before  {background:radial-gradient(ellipse at center,var(--up-bg) 0%,transparent 72%)}
  .px-down::before{background:radial-gradient(ellipse at center,var(--down-bg) 0%,transparent 72%)}
}

/* الحركة مطفأة ⇒ يبقى اللون وحده لحظةً. الاتجاه لا يسقط، وإنّما
   وسيلتُه — فمن أطفأ الحركة اختار ذلك. */
@media (prefers-reduced-motion:reduce){
  .px-up::before,.px-down::before{animation:none;opacity:0}
  .px-up,.px-down{animation-duration:.4s}
}

table.tbl tr.watch-row{cursor:pointer}
table.tbl tr.watch-row:hover .coin-name b{color:var(--green-700)}
/* صفوف بارتفاع واحد مهما اختلف محتوى الخلايا */
table.tbl tr.watch-row td{height:46px;line-height:1.45}

/* بطاقات الجوال — الجدول العريض لا يصلح تحت 700 بكسل */
.watch-cards{display:none;flex-direction:column;gap:var(--sp-2)}
.watch-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"mark name chg" "mark meta price";
  gap:2px var(--sp-3);
  align-items:center;
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.watch-card .coin-mark{grid-area:mark;width:34px;height:34px;font-size:12px}
.watch-card .wc-name{
  grid-area:name;font-size:14px;font-weight:650;direction:ltr;letter-spacing:-.01em;
  display:flex;align-items:center;gap:7px;
}
.wc-tv{
  display:inline-flex;color:var(--muted-2);cursor:pointer;
  padding:3px;margin:-3px;border-radius:var(--r-sm);
}
.wc-tv:hover{color:var(--green-700);background:var(--surface-3)}
.watch-card .wc-meta{grid-area:meta;font-size:11px;color:var(--muted-2)}
.watch-card .wc-chg{grid-area:chg;justify-self:end}
.watch-card .wc-price{grid-area:price;justify-self:end;font-family:var(--mono);font-size:13px;font-weight:600;direction:ltr}

@media (max-width:760px){
  .watch-table-wrap{display:none}
  .watch-cards{display:flex}
  .mkt-strip{gap:var(--sp-4);padding:var(--sp-3) var(--sp-4)}
  .mkt-item .v{font-size:15px}
}

/* ========================================================================
   الجداول
   ======================================================================== */

.table-wrap{overflow-x:auto;border-radius:var(--r)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{
  text-align:start;font-size:11.5px;font-weight:600;color:var(--muted);
  padding:9px var(--sp-4);
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;z-index:1;
}
table.tbl td{padding:10px var(--sp-4);border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr:hover{background:var(--surface-3)}
table.tbl tbody tr:last-child td{border-bottom:0}
/* ⚠ أرقامٌ جدوليّةٌ في أعمدة الأرقام — وإلّا فالعمودُ مهلهل.
   ══════════════════════════════════════════════════════════════════
   الخطُّ الافتراضيُّ يعطي كلَّ رقمٍ عرضَه: الواحدُ أنحفُ من الصفر،
   فـ‎0.46760‎ و‎21.8700‎ و‎1.3300‎ لا تتراصف فواصلُها ولا خاناتُها،
   والعينُ تمسح عموداً متعرّجاً. و‎tabular-nums‎ تُسوّي عرضَ الخانات
   فتقع الفواصلُ تحت بعضها بلا عمودٍ ثابتِ العرض ولا حشوٍ يدويّ. */
table.tbl td.num{
  text-align:end;                         /* ltr ⇒ اليمين الفعلي */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* والرأسُ يتبع خليّتَه: عنوانٌ بأرقامٍ متغيّرة العرض فوق عمودٍ مصطفٍّ
   يُبطل نصفَ الفائدة. */
table.tbl th.num{font-variant-numeric:tabular-nums}

/* عمودُ «القيَم المطابِقة» يأخذ ما بقي، ولا يُترك يضيق حتّى تنكسر
   الشريحةُ الواحدة على سطرَين. (والغلافُ ‎.match-row‎ مرنٌ أصلاً.) */
table.tbl th[data-sort="matches"]{min-width:170px}

/* شريحةٌ لا تنكسر في وسطها: ‎change 1.02 1m‎ ثلاثُ كلماتٍ تصف شيئاً
   واحداً، وكسرُها بينها يجعلها تُقرأ اثنتَين. */
.match-chip{white-space:nowrap}

/* عدّادُ التكرار داخل الشريحة — رقمٌ صغيرٌ لا خطٌّ تحته */
.match-chip u{
  text-decoration:none;font-size:9px;font-weight:700;
  opacity:.72;margin-inline-start:1px;
}

/* رأسٌ لا يُفرَّق به: السهمان يخفتان فيُرى أنّ الضغطَ لن يُحرّك شيئاً
   قبل الضغط — لا بعده. */
.tbl th.sortable.is-flat > span::before,
.tbl th.sortable.is-flat > span::after{opacity:.12}
.tbl th.sortable.is-flat{opacity:.72}
table.tbl th.num{text-align:start}        /* rtl ⇒ اليمين الفعلي كذلك */
table.tbl .sym{font-weight:600;direction:ltr;display:inline-block}

.empty{
  padding:var(--sp-8) var(--sp-5);text-align:center;color:var(--muted-2);
}
.empty .ico{width:38px;height:38px;opacity:.35;margin-bottom:var(--sp-3)}
.empty h4{color:var(--ink-2);margin-bottom:4px}
.empty p{font-size:13px;max-width:380px;margin:0 auto var(--sp-4)}

/* ========================================================================
   النماذج
   ======================================================================== */

.field{margin-bottom:var(--sp-4)}
.field:last-child{margin-bottom:0}
.field label,.lbl{
  display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);
  margin-bottom:5px;
}
.field .hint{font-size:11.5px;color:var(--muted-2);margin-top:5px;line-height:1.55}
.field .err{font-size:11.5px;color:var(--down);margin-top:5px}

/* عنوانُ حقلٍ يحمل مربّع تفعيل — المربّع والنصّ سطرٌ واحد يُنقر كلُّه.
   و .field label أعلاه block بهامشٍ سفلي، فيُنقض هنا للسطر الواحد. */
.field label.row-check{
  display:flex;align-items:center;gap:7px;
  margin-bottom:0;cursor:pointer;user-select:none;
}
.field label.row-check input[type=checkbox]{
  width:15px;height:15px;flex:none;margin:0;cursor:pointer;
  accent-color:var(--accent,#22c55e);
}
.field label.row-check > span{font-weight:600}
.field label.row-check > span.tiny{font-weight:500}

/* حقلٌ معطَّل يجب أن يُرى معطَّلاً — وإلّا بدا قابلاً للكتابة ولم يُكتب فيه */
.input:disabled{opacity:.45;cursor:not-allowed}

/* (أُزيل تنبيهُ العمّال المتوقّفين من الواجهة نهائياً بطلب صاحبها —
   انظر التعليق في layout.php. والمتابعةُ من سطر الأوامر:
   ‎php private/cron/status.php‎) */

/* ── سطر شرح خانة القيمة ────────────────────────────────────────────
   يقع تحت الصفّ لا بجانبه: الصفّ ممتلئ بأربعة حقول، وإقحامُ نصٍّ فيه
   يضغطها. وهو خافتٌ عمداً — دليلٌ يُقرأ عند الحاجة لا خبرٌ يزاحم. */
.cond-note{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:5px 10px 7px;
  font-size:10.5px;line-height:1.6;color:var(--muted-2);
}
.cond-chips{display:flex;gap:4px;flex-wrap:wrap;margin-inline-start:auto}

/* ── سطر الدلالة: أيَّ رقمٍ أكتب، ومتى يكون موجباً ────────────────────
   سطرُ الوحدة يجيب «بأيّ وحدة؟» وهذا يجيب «وأيَّ رقم؟» — وهما سؤالان
   لا واحد. وحدُّه الجانبيّ يفصله عمّا فوقه بلا خطٍّ يقطع البلوك. */
.cond-why{
  margin:0 10px 8px;padding:6px 9px;
  border-inline-start:2px solid color-mix(in srgb,var(--accent,var(--up)) 45%,transparent);
  border-radius:0 6px 6px 0;
  background:color-mix(in srgb,var(--muted-2) 7%,transparent);
  font-size:10.5px;line-height:1.75;color:var(--muted);
}
[dir="rtl"] .cond-why{border-radius:6px 0 0 6px}

/* العتبة الشائعة تُملأ بنقرة — من يكتب على RSI يعرف ٣٠ و٧٠، ومن يكتب
   على مؤشّرٍ لا يحفظ عتباته يخمّن. */
.cond-chip{
  font-family:var(--mono);font-size:10.5px;line-height:1;
  padding:3px 7px;border-radius:5px;cursor:pointer;
  color:var(--muted);background:transparent;
  border:1px solid var(--line-2);
  transition:border-color .12s ease,color .12s ease;
}
.cond-chip:hover{border-color:var(--accent,var(--up));color:var(--ink)}

/* ══ شرحُ الشرط: جملةٌ وشريطٌ وأثرٌ بالأرقام ═══════════════════════════
   ────────────────────────────────────────────────────────────────────
   الترتيبُ ليس ذوقاً: يُقرأ من أعلى إلى أسفل بترتيب السؤال نفسه —
   «ماذا اخترتُ؟» ثم «أين موضعُه؟» ثم «فماذا يقع؟» ثم «وما الفخّ؟».

   وكتلةٌ واحدة بحدٍّ واحد، لا أربعةَ أسطرٍ متجاورة: الأربعةُ تُقرأ
   أربعَ ملاحظاتٍ متفرّقة، والكتلةُ تُقرأ شرحاً لشيءٍ واحد. */
.cond-guide{
  margin:0 10px 8px;padding:8px 10px 9px;
  border:1px solid var(--line-2);border-radius:8px;
  background:color-mix(in srgb,var(--muted-2) 5%,transparent);
  display:flex;flex-direction:column;gap:7px;
}

/* الجملة أوّلاً وأوضحُها: هي الشرطُ مقروءاً */
.cg-line{
  display:flex;align-items:flex-start;gap:6px;
  font-size:11.5px;line-height:1.6;color:var(--ink);font-weight:600;
}
.cg-line .ico{flex:none;margin-top:2px;color:var(--accent,var(--up))}

.cg-effect{font-size:10.5px;line-height:1.75;color:var(--muted)}

.cg-note{
  display:flex;align-items:flex-start;gap:5px;
  font-size:10.5px;line-height:1.6;color:var(--warn,#d9a441);
}
.cg-note .ico{flex:none;margin-top:2px}

/* مصدرٌ ميّت — أشدُّ من تنبيه: الشرطُ لا يتحقّق مهما ضُبط.
   وحدُّه الصريح ليقطع النظر، لأن قراءتَه تختصر ساعةً من تنزيل العتبات. */
.cg-dead{
  display:flex;align-items:flex-start;gap:6px;
  padding:6px 8px;border-radius:6px;
  border:1px solid color-mix(in srgb,var(--down) 40%,transparent);
  background:color-mix(in srgb,var(--down) 9%,transparent);
  font-size:10.5px;line-height:1.65;color:var(--down);font-weight:600;
}
.cg-dead .ico{flex:none;margin-top:1px}

.cg-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cg-chips-label{font-size:10.5px;color:var(--muted-2)}

/* ── الشريط ─────────────────────────────────────────────────────────
   محورُ القيم ‎ltr‎ عمداً وإن كانت الصفحة عربية — الأصغرُ يساراً هو
   صورةُ المذبذّب المحفوظة في عين كل من رآه، وقلبُها يقلب المعنى.
   انظر ConditionGuide::barHtml. */
.cg-bar{display:flex;flex-direction:column;gap:2px;padding:2px 0 0}

.cg-track{
  position:relative;height:9px;border-radius:5px;overflow:hidden;
  background:var(--surface-3);
}
.cg-band{position:absolute;top:0;bottom:0}

/* النبرة تقول الفرصة لا القيمة: «تشبّعٌ بيعي» فرصةُ شراءٍ فهي صاعدة */
.cg-band.is-up{background:color-mix(in srgb,var(--up) 38%,transparent)}
.cg-band.is-down{background:color-mix(in srgb,var(--down) 38%,transparent)}
.cg-band.is-warn{background:color-mix(in srgb,var(--warn,#d9a441) 38%,transparent)}
.cg-band.is-flat{background:color-mix(in srgb,var(--muted-2) 20%,transparent)}

/* العلامة المقترحة شعرةٌ باهتة، وعلامةُ صاحبه خطٌّ صريحٌ يعلوها */
.cg-mark{
  position:absolute;top:0;bottom:0;width:1px;
  margin-inline-start:-.5px;
  background:color-mix(in srgb,var(--ink) 25%,transparent);
}
.cg-mark.is-own{
  width:3px;margin-inline-start:-1.5px;
  background:var(--ink);
  box-shadow:0 0 0 1px var(--surface);
}

.cg-scale{position:relative;height:13px}
.cg-num{
  position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;line-height:13px;
  color:var(--muted-2);white-space:nowrap;
}
.cg-num.is-own{color:var(--ink);font-weight:700}

/* مفتاحُ الألوان: لونٌ بلا اسمٍ زخرفةٌ لا معلومة */
.cg-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--muted-2)}
.cg-key{display:inline-flex;align-items:center;gap:4px}
.cg-key::before{
  content:'';width:7px;height:7px;border-radius:2px;flex:none;
}
.cg-key.is-up::before{background:color-mix(in srgb,var(--up) 55%,transparent)}
.cg-key.is-down::before{background:color-mix(in srgb,var(--down) 55%,transparent)}
.cg-key.is-warn::before{background:color-mix(in srgb,var(--warn,#d9a441) 55%,transparent)}
.cg-key.is-flat::before{background:color-mix(in srgb,var(--muted-2) 35%,transparent)}

/* ── نبض البوت ──────────────────────────────────────────────────────
   شريطٌ واحد أوّلَ البطاقة: نقطةٌ ملوّنة، وكلمةٌ تقول الحالة، وسببٌ
   بجانبها. واللون يُقرأ من طرف الشاشة قبل أن تُقرأ الكلمة.

   والنقطة تنبض في الأخضر وحده: النبض معناه «يجري الآن»، ونبضُ الأحمر
   يقول «شيءٌ يتحرّك» وهو الكذب بعينه. */
.bot-beat{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-bottom:var(--sp-3);padding:7px 10px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:11.5px;line-height:1.55;
}
.bot-beat .beat-dot{
  flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--muted-2);
}
.bot-beat b{flex:none;font-size:11.5px}
.bot-beat span[data-beat-reason]{color:var(--muted-2);min-width:0}

/* يرصد الآن — أخضر ينبض */
.bot-beat.is-scan{
  border-color:color-mix(in srgb,var(--up) 34%,transparent);
  background:color-mix(in srgb,var(--up) 8%,transparent);
}
.bot-beat.is-scan b{color:var(--up)}
.bot-beat.is-scan .beat-dot{background:var(--up);animation:beat-pulse 1.6s ease-in-out infinite}

/* يرصد ولا يفتح · أو متعثّر — كهرمانيّ ساكن */
.bot-beat.is-full,.bot-beat.is-wait{
  border-color:color-mix(in srgb,var(--warn) 34%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent);
}
.bot-beat.is-full b,.bot-beat.is-wait b{color:var(--warn)}
.bot-beat.is-full .beat-dot,.bot-beat.is-wait .beat-dot{background:var(--warn)}

/* لا يعمل — أحمر ساكن */
.bot-beat.is-down{
  border-color:color-mix(in srgb,var(--down) 34%,transparent);
  background:color-mix(in srgb,var(--down) 8%,transparent);
}
.bot-beat.is-down b{color:var(--down)}
.bot-beat.is-down .beat-dot{background:var(--down)}

/* أوقفتَه بيدك — رمادي، ليس عطلاً فلا يُصبغ إنذاراً */
.bot-beat.is-off{opacity:.72}
.bot-beat.is-off b{color:var(--muted)}

@keyframes beat-pulse{
  0%,100% {opacity:1;   box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 45%,transparent)}
  50%     {opacity:.75; box-shadow:0 0 0 5px transparent}
}
@media (prefers-reduced-motion:reduce){
  .bot-beat.is-scan .beat-dot{animation:none}
}

/* ── فاحص البوت ─────────────────────────────────────────────────────
   قائمةٌ تُقرأ بالعين من العلامة قبل النصّ: المانع أحمرُ صريح، والتنبيه
   كهرمانيّ، والسليم رماديّ خافت — فالسليم لا يزاحم ما يوقف. */
.bot-doctor{
  margin:0 0 var(--sp-3);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--muted-2) 4%,transparent);
  overflow:hidden;
}
.bot-doctor .doc-head{
  padding:7px 10px;font-size:12px;font-weight:700;
  border-bottom:1px solid var(--line-2);
}
.bot-doctor .doc-head.is-ok{color:var(--up);background:color-mix(in srgb,var(--up) 8%,transparent)}
.bot-doctor .doc-head.is-block{color:var(--down);background:color-mix(in srgb,var(--down) 8%,transparent)}

.bot-doctor .doc-row{
  display:flex;gap:8px;align-items:flex-start;
  padding:6px 10px;border-bottom:1px solid var(--line-2);
}
.bot-doctor .doc-row:last-child{border-bottom:0}
.bot-doctor .doc-mark{
  flex:none;width:16px;text-align:center;
  font-size:11px;font-weight:700;line-height:1.5;
}
.bot-doctor .doc-row.is-block .doc-mark{color:var(--down)}
.bot-doctor .doc-row.is-warn  .doc-mark{color:var(--warn)}
.bot-doctor .doc-row.is-ok    .doc-mark{color:var(--muted-2);opacity:.6}

.bot-doctor .doc-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.bot-doctor .doc-body b{font-size:11.5px}
.bot-doctor .doc-detail{font-size:11px;color:var(--muted-2);line-height:1.5}
.bot-doctor .doc-fix{font-size:11px;color:var(--warn);line-height:1.5}

/* السليم يخفت: هو خلفيّةٌ تطمئن، لا خبرٌ يُقرأ */
.bot-doctor .doc-row.is-ok{opacity:.62}
.bot-doctor .doc-row.is-ok .doc-fix{display:none}

/* ── الاختيار السريع بجانب الإدخال الحرّ ────────────────────────────
   القائمة أضيق: هي طريقٌ مختصر لا الحقلُ نفسه. والرقم النهائي يُقرأ من
   اليمين حيث يُكتب — فلا تتنقّل العين بين موضعين لتعرف ما اختير. */
.trail-pair{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:6px}
.trail-pair .tiny-sel{font-size:11.5px;padding-block:7px;color:var(--muted)}
.trail-pair input{font-family:var(--mono);text-align:center}

/* القائمة تتبع حقلها: حقلٌ معطَّل وقائمةٌ حيّة فوقه دعوةٌ إلى لا شيء */
.trail-pair:has(input:disabled) .tiny-sel{opacity:.45;pointer-events:none}

.input,select.input,textarea.input{
  width:100%;
  font-family:inherit;font-size:13.5px;
  color:var(--ink);
  padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .13s ease,box-shadow .13s ease;
  appearance:none;
}
.input:focus,select.input:focus,textarea.input:focus{
  outline:0;border-color:var(--green-400);
  box-shadow:0 0 0 3px var(--green-100);
}
.input::placeholder{color:var(--muted-2)}
.input:disabled,.input[readonly]{background-color:var(--surface-3);color:var(--muted);cursor:not-allowed}
.input.num,input[type=number].input{font-family:var(--mono);direction:ltr;text-align:start}
textarea.input{min-height:96px;resize:vertical;line-height:1.7}

/* ⚠ فراغُ السهم يُحجز في جهة السهم — بالمعنى الفيزيائي لا المنطقي.
   ────────────────────────────────────────────────────────────────────
   السهم مرسومٌ ‎background-position:left‎ — يساراً فيزيائياً، ثابتاً مهما
   كان اتّجاه الصفحة. وكان الفراغُ المحجوز له ‎padding-inline-start‎، وهي
   في صفحةٍ ‎rtl‎ الجهةُ **اليمنى**. فحُجز اثنان وثلاثون بكسلاً حيث لا سهم،
   وتُرك للسهم اثنا عشر — وهو يشغل من ١٢ إلى ٢٤.

   فالنصُّ ينتهي عند ١٢ والسهمُ فوقه، فيقصّه المتصفّح قبل أوانه:
   «افتراضي · ٣٠ دقيقة» تُقرأ «افتراضي · ٣ …» في خانةٍ تسع النصَّ كلَّه.

   والقياس: النصُّ الأطول ‎102px‎، والخانة كانت تحتاج ‎158px‎ لتُظهره
   (‎102 + 32 يميناً + 24 للسهم‎)، وتحتاج بعد التصحيح ‎146px‎. */
select.input{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2363796d' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 12px center;
  padding-left:32px;
  /* لا يتمدّد بطول أطول خيار فيه */
  min-width:0;
  max-width:100%;
  text-overflow:ellipsis;
}

.input-group{display:flex;align-items:stretch}
.input-group .input{border-radius:0}
.input-group .input:first-child{border-start-start-radius:var(--r-sm);border-end-start-radius:var(--r-sm)}
.input-group .input:last-child{border-start-end-radius:var(--r-sm);border-end-end-radius:var(--r-sm)}
.input-group .addon{
  display:flex;align-items:center;padding:0 11px;
  background:var(--surface-3);border:1px solid var(--line);
  font-size:12.5px;color:var(--muted);font-weight:600;
  white-space:nowrap;
}
.input-group .addon:first-child{border-start-start-radius:var(--r-sm);border-end-start-radius:var(--r-sm);border-inline-end:0}
.input-group .addon:last-child{border-start-end-radius:var(--r-sm);border-end-end-radius:var(--r-sm);border-inline-start:0}

.check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13px;line-height:1.5}
.check input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--green-600);flex:none;cursor:pointer}
.check span small{display:block;color:var(--muted-2);font-size:11.5px;margin-top:1px}

.switch{position:relative;display:inline-block;width:38px;height:21px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{
  position:absolute;inset:0;cursor:pointer;
  background:var(--line);border-radius:var(--r-pill);
  transition:background .18s ease;
}
.switch i::before{
  content:"";position:absolute;height:15px;width:15px;
  top:3px;right:3px;
  background:#fff;border-radius:50%;
  transition:transform .18s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + i{background:var(--green-500)}
/* 38 عرض المفتاح − 3 حافة يمنى − 15 قطر المقبض − 3 حافة يسرى = 17 */
.switch input:checked + i::before{transform:translateX(-17px)}
.switch input:disabled + i{opacity:.5;cursor:not-allowed}

/* مصفوفة الرافعة */
.lev-picker{display:flex;gap:5px;flex-wrap:wrap}
.lev-picker button{
  font-family:var(--mono);font-size:12px;font-weight:700;
  padding:5px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer;direction:ltr;
  transition:all .12s ease;
}
.lev-picker button:hover{border-color:var(--green-300);background:var(--green-050)}
.lev-picker button.is-active{background:var(--green-600);border-color:var(--green-600);color:#fff}

/* أزرار الاتجاه في نموذج التداول */
.side-picker{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.side-picker button{
  font-family:inherit;font-size:14px;font-weight:650;
  padding:11px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface);
  color:var(--muted);cursor:pointer;
  transition:all .13s ease;
}
.side-picker button[data-side=BUY].is-active{background:var(--up-bg);border-color:var(--up);color:var(--up)}
.side-picker button[data-side=SELL].is-active{background:var(--down-bg);border-color:var(--down);color:var(--down)}

/* ========================================================================
   التنبيهات
   ======================================================================== */

.alert{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px var(--sp-4);
  border-radius:var(--r-sm);
  border:1px solid;
  font-size:13px;line-height:1.6;
  margin-bottom:var(--sp-4);
}
.alert .ico{width:17px;height:17px;flex:none;margin-top:2px}
.alert b{display:block;margin-bottom:1px}
.alert-success{background:var(--up-bg);border-color:#c8e9d8;color:#15603c}
.alert-error{background:var(--down-bg);border-color:#f6d5d2;color:#8f2b24}
.alert-warn{background:var(--warn-bg);border-color:#f0e2c0;color:#7a5510}
.alert-info{background:var(--info-bg);border-color:#cfe2f4;color:#1c4f80}

/* الإشعارات العائمة */
.toasts{
  position:fixed;inset-block-end:var(--sp-5);inset-inline-start:var(--sp-5);
  z-index:200;display:flex;flex-direction:column;gap:var(--sp-2);
  max-width:360px;
}
.toast{
  background:var(--surface);
  border:1px solid var(--line);
  border-inline-start:3px solid var(--green-500);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-3);
  padding:11px var(--sp-4);
  font-size:13px;
  animation:toast-in .22s cubic-bezier(.2,.9,.3,1);
}
.toast.err{border-inline-start-color:var(--down)}
.toast.warn{border-inline-start-color:var(--warn)}
.toast b{display:block;font-size:13px;margin-bottom:1px}
.toast span{color:var(--muted);font-size:12.5px}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ========================================================================
   النوافذ
   ======================================================================== */

.modal-back{
  position:fixed;inset:0;z-index:150;
  background:var(--overlay);
  backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:var(--sp-7) var(--sp-4);
  overflow-y:auto;
  animation:fade .16s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* min-width:0 ليس تفصيلاً هنا.
   النافذة عنصر مرن، وعرضه الأدنى الافتراضي هو عرض محتواه. وأعرض ما
   بداخلها عادةً هو <select>: عرضه الجوهري يساوي أطول خيار فيه. فقائمة
   خيارات طويلة تدفع النافذة كلها أعرض من الشاشة، وتُقصّ عناوين الحقول
   عند الحافة — وهو ما كان يحدث. */
.modal{
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  width:100%;max-width:520px;
  min-width:0;
  animation:modal-in .2s cubic-bezier(.2,.9,.3,1);
  margin:auto 0;
}
.modal-body,.modal .field,.modal .input-group,.modal .grid{min-width:0}
.modal.wide{max-width:760px}
@keyframes modal-in{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}

.modal-head{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
}
.modal-head h3{font-size:15px}
.modal-head .close{
  margin-inline-start:auto;width:28px;height:28px;
  display:grid;place-items:center;border-radius:var(--r-sm);
  border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:19px;line-height:1;
}
.modal-head .close:hover{background:var(--surface-3);color:var(--ink)}
.modal-body{padding:var(--sp-5);max-height:calc(100vh - 220px);overflow-y:auto}
.modal-foot{
  display:flex;gap:var(--sp-2);justify-content:flex-start;
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--line);
  background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* ========================================================================
   محرّر القواعد
   ======================================================================== */

.rule{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line-2);
  transition:background .13s ease;
}
.rule:last-child{border-bottom:0}
.rule:hover{background:var(--surface-3)}
.rule.is-off{opacity:.58}

.rule-ico{
  width:34px;height:34px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  background:var(--green-100);color:var(--green-700);
}
.rule-ico.danger{background:var(--down-bg);color:var(--down)}
.rule-ico.success{background:var(--up-bg);color:var(--up)}
.rule-ico.warn{background:var(--warn-bg);color:var(--warn)}
.rule-ico.info{background:var(--info-bg);color:var(--info)}
.rule-ico.muted{background:var(--surface-3);color:var(--muted)}

.rule-main{flex:1;min-width:0}
.rule-main b{font-size:13.5px;font-weight:600;display:block;line-height:1.4}
.rule-main .desc{font-size:11.5px;color:var(--muted-2);line-height:1.5}

/* الحقل الرقمي المدمج داخل صفّ القاعدة — التعديل بلا فتح نافذة */
.rule-num{display:flex;align-items:center;gap:5px;flex:none}
.rule-num input{
  width:66px;font-family:var(--mono);font-size:13.5px;font-weight:650;
  text-align:center;padding:6px 4px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);direction:ltr;
  transition:border-color .13s ease,box-shadow .13s ease,background .13s ease;
}
.rule-num input:focus{outline:0;border-color:var(--green-400);box-shadow:0 0 0 3px var(--green-100)}
.rule-num input.dirty{border-color:var(--warn);background:var(--warn-bg)}
.rule-num input.saved{border-color:var(--up);background:var(--up-bg)}
.rule-num .unit{font-size:11.5px;color:var(--muted-2);font-weight:600}
.rule-num .cap{font-size:10.5px;color:var(--muted-2);width:100%;text-align:center}

.rule-meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:none;min-width:96px}

/* شريط الأثر الفوري.
   يحمل قائمة رموز قد تطول: بلا التفاف يدفع النافذة كلها إلى تمرير
   أفقي، فتُقصّ عناوين الحقول عند الحافة. */
.impact{
  display:block;
  padding:9px var(--sp-4);
  background:var(--green-050);
  border:1px dashed var(--green-200);
  border-radius:var(--r-sm);
  font-size:12.5px;line-height:1.9;color:var(--green-800);
  margin-top:var(--sp-3);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.impact b{white-space:nowrap}
.impact.hot{background:var(--warn-bg);border-color:#ecd9ae;color:#7a5510}

/* ========================================================================
   الخطّ الزمني للأحداث
   ======================================================================== */

.timeline{position:relative;padding-inline-start:var(--sp-5)}
.timeline::before{
  content:"";position:absolute;inset-block:6px 6px;
  inset-inline-start:5px;width:1px;background:var(--line);
}
.tl-item{position:relative;padding-bottom:var(--sp-4)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;
  inset-inline-start:calc(var(--sp-5) * -1 + 2px);
  top:6px;width:7px;height:7px;border-radius:50%;
  background:var(--green-400);border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--green-200);
}
.tl-item.danger::before{background:var(--down);box-shadow:0 0 0 1px #f6d5d2}
.tl-item.success::before{background:var(--up);box-shadow:0 0 0 1px #c8e9d8}
.tl-item b{font-size:13px;font-weight:600;display:block;line-height:1.45}
.tl-item .t{font-size:11px;color:var(--muted-2)}
.tl-item p{font-size:12.5px;color:var(--muted);margin:1px 0 0;line-height:1.55}

/* ========================================================================
   صفحات الدخول
   ======================================================================== */

.auth{
  min-height:100vh;display:grid;
  grid-template-columns:1fr 460px;
  background:var(--surface);
}
.auth-side{
  background:linear-gradient(155deg,var(--green-800),var(--green-600) 62%,var(--green-500));
  color:#fff;padding:var(--sp-8) 56px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.auth-side::after{
  content:"";position:absolute;inset-block-end:-140px;inset-inline-start:-90px;
  width:400px;height:400px;border-radius:50%;
  background:rgba(255,255,255,.06);
}
.auth-side::before{
  content:"";position:absolute;inset-block-start:-100px;inset-inline-end:-60px;
  width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.05);
}
.auth-side .inner{position:relative;z-index:1;max-width:440px}
.auth-side h2{font-size:27px;line-height:1.45;font-weight:600;margin-bottom:var(--sp-4)}
/* السطر الجديد داخل النصّ يُحترَم، والالتفاف يبقى طبيعياً عند ضيق الشاشة */
.auth-side h2.pitch{white-space:pre-line}
.auth-side p{font-size:14.5px;opacity:.86;line-height:1.85}
.auth-points{list-style:none;padding:0;margin:var(--sp-6) 0 0;display:flex;flex-direction:column;gap:13px}
.auth-points li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;opacity:.92;line-height:1.6}
.auth-points .ico{width:18px;height:18px;flex:none;margin-top:2px;opacity:.9}
.auth-side .foot{position:relative;z-index:1;font-size:12px;opacity:.6}

.auth-form{
  padding:var(--sp-8) 52px;
  display:flex;flex-direction:column;justify-content:center;
}
.auth-form .brand{display:flex;align-items:center;gap:11px;margin-bottom:var(--sp-7)}
.auth-form h1{font-size:22px;margin-bottom:4px}
.auth-form .lead{color:var(--muted);font-size:13.5px;margin-bottom:var(--sp-6)}
.auth-form .alt{margin-top:var(--sp-5);font-size:13px;color:var(--muted);text-align:center}

/* ========================================================================
   الصفحة العامّة (الهبوط)
   ======================================================================== */

.pub-nav{
  height:66px;display:flex;align-items:center;gap:var(--sp-5);
  padding:0 var(--sp-7);background:var(--topbar-bg);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.pub-nav .links{display:flex;gap:var(--sp-5);margin-inline-start:var(--sp-6)}
.pub-nav .links a{color:var(--ink-2);font-size:13.5px}
.pub-nav .links a:hover{color:var(--green-700);text-decoration:none}
.pub-nav .cta{margin-inline-start:auto;display:flex;gap:var(--sp-2);align-items:center}

.hero{padding:82px var(--sp-7) 72px;background:linear-gradient(180deg,var(--green-050),var(--surface));border-bottom:1px solid var(--line)}
.hero .inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.hero h1{font-size:38px;line-height:1.4;margin-bottom:var(--sp-4)}
.hero h1 em{font-style:normal;color:var(--green-600)}
.hero p{font-size:16px;color:var(--muted);line-height:1.85;max-width:520px;margin-bottom:var(--sp-6)}
.hero .actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.hero-note{margin-top:var(--sp-5);font-size:12.5px;color:var(--muted-2);display:flex;align-items:center;gap:7px}

.section{padding:72px var(--sp-7)}
.section .inner{max-width:1180px;margin:0 auto}
.section-head{max-width:620px;margin-bottom:var(--sp-7)}
.section-head .eyebrow{
  font-size:11.5px;font-weight:700;
  color:var(--green-600);text-transform:uppercase;margin-bottom:9px;
}
.section-head h2{font-size:27px;line-height:1.4;margin-bottom:11px}
.section-head p{color:var(--muted);font-size:14.5px;line-height:1.8}
.section.alt{background:var(--surface-2);border-block:1px solid var(--line)}

.feature{padding:var(--sp-5)}
.feature .ico-box{
  width:38px;height:38px;border-radius:10px;
  background:var(--green-100);color:var(--green-700);
  display:grid;place-items:center;margin-bottom:var(--sp-4);
}
.feature h3{font-size:15px;margin-bottom:6px}
.feature p{font-size:13.5px;color:var(--muted);line-height:1.8;margin:0}

.plan{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6);
  display:flex;flex-direction:column;
}
.plan.featured{border-color:var(--green-400);box-shadow:0 12px 40px -22px rgba(33,138,94,.55);position:relative}
.plan.featured::before{
  content:"الأكثر اختياراً";position:absolute;top:-11px;inset-inline-start:var(--sp-6);
  background:var(--green-600);color:#fff;font-size:11px;font-weight:600;
  padding:2px 11px;border-radius:var(--r-pill);
}
.plan h3{font-size:16px;margin-bottom:4px}
.plan .price{font-family:var(--mono);font-size:33px;font-weight:650;letter-spacing:-.04em;direction:ltr;margin:var(--sp-4) 0 2px}
.plan .price small{font-family:var(--font);font-size:13px;font-weight:500;color:var(--muted-2);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:var(--sp-5) 0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.6}
.plan li .ico{width:15px;height:15px;color:var(--green-600);flex:none;margin-top:3px}

.pub-foot{background:var(--green-900);color:#cfe3d8;padding:var(--sp-8) var(--sp-7) var(--sp-6)}
.pub-foot .inner{max-width:1180px;margin:0 auto}
.pub-foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--sp-7);margin-bottom:var(--sp-7)}
.pub-foot h4{color:#fff;font-size:13px;margin-bottom:var(--sp-3)}
.pub-foot a{color:#a9c9b9;font-size:13px;display:block;margin-bottom:8px}
.pub-foot a:hover{color:#fff;text-decoration:none}
.pub-foot .bar{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--sp-4);font-size:12px;opacity:.6;display:flex;gap:var(--sp-4);flex-wrap:wrap}

/* ========================================================================
   أدوات
   ======================================================================== */

.divider{height:1px;background:var(--line);margin:var(--sp-5) 0}
.dot-sep{color:var(--muted-2);margin:0 5px;font-size:10px}

.kv{display:flex;justify-content:space-between;gap:var(--sp-4);padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600;font-family:var(--mono);direction:ltr}

/* إخفاء بصري لا يؤثّر على التخطيط.
   البديل الشائع (left:-9999px) يمدّ منطقة التمرير بعشرة آلاف بكسل —
   وفي صفحة RTL يظهر ذلك شريط تمرير أفقياً على الجوال. */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.skeleton{background:linear-gradient(90deg,var(--line-2),var(--surface-3),var(--line-2));background-size:200% 100%;animation:sk 1.3s ease infinite;border-radius:var(--r-sm);color:transparent!important}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.tip{position:relative;cursor:help;border-bottom:1px dotted var(--muted-2)}

.scroll-y{max-height:420px;overflow-y:auto}
.scroll-y::-webkit-scrollbar{width:6px}
.scroll-y::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}

/* ========================================================================
   الاستجابة
   ======================================================================== */

/* ── شاشات مكتبية أصغر ───────────────────────────────── */
@media (max-width:1280px){
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-split,.g-split-rev{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .g-cards{grid-template-columns:1fr}
}

@media (max-width:1180px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-split,.g-split-rev{grid-template-columns:1fr}
  .g-cards{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
  .hero .inner{grid-template-columns:1fr}
  .pub-foot .cols{grid-template-columns:1fr 1fr}
}

/* ── لوحي: الدرج يحلّ محلّ الشريط الثابت ───────────────── */
@media (max-width:1024px){
  :root{--sidebar-w:0px}

  .sidebar{
    width:min(300px,86vw);
    transform:translateX(100%);
    transition:transform .24s cubic-bezier(.3,.9,.4,1);
    box-shadow:var(--shadow-3);
    border-inline-start:0;
  }
  .sidebar.is-open{transform:none}
  .main{margin-inline-start:0}
  .menu-toggle{display:inline-flex}

  /* مساحة نقر مريحة للإصبع */
  .nav-item{padding:11px var(--sp-3);font-size:14px}
  .sidebar-foot .nav-item{padding:13px var(--sp-3)}

  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-form{padding:var(--sp-7) var(--sp-5)}

  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page{padding:var(--sp-5)}
  .section,.hero{padding-inline:var(--sp-5)}
  .pub-nav .links{display:none}
}

/* ── لوحي رأسي وما دونه ─────────────────────────────── */
@media (max-width:820px){
  .g-2,.g-3{grid-template-columns:1fr}
  .g-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-cards,.g-auto{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .section{padding-block:52px}
  .modal.wide{max-width:100%}
}

/* ── جوال ───────────────────────────────────────────── */
@media (max-width:640px){
  .page{padding:var(--sp-4) var(--sp-3)}
  .topbar{padding:0 var(--sp-4);gap:var(--sp-3)}
  .topbar h1{font-size:15px}
  .topbar .sub{display:none}
  .topbar-actions{gap:var(--sp-1)}
  /* الاسم الكامل يُستبدَل بأيقونة الحساب — العرض لا يتّسع لكليهما */
  .topbar-actions .btn-sm .nowrap{display:none}
  .topbar-actions .btn-sm{padding-inline:var(--sp-2)}

  .g-4,.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:var(--sp-3) var(--sp-4)}
  .stat-value{font-size:18px}
  .stat-label{font-size:11px}

  .card-head,.card-body{padding-inline:var(--sp-4)}
  .card-body{padding-block:var(--sp-4)}

  /* بطاقة الصفقة: عمودان بدل ثلاثة، وحدود متّسقة */
  .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos-cell{border-inline-start:1px solid var(--line-2)}
  .pos-cell:nth-child(2n+1){border-inline-start:0}
  .pos-head,.pos-risk,.pos-rules{padding-inline:var(--sp-4)}
  .pos-gauge{margin-inline:var(--sp-4)}
  .pos-pnl .amount{font-size:17px}

  /* النافذة تصير ورقة تصعد من الأسفل — أقرب لسلوك الجوال */
  .modal-back{padding:0;align-items:flex-end}
  .modal,.modal.wide{
    max-width:100%;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    animation:sheet-up .24s cubic-bezier(.2,.9,.3,1);
  }
  .modal-body{max-height:calc(100vh - 190px);padding:var(--sp-4)}
  .modal-head,.modal-foot{padding-inline:var(--sp-4)}
  .modal-foot .btn{flex:1}

  /* شبكات النماذج داخل النوافذ تنهار دائماً على الجوال */
  .modal .grid.g-2,.modal .grid.g-3{grid-template-columns:1fr}

  /* صفّ القاعدة يصير عمودياً بدل أن يُقصّ */
  .rule{flex-wrap:wrap;gap:var(--sp-3);padding:var(--sp-4)}
  .rule-main{flex:1 1 100%;order:1}
  .rule-ico{order:0}
  .rule-num{order:2}
  .rule-meta{order:3;margin-inline-start:auto;flex-direction:row;align-items:center;gap:var(--sp-3);min-width:0}

  .btn{padding:9px 14px}
  .btn-sm{padding:7px 12px}
  .btn-icon{width:36px;height:36px}

  .pub-foot .cols{grid-template-columns:1fr;gap:var(--sp-5)}
  .hero{padding-block:56px 48px}
  .hero h1{font-size:25px;line-height:1.5}
  .hero p{font-size:14.5px}
  .section-head h2{font-size:21px}
  .plan .price{font-size:27px}

  .empty{padding:var(--sp-7) var(--sp-4)}
  .toasts{inset-inline:var(--sp-3);max-width:none}
}

@media (max-width:400px){
  .g-4,.g-5{grid-template-columns:1fr}
  .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn-group{width:100%}
  .btn-group .btn{flex:1}
}

@keyframes sheet-up{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}

@media print{
  .sidebar,.topbar,.btn,.toasts{display:none !important}
  .main{margin:0}
  .card,.pos{border-color:#ccc;box-shadow:none}
}

/* ========================================================================
   موجة البيتكوين
   ========================================================================
   صفحةٌ تُقرأ بالنظر لا بالقراءة: الترجيحُ لونٌ وطول، والمكوّناتُ أشرطةٌ
   متناظرةٌ حول الصفر. ومن نظر ثانيةً واحدة عرف الاتّجاه وقوّته. */

.bw-strip{
  display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md,10px);
}
.bw-label{font-size:10.5px;color:var(--muted-2);font-weight:600}
.bw-price{display:flex;align-items:baseline;gap:8px}
.bw-price b{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.3px}
.bw-quote{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:12.5px}
.bw-bid{color:var(--up);font-weight:700}
.bw-ask{color:var(--down);font-weight:700}
.bw-sep{color:var(--muted-2)}

/* عدّادُ الإصابة — أوّلُ ما يجب أن يُقرأ في أداةِ ترجيح */
.bw-hit{
  display:flex;align-items:baseline;gap:7px;
  padding:5px 12px;border-radius:8px;
  border:1px dashed var(--line-2);background:color-mix(in srgb,var(--muted-2) 6%,transparent);
}
.bw-hit b{font-family:var(--mono);font-size:16px;font-weight:700}
.bw-hit b.is-up{color:var(--up)}
.bw-hit b.is-down{color:var(--down)}

.bw-conn{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.bw-conn i{width:7px;height:7px;border-radius:50%;background:var(--down);flex:none}
.bw-conn.is-on i{background:var(--up);box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent)}

/* ── الشبكة ─────────────────────────────────────────────────────── */
.bw-grid{
  display:grid;gap:var(--sp-4);
  grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr);
  grid-template-areas:'chart signal' 'book signal' 'book flow';
  align-items:start;
}
.bw-chart-card {grid-area:chart}
.bw-signal-card{grid-area:signal}
.bw-book-card  {grid-area:book}
.bw-flow-card  {grid-area:flow}

@media (max-width:1100px){
  .bw-grid{grid-template-columns:1fr;grid-template-areas:'chart' 'signal' 'book' 'flow'}
}

/* ── الشارت ─────────────────────────────────────────────────────── */
.bw-canvas-wrap{position:relative;height:420px;padding:var(--sp-3) var(--sp-4) 0}
.bw-canvas-wrap canvas{display:block;cursor:crosshair;width:100%;height:100%}

.bw-frames{display:flex;gap:3px}
.bw-frame{
  font-size:11px;padding:3px 9px;border-radius:6px;cursor:pointer;
  color:var(--muted);background:transparent;border:1px solid transparent;
  font-family:inherit;
}
.bw-frame:hover{color:var(--ink)}
.bw-frame.is-on{color:var(--ink);background:var(--surface-3);border-color:var(--line-2);font-weight:700}

.bw-chart-foot{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line-2);
  font-size:10.5px;color:var(--muted-2);
}
.bw-key{display:inline-flex;align-items:center;gap:5px}
.bw-key i{width:9px;height:9px;border-radius:2px;flex:none}
.bw-key i.k-up{background:var(--up)}
.bw-key i.k-down{background:var(--down)}
.bw-key i.k-proj{background:transparent;border:1.5px dashed var(--muted)}

/* ── الترجيح ────────────────────────────────────────────────────── */
.bw-verdict{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-2)}

.bw-wave{
  font-size:26px;font-weight:800;letter-spacing:-.5px;text-align:center;
  margin-bottom:var(--sp-3);
}
.bw-wave.is-up{color:var(--up)}
.bw-wave.is-down{color:var(--down)}
.bw-wave.is-flat{color:var(--muted)}

.bw-gauge-track{
  position:relative;height:10px;border-radius:5px;overflow:hidden;
  background:var(--surface-3);
}
.bw-gauge-track > i{position:absolute;top:0;bottom:0;width:0;transition:all .2s ease}
.bw-gauge-track > i.is-up{background:var(--up)}
.bw-gauge-track > i.is-down{background:var(--down)}
.bw-gauge-track > i.is-flat{background:var(--muted-2)}
.bw-gauge-track > b{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line)}
.bw-gauge-nums{
  display:flex;justify-content:space-between;margin-top:3px;
  font-family:var(--mono);font-size:9.5px;color:var(--muted-2);
}
.bw-conf{margin-top:var(--sp-3);text-align:center;font-size:11.5px;color:var(--muted)}
.bw-conf b{color:var(--ink);font-family:var(--mono);font-size:14px}

/* المكوّنات — شريطٌ متناظرٌ حول الصفر لكل مؤشّر */
.bw-parts{padding:var(--sp-3) var(--sp-5)}
.bw-part{
  display:grid;grid-template-columns:minmax(0,86px) 1fr 42px 30px;
  align-items:center;gap:8px;padding:3px 0;
}
.bw-part-name{font-size:10.5px;color:var(--muted)}
.bw-part-bar{position:relative;height:6px;border-radius:3px;background:var(--surface-3)}
.bw-part-bar > i{position:absolute;top:0;bottom:0;border-radius:3px}
.bw-part-bar > i.is-up{background:var(--up)}
.bw-part-bar > i.is-down{background:var(--down)}
.bw-part-bar > i.is-flat{background:var(--muted-2)}
.bw-part-val{font-family:var(--mono);font-size:10.5px;text-align:left;color:var(--muted)}
.bw-part-val.is-up{color:var(--up)}
.bw-part-val.is-down{color:var(--down)}
.bw-part-w{font-family:var(--mono);font-size:9.5px;color:var(--muted-2);text-align:left}

.bw-caveat{
  display:flex;gap:7px;margin:var(--sp-3) var(--sp-5) var(--sp-4);
  padding:8px 10px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--warn,#d9a441) 35%,transparent);
  background:color-mix(in srgb,var(--warn,#d9a441) 8%,transparent);
  font-size:10.5px;line-height:1.7;color:var(--muted);
}
.bw-caveat .ico{flex:none;margin-top:2px;color:var(--warn,#d9a441)}
.bw-caveat b{color:var(--ink)}

/* ── الدفتر والتدفّق ────────────────────────────────────────────── */
.bw-ladder{padding:var(--sp-3) var(--sp-4)}
.bw-mid{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  padding:6px 0;margin:4px 0;
  font-family:var(--mono);font-size:15px;font-weight:700;
  border-block:1px solid var(--line-2);
}
.bw-mid span{font-size:10px;color:var(--muted-2);font-weight:400}

.bw-flow{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.bw-flow-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--surface-3)}
.bw-flow-bar > i{display:block;transition:width .25s ease}
.bw-flow-bar > i#bw-flow-buy{background:var(--up)}
.bw-flow-bar > i#bw-flow-sell{background:var(--down)}
.bw-flow-nums{
  display:flex;justify-content:space-between;margin-top:6px;
  font-size:11px;color:var(--muted);
}
.bw-flow-nums b{font-family:var(--mono);color:var(--ink)}
.bw-flow-nums .up b{color:var(--up)}
.bw-flow-nums .down b{color:var(--down)}

.bw-tape{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:2px;max-height:230px;overflow:hidden}
.bw-print{
  display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;
  padding:3px 7px;border-radius:5px;font-size:10.5px;
}
.bw-print b{font-family:var(--mono)}
.bw-print.is-buy{background:color-mix(in srgb,var(--up) 11%,transparent);color:var(--up)}
.bw-print.is-sell{background:color-mix(in srgb,var(--down) 11%,transparent);color:var(--down)}

/* صفوفُ سلّم الدفتر — الشريطُ خلف الرقم يُري الجدارَ بالنظر */
.bw-row{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:2px 7px;font-family:var(--mono);font-size:10.5px;
  border-radius:3px;
}
.bw-row > i{position:absolute;top:0;bottom:0;inset-inline-end:0;border-radius:3px;z-index:0}
.bw-row.is-bid > i{background:color-mix(in srgb,var(--up) 16%,transparent)}
.bw-row.is-ask > i{background:color-mix(in srgb,var(--down) 16%,transparent)}
.bw-row .bw-px,.bw-row .bw-qty{position:relative;z-index:1}
.bw-row.is-bid .bw-px{color:var(--up)}
.bw-row.is-ask .bw-px{color:var(--down)}
.bw-row .bw-qty{color:var(--muted)}
.bw-side{display:flex;flex-direction:column;gap:1px}

/* تناقضُ الاسم والشروط — انظر ScreenStore::mismatch */
.scr-miss{
  display:inline-flex;vertical-align:middle;margin-inline-start:4px;
  color:var(--warn,#d9a441);
}
.scr-mismatch{
  display:flex;gap:9px;align-items:flex-start;
  margin:0 var(--sp-5) var(--sp-3);padding:9px 11px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--warn,#d9a441) 40%,transparent);
  background:color-mix(in srgb,var(--warn,#d9a441) 9%,transparent);
  font-size:11px;line-height:1.75;color:var(--muted);
}
.scr-mismatch .ico{flex:none;margin-top:2px;color:var(--warn,#d9a441)}
.scr-mismatch b{color:var(--ink);display:block}

/* اسمُ العملة في التذكرة رابطٌ إلى شارت العقد الدائم.
   ────────────────────────────────────────────────────────────────────
   ولا يُلوَّن كرابطٍ عاديّ: هو عنوانُ البطاقة أوّلاً ورابطٌ ثانياً. فيبقى
   بلون العنوان، والسهمُ الصغير بجانبه هو ما يقول إنّه يُفتح خارجاً —
   ويظهر بوضوحٍ عند المرور. */
.pos-sym-link{
  display:inline-flex;align-items:center;gap:5px;
  color:inherit;text-decoration:none;
  border-radius:5px;padding:1px 3px;margin-inline-start:-3px;
  transition:color .12s ease,background .12s ease;
}
.pos-sym-link b{letter-spacing:-.2px}
.pos-sym-link .ico{opacity:.4;flex:none;transition:opacity .12s ease}
.pos-sym-link:hover{color:var(--accent,var(--up));background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pos-sym-link:hover .ico{opacity:1}
.pos-sym-link:focus-visible{outline:2px solid var(--green-400);outline-offset:1px}

/* (أُزيل مؤشّرُ «مهمّةٌ تُستأنَف» الخافت — لا فعلَ يُطلب منه ما دام
   الحارسُ يعيدها، وما لا فعلَ له لا يستحقّ سطراً في كل صفحة.
   والبانرُ الكامل باقٍ لما يستحقّه — انظر WorkerStatus::alarms) */

/* ════════════════════════════════════════════════════════════════════
   العلامة المائيّة للمنصّة — KFOO BOT
   ════════════════════════════════════════════════════════════════════
   خافتةٌ إلى حدّ أنّها لا تُقرأ إلّا حين يُقصد قراءتُها، وباقيةٌ إلى حدّ
   أنّها تظهر في أيّ لقطةِ شاشة. وذلك هو المطلوب من العلامة: أن تُثبت
   المصدر ولا تزاحم المحتوى.

   وهي على المحتوى لا على الصفحة كلّها: الشريطُ الجانبيّ يحمل الاسم
   صريحاً، فتكرارُه فوقه حشو.

   ⚠ و\u200Epointer-events:none\u200E شرطٌ لا زينة — بدونها تبتلع نقراتِ ما تحتها.
   و\u200Eposition:fixed\u200E كي لا تتحرّك مع التمرير فتُقرأ مرّتين. */
.page{position:relative}

.page::before{
  content:'KFOO BOT';
  position:fixed;
  bottom:clamp(14px,4vh,42px);
  inset-inline-start:clamp(14px,3vw,46px);
  z-index:0;pointer-events:none;user-select:none;
  font-size:clamp(28px,4.6vw,62px);
  font-weight:900;
  letter-spacing:.14em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--ink) 7%,transparent);
}

/* ⚠ ولا ‎z-index‎ على أبناء الصفحة — كان يحبس ما بداخلها.
   ────────────────────────────────────────────────────────────────────
   كان هنا ‎.page > *{position:relative;z-index:1}‎ ليعلوَ المحتوى على
   العلامة. وهو ينشئ **سياقَ تكديسٍ** لكل ابن — فأيُّ طبقةٍ داخله،
   مهما علا رقمُها، تبقى محبوسةً في الواحد.

   ووقع ذلك: صفحةُ كلّ الأسواق في الطرفيّة رقمُها ‎120‎، فحُبست تحت
   الواحد وغطّاها الشريطُ الجانبيّ (‎120‎ في السياق الجذر).

   والعلامةُ لا تحتاجه: ‎z-index:-1‎ تضعها خلف المحتوى كلِّه بلا أن
   تمسّ أحداً. */
.page::before{z-index:-1}

/* الطباعة: تُثبَّت العلامة أوضح قليلاً، فالورقةُ تُتداول بلا سياق */
@media print{
  .page::before{-webkit-text-stroke-color:rgba(0,0,0,.16)}
}

/* شاشةٌ قصيرة: تُخفى — لا مكان لها ولا حاجة */
@media (max-height:560px){ .page::before{display:none} }

@media (prefers-reduced-transparency:reduce){
  .page::before{-webkit-text-stroke-color:transparent}
}

/* ════════════════════════════════════════════════════════════════════
   طيُّ الشريط الجانبيّ إلى أيقونات
   ════════════════════════════════════════════════════════════════════
   ٢٤٨ بكسلاً تُستردّ إلى ٦٤ — والشارتُ أوّلُ المنتفعين: عرضُه هو دقّتُه.

   والعرضُ يُبدَّل بمتغيّرٍ واحد (‎--sidebar-w‎) لأنّ المحتوى يُزاح به
   أصلاً (‎margin-inline-start‎). فلا تُلمس قاعدةُ الإزاحة، ولا يُنسى
   موضعٌ يتبعها.

   ولا انتقالَ قبل أوّل نقرة (‎rail-anim‎): الحالةُ المحفوظة تُطبَّق عند
   التحميل، ولو كان الانتقالُ عاملاً لانزلق الشريطُ أمام العين في كل
   فتحةِ صفحة. */
.app.is-rail{--sidebar-w:64px}

.app.rail-anim .sidebar,
.app.rail-anim .page,
.app.rail-anim .topbar{transition:width .18s ease, margin-inline-start .18s ease}

/* ما يُخفى: النصوصُ وحدها — والأيقونةُ تبقى ومعها عنوانُها في التلميح */
.app.is-rail .brand-text,
.app.is-rail .nav-label,
.app.is-rail .nav-item > span:not(.badge),
.app.is-rail .sidebar-foot .nav-item{white-space:nowrap}

.app.is-rail .brand-text,
.app.is-rail .nav-label{display:none}

.app.is-rail .nav-item{
  justify-content:center;
  gap:0;
  padding-inline:0;
  font-size:0;               /* يُخفي نصَّ الرابط ويُبقي الأيقونة */
}
.app.is-rail .nav-item .ico{font-size:initial;flex:none}

/* الشارةُ (عدد الإشعارات) تصير نقطةً — لا مكان لرقمٍ في ٦٤ بكسلاً */
.app.is-rail .nav-item .badge{
  position:absolute;top:6px;inset-inline-end:10px;
  min-width:7px;width:7px;height:7px;padding:0;
  font-size:0;border-radius:50%;
}
.app.is-rail .nav-item{position:relative}

.app.is-rail .sidebar-brand{justify-content:center;gap:0}

/* زرُّ الطيّ */
.rail-toggle{
  margin-inline-start:auto;
  width:26px;height:26px;flex:none;
  display:grid;place-items:center;
  border-radius:7px;cursor:pointer;
  border:1px solid var(--line-2);
  background:transparent;color:var(--muted);
  transition:color .12s ease,border-color .12s ease,transform .18s ease;
}
.rail-toggle:hover{color:var(--ink);border-color:var(--green-400)}
.rail-toggle .ico{transform:rotate(90deg)}
.app.is-rail .rail-toggle .ico{transform:rotate(-90deg)}
.app.is-rail .rail-toggle{margin-inline:auto}

/* على الشاشات الصغيرة الشريطُ درجٌ يُفتح ويُغلق — فلا معنى للطيّ */
@media (max-width:1024px){
  .rail-toggle{display:none}
  .app.is-rail{--sidebar-w:248px}
}

/* ════════════════════════════════════════════════════════════════════
   علامةُ الملكية الطولية — KFOO BOT
   ════════════════════════════════════════════════════════════════════
   على كلّ عمودٍ جانبيّ: شفّافةٌ لا تزاحم الأرقام، وباقيةٌ في أيّ لقطة.

   ولماذا نصٌّ في SVG لا صورة؟
   ────────────────────────────────────────────────────────────────────
   لأنّ المقصود أن تُقرأ لا أن تُرى فحسب: من نسخ اللقطة وعرضها على
   نموذجٍ ليُقلّدها، قرأ النموذجُ «KFOO BOT» فيها فعرف لمن هي. والصورةُ
   الصمّاء تُرى ولا تُقرأ.

   ولماذا خلفيّةٌ مكرّرة لا عنصرٌ واحد؟
   ────────────────────────────────────────────────────────────────────
   العمودُ يتمرّر. وعنصرٌ واحدٌ في أعلاه يغيب مع أوّل لمسةِ عجلة، فتخرج
   اللقطةُ بلا علامة — وهي أوّلُ ما يُلتقط. و‎local‎ تجعلها تمتدّ مع
   المحتوى كلِّه مهما طال.

   ⚠ ولا تُقرأ بالنسخ النصّي: خلفيّةٌ لا محتوى، فلا تلتصق بما يُنسخ من
      أرقامٍ ولا تُفسد لصقَها. المنعُ للّقطة لا للنصّ.
   ════════════════════════════════════════════════════════════════════ */

#btcterm #right,
.scr-side,
.bw-signal-card,
.wm-side{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27330%27%20height%3D%27430%27%3E%3Ctext%20x%3D%2730%27%20y%3D%27215%27%20text-anchor%3D%27middle%27%20transform%3D%27rotate%28-90%2030%20215%29%27%20font-family%3D%27Segoe%20UI%2CTahoma%2Csans-serif%27%20font-size%3D%2730%27%20font-weight%3D%27800%27%20letter-spacing%3D%277%27%20fill%3D%27none%27%20stroke%3D%27rgba%28230%2C237%2C247%2C0.055%29%27%20stroke-width%3D%271%27%3EKFOO%20BOT%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat:repeat-y;
  background-position:right top;
  background-attachment:local;
}

/* السمةُ الفاتحة: الحدُّ الأبيضُ يختفي على أرضٍ بيضاء */
:root:not([data-theme="dark"]) .scr-side,
:root:not([data-theme="dark"]) .wm-side{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27330%27%20height%3D%27430%27%3E%3Ctext%20x%3D%2730%27%20y%3D%27215%27%20text-anchor%3D%27middle%27%20transform%3D%27rotate%28-90%2030%20215%29%27%20font-family%3D%27Segoe%20UI%2CTahoma%2Csans-serif%27%20font-size%3D%2730%27%20font-weight%3D%27800%27%20letter-spacing%3D%277%27%20fill%3D%27none%27%20stroke%3D%27rgba%2816%2C36%2C27%2C0.055%29%27%20stroke-width%3D%271%27%3EKFOO%20BOT%3C%2Ftext%3E%3C%2Fsvg%3E");
}
:root[data-theme="dark"] .scr-side,
:root[data-theme="dark"] .wm-side{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27330%27%20height%3D%27430%27%3E%3Ctext%20x%3D%2730%27%20y%3D%27215%27%20text-anchor%3D%27middle%27%20transform%3D%27rotate%28-90%2030%20215%29%27%20font-family%3D%27Segoe%20UI%2CTahoma%2Csans-serif%27%20font-size%3D%2730%27%20font-weight%3D%27800%27%20letter-spacing%3D%277%27%20fill%3D%27none%27%20stroke%3D%27rgba%28230%2C237%2C247%2C0.055%29%27%20stroke-width%3D%271%27%3EKFOO%20BOT%3C%2Ftext%3E%3C%2Fsvg%3E");
}

/* الطرفيّة داكنةٌ دائماً — لا تتبع السمة */
#btcterm #right{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27330%27%20height%3D%27430%27%3E%3Ctext%20x%3D%2730%27%20y%3D%27215%27%20text-anchor%3D%27middle%27%20transform%3D%27rotate%28-90%2030%20215%29%27%20font-family%3D%27Segoe%20UI%2CTahoma%2Csans-serif%27%20font-size%3D%2730%27%20font-weight%3D%27800%27%20letter-spacing%3D%277%27%20fill%3D%27none%27%20stroke%3D%27rgba%28230%2C237%2C247%2C0.055%29%27%20stroke-width%3D%271%27%3EKFOO%20BOT%3C%2Ftext%3E%3C%2Fsvg%3E")}

/* الطباعة: تُثبَّت أوضح — الورقةُ تُتداول بلا سياق */
@media print{
  .scr-side,.wm-side{background-image:none}
}

/* ══════════════════════════════════════════════════════════════════
   عمودُ القائمة الرئيس — أسودُ يتدرّج إلى رماديّ (الوضعُ الداكن وحدَه)
   ══════════════════════════════════════════════════════════════════
   ⚠ محصورٌ في ‎[data-theme="dark"]‎ — والقيدُ ليس احتياطاً بل ضرورة.
      ────────────────────────────────────────────────────────────────
      ‎.sidebar‎ الأساسيّةُ مبنيّةٌ على ‎--sky-100/050‎، وهي في الوضع
      الفاتح ألوانٌ **فاتحة** وفي الداكن **داكنة**. فقاعدةٌ غيرُ مقيّدةٍ
      تجعل العمودَ أسودَ في الوضع الفاتح أيضاً — وحبرُه هناك داكنٌ،
      فيصير أسودَ على أسود.

   ⚠ والتدرّجُ يغور في الوسط ويُضيء عند الطرفَين:

          أعلاه   ‎#141416‎   سطوع ‎20.1‎
          وسطُه   ‎#0D0D0F‎   سطوع ‎13.1‎   ← الأعمق
          أسفلُه  ‎#161618‎   سطوع ‎22.1‎

      فيُقرأ العمودُ سطحاً مجسَّماً لا لوحاً مسطَّحاً، وينفصل عمّا بجانبه
      بالعمق لا بحدٍّ صريح. والحبرُ عليه مقيسٌ في أعمق نقطة: النشطُ
      ‎16.40:1‎ والعاديُّ ‎10.27:1‎ وعنوانُ القسم ‎5.85:1‎ — كلُّها فوق الحدّ.
   ══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg, #141416 0%, #0D0D0F 46%, #0D0D0F 62%, #161618 100%);
  border-inline-end:1px solid #232327;
}

/* ⚠ وحافّةٌ داخليّةٌ فاتحةٌ بكسلاً واحداً في أعلاه: هي ما يُعطي الحسَّ
   المعدنيَّ في الأطقم الاحترافيّة — ضوءٌ يسقط على الحرف العلويّ.
   وبلا خطٍّ مرسومٍ كي لا يزاحم حدَّ الترويسة. */
[data-theme="dark"] .sidebar-brand{
  border-bottom:1px solid #232327;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
[data-theme="dark"] .sidebar-foot{ border-top:1px solid #232327; }

/* ══ الروابط ═══════════════════════════════════════════════════════
   ⚠ التحويمُ رماديٌّ لا أزرق: العمودُ صار حياديّاً، وتدرّجٌ سماويٌّ
      عليه يُقرأ بقيّةَ سلّمٍ سابق. */
[data-theme="dark"] .nav-item{ color:#B7BDC6; border-radius:7px; }
[data-theme="dark"] .nav-item:hover{
  background:linear-gradient(to left, rgba(255,255,255,.055), transparent 76%);
  color:#EAECEF;
}

/* ⚠ والنشطُ يُعرَف بشريطٍ جانبيٍّ لا بخلفيّةٍ وحدَها.
   ────────────────────────────────────────────────────────────────
   الخلفيّةُ وحدَها على سطحٍ شبهِ أسودَ تحتاج أن تُفتَّح كثيراً كي تُرى،
   فتصير لطخةً. والشريطُ الرفيعُ يُقرأ من طرف العين ولا يزاحم النصّ —
   وهو ما تفعله أطقمُ ‎VS Code‎ و‎Slack‎ وغيرُها. */
[data-theme="dark"] .nav-item.is-active{
  background:linear-gradient(to left, rgba(255,255,255,.085), transparent 55%);
  color:#EAECEF; font-weight:600;
  box-shadow:inset -2px 0 0 var(--green-500);
}

/* عنوانُ القسم رماديٌّ خافتٌ لا سماويّ — هو فاصلٌ لا رابط */
[data-theme="dark"] .nav-label{ color:#7C838E; opacity:1; }

/* وشريطُ التمرير يتبع السطح */
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb{ background:#2E2E33; }
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb:hover{ background:#3A3A40; }