@charset "UTF-8";
/* أنماط التطبيق — نُقلت حرفياً من index.html في الإصدار 400.
   كانت خمس كتل <style> متتالية في <head>، وجُمعت هنا بترتيبها
   نفسه فلا يتغيّر التتالي. عدِّل الأنماط هنا لا في الصفحة. */

/* ══════ main ══════ */
    /* ══ تسلسل الطبقات ══
   كانت ١٩ قيمة متناثرة آخرها 99999 — علامة يأس لا تصميم.
   الترتيب هنا مقصود: المحتوى < الملتصق < التنقّل < العائم <
   المنسدل < النوافذ < التنبيهات. أي عنصر جديد يأخذ اسماً لا رقماً. */
    :root {
      --bnav-h: 66px;
      --z-base: 1;
      --z-sticky: 100;
      --z-nav: 200;
      --z-float: 500;
      --z-drop: 1000;
      --z-modal: 5000;
      --z-toast: 9000;
      --z-critical: 9999;
    }

    /* ══ ظهورٌ موحّد — لا إبهارٌ يُبطئ، بل وضوحٌ يقول أيّ شيءٍ حلّ
       محلّ أيّه ══ خفيفة ومحسوبة (٢٢٠ مللي ثانية): بطاقة الغرض حين
       تُطوى، ولوح «خطتك اليوم» حين يحلّ محلّ التفرّع، والشريط العائم
       حين يظهر. أي عنصرٍ جديد يريد نفس الأثر يضيف الصنف .fx-in فقط —
       لا حاجة لجافاسكربت. وتُعطَّل كاملةً لمن يفضّل تقليل الحركة. */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes fxIn {
        from { opacity: 0; transform: translateY(6px) }
        to   { opacity: 1; transform: translateY(0) }
      }
      .fx-in, .pl-card, .nextbar, .hh, #goalSummary, #goalFull, #planFollow {
        animation: fxIn .22s ease-out
      }
    }

    /* ═════════════════════════════════════════════════════════════
       مركز الألوان — مصدرٌ واحد لا يُكتب لونٌ خارجه
       ═════════════════════════════════════════════════════════════
       الدرجات **مقروءةٌ من المرجع الذي اختاره المالك** لا مقدّرةً
       بالعين: قُرئت من متغيّراته وحُوّلت من HSL إلى ستَّ عشريّ.

         primary   #0da2e7   أزرقٌ سماويّ     — الفعل والروابط
         secondary #07409c   كحلٌ عميق        — الرؤوس والتدرّجات
         accent    #f9ce4e   ذهبٌ فاتح       — التمييز والوسوم
         bg        #f8fafc   slate-50
         border    #e2e8f0   slate-200
         muted     #64748b   slate-500
         fg        #020817   أقرب إلى الأسود

       والتشبّع والتناسق منه حرفيّاً — لا لونٌ مخترع.
       وما بقي من أسماء (--n · --g · --gt) يُشتقّ من هذه الستّة
       لا يُكتب مستقلّاً — فاختلافُ درجتين في موضعين هو التشويه
       الذي رآه المالك. */
    :root {
      --stick: 118px;
      --topbar-h: 52px;

      /* —— الستّة الأصول —— */
      --c-primary: #0da2e7;
      --c-secondary: #07409c;
      --c-accent: #f9ce4e;
      --c-bg: #f8fafc;
      --c-border: #e2e8f0;
      --c-muted: #64748b;
      --c-fg: #020817;

      /* —— ما يُشتقّ منها —— */
      --n: var(--c-secondary);
      --n2: #0b57c9;
      --n3: var(--c-primary);
      --g: var(--c-accent);
      --g2: #fde39a;
      /* ذهبٌ داكن للنصّ على الأبيض: الفاتح عليه لا يُقرأ */
      --gt: #8a6a00;
      --bg: var(--c-bg);
      --card: #fff;
      --bd: var(--c-border);
      --tx: var(--c-fg);
      --mu: var(--c-muted);
      --gr: #ecfdf5;
      --gr2: #059669;
      --rd: #fef2f2;
      --rd2: #dc2626;
      --bl: #f0f9ff;
      --bl2: var(--c-secondary);
      --fn: "Tajawal", Arial, sans-serif;
      --sh: 0 3px 16px rgba(2, 8, 23, .07);
      --r: 14px;
    }

    /* السمة الزرقاء كانت مبنيّةً في CSS ومعطَّلةً في الواجهة — لا زرّ
       يصل إليها. وقبل فتحها قِيس تباينها فوُجد نقصان:
         --g  ‎#1f7ae0‎: زرّ «متابعة» نصّه ‎--n‎ فوقه = ٣٫٦ (دون AA).
                        و‎#4da3ee‎ يرفعه إلى ٥٫٧١، وعلى الأبيض ٢٫٧ —
                        أحسن من ذهبيّ السمة الافتراضية نفسه (٢٫٢٩).
         --mu ‎#5b7fa6‎: ٤٫١٧ على الأبيض، و‎#54759a‎ يرفعه إلى ٤٫٧٩.
       ولا يُغمَّق ‎--g‎ بل يُفتَح: نصّ الزرّ داكن، فالخلفية تُضاء. */
    body[data-theme="blue"] {
      --n: #0b2545;
      --n2: #123a63;
      --n3: #1b4f7a;
      --g: #4da3ee;
      --g2: #7cc0f7;
      --bg: #eef4fc;
      --card: #fff;
      --bd: #cfe0f2;
      --tx: #123a63;
      --mu: #54759a;
      --bl: #e6f1fb;
      --bl2: #12557f
    }

    [data-dark] {
      --gt: #c9a84c;
      --bg: #06101e;
      --card: #0d1e35;
      --bd: #1a3050;
      --tx: #d4e4ff;
      --mu: #6b8bb4;
      --gr: #071d10;
      --rd: #1a0705;
      --bl: #07162a;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden
    }

    body {
      font-family: var(--fn);
      background: var(--bg);
      color: var(--tx);
      direction: rtl;
      padding-bottom: 70px;
      min-height: 100vh;
      -webkit-text-size-adjust: 100%
    }

    img,
    svg,
    video,
    canvas {
      max-width: 100%;
      height: auto;
      display: block
    }

    button,
    input,
    select,
    textarea {
      font: inherit
    }

    main,
    .page,
    .screen,
    .panel,
    .section,
    .card,
    .layout,
    .content {
      width: min(100%, 1280px);
      margin-inline: auto
    }

    @media (min-width:768px) {
      body {
        padding-inline: clamp(12px, 2vw, 28px);
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px))
      }

      .tabs,
      .hook,
      .dy,
      .sec,
      .card,
      .panel,
      .sub-lock,
      #ntfPanel {
        max-width: 1200px;
        margin-inline: auto
      }

      .tabs {
        left: 50%;
        transform: translateX(-50%);
        width: min(96vw, 980px);
        border-radius: 18px 18px 0 0;
        bottom: 10px
      }
    }

    @media (min-width:768px) and (max-width:1023px) {
      .rs-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .vgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .mk-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .sl-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .ct-btn {
        font-size: 12px;
        padding: 11px 8px
      }
    }

    @media (min-width:1024px) {
      body {
        padding-inline: clamp(20px, 2.8vw, 40px)
      }

      .tabs {
        width: min(92vw, 1120px)
      }

      .rs-grid {
        grid-template-columns: repeat(5, minmax(110px, 1fr))
      }

      .vgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .mk-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .chart-block,
      .tips-card,
      .pcard,
      .rcard,
      .rule-block,
      .card,
      .panel,
      .sub-lock,
      .dy,
      .hook {
        max-width: 1180px;
        margin-inline: auto
      }
    }

    @media (max-width:767px) {
      body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        padding-top: 0
      }
    }

    @media (display-mode:standalone) {
      body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px))
      }

      .topbar {
        padding-top: max(8px, env(safe-area-inset-top, 0px))
      }
    }

    .spbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      z-index: var(--z-float);
      pointer-events: none;
    }

    .spf {
      height: 100%;
      background: linear-gradient(90deg, var(--g), var(--g2));
      width: 0;
      transition: width .08s;
    }

    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(16px);
      background: var(--n);
      color: var(--g);
      padding: 9px 20px;
      border-radius: 28px;
      font-size: 13px;
      font-weight: 700;
      border: 1.5px solid var(--g);
      opacity: 0;
      transition: all .25s;
      pointer-events: none;
      z-index: var(--z-toast);
      white-space: nowrap;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: var(--z-nav);
      background: var(--n);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      min-height: 52px;
      padding-top: 6px;
      padding-bottom: 6px;
      border-bottom: 2px solid rgba(201, 168, 76, .3);
      box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
      width: 100%;
      box-sizing: border-box;
    }

    .topbar h1 {
      font-size: 16px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1.1;
    }

    /* ستّة أزرار + عنوان في ٥٢px: العنوان يلتفّ ثلاثة أسطر على أي هاتف
   أعرض من ٣٨٠px. سطر واحد وحذف بالنقاط، والأزرار لا تنكمش. */
    @media (max-width:700px) {
      .topbar h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1 1 auto;
        font-size: 14.5px;
        margin-inline-end: 8px
      }

      .tbbtns {
        flex: 0 0 auto
      }
    }

    @media (max-width:430px) {
      .topbar h1 {
        font-size: 13.5px
      }
    }

    @media (max-width:560px) {
      .topbar {
        padding-inline: 10px
      }

      .tbbtns {
        gap: 5px
      }

      .ibtn {
        width: 34px;
        height: 34px;
        font-size: 15px
      }

      .topbar h1 {
        max-width: 42vw
      }
    }

    @media (max-width:420px) {
      .tabs {
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px))
      }

      .tab {
        padding-top: 7px;
        padding-bottom: 6px
      }

      .tabi {
        width: 32px;
        height: 32px
      }

      .tabl {
        font-size: 8.5px;
        letter-spacing: 0;
      }
    }

    .topbar p {
      font-size: 9px;
      color: rgba(255, 255, 255, .4);
    }

    .tbbtns {
      display: flex;
      gap: 7px;
    }

    .ibtn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .08);
      color: var(--gt);
      font-size: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    /* ══ الشريط الموحّد: الاسم وزرّ الحساب · الجرس والقائمة ══ */
    .topbar .tb-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0
    }

    .tb-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 800;
      color: var(--gt);
      background: rgba(201, 168, 76, .14);
      border: 1px solid rgba(201, 168, 76, .45);
      border-radius: 9px;
      padding: 6px 11px;
      cursor: pointer
    }

    .tbbtns .tb-hide {
      display: none !important
    }

    .topbar .ibtn {
      border-radius: 10px
    }

    .topbar .ibtn.tb-sq {
      border: 1px solid rgba(201, 168, 76, .45);
      background: rgba(201, 168, 76, .14)
    }

    .gm-scrim {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(5, 15, 30, .5);
      z-index: calc(var(--z-modal) + 250)
    }

    .gm-scrim.on {
      display: block
    }

    .gm-p {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: min(86vw, 300px);
      z-index: calc(var(--z-modal) + 300);
      overflow-y: auto;
      padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
      background: var(--card);
      color: var(--tx);
      border-right: 1px solid var(--bd);
      box-shadow: 8px 0 26px rgba(10, 22, 40, .3);
      transform: translateX(-110%);
      visibility: hidden;
      transition: transform .25s ease, visibility 0s linear .25s;
      font-family: var(--fn)
    }

    .gm-p.on {
      transform: translateX(0);
      visibility: visible;
      transition: transform .25s ease
    }

    .gm-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2px 6px 12px;
      margin-bottom: 6px;
      border-bottom: 1px solid var(--bd)
    }

    .gm-head b {
      font-size: 14px;
      color: var(--gt)
    }

    .gm-x {
      font: inherit;
      font-size: 20px;
      line-height: 1;
      padding: 2px 8px;
      border: 0;
      background: none;
      color: var(--mu);
      cursor: pointer
    }

    .gm-h {
      font-size: 11px;
      color: var(--mu);
      padding: 8px 12px 3px
    }

    .gm-i {
      display: block;
      width: 100%;
      text-align: right;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--tx);
      padding: 10px 12px;
      min-height: 44px;
      border: 0;
      border-radius: 9px;
      background: none;
      cursor: pointer
    }

    .gm-i:hover {
      background: rgba(127, 127, 127, .1)
    }

    .gm-sep {
      height: 1px;
      margin: 6px 8px;
      background: var(--bd)
    }

    .gm-out {
      color: #d9534f
    }

    /* بنود المسجَّل والزائر والمشرف — الأصناف يضعها _syncTopButtons */
    .gm-p .acct-in,
    .gm-p .gm-admin {
      display: none
    }

    .gm-p.signed .acct-in,
    .gm-p.admin .gm-admin {
      display: block
    }

    .gm-p.signed .acct-guest {
      display: none
    }

    .gm-p.no-plan .gm-plan,
    .gm-p.no-rescue .gm-rescue {
      display: none
    }

    @media (max-width: 400px) {
      #tbAcctL {
        display: none
      }

      .tb-pill {
        padding: 7px 9px
      }
    }

    .tabs {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: var(--z-nav);
      background: var(--n);
      border-top: 1.5px solid rgba(201, 168, 76, .2);
      display: flex;
      padding-bottom: env(safe-area-inset-bottom, 0);
      box-shadow: 0 -3px 16px rgba(0, 0, 0, .25);
    }

    .tab {
      flex: 1;
      padding: 9px 4px 7px;
      border: none;
      background: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      font-family: var(--fn);
      position: relative;
      transition: all .25s;
    }

    .tabi {
      font-size: 21px;
      transition: transform .25s;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .tabl {
      font-size: 10px;
      font-weight: 800;
      color: rgba(255, 255, 255, .4);
      transition: color .25s;
    }

    .tab.on .tabi {
      transform: translateY(-1px) scale(1.12);
    }

    .tab.on .tabl {
      color: var(--gt);
    }

    .tab.on::before {
      content: '';
      position: absolute;
      top: 0;
      left: 20%;
      right: 20%;
      height: 2px;
      background: var(--g);
      border-radius: 0 0 3px 3px;
    }

    /* شريط التثبيت الثابت — فوق الشريط السفليّ على الجوّال */
    #instFloat {
      position: fixed;
      inset-inline: 10px;
      bottom: calc(74px + env(safe-area-inset-bottom, 0px));
      z-index: calc(var(--z-nav) + 1);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      background: linear-gradient(135deg, #0b1e36, #163255);
      border: 1.5px solid rgba(201, 168, 76, .45);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
      font-family: var(--fn);
      color: #fff
    }

    #instFloat .if-ic .ico {
      width: 22px;
      height: 22px;
      color: var(--g)
    }

    #instFloat .if-t {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      line-height: 1.5
    }

    #instFloat .if-t b {
      font-size: 13px;
      color: var(--g2)
    }

    #instFloat .if-t span {
      font-size: 10.5px;
      color: rgba(255, 255, 255, .65)
    }

    #instFloat .if-go {
      background: var(--g);
      color: #0a1628;
      border: 0;
      border-radius: 18px;
      padding: 8px 14px;
      font: 900 12.5px var(--fn);
      cursor: pointer;
      flex-shrink: 0
    }

    #instFloat .if-x {
      background: none;
      border: 0;
      color: rgba(255, 255, 255, .55);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      padding: 2px 4px
    }

    @media (min-width: 1024px) {
      #instFloat {
        inset-inline: auto 24px;
        bottom: 24px;
        max-width: 420px
      }
    }

    /* جرس الإشعارات */
    #ntfDot {
      position: absolute;
      top: 2px;
      inset-inline-end: 2px;
      min-width: 15px;
      height: 15px;
      padding: 0 3px;
      border-radius: 8px;
      background: #c0392b;
      color: #fff;
      font-size: 9.5px;
      font-weight: 900;
      line-height: 15px;
      text-align: center;
      display: none
    }

    #ntfPanel {
      position: fixed;
      top: 54px;
      inset-inline-end: 10px;
      width: min(330px, 92vw);
      max-height: 66vh;
      overflow: auto;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 14px;
      box-shadow: 0 12px 34px rgba(0, 0, 0, .34);
      z-index: calc(var(--z-modal) + 100);
      display: none;
      padding: 8px
    }

    #ntfPanel.on {
      display: block
    }

    #ntfPanel .ntf-i {
      padding: 9px 10px;
      border-bottom: 1px dashed var(--bd);
      font-size: 12.5px;
      line-height: 1.75;
      font-family: var(--fn);
      color: var(--tx)
    }

    #ntfPanel .ntf-i:last-child {
      border-bottom: none
    }

    #ntfPanel .ntf-i.un {
      background: rgba(201, 168, 76, .09);
      border-radius: 8px
    }

    #ntfPanel .ntf-d {
      font-size: 10px;
      color: var(--mu);
      margin-top: 3px
    }

    /* لافتة الاشتراك */

    /* ══ أيقونات SVG موحّدة — تحلّ محلّ الإيموجي في الواجهة ══ */
    .ico {
      width: 1.15em;
      height: 1.15em;
      vertical-align: -.2em;
      flex-shrink: 0
    }

    .sec-title .ico {
      width: 1.05em;
      height: 1.05em;
      margin-left: 5px;
      color: var(--gt)
    }

    .tabi .ico {
      width: 21px;
      height: 21px
    }

    .ricon .ico {
      width: 19px;
      height: 19px
    }

    .ico.c-g {
      color: var(--gr2)
    }

    .ico.c-b {
      color: #1f7ae0
    }

    .ico.c-r {
      color: var(--rd2)
    }

    .ico.c-y {
      color: #d4a017
    }

    .ico.c-p {
      color: #8e44ad
    }

    .ibtn.is-admin {
      box-shadow: 0 0 0 2px var(--g) inset
    }

    /* القطعة تُدرَج تحت بلاطتها داخل شبكة، فتمتدّ عرضها كلّه
       وإلّا انحشرت في عمودٍ واحد. */
    .gdx-grid>.rq-content-inline {
      grid-column: 1 / -1
    }

    /* ══ الدردشة العائمة ══
       منزلةٌ عالية وموضعٌ ثابت — الدرس من منسدلة اللوحة:
       ما كان داخل شريطٍ ذي منزلة لا يعلو منزلته مهما كُتِب له. */
    #chFab {
      position: fixed;
      inset-block-end: 78px;
      inset-inline-start: 16px;
      z-index: calc(var(--z-toast) - 500);
      display: none;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      color: #fff;
      background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
      box-shadow: 0 6px 22px rgba(29, 78, 216, .42)
    }

    #chFab:hover {
      filter: brightness(1.08)
    }

    #chPanel {
      position: fixed;
      inset-block-end: 78px;
      inset-inline-start: 16px;
      z-index: calc(var(--z-toast) - 400);
      width: min(92vw, 360px);
      max-height: min(72vh, 560px);
      display: none;
      flex-direction: column;
      overflow: hidden;
      border-radius: 16px;
      background: var(--card);
      border: 1px solid var(--bd);
      box-shadow: 0 16px 44px rgba(10, 22, 40, .32)
    }

    #chPanel.on {
      display: flex
    }

    .ch-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      color: #fff;
      background: linear-gradient(135deg, var(--n), #1d4ed8)
    }

    .ch-head b {
      font-size: 14px
    }

    .ch-x {
      cursor: pointer;
      font: inherit;
      font-size: 20px;
      line-height: 1;
      border: none;
      background: none;
      color: #fff
    }

    .ch-tabs {
      display: flex;
      gap: 6px;
      padding: 9px 12px 0
    }

    .ch-t {
      cursor: pointer;
      font: inherit;
      font-size: 12.5px;
      font-weight: 800;
      padding: 6px 13px;
      border-radius: 999px;
      color: var(--mu);
      background: transparent;
      border: 1px solid var(--bd)
    }

    .ch-t.on {
      color: #10231a;
      background: var(--g);
      border-color: var(--g)
    }

    .ch-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .ch-mu {
      color: var(--mu);
      font-size: 12.5px;
      line-height: 1.9;
      text-align: center;
      padding: 22px 8px
    }

    .ch-b {
      max-width: 84%;
      padding: 9px 12px;
      border-radius: 13px;
      font-size: 13px;
      line-height: 1.85
    }

    .ch-b b {
      display: block;
      font-size: 11.5px;
      color: var(--gt);
      margin-bottom: 2px
    }

    .ch-b i {
      display: block;
      font-style: normal;
      font-size: 10px;
      opacity: .65;
      margin-top: 4px
    }

    .ch-me {
      align-self: flex-start;
      background: rgba(201, 168, 76, .16);
      border: 1px solid var(--bd)
    }

    .ch-them {
      align-self: flex-end;
      background: var(--bg);
      border: 1px solid var(--bd)
    }

    .ch-adm {
      align-self: flex-end;
      background: rgba(14, 165, 233, .12);
      border: 1px solid rgba(14, 165, 233, .4)
    }

    .ch-foot {
      display: flex;
      gap: 7px;
      padding: 10px 12px;
      border-top: 1px solid var(--bd)
    }

    .ch-foot input {
      flex: 1;
      min-width: 0;
      font: inherit;
      font-size: 13.5px;
      padding: 10px 12px;
      border-radius: 10px;
      color: var(--tx);
      background: var(--bg);
      border: 1px solid var(--bd)
    }

    .ch-foot input:focus {
      outline: none;
      border-color: var(--g)
    }

    .ch-foot button {
      cursor: pointer;
      font-size: 17px;
      width: 42px;
      border: none;
      border-radius: 10px;
      color: #fff;
      background: var(--n2)
    }

    .ch-foot button:disabled {
      opacity: .5
    }

    /* ══ شبكة البطاقات البلوريّة — نسقٌ واحد للدليل كلّه ══
       المالك أراني بطاقات «أقسام التطبيق» وقال: هذا الشكل للقواعد
       والتهيئة وللدليل كلّه. واسمُه في التصميم: **Card Grid**.

       واخترتُ المستطيل لا السداسيّ: السداسيّ يترك فراغاً ميّتاً
       بين الصفوف، ويقصّ النصّ العربيّ عند أطرافه المائلة، ويُصغّر
       مساحة اللمس في الجوّال. والبلوريّة تأتي من اللمعة لا من الشكل. */
    .xgrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 12px
    }

    .xcard {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      text-align: right;
      font: inherit;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 16px 14px 18px;
      border-radius: 16px;
      color: var(--tx);
      background: var(--card);
      border: 1px solid var(--bd);
      box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease
    }

    /* اللمعة البلوريّة: ضوءٌ مائل في الزاوية العليا، لا تدرّجٌ
       يبتلع النصّ فيقلّ تباينُه. */
    .xcard::before {
      content: "";
      position: absolute;
      inset-inline-end: -30%;
      top: -60%;
      width: 90%;
      height: 130%;
      transform: rotate(18deg);
      background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
      pointer-events: none
    }

    [data-dark] .xcard::before {
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0))
    }

    .xcard:hover {
      transform: translateY(-3px);
      border-color: var(--g);
      box-shadow: 0 10px 26px rgba(15, 23, 42, .13)
    }

    .xcard:active {
      transform: translateY(0)
    }

    .xcard .xi {
      position: relative;
      font-size: 26px;
      line-height: 1;
      margin-bottom: 3px
    }

    .xcard .xt {
      position: relative;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.55
    }

    .xcard .xs {
      position: relative;
      font-size: 11px;
      color: var(--mu);
      line-height: 1.7
    }

    .xcard .xb {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 3px
    }

    .xcard .xb span {
      font-size: 9.5px;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 6px
    }

    /* الشريط السفليّ — هو الذي يجعل البطاقة تُقرأ بطاقةً لا مربّعاً */
    /* الشريط يُرفع عن الحافّة: الحافّة دائريّة وoverflow يقصّه
"
       فيُرى مقطوعاً من طرفيه. */
    .xcard::after {
      content: "";
      position: absolute;
      inset-inline: 26%;
      bottom: 7px;
      height: 4px;
      border-radius: 4px;
      background: var(--n3)
    }

    .xcard.x-gold::after {
      background: var(--g)
    }

    .xcard.x-hot::after {
      background: #e05c4b
    }

    .xcard.x-dim {
      opacity: .5
    }

    @media (max-width:400px) {
      .xgrid {
        grid-template-columns: 1fr 1fr;
        gap: 10px
      }

      .xcard {
        padding: 14px 11px 16px
      }
    }

    /* ══ البطل ══ نسق المرجع: تدرّجٌ كحليٌّ إلى سماويّ، ونصٌّ أبيض */
    .hero {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      padding: 30px 22px 24px;
      margin-bottom: 18px;
      color: #fff;
      background: linear-gradient(135deg, var(--n) 0%, #1d4ed8 55%, var(--n3) 100%)
    }

    .hero::after {
      content: "";
      position: absolute;
      inset-inline-end: -70px;
      top: -70px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .07)
    }

    .hero-tag {
      position: relative;
      display: inline-block;
      font-size: 11.5px;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 13px;
      color: var(--g2);
      background: rgba(255, 255, 255, .13)
    }

    .hero h3 {
      position: relative;
      font-size: 25px;
      font-weight: 900;
      line-height: 1.5;
      margin-bottom: 10px
    }

    .hero h3 b {
      color: var(--g2)
    }

    .hero p {
      position: relative;
      font-size: 13.5px;
      line-height: 2;
      opacity: .9;
      margin-bottom: 18px;
      max-width: 62ch
    }

    .hero-cta {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 18px
    }

    .hb {
      cursor: pointer;
      font: inherit;
      font-weight: 900;
      font-size: 14px;
      padding: 12px 24px;
      border-radius: 11px;
      border: 1.5px solid transparent
    }

    .hb-1 {
      color: #10231a;
      background: var(--g)
    }

    .hb-1:hover {
      filter: brightness(1.07)
    }

    .hb-2 {
      color: #fff;
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .35)
    }

    .hb-2:hover {
      background: rgba(255, 255, 255, .2)
    }

    /* ══ رئيسية الزائر: البطل أعلاها، ثمّ الحصريّ، ثمّ ما للمشتركين ══
       والبطل نفسه كان في كتلة البيع أسفل الصفحة — يُخفى هناك كي لا يُقرأ
       مرّتين، وتبدأ الكتلة بالخطط. */
    #homeSell>.hero {
      display: none
    }

    .vtop-hero {
      margin: 0 0 14px
    }

    /* الشارة والعنوان في الوسط، والفقرة (max-width بلا هامشٍ تلقائيّ) والأزرار
       كانتا تلتصقان باليمين على الشاشات العريضة — لا تناسق. */
    .vtop-hero p {
      margin-inline: auto
    }

    .vtop-hero .hero-cta {
      justify-content: center
    }

    /* «ليش الشامل بالذات؟» كانت قائمةً طويلة بعمودٍ واحد على الشاشة العريضة.
       صارت شبكة بطاقاتٍ بنمط «ما لا تجده في غيره» (.vx-i). */
    #homeWhy .bl {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 9px
    }

    #homeWhy .bl li {
      background: var(--card);
      border: 1px solid rgba(201, 168, 76, .35);
      border-radius: 14px;
      box-shadow: var(--sh);
      padding: 12px 42px 12px 14px;
      color: var(--mu);
      font-size: 11.5px;
      line-height: 1.8
    }

    #homeWhy .bl li:last-child {
      border-bottom: 1px solid rgba(201, 168, 76, .35)
    }

    #homeWhy .bl li::before {
      right: 14px;
      top: 14px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 11px
    }

    #homeWhy .bl li b {
      font-size: 13.5px;
      margin-bottom: 2px
    }

    .vx {
      margin: 0 0 14px
    }

    .vx-h {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0 2px 9px;
      font-family: var(--fn)
    }

    .vx-h b {
      font-size: 15px;
      color: var(--tx)
    }

    .vx-h span {
      font-size: 11.5px;
      color: var(--mu)
    }

    .vx-g {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 9px
    }

    .vx-i {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      text-align: right;
      font-family: var(--fn);
      background: var(--card);
      color: var(--tx);
      border: 1px solid rgba(201, 168, 76, .35);
      border-radius: 14px;
      padding: 13px 14px;
      cursor: pointer;
      box-shadow: var(--sh)
    }

    .vx-i:hover {
      border-color: var(--g)
    }

    .vx-ic {
      font-size: 22px;
      line-height: 1.2
    }

    .vx-i b {
      font-size: 13.5px;
      color: var(--gt)
    }

    .vx-d {
      font-size: 11.5px;
      color: var(--mu);
      line-height: 1.7
    }

    .vs {
      position: relative;
      margin: 0 0 14px;
      padding: 16px 14px 14px;
      border-radius: 16px;
      background: linear-gradient(135deg, #0b1e36, #1a3a5c);
      border: 1.5px solid rgba(201, 168, 76, .45);
      font-family: var(--fn)
    }

    .vs-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 900;
      color: #0a1628;
      background: var(--g);
      border-radius: 8px;
      padding: 3px 10px;
      margin-bottom: 10px
    }

    .vs-g {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px
    }

    .vs-c {
      cursor: pointer;
      border-radius: 13px;
      padding: 13px 14px;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .14)
    }

    .vs-r {
      background: linear-gradient(135deg, #5a1410, #a8342a)
    }

    .vs-n {
      background: linear-gradient(135deg, #1c2a4f, #36407a)
    }

    .vs-c b {
      display: block;
      font-size: 14.5px;
      margin-bottom: 6px
    }

    .vs-c ul {
      list-style: none;
      margin: 0 0 8px;
      padding: 0
    }

    .vs-c li {
      font-size: 12px;
      line-height: 1.9;
      opacity: .92
    }

    .vs-c li::before {
      content: '✓ ';
      color: #f0c419
    }

    .vs-go {
      font-size: 11.5px;
      font-weight: 800;
      color: #f0c419
    }

    .vs-cta {
      display: block;
      width: 100%;
      margin-top: 12px;
      font-family: var(--fn);
      font-size: 14px;
      font-weight: 900;
      color: #0a1628;
      background: var(--g);
      border: 0;
      border-radius: 12px;
      padding: 12px;
      cursor: pointer
    }

    .hero-chips {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px
    }

    .hero-chips span {
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .1)
    }

    .hero-stats {
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
      gap: 10px;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .18)
    }

    .hero-stats div {
      text-align: center
    }

    /* كانت أعداداً فصارت كلمات: الأربعة والعشرون مقاسُ رقمٍ لا اسم */
    .hero-stats b {
      display: block;
      font-size: 16.5px;
      font-weight: 900;
      color: var(--g2)
    }

    .hero-stats span {
      display: block;
      font-size: 11px;
      opacity: .82;
      margin-top: 2px
    }

    @media (max-width:520px) {
      .hero {
        padding: 24px 16px 20px
      }

      .hero h3 {
        font-size: 21px
      }

      .hb {
        flex: 1;
        padding: 12px 10px
      }

      /* أربعُ خاناتٍ على عرض الجوّال تنزل ثلاثاً وواحدة، فنصفّها صفّين */
      .hero-stats {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    /* ══ بطاقات الخطط ══
       نسقُ المرجع الذي اختاره المالك: بطاقةٌ بيضاء بحوافّ ١٦px وظلٍّ
       خفيف، ورأسٌ متدرّج من الكحل إلى الأزرق السماويّ، والذهبيّ وسمَ
       الأكثر اختياراً. والشبكة تتكيّف بلا نقاط توقّفٍ مكتوبة. */
    #planCards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
      gap: 14px;
      margin-bottom: 16px
    }

    .pc {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: 16px;
      padding: 0 0 16px;
      overflow: hidden;
      box-shadow: 0 4px 18px rgba(10, 22, 40, .07);
      transition: transform .16s ease, box-shadow .16s ease
    }

    .pc:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(10, 22, 40, .14)
    }

    .pc-best {
      border-color: var(--g);
      box-shadow: 0 6px 26px rgba(201, 168, 76, .26)
    }

    .pc-flag {
      position: absolute;
      top: 12px;
      inset-inline-start: 12px;
      z-index: calc(var(--z-base) + 1);
      font-size: 10.5px;
      font-weight: 900;
      padding: 3px 10px;
      border-radius: 999px;
      color: #10231a;
      background: var(--g)
    }

    .pc-h {
      padding: 20px 16px 16px;
      color: #fff;
      background: linear-gradient(135deg, var(--n) 0%, #1160a8 100%)
    }

    /* الوسم مطلق الموضع فوق الرأس، فكان يغطّي اسم الخطة على الجوّال:
       نُنزل نصّ رأس البطاقة المميّزة وحدها تحته. */
    .pc-best .pc-h {
      padding-top: 42px
    }

    .pc-h b {
      display: block;
      font-size: 15.5px;
      font-weight: 900
    }

    .pc-h span {
      display: block;
      margin-top: 4px;
      font-size: 11.5px;
      line-height: 1.75;
      opacity: .85
    }

    .pc-p {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 6px;
      padding: 15px 14px 2px
    }

    .pc-p b {
      font-size: 30px;
      font-weight: 900;
      color: var(--gt)
    }

    .pc-p i {
      font-style: normal;
      font-size: 14px;
      color: var(--mu);
      text-decoration: line-through
    }

    .pc-p em {
      font-style: normal;
      font-size: 12px;
      color: var(--mu)
    }

    .pc-d {
      text-align: center;
      font-size: 11.5px;
      color: var(--mu);
      margin-bottom: 12px
    }

    .pc-x {
      padding: 0 16px;
      margin-bottom: 10px;
      font-size: 12.5px;
      line-height: 1.95;
      color: var(--tx)
    }

    .pc-who {
      padding: 0 16px;
      margin-bottom: 12px;
      font-size: 11.5px;
      line-height: 1.8;
      color: var(--mu)
    }

    .pk-all {
      list-style: none;
      padding: 12px 16px;
      margin: 0 0 16px;
      border-radius: 12px;
      background: var(--card);
      border: 1px solid var(--bd);
      font-size: 12.5px;
      line-height: 2.05;
      color: var(--tx)
    }

    .pc-l {
      list-style: none;
      padding: 0 16px;
      margin: 0 0 14px;
      flex: 1
    }

    .pc-l li {
      position: relative;
      font-size: 12.5px;
      line-height: 1.95;
      padding-inline-start: 20px
    }

    .pc-l li::before {
      content: "✓";
      position: absolute;
      inset-inline-start: 0;
      color: var(--gr2);
      font-weight: 900
    }

    .pc-l .pc-dep {
      margin-top: 6px;
      padding-inline-start: 0;
      font-size: 11.5px;
      color: var(--mu)
    }

    .pc-l .pc-dep::before {
      content: ""
    }

    .pc-go {
      margin: 0 16px;
      cursor: pointer;
      font: inherit;
      font-weight: 900;
      font-size: 13.5px;
      padding: 10px 0;
      border-radius: 10px;
      border: none;
      color: #10231a;
      background: var(--g)
    }

    .pc-go:hover {
      filter: brightness(1.06)
    }

    .pc-note {
      grid-column: 1 / -1;
      margin-top: 2px;
      padding: 11px 14px;
      border-radius: 11px;
      font-size: 12.5px;
      line-height: 1.9;
      color: var(--mu);
      background: var(--card);
      border: 1px dashed var(--bd)
    }

    /* ══ القطع المُجمَعة ══ */
    .cs-card {
      border: 1px solid var(--bd, #24384a);
      border-radius: 13px;
      margin-bottom: 10px;
      overflow: hidden
    }

    .cs-head {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      padding: 12px 14px;
      cursor: pointer;
      text-align: right;
      font: inherit;
      color: inherit;
      background: rgba(255, 255, 255, .03);
      border: none
    }

    .cs-head b {
      flex: 1;
      font-size: 13.5px
    }

    .cs-b {
      font-size: 11px;
      padding: 2px 9px;
      border-radius: 999px;
      white-space: nowrap;
      border: 1px solid var(--g);
      color: var(--g)
    }

    .cs-go {
      font-size: 16px;
      color: var(--mu)
    }

    .cs-body {
      padding: 12px 14px 16px
    }

    .cs-s {
      direction: ltr;
      text-align: left;
      font-size: 13px;
      line-height: 1.95;
      margin-bottom: 9px;
      padding-inline-start: 34px;
      position: relative
    }

    /* رقمُ الرواة على الجملة — قرينةُ الثقة تُقرأ بلا شرح */
    .cs-s .cs-n {
      position: absolute;
      inset-inline-start: 0;
      top: 3px;
      min-width: 24px;
      text-align: center;
      font-size: 10.5px;
      padding: 1px 5px;
      border-radius: 6px;
      color: var(--g);
      background: rgba(201, 168, 76, .13)
    }

    .cs-solo {
      margin: 14px 0;
      padding: 11px 13px;
      border-radius: 10px;
      border: 1px dashed var(--mu);
      font-size: 12.5px;
      line-height: 1.9
    }

    .cs-solo b {
      display: block;
      margin-bottom: 7px;
      font-size: 12px;
      color: var(--mu)
    }

    .cs-solo p {
      direction: ltr;
      text-align: left;
      margin-bottom: 6px
    }

    .cs-mid {
      font-size: 10.5px;
      opacity: .7
    }

    .cs-lock {
      text-align: right;
      border: 1px solid var(--g);
      border-radius: 14px;
      padding: 16px 15px;
      background: rgba(201, 168, 76, .07)
    }

    .cs-cta {
      cursor: pointer;
      font: inherit;
      font-weight: 800;
      padding: 10px 20px;
      border-radius: 999px;
      border: none;
      color: #10231a;
      background: var(--g)
    }

    /* نصيب الخطّة: «٤٠ من ٨٠ قطعة — وللحصول على الباقي رقِّ اشتراكك أو تواصل معنا» */
    .share-note {
      font-family: var(--fn);
      font-size: 12px;
      line-height: 2;
      margin: 0 0 12px;
      padding: 8px 12px;
      border: 1px solid var(--g);
      border-radius: 12px;
      background: rgba(201, 168, 76, .07)
    }

    .share-note button {
      cursor: pointer;
      font: inherit;
      font-weight: 800;
      padding: 2px 11px;
      border-radius: 999px;
      border: none;
      color: #10231a;
      background: var(--g)
    }

    /* شريط معاينة المشرف — لا يراه غيره، فلا يزاحم تصميم الدليل */
    #pvBar {
      display: none;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
      padding: 8px 13px;
      font-size: 12.5px;
      border-bottom: 1px solid var(--g);
      background: rgba(201, 168, 76, .09)
    }

    #pvBar .pv-b {
      cursor: pointer;
      padding: 4px 11px;
      border-radius: 999px;
      font: inherit;
      font-size: 12px;
      color: inherit;
      border: 1px solid var(--g);
      background: transparent
    }

    #pvBar .pv-b.on {
      background: var(--g);
      color: #10231a;
      font-weight: 800
    }

    #pvBar .pv-n {
      flex-basis: 100%;
      opacity: .8;
      font-size: 11.5px
    }

    /* ══ الشاشات الصغيرة جداً (≤ 380px) ══
   خمسة أزرار × 36px + الفجوات = 208px، فلا يبقى للعنوان إلا 84px
   على شاشة 320. نصغّر الأزرار ونقصّ العنوان بدل أن يلتفّ ويكسر الشريط. */
    @media (max-width:380px) {
      .ibtn {
        width: 32px;
        height: 32px;
        font-size: 15px
      }

      .ibtn svg {
        width: 17px;
        height: 17px
      }

      .tbbtns {
        gap: 5px
      }

      .topbar {
        padding: 0 10px
      }

      .topbar h1 {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 34vw
      }

      .rs-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .mk-steps {
        gap: 5px
      }

      .ct-btn {
        font-size: 12px;
        padding: 11px 5px
      }

      .pk-price {
        font-size: 18px
      }
    }

    /* ══ الجوال أفقياً — شريط سفلي أقصر ══ */
    @media (max-height:460px) and (orientation:landscape) {
      .tabs {
        padding-top: 2px
      }

      .tab {
        padding: 5px 4px 4px
      }

      .tabl {
        font-size: 9px
      }

      body {
        padding-bottom: calc(var(--bnav-h, 62px) + env(safe-area-inset-bottom, 0px) + 8px)
      }
    }

    /* ══ سمة عالية التباين — لضعاف البصر ══ */
    body[data-theme="hc"] {
      --n: #000;
      --n2: #000;
      --n3: #111;
      --g: #7a5f00;
      --g2: #8a6d00;
      --gt: #7a5f00;
      --bg: #fff;
      --card: #fff;
      --bd: #000;
      --tx: #000;
      --mu: #333;
      --gr: #e6ffe6;
      --gr2: #006400;
      --rd: #ffe6e6;
      --rd2: #a00;
      --bl: #e6f0ff;
      --bl2: #003a8c
    }

    body[data-theme="hc"] .ibtn {
      background: #000;
      color: #ffd400;
      border: 2px solid #ffd400
    }

    /* الذهبي على الخلفيات الداكنة يبقى فاقعاً — التباين هناك ١٤.٧:١ */
    body[data-theme="hc"] .hook,
    body[data-theme="hc"] .sub-lock,
    body[data-theme="hc"] .dy {
      --g: #ffd400;
      border-color: #ffd400
    }

    body[data-theme="hc"] * {
      text-shadow: none !important;
      box-shadow: none !important
    }

    body[data-theme="hc"] .tab.on {
      outline: 3px solid #000
    }

    /* ══ سمة دافئة — أقل إجهاداً للعين ══ */
    body[data-theme="warm"] {
      --n: #2b1e10;
      --n2: #3d2b17;
      --n3: #543c20;
      --g: #b8860b;
      --g2: #e0b34d;
      --gt: #7d6410;
      --bg: #faf3e6;
      --card: #fffaf0;
      --bd: #e4d5bb;
      --tx: #2f2515;
      --mu: #7a6748;
      --bl: #f5ecdb;
      --bl2: #6b4e1f
    }

    /* ══ مقياس حجم الخط ══ */
    body[data-fs="l"] {
      font-size: 110%
    }

    body[data-fs="xl"] {
      font-size: 122%
    }

    body[data-fs="l"] .qstem,
    body[data-fs="l"] .gstem,
    body[data-fs="l"] .ptext {
      font-size: 1.1em
    }

    body[data-fs="xl"] .qstem,
    body[data-fs="xl"] .gstem,
    body[data-fs="xl"] .ptext {
      font-size: 1.22em
    }

    /* ══ مؤشّر التركيز — للتنقّل بلوحة المفاتيح ══ */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible,
    [tabindex]:focus-visible {
      outline: 3px solid var(--g);
      outline-offset: 2px;
      border-radius: 6px
    }

    /* ══ لوحة إعدادات العرض ══ */
    #dispPanel {
      display: none;
      position: fixed;
      top: 56px;
      left: 8px;
      right: 8px;
      max-width: 340px;
      margin-inline: auto;
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: 16px;
      box-shadow: 0 10px 34px rgba(0, 0, 0, .3);
      padding: 14px;
      z-index: calc(var(--z-modal) + 200)
    }

    #dispPanel.on {
      display: block
    }

    #dispPanel h4 {
      font-family: var(--fn);
      font-size: 12.5px;
      font-weight: 900;
      color: var(--tx);
      margin: 0 0 8px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .dp-row {
      display: flex;
      gap: 7px;
      margin-bottom: 13px
    }

    .dp-b {
      flex: 1;
      padding: 9px 4px;
      border-radius: 11px;
      border: 1.5px solid var(--bd);
      background: transparent;
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 800;
      color: var(--tx);
      cursor: pointer
    }

    .dp-b[aria-pressed="true"] {
      border-color: var(--gt);
      background: color-mix(in srgb, var(--g) 16%, transparent);
      color: var(--gt)
    }

    .dp-b .sw {
      display: block;
      width: 100%;
      height: 15px;
      border-radius: 5px;
      margin-bottom: 5px;
      border: 1px solid var(--bd)
    }

    .dp-close {
      width: 100%;
      padding: 9px;
      border: none;
      border-radius: 20px;
      background: var(--g);
      color: #0a1628;
      font-family: var(--fn);
      font-size: 12.5px;
      font-weight: 900;
      cursor: pointer
    }

    /* ══ وسم القطعة المتكررة ══ */
    .rep-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: rgba(201, 168, 76, .18);
      border: 1px solid rgba(201, 168, 76, .5);
      color: var(--gt);
      font-family: var(--fn);
      font-size: 9.5px;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 8px;
      margin-right: 6px
    }

    .rep-tag .ico {
      width: 11px;
      height: 11px
    }

    /* درجتان فوق الذهبي: الأحمر لأكثر ما يتكرّر، والباهت لما لم يُؤكَّد
   بعد. الوسم نصّاً باهتاً بحجم ١٠px لا يُقرأ — والطالب يحتاج أن
   يعرف بأيّها يبدأ قبل أن يفتح الثمانية بالترتيب. */
    /* ── نموذج الاستماع: فاصل المقاطع والنصّ المطويّ ── */
    .lm-clip {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
      margin: 16px 0 8px;
      padding: 9px 12px;
      background: rgba(201, 168, 76, .10);
      border-right: 3px solid var(--g);
      border-radius: 0 10px 10px 0;
      font-family: var(--fn)
    }

    .lm-clip .lm-cn {
      font-size: 10px;
      font-weight: 900;
      color: var(--gt);
      background: rgba(201, 168, 76, .20);
      padding: 2px 8px;
      border-radius: 7px
    }

    .lm-clip b {
      font-size: 13px;
      color: var(--tx)
    }

    .freq-inline {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
      background: var(--card);
      border: 1.5px solid var(--g);
      border-radius: 13px;
      padding: 12px;
      text-align: start;
      overflow: hidden
    }

    .freq-inline .freq-close {
      float: left;
      border: 0;
      background: transparent;
      color: var(--mu);
      font-size: 17px;
      cursor: pointer
    }

    .lm-clip i {
      font-size: 11px;
      color: var(--mu);
      font-style: normal
    }

    .lm-scr {
      margin: 10px 0 18px;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 12px
    }

    .lm-scr summary {
      cursor: pointer;
      padding: 11px 13px;
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 800;
      color: var(--gt)
    }

    .lm-scr p {
      margin: 0;
      padding: 0 13px 13px;
      font-size: 12.5px;
      line-height: 1.9;
      color: var(--mu)
    }

    /* ── لوحة التسريبات ── */
    .lk-i {
      position: relative;
      overflow: hidden;
      cursor: pointer
    }

    .lk-i>u {
      position: absolute;
      inset-inline-start: 0;
      bottom: 0;
      height: 2px;
      background: currentColor;
      opacity: .30;
      text-decoration: none
    }

    .lk-i>span {
      position: relative;
      z-index: var(--z-base)
    }

    .lk-detail {
      display: none;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed currentColor;
      opacity: .75;
      font-size: 10.5px
    }

    .lk-detail span {
      background: rgba(255, 255, 255, .08);
      border-radius: 6px;
      padding: 2px 7px
    }

    .lk-i.open .lk-detail {
      display: flex
    }

    .lk-caret {
      font-style: normal;
      display: inline-block;
      margin-inline-start: 4px;
      opacity: .55;
      transition: transform .2s;
      font-size: 10px
    }

    .lk-i.open .lk-caret {
      transform: rotate(180deg)
    }

    .lk-hidden {
      display: none !important
    }

    .lk-tr {
      font-style: normal;
      font-size: 9.5px;
      opacity: .62;
      margin-inline-start: 5px;
      white-space: nowrap
    }

    .lk-fresh {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 9px 0 0;
      padding: 7px 11px;
      background: rgba(201, 168, 76, .12);
      border: 1px solid rgba(201, 168, 76, .30);
      border-radius: 9px
    }

    .lk-fresh b {
      font-size: 12px;
      color: var(--gt)
    }

    .lk-fresh span {
      font-size: 11px;
      color: #cfd8ea
    }

    /* ══ مكوّنات منقولة من مقترح الواجهة — بمتغيّراتك اللونية لا بألوان الملف ══
   لم يُغيَّر لون واحد: كل ما دون مأخوذ من --card و--bd و--g و--mu. */
    /* ① شريط تجارب المشتركين — يُسحب أفقياً */
    .tst-wrap {
      overflow-x: auto;
      margin: 0 -4px;
      padding: 2px 4px 8px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch
    }

    .tst-wrap::-webkit-scrollbar {
      display: none
    }

    .tst-strip {
      display: flex;
      gap: 12px;
      width: max-content
    }

    .tst-card {
      flex: none;
      width: 230px;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 16px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .tst-av {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--g), #a9822a);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      color: #1a1200;
      font-size: 14px;
      flex: none
    }

    .tst-hd {
      display: flex;
      align-items: center;
      gap: 9px
    }

    .tst-nm {
      font-weight: 800;
      font-size: 12.5px;
      color: var(--tx)
    }

    .tst-rl {
      font-size: 10px;
      color: var(--mu)
    }

    .tst-tx {
      font-size: 11.5px;
      color: var(--mu);
      line-height: 1.9
    }

    .tst-ph {
      border: 1.5px dashed rgba(201, 168, 76, .45);
      align-items: center;
      justify-content: center;
      color: var(--mu);
      font-size: 11.5px;
      text-align: center;
      min-height: 112px
    }

    /* ② الأسئلة الشائعة */
    .faq-i {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 14px;
      margin-bottom: 10px;
      overflow: hidden
    }

    .faq-q {
      padding: 14px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      font-weight: 800;
      font-size: 13px;
      gap: 10px;
      color: var(--tx);
      font-family: var(--fn);
      text-align: right
    }

    .faq-q .faq-cv {
      transition: .3s;
      color: var(--mu);
      flex: none
    }

    .faq-i.open .faq-cv {
      transform: rotate(180deg);
      color: var(--gt)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease;
      padding: 0 15px;
      font-size: 12px;
      color: var(--mu);
      line-height: 1.95
    }

    .faq-i.open .faq-a {
      max-height: 320px;
      padding: 0 15px 15px
    }

    /* ③ نافذة عامّة بضبابية خلفية */
    .nx-modal {
      position: fixed;
      inset: 0;
      background: rgba(5, 9, 20, .75);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: var(--z-modal);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px
    }

    .nx-modal.show {
      display: flex
    }

    .nx-card {
      background: var(--card);
      border: 1.5px solid rgba(201, 168, 76, .45);
      border-radius: 18px;
      padding: 22px;
      max-width: 420px;
      width: 100%;
      position: relative;
      max-height: 86vh;
      overflow-y: auto;
      box-shadow: var(--sh)
    }

    .nx-x {
      position: absolute;
      top: 12px;
      left: 12px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--bg);
      border: 1.5px solid var(--bd);
      color: var(--mu);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      font-family: var(--fn)
    }

    .gdx-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 8px;
      margin-bottom: 18px
    }

    .gdx {
      position: relative;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 12px;
      padding: 11px 10px;
      text-align: right;
      cursor: pointer;
      font-family: var(--fn);
      display: block;
      width: 100%;
      transition: transform .15s, border-color .15s
    }

    .gdx:hover {
      transform: translateY(-2px);
      border-color: rgba(201, 168, 76, .55)
    }

    .gdx b {
      display: block;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--tx);
      line-height: 1.5;
      margin-bottom: 3px
    }

    .gdx span {
      display: block;
      font-size: 10.5px;
      color: var(--mu)
    }

    .gdx em {
      display: inline-block;
      margin-top: 5px;
      font-style: normal;
      font-size: 9px;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 20px;
      background: rgba(201, 168, 76, .14);
      color: var(--gt)
    }

    .gdx-p {
      position: absolute;
      top: 8px;
      left: 8px;
      font-style: normal;
      font-size: 9.5px;
      font-weight: 900;
      padding: 1px 6px;
      border-radius: 20px;
      background: rgba(201, 168, 76, .16);
      color: var(--gt)
    }

    .gdx.hot {
      border-color: rgba(192, 57, 43, .45)
    }

    .gdx.hot .gdx-p {
      background: rgba(192, 57, 43, .16);
      color: #c0392b
    }

    .gdx.warm {
      border-color: rgba(201, 168, 76, .4)
    }

    .rd-img img {
      width: 100%;
      height: auto;
      background: #fff;
      border-radius: 10px;
      padding: 8px;
      border: 1.5px solid var(--bd);
      cursor: zoom-in
    }

    .rd-img .svgwrap {
      background: #fff !important;
      padding: 8px;
      border: 1.5px solid var(--bd)
    }

    .rd-img .svgwrap svg {
      width: 100%;
      height: auto;
      display: block
    }

    @media(min-width:760px) {

      .rd-img img,
      .rd-img .svgwrap {
        max-width: 720px;
        margin-inline: auto
      }
    }

    .rq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 9px;
      margin-bottom: 16px
    }

    .rq {
      position: relative;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 13px;
      padding: 12px 10px 10px;
      text-align: center;
      cursor: pointer;
      font-family: var(--fn);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      min-height: 82px;
      justify-content: center;
      transition: transform .14s, border-color .14s
    }

    .rq:hover {
      transform: translateY(-2px)
    }

    .rq b {
      font-size: 12px;
      font-weight: 800;
      color: var(--tx);
      line-height: 1.55
    }

    .rq span {
      font-size: 10px;
      color: var(--mu)
    }

    .rq-n {
      position: absolute;
      top: 5px;
      inset-inline-start: 7px;
      font-style: normal;
      font-size: 10px;
      font-weight: 900;
      padding: 1px 7px;
      border-radius: 20px;
      background: rgba(201, 168, 76, .18);
      color: var(--gt)
    }

    .rq.hot {
      background: linear-gradient(135deg, #f0c419, #e8a317);
      border-color: #d4920a
    }

    .rq.hot b {
      color: #3a2800
    }

    .rq.hot span {
      color: #5a4200
    }

    .rq.hot .rq-n {
      background: rgba(0, 0, 0, .24);
      color: #fff
    }

    .rq.warm {
      border-color: rgba(201, 168, 76, .55)
    }

    .rx-gh {
      font-family: var(--fn);
      font-size: 12.5px;
      font-weight: 800;
      color: var(--tx);
      margin: 16px 0 8px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .rx-gh:first-child {
      margin-top: 4px
    }

    .rx-gh i {
      font-style: normal;
      font-size: 10px;
      font-weight: 700;
      color: var(--mu);
      background: var(--bg);
      border: 1px solid var(--bd);
      border-radius: 20px;
      padding: 1px 8px
    }

    .rq b {
      overflow-wrap: anywhere
    }

    .vp-on {
      outline: 2px solid var(--gt);
      outline-offset: 1px
    }

    .rq-content-inline {
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
      background: var(--card);
      border: 1.5px solid var(--g);
      border-radius: 13px;
      padding: 10px;
      text-align: start;
      overflow: hidden;
    }

    .rq span[dir=ltr] {
      font-size: 9.5px;
      opacity: .75;
      line-height: 1.4
    }

    .kc-rep {
      position: absolute;
      top: 3px;
      right: 5px;
      font-size: 9.5px;
      font-weight: 900;
      padding: 1px 5px;
      border-radius: 20px;
      background: rgba(0, 0, 0, .22);
      color: #fff;
      line-height: 1.5
    }

    .lk-hero {
      background: linear-gradient(135deg, #0a1628, #16305a);
      border: 1.5px solid rgba(201, 168, 76, .42);
      border-radius: 16px;
      padding: 18px;
      margin: 14px 0;
      font-family: var(--fn)
    }

    .lk-hero h3 {
      margin: 0 0 6px;
      font-size: 16px;
      color: var(--gt)
    }

    .lk-hero p {
      margin: 0;
      font-size: 12px;
      color: #cfd8ea;
      line-height: 1.9
    }

    .lk-warn {
      margin-top: 11px;
      background: rgba(192, 57, 43, .16);
      border-right: 3px solid #c0392b;
      border-radius: 0 9px 9px 0;
      padding: 9px 11px;
      font-size: 11.5px;
      color: #f0d9d6;
      line-height: 1.85
    }

    .lk-sec {
      margin: 18px 0 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--fn)
    }

    .lk-sec b {
      font-size: 14.5px;
      color: var(--tx)
    }

    .lk-sec span {
      font-size: 11px;
      color: var(--mu)
    }

    .lk-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 8px
    }

    .lk-i {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 10px;
      padding: 9px 11px;
      font-family: var(--fn);
      font-size: 12px;
      color: var(--tx)
    }

    .lk-i i {
      font-style: normal;
      font-size: 10.5px;
      color: var(--mu)
    }

    .lk-i b {
      font-size: 11px;
      font-weight: 900;
      padding: 2px 8px;
      border-radius: 7px;
      white-space: nowrap
    }

    .lk-5 b {
      background: rgba(192, 57, 43, .16);
      color: #c0392b
    }

    .lk-3 b {
      background: rgba(201, 168, 76, .20);
      color: var(--gt)
    }

    .lk-1 b {
      background: rgba(127, 140, 160, .16);
      color: var(--mu)
    }

    .lk-vg {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 7px
    }

    .lk-v {
      background: rgba(201, 168, 76, .09);
      border-radius: 9px;
      padding: 8px 11px;
      font-family: var(--fn);
      font-size: 12px;
      color: var(--tx)
    }

    .lk-v em {
      font-style: normal;
      color: var(--gt);
      font-weight: 800
    }

    .lk-pri {
      counter-reset: lkp;
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-top: 8px
    }

    .lk-p {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-right: 3px solid var(--g);
      border-radius: 0 11px 11px 0;
      padding: 11px 12px;
      font-family: var(--fn)
    }

    .lk-p::before {
      counter-increment: lkp;
      content: counter(lkp);
      background: var(--g);
      color: #0a1628;
      min-width: 22px;
      height: 22px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11.5px;
      font-weight: 900
    }

    .lk-p div {
      flex: 1
    }

    .lk-p b {
      display: block;
      font-size: 12.5px;
      color: var(--tx);
      margin-bottom: 2px
    }

    .lk-p span {
      font-size: 11.5px;
      color: var(--mu);
      line-height: 1.85
    }

    .rs-d {
      background: var(--bg2, rgba(127, 140, 160, .10));
      border: 1.5px solid var(--bd);
      border-radius: 10px;
      padding: 8px 13px;
      font-family: var(--fn);
      font-size: 12.5px;
      font-weight: 800;
      color: var(--tx);
      cursor: pointer
    }

    .rs-d.on {
      background: var(--g);
      border-color: var(--g);
      color: #0a1628
    }

    /* مفاتيح الأسئلة */
    .qk-box {
      background: var(--card);
      border: 1.5px solid rgba(201, 168, 76, .42);
      border-radius: 12px;
      padding: 13px;
      margin: -2px 0 9px;
      font-family: var(--fn)
    }

    .qk-sec {
      margin-bottom: 12px
    }

    .qk-sec>b {
      font-size: 12.5px;
      color: var(--gt);
      display: block;
      margin-bottom: 7px
    }

    .qk-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 10px;
      margin-bottom: 6px;
      background: rgba(201, 168, 76, .08);
      border-radius: 9px
    }

    .qk-q {
      font-size: 12px;
      font-weight: 800;
      color: var(--tx)
    }

    .qk-a {
      font-size: 11.5px;
      color: var(--mu);
      line-height: 1.85
    }

    .rep-tag.hot {
      background: rgba(192, 57, 43, .14);
      border-color: rgba(192, 57, 43, .45);
      color: #c0392b
    }

    .rep-tag.soft {
      background: rgba(127, 140, 160, .14);
      border-color: rgba(127, 140, 160, .4);
      color: var(--mu);
      font-weight: 800
    }

    .rep-note {
      font-family: var(--fn);
      font-size: 10.5px;
      color: var(--mu);
      line-height: 1.85;
      background: rgba(201, 168, 76, .08);
      border-right: 3px solid var(--g);
      border-radius: 0 8px 8px 0;
      padding: 7px 10px;
      margin: 8px 0
    }

    .rep-note b {
      color: var(--gt)
    }

    .rp-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-top: 10px
    }

    .rp-row {
      display: flex;
      align-items: center;
      gap: 9px;
      background: var(--card);
      box-shadow: var(--sh);
      border: 1px solid rgba(201, 168, 76, .22);
      border-radius: 11px;
      padding: 9px 11px;
      cursor: pointer;
      text-align: right;
      width: 100%;
      font-family: var(--fn)
    }

    .rp-row:active {
      transform: scale(.99)
    }

    .rp-n {
      flex-shrink: 0;
      min-width: 34px;
      height: 28px;
      border-radius: 8px;
      background: rgba(201, 168, 76, .16);
      border: 1px solid rgba(201, 168, 76, .4);
      color: var(--gt);
      font-size: 12px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .rp-t {
      flex: 1;
      font-size: 12px;
      font-weight: 800;
      color: var(--tx);
      line-height: 1.6
    }

    .rp-t {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    /* كان span سطرياً داخل العنوان فيلتصق العدد بآخر حرف: «الإعارة2 أسئلة» */
    .rp-m {
      display: block;
      font-size: 10.5px;
      color: var(--mu);
      font-weight: 600;
      margin-top: 2px;
      line-height: 1.65
    }

    /* ══ نداء الافتتاح — أسلوب مباشر ══ */
    .hook {
      margin: 20px 14px 0;
      padding: 15px;
      border-radius: 15px;
      background: linear-gradient(150deg, #0a1628, #16305a);
      border: 1.5px solid rgba(201, 168, 76, .42)
    }

    .hook h3 {
      font-family: var(--fn);
      font-size: 16px;
      font-weight: 900;
      color: var(--gt);
      margin: 0 0 7px;
      line-height: 1.6
    }

    .hook p {
      font-family: var(--fn);
      font-size: 12.5px;
      color: rgba(255, 255, 255, .8);
      margin: 0;
      line-height: 2
    }

    .hook .goal {
      margin-top: 12px;
      padding-top: 11px;
      border-top: 1px solid rgba(201, 168, 76, .25);
      font-family: var(--fn);
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      line-height: 1.9
    }

    .hook .goal b {
      color: var(--gt);
      font-size: 15px
    }

    /* ══ نقاط البيع ══ */
    .bl {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .bl li {
      font-family: var(--fn);
      font-size: 12px;
      color: var(--tx);
      line-height: 1.85;
      padding: 9px 26px 9px 0;
      position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, .07)
    }

    .bl li:last-child {
      border-bottom: none
    }

    .bl li::before {
      content: '\2713';
      position: absolute;
      right: 0;
      top: 10px;
      width: 17px;
      height: 17px;
      line-height: 17px;
      text-align: center;
      border-radius: 50%;
      background: rgba(201, 168, 76, .2);
      color: var(--gt);
      font-size: 10px;
      font-weight: 900
    }

    .bl li b {
      display: block;
      color: var(--gt);
      font-weight: 900;
      font-size: 13px;
      margin-bottom: 1px
    }

    /* ══ بطاقة القسم المحجوب — تسويق لا لافتة ══ */
    .sub-lock {
      padding: 0 !important;
      overflow: hidden;
      background: linear-gradient(160deg, #0a1628, #16305a) !important
    }

    .sl-top {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 15px 15px 0
    }

    .sl-top .sl-ic {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: rgba(201, 168, 76, .16);
      border: 1px solid rgba(201, 168, 76, .4);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .sl-top .sl-ic .ico {
      width: 23px;
      height: 23px;
      color: var(--gt)
    }

    .sl-h {
      flex: 1
    }

    .sl-h b {
      display: block;
      font-family: var(--fn);
      font-size: 15px;
      font-weight: 900;
      color: var(--gt)
    }

    .sl-h span {
      font-family: var(--fn);
      font-size: 11px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.7
    }

    .sl-body {
      padding: 13px 15px 15px
    }

    .sl-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin-bottom: 12px
    }

    .sl-st {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(201, 168, 76, .2);
      border-radius: 10px;
      padding: 8px 4px;
      text-align: center
    }

    .sl-st b {
      display: block;
      font-family: var(--fn);
      font-size: 16px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1.3
    }

    .sl-st span {
      font-family: var(--fn);
      font-size: 9px;
      color: rgba(255, 255, 255, .62);
      line-height: 1.5
    }

    .sl-weight {
      margin-bottom: 12px
    }

    .sl-weight .wl {
      display: flex;
      justify-content: space-between;
      font-family: var(--fn);
      font-size: 10.5px;
      color: rgba(255, 255, 255, .68);
      margin-bottom: 5px
    }

    .sl-bar {
      height: 7px;
      border-radius: 5px;
      background: rgba(255, 255, 255, .1);
      overflow: hidden
    }

    .sl-bar i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--g), #f0d080);
      border-radius: 5px
    }

    .sl-demo {
      background: rgba(0, 0, 0, .3);
      border: 1px solid rgba(201, 168, 76, .2);
      border-radius: 11px;
      padding: 11px 12px;
      margin-bottom: 12px
    }

    .sl-demo .dh {
      font-family: var(--fn);
      font-size: 9.5px;
      font-weight: 800;
      color: var(--gt);
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .sl-demo .dq {
      font-size: 12px;
      color: #fff;
      line-height: 1.65;
      direction: ltr;
      text-align: left;
      margin-bottom: 8px
    }

    .sl-demo .do {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .sl-demo .do i {
      font-style: normal;
      font-size: 11px;
      color: rgba(255, 255, 255, .8);
      direction: ltr;
      text-align: left;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 7px;
      padding: 6px 9px
    }

    .sl-demo .do i.ok {
      border-color: rgba(39, 174, 96, .55);
      background: rgba(39, 174, 96, .14);
      color: #8ff0b5
    }

    .sl-demo .dn {
      font-family: var(--fn);
      font-size: 10px;
      color: rgba(255, 255, 255, .5);
      margin-top: 7px;
      line-height: 1.7
    }

    .sl-feat {
      list-style: none;
      margin: 0 0 13px;
      padding: 0
    }

    .sl-feat li {
      font-family: var(--fn);
      font-size: 11.5px;
      color: rgba(255, 255, 255, .82);
      line-height: 1.95;
      padding-right: 18px;
      position: relative
    }

    .sl-feat li::before {
      content: '✓';
      position: absolute;
      right: 0;
      color: var(--gt);
      font-weight: 900
    }

    .sl-cta {
      display: flex;
      gap: 8px
    }

    .sl-cta button {
      flex: 1;
      border: none;
      border-radius: 22px;
      padding: 11px;
      font-family: var(--fn);
      font-size: 12.5px;
      font-weight: 900;
      cursor: pointer
    }

    .sl-cta .p {
      background: var(--g);
      color: #0a1628
    }

    .sl-cta .s {
      background: transparent;
      border: 1px solid var(--g);
      color: var(--gt)
    }

    .sl-cta button:active {
      transform: scale(.985)
    }

    /* ══ متكرر اليوم ══ */
    .dy {
      margin: 12px 14px 0;
      border: 1.5px solid rgba(201, 168, 76, .45);
      border-radius: 14px;
      background: linear-gradient(140deg, #0a1628, #14294a);
      overflow: hidden
    }

    .dy-h {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 13px 0
    }

    .dy-h .ic {
      font-size: 21px
    }

    .dy-h b {
      font-family: var(--fn);
      font-size: 13.5px;
      font-weight: 900;
      color: var(--gt)
    }

    .dy-h .dt {
      margin-right: auto;
      font-family: var(--fn);
      font-size: 9.5px;
      color: var(--mu)
    }

    .dy-b {
      padding: 9px 13px 13px
    }

    .dy-topic {
      display: inline-block;
      background: rgba(201, 168, 76, .18);
      border: 1px solid rgba(201, 168, 76, .4);
      color: var(--gt);
      font-family: var(--fn);
      font-size: 10px;
      font-weight: 800;
      padding: 2px 9px;
      border-radius: 9px;
      margin-bottom: 7px
    }

    .dy-q {
      font-size: 12.5px;
      color: #fff;
      line-height: 1.75;
      direction: ltr;
      text-align: left;
      background: rgba(0, 0, 0, .22);
      border-radius: 9px;
      padding: 9px 11px;
      margin-bottom: 8px
    }

    .dy-rep {
      font-family: var(--fn);
      font-size: 10.5px;
      color: var(--mu);
      line-height: 1.8;
      margin-bottom: 9px
    }

    .dy-rep b {
      color: var(--gt)
    }

    .dy-btn {
      display: block;
      width: 100%;
      background: var(--g);
      color: #0a1628;
      border: none;
      border-radius: 20px;
      padding: 9px;
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 900;
      cursor: pointer
    }

    .dy-btn:active {
      transform: scale(.985)
    }

    /* ── دليل اجتماعي داخل بطاقة العرض ── */
    .sl-proof {
      display: flex;
      gap: 6px;
      margin: 11px 0 0;
      cursor: pointer
    }

    .sl-proof span {
      flex: 1;
      text-align: center;
      font-family: var(--fn);
      font-size: 9.5px;
      color: rgba(255, 255, 255, .62);
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 9px;
      padding: 7px 3px;
      line-height: 1.6
    }

    .sl-proof b {
      display: block;
      font-size: 14px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1.25
    }

    .sl-proof:active {
      transform: scale(.99)
    }

    /* ── سؤال قبل الشراء ── */
    .sl-ask {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 9px;
      font-family: var(--fn);
      font-size: 11.5px;
      font-weight: 800;
      color: #8ff0b5;
      text-decoration: none;
      background: rgba(37, 211, 102, .1);
      border: 1px solid rgba(37, 211, 102, .34);
      border-radius: 20px;
      padding: 9px
    }

    .sl-ask .ico {
      width: 15px;
      height: 15px;
      color: #8ff0b5
    }

    .sl-ask:active {
      transform: scale(.99)
    }

    /* ══ سعر القسم داخل بطاقة العرض ══ */
    .sl-price {
      display: flex;
      gap: 8px;
      margin: 13px 0 3px
    }

    .sl-price>div {
      flex: 1;
      border-radius: 11px;
      padding: 10px 11px;
      font-family: var(--fn);
      text-align: center
    }

    .sp-one {
      background: rgba(201, 168, 76, .1);
      border: 1px solid rgba(201, 168, 76, .32)
    }

    .sp-all {
      background: rgba(201, 168, 76, .18);
      border: 1.5px solid var(--g)
    }

    .sl-price span {
      display: block;
      font-size: 10.5px;
      color: var(--mu);
      margin-bottom: 3px
    }

    .sl-price b {
      display: block;
      font-size: 19px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1.15
    }

    .sl-price b i {
      font-size: 11px;
      font-style: normal;
      font-weight: 700
    }

    .sl-price em {
      display: block;
      font-size: 9.5px;
      font-style: normal;
      color: #8ff0b5;
      font-weight: 800;
      margin-top: 2px
    }

    /* ══ نافذة الباقة ══ */
    #packMod {
      display: none;
      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      background: rgba(4, 10, 20, .72);
      align-items: center;
      justify-content: center;
      padding: 16px
    }

    #packMod.on {
      display: flex
    }

    .pkm-card {
      position: relative;
      width: 100%;
      max-width: 400px;
      max-height: calc(100dvh - 40px);
      overflow-y: auto;
      background: linear-gradient(160deg, #0f1d33, #16305a);
      border: 1.5px solid var(--g);
      border-radius: 18px;
      padding: 20px 18px;
      --gt: var(--g);
      overscroll-behavior: contain
    }

    .pkm-x {
      position: absolute;
      left: 12px;
      top: 10px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      font-size: 19px;
      cursor: pointer
    }

    .pkm-card h3 {
      font-family: var(--fn);
      font-size: 18px;
      font-weight: 900;
      color: var(--g);
      margin: 2px 0 6px;
      text-align: center
    }

    .pkm-price {
      text-align: center;
      font-family: var(--fn);
      margin-bottom: 13px
    }

    .pkm-price b {
      font-size: 34px;
      font-weight: 900;
      color: var(--g)
    }

    .pkm-price span {
      font-size: 13px;
      color: rgba(255, 255, 255, .7);
      margin-inline-start: 5px
    }

    .pkm-d {
      list-style: none;
      margin: 0 0 14px;
      padding: 0
    }

    .pkm-d li {
      font-family: var(--fn);
      font-size: 12px;
      color: rgba(255, 255, 255, .85);
      line-height: 2;
      padding-inline-start: 18px;
      position: relative
    }

    .pkm-d li::before {
      content: '✓';
      position: absolute;
      inset-inline-start: 0;
      color: var(--g);
      font-weight: 900
    }

    .pkm-lbl {
      display: block;
      font-family: var(--fn);
      font-size: 10.5px;
      font-weight: 800;
      color: rgba(255, 255, 255, .55);
      margin-bottom: 6px
    }

    .pkm-ms {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .pkm-ms span {
      font-family: var(--fn);
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      background: rgba(255, 255, 255, .09);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 16px;
      padding: 6px 13px
    }

    .pkm-mu {
      font-family: var(--fn);
      font-size: 11px;
      color: rgba(255, 255, 255, .55)
    }

    .pkm-pay {
      margin-bottom: 14px
    }

    .pkm-bundle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      background: rgba(201, 168, 76, .15);
      border: 1.5px solid var(--g);
      border-radius: 12px;
      padding: 11px 13px;
      margin-bottom: 14px
    }

    .pkm-bundle span {
      font-family: var(--fn);
      font-size: 11.5px;
      color: rgba(255, 255, 255, .85)
    }

    .pkm-bundle b {
      font-family: var(--fn);
      font-size: 16px;
      font-weight: 900;
      color: var(--g);
      white-space: nowrap
    }

    .pkm-bundle b i {
      font-size: 10px;
      font-style: normal;
      color: #8ff0b5;
      display: block;
      font-weight: 700
    }

    .pkm-os {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 15px
    }

    .pkm-o {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 9px;
      padding: 9px 11px
    }

    .pkm-o span {
      font-family: var(--fn);
      font-size: 11.5px;
      color: rgba(255, 255, 255, .8)
    }

    .pkm-o b {
      font-family: var(--fn);
      font-size: 13px;
      font-weight: 900;
      color: var(--g)
    }

    .pkm-o:active,
    .pkm-bundle:active {
      transform: scale(.99)
    }

    .pkm-go {
      width: 100%;
      min-height: 46px;
      border: none;
      border-radius: 24px;
      background: var(--g);
      color: #0a1628;
      font-family: var(--fn);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer
    }

    .md {
      cursor: pointer
    }

    /* ══ الوحدات — بيع منفصل ══ */
    .md-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 11px
    }

    .md {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--card);
      box-shadow: var(--sh);
      border: 1px solid rgba(201, 168, 76, .24);
      border-radius: 13px;
      padding: 11px 12px
    }

    .md-ic {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(201, 168, 76, .14);
      border: 1px solid rgba(201, 168, 76, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .md-ic .ico {
      width: 19px;
      height: 19px;
      color: var(--gt)
    }

    .md-b {
      flex: 1;
      min-width: 0
    }

    .md-b b {
      display: block;
      font-family: var(--fn);
      font-size: 13px;
      font-weight: 900;
      color: var(--tx)
    }

    .md-b span {
      display: block;
      font-family: var(--fn);
      font-size: 10.5px;
      color: var(--mu);
      line-height: 1.65
    }

    .md-p {
      flex-shrink: 0;
      text-align: center;
      font-family: var(--fn)
    }

    .md-p b {
      display: block;
      font-size: 16px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1.2
    }

    .md-p span {
      font-size: 9px;
      color: var(--mu)
    }

    .bundle {
      margin-top: 12px;
      border: 2px solid var(--g);
      border-radius: 15px;
      overflow: hidden;
      background: linear-gradient(150deg, #0a1628, #16305a)
    }

    .bundle-h {
      padding: 13px 14px 0;
      text-align: center
    }

    .bundle-h b {
      display: block;
      font-family: var(--fn);
      font-size: 15px;
      font-weight: 900;
      color: var(--gt)
    }

    .bundle-h span {
      font-family: var(--fn);
      font-size: 11px;
      color: rgba(255, 255, 255, .68);
      line-height: 1.8
    }

    .bundle-p {
      text-align: center;
      padding: 9px 0 2px;
      font-family: var(--fn)
    }

    .bundle-p .old {
      font-size: 13px;
      color: rgba(255, 255, 255, .45);
      text-decoration: line-through;
      margin-left: 8px
    }

    .bundle-p .now {
      font-size: 30px;
      font-weight: 900;
      color: var(--gt)
    }

    .bundle-p .cur {
      font-size: 12px;
      color: rgba(255, 255, 255, .7)
    }

    .bundle-save {
      display: block;
      text-align: center;
      font-family: var(--fn);
      font-size: 11px;
      font-weight: 900;
      color: #8ff0b5;
      margin-bottom: 10px
    }

    .bundle-b {
      margin: 0 14px 14px;
      background: var(--g);
      color: #0a1628;
      border: none;
      border-radius: 22px;
      padding: 12px;
      width: calc(100% - 28px);
      font-family: var(--fn);
      font-size: 13.5px;
      font-weight: 900;
      cursor: pointer
    }

    .bundle-b:active {
      transform: scale(.985)
    }

    /* ══ باقات الأسعار ══ */
    .pk {
      margin: 22px 14px 0
    }

    .pk-list {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 12px
    }

    .pk-c {
      position: relative;
      border: 1px solid rgba(201, 168, 76, .3);
      border-radius: 14px;
      padding: 13px 14px;
      background: var(--card);
      box-shadow: var(--sh)
    }

    .pk-c.best {
      border: 1.8px solid var(--g);
      background: linear-gradient(150deg, rgba(201, 168, 76, .15), rgba(201, 168, 76, .04));
      box-shadow: 0 3px 16px rgba(201, 168, 76, .14)
    }

    .pk-c.free {
      border-style: dashed
    }

    .pk-tag {
      position: absolute;
      top: -9px;
      right: 14px;
      background: var(--g);
      color: #0a1628;
      font-family: var(--fn);
      font-size: 9.5px;
      font-weight: 900;
      padding: 2px 9px;
      border-radius: 9px
    }

    .pk-top {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 7px
    }

    .pk-name {
      font-family: var(--fn);
      font-size: 14px;
      font-weight: 900;
      color: var(--tx)
    }

    .pk-price {
      margin-right: auto;
      font-family: var(--fn);
      font-size: 20px;
      font-weight: 900;
      color: var(--gt);
      display: flex;
      align-items: baseline;
      gap: 3px
    }

    .pk-price small {
      font-size: 10px;
      font-weight: 700;
      opacity: .75
    }

    .pk-note {
      font-family: var(--fn);
      font-size: 10.5px;
      color: var(--mu);
      margin-bottom: 8px;
      line-height: 1.75
    }

    .pk-f {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .pk-f li {
      font-family: var(--fn);
      font-size: 11px;
      color: var(--tx);
      opacity: .9;
      line-height: 1.95;
      padding-right: 17px;
      position: relative
    }

    .pk-f li::before {
      content: '✓';
      position: absolute;
      right: 0;
      color: var(--gt);
      font-weight: 900
    }

    .pk-f li.no {
      opacity: .42
    }

    .pk-f li.no::before {
      content: '—';
      color: var(--mu)
    }

    .pk-btn {
      display: block;
      width: 100%;
      margin-top: 10px;
      border: none;
      border-radius: 22px;
      padding: 10px;
      font-family: var(--fn);
      font-size: 12.5px;
      font-weight: 900;
      cursor: pointer;
      background: rgba(201, 168, 76, .15);
      color: var(--gt);
      border: 1px solid var(--g)
    }

    .pk-c.best .pk-btn {
      background: var(--g);
      color: #0a1628
    }

    .pk-btn:active {
      transform: scale(.985)
    }

    .pk-foot {
      font-family: var(--fn);
      font-size: 10px;
      color: var(--mu);
      text-align: center;
      margin-top: 11px;
      line-height: 1.9
    }

    /* ══ قسم التسويق ══ */
    .mk {
      margin: 22px 14px 0
    }

    .mk-h {
      text-align: center;
      margin-bottom: 13px
    }

    .mk-h h3 {
      font-family: var(--fn);
      font-size: 16.5px;
      font-weight: 900;
      color: var(--gt);
      margin: 0 0 4px
    }

    .mk-h p {
      font-family: var(--fn);
      font-size: 11.5px;
      color: var(--mu);
      margin: 0;
      line-height: 1.85
    }

    .mk-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px
    }

    .mk-cell {
      background: var(--card);
      box-shadow: var(--sh);
      border: 1px solid rgba(201, 168, 76, .2);
      border-radius: 12px;
      padding: 11px 8px;
      text-align: center
    }

    .mk-cell b {
      display: block;
      font-family: var(--fn);
      font-size: 20px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1.3
    }

    .mk-cell span {
      font-family: var(--fn);
      font-size: 10.5px;
      color: var(--tx);
      opacity: .82;
      line-height: 1.6
    }

    .mk-why {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .mk-row {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 12px;
      padding: 11px 12px
    }

    .mk-row .i {
      font-size: 20px;
      flex-shrink: 0;
      line-height: 1.2
    }

    .mk-row b {
      display: block;
      font-family: var(--fn);
      font-size: 12.5px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 2px
    }

    .mk-row span {
      font-family: var(--fn);
      font-size: 11px;
      color: var(--mu);
      line-height: 1.8
    }

    .mk-steps {
      display: flex;
      gap: 7px;
      margin-top: 12px
    }

    .mk-step {
      flex: 1;
      text-align: center;
      background: var(--card);
      box-shadow: var(--sh);
      border: 1px solid rgba(201, 168, 76, .22);
      border-radius: 12px;
      padding: 11px 5px
    }

    .mk-step i {
      display: block;
      width: 23px;
      height: 23px;
      line-height: 23px;
      margin: 0 auto 5px;
      border-radius: 50%;
      background: var(--g);
      color: #0a1628;
      font-family: var(--fn);
      font-size: 11px;
      font-weight: 900;
      font-style: normal
    }

    .mk-step b {
      display: block;
      font-family: var(--fn);
      font-size: 11.5px;
      font-weight: 900;
      color: var(--tx)
    }

    .mk-step span {
      font-family: var(--fn);
      font-size: 9.5px;
      color: var(--mu);
      line-height: 1.6
    }

    .mk-faq {
      margin-top: 12px
    }

    .mk-q {
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 11px;
      margin-bottom: 7px;
      overflow: hidden
    }

    .mk-q>summary {
      list-style: none;
      cursor: pointer;
      padding: 11px 12px;
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      background: rgba(255, 255, 255, .03)
    }

    .mk-q>summary::-webkit-details-marker {
      display: none
    }

    .mk-q>summary::after {
      content: '+';
      float: left;
      color: var(--gt);
      font-weight: 900
    }

    .mk-q[open]>summary::after {
      content: '−'
    }

    .mk-q p {
      margin: 0;
      padding: 0 12px 11px;
      font-family: var(--fn);
      font-size: 11px;
      color: var(--mu);
      line-height: 1.9
    }

    @media(min-width:640px) {
      .mk-grid {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    @media (max-width:640px) {

      .vgrid,
      .gopts {
        grid-template-columns: 1fr
      }

      .mk-step b {
        font-size: 10.5px
      }

      .mk-step span {
        font-size: 9px
      }

      .rs-stat {
        min-width: 60px
      }

      .rs-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .rs-card .rs-n {
        font-size: 20px
      }

      .rs-card.rs-top .rs-n {
        font-size: 22px
      }
    }

    @media (max-width:480px) {
      .rs-grid {
        grid-template-columns: 1fr
      }

      .rs-stat {
        flex: 1 1 32%
      }

      .sl-stats {
        grid-template-columns: repeat(2, 1fr)
      }

      .sl-cta {
        flex-direction: column
      }

      .ct-btn {
        font-size: 12px;
        padding: 11px 6px
      }

      .fab {
        padding: 9px 12px
      }
    }

    /* ══ زر التواصل العائم ══
   يظهر بعد أن يتصفّح الزائر قليلاً — لا في الثانية الأولى.
   ينبض نبضتين كل بضع ثوانٍ ليلفت العين بلا إزعاج، ويتوقف
   النبض لمن فعّل «تقليل الحركة» في نظامه. */
    #fabWrap {
      position: fixed;
      left: 14px;
      bottom: 86px;
      z-index: calc(var(--z-float) + 400);
      display: none;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px
    }

    #fabWrap.on {
      display: flex;
      animation: fabIn .35s ease
    }

    @keyframes fabIn {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .fab {
      display: flex;
      align-items: center;
      gap: 8px;
      border: none;
      border-radius: 26px;
      padding: 11px 16px;
      font-family: var(--fn);
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
      text-decoration: none;
      white-space: nowrap
    }

    .fab .ico {
      width: 18px;
      height: 18px
    }

    .fab.wa {
      background: #25d366;
      color: #06331d
    }

    .fab.tg {
      background: #29a9eb;
      color: #04283d
    }

    .fab.main {
      background: var(--g);
      color: #0a1628;
      animation: fabPulse 5s ease-in-out infinite
    }

    .fab.main.wa-direct {
      background: #25d366;
      color: #06331d
    }

    @keyframes fabPulse {

      0%,
      86%,
      100% {
        transform: scale(1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, .28)
      }

      90% {
        transform: scale(1.07);
        box-shadow: 0 8px 26px rgba(201, 168, 76, .5)
      }

      94% {
        transform: scale(1)
      }
    }

    .fab:active {
      transform: scale(.96)
    }

    #fabMenu {
      display: none;
      flex-direction: column;
      gap: 8px
    }

    #fabMenu.on {
      display: flex
    }

    .fab-x {
      position: absolute;
      top: -7px;
      left: -7px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--n);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .3);
      font-size: 11px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    @media(prefers-reduced-motion:reduce) {
      .fab.main {
        animation: none
      }

      #fabWrap.on {
        animation: none
      }
    }

    /* ── أزرار التواصل ── */
    #ctBox {
      display: none;
      gap: 9px;
      margin: 12px 14px 0
    }

    #ctBox.on {
      display: flex
    }

    .ct-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 12px 8px;
      border-radius: 13px;
      font-family: var(--fn);
      font-size: 13px;
      font-weight: 900;
      text-decoration: none;
      border: 1.5px solid transparent
    }

    .ct-btn.wa {
      background: linear-gradient(135deg, #0d3b2a, #12603f);
      border-color: #25d366;
      color: #7dffb4
    }

    .ct-btn.tg {
      background: linear-gradient(135deg, #0c2c44, #12506f);
      border-color: #29a9eb;
      color: #8fd8ff
    }

    .ct-btn:active {
      transform: scale(.985)
    }

    .ct-btn .ci {
      font-size: 17px
    }

    /* ── شريط الصور المتحرك ── */
    .rs-strip {
      margin-top: 14px;
      overflow: hidden;
      position: relative;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
    }

    .rs-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: rsSlide 90s linear infinite
    }

    .rs-shot {
      flex: 0 0 auto;
      margin-inline-end: 10px;
      height: 132px;
      border-radius: 10px;
      border: 1px solid rgba(201, 168, 76, .3);
      display: block;
      background: #0f2038
    }

    /* كانت تُزاح إلى اليسار (-50%) — والصفحة عربيّة يبدأ فيها الشريط من
       اليمين، فتخرج الصور من الإطار بعد ثوانٍ ويبقى فراغٌ أبيض معظم
       الدورة، ثمّ تُطفأ الشفافيّة ١١ ثانية لتُخفي القفزة. المالك: «تجارب
       الطلاب المفروض تمر باستمرار ليش تختفي». الصحيح في RTL: +50%، والنصف
       الثاني نسخةٌ من الأوّل فلا قفزة ولا إطفاء. */
    @keyframes rsSlide {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(50%)
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .rs-track {
        animation: none;
        overflow-x: auto
      }
    }

    /* ── زر التجارب البارز ── */
    .rs-cta {
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 12px 14px 0;
      padding: 13px 15px;
      background: linear-gradient(150deg, #0a1628, #1a3a6b);
      border: 1.5px solid var(--g);
      border-radius: 14px;
      cursor: pointer;
      width: calc(100% - 28px);
      text-align: right;
      font-family: var(--fn);
      box-shadow: 0 3px 14px rgba(201, 168, 76, .13)
    }

    .rs-cta:active {
      transform: scale(.985)
    }

    .rs-cta .ic {
      font-size: 27px;
      flex-shrink: 0
    }

    .rs-cta .t1 {
      display: block;
      font-size: 14px;
      font-weight: 900;
      color: var(--gt)
    }

    .rs-cta .t2 {
      display: block;
      font-size: 11px;
      color: rgba(255, 255, 255, .62);
      margin-top: 2px
    }

    .rs-cta .ar {
      margin-right: auto;
      color: var(--gt);
      font-size: 19px;
      flex-shrink: 0
    }

    /* ══ نتائج الطلاب — شبكة درجات حقيقية ══ */
    .rs-wrap {
      margin: 26px 0 8px
    }

    .rs-head {
      text-align: center;
      margin-bottom: 14px
    }

    .rs-head h3 {
      font-family: var(--fn);
      font-size: 16px;
      font-weight: 900;
      color: var(--gt);
      margin: 0 0 4px
    }

    .rs-head p {
      font-family: var(--fn);
      font-size: 11.5px;
      color: var(--mu);
      margin: 0;
      line-height: 1.8
    }

    .rs-stats {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 12px 0 14px
    }

    .rs-stat {
      background: rgba(201, 168, 76, .09);
      border: 1px solid rgba(201, 168, 76, .28);
      border-radius: 10px;
      padding: 7px 12px;
      text-align: center;
      min-width: 74px
    }

    .rs-stat b {
      display: block;
      font-family: var(--fn);
      font-size: 17px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1.3
    }

    .rs-stat span {
      font-family: var(--fn);
      font-size: 9.5px;
      color: var(--mu)
    }

    .rs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px
    }

    .rs-card {
      background: var(--card);
      box-shadow: var(--sh);
      border: 1px solid rgba(201, 168, 76, .22);
      border-radius: 11px;
      padding: 10px 6px;
      text-align: center
    }

    .rs-n {
      display: block;
      font-family: var(--fn);
      font-size: 23px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1.2
    }

    .rs-meta {
      display: block;
      margin-top: 3px
    }

    .rs-g {
      display: block;
      font-family: var(--fn);
      font-size: 10px;
      color: var(--tx);
      opacity: .85
    }

    .rs-d {
      display: block;
      font-family: var(--fn);
      font-size: 9px;
      color: var(--mu);
      direction: ltr
    }

    .rs-card.rs-top {
      border-color: rgba(201, 168, 76, .6);
      background: linear-gradient(150deg, rgba(201, 168, 76, .16), rgba(201, 168, 76, .05))
    }

    .rs-card.rs-top .rs-n {
      font-size: 26px
    }

    .rs-more {
      display: none
    }

    .rs-grid.open .rs-more {
      display: block
    }

    .rs-btn {
      display: block;
      width: 100%;
      margin-top: 11px;
      background: transparent;
      border: 1px solid var(--g);
      color: var(--gt);
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 800;
      border-radius: 20px;
      padding: 9px;
      cursor: pointer
    }

    .rs-btn:active {
      background: rgba(201, 168, 76, .12)
    }

    .rs-cap {
      font-family: var(--fn);
      font-size: 10px;
      color: var(--mu);
      text-align: center;
      margin-top: 6px;
      line-height: 1.8
    }

    @media(min-width:640px) {
      .rs-grid {
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr))
      }

      .rs-n {
        font-size: 26px
      }
    }

    .sub-lock {
      background: linear-gradient(150deg, #0a1628, #1a3a6b);
      border: 1.5px solid var(--g);
      border-radius: 14px;
      padding: 16px;
      margin: 12px 13px;
      text-align: center;
      font-family: var(--fn)
    }

    .sub-lock h4 {
      font-size: 14.5px;
      font-weight: 900;
      color: #c9a84c;
      margin-bottom: 6px
    }

    .sub-lock p {
      font-size: 12px;
      color: rgba(255, 255, 255, .72);
      line-height: 1.8;
      margin-bottom: 11px
    }

    .sub-lock button {
      background: #c9a84c;
      color: #0a1628;
      border: none;
      border-radius: 20px;
      padding: 9px 20px;
      font-size: 12.5px;
      font-weight: 900;
      font-family: var(--fn);
      cursor: pointer
    }

    /* شاشة الإقلاع */
    #boot {
      position: fixed;
      inset: 0;
      z-index: var(--z-critical);
      background: #0a0f1e;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      transition: opacity .28s ease
    }

    #boot.off {
      opacity: 0;
      pointer-events: none
    }

    #boot .bt-logo {
      font-family: var(--fn);
      font-size: 19px;
      font-weight: 900;
      color: #c9a84c;
      letter-spacing: .5px
    }

    #boot .bt-sp {
      width: 30px;
      height: 30px;
      border: 3px solid rgba(201, 168, 76, .22);
      border-top-color: #c9a84c;
      border-radius: 50%;
      animation: btspin .8s linear infinite
    }

    @keyframes btspin {
      to {
        transform: rotate(360deg)
      }
    }

    .page {
      display: none;
      animation: fadeUp .2s ease;
    }

    .page.on {
      display: block;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(5px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* HOME */
    .hero {
      background: linear-gradient(155deg, var(--n), var(--n3));
      padding: 24px 18px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .hero::after {
      content: '';
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(201, 168, 76, .1), transparent 70%);
      top: -70px;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .hero-badge {
      display: inline-block;
      background: rgba(201, 168, 76, .15);
      border: 1px solid rgba(201, 168, 76, .3);
      color: var(--g2);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 16px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .hero h2 {
      font-size: 52px;
      font-weight: 900;
      color: var(--gt);
      line-height: 1;
      margin-bottom: 5px;
    }

    .hero p {
      font-size: 12px;
      color: rgba(255, 255, 255, .5);
      line-height: 1.6;
    }

    .sgrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 12px 14px 0;
    }

    .sbox {
      background: var(--card);
      border-radius: 12px;
      border: 1.5px solid var(--bd);
      padding: 10px 6px;
      text-align: center;
      box-shadow: var(--sh);
    }

    .sv {
      font-size: 20px;
      font-weight: 900;
      color: var(--gt);
    }

    .sl {
      font-size: 10px;
      color: var(--mu);
      font-weight: 600;
      margin-top: 2px;
    }

    .subj-grid {
      /* تتمدّد بعدد الأعمدة لا بعرض البطاقة: عمودان ثابتان
         يتركان الشاشة العريضة فارغة من جانبيها أو يمدّان البطاقة حتّى
         تصير شريطاً. وauto-fill يملأ ما اتّسع وينزل ما ضاق. */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 10px;
      padding: 10px 14px;
    }

    .subj {
      background: var(--card);
      border-radius: 16px;
      border: 1.5px solid var(--bd);
      padding: 14px 13px;
      cursor: pointer;
      box-shadow: var(--sh);
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: transform .15s;
      position: relative;
      overflow: hidden;
    }

    .subj:active {
      transform: scale(.97);
    }

    .subj::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 50px;
      border-radius: 0 16px 0 50px;
      opacity: .07;
    }

    .c1::after {
      background: #2980b9;
    }

    .c2::after {
      background: #27ae60;
    }

    .c3::after {
      background: #b03a2e;
    }

    .c4::after {
      background: #c9a84c;
    }

    .c5::after {
      background: #8e44ad;
    }

    .c6::after {
      background: #c9a84c;
    }

    .subj.c6 {
      border: 2px solid var(--g);
      box-shadow: 0 3px 16px rgba(201, 168, 76, .25);
    }

    .subj-ic {
      font-size: 26px;
    }

    .subj h3 {
      font-size: 13px;
      font-weight: 900;
    }

    .subj p {
      font-size: 11px;
      color: var(--mu);
      line-height: 1.4;
    }

    .sbadge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 9px;
      background: var(--n);
      color: var(--g);
      align-self: flex-start;
    }

    .inst-card {
      margin: 10px 14px 0;
      background: var(--card);
      border-radius: 14px;
      border: 1.5px solid var(--bd);
      overflow: hidden;
      box-shadow: var(--sh);
    }

    .inst-head {
      background: linear-gradient(135deg, #0b1e36, #1b4f72);
      padding: 11px 15px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .inst-head h3 {
      font-size: 13px;
      font-weight: 900;
      color: #c9a84c;
      font-family: var(--fn);
    }

    .inst-head p {
      font-size: 10px;
      color: rgba(255, 255, 255, .6);
      margin-top: 1px;
      font-family: var(--fn);
    }

    .inst-body {
      padding: 11px 14px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .inst-row {
      background: var(--bg);
      border-radius: 10px;
      border: 1.5px solid var(--bd);
      padding: 9px 10px;
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .inst-row .ico {
      font-size: 20px;
      flex-shrink: 0;
    }

    .inst-row strong {
      font-size: 12px;
      font-weight: 900;
      display: block;
      margin-bottom: 2px;
    }

    .inst-row p {
      font-size: 11px;
      color: var(--mu);
      line-height: 1.5;
    }

    .hot {
      padding: 10px 14px 14px;
    }

    .hot-t {
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .hot-t::after {
      content: '';
      flex: 1;
      height: 1.5px;
      background: linear-gradient(90deg, var(--g), transparent);
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .chip {
      padding: 4px 11px;
      border-radius: 14px;
      font-size: 11px;
      font-weight: 700;
    }

    .cB {
      background: #ddeeff;
      color: #0b2a5c;
    }

    .cG {
      background: #dff5e8;
      color: #0c5230;
    }

    .cR {
      background: #fde8e6;
      color: #6e1a14;
    }

    .cO {
      background: #fef3d9;
      color: #7d4200;
    }

    .cP {
      background: #f0e6fc;
      color: #4a1580;
    }

    [data-dark] .cB {
      background: #0b2d50;
      color: #7fbfff;
    }

    [data-dark] .cG {
      background: #0e3320;
      color: #6edd9f;
    }

    [data-dark] .cR {
      background: #2d0e0a;
      color: #f08080;
    }

    [data-dark] .cO {
      background: #2a1f00;
      color: #f0c060;
    }

    [data-dark] .cP {
      background: #1e0a35;
      color: #c090f0;
    }

    /* SUBTABS */
    .subtabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 9px 10px;
      background: var(--n2);
      position: sticky;
      top: var(--topbar-h);
      z-index: var(--z-sticky);
      overflow: visible;
      justify-content: center
    }

    .subtabs::-webkit-scrollbar {
      display: none;
    }

    .stab {
      flex: 0 1 auto;
      padding: 8px 11px;
      border: none;
      background: none;
      cursor: pointer;
      font-family: var(--fn);
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .58);
      white-space: normal;
      line-height: 1.35;
      text-align: center;
      border-bottom: 2px solid transparent;
      border-radius: 8px;
      transition: .15s
    }

    .stab.on {
      color: var(--g2);
      background: rgba(201, 168, 76, .16);
      border-bottom-color: var(--gt)
    }

    /* بطاقات «الأكثر تكراراً» — تتوسّع في مكانها.
   بلا max-height ولا transition: النسخة الأولى من هذا النقل بنتهما،
   فكان القسم يبقى بارتفاع بكسل واحد رغم أن المحتوى محمَّل والصنف
   موضوع — وتبيّن أن toggleRepeatedPassage (النمط المجرَّب في الإنتاج)
   لا يستعمل max-height أصلاً بل يُظهر العنصر ويخفيه. اتُّبع هنا. */
    .rb-card-content {
      border-top: 1px solid var(--bd);
      padding: 12px 14px 14px
    }

    .rb-arrow {
      display: inline-block;
      color: var(--mu);
      font-size: 13px;
      transition: transform .2s ease
    }

    .rb-arrow.open {
      transform: rotate(180deg)
    }

    /* شريط الخطط — يعلو بطاقات الوحدات ولا يحلّ محلّها */
    .pl-strip {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 9px;
      margin-bottom: 14px
    }

    .pl-card {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 14px;
      padding: 13px 11px;
      cursor: pointer;
      font-family: var(--fn);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      transition: border-color .15s, transform .12s
    }

    .pl-card:hover {
      border-color: var(--g);
      transform: translateY(-2px)
    }

    .pl-n {
      font-size: 13.5px;
      color: var(--tx)
    }

    .pl-t {
      font-size: 10.5px;
      color: var(--mu);
      line-height: 1.5
    }

    .pl-p {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-top: 5px
    }

    .pl-p b {
      font-size: 21px;
      color: var(--gt)
    }

    .pl-p span {
      font-size: 10px;
      color: var(--mu)
    }

    .pl-old {
      font-size: 11.5px;
      color: var(--mu);
      text-decoration: line-through;
      font-style: normal
    }

    .pl-s {
      font-size: 10px;
      color: var(--gr2, #3fae6a);
      font-weight: 800
    }

    .pl-d {
      font-size: 10px;
      color: var(--mu)
    }

    /* دعوة بديلة عن السعر — حين يُخفى الرقم بقرارٍ من اللوحة */
    .pl-cta {
      background: var(--card);
      border: 1.5px solid var(--g);
      border-radius: 15px;
      padding: 16px 14px;
      margin-bottom: 14px;
      text-align: center;
      font-family: var(--fn);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px
    }

    .pl-cta b {
      font-size: 14.5px;
      color: var(--gt)
    }

    .pl-cta span {
      font-size: 11.5px;
      color: var(--mu);
      line-height: 1.6
    }

    .sl-invite {
      background: rgba(240, 196, 25, .10);
      border: 1px solid rgba(240, 196, 25, .30);
      border-radius: 11px;
      padding: 10px 12px;
      margin: 10px 0;
      font-family: var(--fn);
      font-size: 12px;
      color: var(--gt);
      text-align: center
    }

    .pl-cta-b {
      margin-top: 5px;
      background: var(--n);
      color: var(--g);
      border: none;
      border-radius: 10px;
      padding: 10px 20px;
      font-size: 12.5px;
      font-weight: 900;
      font-family: var(--fn);
      cursor: pointer;
      text-decoration: none;
      display: inline-block
    }

    /* مبدّل المجموعات — rx-pager · gd-pager · ld-pager.
   كان الصنف مستعملاً في ثلاثة مواضع بلا قاعدة واحدة تخصّه، فتظهر
   أزراره بتنسيق المتصفّح الافتراضي: ١١×١٩ بكسل، حدّ outset، خطّ Arial،
   ملتصقة بلا فراغ — نشازٌ ظاهر وسط واجهة منسّقة، وهدفٌ أصغر من أن
   يُصاب باللمس. */
    .pager {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin: 0 0 12px
    }

    .pager .lbl {
      font-family: var(--fn);
      font-size: 11.5px;
      font-weight: 700;
      color: var(--mu)
    }

    .pager button {
      min-width: 34px;
      height: 34px;
      padding: 0 9px;
      border: 1px solid var(--bd);
      border-radius: 9px;
      background: var(--card);
      color: var(--mu);
      font-family: var(--fn);
      font-size: 12.5px;
      font-weight: 800;
      cursor: pointer;
      transition: .15s
    }

    .pager button:hover {
      border-color: var(--gt);
      color: var(--gt)
    }

    .pager button.active {
      background: var(--gt);
      border-color: var(--gt);
      color: #1a1408
    }

    .ssec {
      display: none;
      padding: 13px 13px 8px;
      ;
      contain: layout style
    }

    .ssec.on {
      display: block;
    }

    /* CARD */
    .card {
      background: var(--card);
      border-radius: var(--r);
      box-shadow: var(--sh);
      border: 1.5px solid var(--bd);
      margin-bottom: 14px;
      overflow: hidden;
    }

    .card-head {
      padding: 12px 15px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .card-head h3 {
      font-size: 14px;
      font-weight: 900;
      color: #fff;
    }

    .card-head p {
      font-size: 11px;
      color: rgba(255, 255, 255, .6);
      margin-top: 1px;
    }

    .card-ico {
      font-size: 22px;
    }

    .card-body {
      padding: 13px 14px;
    }

    .ch-navy {
      background: linear-gradient(135deg, #0b1e36, #1b4f72);
    }

    .ch-gold {
      background: linear-gradient(135deg, #7e4100, #c9a84c);
    }

    .ch-red {
      background: linear-gradient(135deg, #6e1a14, #b03a2e);
    }

    .ch-teal {
      background: linear-gradient(135deg, #0a4f3f, #17a589);
    }

    .ch-green {
      background: linear-gradient(135deg, #0c5230, #1a7a44);
    }

    .ch-purple {
      background: linear-gradient(135deg, #3a1050, #6c3483);
    }

    .sec-title {
      font-size: 15px;
      font-weight: 900;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sec-title::after {
      content: '';
      flex: 1;
      height: 2px;
      background: linear-gradient(90deg, var(--g), transparent);
      border-radius: 2px;
    }

    /* TABLES */
    .li-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      margin: 8px 0;
    }

    .li-table th {
      background: var(--n);
      color: var(--g);
      padding: 7px 10px;
      text-align: right;
      font-size: 11px;
    }

    .li-table td {
      padding: 7px 10px;
      border-bottom: 1px solid var(--bd);
    }

    .li-table td.ltr {
      direction: ltr;
      font-weight: 700;
    }

    .li-table tr:nth-child(even) td {
      background: var(--bg);
    }

    /* TIP BOXES */
    .tip-box {
      border-radius: 9px;
      padding: 10px 13px;
      font-size: 12.5px;
      line-height: 1.7;
      margin: 7px 0;
    }

    .tip-box.success {
      background: #eafaf1;
      border-right: 4px solid #27ae60;
      color: #0b4a24;
    }

    .tip-box.warning {
      background: #fef9e7;
      border-right: 4px solid var(--g);
      color: #7d5a0c;
    }

    .tip-box.info {
      background: var(--bl);
      border-right: 4px solid var(--bl2);
      color: var(--bl2);
    }

    [data-dark] .tip-box.success {
      background: #071d10;
      color: #80f0a0;
    }

    [data-dark] .tip-box.warning {
      background: #2a1f00;
      color: #f0c060;
    }

    [data-dark] .tip-box.info {
      background: #07162a;
      color: #80c0ff;
    }

    /* Q CARDS */
    .qc {
      background: var(--bg);
      border-radius: 11px;
      border: 1.5px solid var(--bd);
      margin-bottom: 10px;
      overflow: hidden;
      content-visibility: auto;
      contain-intrinsic-size: auto 200px
    }

    .qt {
      background: var(--bl);
      border-right: 4px solid var(--bl2);
      padding: 6px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .qn {
      font-size: 11px;
      font-weight: 900;
      color: var(--bl2);
    }

    .qtag {
      background: var(--bl2);
      color: #fff;
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 9px;
      font-weight: 700;
    }

    .qbody {
      padding: 11px 12px;
    }

    .qstem {
      font-size: 13px;
      color: var(--tx);
      margin-bottom: 9px;
      line-height: 1.6;
    }

    .ob {
      width: 100%;
      padding: 10px 12px;
      border-radius: 9px;
      border: 1.5px solid var(--bd);
      background: var(--card);
      font-size: 12.5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      direction: ltr;
      text-align: left;
      line-height: 1.4;
      word-break: normal;
      overflow-wrap: break-word;
      white-space: normal;
    }

    .obt {
      flex: 1;
      min-width: 0;
      overflow-wrap: break-word;
    }

    .opts {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 7px;
    }

    .ob {
      width: 100%;
      padding: 9px 12px;
      border-radius: 9px;
      border: 1.5px solid var(--bd);
      background: var(--card);
      font-size: 12.5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      direction: ltr;
      text-align: left;
      font-family: var(--fn);
      color: var(--tx);
      transition: border-color .15s;
      ;
      word-break: break-word;
      overflow-wrap: anywhere;
      line-height: 1.4
    }

    .ob .ol {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--bd);
      font-size: 10px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ob.ok {
      border-color: var(--gr2);
      background: var(--gr);
    }

    .ob.ok .ol {
      background: var(--gr2);
      color: #fff;
    }

    .ob.no {
      border-color: var(--rd2);
      background: var(--rd);
      opacity: .65;
    }

    .ansbox {
      background: var(--gr);
      border: 1.5px solid var(--gr2);
      border-radius: 9px;
      padding: 10px 13px;
      font-size: 12.5px;
      color: #0b4a24;
      line-height: 1.7;
      direction: rtl;
      display: none;
    }

    .ansbox.show {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .anic {
      font-size: 15px;
      flex-shrink: 0;
    }

    [data-dark] .ansbox {
      color: #80f0a0;
    }

    /* GRAMMAR */
    .rule-block {
      background: var(--card);
      border-radius: var(--r);
      box-shadow: var(--sh);
      border: 1.5px solid var(--bd);
      margin-bottom: 18px;
      overflow: hidden;
      content-visibility: auto;
      contain-intrinsic-size: auto 200px
    }

    .rule-head {
      background: linear-gradient(135deg, var(--n), var(--n3));
      padding: 13px 15px;
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .ricon {
      font-size: 22px;
    }

    .rule-head h3 {
      font-size: 14px;
      font-weight: 900;
      color: var(--gt);
    }

    .rule-explain {
      padding: 12px 14px;
    }

    .rule-explain p {
      font-size: 13px;
      color: var(--tx);
      line-height: 1.7;
      margin-bottom: 10px;
    }

    .rule-explain p strong {
      color: var(--n);
    }

    [data-dark] .rule-explain p strong {
      color: var(--g2);
    }

    .rule-table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px 0;
      font-size: 12px;
      border-radius: 9px;
      overflow: hidden;
    }

    .rt-row {
      display: grid;
      gap: 1px;
      margin-bottom: 1px;
    }

    .rt-row.header {
      background: var(--n);
      color: var(--g);
      font-weight: 900;
    }

    .rt-row:not(.header) {
      background: var(--bg);
    }

    .rt-row:not(.header):nth-child(even) {
      background: var(--card);
    }

    .rt-row span {
      padding: 7px 10px;
      font-size: 11.5px;
    }

    .rule-qs {
      padding: 10px 13px 13px;
    }

    .gqc {
      background: var(--bg);
      border-radius: 11px;
      border: 1.5px solid var(--bd);
      padding: 10px 12px;
      margin-bottom: 10px;
      content-visibility: auto;
      contain-intrinsic-size: auto 200px
    }

    .grule {
      background: var(--n);
      color: var(--g);
      font-size: 10px;
      font-weight: 900;
      padding: 2px 10px;
      border-radius: 8px;
      display: inline-block;
      margin-bottom: 7px;
      direction: ltr;
    }

    .gstem {
      font-size: 13px;
      font-weight: 700;
      color: var(--tx);
      margin-bottom: 9px;
      line-height: 1.6;
    }

    .gopts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
    }

    .gb {
      padding: 8px 9px;
      border-radius: 8px;
      border: 1.5px solid var(--bd);
      background: var(--card);
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      direction: ltr;
      font-family: var(--fn);
      color: var(--tx);
    }

    .gb .gl {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--bd);
      font-size: 9px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gb.ok {
      border-color: var(--gr2);
      background: var(--gr);
      color: #0b4a24;
      font-weight: 700;
    }

    .gb.ok .gl {
      background: var(--gr2);
      color: #fff;
    }

    .gb.no {
      border-color: var(--rd2);
      background: var(--rd);
      opacity: .6;
    }

    .gans {
      background: #fef9e7;
      border: 1px solid var(--g);
      border-radius: 8px;
      padding: 9px 12px;
      margin-top: 8px;
      font-size: 12px;
      color: #7d5a0c;
      line-height: 1.7;
      direction: rtl;
      display: none;
    }

    .gans.show {
      display: block;
    }

    [data-dark] .gans {
      background: #2a1f00;
      color: #f0c060;
    }

    /* READING */
    .pcard {
      background: var(--card);
      border-radius: var(--r);
      box-shadow: var(--sh);
      border: 1.5px solid var(--bd);
      margin-bottom: 18px;
      overflow: hidden;
      content-visibility: auto;
      contain-intrinsic-size: auto 500px
    }

    .phead {
      background: linear-gradient(135deg, var(--n), #1b4f72);
      padding: 12px 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pnum {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--g);
      color: var(--n);
      font-size: 12px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .phead h3 {
      font-size: 13px;
      font-weight: 900;
      color: var(--gt);
    }

    .phead p {
      font-size: 11px;
      color: rgba(255, 255, 255, .6);
      margin-top: 1px;
    }

    .ptag {
      background: rgba(201, 168, 76, .2);
      color: var(--g2);
      padding: 1px 7px;
      border-radius: 7px;
      font-size: 10px;
    }

    .pbody {
      background: var(--bl);
      border-right: 4px solid var(--g);
      padding: 13px 15px;
    }

    .pbody p {
      font-size: 13px;
      line-height: 2;
      color: var(--tx);
      margin-bottom: 8px;
      font-style: italic;
    }

    .pbody p:last-child {
      margin-bottom: 0;
    }

    .pqs {
      padding: 11px 12px;
    }

    .pqs .qc {
      box-shadow: none;
    }

    /* VOCAB */
    .vgrid {
      /* تتمدّد بعدد الأعمدة لا بعرض البطاقة: عمودان ثابتان
         يتركان الشاشة العريضة فارغة من جانبيها أو يمدّان البطاقة حتّى
         تصير شريطاً. وauto-fill يملأ ما اتّسع وينزل ما ضاق. */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 8px;
      padding: 12px 13px 6px;
    }

    .vp {
      background: var(--bg);
      border: 1.5px solid var(--bd);
      border-radius: 10px;
      padding: 8px 9px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .vw1 {
      background: #ddeeff;
      color: #0b2a5c;
      padding: 6px 8px;
      border-radius: 7px;
      font-weight: 700;
      font-size: 12px;
      width: 100%;
      text-align: center;
      direction: ltr;
    }

    [data-dark] .vw1 {
      background: #0b2d50;
      color: #80c0ff;
    }

    .vw2 {
      background: #fef9e7;
      color: #7d5a0c;
      padding: 6px 8px;
      border-radius: 7px;
      font-weight: 700;
      font-size: 12px;
      width: 100%;
      text-align: center;
    }

    [data-dark] .vw2 {
      background: #2a1f00;
      color: #f0c060;
    }

    .vqs-sec {
      padding: 0 0 10px;
    }

    .vqs-title {
      font-size: 14px;
      font-weight: 900;
      padding: 10px 0 12px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .vqs-title::after {
      content: '';
      flex: 1;
      height: 2px;
      background: linear-gradient(90deg, var(--g), transparent);
    }

    /* CHARTS */
    .chart-block {
      background: var(--card);
      border-radius: var(--r);
      box-shadow: var(--sh);
      border: 1.5px solid var(--bd);
      margin-bottom: 18px;
      overflow: hidden;
    }

    .chart-head {
      background: linear-gradient(135deg, var(--n), var(--n3));
      padding: 12px 15px;
    }

    .chart-head h3 {
      font-size: 13px;
      font-weight: 900;
      color: var(--gt);
    }

    .chart-head p {
      font-size: 11px;
      color: rgba(255, 255, 255, .55);
      margin-top: 2px;
    }

    .bar-ch,
    .pie-ch {
      padding: 13px 14px;
    }

    .bar-r {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .blbl {
      font-size: 11.5px;
      font-weight: 700;
      width: 100px;
      flex-shrink: 0;
    }

    .btr {
      flex: 1;
      background: var(--bd);
      border-radius: 5px;
      height: 22px;
      overflow: hidden;
    }

    .bfill {
      height: 100%;
      border-radius: 5px;
      min-width: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 6px;
    }

    .bfill span {
      font-size: 10px;
      font-weight: 900;
      color: #fff;
      white-space: nowrap;
    }

    .pie-r {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 9px;
    }

    .pdot {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .plbl {
      font-size: 12px;
      font-weight: 700;
      flex: 1;
    }

    .ptr {
      width: 80px;
      background: var(--bd);
      border-radius: 5px;
      height: 13px;
      flex-shrink: 0;
    }

    .pfill {
      height: 100%;
      border-radius: 5px;
    }

    .ppct {
      font-size: 12px;
      font-weight: 900;
      color: var(--gt);
      width: 32px;
      text-align: right;
    }

    .chart-qs {
      padding: 10px 13px 12px;
    }

    .chart-qs .qc {
      box-shadow: none;
    }

    /* TIPS */
    .tips-card {
      background: var(--card);
      border-radius: var(--r);
      box-shadow: var(--sh);
      border: 1.5px solid var(--bd);
      margin-bottom: 14px;
      overflow: hidden;
    }

    .tips-head {
      padding: 12px 15px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .tips-head span {
      font-size: 22px;
    }

    .tips-head h3 {
      font-size: 14px;
      font-weight: 900;
      color: #fff;
    }

    .tips-card.navy .tips-head {
      background: linear-gradient(135deg, #0b1e36, #1b4f72);
    }

    .tips-card.red .tips-head {
      background: linear-gradient(135deg, #6e1a14, #b03a2e);
    }

    .tips-card.teal .tips-head {
      background: linear-gradient(135deg, #0a4f3f, #17a589);
    }

    .tips-card.gold .tips-head {
      background: linear-gradient(135deg, #7e4100, #c9a84c);
    }

    .tips-card.purple .tips-head {
      background: linear-gradient(135deg, #3a1050, #6c3483);
    }

    .tips-body {
      padding: 8px 14px 13px;
    }

    .tip-item {
      display: flex;
      gap: 10px;
      padding: 9px 0;
      border-bottom: 1px solid var(--bd);
    }

    .tip-item:last-child {
      border-bottom: none;
    }

    .tnum {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--n);
      color: var(--g);
      font-size: 10px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }

    .tip-item strong {
      font-size: 12.5px;
      font-weight: 900;
      display: block;
      margin-bottom: 2px;
    }

    .tip-item p {
      font-size: 12px;
      color: var(--mu);
      line-height: 1.6;
    }

    /* LISTEN */
    .lg {
      margin-bottom: 14px;
    }

    .lghead {
      background: linear-gradient(135deg, var(--n), var(--n3));
      border-radius: var(--r) var(--r) 0 0;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .lgbadge {
      background: var(--g);
      color: var(--n);
      font-size: 11px;
      font-weight: 900;
      padding: 3px 11px;
      border-radius: 10px;
      flex-shrink: 0;
    }

    .lghead p {
      font-size: 11px;
      color: rgba(255, 255, 255, .55);
    }

    .dcard {
      background: var(--card);
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
      border: 1px solid var(--bd);
      margin-bottom: 12px;
      overflow: hidden;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

    .dcard:hover {
      transform: translateY(-2px);
      border-color: var(--g);
      box-shadow: 0 10px 26px rgba(15, 23, 42, .13);
    }

    .dhead {
      background: linear-gradient(135deg, var(--n), #1d4ed8);
      padding: 13px 15px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* الرأس كان يمتدّ شريطاً فارغاً على الشاشة العريضة،
       والنصّ منحازٌ إلى طرفه. فيأخذ النصّ ما يحتاجه وينتهي. */
    .dhead>div {
      flex: 1;
      min-width: 0;
    }

    .dic {
      font-size: 28px;
      line-height: 1;
      flex-shrink: 0;
    }

    /* ══ الوسم العربيّ والعنوان الإنجليزيّ ══
       كانا ملتصقين بلا فاصلٍ ولا عزلٍ ثنائيّ الاتّجاه، فيُقرأان
       «مقطع من نماذجSTEPPizza Delivery» — كلمةٌ واحدة مشوّهة.
       والمرن يجعل كلّ طرفٍ صندوقاً مستقلّاً، والعزل يمنع انقلاب
       ترتيبهما — وكلاهما في النمط لا في البيانات، فلا تُمسّ سبعةٌ
       وعشرون مدخلاً. */
    .dnum {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      unicode-bidi: isolate;
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .62);
      margin-bottom: 3px;
    }

    .dtitle {
      font-size: 15px;
      font-weight: 900;
      line-height: 1.5;
      color: var(--g2);
    }

    .dsub {
      font-size: 11.5px;
      color: rgba(255, 255, 255, .62);
      margin-top: 2px;
      unicode-bidi: isolate;
    }

    .dtip {
      background: #fef9e7;
      border-right: 4px solid var(--g);
      padding: 9px 14px;
      display: flex;
      gap: 9px;
      align-items: flex-start;
    }

    [data-dark] .dtip {
      background: #2a1f00;
    }

    .dtip span {
      font-size: 14px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .dtip p {
      font-size: 12px;
      color: #7d5a0c;
      line-height: 1.65;
    }

    [data-dark] .dtip p {
      color: #f0c060;
    }

    .aplayer {
      background: var(--bl);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--bd);
    }

    .playbtn {
      background: var(--n);
      color: var(--g);
      border: 2px solid var(--g);
      border-radius: 22px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--fn);
      transition: all .2s;
    }

    .playbtn.playing {
      background: var(--g);
      color: var(--n);
    }

    .drivebtn {
      background: var(--gr2);
      color: #fff;
      border-radius: 18px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .drivebtn.full {
      background: var(--n3);
      border: 2px solid var(--g);
      color: var(--gt);
      padding: 9px 18px;
      font-size: 13px;
      width: 100%;
      justify-content: center;
    }

    .speeds {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-right: auto;
    }

    .speeds span {
      font-size: 11px;
      color: var(--mu);
      font-weight: 700;
    }

    .spd {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1.5px solid var(--bd);
      background: var(--card);
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .spd.on {
      background: var(--n);
      border-color: var(--gt);
    }

    .dscript {
      background: var(--bg);
      border-right: 4px solid var(--g);
      padding: 12px 14px;
      max-height: 160px;
      overflow-y: auto;
    }

    .dscript p {
      font-size: 12.5px;
      line-height: 1.85;
      color: var(--tx);
      font-style: italic;
    }

    .dqs {
      padding: 10px 13px 12px;
    }

    .dqs .qc {
      box-shadow: none;
    }

    /* TYPES */
    .types-grid {
      display: grid;
      gap: 9px;
      margin-top: 8px;
    }

    .type-card {
      background: var(--bg);
      border-radius: 11px;
      border: 1.5px solid var(--bd);
      padding: 12px 13px;
      display: flex;
      gap: 12px;
    }

    .type-n {
      font-size: 22px;
      flex-shrink: 0;
    }

    .type-t {
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .type-en {
      font-size: 11px;
      color: var(--mu);
      font-weight: 400;
    }

    .type-ar {
      font-size: 12.5px;
      color: var(--tx);
      line-height: 1.65;
      margin-top: 4px;
    }

    /* SHARE MODAL */
    .shovrl {
      display: none;
      position: fixed;
      inset: 0;
      z-index: var(--z-drop);
      background: rgba(0, 0, 0, .6);
      backdrop-filter: blur(4px);
      align-items: flex-end;
      justify-content: center;
    }

    .shmod {
      background: var(--card);
      border-radius: 24px 24px 0 0;
      padding: 20px;
      width: 100%;
      max-width: 520px;
    }

    .shmod h3 {
      font-size: 15px;
      font-weight: 900;
      margin-bottom: 14px;
      text-align: center;
    }

    .shopts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }

    .shopt {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 12px 8px;
      border-radius: 14px;
      background: var(--bg);
      border: 1.5px solid var(--bd);
      cursor: pointer;
      text-decoration: none;
      font-size: 11px;
      font-weight: 700;
      color: var(--tx);
    }

    .shopt span {
      font-size: 26px;
    }

    .cprow {
      display: flex;
      gap: 8px;
    }

    .cpinp {
      flex: 1;
      padding: 9px 12px;
      border-radius: 10px;
      border: 1.5px solid var(--bd);
      background: var(--bg);
      color: var(--tx);
      font-size: 12px;
      font-family: var(--fn);
      direction: ltr;
    }

    .cpbtn {
      background: var(--n);
      color: var(--g);
      border: 2px solid var(--g);
      border-radius: 10px;
      padding: 9px 14px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--fn);
      white-space: nowrap;
    }

    .shclose {
      width: 100%;
      margin-top: 11px;
      padding: 11px;
      border: none;
      background: var(--bg);
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      color: var(--mu);
      cursor: pointer;
      font-family: var(--fn);
    }

    .ios-tip {
      background: #fef9e7;
      border: 1px solid var(--g);
      border-radius: 10px;
      padding: 10px 13px;
      margin-bottom: 12px;
      font-size: 12px;
      color: #7d5a0c;
      line-height: 1.7;
      text-align: center;
    }

    [data-dark] .ios-tip {
      background: #2a1f00;
      color: #f0c060;
    }

    .dayb {
      background: var(--bg);
      border: 1.5px solid var(--bd);
      color: var(--tx);
      border-radius: 10px;
      padding: 9px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--fn);
      transition: all .15s
    }

    .dayb.on {
      background: var(--g);
      color: #1a1200;
      border-color: var(--g)
    }

    .minb {
      background: var(--bg);
      border: 1.5px solid var(--bd);
      color: var(--tx);
      border-radius: 10px;
      padding: 9px 14px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--fn)
    }

    .minb.on {
      background: var(--g);
      color: #1a1200;
      border-color: var(--g)
    }

    .lvlb {
      flex: 1 1 30%;
      background: var(--bg);
      border: 1.5px solid var(--bd);
      color: var(--tx);
      border-radius: 12px;
      padding: 10px 8px;
      font-size: 12.5px;
      font-weight: 800;
      cursor: pointer;
      font-family: var(--fn);
      display: flex;
      flex-direction: column;
      gap: 3px;
      align-items: center;
      text-align: center;
      min-width: 96px
    }

    .lvlb i {
      font-style: normal;
      font-size: 9.5px;
      font-weight: 600;
      color: var(--mu);
      line-height: 1.45
    }

    .lvlb.on {
      border-color: var(--g);
      background: rgba(201, 168, 76, .14)
    }

    .lvlb.on i {
      color: var(--gt)
    }

    .plan-hero {
      background: linear-gradient(135deg, #0b1e36, #163255);
      border: 1px solid rgba(201, 168, 76, .32);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 14px;
      font-family: var(--fn);
      line-height: 1.75
    }

    .plan-hero b {
      display: block;
      font-size: 13.5px;
      color: var(--gt);
      margin-bottom: 4px
    }

    .plan-hero span {
      display: block;
      font-size: 11.5px;
      color: rgba(255, 255, 255, .68)
    }

    .plan-hero i {
      display: block;
      font-style: normal;
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
      margin-top: 6px
    }

    .pt-m {
      float: left;
      font-size: 10px;
      font-weight: 800;
      color: var(--mu);
      background: var(--bg);
      border: 1px solid var(--bd);
      border-radius: 20px;
      padding: 1px 7px;
      font-family: var(--fn)
    }

    .plan-day.pd-exam {
      border-color: rgba(201, 168, 76, .5)
    }

    .plan-day.pd-review {
      border-color: rgba(120, 160, 200, .4)
    }

    .dayb:active {
      transform: scale(.96)
    }

    .dayb.on {
      background: var(--g);
      color: #1a1200;
      border-color: var(--gt)
    }

    /* ══ بلورية «خطتي» ══ زجاجٌ خفيف يوحي بالعمق دون أن يغطّي النص —
       نفس فلسفة .xcard (لمعة مائلة لا تُثقل) مطبَّقة على بطاقات الخطة.
       (المالك، ١١ سبتمبر — دُمجت هنا مباشرة لا كطبقة CSS منفصلة.) */
    .plan-day {
      position: relative;
      background: linear-gradient(145deg, var(--card), var(--card));
      border: 1px solid var(--bd);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 10px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
      transition: opacity .3s, border-color .2s ease, box-shadow .2s ease
    }

    .plan-day::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background: linear-gradient(115deg, rgba(255, 255, 255, .05), transparent 35%)
    }

    .plan-day.pd-current {
      border-color: var(--g);
      box-shadow: 0 8px 22px rgba(201, 168, 76, .12), inset 0 1px 0 rgba(255, 255, 255, .06)
    }

    .plan-day.done {
      opacity: .55
    }

    .plan-day-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1.5px solid var(--bd)
    }

    .plan-task {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 9px;
      align-items: flex-start;
      padding: 6px 0;
      font-family: var(--fn);
      font-size: 13px;
      line-height: 1.6
    }

    /* شارة حال اليوم — لغةٌ بصرية لا شكلٌ فقط: مكتمل · لم يبدأ */
    .plan-status-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-inline-start: 8px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 900;
      background: rgba(201, 168, 76, .12);
      color: var(--gt);
      border: 1px solid rgba(201, 168, 76, .3)
    }

    .plan-day.done .plan-status-chip {
      background: rgba(79, 183, 135, .12);
      color: #4fb787;
      border-color: rgba(79, 183, 135, .3)
    }

    .plan-current-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0 0 8px;
      font-size: 11px;
      font-weight: 900;
      color: var(--g)
    }

    /* بطاقة «رحلتك التعليمية» — ملخّصٌ واحد بدل أرقامٍ متفرّقة، وموضع
       ثابت لسؤال «أين أنا؟» أعلى الخطة دائماً. */
    .plan-journey-head {
      position: relative;
      margin: 0 0 12px;
      padding: 14px 15px;
      border: 1px solid var(--bd);
      border-radius: 16px;
      background: var(--card);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05)
    }

    .plan-journey-head .pj-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap
    }

    .plan-journey-head .pj-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--tx)
    }

    .plan-journey-head .pj-meta {
      font-size: 11px;
      color: var(--mu);
      line-height: 1.7
    }

    .plan-journey-head .pj-track {
      height: 8px;
      margin-top: 10px;
      border-radius: 999px;
      background: var(--bd);
      overflow: hidden
    }

    .plan-journey-head .pj-fill {
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--g), #f0c419);
      transition: width .35s ease
    }

    .plan-chk {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 2px solid var(--bd);
      flex-shrink: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      transition: all .15s
    }

    .plan-chk.ck {
      background: var(--g);
      border-color: var(--gt)
    }

    .ob.sel {
      background: rgba(201, 168, 76, .2) !important;
      border-color: var(--gt) !important;
      font-weight: 700
    }

    .tab.on .tabi {
      background: radial-gradient(circle, rgba(201, 168, 76, .28), rgba(201, 168, 76, .08));
      box-shadow: 0 0 14px rgba(201, 168, 76, .35);
    }

    .tab.on .tabl {
      color: var(--gt);
    }

    .tab.on::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--g), transparent);
      border-radius: 0 0 4px 4px;
      box-shadow: 0 0 8px var(--g);
    }

    .tab:active {
      transform: scale(.92);
    }

    .tab.on {
      filter: drop-shadow(0 2px 4px rgba(201, 168, 76, .2));
    }

    .tab-special .tabi {
      background: radial-gradient(circle, rgba(201, 168, 76, .18), transparent);
      border: 1.5px solid rgba(201, 168, 76, .4);
    }

    .tab-special.on .tabi {
      background: radial-gradient(circle, rgba(201, 168, 76, .35), rgba(201, 168, 76, .12));
      border-color: var(--gt);
    }

    .ob {
      align-items: flex-start !important
    }

    .ob .ol {
      margin-top: 1px
    }

    .obt {
      flex: 1;
      min-width: 0;
      overflow-wrap: break-word;
      word-break: normal
    }

    #exam-questions {
      width: 100%;
      max-width: 100%;
      overflow: hidden
    }

    #exam-questions .qc {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box
    }

    #exam-questions .opts {
      width: 100%
    }

    #exam-questions .ob {
      width: 100%;
      box-sizing: border-box
    }

    .qc,
    .qbody,
    .opts,
    .ob {
      max-width: 100%;
      box-sizing: border-box
    }

    .qstem {
      overflow-wrap: break-word;
      word-break: normal;
      max-width: 100%
    }

    .ssec {
      overflow-x: clip
    }

    .page {
      overflow-x: clip
    }

    /* exam layout fix */
    #pg-exam {
      overflow-x: clip;
      width: 100%
    }

    #pg-exam .ssec {
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      box-sizing: border-box
    }

    #exam-questions {
      width: 100%;
      max-width: 100%;
      display: block
    }

    #exam-questions>div {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box
    }

    #exam-questions .qc {
      width: 100% !important;
      max-width: 100% !important;
      display: block;
      box-sizing: border-box;
      float: none;
      clear: both
    }

    #exam-questions .qbody {
      width: 100%;
      box-sizing: border-box
    }

    #exam-questions .opts {
      display: flex;
      flex-direction: column;
      width: 100%
    }

    #exam-questions .ob {
      width: 100%;
      box-sizing: border-box;
      display: flex
    }

    #exam-questions svg {
      max-width: 100%;
      height: auto
    }

    /* ===== تحسينات الإحساس كتطبيق ===== */
    /* منع الارتداد المطّاطي (bounce) في iOS الذي يحرّك الأشرطة */
    html,
    body {
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch
    }

    /* تثبيت صلب للهيدر والتبويبات (تسريع GPU لمنع الوميض) */
    .topbar {
      will-change: transform;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden
    }

    .subtabs {
      will-change: transform;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden
    }

    .tabs {
      will-change: transform;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden
    }

    /* منع التمرير الأفقي للصفحة كاملة */
    /* clip لا hidden: الثانية تجعل الجسم حاوية تمرير فتُبطل التصاق
   شريط التبويبات، فيهرب مع التمرير ويبقى فراغ تحت الشريط العلوي. */
    @supports not (overflow-x: clip) {

      body,
      .page,
      .ssec {
        overflow-x: hidden
      }
    }

    body {
      overflow-x: clip;
      max-width: 100%
    }

    /* منع تحديد النص على أزرار الواجهة (إحساس تطبيق) */
    .topbar,
    .subtabs,
    .tabs,
    .stab,
    .tab,
    .ob,
    .dnav,
    button {
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent
    }

    /* السماح بتحديد نص المحتوى (القطع) */
    .pcard,
    .qstem,
    .rule-explain,
    .passage-text {
      -webkit-user-select: text;
      user-select: text
    }

    /* منع التكبير بالنقر المزدوج */
    * {
      touch-action: manipulation
    }

    #backTop {
      position: fixed;
      bottom: 85px;
      left: 14px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(201, 168, 76, .15);
      border: 1.5px solid rgba(201, 168, 76, .4);
      color: #c9a84c;
      font-size: 18px;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: calc(var(--z-drop) + 200);
      transition: .3s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    #backTop.show {
      display: flex
    }

    #backTop:active {
      background: rgba(201, 168, 76, .3);
      transform: scale(.92)
    }

    /* ── NEW: updates + models ── */
    .upd-card {
      background: var(--card);
      border: 1px solid var(--bd);
      border-right: 3px solid var(--g);
      border-radius: var(--r);
      padding: 13px 15px;
      margin-bottom: 11px;
      box-shadow: var(--sh);
    }

    .upd-card .uh {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 9px;
      margin-bottom: 5px;
    }

    .upd-card .ut {
      font-size: 14px;
      font-weight: 800;
      color: var(--tx);
    }

    .upd-card .ud {
      font-size: 10px;
      color: var(--mu);
      white-space: nowrap;
      font-weight: 700;
    }

    .upd-card .ub {
      font-size: 12px;
      color: var(--mu);
      line-height: 1.6;
      margin-bottom: 9px;
    }

    .upd-card .uact {
      background: var(--n);
      color: var(--g);
      border: 1.5px solid var(--g);
      border-radius: 9px;
      padding: 7px 15px;
      font-size: 12px;
      font-weight: 800;
      font-family: var(--fn);
      cursor: pointer;
    }

    .upd-card .unew {
      background: var(--g);
      color: #1a1200;
      font-size: 9px;
      font-weight: 900;
      padding: 2px 7px;
      border-radius: 5px;
      margin-left: 5px;
    }

    .upd-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #e74c3c;
      margin-right: 4px;
      vertical-align: middle;
    }

    .upd-warn {
      background: var(--rd);
      color: var(--rd2);
      border-radius: 8px;
      padding: 7px 11px;
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 9px;
    }

    /* ── إصلاح: العناوين تختفي تحت الشريط العلوي + شريط الأقسام ──
   .topbar = 52px لاصق · .subtabs لاصق عند top:52px
   بلا scroll-margin كان أول ~92px من كل هدف يُغطّى. */
    :root {
      --stick: 150px;
    }

    html {
      scroll-padding-top: var(--stick);
    }

    .ssec,
    .rcard,
    .rule-block,
    .pcard,
    .qc,
    .gqc,
    .chart-block,
    .lg,
    .dcard,
    .sec-title {
      scroll-margin-top: var(--stick);
    }

    /* تباين أعلى للنص الثانوي — كان 3.68:1 و3.22:1 (تحت حد WCAG) */
    .stab {
      color: rgba(255, 255, 255, .58);
    }

    .stab.on {
      color: var(--g2);
    }

    .dgrp {
      display: none
    }

    .dgrp.on {
      display: block
    }

    /* ── إصلاح: .rule-table كان بلا أي تنسيق للخلايا (32 جدولاً) ── */
    .rule-tw {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 10px 0;
    }

    .rule-table th {
      background: var(--n);
      color: var(--g);
      padding: 8px 10px;
      text-align: right;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .rule-table td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--bd);
      font-size: 11.5px;
      vertical-align: top;
      line-height: 1.6;
    }

    .rule-table tr:nth-child(even) td {
      background: var(--bg);
    }

    .rule-table tr:last-child td {
      border-bottom: none;
    }

    .rule-table td:first-child {
      font-weight: 800;
      color: var(--tx);
      white-space: nowrap;
    }

    /* الأعمدة الإنجليزية تُقرأ يساراً */
    .rule-table td:nth-child(2),
    .rule-table td:nth-child(3) {
      direction: ltr;
      text-align: left;
    }

    [data-dark] .rule-table td {
      border-bottom-color: #1a3050;
    }

    .ghide {
      display: none !important
    }

    .glist-grp {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 13px;
      margin-bottom: 10px;
      overflow: hidden
    }

    .glist-h {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 15px;
      cursor: pointer;
      user-select: none
    }

    .glist-h b {
      font-size: 14.5px;
      font-weight: 900;
      color: var(--tx);
      flex: 1
    }

    .glist-h .gn {
      font-size: 10.5px;
      color: var(--mu);
      font-weight: 700
    }

    .glist-h .gchev {
      color: var(--mu);
      font-size: 13px;
      transition: transform .2s
    }

    .glist-grp.open .gchev {
      transform: rotate(-90deg);
      color: var(--gt)
    }

    .glist-b {
      display: none;
      border-top: 1px solid var(--bd)
    }

    .glist-grp.open .glist-b {
      display: block
    }

    /* لا تُجبَر المجموعة الأولى على عمودين: الشبكة الداخليّة
       (.xgrid) تتولّى التوزيع، وتقييدها من فوقٍ يقصّ البطاقات. */

    .glist-featured .glist-i {
      min-width: 0;
      padding: 12px 11px;
      border-bottom: 1px solid var(--bd)
    }

    .glist-featured .glist-i:nth-child(odd) {
      border-inline-end: 1px solid var(--bd)
    }

    .glist-featured .glist-i:nth-last-child(-n+2) {
      border-bottom: none
    }

    .glist-featured .glist-i .gt {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .glist-i {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 12px 15px;
      cursor: pointer;
      border-bottom: 1px solid var(--bd)
    }

    .glist-i:last-child {
      border-bottom: none
    }

    .glist-i:active {
      background: var(--bg)
    }

    .glist-i .gt {
      flex: 1;
      font-size: 13px;
      font-weight: 700;
      color: var(--tx);
      direction: ltr;
      text-align: left
    }

    .glist-i .gq {
      font-size: 10px;
      color: var(--mu);
      font-weight: 700;
      white-space: nowrap
    }

    .glist-i .gerr {
      background: var(--rd);
      color: var(--rd2);
      font-size: 9px;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 5px
    }

    .gback {
      display: block;
      width: 100%;
      background: var(--bg);
      border: 1.5px solid var(--bd);
      border-radius: 10px;
      padding: 9px;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--tx);
      font-family: var(--fn);
      cursor: pointer;
      margin-bottom: 12px
    }

    .pl-card {
      background: linear-gradient(135deg, #0d2847, #1a4d7a);
      --gt: var(--g);
      border-radius: 16px;
      padding: 18px;
      color: #fff;
      margin-bottom: 14px
    }

    .pl-card h3 {
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 5px
    }

    .pl-card p {
      font-size: 12px;
      opacity: .82;
      line-height: 1.7;
      margin-bottom: 12px
    }

    .pl-btn {
      background: var(--g);
      color: #1a1200;
      border: none;
      border-radius: 10px;
      padding: 11px 20px;
      font-size: 13px;
      font-weight: 900;
      font-family: var(--fn);
      cursor: pointer
    }

    .pl-days {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin: 12px 0
    }

    .pl-days button {
      background: rgba(255, 255, 255, .12);
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .25);
      border-radius: 9px;
      padding: 9px 14px;
      font-size: 12px;
      font-weight: 800;
      font-family: var(--fn);
      cursor: pointer
    }

    .pl-days button.on {
      background: var(--g);
      color: #1a1200;
      border-color: var(--gt)
    }

    .pl-step {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-right: 3px solid var(--g);
      border-radius: 12px;
      padding: 13px 15px;
      margin-bottom: 9px
    }

    .pl-step b {
      display: block;
      font-size: 13.5px;
      color: var(--tx);
      margin-bottom: 3px
    }

    .pl-step span {
      font-size: 11.5px;
      color: var(--mu);
      display: block;
      margin-bottom: 9px
    }

    .pl-step button {
      background: var(--n);
      color: var(--g);
      border: none;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 11.5px;
      font-weight: 800;
      font-family: var(--fn);
      cursor: pointer
    }

    /* ══ بلورات محتوى الخطة ══
       المحتوى يفتح تحت بلورته مباشرة داخل «خطتي» نفسها — لا تنقّل
       ولا صفحة أخرى، فلا حاجة لطريق عودة أصلاً. نسخٌ لا نقل (كما
       rsInl) فالمصدر واحد دائماً. (المالك، ١٠ سبتمبر.) */
    .plan-bub {
      border-radius: 14px;
      margin-bottom: 9px;
      overflow: hidden;
      border: 1.5px solid var(--bd);
      background: rgba(255, 255, 255, .04);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: border-color .15s ease
    }

    .plan-bub.bub-open {
      border-color: var(--g);
      box-shadow: 0 8px 22px rgba(201, 168, 76, .12)
    }

    .plan-bub-h {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      cursor: pointer;
      border-right: 3px solid var(--g)
    }

    .plan-bub-h b {
      display: block;
      font-size: 13.5px;
      color: var(--tx);
      margin-bottom: 3px
    }

    .plan-bub-h span {
      font-size: 11.5px;
      color: var(--mu)
    }

    .pb-arrow {
      flex-shrink: 0;
      color: var(--g);
      font-size: 12px;
      transition: transform .2s ease
    }

    .plan-bub.bub-open .pb-arrow {
      transform: rotate(180deg)
    }

    .plan-bub-body {
      padding: 0 14px 14px;
      border-top: 1px solid var(--bd)
    }

    .pl-lvl {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin: 10px 0
    }

    .pl-lvl div {
      background: rgba(255, 255, 255, .1);
      border-radius: 10px;
      padding: 9px 14px;
      flex: 1;
      min-width: 88px
    }

    .pl-lvl b {
      display: block;
      font-size: 19px;
      font-weight: 900;
      color: var(--g2)
    }

    .pl-lvl span {
      font-size: 10.5px;
      opacity: .8
    }

    .rcard {
      margin: 0 0 16px;
      display: grid;
      gap: 9px
    }

    .rcard .rc-t {
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 5px
    }

    .rc-key {
      background: linear-gradient(135deg, #1a3a5c, #0f2847);
      color: #fff;
      border-radius: 13px;
      padding: 14px 16px;
      font-size: 13px;
      line-height: 1.85
    }

    .rc-key .rc-t {
      color: var(--g2)
    }

    .rc-signs {
      background: var(--bl);
      border: 1.5px solid #9ec5e8;
      border-radius: 13px;
      padding: 13px 16px
    }

    .rc-signs .rc-t {
      color: var(--bl2)
    }

    .rc-signs ul {
      margin: 0;
      padding-inline-start: 18px
    }

    .rc-signs li {
      font-size: 12.5px;
      color: var(--tx);
      line-height: 2;
      direction: rtl
    }

    .rc-trap {
      background: var(--rd);
      border: 1.5px solid #e8a9a2;
      border-radius: 13px;
      padding: 13px 16px;
      font-size: 12.5px;
      color: var(--tx);
      line-height: 1.85
    }

    .rc-trap .rc-t {
      color: var(--rd2)
    }

    .rc-ex {
      background: var(--gr);
      border: 1.5px solid #8fd4b0;
      border-radius: 13px;
      padding: 13px 16px;
      font-size: 13px;
      color: var(--tx);
      line-height: 1.9
    }

    .rc-ex .rc-t {
      color: var(--gr2)
    }

    [data-dark] .rc-signs {
      border-color: #1b4f72
    }

    [data-dark] .rc-trap {
      border-color: #5a2520
    }

    [data-dark] .rc-ex {
      border-color: #1e5e3c
    }

    .rd-head {
      background: linear-gradient(135deg, #0d2847, #1a4d7a);
      --gt: var(--g);
      color: #fff;
      border-radius: 13px;
      padding: 14px 16px;
      margin-bottom: 12px
    }

    .rd-head b {
      display: block;
      font-size: 15px;
      font-weight: 900;
      margin-bottom: 3px
    }

    .rd-head span {
      font-size: 11px;
      opacity: .8
    }

    .rd-text {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 13px;
      padding: 16px;
      font-size: 14px;
      line-height: 2.1;
      color: var(--tx);
      text-align: left;
      max-height: none
    }

    .rd-q {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 13px;
      padding: 14px;
      margin-bottom: 11px
    }

    .rd-stem {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--tx);
      line-height: 1.8;
      text-align: left;
      margin-bottom: 6px
    }

    .rd-tr {
      background: var(--bl);
      border-radius: 9px;
      padding: 9px 12px;
      font-size: 12.5px;
      color: var(--bl2);
      line-height: 1.8;
      margin-bottom: 8px;
      font-family: var(--fn)
    }

    .rd-trb {
      background: transparent;
      border: 1px dashed var(--bd);
      border-radius: 8px;
      padding: 4px 11px;
      font-size: 10.5px;
      color: var(--mu);
      font-family: var(--fn);
      cursor: pointer;
      margin-bottom: 9px
    }

    .rd-opts {
      display: grid;
      gap: 7px
    }

    .rd-o {
      background: var(--bg);
      border: 1.5px solid var(--bd);
      border-radius: 10px;
      padding: 11px 13px;
      font-size: 13px;
      color: var(--tx);
      text-align: left;
      cursor: pointer;
      display: flex;
      gap: 9px;
      align-items: flex-start;
      line-height: 1.7
    }

    .rd-o .rd-l {
      background: var(--card);
      border-radius: 6px;
      min-width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0
    }

    .rd-o.ok {
      background: var(--gr);
      border-color: var(--gr2);
      color: var(--gr2);
      font-weight: 700
    }

    .rd-o.no {
      background: var(--rd);
      border-color: var(--rd2);
      color: var(--rd2)
    }

    .rd-ans {
      display: none
    }

    .rd-ans.show {
      display: block;
      margin-top: 9px;
      padding: 10px 13px;
      border-radius: 9px;
      font-size: 12.5px;
      font-family: var(--fn);
      line-height: 1.8
    }

    .rd-ans.ok {
      background: var(--gr);
      color: var(--gr2)
    }

    .rd-ans.no {
      background: var(--rd);
      color: var(--rd2)
    }

    .hh {
      background: linear-gradient(140deg, var(--n), var(--n3));
      border-radius: 16px;
      padding: 17px;
      color: #fff;
      margin-bottom: 13px
    }

    .hh h3 {
      font-size: 16.5px;
      font-weight: 900;
      margin-bottom: 5px
    }

    .hh p {
      font-size: 12px;
      opacity: .85;
      line-height: 1.75;
      margin-bottom: 12px
    }

    .hh-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .hh-st {
      background: rgba(255, 255, 255, .11);
      border-radius: 11px;
      padding: 10px 13px;
      flex: 1;
      min-width: 82px;
      text-align: center
    }

    .hh-st b {
      display: block;
      font-size: 19px;
      font-weight: 900;
      color: var(--g2)
    }

    .hh-st span {
      font-size: 10px;
      opacity: .8
    }

    .hnav {
      /* تتمدّد بعدد الأعمدة لا بعرض البطاقة: عمودان ثابتان
         يتركان الشاشة العريضة فارغة من جانبيها أو يمدّان البطاقة حتّى
         تصير شريطاً. وauto-fill يملأ ما اتّسع وينزل ما ضاق. */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 10px
    }

    .hnav a {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 14px;
      padding: 14px 12px;
      text-decoration: none;
      display: block;
      cursor: pointer
    }

    .hnav a .hi {
      font-size: 24px;
      display: block;
      margin-bottom: 6px
    }

    .hnav a b {
      display: block;
      font-size: 13.5px;
      color: var(--tx);
      font-weight: 900;
      margin-bottom: 3px
    }

    .hnav a span {
      font-size: 10.5px;
      color: var(--mu);
      line-height: 1.6;
      display: block
    }

    .hnav a .hp {
      margin-top: 7px;
      height: 5px;
      background: var(--bd);
      border-radius: 3px;
      overflow: hidden
    }

    .hnav a .hp i {
      display: block;
      height: 100%;
      background: var(--g)
    }

    .rs-meta {
      font-size: 11px;
      opacity: .85
    }

    .rs-b {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-right: 3px solid #a8342a;
      border-radius: 13px;
      padding: 13px 15px;
      margin-bottom: 10px
    }

    .rs-b.ok {
      border-right-color: var(--gr2);
      opacity: .72
    }

    .rs-go {
      background: var(--n);
      color: var(--g);
      border: none;
      border-radius: 9px;
      padding: 8px 17px;
      font-size: 12px;
      font-weight: 800;
      font-family: var(--fn);
      cursor: pointer
    }

    .fbar {
      display: flex;
      align-items: center;
      gap: 11px;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 12px;
      padding: 11px 14px;
      margin-bottom: 13px;
      flex-wrap: wrap
    }

    .fbar.on {
      background: linear-gradient(135deg, #0d2847, #1a4d7a);
      --gt: var(--g);
      border-color: var(--gt)
    }

    .fbar .fb-l {
      flex: 1;
      font-size: 12px;
      color: var(--tx);
      line-height: 1.6;
      min-width: 150px
    }

    .fbar.on .fb-l {
      color: #fff
    }

    .fbar button {
      background: var(--n);
      color: var(--g);
      border: none;
      border-radius: 9px;
      padding: 8px 15px;
      font-size: 11.5px;
      font-weight: 800;
      font-family: var(--fn);
      cursor: pointer;
      white-space: nowrap
    }

    .fbar.on button {
      background: var(--g);
      color: #1a1200
    }

    .glist-i.dim {
      opacity: .42
    }

    .glist-i.dim .gt {
      font-weight: 600
    }

    .glist-grp.dimgrp {
      opacity: .55
    }

    .fgoal {
      background: var(--g);
      color: #1a1200;
      font-size: 9px;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 5px
    }

    .fhint {
      font-size: 10px;
      color: var(--mu);
      margin-inline-start: 5px
    }

    .nextbar {
      position: fixed;
      left: 10px;
      /* ٧٦px لا ١٠px: فقاعة الدردشة العائمة (#chFab) تقف على نفس
         الزاوية بعرض ٥٤ + إزاحة ١٦ — وكانا يتداخلان فعلياً في
         الشاشات الضيّقة (قِيس حيّاً: ٣٧ مللي متراً تراكباً رأسياً).
         (المالك، ١١ سبتمبر — فحص التعارض بين الشاشات.) */
      right: 76px;
      bottom: calc(62px + env(safe-area-inset-bottom, 0));
      background: linear-gradient(135deg, #0d2847, #1a4d7a);
      --gt: var(--g);
      border: 1.5px solid var(--g);
      border-radius: 13px;
      padding: 10px 13px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: calc(var(--z-float) - 20);
      box-shadow: 0 6px 22px rgba(0, 0, 0, .3)
    }

    .nextbar .nb-t {
      flex: 1;
      min-width: 0;
      color: #fff
    }

    .nextbar .nb-t b {
      display: block;
      font-size: 10px;
      opacity: .75;
      font-weight: 700
    }

    .nextbar .nb-t span {
      display: block;
      font-size: 12.5px;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .nextbar button {
      background: var(--g);
      color: #1a1200;
      border: none;
      border-radius: 9px;
      padding: 8px 14px;
      font-size: 11.5px;
      font-weight: 900;
      font-family: var(--fn);
      cursor: pointer;
      white-space: nowrap
    }

    .nextbar .nb-x {
      background: rgba(255, 255, 255, .14);
      color: #fff;
      padding: 8px 10px
    }

    .pp {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 14px;
      margin-bottom: 11px;
      overflow: hidden
    }

    .pp.fin {
      border-color: var(--gr2)
    }

    .pp-h {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 14px 15px;
      cursor: pointer;
      user-select: none
    }

    .pp-n {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg);
      border: 1.5px solid var(--bd);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12.5px;
      font-weight: 900;
      color: var(--mu);
      flex-shrink: 0
    }

    .pp.fin .pp-n {
      background: var(--gr);
      border-color: var(--gr2);
      color: var(--gr2)
    }

    .pp-h b {
      display: block;
      font-size: 14.5px;
      color: var(--tx)
    }

    .pp-h span {
      font-size: 10.5px;
      color: var(--mu)
    }

    /* لا سهم طيّ ولا شرط فتح: المحطة ظاهرةٌ كاملةً من أول تحميل. */
    .pp-b {
      display: block;
      padding: 0 15px 15px
    }

    /* دخولٌ هادئ للمحطة — CSS خالص بلا مكتبة، ويسكن لمن طلب
       تقليل الحركة في نظامه. */
    @keyframes ppIn {
      from {
        opacity: 0;
        transform: translateY(9px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .pp-in {
      animation: ppIn .34s cubic-bezier(.22, .9, .3, 1) both
    }

    @media (prefers-reduced-motion:reduce) {
      .pp-in {
        animation: none
      }
    }

    /* فهرس أنواع الأسئلة — سطرٌ لكلّ نوع: رقمٌ وعنوانٌ ووصفٌ واحد.
       والضغط يقفز إلى تدريب النوع، لا يفتح شيئاً؛ كلّه مفتوح. */
    .pt-ix {
      list-style: none;
      margin: 0 0 15px;
      padding: 0;
      border: 1.5px solid var(--bd);
      border-radius: 12px;
      overflow: hidden;
      background: var(--card)
    }

    .pt-ix li {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 13px;
      cursor: pointer;
      border-bottom: 1px solid var(--bd);
      transition: background .18s
    }

    .pt-ix li:last-child {
      border-bottom: none
    }

    .pt-ix li:hover,
    .pt-ix li:active {
      background: var(--bg)
    }

    .pt-n {
      min-width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--n);
      color: var(--g);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 900;
      flex-shrink: 0
    }

    .pt-ix li b {
      font-size: 12.5px;
      color: var(--tx);
      font-weight: 800;
      flex: 1;
      min-width: 0
    }

    .pt-ix li i {
      font-style: normal;
      font-size: 10.5px;
      color: var(--mu);
      flex-shrink: 0
    }

    /* هدف القفزة لا يختفي تحت الشريط اللاصق */
    .pp-b .tc {
      scroll-margin-top: calc(var(--stick, 60px) + 12px)
    }

    .pp-intro {
      background: var(--bl);
      color: var(--bl2);
      border-radius: 11px;
      padding: 12px 14px;
      font-size: 12.5px;
      line-height: 1.85;
      margin-bottom: 13px
    }

    .pp-t2 {
      font-size: 12.5px;
      font-weight: 900;
      color: var(--tx);
      margin-bottom: 9px
    }

    .pp-tip {
      background: var(--bg);
      border-radius: 10px;
      padding: 10px 13px;
      margin-bottom: 7px
    }

    .pp-tip > b {
      display: block;
      font-size: 12.5px;
      color: var(--tx);
      margin-bottom: 3px
    }

    .pp-tip span {
      font-size: 11.5px;
      color: var(--mu);
      line-height: 1.8;
      display: block;
      direction: rtl
    }

    .pp-demo {
      background: var(--bg);
      border-radius: 12px;
      padding: 13px
    }

    .pp-audio {
      background: var(--n);
      color: var(--g);
      border: none;
      border-radius: 10px;
      padding: 11px 18px;
      font-size: 12.5px;
      font-weight: 800;
      font-family: var(--fn);
      cursor: pointer;
      width: 100%;
      margin-bottom: 11px
    }

    .pp-text {
      background: var(--card);
      border-radius: 10px;
      padding: 13px;
      font-size: 13px;
      line-height: 2;
      color: var(--tx);
      text-align: left;
      margin-bottom: 11px
    }

    .pp-q {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--tx);
      text-align: left;
      line-height: 1.8;
      margin-bottom: 9px
    }

    .pp-opts {
      display: grid;
      gap: 6px
    }

    .pp-o {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 9px;
      padding: 10px 12px;
      font-size: 12.5px;
      color: var(--tx);
      text-align: left;
      cursor: pointer;
      display: flex;
      gap: 9px;
      align-items: center
    }

    .pp-o span {
      background: var(--bg);
      border-radius: 5px;
      min-width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10.5px;
      font-weight: 800;
      flex-shrink: 0
    }

    .pp-o.ok {
      background: var(--gr);
      border-color: var(--gr2);
      color: var(--gr2);
      font-weight: 700
    }

    .pp-o.soft {
      background: var(--bl);
      border-color: #9ec5e8;
      color: var(--bl2)
    }

    .pp-msg {
      background: var(--gr);
      color: var(--gr2);
      border-radius: 9px;
      padding: 10px 13px;
      font-size: 12.5px;
      font-weight: 800;
      margin: 10px 0 8px;
      text-align: center
    }

    .pp-exp {
      background: rgba(212, 169, 69, .13);
      border-inline-start: 3px solid var(--g);
      border-radius: 9px;
      padding: 11px 13px;
      font-size: 12.5px;
      color: var(--tx);
      line-height: 1.9
    }

    .pp-calm {
      background: var(--bl);
      color: var(--bl2);
      border-radius: 11px;
      padding: 12px 14px;
      font-size: 12px;
      line-height: 1.9;
      margin: 13px 0
    }

    .pp-fin {
      background: linear-gradient(135deg, #0f3a1e, #1e7a3d);
      color: #fff;
      border-radius: 14px;
      padding: 17px;
      font-size: 13px;
      line-height: 1.95;
      text-align: center;
      margin-top: 14px
    }

    .goal-g {
      /* تتمدّد بعدد الأعمدة لا بعرض البطاقة: عمودان ثابتان
         يتركان الشاشة العريضة فارغة من جانبيها أو يمدّان البطاقة حتّى
         تصير شريطاً. وauto-fill يملأ ما اتّسع وينزل ما ضاق. */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      /* width:100% لازمة مع auto-fill: بلا عرضٍ محدَّد تنكمش
         الشبكة إلى حدّها الأدنى فتصير عموداً واحداً — قُيس حيّاً:
         البطاقة صارت ٣٨px. وـ`1fr 1fr` لم تحتجها لأنّها تقتسم
         المتاح أيّاً كان. */
      width: 100%;
      gap: 8px;
      margin: 12px 0
    }

    .goal-g>button:last-child:nth-child(odd) {
      grid-column: 1/-1
    }

    .goal-b {
      background: rgba(255, 255, 255, .1);
      border: 1.5px solid rgba(255, 255, 255, .2);
      border-radius: 11px;
      padding: 11px 9px;
      cursor: pointer;
      font-family: var(--fn);
      color: #fff;
      text-align: center
    }

    .goal-b.on {
      background: var(--g);
      border-color: var(--gt);
      color: #1a1200
    }

    .goal-b .gi {
      font-size: 19px;
      display: block;
      margin-bottom: 4px
    }

    .goal-b b {
      display: block;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 2px
    }

    .goal-b .gd {
      font-size: 9.5px;
      opacity: .8;
      display: block;
      line-height: 1.4
    }

    .goal-oth {
      background: rgba(255, 255, 255, .1);
      border-radius: 11px;
      padding: 12px 14px;
      margin: 0 0 8px
    }

    .goal-oth[hidden] {
      display: none
    }

    .goal-oth label {
      display: block;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 6px
    }

    .goal-oth input {
      min-width: 0;
      background: rgba(255, 255, 255, .14);
      border: 1.5px solid rgba(255, 255, 255, .25);
      border-radius: 9px;
      padding: 10px 13px;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      font-family: var(--fn)
    }

    .goal-tgt {
      background: rgba(255, 255, 255, .1);
      border-radius: 11px;
      padding: 12px 14px;
      margin-top: 6px
    }

    .goal-tgt input {
      width: 100%;
      background: rgba(255, 255, 255, .14);
      border: 1.5px solid rgba(255, 255, 255, .25);
      border-radius: 9px;
      padding: 10px 13px;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      font-family: var(--fn);
      text-align: center
    }

    .goal-gap {
      background: rgba(212, 169, 69, .16);
      border: 1.5px solid var(--g);
      border-radius: 12px;
      padding: 12px 15px;
      font-size: 12.5px;
      color: var(--tx);
      line-height: 1.85;
      margin-bottom: 12px
    }

    .goal-ok {
      background: var(--gr);
      border: 1.5px solid var(--gr2);
      border-radius: 12px;
      padding: 12px 15px;
      font-size: 12.5px;
      color: var(--gr2);
      line-height: 1.85;
      margin-bottom: 12px
    }

    .tc-hero {
      background: linear-gradient(140deg, #0a1628, #1a4d7a);
      border-radius: 15px;
      padding: 16px;
      color: #fff;
      margin-bottom: 12px
    }

    .tc-ht {
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 4px
    }

    .tc-hero p {
      font-size: 12px;
      opacity: .85;
      line-height: 1.7
    }

    .tc-base {
      background: var(--bl);
      border-radius: 13px;
      padding: 14px 16px;
      margin-bottom: 13px
    }

    .tc-base > b {
      display: block;
      font-size: 13px;
      color: var(--bl2);
      margin-bottom: 8px
    }

    .tc-base ol {
      margin: 0;
      padding-inline-start: 19px
    }

    .tc-base li {
      font-size: 12.5px;
      color: var(--tx);
      line-height: 2
    }

    .tc {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 13px;
      margin-bottom: 10px;
      overflow: hidden
    }

    .tc-h {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 13px 15px;
      cursor: pointer;
      user-select: none
    }

    .tc-n {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: var(--n);
      color: var(--g);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
      flex-shrink: 0
    }

    .tc-h b {
      display: block;
      font-size: 13.5px;
      color: var(--tx)
    }

    .tc-rep {
      font-size: 10px;
      color: var(--mu);
      display: block;
      margin-top: 2px
    }

    .tc-c {
      color: var(--mu);
      font-size: 13px
    }

    .tc-b {
      display: none;
      padding: 0 15px 15px
    }

    .tc.open .tc-b {
      display: block
    }

    .tc-how {
      background: var(--bg);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 11px
    }

    .tc-how > b {
      display: block;
      font-size: 12px;
      color: var(--gt);
      margin-bottom: 5px
    }

    .tc-how div {
      font-size: 12.5px;
      color: var(--tx);
      line-height: 1.95
    }

    .tc-exw {
      background: var(--bg);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 11px
    }

    .tc-exw>b {
      display: block;
      font-size: 12px;
      color: var(--tx);
      margin-bottom: 8px
    }

    .tc-txt {
      background: var(--card);
      border-radius: 8px;
      padding: 11px;
      font-size: 12px;
      line-height: 1.95;
      color: var(--tx);
      text-align: left;
      margin-bottom: 9px
    }

    .tc-q {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--tx);
      text-align: left;
      margin-bottom: 8px;
      line-height: 1.7
    }

    .tc-o {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 8px;
      padding: 8px 11px;
      font-size: 12px;
      color: var(--tx);
      text-align: left;
      margin-bottom: 5px;
      display: flex;
      gap: 8px;
      align-items: flex-start;
      line-height: 1.6
    }

    .tc-o span {
      background: var(--bg);
      border-radius: 5px;
      min-width: 19px;
      height: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      flex-shrink: 0
    }

    .tc-o.ok {
      background: var(--gr);
      border-color: var(--gr2);
      color: var(--gr2);
      font-weight: 700
    }

    .tc-show {
      background: var(--n);
      color: var(--g);
      border: none;
      border-radius: 8px;
      padding: 8px 15px;
      font-size: 11.5px;
      font-weight: 800;
      font-family: var(--fn);
      cursor: pointer;
      margin-top: 6px
    }

    .tc-why {
      background: rgba(212, 169, 69, .13);
      border-inline-start: 3px solid var(--g);
      border-radius: 8px;
      padding: 11px 13px;
      margin-top: 9px
    }

    .tc-why > b {
      display: block;
      font-size: 11.5px;
      color: var(--gt);
      margin-bottom: 4px
    }

    .tc-why div {
      font-size: 12.5px;
      color: var(--tx);
      line-height: 1.95
    }

    .tc-trap {
      background: var(--rd);
      border-radius: 10px;
      padding: 11px 14px
    }

    .tc-trap > b {
      display: block;
      font-size: 11.5px;
      color: var(--rd2);
      margin-bottom: 4px
    }

    .tc-trap div {
      font-size: 12px;
      color: var(--tx);
      line-height: 1.9
    }

    .tc-time {
      background: var(--bl);
      border-radius: 12px;
      padding: 13px 15px;
      font-size: 12.5px;
      color: var(--bl2);
      line-height: 1.85;
      margin-top: 13px
    }

    .gtabs {
      display: flex;
      gap: 8px;
      margin-bottom: 13px
    }

    .gt-b {
      flex: 1;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 11px;
      padding: 11px;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--mu);
      font-family: var(--fn);
      cursor: pointer
    }

    .gt-b.on {
      background: var(--n);
      color: var(--g);
      border-color: var(--n)
    }

    .rule-view-tab {
      flex: 1;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 11px;
      padding: 11px;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--mu);
      font-family: var(--fn);
      cursor: pointer
    }

    .rule-view-tab.active {
      background: var(--n);
      color: var(--g);
      border-color: var(--n)
    }

    details.deep {
      margin-top: 18px;
      border: 1.5px solid var(--bd);
      border-radius: 13px;
      overflow: hidden;
      background: var(--card)
    }

    details.deep>summary {
      list-style: none;
      padding: 13px 15px;
      font-size: 13px;
      font-weight: 800;
      color: var(--tx);
      cursor: pointer;
      background: var(--bg);
      user-select: none;
      display: flex;
      align-items: center;
      gap: 8px
    }

    details.deep>summary::-webkit-details-marker {
      display: none
    }

    details.deep>summary::after {
      content: "▾";
      margin-inline-start: auto;
      color: var(--mu);
      font-size: 12px
    }

    details.deep:not([open])>summary::after {
      content: "▸"
    }

    details.deep .deep-b {
      padding: 14px 15px
    }

    /* ── حارس: لا يظهر أي محتوى خارج صفحته النشطة ── */
    .page:not(.on) {
      display: none !important
    }

    .ssec:not(.on) {
      display: none !important
    }

    .rd-img {
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: 12px;
      padding: 9px;
      margin-bottom: 12px;
      text-align: center
    }

    .rd-img img {
      width: 100%;
      max-width: 560px;
      height: auto;
      border-radius: 7px;
      cursor: zoom-in;
      display: block;
      margin: 0 auto
    }

    .rd-imgh {
      font-size: 10.5px;
      color: var(--mu);
      margin-top: 6px;
      font-family: var(--fn)
    }

    .czoom {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .92);
      z-index: var(--z-drop);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 14px;
      overflow: auto
    }

    .czoom.on {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .czoom img {
      max-width: 100%;
      max-height: 82vh;
      border-radius: 9px;
      background: #fff
    }

    .czx {
      background: var(--g);
      color: #1a1200;
      border: none;
      border-radius: 10px;
      padding: 11px 24px;
      font-size: 13px;
      font-weight: 900;
      font-family: var(--fn);
      cursor: pointer
    }

    .vidbox {
      background: linear-gradient(135deg, #2a1458, #4a1f8a);
      border-radius: 13px;
      padding: 14px;
      margin-bottom: 14px
    }

    .vb-t {
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 10px
    }

    .vb-g {
      display: grid;
      gap: 7px
    }

    .vb-b {
      background: rgba(255, 255, 255, .13);
      border: 1.5px solid rgba(255, 255, 255, .22);
      border-radius: 10px;
      padding: 11px 13px;
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      font-family: var(--fn);
      cursor: pointer;
      text-align: right;
      display: flex;
      align-items: center;
      gap: 9px
    }

    .vb-b:active {
      background: rgba(255, 255, 255, .22)
    }

    .vb-i {
      background: #fff;
      color: #4a1f8a;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      flex-shrink: 0
    }

    .vmod {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .93);
      z-index: calc(var(--z-drop) + 20);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 12px
    }

    .vmod.on {
      display: flex
    }

    .vm-in {
      width: 100%;
      max-width: 760px
    }

    .vm-h {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px
    }

    .vm-h b {
      flex: 1;
      color: #fff;
      font-size: 14px;
      font-weight: 800
    }

    .vm-h button {
      background: rgba(255, 255, 255, .18);
      color: #fff;
      border: none;
      border-radius: 9px;
      padding: 8px 14px;
      font-size: 14px;
      cursor: pointer
    }

    .vm-in video {
      width: 100%;
      max-height: 72vh;
      border-radius: 11px;
      background: #000;
      display: block
    }

    .vm-n {
      color: rgba(255, 255, 255, .65);
      font-size: 11px;
      margin-top: 9px;
      text-align: center;
      font-family: var(--fn)
    }

    .svgwrap svg {
      display: block;
      width: 100%;
      height: auto
    }

    /* ═══════════ التكيّف مع الشاشات — كل ما يلي داخل min-width، فلا يمسّ الجوال إطلاقاً ═══════════ */

    /* ① آيباد عمودي — 640 إلى 1024 */
    @media (min-width:640px) {
      html {
        font-size: 17px
      }

      .ssec {
        padding: 18px 24px 10px
      }

      .inst-card {
        margin: 12px 24px 0
      }

      .subj-grid,
      .vgrid,
      .inst-body,
      .hnav {
        grid-template-columns: repeat(3, 1fr)
      }

      .rd-text,
      .rd-q,
      .rcard,
      .rule-block,
      .pcard,
      .qc,
      .gqc {
        max-width: 780px;
        margin-left: auto;
        margin-right: auto
      }

      .li-table,
      .rule-table {
        font-size: 13px
      }

      .rule-tw {
        overflow-x: auto
      }
    }

    /* ② آيباد أفقي وتابلت — 1024 إلى 1440 */
    @media (min-width:1024px) {
      .ssec {
        padding: 20px 28px 12px
      }

      .subj-grid,
      .vgrid,
      .inst-body,
      .hnav,
      .sgrid {
        grid-template-columns: repeat(4, 1fr)
      }

      .page {
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto
      }

      .rd-text,
      .rd-q,
      .rcard,
      .rule-block,
      .pcard,
      .qc,
      .gqc {
        max-width: 900px
      }

      #mcharts img,
      #r-charts img,
      .chart-block img,
      #exam-questions img {
        max-width: 720px;
        display: block;
        margin-left: auto;
        margin-right: auto
      }

      .chart-block svg,
      .ssec svg {
        max-width: 720px;
        height: auto
      }

      #navback {
        right: calc(50% - 590px + 14px) !important;
        bottom: 86px !important
      }

      /* شريط التنقّل: من شريط ملتصق بالحافة إلى شريط عائم موسّط — لا يُخفى لأنه التنقّل الوحيد */
      .tabs {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: auto;
        max-width: 940px;
        bottom: 16px;
        border-radius: 16px;
        border: 1.5px solid rgba(201, 168, 76, .3);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
        padding-bottom: 0
      }

      .stab,
      .tab {
        padding: 10px 18px
      }
    }

    /* ③ لابتوب — فوق 1440 */
    @media (min-width:1440px) {
      .page {
        max-width: 1100px
      }

      .tabs {
        max-width: 1000px
      }

      #navback {
        right: calc(50% - 550px + 14px) !important
      }
    }

    /* ══ الذهبي: لون هوية ولون نص ══
   #c9a84c على أبيض تباينه 2.29:1 — دون حدّ الوصولية بكثير، فكل
   نص ذهبي صغير على بطاقة بيضاء كان يُقرأ بجهد. فصلتُ اللونين:
   --g  يبقى لون الهوية للحدود والأيقونات والأسطح الداكنة،
   --gt لون النص على الأسطح الفاتحة (#8a6a00 ⇒ 5.07:1).
   والحاويات الداكنة أدناه تُعيد --gt إلى لون الهوية، فيرث
   كل ما بداخلها الذهبي اللامع بلا تعديل على كل عنصر. ══ */
    .toast,
    .topbar,
    .tabs,
    .subtabs,
    .hook,
    .sub-lock,
    .dy,
    .bundle,
    .hero,
    .sbadge,
    .rs-cta,
    .rs-shot,
    .rs-go,
    .inst-head,
    .ch-navy,
    .ch-teal,
    .ch-green,
    .li-table th,
    .rule-head,
    .rt-row.header,
    .grule,
    .phead,
    .chart-head,
    .tnum,
    .lghead,
    .dhead,
    .playbtn,
    .drivebtn.full,
    .spd.on,
    .cpbtn,
    .upd-card .uact,
    .rule-table th,
    .pl-card,
    .pl-step button,
    .rc-key,
    .rd-head,
    .hh,
    .fbar.on,
    .fbar button,
    .nextbar,
    .pp-audio,
    .pp-fin,
    .tc-hero,
    .tc-n,
    .tc-show,
    .gt-b.on,
    .vidbox,
    .tips-card .tips-head,
    .fab-x,
    .ct-btn.wa,
    .ct-btn.tg,
    #boot {
      --gt: var(--g);
    }

    /* ══ الملاءمة على الشاشات الكبيرة ══
   التطبيق مُصمَّم للجوال، وكان يمتد على سطح المكتب بلا حدّ: بطاقة
   بعرض ١٥٠٠ بكسل لأربعة أرقام، وسطر نص يعبر الشاشة كاملة. العين
   تفقد أوّل السطر قبل أن تبلغ آخره؛ المقروئية المريحة ٦٠–٨٠ حرفاً.
   فنحصر المحتوى في عمود واحد ونتركه في وسط الشاشة. ══ */
    /* ⚠️ المدى محصور عمداً حتى ١٠٢٣ — وهذا أصل عطل الملاءمة كلّه:
   الكتلة كُتبت بعد كتلتَي ١٠٢٤ و١٤٤٠ بتخصّص متساوٍ، و«الأخيرة تفوز»
   في CSS. فكانت min-width:760 تُلغي عمودَي ١١٨٠ و١١٠٠ المكتوبين
   فوقها، ويبقى العمود ٧٢٠px على كل شاشة فوق ٧٦٠ — أي ٥٣٪ من شاشة
   اللابتوب فارغ، وكل عمل الملاءمة في الإصدار ١١٠ ميّت لا أثر له. */
    @media (min-width: 760px) and (max-width: 1023.98px) {
      .page {
        max-width: 720px;
        margin-inline: auto;
      }

      .tabs {
        max-width: 480px;
        margin-inline: auto;
        border-radius: 18px 18px 0 0;
      }
    }

    @media (min-width: 1024px) {

      /* العمود يتّسع، والنص لا: سطر بعرض ١١٠٠px يفقد العين أوّله.
     بطاقة العرض تتبع الحدّ نفسه الذي تتبعه القراءة والقواعد. */
      .sub-lock .sl-demo,
      .sub-lock .sl-feat {
        max-width: 900px;
        margin-inline: auto
      }
    }

    /* ══ الشاشات العريضة: الصفحة القصيرة كانت تُخرج تخطيطاً مكسوراً ══
   على الجوال يملأ المحتوى الشاشة فلا يظهر الخلل. على اللابتوب تنتهي
   صفحة قصيرة (خطة · نصائح) عند ٣٢٠px، فيقع الفوتر الداكن في منتصف
   الشاشة شريطاً أسود معلّقاً وتحته بياض، ثم حشو الجسم الـ٩٦px يترك
   فجوة رابعة. والأزرار العائمة الثلاثة تتباعد على ١٥٣٦px فتُقرأ
   عناصر مبعثرة لا عنقوداً واحداً. كله داخل min-width — لم يتغيّر من
   عرض الجوال محرف واحد. */
    @media (min-width: 900px) {
      body {
        display: flex;
        flex-direction: column;
        min-height: 100svh;
        padding-bottom: 0;
      }

      /* width:100% لازم: الهوامش التلقائية (margin-inline:auto) داخل عمود
     مرن تُحوّل العنصر من «يملأ العرض» إلى «بقدر محتواه»، فينكمش
     العمود إلى عرض أضيق من الجوال. */
      /* الأزرار العائمة ترتفع ٢٤px وارتفاعها ~٤٠ — والحشوة ٩٦ لم تكن
     تكفي حين ينتهي المحتوى عندها، فتُحجب آخر بطاقة. */
      body>.page.on {
        flex: 1 0 auto;
        width: 100%;
        padding-bottom: 132px;
      }

      .sitebottom {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
      }

      #navback {
        left: calc(50% + 245px);
        right: auto;
        bottom: 24px;
      }

      #fabWrap {
        right: calc(50% + 245px);
        left: auto;
        bottom: 24px;
      }
    }

    /* الشريط السفلي عائم فوق المحتوى، وحشوة الصفحة كانت أقصر منه
   فيحجب آخر بطاقة في كل قسم.
   ⚠️ محصور تحت ٩٠٠: هذا السطر مكتوب بعد كتلة min-width:900px التي
   تُصفّره، وبتخصّص متساوٍ فالأخير يفوز — فكان يُعيد الحشو ٩٦px إلى
   الجسم، فيقف الفوتر ٩٦px فوق قاع الشاشة ويبقى الفراغ الذي عالجناه.
   فوق ٩٠٠ تتكفّل .page.on{padding-bottom:96px} بإبعاد المحتوى عن
   الشريط العائم، والجسم يبقى بلا حشو ليلتصق الفوتر بالقاع. */
    @media (max-width: 899.98px) {
      body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
      }

      body.has-navback {
        padding-bottom: calc(162px + env(safe-area-inset-bottom, 0px));
      }
    }

    /* ══ الملاءمة لكل ظرف وإضاءة وشاشة ══════════════════════════ */

    /* ① الإضاءة: من يفتح جواله على الوضع الليلي يجب أن يجد التطبيق
   ليلياً، لا أن يُبهَر بشاشة بيضاء ثم يبحث عن الإعداد. يُطبَّق
   على من لم يختر سمة بعد فقط — واختيار المستخدم يعلو دائماً. */
    @media (prefers-color-scheme: dark) {
      body:not([data-theme]):not([data-dark]) {
        --gt: #c9a84c;
        --bg: #06101e;
        --card: #0d1e35;
        --bd: #1a3050;
        --tx: #d4e4ff;
        --mu: #6b8bb4;
        --gr: #071d10;
        --rd: #1a0705;
        --bl: #07162a;
      }
    }

    /* من يطلب تبايناً أعلى من نظامه يجده بلا إعداد */
    @media (prefers-contrast: more) {
      body:not([data-theme]):not([data-dark]) {
        --mu: #4d5870;
        --bd: #9aa8c0;
      }
    }

    /* ② أهداف اللمس: الحدّ المتعارف عليه ٤٤ بكسل. كانت أزرار الشريط
   العلوي ٣٦ وزر إغلاق الطافي ٢٠، والإصبع لا يصيب ما دون ذلك
   على جوال يهتزّ في الحافلة. */
    .ibtn {
      width: 44px;
      height: 44px;
    }

    @media(max-width:400px) {
      .ibtn {
        width: 40px;
        height: 40px;
        font-size: 16px
      }
    }

    .fab-x {
      width: 32px;
      height: 32px;
    }

    .sl-cta button {
      min-height: 44px
    }

    .sl-ask {
      min-height: 44px
    }

    .tabs a,
    .tabs button {
      min-height: 44px
    }

    .dp-b {
      min-height: 40px
    }

    /* ③ الأيقونات: كانت ستة مقاسات (١١ · ١٥ · ١٨ · ٢١ · ٢٣ · ٢٤)
   تتفاوت بلا قاعدة فتبدو الصفحة غير مضبوطة. سلّم من ثلاثة. */
    .ico {
      width: 20px;
      height: 20px
    }

    .sec-title .ico,
    .sl-top .sl-ic .ico {
      width: 22px;
      height: 22px
    }

    .sl-feat li::before,
    .sl-demo .dh .ico,
    .sl-ask .ico,
    .mk-cell .ico {
      width: 16px;
      height: 16px
    }

    /* ④ النوافذ: كانت بلا حدّ ارتفاع ولا تمرير، فمحتواها الطويل
   يُقتطع على الشاشات القصيرة ولا سبيل لرؤية أسفله. */
    #dispPanel,
    #shrMod>div,
    .modal-box,
    .sub-modal {
      max-height: calc(100dvh - 88px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    #dispPanel {
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px))
    }

    /* ⑤ الشاشات الصغيرة جداً (٣٢٠ بكسل) */
    @media (max-width: 360px) {
      .sl-stats {
        grid-template-columns: repeat(2, 1fr)
      }

      .sl-price {
        flex-direction: column
      }

      .md-b span {
        font-size: 10px
      }
    }

    /* ⑥ الشاشات القصيرة أفقياً (جوال مائل) */
    @media (max-height: 480px) and (orientation: landscape) {
      .tabs {
        position: static;
        margin-top: 14px
      }

      body {
        padding-bottom: 16px
      }
    }

    /* «فاتح» صريحاً: القيم هي قيم :root نفسها، ووجود السمة على body
   وحده يمنع prefers-color-scheme من تبديلها عند غروب الشمس. */
    body[data-theme="light"] {
      --gt: #8a6a00
    }

    /* ══ الحركة لا تعمل إلا وهي مرئية ══
   حركتان لا تنتهيان: نبض الزر الطافي وشريط النتائج المتحرّك.
   كانتا تدوران والتطبيق في الخلفية وحتى والعنصر خارج الشاشة،
   فتُبقيان المُركِّب مستيقظاً وتستنزفان بطارية جوال يذاكر عليه
   صاحبه ساعتين. تتوقّفان الآن إذا غاب التبويب أو غاب العنصر. */
    body.is-hidden *,
    body.is-hidden *::before,
    body.is-hidden *::after {
      animation-play-state: paused !important;
    }

    .rs-track.off-view,
    .fab.main.off-view {
      animation-play-state: paused
    }

    /* ══ واجهة الزائر الأولى ══ */
    .vhero {
      margin: 0 14px 13px;
      padding: 20px 18px;
      border-radius: 16px;
      text-align: center;
      background: linear-gradient(160deg, #0a1628, #16305a 60%, #1a3a6b);
      border: 1.5px solid rgba(201, 168, 76, .4);
      --gt: var(--g)
    }

    .vh-badge {
      display: inline-block;
      font-family: var(--fn);
      font-size: 10.5px;
      font-weight: 800;
      color: var(--g);
      background: rgba(201, 168, 76, .14);
      border: 1px solid rgba(201, 168, 76, .35);
      border-radius: 20px;
      padding: 5px 13px
    }

    /* عنوانُ الصفحة الرئيسيّ. كان h2 والصفحة بلا h1 إطلاقاً — فلا
       هرمية للعين ولا دلالة لمحرّكات البحث، وأكبر عنوان فيها ١٦٫٥px.
       ومكانه هنا بعينه مقصود: الشريط كحليٌّ داكن، وهو الموضع الوحيد
       الذي يجوز فيه الذهبيّ الساطع (‎--gt: var(--g)‎ أعلاه) — تباينه
       على الكحليّ ٧٫٩٣ بينما هو ٢٫٢٩ على الأبيض. */
    .vhero h1 {
      font-family: var(--fn);
      font-size: 27px;
      font-weight: 900;
      color: #fff;
      line-height: 1.5;
      margin: 12px 0 8px
    }

    .vhero h1 em {
      font-style: normal;
      color: var(--g)
    }

    .vhero p {
      font-family: var(--fn);
      font-size: 12.5px;
      color: rgba(255, 255, 255, .76);
      line-height: 1.95;
      margin: 0 auto 13px;
      max-width: 44ch
    }

    .vhero p b {
      color: var(--g)
    }

    .vh-chips {
      display: flex;
      gap: 7px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 15px
    }

    .vh-chips span {
      font-family: var(--fn);
      font-size: 10.5px;
      font-weight: 700;
      color: rgba(255, 255, 255, .82);
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .13);
      border-radius: 18px;
      padding: 6px 12px
    }

    .vh-cta {
      display: flex;
      gap: 9px;
      justify-content: center;
      flex-wrap: wrap
    }

    .vh-cta button {
      min-height: 46px;
      border-radius: 24px;
      padding: 12px 20px;
      font-family: var(--fn);
      font-size: 13.5px;
      font-weight: 900;
      cursor: pointer;
      border: none
    }

    .vh-p {
      background: var(--g);
      color: #0a1628
    }

    .vh-s {
      background: transparent;
      border: 1.5px solid rgba(201, 168, 76, .55) !important;
      color: var(--g)
    }

    .vh-cta button:active {
      transform: scale(.985)
    }

    .vh-link {
      display: block;
      font-family: var(--fn);
      font-size: 11.5px;
      font-weight: 700;
      color: var(--g);
      text-decoration: underline;
      margin-top: 12px;
      opacity: .9
    }

    .vh-note {
      display: block;
      font-family: var(--fn);
      font-size: 10.5px;
      color: rgba(255, 255, 255, .5);
      margin-top: 11px
    }

    /* ══ الشرح المؤلَّف: التكنيك مطبَّقاً خطوةً خطوة ══ */
    .rsw-c {
      margin-bottom: 12px;
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 11px;
      overflow: hidden
    }

    .rsw-h {
      padding: 8px 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap
    }

    .rsw-h b {
      color: #fff;
      font-size: 12.5px;
      font-weight: 900;
      font-family: var(--fn)
    }

    .rsw-h em {
      background: rgba(255, 255, 255, .2);
      color: #fff;
      font-size: 10.5px;
      font-style: normal;
      padding: 2px 8px;
      border-radius: 8px;
      font-family: var(--fn)
    }

    .rsw-b {
      padding: 11px 13px
    }

    .rsw-q {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--tx);
      margin-bottom: 5px
    }

    .rsw-o {
      font-size: 12px;
      color: var(--mu);
      background: var(--bg);
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 7px 10px;
      margin-bottom: 9px;
      line-height: 1.9
    }

    .rsw-s {
      margin: 0 18px 9px 0;
      padding: 0
    }

    .rsw-s li {
      font-size: 12px;
      color: var(--tx);
      line-height: 1.9;
      margin-bottom: 4px
    }

    .rsw-s li b {
      color: var(--gt)
    }

    .rsw-ok,
    .rsw-warn,
    .rsw-tip {
      font-size: 12px;
      padding: 8px 11px;
      border-radius: 0 8px 8px 0;
      margin-bottom: 6px
    }

    .rsw-ok {
      background: #eafaf1;
      border-inline-start: 3px solid var(--gr2);
      color: #0b4a24;
      font-weight: 700
    }

    .rsw-warn {
      background: #fef9e7;
      border-inline-start: 3px solid var(--g);
      color: #7d5a0c
    }

    .rsw-tip {
      background: #eaf4fb;
      border-inline-start: 3px solid var(--bl2);
      color: var(--bl2)
    }

    .rsw-t {
      margin-top: 7px;
      background: var(--bg);
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 7px 10px
    }

    .rsw-t summary {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--mu);
      cursor: pointer;
      font-family: var(--fn)
    }

    .rsw-t p {
      font-size: 12px;
      color: var(--tx);
      line-height: 1.9;
      margin-top: 7px
    }

    .rsw-lead {
      font-size: 12px;
      color: var(--mu);
      font-family: var(--fn);
      margin-bottom: 11px;
      line-height: 1.9
    }

    /* تكنيكٌ منسوخٌ داخل خطوة الخطة — يُقرأ في مكانه لا في نافذة */
    .rs-inline {
      margin-top: 11px;
      padding: 12px;
      border-radius: 11px;
      background: var(--bg);
      border: 1px solid var(--bd)
      /* بلا max-height: المنسوخ ألفٌ وأربعمئة بكسل فأكثر، وحبسُه في
         ٦٢vh يُولّد شريط تمريرٍ داخل شريط الصفحة — والطالب في وضع
         إنقاذ يمرّر مرّةً واحدة لا مرّتين. */
    }

    .rs-inline .sec-title,
    .rs-inline .gback {
      display: none
    }

    @keyframes rsFlash {
      0% {
        box-shadow: 0 0 0 3px var(--g)
      }

      100% {
        box-shadow: 0 0 0 0 transparent
      }
    }

    @media(min-width:900px) {
      #g-index > div[onclick^="goToRule"] {
        display: inline-flex !important;
        width: calc(33.333% - 10px);
        vertical-align: top;
        margin-inline: 3px
      }
    }

    @media(min-width:1280px) {
      #g-index > div[onclick^="goToRule"] {
        width: calc(25% - 10px)
      }
    }

    @media(max-width:380px) {
      .vhero h1 {
        font-size: 22px
      }

      .vh-cta button {
        width: 100%
      }
    }

    /* ═══════════════════════════════════════════════════════════════
   STEPEXAM UI REDESIGN v1 — ترتيب وتنقل الواجهة فقط
   لا يغيّر IDs أو goPage أو منطق الاشتراك والمحتوى.
   ═══════════════════════════════════════════════════════════════ */
    @media (min-width: 901px) {
      body {
        padding-bottom: 0;
        padding-right: 92px;
        background: var(--bg);
      }

      .topbar {
        padding-right: 28px;
        padding-left: 28px;
        min-height: 64px;
        position: sticky;
        top: 0;
      }

      .topbar h1 {
        font-size: 18px;
      }

      .tbbtns {
        gap: 8px;
      }

      .page.on {
        max-width: 1180px;
        margin: 0 auto;
        padding: 20px 24px 90px;
      }

      .tabs {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 92px;
        height: 100vh;
        z-index: calc(var(--z-nav) + 50);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 74px 8px 16px;
        border-top: 0;
        border-left: 1px solid rgba(201, 168, 76, .18);
        box-shadow: -5px 0 24px rgba(0, 0, 0, .20);
        gap: 6px;
      }

      .tab {
        flex: 0 0 auto;
        width: 76px;
        min-height: 68px;
        padding: 9px 4px;
        border-radius: 14px;
        gap: 5px;
      }

      .tabi {
        width: 34px;
        height: 30px;
        font-size: 20px;
      }

      .tabl {
        font-size: 10px;
        color: rgba(255, 255, 255, .55);
        white-space: nowrap;
      }

      .tab.on {
        background: rgba(201, 168, 76, .12);
      }

      .tab.on::before {
        top: 12px;
        right: auto;
        left: 0;
        width: 3px;
        height: 44px;
        border-radius: 0 4px 4px 0;
      }

      .tab.on .tabi {
        transform: scale(1.08);
      }

      .tab.on .tabl {
        color: var(--gt);
      }

      .tab-special {
        margin-top: auto;
        background: linear-gradient(135deg, rgba(201, 168, 76, .18), rgba(201, 168, 76, .06));
        border: 1px solid rgba(201, 168, 76, .25);
      }

      .tab-special .tabl {
        color: var(--gt);
      }

      #navback {
        bottom: 24px !important;
        right: 112px !important;
      }

      .sitebottom {
        margin-right: -92px !important;
      }

      .hnav {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
      }

      .hnav a {
        min-height: 150px;
        padding: 18px 16px;
        border-radius: 18px;
        transition: transform .18s, box-shadow .18s, border-color .18s;
      }

      .hnav a:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh);
        border-color: rgba(201, 168, 76, .55);
      }

      .hnav a .hi {
        font-size: 28px;
        margin-bottom: 10px;
      }

      .hnav a b {
        font-size: 14px;
      }

      .hnav a span {
        font-size: 11px;
      }

      #pg-home>.sec-pad {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      #pg-home .sec-title {
        margin-top: 4px;
      }
    }

    @media (min-width: 901px) and (max-width: 1120px) {
      body {
        padding-right: 82px;
      }

      .tabs {
        width: 82px;
      }

      .tab {
        width: 66px;
      }

      .page.on {
        padding-inline: 18px;
      }

      .sitebottom {
        margin-right: -82px !important;
      }
    }

    @media (max-width: 900px) {
      .tabs {
        display: flex;
      }
    }

    /* توحيد الخانات والبطاقات في الصفحة الرئيسية */
    .home-card,
    .hnav a {
      position: relative;
      overflow: hidden;
    }

    .hnav a:after {
      content: '';
      position: absolute;
      inset: auto 0 0;
      height: 3px;
      background: linear-gradient(90deg, var(--g), var(--g2));
      opacity: .7;
      transform: scaleX(.35);
      transform-origin: center;
      transition: transform .2s;
    }

    .hnav a:hover:after {
      transform: scaleX(1);
    }

    /* تحسين عنوان الأقسام */
    .sec-title {
      font-weight: 900;
      letter-spacing: -.1px;
    }

    /* لا تغيّر سلوك النوافذ أو أزرار الصفحات */
    @media (prefers-reduced-motion: reduce) {
      .hnav a {
        transition: none
      }

      .hnav a:hover {
        transform: none
      }

      .hnav a:after {
        transition: none
      }
    }

    /* ══ إعادة تنظيم الواجهة — التنقل الجانبي للكمبيوتر ══ */
    .desktop-nav {
      display: none
    }

    .nav-overlay {
      display: none
    }

    @media (min-width:901px) {
      body {
        padding-bottom: 0;
        padding-right: 0
      }

      .tabs {
        display: none
      }

      .topbar {
        padding-right: 286px;
        padding-left: 22px;
        min-height: 64px
      }

      .topbar h1 {
        font-size: 18px
      }

      .topbar p {
        font-size: 10px
      }

      .desktop-nav {
        position: fixed;
        inset-block: 0;
        right: 0;
        width: 264px;
        z-index: calc(var(--z-nav) + 50);
        background: var(--n);
        border-left: 1px solid rgba(201, 168, 76, .22);
        box-shadow: -8px 0 28px rgba(0, 0, 0, .16);
        display: flex;
        flex-direction: column;
        padding: 18px 14px;
        overflow: auto
      }

      /* ══ العلامة: ثلاث درجات صاعدة ونقطةٌ في القمّة ══
       الشعار القديم كان حرف «س» في دائرةٍ رقيقة تختفي في المقاسات
       الصغيرة، ولا فكرة فيه. (المالك، ١٩ سبتمبر — اختار الدرَج.) */
    .mk {
      width: 26px;
      height: 26px;
      border-radius: 7px;
      vertical-align: -6px;
      margin-inline-end: 8px;
      color: var(--g, #c9a84c);
      flex: 0 0 auto
    }

    .desktop-nav .brand .mk {
      width: 30px;
      height: 30px;
      margin-bottom: 6px;
      vertical-align: middle
    }

    .mk-boot {
      width: 44px;
      height: 44px;
      display: block;
      margin: 0 auto 10px;
      vertical-align: middle
    }

    .desktop-nav .brand {
        padding: 8px 12px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        margin-bottom: 12px
      }

      .desktop-nav .brand strong {
        display: block;
        color: var(--gt);
        font-size: 18px;
        font-weight: 900
      }

      .desktop-nav .brand span {
        display: block;
        color: rgba(255, 255, 255, .42);
        font-size: 10px;
        margin-top: 4px
      }

      .desktop-nav .nav-section {
        font-size: 10px;
        color: rgba(255, 255, 255, .35);
        font-weight: 800;
        padding: 8px 10px 6px
      }

      .desktop-nav .dnav {
        width: 100%;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, .68);
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: right;
        padding: 11px 12px;
        border-radius: 11px;
        font-family: var(--fn);
        font-size: 12.5px;
        font-weight: 800;
        cursor: pointer;
        transition: .18s;
        margin: 2px 0
      }

      .desktop-nav .dnav:hover {
        background: rgba(255, 255, 255, .07);
        color: #fff
      }

      .desktop-nav .dnav.on {
        background: linear-gradient(90deg, rgba(201, 168, 76, .18), rgba(201, 168, 76, .06));
        color: var(--gt);
        box-shadow: inset -3px 0 0 var(--g)
      }

      .desktop-nav .dnav .nicon {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, .06);
        font-size: 16px;
        flex: 0 0 28px
      }

      .desktop-nav .dnav.on .nicon {
        background: rgba(201, 168, 76, .15)
      }

      .desktop-nav .nav-spacer {
        flex: 1;
        min-height: 12px
      }

      .desktop-nav .account {
        border-top: 1px solid rgba(255, 255, 255, .09);
        padding-top: 12px;
        margin-top: 10px
      }

      .desktop-nav .account .dnav {
        font-size: 11.5px;
        padding: 7px 10px;
        margin: 1px 0;
        border-radius: 9px
      }

      .desktop-nav .account .dnav .nicon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        font-size: 14px
      }

      .desktop-nav .acct-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 4px
      }

      /* بنود المسجَّل تُخفى عن الزائر، وبند الزائر عن المسجَّل —
         والصنف يضعه _syncTopButtons مع كل تغيّر في حال الحساب */
      .desktop-nav .acct-in {
        display: none
      }

      .desktop-nav.signed .acct-in {
        display: flex
      }

      .desktop-nav.signed .acct-guest {
        display: none
      }

      .desktop-nav:not(.has-wa) .acct-wa {
        display: none
      }

      .desktop-nav .acct-out {
        color: #f0a09a
      }

      main,
      .pages-wrap,
      .page {
        max-width: none
      }

      .page {
        margin-right: 264px;
        min-height: calc(100vh - 64px)
      }

      .sitebottom {
        margin-right: 264px
      }

      #siteFoot {
        margin-right: 0
      }
    }

    @media (max-width:900px) {
      .desktop-nav {
        display: none !important
      }
    }

/* ══════ stepexam-ui-v3 ══════ */
    /* STEP EXAM UI V3 — visual layer only; existing navigation/logic is preserved */
    :root {
      --sx-sidebar: 264px;
      --sx-radius: 18px;
      --sx-gap: 18px;
    }

    body {
      min-height: 100vh;
    }

    @media (min-width: 1000px) {
      body {
        padding-left: var(--sx-sidebar);
        box-sizing: border-box;
      }

      body>nav,
      body>header {
        margin-left: 0;
      }

      /* Keep the existing page system intact while giving content a stable desktop canvas. */
      .page,
      main,
      #app,
      .container,
      .content {
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
      }

      .card,
      .stat-card,
      .feature-card,
      .module-card {
        border-radius: var(--sx-radius);
      }
    }

    @media (max-width: 999px) {
      body {
        padding-left: 0;
      }
    }

    /* Consistent card rhythm */
    .card,
    .feature-card,
    .module-card,
    .stat-card,
    .content-card {
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    @media (hover:hover) {

      .card:hover,
      .feature-card:hover,
      .module-card:hover,
      .stat-card:hover,
      .content-card:hover {
        transform: translateY(-2px);
      }
    }

    /* Navigation readability */
    nav a,
    nav button,
    .nav-link,
    .menu-item {
      min-height: 44px;
    }

    [aria-current="page"],
    .active,
    .nav-active {
      font-weight: 700;
    }

    /* Section headings */
    .page-title,
    .section-title,
    .page h1,
    .page h2 {
      letter-spacing: -.01em;
    }

    /* Better focus visibility without changing interaction logic */
    :where(a, button, input, select, textarea):focus-visible {
      outline: 3px solid currentColor;
      outline-offset: 3px;
    }

    /* Avoid horizontal overflow from wide tables/cards */
    img,
    video,
    iframe {
      max-width: 100%;
    }

    table {
      max-width: 100%;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }

/* ══════ stepexam-ui-v4 ══════ */
    /* STEP EXAM V4 — home/cards/internal navigation visual refinement */
    :root {
      --sx-max: 1440px;
      --sx-section-gap: clamp(20px, 3vw, 34px);
    }

    .sx-v4-home-grid,
    .sx-v4-module-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      width: 100%;
    }

    .sx-v4-section {
      width: min(100%, var(--sx-max));
      margin-inline: auto;
      padding-block: var(--sx-section-gap);
    }

    .sx-v4-card {
      min-height: 150px;
      border: 1px solid rgba(127, 127, 127, .18);
      border-radius: 20px;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      background: rgba(255, 255, 255, .035);
    }

    .sx-v4-card-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
    }

    .sx-v4-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      opacity: .82;
      font-size: .92em;
    }

    .sx-v4-card-action {
      align-self: flex-start;
      min-height: 42px;
      padding: 9px 14px;
      border-radius: 12px;
      font-weight: 700;
    }

    .sx-v4-subnav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-block: 14px 20px;
    }

    .sx-v4-subnav>* {
      min-height: 40px;
      border-radius: 11px;
    }

    .sx-v4-page-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }

    .sx-v4-page-head> :last-child {
      flex: 0 0 auto;
    }

    @media (max-width:1100px) {

      .sx-v4-home-grid,
      .sx-v4-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width:700px) {

      .sx-v4-home-grid,
      .sx-v4-module-grid {
        grid-template-columns: 1fr;
      }

      .sx-v4-page-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .sx-v4-card {
        min-height: 132px;
        padding: 17px;
        border-radius: 16px;
      }
    }

    @media (prefers-color-scheme:dark) {
      .sx-v4-card {
        background: rgba(255, 255, 255, .025);
      }
    }

/* ══════ stepexam-layout-v5 ══════ */
    /* V5: desktop sidebar/content collision fix */
    @media (min-width: 1000px) {
      :root {
        /* كان ٣٣٠ والشريط عرضه ٢٦٤ فعلياً — ٦٦px فراغ ظاهر بين
       المحتوى والشريط. القيمة تطابق العرض الحقيقي الآن. */
        --sx-sidebar-width: 264px;
      }

      /* The sidebar remains visually on the right, but the document reserves its width. */
      body {
        padding-left: 0 !important;
        padding-right: var(--sx-sidebar-width) !important;
        box-sizing: border-box;
        overflow-x: clip;
      }

      /* Common fixed/sticky right navigation containers */
      body>nav,
      body>header,
      .sidebar,
      #sidebar,
      .side-nav,
      .admin-sidebar,
      .app-sidebar {
        box-sizing: border-box;
      }

      /* Keep the main content inside the remaining viewport. */
      main,
      #app,
      #root,
      .content,
      .main-content,
      .page-content,
      .container {
        max-width: 100% !important;
        box-sizing: border-box;
      }

      /* Avoid cards/grids being wider than the available content area. */
      .grid,
      .cards,
      .card-grid,
      .features,
      .modules-grid,
      .content-grid {
        min-width: 0;
        max-width: 100%;
      }

      img,
      video,
      iframe,
      table {
        max-width: 100%;
      }
    }

    /* Mobile/tablet: no reserved desktop sidebar width. */
    @media (max-width: 999px) {
      body {
        padding-right: 0 !important;
        padding-left: 0 !important;
        /* كانت hidden فتُبطل التصاق شريط التبويبات دون ١٠٠٠px —
       وهو المدى الذي يقع فيه كل هاتف. clip تقصّ بلا أن تكسر. */
        overflow-x: clip;
      }
    }

    /* The desktop nav should not cover content even when fixed/sticky. */
    @media (min-width: 1000px) {

      [style*="position: fixed"][style*="right: 0"],
      [style*="position:fixed"][style*="right:0"] {
        max-width: var(--sx-sidebar-width);
      }
    }

    /* ══════════════════════════════════════════════════════════
   حسم تنازع التخطيط — آخر كتلة، فتغلب ما قبلها
   تراكمت ثلاث طبقات (ui-v3 · layout-v5 · الملاءمة) وكلٌّ يضبط
   حشوة الجسم بقيمة مختلفة وعند حدّ مختلف: ٩٢px عند ٩٠١ و٢٦٤ عند
   ١٠٠٠ و padding-left عند ١٠٠٠ أيضاً. فوقع الجوال بينها فانزاح
   المحتوى وانقصّ الشريطان.
   القاعدة الواحدة: الحشوة تساوي عرض الشريط الجانبي، وتظهر معه
   وتختفي معه — بلا استثناء.
   ══════════════════════════════════════════════════════════ */
    :root {
      --dnav-w: 264px;
    }

    /* ① دون ٩٠١px: لا شريط جانبي ⇒ لا حشوة جانبية إطلاقاً */
    @media (max-width: 900.98px) {
      body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: block !important;
        max-width: 100% !important;
      }

      .topbar {
        padding-left: 14px !important;
        padding-right: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
      }

      .topbar>* {
        max-width: none !important;
        margin-inline: 0 !important;
      }

      .tabs {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        margin-inline: 0 !important;
        border-radius: 0 !important;
        bottom: 0 !important;
      }

      .page {
        max-width: 100% !important;
        margin-inline: 0 !important;
      }

      .desktop-nav {
        display: none !important;
      }
    }

    /* ② فوق ٩٠١px: الحشوة = عرض الشريط بالضبط، لا أقلّ ولا أكثر */
    @media (min-width: 901px) {
      body {
        padding-left: 0 !important;
        padding-right: var(--dnav-w) !important;
        box-sizing: border-box;
      }

      .desktop-nav {
        width: var(--dnav-w) !important;
      }

      .topbar {
        padding-right: 28px !important;
        padding-left: 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        min-height: 56px !important;
      }

      .topbar>* {
        max-width: none !important;
        margin-inline: 0 !important;
      }
    }

    /* ══ أربع تحسينات للّمس والشاشة ══
   مأخوذة من مراجعة خارجية، لكن بأصناف المشروع الحقيقية لا بأصناف
   مفترَضة. ولم أنقل منها overflow-x:hidden لأنّها تُبطل التصاق
   شريط التبويبات — وهو العطل الذي أُصلح في الإصدار ٢٠٣. */

    /* ① تأخير ٣٠٠ms عند اللمس — يجعل الضغط فورياً */
    button,
    a,
    input,
    select,
    textarea,
    .tab,
    .stab,
    .ibtn,
    .dnav,
    .gdx,
    .lk-i,
    .faq-q,
    .tst-card,
    .goal-b {
      touch-action: manipulation;
    }

    /* ② iOS يكبّر الخطّ تلقائياً عند تدوير الشاشة فيكسر التخطيط */
    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    /* ③ صورة أو رسم أعرض من حاويته يفتح تمريراً أفقياً */
    img,
    svg,
    video,
    iframe,
    canvas,
    table {
      max-width: 100%;
    }

    .rd-img img,
    .svgwrap svg {
      height: auto;
    }

    /* ④ الشقّ العلوي والشريط السفلي في الهواتف الحديثة */
    @supports (padding: env(safe-area-inset-top)) {
      .topbar {
        padding-top: calc(6px + env(safe-area-inset-top));
        padding-inline-start: calc(14px + env(safe-area-inset-left));
        padding-inline-end: calc(14px + env(safe-area-inset-right));
      }

      .sitebottom {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
      }

      .tabs {
        padding-bottom: env(safe-area-inset-bottom);
      }
    }

    /* ══ الأزرار العائمة على سطح المكتب ══
   كانت تطفو فوق البطاقات في منتصف الصفحة فتحجب ما تحتها مهما
   زدنا حشوة القاع. الشريط الجانبي فيه فراغ رأسي واسع — ننقلها
   إليه فلا تلامس المحتوى إطلاقاً. */
    @media (min-width: 901px) {
      #navback {
        left: auto !important;
        right: 0 !important;
        width: var(--dnav-w) !important;
        bottom: 12px !important;
        justify-content: center !important;
        padding-inline: 12px;
        box-sizing: border-box;
      }

      /* ما تحت «رجوع» لا يُحجب: قاع الشريط محجوزٌ له، والشريط يُمرَّر
         إن ضاقت الشاشة عن بنوده */
      .desktop-nav {
        padding-bottom: 60px !important;
      }

      /* الدردشة وواتساب صارتا بندين في مجموعة «الحساب» — والفقاعتان
         كانتا تقعان فوق تلك المجموعة نفسها. الجوّال لم يتغيّر. */
      #fabWrap,
      #chFab {
        display: none !important;
      }

      #chPanel {
        inset-inline-start: calc(var(--dnav-w) + 16px) !important;
        inset-block-end: 16px !important;
      }

      /* لم تعد تحجب شيئاً، فلا داعي لحشوة القاع الكبيرة */
      body>.page.on {
        padding-bottom: 48px !important;
      }
    }

    /* ── شريط تبويب واحد بفواصل بين الأزرار (قسم القراءة) ── */
    .subtabs.onebar {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 0;
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 4px;
      scroll-snap-type: x proximity;
      /* بدايةُ الصفّ لا وسطه (v483): الأب .subtabs يوسّط (justify-content:center)،
         والصفّ المتوسَّط إذا فاض عن الشاشة يفيض من الطرفين — وطرف البداية لا
         يُبلغ بالتمرير. فكان «الفهرس» و«أهم ٨٠» خارج الشاشة على الجوال بلا طريق. */
      justify-content: flex-start
    }

    /* والوسط يُستعاد بهوامش تلقائيّة: تتوسّط إن اتّسع الصفّ، وتنكمش إلى صفر إن
       فاض — فلا يُحبس طرف البداية كما يحبسه justify-content:center */
    .subtabs.onebar>.stab:first-child {
      margin-inline-start: auto
    }

    .subtabs.onebar>.stab:last-child {
      margin-inline-end: auto
    }

    .subtabs.onebar::-webkit-scrollbar {
      display: none
    }

    .subtabs.onebar>.stab {
      flex: 0 0 auto;
      border: 0 !important;
      background: transparent !important;
      border-radius: 8px;
      margin: 0;
      padding: 8px 12px;
      white-space: nowrap;
      scroll-snap-align: start;
      position: relative;
      min-height: 40px
    }

    .subtabs.onebar>.stab+.stab::before {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      top: 22%;
      height: 56%;
      width: 1px;
      background: var(--bd)
    }

    .subtabs.onebar>.stab {
      color: var(--mu) !important
    }

    .subtabs.onebar>.stab:hover {
      background: rgba(0, 0, 0, .04) !important;
      color: var(--tx) !important
    }

    .subtabs.onebar>.stab.on {
      background: var(--tx) !important;
      color: var(--card) !important
    }

    .subtabs.onebar>.stab.on::before,
    .subtabs.onebar>.stab.on+.stab::before {
      opacity: 0
    }

    @media(max-width:600px) {
      .subtabs.onebar>.stab {
        padding: 8px 10px;
        font-size: 12px
      }
    }

    /* ══════════════════════════════════════════════════════════════
   Responsive Audit — إصلاحات موجّهة (لا تغيّر منطقاً ولا بيانات)
   خمسة breakpoints منطقية، وأهداف لمس ≥٤٤px، ومنع الفيض الأفقي.
   ══════════════════════════════════════════════════════════════ */

    /* ① أهداف اللمس — المعيار ٤٤×٤٤ (WCAG 2.5.5 / HIG).
   نوسّع منطقة اللمس بعنصر زائف لا بالحجم المرئي، فلا يتغيّر الشكل. */
    .ibtn,
    .tabi,
    .stab,
    .gback,
    .ob {
      position: relative;
    }

    .ibtn::after,
    .tabi::after,
    .gback::after {
      content: "";
      position: absolute;
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%);
      width: max(100%, 44px);
      height: max(100%, 44px);
    }

    .stab {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .subtabs.onebar>.stab {
      min-height: 44px;
    }

    .tab {
      min-height: 48px;
    }

    .ob {
      min-height: 44px;
    }

    /* ② منع الفيض الأفقي — أي عنصر عريض يُقصّ لا يمدّ الصفحة */
    img,
    video,
    svg,
    canvas,
    iframe,
    table {
      max-width: 100%;
      height: auto;
    }

    pre,
    code {
      overflow-x: auto;
      max-width: 100%;
    }

    .pbody p,
    .qstem,
    .obt,
    .sec-title,
    h1,
    h2,
    h3,
    h4 {
      overflow-wrap: anywhere;
      word-break: normal;
    }

    /* ③ الجداول تُمرَّر أفقياً داخل حاويتها بدل أن تمدّ الصفحة */
    .tbl-wrap,
    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
    }

    /* ④ النوافذ المنبثقة لا تتجاوز الشاشة أبداً */
    .nx-modal>*,
    #packMod>*,
    .vmod>*,
    .czoom>* {
      max-width: min(96vw, 720px);
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
    }

    /* ⑤ أصغر الشاشات (≤360px) — بطاقات الشهادات كانت ٢٣٠px ثابتة */
    @media (max-width:360px) {
      .tst-card {
        width: min(230px, 78vw);
      }

      .inst-body {
        grid-template-columns: 1fr;
      }
    }

    /* ⑥ الوضع الأفقي القصير — لا تبتلع الأشرطة الشاشة */
    @media (max-height:460px) and (orientation:landscape) {
      body {
        padding-bottom: calc(var(--bnav-h, 62px) * .8);
      }

      .nx-modal>*,
      #packMod>* {
        max-height: calc(100dvh - 12px);
      }
    }

    /* ⑦ حدّ أدنى للخط عند التكبير — لا نصّ أصغر من ١٠px فعلياً */
    @media (max-width:480px) {

      .tst-q,
      .fb-l,
      .blbl {
        font-size: max(10.5px, .72rem);
      }
    }

    /* الشريط الموحّد في الوضع الليلي — النصّ يتبع لون الثيم لا الأبيض الثابت */
    body[data-theme="dark"] .subtabs.onebar,
    body[data-theme="hc"] .subtabs.onebar {
      background: var(--card);
      border-color: var(--bd)
    }

    body[data-theme="dark"] .subtabs.onebar>.stab:hover {
      background: rgba(255, 255, 255, .06) !important
    }

/* ══════ mobile-fit-patch-v2 ══════ */
    @media (max-width:700px) {

      /* Keep the app's existing scrolling model intact. */
      img,
      video,
      canvas,
      svg {
        max-width: 100%
      }

      input,
      select,
      textarea {
        font-size: 16px
      }

      button,
      a,
      [role="button"] {
        touch-action: manipulation
      }

      .toast {
        max-width: calc(100vw - 24px);
        white-space: normal
      }
    }

    @media (max-width:480px) {

      /* Prevent controls/text from forcing a wider layout without disabling scroll. */
      .topbar h1 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
      }

      .tbbtns {
        min-width: 0
      }

      .tbbtns button,
      .topbar button {
        min-width: 40px;
        min-height: 40px
      }

      .modal,
      .dialog,
      [role="dialog"] {
        max-width: calc(100vw - 20px)
      }
    }

    @media (max-width:380px) {
      .topbar h1 {
        font-size: 13px !important
      }

      .tbbtns button,
      .topbar button {
        min-width: 38px;
        min-height: 38px
      }
    }

    @media (max-width:700px) and (orientation:landscape) {

      .modal,
      .dialog,
      [role="dialog"] {
        max-height: calc(100dvh - 16px);
        overflow: auto
      }
    }

    @media (min-width:701px) and (max-width:1100px) {

      .modal,
      .dialog,
      [role="dialog"] {
        max-width: min(94vw, 760px)
      }
    }

    /* ══ طبقة المرجع ══ */
    /* تُضاف في الآخر فتتغلّب بالترتيب لا بالحذف — وتُرفع بحذف
       كتلةٍ واحدة. والدرس: قصّ مدىً بين قاعدتين أتلف ٣٥٨٤ سطراً
       مرّةً، لأنّ المرساة تتكرّر في ملفّ اثنين وعشرين ألف سطر. */

    /* —— بطاقات الأقسام —— */
    .hnav-lead {
      font-size: 12.5px;
      color: var(--mu);
      line-height: 1.9;
      margin: -4px 0 14px
    }

    .hnav {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
      width: 100%;
      gap: 18px !important
    }

    .sc {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      cursor: pointer;
      border-radius: 16px;
      background: var(--card);
      border: 1px solid var(--bd);
      box-shadow: 0 2px 12px rgba(2, 8, 23, .06);
      transition: transform .16s ease, box-shadow .16s ease
    }

    .sc:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 32px rgba(2, 8, 23, .16)
    }

    .sc-h {
      position: relative;
      min-height: 126px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: #fff
    }

    .sc-ic {
      position: absolute;
      top: 14px;
      inset-inline-end: 14px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .22)
    }

    .sc-h b {
      font-size: 20px;
      font-weight: 900;
      line-height: 1.4
    }

    .sc-h i {
      font-style: normal;
      font-size: 12.5px;
      font-weight: 700;
      opacity: .85;
      direction: ltr
    }

    /* تدرّجات المرجع بأعيانها */
    .sc-blue .sc-h {
      background: linear-gradient(135deg, #3b82f6, #06b6d4)
    }

    .sc-pink .sc-h {
      background: linear-gradient(135deg, #ec4899, #a855f7)
    }

    .sc-green .sc-h {
      background: linear-gradient(135deg, #22c55e, #10b981)
    }

    .sc-amber .sc-h {
      background: linear-gradient(135deg, #f97316, #f59e0b)
    }

    .sc-violet .sc-h {
      background: linear-gradient(135deg, #6366f1, #8b5cf6)
    }

    .sc-sky .sc-h {
      background: linear-gradient(135deg, #0ea5e9, #2563eb)
    }

    .sc-red .sc-h {
      background: linear-gradient(135deg, #ef4444, #f97316)
    }

    .sc-indigo .sc-h {
      background: linear-gradient(135deg, #1e3a8a, #0ea5e9)
    }

    .sc-b {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px
    }

    .sc-b p {
      font-size: 13px;
      line-height: 1.95;
      color: var(--tx);
      margin: 0
    }

    .sc-n {
      font-size: 11.5px;
      color: var(--mu);
      line-height: 1.7
    }

    .sc-p {
      height: 6px;
      border-radius: 4px;
      overflow: hidden;
      background: var(--bd)
    }

    .sc-p i {
      display: block;
      height: 100%;
      background: var(--c-primary)
    }

    .sc-pt {
      font-size: 11px;
      color: var(--gt);
      font-weight: 800
    }

    .sc-go {
      margin-top: auto;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 800;
      padding: 11px 0;
      border: none;
      border-radius: 12px;
      color: #fff;
      background: var(--c-primary)
    }

    .sc-go:hover {
      filter: brightness(1.07)
    }

    /* —— ترتيب الرئيسيّة ——
       الكتل كانت مبعثرة: البيع آخرها والتواصل وسطها. والترتيب
       بـorder لا بنقل العناصر: لا يلمس البناء ولا يكسر مرجعاً.
       وكتلة البيع مخفيّة عن المشترك، فيبدأ هو بـ«تابع تدريبك»
       ويبدأ الزائر بالبطل. */
    #pg-home.on {
      display: flex;
      flex-direction: column
    }

    /* ⚠️ كانت هذه الخريطة على nth-child، فكسرها تحريرُ يدٍ واحد:
       نُقل شريطُ النصائح فصار الأبناء اثني عشر بعد ثلاثة عشر،
       فانزاحت الأرقام كلُّها ولم يبقَ لأحدٍ order:1 — فهبطت كتلةُ
       البطل والأسعار (٣٤٤٣px) إلى ٢٥٤٢ بكسل، بعد الأسئلة الشائعة،
       وسقط «ما هو ستيب». قِيس على الحيّ لا خمناً.
       فصارت على أسماءٍ في data-hs: يُنقل العنصر ويُدرج ويُحذف،
       ويبقى ترتيبُه هو هو. */
    /* الترتيب ترتيبُ المالك كما نشره بيده: يبدأ الزائر بالتدريب
       لا بالبيع — تابع تدريبك، ثمّ أقسام الاختبار، ثمّ الشواهد —
       وكتلةُ البطل والأسعار تحتها. قال عنها من قبل: «شوّهت الصفحة».
       فما ظننتُه انكساراً كان قصداً؛ وما انكسر حقّاً هو البناء
       وحده، وقد صُلّح: «ما هو ستيب» لم يعد يسقط، والشريط الأخضر
       أُغلق فلا يلفّ أربعة آلاف بكسل. */
    #pg-home>[data-hs="resume"]   { order: 1 }   /* تابع تدريبك */
    #pg-home>[data-hs="gap"]      { order: 2 }
    #pg-home>[data-hs="sections"] { order: 3 }   /* أقسام الاختبار */
    #pg-home>[data-hs="why"]      { order: 3 }   /* ليش الشامل — للزائر، بعد الأقسام بترتيب الترميز */
    #pg-home>[data-hs="daily"]    { order: 4 }   /* متكرر اليوم */
    #pg-home>[data-hs="results"]  { order: 5 }   /* تجارب الطلاب */
    #pg-home>[data-hs="cases"]    { order: 7 }   /* تجارب المشتركين */
    #pg-home>[data-hs="faq"]      { order: 8 }   /* الأسئلة الشائعة */
    #pg-home>[data-hs="tips"]     { order: 9 }   /* النصائح — حيث وضعها المالك */
    #pg-home>[data-hs="about"]    { order: 10 }  /* ما هو ستيب */
    #pg-home>[data-hs="landing"]  { order: 11 }  /* البطل والخطط */
    #pg-home>[data-hs="install"]  { order: 12 }  /* تثبيت التطبيق */
    #pg-home>[data-hs="contact"]  { order: 13 }  /* التواصل */

    /* التذييل آخرًا دائماً — أُخرج من كتلة الهبوط لأنّ
       order لا يُرتّب إلّا الإخوة، وكان حفيداً فظهر في الوسط. */
    #pg-home>.home-foot {
      order: 99;
      text-align: center;
      padding: 18px 0 6px;
      font-family: var(--fn);
      font-size: 11px;
      color: var(--mu);
      letter-spacing: .3px
    }

    #pg-home>.home-foot .home-foot-c {
      margin-top: 3px;
      font-size: 10.5px;
      opacity: .75
    }

    /* ══ خطة الإنقاذ — «وضع المهمّة» (v406) ══
       النظرة العامّة: صفوف مهمّات بزرّ بدء. ووضع المهمّة طبقةٌ تملأ الشاشة
       بشريطين ثابتين وشاشةٍ واحدة — كما اعتمده المالك من النموذج. */
    .rsx-hero { background: linear-gradient(140deg, #5a1410, #a8342a); border-radius: 16px; padding: 17px 17px 14px; color: #fff; margin-bottom: 12px }
    .rsx-hero.rsx-night { background: linear-gradient(140deg, #0b1f3a, #1f4f86) }
    .rsx-ht { font-size: 18px; font-weight: 900; margin-bottom: 5px }
    .rsx-hero p { font-size: 12.5px; line-height: 1.8; opacity: .92; margin: 0 0 11px }
    .rsx-prog { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .2); overflow: hidden }
    .rsx-prog i { display: block; height: 100%; background: var(--g); border-radius: 6px; transition: width .35s }
    .rsx-pm { font-size: 11.5px; margin-top: 7px; opacity: .92 }
    .rsx-when { background: var(--card); border: 1px solid var(--bd); border-radius: 13px; padding: 11px 12px; margin-bottom: 12px }
    .rsx-when>b { display: block; font-size: 13px; color: var(--tx); margin-bottom: 8px }
    .rsx-wopts { display: flex; flex-wrap: wrap; gap: 6px }
    .rsx-w { font-family: var(--fn); font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 20px; border: 1.5px solid var(--bd); background: var(--bg); color: var(--tx); cursor: pointer; min-height: 36px }
    .rsx-w.on { background: #a8342a; border-color: #a8342a; color: #fff }
    .rsx-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px }
    .rsx-day { flex: 0 0 auto; font-family: var(--fn); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 13px; border-radius: 12px; border: 1.5px solid var(--bd); background: var(--card); color: var(--tx); cursor: pointer; min-width: 74px }
    .rsx-day b { font-size: 12.5px }
    .rsx-day i { font-style: normal; font-size: 10.5px; color: var(--mu) }
    .rsx-day.on { border-color: #a8342a; box-shadow: inset 0 -3px 0 #a8342a }
    .rsx-day.full b { color: #1e8449 }
    .rsx-dh { font-size: 12px; font-weight: 800; color: var(--mu); margin: 2px 2px 8px }
    .rsx-start { width: 100%; font-family: var(--fn); font-size: 15px; font-weight: 900; padding: 13px; border-radius: 13px; border: 0; background: #1e8449; color: #fff; cursor: pointer; min-height: 52px; margin-bottom: 10px }
    .rsx-rows { display: grid; gap: 7px }
    .rsx-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 13px; border: 1.5px solid var(--bd); background: var(--card); color: var(--tx); font-family: var(--fn); text-align: right; cursor: pointer; min-height: 56px }
    .rsx-row.next { border-color: #a8342a }
    .rsx-row.done .rsx-tt b { color: var(--mu) }
    .rsx-n { flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 900; background: var(--bg); border: 1.5px solid var(--bd); color: var(--mu) }
    .rsx-row.next .rsx-n { background: #a8342a; border-color: #a8342a; color: #fff }
    .rsx-row.done .rsx-n { background: #1e8449; border-color: #1e8449; color: #fff }
    .rsx-i { font-size: 18px; flex: 0 0 auto }
    .rsx-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
    .rsx-tt b { font-size: 13.5px; line-height: 1.5 }
    .rsx-tt i { font-style: normal; font-size: 11px; color: var(--mu) }
    .rsx-sc { font-size: 11.5px; font-weight: 900; color: #1e8449 }
    .rsx-sc.low { color: #b03a2e }
    .rsx-note { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--tx); background: var(--card); border: 1px dashed var(--bd); border-radius: 12px; padding: 11px 13px }

    html.tm-lock, html.tm-lock body { overflow: hidden }
    /* [role=dialog] على الجوّال يُقصَر بعشرين بكسل — ووضع المهمّة يملأ الشاشة. */
    .tm[role="dialog"] { max-width: none; width: 100% }
    .tm { position: fixed; inset: 0; z-index: 10050; background: var(--bg); color: var(--tx); display: flex; flex-direction: column; font-family: var(--fn) }
    .tm-top { background: var(--card); border-bottom: 1px solid var(--bd); padding: 10px 16px 9px; flex: 0 0 auto }
    .tm-tr { display: flex; align-items: center; gap: 10px; max-width: 620px; margin: 0 auto }
    .tm-x { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--bd); background: var(--bg); color: var(--tx); font-size: 16px; cursor: pointer; flex: 0 0 auto }
    .tm-tt { flex: 1; min-width: 0 }
    .tm-tt b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .tm-tt i { font-style: normal; font-size: 11.5px; color: var(--mu) }
    .tm-timer { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 13px; padding: 7px 10px; border-radius: 9px; background: var(--bg); border: 1px solid var(--bd); min-width: 62px; text-align: center }
    .tm-timer.late { color: #b03a2e; border-color: #b03a2e }
    .tm-seg { display: flex; gap: 4px; margin: 9px auto 0; max-width: 620px }
    .tm-seg span { flex: 1; height: 5px; border-radius: 4px; background: var(--bd) }
    .tm-seg span.done { background: #1e8449 }
    .tm-seg span.cur { background: var(--g) }
    .tm-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 24px }
    /* !important: .tm-h و.tm-lead و.tm-hint تضبط margin كاملاً فتُلغي التوسيط —
       فظهر العنوان على حافّة الشاشة العريضة والمحتوى في وسطها (كروم، ١٧ سبتمبر). */
    .tm-body>* { max-width: 620px; margin-left: auto !important; margin-right: auto !important }
    .tm-kick { font-size: 12px; font-weight: 800; color: var(--gt); margin-bottom: 4px }
    .tm-h { font-size: 20px; margin: 0 0 6px; line-height: 1.5; color: var(--tx) }
    .tm-lead { font-size: 13px; color: var(--mu); line-height: 1.8; margin: 0 0 14px }
    .tm-hint { font-size: 12.5px; color: var(--mu); line-height: 1.8; margin: 10px 2px }
    .tm-card { display: block; background: var(--card); border: 1px solid var(--bd); border-radius: 14px; padding: 14px; margin-bottom: 12px }
    .tm-qn { font-size: 12px; color: var(--mu); font-weight: 700; margin-bottom: 6px }
    .tm-stem { font-size: 15.5px; line-height: 1.7; font-weight: 700; margin-bottom: 12px; text-align: left }
    .tm-ctx { font-size: 13.5px; line-height: 1.8; background: var(--bg); border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; text-align: left }
    .tm-pre { font-size: 14px; line-height: 1.9; text-align: left }
    .tm-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; direction: ltr; padding: 12px; margin-bottom: 8px; border-radius: 11px; border: 1.5px solid var(--bd); background: var(--bg); color: var(--tx); font: 600 14.5px var(--fn); cursor: pointer; min-height: 48px }
    .tm-l { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--bd); font-weight: 900; font-size: 12px; flex: 0 0 auto }
    .tm-opt.ok { border-color: #1e8449; background: rgba(30, 132, 73, .1) }
    .tm-opt.no { border-color: #b03a2e; background: rgba(176, 58, 46, .08) }
    .tm-opt:disabled { cursor: default; opacity: 1 }
    .tm-why { font-size: 13px; line-height: 1.85; border-radius: 11px; padding: 10px 12px; margin-top: 4px }
    .tm-why.ok { background: rgba(30, 132, 73, .1) }
    .tm-why.no { background: rgba(176, 58, 46, .08) }
    .tm-key { background: #2b1d0e; color: #fff; border-radius: 14px; padding: 13px 14px; margin-bottom: 12px; font-size: 14px; line-height: 1.8 }
    .tm-key b { display: block; color: var(--g); font-size: 12px; margin-bottom: 2px }
    .tm-signs, .tm-steps { margin: 0; padding: 0 20px 0 0; font-size: 13.5px; line-height: 2 }
    .tm-case {
      border-inline-start: 3px solid var(--g);
      padding: 6px 10px;
      margin-bottom: 8px;
      background: var(--bg);
      border-radius: 0 8px 8px 0
    }

    .tm-case b { display: block; font-size: 12.5px; margin-bottom: 2px }

    .tm-case span { font-size: 11.5px; line-height: 1.85; color: var(--mu) }

    .tm-trap { background: rgba(176, 58, 46, .08); border-radius: 11px; padding: 10px 12px; font-size: 13px; line-height: 1.8; margin-top: 10px }
    .tm-type { border-right: 4px solid var(--g) }
    .tm-type h3 { margin: 0 0 4px; font-size: 15px }
    .tm-type p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.85 }
    .tm-ex { text-align: left; font-size: 14px; line-height: 1.8 }
    .tm-text { text-align: left; font-size: 14.5px; line-height: 1.9 }
    .tm-text p { margin: 0 0 10px }
    .tm-fold summary { cursor: pointer; font-weight: 800; font-size: 13px }
    .tm-fold[open] summary { margin-bottom: 10px }
    .tm-chart b { display: block; font-size: 13.5px; margin-bottom: 8px }
    .tm-chart img { width: 100%; height: auto; border-radius: 10px; background: #fff; cursor: zoom-in; margin-bottom: 6px }
    .tm-voc { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--bd); font-size: 13.5px }
    .tm-voc:last-child { border-bottom: 0 }
    .tm-voc span { color: var(--mu); text-align: left }
    .tm-play { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; border-radius: 14px; border: 0; background: #a8342a; color: #fff; font: 800 16px var(--fn); cursor: pointer; min-height: 56px }
    /* زرّ «ترجمة السؤال» وحده (v508) — الصنف نفسه اسمُ صفّ الشريط العلويّ، فكان هذا يُزيحه
       عن الوسط ويُبهته (✕ في الطرف والمؤقّت وسط الشاشة) */
    .tm-mini.tm-tr {
      margin-inline-start: 0;
      opacity: .9
    }

    .tm-trbox {
      background: var(--bg);
      border-inline-start: 3px solid var(--g);
      border-radius: 0 9px 9px 0;
      padding: 8px 11px;
      margin: 8px 0
    }

    .tm-mini { display: block; margin: 0 auto 10px; padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--bd); background: var(--card); color: var(--tx); font: 800 13px var(--fn); cursor: pointer; min-height: 40px }
    .tm-dots { display: flex; gap: 6px; justify-content: center; margin: 2px 0 12px }
    .tm-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--bd) }
    .tm-dots span.on { background: var(--g) }
    .tm-dots span.ok { background: #1e8449 }
    .tm-dots span.no { background: #b03a2e }
    .tm-score { text-align: center; padding: 14px 10px 4px }
    .tm-ring { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; background: conic-gradient(#1e8449 calc(var(--p) * 1%), var(--bd) 0) }
    .tm-ring i { width: 96px; height: 96px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-style: normal }
    .tm-btn { display: block; width: 100%; padding: 13px; border-radius: 12px; font: 800 14.5px var(--fn); cursor: pointer; min-height: 50px; border: 1.5px solid var(--bd); background: var(--card); color: var(--tx); margin-top: 8px }
    /* الأخضر خرج عن هويّة الدليل: الفعل الرئيسيّ ذهبيٌّ في الصفحات كلّها
       (المالك، ١٩ سبتمبر — «ايش الفرق بين التنسيقين»). */
    .tm-btn.pri { background: var(--g); border-color: var(--g); color: #1a1200 }
    .tm-bot { flex: 0 0 auto; display: flex; gap: 8px; background: var(--card); border-top: 1px solid var(--bd); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) }
    .tm-nav { flex: 1; padding: 13px; border-radius: 12px; font: 800 15px var(--fn); cursor: pointer; min-height: 50px; border: 1.5px solid var(--bd); background: var(--bg); color: var(--tx) }
    .tm-next { flex: 2; background: var(--g); border-color: var(--g); color: #1a1200; font-weight: 900 }
    .tm-nav:disabled { opacity: .45; cursor: default }

    /* «خطتي» بوضع المهمّة (v407): التهيئة فوق الأيّام، وعلامة إنجاز كلّ بلورة. */
    .plan-prep { background: var(--card); border: 1.5px solid var(--g); border-radius: 14px; padding: 12px; margin: 12px 0 }
    .plan-prep .pp-head { margin-bottom: 8px; font-family: var(--fn) }
    .plan-prep .pp-head b { display: block; font-size: 14.5px; color: var(--tx) }
    .plan-prep .pp-head span { display: block; font-size: 12px; color: var(--mu); line-height: 1.7 }
    .plan-bub.bub-done .plan-bub-h b { color: var(--mu) }
    .pb-arrow.pb-ok { color: #1e8449; font-weight: 900 }
    .pb-arrow.pb-low { color: #b03a2e; font-weight: 900 }

    /* ══ الدردشة: الصور، ومحادثات المشرف على نسق تيليجرام (v408) ══ */
    .ch-foot .ch-att, .cha-foot .ch-att { display: flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--mu) }
    .ch-img { font-size: 12px; color: var(--mu); min-width: 140px }
    .ch-img img { display: block; max-width: 220px; max-height: 260px; width: auto; height: auto; border-radius: 10px; cursor: zoom-in }
    #chAdmFab { position: fixed; inset-block-end: 78px; inset-inline-start: 16px; z-index: calc(var(--z-toast) - 500); display: none; align-items: center; justify-content: center; width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer; color: #fff; background: #3390ec; box-shadow: 0 6px 22px rgba(51, 144, 236, .45) }
    /* على الحاسب خارجَ الشريط الجانبي: كانت تقف فوق مجموعة «الحساب» فيه —
       وهو سببُ إخفاء فقاعة المشترك القديمة هناك (v457). */
    @media (min-width: 901px) { #chAdmFab { inset-block-end: 22px; inset-inline-start: calc(var(--dnav-w) + 16px) } }
    .cha-badge { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e53935; color: #fff; font: 800 11px/20px var(--fn); text-align: center }
    #chAdm { position: fixed; inset: 3vh 3vw; z-index: calc(var(--z-toast) - 400); display: none; gap: 10px; padding: 10px; border-radius: 18px; background: linear-gradient(135deg, #cfd9a6, #7fb38a); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); font-family: var(--fn); max-width: 1200px; margin: 0 auto }
    /* مخفيّةٌ في الترميز نفسه — فلا تظهر عاريةً وسط الصفحة إن تأخّرت الأنماط. */
    #chAdm.on { display: flex !important }
    #chAdm[role="dialog"] { max-width: 1200px }
    .cha-list { flex: 0 0 340px; display: flex; flex-direction: column; background: var(--card); border-radius: 16px; overflow: hidden }
    .cha-lh { display: flex; align-items: center; gap: 8px; padding: 10px }
    .cha-lh input { flex: 1; min-width: 0; height: 42px; border-radius: 21px; border: 1px solid var(--bd); background: var(--bg); color: var(--tx); padding: 0 16px; font: 14px var(--fn) }
    .cha-ib { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--tx); font-size: 18px; cursor: pointer; flex: 0 0 auto }
    .cha-items { flex: 1; overflow-y: auto; padding: 0 6px 8px }
    .cha-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--tx); text-align: right; cursor: pointer; font-family: var(--fn); min-height: 64px }
    .cha-it:hover { background: var(--bg) }
    .cha-it.on { background: #3390ec; color: #fff }
    .cha-it.on .cha-tx i, .cha-it.on .cha-mt i { color: rgba(255, 255, 255, .85) }
    .cha-av { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; background: #65aadd }
    .cha-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
    .cha-tx b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .cha-tx i, .cha-mt i { font-style: normal; font-size: 12.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .cha-mt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto }
    .cha-mt em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #3390ec; color: #fff; font-size: 11px; line-height: 20px; text-align: center; font-weight: 800 }
    .cha-it.on .cha-mt em { background: #fff; color: #3390ec }
    .cha-mt u { text-decoration: none; font-size: 10.5px; color: var(--mu) }
    .cha-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px }
    .cha-th { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--card); border-radius: 26px }
    .cha-th .cha-av { flex-basis: 40px; width: 40px; height: 40px; font-size: 14px }
    .cha-who { flex: 1; min-width: 0 }
    .cha-who b { display: block; font-size: 15px; color: var(--tx) }
    .cha-who i { font-style: normal; font-size: 12px; color: var(--mu) }
    .cha-back { display: none }
    .cha-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 6px 4px }
    .cha-body .ch-b { max-width: 70%; background: var(--card); border: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, .12) }
    .cha-body .ch-me { background: #e3fee0 }
    .cha-foot[hidden] { display: none }
    .cha-foot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--card); border-radius: 26px }
    .cha-foot input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: var(--tx); font: 15px var(--fn); outline: none }
    .cha-foot button[type="submit"] { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #3390ec; color: #fff; font-size: 18px; cursor: pointer }
    @media (max-width: 760px) {
      #chAdm { inset: 0; border-radius: 0; padding: 0; gap: 0 }
      .cha-list { flex: 1; border-radius: 0 }
      .cha-thread { display: none; background: linear-gradient(135deg, #cfd9a6, #7fb38a); padding: 8px }
      #chAdm.in-thread .cha-list { display: none }
      #chAdm.in-thread .cha-thread { display: flex }
      .cha-back { display: block }
      .cha-body .ch-b { max-width: 85% }
    }

    /* ══ حسابي داخل الدليل · لوحتي على الرئيسية · قائمةٌ واحدة (v458) ══ */
    .acc-wrap { max-width: 780px; margin-inline: auto }
    .acc-card { padding: 15px 16px }
    .acc-h { font-size: 14.5px; font-weight: 900; color: var(--tx); margin-bottom: 4px }
    .acc-sub { font-size: 12px; color: var(--mu); line-height: 1.7; margin: 0 0 10px }
    .acc-ta { width: 100%; box-sizing: border-box; border: 1.5px solid var(--bd); border-radius: 10px; background: var(--bg); color: var(--tx); padding: 10px 12px; font: 13.5px/1.8 var(--fn); resize: vertical }
    .acc-save { min-height: 16px; font-size: 11.5px; color: var(--mu); margin-top: 4px }
    .acc-l { display: block; font-size: 12px; color: var(--mu); margin-bottom: 10px }
    .acc-l input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; height: 42px; border: 1.5px solid var(--bd); border-radius: 10px; background: var(--bg); color: var(--tx); padding: 0 12px; font: 14px var(--fn) }
    .acc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bd) }
    .acc-row:first-child { border-top: 0 }
    .acc-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
    .acc-rt b { font-size: 13.5px; color: var(--tx) }
    .acc-rt span { font-size: 11.5px; color: var(--mu) }
    .acc-x { flex: 0 0 auto; border: 1.5px solid var(--bd); background: var(--bg); color: #b03a2e; border-radius: 9px; padding: 7px 12px; font: 700 12px var(--fn); cursor: pointer }
    .acc-out { display: block; width: 100%; border: 1.5px solid rgba(176, 58, 46, .35); background: transparent; color: #b03a2e; border-radius: 10px; padding: 11px; font: 800 13px var(--fn); cursor: pointer }
    .acc-lock { font-size: 11.5px; color: var(--mu) }
    .hdash-top { display: flex; align-items: center; justify-content: space-between; gap: 10px }
    .hdash-who { min-width: 0; display: flex; flex-direction: column; gap: 3px }
    .hdash-who b { font-size: 16px; font-weight: 900 }
    .hdash-who span { font-size: 12px; opacity: .85 }
    .hdash-a { flex: 0 0 auto; border: 1px solid rgba(201, 168, 76, .55); background: rgba(201, 168, 76, .14); color: #fff; border-radius: 18px; padding: 8px 14px; font: 800 12px var(--fn); cursor: pointer }
    .hdash-w { border: 1px solid rgba(240, 160, 154, .5); color: #fff; cursor: pointer; font-family: var(--fn) }
    .hdash-w b { color: #f0a09a }
    /* على الحاسب الشريطُ الجانبيّ هو القائمة — و☰ يبقى للأدوات وحدها */
    @media (min-width: 901px) { .gm-p .gm-dup { display: none !important } }

    /* ══ اسأل الدعم من مكانه · بطاقة الترقية للمشترك (v460) ══ */
    .ask-l { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; border: 1px dashed rgba(51, 144, 236, .55); background: rgba(51, 144, 236, .07); color: #2b7bd0; border-radius: 16px; padding: 5px 12px; font: 700 11.5px var(--fn); cursor: pointer }
    .ask-l:hover { background: rgba(51, 144, 236, .14) }
    .rcard .ask-l { margin: 8px 0 2px }
    .hdash-s { display: block; width: 100%; margin-top: 12px; border: 1px dashed rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); color: #fff; border-radius: 12px; padding: 9px 12px; font: 700 12px var(--fn); cursor: pointer; text-align: center }
    .sl-up h4 { font-size: 15px; margin-bottom: 6px }
    .sl-up p { font-size: 13px; line-height: 1.8; color: var(--mu); margin: 0 0 12px }

    /* صفحةُ الاشتراك داخل «حسابي» — ارتفاعُها من الصفحة نفسها (postMessage) (v461) */
    .acc-frame { display: block; width: 100%; height: 900px; border: 0; margin-top: 8px; border-radius: 10px; background: transparent }

    /* ══ حالُ المهمّة في «خطتي» (v461): واصل · تمّ وراجع · أعِدها ══ */
    .plan-bub.bub-done { opacity: .62 }
    .plan-bub.bub-done:hover { opacity: .9 }
    .plan-bub.bub-low { border-color: rgba(176, 58, 46, .45) !important; background: rgba(176, 58, 46, .04) }
    .plan-bub.bub-next { border-color: var(--g) !important; box-shadow: 0 0 0 2px rgba(201, 168, 76, .28) }
    .pb-arrow { white-space: nowrap; font-size: 11.5px }
    .pb-arrow.pb-next { color: #1a1200; background: var(--g); border-radius: 12px; padding: 3px 10px; font-weight: 900 }

    /* ══ خطّة الإنقاذ مستقلّة وبالترتيب (v462) ══ */
    .rsx-wl { font-size: 12.5px; color: var(--mu); margin: 4px 0 10px }
    .rsx-chosen { display: flex; align-items: center; justify-content: space-between; gap: 10px }
    .rsx-chg { border: 1px solid var(--bd); background: var(--bg); color: var(--mu); border-radius: 14px; padding: 5px 12px; font: 700 11.5px var(--fn); cursor: pointer }
    .rsx-row.lock { opacity: .55; cursor: not-allowed }
    .rsx-day.lock { opacity: .45; cursor: not-allowed }
    /* مشتري الإنقاذ وحده: لا قوائمَ إلى أقسامٍ ليست له */
    body.rs-only .desktop-nav .dnav[data-page="listen"], body.rs-only .desktop-nav .dnav[data-page="reading"],
    body.rs-only .desktop-nav .dnav[data-page="grammar"], body.rs-only .desktop-nav .dnav[data-page="exam"],
    body.rs-only #dnavTips, body.rs-only #dnavPlan, body.rs-only #tab-listen, body.rs-only #tab-reading,
    body.rs-only #tab-grammar, body.rs-only #tab-exam, body.rs-only #tab-tips, body.rs-only .gm-p .gm-plan,
    body.rs-only .gm-p .gm-tips, body.rs-only #pg-home [data-hs="sections"] { display: none !important }

    /* ══ فهرس القواعد — من المجموعات نفسها (v463) ══ */
    .gix-head { background: linear-gradient(135deg, var(--n), var(--n3)); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; text-align: center; font-family: var(--fn) }
    .gix-head h3 { color: var(--gt); font-size: 16px; font-weight: 900; margin: 0 0 4px }
    .gix-head p { color: rgba(255, 255, 255, .7); font-size: 12px; margin: 0 }
    .gix-grp { font: 900 13px var(--fn); color: var(--tx); margin: 14px 2px 8px }
    .gix-row { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--bg); border: 1.5px solid var(--bd); border-radius: 11px; padding: 11px 13px; margin-bottom: 7px; cursor: pointer; text-align: right; font-family: var(--fn); color: var(--tx) }
    .gix-row:hover { border-color: var(--g) }
    .gix-ic { font-size: 20px; flex: 0 0 auto }
    .gix-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
    .gix-t b { font-size: 13.5px; font-weight: 900 }
    .gix-t i { font-style: normal; font-size: 11px; color: var(--mu); text-align: right }
    .gix-go { color: var(--gt); font-size: 16px }

    /* «مفتاح الحل» بشكلٍ واحد في كلّ القواعد — في البطاقة أو في الشرح (v463) */
    .rule-explain .rc-key-body { margin-bottom: 12px }

/* ══ القدرات — معاينة المشرف (v468 · v472) ══
   أنماطٌ مستقلّةٌ ببادئة qd- كي لا تمسّ شيئاً من ستيب. وخطُّ الصفحة كلّها
   خطُّ الدليل: كانت الأزرار والخيارات بخطّ المتصفّح الافتراضيّ فبدت
   حروفها متقطّعة (المالك على v471). */
#pg-qudurat, #pg-qudurat button { font-family: var(--fn) }
#pg-qudurat p { line-height: 1.9 }
.qd-pad { padding: 14px 16px }
.qd-h2 { margin: 0 0 6px; font-size: 19px }
.qd-h3 { margin: 16px 0 8px; font-size: 16px }
.qd-ul { margin: 4px 0 10px; padding-inline-start: 20px; font-size: 14.5px }
.qd-mu { color: var(--mu) }
.qd-sm { font-size: 12.5px }
.qd-note { margin: 0 0 8px; color: var(--gt); font-size: 12.5px }
.qd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.qd-card { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: start;
  padding: 10px 12px; cursor: pointer; border: 1px solid var(--bd); background: var(--card); color: var(--tx);
  font-size: 15px; width: 100% }
.qd-card:hover { border-color: var(--g) }
.qd-mix { margin-bottom: 4px; border-inline-start: 4px solid var(--g) }
.qd-btn { font: 700 14px var(--fn); padding: 7px 16px; border-radius: 10px; border: 1px solid var(--bd);
  background: var(--card); color: var(--tx); cursor: pointer }
.qd-btn:hover { border-color: var(--g) }
.qd-gold { background: var(--g); border-color: var(--g); color: #0d1830 }
.qd-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px }
.qd-hint { margin: 0 0 6px; color: var(--bl2); font-size: 13px; font-weight: 700 }
.qd-stem { margin: 0 0 6px; font-size: 16.5px; line-height: 2 }
.qd-blank { display: inline-block; min-width: 70px; border-bottom: 2px solid var(--g); margin: 0 4px; vertical-align: middle }
.qd-psg { margin-bottom: 10px; border-inline-start: 4px solid var(--g) }
.qd-psg p { margin: 6px 0; font-size: 15px }
.qd-tool { background: var(--bl); border-inline-start: 4px solid var(--bl2); padding: 6px 10px; border-radius: 8px; font-size: 14px }
.qd-ex { margin: 8px 0 12px }
.qd-ex summary { cursor: pointer; font-size: 14.5px }
.qd-ops { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px }
.qd-ops li { border: 1px solid var(--bd); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 15.5px; background: var(--card) }
.qd-ops li b { color: var(--mu); margin-inline-end: 6px }
.qd-ops li:hover { border-color: var(--g) }
.qd-ops li.ok { background: var(--gr); border-color: var(--gr2); font-weight: 700; cursor: default }
.qd-ops li.no { background: var(--rd); border-color: var(--rd2); cursor: default }
.qd-res { margin: 10px 0 2px; font-size: 15px; font-weight: 700 }
.qd-res.ok { color: var(--gr2) }
.qd-res.no { color: var(--rd2) }
.qd-why { margin: 4px 0 0; font-size: 14.5px; line-height: 1.9; background: var(--bl); border-radius: 8px; padding: 8px 10px }
.qd-why.ok { color: var(--gr2); background: var(--gr) }
.qd-intro { max-width: 640px; margin: 0 auto }
.qd-prog { height: 6px; background: var(--bd); border-radius: 4px; margin-bottom: 14px; overflow: hidden }
.qd-prog i { display: block; height: 100%; background: var(--g); border-radius: 4px }
.qd-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px }
.qd-opt { padding: 12px }
.qd-self { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--bd) }
.qd-gauge { margin: 14px 0 6px }
.qd-gbar { position: relative; height: 12px; border-radius: 8px; background: linear-gradient(to left, #e5484d, #f5a524 30%, #e3c53a 50%, #46a758 75%, #2e7bd6) }
.qd-gbar i { position: absolute; top: 50%; transform: translate(50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 4px solid var(--tx) }
.qd-gbar i b { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px }
.qd-gbar i.qd-gtg { width: 4px; height: 22px; border-radius: 2px; border: 0; background: var(--tx) }
.qd-gbar i.qd-gtg b { bottom: auto; top: 24px; font-weight: 400 }
.qd-gscale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--mu); margin-top: 26px }
.qd-plancard { border-inline-start: 4px solid var(--g) }
.qd-pcg { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 8px }
.qd-pc { background: var(--bg); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px }
.qd-ops.figs { grid-template-columns: 1fr 1fr }
.qd-ops.figs li { display: flex; align-items: center; gap: 4px; padding: 4px 8px }
.qd-ops.figs .qd-fig { max-width: 150px; margin: 0 auto }
.qd-ops li.sel { background: var(--bl); border-color: var(--bl2); font-weight: 700 }
.qd-clock { margin-inline-start: auto; font: 700 15px var(--fn); padding: 2px 10px; border-radius: 8px; background: var(--bl) }
.qd-clock.low { background: var(--rd); color: var(--rd2) }
.qd-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 }
.qd-lvbar { display: flex; gap: 4px; margin: 4px 0 }
.qd-lvbar i { display: block; width: 34px; height: 7px; border-radius: 4px; background: var(--bd) }
.qd-lvbar i.on { background: var(--g) }
.qd-img { display: block; max-width: min(100%, 420px); margin: 6px auto 10px; background: #fff; border-radius: 8px; padding: 4px }
.qd-fig { display: block; width: 100%; max-width: 380px; height: auto; margin: 6px auto 10px; color: var(--tx); font-family: var(--fn) }
.qd-tbl { border-collapse: collapse; margin: 8px 0; font-size: 14px }
.qd-tbl td, .qd-tbl th { border: 1px solid var(--bd); padding: 3px 10px; text-align: start }
.qd-tbl th { background: var(--bg) }

    /* ══ الاختبارات الشاملة (v484) ══ */
    #mockList:empty { display: none }
    .mx-head {
      background: linear-gradient(135deg, #0f2847, #1a3a5c);
      border: 1.5px solid var(--g);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 12px;
      color: #fff;
      font-family: var(--fn);
      text-align: center
    }
    .mx-head h3 { color: var(--g); font-size: 17px; margin: 0 0 6px }
    .mx-head p { font-size: 12.5px; line-height: 1.8; color: rgba(255, 255, 255, .78); margin: 0 0 8px }
    .mx-head .mx-sum { color: #fff; font-weight: 800 }
    .mx-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
      gap: 7px;
      margin-bottom: 18px
    }
    .mx-cell {
      background: var(--card);
      border: 1.5px solid var(--bd);
      border-radius: 11px;
      padding: 8px 2px 6px;
      font-family: var(--fn);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      color: var(--tx)
    }
    .mx-cell b { font-size: 15px; font-weight: 900 }
    .mx-cell i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--mu) }
    .mx-cell.nx { border-color: var(--g); box-shadow: 0 0 0 2px rgba(201, 168, 76, .25) }
    .mx-cell.lk { opacity: .55 }
    .mx-cell:focus-visible { outline: 2px solid var(--g); outline-offset: 2px }

    /* ══ رئيسيّة المشترك (v487) ══
       المالك: «هل فيه مشتّتات؟» — كانت ٤١١٣ بكسلاً: ثماني بطاقاتٍ ملوّنة كبيرة
       (٢٣٥٣) وأسئلةُ الزائر ونتائجُ المشتركين و«ما هو ستيب» ونصائحُ مجّانية.
       فالمشترك يرى «يومك» ثمّ الأقسام شبكةً مدمجةً بلونٍ واحد، والمقفلُ عليه قفل،
       وما كُتب للزائر لا يُعرض له. */
    body.is-sub #pg-home>[data-hs="faq"],
    body.is-sub #pg-home>[data-hs="results"],
    body.is-sub #pg-home>[data-hs="cases"],
    body.is-sub #pg-home>[data-hs="about"],
    body.is-sub #pg-home>[data-hs="tips"],
    body.is-sub #pg-home>[data-hs="why"] { display: none !important }
    body.is-sub .hnav-lead { display: none }
    /* أربع بطاقات: الاستماع · القراءة · القواعد · الاختبارات — بألوانها وباسمها
       عربيّاً وإنجليزيّاً، شبكةً ٢×٢ بلا وصفٍ ولا زرّ (البطاقة كلّها زرّ) */
    body.is-sub .hnav {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important
    }
    body.is-sub .hnav .sc { border-radius: 14px }
    body.is-sub .hnav .sc:hover { transform: none }
    body.is-sub .hnav .sc-h { min-height: 104px; padding: 12px }
    body.is-sub .hnav .sc-ic { width: 36px; height: 36px; font-size: 17px; top: 10px; inset-inline-end: 10px }
    body.is-sub .hnav .sc-h b { font-size: 15px; line-height: 1.35 }
    body.is-sub .hnav .sc-h i { font-size: 12px }
    body.is-sub .hnav .sc-b p,
    body.is-sub .hnav .sc-go,
    body.is-sub .hnav .sc-p,
    body.is-sub .hnav .sc-pt { display: none }
    body.is-sub .hnav .sc-b { padding: 8px 12px 10px; gap: 4px }
    body.is-sub .hnav .sc-n { font-size: 10.5px; line-height: 1.6 }
    .sc.sc-lk { opacity: .62 }
    .sc.sc-lk .sc-h b::after { content: ' 🔒'; font-size: .8em }

    /* الاختبار الجاري: لا زرّ عائم فوق السؤال (الدردشة · رجوع · التواصل) */
    body.ex-live #chAdmFab,
    body.ex-live #navback,
    body.ex-live #fabWrap { display: none !important }

    /* ══ «معلّمك الذكي» (v488) ══ */
    .tch-go {
      margin-top: 8px;
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 800;
      border: 1.5px solid var(--g);
      background: transparent;
      color: var(--gt);
      border-radius: 10px;
      padding: 7px 12px;
      cursor: pointer
    }
    .tch-box {
      margin-top: 9px;
      padding: 11px 12px;
      border-radius: 11px;
      background: var(--bg);
      border-inline-start: 3px solid var(--g);
      font-family: var(--fn);
      font-size: 12.5px;
      line-height: 1.9;
      color: var(--tx)
    }
    .tch-box b { color: var(--gt); font-size: 12.5px }
    .tch-box p { margin: 6px 0 8px }
    .tch-box i { font-style: normal; color: var(--mu) }
    .tch-box small { display: block; color: var(--mu); font-size: 10.5px; margin-top: 6px }
    .tch-row { display: flex; gap: 7px; flex-wrap: wrap }
    .tch-row button {
      font-family: var(--fn);
      font-size: 11.5px;
      font-weight: 700;
      border: 1px solid var(--bd);
      background: var(--card);
      color: var(--tx);
      border-radius: 9px;
      padding: 5px 10px;
      cursor: pointer
    }

    /* ══ إنشاء الخطّة خطوةً خطوة (v490) — خطوةٌ واحدة على الشاشة ══ */
    #plan-box[data-wz] [data-ws] { display: none !important }
    #plan-box[data-wz="1"] [data-ws="1"],
    #plan-box[data-wz="2"] [data-ws="2"],
    #plan-box[data-wz="3"] [data-ws="3"],
    #plan-box[data-wz="4"] [data-ws="4"],
    #plan-box[data-wz="5"] [data-ws="5"],
    #plan-box[data-wz="6"] [data-ws="6"] { display: block !important; animation: wzIn .22s ease }
    #plan-box[data-wz="1"] #planPicker,
    #plan-box[data-wz="2"] #planPicker,
    #plan-box[data-wz="3"] #planPicker { display: none }
    /* الدرجة المطلوبة خطوتها الخامسة، والمستوى من التحديد — لا يُعادان هنا */
    #plan-box[data-wz] .goal-tgt,
    #plan-box[data-wz] .wz-hide { display: none !important }
    @keyframes wzIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
    .wz-head { margin: 0 0 12px; font-family: var(--fn) }
    .wz-dots { display: flex; gap: 6px; justify-content: space-between }
    .wz-dot {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 900;
      color: var(--mu);
      padding: 7px 0 6px;
      border-bottom: 3px solid var(--bd)
    }
    .wz-dot i { font-style: normal; font-size: 10.5px; font-weight: 700 }
    .wz-dot.on { color: var(--gt); border-color: var(--g) }
    .wz-dot.done { color: var(--gr2); border-color: var(--gr2) }
    .wz-sum { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px }
    .wz-sum b {
      font-size: 11.5px;
      font-weight: 800;
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: 20px;
      padding: 4px 10px;
      color: var(--tx)
    }
    .wz-back {
      margin-inline-start: auto;
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 800;
      background: none;
      border: 1px solid var(--bd);
      color: var(--tx);
      border-radius: 20px;
      padding: 4px 12px;
      cursor: pointer
    }
    .wz-next { width: 100%; margin-top: 10px; background: var(--g) !important; color: #1a1200 !important; font-weight: 900 }

    /* ══ تحديد المستوى السريع (v491) ══ */
    .wz-card { text-align: center }
    .wz-card p { font-size: 12px; line-height: 1.8 }
    .qk h3 { margin-bottom: 4px }
    .qk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--fn); font-size: 11.5px; font-weight: 800 }
    .qk-top i { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden }
    .qk-top i b { display: block; height: 100%; background: var(--g) }
    .qk-g { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 }
    .qk-c {
      font-family: system-ui, sans-serif;
      font-size: 14px;
      font-weight: 700;
      padding: 9px 14px;
      border-radius: 11px;
      border: 1.5px solid var(--bd);
      background: var(--card);
      color: var(--tx);
      cursor: pointer;
      transition: all .12s
    }
    .qk-c.on { background: var(--g); border-color: var(--g); color: #1a1200 }
    .qk-in { padding: 1px 6px; font-size: 13.5px; border-radius: 7px; margin: 1px 0 }
    .qk-read, .qk-sent { text-align: left; line-height: 2.2; font-size: 13.5px; margin: 10px 0 }
    .qk-sent .qk-in { border-style: dashed }
    .qk-play { margin: 8px auto 0; display: block }
    .qk-alt { margin-top: 10px; font-size: 11.5px }
    .qk-alt a { color: var(--gt) }
    .qk-prev { opacity: .85 }
    .qk-bar { display: flex; align-items: center; gap: 8px; font-family: var(--fn); font-size: 11.5px; margin: 6px 0 }
    .qk-bar span { width: 92px; text-align: start }
    .qk-bar i { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden }
    .qk-bar i b { display: block; height: 100%; background: var(--g) }
    .qk-bar em { font-style: normal; width: 38px }
    .p-warn {
      background: rgba(226, 104, 95, .12);
      border: 1.5px solid #e2685f;
      border-radius: 12px;
      padding: 12px;
      margin: 10px 0;
      font-family: var(--fn);
      color: #fff;
      font-size: 12.5px;
      line-height: 1.85
    }
    .p-warn b { color: #ffb4ab }
    .p-warn p { margin: 6px 0 10px }
    .p-warn-b { display: flex; gap: 8px; flex-wrap: wrap }
    /* الأزرار العائمة (رجوع · الرئيسيّة · الدردشة) لا تغطّي آخر السؤال */
    #plan-box[data-wz] { padding-bottom: 84px }
    #plan-box[data-wz] #pGo { display: none }   /* يُبنى بالاختيار نفسه أو بزرَّي التنبيه */

    /* ══ كم يوماً (v492) — الأيّام أوّلاً، ثمّ: موعد اختبار أم مدّة خطّة ══ */
    .pdk-kind { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 2px 0 10px; font-family: var(--fn); font-size: 11.5px; color: rgba(255, 255, 255, .75) }
    .pdk-kind .minb { font-size: 11.5px; padding: 7px 11px }
    /* أسئلة القواعد والقطعة باختيارات (v494) */
    .qk-os { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px }
    .qk-o {
      font-family: var(--fn);
      font-size: 13.5px;
      font-weight: 700;
      padding: 11px 14px;
      border-radius: 11px;
      border: 1.5px solid var(--bd);
      background: var(--card);
      color: var(--tx);
      cursor: pointer;
      text-align: start
    }
    .qk-o.on { background: var(--g); border-color: var(--g); color: #1a1200 }
    .qk-mq b { color: var(--g); border-bottom: 2px solid var(--g) }
    .qk-find .qk-in { border: 1px dotted rgba(255, 255, 255, .35); background: transparent; color: #fff; font-weight: 600; padding: 1px 4px; font-size: 13.5px }
    .qk-find .qk-in.on { background: var(--g); color: #1a1200; border-color: var(--g) }

    /* ══ شريط الكمبيوتر الجانبيّ: شريطُ تمريرٍ واحدٌ ظاهر (v497) ══
       المالك (٢٥ سبتمبر): «خطّا التمرير عموديّان، هل هما منطقيّان؟» — بنود الشريط
       تحتاج نحو ٩٤٠px، فعلى شاشة الحاسوب المحمول يُمرَّر الشريط وحده، ويقف شريطُ
       تمريره بجوار شريط الصفحة. فيُضغط الشريط على الشاشات القصيرة ليتّسع لبنوده،
       ويُخفى شريط تمريره إلّا عند مرور الفأرة (ويبقى يتمرّر بالعجلة). */
    @media (min-width: 901px) {
      .desktop-nav {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent
      }

      .desktop-nav:hover {
        scrollbar-color: rgba(201, 168, 76, .45) transparent
      }
    }

    @media (min-width: 901px) and (max-height: 900px) {
      .desktop-nav .brand {
        padding: 2px 12px 10px;
        margin-bottom: 6px
      }

      .desktop-nav .brand .mk {
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 0 8px
      }

      .desktop-nav .brand strong {
        display: inline;
        font-size: 16px
      }

      .desktop-nav .nav-section {
        padding: 4px 10px 3px
      }

      .desktop-nav .dnav {
        padding: 7px 12px;
        margin: 1px 0
      }

      .desktop-nav .account {
        padding-top: 8px;
        margin-top: 6px
      }
    }

    @media (min-width: 901px) and (max-height: 760px) {
      .desktop-nav .brand span {
        display: none
      }

      .desktop-nav .dnav {
        padding: 5px 12px
      }

      .desktop-nav .dnav .nicon {
        width: 26px;
        height: 26px;
        flex-basis: 26px
      }

      .desktop-nav .account .dnav {
        padding: 5px 10px
      }
    }

    /* ══ مبدّل الاختبار (v499) — معاينةُ المشرف ══
       body.xs-on    المبدّل ظاهر (المشرف، وفي معاينة الخطط أيضاً)
       body.xs-other المختار غيرُ ستيب: تُخفى وجهاتُ ستيب (.xs-step)
                     وتظهر وجهاتُه (#xsNav في الشريط الجانبيّ · #xsTabs في السفليّ)
       والصنفان لا يُضافان لغير المشرف أبداً، فلا يتغيّر عليه شيء. */
    .xs-chip[hidden],
    .xs-sw[hidden],
    .xs-sheet[hidden] {
      display: none !important
    }

    body.xs-on #dnavQudurat,
    body.xs-on .tb-name,
    body.xs-other .xs-step {
      display: none !important
    }

    .xs-nav,
    .xs-tabs {
      display: none
    }

    body.xs-other .xs-nav {
      display: block
    }

    body.xs-other .xs-tabs {
      display: contents
    }

    .xs-ic {
      width: 1.15em;
      height: 1.15em;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    .tabi .xs-ic {
      width: 21px;
      height: 21px
    }

    .tab.xs-tab .tabl {
      white-space: nowrap
    }

    .xs-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex: 0 0 auto;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(201, 168, 76, .55);
      background: rgba(255, 255, 255, .08);
      color: var(--g);
      font-family: var(--fn);
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer
    }

    .xs-sheet {
      position: fixed;
      inset: 0;
      /* فوق زرّ الدردشة العائم (--z-toast − 500) ونافذتها (− 400) — كانا يغطّيان آخر صفّ */
      z-index: calc(var(--z-toast) - 300);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background: rgba(2, 8, 23, .5)
    }

    .xs-panel {
      background: var(--card);
      color: var(--tx);
      border-radius: 20px 20px 0 0;
      padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
      max-height: 82vh;
      overflow: auto;
      box-sizing: border-box
    }

    .xs-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: var(--fn);
      font-size: 17px;
      margin-bottom: 4px
    }

    .xs-x {
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 12px;
      background: var(--bg);
      color: var(--tx);
      font-size: 22px;
      cursor: pointer
    }

    .xs-list {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .xs-grp {
      font-family: var(--fn);
      font-size: 11.5px;
      font-weight: 800;
      color: var(--mu);
      padding: 6px 4px 0
    }

    .xs-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 56px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--bd);
      background: var(--card);
      color: var(--tx);
      font-family: var(--fn);
      text-align: right;
      cursor: pointer;
      box-sizing: border-box
    }

    .xs-row.on {
      border-color: var(--n);
      background: var(--bl)
    }

    .xs-ri {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 10px;
      background: var(--bl);
      color: var(--n);
      display: grid;
      place-items: center;
      font-size: 19px
    }

    .xs-rt {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0
    }

    .xs-rt b {
      font-size: 15px;
      font-weight: 800
    }

    .xs-rt small {
      font-size: 12px;
      color: var(--mu)
    }

    .xs-badge {
      font-size: 11px;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 999px;
      white-space: nowrap
    }

    .xs-badge.live {
      background: #dcfce7;
      color: #166534
    }

    .xs-badge.pre {
      background: #fef3c7;
      color: #854d0e
    }

    .xs-badge.soon {
      background: #f1f5f9;
      color: #475569
    }

    @media (min-width: 901px) {
      .xs-chip {
        display: none !important
      }

      .xs-sheet {
        justify-content: flex-start;
        align-items: flex-start;
        background: rgba(2, 8, 23, .25)
      }

      .xs-panel {
        width: 340px;
        max-height: calc(100vh - 170px);
        margin: 150px 14px 0;
        border-radius: 16px;
        box-shadow: 0 18px 50px rgba(2, 8, 23, .28)
      }

      .desktop-nav .xs-sw {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 54px;
        margin: 0 0 10px;
        padding: 8px 12px;
        border-radius: 12px;
        border: 1px solid rgba(201, 168, 76, .5);
        background: rgba(255, 255, 255, .07);
        color: #fff;
        font-family: var(--fn);
        text-align: right;
        cursor: pointer;
        box-sizing: border-box
      }

      .xs-swi {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border-radius: 9px;
        background: rgba(201, 168, 76, .16);
        color: var(--g);
        display: grid;
        place-items: center;
        font-size: 17px
      }

      .xs-swt {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1px
      }

      .xs-swt small {
        font-size: 10.5px;
        font-weight: 700;
        color: rgba(255, 255, 255, .62)
      }

      .xs-swt b {
        font-size: 14px;
        font-weight: 900;
        color: var(--g)
      }
    }

    /* «الدليل الشامل» — رئيسيّة الأدلّة (v499 · بطاقاتٌ ملوّنة بمكوّن ستيب .sc منذ v502) */
    .xs-hero {
      border-radius: 20px;
      padding: 26px 22px;
      color: #fff;
      text-align: center;
      background: linear-gradient(135deg, #07409c, #0b57c9 55%, #0da2e7);
      box-shadow: 0 10px 30px rgba(7, 64, 156, .25)
    }

    .xs-pill {
      display: inline-block;
      font-family: var(--fn);
      font-size: 12px;
      font-weight: 800;
      color: #07409c;
      background: var(--c-accent);
      border-radius: 999px;
      padding: 4px 14px
    }

    .xs-hero h2 {
      font-family: var(--fn);
      font-size: 28px;
      font-weight: 900;
      margin: 12px 0 8px;
      color: #fff
    }

    .xs-hero p {
      font-family: var(--fn);
      font-size: 14.5px;
      line-height: 1.9;
      margin: 0 auto;
      max-width: 560px;
      color: rgba(255, 255, 255, .9)
    }

    .xs-note {
      margin: 12px 2px 4px
    }

    .xs-guides {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      margin-top: 12px
    }

    @media (min-width: 700px) {
      .xs-guides {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    .xs-g .sc-b .xs-badge {
      align-self: flex-start
    }

    .xs-g .sc-n {
      font-weight: 700
    }

    .xs-gsub {
      margin-top: auto;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px
    }

    .xs-gsub .sc-go {
      padding: 10px 4px;
      font-size: 13px
    }

    /* زرُّ كلّ بطاقةٍ بلونها — أغمق من التدرّج ليبلغ الأبيضُ عليه ٤٫٥:١ فأكثر */
    .xs-g.sc-indigo .sc-go { background: #1e3a8a }
    .xs-g.sc-violet .sc-go { background: #4f46e5 }
    .xs-g.sc-green .sc-go { background: #047857 }
    .xs-g.sc-amber .sc-go { background: #c2410c }

    .xs-row.xs-all {
      border-style: dashed
    }

    /* حاشيةٌ جانبيّة: .sec-pad بلا حشوةٍ عامّة، فكانت البطاقات تلتصق بحافّة الجوّال
       في صفحتي الأدلّة والقدرات (قِيس على ٣٩٠px) */
    #pg-guides>.sec-pad,
    #pg-qudurat>.sec-pad {
      padding-inline: 14px;
      padding-bottom: 24px
    }

    #pg-guides,
    #pg-guides button {
      font-family: var(--fn)
    }

    /* ══ v503 — فحص تجربة المستخدم (Chrome بلا واجهة: ٣٩٠ و١٢٨٠، زائراً ومشتركاً) ══ */

    /* ① «رجوع · الرئيسية» كانت تقف على ١١٢…١٥٠px من القاع يميناً، وفقاعة الدردشة
       على ٧٨…١٣٤px يميناً أيضاً — فتتراكبان عند المشترك. رُفعت فوق الفقاعة، وزِيدت
       حشوة الجسم بقدرها كي لا تُحجب آخرُ بطاقة. وفوق ٩٠٠ مكانُها الشريط الجانبيّ كما كان. */
    @media (max-width: 899.98px) {
      #navback {
        bottom: calc(146px + env(safe-area-inset-bottom, 0px)) !important
      }

      body.has-navback {
        padding-bottom: calc(196px + env(safe-area-inset-bottom, 0px))
      }
    }

    /* ② حدٌّ أدنى ١٢px للنصّ المقروء — كان منه ٩ و٩٫٥ و١٠ و١١px (أصنافٌ عُدّت صفحةً
       صفحة). ولا يُمسّ ما في دوائر أو شاراتٍ ضيّقة (.tnum · .wz-dot · .gd · .xb)
       ولا تسميات الشريط السفليّ (.tabl) — سبعةُ تبويباتٍ في ٣٩٠px. */
    .xcard .xs,
    .sl-feat li,
    .do i,
    .sl-st span,
    .sl-proof span,
    .wl span,
    .subtabs .stab,
    .bl li,
    .type-t .type-en,
    .sl-h span,
    .sl-demo .dh,
    .sl-demo .dn,
    .glist-h .gn,
    .rs-stat span,
    .rs-meta .rs-g,
    .rs-meta .rs-d,
    .rs-cap,
    .rs-head p,
    .mk-step i,
    .mk-step b,
    .mk-step span,
    .mk-h p,
    .pk-foot,
    .pk-foot-u,
    body.is-sub .hnav .sc-n {
      font-size: 12px !important
    }

    /* ③ أهدافُ لمسٍ صغيرة في رئيسيّة الزائر (١٧ و١٨ و٢٩px ارتفاعاً) ⇐ ٤٤px */
    #pg-home a[onclick^="goTips"],
    #pg-home a[onclick^="csWhatsApp"] {
      display: inline-block;
      padding-block: 12px
    }

    #stepInfoBtn {
      min-height: 44px;
      padding: 8px 14px !important;
      font-size: 12px !important
    }

    /* ④ «جميع الحقوق محفوظة» مرّتين في الرئيسيّة — يبقى التذييل الكحليّ، ويبقى رقم الإصدار */
    .home-foot-c {
      display: none
    }

    /* ⑤ رئيسيّة الزائر على الجوّال كانت ~٧٩٠٠px: بطاقات الأقسام الثماني عموداً واحداً،
       كلٌّ بوصفٍ وزرّ. صارت عمودين مختصرين كبطاقات المشترك — بالأرقام والزرّ، بلا الوصف. */
    @media (max-width: 600px) {
      body:not(.is-sub) #home-nav .hnav {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important
      }

      /* وكانت البطاقات تلتصق بحافّتي الشاشة — عند الزائر والمشترك */
      #home-nav {
        padding-inline: 12px
      }

      body:not(.is-sub) #home-nav .sc {
        border-radius: 14px
      }

      body:not(.is-sub) #home-nav .sc:hover {
        transform: none
      }

      body:not(.is-sub) #home-nav .sc-h {
        min-height: 104px;
        padding: 12px
      }

      body:not(.is-sub) #home-nav .sc-ic {
        width: 36px;
        height: 36px;
        font-size: 17px;
        top: 10px;
        inset-inline-end: 10px
      }

      body:not(.is-sub) #home-nav .sc-h b {
        font-size: 15px;
        line-height: 1.35
      }

      body:not(.is-sub) #home-nav .sc-h i {
        font-size: 12px
      }

      body:not(.is-sub) #home-nav .sc-b p {
        display: none
      }

      body:not(.is-sub) #home-nav .sc-b {
        padding: 8px 12px 10px;
        gap: 6px
      }

      body:not(.is-sub) #home-nav .sc-n {
        font-size: 12px;
        line-height: 1.6
      }

      body:not(.is-sub) #home-nav .sc-go {
        padding: 9px 0;
        font-size: 13px;
        min-height: 44px
      }
    }

    /* ══ v504 — وصفُ بطاقات أقسام المشترك (الاستماع · القراءة · القواعد) ══ */
    .sc-ft {
      font-size: 13px;
      line-height: 1.85;
      font-weight: 600;
      color: var(--tx)
    }

    @media (max-width: 600px) {
      body.is-sub .hnav .sc-ft {
        font-size: 12.5px;
        line-height: 1.75
      }
    }

    /* ══ v506 — «معلّمك الذكي» بجوار الدرس ══
       يسار الدرس على الحاسوب ويثبت مع التمرير، وتحته على الجوّال. */
    .tl-wrap.tl-2 { display: grid; gap: 14px }
    .tl-main { min-width: 0 }

    @media (min-width: 1280px) {
      .tl-wrap.tl-2 {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start
      }

      .tl-wrap.tl-2 .tl {
        position: sticky;
        top: 92px;
        /* يتّسع كلُّه بلا تمريرٍ من أوّل الصفحة (فوقه الرأس وشريط المعاينة) */
        max-height: calc(100vh - 200px)
      }
    }

    .tl {
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: var(--card);
      border: 1px solid var(--bd);
      border-radius: 16px;
      box-shadow: var(--sh);
      padding: 14px;
      font-family: var(--fn);
      color: var(--tx);
      min-width: 0
    }

    .tl[hidden] { display: none }
    .tl-hd { display: flex; align-items: center; gap: 10px }

    .tl-av {
      flex: none;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      background: linear-gradient(135deg, #0b2545, #1d4ed8)
    }

    .tl-av.tl-ghadeer { background: linear-gradient(135deg, #5b21b6, #0f766e) }
    .tl-who { display: flex; flex-direction: column; min-width: 0; flex: 1 }
    .tl-who b { font-size: 15px }
    .tl-who span { font-size: 12px; color: var(--mu) }
    .tl-sw { display: flex; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; flex: none }

    .tl-sw button {
      font: 700 12.5px var(--fn);
      padding: 0 12px;
      min-height: 36px;
      border: 0;
      background: transparent;
      color: var(--mu);
      cursor: pointer
    }

    .tl-sw button.on { background: var(--n); color: #fff }

    .tl-off {
      font-size: 12.5px;
      line-height: 1.8;
      background: var(--bl);
      border-inline-start: 3px solid var(--bl2);
      border-radius: 8px;
      padding: 7px 10px
    }

    .tl-off code { font-size: 11.5px; direction: ltr; unicode-bidi: isolate }

    .tl-log {
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      min-height: 120px;
      max-height: 46vh;
      padding: 2px
    }

    @media (min-width: 1280px) {
      .tl-log { flex: 1; max-height: none }
    }

    .tl-m { max-width: 92%; font-size: 14px; line-height: 1.9 }

    .tl-m.t {
      align-self: flex-start;
      background: var(--bg);
      border: 1px solid var(--bd);
      border-radius: 4px 14px 14px 14px;
      padding: 8px 11px
    }

    .tl-m.u {
      align-self: flex-end;
      background: var(--n);
      color: #fff;
      border-radius: 14px 4px 14px 14px;
      padding: 7px 11px
    }

    .tl-m.s { align-self: center; font-size: 12.5px; color: var(--mu); text-align: center; max-width: 100% }

    .tl-say {
      margin-top: 4px;
      font: 700 12px var(--fn);
      border: 0;
      background: transparent;
      color: var(--gt);
      cursor: pointer;
      padding: 4px 0;
      min-height: 32px
    }

    .tl-typing { display: flex; gap: 5px; align-items: center; min-height: 36px }
    .tl-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--mu); animation: tlDot 1.2s infinite ease-in-out }
    .tl-typing span:nth-child(2) { animation-delay: .15s }
    .tl-typing span:nth-child(3) { animation-delay: .3s }

    @keyframes tlDot {
      0%, 80%, 100% { opacity: .3; transform: translateY(0) }
      40% { opacity: 1; transform: translateY(-3px) }
    }

    @media (prefers-reduced-motion: reduce) {
      .tl-typing span { animation: none; opacity: .6 }
    }

    .tl-chips { display: flex; flex-wrap: wrap; gap: 6px }

    .tl-chips button {
      font: 700 12.5px var(--fn);
      border: 1px solid var(--g);
      background: transparent;
      color: var(--gt);
      border-radius: 999px;
      padding: 0 12px;
      min-height: 36px;
      cursor: pointer
    }

    .tl-chips button:hover { background: var(--g); color: #0d1830 }
    .tl-in { display: flex; gap: 6px; align-items: flex-end }

    .tl-in textarea {
      flex: 1;
      min-width: 0;
      resize: none;
      font: 14px var(--fn);
      line-height: 1.7;
      color: var(--tx);
      background: var(--bg);
      border: 1px solid var(--bd);
      border-radius: 12px;
      padding: 8px 10px
    }

    .tl-in textarea:focus { outline: 2px solid var(--g); outline-offset: 1px }

    .tl-send {
      flex: none;
      font: 800 13.5px var(--fn);
      min-height: 44px;
      padding: 0 16px;
      border: 0;
      border-radius: 12px;
      background: var(--g);
      color: #0d1830;
      cursor: pointer
    }

    .tl-note { font-size: 12px; color: var(--mu); line-height: 1.7 }
    /* ══ v508 — «وضع المهمّة» على الحاسوب بجوار الشريط الجانبيّ لا فوقه ══
       المالك: «يظهر ملء الصفحة ويغطّي على الدليل ومساحاتٌ بيضاء». فالشريط الجانبيّ يبقى
       ظاهراً (والضغط فيه يُغلق المهمّة — app.js)، والعمود أعرض على الشاشات الكبيرة. */
    @media (min-width: 901px) {
      /* width: auto — كان .tm[role="dialog"] يفرض ١٠٠٪ فتنزاح بقدر الشريط خارج الشاشة */
      .tm, .tm[role="dialog"] { right: var(--dnav-w); left: 0; width: auto }
    }

    @media (min-width: 1200px) {
      .tm .tm-tr,
      .tm .tm-seg,
      .tm .tm-body>* { max-width: 840px }

      /* «السابقة · التالية» على عرض العمود نفسه لا الشاشة كلّها */
      .tm .tm-bot { padding-inline: max(16px, calc((100% - 840px) / 2)) }
    }