/* ═══════════════════════════════════════════════════════════════
   tv-pro.css — وضع التلفاز الاحترافي
   النسخة 2.0 — تصميم استوديو البث الاحترافي
   يُحمَّل بعد app.css لتجاوز الأنماط الأساسية
   ═══════════════════════════════════════════════════════════════ */

/* ── المتغيرات: السمة الافتراضية (داكن) ── */
#tvOverlay {
    --tv-bg:          #080A0F;
    --tv-bg2:         #0F1219;
    --tv-bg3:         #060809;
    --tv-card:        #131720;
    --tv-card-hover:  #1C2230;
    --tv-card-urgent: #160A0A;
    --tv-border:      rgba(255,255,255,0.06);
    --tv-border2:     rgba(180,30,30,0.5);
    --tv-fg:          #EEEEF5;
    --tv-fg2:         #9AA0B8;
    --tv-fg3:         #4A4E62;
    --tv-primary:     #E53935; /* أساسي */
    --tv-primary-dark:#B71C1C;
    --tv-orange:      #FF8F00;
    --tv-teal:        #00BCD4;
    --tv-green:       #4CAF50;
    --tv-accent-bar:  linear-gradient(90deg, #5B0000 0%, #B71C1C 35%, #E53935 65%, #5B0000 100%);
    --urgent-bar-gradient: linear-gradient(90deg, #5B0000 0%, #B71C1C 35%, #E53935 65%, #5B0000 100%);
    --tv-header-h:    60px;
    --tv-stats-h:     36px;
    --tv-ticker-font-size: 18px;
    --tv-ticker-h:    calc(var(--tv-ticker-font-size, 18px) + 38px);
    --tv-radius:      8px;
    --tv-shadow:      0 8px 40px rgba(0,0,0,0.8);
    --tv-glow-r:      rgba(229,57,53,0.12);
    --tv-glass:       rgba(8,10,15,0.85);
    --tv-col-ratio:   60%;
    --tv-ticker-edge: #5B0000;
}

/* ── السمة: أعمق ── */
#tvOverlay[data-theme="darker"] {
    --tv-bg:    #040508;
    --tv-bg2:   #080A10;
    --tv-bg3:   #030406;
    --tv-card:  #0D1018;
}


/* ═══════════════════════════════════════════════════════════════
   1. OVERLAY الرئيسي
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9100 !important;
    background: var(--tv-bg) !important;
    display: none;
    flex-direction: column !important;
    font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif !important;
    overflow: hidden !important;
    transform-origin: top right !important;
    isolation: isolate;
}

/* ── خلفية ضوء محيطي ── */
#tvOverlay .tv-bg-glow{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 80%, var(--tv-glow-r) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 80% 20%, rgba(40,60,120,0.08) 0%, transparent 60%);
}

/* ═══════════════════════════════════════════════════════════════
   2. HEADER
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvHeader {
    /* تأكد من أن ارتفاع شريط العاجل يتبع المتغير */
    height: var(--tv-ticker-h);
    position: relative;
    z-index: 10;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 28px !important;
    background: linear-gradient(180deg, var(--tv-bg2) 0%, rgba(15,18,25,0.97) 100%) !important;
    border-bottom: 1px solid var(--tv-border2) !important;
    flex-shrink: 0 !important;
    height: var(--tv-header-h) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) !important;
    gap: 16px !important;
}

/* شعار ← نبض حي */
#tvOverlay .tv-header-logo{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
#tvOverlay .tv-logo-pulse{
    width: 8px;
    height: 8px;
    background: var(--tv-red);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--tv-red);
    animation: tvLogoPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes tvLogoPulse {
    0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 8px var(--tv-red); }
    50%      { opacity:.5; transform:scale(0.7); box-shadow:0 0 4px var(--tv-red); }
}
#tvOverlay .tv-header-title{
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: .8px !important;
    text-shadow: 0 0 24px var(--tv-ticker-glow, rgba(229,57,53,.5)) !important;
}
#tvOverlay .tv-live-badge{
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    background: var(--tv-red);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    animation: tvLiveBlink 2.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes tvLiveBlink {
    0%,85%,100% { opacity:1; }
    90%          { opacity:.3; }
}

/* وسط الهيدر — مؤشرات الوضع */
#tvOverlay .tv-header-center{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tvOverlay .tv-mode-dots{
    display: flex;
    gap: 8px;
    align-items: center;
}
#tvOverlay .tv-mode-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
}
#tvOverlay .tv-mode-dot[data-label]::after{
    content: attr(data-label);
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
#tvOverlay .tv-mode-dot.active{
    background: var(--tv-red);
    box-shadow: 0 0 8px var(--tv-red), 0 0 16px var(--tv-ticker-glow, rgba(229,57,53,0.3));
    width: 8px;
    height: 8px;
}
#tvOverlay .tv-mode-dot.passed{
    background: rgba(255,255,255,0.35);
}

/* أزرار الهيدر */
#tvOverlay .tv-header-actions{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
#tvOverlay .tv-hdr-btn{
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
#tvOverlay .tv-hdr-btn:hover{
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
#tvOverlay .tv-hdr-btn.active{
    background: var(--tv-ticker-glow, rgba(229,57,53,0.2)) !important;
    border-color: var(--tv-border2) !important;
    color: var(--tv-red) !important;
}
#tvOverlay .tv-hdr-btn-diag{ color: rgba(100,160,255,0.7); border-color: rgba(100,160,255,0.2); }
#tvOverlay .tv-hdr-btn-diag:hover{ color: #8AABFF; border-color: rgba(100,160,255,0.4); background: rgba(100,160,255,0.1); }
#tvOverlay .tv-hdr-btn-settings{ color: rgba(180,140,255,0.8); border-color: rgba(180,140,255,0.25); }
#tvOverlay .tv-hdr-btn-settings:hover{ color: #C0A0FF; border-color: rgba(180,140,255,0.5); background: rgba(180,140,255,0.1); }

#tvOverlay .tv-exit-btn{
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    border-radius: 7px !important;
    border: 1px solid var(--tv-border2) !important;
    background: var(--tv-ticker-glow, rgba(229,57,53,0.08)) !important;
    color: var(--tv-red) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all .2s !important;
    white-space: nowrap;
}
#tvOverlay .tv-exit-btn:hover{ background: var(--tv-border2) !important; border-color: var(--tv-red) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════
   3. لوحة الإعدادات الاحترافية (مبوبة)
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvSettingsPanel {
    position: absolute !important;
    top: var(--tv-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    background: linear-gradient(180deg, #0D1018 0%, #0A0C12 100%) !important;
    border-bottom: 1px solid var(--tv-border2) !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.8) !important;
    direction: rtl !important;
    max-height: 420px;
    overflow-y: auto;
}
#tvOverlay .tv-sp-inner{ max-width: 1000px; margin: 0 auto; padding: 16px 24px 20px; }
#tvOverlay .tv-sp-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
#tvOverlay .tv-sp-tabs{
    display: flex;
    gap: 4px;
    flex: 1;
}
#tvOverlay .tv-sp-tab{
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
#tvOverlay .tv-sp-tab:hover{ color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }
#tvOverlay .tv-sp-tab.active{
    background: rgba(180,140,255,0.12);
    border-color: rgba(180,140,255,0.3);
    color: #C0A0FF;
}
#tvOverlay .tv-sp-reset{
    background: rgba(255,100,100,0.1);
    border: 1px solid rgba(255,100,100,0.25);
    color: #FF8080;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
#tvOverlay .tv-sp-reset:hover{ background: rgba(255,100,100,0.2); }
#tvOverlay .tv-sp-close{
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.3);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s;
}
#tvOverlay .tv-sp-close:hover{ color: rgba(255,255,255,0.7); }
#tvOverlay .tv-sp-body{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
#tvOverlay .tv-sp-section{ }
#tvOverlay .tv-sp-section-title{
    font-size: 10px;
    font-weight: 800;
    color: var(--tv-fg3);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* شبكة السمات */
#tvOverlay .tv-theme-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 6px;
}
#tvOverlay .tv-theme-swatch{
    padding: 6px 4px;
    border-radius: 6px;
    border: 2px solid transparent;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    color: rgba(255,255,255,0.7);
}
#tvOverlay .tv-theme-dark{ background: linear-gradient(135deg,#080A0F,#131720); }
#tvOverlay .tv-theme-darker{ background: linear-gradient(135deg,#040508,#0D1018); }
#tvOverlay .tv-theme-blood{ background: linear-gradient(135deg,#0A0407,#180609); border-color: rgba(180,20,40,0.3); }
#tvOverlay .tv-theme-night{ background: linear-gradient(135deg,#020B06,#081510); border-color: rgba(0,150,60,0.3); color: rgba(180,255,200,0.8); }
#tvOverlay .tv-theme-swatch:hover, #tvOverlay .tv-theme-swatch.active{ border-color: rgba(255,255,255,0.5); color: #fff; transform: scale(1.04); }
#tvOverlay .tv-theme-swatch.active{ border-color: #C0A0FF; box-shadow: 0 0 0 1px rgba(192,160,255,0.4); }

/* شبكة التخطيط */
#tvOverlay .tv-layout-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
}
#tvOverlay .tv-layout-option{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    position: relative;
}
#tvOverlay .tv-layout-option:hover{ border-color: rgba(255,255,255,0.25); color: #fff; background: rgba(255,255,255,0.07); }
#tvOverlay .tv-layout-option.active{ border-color: #C0A0FF; color: #C0A0FF; background: rgba(192,160,255,0.08); }
#tvOverlay .tv-layout-preview{
    width: 48px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    gap: 2px;
    padding: 3px;
    background: rgba(0,0,0,0.5);
}
#tvOverlay .tv-lp-newsroom::before{ content:''; flex:3; background:rgba(255,255,255,0.15); border-radius:2px; }
#tvOverlay .tv-lp-newsroom::after{ content:''; flex:2; background:rgba(229,57,53,0.25); border-radius:2px; }
#tvOverlay .tv-lp-studio::before{ content:''; flex:1; background:rgba(255,255,255,0.15); border-radius:2px; }
#tvOverlay .tv-lp-studio::after{ content:''; flex:1; background:rgba(229,57,53,0.25); border-radius:2px; }
#tvOverlay .tv-lp-focus::before{ content:''; width:100%; background:rgba(255,255,255,0.12); border-radius:2px; display:block; height:60%; align-self:flex-start; }
#tvOverlay .tv-lp-ticker{ flex-direction:column; justify-content:flex-end; gap:2px; }
#tvOverlay .tv-lp-ticker::before{ content:''; flex:1; background:rgba(255,255,255,0.08); border-radius:2px; }
#tvOverlay .tv-lp-ticker::after{ content:''; height:8px; background:rgba(229,57,53,0.35); border-radius:2px; flex-shrink:0; }

#tvOverlay .tv-plan-badge{
    font-size: 9px;
    font-weight: 800;
    background: rgba(255,180,0,0.15);
    color: #FFD54F;
    border: 1px solid rgba(255,180,0,0.3);
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: 0.5px;
}

/* شرائح مع أزرار */
#tvOverlay .tv-sp-sliders{ display: grid; gap: 8px; }
#tvOverlay .tv-sp-slider-row{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}
#tvOverlay .tv-sp-slider-row span:first-child{ min-width: 80px; }
#tvOverlay .tv-sp-slider-row input[type=range]{ flex: 1; accent-color: #C0A0FF; }
#tvOverlay .tv-sp-adj-btn{
    width: 22px; height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s;
}
#tvOverlay .tv-sp-adj-btn:hover{ background: rgba(255,255,255,0.14); }
#tvOverlay .tv-sp-val{
    min-width: 34px;
    text-align: left;
    color: #C0A0FF;
    font-size: 11px;
    font-weight: 700;
}

/* تبديلات */
#tvOverlay .tv-sp-toggles{ display: grid; gap: 8px; }
#tvOverlay .tv-sp-toggle{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    user-select: none;
}
#tvOverlay .tv-sp-toggle input[type=checkbox]{ accent-color: #C0A0FF; width: 14px; height: 14px; cursor: pointer; }

/* شبكة الدوران التلقائي */
#tvOverlay .tv-autorotate-grid{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
#tvOverlay .tv-ar-btn{
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
#tvOverlay .tv-ar-btn:hover{ border-color: rgba(255,255,255,0.25); color: #fff; }
#tvOverlay .tv-ar-btn.active{ background: rgba(0,188,212,0.15); border-color: rgba(0,188,212,0.5); color: #00BCD4; }

/* ═══════════════════════════════════════════════════════════════
   4. شريط الإحصاءات
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvStatsBar {
    position: relative;
    z-index: 5;
    height: var(--tv-stats-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(0,0,0,0.45);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
    font-size: 11px;
    gap: 16px;
    backdrop-filter: blur(4px);
    transition: all 0.3s;
}
#tvOverlay #tvStatsBar.hidden{ height: 0; overflow: hidden; padding: 0; opacity: 0; }
#tvOverlay .tv-stats-left{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#tvOverlay .tv-stats-right{ display: flex; align-items: center; gap: 8px; }
#tvOverlay .tv-stat-item{ color: rgba(255,255,255,0.5); white-space: nowrap; }
#tvOverlay .tv-stat-item strong{ color: rgba(255,255,255,0.85); font-weight: 800; }
#tvOverlay .tv-stat-urgent strong{ color: var(--tv-red); }
#tvOverlay .tv-stat-sep{ color: rgba(255,255,255,0.15); }

/* أزرار تصفية الأخبار */
#tvOverlay .tv-filter-btns{ display: flex; gap: 4px; }
#tvOverlay .tv-filter-btn{
    padding: 3px 9px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
}
#tvOverlay .tv-filter-btn:hover{ border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
#tvOverlay .tv-filter-btn.active[data-filter="all"]{ background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #fff; }
#tvOverlay .tv-filter-btn.active[data-filter="urgent"]{ background: rgba(255,143,0,0.15); border-color: rgba(255,143,0,0.5); color: var(--tv-orange); }
#tvOverlay .tv-filter-btn.active[data-filter="exceptional"]{ background: rgba(229,57,53,0.15); border-color: rgba(229,57,53,0.5); color: var(--tv-red); }

/* ═══════════════════════════════════════════════════════════════
   5. الجسم الرئيسي — التخطيطات
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvBody {
    display: grid;
    grid-template-columns: var(--tv-col-ratio) 1fr !important;
    flex: 1 !important;
    overflow: hidden !important;
    direction: rtl !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    transition: grid-template-columns 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}

/* التخطيطات الرئيسية التي تعتمد على نسبة الأعمدة (استوديو، غرفة أخبار، تركيز) */
#tvOverlay #tvBody[data-layout="studio"],
#tvOverlay #tvBody[data-layout="newsroom"],
#tvOverlay #tvBody[data-layout="focus"] {
    grid-template-columns: calc(100% - var(--tv-col-ratio)) var(--tv-col-ratio) !important;
}
/* تخطيط: شريط فقط (الوسائط تملأ الشاشة وإخفاء الأخبار) */
#tvOverlay #tvBody[data-layout="ticker"] {
    grid-template-columns: 0% 100% !important;
}
#tvOverlay #tvBody[data-layout="ticker"] #tvNewsCol {
    opacity: 0 !important;
    pointer-events: none !important;
}
#tvOverlay #tvBody[data-layout="ticker"] #tvFsBtn {
    display: none !important;
}

/* توسعة عمود الوسائط */
#tvOverlay #tvBody.media-expanded{
    grid-template-columns: 30% 70% !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. عمود الأخبار (تحسين شامل)
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvNewsCol {
    display: flex !important;
    flex-direction: column !important;
    border-left: 1px solid var(--tv-border) !important;
    background: var(--tv-bg) !important;
    overflow: hidden !important;
    min-height: 0 !important;
    position: relative !important;
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}

/* شريط الدوران التلقائي */
#tvOverlay .tv-auto-rotate-bar{
    height: 2px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#tvOverlay .tv-auto-rotate-fill{
    height: 100%;
    background: linear-gradient(90deg, var(--tv-teal), rgba(0,188,212,0.3));
    width: 0%;
    transition: width 0.1s linear;
}

#tvOverlay #tvNewsList {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 4px 8px 8px !important;
    scroll-behavior: smooth !important;
    min-height: 0 !important;
}
#tvOverlay #tvNewsList::-webkit-scrollbar,
#tvOverlay #tvMatrixNewsList::-webkit-scrollbar,
#tvOverlay #tvMatrixDigestText::-webkit-scrollbar { width: 3px; }
#tvOverlay #tvNewsList::-webkit-scrollbar-track,
#tvOverlay #tvMatrixNewsList::-webkit-scrollbar-track,
#tvOverlay #tvMatrixDigestText::-webkit-scrollbar-track { background: transparent; }
#tvOverlay #tvNewsList::-webkit-scrollbar-thumb,
#tvOverlay #tvMatrixNewsList::-webkit-scrollbar-thumb,
#tvOverlay #tvMatrixDigestText::-webkit-scrollbar-thumb { background: var(--tv-red, rgba(229,57,53,0.3)); border-radius: 2px; }
#tvOverlay #tvNewsList::-webkit-scrollbar-thumb:hover,
#tvOverlay #tvMatrixNewsList::-webkit-scrollbar-thumb:hover,
#tvOverlay #tvMatrixDigestText::-webkit-scrollbar-thumb:hover { background: var(--tv-red, rgba(229,57,53,0.5)); }

/* عنصر الخبر */
#tvOverlay .tv-news-item{
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: var(--tv-radius) !important;
    margin-bottom: 3px !important;
    cursor: default !important;
    transition: background 0.2s, border-color 0.2s !important;
    border: 1px solid transparent !important;
    background: var(--tv-card) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}
#tvOverlay .tv-news-item::before{
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 3px;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: transparent;
    transition: background 0.2s;
}

/* حالة التركيز (في وضع focus) */
#tvOverlay .tv-news-item.tv-item-focused{
    background: var(--tv-card-hover) !important;
    border-color: rgba(255,255,255,0.12) !important;
    padding: 14px 12px !important;
    margin-bottom: 6px !important;
}
#tvOverlay .tv-news-item.tv-item-focused .tv-item-title{ font-size: calc(var(--tv-title-font-size, 15px) + 2px) !important; line-height: 1.7 !important; }
#tvOverlay .tv-news-item.tv-item-focused .tv-item-body{ font-size: var(--tv-body-font-size, 13px) !important; }
#tvOverlay .tv-news-item.tv-item-focused::before{ background: rgba(255,255,255,0.15); }

/* عاجل جداً */
#tvOverlay .tv-item-urgent{
    border-right-color: transparent !important;
    background: var(--tv-card-urgent) !important;
    border-color: rgba(229,57,53,0.12) !important;
}
#tvOverlay .tv-item-urgent::before{ background: var(--tv-red) !important; }
#tvOverlay .tv-item-urgent.tv-item-focused{ border-color: rgba(229,57,53,0.35) !important; }

/* عاجل */
#tvOverlay .tv-item-semi::before{ background: var(--tv-orange) !important; }
#tvOverlay .tv-item-semi{ border-right-color: transparent !important; }

/* الشارة والنص */
#tvOverlay .tv-item-badge{
    font-size: 12px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 4px rgba(229,57,53,0.5));
}
#tvOverlay .tv-item-text{ font-size: var(--tv-body-font-size, 13px) !important; font-weight: 600 !important; color: var(--tv-fg) !important; line-height: 1.65 !important; flex: 1 !important; }
#tvOverlay .tv-item-title{ display: block; font-size: var(--tv-title-font-size, 15px) !important; }
#tvOverlay .tv-item-body{ font-size: var(--tv-body-font-size, 12px) !important; font-weight: 400 !important; color: var(--tv-fg2) !important; line-height: 1.65 !important; margin-top: 5px !important; }
#tvOverlay .tv-item-has-media{ font-size: 11px !important; flex-shrink: 0 !important; opacity: .45 !important; margin-top: 2px !important; }

/* حالة الدخول الجديد */
@keyframes tvNewItemEnter {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#tvOverlay .tv-news-item.tv-item-new{ animation: tvNewItemEnter 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }

/* ── رأس العمود ── */
#tvOverlay .tv-col-header{
    padding: 6px 12px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--tv-fg3) !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--tv-border) !important;
    background: rgba(0,0,0,0.35) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    position: relative !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. عمود الوسائط
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvMediaCol {
    display: flex !important;
    flex-direction: column !important;
    background: var(--tv-bg3) !important;
    overflow: hidden !important;
    min-height: 0 !important;
    border-right: 1px solid var(--tv-border) !important;
    position: relative !important;
}

#tvOverlay .tv-media-header-actions{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
}
#tvOverlay .tv-hdr-btn-sm{
    width: 24px; height: 24px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.18s;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
#tvOverlay .tv-hdr-btn-sm:hover{ background: rgba(255,255,255,0.14); color: #fff; }

/* لوحة الصوت */
#tvOverlay .tv-volume-panel{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(0,0,0,0.6);
    border-bottom: 1px solid var(--tv-border);
    flex-shrink: 0;
    font-size: 14px;
    backdrop-filter: blur(4px);
}
#tvOverlay .tv-volume-panel input[type=range]{
    flex: 1;
    accent-color: var(--tv-teal);
    height: 4px;
}
#tvOverlay .tv-volume-panel span:last-child{ font-size: 11px; color: var(--tv-teal); font-weight: 700; min-width: 32px; }

/* المشغل — استخدام relative/absolute لمنع tvMediaEmpty و tvMediaContent من الظهور جنباً إلى جنب */
#tvOverlay #tvMediaPlayer {
    flex: 1 !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    background: #000 !important;
    min-height: 0 !important;
}
#tvOverlay #tvMediaEmpty {
    position: absolute !important;
    inset: 0 !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,0.12) !important;
    font-size: 13px !important;
    text-align: center !important;
    gap: 10px !important;
    z-index: 1 !important;
}
#tvOverlay #tvMediaContent {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
}
/* توافق مع الكلاس القديم */
#tvOverlay .tv-media-empty {
    position: absolute !important;
    inset: 0 !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255,255,255,0.12) !important;
    font-size: 13px !important;
    text-align: center !important;
    gap: 10px !important;
    z-index: 1 !important;
}

#tvOverlay .tv-video-wrap{ width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; background:#000; }
#tvOverlay .tv-video-wrap video{ width:100%; height:100%; object-fit:contain; background:#000; display:block; }
#tvOverlay .tv-video-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; width:100%; gap:12px; color:rgba(255,255,255,.3); font-size:12px; }
#tvOverlay .tv-video-spinner{ width:28px; height:28px; border:2.5px solid rgba(255,255,255,.08); border-top-color:var(--tv-red); border-radius:50%; animation:tvSpin .75s linear infinite; }
@keyframes tvSpin { to { transform:rotate(360deg); } }

#tvOverlay #tvSelectedInfo { padding:6px 12px; background:rgba(0,0,0,.75); border-top:1px solid var(--tv-border); flex-shrink:0; backdrop-filter:blur(4px); }
#tvOverlay .tv-selected-title{ font-size:12px; font-weight:700; color:var(--tv-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tvOverlay .tv-selected-meta{ font-size:10px; color:var(--tv-fg3); margin-top:1px; }

/* ═══════════════════════════════════════════════════════════════
   8. قسم الملخص
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvDigestSection { background: var(--tv-bg2) !important; overflow: hidden !important; min-height: 0 !important; }
#tvOverlay #tvDigestBox { flex:1; overflow:hidden; padding:0; position:relative; min-height:0; }
#tvOverlay #tvDigestScroller { padding: 10px 16px 0; will-change: transform; }
#tvOverlay .tv-digest-block-lg{
    padding: 14px 2px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
#tvOverlay .tv-digest-time-lg{
    font-size: 10px;
    color: var(--tv-red);
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#tvOverlay .tv-digest-time-lg::after{
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(229,57,53,0.2);
}
#tvOverlay .tv-digest-text-lg{
    font-size: 14px;
    color: var(--tv-fg);
    line-height: 1.95;
    font-weight: 400;
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════════
   9. قسم البث المباشر
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvLiveSection { background: #000 !important; }
#tvOverlay #tvLiveInfo {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}
#tvOverlay .tv-live-dot{
    width: 7px; height: 7px;
    background: var(--tv-red);
    border-radius: 50%;
    display: inline-block;
    animation: livePulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px var(--tv-red);
    flex-shrink: 0;
}
@keyframes livePulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.35; transform:scale(0.7); }
}
#tvOverlay #tvLiveProgressBar {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.08);
    z-index: 10;
}
#tvOverlay #tvLiveProgressFill { height:100%; background:linear-gradient(90deg,#7B0000,#E53935); transition:width .5s linear; width:0%; }
#tvOverlay #tvLiveLoader {
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background:#000; z-index:5;
}
#tvOverlay #tvLiveLoaderText { color:rgba(255,255,255,.35); font-size:12px; margin-top:10px; }

/* ═══════════════════════════════════════════════════════════════
   10. شريط التقدم
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvDigestProgress {
    padding: 7px 14px 9px !important;
    background: rgba(0,0,0,0.5) !important;
    border-top: 1px solid var(--tv-border) !important;
    flex-shrink: 0 !important;
    backdrop-filter: blur(4px) !important;
}
#tvOverlay .tv-progress-label{ display:flex; justify-content:space-between; font-size:10px; color:var(--tv-fg3); margin-bottom:5px; font-weight:700; }
#tvOverlay .tv-progress-bar{ background:rgba(255,255,255,.05); border-radius:2px; height:2px; overflow:hidden; margin-bottom:4px; }
#tvOverlay .tv-progress-fill{ height:100%; background:linear-gradient(90deg,#6B0000,var(--tv-red)); border-radius:2px; transition:width 1.2s ease; width:0%; }
#tvOverlay .tv-progress-detail{ font-size:10px; color:var(--tv-fg3); text-align:center; }

/* ═══════════════════════════════════════════════════════════════
   11. شريط الأخبار السفلي (محسّن)
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay #tvBottomTicker {
    height: var(--tv-ticker-h) !important;
    background: var(--tv-accent-bar) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 -4px 24px var(--tv-ticker-glow, rgba(120,0,0,0.6)) !important;
    position: relative !important;
    z-index: 5 !important;
}
#tvOverlay .tv-ticker-fade-left, #tvOverlay .tv-ticker-fade-right{
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
#tvOverlay .tv-ticker-fade-left{ left: 0; background: linear-gradient(90deg, var(--tv-ticker-edge, rgba(91,0,0,0.95)), transparent) !important; }
#tvOverlay .tv-ticker-fade-right{ right: 0; background: linear-gradient(270deg, var(--tv-ticker-edge, rgba(91,0,0,0.95)), transparent) !important; }
#tvOverlay .tv-ticker-label2{
    flex-shrink: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    padding: 0 18px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
    border-left: 1px solid rgba(255,255,255,0.15) !important;
    position: relative;
    z-index: 3;
}
#tvOverlay .tv-ticker-track2{ flex:1; overflow:hidden; height:100%; display:flex; align-items:center; position:relative; }
#tvOverlay .tv-ticker-scroll{
    white-space: nowrap !important;
    font-size: var(--tv-ticker-font-size, 17px) !important;
    font-weight: 700 !important;
    color: #fff !important;
    animation: tvTickerRTL 220s linear infinite !important;
    will-change: transform !important;
    letter-spacing: .4px !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   12. تنبيه الأخبار العاجلة جداً — طبقة كاملة
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay .tv-breaking-flash{
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(120,0,0,0.97) 0%, rgba(20,0,0,0.99) 100%);
    animation: tvBfFadeIn 0.35s ease both;
    cursor: pointer;
}
@keyframes tvBfFadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
#tvOverlay .tv-bf-content{
    text-align: center;
    max-width: 70%;
    padding: 40px;
    position: relative;
    z-index: 2;
}
#tvOverlay .tv-bf-eyebrow{
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--tv-red);
    text-transform: uppercase;
    margin-bottom: 20px;
    animation: tvBfPulse 1s ease-in-out infinite;
}
@keyframes tvBfPulse {
    0%,100% { opacity:1; }
    50%      { opacity:.6; }
}
#tvOverlay .tv-bf-title{
    font-size: clamp(22px, 3.5vw, 42px);
    font-weight: 900;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 16px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
#tvOverlay .tv-bf-source{
    font-size: 16px;
    color: rgba(255,200,200,0.7);
    margin-bottom: 8px;
    font-weight: 600;
}
#tvOverlay .tv-bf-time{
    font-size: 13px;
    color: rgba(255,150,150,0.5);
    margin-bottom: 20px;
}
#tvOverlay .tv-bf-dismiss{
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: tvBfPulse 2s ease-in-out infinite;
}
#tvOverlay .tv-bf-bar-outer{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: rgba(255,255,255,0.1);
}
#tvOverlay .tv-bf-bar{
    height: 100%;
    background: var(--tv-red);
    width: 100%;
    transform-origin: right;
    transition: transform linear;
}
/* خلفية تلمع كالرادار */
#tvOverlay .tv-breaking-flash::before{
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at center, rgba(229,57,53,0.04) 0px, transparent 40px, rgba(229,57,53,0.02) 80px, transparent 120px);
    animation: tvBfRadar 4s linear infinite;
}
@keyframes tvBfRadar {
    from { transform: scale(1); opacity: 0.6; }
    to   { transform: scale(1.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   13. تراكب التحكم عن بُعد
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay .tv-remote-overlay{
    position: absolute;
    bottom: calc(var(--tv-ticker-h) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    background: rgba(8,10,15,0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 16px;
    min-width: 300px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    animation: tvRemoteSlideUp 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes tvRemoteSlideUp {
    from { transform: translateX(-50%) translateY(20px); opacity:0; }
    to   { transform: translateX(-50%) translateY(0); opacity:1; }
}
#tvOverlay .tv-remote-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}
#tvOverlay .tv-remote-btn{
    padding: 12px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
}
#tvOverlay .tv-remote-btn:hover{ background: rgba(255,255,255,0.15); color: #fff; transform: scale(1.03); }
#tvOverlay .tv-remote-btn:active{ transform: scale(0.97); }
#tvOverlay .tv-remote-btn-lg{ grid-column: span 1; background: rgba(0,188,212,0.12); border-color: rgba(0,188,212,0.3); color: var(--tv-teal); }
#tvOverlay .tv-remote-btn-close{ background: rgba(229,57,53,0.12); border-color: rgba(229,57,53,0.3); color: var(--tv-red); }

/* ═══════════════════════════════════════════════════════════════
   14. الساعة (تحسين)
   ═══════════════════════════════════════════════════════════════ */
#tvOverlay .tv-clock{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
}
#tvOverlay .tv-time{
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 3px !important;
    font-family: 'SF Mono', 'Fira Code', monospace !important;
    line-height: 1 !important;
}
#tvOverlay .tv-date{
    font-size: 10px !important;
    color: rgba(255,255,255,0.35) !important;
    font-weight: 500 !important;
    letter-spacing: .5px !important;
    text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════
   15. تكيف الوضع العمودي (موبايل)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px), (orientation: portrait) and (max-width: 768px) {
    #tvBody { grid-template-columns: 1fr !important; grid-template-rows: 1fr 1fr !important; }
    #tvBody[data-layout] { grid-template-columns: 1fr !important; }
    #tvHeader { padding: 0 12px !important; height: 50px !important; }
    .tv-header-center { display: none !important; }
    .tv-hdr-btn { padding: 4px 7px !important; font-size: 11px !important; }
    #tvStatsBar { display: none !important; }
    .tv-time { font-size: 20px !important; }
    .tv-ticker-scroll { font-size: 14px !important; }
    #tvBottomTicker { height: 44px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   16. أنيميشن مساعدة
   ═══════════════════════════════════════════════════════════════ */
@keyframes tvTickerRTL {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}
@keyframes kenBurns_TL {
    0%   { transform: scale(1.0) translate(0%, 0%); }
    100% { transform: scale(1.18) translate(-4%, -3%); }
}
@keyframes kenBurns_TR {
    0%   { transform: scale(1.0) translate(-8%, 0%); }
    100% { transform: scale(1.18) translate(-4%, -3%); }
}
@keyframes kenBurns_BL {
    0%   { transform: scale(1.0) translate(0%, -8%); }
    100% { transform: scale(1.18) translate(-4%, -5%); }
}
@keyframes kenBurns_BR {
    0%   { transform: scale(1.0) translate(-8%, -8%); }
    100% { transform: scale(1.18) translate(-3%, -3%); }
}
@keyframes tvItemSlideIn {
    from { opacity:0; transform:translateY(-12px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ─────────────────────────────────────────────
   مكمّلات الإصلاح — تُضاف في نهاية tv-pro.css
   ───────────────────────────────────────────── */

/* مؤشرات الوضع: التفعيل عبر JS */
#tvOverlay .tv-mode-dot.active {
    background: var(--tv-red) !important;
    box-shadow: 0 0 8px var(--tv-red), 0 0 16px var(--tv-ticker-glow, rgba(229,57,53,.35)) !important;
    width: 9px !important;
    height: 9px !important;
}
#tvOverlay .tv-mode-dot.passed {
    background: rgba(255,255,255,.38) !important;
}

/* أزرار التصفية: حالة active بالـ JS */
#tvOverlay .tv-filter-btn:hover {
    background:rgba(255,255,255,.1) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.25) !important;
    cursor:pointer;
}

/* شريط الإحصاءات: لا يُخفى حتى لو كانت hidden */
#tvOverlay #tvStatsBar {
    transition: height .3s, opacity .3s, padding .3s;
}
#tvOverlay #tvStatsBar.hidden {
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* تبويبات الإعدادات: hover */
#tvOverlay .tv-sp-tab-btn:hover {
    color: rgba(255,255,255,.8) !important;
    background: rgba(255,255,255,.07) !important;
}

/* تنبيه عاجل: flex عند الإظهار */
#tvOverlay #tvBreakingFlash {
    display: none;
}
#tvOverlay #tvBreakingFlash.visible {
    display: flex !important;
}

/* ساعة في الهيدر */
#tvOverlay #tvClock .tv-time {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 2px !important;
    font-family: 'SF Mono','Fira Code',monospace !important;
    line-height: 1 !important;
}
#tvOverlay #tvClock .tv-date {
    font-size: 10px !important;
    color: rgba(255,255,255,.35) !important;
    font-weight: 500 !important;
    letter-spacing: .4px !important;
    text-align: center !important;
}

/* تلاشي حواف شريط الأخبار */
#tvOverlay #tvBottomTicker {
    box-shadow: 0 -3px 20px var(--tv-ticker-glow, rgba(100,0,0,.5)) !important;
}

/* تقدم الدوران التلقائي */
#tvOverlay #tvAutoRotateBar {
    position: relative !important;
    z-index: 2 !important;
}

#tvOverlay .tv-ticker-fade-left {
    background: linear-gradient(90deg, var(--tv-ticker-edge, rgba(91,0,0,0.95)), transparent) !important;
}
#tvOverlay .tv-ticker-fade-right {
    background: linear-gradient(270deg, var(--tv-ticker-edge, rgba(91,0,0,0.95)), transparent) !important;
}

/* انيميشن تنبيه عاجل */
@keyframes tvBfPulse {
    0%,100% { opacity:1; }
    50%      { opacity:.5; }
}

/* ──────────────────────────────────────────────
   حزمة ترقية غرفة العمليات الذكية (Phase 2 Upgrade)
   ────────────────────────────────────────────── */

/* 1. التخطيط مصفوفة غرفة العمليات (Matrix Layout 2x2) */
#tvOverlay #tvMatrixContainer {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 16px !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 10px 16px !important;
    overflow: hidden !important;
}

/* تنسيق لوحات المصفوفة (Panels) */
.tv-matrix-panel {
    background: rgba(20, 24, 35, 0.45) !important;
    border: 1px solid var(--tv-border2, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.tv-matrix-panel:hover {
    border-color: rgba(192, 160, 255, 0.2) !important;
    box-shadow: 0 12px 40px rgba(192, 160, 255, 0.05) !important;
}

/* عناوين لوحات المصفوفة */
.tv-panel-header {
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 3 !important;
}

.tv-panel-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* 2. مذيع الذكاء الاصطناعي وموجة الصوت (AI Voice Visualizer) */
.tv-voice-wave {
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 2.5px !important;
    width: 20px !important;
    height: 14px !important;
    margin-right: 6px !important;
}

.tv-voice-wave span {
    display: block !important;
    width: 2.5px !important;
    background: #C0A0FF !important;
    height: 3px !important;
    border-radius: 1px !important;
    transition: height 0.15s ease !important;
}

.tv-voice-wave.animating span {
    animation: tvVoiceWavePlay 0.8s ease-in-out infinite alternate !important;
}

.tv-voice-wave.animating span:nth-child(1) { animation-delay: -0.6s !important; }
.tv-voice-wave.animating span:nth-child(2) { animation-delay: -0.2s !important; }
.tv-voice-wave.animating span:nth-child(3) { animation-delay: -0.4s !important; }
.tv-voice-wave.animating span:nth-child(4) { animation-delay: -0.8s !important; }

@keyframes tvVoiceWavePlay {
    0%   { height: 3px; }
    100% { height: 14px; }
}

/* 3. عداد مؤشر التوتر الدائري الاستراتيجي (Tension Index Dial) */
.tv-tension-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    flex: 1 !important;
}

.tv-tension-dial {
    position: relative !important;
    width: 140px !important;
    height: 140px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.4) !important;
    background: radial-gradient(circle, rgba(0,0,0,0.6) 55%, transparent 56%) !important;
    transition: all 0.5s ease !important;
}

/* توهج النبض للتوتر */
.tv-tension-dial.pulsing {
    animation: tvTensionHeartbeat 1.8s infinite alternate !important;
}

.tv-tension-inner {
    text-align: center !important;
    z-index: 2 !important;
}

.tv-tension-value {
    font-size: 32px !important;
    font-weight: 900 !important;
    font-family: monospace !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, #fff, rgba(255,255,255,0.7)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.tv-tension-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-top: 4px !important;
    letter-spacing: 0.5px !important;
}

@keyframes tvTensionHeartbeat {
    0%   { transform: scale(1); box-shadow: 0 0 15px rgba(229,57,53,0.15); }
    100% { transform: scale(1.03); box-shadow: 0 0 35px rgba(229,57,53,0.45); }
}

/* 4. المشاهدة السينمائية ومؤثرات Ken Burns */
.tv-kenburns-active {
    animation: tvKenBurns 18s ease-in-out infinite alternate !important;
    transform-origin: center center !important;
}

@keyframes tvKenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.15) translate(-1%, -1.5%);
    }
}

/* تأثير التغبيش الانسيابي */
.tv-media-blur-transition {
    filter: blur(15px) !important;
    opacity: 0.5 !important;
    transition: filter 0.4s ease, opacity 0.4s ease !important;
}

/* خريطة غرفة العمليات Leaflet */
#tvMapContainer {
    width: 100% !important;
    height: 100% !important;
    background: #0B0E14 !important;
    border-radius: 0 0 12px 12px !important;
}

/* تخصيص خريطة Leaflet لتناسب وضع التلفاز المظلم الاستخباراتي */
.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;
}

/* نبض مؤشر الموقع الساخن المطور بإشعاع دائري متعدد الحلقات */
.tv-hotspot-marker {
    background: #ff2a2a !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px rgba(255,42,42, 0.8) !important;
    position: relative !important;
}

/* الحلقة الإشعاعية النابضة الأولى */
.tv-hotspot-marker::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1.5px solid #ff2a2a;
    border-radius: 50%;
    animation: tvMarkerRingPulse 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
    pointer-events: none;
}

/* الحلقة الإشعاعية النابضة الثانية (تناوب فاخر) */
.tv-hotspot-marker::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1.5px solid rgba(192, 160, 255, 0.7);
    border-radius: 50%;
    animation: tvMarkerRingPulse 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
    animation-delay: 0.9s;
    pointer-events: none;
}

@keyframes tvMarkerRingPulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}

/* تخصيص مودال خبر الخريطة بالتأثير الزجاجي الشفاف الاحترافي */
.tv-map-popup .leaflet-popup-content-wrapper {
    background: rgba(10, 12, 18, 0.6) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(192, 160, 255, 0.28) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), inset 0 0 10px rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 2px !important;
}

.tv-map-popup .leaflet-popup-tip {
    background: rgba(10, 12, 18, 0.6) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-right: 1px solid rgba(192, 160, 255, 0.2) !important;
    border-bottom: 1px solid rgba(192, 160, 255, 0.2) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}

/* تنسيق محتويات كارت خبر الخريطة المطور */
.tv-map-popup-card {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Sans Arabic', sans-serif;
    color: #fff;
    padding: 8px 10px;
    max-width: 280px;
}

.tv-map-popup-header {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #FF5252;
    margin-bottom: 6px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tv-map-popup-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.tv-map-popup-body {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    max-height: 90px;
    overflow-y: auto;
    padding-right: 2px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 6px;
}

/* تخصيص شريط تمرير محتوى الخبر بالخريطة */
.tv-map-popup-body::-webkit-scrollbar {
    width: 3px;
}
.tv-map-popup-body::-webkit-scrollbar-thumb {
    background: rgba(192, 160, 255, 0.4);
    border-radius: 2px;
}
.tv-map-popup-body::-webkit-scrollbar-track {
    background: transparent;
}