/* =========================================================
   000 Player Clone - ALmEz0 IPTV Player
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Outfit:wght@400;700;800;900&family=Tajawal:wght@400;500;700;800;900&family=Readex+Pro:wght@400;500;600;700&display=swap');

:root {
    --bg-main: #06080d;
    --bg-surface: #0a0e18;
    --bg-card: rgba(16, 22, 36, 0.75);
    --border-card: rgba(255, 255, 255, 0.08);

    --accent-red: #e50914;
    --accent-red-hover: #ff2a2a;
    --accent-red-glow: rgba(229, 9, 20, 0.45);
    --accent-gold: #f59e0b;
    --accent-gold-hover: #fbbf24;

    --grad-ambient: linear-gradient(180deg, #0a0e18 0%, #06080d 100%);

    --grad-live: radial-gradient(circle at 30% 30%, #9e1c1c 0%, #1a0303 100%);
    --grad-movies: radial-gradient(circle at 70% 30%, #20242d 0%, #08090c 100%);
    --grad-series: radial-gradient(circle at 40% 50%, #108044 0%, #031e0f 100%);

    --text-main: #ffffff;
    --text-muted: #94a3b8;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
}

html,
body {
    touch-action: manipulation;
}

.hidden {
    display: none !important;
}

/* عزل الشاشات المخفية تماماً: منع أي تفاعل أو رسم أو استقبال أحداث */
.app-screen-container.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
}

/* =========================================================
   GLOBAL SLIM MODERN SCROLLBARS (VERTICAL & HORIZONTAL)
   ========================================================= */
*::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

*::-webkit-scrollbar-corner,
::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    background-color: var(--bg-main, #06080d);
    background-image: var(--grad-ambient);
    color: var(--text-main);
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* =========================================================
   CANVAS SCALER ENGINE (Fixed Canvas 1650x750)
   ========================================================= */
#app-scaler,
.app-scaler {
    width: 1650px;
    height: 750px;
    min-width: 1650px;
    min-height: 750px;
    max-width: 1650px;
    max-height: 750px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-main);
    background-image: var(--grad-ambient);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
}

/* FULL-SCREEN RESPONSIVE CANVAS FOR ALL DEVICES (Edge-to-Edge 100% Proportional Engine) */
body.desktop-device-mode #app-scaler,
body.platform-electron #app-scaler {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    transform: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.touch-device-mode #app-scaler {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}


.app-screen-container {
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
}

/* =========================================================
   AUTH SCREENS (Login & Server Code)
   ========================================================= */
.auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: transparent;
}

.auth-card {
    background: rgba(12, 16, 26, 0.65);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 65px 45px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    text-align: center;
    position: relative;
}

.auth-logo {
    width: 140px;
    height: auto;
    margin-bottom: 24px;
    /* مسافة رأسية إضافية أسفل الشعار */
}

.auth-title {
    font-family: 'Tajawal', 'Readex Pro', 'Cairo', sans-serif;
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: #fff;
    direction: rtl;
    unicode-bidi: isolate;
}

.auth-subtitle {
    font-size: 25px !important;
    /* تكبير الحجم بشكل واضح جداً */
    color: #ffffff !important;
    /* تغيير اللون إلى الأبيض البارز */
    font-weight: 900 !important;
    /* جعل الخط عريضاً */
    margin-bottom: 25px !important;
}

.input-group {
    text-align: left;
    margin-bottom: 28px;
}

.input-label {
    display: block;
    font-size: 19px;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

.input-field {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 20px 20px 20px 60px;
    /* زيادة بسيطة في ارتفاع حقل الإدخال */
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    outline: none;
    transition: border-color 0.3s;
    position: relative;
}

.input-field:focus {
    border-color: rgba(255, 255, 255, 0.4);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 22px;
}

.btn-primary {
    width: 100%;
    padding: 20px;
    /* زيادة ارتفاع زر الاتصال */
    border: none;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 800;
    color: #000;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.btn-gold {
    background: var(--accent-gold);
}

.btn-gold:hover {
    background: var(--accent-gold-hover);
}

.btn-red {
    background: var(--accent-red);
    color: #fff;
}

.btn-red:hover {
    background: var(--accent-red-hover);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-footer {
    margin-top: 30px;
    font-size: 13px;
    color: var(--text-muted);
}

/* =========================================================
   DASHBOARD / NAVBAR
   ========================================================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: rgba(8, 12, 20, 0.75);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* =========================================================
   شعار المنصة في شريط التنقل
   ========================================================= */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    direction: rtl;
    text-decoration: none;
    cursor: default;
    margin-right: 30px;
    /* هذا السطر الجديد لإبعاد الشعار عن زر الرئيسية */
}

.nav-logo-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 14px rgba(217, 36, 36, 0.35), 0 4px 12px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nav-logo-img:hover {
    transform: scale(1.08);
    box-shadow: 0 0 22px rgba(217, 36, 36, 0.6), 0 6px 18px rgba(0, 0, 0, 0.6);
}

.nav-brand-text {
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

/* تكبير زر الرجوع / الرئيسية الأخضر */
.btn-home-return {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    /* زيادة القطر (كان 58px) */
    height: 66px;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.15) !important;
    border: 2.5px solid rgba(76, 175, 80, 0.8) !important;
    color: #4caf50 !important;
    font-size: 30px;
    /* تكبير أيقونة البيت */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}

.btn-home-return i {
    color: #4caf50 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-home-return:hover {
    color: #00ff66 !important;
    border-color: #00ff66 !important;
    background: rgba(76, 175, 80, 0.35) !important;
    box-shadow: 0 0 32px rgba(0, 255, 102, 0.95), inset 0 0 16px rgba(0, 255, 102, 0.5) !important;
    transform: scale(1.1);
}

/* أزرار دائرية يسار بطاقة الدخول (الحسابات المحفوظة ونمط الجهاز) بدون أسماء */
.auth-top-actions-left {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

.btn-auth-circular {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 2.5px solid;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.btn-auth-circular.btn-auth-accounts {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.75) !important;
    color: #fbbf24 !important;
    font-size: 28px;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.btn-auth-circular.btn-auth-accounts:hover {
    background: rgba(245, 158, 11, 0.3) !important;
    border-color: #fbbf24 !important;
    color: #fff !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.8), inset 0 0 16px rgba(245, 158, 11, 0.5) !important;
    transform: scale(1.1);
}

.btn-auth-circular.btn-auth-device {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.75) !important;
    color: #38bdf8 !important;
    font-size: 28px;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

.btn-auth-circular.btn-auth-device:hover {
    background: rgba(56, 189, 248, 0.3) !important;
    border-color: #38bdf8 !important;
    color: #fff !important;
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.8), inset 0 0 16px rgba(56, 189, 248, 0.5) !important;
    transform: scale(1.1);
}

.auth-circular-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    border-radius: 12px;
    padding: 2px 7px;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 10px rgba(239, 68, 68, 0.6);
    border: 2px solid #161b22;
}

/* زيادة المسافات بين الأزرار لتتناسب مع الحجم الأكبر */
/* =========================================================
   زيادة المسافة والتباعد بين أزرار التحكم (الخروج، الملف الشخصي، التحديث)
   ========================================================= */
.nav-right,
.nav-user {
    display: flex !important;
    align-items: center !important;
    gap: 38px !important;
    /* زيادة التباعد بين الأزرار (كان 28px) */
}

.refresh-icon {
    margin-left: 15px;
    color: #f4c242 !important;
    /* اللون الأصفر الفخم */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 8px rgba(244, 194, 66, 0.75));
    /* توهج أصفر متناسق */
}

.refresh-icon:hover {
    color: #f5d16e !important;
    filter: drop-shadow(0 0 18px rgba(245, 209, 110, 0.95)) !important;
    transform: scale(1.18);
}

/* تكبير زر الملف الشخصي (Profile) */
.profile-icon {
    cursor: pointer;
    font-size: 40px !important;
    /* تكبير أيقونة المستخدم (كانت 34px) */
    color: #2196f3 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 12px rgba(33, 150, 243, 0.8));
}

.profile-icon:hover {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 26px rgba(0, 229, 255, 0.95)) !important;
    transform: scale(1.18);
}

/* تكبير زر تسجيل الخروج (Logout) */
.logout-icon {
    cursor: pointer;
    font-size: 38px !important;
    /* تكبير أيقونة الخروج (كانت 32px) */
    color: #ff3333 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scaleX(-1);
    filter: drop-shadow(0 0 12px rgba(255, 51, 51, 0.8));
}

.logout-icon:hover {
    color: #ff1744 !important;
    filter: drop-shadow(0 0 26px rgba(255, 23, 68, 0.95)) !important;
    transform: scaleX(-1) scale(1.18);
}

.logout-icon:hover {
    color: #ff1744 !important;
    filter: drop-shadow(0 0 18px rgba(255, 23, 68, 0.95)) drop-shadow(0 0 30px rgba(255, 23, 68, 0.7)) !important;
    transform: scaleX(-1) scale(1.22);
}

/* إخفاء زر الرجوع الموجود بجانب القنوات */
.back-icon {
    display: none !important;
}

.back-icon:hover {
    color: #00ff66 !important;
    filter: drop-shadow(0 0 18px rgba(0, 255, 102, 0.95)) !important;
    transform: scale(1.2);
}

.dashboard-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

/* =========================================================
   تكبير الصناديق الرئيسية (البث، الأفلام، المسلسلات)
   ========================================================= */
.dash-cards-wrapper {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 420px));
    justify-content: center;
    align-content: center;
    gap: clamp(16px, 2.4vw, 36px);
    padding: clamp(14px, 2vh, 28px) clamp(16px, 2.8vw, 40px);
    perspective: 1000px;
    max-width: 1380px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(45px) scale(0.93);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dash-card {
    height: clamp(340px, 52vh, 490px);
    max-height: 510px;
    align-self: center;
    border-radius: var(--screen-card-radius, 26px);
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.28s ease, border-color 0.25s ease !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.dash-card:nth-child(1) {
    animation: cardEntrance 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards 0.1s;
}

.dash-card:nth-child(2) {
    animation: cardEntrance 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards 0.22s;
}

.dash-card:nth-child(3) {
    animation: cardEntrance 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards 0.34s;
}

/* تأثير بريق الضوء المتحرك على البطاقات */
.dash-card::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);
    transform: rotate(25deg);
    transition: transform 0.8s ease;
    pointer-events: none;
}

.dash-card:hover::after {
    transform: rotate(25deg) translate(30%, 30%);
}

.dash-card i {
    position: absolute;
    top: 38px;
    left: 38px;
    font-size: 58px;
    color: #ffffff !important;
    opacity: 0.95;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-card h2 {
    font-size: 35px;
    font-weight: 900;
    margin-bottom: 6px;
    z-index: 1;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.dash-card p {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    z-index: 1;
    white-space: nowrap;
}

/* =========================================================
   تكبير بطاقات الشاشة الرئيسية في وضع النقال (touch)
   ---------------------------------------------------------
   سبب المشكلة: الواجهة في وضع النقال تُرسم داخل "كانفاس" ثابت ارتفاعه 750px ثم يُصغَّر
   ليناسب الشاشة (app-scaler). لكن قياس ارتفاع البطاقة كان يعتمد على 52vh، ووحدة vh تُحسب
   من ارتفاع شاشة الجهاز الحقيقية (مثلاً 390px على هاتف) وليس من ارتفاع الكانفاس، فينتج
   ارتفاع صغير (340px من أصل 750px = 45% فقط) بينما على الكمبيوتر ينتج 53% فتبدو أكبر وأجمل.
   الحل: قياسات ثابتة بالبكسل داخل الكانفاس لتتطابق نسب النقال مع برنامج الكمبيوتر تماماً.
   ========================================================= */
body.touch-device-mode .dash-cards-wrapper {
    grid-template-columns: repeat(3, minmax(280px, 470px)) !important;
    max-width: 1480px !important;
    gap: 28px !important;
    padding: 22px 30px !important;
}

body.touch-device-mode .dash-card {
    height: 430px !important;
    max-height: 430px !important;
    padding: 26px 32px !important;
}

body.touch-device-mode .dash-card i {
    font-size: 62px !important;
    top: 34px !important;
    left: 34px !important;
}

body.touch-device-mode .dash-card h2 {
    font-size: 37px !important;
}

body.touch-device-mode .dash-card p {
    font-size: 17px !important;
}

/* 1. كرت البث المباشر (أحمر ياقوتي سينمائي متوهج - Crimson Live Ruby) */
.card-live {
    background: linear-gradient(155deg, rgba(195, 20, 42, 0.88) 0%, rgba(120, 10, 24, 0.94) 50%, rgba(45, 3, 10, 0.98) 100%) !important;
    border-color: rgba(244, 63, 94, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px rgba(195, 20, 42, 0.45) !important;
}

.card-live::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -15%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.35) 0%, transparent 70%);
    pointer-events: none;
    transition: transform 0.5s ease;
}

.card-live i {
    color: #ffffff !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.card-live:hover {
    transform: translateY(-15px) scale(1.03) !important;
    border-color: rgba(244, 63, 94, 0.95) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), 0 0 55px rgba(244, 63, 94, 0.6), inset 0 0 30px rgba(244, 63, 94, 0.25) !important;
}

.card-live:hover i {
    transform: scale(1.15) rotate(-5deg);
}

/* 2. كرت الأفلام (أسود كربوني فخم - Obsidian Onyx Black) */
.card-movies {
    background: linear-gradient(155deg, rgba(30, 34, 44, 0.92) 0%, rgba(16, 18, 24, 0.96) 50%, rgba(7, 8, 11, 0.99) 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.card-movies::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -15%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, transparent 70%);
    pointer-events: none;
    transition: transform 0.5s ease;
}

.card-movies i {
    color: #ffffff !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.card-movies:hover {
    transform: translateY(-15px) scale(1.03) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 255, 255, 0.2), inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
}

.card-movies:hover i {
    transform: scale(1.15) rotate(6deg);
}

/* 3. كرت المسلسلات (أخضر زمردي فاخر - Emerald Jade Green) */
.card-series {
    background: linear-gradient(155deg, rgba(16, 128, 68, 0.88) 0%, rgba(8, 75, 38, 0.94) 50%, rgba(3, 30, 15, 0.98) 100%) !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px rgba(16, 128, 68, 0.45) !important;
}

.card-series::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -15%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.35) 0%, transparent 70%);
    pointer-events: none;
    transition: transform 0.5s ease;
}

.card-series i {
    color: #ffffff !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.card-series:hover {
    transform: translateY(-15px) scale(1.03) !important;
    border-color: rgba(52, 211, 153, 0.95) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), 0 0 55px rgba(52, 211, 153, 0.6), inset 0 0 30px rgba(52, 211, 153, 0.25) !important;
}

.card-series:hover i {
    transform: scale(1.15) rotate(-5deg);
}

/* =========================================================
   تكبير أزرار التواصل (واتساب، فيسبوك، اتصال) في الفوتر
   ========================================================= */
.dash-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dash-footer .social-icons {
    display: flex;
    gap: 20px;
    /* زيادة المسافة بين أزرار التواصل */
}

.footer-social-btn {
    width: 48px;
    /* تكبير قطر الزر الدائري (كان 35px) */
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 22px;
    /* تكبير أيقونات التواصل (كانت 18px) */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social-btn:hover {
    color: #fff;
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.btn-whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.6);
}

.btn-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    box-shadow: 0 0 20px rgba(24, 119, 242, 0.6);
}

.btn-call:hover {
    background: #ffb300;
    border-color: #ffb300;
    box-shadow: 0 0 20px rgba(255, 179, 0, 0.6);
}

.profile-icon:hover {
    color: #2196f3 !important;
}

/* =========================================================
   PLAYER SCREEN
   ========================================================= */
.app-screen {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.col-sidebar {
    width: 480px;
    min-width: 480px;
    background: rgba(10, 14, 22, 0.68);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

.col-list {
    width: 485px;
    background: rgba(12, 16, 26, 0.68);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

.col-player {
    flex: 1;
    background: rgba(8, 11, 18, 0.5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    overflow: hidden;
}

.col-header {
    position: relative;
    z-index: 50;
}

.col-header h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-box {
    background: rgba(255, 255, 255, 0.06) !important;
    /* خلفية داكنة خفيفة وشفافة */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    /* إطار أنيق حول مربع البحث */
    border-radius: 12px !important;
    /* حواف دائرية عصرية */
    padding: 12px 16px !important;
    /* مساحة داخلية مريحة */
    margin: 12px 15px 15px 15px !important;
    /* تباعد ممتاز عن العناصر المحيطة */
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

/* تأثير جمالي عند النقر أو الكتابة داخل مربع البحث */
.search-box:focus-within {
    border-color: var(--accent-red) !important;
    /* يتلون بالإطار الأحمر المميز للمشغل */
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(217, 36, 36, 0.25);
}

.search-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid rgba(229, 9, 20, 0.4) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    color: #ffffff !important;
    /* خط أبيض ناصع وواضح للكتابة */
    font-size: 20px !important;
    /* تكبير الخط ليصبح مقروءاً بكل سهولة */
    font-weight: 700 !important;
    /* خط غليظ وبارز */
    outline: none !important;
    transition: all 0.3s ease !important;
}

.search-input:focus {
    border-bottom: 2px solid var(--accent-red) !important;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3) !important;
}

.search-input::placeholder {
    color: #94a3b8 !important;
    /* لون نص التوضيح (Placeholder) مريح للعين */
    font-weight: 500 !important;
}

.list-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.list-item {
    padding: 14px 18px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.2s, border-color 0.2s;
    font-size: 22px;
    /* تم رفع الحجم إلى 22px لخط ضخم وواضح جداً */
    color: #ffffff;
    /* أبيض ناصع */
    font-weight: 700;
    /* غليظ وبارز */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.list-item .cat-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.cat-count {
    background: transparent !important;
    /* إزالة الخلفية المغلفة تماماً */
    color: #ffffff !important;
    /* لون أبيض صافي وواضح */
    padding: 0 !important;
    /* إزالة الحشو حتى لا يصنع شكلاً مربعاً أو دائرياً */
    border-radius: 0 !important;
    /* إلغاء الانحناء */
    font-size: 22px !important;
    /* حجم كبير وواضح (يمكنك تعديله حسب رغبتك) */
    font-weight: 700 !important;
    /* خط غليظ وبارز */
    min-width: auto !important;
    /* إلغاء الإطار الإجباري للعرض */
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.list-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.list-item.active {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--accent-red);
    color: #fff;
    font-weight: 600;
}

.list-item.active .cat-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.channel-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
}

.player-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.player-top-header {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.channel-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.channel-info-header img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.channel-info-header span {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.live-channel-fav {
    width: 36px;
    height: 36px;
    margin-right: 6px;
}

.btn-close-live-player {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 15px;
    margin-right: auto;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.btn-close-live-player:hover {
    background: rgba(217, 36, 36, 0.3);
    border-color: var(--accent-red);
    color: #fff;
    transform: scale(1.12);
}

.player-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.styled-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-card);
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
}

.styled-select option {
    background: #0f121a;
    color: #fff;
}

.player-action-btns {
    display: flex;
    gap: 10px;
}

.action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-card);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-red);
}

.plyr-container {
    flex: 1;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.plyr-container .video-js,
.plyr-container #liveVideoContainer,
#livePlayerWrapper .video-js {
    width: 100% !important;
    height: 100% !important;
}

.empty-state {
    color: var(--text-muted);
    font-size: 16px;
}

/* =========================================================
   VOD / MOVIES SCREEN (GRID)
   ========================================================= */
.vod-screen {
    padding: 30px;
    flex: 1;
    overflow-y: auto;
}

.vod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.vod-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
    transition: transform 0.25s ease;
    border: none;
    position: relative;
    display: flex;
    flex-direction: column;
}

.vod-card:hover {
    transform: scale(1.05);
}

.vod-poster {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
    background: #10141f;
    transition: opacity 0.25s ease;
}

.vod-info {
    padding: 0;
}

.vod-title {
    font-size: 22px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    text-align: center;
    /* هذا السطر هو المسؤول عن توسيط الاسم في المنتصف تماماً */
}


/* =========================================================
   تكبير خط نصوص صندوق معلومات الحساب مع الحفاظ على الارتفاع
   ========================================================= */
/* =========================================================
   تقليل طفيف جداً في ارتفاع صندوق معلومات الحساب
   ========================================================= */
.profile-card {
    background: rgba(0, 0, 0, 0.35) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    width: 100%;
    max-width: 750px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    padding: 40px !important;
    /* تقليل بسيط جداً في حواف الصندوق */
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px !important;
    margin-bottom: 8px !important;
    /* تقليل المسافة أسفل العنوان */
}

.profile-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
}

.profile-name-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px !important;
}

.profile-name-status h2 {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0;
}

/* تنسيق وتوهج حالة الحساب عندما يكون متصلاً (أخضر مشع) */
.profile-status {
    background: rgba(76, 175, 80, 0.15) !important;
    border: 1px solid rgba(76, 175, 80, 0.6) !important;
    color: #00ff66 !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.45) !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.7);
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0 !important;
    /* تقليل بسيط جداً في تباعد الأسطر */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.profile-label {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

.profile-value {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
}

.profile-footer {
    margin-top: 4px !important;
    padding-top: 4px !important;
    display: flex;
    flex-direction: column;
}

.styled-select {
    padding: 6px 18px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Utilities */
.hidden {
    display: none !important;
}

.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}


/* Generated from inline styles */
.gen-style-1 {
    margin-top: 25px;
}

.gen-style-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: url('https://images.unsplash.com/photo-1593784991095-a205069470b6?auto=format&fit=crop&w=1920&q=80') center/cover;
    position: relative;
}

.gen-style-3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.gen-style-4 {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
}

.gen-style-5 {
    background-image: url('https://images.unsplash.com/photo-1593784991095-a205069470b6?auto=format&fit=crop&w=400&q=80');
}

.gen-style-6 {
    background-image: url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=400&q=80');
}

.gen-style-7 {
    background-image: url('https://images.unsplash.com/photo-1522869635100-9f4c5e86aa37?auto=format&fit=crop&w=400&q=80');
}

.gen-style-8 {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 30px 50px;
    display: flex;
    justify-content: flex-end;
}

.gen-style-9 {
    width: auto;
    background: linear-gradient(135deg, #1d94c9, #0a4f8a);
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.gen-style-10 {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    overflow-y: hidden;
}

/* تكبير عنوان معلومات الحساب */
.gen-style-11 {
    color: #fff;
    font-size: 34px !important;
    /* تكبير حجم الخط (كان 24px) */
    font-weight: 900 !important;
    /* خط عريض جداً وبارز */
    margin-bottom: 20px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.gen-style-12 {
    margin-bottom: 15px;
}

.gen-style-13 {
    color: #ccc;
}

.gen-style-14 {
    margin-left: 20px;
}

.gen-style-15 {
    font-size: 13px;
    color: #aaa;
}

.gen-style-16 {
    color: var(--accent-red);
    margin: 0 5px;
}

.gen-style-17 {
    color: var(--accent-gold);
    margin: 0 5px;
}

.gen-style-18 {
    color: #3b82f6;
    margin: 0 5px;
}

.gen-style-19 {
    width: 250px;
}

.gen-style-20 {
    padding: 20px;
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.gen-style-21 {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.gen-style-22 {
    width: 100%;
}

.gen-style-23 {
    flex-direction: column;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.gen-style-24 {
    width: auto;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.gen-style-25 {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.gen-style-26 {
    font-size: 40px;
    margin-bottom: 10px;
    color: #fff;
}

.gen-style-27 {
    color: #ccc;
    margin-bottom: 15px;
    font-size: 18px;
}

.gen-style-28 {
    color: var(--accent-gold);
    margin-bottom: 25px;
    font-size: 20px;
}

.gen-style-29 {
    color: #fff;
    margin-bottom: 10px;
}

/* Styles moved from inline HTML */
.auth-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
}

.social-icons {
    display: flex;
    gap: 15px;
}

/* =========================================================
   تكبير نص حقوق النشر في الفوتر بشكل بسيط وواضح
   ========================================================= */
.copyright {
    font-size: 16px !important;
    /* تكبير بسيط للخط (كان 14px) */
    font-weight: 700 !important;
    /* خط أوضح وأكثر بروزاً */
    color: #cbd5e1 !important;
    /* تفتيح طفيف للون لتسهيل القراءة */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.nav-user {
    display: flex;
    gap: 15px;
    align-items: center;
}

.profile-icon {
    cursor: pointer;
    font-size: 20px;
    transition: color 0.3s;
    color: #aaa;
}

.profile-icon:hover {
    color: #fff;
}

.logout-icon {
    margin-left: 0;
}

.gen-style-30 {
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 800px;
    font-size: 16px;
}

.gen-style-31 {
    color: #aaa;
    margin-bottom: 20px;
    font-size: 16px;
}

.gen-style-32 {
    padding: 40px;
}

.gen-style-33 {
    text-align: center;
    margin-bottom: 10px;
    color: #fff;
    font-size: 30px;
}

.gen-style-34 {
    text-align: center;
    color: #ccc;
    margin-bottom: 40px;
    font-size: 18px;
}

.gen-style-35 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
}

.gen-style-36 {
    min-height: 100vh;
}

.gen-style-37 {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.gen-style-38 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 300px;
}

.gen-style-39 {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
}

.gen-style-40 {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
}

.gen-style-41 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 16px;
}

.gen-style-42 {
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 800px;
    font-size: 15px;
}

/* --- Advanced UI: Header Icons, Dropdown, Sort Modal --- */
/* =========================================================
   أيقونة البحث والأزرار العلوية للأقسام باللون الأبيض
   ========================================================= */
.header-icon {
    font-size: 28px !important;
    /* الحفاظ على الحجم المكبر */
    color: #ffffff !important;
    /* اللون الأبيض الناصع */
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.header-icon:hover {
    color: #ffffff !important;
    transform: scale(1.2);
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.8));
}

.header-dropdown {
    position: absolute;
    top: 45px;
    left: 10px !important;
    /* تثبيت آمن داخل حدود العمود من جهة اليسار */
    right: auto !important;
    transform: none !important;
    /* إلغاء التوسط الخارجي لمنع الخروج عن الحافة وقصه */
    background: #1a1e23;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px 0;
    width: 230px !important;
    /* عرض ثابت ومثالي لا يتجاوز الحدود */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.9);
    z-index: 999999 !important;
}

.header-dropdown .dropdown-item {
    padding: 14px 20px !important;
    color: #ffffff !important;
    cursor: pointer;
    font-size: 17px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    transition: background 0.3s;
}

.header-dropdown .dropdown-item i,
.header-dropdown .dropdown-item svg {
    font-size: 18px !important;
}

.header-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sort-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.01) !important;
    /* درع شفاف تماماً للعين لكنه يمنع النقرات من المرور للخلف */
    pointer-events: auto !important;
    /* لتلتقط النقرات وتمنع وصولها للعناصر الخلفية */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999 !important;
}

.sort-modal.hidden {
    display: none !important;
}

.sort-modal-content {
    pointer-events: auto !important;
    background: rgba(18, 22, 30, 0.95) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    color: #fff !important;
    width: 440px !important;
    /* زيادة عرض الصندوق */
    border-radius: 24px !important;
    /* تدوير الحواف بشكل أكبر */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
    overflow: hidden;
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
}

.sort-modal-header {
    padding: 24px !important;
    /* تكبير الحواف الداخلية للعنوان */
    font-size: 22px !important;
    /* تكبير حجم خط العنوان */
    font-weight: 800;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff !important;
}

.sort-options {
    padding: 26px !important;
    /* زيادة المساحة الداخلية للخيارات */
    display: flex;
    flex-direction: column;
    gap: 20px !important;
    /* زيادة التباعد بين الخيارات */
}

.sort-radio {
    display: flex;
    align-items: center;
    gap: 16px !important;
    /* زيادة المسافة بين الدائرة والنص */
    font-size: 20px !important;
    /* تكبير خط النصوص (الافتراضي، أ-ي، ي-أ) */
    font-weight: 700 !important;
    /* جعل الخط أثقل وأوضح */
    color: #ffffff !important;
    /* لون أبيض ناصع وبارز */
    cursor: pointer;
}

.sort-radio input[type="radio"] {
    width: 22px !important;
    /* تكبير أزرار الاختيار الدائرية */
    height: 22px !important;
    accent-color: var(--accent-red);
}

.sort-modal-footer {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.btn-sort-close,
.btn-sort-save {
    flex: 1;
    padding: 18px !important;
    /* زيادة ارتفاع الأزرار السفلية */
    border: none;
    font-weight: 800 !important;
    cursor: pointer;
    font-size: 18px !important;
    /* تكبير الخط داخل أزرار الحفظ والإغلاق */
    transition: background 0.3s;
}

.btn-sort-close {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}

.btn-sort-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.btn-sort-save {
    background: var(--accent-red) !important;
    color: #fff !important;
}

.btn-sort-save:hover {
    background: var(--accent-red-hover) !important;
}

.hide-vod-names .vod-title {
    display: none !important;
}

.gen-style-43 {
    color: #ddd;
    margin-bottom: 20px;
    font-size: 15px;
}

span.cat-count:empty {
    display: none !important;
}


/* Auto-extracted inline styles */
.auto-style-1 {
    position: relative;
}

.auto-style-2 {
    position: absolute;
    top: 15px;
    right: 15px;
}

.auto-style-3 {
    margin-top: 25px;
}

.auto-style-4 {
    text-align: center;
    font-size: 19px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.auto-style-5 {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.auto-style-6 {
    position: relative;
}

.auto-style-7 {
    position: absolute;
    top: 15px;
    right: 15px;
}

.auto-style-8 {
    margin-top: 10px;
    margin-bottom: 15px;
}

.auto-style-9 {
    margin-bottom: 15px;
}

.auto-style-10 {
    padding-right: 40px;
}

.auto-style-11 {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
}

.auto-style-12 {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.auto-style-13 {
    flex-direction: column;
}

.auto-style-14 {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 100%;
}

.auto-style-15 {
    flex-shrink: 0;
}

.auto-style-16 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.auto-style-17 {
    margin: 0;
}

.auto-style-18 {
    display: flex;
    gap: 15px;
    position: relative;
}

.auto-style-19 {
    padding: 0 15px 15px 15px;
}

.auto-style-20 {
    width: 100%;
}

.auto-style-21 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.auto-style-22 {
    margin: 0;
}

.auto-style-23 {
    display: flex;
    gap: 15px;
    position: relative;
}

.auto-style-24 {
    padding: 0 15px 15px 15px;
}

.auto-style-25 {
    width: 100%;
}

.auto-style-26 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.auto-style-27 {
    margin: 0;
}

.auto-style-28 {
    display: flex;
    gap: 15px;
    position: relative;
}

.auto-style-29 {
    padding: 0 15px 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auto-style-30 {
    width: 100%;
}

.auto-style-31 {
    width: 100%;
}

.auto-style-32 {
    display: flex;
    gap: 10px;
}

.auto-style-33 {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
    border-radius: 5px;
    color: white;
}

.auto-style-34 {
    display: flex;
    gap: 10px;
}

.auto-style-35 {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
    border-radius: 5px;
    color: white;
}

.auto-style-36 {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    font-family: 'Tajawal', 'Cairo', 'Outfit', sans-serif;
}

/* =========================================================
   تكبير إضافي طفيف للوقت والتاريخ في منتصف الشريط العلوي
   ========================================================= */
.auto-style-37 {
    font-size: 38px !important;
    /* تكبير خط الساعة (كان 32px) */
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    color: #ffffff;
    line-height: 1.1;
}

.auto-style-38 {
    font-size: 20px !important;
    /* تكبير خط التاريخ (كان 17px) */
    opacity: 0.95;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    color: #e2e8f0 !important;
}

.auto-style-39 {
    color: #2196F3;
}

/* =========================================================
   MOVIE & SERIES DETAILS SCREEN (PREMIUM CINEMATIC UI)
   ========================================================= */
.movie-screen-layout {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 35px 40px 60px 40px;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* الباك دروب السينمائي عالي الدقة والوضوح الكريستالي */
.movie-backdrop,
.series-backdrop {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
    z-index: 0;
    /* جودة سينمائية فائقة مع تباين لوني ناصع وبدون ضبابية */
    filter: brightness(0.85) contrast(1.1) saturate(1.22);
    transform: scale(1.01);
    transition: background-image 0.5s ease-in-out, opacity 0.4s ease;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
}

/* طبقة التظليل والعزل السينمائي الشفاف المريح للعين في RTL */
.movie-backdrop::after,
.series-backdrop::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to left, rgba(6, 8, 13, 0.96) 0%, rgba(6, 8, 13, 0.72) 38%, rgba(6, 8, 13, 0.12) 75%, rgba(6, 8, 13, 0.45) 100%),
        linear-gradient(to bottom, rgba(6, 8, 13, 0.1) 0%, transparent 45%, rgba(6, 8, 13, 0.95) 88%, #06080d 100%);
}

/* =========================================================
   تكبير الصندوق والمحتويات الداخلية بشكل متناسق وملء الفراغ
   ========================================================= */
.movie-card-container {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 50px;
    align-items: center;
    background: rgba(14, 18, 27, 0.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 45px 50px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 25px;
}

.movie-poster-box {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 330px;
    /* تكبير عرض خانة البوستر */
    flex-shrink: 0;
}

.movie-poster-img,
.series-poster-img {
    width: 100%;
    height: 400px;
    /* تكبير طول البوستر ليناسب المساحة الجديدة */
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.btn-watch-movie {
    width: 100%;
    padding: 18px;
    /* تكبير زر شاهد الآن */
    font-size: 22px;
    font-weight: 900;
    border-radius: 16px;
    background: var(--accent-red);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 25px rgba(217, 36, 36, 0.5);
    transition: all 0.25s ease;
}

.btn-watch-movie:hover {
    background: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(217, 36, 36, 0.7);
}

.movie-info-box,
.series-info-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* تباعد متناسق بين العناصر الداخلية */
    min-width: 0;
}

.movie-header-title-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.movie-main-title {
    font-size: 46px !important;
    /* تكبير عنوان الفيلم بشكل ضخم وبارز */
    font-weight: 900 !important;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    word-break: break-word;
}

.action-btn-fav {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 60px !important;
    /* تكبير زر المفضلة (القلب) */
    height: 60px !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 26px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.action-btn-fav:hover {
    background: rgba(229, 57, 53, 0.25);
    border-color: #e53935;
    color: #e53935;
    transform: scale(1.12);
}

.action-btn-fav.active {
    background: #e53935;
    border-color: #e53935;
    color: #ffffff;
    box-shadow: 0 0 25px rgba(229, 57, 53, 0.7);
}

.movie-genre-text {
    font-size: 20px !important;
    /* تكبير التصنيف والمدة */
    font-weight: 700 !important;
}

.movie-rating-badge {
    font-size: 21px !important;
    /* تكبير شارة التقييم والنقاط */
    font-weight: 800 !important;
}

.movie-subheading {
    font-size: 22px !important;
    /* تكبير كلمة "القصة" والعناوين */
    font-weight: 800 !important;
    margin: 12px 0 8px 0 !important;
}

.movie-plot-text {
    font-size: 18px !important;
    /* تكبير نص القصة لتسهيل قراءته */
    line-height: 1.8 !important;
}

.movie-meta-item,
.movie-text-small,
.movie-subheading-small {
    font-size: 18px !important;
    /* تكبير معلومات المخرج والممثلين */
}

/* ==========================================
   التعديلات الجديدة على النصوص لتكون أكبر وأكثر بياضاً وسماكة
   ========================================== */

.movie-genre-text {
    color: #ffffff !important;
    /* لون أبيض ناصع */
    font-size: 17px !important;
    /* تكبير درجة */
    margin: 0;
    font-weight: 700 !important;
    /* خط غليظ */
}

.movie-rating-badge {
    color: var(--accent-gold);
    font-size: 19px !important;
    /* تكبير التقييم درجة */
    font-weight: 800 !important;
    /* خط غليظ جداً */
    display: flex;
    align-items: center;
    gap: 6px;
}

.movie-details-scrollable {
    overflow-y: auto;
    max-height: 220px;
    padding-left: 5px;
}

.movie-subheading {
    color: #ffffff !important;
    /* أبيض ناصع */
    font-size: 22px !important;
    /* تكبير كلمة "القصة" */
    font-weight: 800 !important;
    /* خط غليظ جداً */
    margin: 10px 0 6px 0;
}

.movie-plot-text {
    color: #ffffff !important;
    /* أبيض ناصع */
    line-height: 1.7;
    font-size: 18px !important;
    /* تكبير خط القصة */
    font-weight: 600 !important;
    /* خط شبه غليظ لتسهيل القراءة */
    margin: 0;
}

.movie-cast-director-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.movie-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px !important;
    /* تكبير حاوية الممثلين والمخرج */
}

.movie-subheading-small {
    color: #ffffff !important;
    /* أبيض ناصع لعناوين (المخرج/الممثلين) */
    margin: 0;
    font-weight: 700 !important;
    /* خط غليظ */
    font-size: 17px !important;
}

.movie-text-small {
    color: #ffffff !important;
    /* أبيض ناصع لأسماء الأشخاص */
    font-weight: 700 !important;
    /* خط غليظ */
    font-size: 17px !important;
}

/* SERIES DETAILS */
.series-screen-layout {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 35px 40px 60px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30px;
    scroll-behavior: smooth;
}

.series-top-card {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 40px;
    align-items: flex-start;
    background: rgba(14, 18, 27, 0.65);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 35px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.series-poster-box {
    width: 240px;
    flex-shrink: 0;
}

/* =========================================================
   TRAILER & ACTION BUTTONS (زر الإعلان الترويجي)
   ========================================================= */
.movie-meta-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-play-trailer {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 9px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.btn-play-trailer:hover {
    background: rgba(229, 9, 20, 0.9);
    border-color: #e50914;
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.45);
    transform: translateY(-2px);
}

.btn-play-trailer i {
    color: #ff2a2a;
    font-size: 18px;
    transition: color 0.25s ease;
}

.btn-play-trailer:hover i {
    color: #ffffff;
}

/* =========================================================
   POPULAR SHELF SECTION (الأفلام والمسلسلات الرائجة للمشاهدة الآن)
   ========================================================= */
.popular-section {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    margin: 35px auto 15px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.popular-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.popular-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popular-title {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.popular-icon {
    color: #e50914;
    font-size: 24px;
    filter: drop-shadow(0 0 10px rgba(229, 9, 20, 0.65));
}

.popular-subtitle {
    font-size: 15px;
    color: #94a3b8;
    font-weight: 500;
    margin: 0;
}

.popular-view-all-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.popular-view-all-btn:hover {
    background: rgba(229, 9, 20, 0.18);
    border-color: #e50914;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.3);
}

.popular-cards-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 4px 20px 4px;
    scroll-behavior: smooth;
}

.popular-cards-scroll::-webkit-scrollbar {
    height: 6px;
}

.popular-cards-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.popular-cards-scroll::-webkit-scrollbar-thumb {
    background: rgba(229, 9, 20, 0.5);
    border-radius: 6px;
}

.popular-cards-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent-red);
}

.popular-card {
    flex: 0 0 190px;
    width: 190px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 14px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.popular-card:hover {
    transform: translateY(-8px) scale(1.03);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(229, 9, 20, 0.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 18px rgba(229, 9, 20, 0.25);
}

.popular-card-poster-wrap {
    position: relative;
    width: 100%;
    height: 270px;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.popular-card-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.popular-card:hover .popular-card-poster {
    transform: scale(1.07);
}

.popular-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #facc15;
    display: flex;
    align-items: center;
    gap: 4px;
}

.popular-card-title {
    color: #f1f5f9;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    padding: 0 4px;
}

.popular-card:hover .popular-card-title {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* =========================================================
   FLOATING SCROLL TO TOP BUTTON (زر الصعود للأعلى الفاخر)
   ========================================================= */
.btn-scroll-top {
    position: fixed;
    bottom: 30px;
    left: 40px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.45);
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-scroll-top:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.65);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.btn-scroll-top.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   TRAILER MODAL
   ========================================================= */
.trailer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.trailer-modal-content {
    background: #0d121c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    width: 100%;
    max-width: 900px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
}

.trailer-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trailer-modal-header h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.trailer-header-icon {
    color: #ff2a2a;
    margin-left: 8px;
}

.btn-close-trailer {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #fff;
    font-size: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-close-trailer:hover {
    background: #e50914;
    transform: scale(1.1);
}

.trailer-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
}

.trailer-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.series-episodes-section {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.series-episodes-heading {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.seasons-tabs-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 14px 2px;
}

.season-tab-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    padding: 14px 28px !important;
    /* تكبير مساحة زر الموسم */
    font-size: 18px !important;
    /* تكبير حجم خط زر الموسم */
    font-weight: 800 !important;
    /* جعل الخط عريضاً وبارزاً */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px !important;
    /* زيادة التباعد داخل الزر */
    transition: all 0.25s ease;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.season-tab-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.season-tab-btn.active {
    background: var(--accent-red);
    color: #fff;
    border-color: var(--accent-red);
    box-shadow: 0 4px 15px rgba(217, 36, 36, 0.4);
}

.season-count-pill {
    background: rgba(0, 0, 0, 0.35);
    font-size: 15px !important;
    /* تكبير رقم الحلقات بجانب الموسم */
    font-weight: 800 !important;
    /* جعل الرقم عريضاً */
    padding: 4px 12px !important;
    /* زيادة الحواف الداخلية للرقم */
    border-radius: 14px;
}

.season-tab-btn.active .season-count-pill {
    background: rgba(255, 255, 255, 0.25);
}

/* EPISODES GRID */
.episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: 20px;
    width: 100%;
}

.episode-card {
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.episode-card:hover {
    transform: translateY(-6px);
    border-color: rgba(217, 36, 36, 0.6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(217, 36, 36, 0.25);
}

.episode-thumb-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
}


.episode-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.episode-card:hover .episode-thumb-img {
    transform: scale(1.08);
}

.episode-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.episode-card:hover .episode-play-overlay {
    opacity: 1;
}

.episode-play-icon {
    width: 44px;
    height: 44px;
    background: var(--accent-red);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(217, 36, 36, 0.5);
    transform: scale(0.8);
    transition: transform 0.25s ease;
}

.episode-card:hover .episode-play-icon {
    transform: scale(1);
}

.episode-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fbbf24;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.episode-info-box {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.episode-card-title {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.episode-card-duration {
    color: #94a3b8;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: right;
}

/* =========================================================
   FULLSCREEN VIDEO PLAYER MODAL
   ========================================================= */
.fullscreen-video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-video-modal.hidden {
    display: none !important;
}

.btn-close-video {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, transform 0.25s ease, background 0.25s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    opacity: 1;
    pointer-events: auto;
}

.btn-close-video.idle-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    cursor: default;
}

.btn-close-video:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    transform: scale(1.12);
}

.fullscreen-video-container {
    width: 100%;
    height: 100%;
}

/* Hide PIP Button in Artplayer Controls */
.art-control-pip,
.art-control-pip-mode,
[data-control="pip"] {
    display: none !important;
}

/* Custom SweetAlert2 Dark Glassmorphic Popup Theme */
.almezo-swal-popup {
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    padding: 30px 25px !important;
    background: rgba(18, 22, 30, 0.95) !important;
}

.almezo-swal-popup .swal2-title {
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
}

.almezo-swal-popup .swal2-html-container {
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
    font-size: 15px !important;
    color: #cbd5e1 !important;
    line-height: 1.6 !important;
    margin-top: 5px !important;
}

.almezo-swal-btn {
    background: linear-gradient(135deg, #f4c242, #e5b330) !important;
    color: #000 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    padding: 12px 35px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(244, 194, 66, 0.35) !important;
    transition: all 0.25s ease !important;
}

.almezo-swal-btn:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 20px rgba(244, 194, 66, 0.5) !important;
}

/* =========================================================
   FORCE LANDSCAPE OVERLAY
   ========================================================= */
.rotate-prompt {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0f121a;
    z-index: 9999999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.rotate-icon {
    font-size: 70px;
    color: #4caf50;
    animation: rotatePhone 2s infinite ease-in-out;
}

.rotate-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    color: #fff;
}

.rotate-subtitle {
    font-size: 16px;
    color: #aaa;
    margin-top: 8px;
}

.force-landscape-btn {
    margin-top: 24px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
    transition: all 0.25s ease;
}

.force-landscape-btn:hover,
.force-landscape-btn:active {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6);
}

.force-landscape-btn i {
    font-size: 16px;
    transition: transform 0.4s ease;
}

.force-landscape-btn:hover i {
    transform: rotate(180deg);
}

@keyframes rotatePhone {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-90deg);
    }
}

@media screen and (orientation: portrait) and (max-width: 1024px) and (hover: none) {
    body:not(.platform-electron) .rotate-prompt {
        display: flex !important;
    }

    body:not(.platform-electron)> :not(#rotate-prompt) {
        display: none !important;
    }
}

body.platform-electron .rotate-prompt,
body.tv-device-mode .rotate-prompt,
body.tv-mode .rotate-prompt,
body.desktop-device-mode .rotate-prompt,
body.platform-native:not(.platform-android):not(.platform-ios) .rotate-prompt {
    display: none !important;
}

/* تنظيف حاويات البحث من أي خطوط سابقة */
.col-sidebar .search-box {
    border: none !important;
}

/* استهداف حقل إدخال الأفلام مباشرة (عن طريق كلمة المسلسلات) ووضع خط أسفله */
input.search-input[placeholder*="المسلسلات"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    display: block !important;
    border-radius: 0 !important;
}

/* ==========================================
   تكبير الشريط السفلي لمشغل Video.js وترتيب الأزرار بدقة
   ========================================== */
.video-js .vjs-control-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 95px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 70%, transparent 100%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    direction: ltr !important;
    padding: 10px 20px 0 20px !important;
    box-sizing: border-box !important;
}

/* إزالة زر السرعة تماماً كما طلب المستخدم */
.video-js .vjs-playback-rate {
    display: none !important;
}

/* أزرار أقصى اليسار: التشغيل/الإيقاف */
.video-js .vjs-play-control {
    order: 1 !important;
    margin-right: 6px !important;
}

/* أزرار التقديم والتأخير 10 ثوانٍ */
.video-js .vjs-skip-backward-10 {
    order: 2 !important;
    margin-right: 4px !important;
}

.video-js .vjs-skip-forward-10 {
    order: 3 !important;
    margin-right: 12px !important;
}

/* الارتفاع 95px مثل بقية أزرار الشريط: أيقونات فيديوجيه تُوسَّط بـline-height: 95px
   (انظر .vjs-button > .vjs-icon-placeholder:before)، فكان ارتفاع 44px الثابت يدفع
   أيقونتي التقديم والتأخير للأسفل فتبدوان غير مصطفّتين مع الزر التشغيل والصوت. */
.video-js .vjs-skip-backward-10,
.video-js .vjs-skip-forward-10 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    cursor: pointer !important;
    width: 52px !important;
    height: 95px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.video-js .vjs-skip-backward-10:hover,
.video-js .vjs-skip-forward-10:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: scale(1.1) !important;
}

/* لوحة مستوى الصوت */
.video-js .vjs-volume-panel {
    order: 4 !important;
    margin-right: 14px !important;
}

/* عداد الوقت الكامل في الأفلام والمسلسلات (الوقت المنقضي / المدة الكاملة) */
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
}

.video-js .vjs-current-time {
    order: 5 !important;
    margin-left: 6px !important;
}

.video-js .vjs-time-divider {
    order: 6 !important;
    min-width: 14px !important;
    text-align: center !important;
    padding: 0 2px !important;
}

.video-js .vjs-duration {
    order: 7 !important;
    margin-right: 14px !important;
}

.video-js .vjs-current-time-display,
.video-js .vjs-duration-display,
.video-js .vjs-time-divider span {
    font-family: 'Outfit', monospace, system-ui !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.video-js .vjs-current-time-display {
    color: #ffffff !important;
}

.video-js .vjs-time-divider span {
    color: rgba(255, 255, 255, 0.4) !important;
}

.video-js .vjs-duration-display {
    color: rgba(255, 255, 255, 0.8) !important;
}

.video-js .vjs-remaining-time {
    display: none !important;
}

/* شريط التقدم والعداد العريض والكامل أعلى أزرار التحكم */
.video-js .vjs-progress-control {
    position: absolute !important;
    top: -12px !important;
    left: 20px !important;
    right: 20px !important;
    width: calc(100% - 40px) !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    z-index: 40 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* المسار الكلي للشريط (Track) */
.video-js .vjs-progress-holder {
    height: 6px !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px !important;
    margin: 0 !important;
    position: relative !important;
    transition: height 0.15s ease !important;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
    height: 9px !important;
}

/* شريط التحميل المؤقت (Buffered / Loaded) */
.video-js .vjs-load-progress {
    height: 100% !important;
    background: rgba(255, 255, 255, 0.45) !important;
    border-radius: 4px !important;
}

.video-js .vjs-load-progress div {
    background: rgba(255, 255, 255, 0.45) !important;
    height: 100% !important;
    border-radius: 4px !important;
}

/* شريط التشغيل المقطوع (Played Progress) */
.video-js .vjs-play-progress {
    height: 100% !important;
    background: linear-gradient(90deg, #e50914, #ff3b30) !important;
    border-radius: 4px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* مقبض السحب الدائري الأنيق (Scrubber Thumb) */
.video-js .vjs-play-progress:before {
    content: '' !important;
    position: absolute !important;
    right: -7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    background: #ffffff !important;
    border: 2px solid #e50914 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.8), 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.video-js .vjs-progress-control:hover .vjs-play-progress:before {
    transform: translateY(-50%) scale(1.25) !important;
    box-shadow: 0 0 14px rgba(229, 9, 20, 1), 0 3px 8px rgba(0, 0, 0, 0.9) !important;
}

/* فقاعة الوقت عند تمرير الماوس فوق الشريط */
.video-js .vjs-time-tooltip {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    top: -34px !important;
    font-family: 'Outfit', sans-serif !important;
}

.video-js .vjs-live-control {
    order: 11 !important;
    margin: 0 10px !important;
}

/* فاصل مرن يدفع أزرار اليمين لأقصى اليمين دائماً */
.vjs-custom-spacer {
    flex: 1 1 auto !important;
    order: 15 !important;
    min-width: 20px !important;
    pointer-events: none !important;
}

/* أزرار أقصى اليمين: الترجمة، ثم الأبعاد، ثم ملء الشاشة في أقصى اليمين */
.custom-vjs-settings-btn,
.video-js .vjs-subs-caps-button {
    order: 20 !important;
    margin-left: 6px !important;
}

/* أزرار أقصى اليمين: الأبعاد وملء الشاشة متساويان في الحجم بدقة 100% */
.custom-vjs-aspect-btn,
.vjs-aspect-ratio-btn {
    order: 25 !important;
    margin-left: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    transition: background 0.2s, transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}

.custom-vjs-fs-btn,
.video-js .vjs-fullscreen-control {
    order: 30 !important;
    margin-left: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    transition: background 0.2s, transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}

/* توحيد أحجام أيقونات الأزرار في المشغل لتكون متناسقة ومتساوية تماماً */
.custom-vjs-aspect-btn i,
.vjs-aspect-ratio-btn i,
.custom-vjs-fs-btn i,
.custom-vjs-settings-btn i {
    color: #ffffff !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}

.custom-vjs-aspect-btn:hover,
.custom-vjs-fs-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.custom-vjs-aspect-btn:hover i,
.vjs-aspect-ratio-btn:hover i,
.custom-vjs-fs-btn:hover i,
.custom-vjs-settings-btn:hover i {
    color: var(--accent-red-hover, #ff2a2a) !important;
    transform: scale(1.15) !important;
}

/* شعار وإشعار داخلي في قلب المشغل (In-Player OSD Notification Pill) */
.vjs-player-osd-pill {
    position: absolute !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-12px) scale(0.95) !important;
    background: rgba(10, 14, 23, 0.94) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    padding: 10px 24px !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85), 0 0 18px rgba(34, 197, 94, 0.35) !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.vjs-player-osd-pill.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* =========================================================
   توسيط الساعة والتاريخ بدقة تامة في منتصف الشاشة
   ========================================================= */
.nav-center-time {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    pointer-events: none;
}

/* =========================================================
   إخفاء شارة رقم الحلقة من أعلى البوستر
   ========================================================= */
.episode-badge {
    display: none !important;
}

/* =========================================================
   تعديلات المشغل الاحترافية (تصميم نتفلكس)
   ========================================================= */

/* 1. إخفاء العناصر الخارجية وعناصر الصورة داخل صورة */
.player-top-header {
    display: none !important;
}

.btn-close-video {
    display: none !important;
}

.video-js .vjs-picture-in-picture-control {
    display: none !important;
}

/* 2. تكبير الشريط السفلي وجميع الأزرار */
.video-js .vjs-control-bar {
    height: 95px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent) !important;
    align-items: center !important;
    /* لتوسيط العناصر داخله */
}

.video-js .vjs-button>.vjs-icon-placeholder:before {
    font-size: 4em !important;
    /* تكبير الأيقونات */
    line-height: 95px !important;
}

.video-js .vjs-time-control {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: normal !important;
}

/* 3. تعديل مستوى الصوت (تغليظ وتوسيط كما في الصورة) */
/* =========================================================
   3. إصلاح وتجميل شريط الصوت (Netflix Style)
   ========================================================= */

.video-js .vjs-volume-panel {
    display: flex !important;
    align-items: center !important;
}

/* توسيط عنصر التحكم بالشريط داخل الحاوية */
.video-js .vjs-volume-control.vjs-control {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* الشريط الرمادي (الخلفية) - جعله غليظاً وموسيطاً */
.video-js .vjs-volume-bar.vjs-slider-horizontal {
    width: 80px !important;
    height: 8px !important;
    /* تغليظ الشريط */
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    margin: 0 10px 0 0 !important;
    position: relative !important;
}

/* الشريط الأحمر (المستوى الفعلي) - يأخذ نفس الارتفاع */
.video-js .vjs-volume-level {
    background: var(--accent-red) !important;
    height: 100% !important;
    /* ضروري لكي يملأ الشريط الرمادي بالكامل ولا ينزل للأسفل */
    border-radius: 4px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* الدائرة البيضاء (المقبض) - توسيط احترافي 100% */
.video-js .vjs-volume-level:before {
    content: '' !important;
    /* مسح الأيقونة الافتراضية واستبدالها بدائرة حقيقية مرسومة */
    position: absolute !important;
    right: -8px !important;
    /* وضعها في نهاية الشريط الأحمر */
    top: 50% !important;
    transform: translateY(-50%) !important;
    /* توسيط الدائرة عمودياً بشكل دقيق جداً */
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

/* إخفاء تلميح (Mute) المزعج الذي ظهر في صورتك */
.video-js .vjs-mute-control .vjs-control-text,
.video-js .vjs-volume-panel .vjs-control-text {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 4. تصميم الشريط العلوي الداخلي (يحتوي الإغلاق والمعلومات) */
.vjs-custom-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 30px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: opacity 0.3s ease, visibility 0.3s;
    direction: ltr;
    /* زر الإغلاق يسار، والمعلومات يمين */
}

/* إخفاء الشريط العلوي تلقائياً عند اختفاء الشريط السفلي (عدم لمس الشاشة) */
.vjs-user-inactive .vjs-custom-top-bar {
    opacity: 0;
    visibility: hidden;
}

/* تصميم أزرار الشريط العلوي */
.vjs-top-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

.vjs-top-btn:hover {
    background: var(--accent-red);
    transform: scale(1.1);
    border-color: var(--accent-red);
}

/* العنوان ومؤشر الاتصال تحته في وسط الشريط العلوي */
.vjs-custom-mid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.vjs-custom-mid .vjs-custom-title {
    max-width: 100%;
}

.mizo-conn {
    direction: rtl;
    font-size: 15px;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 3px 14px;
    white-space: nowrap;
}

.mizo-conn[hidden] {
    display: none;
}

.mizo-conn i {
    font-style: normal;
    margin-inline-end: 4px;
}

.vjs-custom-title {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5. تنسيق الأزرار الجديدة في الشريط السفلي */
.custom-vjs-btn {
    cursor: pointer;
    color: #fff;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.4rem !important;
    padding: 0 !important;
    transition: color 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.custom-vjs-btn:hover {
    color: var(--accent-red-hover, #ff2a2a);
}

.custom-vjs-fs-btn {
    display: inline-flex !important;
}

/* تكبير أزرار الترجمة والصوتيات الافتراضية الخاصة بـ Video.js إن وجدت */
.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js .vjs-audio-button .vjs-icon-placeholder:before {
    font-size: 2.8em !important;
}

/* إخفاء زر الفل سكرين الافتراضي القديم لظهور الزر المخصص الجديد مكانه */
.video-js .vjs-fullscreen-control {
    display: none !important;
}

/* =========================================================
   تأثيرات حركية (أنيميشن) وألوان عصرية للمشغل (نسخة مصححة)
   ========================================================= */

/* 1. أنيميشن النبض (Pulse) لزر التشغيل الكبير في بداية الفيديو */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 36, 36, 0.7);
    }

    70% {
        box-shadow: 0 0 0 25px rgba(217, 36, 36, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(217, 36, 36, 0);
    }
}

.video-js .vjs-big-play-button {
    background: rgba(217, 36, 36, 0.85) !important;
    /* لون أحمر زجاجي */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    /* جعله دائرياً تماماً */
    width: 90px !important;
    height: 90px !important;
    line-height: 85px !important;
    /* الترتيب الصحيح لدعم متصفحات آبل ثم المتصفحات القياسية */
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    animation: pulseGlow 2s infinite !important;
    /* تشغيل النبض */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.video-js .vjs-big-play-button:hover {
    background: var(--accent-red) !important;
    transform: scale(1.1) translate(-45%, -45%) !important;
    /* تكبير عند اللمس */
}

/* إخفاء زر الإيقاف/التشغيل وعلامة البوز تماماً أثناء التقديم أو التحميل لمنع الإزعاج */
.video-js.vjs-seeking .vjs-big-play-button,
.video-js.vjs-waiting .vjs-big-play-button,
.video-js.is-seeking-custom .vjs-big-play-button,
.video-js.vjs-has-started.vjs-paused.is-seeking-custom .vjs-big-play-button,
.video-js.vjs-has-started.vjs-seeking .vjs-big-play-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* إظهار علامة التحميل (Spinner) الفاخرة وتشغيل الدوران المستمر */
.video-js.vjs-seeking .vjs-loading-spinner,
.video-js.vjs-waiting .vjs-loading-spinner,
.video-js.is-seeking-custom .vjs-loading-spinner {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: vjsSpinnerSpin 0.75s linear infinite !important;
}

/* تصميم علامة التحميل الدائرية الاحترافية والجميلة */
.video-js .vjs-loading-spinner {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 66px !important;
    height: 66px !important;
    margin: -33px 0 0 -33px !important;
    border-radius: 50% !important;
    border: 4px solid rgba(255, 255, 255, 0.15) !important;
    border-top-color: #f59e0b !important;
    border-right-color: #e50914 !important;
    animation: vjsSpinnerSpin 0.75s linear infinite !important;
    box-shadow: 0 0 25px rgba(229, 9, 20, 0.6) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.video-js .vjs-loading-spinner:before,
.video-js .vjs-loading-spinner:after {
    display: none !important;
    content: none !important;
}

@keyframes vjsSpinnerSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* إصلاح ترتيب الفلتر الزجاجي لأزرار الشريط العلوي أيضاً */
.vjs-top-btn {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* 2. ألوان متدرجة مضيئة (Gradient Glow) لشريط تقدم الفيديو وشريط الصوت */
.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    background: linear-gradient(90deg, #ff3b30, #ff9f0a) !important;
    /* تدرج من الأحمر للبرتقالي/الذهبي */
    box-shadow: 0 0 12px rgba(255, 59, 48, 0.8) !important;
    /* توهج حول الشريط */
}

/* تلوين نقطة التحكم في الشريط (الدائرة البيضاء) وجعلها تتوهج */
.video-js .vjs-play-progress:before,
.video-js .vjs-volume-level:before {
    color: #fff !important;
    text-shadow: 0 0 10px #ff9f0a !important;
    transition: transform 0.2s ease !important;
}

/* تكبير نقطة التحكم قليلاً عند تمرير الماوس على الشريط */
.video-js .vjs-progress-control:hover .vjs-play-progress:before {
    transform: scale(1.3) translateY(-2px) !important;
}

/* 3. تأثير ارتداد وتوهج لجميع أزرار المشغل السفلية والعلوية */
.video-js .vjs-button,
.custom-vjs-btn,
.vjs-top-btn {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    /* تأثير ارتداد (Bounce) مرن */
}

.video-js .vjs-button:hover,
.custom-vjs-btn:hover {
    transform: translateY(-4px) scale(1.15) !important;
    /* القفز للأعلى والتكبير */
    color: #ff9f0a !important;
    /* تغير اللون للذهبي */
    text-shadow: 0 5px 15px rgba(255, 159, 10, 0.6) !important;
}

/* 4. أنيميشن انزلاق (Slide) سينمائي للأشرطة العلوية والسفلية بدلاً من الاختفاء العادي */
.video-js .vjs-control-bar {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease !important;
}

.vjs-custom-top-bar {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, visibility 0.5s !important;
}

/* عندما يختفي المؤشر (عدم اللمس): ينزل الشريط السفلي لأسفل، ويصعد العلوي لأعلى */
.video-js.vjs-user-inactive .vjs-control-bar {
    transform: translateY(20px) !important;
    /* انزلاق للأسفل */
    opacity: 0 !important;
}

.video-js.vjs-user-inactive .vjs-custom-top-bar {
    transform: translateY(-20px) !important;
    /* انزلاق للأعلى */
    opacity: 0 !important;
}

/* =========================================================
   تأثيرات حركية (أنيميشن) وألوان عصرية لجميع صفحات المنصة
   ========================================================= */

/* 1. أنيميشن الانتقال بين الصفحات (دخول سينمائي ناعم) */
@keyframes pageEnter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* تطبيق الحركة على أي صفحة يتم فتحها (إزالة كلاس hidden) */
.app-screen-container:not(.hidden),
.app-screen:not(.hidden),
#auth1-screen:not(.hidden),
#auth2-screen:not(.hidden) {
    animation: pageEnter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

/* 2. تأثيرات عصرية لبطاقات الصفحة الرئيسية (توهج وارتفاع) */
.dash-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.dash-card:hover {
    transform: translateY(-12px) scale(1.03) !important;
    /* رفع البطاقة للأعلى */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 3. تأثيرات بطاقات الأفلام والمسلسلات والحلقات */
.vod-card,
.episode-card {
    /* تحديد الخصائص المتحركة فعلياً بدل "all" يقلل عبء إعادة الحساب على كل بطاقة،
       وهو فارق ملموس عند وجود عشرات البطاقات المعروضة معاً على أجهزة ضعيفة */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.vod-card:hover,
.episode-card:hover {
    transform: translateY(-8px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(217, 36, 36, 0.3) !important;
    /* توهج أحمر خفيف */
    border-color: rgba(217, 36, 36, 0.5) !important;
    z-index: 10;
}

/* 4. حركة القوائم الجانبية (الأقسام والقنوات) */
.list-item {
    transition: transform 0.3s ease, background 0.3s ease, border-left-color 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.list-item:hover {
    transform: translateX(-8px) !important;
    /* دفع العنصر لليسار قليلاً في الواجهة العربية */
    background: linear-gradient(90deg, rgba(217, 36, 36, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-left-color: var(--accent-gold) !important;
}

/* 5. تأثير عصري لجميع الأزرار الرئيسية (توهج عند اللمس) */
.btn-primary,
.btn-watch-movie {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover,
.btn-watch-movie:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(217, 36, 36, 0.5) !important;
    /* توهج */
    filter: brightness(1.1);
}

/* 6. تأثير النبض الخفيف لأيقونة الملف الشخصي والإعدادات في البار العلوي */
@keyframes softPulse {
    0% {
        filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(33, 150, 243, 0.9));
    }

    100% {
        filter: drop-shadow(0 0 8px rgba(33, 150, 243, 0.5));
    }
}

.profile-icon {
    animation: softPulse 3s infinite;
}

/* 7. تحسينات لونية عصرية للخلفية (إعطاء عمق أكبر) */
body {
    background-image: linear-gradient(to bottom, rgba(15, 18, 26, 0.85) 0%, rgba(5, 8, 12, 0.98) 100%), url('photo/background.jpeg') !important;
}

/* أنيميشن ظهور النافذة المنبثقة بشكل سينمائي */
@keyframes modalPopupEntry {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.custom-logout-box {
    animation: modalPopupEntry 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* تأثير حركي تفاعلي لأزرار نافذة الخروج عند مرور الماوس */
.logout-action-btn {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.logout-action-btn:hover {
    transform: translateY(-4px) scale(1.06) !important;
    filter: brightness(1.15);
}

/* إبعاد وإنزال حقوق النشر في الأسفل قليلاً */
.auth-container .auth-footer,
.auth-footer {
    position: relative !important;
    bottom: auto !important;
    margin-top: 40px !important;
    /* زيادة المسافة العلوية لإنزالها للأسفل */
    padding-bottom: 15px;
}

.auth-container .copyright {
    font-size: 0.95rem !important;
    color: #94a3b8 !important;
    letter-spacing: 0.3px;
}

/* إجبار أيقونة التحديث على اللون الأصفر بقوة مطلقة */
.navbar .nav-right i.fas.fa-sync-alt,
.navbar .nav-right .refresh-icon,
i.fas.fa-sync-alt.refresh-icon {
    color: #f4c242 !important;
    filter: drop-shadow(0 0 10px rgba(244, 194, 66, 0.8)) !important;
}

.navbar .nav-right i.fas.fa-sync-alt:hover,
.navbar .nav-right .refresh-icon:hover {
    color: #f5d16e !important;
    filter: drop-shadow(0 0 18px rgba(245, 209, 110, 1)) !important;
}

/* توحيد حجم وشكل جميع أزرار الشريط العلوي لتكون متساوية تماماً */
.nav-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 18px;
}

/* 1. زر الهوم (أخضر) */
.nav-btn-home {
    background: rgba(76, 175, 80, 0.15) !important;
    border: 1.5px solid rgba(76, 175, 80, 0.65) !important;
    color: #4caf50 !important;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.35);
}

.nav-btn-home:hover {
    color: #00ff66 !important;
    border-color: #00ff66 !important;
    background: rgba(76, 175, 80, 0.3) !important;
    box-shadow: 0 0 25px rgba(0, 255, 102, 0.85);
    transform: scale(1.12);
}

/* 2. زر التحديث (أصفر) */
.nav-btn-refresh {
    background: rgba(244, 194, 66, 0.15) !important;
    border: 1.5px solid rgba(244, 194, 66, 0.65) !important;
    color: #f4c242 !important;
    box-shadow: 0 0 12px rgba(244, 194, 66, 0.35);
}

.nav-btn-refresh:hover {
    color: #ffd700 !important;
    border-color: #ffd700 !important;
    background: rgba(244, 194, 66, 0.3) !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.85);
    transform: scale(1.12);
}

/* 3. زر الملف الشخصي (أزرق) */
.nav-btn-profile {
    background: rgba(33, 150, 243, 0.15) !important;
    border: 1.5px solid rgba(33, 150, 243, 0.65) !important;
    color: #2196f3 !important;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.35);
}

.nav-btn-profile:hover {
    color: #00e5ff !important;
    border-color: #00e5ff !important;
    background: rgba(33, 150, 243, 0.3) !important;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.85);
    transform: scale(1.12);
}

/* 4. زر تسجيل الخروج (أحمر) */
.nav-btn-logout {
    background: rgba(229, 57, 53, 0.15) !important;
    border: 1.5px solid rgba(229, 57, 53, 0.65) !important;
    color: #e53935 !important;
    box-shadow: 0 0 12px rgba(229, 57, 53, 0.35);
    transform: scale(-1.12);
}

.nav-btn-logout:hover {
    color: #ff1744 !important;
    border-color: #ff1744 !important;
    background: rgba(229, 57, 53, 0.3) !important;
    box-shadow: 0 0 25px rgba(255, 23, 68, 0.85);
    transform: scale(1.12);
}

/* =========================================================
   تعديل وتصغير حجم اللوجو والشعار في الشريط العلوي
   ========================================================= */
.logo-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-img-custom {
    height: 80px !important;
    /* تقليص الطول ليكون مناسباً للشريط */
    width: 80px !important;
    /* تقليص العرض ليكون مربعاً ومنظماً */
    min-height: 80px !important;
    min-width: 80px !important;
    border-radius: 8px;
    object-fit: cover;
}

.logo-text-custom {
    font-size: 1.7rem !important;
    /* ضبط حجم النص ليتطابق مع بقية عناصر الشريط */
    color: #fff;
    margin: 0;
    white-space: nowrap;
    /* منع انقسام النص على أسطر متعددة */
}

/* حالة الحساب: متصل (أخضر مشع ومتوهج) */
.profile-status.status-online {
    background: rgba(76, 175, 80, 0.15) !important;
    border: 1.5px solid rgba(76, 175, 80, 0.6) !important;
    color: #00ff66 !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.45) !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.7);
}

/* حالة الحساب: غير متصل أو منتهي أو معطل (أحمر مشع ومتوهج) */
.profile-status.status-offline {
    background: rgba(229, 57, 53, 0.15) !important;
    border: 1.5px solid rgba(229, 57, 53, 0.6) !important;
    color: #ff5252 !important;
    box-shadow: 0 0 15px rgba(229, 57, 53, 0.45) !important;
    text-shadow: 0 0 8px rgba(229, 57, 53, 0.7);
}

/* ==========================================
   تلوين أزرار الشريط العلوي للمشغل
   ========================================== */

/* 1. زر الإغلاق: أحمر دائماً مع أيقونة بيضاء */
#innerPlayerClose {
    background-color: #e53935 !important;
    /* لون أحمر واضح */
    color: #ffffff !important;
    /* لون علامة X */
    border: 2px solid #e53935 !important;
    opacity: 0.9;
}

#innerPlayerClose:hover {
    background-color: #ef5350 !important;
    /* درجة أفتح قليلاً عند اللمس */
    opacity: 1;
}

/* 2. زر المعلومات: أبيض دائماً مع أيقونة داكنة */
#innerPlayerInfo {
    background-color: #ffffff !important;
    /* خلفية بيضاء */
    color: #0f121a !important;
    /* لون علامة i داكن لتكون واضحة على الأبيض */
    border: 2px solid #ffffff !important;
    opacity: 0.9;
}

#innerPlayerInfo:hover {
    background-color: #e2e8f0 !important;
    /* درجة فضية خفيفة عند اللمس */
    opacity: 1;
}

/* تغيير شكل المؤشر للهواتف فقط عندما تتحول لوضع القراءة */
#serverCode[readonly] {
    cursor: pointer;
}

/* 3. زر المشغل الخارجي (تمت إزالته حسب طلب المستخدم) */
#innerPlayerExternal {
    display: none !important;
}

/* ضمان عدم تكبير الشاشة التلقائي على الموبايل عند الكتابة في الحقول */
.input-field,
input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"] {
    font-size: 16px !important;
    touch-action: manipulation !important;
}

/* إخفاء شاشة خطأ Video.js الافتراضية لمنع وميض رسالة الخطأ أثناء التبديل الذكي بين الصيغ */
.vjs-error-display {
    display: none !important;
}

/* =========================================================
   MULTI-ACCOUNT & PLAYLISTS MANAGEMENT (ALmEz0 Playlists)
   ========================================================= */

/* Top Navbar Accounts Button */
.nav-btn-accounts {
    background: linear-gradient(135deg, rgba(244, 194, 66, 0.2), rgba(212, 160, 23, 0.1)) !important;
    color: #f4c242 !important;
    border-color: rgba(244, 194, 66, 0.4) !important;
}

.nav-btn-accounts:hover {
    background: linear-gradient(135deg, #f4c242, #d4a017) !important;
    color: #111 !important;
    transform: scale(1.08);
}

/* Active Server Banner on Dashboard */
.active-server-banner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 24px auto;
    background: linear-gradient(135deg, rgba(16, 22, 36, 0.85), rgba(10, 14, 24, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.active-server-banner:hover {
    border-color: rgba(244, 194, 66, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(244, 194, 66, 0.15);
}

.active-server-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.banner-server-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: #06090e;
    border: 1.5px solid rgba(244, 194, 66, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.banner-server-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #fff;
}

.active-dot-indicator {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4caf50;
    box-shadow: 0 0 10px #4caf50;
    animation: splashDotPulse 1.5s infinite ease-in-out;
}

.banner-label {
    color: #94a3b8;
    font-size: 13px;
}

.banner-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #cbd5e1;
    margin-top: 3px;
}

.banner-sep {
    color: rgba(255, 255, 255, 0.2);
}

.btn-banner-switch {
    background: linear-gradient(135deg, rgba(244, 194, 66, 0.15), rgba(244, 194, 66, 0.05));
    border: 1px solid rgba(244, 194, 66, 0.4);
    color: #f4c242;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.btn-banner-switch:hover {
    background: linear-gradient(135deg, #f4c242, #d4a017);
    color: #111;
    box-shadow: 0 4px 20px rgba(244, 194, 66, 0.35);
}

/* Saved Accounts button on auth1-screen */
.btn-saved-accounts-auth {
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(244, 194, 66, 0.35);
    color: #f4c242;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s ease;
}

.btn-saved-accounts-auth:hover {
    background: rgba(244, 194, 66, 0.15);
    border-color: #f4c242;
    transform: translateY(-2px);
}

/* Playlists Modal */
.playlists-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 2vw, 24px);
    box-sizing: border-box;
    /*
     * التعتيم على الحاوية نفسها لا على عنصر شقيق.
     *
     * كان التعتيم في .playlists-modal-backdrop وهو شقيق لبطاقة النافذة، فيعتمد ترتيب
     * الرسم بينهما على سياق التكديس. وفي إلكترون كانت الطبقة السوداء تُرسم أحياناً فوق
     * البطاقة نفسها فيظهر كل شيء معتماً حتى ضغطة مفتاح أو فأرة تُعيد الحساب.
     * خلفية العنصر الأب لا يمكن أن تُرسم فوق أبنائه أبداً بحكم قواعد الرسم في CSS،
     * فهذا يزيل الاحتمال من جذره لا يخفّفه.
     */
    background: rgba(0, 0, 0, 0.72);
}

.playlists-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* شفاف: وظيفته الإغلاق عند الضغط خارج البطاقة فقط، والتعتيم صار على الحاوية */
    background: transparent;
    z-index: 0;
}

.playlists-modal-content {
    position: relative;
    width: 100%;
    max-width: min(94vw, 860px);
    max-height: min(92vh, 640px);
    /* نفس nat_bg_dialog_card في أندرويد: لون مصمت وحد أبيض شفاف بدل التدرّج شديد القتامة */
    background: #161B22;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--screen-card-radius, 24px);
    padding: clamp(14px, 2.2vw, 26px) clamp(16px, 2.5vw, 30px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 30px rgba(244, 194, 66, 0.12);
    z-index: 2;
    color: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

.playlists-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: clamp(10px, 1.6vh, 16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.playlists-header-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.playlists-header-icon {
    width: clamp(36px, 4.2vw, 44px);
    height: clamp(36px, 4.2vw, 44px);
    border-radius: 12px;
    background: rgba(244, 194, 66, 0.15);
    color: #f4c242;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 2vw, 20px);
    border: 1px solid rgba(244, 194, 66, 0.3);
    flex-shrink: 0;
}

.playlists-header-title h3 {
    font-size: clamp(17px, 2.2vw, 22px);
    font-weight: 800;
    margin: 0;
    color: #fff;
}

.playlists-header-title p {
    font-size: clamp(11.5px, 1.4vw, 13px);
    color: #94a3b8;
    margin: 2px 0 0 0;
}

.btn-close-playlists {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #cbd5e1;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close-playlists:hover {
    background: #e53935;
    color: #fff;
    transform: rotate(90deg);
}

.playlists-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(10px, 1.5vh, 14px) 0;
    gap: 12px;
    flex-shrink: 0;
}

.btn-add-playlist {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border: none;
    color: #fff;
    padding: clamp(8px, 1.2vw, 12px) clamp(14px, 2vw, 22px);
    border-radius: 12px;
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.35);
    transition: all 0.25s ease;
}

.btn-add-playlist:hover {
    background: linear-gradient(135deg, #66bb6a, #388e3c);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.5);
}

.playlists-count-info {
    font-size: 14px;
    color: #94a3b8;
}

.playlists-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: clamp(240px, 58vh, 480px);
    padding: 4px 4px 18px 4px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 44vw, 360px), 1fr));
    gap: clamp(10px, 1.5vw, 16px);
    overscroll-behavior: contain;
}

/* Playlist Card */
.playlist-card {
    background: rgba(22, 28, 42, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--screen-card-radius, 18px);
    padding: clamp(12px, 1.8vw, 18px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(8px, 1.2vh, 12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    min-height: fit-content;
    cursor: pointer;
}

.playlist-card:hover {
    border-color: rgba(244, 194, 66, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 20px rgba(244, 194, 66, 0.15);
}

.playlist-card:active {
    transform: scale(0.985);
}

.playlist-card.is-active {
    border-color: #4caf50;
    background: linear-gradient(145deg, rgba(16, 40, 24, 0.8), rgba(18, 26, 38, 0.9));
    box-shadow: 0 8px 30px rgba(76, 175, 80, 0.25);
}

.playlist-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.playlist-logo {
    width: clamp(44px, 5vw, 52px);
    height: clamp(44px, 5vw, 52px);
    border-radius: 12px;
    object-fit: cover;
    background: #06090e;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.playlist-card.is-active .playlist-logo {
    border-color: #4caf50;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.4);
}

.playlist-card-meta {
    flex: 1;
    min-width: 0;
}

.playlist-card-meta h4 {
    font-size: clamp(15px, 1.8vw, 17px);
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-username {
    font-size: 13.5px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.playlist-exp {
    font-size: 12.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.playlist-active-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.5);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.playlist-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-playlist-select {
    flex: 1 1 auto;
    background: linear-gradient(135deg, #f4c242, #d4a017);
    color: #111;
    border: none;
    padding: clamp(8px, 1.2vw, 10px) clamp(10px, 1.5vw, 16px);
    border-radius: 10px;
    font-size: clamp(12.5px, 1.4vw, 14px);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    min-height: 40px;
}

.btn-playlist-select:hover {
    background: linear-gradient(135deg, #ffd54f, #f4c242);
    box-shadow: 0 4px 15px rgba(244, 194, 66, 0.4);
    transform: translateY(-1px);
}

.btn-playlist-select.btn-playlist-connect {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.35);
}

.btn-playlist-select.btn-playlist-connect:hover {
    background: linear-gradient(135deg, #4ade80, #16a34a);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.55);
    color: #fff;
    transform: translateY(-2px);
}

.btn-playlist-select.current {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
    border: 1.5px solid rgba(34, 197, 94, 0.6);
    cursor: pointer;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.25);
}

.btn-playlist-select.current:hover {
    background: rgba(34, 197, 94, 0.38);
    border-color: #4ade80;
    color: #fff;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.5);
    transform: translateY(-1px);
}

.btn-playlist-delete {
    flex-shrink: 0;
    width: clamp(38px, 4.4vw, 42px);
    height: clamp(38px, 4.4vw, 42px);
    background: rgba(229, 57, 53, 0.15);
    border: 1px solid rgba(229, 57, 53, 0.35);
    color: #ef5350;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-playlist-delete:hover {
    background: #e53935;
    color: #fff;
    border-color: #e53935;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
}

@media (max-height: 600px) {
    .playlists-modal-content {
        max-height: 95vh !important;
        padding: 10px 18px !important;
    }

    .playlists-modal-header {
        padding-bottom: 8px !important;
    }

    .playlists-toolbar {
        padding: 6px 0 !important;
    }

    .playlists-grid {
        max-height: 62vh !important;
        gap: 10px !important;
    }

    .playlist-card {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .playlist-logo {
        width: 44px !important;
        height: 44px !important;
    }

    .playlist-card-meta h4 {
        font-size: 15px !important;
    }
}

.playlists-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.playlists-empty-icon {
    font-size: 48px;
    color: #f4c242;
    margin-bottom: 14px;
}

/* =========================================================
   LIVE PLAYER: REMOVE SKIP BUTTONS (طلب المستخدم رقم 3)
   ========================================================= */
#livePlayerWrapper .vjs-skip-backward-10,
#livePlayerWrapper .vjs-skip-forward-10,
#livePlayerWrapper .vjs-seek-button {
    display: none !important;
}

/* =========================================================
   ANDROID TV & TV BOX FOCUS ENGINE STYLES (طلب المستخدم رقم 4)
   ========================================================= */
.tv-focused {
    outline: 3.5px solid #f4c242 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 20px rgba(244, 194, 66, 0.8), inset 0 0 10px rgba(244, 194, 66, 0.25) !important;
    transform: scale(1.04) !important;
    transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s ease, outline 0.18s ease !important;
    z-index: 1000 !important;
}

body.tv-mode *:focus-visible {
    outline: 3.5px solid #f4c242 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 20px rgba(244, 194, 66, 0.8), inset 0 0 10px rgba(244, 194, 66, 0.25) !important;
    transform: scale(1.04) !important;
    transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.18s ease, outline 0.18s ease !important;
    z-index: 1000 !important;
}

body.tv-mode {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* =========================================================
   PURE BLACK PLAYER & LOADING BACKGROUND (طلب المستخدم رقم 1)
   ========================================================= */
#livePlayerWrapper,
.plyr-container,
.video-js,
.video-js .vjs-tech,
.video-js .vjs-poster,
.vjs-loading-spinner,
.video-js.vjs-waiting,
.video-js.vjs-seeking,
.video-js.vjs-waiting .vjs-loading-spinner,
#fullscreenVideoContainer,
#fullscreenVideoModal,
.video-js .vjs-modal-dialog {
    background: #000000 !important;
    background-color: #000000 !important;
}

.plyr-container .empty-state {
    background: #000000 !important;
    color: #94a3b8 !important;
}

/* =========================================================
   DASHBOARD CARD MARVEL-STYLE SYNC & REFRESH FOOTER
   ========================================================= */
.dash-card {
    position: relative;
    overflow: hidden;
}

/* Marvel-style Center Loading & Waiting Overlay */
.card-update-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 20, 0.76);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    border-radius: inherit;
    pointer-events: all;
}

.card-update-overlay.hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.card-update-overlay.waiting {
    background: rgba(8, 12, 20, 0.52);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.card-update-overlay.waiting .card-update-spinner {
    display: none;
}

/* Modern Marvel Arc Spinner */
.card-update-spinner {
    width: 56px;
    height: 56px;
    border: 4.5px solid rgba(255, 255, 255, 0.15);
    border-top-color: #ffffff;
    border-right-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: spMarvelSpin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
}

@keyframes spMarvelSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Card Update Footer (RTL Native) */
.card-update-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 14px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-sizing: border-box;
    z-index: 2;
    direction: rtl !important;
}

.card-status-box {
    display: flex;
    align-items: center;
    min-height: 32px;
    overflow: hidden;
}

.card-update-text {
    font-size: 13.5px;
    color: #cbd5e1;
    font-weight: 600;
    font-family: 'Tajawal', 'Readex Pro', 'Cairo', sans-serif;
    letter-spacing: -0.2px;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-update-text span {
    color: #ffffff;
    font-weight: 700;
    margin-right: 3px;
}

.card-sync-indicator {
    font-size: 13.5px;
    font-weight: 700;
    font-family: 'Tajawal', 'Readex Pro', 'Cairo', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.card-sync-indicator.updating {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.card-sync-indicator.updating i {
    color: #ffffff;
    font-size: 14px;
    animation: spRotate 0.8s infinite linear;
}

.card-sync-indicator.waiting {
    color: #94a3b8;
}

.card-sync-indicator.waiting i {
    color: #fbbf24;
    font-size: 14px;
}

/* زر التحديث باللون الأبيض الشفاف الأنيق */
.card-refresh-btn {
    background: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    width: 44px;
    height: 32px;
    min-width: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.card-refresh-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 4px 18px rgba(255, 255, 255, 0.75);
    transform: scale(1.08);
}

.card-refresh-btn:hover .refresh-icon-svg path {
    stroke: #0a0e17 !important;
}

.card-refresh-btn:hover .refresh-icon-svg polygon {
    fill: #0a0e17 !important;
}

.card-refresh-btn:active {
    transform: scale(0.95);
}

.card-refresh-btn .refresh-icon-svg {
    width: 19px;
    height: 19px;
    display: block;
    transition: stroke 0.2s ease, fill 0.2s ease;
}

.card-refresh-btn .refresh-icon-svg path {
    stroke: #ffffff !important;
}

.card-refresh-btn .refresh-icon-svg polygon {
    fill: #ffffff !important;
}

.card-refresh-btn.updating .refresh-icon-svg {
    animation: spRotate 0.8s infinite linear;
}

@keyframes spRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* =========================================================
   LIVE PLAYER VERTICAL SLIDERS (طلب المستخدم رقم 6)
   ========================================================= */
.live-player-container-rel {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.live-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.live-player-container-rel.is-playing .live-slider {
    opacity: 0.85;
}

.live-slider.active,
.live-player-container-rel:hover .live-slider {
    opacity: 1;
}

.live-slider-brightness {
    left: 18px;
}

.live-slider-volume {
    right: 18px;
}

.live-slider i {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.9));
}

.live-slider-track {
    width: 6px;
    height: 140px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

#liveVideoContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.live-slider-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 3px;
    transition: height 0.05s linear;
}

.live-slider-val {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    margin-top: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    -webkit-user-select: none;
    user-select: none;
}

/* =========================================================
   NETFLIX-STYLE MOTION DESIGN & CINEMATIC MICRO-ANIMATIONS
   ========================================================= */

/* 1. 3D Card Hover Elevation & Glossy Shimmer */
.vod-card,
.episode-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px !important;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease !important;
}

.vod-card:hover,
.episode-card:hover {
    transform: translateY(-8px) scale(1.04) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.85), 0 0 22px rgba(229, 185, 53, 0.35) !important;
    z-index: 10;
}

.vod-card::after,
.episode-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    transition: none;
    z-index: 5;
}

.vod-card:hover::after,
.episode-card:hover::after {
    left: 170%;
    transition: left 0.75s ease-in-out;
}

/* 2. Pulsing Live Radar Indicator on Active Live Channels */
#liveChannels .list-item.active {
    position: relative;
    border-left: 4px solid #10b981 !important;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
}

#liveChannels .list-item.active::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: liveRadarPulse 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes liveRadarPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* 3. Spring Modal Dialog Zoom & Ambient Drop */
.modal:not(.hidden) .modal-content,
#playlistsModal:not(.hidden) .modal-content,
#sortModal:not(.hidden) .modal-content {
    animation: springModalOpen 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes springModalOpen {
    0% {
        opacity: 0;
        transform: scale(0.82) translateY(24px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 4. Cinematic Backdrop Zoom (Ken Burns Effect) */
.movie-backdrop,
.series-backdrop {
    animation: kenBurnsAmbient 25s infinite alternate ease-in-out;
}

@keyframes kenBurnsAmbient {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08) translate(-1%, -1%);
    }
}

/* =========================================================
   DEVICE MODE SELECTOR MODAL & BADGES
   ========================================================= */
.device-mode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.device-mode-modal.hidden {
    display: none !important;
}

.device-mode-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.device-mode-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 880px;
    background: #0f1523;
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(34, 197, 94, 0.2);
    padding: 28px;
    animation: springModalOpen 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.device-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.device-mode-title-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.device-mode-title-box i {
    font-size: 28px;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.device-mode-title-box h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #ffffff;
    font-weight: 700;
}

.device-mode-title-box p {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

.btn-close-device-mode {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close-device-mode:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

.device-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.device-card {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.device-card:hover,
.device-card.active {
    background: rgba(34, 197, 94, 0.08);
    border-color: #22c55e;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.3);
}

.device-card.active::before {
    content: "✓ مفعّل حالياً";
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.2);
    padding: 2px 8px;
    border-radius: 6px;
}

.device-card-icon {
    width: 58px;
    height: 58px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
    margin-bottom: 14px;
    transition: all 0.2s ease;
}

.device-card:hover .device-card-icon,
.device-card.active .device-card-icon {
    background: #22c55e;
    color: #07130b;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
}

.device-card h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 700;
}

.device-card-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    margin-bottom: 18px;
}

.device-card-badge.badge-tv {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.device-card-badge.badge-pc {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}

.device-card p {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0 0 16px 0;
    flex-grow: 1;
}

.btn-select-mode {
    width: 100%;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.device-card:hover .btn-select-mode,
.device-card.active .btn-select-mode {
    background: #22c55e;
    border-color: #22c55e;
    color: #07130b;
    font-weight: 800;
}

/* Auth Screen 1 Device Mode Button */
.btn-device-mode-auth {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-device-mode-auth:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
    color: #4ade80;
}

.btn-device-mode-auth span {
    font-weight: 700;
    color: #4ade80;
}

/* Nav Device Mode Button (White color on Dashboard) */
.nav-btn-device-mode {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.nav-btn-device-mode:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.nav-btn-device-mode i {
    color: #ffffff !important;
}

/* Live Player Native ExoPlayer 60fps Button */
.action-btn-native-player {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: linear-gradient(135deg, #e50914, #b20710);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    margin-right: 8px;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.4);
    transition: all 0.2s ease;
}

.action-btn-native-player:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.6);
}

.action-btn-native-player i {
    font-size: 11px;
    color: #fde047;
}

/* =========================================================
   TV CHANNEL NUMBER OVERLAY & LIVE OSD BAR
   ========================================================= */
.tv-channel-number-overlay {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 100;
    background: rgba(15, 23, 42, 0.92);
    border: 2px solid #22c55e;
    border-radius: 12px;
    padding: 8px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 25px rgba(34, 197, 94, 0.5);
    animation: tvNumberPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tv-channel-number-overlay.hidden {
    display: none !important;
}

.tv-channel-number-overlay span {
    font-size: 2.4rem;
    font-weight: 900;
    color: #4ade80;
    letter-spacing: 2px;
    font-family: 'Outfit', sans-serif, system-ui;
}

@keyframes tvNumberPop {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.tv-live-osd-bar {
    position: absolute;
    bottom: 24px;
    left: 28px;
    right: 28px;
    z-index: 90;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 30px rgba(34, 197, 94, 0.18);
    animation: tvOsdSlideUp 0.3s ease-out;
}

.tv-live-osd-bar.hidden {
    display: none !important;
}

@keyframes tvOsdSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.tv-osd-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tv-osd-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px;
}

.tv-osd-text h4 {
    margin: 0;
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: 700;
}

.tv-osd-text span {
    font-size: 0.76rem;
    color: #4ade80;
    font-weight: 600;
}

.tv-osd-hints {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tv-hint-badge {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-size: 0.72rem;
    color: #cbd5e1;
    font-weight: 600;
}

/* =========================================================
   TV MODE HIGH PERFORMANCE & D-PAD FOCUS ENGINE (.tv-device-mode)
   ========================================================= */

/* تسريع عتادي فائق عبر كرت الشاشة (Hardware Compositing) لكافة البطاقات والقوائم */
.dash-card,
.vod-card,
.list-item,
.channel-item,
.device-card,
.btn-auth-circular,
.btn-home-return,
.vjs-control {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

body.tv-device-mode .auth-card,
body.tv-device-mode .playlists-modal-content,
body.tv-device-mode .device-mode-content,
body.tv-device-mode .live-player-container-rel {
    background: #0d121f !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
}

/* بطاقات الشاشة الرئيسية العريضة والفاخرة في وضع التلفزيون (Android TV / TV Box)
   ملاحظة إصلاح مهمة: كانت هذه القياسات أرقاماً ثابتة بالبكسل مصممة فقط لشاشة تلفاز كبيرة فعلية.
   عند تفعيل وضع "الشاشة/الريسيفر" يدوياً من هاتف حقيقي (نفس الشاشة الصغيرة)، كانت هذه الأرقام
   الضخمة (خط 42px، أيقونة 84px، بطاقة بارتفاع 390px كحد أدنى) تتسبب في تراكب وتشويه كامل للواجهة
   لأنها لا تتقلص إطلاقاً مع صغر الشاشة. الآن تعتمد على وحدات vw فتتقلص تلقائياً وتناسبياً على أي
   حجم شاشة مع الحفاظ على نفس المظهر الفخم الأصلي على شاشات التلفاز الكبيرة الحقيقية. */
/* توحيد كامل: وضع الشاشة/الريسيفر يستخدم الآن نفس شبكة وقياسات ونِسَب وضع النقال بالضبط
   (كانت flex بنِسَب وارتفاعات مختلفة تماماً فتنضغط البطاقات وتفقد تناسقها).
   الفرق الوحيد المتبقي بين الوضعين هو التحكم بالريموت وإطار التركيز، لا القياسات. */
body.tv-device-mode .dash-cards-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(280px, 470px)) !important;
    justify-content: center !important;
    align-content: center !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    gap: 28px !important;
    padding: 22px 30px !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

body.tv-device-mode .dash-card {
    height: 430px !important;
    max-height: 430px !important;
    min-height: 0 !important;
    align-self: center !important;
    border-radius: var(--screen-card-radius, 26px) !important;
    padding: 26px 32px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65) !important;
    /* ملاحظة: أُزيلت خلفية موحدة داكنة (#0e1422) كانت تطمس التدرجات اللونية المميزة
       للبطاقات (أحمر للبث، رمادي للأفلام، أخضر للمسلسلات) في وضع الشاشة/الريسيفر،
       فتختلف الهوية اللونية عن وضع النقال. الآن يرث كل كرت لونه الأصلي نفسه تماماً. */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    position: relative !important;
    overflow: hidden !important;
}

body.tv-device-mode .dash-card i {
    font-size: 62px !important;
    top: 34px !important;
    left: 34px !important;
    opacity: 0.95 !important;
}

body.tv-device-mode .dash-card h2 {
    font-size: 37px !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

body.tv-device-mode .dash-card p {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

body.tv-device-mode .dash-card.tv-focused,
body.tv-device-mode .dash-card:focus {
    transform: scale(1.08) translateY(-8px) !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 50px rgba(34, 197, 94, 0.85), 0 25px 60px rgba(0, 0, 0, 0.95) !important;
    z-index: 100 !important;
}

/* High-Contrast D-Pad Focus Glow for TV Remotes with Silky Spring Curve */
.tv-focused {
    outline: 3.5px solid #22c55e !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.85), 0 0 8px #ffffff !important;
    transform: scale(1.06) translateZ(0) !important;
    z-index: 999 !important;
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), outline 0.15s ease, box-shadow 0.22s ease !important;
}

.device-card.tv-focused {
    background: rgba(34, 197, 94, 0.18) !important;
    outline: 3.5px solid #22c55e !important;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.85), 0 0 8px #ffffff !important;
}

/* =========================================================
   DESKTOP & ANDROID TV / RECEIVER OVERRIDES (الكمبيوتر والشاشات والرسيفرات)
   ========================================================= */
/* إخفاء بطاقات الهواتف والشاشات في برنامج الكمبيوتر (Electron/Windows) */
body.platform-electron #deviceCardTouch,
body.platform-electron #deviceCardTv,
body.desktop-device-mode #deviceCardTouch,
body.desktop-device-mode #deviceCardTv {
    display: none !important;
}

/* برنامج الكمبيوتر يعمل على الكمبيوتر فقط، فلا معنى لوجود زر أو نافذة "اختيار نمط الجهاز"
   بداخله (النمط دائماً كمبيوتر) — نخفي الزرين والنافذة بالكامل */
body.platform-electron #navDeviceModeBtn,
body.platform-electron #btnDeviceModeAuth,
body.platform-electron #deviceModeModal {
    display: none !important;
}

/* إخفاء بطاقة الكمبيوتر نهائياً في تطبيق الأندرويد وتقسيم الشاشة لنمطين (لمس وريموت) */
body.platform-android #deviceCardDesktop {
    display: none !important;
}

body.platform-android .device-mode-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
}

body.desktop-device-mode .col-sidebar {
    /* عرض ثابت واحد (320px) كان يُفرض على كل شاشات الكمبيوتر واللابتوب والشاشات 2K/4K دون تمييز؛
       الآن يتبع القيمة المحسوبة فعلياً لكل فئة شاشة من screen-adapter.js (310px للابتوب حتى 430px للشاشات الكبيرة) */
    width: var(--player-sidebar-w, 320px) !important;
    min-width: 280px !important;
    max-width: 440px !important;
    flex: 0 0 var(--player-sidebar-w, 320px) !important;
}

body.tv-device-mode .col-sidebar {
    width: clamp(320px, 32vw, 420px) !important;
    min-width: 320px !important;
    max-width: 440px !important;
    flex: 0 0 clamp(320px, 32vw, 420px) !important;
}

body.desktop-device-mode .col-list {
    width: var(--player-list-w, 390px) !important;
    min-width: 340px !important;
    max-width: 460px !important;
    flex: 0 0 var(--player-list-w, 390px) !important;
}

body.desktop-device-mode .col-player {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    padding: clamp(10px, 1.8vw, 24px) !important;
}

/* تمكين التمرير وإظهار شريط التمرير الأنيق في شاشة الأفلام والمسلسلات في الكمبيوتر والشاشات */
#vod-screen .col-player,
body.desktop-device-mode #vod-screen .col-player,
body.tv-device-mode #vod-screen .col-player {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
}

#vod-screen .col-player::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

#vod-screen .col-player::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 6px !important;
}

#vod-screen .col-player::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
}

#vod-screen .col-player::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold, #e5b935) !important;
}

.player-wrapper,
body.desktop-device-mode .player-wrapper,
body.tv-device-mode .player-wrapper {
    width: 100% !important;
    height: 100% !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* نافذة مشغل البث المباشر في وضعية النافذة: مستطيل بنسبة العرض 1.5 ضعف الطول (شرط أساسي) */
#livePlayerWrapper:not(.live-fullscreen-mode),
.plyr-container.live-player-container-rel:not(.live-fullscreen-mode) {
    width: 100% !important;
    max-width: min(100%, calc((100vh - 140px) * 1.5)) !important;
    aspect-ratio: 1.5 / 1 !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    border-radius: var(--screen-card-radius, 16px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000000 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

/* إلغاء وإخفاء زر التشغيل والإيقاف الكبير الرمادي نهائياً في مشغل البث المباشر */
.vjs-big-play-button,
.video-js .vjs-big-play-button,
#livePlayerWrapper .vjs-big-play-button,
#fullscreenVideoContainer .vjs-big-play-button {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* سواد حالك 100% لخلفية المشغل وعناصر الفيديو */
#livePlayerWrapper,
#livePlayerWrapper .video-js,
#livePlayerWrapper video,
#livePlayerWrapper .vjs-tech,
#livePlayerWrapper .vjs-poster,
#fullscreenVideoContainer,
#fullscreenVideoContainer .video-js,
#fullscreenVideoContainer video,
#fullscreenVideoContainer .vjs-tech,
.video-js.vjs-waiting,
.video-js.vjs-seeking,
.video-js.vjs-paused {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* شاشة التحميل الدوارة الفاخرة بالخلفية السوداء للمشغل في الكمبيوتر والأندرويد */
.live-channel-loading-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000000 !important;
    background-color: #000000 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 85;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.live-channel-loading-overlay.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.live-spinner-box {
    position: relative;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.08);
    border-top-color: #e5b935;
    border-right-color: #e50914;
    animation: liveSpin 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    filter: drop-shadow(0 0 12px rgba(229, 9, 20, 0.65));
}

.live-spinner-ring-inner {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3.5px solid transparent;
    border-bottom-color: #22c55e;
    border-left-color: #3b82f6;
    animation: liveSpinReverse 1.2s linear infinite;
}

.live-spinner-glow {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 9, 20, 0.5) 0%, transparent 70%);
    animation: livePulse 1.8s ease-in-out infinite;
}

.live-loading-title {
    margin-top: 18px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.5px;
    opacity: 0.95;
}

@keyframes liveSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes liveSpinReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes livePulse {
    0%, 100% { transform: scale(0.85); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; }
}


/* ضبط شبكة الأفلام والمسلسلات: عدد الأعمدة يأتي من محرك ذكاء الشاشات (screen-adapter.js)
   بدل رقم ثابت (5) كان يُفرض على كل الأجهزة بلا استثناء (هاتف صغير 360px وشاشة تلفاز 4K
   كانا يحصلان على نفس 5 أعمدة بالضبط). القيمة الاحتياطية 5 تبقى كما كانت إن لم يُحقن المتغير لأي سبب. */
#vodGrid.vod-grid,
.vod-grid,
body.desktop-device-mode .vod-grid,
body.tv-device-mode .vod-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--player-vod-cols, 5), minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-items: center !important;
    align-items: start !important;
}

/* برنامج أندرويد تحديداً: 5 أعمدة ثابتة وواضحة (لمس وريموت) بدل الاعتماد على حساب الفئة الديناميكي،
   بناءً على اختبار فعلي على الجهاز أظهر أن عدد الأعمدة كان يتغير بين الاتجاهات بشكل غير متسق */
body.platform-android #vodGrid.vod-grid,
body.platform-android .vod-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
}

.vod-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    cursor: pointer !important;
    position: relative !important;
    width: 100% !important;
    /* حجم البطاقة يتبع معامل التحجيم المحسوب لكل فئة جهاز (--screen-scale من screen-adapter.js):
       أصغر قليلاً على الهواتف الصغيرة، وأكبر فعلياً على شاشات التلفاز لمشاهدة من مسافة بعيدة،
       بدل حجم 150px ثابت كان يتجاهل الفرق بين هاتف صغير وشاشة تلفاز 4K تمامًا. */
    max-width: clamp(110px, calc(150px * var(--screen-scale, 1)), 220px) !important;
    margin: 0 auto !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
}

/* على أندرويد تحديداً: البطاقة تملأ عرض عمودها في الشبكة الثابتة (5 أعمدة) بالكامل بدل حد
   أقصى قد يكون أضيق أو أوسع من العمود الفعلي على شاشات الهواتف المختلفة، وهو ما كان يترك
   فراغاً غير متسق حول كل بطاقة */
body.platform-android .vod-card {
    max-width: 100% !important;
    margin: 0 !important;
}

.vod-card:hover {
    transform: scale(1.06) !important;
    z-index: 5 !important;
}

.vod-poster {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-bottom: 2px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55) !important;
    background: #141a29;
}

.vod-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    margin-top: 6px !important;
    padding: 0 2px !important;
}

/* Modals & Dialogs adaptive max-width */
.modal-overlay .modal-card,
.modal-content,
.dialog-box,
.auth-card,
.device-modal-card {
    max-width: var(--dialog-max-w, 560px) !important;
    border-radius: var(--screen-card-radius, 24px) !important;
}

/* High-resolution 4K & Smart TV adaptations */
[data-device-tier="tv-4k"] .vod-title,
[data-is-tv="true"] .vod-title {
    font-size: 26px !important;
}

[data-device-tier="tv-4k"] .col-header h3,
[data-is-tv="true"] .col-header h3 {
    font-size: 28px !important;
}

[data-device-tier="tv-4k"] .cat-item,
[data-is-tv="true"] .cat-item,
[data-device-tier="tv-4k"] .channel-item,
[data-is-tv="true"] .channel-item {
    padding: 16px 20px !important;
    font-size: 19px !important;
}

/* إخفاء شرائح اللمس للسطوع والصوت نهائياً في الكمبيوتر وشاشات التلفزيون والرسيفر وتيفي بوكس */
body.desktop-device-mode .live-slider,
body.tv-device-mode .live-slider {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}


/* =========================================================================
   التحكم حسب طريقة الإدخال الفعلية (لمس / ريموت / ماوس) - data-input-mode
   من screen-adapter.js، بدل الاعتماد فقط على :hover التي تسبب "تعليق" التأثير
   بعد اللمس على الشاشات اللمسية (Sticky Hover Bug) ولا تناسب تنقل الريموت.
   ========================================================================= */

/* اللمس: أهداف ضغط لا تقل عن 44px (معيار Apple/Google)، وتعطيل hover المُعلّق بعد اللمس
   واستبداله بتأثير ضغط لحظي (active) بدل الحركة الممتدة التي قد "تعلق" على الشاشة */
[data-input-mode="touch"] .vod-card:hover,
[data-input-mode="touch"] .episode-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

[data-input-mode="touch"] .vod-card:active,
[data-input-mode="touch"] .episode-card:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease !important;
}

[data-input-mode="touch"] .list-item:hover {
    transform: none !important;
}

[data-input-mode="touch"] .list-item:active {
    background: linear-gradient(90deg, rgba(217, 36, 36, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
}

[data-input-mode="touch"] .btn-icon,
[data-input-mode="touch"] .control-btn,
[data-input-mode="touch"] .live-card-thumb,
[data-input-mode="touch"] .vjs-control {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* الريموت: حلقة تركيز واضحة وقابلة للمتابعة عن بعد بدل الاعتماد فقط على تأثيرات hover
   التي لا تُفعَّل أصلاً بأزرار الريموت (لا يوجد مؤشر ماوس حقيقي) */
[data-input-mode="remote"] .vod-card:focus-visible,
[data-input-mode="remote"] .episode-card:focus-visible,
[data-input-mode="remote"] .list-item:focus-visible,
[data-input-mode="remote"] .live-channel-card:focus-visible {
    outline: 3px solid #22c55e !important;
    outline-offset: 2px !important;
    transform: scale(1.05) !important;
    z-index: 10 !important;
}

/* =========================================================================
   تسريع عتادي فائق لمشغلات الفيديو ودعم 60fps و 120fps للأجهزة القوية والضعيفة
   ========================================================================= */
video,
.video-js video,
#mizoPlayer video,
#mizoVodPlayer video {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

/* =========================================================================
   مساعد الميزو الذكي (ALmEz0 AI Assistant) - تصميم فائق الجمال والسرعة
   ========================================================================= */

/* زر النافبار العلوي للذكاء الاصطناعي */
.nav-btn-ai {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(139, 92, 246, 0.25)) !important;
    color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    position: relative;
    overflow: hidden;
}

.nav-btn-ai::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: rotate(45deg);
    animation: aiShine 3s infinite ease-in-out;
    pointer-events: none;
}

.nav-btn-ai:hover {
    background: linear-gradient(135deg, #f59e0b, #8b5cf6) !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.6) !important;
}

@keyframes aiShine {
    0% { transform: translateX(-100%) rotate(45deg); }
    30%, 100% { transform: translateX(100%) rotate(45deg); }
}

/* وضع ملء الشاشة لمشغل البث المباشر المدمج */
#livePlayerWrapper.live-fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: #000000 !important;
}

#livePlayerWrapper.live-fullscreen-mode .video-js,
#livePlayerWrapper.live-fullscreen-mode #liveVideoContainer,
#livePlayerWrapper.live-fullscreen-mode video {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain;
}

#livePlayerWrapper video,
#livePlayerWrapper.live-fullscreen-mode video,
.video-js video,
#liveVideoContainer video {
    object-fit: contain;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
}

body.tv-device-mode #livePlayerWrapper video,
body.tv-device-mode #livePlayerWrapper.live-fullscreen-mode video,
body.tv-device-mode .video-js video {
    object-fit: contain;
    background: #000000 !important;
}

/* فئات الأبعاد الدقيقة لمشغل الميزو (Web / Electron) */
.video-js.aspect-fit video,
video.aspect-fit {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

.video-js.aspect-fill video,
video.aspect-fill {
    object-fit: fill !important;
    width: 100% !important;
    height: 100% !important;
}

.video-js.aspect-zoom video,
video.aspect-zoom {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

.video-js.aspect-16-9 video,
video.aspect-16-9 {
    aspect-ratio: 16 / 9 !important;
    object-fit: fill !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
}

.video-js.aspect-4-3 video,
video.aspect-4-3 {
    aspect-ratio: 4 / 3 !important;
    object-fit: fill !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: 100% !important;
    margin: auto !important;
}

.live-fullscreen-btn-overlay {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0.85;
}

.live-fullscreen-btn-overlay:hover {
    opacity: 1;
    background: rgba(245, 158, 11, 0.85);
    transform: scale(1.1);
    color: #ffffff;
}

.action-btn-fullscreen {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #cbd5e1;
    font-size: 14px;
    margin-right: 6px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.action-btn-fullscreen:hover {
    background: rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
    color: #ffffff;
    transform: scale(1.12);
}

/* إظهار زر مساعد الميزو وزر اللغة وزر قياس السرعة فقط في الشاشة الرئيسية (Dashboard) وإخفاؤها في باقي الشاشات */
body:not(.screen-is-dashboard) #aiFloatingTrigger,
body:not(.screen-is-dashboard) #mizoLangBtn,
body:not(.screen-is-dashboard) .lang-floating-trigger,
body:not(.screen-is-dashboard) #mizoSpeedBtn,
body:not(.screen-is-dashboard) .speed-floating-trigger {
    display: none !important;
}

/* الزر العائم لمساعد الميزو الذكي */
.ai-floating-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    pointer-events: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(139, 92, 246, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    direction: rtl;
    -webkit-user-select: none;
    user-select: none;
}

.ai-floating-trigger:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(245, 158, 11, 0.6);
}

.ai-floating-trigger:active {
    transform: scale(0.96);
}

.ai-floating-icon {
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aiPulse 2s infinite ease-in-out;
}

.ai-floating-label {
    letter-spacing: 0.2px;
}

/* إخفاء الزر العائم تلقائياً أثناء تشغيل الفيديو بالشاشة الكاملة */
body.in-fullscreen-player .ai-floating-trigger,
body.in-fullscreen-player #mizoLangBtn,
body.in-fullscreen-player .lang-floating-trigger,
body.in-fullscreen-player #mizoSpeedBtn,
body.in-fullscreen-player .speed-floating-trigger,
#fullscreenVideoModal:not(.hidden) ~ .ai-floating-trigger,
#fullscreenVideoModal:not(.hidden) ~ #mizoLangBtn,
#fullscreenVideoModal:not(.hidden) ~ .lang-floating-trigger,
#fullscreenVideoModal:not(.hidden) ~ #mizoSpeedBtn,
#fullscreenVideoModal:not(.hidden) ~ .speed-floating-trigger {
    display: none !important;
}

/* خلفية المودال (Overlay) */
.ai-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: rgba(4, 7, 14, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    box-sizing: border-box;
    padding: 16px;
}

.ai-modal-overlay.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* بطاقة نافذة المحادثة */
.ai-modal-card {
    width: 100%;
    max-width: 740px;
    height: 84vh;
    max-height: 660px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(9, 14, 26, 0.99));
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.15);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: rtl;
    text-align: right;
    animation: aiCardSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes aiCardSlideIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* رأس النافذة */
.ai-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.8);
    flex-shrink: 0;
}

.ai-header-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-avatar-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
    flex-shrink: 0;
}

.ai-avatar-icon {
    font-size: 19px;
    color: #ffffff;
}

.ai-status-pulse {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid #0f172a;
    animation: aiPulse 2s infinite;
}

.ai-header-text .ai-title {
    font-size: 16px;
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 2px 0;
}

.ai-header-text .ai-subtitle {
    font-size: 12px;
    color: #94a3b8;
    display: block;
}

.ai-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-btn-icon,
.ai-btn-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.ai-btn-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.ai-btn-icon.muted {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
}

.ai-btn-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: #ef4444;
}

/* جسم الرسائل */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    direction: rtl;
}

.ai-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.3);
    border-radius: 4px;
}

.ai-message {
    display: flex;
    gap: 12px;
    max-width: 88%;
    width: fit-content;
}

.ai-bot-message {
    align-self: flex-start;
}

.ai-user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-msg-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.ai-bot-message .ai-msg-avatar {
    background: linear-gradient(135deg, #f59e0b, #8b5cf6);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.ai-user-message .ai-msg-avatar {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
}

.ai-msg-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ai-msg-text {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
}

.ai-bot-message .ai-msg-text {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px 18px 18px 4px;
    color: #e2e8f0;
}

.ai-user-message .ai-msg-text {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-radius: 18px 18px 4px 18px;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.35);
}

/* تأثير تحميل الرد (Bouncing Dots) */
.ai-loading-dots {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 4px;
}

.ai-loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    animation: aiBouncing 1.4s infinite ease-in-out both;
}

.ai-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes aiBouncing {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1.0); opacity: 1; }
}

/* =========================================================
   إصلاح: مؤشر "جاري الكتابة" لمساعد الميزو لم يكن يظهر إطلاقاً
   ---------------------------------------------------------
   السبب: الكود في ai-assistant.js ينشئ العنصر بالاسم ai-typing-dots بينما التنسيق
   الوحيد الموجود كان باسم ai-loading-dots (اسمان مختلفان)، فكانت النقاط الثلاث تُنشأ
   كعناصر فارغة بلا حجم ولا لون = غير مرئية تماماً، فيبدو المساعد وكأنه لا يستجيب.
   ========================================================= */
.ai-typing-dots {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 10px 6px;
}

.ai-typing-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f59e0b;
    animation: aiBouncing 1.4s infinite ease-in-out both;
}

.ai-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing-dots span:nth-child(2) { animation-delay: -0.16s; }

.ai-typing-msg .ai-msg-content {
    display: flex;
    align-items: center;
}

/* حاوية كروت التشغيل السريع أسفل رد المساعد (كان اسمها في الكود ai-msg-actions
   بينما التنسيق الموجود باسم ai-cards-grid) */
.ai-msg-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* صف اختيار جودة القناة داخل رد المساعد */
.ai-qualities-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px 10px;
}

.ai-q-title {
    font-size: 12px;
    font-weight: 700;
    color: #cbd5e1;
    margin-left: 4px;
}

.ai-q-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* بطاقات الأفلام والمسلسلات التفاعلية */
.ai-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.ai-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 10px;
    transition: all 0.2s ease;
}

.ai-card-item:hover {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(20, 30, 55, 0.95);
    transform: translateY(-2px);
}

.ai-card-poster,
.ai-card-thumb {
    width: 62px;
    height: 90px;
    min-width: 62px;
    max-width: 62px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ai-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.ai-card-title,
.ai-card-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.ai-card-badge {
    font-size: 10.5px;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 4px;
    padding: 2px 7px;
    align-self: flex-start;
}

.ai-card-meta {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    gap: 10px;
}

.ai-btn-play,
.ai-card-btn-play {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-btn-play:hover,
.ai-card-btn-play:hover {
    background: #f59e0b;
    transform: scale(1.04);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}

/* صندوق القنوات المباشرة مع الجودات المتعددة */
.ai-channel-block {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.ai-channel-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-channel-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 3px !important;
    flex-shrink: 0 !important;
}

.ai-channel-name {
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    flex: 1;
}

.ai-channel-qualities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ai-btn-quality {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ai-btn-quality:hover {
    background: #f59e0b;
    color: #000000;
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

/* شريط الاقتراحات السريعة (Quick Chips) */
.ai-quick-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 23, 42, 0.5);
    flex-shrink: 0;
}

.ai-quick-chips::-webkit-scrollbar {
    display: none;
}

.ai-chip-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ai-chip-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #f59e0b;
}

/* شريط الإدخال المزدوج (صوت + كتابة) */
.ai-input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.95);
    flex-shrink: 0;
}

.ai-btn-mic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.ai-btn-mic:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #f59e0b;
}

.ai-btn-mic.is-recording {
    background: #ef4444 !important;
    border-color: #f87171 !important;
    color: #ffffff !important;
    animation: aiMicPulse 1.2s infinite alternate;
}

@keyframes aiMicPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 0 16px rgba(239, 68, 68, 0);
        transform: scale(1.08);
    }
}

.ai-chat-input {
    flex: 1;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 10px 18px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    direction: rtl;
}

.ai-chat-input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.ai-btn-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-btn-send:hover {
    transform: scale(1.06);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
}

/* توافق فائق مع ريموت التلفزيون وضع TV Mode */
body.tv-device-mode .ai-btn-icon:focus,
body.tv-device-mode .ai-btn-close:focus,
body.tv-device-mode .ai-chip-btn:focus,
body.tv-device-mode .ai-btn-mic:focus,
body.tv-device-mode .ai-chat-input:focus,
body.tv-device-mode .ai-btn-send:focus,
body.tv-device-mode .ai-btn-play:focus,
body.tv-device-mode .ai-btn-quality:focus,
body.tv-device-mode .nav-btn-ai:focus,
body.tv-device-mode .ai-floating-trigger:focus {
    outline: 3px solid #f59e0b !important;
    outline-offset: 2px !important;
    transform: scale(1.05) !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.8) !important;
}

@keyframes aiPulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

/* =========================================================
   AI ASSISTANT CHAT HISTORY DRAWER (سجل المحادثات السابق)
   ========================================================= */
.ai-modal-card {
    position: relative;
    overflow: hidden;
}

.ai-history-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 290px;
    max-width: 85%;
    background: rgba(15, 23, 42, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 50;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.7);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-history-drawer.hidden {
    display: none !important;
}

.ai-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-history-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f8fafc;
    font-size: 14px;
    font-weight: 700;
}

.ai-btn-new-chat {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: #000000;
    font-weight: 700;
    font-size: 11.5px;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.ai-btn-new-chat:hover {
    transform: scale(1.04);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.ai-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-history-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ai-history-item:hover,
.ai-history-item.active {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
}

.ai-history-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    flex: 1;
}

.ai-history-item-title {
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-history-item-date {
    color: #94a3b8;
    font-size: 11px;
}

.ai-history-btn-del {
    background: transparent;
    border: none;
    color: #ef4444;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.ai-history-btn-del:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.2);
}

.ai-history-empty {
    text-align: center;
    padding: 40px 15px;
    color: #94a3b8;
    font-size: 13px;
}

/* =========================================================
   LIVE STREAM TIMELINE & COUNTER REMOVAL (طلب المستخدم 7-ب)
   إزالة شريط العداد وعداد الثواني من البث المباشر (كمبيوتر + أندرويد)
   ========================================================= */
#livePlayerWrapper .vjs-progress-control,
#livePlayerWrapper .vjs-current-time,
#livePlayerWrapper .vjs-time-divider,
#livePlayerWrapper .vjs-duration,
#livePlayerWrapper .vjs-remaining-time,
#livePlayerWrapper .vjs-time-control,
.live-fullscreen-mode .vjs-progress-control,
.live-fullscreen-mode .vjs-current-time,
.live-fullscreen-mode .vjs-time-divider,
.live-fullscreen-mode .vjs-duration,
.live-fullscreen-mode .vjs-remaining-time,
.live-fullscreen-mode .vjs-time-control {
    display: none !important;
}

/* =========================================================
   ANDROID TV / REMOTE GESTURE SLIDERS REMOVAL (طلب المستخدم 7-أ)
   إزالة أشرطة رفع الصوت والإضاءة في أجهزة التلفزيون التي تعمل بريموت
   ========================================================= */
body.tv-device-mode #liveSliderBrightness,
body.tv-device-mode #liveSliderVolume,
body.tv-mode #liveSliderBrightness,
body.tv-mode #liveSliderVolume {
    display: none !important;
}

/* =========================================================
   ANDROID & TV LIVE: EXPANDED CHANNELS GRID & FULLSCREEN EXOPLAYER
   تحويل شاشة البث المباشر لشبكة بطاقات قنوات كبيرة وفاخرة وتوسيع عمود الأقسام
   ========================================================= */
body.platform-android #live-screen .col-player,
body.tv-device-mode #live-screen .col-player {
    display: none !important;
}

body.platform-android #live-screen .col-list,
body.tv-device-mode #live-screen .col-list {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border-left: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.platform-android #live-screen .col-sidebar,
body.tv-device-mode #live-screen .col-sidebar {
    /* توسيع صندوق الأقسام بناءً على اختبار فعلي على جهاز أندرويد أظهر أن العرض السابق كان ضيقاً */
    width: clamp(360px, 36vw, 460px) !important;
    min-width: 340px !important;
    max-width: 480px !important;
    flex: 0 0 clamp(360px, 36vw, 460px) !important;
}

/* هيدر القنوات المركزي مع أزرار البحث والترتيب على اليمين */
body.platform-android #live-screen .col-list .col-header,
body.tv-device-mode #live-screen .col-list .col-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    padding: 14px 24px !important;
    min-height: 64px !important;
    background: rgba(10, 14, 22, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
}

body.platform-android #live-screen .col-list .col-header h3#liveItemsCategoryTitle,
body.tv-device-mode #live-screen .col-list .col-header h3#liveItemsCategoryTitle {
    position: absolute !important;
    left: 50% !important;
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

body.platform-android #live-screen .col-list .col-header .header-actions,
body.tv-device-mode #live-screen .col-list .col-header .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-right: auto !important;
}

/* =========================================================
   توحيد شبكة وبطاقات قنوات البث المباشر لتطابق شبكة الأفلام تماماً
   ========================================================= */
#liveChannels.channels-grid-mode,
body.platform-android #liveChannels,
body.tv-device-mode #liveChannels {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    /* السبب الجذري لتراكب بطاقات القنوات (مُثبت بقياس فعلي في المتصفح):
       هذه الحاوية ارتفاعها محدد (750px داخل الكانفاس) وهي نفسها التي تتمرر، وصفوفها كانت auto.
       مع min-height:0 على البطاقات يصبح الحد الأدنى لكل صف صفراً، فيوزّع المتصفح ارتفاع الحاوية
       بالتساوي على الصفوف (3 صفوف × 231px) بينما البطاقة 351px، فتفيض كل بطاقة فوق الصف التالي.
       شبكة الأفلام لا تتأثر لأن حاويتها بلا ارتفاع محدد (يتمرر عنصر أب حولها).
       max-content يجعل كل صف بارتفاع بطاقته الفعلي دائماً، ولا يُضغط أبداً لملء الحاوية. */
    grid-auto-rows: max-content !important;
    gap: 6px !important;
    row-gap: 18px !important;
    width: 100% !important;
    /* flex: 1 يعطي الارتفاع الصحيح داخل col-list (flexbox عمودي);
       height: 100% كانت تتعارض مع flex وتسبب تمدد لانهائي على بعض الأجهزة */
    flex: 1 1 0% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    justify-items: center !important;
    align-items: start !important;
    align-content: start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 14px !important;
    scroll-behavior: smooth !important;
}

#liveChannels.channels-grid-mode::-webkit-scrollbar,
body.platform-android #liveChannels::-webkit-scrollbar,
body.tv-device-mode #liveChannels::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

#liveChannels.channels-grid-mode::-webkit-scrollbar-track,
body.platform-android #liveChannels::-webkit-scrollbar-track,
body.tv-device-mode #liveChannels::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 6px !important;
}

#liveChannels.channels-grid-mode::-webkit-scrollbar-thumb,
body.platform-android #liveChannels::-webkit-scrollbar-thumb,
body.tv-device-mode #liveChannels::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 6px !important;
}

#liveChannels.channels-grid-mode::-webkit-scrollbar-thumb:hover,
body.platform-android #liveChannels::-webkit-scrollbar-thumb:hover,
body.tv-device-mode #liveChannels::-webkit-scrollbar-thumb:hover {
    background: var(--accent-gold, #e5b935) !important;
}

/* =========================================================
   بطاقة قناة البث المباشر — إعادة بناء كاملة
   ---------------------------------------------------------
   سبب التراكب الذي استمر رغم كل الإصلاحات السابقة:
   ملصق الفيلم عنصر <img> يحمل ارتفاعه الذاتي، فيحسب الـ Grid ارتفاع الصف صحيحاً دائماً.
   أما صندوق شعار القناة فكان <div> فارغاً لا ارتفاع له إلا عبر aspect-ratio، أو عبر
   padding-bottom:150% كبديل عندما لا يدعم WebView خاصية aspect-ratio (شائع جداً في صناديق
   التلفاز القديمة التي لا يُحدَّث فيها WebView). داخل Grid تُعامَل الحشوة النسبية كصفر أثناء
   حساب ارتفاع الصفوف ثم تُطبَّق بعدها، فيُحسب الصف أقصر من البطاقة وتتراكب الصفوف.
   الحل: نفس تقنية ملصق الفيلم تماماً — صورة شفافة مقاسها الذاتي 2×3 تحدد الارتفاع
   (تعمل على كل إصدارات WebView بلا استثناء)، والشعار فوقها في المنتصف بتموضع مطلق.
   ========================================================= */
#liveChannels .live-card {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* لا min-height:0 هنا إطلاقاً: الصفر يسمح للمتصفح بضغط صف الشبكة أقصر من البطاقة */
    min-height: initial !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    align-self: start !important;
    transform: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#liveChannels .live-card::after,
#liveChannels .live-card::before {
    display: none !important;
    content: none !important;
}

#liveChannels .live-card .channel-poster-box {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 0 2px 0 !important;
    border-radius: 10px !important;
    background: #141a29 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* الصورة الشفافة 2×3 هي ما يعطي الصندوق ارتفاعه الحقيقي (1.5 × العرض) */
#liveChannels .live-card .channel-poster-spacer {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#liveChannels .live-card .channel-poster-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    max-width: 78% !important;
    max-height: 78% !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#liveChannels .live-card .vod-info {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

#liveChannels .live-card:hover,
#liveChannels .live-card.tv-focused {
    transform: scale(1.06) !important;
    z-index: 5 !important;
    outline: none !important;
    box-shadow: none !important;
}

#liveChannels .live-card:focus-visible {
    transform: scale(1.06) !important;
    z-index: 5 !important;
    outline: none !important;
    box-shadow: none !important;
}

#liveChannels .live-card:hover .channel-poster-box,
#liveChannels .live-card.tv-focused .channel-poster-box {
    outline: 3.5px solid #22c55e !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.75) !important;
}

#liveChannels .live-card:focus-visible .channel-poster-box {
    outline: 3.5px solid #22c55e !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.75) !important;
}

#liveChannels .live-card.active .channel-poster-box {
    outline: 3px solid #22c55e !important;
    outline-offset: 2px !important;
}

/* =========================================================
   PROMINENT SEARCH BOX & TV REMOTE ACCESSIBILITY ENGINE
   ========================================================= */
.header-icon-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #e2e8f0 !important;
    /* تكبير أزرار البحث و"الخيارات" (3 نقاط) بناءً على اختبار فعلي على أندرويد أظهر أنها صغيرة جداً */
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 20px !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
    margin-inline-start: 6px !important;
}

.header-icon-btn:hover,
.header-icon-btn:focus,
.header-icon-btn.tv-focused {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
    outline: 3px solid #22c55e !important;
    outline-offset: 2px !important;
    transform: scale(1.1) !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.6) !important;
}

.prominent-search-wrap {
    padding: 10px 14px !important;
    background: rgba(10, 14, 22, 0.95) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    animation: searchFadeSlide 0.22s ease-out !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@keyframes searchFadeSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.prominent-search-box {
    display: flex !important;
    align-items: center !important;
    background: rgba(20, 26, 38, 0.96) !important;
    border: 2px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 12px !important;
    padding: 4px 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.2s ease !important;
}

.prominent-search-box:focus-within {
    border-color: #22c55e !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5) !important;
}

.prominent-search-icon {
    color: #94a3b8 !important;
    font-size: 16px !important;
    margin-inline-end: 10px !important;
}

.prominent-search-input {
    flex: 1 1 auto !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 8px 4px !important;
    font-family: inherit !important;
}

.prominent-search-input::placeholder {
    color: #64748b !important;
    font-size: 14px !important;
}

.prominent-search-clear {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #cbd5e1 !important;
    /* تكبير زر إغلاق/مسح البحث (X) بناءً على طلب صريح بعد اختبار فعلي على أندرويد */
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background 0.2s ease !important;
}

.prominent-search-clear:hover,
.prominent-search-clear:focus {
    background: #e53935 !important;
    color: #ffffff !important;
    outline: none !important;
}

/* =========================================================
   PC ELECTRON TRUE FULLSCREEN BREAKOUT FOR LIVE PLAYER
   ========================================================= */
body.in-live-fullscreen .col-player,
body.in-live-fullscreen #app-scaler,
body.in-live-fullscreen .player-wrapper {
    contain: none !important;
    transform: none !important;
    will-change: auto !important;
}

body.in-live-fullscreen #livePlayerWrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999999 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #000000 !important;
}

/* إصلاح ملء الشاشة في البث المباشر (كان الشريط العلوي يبقى ظاهراً فوق الفيديو
   والفيديو لا يملأ الشاشة فعلياً على الكمبيوتر) */
body.in-live-fullscreen .navbar,
body.in-live-fullscreen #dashboard-nav,
body.in-live-fullscreen .footer,
body.in-live-fullscreen .app-footer,
body.in-live-fullscreen .ai-floating-trigger {
    display: none !important;
}

body.in-live-fullscreen .col-sidebar,
body.in-live-fullscreen .col-list {
    display: none !important;
}

body.in-live-fullscreen #livePlayerWrapper .video-js,
body.in-live-fullscreen #livePlayerWrapper #liveVideoContainer,
body.in-live-fullscreen #livePlayerWrapper video {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
}

/* إبقاء شريط التحكم ظاهراً وقابلاً للاستخدام فوق الفيديو في وضع ملء الشاشة */
body.in-live-fullscreen #livePlayerWrapper .vjs-control-bar {
    z-index: 1000000 !important;
    display: flex !important;
}

/* =========================================================
   PREVENT AUTH SCREEN FLASH (FOUC) ON STARTUP
   منع وميض شاشة كود السيرفر نهائياً عند فتح المشغل مع وجود حساب محفوظ
   ========================================================= */
html.has-active-player-session #auth1-screen,
html.has-active-player-session #auth2-screen {
    display: none !important;
}

body.platform-android .vod-title,
body.touch-device-mode .vod-title {
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-top: 8px !important;
}

body.platform-android #vodGrid.vod-grid {
    row-gap: 18px !important;
}

/* ==========================================================================
   مطابقة برنامج الكمبيوتر لتطبيق أندرويد
   ========================================================================== */

/* 1. أزرار التواصل بألوانها الرسمية دائماً (لا عند التحويم فقط)، والأيقونة بيضاء —
      نفس ما اعتُمد في شاشات مشغل أندرويد. */
.footer-social-btn.btn-facebook {
    background: #1877F2 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.footer-social-btn.btn-whatsapp {
    background: #25D366 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.footer-social-btn.btn-call {
    background: #F59E0B !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.footer-social-btn.btn-facebook:hover,
.footer-social-btn.btn-whatsapp:hover,
.footer-social-btn.btn-call:hover {
    color: #ffffff !important;
}

/* 2. زر نمط الجهاز لا معنى له في برنامج الكمبيوتر (لا لمس ولا ريموت)، فنخفيه هناك فقط
      ويبقى في الموقع على المتصفح حيث يحتاجه مستخدمو الهواتف وشاشات التلفاز. */
body.platform-electron #navDeviceModeBtn,
body.platform-electron #btnDeviceModeAuth {
    display: none !important;
}

/* 3. وفي شاشة كود السيرفر يظهر زر قوائم التشغيل مكانه دائماً في برنامج الكمبيوتر. */
body.platform-electron #btnSavedAccountsAuth.hidden {
    display: flex !important;
}

/* أزرار القناة/الحلقة السابقة والتالية: كبسولة نصّية مثل btn_next_item في أندرويد،
   وموضعها بعد أزرار التقديم والصوت فلا تختلط بها. */
.video-js .mizo-queue-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 8px !important;
    width: auto !important;
    height: 38px !important;
    margin: 0 6px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 19px !important;
    cursor: pointer !important;
    transition: background .2s ease, color .2s ease !important;
}

.video-js .mizo-queue-btn i {
    font-size: 15px !important;
    line-height: 1 !important;
}

.video-js .mizo-queue-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ff9f0a !important;
}

/* الإطار الأخضر للتنقل لا يظهر إلا بعد استعمال لوحة المفاتيح (body.kbd-nav من splayer.js)،
   فمستخدم الفأرة لا يراه إطلاقاً. */
body:not(.kbd-nav) .tv-focused,
body:not(.kbd-nav) :focus-visible {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/*
 * fa-sparkles أيقونة Pro غير موجودة في النسخة المجانية من Font Awesome 6، فكانت
 * تُرسم فارغة: زر "مساعد الميزو" بلا نجمة بعكس تطبيق أندرويد، وكذلك صورة المساعد
 * في كل رسالة وشارة التحديث. نرسمها هنا كقناع SVG بنفس مسار fa_sparkles.xml
 * المستعمل في أندرويد، فتتطابق الأيقونتان ولا تعتمد على إصدار المكتبة ولا على الإنترنت.
 */
.fa-sparkles::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--mizo-sparkles) center / contain no-repeat;
    mask: var(--mizo-sparkles) center / contain no-repeat;
}

:root {
    --mizo-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M327.5 85.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L384 128l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L448 128l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L448 64 426.8 7.5C425.1 3 420.8 0 416 0s-9.1 3-10.8 7.5L384 64 327.5 85.2zM24 224c-13.3 0-24 10.7-24 24s10.7 24 24 24l56.5 21.2 21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L144 293.2 200.5 272c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L144 229.2 122.8 172.7c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L80.5 229.2 24 224zM249.2 168.3c-7.2 3.2-11.9 10.3-12.1 18.2s4.2 15.2 11.2 18.8L339 252.7l47.4 90.7c3.6 7 10.9 11.4 18.8 11.2s15-4.9 18.2-12.1l43.4-97.7 97.7-43.4c7.2-3.2 11.9-10.3 12.1-18.2s-4.2-15.2-11.2-18.8L474.7 137l-47.4-90.7c-3.6-7-10.9-11.4-18.8-11.2s-15 4.9-18.2 12.1l-43.4 97.7-97.7 43.4z'/%3E%3C/svg%3E");
}

/*
 * زر ملء الشاشة العائم فوق مشغل البث: كان ثابتاً فوق الصورة طوال التشغيل ويزعج
 * المشاهدة، وهو مكرّر أصلاً — الزر نفسه موجود في شريط القناة العلوي أثناء التشغيل.
 * نُخفيه ما دام هناك بث شغّال، فلا يظهر إلا بعد إغلاق الفيديو بالزر الأحمر.
 */
.live-player-container-rel.is-playing .live-fullscreen-btn-overlay {
    display: none !important;
}

/*
 * حزام أمان: الطبقة الشفافة خلف بطاقة أي نافذة يجب ألا تُرفع فوق البطاقة مهما حدث.
 * صنف .tv-focused يفرض z-index:999 وتكبيراً، فإن وُضع على الطبقة بأي طريق غطّت
 * البطاقة وابتلعت كل الضغطات. الجذر مُعالَج في app-bridge.js، وهذا يمنع عودته.
 */
[class*="backdrop"].tv-focused,
[class*="backdrop"]:focus,
[class*="backdrop"]:focus-visible {
    z-index: 0 !important;
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   نوافذ التنبيه والتأكيد والإدخال بهوية الميزو (splayer.js)
   مطابقة لنوافذ الموقع، بلا backdrop-filter: في برنامج الكمبيوتر
   تُنشئ طبقة تركيب لا تُحدَّث.
   ========================================================== */
.mz-dlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(5, 8, 15, 0.82);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.mz-dlg-overlay.visible { opacity: 1; }
.mz-dlg-box {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 28px 24px 22px;
    border-radius: 20px;
    text-align: center;
    color: #f8fafc;
    font-family: 'Almarai', 'Tajawal', sans-serif;
    background: linear-gradient(145deg, rgba(22, 27, 34, 0.98) 0%, rgba(13, 17, 23, 0.99) 100%);
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.12);
    transform: scale(0.92) translateY(14px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mz-dlg-overlay.visible .mz-dlg-box { transform: scale(1) translateY(0); }
.mz-dlg-icon { font-size: 3rem; margin-bottom: 14px; display: inline-block; }
.mz-dlg-success .mz-dlg-icon { color: #10b981; filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.45)); }
.mz-dlg-error .mz-dlg-icon { color: #ef4444; filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.45)); }
.mz-dlg-warning .mz-dlg-icon,
.mz-dlg-question .mz-dlg-icon { color: #f59e0b; filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.45)); }
.mz-dlg-info .mz-dlg-icon { color: #38bdf8; filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.45)); }
.mz-dlg-title { margin: 0 0 10px; font-size: 1.25rem; font-weight: 800; color: #f8fafc; }
.mz-dlg-message { margin: 0 0 22px; font-size: 1.05rem; line-height: 1.6; color: #cbd5e1; word-break: break-word; white-space: pre-line; }
.mz-dlg-input {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(56, 189, 248, 0.35);
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 1.05rem;
    font-family: inherit;
    text-align: center;
    outline: none;
}
.mz-dlg-input:focus { border-color: #38bdf8; box-shadow: 0 0 12px rgba(56, 189, 248, 0.4); }
.mz-dlg-buttons { display: flex; gap: 12px; justify-content: center; }
.mz-dlg-btn {
    flex: 1;
    max-width: 180px;
    padding: 12px 18px;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mz-dlg-ok { color: #1a1300; background: linear-gradient(135deg, #f4c242, #e5a91a); box-shadow: 0 6px 16px rgba(244, 194, 66, 0.3); }
.mz-dlg-ok.mz-dlg-danger { color: #fff; background: linear-gradient(135deg, #ff4d4d, #d32f2f); box-shadow: 0 6px 16px rgba(211, 47, 47, 0.35); }
.mz-dlg-cancel { color: #e2e8f0; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.08); }
.mz-dlg-btn:hover { transform: translateY(-2px); }
.mz-dlg-btn:focus, .mz-dlg-btn:focus-visible { outline: none; border-color: #fff; transform: scale(1.05); }

/* رسالة قصيرة بهوية الميزو حين لا تُحمَّل SweetAlert (showToast في splayer.js) */
.mz-toast {
    position: fixed;
    left: 50%;
    bottom: 42px;
    z-index: 2147483001;
    max-width: min(80vw, 560px);
    padding: 12px 24px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.96);
    border: 1.5px solid rgba(245, 158, 11, 0.55);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: 'Almarai', 'Tajawal', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    direction: rtl;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 14px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mz-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.mz-toast-success { border-color: rgba(16, 185, 129, 0.6); }
.mz-toast-error { border-color: rgba(239, 68, 68, 0.65); }


/* =====================================================================
   التنزيلات (downloads-ui.js) — برنامج الكمبيوتر فقط
   ===================================================================== */
.btn-download-movie {
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #374151;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.2s ease;
}
.btn-download-movie i { color: #22c55e; }
.btn-download-movie:hover, .btn-download-movie:focus-visible { background: #4b5563; outline: 2px solid #fff; outline-offset: 2px; }
.btn-download-movie.is-done { border-color: rgba(34, 197, 94, 0.5); }

.btn-download-season {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px 0;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #374151;
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}
.btn-download-season i { color: #22c55e; }
.btn-download-season:hover, .btn-download-season:focus-visible { background: #4b5563; outline: 2px solid #fff; outline-offset: 2px; }

.mdl-ep-badge {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(11, 14, 20, 0.8);
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.mdl-ep-badge span { font-size: 11px; font-weight: 800; color: #38bdf8; }
.mdl-ep-badge:hover { border-color: #fff; background: rgba(34, 197, 94, 0.3); }
.mdl-ep-badge.is-done { color: #22c55e; }
.mdl-ep-badge.is-paused { color: #f59e0b; }
.mdl-ep-badge.is-failed { color: #f87171; }
.mdl-ep-badge.is-queued { color: #cbd5e1; }

.nav-btn-downloads {
    position: relative;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
.nav-btn-downloads:hover { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
/* زر التنزيلات في الشاشة الرئيسية للمشغل فقط (لا بجانب زر الرجوع في الأفلام والمسلسلات) */
body:not(.screen-is-dashboard) .nav-btn-downloads { display: none !important; }
.nav-dl-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #22c55e;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
}
.nav-dl-count.hidden { display: none; }

.mdl-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    padding: 24px;
}
.mdl-overlay.open { display: flex; }
.mdl-dialog, .mdl-page {
    width: min(640px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: #161b22;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8);
    direction: rtl;
    text-align: right;
    color: #fff;
}
.mdl-page { width: min(980px, 100%); height: 88vh; display: flex; flex-direction: column; }
.mdl-head { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 900; margin-bottom: 16px; }
.mdl-head i, .mdl-page-title i { color: #22c55e; }
.mdl-line { font-size: 0.9rem; font-weight: 700; color: #cbd5e1; margin: 4px 0; }
.mdl-line i { color: #f59e0b; margin-inline-end: 6px; }
.mdl-muted { color: #94a3b8; }
.mdl-sep { margin: 0 8px; color: #64748b; }
.mdl-foot { display: flex; gap: 14px; margin-top: 18px; }
.mdl-foot-btn {
    flex: 1;
    height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #374151;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}
.mdl-foot-main { background: #e50914; border-color: #e50914; }
.mdl-foot-btn:hover, .mdl-foot-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mdl-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    margin-bottom: 12px;
    background: #111620;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
}
.mdl-poster { width: 70px; height: 105px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #0b0e14; }
.mdl-info { flex: 1; min-width: 0; }
.mdl-title { font-size: 1.1rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdl-sub { font-size: 0.85rem; font-weight: 700; color: #94a3b8; margin-top: 2px; }
.mdl-status { font-size: 0.85rem; font-weight: 700; margin-top: 8px; }
.mdl-bar { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.15); margin-top: 8px; overflow: hidden; }
.mdl-bar-fill { height: 100%; background: #22c55e; border-radius: 6px; transition: width 0.4s ease; }
.mdl-bar-fill.indeterminate { width: 40% !important; animation: mdl-slide 1.2s linear infinite; }
@keyframes mdl-slide { from { transform: translateX(150%); } to { transform: translateX(-250%); } }
.mdl-stats { font-size: 0.8rem; font-weight: 700; color: #cbd5e1; margin-top: 7px; }
.mdl-actions { display: flex; gap: 10px; flex-shrink: 0; }
.mdl-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
.mdl-btn:hover, .mdl-btn:focus-visible { background: rgba(34, 197, 94, 0.2); border-color: #fff; outline: none; }
.mdl-btn-danger { color: #f87171; }
.mdl-btn-play { color: #22c55e; }

.mdl-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mdl-page-title { font-size: 1.8rem; font-weight: 900; display: flex; align-items: center; gap: 12px; }
.mdl-page-tools { display: flex; gap: 10px; }
.mdl-tool {
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #374151;
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}
.mdl-tool i { color: #f59e0b; margin-inline-end: 6px; }
.mdl-tool-close i { color: #fff; margin: 0; }
.mdl-tool:hover, .mdl-tool:focus-visible { background: #4b5563; outline: 2px solid #fff; outline-offset: 2px; }
.mdl-page-sub { font-size: 0.9rem; font-weight: 700; color: #94a3b8; margin: 10px 0 16px; line-height: 1.8; }
.mdl-page-sub i { color: #f59e0b; }
.mdl-page-list { flex: 1; overflow-y: auto; padding-inline-end: 4px; }
.mdl-empty { text-align: center; color: #94a3b8; padding: 60px 20px; font-weight: 800; font-size: 1.2rem; }
.mdl-empty i { display: block; font-size: 3rem; margin-bottom: 14px; opacity: 0.5; }
.mdl-empty small { display: block; margin-top: 8px; font-size: 0.9rem; font-weight: 600; }

/* مساعد الميزو: قوائم الرد ومصادر البحث */
.ai-msg-text .ai-msg-list { margin: 4px 0; padding-inline-start: 18px; }
.ai-msg-text .ai-msg-list li { margin: 3px 0; line-height: 1.6; }
.ai-msg-text .ai-msg-gap { height: 6px; }
.ai-msg-text strong { color: #fff; font-weight: 800; }
.ai-msg-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ai-msg-sources .ai-src-title { font-size: 11px; opacity: .7; }
.ai-src-chip { font-size: 11px; padding: 3px 9px; border-radius: 12px; background: rgba(255,255,255,.08); color: #9ecbff; text-decoration: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-src-chip:hover, .ai-src-chip:focus { background: rgba(255,255,255,.16); }

/* =========================================================
   اللغة الإنجليزية: قلب اتجاه المشغل بالكامل إلى LTR
   ========================================================= */
/* عناصر مكتوب عليها dir="rtl" مباشرة في HTML تُقلب هنا، وإلا بقيت عربية الاتجاه */
html.lang-en body,
html.lang-en [dir="rtl"] {
    direction: ltr;
}
html.lang-en .profile-card,
html.lang-en .copyright,
html.lang-en .modal-content,
html.lang-en .drawer,
html.lang-en .sidebar {
    direction: ltr;
    text-align: left;
}
/* زر المساعد في جهة وزر اللغة في الجهة المقابلة تماماً، وينقلبان مع اتجاه اللغة */
html.lang-en .ai-floating-trigger { right: auto; left: 24px; }
html.lang-en .lang-floating-trigger { left: auto; right: 24px; }
html.lang-en .speed-floating-trigger { left: auto; right: 162px; }

/* شريط التحكم في الفيديو: ترتيب الأزرار ينقلب ليطابق المشغلات الإنجليزية */
html.lang-en .sp-controls,
html.lang-en .video-controls,
html.lang-en .player-controls,
html.lang-en .controls-row,
html.lang-en .sp-bottom-bar,
html.lang-en .sp-top-bar {
    direction: ltr;
    flex-direction: row;
}
html.lang-en .sp-progress,
html.lang-en .progress-bar,
html.lang-en .seek-bar,
html.lang-en input[type="range"] {
    direction: ltr;
}
html.lang-en .sp-time,
html.lang-en .time-display {
    direction: ltr;
    unicode-bidi: isolate;
}

/* زر تغيير اللغة (يسار زر مساعد الميزو في العربية، ويمينه في الإنجليزية) */
.lang-floating-trigger {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99999;
    pointer-events: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(16, 122, 70, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(34, 197, 94, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-user-select: none;
    user-select: none;
}
.lang-floating-trigger:hover,
.lang-floating-trigger:focus-visible {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(34, 197, 94, 0.55);
    outline: none;
}
.lang-floating-trigger:active {
    transform: scale(0.96);
}
.lang-btn-icon { font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.lang-btn-label { letter-spacing: 0.2px; }
/* عرض ثابت: نص الزر يتغير بين "English" و"العربية" باختلاف عرضه،
   وزر قياس السرعة يقف على إزاحة ثابتة بعده، فبدون هذا يتلاصق الزران في إحدى اللغتين */
.lang-floating-trigger { min-width: 128px; justify-content: center; box-sizing: border-box; }
@media (max-width: 600px) {
    .lang-floating-trigger { left: 14px; padding: 9px 14px; font-size: 12.5px; min-width: 112px; }
    html.lang-en .lang-floating-trigger { left: auto; right: 14px; }
}

/* زر قياس سرعة الإنترنت العائم (بجانب زر اللغة) */
.speed-floating-trigger {
    position: fixed;
    bottom: 24px;
    left: 162px;
    z-index: 99999;
    pointer-events: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.95), rgba(59, 130, 246, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(6, 182, 212, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-user-select: none;
    user-select: none;
}
.speed-floating-trigger:hover,
.speed-floating-trigger:focus-visible {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(6, 182, 212, 0.65);
    outline: none;
}
.speed-floating-trigger:active {
    transform: scale(0.96);
}
.speed-btn-icon { font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.speed-btn-label { letter-spacing: 0.2px; }
@media (max-width: 600px) {
    .speed-floating-trigger { left: 135px; padding: 9px 12px; font-size: 12px; gap: 6px; }
    html.lang-en .speed-floating-trigger { left: auto; right: 135px; }
}
/* شاشات ضيقة جداً: الزران فوق بعضهما بدل التزاحم أفقياً */
@media (max-width: 400px) {
    .speed-floating-trigger { left: 14px; bottom: 76px; }
    html.lang-en .speed-floating-trigger { left: auto; right: 14px; }
}

body.tv-device-mode .speed-floating-trigger:focus {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 0 0 3.5px #fff, 0 15px 40px rgba(0,0,0,0.8), 0 0 30px rgba(6, 182, 212, 0.8) !important;
    outline: none !important;
}

/* =========================================================================
   نافذة فحص سرعة الإنترنت (Speed Test Modal)
   ========================================================================= */
.speed-test-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.speed-test-modal.hidden {
    display: none !important;
}
.speed-test-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 7, 18, 0.84);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.speed-test-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    /* ارتفاع المحتوى يتجاوز الشاشة في الوضع الأفقي وعلى شاشات TV القصيرة،
       فبدون تمرير يُقطع زرّا "بدء الفحص" و"إغلاق" ولا يمكن الوصول إليهما */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(145deg, rgba(17, 24, 39, 0.97), rgba(15, 23, 42, 0.98));
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 50px rgba(6, 182, 212, 0.15);
    box-sizing: border-box;
    color: #fff;
    animation: speedModalEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes speedModalEnter {
    from { opacity: 0; transform: scale(0.92) translateY(15px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.speed-test-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
}
.speed-test-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.speed-test-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: #06b6d4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
}
.speed-test-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 2px 0;
    color: #fff;
}
.speed-test-subtitle {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}
.btn-close-speed {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-close-speed:hover,
.btn-close-speed:focus-visible {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    transform: scale(1.08);
    outline: none;
}

/* منطقة عداد السرعة: قوس 240 درجة بإبرة (يُرسم في MizoSpeedTest.buildGauge) */
.speed-test-gauge-wrap {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 260 / 200;
    margin: 0 auto 4px auto;
}
.speed-gauge-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.gauge-tick { stroke: rgba(255, 255, 255, 0.25); stroke-linecap: round; }
.gauge-tick.major { stroke-width: 2.4; }
.gauge-tick.minor { stroke-width: 1.4; }
.gauge-tick.lit { stroke: #e2e8f0; }
.gauge-tick-label { fill: #94a3b8; font-size: 11px; font-weight: 700; font-family: 'Outfit', sans-serif; }
.gauge-needle polygon, .gauge-needle circle:first-of-type { filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.55)); }
.gauge-center-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.gauge-speed-val {
    font-size: 2.3rem;
    font-weight: 900;
    line-height: 1;
    font-family: 'Outfit', -apple-system, monospace;
    background: linear-gradient(135deg, #ffffff, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}
.gauge-speed-unit {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gauge-status-pill {
    margin: 30px auto 10px auto;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #cbd5e1;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #06b6d4;
    box-shadow: 0 0 10px #06b6d4;
    display: inline-block;
}
.status-dot.testing {
    animation: statusPulse 1s infinite ease-in-out;
}
@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

/* مراحل الفحص */
.speed-phases {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}
.speed-phase { display: inline-flex; align-items: center; gap: 6px; transition: color 0.3s ease; }
.speed-phase i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.speed-phase.active { color: #06b6d4; }
.speed-phase.active i { animation: statusPulse 1s infinite ease-in-out; box-shadow: 0 0 8px #06b6d4; }
.speed-phase.done { color: #22c55e; }
.speed-phase-sep { width: 18px; height: 2px; border-radius: 2px; background: #334155; }

/* رسم تذبذب السرعة */
.speed-spark {
    display: block;
    width: 100%;
    height: 44px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.speed-warning {
    margin: -4px 0 12px 0;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: #f59e0b;
}
.speed-warning.hidden, .speed-history.hidden { display: none; }

/* شرائح الجودات */
.speed-quality-chips {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}
.q-chip {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    border: 1px solid #475569;
    background: rgba(71, 85, 105, 0.12);
    transition: all 0.3s ease;
}
.q-chip.ok { color: #22c55e; border-color: #22c55e; background: rgba(34, 197, 94, 0.12); }
.q-chip.edge { color: #f59e0b; border-color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.q-chip.ok::after { content: ' ✓'; }
.q-chip.edge::after { content: ' ⚠'; }
.speed-history bdi { white-space: nowrap; }
.speed-history {
    margin-top: 10px;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.6;
}

/* كروت المؤشرات الثلاثية */
.speed-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.speed-metric-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease;
}
.speed-metric-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}
.metric-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-bottom: 6px;
}
.metric-download { background: rgba(6, 182, 212, 0.15); color: #06b6d4; }
.metric-ping { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.metric-jitter { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.metric-label {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-bottom: 2px;
}
.metric-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    font-family: monospace;
}
.metric-value small {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 500;
}

/* بطاقة توصية الجودة */
.speed-recommend-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
}
.recommend-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 4px;
}
.recommend-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

/* أزرار الإجراءات */
.speed-test-actions {
    display: flex;
    gap: 10px;
}
.btn-speed-start {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #06b6d4, #2563eb);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(6, 182, 212, 0.4);
    transition: all 0.2s ease;
    outline: none;
}
.btn-speed-start:hover,
.btn-speed-start:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(6, 182, 212, 0.6);
    background: linear-gradient(135deg, #0891b2, #1d4ed8);
}
.btn-speed-start:active {
    transform: scale(0.98);
}
.btn-speed-close {
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}
.btn-speed-close:hover,
.btn-speed-close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-2px);
}

/* دعم اتجاه اللغة الإنجليزية في النافذة */
html.lang-en .speed-test-card {
    direction: ltr;
}
html.lang-en .speed-test-header {
    flex-direction: row;
}
html.lang-en .speed-test-title-wrap {
    flex-direction: row;
}

/* الساعة والتاريخ في الشريط العلوي يبقيان بترتيب LTR في الإنجليزية */
html.lang-en .auto-style-36 { direction: ltr; }

/* شاشات متوسطة الارتفاع (لابتوب 768): عدّاد أصغر حتى لا تُقطع ترويسة النافذة */
@media (max-height: 820px) {
    .speed-test-gauge-wrap { max-width: 235px; }
    .speed-spark { height: 34px; margin-bottom: 8px; }
    .gauge-status-pill { margin-top: 16px; margin-bottom: 8px; }
    .speed-test-header { margin-bottom: 12px; }
}

/* شاشات قصيرة (هاتف أفقي / TV بارتفاع صغير): تقليص العدّاد والمسافات */
@media (max-height: 560px) {
    .speed-test-card { padding: 16px 18px; border-radius: 18px; }
    .speed-test-gauge-wrap { max-width: 230px; }
    .speed-spark { height: 32px; }
    .speed-test-subtitle { display: none; }
    .speed-metrics-grid { gap: 8px; }
    .recommend-desc { font-size: 12px; }
}

/* نافذة قياس السرعة بالعرض: العدّاد في عمود والنتائج والأزرار في عمود (مثل تطبيق الأندرويد).
   عمود واحد طويل كان لا يناسب شاشات الكمبيوتر والتلفاز */
.speed-test-card { max-width: 900px; }
.speed-test-body {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 18px;
    align-items: start;
}
.speed-col-gauge {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 12px 16px 14px;
    min-width: 0;
}
.speed-col-info { min-width: 0; }
.speed-col-info .speed-metrics-grid { margin-top: 0; }
.speed-col-gauge .speed-spark { margin-bottom: 0; }
/* الشاشات الضيقة (هاتف عمودي) فقط: عمود واحد */
@media (max-width: 760px) {
    .speed-test-card { max-width: 520px; }
    .speed-test-body { grid-template-columns: 1fr; }
}