/*
 * Theme/css/downloader.css — أنماطُ المُنزِّل وحده
 *
 * 🔗 كانت في `style.css` حتى 2026-09-08، وتحملها الصفحاتُ الخمس عشرة كلُّها —
 *    وسبعٌ منها ثابتةٌ لا حقلَ رابطٍ فيها ولا بطاقةَ نتيجة. والسببُ والقياسُ
 *    في لافتة `Theme/js/app.js`.
 *
 * ⛔ **وتُحمَّل بعد `style.css` لا قبلها**: هي امتدادٌ لها لا بديل، وترتيبُها
 *    بعدها يحفظ الغلبةَ عند تعادل التخصيص كما كانت داخل الملفّ الواحد.
 *
 * 🔴 **والنقلُ محافظ**: القاعدةُ لا تنتقل إلّا إذا كان مُحدِّدُها لا يطابق شيئاً
 *    في الصفحات الثماني التي لا تحمل مُنزِّلاً (اختُبر في متصفّحٍ حقيقيّ على كل
 *    واحدةٍ منها)، ثمّ قوبلت بصمةُ الأنماط المحسوبة قبل/بعد فكانت متطابقة.
 *    وأثرُ النقل الخاطئ صامت: الصفحةُ تُرسَم، بلا نمطٍ واحد.
 *
 * ⚠️ والرموزُ (`--*`) تبقى في `style.css` كلُّها — تُعرَّف مرّةً على `:root`
 *    وتُقرأ من هنا، فالمستندُ واحدٌ والورقتان جزآه.
 */



.downloader-box {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    /* كلُّ كرتٍ أبيضَ في الورقة يقرن ظلَّه بشعرةٍ (platform-card · faq-item ·
       reviews-summary · contact-card · result-card) — وهذه وحدها بلا حدّ،
       وظلُّها مُزاحٌ لأسفل فحافّتُها العليا بيضاءُ على #f8fafc. */
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-width: 800px;
    margin: 0 auto 40px;
}

.input-group {
    display: flex;
    gap: 12px;
    /* Increased padding */
    margin-bottom: 20px;
}

.input-group input {
    flex: 1;
    padding: 12px 20px;
    /* 🔴 مقاسٌ مطابقٌ لزرّ نتيجة التحميل (.btn-download): كان 16px/1.1rem
       فبدا الحقلُ مبالغاً فيه (2026-09-03 بطلب المالك). */
    border: 2px solid var(--border-color);
    border-radius: 12px;
    /* Smooth corners */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    /* Readable text */
    outline: none;
    transition-property: var(--tz-anim);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.input-group input:focus {
    border-color: var(--primary-color);
}

/* Result Section */
.result-container {
    max-width: 800px;
    margin: 0 auto;
    display: none;
    /* Hidden by default */
    margin-top: 30px;
}

.result-card {
    background: var(--white);
    padding: 20px;
    border-radius: 24px;
    /* Mobile rounded corners */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 360px;
    /* Mobile width constraint */
    margin: 0 auto;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    gap: 15px;
}

/* Landscape videos (YouTube watch, 16:9) — widen the card to a natural preview
   size instead of the phone-width (360px) portrait default. JS adds `landscape`
   from the real video dimensions; higher specificity keeps it wide on mobile too
   (there it just fills the screen width). */
.result-card.landscape {
    max-width: 600px;
}

.result-thumb {
    margin: 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    width: 100%;
    aspect-ratio: 9 / 16;
    /* TikTok Portrait Ratio */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.result-thumb img,
.result-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Remove black bars */
    display: block;
    border-radius: 16px;
}

.result-info {
    width: 100%;
}

.result-title {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* أزرار جودة التحميل — نفس هوية زر «اطلب الآن» من wwep (تدرّج بنفسجي + لمعة منزلقة). */
.btn-download {
    position: relative;
    overflow: hidden;
    background: var(--cta-gradient);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    /* 🔴 كان بلا `font-family`/`font-size` فيسقط إلى خطّ المتصفّح الافتراضي
       (13.33px غير Cairo) — عطلٌ صامت. الآن Cairo بمقاس موحّد مع الحقل والأزرار. */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: normal;   /* عربيّ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition-property: var(--tz-anim);
    transition-duration: 0.25s;
    transition-timing-function: ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-download::before {
    content: '';
    position: absolute;
    inset-inline-start: -100%;
    top: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transition: inset-inline-start 0.6s ease;
    pointer-events: none;
}

.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-download:hover::before {
    inset-inline-start: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .btn-download { transition: none; }

    .btn-download:hover { transform: none; }

    .btn-download::before { display: none; }
}


/*
 * حالةُ التجهيز على زرّ التنزيل — يضعها `tzDlWait` وترفعها إشارةُ أوّل بايت.
 *
 * 🔴 والإشارةُ نصٌّ ودوران لا **بهوت**: التسمية تصير «جارٍ التجهيز…» ومعها
 *    `tz-spin`، وهما ما يُقرأ فعلاً. وخفضُ العتامة كان سيمسّ تباينَ الأبيض
 *    على لون العلامة — والمشروع يقيس التباين ولا يفترضه، فلا يُخاطَر به
 *    من أجل إشارةٍ يحملها النصّ أصلاً.
 *
 * ⛔ وتُلغى حركةُ التمرير واللمعةُ المنزلقة: زرٌّ يرتفع تحت المؤشّر يقول
 *    «اضغطني» وهو لا يقبل ضغطاً — والنقرةُ الثانية ممنوعةٌ في app.js لأنها
 *    بعينها ما يهجر الطلبَ الأوّل.
 */
.btn-download.is-busy {
    cursor: progress;
}

.btn-download.is-busy:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-download.is-busy::before,
.btn-download.is-busy:hover::before {
    display: none;
}

/* Quality "signal bars" icon on each download button — a touch larger than a
   text glyph so the ascending bars read clearly against the green button. */
.btn-download .dl-qicon {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -0.28em;
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: none;
    font-weight: 600;
    /* Bold alert text */
}

/* Responsive */
@media (max-width: 768px) {

    .downloader-box {
        border-bottom: 1px solid #eee;
    }


    /* Or keep card style but compact */
    .downloader-box {
        padding: 20px;
        margin: 0 auto 30px;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        /* Lighter shadow */
        border: 1px solid var(--border-color);
    }


    .input-group {
        flex-direction: column;
        gap: 10px;
    }


    .input-group input {
        width: 100%;
        text-align: center;
        /* Center placeholder on mobile */
        font-size: 16px;
        /* Prevent iOS Zoom */
        padding: 14px;
    }


    .result-container {
        margin-top: 20px;
    }


    .result-card {
        width: 100%;
        max-width: 360px;
        /* Keep constraint */
        margin: 0 auto;
        border-radius: 20px;
    }
}


/* History Section */
/* History Section */
.history-container {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed var(--border-color);
}

.history-container h2 {
    font-size: var(--fs-6);
    margin-bottom: 20px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.history-item {
    display: flex;
    /* يلتفّ فقط حين لا يتّسع فعلاً: عند 320px مع تكبير نصٍّ ×2 كان أثاثُ
       الصفّ الثابت (مصغَّرة 60 + زرّ حذف 44 + سهم) يدفع الصفحةَ 20px،
       فيُقصّ طرفُ عمود الإجراءات. وعند المقاسات الطبيعية لا يلتفّ أصلاً. */
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    background: var(--white);
    padding: 12px;
    /* نصفُ قطرٍ متراكز: الخارجيّ = الداخليّ + الحشوة. المصغَّرةُ 8px داخل
       حشوةٍ 12px (قِيس أنها تُزيح 13px عن الزوايا الثلاث فتتشارك الزاوية
       فعلاً) ⟹ 20px، وهو نفسُ نصفِ قطرِ بطاقات المشروع الأخرى. */
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition-property: var(--tz-anim);
    transition-duration: 0.2s;
    transition-timing-function: ease;
    cursor: pointer;
    position: relative;
    overflow: clip;   /* الحصرُ لنصف القطر لا التمرير */
}

/* الفعلُ الأساسيّ للصفّ صار زرّاً أصلياً (2026-08-21): يرث مظهرَ الصفّ
   بالكامل فلا يتغيّر بكسلٌ واحد، ويكسب مسارَ لوحةِ المفاتيح وحلقةَ التركيز
   واسمَه المقروء. `min-inline-size: 0` ضرورية ليعمل قصُّ العنوان بالنقاط
   داخل عنصرِ مرونةٍ متداخل. */
/* كان تخطيطُ هذا العمود مكتوباً بـstyle في app.js — والتخطيطُ في الورقة
   لا في السكربت، وإلّا لم يُمكن تعديلُه باستعلامِ وسائط. */
.history-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.history-open {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-inline-size: 0;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-color);
}

.history-thumb {
    width: 60px;
    height: 80px;
    /* Portrait ratio hint */
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: #000;
}

.history-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-info {
    flex: 1;
    overflow: hidden;
}

.history-info .history-title {
    font-size: var(--fs-7);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
}

.history-info .date {
    display: block;
    font-size: 13px;   /* أرضية العربية — كان 0.75rem */
    color: var(--text-light); /* was #888 — failed WCAG AA contrast on white */
    margin-bottom: 2px;
}

.history-info .action-hint {
    font-size: 13px;   /* أرضية العربية — كان 0.75rem */
    color: var(--primary-color);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}

.history-item:hover .action-hint {
    opacity: 1;
}

.history-item:hover .arrow-icon {
    color: var(--primary-color);
}

/* حُذفت `.faq-item h4` و`.faq-item p` (2026-08-18): الأكورديون صار
   `<details><summary>` + `.faq-item-content` — والمحدِّدان يطابقان **صفر**
   عنصرٍ في الصفحات الأربع عشرة، وكانا يحملان `#222` و`#555` خامّين. */

/* Play Button Overlay */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    backdrop-filter: blur(4px);
    transition-property: var(--tz-anim);
    transition-duration: 0.3s;
    transition-timing-function: ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--primary-color);
    border-color: white;
}

.result-thumb:hover .play-overlay {
    background: var(--primary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   شبكةُ القصص — سناب شات (2026-09-03، بطلب المالك)
   ───────────────────────────────────────────────────────────────────────────
   قصّةٌ واحدة قد تكون عشرين لقطةً **مستقلّة** لا عشرين جودةً لفيديو واحد،
   فكانت تُعرَض قائمةَ أزرارٍ متطابقة («قصة 7/23») والاختيارُ فيها أعمى.
   فصارت صوراً: يراها المستخدم، ويختار ما يعجبه، ثمّ ينزّله.

   ⛔ عمودان على الجوّال وأربعةٌ على الحاسوب — بقرار المالك نصّاً، والحدُّ
      769px هو حدُّ الموقع القائم فلا يُخترع ثالث.
   ⛔ ولا تدرّجَ ولا توهّج: ألوانٌ مسطّحة، وأنصافُ أقطارٍ من السُّلَّم.
   ═══════════════════════════════════════════════════════════════════════════ */

.snap-grid {
    display: grid;
    /* **عمودان للّقطات على الجوّال وأربعةٌ على الحاسوب** (قرار المالك).
       ⛔ ولا تُخلط بأعمدة **التبويبات**: تلك ثلاثةٌ دائماً — ضابطٌ لا محتوى.
       والسقفُ 260px يمنع التضخّم: بلاه صارت الخليّةُ عند 768 عرضَها **314**. */
    grid-template-columns: repeat(2, minmax(0, 260px));
    justify-content: center;
    gap: 10px;
    margin: 4px 0 18px;
}

/* ⚠️ `minmax(0, 1fr)` لا `1fr`: الافتراضيّ `min-content`، فصورةٌ عريضة
      تمنع العمودَ من الانكماش وتدفع الصفحةَ أفقياً. */
@media (min-width: 769px) {
    .snap-grid { grid-template-columns: repeat(4, minmax(0, 260px)); gap: 14px; }
}


/* 🔴 الخليّةُ عمودان: وسائطٌ ثمّ زرّ — لا صندوقٌ واحدٌ يبتلعهما.
   كان الزرُّ شريطاً ملتصقاً بأسفل الصورة داخل صندوقٍ يقصّ، فبدا جزءاً من
   الفيديو لا فعلاً مستقلّاً، وضوابطُ المشغّل الأصليّة تجلس فوقه أثناء
   التشغيل فيتزاحمان على الحافّة نفسها. */
.snap-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.snap-media {
    position: relative;
    aspect-ratio: 9 / 16;                 /* اللقطاتُ رأسيّةٌ دائماً */
    border-radius: 14px;
    overflow: hidden;
    background: #0f172a;                  /* أرضيةٌ داكنة: الصورةُ تبرز، والغائبةُ لا تُبيّض الخليّة */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.snap-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* رقمُ اللقطة — أرقامٌ غربيّة وخانةٌ ثابتة كي لا يقفز العرضُ بين 9 و10. */
.snap-idx {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1.5;
}

/* رقاقةُ النوع — أيقونةٌ **ونصّ**: «صورة» أو «فيديو».
   الأيقونةُ وحدها كانت تُميّز اللقطةَ الساكنة من المتحرّكة بشكلٍ صغيرٍ داخل
   مربّعٍ 26px، وهو تمييزٌ يُقرأ بالتدقيق لا بالنظر. */
.snap-kind {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
}

.snap-kind-i { width: 13px; height: 13px; flex: none; }

/* زرُّ المعاينة — 48px، فوق أرضية اللمس 44.
 *
 * 🔴 **التوسيطُ بـ`inset: 0` و`margin: auto` لا بـ`inset-inline-start: 50%`
 *    وإزاحةٍ بالنسبة المئوية.** كان الأوّلُ يعتمد على اتّجاهين يجب أن يتّفقا:
 *      • `inset-inline-start` يتبع **`direction` المحسوبة**
 *      • و`translate(±50%)` كان يُختار بمُحدِّدٍ على **سمة `<html dir>`**
 *    وحين اختلفا انزاح الزرُّ **48 بكسلاً — عرضَه كاملاً** (مقيسٌ على الإنتاج
 *    في تسعة عروضٍ وخمسِ كثافات: الانزياحُ ‎-48‎ في كلّها بلا استثناء).
 *
 *    وقد اختلفا فعلاً: الإنتاج كان يخدم `<html dir="ltr">` (خللُ لغةٍ منفصل)
 *    بينما `body` على `direction: rtl` — فالتخطيطُ يمينيّ والمُحدِّدُ يساريّ.
 *
 * ✅ و`inset: 0` + `margin: auto` مع مقاسٍ صريح يوسّط في المحورين **بلا أيّ
 *    علاقةٍ بالاتّجاه ولا بنسبةٍ مئوية تُقرَّب** — فيستحيل أن يتفرّقا. */
.snap-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .94);
    color: var(--primary-dark);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: background var(--dur, .18s) ease, transform var(--dur, .18s) ease;
}

.snap-play-i { width: 22px; height: 22px; }
.snap-play:hover { background: #fff; }
/* ⛔ ولا `translate` في `:active` بعد اليوم: التوسيطُ لم يعد يمرّ بالتحويل،
   فأيُّ تحويلٍ هنا يزيح الزرَّ بدل أن يُصغّره. */
.snap-play:active { transform: scale(.94); }

/* زرُّ التحميل — عنصرٌ مستقلٌّ تحت الوسائط، بحوافّه وارتفاعِه. */
.snap-get {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--primary-color);     /* أبيضُ عليه = 5.70 */
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background var(--dur, .18s) ease, transform var(--dur, .18s) ease;
}

.snap-get:hover,
.snap-get:focus-visible { background: var(--primary-dark); color: #fff; }
/* لمعةٌ لحظيّةٌ عند الضغط لا توهّجٌ دائم. */
.snap-get:active { transform: scale(.97); }
.snap-get-i { width: 16px; height: 16px; flex: none; }

/* حلقةُ التركيز **داخل** صندوق الوسائط: `overflow: hidden` يقصّ أي إزاحةٍ
   موجبة، فيختفي أثرُ التركيز عمّن يتنقّل بلوحة المفاتيح. والزرُّ خارجَه الآن
   فيأخذ حلقتَه المعتادة. */
.snap-media :focus-visible {
}

.snap-get:focus-visible {
}

.snap-cell.is-playing .snap-media {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);
}

/* صورةٌ لم تُحمَّل: تبقى الخليّةُ مقروءةً بالرقم والنوع والزرّ. */
.snap-cell.is-noshot .snap-shot { display: none; }


/* 🔴 البطاقةُ مسقوفةٌ بـ360px لأنها بُنيت لمعاينةٍ **واحدة** رأسية. وشبكةُ
   القصص داخلها تجعل الخليّةَ **69 بكسلاً** على شاشة 1440 (مقيس) — أي صورةٌ
   لا تُرى، وهو نقضُ الغرض كلِّه. فتُوسَّع البطاقةُ حين تحمل شبكةً فقط. */
.result-card.has-snap-grid { max-width: 100%; }

/* ⚠️ والمشغّلُ يبقى بمقاسه: `width:100%` داخل بطاقةٍ عريضة يمطّ لقطةً
   رأسيةً إلى 800px. */
.result-card.has-snap-grid .result-thumb {
    max-width: 360px;
    margin-inline: auto;
}

/* ── ترويسةُ حساب سناب شات وتبويباتُه ───────────────────────────────────────
   ثلاثُ مجموعاتٍ مستقلّة (القصص · الأضواء · القصص المختارة)، وعرضُها متتابعةً
   يجعل الوصولَ إلى الثالثة تمريراً فوق مئتَي بطاقة. فتُقسَّم تبويباتٍ.        */

/* ترويسةُ الحساب — الصورةُ في **بداية السطر** (يمينُ الشاشة في العربية)
   والاسمُ بعدها، والمعرّفُ تحته. نفسُ ترتيب ملفّ سناب شات نفسه. */
.snap-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin: 4px 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--white);
}

/* حلقةٌ حول الصورة كحلقة القصة في التطبيق — بـ`box-shadow` لا `border`
   كي لا تُنقِص قطرَ الصورة نفسها. */
.snap-av {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--secondary-color);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
    margin: 2px;                          /* موضعٌ للحلقة كي لا تُقصّ */
}

/*
 * 🔴 **`text-align: right` فيزيائيّةٌ عمداً — والمنطقيّةُ تكسرها هنا.**
 *
    الحاوية `.download-options` تضبط `text-align: center`، فيرثها هذا
 *    الصندوق. والاسمُ يملأ عرضَه فيبدو سليماً، أمّا المعرّفُ الأقصر
 *    فيُوسَّط داخل الصندوق نفسِه — فينفصل عن الصورة. قيس على الإنتاج:
 *    الاسمُ ينتهي عند 601 (‏على بُعد 16 من الصورة) والمعرّفُ عند **538**،
 *    أي **63 بكسلاً** بعيداً عنها. والمالكُ هو من رآه.
 *
 * ⚠️ **و`text-align: start` تجعله أسوأ**: `.snap-handle` عليه
 *    `direction: ltr` ليُقرأ المعرّفُ اللاتينيّ صحيحاً، و`start` تتبع
 *    اتّجاهَ **العنصر نفسِه** لا اتّجاهَ الصفحة — فقيس أنّها تدفعه إلى
 *    اليسار: الفجوةُ **143** بدل 63. وهو عينُ الدرس الموثّق: لا يُحاذى
 *    بخاصّيةٍ تقرأ الاتّجاهَ من مصدرٍ غير الذي يحكم الأخرى.
 *
 * 📐 وبعد الإصلاح: الاسمُ والمعرّف ينتهيان عند **601** كلاهما،
 *    وعلى بُعد **16** من الصورة — حافّةٌ واحدة.
 */
.snap-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: right; }

/*
 * ⛔ **صنفٌ يُستعمَل يُعرَّف**: صنفٌ مخترَعٌ لا يرمي خطأً في وحدة التحكّم —
 *    يُرسَم العنصرُ بأنماطه الافتراضية فيبدو مكسوراً بلا سببٍ ظاهر.
 *    (‏الدرسُ الموثّق: `.ov-tag` و`.d-none`.)
 */
.snap-empty {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.snap-name {
    font-weight: 800;
    font-size: 1.12rem;
    line-height: 1.35;
    color: var(--text-color);            /* 14.68 على الأبيض */
    overflow-wrap: anywhere;
}

/* ⚠️ المعرّفُ لاتينيّ داخل سياقٍ عربيّ: `dir="ltr"` على العنصر و`<bdi>`
   حولَ النصّ يُبقيان علامةَ @ في أوّله لا في آخره. */
.snap-handle {
    font-size: .86rem;
    color: var(--text-light);            /* 5.05 على الأبيض */
    font-weight: 600;
}

.snap-tabs {
    flex-wrap: wrap;
    margin: 0 0 14px;
}

.snap-tab {
    /* 🔴 `flex` لا `inline-flex`، و`justify-content: center` صراحةً.
     *
     *    التبويباتُ صارت خلايا شبكةٍ متساوية العرض (ثلثٌ لكلٍّ)، فالكبسولةُ
     *    أعرضُ من نصّها دائماً. و`align-items: center` توسّط **رأسياً فقط**؛
     *    والمحورُ الأفقيُّ يبقى على `flex-start` — أي النصُّ ملتصقٌ ببداية
     *    الكبسولة (يمينُها في العربية) لا وسطِها.
     *
     * ⚠️ و`text-align: center` **لا تُصلحها**: النصُّ عنصرٌ مرن داخل حاويةٍ
     *    مرنة، فمحاذاتُه يحكمها `justify-content` لا `text-align`. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;                    /* أرضيةُ اللمس */
    padding: 0 10px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--text-color);
    font-size: .86rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur, .18s) ease, border-color var(--dur, .18s) ease;
}

.snap-tab:hover { border-color: var(--primary-color); }

.snap-tab.is-on {
    background: var(--primary-color);    /* أبيضُ عليه = 5.70 */
    border-color: var(--primary-color);
    color: #fff;
}

.snap-tab:focus-visible {
}

/* ⚠️ `[hidden]` صريحةٌ مع أيّ صنفٍ يضبط `display`: قاعدةُ الصنف تغلب قاعدةَ
   الوكيل `[hidden]{display:none}`، فيبقى اللوحُ المخفيّ مرسوماً وقابلاً
   للتنقّل — درسٌ مدفوعٌ في هذا المشروع مع `.rm-toggle`. */
.snap-pane { display: block; }
.snap-pane[hidden] { display: none !important; }

/* ⛔ ولا مشغّلَ كبيرٌ فوق الشبكة (قرار المالك 2026-09-03): الشبكةُ نفسُها هي
   العرض، والتشغيلُ يقع **داخل البطاقة** حيث نظرُ المستخدم. ومشغّلٌ ثانٍ فوقها
   يعني قفزةً إلى أعلى الصفحة ثمّ عودةً للبحث عن الموضع. */
.result-card.has-snap-grid .result-thumb { display: none; }

/* عنصرُ الفيديو يحلّ محلّ الصورة داخل الخليّة بنفس المقاس والقصّ. */
video.snap-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #0f172a;
}

/* ⚠️ وأثناء التشغيل تُخفى الرقاقاتُ: ضوابطُ المشغّل الأصليّة تقع في أسفل
   العنصر ورقاقةُ النوع في أعلاه، فلا تتزاحمان — والرقمُ يبقى للتوجّه. */
.snap-cell.is-playing .snap-kind { display: none; }

/* ── الشبكةُ على الجوّال: ثلاثةُ أعمدةٍ تحتاج عرضاً، والحشواتُ المتداخلة تأكله ──
   قيس عند 320: 320 ⟵ حشوةُ الحاوية 15×2 ⟵ صندوقُ المُنزِّل 20×2 ⟵ البطاقة
   20×2 = **206 بكسلاً فقط** لثلاثة أعمدة (خليّةٌ 63px). فتُضيَّق الحشواتُ
   **للشبكة وحدها** — وبقيّةُ المنصّات على حشوتها كما هي.
   ⚠️ و`:has()` هي ما يسمح بتضييق الجدّ من حالة الحفيد؛ ومتصفّحٌ لا يدعمها
      يُبقي الحشوةَ الحالية — تدهورٌ لطيف لا كسر. */
@media (max-width: 768px) {
    .result-card.has-snap-grid { padding-inline: 8px; }

    .downloader-box:has(.result-card.has-snap-grid) { padding-inline: 10px; }


    /* رقاقةُ النوع أيقونةٌ فقط: نصُّها 61px وعرضُ الخليّة 63 عند 320 —
       فتغطّي الصورةَ التي جاءت لتوصفها. */
    .snap-kind { padding: 0; width: 24px; justify-content: center; }

    .snap-kind-txt { display: none; }
}


/* ── التبويباتُ الثلاثة في صفٍّ واحد: ثلاثةُ أعمدةٍ متساوية ────────────────────
   كان `flex-wrap` يُنزل «القصص المختارة» سطراً ثانياً على الجوّال، فيبدو
   التبويبُ الثالث تابعاً لا نظيراً. والأعمدةُ المتساوية تجعل الثلاثةَ صفّاً
   واحداً في كل عرض. ⛔ ولا علاقةَ لها بأعمدة الشبكة (عمودان للّقطات). */
.snap-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 768px) {
    /* التسميةُ وحدها الآن (بلا عدد)، وتلتفّ سطرين إن لزم: «القصص المختارة»
       تحتاج ~88px والثلثُ عند 320 هو ~85 — فالالتفافُ يُبقي الصفَّ واحداً. */
    .snap-tab {
        padding: 8px 4px;
        font-size: .78rem;
        line-height: 1.3;
        text-align: center;
        white-space: normal;
    }

    .snap-tabs { gap: 6px; }
}


/* ⛔ ولا عنوانَ نصّيّ فوق ترويسة الحساب (قرار المالك 2026-09-03): الترويسةُ
   تحمل الاسمَ والمعرّفَ والصورة، والسطرُ الطويل فوقها («قصص @… (312 قصة +
   30 ضوء + 1497 مختارة) — عرض أول 100 من كل قسم») يكرّر الهويةَ ويزحم الشكل.

   ⚠️ **ويُخفى بصرياً لا يُحذف**: الحاويةُ `aria-live`، فحذفُه يُسكِت إعلانَ
      «ماذا وُجد» لمن لا يرى الشاشة. فيبقى في شجرة الوصول بنفس أسلوب `.sr-only`
      المستعمل في الموقع — وهو الفرقُ بين تنظيفٍ وإسقاطِ ميزة. */
.result-card.has-snap-grid .result-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}