@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * 96-cosmic-skin.css — الجلد الكوني للصفحات الداخلية (إضافي، آخر طبقة، قابل للإزالة)
 * ────────────────────────────────────────────────────────────────────────────
 * يُحمَّل في index.html فقط، بعد main.css + h-upgrade.css + cine-cosmos.css +
 *   95-cinematic-auth.css. يكسو كل صفحات #page-* (بعد الدخول) بـ:
 *     (1) خلفية كونية هادئة تتبدّل تلقائياً مع الثيم (داكن=سماوي، وردي، فاتح)
 *         وتتبدّل مع توجّه الشاشة (عريض ↔ طولي) — عبر body::after فقط (صفر HTML).
 *     (2) سطوح زجاجية (كروت/شرائط/مودالات) يبان الكون خلفها، بلون زجاج لكل ثيم.
 *     (3) بانر ترحيب الداشبورد كصورة كونية متبدّلة مع الثيم + سكريم قراءة.
 *     (4) موتيف كوني خافت كعلامة مائية في الحالات الفارغة.
 *
 * بصري ١٠٠٪: لا يلمس أي JS / id / class / data-attr / handler / بنية DOM. التبديل
 *   مع الثيم يعتمد فقط على السمة :root[data-theme="…"] الموجودة أصلاً (لا نلمس كودها).
 *
 * ⚠️ ملاحظة معمارية مهمّة (انحراف مقصود عن المثال الحرفي في البرومبت):
 *   • البرومبت اقترح body::before للخلفية بـ z-index:-1. لكن:
 *       - h-upgrade.css يستعمل أصلاً «html body::before» (سبوت‌لايت أمبيانت) ⇒ لو
 *         استعملناه نصطدم به ونفقده.
 *       - body يملك «background: var(--bg-page)» معتمًا ⇒ أي طبقة بـ z-index:-1 تُرسَم
 *         خلف خلفية body فلا تظهر أبداً.
 *   • الحل المثبَت في هذا المشروع (نفس آلية h-upgrade spotlight و .h-auth-cosmos):
 *       نستعمل «body::after» (حُرّ تماماً، لا يستعمله أحد) بـ z-index:0 ⇒ يُرسَم فوق
 *       خلفية body وتحت المحتوى (body > * = z-index:1 عبر h-upgrade). نتيجة بصرية
 *       مطابقة لمراد البرومبت، لكن صحيحة فعلياً فوق هذا الكود تحديداً.
 *
 * المسارات هنا نسبية لمجلد هذا الملف (assets/css/) ⇒ «../cinematic/…».
 * أداء: backdrop-filter محصور بالشرائط/المودال؛ الكروت شفافة بلا blur؛ body::after
 *   عنصر ثابت (position:fixed) مركّب على الـGPU بلا background-attachment الثقيل.
 * لا حركات في هذا الملف إطلاقاً ⇒ آمن تماماً تحت prefers-reduced-motion.
 *
 * للإزالة: احذف سطر <link> الخاص به من index.html فقط. (لا أثر على أي ملف آخر.)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
 * (0) توكنات الجلد لكل ثيم — صورة الخلفية + سكريم القراءة + لون الزجاج + قاع آمن
 * ────────────────────────────────────────────────────────────────────────────
 * نُعرّف الصورة كمتغيّر (--ck-cosmos-img) ⇒ نكتب قاعدة body::after مرّة واحدة ونُبدّل
 * الصورة فقط حسب الثيم/التوجّه. image-set يقدّم WebP مع سقوط JPG (مدعوم في كل
 * المتصفّحات الحديثة — نفس ما يستعمله cine-cosmos.css للمعبد). القاع اللوني سقوطٌ
 * آمن لو تأخّر تحميل الصورة. السكريم متغيّر لأن الفاتح يحتاج وشاحاً فاتحاً (لا داكناً).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── الداكن (الافتراضي) — سماوي/كحلي ── */
:root {
  --ck-cosmos-img:
    image-set(url("../cinematic/cosmos-ambient-wide.webp") type("image/webp"),
              url("../cinematic/cosmos-ambient-wide.jpg")  type("image/jpeg"));
  --ck-banner-img:
    image-set(url("../cinematic/cosmos-banner.webp") type("image/webp"),
              url("../cinematic/cosmos-banner.jpg")  type("image/jpeg"));
  --ck-floor: #060912;
  /* وشاح قراءة داكن: يعمّق الأعلى (تحت الـnav) والأسفل (فوق bottom-nav)، أخفّ بالوسط */
  --ck-scrim: linear-gradient(180deg,
      rgba(3,6,14,0.52) 0%,
      rgba(3,6,14,0.12) 24%,
      rgba(3,6,14,0.22) 64%,
      rgba(3,6,14,0.54) 100%);
  /* زجاج السطوح (سماوي داكن) */
  --ck-glass:        rgba(14,22,39,0.62);
  --ck-glass-strong: rgba(14,22,39,0.80);
  --ck-glass-bd:     rgba(120,170,210,0.16);
}

/* ── الوردي (عنابي) — صورة + بانر + زجاج وردي ── */
:root[data-theme="pink"] {
  --ck-cosmos-img:
    image-set(url("../cinematic/cosmos-ambient-wide-pink.webp") type("image/webp"),
              url("../cinematic/cosmos-ambient-wide-pink.jpg")  type("image/jpeg"));
  --ck-banner-img:
    image-set(url("../cinematic/cosmos-banner-pink.webp") type("image/webp"),
              url("../cinematic/cosmos-banner-pink.jpg")  type("image/jpeg"));
  --ck-floor: #150812;
  --ck-glass:        rgba(30,12,22,0.62);
  --ck-glass-strong: rgba(30,12,22,0.80);
  --ck-glass-bd:     rgba(233,30,99,0.18);
}

/* ── البنفسجي — صورة + بانر + زجاج بنفسجي (السكريم يرث الداكن المحايد) ── */
:root[data-theme="purple"] {
  --ck-cosmos-img:
    image-set(url("../cinematic/cosmos-ambient-wide-purple.webp") type("image/webp"),
              url("../cinematic/cosmos-ambient-wide-purple.jpg")  type("image/jpeg"));
  --ck-banner-img:
    image-set(url("../cinematic/cosmos-banner-purple.webp") type("image/webp"),
              url("../cinematic/cosmos-banner-purple.jpg")  type("image/jpeg"));
  --ck-floor: #0c0618;
  --ck-glass:        rgba(20,12,38,0.62);
  --ck-glass-strong: rgba(20,12,38,0.80);
  --ck-glass-bd:     rgba(168,85,247,0.18);
}

/* ── الفاتح — صورة فاتحة مضيئة، وشاح فاتح (نص الصفحة غامق)، زجاج أبيض ── */
:root[data-theme="light"] {
  --ck-cosmos-img:
    image-set(url("../cinematic/cosmos-ambient-wide-light.webp") type("image/webp"),
              url("../cinematic/cosmos-ambient-wide-light.jpg")  type("image/jpeg"));
  --ck-banner-img:
    image-set(url("../cinematic/cosmos-banner-light.webp") type("image/webp"),
              url("../cinematic/cosmos-banner-light.jpg")  type("image/jpeg"));
  --ck-floor: #eef1f6;
  /* وشاح فاتح: يبيّض الحواف قليلاً ليبقى النص الغامق مقروءاً فوق صورة ساطعة */
  --ck-scrim: linear-gradient(180deg,
      rgba(245,247,250,0.60) 0%,
      rgba(245,247,250,0.28) 26%,
      rgba(245,247,250,0.40) 66%,
      rgba(245,247,250,0.66) 100%);
  --ck-glass:        rgba(255,255,255,0.66);
  --ck-glass-strong: rgba(255,255,255,0.84);
  --ck-glass-bd:     rgba(120,140,170,0.22);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (1) الخلفية الكونية الداخلية — body::after (ثابتة، خلف المحتوى، z-index:0)
 * ════════════════════════════════════════════════════════════════════════════ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;                 /* فوق خلفية body المعتمة، تحت المحتوى (body>*=z-index:1) */
  pointer-events: none;
  background-color: var(--ck-floor);            /* قاع آمن */
  background-image:
    var(--ck-scrim),                            /* وشاح القراءة (الطبقة العليا) */
    var(--ck-cosmos-img);                        /* صورة الكون (تتبدّل مع الثيم/التوجّه) */
  background-repeat: no-repeat, no-repeat;
  background-position: center, center bottom;
  background-size: cover, cover;
}

/* تبديل حسب التوجّه: البورتريه + الشاشات الضيّقة ⇒ الصورة الطولية (لكل ثيم) ──────── */
@media (orientation: portrait), (max-width: 820px) {
  :root {
    --ck-cosmos-img:
      image-set(url("../cinematic/cosmos-ambient-tall.webp") type("image/webp"),
                url("../cinematic/cosmos-ambient-tall.jpg")  type("image/jpeg"));
  }
  :root[data-theme="pink"] {
    --ck-cosmos-img:
      image-set(url("../cinematic/cosmos-ambient-tall-pink.webp") type("image/webp"),
                url("../cinematic/cosmos-ambient-tall-pink.jpg")  type("image/jpeg"));
  }
  :root[data-theme="purple"] {
    --ck-cosmos-img:
      image-set(url("../cinematic/cosmos-ambient-tall-purple.webp") type("image/webp"),
                url("../cinematic/cosmos-ambient-tall-purple.jpg")  type("image/jpeg"));
  }
  :root[data-theme="light"] {
    --ck-cosmos-img:
      image-set(url("../cinematic/cosmos-ambient-tall-light.webp") type("image/webp"),
                url("../cinematic/cosmos-ambient-tall-light.jpg")  type("image/jpeg"));
  }
}

/* ─── حصر النطاق: لا خلفية كونية داخلية على الدخول/التسجيل (هناك المعبد عبر cine-cosmos) ─
 * نلغي body::after تماماً أثناء عرض صفحتي الـauth ⇒ يظهر .h-auth-cosmos (المعبد) وحده. */
body:has(#page-login.active)::after,
body:has(#page-register.active)::after {
  content: none;
}

/* ─── تعتيم أعمق على صفحة الفيديو (تركيز على المشغّل) — عبر تغيير المتغيّر فقط ───────
 * نضبط --ck-scrim على body نفسه (يرثه body::after) ⇒ خلفية معتمة هادئة خلف الفيديو
 * بلا استبدال الصورة ولا تكلفة filter. */
body:has(#page-video.active) {
  --ck-scrim: linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.55));
}

/* ════════════════════════════════════════════════════════════════════════════
 * (2) السطوح الزجاجية — يبان الكون خلفها، بلون زجاج لكل ثيم
 * ────────────────────────────────────────────────────────────────────────────
 * نكتب القواعد بمحدِّدات مقيّدة بالثيم (:root[data-theme] …) بنفس قوة قواعد main.css
 * الملوّنة (0,3,0) ⇒ بما أنّ هذا الملف يُحمَّل أخيراً يتغلّب عليها. الداكن الافتراضي
 * (بلا data-theme) يُغطّى بالمحدّد المجرّد (0,1,0) المتغلّب بالترتيب على القاعدة الأساس.
 * القيمة تأتي من المتغيّر --ck-glass* ⇒ تعريف واحد يخدم كل الثيمات.
 *
 * • الكروت الكثيرة: شفافية فقط بلا backdrop-filter (أداء الجوال).
 * • الشرائط/المودال (قليلة/ثابتة): زجاج مكثّف + blur.
 * • لا نلمس .poster-card (تحمل بوسترات) ولا مشغّل الفيديو إطلاقاً.
 * • متغيّرات النص (--text-*) تبقى كما هي ⇒ الزجاج الداكن يحفظ قراءة الداكن، والأبيض
 *   يحفظ قراءة الفاتح (نص غامق).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── (أ) الكروت — زجاج خفيف بلا blur (الداكن الافتراضي) ── */
.h-card,
.stat-mini,
.playlist-drawer {
  background: var(--ck-glass);
  border-color: var(--ck-glass-bd);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* الكروت — تجاوز قواعد الثيم الملوّنة في main.css (نفس القوة + تحميل لاحق) */
:root[data-theme="pink"]   .h-card,
:root[data-theme="purple"] .h-card,
:root[data-theme="light"]  .h-card,
:root[data-theme="pink"]   .stat-mini,
:root[data-theme="purple"] .stat-mini,
:root[data-theme="light"]  .stat-mini,
:root[data-theme="pink"]   .playlist-drawer,
:root[data-theme="purple"] .playlist-drawer,
:root[data-theme="light"]  .playlist-drawer {
  background: var(--ck-glass);
  border-color: var(--ck-glass-bd);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── (ب) الشرائط + المودال — زجاج مكثّف + blur (الداكن الافتراضي) ── */
.top-nav,
.bottom-nav,
.h-modal {
  background: var(--ck-glass-strong);
  border-color: var(--ck-glass-bd);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}
/* الشرائط + المودال — تجاوز قواعد الثيم الملوّنة في main.css ── */
:root[data-theme="pink"]   .top-nav,
:root[data-theme="purple"] .top-nav,
:root[data-theme="light"]  .top-nav,
:root[data-theme="pink"]   .bottom-nav,
:root[data-theme="purple"] .bottom-nav,
:root[data-theme="light"]  .bottom-nav,
:root[data-theme="pink"]   .h-modal,
:root[data-theme="purple"] .h-modal,
:root[data-theme="light"]  .h-modal {
  background: var(--ck-glass-strong);
  border-color: var(--ck-glass-bd);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (3) بانر ترحيب الداشبورد — صورة كونية متبدّلة مع الثيم + سكريم قراءة
 * ────────────────────────────────────────────────────────────────────────────
 * العنصر = أوّل ابن داخل #page-dashboard (نمط inline: background:var(--gradient)…
 * position:relative; overflow:hidden). نتجاوز الصورة بـ!important (لتخطّي inline).
 * النص أبيض (#fff) داخل غلاف z-index:1 ⇒ سكريم ::after (z-index تلقائي) يقع فوق
 * الصورة وتحت النص فيبقى الترحيب واضحاً.
 * ════════════════════════════════════════════════════════════════════════════ */
#page-dashboard > div:first-child {
  background-image: var(--ck-banner-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#page-dashboard > div:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;                 /* مطابقة لزوايا البانر */
  pointer-events: none;
  /* RTL: النص يبدأ يميناً ⇒ نُعمّق جهة اليمين (start) */
  background: linear-gradient(to left,
    rgba(3,6,14,0.56) 0%,
    rgba(3,6,14,0.30) 46%,
    rgba(3,6,14,0.12) 100%);
}
/* الفاتح: البانر ساطع ⇒ سكريم أعمق ليبقى النص الأبيض مقروءاً */
:root[data-theme="light"] #page-dashboard > div:first-child::after {
  background: linear-gradient(to left,
    rgba(3,6,14,0.72) 0%,
    rgba(3,6,14,0.50) 42%,
    rgba(3,6,14,0.22) 100%);
}

/* ════════════════════════════════════════════════════════════════════════════
 * (4) الموتيف الكوني — علامة مائية خافتة جدّاً خلف محتوى الحالات الفارغة
 * ────────────────────────────────────────────────────────────────────────────
 * نضعه خلف المحتوى (لا فوقه) كعلامة مائية هادئة لا تزاحم أيقونة <i> القائمة.
 * (الموتيف أزرق ⇒ نعيد تلوينه للوردي بـhue-rotate، ويبقى أزرق في الداكن/الفاتح.)
 * ════════════════════════════════════════════════════════════════════════════ */
.empty-state { position: relative; }
.empty-state > * { position: relative; z-index: 1; }   /* المحتوى فوق العلامة المائية */
.empty-state::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 38vw, 190px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background:
    image-set(url("../cinematic/cosmos-motif.webp") type("image/webp"),
              url("../cinematic/cosmos-motif.png")  type("image/png"))
    center / contain no-repeat;
}
:root[data-theme="pink"]  .empty-state::before { filter: hue-rotate(285deg) saturate(1.1); } /* أزرق→وردي */
:root[data-theme="light"] .empty-state::before { opacity: 0.10; }
/* البنفسجي — موتيف بنفسجي مخصّص (بلا hue-rotate؛ الصورة بنفسجية أصلاً) */
:root[data-theme="purple"] .empty-state::before {
  background-image:
    image-set(url("../cinematic/cosmos-motif-purple.webp") type("image/webp"),
              url("../cinematic/cosmos-motif-purple.png")  type("image/png"));
}

/* ════════════════════════════════════════════════════════════════════════════
 * (5) أداء الجوال — تخفيف نصف الـblur على الشرائط/المودال (≤768px)
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .top-nav,
  .bottom-nav,
  .h-modal {
    backdrop-filter: blur(10px) saturate(1.03);
    -webkit-backdrop-filter: blur(10px) saturate(1.03);
  }
}