/* «الساحة» · «مقاطع» — المشغّل العمودي (screens/saha-clips.js) والشريحة في شريط الساحة وزرّ «شاهد كمقطع» على بلاطة
   الفيديو، وأوراق «مقاطع لك» وبطاقة «أداء المقاطع» (ui/interests-sheet.js — القسم ٧، بألوان السمة لا السطح الأسود).
   المشغّل سطح أسود في السمتين (كالمكالمة والمساحة): رموز ui.css تُعاد تعريفها داخل .cl-screen فتتبعها الأزرار والصور. */

/* ═══ ١. الشريحة في شريط الساحة وزرّ البلاطة ═════════════════════════ */

/* ثلاث شرائح «لك · متابَعون · مقاطع»: المؤشّر ثلث العرض (saha.css · .sa-seg-ind لاثنتين) */
.sa-seg.sa-seg3 .sa-seg-ind { width: calc((100% - 6px - 6px) / 3); }
.sa-seg .sa-seg-clips { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.sa-seg .sa-seg-clips[hidden] { display: none; }
.sa-seg .sa-seg-clips .icon-svg { width: 16px; height: 16px; flex: none; }

/* «شاهد كمقطع» في زاوية بلاطة الفيديو (المدّة في الزاوية الأخرى) */
.sa-vclip {
  position: absolute; z-index: 2; bottom: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-full); background: rgba(0, 0, 0, .62); color: #fff;
  font: inherit; font-size: var(--fz-xs); font-weight: 700; cursor: pointer; transition: transform var(--dur-1) var(--ease);
}
.sa-vclip .icon-svg { width: 14px; height: 14px; }
.sa-vclip:active { transform: scale(.94); }

/* ═══ ٢. السطح ═══════════════════════════════════════════════════════ */

.cl-screen {
  --cl-fg: #FFFFFF; --cl-fg2: rgba(255, 255, 255, .82); --cl-fg3: rgba(255, 255, 255, .6);
  --cl-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  --cl-acts-w: 64px;
  --cl-bottom: calc(var(--safe-b) + 6px);
  --fg: var(--cl-fg); --fg-2: var(--cl-fg2); --fg-3: var(--cl-fg3); --bg-2: rgba(255, 255, 255, .12); --bg-3: rgba(255, 255, 255, .2);
  --accent: #6FA2FF; --accent-fg: #06101F; --accent-soft: rgba(111, 162, 255, .2); --accent-press: #5B8DEF;

  position: fixed; inset: 0; overflow: hidden; isolation: isolate;
  background: #000; color: var(--cl-fg); color-scheme: dark;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* الصفحات: مقطع لكل شاشة، والتمرير يلتقط كل واحد في مكانه */
.cl-pager {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: pan-y; outline: none;
}
.cl-pager::-webkit-scrollbar { display: none; }
.cl-slide {
  position: relative; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always;
  contain: layout paint style; background: #000;
}

/* الفيديو: غطاءً للعمودي، وكاملاً بحوافّ للعرضيّ — والمصغّرة مغبَّشة تحته حتى يصل أول إطار */
.cl-media { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.cl-poster {
  position: absolute; inset: -24px; background: #111 center / cover no-repeat; filter: blur(18px) saturate(1.15) brightness(.8);
  transform: scale(1.06); transition: opacity var(--dur-3) var(--ease);
}
.cl-media[data-fit="cover"] .cl-poster { filter: blur(10px) saturate(1.1); }
.cl-video { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-2) var(--ease); background: transparent; }
.cl-media[data-fit="contain"] .cl-video { object-fit: contain; }
.cl-live .cl-video { opacity: 1; }
.cl-live .cl-media[data-fit="cover"] .cl-poster { opacity: 0; }

/* سطح اللمس فوق الفيديو (لمسة · لمستان · ضغطة مطوّلة)، وتعتيم أسفله وأعلاه للنصّ */
.cl-stage { position: absolute; inset: 0; z-index: 1; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.cl-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .42) 0, rgba(0, 0, 0, 0) calc(var(--safe-t) + 96px)),
    linear-gradient(to top, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, .18) 34%, rgba(0, 0, 0, 0) 52%);
}

/* علامة الوسط: تشغيل/صوت تومض، والإيقاف يبقيها */
.cl-center {
  position: absolute; z-index: 2; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .42); color: #fff; pointer-events: none;
  opacity: 0; transform: scale(.8);
}
.cl-center .icon-svg { width: 36px; height: 36px; }
.cl-center [data-icon="play"] svg { transform: translateX(2px); }
.cl-paused .cl-center { opacity: 1; transform: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-spring); }
.cl-center.cl-flash { animation: cl-flash 620ms var(--ease) both; }
@keyframes cl-flash { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; transform: scale(1.04); } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.1); } }

/* ينتظر البيانات (بعد 350ms) */
.cl-wait { position: absolute; z-index: 2; inset: 0; margin: auto; width: 44px; height: 44px; display: none; place-items: center; pointer-events: none; }
.cl-busy .cl-wait { display: grid; }
.cl-spinner {
  display: inline-block; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85);
  border-top-color: transparent; animation: spin .8s linear infinite;
}

/* تعذّر التشغيل */
.cl-err {
  position: absolute; z-index: 3; inset: 0; margin: auto; height: max-content; width: min(280px, 80%);
  display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--cl-fg2); font-size: var(--fz-md);
}
.cl-err[hidden] { display: none; }
.cl-err > .icon-svg { width: 36px; height: 36px; opacity: .8; }

/* قلب اللمستين حيث اللمس */
.cl-heart {
  position: absolute; z-index: 4; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; color: #FF3B5C;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); animation: cl-heart 820ms cubic-bezier(.2, .9, .3, 1.1) both;
}
.cl-heart .icon-svg, .cl-heart svg { width: 100%; height: 100%; }
@keyframes cl-heart {
  0% { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(.3); }
  18% { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1.18); }
  32% { transform: rotate(var(--tilt, 0deg)) scale(.94); }
  48% { transform: rotate(var(--tilt, 0deg)) scale(1); opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(-70px) scale(1.25); }
}

/* ═══ ٣. الرأس وما يطفو ═══════════════════════════════════════════════ */

.cl-top {
  position: absolute; z-index: 5; top: 0; inset-inline: 0; display: flex; align-items: center; gap: 4px;
  height: calc(var(--safe-t) + 56px); padding: var(--safe-t) 6px 0; pointer-events: none;
}
.cl-top > * { pointer-events: auto; }
.cl-ib { color: #fff; filter: drop-shadow(var(--cl-shadow)); }
.cl-ib:active { background: rgba(255, 255, 255, .14); }
.cl-title { flex: 1; margin: 0; font-size: var(--fz-lg); font-weight: 800; text-shadow: var(--cl-shadow); pointer-events: none; }
.cl-hint {
  position: absolute; z-index: 5; top: calc(var(--safe-t) + 60px); inset-inline-start: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-full);
  background: rgba(0, 0, 0, .55); color: #fff; font: inherit; font-size: var(--fz-sm); font-weight: 700; white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade-in var(--dur-3) var(--ease) both;
}
[dir="rtl"] .cl-hint { transform: translateX(50%); }
.cl-hint[hidden] { display: none; }
.cl-hint .icon-svg { width: 16px; height: 16px; }
.cl-speed {
  position: absolute; z-index: 6; top: calc(var(--safe-t) + 64px); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: var(--r-full);
  background: rgba(0, 0, 0, .6); color: #fff; font-weight: 800; pointer-events: none; direction: ltr;
}
.cl-speed[hidden] { display: none; }
.cl-speed .icon-svg { width: 16px; height: 16px; }

/* ═══ ٤. الصاحب والنص، وعمود الأفعال ═══════════════════════════════════ */

.cl-info {
  position: absolute; z-index: 3; inset-inline-start: 14px; inset-inline-end: calc(var(--cl-acts-w) + 14px);
  bottom: calc(var(--cl-bottom) + 22px); display: grid; gap: 8px; pointer-events: none; text-shadow: var(--cl-shadow);
}
.cl-info > * { pointer-events: auto; }
.cl-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-av { flex: none; padding: 0; border: 0; background: none; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.cl-av .av { --sz: 36px; }
.cl-name {
  flex: 0 1 auto; min-width: 0; padding: 4px 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 800;
  font-size: var(--fz-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-who .vbadge { flex: none; margin-inline-start: -4px; }
.cl-when { flex: none; color: var(--cl-fg3); font-size: var(--fz-sm); white-space: nowrap; }
.cl-fslot { flex: none; display: inline-flex; }
.cl-fslot:empty { display: none; }
.cl-fbtn.btn { height: 30px; min-width: 0; padding: 0 12px; font-size: var(--fz-sm); background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); text-shadow: none; }
.cl-fbtn.btn.on { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); color: var(--cl-fg2); }
.cl-fbtn.btn:active:not(:disabled) { background: rgba(255, 255, 255, .16); }
.cl-cap {
  font-size: var(--fz-md); line-height: 1.5; color: var(--cl-fg); unicode-bidi: plaintext; text-align: start; white-space: pre-line;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: pointer;
}
.cl-cap.cl-open { display: block; -webkit-line-clamp: unset; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; }
.cl-cap .sa-tag, .cl-cap .sa-mention, .cl-cap .sa-link { color: #fff; font-weight: 800; }
.cl-cap .sa-tag:active, .cl-cap .sa-mention:active, .cl-cap .sa-link:active { background: rgba(255, 255, 255, .18); }

.cl-acts {
  position: absolute; z-index: 3; inset-inline-end: 6px; bottom: calc(var(--cl-bottom) + 22px); width: var(--cl-acts-w);
  display: grid; justify-items: center; gap: 6px;
}
.cl-act {
  display: grid; justify-items: center; gap: 1px; width: var(--cl-acts-w); padding: 4px 0; border: 0; background: none; color: #fff;
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cl-act:disabled { opacity: .45; cursor: default; }
.cl-ic {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)); transition: transform var(--dur-1) var(--ease);
}
.cl-ic .icon-svg { width: 30px; height: 30px; }
.cl-act:active:not(:disabled) .cl-ic { transform: scale(.88); }
.cl-n { min-height: 16px; font-size: var(--fz-xs); font-weight: 800; text-shadow: var(--cl-shadow); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.cl-act[data-act="like"].on { color: #FF3B5C; }
.cl-act[data-act="like"].on .cl-n, .cl-act[data-act="repost"].on .cl-n, .cl-act[data-act="bookmark"].on .cl-n { color: #fff; }
.cl-act[data-act="repost"].on { color: #2BD47D; }
.cl-act[data-act="bookmark"].on { color: #FFC83D; }
.cl-views { cursor: default; }
.cl-views .cl-ic .icon-svg { width: 26px; height: 26px; }
.cl-act[data-act="more"] .cl-n { display: none; }
.cl-pop .cl-ic { animation: cl-pop 420ms var(--ease-spring); }
/* شاشة قصيرة (≤ 640): العمود أقصر فلا يبلغ الرأس */
@media (max-height: 640px) {
  .cl-screen { --cl-acts-w: 56px; }
  .cl-acts { gap: 0; }
  .cl-ic { width: 38px; height: 38px; }
  .cl-ic .icon-svg { width: 26px; height: 26px; }
}
@keyframes cl-pop { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 100% { transform: scale(1); } }

/* شريط التقدّم: خطّ رفيع في الأسفل ومساحة لمس أعلى منه؛ يكبر ووقته فوقه ما دام الإصبع عليه */
.cl-prog {
  position: absolute; z-index: 4; inset-inline: 0; bottom: var(--cl-bottom); height: 22px; display: flex; align-items: flex-end;
  padding: 0 0 6px; touch-action: none; cursor: pointer; outline: none;
}
.cl-track { position: relative; flex: 1; height: 2px; margin: 0 10px; border-radius: 2px; background: rgba(255, 255, 255, .26); overflow: hidden; transition: height var(--dur-1) var(--ease); }
.cl-fill { position: absolute; inset: 0; background: rgba(255, 255, 255, .92); transform-origin: left center; transform: scaleX(0); }
.cl-prog:focus-visible .cl-track, .cl-scrub .cl-track { height: 5px; }
.cl-time {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: var(--r-full);
  background: rgba(0, 0, 0, .6); color: #fff; font-size: var(--fz-sm); font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none;
}
.cl-scrub .cl-time { opacity: 1; }
.cl-scrub .cl-info, .cl-scrub .cl-acts { opacity: .25; transition: opacity var(--dur-2) var(--ease); }

/* ═══ ٥. الحالات ═════════════════════════════════════════════════════ */

.cl-state { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: #000; }
.cl-state[hidden] { display: none; }
.cl-skel {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg, #15181F 0%, #0B0D12 55%, #000 100%);
}
.cl-empty {
  display: grid; justify-items: center; gap: 10px; width: min(320px, 86%); text-align: center; color: var(--cl-fg2);
  font-size: var(--fz-md); line-height: 1.5;
}
.cl-empty > .icon-svg { width: 44px; height: 44px; color: var(--cl-fg3); }
.cl-empty b { color: #fff; font-size: var(--fz-lg); font-weight: 800; }
.cl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.cl-btn.btn { background: #fff; color: #000; margin-top: 4px; }
.cl-btn.btn:active:not(:disabled) { background: rgba(255, 255, 255, .85); }
.cl-btn2.btn { margin-top: 4px; background: rgba(255, 255, 255, .14); color: #fff; }
.cl-tail { display: grid; place-items: center; }

/* ═══ ٦. ورقة التعليقات (بسمة التطبيق، لا السطح الأسود) ═══════════════ */

.cl-csheet { display: flex; flex-direction: column; height: min(72vh, 620px); margin: 0 -16px calc(-16px - var(--safe-b)); }
.cl-chead { flex: none; display: flex; align-items: baseline; gap: 8px; padding: 0 20px 8px; border-bottom: 1px solid var(--sep); }
.cl-chead .sheet-title { margin: 2px 0 0; }
.cl-ccount { color: var(--fg-3); font-size: var(--fz-sm); font-weight: 700; }
.cl-cbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.cl-cbody .sa-card { background: transparent; }
.cl-cfoot { display: flex; justify-content: center; padding: 6px 0; }
.cl-cfoot:empty { display: none; }
.cl-cempty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center; color: var(--fg-3); font-size: var(--fz-md); }
.cl-cempty > .icon-svg { width: 36px; height: 36px; opacity: .7; }
.cl-cempty b { color: var(--fg); font-size: var(--fz-lg); }
.cl-cbar { flex: none; padding: 8px 12px calc(8px + var(--safe-b)); border-top: 1px solid var(--sep); background: var(--bg-elev); }
.cl-cto { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 6px; color: var(--fg-3); font-size: var(--fz-sm); font-weight: 700; }
.cl-cto[hidden] { display: none; }
.cl-cto .icon-btn { width: 30px; height: 30px; }
.cl-cto .icon-svg { width: 16px; height: 16px; }
.cl-crow { display: flex; align-items: flex-end; gap: 8px; }
.cl-crow > .av { flex: none; margin-bottom: 6px; }
textarea.cl-cin {
  flex: 1; min-width: 0; height: 40px; min-height: 40px; max-height: 104px; padding: 8px 14px; border-radius: 20px; resize: none;
  font-size: var(--fz-md); line-height: 1.45; unicode-bidi: plaintext; -webkit-user-select: text; user-select: text;
}
.cl-csend { color: var(--accent); margin-bottom: -1px; }
.cl-csend:disabled { color: var(--fg-3); opacity: .6; }

/* ═══ ٧. «مقاطع لك»: لست مهتماً · لماذا أرى هذا · الاهتمامات · أداء المقاطع ═══ */

/* «لست مهتماً»: المقطع ينزلق جانباً ويخفت، والذي بعده يستقرّ في مكانه */
.cl-slide.cl-away > :not(.cl-shade) { transition: transform 300ms var(--ease-in), opacity 260ms var(--ease-in); transform: translateX(-42%) rotate(-5deg) scale(.9); opacity: 0; }
.cl-slide.cl-away { pointer-events: none; }
.cl-slide.cl-in .cl-media, .cl-slide.cl-in .cl-info, .cl-slide.cl-in .cl-acts { animation: cl-in 360ms var(--ease) both; }
@keyframes cl-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* مقطعي المحجوز للمراجعة أو المخفيّ — بشارة فوق النص */
.cl-held {
  display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin: 2px 0 6px; padding: 5px 10px;
  border-radius: var(--r-full); background: rgba(240, 140, 0, .92); color: #1A1100; font-size: var(--fz-sm); font-weight: 800;
}
.cl-held .icon-svg { width: 15px; height: 15px; }

/* «لماذا أرى هذا المقطع؟» */
.cw-list { list-style: none; display: grid; gap: 8px; margin: 0 0 4px; padding: 0; }
.cw-item {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: var(--r-lg);
  background: var(--bg-2); color: var(--fg); font-size: var(--fz-md); font-weight: 600; line-height: 1.45;
  animation: cw-in 280ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes cw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cw-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.cw-ic .icon-svg { width: 17px; height: 17px; }
.cw-skel { animation: none; }
.cw-skel .skel { display: block; width: 62%; height: 14px; }
.cw-err { color: var(--fg-2); flex-wrap: wrap; font-weight: 500; }
.cw-err > .icon-svg { width: 20px; height: 20px; color: var(--warning); flex: none; }
.cw-err > span { flex: 1; min-width: 60%; }
.cw-sheet .sheet-actions .btn, .ir-sheet .ir-reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cw-sheet .sheet-actions .icon-svg { width: 18px; height: 18px; }

/* «ما الذي يهمّك؟» و«اهتماماتي» */
.ir-sheet { display: grid; }
.ir-mark {
  justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; margin: 2px 0 10px; border-radius: 18px;
  background: linear-gradient(135deg, #DE4479, #8B5CF6); color: #fff; box-shadow: 0 8px 22px rgba(222, 68, 121, .28);
}
.ir-mark .icon-svg { width: 28px; height: 28px; }
.ir-onb .sheet-title, .ir-onb .sheet-sub { text-align: center; }
.ir-onb .sheet-sub { margin-inline: 12px; }
.ir-body { max-height: min(52vh, 440px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 2px 4px 4px; }
.ir-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.ir-onb .ir-topics { justify-content: center; }
.ir-topic {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--sep);
  border-radius: var(--r-full); background: var(--bg-elev); color: var(--fg); font: inherit; font-size: var(--fz-md); font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
  animation: ir-in 320ms var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes ir-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.ir-topic:active { transform: scale(.95); }
.ir-topic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ir-topic.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ir-emo { display: inline-grid; place-items: center; width: 22px; font-size: 18px; line-height: 1; }
.ir-tick { display: none; place-items: center; width: 22px; height: 22px; }
.ir-tick .icon-svg { width: 19px; height: 19px; }
.ir-topic.on .ir-emo { display: none; }
.ir-topic.on .ir-tick { display: inline-grid; animation: ir-tick 260ms var(--ease-spring) both; }
@keyframes ir-tick { from { transform: scale(0); } to { transform: none; } }
.ir-skel { width: var(--w, 80px); border-color: transparent; background: var(--bg-2); animation: shimmer 1.4s ease infinite; cursor: default;
  background-image: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%); background-size: 400% 100%; }
.ir-sec { margin-top: 18px; }
.ir-sec-t { margin: 0 4px 8px; color: var(--fg-3); font-size: var(--fz-sm); font-weight: 800; }
.ir-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ir-tag {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-full); font-size: var(--fz-sm); font-weight: 700;
  color: var(--fg); background: color-mix(in srgb, var(--accent) calc(var(--p, .3) * 22%), var(--bg-2));
}
.ir-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; padding: 14px; border-radius: var(--r-lg);
  background: var(--bg-2); color: var(--fg-2); font-size: var(--fz-sm); line-height: 1.5; text-align: center; }
.ir-none > .icon-svg { width: 20px; height: 20px; flex: none; opacity: .8; }
.ir-err { margin: 12px 4px 0; color: var(--danger); font-size: var(--fz-sm); font-weight: 700; }
.ir-err[hidden] { display: none; }
.ir-reset { color: var(--danger); }
.ir-reset .icon-svg { width: 17px; height: 17px; }
.ir-reset[hidden] { display: none; }

/* «أداء المقاطع» — بطاقة رأس «مراقبة المحتوى» */
.cs-card { margin: var(--s-3) var(--s-4); padding: 14px 16px; border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--shadow-1); }
.cs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cs-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #DE4479, #8B5CF6); color: #fff; flex: none; }
.cs-ic .icon-svg { width: 17px; height: 17px; }
.cs-title { font-size: var(--fz-lg); font-weight: 800; }
.cs-days { margin-inline-start: auto; color: var(--fg-3); font-size: var(--fz-xs); font-weight: 700; }
.cs-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cs-num { display: grid; gap: 4px; padding: 10px 8px; border-radius: var(--r-md); background: var(--bg-2); text-align: center; min-width: 0; }
.cs-num b { font-size: var(--fz-lg); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-num small { color: var(--fg-3); font-size: var(--fz-xs); font-weight: 700; }
.cs-good b { color: var(--success); }
.cs-warn b { color: var(--warning); }
.cs-sk { display: block; justify-self: center; width: 54%; height: 20px; }
.cs-sk2 { display: block; justify-self: center; width: 74%; height: 10px; }
.cs-meta { margin: 10px 2px 0; color: var(--fg-2); font-size: var(--fz-sm); }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cs-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-full); font-size: var(--fz-sm); font-weight: 700;
  background: color-mix(in srgb, var(--accent) calc(var(--p, .3) * 20%), var(--bg-2));
}
.cs-tag small { color: var(--fg-3); font-size: var(--fz-xs); font-variant-numeric: tabular-nums; }
.cs-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--fg-2); font-size: var(--fz-sm); }
.cs-err > .icon-svg { width: 18px; height: 18px; color: var(--warning); }

/* ═══ ٨. تقليل الحركة ════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .cl-heart { animation: cl-fade 600ms linear both; }
  .cl-center.cl-flash { animation: none; }
  .cl-pop .cl-ic { animation: none; }
  .cl-video, .cl-poster { transition: none; }
  .cl-slide.cl-away > :not(.cl-shade) { transform: none; transition: opacity 200ms linear; }
  .cl-slide.cl-in .cl-media, .cl-slide.cl-in .cl-info, .cl-slide.cl-in .cl-acts, .cw-item, .ir-topic, .ir-topic.on .ir-tick { animation: none; }
}
body.reduce-motion .cl-slide.cl-away > :not(.cl-shade) { transform: none !important; }
body.reduce-motion .cw-item, body.reduce-motion .ir-topic, body.reduce-motion .ir-topic.on .ir-tick { animation: none !important; }
body.reduce-motion .cl-heart { animation: cl-fade 600ms linear both !important; }
@keyframes cl-fade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }