/* ============================================================
   design-system.css — نظام تصميم رصد الموحّد
   ------------------------------------------------------------
   يُحمَّل آخر ملفات الأنماط (بعد app.css/app-ux.css/tv-pro.css/tailwind.css)
   فيوحّد الرموز (tokens) والمكوّنات الأساسية لكل الشاشات دفعة واحدة، بدل
   تعديل مئات القواعد المتفرقة المكتوبة عبر السنين في الملفات الأخرى.

   المبادئ:
   • الأحمر هو هوية رصد ولون «العاجل» — يبقى اللون الأساسي، ويُستخدم بتقشّف
     (إجراء رئيسي واحد، الحالة النشطة، العاجل) كي لا يفقد معناه.
   • البنفسجي لون ثانوي محجوز لطبقة الذكاء/التحليل (إحاطة رصد، التحليلات).
   • المحايدات رمادية باردة خفيفة، وتباين النص الثانوي ≥ 4.5:1 (WCAG AA)
     في المظهرين — القيم القديمة (#94A3B8 نهاراً، #475569 ليلاً) كانت دونه.
   • الحركة قصيرة (120–320ms) وتُلغى كلياً مع prefers-reduced-motion.
   • المظهر: تلقائي/فاتح/داكن — html[data-theme] يضبطه theme-init.js.

   الأقسام:
    1. الرموز (Tokens)             9. الوسوم والشارات
    2. ربط المتغيرات القديمة         10. البطاقات
    3. الأساس والطباعة              11. القوائم (صفحة المزيد)
    4. الأيقونات                    12. النوافذ المنبثقة والأوراق السفلية
    5. الترويسة                     13. التنبيهات (Toast)
    6. شريط التنقل                  14. هياكل التحميل والحالات الفارغة
    7. الأزرار                      15. الصفحات والانتقالات
    8. الحقول والمفاتيح والمنزلقات   16. تقليل الحركة
   ============================================================ */


/* ============================================================
   1. الرموز (Tokens)
   ============================================================ */
:root {
    /* ── الخط ── */
    --ds-font: 'Readex Pro', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ds-font-num: 'Readex Pro', system-ui, sans-serif;

    /* سلّم الطباعة (موبايل) — أحجام بـrem كي تحترم تكبير الخط في النظام
       ويضربها --user-font-scale (إعداد «حجم الخط») في النصوص الطويلة */
    --ds-fs-display: 1.625rem;  /* 26 — عناوين الصفحات الكبيرة */
    --ds-fs-h1:      1.3125rem; /* 21 */
    --ds-fs-h2:      1.125rem;  /* 18 */
    --ds-fs-h3:      1rem;      /* 16 */
    --ds-fs-body:    0.9375rem; /* 15 */
    --ds-fs-sm:      0.84375rem;/* 13.5 */
    --ds-fs-xs:      0.75rem;   /* 12 */
    --ds-fs-2xs:     0.6875rem; /* 11 */

    --ds-lh-tight: 1.35;
    --ds-lh-snug:  1.5;
    --ds-lh-body:  1.75;  /* العربية تحتاج ارتفاع سطر أوسع من اللاتينية */

    --ds-fw-regular: 400;
    --ds-fw-medium:  500;
    --ds-fw-semi:    600;
    --ds-fw-bold:    700;

    /* ── المسافات (شبكة 4px) ── */
    --ds-sp-1: 4px;
    --ds-sp-2: 8px;
    --ds-sp-3: 12px;
    --ds-sp-4: 16px;
    --ds-sp-5: 20px;
    --ds-sp-6: 24px;
    --ds-sp-8: 32px;
    --ds-sp-10: 40px;

    /* ── الزوايا ── */
    --ds-r-xs:   6px;
    --ds-r-sm:   10px;
    --ds-r-md:   14px;
    --ds-r-lg:   18px;
    --ds-r-xl:   24px;
    --ds-r-pill: 999px;

    /* ── الأحجام ── */
    --ds-tap: 44px;          /* أدنى مساحة لمس */
    --ds-ctl-h: 44px;        /* ارتفاع الأزرار/الحقول الافتراضي */
    --ds-ctl-h-sm: 36px;
    --ds-icon: 20px;
    --ds-icon-sm: 16px;

    /* ── الحركة ── */
    --ds-dur-1: 120ms;   /* ضغط */
    --ds-dur-2: 180ms;   /* تغيّر حالة */
    --ds-dur-3: 240ms;   /* دخول عنصر */
    --ds-dur-4: 320ms;   /* ورقة سفلية/نافذة */
    --ds-ease-out:    cubic-bezier(.2, .8, .2, 1);
    --ds-ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --ds-ease-in:     cubic-bezier(.4, 0, 1, 1);
    --ds-ease-spring: cubic-bezier(.34, 1.36, .64, 1);

    /* ── الطبقات ── */
    --ds-z-header: 50;
    --ds-z-nav: 100;
    --ds-z-toast: 100000;

    /* ── الألوان: فاتح ── */
    --ds-bg:          #F5F6F8;
    --ds-surface:     #FFFFFF;
    --ds-surface-2:   #F0F2F5;
    --ds-surface-3:   #E6E9EE;
    --ds-text:        #101318;
    --ds-text-2:      #4B5563;
    --ds-text-3:      #6B7280;   /* 4.8:1 على الأبيض */
    --ds-text-4:      #9CA3AF;   /* نص عنصر معطّل/placeholder فقط */
    --ds-border:        rgba(16, 19, 24, .08);
    --ds-border-strong: rgba(16, 19, 24, .14);
    --ds-overlay:       rgba(10, 12, 16, .48);

    --ds-brand:        #DC2626;
    --ds-brand-hover:  #C81E1E;
    --ds-brand-press:  #B91C1C;
    --ds-brand-fg:     #C81E1E;               /* نص/أيقونة باللون الأحمر فوق سطح فاتح — 5.9:1 */
    --ds-brand-soft:   rgba(220, 38, 38, .08);
    --ds-brand-soft-2: rgba(220, 38, 38, .14);
    --ds-on-brand:     #FFFFFF;

    --ds-insight:      #6D28D9;
    --ds-insight-soft: rgba(109, 40, 217, .08);
    --ds-success:      #15803D;
    --ds-success-soft: rgba(22, 163, 74, .10);
    --ds-warning:      #B45309;
    --ds-warning-soft: rgba(217, 119, 6, .12);
    --ds-danger:       #DC2626;
    --ds-danger-soft:  rgba(220, 38, 38, .10);
    --ds-info:         #1D4ED8;
    --ds-info-soft:    rgba(37, 99, 235, .10);

    /* ── الظلال: ناعمة ومتدرجة، تُستبدل غالباً بحدود في الداكن ── */
    --ds-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --ds-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --ds-shadow-md: 0 6px 16px -4px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --ds-shadow-lg: 0 16px 40px -12px rgba(16, 24, 40, .18), 0 4px 10px -4px rgba(16, 24, 40, .06);
    --ds-focus-ring: 0 0 0 3px rgba(220, 38, 38, .28);

    --ds-glass:        rgba(255, 255, 255, .82);
    --ds-glass-border: rgba(16, 19, 24, .06);
    --ds-skeleton:     #ECEEF2;
    --ds-skeleton-hi:  #F6F7F9;
}

/* ── الألوان: داكن (يتبع الجهاز ما لم يُفرض الفاتح) ── */
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        --ds-bg:          #0B0E13;
        --ds-surface:     #141820;
        --ds-surface-2:   #1B2029;
        --ds-surface-3:   #252B36;
        --ds-text:        #F3F4F6;
        --ds-text-2:      #B4BCC8;
        --ds-text-3:      #8B95A5;   /* 5.9:1 على السطح الداكن */
        --ds-text-4:      #5F6978;
        --ds-border:        rgba(255, 255, 255, .07);
        --ds-border-strong: rgba(255, 255, 255, .13);
        --ds-overlay:       rgba(0, 0, 0, .62);

        --ds-brand:        #E5484D;
        --ds-brand-hover:  #EC5D5E;
        --ds-brand-press:  #CE2C31;
        --ds-brand-fg:     #FF8589;
        --ds-brand-soft:   rgba(229, 72, 77, .13);
        --ds-brand-soft-2: rgba(229, 72, 77, .22);

        --ds-insight:      #B197FC;
        --ds-insight-soft: rgba(151, 117, 250, .14);
        --ds-success:      #4ADE80;
        --ds-success-soft: rgba(74, 222, 128, .12);
        --ds-warning:      #FBBF24;
        --ds-warning-soft: rgba(251, 191, 36, .13);
        --ds-danger:       #FF6369;
        --ds-danger-soft:  rgba(229, 72, 77, .15);
        --ds-info:         #70B8FF;
        --ds-info-soft:    rgba(112, 184, 255, .13);

        --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
        --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
        --ds-shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .5);
        --ds-shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, .65);
        --ds-focus-ring: 0 0 0 3px rgba(229, 72, 77, .38);

        --ds-glass:        rgba(11, 14, 19, .82);
        --ds-glass-border: rgba(255, 255, 255, .06);
        --ds-skeleton:     #1B2029;
        --ds-skeleton-hi:  #242A34;
    }
}
/* وضع التلفاز ووضع القيادة داكنان دائماً بصرف النظر عن مظهر التطبيق — نفس
   الرموز الداكنة عليهما كي ترثها كل المكوّنات المبنية على --ds-* داخلهما.
   الاستثناء: سمة «رصد» في التلفاز (data-theme="app") ترث رموز الجذر، أي
   مظهر التطبيق نفسه (فاتح/داكن). لا تُفرض على body[data-tv] كي لا ترثها
   الطبقة منه — #tvOverlay يغطي الشاشة كلها أصلاً. */
:root:where([data-theme="dark"]),
#tvOverlay:not([data-theme="app"]),
#cmdOverlay {
    --ds-bg:          #0B0E13;
    --ds-surface:     #141820;
    --ds-surface-2:   #1B2029;
    --ds-surface-3:   #252B36;
    --ds-text:        #F3F4F6;
    --ds-text-2:      #B4BCC8;
    --ds-text-3:      #8B95A5;
    --ds-text-4:      #5F6978;
    --ds-border:        rgba(255, 255, 255, .07);
    --ds-border-strong: rgba(255, 255, 255, .13);
    --ds-overlay:       rgba(0, 0, 0, .62);

    --ds-brand:        #E5484D;
    --ds-brand-hover:  #EC5D5E;
    --ds-brand-press:  #CE2C31;
    --ds-brand-fg:     #FF8589;
    --ds-brand-soft:   rgba(229, 72, 77, .13);
    --ds-brand-soft-2: rgba(229, 72, 77, .22);

    --ds-insight:      #B197FC;
    --ds-insight-soft: rgba(151, 117, 250, .14);
    --ds-success:      #4ADE80;
    --ds-success-soft: rgba(74, 222, 128, .12);
    --ds-warning:      #FBBF24;
    --ds-warning-soft: rgba(251, 191, 36, .13);
    --ds-danger:       #FF6369;
    --ds-danger-soft:  rgba(229, 72, 77, .15);
    --ds-info:         #70B8FF;
    --ds-info-soft:    rgba(112, 184, 255, .13);

    --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --ds-shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .5);
    --ds-shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, .65);
    --ds-focus-ring: 0 0 0 3px rgba(229, 72, 77, .38);

    --ds-glass:        rgba(11, 14, 19, .82);
    --ds-glass-border: rgba(255, 255, 255, .06);
    --ds-skeleton:     #1B2029;
    --ds-skeleton-hi:  #242A34;
}


/* ============================================================
   2. ربط المتغيرات القديمة بالرموز
   كل القواعد القديمة المكتوبة بـ var(--bg-card)/var(--fg2)/var(--accent)...
   ترث النظام الجديد تلقائياً في المظهرين. القيم الداكنة لهذه المتغيرات في
   app.css (داخل @media) تُلغى هنا لأن هذا الملف يأتي بعده بنفس الأولوية.
   ============================================================ */
:root,
:root:where([data-theme]) {
    --bg:           var(--ds-bg);
    --bg-body:      var(--ds-bg);
    --bg-card:      var(--ds-surface);
    --bg-card2:     var(--ds-surface-2);
    --bg2:          var(--ds-surface-2);
    --bg3:          var(--ds-surface-3);
    --fg:           var(--ds-text);
    --fg2:          var(--ds-text-2);
    --fg3:          var(--ds-text-3);
    --accent:       var(--ds-brand);
    --accent-light: var(--ds-brand-soft);
    --border:       var(--ds-border);
    --radius:       16px;
    --radius-xs:    var(--ds-r-xs);
    --radius-sm:    var(--ds-r-sm);
    --radius-lg:    16px;
    --shadow:       var(--ds-shadow-sm);
    --glass-bg:     var(--ds-glass);
    --glass-border: var(--ds-glass-border);
}
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        --bg: var(--ds-bg); --bg-body: var(--ds-bg); --bg-card: var(--ds-surface); --bg-card2: var(--ds-surface-2);
        --fg: var(--ds-text); --fg2: var(--ds-text-2); --fg3: var(--ds-text-3);
        --border: var(--ds-border); --shadow: var(--ds-shadow-sm);
        --glass-bg: var(--ds-glass); --glass-border: var(--ds-glass-border);
    }
}


/* ============================================================
   3. الأساس والطباعة
   ============================================================ */
html,
html:where([data-theme]),
body {
    background: var(--ds-bg);
}
@media (prefers-color-scheme: dark) {
    html:where(:not([data-theme="light"])),
    :where(html:not([data-theme="light"])) body { background: var(--ds-bg); }
}

body {
    font-family: var(--ds-font);
    color: var(--ds-text);
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
}

/* الكردية تبقى على Noto Sans Arabic (راجع app.css — Readex Pro لا يغطي حروفها) */
html[lang="ku"] body { font-family: 'Noto Sans Arabic', system-ui, sans-serif; }

/* تباعد الحروف يكسر اتصال الحروف العربية في بعض المحرّكات ويبدو «مفككاً» —
   يُلغى على كل مكوّنات النص العربية الشائعة (يبقى متاحاً للإنجليزية) */
html:not([lang="en"]) :is(
    .site-title, .nav-brand-title, .news-card-title, .tag, .cat, .urgency-badge,
    .fchip, .ufg-summary, .btn-red, .btn-outline, .nav-btn, .more-row-text b,
    .settings-card .text-sm, .modal-inner h2, .modal-inner h3, .offline-top-bar
) { letter-spacing: 0; }

::selection { background: color-mix(in srgb, var(--ds-brand) 35%, transparent); color: inherit; }

/* الأرقام المتغيّرة (عدّادات، أوقات) بعرض ثابت كي لا «ترتجف» أثناء التحديث */
.time-elapsed, .ds-num, [id$="Count"], [id$="Counter"], .new-badge-body {
    font-variant-numeric: tabular-nums;
}

/* حلقة تركيز واضحة لمستخدمي لوحة المفاتيح فقط (لا تظهر عند اللمس) */
:where(button, a, [role="button"], [tabindex], input, select, textarea, summary):focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
    border-radius: var(--ds-r-sm);
}
:where(.nav-btn):focus-visible { border-radius: var(--ds-r-md); }

/* أشرطة تمرير رفيعة هادئة على سطح المكتب بدل شريط النظام العريض */
@media (hover: hover) and (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: var(--ds-surface-3) transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: var(--ds-surface-3);
        border: 3px solid transparent;
        background-clip: padding-box;
        border-radius: 999px;
    }
    *::-webkit-scrollbar-thumb:hover { background-color: var(--ds-text-4); }
}
/* على الهاتف: لا شريط تمرير مرئي للحاوية الرئيسية (كان يظهر شريطاً رمادياً عريضاً) */
@media (hover: none), (pointer: coarse) {
    #appScroll { scrollbar-width: none; }
    #appScroll::-webkit-scrollbar { display: none; }
}

/* انتقال لوني مؤقت أثناء تبديل المظهر فقط (theme-init.js يضيف الكلاس 320ms) */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: background-color var(--ds-dur-3) var(--ds-ease-in-out),
                border-color var(--ds-dur-3) var(--ds-ease-in-out),
                color var(--ds-dur-3) var(--ds-ease-in-out),
                fill var(--ds-dur-3) var(--ds-ease-in-out) !important;
}

/* فئات طباعة مساعدة للمكوّنات الجديدة */
.ds-title   { font-size: var(--ds-fs-h2); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); color: var(--ds-text); }
.ds-subtitle{ font-size: var(--ds-fs-sm); line-height: var(--ds-lh-snug); color: var(--ds-text-3); }
.ds-label   { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-2); }
.ds-overline{ font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-bold); color: var(--ds-text-3); }


/* ============================================================
   4. الأيقونات — مجموعة خطية واحدة (نمط Lucide: stroke 2، زوايا دائرية)
   الرموز معرَّفة مرة واحدة في index.html (#dsIcons) وتُستخدم بـ:
   <svg class="i"><use href="#i-name"/></svg>
   ============================================================ */
.i {
    width: var(--ds-icon);
    height: var(--ds-icon);
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.i-sm { width: var(--ds-icon-sm); height: var(--ds-icon-sm); }
.i-xs { width: 13px; height: 13px; stroke-width: 2.2; }
.i-lg { width: 24px; height: 24px; }
.i-xl { width: 32px; height: 32px; stroke-width: 1.75; }

/* مربّع أيقونة موحّد (قوائم، إعدادات، حالات فارغة) */
.ds-icon-tile {
    width: 36px;
    height: 36px;
    border-radius: var(--ds-r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ds-surface-2);
    color: var(--ds-text-2);
}
.ds-icon-tile.is-brand   { background: var(--ds-brand-soft);   color: var(--ds-brand-fg); }
.ds-icon-tile.is-insight { background: var(--ds-insight-soft); color: var(--ds-insight); }
.ds-icon-tile.is-success { background: var(--ds-success-soft); color: var(--ds-success); }
.ds-icon-tile.is-warning { background: var(--ds-warning-soft); color: var(--ds-warning); }
.ds-icon-tile.is-info    { background: var(--ds-info-soft);    color: var(--ds-info); }


/* ============================================================
   5. الترويسة (App Bar)
   ============================================================ */
header {
    background: var(--ds-glass);
    border-bottom: 1px solid var(--ds-border);
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
}
/* شريط الفلترة جزء من نفس السطح الزجاجي (كان بخلفية --bg مختلفة فيبدو شريطين) */
.unified-filter-bar { background: transparent; }

/* ── سطر أدوات واحد: [العنوان] [الفلاتر ··· تمرير أفقي] [الأزرار] ──
   كانت الترويسة صفّين: الأزرار وحدها يساراً ثم الفلاتر وحدها يميناً، فيبقى
   فراغ كبير في نصف كل صف. الصفّان صارا display:contents فتصطف عناصرهما في
   شبكة واحدة؛ #filterSection يخفيه router.js خارج الأخبار (style.display)
   فتختفي الفلاتر معه، ويبقى البحث صفاً ثانياً يظهر عند فتحه فقط. */
header.app-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "title filters actions" "search search search";
    align-items: center;
    column-gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
    min-height: 56px;
}
header.app-header > .hdr-row,
header.app-header > #filterSection { display: contents; }
header.app-header #pageTitleWrap { grid-area: title; min-width: 0; }
header.app-header #homeActions   { grid-area: actions; }
header.app-header #unifiedFilterBar {
    grid-area: filters;
    min-width: 0;
    padding: 2px 0 !important;
    /* تلاشٍ خفيف عند حافة النهاية يدلّ على وجود المزيد للتمرير */
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 18px), transparent);
}
html[dir="ltr"] header.app-header #unifiedFilterBar {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
header.app-header #searchBar { grid-area: search; padding: 8px 0 2px; }

/* حين تتوسّع مجموعة فلترة (خيارات التصنيف/العرض/المنطقة) على الشاشات الضيقة:
   تنزاح الأزرار خارج السطر نحو الحافة فتأخذ الخيارات العرض كاملاً، وتعود
   فور اختيار خيار أو النقر خارج الشريط أو Esc (app-ux.js: collapseAllFilterGroups) */
header.app-header #homeActions {
    max-width: 240px;
    overflow: visible;
    transition: max-width var(--ds-dur-3) var(--ds-ease-out), opacity var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-3) var(--ds-ease-out);
}
@media screen and (max-width: 768px) {
    header.app-header:has(.ufg.ufg-expanded) #homeActions {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateX(-24px);
        pointer-events: none;
    }
    header.app-header:has(.ufg.ufg-expanded) { column-gap: 6px; }
    html[dir="ltr"] header.app-header:has(.ufg.ufg-expanded) #homeActions { transform: translateX(24px); }
}
/* ── الصفحة الرئيسية: مفتاح «نظرة عامة / الأخبار» في وسط السطر الأول ──
   (frontend/src/modules/homeView.js). الأعمدة 1fr·auto·1fr تُبقي المفتاح في
   المنتصف تماماً أياً كان عرض العنوان أو الأزرار، والفلاتر صف ثانٍ بعرض كامل
   يظهر في «الأخبار» وحدها. خارج الرئيسية (لا .is-home) تبقى الشبكة السابقة. */
header.app-header.is-home {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "title switch actions" "filters filters filters" "search search search";
}
header.app-header.is-home #pageTitleWrap { justify-self: start; }
header.app-header.is-home #homeActions { justify-self: end; }
header.app-header.is-home #unifiedFilterBar { margin-top: 8px; }
/* الفلاتر في صفها الخاص الآن — لا داعي لإزاحة الأزرار حين تتوسّع مجموعة */
header.app-header.is-home:has(.ufg.ufg-expanded) #homeActions {
    max-width: 240px; opacity: 1; overflow: visible; transform: none; pointer-events: auto;
}
/* ── «فلتر الأخبار» (frontend/src/modules/feedFilter.js) ──
   زر واحد وملخص قصير بجانبه؛ اللوحة تنسدل فوق الخلاصة (absolute) فلا يتغيّر
   ارتفاع الترويسة ولا --header-h. أقسامها الأربعة أكورديون: قسم مفتوح واحد. */
header.app-header #unifiedFilterBar.ff {
    position: relative;
    flex-wrap: wrap; /* تنبيه .ff-restored ينزل سطراً كاملاً تحت الزر */
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
}
.ff-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ff-toggle {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 36px; padding: 0 14px;
    border-radius: var(--ds-r-pill);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text-2);
    font-family: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi);
    cursor: pointer; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--ds-dur-2) var(--ds-ease-out), color var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out);
}
.ff-toggle .ff-ico { width: 15px; height: 15px; flex: 0 0 auto; }
.ff-toggle .ff-chev { width: 14px; height: 14px; flex: 0 0 auto; transition: transform var(--ds-dur-3) var(--ds-ease-out); }
.ff-toggle[aria-expanded="true"] .ff-chev { transform: rotate(180deg); }
/* «عرض مفلتر»: لون مميز (الأزرق — الأحمر في رصد للعاجل وحده) */
.ff-toggle.is-filtered {
    background: var(--ds-info-soft);
    border-color: color-mix(in srgb, var(--ds-info) 45%, transparent);
    color: var(--ds-info);
    font-weight: var(--ds-fw-bold);
}
.ff-toggle:focus-visible { outline: 2px solid var(--ds-info); outline-offset: 2px; }
.ff-summary {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ff-panel {
    position: absolute; z-index: 40;
    top: calc(100% + 8px); inset-inline: 0;
    max-height: min(68vh, 560px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-shadow-lg);
    opacity: 0; transform: translateY(-6px);
    transition: opacity var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-3) var(--ds-ease-out);
}
.ff-panel.is-open { opacity: 1; transform: none; }
.ff-panel[hidden] { display: none; }
.ff-sec + .ff-sec { border-top: 1px solid var(--ds-border); }
.ff-sec[hidden] { display: none; }
.ff-sec-head {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px;
    background: none; border: 0; cursor: pointer;
    font-family: inherit; text-align: start; color: var(--ds-text);
    -webkit-tap-highlight-color: transparent;
}
.ff-sec-title { flex: 0 0 auto; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); }
.ff-sec-val {
    flex: 1 1 auto; min-width: 0; text-align: end;
    font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ff-sec-head .ff-chev { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ds-text-3); transition: transform var(--ds-dur-3) var(--ds-ease-out); }
.ff-sec.is-open .ff-sec-head .ff-chev { transform: rotate(180deg); }
/* فتح سلس بارتفاع المحتوى الحقيقي (0fr → 1fr) بلا حساب ارتفاع في JavaScript */
.ff-sec-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ds-dur-3) var(--ds-ease-out); }
.ff-sec.is-open .ff-sec-body { grid-template-rows: 1fr; }
.ff-sec-inner { overflow: hidden; min-height: 0; padding: 0 14px; }
.ff-sec.is-open .ff-sec-inner { padding-bottom: 14px; }
.ff-chips, #ffPanel .filter-bar.ff-chips { display: flex !important; flex-wrap: wrap; gap: 7px; overflow: visible; padding: 0; }
#ffPanel .fchip { min-height: 34px; }
#ffPanel .axes-chip { min-height: 34px; }
#ffPanel .axes-limit { align-self: center; font-size: var(--ds-fs-xs); color: var(--ds-text-3); font-family: var(--ds-font-num); }
.ff-sub { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-2); }
.ff-sub select { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.ff-sub-label { margin: 12px 0 8px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-2); }
.ff-countries .fchip { font-size: var(--ds-fs-xs); }
.ff-note { margin: 10px 0 0; font-size: var(--ds-fs-xs); color: var(--ds-text-3); line-height: 1.6; }
.ff-foot {
    position: sticky; bottom: 0;
    display: flex; gap: 8px; justify-content: space-between;
    padding: 10px 14px;
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-border);
}
.ff-reset, .ff-done {
    min-height: 38px; padding: 0 16px; border-radius: var(--ds-r-pill);
    font-family: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi); cursor: pointer;
}
.ff-reset { background: none; border: 1px solid var(--ds-border); color: var(--ds-text-2); }
.ff-done { background: var(--ds-text); color: var(--ds-surface); border: 0; min-width: 96px; }
/* تلميح أول زيارتين لـ«الأخبار»: الخلاصة مضيَّقة باختيارات الترحيب */
.ff-tip {
    position: absolute; z-index: 39;
    top: calc(100% + 8px); inset-inline-start: 0; max-width: min(320px, 100%);
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    border-radius: var(--ds-r-md);
    background: var(--ds-info); color: #fff;
    font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); line-height: 1.6;
    box-shadow: var(--ds-shadow-md);
    animation: ffTipIn var(--ds-dur-4) var(--ds-ease-spring) both;
}
.ff-tip::before {
    content: ''; position: absolute; top: -5px; inset-inline-start: 22px;
    width: 10px; height: 10px; background: inherit; transform: rotate(45deg);
}
.ff-tip button { flex: 0 0 auto; background: none; border: 0; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .85; }
@keyframes ffTipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* تنبيه الفتح: الخلاصة مفلترة كما تُركت آخر مرة — سطر في مجرى الصفحة تحت الزر لا فقاعة فوق البطاقات */
.ff-restored {
    flex: 1 0 100%;
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding: 8px 10px 8px 12px;
    border-radius: var(--ds-r-md);
    border: 1px solid color-mix(in srgb, var(--ds-info) 35%, transparent);
    background: color-mix(in srgb, var(--ds-info) 10%, var(--ds-surface));
    color: var(--ds-text);
    font-size: var(--ds-fs-xs); line-height: 1.6;
    animation: ffTipIn var(--ds-dur-4) var(--ds-ease-spring) both;
}
.ff-restored-ico { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ds-info); }
.ff-restored-text { flex: 1 1 auto; min-width: 0; }
.ff-restored-text b { font-weight: var(--ds-fw-semi); color: var(--ds-info); }
.ff-restored-all {
    flex: 0 0 auto; min-height: 28px; padding: 0 10px;
    border-radius: var(--ds-r-pill); border: 1px solid var(--ds-border);
    background: var(--ds-surface); color: var(--ds-text-2);
    font: inherit; font-weight: var(--ds-fw-semi); cursor: pointer; white-space: nowrap;
}
.ff-restored-x { flex: 0 0 auto; background: none; border: 0; color: var(--ds-text-2); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }
@media (prefers-reduced-motion: reduce) {
    .ff-panel, .ff-sec-body, .ff-toggle .ff-chev, .ff-sec-head .ff-chev { transition: none; }
    .ff-tip, .ff-restored { animation: none; }
}

/* «نبض اليوم»: لا فلاتر ولا بحث ولا أزرار الخلاصة */
body[data-home-view="overview"] header.app-header #filterSection,
body[data-home-view="overview"] header.app-header #homeActions { display: none !important; }
body[data-tv="1"] #homeSwitch, body[data-cmd="1"] #homeSwitch { display: none !important; }

.home-switch {
    grid-area: switch;
    --hs-dir: 1;
    position: relative;
    isolation: isolate;
    display: grid;
    /* فراغ بين الزرّين (كانا متلاصقين)، والمقبض أدناه بعرض زر واحد ويقفز الزرَّ والفراغ معاً */
    /* العمودان متساويان ولا ينكمش أيّ منهما دون نصّه (كان min-width:0 يُخرج «نبض اليوم» من إطاره) */
    grid-template-columns: 1fr 1fr;
    column-gap: 4px;
    padding: 3px;
    border-radius: var(--ds-r-pill);
    background: var(--ds-surface-2);
    box-shadow: inset 0 0 0 1px var(--ds-border);
}
:root[dir="ltr"] .home-switch { --hs-dir: -1; }
/* المقبض المنزلق تحت الزر النشط — نصف المسار تماماً (الأعمدة متساوية) */
.hs-thumb {
    position: absolute; z-index: -1;
    top: 3px; bottom: 3px; inset-inline-start: 3px;
    width: calc(50% - 5px);
    border-radius: var(--ds-r-pill);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm), 0 0 0 1px var(--ds-border);
    transition: transform var(--ds-dur-4) var(--ds-ease-spring);
}
.home-switch[data-active="news"] .hs-thumb { transform: translateX(calc((-100% - 4px) * var(--hs-dir))); }
.hs-tab {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 0 16px;
    border: 0; border-radius: var(--ds-r-pill); background: none; cursor: pointer;
    font-family: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi);
    color: var(--ds-text-3); white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ds-dur-2) var(--ds-ease-out);
}
.hs-tab[aria-selected="true"] { color: var(--ds-text); font-weight: var(--ds-fw-bold); }
@media (hover: hover) { .hs-tab[aria-selected="false"]:hover { color: var(--ds-text-2); } }
.hs-tab:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 1px; }
/* توهّج «الأخبار» للزائر الجديد حتى أول دخول (homeView.js paintGlow) — هالة زرقاء
   تنبض ببطء (الأحمر للعاجل وحده) */
.hs-tab.is-glow { color: var(--ds-info); }
.hs-tab.is-glow::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: color-mix(in srgb, var(--ds-info) 14%, transparent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-info) 50%, transparent);
    animation: hsGlow 2.4s var(--ds-ease-out) infinite;
}
@keyframes hsGlow {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-info) 50%, transparent); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .hs-tab.is-glow::before { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-info) 45%, transparent); } }

/* نافذة «اكتشف رصد: القصص الحية» في اليوم التالي للجولة، وكشف الشريط بعدها (stories.js) */
.stories-intro-eyebrow { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: #5C35C8; margin: 2px 0 2px; }
.stories-intro-icon { background: color-mix(in srgb, #5C35C8 12%, transparent); color: #5C35C8; }
#storiesStrip.stories-reveal { animation: storiesReveal 1.4s var(--ds-ease-out) both; }
@keyframes storiesReveal {
    0%   { opacity: 0; transform: translateY(10px) scale(.98); box-shadow: 0 0 0 0 color-mix(in srgb, #5C35C8 45%, transparent); }
    35%  { opacity: 1; transform: none; box-shadow: 0 0 0 6px color-mix(in srgb, #5C35C8 22%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { #storiesStrip.stories-reveal { animation: none; } }

/* إحاطة رصد والصورة الكاملة بطاقة واحدة بشريحتين (homeView.js editionsCarousel) */
.ov-editions .ov-ed-slide { gap: 0; }
.ov-editions .ov-ed-slide.is-locked { cursor: default; }
.ov-editions .ov-ed-slide .ov-cta { align-self: flex-start; }

/* عدّاد الأخبار الجديدة بسهم — يظهر على «الأخبار» حين يصل جديد والمستخدم في
   «نبض اليوم». محايد للتحديث الروتيني؛ أحمر بحلقة نابضة إن كان بينها عاجل
   (الأحمر في رصد للعاجل وحده) */
.hs-new {
    position: relative;
    display: none; align-items: center; gap: 3px;
    height: 20px; min-width: 20px; padding: 0 7px 0 6px;
    border-radius: var(--ds-r-pill);
    background: var(--ds-text); color: var(--ds-surface);
    font-family: var(--ds-font-num); font-size: 11px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hs-new svg { flex-shrink: 0; }
.home-switch.has-new .hs-new { display: inline-flex; animation: hsPop var(--ds-dur-4) var(--ds-ease-spring) both; }
.home-switch.has-urgent .hs-new { background: var(--ds-brand); color: var(--ds-on-brand); }
.home-switch.has-urgent .hs-new::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-brand) 55%, transparent);
    animation: hsRing 2.2s var(--ds-ease-out) infinite;
}
.home-switch.has-new .hs-new.bump { animation: hsBump 420ms var(--ds-ease-spring); }
/* السهم يرتفع ثلاث مرات عند الظهور ثم يسكن — تنبيه لا وميض مستمر */
.home-switch.has-new .hs-new svg { animation: hsRise 1.6s var(--ds-ease-in-out) 3; }
@keyframes hsPop  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes hsBump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes hsRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-brand) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes hsRise { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
    .hs-thumb { transition: none; }
    .home-switch.has-new .hs-new, .home-switch.has-new .hs-new.bump, .home-switch.has-new .hs-new svg, .home-switch.has-urgent .hs-new::after { animation: none; }
}
@media screen and (max-width: 360px) {
    .hs-tab { padding: 0 11px; }
}

/* الهواتف: الكرة الأرضية وحدها شعاراً في صفحة الأخبار كي تتسع الفلاتر
   (اسم «رصد» يبقى في عنوان الصفحات الأخرى وشاشة الإقلاع) */
@media screen and (max-width: 440px) {
    header.app-header #pageTitle.site-title { display: none; }
    header.app-header #homeActions > button { width: 36px !important; height: 36px !important; }
    header.app-header { column-gap: 8px; padding-inline: 10px; }
    header.app-header .fchip, header.app-header .ufg-summary { padding-inline: 12px; }
}

.site-title {
    font-size: 21px;
    font-weight: 800;
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 55%, #EF4444 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* أزرار الترويسة: دائرة 40px (مساحة لمس 44px عبر ::after) بدل 32px */
#homeActions > button {
    position: relative;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    color: var(--ds-text-2);
    border: none;
    border-radius: 50% !important;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out),
                color var(--ds-dur-2) var(--ds-ease-out),
                transform var(--ds-dur-1) var(--ds-ease-out);
}
#homeActions > button svg { width: 20px; height: 20px; }

/* شارة «ميزة مقفلة» على أزرار الترويسة/التنقل: قفل SVG خطي كهرماني بدل إيموجي 🔒
   (الإيموجي يُرسم بألوان النظام ويختلف شكله بين أندرويد وiOS وويندوز) */
.header-icon-btn-locked::after,
.nav-btn-locked::after {
    content: '' !important;
    width: 15px !important;
    height: 15px !important;
    background: var(--ds-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='11' x='4' y='11' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 9px 9px no-repeat !important;
    box-shadow: 0 0 0 1.5px var(--ds-surface), 0 1px 2px rgba(16, 24, 40, .18) !important;
}
.header-icon-btn-locked::after { bottom: 3px !important; left: 3px !important; }
#homeActions > button:active { transform: scale(.9); background: var(--ds-surface-2) !important; }
@media (hover: hover) {
    #homeActions > button:hover { background: var(--ds-surface-2) !important; color: var(--ds-text); }
}
#homeActions { gap: 2px !important; }

/* عنوان الصفحات الداخلية */
#pageTitle.text-base {
    font-size: var(--ds-fs-h2) !important;
    font-weight: var(--ds-fw-bold) !important;
    color: var(--ds-text);
}
#pageTitle .ds-page-sub {
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-regular);
    color: var(--ds-text-3);
    margin-top: 3px;
    line-height: 1.5;
    white-space: normal;
}

/* زر الرجوع للصفحات الفرعية من «المزيد» — router.js */
.ds-back-btn {
    width: 40px;
    height: 40px;
    margin-inline-start: -6px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--ds-text);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
}
.ds-back-btn.show { display: inline-flex; animation: dsFadeIn var(--ds-dur-2) var(--ds-ease-out); }
.ds-back-btn:active { transform: scale(.9); background: var(--ds-surface-2); }
@media (hover: hover) { .ds-back-btn:hover { background: var(--ds-surface-2); } }
/* السهم يشير «للخلف» حسب اتجاه اللغة */
html[dir="ltr"] .ds-back-btn .i { transform: scaleX(-1); }


/* ============================================================
   6. شريط التنقل السفلي — مؤشر «حبة» متحرك خلف أيقونة التبويب النشط
   ============================================================ */
.bottom-nav {
    background: var(--ds-glass);
    border-top: 1px solid var(--ds-border);
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
}
.nav-btn {
    color: var(--ds-text-3);
    font-size: 10.5px;
    font-weight: var(--ds-fw-medium);
    gap: 3px;
    transition: color var(--ds-dur-2) var(--ds-ease-out);
}
.nav-btn svg {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    transition: transform var(--ds-dur-3) var(--ds-ease-spring);
}
.nav-btn > span[data-i18n] { position: relative; z-index: 1; }
.nav-btn.active { color: var(--ds-brand-fg); font-weight: var(--ds-fw-semi); }
.nav-btn:active svg { transform: scale(.86); }

@media screen and (max-width: 768px) {
    .nav-btn::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        width: 54px;
        height: 30px;
        margin-left: -27px;
        border-radius: var(--ds-r-pill);
        background: var(--ds-brand-soft);
        opacity: 0;
        transform: scaleX(.5);
        transition: opacity var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-3) var(--ds-ease-spring);
        pointer-events: none;
    }
    .nav-btn.active::before { opacity: 1; transform: scaleX(1); }
    .nav-btn { padding-top: 11px; }
    .nav-btn svg { margin-bottom: 3px; }
}

/* الشريط الجانبي على سطح المكتب */
@media screen and (min-width: 769px) {
    .bottom-nav { background: var(--ds-surface); border-left: 1px solid var(--ds-border); }
    .nav-btn { border-radius: var(--ds-r-sm); font-size: 13.5px; }
    .nav-btn.active { background: var(--ds-brand-soft); color: var(--ds-brand-fg); }
    .nav-btn:hover:not(.active) { background: var(--ds-surface-2); color: var(--ds-text); }
    .nav-brand-title { font-weight: 800; font-size: 19px; }
    /* قفل الميزة بجوار أيقونة التبويب في الصف الأفقي (كان مثبّتاً لتخطيط الهاتف العمودي) */
    .nav-btn-locked::after { top: 6px !important; left: auto !important; inset-inline-start: 26px; }
    /* الشعار ظاهر أصلاً أعلى الشريط الجانبي — لا داعي لتكراره في ترويسة الأخبار */
    #pageTitle.site-title, #pageTitleWrap #globeWrap { display: none !important; }
}

/* الهاتف بالوضع الأفقي (ارتفاع قصير). كانت قاعدة واحدة تخفي عناوين التبويبات
   لتوفير الارتفاع، وهي تصيب الشريط الجانبي أيضاً: الهواتف الحديثة أعرض من 768px
   أفقياً فتأخذ تخطيط سطح المكتب، فيظهر شريط جانبي بعرض 220px فيه أيقونات بلا
   أسماء. الآن العناوين ظاهرة في الحالتين والمقاسات هي التي تنضغط. */
/* عريض: الشريط الجانبي نفسه أنحف وأقصر كي تتسع التبويبات الخمسة بلا تمرير */
@media screen and (orientation: landscape) and (max-height: 500px) and (min-width: 769px) {
    .bottom-nav { width: 176px; min-width: 176px; }
    .nav-brand { padding: 10px 16px 8px; margin-bottom: 4px; }
    .nav-inner { padding: 2px 8px; }
    .nav-btn { padding: 9px 12px; gap: 10px; }
}
/* ضيق: الشريط السفلي بأيقونة أصغر وعنوان تحتها */
@media screen and (orientation: landscape) and (max-height: 500px) and (max-width: 768px) {
    .nav-btn { min-height: 46px; padding: 5px 4px 4px; gap: 1px; font-size: 9.5px; }
    .nav-btn svg { width: 20px; height: 20px; margin-bottom: 1px; }
    .nav-btn::before { top: 2px; height: 26px; }
}


/* ============================================================
   7. الأزرار
   ============================================================ */
.btn-red,
.ds-btn {
    min-height: var(--ds-ctl-h);
    padding: 11px 18px;
    border: none;
    border-radius: var(--ds-r-md);
    background: var(--ds-brand);
    color: var(--ds-on-brand);
    font-family: inherit;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-bold);
    line-height: 1.3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: background-color var(--ds-dur-2) var(--ds-ease-out),
                transform var(--ds-dur-1) var(--ds-ease-out),
                box-shadow var(--ds-dur-2) var(--ds-ease-out),
                opacity var(--ds-dur-2);
    -webkit-tap-highlight-color: transparent;
}
.btn-red { width: 100%; }
@media (hover: hover) {
    .btn-red:hover, .ds-btn:hover { background: var(--ds-brand-hover); }
}
.btn-red:active, .ds-btn:active { background: var(--ds-brand-press); transform: scale(.98); opacity: 1; }
.btn-red:disabled, .ds-btn:disabled,
.btn-red[aria-busy="true"], .ds-btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-outline,
.ds-btn-secondary {
    min-height: var(--ds-ctl-h);
    padding: 10px 16px;
    border-radius: var(--ds-r-md);
    background: var(--ds-surface);
    color: var(--ds-text);
    border: 1px solid var(--ds-border-strong);
    font-family: inherit;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-semi);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out),
                border-color var(--ds-dur-2) var(--ds-ease-out),
                transform var(--ds-dur-1) var(--ds-ease-out);
}
.btn-outline { width: 100%; color: var(--ds-brand-fg); border-color: color-mix(in srgb, var(--ds-brand) 40%, transparent); }
@media (hover: hover) {
    .btn-outline:hover, .ds-btn-secondary:hover { background: var(--ds-surface-2); }
}
.btn-outline:active, .ds-btn-secondary:active { transform: scale(.98); background: var(--ds-surface-2); }

.ds-btn-ghost {
    min-height: var(--ds-ctl-h-sm);
    padding: 8px 12px;
    border: none;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-brand-fg);
    font-family: inherit;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-semi);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out);
}
.ds-btn-ghost:active, .ds-btn-ghost:hover { background: var(--ds-brand-soft); }
.ds-btn-sm { min-height: var(--ds-ctl-h-sm); padding: 7px 14px; font-size: var(--ds-fs-xs); border-radius: var(--ds-r-sm); }
.ds-btn-block { width: 100%; }

/* مؤشر تحميل داخل الأزرار: <span class="ds-spinner"></span> */
.ds-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: dsSpin .7s linear infinite;
    flex-shrink: 0;
    opacity: .9;
}
@keyframes dsSpin { to { transform: rotate(360deg); } }

/* زر «ترقية» — كان بظلال Material ثقيلة ولون بنفسجي فاقع */
.upgrade-cta {
    height: 42px;
    border-radius: var(--ds-r-pill);
    background: var(--ds-surface);
    color: var(--ds-insight);
    border: 1px solid color-mix(in srgb, var(--ds-insight) 28%, transparent);
    box-shadow: var(--ds-shadow-sm);
}
@media (hover: hover) {
    .upgrade-cta:hover { background: var(--ds-insight-soft); color: var(--ds-insight); box-shadow: var(--ds-shadow-md); }
}


/* ============================================================
   8. الحقول والمفاتيح والمنزلقات
   ============================================================ */
.ifield,
.search-input,
.ds-input,
#settingsPage select,
#appLangSelector {
    min-height: var(--ds-ctl-h);
    padding: 10px 14px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r-md);
    font-family: inherit;
    font-size: 16px; /* ≥16px يمنع iOS من تكبير الصفحة تلقائياً عند التركيز */
    color: var(--ds-text);
    outline: none;
    transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), background-color var(--ds-dur-2);
    -webkit-appearance: none;
    appearance: none;
}
textarea.ifield, textarea.ds-input { line-height: var(--ds-lh-snug); }
.ifield::placeholder, .search-input::placeholder, .ds-input::placeholder,
textarea::placeholder, input::placeholder { color: var(--ds-text-4); opacity: 1; }
.ifield:focus, .search-input:focus, .ds-input:focus,
#settingsPage select:focus, #appLangSelector:focus {
    border-color: var(--ds-brand);
    box-shadow: var(--ds-focus-ring);
}
.ifield[aria-invalid="true"], .ds-input[aria-invalid="true"] {
    border-color: var(--ds-danger);
    box-shadow: 0 0 0 3px var(--ds-danger-soft);
}
/* سهم موحّد لقوائم الاختيار (appearance:none يخفي سهم النظام) */
#settingsPage select, #appLangSelector, select.ifield, select.ds-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 36px;
    cursor: pointer;
}
html[dir="ltr"] #settingsPage select, html[dir="ltr"] #appLangSelector {
    background-position: right 12px center;
    padding-left: 14px;
    padding-right: 36px;
}
/* حقل البحث في الترويسة */
.search-bar { padding: 2px 12px 12px; }
.search-input {
    background: var(--ds-surface-2);
    border-color: transparent;
    border-radius: var(--ds-r-pill);
    padding-inline: 16px;
}
.search-input:focus { background: var(--ds-surface); }

/* عناصر النظام (checkbox/radio/range) بلون الهوية بدل الأزرق الافتراضي */
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--ds-brand); }

/* المنزلق */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    --ds-range-fill: 50%;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to left, var(--ds-brand) var(--ds-range-fill), var(--ds-surface-3) var(--ds-range-fill));
}
html[dir="ltr"] input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--ds-brand) var(--ds-range-fill), var(--ds-surface-3) var(--ds-range-fill));
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .08);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .25), 0 0 0 0 color-mix(in srgb, var(--ds-brand) 35%, transparent);
    transition: box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1);
}
input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(16, 24, 40, .25), 0 0 0 7px color-mix(in srgb, var(--ds-brand) 35%, transparent); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ds-surface-3); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ds-brand); }
input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(16, 24, 40, .08);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
}

/* المفاتيح (Toggle) — نمطان موجودان في التطبيق يُوحَّدان بصرياً */
.toggle-wrap { width: 46px; height: 28px; }
.toggle-track {
    background: var(--ds-surface-3);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--ds-border);
    transition: background-color var(--ds-dur-2) var(--ds-ease-out);
}
.toggle-thumb {
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .22), 0 1px 1px rgba(16, 24, 40, .06);
    transition: left var(--ds-dur-3) var(--ds-ease-spring), width var(--ds-dur-1) var(--ds-ease-out);
}
.toggle-wrap:active .toggle-thumb { width: 26px; }
.toggle-wrap input:checked ~ .toggle-track { background: var(--ds-brand) !important; box-shadow: none; }
.toggle-wrap input:checked ~ .toggle-thumb { left: 21px; }
.toggle-wrap:active input:checked ~ .toggle-thumb { left: 17px; }
.toggle-wrap input:focus-visible ~ .toggle-track { box-shadow: var(--ds-focus-ring); }

.switch-slider {
    width: 46px;
    height: 28px;
    background-color: var(--ds-surface-3);
    box-shadow: inset 0 0 0 1px var(--ds-border);
    transition: background-color var(--ds-dur-2) var(--ds-ease-out);
}
.switch-slider::after {
    width: 22px;
    height: 22px;
    top: 3px;
    right: 3px;
    transition: transform var(--ds-dur-3) var(--ds-ease-spring);
}
.switch-input:checked + .switch-slider { background-color: var(--ds-brand); box-shadow: none; }
.switch-input:checked + .switch-slider::after { transform: translateX(-18px); }
html[dir="ltr"] .switch-input:checked + .switch-slider::after { transform: translateX(-18px); }

/* مفتاح التبديل المقطّع (Segmented control) */
.ds-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--ds-surface-2);
    border-radius: var(--ds-r-md);
    border: 1px solid var(--ds-border);
}
.ds-seg-btn {
    flex: 1;
    min-height: 38px;
    padding: 7px 10px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--ds-text-2);
    font-family: inherit;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-semi);
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out),
                color var(--ds-dur-2) var(--ds-ease-out),
                box-shadow var(--ds-dur-2) var(--ds-ease-out),
                transform var(--ds-dur-1) var(--ds-ease-out);
}
.ds-seg-btn:active { transform: scale(.97); }
.ds-seg-btn[aria-pressed="true"] {
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 0 0 1px var(--ds-border);
}
@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"])) .ds-seg-btn[aria-pressed="true"] { background: var(--ds-surface-3); }
}
:where(html[data-theme="dark"]) .ds-seg-btn[aria-pressed="true"] { background: var(--ds-surface-3); }

/* صف إعداد داخل بطاقة */
.ds-field { display: flex; flex-direction: column; gap: 8px; }
.ds-field + .ds-field { margin-top: 18px; }
.ds-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ds-field-label { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-2); }
.ds-field-value { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-3); font-variant-numeric: tabular-nums; }
.ds-range-scale { display: flex; justify-content: space-between; align-items: baseline; line-height: 1; color: var(--ds-text-3); margin-top: -4px; padding-inline: 4px; }


/* ============================================================
   9. الوسوم والشارات والرقائق (Chips)
   ============================================================ */
.tag,
.cat,
.urgency-badge {
    font-size: 11px;
    line-height: 1.35;
    padding: 3px 8px;
    border-radius: var(--ds-r-xs);
    font-weight: var(--ds-fw-semi);
    gap: 4px;
}
.tag .i, .cat .i, .urgency-badge .i { width: 12px; height: 12px; stroke-width: 2.2; }

/* التصنيف: رقاقة هادئة بلون محايد ونقطة ملونة صغيرة بدل خلفية صلبة فاقعة —
   اللون يبقى مميِّزاً للتصنيف دون أن ينافس العنوان على الانتباه */
.cat {
    --cat-c: #64748B;
    background: color-mix(in srgb, var(--cat-c) 10%, transparent) !important;
    color: color-mix(in srgb, var(--cat-c) 82%, var(--ds-text)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-c) 18%, transparent);
}
.cat svg, .cat .badge-svg-icon { color: var(--cat-c); opacity: .95; }
.cat-عسكري    { --cat-c: #DC2626; }
.cat-سياسي    { --cat-c: #2563EB; }
.cat-إنساني   { --cat-c: #16A34A; }
.cat-اقتصادي  { --cat-c: #D97706; }
.cat-دبلوماسي { --cat-c: #7C3AED; }
.cat-أمني     { --cat-c: #0891B2; }
.cat-إعلامي   { --cat-c: #DB2777; }
.cat-عام      { --cat-c: #64748B; }
body[data-tv="1"] .cat,
#tvOverlay .cat {
    background: color-mix(in srgb, var(--cat-c) 16%, transparent) !important;
    color: color-mix(in srgb, var(--cat-c) 45%, #fff) !important;
}
@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"])) .cat {
        background: color-mix(in srgb, var(--cat-c) 16%, transparent) !important;
        color: color-mix(in srgb, var(--cat-c) 45%, #fff) !important;
    }
}
:where(html[data-theme="dark"]) .cat {
    background: color-mix(in srgb, var(--cat-c) 16%, transparent) !important;
    color: color-mix(in srgb, var(--cat-c) 45%, #fff) !important;
}

/* وسوم المصدر/الوسائط: محايدة — معلومات ثانوية لا تحتاج لوناً خاصاً */
.tag-telegram, .tag-rss, .tag-video, .tag-image, .tag-duplicate, .tag-processing {
    background: var(--ds-surface-2) !important;
    color: var(--ds-text-2) !important;
    box-shadow: inset 0 0 0 1px var(--ds-border);
}
.tag-translated { background: var(--ds-insight-soft) !important; color: var(--ds-insight) !important; }
.tag-keyword    { background: var(--ds-warning-soft); color: var(--ds-warning); }
.tag-pending    { background: var(--ds-warning-soft); color: var(--ds-warning); }
.tag .ds-spinner, .ds-spinner-xs { width: 10px; height: 10px; border-width: 1.5px; }

/* درجات الموثوقية: اللون + الأيقونة + النص معاً (لا اعتماد على اللون وحده) */
.tag-verified { background: var(--ds-success-soft) !important; color: var(--ds-success) !important; border: 1px solid color-mix(in srgb, var(--ds-success) 30%, transparent) !important; }
.tag-mostly   { background: var(--ds-warning-soft) !important; color: var(--ds-warning) !important; border: 1px solid color-mix(in srgb, var(--ds-warning) 30%, transparent) !important; }
.tag-partial  { background: var(--ds-info-soft)    !important; color: var(--ds-info)    !important; border: 1px solid color-mix(in srgb, var(--ds-info) 30%, transparent) !important; }
.tag-single   { background: var(--ds-danger-soft)  !important; color: var(--ds-danger)  !important; border: 1px solid color-mix(in srgb, var(--ds-danger) 30%, transparent) !important; }

/* الميزات المقفلة («صحة الخبر؟»، «ترجمة؟») — شارة خفيفة بإطار منقّط، بلا وميض دائم */
.tag-upsell {
    background: transparent !important;
    color: var(--ds-warning) !important;
    border: 1px dashed color-mix(in srgb, var(--ds-warning) 55%, transparent) !important;
}
.tag-upsell-shimmer::after { animation-iteration-count: 2; }

/* رقائق الفلترة */
.fchip,
.ufg-summary {
    min-height: 34px;
    padding: 6px 14px;
    border-radius: var(--ds-r-pill);
    border: 1px solid var(--ds-border-strong);
    background: var(--ds-surface);
    color: var(--ds-text-2);
    font-size: 12.5px;
    font-weight: var(--ds-fw-semi);
    transition: background-color var(--ds-dur-2) var(--ds-ease-out),
                color var(--ds-dur-2) var(--ds-ease-out),
                border-color var(--ds-dur-2) var(--ds-ease-out),
                transform var(--ds-dur-1) var(--ds-ease-out);
}
.fchip:active, .ufg-summary:active { transform: scale(.96); }
@media (hover: hover) {
    .fchip:hover:not(.active), .ufg-summary:hover { background: var(--ds-surface-2); color: var(--ds-text); }
}
/* الحالة النشطة موحّدة لكل الرقائق: خلفية داكنة/فاتحة عكسية بدل لون مختلف لكل تصنيف */
.fchip.active,
.fchip[class*="fchip-"].active {
    background: var(--ds-text) !important;
    color: var(--ds-surface) !important;
    border-color: var(--ds-text) !important;
}
/* ألوان الرقائق غير النشطة: أيقونة ملونة فقط، النص محايد */
.fchip[class*="fchip-"]:not(.active) { color: var(--ds-text-2); border-color: var(--ds-border-strong); }
.fchip-urgent svg      { color: #EA580C; }
.fchip-breaking svg    { color: #DC2626; }
.fchip-exceptional svg { color: #B45309; }
.fchip-confirmed svg   { color: #2563EB; }
.fchip-military svg    { color: #DC2626; }
.fchip-political svg   { color: #2563EB; }
.fchip-humanitarian svg{ color: #16A34A; }
.fchip-economic svg    { color: #D97706; }
.fchip-diplomatic svg  { color: #7C3AED; }
.fchip.active svg      { color: inherit; }

/* حبوب الحالة */
.status-pill { border-radius: var(--ds-r-pill); font-weight: var(--ds-fw-semi); }
.status-ok  { background: var(--ds-success-soft); color: var(--ds-success); }
.status-err { background: var(--ds-danger-soft);  color: var(--ds-danger); }

/* شارة الوقت على البطاقة */
.time-elapsed {
    top: 14px;
    inset-inline-end: 14px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: var(--ds-fw-semi);
    color: var(--ds-text-3);
    background: var(--ds-surface-2);
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* ============================================================
   10. البطاقات
   ============================================================ */
.news-card {
    border-radius: var(--ds-r-lg);
    border: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-xs);
    transition: transform var(--ds-dur-2) var(--ds-ease-out),
                box-shadow var(--ds-dur-2) var(--ds-ease-out),
                border-color var(--ds-dur-2) var(--ds-ease-out);
}
@media (hover: hover) {
    .news-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--ds-shadow-md);
        border-color: var(--ds-border-strong);
    }
}
.news-card:active { transform: scale(.99); box-shadow: var(--ds-shadow-xs); }
.news-card-content { padding: 16px 16px 14px; }
.news-card-title {
    font-size: calc(1rem * var(--user-font-scale, 1));
    line-height: 1.62;
    font-weight: var(--ds-fw-semi);
    color: var(--ds-text);
    margin-bottom: 6px;
}
.news-card-body {
    font-size: calc(.875rem * var(--user-font-scale, 1));
    line-height: 1.8;
    color: var(--ds-text-2);
}
/* التذييل (المصدر + المشاركة + «مهم للمتابعة»/«مشكوك في صحته») ملتصق دائماً
   بأسفل البطاقة وفوقه الخط الفاصل — margin-top:auto يدفعه للأسفل حين تمتد
   البطاقة لارتفاع صفّها في الشبكة (سطح المكتب/اللوحي) مهما قصر الخبر.
   المسافة فوق الخط تأتي من العنصر الذي قبله مباشرة (عنوان أو متن). */
.news-card-content > .news-card-footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--ds-border);
}
.news-card-content > :nth-last-child(2) { margin-bottom: 12px; }
.news-card-source { font-size: 12px; font-weight: var(--ds-fw-semi); color: var(--ds-text-3); }
body[data-density="compact"] .news-card-title { font-size: calc(.9rem * var(--user-font-scale, 1)); }

/* ظهور البطاقات: صعود ناعم قصير */
.news-card.ds-enter { animation: dsCardIn var(--ds-dur-3) var(--ds-ease-out) both; animation-delay: calc(var(--ds-i, 0) * 40ms); }
@keyframes dsCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* الصور: خلفية placeholder هادئة + ظهور تدريجي عند اكتمال التحميل */
.news-card-media { background: var(--ds-surface-2); }
.news-card-media img, .modal-inner img:not(.i) { transition: opacity var(--ds-dur-3) var(--ds-ease-out); }
img.ds-img-loading { opacity: 0; }

/* البطاقات العامة */
.settings-card,
.more-card,
.source-card,
.invite-card,
.sk-news-card,
.sk-section-card,
.sk-source-card,
.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg);
    box-shadow: var(--ds-shadow-xs);
}
.settings-card { margin-bottom: 12px; }
.ds-card { padding: var(--ds-sp-4); margin-bottom: 12px; }

/* رأس بطاقة: مربّع أيقونة + عنوان + وصف */
.ds-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ds-card-head .ds-title { font-size: var(--ds-fs-h3); margin: 0 0 3px; }
.ds-card-head .ds-subtitle { margin: 0; line-height: 1.7; }

/* رصيد/عدّاد صغير على شكل حبة */
.ds-quota {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--ds-r-pill);
    background: var(--ds-brand-soft);
    color: var(--ds-brand-fg);
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-bold);
    font-variant-numeric: tabular-nums;
}

/* تحميل داخل بطاقة: مؤشر صغير + نص — بدل شعار كبير يدفع المحتوى */
.ds-inline-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 6px;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    color: var(--ds-text-2);
}
.ds-inline-loading .ds-spinner { color: var(--ds-brand); width: 18px; height: 18px; }

/* تنبيه مضمّن داخل الصفحة (خطأ/معلومة/نجاح) */
.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ds-r-md);
    font-size: var(--ds-fs-sm);
    line-height: 1.65;
    animation: dsPopIn var(--ds-dur-3) var(--ds-ease-out);
}
.ds-alert .i { width: 18px; height: 18px; margin-top: 2px; }
.ds-alert.is-error   { background: var(--ds-danger-soft);  color: var(--ds-danger); }
.ds-alert.is-info    { background: var(--ds-info-soft);    color: var(--ds-info); }
.ds-alert.is-success { background: var(--ds-success-soft); color: var(--ds-success); }
.ds-alert.is-warning { background: var(--ds-warning-soft); color: var(--ds-warning); }

/* قائمة درجات الثقة */
.ds-trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ds-trust-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--ds-fs-sm); line-height: 1.7; color: var(--ds-text-2); }
.ds-trust-list .tag { flex-shrink: 0; margin-top: 1px; }

/* بطاقة دعوة لإجراء (وسطية): أيقونة + عنوان + وصف + زر */
.ds-cta-card { text-align: center; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; }
.ds-cta-card .ds-title { margin: 12px 0 4px; }
.ds-cta-card .ds-subtitle { margin: 0 0 16px; max-width: 320px; }
.ds-cta-card .ds-btn { min-width: 200px; }
/* سهم «التالي» يتبع اتجاه القراءة (chevron يشير لليسار في RTL) */
html[dir="ltr"] .ds-dir-icon { transform: scaleX(-1); }

/* بطاقة معلومة أفقية: أيقونة + نص + إجراء ثانوي */
.ds-info-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; }
.ds-info-card-text { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 3px; }
.ds-info-card-text b { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); color: var(--ds-text); }
.ds-info-card-text span { font-size: var(--ds-fs-xs); line-height: 1.7; color: var(--ds-text-2); }
.ds-info-card.is-success { background: color-mix(in srgb, var(--ds-success) 6%, var(--ds-surface)); border-color: color-mix(in srgb, var(--ds-success) 22%, transparent); }
.ds-info-card .ds-btn-secondary { flex-shrink: 0; text-decoration: none; }

/* صف رابط داخل بطاقة */
.ds-link-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: var(--ds-r-md);
    background: var(--ds-surface-2);
    color: var(--ds-text);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-semi);
    line-height: 1.5;
    text-decoration: none;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
}
.ds-link-row > span:nth-child(2) { flex: 1; }
.ds-link-row .ds-icon-tile { width: 32px; height: 32px; }
.ds-link-row-arrow { color: var(--ds-text-3); }
html[dir="ltr"] .ds-link-row-arrow { transform: scaleX(-1); }
.ds-link-row:active { transform: scale(.99); background: var(--ds-surface-3); }
@media (hover: hover) { .ds-link-row:hover { background: var(--ds-surface-3); } }

.ds-footnote {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--ds-border-strong);
    font-size: var(--ds-fs-xs);
    line-height: 1.75;
    color: var(--ds-text-3);
}

.settings-card-header { padding: 14px 16px 12px; border-bottom: 1px solid var(--ds-border); }
.acc-header { padding: 14px 16px; min-height: 64px; transition: background-color var(--ds-dur-2) var(--ds-ease-out); }
.acc-header:active { background: var(--ds-surface-2); }
.acc-arrow { color: var(--ds-text-3); transition: transform var(--ds-dur-3) var(--ds-ease-out); }
.acc-body { transition: max-height var(--ds-dur-4) var(--ds-ease-in-out); }
.settings-row { border-bottom-color: var(--ds-border); }

/* مربّعات أيقونات بطاقات الإعدادات: موحّدة (كانت 6 ألوان مختلفة مكتوبة inline) */
.settings-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--ds-r-sm) !important;
    background: var(--ds-surface-2) !important;
    color: var(--ds-text-2) !important;
}
.settings-card-icon svg { color: var(--ds-text-2) !important; width: 19px; height: 19px; }
.settings-card-icon > span { font-size: 17px !important; line-height: 1; }
.settings-card .text-sm.font-semibold { font-size: 14.5px; font-weight: var(--ds-fw-semi); color: var(--ds-text); }
.settings-card .text-xs { line-height: 1.6; }


/* ============================================================
   11. القوائم — صفحة «المزيد»
   ============================================================ */
.more-group { margin-bottom: 20px; }
.more-group-title {
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-semi);
    color: var(--ds-text-3);
    margin: 0 6px 8px;
}
.more-card { overflow: hidden; }
.more-row {
    min-height: 64px;
    padding: 12px 14px;
    gap: 12px;
    border-bottom: 1px solid var(--ds-border);
    transition: background-color var(--ds-dur-1) var(--ds-ease-out);
}
.more-row:active { background: var(--ds-surface-2); }
@media (hover: hover) { .more-row:hover { background: var(--ds-surface-2); } }
.more-row-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ds-r-sm);
    background: var(--ds-surface-2);
    color: var(--ds-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.more-row-icon .i { width: 19px; height: 19px; }
.more-row-text b { font-size: 14.5px; font-weight: var(--ds-fw-semi); color: var(--ds-text); }
.more-row-text small { font-size: 12px; color: var(--ds-text-3); line-height: 1.5; }
.more-row-arrow { color: var(--ds-text-4); display: inline-flex; }
.more-row-arrow .i { width: 18px; height: 18px; }
html[dir="ltr"] .more-row-arrow .i { transform: scaleX(-1); }


/* ============================================================
   12. النوافذ المنبثقة والأوراق السفلية
   ============================================================ */
.modal {
    background: var(--ds-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal.show { animation: dsFadeIn var(--ds-dur-3) var(--ds-ease-out); }
.modal-inner {
    background: var(--ds-surface);
    border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0;
    box-shadow: var(--ds-shadow-lg);
    animation: dsSheetIn var(--ds-dur-4) var(--ds-ease-out) forwards;
}
.modal-handle { width: 40px; height: 5px; border-radius: 999px; background: var(--ds-surface-3); opacity: 1; margin-top: 8px; }
.modal-close-btn {
    width: 36px;
    height: 36px;
    font-size: 22px;
    color: var(--ds-text-2);
    background: var(--ds-surface-2);
    box-shadow: none;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
}
.modal-close-btn:active { transform: scale(.9); background: var(--ds-surface-3); }
@keyframes dsSheetIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes dsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsPopIn {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ── نوافذ الحوار الوسطية (الدخول/التسجيل...) — .ds-dialog يُظهرها JS بـ display:flex ── */
.ds-dialog {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--ds-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: dsFadeIn var(--ds-dur-3) var(--ds-ease-out);
}
.ds-dialog-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-lg);
    animation: dsPopIn var(--ds-dur-3) var(--ds-ease-out);
}
.ds-dialog-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--ds-surface-2);
    color: var(--ds-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
}
.ds-dialog-close:active { transform: scale(.9); background: var(--ds-surface-3); }
.ds-dialog-head { padding: 28px 24px 8px; text-align: center; }
.ds-dialog-head .ds-title { font-size: var(--ds-fs-h2); margin: 12px 0 4px; }
.ds-dialog-head .ds-subtitle { margin: 0; }
.ds-dialog-icon { width: 52px; height: 52px; border-radius: 16px; }
.ds-dialog-icon .i, .ds-dialog-icon .plan-svg-icon { width: 24px; height: 24px; }
.ds-dialog-tabs { margin: 16px 20px 0; }
.ds-dialog-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.ds-dialog-body .ds-field + .ds-field { margin-top: 0; }
.ds-dialog-body .ds-alert { margin: 0; }
.ds-dialog-switch { margin: 0; text-align: center; }
.ds-dialog-switch button {
    background: none;
    border: none;
    padding: 6px 8px;
    font-family: inherit;
    font-size: var(--ds-fs-xs);
    color: var(--ds-text-3);
    cursor: pointer;
    border-radius: var(--ds-r-sm);
}
.ds-dialog-switch b { color: var(--ds-brand-fg); font-weight: var(--ds-fw-bold); }
.ds-dialog-user { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; }
.ds-dialog-user .ds-title { margin-top: 8px; font-size: var(--ds-fs-h3); }

/* نوافذ الحوار القديمة (inline) — نفس الخلفية المعتمة والظهور والظل الموحّد */
#renewReminderModal, #upgradeFeatureModal, #trialCompModal, #installInstructionsModal {
    background: var(--ds-overlay) !important;
    animation: dsFadeIn var(--ds-dur-3) var(--ds-ease-out);
}
:is(#renewReminderModal, #upgradeFeatureModal, #trialCompModal, #installInstructionsModal) > div {
    border-radius: var(--ds-r-xl) !important;
    box-shadow: var(--ds-shadow-lg) !important;
    animation: dsPopIn var(--ds-dur-3) var(--ds-ease-out);
}

/* حقل كلمة المرور مع زر إظهار/إخفاء */
.ds-password { position: relative; }
.ds-password .ds-input { width: 100%; padding-left: 48px; }
.ds-password-toggle {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--ds-r-sm);
    background: transparent;
    color: var(--ds-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ds-password-toggle[aria-pressed="true"] { color: var(--ds-brand-fg); background: var(--ds-brand-soft); }
.ds-input[dir="ltr"] { text-align: left; }
/* حقل LTR (بريد/كلمة مرور) بنص إرشادي عربي: يُعرض النص الإرشادي RTL ما دام الحقل
   فارغاً (وإلا ينقلب ترتيبه: «أحرف على الأقل 8»)، ويعود LTR فور الكتابة */
html[dir="rtl"] .ds-input[dir="ltr"]:placeholder-shown { direction: rtl; text-align: right; }

.ds-check-row { display: flex; align-items: center; gap: 10px; font-size: var(--ds-fs-sm); color: var(--ds-text-2); font-weight: var(--ds-fw-medium); }
.ds-check-row label[for] { cursor: pointer; user-select: none; }

.ds-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--ds-r-md);
    background: var(--ds-surface-2);
    font-size: var(--ds-fs-xs);
    line-height: 1.75;
    color: var(--ds-text-2);
}
.ds-privacy-note .i { margin-top: 3px; color: var(--ds-success); }
.ds-privacy-note b { color: var(--ds-text); }
.ds-privacy-note a { color: var(--ds-brand-fg); font-weight: var(--ds-fw-bold); text-decoration: none; white-space: nowrap; }

/* ── التسجيل: زر Google، فوائد الحساب المجاني، زر الترويسة، الدعوة اللطيفة (2026-10-10) ── */
.auth-google { display: grid; gap: 10px; }
.auth-google[hidden] { display: none; }
.auth-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: var(--ds-fw-semi); }
.auth-google-logo { width: 18px; height: 18px; flex-shrink: 0; }
.auth-google-hint { margin: 0; font-size: var(--ds-fs-xs); line-height: 1.7; color: var(--ds-text-2); background: var(--ds-info-soft); border-radius: var(--ds-r-sm); padding: 8px 10px; }
.auth-or { display: flex; align-items: center; gap: 10px; font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--ds-border); }
.auth-perks { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 6px; border-radius: var(--ds-r-md); background: var(--ds-success-soft); font-size: var(--ds-fs-sm); color: var(--ds-text); }
.auth-perks[hidden] { display: none; }
.auth-perks li { display: flex; align-items: center; gap: 8px; }
.auth-perks .i { color: var(--ds-success); flex-shrink: 0; }
.auth-optional { font-weight: 400; color: var(--ds-text-3); }

/* خانة الأزرار نفسها (grid-area: actions) — يظهر في «نبض اليوم» بالرئيسية فقط، حيث
   #homeActions مخفية؛ في «الأخبار» وبقية الصفحات تعود الخانة لأزرار البحث والتحديث */
.nav-signup-btn { grid-area: actions; justify-self: end; white-space: nowrap; padding-inline: 12px; }
.nav-signup-btn[hidden],
header.app-header:not(.is-home) .nav-signup-btn,
body:not([data-home-view="overview"]) .nav-signup-btn,
body[data-tv="1"] .nav-signup-btn, body[data-cmd="1"] .nav-signup-btn { display: none !important; }
/* مع «سجّل مجاناً» تأخذ الأطراف عرض محتواها والمفتاح الباقي — بلا هذا كان الزر يفيض من خانته
   (1fr) فوق المفتاح ويلامسه، خصوصاً بخط الهاتف الكبير (إعداد حجم الخط في أندرويد يكبّر النص) */
body[data-home-view="overview"]:has(.nav-signup-btn:not([hidden])) header.app-header.is-home {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
body[data-home-view="overview"]:has(.nav-signup-btn:not([hidden])) header.app-header.is-home #homeSwitch { justify-self: center; }
/* الهواتف: الخانة الجانبية بجوار مفتاح «نظرة عامة/الأخبار» ضيقة (~75px) */
@media screen and (max-width: 440px) {
    .nav-signup-btn { padding-inline: 8px; font-size: 12px; min-height: 32px; }
    body:has(.nav-signup-btn:not([hidden])) .hs-tab { padding: 0 9px; }
}

.signup-ar-line { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 12px; padding: 9px 12px; border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-2); color: var(--ds-brand-fg); font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi); text-align: start; cursor: pointer; }
.signup-ar-line[hidden] { display: none; }

.signup-nudge { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; background: var(--ds-overlay); padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); animation: signupNudgeFade var(--ds-dur-2) var(--ds-ease-out); }
.signup-nudge-panel { position: relative; width: 100%; max-width: 420px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); box-shadow: var(--ds-shadow-lg); padding: 20px 18px 16px; display: grid; gap: 8px; animation: signupNudgeUp var(--ds-dur-3) var(--ds-ease-spring); }
.signup-nudge-title { font-size: 18px; color: var(--ds-text); }
.signup-nudge-body { margin: 0; font-size: var(--ds-fs-sm); line-height: 1.75; color: var(--ds-text-2); }
.signup-nudge-actions { display: grid; gap: 6px; margin-top: 6px; }
@keyframes signupNudgeFade { from { opacity: 0; } }
@keyframes signupNudgeUp { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .signup-nudge, .signup-nudge-panel { animation: none; } }

/* ── بطاقة «بلغتَ حدّ محاورك» (frontend/src/modules/axes.js) ──
   لون المحور المطلوب (--ax) يصبغ الغلاف، فتُحسّ البطاقة امتداداً لما نقر عليه المستخدم */
.axes-gate { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; background: var(--ds-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); animation: signupNudgeFade var(--ds-dur-2) var(--ds-ease-out); }
.axes-gate-panel { --ax: var(--ds-brand); position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); box-shadow: var(--ds-shadow-lg); animation: signupNudgeUp var(--ds-dur-3) var(--ds-ease-spring); }
@media screen and (min-width: 769px) { .axes-gate { align-items: center; } }
.axes-gate .i-xs { width: 12px; height: 12px; }

.axes-gate-hero { display: grid; justify-items: center; gap: 14px; padding: 30px 20px 18px; border-bottom: 1px solid var(--ds-border);
    background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--ax) 24%, transparent), transparent 72%), color-mix(in srgb, var(--ax) 5%, var(--ds-surface)); }
.axes-gate-orb { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(150deg, var(--ds-brand-hover), var(--ds-brand-press));
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--ds-brand) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.axes-gate-orb .i { width: 27px; height: 27px; }
.axes-gate-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.axes-gate-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--ds-r-pill); font-size: 12.5px; font-weight: var(--ds-fw-bold); line-height: 1.3; color: var(--ds-text); background: var(--ds-surface); border: 1px solid var(--ds-border); max-width: 100%; }
.axes-gate-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axes-gate-chip.is-on { border: 1.5px solid var(--ax); background: color-mix(in srgb, var(--ax) 12%, var(--ds-surface)); }
.axes-gate-chip.is-on .i { color: var(--ax); }
.axes-gate-chip.is-locked { border: 1.5px dashed var(--ax); color: var(--ds-text-2); background: color-mix(in srgb, var(--ax) 5%, var(--ds-surface)); }
.axes-gate-chip.is-locked .i { color: var(--ds-text-3); }

.axes-gate-body { display: grid; gap: 12px; padding: 18px 20px; }
.axes-gate-title { display: block; margin: 0; font-size: 21px; line-height: 1.4; font-weight: 800; text-align: center; color: var(--ds-text); text-wrap: balance; }
.axes-gate-sub { margin: -4px 0 0; font-size: var(--ds-fs-sm); line-height: 1.8; text-align: center; color: var(--ds-text-2); text-wrap: balance; }

.axes-gate-meter { display: grid; gap: 7px; padding: 12px 14px; border-radius: var(--ds-r-md); background: var(--ds-surface-2); }
.axes-gate-segs { display: flex; gap: 6px; }
.axes-gate-seg { flex: 1; height: 8px; border-radius: var(--ds-r-pill); background: var(--ds-surface-3); }
.axes-gate-seg.is-used { background: var(--ds-text-3); }
.axes-gate-seg.is-new { background: var(--ds-brand); transform-origin: right center; animation: axesGateFill .5s var(--ds-ease-out) both; animation-delay: calc(.25s + var(--i, 0) * .12s); }
[dir="ltr"] .axes-gate-seg.is-new, :lang(en) .axes-gate-seg.is-new { transform-origin: left center; }
@keyframes axesGateFill { from { transform: scaleX(0); opacity: .25; } }
.axes-gate-meter-cap { display: flex; justify-content: space-between; gap: 8px; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-3); font-variant-numeric: tabular-nums; }
.axes-gate-meter-cap .is-new { color: var(--ds-brand-fg); }

.axes-gate-perks { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 9px; border-radius: var(--ds-r-md); background: var(--ds-success-soft); font-size: var(--ds-fs-sm); line-height: 1.6; color: var(--ds-text); }
.axes-gate-perks li { display: flex; align-items: flex-start; gap: 9px; }
.axes-gate-perks .i { flex: 0 0 auto; margin-top: 3px; color: var(--ds-success); }

.axes-gate-tiers { list-style: none; margin: 0; padding: 4px 14px; border-radius: var(--ds-r-md); background: var(--ds-surface-2); }
.axes-gate-tiers li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; font-size: var(--ds-fs-sm); }
.axes-gate-tiers li + li { border-top: 1px solid var(--ds-border); }
.axes-gate-tier { font-weight: var(--ds-fw-bold); color: var(--ds-text); }
.axes-gate-tier-n { font-weight: var(--ds-fw-semi); color: var(--ds-brand-fg); }

.axes-gate-cta { min-height: 50px; font-size: 15px; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--ds-brand) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14); }
.axes-gate-alt { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin-top: -2px; }
.axes-gate-alt .is-quiet { color: var(--ds-text-3); font-weight: var(--ds-fw-medium, 500); }
.axes-gate-fine { margin: 0; text-align: center; font-size: var(--ds-fs-xs); line-height: 1.7; color: var(--ds-text-3); }
@media (prefers-reduced-motion: reduce) { .axes-gate, .axes-gate-panel, .axes-gate-seg.is-new { animation: none; } }

/* على الشاشات العريضة: الورقة السفلية تصبح نافذة وسطية بعرض قراءة مريح */
@media screen and (min-width: 769px) {
    .modal { align-items: center; justify-content: center; padding: 24px; }
    .modal-inner {
        max-width: 640px;
        max-height: min(88vh, 900px);
        border-radius: var(--ds-r-xl);
        animation: dsPopIn var(--ds-dur-3) var(--ds-ease-out) forwards;
    }
    .modal-handle { display: none; }
}


/* ============================================================
   13. التنبيهات (Toast) — modules/toast.js
   ============================================================ */
.ds-toast-stack {
    position: fixed;
    inset-inline: 0;
    bottom: calc(var(--nav-h, 0px) + 12px);
    z-index: var(--ds-z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    pointer-events: none;
}
@media screen and (min-width: 769px) {
    .ds-toast-stack { bottom: 24px; }
}
.ds-toast {
    pointer-events: auto;
    max-width: 440px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ds-r-md);
    background: #1B2029;
    color: #F3F4F6;
    font-family: inherit;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    line-height: 1.6;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .06);
    animation: dsToastIn var(--ds-dur-3) var(--ds-ease-spring) both;
}
.ds-toast.leaving { animation: dsToastOut var(--ds-dur-2) var(--ds-ease-in) forwards; }
.ds-toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    background: rgba(255, 255, 255, .1);
}
.ds-toast-icon .i { width: 14px; height: 14px; stroke-width: 2.6; }
.ds-toast.is-success .ds-toast-icon { background: #16A34A; color: #fff; }
.ds-toast.is-error   .ds-toast-icon { background: #DC2626; color: #fff; }
.ds-toast.is-warning .ds-toast-icon { background: #D97706; color: #fff; }
.ds-toast.is-info    .ds-toast-icon { background: #2563EB; color: #fff; }
.ds-toast.is-brand   .ds-toast-icon { background: var(--ds-brand); color: #fff; }
.ds-toast.is-error { animation: dsToastIn var(--ds-dur-3) var(--ds-ease-spring) both, dsShake 360ms var(--ds-ease-out) 240ms; }
.ds-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ds-toast-msg { min-width: 0; white-space: pre-line; word-break: break-word; }
/* تنبيه بعنوان وزر إجراء (صدور الملخص/التحليل — _showAnalysisReadyAlert في main.js) */
.ds-toast.has-body { padding: 14px 14px 12px; }
.ds-toast.has-body .ds-toast-icon { width: 30px; height: 30px; margin-top: 0; }
.ds-toast.has-body .ds-toast-icon .i { width: 16px; height: 16px; stroke-width: 2.2; }
.ds-toast.is-brand { border-inline-start: 3px solid var(--ds-brand); }
.ds-toast-title { font-weight: var(--ds-fw-bold, 700); color: #fff; line-height: 1.5; }
.ds-toast.has-body .ds-toast-msg {
    color: rgba(243, 244, 246, .78);
    font-size: .95em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ds-toast-action {
    margin-top: 8px;
    padding: 6px 14px;
    border: none;
    border-radius: 999px;
    background: var(--ds-brand);
    color: #fff;
    font-family: inherit;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-bold, 700);
    line-height: 1.5;
    cursor: pointer;
}
.ds-toast-action:hover { background: var(--ds-brand-hover); }
.ds-toast-action:active { transform: scale(.97); }
.ds-toast-close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin: -2px -4px -2px 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-toast-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@keyframes dsToastIn {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes dsToastOut {
    to { opacity: 0; transform: translateY(8px) scale(.97); }
}
@keyframes dsShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}
/* اهتزاز خفيف لحقل فيه خطأ: el.classList.add('ds-shake') */
.ds-shake { animation: dsShake 360ms var(--ds-ease-out); }


/* ============================================================
   14. هياكل التحميل والحالات الفارغة
   ============================================================ */
.sk,
.sk-bar {
    background: linear-gradient(90deg, var(--ds-skeleton) 0%, var(--ds-skeleton-hi) 50%, var(--ds-skeleton) 100%) !important;
    background-size: 200% 100% !important;
    animation: dsShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes dsShimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}
.sk-news-card { padding: 16px; margin-bottom: 12px; }
.sk-badge { height: 20px; width: 64px; border-radius: 6px; }
.sk-title, .sk-title2 { height: 15px; border-radius: 6px; }
.sk-meta { height: 11px; border-radius: 6px; margin-top: 4px; }

/* هيكل الخلاصة أثناء التحميل الأول (بدل شعار دوّار وحيد في وسط شاشة فارغة).
   :has(#newsFeed:empty) يضمن اختفاءه فور وصول أول بطاقة حتى لو بقي الكلاس لأي
   مسار رسم لا يمرّ بـ_setNewsUiState؛ والمتصفحات التي لا تدعم :has تتجاهل
   القاعدتين معاً فيبقى لها مؤشر التحميل القديم كما هو */
#homePage.ds-feed-loading:has(#newsFeed:empty) .skeleton-wrap { display: block; }
#homePage.ds-feed-loading:has(#newsFeed:empty) #emptyState { display: none !important; }
body[data-tv="1"] #homePage .skeleton-wrap { display: none !important; }

/* الحالة الفارغة/الخطأ: أيقونة داخل دائرة ناعمة + عنوان + وصف */
#emptyStateIcon.ds-empty-icon,
.ds-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface-2);
    color: var(--ds-text-3);
    margin-bottom: 14px;
    font-size: 0 !important;
    opacity: 1 !important;
    animation: dsPopIn var(--ds-dur-3) var(--ds-ease-out);
}
.ds-empty-icon .i { width: 28px; height: 28px; stroke-width: 1.75; }
#emptyStateTitle { font-size: var(--ds-fs-body); font-weight: var(--ds-fw-semi); color: var(--ds-text); }
#emptyStateDesc { font-size: var(--ds-fs-sm); color: var(--ds-text-3); max-width: 300px; text-align: center; line-height: 1.7; }


/* ============================================================
   15. الصفحات والانتقالات
   ============================================================ */
/* شفافية فقط (بلا transform): الصفحات تحتوي عناصر position:fixed، وأي transform
   على أبٍ لها يجعلها تتموضع نسبةً له لحظة الانتقال */
.page.active { animation: dsFadeIn var(--ds-dur-3) var(--ds-ease-out); }

/* شريط «آخر الأخبار» الفاصل */
.feed-divider { color: var(--ds-text-3); font-weight: var(--ds-fw-semi); }

/* شريط عدم الاتصال */
.offline-top-bar {
    background: color-mix(in srgb, var(--ds-text) 92%, transparent);
    color: var(--ds-surface);
    border-radius: var(--ds-r-md);
    margin: 8px 0;
    font-weight: var(--ds-fw-semi);
    backdrop-filter: blur(10px);
}

/* تحسينات الأجهزة اللوحية: هوامش أوسع وعرض قراءة مريح للبطاقات الفردية */
@media screen and (min-width: 600px) and (max-width: 768px) {
    #appScroll > .page { padding-inline: 20px !important; }
    #morePage > *, #settingsPage .settings-inner-wrap, #verifyPage > * { max-width: 620px; margin-inline: auto; }
}
@media screen and (min-width: 769px) {
    #morePage > * { max-width: 720px; margin-inline: auto; }
    #settingsPage .settings-inner-wrap { max-width: 820px; margin-inline: auto; }
    #verifyPage > * { max-width: 760px; margin-inline: auto; }
}

/* الشاشات الصغيرة جداً (≤ 359px): تقليل الحشو كي لا تزدحم البطاقات */
@media screen and (max-width: 359px) {
    .news-card-content { padding: 13px; }
    .nav-btn { font-size: 9.5px; }
    #homeActions > button { width: 36px !important; height: 36px !important; }
}


/* ============================================================
   15ب. وضع القيادة (#cmdOverlay — frontend/src/modules/cmd.js)
   ------------------------------------------------------------
   داكن دائماً (رموز --ds-* الداكنة مطبّقة على #cmdOverlay في قسم 1): وهج أقل
   ليلاً وتباين أعلى، كشاشات السيارات. نص كبير جداً، خبر جارٍ مميَّز بوضوح،
   وأزرار التحكم في شريط سفلي كبير في متناول الإبهام.
   ============================================================ */
#cmdOverlay {
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font);
}
html[lang="ku"] #cmdOverlay { font-family: 'Noto Sans Arabic', system-ui, sans-serif; }

/* الترويسة */
#cmdHeader {
    position: relative;
    z-index: 20;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px;
    background: var(--ds-bg);
    border-bottom: 1px solid var(--ds-border);
    box-shadow: none;
}
.cmd-head-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cmd-head-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ds-brand-soft); color: var(--ds-brand-fg);
}
.cmd-head-icon .i { width: 22px; height: 22px; }
.cmd-head-name { font-size: 17px; font-weight: var(--ds-fw-bold); line-height: 1.3; }
.cmd-status { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: 12.5px; font-weight: var(--ds-fw-semi); color: var(--ds-text-2); }
#cmdReadingDot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ds-text-4); }
#cmdReadingDot.reading { background: var(--ds-brand); animation: cmdDotRing 1.6s ease-out infinite; }
#cmdReadingDot.paused  { background: var(--ds-warning); animation: none; }
#cmdReadingDot.muted   { background: var(--ds-text-4); animation: none; }
#cmdReadingDot.waiting { background: var(--ds-success); animation: cmdDotBreathe 2.4s ease-in-out infinite; }
@keyframes cmdDotRing { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 100% { box-shadow: 0 0 0 9px rgba(229, 72, 77, 0); } }
@keyframes cmdDotBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.cmd-ctrl-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ds-border-strong);
    background: var(--ds-surface-2);
    color: var(--ds-text);
    font-size: 0;
    transition: background-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out), color var(--ds-dur-2);
}
.cmd-ctrl-btn .i { width: 22px; height: 22px; }
.cmd-ctrl-btn:active { transform: scale(.92); }
.cmd-ctrl-exit { background: var(--ds-surface-2); color: var(--ds-text-2); border-color: var(--ds-border-strong); }
@media (hover: hover) { .cmd-ctrl-btn:hover { background: var(--ds-surface-3); } }

/* التغذية: عمود قراءة مريح في المنتصف، ومساحة سفلية للشريط */
#cmdFeed { padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 132px); scroll-padding-block: 90px 140px; }
#cmdFeed > * { max-width: 860px; margin-inline: auto; }

.cmd-news-item {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: 22px;
    padding: 22px 24px 20px;
    margin-bottom: 14px;
    box-shadow: none;
    transition: opacity .35s var(--ds-ease-out), transform .35s var(--ds-ease-out), border-color .35s, box-shadow .35s, background-color .35s;
}
.cmd-news-item.cmd-reading {
    border-color: color-mix(in srgb, var(--ds-brand) 70%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ds-brand) 9%, var(--ds-surface)), var(--ds-surface) 70%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ds-brand) 35%, transparent), 0 24px 56px -24px rgba(229, 72, 77, .5);
}
.cmd-news-item.cmd-done { opacity: .36; transform: scale(.985); }
.cmd-news-item.cmd-new { border-color: var(--ds-brand); animation: cmdNewIn .5s var(--ds-ease-out) both; }
@keyframes cmdNewIn {
    from { opacity: 0; transform: translateY(-12px); box-shadow: 0 0 0 4px rgba(229, 72, 77, .3); }
    to   { opacity: 1; transform: none; }
}

.cmd-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cmd-urgency {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0;
    padding: 5px 12px;
    border: none;
    border-radius: var(--ds-r-pill);
    font-size: 13px; font-weight: var(--ds-fw-bold);
    letter-spacing: 0;
}
.cmd-urgency .i { width: 15px; height: 15px; stroke-width: 2.4; }
.cmd-urgency.exceptional { border: 0; background: var(--ds-warning-soft); color: var(--ds-warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-warning) 40%, transparent); }
.cmd-urgency.critical    { border: 0; background: var(--ds-danger-soft);  color: var(--ds-danger); }
.cmd-urgency.urgent      { border: 0; background: rgba(251, 146, 60, .14); color: #FDBA74; }
.cmd-urgency.normal      { border: 0; background: var(--ds-surface-2);    color: var(--ds-text-2); }

/* «يُقرأ الآن» — يظهر على الخبر الجاري فقط، مع موجات صوت متحركة */
.cmd-now { display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--ds-fw-bold); color: var(--ds-brand-fg); }
.cmd-news-item.cmd-reading .cmd-now { display: inline-flex; animation: dsFadeIn var(--ds-dur-3) var(--ds-ease-out); }
.cmd-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.cmd-eq i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: cmdEq 1s ease-in-out infinite; }
.cmd-eq i:nth-child(2) { animation-delay: -.3s; }
.cmd-eq i:nth-child(3) { animation-delay: -.6s; }
.cmd-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes cmdEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
#cmdOverlay:has(#cmdReadingDot:not(.reading)) .cmd-eq i { animation-play-state: paused; }

.cmd-title {
    font-size: clamp(24px, 5.4vw, 38px);
    font-weight: var(--ds-fw-bold);
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--ds-text);
    margin-bottom: 12px;
}
.cmd-body {
    font-size: clamp(17px, 3.6vw, 22px);
    line-height: 1.75;
    color: var(--ds-text-2);
    margin-bottom: 14px;
}
.cmd-meta { font-size: 14px; color: var(--ds-text-3); gap: 8px; margin-top: 4px; }
.cmd-meta-dot { background: var(--ds-text-4); }

/* حالات الانتظار/الفراغ/الخطأ */
.cmd-state-msg { padding: 72px 20px; color: var(--ds-text-2); font-size: 17px; font-weight: var(--ds-fw-semi); }
.cmd-state-msg .cmd-icon {
    width: 72px; height: 72px; margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-surface-2); color: var(--ds-text-3);
    font-size: 0; opacity: 1;
}
.cmd-state-msg .cmd-icon .i { width: 32px; height: 32px; stroke-width: 1.75; }
.cmd-state-msg.is-error { color: var(--ds-danger); }
.cmd-state-msg.is-error .cmd-icon { background: var(--ds-danger-soft); color: var(--ds-danger); }
.cmd-state-msg small { display: block; margin-top: 6px; font-size: 13px; font-weight: var(--ds-fw-regular); color: var(--ds-text-3); }
.cmd-loading-wrap { transform: none; margin: 48px auto; }

/* شريط التحكم السفلي */
#cmdDock {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
    background: linear-gradient(to top, var(--ds-bg) 58%, transparent);
    pointer-events: none;
}
#cmdDock > * { pointer-events: auto; }
/* عبارة الانتظار فوق شريط التحكم — للخطط المدفوعة بعد أخبار الفتح (cmd.js _cmdQuietNormal) */
.cmd-quiet-note {
    position: absolute;
    inset-inline: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
    z-index: 31;
    max-width: 520px;
    margin-inline: auto;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 14px;
    border-radius: var(--ds-r-lg);
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    color: var(--ds-text-2);
    font-size: 13px; line-height: 1.6; text-align: center;
    pointer-events: none;
}
.cmd-quiet-note[hidden] { display: none; }
.cmd-quiet-note .i { flex-shrink: 0; color: var(--ds-text-3); }
.cmd-dock-btn { width: 60px; height: 60px; background: var(--ds-surface-2); box-shadow: var(--ds-shadow-md); }
.cmd-dock-btn .i { width: 26px; height: 26px; }
.cmd-dock-main { width: 78px; height: 78px; background: var(--ds-brand); color: #fff; border-color: transparent; box-shadow: 0 14px 32px -10px rgba(229, 72, 77, .65); }
.cmd-dock-main .i { width: 32px; height: 32px; }
.cmd-dock-main .i use { fill: currentColor; }
.cmd-dock-main.active { background: var(--ds-surface-3); color: var(--ds-text); box-shadow: var(--ds-shadow-md); }
.cmd-dock-btn.muted-on { background: var(--ds-warning-soft); color: var(--ds-warning); border-color: color-mix(in srgb, var(--ds-warning) 40%, transparent); }
@media (hover: hover) { .cmd-dock-main:hover:not(.active) { background: var(--ds-brand-hover); } }

/* لوحة إعدادات الناطق — ورقة فوق شريط التحكم */
#cmdSettingsPanel {
    position: absolute;
    z-index: 40;
    inset-inline: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 116px);
    top: auto;
    max-height: min(62vh, 560px);
    overflow-y: auto;
    padding: 18px;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-shadow-lg);
    animation: dsPopIn var(--ds-dur-3) var(--ds-ease-out);
}
.cmd-sp-inner { max-width: 820px; margin: 0 auto; }
.cmd-sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cmd-sp-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: var(--ds-fw-bold); }
.cmd-sp-close { margin-inline-start: auto; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--ds-surface-2); color: var(--ds-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cmd-sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cmd-sp-label { font-size: 12px; font-weight: var(--ds-fw-bold); color: var(--ds-text-3); margin-bottom: 8px; }
.cmd-sp-value { padding: 10px 12px; border-radius: var(--ds-r-sm); background: var(--ds-surface-2); font-size: 13.5px; font-weight: var(--ds-fw-semi); }
.cmd-sp-hint { margin-top: 6px; font-size: 12px; color: var(--ds-text-3); line-height: 1.6; }
#cmdTtsStatus { margin-top: 10px; padding: 8px 12px; border-radius: var(--ds-r-sm); background: var(--ds-surface-2); font-size: 12px; font-weight: var(--ds-fw-semi); color: var(--ds-text-3); text-align: center; }
#cmdTtsStatus[data-state="ok"]    { color: var(--ds-success); background: var(--ds-success-soft); }
#cmdTtsStatus[data-state="error"] { color: var(--ds-danger);  background: var(--ds-danger-soft); }
#cmdTtsStatus[data-state="warn"]  { color: var(--ds-warning); background: var(--ds-warning-soft); }

/* تحذير السلامة */
#cmdSafetyModal { background: rgba(0, 0, 0, .66); z-index: 50; }
#cmdSafetyBox {
    width: calc(100% - 32px);
    max-width: 400px;
    padding: 30px 26px 22px;
    border-radius: var(--ds-r-xl);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-lg);
    animation: dsPopIn var(--ds-dur-3) var(--ds-ease-out);
}
.cmd-safety-icon { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: var(--ds-warning-soft); color: var(--ds-warning); }
.cmd-safety-icon .i { width: 34px; height: 34px; }
.cmd-safety-title { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.cmd-safety-text { font-size: 15.5px; line-height: 1.85; color: var(--ds-text-2); margin-bottom: 24px; }
.cmd-safety-text strong { color: var(--ds-text); }
.cmd-safety-actions { display: flex; flex-direction: column; gap: 8px; }
.cmd-btn-primary, .cmd-btn-ghost { width: 100%; min-height: 52px; border-radius: 16px; font-family: inherit; font-size: 16px; font-weight: var(--ds-fw-bold); cursor: pointer; transition: background-color var(--ds-dur-2), transform var(--ds-dur-1); }
.cmd-btn-primary { border: none; background: var(--ds-brand); color: #fff; }
.cmd-btn-primary:active, .cmd-btn-ghost:active { transform: scale(.98); }
.cmd-btn-ghost { border: 1px solid var(--ds-border-strong); background: transparent; color: var(--ds-text-2); }

/* مقياس التوتر داخل وضع القيادة: أسفل الترويسة، أصغر، بسطح النظام */
body[data-cmd="1"] .tension-widget {
    top: calc(env(safe-area-inset-top, 0px) + 82px);
    left: 12px;
    transform: scale(.82);
    transform-origin: top left;
    background: color-mix(in srgb, var(--ds-surface-2, #1B2029) 88%, transparent);
    border-color: rgba(255, 255, 255, .08);
}

@media (min-width: 769px) {
    #cmdFeed { padding-inline: 32px; }
    .cmd-news-item { padding: 26px 30px 22px; }
    #cmdSettingsPanel { inset-inline: auto; left: 50%; width: min(820px, calc(100% - 48px)); transform: translateX(-50%); animation: none; }
}

/* ============================================================
   15ج. سمة «رصد» في وضع التلفاز (#tvOverlay[data-theme="app"])
   ------------------------------------------------------------
   واجهة «رصد LIVE» بنفس ألوان التطبيق وخطّه وزوايا بطاقاته، وتتبع مظهره
   (فاتح/داكن). متغيرات --tv-* تشير لرموز --ds-* (app-ux/tv-themes.js)، وما
   يلي يعيد تلوين ما بقي مكتوباً بألوان داكنة ثابتة في tv-pro.css وفي أنماط
   الترميز المضمّنة. مشغّلات الفيديو والبث المباشر تبقى على خلفية سوداء،
   وشريط العاجل والوميض العاجل يبقيان بالأحمر ونص أبيض كما في التطبيق.
   ============================================================ */
#tvOverlay[data-theme="app"] {
    --tv-primary: var(--ds-brand);
    --tv-primary-dark: var(--ds-brand-press);
    --tv-teal: var(--ds-info);
    --tv-glass: color-mix(in srgb, var(--ds-surface) 88%, transparent);
    --tv-shadow: var(--ds-shadow-lg);
    --tv-radius: 14px;
    --urgent-bar-gradient: var(--ds-brand);
    background: var(--ds-bg) !important;
    color: var(--ds-text) !important;
    font-family: var(--ds-font) !important;
    color-scheme: light dark;
}
/* لا ضوء محيطي سينمائي — سطح التطبيق الهادئ */
#tvOverlay[data-theme="app"] > div:first-child[style*="radial-gradient"],
#tvOverlay[data-theme="app"] .tv-bg-glow { display: none !important; }

/* الترويسة */
#tvOverlay[data-theme="app"] #tvHeader {
    background: color-mix(in srgb, var(--ds-surface) 92%, transparent) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    box-shadow: var(--ds-shadow-xs) !important;
}
#tvOverlay[data-theme="app"] #tvHeader span[style*="font-size:19px"] { color: var(--ds-brand-fg) !important; text-shadow: none !important; font-weight: 800 !important; }
#tvOverlay[data-theme="app"] .tv-header-title { color: var(--ds-text) !important; text-shadow: none !important; }
#tvOverlay[data-theme="app"] #tvClock .tv-time,
#tvOverlay[data-theme="app"] .tv-time { color: var(--ds-text) !important; font-variant-numeric: tabular-nums !important; text-shadow: none !important; }
#tvOverlay[data-theme="app"] #tvClock .tv-date,
#tvOverlay[data-theme="app"] .tv-date { color: var(--ds-text-3) !important; }
#tvOverlay[data-theme="app"] #tvSettingsBtn {
    background: var(--ds-surface-2) !important; border-color: var(--ds-border-strong) !important; color: var(--ds-text) !important;
    border-radius: 10px !important;
}
#tvOverlay[data-theme="app"] .tv-exit-btn {
    background: var(--ds-brand-soft) !important; border-color: color-mix(in srgb, var(--ds-brand) 35%, transparent) !important; color: var(--ds-brand-fg) !important;
    border-radius: 10px !important;
}
#tvOverlay[data-theme="app"] .tv-hdr-btn,
#tvOverlay[data-theme="app"] .tv-hdr-btn-sm { background: var(--ds-surface-2) !important; border-color: var(--ds-border-strong) !important; color: var(--ds-text-2) !important; }
#tvOverlay[data-theme="app"] .tv-hdr-btn:hover,
#tvOverlay[data-theme="app"] .tv-hdr-btn-sm:hover { background: var(--ds-surface-3) !important; color: var(--ds-text) !important; border-color: var(--ds-border-strong) !important; }

/* لوحة الإعدادات */
#tvOverlay[data-theme="app"] #tvSettingsPanel {
    background: var(--ds-surface) !important;
    border-bottom: 1px solid var(--ds-border-strong) !important;
    box-shadow: var(--ds-shadow-lg) !important;
}
#tvOverlay[data-theme="app"] .tv-sp-tab-btn[style*="background: rgba(180, 130, 255"],
#tvOverlay[data-theme="app"] .tv-sp-tab-btn[style*="background:rgba(180,130,255"] {
    background: var(--ds-brand-soft) !important; border-color: color-mix(in srgb, var(--ds-brand) 35%, transparent) !important; color: var(--ds-brand-fg) !important;
}
#tvOverlay[data-theme="app"] .tv-sp-tab,
#tvOverlay[data-theme="app"] .tv-sp-close,
#tvOverlay[data-theme="app"] .tv-sp-slider-row,
#tvOverlay[data-theme="app"] .tv-sp-toggle,
#tvOverlay[data-theme="app"] .tv-theme-swatch { color: var(--ds-text-2) !important; }
#tvOverlay[data-theme="app"] .tv-sp-val { color: var(--ds-brand-fg) !important; }
#tvOverlay[data-theme="app"] .tv-sp-adj-btn,
#tvOverlay[data-theme="app"] .tv-layout-option,
#tvOverlay[data-theme="app"] .tv-ar-btn { background: var(--ds-surface-2) !important; border-color: var(--ds-border-strong) !important; color: var(--ds-text-2) !important; }
#tvOverlay[data-theme="app"] .tv-layout-option.active,
#tvOverlay[data-theme="app"] .tv-ar-btn.active { background: var(--ds-brand-soft) !important; border-color: color-mix(in srgb, var(--ds-brand) 45%, transparent) !important; color: var(--ds-brand-fg) !important; }
#tvOverlay[data-theme="app"] .tv-layout-preview { background: var(--ds-surface-3) !important; }
#tvOverlay[data-theme="app"] input[type="range"],
#tvOverlay[data-theme="app"] input[type="checkbox"] { accent-color: var(--ds-brand) !important; }
/* رقائق اختيار السمة (تُرسم بألوان بنفسجية inline من tv-themes.js) */
#tvOverlay[data-theme="app"] .tv-theme-chip { background: var(--ds-surface-2) !important; border-color: var(--ds-border-strong) !important; color: var(--ds-text-2) !important; }
#tvOverlay[data-theme="app"] .tv-theme-chip.tv-theme-active { background: var(--ds-brand-soft) !important; border-color: color-mix(in srgb, var(--ds-brand) 50%, transparent) !important; color: var(--ds-brand-fg) !important; }
#tvOverlay[data-theme="app"] #tvThemePicker > div { background: var(--ds-surface-2) !important; border-color: var(--ds-border) !important; box-shadow: none !important; }
#tvOverlay[data-theme="app"] #tvThemePicker > div > div:first-child { color: var(--ds-text) !important; }

/* الأعمدة والإحصاءات والفلاتر */
#tvOverlay[data-theme="app"] #tvStatsBar,
#tvOverlay[data-theme="app"] .tv-col-header,
#tvOverlay[data-theme="app"] .tv-panel-header { background: var(--ds-surface) !important; border-color: var(--ds-border) !important; }
#tvOverlay[data-theme="app"] .tv-stat-item,
#tvOverlay[data-theme="app"] .tv-panel-title { color: var(--ds-text-3) !important; }
#tvOverlay[data-theme="app"] .tv-stat-item strong { color: var(--ds-text) !important; }
#tvOverlay[data-theme="app"] .tv-stat-sep { color: var(--ds-text-4) !important; }
#tvOverlay[data-theme="app"] .tv-filter-btn { border-color: var(--ds-border-strong) !important; color: var(--ds-text-2) !important; }
#tvOverlay[data-theme="app"] .tv-filter-btn:hover,
#tvOverlay[data-theme="app"] .tv-filter-btn.active[data-filter="all"] { background: var(--ds-surface-2) !important; border-color: var(--ds-border-strong) !important; color: var(--ds-text) !important; }

/* بطاقات الأخبار: مثل بطاقات التطبيق */
#tvOverlay[data-theme="app"] .tv-news-item {
    background: var(--ds-surface) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--ds-shadow-xs) !important;
}
#tvOverlay[data-theme="app"] .tv-news-item.tv-item-focused { border-color: var(--ds-border-strong) !important; box-shadow: var(--ds-shadow-md) !important; }
#tvOverlay[data-theme="app"] .tv-news-item.tv-item-focused::before { background: var(--ds-brand) !important; }
#tvOverlay[data-theme="app"] .tv-item-urgent { border-color: color-mix(in srgb, var(--ds-brand) 30%, transparent) !important; background: color-mix(in srgb, var(--ds-brand) 5%, var(--ds-surface)) !important; }
#tvOverlay[data-theme="app"] .tv-item-title { color: var(--ds-text) !important; }
#tvOverlay[data-theme="app"] .tv-item-body { color: var(--ds-text-2) !important; }

/* لوحات «المصفوفة» والمؤشرات والملخص */
#tvOverlay[data-theme="app"] .tv-matrix-panel { background: var(--ds-surface) !important; border-color: var(--ds-border) !important; box-shadow: var(--ds-shadow-sm) !important; }
#tvOverlay[data-theme="app"] .tv-indicator-strip { background: var(--ds-surface-2) !important; border-color: var(--ds-border) !important; }
#tvOverlay[data-theme="app"] .tv-ind-ring-inner { background: var(--ds-surface) !important; }
#tvOverlay[data-theme="app"] .tv-ind-ring-value,
#tvOverlay[data-theme="app"] .tv-ind-title,
#tvOverlay[data-theme="app"] .tv-matrix-digest-headline { color: var(--ds-text) !important; }
#tvOverlay[data-theme="app"] .tv-matrix-digest-overview { color: var(--ds-text-2) !important; }
#tvOverlay[data-theme="app"] .tv-ind-dot { background: var(--ds-surface-3) !important; }
/* ألوان المؤشرات الاستراتيجية (#FFD700 و#00BCD4 و#4CAF50...) مصممة للخلفية
   الداكنة — في المظهر الفاتح تُعتَّم نحو لون النص (≥4.5:1 على السطح)، وتبقى
   كما هي في الداكن. --ind-c و--ind-p يضعهما _tvUpdateIndicators في tv-pro.js */
#tvOverlay[data-theme="app"] { --tv-ind-mix: 45%; }
:root:where([data-theme="dark"]) #tvOverlay[data-theme="app"] { --tv-ind-mix: 100%; }
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) #tvOverlay[data-theme="app"] { --tv-ind-mix: 100%; }
}
#tvOverlay[data-theme="app"] .tv-indicator-strip { --ind-ink: color-mix(in oklab, var(--ind-c, var(--ds-text-2)) var(--tv-ind-mix), var(--ds-text)); }
#tvOverlay[data-theme="app"] .tv-ind-status { color: var(--ind-ink) !important; }
#tvOverlay[data-theme="app"] .tv-ind-ring {
    background: conic-gradient(var(--ind-ink) var(--ind-p, 0%), var(--ds-surface-3) var(--ind-p, 0%)) !important;
    box-shadow: none !important;
}
#tvOverlay[data-theme="app"] .tv-ind-dot.active,
#tvOverlay[data-theme="app"] #tvIndTimerBar { background: var(--ind-ink) !important; box-shadow: none !important; }
#tvOverlay[data-theme="app"] .tv-digest-block-lg { border-color: var(--ds-border) !important; }
#tvOverlay[data-theme="app"] .tv-thin-progress-track,
#tvOverlay[data-theme="app"] .tv-auto-rotate-bar { background: var(--ds-surface-3) !important; }
#tvOverlay[data-theme="app"] #tvLiveProgressFill { background: var(--ds-brand) !important; }
/* منطقة الوسائط تبقى سوداء خلف الصور والفيديو في المظهرين — فنصوصها (عنوان
   الخبر ومصدره أسفل المشغّل، ورسالة الانتظار) فاتحة دائماً بدل --tv-fg الداكن */
#tvOverlay[data-theme="app"] .tv-media-empty,
#tvOverlay[data-theme="app"] #tvMediaEmpty,
#tvOverlay[data-theme="app"] #tvMediaEmpty .rasd-loader-text { color: rgba(255, 255, 255, .7) !important; }
#tvOverlay[data-theme="app"] #tvSelectedInfo { background: rgba(0, 0, 0, .85) !important; border-top-color: rgba(255, 255, 255, .08) !important; }
#tvOverlay[data-theme="app"] #tvSelectedInfo .tv-selected-title { color: #fff !important; }
#tvOverlay[data-theme="app"] #tvSelectedInfo .tv-selected-meta { color: rgba(255, 255, 255, .72) !important; }
#tvOverlay[data-theme="app"] .tv-remote-overlay { background: color-mix(in srgb, var(--ds-surface) 94%, transparent) !important; border-color: var(--ds-border-strong) !important; box-shadow: var(--ds-shadow-lg) !important; }
#tvOverlay[data-theme="app"] .tv-remote-btn { background: var(--ds-surface-2) !important; border-color: var(--ds-border-strong) !important; color: var(--ds-text) !important; }

/* شريط العاجل السفلي: أحمر رصد صلب بنص أبيض (بلا حواف متدرجة داكنة) */
#tvOverlay[data-theme="app"] #tvBottomTicker { background: var(--ds-brand) !important; border-top: none !important; box-shadow: none !important; }
#tvOverlay[data-theme="app"] .tv-ticker-fade-left,
#tvOverlay[data-theme="app"] .tv-ticker-fade-right { display: none !important; }
#tvOverlay[data-theme="app"] .tv-ticker-label2 { background: rgba(0, 0, 0, .18) !important; border-color: rgba(255, 255, 255, .25) !important; }

/* نقطة الخطورة وأيقونة الوسائط في بطاقات التلفاز (كل السمات) — بدل 🔴🟠⚪ و📷🎥 */
#tvOverlay .tv-urg-dot { display: inline-block !important; width: 9px !important; height: 9px !important; margin-top: 5px !important; border-radius: 50% !important; background: var(--tv-fg3, #8B95A5) !important; }
#tvOverlay .tv-urg-dot.is-urgent { background: #FB923C !important; box-shadow: 0 0 0 3px rgba(251, 146, 60, .2) !important; }
#tvOverlay .tv-urg-dot.is-critical { background: var(--tv-red, #E5484D) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tv-red, #E5484D) 25%, transparent) !important; }
#tvOverlay .tv-item-has-media .i { width: 14px !important; height: 14px !important; }

/* الأنماط المضمّنة المكتوبة للخلفية الداكنة (نصوص/أسطح/حدود بيضاء شفافة) —
   تُعاد إلى رموز التطبيق خارج مناطق الفيديو والشريط الأحمر والوميض العاجل */
#tvOverlay[data-theme="app"] :is([style*="color:#fff"], [style*="color: rgb(255, 255, 255)"]):not([style*="background:var(--tv-red)"]):not(:is(#tvMediaPlayer, #tvLiveSection, #tvMatrixVideoWrap, #tvSelectedInfo, #tvBottomTicker, #tvBreakingFlash, .tv-breaking-flash, #tvLiveInfo) *) {
    color: var(--ds-text) !important;
}
#tvOverlay[data-theme="app"] :is([style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"]):not(:is(#tvMediaPlayer, #tvLiveSection, #tvMatrixVideoWrap, #tvSelectedInfo, #tvBottomTicker, #tvBreakingFlash, .tv-breaking-flash, #tvLiveInfo) *) {
    color: var(--ds-text-2) !important;
}
#tvOverlay[data-theme="app"] :is([style*="background:rgba(255,255,255"], [style*="background: rgba(255, 255, 255"]):not(:is(#tvMediaPlayer, #tvLiveSection, #tvMatrixVideoWrap, #tvSelectedInfo, #tvBottomTicker, #tvBreakingFlash) *) {
    background: var(--ds-surface-2) !important;
}
#tvOverlay[data-theme="app"] :is([style*="solid rgba(255,255,255"], [style*="solid rgba(255, 255, 255"]):not(:is(#tvMediaPlayer, #tvLiveSection, #tvMatrixVideoWrap, #tvSelectedInfo, #tvBottomTicker, #tvBreakingFlash) *) {
    border-color: var(--ds-border-strong) !important;
}
#tvOverlay[data-theme="app"] [style*="color:#C0A0FF"],
#tvOverlay[data-theme="app"] [style*="color: rgb(192, 160, 255)"] { color: var(--ds-brand-fg) !important; }

/* ============================================================
   16. تقليل الحركة — احترام إعداد النظام بالكامل
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    /* مؤشرات التحميل تبقى تدل على نشاط — نبض شفافية هادئ بدل الدوران/اللمعان */
    .sk, .sk-bar, .ds-spinner, .new-badge-spinner {
        animation: dsReducedPulse 1.6s ease-in-out infinite !important;
    }
    @keyframes dsReducedPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
}

/* ============================================================
   17. خط حقول الإدخال 16px على اللمس
   ============================================================ */
/* التكبير بالأصابع معطّل (user-scalable=no + gesturestart في main.js) — حجم الخط
   يُختار من الإعدادات (3 أحجام، --user-font-scale). يبقى هذا الحد احتياطاً: Safari
   على iOS يكبّر الصفحة عند التركيز على حقل خطه أقل من 16px. */
@media (hover: none) and (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select {
        font-size: max(16px, 1em) !important;
    }
}

/* ============================================================
   18. الاشتراك اليدوي وسؤال الإلغاء (2026-10-02)
   manualCheckout.js و churnSurvey.js
   ============================================================ */
.rc-panel .ds-dialog-body { gap: 16px; }
.rc-amount { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.rc-block { display: flex; flex-direction: column; gap: 8px; }
.rc-label { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi); color: var(--ds-text); }
.rc-hint { margin: 0; font-size: var(--ds-fs-xs); color: var(--ds-text-3); line-height: 1.6; }
.rc-seg { flex-wrap: wrap; }
.rc-methods .ds-seg-btn { min-width: 30%; }
.rc-order, .rc-account, .rc-gift {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: var(--ds-r-md);
    background: var(--ds-surface-2); border: 1px solid var(--ds-border);
}
.rc-order span, .rc-gift span { font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.rc-order-id, .rc-gift b { font-size: var(--ds-fs-body); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.rc-order .rc-copy, .rc-account .rc-copy, .rc-gift .rc-copy { margin-inline-start: auto; }
.rc-account > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-account-no { font-size: var(--ds-fs-body); font-weight: var(--ds-fw-bold); font-variant-numeric: tabular-nums; }
.rc-upload { cursor: pointer; }
.rc-phone { text-align: left; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rc-phone::placeholder { letter-spacing: .08em; }
.rc-phone.is-invalid { border-color: var(--ds-danger); box-shadow: 0 0 0 3px var(--ds-danger-soft); }
.rc-center { text-align: center; }
/* اختيار «واتساب»: زر يفتح محادثة التطبيق — أخضر واتساب داكن ليبقى النص الأبيض مقروءاً */
.rc-wa-btn { background: #128C4B; border-color: #128C4B; color: #fff; }
.rc-wa-btn:hover { background: #0F7A41; border-color: #0F7A41; }
.rc-wa-btn:active { background: #0C6636; }
.rc-cancel { align-self: center; color: var(--ds-text-3); }
#myOrdersBox:empty { display: none; }
.rc-orders { margin: 12px 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.rc-order-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--ds-border); }
.rc-order-row:first-of-type { border-top: 0; padding-top: 0; }
.rc-order-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rc-order-main span { font-size: var(--ds-fs-xs); color: var(--ds-text-3); font-variant-numeric: tabular-nums; }
.rc-status { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); padding: 3px 10px; border-radius: 999px; background: var(--ds-surface-2); color: var(--ds-text-2); }
.rc-status.is-paid { background: var(--ds-success-soft); color: var(--ds-success); }
.rc-status.is-pending_review { background: var(--ds-info-soft); color: var(--ds-info); }
.rc-status.is-awaiting_payment { background: var(--ds-warning-soft); color: var(--ds-warning); }
.rc-status.is-rejected { background: var(--ds-danger-soft); color: var(--ds-danger); }
.rc-reject { flex-basis: 100%; color: var(--ds-danger); }
.rc-gift { flex-basis: 100%; }
.cs-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-reason { flex: 1 1 45%; background: var(--ds-surface-2); border: 1px solid var(--ds-border); white-space: normal; }
.cs-reason[aria-checked="true"] { background: var(--ds-brand-soft); color: var(--ds-brand-fg); border-color: color-mix(in srgb, var(--ds-brand) 35%, transparent); }
.cs-text { resize: vertical; min-height: 60px; }

/* ============================================================
   19. لوحة القصة الحية: ملخص سطرين، روايتان متقابلتان، فصول (2026-10-02)
   (stories.js renderStory — البيانات من backend/services/storyInsights.js)
   ============================================================ */
.story-chip::before {
    content: ''; width: 12px; height: 12px; flex-shrink: 0; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='6' cy='5.5' r='2.2'/%3E%3Ccircle cx='6' cy='18.5' r='2.2'/%3E%3Cpath d='M6 7.7v8.6M11 5.5h8M11 12h6M11 18.5h8'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='6' cy='5.5' r='2.2'/%3E%3Ccircle cx='6' cy='18.5' r='2.2'/%3E%3Cpath d='M6 7.7v8.6M11 5.5h8M11 12h6M11 18.5h8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.story-summary {
    display: flex; flex-direction: column; margin: 0 0 14px;
    border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); background: var(--ds-surface-2); overflow: hidden;
}
.story-summary button {
    display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: start; cursor: pointer;
    padding: 9px 12px; border: 0; background: none; font-family: inherit; color: var(--ds-text);
}
.story-summary button + button { border-top: 1px solid var(--ds-border); }
.story-summary i {
    font-style: normal; flex-shrink: 0; min-width: 52px;
    font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-bold); color: var(--brief-accent, var(--ds-brand));
}
.story-summary span {
    font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.story-narr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.story-narr-col {
    min-width: 0; padding: 10px 11px; border-radius: var(--ds-r-md);
    background: var(--ds-surface-2); border: 1px solid var(--ds-border);
    border-top: 3px solid var(--narr-c, var(--ds-text-3));
}
.story-narr-col:first-child { --narr-c: var(--ds-info); }
.story-narr-col:last-child { --narr-c: var(--ds-warning); }
.story-narr-head { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); color: var(--ds-text); }
.story-narr-src { font-size: var(--ds-fs-2xs); color: var(--ds-text-3); margin-top: 2px; overflow-wrap: anywhere; }
.story-narr-col ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.story-narr-col li button {
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: start; cursor: pointer;
    padding: 0; border: 0; background: none; font-family: inherit;
    font-size: var(--ds-fs-xs); line-height: 1.65; color: var(--ds-text);
}
.story-narr-col time { font-size: var(--ds-fs-2xs); color: var(--ds-text-3); }
@media (max-width: 380px) { .story-narr { grid-template-columns: 1fr; } }
.story-side {
    display: inline-block; padding: 0 6px; margin-inline-end: 2px; border-radius: 6px;
    font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-semi); line-height: 1.7;
    color: var(--ds-text-2); background: var(--ds-surface-2); border: 1px solid var(--ds-border);
}
.story-chapter + .story-chapter { margin-top: 12px; }
.story-chapter-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
    font-size: var(--ds-fs-xs); color: var(--ds-text-3);
}
.story-chapter-head b { font-size: var(--ds-fs-sm); color: var(--ds-text); }
/* «فصول مصوّرة» (stories.js renderStory): رقم الفصل كبير بلون القصة، وصورة خبره الأبرز
   مطبوعة بإطار أبيض مائلة بالتناوب؛ وغلاف القصة يذوب في رأس اللوحة (قناع يعمل مع الوضعين) */
.story-chapter-head.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 6px 0 8px; }
.story-ch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.story-ch-text b { display: flex; align-items: baseline; gap: 8px; }
.story-ch-n { font-size: 26px; font-weight: 800; line-height: 1; color: var(--brief-accent, var(--ds-brand)); }
.story-chapter-head:not(.has-photo) .story-ch-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.story-ch-photo { display: block; width: 112px; height: 84px; padding: 4px 4px 12px; border-radius: 4px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); transform: rotate(3deg); }
.story-chapter-head[data-tilt="b"] .story-ch-photo { transform: rotate(-3deg); }
.story-ch-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }
.story-hero { height: 190px; margin: -18px -18px -58px; overflow: hidden; border-radius: 20px 20px 0 0; pointer-events: none; }
.story-hero img { width: 100%; height: 100%; object-fit: cover; display: block;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, .5) 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, .5) 68%, transparent 100%); }
.story-hero ~ .story-eyebrow, .story-hero ~ .story-title { position: relative; }
.story-hero ~ .story-title { font-size: 19px; }
.story-prev {
    margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit;
    font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-brand); text-decoration: underline;
}

/* ============================================================
   20. «منطقتي»: المنتقي، بطاقة الإعدادات، شارة «منطقتك» (2026-10-02)
   (frontend/src/modules/zones.js)
   ============================================================ */
.zone-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.zone-pick select { flex: 1 1 150px; min-width: 0; }
.zone-list { display: flex; flex-direction: column; gap: 8px; }
.zone-simple { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.zone-simple .zone-locate { align-self: flex-start; }
.zone-locate { display: inline-flex; align-items: center; gap: 6px; }
.zone-status, .zone-hint { font-size: var(--ds-fs-xs); color: var(--ds-text-3); min-height: 1em; }
.zone-settings-body { padding: 16px; }
.zone-settings { display: flex; flex-direction: column; gap: 10px; }
.zone-row { display: flex; gap: 8px; flex-wrap: wrap; }
.zone-levels { flex-wrap: wrap; }
.zone-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--ds-fs-sm); color: var(--ds-text-2); cursor: pointer; }
.zone-upsell { font-size: var(--ds-fs-xs); }
.zone-upsell-btn {
    margin-inline-start: 4px; padding: 0; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-weight: var(--ds-fw-bold); color: var(--ds-brand); text-decoration: underline;
}
.zone-card-icon { background: var(--ds-info-soft); color: var(--ds-info); }
.tag.tag-zone { background: var(--ds-info-soft); color: var(--ds-info); border-color: transparent; font-weight: var(--ds-fw-semi); }
.tag.tag-zone .i { width: 12px; height: 12px; }
.rasd-onb-zone .zone-simple select { font-size: 16px; }

/* ============================================================
   21. Leaflet — منقولة من tv-pro.css كما هي (2026-10-02): tv-pro.css صار يُحمَّل
   عند فتح وضع التلفاز فقط، وهذه القواعد تخص خريطة التطبيق أيضاً
   ============================================================ */
.leaflet-container {
    background: #0B0E14 !important;
    font-family: inherit !important;
}
.leaflet-bar {
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
}
.leaflet-bar a {
    background-color: rgba(20,24,35,0.85) !important;
    color: rgba(255,255,255,0.7) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.leaflet-bar a:hover {
    background-color: #C0A0FF !important;
    color: #000 !important;
}

/* ============================================================
   22. ورقة الترقية الموحّدة (2026-10-02) — modules/upgradeSheet.js
   ============================================================ */
.up-panel { max-width: 400px; overflow-x: hidden; }
.up-panel .ds-dialog-close { z-index: 2; }
.up-media { position: relative; background: #0b0b12; border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0; line-height: 0; }
.up-media svg { width: 100%; height: auto; display: block; }
.up-lock {
    position: absolute; inset-inline-end: 14px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); color: #fff; line-height: 1;
}
.up-media + .up-head { padding-top: 16px; }
.up-body { gap: 12px; }
.up-loading { text-align: center; color: var(--ds-text-3); font-size: var(--ds-fs-sm); padding: 8px 0; }
.up-plan {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--ds-r-md); background: var(--ds-brand-soft); color: var(--ds-brand-fg);
}
.up-plan-name { font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-body); }
.up-price { font-size: var(--ds-fs-sm); font-variant-numeric: tabular-nums; }
.up-price b { font-size: var(--ds-fs-h3); }
.up-price small { color: var(--ds-text-3); }
.up-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.up-list li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ds-fs-sm); line-height: 1.6; color: var(--ds-text); }
.up-list li .i { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--ds-success); }
.up-list .up-inherit { color: var(--ds-text-2); }
.up-pay { width: 100%; }
.up-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.up-link {
    padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit;
    font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi); color: var(--ds-brand); text-decoration: underline;
}

/* ============================================================
   «وضع المتجر» — رصد داخل تطبيق Google Play / App Store
   (native-init.js يضيف html.is-store-app؛ modules/storeApp.js)
   لا أسعار ولا دعوة للشراء: الميزة المقفلة «متاحة للمشتركين» فقط.
   ============================================================ */
.up-store { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.up-store p { margin: 0; font-size: var(--ds-fs-sm); line-height: 1.8; color: var(--ds-text-2); }
.up-store-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--ds-r-pill);
    background: var(--ds-brand-soft); color: var(--ds-brand-fg); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi);
}
.up-store-badge .i { width: 15px; height: 15px; }
.store-acc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.store-acc .ds-icon-tile { align-self: flex-start; }
.store-acc .ds-subtitle { margin: 0; }
.store-acc .ds-btn { margin-top: 6px; }
.store-acc-kicker { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi); color: var(--ds-text-3); }
.store-acc-email { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.store-acc-email .i { width: 15px; height: 15px; flex-shrink: 0; }
.store-acc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.store-acc-list li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ds-fs-sm); line-height: 1.6; color: var(--ds-text); }
.store-acc-list li .i { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--ds-success); }
.store-acc-actions { margin: 4px 0 24px; }
/* «حذف الحساب» (modules/accountDelete.js) — رابط هادئ تحت تسجيل الخروج، ونافذة تأكيد بالبريد */
.acc-del-link {
    display: block; margin: 10px auto 0; padding: 6px 10px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: var(--ds-fs-xs); color: var(--ds-text-3); text-decoration: underline;
}
.acc-del-link:hover { color: var(--ds-danger); }
.acc-del-body { gap: 10px; }
.acc-del-body p { margin: 0; font-size: var(--ds-fs-sm); line-height: 1.8; color: var(--ds-text-2); }
.acc-del-body .acc-del-muted { font-size: var(--ds-fs-xs); color: var(--ds-text-3); }
.acc-del-body .acc-del-warn { padding: 10px 12px; border-radius: var(--ds-r-md); background: var(--ds-warning-soft); color: var(--ds-warning); font-weight: var(--ds-fw-semi); }
.acc-del-label { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi); color: var(--ds-text); }
.acc-del-err { font-size: var(--ds-fs-xs); color: var(--ds-danger); }
.acc-del-go { background: var(--ds-danger); }
/* «أبلغ عن هذا المحتوى» (modules/contentReport.js) — تحت كل محتوى يكتبه الذكاء الاصطناعي */
.ai-report-link {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: var(--ds-fs-xs); color: var(--ds-text-3);
}
.ai-report-link .i { width: 13px; height: 13px; }
.ai-report-link:hover { color: var(--ds-danger); }
.ai-report-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.ai-report-body { gap: 10px; }
.ai-report-reasons { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.ai-report-reasons label {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
    border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-md); font-size: var(--ds-fs-sm); color: var(--ds-text);
}
.ai-report-reasons label:has(input:checked) { border-color: var(--ds-brand); background: var(--ds-brand-soft); }
.ai-report-reasons input { accent-color: var(--ds-brand); margin: 0; }
.ai-report-body textarea { resize: vertical; min-height: 70px; }
.ai-report-err { font-size: var(--ds-fs-xs); color: var(--ds-danger); }
/* «اختبر تطبيق رصد لأندرويد» (modules/betaTesters.js) */
.beta-note { margin: 0; font-size: var(--ds-fs-xs); color: var(--ds-text-3); line-height: 1.8; }
.beta-status { margin: 0; padding: 12px 14px; border-radius: var(--ds-r-md); background: var(--ds-brand-soft); color: var(--ds-text); font-size: var(--ds-fs-sm); line-height: 1.8; }
/* سهم «ترقية» المتحرك لا معنى له حين يصير الزر «للمشتركين»؛ تثبيت التطبيق كموقع وبرنامج الدعوات لا مكان لهما */
.is-store-app .upgrade-cta-arrow,
.is-store-app #installAppCard,
.is-store-app #iosBanner,
.is-store-app #moreInviteRow { display: none !important; }

/* ============================================================
   23. وضع العرض «مصغرات» (2026-10-02) — الافتراضي
   ============================================================ */
/* نفس بطاقة «قائمة»، لكن الخبر الذي له صورة/فيديو (.has-media من renderNewsCard)
   يأخذ مصغّرة مربعة في الطرف المقابل (يسار العربية/الكردية، يمين الإنجليزية)
   وبجانبها العنوان، ومن المتن ما يتسع له ارتفاعها فقط (app-ux.js: _fitThumbCards
   يضبط --tb-lines أو يخفي المتن). .news-card-content يصير display:contents
   فتُرصف عناصره مع المصغّرة في شبكة البطاقة نفسها. صورة فشل تحميلها
   (.media-broken) تُعيد البطاقة لشكل القائمة. */
#newsFeed.view-thumbs {
    --tb-size: 104px;
    --tb-gap: 12px;
}
@media (max-width: 360px) { #newsFeed.view-thumbs { --tb-size: 88px; } }
@media (min-width: 769px) { #newsFeed.view-thumbs { --tb-size: 116px; } }
body[data-density="compact"] #newsFeed.view-thumbs { --tb-size: 88px; }

#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--tb-size);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
        "chip  chip"
        "tags  tags"
        "title thumb"
        "body  thumb"
        "foot  foot";
    column-gap: var(--tb-gap);
    padding: 16px 16px 14px;
}
body[data-density="compact"] #newsFeed.view-thumbs .news-card.has-media:not(.media-broken) { padding: 12px; }
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) > .news-card-content {
    display: contents;
}
/* أي عنصر تضيفه وحدة أخرى مستقبلاً يأخذ سطراً كاملاً بدل أن يُحشر في عمود */
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) > .news-card-content > * { grid-column: 1 / -1; }
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) .story-chip { grid-area: chip; }
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) .news-card-tags { grid-area: tags; }
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) .news-card-title {
    grid-area: title;
    align-self: start;
    margin-bottom: 4px;
}
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) .news-card-body {
    grid-area: body;
    align-self: start;
    margin-bottom: 0 !important;
    -webkit-line-clamp: var(--tb-lines, 2);
    line-clamp: var(--tb-lines, 2);
}
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) .news-card-body.tb-hide { display: none; }
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) .news-card-footer {
    grid-area: foot;
    margin-top: 12px;
}

/* المصغّرة */
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) > .news-card-media {
    grid-area: thumb;
    align-self: start;
    display: block;
    width: var(--tb-size);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-top: 3px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-md);
    background: var(--ds-surface-2);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) > .news-card-media::after {
    /* حدّ داخلي خفيف يفصل الصور الفاتحة عن البطاقة */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    pointer-events: none;
}
#newsFeed.view-thumbs .news-card-media .news-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity var(--ds-dur-3) var(--ds-ease-out);
}
@media (hover: hover) {
    #newsFeed.view-thumbs .news-card:hover .news-card-media .news-card-img { transform: scale(1.06); }
}
/* فيديو: زر تشغيل صغير في الوسط، وتدرّج داكن إن لم تتوفر لقطة */
#newsFeed.view-thumbs .news-card-media .news-card-vid-icon {
    width: 34px;
    height: 34px;
    z-index: 1;
    color: #fff;
    background: rgba(10, 12, 16, .55);
    border: 1.5px solid rgba(255, 255, 255, .85);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
#newsFeed.view-thumbs .news-card-media .news-card-vid-icon svg { width: 16px; height: 16px; transform: translateX(1px); }
#newsFeed.view-thumbs .news-card.has-media:not(.media-broken) > .news-card-media:not(:has(img)) {
    background: linear-gradient(145deg, #1f2937, #0b0f17);
}

/* المصغّرة نفسها تقول «صورة/فيديو» — الشارتان زائدتان هنا */
#newsFeed.view-thumbs .news-card .tag-image,
#newsFeed.view-thumbs .news-card .tag-video { display: none; }

/* «عاجل بصورة كاملة» (.card-hero من renderNewsCard — العاجل جداً والاستثنائي بصورة):
   في «مصغرات» تملأ الصورة أعلى البطاقة حتى حوافها وتذوب في خلفيتها (قناع شفاف،
   فيعمل مع الوضعين الفاتح والداكن ومع لون بطاقة العاجل)، والعنوان يصعد فوق طرفها
   الذائب، وشريط «عاجل» على زاويتها بدل شارة الاستعجال في صف الشارات.
   نقطة الشريط تنبض 3 دورات ثم تثبت (لا حركة لا نهائية على بطاقات القائمة) */
#newsFeed.view-thumbs .news-card.card-hero.has-media:not(.media-broken) {
    display: flex;
    flex-direction: column;
    padding: 0;
}
#newsFeed.view-thumbs .news-card.card-hero.has-media:not(.media-broken) > .news-card-content {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    margin-top: -44px;
    padding: 0 16px 14px;
}
#newsFeed.view-thumbs .news-card.card-hero.has-media:not(.media-broken) > .news-card-content > * { grid-column: auto; }
#newsFeed.view-thumbs .news-card.card-hero.has-media:not(.media-broken) > .news-card-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 340px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
#newsFeed.view-thumbs .news-card.card-hero.has-media:not(.media-broken) > .news-card-media::after { display: none; }
#newsFeed.view-thumbs .news-card.card-hero .news-card-media .news-card-img {
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, .55) 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 42%, rgba(0, 0, 0, .55) 72%, transparent 100%);
}
#newsFeed.view-thumbs .news-card.card-hero .news-card-title {
    font-size: calc(1.14rem * var(--user-font-scale, 1));
    font-weight: var(--ds-fw-bold, 800);
    line-height: 1.6;
}
#newsFeed.view-thumbs .news-card.card-hero .news-card-body { -webkit-line-clamp: 3; line-clamp: 3; }
#newsFeed.view-thumbs .news-card.card-hero .news-card-tags .urgency-critical,
#newsFeed.view-thumbs .news-card.card-hero .news-card-tags .urgency-exceptional { display: none; }
#newsFeed.view-thumbs .news-card.card-hero > .time-elapsed {
    z-index: 2;
    background: rgba(10, 12, 16, .55);
    color: #fff;
}
.news-card .hero-ribbon { display: none; }
#newsFeed.view-thumbs .news-card.card-hero .hero-ribbon {
    position: absolute;
    top: 14px;
    inset-inline-start: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 14px;
    background: var(--ds-danger);
    color: #fff;
    font-size: 12px;
    font-weight: var(--ds-fw-bold, 800);
    border-radius: 0 var(--ds-r-pill) var(--ds-r-pill) 0;
}
html[dir="rtl"] #newsFeed.view-thumbs .news-card.card-hero .hero-ribbon { border-radius: var(--ds-r-pill) 0 0 var(--ds-r-pill); padding: 4px 14px 4px 12px; }
.news-card.card-hero .hero-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
}
.news-card.card-hero .hero-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    animation: heroDot 1.6s ease-out 3;
}
@keyframes heroDot {
    from { transform: scale(.6); opacity: .9; }
    to   { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .news-card.card-hero .hero-dot::after { animation: none; } }


/* ============================================================
   شريط تقدّم العمليات الطويلة — modules/jobs.js
   داخل الصفحة (.rj-slot) في مكان التحميل، ولوحة عائمة (.rj-dock) تتبع
   المستخدم إن غادر الصفحة، وتعرض «افتح النتيجة» حين تجهز.
   ============================================================ */
.rj-slot { margin: 10px 0 4px; }
.rj-bar {
    position: relative; height: 6px; border-radius: var(--ds-r-pill);
    background: var(--ds-surface-3); overflow: hidden;
}
.rj-bar i {
    position: relative; display: block; height: 100%; width: 0; overflow: hidden;
    border-radius: inherit; background: var(--ds-brand);
    transition: width 1.4s linear;
}
.rj-bar i::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: rjShine 2s ease-in-out infinite;
}
.rj-bar.is-indet i { width: 32%; transition: none; animation: rjIndet 1.5s var(--ds-ease-in-out) infinite; }
.rj-bar.is-indet i::after { display: none; }
@keyframes rjShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes rjIndet { from { transform: translateX(-110%); } to { transform: translateX(320%); } }
[dir="rtl"] .rj-bar i::after { animation-name: rjShineRtl; }
[dir="rtl"] .rj-bar.is-indet i { animation-name: rjIndetRtl; }
@keyframes rjShineRtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@keyframes rjIndetRtl { from { transform: translateX(110%); } to { transform: translateX(-320%); } }
.rj-meta {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    margin-top: 6px; font-size: var(--ds-fs-xs); color: var(--ds-text-3);
}
.rj-meta [data-f="eta"] { flex-shrink: 0; color: var(--ds-text-2); font-weight: var(--ds-fw-semi); font-variant-numeric: tabular-nums; }
.rj-meta span:empty { display: none; }
.rj-note { margin: 6px 0 0; font-size: var(--ds-fs-2xs); color: var(--ds-text-3); }

.rj-dock {
    position: fixed; z-index: calc(var(--ds-z-toast) - 1);
    inset-inline-end: 24px; bottom: 24px;
    width: min(340px, calc(100vw - 32px));
    display: flex; flex-direction: column; gap: 8px;
    animation: dsToastIn var(--ds-dur-3) var(--ds-ease-spring) both;
}
.rj-dock[hidden] { display: none; }
.rj-item {
    padding: 11px 13px; border-radius: var(--ds-r-md);
    background: var(--ds-surface); border: 1px solid var(--ds-border-strong);
    box-shadow: var(--ds-shadow-lg); color: var(--ds-text);
}
.rj-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rj-ico { flex-shrink: 0; display: inline-flex; color: var(--ds-brand-fg); }
.rj-item:not(.is-ready) .rj-ico .i { animation: dsSpin 1.2s linear infinite; }
.rj-item.is-ready .rj-ico { color: var(--ds-success); }
.rj-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.rj-txt b { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); }
.rj-txt small { font-size: var(--ds-fs-xs); color: var(--ds-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rj-pct { flex-shrink: 0; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-brand-fg); font-variant-numeric: tabular-nums; }
.rj-item .rj-bar { margin-top: 9px; }
.rj-x {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--ds-text-3); cursor: pointer;
}
.rj-x:hover { background: var(--ds-surface-2); color: var(--ds-text); }
/* التنبيهات فوق اللوحة حين تظهر معاً على الموبايل */
.ds-toast-stack { bottom: calc(var(--nav-h, 0px) + 12px + var(--rasd-jobs-h, 0px)); }
@media screen and (max-width: 768px) {
    .rj-dock { inset-inline: 12px; bottom: calc(var(--nav-h, 0px) + 10px); width: auto; }
}
@media screen and (min-width: 769px) {
    .ds-toast-stack { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .rj-dock, .rj-bar i, .rj-bar i::after, .rj-item .rj-ico .i { animation: none; transition: none; }
    .rj-bar.is-indet i { width: 100%; opacity: .45; animation: none; }
}

/* ============================================================
   19. مساحة لمس أوسع للأزرار الأيقونية على الهاتف (2026-10-17)
   ============================================================ */
/* أزرار تذييل البطاقة ونافذة الخبر (~33×29) وزرّا «طيّ» و«تحديث التحقق»
   أصغر من 44px الموصى بها للإصبع. تُوسَّع منطقة النقر بطبقة شفافة حول الزر
   دون تغيير شكله أو تخطيطه؛ الامتداد الأفقي لا يتجاوز نصف الفراغ بين
   الأزرار المتجاورة (gap:8px) كي لا تتداخل مناطق النقر. */
@media (pointer: coarse) {
    .news-share-btn,
    .signals-inline .signal-btn,
    .brief-icon-btn,
    #verifyRefreshBtn { position: relative; }
    .news-share-btn::after,
    .signals-inline .signal-btn::after {
        content: ''; position: absolute; inset: -8px -4px;
    }
    .brief-icon-btn::after,
    #verifyRefreshBtn::after {
        content: ''; position: absolute; inset: -8px;
    }
}

/* ============================================================
   20. اسحب للتحديث في موجز الأخبار (الهاتف) — main.js _initPullToRefresh
   ============================================================ */
/* الدائرة تخرج من تحت الترويسة (z-index أدنى منها) مع السحب، وتدور أيقونتها
   بقدر المسافة؛ عند تجاوز العتبة تمتلئ بلون العلامة، وتدور باستمرار أثناء الجلب. */
.ptr-indicator {
    position: fixed; z-index: 49; left: 50%; top: calc(var(--header-h, 116px) - 46px);
    width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ds-surface); color: var(--ds-text-3);
    border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-md);
    opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.ptr-indicator .ptr-spin { display: flex; width: 20px; height: 20px; will-change: transform; }
.ptr-indicator svg { width: 20px; height: 20px; }
.ptr-indicator.is-ready { color: var(--ds-brand); border-color: color-mix(in srgb, var(--ds-brand) 40%, transparent); }
.ptr-indicator.is-settling { transition: transform .22s var(--ds-ease-out), opacity .22s var(--ds-ease-out); }
.ptr-indicator.is-loading { color: var(--ds-brand); }
.ptr-indicator.is-loading .ptr-spin { animation: ptrSpin .8s linear infinite; }
@keyframes ptrSpin {
    from { transform: rotate(var(--ptr-from, 0deg)); }
    to   { transform: rotate(calc(var(--ptr-from, 0deg) + 360deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .ptr-indicator.is-settling { transition: opacity .15s linear; }
    .ptr-indicator.is-loading .ptr-spin { animation-duration: 2.4s; }
}

/* ══════════════════════════════════════════════════════════════
   «قائمة» (#newsFeed.view-list — app-ux.js:_applyViewClasses)
   صفوف مضغوطة: خط ملوّن بدرجة الاستعجال على الطرف، ثم دولة الخبر والوقت،
   والعنوان في سطرين على الأكثر، والمصدر تحته. بلا صورة ولا شارات ولا متن.
   سطر الدولة والسهم (main.js:_cardPlaceLine) مخفيان في الوضعين الآخرين.
   ══════════════════════════════════════════════════════════════ */
.news-card-place, .ncp-chev { display: none; }

#newsFeed.view-list {
    --nl-normal: #8FA3BC;
    --nl-urgent: #F08A24;
    --nl-critical: #E5484D;
    --nl-exc-a: #F5C542;
    --nl-exc-b: #D92D2D;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--ds-surface, var(--bg-card));
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-r-lg, 14px);
    overflow: hidden;
    padding: 0;
    margin-block: 12px;
}
@media (prefers-color-scheme: dark) {
    :where(html:not([data-theme="light"])) #newsFeed.view-list { --nl-normal: #5B7290; }
}
:where(html[data-theme="dark"]) #newsFeed.view-list { --nl-normal: #5B7290; }

#newsFeed.view-list > .news-card {
    --nl-bar: var(--nl-normal);
    position: relative;
    display: block;
    margin: 0;
    padding: 12px 18px 12px 38px;
    padding-inline: 18px 38px;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid var(--ds-border) !important;
    border-radius: 0;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
    transition: background-color var(--ds-dur-1, .12s) ease;
}
#newsFeed.view-list > .news-card:last-of-type { border-bottom: none !important; }
#newsFeed.view-list > .news-card.urgent-card { --nl-bar: var(--nl-urgent); }
#newsFeed.view-list > .news-card.urgent-breaking { --nl-bar: var(--nl-critical); }
#newsFeed.view-list > .news-card.exceptional-card { --nl-bar: linear-gradient(to bottom, var(--nl-exc-a), var(--nl-exc-b)); }
@media (hover: hover) {
    #newsFeed.view-list > .news-card:hover { background: var(--ds-surface-2) !important; }
}
#newsFeed.view-list > .news-card:active { background: var(--ds-surface-2) !important; }
#newsFeed.view-list > .news-card:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: -2px; }

/* خط الاستعجال — يحلّ محل شريطي البطاقة الاستثنائية العلوي والسفلي */
#newsFeed.view-list > .news-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 8px;
    inset-inline-end: auto;
    top: 12px;
    bottom: 12px;
    width: 3px;
    height: auto;
    border-radius: 3px;
    background: var(--nl-bar);
    background-size: auto;
    animation: none;
    z-index: 1;
}
#newsFeed.view-list > .news-card::after { content: none; display: none; }

/* ما لا يظهر في القائمة */
#newsFeed.view-list .news-card-media,
#newsFeed.view-list .news-card-tags,
#newsFeed.view-list .news-card-body,
#newsFeed.view-list .tv-card-body,
#newsFeed.view-list .story-chip,
#newsFeed.view-list .news-share-btn,
#newsFeed.view-list [data-signals-slot],
#newsFeed.view-list .stmt-card-line { display: none !important; }

#newsFeed.view-list .news-card-content { padding: 0; display: block; }
#newsFeed.view-list .news-card-content > :nth-last-child(2) { margin-bottom: 0; }

/* السطر الأول: الدولة، والوقت في الطرف المقابل */
#newsFeed.view-list .news-card-place {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    margin-bottom: 4px;
    padding-inline-end: 64px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.4;
}
#newsFeed.view-list .ncp-name { color: var(--ds-text-2, var(--fg2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#newsFeed.view-list .ncp-cat { font-weight: 700; color: var(--ds-text-3); }
#newsFeed.view-list .urgent-breaking .ncp-name,
#newsFeed.view-list .exceptional-card .ncp-name { color: var(--nl-critical); }

#newsFeed.view-list .time-elapsed {
    position: absolute;
    top: 12px;
    inset-inline-end: 38px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ds-text-3);
    line-height: 20px;
}

#newsFeed.view-list .news-card-title {
    margin: 0 0 4px;
    font-size: calc(.95rem * var(--user-font-scale, 1));
    font-weight: var(--ds-fw-semi, 600);
    line-height: 1.6;
    color: var(--ds-text);
    unicode-bidi: plaintext;   /* عنوان إنجليزي في واجهة عربية: اتجاهه ونقاط القطع من لغته */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#newsFeed.view-list .news-card-footer {
    display: flex;
    margin: 0;
    padding: 0;
    border: none;
    min-height: 0;
}
#newsFeed.view-list .news-card-source { font-size: 11.5px; font-weight: 500; color: var(--ds-text-3); }

#newsFeed.view-list .ncp-chev {
    display: block;
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: var(--ds-text-3);
    opacity: .55;
}
#newsFeed.view-list .ncp-chev svg { width: 100%; height: 100%; display: block; }
html[dir="ltr"] #newsFeed.view-list .ncp-chev svg { transform: scaleX(-1); }

body[data-density="compact"] #newsFeed.view-list > .news-card { padding-block: 9px; }