/* ═══════════════════════════════════════════════
   CINEPRISMA PLUS+ — Stylesheet
   Minimalist dark · iPhone-style · Adaptive themes
   ═══════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Variables ── */
:root {
  /* Backgrounds */
  --bg-0:   #080810;
  --bg-1:   #0e0e18;
  --bg-2:   #141422;
  --bg-card:#18182a;
  --bg-hover:#20203a;

  /* Text */
  --txt-1: #ffffff;
  --txt-2: rgba(255,255,255,0.72);
  --txt-3: rgba(255,255,255,0.42);
  --border: rgba(255,255,255,0.07);

  /* Default accent — purple (movies) */
  --accent:        #9333ea;
  --accent-dim:    #7c3aed;
  --accent-light:  #c084fc;
  --accent-glow:   rgba(147,51,234,0.40);
  --accent-subtle: rgba(147,51,234,0.13);
  --accent-rgb:    147,51,234;

  /* Layout */
  --navbar-h: 64px;
  --mobile-nav-h: 64px;
  --card-w: 160px;
  --card-r: 12px;
  --radius: 14px;

  /* Transitions */
  --t-theme: 0.40s cubic-bezier(0.4,0,0.2,1);
  --t-fast:  0.18s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  background: var(--bg-0);
  color: var(--txt-1);
  min-height: 100vh;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; }
a { text-decoration: none; color: inherit; }

/* ── Transitions on themed elements ── */
.nav-link.active, .nav-link:hover,
.mobile-nav-item.active,
.btn-primary, .card-play,
.card-fav.is-fav,
.fav-btn.is-fav,
.detail-fav-btn.is-fav,
.ep-btn.active,
.search-bar,
.genre-chip,
.hero-rating,
.type-badge {
  transition: background-color var(--t-theme), color var(--t-theme),
              border-color var(--t-theme), box-shadow var(--t-theme),
              fill var(--t-theme);
}

/* ═══════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--navbar-h);
  background: linear-gradient(to bottom, rgba(8,8,16,0.70) 0%, transparent 100%);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar.scrolled {
  background: rgba(8,8,16,0.82);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--border);
}
.navbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
}
.logo-text {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--txt-1);
}
.logo-accent {
  color: var(--accent);
  transition: color var(--t-theme);
}
.logo-plus {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 2px;
  margin-top: 1px;
  transition: color var(--t-theme);
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 0.25rem;
  flex: 1;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 99px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--txt-2);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover  { color: var(--txt-1); background: var(--bg-hover); }
.nav-link.active { color: var(--txt-1); background: var(--accent-subtle); }
.nav-icon { font-size: 1rem; }

/* Nav actions */
.nav-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.action-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-2);
  transition: color var(--t-fast), background var(--t-fast);
}
.action-btn:hover { color: var(--txt-1); background: var(--bg-hover); }
.action-btn svg { width: 20px; height: 20px; }

.user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-subtle);
  border: 1.5px solid var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--accent-light);
  transition: border-color var(--t-theme), background var(--t-theme);
}
.user-avatar svg { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════ */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: background-image 0.6s ease;
  filter: brightness(0.7);
}
.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,16,0.2) 0%,
    transparent 35%,
    rgba(8,8,16,0.65) 65%,
    var(--bg-0) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem 5rem;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.hero-rating {
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--accent-subtle);
  color: var(--accent-light);
  padding: 0.28rem 0.7rem;
  border-radius: 99px;
  border: 1px solid var(--accent-glow);
}
.hero-year {
  font-size: 0.82rem;
  color: var(--txt-3);
  font-weight: 500;
}
.genre-tag {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  color: var(--txt-2);
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.06;
  max-width: 700px;
  margin-bottom: 1rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.hero-overview {
  font-size: 0.95rem;
  color: var(--txt-2);
  max-width: 520px;
  line-height: 1.65;
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

/* Hero skeleton */
.hero-skeleton { display: flex; flex-direction: column; gap: 1rem; }
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%); background-size: 400% 100%; animation: shimmer 1.6s infinite; border-radius: 8px; }
.skeleton-title { height: 48px; width: 50%; }
.skeleton-desc  { height: 24px; width: 70%; }
.skeleton-buttons { display: flex; gap: 0.75rem; }
.skeleton-btn   { height: 44px; width: 140px; border-radius: 99px; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.72rem 1.6rem;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 0 24px var(--accent-glow);
  transition: transform var(--t-fast), background var(--t-theme), box-shadow var(--t-theme);
}
.btn-primary:hover  { transform: scale(1.04); background: var(--accent-dim); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary svg { width: 16px; height: 16px; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.72rem 1.4rem;
  border-radius: 99px;
  background: rgba(255,255,255,0.10);
  color: var(--txt-1);
  font-size: 0.9rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn-secondary:hover  { background: rgba(255,255,255,0.16); transform: scale(1.03); }
.btn-secondary svg { width: 16px; height: 16px; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: var(--txt-2);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.btn-icon:hover { background: rgba(255,255,255,0.18); color: var(--txt-1); transform: scale(1.06); }
.btn-icon.is-fav { color: var(--accent); border-color: var(--accent-glow); background: var(--accent-subtle); }
.btn-icon svg { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════
   CONTENT ROWS
   ═══════════════════════════════════════════════ */
.main-content { min-height: 100vh; }
.content-rows {
  padding-bottom: 8rem;
  margin-top: -4px;
}
.row-wrapper { margin-bottom: 2.5rem; }
.row-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem 0.85rem;
}
.row-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--txt-1);
  letter-spacing: -0.3px;
}
.row-see-all {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
  background: var(--accent-subtle);
  transition: background var(--t-theme), color var(--t-theme);
}
.row-see-all:hover { background: var(--accent-glow); }

/* Cards track */
.cards-track {
  display: flex;
  gap: 0.85rem;
  padding: 0.4rem 2rem 0.8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
}
.cards-track:active { cursor: grabbing; }
.cards-track::-webkit-scrollbar { display: none; }
.cards-track { scrollbar-width: none; }

/* Skeleton row */
.skeleton-row-title { height: 20px; width: 200px; margin: 0 2rem 0.85rem; }
.card-skeleton {
  flex: 0 0 var(--card-w);
  border-radius: var(--card-r);
  overflow: hidden;
}
.card-skeleton .skeleton { width: var(--card-w); height: 240px; border-radius: var(--card-r); }

/* ═══════════════════════════════════════════════
   CONTENT CARDS
   ═══════════════════════════════════════════════ */
.content-card {
  flex: 0 0 var(--card-w);
  border-radius: var(--card-r);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  outline: none;
}
.content-card:hover     { transform: scale(1.06) translateY(-4px); }
.content-card:focus-visible {
  box-shadow: 0 0 0 3px var(--accent);
  border-radius: var(--card-r);
}

.card-img-wrap {
  position: relative;
  border-radius: var(--card-r);
  overflow: hidden;
  aspect-ratio: 2/3;
  background: var(--bg-card);
}
.card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.content-card:hover .card-img-wrap img { transform: scale(1.06); }

/* Card overlay */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.content-card:hover .card-overlay,
.content-card:focus-visible .card-overlay { opacity: 1; }

.card-play {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px var(--accent-glow);
  transform: scale(0.8);
  transition: transform 0.2s ease, background var(--t-theme), box-shadow var(--t-theme);
}
.content-card:hover .card-play { transform: scale(1); }
.card-play svg { width: 18px; height: 18px; margin-left: 2px; }

.card-fav {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-2);
  transition: color var(--t-theme), background var(--t-fast);
  opacity: 0;
}
.content-card:hover .card-fav { opacity: 1; }
.card-fav.is-fav { color: var(--accent); opacity: 1; }
.card-fav svg { width: 14px; height: 14px; }

/* Rating badge */
.card-rating {
  position: absolute;
  top: 8px; left: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  color: #facc15;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
}

/* Type badge */
.type-badge {
  position: absolute;
  bottom: 8px; left: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
}
.type-badge.anime  { background: rgba(249,115,22,0.85); color: #fff; }
.type-badge.series { background: rgba(14,165,233,0.85); color: #fff; }

/* Card info */
.card-info { padding: 0.5rem 0.2rem 0; }
.card-title { font-size: 0.8rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt-1); }
.card-year  { font-size: 0.72rem; color: var(--txt-3); margin-top: 1px; }

/* ═══════════════════════════════════════════════
   SEARCH OVERLAY
   ═══════════════════════════════════════════════ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(8,8,16,0.92);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.search-overlay.open { opacity: 1; pointer-events: all; }

.search-container { width: 100%; max-width: 700px; padding: 0 1.5rem; }

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-2);
  border: 1.5px solid var(--accent-glow);
  border-radius: 99px;
  padding: 0.85rem 1.2rem;
  box-shadow: 0 0 30px var(--accent-glow);
  transition: border-color var(--t-theme), box-shadow var(--t-theme);
}
.search-icon  { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--txt-1);
  font-family: inherit;
}
.search-bar input::placeholder { color: var(--txt-3); }
.search-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-2);
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.search-close:hover { color: var(--txt-1); background: var(--bg-hover); }
.search-close svg { width: 16px; height: 16px; }

.search-results { margin-top: 1.5rem; max-height: calc(100vh - 220px); overflow-y: auto; }
.search-results::-webkit-scrollbar { width: 4px; }
.search-results::-webkit-scrollbar-thumb { background: var(--accent-glow); border-radius: 2px; }

.search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}
.search-loading {
  display: flex; justify-content: center; padding: 2rem;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.search-empty { padding: 2rem; text-align: center; color: var(--txt-3); }

/* ═══════════════════════════════════════════════
   DETAIL MODAL
   ═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-content {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 20px;
  max-width: 980px;
  width: 95%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px var(--border);
  animation: modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.modal-content::-webkit-scrollbar { width: 6px; }
.modal-content::-webkit-scrollbar-thumb { background: var(--accent-glow); border-radius: 3px; }

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

.modal-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  z-index: 20;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  color: var(--txt-1);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  transition: background var(--t-fast), transform var(--t-fast);
}
.modal-close:hover { background: rgba(255,255,255,0.15); transform: scale(1.08); }
.modal-close svg { width: 18px; height: 18px; }

/* ── Movie Detail Modal Content ── */
.detail-backdrop {
  height: 280px;
  background-size: cover;
  background-position: center 20%;
  border-radius: 20px 20px 0 0;
}
.detail-gradient {
  height: 120px;
  margin-top: -120px;
  background: linear-gradient(to bottom, transparent, var(--bg-1));
}
.detail-body {
  display: flex;
  gap: 1.75rem;
  padding: 0 2rem 2rem;
}
.detail-poster-col { flex-shrink: 0; }
.detail-poster {
  width: 150px;
  border-radius: 14px;
  margin-top: -80px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  border: 2px solid var(--border);
}
.detail-info-col { flex: 1; min-width: 0; padding-top: 0.5rem; }
.detail-meta-row { font-size: 0.85rem; color: var(--txt-3); font-weight: 500; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.detail-dot { color: rgba(255,255,255,0.2); font-size: 0.75rem; }
.detail-star-rating { color: #facc15; font-weight: 800; font-size: 0.92rem; }
.detail-rating { color: #facc15; font-weight: 700; }
.detail-title { font-size: 1.8rem; font-weight: 900; letter-spacing: -0.8px; margin-bottom: 0.75rem; }
.detail-genres { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.genre-chip {
  font-size: 0.72rem; font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
  background: var(--accent-subtle);
  color: var(--accent-light);
  border: 1px solid var(--accent-glow);
  transition: background var(--t-theme), color var(--t-theme), border-color var(--t-theme);
}
.detail-overview {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--txt-2);
  margin-bottom: 1.25rem;
}
.detail-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.detail-play { padding: 0.75rem 1.8rem; }
.detail-fav-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  width: auto;
  padding: 0 1.2rem;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════
   SERIES & ANIME DETAIL (Matches Reference Image)
   ═══════════════════════════════════════════════ */
.series-detail-loading {
  padding: 5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.series-hero-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--bg-1);
}
.series-backdrop {
  height: 320px;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  filter: brightness(0.65);
}
.series-backdrop-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14,14,24,0.3) 0%, rgba(14,14,24,0.7) 45%, var(--bg-1) 95%);
}
.series-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 2rem;
  padding: 0 2.25rem 2rem;
  margin-top: -140px;
}
.series-poster-col { flex-shrink: 0; }
.series-poster {
  width: 220px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.7);
  border: 2px solid rgba(255,255,255,0.12);
  background: var(--bg-card);
}
.series-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0.5rem;
}
.series-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 0.65rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.series-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--txt-2);
  margin-bottom: 1rem;
}
.series-meta-row .star-rating {
  color: #facc15;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.series-overview {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 780px;
  margin-bottom: 1.5rem;
}
.series-actions {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════
   EPISODIOS SECTION & CUSTOM SEASON DROPDOWN
   ═══════════════════════════════════════════════ */
.episodes-section {
  padding: 1.5rem 2.25rem 2.5rem;
  border-top: 1px solid var(--border);
}
.episodes-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.episodes-heading {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #fff;
}

/* Custom Season Dropdown (matches reference image with glowing accent border) */
.custom-season-dropdown {
  position: relative;
  user-select: none;
}
.season-drop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 150px;
  padding: 0.55rem 1.1rem;
  background: #121320;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 14px var(--accent-glow);
  transition: border-color var(--t-theme), box-shadow var(--t-theme), background var(--t-fast);
}
.season-drop-btn:hover {
  background: #17192a;
}
.season-drop-btn.open {
  box-shadow: 0 0 20px var(--accent-glow);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.season-drop-arrow {
  width: 16px;
  height: 16px;
  color: var(--txt-2);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.season-drop-btn.open .season-drop-arrow {
  transform: rotate(180deg);
}

.season-drop-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  min-width: 160px;
  background: #151624;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  overflow: hidden;
  display: none;
  flex-direction: column;
  animation: dropFade 0.15s ease-out;
}
.season-drop-menu.open {
  display: flex;
}
@keyframes dropFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.season-drop-item {
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.season-drop-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.season-drop-item.selected {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════
   EPISODE CARDS (Matches Reference Image)
   ═══════════════════════════════════════════════ */
.episodes-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.episode-card {
  display: flex;
  gap: 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-align: left;
  outline: none;
}
.episode-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent-glow);
  transform: translateY(-2px);
}
.episode-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.episode-card.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 0 20px var(--accent-glow);
}

/* Episode thumbnail */
.ep-thumb-wrapper {
  position: relative;
  width: 200px;
  aspect-ratio: 16/9;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #0d0e18;
}
.ep-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.episode-card:hover .ep-thumb-img {
  transform: scale(1.05);
}
.ep-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.episode-card:hover .ep-thumb-overlay {
  opacity: 1;
}
.ep-play-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px var(--accent-glow);
  transform: scale(0.85);
  transition: transform 0.2s ease;
}
.episode-card:hover .ep-play-circle {
  transform: scale(1);
}
.ep-play-circle svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}
.ep-playing-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulseDot 1s infinite alternate;
}
@keyframes pulseDot {
  from { opacity: 0.4; }
  to   { opacity: 1;   }
}

/* Episode text content */
.ep-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.ep-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.3;
}
.ep-duration {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  margin-bottom: 8px;
}
.ep-overview {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   PLAYER MODAL WITH EPISODES BROWSER
   ═══════════════════════════════════════════════ */
.player-overlay {
  padding: 0;
  background: rgba(0,0,0,0.94);
}
.player-wrapper {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
  max-height: 95vh;
}
.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.player-title { font-size: 0.95rem; font-weight: 700; color: var(--txt-1); }
.player-close { position: static; }

/* ── Dual-source selector bar ── */
.player-source-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.player-source-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--txt-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.15rem;
}
.player-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.9rem;
  border-radius: 99px;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--border);
  color: var(--txt-3);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  user-select: none;
}
.player-source-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--txt-1);
  border-color: rgba(255,255,255,0.2);
}
.player-source-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: none;
}
.player-source-btn.active:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}
.player-source-hint {
  font-size: 0.68rem;
  color: var(--txt-3);
  opacity: 0.6;
  margin-left: auto;
  font-style: italic;
}
.player-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  flex-shrink: 0;
}
.player-container iframe {
  width: 100%; height: 100%;
  border: none;
}

/* Episode browser in player modal */
.player-episodes-section {
  padding: 1.25rem 1.5rem 1.75rem;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  max-height: 380px;
  overflow-y: auto;
  flex-shrink: 0;
}
.player-episodes-section::-webkit-scrollbar { width: 5px; }
.player-episodes-section::-webkit-scrollbar-thumb { background: var(--accent-glow); border-radius: 2px; }



/* ═══════════════════════════════════════════════
   MY LIST VIEW
   ═══════════════════════════════════════════════ */
.section-view {
  padding: var(--navbar-h) 2rem 8rem;
  min-height: 100vh;
}
.section-header { margin-bottom: 2rem; padding-top: 2rem; }
.section-header h2 { font-size: 2rem; font-weight: 900; letter-spacing: -0.8px; }
.section-subtitle { font-size: 0.88rem; color: var(--txt-3); margin-top: 0.3rem; }

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.2rem;
}
.content-grid .content-card { flex: none; width: 100%; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 5rem 2rem; color: var(--txt-3); text-align: center;
}
.empty-icon { font-size: 3.5rem; }
.empty-state h3 { font-size: 1.2rem; font-weight: 700; color: var(--txt-2); }
.empty-state p  { font-size: 0.88rem; max-width: 280px; line-height: 1.6; }

/* ═══════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ═══════════════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--mobile-nav-h);
  background: rgba(14,14,22,0.92);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-top: 1px solid var(--border);
  padding: 0 0.5rem;
  align-items: center;
  justify-content: space-around;
}
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0.4rem 0.6rem;
  border-radius: 12px;
  color: var(--txt-3);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color var(--t-fast), background var(--t-fast);
  min-width: 52px;
}
.mobile-nav-item svg { width: 22px; height: 22px; }
.mobile-nav-item:hover  { color: var(--txt-2); background: var(--bg-hover); }
.mobile-nav-item.active { color: var(--accent); }
.mobile-nav-item.active svg { filter: drop-shadow(0 0 6px var(--accent-glow)); }

/* ═══════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--txt-1);
  padding: 0.7rem 1.4rem;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 1100;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet (640–1023px)
   ═══════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .mobile-nav { display: flex; }
  .content-rows { padding-bottom: calc(var(--mobile-nav-h) + 2rem); }
  .section-view { padding-bottom: calc(var(--mobile-nav-h) + 2rem); }
  --card-w: 140px;
  .toast { bottom: calc(var(--mobile-nav-h) + 1rem); }
}

@media (min-width: 641px) and (max-width: 1023px) {
  :root { --card-w: 150px; }
  .detail-poster { width: 120px; margin-top: -60px; }
  .detail-title  { font-size: 1.4rem; }
  .hero-title    { font-size: clamp(1.8rem, 4vw, 3rem); }

  .series-poster { width: 170px; }
  .series-header-content { gap: 1.5rem; padding: 0 1.5rem 1.5rem; }
  .episodes-section { padding: 1.25rem 1.5rem 2rem; }
  .ep-thumb-wrapper { width: 160px; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Phone (≤ 640px)
   ═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --card-w: 130px; --navbar-h: 56px; }

  .navbar-inner { padding: 0 1rem; }
  .hero-content { padding: 0 1rem 5.5rem; }
  .hero-title   { font-size: clamp(1.6rem, 6vw, 2.4rem); letter-spacing: -1px; }
  .hero-overview{ font-size: 0.85rem; }
  .row-header, .cards-track { padding-left: 1rem; padding-right: 1rem; }

  .detail-body      { flex-direction: column; }
  .detail-poster    { width: 110px; margin-top: -60px; }
  .detail-poster-col{ display: flex; justify-content: center; }
  .detail-title     { font-size: 1.25rem; }
  .detail-backdrop  { height: 200px; }

  /* Series detail mobile */
  .series-header-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: -90px;
    padding: 0 1rem 1.5rem;
  }
  .series-poster { width: 150px; }
  .series-meta-row { justify-content: center; }
  .series-actions { justify-content: center; }
  .series-overview { font-size: 0.86rem; }
  .episodes-section { padding: 1rem 1rem 2rem; }
  .episodes-topbar { flex-wrap: wrap; gap: 0.75rem; }
  .episode-card { flex-direction: column; gap: 0.85rem; padding: 12px; }
  .ep-thumb-wrapper { width: 100%; aspect-ratio: 16/9; }

  .player-wrapper { border-radius: 0; max-height: 100vh; }
  .player-overlay { padding: 0; }

  .search-container { padding: 0 1rem; }
  .search-bar { padding: 0.7rem 1rem; }
  .search-bar input { font-size: 0.95rem; }

  .content-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  .hero-section { min-height: 480px; max-height: 600px; }

  /* Catalog on mobile */
  .catalog-section { padding: 2rem 1rem 8rem; }
  .catalog-section-header { flex-direction: column; align-items: flex-start; }
  .catalog-section-title { font-size: 1.2rem; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .catalog-sort-select { width: 100%; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TV / Large (≥ 1440px)
   ═══════════════════════════════════════════════ */
@media (min-width: 1440px) {
  :root { --card-w: 200px; --navbar-h: 70px; }
  .hero-title       { font-size: 4.5rem; }
  .hero-overview    { font-size: 1.05rem; max-width: 600px; }
  .row-title        { font-size: 1.25rem; }
  .card-title       { font-size: 0.85rem; }
  .navbar-inner     { padding: 0 4rem; }
  .hero-content     { padding: 0 4rem 6rem; }
  .row-header       { padding: 0 4rem 1rem; }
  .cards-track      { padding: 0.5rem 4rem 1rem; }
  .content-grid     { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* TV focus styles for D-pad navigation */
@media (min-width: 1440px) {
  .content-card:focus-visible { box-shadow: 0 0 0 4px var(--accent), 0 0 30px var(--accent-glow); transform: scale(1.08); }
  .nav-link:focus-visible     { box-shadow: 0 0 0 3px var(--accent); outline: none; }
  .btn-primary:focus-visible,
  .btn-secondary:focus-visible { box-shadow: 0 0 0 3px var(--accent); outline: none; }
  .ep-btn:focus-visible { box-shadow: 0 0 0 3px var(--accent); outline: none; }
}

/* Horizontal scrollbar for search on touch */
@media (hover: none) {
  .cards-track { cursor: default; }
}

/* ═══════════════════════════════════════════════
   CATALOG SECTION — Full catalog at bottom of each section
   ═══════════════════════════════════════════════ */
.catalog-section {
  padding: 3rem 2rem 10rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}
.catalog-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.catalog-section-title {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--txt-1);
}
.catalog-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.catalog-count-badge {
  font-size: 0.8rem;
  color: var(--txt-3);
  font-weight: 500;
}
.catalog-sort-select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: border-color var(--t-theme);
  outline: none;
}
.catalog-sort-select:focus { border-color: var(--accent); }
.catalog-sort-select option { background: var(--bg-2); }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.catalog-grid .content-card {
  flex: none;
  width: 100%;
}

.catalog-load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}
.catalog-load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2.2rem;
  border-radius: 99px;
  background: var(--accent-subtle);
  border: 1.5px solid var(--accent-glow);
  color: var(--accent-light);
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--t-theme), border-color var(--t-theme), transform var(--t-fast);
}
.catalog-load-more:hover { background: var(--accent); color: #fff; transform: scale(1.03); }
.catalog-load-more:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.catalog-progress {
  font-size: 0.78rem;
  color: var(--txt-3);
  font-weight: 500;
}
.catalog-progress-bar {
  width: 200px;
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.catalog-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.5s ease, background var(--t-theme);
}

/* ═══════════════════════════════════════════════
   IMPROVED CONTENT CARD — duration + rating overlays
   ═══════════════════════════════════════════════ */
/* Duration badge — bottom left on card image */
.card-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.9);
  padding: 0.18rem 0.42rem;
  border-radius: 5px;
  line-height: 1.3;
}
/* Move type badge to top-right when no duration */
.card-img-wrap .type-badge {
  bottom: auto;
  top: 8px;
  left: 8px;
}
/* When duration is shown, type badge moves to bottom-left */
.card-img-wrap.has-duration .type-badge {
  bottom: 8px;
  top: auto;
  left: 8px;
}

/* ═══════════════════════════════════════════════
   TV / ULTRA-WIDE (≥ 1920px)
   ═══════════════════════════════════════════════ */
@media (min-width: 1920px) {
  :root {
    --card-w: 230px;
    --navbar-h: 76px;
    --radius: 18px;
    --card-r: 16px;
  }
  body { font-size: 18px; }
  .hero-title { font-size: 5.5rem; letter-spacing: -2px; }
  .hero-overview { font-size: 1.15rem; max-width: 700px; }
  .hero-content { padding: 0 6rem 8rem; }
  .navbar-inner { padding: 0 6rem; max-width: 2200px; }
  .row-header { padding: 0 6rem 1.2rem; }
  .cards-track { padding: 0.6rem 6rem 1.2rem; gap: 1.1rem; }
  .row-title { font-size: 1.5rem; }
  .card-title { font-size: 0.95rem; }
  .btn-primary, .btn-secondary { font-size: 1.05rem; padding: 0.9rem 2rem; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  /* D-pad / remote focus ring — larger for TV */
  .content-card:focus-visible {
    box-shadow: 0 0 0 5px var(--accent), 0 0 40px var(--accent-glow);
    transform: scale(1.10);
  }
  .nav-link:focus-visible,
  .btn-primary:focus-visible,
  .btn-secondary:focus-visible,
  .mobile-nav-item:focus-visible {
    box-shadow: 0 0 0 4px var(--accent);
    outline: none;
  }
  /* Larger episode thumbs on TV */
  .ep-thumb-wrapper { width: 260px; }
  .ep-title { font-size: 1.2rem; }
  .ep-overview { font-size: 1rem; -webkit-line-clamp: 4; }
  /* Detail modal wider */
  .modal-content { max-width: 1200px; }
  .series-poster { width: 280px; }
}

/* ═══════════════════════════════════════════════
   TABLET LANDSCAPE / MEDIUM DESKTOP (1024–1439px)
   ═══════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { --card-w: 170px; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ═══════════════════════════════════════════════
   MOBILE LANDSCAPE (≤ 480px height, landscape)
   ═══════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-section { height: 60vw; min-height: 280px; max-height: 420px; }
  .hero-content { padding: 0 1.5rem 2rem; }
  .player-wrapper { max-height: 100vh; border-radius: 0; }
}

/* ═══════════════════════════════════════════════
   SAFE AREA — iPhone X notch / home indicator
   ═══════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  }
  .toast {
    bottom: calc(6rem + env(safe-area-inset-bottom));
  }
}


/* ════════════════════════════════════════════════════════════
   ANIME PLUS+ — Estilos de la sección de catálogo extendido
   ════════════════════════════════════════════════════════════ */

/* --- Nav badge para Anime Plus+ --- */
.nav-link-plus {
  background: linear-gradient(135deg, rgba(232,121,249,0.15), rgba(217,70,239,0.10));
  border: 1px solid rgba(232,121,249,0.30);
  border-radius: 99px;
  padding: 0.3rem 0.85rem;
  color: #f0abfc !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background var(--t-theme), border-color var(--t-theme), transform var(--t-fast);
}
.nav-link-plus:hover,
.nav-link-plus.active {
  background: linear-gradient(135deg, rgba(232,121,249,0.30), rgba(217,70,239,0.25));
  border-color: rgba(232,121,249,0.65);
  transform: scale(1.04);
  color: #fff !important;
}

.mobile-nav-plus { color: #f0abfc !important; }
.mobile-nav-plus.active { color: #e879f9 !important; }

/* --- Overlay principal --- */
.aplus-overlay {
  position: fixed;
  inset: var(--navbar-h) 0 var(--mobile-nav-h, 64px) 0;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  z-index: 90;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.aplus-inner {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --- Header --- */
.aplus-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.aplus-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.aplus-logo {
  font-size: 2rem;
  line-height: 1;
}

.aplus-title {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #e879f9, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.aplus-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  background: rgba(232,121,249,0.18);
  border: 1px solid rgba(232,121,249,0.40);
  border-radius: 99px;
  color: #f0abfc;
  align-self: flex-start;
}

.aplus-subtitle {
  font-size: 0.88rem;
  color: var(--txt-3);
  margin: 0;
}

/* --- Server status indicator --- */
.aplus-server-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  width: fit-content;
  transition: background var(--t-theme);
}

.aplus-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.aplus-status-checking { background: rgba(148,163,184,0.12); color: var(--txt-3); }
.aplus-status-checking .aplus-status-dot { animation: pulse 1.2s ease-in-out infinite; }

.aplus-status-waking { background: rgba(251,191,36,0.14); color: #fbbf24; }
.aplus-status-waking .aplus-status-dot { animation: pulse 0.7s ease-in-out infinite; background: #fbbf24; }

.aplus-status-online { background: rgba(34,197,94,0.14); color: #4ade80; }
.aplus-status-offline { background: rgba(239,68,68,0.14); color: #f87171; }

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* --- Offline banner --- */
.aplus-offline-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius);
  color: var(--txt-1);
}

.aplus-offline-banner svg { color: #f87171; flex-shrink: 0; margin-top: 0.2rem; }
.aplus-offline-banner strong { display: block; margin-bottom: 0.4rem; color: #f87171; font-size: 1.05rem; }
.aplus-offline-banner p { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--txt-2); }
.aplus-offline-banner code {
  display: block;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  font-size: 0.78rem;
  color: #a5f3fc;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}

/* --- Controls bar --- */
.aplus-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.aplus-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
  max-width: 600px;
}

.aplus-search-icon {
  position: absolute;
  left: 0.9rem;
  color: var(--txt-3);
  pointer-events: none;
}

.aplus-search-input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.6rem;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--t-theme);
}

.aplus-search-input::placeholder { color: var(--txt-3); }
.aplus-search-input:focus { border-color: #e879f9; }
.aplus-search-input::-webkit-search-cancel-button { cursor: pointer; }

.aplus-search-btn {
  position: absolute;
  right: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: linear-gradient(135deg, #e879f9, #a855f7);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.aplus-search-btn:hover { opacity: 0.85; }

.aplus-provider-select {
  padding: 0.6rem 1rem;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--txt-1);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color var(--t-theme);
  max-width: 220px;
}
.aplus-provider-select:focus { border-color: #e879f9; }
.aplus-provider-select option { background: var(--bg-2); }

/* --- Content / Grid --- */
.aplus-content { min-height: 200px; }

.aplus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

/* --- Cards --- */
.aplus-card {
  border-radius: var(--card-r);
  overflow: hidden;
  background: var(--bg-2);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}

.aplus-card:hover,
.aplus-card:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(232,121,249,0.25);
}

.aplus-card-img-wrap {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--bg-3);
}

.aplus-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-base);
}
.aplus-card:hover .aplus-card-img-wrap img { transform: scale(1.06); }

.aplus-card-rating {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  color: #fde68a;
  padding: 0.15rem 0.4rem;
  border-radius: 5px;
}

.aplus-card-title {
  padding: 0.5rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--txt-1);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* --- Loading / Empty --- */
.aplus-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--txt-3);
  font-size: 0.9rem;
}

.aplus-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 4rem 1rem;
  color: var(--txt-3);
  font-size: 0.9rem;
}

.aplus-empty span { font-size: 2.5rem; }

/* --- Detail panel --- */
.aplus-detail { padding-top: 0.5rem; }

.aplus-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--txt-2);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  margin-bottom: 1.25rem;
}
.aplus-back-btn:hover { background: var(--bg-3); color: var(--txt-1); }

.aplus-detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--txt-3);
}

.aplus-detail-hero {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.aplus-detail-poster {
  width: 150px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
  align-self: flex-start;
}

.aplus-detail-meta { flex: 1; min-width: 0; }

.aplus-detail-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--txt-1);
  margin: 0 0 0.5rem;
}

.aplus-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.aplus-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  background: rgba(232,121,249,0.14);
  border: 1px solid rgba(232,121,249,0.28);
  border-radius: 99px;
  color: #f0abfc;
}

.aplus-detail-overview {
  font-size: 0.875rem;
  color: var(--txt-2);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.aplus-eps-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt-2);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.aplus-ep-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 55vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
}

.aplus-ep-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--txt-1);
  transition: background var(--t-fast), border-color var(--t-fast);
  width: 100%;
}

.aplus-ep-btn:hover {
  background: rgba(232,121,249,0.10);
  border-color: rgba(232,121,249,0.35);
}

.aplus-ep-num {
  font-size: 0.72rem;
  font-weight: 800;
  color: #f0abfc;
  background: rgba(232,121,249,0.14);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  flex-shrink: 0;
}

.aplus-ep-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--txt-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aplus-ep-btn svg { color: var(--txt-3); flex-shrink: 0; }

.aplus-no-episodes {
  text-align: center;
  color: var(--txt-3);
  padding: 2rem;
  font-size: 0.9rem;
}

.aplus-error {
  text-align: center;
  color: #f87171;
  padding: 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Language badges on server buttons --- */
.aplus-lang-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-right: 0.3rem;
  vertical-align: middle;
  line-height: 1.4;
}

.aplus-lang-lat {
  background: rgba(34,197,94,0.20);
  border: 1px solid rgba(34,197,94,0.40);
  color: #4ade80;
}

.aplus-lang-sub {
  background: rgba(59,130,246,0.20);
  border: 1px solid rgba(59,130,246,0.40);
  color: #93c5fd;
}

/* --- Mobile overrides --- */
@media (max-width: 600px) {
  .aplus-inner { padding: 1.25rem 1rem 6rem; }
  .aplus-title  { font-size: 1.5rem; }
  .aplus-grid   { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.7rem; }
  .aplus-detail-hero { flex-direction: column; }
  .aplus-detail-poster { width: 100%; max-width: 160px; margin: 0 auto; }
  .aplus-controls { gap: 0.5rem; }
  .aplus-search-wrap { min-width: 0; }
  .aplus-provider-select { max-width: 100%; width: 100%; }
}

/* --- TV (≥ 1920px) overrides --- */
@media (min-width: 1920px) {
  .aplus-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .aplus-detail-poster { width: 220px; }
}