من الصفحة.
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── الحاوية + خلفية الصورة (تملأ lp-bg الثابتة / h-auth-cosmos الثابتة) ──────── */
.cine-cosmos {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
/* توكنات لونية محلية للمشهد — سماوي/كحلي صرف (بلا بنفسجي a855f7 إطلاقاً) */
--cine-cyan: #22d3ee;
--cine-teal: #00b4d8;
--cine-blue: #2b6fe0;
--cine-deep: #0098b8;
--cine-ink: #060912;
--cine-ink-2: #0a1120;
/* خلفية المشهد: بوستر المعبد العريض. سطر url() سقوطٌ آمن لأي متصفّح لا يفهم
image-set؛ ثم image-set يقدّم WebP مع سقوط JPG حسب دعم المتصفّح. */
background-color: var(--cine-ink);
background-image: url("../cinematic/cosmos-wide.jpg");
background-image: image-set(
url("../cinematic/cosmos-wide.webp") type("image/webp"),
url("../cinematic/cosmos-wide.jpg") type("image/jpeg"));
background-repeat: no-repeat;
background-position: center bottom; /* المعبد مثبّت في أسفل-الوسط */
background-size: cover;
}
/* تبديل حسب التوجّه: الجوال/التابلت الرأسي + أي شاشة ضيّقة ⇒ البوستر الطولي.
هكذا البورتريه يأخذ cosmos-tall، والكمبيوتر/الأفقي يبقى على cosmos-wide. */
@media (orientation: portrait), (max-width: 820px) {
.cine-cosmos {
background-image: url("../cinematic/cosmos-tall.jpg");
background-image: image-set(
url("../cinematic/cosmos-tall.webp") type("image/webp"),
url("../cinematic/cosmos-tall.jpg") type("image/jpeg"));
}
}
/* ═══ (أ) سكريم القراءة — يطلى فوق الصورة (::before = أوّل طبقة فوق الخلفية) ═══════
* يعمّق الأعلى (تحت الـnav/العنوان) والحواف نحو الأسود، ويُبقي مركز-أسفل المشهد
* (عمود النور) حيّاً ⇒ النصوص والبطاقة تُقرأ بوضوح فوق المناطق المضيئة. */
.cine-cosmos::before {
content: "";
position: absolute;
inset: 0;
background:
/* تعتيم الشريط العلوي (مساحة العنوان/الـnav) */
linear-gradient(180deg,
rgba(3, 6, 14, 0.66) 0%,
rgba(3, 6, 14, 0.30) 22%,
rgba(3, 6, 14, 0.05) 45%,
transparent 62%),
/* تعتيم الحواف/الزوايا لتأطير البوّابة */
radial-gradient(126% 100% at 50% 72%,
transparent 40%,
rgba(2, 4, 10, 0.40) 76%,
rgba(1, 2, 7, 0.66) 100%),
/* رفع سماوي خفيف جدّاً عند القاع ⇒ الأرضية تبقى نابضة */
radial-gradient(72% 46% at 50% 110%,
color-mix(in oklab, var(--cine-cyan) 12%, transparent),
transparent 60%);
}
/* ═══ (ب) نجوم حيّة فوق الصورة — طبقتان خفيفتان (الصورة فيها نجوم؛ هذه لمسة حياة) ══
* وميض opacity بطيء فقط — بلا تحريك background-position (الذي يسبّب repaint ثقيل).
* يُفعّل الوميض على الكمبيوتر فقط (كتلة الحركة بالأسفل). */
.cine-stars,
.cine-stars::after {
content: "";
position: absolute;
inset: -10% 0;
}
.cine-stars {
background-image:
radial-gradient(1.4px 1.4px at 12% 18%, rgba(234,242,255,.80), transparent 60%),
radial-gradient(1.2px 1.2px at 28% 8%, rgba(180,225,255,.62), transparent 60%),
radial-gradient(1px 1px at 44% 22%, rgba(234,242,255,.48), transparent 60%),
radial-gradient(1.6px 1.6px at 62% 12%, rgba(190,235,255,.78), transparent 60%),
radial-gradient(1px 1px at 78% 26%, rgba(234,242,255,.48), transparent 60%),
radial-gradient(1.3px 1.3px at 90% 9%, rgba(190,235,255,.70), transparent 60%),
radial-gradient(1px 1px at 8% 40%, rgba(234,242,255,.44), transparent 60%),
radial-gradient(1.5px 1.5px at 36% 46%, rgba(190,235,255,.64), transparent 60%),
radial-gradient(1px 1px at 70% 42%, rgba(234,242,255,.42), transparent 60%),
radial-gradient(1.2px 1.2px at 96% 38%, rgba(180,225,255,.56), transparent 60%);
background-repeat: repeat;
background-size: 100% 60vh;
opacity: .5;
}
/* طبقة ثانية أصغر ⇒ إحساس عمق ساكن */
.cine-stars::after {
background-image:
radial-gradient(1px 1px at 20% 12%, rgba(234,242,255,.44), transparent 60%),
radial-gradient(1px 1px at 52% 6%, rgba(190,235,255,.38), transparent 60%),
radial-gradient(1px 1px at 84% 18%, rgba(234,242,255,.40), transparent 60%),
radial-gradient(1px 1px at 16% 34%, rgba(190,235,255,.34), transparent 60%),
radial-gradient(1px 1px at 60% 30%, rgba(234,242,255,.38), transparent 60%),
radial-gradient(1px 1px at 92% 28%, rgba(190,235,255,.34), transparent 60%);
background-repeat: repeat;
background-size: 100% 48vh;
opacity: .4;
}
/* ═══ (ج) توهّج الأرضية + جزيئات صاعدة — تطابق الأرضية العاكسة المتوهّجة بالبوستر ══
* .cine-aurora = توهّج سماوي ناعم أسفل-الوسط (يتنفّس بهدوء على الكمبيوتر).
* ::before/::after = «جزيئتان» (عناقيد box-shadow) تصعدان ببطء وتتلاشيان. */
.cine-aurora {
position: absolute;
left: 50%;
bottom: -10%;
width: 128%;
height: 54%;
transform: translateX(-50%);
background:
radial-gradient(58% 80% at 50% 100%,
color-mix(in oklab, var(--cine-cyan) 24%, transparent), transparent 70%),
radial-gradient(40% 64% at 36% 100%,
color-mix(in oklab, var(--cine-teal) 16%, transparent), transparent 72%);
filter: blur(26px);
opacity: .32;
mix-blend-mode: screen;
}
.cine-aurora::before,
.cine-aurora::after {
content: "";
position: absolute;
bottom: 9%;
width: 3px;
height: 3px;
border-radius: 50%;
background: #d7f6ff;
opacity: 0; /* تظهر فقط أثناء حركة الصعود (الكمبيوتر) */
}
.cine-aurora::before {
left: 38%;
box-shadow:
0 0 7px 1px color-mix(in oklab, var(--cine-cyan) 70%, transparent),
34px 30px 5px -1px color-mix(in oklab, var(--cine-cyan) 55%, transparent),
-46px 56px 5px -1px color-mix(in oklab, var(--cine-teal) 52%, transparent);
}
.cine-aurora::after {
left: 61%;
box-shadow:
0 0 7px 1px color-mix(in oklab, var(--cine-teal) 66%, transparent),
40px 48px 5px -1px color-mix(in oklab, var(--cine-cyan) 50%, transparent),
-30px 26px 5px -1px color-mix(in oklab, var(--cine-cyan) 48%, transparent);
}
/* ════════════════════════════════ الحركات ════════════════════════════════════ */
@keyframes cineTwinkle { /* وميض نجوم هادئ (opacity فقط) */
0%, 100% { opacity: .32; }
50% { opacity: .6; }
}
@keyframes cineFloorBreathe { /* تنفّس توهّج الأرضية */
0%, 100% { opacity: .26; transform: translateX(-50%) scale(1); }
50% { opacity: .42; transform: translateX(-50%) scale(1.05); }
}
@keyframes cineMoteRise { /* صعود جزيئة وتلاشيها */
0% { opacity: 0; transform: translateY(0); }
14% { opacity: .85; }
82% { opacity: .5; }
100% { opacity: 0; transform: translateY(-180px); }
}
@keyframes cineBreathe { /* بارالاكس: تنفّس خلفية ضئيل جدّاً */
0%, 100% { transform: scale(1); }
50% { transform: scale(1.035); }
}
/* ─── تفعيل الحياة على الكمبيوتر فقط (وعند السماح بالحركة) ───────────────────────
* على الجوال نُبقي الصورة + السكريم + التوهّج الساكن فقط ⇒ أداء أعلى. */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
.cine-cosmos { animation: cineBreathe 26s ease-in-out infinite; }
.cine-stars { animation: cineTwinkle 7s ease-in-out infinite; }
.cine-stars::after { animation: cineTwinkle 9s ease-in-out .8s infinite; }
.cine-aurora { animation: cineFloorBreathe 12s ease-in-out infinite; }
.cine-aurora::before { animation: cineMoteRise 9s ease-in-out infinite; }
.cine-aurora::after { animation: cineMoteRise 11s ease-in-out 2.6s infinite; }
}
/* 🪽 [SILK-GLIDE 2026-07-17 R5] هدوء الخمول: main.js يضيف html.h-idle-calm بعد ~10ث
* بلا تفاعل ويزيله عند أي تفاعل (الاسم حرفي — منفّذ عند وكيل آخر) ⇒ إيقاف مؤقّت
* (لا إلغاء) للأنيميشنات اللانهائية الست أعلاه — أثقلها توهّج الأرضية
* blur(26px)+mix-blend-mode. الاستئناف فوري من الإطار نفسه عند عودة التفاعل.
* للتراجع: احذف هذه الكتلة كاملة. */
html.h-idle-calm .cine-cosmos,
html.h-idle-calm .cine-stars,
html.h-idle-calm .cine-stars::after,
html.h-idle-calm .cine-aurora,
html.h-idle-calm .cine-aurora::before,
html.h-idle-calm .cine-aurora::after {
animation-play-state: paused !important;
}
/* ════════════════════════════════ أداء الجوال ════════════════════════════════ */
@media (max-width: 768px) {
/* لا بارالاكس ولا وميض نجوم؛ توهّج أرضية ساكن أخفّ وبلا mix-blend-mode الثقيل */
.cine-cosmos { background-attachment: scroll; animation: none !important; }
.cine-stars,
.cine-stars::after { animation: none !important; }
.cine-aurora {
filter: blur(30px);
opacity: .38;
mix-blend-mode: normal;
animation: none !important;
}
}
@media (max-width: 420px) {
/* أصغر الشاشات: صورة + سكريم + توهّج فقط (إلغاء الجزيئات) */
.cine-aurora::before,
.cine-aurora::after { display: none; }
}
/* ════════════════════════════════ تقليل الحركة ═══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.cine-cosmos,
.cine-stars,
.cine-stars::after,
.cine-aurora,
.cine-aurora::before,
.cine-aurora::after { animation: none !important; }
}
/* --------------- source: assets/css/95-cinematic-auth.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
* 95-cinematic-auth.css — طبقة صفحتي الدخول/التسجيل السينمائية (إضافية، قابلة للإزالة)
* ────────────────────────────────────────────────────────────────────────────
* تُحمَّل بعد main.css + h-upgrade.css + cine-cosmos.css. تجعل #page-login و
* #page-register توأماً للواجهة: نفس خلفية المعبد (الموروثة من cine-cosmos.css)
* + شعار بطل + بطاقة زجاجية.
*
* جدار الحماية: كل تثبيت لوحة/خلفية/إخفاء مقيّد بـ :has(#page-login.active) /
* :has(#page-register.active) ⇒ صفر أثر على الداشبورد وبقية صفحات #page-* بعد
* الدخول (يبقى مبدّل الثيم والثيمات هناك كما هي تماماً).
*
* 2026-06-03 (إحياء): صارت الخلفية صورة المعبد (عبر cine-cosmos.css)؛ وبما أن
* البطاقة تقع فوق ألمع منطقة (عمود النور وسط الصورة) رفعنا تعتيم خلفية البطاقة
* قليلاً وعمّقنا scrim الخلفية خلفها لضمان وضوح الحقول والنصوص.
*
* لا يلمس أي JS / id / class / data-attr / handler. للإزالة: احذف
+
* غلاف
(يبقى span.h-logo.auth-logo كما هو).
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── (1) خلفية المعبد الثابتة — تظهر فقط على صفحتي الدخول/التسجيل ──────────────── */
.h-auth-cosmos {
position: fixed !important;
inset: 0;
z-index: 0 !important; /* خلف المحتوى (body > * = z-index:1 عبر h-upgrade) */
display: none;
}
body:has(#page-login.active) .h-auth-cosmos,
body:has(#page-register.active) .h-auth-cosmos { display: block; }
/* غمر/scrim إضافي يعمّق القراءة خلف النموذج (::after = آخر طبقة فوق النجوم/الأورورا،
أغمق من اللاندنق). نُعمّق المركز قليلاً لتهدئة عمود النور خلف البطاقة. */
.h-auth-cosmos::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(62% 72% at 50% 48%, rgba(3,6,14,0.74), transparent 72%),
linear-gradient(180deg, rgba(6,9,18,0.58), rgba(6,9,18,0.30) 30%, rgba(6,9,18,0.68));
}
/* ─── (2) تثبيت اللوحة السينمائية أثناء الدخول/التسجيل مهما كان الثيم المحفوظ ────── */
body:has(#page-login.active),
body:has(#page-register.active) {
--primary: #a855f7;
--primary-hover: #9333ea;
--primary-light: #c084fc;
--bg-page: #0c0618;
--bg-card: #1a1030;
--bg-input: rgba(26, 16, 48, 0.62);
--bg-input-focus: rgba(38, 24, 64, 0.82);
--text-primary: #f3e9ff;
--text-secondary: #c4b3da;
--text-muted: #8576a0;
--border-color: rgba(168, 85, 247, 0.16);
--glow: 0 0 0 4px rgba(168, 85, 247, 0.18);
--hu-halo: rgba(168, 85, 247, 0.22);
background: #0c0618 !important;
}
/* ─── (3) لا مبدّل ثيم + لا بانر دعم عائم في الصفحات العامة (يبقيان بعد الدخول) ──── */
body:has(#page-login.active) #themeToggleBtn,
body:has(#page-register.active) #themeToggleBtn { display: none !important; }
/* البانر العائم زائد على شاشتي auth (الدعم متاح في الـnav وأسفل البطاقة) ⇒ نخفيه
بصرياً فقط عبر :has دون لمس closeBanner()؛ يعود في الداشبورد طبيعياً. */
body:has(#page-login.active) #supportBanner,
body:has(#page-register.active) #supportBanner { display: none !important; }
/* ─── (4) البطاقة الزجاجية — توأم لزجاج اللاندنق، متمركزة وأنيقة ───────────────── */
#page-login.active,
#page-register.active {
position: relative;
z-index: 1;
max-width: 468px;
margin: clamp(14px, 5vh, 54px) auto;
padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 30px) clamp(20px, 3vw, 28px);
border-radius: 22px;
/* تعتيم أعلى (قيم أكثف من اللاندنق) لأنها فوق عمود النور المركزي ⇒ وضوح الحقول */
background:
linear-gradient(180deg, rgba(18, 28, 46, 0.90), rgba(8, 13, 24, 0.94));
border: 1px solid rgba(168, 85, 247, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 30px 70px -28px rgba(0, 0, 0, 0.72),
0 0 0 1px rgba(168, 85, 247, 0.05);
backdrop-filter: blur(16px) saturate(1.05);
-webkit-backdrop-filter: blur(16px) saturate(1.05);
}
/* خيط ضوء علوي شعري على حافّة البطاقة (بنفسجي فاتح) */
#page-login.active::before,
#page-register.active::before {
content: "";
position: absolute;
top: 0; left: 18%; right: 18%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.55), transparent);
pointer-events: none;
}
/* رابط «الواجهة الرئيسية» داخل البطاقة — زجاج خفيف */
#page-login.active .auth-back-link,
#page-register.active .auth-back-link {
border-radius: 12px;
border: 1px solid rgba(168, 85, 247, 0.16);
background: rgba(255, 255, 255, 0.03);
padding: 8px 14px;
}
/* ─── (5) الشعار بطل النموذج — غلاف .auth-logo-stage (هالة بنفسجية هادئة) ─────── */
.auth-logo-stage {
position: relative;
display: inline-grid;
place-items: center;
isolation: isolate;
}
/* هالة بنفسجية ناعمة */
.auth-logo-stage::before {
content: "";
position: absolute;
inset: -32%;
border-radius: 50%;
background: radial-gradient(closest-side,
rgba(192, 132, 252, 0.22) 0%,
rgba(168, 85, 247, 0.08) 50%,
transparent 72%);
z-index: -1;
pointer-events: none;
}
/* الشعار نفسه (.h-logo المقنّع): ظلّ بنفسجي خفيف */
.auth-logo-stage .auth-logo {
position: relative;
z-index: 1;
filter:
drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 18px rgba(192, 132, 252, 0.35));
}
/* العنوان «تسجيل الدخول/سوي حساب جديد» — أوضح فوق الزجاج */
body:has(#page-login.active) #page-login h3,
body:has(#page-register.active) #page-register h3 {
background: linear-gradient(180deg, #ffffff, color-mix(in oklab, #ffffff 62%, var(--primary)));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ─── (6) الحقول والأزرار — زجاج داكن، حدّ بنفسجي رفيع، توهّج عند التركيز ─────────── */
#page-login.active .h-input,
#page-register.active .h-input {
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 60%),
var(--bg-input);
border: 1.5px solid rgba(168, 85, 247, 0.18);
color: #eaf2ff;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
#page-login.active .h-input::placeholder,
#page-register.active .h-input::placeholder { color: #67768c; }
#page-login.active .h-input:hover,
#page-register.active .h-input:hover { border-color: rgba(192, 132, 252, 0.4); }
#page-login.active .h-input:focus,
#page-register.active .h-input:focus {
border-color: var(--primary);
background: var(--bg-input-focus);
box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18), 0 0 26px -8px rgba(192, 132, 252, 0.6);
}
#page-login.active .h-btn,
#page-register.active .h-btn {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
inset 0 -1px 0 rgba(0,0,0,0.10),
0 12px 28px -10px rgba(168, 85, 247, 0.45),
0 0 0 1px rgba(192, 132, 252, 0.22);
}
/* رابط الدعم (تلجرام) أسفل البطاقة — زجاج خفيف متّسق */
#page-login.active a[target="_blank"],
#page-register.active a[target="_blank"] {
background: rgba(255, 255, 255, 0.03);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ─── (7) تقليل الحركة — لا حركات على الشعار، الكتلة محفوظة احتياطاً ────────────── */
@media (prefers-reduced-motion: reduce) {
.auth-logo-stage::before,
.auth-logo-stage .auth-logo { animation: none !important; }
}
/* --------------- source: assets/css/96-cosmic-skin.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
* 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.
*
* للإزالة: احذف سطر الخاص به من 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="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);
}
/* ── الفاتح — 🚪 [ONE-DOOR V1 2026-08-02 M7.2] هوية ثلوج تبوك (-snow): أسماء
جديدة لا استبدال بالمكان (ق1 — كاش الصور أسبوع + SWR). وشاح فاتح، زجاج أبيض ── */
:root[data-theme="light"] {
--ck-cosmos-img:
image-set(url("../cinematic/cosmos-ambient-wide-snow.webp") type("image/webp"),
url("../cinematic/cosmos-ambient-wide-snow.jpg") type("image/jpeg"));
--ck-banner-img:
image-set(url("../cinematic/cosmos-banner-snow.webp") type("image/webp"),
url("../cinematic/cosmos-banner-snow.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);
}
/* 🪽 [SILK-GLIDE 2026-07-17] الثيم الثلجي — إصلاحات تناسق الألوان (رقم 7)
الزجاج الأبيض 66% الشفاف فوق صورة كونية مزدحمة يبهت البطاقات ويكاد يخفي
حدها rgba(120,140,170,.22) — لوحة موحدة: بطاقات شبه صلبة بحد #e2e8f0.
للتراجع: احذف هذه الكتلة. */
:root[data-theme="light"]{
--ck-glass: rgba(255,255,255,0.92);
--ck-glass-strong: rgba(255,255,255,0.96);
--ck-glass-bd: #e2e8f0;
}
:root[data-theme="light"] .h-card,
:root[data-theme="light"] .stat-mini{box-shadow:0 2px 8px rgba(15,23,42,.06);}
/* ════════════════════════════════════════════════════════════════════════════
* (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="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"] {
/* 🚪 [ONE-DOOR M7.2] الطولية بهوية ثلوج تبوك */
--ck-cosmos-img:
image-set(url("../cinematic/cosmos-ambient-tall-snow.webp") type("image/webp"),
url("../cinematic/cosmos-ambient-tall-snow.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));
}
/* 🪽 [SILK-GLIDE 2026-07-17] الثيم الثلجي — إصلاحات تناسق الألوان (رقم 6)
القاعدة أعلاه بلا استثناء light ⇒ وشاح أسود 62% فوق خلفية الفيديو الفاتحة
يجعل النصوص الداكنة (--text-primary/--text-muted) غير مقروءة.
للتراجع: احذف هذه الكتلة. */
:root[data-theme="light"] body:has(#page-video.active){
--ck-scrim: linear-gradient(180deg, rgba(245,247,250,.80), rgba(245,247,250,.72));
}
/* ════════════════════════════════════════════════════════════════════════════
* (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="purple"] .h-card,
:root[data-theme="light"] .h-card,
:root[data-theme="purple"] .stat-mini,
:root[data-theme="light"] .stat-mini,
: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="purple"] .top-nav,
:root[data-theme="light"] .top-nav,
:root[data-theme="purple"] .bottom-nav,
:root[data-theme="light"] .bottom-nav,
: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) الموتيف الكوني — علامة مائية خافتة جدّاً خلف محتوى الحالات الفارغة
* ────────────────────────────────────────────────────────────────────────────
* نضعه خلف المحتوى (لا فوقه) كعلامة مائية هادئة لا تزاحم أيقونة القائمة.
* (الموتيف أزرق ⇒ نعيد تلوينه للوردي بـ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="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"));
}
/* 🚪 [ONE-DOOR V1 2026-08-02 M7.2] الثلجي — موتيف ثلوج تبوك المخصّص (جبل + ندفة):
كان الفاتح يرث الموتيف البنفسجي الافتراضي أعلاه. نفس التخصيص (0,2,1). */
:root[data-theme="light"] .empty-state::before {
background-image:
image-set(url("../cinematic/cosmos-motif-snow.webp") type("image/webp"),
url("../cinematic/cosmos-motif-snow.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);
}
}
/* --------------- source: assets/css/97-responsive-harmony.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
* 97-responsive-harmony.css — طبقة توحيد التجاوب البصري (إضافية، تُحمَّل آخر )
* ────────────────────────────────────────────────────────────────────────────
* موديول مستقل ضمن assets/css/ — قابل للإزالة بحذف سطر الخاص به في index.html.
*
* الغرض: نفس التصميم السينمائي تماماً، لكنه «متناسق ومضبوط» على كل الأجهزة في
* الوضع الطبيعي (آيفون صغير/كبير، أندرويد، تابلت، لابتوب، كمبيوتر). نُصلح فقط
* ما يكسر التناسق على الشاشات الصغيرة (أزرار/إيموجي بأبعاد px ثابتة لا تصغر).
*
* العقد (Zero Alteration):
* • بصري بحت 100٪ — صفر JS، صفر HTML، صفر handler، صفر تغيير id/class/بنية.
* • يُحمَّل أخيراً ⇒ يتغلّب على main.css و h-upgrade.css و 96-cosmic-skin.css بالترتيب.
* • مبدأ «سقف clamp = الحالة الأصلية»: كل قيمة تتدرّج عبر clamp() وسقفها الأعلى =
* القيمة الحالية على الكمبيوتر. الـ vw لا «يَعَضّ» إلا على الشاشات الضيّقة ⇒
* **لا اختلاف بصري على اللابتوب/الكمبيوتر** (القيم تصل لسقفها = الأصل).
* • لا نلمس: مشغّل الفيديو/البوستر/Fingerprint/الثيمات/خلفية المعبد/أي ملف لاندنق.
*
* نقاط التوقّف — موحّدة مع منظومة اللاندنق: ≤600 (جوال) / ≤480 / ≤390 (آيفون صغير)
* / ≤360 / ≤340 (الأصغر). نعتمد clamp() للتدرّج السلس بدل القفزات.
*
* ملاحظة حركة: هذا الملف ساكن بصرياً (بلا أي animation/transition جديد) ⇒ لا يخالف
* prefers-reduced-motion المُحترَمة أصلاً في h-upgrade.css.
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── (1) ثبات عبر المنصّات + حارس التمرير الأفقي ─────────────────────────────
* نُكمل ضبط تضخّم النص (h-upgrade فيه -webkit- فقط) بإضافة القياسي، ونؤكّد منع
* أي تمرير أفقي على كل المقاسات (overflow-x مضبوط أصلاً في h-upgrade:836، نُعزّزه). */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
html, body {
max-width: 100%;
overflow-x: hidden; /* حارس نهائي: لا سكرول أفقي على أي صفحة/أي عرض/أي ثيم */
}
/* ─── (2) الشريط العلوي .top-nav — أهم إصلاح ─────────────────────────────────
* الهدف: نفس الشكل الفخم، لكن الأزرار والإيموجي تتناسب مع عرض الشاشة بلا «نفخ».
*
* تعارض الأسبقية المُعالَج: h-upgrade.css:857-863 يفرض min-width/min-height:44px عند
* ≤600px فيمنع التصغير. هنا (محمّل لاحقاً، بنفس المحدّد) نُعيد min-* إلى 0 لنسمح
* بالتدرّج، **مع الحفاظ على مساحة لمس آمنة ≥44px** عبر ::before شفّاف (Apple HIG). */
/* أزرار الأيقونة داخل الشريط العلوي (ملاحظة: لا يوجد .nav-btn داخل .top-nav حالياً —
القاعدة وقائية لأي زر أيقونة مستقبلي في الشريط، وسقفها = 44px الأصلية). */
.top-nav .nav-btn {
width: clamp(38px, 11vw, 44px);
height: clamp(38px, 11vw, 44px);
min-width: 0; /* يتغلّب على min-width:44px في h-upgrade (محمّل قبلنا) */
min-height: 0;
font-size: clamp(0.9rem, 3.4vw, 1rem); /* سقف 1rem = الأصل */
}
/* زر تغيير الثيم — سقفه 40px (قيمته الأصلية على الكمبيوتر في main.css:642). */
.theme-toggle-btn {
width: clamp(36px, 10vw, 40px);
height: clamp(36px, 10vw, 40px);
min-width: 0;
min-height: 0;
}
/* توسيع منطقة اللمس إلى ≥44px دون تكبير الإطار المرئي (حشوة شفافة غير مرئية).
عند أصغر مقاس مرئي (36px) ⇒ 36 + 4×2 = 44px. لا خلفية/لا z-index ⇒ غير مرئية. */
.top-nav .nav-btn,
.theme-toggle-btn { position: relative; }
.top-nav .nav-btn::before,
.theme-toggle-btn::before {
content: "";
position: absolute;
inset: -4px;
/* تمرّر الضغط للزر نفسه (جزء من محتواه)، بلا أي أثر بصري */
}
/* الإيموجي 🌙🔵🌸☀️ — هو ما يبدو «منفوخاً» على iOS (Apple Color Emoji يُرسَم أكبر
من حجم الخط المحدّد). نقيّده ليطابق وزن أيقونات FontAwesome المجاورة على iOS/أندرويد. */
.theme-toggle-btn .tt-icon {
font-size: clamp(0.95rem, 3.4vw, 1.12rem);
line-height: 1;
}
/* الشعار + العنوان: نمنع الانضغاط ونتدرّج بحجم النص (سقف 1.2rem = الأصل). */
.top-nav .nav-title {
font-size: clamp(1rem, 4vw, 1.2rem);
white-space: nowrap;
}
/* رابط الدعم «التواصل مع فريق الدعم» — أنماطه سطرية في index.html:228 و h-upgrade
يفرض padding بـ!important ⇒ نستعمل !important هنا فقط (محدّد أقوى + محمّل أخيراً).
النص يبقى ظاهراً افتراضياً؛ تدرّج الخط/الحشوة عبر clamp + nowrap لمنع الالتفاف. */
.top-nav .nav-actions a[target="_blank"] {
font-size: clamp(0.68rem, 2.6vw, 0.8rem) !important; /* سقف 0.8rem = الأصل */
padding: clamp(5px, 1.5vw, 7px) clamp(9px, 3vw, 14px) !important;
white-space: nowrap;
letter-spacing: -0.01em;
}
.top-nav .nav-actions a[target="_blank"] .fab {
font-size: clamp(0.95rem, 3.2vw, 1.1rem) !important; /* سقف 1.1rem = الأصل */
}
/* ─── (3) الشريط السفلي + زر الطلب العائم ─────────────────────────────────────
* تدرّج لطيف. لا نلمس min-height:56px (هدف لمس h-upgrade) ولا الوهج/الحدود. */
.bottom-nav .nav-item {
font-size: clamp(0.66rem, 2.8vw, 0.72rem); /* سقف 0.72rem = الأصل */
}
.nav-icon-wrap {
width: clamp(34px, 9.5vw, 38px);
height: clamp(34px, 9.5vw, 38px);
font-size: clamp(1rem, 3vw, 1.1rem);
}
/* زر الطلب العائم: الأبعاد بـ!important في main.css:733 ⇒ نطابقها. نضبط margin-top
بنفس النسبة حتى يبقى البروز متناسقاً (عند 54px ⇒ 54/-2+1 = -26px = الأصل بالضبط). */
.nav-icon-request {
width: clamp(48px, 14vw, 54px) !important;
height: clamp(48px, 14vw, 54px) !important;
margin-top: calc(clamp(48px, 14vw, 54px) / -2 + 1px);
}
/* ─── (4) البطاقات والإحصائيات ────────────────────────────────────────────────
* نضمن أن أرقام الإحصائيات لا تكسر السطر على ≤360px. سقوف = الأصل. لا نلمس بانر
* الداشبورد ولا صورته/سكريمه (قادمة من 96-cosmic-skin) ولا شبكات البوسترات. */
.stat-mini .stat-num {
font-size: clamp(1.05rem, 4.6vw, 1.4rem); /* سقف 1.4rem = الأصل */
white-space: nowrap;
}
.stat-mini .stat-label {
font-size: clamp(0.66rem, 2.6vw, 0.72rem); /* سقف 0.72rem = الأصل */
}
/* ─── (5) صفحتا الدخول والتسجيل ───────────────────────────────────────────────
* شعارا الدخول/التسجيل أبعادهما سطرية (index.html:255 = 130px، :305 = 90px) ⇒
* !important. تدرّج للأسفل على الصغير بلا تكبير فوق الأصل. البطاقة/الحقول تستعمل
* clamp أصلاً في 95-cinematic-auth ⇒ لا نكسرها. خلفية المعبد محصورة بـ:has ⇒ تبقى. */
#page-login .auth-logo {
width: clamp(96px, 26vw, 130px) !important; /* سقف 130px = الأصل */
height: clamp(96px, 26vw, 130px) !important;
}
#page-register .auth-logo {
width: clamp(72px, 22vw, 90px) !important; /* سقف 90px = الأصل */
height: clamp(72px, 22vw, 90px) !important;
}
/* ─── (6) الحواف الآمنة (Safe-area) — مُفعَّلة بعد viewport-fit=cover ──────────
* env() يرجع 0 على الأجهزة بلا شق/على الكمبيوتر ⇒ كل قيمة أدناه = الأصل بالضبط
* (16px / 0px) ⇒ صفر تغيير خارج آيفونات الشق، وصفر أثر عمودي بأي حال.
*
* ⚠️ قرار هندسي مقصود — لماذا «الجوانب فقط» (landscape) لا القمة العمودية:
* حشوة body العلوية مضبوطة **سطرياً عبر JS** بالقيمة calc(var(--navbar-height)+42px)
* حيث الـ42px تحجز مكان «بانر الدعم»، وتتغيّر حسب فتح/إغلاق البانر (closeBanner).
* لو كبّرنا ارتفاع .top-nav بمقدار env(safe-area-inset-top) فلن تتبعه حشوة body
* (ممنوع لمس JS) ⇒ يتسرّب المحتوى أسفل الشريط/البانر على آيفون الشق. لذلك نتجنّب
* أي تكبير عمودي للشريط، ونكتفي بحواف الجوانب (آمنة 100٪: أفقية، لا تُحدث إزاحة
* عمودية، وتصبح 0 على الوضع الطولي/الكمبيوتر). القاع والجوانب العامة مؤمَّنة أصلاً
* (main.css:609 + h-upgrade.css:866) ⇒ viewport-fit=cover يفعّلها كما هي دون تغيير. */
@supports (top: env(safe-area-inset-top)) {
/* الشريط العلوي ثابت (لا يتأثّر بحشوة body) ⇒ نُبعد محتواه عن شق الجانب في الوضع
الأفقي، مع الإبقاء على 16px الأصلية عند انعدام الشق. */
.top-nav {
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
}
/* الشريط السفلي ثابت كذلك ⇒ نؤمّن جوانبه (القاع العمودي مؤمَّن أصلاً main.css:609). */
.bottom-nav {
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
}
/* ════════════════════════════════════════════════════════════════════════════
* نقاط التوقّف المرحلية — موحّدة مع منظومة اللاندنق. معظم التدرّج تكفّل به clamp
* أعلاه؛ هذه الكتل لِما لا يُناسبه clamp (فجوات الشريط، فجوة العنوان السطرية، وملاذ
* أخير لرابط الدعم عند أضيق الشاشات). كلها تنشط على الجوال فقط ⇒ الكمبيوتر سليم.
* ════════════════════════════════════════════════════════════════════════════ */
/* ≤480px — تخفيف فجوة إجراءات الشريط (الأصل 12px ⇒ يبقى 12px فوق 480). */
@media (max-width: 480px) {
.top-nav .nav-actions { gap: 10px; }
}
/* ≤390px (آيفون صغير) — إحكام بسيط إضافي لرابط الدعم. */
@media (max-width: 390px) {
.top-nav .nav-actions a[target="_blank"] { letter-spacing: -0.015em; }
}
/* ≤360px — فجوة أصغر + تقليص فجوة العنوان السطرية (gap:6px سطري ⇒ !important). */
@media (max-width: 360px) {
.top-nav .nav-actions { gap: 8px; }
.top-nav .nav-title { gap: 4px !important; }
}
/* ≤340px (الأصغر) — ملاذ أخير: إن ضاق الشريط نُخفي نص الدعم بصرياً ونُبقي الأيقونة.
* النص يبقى في DOM (قارئ الشاشة يقرؤه) — font-size:0 يطويه بصرياً فقط، فلا نفقد
* الميزة ولا الوصولية. الأيقونة تُستعاد بحجمها. */
@media (max-width: 340px) {
.top-nav .nav-actions a[target="_blank"] {
font-size: 0 !important;
gap: 0 !important;
padding: 7px 10px !important;
}
.top-nav .nav-actions a[target="_blank"] .fab {
font-size: 1.05rem !important;
}
}
/* --------------- source: assets/css/98-cinematic-layers.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
* 98-cinematic-layers.css — الطبقة السينمائية للفهارس وبطاقات الفيديو (إضافية، آخر طبقة)
* ────────────────────────────────────────────────────────────────────────────
* تُحمَّل في index.html بعد 97-responsive-harmony.css ⇒ تتغلّب بالترتيب على
* القواعد السابقة بنفس قوة المحدِّد (تكملة لتسلسل: cine-cosmos → 96 → 97 → 98).
*
* تكسو ثلاثة عناصر قائمة (شكلاً فقط — لا تلمس أي JS / id / handler / بنية DOM):
* (4) .category-header — فهارس الفصول كشريط سينمائي (صورة كونية + وشاح RTL).
* (5) .course-card — بطاقات الفيديو سينمائية لكل ثيم + حالتا «مكتمل» و«قيد التقدّم».
* (5-ج) #drawerList .drawer-item — لمسات لونية خفيفة متّسقة في مشغّل الفيديو.
*
* المبدأ: نُعرّف توكنات لونية لكل ثيم (داكن=افتراضي، وردي، فاتح) ونكتب القواعد مرّة
* واحدة تستهلك التوكنات ⇒ لا تكرار، والثيم يتبدّل عبر :root[data-theme="…"] القائم.
* الأخضر/البرتقالي للحالات «إشارة» عابرة للثيم (مكتمل=أخضر، قيد التقدّم=برتقالي) —
* أعمق في الداكن، أنقى/أفتح في الفاتح، سينمائي غير مزعج.
*
* أداء: بلا backdrop-filter على البطاقات (تتكرر كثيراً) — تدرّجات صلبة فقط.
* وصول: prefers-reduced-motion يلغي الحركات المضافة (انظر §6)، والنص عالي التباين
* فوق كل خلفية في الثيمات الثلاثة (وشاح للفهارس، تدرّجات متّزنة للبطاقات).
*
* للإزالة: احذف سطر الخاص به من index.html فقط. (لا أثر على أي ملف آخر.)
* المسارات نسبية لمجلد هذا الملف (assets/css/) ⇒ «../cinematic/…».
* ════════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════════
* (0) توكنات الثيمات — صورة شريط الفهرس + الوشاح + ألوان البطاقات والحالات
* ════════════════════════════════════════════════════════════════════════════ */
/* ── الداكن (الافتراضي) — سماوي/كحلي عميق ── */
:root {
/* فهرس الفصل: صورة الشريط (image-set: webp ثم jpg) + وشاح RTL أعمق يميناً + حد ناعم */
--cat-img:
image-set(url("../cinematic/cosmos-banner.webp") type("image/webp"),
url("../cinematic/cosmos-banner.jpg") type("image/jpeg"));
--cat-floor: #0c1626;
--cat-bd: rgba(120,170,210,0.22);
--cat-scrim: linear-gradient(to left,
rgba(4,9,18,0.84) 0%, rgba(4,9,18,0.60) 46%, rgba(4,9,18,0.40) 100%);
/* بطاقة عادية — أسود سينمائي */
--cc-bg: linear-gradient(155deg, #0d1626 0%, #06090f 100%);
--cc-bd: rgba(120,170,210,0.14);
--cc-glow: rgba(70,130,190,0.20);
--cc-rest: none; /* لمعة علوية (الفاتح فقط) */
/* حالة «مكتمل» — أخضر سينمائي عميق */
--cc-done-bg: linear-gradient(155deg, #103a26 0%, #0a2418 100%);
--cc-done-bd: rgba(52,211,153,0.34);
--cc-done-glow: rgba(16,185,129,0.22);
/* حالة «قيد التقدّم» — برتقالي/كهرماني سينمائي عميق */
--cc-prog-bg: linear-gradient(155deg, #2e1f0c 0%, #1d1308 100%);
--cc-prog-bd: rgba(245,158,11,0.34);
--cc-prog-glow: rgba(245,158,11,0.22);
--cc-prog-bar: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
/* الشارات */
--cc-done-badge-bg: rgba(16,185,129,0.18);
--cc-done-badge-fg: #6ee7b7;
--cc-prog-badge-bg: rgba(245,158,11,0.18);
--cc-prog-badge-fg: #fcd34d;
}
/* ── البنفسجي — نتجاوز توكنات البطاقة العادية فقط؛ الأخضر/البرتقالي يبقيان عميقين ── */
:root[data-theme="purple"] {
--cat-img:
image-set(url("../cinematic/cosmos-banner-purple.webp") type("image/webp"),
url("../cinematic/cosmos-banner-purple.jpg") type("image/jpeg"));
--cat-floor: #140a24;
--cat-bd: rgba(168,85,247,0.26);
--cat-scrim: linear-gradient(to left,
rgba(16,8,28,0.84) 0%, rgba(16,8,28,0.60) 46%, rgba(16,8,28,0.40) 100%);
--cc-bg: linear-gradient(155deg, #1e1233 0%, #0c0618 100%);
--cc-bd: rgba(168,85,247,0.18);
--cc-glow: rgba(168,85,247,0.18);
}
/* ── الفاتح — ثلجي سينمائي بارد؛ النص غامق ⇒ توكنات حالات أفتح + شارات نصّها غامق ──
🚪 [ONE-DOOR V1 2026-08-02 M7.2] البانر بهوية ثلوج تبوك (-snow، اسم جديد ق1) ── */
:root[data-theme="light"] {
--cat-img:
image-set(url("../cinematic/cosmos-banner-snow.webp") type("image/webp"),
url("../cinematic/cosmos-banner-snow.jpg") type("image/jpeg"));
--cat-floor: #dde6f2;
--cat-bd: rgba(110,130,165,0.30);
/* نص الفهرس أبيض دائماً ⇒ وشاح أعمق فوق الصورة الثلجية الساطعة ليبقى مقروءاً */
--cat-scrim: linear-gradient(to left,
rgba(4,9,18,0.90) 0%, rgba(4,9,18,0.70) 46%, rgba(4,9,18,0.48) 100%);
--cc-bg: linear-gradient(155deg, #f5f9fe 0%, #e6eef9 100%);
--cc-bd: rgba(120,140,170,0.30);
--cc-glow: rgba(37,99,235,0.14);
--cc-rest: inset 0 1px 0 rgba(255,255,255,0.75); /* لمعة علوية ناعمة */
--cc-done-bg: linear-gradient(155deg, #e6f8ef 0%, #cdeedb 100%); /* منت بارد */
--cc-done-bd: rgba(16,140,92,0.40);
--cc-done-glow: rgba(16,185,129,0.18);
--cc-prog-bg: linear-gradient(155deg, #fdf1da 0%, #f8e2bd 100%); /* كهرمان فاتح */
--cc-prog-bd: rgba(194,124,20,0.42);
--cc-prog-glow: rgba(245,158,11,0.18);
--cc-done-badge-bg: rgba(16,140,92,0.16);
--cc-done-badge-fg: #0c7a4d;
--cc-prog-badge-bg: rgba(194,124,20,0.18);
--cc-prog-badge-fg: #9a6410;
}
/* ════════════════════════════════════════════════════════════════════════════
* (4) فهارس الفصول — .category-header كشريط سينمائي (صورة + وشاح RTL)
* ────────────────────────────────────────────────────────────────────────────
* نتجاوز «background: var(--gradient)» في main.css (نفس قوة المحدِّد 0,1,0 + تحميل
* لاحق). الزوايا 12px واللون #fff يبقيان من main.css. الوشاح أعمق جهة اليمين (RTL:
* حيث يبدأ العنوان) فيبقى عالي التباين؛ السهم (يسار) يأخذ ظلّاً نصّياً للقراءة.
* ════════════════════════════════════════════════════════════════════════════ */
.category-header {
background-color: var(--cat-floor);
background-image: var(--cat-scrim), var(--cat-img); /* الوشاح فوق الصورة */
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: cover, cover;
border: 1px solid var(--cat-bd);
/* حشو متجاوب: السقف = الأصل (14/16) فلا يتغيّر سطح المكتب */
padding: clamp(11px, 3.2vw, 14px) clamp(13px, 4vw, 16px);
}
/* النص فوق الصورة — ظل خفيف يرفع التباين فوق المناطق المزدحمة */
.category-header .cat-title { text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.category-header .category-chevron {
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.45); /* السهم يقع على الجهة الأخفّ وشاحاً */
}
/* الشارة — زجاج أبيض خفيف فوق الصورة */
.category-header .category-badge {
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.28);
color: #fff;
}
/* Hover — لمعة سينمائية هادئة (لا قفزات): نلغي خفوت main.css ونرفع السطوع قليلاً */
.category-header:hover {
opacity: 1;
filter: brightness(1.07) saturate(1.04);
box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
/* ════════════════════════════════════════════════════════════════════════════
* (5) بطاقات الفيديو — .course-card سينمائية لكل ثيم + حالتان
* ────────────────────────────────────────────────────────────────────────────
* نتجاوز «background: var(--bg-card)» و«border» في main.css (تحميل لاحق). نُبقي
* onclick/transition/الثمبنيل/شريط .h-progress كما هي — كسوة شكل فقط. كل الحالات
* تبقى قابلة للضغط (لا pointer-events:none).
* ════════════════════════════════════════════════════════════════════════════ */
.course-card {
background: var(--cc-bg);
border: 1px solid var(--cc-bd);
box-shadow: var(--cc-rest); /* لمعة علوية في الفاتح، لا شيء في الداكن/الوردي */
position: relative; /* لتثبيت العلامة المائية (الداكن) */
}
.course-card > * { position: relative; z-index: 1; } /* المحتوى فوق العلامة المائية */
/* علامة مائية كونية خافتة جدّاً في زاوية البطاقة العادية (الداكن فقط) */
.course-card::after {
content: "";
position: absolute;
inset: auto auto -18px 8px; /* أسفل-يسار، يقصّها overflow:hidden */
width: clamp(64px, 20%, 104px);
aspect-ratio: 1;
z-index: 0;
pointer-events: none;
opacity: 0.06;
background:
image-set(url("../cinematic/cosmos-motif.webp") type("image/webp"),
url("../cinematic/cosmos-motif.png") type("image/png"))
left bottom / contain no-repeat;
}
/* لا علامة مائية في البنفسجي/الفاتح ولا على بطاقات الحالات */
:root[data-theme="purple"] .course-card::after,
:root[data-theme="light"] .course-card::after,
.course-card.is-completed::after,
.course-card.is-progress::after { content: none; }
/* Hover البطاقة العادية — توهج لوني هادئ (نُبقي رفعة translateY من main.css) */
.course-card:hover { box-shadow: 0 8px 24px var(--cc-glow); }
/* ── حالة «مكتمل» — البطاقة كلها خضراء سينمائية + توهج أخضر + حد أخضر (تبقى قابلة للضغط) ── */
.course-card.is-completed {
background: var(--cc-done-bg);
border-color: var(--cc-done-bd);
box-shadow: 0 0 0 1px var(--cc-done-bd), 0 4px 18px var(--cc-done-glow);
}
.course-card.is-completed:hover {
box-shadow: 0 0 0 1px var(--cc-done-bd), 0 8px 26px var(--cc-done-glow);
}
/* ── حالة «قيد التقدّم» — البطاقة كلها برتقالية سينمائية + توهج برتقالي + شريط كهرماني ── */
.course-card.is-progress {
background: var(--cc-prog-bg);
border-color: var(--cc-prog-bd);
box-shadow: 0 0 0 1px var(--cc-prog-bd), 0 4px 18px var(--cc-prog-glow);
}
.course-card.is-progress:hover {
box-shadow: 0 0 0 1px var(--cc-prog-bd), 0 8px 26px var(--cc-prog-glow);
}
/* شريط التقدّم داخل البطاقة — كهرماني متّسق بدل السماوي الافتراضي */
.course-card.is-progress .h-progress-bar { background: var(--cc-prog-bar); }
/* ── الشارات النصّية (.cc-badge) — بديل أنيق عن الإيموجي، تُنسَّق هنا ── */
.cc-badge {
display: inline-block;
vertical-align: middle;
margin-inline-start: 6px;
padding: 1px 9px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.7;
white-space: nowrap;
}
.cc-badge--done { /* «مكتمل» — شارة خضراء + علامة صحّ (Unicode، بلا اعتماد خط) */
background: var(--cc-done-badge-bg);
color: var(--cc-done-badge-fg);
border: 1px solid var(--cc-done-bd);
}
.cc-badge--done::before { content: "\2713"; margin-inline-end: 4px; font-weight: 900; }
.cc-badge--prog { /* «%» — شارة كهرمانية */
background: var(--cc-prog-badge-bg);
color: var(--cc-prog-badge-fg);
border: 1px solid var(--cc-prog-bd);
}
/* ════════════════════════════════════════════════════════════════════════════
* (5-ج) مشغّل الفيديو — لمسات لونية خفيفة متّسقة على عناصر القائمة (drawer)
* ────────────────────────────────────────────────────────────────────────────
* سياق مركّز ⇒ إشارة لونية خفيفة فقط (لا خلفيات كاملة). الحدود الجانبية والأيقونة
* موجودة أصلاً في main.css؛ نضيف تلميحاً للخلفية + نوحّد الألوان مع لغة البطاقات.
* #drawerList (id) يرفع القوة فوق قواعد main.css الملوّنة بالثيم.
* ════════════════════════════════════════════════════════════════════════════ */
#drawerList .drawer-item.completed { background: rgba(16,185,129,0.07); }
#drawerList .drawer-item.completed .drawer-done-icon { color: #34d399; }
#drawerList .drawer-item.in-progress { background: rgba(245,158,11,0.07); }
#drawerList .drawer-item.in-progress .drawer-watch-fill {
background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
}
/* العنصر قيد التشغيل — لمسة بلون الثيم الحالي (بدل الأزرق المحذوف) */
#drawerList .drawer-item.playing { background: color-mix(in srgb, var(--primary) 12%, transparent); }
/* ════════════════════════════════════════════════════════════════════════════
* (6) التجاوب + إمكانية الوصول
* ════════════════════════════════════════════════════════════════════════════ */
/* الجوال (≤480px): خفّف حشو الفهرس وأبرز جزءاً ألطف من صورة الشريط */
@media (max-width: 480px) {
.category-header { padding: 10px 12px; background-position: center, center 30%; }
}
/* البانر الترحيبي: اسمح للجملة الأطول بالالتفاف بأناقة على الشاشات الضيّقة (لا قصّ) */
@media (max-width: 380px) {
#page-dashboard > div:first-child p { line-height: 1.45; }
}
/* احترام تقليل الحركة: ألغِ الحركات المضافة (نُبقي الحالات الساكنة والتوهجات الثابتة) */
@media (prefers-reduced-motion: reduce) {
.category-header, .course-card { transition: none; }
.category-header:hover { filter: none; }
.course-card:hover { transform: none; }
}
/* --------------- source: assets/css/99-theme-isolation.css --------------- */
/* ════════════════════════════════════════════════════════════════════════
99-theme-isolation.css — عزل الثيم (طبقة إضافية، آخر ملف في تتالي index)
──────────────────────────────────────────────────────────────────────
الهدف: إبقاء «تسجيل الدخول» و«إنشاء حساب» بلوحة بنفسجية داكنة موحّدة مهما كان
الثيم المحفوظ (بنفسجي/وردي/فاتح) — حتى على متصفحات WebView القديمة داخل تطبيقات
مثل تيليجرام التي لا تدعم المُحدِّد :has().
الآلية: سكربت ui-theme-isolation.js يضيف الصنف .is-auth-screen على
عند تفعيل أيٍّ من صفحتَي المصادقة، وهذه القواعد تعيد فرض اللوحة الداكنة.
القيم مطابقة تماماً لـ 95-cinematic-auth.css لكن بصنف بدل :has (توافق أوسع).
إضافي بالكامل وقابل للإزالة بحذف هذا الملف + سطر السكربت.
════════════════════════════════════════════════════════════════════════ */
/* (1) فرض اللوحة الداكنة على شاشات المصادقة — نفس قيم القفل السينمائي بالضبط */
body.is-auth-screen {
--primary: #a855f7;
--primary-hover: #9333ea;
--primary-light: #c084fc;
--bg-page: #0c0618;
--bg-card: #1a1030;
--bg-input: rgba(26, 16, 48, 0.62);
--bg-input-focus: rgba(38, 24, 64, 0.82);
--text-primary: #f3e9ff;
--text-secondary: #c4b3da;
--text-muted: #8576a0;
--border-color: rgba(168, 85, 247, 0.16);
--glow: 0 0 0 4px rgba(168, 85, 247, 0.18);
--hu-halo: rgba(168, 85, 247, 0.22);
background: #0c0618 !important;
}
/* (2) إخفاء مبدّل الثيم + بانر الدعم العائم داخل شاشات المصادقة (كما في 95) */
body.is-auth-screen #themeToggleBtn,
body.is-auth-screen #supportBanner { display: none !important; }
/* (3) إلغاء خلفية الكون الداخلية (body::after) فوق المصادقة ⇒ يظهر المعبد وحده */
body.is-auth-screen::after { content: none !important; }
/* (4) إظهار خلفية المعبد السينمائية الخاصة بالمصادقة (بديل :has للمتصفحات القديمة) */
body.is-auth-screen .h-auth-cosmos { display: block !important; }
/* (5) توحيد خلفية مع الثيم النشط ⇒ يمنع ظهور شريط بلون منفصل عند ارتداد
التمرير (overscroll) في أعلى/أسفل الشاشة بالجوال. يتبع الثيم تلقائياً. */
html { background: var(--bg-page); }
/* --------------- source: assets/css/100-performance-mode.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
* 🟣 [PERF-STUDENT 2026-06-10] 100-performance-mode.css — وضع الأداء القصوى
* ────────────────────────────────────────────────────────────────────────────
* مرآة طبقة الأدمن 99 لمنصة الطالب. تُحمَّل آخر ملف CSS في index.html.
* التحميل بسطر واحد = التراجع بحذف سطر واحد (يرجع الشكل القديم بالكامل).
*
* الفلسفة: نحذف «كلفة» الحركة لا «جمالها» — الديسكتوب يحتفظ بأناقة مخففة،
* والجوال (hover:none / pointer:coarse) يحصل على فورية مطلقة.
* الأرقام من جرد فعلي: ~50 transition:all، ~121 backdrop-filter، 32 أنيميشن
* لانهائي بالتطبيق، 3 خلفيات body ثابتة (fixed)، صفر مستمعات
* animationend/transitionend في كل JS (مُثبت بـ grep ⇒ القتل آمن).
*
* الأقسام: §1 أنيميشن الدخول | §2 النبضات اللانهائية | §3 الزجاج backdrop
* §4 خلفيات fixed | §5 الانتقالات والظلال | §hover حارس الهوفر واللمس
* §6 انسجام الأجهزة | §7 القوائم الطويلة | §8 perf-lite + reduced-motion
* §9 أدوات (هياكل شيمر + سهم العودة)
* ════════════════════════════════════════════════════════════════════════════ */
/* ═══ §0 عام (كل الأجهزة) — مكاسب مجانية بلا أثر بصري ══════════════════════ */
body { touch-action: manipulation; }
a, button, .h-btn, .nav-item, .nav-btn, .poster-card, .course-card,
.svc-card, .profile-menu-item, .drawer-item, .category-header {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* تأثير الموجة (هوية) — صفر اعتراض لمس + تلميح تركيب */
.ripple-circle { pointer-events: none; will-change: transform, opacity; }
/* ═════════════════════════════════════════════════════════════════════════
* الجوال/اللمس — فورية مطلقة
* ═════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
/* ─── §1 أنيميشن الدخول: لا شيء — الصفحة تظهر فوراً ─────────────────── */
.page,
.page.slide-left, .page.slide-right, .page.slide-up,
.poster-card.stagger-poster,
.stagger-card,
.count-animate { animation: none !important; }
/* أنيميشن inline (كرت الترحيب fadeInScale + نبض «اسمك الثلاثي») */
#page-dashboard div[style*="fadeInScale"] { animation: none !important; }
#page-register span[style*="namePulseGlow"] { animation: none !important; }
/* يبقى يتحرك: .h-progress-bar.animated (progressFill 0.8s مرة واحدة — وظيفي) */
/* ─── §2 النبضات اللانهائية الزخرفية: إيقاف كامل على الجوال ───────────
يبقى يتحرك: .spinner::after / .sbil-spinner / .pcs-spinner / .fa-spin
(سبينرات) + .skeleton/.poster-skeleton/.h-skel-* (هياكل تحميل) +
.wl-cd-sep (وميض فاصل countdown مقاطع الانتظار — وظيفي) +
.sbil-pending-dots (مؤشر «جاري» فعلي). الشارات تبقى ظاهرة ثابتة. */
/* 🪽 [SILK-GLIDE 2026-07-17 R7] أزيل .login-gradient-bg من القائمة — القاعدة الميتة
حُذفت من main.css (للتراجع: أعد السطر مع إعادة القاعدة هناك) */
.nav-icon-request .nav-custom-icon,
.nav-icon-request::before,
.lesson-card--waiting .course-thumb::after,
.lesson-card--waiting .wl-center-icon,
.lesson-card--waiting .wl-badge,
.lesson-card--waiting .wl-pct-fill::after,
/* 🪽 [SILK-GLIDE 2026-07-17 R2] قفل البوابة التتابعية: نبض القفل الخامل + وهج ::after —
زخرفة لانهائية تُقتل على الجوال. :not(.sg-unlocking) يستثني اهتزازة الفتح الوظيفية
(0.9s مرة واحدة — وإلا دهسها الـ!important). للتراجع: احذف السطر التالي. */
.sg-gate-overlay:not(.sg-unlocking) .sg-gate-lock, .sg-gate-lock::after,
.tg-particle, .tg-logo-wrap, .tg-logo-glow, .tg-open-btn,
.tg-status-dot, .tg-success-ring, .tg-recovery-icon-bg,
.dlm-badge .dot, .dlm-illust .halo,
.sbil-svc-card[data-has-unpaid="1"],
.sbil-result-icon-bg,
.sbil-rt-connected i,
.svc-card-badge,
.sbil-pickcard-due .sbil-pickcard-status i,
.sbil-pickcard-overdue .sbil-pickcard-status i,
.cine-cosmos, .cine-stars, .cine-stars::after,
.cine-aurora, .cine-aurora::before, .cine-aurora::after { animation: none !important; }
/* ─── §3 الزجاج: إلغاء كامل على اللمس + خلفيات صلبة بروح كل ثيم ──────── */
*, *::before, *::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* الشرائط والمودالات — صلبة شبه معتمة (معايرة على الثيمات الأربعة) */
.top-nav, .bottom-nav, .h-modal, .h-toast, .playlist-drawer {
background: rgba(13, 17, 28, 0.97) !important;
}
:root[data-theme="purple"] .top-nav, :root[data-theme="purple"] .bottom-nav,
:root[data-theme="purple"] .h-modal, :root[data-theme="purple"] .h-toast,
:root[data-theme="purple"] .playlist-drawer {
background: rgba(18, 12, 38, 0.96) !important;
}
:root[data-theme="light"] .top-nav, :root[data-theme="light"] .bottom-nav,
:root[data-theme="light"] .h-modal, :root[data-theme="light"] .playlist-drawer {
background: rgba(250, 251, 253, 0.97) !important;
}
:root[data-theme="light"] .h-toast { background: rgba(255, 255, 255, 0.97) !important; }
/* بطاقات الثيمات الزجاجية (وردي/بنفسجي كان عليها blur 6px) — تعتيم أعلى بدل الزجاج */
:root[data-theme="purple"] .h-card {
background: linear-gradient(145deg, rgba(40, 26, 64, 0.95), rgba(26, 16, 48, 0.97)) !important;
}
/* خلفيات المودالات/الشيتات (كانت blur) — سكريم أعمق يعوّض غياب الضبابية */
.h-modal-overlay, .dlm-backdrop, .sbil-pay-modal-backdrop, .sbil-receipt-overlay,
.pcs-sheet-backdrop, .tg-modal-overlay, .fp-gate-backdrop, .final-req-overlay {
background-color: rgba(4, 6, 12, 0.78) !important;
}
/* 🪽 [SILK-GLIDE 2026-07-17 مراجعة عدائية] القاعدة أعلاه غير مقيدة بالثيم
فكانت تُسقط سكريم device-limit-modal.css الفاتح («رقم 10») على
الجوال. للتراجع: احذف هذه الكتلة. */
:root[data-theme="light"] .dlm-backdrop {
background-color: rgba(15, 23, 42, .45) !important;
}
/* ─── §4 خلفيات fixed: إعادة رسم كاملة مع كل سكرول على الجوال ─────────── */
body { background-attachment: scroll !important; }
/* ─── §hover حارس الهوفر اللزج: أول نقرة لمس كانت تفعّل hover كاملاً ──── */
.poster-card:hover, .dash-poster-card:hover, .h-card:hover, .course-card:hover,
.svc-card:hover, .h-btn:hover, .profile-menu-item:hover, .stat-mini:hover,
.category-header:hover, .drawer-item:hover, .vid-bookmark-item:hover,
.auth-back-link:hover, .poster-action-btn:hover {
transform: none !important;
filter: none !important;
}
.poster-card:hover img, .poster-card:hover .poster-img-wrap img { transform: none !important; }
/* شاين البطاقات (::before تظليل + ::after لمعة قطرية) — معدوم على اللمس */
.poster-card::before, .poster-card::after { display: none !important; }
.h-btn:hover::after { box-shadow: none !important; }
/* بديل اللمس الفوري: إحساس «ضغطة» حقيقي بلا كلفة */
.poster-card:active, .dash-poster-card:active, .course-card:active,
.h-card:active, .svc-card:active, .h-btn:active, .profile-menu-item:active,
.drawer-item:active, .nav-item:active, .category-header:active {
transform: scale(0.985) !important;
transition: transform 0.06s ease !important;
}
/* ─── §5 الظلال متعددة الطبقات ⇒ ظل واحد خفيف على اللمس ───────────────── */
.poster-card, .dash-poster-card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important; }
:root[data-theme="light"] .poster-card,
:root[data-theme="light"] .dash-poster-card { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14) !important; }
/* ─── §6 انسجام الأجهزة ──────────────────────────────────────────────── */
/* مدخلات ≥16px = لا زوم قسري على iOS (شاشة الدخول تحديداً) */
.h-input, input, select, textarea { font-size: max(16px, 1rem) !important; }
/* أهداف لمس ≥ 44px للأزرار الصغيرة */
.top-nav .nav-btn, .theme-toggle-btn, .vid-top-btn, .vid-ctrl-btn,
.mini-player-btn, .vid-speed-btn {
min-width: 44px; min-height: 44px;
}
}
/* الحواف الآمنة (آيفون) — إضافي فوق معالجة 97 الجانبية: شريط القاع والتوست
فوق home-indicator. لا أثر على الأجهزة بلا notch (env = 0). */
@supports (padding: env(safe-area-inset-bottom)) {
@media (hover: none), (pointer: coarse) {
.bottom-nav {
height: calc(var(--bottombar-height) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.toast-container {
bottom: calc(var(--bottombar-height) + 12px + env(safe-area-inset-bottom, 0px));
}
/* ⚠️ (اكتشاف المراجعة العدائية) لا قاعدة body هنا — main.css:604-607 يعالج
env على حشوة body أصلاً مع إبقاء إزاحة الشريط؛ قاعدة body{padding-bottom:env}
كانت ستمحو الإزاحة وتحجب آخر ~75px من كل صفحة خلف الشريط الثابت. */
}
}
/* ═════════════════════════════════════════════════════════════════════════
* الديسكتوب — أناقة مخففة (hover حقيقي موجود)
* ═════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
/* §1 دخول مخفف: نفس الحركات بنصف الكلفة (≤ 0.15s) */
.page { animation-duration: 0.12s !important; }
.page.slide-left, .page.slide-right, .page.slide-up { animation-duration: 0.15s !important; }
.stagger-card { animation-duration: 0.2s !important; }
/* §2 الأثقل فقط على الديسكتوب: نبض فلتر drop-shadow + الجزيئات العائمة */
.nav-icon-request::before, .tg-particle { animation: none !important; }
/* §3 الزجاج للعناصر العليا فقط وبسقف blur 8px */
.top-nav { -webkit-backdrop-filter: blur(8px) saturate(1.1) !important; backdrop-filter: blur(8px) saturate(1.1) !important; }
.bottom-nav { -webkit-backdrop-filter: blur(8px) saturate(1.1) !important; backdrop-filter: blur(8px) saturate(1.1) !important; }
.h-modal, .h-modal-overlay, .h-toast,
.dlm-backdrop, .sbil-pay-modal-backdrop, .sbil-receipt-overlay,
.pcs-sheet-backdrop, .tg-modal-overlay, .fp-gate-backdrop,
#page-login.active, #page-register.active {
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
}
/* زجاج «البطاقات» (كلفة بلا قيمة فوق خلفية كونية أصلاً) ⇒ إلغاء */
:root[data-theme="purple"] .h-card,
.poster-status, .svc-badge, .streak-counter, .achievement-badge,
.vid-ctrl-btn, .vid-top-btn, .nav-actions a[target="_blank"],
.mf-badge, .wa-badge,
#page-login.active a[target="_blank"], #page-register.active a[target="_blank"] {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* §5 هوفر مخفف: transform ≤ scale(1.02) + ظل واحد (بدل ظل ضخم + حلقة + شاين) */
.poster-card:hover, .dash-poster-card:hover {
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}
:root[data-theme="light"] .poster-card:hover,
:root[data-theme="light"] .dash-poster-card:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important; }
.poster-card:hover img, .poster-card:hover .poster-img-wrap img { transform: scale(1.02) !important; }
/* لمعة الـ::after القطرية (أغلى رسم في البطاقة) تُلغى حتى ديسكتوباً —
يبقى تظليل ::before الرقيق (رخيص: opacity فقط) */
.poster-card::after { display: none !important; }
}
/* ═══ §5 الانتقالات: كل transition:all (~50 موضعاً) تُحصر في الخصائص الرخيصة
* بمدة قصوى 0.15s — على كل الأجهزة (مُثبت بـ grep: لا مستمع transitionend
* في أي JS). pay-share خارج النطاق (لا يحمّل هذا الملف). ══════════════ */
.top-nav .nav-btn, .bottom-nav .nav-item, .nav-icon-wrap, .nav-custom-icon,
.h-input, .h-btn, .category-header, .profile-menu-item,
.req-step, .req-step-num, .req-select-fancy, .poster-action-btn,
.vid-ctrl-btn, .vid-top-btn, .vid-speed-btn, .mini-player-btn, .vid-bookmark-item,
.dlm-back, .dlm-btn, .exss-opt, .mf-pill, .mf-chip,
.pcs-sheet-back, .pcs-sheet-x, .pcs-paytype-opt, .pcs-method-opt, .pcs-cta,
.rh-back-btn, .rh-tile-arrow, .rh-chip,
.sbil-method-card, .sbil-pay-btn-large, .sbil-inst-pay-btn, .sbil-copy-btn,
.sbil-result-btn, .sbil-rt-badge, .sbil-receipt-btn, .sbil-receipt-close,
.sbil-receipt-foot button, .sbil-pickcard-tick,
.tg-link-banner-btn, .tg-copy-btn, .tg-secondary-actions button,
.wa-pill, .wa-chip,
#page-login a[target="_blank"], #page-register a[target="_blank"] {
transition-property: background-color, color, border-color, opacity, transform !important;
transition-duration: 0.15s !important;
}
/* ═══ §7 القوائم الطويلة: المتصفح يرسم الظاهر فقط ═══════════════════════ */
.course-card { content-visibility: auto; contain-intrinsic-size: auto 112px; }
.drawer-item { content-visibility: auto; contain-intrinsic-size: auto 52px; }
.vid-bookmark-item { content-visibility: auto; contain-intrinsic-size: auto 48px; }
.peer-race-card { content-visibility: auto; contain-intrinsic-size: auto 150px; }
/* ═══ §8 perf-lite (جهاز ضعيف — حتى لو ديسكتوب) + prefers-reduced-motion ═══
* html.perf-lite يفعّله سكربت inline في عند deviceMemory≤4 أو
* hardwareConcurrency≤4 أو saveData. ════════════════════════════════════ */
html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
html.perf-lite .top-nav, html.perf-lite .bottom-nav, html.perf-lite .h-modal {
background: rgba(13, 17, 28, 0.97) !important;
}
html.perf-lite[data-theme="purple"] .top-nav, html.perf-lite[data-theme="purple"] .bottom-nav,
html.perf-lite[data-theme="purple"] .h-modal { background: rgba(18, 12, 38, 0.96) !important; }
html.perf-lite[data-theme="light"] .top-nav, html.perf-lite[data-theme="light"] .bottom-nav,
html.perf-lite[data-theme="light"] .h-modal { background: rgba(250, 251, 253, 0.97) !important; }
/* 🪽 [SILK-GLIDE 2026-07-17 R7] أزيل html.perf-lite .login-gradient-bg — القاعدة الميتة حُذفت من main.css (للتراجع: أعد السطر) */
html.perf-lite .nav-icon-request .nav-custom-icon,
html.perf-lite .nav-icon-request::before,
html.perf-lite .tg-particle, html.perf-lite .tg-logo-wrap, html.perf-lite .tg-logo-glow,
html.perf-lite .tg-open-btn, html.perf-lite .tg-success-ring,
html.perf-lite .cine-cosmos, html.perf-lite .cine-stars, html.perf-lite .cine-stars::after,
html.perf-lite .cine-aurora, html.perf-lite .cine-aurora::before, html.perf-lite .cine-aurora::after,
html.perf-lite .skeleton, html.perf-lite .poster-skeleton,
html.perf-lite .h-skel-row, html.perf-lite .h-skel-16x9 { animation: none !important; }
html.perf-lite .poster-card::before, html.perf-lite .poster-card::after { display: none !important; }
html.perf-lite .poster-card, html.perf-lite .dash-poster-card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-delay: 0ms !important; /* (مراجعة عدائية) بدون تصفير التأخير تبقى بطاقات stagger مخفية ثم «تفقع» تباعاً */
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
/* (مراجعة عدائية) قواعد الديسكتوب أعلاه (.page/.stagger-card بخصوصية 0,1,0)
كانت تتغلب على القاعدة العامة (*) — نعيد فرض التسطيح بخصوصية مكافئة */
.page, .page.slide-left, .page.slide-right, .page.slide-up, .stagger-card {
animation-duration: 0.001ms !important;
animation-delay: 0ms !important;
}
/* السبينرات تبقى تدور — مؤشر تحميل وظيفي لا زخرفة */
.spinner::after, .sbil-spinner, .pcs-spinner, .fa-spin, .fa-pulse {
animation-duration: 0.8s !important;
animation-iteration-count: infinite !important;
}
/* (مراجعة عدائية) نقاط «جاري التحقق من الدفع» مؤشر وظيفي — تبقى بتوقيتها الأصلي */
.sbil-pending-dots span {
animation-duration: 1.4s !important;
animation-iteration-count: infinite !important;
}
}
/* ═══ §9 أدوات ═══════════════════════════════════════════════════════════ */
/* هيكل صف درس (يستعمله openPlaylist) + هيكل فيديو 16:9 (يستعمله openVideo) */
.h-skel-row {
height: 84px; border-radius: 14px; margin-bottom: 10px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 75%);
background-size: 200% 100%;
animation: hSkelShimmer 1.4s linear infinite;
}
.h-skel-16x9 {
aspect-ratio: 16 / 9; border-radius: 12px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.04) 75%);
background-size: 200% 100%;
animation: hSkelShimmer 1.4s linear infinite;
}
:root[data-theme="light"] .h-skel-row,
:root[data-theme="light"] .h-skel-16x9 {
background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 25%, rgba(15, 23, 42, 0.12) 50%, rgba(15, 23, 42, 0.06) 75%);
background-size: 200% 100%;
}
@keyframes hSkelShimmer { to { background-position: -200% 0; } }
/* سهم العودة للواجهة على شعار «حمدان» (navTitle) — محسوس أكثر (المهمة ٢/د).
⚠️ المحرف "‹" (U+2039) من فئة Bidi_Mirrored: تحت dir=rtl يُرسم «›» يشير
يميناً (اتجاه العودة الصحيح). لا «تُصلحه» إلى "›" وإلا انعكس وصار خاطئاً. */
.top-nav .nav-title::after {
content: "‹";
font-size: 1.05em;
opacity: 0.55;
margin-inline-start: 2px;
transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
/* +3px = يمين (الـ transform لا ينعكس مع direction) — نفس اتجاه إشارة السهم المرسوم */
.top-nav .nav-title:hover::after { opacity: 1; transform: translateX(3px); }
}
/* --------------- source: assets/css/101-iron-lock-modal.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
101-iron-lock-modal.css — طبقة «القيد الحديدي» فوق device-limit-modal.css
────────────────────────────────────────────────────────────────────────────
تنسيقات إضافية فقط لعناصر شاشة «الدكتور حمدان» الجديدة (قائمة الأجهزة + أزرار
جديدة + وسم تحذير). لا تُعدّل القاعدة — طبقة فوقها (فلسفة الطبقات 90+).
RTL + clamp() متجاوبة + نفس الثيم البنفسجي/الكوني الزجاجي.
════════════════════════════════════════════════════════════════════════════ */
/* ── كتلة الأجهزة المسجَّلة ─────────────────────────────────────────────── */
.dlm-root .dlm-devices{
margin: clamp(6px, 1.6vw, 12px) 0 clamp(4px, 1.2vw, 10px);
text-align: right;
}
.dlm-root .dlm-devices-title{
display: flex; align-items: center; gap: 8px;
font-size: clamp(.82rem, 2.6vw, .95rem);
font-weight: 700;
color: var(--text-primary, #fff);
opacity: .92;
margin-bottom: clamp(6px, 1.4vw, 10px);
}
.dlm-root .dlm-devices-title i{ opacity: .8; }
.dlm-root .dlm-dev-list{
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: clamp(6px, 1.4vw, 10px);
}
.dlm-root .dlm-dev{
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
border-radius: clamp(12px, 2.4vw, 16px);
padding: clamp(9px, 2vw, 13px) clamp(11px, 2.4vw, 15px);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.dlm-root .dlm-dev-head{
display: flex; align-items: center; gap: 9px;
font-size: clamp(.84rem, 2.7vw, .98rem);
font-weight: 600;
color: var(--text-primary, #fff);
line-height: 1.5;
}
.dlm-root .dlm-dev-head i{
flex: 0 0 auto;
color: #6ee7f0; /* سماوي هادئ — متناسق، بلا توهج بنفسجي/أحمر */
font-size: 1.02rem; opacity: .95;
}
.dlm-root .dlm-dev-name{ word-break: break-word; }
.dlm-root .dlm-dev-os{
font-size: .82em; opacity: .7; font-weight: 500;
}
.dlm-root .dlm-dev-primary{
display: inline-block;
margin-inline-start: 6px;
font-size: .72em; font-weight: 700;
color: #34d399;
background: rgba(52,211,153,.14);
border: 1px solid rgba(52,211,153,.34);
border-radius: 999px;
padding: 1px 8px;
vertical-align: middle;
}
.dlm-root .dlm-dev-meta{
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin-top: clamp(4px, 1vw, 7px);
font-size: clamp(.72rem, 2.3vw, .82rem);
color: var(--text-secondary, rgba(255,255,255,.7));
opacity: .9;
}
.dlm-root .dlm-dev-dot{ opacity: .45; }
.dlm-root .dlm-devices-empty{
background: rgba(255,255,255,.05);
border: 1px dashed rgba(255,255,255,.16);
border-radius: 14px;
padding: clamp(10px, 2.2vw, 14px);
font-size: clamp(.82rem, 2.6vw, .92rem);
color: var(--text-secondary, rgba(255,255,255,.78));
text-align: center;
}
/* ── تذييل زر الرجوع (سطر مستقل أسفل الأزرار) ───────────────────────────── */
.dlm-root .dlm-foot{
margin-top: clamp(8px, 1.8vw, 13px);
display: flex; justify-content: center;
}
.dlm-root .dlm-foot .dlm-btn{ width: 100%; }
/* ── زر «إعادة المحاولة» الناعم ─────────────────────────────────────────── */
.dlm-root .dlm-btn-soft{
background: rgba(110,231,240,.10);
border: 1px solid rgba(110,231,240,.30);
color: #bdf3f7;
}
.dlm-root .dlm-btn-soft:hover{
background: rgba(110,231,240,.18);
border-color: rgba(110,231,240,.46);
}
.dlm-root .dlm-btn-soft:focus-visible{
outline: 2px solid rgba(110,231,240,.7);
outline-offset: 2px;
}
/* ── وسم «تعذّر التحقق» التحذيري ────────────────────────────────────────── */
.dlm-root .dlm-badge-warn{
background: rgba(245,158,11,.14);
border-color: rgba(245,158,11,.4) !important;
color: #fcd9a0 !important;
}
.dlm-root .dlm-badge-warn .dot{ background: #f59e0b !important; }
/* ── الجمل الناعمة داخل الملاحظة ────────────────────────────────────────── */
.dlm-root .dlm-note .dlm-soft{
opacity: .85;
font-size: .95em;
}
.dlm-root .dlm-note p{ margin: 0 0 6px; }
.dlm-root .dlm-note p:last-child{ margin: 0; }
/* ── على الشاشات الصغيرة جداً: الأزرار عمودية مريحة ─────────────────────── */
@media (max-width: 380px){
.dlm-root .dlm-actions{ flex-direction: column; }
.dlm-root .dlm-actions .dlm-btn{ width: 100%; }
}
/* --------------- source: assets/css/102-video-experience.css --------------- */
/* ═════════════════════════════════════════════════════════════════════════
* 🎬 102 — تجربة الفيديو الموحدة (2026-06-12)
* جوال + ديسكتوب + آيفون + أندرويد + متصفحات تلجرام الداخلية.
*
* المبدأ: لا نلمس مشغل Bunny نفسه ولا قيود الحماية — كل شيء على «غلاف»
* الفيديو (#videoWrapper) وصف الأزرار تحته. أربعة أنظمة:
* §1 صف الأزرار تحت المشغل (أهداف لمس ≥44px، إخفاء زر السرعة بوضع Bunny)
* §2 ملء الشاشة الأصلي (:fullscreen) — ديسكتوب/أندرويد كروم
* §3 ملء الشاشة البديل (html.h-fs-fake) — تلجرام/آيفون، مع تدوير اصطناعي
* §4 المشغل المصغر CSS (h-mini-on) — نفس iframe بلا إعادة تحميل
* التراجع الكامل: حذف سطر لهذا الملف من index.html.
* ═════════════════════════════════════════════════════════════════════════ */
/* ─── §1 صف أزرار الفيديو تحت المشغل ─────────────────────────────────────── */
.vid-extra-controls {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
align-items: center;
}
.vid-extra-controls .h-btn {
width: auto;
padding: 9px 14px;
font-size: 0.82rem;
min-height: 44px; /* هدف لمس آمن (Apple HIG) */
}
/* وضع Bunny: زر السرعة لا يمكن أن يعمل (playerjs بلا setPlaybackRate) — يُخفى
بدل أن يبقى زراً كاذباً؛ السرعة متاحة من ترس إعدادات مشغل Bunny نفسه */
.vid-extra-controls.bunny .vx-speed { display: none !important; }
/* ─── §2 ملء الشاشة الأصلي (Fullscreen API على الغلاف) ──────────────────── */
.video-wrapper:fullscreen {
background: #000;
width: 100%;
height: 100%;
}
.video-wrapper:fullscreen .video-container {
width: 100%;
height: 100%;
aspect-ratio: auto;
border-radius: 0;
}
.video-wrapper:-webkit-full-screen { background: #000; width: 100%; height: 100%; }
.video-wrapper:-webkit-full-screen .video-container {
width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0;
}
/* شريط الخروج/التدوير العائم — يظهر داخل أي وضع ملء شاشة فقط */
#hFsBar {
display: none;
position: absolute;
top: calc(10px + env(safe-area-inset-top, 0px));
inset-inline-end: calc(10px + env(safe-area-inset-right, 0px));
z-index: 40;
gap: 8px;
}
.video-wrapper:fullscreen #hFsBar,
.video-wrapper:-webkit-full-screen #hFsBar,
html.h-fs-fake .video-wrapper.h-fs-el #hFsBar { display: flex; }
#hFsBar button {
min-width: 44px;
min-height: 44px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* زر التدوير الاصطناعي معنيٌّ بالمسار البديل فقط */
.video-wrapper:fullscreen #hFsRotateBtn,
.video-wrapper:-webkit-full-screen #hFsRotateBtn { display: none; }
/* ─── §3 ملء الشاشة البديل — CSS فقط (يعمل حيث تفشل الـAPI) ─────────────── */
/* 🛡️ جذر حرج: transform على #page-video (حركة pageIn — تتجمد بأول إطار في
التبويبات الخلفية) + content-visibility:auto على .page يجعلان position:fixed
يُحسب نسبةً للصفحة لا للشاشة ⇒ ملء الشاشة/المصغر ينكمشان. نحيّدهما في
الوضعين فقط — صفر أثر على بقية حركات المنصة. */
html.h-fs-fake #page-video,
#page-video.h-mini-detached {
transform: none !important;
animation: none !important;
filter: none !important;
content-visibility: visible !important;
}
html.h-fs-fake,
html.h-fs-fake body { overflow: hidden !important; }
/* 🛡️ supportBanner أيضاً: ابن مباشر للـbody بـz:999 سطري — كان يطفو فوق ملء
الشاشة البديل (غلاف z:100000 محبوس بسياق تكديس الصفحة z:1). !important
المؤلف يغلب السطري غير المهم، والخروج نظيف بالحالتين. */
html.h-fs-fake .top-nav,
html.h-fs-fake .bottom-nav,
html.h-fs-fake .toast-container,
html.h-fs-fake #supportBanner { display: none !important; }
html.h-fs-fake .video-wrapper.h-fs-el {
position: fixed !important;
inset: 0 !important;
z-index: 100000;
margin: 0 !important;
background: #000;
border-radius: 0;
}
html.h-fs-fake .video-wrapper.h-fs-el .video-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
border-radius: 0;
}
/* التدوير الاصطناعي 90° للوضع الطولي: الحاوية تأخذ أبعاد الشاشة مقلوبة
وتدور حول مركزها ⇒ فيديو 16:9 يملأ عرض الجهاز فعلياً بلا أي API */
html.h-fs-fake .video-wrapper.h-fs-el.h-fs-rotate .video-container {
inset: auto;
top: 50%;
left: 50%;
width: 100vh;
height: 100vw;
transform: translate(-50%, -50%) rotate(90deg);
}
/* 🛡️ Safari iOS: vh = المنفذ الكبير بينما شرائط المتصفح لا تنكمش داخل
h-fs-fake (overflow:hidden يمنع التمرير) ⇒ كان يُقص ~طرفا الفيديو وأطراف
شريط تحكم Bunny. dvh/dvw يتتبعان المنفذ الديناميكي الفعلي (iOS 15.4+)،
و100vh/100vw أعلاه تبقى احتياطاً متدهوراً للمحركات الأقدم. */
@supports (height: 100dvh) {
html.h-fs-fake .video-wrapper.h-fs-el.h-fs-rotate .video-container {
width: 100dvh;
height: 100dvw;
}
}
/* ─── §4 المشغل المصغر CSS — نفس العنصر، صفر إعادة تحميل ────────────────── */
/* صفحة الفيديو «المنفصلة»: تبقى مرسومة (التشغيل والتتبع مستمران) لكن كل
محتواها مخفي إلا غلاف الفيديو المثبّت بزاوية الشاشة */
#page-video.h-mini-detached {
display: block !important;
padding: 0 !important;
margin: 0 !important;
/* 🛡️ h-upgrade يجعل كل ابن للـbody سياق تكديس z:1 ⇒ الـ4500 على الغلاف
قيمة داخلية محبوسة، و7 صفحات تأتي بعد page-video بالـDOM كانت تدفن
المصغر عند فتحها (طلب مادة/خدماتي!). 1500 = فوق كل الصفحات (z:1)
وتحت المودالات (2000) والتوست (9999). position:relative من h-upgrade. */
z-index: 1500;
}
#page-video.h-mini-detached > *:not(#videoWrapper) { display: none !important; }
.video-wrapper.h-mini-on {
position: fixed;
inset-inline-end: 12px;
bottom: calc(var(--bottombar-height, 64px) + 14px + env(safe-area-inset-bottom, 0px));
width: min(320px, 62vw);
z-index: 4500;
border-radius: 14px;
overflow: hidden;
background: #000;
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}
.video-wrapper.h-mini-on .video-container { border-radius: 0; }
/* طبقات لا معنى لها داخل المصغر */
.video-wrapper.h-mini-on .vid-top-actions,
.video-wrapper.h-mini-on .vid-controls-overlay,
.video-wrapper.h-mini-on .vid-resume-prompt,
.video-wrapper.h-mini-on #hFsBar { display: none !important; }
/* شاشة النهاية تتقلص بحجم مقروء داخل المصغر */
.video-wrapper.h-mini-on .vid-end-content { padding: 8px; max-width: 95%; font-size: 0.72rem; }
.video-wrapper.h-mini-on .vid-end-check { font-size: 1.4rem; margin-bottom: 4px; }
/* شريط المصغر (عنوان + استعادة + إغلاق) — يُحقن مرة واحدة من video.js */
#hMiniBar {
display: none;
align-items: center;
gap: 6px;
padding: 6px 8px;
background: rgba(10, 8, 22, 0.92);
color: #fff;
font-size: 0.78rem;
touch-action: none; /* السحب بالإصبع بلا تمرير للصفحة */
cursor: grab;
}
.video-wrapper.h-mini-on #hMiniBar { display: flex; }
#hMiniBar .h-mini-title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
}
#hMiniBar button {
width: 36px;
height: 36px;
min-width: 36px;
border: none;
border-radius: 9px;
background: rgba(255, 255, 255, 0.10);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* ─── §5 لمس الجوال: إظهار أزرار الفيديو المباشر بالكلاس (لا hover) ──────── */
/* main.css يربط الظهور بـ:hover فقط — على اللمس video.js يبدّل show-controls */
@media (hover: none), (pointer: coarse) {
.video-wrapper.show-controls .vid-top-actions { opacity: 1; }
}
/* ─── §6 امتداد كامل للعرض على الجوال (تجربة أوسع بلا تكبير) ────────────── */
@media (max-width: 640px) {
#page-video .video-wrapper:not(.h-mini-on):not(.h-fs-el) {
margin-inline: calc(50% - 50vw);
}
#page-video .video-wrapper:not(.h-mini-on):not(.h-fs-el) .video-container {
border-radius: 0;
}
}
/* --------------- source: assets/css/103-request-experience.css --------------- */
/* ════════════════════════════════════════════════════════════════════════
* 🟣 [Hubs+RX 2026-06-30] — تجربة الطلب الجديدة بالصور (طبقة 103)
* ────────────────────────────────────────────────────────────────────────
* الغرض:
* تنسيق سينمائي بنفسجي/ذهبي لشاشة «الطلب» الجديدة: هيرو بصورة، بطاقتا
* اختيار كبيرتان بصور غلاف، وورقة تأكيد/دفع سفلية (Bottom Sheet) أنيقة.
*
* مبادئ:
* • تدرّج آمن: كل صورة لها fallback (تدرّج بنفسجي + أيقونة) عبر .rx-noimg.
* • تجربة موحّدة 360→1024: dvh/svh + safe-area + أهداف لمس ≥44px.
* • سرعة: حركات دخول خفيفة فقط (≤200ms) + احترام prefers-reduced-motion.
*
* تُحمَّل بعد 102 لتغلب بنظافة. للإزالة: احذف هذا + الملف.
* ════════════════════════════════════════════════════════════════════════ */
/* متغيّرات محليّة (هوية بنفسجي/ذهبي) */
:root {
--rx-gold: #fbbf24;
--rx-gold-deep: #d97706;
--rx-violet: #a855f7;
--rx-violet-deep: #4c1d95;
}
/* ════════ (1) الهيرو ════════ */
.rx-hero {
position: relative;
border-radius: 20px;
overflow: hidden;
min-height: 150px;
margin-bottom: 18px;
background: linear-gradient(135deg, #2a1259 0%, var(--rx-violet-deep) 55%, #1a0d33 100%);
isolation: isolate;
}
.rx-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: .92;
}
.rx-hero-scrim {
position: absolute;
inset: 0;
z-index: 1;
/* RTL: تعتيم أقوى من جهة البداية (يمين) لقراءة النص */
background:
linear-gradient(to left, rgba(15,8,30,0) 30%, rgba(20,8,40,.62) 100%),
linear-gradient(to top, rgba(12,6,26,.70) 0%, rgba(12,6,26,0) 60%);
}
.rx-hero-content {
position: relative;
z-index: 2;
padding: 26px 22px;
text-align: right;
}
.rx-hero-title {
margin: 0 0 6px;
font-size: clamp(1.3rem, 1rem + 1.8vw, 1.8rem);
font-weight: 800;
color: #fff;
letter-spacing: -.01em;
text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.rx-hero-desc {
margin: 0;
font-size: clamp(.85rem, .78rem + .5vw, 1rem);
color: #ecdcff;
text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
/* ════════ (2) المربعان الكبيران ════════ */
.rx-choice-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 560px) {
.rx-choice-grid { grid-template-columns: 1fr; }
}
.rx-choice-card {
position: relative;
display: block;
width: 100%;
min-height: 168px;
border: 1px solid var(--border-color);
border-radius: 18px;
overflow: hidden;
cursor: pointer;
padding: 0;
text-align: right;
background: linear-gradient(135deg, #241046 0%, var(--rx-violet-deep) 100%);
isolation: isolate;
-webkit-tap-highlight-color: transparent;
}
.rx-choice-media {
position: absolute;
inset: 0;
z-index: 0;
/* fallback: تدرّج بنفسجي يظهر تحت الصورة وعند فشلها */
background: linear-gradient(135deg, #2a1259 0%, var(--rx-violet-deep) 60%, #1a0d33 100%);
display: flex;
align-items: center;
justify-content: center;
}
.rx-choice-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 🚪 [ONE-DOOR V1b 2026-08-02] عاد الوسط الافتراضي: أصول TILE-TRIO الجديدة
بلا نص مدموج (سبب object-position:15% في V1 زال معها — كان يتفادى أنصاف
حروف العناوين المدموجة بأسفل صور V1). السكريمات لم تُمس. */
z-index: 1;
}
.rx-choice-fallback {
position: relative;
z-index: 0;
font-size: 3rem;
color: rgba(251,191,36,.85);
opacity: 0; /* مخفي افتراضياً — يظهر فقط عند .rx-noimg */
}
.rx-choice-media.rx-noimg .rx-choice-fallback { opacity: 1; }
.rx-choice-scrim {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(to top, rgba(10,5,22,.85) 0%, rgba(10,5,22,.15) 55%, rgba(10,5,22,.05) 100%),
linear-gradient(to left, rgba(10,5,22,0) 45%, rgba(10,5,22,.45) 100%);
}
.rx-choice-body {
position: absolute;
z-index: 3;
right: 16px;
left: 16px;
bottom: 14px;
text-align: right;
}
.rx-choice-title {
margin: 0 0 4px;
font-size: clamp(1.05rem, .95rem + .6vw, 1.25rem);
font-weight: 800;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.rx-choice-desc {
margin: 0;
font-size: .8rem;
line-height: 1.5;
color: #e7d8ff;
text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.rx-choice-arrow {
position: absolute;
z-index: 3;
top: 14px;
left: 14px; /* RTL: الزاوية الخلفية */
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(251,191,36,.18);
border: 1px solid rgba(251,191,36,.45);
color: var(--rx-gold);
font-size: .85rem;
}
.rx-choice-card:hover { border-color: rgba(168,85,247,.55); }
.rx-choice-card:active { transform: scale(.985); }
/* ════════ (3) ورقة التأكيد/الدفع السفلية ════════ */
.rx-confirm-overlay {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(8,4,18,.55);
opacity: 0;
transition: opacity .16s ease;
}
.rx-confirm-overlay.rx-open { opacity: 1; }
.rx-confirm-sheet {
width: 100%;
max-width: 520px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-bottom: 0;
border-radius: 22px 22px 0 0;
padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -10px 40px rgba(0,0,0,.4);
transform: translateY(12px);
transition: transform .18s ease;
text-align: center;
max-height: 88svh;
overflow-y: auto;
}
.rx-confirm-overlay.rx-open .rx-confirm-sheet { transform: translateY(0); }
.rx-confirm-grip {
width: 42px;
height: 4px;
border-radius: 4px;
background: var(--border-color);
margin: 0 auto 14px;
}
.rx-confirm-illus {
position: relative;
width: 96px;
height: 96px;
margin: 4px auto 12px;
display: flex;
align-items: center;
justify-content: center;
}
.rx-confirm-illus img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 16px;
}
.rx-illus-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.6rem;
color: var(--rx-gold);
opacity: 0;
}
.rx-confirm-illus.rx-noimg .rx-illus-fallback { opacity: 1; }
.rx-confirm-title {
margin: 0 0 6px;
font-size: 1.2rem;
font-weight: 800;
color: var(--text-primary);
}
.rx-confirm-sub {
margin: 0 0 6px;
font-size: .9rem;
color: var(--text-secondary);
}
.rx-confirm-item {
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
margin: 10px 0 18px;
padding: 10px 14px;
border-radius: 14px;
background: var(--bg-input);
border: 1px solid var(--border-color);
}
.rx-confirm-thumb {
width: 46px;
height: 46px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
}
.rx-confirm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rx-confirm-item-name {
font-size: .95rem;
font-weight: 700;
color: var(--text-primary);
text-align: right;
}
.rx-confirm-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.rx-btn {
width: 100%;
min-height: 50px;
border-radius: 14px;
font-size: .98rem;
font-weight: 700;
cursor: pointer;
border: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
-webkit-tap-highlight-color: transparent;
}
.rx-btn-primary {
color: #1a0d33;
background: linear-gradient(135deg, var(--rx-gold) 0%, var(--rx-gold-deep) 100%);
box-shadow: 0 6px 18px rgba(217,119,6,.28);
}
.rx-btn-primary:active { transform: scale(.985); }
.rx-btn-secondary {
color: var(--text-primary);
background: transparent;
border-color: var(--primary);
}
.rx-btn-secondary:active { transform: scale(.985); }
.rx-btn-ghost {
color: var(--text-secondary);
background: transparent;
border-color: transparent;
min-height: 44px;
}
.rx-confirm-success { padding: 6px 0 4px; }
/* ════════ (4) تنقّل الهيدر: البداية الذكية ════════
🚪 [ONE-DOOR V1 2026-08-02] قواعد .rx-nav-landing («عن المنصة») نُظّفت مع
تقاعد الزر وحذف الصفحة نهائياً — بقي زر البداية وحده في العنقود. */
.rx-nav-group {
display: flex;
align-items: center;
gap: 6px;
}
.rx-nav-home {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
border-radius: 10px;
font-size: .78rem;
font-weight: 600;
cursor: pointer;
color: var(--primary);
background: rgba(168,85,247,.10);
border: 1px solid rgba(168,85,247,.22);
-webkit-tap-highlight-color: transparent;
width: 36px;
justify-content: center;
padding: 0;
font-size: .85rem;
}
.rx-nav-home:active { transform: scale(.94); }
.rx-nav-home:hover { border-color: var(--primary); }
/* الثيم الفاتح: لمسة بنفسجية واضحة */
:root[data-theme="light"] .rx-nav-home {
background: rgba(124,58,237,.08);
border-color: rgba(124,58,237,.28);
color: #7c3aed;
}
/* ════════ احترام تقليل الحركة ════════ */
@media (prefers-reduced-motion: reduce) {
.rx-confirm-overlay,
.rx-confirm-sheet { transition: none !important; }
.rx-choice-card:active,
.rx-btn:active,
.rx-nav-home:active { transform: none !important; }
}
/* --------------- source: assets/css/104-theme-purple-white.css --------------- */
/* ════════════════════════════════════════════════════════════════════════
* 🟣 [Hubs+RX 2026-06-30] — حصر الثيمات: بنفسجي + أبيض (طبقة 104)
* ────────────────────────────────────────────────────────────────────────
* الغرض:
* (1) حزام أمان: تحييد أي أزرق/سماوي متبقٍّ في :root الأساسي ⇒ بنفسجي
* (المحرّك أصلاً يفرض purple/light دائماً، وهذا تأمين إضافي).
* (2) الأبيض = براند بنفسجي بتباين عالٍ (≥AA) + إصلاح الألوان الباهتة.
*
* الأزرق في main.css أُعيد تلوينه للبنفسجي عند المصدر؛ هذه الطبقة تضيف
* التأمين + إصلاح وضوح الأبيض (نصوص ثانوية/حدود/placeholders/معطّلة).
*
* تُحمَّل بعد 102/103. للإزالة: احذف هذا + الملف.
* ════════════════════════════════════════════════════════════════════════ */
/* ════════ (1) تحييد الأساس (belt) — برّاند بنفسجي بدل الأزرق/السماوي ════════ */
:root,
:root:not([data-theme]) {
--primary: #a855f7;
--primary-hover: #9333ea;
--primary-light: #c084fc;
--accent: #a855f7;
--gradient: linear-gradient(135deg, #4c1d95 0%, #a855f7 100%);
--glow: 0 0 26px rgba(168,85,247,0.16);
}
/* ════════ (2) الأبيض = براند بنفسجي + تباين عالٍ ════════ */
:root[data-theme="light"] {
/* لمسة بنفسجية بدل الأزرق */
--primary: #7c3aed;
--primary-hover: #6d28d9;
--primary-light: #8b5cf6;
--accent: #7c3aed;
--gradient: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
--glow: 0 0 20px rgba(124,58,237,0.16);
/* إصلاح وضوح الأبيض (AA): أوضح من الباهت السابق */
--text-secondary: #334155; /* كان #475569 */
--text-muted: #475569; /* كان #64748b الباهت */
--border-color: #cbd5e1; /* كان #e2e8f0 شبه المختفي */
}
/* placeholders واضحة على الأبيض (AA للقراءة) */
:root[data-theme="light"] ::placeholder { color: #5b6473; opacity: 1; }
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #5b6473; opacity: 1; }
/* الأزرار/العناصر المعطّلة — مقروءة لا باهتة جداً */
:root[data-theme="light"] button:disabled,
:root[data-theme="light"] .h-btn:disabled,
:root[data-theme="light"] .poster-action-btn:disabled {
opacity: 1;
color: #475569;
background: #eef1f6;
border-color: #cbd5e1;
}
/* الشرائح/الـ chips على الأبيض — حدّ ونصّ واضحان */
:root[data-theme="light"] .rh-chip,
:root[data-theme="light"] .rx-nav-home {
color: #5b21b6;
border-color: rgba(124,58,237,0.30);
}
:root[data-theme="light"] .rh-chip.rh-chip-active {
background: #7c3aed;
color: #ffffff;
border-color: #7c3aed;
}
/* فواصل breadcrumb + الفواصل العامة — تباين كافٍ */
:root[data-theme="light"] .breadcrumb .sep,
:root[data-theme="light"] .breadcrumb a { color: #475569; }
:root[data-theme="light"] .breadcrumb span { color: #1e293b; }
/* أيقونات التنقّل غير النشطة على الأبيض (شريط سفلي فاتح) */
:root[data-theme="light"] .bottom-nav .nav-item:not(.active) { color: #475569; }
/* ملاحظة: .poster-meta و .poster-desc تبقى فاتحة (تجلس على صورة بوستر داكنة
بكل الثيمات) — لا نُعتّمها لئلا تختفي على الخلفية الداكنة. */
/* 🪽 [SILK-GLIDE 2026-07-17 T] قسم 105-theme-alula.css أزيل بالكامل (اجتثاث ثيم العلا) */
/* --------------- source: assets/css/107-nav-harmony.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
* 107-nav-harmony.css — تناسق الشريط العلوي عبر كل الأجهزة (طبقة إضافية، بعد 106)
* ────────────────────────────────────────────────────────────────────────────
* الغرض:
* جعل أيقونات إجراءات الهيدر «عنقوداً واحداً متناسقاً» بنفس المقاس ونفس نصف
* القطر، وإظهار عبارة «التواصل مع فريق الدعم» كاملةً بلا قصّ حتى على الجوالات
* الصغيرة — من غير أي لون صريح (كل زر يرث --primary/--border-color/--danger
* فيتلوّن ذهبياً في العلا، بنفسجياً في purple، غامقاً في light تلقائياً).
*
* آلية العمل:
* • طبقة بصرية بحتة 100٪ — صفر JS/HTML/handler/تغيير id أو class أو بنية.
* • تُحمَّل بعد 106 ⇒ تتغلّب على main.css و 97 و 103 و exam-system-student.css
* بنفس قوة المحدِّد + ترتيب التحميل (وبمحدّد أقوى حيث يلزم كسر ID/!important).
* • مبدأ «سقف clamp = الأصل أو أصغر»: لا تكبير فوق الأصل على الكمبيوتر/الآيباد
* إطلاقاً؛ العنقود يتوحّد على 36px (= مقاس rx-nav-home الأصلي) فيتناسق بلا نفخ.
* • سقوط رشيق: أي زر غير موجود (مثل زر الخروج الأحمر #exsLogoutTop المحقون شرطياً)
* ببساطة لا تُطبَّق عليه القاعدة — لا كسر ولا أثر.
*
* نقاط التوقّف: ≤480 (طيّ نص الواجهة الأساسية مطبَّق أصلاً في 103) / ≤390 (إحكام) /
* ≤360 (أصغر فجوة + فجوة العنوان) / ≤320 فقط (ملاذ أخير: طيّ نص الدعم).
*
* خطة الإزالة: احذف سطر الخاص به من index.html + هذا الملف ⇒ رجوع كامل.
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── (1) العنقود: توحيد مقاس أيقونات الإجراءات ──────────────────────────────
* الأزرار المربّعة الأيقونية (الرئيسية + مبدّل الثيم + زر الخروج الأحمر إن وُجد)
* تتوحّد على clamp(30px, 8.2vw, 36px): سقفها 36px (= rx-nav-home الأصلي) فلا تكبير
* فوق الأصل، وأرضيّتها 30px على أضيق جوال. نصف قطر موحّد 10px + flex-shrink:0 لكلها.
*
* كسر الأسبقية:
* • theme-toggle: main.css/97 يعطيانه (0,1,0)؛ محدّدنا (0,3,0) + لاحق ⇒ يتغلّب.
* • rx-nav-home: 103 يعطيه (0,1,0) + min-height:36px؛ نعيد min-* إلى 0 لنسمح بالتدرّج.
* • #exsLogoutTop: مُعرَّف بـID (1,0,0) + خلفية حمراء صريحة في exam-system-student.css؛
* محدّدنا (1,2,0) + لاحق ⇒ يتغلّب على الحجم/الشكل، والخلفية تصير من --danger. */
.top-nav .nav-actions .rx-nav-home,
.top-nav .nav-actions .theme-toggle-btn,
.top-nav .nav-actions #exsLogoutTop {
width: clamp(30px, 8.2vw, 36px);
height: clamp(30px, 8.2vw, 36px);
min-width: 0; /* يتغلّب على min-width الموروث (h-upgrade/103) */
min-height: 0;
border-radius: 10px; /* نصف قطر موحّد للعنقود كله */
flex-shrink: 0;
position: relative; /* مرساة لمنطقة اللمس ::before */
}
/* زر الخروج الأحمر — لون من --danger (لا لون صريح)، ويبقى أحمراً في كل الثيمات.
* نُبقيه دائرة الطاقة المألوفة بصرياً عبر الأيقونة، لكن ضمن مقاس/نصف قطر العنقود. */
.top-nav .nav-actions #exsLogoutTop {
background: var(--danger);
font-size: clamp(12px, 3.4vw, 15px); /* سقف 15px = الأصل */
}
/* الإيموجي داخل مبدّل الثيم — يتناسب مع المقاس الجديد (36px) بلا «نفخ» iOS. */
.top-nav .nav-actions .theme-toggle-btn .tt-icon {
font-size: clamp(0.9rem, 3.2vw, 1.05rem);
line-height: 1;
}
/* منطقة لمس ≥44px دون تكبير الإطار المرئي (حشوة شفّافة غير مرئية، نفس نهج 97).
* عند الأرضية 30px (أضيق الجوالات) ⇒ 30 + 7×2 = 44px ⇒ يفي بحدّ ≥44px على كل
* الأجهزة (وأكبر فوقها). لا خلفية/لا z-index ⇒ غير مرئية. */
.top-nav .nav-actions .rx-nav-home::before,
.top-nav .nav-actions .theme-toggle-btn::before,
.top-nav .nav-actions #exsLogoutTop::before {
content: "";
position: absolute;
inset: -7px;
/* تمرّر الضغط للزر نفسه (جزء من محتواه)، بلا أي أثر بصري */
}
/* 🚪 [ONE-DOOR V1 2026-08-02] قواعد .rx-nav-landing (المرساة + مقاس ≤480px)
نُظّفت مع تقاعد زر «عن المنصة». */
/* ─── (2) الفجوات: عنقود مُحكَم يتدرّج على الجوال ────────────────────────────
* سقف الفجوة = 12px (الأصل في main.css) فوق الجوال، ويضيق تدريجياً على الضيّق. */
.top-nav .nav-actions {
gap: clamp(5px, 1.6vw, 10px);
flex-shrink: 0; /* لا يُضغط العنقود ⇒ نص الدعم لا يُقصّ (العنوان يتقلّص بدله) */
}
.top-nav .nav-actions .rx-nav-group {
gap: clamp(4px, 1.2vw, 6px);
}
/* ─── (3) رابط الدعم «التواصل مع فريق الدعم» — كامل بلا قصّ ────────────────────
* أنماطه سطرية في index.html + 97/h-upgrade يفرضان بـ!important ⇒ نستعمل !important
* هنا (محدّد أقوى + محمّل أخيراً). ألوان الخلفية/الحد تبقى للثيمات (main.css/105) —
* نحن نضبط التخطيط فقط: نص كامل، nowrap، خط/حشوة متدرّجان بسقف = الأصل، لا انضغاط. */
.top-nav .nav-actions a[target="_blank"] {
font-size: clamp(0.6rem, 2.5vw, 0.8rem) !important; /* سقف 0.8rem = الأصل */
padding: clamp(4px, 1.4vw, 7px) clamp(8px, 2.6vw, 14px) !important;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: -0.015em;
}
.top-nav .nav-actions a[target="_blank"] .fab {
font-size: clamp(0.9rem, 3vw, 1.1rem) !important; /* سقف 1.1rem = الأصل */
}
/* ─── (4) العنوان قابل للانكماش بأمان (لا يزاحم الإجراءات) ─────────────────────
* الشعار ثابت (flex-shrink:0)، ونص «حمدان» يتقلّص خطّه بـclamp (سقف 1.2rem = الأصل)
* قبل أي قصّ. flex:0 1 auto + min-width:0 يسمحان للعنوان بامتصاص أي ضيق. overflow:hidden
* حارس أخير (نادراً ما يُفعَّل لأن تقلّص الخط يكفي على 360px). */
.top-nav .nav-title {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
font-size: clamp(0.85rem, 3.4vw, 1.2rem); /* سقف 1.2rem = الأصل */
white-space: nowrap;
}
.top-nav .nav-title .h-logo { flex-shrink: 0; }
/* ════════════════════════════════════════════════════════════════════════════
* نقاط التوقّف المرحلية — لِما لا يُناسبه clamp (الفجوات + ملاذ نص الدعم).
* ════════════════════════════════════════════════════════════════════════════ */
/* ≤390px (آيفون صغير) — إحكام بسيط إضافي للفجوة. */
@media (max-width: 390px) {
.top-nav .nav-actions { gap: clamp(4px, 1.4vw, 8px); }
}
/* ≤440px (كل الجوالات الطولية) — قد يزاحم عنقودُ الإجراءات (حتى 5 أزرار + نصُّ دعم
* كامل) كلمةَ «حمدان» فتُقصّ. الأولوية لنص الدعم الكامل + عنقود متناسق ⇒ نُظهر
* الشعار وحده (28px، يحمل aria-label="حمدان") ونطوي الكلمة بصرياً (font-size:0) بلا
* قصّ. الكلمة تبقى في DOM (وصولية). على ≥441px (تابلت/كمبيوتر) تعود «حمدان» كاملة. */
@media (max-width: 440px) {
.top-nav .nav-title {
font-size: 0 !important;
gap: 0 !important;
}
}
/* ≤360px — أصغر فجوة للعنقود. */
@media (max-width: 360px) {
.top-nav .nav-actions { gap: 5px; }
.top-nav .nav-actions .rx-nav-group { gap: 4px; }
}
/* ≤340px — نُلغي طيّ 97 (font-size:0): النص يبقى كاملاً حتى 320px على الجوالات
* الواقعية. نُحكم الخط/الحشوة قليلاً ليفِد الكل داخل العرض. */
@media (max-width: 340px) {
.top-nav .nav-actions a[target="_blank"] {
font-size: clamp(0.56rem, 2.4vw, 0.8rem) !important;
gap: 5px !important;
padding: clamp(4px, 1.3vw, 6px) clamp(7px, 2.3vw, 11px) !important;
}
.top-nav .nav-actions a[target="_blank"] .fab {
font-size: clamp(0.85rem, 2.9vw, 1rem) !important;
}
}
/* ≤320px فقط (ملاذ أخير لأجهزة نادرة جداً) — نطوي نص الدعم لأيقونة. النص يبقى في
* DOM (قارئ الشاشة يقرؤه) + «بانر الدعم» أسفل الشريط يعرض النص كاملاً دائماً على كل
* الأجهزة ⇒ لا نفقد الميزة ولا الوصولية. هذا البلوك لاحق للـ≤340 ⇒ يتغلّب عند <320. */
@media (max-width: 320px) {
.top-nav .nav-actions a[target="_blank"] {
font-size: 0 !important;
gap: 0 !important;
padding: 6px 9px !important;
}
.top-nav .nav-actions a[target="_blank"] .fab {
font-size: 1rem !important;
}
}
/* --------------- source: assets/css/108-rx-theme-harmony.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
* 108-rx-theme-harmony.css — توافق خانة الطلب مع الثيم + تكبير العناوين (بعد 107)
* ────────────────────────────────────────────────────────────────────────────
* الغرض:
* خانة «طلب المادة» (الهيرو + المربّعان) صُمّمت في 103 بألوان بنفسجية صريحة
* فتصطدم فوق ثيم العلا الذهبي والفاتح. هنا نحوّل تلك الألوان إلى «واعية بالثيم»
* عبر متغيّرات محليّة، ونكبّر عنوانَي «دروس الجامعة»/«دورات تطويرية»/«طلب جديد»
* قليلاً — بلا لمس منطق ولا 103، تجاوز لوني/مقاسي فقط عبر هذه الطبقة.
*
* آلية العمل:
* • متغيّرات محليّة بقيم بنفسجية افتراضية على :root (= مظهر purple الحالي)، ثم
* تجاوزها للثيم الآخر عبر :root[data-theme="light"]. الثيم purple (الذي لا
* يطابق أياً من التجاوزين) يقع على قيم :root الافتراضية ⇒ صفر انحدار عليه.
* • قواعد الاستهلاك محدّدات single-class (0,1,0) = نفس قوة 103، ومحمّلة بعده
* ⇒ تتغلّب بنظافة. الهوفر (0,1,1) كذلك.
* • السكريم يبقى تدرّجاً مزدوجاً RTL (أقوى من جهة النص)؛ نُعيد بناءه بلون القاعدة
* --rx-scrim-rgb لكل ثيم مع الحفاظ على نفس شدّات 103.
*
* خطة الإزالة: احذف سطر الخاص به من index.html + هذا الملف ⇒ رجوع كامل.
* ════════════════════════════════════════════════════════════════════════════ */
/* ─── (0) المتغيّرات — الافتراضي بنفسجي (purple)، ثم تجاوز light ──────────────
* --rx-card-grad : تدرّج خلفية الهيرو/البطاقة/الميديا البديل (يظهر تحت الصورة وعند فشلها).
* --rx-scrim-rgb : لون قاعدة السكريم (نُبنى منه التدرّج المزدوج بشدّات 103 الثابتة).
* --rx-desc-color: لون نص الوصف. --rx-title-color: لون العنوان.
* --rx-hover-bd : حدّ البطاقة عند الهوفر.
* --rx-arrow-* : خلفية/حدّ/لون دائرة السهم (بنفسجية في purple/light). */
:root {
--rx-card-grad: linear-gradient(135deg, #2a1259 0%, #4c1d95 60%, #1a0d33 100%);
--rx-scrim-rgb: 12, 6, 26;
--rx-desc-color: #ecdcff;
--rx-title-color: #ffffff;
--rx-hover-bd: rgba(168, 85, 247, .55);
--rx-arrow-bg: rgba(168, 85, 247, .18);
--rx-arrow-bd: rgba(168, 85, 247, .45);
--rx-arrow-fg: #c084fc;
}
/* 🪽 [SILK-GLIDE 2026-07-17 T] أزيلت كتلة متغيّرات alula (اجتثاث ثيم العلا). */
/* الفاتح — وشاح فاتح + نص غامق مقروء + سهم بنفسجي غامق. */
:root[data-theme="light"] {
--rx-card-grad: linear-gradient(135deg, #efe9f7 0%, #e6ddf3 60%, #f6f3fb 100%);
--rx-scrim-rgb: 245, 247, 250;
--rx-desc-color: #3a2b52;
--rx-title-color: #2a1a4a;
--rx-hover-bd: rgba(124, 58, 237, .45);
--rx-arrow-bg: rgba(124, 58, 237, .12);
--rx-arrow-bd: rgba(124, 58, 237, .40);
--rx-arrow-fg: #7c3aed;
}
/* ─── (1) الهيرو ─────────────────────────────────────────────────────────────
* تجاوز لوني فقط (الخلفية/السكريم/الوصف). العنوان يكبر في القسم (3). */
.rx-hero {
background: var(--rx-card-grad);
}
/* 🪽 [SILK-GLIDE 2026-07-17 T] أزيل سكريم alula للهيرو (اجتثاث ثيم العلا) —
* البنفسجي يبقى على سكريم 103 الأصلي حرفياً، والفاتح له تجاوزه أدناه. */
.rx-hero-desc {
color: var(--rx-desc-color);
}
/* ─── (2) المربّعان الكبيران ──────────────────────────────────────────────────
* تجاوز لوني: خلفية البطاقة + خلفية الميديا البديلة + السكريم + الوصف + السهم + الهوفر. */
.rx-choice-card {
background: var(--rx-card-grad);
}
.rx-choice-media {
background: var(--rx-card-grad);
}
/* 🪽 [SILK-GLIDE 2026-07-17 T] أزيل سكريم alula للمربّعين (اجتثاث ثيم العلا). */
.rx-choice-desc {
color: var(--rx-desc-color);
}
/* أيقونة السقوط البديلة (عند غياب الصورة) — تتبع لون السهم فتبقى مقروءة في كل ثيم. */
.rx-choice-media.rx-noimg .rx-choice-fallback {
color: var(--rx-arrow-fg);
}
.rx-choice-arrow {
background: var(--rx-arrow-bg);
border-color: var(--rx-arrow-bd);
color: var(--rx-arrow-fg);
}
.rx-choice-card:hover {
border-color: var(--rx-hover-bd);
}
/* الفاتح فقط — صور الطلب هنا «ثلجية» فاتحة مخصّصة (rx-*-light) ⇒ النص الغامق مقروء
* أصلاً بتباين عالٍ. نكتفي بوشاح فاتح لطيف عند منطقة النص (يمين الهيرو/أسفل المربّع)
* ك«لوحة» هادئة تُثبّت القراءة، مع إبقاء الثلج ظاهراً وجميلاً (لا نغرق الصورة). */
:root[data-theme="light"] .rx-hero-scrim {
background:
linear-gradient(to left,
rgba(var(--rx-scrim-rgb), 0) 24%,
rgba(var(--rx-scrim-rgb), .60) 100%),
linear-gradient(to top,
rgba(var(--rx-scrim-rgb), .30) 0%,
rgba(var(--rx-scrim-rgb), 0) 55%);
}
:root[data-theme="light"] .rx-choice-scrim {
background:
linear-gradient(to top,
rgba(var(--rx-scrim-rgb), .74) 0%,
rgba(var(--rx-scrim-rgb), .26) 52%,
rgba(var(--rx-scrim-rgb), .06) 100%),
linear-gradient(to left,
rgba(var(--rx-scrim-rgb), 0) 45%,
rgba(var(--rx-scrim-rgb), .32) 100%);
}
/* في الفاتح: 103 يضع ظلّ نصّ داكناً (لأبيض على داكن) يُعكّر النصَّ الغامق الجديد.
* نستبدله بهالة فاتحة رقيقة ⇒ نص غامق حادّ ومقروء فوق الوشاح الفاتح (تجاوز لوني فقط). */
:root[data-theme="light"] .rx-hero-title,
:root[data-theme="light"] .rx-hero-desc,
:root[data-theme="light"] .rx-choice-title,
:root[data-theme="light"] .rx-choice-desc {
text-shadow: 0 1px 2px rgba(255, 255, 255, .6);
}
/* ─── (3) تكبير العناوين وتناسقها عبر الأجهزة ────────────────────────────────
* سقوف أكبر بلا كسر على الصغير (clamp min مرفوع باعتدال). لون العنوان واعٍ بالثيم. */
/* 🚪 [ONE-DOOR V1b 2026-08-02] تكبير نصوص البطاقات (قرار المالك — أصول
TILE-TRIO بلا نص مدموج فالعنوان المرسوم هو الهوية):
كان: title clamp(1.18rem, 1rem + 1.1vw, 1.5rem) · desc clamp(0.82rem, 0.78rem + 0.35vw, 0.95rem) */
.rx-choice-title {
font-size: clamp(1.35rem, 1.12rem + 1.35vw, 1.75rem);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--rx-title-color);
}
.rx-choice-desc {
font-size: clamp(0.95rem, 0.88rem + 0.45vw, 1.1rem);
}
.rx-hero-title {
font-size: clamp(1.45rem, 1.05rem + 2vw, 2rem);
color: var(--rx-title-color);
}
/* نوسّع منطقة النص السفلية للمربّع قليلاً حتى لا يلتصق العنوان الأكبر بالحافة. */
.rx-choice-body {
bottom: clamp(12px, 3.5vw, 18px);
}
/* --------------- source: assets/css/109-toast-contrast.css --------------- */
/* 🟣 [FIX-CC 2026-07-01] وضوح إشعارات الوضع الأبيض — نص داكن بدل الأبيض-على-الأبيض.
العلّة: 100-performance-mode.css يفرض على .h-toast خلفية بيضاء في الوضع الأبيض
(داخل @media اللمس) بينما يبقى لون النص فاتحاً (#f3e9ff) ⇒ أبيض على أبيض، ويمسح
تدرّج الأحمر/الأخضر فتضيع دلالة الخطأ/النجاح.
الحل: هذه الطبقة (109) تُحمَّل آخر التتالي — بلا @media — فتتغلّب على قاعدة الأداء
المحصورة باللمس وعلى الأساس في سطح المكتب معاً ⇒ إشعار الوضع الأبيض موحّد ومقروء
على كل الأجهزة. القواعد مقيّدة بـ[data-theme="light"] فقط ⇒ الثيمات الداكنة
(بنفسجي/علا) لا تتأثر إطلاقاً.
للإزالة: احذف سطر الخاص بهذا الملف من index.html + احذف هذا الملف ⇒ رجوع تام. */
:root[data-theme="light"] .h-toast{
background:#ffffff !important; /* خلفية بيضاء صريحة */
background-image:none !important; /* إلغاء أي صورة/تدرّج كوني في الوضع الفاتح */
color:#1f2937 !important; /* نص داكن مقروء */
border:1px solid rgba(15,23,42,.12) !important;
box-shadow:0 10px 30px -10px rgba(15,23,42,.22) !important;
}
/* خطأ — خلفية حمراء فاتحة + نص أحمر داكن + شريط جانبي أحمر */
:root[data-theme="light"] .h-toast.error{
background:#fef2f2 !important;
color:#991b1b !important;
border-color:rgba(220,38,38,.35) !important;
border-inline-start:3px solid #dc2626 !important;
}
:root[data-theme="light"] .h-toast.error::before{ color:#dc2626 !important; }
/* نجاح — خلفية خضراء فاتحة + نص أخضر داكن + شريط جانبي أخضر */
:root[data-theme="light"] .h-toast.success{
background:#f0fdf4 !important;
color:#166534 !important;
border-color:rgba(22,163,74,.35) !important;
border-inline-start:3px solid #16a34a !important;
}
:root[data-theme="light"] .h-toast.success::before{ color:#16a34a !important; }
/* --------------- source: assets/js/material-viewer/mv-viewer.css --------------- */
/* ════════════════════════════════════════════════════════════════════════════
* MATERIAL-VIEWER (MV) — أنماط عارض المحتوى (الطالب) · 2026-07-03 · طبقة 110
* ────────────────────────────────────────────────────────────────────────────
* يُحمَّل بعد أعلى طبقة (109) فيغلب. ألوان عبر var(--…) فقط ⇒ يحترم ثيمات الطالب
* (البنفسجي الافتراضي/العلا/الفاتح). RTL كامل. يعيد استخدام .course-card/.cc-badge/
* .category-wrapper القائمة. قابل للإزالة: احذف + مجلد material-viewer/.
* ════════════════════════════════════════════════════════════════════════════ */
#mvRoot { position: fixed; inset: 0; z-index: 2600; pointer-events: none; }
#mvRoot.show { pointer-events: auto; }
.mv-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
#mvRoot.show .mv-backdrop { opacity: 1; }
.mv-sheet {
position: absolute; inset: 0; margin-inline-start: auto; width: 100%; max-width: 760px;
background: var(--bg, #14101e); color: var(--text, #ece9f5);
display: flex; flex-direction: column;
transform: translateX(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
box-shadow: -8px 0 40px rgba(0,0,0,.4);
}
html[dir="rtl"] .mv-sheet, .mv-sheet { inset-inline-end: 0; }
#mvRoot.show .mv-sheet { transform: translateX(0); }
.mv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.mv-back, .mv-x { background: none; border: none; color: var(--muted, #b7add0); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; }
.mv-head-title { flex: 1; font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-body { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
.mv-desc { color: var(--muted, #b7add0); font-size: .9rem; line-height: 1.7; margin: 0 0 12px; }
.mv-empty, .mv-locked-note { text-align: center; padding: 30px 16px; color: var(--muted, #b7add0); }
.mv-locked-note i { color: var(--primary, #a855f7); margin-inline-end: 6px; }
.mv-skel-wrap { display: flex; flex-direction: column; gap: 10px; }
.mv-skel { height: 74px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%); background-size: 400% 100%; animation: mv-shimmer 1.2s ease infinite; }
@keyframes mv-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* بطاقة درس MV (تعيد استخدام .course-card + إضافات) */
.mv-lesson-card { cursor: pointer; }
.mv-lesson-card.mv-locked { opacity: .72; }
.mv-lock-i { color: var(--muted, #b7add0); font-size: .82rem; }
.mv-dur { color: var(--muted, #b7add0); display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
/* المشغّل */
.mv-player-wrap { position: relative; }
.mv-player-16x9 { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; }
.mv-player-16x9 iframe, .mv-player-16x9 video { width: 100%; height: 100%; display: block; }
.mv-player-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.mv-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mv-nav-pos { color: var(--muted, #b7add0); font-size: .82rem; }
.mv-player-title { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }
.mv-player-desc { color: var(--muted, #b7add0); font-size: .9rem; line-height: 1.7; margin-top: 6px; }
/* احتفال الإكمال */
.mv-celebrate { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mv-celebrate span { position: absolute; color: var(--primary, #a855f7); font-size: 1.4rem; animation: mv-pop 1.4s ease forwards; opacity: 0; }
@keyframes mv-pop { 0% { opacity: 0; transform: scale(.4) translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3) translateY(-40px); } }
@media (max-width: 560px) {
.mv-sheet { max-width: 100%; }
.mv-player-bar { gap: 6px; }
}
/* وضع الأداء: أوقف الوميض والانتقالات */
body.performance-mode .mv-skel { animation: none; }
body.performance-mode .mv-sheet, body.performance-mode .mv-backdrop { transition: none; }
body.performance-mode .mv-celebrate span { animation: none; opacity: 0; }
/* 🪽 [SILK-GLIDE 2026-07-17] الثيم الثلجي — إصلاحات تناسق الألوان (رقم 2)
الملف يستهلك متغيرات غير معرَّفة (--bg/--text/--muted/--border) فتنطبق قيم
سقوط داكنة في كل الثيمات — شيت داكن ملء الشاشة فوق الثيم الثلجي.
للتراجع: احذف هذه الكتلة. */
:root[data-theme="light"] .mv-sheet{background:#f6f7fb;color:#0f172a;box-shadow:-8px 0 40px rgba(15,23,42,.18);}
:root[data-theme="light"] .mv-head{border-bottom-color:#e2e8f0;}
:root[data-theme="light"] .mv-back,
:root[data-theme="light"] .mv-x,
:root[data-theme="light"] .mv-desc,
:root[data-theme="light"] .mv-empty,
:root[data-theme="light"] .mv-locked-note,
:root[data-theme="light"] .mv-lock-i,
:root[data-theme="light"] .mv-dur,
:root[data-theme="light"] .mv-nav-pos,
:root[data-theme="light"] .mv-player-desc{color:#475569;}
:root[data-theme="light"] .mv-locked-note i,
:root[data-theme="light"] .mv-celebrate span{color:#7c3aed;}
:root[data-theme="light"] .mv-skel{background:linear-gradient(90deg,rgba(15,23,42,.05) 25%,rgba(15,23,42,.10) 37%,rgba(15,23,42,.05) 63%);background-size:400% 100%;}
/* ─────────────── SEQUENTIAL-GATE 2026-07-11: كتلة مُلحقة يدوياً ───────────────
* المصدر: ذيل assets/css/waiting-lessons.css — أُلحقت هنا يدوياً لغياب node في
* بيئة البناء (المولّد tools/build-css.mjs). كل المحدّدات جديدة (.lesson-card--gate
* و .sg-*) فترتيب المصدر لا يتأثر. إعادة توليد الحزمة بـ node لاحقاً تنتج نفس
* القواعد من موضع المصدر الأصلي بلا تعارض. ─────────────── */
/* ▼ SEQUENTIAL-GATE ▼ ═══════════════════════════════════════════════════════
* البوابة التتابعية — طبقة القفل الموحّدة (الوهمي = وضع completion في الانتظار،
* والحقيقي = مقطع فعلي requires_completion). مكوّن واحد ⇒ تطابق بكسل-ببكسل.
* ساكنة بلا مؤقتات؛ الأنيميشن CSS خالص على transform/opacity فقط.
* ═══════════════════════════════════════════════════════════════════════════ */
/* البطاقة المبوَّبة (تُضاف للوهمي مع lesson-card--waiting وللحقيقي مع course-card) */
.lesson-card--gate{
cursor:pointer;user-select:none;
touch-action:manipulation; /* يمنع تكبير النقر المزدوج على الجوال (الباب السرّي) */
}
.lesson-card--gate .course-thumb{ position:relative;isolation:isolate;overflow:hidden; }
/* تحييد لمسات «الانتظار» على بطاقة البوابة الوهمية — لتطابق الحقيقية حرفياً:
* لا shimmer ولا تدرّج ::before ولا فلتر صورة ولا توهج hover ذهبي إضافي */
.lesson-card--waiting.lesson-card--gate .course-thumb::before,
.lesson-card--waiting.lesson-card--gate .course-thumb::after{ content:none; }
.lesson-card--waiting.lesson-card--gate .course-thumb img{ filter:none; }
.lesson-card--waiting.lesson-card--gate:hover{ box-shadow:none;transform:none; }
.lesson-card--waiting.lesson-card--gate:active{ transform:none; }
/* المقطع الحقيقي المبوَّب: أخفِ شارة التقدم وشريطه (لا معنى لهما خلف القفل —
* والوهمي بلا تقدم أصلاً ⇒ يحفظ التطابق) */
.lesson-card--gate .cc-badge,
.lesson-card--gate .h-progress{ display:none; }
/* طبقة القفل: تعتيم كوني متدرّج + ضبابية خفيفة (بديل تعتيم صريح أدناه للأضعف) */
.sg-gate-overlay{
position:absolute;inset:0;z-index:5;pointer-events:none;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, rgba(13,10,32,0.72), rgba(43,18,64,0.5) 55%, rgba(11,23,38,0.74));
-webkit-backdrop-filter:blur(3px);
backdrop-filter:blur(3px);
}
/* متصفحات بلا backdrop-filter: تعتيم صريح أقوى بدل الضبابية */
@supports not ((backdrop-filter:blur(3px)) or (-webkit-backdrop-filter:blur(3px))){
.sg-gate-overlay{ background:linear-gradient(135deg, rgba(13,10,32,0.86), rgba(43,18,64,0.72) 55%, rgba(11,23,38,0.88)); }
}
/* القفل الذهبي داخل حلقة تنبض بهدوء */
.sg-gate-lock{
width:42px;height:42px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fbbf24;font-size:1rem;
border:2px solid rgba(245,158,11,0.55);
background:rgba(11,17,32,0.55);
box-shadow:0 0 12px rgba(245,158,11,0.35);
animation:gateLockPulse 2.4s ease-in-out infinite;
/* 🪽 [SILK-GLIDE 2026-07-17 R2] مرساة لطبقة الوهج ::after (للتراجع: احذف السطر التالي مع كتلة ::after) */
position:relative;
}
/* 🪽 [SILK-GLIDE 2026-07-17 R2] الوهج النابض انتقل من box-shadow متحرك داخل gateLockPulse
(إعادة paint كل إطار) إلى ::after بظل مرسوم مسبقاً يتحرك opacity فقط (compositor-only).
للتراجع: احذف كتلة ::after وكيفريم gateLockGlow وأعد سطرَي box-shadow داخل gateLockPulse
(0 0 10px rgba(245,158,11,0.3) ↔ 0 0 20px rgba(245,158,11,0.55)). */
.sg-gate-lock::after{
content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
box-shadow:0 0 20px rgba(245,158,11,0.55);
opacity:0;
animation:gateLockGlow 2.4s ease-in-out infinite;
}
/* الشارة الموحّدة مكان «قريباً» — ذهبية بنفس عائلة شارات الانتظار */
.sg-gate-badge{
position:absolute;top:8px;right:8px;
background:linear-gradient(135deg,#f59e0b,#fbbf24);
color:#0b1726;font-weight:700;font-size:0.72rem;
padding:3px 10px;border-radius:10px;
box-shadow:0 2px 8px rgba(245,158,11,0.45);
letter-spacing:0.5px;white-space:nowrap;
}
/* سطر عبارة القفل تحت العنوان — نفسه في البطاقتين */
.sg-gate-msg{
margin-top:2px;font-size:0.78rem;font-weight:600;color:#fbbf24;
}
/* الفتح الحي: القفل يهتز اهتزازة خفيفة ثم تتلاشى الطبقة (gateUnlockSweep) */
.sg-gate-overlay.sg-unlocking{ animation:gateOverlayFade 0.9s ease forwards; }
.sg-gate-overlay.sg-unlocking .sg-gate-lock{ animation:gateUnlockSweep 0.9s ease forwards; }
/* 🪽 [SILK-GLIDE 2026-07-17 R2] أثناء الفتح يسكت الوهج (يطابق السلوك الأصلي: sweep كان
يدهس نبض box-shadow ويعيده للظل الساكن). للتراجع: احذف السطر التالي. */
.sg-gate-overlay.sg-unlocking .sg-gate-lock::after{ animation:none;opacity:0; }
/* القائمة الجانبية (drawer): عنصر مقفول بالتتابع */
.drawer-item.sg-locked{ opacity:0.55; }
.drawer-item .sg-drawer-lock{ color:#fbbf24;font-size:0.8rem;flex-shrink:0; }
/* 🪽 [SILK-GLIDE 2026-07-17 R2] gateLockPulse صار transform فقط — الوهج في gateLockGlow (::after)
للتراجع: أعد سطرَي box-shadow واحذف gateLockGlow */
@keyframes gateLockPulse{
0%,100%{ transform:scale(1); }
50% { transform:scale(1.06); }
}
@keyframes gateLockGlow{
0%,100%{ opacity:0; }
50% { opacity:1; }
}
@keyframes gateUnlockSweep{
0% { transform:rotate(0) scale(1); }
25% { transform:rotate(-10deg) scale(1.05); }
50% { transform:rotate(8deg) scale(1.1); }
100%{ transform:rotate(0) scale(1.35);opacity:0; }
}
@keyframes gateOverlayFade{
0%,45%{ opacity:1; }
100% { opacity:0; }
}
/* احترام تفضيل تقليل الحركة: طبقة ثابتة، والفتح إخفاء مباشر */
@media (prefers-reduced-motion: reduce){
.sg-gate-lock,
/* 🪽 [SILK-GLIDE 2026-07-17 R2] وهج ::after يتجمد أيضاً (opacity يبقى 0 — للتراجع: احذف السطر التالي) */
.sg-gate-lock::after,
.sg-gate-overlay.sg-unlocking,
.sg-gate-overlay.sg-unlocking .sg-gate-lock{ animation:none; }
.sg-gate-overlay.sg-unlocking{ opacity:0;transition:opacity 0.2s; }
}
/* وضع الأداء (html.perf-lite): صفر أنيميشن + بلا ضبابية (تعتيم صريح) */
html.perf-lite .sg-gate-lock,
/* 🪽 [SILK-GLIDE 2026-07-17 R2] وهج ::after مقتول كذلك على perf-lite (للتراجع: احذف السطر التالي) */
html.perf-lite .sg-gate-lock::after,
html.perf-lite .sg-gate-overlay.sg-unlocking,
html.perf-lite .sg-gate-overlay.sg-unlocking .sg-gate-lock{ animation:none; }
html.perf-lite .sg-gate-overlay{
-webkit-backdrop-filter:none;backdrop-filter:none;
background:linear-gradient(135deg, rgba(13,10,32,0.86), rgba(43,18,64,0.72) 55%, rgba(11,23,38,0.88));
}
html.perf-lite .sg-gate-overlay.sg-unlocking{ opacity:0; }
/* ▲ SEQUENTIAL-GATE ▲ */
/* 🪽 [SILK-GLIDE 2026-07-17 مراجعة عدائية] FOUC حرج — نسخة مصغّرة من موضعة
.exss-ov (exam-system-student.css) و.dlm-root (device-limit-modal.css):
كلا الملفين صار داخل bundle-lazy.css (B1، غير حاجب) بعد أن كانا ضمن الحزمة
الحاجبة الواحدة. الطبقتان تُفتحان أحياناً فوراً عند التحميل (رابط اختبار
عميق exs-exam-/exs-result-/exs-review- عبر handleDeep، أو نافذة حدّ الأجهزة
عند دخول محظور) — لو سبق ذلك وصول bundle-lazy.css، كانت الطبقة تُرسم بلا أي
تنسيق (كتلة عارية بلا position:fixed ولا خلفية). هذه النسخة المصغّرة (موضعة
+ إخفاء/إظهار فقط، لا تصميم كامل) تضمن ظهوراً صحيحاً حتى قبل وصول الحزمة
الكسولة؛ الأنماط الكاملة من الملفين الأصليين تتغلّب فور وصولها (لا تعارض —
نفس القيم حرفياً). للتراجع: احذف هذه الكتلة فقط (الملفان الأصليان لم يُمسّا).
*/
.exss-ov{position:fixed;inset:0;z-index:10000;background:#0a0f17;overflow:auto;display:none}
.exss-ov.on{display:block}
.dlm-root{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:16px;pointer-events:none}
.dlm-root.is-open{display:flex;pointer-events:auto}