/* ==========================================================================
   OSCAR TV VIP - Android APK 1:1 Pixel-Perfect Stylesheet
   Directly mapped from OscarTV_v1.1.5.apk (res/values/colors.xml & layout/*.xml)
   ========================================================================== */

:root {
  /* Exact Colors from res/values/colors.xml */
  --black-bg: #0a0a0a;
  --black-surface: #121212;
  --black-card: #181818;
  --black-elevated: #222222;
  --black-pure: #000000;
  
  --red-primary: #e50914;
  --red-dark: #b20710;
  --red-light: #ff3d47;
  
  --white-primary: #ffffff;
  --white-secondary: rgba(255, 255, 255, 0.75);
  --grey-text: #b3b3b3;
  --grey-hint: #808080;
  --grey-disabled: #555555;
  
  --gold-rating: #ffd700;
  --green-football: #4caf50;
  --dubbed-orange: #ff8c00;
  --subtitled-blue: #00b4d8;
  --anime-accent: #5b4fff;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  --transition-fast: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Global Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background-color: var(--black-bg);
  color: var(--white-primary);
  font-family: var(--font-family);
  direction: rtl;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.4;
  user-select: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--black-bg);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  border-radius: 999px;
  border: 2px solid var(--black-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #f59e0b var(--black-bg);
}

.red-text { color: var(--red-primary) !important; }
.gold-text { color: var(--gold-rating) !important; }
.green-text { color: var(--green-football) !important; }

/* ==========================================================================
   2. BACKGROUND POSTERS MESH (Exact rvBgPosters + viewBgOverlay)
   ========================================================================== */
.bg-posters-mesh {
  position: fixed;
  inset: -20%;
  width: 140%;
  height: 140%;
  z-index: -2;
  transform: rotate(-5deg) scale(1.15);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0.08;
  pointer-events: none;
  overflow: hidden;
}

.mesh-row {
  display: flex;
  gap: 16px;
  white-space: nowrap;
  animation: meshScroll 120s linear infinite;
}

.mesh-row img {
  width: 120px;
  height: 180px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes meshScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.bg-dark-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10,10,10,0.85) 0%, #0a0a0a 100%);
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   3. APP TOP BAR (Exact topIconsBar from fragment_home.xml)
   ========================================================================== */
.app-top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 64px;
  display: flex;
  align-items: center;
}

.top-bar-content {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-icon-btn {
  background: transparent;
  border: none;
  color: var(--white-primary);
  font-size: 1.25rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.top-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--red-primary);
  transform: scale(1.05);
}

.top-bar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  height: 40px;
}

.app-logo-img {
  height: 38px;
  max-height: 38px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
}

.app-title-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 1px;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   4. NAVIGATION DRAWER (Exact layout_drawer.xml from APK)
   ========================================================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.app-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 290px;
  background: var(--black-surface);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.app-drawer.active {
  transform: translateX(0);
}

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

.drawer-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.drawer-logo-img {
  height: 36px;
  object-fit: contain;
}

.drawer-logo-title {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
}

.drawer-vip-badge {
  background: var(--red-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--grey-hint);
  font-size: 1.2rem;
  cursor: pointer;
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

.drawer-section-title {
  font-size: 0.8rem;
  color: var(--grey-hint);
  font-weight: 700;
  padding: 0.5rem 1.5rem 0.25rem;
  text-transform: uppercase;
}

.drawer-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0.85rem 1.5rem;
  color: var(--grey-text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.drawer-nav-item:hover, .drawer-nav-item.active {
  background: rgba(229, 9, 20, 0.12);
  color: var(--white-primary);
  border-right: 4px solid var(--red-primary);
}

.drawer-nav-item i {
  font-size: 1.15rem;
  width: 22px;
  text-align: center;
  color: var(--grey-hint);
}

.drawer-nav-item:hover i, .drawer-nav-item.active i {
  color: var(--red-primary);
}

.drawer-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: var(--grey-hint);
  text-align: center;
}

/* ==========================================================================
   5. BOTTOM NAVIGATION BAR (Exact 10 Tabs from APK Screenshots 4 & 5)
   ========================================================================== */
.app-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #0d0d0d;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app-bottom-nav::-webkit-scrollbar {
  display: none;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-family: inherit;
  font-size: 0.70rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 68px;
  flex: 1 0 auto;
  height: 100%;
  position: relative;
  transition: color 0.18s ease;
}

.bottom-nav-item i {
  font-size: 1.18rem;
  transition: transform 0.18s ease;
}

.bottom-nav-item:hover i {
  transform: translateY(-2px);
}

.bottom-nav-item.active {
  color: #e50914 !important;
}

.bottom-nav-item.active i {
  color: #e50914 !important;
}

.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 3px;
  background: #e50914;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 8px rgba(229, 9, 20, 0.8);
}

/* Main Container Padding to not overlap bottom bar */
.app-main-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 85px 1.25rem;
}

.tab-view {
  display: none;
}

.tab-view.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.tab-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.apk-select {
  background: var(--black-card);
  color: var(--white-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.apk-select:focus, .apk-select:hover {
  border-color: var(--red-primary);
}

/* ==========================================================================
   6. HERO BANNER CAROUSEL (item_banner.xml)
   ========================================================================== */
.banner-carousel-container {
  position: relative;
  width: 100%;
  height: 420px;
  margin-bottom: 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--black-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
}

@media (max-width: 768px) {
  .banner-carousel-container { height: 280px; }
}

.banner-slides-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: flex-end;
}

.banner-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.banner-backdrop-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.banner-fade-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0a0a0a 0%, rgba(10,10,10,0.85) 45%, rgba(10,10,10,0.3) 100%),
              linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.2) 60%, transparent 100%);
}

.banner-info-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 1.75rem;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
}

.banner-poster-card {
  width: 90px;
  height: 135px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
}

.banner-poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text-col {
  flex: 1;
}

.banner-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--white-primary);
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.banner-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--white-secondary);
  margin-bottom: 12px;
}

.rating-badge {
  background: rgba(255, 215, 0, 0.15);
  color: var(--gold-rating);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.banner-btn-row {
  display: flex;
  gap: 10px;
}

.banner-play-btn {
  background: var(--red-primary);
  color: #fff;
  border: none;
  padding: 8px 22px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.banner-play-btn:hover {
  background: var(--red-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.5);
}

.banner-indicators {
  position: absolute;
  bottom: 14px;
  left: 20px;
  z-index: 10;
  display: flex;
  gap: 6px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: var(--transition-fast);
}

.indicator-dot.active {
  width: 24px;
  background: var(--red-primary);
}

/* ==========================================================================
   7. SECTIONS & CARDS (Exact item_home_section.xml & item_movie_card.xml)
   ========================================================================== */
.apk-home-section {
  margin-bottom: 2.5rem;
}

.apk-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.apk-section-indicator {
  width: 4px;
  height: 22px;
  background: var(--red-primary);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(229, 9, 20, 0.6);
}

.apk-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white-primary);
  flex: 1;
}

.apk-see-all {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--red-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.apk-see-all:hover {
  color: var(--red-light);
  text-decoration: underline;
}

.apk-horizontal-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 14px 2px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

/* Movie & Series Poster Card (Exact 120x180dp proportions) */
.apk-movie-card {
  width: 140px;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.apk-movie-card:hover {
  transform: translateY(-6px) scale(1.03);
}

.apk-poster-box {
  position: relative;
  width: 140px;
  height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: var(--transition-fast);
}

.apk-movie-card:hover .apk-poster-box {
  border-color: var(--red-primary);
  box-shadow: 0 8px 22px rgba(229, 9, 20, 0.35);
}

.apk-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.apk-stat-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-rating);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

/* Quality & Rating Badges (Screenshot 2 Match) */
.apk-badge-quality {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e50914;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 3;
  letter-spacing: 0.5px;
}

.apk-badge-rating {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  color: #ffd700;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  z-index: 3;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.apk-badge-age {
  position: absolute;
  top: 30px;
  right: 8px;
  background: #f59e0b;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  z-index: 3;
}

/* ==========================================================================
   TOP 10 RANKED TRENDING POSTERS (Screenshot 1 Match)
   ========================================================================== */
.apk-ranked-card {
  width: 145px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.apk-ranked-card:hover {
  transform: translateY(-6px) scale(1.03);
}

.apk-ranked-poster-box {
  position: relative;
  width: 145px;
  height: 215px;
  border-radius: 12px;
  overflow: hidden;
  background: #181818;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.apk-ranked-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.apk-rank-number {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 3.8rem;
  font-weight: 900;
  font-family: 'Outfit', sans-serif;
  color: #ffffff;
  line-height: 0.85;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.95), 0 0 4px #000;
  z-index: 5;
  user-select: none;
  letter-spacing: -2px;
}

/* ==========================================================================
   16:9 LANDSCAPE EPISODE CARDS (Screenshots 1 & 3 Match)
   ========================================================================== */
.apk-episode-card {
  width: 270px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.apk-episode-card:hover {
  transform: translateY(-4px) scale(1.02);
}

.apk-episode-thumb-box {
  position: relative;
  width: 270px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #141414;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.apk-episode-card:hover .apk-episode-thumb-box {
  border-color: rgba(229, 9, 20, 0.6);
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.3);
}

.apk-episode-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.apk-episode-duration-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  z-index: 3;
  direction: ltr;
}

.apk-episode-play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.15rem;
  padding-left: 2px;
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 3;
}

.apk-episode-card:hover .apk-episode-play-icon {
  transform: scale(1.15);
  background: var(--red-primary);
  border-color: var(--red-primary);
}

.apk-episode-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.apk-episode-meta-col {
  flex: 1;
  min-width: 0;
}

.apk-episode-series-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.apk-episode-sub-title {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--grey-text);
  margin-top: 2px;
  display: block;
}

.apk-episode-poster-mini {
  width: 32px;
  height: 44px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   PROMO INTERACTIVE BANNERS (Screenshots 2 & 3 Match)
   ========================================================================== */
.apk-promo-banner-card {
  width: 100%;
  max-width: 100%;
  min-height: 140px;
  border-radius: 16px;
  margin: 1.5rem 0 2.2rem 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.8rem;
  cursor: pointer;
  background: linear-gradient(135deg, #101018 0%, #1e1533 50%, #0d0a14 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.apk-promo-banner-card.arab-series-banner {
  background: linear-gradient(135deg, #1a0f0f 0%, #2b1111 50%, #120808 100%);
  border-color: rgba(229, 9, 20, 0.25);
}

.apk-promo-banner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
}

.apk-promo-content {
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 60%;
}

.apk-promo-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.apk-promo-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

.apk-promo-btn {
  margin-top: 8px;
  align-self: flex-start;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  border: none;
  padding: 6px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.apk-promo-banner-card.arab-series-banner .apk-promo-btn {
  background: linear-gradient(135deg, #e50914, #b20710);
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);
}

.apk-promo-art {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 130px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
}

.apk-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white-primary);
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apk-card-year {
  font-size: 0.75rem;
  color: var(--grey-hint);
  margin-top: 2px;
}

/* ==========================================================================
   MATCHES STYLING (item_match.xml & item_match_home.xml)
   ========================================================================== */
.apk-match-home-item {
  width: 175px;
  background: var(--black-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--transition-fast);
}

.apk-match-home-item:hover {
  border-color: var(--red-primary);
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.2);
}

.apk-match-league-lbl {
  font-size: 0.72rem;
  color: var(--grey-hint);
  font-weight: 700;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.apk-match-teams-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
}

.apk-team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.apk-team-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-bottom: 4px;
}

.apk-team-name-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

.apk-match-score-lbl {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gold-rating);
}

.apk-match-status-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.bg-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-primary);
  animation: pulseLive 1.5s infinite;
}

@keyframes pulseLive {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Full Match Schedule Card (item_match.xml) */
.league-matches-block {
  margin-bottom: 2rem;
}

.league-matches-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #151515;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.league-header-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.league-header-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white-primary);
  flex: 1;
}

.apk-full-match-card {
  background: var(--black-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.apk-full-match-card:hover {
  border-color: var(--red-primary);
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.25);
  transform: translateY(-2px);
}

.match-card-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.match-team-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.match-team-side.away {
  flex-direction: row-reverse;
  text-align: left;
}

.match-team-big-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.match-team-big-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white-primary);
}

.match-center-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 0 10px;
}

.match-center-score {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--gold-rating);
  letter-spacing: 1px;
}

.match-center-status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--grey-text);
  margin-top: 4px;
}

.match-card-footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--grey-hint);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.match-footer-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.match-watch-chip {
  background: var(--red-primary);
  color: #fff;
  border: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Channel Home Card (item_channel_home.xml) */
.apk-channel-home-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--transition-fast);
}

.apk-channel-home-item:hover {
  transform: translateY(-4px);
}

.apk-channel-card-sq {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-md);
  background: var(--black-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  transition: var(--transition-fast);
}

.apk-channel-home-item:hover .apk-channel-card-sq {
  border-color: var(--red-primary);
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.3);
}

.apk-channel-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.apk-channel-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 76px;
}

/* Tab Filter Chips */
.apk-chips-wrap {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}

.apk-chip-btn {
  background: var(--black-card);
  color: var(--grey-text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.apk-chip-btn:hover, .apk-chip-btn.active {
  background: var(--red-primary);
  color: #fff;
  border-color: var(--red-primary);
}

.apk-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
}

.apk-channel-card-full {
  background: var(--black-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.apk-channel-card-full:hover {
  border-color: var(--red-primary);
  transform: translateY(-4px);
}

/* ==========================================================================
   8. BOTTOM SHEET STREAM DIALOG (bottom_sheet_movie_info.xml)
   ========================================================================== */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sheet-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.bottom-sheet-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 900px;
  margin: 0 auto;
  background: #141414;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px 20px 0 0;
  z-index: 301;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
}

.bottom-sheet-dialog.active {
  transform: translateY(0);
}

.sheet-drag-handle {
  width: 44px;
  height: 4px;
  background: #444;
  border-radius: 2px;
  margin: 10px auto 4px;
}

.sheet-header-bar {
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sheet-header-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white-primary);
}

.sheet-close-btn {
  background: transparent;
  border: none;
  color: var(--grey-hint);
  font-size: 1.3rem;
  cursor: pointer;
}

.sheet-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

/* Video Player Box inside Sheet */
.sheet-player-wrap {
  width: 100%;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
  margin-bottom: 1.25rem;
}

.sheet-player-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-loader-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.sheet-meta-card {
  display: flex;
  gap: 16px;
  margin-bottom: 1.5rem;
}

.sheet-meta-poster {
  width: 85px;
  height: 125px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.sheet-meta-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sheet-meta-details {
  flex: 1;
}

.sheet-meta-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.sheet-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.server-chip {
  background: var(--black-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white-primary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.server-chip:hover, .server-chip.active {
  background: var(--red-primary);
  border-color: var(--red-primary);
  color: #fff;
}

/* ==========================================================================
   9. SEARCH MODAL (Exact fragment_search.xml)
   ========================================================================== */
.apk-search-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(16px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: flex;
  flex-direction: column;
}

.apk-search-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.apk-search-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.apk-search-input {
  flex: 1;
  background: var(--black-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}

.apk-search-input:focus {
  border-color: var(--red-primary);
}

.search-results-box {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.search-section-block {
  margin-bottom: 2rem;
}

.search-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-hint {
  text-align: center;
  color: var(--grey-hint);
  margin-top: 3rem;
  font-size: 1rem;
}

/* Spinner & Loading */
.apk-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(229, 9, 20, 0.2);
  border-top-color: var(--red-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.apk-loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--black-bg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.3s ease;
}

.apk-loading-logo {
  height: 64px;
}

/* Pagination */
.apk-pagination-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}

.apk-page-btn {
  background: var(--black-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--grey-text);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.apk-page-btn:hover, .apk-page-btn.active {
  background: var(--red-primary);
  color: #fff;
  border-color: var(--red-primary);
}

/* ===== MOBILE BOTTOM NAVIGATION BAR ===== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #0a0a0a, rgba(12,12,12,0.97));
  border-top: 1px solid rgba(255,215,0,0.25);
  padding: 6px 0 env(safe-area-inset-bottom, 8px);
  z-index: 9999;
  justify-content: space-around;
  align-items: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.m-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: #888;
  font-size: 0.65rem;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 12px;
  transition: all 0.2s ease;
}

.m-nav-btn i {
  font-size: 1.2rem;
  transition: all 0.2s ease;
}

.m-nav-btn.active {
  color: var(--gold, #ffd700);
}

.m-nav-btn.active i {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.5));
}

@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
  }
  body {
    padding-bottom: 70px;
  }
}

/* ==========================================================================
   OSCAR APK PIXEL-PERFECT CATALOG & FILTER STYLES (SCREENSHOTS 1, 2, 3, 4)
   ========================================================================== */

/* Catalog Page Header */
.oscar-page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px 16px;
  position: relative;
}

.oscar-page-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  text-align: right;
  letter-spacing: -0.5px;
}

.oscar-page-search-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.35rem;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.oscar-page-search-btn:hover {
  transform: scale(1.1);
  color: #e50914;
}

/* Row 1: Main Category Pills Bar (Horizontal Scroll) */
.oscar-main-cats-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 16px 10px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.oscar-main-cats-scroll::-webkit-scrollbar {
  display: none;
}

.oscar-main-cat-pill {
  background: #141416;
  color: #9e9ea7;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}

.oscar-main-cat-pill:hover {
  background: #222228;
  color: #ffffff;
}

.oscar-main-cat-pill.active {
  background: #e50914;
  color: #ffffff;
  border-color: #e50914;
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);
}

/* Row 2: Secondary Filter Pills (Horizontal Scroll) */
.oscar-sub-filters-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 16px 14px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.oscar-sub-filters-scroll::-webkit-scrollbar {
  display: none;
}

.oscar-sub-filter-pill {
  background: #1e1e24;
  color: #d1d1d6;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  user-select: none;
}

.oscar-sub-filter-pill:hover {
  background: #2a2a34;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}

.oscar-sub-filter-pill.active, .oscar-sub-filter-pill.has-value {
  background: #262630;
  color: #ffffff;
  border-color: #e50914;
}

.oscar-sub-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e50914;
  display: inline-block;
}

/* 3-Column Poster Grid (Screenshots 1, 2, 4) */
.oscar-posters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 12px 90px 12px;
}

@media (min-width: 600px) {
  .oscar-posters-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 6px 16px 90px 16px;
  }
}

@media (min-width: 768px) {
  .oscar-posters-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 10px 20px 90px 20px;
  }
}

@media (min-width: 1024px) {
  .oscar-posters-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
}

@media (min-width: 1280px) {
  .oscar-posters-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }
}

/* Oscar APK Poster Card (1:1 Match to Screenshots) */
.oscar-card-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: #141416;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease;
  user-select: none;
}

.oscar-card-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85);
}

.oscar-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Top-Right Badge: Translation (مترجم / مدبلج) */
.oscar-badge-sub {
  position: absolute;
  top: 7px;
  right: 7px;
  background: #00b4d8;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Top-Right Badge 2: Age Rating (+13 / +16 / +18) */
.oscar-badge-age-rating {
  position: absolute;
  top: 30px;
  right: 7px;
  background: #f77f00;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 5px;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Top-Left Badge: Episode / Season Counter (▶ 4 / ▶ 7 / ▶ 23) */
.oscar-badge-episodes {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 3px;
  direction: ltr;
}

/* Bottom Dark Gradient & Title */
.oscar-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 32%, transparent 65%);
  z-index: 2;
  pointer-events: none;
}

.oscar-card-title-text {
  position: absolute;
  bottom: 8px;
  left: 6px;
  right: 6px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  z-index: 3;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   FILTER SELECTION MODAL POPUP (SCREENSHOT 3 MATCH)
   ========================================================================== */
.oscar-filter-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.oscar-filter-modal-backdrop.active {
  display: flex;
  opacity: 1;
}

.oscar-filter-modal-dialog {
  background: #18181c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  width: 100%;
  max-width: 360px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.oscar-filter-modal-backdrop.active .oscar-filter-modal-dialog {
  transform: scale(1);
}

.oscar-filter-modal-header {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.oscar-filter-modal-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
}

.oscar-filter-options-list {
  padding: 8px 12px;
  overflow-y: auto;
  max-height: 55vh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
}

.oscar-filter-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-radius: 10px;
  color: #e0e0e6;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.oscar-filter-option-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.oscar-filter-option-item.selected {
  color: #e50914;
  background: rgba(229, 9, 20, 0.08);
}

.oscar-filter-option-item .check-icon {
  color: #e50914;
  font-size: 1.1rem;
  display: none;
}

.oscar-filter-option-item.selected .check-icon {
  display: inline-block;
}

/* ==========================================================================
   19. MOVIE SAGAS / COLLECTIONS VIEW (Screenshot 2 Match)
   ========================================================================== */
.oscar-back-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-back-btn:hover {
  background: var(--red-primary);
  transform: scale(1.05);
}

.oscar-header-pill-btn {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-header-pill-btn:hover {
  background: rgba(229, 9, 20, 0.2);
  border-color: #e50914;
}

.oscar-sagas-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 20px 16px;
}

.oscar-saga-card {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.oscar-saga-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(229, 9, 20, 0.3);
  border-color: rgba(229, 9, 20, 0.5);
}

.oscar-saga-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
}

.oscar-saga-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.oscar-saga-mini-poster {
  width: 52px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
  border: 1.5px solid rgba(255,255,255,0.4);
}

.oscar-saga-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

.oscar-saga-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oscar-saga-pill {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ==========================================================================
   20. LIVE CHANNELS VIEW (Screenshot 3 Match)
   ========================================================================== */
.oscar-featured-brands-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 14px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.oscar-featured-brands-row::-webkit-scrollbar { display: none; }

.oscar-brand-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
}

.oscar-brand-logo-box {
  width: 76px;
  height: 52px;
  background: #18181c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: all 0.2s ease;
}

.oscar-brand-logo-box:hover, .oscar-brand-item.active .oscar-brand-logo-box {
  border-color: #e50914;
  background: rgba(229, 9, 20, 0.12);
  transform: translateY(-2px);
}

.oscar-brand-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.oscar-brand-title {
  color: #bbb;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.oscar-channels-square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 16px 20px 16px;
}

@media (min-width: 768px) {
  .oscar-channels-square-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) {
  .oscar-channels-square-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.oscar-channel-square-card {
  background: #18181c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s ease;
}

.oscar-channel-square-card:hover {
  background: #202028;
  border-color: #e50914;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(229, 9, 20, 0.2);
}

.oscar-channel-square-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  margin-bottom: 8px;
}

.oscar-channel-square-name {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.oscar-channel-square-category {
  color: #888899;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 2px;
}

/* ==========================================================================
   21. TODAY'S MATCHES VIEW (Screenshot 4 Match)
   ========================================================================== */
.oscar-matches-hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 16px 12px 16px;
  position: relative;
}

.oscar-matches-top-icons {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 10px;
}

.oscar-match-icon-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
}

.oscar-matches-trophy-art img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 6px;
}

.oscar-matches-big-title {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0 0 12px 0;
}

.oscar-matches-date-pills {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px;
  border-radius: 24px;
  gap: 4px;
  margin-bottom: 8px;
}

.oscar-date-pill {
  background: transparent;
  border: none;
  color: #aaa;
  padding: 6px 18px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-date-pill.active {
  background: #2d3748;
  color: #fff;
}

.oscar-matches-timezone-hint {
  color: #777;
  font-size: 0.78rem;
  margin-bottom: 14px;
}

.oscar-leagues-icons-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  overflow-x: auto;
  padding: 6px 12px 14px 12px;
  direction: rtl;
  scrollbar-width: none;
}
.oscar-leagues-icons-row::-webkit-scrollbar { display: none; }

.oscar-league-icon-pill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-width: 68px;
  text-align: center;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.oscar-league-icon-pill:hover {
  transform: translateY(-3px);
}

.oscar-league-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.2s ease;
}

.oscar-league-icon-box img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  border: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
}

.oscar-league-icon-pill span {
  color: #8c9c94;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.oscar-league-icon-pill:hover span {
  color: #ffffff;
}

.oscar-league-icon-pill.active .oscar-league-icon-box {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(255, 42, 68, 0.6));
}

.oscar-league-icon-pill.active span {
  color: #ff2a44;
  font-weight: 900;
}

/* ==========================================================================
   21. TOURNAMENTS LIST VIEW (البطولات - 1:1 Android APK Match)
   ========================================================================== */
.oscar-tournaments-page {
  min-height: 100vh;
  background: #0d0f14;
  padding-bottom: 70px;
}

.oscar-tournaments-container {
  padding: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.oscar-tournaments-top-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  direction: rtl;
  margin-bottom: 20px;
  padding: 4px 0;
}

.oscar-tournaments-back-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.oscar-tournaments-back-btn:hover {
  transform: translateX(-4px);
  color: #ff2a44;
}

.oscar-tournaments-title {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0;
}

.oscar-tournaments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oscar-tournament-card {
  background: #14171d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.oscar-tournament-card:hover {
  background: #1c2029;
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.oscar-tournament-name {
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 800;
}

.oscar-tournament-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.oscar-matches-list-wrap {
  padding: 0 16px 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.league-matches-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.league-matches-header {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
  padding: 4px 2px;
}

.league-header-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.league-header-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.league-matches-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.apk-full-match-card {
  position: relative;
  overflow: hidden;
  background: #13161c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 18px 20px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.apk-full-match-card:hover {
  border-color: rgba(255, 42, 68, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.match-card-watermark {
  position: absolute;
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0.05;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  filter: grayscale(1);
}

.match-card-watermark.right {
  right: 12px;
}

.match-card-watermark.left {
  left: 12px;
}

.match-card-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.match-team-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  text-align: center;
}

.match-team-big-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.match-team-big-name {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}

.match-center-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 16px;
  min-width: 110px;
}

.match-center-score {
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}

.match-center-time {
  color: #a0aec0;
  font-size: 0.85rem;
  font-weight: 700;
}

.match-center-countdown {
  color: #ff2a44;
  font-size: 0.82rem;
  font-weight: 800;
  font-family: monospace;
  letter-spacing: 1px;
}

.match-card-footer-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 2;
}

.match-footer-ch-lbl {
  color: #718096;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.match-footer-ch-lbl i {
  color: #ff2a44;
  font-size: 0.85rem;
}

/* ==========================================================================
   22. FULL WORK DETAIL VIEW (Screenshot 5 Match)
   ========================================================================== */
.oscar-detail-page {
  position: relative;
  min-height: 100vh;
  padding-bottom: 70px;
  background: #0d0d11;
}

.oscar-detail-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 100%);
}

.oscar-detail-top-bar-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.oscar-detail-top-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.oscar-detail-top-btn:hover {
  transform: scale(1.15);
  color: #e50914;
}

.oscar-detail-hero-backdrop {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}

.oscar-detail-backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}

.oscar-detail-backdrop-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #0d0d11 5%, rgba(13,13,17,0.7) 40%, rgba(13,13,17,0.2) 100%);
}

.oscar-detail-hero-content {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.oscar-detail-left-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oscar-detail-main-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0;
  line-height: 1.25;
}

.oscar-detail-sub-title {
  color: #a0a0b0;
  font-size: 0.9rem;
  font-weight: 600;
}

.oscar-detail-meta-text {
  color: #888899;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oscar-detail-meta-text .dot {
  color: #e50914;
}

.oscar-detail-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.oscar-badge-pill {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 800;
}

.oscar-badge-pill.blue { background: #0088ff; color: #fff; }
.oscar-badge-pill.cyan { background: #00d2d3; color: #000; }
.oscar-badge-pill.dark { background: rgba(255,255,255,0.12); color: #e0e0e0; }
.oscar-badge-pill.red { background: #e50914; color: #fff; }

.oscar-detail-stats-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.oscar-stat-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.oscar-stat-pill.comments {
  background: rgba(229, 9, 20, 0.2);
  border-color: rgba(229, 9, 20, 0.4);
  color: #ff6b6b;
}

.oscar-detail-poster-wrap {
  flex: 0 0 115px;
  width: 115px;
  height: 165px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.oscar-detail-poster-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oscar-detail-body {
  padding: 16px;
}

.oscar-detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 12px;
}

.oscar-detail-section-title::before {
  content: '';
  width: 4px;
  height: 18px;
  background: #e50914;
  border-radius: 2px;
}

.oscar-actors-scroll {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 20px;
  scrollbar-width: none;
}
.oscar-actors-scroll::-webkit-scrollbar { display: none; }

.oscar-actor-circle-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  text-align: center;
}

.oscar-actor-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #e50914;
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.3);
}

.oscar-actor-name {
  color: #e0e0e6;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.oscar-actor-role {
  color: #888899;
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.oscar-detail-story-txt {
  color: #b0b0c0;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.oscar-season-pills-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.oscar-season-pills-row::-webkit-scrollbar { display: none; }

.oscar-season-pill {
  background: #18181c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  padding: 8px 18px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.oscar-season-pill.active {
  background: #e50914;
  color: #fff;
  border-color: #e50914;
}

.oscar-episodes-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .oscar-episodes-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .oscar-episodes-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.oscar-episode-card {
  background: #18181c;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.22s ease;
  position: relative;
}

.oscar-episode-card:hover {
  border-color: #e50914;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(229, 9, 20, 0.25);
}

.oscar-ep-thumb-wrap {
  position: relative;
  width: 100%;
  height: 100px;
}

.oscar-ep-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oscar-ep-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  opacity: 0.85;
  transition: all 0.2s ease;
}

.oscar-episode-card:hover .oscar-ep-play-overlay {
  opacity: 1;
  color: #e50914;
  background: rgba(0, 0, 0, 0.25);
}

.oscar-ep-info-box {
  padding: 8px 10px;
}

.oscar-ep-num-title {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  display: block;
}

.oscar-ep-duration {
  color: #888899;
  font-size: 0.74rem;
  margin-top: 2px;
  display: block;
}

.oscar-movie-watch-btn-wrap {
  margin-top: 10px;
  margin-bottom: 24px;
}

.oscar-movie-watch-btn {
  width: 100%;
  background: linear-gradient(135deg, #e50914 0%, #b20710 100%);
  color: #fff;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(229, 9, 20, 0.4);
  transition: all 0.2s ease;
}

.oscar-movie-watch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(229, 9, 20, 0.6);
}

/* ==========================================================================
   23. BIG SCREEN FULLSCREEN VIDEO PLAYER MODAL
   ========================================================================== */
.oscar-cinema-player-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: #000000;
  display: none;
  flex-direction: column;
}

.oscar-cinema-player-modal.active {
  display: flex;
}

.oscar-cinema-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.oscar-cinema-video-title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
}

.oscar-cinema-close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
}

.oscar-cinema-video-box {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.oscar-cinema-video-box video {
  width: 100%;
  height: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.oscar-cinema-bottom-controls {
  padding: 12px 18px;
  background: #111116;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oscar-cinema-servers-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.oscar-cinema-servers-row::-webkit-scrollbar { display: none; }

.oscar-cinema-server-chip {
  background: #202028;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  padding: 6px 14px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.oscar-cinema-server-chip.active {
  background: #e50914;
  color: #fff;
  border-color: #e50914;
}

/* ==========================================================================
   24. PIXEL-PERFECT 1:1 OSCAR TV APK STYLES (ALL VIEWS & PAGES)
   ========================================================================== */

/* Page Header Row (Catalog Views) */
.oscar-page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px 16px;
  background: transparent;
}

.oscar-page-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

.oscar-page-search-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-page-search-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.oscar-header-pill-btn {
  background: #1e1e26;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-header-pill-btn:hover {
  border-color: #e50914;
  color: #e50914;
}

.oscar-back-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-back-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Category Filter Bar (Row 1) */
.oscar-main-cats-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 16px 10px 16px;
  scrollbar-width: none;
}
.oscar-main-cats-scroll::-webkit-scrollbar { display: none; }

.oscar-cat-btn {
  background: #181820;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #a0a0b0;
  padding: 8px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.oscar-cat-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
}

.oscar-cat-btn.active {
  background: #e50914;
  color: #ffffff;
  border-color: #e50914;
}

/* Secondary Sub-Filters Bar (Row 2) */
.oscar-sub-filters-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 14px 16px;
  scrollbar-width: none;
}
.oscar-sub-filters-scroll::-webkit-scrollbar { display: none; }

.oscar-sub-filter-pill {
  background: #181820;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #8c8c9e;
  padding: 6px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.oscar-sub-filter-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.oscar-sub-filter-pill.active {
  background: #242430;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.oscar-sub-filter-pill.active .red-bullet {
  color: #e50914;
}

/* 3-Column Posters Grid (Screenshots 1 & 4) */
.oscar-posters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 16px 24px 16px;
}

@media (min-width: 768px) {
  .oscar-posters-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .oscar-posters-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }
}

.oscar-poster-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  user-select: none;
}

.oscar-poster-card:hover {
  transform: translateY(-4px);
}

.oscar-card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #181820;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.oscar-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badges on Posters */
.oscar-badge-top-left {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.oscar-badge-top-right {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.oscar-badge-red {
  background: #e50914;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.2px;
}

.oscar-badge-dark {
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.oscar-badge-dark i {
  color: #f1c40f;
  font-size: 0.6rem;
}

.oscar-badge-cyan {
  background: #00d2d3;
  color: #000000;
  font-size: 0.64rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 5px;
}

.oscar-badge-orange {
  background: #ff9f43;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 5px;
}

.oscar-card-info-box {
  padding: 8px 2px 4px 2px;
}

.oscar-card-title {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.oscar-card-meta {
  color: #8c8c9e;
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Movie Collections / Sagas List (Screenshot 2) */
.oscar-sagas-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px 32px 16px;
}

.oscar-saga-card {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  background: #12121c;
}

.oscar-saga-card:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 9, 20, 0.5);
  box-shadow: 0 10px 28px rgba(229, 9, 20, 0.25);
}

.oscar-saga-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65);
}

.oscar-saga-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 22, 0.15) 0%, rgba(14, 14, 22, 0.65) 50%, rgba(14, 14, 22, 0.92) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  text-align: center;
  z-index: 2;
}

.oscar-saga-mini-poster {
  width: 62px;
  height: 90px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85);
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.oscar-saga-title {
  color: #ffffff;
  font-size: 1.22rem;
  font-weight: 900;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  letter-spacing: -0.2px;
}

.oscar-saga-subtitle {
  color: #b0b0c5;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 2px 0 8px 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.oscar-saga-badges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.oscar-saga-pill {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #ffffff;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Channels Page (Screenshot 3) */
.oscar-featured-brands-row {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 16px 14px 16px;
  scrollbar-width: none;
}
.oscar-featured-brands-row::-webkit-scrollbar { display: none; }

.oscar-brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.oscar-brand-item:hover {
  transform: translateY(-2px);
}

.oscar-brand-logo-box {
  width: 76px;
  height: 52px;
  background: #181822;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.oscar-brand-title {
  color: #a0a0b0;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.oscar-channels-square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 16px 24px 16px;
}

@media (min-width: 768px) {
  .oscar-channels-square-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) {
  .oscar-channels-square-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.oscar-channel-square-card {
  background: #181822;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: center;
}

.oscar-channel-square-card:hover {
  border-color: #e50914;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.25);
}

.oscar-channel-square-logo {
  max-width: 70%;
  max-height: 48px;
  object-fit: contain;
  margin-bottom: 8px;
}

.oscar-channel-square-name {
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.oscar-channel-square-category {
  color: #777788;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 2px;
}

/* =========================================================
   BOTTOM SHEET MODALS (Screenshots 1 & 2 Match)
   ========================================================= */
.oscar-bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.oscar-bottom-sheet-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.oscar-bottom-sheet-dialog {
  background: #14141e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 12px 16px 32px 16px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.9);
  scrollbar-width: thin;
}

.oscar-bottom-sheet-backdrop.active .oscar-bottom-sheet-dialog {
  transform: translateY(0);
}

.oscar-sheet-drag-handle {
  width: 48px;
  height: 4px;
  background: #444455;
  border-radius: 3px;
  margin: 4px auto 14px auto;
}

/* =========================================================
   DEDICATED FULL CHANNEL DETAIL PAGE (1:1 Android APK Match)
   ========================================================= */
.oscar-channel-detail-page {
  background: #0d0d14;
  min-height: 100vh;
  padding-bottom: 60px;
}

.oscar-channel-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(13, 13, 20, 0.95);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oscar-channel-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oscar-channel-top-title {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
}

.oscar-channel-top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.oscar-channel-top-icon-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: transform 0.15s ease, color 0.15s ease;
}

.oscar-channel-top-icon-btn:hover {
  transform: scale(1.15);
  color: #e50914;
}

.oscar-channel-top-icon-btn:active {
  transform: scale(0.92);
}

/* Channel Hero Box (Screenshot 1 Match) */
.oscar-channel-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 16px 14px 16px;
}

.oscar-channel-hero-logo-box {
  width: 140px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.oscar-channel-hero-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

.oscar-channel-hero-name {
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 900;
  margin: 0 0 16px 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
  letter-spacing: 0.5px;
}

.oscar-channel-hero-badges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.oscar-channel-pill-badge {
  background: #181824;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d1d1e0;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Channel Frequency Card (تردد القناة - APK Screenshot Match) */
.oscar-channel-freq-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 22px auto 0 auto;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  direction: rtl;
  text-align: right;
  overflow: hidden;
}

.oscar-freq-quote-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.oscar-freq-card-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  text-align: right;
  margin: 0 0 14px 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
  letter-spacing: 0.3px;
}

.oscar-freq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oscar-freq-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #c4c4d4;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.oscar-freq-icon {
  font-size: 1.1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.oscar-freq-label {
  color: #9090a8;
  font-weight: 600;
}

.oscar-freq-value {
  color: #ffffff;
  font-weight: 700;
}

.oscar-channel-page-body {
  max-width: 650px;
  margin: 0 auto;
  padding: 0 16px 48px 16px;
}

/* Quality Server Red Cards (Screenshot 1 & 2 Match) */
.oscar-channel-servers-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oscar-server-quality-card {
  background: #e50914;
  border-radius: 18px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(229, 9, 20, 0.4);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.18s ease;
  user-select: none;
}

.oscar-server-quality-card:hover {
  transform: scale(1.02);
  filter: brightness(1.08);
}

.oscar-server-quality-card:active {
  transform: scale(0.98);
}

.oscar-server-card-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.oscar-server-play-icon {
  color: #ffffff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oscar-server-text-col {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.oscar-server-title {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.25;
  font-family: 'Outfit', 'Cairo', sans-serif;
}

.oscar-server-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 3px;
}

.oscar-server-badge-yellow {
  background: #facc15;
  color: #000000;
  font-size: 0.9rem;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-family: 'Outfit', sans-serif;
}

/* Related Channels Section (Screenshot 2 Match) */
.oscar-related-channels-section {
  margin-top: 10px;
}

.oscar-section-header-red {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.red-bar-indicator {
  width: 4px;
  height: 22px;
  background: #e50914;
  border-radius: 2px;
}

.oscar-section-title {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0;
}

/* Comments Button (Screenshot 2 Match) */
.oscar-channel-comments-btn {
  margin-top: 24px;
  border: 1.5px dashed rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  background: #14141e;
  padding: 16px;
  text-align: center;
  color: #d1d1e0;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.oscar-channel-comments-btn:hover {
  border-color: #e50914;
  background: #1a1a28;
  color: #ffffff;
}

/* =========================================================
   LEAGUE DETAIL PAGE (1:1 Android APK Match - 4 Screenshots)
   ========================================================= */
.oscar-league-detail-page {
  background: #0d0d14;
  min-height: 100vh;
  padding-bottom: 70px;
}

.oscar-league-page-container {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

.oscar-league-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(13, 13, 20, 0.95);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oscar-league-top-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
}

.oscar-league-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 16px 16px;
  background: radial-gradient(circle at 50% 30%, rgba(0, 230, 118, 0.12) 0%, rgba(13, 13, 20, 0) 70%);
}

.oscar-league-hero-logo-box {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.oscar-league-hero-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

.oscar-league-hero-name {
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 900;
  margin: 0 0 10px 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
  letter-spacing: -0.3px;
}

/* Season Selector (Screenshot 2 Match) */
.oscar-league-season-wrap {
  position: relative;
}

.oscar-league-season-pill {
  background: #18241e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 6px 18px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.oscar-league-season-pill:hover {
  background: #203228;
  border-color: #00e676;
}

.oscar-league-season-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #14141e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 6px;
  min-width: 130px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.8);
  z-index: 50;
  display: none;
}

.oscar-league-season-menu.active {
  display: block;
}

.oscar-season-opt {
  padding: 10px 16px;
  color: #d1d1e0;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.oscar-season-opt:hover, .oscar-season-opt.active {
  background: #e50914;
  color: #ffffff;
}

/* 4 League Tabs Bar (Screenshot 1 Match) */
.oscar-league-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 8px;
  margin-top: 14px;
}

.oscar-league-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #9494a8;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-league-tab-btn:hover {
  color: #ffffff;
}

.oscar-league-tab-btn.active {
  color: #ffffff;
  border-bottom-color: #e50914;
}

/* Subtab Panes */
.oscar-league-subtab-pane {
  display: none;
  padding: 16px;
}

.oscar-league-subtab-pane.active {
  display: block;
}

/* Matches by Rounds (Screenshot 1 Match) */
.oscar-round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 8px 4px;
  color: #a1a1aa;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: 'Cairo', sans-serif;
}

.oscar-round-num {
  color: #ffffff;
  font-weight: 800;
}

.oscar-round-date {
  color: #71717a;
  font-size: 0.85rem;
}

.oscar-round-match-card {
  background: #13131e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 16px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.oscar-round-match-card:hover {
  border-color: #e50914;
  transform: translateY(-2px);
}

.oscar-status-pill-ended {
  background: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  margin-top: 4px;
}

/* Standings Table (Screenshot 3 Match) */
.oscar-standings-table-wrap {
  background: #13131e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 12px 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}

.oscar-standings-header-row {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #71717a;
  font-size: 0.84rem;
  font-weight: 800;
}

.oscar-standings-row {
  display: flex;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 0.15s ease;
}

.oscar-standings-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.oscar-standings-row.is-leader .col-team-name {
  color: #facc15;
  font-weight: 900;
}

.oscar-standings-row.is-leader .col-rank {
  color: #facc15;
  font-weight: 900;
}

.col-rank { width: 30px; text-align: center; flex-shrink: 0; font-size: 0.9rem; }
.col-team { flex: 1; display: flex; align-items: center; gap: 8px; text-align: right; }
.col-team-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.col-team-name { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-stat { width: 34px; text-align: center; color: #a1a1aa; font-size: 0.88rem; flex-shrink: 0; }
.col-pts { width: 40px; text-align: center; color: #ffffff; font-weight: 900; font-size: 1rem; flex-shrink: 0; }

/* Top Scorers Tab */
.oscar-scorer-card {
  background: #13131e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.oscar-scorer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oscar-scorer-rank {
  font-size: 1.1rem;
  font-weight: 900;
  color: #e50914;
  width: 24px;
}

.oscar-scorer-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.oscar-scorer-info {
  display: flex;
  flex-direction: column;
}

.oscar-scorer-name {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
}

.oscar-scorer-team {
  color: #888899;
  font-size: 0.8rem;
}

.oscar-scorer-goals {
  color: #facc15;
  font-size: 1.1rem;
  font-weight: 900;
}

/* Videos List (Screenshot 4 Match) */
.oscar-league-videos-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oscar-video-horizontal-card {
  background: #13131e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 10px;
  display: flex;
  align-items: stretch;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.oscar-video-horizontal-card:hover {
  border-color: #e50914;
  transform: translateY(-2px);
}

.oscar-video-thumb-col {
  position: relative;
  width: 145px;
  min-width: 145px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.oscar-video-play-badge {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.4rem;
}

.oscar-video-duration-tag {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
}

.oscar-video-category-tag {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: #10b981;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
}

.oscar-video-category-tag.goal {
  background: #242430;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.oscar-video-info-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
  text-align: right;
  flex: 1;
}

.oscar-video-card-title {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Cairo', sans-serif;
}

.oscar-video-card-sub {
  color: #888899;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 3px;
}

.oscar-video-card-meta {
  color: #666677;
  font-size: 0.74rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* =========================================================
   MATCH DETAIL PAGE (1:1 Android APK Match - Screenshot Match)
   ========================================================= */
.oscar-match-detail-page {
  background: #080f0c;
  min-height: 100vh;
  padding-bottom: 70px;
}

.oscar-match-page-container {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

.oscar-match-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 100;
  direction: rtl;
}

.oscar-match-hero-stadium {
  background: radial-gradient(circle at 50% 0%, rgba(0, 230, 118, 0.22) 0%, rgba(8, 15, 12, 0) 75%);
  text-align: center;
  padding: 4px 16px 18px 16px;
}

.oscar-match-league-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #cddcd4;
  font-weight: 800;
  font-size: 1rem;
  font-family: 'Cairo', sans-serif;
  margin-bottom: 10px;
}

.oscar-match-round-tag {
  color: #798f84;
  font-size: 0.85rem;
  font-weight: 600;
}

.oscar-match-hero-teams-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 8px 0 14px 0;
}

.oscar-md-team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110px;
  text-align: center;
}

.oscar-md-logo-box {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.oscar-md-team-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

.oscar-md-team-name {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  font-family: 'Cairo', sans-serif;
  line-height: 1.3;
}

.oscar-md-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.oscar-md-score-dash {
  font-size: 2.1rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: 2px;
}

.oscar-md-time-txt {
  color: #a0b2aa;
  font-size: 0.95rem;
  font-weight: 700;
}

.oscar-md-countdown-pill {
  background: #3b1414;
  border: 1px solid rgba(229, 9, 20, 0.55);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 900;
  padding: 4px 16px;
  border-radius: 16px;
  font-family: 'Outfit', monospace;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}

.oscar-md-meta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #8c9f95;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 6px;
}

/* 5 Tabs Bar (Screenshot 1 Match) */
.oscar-match-tabs-bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  padding: 0 8px;
  scrollbar-width: none;
  direction: rtl;
}

.oscar-match-tabs-bar::-webkit-scrollbar {
  display: none;
}

.oscar-match-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #82968c;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  padding: 12px 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
}

.oscar-match-tab-btn:hover {
  color: #ffffff;
}

.oscar-match-tab-btn.active {
  color: #ffffff;
  border-bottom-color: #e50914;
}

.oscar-live-dot-red {
  color: #e50914;
  font-size: 0.75rem;
  margin-left: 4px;
}

/* Broadcasting Channels in Streaming Tab (Screenshot 1 Match) */
.oscar-streams-section-heading {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 900;
  margin: 16px 0 12px 0;
  text-align: right;
  font-family: 'Outfit', 'Cairo', sans-serif;
  direction: rtl;
}

.oscar-channel-stream-card {
  background: #151d18;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  direction: rtl;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 10px;
}

.oscar-channel-stream-card:hover {
  background: #1b2620;
  border-color: rgba(0, 230, 118, 0.3);
  transform: translateY(-2px);
}

.oscar-channel-stream-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: flex-start;
}

.oscar-channel-stream-logo-box {
  width: 58px;
  height: 38px;
  background: #0d120f;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.oscar-channel-stream-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.oscar-channel-stream-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
}

.oscar-stream-channel-name {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  font-family: 'Outfit', 'Cairo', sans-serif;
}

.oscar-stream-channel-commentator {
  color: #8c9c94;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oscar-stream-channel-commentator i {
  color: #6a7c72;
  font-size: 0.85rem;
}

.oscar-channel-chevron {
  color: #8c9c94;
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.oscar-channel-stream-card.open .oscar-channel-chevron {
  transform: rotate(180deg);
}

.oscar-channel-servers-dropdown {
  margin-top: -4px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #0f1512;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oscar-server-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #18221c;
  border-radius: 10px;
  cursor: pointer;
  direction: rtl;
  transition: background 0.2s ease;
}

.oscar-server-sub-item:hover {
  background: #223028;
}

/* Subtab Panes */
.oscar-match-subtab-pane {
  display: none;
  padding: 16px;
}

.oscar-match-subtab-pane.active {
  display: block;
}

/* Details Card (Exact Match from Screenshot) */
.oscar-match-detail-card {
  background: #13131e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 8px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.oscar-md-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oscar-md-info-row:last-child {
  border-bottom: none;
}

.oscar-md-info-lbl {
  color: #888899;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.oscar-md-info-lbl i {
  color: #71717a;
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
}

.oscar-md-info-val {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  font-family: 'Cairo', sans-serif;
  text-align: left;
}

/* Match Poll */
.oscar-match-poll-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.oscar-poll-btn {
  flex: 1;
  background: #1a1a28;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 6px;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.oscar-poll-btn:hover {
  border-color: #e50914;
  background: #202035;
}

/* Match Streams List */
.oscar-match-streams-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================================================
   MATCHES PAGE (1:1 Android APK Match - Screenshot 1)
   ========================================================= */
.oscar-matches-page {
  background: #0d0d14;
  min-height: 100vh;
  padding-bottom: 70px;
}

.oscar-matches-page-container {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

.oscar-matches-hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 14px 16px;
  background: radial-gradient(circle at 50% 35%, rgba(0, 230, 118, 0.16) 0%, rgba(13, 13, 20, 0) 70%);
  text-align: center;
  position: relative;
}

.oscar-matches-top-icons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.oscar-match-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-match-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.08);
}

.oscar-match-play-btn {
  background: #22c55e;
  border: none;
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.45);
  transition: all 0.2s ease;
  padding-left: 2px;
}

.oscar-match-play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.6);
}

.oscar-matches-trophy-art {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
}

.oscar-trophy-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 18px rgba(0, 230, 118, 0.35));
}

.oscar-matches-big-title {
  color: #ffffff;
  font-size: 1.65rem;
  font-weight: 900;
  margin: 0 0 14px 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
  letter-spacing: -0.3px;
}

.oscar-matches-date-pills {
  background: #181824;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.oscar-date-pill {
  background: transparent;
  border: none;
  color: #9494a8;
  padding: 6px 24px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-date-pill:hover {
  color: #ffffff;
}

.oscar-date-pill.active {
  background: #374151;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.oscar-matches-timezone-hint {
  color: #71717a;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.oscar-leagues-icons-row {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  width: 100%;
  padding: 4px 6px 14px 6px;
  scrollbar-width: none;
}
.oscar-leagues-icons-row::-webkit-scrollbar { display: none; }

.oscar-league-icon-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.oscar-league-icon-pill:hover {
  transform: translateY(-3px);
}

.oscar-league-icon-box {
  width: 60px;
  height: 60px;
  background: #161622;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.oscar-league-icon-pill.active .oscar-league-icon-box {
  border-color: #22c55e;
  background: #1c2620;
}

.oscar-league-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.oscar-league-icon-title {
  color: #a1a1aa;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  font-family: 'Cairo', sans-serif;
}

.oscar-matches-list-wrap {
  padding: 0 16px 32px 16px;
}

.oscar-league-group {
  margin-bottom: 24px;
}

.oscar-league-group-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0 4px;
}

.oscar-league-title-text {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 900;
  font-family: 'Outfit', 'Cairo', sans-serif;
}

.oscar-league-badge-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Match Card 1:1 Match (Screenshot 1) */
.oscar-league-match-card {
  background: #13131e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 20px 18px 14px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease;
  user-select: none;
}

.oscar-league-match-card:hover {
  border-color: rgba(229, 9, 20, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.oscar-league-match-card:active {
  transform: scale(0.98);
}

/* Team Column (Home on right, Away on left) */
.oscar-match-team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 32%;
  flex-shrink: 0;
  z-index: 2;
}

.oscar-match-team-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.oscar-match-team-name {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  margin-top: 8px;
  line-height: 1.25;
  font-family: 'Outfit', 'Cairo', sans-serif;
  word-break: break-word;
}

/* Center Status Column */
.oscar-match-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36%;
  text-align: center;
  z-index: 2;
}

.oscar-match-score-txt {
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 2px;
}

.oscar-match-time-txt {
  color: #a0a0b2;
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 4px;
  direction: rtl;
}

.oscar-match-countdown-txt {
  color: #ef4444;
  font-size: 0.95rem;
  font-weight: 800;
  margin-top: 2px;
  font-family: 'Outfit', monospace, sans-serif;
  letter-spacing: 0.5px;
}

.oscar-match-channel-bar {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #9494a8;
  font-size: 0.82rem;
  font-weight: 700;
}

.oscar-match-channel-bar i {
  font-size: 0.88rem;
  color: #e50914;
}
}

.oscar-match-status-badge {
  background: #23272e;
  color: #888899;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 10px;
}

.oscar-match-channel-pill {
  color: #777788;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   WORK DETAIL & EPISODE DETAIL PAGES (Screenshots 1, 2, 3, 4 Match)
   ========================================================================== */
.oscar-detail-page {
  background: #0f0f14;
  min-height: 100vh;
  padding-bottom: 90px;
  color: #ffffff;
}

.oscar-detail-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 15, 20, 0.92);
  backdrop-filter: blur(12px);
}

.oscar-detail-top-bar-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oscar-detail-top-btn {
  background: #181822;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-detail-top-btn:hover {
  background: #e50914;
  border-color: #e50914;
}

.oscar-episode-top-title {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}

/* Hero Backdrop */
.oscar-detail-hero-backdrop {
  position: relative;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  background: #121218;
}

.oscar-detail-backdrop-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: blur(8px);
}

.oscar-detail-backdrop-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,20,0.4) 0%, rgba(15,15,20,0.85) 65%, #0f0f14 100%);
}

.oscar-detail-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 30px 16px 20px 16px;
  gap: 16px;
}

.oscar-detail-left-info {
  flex: 1;
}

.oscar-detail-main-title {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 4px;
  line-height: 1.3;
}

.oscar-detail-sub-title {
  color: #888899;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.oscar-detail-meta-text {
  color: #a0a0b0;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oscar-detail-meta-text .dot {
  color: #e50914;
}

.oscar-detail-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.oscar-badge-pill {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.oscar-badge-pill.blue {
  background: #1e3799;
  color: #ffffff;
}

.oscar-badge-pill.cyan {
  background: #00b4d8;
  color: #ffffff;
}

.oscar-badge-pill.dark {
  background: #1e1e28;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c0c0d0;
}

.oscar-detail-stats-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.oscar-stat-pill {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oscar-detail-poster-wrap {
  width: 110px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
  border: 2px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.oscar-detail-poster-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Detail Body Sections */
.oscar-detail-body {
  padding: 16px;
}

.oscar-detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 12px;
  position: relative;
}

.oscar-detail-section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: #e50914;
  border-radius: 4px;
}

.oscar-detail-story-txt {
  color: #c0c0d0;
  font-size: 0.88rem;
  line-height: 1.7;
  background: #14141c;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Cast & Crew Avatars (Screenshot 1 Match) */
.oscar-actors-scroll {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 4px 12px 4px;
  scrollbar-width: none;
}
.oscar-actors-scroll::-webkit-scrollbar { display: none; }

.oscar-actor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  width: 85px;
}

.oscar-actor-avatar-wrap {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid #e50914;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.25);
  background: #181822;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oscar-actor-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oscar-actor-default-avatar {
  width: 100%;
  height: 100%;
  background: #576574;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 2.2rem;
}

.oscar-actor-name {
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  word-break: break-word;
}

.oscar-crew-role-badge {
  background: #e50914;
  color: #ffffff;
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 900;
  margin-top: 4px;
  display: inline-block;
}

/* Movie Watch Button */
.oscar-movie-watch-btn-wrap {
  margin: 16px 0 24px 0;
}

.oscar-movie-watch-btn {
  width: 100%;
  background: linear-gradient(135deg, #e50914 0%, #b80009 100%);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);
  transition: transform 0.2s ease;
}

.oscar-movie-watch-btn:hover {
  transform: translateY(-2px);
}

/* Episodes Section Header (Screenshots 1 & 2 Match) */
.oscar-episodes-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.oscar-episodes-count-badge {
  color: #888899;
  font-size: 0.82rem;
  font-weight: 700;
}

.oscar-episodes-sort-pill {
  background: #222530;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-episodes-sort-pill:hover {
  background: #2b303c;
  border-color: #e50914;
}

/* Episode Search Input Box */
.oscar-episode-search-wrap {
  position: relative;
  margin-bottom: 16px;
  width: 100%;
}

.oscar-episode-search-input {
  width: 100%;
  background: #15151e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 42px 12px 16px;
  color: #ffffff;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.oscar-episode-search-input:focus {
  border-color: #e50914;
}

.oscar-episode-search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #777788;
  font-size: 0.95rem;
}

/* Wide Episode Cards List (Screenshot 2 Match) */
.oscar-episodes-wide-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oscar-episode-wide-card {
  background: #171720;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-episode-wide-card:hover {
  border-color: #e50914;
  transform: translateY(-2px);
  background: #1a1a24;
}

.oscar-ep-qualities-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 52px;
}

.oscar-ep-quality-tag {
  border: 1px solid #d4ac0d;
  color: #f1c40f;
  background: #14141c;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  text-align: center;
}

.oscar-ep-info-col {
  flex: 1;
  margin: 0 16px;
  text-align: right;
}

.oscar-ep-title {
  color: #e50914;
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.oscar-ep-date {
  color: #888899;
  font-size: 0.78rem;
  font-weight: 600;
}

.oscar-ep-thumb-frame {
  width: 124px;
  height: 74px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background: #000000;
  flex-shrink: 0;
}

.oscar-ep-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oscar-ep-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.3rem;
  opacity: 0.9;
}

.oscar-ep-duration-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ==========================================================================
   DEDICATED EPISODE WATCH & DOWNLOAD PAGE (Screenshots 3 & 4 Match)
   ========================================================================== */
.oscar-ep-hero-preview-box {
  width: 100%;
  height: 220px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background: #000000;
  margin-bottom: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
}

.oscar-ep-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oscar-ep-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oscar-ep-hero-play-icon {
  font-size: 3.8rem;
  color: #ffffff;
  opacity: 0.9;
  text-shadow: 0 4px 16px rgba(0,0,0,0.8);
  transition: transform 0.2s ease;
}

.oscar-ep-hero-preview-box:hover .oscar-ep-hero-play-icon {
  transform: scale(1.1);
}

.oscar-ep-hero-footer-bar {
  position: absolute;
  bottom: 10px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  color: #cccccc;
  font-size: 0.85rem;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* Series Meta Card (Screenshot 4) */
.oscar-ep-series-meta-card {
  background: #171722;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.2s;
}

.oscar-ep-series-meta-card:hover {
  border-color: #e50914;
}

.oscar-ep-series-mini-poster {
  width: 44px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
}

.oscar-ep-series-title-txt {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 3px;
}

.oscar-ep-season-txt {
  color: #888899;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Watch Links Cards (Screenshot 4 Match) */
.oscar-watch-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oscar-watch-link-card {
  background: #e50914;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.oscar-watch-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.5);
}

.oscar-watch-quality-pill {
  background: #ffda79;
  color: #111111;
  font-weight: 900;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.85rem;
}

.oscar-watch-info {
  text-align: right;
  flex: 1;
  margin: 0 16px;
}

.oscar-watch-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
}

.oscar-watch-sub {
  font-size: 0.78rem;
  opacity: 0.9;
  margin-top: 2px;
}

.oscar-watch-play-icon {
  font-size: 1.4rem;
  color: #ffffff;
}

/* Download Links Cards (Screenshot 3 Match) */
.oscar-download-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oscar-download-link-card {
  background: #14141c;
  border: 1.5px solid #e50914;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #ffffff;
  transition: background 0.2s ease, transform 0.15s ease;
}

.oscar-download-link-card:hover {
  background: #1c1c26;
  transform: translateY(-2px);
}

.oscar-download-quality-pill {
  background: #ffda79;
  color: #111111;
  font-weight: 900;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.85rem;
}

.oscar-download-info {
  text-align: right;
  flex: 1;
  margin: 0 16px;
}

.oscar-download-name {
  font-size: 1rem;
  font-weight: 900;
  color: #ffffff;
}

.oscar-download-size {
  font-size: 0.8rem;
  color: #888899;
  margin-top: 2px;
}

.oscar-download-icon {
  font-size: 1.3rem;
  color: #ffffff;
}

/* Other Episodes Horizontal Scroll (Screenshot 3 Match) */
.oscar-other-episodes-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 14px;
  scrollbar-width: none;
}
.oscar-other-episodes-scroll::-webkit-scrollbar { display: none; }

.oscar-other-ep-card {
  flex: 0 0 170px;
  background: #171722;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-other-ep-card:hover {
  border-color: #e50914;
  transform: translateY(-3px);
}

.oscar-other-ep-thumb-box {
  width: 100%;
  height: 98px;
  position: relative;
  background: #000000;
}

.oscar-other-ep-thumb-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oscar-other-ep-title {
  padding: 8px 10px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
}

/* ==========================================================================
   MOVIE DETAIL CTA BUTTONS & STATS BAR (Screenshots 1, 2, 3 Match)
   ========================================================================== */
.oscar-top-bar-work-title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oscar-badge-pill.orange {
  background: #e67e22;
  color: #ffffff;
}

.oscar-badge-pill.gold {
  background: rgba(0, 0, 0, 0.7);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.oscar-detail-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  margin-top: 14px;
}

.oscar-cta-watch-btn {
  flex: 2;
  height: 50px;
  background: #e50914;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.4);
  transition: all 0.2s ease;
}

.oscar-cta-watch-btn:hover {
  transform: translateY(-2px);
  background: #f40612;
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.6);
}

.oscar-cta-download-btn {
  flex: 1;
  height: 50px;
  background: #181822;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-cta-download-btn:hover {
  background: #232330;
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* Quick Info / Stats Tabs Bar (Screenshot 1 Match) */
.oscar-detail-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #14141c;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 10px;
  margin: 18px 0 6px 0;
}

.oscar-stat-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #a0a0b0;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s;
}

.oscar-stat-tab-item i {
  font-size: 1.25rem;
  color: #ffffff;
}

.oscar-stat-tab-item:hover {
  color: #e50914;
}

.oscar-rec-subtitle {
  color: #888899;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: -6px;
  margin-bottom: 10px;
}

/* ==========================================================================
   BOTTOM SHEET SERVER MODALS (Screenshot 3 Match)
   ========================================================================== */
.oscar-bottom-sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.oscar-bottom-sheet-modal.active {
  display: flex;
}

.oscar-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
}

.oscar-sheet-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  background: #181820;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  padding: 14px 18px 34px 18px;
  max-height: 80vh;
  overflow-y: auto;
  animation: oscarSlideUp 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
}

@keyframes oscarSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.oscar-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.oscar-sheet-header::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.oscar-sheet-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0;
}

.oscar-sheet-close-btn {
  background: #232330;
  border: none;
  color: #ffffff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oscar-sheet-close-btn:hover {
  background: #e50914;
}

/* Server Cards with Floating Quality Tags (Screenshot 3 Match) */
.oscar-modal-servers-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.oscar-server-modal-card {
  position: relative;
  background: transparent;
  border: 1.5px solid rgba(212, 172, 13, 0.4);
  border-radius: 16px;
  padding: 12px 10px 10px 10px;
  margin-top: 10px;
}

.oscar-server-floating-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffda79;
  color: #111111;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 2px 14px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

.oscar-server-red-btn {
  width: 100%;
  background: #e50914;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
  transition: all 0.15s ease;
}

.oscar-server-red-btn:hover {
  background: #f40612;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(229, 9, 20, 0.5);
}

.oscar-server-red-info {
  text-align: right;
}

.oscar-server-red-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 2px;
}

.oscar-server-red-sub {
  font-size: 0.76rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.oscar-server-red-icon {
  font-size: 1.3rem;
  color: #ffffff;
}

/* ==========================================================================
   CHANNELS PAGE 1:1 PIXEL-PERFECT (Screenshots 2, 3, 4 Match)
   ========================================================================== */
.oscar-channels-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 4px 14px 4px;
  scrollbar-width: none;
  position: relative;
}
.oscar-channels-filter-row::-webkit-scrollbar { display: none; }

.oscar-channels-filter-pill {
  padding: 7px 18px;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 800;
  background: #191924;
  color: #a5a5b5;
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oscar-channels-filter-pill:hover {
  background: #222232;
  color: #ffffff;
}

.oscar-channels-filter-pill.active {
  background: #e50914 !important;
  color: #ffffff !important;
  font-weight: 900;
  border-color: #e50914;
  box-shadow: 0 4px 14px rgba(229, 9, 20, 0.4);
}

.oscar-channels-filter-pill.dropdown-pill {
  position: sticky;
  left: 0;
  z-index: 5;
  background: #14141e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cccccc;
  gap: 6px;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

/* Featured Brands / Networks Carousel (Screenshots 2 & 3) */
.oscar-channels-brands-scroll {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 4px 20px 4px;
  scrollbar-width: none;
}
.oscar-channels-brands-scroll::-webkit-scrollbar { display: none; }

.oscar-brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
  min-width: 72px;
}

.oscar-brand-item:hover {
  transform: translateY(-3px);
}

.oscar-brand-logo-box {
  width: 68px;
  height: 52px;
  background: #181824;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.oscar-brand-logo-box img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.oscar-brand-title {
  color: #dcdde1;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.oscar-brand-item:hover .oscar-brand-title,
.oscar-brand-item.active .oscar-brand-title {
  color: #e50914;
  font-weight: 900;
}

.oscar-brand-item.active .oscar-brand-logo-box {
  border-color: #e50914;
  box-shadow: 0 0 12px rgba(229, 9, 20, 0.4);
  background: #201a24;
}

/* 3-Column Square Channels Grid (Screenshots 2, 3, 4 Match) */
.oscar-channels-square-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
  padding: 8px 2px 90px 2px;
}

@media (min-width: 600px) {
  .oscar-channels-square-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 16px;
  }
}

.oscar-channel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.oscar-channel-item:hover {
  transform: translateY(-4px);
}

.oscar-channel-card-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #171723;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.oscar-channel-item:hover .oscar-channel-card-box {
  border-color: rgba(229, 9, 20, 0.6);
  background: #1d1d2c;
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.25);
}

.oscar-channel-logo-img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.oscar-channel-name {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
  line-height: 1.3;
}

.oscar-channel-category {
  color: #8395a7;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 2px;
  display: block;
}

/* ==========================================================================
   CLEAN FULLSCREEN CINEMA PLAYER (No Bottom Strip)
   ========================================================================== */
.oscar-cinema-player-modal {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 100000;
  display: none;
  flex-direction: column;
}

.oscar-cinema-player-modal.active {
  display: flex;
}

.oscar-cinema-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.oscar-cinema-video-title {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

.oscar-cinema-close-btn {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.oscar-cinema-close-btn:hover {
  background: #e50914;
  border-color: #e50914;
}

.oscar-cinema-video-box {
  width: 100%;
  height: 100%;
  flex: 1;
  background: #000000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oscar-cinema-video-box video {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  object-fit: contain;
  background: #000000;
}

/* ==========================================================================
   UNIVERSAL FILTER BOTTOM SHEET MODAL (Screenshot 1 Match)
   ========================================================================== */
.oscar-filter-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  z-index: 99999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.oscar-filter-modal-backdrop.active {
  display: flex;
  opacity: 1;
}

.oscar-filter-modal-dialog {
  width: 100%;
  max-width: 520px;
  background: #14141e;
  border-radius: 24px 24px 0 0;
  padding: 20px 22px 34px 22px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.oscar-filter-modal-backdrop.active .oscar-filter-modal-dialog {
  transform: translateY(0);
}

.oscar-filter-modal-header {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.oscar-filter-modal-title {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0;
}

.oscar-filter-options-list {
  overflow-y: auto;
  padding-top: 8px;
  scrollbar-width: thin;
}

.oscar-filter-option-item,
.oscar-filter-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.oscar-filter-option-item:hover,
.oscar-filter-option-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.oscar-filter-option-item span,
.oscar-filter-option-label {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
}

.oscar-filter-option-item.selected span,
.oscar-filter-option-row.active .oscar-filter-option-label {
  color: #e50914;
  font-weight: 900;
}

.oscar-filter-option-item .check-icon,
.oscar-filter-check-icon {
  color: #e50914;
  font-size: 1.2rem;
  display: none;
}

.oscar-filter-option-item.selected .check-icon,
.oscar-filter-option-row.active .oscar-filter-check-icon {
  display: block;
}

/* =========================================================
   MATCHES PAGE (1:1 Android APK Match - Screenshot 1 & 2)
   ========================================================= */
.oscar-matches-page {
  background: #0b0f0d;
  min-height: 100vh;
  padding-bottom: 75px;
}

.oscar-matches-page-container {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

.oscar-matches-hero-header {
  position: relative;
  background: radial-gradient(circle at 50% 15%, rgba(0, 230, 118, 0.22) 0%, rgba(11, 15, 13, 0) 75%);
  padding: 12px 16px 16px 16px;
  text-align: center;
}

.oscar-matches-top-icons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  direction: ltr;
  padding: 0 4px 10px 4px;
}

.oscar-match-icon-btn {
  background: transparent;
  border: none;
  color: #c4c4d4;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.oscar-match-icon-btn:hover {
  color: #ffffff;
}

.oscar-match-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #00e676;
  border: none;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.5);
  transition: transform 0.2s ease;
}

.oscar-match-play-btn:hover {
  transform: scale(1.08);
}

.oscar-matches-trophy-art {
  width: 90px;
  height: 90px;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oscar-trophy-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 18px rgba(0, 230, 118, 0.35));
}

.oscar-matches-big-title {
  color: #ffffff;
  font-size: 1.85rem;
  font-weight: 900;
  margin: 4px 0 14px 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
  letter-spacing: -0.5px;
}

.oscar-matches-date-pills {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #141d18;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  padding: 3px;
  gap: 4px;
  margin-bottom: 8px;
}

.oscar-date-pill {
  background: transparent;
  border: none;
  color: #94a39b;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 8px 24px;
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.oscar-date-pill:hover {
  color: #ffffff;
}

.oscar-date-pill.active {
  background: #33443b;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.oscar-matches-timezone-hint {
  color: #667770;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 4px 0 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Horizontal Leagues Icons Row */
.oscar-leagues-icons-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 4px;
  scrollbar-width: none;
}

.oscar-leagues-icons-row::-webkit-scrollbar {
  display: none;
}

.oscar-league-icon-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-width: 68px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  user-select: none;
}

.oscar-league-icon-pill:hover {
  transform: translateY(-2px);
}

.oscar-league-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #141a16;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: all 0.2s ease;
}

.oscar-league-icon-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.oscar-league-icon-title {
  color: #8c9c94;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.oscar-league-icon-pill.active .oscar-league-icon-box {
  border-color: #e50914;
  box-shadow: 0 0 14px rgba(229, 9, 20, 0.45);
  background: #241416;
}

.oscar-league-icon-pill.active .oscar-league-icon-title {
  color: #ffffff;
  font-weight: 900;
}

/* Matches List and Groups */
.oscar-matches-list-wrap {
  padding: 0 14px 24px 14px;
}

.oscar-league-group {
  margin-bottom: 22px;
}

.oscar-league-group-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  direction: rtl;
  text-align: right;
}

.oscar-league-title-text {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  font-family: 'Outfit', 'Cairo', sans-serif;
}

.oscar-league-badge-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Match Card (Screenshot 1 & 2 Match 1:1) */
.oscar-league-match-card {
  position: relative;
  background: #131715;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  direction: rtl;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.oscar-league-match-card:hover {
  border-color: rgba(229, 9, 20, 0.6);
  transform: translateY(-2px);
}

.oscar-match-team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  text-align: center;
  gap: 6px;
  flex-shrink: 0;
}

.oscar-match-team-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.oscar-match-team-name {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  font-family: 'Cairo', sans-serif;
}

.oscar-match-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
}

.oscar-match-score-txt {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
}

.oscar-match-time-txt {
  color: #889990;
  font-size: 0.82rem;
  font-weight: 700;
}

.oscar-match-countdown-txt {
  color: #ff4757;
  font-size: 0.8rem;
  font-weight: 900;
  font-family: 'Outfit', monospace;
}

.oscar-league-match-card .oscar-status-pill-ended {
  background: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
}

.oscar-match-channel-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #6d7d76;
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 4px;
}

/* =========================================================
   FOOTBALL VIDEOS PAGE (1:1 Android APK Match - Screenshot Match)
   ========================================================= */
.oscar-football-videos-page {
  background: #0b0f0d;
  min-height: 100vh;
  padding-bottom: 75px;
}

.oscar-videos-page-container {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

.oscar-videos-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: transparent;
  direction: rtl;
}

.oscar-videos-nav-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.35rem;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.oscar-videos-nav-btn:hover {
  color: #00e676;
  transform: scale(1.1);
}

.oscar-videos-hero-header {
  text-align: center;
  padding: 6px 16px 14px 16px;
  background: radial-gradient(circle at 50% 15%, rgba(0, 230, 118, 0.2) 0%, rgba(11, 15, 13, 0) 75%);
}

.oscar-videos-hero-play-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #00e676;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 12px auto;
  box-shadow: 0 0 20px rgba(0, 230, 118, 0.55);
}

.oscar-videos-hero-title {
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 900;
  margin: 0;
  font-family: 'Outfit', 'Cairo', sans-serif;
  letter-spacing: -0.3px;
}

/* Category Filter Pills (Horizontal Scroll) */
.oscar-videos-filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 16px 16px 16px;
  scrollbar-width: none;
  direction: rtl;
}

.oscar-videos-filters-row::-webkit-scrollbar {
  display: none;
}

.oscar-video-pill {
  background: #151d18;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8c9c94;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.oscar-video-pill:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.oscar-video-pill.active {
  background: #33443b;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.oscar-football-videos-list {
  padding: 0 14px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}