/* ==========================================================================
   صفحة «أبطال الجودة» (`#/` — الصفحة الرئيسية). تحفيز لموظفي المبيعات:
   ترتيب شهري بالنقط، أعلى خمسة بمكافآتهم، وسجل مفصّل لكل نقطة.

   🔴 **مافيش لون ثابت لحاجة ليها توكن.** الصفحة بتشتغل في المظهرين،
      والتوكنات (`--card` · `--ink` · `--primary`…) هي اللي بتتبدّل مع
      مفتاح المظهر. الألوان الثابتة الوحيدة هنا هي **ألوان المراكز**
      (ذهبي/فضي/برونزي/بنفسجي/فيروزي) — دي مالهاش توكن في النظام لأنها
      معجم خاص بالصفحة دي، وكل واحد منها **مكتوب للمظهرين**.
   ⚠️ **والصفحة الأصل كانت بـ`light-dark()`** وبتقلب المظهر بـ`html.dark`،
      واحنا بنقلب بـ`[data-theme]` — فسيبها زي ما هي كان معناه صفحة
      بتفضل نهارية جوّه نظام ليلي، **بلا أي خطأ**.
   ========================================================================== */

/* ألوان المراكز الخمسة — نهاري افتراضيًا */
:root {
  --qh-r1: #91690c; --qh-r1-tint: #fff7de; --qh-r1-edge: #d9bb63;
  --qh-r2: #51677d; --qh-r2-tint: #eef3f8; --qh-r2-edge: #b4c3d2;
  --qh-r3: #9b5b33; --qh-r3-tint: #fff0e5; --qh-r3-edge: #d5a582;
  --qh-r4: #6c4ba5; --qh-r4-tint: #f3edfc; --qh-r4-edge: #c2acdf;
  --qh-r5: #147f88; --qh-r5-tint: #e6f7f8; --qh-r5-edge: #8fc9ce;
  --qh-gold: #bc8c15;
  /* لمعة «مبروك يا بطل!» — ⚠️ **مش أبيض**: لمعة فاتحة على خلفية فاتحة كانت
     بتخفي الحرف لحظة ما تعدّي عليه («بطل» اتقرت «بطا» في الصورة). */
  --qh-shine-a: #a87a0c; --qh-shine-b: #d49a12;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --qh-r1: #f1ce72; --qh-r1-tint: #3b3423; --qh-r1-edge: #9a813d;
    --qh-r2: #bdcfdf; --qh-r2-tint: #293541; --qh-r2-edge: #637c91;
    --qh-r3: #e9b18d; --qh-r3-tint: #3e2d24; --qh-r3-edge: #a17251;
    --qh-r4: #c9b0f3; --qh-r4-tint: #32283f; --qh-r4-edge: #80649f;
    --qh-r5: #92dce1; --qh-r5-tint: #223b3e; --qh-r5-edge: #4c959c;
    --qh-gold: #ffdc80;
    --qh-shine-a: #f1ce72; --qh-shine-b: #fff1b8;
  }
}
:root[data-theme="dark"] {
  --qh-r1: #f1ce72; --qh-r1-tint: #3b3423; --qh-r1-edge: #9a813d;
  --qh-r2: #bdcfdf; --qh-r2-tint: #293541; --qh-r2-edge: #637c91;
  --qh-r3: #e9b18d; --qh-r3-tint: #3e2d24; --qh-r3-edge: #a17251;
  --qh-r4: #c9b0f3; --qh-r4-tint: #32283f; --qh-r4-edge: #80649f;
  --qh-r5: #92dce1; --qh-r5-tint: #223b3e; --qh-r5-edge: #4c959c;
  --qh-gold: #ffdc80;
  --qh-shine-a: #f1ce72; --qh-shine-b: #fff1b8;
}

/* ─────────────────────── رأس الصفحة ───────────────────────
   عنوان الصفحة على جنب، وأدوات الشهر والقواعد على الجنب التاني —
   و**بيلفّوا تحت بعض** على الضيّق بدل ما يتحشروا. `.page-head` العام ماعندهوش
   مكان للأدوات، فالصف ده بيلفّه هو والأدوات بدل ما ينزلوا سطر مستقل. */
.qh-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.qh-head-row .page-head { margin-bottom: 10px; }
.qh-headtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 18px; }
.qh-monthpick { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }

/* ─────────────────────── لافتة السباق ─────────────────────── */
/* 🔴 **التدرّج ثابت عن قصد** — دي لوحة، مش سطح واجهة: نص أبيض على أخضر
   عميق في المظهرين. ربطها بـ`--card` كان هيخلّيها مستطيل فاتح في النهار
   والنص الأبيض جوّاه مالوش تباين. */
.qh-race {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative; overflow: hidden;
  padding: 28px 34px; border-radius: var(--radius);
  background: linear-gradient(115deg, #0e4034, #196c59);
  color: #fff; margin: 4px 0 26px;
  box-shadow: var(--shadow);
}
.qh-race::after {
  content: ''; position: absolute; width: 340px; height: 340px;
  inset-inline-start: -40px; border: 1px solid rgba(243, 218, 150, .19);
  border-radius: 50%; pointer-events: none;
}
.qh-race h2 { font-family: var(--font-display); font-size: 2rem; margin: 8px 0; }
.qh-race p { color: #d4e8dd; margin: 0; }
.qh-eyebrow { font-size: .75rem; color: #f1d492; letter-spacing: 1px; }
.qh-race-tag {
  display: inline-block; margin-top: 12px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px; padding: 5px 12px; font-size: .75rem;
}
.qh-cup {
  font-size: 76px; text-align: center; padding: 0 25px; line-height: 1;
  filter: drop-shadow(0 12px 15px rgba(8, 43, 64, .5));
  animation: qh-float 4s ease-in-out infinite;
}
.qh-cup span { display: block; color: #efce87; font-size: .8rem; }

/* ─────────────────────── شرط التارجت ─────────────────────── */
.qh-target {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  padding: 16px 20px; margin: 0 0 22px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--ink);
}
.qh-target strong { color: var(--accent); }

/* ─────────────────────── رؤوس الأقسام ─────────────────────── */
.qh-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.qh-block-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; }
.qh-badge {
  background: var(--primary-tint); color: var(--primary);
  padding: 4px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600;
}

/* ─────────────────────── بطاقات الأبطال ─────────────────────── */
.qh-winners {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px; align-items: stretch; margin: 0 0 26px;
}
.qh-winner {
  position: relative; overflow: hidden; text-align: center; cursor: pointer;
  padding: 25px 10px 0; border-radius: 16px;
  border: 1px solid var(--rank-edge); border-top: 4px solid var(--rank-edge);
  background: linear-gradient(160deg, var(--card), var(--rank-tint));
  color: var(--ink); font: inherit;
  transition: transform .25s, box-shadow .25s;
}
.qh-winner:hover { box-shadow: var(--shadow); }   /* الحركة نفسها (الميل) تحت في «حركات البطاقات» */
.qh-winner:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.qh-winner[data-rank="1"] { --rank-color: var(--qh-r1); --rank-tint: var(--qh-r1-tint); --rank-edge: var(--qh-r1-edge); }
.qh-winner[data-rank="2"] { --rank-color: var(--qh-r2); --rank-tint: var(--qh-r2-tint); --rank-edge: var(--qh-r2-edge); }
.qh-winner[data-rank="3"] { --rank-color: var(--qh-r3); --rank-tint: var(--qh-r3-tint); --rank-edge: var(--qh-r3-edge); }
.qh-winner[data-rank="4"] { --rank-color: var(--qh-r4); --rank-tint: var(--qh-r4-tint); --rank-edge: var(--qh-r4-edge); }
.qh-winner[data-rank="5"] { --rank-color: var(--qh-r5); --rank-tint: var(--qh-r5-tint); --rank-edge: var(--qh-r5-edge); }

/* لمعة بتمرّ على المتصدّر وحده */
.qh-winner[data-rank="1"]::after {
  content: ''; position: absolute; inset: -100%; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(223, 188, 80, .13) 50%, transparent 58%);
  animation: qh-shine 7s ease-in-out infinite;
}
.qh-medal {
  position: relative; display: grid; place-items: center;
  margin: 16px auto 14px; width: 53px; height: 57px;
  border: 2px solid var(--rank-edge); border-radius: 13px 13px 23px 23px;
  background: var(--rank-tint); color: var(--rank-color);
  font-size: 1.6rem; font-weight: 700;
}
.qh-crown {
  position: absolute; top: -30px; left: 50%;
  transform: translateX(-50%); font-size: 1.9rem; line-height: 1; color: var(--rank-color);
}
.qh-stars {
  display: flex; justify-content: center; align-items: center; gap: 5px;
  min-height: 42px; margin: 8px 0 12px; color: var(--rank-color);
}
.qh-stars span {
  display: inline-block; font-size: 1.35rem; transform-origin: center;
  animation: qh-sparkle 2.8s ease-in-out infinite; animation-delay: var(--star-delay);
}
.qh-winner[data-rank="1"] .qh-stars { color: var(--qh-gold); }
.qh-wname { display: block; font-weight: 600; }
.qh-score {
  display: block; font-family: var(--font-display); font-size: 1.75rem;
  color: var(--rank-color); font-variant-numeric: tabular-nums;
}
.qh-rank { font-size: .75rem; color: var(--muted); }
.qh-prize {
  display: block; margin: 12px auto 2px;
  color: var(--rank-color); font-size: 1.05rem; font-weight: 700;
}
.qh-note { display: block; font-size: .7rem; font-weight: 400; color: var(--muted); margin-top: 4px; }
/* عمود «التذكرة» (رجع 2026-09-23، طلب قطب): كود التذكرة · الجوال · الرابط.
   `nowrap` عشان «AA78048» ماتتكسرش على سطرين في شاشة ضيقة. */
.qh-ticket { white-space: nowrap; }
.qh-ref { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.qh-leader {
  display: block; margin: 16px -10px 0; padding: 11px 7px 13px;
  background: var(--rank-tint); border-top: 1px solid var(--rank-edge);
}
.qh-leader small { display: block; font-size: .7rem; color: var(--muted); }
.qh-leader strong { display: block; font-size: .8rem; color: var(--ink); margin-top: 2px; }
.qh-leader-prize { display: block; margin-top: 5px; font-size: .9rem; font-weight: 700; color: var(--rank-color); }

/* ─────────────────────── الشريط والجدول ─────────────────────── */
.qh-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.qh-toolbar strong { font-family: var(--font-display); font-size: 1.05rem; }
.qh-control {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 9px 12px; border-radius: var(--radius-xs); min-width: 0; font: inherit;
}
.qh-control:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.qh-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 8px 12px; border-radius: var(--radius-xs); cursor: pointer; font: inherit;
  transition: border-color .15s, background .15s;
}
.qh-btn:hover { border-color: var(--primary); background: var(--card-2); }
.qh-btn.sm { padding: 5px 9px; font-size: .78rem; }
.qh-btn[disabled] { opacity: .55; cursor: default; }
.qh-btn.primary {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700;
}
.qh-btn.primary:hover { background: var(--primary-600); border-color: var(--primary-600); }

/* 🔴 **الحاوية هي اللي بتسكرول، مش الصفحة** (قاعدة «محتوى بيتقص من غير
   سكرول»): الجدول `nowrap` بتسع أعمدة، فمن غير الأب ده كان بيمطّ المستند
   أفقيًا على الجوال بدل ما يتسحب جوّه مكانه. */
.qh-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
}
.qh-scroll table { border-collapse: collapse; width: 100%; white-space: nowrap; font-size: .86rem; }
.qh-scroll th {
  color: var(--muted); font-weight: 500; background: var(--bg-2);
  padding: 13px 10px; text-align: center; white-space: nowrap;
}
.qh-scroll td { padding: 15px 12px; border-top: 1px solid var(--line); text-align: center; }
.qh-scroll tbody tr:hover td { background: var(--card-2); }
/* العمود الأول ثابت مع السحب — وفي RTL بدايته الـ**يمين**، فالتثبيت
   بـ`inset-inline-start` (اللي بيتحوّل `right` هنا) مش بـ`left`. */
.qh-scroll td:first-child, .qh-scroll th:first-child {
  text-align: right; position: sticky; inset-inline-start: 0; z-index: 1;
}
.qh-scroll th:first-child { background: var(--bg-2); }
.qh-scroll td:first-child { background: var(--card); }
.qh-scroll tbody tr:hover td:first-child { background: var(--card-2); }
.qh-scroll td.qh-wrap { white-space: normal; min-width: 190px; text-align: right; }
.qh-empty { color: var(--muted); padding: 26px 12px; }
.qh-muted { color: var(--muted); }

.qh-name {
  border: 0; background: transparent; color: var(--ink);
  padding: 4px; cursor: pointer; font: inherit; font-weight: 600;
}
.qh-name:hover { color: var(--primary); text-decoration: underline; }
.qh-num {
  border: 0; background: transparent; color: var(--primary);
  padding: 5px; cursor: pointer; font: inherit; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qh-num:hover { text-decoration: underline; }
.qh-neg { color: var(--danger); }
.qh-total {
  background: var(--primary-tint); color: var(--primary);
  border-radius: 7px; padding: 5px 10px; font-weight: 700;
  display: inline-block; font-variant-numeric: tabular-nums;
}
.qh-gap { display: block; font-size: .7rem; color: var(--muted); }
.qh-track {
  display: block; width: 110px; height: 6px; background: var(--bg-2);
  border-radius: 5px; margin: 6px auto 0; overflow: hidden;
}
.qh-track > span {
  display: block; height: 100%; background: var(--primary); border-radius: 5px;
  position: relative; overflow: hidden;
  transform-origin: right; animation: qh-grow .8s ease-out;
}
.qh-track > span::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, .7) 50%, transparent 85%);
  transform: translateX(130%); animation: qh-glint 2.4s ease-in-out infinite;
}
.qh-scroll tbody tr:nth-child(2n) .qh-track > span::after { animation-delay: .35s; }
.qh-scroll tbody tr:nth-child(3n) .qh-track > span::after { animation-delay: .7s; }
.qh-scroll tbody tr.is-cancelled td { opacity: .6; }

.qh-foot {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  color: var(--muted); font-size: .75rem; margin-top: 12px;
}
.qh-line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.qh-line:last-child { border-bottom: 0; }
.qh-line b { white-space: nowrap; color: var(--primary); font-variant-numeric: tabular-nums; }
.qh-rule-neg b { color: var(--danger); }

.qh-card {
  margin-top: 18px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card);
}
.qh-card h4 { font-size: .95rem; margin: 22px 0 8px; color: var(--primary); }
.qh-card h4:first-child { margin-top: 0; }

/* ─────────────────────── المودالات ────────────────────── */
/* 🔴 **مودال النظام (`openModal`) مش `<dialog>`.** النموذج الأصل كان
   بيستعمل `<dialog>` بـ`::backdrop` بتاعه، ونقل القواعد دي زي ما هي كان
   بيسيب **قواعد بلا عناصر** — وهي نفس فخ «المعرّف المخترع» مقلوبًا:
   تعريف موجود ومالوش أثر، واللي ييجي بعدين يفتكره شغّال. فالمحتوى جوّه
   `.modal` بتاع النظام، واللي تحت بيظبّط جوّاه وبس. */
.qh-rules { max-height: 62vh; overflow: auto; }
.qh-rules h4 {
  font-family: var(--font-display); font-size: .95rem;
  margin: 20px 0 8px; color: var(--primary);
}
.qh-rules h4:first-child { margin-top: 0; }
.qh-rules p { margin: 6px 0; font-size: .85rem; color: var(--muted); }

/* فورم «إضافة نقاط» جوّه نفس المودال */
#qhAddForm label { display: block; margin: 12px 0; font-size: .85rem; color: var(--muted); }
#qhAddForm .qh-control { display: block; width: 100%; margin-top: 5px; color: var(--ink); }
.qh-error { color: var(--danger); min-height: 1.2em; margin: 8px 0; font-size: .85rem; }

/* ─────────────────────── الحركة ─────────────────────── */
@keyframes qh-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes qh-shine { 0%, 65% { transform: translateX(70%); } 100% { transform: translateX(-70%); } }
@keyframes qh-grow { from { transform: scaleX(0); } }
@keyframes qh-glint { 0% { transform: translateX(130%); } 75%, 100% { transform: translateX(-130%); } }
@keyframes qh-sparkle {
  0%, 100% { transform: translateY(0) scale(1); opacity: .8; }
  45% { transform: translateY(-4px) scale(1.14) rotate(8deg); opacity: 1; }
  65% { transform: translateY(0) scale(1); opacity: 1; }
}
/* 🔴 **مفتاح «المؤثرات المتحركة» اتشال** (سارة 2026-09-22: «عايزاها تتحرك
   دايمًا»)، **وقواعده اتشالت معاه** — قاعدة بتوصف عنصر مابقاش بيترسم بتفضل
   شغّالة على الورق واللي بعدنا يفتكرها حيّة. (نفس فخ «المعرّف المخترع»
   مقلوبًا.)
   📌 **وتفضيل النظام فاضل محترم** — وده **مش** المفتاح اللي اتشال: ده إعداد
      في نظام تشغيل المستخدم بيتظبط مرة واحدة لأسباب صحية (دوخة الحركة)،
      ومفيش صفحة من حقها تتخطّاه. */
@media (prefers-reduced-motion: reduce) {
  .qh-race, .qh-cup, .qh-stars span, .qh-winner,
  .qh-track > span, .qh-track > span::after, .qh-winner[data-rank="1"]::after {
    animation: none !important; transition: none !important;
  }
}

/* ─────────────────────── المقاسات ─────────────────────── */
@media (max-width: 1000px) {
  .qh-winners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qh-stars { gap: 2px; }
  .qh-stars span { font-size: 1.1rem; }
}
@media (max-width: 760px) {
  .qh-race { padding: 22px; }
  .qh-race h2 { font-size: 1.6rem; }
  .qh-cup { font-size: 54px; padding: 0 8px; }
}
@media (max-width: 560px) {
  /* 🔴 عمودين، والمتصدّر بعرض الصف — خمسة على ٣٧٥px بيدّوا بطاقة ٦٥px
     مش قادرة تشيل اسم ولا رقم. */
  .qh-winners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qh-winner[data-rank="1"] { grid-column: 1 / -1; }
  .qh-race { gap: 6px; padding: 18px; }
  .qh-race h2 { font-size: 1.35rem; }
  .qh-cup { font-size: 42px; padding: 0; }
  .qh-cup span { display: none; }
  .qh-toolbar { gap: 8px; }
  .qh-toolbar .qh-control { flex: 1 1 100%; }
}

/* ─────────────────── شريط تارجت الفريق ───────────────────
   🔴 **الشرط بقى مقيس مش معلن**: «مشروطة بتحقيق التارجت» لوحدها كانت شرطًا
      مالوش إجابة على الشاشة — الصفحة بتقول «١٥٠٠ جنيه» وجنبها نجمة محدش
      يعرف اتحققت ولا لأ. دلوقتي كل بطاقة بتقول فريقه وصل كام وباقي كام.
   ⚠️ **وقواعد القسم المستقل اتشالت معاه** (`.qh-teams` · `.qh-team`): سارة
      طلبت الحساب **في البطاقات**، والقسم اللي كان جنبها اتشال — وقاعدة
      بتوصف عنصر مابقاش بيترسم بتفضل شغّالة على الورق واللي بعدنا يفتكرها
      حيّة. (فخ «المعرّف المخترع» مقلوبًا.) */

/* شريط التقدّم — جوّه بطاقة البطل. */
/* 🔴 **المجرى شفّاف مش لون صلب** — كان `var(--bg-2)`، وهو لون داكن صلب،
   وعلى خلفية البطاقة المتدرّجة كان بيتقري **شريط مليان** والنسبة صفر
   (بلاغ سارة 2026-09-22). المشكلة كانت في التباين مش في العرض.
   ⚠️ **والمجرى لازم يفضل باين حتى على صفر** — شفافية كاملة كانت هتخلّي
      الشريط يختفي خالص، واللي بيبصّ مايعرفش إن فيه مقياس أصلاً. */
.qh-tm-bar {
  display: block; height: 7px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.qh-tm-bar > span {
  display: block; height: 100%; border-radius: 5px; background: var(--primary);
  transition: width .4s ease;
  /* صفر = مافيش شريط خالص، مش خيط رفيع بيتقري «بدأ» */
  min-width: 0;
}
.qh-target-mini { display: block; margin: 10px -10px 0; padding: 9px 10px 0; }
.qh-target-mini small { display: block; margin-top: 5px; font-size: .68rem; color: var(--muted); }
.qh-target-mini.is-met small { color: var(--ok); }
.qh-target-mini.is-met .qh-tm-bar > span { background: var(--ok); }

/* ─────────────────── حالة المراجعة ───────────────────
   🔴 «مستني المراجعة» حقيقة تالتة غير «اتحسبت» و«اتلغت» — والتلاتة ليهم
      شكل مختلف عن قصد («مش عارفين ≠ صفر ≠ مافيش»). */
.qh-wait { color: var(--warn); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.qh-ok { color: var(--ok); }
.qh-acts { display: block; margin-top: 6px; white-space: nowrap; }
.qh-scroll tbody tr.is-pending td { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.qh-scroll tbody tr.is-pending:hover td { background: color-mix(in srgb, var(--warn) 11%, transparent); }
/* ⚠️ **`.qh-pending` اتشالت مع سطرها من البطاقة** (سارة 2026-09-22) —
   قاعدة بتوصف عنصر مابقاش بيترسم بتفضل شغّالة على الورق واللي بعدنا
   يفتكرها حيّة. و`.qh-pending-dot` (في الجدول) لسه بتترسم. */
/* الرقم المبدئي جنب المحتسب — صغير وبلون التنبيه عشان يبان إنه **لسه
   مااتحسبش**، مش رقم تاني للنقط. */
.qh-wait-num {
  display: block; font-size: .62rem; font-weight: 600; color: var(--warn);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.qh-when { white-space: nowrap; font-size: .8rem; }
.qh-pending-dot { display: block; font-size: .66rem; color: var(--warn); font-weight: 600; margin-top: 3px; }
/* عدّاد «مستني المراجعة» على الزرار من برّه (قطب 2026-09-24) */
.qh-count { display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-inline-start: 6px;
  border-radius: 999px; background: var(--warn); color: #1a1200; font-size: .72rem;
  font-weight: 700; line-height: 1.4em; text-align: center; }
/* فاصل «اليدوي فوق · التلقائي تحت» في السجل */
.qh-group td { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted);
  font-size: .74rem; font-weight: 700; padding: 6px 12px; text-align: start; }
/* عمود «الموظف» في لستة «مستني المراجعة» */
.qh-emp { white-space: nowrap; font-weight: 600; }
.qh-tied {
  position: absolute; top: 8px; inset-inline-end: 8px;
  font-size: .62rem; padding: 2px 7px; border-radius: 20px;
  background: var(--rank-tint); color: var(--rank-color); border: 1px solid var(--rank-edge);
}

/* ─────────────────── أدوات الشريط ومودال المراجعة ─────────────────── */
.qh-tools { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.qh-rev .qh-line b { white-space: normal; text-align: left; }
.qh-rev label { display: block; margin: 14px 0 4px; font-size: .85rem; color: var(--muted); }
.qh-rev .qh-control { display: block; width: 100%; margin-top: 5px; color: var(--ink); }
.qh-rev .qh-note b { color: var(--danger); }
#qhAddForm .qh-range { padding: 0; accent-color: var(--primary); }
#qhAddForm #qhAddPtsOut {
  display: inline-block; min-width: 1.6em; text-align: center;
  color: var(--primary); font-variant-numeric: tabular-nums;
}

/* ⑨ المكافأة مستحقة ولا موقوفة (قطب 2026-09-24) */
.qh-prize.is-held { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.qh-prize.is-held .qh-note { text-decoration: none; display: block; color: var(--danger); }
.qh-prize.is-due .qh-note { color: var(--ok, #2e9e6a); }
.qh-leader-prize.is-held { color: var(--muted); }
/* الشروط التلاتة سطر تحت سطر */
.qh-terms > span { display: block; }

/* ═════════════════ 🎉 «مبروك يا بطل» — بطاقة المستحق ═════════════════
   طلب قطب عبر سارة (2026-09-24): «ندلّع الموظفين ويتحمّسوا… عايزة إبداع
   خارق وحركات حلوة». البطاقة اللي `eligibility().ok` بتاخد:
   • حدّ دهبي بيتنفّس · • كونفيتي بينزل جوّاها · • ميدالية بتتمرجح وحواليها
     بريق · • «مبروك يا بطل!» بلمعة دهبي ماشية على الحروف.
   ⚠️ **الكونفيتي جوّه البطاقة** (`overflow: hidden` موجودة على `.qh-winner`
      أصلاً) — برّاها كان هيغطّي البطاقة اللي جنبها ويخطف ضغطتها.
   ⚠️ **و`pointer-events: none` على كل الطبقات الزيادة** — البطاقة زرار بيفتح
      السجل، وطبقة فوقه بتاكل الضغطة **في صمت**. */
.qh-winner.is-champ {
  border-color: var(--qh-gold); border-top-color: var(--qh-gold);
  /* الدخول مع التوهّج — `animation` واحدة بتلغي اللي قبلها، فالتلاتة في سطر واحد.
     🎭 **والمستحق بيفضل بحركة مركزه** (`--m`) بس أقوى (`--amp`) — نطّة فرحة واحدة
        للكل كانت بترجّع «كل البطاقات بتنطّ» لما أكتر من واحد يستحق (سارة).
        «الحركة الزيادة» هي الاحتفال فوقها: التوهّج والقصاصات والشريط والميدالية. */
  --amp: 1.8;
  animation: qh-enter .75s cubic-bezier(.2, 1.3, .4, 1) var(--enter, 0s) backwards,
             qh-champ-glow 2.6s ease-in-out infinite,
             var(--m) var(--md) ease-in-out calc(var(--enter, 0s) + .9s) infinite;
}
.qh-confetti, .qh-burst-in {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.qh-confetti i, .qh-burst-in i {
  position: absolute; top: -14px; left: var(--x);
  width: 7px; height: 11px; border-radius: 2px; background: var(--c);
  opacity: 0; transform: rotate(var(--rt));
  animation: qh-fall var(--du) linear var(--dl) infinite;
}
.qh-confetti i.is-dot, .qh-burst-in i.is-dot { width: 7px; height: 7px; border-radius: 50%; }
/* المحتوى فوق الكونفيتي — القصاصة بتعدّي **ورا** الرقم مش قدّامه.
   ⚠️ **و«مركز مكرر» و«أنت» والأشعة بيفضلوا `absolute`** (متثبّتين في مكانهم) —
      `relative` هنا كانت هتنزّلهم من مكانهم لجوّه السطر. */
.qh-winner.is-champ > :not(.qh-confetti):not(.qh-tied):not(.qh-rays):not(.qh-you):not(.qh-rise):not(.qh-ribbon):not(.qh-fly) { position: relative; z-index: 1; }
.qh-winner.is-champ > .qh-tied { z-index: 2; }

.qh-champ {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin: 12px auto 0; padding: 7px 12px 7px 10px; width: fit-content; max-width: 100%;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 16%, var(--card)),
                                      color-mix(in srgb, var(--qh-gold) 18%, var(--card)));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ok) 70%, transparent);
  animation: qh-pop-in .7s cubic-bezier(.2, 1.6, .4, 1) both;
}
.qh-champ-medal { position: relative; flex: none; display: grid; place-items: center; }
.qh-champ-medal .qh-medal-svg {
  display: block; transform-origin: 50% 8%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18));
  animation: qh-swing 2.4s ease-in-out infinite;
}
.qh-spark {
  position: absolute; color: var(--qh-gold); font-size: .8rem; line-height: 1;
  animation: qh-twinkle 1.8s ease-in-out infinite;
}
.qh-spark.s1 { top: -4px; inset-inline-start: -6px; }
.qh-spark.s2 { top: 8px; inset-inline-end: -8px; animation-delay: .6s; font-size: .65rem; }
.qh-spark.s3 { bottom: 2px; inset-inline-start: -8px; animation-delay: 1.2s; }
.qh-champ-txt { display: grid; text-align: start; line-height: 1.25; }
.qh-champ-txt b {
  font-family: var(--font-display); font-size: .95rem;
  background: linear-gradient(90deg, var(--ok) 0%, var(--qh-shine-a) 40%, var(--qh-shine-b) 50%, var(--qh-shine-a) 60%, var(--ok) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: qh-text-shine 3.2s linear infinite;
}
.qh-champ-txt small { font-size: .7rem; color: var(--ok); font-weight: 600; }

/* ── مطر الشاشة كلها (`hnBurst`) — طبقة فوق كل حاجة ومابتاخدش ضغط ── */
/* ⚠️ **تحت التوست (٩٠) وفوق المودال (٨٠)** — رسالة خطأ مستخبّية ورا قصاصات
   ورق هي نفس بق «التاج ورا الكارد» (حرس `toast-over-modal`). */
.qh-burst { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.qh-burst-in i {
  top: -20px; width: 9px; height: 14px;
  animation: qh-rain calc(var(--du) + .6s) cubic-bezier(.25, .6, .5, 1) var(--dl) 1 both;
}
.qh-burst-in i:nth-child(even) { animation-delay: calc(var(--dl) * .4); }

@keyframes qh-fall {
  0% { opacity: 0; transform: translateY(0) rotate(var(--rt)); }
  10% { opacity: .95; }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translateY(420px) translateX(18px) rotate(calc(var(--rt) + 540deg)); }
}
@keyframes qh-rain {
  0% { opacity: 0; transform: translateY(0) rotate(var(--rt)); }
  8% { opacity: 1; }
  100% { opacity: 0; transform: translateY(105vh) translateX(40px) rotate(calc(var(--rt) + 900deg)); }
}
@keyframes qh-champ-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qh-gold) 0%, transparent), 0 10px 26px -14px var(--qh-gold); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--qh-gold) 28%, transparent), 0 16px 34px -12px var(--qh-gold); }
}
@keyframes qh-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes qh-twinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }
@keyframes qh-text-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes qh-pop-in { from { opacity: 0; transform: scale(.4) translateY(8px); } to { opacity: 1; transform: none; } }

/* ═════════════════ 🏆 كأس «إشعارات الأبطال» في الشريط ═════════════════
   🔴 **مش شكل العدسة والجرس — عن قصد** (سارة 2026-09-24: «أيقونة الكاس
      مملة، أنا قايلة لك عايزة إبداع وحركات»). كأس دهبي مرسوم على لوح أخضر
      عميق (نفس لوح «مكانك بين الأبطال» في الصفحة)، ولمعة بتعدّي عليه، وتلات
      نجوم بتبرق، وطفو خفيف طول الوقت.
   ⚠️ **واللوح ثابت في المظهرين** — زي `.qh-race`: دهبي على أخضر غامق هو
      الشكل، وربطه بـ`--card` كان هيطفّي الكأس على خلفية فاتحة.
   📌 **الحالات**: `has-new` (فيه جديد) ⇒ الكأس بيتهزّ والشارة بتنبض ·
      `is-champ` (البطل نفسه) ⇒ توهّج دهبي بيتنفّس · `aria-expanded` ⇒ حدّ
      دهبي صريح. */
.hn-btn {
  position: relative; overflow: visible;
  background: radial-gradient(circle at 50% 30%, #23806a 0%, #145846 55%, #0c3b30 100%);
  border-color: #c9a24a; color: #f7c948;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 8px -3px rgba(9, 50, 40, .6);
}
.hn-btn:hover { border-color: #f7c948; color: #f7c948; transform: translateY(-1px) scale(1.06); }
.hn-btn[aria-expanded="true"] {
  background: radial-gradient(circle at 50% 30%, #2a9279 0%, #176350 60%, #0e4034 100%);
  border-color: #f7c948; color: #f7c948;
  box-shadow: 0 0 0 3px rgba(247, 201, 72, .35);
}
.hn-trophy {
  position: relative; z-index: 1; display: block;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  transform-origin: 50% 90%;
  animation: hn-float 3.4s ease-in-out infinite;
}
.hn-cup {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.hn-shine {
  position: absolute; top: -20%; bottom: -20%; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 200, .55), transparent);
  transform: skewX(-18deg);
  animation: hn-sweep 4.2s ease-in-out infinite;
}
.hn-spk {
  position: absolute; z-index: 2; color: #ffe89a; font-size: 8px; line-height: 1;
  text-shadow: 0 0 4px rgba(255, 220, 110, .9);
  animation: qh-twinkle 2.2s ease-in-out infinite;
}
.hn-spk.k1 { top: 4px; left: 5px; }
.hn-spk.k2 { top: 7px; right: 5px; font-size: 6px; animation-delay: .7s; }
.hn-spk.k3 { bottom: 5px; left: 7px; font-size: 7px; animation-delay: 1.4s; }
.hn-btn:hover .hn-spk { animation-duration: 1s; }
.hn-btn:hover .hn-trophy { animation: hn-wiggle .8s ease-in-out; }

.hn-btn.has-new .hn-trophy { animation: hn-wiggle 3s ease-in-out infinite; }
.hn-btn.has-new .nb-badge { animation: hn-ping 1.8s ease-out infinite; }
.hn-btn.is-champ {
  border-color: #f7c948;
  animation: qh-champ-glow 2.6s ease-in-out infinite;
}
/* 🔔 **رجّة الوصول** — مرة واحدة لما العدد يزيد (`hnPaintBadge`)، وبعدين
   `has-new` بتكمّل الهزّة الخفيفة. ⚠️ **بعد `has-new` في الملف** عشان تغلبها
   في نفس الأولوية — لو قبلها، الرجّة القوية ماكانتش هتبان خالص. */
.hn-btn.is-ringing .hn-trophy { animation: hn-ring 1.3s cubic-bezier(.36, .07, .19, .97) both; }
.hn-btn.is-ringing .hn-spk { animation-duration: .5s; }
.hn-btn.is-ringing::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 2px solid #f7c948; animation: hn-halo 1.2s ease-out both;
}
@keyframes hn-ring {
  0% { transform: rotate(0) scale(1); }
  10% { transform: rotate(-22deg) scale(1.28); } 20% { transform: rotate(20deg) scale(1.28); }
  30% { transform: rotate(-17deg) scale(1.22); } 40% { transform: rotate(14deg) scale(1.18); }
  50% { transform: rotate(-10deg) scale(1.12); } 60% { transform: rotate(7deg) scale(1.08); }
  70% { transform: rotate(-4deg) scale(1.04); } 80% { transform: rotate(2deg) scale(1); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes hn-halo { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

@keyframes hn-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-4deg); } }
@keyframes hn-sweep { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes hn-wiggle {
  0%, 60%, 100% { transform: rotate(0) scale(1); }
  8% { transform: rotate(-14deg) scale(1.12); } 16% { transform: rotate(12deg) scale(1.12); }
  24% { transform: rotate(-9deg) scale(1.08); } 32% { transform: rotate(6deg) scale(1.04); }
  40% { transform: rotate(-3deg) scale(1); }
}
@keyframes hn-ping {
  0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); }
  70% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
.hn-head-ico .hn-trophy { width: 26px; height: 26px; animation: hn-float 3.4s ease-in-out infinite; }

.hn-scrim {
  position: fixed; inset: var(--topbar-real) 0 0 0; z-index: 60;
  background: rgba(4, 14, 10, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* ⚠️ **بعرض الشاشة ناقص هامش، وارتفاعها ناقص الشريط** — والجسم هو اللي
   بيسكرول (القاعدة ١٠: كل حاجة أطول من الشاشة ليها أب بيسكرول فعلاً). */
.hn-pop {
  position: fixed; top: calc(var(--topbar-real) + 8px); z-index: 61;
  inset-inline: auto 12px;
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100vh - var(--topbar-real) - 20px);
  max-height: calc(100dvh - var(--topbar-real) - 20px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: qh-pop-in .22s ease both;
}
.hn-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(115deg, #0e4034, #196c59); color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}
.hn-head-ico { color: #f1d492; display: grid; }
.hn-head h2 { flex: 1; margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.hn-sub { display: block; font-size: .72rem; font-weight: 400; color: #d4e8dd; }
.hn-head .icon-btn { width: 32px; height: 32px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.hn-body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; min-height: 0; flex: 1 1 auto; }
.hn-foot { padding: 10px 14px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.hn-h { margin: 6px 0 8px; font-size: .78rem; color: var(--muted); font-weight: 700; letter-spacing: .3px; }
.hn-note { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: .76rem;
  background: var(--warn-tint); color: var(--ink); }
.hn-empty { margin: 8px 0; color: var(--muted); font-size: .85rem; text-align: center; padding: 14px 0; }
.hn-muted { margin: 6px 0 0; color: var(--muted); font-size: .74rem; }

.hn-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px;
  font-size: .75rem; color: var(--muted); }
.hn-chip { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .75rem; cursor: pointer; }
.hn-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ── وضعك دلوقتي ── */
.hn-me {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--card), var(--card-2)); padding: 12px;
}
.hn-me.is-champ { border-color: var(--qh-gold); animation: qh-champ-glow 2.6s ease-in-out infinite;
  background: linear-gradient(160deg, var(--card), var(--qh-r1-tint)); }
.hn-me > :not(.hn-confetti) { position: relative; z-index: 1; }
.hn-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hn-confetti i {
  position: absolute; top: -14px; left: var(--x); width: 6px; height: 10px; border-radius: 2px;
  background: var(--c); opacity: 0; animation: qh-fall var(--du) linear var(--dl) infinite;
}
.hn-confetti i.is-dot { width: 6px; height: 6px; border-radius: 50%; }
.hn-champ { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hn-champ .qh-medal-svg { flex: none; transform-origin: 50% 8%; animation: qh-swing 2.4s ease-in-out infinite; }
.hn-champ b { display: block; font-family: var(--font-display); font-size: 1.15rem;
  background: linear-gradient(90deg, var(--ok) 0%, var(--qh-shine-a) 40%, var(--qh-shine-b) 50%, var(--qh-shine-a) 60%, var(--ok) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: qh-text-shine 3.2s linear infinite; }
.hn-champ small { color: var(--ok); font-weight: 600; font-size: .78rem; }
.hn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.hn-kpi { display: grid; text-align: center; padding: 8px 4px; border-radius: var(--radius-xs);
  background: var(--card); border: 1px solid var(--line); }
.hn-kpi b { font-family: var(--font-display); font-size: 1.35rem; color: var(--primary); font-variant-numeric: tabular-nums; }
.hn-kpi small { font-size: .7rem; color: var(--muted); }
.hn-next { margin: 10px 0 0; font-size: .84rem; font-weight: 600; }
.hn-conds { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.hn-conds li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: .8rem; }
.hn-conds li > span { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; font-size: .7rem; font-weight: 800; }
.hn-conds li.is-ok > span { background: var(--ok); color: #fff; }
.hn-conds li.is-left > span { border: 1.5px solid var(--line-strong); color: var(--muted); }
.hn-conds li.is-ok { color: var(--ok); }
.hn-conds small { color: var(--danger); font-size: .72rem; }
.hn-prize.is-held { margin: 8px 0 0; font-size: .76rem; color: var(--danger); }
.hn-days { display: block; margin-top: 8px; font-size: .72rem; color: var(--muted); }
.hn-top { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.hn-top li { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.hn-top b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.hn-top em { font-style: normal; font-size: .7rem; color: var(--muted); }
.hn-top em.is-ok { color: var(--ok); font-weight: 700; }
.hn-top-no { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 6px;
  background: var(--primary-tint); color: var(--primary); font-size: .72rem; font-weight: 800; }

/* ── آخر الأحداث ── */
.hn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hn-day { margin-top: 6px; font-size: .72rem; color: var(--muted); font-weight: 700; }
.hn-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card);
  border-inline-start: 3px solid var(--line-strong);
}
.hn-item.is-new { background: var(--primary-tint); animation: qh-pop-in .35s ease both; }
.hn-item.tone-up, .hn-item.tone-plus { border-inline-start-color: var(--ok); }
.hn-item.tone-down, .hn-item.tone-minus { border-inline-start-color: var(--danger); }
.hn-item.tone-gold { border-inline-start-color: var(--qh-gold); }
.hn-item.tone-champ {
  border-color: var(--qh-gold); border-inline-start-color: var(--qh-gold);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 12%, var(--card)), color-mix(in srgb, var(--qh-gold) 16%, var(--card)));
}
.hn-ico { font-size: 1.15rem; line-height: 1.2; flex: none; }
.hn-txt { display: grid; gap: 2px; min-width: 0; }
.hn-txt strong { font-size: .85rem; overflow-wrap: anywhere; }
.hn-txt small { font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }

/* تفضيل النظام محترم (دوخة الحركة) — نفس قاعدة الصفحة فوق. */
@media (prefers-reduced-motion: reduce) {
  .qh-winner.is-champ, .qh-confetti i, .qh-burst-in i, .qh-champ, .qh-champ-medal .qh-medal-svg,
  .qh-spark, .qh-champ-txt b, .hn-btn.is-champ, .hn-trophy, .hn-shine, .hn-spk,
  .hn-btn.has-new .nb-badge, .hn-btn.is-ringing .hn-trophy, .hn-btn.is-ringing::after, .hn-pop, .hn-me.is-champ,
  .hn-confetti i, .hn-champ .qh-medal-svg, .hn-champ b, .hn-item.is-new {
    animation: none !important;
  }
  .qh-confetti, .qh-burst, .hn-confetti { display: none; }
}

/* ═════════════════ 🎆 «لحظة البطل» — شاشة الفايز نفسه ═════════════════
   سارة (2026-09-24): «الفايز أول ما يفتح الصفحة يلاقي كده حركة».
   ⚠️ **الطبقة ٨٨ — تحت التوست (٩٠) وفوق المودال (٨٠)**: رسالة خطأ مستخبّية
      ورا احتفال هي نفس بق «التاج ورا الكارد» (حرس `toast-over-modal`).
   ⚠️ **كل الزينة `pointer-events: none`** — الضغط برّه البطاقة لازم يوصل
      للخلفية نفسها (ده مخرج من التلاتة)، وقصاصة بتاكله كانت هتحبس الشاشة. */
.qh-cele {
  position: fixed; inset: 0; z-index: 88; overflow: hidden;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 42%, rgba(26, 108, 84, .9), rgba(4, 18, 13, .94) 70%);
  animation: qh-cele-in .35s ease both;
}
.qh-cele.is-out { animation: qh-cele-out .42s ease both; }
.qh-cele-rays, .qh-cele-stars, .qh-cele-fws, .qh-cele-cannons { position: absolute; inset: 0; pointer-events: none; }
.qh-cele-rays {
  inset: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(247, 201, 72, .11) 0deg 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 48%);
          mask: radial-gradient(circle at 50% 50%, #000 0 18%, transparent 48%);
  animation: qh-spin 26s linear infinite;
}
.qh-cele-stars i {
  position: absolute; bottom: -20px; left: var(--x); color: #ffe89a; font-style: normal;
  font-size: 18px; text-shadow: 0 0 8px rgba(255, 220, 110, .9); opacity: 0;
  animation: qh-rise var(--du) ease-in var(--dl) infinite;
}
/* مدفعين من الركنين تحت — كل قصاصة بتطلع لفوق وبعدين تقع (قوس). */
.qh-cn {
  position: absolute; bottom: -10px; left: var(--sx); width: 9px; height: 14px;
  border-radius: 2px; background: var(--c); opacity: 0;
  animation: qh-cannon 2.8s cubic-bezier(.15, .7, .4, 1) calc(.25s + var(--dl)) both;
}
.qh-cn[data-dot] { width: 9px; height: 9px; border-radius: 50%; }
/* ألعاب نارية: كل فرقعة ١٤ شرارة بتطلع من نقطة وحدة. */
.qh-fw { position: absolute; width: 0; height: 0; }
.qh-fw i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 8px var(--c); opacity: 0;
  animation: qh-fw 1.5s ease-out var(--dl) 3;
}
.qh-cele-card {
  position: relative; width: min(420px, calc(100vw - 32px));
  padding: 26px 22px 22px; text-align: center; color: #fff;
  border-radius: 24px; border: 1px solid rgba(247, 201, 72, .55);
  background: linear-gradient(160deg, rgba(20, 88, 70, .92), rgba(9, 47, 37, .95));
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6), 0 0 0 6px rgba(247, 201, 72, .08),
              inset 0 1px 0 rgba(255, 255, 255, .15);
  animation: qh-cele-card .9s cubic-bezier(.2, 1.5, .4, 1) .15s both;
}
.qh-cele-medal { display: grid; place-items: center; margin: -70px auto 6px; height: 140px; }
.qh-cele-medal .qh-medal-svg {
  transform-origin: 50% 6%;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 22px rgba(247, 201, 72, .45));
  animation: qh-medal-drop .9s cubic-bezier(.3, 1.6, .5, 1) .35s both, qh-swing 2.6s ease-in-out 1.3s infinite;
}
.qh-cele-title {
  margin: 4px 0 2px; font-family: var(--font-display); font-size: 2.3rem; line-height: 1.2;
  background: linear-gradient(90deg, #f7c948 0%, #fff4c2 45%, #ffffff 50%, #fff4c2 55%, #f7c948 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: qh-pop-in .6s cubic-bezier(.2, 1.6, .4, 1) .6s both, qh-text-shine 2.6s linear 1.2s infinite;
}
.qh-cele-sub { margin: 0 0 16px; color: #d4e8dd; font-size: 1rem; animation: qh-pop-in .5s ease .8s both; }
.qh-cele-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.qh-cele-stats span {
  display: grid; gap: 2px; padding: 10px 4px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(247, 201, 72, .3);
  animation: qh-pop-in .5s cubic-bezier(.2, 1.6, .4, 1) calc(.9s + var(--i) * .12s) both;
}
.qh-cele-stats b { font-family: var(--font-display); font-size: 1.45rem; color: #f7c948; font-variant-numeric: tabular-nums; }
.qh-cele-stats small { font-size: .72rem; color: #d4e8dd; }
.qh-cele-go {
  font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  padding: 11px 26px; border-radius: 999px; border: 0; color: #0c3b30;
  background: linear-gradient(135deg, #f7c948, #ffe28a);
  box-shadow: 0 10px 24px -8px rgba(247, 201, 72, .7);
  animation: qh-pop-in .5s cubic-bezier(.2, 1.6, .4, 1) 1.3s both, qh-go-pulse 1.8s ease-in-out 2s infinite;
}
.qh-cele-go:hover { transform: translateY(-2px) scale(1.04); }
.qh-cele-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── البطاقة: أشعة بتلف ورا المستحق · «أنت» · النبض بعد القفل ── */
.qh-rays {
  position: absolute; left: 50%; top: 70px; width: 260px; height: 260px; margin: -130px 0 0 -130px;
  pointer-events: none; z-index: 0; opacity: .55;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--qh-gold) 35%, transparent) 0deg 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%);
          mask: radial-gradient(circle, #000 0 18%, transparent 62%);
  animation: qh-spin 18s linear infinite;
}
.qh-you {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2;
  font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 4px 10px -4px var(--primary);
  animation: qh-pop-in .5s cubic-bezier(.2, 1.6, .4, 1) .4s both, qh-bob 2.4s ease-in-out 1s infinite;
}
.qh-winner.is-spot { animation: qh-spot 1.1s cubic-bezier(.3, 1.6, .5, 1) 2, qh-champ-glow 2.6s ease-in-out infinite; }
.qh-winner.is-spot::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: 0 0 0 3px var(--qh-gold); animation: hn-halo 1.1s ease-out 3;
}

@keyframes qh-cele-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes qh-cele-out { to { opacity: 0; transform: scale(1.04); } }
@keyframes qh-spin { to { transform: rotate(360deg); } }
@keyframes qh-rise {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-105vh) scale(1.2) rotate(180deg); }
}
@keyframes qh-cannon {
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--rt)); }
  40% { opacity: 1; transform: translate(var(--vx), var(--vy)) rotate(calc(var(--rt) + 360deg)); }
  100% { opacity: 0; transform: translate(calc(var(--vx) * 1.35), 30vh) rotate(calc(var(--rt) + 900deg)); }
}
@keyframes qh-fw {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-95px) scale(.3); }
}
@keyframes qh-cele-card { from { opacity: 0; transform: scale(.3) rotate(-8deg) translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes qh-medal-drop { from { opacity: 0; transform: translateY(-160px) scale(.6) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes qh-go-pulse {
  0%, 100% { box-shadow: 0 10px 24px -8px rgba(247, 201, 72, .7), 0 0 0 0 rgba(247, 201, 72, .5); }
  50% { box-shadow: 0 10px 24px -8px rgba(247, 201, 72, .7), 0 0 0 10px rgba(247, 201, 72, 0); }
}
@keyframes qh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes qh-spot {
  0%, 100% { transform: none; } 30% { transform: translateY(-14px) scale(1.04); }
  55% { transform: translateY(0) scale(.99); } 75% { transform: translateY(-5px) scale(1.01); }
}
@media (max-width: 560px) {
  .qh-cele-title { font-size: 1.9rem; }
  .qh-cele-medal { margin-top: -60px; height: 120px; }
  .qh-cele-medal .qh-medal-svg { width: 96px; height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .qh-cele, .qh-cele *, .qh-rays, .qh-you, .qh-winner.is-spot, .qh-winner.is-spot::before { animation: none !important; }
  .qh-cele-cannons, .qh-cele-fws, .qh-cele-stars { display: none; }
}

/* ═════════════════ 🎬 حركات البطاقات — للكل، والتشجيع للي لسه ═════════════════
   سارة (2026-09-24، بصورتين): «عايزة البطاقة نفسها تتحرك، وفيه قصاصات نازلة
   وطالعة — حركات تحفيزية للي لسه ماحققش الشروط، وحركات لو حقق».
   • **الكل**: دخول زي المنصّة (الخامس الأول والأول آخر واحد) · الرقم بيعدّ
     من صفر · لمعة بلون المركز · ميل 3D مع الماوس.
   • **اللي لسه (تحفيز)**: البطاقة **طايرة وبتتمايل**، وكل شوية **نطّة حماس**
     كأنها بتحاول تطلع · قصاصات **نازلة وطالعة بلون مركزه** · حدّ بيتنفّس.
     ومن غير أي حاجة دهبي (دي للي حقق وبس).
   • **اللي حقق (احتفال)** في أي مركز: **نطّات فرحة** ورا بعض وتمايل · قصاصات
     ملوّنة ودهبي نازلة وطالعة · شريط «فائز 🏆» · نجوم دهبي طالعة · تاج بيلمع ·
     رقم بيتوهّج — فوق احتفاله (الميدالية والكونفيتي والأشعة).
   🔴 **واتشالوا عن قصد** (سارة: «مش عايزة وصيف وبرونزي، وشيل الأسهم الحمرا»):
      شارات المراكز · سهم «من إمبارح» · المذنّب حوالين رقم المركز · وقبلهم حبّة
      «كمّل/قرّبت — فاضلك X».
   ⚠️ **حركة البطاقة بـ`translate`/`rotate`/`scale` مش `transform`** — `transform`
      في حركة شغّالة على طول كان هيغلب الهوفر والميل (دول `transform`) في صمت.
   ⚠️ **الدخول `backwards` مش `both`** — نفس السبب: `both` بتسيب آخر إطار شغّال.
   ⚠️ **ومايتعادش مع كل رسمة** — `app.js` بيكتب البطاقات لما الماركب يتغيّر بس
      (`heroLastWinners`)؛ من غيرها البحث بالاسم كان بيرجّع الدخول مع كل حرف. */
.qh-winner { animation: qh-enter .75s cubic-bezier(.2, 1.3, .4, 1) var(--enter, 0s) backwards; }
/* 🎭 **حركة خاصة بكل مركز** للي لسه — `--m` اسم الحركة و`--md` مدتها، وقاعدة
   واحدة بتشغّلهم. هادية للكل (`--amp: 1`)، وأقوى على بطاقة اللي فاتح.
   ⚠️ **`animation` واحدة بتلغي التانية** — عشان كده الدخول معاها في نفس السطر. */
.qh-winner[data-rank="1"] { --m: qh-m-float;  --md: 6s; }
.qh-winner[data-rank="2"] { --m: qh-m-sway;   --md: 3.4s; transform-origin: 50% 0; }
.qh-winner[data-rank="3"] { --m: qh-m-beat;   --md: 2.6s; }
.qh-winner[data-rank="4"] { --m: qh-m-eager;  --md: 4s; }
.qh-winner[data-rank="5"] { --m: qh-m-spring; --md: 4.4s; }
.qh-winner:not(.is-champ) {
  animation: qh-enter .75s cubic-bezier(.2, 1.3, .4, 1) var(--enter, 0s) backwards,
             var(--m) var(--md) ease-in-out calc(var(--enter, 0s) + .9s) infinite;
}
/* 👤 بطاقة اللي فاتح — تحت في «هي النجمة» (أقوى من هنا بكتير). */
/* المحتوى فوق القصاصات — والركنيّات (مكرر · أنت) فاضلة `absolute`. */
.qh-winner:not(.is-champ) > :not(.qh-fly):not(.qh-tied):not(.qh-you) { position: relative; z-index: 1; }
@media (hover: hover) {
  .qh-winner:hover {
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  }
  .qh-winner.is-champ:hover {
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) scale(1.015);
  }
}
/* ⚠️ **مافيش لمعة معدّية على ٢–٥** — اتشالت (سارة: «في شرايط على كله»). لمعة
   الأول الدهبي فاضلة زي ما كانت من الأول. */
.qh-crown { animation: qh-crown-bob 3.2s ease-in-out infinite; }

/* 🎊 قصاصات طالعة من تحت — للمستحق (دهبي) ولبطاقة اللي فاتح لو لسه (بلون مركزه). */
.qh-fly { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.qh-fly i {
  position: absolute; bottom: -14px; left: var(--x); width: 7px; height: 11px; border-radius: 2px;
  background: var(--c); opacity: 0; transform: rotate(var(--rt));
  animation: qh-fly-up var(--du) ease-out var(--dl) infinite;
}
.qh-fly i.is-dot { width: 7px; height: 7px; border-radius: 50%; }
.qh-fly.is-rank i { background: var(--rank-color); }
.qh-fly.is-rank i:nth-child(2n) { background: color-mix(in srgb, var(--rank-color) 45%, #fff); }
.qh-fly.is-gold i:nth-child(3n) { background: var(--qh-gold); }

/* 🏆 الفايز: الشريط · النجوم الطالعة · التاج · الرقم */
.qh-ribbon {
  position: absolute; top: 16px; inset-inline-end: -36px; z-index: 3; width: 140px;
  transform: rotate(-45deg); text-align: center; pointer-events: none;
  padding: 4px 0; font-size: .7rem; font-weight: 800; color: #3d2a00;
  background: linear-gradient(90deg, #e9b93a, #fff1b8 50%, #e9b93a);
  background-size: 200% 100%;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4);
  animation: qh-ribbon-shine 2.6s linear infinite;
}
.qh-winner.is-champ > .qh-tied { top: 40px; }
.qh-rise { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.qh-rise i {
  position: absolute; bottom: -12px; left: var(--x); font-style: normal; font-size: 13px;
  color: var(--qh-gold); text-shadow: 0 0 6px color-mix(in srgb, var(--qh-gold) 70%, transparent);
  opacity: 0; animation: qh-rise-card 3.8s ease-in var(--dl) infinite;
}
.qh-winner.is-champ .qh-crown {
  color: var(--qh-gold); text-shadow: 0 0 12px color-mix(in srgb, var(--qh-gold) 70%, transparent);
  animation: qh-crown-bob 1.8s ease-in-out infinite;
}
.qh-winner.is-champ .qh-score { animation: qh-score-glow 2.2s ease-in-out infinite; }

@keyframes qh-enter { from { opacity: 0; transform: translateY(46px) scale(.88); } }
/* 🎭 حركات المراكز — الشدّة من `--amp` (١ للكل · ٢٫٢ لبطاقة اللي فاتح). */
@keyframes qh-m-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-6px * var(--amp, 1)); } }
@keyframes qh-m-sway {
  0%, 100% { rotate: calc(-1.1deg * var(--amp, 1)); }
  50% { rotate: calc(1.1deg * var(--amp, 1)); }
}
@keyframes qh-m-beat {
  0%, 50%, 100% { scale: 1; }
  12% { scale: calc(1 + .025 * var(--amp, 1)); }
  24% { scale: 1; }
  36% { scale: calc(1 + .015 * var(--amp, 1)); }
}
@keyframes qh-m-eager {
  0%, 56%, 100% { rotate: 0deg; translate: 0 0; }
  60% { rotate: calc(-1.8deg * var(--amp, 1)); }
  64% { rotate: calc(1.8deg * var(--amp, 1)); }
  68% { rotate: calc(-1.3deg * var(--amp, 1)); }
  72% { rotate: calc(.9deg * var(--amp, 1)); }
  78% { rotate: 0deg; translate: 0 calc(-4px * var(--amp, 1)); }
  86% { translate: 0 0; }
}
@keyframes qh-m-spring {
  0%, 54%, 100% { translate: 0 0; scale: 1; }
  62% { translate: 0 3px; scale: 1.03 .96; }
  72% { translate: 0 calc(-13px * var(--amp, 1)); scale: .98 1.03; }
  82% { translate: 0 2px; scale: 1.02 .98; }
  90% { translate: 0 calc(-3px * var(--amp, 1)); scale: 1; }
}
@keyframes qh-breathe {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rank-edge) 45%, transparent), 0 14px 30px -16px var(--rank-color); }
}
@keyframes qh-fly-up {
  0% { opacity: 0; transform: translateY(0) rotate(var(--rt)); }
  12% { opacity: .95; }
  80% { opacity: .85; }
  100% { opacity: 0; transform: translateY(-440px) translateX(-16px) rotate(calc(var(--rt) + 480deg)); }
}
@keyframes qh-crown-bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
  50% { transform: translateX(-50%) translateY(-4px) rotate(-6deg); }
}
@keyframes qh-ribbon-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes qh-rise-card {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-480px) scale(1.15) rotate(140deg); }
}
@keyframes qh-score-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 16px color-mix(in srgb, var(--qh-gold) 75%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .qh-winner, .qh-winner::after, .qh-crown, .qh-ribbon, .qh-rise i, .qh-fly i,
  .qh-winner.is-champ .qh-score { animation: none !important; }
  .qh-rise, .qh-fly { display: none; }
}

/* ═════════════════ 👤 بطاقة اللي فاتح — هي النجمة ═════════════════
   سارة (2026-09-24): «البطاقات التانية مغطية على حركتي، مش كأني أنا اللي فاتحة
   وبتحتفل بيا… ولو مستحق برضو حركتي مش مميزة».
   ⚠️ **`.qh-winners .qh-winner.is-other`** (تلات كلاسات) عشان تغلب قواعد الحركة
      (`.qh-winner.is-champ` · `.qh-winner:not(.is-champ)`) من غير `!important`. */
/* 🌿 **الباقي بيهدى من غير ما يطفي** — بألوانه كاملة، ونجومه وتاجه شغّالين،
   وحركة مركزه **خفيفة وأبطأ** (`--amp: .45`، خُمس بطاقته تقريبًا). القصاصات بس
   اللي بتتشال عشان ماتنزلش فوق بطاقته.
   🔴 **مافيش تبهيت** (سارة بصورة: «لما بهّت التانيين الصفحة بقت كئيبة») —
      `opacity`/`saturate` اتشالوا؛ ماترجّعهمش عشان تميّز بطاقته. التميّز من
      حركتها ونبضها وجُملها، مش من إطفاء الباقي. */
.qh-winners .qh-winner.is-other {
  --amp: .45;
  animation: qh-enter .75s cubic-bezier(.2, 1.3, .4, 1) var(--enter, 0s) backwards,
             var(--m) calc(var(--md) * 1.5) ease-in-out calc(var(--enter, 0s) + .9s) infinite;
}
.qh-winner.is-other .qh-confetti, .qh-winner.is-other .qh-fly, .qh-winner.is-other .qh-rise,
.qh-winner.is-other .qh-rays { display: none; }

/* 🌟 بطاقته: قدّام الكل، ونبض قوي بلون مركزه (أو دهبي لو مستحق). */
.qh-winner.is-mine { z-index: 2; }
.qh-winners .qh-winner.is-mine:not(.is-champ) {
  --amp: 2.4;
  animation: qh-enter .75s cubic-bezier(.2, 1.3, .4, 1) var(--enter, 0s) backwards,
             var(--m) var(--md) ease-in-out calc(var(--enter, 0s) + .9s) infinite,
             qh-mine-glow 2.2s ease-in-out infinite;
}
.qh-winners .qh-winner.is-champ.is-mine {
  --amp: 2.8;
  animation: qh-enter .75s cubic-bezier(.2, 1.3, .4, 1) var(--enter, 0s) backwards,
             qh-mine-gold 1.8s ease-in-out infinite,
             var(--m) var(--md) ease-in-out calc(var(--enter, 0s) + .9s) infinite;
}
@media (min-width: 561px) {
  /* أكبر شوية على الكمبيوتر — على الموبايل البطاقة عرضها عمود كامل أصلاً. */
  .qh-winner.is-mine { scale: 1.05; }
}

/* 💬 جُمل بتقلّب — ٤ جُمل فوق بعض، وكل واحدة بتظهر دورها (`--k`). */
.qh-hype {
  position: relative; display: block; height: 30px; margin: 10px 8px 0; overflow: hidden;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rank-color) 55%, transparent);
  background: color-mix(in srgb, var(--rank-color) 15%, var(--card));
  box-shadow: 0 8px 20px -12px var(--rank-color);
}
/* ⚠️ **دهبي صريح وكلام غامق** (زي شريط «فائز») — دهبي على خلفية دهبي فاتح كان
   بيختفي في المظهر الليلي (اتقاس بصورة). */
.qh-hype.is-win {
  border-color: #e9b93a;
  background: linear-gradient(90deg, #e9b93a, #fff1b8 50%, #e9b93a);
}
.qh-hype span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .86rem; color: var(--rank-color);
  opacity: 0; animation: qh-hype-cycle 10s ease-in-out calc(var(--k) * 2.5s) infinite;
}
.qh-hype.is-win span { color: #3d2a00; }
.qh-card-fws { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.qh-card-fws .qh-fw i { animation-duration: 1.6s; animation-iteration-count: infinite; }

@keyframes qh-mine-glow {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rank-color) 75%, transparent),
                         0 18px 40px -18px var(--rank-color); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--rank-color) 30%, transparent),
                    0 28px 60px -12px var(--rank-color); }
}
@keyframes qh-mine-gold {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--qh-gold) 85%, transparent),
                         0 20px 44px -16px var(--qh-gold); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--qh-gold) 30%, transparent),
                    0 30px 70px -10px var(--qh-gold); }
}
@keyframes qh-hype-cycle {
  0% { opacity: 0; transform: translateY(12px) scale(.9); }
  4%, 21% { opacity: 1; transform: translateY(0) scale(1); }
  25%, 100% { opacity: 0; transform: translateY(-12px) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .qh-hype span, .qh-card-fws .qh-fw i { animation: none !important; }
  .qh-hype span:not(:first-child), .qh-card-fws { display: none; }
  .qh-hype span:first-child { opacity: 1; }
}

/* 👀 مبدّل «اعرض الصفحة كأنك…» — المعاينة المحلية بس (`heroDemoAsHtml`). */
.qh-demo-as { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px;
  padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--card-2); font-size: .78rem; color: var(--muted); }
.qh-demo-seen { margin: 0 0 16px; padding: 0 4px; font-size: .78rem; color: var(--ink); line-height: 1.7; }
.qh-demo-seen strong { color: var(--primary); }

/* ═════════════════ 👋 كارت الترحيب — شكل لكل حالة (`QH.welcomeHtml`) ═════════════════
   قطب عبر سارة (2026-09-24). بيركب على `.qh-cele` (نفس الطبقة ٨٨ · نفس المخارج).
   • `is-climb` / `is-lead` / `is-hello`: **الخلفية بتتبع الوقت** — شروق بشمس طالعة
     وسحاب (`is-morning`) أو سما بالليل بقمر ونجوم (`is-evening`)، وتلال تحت، والكارت
     زجاجي فوقها.
   • `is-placed` («مبروك يا بطل — المركز X» من غير الشروط): **كحلي بلون المركز** وتوهّج
     هادي بيلف — مش احتفال: مافيش قصاصات ولا ألعاب نارية ولا أشعة دهبي.
   ⚠️ **ألوان المراكز هنا ثابتة (نسخة المظهر الليلي)** — الخلفية غامقة في المظهرين،
      وتوكنات النهاري (`--qh-r2` غامق) كانت هتختفي عليها. */
/* 🏟️ الترحيب (برّه الخمسة · التيم ليدر · مطوّر الأعمال · الباقي) = ساحة منافسة. */
.qh-wel.is-climb, .qh-wel.is-lead, .qh-wel.is-hello {
  background: radial-gradient(ellipse 120% 90% at 50% 105%, #1d7a5a 0%, #0e3f31 42%, #05150f 100%);
}
.qh-wel.is-placed { background: radial-gradient(circle at 50% 36%, #25365c 0%, #111a33 55%, #070c1a 100%); }
.qh-wel[data-rank="1"] { --wc: #f1ce72; } .qh-wel[data-rank="2"] { --wc: #cfdceb; }
.qh-wel[data-rank="3"] { --wc: #eab28c; } .qh-wel[data-rank="4"] { --wc: #cdb4f5; }
.qh-wel[data-rank="5"] { --wc: #92dce1; }

/* ── 🏟️ ساحة المنافسة (`sceneHtml`) ── */
.qh-arena { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.qh-beam {
  position: absolute; bottom: -10%; width: 38vmax; height: 120vmax; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 236, 170, .28), rgba(255, 236, 170, 0) 75%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); filter: blur(2px);
}
.qh-beam.b1 { inset-inline-start: 2%; animation: qh-beam-a 7s ease-in-out infinite; }
.qh-beam.b2 { inset-inline-end: 2%; animation: qh-beam-b 7s ease-in-out infinite; }
/* ⚠️ **شبه منحرف بـ`clip-path` مش `rotateX`** — المنظور كان بيطبّق المضمار لشريحة
   رفيعة تحت الشاشة (اتقاس بصورة).
   🔴 **`qh-arena-track` مش `qh-track`** — `qh-track` متحجوز لشريط عمود «المنافسة» في
      الجدول (١١٠px)؛ الاسم المكرر خلّى المضمار ياخد عرضه، **وقاعدتنا بوّظت شرايط
      الجدول** (`absolute` + `clip-path`). */
.qh-arena-track {
  position: absolute; inset-inline: 0; bottom: 0; height: 26%;
  background:
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(255, 255, 255, .5) 9% 9.35%),
    linear-gradient(180deg, #b8412c, #7a2618);
  clip-path: polygon(33% 0, 67% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 18px 30px -10px rgba(0, 0, 0, .5);
}
.qh-podium {
  position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%);   /* تحت الكارت، فوق المضمار */
  display: flex; align-items: flex-end; gap: 4px;
}
.qh-podium i {
  position: relative; display: grid; place-items: start center; width: 70px; padding-top: 6px;
  font-style: normal; font-weight: 800; font-size: 1.3rem; color: rgba(255, 255, 255, .85);
  background: linear-gradient(180deg, #2f8a6a, #145441); border-radius: 8px 8px 0 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25);
}
.qh-podium .p1 { height: 110px; background: linear-gradient(180deg, #e9b93a, #a8780c); color: #3d2a00; }
.qh-podium .p2 { height: 78px; } .qh-podium .p3 { height: 58px; }
.qh-podium .p1 em {
  position: absolute; top: -64px; font-style: normal; font-size: 3.4rem;
  filter: drop-shadow(0 0 18px rgba(255, 210, 90, .9));
  animation: qh-trophy-glow 2.4s ease-in-out infinite;
}
.qh-sparks i {
  position: absolute; bottom: -10px; left: var(--x); width: 4px; height: 4px; border-radius: 50%;
  background: #ffd66b; box-shadow: 0 0 8px #ffd66b; opacity: 0;
  animation: qh-spark-up var(--du) ease-in var(--dl) infinite;
}
@keyframes qh-beam-a { 0%, 100% { rotate: -18deg; } 50% { rotate: 14deg; } }
@keyframes qh-beam-b { 0%, 100% { rotate: 18deg; } 50% { rotate: -14deg; } }
@keyframes qh-trophy-glow { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -6px; scale: 1.08; } }
@keyframes qh-spark-up {
  0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90vh) translateX(20px); }
}

/* ── الكارت الزجاجي ── */
.qh-wel-card {
  position: relative; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 26px 22px 22px; text-align: center; border-radius: 26px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: qh-cele-card .85s cubic-bezier(.2, 1.5, .4, 1) .2s both;
}
.qh-wel .qh-wel-card { background: rgba(14, 22, 48, .72); color: #f2f5ff; border: 1px solid rgba(255, 255, 255, .16); }
.qh-wel.is-placed .qh-wel-card { border-color: color-mix(in srgb, var(--wc) 45%, transparent);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .6), 0 0 0 6px color-mix(in srgb, var(--wc) 10%, transparent); }
.qh-wel-hi {
  margin: 0 0 12px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1.35;
  animation: qh-pop-in .6s cubic-bezier(.2, 1.6, .4, 1) .45s both;
}
.qh-wel-quote {
  margin: 16px 0 18px; font-size: 1.05rem; font-weight: 700; line-height: 1.6; opacity: .92;
  animation: qh-pop-in .6s ease .9s both;
}
.qh-wel-quote.is-big { font-family: var(--font-display); font-size: 1.45rem; margin: 18px 4px 22px; }
.qh-wel .qh-wel-quote { color: #ffe39a; }
/* «المركز X» خلفيته كحلي دايمًا — بني الصبح كان بيختفي عليه. */
.qh-wel.is-placed .qh-wel-quote { color: var(--wc); }

/* ── برّه الخمسة: باقي لك كام + شريط التسلّق ── */
.qh-wel-left { margin: 4px 0 18px; font-size: 1.05rem; font-weight: 700; animation: qh-pop-in .5s ease .7s both; }
.qh-wel-left b {
  display: inline-block; margin: 0 4px; font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: #ff7a1a; text-shadow: 0 4px 14px rgba(255, 122, 26, .35); font-variant-numeric: tabular-nums;
}
.qh-wel .qh-wel-left b { color: #ffc15a; }
.qh-wel-left small { display: block; margin-top: 6px; font-size: .9rem; opacity: .85; }
.qh-climb { position: relative; height: 14px; margin: 34px 14px 6px; border-radius: 999px; background: rgba(0, 0, 0, .12); }
.qh-wel .qh-climb { background: rgba(255, 255, 255, .14); }
.qh-climb-bar {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); border-radius: inherit;
  background: linear-gradient(90deg, #ffb13b, #ff6b3d);
  box-shadow: 0 0 14px rgba(255, 140, 60, .6);
  animation: qh-bar-fill 1.6s cubic-bezier(.3, .8, .3, 1) 1s both;
}
.qh-climb-me {
  position: absolute; top: -30px; inset-inline-start: calc(var(--p) - 14px); font-size: 1.5rem;
  animation: qh-run-in 1.6s cubic-bezier(.3, .8, .3, 1) 1s both, qh-run .5s ease-in-out 2.6s infinite;
}
.qh-climb-flag {
  position: absolute; top: -30px; inset-inline-end: -8px; font-size: 1.5rem; transform-origin: 20% 90%;
  animation: qh-wave 1.4s ease-in-out infinite;
}

/* ── «مبروك يا بطل — المركز X» (من غير الشروط) ── */
.qh-wel-glow {
  position: absolute; inset: -40%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wc) 12%, transparent) 0deg 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 0 16%, transparent 46%);
          mask: radial-gradient(circle, #000 0 16%, transparent 46%);
  animation: qh-spin 40s linear infinite;
}
/* ⚠️ **جوّه الكارت مش طالعة فوقه** — الكارت بيسكرول (`overflow-y: auto`)، فهامش سالب
   كان بيقصّ الشارة من فوق (اتقاس بصورة). التاج جوّه الحشو اللي فوق. */
.qh-wel-badge {
  position: relative; display: grid; place-items: center; width: 92px; height: 100px; margin: 26px auto 12px;
  border: 3px solid var(--wc); border-radius: 22px 22px 40px 40px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  color: var(--wc); box-shadow: 0 12px 30px -10px var(--wc);
  animation: qh-medal-drop .9s cubic-bezier(.3, 1.6, .5, 1) .35s both, qh-m-float 3.2s ease-in-out 1.3s infinite;
}
.qh-wel-badge b { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.qh-wel-crown { position: absolute; top: -34px; font-size: 2rem; color: var(--wc); text-shadow: 0 0 12px var(--wc); }
.qh-wel-title {
  margin: 0; font-family: var(--font-display); font-size: 2rem;
  background: linear-gradient(90deg, #ffffff, var(--wc) 50%, #ffffff); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: qh-pop-in .6s cubic-bezier(.2, 1.6, .4, 1) .6s both, qh-text-shine 3.4s linear 1.2s infinite;
}
.qh-wel-rank { margin: 4px 0 14px; font-size: 1.15rem; font-weight: 800; color: var(--wc); animation: qh-pop-in .5s ease .8s both; }
.qh-wel-but { margin: 0 0 8px; font-weight: 700; opacity: .9; }
.qh-wel-conds { list-style: none; margin: 0 auto 12px; padding: 0; display: grid; gap: 7px; width: fit-content; text-align: start; }
.qh-wel-conds li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; font-size: .92rem;
  animation: qh-pop-in .45s ease both; }
.qh-wel-conds li:nth-child(1) { animation-delay: 1s; } .qh-wel-conds li:nth-child(2) { animation-delay: 1.12s; }
.qh-wel-conds li:nth-child(3) { animation-delay: 1.24s; } .qh-wel-conds li:nth-child(4) { animation-delay: 1.36s; }
.qh-wel-conds li > span { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%;
  font-size: .72rem; font-weight: 800; flex: none; }
.qh-wel-conds li.is-ok > span { background: #2ecc71; color: #fff; }
.qh-wel-conds li.is-ok { color: #8ff0b6; }
.qh-wel-conds li.is-left > span { border: 2px solid #ffb13b; color: #ffb13b; }
.qh-wel-conds small { color: #ffc86b; font-size: .8rem; }
.qh-wel-prize { margin: 6px 0 0; font-size: .9rem; opacity: .9; }
.qh-wel-prize b { color: var(--wc); }
.qh-wel.is-placed .qh-cele-go { background: linear-gradient(135deg, var(--wc), #ffffff); color: #111a33;
  box-shadow: 0 10px 24px -8px var(--wc); }

/* ── التيم ليدر ومطوّر الأعمال ── */
.qh-wel-news { margin: 0 0 12px; font-size: 1.1rem; font-weight: 800; animation: qh-pop-in .5s ease .7s both; }
.qh-wel-team { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.qh-wel-team li {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; text-align: start;
  font-weight: 700; animation: qh-pop-in .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.qh-wel-team li:nth-child(2) { animation-delay: .1s; } .qh-wel-team li:nth-child(3) { animation-delay: .2s; }
.qh-wel-team li:nth-child(4) { animation-delay: .3s; } .qh-wel-team li:nth-child(5) { animation-delay: .4s; }
.qh-wel-team li.is-win { background: linear-gradient(90deg, rgba(247, 201, 72, .35), rgba(247, 201, 72, .12));
  border: 1px solid rgba(247, 201, 72, .7); }
.qh-wel-team li.is-near { background: rgba(127, 140, 170, .16); border: 1px solid rgba(127, 140, 170, .3); }
.qh-wel-team small { opacity: .7; font-weight: 500; font-size: .75rem; }
.qh-wel-team em { margin-inline-start: auto; font-style: normal; font-size: .78rem; }
.qh-wel-team li.is-win em { color: #c98d12; }
.qh-wel .qh-wel-team li.is-win em { color: #ffd76a; }
.qh-wel-no { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 8px;
  background: rgba(0, 0, 0, .12); font-size: .78rem; }
.qh-wel-targets { display: grid; gap: 8px; margin: 4px 0 6px; }
.qh-wel-tgt { display: grid; grid-template-columns: minmax(70px, auto) 1fr auto; align-items: center; gap: 8px; font-size: .82rem; }
.qh-wel-tgt > span:first-child { text-align: start; font-weight: 700; }
.qh-wel-tbar { height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .12); overflow: hidden; }
.qh-wel .qh-wel-tbar { background: rgba(255, 255, 255, .14); }
.qh-wel-tbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb13b, #ff6b3d);
  animation: qh-bar-fill 1.4s cubic-bezier(.3, .8, .3, 1) 1s both; }
.qh-wel-tgt.is-met .qh-wel-tbar i { background: linear-gradient(90deg, #2ecc71, #1f9d63); }
.qh-confetti.is-wel { position: fixed; z-index: 1; }

@keyframes qh-bar-fill { from { width: 0; } }
@keyframes qh-run-in { from { inset-inline-start: -14px; } }
@keyframes qh-run { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4px; rotate: -6deg; } }
@keyframes qh-wave { 0%, 100% { rotate: -8deg; } 50% { rotate: 10deg; } }
@media (max-width: 560px) {
  .qh-wel-hi { font-size: 1.3rem; }
  .qh-wel-quote.is-big { font-size: 1.2rem; }
  .qh-podium i { width: 52px; font-size: 1rem; }
  .qh-podium .p1 em { font-size: 2.6rem; top: -50px; }
}
@media (prefers-reduced-motion: reduce) {
  .qh-wel *, .qh-wel .qh-arena * { animation: none !important; }
  .qh-sparks { display: none; }
}

/* ═══════════════════ 🗓️ موسم الشهر + 🧭 التابات + «لوحتي» (heroes-board.js) ═══════════════════
   قطب عبر سارة (2026-10-01). كل الكلاسات `qb-` (اتأكّدت إنها مش مستعملة).
   🔴 **ألوان الكروت من توكنات النظام** (`--card` · `--ink` · `--line`…) عشان النهاري والليلي.
      الثابت بس: **لافتة الموسم** (لونها من الموسم نفسه، والنص أبيض فوق تدرّج غامق في
      المظهرين) و**أشكال الكارت التلاتة** (وسام/نجمة/ملعب — كارت ليه هويته). */

/* ── لافتة الموسم — زي لافتة الديمو: رسمة بطبقات + خلفية حيّة + عنوان بيلمع ──
   🔴 **مشهد داكن بلون الموسم في المظهرين** عن قصد (زي كارت الترحيب)، والنص أبيض. */
.qb-season {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; border-radius: 26px; color: #fff;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: center;
  min-height: 320px; padding: 26px 28px; margin: 0 0 14px;
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--sa) 75%, #000), color-mix(in srgb, var(--sa) 50%, #04100b) 60%, color-mix(in srgb, var(--sa) 30%, #050b08));
  box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--sa) 80%, #000);
}
.qb-season-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.qb-season-bg .b1, .qb-season-bg .b2 { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .55; }
.qb-season-bg .b1 { background: var(--sa); top: -30%; inset-inline-start: -8%; animation: qbDrift1 18s ease-in-out infinite alternate; }
.qb-season-bg .b2 { background: var(--sb); bottom: -35%; inset-inline-end: -12%; opacity: .4; animation: qbDrift2 22s ease-in-out infinite alternate; }
@keyframes qbDrift1 { to { transform: translate(18%, 12%) scale(1.15); } }
@keyframes qbDrift2 { to { transform: translate(-14%, -10%) scale(1.1); } }
.qb-season-bg .dots i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255,255,255,.5); animation: qbRise 9s linear infinite; animation-delay: calc(var(--d) * -1.5); }
@keyframes qbRise { 0% { transform: translateY(30px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-120px); opacity: 0; } }
.qb-season-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qb-eyebrow { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: color-mix(in srgb, var(--sb) 60%, #fff); }
.qb-eyebrow .live { width: 8px; height: 8px; border-radius: 50%; background: var(--sb); box-shadow: 0 0 0 0 var(--sb); animation: qbLive 2s infinite; }
@keyframes qbLive { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.qb-season h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.08;
  background: linear-gradient(100deg, #fff 20%, color-mix(in srgb, var(--sb) 70%, #fff) 50%, #fff 80%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: qbShine 7s linear infinite; }
@keyframes qbShine { to { background-position: -220% 0; } }
.qb-season p { margin: 0; color: rgba(255,255,255,.82); font-size: 1.02rem; max-width: 46ch; }
.qb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-chip { flex: 1 1 150px; min-width: 0; padding: 9px 13px; border-radius: 16px; font-size: .8rem; color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); transition: transform .25s, background .25s; }
.qb-chip:hover { transform: translateY(-3px); background: rgba(255,255,255,.14); }
.qb-chip b { display: block; font-family: var(--font-display); font-size: .92rem; color: color-mix(in srgb, var(--sb) 55%, #fff); }
.qb-mine { font-size: .92rem; color: rgba(255,255,255,.9); }
.qb-mine b { color: color-mix(in srgb, var(--sb) 45%, #fff); font-size: 1.05rem; }
.qb-peek-back { align-self: flex-start; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); color: #fff; font: inherit; font-weight: 700; font-size: .84rem; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.qb-peek-back:hover { background: rgba(255,255,255,.15); }
.qb-season-art { position: relative; height: 300px; min-width: 0; }
.qb-layer { position: absolute; inset: 0; transition: transform .25s ease-out; will-change: transform; }
.qb-layer svg { width: 100%; height: 100%; display: block; overflow: visible; }
.qb-ring { position: absolute; bottom: 4px; inset-inline-start: 4px; width: 96px; height: 96px; z-index: 3; }
.qb-season.swap .qb-season-text > * { animation: qbUp .6s cubic-bezier(.2, .8, .2, 1) both; }
.qb-season.swap .qb-season-text > *:nth-child(2) { animation-delay: .06s; } .qb-season.swap .qb-season-text > *:nth-child(3) { animation-delay: .12s; } .qb-season.swap .qb-season-text > *:nth-child(4) { animation-delay: .18s; }
.qb-season.swap .qb-season-art { animation: qbArt .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes qbUp { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes qbArt { from { opacity: 0; transform: scale(.9) rotate(-2deg); } to { opacity: 1; transform: none; } }

/* حركات الرسمة — كل عنصر حوالين نفسه (`fill-box`) */
.qb-layer svg * { transform-box: fill-box; }
.qb-a-float { animation: qbBob 5s ease-in-out infinite; } .qb-a-float.d2 { animation-delay: -1.6s; } .qb-a-float.d3 { animation-delay: -3.2s; }
@keyframes qbBob { 50% { transform: translateY(-12px) rotate(2deg); } }
.qb-a-tw { animation: qbTw 2.8s ease-in-out infinite; }
@keyframes qbTw { 50% { opacity: .2; transform: scale(.6); } }
.qb-a-sweep { transform-origin: 50% 100%; animation: qbSweep 6s ease-in-out infinite alternate; } .qb-a-sweep.r { animation-delay: -3s; }
@keyframes qbSweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.qb-a-sway { transform-origin: 50% 100%; animation: qbSway 3.8s ease-in-out infinite; }
@keyframes qbSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.qb-a-flag { transform-origin: 0 50%; animation: qbFlag 2.6s ease-in-out infinite; }
@keyframes qbFlag { 50% { transform: skewY(-6deg) scaleX(.94); } }
.qb-a-zap { animation: qbZap 1.6s steps(2) infinite; }
@keyframes qbZap { 50% { opacity: .45; } }
.qb-a-spin { transform-origin: 50% 50%; animation: qbSpin 40s linear infinite; }
.qb-a-spin-slow { animation: qbSpin 60s linear infinite; transform-box: view-box; }
@keyframes qbSpin { to { transform: rotate(360deg); } }
.qb-a-drift { animation: qbDriftX 12s ease-in-out infinite alternate; }
@keyframes qbDriftX { to { transform: translateX(40px); } }
.qb-a-heat { animation: qbHeat 2.4s ease-in-out infinite; } .qb-a-heat.d2 { animation-delay: -1.2s; }
@keyframes qbHeat { 50% { transform: translateY(-6px); opacity: .5; } }
.qb-a-run { offset-path: path("M40 262 Q200 214 360 262"); animation: qbRun2 4.5s ease-in-out infinite alternate; }
@keyframes qbRun2 { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.qb-a-arrow { transform-origin: 0 100%; animation: qbArrow 3.5s cubic-bezier(.2, .9, .2, 1) infinite; }
@keyframes qbArrow { 0% { transform: translate(60px, -50px); opacity: 0; } 25%, 85% { transform: none; opacity: 1; } 30% { transform: rotate(2deg); } 35% { transform: rotate(-1deg); } 100% { opacity: 0; } }
.qb-a-glide { animation: qbGlide 6s ease-in-out infinite; }
@keyframes qbGlide { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(-16px, -14px) rotate(3deg); } }

/* ── شريط مواسم السنة ── */
.qb-strip-wrap { margin: 0 0 18px; }
.qb-strip-head { display: flex; align-items: baseline; gap: 10px; margin: 0 4px 8px; }
.qb-strip-head b { font-family: var(--font-display); font-size: 1rem; }
.qb-strip-head small { color: var(--muted); font-size: .78rem; }
.qb-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.qb-stile { position: relative; flex: none; width: 132px; min-height: 104px; scroll-snap-align: start; border: 2px solid transparent; border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; text-align: start; cursor: pointer; font: inherit; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--sa) 80%, #000), var(--sa) 60%, color-mix(in srgb, var(--sb) 60%, var(--sa)));
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--sa) 90%, #000); transition: transform .25s cubic-bezier(.2, .9, .2, 1), box-shadow .25s, border-color .25s; }
.qb-stile:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: 0 18px 30px -14px color-mix(in srgb, var(--sa) 90%, #000); }
.qb-stile .ic { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; opacity: .9; transition: transform .4s; }
.qb-stile:hover .ic { transform: scale(1.18) rotate(-8deg); }
.qb-stile .ic svg { width: 100%; height: 100%; color: #fff; }
.qb-stile small { font-size: .7rem; opacity: .85; }
.qb-stile b { font-family: var(--font-display); font-size: .95rem; line-height: 1.25; }
.qb-stile.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 14px 26px -12px color-mix(in srgb, var(--sa) 90%, #000); }
.qb-stile.now::after { content: ""; position: absolute; top: 10px; inset-inline-start: 10px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 #fff; animation: qbLive 2s infinite; }
.qb-stile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── التابات ── */
.qb-tabs { display: flex; gap: 4px; width: fit-content; max-width: 100%; overflow-x: auto; margin: 0 0 16px; padding: 5px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.qb-tab { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .92rem; color: var(--muted); padding: 9px 20px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.qb-tab:hover { color: var(--ink); }
.qb-tab[aria-selected="true"] { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 18px -8px var(--primary); }
.qb-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── الشبكة ── */
#qbBoard { margin-bottom: 22px; }
.qb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.qb-grid > * { animation: qbIn .55s cubic-bezier(.2, .8, .2, 1) both; }
.qb-grid > *:nth-child(2) { animation-delay: .05s; } .qb-grid > *:nth-child(3) { animation-delay: .1s; } .qb-grid > *:nth-child(4) { animation-delay: .15s; }
.qb-grid > *:nth-child(5) { animation-delay: .2s; } .qb-grid > *:nth-child(6) { animation-delay: .25s; } .qb-grid > *:nth-child(7) { animation-delay: .3s; } .qb-grid > *:nth-child(8) { animation-delay: .35s; } .qb-grid > *:nth-child(9) { animation-delay: .4s; }
@keyframes qbIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.qb-c4 { grid-column: span 4; } .qb-c8 { grid-column: span 8; } .qb-c12 { grid-column: span 12; } .qb-r2 { grid-row: span 2; }
.qb-box { position: relative; min-width: 0; overflow: hidden; padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.qb-box[data-spot]::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--primary) 12%, transparent), transparent 50%); }
.qb-box[data-spot]:hover::before { opacity: 1; }
.qb-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.qb-h b, .qb-mini-h { font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; }
.qb-tag { font-size: .72rem; padding: 3px 10px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.qb-note { display: block; margin-top: 10px; font-size: .76rem; color: var(--muted); line-height: 1.6; }
.qb-empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* ── الترحيب ── */
.qb-greet { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qb-av-lg { width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff;
  background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 50%, #000)); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); }
.g-text { flex: 1; min-width: 200px; }
.g-text h3 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; }
.qb-phrase { margin: 4px 0 0; font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.qb-sub { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.qb-sub b { color: var(--ink); }
.qb-pts { text-align: center; padding: 10px 18px; border-radius: 18px; background: var(--primary-tint); color: var(--primary); }
.qb-pts b { display: block; font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.qb-pts small { display: block; font-size: .72rem; }

/* ── الكارت الهولوجرامي ── */
.qb-holo-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; perspective: 1000px; height: 100%; justify-content: center; }
.qb-holo { --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; position: relative; width: min(250px, 100%); aspect-ratio: 5 / 7; border: 0; padding: 0; background: none; cursor: pointer; font: inherit;
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s ease-out; }
.qb-holo.flip { transform: rotateY(180deg); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.qb-holo:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 22px; }
.qb-holo .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 16px 14px; box-shadow: 0 28px 46px -22px rgba(0,0,0,.6); }
.qb-holo .face.back { transform: rotateY(180deg); justify-content: center; gap: 12px; }
.qb-holo .foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: radial-gradient(circle at var(--px) var(--py), rgba(255,255,255,.75), transparent 32%),
              linear-gradient(115deg, transparent 20%, rgba(255,0,170,.32) 36%, rgba(0,255,230,.32) 50%, rgba(255,240,0,.32) 64%, transparent 80%);
  background-size: 100% 100%, 250% 250%; background-position: 0 0, var(--px) var(--py); }
.qb-holo .rt { position: absolute; top: 14px; inset-inline-start: 16px; text-align: center; line-height: 1; z-index: 2; }
.qb-holo .rt b { display: block; font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; }
.qb-holo .rt small { font-size: .6rem; font-weight: 700; }
.qb-holo .pic { width: 90px; height: 90px; margin-top: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; position: relative; z-index: 2; }
.qb-holo .nm { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; margin-top: 10px; z-index: 2; text-align: center; }
.qb-holo .tm { font-size: .7rem; opacity: .8; z-index: 2; text-align: center; }
.qb-holo .st { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 16px; margin-top: 10px; width: 100%; padding-inline: 8px; font-size: .78rem; z-index: 2; }
.qb-holo .st span { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(128,128,128,.28); }
.qb-holo .st em { font-style: normal; }
.qb-holo .st b { font-family: var(--font-display); }
.qb-holo .bt { font-family: var(--font-display); font-size: 1.05rem; z-index: 2; }
.qb-holo .bb { display: grid; grid-template-columns: repeat(3, 42px); gap: 10px; z-index: 2; }
.qb-holo .bb i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.qb-holo .bb svg { width: 22px; height: 22px; }
.qb-holo .back small { font-size: .72rem; opacity: .8; z-index: 2; }
.qb-holo[data-st="medal"] .face { background: linear-gradient(165deg, #fdf9ee, #eadfc2); color: #133a2d; border: 2px solid #c9a24a; }
.qb-holo[data-st="medal"] .face::before { content: ""; position: absolute; top: 0; inset-inline-end: 22px; width: 28px; height: 58px; background: linear-gradient(90deg, #0c5c46 0 50%, #11805f 50%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.qb-holo[data-st="medal"] .pic { background: radial-gradient(circle at 35% 30%, #1a8a66, #0a4d39); color: #f6e7b6; box-shadow: 0 0 0 5px #c9a24a, 0 0 0 8px #f3e6c4; }
.qb-holo[data-st="medal"] .face.back { background: linear-gradient(165deg, #0c5c46, #062d22); color: #f6e7b6; }
.qb-holo[data-st="medal"] .foil { opacity: .22; }
.qb-holo[data-st="star"] .face { color: #f1eaff; border: 1px solid rgba(214,200,255,.55); background: radial-gradient(1.5px 1.5px at 18% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 16%, #fff, transparent), radial-gradient(2px 2px at 86% 58%, #fff, transparent), radial-gradient(1.5px 1.5px at 28% 76%, #fff, transparent), radial-gradient(1px 1px at 54% 44%, #fff, transparent), radial-gradient(80% 60% at 50% 30%, #3b3a93, transparent), linear-gradient(170deg, #1e2263, #0b0d2e); }
.qb-holo[data-st="star"] .pic { background: radial-gradient(circle at 35% 30%, #e6d8ff, #8e7cf0); color: #1b1840; box-shadow: 0 0 34px rgba(200,180,255,.7); }
.qb-holo[data-st="star"] .rt b { color: #ffe39a; }
.qb-holo[data-st="star"] .face.back { background: linear-gradient(170deg, #161a52, #0b0d2e); }
.qb-holo[data-st="pitch"] .face { color: #2b1d02; border-radius: 22px 22px 60px 60px / 22px 22px 34px 34px; background: linear-gradient(155deg, #fff4c2, #f2c14f 40%, #b3800f); }
.qb-holo[data-st="pitch"] .pic { background: rgba(255,255,255,.4); }
.qb-holo[data-st="pitch"] .face.back { background: linear-gradient(155deg, #2c2a1c, #463c19); color: #fbeec2; }
.qb-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.qb-seg button { border: 0; background: transparent; font: inherit; font-size: .82rem; color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.qb-seg button[aria-pressed="true"] { background: var(--accent); color: #1c1504; font-weight: 700; }
.qb-hint { font-size: .74rem; color: var(--muted); text-align: center; }

/* ── المضمار ── */
.qb-tiers { display: flex; gap: 4px; flex-wrap: wrap; }
.qb-tiers i { font-style: normal; font-size: .68rem; padding: 2px 8px; border-radius: 999px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); }
.qb-tiers i.on { color: #1c1504; border-color: transparent; font-weight: 700; }
.qb-tiers .t-gold.on { background: #e6be4f; } .qb-tiers .t-silver.on { background: #c7d3df; } .qb-tiers .t-bronze.on { background: #dfa57a; } .qb-tiers .t-rise.on { background: var(--primary); color: var(--on-primary); }
.qb-track { display: flex; flex-direction: column; gap: 9px; }
.qb-lane { --c: var(--primary); display: grid; grid-template-columns: 26px minmax(0, 130px) minmax(0, 1fr); gap: 10px; align-items: center; }
.qb-lane.t-gold { --c: #d4a62a; } .qb-lane.t-silver { --c: #8fa3b5; } .qb-lane.t-bronze { --c: #c07c4a; }
.qb-lane .pos { font-family: var(--font-display); font-weight: 800; text-align: center; color: var(--c); }
.qb-lane .who { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-lane.me .who { font-weight: 800; color: var(--ink); }
.qb-lane .road { position: relative; height: 34px; border-radius: 999px; border: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent) 0 22px, transparent 22px 44px), var(--card-2); }
.qb-lane.me .road { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.qb-lane .trail { position: absolute; inset-block: 3px; inset-inline-start: 3px; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 45%, transparent)); animation: qbTrail 1.3s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes qbTrail { from { width: 0; } }
.qb-lane .runner { position: absolute; top: 50%; inset-inline-start: var(--x); transform: translate(50%, -50%); display: flex; align-items: center; gap: 6px; animation: qbRun 1.3s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes qbRun { from { inset-inline-start: 0%; } }
.qb-lane .runner .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: .74rem; color: #fff; background: var(--c); box-shadow: 0 0 0 2px var(--card); }
.qb-lane.me .runner .av { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent), 0 0 16px var(--accent); }
.qb-lane .runner b { font-size: .74rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.qb-lane .finish { position: absolute; inset-block: -4px; inset-inline-end: -2px; width: 9px; border-radius: 3px; background: repeating-conic-gradient(var(--ink) 0 25%, var(--card) 0 50%) 0 0 / 5px 5px; opacity: .55; }

/* ── السلسلة + الأسبوع ── */
.qb-streak { display: flex; align-items: center; gap: 14px; }
.qb-flame { width: 58px; height: 68px; flex: none; transform-origin: 50% 95%; animation: qbFlick 1.2s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255,120,60,.55)); }
.qb-flame .o { fill: #ff7a3d; } .qb-flame .i { fill: #ffd27a; }
@keyframes qbFlick { 25% { transform: scale(1.04, .97) rotate(-2deg); } 50% { transform: scale(.97, 1.05) rotate(2deg); } 75% { transform: scale(1.03, .98) rotate(-1deg); } }
.qb-big { display: block; font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1; }
.qb-streak small { color: var(--muted); font-size: .8rem; }
.qb-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 12px; }
.qb-week .d { text-align: center; font-size: .64rem; color: var(--muted); }
.qb-week .d i { display: block; height: 24px; border-radius: 8px; margin-bottom: 4px; background: var(--card-2); border: 1px solid var(--line); }
.qb-week .d b { display: block; font-weight: 700; }
.qb-week .d.done i { background: linear-gradient(#ff9a4a, #ff6b3d); border-color: transparent; box-shadow: 0 0 10px -2px #ff6b3d; }
.qb-week .d.bonus i { background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); border-color: transparent; }
.qb-week .d.miss i { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.qb-week .d.off i { background: repeating-linear-gradient(45deg, var(--line) 0 3px, transparent 3px 7px); }
.qb-week .d.today i { border: 2px dashed var(--primary); animation: qbPulse 1.6s ease-in-out infinite; }
.qb-week .d.out i { opacity: .4; border-style: dashed; }
@keyframes qbPulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); } }

/* ── المنافسة (شد الحبل) ── */
.qb-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; text-align: center; margin-top: 8px; }
.qb-vs strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.qb-vs small { color: var(--muted); font-size: .78rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-vs em { font-style: normal; font-family: var(--font-display); font-weight: 800; color: var(--danger); }
.qb-tug { position: relative; height: 14px; border-radius: 999px; margin: 14px 0 4px; background: linear-gradient(90deg, var(--accent) 0 var(--p), var(--line) var(--p)); }
.qb-duel.five .qb-tug { background: linear-gradient(90deg, var(--primary) 0 var(--p), var(--line) var(--p)); }
.qb-tug i { position: absolute; top: 50%; inset-inline-start: var(--p); width: 26px; height: 26px; transform: translate(50%, -50%); border-radius: 50%; background: var(--card); border: 3px solid var(--accent); box-shadow: var(--shadow-sm); animation: qbKnot 1.2s cubic-bezier(.2, .9, .2, 1) both; }
.qb-duel.five .qb-tug i { border-color: var(--primary); }
@keyframes qbKnot { from { inset-inline-start: 50%; } }

/* ── الكرة السائلة (هدف الفريق) ── */
.qb-orb-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qb-orb { position: relative; width: 130px; height: 130px; flex: none; border-radius: 50%; overflow: hidden; background: var(--card-2); box-shadow: inset 0 0 0 3px var(--line), 0 0 30px -10px var(--primary); }
.qb-orb .liquid { position: absolute; inset-inline: -50%; bottom: 0; height: var(--fill); color: var(--primary); animation: qbFill 1.6s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes qbFill { from { height: 0; } }
.qb-orb .liquid svg { position: absolute; top: -16px; width: 200%; height: 22px; fill: currentColor; animation: qbWave 4s linear infinite; }
.qb-orb .liquid svg + svg { animation-duration: 6.5s; opacity: .5; top: -12px; }
.qb-orb .liquid::after { content: ""; position: absolute; inset: 5px 0 0; background: linear-gradient(currentColor, color-mix(in srgb, currentColor 55%, #000)); }
@keyframes qbWave { to { transform: translateX(-50%); } }
.qb-orb .lbl { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; color: var(--ink); }
.qb-orb .lbl b { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1; }
.qb-orb .lbl small { font-size: .66rem; }
.qb-orb.hi .lbl { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.qb-orb-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qb-orb-side b { font-family: var(--font-display); font-size: 1.05rem; }
.qb-orb-side small { color: var(--muted); font-size: .76rem; }
.qb-squad { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.qb-squad-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.qb-squad-h > b { font-family: var(--font-display); font-size: .95rem; }
.qb-squad-h small { color: var(--muted); font-size: .74rem; } .qb-squad-h small b { color: var(--primary); }
.qb-squad-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qb-squad-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(50px, 34%) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--card-2); font-size: .82rem; }
.qb-squad-list li.me { background: var(--primary-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent); }
.qb-squad-list .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .72rem; background: var(--card); color: var(--muted); }
.qb-squad-list li.me .n { background: var(--primary); color: var(--on-primary); }
.qb-squad-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.qb-squad-list .bar { height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.qb-squad-list .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.qb-squad-list b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* ── التحديات (حلقات) ── */
/* ⚠️ **٤ أعمدة لأن التحديات ٤** (2026-10-11) — كانت ٥ من أيام «يوم كامل» فخانة الخامس فضلت فاضية على الشمال (سارة). */
.qb-quests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qb-quest { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 4px; border-radius: 16px; background: var(--card-2); border: 1px solid transparent; }
.qb-quest b { font-size: .84rem; }
.qb-quest small { font-size: .7rem; color: var(--muted); line-height: 1.4; }
.qb-qr { width: 76px; height: 76px; }
.qb-qr circle { fill: none; stroke-width: 8; }
.qb-qr .bg { stroke: var(--line); }
.qb-qr .fg { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; animation: qbRing 1.3s cubic-bezier(.2, .9, .2, 1) .2s forwards; }
@keyframes qbRing { to { stroke-dashoffset: var(--off); } }
.qb-qr text { fill: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.qb-quest.done { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--ok-tint); }
.qb-quest.done .fg { stroke: var(--ok); }
.qb-quest.broken { background: var(--danger-tint); }
.qb-quest.broken text { fill: var(--danger); }

/* ── التقييم السنوي ── */
.qb-level { display: flex; align-items: center; gap: 14px; }
.qb-level .hex { width: 64px; height: 70px; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #1c1504;
  background: linear-gradient(160deg, #f2cf6a, #b3800f); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.qb-level > div { flex: 1; min-width: 0; }
.qb-level .hex.sm { font-size: 1.05rem; }   /* ١,٠٠٠+ نقطة — الرقم أعرض من السداسي */
.qb-ladder i small { font-size: .62rem; opacity: .75; font-weight: 600; }
/* Ⓤ ×N على وش الشارة لما تتحقق أكتر من مرة */
.qb-bn { position: absolute; bottom: -2px; inset-inline-end: -6px; min-width: 24px; height: 20px; padding-inline: 5px; border-radius: 999px; display: grid; place-items: center;
  font-style: normal; font-size: .68rem; font-weight: 800; background: var(--ink); color: var(--card); box-shadow: 0 0 0 2px var(--card); }
.qb-ypill b { font-weight: 800; }
/* 👤 زرار البروفايل جنب اسم الموظف في الجدول (للجودة والباقي) */
.qh-namecell { display: inline-flex; align-items: center; gap: 6px; }
.qh-namecell .qh-prof-btn { margin: 0; flex: none; }
.qh-prof-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-start: 6px; vertical-align: middle; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); transition: color .15s, border-color .15s, background .15s; }
.qh-prof-btn:hover, .qh-prof-btn:focus-visible { color: var(--primary); border-color: var(--primary); background: var(--primary-tint); outline: none; }
.qb-level b { font-family: var(--font-display); font-size: 1.1rem; }
.qb-level small { display: block; color: var(--muted); font-size: .76rem; margin-top: 4px; }
.qb-xp { display: block; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 6px; }
.qb-xp i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); animation: qbTrail 1.3s cubic-bezier(.2, .9, .2, 1) both; }
.qb-ladder { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.qb-ladder i { font-style: normal; font-size: .7rem; padding: 2px 9px; border-radius: 999px; background: var(--card-2); color: var(--muted); }
.qb-ladder i.past { color: var(--ink); } .qb-ladder i.cur { background: var(--accent); color: #1c1504; font-weight: 800; }

/* ── الشارات (عملات) ── */
.qb-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
.qb-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; min-width: 0; }
.qb-badge .coin { position: relative; width: 74px; height: 74px; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .9, .2, 1); }
.qb-badge:hover .coin { transform: rotateY(180deg); }
.qb-badge .cf { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; backface-visibility: hidden; }
.qb-badge .cf svg { width: 34px; height: 34px; }
.qb-badge .cf.front { background: var(--card-2); color: var(--faint); box-shadow: inset 0 0 0 2px var(--line); }
.qb-badge.got .cf.front { background: radial-gradient(circle at 35% 30%, #fff1b8, #f2c14f 45%, #9b6e0b); color: #4a3303; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.22), 0 10px 22px -10px rgba(242,193,79,.8); }
.qb-badge.got.q .cf.front { background: radial-gradient(circle at 35% 30%, #c6ffe6, #37d39a 45%, #0d7a52); color: #063b27; }
.qb-badge .cf.back { transform: rotateY(180deg); background: var(--ink); color: var(--card); font-size: .66rem; font-weight: 800; padding: 10px; line-height: 1.35; }
.qb-badge .pr { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); }
.qb-badge .pr circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.qb-badge b { font-family: var(--font-display); font-size: .86rem; }
.qb-badge small { font-size: .68rem; color: var(--muted); line-height: 1.4; }
.qh-terms-pop p { margin: 0 0 10px; }
.qh-terms-pop .qh-terms { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1100px) { .qb-quests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* ٤ = ٢×٢، و٣ كانت هتسيب الرابع لوحده */
@media (max-width: 900px) {
  .qb-c4, .qb-c8 { grid-column: span 12; } .qb-r2 { grid-row: auto; }
  .qb-season { grid-template-columns: minmax(0, 1fr); padding: 20px; min-height: 0; }
  .qb-season-art { height: 210px; }
}
@media (max-width: 560px) {
  .qb-quests { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qb-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-lane { grid-template-columns: 22px minmax(0, 80px) minmax(0, 1fr); }
  .qb-stile { width: 116px; min-height: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  .qb-season, .qb-season *, .qb-grid, .qb-grid *, .qb-stile, .qb-stile * { animation: none !important; transition: none !important; }
  .qb-qr .fg { stroke-dashoffset: var(--off) !important; }
}

/* ═════════ 🎨 الصفحة بتتلوّن بلون الموسم (سارة: «زي ما كنت عامل بالديمو») ═════════
   `--sa`/`--sb` بيتحطّوا على `#qhPage` من `heroPaintBoard`. الخلفية متدرّجة بلون الموسم،
   و**اللون الأساسي** (`--primary`) جوّه الصفحة بقى لون الموسم — التابات والشرايط والأزرار.
   ⚠️ **المظهرين**: النهاري بياخد اللون الغامق (`--sa`)، والليلي الفاتح (`--sb`) — عشان التباين. */
#qhPage.qb-themed {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  padding: 18px; border-radius: 28px; border: 1px solid var(--line);
  background: radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--sa) 14%, transparent), transparent 70%),
              radial-gradient(60% 45% at 0% 100%, color-mix(in srgb, var(--sb) 16%, transparent), transparent 70%),
              var(--bg);
  transition: background .8s;
}
#qhPage.qb-themed::before {
  content: ""; position: absolute; z-index: -1; width: 55%; aspect-ratio: 1; top: -20%; inset-inline-start: 25%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sb) 26%, transparent), transparent 65%);
  animation: qbPageDrift 24s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes qbPageDrift { to { transform: translate(-40%, 60%) scale(1.2); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #qhPage.qb-themed {
    background: radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--sa) 30%, transparent), transparent 70%),
                radial-gradient(60% 45% at 0% 100%, color-mix(in srgb, var(--sb) 12%, transparent), transparent 70%),
                var(--bg);
  }
}
:root[data-theme="dark"] #qhPage.qb-themed {
  background: radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--sa) 30%, transparent), transparent 70%),
              radial-gradient(60% 45% at 0% 100%, color-mix(in srgb, var(--sb) 12%, transparent), transparent 70%),
              var(--bg);
}

/* ── رمضان: الفوانيس بتتهز والنور بيتنفّس ── */
.qb-a-lantern { transform-origin: 50% 0; animation: qbLantern 3.6s ease-in-out infinite; }
@keyframes qbLantern { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.qb-a-glow { animation: qbGlowP 2.4s ease-in-out infinite; }
@keyframes qbGlowP { 50% { opacity: .05; } }

/* ── مواسم خاصة في الشريط ── */
.qb-stile.sp { border-style: dashed; border-color: rgba(255,255,255,.4); }
.qb-stile.sp.on { border-style: solid; border-color: var(--accent); }

/* ── 🎁 ظروف العيدية ── */
.qb-envs { position: absolute; inset-inline: 0; top: 28%; z-index: 5; display: flex; justify-content: center; gap: 18px; }
.qb-env { position: relative; width: 118px; height: 84px; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; animation: qbBob 4.5s ease-in-out infinite; transition: transform .25s; }
.qb-env .back { position: absolute; inset: 0; z-index: 0; border-radius: 10px; background: #b3345d; box-shadow: 0 16px 30px -12px rgba(0,0,0,.6); }
.qb-env .letter { position: absolute; inset: 6px 8px; z-index: 1; border-radius: 8px; padding-top: 6px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(#fffaf0, #ffe6b8); color: #5a2a00; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); transition: transform .75s .2s cubic-bezier(.2, 1.3, .3, 1); }
.qb-env .letter small { font-size: .6rem; font-weight: 800; opacity: .75; white-space: nowrap; }
.qb-env .letter b { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; color: #b0366b; white-space: nowrap; }
.qb-env .letter em { font-style: normal; font-size: .56rem; opacity: .75; white-space: nowrap; }
.qb-env .front { position: absolute; inset: 0; z-index: 2; border-radius: 10px; background: linear-gradient(160deg, #ff93b4, #df4f7b); clip-path: polygon(0 26%, 50% 64%, 100% 26%, 100% 100%, 0 100%); }
.qb-env .flap { position: absolute; inset-inline: 0; top: 0; height: 64%; z-index: 3; border-radius: 10px 10px 0 0; background: linear-gradient(#ffa6c2, #e85a86); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .5s cubic-bezier(.4, 0, .2, 1), z-index 0s .25s; }
.qb-env .seal { position: absolute; top: 46%; left: 50%; z-index: 4; width: 28px; height: 28px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .8rem; color: #6b3a00;
  background: radial-gradient(circle at 35% 30%, #ffe39a, #d99a14); box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .3s, opacity .3s; }
.qb-env:not(.open):hover { animation-play-state: paused; transform: translateY(-8px) rotate(-3deg) scale(1.05); }
.qb-env:not(.open):hover .seal { transform: translate(-50%, -50%) scale(1.15); }
.qb-env:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }
.qb-env.open { animation: none; cursor: default; }
.qb-env.open .flap { transform: rotateX(180deg); z-index: 0; }
.qb-env.open .seal { transform: translate(-50%, -50%) scale(0); opacity: 0; }
.qb-env.open .letter { transform: translateY(-80%) rotate(-2deg); }
.qb-env.open:nth-child(2) .letter { transform: translateY(-80%) rotate(2deg); }
.qb-env-hint { position: absolute; inset-inline: 0; top: calc(28% + 104px); z-index: 5; text-align: center; font-size: .86rem; font-weight: 800; color: #ffe39a; text-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* ── 📖 ملخّص موسمك ── */
.qb-story-btn { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 20px; font: inherit; font-weight: 800; cursor: pointer;
  color: #1c1504; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #fff)); box-shadow: 0 10px 24px -10px var(--accent); transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.qb-story-btn svg { width: 14px; height: 14px; }
.qb-story-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px var(--accent); }
.qb-story-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform: translateX(120%); transition: transform .7s; }
.qb-story-btn:hover::after { transform: translateX(-120%); }
.qb-story-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.qb-story { position: fixed; inset: 0; z-index: 84; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.78); backdrop-filter: blur(6px); animation: qbFade .3s both; }
@keyframes qbFade { from { opacity: 0; } }
.qb-story-card { position: relative; isolation: isolate; width: min(380px, 100%); aspect-ratio: 9 / 16; max-height: calc(100vh - 32px); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; color: #fff;
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--sa) 80%, #000), color-mix(in srgb, var(--sa) 30%, #050b08) 70%); box-shadow: 0 40px 80px -20px rgba(0,0,0,.8); animation: qbStoryIn .5s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes qbStoryIn { from { transform: scale(.92) translateY(20px); opacity: 0; } }
.qb-story-card .b1, .qb-story-card .b2 { position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .55; }
.qb-story-card .b1 { background: var(--sa); top: -20%; left: -20%; animation: qbDrift1 14s ease-in-out infinite alternate; }
.qb-story-card .b2 { background: var(--sb); bottom: -30%; right: -30%; opacity: .35; animation: qbDrift2 18s ease-in-out infinite alternate; }
.qb-sbars { display: flex; gap: 4px; padding: 14px 14px 0; }
.qb-sbars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.qb-sbars i b { display: block; height: 100%; width: 0; background: #fff; }
.qb-sbars i.done b { width: 100%; }
.qb-sbars i.run b { animation: qbFill4 4.2s linear forwards; }
@keyframes qbFill4 { to { width: 100%; } }
.qb-sx { position: absolute; top: 24px; inset-inline-end: 14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; font: inherit; }
.qb-sbody { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; padding: 22px; }
.qb-sbody .k { color: rgba(255,255,255,.75); font-size: .92rem; }
.qb-sbody .v { font-family: var(--font-display); font-size: clamp(3.4rem, 17vw, 5rem); font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--sb) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qb-sbody .qb-sav { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800;
  background: linear-gradient(145deg, var(--sb), var(--sa)); box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 0 40px var(--sb); }
.qb-sbody .t { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; }
.qb-sbody .s { color: rgba(255,255,255,.75); font-size: .92rem; max-width: 28ch; }
.qb-sbody.in > * { animation: qbUp .55s cubic-bezier(.2, .8, .2, 1) both; }
.qb-sbody.in > *:nth-child(2) { animation-delay: .1s; } .qb-sbody.in > *:nth-child(3) { animation-delay: .2s; } .qb-sbody.in > *:nth-child(4) { animation-delay: .3s; }
.qb-snav { display: flex; justify-content: space-between; padding: 0 14px 16px; }
.qb-snav button { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-weight: 700; padding: 8px 20px; border-radius: 999px; cursor: pointer; }
.qb-snav .qb-snext { background: #fff; color: #111; border-color: #fff; }
.qb-snav button:focus-visible, .qb-sx:focus-visible { outline: 3px solid var(--sb); outline-offset: 2px; }

@media (max-width: 760px) {
  #qhPage.qb-themed { padding: 10px; border-radius: 20px; }
  .qb-envs { gap: 10px; top: 32%; } .qb-env { width: 90px; height: 64px; }
  .qb-env .letter b { font-size: 1rem; } .qb-env-hint { top: calc(32% + 80px); }
}
@media (prefers-reduced-motion: reduce) {
  #qhPage.qb-themed::before, .qb-env, .qb-story, .qb-story *, .qb-story-btn { animation: none !important; transition: none !important; }
}

/* ═════════ 🛡️ الدروع · الكارت الجديد · فريقي · تشكيلة الأسبوع · السجل السنوي (2026-10-11) ═════════
   كل الألوان من توكنات النظام (`--primary` · `--accent` · `--card`…) — فبتمشي مع ثيم الموسم في المظهرين.
   الدهبي (`--accent`) لدرع البطل، ولون الموسم (`--primary`) لدرع السلسلة. */

/* 🛡️ **شكل الدرع** — حافّة متدرّجة + وش لامع + أيقونة (لهب للشعلة · تاج للفارس). بـ`clip-path` و`::before`/`::after`
   مش SVG متدرّج (التدرّج بمعرّف بيبطل لو أول نسخة جوّه عنصر مستخبّي). الشعلة بلون الموسم (`--qp-l` — الغامق في
   الوضعين عشان اللهب الفاتح يبان عليه)، والفارس دهبي. */
.qb-emb { --s: 18px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: calc(var(--s) * 1.18); vertical-align: middle;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); }
.qb-emb.md { --s: 28px; } .qb-emb.lg { --s: 44px; }
.qb-emb::before, .qb-emb::after { content: ""; position: absolute; inset: 0;
  clip-path: polygon(50% 0, 70% 5%, 88% 6%, 100% 12%, 100% 48%, 96% 64%, 86% 78%, 70% 90%, 50% 100%, 30% 90%, 14% 78%, 4% 64%, 0 48%, 0 12%, 12% 6%, 30% 5%); }
.qb-emb::after { inset: calc(var(--s) * .1); }
.qb-emb > svg { position: relative; z-index: 1; width: 56%; height: 56%; margin-top: -8%; }
/* 🔴 **حافّة الشعلة فضّي ثابت** — في المواسم الدهبي (أكتوبر · أغسطس · ديسمبر) لون الموسم قريب من دهبي الفارس،
   فالدرعين كانوا بيبانوا واحد. الوش بلون الموسم والحافّة فضّي ⇒ الفرق باين في كل موسم. */
.qb-emb.streak::before { background: linear-gradient(160deg, #ffffff, #b9c2cc 45%, #5f6b78); }
.qb-emb.streak::after { background: radial-gradient(circle at 35% 22%, color-mix(in srgb, var(--qp-l, #0c5c46) 60%, #fff) 0, var(--qp-l, #0c5c46) 55%, color-mix(in srgb, var(--qp-l, #0c5c46) 70%, #000) 100%); }
.qb-emb.streak > svg { color: #ffc94a; }
.qb-emb.hero::before { background: linear-gradient(160deg, #fff6cf, #c48f1c 55%, #7a560a); }
.qb-emb.hero::after { background: radial-gradient(circle at 35% 22%, #fff3c0 0, #f2c14f 45%, #b98410 100%); }
.qb-emb.hero > svg { color: #5a3d00; }

/* الشارة الصغيرة (درع + العدد) — جنب الاسم في الجدول والحائط والفريق والمنصة */
.qb-shields { display: inline-flex; gap: 6px; vertical-align: middle; margin-inline-start: 6px; flex-wrap: wrap; }
.qb-sh { display: inline-flex; align-items: center; gap: 3px; line-height: 1; }
.qb-sh b { font-size: .7rem; font-weight: 800; color: var(--muted); }
.qb-sh small { font-size: .74rem; font-weight: 700; color: var(--ink); }
.qb-shields.named { gap: 10px; margin: 0; }
.qb-shields.named .qb-sh { gap: 5px; }
.qh-name .qb-shields { margin-inline-start: 4px; }

/* الكارت: محتوى أكتر ⇒ صورة أصغر وأسطر أوضح */
.qb-holo .face { padding: 14px 12px; }
.qb-holo .pic { width: 70px; height: 70px; margin-top: 30px; font-size: 1.8rem; }
.qb-holo .nm { margin-top: 8px; font-size: 1.08rem; }
.qb-holo .org { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 8px; z-index: 2; }
.qb-holo .org span { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 10px; background: rgba(128, 128, 128, .12); min-width: 0; }
.qb-holo .org em { font-style: normal; font-size: .58rem; opacity: .75; }
.qb-holo .org b { font-size: .64rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-holo .st { gap: 2px 12px; margin-top: 8px; font-size: .72rem; }
.qb-holo .st small { font-size: .62rem; opacity: .75; }
.qb-holo .pend { margin-top: 6px; font-size: .62rem; opacity: .8; z-index: 2; }
.qb-holo .rt b { font-size: 2rem; }
.qb-holo .bsh { z-index: 2; }
.qb-holo .bsh .qb-shields { margin: 0; gap: 12px; justify-content: center; }
.qb-holo .bsh .qb-sh small, .qb-holo .bsh .qb-sh b { color: inherit; }
.qb-holo .bb { grid-template-columns: repeat(3, minmax(0, 64px)); gap: 8px; }
.qb-holo .bb i { width: auto; height: auto; padding: 6px 2px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-style: normal; }
.qb-holo .bb i small { font-size: .52rem; line-height: 1.2; text-align: center; opacity: .9; }

/* السلسلة: «النهارده» + الشرح + سطر الدرع */
.qb-streak { position: relative; }
.qb-today { margin-inline-start: auto; text-align: center; padding: 6px 12px; border-radius: 14px; background: var(--card-2); line-height: 1.2; }
.qb-today b { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.qb-today small { font-size: .66rem; color: var(--muted); }
.qb-today.done { background: var(--primary-tint); color: var(--primary); }
.qb-today.done small { color: inherit; }
.qb-explain { margin: 10px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.7; }
.qb-explain b { color: var(--ink); }
.qb-shield-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; font-size: .8rem; line-height: 1.5;
  background: var(--card-2); color: var(--muted); }
.qb-shield-line .qb-emb { flex: none; }
.qb-shield-line b { color: var(--ink); }
.qb-shield-line.got { background: var(--primary-tint); color: var(--ink); }
.qb-shield-line.hero.got { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }

/* أسابيع الشهر (الدروع أسبوع أسبوع) */
.qb-wks-cap { display: block; font-size: .76rem; color: var(--muted); margin-bottom: 8px; }
.qb-wks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.qb-wks .wk { flex: 1 1 110px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 14px; background: var(--card-2); text-align: center; min-width: 0; }
.qb-wks .wk b { font-family: var(--font-display); font-size: .85rem; }
.qb-wks .wk i { display: flex; gap: 4px; min-height: 33px; align-items: center; font-style: normal; }
.qb-wks .wk small { line-height: 1.45; }
.qb-wks .wk small { font-size: .66rem; color: var(--muted); }
.qb-wks .wk.streak { background: var(--primary-tint); }
.qb-wks .wk.hero { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.qb-wks .wk.cur { box-shadow: inset 0 0 0 2px var(--primary); }
.qb-wks .wk.short { opacity: .75; flex-basis: 170px; }

/* زراير التقييم السنوي */
.qb-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qb-year-btn { margin-top: 12px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 18px; font: inherit; font-weight: 700; cursor: pointer; background: var(--card); color: var(--ink); transition: background .15s, border-color .15s; }
.qb-year-btn:hover { border-color: var(--primary); color: var(--primary); }
.qb-year-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* النافذة العريضة (بروفايل · سجل سنوي) */
.modal.qb-modal-wide { max-width: min(980px, calc(100vw - 32px)); padding: 18px; }
.qb-mhead { display: flex; justify-content: flex-end; margin: -6px -6px 4px; }
.qb-prof { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.qb-prof-card .qb-holo-wrap { height: auto; }
.qb-prof-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.qb-prof-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qb-prof-facts span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: var(--card-2); min-width: 0; }
.qb-prof-facts em { font-style: normal; font-size: .7rem; color: var(--muted); }
.qb-prof-facts b { font-family: var(--font-display); font-size: 1rem; overflow-wrap: anywhere; }
.qb-badges.sm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.qb-badges.sm .coin { width: 56px; height: 56px; }
.qb-badges.sm .cf svg { width: 26px; height: 26px; }
.qb-prof .qb-year-btn { align-self: flex-start; }
@media (max-width: 760px) { .qb-prof { grid-template-columns: minmax(0, 1fr); } .qb-prof-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 👥 فريقي / فرقي */
.qb-c6 { grid-column: span 6; }
.qb-tsum { display: flex; gap: 10px; flex-wrap: wrap; }
.qb-tchip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--card-2); color: var(--ink); text-decoration: none; }
.qb-tchip:hover { text-decoration: none; background: var(--primary-tint); }
.qb-tchip .pos { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; background: var(--primary); color: var(--on-primary); }
.qb-tchip b { font-family: var(--font-display); }
.qb-tchip small { color: var(--muted); font-size: .72rem; }
.qb-team-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.qb-team-head small { color: var(--muted); font-size: .75rem; }
.qb-team-head h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }
.qb-team-kpis { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 8px; flex: 1 1 520px; }
.qb-team-kpis span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: var(--card-2); min-width: 0; }
.qb-team-kpis em { font-style: normal; font-size: .7rem; color: var(--muted); }
.qb-team-kpis b { font-family: var(--font-display); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-team-kpis b small { font-size: .7rem; color: var(--muted); }
.qb-team-kpis .bar { display: block; height: 5px; margin-top: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.qb-team-kpis .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.qb-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
.qb-ttable { width: 100%; border-collapse: collapse; font-size: .86rem; }
.qb-ttable th { text-align: start; font-size: .72rem; color: var(--muted); font-weight: 700; padding: 8px 10px; background: var(--card-2); white-space: nowrap; }
.qb-ttable td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qb-ttable tbody tr:last-child td { border-bottom: 0; }
.qb-ttable tr[data-qb-profile] { cursor: pointer; transition: background .12s; }
.qb-ttable tr[data-qb-profile]:hover, .qb-ttable tr[data-qb-profile]:focus-visible { background: var(--primary-tint); outline: none; }
.qb-ttable td.n { color: var(--muted); width: 28px; }
.qb-ttable td.who { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.qb-ttable td.who > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.qb-ttable td.who small { color: var(--muted); font-size: .7rem; }
.qb-ttable .av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; background: var(--primary-tint); color: var(--primary); }
.qb-ttable .av.t-gold { background: color-mix(in srgb, var(--accent) 28%, var(--card)); color: #6b4a00; }
:root[data-theme="dark"] .qb-ttable .av.t-gold { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qb-ttable .av.t-gold { color: var(--accent); } }
.qb-ttable td.pts b { font-family: var(--font-display); font-size: 1.02rem; }
.qb-ttable td.pts small { display: block; font-size: .66rem; color: var(--warn); }
.qb-ttable td.neg { color: var(--danger); font-weight: 700; }
.qb-ttable td.wrap { white-space: normal; min-width: 170px; }
.qb-ypills { display: flex; flex-wrap: wrap; gap: 4px; }
.qb-ypill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 20%, var(--card)); color: var(--ink); white-space: nowrap; }
.qb-ypill svg { width: 13px; height: 13px; color: #9b6e0b; }
:root[data-theme="dark"] .qb-ypill svg { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qb-ypill svg { color: var(--accent); } }
.qb-ttable td.rt { font-family: var(--font-display); font-weight: 800; color: var(--primary); }
.qb-ttable tr.none td { color: var(--muted); }
.qb-ttable td b + small, .qb-ttable td > small { color: var(--muted); font-size: .7rem; }
.qb-ttable td:first-child small { display: block; }

/* 🏟️ تشكيلة الأسبوع — منصة */
.qb-wpick { display: flex; gap: 6px; flex-wrap: wrap; }
.qb-wpick button { border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.qb-wpick button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.qb-stage { position: relative; overflow: hidden; border-radius: 20px; padding: 28px 12px 0; min-height: 330px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--qp-l, var(--primary)) 55%, transparent), transparent 70%), linear-gradient(180deg, #11131c, #1b1e2b); }
.qb-stage .beam { position: absolute; top: 0; width: 140px; height: 100%; background: linear-gradient(180deg, rgba(255, 246, 200, .22), transparent 80%); filter: blur(2px); pointer-events: none;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: qbBeam 6s ease-in-out infinite alternate; }
.qb-stage .beam.l { inset-inline-start: 6%; transform-origin: top center; }
.qb-stage .beam.r { inset-inline-end: 6%; animation-delay: -3s; }
@keyframes qbBeam { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.qb-podium { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; }
.qb-pod { display: flex; flex-direction: column; align-items: center; flex: 0 1 150px; min-width: 0; cursor: pointer; }
.qb-pod.empty { cursor: default; opacity: .65; }
.qb-pod-card { position: relative; width: 100%; padding: 10px 8px 12px; border-radius: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(160deg, #fff4c9, #f2c14f); color: #2b1d02; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); transition: transform .2s; }
.qb-pod:not(.empty):hover .qb-pod-card, .qb-pod:focus-visible .qb-pod-card { transform: translateY(-6px); }
.qb-pod:focus-visible { outline: none; }
.qb-pod-card .ic { width: 26px; height: 26px; } .qb-pod-card .ic svg { width: 100%; height: 100%; }
.qb-pod-card .v { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.qb-pod-card .u { font-size: .62rem; opacity: .75; }
.qb-pod-card .nm { font-family: var(--font-display); font-size: .92rem; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-pod-card .t { font-size: .68rem; opacity: .8; }
.qb-pod-card .qb-shields { margin: 4px 0 0; }
.qb-pod.p1 .qb-pod-card { background: linear-gradient(160deg, #1b1e2b, #2a2f45); color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 34px -4px var(--accent); }
.qb-pod.p1 .qb-pod-card .ic { color: var(--accent); }
.qb-pod-step { width: 100%; margin-top: 10px; border-radius: 14px 14px 0 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: rgba(255, 255, 255, .85);
  background: linear-gradient(180deg, color-mix(in srgb, var(--qp-l, var(--primary)) 70%, #2a2f45), color-mix(in srgb, var(--qp-l, var(--primary)) 35%, #12141c)); }
.qb-pod.p1 .qb-pod-step { height: 150px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, #2a2f45), color-mix(in srgb, var(--accent) 25%, #12141c)); color: #fff4c9; }
.qb-pod.p2 .qb-pod-step { height: 112px; } .qb-pod.p3 .qb-pod-step { height: 88px; } .qb-pod.p4 .qb-pod-step { height: 66px; } .qb-pod.p5 .qb-pod-step { height: 50px; }
.qb-chiplist { display: flex; gap: 8px; flex-wrap: wrap; }
.qb-pchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.qb-pchip:hover { border-color: var(--primary); }
.qb-pchip .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); font-family: var(--font-display); font-weight: 800; }
.qb-box .qb-h b:has(> svg) { display: inline-flex; align-items: center; gap: 6px; }
.qb-box .qb-h b > svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.qb-box .qb-h b:has(> .qb-emb) { display: inline-flex; align-items: center; gap: 8px; }
.qb-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qb-wcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.qb-wcard:hover { transform: translateY(-3px); border-color: var(--primary); }
.qb-wcard .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; background: var(--primary); color: var(--on-primary); }
.qb-wcard.t-gold .av { background: linear-gradient(135deg, #fff1b8, #f2c14f); color: #4a3303; }
.qb-wcard b { font-family: var(--font-display); }
.qb-wcard small { font-size: .7rem; color: var(--muted); }
.qb-wcard .qb-shields { margin: 2px 0 0; }

/* 📅 السجل السنوي */
.qb-year-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qb-year-head small { color: var(--muted); font-size: .75rem; }
.qb-year-head h3 { font-family: var(--font-display); margin: 0; font-size: 1.3rem; }
.qb-year-avg { text-align: center; padding: 8px 18px; border-radius: 16px; background: var(--primary-tint); color: var(--primary); }
.qb-year-avg b { display: block; font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; }
.qb-year-avg small { font-size: .7rem; }

@media (max-width: 900px) { .qb-c6 { grid-column: span 12; } .qb-team-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .qb-podium { gap: 5px; } .qb-pod-card { padding: 8px 4px; } .qb-pod-card .v { font-size: 1.15rem; }
  .qb-pod-card .nm { font-size: .76rem; white-space: normal; line-height: 1.25; }   /* الاسم بيلفّ بدل ما يتقص — محتوى مقصوص = مش موجود */
  .qb-pod-card .t, .qb-pod-card .u { font-size: .58rem; } .qb-stage { min-height: 290px; padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) { .qb-stage .beam { animation: none; } }

/* ═════════ 🎨 ثيم الموسم على السيستم كله — الإصدار التاني (سارة 2026-10-01) ═════════
   🔴 **الأول اترفض («مش مريح للعين ابدًا»)**: كان بيخلط لون الموسم **جوّه** الألوان المحايدة
      (الخلفية · الكروت · الخطوط)، وهي أصلاً مايلة للأخضر — فأكتوبر طلع خاكي معكّر، والخطوط
      بقت غامقة فحدود كل صندوق وجدول باينة، والأزرار بلون رسمة الموسم الخام (بني غامق)
      واللوجو فاضل أخضر. ❌ ماترجّعش الخلط ده.
   ✅ **دلوقتي**: المحايد **محايد** (رمادي نضيف، والكروت بيضا/فحمي، والخطوط زي ما هي تقريبًا) —
      والموسم بيدخل في **لون واحد مختار بالإيد لكل موسم** (`ui` في `heroes-board.js`): الأزرار ·
      التابات · اللوجو · الشارات · الروابط. **مقاس التباين للـ١٥ موسم**: النص الأبيض على الأساسي
      ≥ ٤.٥ في النهاري، والنص الغامق على الأساسي ≥ ٧ في الليلي، والأساسي على الكارت ≥ ٤.٥.
   🔴 **والخطوط أهدى من الأصل** (سارة 2026-10-01: «شايفة حدود الجدول أو الديف فبيبقى شكلها مش
      لطيف»): الكارت بيبان بفرق لونه عن الخلفية وبظل خفيف، والخط بقى فاصل بين صفوف بس — في
      النهاري الخط أفتح من الخلفية نفسها، فحدّ الكارت مابيتشافش. ❌ ماتغمّقش `--line` تاني.
   ⚠️ **الدهبي (`--accent`) مااتلمسش** — لون الكاس والمراكز، وخلفية لنص غامق في أماكن كتير. */
:root.qs-season {
  --bg: color-mix(in srgb, var(--qp-l) 2%, #f3f4f6);
  --bg-2: color-mix(in srgb, var(--qp-l) 3%, #ebedf0);
  --card: #ffffff;
  --card-2: color-mix(in srgb, var(--qp-l) 2%, #f8f9fa);
  --ink: #1b1f24; --muted: #5d6570; --faint: #8a929c;
  --line: #eef0f2; --line-strong: #e2e5e9;
  --primary: var(--qp-l);
  --primary-600: color-mix(in srgb, var(--qp-l) 85%, #000);
  --primary-700: color-mix(in srgb, var(--qp-l) 70%, #000);
  --primary-tint: color-mix(in srgb, var(--qp-l) 9%, #fff);
  --on-primary: #ffffff;
  --ring: 0 0 0 3px color-mix(in srgb, var(--qp-l) 22%, transparent);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px -2px rgba(16, 24, 40, .07);
  --shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 28px -10px rgba(16, 24, 40, .16);
  --shadow-lg: 0 30px 60px -24px rgba(16, 24, 40, .3);
}
@media (prefers-color-scheme: dark) {
  :root.qs-season:not([data-theme="light"]) {
    --bg: color-mix(in srgb, var(--qp-d) 3%, #0f1115);
    --bg-2: color-mix(in srgb, var(--qp-d) 3%, #12151a);
    --card: color-mix(in srgb, var(--qp-d) 3%, #171a20);
    --card-2: color-mix(in srgb, var(--qp-d) 4%, #1b1e24);
    --ink: #e9ecf1; --muted: #9aa3ae; --faint: #78818c;
    --line: #20242b; --line-strong: #2a2f37;
    --primary: var(--qp-d);
    --primary-600: color-mix(in srgb, var(--qp-d) 85%, #fff);
    --primary-700: color-mix(in srgb, var(--qp-d) 80%, #000);
    --primary-tint: color-mix(in srgb, var(--qp-d) 14%, #171a20);
    --on-primary: #0b0f0c;
    --ring: 0 0 0 3px color-mix(in srgb, var(--qp-d) 25%, transparent);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 34px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, .7);
  }
}
:root.qs-season[data-theme="dark"] {
  --bg: color-mix(in srgb, var(--qp-d) 3%, #0f1115);
  --bg-2: color-mix(in srgb, var(--qp-d) 3%, #12151a);
  --card: color-mix(in srgb, var(--qp-d) 3%, #171a20);
  --card-2: color-mix(in srgb, var(--qp-d) 4%, #1b1e24);
  --ink: #e9ecf1; --muted: #9aa3ae; --faint: #78818c;
  --line: #20242b; --line-strong: #2a2f37;
  --primary: var(--qp-d);
  --primary-600: color-mix(in srgb, var(--qp-d) 85%, #fff);
  --primary-700: color-mix(in srgb, var(--qp-d) 80%, #000);
  --primary-tint: color-mix(in srgb, var(--qp-d) 14%, #171a20);
  --on-primary: #0b0f0c;
  --ring: 0 0 0 3px color-mix(in srgb, var(--qp-d) 25%, transparent);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 34px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, .7);
}
/* اللوجو بلون الموسم (سارة: «خد بالك من اللوجو») — قاعدة `styles.css` الأصلية والأيقونة زي ما هما. */
:root.qs-season .brand-mark { background: var(--primary); color: var(--on-primary); }
:root.qs-season body { transition: background-color .6s ease; }

/* 🧪 اختيار «تجربة المواسم» — المعاينة المحلية بس (بيترسم من `heroDemoSeasonPicker` لما `api.demo`). */
.qs-demo-pick { position: fixed; z-index: 70; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: .82rem; color: var(--muted); }
.qs-demo-pick .qs-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.qs-demo-pick .qs-lbl { font-weight: 700; color: var(--ink); white-space: nowrap; }
.qs-demo-pick select { font: inherit; font-size: .82rem; color: var(--ink); background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; max-width: 46vw; cursor: pointer; }
.qs-demo-pick select:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ═════════ 🎨 تغطية الثيم — الأخضر الثابت بقى لون الموسم (سارة 2026-10-01) ═════════
   🔴 **«لسه في حاجات بلون أخضر… حتى إشعار الكاس»**: التوكنات اتربطت بالموسم، بس فيه
      مكوّنات لونها **رقم مكتوب** مش توكن — مشهد الكاس وراسه، كارت الترحيب، المنصّة، الاحتفال،
      ستايل «ميدالية» في الكارت، شارات المهام، لوحة الدخول، و**توكنات التعاقدات المحلية**
      (`--k-*`، نسخة من التصميم المرجعي بأخضرها). كلهم بيقروا من هنا لما `.qs-season` شغّال.
   📌 **`--qs-deep/--qs-mid/--qs-hi` = مشهد غامق بلون الموسم** — من `--qp-l` في الوضعين (ده
      اللون الغامق المقاس على نص أبيض)، فالنص الأبيض والدهبي جوّه المشهد مقروء في النهاري والليلي.
   ✅ **اللي فاضل أخضر عن قصد**: هوية الشركة (`--k-aa-*` أوامر أخضر · `--k-cs-*` المنظومة أزرق) ·
      النجاح (`--ok` و`--k-done-*` و«الشرط اتحقّق» ✓) · واتساب (`--c-wa`) · وألوان الطباعة
      (`!important` جوّه `@media print` — الورق مالوش موسم). */
:root.qs-season {
  --qs-deep: color-mix(in srgb, var(--qp-l) 46%, #06080c);
  --qs-mid: color-mix(in srgb, var(--qp-l) 80%, #06080c);
  --qs-hi: color-mix(in srgb, var(--qp-l) 88%, #ffffff);
  --qs-soft: color-mix(in srgb, var(--qp-d) 28%, #ffffff);   /* نص فرعي فاتح جوّه المشهد */
}
:root.qs-season .qh-race,
:root.qs-season .hn-head { background: linear-gradient(115deg, var(--qs-deep), var(--qs-mid)); }
:root.qs-season .qh-race p,
:root.qs-season .hn-sub,
:root.qs-season .qh-cele-sub,
:root.qs-season .qh-cele-stats small { color: var(--qs-soft); }
/* 🏆 زرار الكاس — الإطار والكاس دهبي زي ما هما، والأرضية بس بلون الموسم */
:root.qs-season .hn-btn {
  background: radial-gradient(circle at 50% 30%, var(--qs-hi) 0%, var(--qs-mid) 55%, var(--qs-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 8px -3px rgba(0, 0, 0, .45);
}
:root.qs-season .hn-btn[aria-expanded="true"] {
  background: radial-gradient(circle at 50% 30%, var(--qs-hi) 0%, var(--qs-mid) 60%, var(--qs-deep) 100%);
}
:root.qs-season .qh-cele { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--qs-mid) 90%, transparent), color-mix(in srgb, var(--qs-deep) 94%, #000) 70%); }
:root.qs-season .qh-cele-card { background: linear-gradient(160deg, color-mix(in srgb, var(--qs-mid) 92%, transparent), color-mix(in srgb, var(--qs-deep) 95%, transparent)); }
:root.qs-season .qh-cele-go { color: var(--qs-deep); }
:root.qs-season .qh-wel.is-climb,
:root.qs-season .qh-wel.is-lead,
:root.qs-season .qh-wel.is-hello {
  background: radial-gradient(ellipse 120% 90% at 50% 105%, var(--qs-mid) 0%, var(--qs-deep) 42%, #05070a 100%);
}
:root.qs-season .qh-podium i { background: linear-gradient(180deg, var(--qs-hi), var(--qs-deep)); }
/* 🎴 ستايل «ميدالية» في الكارت: الدهبي والكريمي زي ما هما، والشريط والصورة والضهر بلون الموسم */
:root.qs-season .qb-holo[data-st="medal"] .face { color: var(--qs-deep); }
:root.qs-season .qb-holo[data-st="medal"] .face::before { background: linear-gradient(90deg, var(--qs-deep) 0 50%, var(--qs-mid) 50%); }
:root.qs-season .qb-holo[data-st="medal"] .pic { background: radial-gradient(circle at 35% 30%, var(--qs-hi), var(--qs-deep)); }
:root.qs-season .qb-holo[data-st="medal"] .face.back { background: linear-gradient(165deg, var(--qs-mid), var(--qs-deep)); }
/* ⚠️ الضهر نصّه فاتح — قاعدة `.face` اللي فوق (لون غامق للوش) أتقل من قاعدة الضهر الأصلية فكانت بتغلبها. */
:root.qs-season .qb-holo[data-st="medal"] .face.back { color: #f6e7b6; }
:root.qs-season .qb-badge.got.q .cf.front {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--qp-l) 14%, #fff), color-mix(in srgb, var(--qp-l) 55%, #fff) 45%, var(--qp-l));
  color: var(--qs-deep);
}
/* 🔐 لوحة الدخول — نص أبيض، فبتاخد اللون الغامق في الوضعين */
:root.qs-season .auth-brand { background: linear-gradient(150deg, var(--qs-deep), var(--qp-l) 60%, var(--qs-mid)); color: #f4f6fa; }
:root.qs-season .auth-brand .glow.g1 { background: var(--qp-d); }
:root.qs-season .auth-brand .lead { color: var(--qs-soft); }
/* 📏 المسار ما يختفيش لما الخط هدي */
:root.qs-season .meter .track { background: var(--bg-2); }
:root.qs-season .spinner { border-color: var(--bg-2); border-top-color: var(--primary); }

/* 📄 التعاقدات: توكناتها المحلية (`contracts.css`) بتقرا السيستم. `html:root` عشان تكسب على
   `:root[data-theme="dark"] .ctr` و`:root:not([data-theme="light"]) .ctr` (نفس الوزن، وده بعدهم
   بس ماينفعش نعتمد على الترتيب). الليلي مش محتاج نسخة: التوكنات اللي بنقرا منها بتتقلب لوحدها. */
html:root.qs-season .ctr,
html:root.qs-season .ctr-overlay {
  --k-ink: var(--ink); --k-muted: var(--muted);
  --k-green: var(--primary); --k-green-deep: var(--primary-700); --k-green-soft: var(--primary-tint);
  --k-line: var(--line); --k-line-2: var(--line-strong); --k-bg: var(--bg); --k-card: var(--card);
  --k-head: var(--card-2); --k-rowline: var(--line); --k-th: var(--muted); --k-field: var(--ink);
  --k-tabbg: var(--bg-2); --k-tabfg: var(--muted); --k-dash: var(--faint);
  --k-overlay: rgba(8, 10, 14, .6);
  --k-shadow: var(--shadow-sm); --k-shadow-lg: var(--shadow-lg);
}

/* 🧪 «معمل الثيم» (`#/ui-lab`) — المعاينة المحلية بس */
/* أعمدة صحف مش جريد: الكروت أطوالها مختلفة، والجريد كان بيسيب فراغ تحت القصير. */
.ul-cols { columns: 3 300px; column-gap: 14px; }
.ul-cols > .card { break-inside: avoid; margin: 0 0 14px; }
.card.ul-wide { margin: 0 0 14px; }
.ul-cols .emp-grid { grid-template-columns: minmax(0, 1fr); }
.ul-h { font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; margin: 0 0 12px; }
.ul-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ul-row + .ul-row { margin-top: 10px; }
.ul-note { color: var(--muted); font-size: .84rem; margin: 10px 0 0; line-height: 1.7; }
.ul-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ul-sw span { display: block; font-size: .72rem; color: var(--muted); text-align: center; }
.ul-sw i { display: block; height: 40px; border-radius: 10px; margin-bottom: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.qs-demo-pick a { color: var(--primary); font-weight: 700; white-space: nowrap; text-decoration: none; padding-inline: 4px; }
.qs-demo-pick a:hover { text-decoration: underline; }