/* ============================================================
   Flixawy Theme — flixawy.css
   تحويل كامل لـ Tailwind CSS v4 إلى CSS مخصص
   اتجاه: RTL | خط: Tajawal
   ============================================================ */

/* === 1. CSS Variables (Design Tokens) === */
:root {
  --fx-amber:       #F59E0B;
  --fx-amber-light: #FCD34D;
  --fx-amber-dark:  #D97706;
  --fx-slate-50:    #F8FAFC;
  --fx-slate-100:   #F1F5F9;
  --fx-slate-200:   #E2E8F0;
  --fx-slate-300:   #CBD5E1;
  --fx-slate-400:   #94A3B8;
  --fx-slate-500:   #64748B;
  --fx-slate-600:   #475569;
  --fx-slate-700:   #334155;
  --fx-slate-800:   #1E293B;
  --fx-slate-900:   #0F172A;
  --fx-slate-950:   #020617;
  --fx-emerald:     #059669;
  --fx-green:       #16A34A;
  --fx-cyan:        #0891B2;
  --fx-blue:        #2563EB;
  --fx-rose:        #E11D48;
  --fx-purple:      #7C3AED;
  --fx-white:       #FFFFFF;
  --fx-font:        'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --fx-radius-sm:   6px;
  --fx-radius:      12px;
  --fx-radius-lg:   16px;
  --fx-radius-xl:   24px;
  --fx-shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --fx-shadow:      0 4px 16px rgba(0,0,0,.10);
  --fx-shadow-lg:   0 8px 32px rgba(0,0,0,.16);
  --fx-header-h:    120px;
  --fx-topbar-h:    40px;
}

/* === 2. Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body.fx-body {
  font-family: var(--fx-font);
  background-color: var(--fx-slate-50);
  color: var(--fx-slate-900);
  direction: rtl;
  text-align: right;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--fx-font); cursor: pointer; }
ul, ol { list-style: none; }

/* === 3. Layout Helpers === */
.fx-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.fx-main {
  flex: 1;
  padding-top: 24px;
  padding-bottom: 48px;
  min-height: calc(100vh - var(--fx-header-h));
}

.fx-header-spacer { height: var(--fx-header-h); }

/* === 4. Topbar === */
.fx-topbar {
  background: linear-gradient(135deg, var(--fx-slate-900), var(--fx-slate-800));
  color: var(--fx-white);
  font-size: 12px;
  height: var(--fx-topbar-h);
  position: sticky;
  top: 0;
  z-index: 50;
}
.fx-topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fx-topbar__content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.fx-topbar__dot--green {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fx-emerald);
  box-shadow: 0 0 0 2px rgba(5,150,105,.3);
  flex-shrink: 0;
  animation: pulse 2s infinite;
}
.fx-topbar__text { font-size: 12px; color: var(--fx-slate-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-topbar__link { color: var(--fx-amber); font-weight: 700; font-size: 12px; flex-shrink: 0; }
.fx-topbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fx-topbar__badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}
.fx-topbar__badge--cyan  { background: var(--fx-cyan);  color: #fff; }
.fx-topbar__badge--amber { background: var(--fx-amber); color: var(--fx-slate-950); }

/* === 5. Header === */
.fx-header {
  background: var(--fx-white);
  border-bottom: 1px solid var(--fx-slate-200);
  box-shadow: var(--fx-shadow-sm);
  position: sticky;
  top: var(--fx-topbar-h);
  z-index: 40;
}
.fx-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.fx-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
.fx-logo__icon { font-size: 28px; }
.fx-logo__name { font-size: 20px; font-weight: 900; color: var(--fx-slate-900); display: block; line-height: 1; }
.fx-logo__tagline { font-size: 11px; color: var(--fx-slate-500); display: block; }

.fx-search-form { flex: 1; max-width: 480px; }
.fx-search-form__wrap {
  display: flex;
  align-items: center;
  background: var(--fx-slate-100);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.fx-search-form__wrap:focus-within {
  border-color: var(--fx-amber);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.fx-search-form__icon {
  width: 18px; height: 18px;
  color: var(--fx-slate-400);
  flex-shrink: 0;
  margin: 0 10px;
}
.fx-search-form__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--fx-font);
  font-size: 14px;
  padding: 10px 0;
  color: var(--fx-slate-900);
  outline: none;
  direction: rtl;
}
.fx-search-form__btn {
  background: var(--fx-amber);
  color: var(--fx-slate-950);
  border: none;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--fx-font);
  cursor: pointer;
  transition: background .2s;
}
.fx-search-form__btn:hover { background: var(--fx-amber-dark); }

.fx-header__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.fx-country-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fx-country-select, .fx-select {
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-300);
  border-radius: var(--fx-radius-sm);
  padding: 7px 10px;
  font-family: var(--fx-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--fx-slate-900);
  cursor: pointer;
  outline: none;
  direction: rtl;
}
.fx-country-select:focus, .fx-select:focus { border-color: var(--fx-amber); }
.fx-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--fx-slate-100);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-sm);
}
.fx-menu-toggle span { display: block; width: 20px; height: 2px; background: var(--fx-slate-700); border-radius: 2px; transition: .3s; }

/* === 6. Navigation === */
.fx-nav {
  background: var(--fx-white);
  border-top: 1px solid var(--fx-slate-100);
}
.fx-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  overflow-x: auto;
}
.fx-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  white-space: nowrap;
}
.fx-nav__item { flex-shrink: 0; }
.fx-nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--fx-radius-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--fx-slate-600);
  transition: background .15s, color .15s;
}
.fx-nav__link:hover { background: var(--fx-slate-100); color: var(--fx-slate-900); }
.fx-nav__item--active .fx-nav__link { background: var(--fx-amber); color: var(--fx-slate-950); }
.fx-nav__badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.fx-nav__badge--green { background: rgba(5,150,105,.15); color: var(--fx-emerald); }
.fx-nav__badge--rose  { background: rgba(225,29,72,.15);  color: var(--fx-rose); }

/* === 7. Buttons === */
.fx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--fx-radius);
  font-family: var(--fx-font);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .1s;
  text-decoration: none;
  white-space: nowrap;
}
.fx-btn:hover { transform: translateY(-1px); }
.fx-btn:active { transform: translateY(0); }
.fx-btn--primary  { background: var(--fx-amber); color: var(--fx-slate-950); }
.fx-btn--primary:hover { background: var(--fx-amber-dark); }
.fx-btn--white    { background: rgba(255,255,255,.95); color: var(--fx-slate-900); border: 1px solid rgba(255,255,255,.5); }
.fx-btn--outline  { background: transparent; border: 2px solid var(--fx-slate-300); color: var(--fx-slate-700); }
.fx-btn--outline:hover { border-color: var(--fx-amber); color: var(--fx-amber-dark); }
.fx-btn--ghost    { background: transparent; color: var(--fx-slate-500); border: 1px solid var(--fx-slate-200); }
.fx-btn--blue     { background: var(--fx-blue); color: #fff; }
.fx-btn--rose     { background: var(--fx-rose); color: #fff; }
.fx-btn--wp       { background: #1D73B4; color: #fff; }
.fx-btn--trailer  { background: rgba(255,255,255,.9); color: var(--fx-slate-900); font-size: 13px; padding: 8px 16px; border-radius: var(--fx-radius); }
.fx-btn--lg       { padding: 14px 28px; font-size: 15px; }
.fx-btn--sm       { padding: 7px 14px; font-size: 13px; }
.fx-btn--watch    { background: var(--fx-emerald); color: #fff; padding: 8px 16px; font-size: 13px; }
.fx-btn--ticket   { background: var(--fx-amber); color: var(--fx-slate-950); padding: 8px 16px; font-size: 13px; }
.fx-icon { width: 16px; height: 16px; flex-shrink: 0; }
.fx-icon--xs { width: 12px; height: 12px; }
.fx-icon--globe { width: 16px; height: 16px; color: var(--fx-amber); }

/* === 8. Badges === */
.fx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.fx-badge--amber       { background: var(--fx-amber); color: var(--fx-slate-950); }
.fx-badge--amber-solid { background: var(--fx-amber); color: var(--fx-slate-950); }
.fx-badge--green       { background: rgba(22,163,74,.15); color: var(--fx-green); border: 1px solid rgba(22,163,74,.3); }
.fx-badge--cyan        { background: rgba(8,145,178,.15); color: var(--fx-cyan); border: 1px solid rgba(8,145,178,.3); }
.fx-badge--blue        { background: rgba(37,99,235,.15); color: var(--fx-blue); border: 1px solid rgba(37,99,235,.3); }
.fx-badge--rose        { background: rgba(225,29,72,.15); color: var(--fx-rose); border: 1px solid rgba(225,29,72,.3); }
.fx-badge--slate       { background: var(--fx-slate-100); color: var(--fx-slate-600); border: 1px solid var(--fx-slate-200); }
.fx-badge--gray        { background: var(--fx-slate-100); color: var(--fx-slate-600); border: 1px solid var(--fx-slate-200); }
.fx-badge--dark        { background: rgba(0,0,0,.6); color: rgba(255,221,100,.9); }
.fx-badge--glass       { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); backdrop-filter: blur(4px); }
.fx-badge--fire        { gap: 5px; }
.fx-badge--star        { gap: 4px; }
.fx-badge--sm          { font-size: 11px; padding: 2px 8px; }
.fx-badge--xs          { font-size: 10px; padding: 2px 6px; }
.fx-badge--age         { background: var(--fx-slate-800); color: var(--fx-amber-light); }
.fx-badge--type        { background: rgba(5,150,105,.12); color: var(--fx-emerald); border: 1px solid rgba(5,150,105,.25); font-size: 11px; }
.fx-badge--format      { background: rgba(225,29,72,.12); color: var(--fx-rose); border: 1px solid rgba(225,29,72,.25); }
.fx-badge--price       { background: var(--fx-slate-100); color: var(--fx-slate-700); border: 1px solid var(--fx-slate-200); }
.fx-badge--time        { background: var(--fx-slate-100); color: var(--fx-green); border: 1px solid var(--fx-slate-200); font-family: monospace; }
.fx-badge--pulse { animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

/* === 9. Platform Logo === */
.fx-platform-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .5px;
  flex-shrink: 0;
}
.fx-platform-logo--sm { width: 24px; height: 24px; font-size: 8px; }
.fx-platform-logo--md { width: 32px; height: 32px; font-size: 10px; }
.fx-platform-logo--lg { width: 40px; height: 40px; font-size: 11px; }
.fx-platform-logo--xl { width: 56px; height: 56px; font-size: 14px; border-radius: 10px; }

/* === 10. Hero (Movie/Series) === */
.fx-hero, .fx-movie-hero {
  border-radius: var(--fx-radius-xl);
  overflow: hidden;
  border: 1px solid var(--fx-slate-200);
  box-shadow: var(--fx-shadow);
  margin-bottom: 32px;
}
.fx-hero__media, .fx-movie-hero__backdrop {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  min-height: 380px;
  background: var(--fx-slate-900);
  overflow: hidden;
}
.fx-hero__backdrop, .fx-movie-hero__backdrop-img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .65;
}
.fx-hero__gradient, .fx-movie-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2,6,23,.95) 0%, rgba(2,6,23,.55) 50%, transparent 100%);
}
.fx-hero__gradient--right {
  background: linear-gradient(to left, rgba(2,6,23,.8) 0%, transparent 60%);
}
.fx-hero__content, .fx-movie-hero__content {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  padding: 24px 32px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
}
.fx-hero__badges, .fx-movie-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fx-hero__title, .fx-movie-hero__title {
  font-size: clamp(24px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 8px;
}
.fx-hero__synopsis, .fx-movie-hero__subtitle {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 600px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fx-hero__actions, .fx-movie-hero__ratings { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fx-movie-hero__poster { width: 160px; aspect-ratio: 2/3; flex-shrink: 0; }
.fx-movie-hero__poster-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--fx-radius-lg); border: 3px solid #fff; box-shadow: var(--fx-shadow-lg); }
.fx-movie-hero__meta { flex: 1; }
.fx-movie-hero__genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fx-movie-hero__trailer-btn { position: absolute; top: 16px; left: 16px; z-index: 10; }

/* === 11. Ratings === */
.fx-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--fx-radius);
  font-size: 13px;
  font-weight: 700;
}
.fx-rating-badge--imdb  { background: rgba(255,255,255,.95); color: var(--fx-slate-900); box-shadow: var(--fx-shadow-sm); }
.fx-rating-badge--flixawy { background: var(--fx-amber); color: var(--fx-slate-950); }
.fx-rating-badge--tmdb  { background: rgba(1,180,228,.15); color: #01B4E4; border: 1px solid rgba(1,180,228,.3); }

/* === 12. Sections === */
.fx-section { margin-bottom: 40px; }
.fx-section__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.fx-section-title, .fx-section__title {
  font-size: 20px;
  font-weight: 900;
  color: var(--fx-slate-900);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.fx-section__dot { display: inline-block; width: 10px; height: 24px; border-radius: 5px; flex-shrink: 0; }
.fx-section__dot--amber  { background: var(--fx-amber); }
.fx-section__dot--cyan   { background: var(--fx-cyan); }
.fx-section__dot--green  { background: var(--fx-green); }
.fx-section__dot--emerald{ background: var(--fx-emerald); }
.fx-section__dot--purple { background: var(--fx-purple); }
.fx-section__dot--blue   { background: var(--fx-blue); }
.fx-section__dot--rose   { background: var(--fx-rose); }
.fx-section__dot--gray   { background: var(--fx-slate-400); }
.fx-section__subtitle { font-size: 13px; color: var(--fx-slate-500); margin-top: 2px; }
.fx-section__more {
  font-size: 13px; font-weight: 700;
  color: var(--fx-amber-dark);
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; white-space: nowrap;
}
.fx-section__more:hover { color: var(--fx-amber); }
.fx-section__more--cyan   { color: var(--fx-cyan); }
.fx-section__more--purple { color: var(--fx-purple); }
.fx-section__more--emerald{ color: var(--fx-emerald); }

/* === 13. Movie Card === */
.fx-movies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 640px)  { .fx-movies-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .fx-movies-grid { grid-template-columns: repeat(4, 1fr); } }

.fx-movie-card {
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-lg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.fx-movie-card:hover { border-color: var(--fx-amber); box-shadow: var(--fx-shadow); }
.fx-movie-card__link { display: block; text-decoration: none; color: inherit; }
.fx-movie-card__poster-wrap {
  position: relative;
  aspect-ratio: 2/3;
  background: var(--fx-slate-100);
  overflow: hidden;
}
.fx-movie-card__poster-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.fx-movie-card:hover .fx-movie-card__poster-img { transform: scale(1.04); }
.fx-movie-card__poster-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: var(--fx-slate-300);
}
.fx-movie-card__badges-top {
  position: absolute; top: 8px; right: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.fx-movie-card__cinema-badge { position: absolute; bottom: 8px; right: 8px; }
.fx-movie-card__trend-badge  { position: absolute; bottom: 8px; left: 8px; }
.fx-movie-card__hover-overlay {
  position: absolute; inset: 0;
  background: rgba(2,6,23,.75);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}
.fx-movie-card:hover .fx-movie-card__hover-overlay { opacity: 1; }
.fx-movie-card__hover-content {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; font-size: 13px; font-weight: 700; text-align: center;
}
.fx-movie-card__play-icon { width: 40px; height: 40px; color: var(--fx-amber); }
.fx-movie-card__body { padding: 12px; }
.fx-movie-card__meta-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fx-movie-card__runtime { font-size: 11px; color: var(--fx-slate-500); }
.fx-movie-card__title { font-size: 14px; font-weight: 800; color: var(--fx-slate-900); margin-bottom: 3px; line-height: 1.3; }
.fx-movie-card__orig-title { font-size: 11px; color: var(--fx-slate-400); font-family: monospace; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-movie-card__genres { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.fx-movie-card__platforms { display: flex; gap: 4px; align-items: center; margin-bottom: 6px; }
.fx-movie-card__platforms-more { font-size: 11px; color: var(--fx-slate-400); font-weight: 700; }
.fx-movie-card__flixawy-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fx-amber-dark); }

/* === 14. Tabs Bar === */
.fx-tabs-bar {
  background: rgba(248,250,252,.95);
  border-bottom: 1px solid var(--fx-slate-200);
  border-top: 1px solid var(--fx-slate-200);
  padding: 0 16px;
  position: sticky;
  top: calc(var(--fx-header-h));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow-x: auto;
  backdrop-filter: blur(8px);
  box-shadow: var(--fx-shadow-sm);
}
.fx-tabs-bar__tabs { display: flex; gap: 4px; padding: 8px 0; }
.fx-tab {
  padding: 7px 16px;
  border-radius: var(--fx-radius-sm);
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--fx-slate-600);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  font-family: var(--fx-font);
}
.fx-tab:hover  { background: var(--fx-slate-200); color: var(--fx-slate-900); }
.fx-tab--active{ background: var(--fx-amber); color: var(--fx-slate-950); }
.fx-tabs-bar__country { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 13px; }

/* === 15. Tab Panels === */
.fx-tabs-content { padding: 24px; background: var(--fx-white); border: 1px solid var(--fx-slate-200); border-top: none; border-radius: 0 0 var(--fx-radius-xl) var(--fx-radius-xl); }
.fx-tab-panel { display: block; }
.fx-tab-panel[hidden] { display: none; }

/* === 16. Synopsis & Story === */
.fx-synopsis-banner {
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--fx-radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}
.fx-synopsis-banner__label { font-size: 12px; font-weight: 700; color: var(--fx-amber-dark); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.fx-synopsis-banner__text  { font-size: 15px; color: var(--fx-slate-800); line-height: 1.7; font-weight: 500; }
.fx-story-body {
  background: var(--fx-slate-50);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-lg);
  padding: 24px;
  font-size: 15px;
  color: var(--fx-slate-700);
  line-height: 1.8;
}
.fx-bio-body { font-size: 15px; color: var(--fx-slate-700); line-height: 1.8; padding: 24px; background: var(--fx-slate-50); border-radius: var(--fx-radius-lg); border: 1px solid var(--fx-slate-200); }

/* === 17. Specs Grid === */
.fx-specs-section, .fx-story-section { margin-bottom: 28px; }
.fx-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  padding: 20px;
  background: var(--fx-slate-50);
  border-radius: var(--fx-radius-lg);
  border: 1px solid var(--fx-slate-200);
}
@media (min-width: 768px) { .fx-specs-grid { grid-template-columns: repeat(4, 1fr); } }
.fx-spec-item { font-size: 13px; }
.fx-spec-item__label { color: var(--fx-slate-500); display: block; margin-bottom: 3px; }
.fx-spec-item__val { font-weight: 800; font-size: 14px; color: var(--fx-slate-900); }
.fx-spec-item__sub { font-family: monospace; font-size: 11px; color: var(--fx-slate-400); display: block; }

/* === 18. Cast Grid === */
.fx-cast-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px)  { .fx-cast-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .fx-cast-grid { grid-template-columns: repeat(4, 1fr); } }
.fx-cast-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--fx-radius-lg);
  border: 1px solid var(--fx-slate-200);
  background: var(--fx-white);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.fx-cast-card:hover { border-color: var(--fx-amber); box-shadow: var(--fx-shadow-sm); }
.fx-cast-card__photo {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--fx-slate-200);
  flex-shrink: 0;
}
.fx-cast-card__photo--placeholder { display: flex; align-items: center; justify-content: center; background: var(--fx-slate-100); font-size: 20px; }
.fx-cast-card__info { min-width: 0; }
.fx-cast-card__name { font-size: 13px; font-weight: 800; color: var(--fx-slate-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-cast-card:hover .fx-cast-card__name { color: var(--fx-amber-dark); }
.fx-cast-card__name-en { font-size: 11px; color: var(--fx-slate-400); font-family: monospace; }
.fx-cast-card__role { font-size: 12px; color: var(--fx-amber-dark); font-weight: 600; }

/* === 19. Platforms Grid === */
.fx-platforms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .fx-platforms-grid { grid-template-columns: repeat(2, 1fr); } }
.fx-platform-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-lg);
  background: var(--fx-white);
  transition: border-color .2s, box-shadow .2s;
}
.fx-platform-card:hover { border-color: var(--fx-emerald); box-shadow: var(--fx-shadow-sm); }
.fx-platform-card__info { display: flex; align-items: center; gap: 14px; }
.fx-platform-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.fx-platform-card__name { font-weight: 900; font-size: 15px; color: var(--fx-slate-900); }
.fx-platform-card__quality { font-size: 12px; color: var(--fx-slate-500); }

/* === 20. Cinema Cards === */
.fx-cinemas-list { display: flex; flex-direction: column; gap: 12px; }
.fx-cinema-card {
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-lg);
  padding: 16px 20px;
  transition: border-color .2s;
}
.fx-cinema-card:hover { border-color: var(--fx-rose); }
.fx-cinema-card__header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fx-cinema-card__name { font-size: 17px; font-weight: 900; color: var(--fx-slate-900); }
.fx-cinema-card__meta { font-size: 13px; color: var(--fx-slate-500); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.fx-cinema-card__actions { display: flex; align-items: center; gap: 8px; }
.fx-cinema-card__times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--fx-slate-100); }
.fx-cinema-card__times-label { font-size: 12px; color: var(--fx-slate-500); font-weight: 600; }

/* === 21. Info Banners === */
.fx-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--fx-radius-lg);
  margin-bottom: 20px;
}
.fx-info-banner--green  { background: rgba(5,150,105,.07); border: 1px solid rgba(5,150,105,.25); }
.fx-info-banner--rose   { background: rgba(225,29,72,.07); border: 1px solid rgba(225,29,72,.25); }
.fx-info-banner--blue   { background: rgba(37,99,235,.07); border: 1px solid rgba(37,99,235,.25); }
.fx-info-banner--amber  { background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.25); }
.fx-info-banner--lg     { padding: 20px 24px; }
.fx-info-banner__icon   { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.fx-info-banner__title  { font-size: 15px; font-weight: 800; color: var(--fx-slate-900); display: block; margin-bottom: 4px; }
.fx-info-banner p       { font-size: 13px; color: var(--fx-slate-600); line-height: 1.6; }

/* === 22. Review Section === */
.fx-review-section { padding: 24px; background: var(--fx-slate-50); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-xl); }
.fx-review-section__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.fx-review-body { font-size: 15px; color: var(--fx-slate-700); line-height: 1.8; white-space: pre-line; margin-bottom: 24px; }
.fx-pros-cons { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 20px; border-top: 1px solid var(--fx-slate-200); }
@media (min-width: 640px) { .fx-pros-cons { grid-template-columns: 1fr 1fr; } }
.fx-pros-cons__col { padding: 16px; border-radius: var(--fx-radius-lg); }
.fx-pros-cons__col--pros { background: rgba(5,150,105,.06); border: 1px solid rgba(5,150,105,.2); }
.fx-pros-cons__col--cons { background: rgba(225,29,72,.06); border: 1px solid rgba(225,29,72,.2); }
.fx-pros-cons__col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.fx-pros-cons__col--pros h4 { color: var(--fx-emerald); }
.fx-pros-cons__col--cons h4 { color: var(--fx-rose); }
.fx-pros-cons__col ul { display: flex; flex-direction: column; gap: 8px; }
.fx-pros-cons__col li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--fx-slate-700); }
.fx-pros-cons__icon--pro { color: var(--fx-emerald); font-weight: 900; }
.fx-pros-cons__icon--con { color: var(--fx-rose); font-weight: 900; }

/* === 23. Schema Section === */
.fx-schema-section { margin-top: 20px; }
.fx-schema-code-wrap { border-radius: var(--fx-radius-lg); overflow: hidden; border: 1px solid var(--fx-slate-800); }
.fx-schema-code {
  background: var(--fx-slate-900);
  padding: 20px;
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: 12px;
  color: #4ADE80;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  white-space: pre;
  max-height: 400px;
  overflow-y: auto;
}
.fx-schema-preview { margin-top: 16px; padding: 16px; background: var(--fx-slate-50); border-radius: var(--fx-radius-lg); border: 1px solid var(--fx-slate-200); }
.fx-schema-preview h4 { font-size: 13px; font-weight: 700; color: var(--fx-slate-700); margin-bottom: 12px; }
.fx-schema-preview__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .fx-schema-preview__grid { grid-template-columns: repeat(3, 1fr); } }
.fx-schema-preview__grid div { font-size: 12px; color: var(--fx-slate-600); }
.fx-schema-preview__grid strong { color: var(--fx-slate-900); font-weight: 700; display: block; }

/* === 24. Comments === */
.fx-comments-section { margin-top: 28px; }
.fx-comments-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.fx-comment-item { background: var(--fx-slate-50); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-lg); padding: 14px 16px; }
.fx-comment-item__header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fx-comment-item__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--fx-amber);
  color: var(--fx-slate-950);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; flex-shrink: 0;
}
.fx-comment-item__author { font-weight: 700; font-size: 14px; color: var(--fx-slate-900); }
.fx-comment-item__date { font-size: 12px; color: var(--fx-slate-400); margin-right: 8px; }
.fx-comment-item__text { font-size: 14px; color: var(--fx-slate-700); line-height: 1.6; }
.fx-comment-form-wrap { background: var(--fx-white); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-lg); padding: 20px; }
.fx-comment-form__title { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--fx-slate-900); }
.fx-comment-form__row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.fx-input, .fx-textarea {
  width: 100%;
  border: 1px solid var(--fx-slate-300);
  border-radius: var(--fx-radius-sm);
  padding: 10px 12px;
  font-family: var(--fx-font);
  font-size: 14px;
  color: var(--fx-slate-900);
  background: var(--fx-white);
  outline: none;
  transition: border-color .2s;
  direction: rtl;
}
.fx-input:focus, .fx-textarea:focus { border-color: var(--fx-amber); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.fx-textarea { resize: vertical; min-height: 80px; margin-bottom: 10px; }
.fx-input--sm { width: auto; padding: 7px 10px; }
.fx-rating-input { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; flex-shrink: 0; }

/* === 25. Series Archive Grid === */
.fx-series-archive-grid { display: flex; flex-direction: column; gap: 16px; }
.fx-series-archive-card {
  display: flex;
  gap: 16px;
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-lg);
  padding: 16px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.fx-series-archive-card:hover { border-color: var(--fx-cyan); box-shadow: var(--fx-shadow-sm); }
.fx-series-archive-card__media { flex-shrink: 0; }
.fx-series-archive-card__img {
  width: 100px; height: 150px;
  border-radius: var(--fx-radius);
  object-fit: cover;
}
.fx-series-archive-card__img--placeholder {
  width: 100px; height: 150px;
  background: var(--fx-slate-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; border-radius: var(--fx-radius);
}
.fx-series-archive-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.fx-series-archive-card__meta-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fx-series-archive-card__title { font-size: 17px; font-weight: 800; color: var(--fx-slate-900); line-height: 1.3; margin-bottom: 3px; }
.fx-series-archive-card:hover .fx-series-archive-card__title { color: var(--fx-cyan); }
.fx-series-archive-card__orig { font-size: 12px; color: var(--fx-slate-400); font-family: monospace; margin-bottom: 6px; }
.fx-series-archive-card__genres { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.fx-series-archive-card__story { font-size: 13px; color: var(--fx-slate-600); line-height: 1.6; margin-bottom: 10px; }
.fx-series-archive-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fx-series-archive-card__ratings { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-series-archive-card__info { display: flex; align-items: center; gap: 8px; }
.fx-series-archive-card__platforms { display: flex; gap: 4px; }
.fx-series-archive-card__cta { font-size: 12px; font-weight: 700; color: var(--fx-cyan); }

/* === 26. Actors Grid === */
.fx-actors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 640px)  { .fx-actors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .fx-actors-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.fx-actor-card {
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-xl);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.fx-actor-card:hover { border-color: var(--fx-amber); box-shadow: var(--fx-shadow); }
.fx-actor-card__photo-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--fx-slate-100); }
.fx-actor-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.fx-actor-card:hover .fx-actor-card__photo { transform: scale(1.04); }
.fx-actor-card__photo--placeholder { display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--fx-slate-300); }
.fx-actor-card__hover-overlay {
  position: absolute; inset: 0;
  background: rgba(2,6,23,.7);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s;
  color: #fff; font-size: 13px; font-weight: 700;
}
.fx-actor-card:hover .fx-actor-card__hover-overlay { opacity: 1; }
.fx-actor-card__info { padding: 14px; }
.fx-actor-card__name { font-size: 14px; font-weight: 800; color: var(--fx-slate-900); margin-bottom: 2px; }
.fx-actor-card__name-en { font-size: 11px; color: var(--fx-slate-400); font-family: monospace; margin-bottom: 4px; }
.fx-actor-card__place { font-size: 12px; color: var(--fx-slate-500); margin-bottom: 10px; }
.fx-actor-card__stats { display: flex; gap: 10px; margin-bottom: 8px; }
.fx-actor-stat { text-align: center; }
.fx-actor-stat__val { font-size: 16px; font-weight: 900; color: var(--fx-amber-dark); display: block; }
.fx-actor-stat__label { font-size: 10px; color: var(--fx-slate-500); }
.fx-actor-card__known-for { font-size: 12px; color: var(--fx-slate-500); }
.fx-actor-card__known-for span { font-weight: 700; color: var(--fx-slate-700); }

/* === 27. Actor Profile Page === */
.fx-actor-profile {
  display: flex;
  gap: 32px;
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-xl);
  padding: 32px;
  margin-bottom: 32px;
}
@media (max-width: 640px) { .fx-actor-profile { flex-direction: column; align-items: center; } }
.fx-actor-profile__photo-col { flex-shrink: 0; }
.fx-actor-profile__photo {
  width: 200px; aspect-ratio: 2/3;
  border-radius: var(--fx-radius-xl);
  object-fit: cover;
  border: 3px solid var(--fx-slate-200);
  box-shadow: var(--fx-shadow);
}
.fx-actor-profile__photo--placeholder { width: 200px; aspect-ratio: 2/3; background: var(--fx-slate-100); display: flex; align-items: center; justify-content: center; font-size: 64px; border-radius: var(--fx-radius-xl); }
.fx-actor-profile__name { font-size: 28px; font-weight: 900; margin-bottom: 6px; }
.fx-actor-profile__name-en { font-size: 16px; color: var(--fx-slate-400); font-family: monospace; margin-bottom: 16px; }
.fx-actor-profile__details { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.fx-actor-detail { display: flex; gap: 10px; font-size: 14px; color: var(--fx-slate-600); }
.fx-actor-detail span { font-weight: 600; }
.fx-actor-detail strong { color: var(--fx-slate-900); }
.fx-actor-profile__stats { display: flex; gap: 16px; }
.fx-actor-stat-card { text-align: center; padding: 12px 20px; background: var(--fx-slate-50); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius); }
.fx-actor-stat-card__val { font-size: 24px; font-weight: 900; color: var(--fx-amber-dark); display: block; }
.fx-actor-stat-card__label { font-size: 12px; color: var(--fx-slate-500); }

/* === 28. Awards Grid === */
.fx-awards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .fx-awards-grid { grid-template-columns: repeat(3, 1fr); } }
.fx-award-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--fx-slate-50); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-lg); }
.fx-award-item__icon { font-size: 20px; flex-shrink: 0; }
.fx-award-item__text { font-size: 13px; font-weight: 600; color: var(--fx-slate-700); }

/* === 29. Filmography Table === */
.fx-filmography-table { border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-lg); overflow: hidden; }
.fx-filmography-table__header {
  display: grid;
  grid-template-columns: 60px 1fr 120px 80px 80px;
  gap: 10px;
  padding: 10px 16px;
  background: var(--fx-slate-100);
  font-size: 12px; font-weight: 700; color: var(--fx-slate-500);
}
.fx-filmography-table__row {
  display: grid;
  grid-template-columns: 60px 1fr 120px 80px 80px;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--fx-slate-100);
  text-decoration: none;
  font-size: 13px;
  color: var(--fx-slate-700);
  transition: background .15s;
}
.fx-filmography-table__row:hover { background: var(--fx-slate-50); color: var(--fx-amber-dark); }
@media (max-width: 640px) {
  .fx-filmography-table__header, .fx-filmography-table__row { grid-template-columns: 55px 1fr 70px; }
  .fx-filmography-table__header span:nth-child(n+4),
  .fx-filmography-table__row span:nth-child(n+4) { display: none; }
}

/* === 30. Seasons Accordion === */
.fx-seasons-section { margin-bottom: 32px; }
.fx-seasons-accordion { border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-xl); overflow: hidden; }
.fx-season-item { border-top: 1px solid var(--fx-slate-200); }
.fx-season-item:first-child { border-top: none; }
.fx-season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: var(--fx-white);
  border: none;
  cursor: pointer;
  font-family: var(--fx-font);
  transition: background .15s;
}
.fx-season-header:hover { background: var(--fx-slate-50); }
.fx-season-header--open { background: var(--fx-slate-50); }
.fx-season-header__info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-season-header__num { font-family: monospace; font-size: 13px; font-weight: 900; color: var(--fx-amber-dark); background: rgba(245,158,11,.1); padding: 2px 8px; border-radius: 4px; }
.fx-season-header__title { font-size: 15px; font-weight: 700; color: var(--fx-slate-900); }
.fx-season-header__arrow { width: 20px; height: 20px; color: var(--fx-slate-400); transition: transform .25s; flex-shrink: 0; }
.fx-season-header--open .fx-season-header__arrow { transform: rotate(180deg); }
.fx-episodes-list { display: none; }
.fx-episodes-list--open { display: block; }
.fx-episode-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid var(--fx-slate-100);
  font-size: 13px;
}
.fx-episode-item--empty { color: var(--fx-slate-400); font-style: italic; }
.fx-episode-item__num { font-family: monospace; font-weight: 700; color: var(--fx-slate-500); font-size: 12px; }
.fx-episode-item__titles strong { font-size: 14px; color: var(--fx-slate-900); display: block; }
.fx-episode-item__titles span { font-size: 11px; color: var(--fx-slate-400); font-family: monospace; }
.fx-episode-item__syn { font-size: 12px; color: var(--fx-slate-500); margin-top: 3px; }
.fx-episode-item__meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

/* === 31. Sources Section === */
.fx-sources-section { margin-top: 24px; padding: 16px 20px; background: var(--fx-slate-50); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-lg); }
.fx-section-title--sm { font-size: 13px; font-weight: 700; color: var(--fx-slate-700); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.fx-sources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 768px) { .fx-sources-grid { grid-template-columns: repeat(6, 1fr); } }
.fx-source-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius);
  text-decoration: none;
  transition: border-color .2s;
}
.fx-source-card:hover { border-color: var(--fx-amber); }
.fx-source-card__name { font-size: 11px; font-weight: 700; color: var(--fx-slate-900); display: block; }
.fx-source-card__domain { font-size: 10px; color: var(--fx-slate-400); font-family: monospace; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === 32. Filters Bar === */
.fx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-lg);
  margin-bottom: 20px;
}
.fx-filters__search {
  flex: 1;
  min-width: 240px;
  position: relative;
  display: flex;
  align-items: center;
}
.fx-filters__search-icon {
  position: absolute;
  right: 12px;
  width: 16px; height: 16px;
  color: var(--fx-slate-400);
  pointer-events: none;
}
.fx-filters__input {
  width: 100%;
  border: 1px solid var(--fx-slate-300);
  border-radius: var(--fx-radius-sm);
  padding: 10px 36px 10px 12px;
  font-family: var(--fx-font);
  font-size: 14px;
  color: var(--fx-slate-900);
  background: var(--fx-slate-50);
  outline: none;
  transition: border-color .2s;
  direction: rtl;
}
.fx-filters__input:focus { border-color: var(--fx-amber); background: var(--fx-white); }
.fx-filters__group { display: flex; flex-direction: column; gap: 8px; }
.fx-filters__genres { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-filters__sort { display: flex; align-items: center; gap: 8px; }
.fx-genre-pill {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  background: var(--fx-slate-100);
  color: var(--fx-slate-600);
  border: 1px solid var(--fx-slate-200);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
}
.fx-genre-pill:hover { background: var(--fx-slate-200); color: var(--fx-slate-900); }
.fx-genre-pill--active { background: var(--fx-amber); color: var(--fx-slate-950); border-color: var(--fx-amber); }
.fx-genre-pill__count { font-size: 11px; opacity: .7; margin-right: 4px; }
.fx-filters__results-info { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fx-slate-600); margin-bottom: 16px; }
.fx-label { font-size: 13px; font-weight: 600; color: var(--fx-slate-600); flex-shrink: 0; }

/* === 33. Archive Headers === */
.fx-archive { padding-bottom: 40px; }
.fx-archive__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.fx-archive__title { font-size: 24px; font-weight: 900; color: var(--fx-slate-900); }
.fx-archive__count { font-size: 16px; font-weight: 400; color: var(--fx-slate-400); }
.fx-archive__subtitle { font-size: 14px; color: var(--fx-slate-500); margin-top: 4px; }
.fx-archive__country { display: flex; align-items: center; gap: 8px; }

/* === 34. Pagination === */
.fx-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.fx-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  border-radius: var(--fx-radius);
  font-size: 14px; font-weight: 700;
  border: 1px solid var(--fx-slate-200);
  background: var(--fx-white);
  color: var(--fx-slate-700);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.fx-pagination .page-numbers:hover { background: var(--fx-slate-100); }
.fx-pagination .page-numbers.current { background: var(--fx-amber); color: var(--fx-slate-950); border-color: var(--fx-amber); }
.fx-pagination .prev, .fx-pagination .next { font-size: 13px; }

/* === 35. Empty States === */
.fx-empty-state { padding: 32px; text-align: center; background: var(--fx-slate-50); border: 1px dashed var(--fx-slate-300); border-radius: var(--fx-radius-xl); color: var(--fx-slate-500); font-size: 14px; }
.fx-empty-archive { text-align: center; padding: 64px 16px; }
.fx-empty-archive__icon { font-size: 64px; margin-bottom: 16px; }
.fx-empty-archive__title { font-size: 22px; font-weight: 800; color: var(--fx-slate-800); margin-bottom: 8px; }
.fx-empty-archive__desc { font-size: 14px; color: var(--fx-slate-500); margin-bottom: 20px; }

/* === 36. AdSense Slots === */
.fx-ad-slot {
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-lg);
  background: var(--fx-white);
  padding: 12px;
  text-align: center;
  margin: 24px 0;
}
.fx-ad-slot__label { font-size: 11px; color: var(--fx-slate-400); display: block; margin-bottom: 6px; font-family: monospace; }
.fx-ad-slot__placeholder { background: var(--fx-slate-50); border-radius: var(--fx-radius); min-height: 90px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--fx-slate-300); font-size: 12px; color: var(--fx-slate-500); }
.fx-ad-slot--leaderboard .fx-ad-slot__placeholder { min-height: 90px; }
.fx-ad-slot--rectangle  .fx-ad-slot__placeholder { min-height: 250px; }
.fx-ad-slot--large      .fx-ad-slot__placeholder { min-height: 280px; }

/* === 37. Pillars (Home) === */
.fx-pillars { margin-bottom: 40px; }
.fx-pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 768px) { .fx-pillars__grid { grid-template-columns: repeat(4, 1fr); } }
.fx-pillar {
  display: block;
  padding: 20px;
  border-radius: var(--fx-radius-xl);
  border: 1px solid var(--fx-slate-200);
  background: var(--fx-white);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.fx-pillar:hover { box-shadow: var(--fx-shadow); }
.fx-pillar--green:hover  { border-color: var(--fx-green); }
.fx-pillar--rose:hover   { border-color: var(--fx-rose); }
.fx-pillar--amber:hover  { border-color: var(--fx-amber); }
.fx-pillar--cyan:hover   { border-color: var(--fx-cyan); }
.fx-pillar__icon { font-size: 28px; margin-bottom: 10px; }
.fx-pillar__title { font-size: 15px; font-weight: 800; color: var(--fx-slate-900); margin-bottom: 5px; }
.fx-pillar__desc { font-size: 12px; color: var(--fx-slate-500); line-height: 1.5; }

/* === 38. Scraper Banner === */
.fx-scraper-banner {
  background: linear-gradient(135deg, rgba(245,158,11,.06) 0%, var(--fx-white) 50%, rgba(245,158,11,.04) 100%);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--fx-radius-xl);
  padding: 28px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.fx-scraper-banner__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--fx-amber-dark); background: rgba(245,158,11,.12); padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; }
.fx-scraper-banner__title { font-size: 20px; font-weight: 900; color: var(--fx-slate-900); margin-bottom: 8px; }
.fx-scraper-banner__desc { font-size: 13px; color: var(--fx-slate-600); line-height: 1.6; max-width: 600px; margin-bottom: 14px; }
.fx-scraper-banner__sources { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-source-pill { display: flex; align-items: center; gap: 6px; background: var(--fx-white); border: 1px solid var(--fx-slate-200); padding: 5px 10px; border-radius: var(--fx-radius); font-size: 12px; font-weight: 700; color: var(--fx-slate-800); }

/* === 39. Article Cards === */
.fx-articles-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .fx-articles-grid { grid-template-columns: repeat(3, 1fr); } }
.fx-article-card { display: flex; flex-direction: column; background: var(--fx-white); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-xl); overflow: hidden; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.fx-article-card:hover { border-color: var(--fx-amber); box-shadow: var(--fx-shadow); }
.fx-article-card__image { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--fx-slate-100); }
.fx-article-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.fx-article-card:hover .fx-article-card__img { transform: scale(1.04); }
.fx-article-card__cat-badge { position: absolute; bottom: 8px; right: 8px; }
.fx-article-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.fx-article-card__title { font-size: 15px; font-weight: 800; color: var(--fx-slate-900); margin-bottom: 8px; line-height: 1.4; }
.fx-article-card:hover .fx-article-card__title { color: var(--fx-amber-dark); }
.fx-article-card__excerpt { font-size: 13px; color: var(--fx-slate-500); line-height: 1.6; flex: 1; margin-bottom: 12px; }
.fx-article-card__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--fx-slate-400); align-items: center; margin-top: auto; }
.fx-article-card__author { font-weight: 600; }
.fx-article-card__date { display: flex; align-items: center; gap: 4px; }

/* === 40. Platforms Preview (Home) === */
.fx-platforms-preview { margin-bottom: 40px; }
.fx-platforms-row { margin-bottom: 16px; }
.fx-platforms-row__label { font-size: 13px; font-weight: 700; color: var(--fx-slate-600); margin-bottom: 10px; }
.fx-platforms-row__list { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-platform-pill { display: flex; align-items: center; gap: 8px; background: var(--fx-white); border: 1px solid var(--fx-slate-200); padding: 8px 14px; border-radius: var(--fx-radius); text-decoration: none; font-size: 13px; font-weight: 700; color: var(--fx-slate-800); transition: border-color .2s; }
.fx-platform-pill:hover { border-color: var(--fx-amber); }

/* === 41. Page Headers === */
.fx-page-header { display: flex; align-items: center; gap: 20px; padding: 28px 32px; background: var(--fx-white); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-xl); margin-bottom: 24px; }
.fx-page-header__icon { font-size: 48px; flex-shrink: 0; }
.fx-page-header__title { font-size: 26px; font-weight: 900; color: var(--fx-slate-900); margin-bottom: 6px; }
.fx-page-header__subtitle { font-size: 14px; color: var(--fx-slate-500); line-height: 1.6; }

/* === 42. Platforms Full Cards (Where to Watch) === */
.fx-platforms-section { margin-bottom: 40px; }
.fx-platforms-full-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px)  { .fx-platforms-full-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fx-platforms-full-grid { grid-template-columns: repeat(3, 1fr); } }
.fx-platform-full-card {
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-xl);
  padding: 20px;
  display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s;
  border-top: 4px solid var(--pl-color, var(--fx-amber));
}
.fx-platform-full-card:hover { box-shadow: var(--fx-shadow); }
.fx-platform-full-card__header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.fx-platform-full-card__title-wrap { }
.fx-platform-full-card__name { font-size: 17px; font-weight: 900; color: var(--fx-slate-900); margin-bottom: 5px; }
.fx-platform-full-card__tagline { font-size: 13px; color: var(--fx-slate-600); line-height: 1.6; margin-bottom: 14px; }
.fx-platform-full-card__features { flex: 1; list-style: none; margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.fx-platform-full-card__features li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--fx-slate-700); }
.fx-platform-full-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fx-slate-100); }
.fx-platform-full-card__countries { display: flex; flex-wrap: wrap; gap: 4px; }

/* === 43. Cinema Chain Cards === */
.fx-cinemas-full-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .fx-cinemas-full-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fx-cinemas-full-grid { grid-template-columns: repeat(3, 1fr); } }
.fx-cinema-chain-card {
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-xl);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 4px solid var(--chain-color, var(--fx-amber));
}
.fx-cinema-chain-card__header { display: flex; align-items: center; gap: 14px; }
.fx-cinema-chain-card__logo {
  width: 52px; height: 52px;
  border-radius: var(--fx-radius);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; color: #fff;
  flex-shrink: 0;
}
.fx-cinema-chain-card__name { font-size: 16px; font-weight: 900; color: var(--fx-slate-900); margin-bottom: 2px; }
.fx-cinema-chain-card__country { font-size: 12px; color: var(--fx-slate-500); }
.fx-cinema-chain-card__branches { margin-right: auto; text-align: center; }
.fx-cinema-chain-card__branches-num { font-size: 24px; font-weight: 900; color: var(--chain-color, var(--fx-amber)); display: block; }
.fx-cinema-chain-card__branches-label { font-size: 11px; color: var(--fx-slate-500); }
.fx-cinema-chain-card__formats { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-cinema-chain-card__branch { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--fx-slate-600); }
.fx-cinema-chain-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--fx-slate-100); margin-top: auto; }
.fx-cinema-chain-card__price { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--fx-slate-700); }

/* === 44. Breadcrumb === */
.fx-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--fx-slate-500); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--fx-slate-200); }
.fx-breadcrumb__link { color: var(--fx-slate-600); font-weight: 600; transition: color .15s; }
.fx-breadcrumb__link:hover { color: var(--fx-amber-dark); }
.fx-breadcrumb__sep { color: var(--fx-slate-300); }
.fx-breadcrumb__current { color: var(--fx-slate-900); font-weight: 700; }

/* === 45. Footer === */
.fx-footer { background: var(--fx-slate-900); color: var(--fx-slate-400); margin-top: 48px; }
.fx-footer__compliance { background: rgba(5,150,105,.08); border-top: 1px solid rgba(5,150,105,.2); padding: 10px 0; }
.fx-footer__compliance-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.fx-footer__compliance-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fx-compliance-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.fx-compliance-badge--green  { background: rgba(5,150,105,.2); color: #4ADE80; }
.fx-compliance-badge--blue   { background: rgba(37,99,235,.2); color: #93C5FD; }
.fx-compliance-badge--amber  { background: rgba(245,158,11,.2); color: var(--fx-amber); }
.fx-compliance-badge--purple { background: rgba(124,58,237,.2); color: #C4B5FD; }
.fx-compliance-badge--gray   { background: rgba(100,116,139,.2); color: var(--fx-slate-300); }
.fx-compliance-badge--xs     { font-size: 10px; padding: 2px 8px; }
.fx-footer__main { max-width: 1280px; margin: 0 auto; padding: 40px 16px 28px; }
.fx-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .fx-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.fx-footer__col-title { font-size: 13px; font-weight: 700; color: var(--fx-slate-200); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.fx-footer__col-dot { display: inline-block; width: 8px; height: 18px; border-radius: 4px; }
.fx-footer__col-dot--amber { background: var(--fx-amber); }
.fx-footer__col-dot--blue  { background: var(--fx-blue); }
.fx-footer__col-dot--gray  { background: var(--fx-slate-500); }
.fx-footer__links { display: flex; flex-direction: column; gap: 8px; }
.fx-footer__links a { font-size: 13px; color: var(--fx-slate-400); transition: color .15s; }
.fx-footer__links a:hover { color: var(--fx-amber); }
.fx-footer__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 14px; }
.fx-footer__logo-icon { font-size: 28px; }
.fx-footer__logo-name { font-size: 20px; font-weight: 900; color: var(--fx-white); display: block; }
.fx-footer__logo-tagline { font-size: 11px; color: var(--fx-slate-500); display: block; }
.fx-footer__mission { font-size: 13px; color: var(--fx-slate-400); line-height: 1.7; margin-bottom: 16px; }
.fx-footer__social { display: flex; gap: 10px; margin-bottom: 16px; }
.fx-social-btn {
  width: 36px; height: 36px;
  border-radius: var(--fx-radius);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--fx-slate-400);
  transition: background .15s, color .15s;
}
.fx-social-btn:hover { background: var(--fx-amber); color: var(--fx-slate-950); }
.fx-social-btn .fx-icon { width: 16px; height: 16px; }
.fx-footer__extra { margin-top: 16px; }
.fx-footer__extra-title { font-size: 12px; font-weight: 700; color: var(--fx-slate-400); margin-bottom: 8px; }
.fx-footer__country { }
.fx-footer__ad { max-width: 1280px; margin: 0 auto; padding: 0 16px 24px; }
.fx-footer__ad-inner { }
.fx-footer__bottom { border-top: 1px solid rgba(255,255,255,.07); padding: 16px 0; }
.fx-footer__bottom-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fx-footer__copyright { font-size: 12px; color: var(--fx-slate-500); }
.fx-footer__copyright strong { color: var(--fx-slate-300); }
.fx-footer__badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* === 46. Modal === */
.fx-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fx-modal[hidden] { display: none; }
.fx-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.65); backdrop-filter: blur(4px); }
.fx-modal__container {
  position: relative; z-index: 1;
  background: var(--fx-white);
  border-radius: var(--fx-radius-xl);
  border: 1px solid var(--fx-slate-200);
  width: 100%; max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--fx-shadow-lg);
}
.fx-modal__header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--fx-slate-200); }
.fx-modal__title { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.fx-modal__subtitle { font-size: 13px; color: var(--fx-slate-500); }
.fx-modal__close { width: 36px; height: 36px; border-radius: 50%; background: var(--fx-slate-100); border: 1px solid var(--fx-slate-200); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.fx-modal__close:hover { background: var(--fx-slate-200); }
.fx-modal__body { padding: 24px 28px; }
.fx-wp-files-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
@media (min-width: 640px) { .fx-wp-files-grid { grid-template-columns: repeat(2, 1fr); } }
.fx-wp-file-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius); background: var(--fx-slate-50); }
.fx-wp-file-card__icon { font-size: 20px; flex-shrink: 0; }
.fx-wp-file-card__name { font-size: 12px; font-family: monospace; font-weight: 700; color: var(--fx-slate-900); display: block; margin-bottom: 3px; }
.fx-wp-file-card__desc { font-size: 12px; color: var(--fx-slate-500); line-height: 1.5; margin-bottom: 5px; }
.fx-wp-modal__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding-top: 12px; border-top: 1px solid var(--fx-slate-200); }

/* === 47. Series Card (Home) === */
.fx-series-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .fx-series-grid { grid-template-columns: repeat(2, 1fr); } }
.fx-series-card {
  display: flex; gap: 16px;
  background: var(--fx-white);
  border: 1px solid var(--fx-slate-200);
  border-radius: var(--fx-radius-xl);
  padding: 16px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.fx-series-card:hover { border-color: var(--fx-cyan); box-shadow: var(--fx-shadow-sm); }
.fx-series-card__poster { width: 100px; aspect-ratio: 2/3; border-radius: var(--fx-radius); object-fit: cover; flex-shrink: 0; }
.fx-series-card__poster--placeholder { width: 100px; aspect-ratio: 2/3; background: var(--fx-slate-100); display: flex; align-items: center; justify-content: center; font-size: 32px; border-radius: var(--fx-radius); }
.fx-series-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.fx-series-card__meta-top { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.fx-series-card__title { font-size: 16px; font-weight: 800; color: var(--fx-slate-900); margin-bottom: 3px; line-height: 1.3; }
.fx-series-card:hover .fx-series-card__title { color: var(--fx-cyan); }
.fx-series-card__orig { font-size: 11px; color: var(--fx-slate-400); font-family: monospace; margin-bottom: 6px; }
.fx-series-card__story { font-size: 13px; color: var(--fx-slate-600); line-height: 1.6; margin-bottom: 10px; }
.fx-series-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--fx-slate-100); }
.fx-series-card__rating { font-size: 13px; font-weight: 700; color: var(--fx-slate-700); }
.fx-series-card__platforms { display: flex; gap: 4px; }
.fx-series-card__cta { font-size: 12px; font-weight: 700; color: var(--fx-cyan); }

/* === 48. Where Page Filters === */
.fx-where-filters, .fx-cinema-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 20px; padding: 14px 20px; background: var(--fx-white); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-lg); }
.fx-where-filters__country, .fx-cinema-filters__country { display: flex; align-items: center; gap: 8px; }
.fx-where-filters__cats, .fx-cinema-filters__summary { display: flex; flex-wrap: wrap; gap: 6px; }

/* === 49. Related Articles === */
.fx-related-articles { margin-top: 28px; }
.fx-related-articles__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .fx-related-articles__grid { grid-template-columns: repeat(3, 1fr); } }
.fx-related-article-card { display: flex; gap: 12px; padding: 12px; background: var(--fx-slate-50); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius); text-decoration: none; transition: border-color .15s; }
.fx-related-article-card:hover { border-color: var(--fx-amber); }
.fx-related-article-card img { width: 80px; height: 60px; border-radius: var(--fx-radius-sm); object-fit: cover; flex-shrink: 0; }
.fx-related-article-card__body h4 { font-size: 13px; font-weight: 700; color: var(--fx-slate-900); margin-bottom: 4px; line-height: 1.4; }
.fx-related-article-card__body p { font-size: 12px; color: var(--fx-slate-500); line-height: 1.5; margin-bottom: 5px; }
.fx-link { font-size: 12px; color: var(--fx-amber-dark); font-weight: 700; text-decoration: none; cursor: pointer; background: none; border: none; }
.fx-link:hover { color: var(--fx-amber); }

/* === 50. Responsive === */
@media (max-width: 768px) {
  .fx-header__inner { flex-wrap: wrap; }
  .fx-search-form { order: 3; width: 100%; max-width: 100%; }
  .fx-header__tools { }
  .fx-menu-toggle { display: flex; }
  .fx-nav { display: none; }
  .fx-nav.fx-nav--open { display: block; }
  .fx-movie-hero__content { flex-direction: column; align-items: flex-start; padding: 16px; }
  .fx-movie-hero__poster { display: none; }
  .fx-tabs-bar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 12px; }
  .fx-tabs-bar__tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .fx-actor-profile { flex-direction: column; align-items: center; text-align: center; }
  .fx-filmography-table__header, .fx-filmography-table__row { grid-template-columns: 55px 1fr 70px; }
  .fx-specs-grid { grid-template-columns: 1fr 1fr; }
  .fx-scraper-banner { flex-direction: column; }
  .fx-tabs-content { padding: 16px; }
}
@media (max-width: 480px) {
  .fx-movies-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fx-actors-grid { grid-template-columns: 1fr 1fr; }
  .fx-pillars__grid { grid-template-columns: 1fr 1fr; }
  .fx-hero__title, .fx-movie-hero__title { font-size: 22px; }
  .fx-actor-card__stats { gap: 6px; }
  .fx-modal__header, .fx-modal__body { padding: 16px; }
}

/* === 51. Article Page === */
.fx-article-hero { position: relative; aspect-ratio: 21/9; min-height: 280px; overflow: hidden; border-radius: var(--fx-radius-xl); margin-bottom: 24px; }
.fx-article-hero__img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.fx-article-hero__overlay { position: absolute; bottom: 0; right: 0; left: 0; padding: 24px; background: linear-gradient(to top, rgba(2,6,23,.9), transparent); }
.fx-article-hero__title { font-size: clamp(20px, 3vw, 32px); font-weight: 900; color: #fff; margin-top: 8px; line-height: 1.3; }
.fx-article-header { padding: 28px 0 16px; margin-bottom: 24px; border-bottom: 1px solid var(--fx-slate-200); }
.fx-article-header__title { font-size: 26px; font-weight: 900; margin-top: 8px; }
.fx-article-meta-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; padding: 14px 20px; background: var(--fx-white); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-lg); }
.fx-article-author { display: flex; align-items: center; gap: 10px; }
.fx-article-author__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.fx-article-author strong { display: block; font-size: 14px; font-weight: 700; color: var(--fx-slate-900); }
.fx-article-author span { font-size: 12px; color: var(--fx-slate-500); }
.fx-article-meta-bar__info { display: flex; gap: 14px; font-size: 13px; color: var(--fx-slate-500); }
.fx-article-media-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.25); border-radius: var(--fx-radius-lg); margin-bottom: 20px; }
.fx-article-media-link__info { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.fx-article-excerpt { border-right: 4px solid var(--fx-amber); padding: 14px 18px; background: rgba(245,158,11,.05); border-radius: 0 var(--fx-radius) var(--fx-radius) 0; color: var(--fx-slate-700); font-size: 15px; line-height: 1.7; font-style: normal; margin-bottom: 24px; }
.fx-article-content { font-size: 16px; line-height: 1.9; color: var(--fx-slate-700); }
.fx-article-content p { margin-bottom: 18px; }
.fx-article-content h2, .fx-article-content h3 { font-weight: 800; color: var(--fx-slate-900); margin: 28px 0 12px; }
.fx-article-content h2 { font-size: 20px; }
.fx-article-content h3 { font-size: 17px; }
.fx-article-content blockquote { border-right: 4px solid var(--fx-cyan); padding: 12px 16px; background: var(--fx-slate-50); margin: 20px 0; border-radius: 0 var(--fx-radius) var(--fx-radius) 0; color: var(--fx-slate-600); font-style: italic; }
.fx-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0; border-top: 1px solid var(--fx-slate-200); margin-top: 28px; }
.fx-article-comments { margin-top: 32px; }

/* === 52. Page Content === */
.fx-page-content { max-width: 900px; margin: 0 auto; }

/* === 53. Series Country Bar === */
.fx-series-country-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; background: var(--fx-white); border: 1px solid var(--fx-slate-200); border-radius: var(--fx-radius-lg); margin-bottom: 24px; }
.fx-series-content { display: flex; flex-direction: column; gap: 28px; }

/* === 54. Cast Preview === */
.fx-cast-preview { }
.fx-cast-preview__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fx-cast-preview__header .fx-section-title { margin-bottom: 0; }
.fx-related-movies { margin-top: 32px; }

/* === 55. Header Scrolled === */
.fx-header--scrolled { box-shadow: var(--fx-shadow); }

/* === 56. Scrollbar Styling === */
.fx-tabs-bar::-webkit-scrollbar,
.fx-nav__inner::-webkit-scrollbar { height: 3px; }
.fx-tabs-bar::-webkit-scrollbar-track,
.fx-nav__inner::-webkit-scrollbar-track { background: transparent; }
.fx-tabs-bar::-webkit-scrollbar-thumb,
.fx-nav__inner::-webkit-scrollbar-thumb { background: var(--fx-slate-300); border-radius: 2px; }
.fx-schema-code::-webkit-scrollbar { width: 6px; height: 6px; }
.fx-schema-code::-webkit-scrollbar-track { background: var(--fx-slate-800); }
.fx-schema-code::-webkit-scrollbar-thumb { background: var(--fx-slate-600); border-radius: 3px; }