/* ══════════════════════════════════════════════════════════════════
   الصفحة الرئيسية السادسة — محك (home-sixth)
   ─ البنية مستوحاة من رئيسية cmp V3 (هيرو بمسرح + مسارات + معاينة
     ورقة + مميزات + نداء نهائي) بلون النظام الحالي (الفيروزي الثلاثي).
   ─ بلا Bootstrap ولا Vuexy: الصفحة مستقلة وخفيفة.
   ─ قاعدة النظام: ألوان صلبة من التوكنات، لا تدرجات لونية.
   ─ كل الأصناف بادئتها h6- فلا تسرب لأي صفحة أخرى.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --tq:#1CA390;          /* الأساسي */
  --tq-dark:#168676;     /* تحويم / نص صغير */
  --tq-accent:#2DD4BF;   /* الحيوي — على الداكن فقط */
  --tq-tint:#CCFBF1;     /* الخفيف */
  --tq-ink:#134E4A;      /* الحبر: نص فوق الخفيف، وخلفية الشريط الداكن */

  --ink:#0B1B1A; --ink-2:#3D5654; --ink-3:#587270;  /* ink-3 يحقق 5.2:1 على الأبيض */
  --line:#DCE7E5; --paper:#FFFFFF; --surface:#F4FAF9; --surface-2:#FAFDFC;
  --night:#0F2A27;      /* حبر على الشرائح الفاتحة — لا يفتح */
  /* أسطح داكنة مخففة: اللوحات والشريط. منفصلة عن --night/--tq-ink
     لأن هذين لونا حبر على أرضيات فاتحة، وتفتيحهما يهدم تباينها. */
  --night-surface:#2E665F;
  --ink-surface:#26786F;
  --amber:#F5A524; --amber-tint:#FFF1D6; --amber-ink:#8A5A00;

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;
  --sh-1:0 2px 10px rgba(19,78,74,.06);
  --sh-2:0 14px 40px rgba(19,78,74,.10);
  --sh-3:0 32px 80px rgba(19,78,74,.16);
  --sh-tq:0 18px 40px rgba(28,163,144,.30);

  --ease:cubic-bezier(.22,1,.36,1);
  /* الاسمان الدلاليان يشيران إلى تجوال وحده — الصفحة بخط واحد.
     قواعد الشريط العلوي تستعملهما، فبقاؤهما معرفين يمنع تصريحات معلقة. */
  --font-display:'Tajawal',sans-serif;
  --font-body:'Tajawal',sans-serif;
  --f:var(--font-body);
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px);}
body.h6{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--f);font-size:17px;line-height:1.85;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.h6 h1,.h6 h2,.h6 h3,.h6 h4{font-weight:800;color:var(--ink);line-height:1.35;margin:0;letter-spacing:-.01em;}
.h6 p{margin:0;}
/* ⚠️ :where() يصفر تخصيص .h6 فتصير القاعدة (0,0,1). بـ`.h6 a` كان تخصيصها
   (0,1,1) فتغلب كل أصناف الأزرار (0,1,0): لون نص .h6-btn-primary الأبيض
   و.h6-btn-accent و.h6-usr-cta كانت معطلة، والزر الممتلئ يرث حبر الصفحة
   الداكن على خلفية فيروزية. الوسم بلا صنف يظل يرث كما كان، و
   text-decoration:none يظل يغلب افتراضي المتصفح (مصدر المؤلف يسبقه). */
:where(.h6) a{text-decoration:none;color:inherit;}
.h6 ul,.h6 ol{margin:0;padding:0;list-style:none;}
.h6 img{max-width:100%;display:block;height:auto;}
/* ⚠️ التصفير (0,1,1) كان يغلب اصناف الازرار (0,1,0) على وسم button: زر
   «إرسال الرسالة» وزر الفيديو خرجا بلا ارضية ولا حد. :not(.h6-btn) يستثني
   ما يحمل صنف الزر فتحكمه اصنافه كالرابط سواء (و.h6-btn تعيد الخط والمؤشر).
   ⚠️ داخل :where() حتما: :not() العاري يرفع التخصيص الى (0,2,1) فيغلب كل ما
   بني ليغلب التصفير القديم (‎.hv-x.hv-x‎ زر اغلاق الفيديو، و‎.h6-ptabs button‎
   واخواتها بالترتيب) — اختفى زر الاغلاق فعلا حين كتب بلا :where(). */
.h6 button:where(:not(.h6-btn)){font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
.h6 ::selection{background:var(--tq);color:#fff;}
.h6 :focus-visible{outline:2.5px solid var(--tq);outline-offset:3px;border-radius:8px;}
.h6 .wrap{width:min(1220px,92vw);margin-inline:auto;}
/* :where() يصفر التخصيص فتغلبه قواعد الأقسام الخاصة (الهيرو/النداء) لاحقاً */
.h6 :where(section){padding-block:62px;}
@media(max-width:768px){.h6 :where(section){padding-block:42px;}}
/* نص لقارئ الشاشة وحده */
.h6-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .h6 *,.h6 *::before,.h6 *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ══════ ظهور عند التمرير (يعمل فقط عند وجود JS) ══════ */
html.h6-js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .8s var(--ease);}
html.h6-js .rv.in{opacity:1;transform:none;}
html.h6-js .rv[data-d="1"]{transition-delay:.08s;}
html.h6-js .rv[data-d="2"]{transition-delay:.16s;}
html.h6-js .rv[data-d="3"]{transition-delay:.24s;}
html.h6-js .rv[data-d="4"]{transition-delay:.32s;}

/* ══════ شريط التقدم ══════ */
.h6-progress{position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:9999;background:var(--tq-accent);transform-origin:right;transform:scaleX(0);}

/* ══════ الأزرار ══════ */
.h6-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;cursor:pointer;   /* وسم button مستثنى من تصفير .h6 button */
  height:42px;padding-inline:18px;border-radius:12px;
  font-weight:800;font-size:13.5px;line-height:1;white-space:nowrap;
  border:1.5px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.h6-btn i{font-size:15px;}
/* لا ينزل هدف اللمس عن 44px على الأجهزة اللمسية */
@media (hover:none){.h6-btn{min-height:44px;}}
.h6-btn-sm{height:40px;padding-inline:16px;font-size:14px;border-radius:11px;}
.h6-btn-primary{background:var(--tq);color:#fff;box-shadow:0 10px 22px rgba(28,163,144,.28);}
.h6-btn-primary:hover{background:var(--tq-dark);color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(28,163,144,.32);}
.h6-btn-accent{background:var(--tq-accent);color:var(--night);box-shadow:0 12px 26px rgba(45,212,191,.28);}
.h6-btn-accent:hover{background:var(--tq-accent);color:var(--night);transform:translateY(-2px);box-shadow:0 16px 30px rgba(45,212,191,.38);}
.h6-btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line);}
.h6-btn-ghost:hover{border-color:var(--tq);color:var(--tq-dark);transform:translateY(-2px);box-shadow:var(--sh-1);}
.h6-btn-ghost.on-dark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.22);}
.h6-btn-ghost.on-dark:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4);}
/* زر «طلب اشتراك جديد» للمشترك: ثانوي لكنه ليس باهتاً — الفيروزي الخفيف
   بحد من درجة الأساس وتاج ذهبي، وعند التحويم يمتلئ بالأساس. الأبيض بحد
   var(--line) كان يقرأ زراً معطلاً بجوار «باني الاختبار» الممتلئ. */
.h6-btn-sub{background:var(--tq-tint);color:var(--tq-ink);border-color:rgba(28,163,144,.30);}
.h6-btn-sub i{color:var(--amber);}
.h6-btn-sub:hover{background:var(--tq);color:#fff;border-color:var(--tq);transform:translateY(-2px);box-shadow:0 14px 26px rgba(28,163,144,.32);}
.h6-btn-sub:hover i{color:var(--amber-tint);}
.h6-btn:active{transform:translateY(0) scale(.985);}

/* ══════ الشارة الصغيرة وعناوين الأقسام ══════ */
.h6-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:100px;font-weight:700;font-size:11.5px;
  color:var(--tq-ink);background:var(--tq-tint);border:1px solid rgba(28,163,144,.22);
}
.h6-eyebrow i{font-size:12px;color:var(--tq-dark);}
.h6-eyebrow.on-dark{background:rgba(45,212,191,.14);border-color:rgba(45,212,191,.32);color:var(--tq-tint);}
.h6-eyebrow.on-dark i{color:var(--tq-accent);}
/* كل رؤوس الأقسام في المنتصف — لا نسخة محاذاة للبداية (كانت .start في
   «كيف يعمل» و«الوقت»، وأزيلت بطلب المالك ليتوحد إيقاع الصفحة) */
.h6-sec-head{max-width:640px;margin:0 auto 32px;text-align:center;}
.h6-sec-head h2{font-size:clamp(25px,3.2vw,37px);margin-block:16px 12px;}
/* راس بلا شارة ولا سطر شرح: الهامش الذي كان يفصلهما يسقط */
.h6-sec-head h2:first-child{margin-block-start:0;}
.h6-sec-head h2:last-child{margin-block-end:0;}
.h6-sec-head p{color:var(--ink-2);font-size:17px;}
/* ── خط تحت العنوان المجرد ──
   الراس الذي بقي عنوانا وحده يحتاج ما ينهيه، فتحته شعرة بعرض النص
   (::before، لذلك يصير h2 صندوقا سطريا كتليا يحتضن اطول سطر فيه)
   وعليها قلم فيروزي قصير في المنتصف (::after). التوسيط بخصائص
   فيزيائية (left/translateX) فلا ينقلب مع اتجاه الصفحة.
   ويقتصر على h2 وحيد الاخ، فرؤوس المميزات والخطط بشارتها وشرحها
   تبقى كما هي. والقلم يمتد عند ظهور القسم، وبلا جافاسكربت يولد ممتدا. */
.h6-sec-head h2:only-child{position:relative;display:inline-block;padding-block-end:21px;}
.h6-sec-head h2:only-child::before{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--line);
}
.h6-sec-head h2:only-child::after{
  content:"";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:64px;height:4px;border-radius:99px;background:var(--tq);
  transition:width .7s var(--ease) .12s;
}
html.h6-js .h6-sec-head.rv:not(.in) h2:only-child::after{width:0;}
.h6-sec-head.on-dark h2:only-child::before{background:rgba(255,255,255,.22);}
.h6-sec-head.on-dark h2:only-child::after{background:var(--tq-accent);}
.h6-sec-head.on-dark h2,.h6-sec-head.on-dark p{color:#fff;}
.h6-sec-head.on-dark p{opacity:.92;} /* رفعت مع تفتيح --ink-surface: .8 تهبط إلى 4.0:1 */

/* ══════ الهيدر ══════
   شفاف تماماً وهو في أعلى الصفحة (الهيرو أبيض فالحبر الداكن يقرأ عليه)،
   ويكتسب الزجاج والحد والظل بمجرد التمرير (.stuck) أو عند فتح قائمة
   الجوال (.nav-open) أو أي قائمة منسدلة (.pop-open) — وإلا طفت اللوحات
   فوق خلفية شفافة فبدت معلقة بلا شريط. */
.h6-hdr{
  position:sticky;inset-block-start:0;z-index:900;
  background:transparent;
  border-block-end:1px solid transparent;
  /* backdrop-filter خارج قائمة الانتقال عمداً: تحريك الضبابية على عرض الشاشة
     كاملاً في كل تمريرة ثمنه إطارات ساقطة، والخلفية وحدها تكفي بصرياً */
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.h6-hdr.stuck,.h6-hdr.nav-open,.h6-hdr.pop-open{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border-block-end-color:var(--line);box-shadow:0 8px 30px rgba(19,78,74,.07);
}
.h6-hdr .wrap{display:flex;align-items:center;gap:18px;height:var(--nav-h);}
/* الشعار: عنصر <x-brand> الموحد (assets/css/brand.css) — هنا مقاسه فقط.
   ارتفاع الشريط هنا ثابت (--nav-h:74px) لا يتبع المحتوى، فالتكبير بلا نزيف. */
.h6-brand{--mk-h:58px;flex-shrink:0;}
@media (max-width:600px){.h6-brand{--mk-h:46px;}}
/* min-width:0 + overflow:hidden شبكة أمان: عند أي ضيق غير متوقع تقص روابط
   الأقسام بدل أن تدفع عنقود الحساب خارج الشاشة (الشريط RTL فيهرب يساراً) */
.h6-nav{display:flex;align-items:center;gap:2px;margin-inline-start:auto;min-width:0;overflow:hidden;}
/* حاوية الشريط 1220px مهما اتسعت الشاشة، فمتسع الاقسام ثابت لا يزيد.
   حين كانت الوجهات ستا كان محتواها 417px في متسع 391 فتقص «تواصل معنا»
   صامتة (overflow:hidden)؛ وبعد ابقاء ثلاث في الشريط عاد الحشو كما كان. */
.h6-nav a{padding:7px 8px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2);transition:.25s var(--ease);white-space:nowrap;}
.h6-nav a:hover{color:var(--tq-ink);background:var(--tq-tint);}
/* الوجهة الحالية في الشريط (تواصل معنا) تاخذ هيئة التحويم نفسها */
.h6-nav a[aria-current="page"]{color:var(--tq-ink);background:var(--tq-tint);}
/* روابط الحساب داخل لوحة الجوال وحدها — الشريط العريض يعرضها كأيقونات */
.h6-nav .h6-nav-mob,.h6-nav .h6-nav-sep{display:none;}
.h6-tools{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.h6-burger{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--paper);color:var(--ink);place-items:center;}
.h6-burger i{font-size:20px;}

/* ══════ أيقونات الشريط (نقاط / سلة / وصول سريع / جرس) ══════ */
.h6-ic{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:40px;height:40px;flex:0 0 auto;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.h6-ic i{font-size:19px;line-height:1;}
.h6-ic:hover{background:var(--tq-tint);border-color:rgba(28,163,144,.32);color:var(--tq-ink);transform:translateY(-1px);}
.h6-ic-wide{width:auto;padding-inline:11px;font-family:var(--font-display);font-weight:800;font-size:13px;}
.h6-ic-wide i{font-size:17px;color:var(--amber);}
.h6-ic-wide b{line-height:1;}
.h6-ic-badge{
  position:absolute;inset-block-start:-6px;inset-inline-start:-6px;
  min-width:19px;height:19px;padding-inline:5px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#E11D48;color:#fff;font-family:var(--font-display);font-weight:800;font-size:10.5px;line-height:1;
  border:2px solid var(--paper);box-shadow:0 2px 6px rgba(0,0,0,.22);
}
.h6-ic-badge[hidden]{display:none;}

/* ══════ القوائم المنسدلة (وصول سريع / إشعارات / حساب) ══════ */
/* ارتفاع الحاوية = ارتفاع الشريط كي تنزل اللوحة من حافته السفلى تماماً،
   لا من حافة الزر (فتقطع الشريط وتبدو معلقة فوقه) */
.h6-pop{position:relative;flex:0 0 auto;display:flex;align-items:center;height:var(--nav-h);}
.h6-pop-btn{display:inline-flex;align-items:center;justify-content:center;}
.h6-pop-panel{
  position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;
  width:min(340px,calc(100vw - 24px));
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-2);overflow:hidden;z-index:5;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .22s var(--ease);
}
.h6-pop-panel[hidden]{display:none;}
.h6-pop.open .h6-pop-panel{opacity:1;transform:none;pointer-events:auto;}
.h6-pop-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;border-block-end:1px solid var(--line);background:var(--surface-2);
  font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink);
}
.h6-pop-head i{color:var(--tq-dark);font-size:16px;}
.h6-pop-mini{
  padding:4px 9px;border-radius:100px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--font-body);font-weight:700;font-size:11.5px;color:var(--ink-2);line-height:1.6;
}
.h6-pop-mini:hover{border-color:var(--tq);color:var(--tq-dark);}
.h6-pop-foot{display:flex;border-block-start:1px solid var(--line);background:var(--surface-2);}
.h6-pop-foot a{flex:1;text-align:center;padding:10px 6px;font-size:12.5px;font-weight:700;color:var(--ink-2);}
.h6-pop-foot a+a{border-inline-start:1px solid var(--line);}
.h6-pop-foot a:hover{color:var(--tq-dark);background:var(--tq-tint);}
.h6-pop-foot i{font-size:14px;}

/* وصول سريع */
.h6-qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;}
.h6-qa{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 5px;border-radius:var(--r-sm);border:1px solid transparent;transition:.2s var(--ease);}
.h6-qa:hover{background:var(--surface);border-color:var(--line);}
.h6-qa-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--tq-tint);color:var(--tq-ink);}
.h6-qa-ic i{font-size:18px;}
.h6-qa-lbl{font-size:11.5px;font-weight:700;color:var(--ink-2);text-align:center;line-height:1.4;}
.h6-qa.is-primary .h6-qa-ic{background:var(--tq);color:#fff;}

/* الإشعارات */
.h6-bell-list{max-height:340px;overflow-y:auto;overscroll-behavior:contain;}
.h6-bell-empty{padding:26px 14px;text-align:center;font-size:13px;color:var(--ink-3);}
.h6-bell-empty i{display:block;font-size:26px;margin-block-end:6px;color:var(--ink-3);opacity:.7;}
.h6-spin{animation:h6spin 1s linear infinite;}
@keyframes h6spin{to{transform:rotate(360deg);}}
.h6-bell-item{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-block-end:1px solid var(--line);transition:background .2s var(--ease);}
.h6-bell-item:hover{background:var(--surface);}
.h6-bell-item.is-unread{background:rgba(28,163,144,.06);}
.h6-bell-ic{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:var(--tq-tint);color:var(--tq-ink);}
.h6-bell-ic i{font-size:16px;}
.h6-bell-body{min-width:0;flex:1;}
.h6-bell-t{display:block;font-family:var(--font-display);font-weight:800;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.h6-bell-b{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.6;}
.h6-bell-m{display:block;font-size:11.5px;color:var(--ink-3);margin-block-start:2px;}
.h6-bell-dot{flex:0 0 auto;width:8px;height:8px;margin-block-start:7px;border-radius:50%;background:#E11D48;}

/* الحساب */
.h6-avbtn{position:relative;width:42px;height:42px;flex:0 0 auto;border-radius:50%;padding:0;background:none;}
.h6-av{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  object-fit:cover;border:2px solid var(--paper);box-shadow:0 2px 10px rgba(19,78,74,.16);
  font-family:var(--font-display);font-weight:800;font-size:14px;color:#fff;letter-spacing:0;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.h6-avbtn:hover .h6-av{transform:scale(1.06);box-shadow:0 6px 16px rgba(19,78,74,.22);}
.h6-av--a{background:#6B7DF9;}.h6-av--b{background:#1CA390;}.h6-av--c{background:#F59E0B;}
.h6-av--d{background:#EC4899;}.h6-av--e{background:#10B981;}.h6-av--f{background:#3B82F6;}
.h6-av-crown{position:absolute;inset-block-start:-5px;inset-inline-end:-3px;font-size:14px;color:var(--amber);text-shadow:0 1px 3px rgba(0,0,0,.28);}
/* شارة معلم نشط: الشريط هنا شفاف عند القمة وابيض 82% عند الالتصاق — وكلاهما
   فاتح، فالايقونة العارية تذوب مهما غمق لونها. القرص الفضي هو ما يبرزها:
   جسم مستقل بحلقة وظل، مطابق لمعالجتها في لوحة التحكم (db-crown--silver).
   والمقاس 17px لان ti-award اضيق من ti-crown فيبدو اصغر عند المقاس نفسه. */
.h6-av-crown--silver{
  color:#475569;font-size:17px;
  inset-block-start:-7px;inset-inline-end:-6px;
  background:linear-gradient(145deg,#ffffff 0%,#e2e8f0 100%);
  border-radius:50%;padding:3px;text-shadow:none;
  box-shadow:0 2px 6px rgba(15,23,42,.3), inset 0 0 0 1px rgba(148,163,184,.6);
}
.h6-usr-head{padding:13px 14px 11px;border-block-end:1px solid var(--line);background:var(--surface-2);}
.h6-usr-name{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink);}
.h6-usr-tags{display:flex;flex-wrap:wrap;gap:5px;margin-block-start:7px;}
.h6-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:100px;font-size:11px;font-weight:700;line-height:1.6;}
.h6-tag i{font-size:12px;}
.h6-tag-ok{background:var(--tq-tint);color:var(--tq-ink);}
.h6-tag-warn{background:var(--amber-tint);color:var(--amber-ink);}
.h6-tag-role{background:#EEF2FF;color:#3730A3;}
.h6-usr-cta{
  display:flex;align-items:center;gap:8px;margin:10px 10px 4px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--tq);color:#fff;font-family:var(--font-display);font-weight:800;font-size:13.5px;
  transition:background .22s var(--ease);
}
.h6-usr-cta:hover{background:var(--tq-dark);color:#fff;}
.h6-usr-cta i{font-size:16px;}
.h6-usr-cta-go{margin-inline-start:auto;}
.h6-usr-links{padding:4px 10px 8px;}
.h6-usr-links a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.2s var(--ease);}
.h6-usr-links a:hover{background:var(--surface);color:var(--tq-ink);}
.h6-usr-links i{font-size:17px;color:var(--ink-3);}
.h6-usr-links a:hover i{color:var(--tq-dark);}
.h6-usr-danger,.h6-usr-danger i{color:#B91C1C !important;}
.h6-usr-num{margin-inline-start:auto;font-style:normal;font-family:var(--font-display);font-weight:800;font-size:11.5px;padding:2px 8px;border-radius:100px;background:var(--tq-tint);color:var(--tq-ink);}
.h6-usr-num-amber{background:var(--amber-tint);color:var(--amber-ink);}
.h6-usr-num-red{background:#FEE2E2;color:#B91C1C;}
.h6-usr-out{border-block-start:1px solid var(--line);}
.h6-usr-out button{display:flex;width:100%;align-items:center;gap:9px;padding:12px 21px;font-family:var(--font-body);font-size:13.5px;font-weight:700;color:#B91C1C;transition:background .2s var(--ease);}
.h6-usr-out button:hover{background:#FEF2F2;}
.h6-usr-out i{font-size:17px;}

/* أربع مراحل، مقيسة على العرض الفعلي للعناقيد لا بالتقدير. العنقود يضيق
   قبل أن تنطوي روابط الأقسام، كي لا يخسر الزائر تنقل الصفحة على شاشة
   ١٠٢٤ وعنقوده أصلاً ضيق:
   > 1260px  كل شيء بمقاسه الكامل (الحاوية 1220px فلا يزيد الاتساع شيئا)
   ≤ 1260px  «إنشاء اختبار» و«اختباراتي» يسقطان (أول بندين في ☰)
   ≤ 1100px  زرا «اشتراك» و«لوحة المعلم» يصيران أيقونتين
   ≤ 1000px  روابط الأقسام تنطوي في ☰ ومعها وجهات الحساب
   ≤ 920px   يبقى الجرس والحساب و☰ فقط */
@media(max-width:1260px){
  .h6-only-wide{display:none !important;}
}
/* «اشتراك» و«لوحة المعلم» يبقى نصهما مقروءا حتى 1100؛ دونه تكفي الأيقونة */
@media(max-width:1100px){
  .h6-btn-tight{width:40px;padding-inline:0;}
  .h6-btn-tight .h6-btn-lbl{display:none;}
}
@media(max-width:1000px){
  .h6-nav{position:absolute;inset-inline:0;inset-block-start:var(--nav-h);flex-direction:column;align-items:stretch;gap:4px;padding:12px;background:var(--paper);border-block-end:1px solid var(--line);box-shadow:var(--sh-2);display:none;margin:0;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;}
  .h6-nav.open{display:flex;}
  .h6-nav a{padding:12px 14px;font-size:16px;}
  .h6-nav .h6-nav-mob{display:flex;align-items:center;gap:10px;}
  .h6-nav .h6-nav-mob i{font-size:19px;color:var(--tq-dark);}
  .h6-nav .h6-nav-sep{display:block;height:1px;margin:6px 4px;background:var(--line);}
  .h6-burger{display:grid;width:44px;height:44px;}
  .h6-tools{margin-inline-start:auto;}
}
@media(max-width:920px){
  .h6-btn-sm{height:44px;}
  .h6-only-desk{display:none !important;}
}
/* اللوحات الثلاث (وصول سريع/الجرس/الحساب) تثبت الى الشاشة لا الى زرها:
   inset-inline-end:0 يمدها من حافة الزر الى الخارج، فتخرج عند 390px بـ116px
   (وصول سريع) و68 (الجرس) و18 (الحساب) — قيست. الشريط sticky بلا transform
   ولا filter فالثابت هنا ينسب الى الشاشة نفسها. */
@media(max-width:600px){
  .h6-pop-panel{
    position:fixed;
    inset-block-start:calc(var(--nav-h) + 4px);
    inset-inline:12px;
    width:auto;
  }
}

/* ══════ الهيرو ══════ */
.h6-hero{position:relative;overflow:hidden;background:var(--paper);padding-block:56px 96px;}
.h6-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.h6-blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.42;will-change:transform;}
/* b1 هي اللطخة التي كانت تصبغ يسار الهيرو (inset-inline-end = يسار في RTL).
   خفضت من ‎.42‎ إلى ‎.18‎ وزيد تمويهها: تقرأ الآن هالةً خلف نموذج الباني
   لا غسلةً على نصف الشاشة تزاحم لوحته الفيروزية. */
.h6-blob.b1{width:520px;height:520px;background:var(--tq-accent);opacity:.18;inset-block-start:-160px;inset-inline-end:-120px;animation:h6drift1 18s ease-in-out infinite;}
.h6-blob.b2{width:420px;height:420px;background:var(--tq);opacity:.14;inset-block-end:-180px;inset-inline-start:-100px;animation:h6drift2 22s ease-in-out infinite;}
/* حجاب أبيض يشتد كلما اقتربنا من الحافة اليسرى، فتخف الصبغة حيث يقف
   النموذج ويبقى اللون حيث يفيد. الاتجاهات هنا مادية (to left) قصداً. */
.h6-hero-bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,transparent 50%,rgba(255,255,255,.45) 82%,rgba(255,255,255,.72) 100%);
}
@keyframes h6drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,70px) scale(1.12);}}
@keyframes h6drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(70px,-60px) scale(1.08);}}
/* شبكة نقاط بصورة SVG (بلا تدرجات) */
.h6-dots{
  position:absolute;inset:0;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%231CA390' fill-opacity='.22'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(75% 65% at 60% 30%,#000,transparent 78%);
          mask-image:radial-gradient(75% 65% at 60% 30%,#000,transparent 78%);
}
/* left/top ماديان قصداً: JS يحسب النسبة من الحافة اليسرى وtranslate مادي */
.h6-spot{position:absolute;width:520px;height:520px;border-radius:50%;background:var(--tq-accent);opacity:.10;filter:blur(90px);top:var(--my,30%);left:var(--mx,30%);transform:translate(-50%,-50%);transition:top .25s,left .25s;}
/* الشاشة الصغيرة: خلفية الهيرو أبيض مكسور وحده.
   طبقة الزينة كلها (اللطختان والنقاط والبقعة والحجاب) مصممة للمسرح ذي
   العمودين — الحجاب يشتد نحو اليسار حيث يقف النموذج، والنقاط مقنعة بدائرة
   عند 60%‎/30%‎ من المساحة. وبعد انطواء الشبكة الى عمود واحد تصير غسلة
   خضراء خلف النص، فتطفا الطبقة ويبقى السطح. */
@media(max-width:600px){
  .h6-hero{background:var(--surface-2);}
  .h6-hero-bg{display:none;}
}
.h6-hero .wrap{position:relative;z-index:2;}
.h6-hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:48px;align-items:center;}
@media(max-width:980px){.h6-hero-grid{grid-template-columns:1fr;gap:64px;}}

.h6-hero-copy h1{font-size:clamp(25px,3.7vw,44px);line-height:1.25;margin-block:14px 12px;font-weight:900;}
.h6-hero-copy h1 .l1{display:block;}
/* العبارة المتبدلة: لون وحده لا علامة ممتلئة.
   والحركة تعاقب لا انزلاق: الخارجة تغيب أولا ثم تحضر الداخلة بعدها
   بـ.28ث بإزاحة ربع سطر، فلا تتراكب عبارتان ولا تحتاج الحاوية قصا. */
.h6-rot{display:block;position:relative;width:100%;height:1.5em;}
.h6-rot span{
  position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;line-height:1.45;
  color:var(--tq);white-space:nowrap;
  opacity:0;transform:translateY(.24em);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.h6-rot span.on{opacity:1;transform:none;transition-delay:.28s;}
.h6-rot span.out{opacity:0;transform:translateY(-.2em);transition-delay:0s;}
@media(max-width:400px){.h6-rot span{font-size:.9em;}}
.h6-lead{font-size:clamp(14px,1.4vw,15.5px);color:var(--ink-2);max-width:50ch;margin-block-end:20px;line-height:1.8;}
/* align-items للمحاذاة الراسية: الكل 42 اليوم (كبسولة الفيديو دخلت مقاس
   العائلة)، والقاعدة صمام لو اختلف ارتفاع واحد يوما. والصف من بدايته:
   ترتيب الوسم هو الذي يحسم اي زر ينزل سطرا — الاطول لا الاقصر. */
.h6-cta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-block-end:12px;}

/* نافذة الفيديو مفتوحة (body.hv-locked من site-video.js): كل حركة CSS داخل
   المسرح تقف — البطاقات العائمة والوميض والهيكل والبطاقة الطائرة. ما تقوده
   جافاسكربت (عرض البنك والبطاقات) يوقفه حدث hv:open هناك. الحركة خلف
   الخلفية المعتمة تلوح من ورائها فيقرا الفيديو مشغلا فوق مشغل. */
body.hv-locked .h6-stage,body.hv-locked .h6-stage *,
body.hv-locked .h6-stage *::before,body.hv-locked .h6-stage *::after{animation-play-state:paused !important;}
/* وعد التجربة تحت الزرين — نصه وعدده من البليد (محرك حدود الاستخدام).
   سطر صغير لا كبسولة: الهيرو فيه كبسولتان (العنوان العلوي والزر الممتلئ)
   وثالثة تزاحمهما، والوعد سند للزر لا نداء ثالث. */
.h6-free{display:flex;align-items:center;gap:7px;margin-block-end:22px;
  font-size:13.5px;font-weight:600;color:var(--ink-3);}
.h6-free b{font-weight:800;color:var(--tq-dark);}
.h6-free i{font-size:16px;color:var(--tq);}
/* السطر نفسه في نهاية المميزات وشريط الأسعار: يتوسط، ويقلب ألوانه على
   السطح الداكن (اللون الحيوي --tq-accent لا --tq: الأخير يغرق في الداكن) */
.h6-free.is-center{justify-content:center;text-align:center;}
.h6-feats-end .h6-free{margin-block:16px 0;color:var(--ink-3);font-size:13.5px;}
.h6-cta-frame .h6-free{margin-block:20px 0;}
.h6-free.on-dark{color:rgba(255,255,255,.82);}
.h6-free.on-dark b{color:#fff;}
.h6-free.on-dark i{color:var(--tq-accent);}
.h6-trust{display:flex;flex-wrap:wrap;gap:10px 28px;}
.h6-trust li{display:flex;flex-direction:column;line-height:1.3;}
.h6-trust b{font-size:20px;font-weight:900;color:var(--tq-dark);font-variant-numeric:tabular-nums;}
.h6-trust span{font-size:12px;color:var(--ink-3);font-weight:600;}
/* سطر «يكبر ويتحسن» تحت ارقام المقدمة: خبر ثانوي لا يزاحم الارقام فوقه
   — بوزنها نفسه وحجم اصغر، وايقونة صعود بلون الهوية. */
.h6-grow{display:flex;align-items:center;gap:7px;margin-block-start:14px;font-size:13px;font-weight:600;color:var(--ink-3);}
.h6-grow i{font-size:16px;color:var(--tq-dark);flex:none;}

/* ══════ المسرح — نافذة باني الاختبار ══════ */
.h6-stage{position:relative;perspective:1500px;}
/* هالة محصورة خلف النافذة بدل الغسلة التي كانت تصبغ نصف الشاشة: اللون
   يخدم النموذج فيرتفع عن الورق، ولا يزاحم لوحة الباني الفيروزية.
   ⚠️ بلا filter وبلا transform — أي تحويل دائم على المسرح يبهت نصه. */
.h6-stage::before{
  content:'';position:absolute;inset:-14% -9%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(45,212,191,.26),rgba(45,212,191,.10) 55%,rgba(45,212,191,0) 78%);
}
/* بلا transform افتراضي وبلا preserve-3d: أي تحويل ثلاثي دائم يجعل
   المتصفح يرسم الطبقة ثم يقيسها، فيبهت النص ويرى كطبقة زجاجية.
   الميل يحقن من JS عند التحويم فقط ويمسح عند المغادرة. */
.h6-stage-in{position:relative;z-index:1;transition:transform .5s var(--ease);}
.h6-ring{position:absolute;inset:-7% -5%;border-radius:50%;border:1.5px dashed rgba(28,163,144,.38);animation:h6spin 50s linear infinite;pointer-events:none;}
.h6-ring::before{content:'';position:absolute;width:11px;height:11px;border-radius:50%;background:var(--tq);box-shadow:0 0 0 6px rgba(28,163,144,.16);}
.h6-ring::before{inset-block-start:-6px;inset-inline-start:50%;}
@keyframes h6spin{to{transform:rotate(360deg);}}

/* ظلان لا واحد: تماس قريب يثبت النافذة على الورق، ومحيط بعيد يرفعها.
   الظل البعيد وحده كان يكفي على الأرضية المصبوغة، ويبهت على الفاتحة. */
.h6-win{position:relative;background:var(--paper);border:1px solid #E7EEED;border-radius:22px;box-shadow:0 2px 6px rgba(19,78,74,.055),0 26px 64px rgba(19,78,74,.14);overflow:hidden;
  /* توكنات منقولة من الباني الحقيقي (app.css + bank-panel-tone.css) */
  --bk:#168676;        /* لوحة بنك الأسئلة */
  --bk-track:#126C5E;  /* مسار التبويبات داخل اللوحة */
  --bk-line:#f1f3f4;   /* حد بطاقة السؤال — أخف من الباني لأن المقياس أصغر */
  --doc-line:#565656;  /* حد جدول الورقة — رمادي بدل الأسود الصلب */
  --doc-soft:#e2e2e2;  /* شبكة جدول الأسئلة (--paper-border-color الكلاسيكي) */
  --doc-hdr:#c9c9c9;   /* حد الترويسة (--paper-header-border الافتراضي #ccc) */
  --doc-answer:#d31111; /* حبر نموذج الإجابة (--paper-answer-ink الافتراضي أحمر) */
}
.h6-win-bar{display:flex;align-items:center;gap:9px;padding:7px 11px;background:var(--surface-2);border-block-end:1px solid #EDF3F2;}
.h6-win-dots{display:flex;gap:6px;}
.h6-win-dots i{width:9px;height:9px;border-radius:50%;background:#FF5F57;}
.h6-win-dots i:nth-child(2){background:#FEBC2E;}
.h6-win-dots i:nth-child(3){background:#28C840;}
.h6-win-url{flex:1;background:var(--paper);border:1px solid #EDF3F2;border-radius:8px;font-size:10.5px;color:var(--ink-3);padding:2px 12px;text-align:center;}

/* نسبة الباني (col-lg-4/col-lg-8 = 1:2)، مع حد أدنى يمنع انسحاق
   لوحة البنك في المقاسات المتوسطة (980–1200px) حيث يضيق المسرح */
.h6-win-body{display:grid;grid-template-columns:minmax(198px,.58fr) 1fr;min-height:352px;align-items:stretch;}

/* ══ عمود الورقة — منسوخ عن header-detailed و table-paper في الباني ══
   توكنات القالب الكلاسيكي: صف السؤال #f0f0f0، الحدود #e2e2e2،
   حد الترويسة #ccc، والحبر أسود. */
/* عمود الورقة: شريط الإجراءات ثم الورقة داخل غلاف مطلق — فلا يزيد
   محتواها ارتفاع النافذة، بل تتمرر ويبقى الارتفاع محكوماً بعمود البنك */
.h6-papercol{position:relative;padding:10px;background:#F1F3F5;overflow:hidden;display:flex;flex-direction:column;gap:6px;}
.h6-docwrap{position:relative;flex:1 1 auto;min-height:0;}
.h6-ptools{display:flex;align-items:center;gap:3px;flex:0 0 auto;min-width:0;}
.h6-ptools .pt{
  display:inline-flex;align-items:center;gap:3px;height:20px;padding-inline:5px;
  border-radius:6px;background:#fff;border:1px solid #E3E8EA;color:var(--tq-dark);
  font-size:7.5px;font-weight:700;white-space:nowrap;flex:0 0 auto;
}
.h6-ptools .pt i{font-size:10px;}
.h6-ptools .pt-solid{background:var(--tq);border-color:var(--tq);color:#fff;}
/* زر التحويل الإلكتروني بلون ثانوي يميزه عن الطباعة بلا منافستها */
.h6-ptools .pt-elec{background:var(--tq-tint);border-color:rgba(28,163,144,.28);color:var(--tq-ink);}
/* زر الخيارات: قرص ممتلئ بوزن إخوته لا فراغ بينها */
.h6-ptools .pt-ico{width:20px;padding-inline:0;justify-content:center;color:var(--tq-dark);}
.h6-ptools .pt-ico i{font-size:11px;}
.h6-doc{position:absolute;inset:10px;background:#fff;border:1px solid #E8ECEE;border-radius:3px;padding:9px;font-size:8.5px;line-height:1.4;color:#000;
  overflow-y:auto;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior:contain;}
.h6-doc::-webkit-scrollbar{width:0;height:0;}

/* ── الترويسة المتقدمة ── */
.h6-dh{width:100%;border-collapse:collapse;text-align:center;table-layout:fixed;margin-block-end:4px;}
.h6-dh td{border:1px solid var(--doc-hdr);vertical-align:middle;padding:0;}
.h6-dh td.c1,.h6-dh td.c3{width:35%;}
.h6-dh td.c2{width:30%;padding:2px;}
.h6-dh td.c2 img{display:inline-block;width:auto;max-width:100%;max-height:30px;object-fit:contain;}
.h6-dh .r{display:block;border-block-end:1px solid var(--doc-hdr);padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;}
.h6-dh .r:last-child{border-block-end:none;}
.h6-dh .r b{font-weight:700;}
/* عمود الجهة (اليمين في RTL) محاذاته وسطى كما في الورقة */
.h6-dh td.c1 .r{text-align:center;}
/* سطر منقط يكمل فراغ الحقل كما في الورقة المطبوعة */
.h6-dh .r.fill{display:flex;align-items:baseline;gap:4px;}
.h6-dh .r.fill::after{content:'';flex:1 1 auto;border-block-end:1px dotted #9a9a9a;translate:0 -1px;}
/* درجة الاختبار: التسمية ثم خانتان — الدرجة في الخانة الطرفية كما في الأصل */
.h6-dh .gs{display:grid !important;grid-template-columns:1fr .5fr .5fr;padding:0;align-items:stretch;}
.h6-dh .gs i{font-style:normal;padding:1px 4px;text-align:center;}
.h6-dh .gs i:first-child{text-align:start;padding-inline-start:6px;}
.h6-dh .gs .b1,.h6-dh .gs .b2{border-inline-start:1px solid var(--doc-hdr);}
.h6-dh .gs .b2{font-weight:700;font-variant-numeric:tabular-nums;font-size:1.15em;}
.h6-dh td.ttl{text-align:center;font-weight:700;font-size:8.5px;padding:3px 0;}

/* ── عنوان القسم + صندوق الدرجة ── */
.h6-doc-sec{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;margin-block:0 4px;}
.h6-doc-sec + .h6-qt + .h6-doc-sec,
.h6-qt + .h6-doc-sec{margin-block-start:6px;}
.h6-doc-sec[hidden]{display:none;}
.h6-doc-stats{display:flex;align-items:stretch;flex:0 0 auto;border:1px solid var(--doc-soft);border-radius:2px;overflow:hidden;margin-inline-end:8px;}
.h6-doc-stats i{font-style:normal;display:grid;place-items:center;min-width:24px;height:16px;background:#fff;font-weight:700;font-size:1.1em;font-variant-numeric:tabular-nums;}
.h6-doc-stats .c{border-inline-start:1px solid var(--doc-soft);}

/* ── جدول الأسئلة: صف السؤال رمادي وصف الخيارات أبيض، بشبكة كاملة ── */
.h6-qt{width:100%;border-collapse:collapse;}
.h6-qt td{border:1px solid var(--doc-soft);padding:2px 3px;vertical-align:middle;text-align:center;}
.h6-qt tr.qr > td{background:#f0f0f0;}
.h6-qt td.qn{width:8%;font-weight:700;}
.h6-qt td.qx{text-align:start;padding-inline-start:5px;}
.h6-qt td.tfc{width:12%;text-align:center;letter-spacing:.5px;background:inherit;}
/* قسم صح/خطأ: تناوب رمادي/أبيض كما في #paperTF (app.css:1729)،
   وخانة القوسين ترث لون صفها. */
.h6-qt.tf tr:nth-child(odd) > td{background:#f0f0f0;}
.h6-qt.tf tr:nth-child(even) > td{background:#fff;}
.h6-qt.tf td.qn{width:5%;}
.h6-qt.tf td.qx{padding:3px 4px;font-weight:500;}
.h6-qt tr.cr > td{padding:0;}
/* table-layout:fixed يجعل خانات أ وب وج متساوية فتتراص
   رأسياً عبر كل الأسئلة مهما اختلف طول الخيار */
.h6-cht{width:100%;border-collapse:collapse;table-layout:fixed;}
.h6-cht td{border:1px solid var(--doc-soft);padding:1px 3px;vertical-align:middle;}
.h6-cht td.lt{width:16px;min-width:16px;max-width:16px;text-align:center;font-weight:400;padding-inline:0;}
/* قرص الحرف — يطوق بالأحمر عند كشف نموذج الإجابة، نظير
   .answer-circle.is-correct.show-answer في الباني (app.css:3671) */
.h6-cht .lc{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;border:1px solid transparent;line-height:1;}
.h6-stage.is-answers .h6-cht .lc.is-correct{border-color:var(--doc-answer);color:var(--doc-answer);font-weight:700;}

/* رمز صح/خطأ داخل القوسين — محجوز المساحة ومخفي حتى الكشف فلا تقفز الخانة */
.h6-qt td.tfc .p{font-style:normal;}
.h6-qt td.tfc .a{font-style:normal;display:inline-block;min-width:11px;text-align:center;visibility:hidden;color:var(--doc-answer);font-weight:700;}
.h6-stage.is-answers .h6-qt td.tfc .a{visibility:visible;}

/* زر «الأجوبة» في شريط الورقة يضيء مع الكشف */
.h6-stage.is-answers .h6-ptools .pt-ans{background:var(--tq);border-color:var(--tq);color:#fff;}
.h6-cht td.cx{text-align:start;padding-inline-start:4px;}
/* خانات السطر الناقص تبقى فارغة بلا شبكة */
.h6-cht td.empty{border-color:transparent;}
.h6-qt tr{animation:h6docIn .5s var(--ease) both;}
@keyframes h6docIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
/* هيكل باهت يشغل مكان الأسئلة قبل وصولها — كل صف يختفي حين يحل محله سؤال */
.h6-skel{display:flex;flex-direction:column;gap:3px;margin-block-start:3px;}
.h6-skel .sk{display:flex;flex-direction:column;gap:2px;padding:3px 5px;border:1px solid #efefef;background:#fafafa;}
.h6-skel .sk i{display:block;height:6px;border-radius:3px;background:#e7e7e7;}
.h6-skel .sk .q{width:72%;}
.h6-skel .sk .c{width:38%;height:5px;background:#eeeeee;}
.h6-skel .sk .p{width:18%;height:5px;background:#eeeeee;margin-inline-start:auto;}
.h6-skel .sk.is-filled{display:none;}
/* عنوان القسم الثاني باهت حتى تصل أسئلته */
.h6-doc-sec.is-ghost{opacity:.32;}

/* ══ لوحة بنك الأسئلة — ألوان الباني الحقيقي ══ */
.h6-bank{background:var(--bk);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.h6-bank-top{display:flex;align-items:center;gap:4px;}
.h6-bank-pill{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:27px;border-radius:9999px;background:rgba(255,255,255,.20);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);font-size:10px;font-weight:700;white-space:nowrap;transition:background .15s,box-shadow .15s;}
.h6-bank-pill i{font-size:12.5px;}
/* «توليد ذكي» هو الزر الحي في المسرح — أبيض صلب ليرى أولاً */
.h6-bank-pill.is-live{position:relative;cursor:pointer;background:#fff;color:var(--bk);box-shadow:0 3px 9px rgba(8,40,36,.22);}
/* نبضة خفيفة تلفت إلى الزر الحي الوحيد في المسرح — تسكن بعد أول فتح */
.h6-bank-pill.is-live::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:h6pulse 3.4s ease-out infinite;
}
.h6-bank-pill.is-live.is-touched::before,
.h6-bank-pill.is-live:hover::before{animation:none;}
@keyframes h6pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);}55%,100%{box-shadow:0 0 0 8px rgba(255,255,255,0);}}
@media (prefers-reduced-motion:reduce){.h6-bank-pill.is-live::before{animation:none;}}
/* هدف لمس 46px بلا تغيير مظهر الشريحة (28px) — العنصران المجاوران زخرفيان */
@media (hover:none){.h6-bank-pill.is-live::after{content:'';position:absolute;inset:-11px 0;}}
.h6-bank-pill.is-live:hover,.h6-bank-pill.is-live:focus-visible{background:#fff;color:var(--tq-dark);box-shadow:0 5px 14px rgba(8,40,36,.32);transform:translateY(-1px);}
.h6-bank-dots{width:27px;height:27px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);}
.h6-bank-dots i{font-size:14px;}

.h6-bank-tabs,.h6-bank-tools{display:flex;align-items:center;gap:3px;background:var(--bk-track);border-radius:9999px;padding:3px;}
.h6-bank-tabs > span{position:relative;flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:3px;height:21px;border-radius:9999px;color:#fff;font-size:8px;font-weight:700;white-space:nowrap;}
.h6-bank-tabs > span i{font-size:9px;}
.h6-bank-tabs > span em{position:absolute;inset-block-start:-3px;inset-inline-start:6px;font-style:normal;min-width:12px;height:12px;padding:0 2px;border-radius:999px;background:var(--tq);color:#fff;font-size:7px;line-height:12px;text-align:center;box-shadow:0 1px 3px rgba(3,83,72,.6);}
.h6-bank-tabs > span.on{background:#fff;color:var(--bk);box-shadow:0 3px 8px rgba(8,40,36,.16);}
.h6-bank-search{flex:1 1 auto;min-width:0;position:relative;display:flex;align-items:center;height:21px;border-radius:9999px;background:#fff;padding-inline:21px 8px;}
.h6-bank-search i{position:absolute;inset-inline-start:7px;color:var(--bk);font-size:9px;}
.h6-bank-search em{font-style:normal;font-size:8px;color:#7aa39c;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h6-bank-tool{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;height:21px;padding-inline:7px;border-radius:9999px;background:#fff;color:var(--bk);font-size:8px;font-weight:700;white-space:nowrap;}
.h6-bank-tool i{font-size:9px;}
.h6-bank-tool.is-curr{flex:0 0 auto;}

/* نافذة ثابتة على قائمة البنك — البنك الحقيقي قائمة تمرير لا تفرغ أبداً،
   فنثبت الارتفاع ونستنسخ البطاقات في JS كي يبقى تحت المستعمل بطاقات. */
.h6-bank-list{position:relative;height:322px;overflow:hidden;padding-block-start:1px;}
.h6-bank-pane{display:none;flex-direction:column;gap:5px;}
.h6-bank-pane.is-on{display:flex;animation:h6paneIn .4s var(--ease) both;}
@keyframes h6paneIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media(max-width:780px){.h6-bank-list{height:206px;}}
/* المسرح ضيق هنا: التبويبات بأيقوناتها وعداداتها وحدها */
@media(min-width:781px) and (max-width:1200px){
  .h6-bank-search{display:none;}
  /* عمود الورقة أضيق هنا — «ترتيب» أقل الأزرار أهمية فيسقط أولاً */
  .h6-ptools .pt-sort{display:none;}
}
.h6-qc{flex:0 0 auto;background:#fff;border:1px solid var(--bk-line);border-radius:11px;padding:7px 8px 7px;max-height:260px;overflow:hidden;
  transition:opacity .45s var(--ease),transform .45s var(--ease),max-height .45s var(--ease),margin .45s var(--ease),padding .45s var(--ease),border-width .45s var(--ease);}
/* البطاقة ترتفع عند التحويم كما في الباني (builder-polish) */
.h6-qc:hover{transform:translateY(-2px);border-color:rgba(28,163,144,.55);}
.h6-qc.is-used{opacity:0;transform:translateX(-26px) scale(.95);max-height:0;margin-block:-3px 0;padding-block:0;border-width:0;}
.h6-qc-badges{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-block-end:5px;}
/* ألوان الشارات كما في الاختبار الحقيقي حرفياً (app.css:1244–1310):
   صبغة فاتحة بحد خفيف، والحبر بلونه المشبع. الفارق الوحيد أن الوزن
   700 بدل 500 لأن المسرح يعرضها عند 7.5px فيذوب الوزن الخفيف. */
.h6-bdg{border-radius:7px;padding:1px 6px;font-size:7.5px;font-weight:700;line-height:1.7;border:1px solid rgba(0,0,0,.08);background:#FFF6A1;color:#3a3a00;}
.h6-bdg.b-easy{background:#d7f3ea;color:#065f46;border-color:rgba(6,95,70,.15);}
.h6-bdg.b-medium{background:#FFF6A1;color:#3a3a00;border-color:rgba(58,58,0,.15);}
.h6-bdg.b-hard{background:#fee2e2;color:#7f1d1d;border-color:rgba(127,29,29,.15);}
.h6-bdg.b-remember{background:rgba(37,99,235,.12);color:#1d4ed8;border-color:rgba(37,99,235,.22);}
.h6-bdg.b-understand{background:rgba(79,70,229,.12);color:#3730a3;border-color:rgba(79,70,229,.22);}
.h6-bdg.b-apply{background:rgba(14,165,233,.12);color:#0369a1;border-color:rgba(14,165,233,.22);}
.h6-bdg.b-analyze{background:rgba(124,58,237,.12);color:#5b21b6;border-color:rgba(124,58,237,.22);}
.h6-bdg.b-evaluate{background:rgba(100,116,139,.12);color:#334155;border-color:rgba(100,116,139,.22);}
.h6-bdg.b-create{background:rgba(192,38,211,.12);color:#86198f;border-color:rgba(192,38,211,.22);}
.h6-qc-text{font-size:9.5px;line-height:1.55;color:#0B2545;font-weight:500;}
.h6-qc-choices{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-block:6px 6px;}
/* القيم الفائزة فعلاً في الباني: app.css:3816 (حد رمادي فاتح لا تيل سميك)
   + builder-polish.css:281 للحالة النشطة. والنص يلتف كما في الأصل لا يقص. */
.h6-ch{border:1px solid #eff2f4;border-radius:8px;background:#fff;color:#0B2545;padding:3px 5px;font-size:8px;line-height:1.45;text-align:center;overflow-wrap:anywhere;}
.h6-ch.on{background:rgba(28,163,144,.10);border-color:var(--tq);color:var(--tq);font-weight:600;}
.h6-qc-actions{display:flex;align-items:center;gap:5px;}
.h6-qc-menu{flex:0 0 21px;height:20px;display:grid;place-items:center;background:#fff;border:1px solid #edf0f2;border-radius:7px;color:#7c8794;}
.h6-qc-menu i{font-size:11px;}
.h6-qc-add{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(28,163,144,.45);color:var(--tq);border-radius:9px;padding:3px 6px;font-weight:600;font-size:8.5px;}
.h6-qc-add b{font-weight:900;}

/* شبح البطاقة الطائر إلى الورقة — نظير .fly-to-paper-ghost في الباني */
.h6-fly{
  position:fixed;z-index:1100;pointer-events:none;opacity:.95;
  border-radius:11px;background:var(--tq-tint);
  border:1px solid rgba(28,163,144,.5);box-shadow:0 10px 24px rgba(19,78,74,.2);
  transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s ease;
}
@media (prefers-reduced-motion:reduce){.h6-fly{display:none;}}

/* خاتمة الدورة: وميض خانات الدرجة قبل إعادة البناء */
.h6-stage.is-done .h6-doc-stats .c,
.h6-stage.is-done .h6-dh .gs .b2{animation:h6flash 1s ease-out 2;}
@keyframes h6flash{0%,100%{background:transparent;color:inherit;}45%{background:var(--tq-tint);color:var(--tq-ink);}}
@media (prefers-reduced-motion:reduce){.h6-stage.is-done .h6-doc-stats .c,.h6-stage.is-done .h6-dh .gs .b2{animation:none;}}


.h6-float{
  position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);
  padding:8px 10px;display:flex;align-items:center;gap:8px;z-index:4;animation:h6floaty 6s ease-in-out infinite;
}
.h6-float em{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--tq-tint);color:var(--tq-dark);}
.h6-float em i{font-size:14px;}
.h6-float b{display:block;font-weight:800;font-size:12.5px;line-height:1.3;white-space:nowrap;}
.h6-float span{display:block;font-size:10.5px;color:var(--ink-3);line-height:1.35;}
/* هندسة ثابتة لا تتبع النص: الرسائل تتبادل على البطاقة، فلو تبع عرضها
   وارتفاعها طول الرسالة رقصت مع كل تبديل. عرض مقطوع وسطران محجوزان. */
.h6-float{width:186px;}
.h6-float > div{min-width:0;min-height:46px;display:flex;flex-direction:column;justify-content:center;}
/* التبديل بالتلاشي وحده (الحركة العائمة translate مستقلة عنه فلا تتعثر) */
.h6-float{transition:opacity .4s var(--ease);}
.h6-float.is-swap{opacity:0;}
/* زاويتان: اعلى اليمين · اسفل اليسار. واعلى اليسار لعداد الاسئلة
   (h6-count) فلا بطاقة فيه، واسفل اليمين تركت فارغة عمدا. */
.h6-float.f1{inset-block-start:-26px;inset-inline-start:-28px;}
.h6-float.f2{inset-block-end:-22px;inset-inline-end:-26px;animation-delay:1.6s;}
.h6-float.f2 em{background:var(--amber-tint);color:var(--amber-ink);}
/* بطاقة بلوم: ارضية مشربة وحد ملون وايقونة ممتلئة — تسبق العين اختيها.
   ومستوياتها الستة رقائق صغيرة: ست كلمات بينها نقاط تقرا جملة واحدة،
   والرقائق تقرا ستة اشياء معدودة. */
.h6-float.is-hero{background:var(--tq-tint);border-color:rgba(28,163,144,.34);box-shadow:0 18px 40px -22px rgba(13,92,82,.55);}
.h6-float.is-hero em{background:var(--tq);color:#fff;}
.h6-float.is-hero b{color:var(--tq-ink);}
/* ⚠️ المحدد بـspan عمدا: قاعدة ‎.h6-float span{display:block}‎ اسبق تخصيصا
   من صنف وحده (صنف + نوع)، فكانت تغلب الشبكة وتصف الرقائق سطرا واحدا
   يفيض عن البطاقة. */
.h6-float span.h6-float-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-block-start:5px;}
.h6-float-chips i{
  font-style:normal;font-size:9.5px;font-weight:800;line-height:1;text-align:center;
  padding:3px 4px;border-radius:100px;background:var(--paper);color:var(--tq-ink);
  border:1px solid rgba(28,163,144,.26);white-space:nowrap;
}
@keyframes h6floaty{0%,100%{translate:0 0;}50%{translate:0 -12px;}}
.h6-count{
  position:absolute;inset-block-start:34px;inset-inline-end:-30px;z-index:5;
  background:var(--tq);color:#fff;border-radius:16px;padding:10px 14px;text-align:center;
  box-shadow:var(--sh-tq);transform:rotate(4deg);animation:h6floaty 7s ease-in-out infinite .8s;
}
.h6-count b{display:block;font-weight:900;font-size:24px;line-height:1;font-variant-numeric:tabular-nums;}
.h6-count span{font-size:11px;opacity:.92;font-weight:600;}
@media(max-width:1180px){.h6-float.f1{inset-inline-start:-10px;}.h6-float.f2{inset-inline-end:-10px;}.h6-count{inset-inline-end:-10px;}}
@media(max-width:980px){
  .h6-float.f1{inset-inline-start:6px;}.h6-float.f2{inset-inline-end:6px;}.h6-count{inset-inline-end:6px;}
  .h6-stage{perspective:none;}
}
/* دون 780px لا تتسع الورقة وبطاقات البنك جنباً إلى جنب — نبقي لوحة البنك
   وحدها (هي مشهد المنتج)، وتظهر الورقة في قسم «هذه ورقة حقيقية» لاحقاً */
/* دون 780px يصير العمودان صفين: الورقة أولاً لأنها الناتج المباع،
   والبنك تحتها — بدل إخفاء الورقة وحرمان نصف الزوار من المشهد. */
@media(max-width:780px){
  .h6-win-body{grid-template-columns:1fr;min-height:0;}
  .h6-papercol{order:-1;height:248px;}
  .h6-doc{font-size:7.5px;padding:8px;}
  .h6-bank-tool.is-curr{font-size:9px;}
}
@media(max-width:600px){
  .h6-float{padding:9px 12px;border-radius:13px;}
  .h6-float em{width:30px;height:30px;}.h6-float b{font-size:13px;}.h6-float span{font-size:11px;}
  .h6-float{width:168px;}
  .h6-float.f1{inset-block-start:-18px;}.h6-float.f2{inset-block-end:-16px;}
  .h6-count{padding:8px 11px;}.h6-count b{font-size:19px;}
  .h6-ring{display:none;}
}

/* ══════════════════════════════════════════════════════════════════
   لوحة التوليد الذكي — معاينة مطابقة لـ #smartGenModal في الباني
   ══════════════════════════════════════════════════════════════════ */
.h6-sg{position:fixed;inset:0;z-index:1200;}
.h6-sg[hidden]{display:none !important;}
.h6-sg-scrim{position:absolute;inset:0;background:rgba(11,27,26,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease);}
.h6-sg.open .h6-sg-scrim{opacity:1;}
.h6-sg-panel{
  position:absolute;inset-block:0;inset-inline-start:0;width:min(520px,94vw);
  background:var(--paper);display:flex;flex-direction:column;
  box-shadow:var(--sh-3);transform:translateX(100%);transition:transform .38s var(--ease);
}
.h6-sg.open .h6-sg-panel{transform:none;}
.h6-sg-head{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--tq);color:#fff;}
.h6-sg-icon{width:42px;height:42px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.18);}
.h6-sg-icon i{font-size:22px;}
.h6-sg-head h2{color:#fff;font-size:19px;margin:0 0 2px;}
.h6-sg-head p{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.5;}
/* (0,2,0) فوق تصفير .h6 button (0,1,1): بصنف واحد كانت الارضية الشفافة تسرق */
.h6-sg-head .h6-sg-close{margin-inline-start:auto;width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;transition:background .2s;}
.h6-sg-head .h6-sg-close:hover{background:rgba(255,255,255,.3);}
.h6-sg-close i{font-size:19px;}
.h6-sg-progress{height:3px;background:var(--tq-tint);}
.h6-sg-progress span{display:block;height:100%;width:25%;background:var(--tq);transition:width .4s var(--ease);}

.h6-sg-tabs{display:flex;gap:4px;margin:14px 16px 0;padding:4px;background:var(--surface);border-radius:12px;}
.h6-sg-tabs button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink-2);transition:.2s var(--ease);}
.h6-sg-tabs button em{font-style:normal;width:19px;height:19px;flex:0 0 auto;border-radius:6px;display:grid;place-items:center;background:var(--line);color:var(--ink-2);font-size:11px;font-weight:800;}
.h6-sg-tabs button:hover{background:var(--tq-tint);color:var(--tq-ink);}
.h6-sg-tabs button.on{background:var(--tq);color:#fff;box-shadow:0 6px 14px rgba(28,163,144,.28);}
.h6-sg-tabs button.on em{background:rgba(255,255,255,.3);color:#fff;}
@media(max-width:520px){.h6-sg-tabs button span{display:none;}}

.h6-sg-body{flex:1 1 auto;overflow-y:auto;padding:18px 16px;}
.h6-sg-pane[hidden]{display:none;}
.h6-sg-path{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:var(--tq-tint);color:var(--tq-ink);border-radius:10px;padding:9px 12px;font-size:12.5px;margin-block-end:16px;}
.h6-sg-path i{font-size:15px;}
.h6-sg-step{display:flex;align-items:flex-start;gap:11px;margin-block-end:12px;}
.h6-sg-num{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:var(--tq-tint);color:var(--tq-dark);}
.h6-sg-num i{font-size:18px;}
.h6-sg-step h3{font-size:15.5px;margin:0;}
.h6-sg-step h3 small{font-weight:500;color:var(--ink-3);font-size:12.5px;}
.h6-sg-step span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.6;}
.h6-sg-rows{display:flex;flex-direction:column;gap:6px;}
.h6-sg-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;font-size:13.5px;transition:.2s var(--ease);}
.h6-sg-row:hover{background:var(--surface);border-color:var(--tq);}
.h6-sg-row input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--tq);}
.h6-sg-row span{flex:1;min-width:0;}
.h6-sg-row em{font-style:normal;flex:0 0 auto;background:var(--surface);color:var(--ink-3);border-radius:100px;padding:2px 9px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.h6-sg-row:has(input:checked){border-color:var(--tq);background:var(--tq-tint);}
.h6-sg-row:has(input:checked) em{background:#fff;color:var(--tq-ink);}
.h6-sg-switch{display:flex;align-items:center;gap:10px;margin-block-start:14px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;font-size:13px;color:var(--ink-2);}
.h6-sg-switch input{width:17px;height:17px;accent-color:var(--tq);}

.h6-sg-types{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@media(max-width:520px){.h6-sg-types{grid-template-columns:1fr;}}
.h6-sg-type{position:relative;border:1.5px solid var(--line);border-radius:13px;padding:13px 12px;text-align:center;}
.h6-sg-type.on{border-color:var(--tq);background:var(--tq-tint);}
.h6-sg-type i{font-size:20px;color:var(--ink-3);}
.h6-sg-type.on i{color:var(--tq-dark);}
.h6-sg-type b{display:block;font-size:13.5px;margin-block:5px 2px;}
.h6-sg-type span{display:block;font-size:11.5px;color:var(--ink-3);}
.h6-sg-type em{position:absolute;inset-block-start:9px;inset-inline-end:9px;font-style:normal;min-width:26px;height:24px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;}
.h6-sg-type.on em{background:var(--tq);border-color:var(--tq);color:#fff;}
.h6-sg-total{margin-block-start:14px;text-align:center;font-size:13.5px;color:var(--ink-2);background:var(--surface);border-radius:11px;padding:10px;}
.h6-sg-total b{color:var(--tq-dark);font-size:17px;}

.h6-sg-tunes{display:flex;flex-direction:column;gap:7px;}
.h6-sg-tune{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:11px;}
.h6-sg-tune i{font-size:18px;color:var(--tq-dark);flex:0 0 auto;}
.h6-sg-tune b{font-size:13.5px;}
.h6-sg-tune em{font-style:normal;margin-inline-start:auto;font-size:12px;color:var(--ink-3);text-align:end;}

.h6-sg-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-block-start:1px solid var(--line);background:var(--paper);}
.h6-sg-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--tq-ink);background:var(--tq-tint);border-radius:100px;padding:7px 13px;}
.h6-sg-live i{font-size:15px;color:var(--tq-dark);}
.h6-sg-foot .h6-btn{margin-inline-start:auto;}

/* ══════ شريط الأرقام ══════ */
.h6-strip{
  background:var(--ink-surface);color:#fff;padding:15px 0;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);
}
.h6-strip-track{display:flex;width:max-content;animation:h6slideX 44s linear infinite;}
.h6-strip:hover .h6-strip-track{animation-play-state:paused;}
@keyframes h6slideX{from{transform:translateX(0);}to{transform:translateX(50%);}}
.h6-strip-track span{display:inline-flex;align-items:center;gap:10px;padding-inline:26px;font-weight:700;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.h6-strip-track span i{font-size:17px;color:var(--tq-accent);}
.h6-strip-track span::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--tq-accent);margin-inline-start:26px;opacity:.7;}

/* ══════ المسارات الثلاثة ══════ */
.h6-paths{background:var(--surface);}
.h6-paths-grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:26px;align-items:stretch;}
@media(max-width:900px){.h6-paths-grid{grid-template-columns:1fr;gap:18px;}}
/* العمود يمتد لارتفاع اللوحة المقابلة، فالتوسيط يمنع سقوط الفائض فراغاً أسفله
   — ويهم أكثر عند تبويبين (إطفاء الاختبار الإلكتروني) حيث الفارق أكبر */
.h6-path-list{display:flex;flex-direction:column;justify-content:center;gap:14px;}
.h6-path{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:0 14px;text-align:start;width:100%;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.h6-path:hover{border-color:rgba(28,163,144,.35);transform:translateY(-2px);box-shadow:var(--sh-1);}
/* ‎.h6 :focus-visible‎ العامة تفرض border-radius:8px بتخصيص أعلى، فتنكمش زوايا
   البطاقة من 26px عند الوصول إليها بـTab — نعيد تأكيد نصف القطر محلياً */
.h6-path:focus-visible{border-radius:var(--r-lg);}
.h6-path.on{border-color:var(--tq);box-shadow:0 18px 40px -22px rgba(28,163,144,.6);}
.h6-path-ico{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3);transition:.4s var(--ease);}
.h6-path-ico i{font-size:22px;}
.h6-path.on .h6-path-ico{background:var(--tq);border-color:transparent;color:#fff;box-shadow:var(--sh-tq);}
.h6-path-txt{min-width:0;}
.h6-path-txt b{display:block;font-weight:800;font-size:20px;margin-block-end:4px;transition:color .3s;}
.h6-path.on .h6-path-txt b{color:var(--tq-dark);}
.h6-path-txt i{display:block;font-style:normal;color:var(--ink-3);font-size:14.5px;line-height:1.7;}
/* visibility تخرج الوعد المطوي من شجرة الوصول — max-height/opacity وحدهما تبقيانه في اسم التبويب */
.h6-path-go{grid-column:1 / -1;display:flex;align-items:center;gap:7px;font-weight:800;font-size:14.5px;color:var(--tq-dark);max-height:0;opacity:0;overflow:hidden;visibility:hidden;transition:max-height .45s var(--ease),opacity .3s var(--ease),margin .45s var(--ease),visibility .45s var(--ease);}
.h6-path-go i{font-size:17px;transition:transform .3s var(--ease);}
.h6-path.on .h6-path-go{max-height:40px;opacity:1;margin-block-start:24px;visibility:visible;}
.h6-path.on:hover .h6-path-go i{transform:translateX(-5px);}

.h6-path-panel{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--night-surface);color:#fff;
  padding:32px;display:grid;grid-template-rows:1fr;isolation:isolate;
  box-shadow:0 40px 80px -34px rgba(15,42,39,.85),inset 0 1px 0 rgba(255,255,255,.08);
}
.h6-path-panel::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:var(--tq);opacity:.28;filter:blur(90px);inset-block-start:-160px;inset-inline-end:-140px;z-index:0;pointer-events:none;}
.h6-path-panel::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='.12'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(85% 70% at 80% 0%,#000,transparent);mask-image:radial-gradient(85% 70% at 80% 0%,#000,transparent);
}
/* اللوحات تتراص في خلية واحدة: المخفية تحتفظ بمكانها (visibility) فلا يتغير
   ارتفاع الحاوية بين التبويبات، وتبقى خارج شجرة الوصول وترتيب التنقل */
.h6-pp{display:flex;flex-direction:column;grid-area:1/1;visibility:hidden;position:relative;z-index:1;}
.h6-pp[hidden]{display:flex;}
.h6-pp.on{visibility:visible;animation:h6ppIn .5s var(--ease) both;}
@keyframes h6ppIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.h6-pp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-block-end:18px;flex-wrap:wrap;}
.h6-pp-head h3{color:#fff;font-size:clamp(20px,2.4vw,26px);}
.h6-pp-badge{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;font-weight:800;font-size:12.5px;color:var(--tq-tint);background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.32);border-radius:100px;padding:6px 13px;}
.h6-pp-badge i{width:6px;height:6px;border-radius:50%;background:var(--tq-accent);box-shadow:0 0 0 3px rgba(45,212,191,.22);animation:h6floaty 3.4s ease-in-out infinite;}
.h6-pp-steps{display:flex;flex-direction:column;gap:12px;flex:1;}
.h6-pp-steps li{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 14px;transition:.3s var(--ease);}
.h6-pp-steps li:hover{background:rgba(45,212,191,.10);border-color:rgba(45,212,191,.3);}
.h6-pp-steps em{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:rgba(45,212,191,.16);color:var(--tq-accent);font-style:normal;}
.h6-pp-steps em i{font-size:19px;}
.h6-pp-steps b{display:block;font-size:15.5px;font-weight:800;line-height:1.4;}
.h6-pp-steps span{display:block;font-size:13.5px;color:rgba(255,255,255,.84);line-height:1.6;}
.h6-pp-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-block-start:22px;padding-block-start:18px;border-block-start:1px solid rgba(255,255,255,.1);}
.h6-pp-note{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:rgba(255,255,255,.8);}
.h6-pp-note i{font-size:16px;color:var(--tq-accent);}
/* شريط إثبات أسفل اللوحة: ثلاث حقائق قصيرة من واقع النظام */
.h6-pp-proof{display:flex;flex-wrap:wrap;gap:6px 16px;margin-block-start:14px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82);}
.h6-pp-proof span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.h6-pp-proof span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--tq-accent);opacity:.85;flex:0 0 auto;}
@media(max-width:600px){.h6-path-panel{padding:22px;border-radius:var(--r-lg);}.h6-path{padding:16px;border-radius:var(--r-md);}.h6-path:focus-visible{border-radius:var(--r-md);}.h6-path-txt b{font-size:17px;}}

/* ══════ معاينة الورقة + الأشكال ══════ */
.h6-paper{background:var(--paper);}
.h6-paper-shell{position:relative;overflow:hidden;background:var(--ink-surface);border-radius:var(--r-xl);padding:clamp(28px,5vw,60px);}
.h6-paper-shell::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;background:var(--tq-accent);opacity:.22;filter:blur(100px);inset-block-start:-140px;inset-inline-start:-120px;pointer-events:none;}
.h6-paper-shell > *{position:relative;z-index:1;}
.h6-paper-shell .h6-sec-head{margin-block-end:36px;}
.h6-paper-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;}
@media(max-width:900px){.h6-paper-grid{grid-template-columns:1fr;}}
.h6-ptabs{display:flex;gap:9px;justify-content:center;margin-block-end:20px;flex-wrap:wrap;}
.h6-ptabs button{min-height:44px;padding:9px 20px;border-radius:100px;font-weight:700;font-size:14.5px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.16);transition:.3s var(--ease);}
.h6-ptabs button:hover{background:rgba(255,255,255,.18);color:#fff;}
.h6-ptabs button.on{background:var(--tq-accent);border-color:var(--tq-accent);color:var(--night);box-shadow:0 10px 24px rgba(45,212,191,.35);}
.h6-pmock{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.35);transform:perspective(1400px) rotateX(5deg);transition:transform .6s var(--ease),opacity .3s;}
.h6-pmock:hover{transform:perspective(1400px) rotateX(0) translateY(-6px);}
.h6-pmock.swap{opacity:.4;}
.h6-pmock img{display:block;width:100%;}
/* الورقة الحية في اطار: بلا تحويل ثلاثي الابعاد (يرجف نص الاطار) وارتفاعه
   يكتبه JS من رسالة الاطار فلا شريط تمرير داخلي؛ وهيكل نابض حتى الرسم الاول */
/* مع الورقة الحية: عمود الورقة اعرض وفراغات القسم اضيق كي تظهر الورقة بعرضها */
@media(min-width:901px){.h6-paper-grid:has(.h6-pframe){grid-template-columns:1.6fr .6fr;gap:22px;}}
/* الحاسب المحمول (٩٠١–١٢٠٠): عمود اللوحة اعرض قليلا كي تقع رقاقتان في السطر لا واحدة */
@media(min-width:901px) and (max-width:1200px){.h6-paper-grid:has(.h6-pframe){grid-template-columns:1.35fr .8fr;}.h6-paper-shell:has(.h6-pframe) .h6-themes{padding:20px;}.h6-paper-shell:has(.h6-pframe) .h6-chip{padding:8px 11px;font-size:12.5px;min-height:40px;}}
/* ما فوق الورقة صف اول في عمود الورقة، واللوحة والورقة في الصف الثاني معا
   فتبدا اللوحة عند اول الورقة. على الشاشة الضيقة الشبكة عمود واحد بترتيب المستند */
.h6-paper-grid{grid-template-rows:auto auto;}
.h6-paper-top{grid-column:1 / -1;grid-row:1;display:flex;flex-direction:column;align-items:center;}
.h6-paper-top .h6-paper-online{width:100%;max-width:760px;}
@media(min-width:901px){
  .h6-paper-view{grid-column:1;grid-row:2;}
  .h6-themes{grid-column:2;grid-row:2;}
  /* الاطار بطول الورقة كلها (اطول من اللوحة بكثير): اللوحة تلتصق فتبقى
     الاشكال امام الزائر مهما بلغ من الورقة، ولا يبقى بجانبها فراغ ميت.
     تعمل لان الشبكة align-items:start فللوحة ارتفاع محتواها لا ارتفاع الصف */
  .h6-paper-shell:has(.h6-pframe) .h6-themes{position:sticky;inset-block-start:96px;}
}
@media(max-width:900px){.h6-paper-grid{grid-template-rows:none;}.h6-paper-top{grid-row:auto;}}
/* clip لا hidden: hidden يجعل الغلاف صندوق تمرير فلا تلتصق اللوحة بداخله،
   وclip يقص هالة الخلفية كما كان بلا صندوق تمرير (متصفح لا يعرفها يسقط
   السطر فيعود hidden واللوحة لا تلتصق — لا كسر) */
.h6-paper-shell:has(.h6-pframe){padding:clamp(20px,3.5vw,40px) clamp(14px,2.5vw,28px);overflow:clip;}
.h6-paper-shell:has(.h6-pframe) .h6-sec-head{margin-block-end:22px;}
/* الارتفاع هنا صندوق التحميل وحده (الهيكل النابض): بعد اول رسالة ارتفاع
   يكتبه JS بطول الورقة نفسها فلا شريط تمرير داخل الاطار اصلا، والورقة
   الاعرض من الاطار تصغر تصغيرا متناسبا في الصفحة المضمنة */
.h6-pframe{transform:none;position:relative;min-height:0;}
.h6-pframe:hover{transform:none;}
.h6-pframe iframe{display:block;width:100%;height:720px;border:0;background:#fff;transition:opacity .4s var(--ease);}
@media(max-width:900px){.h6-pframe iframe{height:600px;}}
@media(max-width:575.98px){.h6-pframe iframe{height:520px;}}
.h6-pframe.is-loading iframe{opacity:0;}
.h6-pframe-skel{position:absolute;inset:0;padding:28px 24px;display:flex;flex-direction:column;gap:14px;pointer-events:none;opacity:1;transition:opacity .3s;}
.h6-pframe-skel i{display:block;height:14px;border-radius:7px;background:#eef0f2;animation:h6-skel 1.4s ease-in-out infinite;}
.h6-pframe-skel i:first-child{height:96px;border-radius:12px;}
.h6-pframe-skel i:nth-child(3){width:70%;}
.h6-pframe-skel i:nth-child(5){width:45%;}
.h6-pframe:not(.is-loading) .h6-pframe-skel{opacity:0;}
@keyframes h6-skel{0%,100%{opacity:.55;}50%{opacity:1;}}
.h6-ptabs .h6-pprint{display:inline-flex;align-items:center;gap:6px;background:transparent;border-style:dashed;}
.h6-ptabs .h6-pprint i{font-size:17px;}
/* الورقة التفاعلية: بطاقة بارزة فوق الورقة تربطها بالاختبار الالكتروني */
.h6-paper-online{display:flex;align-items:center;gap:14px;margin-block-end:18px;padding:14px 18px;border-radius:16px;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.45);color:#fff;}
.h6-paper-online i{flex-shrink:0;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:var(--tq-accent);color:var(--night);font-size:26px;}
.h6-paper-online b{display:block;font-size:17px;font-weight:800;margin-block-end:3px;}
.h6-paper-online span{display:block;font-size:14px;line-height:1.7;color:rgba(255,255,255,.9);}
@media(max-width:575.98px){.h6-paper-online{align-items:flex-start;padding:12px 14px;}.h6-paper-online i{width:40px;height:40px;font-size:22px;}.h6-paper-online b{font-size:15.5px;}}

.h6-themes{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:24px;color:#fff;}
.h6-themes h3{display:flex;align-items:center;gap:8px;color:#fff;font-size:21px;}
.h6-themes h3 i{color:var(--tq-accent);}
.h6-themes > p{font-size:14.5px;color:rgba(255,255,255,.9);margin-block:8px 18px;}
/* الافتراضي = ألوان قالب «الكلاسيكي»، وJS يستبدلها عند اختيار شكل آخر */
.h6-mini{--m-row:#f0f0f0;--m-line:#e2e2e2;--m-ink:#000000;background:#fff;border-radius:12px;padding:12px 14px;color:var(--m-ink);box-shadow:0 20px 50px rgba(0,0,0,.3);transition:.4s var(--ease);margin-block-end:16px;}
.h6-mini-head{display:flex;gap:6px;margin-block-end:10px;}
.h6-mini-head i{height:7px;border-radius:4px;background:var(--m-line);flex:1;}
.h6-mini-head i:first-child{flex:2;background:var(--m-ink);opacity:.8;}
.h6-mini-title{display:block;font-size:11px;font-weight:800;margin-block-end:8px;color:var(--m-ink);}
.h6-mini-row{display:flex;align-items:center;gap:8px;background:var(--m-row);border:1px solid var(--m-line);border-radius:6px;padding:5px 8px;margin-block-end:5px;}
.h6-mini-row span{font-size:10px;font-weight:800;}
.h6-mini-row em{flex:1;height:6px;border-radius:3px;background:var(--m-ink);opacity:.35;}
.h6-mini-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-block-end:8px;}
.h6-mini-opts i{height:16px;border:1px solid var(--m-line);border-radius:5px;background:#fff;}
.h6-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.h6-chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 14px;border-radius:100px;font-size:13px;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;transition:.25s var(--ease);}
.h6-chip:hover{background:rgba(255,255,255,.16);transform:translateY(-1px);}
.h6-chip.on{background:#fff;color:var(--ink);border-color:#fff;}
.h6-chip-sw{width:14px;height:14px;border-radius:50%;border:2px solid var(--sw-line,currentColor);background:var(--sw,currentColor);flex-shrink:0;}
.h6-chip-more{font-size:13px;color:rgba(255,255,255,.94);font-weight:600;padding-inline:4px;}

/* ══════ وضع المشاركة: صفحة الطالب في الاطار نفسه ══════ */
/* شريط شكل صفحة الطالب — يظهر تحت ازرار التبديل في وضع المشاركة وحده */
.h6-pshapes{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-block-start:10px;}
.h6-pshapes[hidden]{display:none;}
.h6-pshapes-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.78);}
.h6-pshapes-lbl i{font-size:15px;}
.h6-pshapes button{min-height:34px;padding:6px 13px;border-radius:100px;font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;transition:.22s var(--ease);}
.h6-pshapes button:hover{background:rgba(255,255,255,.17);}
.h6-pshapes button.on{background:#fff;color:var(--ink);border-color:#fff;}
/* صفحة الطالب تطبيق يمرر داخله لا وثيقة تعلن ارتفاعها: الاطار بارتفاع ثابت
   (ارتفاع الورقة المقيس لا يعنيه)، وياخذ ارضية بيضاء تحته كشاشة الجوال */
.h6-pmock.is-share{background:#fff;}
.h6-pmock.is-share iframe{height:760px;}
@media(max-width:900px){.h6-pmock.is-share iframe{height:620px;}}
/* قوالب الورقة تلون «الورقة المحاكية» وحدها — «فورمز» و«بطاقات» ابيض واسود
   عمدا (كما يقول المنتج للمعلم)، فترفع الرقائق يدها بدل ان تبدو معطلة بلا سبب */
.h6-chips.is-off{opacity:.42;pointer-events:none;}

/* ══════ موديل معاينة الورقة قبل الطباعة ══════
   الورقة داخله اطار مستقل (/paper-sample) لا وسم منسوخ: انماط الورقة ثقيلة
   وفيها قواعد عامة لو حقنت في الرئيسية لاربكت شكلها — والاطار يعزلها. طوله
   يتبع ارتفاع الورقة ويمرر الجسم، فتقرا الصفحات كلها بلا تمرير داخلي ثان. */
.h6-pv{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:clamp(8px,2vw,24px);}
/* ‎display:flex‎ يغلب ‎[hidden]‎ الافتراضي، فلا بد من الشطب الصريح */
.h6-pv[hidden]{display:none;}
.h6-pv-back{position:absolute;inset:0;background:rgba(8,42,40,.58);}
.h6-pv-card{position:relative;display:flex;flex-direction:column;width:min(900px,100%);max-height:94vh;background:var(--paper);border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(0,0,0,.32);overflow:hidden;}
.h6-pv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-block-end:1px solid var(--line);}
.h6-pv-head b{font-size:15.5px;color:var(--ink);}
.h6-pv-x{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);font-size:18px;transition:.2s var(--ease);}
.h6-pv-x:hover{background:var(--line);color:var(--ink);}
.h6-pv-body{flex:1;min-height:0;overflow:auto;background:#eef1f2;padding:10px;}
.h6-pv-body iframe{display:block;width:100%;min-height:50vh;border:0;background:#fff;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.08);}
/* الورقة تصل بعد طلب شبكة: نبضة هادئة حتى تعلن جاهزيتها */
.h6-pv.is-loading .h6-pv-body{animation:h6PvWait 1.4s ease-in-out infinite;}
@keyframes h6PvWait{50%{opacity:.72;}}
.h6-pv-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-block-start:1px solid var(--line);}
body.h6-pv-open{overflow:hidden;}
@media(max-width:575.98px){
  .h6-pv{padding:0;}
  .h6-pv-card{width:100%;max-height:100%;height:100%;border-radius:0;}
  .h6-pv-foot .h6-btn{flex:1;justify-content:center;}
}

/* ══════ الرحلة: محطات على سكة واحدة ══════ */
/* ══════ صفحة المميزات المستقلة (/features) ══════ */
.h6-crumb{display:flex;align-items:center;gap:9px;margin-block-end:26px;font-size:13.5px;font-weight:600;color:var(--ink-3);}
.h6-crumb a{display:inline-flex;align-items:center;gap:6px;color:var(--tq-dark);transition:.2s var(--ease);}
.h6-crumb a:hover{color:var(--tq-ink);}
.h6-crumb a i{font-size:15px;}
.h6-crumb span[aria-current]{color:var(--ink-2);}
.h6-crumb span[aria-current]::before{content:'/';margin-inline-end:9px;color:var(--line);}
.h6-feats-end{margin-block-start:48px;padding-block-start:34px;border-block-start:1px solid var(--line);text-align:center;}
.h6-feats-end p{font-size:17px;color:var(--ink-2);margin-block-end:20px;}
.h6-feats-end .h6-cta-btns{justify-content:center;}

/* ══════ المميزات المختارة على صفحة الهبوط + رابط المزيد ══════ */
.h6-feats-more{margin-block-start:30px;text-align:center;}
/* ثلاث مجموعات فكرية: رقم المرحلة ثم عنوانها ثم شبكة البطاقات نفسها */
.h6-feat-sets{display:flex;flex-direction:column;gap:30px;}
.h6-feat-set-head{display:flex;align-items:center;gap:13px;margin-block-end:14px;}
.h6-feat-set-n{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--tq-tint);color:var(--tq-dark);font-size:16px;font-weight:800;line-height:1;
}
.h6-feat-set-head h3{font-size:20px;font-weight:800;line-height:1.3;}
.h6-feat-set-head p{font-size:14.5px;color:var(--ink-3);line-height:1.6;margin-block-start:3px;max-width:70ch;}
@media(max-width:700px){
  .h6-feat-sets{gap:24px;}
  .h6-feat-set-head{gap:11px;margin-block-end:12px;}
  .h6-feat-set-n{width:30px;height:30px;border-radius:9px;font-size:15px;}
  .h6-feat-set-head h3{font-size:18px;}
}

.h6-jrn{background:var(--surface);}
/* السكة خط رأسي يمر بمراكز أيقونات المحطات (نصف عرض الأيقونة = 28px) */
.h6-jrn-rail{position:relative;display:flex;flex-direction:column;gap:34px;}
.h6-jrn-rail::before{
  content:'';position:absolute;z-index:0;inset-block:26px 26px;inset-inline-start:25px;width:2px;
  background:linear-gradient(180deg,transparent,var(--tq) 6%,var(--tq) 94%,transparent);opacity:.26;
}
/* المحطة عنصر <section> فتلتقط padding-block من القاعدة العامة — نصفره هنا */
.h6-stop{position:relative;padding-block:0;padding-inline-start:78px;}
.h6-stop-ico{
  position:absolute;z-index:1;inset-inline-start:0;inset-block-start:0;width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--line);
  color:var(--tq-dark);box-shadow:var(--sh-1);transition:.4s var(--ease);
}
.h6-stop-ico i{font-size:23px;}
.h6-stop:hover .h6-stop-ico{background:var(--tq);border-color:transparent;color:#fff;box-shadow:var(--sh-tq);}
.h6-stop-head{min-height:52px;display:flex;flex-direction:column;justify-content:center;margin-block-end:13px;}
.h6-stop-head h3{font-size:clamp(20px,2.3vw,25px);line-height:1.25;}
.h6-stop-head p{font-size:14.5px;color:var(--ink-3);line-height:1.6;margin-block-start:2px;max-width:70ch;}
/* محطة التوليد الذكي: البطاقات على أرضية أفتح تميزها بلا لون جديد */
.h6-stop.is-hero .h6-feat{background:var(--tq-tint);border-color:transparent;}
.h6-stop.is-hero .h6-feat-ico{background:var(--paper);}
/* شرائح التفاصيل الصغيرة أسفل كل محطة — نظير .h6-pp-proof على أرضية فاتحة */
.h6-stop-chips{display:flex;flex-wrap:wrap;gap:6px 16px;margin-block-start:11px;list-style:none;padding:0;
  font-size:12.5px;font-weight:600;color:var(--ink-3);}
.h6-stop-chips li{display:inline-flex;align-items:center;gap:7px;}
.h6-stop-chips li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--tq);opacity:.7;flex:0 0 auto;}
/* شريحة فيها رابط: تميز بلونها وخطها والا بدت نصا لا ينقر */
.h6-stop-chips a{color:var(--tq-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.h6-stop-chips a:hover{color:var(--tq);}
@media(max-width:700px){
  .h6-jrn-rail{gap:26px;}
  .h6-jrn-rail::before{display:none;}
  .h6-stop{padding-inline-start:0;}
  .h6-stop-ico{position:static;width:42px;height:42px;border-radius:13px;margin-block-end:9px;}
  .h6-stop-ico i{font-size:21px;}
  .h6-stop-head{min-height:0;margin-block-end:11px;}
}

.h6-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:1100px){.h6-feat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.h6-feat-grid{grid-template-columns:1fr;}}
.h6-feat{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:17px 18px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;overflow:hidden;}
.h6-feat::after{content:'';position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--tq);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);}
.h6-feat:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent;}
.h6-feat:hover::after{transform:scaleX(1);}
.h6-feat-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--tq-tint);color:var(--tq-dark);margin-block-end:11px;transition:.35s var(--ease);}
.h6-feat-ico i{font-size:21px;}
.h6-feat:hover .h6-feat-ico{background:var(--tq);color:#fff;box-shadow:var(--sh-tq);}
.h6-feat h3,.h6-feat h4{font-size:17.5px;font-weight:800;line-height:1.3;margin-block-end:5px;}
.h6-feat p{font-size:13.8px;color:var(--ink-2);line-height:1.62;}
.h6-bloom{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:50px;margin-block-start:11px;}
.h6-bloom span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.h6-bloom i{display:block;width:100%;height:var(--h,10%);min-height:4px;border-radius:4px 4px 2px 2px;background:var(--tq);opacity:.85;transition:height .8s var(--ease);}
.h6-bloom b{font-size:11px;font-weight:700;color:var(--ink-2);line-height:1;}

/* ══════ حاسبة الوقت ══════ */
.h6-calc{background:var(--paper);}
/* الجدول أوسع من الحاسبة: هو المحتوى الذي يقرأ سطراً سطراً، والحاسبة
   لوح نتيجة يقرأ بلمحة — فلا يأخذ نصف القسم */
.h6-calc-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:40px;align-items:center;}
@media(max-width:1080px){.h6-calc-grid{grid-template-columns:1.25fr .85fr;gap:26px;}}
@media(max-width:900px){.h6-calc-grid{grid-template-columns:1fr;gap:30px;}}
/* لم يعد يتبع عنواناً داخل عموده (الرأس صار فوق الشبكة)، فلا حاجة لهامش علوي */
/* ⚠️ المحددات بالابن المباشر عمداً: الوسم i خلية «الطريقة المعتادة» حين يكون
   ابناً لـli، وايقونة حين يكون داخل span أو b. بلا العلامة `>` تاخذ الايقونة
   كسوة الخلية فيبتلعها لونها الباهت وتسبقها علامة ✕. */
/* بلا سقف عرض: عمود الشبكة هو الذي يحده، فلا يبقى فراغ ميت بين الجدول والحاسبة */
.h6-compare{display:flex;flex-direction:column;gap:6px;}
.h6-compare li{display:grid;grid-template-columns:1.05fr 1fr 1.05fr;gap:10px;align-items:center;padding:9px 14px;text-align:start;border-radius:12px;background:var(--surface);font-size:14px;
  border-inline-start:3px solid transparent;
  transition:background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);}
/* التحويم يشعل حد السطر من جهة البداية ويرفعه على الأبيض — دليل قراءة لا زينة */
.h6-compare li:not(.is-head):hover{background:var(--paper);box-shadow:var(--sh-1);border-inline-start-color:var(--tq);}
/* صف الترويسة: يسمي العمودين صراحةً، فلا تحمل العلامتان ✕ و✓ وحدهما المعنى */
.h6-compare li.is-head{background:none;padding-block:0 4px;font-size:12px;font-weight:800;letter-spacing:.2px;}
.h6-compare li.is-head > span{color:var(--ink-3);display:block;}
.h6-compare li.is-head > i{color:var(--ink-3);}
.h6-compare li.is-head > i::before{display:none;}
/* رأس عمود محك كبسولة ممتلئة: تاج العمود الذي تحته كل الكبسولات الخفيفة */
.h6-compare li.is-head > b{background:var(--tq);color:#fff;}
.h6-compare li.is-head > b::before{display:none;}
/* خلية الاسم: أيقونة في مربع فيروزي خفيف ثم النص — تمسح العين ثماني أيقونات
   أسرع مما تمسح ثمانية أسطر نص */
.h6-compare > li > span{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px;min-width:0;}
.h6-compare > li > span > .ti{flex:none;width:26px;height:26px;border-radius:8px;background:var(--tq-tint);color:var(--tq-dark);display:grid;place-items:center;font-size:15px;}
.h6-compare > li > i{font-style:normal;color:var(--ink-3);display:flex;align-items:flex-start;gap:6px;line-height:1.5;text-wrap:balance;}
.h6-compare > li > i::before{content:"\eb55";font-family:'tabler-icons';font-size:12px;line-height:1.5;opacity:.55;flex:none;}
/* كبسولة «مع محك»: علامة صح لا نقطة — النقطة تحصي، والصح يحكم.
   والكبسولات تصطف عموداً واحداً فيقرأ العمود قبل أن يقرأ السطر. */
.h6-compare > li > b{color:var(--tq-ink);background:var(--tq-tint);border-radius:9px;padding:5px 9px;font-weight:800;
  display:flex;align-items:flex-start;gap:6px;justify-self:stretch;line-height:1.5;text-wrap:balance;}
.h6-compare > li > b::before{content:"\ea5e";font-family:'tabler-icons';font-weight:400;font-size:13px;line-height:1.5;color:var(--tq);flex:none;}
/* ⚠️ كتل الوسائط بعد القواعد الاساس لا قبلها: تخصيصها متساو، فالمتاخر
   في الملف يغلب — وكانت فوقها فماتت كلها بلا اثر.
   دون 1080 يضيق عمود الجدول: يخف الخط والحشوة كي لا تلتف الكبسولات. */
@media(max-width:1080px){
  .h6-compare li{font-size:13px;gap:8px;padding-inline:11px;grid-template-columns:1fr 1fr 1.05fr;}
  .h6-compare > li > span{gap:7px;}
  .h6-compare > li > span > .ti{width:23px;height:23px;font-size:14px;}
  .h6-compare > li > b{padding:4px 8px;gap:5px;}
}
/* دون 560 لا تتسع ثلاثة أعمدة: اسم الميزة سطر كامل، والعمودان تحته */
@media(max-width:560px){
  .h6-compare li{grid-template-columns:1fr 1fr;gap:8px 10px;}
  .h6-compare > li > span{grid-column:1 / -1;}
  .h6-compare li.is-head > span{display:none;}
}
.h6-calc-box{background:var(--night-surface);color:#fff;border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden;box-shadow:0 40px 80px -34px rgba(15,42,39,.85);}
.h6-calc-box::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:var(--tq-accent);opacity:.18;filter:blur(90px);inset-block-end:-160px;inset-inline-start:-120px;pointer-events:none;}
.h6-calc-box > *{position:relative;z-index:1;}
.h6-calc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-block-end:14px;}
.h6-calc-box label{display:block;font-weight:800;font-size:15.5px;line-height:1.5;}
/* شارة النسبة: رقم واحد يلخص الشريطين قبل أن يتحركا. رقمه من JS لا من القالب */
.h6-calc-ratio{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13px;font-weight:800;color:var(--night);background:var(--tq-accent);border-radius:999px;padding:5px 12px;}
.h6-calc-ratio b{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;}
.h6-calc-ratio .ti{font-size:15px;}
.h6-range-row{display:flex;align-items:center;gap:14px;margin-block-end:20px;}
.h6-range-row output{min-width:50px;height:42px;border-radius:11px;background:var(--tq-accent);color:var(--night);font-weight:900;font-size:20px;display:grid;place-items:center;font-variant-numeric:tabular-nums;}
/* طرفا المدى تحت المسار: المؤشر وحده لا يقول أين يقف من الحد */
.h6-range-wrap{flex:1;min-width:0;}
.h6-range-scale{display:flex;justify-content:space-between;margin-block-start:7px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;}
input[type=range]#h6Range{display:block;width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;background:rgba(255,255,255,.18);outline:none;}
input[type=range]#h6Range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--tq-accent);border:3px solid var(--night);box-shadow:0 0 0 3px var(--tq-accent);cursor:grab;}
input[type=range]#h6Range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--tq-accent);border:3px solid var(--night);box-shadow:0 0 0 3px var(--tq-accent);cursor:grab;}
input[type=range]#h6Range:focus-visible{outline:2.5px solid var(--tq-accent);outline-offset:6px;}
/* شريطان بنسبة 3:180 — النسبة ترى قبل أن تقرأ، والوحدة بحجم الرقم
   فلا يخلط «24 ساعة» بـ«24 دقيقة» (وهما متطابقان رقماً دائماً) */
.h6-bars{display:flex;flex-direction:column;gap:14px;}
.h6-bar-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-block-end:7px;}
.h6-bar-top span{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.82);}
.h6-bar-top b{font-size:20px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;}
.h6-bar.is-old .h6-bar-top b{color:#FFB4A8;}
.h6-bar.is-new .h6-bar-top b{color:var(--tq-accent);}
.h6-bar-track{height:12px;border-radius:8px;background:rgba(255,255,255,.09);overflow:hidden;}
/* الحد الأدنى 7px كي يبقى شريط محك مرئياً وهو 1.7% فقط */
.h6-bar-track i{display:block;height:100%;width:max(var(--w),7px);border-radius:8px;transition:width .8s var(--ease);}
.h6-bar.is-old .h6-bar-track i{background:linear-gradient(90deg,#FF8A73,#FFB4A8);}
.h6-bar.is-new .h6-bar-track i{background:var(--tq-accent);box-shadow:0 0 14px rgba(45,212,191,.75);}
/* المحصلة لوح قائم بذاته لا سطر تحت خط: هي جواب السؤال الذي في أعلى البطاقة */
.h6-calc-win{margin-block-start:20px;display:flex;align-items:center;gap:10px;
  background:rgba(45,212,191,.10);border:1px solid rgba(45,212,191,.24);border-radius:14px;padding:12px 14px;
  font-size:14.5px;font-weight:700;color:rgba(255,255,255,.92);}
.h6-calc-win > .ti{flex:none;font-size:20px;color:var(--tq-accent);}
.h6-calc-win b{color:var(--tq-accent);font-size:21px;font-weight:900;font-variant-numeric:tabular-nums;}

/* ══════ آراء المعلمين ══════ */
.h6-voices{background:var(--surface);position:relative;overflow:hidden;}
.h6-voices .h6-sec-head{margin-block-end:34px;}
.h6-vrows{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.h6-vrow{display:flex;width:max-content;align-items:stretch;animation:h6slideX 60s linear infinite;}
.h6-vrows:hover .h6-vrow{animation-play-state:paused;}
/* JS يقود الشريط بتحويل محسوب (سهمان وايقاف وسحب)، وحركة CSS اعلاه
   تبقى بديلا يعمل ان تعطل JS — فلا يجمد الشريط في الحالتين */
.h6-vrows.is-js .h6-vrow{animation:none;}
/* pan-y: الاصبع يسحب الشريط عرضا ويمرر الصفحة طولا كما تعود */
.h6-vrows.is-js{touch-action:pan-y;cursor:grab;}
.h6-vrows.is-js.is-drag{cursor:grabbing;}
.h6-vrows.is-js.is-drag .h6-voice:hover{transform:none;box-shadow:none;}

/* ── التحكم بالشريط: سهم يمين وسهم يسار وايقاف بينهما ──
   يخفى حتى يعمل JS فلا يرى الزائر زرا لا يفعل شيئا. */
.h6-vnav{display:none;justify-content:center;align-items:center;gap:10px;margin-block-start:26px;}
.h6-js .h6-vnav{display:flex;}
.h6-vnav-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:42px;min-width:42px;border:1.5px solid var(--line);border-radius:100px;
  background:var(--paper);color:var(--ink-2);font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease),
    background .25s var(--ease),transform .2s var(--ease);
}
.h6-vnav-btn.is-stop{padding-inline:16px;}
.h6-vnav-btn i{font-size:19px;}
.h6-vnav-btn:hover{border-color:var(--tq);color:var(--tq-ink);background:var(--tq-tint);}
.h6-vnav-btn:active{transform:scale(.94);}
.h6-vnav-btn[aria-pressed="true"]{border-color:var(--tq);background:var(--tq);color:#fff;}
.h6-voice{width:340px;flex-shrink:0;margin-inline-start:18px;position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 20px;transition:transform .4s var(--ease),box-shadow .4s var(--ease);}
.h6-voice::before{content:'”';position:absolute;inset-block-start:-26px;inset-inline-start:14px;font-size:130px;line-height:1;color:var(--tq);opacity:.09;pointer-events:none;}
.h6-voice:hover{transform:translateY(-6px);box-shadow:var(--sh-3);}
.h6-voice-head{display:flex;align-items:center;gap:12px;margin-block-end:12px;}
.h6-voice-av{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;font-weight:900;font-size:18px;color:#fff;background:var(--tq);}
.h6-voice-av.t2{background:var(--tq-ink);}
.h6-voice-av.t3{background:var(--amber);color:var(--night);}
.h6-voice-id{min-width:0;flex:1;}
.h6-voice-id b{display:block;font-weight:800;font-size:16px;line-height:1.4;}
.h6-voice-id span{display:block;font-size:12.5px;color:var(--ink-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h6-voice-stars{display:flex;gap:1px;color:var(--amber);}
.h6-voice-stars i{font-size:13px;}
/* pre-line: الرأي يكتبه معلم، فسطره الفارغ سطر لا فراغ يلتصق */
.h6-voice p{color:var(--ink-2);font-size:14.5px;line-height:1.85;position:relative;z-index:1;white-space:pre-line;}

/* ── آراء قليلة: صف ساكن لا شريط ──
   دون اربعة آراء لا يملا نصف المسار عرض الشاشة، فكان العدد يضاعف حتى يصير
   الراي الواحد ثماني بطاقات. فتعرض بطاقاتها وحدها هنا: بلا قناع تلاش ولا
   حركة ولا اسهم، وبعرض .wrap نفسه كي يبقى القسم على ايقاع الصفحة. */
.h6-vgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;width:min(1220px,92vw);margin-inline:auto;}
/* البطاقة تباعد في الشريط بهامش بدئي، وهنا بالفجوة — فيصفر الهامش */
.h6-vgrid .h6-voice{margin-inline-start:0;max-width:100%;}

/* ── «شارك رأيك»: الباب وحال الرأي والنموذج ──────────────────────────
   المعلم المسجل يكتب، والمشرف ينشر من «الاعدادات ← آراء المعلمين».
   ⚠️ الملاحظة عنصر <p> وقاعدة `.h6 p{margin:0}` تخصيصها (0,1,1) تغلب
   الصنف وحده، فكل قاعدة تمس هوامشها تبدا بـ.h6 (كالعداد فوق). */
/* توسط تحت راس القسم الموسط (الشريط هنا نداء لا شريط ادوات كشريط المقررات) */
.h6-vadd{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-block-end:20px;}
.h6-vadd-hint{font-size:13px;color:var(--ink-3);}
/* باب المشرف الى اللوحة: شارته عدد ما ينتظر قراره (كشارة القائمة الجانبية) */
.h6-vadd-badge{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding-inline:6px;
  border-radius:100px;background:var(--amber);color:var(--night);font-size:12px;font-weight:800;
}
.h6 .h6-vnote{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;
  background:var(--tq-tint);color:var(--tq-ink);font-size:13.5px;font-weight:700;
}
.h6-vnote i{font-size:16px;}
.h6 .h6-vnote.is-bad{background:rgba(220,38,38,.08);color:#b91c1c;}
.h6-vform{
  display:grid;gap:14px;max-width:760px;margin-block-end:26px;padding:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
/* display:grid يغلب سمة hidden، فتعاد هنا صريحة (فخ d-flex نفسه في اللوحة) */
.h6-vform[hidden]{display:none;}
.h6-vform-grid{display:flex;flex-wrap:wrap;gap:14px;}
.h6-vform-grid > .h6-fld{flex:1 1 240px;}
.h6-vform-stars{flex:0 1 200px;}
.h6-vform input[type="text"],.h6-vform textarea{
  width:100%;padding:12px 14px;border-radius:13px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;
  transition:border-color .3s;
}
.h6-vform input[type="text"]{height:46px;}
.h6-vform textarea{min-height:110px;resize:vertical;line-height:1.8;}
.h6-vform input[type="text"]:hover,.h6-vform textarea:hover,
.h6-vform input[type="text"]:focus,.h6-vform textarea:focus{border-color:var(--tq);}
.h6-vform-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}

/* ══════ النداء النهائي ══════ */
.h6-cta-band{background:var(--paper);padding-block:40px 96px;}
.h6-cta-frame{position:relative;max-width:1040px;margin-inline:auto;border-radius:var(--r-xl);overflow:hidden;background:var(--night-surface);color:#fff;padding:clamp(30px,4.4vw,58px);border:2px solid rgba(45,212,191,.35);box-shadow:0 40px 90px rgba(15,42,39,.3);}
.h6-cta-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:var(--tq-accent);opacity:.16;filter:blur(90px);top:var(--cy,20%);left:var(--cx,25%);transform:translate(-50%,-50%);pointer-events:none;transition:top .2s,left .2s;}
.h6-cta-mark{position:absolute;inset-block-end:-.22em;inset-inline-start:-.04em;font-weight:900;font-size:clamp(90px,16vw,200px);line-height:.8;color:transparent;pointer-events:none;-webkit-text-stroke:1.5px rgba(255,255,255,.06);}
/* عمود واحد منذ ان صار رف المقررات قسما مستقلا (#courses): اللوحة نداء
   نهائي لا عرض بضاعة، فتتوسط وتحد سطرها كي لا يمتد الى 1100px */
.h6-cta-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:30px;justify-items:center;text-align:center;}
.h6-cta-copy{max-width:60ch;}
/* لا يكسر التاريخ («٢٥ يونيو ٢٠٢٧») بين سطرين */
.h6-nb{white-space:nowrap;}
.h6-cta-copy h2{color:#fff;font-size:clamp(26px,3.9vw,43px);margin-block:18px 14px;line-height:1.32;text-wrap:balance;}
.h6-cta-copy h2:first-child{margin-block-start:0;}
.h6-hl{position:relative;display:inline-block;white-space:nowrap;color:var(--tq-accent);}
.h6-hl::after{content:'';position:absolute;inset-inline:-4px;inset-block-end:.08em;height:.32em;border-radius:6px;background:var(--tq-accent);opacity:.22;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .9s var(--ease) .3s;}
.h6-cta-frame:hover .h6-hl::after{transform:scaleX(1);}
.h6-cta-copy p{color:rgba(255,255,255,.88);font-size:17px;margin-block-end:28px;max-width:46ch;margin-inline:auto;text-wrap:pretty;}
.h6-cta-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.h6-cta-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.h6-cta-pills li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  font-size:14px;color:rgba(255,255,255,.9);font-weight:600;line-height:1.5;}
.h6-cta-pills i{font-size:16px;color:var(--tq-accent);}


.h6-cta-stack{position:relative;height:290px;perspective:1200px;}
@media(max-width:900px){.h6-cta-stack{height:250px;width:min(100%,420px);margin-inline:auto;}}
.h6-sheet{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:min(250px,72%);border-radius:18px;padding:18px;background:#fff;color:var(--ink);box-shadow:0 26px 60px rgba(0,0,0,.45);transform-origin:50% 100%;transition:transform .65s var(--ease),opacity .5s;}
.h6-sheet.s3{transform:translate(50%,-50%) rotate(-9deg) translateY(10px) scale(.93);opacity:.75;}
.h6-sheet.s2{transform:translate(50%,-50%) rotate(6deg) translateY(4px) scale(.965);opacity:.9;}
.h6-sheet.s1{transform:translate(50%,-50%) rotate(-2deg);}
.h6-cta-frame:hover .h6-sheet.s3{transform:translate(78%,-56%) rotate(-15deg) scale(.95);opacity:1;}
.h6-cta-frame:hover .h6-sheet.s2{transform:translate(24%,-46%) rotate(12deg) scale(.98);opacity:1;}
.h6-cta-frame:hover .h6-sheet.s1{transform:translate(50%,-52%) rotate(-2deg) scale(1.03);}
.h6-sheet-head{display:flex;align-items:center;gap:9px;margin-block-end:12px;}
.h6-sheet-head em{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--tq-tint);color:var(--tq-dark);font-style:normal;}
.h6-sheet-head em i{font-size:16px;}
.h6-sheet-head b{font-size:14.5px;line-height:1.35;display:block;}
.h6-sheet-head span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:500;}
.h6-sheet-lines i{display:block;height:7px;border-radius:4px;background:var(--line);margin-block-end:7px;}
.h6-sheet-lines i:nth-child(2){width:82%;}
.h6-sheet-lines i:nth-child(3){width:92%;}
.h6-sheet-lines i:nth-child(4){width:60%;background:var(--tq-tint);}
.h6-sheet-foot{margin-block-start:12px;padding-block-start:10px;border-block-start:1px dashed var(--line);display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);font-weight:600;}
.h6-sheet-foot b{color:var(--tq-dark);}
.h6-cta-chip{position:absolute;inset-block-start:6px;inset-inline-end:2%;z-index:4;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:100px;animation:h6floaty 6s ease-in-out infinite;}
.h6-cta-chip i{font-size:15px;color:var(--tq-accent);}
.h6-cta-chip.c2{inset-block-start:auto;inset-block-end:2px;inset-inline-start:0;inset-inline-end:auto;animation-delay:2s;}

/* ══════ الفوتر ══════ */
.h6-foot{background:var(--night-surface);color:rgba(255,255,255,.82);padding-block:48px 28px;}
.h6-foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;padding-block-end:28px;border-block-end:1px solid rgba(255,255,255,.1);}
.h6-foot-brand{max-width:360px;}
.h6-foot-brand .h6-brand{--mk-h:52px;}
.h6-foot-brand p{margin-block-start:12px;font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.88);}
/* سطر «يكبر ويتحسن»: خبر ثانوي تحت التعريف — اصغر واخفت منه ولا يزاحمه،
   وايقونته بلون التمييز فتقرا العين الصعود قبل ان تقرا الكلمة. */
.h6-foot-brand p.h6-foot-grow{display:flex;align-items:flex-start;gap:7px;margin-block-start:8px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.66);}
.h6-foot-brand p.h6-foot-grow i{font-size:15px;color:var(--tq-accent);flex:none;margin-block-start:2px;}
.h6-foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;}
.h6-foot-links a{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.9);padding:6px 4px;transition:color .2s;}
.h6-foot-links a:hover{color:var(--tq-accent);}
.h6-foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block-start:20px;font-size:13px;color:rgba(255,255,255,.9);}
.h6-foot-live{display:inline-flex;align-items:center;gap:6px;}
.h6-foot-live i{color:var(--tq-accent);}

/* ══════ الزر المغناطيسي ══════ */
.h6-magnet{will-change:transform;}

/* ══════ الصفحات النظامية (page/{slug}) ══════
   المحتوى من لوحة التحكم: عناصر خام بلا اصناف، فتنسق داخل .h6-prose
   وحدها. القواعد العامة في اعلى الملف تصفر نقط القوائم فتعاد هنا. */
.h6-lgl{background:var(--surface);}
.h6-lgl-head{max-width:760px;margin-block-end:34px;}
.h6-lgl-head h1{font-size:clamp(29px,4vw,44px);margin-block:0 12px;}
.h6-lgl-head h1:only-child{margin-block:0;}
.h6-lgl-head > p{color:var(--ink-2);font-size:17.5px;}
.h6-lgl-meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-block-start:18px;}
/* نزل الشريط الى اسفل الوثيقة: خط فاصل يفصله عن آخر فقرة، وبلا هامش علوي
   مزدوج فوق خاتمة الصفحة */
.h6-lgl-meta.is-foot{margin-block:26px 0;padding-block-start:16px;border-block-start:1px solid var(--line);}
.h6-lgl-meta span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-3);background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:6px 13px;}
.h6-lgl-meta i{font-size:15px;color:var(--tq-dark);}
.h6-lgl-meta b{font-weight:600;}

/* ── ترويسة صفحة الدليل: سطر افقي واحد بدل ثلاثة اسطر متراكمة ──
   خاصة بصفحات /docs (is-compact) فلا تمس الصفحات النظامية التي
   تحتاج العنوان الكبير وسطر التعريف تحته. */
.h6-lgl.is-compact{padding-block:30px 48px;}
.h6-crumb.is-tight{margin-block-end:12px;}
.h6-lgl-head.is-compact{max-width:none;margin-block-end:22px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:10px 22px;}
.h6-lgl-head.is-compact h1{font-size:clamp(22px,2.5vw,29px);margin-block:0;}
.h6-lgl-head.is-compact .h6-lgl-meta{margin-block-start:0;}
@media(max-width:600px){.h6-lgl-head.is-compact{gap:8px;}}

/* ── فهرس الدليل: قسم لكل مرحلة، وترتيبه من config/docs.php ── */
.h6-docs-sec{padding-block:0;margin-block-end:38px;}
.h6-docs-sec:last-of-type{margin-block-end:0;}
.h6-docs-sec-head{display:flex;align-items:center;gap:13px;margin-block-end:16px;
  padding-block-end:13px;border-block-end:1px solid var(--line);}
.h6-docs-sec-num{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--tq-tint);color:var(--tq-dark);font-size:19px;}
.h6-docs-sec-head h2{font-size:clamp(18px,2.1vw,22px);color:var(--ink);margin:0;}
.h6-docs-sec-head p{font-size:14px;color:var(--ink-3);margin:3px 0 0;}

/* ── السابق والتالي اسفل صفحة الدليل ── */
.h6-docs-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block-start:34px;}
.h6-docs-nav-item{display:flex;align-items:center;gap:11px;padding:13px 15px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--ink);font-weight:700;font-size:15px;transition:.25s var(--ease);}
.h6-docs-nav-item:hover{border-color:var(--tq);color:var(--tq-dark);transform:translateY(-2px);box-shadow:var(--sh-1);}
.h6-docs-nav-item.is-next{justify-content:flex-end;text-align:end;}
.h6-docs-nav-item i{font-size:19px;color:var(--tq-dark);flex:0 0 auto;}
.h6-docs-nav-item span{display:flex;flex-direction:column;gap:2px;min-width:0;}
.h6-docs-nav-item b{font-size:12px;font-weight:600;color:var(--ink-3);}
@media(max-width:600px){.h6-docs-nav{grid-template-columns:1fr;}}

.h6-lgl-grid{display:grid;grid-template-columns:266px minmax(0,1fr);gap:26px;align-items:start;}
@media(max-width:980px){.h6-lgl-grid{grid-template-columns:1fr;}}

.h6-lgl-side{position:sticky;inset-block-start:calc(var(--nav-h) + 14px);display:flex;flex-direction:column;gap:14px;}
@media(max-width:980px){.h6-lgl-side{position:static;}}
.h6-lgl-toc,.h6-lgl-more{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 16px 14px;box-shadow:var(--sh-1);}
.h6-lgl-toc h2,.h6-lgl-more h2{font-size:13px;font-weight:800;color:var(--ink-3);letter-spacing:.02em;margin-block-end:10px;}
.h6-lgl-toc nav{display:flex;flex-direction:column;max-height:min(58vh,520px);overflow:auto;overscroll-behavior:contain;}
.h6-lgl-toc a{display:flex;align-items:flex-start;gap:9px;padding:7px 9px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.6;transition:background .2s,color .2s;}
.h6-lgl-toc a em{flex-shrink:0;width:3px;height:15px;margin-block-start:7px;border-radius:3px;background:var(--line);transition:background .2s,height .2s;}
.h6-lgl-toc a:hover{background:var(--surface);color:var(--ink);}
.h6-lgl-toc a.on{background:var(--tq-tint);color:var(--tq-ink);}
.h6-lgl-toc a.on em{background:var(--tq);height:19px;}

.h6-lgl-more a{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px;font-size:14.5px;font-weight:700;color:var(--ink-2);transition:background .2s,color .2s;}
.h6-lgl-more a:hover{background:var(--surface);color:var(--tq-dark);}
.h6-lgl-more a span{flex:1;}
.h6-lgl-more a i{font-size:17px;color:var(--tq-dark);}
.h6-lgl-more a i:last-child{font-size:15px;color:var(--ink-3);}

/* ── المقال ── */
.h6-prose{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(20px,3.4vw,44px);font-size:16.5px;line-height:2;color:var(--ink-2);}
.h6-prose > :first-child{margin-block-start:0;}
.h6-prose > :last-child{margin-block-end:0;}
.h6-prose p{margin-block:0 16px;}
.h6-prose h2{font-size:clamp(19px,2.2vw,23px);color:var(--ink);margin-block:34px 14px;padding-block-end:11px;border-block-end:1px solid var(--line);scroll-margin-block-start:calc(var(--nav-h) + 22px);}
.h6-prose h3{font-size:17.5px;color:var(--ink);margin-block:22px 10px;}
.h6-prose h4{font-size:16px;color:var(--ink);margin-block:18px 8px;}
.h6-prose ul,.h6-prose ol{margin-block:0 16px;padding-inline-start:22px;}
.h6-prose ul{list-style:disc;}
.h6-prose ol{list-style:arabic-indic;}
.h6-prose li{margin-block-end:9px;}
.h6-prose li::marker{color:var(--tq);}
.h6-prose strong,.h6-prose b{color:var(--ink);font-weight:800;}
.h6-prose a{color:var(--tq-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.h6-prose a:hover{color:var(--tq-ink);}
.h6-prose blockquote{margin:20px 0;padding:14px 18px;border-inline-start:4px solid var(--tq);background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2);}
.h6-prose hr{border:0;border-block-start:1px dashed var(--line);margin-block:26px;}
.h6-prose code{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:14px;}
.h6-prose table{width:100%;border-collapse:collapse;margin-block-end:18px;font-size:15px;}
.h6-prose th,.h6-prose td{border:1px solid var(--line);padding:9px 12px;text-align:start;}
.h6-prose th{background:var(--surface);color:var(--ink);font-weight:800;}
.h6-prose img{border-radius:var(--r-sm);margin-block:14px;}
/* لقطات الدليل: الصورة بإطار خفيف وتعليق تحتها (يكتبها المحرر <figure>) */
.h6-prose figure{margin:22px 0;}
/* لا تتجاوز الصورة مقاسها الطبيعي: لقطة لوحة عرضها 555px تظهر بمقاسها
   حادة ووسطا، ولقطة الشاشة الكاملة تصغر لعرض العمود */
.h6-prose figure img{display:block;width:auto;max-width:100%;margin-inline:auto;
  border:1px solid var(--line);box-shadow:var(--sh-1);}
.h6-prose figcaption{margin-block-start:9px;font-size:14px;color:var(--ink-3,var(--ink-2));text-align:center;}

/* ── ارقام اللقطة قابلة للنقر (docs-figure-marks.js) ──
   الرقم الاحمر محفور في الصورة، فيوضع فوقه زر شفاف بموضعه من ملف المواضع
   المجاور. ⚠️ المواضع تكتب بـleft لا inset-inline-start: الصفحة RTL
   والصورة محتوى افقي، والخاصية المنطقية تعكسها. */
.h6-prose .doc-fig-hots{position:relative;display:block;direction:ltr;width:fit-content;margin-inline:auto;max-width:100%;}
.h6-prose .doc-fig-hots img{margin-block:0;}
.doc-fig-hot{position:absolute;padding:0;border:2px solid transparent;border-radius:8px;
  background:transparent;cursor:pointer;transition:border-color .15s ease,background-color .15s ease;}
/* الافصاح: يظهر ان الارقام تنقر حين تمر الفارة على الصورة، ولا يزاحم قراءتها */
.h6-prose .doc-fig-hots:hover .doc-fig-hot{border-color:rgba(225,29,72,.35);}
.doc-fig-hot:hover,.doc-fig-hot:focus-visible{border-color:rgba(225,29,72,.9);
  background:rgba(225,29,72,.10);outline:none;}
.doc-cap-seg{cursor:default;}
.doc-cap-dot{padding-inline:4px;opacity:.6;}
/* يقال مرة واحدة في الصفحة — لا تحت كل لقطة */
.doc-fig-tip{display:block;margin-block-start:6px;font-size:12.5px;color:var(--ink-3,#7b8794);opacity:.85;}
.doc-fig-tip i{font-size:14px;vertical-align:-2px;margin-inline-end:3px;}
/* ومضة على الشرح بعد القفز اليه */
.doc-mark-hit{background:color-mix(in srgb,var(--brand,#1CA390) 14%,transparent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--brand,#1CA390) 14%,transparent);
  border-radius:6px;transition:background-color .3s ease,box-shadow .3s ease;}

@media print{
  .h6-hdr,.h6-foot,.h6-lgl-side,.h6-feats-end,.h6-crumb,.h6-progress{display:none !important;}
  .h6-lgl-grid{display:block;}
  .h6-prose{border:0;box-shadow:none;padding:0;}
}
.h6-foot-legal{display:inline-flex;flex-wrap:wrap;gap:6px 16px;}
.h6-foot-legal a{color:rgba(255,255,255,.9);font-weight:600;transition:color .2s;}
.h6-foot-legal a:hover{color:var(--tq-accent);}
@media(max-width:980px){.h6-lgl-toc nav{max-height:none;overflow:visible;}}

/* ── بحث الدليل (h6-dsr): حقل يفهم القصد وقائمة منسدلة بالصفحات ── */
.h6-dsr{position:relative;max-width:680px;margin-block:26px 34px;}
.h6-dsr-field{position:relative;display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:14px;padding:0 14px;box-shadow:var(--sh-1);transition:border-color .2s,box-shadow .2s;}
.h6-dsr-field:focus-within{border-color:var(--tq);box-shadow:0 0 0 4px var(--tq-tint);}
/* الحقل نفسه بلا حد عند التركيز: قاعدة .h6 :focus-visible العامة كانت ترسم اطارا
   داخليا فوق اطار الحاوية فيظهر حدان — الحاوية وحدها تحمل حالة التركيز */
.h6 .h6-dsr-field .h6-dsr-input:focus,.h6 .h6-dsr-field .h6-dsr-input:focus-visible{outline:0;box-shadow:none;border:0;}
.h6-dsr-field > i{color:var(--tq-dark);font-size:18px;flex:0 0 auto;}
.h6-dsr-input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;font-weight:600;
  color:var(--ink);padding:12px 0;}
.h6-dsr-input::placeholder{color:var(--ink-3);font-weight:500;}
.h6-dsr-input::-webkit-search-cancel-button{display:none;}
.h6-dsr-clear{border:0;background:var(--surface);color:var(--ink-3);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto;}
.h6-dsr-clear[hidden]{display:none;}   /* display:grid كان يغلب [hidden] فظهر × والحقل فارغ */
.h6-dsr-clear:hover{color:var(--ink);}
.h6-dsr-kbd{flex:0 0 auto;font:600 11.5px/1 ui-monospace,monospace;color:var(--ink-3);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:4px 7px;}
/* القائمة المنسدلة: تطفو فوق المحتوى ولا تزيحه */
.h6-dsr-menu{position:absolute;inset-inline:0;top:0;z-index:40;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(15,40,50,.14);
  padding:6px;max-height:min(60vh,440px);overflow:auto;overscroll-behavior:contain;}
.h6-dsr.is-open .h6-dsr-try{visibility:hidden;}   /* القائمة تغطيها؛ الاخفاء يمنع تسرب حوافها */
.h6-dsr-head{font-size:12px;font-weight:800;color:var(--ink-3);letter-spacing:.02em;padding:8px 12px 6px;}
.h6-dsr-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:var(--ink);
  transition:background .15s;}
.h6-dsr-item:hover,.h6-dsr-item.is-active{background:var(--surface);}
.h6-dsr-item.is-best{background:var(--tq-tint);}
.h6-dsr-item.is-best:hover,.h6-dsr-item.is-best.is-active{background:var(--tq-tint);box-shadow:inset 0 0 0 1.5px var(--tq);}
.h6-dsr-ico{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--surface);color:var(--tq-dark);font-size:16px;}
.h6-dsr-item.is-best .h6-dsr-ico{background:var(--paper);}
.h6-dsr-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;line-height:1.45;}
.h6-dsr-title{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h6-dsr-sec{font-size:12px;font-weight:600;color:var(--tq-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h6-dsr-badge{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--tq-ink);background:var(--paper);
  border:1px solid var(--tq);border-radius:100px;padding:3px 9px;}
.h6-dsr-empty{padding:12px;color:var(--ink-2);font-size:14px;}
/* امثلة تحت الحقل */
.h6-dsr-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-block-start:10px;font-size:13px;color:var(--ink-3);}
.h6-dsr-try button{border:1px solid var(--line);background:var(--paper);color:var(--ink-2);border-radius:100px;
  padding:5px 12px;font:600 13px/1.3 inherit;cursor:pointer;transition:border-color .2s,color .2s;}
.h6-dsr-try button:hover{border-color:var(--tq);color:var(--tq-dark);}
/* نسخة الجانب في صفحة الدليل */
.h6-dsr-side{max-width:none;margin-block:0;}
.h6-dsr-side .h6-dsr-field{padding:0 11px;box-shadow:none;border-radius:12px;}
.h6-dsr-side .h6-dsr-input{font-size:14px;padding:10px 0;}
.h6-dsr-side .h6-dsr-item{padding:8px 10px;gap:9px;}
.h6-dsr-side .h6-dsr-ico{width:28px;height:28px;font-size:14px;}
.h6-dsr-side .h6-dsr-title{font-size:13.5px;}
.h6-dsr-side .h6-dsr-sec{font-size:12px;}
.h6-dsr-side .h6-dsr-badge{display:none;}

/* ── صقل صفحات الدليل ── */
/* الجوال: المقال اولا والجانب (بحث/فهرس/جيران) بعده — كان الجانب يملا اول شاشة كاملة */
@media(max-width:980px){
  .h6-lgl-grid > .h6-lgl-side{order:2;}
  .h6-lgl-grid > .h6-prose{order:1;}
}
/* تلميح «/» بلا معنى على شاشة لمس */
@media(hover:none),(max-width:700px){.h6-dsr-kbd{display:none;}}
/* طباعة صفحة دليل: المقال وحده بعرض الصفحة */
@media print{
  .h6-header,.h6-footer,.h6-progress,.h6-crumb,.h6-lgl-side,.h6-docs-nav,.h6-feats-end,.h6-dsr{display:none!important;}
  .h6-lgl{padding:0!important;}
  .h6-lgl-grid{display:block!important;}
  .h6-prose{border:0!important;box-shadow:none!important;padding:0!important;}
  .h6-prose figure img{max-width:100%!important;page-break-inside:avoid;}
  .h6-prose h2{page-break-after:avoid;}
}

/* ── توسيط كتلة الفهرس: الراس والبحث والامثلة في المنتصف ── */
.h6-lgl-head.is-center{margin-inline:auto;text-align:center;}
.h6-lgl-head.is-center > p{margin-inline:auto;}
.h6-dsr{margin-inline:auto;}
.h6-dsr-try{justify-content:center;}

/* ── صفحة الدليل: البحث ابن للشبكة — جانبا على الواسع، وفوق المقال متوسطا على الجوال ── */
.h6-lgl-grid.has-search{grid-template-rows:auto 1fr;gap:14px 26px;}
.h6-lgl-grid.has-search > .h6-dsr-side{grid-column:1;grid-row:1;margin-inline:0;justify-self:stretch;}   /* هامش auto على ابن الشبكة يمنعه من التمدد فيضيق عن عموده */
.h6-lgl-grid.has-search > .h6-lgl-side{grid-column:1;grid-row:2;}
.h6-lgl-grid.has-search > .h6-prose{grid-column:2;grid-row:1 / span 2;}
@media(max-width:980px){
  .h6-lgl-grid.has-search{grid-template-rows:none;gap:18px;}
  .h6-lgl-grid.has-search > .h6-dsr-side{grid-column:auto;grid-row:auto;order:1;width:100%;max-width:520px;margin-inline:auto;}
  .h6-lgl-grid.has-search > .h6-prose{grid-column:auto;grid-row:auto;order:2;}
  .h6-lgl-grid.has-search > .h6-lgl-side{grid-column:auto;grid-row:auto;order:3;}
}

/* ══════════════════════════════════════════════════════════════════
   مقررات متاحة للشراء (#courses) — الرف الكامل بشريحتي الفصل والمادة
   ─ البطاقات كلها ترسم في الخادم، والتصفية تخفي بصنف .is-hide:
     القائمة قصيرة فلا طلب ولا اعادة بناء، والروابط تبقى قابلة للنسخ.
   ─ لا خيار في الشريحة بلا بطاقة خلفه (البليد يبني الخيارات من المعروض).
   ══════════════════════════════════════════════════════════════════ */
.h6-store{background:var(--surface);}

/* ── شريط الشرائح: حقلان وعداد حي ── */
.h6-store-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin-block-end:20px;}
.h6-fld{display:flex;flex-direction:column;gap:6px;min-width:200px;}
.h6-fld > label,.h6-fld-lbl{font-size:12.5px;font-weight:700;color:var(--ink-3);}
/* قيمة ثابتة مكان قائمة بخيار واحد: بلون المعلومة (كعداد البطاقات) لا بلون
   القوائم الابيض — كي لا تقرأ كقائمة معطلة */
.h6-fix{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;padding-inline:15px;
  border-radius:13px;background:var(--tq-tint);color:var(--tq-ink);
  font-family:var(--font-display);font-size:15px;font-weight:800;
}
.h6-fix i{font-size:16px;color:var(--tq-dark);}
.h6-sel{position:relative;display:block;}
.h6-sel select{
  appearance:none;-webkit-appearance:none;width:100%;height:46px;
  padding-inline:14px 40px;border-radius:13px;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;transition:border-color .3s,box-shadow .3s;
}
/* بلا outline:none — الحلقة العامة .h6 :focus-visible هي وصول لوحة المفاتيح */
.h6-sel select:hover,.h6-sel select:focus{border-color:var(--tq);}
.h6-sel > i{
  position:absolute;inset-inline-end:14px;inset-block-start:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--tq-dark);font-size:16px;
}
/* ⚠️ العداد واللافتات والملاحظة عناصر <p>، والقائمة <ul>: قاعدتا
   `.h6 p{margin:0}` و`.h6 ul{margin:0;padding:0}` تخصيصهما (0,1,1) فتغلبان
   الصنف وحده (0,1,0) مهما تأخر — كل قاعدة تمس هوامشها تبدا بـ.h6 */
.h6 .h6-store-n{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;height:46px;padding-inline:15px;
  border-radius:13px;background:var(--tq-tint);color:var(--tq-ink);font-size:13.5px;font-weight:700;
}
.h6-store-n b{font-family:var(--font-display);font-size:17px;font-weight:800;}
.h6-store-n i{font-size:16px;color:var(--tq-dark);}

/* ── الشبكة والبطاقة ── */
.h6-store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:1100px){.h6-store-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.h6-store-grid{grid-template-columns:1fr;}}
.h6-store-card{
  position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.h6-store-card::after{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--tq);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.h6-store-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent;}
.h6-store-card:hover::after,.h6-store-card:focus-within::after{transform:scaleX(1);}
.h6-store-card.is-mine{background:var(--surface-2);border-color:rgba(28,163,144,.34);}
.h6-store-card.is-hide{display:none;}

/* بلا ايقونة جانبية: اسم المادة وحده في صدر البطاقة، والشارة في طرفها */
.h6-store-top{display:flex;align-items:flex-start;gap:11px;}
.h6-store-id{min-width:0;}
.h6-store-id b{
  display:block;font-family:var(--font-display);font-weight:800;font-size:17.5px;line-height:1.35;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;
}
/* شارتا الصف والفصل: شبكة مرنة لا سطر نص — الفراغ بينهما gap لا فاصل «·»،
   فسقوط احداهما لا يترك علامة معلقة (والفراغات بين ابناء flex تهمل). */
.h6-store-id > span{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-block-start:6px;}
/* الصف بارز: شارة ملونة لا تخفى ابدا — بها يميز المعلم بطاقته. وحين تتكرر
   المادة على اربعة صفوف فهي وحدها ما يفرق البطاقات، فلها حد رفيع وحجم اكبر
   قليلا من شارة الفصل كي تسبقها العين. */
.h6-store-gd{
  display:inline-flex;align-items:center;gap:5px;border-radius:100px;padding:4px 11px;
  background:var(--tq-tint);color:var(--tq-ink);font-size:13px;font-weight:800;
  border:1px solid rgba(28,163,144,.26);
}
.h6-store-gd i{font-size:14px;color:var(--tq-dark);}
/* الفصل ثانوي: شارة رمادية تسقط متى اثبته الشريط (الخادم حين يكون واحدا،
   وJS حين يختاره الزائر) */
.h6-store-sm{
  display:inline-flex;align-items:center;border-radius:100px;padding:3px 10px;
  background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:700;
}
.h6-store-grid.is-fix-sem .h6-store-sm{display:none;}

/* شارة واحدة في راس البطاقة (مشترك / مجاني / خصم) */
.h6-store-flag{
  margin-inline-start:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  border-radius:100px;padding:4px 10px;font-size:11.5px;font-weight:800;
}
.h6-store-flag i{font-size:13px;}
.h6-store-flag.is-disc{background:var(--amber-tint);color:var(--amber-ink);border:1px solid rgba(245,165,36,.42);}
.h6-store-flag.is-free{background:var(--tq);color:#fff;}
.h6-store-flag.is-mine{background:var(--tq-tint);color:var(--tq-ink);border:1px solid rgba(28,163,144,.34);}

/* سطر المعلومات: شريط خفيف يملا وسط البطاقة بدل فراغ، ورقم الاسئلة فيه
   غامق بلون الحبر — هو اول ما تقع عليه العين بعد اسم المادة. */
.h6 .h6-store-meta{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-block:14px;padding:9px 12px;
  background:var(--surface);border-radius:11px;
  font-size:13px;font-weight:600;color:var(--ink-3);
}
.h6-store-meta li{display:inline-flex;align-items:center;gap:6px;}
.h6-store-meta li b{font-weight:800;color:var(--ink);font-size:14px;}
.h6-store-meta i{font-size:15px;color:var(--tq-dark);opacity:.9;}

.h6-store-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-block-start:auto;padding-block-start:13px;border-block-start:1px solid var(--line);
}
.h6-store-price{display:inline-flex;align-items:baseline;gap:7px;}
.h6-store-price b{font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--ink);}
.h6-store-price b i{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-3);}
.h6-store-price b.is-free{color:var(--tq-dark);font-size:19px;}
.h6-store-price del{font-size:13px;color:var(--ink-3);}
/* البطاقة كلها هدف النقرة: زر البطاقة يمد مساحته عليها بعنصر زائف شفاف،
   فيكبر الهدف من زر الى بطاقة ولا يزدوج الرابط على قارئ الشاشة (الزر يبقى
   العنصر الوحيد القابل للتركيز). و‎overflow:hidden‎ على البطاقة يحصر المساحة
   فيها، و‎position:relative‎ عليها هو المرجع.
   ⚠️ ‎.h6-btn-primary:hover‎ فيه ‎transform‎ فيصير الزر مرجع ابنه المطلق:
   يحدث حين يكون المؤشر على الزر نفسه، والنقرة واقعة عليه اصلا. */
.h6-store-foot .h6-btn::before{content:'';position:absolute;inset:0;z-index:2;}
.h6-store-off{
  font-size:12.5px;font-weight:700;color:var(--ink-3);background:var(--surface);
  border:1px dashed var(--line);border-radius:100px;padding:6px 13px;
}

/* ── لافتة ايقاف الشراء وحالات الفراغ والتذييل ── */
.h6 .h6-store-stop{
  display:flex;align-items:center;gap:9px;margin-block-end:16px;padding:11px 15px;
  border-radius:var(--r-md);background:var(--amber-tint);color:var(--amber-ink);font-size:14px;font-weight:700;
}
.h6-store-stop i{font-size:18px;}
.h6 .h6-store-empty{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-block-start:16px;padding:24px;border-radius:var(--r-lg);
  background:var(--paper);border:1px dashed var(--line);
  text-align:center;color:var(--ink-2);font-size:15px;font-weight:600;
}
/* ⚠️ display:flex يبتلع سمة hidden — التصريح هنا يعيد لها حكمها */
.h6 .h6-store-empty[hidden]{display:none;}
.h6 .h6-store-reset{
  border:1.5px solid var(--line);border-radius:100px;padding:8px 16px;background:var(--paper);
  color:var(--tq-dark);font-size:13.5px;font-weight:800;transition:.3s var(--ease);
}
.h6 .h6-store-reset:hover{border-color:var(--tq);background:var(--tq-tint);}
/* سطر «يكبر ويتحسن» تحت البطاقات: خبر هادئ في وسط القسم، بايقونة صعود
   بلون التمييز. التوأم في التذييل (h6-foot-grow) بالنص نفسه. */
.h6 .h6-store-grow{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-block-start:18px;font-size:13.5px;font-weight:600;color:var(--ink-3);text-align:center;
}
.h6-store-grow i{font-size:16px;color:var(--tq-dark);flex:none;}
.h6 .h6-store-foot-note{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-block-start:18px;
  font-size:13px;color:var(--ink-3);
}
.h6-store-foot-note i{font-size:15px;color:var(--tq-dark);}
.h6-store-foot-note a{display:inline-flex;align-items:center;gap:5px;color:var(--tq-dark);font-weight:800;}
.h6-store-foot-note a:hover{color:var(--tq);}

@media(max-width:620px){
  .h6-fld{flex:1 1 100%;min-width:0;}
  .h6 .h6-store-n{margin-inline-start:0;}
  .h6-store-card{padding:16px 15px 14px;}
  .h6-store-id b{font-size:16.5px;}
  .h6-store-price b{font-size:19px;}
}