/* تنسيقات إضافية فوق Tailwind */
:root {
  --bg: #0b0b0f;
  --panel: #141419;
  --panel-2: #1c1c24;
  --line: #2a2a35;
  --accent: #e50914;
}

html, body { background: var(--bg); }
body { font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; }

/* شريط التمرير */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #33333f; border-radius: 6px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin { scrollbar-width: thin; scrollbar-color: #33333f transparent; }

/* القائمة الجانبية */
#sidebar { transition: width .25s ease, transform .25s ease, opacity .2s ease; }
body.sidebar-collapsed #sidebar { width: 0; opacity: 0; overflow: hidden; border: 0; }
@media (max-width: 1023px) {
  #sidebar { position: fixed; top: 64px; bottom: 0; right: 0; z-index: 40; width: 86vw; max-width: 340px; transform: translateX(100%); }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-collapsed #sidebar { width: 86vw; opacity: 1; }
  body.sidebar-open #backdrop { display: block; }
}

.channel-item.active { background: rgba(229, 9, 20, .15); box-shadow: inset -3px 0 0 var(--accent); }
.channel-item.active .ch-name { color: #fff; }

.cat-btn[aria-expanded="true"] .chev { transform: rotate(-90deg); }
.chev { transition: transform .2s ease; }

/* المشغل */
#playerWrap:fullscreen { background: #000; }
#playerWrap:fullscreen video { height: 100vh; max-height: none; }
#playerWrap:-webkit-full-screen video { height: 100vh; max-height: none; }

.spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.15); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.logo-fallback {
  background: linear-gradient(135deg, #2a2a35, #1a1a22);
  color: #bbb; font-weight: 700;
}

/* الصفحة الرئيسية */
.row-scroll { scroll-snap-type: x proximity; scrollbar-width: none; }
.row-scroll::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; transition: transform .2s ease; }
.card:hover { transform: scale(1.05); z-index: 2; }
.card .thumb { background: linear-gradient(145deg, #23232d, #15151b); }
.card:hover .thumb { box-shadow: 0 0 0 2px var(--accent), 0 10px 30px rgba(0,0,0,.6); }
.card.active .thumb { box-shadow: 0 0 0 2px var(--accent); }
.card .thumb.logo-fallback { font-size: 2.2rem; }
.hero { background: radial-gradient(ellipse at top right, rgba(229,9,20,.35), transparent 60%), linear-gradient(135deg, #1a1a22, #0b0b0f); }

/* التنقل */
.nav-link { padding: .5rem .9rem; border-radius: .5rem; color: #aaa; font-weight: 700; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-link.active { color: #fff; background: rgba(229,9,20,.18); }
.bottom-link { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .6rem; color: #888; }
.bottom-link.active { color: #fff; }
.bottom-link.active span { filter: drop-shadow(0 0 6px rgba(229,9,20,.8)); }

.day-tab { padding: .45rem 1rem; border-radius: .55rem; color: #aaa; font-weight: 700; }
.day-tab.active { background: var(--accent); color: #fff; }

/* بطاقة المباراة */
.match { transition: border-color .15s, transform .15s; }
.match:hover { border-color: rgba(229,9,20,.5); transform: translateY(-1px); }
.team-logo { width: 44px; height: 44px; object-fit: contain; }
.badge-live { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .65; } }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff2d3a; box-shadow: 0 0 0 0 rgba(255,45,58,.7); animation: liveDot 1.2s ease-out infinite; display: inline-block; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(255,45,58,.7); opacity: 1; } 70% { box-shadow: 0 0 0 8px rgba(255,45,58,0); opacity: .6; } 100% { box-shadow: 0 0 0 0 rgba(255,45,58,0); opacity: 1; } }
.match-live { border-color: rgba(229,9,20,.55) !important; background: linear-gradient(180deg, rgba(229,9,20,.10), #141419 60%) !important; }

.news-card img { transition: transform .3s ease; }
.news-card:hover img { transform: scale(1.05); }

.toast { animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }