/* ==== styles/app.css ==== */
/* ============================================================
   QXD4 — أنماط الشاشات الجديدة.

   من عالم «المجلّة» نفسه لا من عالمٍ ثانٍ: نفس الذهب ونفس الكريم ونفس
   الحروف ونفس التسارع. شاشةٌ تبدو من تطبيقٍ آخر تكسر الوهم الذي بُني
   البيتُ كلّه لأجله.

   ‎inset‎ ممنوعة (تسقط صامتةً على كروم ٣٨ — والبناء يرفض الملفّ إن وُجدت).
   ‎@container‎ ممنوعة هنا: هذه الشاشات مقصودةٌ للتلفزيون في P7 أيضاً،
   و‎@media‎ يكفيها.
   ============================================================ */

#qxd4-root {
  --gold: #c9a661;
  --cream: #f2e2b8;
  /* أسودٌ عاتم لا رماديّ — نفس أرضيّة القشرة المستقلّة (‎web/shell.html‎:
     #050505) لا لونٌ ثانٍ يُقارَن بها. السابق ‎#0b0d0f‎ كان يُقرأ رصاصيّاً
     على الفراغات الكبيرة (بلاغ مالكٍ حقيقيّ 2026-08-25) — أزرقُ الصبغة
     قليلاً مهما بدا محايداً بجانب النصّ. ⚠ أي تغييرٍ لهذه القيمة مستقبلاً
     يلزمه تحديث كل ‎rgba(5,5,5,…)‎ الحرفيّة أدناه بالتوازي — الاثنان بلا
     صلةٍ تلقائيّة، وإلا ظهر خيطٌ عند كل تدرّجٍ يبدأ بالمتغيّر وينتهي
     برقمٍ لا يطابقه. */
  --ink: #050505;
  --spill: #c9a661;
  --e: cubic-bezier(.22,.61,.36,1);
  --t2: 180ms;
  --t3: 360ms;
  color: #e8dfd0;
  font-family: 'Tajawal', 'SF Arabic', system-ui, sans-serif;
  direction: rtl;
}
#qxd4-root *, #qxd4-root *::before, #qxd4-root *::after { box-sizing: border-box; }
#qxd4-root img { display: block; max-width: 100%; }
#qxd4-root button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#qxd4-root h1, #qxd4-root h2, #qxd4-root h3, #qxd4-root p, #qxd4-root figure { margin: 0; }

/* ---- فخّ الخصوصيّة ----
   التصفير أعلاه محدَّدٌ بمعرّف (‎1,0,1‎)، فيهزم أي صنفٍ مجرّد (‎0,1,0‎).
   وقع هذا فعلاً: ‎.qd-play‎ — أهمّ زرٍّ في الصفحة — كان يُرسم شفّافاً لأن
   ‎background:none‎ يغلبه، ولا يظهر ذلك في أي فحصٍ منطقيّ: الزرّ موجودٌ
   ويعمل، لكنّه غير مرئيّ. فكلّ زرٍّ يُلوَّن يُسبَق بالمعرّف.
   والفحص الذي يمنع عودته في ‎harness/shell-harness.html‎. */

#qxd4-root .qd-play {
  background: var(--cream); color: #14161a;
}
#qxd4-root .qd-play:hover { background: #fff; }
#qxd4-root .qd-icon,
#qxd4-root .qd-btn { border: 1px solid rgba(232,223,208,.24); }
#qxd4-root .qd-icon.on { border-color: var(--gold); }
#qxd4-root .qd-btn { border-color: rgba(201,166,97,.4); }
#qxd4-root .qd-tab.on { border: 1px solid rgba(201,166,97,.36); }
#qxd4-root .qd-back { background: rgba(5,5,5,.5); }
#qxd4-root .qd-back:hover { background: rgba(5,5,5,.8); }

/* ---- الاتّجاه ----
   المكتبة ثنائيّة اللغة: عنوانٌ إنجليزيّ وقصّةٌ عربيّة في الصفحة نفسها.
   ‎rtl‎ ثابتٌ يرمي نقطة الجملة الإنجليزيّة إلى يسارها ويكسر الأقواس.
   ‎plaintext‎ يجعل كل فقرةٍ تأخذ اتّجاهها من أوّل حرفٍ قويّ فيها — فيصحّ
   الاثنان بلا وسمٍ لغويّ ولا كشفٍ في JS. */
#qxd4-root .qd-title,
#qxd4-root .qd-tag,
#qxd4-root .qd-over,
#qxd4-root .qd-ep-txt h3,
#qxd4-root .qd-ep-txt p,
#qxd4-root figcaption {
  unicode-bidi: plaintext;
}

/* لكن ‎plaintext‎ ينقل **المحاذاة** مع الاتّجاه: عنوانٌ إنجليزيّ يقفز إلى
   اليسار بينما الشارات والأزرار والبيانات كلّها على اليمين، فينكسر عمود
   الرأس. الترقيم شيء والمحاذاة شيء — تُثبَّت المحاذاة صراحةً فيبقى للصفحة
   حافّةٌ واحدة أيّاً كانت لغة العنوان. */
#qxd4-root .qd-title,
#qxd4-root .qd-tag,
#qxd4-root .qd-ep-txt h3 { text-align: right; }

/* ---- الانتظار ---- */
.qd-wait { display: flex; align-items: center; justify-content: center; height: 60vh; }
.qd-wait.sm { height: 120px; }
.qd-wait i {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(232,223,208,.14); border-top-color: rgba(232,223,208,.5);
  animation: qd-spin 1s linear infinite;
}
@keyframes qd-spin { to { transform: rotate(360deg); } }

.qd-oops { padding: 22vh 24px; text-align: center; color: rgba(232,223,208,.6); }
.qd-oops p { margin-bottom: 18px; }
.qd-btn {
  padding: 9px 22px; border: 1px solid rgba(201,166,97,.4);
  border-radius: 2px; color: var(--gold); font-size: 14px;
}

/* ============================================================
   الرأس
   ============================================================ */
/* ---- الصفحة تملك أرضها ----
   كانت شفّافة، فما تحت الرأس هو **خلفيّة جِلِّي‌فِن العامّة** (الكاتدرائيّة):
   صورةٌ تنتهي عند حدٍّ أفقيّ حادّ وتبدأ عندها صورةٌ أخرى لا علاقة لها بالفيلم.
   هذا هو «الخلفيّة غير مدموجة» — وهو ليس تدرّجاً ناقصاً بل **صورتان**.
   فالصفحة الآن تفرش أرضها بنفسها، ثم تُذيب خلفيّة الفيلم فيها. */
/* حبرٌ مسطّح، لا تدرّج. جرّبتُ تدرّجاً ينزل من ‎#10141a‎ إلى الحبر فظهر
   **حدٌّ جديد** مكان القديم: قاع الرأس حبرٌ خالص وأعلى الجسم أفتح منه،
   فبدا شريطٌ أفقيّ عند الوصل. أرضٌ واحدة لا تُرى، والعمق كلّه من طبقات
   الرأس فوقها. */
.qd {
  position: relative; min-height: 100%; padding-bottom: 60px;
  background: var(--ink);
}

.qd-hero {
  position: relative; min-height: 68vh; display: flex; align-items: flex-end;
  /* أرضٌ سالبة: الجسم يصعد داخل ذيل الرأس فلا يبقى بينهما خطّ */
  margin-bottom: -40px; padding-bottom: 40px;
}
@media (max-width: 700px) { .qd-hero { min-height: 76vh; } }

/* ---- الذوبان، لا القطع ----
   الخلفيّة تُقنَّع نزولاً فتتلاشى في أرض الصفحة بدل أن تنتهي عند حافّة.
   القناع على الصورة نفسها لا على حاجبٍ فوقها: الحاجب يُسوِّد فيُظلم
   الوجهُ في الأعلى ليختفي الحدّ في الأسفل، والقناع يُخفي بلا تسويد. */
.qd-bd {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover; background-position: center 16%;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 44%, rgba(0,0,0,.55) 72%,
    rgba(0,0,0,.16) 89%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 44%, rgba(0,0,0,.55) 72%,
    rgba(0,0,0,.16) 89%, rgba(0,0,0,0) 100%);
}
/* كروم ٣٨ لا يعرف ‎mask-image‎ فيبقى الحدّ حادّاً — وهناك يتولّى الحاجب
   وحده الأمر، وهو أضعف لكنّه ليس عطباً. */

/* حاجبان: رأسيٌّ يُخرج النصّ من الصورة، وجانبيٌّ يمنع ضياع الحرف على
   خلفيّةٍ فاتحة. الطول يُكتب بالأربع لا بـ‎inset‎. */
.qd-veil {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(5,5,5,.9) 26%, rgba(5,5,5,.28) 64%, rgba(5,5,5,.62)),
    linear-gradient(to left, rgba(5,5,5,.74), rgba(5,5,5,0) 58%);
}

/* ---- نَفَسُ لون الفيلم ----
   اللون مستخرَجٌ من خلفيّة العمل نفسها ومحفوظٌ من شاشة البيت
   (‎qxd4:accent:<id>‎)، فلا حساب ولا تنزيل هنا. هالةٌ واحدة خفيفة تجعل
   الصفحة تبدو مطبوعةً لهذا العمل وحده. */
.qd-glow {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(78% 58% at 88% 6%, var(--spill), rgba(0,0,0,0) 62%),
    radial-gradient(52% 40% at 8% 96%, var(--spill), rgba(0,0,0,0) 70%);
  opacity: .16; pointer-events: none;
  /* والهالة تُقنَّع مثل الخلفيّة: بلا قناع تنتهي عند حافّة الرأس نهايةً
     حادّة، فيظهر شريطٌ أفقيّ باهت مكان الحدّ الذي أزلناه. */
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 100%);
}

/* خيطٌ ذهبيّ يمسح عرض الصفحة عند نهاية الرأس: يفصل بلا حدّ، ويقول
   «انتهى المشهد» بلغة الطباعة لا بلغة الصناديق. */
.qd-thread {
  position: absolute; right: 0; left: 0; bottom: 40px; height: 1px;
  background: linear-gradient(to left,
    rgba(201,166,97,0), rgba(201,166,97,.36) 22%,
    rgba(201,166,97,.36) 78%, rgba(201,166,97,0));
  pointer-events: none;
}

.qd-back {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(5,5,5,.5); color: var(--cream);
  font-size: 26px; line-height: 1; text-align: center;
  /* السهم يشير يساراً في RTL، فيُقلب. */
  transform: scaleX(-1);
  transition: background var(--t2) var(--e);
}
.qd-back:hover { background: rgba(5,5,5,.8); }

.qd-head {
  position: relative; z-index: 2; width: 100%;
  padding: 0 clamp(18px, 5vw, 64px) 34px;
  max-width: 1180px;
}

.qd-logo {
  max-height: 148px; max-width: min(74%, 470px); margin-bottom: 16px;
  /* الشعار يُطبع على صورةٍ متغيّرة — ظلٌّ خفيف يمنع ضياعه على الفاتح */
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.55));
}
.qd-title {
  font-family: 'Cinzel', 'Aref Ruqaa', serif; font-weight: 500;
  font-size: clamp(30px, 5.6vw, 62px); line-height: 1.08;
  letter-spacing: .012em;
  color: #fff6e6; margin-bottom: 10px; text-wrap: balance;
  text-shadow: 0 4px 26px rgba(0,0,0,.6);
}
.qd-orig {
  font-family: 'Inter', system-ui; direction: ltr; text-align: right;
  font-size: 13px; color: rgba(232,223,208,.44); margin-bottom: 10px;
}

.qd-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .04em;
  color: rgba(232,223,208,.76); margin-bottom: 14px;
}
.qd-meta i { color: rgba(232,223,208,.3); font-style: normal; }
.qd-star { color: var(--gold); font-family: 'Inter', system-ui; }
.qd-star::before { content: '★ '; font-size: 11px; }

.qd-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.qd-badge {
  font: 500 10px/1 'Inter', system-ui; letter-spacing: .13em;
  padding: 7px 11px; border: 1px solid rgba(201,166,97,.3);
  color: rgba(242,226,184,.9); border-radius: 2px; direction: ltr;
  background: linear-gradient(to bottom, rgba(201,166,97,.11), rgba(201,166,97,.03));
  box-shadow: inset 0 1px 0 rgba(255,246,228,.07);
}

.qd-acts { display: flex; align-items: center; gap: 11px; }
.qd-play {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 34px 14px 28px; border-radius: 2px;
  background: var(--cream); color: #14161a;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 30px -12px rgba(242,226,184,.5);
  transition: transform var(--t2) var(--e), background var(--t2) var(--e),
    box-shadow var(--t2) var(--e);
}
.qd-play:hover {
  background: #fff; transform: translateY(-1px);
  box-shadow: 0 16px 38px -12px rgba(242,226,184,.62);
}
.qd-tri {
  width: 0; height: 0; border-style: solid;
  /* RTL: المثلّث يشير يساراً. */
  border-width: 6px 10px 6px 0; border-color: transparent #14161a transparent transparent;
}
.qd-icon {
  width: 46px; height: 46px; border-radius: 50%; font-size: 18px;
  border: 1px solid rgba(232,223,208,.24); color: rgba(232,223,208,.72);
  transition: border-color var(--t2) var(--e), color var(--t2) var(--e);
}
.qd-icon:hover { border-color: rgba(232,223,208,.5); color: var(--cream); }
.qd-icon.on { border-color: var(--gold); color: var(--gold); }

/* ---- التشغيل الخارجيّ (Infuse/Kodi) ----
   بلغة الأزرار الشبحيّة نفسها. بالمعرّف لا بالصنف المجرّد: القاعدة
   العامّة ‎#qxd4-root button‎ (1,0,1) تُطيح بأي صنفٍ وحده — فخّ ‎.qd-play‎
   الموثّق أعلاه نفسه. */
#qxd4-root .qd-xplay {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 18px; border-radius: 2px;
  border: 1px solid rgba(232,223,208,.24); color: rgba(232,223,208,.72);
  font-size: 14px; letter-spacing: .02em;
  transition: border-color var(--t2) var(--e), color var(--t2) var(--e);
}
#qxd4-root .qd-xplay:hover { border-color: rgba(232,223,208,.5); color: var(--cream); }
#qxd4-root .qd-xplay svg { width: 15px; height: 15px; }

.qd-bar { height: 2px; background: rgba(232,223,208,.16); margin-top: 18px; max-width: 340px; }
.qd-bar i {
  display: block; height: 100%;
  background: linear-gradient(to left, var(--gold), var(--cream));
  box-shadow: 0 0 12px -2px rgba(201,166,97,.7);
}

/* ---- «يغادر متى» ----
   خيطُ معلومةٍ لا لوحٌ محفور: النسخة المحقونة القديمة (‎jellyfin_retention.js‎)
   بنت صفيحةً بحدودها الخاصّة لأنها لا تثق بما حولها. هنا العمود عمود
   الصفحة نفسه، فتكفي طبقة نصٍّ بلغة ‎.qd-meta‎ ذاتها — نقطةٌ بدل الحرف
   المضيء، وحرارة اللون على «الباقي» وحده كالأصل. */
.qd-retn {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; font-size: 12.5px; line-height: 1.6;
  color: rgba(232,223,208,.58);
}
.qd-retn-dot {
  width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(232,223,208,.32); font-style: normal;
}
.qd-retn.soon .qd-retn-dot { background: #c2ab77; }
.qd-retn.urgent .qd-retn-dot { background: #cf8878; }
.qd-retn.on .qd-retn-dot { background: var(--cream); }
.qd-retn-label { color: rgba(232,223,208,.46); }
.qd-retn-val { color: rgba(232,223,208,.85); font-weight: 500; }
.qd-retn-sep {
  display: inline-block; width: 1px; height: .85em; margin: 0 8px;
  background: rgba(232,223,208,.2); vertical-align: -1px; font-style: normal;
}
.qd-retn-left { color: rgba(232,223,208,.5); }
.qd-retn.soon .qd-retn-left { color: #c2ab77; }
.qd-retn.urgent .qd-retn-left { color: #cf8878; }
.qd-retn-who { color: rgba(232,223,208,.4); }
.qd-retn-who::before { content: '· '; }

/* ---- التنزيل ---- */
.qd-icon.qd-dl { display: inline-flex; align-items: center; justify-content: center; }
.qd-dlcard {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; max-width: 480px; padding: 13px 16px;
  border: 1px solid rgba(201,166,97,.34); border-radius: 3px;
  background: rgba(18,20,24,.9);
}
.qd-dlcard .qd-dl-ic {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); background: rgba(201,166,97,.1);
  border: 1px solid rgba(201,166,97,.3);
}
.qd-dlcard .qd-dl-info { flex: 1; min-width: 160px; }
.qd-dlcard .qd-dl-info b {
  display: block; font-size: 13.5px; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qd-dlcard .qd-dl-info span { font-size: 12px; color: rgba(232,223,208,.55); }
.qd-dlcard .qd-dl-go {
  flex: 0 0 auto; padding: 10px 20px; border-radius: 2px;
  background: var(--gold); color: #14161a; font-size: 13px; font-weight: 700;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: filter var(--t2) var(--e);
}
.qd-dlcard .qd-dl-go:hover { filter: brightness(1.08); }
.qd-dlcard .qd-dl-x {
  flex: 0 0 auto; padding: 10px 14px; border-radius: 2px;
  border: 1px solid rgba(232,223,208,.18); color: rgba(232,223,208,.6);
  font-size: 13px; text-decoration: none; display: inline-flex; align-items: center;
}
.qd-ep-dl {
  position: absolute; top: 6px; left: 6px; width: 30px; height: 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(10,11,14,.66); border: 1px solid rgba(232,223,208,.2);
  color: rgba(232,223,208,.78); opacity: .75;
  transition: opacity var(--t2) var(--e), border-color var(--t2) var(--e),
    color var(--t2) var(--e);
}
.qd-ep-dl:hover, .qd-ep-dl:focus {
  opacity: 1; border-color: rgba(201,166,97,.6); color: var(--gold);
}

/* ============================================================
   الجسم
   ============================================================ */
.qd-body {
  position: relative; z-index: 2;
  padding: 40px clamp(18px, 5vw, 64px) 0; max-width: 1180px;
}

.qd-tag {
  font-family: 'Aref Ruqaa', serif; font-size: clamp(17px, 2.1vw, 23px);
  color: var(--gold); margin-bottom: 16px; line-height: 1.75;
  padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(201,166,97,.34);
}
.qd-over {
  font-size: 15.5px; line-height: 1.95; color: rgba(232,223,208,.82);
  max-width: 70ch; margin-bottom: 18px;
}
/* الأنواع: حروفٌ على خيط، لا حبّاتُ دواءٍ رماديّة. الحبّة المستديرة لغةُ
   لوحات التحكّم؛ وهذه صفحةُ عمل. */
.qd-genres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.qd-genres span {
  font-size: 11.5px; letter-spacing: .06em; padding: 6px 14px; border-radius: 2px;
  border: 1px solid rgba(201,166,97,.2);
  background: rgba(201,166,97,.05); color: rgba(242,226,184,.72);
}

.qd-body h2 {
  font-family: 'Reem Kufi', sans-serif; font-weight: 500; font-size: 19px;
  color: var(--cream); margin-bottom: 14px;
}
/* عنوان الباب على خيطٍ يمتدّ: طباعةُ مجلّة، لا عنوانُ صندوق */
.qd-body > section > h2 {
  display: flex; align-items: center; gap: 14px;
}
.qd-body > section > h2::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to left, rgba(201,166,97,.28), rgba(201,166,97,0));
}
.qd-body section { margin-bottom: 40px; }
.qd-none { color: rgba(232,223,208,.4); font-size: 14px; padding: 14px 0; }

/* ---- الأرفف الأفقيّة ----
   ‎mandatory‎ لا ‎proximity‎: الأخيرة تسمح بالاستقرار في منتصف بطاقة —
   وهذا بالضبط ما التقطته لقطة شاشةٍ حقيقيّة من المالك 2026-08-25: عنوانٌ
   مقطوعٌ في نصف كلمة. ‎mandatory‎ يضمن أن الرفّ يستقرّ دائماً على بداية
   بطاقةٍ كاملة أياً كانت طريقة التمرير (سحبٌ باللمس أو عجلة الفأرة).
   والحافّة البعيدة (يسار الصفحة، حيث يستمرّ المحتوى خارج الرؤية) تذوب لا
   تُقصّ — نفس مبدأ خلفيّة الرأس (‎.qd-bd‎). الحافّة القريبة (بداية القراءة،
   حيث لا شيء خلفها) تبقى حادّة عمداً: تذويبها كذبٌ بصريّ. كروم ٣٨ (تلفزيون)
   لا يعرف ‎mask-image‎ فيبقى الحدّ حادّاً هناك — أضعف لكنّه ليس عطباً،
   كما في ‎.qd-bd‎ نفسها. */
.qd-rail {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to left,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - 56px), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to left,
    rgba(0,0,0,1) 0%, rgba(0,0,0,1) calc(100% - 56px), rgba(0,0,0,0) 100%);
}
.qd-rail::-webkit-scrollbar { display: none; }
.qd-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ---- الملصق كاملاً ----
   الأغلفة المحروقة نسبتها ‎175/323‎ لا ‎2:3‎، وصندوقٌ ثابتٌ بـ‎2:3‎ مع
   ‎cover‎ كان يقصّ من أسفلها **شريط الجودة** — وهو أوّل ما يميّزها،
   ويظهر كملصقٍ ناقص. الطول هو المحجوز والعرض يتبع الملصق، فلا قصَّ ولا
   ورقٌ مكشوفٌ من ورائه. و‎auto‎ تعني: نسبة الصورة متى عُرفت، وهذه ريثما
   تصل — فلا يقفز الرفّ عند التحميل. */
.qd-card { width: 132px; cursor: pointer; }
.qd-card img {
  width: 132px; height: 198px; object-fit: cover; border-radius: 3px;
  background: rgba(232,223,208,.05);
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.85);
  transition: transform var(--t3) var(--e), box-shadow var(--t3) var(--e);
}
@supports (aspect-ratio: auto 1 / 1) {
  .qd-card { width: auto; max-width: 168px; }
  .qd-card img { width: auto; aspect-ratio: auto 175 / 323; }
  /* النصّ لا يُملي عرض البطاقة، وإلّا اتّسع الإطار عن الملصق فظهر من
     ورائه ورقٌ داكن يُقرأ ظلّاً. */
  .qd-card figcaption { width: 0; min-width: 100%; }
}
.qd-card:hover img {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.9);
}
.qd-card figcaption {
  font-size: 12.5px; line-height: 1.45; color: rgba(232,223,208,.76);
  margin-top: 8px;
}
.qd-card figcaption span { display: block; font-size: 11px; color: rgba(232,223,208,.4); }

/* ============================================================
   «ليس عندك — ويستحقّ»
   ------------------------------------------------------------
   صفٌّ من عالمٍ آخر: هذه أعمالٌ **لا تملكها**، فلا تُعرض كملصقاتٍ تُنقر
   كبقيّة المكتبة — تُعرض كبطاقاتِ عرضٍ مكتوبة: سببُ الترشيح أوّلاً ثم
   القصّة ثم زرُّ الطلب. البطاقةُ هنا تُقنع، لا تُفهرِس.
   والحدّ الفاصل مقصود: لوحٌ داكنٌ بخيطٍ ذهبيّ يقول إنّك عبرتَ حدَّ الرفّ.
   ============================================================ */
.qd-sugsec:empty { display: none; }
.qd-sugsec {
  margin-top: 8px; padding: 30px clamp(16px, 3vw, 34px) 34px;
  border: 1px solid rgba(201,166,97,.16); border-radius: 3px;
  background:
    radial-gradient(120% 70% at 92% 0%, rgba(201,166,97,.07), rgba(0,0,0,0) 62%),
    linear-gradient(to bottom, rgba(20,23,27,.78), rgba(12,14,17,.6));
}
.qd-sug-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.qd-sug-h h2 { margin-bottom: 0; }
.qd-sug-k {
  font: 400 10px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .22em; color: rgba(201,166,97,.5); direction: ltr;
}
.qd-sug-lede {
  font-size: 13.5px; line-height: 1.8; color: rgba(232,223,208,.5);
  margin: 10px 0 24px; max-width: 62ch;
}

.qd-sug-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
@media (max-width: 560px) { .qd-sug-grid { grid-template-columns: 1fr; } }

.qd-sug {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px;
  padding: 14px; border-radius: 3px;
  border: 1px solid rgba(232,223,208,.07);
  background: rgba(232,223,208,.022);
  transition: border-color var(--t3) var(--e), background var(--t3) var(--e);
}
.qd-sug:hover {
  border-color: rgba(201,166,97,.24); background: rgba(232,223,208,.045);
}
.qd-sug-art img {
  width: 104px; height: auto; border-radius: 2px;
  background: rgba(232,223,208,.05);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.9);
}
.qd-sug-noart {
  width: 104px; height: 156px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,223,208,.05); color: rgba(201,166,97,.4);
  font-family: 'Cinzel', serif; font-size: 34px;
}
.qd-sug-txt { min-width: 0; }
.qd-sug-txt h3 {
  font-family: 'Cinzel', 'Aref Ruqaa', serif; font-weight: 500;
  font-size: 17px; line-height: 1.25; color: #fff6e6;
  direction: ltr; text-align: start; unicode-bidi: plaintext;
}
.qd-sug-meta {
  display: flex; gap: 9px; margin-top: 5px;
  font: 400 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  color: rgba(232,223,208,.36); direction: ltr;
}
/* السبب هو بيت القصيد: يُقرأ قبل القصّة، ويُوسَم بخيطٍ ذهبيّ لا بأيقونة */
.qd-sug-why {
  margin-top: 10px; padding-inline-start: 10px;
  border-inline-start: 2px solid rgba(201,166,97,.42);
  font-size: 13px; line-height: 1.7; color: rgba(242,226,184,.86);
}
.qd-sug-story {
  margin-top: 9px; font-size: 12.5px; line-height: 1.8;
  color: rgba(232,223,208,.56); unicode-bidi: plaintext;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* رابطٌ لا زرّ منذ 2026-08-25: الطلبُ يتمّ في «اطلب واختَر» نفسه، فالضغطة
   مغادرةٌ للموقع لا فعلٌ في مكانه — والسهمُ يقول ذلك قبل الضغط لا بعده.
   ‎inline-flex‎ يجعل النصّ والسهم عنصرَي تخطيطٍ منفصلين، فيرتّبهما اتّجاه
   الصفحة (السهم يسار النصّ في العربيّة) بلا حسابات ثنائيّة الاتّجاه. */
#qxd4-root .qd-sug-add {
  margin-top: 13px; padding: 9px 18px; border-radius: 2px;
  border: 1px solid rgba(201,166,97,.4); color: var(--gold);
  font-size: 12.5px; letter-spacing: .02em;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--t2) var(--e), color var(--t2) var(--e),
    border-color var(--t2) var(--e);
}
#qxd4-root .qd-sug-add:hover {
  background: rgba(201,166,97,.14); color: var(--cream);
}
#qxd4-root .qd-sug-out {
  font-size: 11px; opacity: .6; line-height: 1;
  transition: opacity var(--t2) var(--e), transform var(--t2) var(--e);
}
#qxd4-root .qd-sug-add:hover .qd-sug-out {
  opacity: 1; transform: translate(2px, -2px);
}

.qd-face { width: 96px; }
.qd-face img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: rgba(232,223,208,.05);
  box-shadow: 0 0 0 1px rgba(232,223,208,.1), 0 10px 22px -14px rgba(0,0,0,.9);
  transition: box-shadow var(--t3) var(--e), filter var(--t3) var(--e);
  filter: grayscale(.3) contrast(1.02);
}
.qd-face:hover img {
  filter: none;
  box-shadow: 0 0 0 1px rgba(201,166,97,.5), 0 12px 26px -14px rgba(0,0,0,.95);
}
.qd-face figcaption { margin-top: 9px; font-size: 12px; text-align: center; }
.qd-face b { display: block; color: rgba(232,223,208,.82); font-weight: 500; }
.qd-face span { display: block; color: rgba(232,223,208,.4); font-size: 11px; margin-top: 2px; }

/* ============================================================
   المواسم والحلقات
   ============================================================ */
.qd-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 18px; scrollbar-width: none; }
.qd-tabs::-webkit-scrollbar { display: none; }
.qd-tab {
  flex: 0 0 auto; padding: 9px 18px; font-size: 13.5px; border-radius: 2px;
  letter-spacing: .02em;
  color: rgba(232,223,208,.56); border: 1px solid transparent;
  transition: color var(--t2) var(--e), border-color var(--t2) var(--e),
    background var(--t2) var(--e);
}
.qd-tab.on { background: rgba(201,166,97,.08); }
.qd-tab:hover { color: var(--cream); }
.qd-tab.on { color: var(--gold); border-color: rgba(201,166,97,.36); }

.qd-eps { display: grid; gap: 12px; }
.qd-ep {
  display: grid; grid-template-columns: 168px 1fr; gap: 16px;
  padding: 11px; border-radius: 3px; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t2) var(--e), border-color var(--t2) var(--e);
}
.qd-ep:hover {
  background: rgba(232,223,208,.045); border-color: rgba(201,166,97,.16);
}
.qd-ep.seen { opacity: .52; }
.qd-ep-img { position: relative; }
.qd-ep-img img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 2px;
  background: rgba(232,223,208,.05);
}
.qd-ep-n {
  position: absolute; bottom: 5px; right: 6px;
  font: 600 11px/1 'Inter', system-ui; padding: 3px 6px;
  background: rgba(5,5,5,.76); color: var(--cream); border-radius: 2px;
}
.qd-ep-bar { position: absolute; bottom: 0; right: 0; height: 2px; background: var(--gold); }
.qd-ep-txt h3 { font-size: 14.5px; font-weight: 500; color: #f0e7d6; margin-bottom: 4px; }
.qd-ep-meta { font-size: 11.5px; color: rgba(232,223,208,.42); margin-bottom: 6px; }
.qd-ep-txt p {
  font-size: 13px; line-height: 1.75; color: rgba(232,223,208,.6);
  /* ثلاثة أسطر: الحلقة تُمسح لا تُقرأ. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 620px) {
  .qd-ep { grid-template-columns: 116px 1fr; gap: 10px; }
  .qd-ep-txt p { -webkit-line-clamp: 2; }
}

/* ============================================================
   الشبكة (التصفّح والبحث)
   ============================================================ */
.qg { padding: 0 clamp(18px, 5vw, 64px) 60px; }
.qg-top {
  position: sticky; top: 0; z-index: 4;
  padding: 18px 0 14px;
  background: linear-gradient(to bottom, var(--ink) 62%, rgba(5,5,5,0));
}
.qg-top h1 {
  font-family: 'Reem Kufi', sans-serif; font-weight: 500;
  font-size: 24px; color: var(--cream); margin: 0 0 3px;
}
.qg-count { font-size: 12px; color: rgba(232,223,208,.4); }

.qg-find {
  width: 100%; max-width: 520px; margin-top: 14px;
  padding: 12px 16px; border-radius: 2px; font: inherit; font-size: 15px;
  background: rgba(232,223,208,.06); color: var(--cream);
  border: 1px solid rgba(232,223,208,.12);
  transition: border-color var(--t2) var(--e);
}
.qg-find:focus { outline: none; border-color: rgba(201,166,97,.5); }
.qg-find::placeholder { color: rgba(232,223,208,.32); }

.qg-grid {
  display: grid; gap: 16px 14px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
@media (max-width: 480px) {
  .qg-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
}
.qg-cell { cursor: pointer; }
.qg-cell img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 3px;
  background: rgba(232,223,208,.05);
  transition: transform var(--t3) var(--e);
}
.qg-cell:hover img { transform: translateY(-3px); }
.qg-cell figcaption {
  margin-top: 7px; font-size: 12.5px; line-height: 1.45;
  color: rgba(232,223,208,.78);
}
.qg-cell figcaption span { display: block; font-size: 11px; color: rgba(232,223,208,.38); }
.qg-empty { padding: 16vh 0; text-align: center; color: rgba(232,223,208,.42); }

/* ============================================================
   شاشة التشغيل
   ============================================================ */

/* الجذر يصير شفّافاً أثناء التشغيل (‎html.qxd4-playing‎ في الستارة)،
   فيظهر ‎<video>‎ تحته. وطبقتنا هنا فوقه بلا خلفيّة إلا تدرّجاً. */
#qxd4-video { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

.qv { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* الشريط يظهر ويختفي. ‎pointer-events‎ تُرفع عن الطبقة المخفيّة كي لا
   تبتلع نقرة «أظهر الشريط». */
.qv > .qv-top, .qv > .qv-mid, .qv > .qv-bot {
  opacity: 0; transition: opacity var(--t3) var(--e); pointer-events: none;
}
.qv.on > .qv-top, .qv.on > .qv-mid, .qv.on > .qv-bot { opacity: 1; pointer-events: auto; }
.qv.on::before, .qv.on::after {
  content: ''; position: absolute; right: 0; left: 0; height: 190px; pointer-events: none;
}
.qv.on::before { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent); }
.qv.on::after { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.86), transparent); }

.qv-tap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.qv-top {
  position: absolute; top: 0; right: 0; left: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 16px clamp(14px, 3vw, 30px);
}
#qxd4-root .qv-x {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(0,0,0,.42); color: var(--cream); font-size: 26px; line-height: 1;
  transform: scaleX(-1);
}
.qv-name {
  flex: 1; font-size: 15px; color: #fff; unicode-bidi: plaintext;
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qv-method {
  font: 500 10px/1 'Inter', system-ui; letter-spacing: .1em;
  padding: 5px 8px; border-radius: 2px; color: rgba(242,226,184,.72);
  background: rgba(0,0,0,.4); flex: 0 0 auto;
}
.qv-method:empty { display: none; }

.qv-mid {
  position: absolute; top: 50%; right: 0; left: 0; z-index: 2;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; gap: clamp(24px, 7vw, 56px);
}
#qxd4-root .qv-big {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t2) var(--e), transform var(--t2) var(--e);
}
#qxd4-root .qv-big:hover { background: rgba(0,0,0,.62); transform: scale(1.04); }
/* المثلّث والشرطتان مرسومتان لا محرفيّتين: المحرف يختلف بين الأنظمة. */
.qv-play {
  width: 0; height: 0; border-style: solid; margin-right: 5px;
  border-width: 13px 22px 13px 0; border-color: transparent #fff transparent transparent;
}
.qv-pause {
  width: 20px; height: 24px;
  border-right: 6px solid #fff; border-left: 6px solid #fff;
}
#qxd4-root .qv-jog {
  min-width: 54px; height: 44px; border-radius: 22px; font-size: 14px; font-weight: 500;
  background: rgba(0,0,0,.34); color: rgba(255,255,255,.86);
  transition: background var(--t2) var(--e);
}
#qxd4-root .qv-jog:hover { background: rgba(0,0,0,.6); }

.qv-bot {
  position: absolute; bottom: 0; right: 0; left: 0; z-index: 2;
  padding: 0 clamp(14px, 3vw, 30px) 18px;
}
/* منطقة اللمس أعرض من الخطّ نفسه: خطٌّ ٣px لا يُصاد بالإصبع.
   و‎touch-action:none‎ ليست تجميلاً: بدونها يبتلع تمريرُ الصفحة الإصبعَ
   ويُلغي المتصفّح سلسلة ‎pointer‎ من أوّل ملّيمتر، فتبدو السحبة كأنها
   لم تُسجَّل. */
.qv-seek { padding: 16px 0; cursor: pointer; touch-action: none; }
.qv-track { position: relative; height: 3px; background: rgba(255,255,255,.22); border-radius: 2px; }
.qv-seek:hover .qv-track { height: 5px; margin: -1px 0; }
.qv-track { transition: height var(--t2) var(--e); }
.qv-buf { position: absolute; top: 0; right: 0; height: 100%; background: rgba(255,255,255,.3); }
.qv-fill { position: absolute; top: 0; right: 0; height: 100%; background: var(--gold); }
/* ⚠ ‎right‎ وحدها. ‎left‎ معها تقييدٌ زائد يُهمِل أحدهما، وفي ‎rtl‎ المُهمَل
   هو ‎left‎ — فكان المؤشّر يتجمّد تحت الإصبع. */
.qv-knob {
  position: absolute; top: 50%; right: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); transform: translate(50%, -50%);
  box-shadow: 0 0 0 4px rgba(0,0,0,.34);
  opacity: 0; transition: opacity var(--t2) var(--e);
}
.qv.on .qv-knob { opacity: 1; }

/* ---- عدّاد الصوت ----
   زرٌّ يكتم، وشريطٌ يضبط، ورقمٌ يقول أين أنت. الرقم لازم: تحدُّر
   جِلِّي‌فِن تكعيبيّ، فمنتصف الشريط ليس منتصف المسموع. */
.qv-vol { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#qxd4-root .qv-vmute {
  width: 34px; height: 34px; border-radius: 2px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.82); background: rgba(0,0,0,.34);
  transition: background var(--t2) var(--e), color var(--t2) var(--e);
}
#qxd4-root .qv-vmute:hover { background: rgba(0,0,0,.62); color: #fff; }
.qv-vol #qv-spk { width: 19px; height: 19px; display: block; }
#qv-spk .qv-cone { fill: currentColor; }
#qv-spk .qv-w1, #qv-spk .qv-w2, #qv-spk .qv-cut {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
#qv-spk .qv-cut { opacity: 0; }
#qv-spk.low .qv-w2 { opacity: 0; }
#qv-spk.off .qv-w1, #qv-spk.off .qv-w2 { opacity: 0; }
#qv-spk.off .qv-cut { opacity: 1; }
#qv-spk.off { color: rgba(255,255,255,.42); }

.qv-vbar {
  position: relative; width: 84px; height: 3px; flex: 0 0 auto;
  background: rgba(255,255,255,.22); border-radius: 2px;
  cursor: pointer; touch-action: none;
  /* الهدف الملموس أعلى من الخطّ، بلا أن يزيح الصفّ. */
  padding: 14px 0; background-clip: content-box;
  box-sizing: content-box; margin: -14px 0;
}
.qv-vfill {
  position: absolute; top: 50%; right: 0; height: 3px; margin-top: -1.5px;
  background: rgba(255,255,255,.78); border-radius: 2px;
}
.qv-vknob {
  position: absolute; top: 50%; right: 0; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transform: translate(50%, -50%);
  box-shadow: 0 0 0 3px rgba(0,0,0,.34);
}
.qv-vnum {
  font: 400 11.5px/1 'Inter', system-ui; direction: ltr;
  color: rgba(255,255,255,.6); min-width: 30px; text-align: center;
}
.qv-vnum:empty { display: none; }
/* على iOS ‎volume‎ للقراءة فقط — الجهاز يملك الصوت. يبقى الكتم وحده،
   ولا يُعرض شريطٌ لا يستجيب. */
.qv-vol.locked .qv-vbar, .qv-vol.locked .qv-vnum { display: none; }

.qv-row { display: flex; align-items: center; gap: 14px; }
.qv-t {
  font: 400 12.5px/1 'Inter', system-ui; color: rgba(255,255,255,.72);
  direction: ltr; min-width: 52px;
}
.qv-tools { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
#qxd4-root .qv-tool {
  padding: 7px 14px; border-radius: 2px; font-size: 13px;
  color: rgba(255,255,255,.8); background: rgba(0,0,0,.34);
  transition: background var(--t2) var(--e);
}
#qxd4-root .qv-tool:hover { background: rgba(0,0,0,.62); }

.qv-menu {
  position: absolute; bottom: 92px; right: clamp(14px, 3vw, 30px); z-index: 3;
  min-width: 200px; max-height: 46vh; overflow-y: auto;
  background: rgba(10,12,15,.95); border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px; padding: 5px;
}
#qxd4-root .qv-pick {
  display: block; width: 100%; text-align: right; padding: 10px 13px;
  font-size: 13.5px; color: rgba(232,223,208,.82); border-radius: 2px;
  unicode-bidi: plaintext;
}
#qxd4-root .qv-pick:hover { background: rgba(255,255,255,.07); }
#qxd4-root .qv-pick.on { color: var(--gold); }
.qv-none { padding: 12px; font-size: 13px; color: rgba(232,223,208,.4); }

@media (max-width: 620px) {
  .qv-tools { gap: 5px; }
  #qxd4-root .qv-tool { padding: 7px 10px; font-size: 12px; }
  .qv-t { min-width: 44px; font-size: 11.5px; }
  /* الشاشة الضيّقة: يبقى الكتم، ويذهب الشريط والرقم. أربعة أزرارٍ
     وشريطٌ في ٣٢٠px تعني أن يُخطئ الإصبع كلّ مرّة. */
  .qv-vbar, .qv-vnum { display: none; }
  .qv-vol { gap: 0; }
}

/* رسالةٌ عابرة تحت أزرار الرأس. الفشل يُقال، لا يُبتلع. */
.qd-say { margin-top: 12px; font-size: 13.5px; color: #ffb4a8; }
.qd-say:empty { display: none; }

/* الزرّ وهو يعمل: دوّارةٌ مكان المثلّث، ومنعُ ضغطةٍ ثانية بصريّاً وسلوكيّاً. */
#qxd4-root .qd-play.busy { background: rgba(242,226,184,.55); cursor: progress; }
.qd-spin {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(20,22,26,.25); border-top-color: #14161a;
  animation: qd-spin .8s linear infinite;
}

/* التحضير: يُقال ما يجري ولماذا. الصمت هو ما جعل الشاشة تبدو معطّلة. */
.qv-prep {
  position: absolute; top: 50%; right: 0; left: 0; z-index: 4;
  transform: translateY(-50%); text-align: center; pointer-events: none;
}
/* زرّ الإنقاذ داخل لوحة التحضير: اللوحة كلّها ‎pointer-events:none‎ كي
   تمرّ النقرات إلى طبقة اللمس — الزرّ وحده يستعيدها. */
#qxd4-root .qv-xplay {
  pointer-events: auto; margin-top: 18px; padding: 11px 24px;
  border-radius: 2px; border: 1px solid rgba(232,223,208,.34);
  color: var(--cream); background: rgba(18,20,24,.72); font-size: 14px;
  transition: border-color var(--t2) var(--e), color var(--t2) var(--e);
}
#qxd4-root .qv-xplay:hover { border-color: rgba(232,223,208,.6); color: #fff; }
#qxd4-root .qv-xplay[hidden] { display: none; }
.qv-prep[hidden] { display: none; }
.qv-prep i {
  display: block; width: 34px; height: 34px; margin: 0 auto 16px;
  border-radius: 50%; border: 2px solid rgba(242,226,184,.16);
  border-top-color: var(--gold); animation: qd-spin 1s linear infinite;
}
.qv-prep span { display: block; font-size: 15px; color: var(--cream); }
.qv-prep em {
  display: block; margin-top: 7px; font-style: normal;
  font-size: 12.5px; color: rgba(232,223,208,.44);
}
.qv-prep b {
  display: block; margin-top: 5px; font-weight: 400;
  font-size: 13px; color: var(--gold);
}
.qv-prep b:empty { display: none; }

/* ---- تخطّي المقدّمة/الخاتمة ---- */
#qxd4-root .qv-skip {
  position: absolute; left: clamp(14px, 3vw, 30px); bottom: 104px; z-index: 3;
  padding: 11px 20px; border-radius: 2px;
  background: rgba(18,20,24,.82); border: 1px solid rgba(232,223,208,.34);
  color: var(--cream); font-size: 13.5px; font-weight: 500;
  transition: border-color var(--t2) var(--e), color var(--t2) var(--e);
}
#qxd4-root .qv-skip:hover { border-color: rgba(232,223,208,.6); color: #fff; }
#qxd4-root .qv-skip[hidden] { display: none; }

/* ---- بطاقة «التالي» ----
   خارج ‎.qv-top/mid/bot‎ عمداً: تلك الثلاثة تخفت بعد ٣٫٢ث من السكون
   (‎show()‎ في video.js)، وبطاقة القرار هذه يجب أن تبقى ظاهرةً وقابلةً
   للنقر حتى لو اختفى شريط التحكّم — هي نفسها ما يقرّر ماذا يُشغَّل بعدها. */
.qv-next { position: absolute; left: clamp(14px, 3vw, 30px); bottom: 104px; z-index: 3; }
.qv-next[hidden] { display: none; }
.qv-next-card {
  width: min(300px, 68vw); padding: 16px 18px;
  background: rgba(14,16,19,.94); border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
}
.qv-next-t { display: block; font-size: 11px; letter-spacing: .08em; color: rgba(232,223,208,.5); }
.qv-next-n {
  display: block; margin-top: 4px; font-size: 14px; color: #fff; unicode-bidi: plaintext;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qv-next-btns { display: flex; gap: 8px; margin-top: 13px; }
#qxd4-root .qv-next-go, #qxd4-root .qv-next-x {
  flex: 1; padding: 9px 8px; border-radius: 2px; font-size: 12.5px; text-align: center;
}
#qxd4-root .qv-next-go { background: var(--gold); color: #14161a; font-weight: 600; }
#qxd4-root .qv-next-x { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }
#qxd4-root .qv-next-x:hover { background: rgba(255,255,255,.14); }
#qv-next-cd { font: 400 12px/1 'Inter', system-ui; direction: ltr; }

@media (max-width: 620px) {
  .qv-skip { bottom: 92px; padding: 9px 16px; font-size: 12.5px; }
  .qv-next { bottom: 92px; }
  .qv-next-card { width: min(240px, 78vw); padding: 13px 14px; }
}

/* ============================================================
   الإعدادات ولوحة الحسابات
   ============================================================ */
.qs { min-height: 100%; padding: 0 clamp(18px, 5vw, 64px) 70px; }
.qs-wrap { max-width: 760px; margin: 0 auto; padding-top: 64px; position: relative; }
.qs-wrap > h1 {
  font-family: 'Reem Kufi', sans-serif; font-weight: 500;
  font-size: 26px; color: var(--cream); margin-bottom: 16px;
}
#qxd4-root .qs .qd-back { position: absolute; top: 8px; right: 0; }

/* خيطٌ ساكن، لا مطلَق كنظيره فوق رأس الفيلم (‎.qd-thread‎): هذه صفحةٌ بلا
   صورة خلفيّةٍ يُعلَّق فوقها، فالتخطيط العاديّ يكفيها. نفس التدرّج بصريّاً —
   لغةٌ واحدة للفصل في كل الشاشات. */
.qs-rule {
  height: 1px; margin-bottom: 30px;
  background: linear-gradient(to left,
    rgba(201,166,97,0), rgba(201,166,97,.36) 22%,
    rgba(201,166,97,.36) 78%, rgba(201,166,97,0));
}

/* كلّ قسمٍ بطاقة، لا سطورٌ عائمة على الأسود المسطّح — هذا وحده ما كان
   يجعل الشاشة تبدو نموذج إدخالٍ لا واجهة تطبيق. */
.qs-block {
  margin-bottom: 22px; padding: 18px 20px 20px;
  border-radius: 6px; background: rgba(232,223,208,.028);
}
.qs-block:empty { display: none; }
.qs-block h2 {
  font-family: 'Reem Kufi', sans-serif; font-weight: 500; font-size: 17px;
  color: var(--gold); margin-bottom: 4px;
}
.qs-count {
  font: 400 12px/1 'Inter', system-ui; color: rgba(232,223,208,.4);
  margin-right: 6px;
}
.qs-note { font-size: 12.5px; color: rgba(232,223,208,.42); margin-bottom: 16px; }

/* القمرة: كتلةٌ واحدةٌ محاطة، لا ثلاث بطاقاتٍ متتالية — الصحّة والترافيك
   وكلّ حساب أقسامٌ داخل لوحةٍ واحدة، تُفصل بخيطٍ لا بفراغٍ ولون. صبغة
   الذهب الخفيفة هنا وحدها هي ما يقول «هذا لك أنت» قبل قراءة كلمة. */
.qs-zone {
  margin-bottom: 22px; padding: 20px clamp(16px, 4vw, 26px) 4px;
  border-radius: 6px; border: 1px solid rgba(201,166,97,.16);
  background: rgba(201,166,97,.025);
}
.qs-zone-tag {
  font-family: 'Reem Kufi', sans-serif; font-weight: 500; font-size: 13px;
  color: var(--gold); margin-bottom: 6px;
}
.qs-zone .qs-block {
  background: none; border-radius: 0; margin-bottom: 0;
  padding: 20px 0 18px; border-top: 1px solid rgba(232,223,208,.08);
}
.qs-zone .qs-block:first-of-type { border-top: 0; padding-top: 2px; }

.qs-row {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid rgba(232,223,208,.07);
}
.qs-row.col { flex-direction: column; align-items: stretch; gap: 12px; }
.qs-txt { flex: 1; min-width: 0; }
.qs-txt b { display: block; font-weight: 500; font-size: 14.5px; color: #ede4d4; }
.qs-txt span {
  display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.75;
  color: rgba(232,223,208,.5);
}

/* المفتاح: حالته تُقرأ بلمحة، ولمسته أكبر من رسمه. */
#qxd4-root .qs-sw {
  position: relative; flex: 0 0 auto; width: 46px; height: 26px;
  border-radius: 13px; background: rgba(232,223,208,.14);
  transition: background var(--t2) var(--e);
}
#qxd4-root .qs-sw.on { background: var(--gold); }
.qs-sw i {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #0b0d0f;
  transition: transform var(--t2) var(--e);
}
.qs-sw.on i { transform: translateX(-20px); }

.qs-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
#qxd4-root .qs-tier {
  flex: 1 1 150px; text-align: right; padding: 11px 14px; border-radius: 3px;
  border: 1px solid rgba(232,223,208,.14);
  transition: border-color var(--t2) var(--e), background var(--t2) var(--e);
}
#qxd4-root .qs-tier:hover { border-color: rgba(232,223,208,.34); }
#qxd4-root .qs-tier.on { border-color: var(--gold); background: rgba(201,166,97,.09); }
.qs-tier b { display: block; font-size: 13.5px; font-weight: 500; color: #ede4d4; }
.qs-tier.on b { color: var(--gold); }
.qs-tier span {
  display: block; margin-top: 3px; font-size: 11.5px;
  color: rgba(232,223,208,.42);
}
#qxd4-root .qs-tier.sm { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }
.qs-mini { display: flex; flex-wrap: wrap; gap: 6px; }

/* الحساب: بطاقةٌ لكل واحد فلا تختلط المفاتيح بين شخصين. */
.qs-user {
  padding: 14px 16px; margin-bottom: 10px; border-radius: 4px;
  background: rgba(232,223,208,.035);
}
.qs-user.me { box-shadow: inset 2px 0 0 var(--gold); }
.qs-uhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.qs-uhead b { font-size: 15px; font-weight: 500; color: #f0e7d6; unicode-bidi: plaintext; }
.qs-uhead em {
  font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: rgba(232,223,208,.08); color: rgba(232,223,208,.55);
}
.qs-uhead em.warn { background: rgba(255,180,168,.12); color: #ffb4a8; }
.qs-user .qs-row:last-child { border-bottom: 0; padding-bottom: 4px; }

.qs-admin-foot { margin-top: 20px; }
.qs-link { font-size: 13px; color: var(--gold); text-decoration: none; }
.qs-link:hover { text-decoration: underline; }

/* الحساب: اسم الدخول وكلمة المرور — نفس لغة حقول الترافيك (‎qt-lim‎)،
   لا لغةٌ ثالثة في نفس الشاشة. */
.qs-acct-form { margin-bottom: 20px; }
.qs-acct-form:last-child { margin-bottom: 0; }
.qs-acct-form .f { display: block; margin-bottom: 10px; }
.qs-acct-form .f span {
  display: block; margin-bottom: 4px; font-size: 12px; color: rgba(232,223,208,.42);
}
#qxd4-root .qs-acct-form input {
  width: 100%; box-sizing: border-box; background: rgba(232,223,208,.06);
  border: 1px solid rgba(232,223,208,.18); border-radius: 2px; color: #ede4d4;
  font: 400 14px/1.3 'Tajawal', sans-serif; padding: 10px 12px;
  -webkit-appearance: none; appearance: none;
}
#qxd4-root .qs-acct-form input:focus { outline: none; border-color: var(--gold); }
.qs-acct-form .acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
#qxd4-root .qs-acct-form button.save {
  font: 400 13px/1 'Tajawal', sans-serif; padding: 10px 20px; border-radius: 2px;
  border: 1px solid var(--gold); color: #140b03; background: var(--gold);
}
#qxd4-root .qs-acct-form button.save[disabled] { opacity: .4; }
.qs-acct-form .msg { font-size: 11.5px; color: rgba(232,223,208,.5); }
.qs-acct-form .msg.bad { color: #ffb4a8; }
.qs-acct-form .msg.ok { color: var(--gold); }

/* الترجمة: معاينةٌ محليّة بلا شبكة. خلفيّة المعاينة متدرّجة لا سوداء
   منبسطة عمداً: ظلّ الحروف على أسود مسطّح غير مرئيّ — الظلّ مصمَّمٌ ليقاوم
   خلفيّاتٍ فاتحة، فبلا تباينٍ خلف النصّ لا يُرى أي فرقٍ بتفعيله. */
.qs-subprev {
  position: relative; overflow: hidden; border-radius: 4px;
  height: 148px; margin-bottom: 18px; background: var(--ink);
  background-image: radial-gradient(ellipse at 50% 72%,
    rgba(210,195,165,.55) 0%, rgba(210,195,165,.16) 45%, rgba(0,0,0,0) 72%);
}
.qs-subprev b {
  position: absolute; right: 6%; left: 6%; bottom: 6%;
  text-align: center; font-weight: 400; color: #fff;
  font-family: 'Tajawal', sans-serif; font-size: 18px; line-height: 1.35;
  transition: font-size var(--t2) var(--e), bottom var(--t2) var(--e);
}
.qs-txt b em {
  font-style: normal; font-weight: 700; color: var(--gold); margin-right: 6px;
}
#qxd4-root .qs-range {
  display: block; width: 100%; margin: 4px 0 2px; padding: 0;
  background: transparent; border: 0; accent-color: var(--gold);
}

/* صفّ حدّ الجودة داخل بطاقة كلّ حسابٍ (‎qs-mini‎، أربعة أزرار) هو الوحيد
   الذي لا يتّسع على هاتفٍ بجانب تسميته — وضيق «القمرة» المتعمَّد يكشفه
   أبكر من عرض الصفحة الكامل. تكديسٌ لا تراكب: ‎qs-mini‎ ينزل سطراً كاملاً
   بدل أن يزاحم النصّ عمودَه. */
@media (max-width: 480px) {
  .qs-row { flex-wrap: wrap; }
  .qs-mini { flex-basis: 100%; }
}

/* ============================================================
   الدخول — أوّل خمس ثوانٍ من المنصّة

   منقولٌ عن ثيم الدخول القائم (‎frontend/jellyfin-branding.css‎) لا
   مخترعٌ بجانبه: نفس النقش الباروكيّ، ونفس الشعار المنحوت بفلتره
   المدروس، ونفس الحقول بخطٍّ سفليٍّ لا صندوق، ونفس الزرّ الأبيض.

   «متناسقة» تعني أن تكون هي هي — لا شبيهةً بها.
   ============================================================ */
.ql {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  /* طبقتان فوق النقش: بِركةٌ داكنة خلف الشعار كي لا يصطدم الحجر الرماديّ
     بنقشٍ رماديّ خلفه، وتدرّجٌ رأسيّ يُخرج النصّ من الصورة. */
  background-color: #000;
  background-image:
    radial-gradient(ellipse 52% 42% at 50% 32%,
      rgba(0,0,0,.72) 0%, rgba(0,0,0,.44) 52%, rgba(0,0,0,.12) 78%, transparent 94%),
    linear-gradient(rgba(0,0,0,.46) 0%, rgba(0,0,0,.60) 32%,
      rgba(0,0,0,.86) 70%, rgba(0,0,0,.95) 100%),
    url("https://qxd4.pages.dev/brand/qxd4-bg.jpg");
  background-size: auto, auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* الشاشات الصغيرة تأخذ نسخةً أخفّ — ١٣٤ ك.ب بدل ٤٠٩ */
@media (max-width: 820px) {
  .ql {
    background-image:
      radial-gradient(ellipse 62% 34% at 50% 28%,
        rgba(0,0,0,.92) 0%, rgba(0,0,0,.66) 52%, rgba(0,0,0,.20) 78%, transparent 94%),
      linear-gradient(rgba(0,0,0,.52) 0%, rgba(0,0,0,.66) 30%,
        rgba(0,0,0,.88) 68%, rgba(0,0,0,.96) 100%),
      url("https://qxd4.pages.dev/brand/qxd4-bg-sm.jpg");
  }
}

.ql-wrap { width: min(320px, 82vw); text-align: center; }

/* الشعار: ‎860×622‎ ⇒ نسبة ‎1.383‎. والحجر داكنٌ على داكن، فيُرفع سطوعه
   ويُخفَّض تشبّعه قليلاً ليقارب برودة النقش خلفه — فيبدوان صورةً واحدة
   لا صورةً فوق صورة. */
.ql-mark {
  width: min(360px, 74vw); height: min(260px, 53.5vw);
  margin: 0 auto 22px;
  background: url("https://qxd4.pages.dev/brand/qxd4-mark.png") center/contain no-repeat;
  background: image-set(
      url("https://qxd4.pages.dev/brand/qxd4-mark.webp") type("image/webp"),
      url("https://qxd4.pages.dev/brand/qxd4-mark.png")  type("image/png")
    ) center/contain no-repeat;
  filter: brightness(1.25) contrast(1.03) saturate(.9)
          drop-shadow(0 8px 30px rgba(0,0,0,.9));
}

/* منتقي الحسابات: وجوهٌ هادئة بلا صناديق — كما ‎#divUsers .cardBox‎. */
.ql-users {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px; margin-bottom: 26px;
}
.ql-users:empty { display: none; }
#qxd4-root .ql-u {
  width: 68px; opacity: .5;
  transition: opacity var(--t2) var(--e);
}
#qxd4-root .ql-u:hover, #qxd4-root .ql-u.on { opacity: 1; }
.ql-av {
  width: 48px; height: 48px; margin: 0 auto 8px;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  transition: border-color var(--t2) var(--e);
}
.ql-u.on .ql-av { border-color: rgba(255,255,255,.75); }
.ql-av img { width: 100%; height: 100%; object-fit: cover; }
.ql-av b {
  font-family: 'Cinzel', serif; font-size: 17px; font-weight: 400;
  color: rgba(255,255,255,.55);
}
.ql-nm {
  display: block; font-weight: 300; font-size: 12px;
  color: rgba(255,255,255,.5); unicode-bidi: plaintext;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
}

/* الحقول: خطٌّ سفليٌّ رفيع بدل الصندوق، والنصّ في الوسط. */
.ql-f { display: block; margin-bottom: 22px; }
.ql-f span {
  display: block; margin-bottom: 2px;
  font-weight: 300; font-size: 12px;
  color: rgba(255,255,255,.34);
  text-shadow: 0 1px 10px rgba(0,0,0,.9);
}
.ql-f input {
  width: 100%; padding: 11px 2px; text-align: center;
  background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,.20);
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 300;
  letter-spacing: normal;
  transition: border-color .3s;
}
.ql-f input:focus { outline: 0; border-bottom-color: rgba(255,255,255,.75); }
/* تعبئة المتصفّح التلقائيّة لا تكسر الشكل */
.ql-f input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s;
}

/* الزرّ الرئيس: أبيضُ صريح. والثانويّ شبحيّ لا رماديّ ثقيل. */
#qxd4-root .ql-go {
  width: 100%; padding: 14px; border-radius: 2px;
  background: #fff; color: #0a0a0a;
  font-size: 15px; font-weight: 500; letter-spacing: normal;
  transition: transform .25s cubic-bezier(.16,.84,.24,1),
              background .25s cubic-bezier(.16,.84,.24,1);
}
#qxd4-root .ql-go:hover { transform: translateY(-2px); }
#qxd4-root .ql-go.busy { background: rgba(255,255,255,.55); cursor: progress; transform: none; }

.ql-msg {
  min-height: 20px; margin-top: 14px; font-size: 12.5px; font-weight: 300;
  color: rgba(255,255,255,.6); text-shadow: 0 1px 10px rgba(0,0,0,.9);
}
.ql-msg.bad { color: #ffb4a8; }

/* المخرج الثالث: مرئيٌّ وهادئ — لا سرّ ولا اختصار لوحة مفاتيح. */
#qxd4-root .ql-esc {
  margin-top: 24px; padding: 11px 18px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.62);
  font-size: 12.5px; font-weight: 300; letter-spacing: normal;
  transition: border-color .25s, color .25s;
}
#qxd4-root .ql-esc:hover { border-color: rgba(255,255,255,.5); color: #fff; }

/* رمز Quick Connect (الوضع المستقلّ): كبيرٌ يُقرأ من بعيد، ‎ltr‎ لأن
   الأرقام تُدخل غربيّةً في حقل جِلِّي‌فِن. فارغاً لا يحجز مساحة. */
#qxd4-root .ql-qccode { text-align: center; }
#qxd4-root .ql-qccode b {
  display: block; margin-top: 14px;
  font: 700 40px/1.3 ui-monospace, Menlo, monospace;
  letter-spacing: .28em; direction: ltr;
  color: #c9a661; text-shadow: 0 1px 14px rgba(0,0,0,.9);
}
#qxd4-root .ql-qccode i {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 12px; color: rgba(255,255,255,.5);
}

/* مؤشّر النسخة الحيّ (core/fresh.js): على ‎body‎ لا في الجذر — يجب أن
   يعلو كلَّ شاشةٍ. ‎.qxd4-layer‎ ليستثنيه سترُ المحقون (العطب ٦). */
button#qxd4-fresh {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 3000; padding: 10px 22px; border: 1px solid rgba(201,166,97,.55);
  border-radius: 3px; background: rgba(16,14,9,.94); color: #c9a661;
  font: 500 13.5px/1 'Tajawal','SF Arabic',system-ui,sans-serif;
  cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.55);
}
button#qxd4-fresh:hover { background: rgba(28,23,14,.97); color: #e8d9b8; }

/* ============================================================
   البحث — طبقةٌ خارج ‎#qxd4-root‎.

   ⚠ ابنةُ ‎body‎ (كما تشترط الستارة في ‎body>.qxd4-layer‎)، فلا يصلها
   تصفير الجذر: لا ‎box-sizing‎ ولا خطّ ولا تصفير أزرار. وتصلها أنماط
   جِلِّي‌فِن لأزرارها وحقولها. فالتصفير هنا صريحٌ وكامل، وبمعرّفٍ حيث
   يلزم — وهذا هو فخّ الخصوصيّة نفسه الذي رسم ‎.qd-play‎ شفّافاً.
   ============================================================ */
.qxd4-find {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000;
  direction: rtl; color: #e8dfd0;
  font-family: 'Tajawal', 'SF Arabic', system-ui, sans-serif;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 200ms;
}
.qxd4-find.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.qxd4-find *, .qxd4-find *::before, .qxd4-find *::after { box-sizing: border-box; }
.qxd4-find button {
  font: inherit; color: inherit; background: none; border: 0;
  cursor: pointer; padding: 0; margin: 0; text-align: right;
}
.qxd4-find img { display: block; max-width: 100%; }

.qxd4-find .qfd-veil {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(6,7,9,.82); backdrop-filter: blur(3px);
}
.qxd4-find .qfd-sheet {
  position: absolute; top: 9vh; right: 50%; width: min(680px, 92vw);
  transform: translateX(50%) translateY(-10px);
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
  background: #0c0e11; border: 1px solid rgba(232,223,208,.14);
  border-radius: 3px; box-shadow: 0 30px 90px rgba(0,0,0,.7);
  max-height: 78vh; display: flex; flex-direction: column; overflow: hidden;
}
.qxd4-find.on .qfd-sheet { transform: translateX(50%) translateY(0); }

.qxd4-find .qfd-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid rgba(232,223,208,.1);
}
.qxd4-find .qfd-ico, .qxd4-findbtn svg, .qxd4-partybtn svg {
  width: 19px; height: 19px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
}
.qxd4-find .qfd-ico { color: #c9a661; }
/* ⚠ بمعرّفٍ: أنماط جِلِّي‌فِن تُلوّن ‎input‎ وتضع له إطاراً وخلفيّة. */
.qxd4-find input#qfd-in {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  color: #f2e2b8; font: 400 19px/1.5 'Tajawal', 'SF Arabic', system-ui, sans-serif;
  padding: 0; margin: 0; box-shadow: none; border-radius: 0;
  text-align: right; direction: rtl; -webkit-appearance: none; appearance: none;
}
.qxd4-find input#qfd-in::-webkit-search-cancel-button { display: none; }
.qxd4-find input#qfd-in::placeholder { color: rgba(232,223,208,.34); }
.qxd4-find .qfd-esc {
  font: 400 10.5px/1 'IBM Plex Mono', ui-monospace, monospace; direction: ltr;
  color: rgba(232,223,208,.42); border: 1px solid rgba(232,223,208,.18);
  border-radius: 2px; padding: 5px 7px; flex: 0 0 auto;
}
.qxd4-find .qfd-esc:hover { color: #e8dfd0; border-color: rgba(232,223,208,.4); }

.qxd4-find .qfd-hint {
  padding: 9px 18px; font-size: 12.5px; color: rgba(232,223,208,.42);
  border-bottom: 1px solid rgba(232,223,208,.06);
}
.qxd4-find .qfd-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; }

.qxd4-find .qfd-row {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 8px 10px; border-radius: 2px;
  transition: background 140ms cubic-bezier(.22,.61,.36,1);
}
.qxd4-find .qfd-row:hover, .qxd4-find .qfd-row.on { background: rgba(232,223,208,.07); }
.qxd4-find .qfd-th {
  width: 42px; height: 62px; flex: 0 0 auto; overflow: hidden;
  background: rgba(232,223,208,.05); border-radius: 1px;
}
.qxd4-find .qfd-th img { width: 100%; height: 100%; object-fit: cover; }
.qxd4-find .qfd-txt { flex: 1; min-width: 0; }
.qxd4-find .qfd-txt b {
  display: block; font: 500 15px/1.4 'Tajawal', system-ui, sans-serif; color: #e8dfd0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  unicode-bidi: plaintext; text-align: right;
}
.qxd4-find .qfd-txt i {
  display: block; font-style: normal; font-size: 12px;
  color: rgba(232,223,208,.44); unicode-bidi: plaintext; text-align: right;
}
.qxd4-find .qfd-why {
  flex: 0 0 auto; font-size: 10.5px; letter-spacing: .04em;
  color: rgba(201,166,97,.6); border: 1px solid rgba(201,166,97,.22);
  border-radius: 2px; padding: 3px 6px;
}

/* ---- الزرّ في الرأس ----
   يُحقن داخل رؤوس المجلّة، فيرث خطّها ويجاور زرّ الحساب. */
.qxd4-findbtn {
  width: 34px; height: 34px; flex: 0 0 auto; padding: 0; margin: 0 0 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(232,223,208,.16); border-radius: 50%;
  color: rgba(232,223,208,.62); cursor: pointer;
  transition: color 180ms cubic-bezier(.22,.61,.36,1),
              border-color 180ms cubic-bezier(.22,.61,.36,1);
}
.qxd4-findbtn:hover { color: #f2e2b8; border-color: rgba(242,226,184,.44); }

/* حفلة المشاهدة — توأمُ زرّ البحث في القياس والحدود، وله توهّجٌ
   ذهبيٌّ خفيفٌ عند التحويم يميّزه دون أن يخرج عن اللغة البصريّة. */
.qxd4-partybtn {
  width: 34px; height: 34px; flex: 0 0 auto; padding: 0; margin: 0 0 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(232,223,208,.16); border-radius: 50%;
  color: rgba(232,223,208,.62); cursor: pointer;
  transition: color 180ms cubic-bezier(.22,.61,.36,1),
              border-color 180ms cubic-bezier(.22,.61,.36,1),
              box-shadow 180ms cubic-bezier(.22,.61,.36,1);
}
.qxd4-partybtn:hover {
  color: #f2e2b8; border-color: rgba(242,226,184,.5);
  box-shadow: 0 0 0 1px rgba(242,226,184,.16), 0 0 16px rgba(242,226,184,.13);
}
.qxd4-partybtn:active { transform: scale(.94); }

@media (max-width: 620px) {
  .qxd4-find .qfd-sheet { top: 0; width: 100vw; max-height: 100vh; height: 100%;
                          border: 0; border-radius: 0; }
  .qxd4-find input#qfd-in { font-size: 17px; }   /* دون ١٦px يُقرّب iOS الصفحة */
  .qxd4-find .qfd-why { display: none; }
}

/* ============================================================
   سلاسة حركة البيت.

   قِيس على الصفحة الحيّة: ٦١ عنصراً عليها ‎filter: blur(11px)‎ حيّة داخل
   الماسح، **وصفر عنصرٍ مُرقًّى إلى طبقةٍ عتاديّة**. والمؤقّتات الدوريّة
   بريئة تماماً (٠.١٢–٠.٢ ملّي‌ث) وكذلك إعادة التخطيط (٠.٠٦).

   والضباب أغلى مرشّح: يقرأ البِكسلات ويُطبّق غاوسيّاً. وتعليق ‎home.css‎
   يقول «الضباب ينتهي عند الصفر فلا يبقى ثمنٌ على المعالج» — والثمن ليس
   بعد الانتقال بل **أثناءه**: نصف القطر يتغيّر كل إطار فيُعاد الحساب كل
   إطار، وعلى بطاقاتٍ انتقالاتها متداخلة (٨٠ملّي‌ث × الترتيب + ٩٠٠ملّي‌ث
   = نافذةٌ تقارب ١.٧ث من ضبابيّاتٍ متزامنة).

   ------------------------------------------------------------
   ⚠ **ولا نلمس نصف القطر.** جرّبتُه فكسر الشاشة: قاعدتي مسبوقةٌ بمعرّف
   ‎(1,2,1)‎، وقواعد الكشف عندهم بأصنافٍ فقط — ‎.mag .dept.in .entry‎
   و‎.mag.allsheet.in .entry‎ ونسختا التلفزيون، **أربع قواعد**. فغلبها
   ضبابي كلّها وبقيت الملصقات مضبَّبةً إلى الأبد. وهو فخّ الخصوصيّة
   نفسه الذي رسم ‎.qd-play‎ شفّافاً من قبل.

   القاعدة: **لا تُنازِع خاصّيّةً لها حالاتٌ متعدّدة في ورقةٍ لا تملكها.**
   يكفي أن نُقصّر النافذة — وهي أكبر الثمن — بلا مسّ القيمة.
   ------------------------------------------------------------

   فالتعديل على المدد وحدها: الضباب يُحسم في ٣٦٠ملّي‌ث بدل ٩٠٠ ويكمل
   الظهورَ والانزلاقَ ما هو عتاديٌّ بالكامل، والتراكب يضيق من ١.٧ث إلى
   نصف ذلك. والعين تقرأ «خرج من الضباب» لا مدّته.
   وترقيةٌ قبل البدء لا عنده، تُرفع فور الكشف فلا تتراكم الطبقات.
   ============================================================ */
#qxd4-root .mag .entry {
  transition-property: opacity, transform, filter;
  transition-duration: 640ms, 900ms, 360ms;
  transition-delay: calc(var(--i, 0) * 62ms);
}
#qxd4-root .mag .dept:not(.in) .entry { will-change: opacity, transform, filter; }
#qxd4-root .mag .dept.in .entry { will-change: auto; }

/* ٧٥ صورةً بمرشّح لونٍ تمنع الترقية التلقائيّة للماسح، فتُطلَب صراحةً
   ليمرّ التمرير على المُركِّب لا على المعالج. */
#qxd4-root .scroll { will-change: scroll-position; }

@media (prefers-reduced-motion: reduce) {
  #qxd4-root .mag .entry { transition-duration: 200ms, 200ms, 160ms; }
}

/* ============================================================
   الحفلة — طبقةٌ خارج ‎#qxd4-root‎ (ابنةُ ‎body‎ كما تشترط الستارة).

   ⚠ لا ‎inset‎ في أيّ قاعدةٍ هنا: تسقط صامتةً على كروم ٣٨ (تلفزيون
   LG) وبوّابةُ البناء ترفضها. الجهاتُ الأربع صريحة.
   ⚠ ولا يصلها تصفيرُ الجذر وتصلها أنماطُ جِلِّي‌فِن — فالتصفير صريح.
   ============================================================ */
/* ⚠ الإغلاق بـ‎display‎ لا بـ‎visibility‎. الستارة تفرض
   ‎html.qxd4-on body > .qxd4-layer { visibility: visible !important }‎
   على **كلّ** طبقة، فـ‎visibility: hidden‎ هنا لا يفوز أبداً: تختفي
   الطبقة بصريّاً بـ‎opacity: 0‎ وتبقى تبتلع كلَّ نقرةٍ في الشاشة —
   قِيسَ بعد الإلغاء: ٣ من ٣ نقاطٍ محجوبة بعد ثانيتين، أي أنّ
   التطبيق كلَّه يبدو معلّقاً. و‎pointer-events: none‎ على الأمّ لا
   يكفي لأنّ ‎.qpt-join‎ يعيدها ‎auto‎ لنفسه.
   ‎display: none‎ لا تمسّها قاعدةُ الستارة، فهي الوحيدة المضمونة.
   والثمنُ فقدُ تلاشي الفتح — وهو أرخص من شاشةٍ لا تُنقر. */
.qxd4-party {
  display: none;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483100;
  direction: rtl; color: #e8dfd0;
  font-family: 'Tajawal', 'SF Arabic', system-ui, sans-serif;
  pointer-events: none;
}
.qxd4-party.on { display: block; }
.qxd4-party *, .qxd4-party *::before, .qxd4-party *::after { box-sizing: border-box; }
.qxd4-party button {
  font: inherit; color: inherit; background: none; border: 0;
  cursor: pointer; padding: 0; margin: 0;
}
.qxd4-party input {
  font: inherit; color: #e8dfd0; background: #14161c;
  border: 1px solid #2a2f3a; border-radius: 10px; padding: 9px 12px; width: 100%;
}
.qxd4-party input:focus { outline: 2px solid #d8b45f; outline-offset: 1px; }

/* ---- بطاقة الدخول ---- */
.qpt-join {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(6,7,9,.86); pointer-events: auto;
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.qpt-join[hidden] { display: none; }
.qpt-card {
  width: 100%; max-width: 330px; background: #0f1116;
  border: 1px solid #262c36; border-radius: 18px; padding: 22px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
}
.qpt-card h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.qpt-card p { margin: 0 0 16px; font-size: 13px; color: #9aa1ad; line-height: 1.7; }
.qpt-card label {
  display: block; font-size: 12px; color: #9aa1ad; margin: 12px 0 5px;
}
.qpt-row { display: flex; gap: 8px; margin-top: 16px; }
/* ⚠ مسبوقةٌ بـ‎.qxd4-party‎ عمداً. التصفيرُ أعلاه ‎.qxd4-party button‎
   خصوصيّتُه (صنفٌ + نوع) تغلب صنفاً واحداً، فيمحو خلفيّةَ الزرّ
   وحشوَه ويرسمه شفّافاً بلا أثرٍ في أيّ فحص — نفس فخّ ‎.qd-play‎
   الموصوف في ‎core/find.js‎، وقد وقعتُ فيه هنا فعلاً وقِيسَ:
   ‎background: none‎ و‎padding: 0px‎ على زرّ الدخول الذهبيّ. */
.qxd4-party .qpt-go {
  flex: 1; background: linear-gradient(180deg,#e6cd8a,#d8b45f); color: #16130a;
  border-radius: 11px; padding: 10px; font-weight: 700;
}
.qxd4-party .qpt-x {
  border: 1px solid #2a2f3a; border-radius: 11px; padding: 10px 14px; color: #c9d0da;
}
.qxd4-party .qpt-x:hover { border-color: #4a5260; }
.qxd4-party .qpt-wide { flex: 1; }

/* المدعوُّ برابطٍ لا يحتاج قلبَ تأكيدٍ بعد الآن: بطاقتُه تُفتح على
   كلمة السرّ مباشرةً (‎showPass‎ في ‎party/ui.js‎) — القاعة معلومةٌ من
   الرابط فلا قائمةَ تشتّته ولا زرَّ إنشاءٍ يغريه بالخطأ. */
/* فاصلٌ يفرز الفعلين بصريّاً */
.qpt-or {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 4px; color: #6f7684; font-size: 11.5px;
}
.qpt-or::before, .qpt-or::after {
  content: ''; flex: 1; height: 1px; background: #232833;
}
.qpt-msg { margin-top: 12px; font-size: 12.5px; color: #f0a3a1; min-height: 17px; }

/* ---- القاعات المفتوحة: تُعرض ويُضغط عليها، لا رقمَ يُكتب ---- */
.qpt-rooms { max-height: 220px; overflow-y: auto; margin-top: 4px; }
.qxd4-party .qpt-rm {
  display: block; width: 100%; text-align: right;
  background: #14161c; border: 1px solid #262c36; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.qxd4-party .qpt-rm:hover { border-color: #d8b45f; }
.qxd4-party .qpt-rm b { display: block; font-size: 14px; color: #e8dfd0; }
.qxd4-party .qpt-rm span {
  display: block; font-size: 12px; color: #9aa1ad; margin-top: 3px;
}
.qpt-none { font-size: 12.5px; color: #7d8492; padding: 10px 2px; }

/* ---- منزلقا الصوت: الفيلم والرفاق ---- */
.qxd4-party .qpt-vol { padding: 10px 12px; border-bottom: 1px solid #1e232c; }
.qxd4-party .qpt-vol[hidden] { display: none; }
.qxd4-party .qpt-vol label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: #9aa1ad; margin: 4px 0 2px;
}
.qxd4-party .qpt-vol b { color: #d8b45f; font-weight: 700; }
.qxd4-party .qpt-vol input[type="range"] {
  width: 100%; margin: 2px 0 8px; padding: 0;
  background: transparent; border: 0; accent-color: #d8b45f;
}

/* ---- حاجزُ التشغيل الآليّ: ضغطةٌ واحدةٌ يرضاها المتصفّح ---- */
.qxd4-party .qpt-tap {
  position: absolute; top: 50%; right: 50%;
  transform: translate(50%, -50%);
  pointer-events: auto;
  background: rgba(12,14,19,.95); border: 1px solid #d8b45f;
  border-radius: 18px; padding: 22px 34px; text-align: center;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.95);
}
.qxd4-party .qpt-tap[hidden] { display: none; }
.qxd4-party .qpt-tap b { display: block; font-size: 34px; color: #d8b45f; }
.qxd4-party .qpt-tap span {
  display: block; font-size: 13.5px; color: #e8dfd0; margin-top: 8px;
}

/* ---- عجزُ الجهاز: يُسمّى لا يُسكَت عنه ---- */
.qpt-cant {
  position: absolute; top: auto; right: 14px; bottom: 84px; left: 14px;
  pointer-events: auto;
  background: rgba(43,17,17,.95); border: 1px solid #5b2f2f; color: #f0c7c5;
  border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.7;
}
.qpt-cant[hidden] { display: none; }

/* ---- «فلان يحمّل…» والمايك المتعثّر ---- */
.qpt-wait {
  padding: 6px 11px; border-bottom: 1px solid #1e232c;
  font-size: 11.5px; color: #e6cd8a;
}
.qpt-wait[hidden] { display: none; }
.qxd4-party .qpt-mic.bad { border-color: #f0a3a1; color: #f0a3a1; }

/* ---- الشريط فوق الفيلم ---- */
/* ‎width‎ + ‎max-width‎ بدل ‎min()‎: النتيجة واحدة، والدعم أوسع —
   وكروم ٣٨ (تلفزيون LG) هو الهدف الأضعف في هذا المستودع. (وتوجد
   ‎min()‎ في مواضع أخرى من هذا الملفّ؛ إن تبيّن أنّها تعمل هناك على
   التلفزيون فلا فرق، وإن لم تعمل فهذه القاعدة سليمةٌ سلفاً.) */
.qpt-bar {
  position: absolute; top: auto; right: 14px; bottom: 14px; left: auto;
  width: 300px; max-width: 88vw; pointer-events: auto;
  background: rgba(12,14,19,.94); border: 1px solid #262c36; border-radius: 16px;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.92);
  display: flex; flex-direction: column;
}
.qpt-bar[hidden] { display: none; }
.qpt-head {
  display: flex; align-items: center; gap: 7px; padding: 9px 11px;
  border-bottom: 1px solid #1e232c; font-size: 12px;
}
.qpt-grow { flex: 1; }
.qpt-dot { width: 7px; height: 7px; border-radius: 50%; background: #7ee787; flex: none; }
.qpt-who i {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  background: #2a3040; color: #e8dfd0; font-style: normal; font-size: 11px;
  line-height: 20px; text-align: center; margin-left: -5px;
  border: 1.5px solid #0c0e13;
}
.qpt-who i.h { background: #d8b45f; color: #16130a; }
.qpt-who i.s { border-color: #7ee787; }
.qpt-who em { font-style: normal; color: #7d8492; margin-right: 6px; }
.qpt-state { color: #9aa1ad; padding: 0; }
/* الفعلُ يبدو فعلاً: النصُّ الميّت لا يُنقر ولا يُطلب منه أن يُنقر */
.qxd4-party .qpt-state.act {
  color: #e6cd8a; border: 1px solid #4a4326; border-radius: 8px;
  padding: 3px 8px; font-size: 11.5px;
}
.qxd4-party .qpt-state.act:hover { border-color: #d8b45f; }

/* المايك: ثلاثُ حالاتٍ تُقرأ بلمحة */
.qxd4-party .qpt-room {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  color: #d8b45f; letter-spacing: .06em; border: 1px solid #4a4326;
  border-radius: 6px; padding: 1px 5px;
}
.qxd4-party .qpt-room:empty { display: none; }
.qxd4-party .qpt-sync {
  font-size: 10.5px; font-family: ui-monospace, Menlo, monospace;
  border: 1px solid #2a2f3a; border-radius: 7px; padding: 2px 6px;
  color: #7d8492; line-height: 1.3; min-width: 42px; text-align: center;
}
.qxd4-party .qpt-sync.ok { color: #7ee787; border-color: #2f5b38; }
.qxd4-party .qpt-sync.warm { color: #e6cd8a; border-color: #4a4326; }
.qxd4-party .qpt-sync.bad { color: #f0a3a1; border-color: #5b2f2f; }
.qxd4-party .qpt-mic { font-size: 13px; line-height: 1; }
.qxd4-party .qpt-mic.on { border-color: #7ee787; }
.qxd4-party .qpt-mic.muted { border-color: #f0a3a1; opacity: .8; }

/* حبّةُ الفشار: ما يبقى بعد طيّ الشريط. الغرفةُ قائمةٌ خلفها —
   الطيُّ إخفاءٌ لا خروج. */
.qpt-peek {
  position: absolute; top: auto; right: 14px; bottom: 14px; left: auto;
  width: 44px; height: 44px; border-radius: 50%; pointer-events: auto;
  background: rgba(12,14,19,.94); border: 1px solid #262c36;
  font-size: 19px; line-height: 1;
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.9);
}
.qpt-peek[hidden] { display: none; }
.qxd4-party .qpt-peek:hover { border-color: #d8b45f; }
@media (max-width: 560px) {
  .qpt-peek { right: 10px; bottom: 10px; }
}
.qxd4-party .qpt-head .qpt-x { padding: 4px 8px; border-radius: 8px; font-size: 11.5px; }

.qpt-mo { display: flex; gap: 4px; padding: 8px 11px; border-bottom: 1px solid #1e232c; }
.qxd4-party .qpt-mo button {
  border: 1px solid #242a34; border-radius: 9px; padding: 3px 7px; font-size: 15px;
  line-height: 1.15; transition: transform 90ms, border-color 140ms;
}
.qxd4-party .qpt-mo button:hover { border-color: #d8b45f; transform: translateY(-2px); }
.qxd4-party .qpt-mo button:active { transform: translateY(0) scale(.92); }

.qpt-chat {
  max-height: 190px; overflow-y: auto; padding: 9px 11px;
  font-size: 12.5px; line-height: 1.65;
}
.qpt-m { margin-bottom: 5px; word-break: break-word; }
.qpt-m b { color: #d8b45f; font-weight: 700; }
.qpt-say { padding: 9px 11px; border-top: 1px solid #1e232c; }
.qpt-say input { padding: 7px 10px; font-size: 12.5px; }

/* ---- اللحظات الطافية ---- */
.qpt-float {
  position: absolute; top: auto; right: 0; bottom: 96px; left: 0;
  height: 0; pointer-events: none;
}
.qpt-float b {
  position: absolute; bottom: 0; font-size: 26px; font-weight: 400;
  line-height: 1; animation: qpt-rise 2.6s cubic-bezier(.22,.7,.3,1) forwards;
}
@keyframes qpt-rise {
  0%   { opacity: 0; transform: translateY(10px) scale(.7); }
  12%  { opacity: 1; transform: translateY(0) scale(1.15); }
  30%  { transform: translateY(-26px) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .qpt-float b { animation: none; opacity: 1; }
  .qxd4-party .qpt-mo button { transition: none; }
}
@media (max-width: 560px) {
  .qpt-bar { right: 10px; bottom: 10px; left: 10px; width: auto; }
  .qpt-chat { max-height: 130px; }
}

/* ============================================================
   القمرة — للمالك داخل الإعدادات (screens/cockpit.js)
   اللون يقول الحالة قبل القراءة: ذهبٌ للسلامة، مرجانٌ لما يحتاجك، رمادٌ
   لما لم يُقس. لا ‎inset‎ (تسقط صامتةً على كروم ٣٨).
   ============================================================ */
.qc { --ok: #c9a661; --bad: #ff8c7a; --warn: #e0b35c; --unk: rgba(232,223,208,.3); }
/* ‎#qxd4-root h1,h2 {margin:0}‎ (السطر ٢٨) يغلب ‎.qs-wrap > h1‎ و‎.qs-block h2‎ بخصوصيّته — فكانت
   عناوين الإعدادات بلا هوامش أصلًا. تُعاد هنا بالخصوصيّة نفسها. */
#qxd4-root .qs-wrap > h1 { margin-bottom: 26px; }
#qxd4-root .qs-block h2 { margin-bottom: 6px; }
.qc-head { margin-bottom: 14px; }
#qxd4-root .qc-head h2 { margin-bottom: 10px; }
.qc-pulse {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 4px;
  background: rgba(232,223,208,.04); border: 1px solid rgba(232,223,208,.08);
}
.qc-pulse i {
  flex: 0 0 auto; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%;
  background: var(--unk); box-shadow: 0 0 0 0 rgba(201,166,97,0);
}
.qc-pulse.ok i { background: var(--ok); animation: qc-beat 2.4s var(--e) infinite; }
.qc-pulse.warn i { background: var(--warn); }
.qc-pulse.bad i { background: var(--bad); animation: qc-beat-bad 1.2s var(--e) infinite; }
.qc-pulse.wait i { animation: qc-beat 1s var(--e) infinite; }
@keyframes qc-beat { 0% { box-shadow: 0 0 0 0 rgba(201,166,97,.45); } 70% { box-shadow: 0 0 0 10px rgba(201,166,97,0); } 100% { box-shadow: 0 0 0 0 rgba(201,166,97,0); } }
@keyframes qc-beat-bad { 0% { box-shadow: 0 0 0 0 rgba(255,140,122,.5); } 70% { box-shadow: 0 0 0 9px rgba(255,140,122,0); } 100% { box-shadow: 0 0 0 0 rgba(255,140,122,0); } }
.qc-pulse b {
  flex: 1 1 220px; font-family: 'Reem Kufi', sans-serif; font-weight: 500;
  font-size: 20px; line-height: 1.35; color: var(--cream);
}
.qc-pulse.bad b { color: #ffd3cb; }
.qc-pulse span { flex: 0 0 100%; font-size: 12px; color: rgba(232,223,208,.45); margin-right: 24px; }

/* ما يحتاجك */
.qc-needs { margin: 10px 0 6px; }
.qc-need {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid rgba(232,223,208,.07);
}
.qc-need > i, .qc-row > i { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--unk); }
.qc-need.high > i, .qc-row.bad.high > i { background: var(--bad); }
.qc-need.mid > i, .qc-need.low > i, .qc-row.bad.mid > i, .qc-row.bad.low > i { background: var(--warn); }
.qc-row.ok > i { background: var(--ok); }
.qc-txt { flex: 1; min-width: 0; }
.qc-txt b { display: block; font-weight: 500; font-size: 14.5px; color: #ede4d4; }
.qc-txt span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.7; color: rgba(232,223,208,.5); overflow-wrap: anywhere; }
.qc-acts { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.qc-why { margin-top: 6px; }
.qc-why p { font-size: 13px; line-height: 1.8; color: rgba(242,226,184,.85); margin: 4px 0 2px; padding-right: 10px; border-right: 2px solid rgba(201,166,97,.5); }
.qc-why small, .qc-think { display: block; font-size: 11px; color: rgba(232,223,208,.38); }

/* الآن — خلايا وقائع */
.qc-now { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 18px; }
.qc-cell { padding: 12px 14px; border-radius: 4px; background: rgba(232,223,208,.035); min-width: 0; }
.qc-cell b { display: block; font: 500 26px/1 'Inter', system-ui; color: var(--cream); direction: ltr; text-align: right; }
.qc-cell b small { font-size: 13px; color: rgba(232,223,208,.5); font-family: 'Tajawal', system-ui; }
.qc-cell span { display: block; margin-top: 5px; font-size: 12.5px; color: rgba(232,223,208,.6); }
.qc-cell em { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; line-height: 1.6; color: rgba(232,223,208,.42); overflow-wrap: anywhere; }

/* الأقسام المطويّة */
.qc-sec { border-top: 1px solid rgba(232,223,208,.08); }
#qxd4-root .qc-sech {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 0;
  text-align: right; color: inherit;
}
.qc-sech b { font-family: 'Reem Kufi', sans-serif; font-weight: 500; font-size: 16px; color: var(--gold); }
.qc-chev { margin-right: auto; font-style: normal; font-size: 18px; color: rgba(232,223,208,.4); transform: rotate(0deg); transition: transform var(--t2) var(--e); }
.qc-sec.open .qc-chev { transform: rotate(-90deg); }
.qc-secb { padding-bottom: 16px; }

/* قوائم الثوابت والحرّاس */
.qc-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(232,223,208,.06); }
.qc-row.unk .qc-txt b { color: rgba(232,223,208,.55); }
.qc-tag { display: inline-block; margin-right: 6px; font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(255,140,122,.14); color: #ffb4a8; vertical-align: 2px; }
.qc-tag.on { background: rgba(201,166,97,.16); color: var(--gold); }
.qc-tail { margin-top: 8px; padding: 10px 12px; border-radius: 3px; background: rgba(0,0,0,.35); font: 11px/1.6 ui-monospace, Menlo, monospace; color: rgba(232,223,208,.7); direction: ltr; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }

/* الأزرار */
#qxd4-root .qc-btn {
  padding: 8px 14px; border-radius: 3px; font-size: 13px; font-weight: 500;
  background: var(--gold); color: #14161a; white-space: nowrap;
  transition: opacity var(--t2) var(--e), background var(--t2) var(--e);
}
#qxd4-root .qc-btn.ghost { background: transparent; color: var(--gold); border: 1px solid rgba(201,166,97,.45); }
#qxd4-root .qc-btn.sm { padding: 6px 11px; font-size: 12px; }
#qxd4-root .qc-btn[disabled], #qxd4-root .qs-tier[disabled], #qxd4-root .qs-sw[disabled] { opacity: .45; cursor: default; }

/* الأعضاء — وجوه */
.qc-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.qc-m { padding: 14px 16px; border-radius: 4px; background: rgba(232,223,208,.035); min-width: 0; }
.qc-m.me { box-shadow: inset 2px 0 0 var(--gold); }
.qc-m.frozen { opacity: .6; }
.qc-mhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.qc-av {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(201,166,97,.16) center/cover no-repeat; color: var(--cream);
  font: 500 16px/44px 'Reem Kufi', sans-serif; text-align: center;
}
.qc-mhead b { font-size: 15px; color: #f0e7d6; unicode-bidi: plaintext; }
.qc-mhead em { font-style: normal; font-size: 10.5px; padding: 2px 7px; margin-right: 6px; border-radius: 999px; background: rgba(232,223,208,.08); color: rgba(232,223,208,.55); vertical-align: 2px; }
.qc-mhead em.warn { background: rgba(255,180,168,.12); color: #ffb4a8; }
.qc-mhead em.on { background: transparent; color: #7fd99a; padding: 0; }
.qc-q { margin: 6px 0; }
.qc-qbar { height: 4px; border-radius: 2px; background: rgba(232,223,208,.1); overflow: hidden; direction: ltr; }
.qc-qbar i { display: block; height: 100%; background: var(--gold); transition: width var(--t3) var(--e); }
.qc-qbar.ai i { background: #9fc2ff; }
.qc-q span { display: block; margin-top: 5px; font-size: 11.5px; color: rgba(232,223,208,.5); }
.qc-req { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.qc-req span { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(232,223,208,.07); color: rgba(232,223,208,.65); }
.qc-req span.pending { background: rgba(224,179,92,.14); color: #e9c886; }
.qc-pins { font-size: 11.5px; color: rgba(232,223,208,.5); margin: 6px 0; }
.qc-macts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.qc-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
#qxd4-root .qc-inline input {
  flex: 1 1 120px; min-width: 0; padding: 7px 10px; border-radius: 3px; font-size: 13px;
  background: rgba(0,0,0,.35); color: #ede4d4; border: 1px solid rgba(232,223,208,.18);
}
#qxd4-root .qc-inline input[type=number] { flex: 0 0 86px; direction: ltr; text-align: center; font-family: 'Inter', system-ui; }
.qc-inline > span { font-size: 12px; color: rgba(232,223,208,.5); }

/* الدفتر */
.qc-day { font-family: 'Reem Kufi', sans-serif; font-size: 12.5px; color: rgba(201,166,97,.8); margin: 14px 0 4px; }
.qc-le { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(232,223,208,.05); }
.qc-lt { flex: 0 0 40px; font: 400 11.5px/1.7 'Inter', system-ui; color: rgba(232,223,208,.38); direction: ltr; }
.qc-la { flex: 0 0 auto; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: rgba(232,223,208,.07); color: rgba(232,223,208,.6); white-space: nowrap; }
.qc-le.block .qc-la, .qc-le.inv_fail .qc-la, .qc-le.needs_you .qc-la, .qc-le.fail .qc-la, .qc-le.cmd_fail .qc-la { background: rgba(255,140,122,.14); color: #ffb4a8; }
.qc-le.gift .qc-la, .qc-le.inv_ok .qc-la, .qc-le.cmd_done .qc-la { background: rgba(201,166,97,.16); color: var(--gold); }
.qc-le .qc-txt b { font-size: 13.5px; }
.qc-le .qc-txt span { font-size: 12px; line-height: 1.6; }

/* الأوامر */
.qc-cmds { margin-top: 12px; }
.qc-cmd { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 0; color: rgba(232,223,208,.7); }
.qc-cmd i { width: 7px; height: 7px; border-radius: 50%; background: var(--unk); flex: 0 0 auto; }
.qc-cmd.pend i { background: var(--warn); animation: qc-beat 1.4s var(--e) infinite; }
.qc-cmd.done i { background: var(--ok); }
.qc-cmd.failed i, .qc-cmd.expired i { background: var(--bad); }
.qc-cmd span { color: rgba(232,223,208,.45); }

/* الذكاء */
.qc-digest { margin: 12px 0; padding: 14px 16px; border-radius: 4px; background: rgba(201,166,97,.06); border: 1px solid rgba(201,166,97,.18); }
.qc-digest b { display: block; font-family: 'Reem Kufi', sans-serif; font-weight: 500; font-size: 14px; color: var(--gold); margin-bottom: 6px; }
.qc-digest p { font-size: 14px; line-height: 1.9; color: rgba(242,226,184,.9); }
.qc-digest .qc-comment { font-size: 15px; color: var(--cream); margin-bottom: 8px; }
.qc-digest .qc-facts { font-size: 12.5px; color: rgba(232,223,208,.62); }

/* التنبيه القصير */
.qc-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); opacity: 0;
  padding: 11px 18px; border-radius: 4px; background: #1a1d21; color: var(--cream);
  border: 1px solid rgba(201,166,97,.4); font-size: 13.5px; z-index: 2147483000;
  transition: opacity var(--t2) var(--e), transform var(--t2) var(--e); pointer-events: none; max-width: 90vw;
}
.qc-toast.in { opacity: 1; transform: translate(-50%, 0); }
.qc-toast.bad { border-color: rgba(255,140,122,.5); color: #ffd3cb; }

@media (max-width: 520px) {
  .qc-pulse b { font-size: 17px; }
  .qc-need { flex-wrap: wrap; }
  .qc-acts { flex-direction: row; flex: 0 0 100%; padding-right: 20px; }
}

/* ============================================================
   الترافيك — لوحة سقف المشاهدة (traffic.js، للمالك داخل الإعدادات).
   تستعير مفاتيح الإعدادات (‎qs-row/qs-sw/qs-tier‎) وأزرار القمرة
   (‎qc-btn‎) عمداً: لوحةٌ جديدة بلغةٍ معروفة، لا لغةٌ ثالثة.
   ============================================================ */
.qt { --cut: #ff8c7a; --hot: #e0b35c; }
.qt-eng { margin-bottom: 18px; }
.qt-state {
  padding: 12px 14px; border-radius: 3px; margin-bottom: 4px;
  border: 1px solid rgba(232,223,208,.14); background: rgba(232,223,208,.03);
}
.qt-state.armed { border-color: rgba(201,166,97,.45); background: rgba(201,166,97,.07); }
.qt-state b { font-size: 14px; font-weight: 500; color: #ede4d4; }
.qt-state b.on { color: var(--gold); }
.qt-state span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.7; color: rgba(232,223,208,.55); }
.qt-state em {
  display: block; margin-top: 7px; font-style: normal;
  font: 400 11px/1 'Inter', system-ui; color: rgba(232,223,208,.35);
}
.qt-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 13px; }
.qt-msg { font-size: 12px; color: rgba(232,223,208,.5); }
.qt-msg.ok { color: var(--gold); }

.qt-list { display: grid; gap: 2px; }
.qt-m { padding: 13px 0; border-bottom: 1px solid rgba(232,223,208,.07); }
.qt-mh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qt-mh b { font-size: 14px; font-weight: 500; color: #ede4d4; }
.qt-mh > span {
  margin-inline-start: auto; font-size: 12px; color: rgba(232,223,208,.5);
}
.qt-mh em {
  font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 2px;
  border: 1px solid rgba(232,223,208,.25); color: rgba(232,223,208,.6); white-space: nowrap;
}
.qt-mh em.cut, .qt-mh em.over { border-color: rgba(255,140,122,.55); color: var(--cut); }
.qt-mh em.would, .qt-mh em.hot { border-color: rgba(224,179,92,.5); color: var(--hot); }
.qt-mh em.cu { border-color: rgba(201,166,97,.42); color: var(--gold); }
.qt-bar {
  margin-top: 9px; height: 3px; border-radius: 2px;
  background: rgba(232,223,208,.1); overflow: hidden;
}
.qt-bar i { display: block; height: 100%; background: var(--gold); }
.qt-m.hot .qt-bar i, .qt-m.would .qt-bar i { background: var(--hot); }
.qt-m.over .qt-bar i, .qt-m.cut .qt-bar i { background: var(--cut); }
.qt-sub { margin-top: 7px; font-size: 11.5px; line-height: 1.6; color: rgba(232,223,208,.42); }
.qt-m .qc-btn.sm { margin-top: 10px; }

/* نموذج الحدّ — شبكةٌ من عمودين كنظيره في دفتر البيت */
.qt-lim { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 11px; }
#qxd4-root .qt-lim input {
  width: 100%; box-sizing: border-box; background: rgba(232,223,208,.06);
  border: 1px solid rgba(232,223,208,.18); border-radius: 2px; color: #ede4d4;
  font: 400 13px/1.2 'Tajawal', sans-serif; padding: 8px 10px;
  -webkit-appearance: none; appearance: none;
}
#qxd4-root .qt-lim input:focus { outline: none; border-color: var(--gold); }
#qxd4-root .qt-lim button {
  font: 400 12.5px/1 'Tajawal', sans-serif; padding: 9px 0; border-radius: 2px;
  border: 1px solid rgba(232,223,208,.22); color: #ede4d4; background: none;
}
#qxd4-root .qt-lim button.save { background: var(--gold); color: #140b03; border-color: var(--gold); }
#qxd4-root .qt-lim button[disabled] { opacity: .35; }
.qt-lim .msg { grid-column: 1 / -1; font-size: 11.5px; color: var(--cut); }
.qt-lim .msg.ok { color: var(--gold); }

@media (max-width: 520px) {
  .qt-lim { grid-template-columns: 1fr; }
  .qt-mh > span { margin-inline-start: 0; flex: 0 0 100%; }
}