/* ============================================================================
   Codificah Hub — الهوية الليلية (Night identity)
   ----------------------------------------------------------------------------
   تُحمَّل بعد hub.css و hub-themes.css، ولا تُلمس أيّ منهما. والطريقة: تجاوز
   رموز التصميم (design tokens) نفسها لا قواعد المكوّنات — لأنّ hub.css كلّه
   تقريبًا يقرأ الألوان من الرموز، فتجاوزها يُعيد التلوين **دون أن يُسقط شيئًا**
   (وهو الخطأ الذي وقعتُ فيه حين أعدتُ كتابة طبقة تجاوز عريضة، فسقطت معها
   خلفيّات ونصوص صارت غير مرئيّة).

   والألوان كلّها من الشعار المعتمد:  #00E5FF · #2D7DFF · #7C4DFF · #5FE0FF
   والنصوص سلّمٌ فاتح على داكن، وهو عكس السابق تمامًا: السابق كان نصًّا داكنًا
   على أبيض، وهذا نصًّا فاتحًا على شبه أسود. ولذلك **كلّ نقطة !important هنا
   تُلغي ما قبلها من طبقات hub.css** بـ :root[data-bm] — أعلى في الأولويّة.

   المقاسات محسوبة لا مُقدَّرة (WCAG على خلفيّة #04070C):
     #EAF7FD ≈ 17.0:1 · #9FB6C4 ≈ 8.4:1 · #7DF3FF ≈ 14.6:1 · #00E5FF ≈ 12.2:1
     ونصّ الزرّ #04070C على #00E5FF ≈ 12.8:1
   ========================================================================== */

html[data-bm]:root{
  color-scheme:dark;

  /* ---- الأسطح: أحلك من أن يقرأ «رماديّ»، مع ميل أزرق ---- */
  --ground:#04070C;
  --surface:#0B121A;
  --sand:#070C13;
  --maroon-deep:#02050A;

  /* ---- النصوص: كلّها فاتحة، فكلّ الأسطح داكنة ---- */
  --ink-strong:#EAF7FD;
  --ink:#DCEBF4;
  --ink-muted:#9FB6C4;
  --ink-inverse:#EAF7FD;          /* النصّ فوق الأسطح الأشدّ قتامة (الترويسة) */
  --ink-inverse-muted:#A8C0CE;

  /* ---- ألوان الشعار موزّعة على الرموز القائمة ---- */
  --maroon-700:#00E5FF;           /* اللون الأساسيّ */
  --maroon-800:#2D7DFF;           /* الأزرق */
  --maroon-tint:rgba(0,229,255,.10);
  --gold-100:#7C4DFF;             /* البنفسجيّ */
  --gold-300:#2D7DFF;
  --gold-500:#00E5FF;
  --gold-600:#5FE0FF;
  --gold-700:#A9F2FF;
  --bronze-ink:#7C4DFF;

  /* ---- الخطوط والحدود ---- */
  --border:rgba(0,229,255,.15);
  --border-field:rgba(150,190,210,.38);
  --focus-ring:rgba(0,229,255,.50);

  /* ---- الدلالات ---- */
  --success:#3DDC97; --success-tint:rgba(61,220,151,.12);
  --warning:#FFC46B; --warning-tint:rgba(255,196,107,.12);
  --danger:#FF7A90;  --danger-tint:rgba(255,122,144,.12);

  /* ---- العمق: أسود صافٍ، لا بنّيّ ---- */
  --shadow-ambient:0 1px 2px rgba(0,0,0,.70);
  --shadow-cast:0 2px 6px rgba(0,0,0,.55), 0 34px 90px -30px rgba(0,0,0,.90);

  /* ---- رموز خاصّة بالهوية ---- */
  --bm-cyan:#00E5FF;
  --bm-blue:#2D7DFF;
  --bm-violet:#7C4DFF;
  --bm-ice:#5FE0FF;
  --bm-line:rgba(0,229,255,.15);
  --bm-text:#EAF7FD;
  --bm-text-2:#9FB6C4;
  --bm-text-3:#7E96A6;
  --bm-card:linear-gradient(180deg,rgba(255,255,255,.040),rgba(255,255,255,.010));
  --bm-btn-ink:#04070C;
  --bm-glow:0 0 22px -4px rgba(0,229,255,.55);
  --bm-glow-soft:0 0 0 1px rgba(0,229,255,.18), 0 18px 50px -26px rgba(0,229,255,.55);

  /* ---- سلّم الطباعة: ضرورة لا ذوق -------------------------------------
     في hub.css سطرٌ يقول  html h1{ font-size:var(--s-h1) !important }  و
     --s-h1 معرَّف في site.css **الذي لا تحمّله هذه الصفحات** — فالقيمة غير
     صالحة فيسقط الإعلان، فيأخذ العنوان 16px، وينكمش max-width:20ch إلى نحو
     160px (لأنّه وحدة ch فتُقاس بحجم الخطّ). والقياس كشفه: h1 = 16px وعرضه
     160px. فتُعرَّف الرموز هنا فيُصلَح الأمر من جذره بلا لمس hub.css.
     -------------------------------------------------------------------- */
  --s-h1:clamp(34px,4.9vw,58px);
  /* عنوان الأقسام كان 40px، وعنوان الرئيسيّة 28.5px لأنه بالسطر الواحد ⇒ ظهر
     **انقلابٌ في الهرم**: «ادخل المنصّة» أكبر من عنوان الصفحة. والقيد رياضيٌّ
     (الجملة ٦٩ حرفًا)، فلا سبيل لجعل العنوان الرئيسيّ أكبر إلّا بمدّه على عرض
     الشاشة كلّه. فحُفظ التخطيط وخُفِض عنوان الأقسام ليعود الترتيب صحيحًا. */
  --s-h2:clamp(20px,1.80vw,25px);
  --s-h3:clamp(18px,1.5vw,21px);
  --s-h4:19px;
  --s-body:17px;
  --s-lh:1.75;
}

/* الأوزان: كانت مُسقطة إلى 400 فبدا العنوان كنصّ عاديّ */
html[data-bm]:root h1{ font-weight:700 !important; }
/* كان h2 أثقل من h1 (700 مقابل 600) فبدا عنوان القسم أبرز من عنوان الصفحة،
   مع أنّ حجمه أصغر. فوُحّد الوزن على 600 وليكن الفرق بالحجم وحده. */
html[data-bm]:root h2{ font-weight:600 !important; }
html[data-bm]:root h3{ font-weight:600 !important; }
html[data-bm]:root h4{ font-size:var(--s-h4) !important; font-weight:600 !important; }
/* عنوان الرئيسيّة اقتباسٌ لا شعار — فوزنه أخفّ قليلًا من بقيّة العناوين */
html[data-bm]:root .hm{ font-weight:600 !important; letter-spacing:-.015em !important; }

/* ===== 1) الأساس: الأرضيّة والخطّ الشبكيّ ================================ */
html[data-bm]:root body{
  background-color:var(--ground);
  color:var(--ink);
}

/* Hero: شبكة برمجية خفيفة + هالتان (سماويّة وبنفسجيّة) — بلون واحد شفّاف لا صورة */
html[data-bm]:root .hero{
  background-color:transparent;
  /* أُزيل التلوين من الخلفيّة: لا هالة سماويّة ولا بنفسجيّة. وبقي النسيج
     الشبكيّ لأنّه نسيجٌ لا لون — وأُحيّد لونه (أبيض شفّاف بدل سماويّ) فلم
     يبقَ في الخلفيّة أيّ أثر لونيّ. والوهج صار محصورًا خلف لوح الشعار. */
  background-image:
    linear-gradient(rgba(255,255,255,.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.042) 1px, transparent 1px);
  background-size:66px 66px, 66px 66px;
  background-position:center top, center top;
  border-bottom:1px solid var(--bm-line);
}

/* الأشرطة: فاصل شعريّ سماويّ بدل خلفيّة ثقيلة */
html[data-bm]:root .band{ border-top:1px solid rgba(0,229,255,.09); }
html[data-bm]:root .band--sand{
  background:linear-gradient(180deg,rgba(0,229,255,.035),transparent 42%),#070C13;
}
html[data-bm]:root .band--footer{
  background:linear-gradient(180deg,transparent,#02050A 70%);
  border-top:1px solid var(--bm-line);
}

/* ===== 2) الترويسة ====================================================== */
html[data-bm]:root .hdr{
  background:rgba(4,7,12,.82) !important;
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--bm-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
html[data-bm]:root .hdr .nm{ color:var(--bm-text) !important; letter-spacing:.01em; }
html[data-bm]:root .hdr .sub{ color:var(--bm-text-3) !important; }
html[data-bm]:root .hdr .brand .mk{
  filter:drop-shadow(0 0 7px rgba(0,229,255,.45));
}
html[data-bm]:root .navlink{
  color:var(--bm-text-2) !important;
  position:relative;
}
html[data-bm]:root .navlink:hover,
html[data-bm]:root .navlink[aria-current="page"]{ color:var(--bm-cyan) !important; }
html[data-bm]:root .navlink:hover::after{
  content:""; position:absolute; inset-inline:0; bottom:-6px; height:1px;
  background:linear-gradient(90deg,transparent,var(--bm-cyan),transparent);
}
html[data-bm]:root .lang a{ color:var(--bm-text-2) !important; }
html[data-bm]:root .lang a[aria-current="true"]{
  color:var(--bm-btn-ink) !important;
  background:var(--bm-cyan) !important;
  border-radius:6px;
  padding:.12em .5em;
}
html[data-bm]:root .menu-btn{
  color:var(--bm-text) !important;
  border-color:var(--bm-line) !important;
}
html[data-bm]:root .menu-btn svg path{ stroke:currentColor; }

/* ---- زرّ الدعوة في الترويسة: أُزيل --------------------------------------
   وفي `hub.css` قاعدةٌ قائمة تُخفيه عند 560px بحجّةٍ مكتوبة نصًّا:
     «على الشاشات الصغيرة تقع الدعوة نفسها في الرئيسيّة بعد قليل، فيُخلي زرُّ
      الترويسة مكانًا للعلامة بدل أن يلتفّ.»
   والحجّة **قائمة على كلّ عرض**: الدعوة موجودة في الرئيسيّة (`btn--gold`) وفي
   قسم التواصل (#request) وزرّ واتساب. فمُدّت القاعدة إلى كلّ المقاسات.
   وأُبقي المخزون كما هو (إخفاءٌ لا حذف): أأمنُ من تعديل نصّي، وأسهل رجوعًا،
   وهو الأسلوب الذي اختاره الموقع نفسه لهذا الزرّ بالذات.
   ------------------------------------------------------------------------ */
html[data-bm]:root .hdr .btn--primary{ display:none !important; }

/* ===== 3) الأزرار ======================================================= */
/* زرّ أساسيّ ممتلئ بالسماويّ ونصّه داكن — تباين 12.8:1 */
html[data-bm]:root .btn,
html[data-bm]:root a.btn,
html[data-bm]:root button.btn{
  border-radius:10px;
  letter-spacing:.02em;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background-color .2s;
}
html[data-bm]:root .btn--primary,
html[data-bm]:root .btn--gold{
  /* اللون الصلب قبل التدرّج — لسببين: إن لم يُرسم التدرّج بقي الزرّ سماويًّا
     مقروءًا لا شفّافًا، ولأنّ التعبئة بلونٍ صلب تُقاس (كانت التدرّجات لا
     تُلتقط كخلفيّة فيُظنّ الزرّ داكنًا على داكن). */
  background-color:#00E5FF !important;
  background-image:linear-gradient(135deg,#00E5FF,#5FE0FF) !important;
  color:var(--bm-btn-ink) !important;
  border:0 !important;
  box-shadow:0 0 0 1px rgba(0,229,255,.30), 0 14px 38px -16px rgba(0,229,255,.80) !important;
}
html[data-bm]:root .btn--primary:hover,
html[data-bm]:root .btn--gold:hover{
  box-shadow:0 0 0 1px rgba(0,229,255,.55), 0 18px 48px -14px rgba(0,229,255,.95) !important;
  transform:translateY(-1px);
}
html[data-bm]:root .btn--secondary{
  background:transparent !important;
  color:#7DF3FF !important;
  border:1px solid rgba(0,229,255,.42) !important;
}
html[data-bm]:root .btn--secondary:hover{
  background:rgba(0,229,255,.10) !important;
  border-color:var(--bm-cyan) !important;
}
html[data-bm]:root .btn:focus-visible,
html[data-bm]:root .navlink:focus-visible,
html[data-bm]:root a:focus-visible,
html[data-bm]:root button:focus-visible,
html[data-bm]:root input:focus-visible,
html[data-bm]:root select:focus-visible,
html[data-bm]:root textarea:focus-visible{
  outline:2px solid var(--bm-cyan); outline-offset:3px;
}

/* ===== 4) الرئيسيّة: النصّ والشعار ====================================== */
html[data-bm]:root .hm,
html[data-bm]:root .hm .hm-t{ color:var(--bm-text) !important; }
html[data-bm]:root .hm .hm-q{ color:var(--bm-cyan) !important; opacity:.55; }

/* عنوان الرئيسيّة في سطرٍ واحد — والسبب كان هندسيًّا لا حجمًا.
   القياس: `@media (min-width:1024px){ .hero-in{grid-template-columns:7fr 5fr} }`
   في hub.css ⇒ عمود النصّ 597px فقط (7/12 من 1024). والجملة الإنجليزيّة ٦٩ حرفًا
   تحتاج نحو 895px بحجم 29px. فالسطر الواحد **مستحيل** في عمودٍ عرضه 597px أيًّا
   كان الحجم المتاح: كان يحتاج ~16px — أي بحجم نصّ عاديّ. فالعلاج ليس تصغير
   الخطّ بل **توسيع العمود**: العنوان يصير صفًّا بعرض الحاوية كلّها (1088px).
   وبذلك يعود الحجم معقولًا (33px) ويبقى سطرًا واحدًا.

   والتقنية: `.hero-copy{display:contents}` فتصير عناصره أبناء للشبكة مباشرةً،
   ثم تُوضع صراحةً. فالمخزون (DOM) لا يُلمس — ولذلك تبقى سكربتات الإظهار
   والتسميات تعمل كما هي؛ والحجب الحدّيّ (المظهر فقط) هو ما تغيّر. */
@media (min-width:1024px){
  html[data-bm]:root .hero-in{
    grid-template-columns:7fr 5fr;
    grid-template-rows:auto auto auto auto;
    column-gap:64px; row-gap:22px;
    align-items:start;
  }
  html[data-bm]:root .hero-copy{ display:contents; }
  html[data-bm]:root .hero-copy > .eyebrow { grid-column:1/-1; grid-row:1; }
  html[data-bm]:root .hm                    { grid-column:1/-1; grid-row:2; }
  html[data-bm]:root .hero-copy > .lead     { grid-column:1;    grid-row:3; }
  html[data-bm]:root .hero-copy > .hero-cta { grid-column:1;    grid-row:4; }
  /* الخاتم يبدأ مع الفقرة لا مع العنوان، فلا يزاحم السطر الواحد */
  html[data-bm]:root .hero-in > .seal{
    grid-column:2; grid-row:3/span 2;
    justify-self:center; align-self:start;
  }
  /* الحدّ مقيس بالبحث الثنائيّ لا مُقدَّرًا. المساحة المتاحة للنصّ 1042px
     (1088 ناقص علامتَي الاقتباس 24px والمؤشّر 11px)، وعرض النصّ الطبيعيّ
     (بـ nowrap) 35.6px لكلّ واحد من حجم الخطّ:
        29.5px ← 1050px سطر واحد ✓      30px ← 1067px سطران ✗
     فالسقف 29.5px. والأخذ بـ28.5px يترك هامشًا ~28px فلا ينكسر لو اختلفت
     مقاييس الخطّ قليلًا على جهازٍ آخر. والمعامل 2.42vw يحفظ الهامش عند 1024px
     حيث يضيق العمود إلى 952px (فيهبط الحجم إلى 24.8px تلقائيًّا). */
  html[data-bm]:root .hm{
    max-width:none !important;
    font-size:clamp(19px,2.42vw,28.5px) !important;
  }
}
@media (max-width:1023px){
  html[data-bm]:root .hm{ max-width:none !important; }
}
html[data-bm]:root .hm-caret{ background:var(--bm-cyan); box-shadow:0 0 8px var(--bm-cyan); }
/* طبقة «الضوء» المنزلق — كانت خلفيّة عنّابيّة بلون ذهبيّ، فصارت سماويّة على داكن */
html[data-bm]:root .hm-spot{
  color:var(--bm-cyan) !important;
  background:rgba(3,9,16,.965) !important;
  border-radius:12px;
}
html[data-bm]:root .hm-spot .hm-t2{ color:var(--bm-cyan) !important; }
html[data-bm]:root .lead{ color:var(--bm-text-2) !important; }
html[data-bm]:root .eyebrow{
  color:#7DF3FF !important;
  letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:.5em;
}
/* علامة التعليق `//` بدل الخطّ: علامة كود صغيرة تجعل رؤوس كلّ الأقسام
   («خدماتنا» · «ما نبنيه لك» · وغيرها) تتكلّم اللغة نفسها. والعلامة وحدها
   بالخطّ الأحاديّ المسافة — والنصّ العربيّ يبقى في خطّه (لا حروف عربيّة في
   الخطّ الأحاديّ فكان سيختلّ). */
html[data-bm]:root .eyebrow::before{
  content:"//";
  flex:none;
  font-family:var(--mono);
  font-size:.94em; font-weight:600; letter-spacing:0;
  color:var(--bm-cyan);
  text-shadow:0 0 8px rgba(0,229,255,.55);
}

/* تسمية اللون الرماديّ العامة */
html[data-bm]:root h1,
html[data-bm]:root h2,
html[data-bm]:root h3,
html[data-bm]:root h4{ color:var(--bm-text); }
html[data-bm]:root .small,
html[data-bm]:root .priv{ color:var(--bm-text-3) !important; }

/* ===== 5) لوح الدخول ==================================================== */
/* كان في hub.css:  entrysec أخضر فاتح · entrybar أبيض · والأوّل رماديّ على أخضر
   والثاني أبيض على أبيض — كلّها بـ!important. وهذه أعلى أولويّة فتُلغيها. */
html[data-bm]:root .entrysec{ background:transparent !important; }
/* حاوية القسم: `.entrywrap` بلا أيّ قاعدة في hub.css — قواعده في site.css الذي
   **لا تحمّله هذه الصفحات** (نفس علّة --s-h1). فكان القسم بلا حدّ عرض ولا حاشية،
   ونصّه ملتصق بحافّة الشاشة (قياس: h2.left = 0 مقابل 168 لبقيّة الأقسام).
   فتُكتب قاعدته هنا من الرموز نفسها التي يستعملها .wrap. */
html[data-bm]:root .entrywrap{
  max-width:var(--wrap) !important;
  margin-inline:auto !important;
  padding-inline:var(--gutter) !important;
}
@media (min-width:1024px){
  html[data-bm]:root .entrywrap{ padding-inline:36px !important; }
}
/* ---- سطر الأمر: لغة الطرفيّة بخطٍّ أحاديّ المسافة ومؤشّرٍ يومض -------------
   `direction:ltr` لأنّه سطر كود لا جملة عربيّة. */
html[data-bm]:root .bm-prompt{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 0 12px;
  padding:7px 11px;
  font-family:var(--mono);
  font-size:12.5px; line-height:1; letter-spacing:.05em;
  color:var(--bm-text-3);
  direction:ltr;
  border:1px solid rgba(0,229,255,.18);
  background:rgba(0,229,255,.05);
  border-radius:8px;
}
html[data-bm]:root .bm-prompt__sig{ color:var(--bm-cyan); font-weight:700; }
html[data-bm]:root .bm-caret{
  display:inline-block; width:7px; height:13px;
  background:var(--bm-cyan);
  box-shadow:0 0 9px rgba(0,229,255,.85);
  animation:bmBlink 1.05s step-end infinite;
}
@keyframes bmBlink{ 0%,49.9%{ opacity:1 } 50%,100%{ opacity:0 } }

html[data-bm]:root .entryttl{ color:var(--bm-text) !important; }
html[data-bm]:root .entrysub{ color:var(--bm-text-2) !important; }
/* اسم المنتج داخل الجملة العربيّة: خطّ أحاديّ المسافة وإطار خفيف — علامةً لا نصًّا */
html[data-bm]:root .bm-kbd{
  font-family:var(--mono); font-size:.92em;
  color:var(--bm-ice);
  border:1px solid rgba(0,229,255,.24);
  background:rgba(0,229,255,.07);
  border-radius:6px; padding:1px 6px;
  direction:ltr;
}

/* ---- صفّ الأمر ----------------------------------------------------------
   شبكة بمناطق مسمّاة: الرقم على بداية السطر، والسهم على نهايته، والاسم فوق
   السند — فيُقرأ صفًّا لا سطرًا مزدحمًا. */
/* `.entrylist` بلا قاعدة في hub.css كذلك ⇒ بقيت قيم المتصفّح الافتراضيّة للقائمة:
   **علامات نقطيّة** تظهر خارج كلّ صفّ، و**`padding-inline-start:40px`** فتنزاح
   الصفوف 40px عن عنوانها (قياس: الصفّ 1048px مقابل حاوية 1088px). تُصفَّر هنا —
   والأرقام 01/02/03 تقوم مقام العلامات. */
html[data-bm]:root .entrylist{
  display:grid; gap:10px;
  list-style:none;
  margin:0; padding:0;
}
html[data-bm]:root .entrylist > li{ list-style:none; margin:0; padding:0; }
html[data-bm]:root .entrybar{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"n txt i" "n sub i";
  column-gap:16px; row-gap:3px;
  align-items:center;
  padding:15px 17px;
  background:var(--bm-card),#0B121A !important;
  border:1px solid var(--bm-line) !important;
  border-radius:14px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset !important;
  transition:border-color .22s var(--ease),box-shadow .25s var(--ease),transform .22s var(--ease);
}
/* شريطٌ جانبيّ ينبض عند التمرير */
html[data-bm]:root .entrybar::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:2px;
  background:linear-gradient(180deg,transparent,var(--bm-cyan),transparent);
  opacity:.30; transform:scaleY(.3);
  transition:opacity .28s var(--ease), transform .35s var(--ease);
  pointer-events:none;
}
/* مسحٌ ضوئيّ يمرّ مرّةً واحدة عند التمرير */
html[data-bm]:root .entrybar::after{
  content:""; position:absolute; inset-block:-20%; inset-inline-start:0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.15),transparent);
  opacity:0; transform:translateX(-140%) skewX(-16deg);
  pointer-events:none;
}
html[data-bm]:root .entrybar:hover{
  border-color:rgba(0,229,255,.45) !important;
  box-shadow:0 0 0 1px rgba(0,229,255,.16), 0 20px 46px -28px rgba(0,229,255,.85) !important;
  transform:translateY(-1px);
}
html[data-bm]:root .entrybar:hover::before{ opacity:1; transform:scaleY(1); }
html[data-bm]:root .entrybar:hover::after{ animation:bmSweep .85s var(--ease) 1; }
@keyframes bmSweep{
  0%{ opacity:0; transform:translateX(-140%) skewX(-16deg) }
  25%{ opacity:1 }
  100%{ opacity:0; transform:translateX(340%) skewX(-16deg) }
}
html[data-bm]:root .entrybar:focus-visible{ outline:2px solid var(--bm-cyan); outline-offset:3px; }

/* رقم المنفذ */
html[data-bm]:root .entrybar__n{
  grid-area:n;
  font-family:var(--mono);
  font-size:12px; font-weight:600; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--bm-cyan);
  min-width:36px; text-align:center;
  padding:6px 7px;
  border:1px solid rgba(0,229,255,.30);
  background:rgba(0,229,255,.06);
  border-radius:8px;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), box-shadow .25s var(--ease);
}
html[data-bm]:root .entrybar:hover .entrybar__n{
  background:var(--bm-cyan); color:var(--bm-btn-ink);
  border-color:var(--bm-cyan);
  box-shadow:0 0 18px -4px rgba(0,229,255,.9);
}
html[data-bm]:root .entrybar__t{
  grid-area:txt;
  color:var(--bm-text) !important;
  font-size:17px; font-weight:600; line-height:1.4;
}
html[data-bm]:root .entrybar__d{
  grid-area:sub;
  color:var(--bm-text-2) !important;
  font-size:13.5px; line-height:1.5;
}
html[data-bm]:root .entrybar__i{
  grid-area:i;
  color:var(--bm-cyan) !important;
  font-family:var(--mono); font-size:17px; line-height:1;
  width:36px; height:36px;
  display:grid; place-items:center;
  border:1px solid rgba(0,229,255,.22);
  border-radius:10px;
  transition:transform .28s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
html[data-bm]:root .entrybar:hover .entrybar__i{
  transform:translateX(-4px);
  background:rgba(0,229,255,.10);
  border-color:rgba(0,229,255,.55);
}
html[data-bm]:root .entrybar--main{
  background:linear-gradient(135deg,rgba(0,229,255,.17),rgba(45,125,255,.11)),#0B121A !important;
  border-color:rgba(0,229,255,.55) !important;
  box-shadow:0 0 0 1px rgba(0,229,255,.14), 0 22px 56px -30px rgba(0,229,255,.90) !important;
}
html[data-bm]:root .entrybar--main .entrybar__t{ color:#FFFFFF !important; }
html[data-bm]:root .entrybar--main .entrybar__d{ color:#CFF3FB !important; }
html[data-bm]:root .entrybar--main .entrybar__i{ color:var(--bm-cyan) !important; }
html[data-bm]:root .entrybar--main .entrybar__n{ background:rgba(0,229,255,.16); }

/* ===== 6) البطاقات والخطوات ============================================= */
html[data-bm]:root .card{
  background:var(--bm-card),#0B121A !important;
  border:1px solid var(--bm-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,
             0 26px 64px -34px rgba(0,0,0,.95) !important;
  transition:border-color .24s var(--ease),box-shadow .28s var(--ease),transform .24s var(--ease);
}
html[data-bm]:root .card:hover{
  border-color:rgba(0,229,255,.42) !important;
  box-shadow:0 0 0 1px rgba(0,229,255,.14),
             0 0 44px -12px rgba(0,229,255,.45) !important;
  transform:translateY(-2px);
}
html[data-bm]:root .card h3{ color:var(--bm-text) !important; }
html[data-bm]:root .card p{ color:var(--bm-text-2) !important; }
html[data-bm]:root .ico{
  color:var(--bm-cyan) !important;
  background:rgba(0,229,255,.09) !important;
  border:1px solid rgba(0,229,255,.22) !important;
}
html[data-bm]:root .ico svg{ stroke:var(--bm-cyan); }
html[data-bm]:root .step-idx{
  color:var(--bm-btn-ink) !important;
  background:var(--bm-cyan) !important;
  box-shadow:0 0 18px -4px rgba(0,229,255,.75);
}
html[data-bm]:root .step h3{ color:var(--bm-text) !important; }
html[data-bm]:root .step p{ color:var(--bm-text-2) !important; }
html[data-bm]:root .works-note,
html[data-bm]:root .svc-note{ color:var(--bm-text-3) !important; }

/* ===== 7) النماذج ======================================================= */
html[data-bm]:root .plate{
  background:var(--bm-card),#0B121A !important;
  border:1px solid var(--bm-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,
             0 30px 80px -40px rgba(0,0,0,.95) !important;
}
html[data-bm]:root label{ color:var(--bm-text-2) !important; }
html[data-bm]:root input,
html[data-bm]:root textarea{
  background-color:#0D1620 !important;
  color:var(--bm-text) !important;
  border:1px solid rgba(150,190,210,.34) !important;
}
html[data-bm]:root input::placeholder,
html[data-bm]:root textarea::placeholder{ color:#7E96A6 !important; }
html[data-bm]:root input:focus,
html[data-bm]:root textarea:focus{
  border-color:var(--bm-cyan) !important;
  box-shadow:0 0 0 3px rgba(0,229,255,.20) !important;
}
/* select يحمل سهمًا مرسومًا بـbackground-image — فلا نلمس background بالاختصار */
html[data-bm]:root select{
  background-color:#0D1620 !important;
  color:var(--bm-text) !important;
  border:1px solid rgba(150,190,210,.34) !important;
}
html[data-bm]:root select option{ background:#0D1620; color:var(--bm-text); }
html[data-bm]:root select:focus{
  border-color:var(--bm-cyan) !important;
  box-shadow:0 0 0 3px rgba(0,229,255,.20) !important;
}
html[data-bm]:root .banner{ color:var(--bm-text-2) !important; }

/* ===== 8) التذييل ====================================================== */
html[data-bm]:root .f-nm{ color:var(--bm-text) !important; }
html[data-bm]:root .f-sub{ color:var(--bm-text-3) !important; }
html[data-bm]:root .f-plate{
  background:transparent !important;
  filter:drop-shadow(0 0 8px rgba(0,229,255,.40));
}
html[data-bm]:root .about{ color:var(--bm-text-2) !important; }
html[data-bm]:root .f-links a{ color:var(--bm-text-2) !important; }
html[data-bm]:root .f-links a:hover{ color:var(--bm-cyan) !important; }
html[data-bm]:root .copy{ color:var(--bm-text-3) !important; }

/* ===== 9) الشعار المتحرّك — عاريةً بلا نافذة ============================
   أُزيلت النافذة: شريطها ونقاطها واسم ملفّها، وأُزيل جسمها وحدّها وظلّ صندوقها.
   والشعار يطفو الآن على الحقل الداكن مباشرةً — وهذا ما صُمِّم له ملفّه الأصليّ:
   `background: transparent`، والتوهّج من **المحارف نفسها** (text-shadow في الملفّ
   المعتمد) لا من صندوقٍ حولها. فالوهج باقٍ لأنّه من الحروف، والمحيط خالٍ تمامًا:
   لا خلفيّة ولا حدّ ولا ظلّ. ولهذا أُزيلت النافذة أصلًا: هي التي كانت تفرض حدّ
   عرضٍ وحجمًا أقصى وتشوّهًا في العرض — والعلامة لا تحتاجها.
   ---------------------------------------------------------------------- */
html[data-bm]:root .bm-mark{
  width:100%;
  min-height:186px;
  margin-inline:auto;
  display:grid;
  place-items:center;
  background:none;
  border:0;
  box-shadow:none;
  padding:0;
}
/* في الصفحة العربيّة يبقى الشعار لاتينيًّا (هو علامة لا كلمة) — والاتجاه LTR */
html[data-bm]:root .bm-mark barmejli-logo{ direction:ltr; }

/* احتياط: إن تعطّل الجافاسكربت أو لم يُعرَّف العنصر بعد، يظهر الشعار ساكنًا
   بدل صندوق فارغ. ولوح الظلّ يحلّ محلّه بمجرّد التعريف. */
html[data-bm]:root barmejli-logo .bm-fallback{
  display:block; text-align:center; direction:ltr;
  color:#00E5FF; font-weight:700; letter-spacing:.03em;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  font-size:40px; line-height:1.1;
  text-shadow:0 0 8px rgba(0,229,255,.55),0 0 20px rgba(0,229,255,.22);
}
html[data-bm]:root barmejli-logo[size="sm"] .bm-fallback{ font-size:24px; }
html[data-bm]:root barmejli-logo:defined .bm-fallback{ display:none; }

/* ===== 10) الخاتم والوسائط والتفاصيل ==================================== */
html[data-bm]:root .seal{ background:transparent !important; }
/* كان .seal يتقلّص إلى عرض محتواه (قِيس 253px) لأنّ .hero-in عمودٌ واحد و
   justify-self:center. فصار يأخذ عرضًا معلومًا، فيتنفّس لوح الشعار. */
html[data-bm]:root .seal{ width:100%; max-width:min(440px,100%); }
html[data-bm]:root .portrait{ width:100% !important; max-width:440px !important; margin-inline:auto !important; }

/* النصف الدائرة: سببه عنصران مرسومان خلف اللوح في hub.css لا واحد:
     .portrait::before  شكلٌ بيضيّ بتدرّج (كان عاجيًّا دافئًا)
     .portrait::after   **دائرةٌ بحدّين ظاهرين وحدّين شفّافين، مُدارة -26deg**
                        بلون var(--gold-300) — وهذا هو القوس الظاهر بالضبط.
   أوّلًا أزلتُ ::before وحده فبقي القوس؛ والقياس أظهره فكُشِف ::after. أُزيلا
   معًا: فلا شكل خلف اللوح ولا تلوين، ويبقى الوهج الخارج من اللوح نفسه. */
html[data-bm]:root .portrait::before,
html[data-bm]:root .portrait::after{ display:none !important; content:none !important; }
html[data-bm]:root .portrait-fig{ filter:none !important; }
html[data-bm]:root .portrait figcaption{ color:var(--bm-text-2) !important; }
html[data-bm]:root .p-name{ color:var(--bm-text) !important; }
html[data-bm]:root .p-role{ color:var(--bm-text-3) !important; }
html[data-bm]:root .skip{
  background:var(--bm-cyan) !important; color:var(--bm-btn-ink) !important;
}
html[data-bm]:root .rail,
html[data-bm]:root .works{ border-color:var(--bm-line) !important; }
html[data-bm]:root .quote,
html[data-bm]:root .quotes{ color:var(--bm-text-2) !important; }
html[data-bm]:root .skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(0,229,255,.08),rgba(255,255,255,.04)) !important;
}

/* شريط التمرير — كان فاتحًا لأنّ الصفحة كانت فاتحة */
html[data-bm]:root *::-webkit-scrollbar-thumb{
  background:rgba(0,229,255,.28) !important;
  border-color:transparent !important;
}
html[data-bm]:root *::-webkit-scrollbar-thumb:hover{ background:rgba(0,229,255,.50) !important; }
html[data-bm]:root ::selection{ background:rgba(0,229,255,.30); color:#fff; }

/* ===== خاتم التوثيق العائم (مركز الأعمال السعوديّ) ======================
   **أوّلًا: تصحيح خطأ سابق.** سكربت الجهة (eauthenticate.saudibusiness.gov.sa)
   يحقن عنصرين **شقيقين** لا والدًا وابنًا:
       div.sbc-verify-seal    — فارغ: 1425×7px، غير مرئيّ
       iframe.sbc-seal-frame  — وهو **المرئيّ فعلًا**: 120×43، مثبَّت أسفل-يسار
   وأنماطي السابقة وقعت على الـdiv الفارغ، فأنشأت **شريطًا داكنًا عابرًا بعرض
   الصفحة** عند سطر الحقوق. أُزيل.

   **ثانيًا: الحوافّ البيضاء.** الوسام مستندٌ من أصلٍ مختلف لا يُقرأ ولا يُعدَّل،
   فقِيس بكسليًّا: قُصّ اللوح (720×260 بكسل = 120×43.3 CSS ⇒ مقياس 6×) ووُجدت
   حبّة «متجر موثق» الكحليّة **118×41.3 CSS** بإزاحة **أعلى ٠ · يمين ٠ ·
   أسفل ٢ · يسار ٢**. والتشريح يُثبت استدارة كاملة (عند أوّل سطر يمتدّ 128..603،
   وفي الوسط 12..719). ⇒ فالفاتح الظاهر هو **خلفيّة المستند حول الحبّة وفي
   زواياها**. والعلاج الوحيد المتاح **قصّ الـiframe على شكل الحبّة**، فيبقى من
   المستند الحبّة الكحليّة وحدها — وهي بلون سطح الصفحة فلا تنافر.

   القصّ بـ`inset(2px)`: أصغر من اللوح في البُعدين معًا ⇒ لا يمكن أن تبقى شعرة
   فاتح؛ ويَقصّ ‎≤2px من أعلى الحبّة ويمينها (لا محتوى هناك) فلا يُرى.
   ---------------------------------------------------------------------- */
html[data-bm]:root .sbc-verify-seal{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
html[data-bm]:root iframe.sbc-seal-frame{
  background:transparent !important;
  border:0 !important;
  clip-path:inset(2px round 999px) !important;
}
/* الموضع يتبع اتّجاه اللغة. والمنطق: في **العربيّة** الركن السفليّ الأيسر هو
   **نهاية السطر** — وسطر الحقوق محاذًى لليمين — فلا تصادم، فيبقى كما هو.
   وفي **اللاتينيّة** هو **بداية السطر** حيث يبدأ نصّ الحقوق ⇒ يُنقل إلى اليمين
   حيث لا نصّ. والنقل بـ`transform` لا بـ`left/right`: الجهة تضبط موضعها
   بأسلوبٍ داخليّ لا تُغلبه ورقة الأنماط (قِيس: ظهر اليمين أوّلًا ثم ارتدّ إلى
   اليسار)، و`transform` غير مستعمل عندها (قِيس: none) ⇒ به يثبت النقل. */
/* ومحدِّد `[lang="en"]` **لا يصلح** هنا: قِيس أنّ متـرجِم كروم عند تفعيله يكتب
   `html lang="ar"` على الصفحة الإنجليزيّة (ويضيف `translated-rtl`)، فيسقط
   المحدِّد ويبقى الخاتم يسارًا. فالمعيار ليس اللغة بل **الاتّجاه الفعليّ** —
   وهو أيضًا **الأصحّ معنويًّا**: المطلوب ألّا يغطّي الخاتم النصّ، وبداية النصّ
   تتبع الاتّجاه لا اللغة. فإن صارت الصفحة الإنجليزيّة RTL (بالترجمة) صار نصّ
   الحقوق يبدأ من اليمين، فوضع الخاتم يسارًا هو الصحيح — و`:dir()` يتبعه. */
html[data-bm][dir="ltr"]:root iframe.sbc-seal-frame{
  transform:translateX(calc(100vw - 100% - 54px)) !important;
}
/* أدقّ: يقرأ الاتّجاه المحسوب لحظةً بلحظة. ومكتوب في قاعدةٍ مستقلّة لا في قائمة،
   لأنّ قائمةً فيها محدِّد غير مدعوم تُسقط القاعدة كلّها. */
html:dir(ltr) iframe.sbc-seal-frame{
  transform:translateX(calc(100vw - 100% - 54px)) !important;
}

/* ===== 11) الصفحة الإنجليزيّة: اللمسة البرمجيّة في الطباعة ============= */
/* العربي لا يحتمل خطًّا أحاديّ المسافة (لا حروف عربيّة فيه) — فللاتيني وحده.
   وقد جُرِّب على العنوان أوّلًا فرجع ضعيفًا مُزدحمًا (قِيس: 16px وأسطر قصيرة)
   لأنّ الخطّ الأحاديّ أعرض من غيره في الأسطر الطويلة. فاللمسة البرمجيّة بقيت
   على التسميات الصغيرة والرموز — حيث تُقرأ ولا تُتعب. */
html[data-bm][lang="en"]:root .eyebrow{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.10em;
}

/* ===== 11-ب) مُقدِّم خطوات «كيف نعمل» ===================================
   تبديل **التركيز** لا إخفاء المحتوى: الحيّة بكاملها والبقيّة خافتة. والحالة
   الحيّة تُضاف من `barmejli-steps.js` وحده — فإن تعطّل بقي كلّ شيء ظاهرًا
   بكامل تباينه، وهي القاعدة نفسها التي حكمت السجلّ (لا محتوى وراء حركة).
   ---------------------------------------------------------------------- */
/* الخفتان **محسوب ومُختبَر لا مُقدَّر**. أوّلًا اخترتُ 0.30 ثم رفعتُه إلى 0.55
   بالحساب — ثم **كشف القياس الحيّ أنّه ما زال يفشل**: الفقرة الخافتة تقيس
   3.46:1 لأنّ لونها الفعليّ رماديّ (#9FB6C4) لا الفاتح الذي حسبتُه ⇒ أقلّ من
   4.5 المطلوبة. والحدّ الذي يمرّ فعلًا لذلك الرمادي هو 0.66. فصار **0.70**
   (العنوان 9.03 والنصّ 5.06) — فيخفت بلا أن يُفقد. ودُرِّك التمييز بدل الخفتان:
   الرقاقة تمتلئ وتكبر ويتوهّج حولها، ويظهر مؤشّر وميض بعد العنوان. */
html[data-bm]:root .rail.bm-live .step{
  opacity:.70;
  transform:translateY(3px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
html[data-bm]:root .rail.bm-live .step[data-on]{ opacity:1; transform:none; }
/* أثناء مسح الإعادة: الرقاقة وحدها تخفت وتصغر — ولا يخفت النصّ أكثر */
html[data-bm]:root .rail.bm-scan .step-idx{ transform:scale(.94); opacity:.55; }

/* الرقم: زرّ حقيقيّ — يمتلئ ويهتزّ قليلًا حين تكون خطوته هي الجارية */
html[data-bm]:root .rail.bm-live .step-idx{
  cursor:pointer;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), box-shadow .45s var(--ease),
             transform .45s var(--ease);
}
html[data-bm]:root .rail.bm-live .step-idx:hover{ border-color:rgba(0,229,255,.70); }
html[data-bm]:root .rail.bm-live .step-idx:focus-visible{
  outline:2px solid var(--bm-cyan); outline-offset:4px;
}
html[data-bm]:root .rail.bm-live .step[data-on] .step-idx{
  background:var(--bm-cyan); color:var(--bm-btn-ink);
  border-color:var(--bm-cyan);
  transform:scale(1.10);
  box-shadow:0 0 0 4px rgba(0,229,255,.13), 0 0 26px -4px rgba(0,229,255,.95);
}
html[data-bm]:root .rail.bm-scan .step-idx{ transform:scale(.94); }

/* والتمييز **باللون لا بمزيد من الخفتان** — لأنّ مساحة الخفتان استُهلكت في
   شرط التباين (0.70 هو أقصى ما يمكن). فالظهور وحده فرقٌ ضعيف، والقياس البصريّ
   قال إنّ الخافتة تكاد تساوي النشطة. فصار عنوان الخطوة الجارية **سماويًّا
   صافيًا** (#00E5FF) — وهو 12.2:1 أي يمرّ AA بامتياز — فيُقرأ موضع الخطوة من
   طرف الصفحة. و**النصّ** الطويل يبقى فاتحًا (9.57:1) لأنّ السماويّ على سطور
   متعدّدة مُتعب للعين. */
html[data-bm]:root .rail.bm-live .step h3,
html[data-bm]:root .rail.bm-live .step p{ opacity:1; }
html[data-bm]:root .rail.bm-live .step[data-on] h3{ color:var(--bm-cyan) !important; }

/* مؤشّر «الخطوة الجارية»: شرطةٌ تومض بعد العنوان — علامة كود صغيرة، ولا تمسّ
   تباين النصّ (عنصر زخرفيّ لا نصّ). */
html[data-bm]:root .rail.bm-live .step[data-on] h3::after{
  content:""; display:inline-block;
  width:.45ch; height:.82em; margin-inline-start:.42ch; vertical-align:-.06em;
  background:var(--bm-cyan);
  box-shadow:0 0 9px rgba(0,229,255,.9);
  animation:bmBlink 1.05s step-end infinite;
}

/* وعلى الشاشات الواسعة يمتدّ خطّ وصلٍ بين الأرقام في `hub.css` (`.rail::before`).
   فُتِّش في البداية عن ملئه بالتقدّم، **ثم أُلغي**: الخطّ يبدأ عند 6٪ من العرض
   والأرقام عند ~2٪ و28٪ و53٪ و79٪ (لأنّها في بداية كلّ عمود لا في وسطه)، فلا
   يمكن أن يتوافق الامتلاء مع موضع الرقم — والقياس الحيّ رصد فعلًا «شرطةً شاردة»
   غير متزامنة. فبقي الخطّ فاصلًا زخرفيًّا هادئًا، والتمييز على الرقاقة والنصّ. */
@media (min-width:1024px){
  html[data-bm]:root .rail.bm-live::before{
    background:linear-gradient(90deg, rgba(0,229,255,.20), rgba(45,125,255,.20)) !important;
  }
  html[data-bm]:root .rail.bm-live .step-idx{ z-index:2; }
}

/* شريط الزمن: يمتلئ خلال المهلة الحقيقيّة — ٤٫٤ ثانية تلقائيًّا، و١٢ ثانية
   إن كان المستخدم قد ضغط رقمًا. فالشريط نفسه يُظهر للمستخدم أنّ له مهلة أطول.
   ومدة الحركة تُضبط من الجافاسكربت في `--bm-tick-dur`. */
html[data-bm]:root .bm-tick{
  position:absolute; inset-inline:0; inset-block-end:-14px; height:2px;
  border-radius:2px; overflow:hidden; pointer-events:none;
  background:rgba(0,229,255,.14);
}
html[data-bm]:root .bm-tick::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--bm-cyan), #5FE0FF);
  box-shadow:0 0 10px rgba(0,229,255,.85);
  transform:scaleX(0);
  transform-origin:center center;
}
html[data-bm]:root .rail.bm-live .step[data-on] .bm-tick::before{
  animation:bmStepTick var(--bm-tick-dur,4400ms) linear forwards;
}
@keyframes bmStepTick{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
/* في مسح الإعادة يظهر الشريط كاملًا خافتًا — كأنّ الخطوة «أُنجزت» */
html[data-bm]:root .rail.bm-scan .bm-tick::before{
  animation:none !important;
  transform:scaleX(1);
  opacity:.55;
  background:linear-gradient(90deg, rgba(0,229,255,.55), rgba(45,125,255,.55));
  box-shadow:none;
}

/* ===== 12) حركة التقليل ================================================ */
@media (prefers-reduced-motion:reduce){
  html[data-bm]:root .card,
  html[data-bm]:root .entrybar,
  html[data-bm]:root .btn{ transition:none !important; transform:none !important; }
  html[data-bm]:root .card:hover,
  html[data-bm]:root .entrybar:hover,
  html[data-bm]:root .btn--primary:hover,
  html[data-bm]:root .btn--gold:hover{ transform:none !important; }
  /* لا مسح ضوئيّ ولا وميض مؤشّر عند طلب تقليل الحركة */
  html[data-bm]:root .entrybar:hover::after{ animation:none !important; opacity:0 !important; }
  html[data-bm]:root .bm-caret{ animation:none !important; }
  html[data-bm]:root .entrybar:hover .entrybar__i{ transform:none !important; }
  /* ومُقدِّم الخطوات: لا خفتان ولا شريط زمن — كلّ الخطوات بكامل ظهورها،
     ويبقى التمييز بلون الحبّة وحدها. والتنقّل بالضغط يبقى عاملًا. */
  html[data-bm]:root .rail.bm-live .step,
  html[data-bm]:root .rail.bm-live .step-idx,
  html[data-bm]:root .rail.bm-live .step h3,
  html[data-bm]:root .rail.bm-live .step p{ transition:none !important; }
  html[data-bm]:root .rail.bm-live .step{ opacity:1 !important; transform:none !important; }
  html[data-bm]:root .rail.bm-live .step[data-on] .step-idx{ transform:none !important; }
  html[data-bm]:root .rail.bm-live .bm-tick{ display:none !important; }
  html[data-bm]:root .rail.bm-live .step[data-on] h3::after{ animation:none !important; }
}

/* ===== 13) الجوال ====================================================== */
@media (max-width:640px){
  html[data-bm]:root .hero{ background-size:auto,auto,44px 44px,44px 44px; }
  html[data-bm]:root .bm-mark{ min-height:150px; }
  /* صفّ الأمر يضيق: تُقلَّص الفواصل والأحجام والأرقام */
  html[data-bm]:root .entrybar{ column-gap:11px; row-gap:2px; padding:13px 13px; }
  html[data-bm]:root .entrybar__n{ min-width:30px; font-size:11px; padding:5px 5px; }
  html[data-bm]:root .entrybar__t{ font-size:16px; }
  html[data-bm]:root .entrybar__d{ font-size:13px; }
  html[data-bm]:root .entrybar__i{ width:31px; height:31px; font-size:15px; }
  html[data-bm]:root .bm-prompt{ font-size:11.5px; padding:6px 9px; }
}