@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;
  --amber-200:#fde3af;   /* الحدود */
  --amber-100:#fef2dc;   /* التلوين */

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

  /* إطار تبويبات الأسواق — انظر .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;
  --mono:"Consolas","SFMono-Regular","Courier New",monospace;

  --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;
  --amber-200:#4a3410;
  --amber-100:#2e2109;

  --ink:#eaecef;
  --ink-2:#b7bdc6;
  --muted:#848e9c;
  --muted-2:#5e6673;
  --line:#2b3139;
  --line-2:#222630;
  --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}

.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}
.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-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}
/* زرّ القوالب أسفل القائمة: خارج منطقة التمرير كي يبقى في المتناول */
.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;
}
.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}
.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);
}

/* شريط مدى اليوم: أين السعر بين قاع اليوم وقمّته — يُقرأ بلمحة */
.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}

/* ── بلوك الشرط ─────────────────────────────────────────────────
   البلوك وحدة قائمة بذاتها: حقل وعامل وقيمة وإطار ومعاملات. وحدّه
   الملوّن على الحافة يميّز شرط السوق (فوري) من شرط المؤشر (يحتاج
   شموعاً) — والفرق ليس تجميلياً: الثاني أبطأ ومحدود العدد. */
.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}

/* النصّ الكامل أو نقاطٌ صريحة — لا قصٌّ صامت عند الحافة */
.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;
}

/* لوحة تعديل البوت داخل بطاقته */
.bot-edit{
  border-top:1px solid var(--line);
  background:var(--surface-2);
  padding:var(--sp-4);
  display:grid;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-apply{
  width:100%;justify-content:center;
  margin-top:var(--sp-2);font-weight:700;
}

/* كتلة حماية الصفقة في نافذة البوت */
.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}

.scr-block-body{
  display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1fr);
  gap:var(--sp-2);padding:var(--sp-3);
}
.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}
.scr-param{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.scr-param .input{width:74px;padding:4px 8px;font-size:12px;font-family:var(--mono);direction:ltr}

/* مفتاح التعطيل */
.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}

/* ========================================================================
   المفضّلة — البحث وقائمته
   ======================================================================== */
.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-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}
table.tbl td.num{text-align:end}          /* ltr ⇒ اليمين الفعلي */
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}

.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: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}

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-inline-start: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}
}