/* =====================================================================
   شاهد - واجهة العرض والتحكم عن بُعد
   ملف مستقل. لا يرث ولا يعدّل أي نمط قائم في المنصة.
   ===================================================================== */

:root {
  --sh-bg: #07070b;
  --sh-surface: #101018;
  --sh-surface-2: #16161f;
  --sh-line: #24242f;
  --sh-text: #e9e6f5;
  --sh-muted: #8b87a3;
  --sh-accent: #a78bfa;
  --sh-accent-dim: #7c5cf0;
  --sh-ok: #4ade80;
  --sh-warn: #fbbf24;
  --sh-bad: #f87171;
  --sh-radius: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--sh-bg);
  color: var(--sh-text);
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
  overflow: hidden;
}

/* ---------------------------------------------------------------- */
/* الهيكل                                                            */
/* ---------------------------------------------------------------- */
.sh-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.sh-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  height: 54px;
  flex: 0 0 auto;
  background: var(--sh-surface);
  border-bottom: 1px solid var(--sh-line);
}

.sh-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.5px;
  color: var(--sh-accent);
}

.sh-brand small {
  font-size: 11px;
  font-weight: 400;
  color: var(--sh-muted);
  letter-spacing: 0;
}

.sh-bar-spacer {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------- */
/* مؤشرات الحالة                                                     */
/* ---------------------------------------------------------------- */
.sh-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sh-muted);
  white-space: nowrap;
}

.sh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sh-muted);
  flex: 0 0 auto;
  transition: background 0.2s ease;
}

.sh-dot[data-state="connecting"] { background: var(--sh-warn); }
.sh-dot[data-state="live"] { background: var(--sh-ok); }
.sh-dot[data-state="error"] { background: var(--sh-bad); }

.sh-metrics {
  display: flex;
  gap: 14px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--sh-muted);
}

.sh-metrics span b {
  color: var(--sh-text);
  font-weight: 600;
}

/* اسم حساب الخدمة. لا يظهر أي شيء عن الوجهة المبثوثة، فقط هوية المشترك. */
.sh-account {
  font-size: 12px;
  color: var(--sh-muted);
  padding: 5px 11px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  white-space: nowrap;
  direction: ltr;
}

/* ---------------------------------------------------------------- */
/* الأزرار                                                           */
/* ---------------------------------------------------------------- */
.sh-btn {
  appearance: none;
  border: 1px solid var(--sh-line);
  background: var(--sh-surface-2);
  color: var(--sh-text);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sh-btn:hover:not(:disabled) {
  border-color: var(--sh-accent-dim);
  background: #1c1c28;
}

.sh-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sh-btn--primary {
  background: var(--sh-accent-dim);
  border-color: var(--sh-accent-dim);
  color: #fff;
  font-weight: 600;
}

.sh-btn--primary:hover:not(:disabled) {
  background: var(--sh-accent);
  border-color: var(--sh-accent);
}

/* ---------------------------------------------------------------- */
/* مسرح العرض                                                        */
/* ---------------------------------------------------------------- */
.sh-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sh-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: default;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}

/* مشغّل وضع المشاهدة، متراكب فوق البث الحي.
   لماذا مطلق الموضع: العنصران يشغلان نفس المستطيل، فيصير التبديل بينهما
   إظهاراً وإخفاءً في إطار واحد بدل انقطاع. والمسرح نفسه هو المرجع لأن أداة
   الملاءمة تضع مقاس العنصرين بالبكسل على قياسه. */
.sh-film {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.sh-film[hidden] {
  display: none !important;
}

/* مؤشر المشاهد يبقى ظاهراً دائماً.
   كان يُخفى أثناء التحكم ليحلّ محله مؤشر مرسوم يتبع الطرف البعيد. النتيجة
   كانت مؤشراً يتأخر بقدر زمن الشبكة، فيشعر المستخدم أن يده ثقيلة. مؤشره
   الحقيقي فوري بحكم كونه محلياً، والمرسوم يُخفى فلا يظهر اثنان. */
.sh-stage[data-control="on"] .sh-video {
  cursor: default;
}

.sh-cursor {
  display: none !important;
}

/* ---------------------------------------------------------------- */
/* المؤشر المرسوم                                                    */
/* ---------------------------------------------------------------- */
.sh-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
  /* translate3d يبقي الحركة على بطاقة الرسوميات، فلا تُعيد المتصفح تخطيط
     الصفحة مع كل حركة ماوس. */
  transform: translate3d(-100px, -100px, 0);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
  will-change: transform;
}

.sh-cursor[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- */
/* قائمة الإعدادات                                                   */
/* ---------------------------------------------------------------- */
.sh-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.sh-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
}

.sh-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 210px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  padding: 8px;
  z-index: 30;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

.sh-menu[hidden] {
  display: none;
}

.sh-menu-title {
  font-size: 11px;
  color: var(--sh-faint, #6f6b86);
  padding: 6px 10px 4px;
}

.sh-menu-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--sh-text);
  font-family: inherit;
  font-size: 13.5px;
  text-align: start;
  cursor: pointer;
}

.sh-menu-item small {
  color: var(--sh-muted);
  font-size: 11px;
}

.sh-menu-item:hover {
  background: var(--sh-surface-2);
}

.sh-menu-item[aria-current="true"] {
  background: rgba(124, 92, 240, .18);
  color: var(--sh-accent);
}

.sh-menu-item[aria-current="true"] small {
  color: var(--sh-accent);
}

.sh-menu-item[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

.sh-menu-sep {
  height: 1px;
  background: var(--sh-line);
  margin: 8px 4px;
}

.sh-menu-note {
  font-size: 11px;
  color: var(--sh-faint, #6f6b86);
  padding: 6px 10px 2px;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- */
/* الخروج من ملء الشاشة                                              */
/* ---------------------------------------------------------------- */
.sh-exit-fs {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 20;
  padding: 9px 16px;
  border: 1px solid var(--sh-line);
  border-radius: 8px;
  background: rgba(16, 16, 24, .88);
  color: var(--sh-text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}

.sh-exit-fs[hidden] {
  display: none;
}

/* يظهر عند تحريك الماوس ثم يخفت، فلا يحجب المشاهدة */
.sh-stage[data-fs="on"]:hover .sh-exit-fs,
.sh-stage[data-fs="on"][data-hint="1"] .sh-exit-fs {
  opacity: 1;
}

/* لا إطار حول الصورة.
   كان إطاراً بنفسجياً يعلن أن التحكم مفعّل، وهو بالضبط ما يجعل المشاهد يرى
   «نافذة جهاز» لا فيلماً. حالة التحكم يقولها زر الشريط، ولا حاجة لأن تُرسم
   على الصورة نفسها. */

/* ---------------------------------------------------------------- */
/* الطبقة الإعلامية                                                  */
/* ---------------------------------------------------------------- */
.sh-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 7, 11, 0.92);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.sh-overlay[hidden] {
  display: none;
}

/*
 * الغطاء لا يبتلع اللمس أبداً — والبطاقة وحدها تستقبله.
 *
 * الخلفية تمتد على المسرح كله بـz-index أعلى من الصورة، فكانت كل لمسة تقع
 * عليها لا على ما تحتها. وغطاءٌ نُسي ظاهراً - أو ظهر في مسار لم يُتوقَّع -
 * يعني شاشةً ميتة تماماً: لا لمسة تصل الجلسة، ولا التحكم يُفعَّل، ولا سبيل
 * إلى الإعدادات لمعرفة السبب. وقد وقع ذلك فعلاً وقياساً.
 *
 * والشرط هنا غير مشروط بقصد: أي محاولة لجعله ذكياً («يبتلع حين يحمل زراً»)
 * تعيد فتح الباب نفسه عند أول مسار يُغفَل. الخلفية تُمرِّر دائماً، والبطاقة
 * تستقبل دائماً - فيبقى الزر قابلاً للضغط ولا يبقى للشلل طريق.
 */
.sh-overlay {
  pointer-events: none;
}

.sh-overlay .sh-card {
  pointer-events: auto;
}

.sh-card {
  width: min(460px, calc(100% - 40px));
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  padding: 32px 28px;
  text-align: center;
}

.sh-card h2 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
}

.sh-card p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--sh-muted);
}

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

.sh-queue {
  font-size: 42px;
  font-weight: 700;
  color: var(--sh-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-bottom: 6px;
}

.sh-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  border: 3px solid var(--sh-line);
  border-top-color: var(--sh-accent);
  border-radius: 50%;
  animation: sh-spin 0.9s linear infinite;
}

@keyframes sh-spin {
  to { transform: rotate(360deg); }
}

.sh-hint {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sh-line);
  font-size: 12px;
  color: var(--sh-muted);
  line-height: 1.8;
}

/* ---------------------------------------------------------------- */
/* شريط التلميح السفلي                                                */
/* ---------------------------------------------------------------- */
.sh-toast {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16, 16, 24, 0.95);
  border: 1px solid var(--sh-line);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--sh-text);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sh-toast[data-show="1"] {
  opacity: 1;
}

/* ---------------------------------------------------------------- */
/* الاستجابة                                                          */
/* ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .sh-metrics {
    display: none;
  }
}

@media (max-width: 640px) {
  .sh-bar {
    height: 48px;
    padding: 0 12px;
    gap: 10px;
  }

  .sh-brand {
    font-size: 16px;
  }

  .sh-brand small {
    display: none;
  }

  .sh-status span:not(.sh-dot) {
    display: none;
  }

  .sh-account {
    display: none;
  }

  .sh-btn {
    padding: 7px 11px;
    font-size: 12px;
  }
}

/* ================================================================== */
/* الجوال واللمس                                                      */
/* ================================================================== */

/* المسرح لا يمرّر إيماءات اللمس للمتصفح.
   بدون هذا يفسّر المتصفح السحب على أنه تمرير للصفحة والقرص على أنه تكبير،
   فلا تصل الإيماءة إلى الجلسة البعيدة أبداً ويهتزّ التخطيط تحت الإصبع. */
.sh-stage {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}

/* الفيديو يملأ المساحة المتاحة ويحافظ على تناسبه.
   contain لا cover: الاقتصاص يخفي حواف الصفحة البعيدة، وحافة مخفية تعني
   زر تنقّل لا يستطيع المستخدم الوصول إليه. */
.sh-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (pointer: coarse) {
  /* لا مؤشر مرسوم ولا مؤشر متصفح: الإصبع هو المؤشر. */
  .sh-stage[data-control="on"] .sh-video,
  .sh-video {
    cursor: none;
  }

  .sh-cursor {
    display: none !important;
  }
}

/* شاشات ضيقة: الشريط يلتف بدل أن يدفع الأزرار خارج الشاشة، والمسرح يأخذ
   ما تبقّى. الارتفاع بـ dvh لا vh لأن شريط عنوان المتصفح على الجوال يتقلص
   ويتمدد، وvh يحسب أطول حالة فيبقى جزء من المشغّل تحت الطيّة دائماً. */
@media (max-width: 760px) {
  .sh-app {
    height: 100dvh;
  }

  .sh-bar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
  }

  .sh-bar-spacer {
    display: none;
  }

  .sh-brand {
    font-size: 15px;
    flex: 1 1 auto;
  }

  .sh-btn {
    padding: 8px 10px;
    font-size: 12px;
    flex: 0 0 auto;
  }

  .sh-menu {
    position: fixed;
    inset-inline: 10px;
    inset-inline-end: 10px;
    top: auto;
    bottom: 10px;
    min-width: 0;
    max-height: 60dvh;
    overflow-y: auto;
  }

  .sh-menu-item {
    padding: 13px 12px;
    font-size: 15px;
  }

  .sh-card {
    padding: 22px 18px;
  }

  .sh-exit-fs {
    top: 10px;
    inset-inline-end: 10px;
    opacity: 1;
  }
}

/* الوضع الأفقي على جوال قصير: الشريط يضيق ليترك أكبر مساحة للصورة. */
@media (max-height: 480px) and (orientation: landscape) {
  .sh-bar {
    min-height: 40px;
    padding: 4px 8px;
  }

  .sh-btn {
    padding: 6px 9px;
    font-size: 11.5px;
  }

  .sh-brand small {
    display: none;
  }
}

/* =====================================================================
   بوابة فحص السرعة
   ---------------------------------------------------------------------
   تعلو كل شيء (z-index أعلى من غطاء الجلسة) لأنها تسبقه: الجلسة لا تُفتح
   قبل أن ينقر المشاهد «شاهد»، وتلك النقرة هي ما يمنح المستند إذن الصوت.
   ===================================================================== */
/* ------------------------------------------------------------------ */
/* بوابة الاختيار: أي المسارين                                          */
/* ------------------------------------------------------------------ */
/*
 * فوق بوابة السرعة بدرجة واحدة (9 مقابل 8): هي تسبقها في الزمن، ومن يختار
 * السينما يكشف الثانية بعد أن تنزاح الأولى. ولا تُبنى على نفس الطبقة لأن
 * ترتيبهما في المستند ليس ترتيبهما في الظهور.
 */
.sh-choice {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(109, 40, 217, 0.22), rgba(7, 7, 11, 0.97) 62%);
  backdrop-filter: blur(4px);
  z-index: 9;
  padding: 16px;
}

.sh-choice[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* شريط الأقسام: ما ليس مسارَ VRChat أساسياً                           */
/* ------------------------------------------------------------------ */
/*
 * فوق البطاقة لا داخلها، وبلونٍ غير لونها.
 *
 * والسبب أمانٌ لا ترتيب: القسم المدفوع يُخرج رابطاً بلا حماية، والقسم العادي
 * يُخرج رابطاً محروساً بالعالَم. وبطاقتان متطابقتان في قائمةٍ واحدة تجعلان
 * الفرقَ سطرَ وصفٍ صغير يُقرأ بالعادة لا بالقصد - ومن أخطأ البابَ نشر بثَّه
 * على الإنترنت وهو يظنّه محروساً.
 *
 * فالانفصال بثلاثة: موضعٌ آخر، ولونٌ آخر، وشارةٌ تقول ما هو.
 */
.sh-choice-wrap {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sh-nav {
  display: flex;
  gap: 10px;
}

.sh-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 13px;
  border-radius: var(--sh-radius);
  border: 1px solid var(--sh-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--sh-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sh-nav-btn:hover, .sh-nav-btn:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}
.sh-nav-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}
.sh-nav-top b { font-weight: 700; }
.sh-nav-btn small {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--sh-muted);
}
.sh-nav-icon { display: inline-flex; opacity: 0.85; }

/*
 * لونُ القسم المدفوع ذهبيٌّ لا بنفسجي.
 *
 * البنفسجي هو لونُ الخدمة كلها؛ فلو أخذه القسمُ المدفوع لصار «واحداً منها»
 * بصرياً. والذهبيُّ لا يظهر في أي موضعٍ آخر من الواجهة، فحيثما رآه المستخدم
 * عرف أنه في المسار الحرّ - على البوّابة، وفي الشريط، وعلى الصفحة نفسها.
 */
.sh-nav-btn--pro {
  border-color: rgba(240, 180, 60, 0.45);
  background: linear-gradient(180deg, rgba(240, 180, 60, 0.13), rgba(240, 180, 60, 0.05));
}
.sh-nav-btn--pro:hover, .sh-nav-btn--pro:focus-visible {
  border-color: #f0b43c;
  background: linear-gradient(180deg, rgba(240, 180, 60, 0.22), rgba(240, 180, 60, 0.08));
}
.sh-nav-btn--pro .sh-nav-top b { color: #f6c76a; }

.sh-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f0b43c;
  color: #221806;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  /* لاتينيّةٌ في سطرٍ عربي: بلا هذا تنقلب «PRO» إلى «ORP» في بعض المحرّكات. */
  direction: ltr;
  unicode-bidi: isolate;
}

.sh-nav-btn--tv .sh-nav-top b { color: #7fd4e8; }
.sh-nav-btn--tv { border-color: rgba(127, 212, 232, 0.32); }
.sh-nav-btn--tv:hover, .sh-nav-btn--tv:focus-visible { border-color: #7fd4e8; }

/* الشاشات الضيّقة: القسمان فوق بعضهما بدل أن يُعصر نصُّهما. */
@media (max-width: 380px) {
  .sh-nav { flex-direction: column; }
}

.sh-choice-card {
  width: min(420px, 100%);
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  padding: 26px 24px 22px;
  text-align: center;
}

.sh-choice-card h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
}

.sh-choice-card > p {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--sh-muted);
}

/* خياران متساويان في الوزن البصري: لا افتراضي هنا، والقرار يخصّ المستخدم. */
.sh-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px 16px;
  background: var(--sh-surface-2);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  color: var(--sh-text);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  /* هدف لمس لا يُخطئه الإبهام، وبلا تأخير النقرة. */
  min-height: 64px;
  touch-action: manipulation;
  transition: border-color 0.15s, background 0.15s;
}

.sh-pick:last-of-type { margin-bottom: 0; }

/*
 * الحوم يجب أن يُرى من بعيد، والضغط يجب أن يُحسّ فوراً.
 *
 * في VR لا يشعر المستخدم بالزر تحت إصبعه: التغيّر البصري هو إحساسه الوحيد بأن
 * ليزره على الهدف الصحيح، وأن الزناد سُجّل. فحدٌّ ملوّن وهالةٌ حول الزر عند
 * الحوم، وانكماشٌ فوري عند الضغط.
 */
.sh-pick:hover,
.sh-pick:focus-visible {
  border-color: var(--sh-accent);
  background: #1b1b27;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3);
  outline: none;
}

/*
 * `transition: none` داخل `:active` تحديداً.
 *
 * القاعدة الأصلية تنقل الحدّ والخلفية في 150 مث - وهي مدة مقبولة للحوم، وقاتلة
 * للضغط: أثر الضغطة يبدأ بعد أن يرفع المستخدم الزناد، فيبدو الزر كأنه لم
 * يستجب فيضغط ثانية.
 */
.sh-pick:active {
  transition: none;
  transform: scale(0.98);
  background: #241a3a;
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 5px rgba(167, 139, 250, 0.45);
}

/*
 * محتوى الزرّ لا يستقبل الضغط.
 *
 * الأيقونة والنصّ أبناءُ الزرّ، والحدث يصعد منهما إليه على أي حال - لكن
 * `pointer-events: none` يجعل الهدف الذي يراه المتصفح هو الزرّ نفسه دائماً،
 * فلا تختلف نتيجة الضغطة باختلاف موضع الليزر داخله.
 */
.sh-pick-icon,
.sh-pick-text { pointer-events: none; }

.sh-pick-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(124, 92, 240, 0.14);
  color: var(--sh-accent);
}

.sh-pick-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sh-pick-text b { font-size: 15px; font-weight: 700; }

.sh-pick-text small {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sh-muted);
}

.sh-speed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(109, 40, 217, 0.22), rgba(7, 7, 11, 0.97) 62%);
  backdrop-filter: blur(4px);
  z-index: 8;
  padding: 16px;
}

.sh-speed[hidden] {
  display: none;
}

.sh-speed-card {
  width: min(420px, 100%);
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  padding: 26px 24px 22px;
  text-align: center;
}

.sh-speed-card h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
}

.sh-speed-card > p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--sh-muted);
}

.sh-gauge {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 4px auto 2px;
}

.sh-gauge-track,
.sh-gauge-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.sh-gauge-track {
  stroke: rgba(255, 255, 255, 0.09);
}

.sh-gauge-fill {
  stroke: url(#sh-gauge-grad);
  /* الحركة على الرسم لا على الرقم: العين تتابع القوس، والرقم يقفز معه. */
  transition: stroke-dashoffset 220ms ease-out;
}

.sh-needle-line {
  stroke: #f8fafc;
  stroke-width: 3;
  stroke-linecap: round;
}

#sh-needle {
  transition: transform 220ms ease-out;
  transform-box: view-box;
}

.sh-needle-hub {
  fill: #f8fafc;
  stroke: var(--sh-surface);
  stroke-width: 3;
}

.sh-gauge-value {
  fill: #f8fafc;
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sh-gauge-unit {
  fill: var(--sh-muted);
  font-size: 11px;
}

.sh-speed-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 4px;
}

.sh-speed-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  padding: 9px 6px;
}

.sh-speed-row span {
  display: block;
  font-size: 11.5px;
  color: var(--sh-muted);
  margin-bottom: 3px;
}

.sh-speed-row b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* القياس الجاري يُعلَّم، فيعرف المشاهد أي رقم يُقاس الآن بدل أن ينتظر
   ثلاثة صناديق ساكنة. */
.sh-speed-row[data-active="1"] {
  border-color: var(--sh-accent);
  background: rgba(139, 92, 246, 0.12);
}

.sh-speed-result {
  margin: 12px 0 4px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.10);
  border: 1px solid rgba(34, 211, 238, 0.35);
  font-size: 13.5px;
  line-height: 1.7;
}

.sh-speed-result[hidden] {
  display: none;
}

.sh-speed-go {
  width: 100%;
  margin-top: 14px;
  padding: 13px 18px;
  font-size: 16px;
  font-weight: 700;
}

.sh-speed-go[hidden] {
  display: none;
}

.sh-speed-skip {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: 0;
  color: var(--sh-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sh-speed-skip[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sh-gauge-fill,
  #sh-needle {
    transition: none;
  }
}

/* =====================================================================
   الواجهة السينمائية واللمس
   ===================================================================== */

/*
 * الشريط العلوي ينزلق خارج الشاشة ويعود عند أول حركة أو لمسة.
 *
 * إخفاؤه نهائياً كان يدفن الترس - ومعه مفتاح شريط السرعة وزر الخروج - فلا
 * يبقى للمشاهد سبيل إلى إعداداته. هذا سلوك مشغّلات البثّ نفسه: الشريط موجود
 * حين تطلبه، وغائب حين تنسى أنك أمام شريط.
 */
/*
 * الشريط يطفو فوق المسرح ولا يزاحمه.
 *
 * كان شقيقاً له في تخطيط عمودي، فيحجز ارتفاعه حتى وهو منزلق خارج الشاشة:
 * الإزاحة بـtransform لا تُخرج العنصر من التدفق. النتيجة شريط أسود دائم
 * بارتفاع الشريط أعلى الصورة على الجوال. جعله مطلقاً يعطي المسرح كامل
 * الارتفاع، وهو أيضاً سلوك مشغّلات البثّ: أدوات تعلو الصورة لا تقتطع منها.
 */
.sh-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 6;
  transition: transform 260ms ease, opacity 260ms ease;
  will-change: transform;
  background: linear-gradient(to bottom, rgba(7, 7, 11, 0.92), rgba(7, 7, 11, 0.72) 70%, transparent);
  border-bottom: 0;
}

.sh-app {
  position: relative;
}

.sh-app[data-chrome="off"] .sh-bar {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* شريط السرعة يتبع الشريط في اختفائه: هو جزء من واجهة الموقع لا من الفيلم. */
.sh-app[data-chrome="off"] .sh-metrics {
  opacity: 0;
}

/*
 * لا تأخير عند النقر، ولا انتقاء نصّ عند السحب.
 *
 * touch-action: manipulation يُسقط انتظار النقرة المزدوجة، وهو التأخير الذي
 * يجعل كل زر يبدو ثقيلاً على الجوال. والانتقاء عند السحب يحوّل محاولة تمرير
 * إلى تظليل نصّ أزرق.
 */
.sh-btn,
.sh-menu-item,
.sh-speed-go,
.sh-speed-skip,
.sh-exit-fs,
.sh-action {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.sh-app {
  -webkit-tap-highlight-color: transparent;
}

/* المسرح لا يمرّر ولا يكبّر: كل لمسة عليه إدخال للجلسة البعيدة، ولو تُرك
   للمتصفح لالتقطها كإيماءة تمرير أو تكبير قبل أن تصل. */
.sh-stage {
  touch-action: none;
}

/* القوائم تمرّر بسلاسة القصور الذاتي على iOS. */
.sh-menu,
.sh-speed-card {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* =====================================================================
   التحكم اليدوي في المقاس
   ---------------------------------------------------------------------
   الحساب التلقائي يلائم الشكل، وهذا يلائم الذوق. شاشة تُشاهَد من نصف متر
   وأخرى من مترين تريدان مقاسين مختلفين لنفس الأبعاد تماماً، ولا خوارزمية
   تعرف بُعد عين المشاهد.
   ===================================================================== */
.sh-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.sh-zoom-range {
  width: 88px;
  accent-color: var(--sh-accent);
  touch-action: manipulation;
  cursor: pointer;
}

/* على الشاشات الضيقة يبقى الزران ويغيب الشريط: زرّان أدقّ من شريط بعرض
   إبهام، والمساحة لا تتسع لثلاثتها. */
.sh-app[data-density="compact"] .sh-zoom-range,
.sh-app[data-density="icons"] .sh-zoom-range {
  display: none;
}

.sh-app[data-density="icons"] #sh-zoom-reset {
  display: none;
}

/* =====================================================================
   درجات الكثافة
   ---------------------------------------------------------------------
   يضبطها المفتّش في shahid.js بعد قياس فيضان الشريط فعلياً، لا حسب عرض
   مفترض. كل درجة تتخلّى عمّا هو أقل ضرورة: الوصف، ثم اسم الحساب، ثم الاسم
   نفسه - والأزرار تبقى إلى آخر درجة لأنها المخرج الوحيد للمشاهد.
   ===================================================================== */
.sh-app[data-density="compact"] .sh-brand small,
.sh-app[data-density="compact"] .sh-account {
  display: none;
}

.sh-app[data-density="icons"] .sh-brand small,
.sh-app[data-density="icons"] .sh-account,
.sh-app[data-density="icons"] .sh-brand {
  display: none;
}

.sh-app[data-density="icons"] .sh-btn {
  padding: 7px 9px;
  font-size: 12px;
}

/* مقياس الواجهة يحسبه المفتّش من البعد الأصغر للشاشة. */
.sh-speed-card {
  font-size: calc(1rem * var(--sh-ui-scale, 1));
}

.sh-speed-go {
  min-height: calc(3.2rem * var(--sh-ui-scale, 1));
}

.sh-gauge {
  max-width: calc(300px * var(--sh-ui-scale, 1));
}

/* =====================================================================
   الجوال: أحجام تُقرأ وتُضغط
   ---------------------------------------------------------------------
   الشاشة الصغيرة لا تريد نسخة مصغّرة من واجهة الحاسوب. الأرقام أدناه بوحدات
   نسبية تكبر مع الشاشة، وبحد أدنى لا ينزل تحت ما يمكن ضغطه بالإبهام.
   ===================================================================== */
@media (max-width: 760px) {
  .sh-speed {
    padding: 12px;
  }

  .sh-speed-card {
    width: min(100%, 30rem);
    padding: clamp(18px, 5vw, 26px) clamp(14px, 4.5vw, 22px) 20px;
    border-radius: 18px;
  }

  .sh-speed-card h2 {
    font-size: clamp(20px, 5.6vw, 26px);
  }

  .sh-speed-card > p {
    font-size: clamp(14px, 3.9vw, 17px);
  }

  .sh-gauge {
    max-width: min(92vw, 26rem);
  }

  .sh-gauge-value {
    font-size: 34px;
  }

  .sh-gauge-unit {
    font-size: 13px;
  }

  .sh-speed-row {
    padding: clamp(10px, 2.6vw, 14px) 6px;
    border-radius: 12px;
  }

  .sh-speed-row span {
    font-size: clamp(12px, 3.2vw, 14px);
  }

  .sh-speed-row b {
    font-size: clamp(15px, 4.2vw, 19px);
  }

  .sh-speed-result {
    font-size: clamp(14px, 3.8vw, 17px);
    padding: clamp(12px, 3.4vw, 16px);
  }

  /* زر «شاهد»: هدف لمس مريح لا زر سطح مكتب مصغّر. */
  .sh-speed-go {
    min-height: 3.4rem;
    font-size: clamp(17px, 4.8vw, 21px);
    border-radius: 14px;
  }

  .sh-speed-skip {
    min-height: 2.75rem;
    font-size: clamp(13px, 3.6vw, 15px);
  }

  .sh-btn {
    min-height: 2.6rem;
  }

  .sh-menu-item {
    min-height: 3rem;
  }
}