/* ============================================================
   NOBARGASI — Apple TV Theme Layer (tv.css)
   Monochrome, glass, focus-lift cards. Loaded after app.css.
   All selectors keep the existing DOM/ID contracts intact.
   ============================================================ */

:root {
  --nb-bg: #000000;
  --nb-text: #f5f5f7;
  --nb-text-2: rgba(245, 245, 247, 0.74);
  --nb-text-3: rgba(245, 245, 247, 0.58);
  --nb-hair: rgba(255, 255, 255, 0.1);
  --nb-hair-2: rgba(255, 255, 255, 0.16);
  --nb-glass: rgba(255, 255, 255, 0.1);
  --nb-glass-2: rgba(255, 255, 255, 0.16);
  --nb-glass-3: rgba(255, 255, 255, 0.24);
  --nb-surface: rgba(28, 28, 32, 0.72);
  --nb-surface-solid: #16161a;
  --nb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nb-radius-card: 14px;
  --nb-gutter: 20px;
  --nb-max: 1680px;
  --nb-font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --nb-card-w: 128px;
  --nb-land-w: 264px;
  --nb-header-h: 64px;
}
@media (min-width: 640px) { :root { --nb-gutter: 32px; --nb-card-w: 154px; --nb-land-w: 300px; } }
@media (min-width: 1024px) { :root { --nb-gutter: 48px; --nb-card-w: 176px; --nb-land-w: 340px; --nb-header-h: 76px; } }
@media (min-width: 1440px) { :root { --nb-gutter: 56px; --nb-card-w: 188px; --nb-land-w: 356px; } }

/* ---------- Base ---------- */
html, body {
  font-family: var(--nb-font) !important;
  background: var(--nb-bg) !important;
  color: var(--nb-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
::selection { background: rgba(255, 255, 255, 0.85); color: #000; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

#ambientBg { opacity: 0.55; filter: blur(90px) saturate(130%) brightness(0.24); }
.overlay { background: radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 60%, #000 100%); }

/* ---------- Shell ---------- */
.app-sidebar { display: none !important; }
.app-main { padding-left: 0 !important; padding-bottom: 0 !important; }
.content-container {
  max-width: var(--nb-max) !important;
  padding: 0 var(--nb-gutter) !important;
  margin: 0 auto;
}
#mainContainer { padding-bottom: 120px !important; }
@media (min-width: 1024px) { #mainContainer { padding-bottom: 40px !important; } }

/* ---------- Top navigation ---------- */
.top-navbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 120 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.32) 62%, rgba(0,0,0,0) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background 0.35s var(--nb-ease), box-shadow 0.35s var(--nb-ease);
}
.top-navbar.dplus-scrolled,
body.nb-grid-view .top-navbar {
  background: rgba(14, 14, 16, 0.72) !important;
  backdrop-filter: blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nb-topbar {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--nb-max);
  height: var(--nb-header-h);
  margin: 0 auto;
  padding: 0 var(--nb-gutter);
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--nb-text); text-decoration: none; flex-shrink: 0; }
.nb-brand-icon { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }
.nb-brand-text { font-size: 16px; font-weight: 750; letter-spacing: 0.06em; }
@media (min-width: 1024px) { .nb-brand-icon { width: 34px; height: 34px; } .nb-brand-text { font-size: 17px; } }

.nb-tabs {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(40, 40, 44, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
@media (min-width: 1100px) { .nb-tabs { display: inline-flex; } }
.nb-tab {
  border: 0;
  background: transparent;
  color: rgba(245, 245, 247, 0.8);
  font-size: 14px;
  font-weight: 560;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--nb-ease), color 0.25s var(--nb-ease);
}
.nb-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nb-tab.dplus-nav-active, .nb-tab.active { background: var(--nb-text); color: #000; }
@media (min-width: 1280px) { .nb-tab { padding: 8px 18px; } }

.nb-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nb-icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--nb-text);
  background: var(--nb-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--nb-ease);
  flex-shrink: 0;
}
.nb-icon-btn:hover { background: var(--nb-glass-3); transform: scale(1.05); }
.nb-pill-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border-radius: 999px; border: 0;
  color: var(--nb-text);
  background: var(--nb-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--nb-ease);
}
.nb-pill-btn:hover { background: var(--nb-glass-3); transform: scale(1.04); }
.nb-pill-label { display: none; }
@media (min-width: 640px) { .nb-pill-label { display: inline; } }
@media (max-width: 639px) { .nb-pill-btn { width: 40px; padding: 0; justify-content: center; } }
.nb-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: nbPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.nb-live-dot.hidden { display: none !important; }
#navNobarLiveDot { position: absolute; top: 6px; right: 6px; }
@media (min-width: 640px) { #navNobarLiveDot { position: static; } }

.nb-vip-btn {
  display: none;
  align-items: center; gap: 7px;
  height: 40px; padding: 0 16px;
  border-radius: 999px; border: 0;
  background: var(--nb-text); color: #000;
  font-size: 14px; font-weight: 650;
  cursor: pointer;
  transition: transform 0.2s var(--nb-ease), background 0.2s;
}
.nb-vip-btn:hover { transform: scale(1.04); background: #fff; }
.nb-vip-btn.is-active { background: var(--nb-glass-2); color: var(--nb-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
@media (min-width: 640px) { .nb-vip-btn { display: inline-flex; } }

.nb-avatar-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(140deg, #3a3a40, #18181c);
  color: var(--nb-text);
  cursor: pointer;
  transition: transform 0.2s var(--nb-ease), border-color 0.2s;
  flex-shrink: 0;
}
.nb-avatar-btn:hover, .nb-avatar-btn.active, .nb-avatar-btn.dplus-nav-active { transform: scale(1.05); border-color: rgba(255,255,255,0.5); }

/* Search */
.top-search-box { position: relative; display: none; width: 240px; max-width: none !important; }
.top-search-input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 40px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: var(--nb-glass) !important;
  color: var(--nb-text) !important;
  font-size: 14px !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: width 0.3s var(--nb-ease), background 0.2s, border-color 0.2s !important;
  box-shadow: none !important;
}
.top-search-input::placeholder { color: rgba(245, 245, 247, 0.6); }
.top-search-input:focus { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.35) !important; }
.top-search-icon { left: 14px !important; color: rgba(245,245,247,0.7) !important; display: flex; z-index: 2; }
.top-search-input:focus-visible { outline: none !important; }
.search-shortcut-hint {
  right: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(245,245,247,0.6) !important;
  z-index: 2;
  font-size: 11px !important; font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
}
.nb-search-close {
  display: none;
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  align-items: center; justify-content: center;
  color: var(--nb-text); background: rgba(255,255,255,0.12); cursor: pointer;
  z-index: 2;
}
.nb-search-trigger { display: inline-flex; }
@media (min-width: 1360px) {
  .top-search-box { display: block; }
  .top-search-box:focus-within { width: 320px; }
  .nb-search-trigger { display: none; }
}
/* Search overlay mode (phone, tablet & compact desktop) */
@media (max-width: 1359px) {
  .nb-topbar.nb-search-open .top-search-box {
    display: block;
    position: absolute;
    left: var(--nb-gutter); right: var(--nb-gutter);
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    z-index: 5;
    margin-top: calc(env(safe-area-inset-top, 0px) / 2);
  }
  .nb-topbar.nb-search-open .top-search-input { height: 46px; background: rgba(36,36,40,0.96) !important; font-size: 16px !important; }
  .nb-topbar.nb-search-open .search-shortcut-hint { display: none !important; }
  .nb-topbar.nb-search-open .nb-search-close { display: inline-flex; }
  .nb-topbar.nb-search-open .nb-brand,
  .nb-topbar.nb-search-open .nb-tabs,
  .nb-topbar.nb-search-open .nb-actions > :not(.top-search-box) { visibility: hidden; }
  .nb-topbar.nb-search-open + * { pointer-events: auto; }
  .top-navbar:has(.nb-search-open) {
    background: rgba(10,10,12,0.9) !important;
    backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important;
  }
}
#searchSuggestions {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  min-width: 300px;
  z-index: 999;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 20px;
  background: rgba(28, 28, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(40px) saturate(170%);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.9);
  scrollbar-width: none;
}
@media (min-width: 1360px) { #searchSuggestions { left: auto; width: 380px; } }
#searchSuggestions.hidden { display: none !important; }
.suggestion-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border-radius: 14px; border: 0;
  background: transparent; color: var(--nb-text);
  cursor: pointer; transition: background 0.18s;
}
.suggestion-item:hover, .suggestion-item:focus-visible { background: rgba(255,255,255,0.08); }
.suggestion-poster { width: 44px; height: 66px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #1a1a1e; }
.suggestion-text { min-width: 0; }
.suggestion-text h4 { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion-text p { margin: 3px 0 0; font-size: 12.5px; color: var(--nb-text-3); }
.suggestion-empty { margin: 0; padding: 16px; font-size: 14px; color: var(--nb-text-3); }

/* ---------- Mobile bottom tab bar ---------- */
.mobile-bottom-nav {
  left: 12px !important; right: 12px !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  height: 64px !important;
  border-radius: 24px;
  padding: 0 6px !important;
  background: rgba(30, 30, 34, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(30px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(170%) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.55);
}
@media (min-width: 1024px) { .mobile-bottom-nav { display: none !important; } }
.mobile-nav-btn {
  flex: 1 1 0;
  height: 100%;
  gap: 4px !important;
  color: rgba(245, 245, 247, 0.55) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 18px !important;
}
.mobile-nav-btn.active, .mobile-nav-btn.dplus-nav-active, .mobile-nav-btn:hover { color: #fff !important; }
.mobile-nav-btn:active { transform: scale(0.94); }

/* Mobile "Menu" sheet */
.nb-sheet-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  animation: nbFadeIn 0.25s ease both;
}
.nb-sheet-backdrop.hidden { display: none !important; }
.nb-sheet {
  width: 100%; max-width: 520px;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: rgba(28, 28, 32, 0.94);
  border-top: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(40px) saturate(170%);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  animation: nbSheetUp 0.42s var(--nb-ease) both;
}
.nb-sheet-handle { width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: rgba(255,255,255,0.3); }
.nb-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; font-size: 18px; font-weight: 700; }
.nb-sheet-head .nb-icon-btn { width: 34px; height: 34px; }
.nb-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nb-sheet-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 16px;
  border-radius: 16px; border: 0;
  background: rgba(255, 255, 255, 0.07);
  color: var(--nb-text);
  font-size: 14.5px; font-weight: 600; text-align: left;
  cursor: pointer; transition: background 0.2s;
}
.nb-sheet-item:hover, .nb-sheet-item:active { background: rgba(255,255,255,0.14); }
.nb-sheet-item.hidden { display: none !important; }
#mobileMoreResellerBtn:not(.hidden) { display: flex !important; }
.nb-sheet-item-primary { background: var(--nb-text); color: #000; }
.nb-sheet-item-primary:hover { background: #fff; }
.nb-span-2 { grid-column: span 2; }

/* ---------- Hero (full-bleed) ---------- */
#heroSection {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  overflow: hidden;
}
#heroSection.hidden { display: none !important; }
.hero-card-inner {
  position: relative;
  height: clamp(560px, 86vh, 860px);
  min-height: 0 !important;
  display: flex;
  align-items: flex-end !important;
}
@media (max-width: 639px) { .hero-card-inner { height: clamp(520px, 80vh, 680px); } }
#heroContent {
  position: absolute; inset: 0;
  background-size: cover !important;
  background-position: center 22% !important;
  transform-origin: 60% 40%;
}
#heroContent.nb-hero-zoom { animation: nbKenBurns 16s ease-out both; }
.hero-vignette {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.5) 34%, rgba(0,0,0,0) 64%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0.62) 18%, rgba(0,0,0,0) 48%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 18%) !important;
}
@media (max-width: 767px) {
  .hero-vignette {
    background:
      linear-gradient(0deg, #000 0%, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0.1) 62%),
      linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 22%) !important;
  }
}
.hero-copy {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: calc(50% + 260px) !important;
  padding: 0 var(--nb-gutter) 128px !important;
  padding-left: max(var(--nb-gutter), calc((100% - var(--nb-max)) / 2 + var(--nb-gutter))) !important;
  box-sizing: border-box;
}
@media (max-width: 767px) { .hero-copy { max-width: 100% !important; padding-bottom: 96px !important; } }
.hero-copy.nb-hero-in > * { animation: nbRiseIn 0.9s var(--nb-ease) both; }
.hero-copy.nb-hero-in > *:nth-child(2) { animation-delay: 0.06s; }
.hero-copy.nb-hero-in > *:nth-child(3) { animation-delay: 0.12s; }
.hero-copy.nb-hero-in > *:nth-child(4) { animation-delay: 0.18s; }
.hero-copy.nb-hero-in > *:nth-child(5) { animation-delay: 0.24s; }
.hero-eyebrow {
  font-size: 12.5px; font-weight: 650;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,245,247,0.78);
  margin-bottom: 12px;
}
#heroTitle {
  font-size: clamp(38px, 5.4vw, 80px) !important;
  line-height: 0.96 !important;
  font-weight: 750 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 16px !important;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35) !important;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#heroMeta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: rgba(245,245,247,0.82) !important;
  margin-bottom: 14px !important;
}
#heroMeta > span:not(.nb-badge-outline):not(:last-child)::after { content: ''; }
.nb-badge-outline {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.42);
  color: rgba(245,245,247,0.9);
  line-height: 1.4;
}
#heroDesc {
  font-size: 16.5px !important;
  line-height: 1.55 !important;
  color: rgba(245,245,247,0.8) !important;
  max-width: 600px;
  margin-bottom: 26px !important;
  text-shadow: none !important;
}
@media (max-width: 639px) { #heroDesc { font-size: 14.5px !important; -webkit-line-clamp: 2 !important; margin-bottom: 20px !important; } }
.hero-actions { gap: 12px !important; }

/* Buttons (shared) */
.btn-primary {
  height: 54px;
  padding: 0 30px !important;
  border-radius: 999px !important;
  background: var(--nb-text) !important;
  color: #000 !important;
  font-size: 16.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  gap: 10px !important;
  transition: transform 0.2s var(--nb-ease), background 0.2s !important;
}
.btn-primary:hover { background: #fff !important; transform: scale(1.04) !important; }
.btn-primary:active { transform: scale(0.97) !important; }
.btn-glass {
  height: 54px;
  padding: 0 24px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.14) !important;
  color: var(--nb-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  gap: 9px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: transform 0.2s var(--nb-ease), background 0.2s !important;
}
.btn-glass:hover { background: rgba(255,255,255,0.24) !important; transform: scale(1.04) !important; }
.btn-icon-circle {
  width: 54px !important; height: 54px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.14) !important;
  color: var(--nb-text) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  transition: transform 0.2s var(--nb-ease), background 0.2s !important;
}
.btn-icon-circle:hover { background: rgba(255,255,255,0.24) !important; transform: scale(1.06) !important; }
.btn-icon-circle.is-in-list { background: var(--nb-text) !important; color: #000 !important; }
.nb-icon-plus { font-size: 26px; font-weight: 300; line-height: 1; }
@media (max-width: 639px) {
  .hero-actions .btn-primary, .hero-actions .btn-glass { height: 48px; flex: 1 1 0; padding: 0 16px !important; font-size: 15px !important; }
  .hero-actions .btn-icon-circle { width: 48px !important; height: 48px !important; }
}

.hero-controls {
  position: absolute;
  z-index: 12;
  right: max(var(--nb-gutter), calc((100% - var(--nb-max)) / 2 + var(--nb-gutter)));
  bottom: 136px;
  display: flex; align-items: center; gap: 14px;
}
@media (max-width: 767px) { .hero-controls { right: 0; left: 0; bottom: 70px; justify-content: center; } }
#heroDots { position: static !important; display: flex !important; align-items: center; gap: 7px !important; }
.hero-dot {
  position: relative;
  width: 7px !important; height: 7px !important;
  padding: 0; border: 0;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.32) !important;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.5s var(--nb-ease), background 0.2s !important;
}
.hero-dot:hover { background: rgba(255,255,255,0.6) !important; }
.hero-dot.active { width: 38px !important; background: rgba(255,255,255,0.32) !important; }
.hero-dot-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; border-radius: 4px; animation: nbDotFill 12s linear forwards; }
.hero-nav-arrow {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  width: 40px !important; height: 40px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 0 !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hero-nav-arrow:hover { background: rgba(255,255,255,0.26) !important; transform: scale(1.06) !important; }
@media (max-width: 767px) { .hero-nav-arrow { display: none !important; } }

/* Mood chips overlap the hero bottom */
.nb-mood-rail {
  position: relative;
  z-index: 15;
  display: flex; gap: 10px;
  overflow-x: auto;
  margin: -64px calc(-1 * var(--nb-gutter)) 8px;
  padding: 4px var(--nb-gutter) 8px;
  scroll-padding-left: var(--nb-gutter);
}
.nb-mood-rail.hidden { display: none !important; }
@media (max-width: 767px) { .nb-mood-rail { margin-top: -44px; } }
.mood-chip, .nb-genre-pill {
  flex-shrink: 0;
  height: 38px;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.1) !important;
  color: var(--nb-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background 0.2s, transform 0.2s var(--nb-ease) !important;
}
.mood-chip:hover, .nb-genre-pill:hover { background: rgba(255,255,255,0.2) !important; transform: none !important; }
.mood-chip:active { transform: scale(0.96) !important; }
.nb-genre-pill.nb-pill-active { background: var(--nb-text) !important; color: #000 !important; }

/* ---------- Rows ---------- */
#homeView { display: block; }
#homeView > * + * { margin-top: 0 !important; }
#homeView.hidden, #extraHomeRows.hidden { display: none !important; }
.row-shell { margin: 30px 0 0 !important; }
.row-header { margin-bottom: 0 !important; gap: 12px; }
.row-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--nb-text) !important;
}
@media (min-width: 1024px) { .row-title { font-size: 23px !important; } }
.explore-btn {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--nb-text-3) !important;
  padding: 4px 6px !important;
  background: transparent !important;
  white-space: nowrap;
}
.explore-btn:hover { color: var(--nb-text) !important; background: transparent !important; }
.row-arrow-btn {
  width: 32px !important; height: 32px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.08) !important;
  color: var(--nb-text) !important;
}
.row-arrow-btn:hover { background: rgba(255,255,255,0.2) !important; }
.row-nav-arrows { margin-right: 4px !important; }
.row-shell > .overflow-x-auto,
.nb-rail {
  display: flex;
  gap: 18px !important;
  overflow-x: auto;
  overflow-y: visible;
  margin: 0 calc(-1 * var(--nb-gutter)) !important;
  padding: 16px var(--nb-gutter) 20px !important;
  scroll-padding-left: var(--nb-gutter);
  scroll-snap-type: none !important;
  scrollbar-width: none;
  align-items: flex-start;
}
.row-shell > .overflow-x-auto::-webkit-scrollbar, .nb-rail::-webkit-scrollbar { display: none; }
@media (max-width: 639px) { .row-shell > .overflow-x-auto, .nb-rail { gap: 12px !important; padding-top: 12px !important; padding-bottom: 14px !important; } }

/* ---------- Cards ---------- */
.movie-card {
  flex: 0 0 var(--nb-card-w) !important;
  width: var(--nb-card-w) !important;
  max-width: var(--nb-card-w) !important;
  border-radius: 0 !important;
  scroll-snap-align: start;
  transform: none !important;
  transition: none !important;
  outline: none;
}
.movie-card:hover { transform: none !important; z-index: 3; }
.poster-container {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--nb-radius-card) !important;
  border: 0 !important;
  background: #141418 !important;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.8) !important;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.5s var(--nb-ease), box-shadow 0.5s var(--nb-ease) !important;
  cursor: pointer;
  outline: none;
}
.poster-container img { transition: filter 0.4s; }
@media (hover: hover) {
  .movie-card:hover .poster-container,
  .poster-container:focus-visible {
    transform: scale(1.06) translateY(-5px);
    box-shadow: 0 28px 50px -16px rgba(0,0,0,0.95), 0 0 0 2px rgba(255,255,255,0.92) !important;
  }
}
.poster-container:focus-visible { transform: scale(1.06) translateY(-5px); box-shadow: 0 0 0 3px #fff !important; }
.card-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.26);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 20;
  pointer-events: none;
}
.card-play-circle {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-left: 3px;
}
@media (hover: hover) { .movie-card:hover .card-play-overlay, .nb-ep-card:hover .card-play-overlay { opacity: 1; } }
.card-play-pill { display: none !important; }
.card-meta { padding: 10px 2px 0; min-width: 0; text-align: left; }
.card-meta h3 {
  margin: 0;
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  color: var(--nb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: none !important; letter-spacing: 0 !important;
}
.card-meta p {
  margin: 3px 0 0;
  font-size: 12.5px; line-height: 1.35;
  color: var(--nb-text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-meta-dim { color: var(--nb-text-3); }
.fav-btn {
  top: 8px !important; right: 8px !important;
  width: 32px !important; height: 32px !important;
  border: 0 !important;
  color: #fff !important;
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  font-size: 0 !important;
  z-index: 40 !important;
  transition: opacity 0.2s, transform 0.2s var(--nb-ease), background 0.2s !important;
}
.fav-btn svg { width: 16px; height: 16px; }
.fav-btn:hover { transform: scale(1.1) !important; background: rgba(0,0,0,0.75) !important; }
.fav-btn.is-in-list { background: var(--nb-text) !important; color: #000 !important; opacity: 1; }
@media (hover: none) { .fav-btn { opacity: 1 !important; width: 28px !important; height: 28px !important; } .fav-btn svg { width: 14px; height: 14px; } }
@media (hover: hover) { .movie-card:hover .fav-btn { opacity: 1; transform: none; } }
.card-provider-badge {
  position: absolute; left: 8px; bottom: 8px; z-index: 25;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.card-provider-badge.is-soon, .card-provider-badge.is-new { background: var(--nb-text); color: #000; }
.card-vip-badge {
  position: absolute; top: 8px; left: 8px; z-index: 35;
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: #000; background: rgba(245,245,247,0.95);
  pointer-events: none;
}
.card-remove-btn {
  position: absolute; top: 8px; left: 8px; z-index: 40;
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.card-remove-btn:hover { background: rgba(255,255,255,0.9); color: #000; }
@media (hover: hover) { .movie-card:hover .card-remove-btn { opacity: 1; } }
@media (hover: none) { .card-remove-btn { opacity: 1; } }
.resume-bar {
  position: absolute !important;
  left: 12px !important; right: 12px !important; bottom: 10px !important;
  height: 4px !important;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255,255,255,0.28) !important;
  z-index: 26 !important;
}
.resume-progress { display: block; height: 100%; background: #fff !important; box-shadow: none !important; border-radius: 3px; }

/* Landscape (Lanjutkan Menonton) */
.movie-card.is-landscape {
  flex: 0 0 var(--nb-land-w) !important;
  width: var(--nb-land-w) !important;
  max-width: var(--nb-land-w) !important;
}
.movie-card.is-landscape .poster-container { aspect-ratio: 16 / 9; }
.movie-card.is-landscape .poster-container::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 45%), linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 40%);
  pointer-events: none;
  z-index: 10;
}
.card-landscape-title {
  position: absolute; left: 14px; right: 50px; bottom: 22px; z-index: 22;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15;
  color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.movie-card.is-landscape .card-meta p { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.movie-card.is-landscape .card-meta p > span:first-child { color: var(--nb-text); font-weight: 600; }
#rowHistory .movie-card.is-landscape { flex: 0 0 var(--nb-land-w) !important; width: var(--nb-land-w) !important; max-width: var(--nb-land-w) !important; }
#rowHistory .movie-card.is-landscape .poster-container { aspect-ratio: 16 / 9 !important; border-radius: var(--nb-radius-card) !important; }

/* Top 10 */
.top10-item { display: flex; align-items: flex-end; flex-shrink: 0; scroll-snap-align: start; }
.top10-item .movie-card { flex-basis: calc(var(--nb-card-w) * 0.86) !important; width: calc(var(--nb-card-w) * 0.86) !important; max-width: calc(var(--nb-card-w) * 0.86) !important; position: relative; z-index: 1; }
.netflix-number {
  font-size: calc(var(--nb-card-w) * 1.02) !important;
  line-height: 0.74 !important;
  font-weight: 800 !important;
  letter-spacing: -0.08em;
  color: #000 !important;
  -webkit-text-stroke: 2px rgba(255,255,255,0.45) !important;
  margin-right: calc(var(--nb-card-w) * -0.14) !important;
  margin-bottom: 34px;
  font-family: var(--nb-font) !important;
  z-index: 0 !important;
  transition: -webkit-text-stroke-color 0.3s;
}
.top10-item:hover .netflix-number { -webkit-text-stroke-color: rgba(255,255,255,0.85) !important; }
#rowTopWeekly { gap: 6px !important; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, #121215 0%, #1d1d22 50%, #121215 100%) !important;
  background-size: 200% 100% !important;
  border-radius: var(--nb-radius-card) !important;
}

/* Actor chips (home row) */
.top-actor-chip { flex: 0 0 auto; width: 118px; display: flex; flex-direction: column; align-items: center; text-align: center; scroll-snap-align: start; }
.actor-avatar-wrap { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.actor-circle {
  width: 112px !important; height: 112px !important;
  border: 0 !important;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.8);
  transition: transform 0.45s var(--nb-ease), box-shadow 0.45s var(--nb-ease) !important;
}
.actor-avatar-wrap:hover .actor-circle, .actor-avatar-wrap:focus-visible .actor-circle { transform: scale(1.07) !important; box-shadow: 0 0 0 2px #fff, 0 20px 40px -14px rgba(0,0,0,0.9); }
.actor-rank {
  position: absolute; left: -2px; bottom: 2px; z-index: 2;
  min-width: 28px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  font-size: 11px; font-weight: 750;
  display: inline-flex; align-items: center; justify-content: center;
  color: #000; background: var(--nb-text);
}
.top-actor-chip p:first-of-type { margin-top: 12px !important; font-size: 13.5px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; width: 118px !important; }
.top-actor-chip p:last-of-type { font-size: 11.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--nb-text-3) !important; width: 118px !important; }
@media (max-width: 639px) { .top-actor-chip { width: 92px; } .actor-circle { width: 88px !important; height: 88px !important; } .top-actor-chip p { width: 92px !important; } }

/* Actor result cards (grid view) */
.actor-result-card {
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,0.05);
  transition: transform 0.4s var(--nb-ease), background 0.2s;
}
.actor-result-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.08); }
.actor-result-photo { position: relative; padding: 0; border: 0; cursor: pointer; background: #141418; aspect-ratio: 3 / 4; display: block; width: 100%; }
.actor-result-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actor-result-rank { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; color: #000; background: var(--nb-text); }
.actor-result-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.actor-result-kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-text-3); }
.actor-result-body h3 { margin: 0; font-size: 15px; font-weight: 650; }
.actor-result-body p:not(.actor-result-kicker) { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--nb-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.actor-result-body button { align-self: flex-start; margin-top: 6px; height: 32px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 650; color: #000; background: var(--nb-text); }

/* ---------- Platform hub ---------- */
#nbBrandHub { margin: 30px 0 0 !important; }
#nbBrandHub.hidden { display: none !important; }
#nbBrandHub .row-header { margin-bottom: 0 !important; }
.brand-hub-rail {
  gap: 14px !important;
  margin: 0 calc(-1 * var(--nb-gutter)) !important;
  padding: 16px var(--nb-gutter) 14px !important;
  scroll-snap-type: x proximity !important;
  scroll-padding-left: var(--nb-gutter);
}
.brand-tile {
  flex: 0 0 168px !important;
  height: 96px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)) !important;
  transition: transform 0.45s var(--nb-ease), background 0.25s, box-shadow 0.45s var(--nb-ease) !important;
}
@media (min-width: 1024px) { .brand-tile { flex-basis: 196px !important; height: 108px !important; } }
.brand-tile:hover, .brand-tile:focus-visible {
  transform: scale(1.05) !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 20px 40px -18px rgba(0,0,0,0.9) !important;
  border-color: transparent !important;
}
.brand-tile span { color: #fff !important; }
.nb-brand-word { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #fff; white-space: nowrap; }
@media (min-width: 1024px) { .nb-brand-word { font-size: 19px; } }
.brand-tile > div { display: flex; align-items: center; gap: 4px; }
.nb-brand-apple { width: 20px; height: 20px; fill: #fff; margin-top: -3px; }
.brand-hub-arrow { background: rgba(30,30,34,0.8) !important; border: 0 !important; width: 38px !important; height: 38px !important; }
.brand-hub-arrow.left-arrow { left: calc(-1 * var(--nb-gutter) + 8px) !important; }
.brand-hub-arrow.right-arrow { right: calc(-1 * var(--nb-gutter) + 8px) !important; }
@media (max-width: 767px) { .brand-hub-arrow { display: none !important; } }

/* ---------- Jelajahi / Filter / Stats / Tips ---------- */
.nb-explore { margin-top: 40px !important; }
.nb-genre-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) { .nb-genre-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1280px) { .nb-genre-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.nb-genre-tile {
  position: relative;
  height: 96px;
  padding: 14px 16px;
  display: flex; align-items: flex-end;
  border: 0; border-radius: 16px;
  text-align: left;
  color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(85% 70% at 25% 15%, hsla(var(--h), 70%, 56%, 0.8) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(90% 85% at 90% 95%, hsla(calc(var(--h) + 50), 66%, 36%, 0.9) 0%, rgba(0,0,0,0) 66%),
    linear-gradient(160deg, hsl(var(--h), 40%, 17%) 0%, #060608 100%);
  transition: transform 0.45s var(--nb-ease), box-shadow 0.45s var(--nb-ease);
}
.nb-genre-tile span { position: relative; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.nb-genre-tile:hover, .nb-genre-tile:focus-visible { transform: scale(1.04); box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 20px 40px -18px rgba(0,0,0,0.9); }
@media (min-width: 1024px) { .nb-genre-tile { height: 108px; } }

.nb-filter-card {
  margin-top: 18px;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
}
.nb-filter-head h3 { margin: 0; font-size: 17px; font-weight: 650; }
.nb-filter-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--nb-text-3); }
.nb-filter-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 768px) { .nb-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nb-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: end; } }
.nb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nb-field > span { font-size: 12px; font-weight: 600; color: var(--nb-text-3); padding-left: 4px; }
.nb-field select, .filter-select, .nb-sortbar select {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 46px;
  padding: 0 38px 0 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background-color: rgba(255,255,255,0.06) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-opacity='0.6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  color: var(--nb-text) !important;
  font-size: 14px !important;
  font-weight: 550 !important;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.nb-field select:hover, .filter-select:hover { background-color: rgba(255,255,255,0.1) !important; }
.nb-field select:focus, .filter-select:focus { border-color: rgba(255,255,255,0.45) !important; }
.nb-field select option, .filter-select option { color: #000; background: #fff; }
.nb-filter-actions { display: flex; gap: 8px; grid-column: span 2; }
@media (min-width: 768px) { .nb-filter-actions { grid-column: auto; } }
@media (min-width: 1200px) { .nb-filter-actions { grid-column: auto; } }
.nb-btn-solid {
  flex: 1 1 auto;
  height: 46px; padding: 0 22px;
  border-radius: 999px; border: 0;
  background: var(--nb-text); color: #000;
  font-size: 14.5px; font-weight: 650;
  cursor: pointer;
  transition: transform 0.2s var(--nb-ease), background 0.2s;
}
.nb-btn-solid:hover { background: #fff; transform: scale(1.03); }
.nb-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 999px; border: 0;
  background: rgba(255,255,255,0.1);
  color: var(--nb-text);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s var(--nb-ease);
}
.nb-btn-ghost:hover { background: rgba(255,255,255,0.2); transform: scale(1.03); color: #fff; }
.nb-filter-actions .nb-btn-ghost { height: 46px; }

.nb-stats-strip {
  margin-top: 14px;
  margin-bottom: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.nb-stat {
  display: inline-flex; align-items: baseline; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.nb-stat strong { font-size: 15px; font-weight: 700; color: var(--nb-text); }
.nb-stat span { font-size: 13px; color: var(--nb-text-3); }
#comfortToggle { margin-left: auto; }
@media (max-width: 639px) { #comfortToggle { margin-left: 0; } }

.nb-tips-card {
  margin-top: 40px !important;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 20px;
  padding: 20px 24px;
  border-radius: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
}
.nb-tips-card.hidden { display: none !important; }
.nb-tips-main { display: flex; align-items: center; gap: 16px; flex: 1 1 420px; min-width: 0; }
.nb-tips-icon { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); }
.nb-tips-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15.5px; font-weight: 650; }
.nb-online-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--nb-text-2); }
.nb-tips-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--nb-text-3); }
.nb-tips-text b { color: var(--nb-text); font-weight: 600; }
.nb-tips-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nb-tips-actions .nb-icon-btn { width: 36px; height: 36px; background: transparent; }
.nb-tips-actions .nb-icon-btn:hover { background: rgba(255,255,255,0.1); }

.nb-footer {
  margin-top: 64px;
  padding: 28px 0 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 14px 24px;
  font-size: 13px;
  color: var(--nb-text-3);
}
.nb-footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.nb-footer-links button { border: 0; background: none; padding: 4px 0; color: var(--nb-text-3); font-size: 13px; cursor: pointer; }
.nb-footer-links button:hover { color: var(--nb-text); }

/* ---------- Grid / category view ---------- */
#gridSection { padding-top: calc(var(--nb-header-h) + 28px) !important; }
#gridSection.hidden { display: none !important; }
.nb-grid-title {
  margin: 0 !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.03em;
  text-align: left !important;
  text-transform: none !important;
  color: var(--nb-text);
}
#actorFilterBar, #searchFilterBar { justify-content: flex-start !important; }
#actorFilterBar button, #searchFilterBar button { height: 36px; padding: 0 18px !important; text-transform: none !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.nb-sortbar {
  margin: 0 !important;
  max-width: none !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
.nb-sortbar .border-b { border-color: rgba(255,255,255,0.08) !important; }
.nb-sortbar-title { font-size: 15px; font-weight: 650; color: var(--nb-text); }
.nb-sortbar label { font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--nb-text-3) !important; padding-left: 4px; }
#categorySortHint { color: var(--nb-text-3) !important; font-size: 13px !important; }
#gridResults {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important;
  gap: 28px 16px !important;
}
@media (min-width: 640px) { #gridResults { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)) !important; gap: 32px 20px !important; } }
@media (min-width: 1280px) { #gridResults { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important; } }
#gridResults .movie-card, #similarContainer .movie-card { flex: none !important; width: 100% !important; max-width: 100% !important; }
#gridResults .movie-card.is-landscape { grid-column: span 2; }
#gridResults > .nb-empty-state, #gridResults > p { grid-column: 1 / -1; }
.nb-load-more {
  height: 48px; padding: 0 30px;
  border-radius: 999px; border: 0;
  background: rgba(255,255,255,0.1);
  color: var(--nb-text);
  font-size: 14.5px; font-weight: 650;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--nb-ease);
}
.nb-load-more:hover { background: var(--nb-text); color: #000; transform: scale(1.03); }
.nb-load-more.hidden { display: none !important; }
.nb-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 48px 20px;
  text-align: center;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
}
.nb-empty-state strong { font-size: 17px; font-weight: 650; color: var(--nb-text); }
.nb-empty-state span { font-size: 14px; color: var(--nb-text-3); max-width: 420px; }
.nb-empty-state.is-inline { flex: 1 0 100%; padding: 32px 20px; }

/* ---------- Detail sheet ---------- */
#detailModal { background: #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; scroll-behavior: smooth; }
#detailBackdrop, .detail-trailer-preview-container, .detail-backdrop-gradient { height: min(86vh, 860px) !important; min-height: 560px !important; }
#detailBackdrop { filter: none !important; background-position: center 22% !important; }
.detail-backdrop-gradient {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 36%, rgba(0,0,0,0) 68%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,0.72) 16%, rgba(0,0,0,0) 46%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 16%) !important;
}
@media (max-width: 767px) {
  #detailBackdrop, .detail-trailer-preview-container, .detail-backdrop-gradient { height: 70vh !important; min-height: 460px !important; }
  .detail-backdrop-gradient { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.8) 34%, rgba(0,0,0,0.1) 70%), linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 20%) !important; }
}
.nb-detail-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 470;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--nb-gutter) 16px;
  pointer-events: none;
}
.nb-detail-topbar > *, .nb-detail-topbar-right > * { pointer-events: auto; }
.nb-detail-topbar { transition: background 0.3s var(--nb-ease); }
#detailModal.nb-scrolled .nb-detail-topbar {
  background: rgba(12,12,14,0.72);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nb-detail-topbar-right { display: flex; align-items: center; gap: 10px; }
.nb-glass-circle, .nb-glass-pill {
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer;
  color: var(--nb-text);
  background: rgba(30,30,34,0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: background 0.2s, transform 0.2s var(--nb-ease);
}
.nb-glass-circle { width: 44px; border-radius: 50%; }
.nb-glass-pill { padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.nb-glass-pill.hidden { display: none !important; }
.nb-glass-circle:hover, .nb-glass-pill:hover { background: rgba(255,255,255,0.22); transform: scale(1.05); }
.nb-sound-icon { display: inline-flex; }
.nb-detail-body {
  position: relative; z-index: 460;
  max-width: var(--nb-max);
  margin: 0 auto;
  padding: 0 var(--nb-gutter) 80px;
}
.nb-detail-hero {
  min-height: min(86vh, 860px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px 0 56px;
  max-width: 700px;
  box-sizing: border-box;
}
@media (max-width: 767px) { .nb-detail-hero { min-height: 70vh; padding: 96px 0 32px; } }
.nb-detail-eyebrow { font-size: 12.5px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,245,247,0.78); }
.nb-detail-title {
  margin: 14px 0 0;
  font-size: clamp(36px, 5.6vw, 82px);
  line-height: 0.95;
  font-weight: 750;
  letter-spacing: -0.045em;
  color: #fff;
  text-wrap: balance;
}
.nb-detail-meta {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  font-size: 15px; font-weight: 500;
  color: rgba(245,245,247,0.82);
}
.nb-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(245,245,247,0.55); }
#detailRating { color: #fff; font-weight: 600; }
.nb-detail-overview {
  margin: 16px 0 0;
  font-size: 16.5px; line-height: 1.6;
  color: rgba(245,245,247,0.8);
  max-width: 640px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 639px) { .nb-detail-overview { font-size: 15px; -webkit-line-clamp: 3; } }
.nb-detail-actions { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 639px) {
  .nb-detail-actions .btn-primary { flex: 1 1 100%; height: 50px; }
  .nb-detail-actions .btn-glass { flex: 1 1 0; min-width: 0; height: 48px; padding: 0 12px !important; font-size: 14px !important; white-space: nowrap; gap: 7px !important; }
  .nb-detail-actions .btn-icon-circle { width: 48px !important; height: 48px !important; }
}
.nb-avail-pill {
  align-self: flex-start;
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--nb-text);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nb-avail-pill.hidden { display: none !important; }
.nb-detail-tabs {
  display: flex; gap: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  overflow-x: auto; scrollbar-width: none;
}
.nb-detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab-btn {
  position: relative;
  padding: 14px 0 16px !important;
  font-size: 16px !important; font-weight: 600 !important;
  color: rgba(245,245,247,0.56) !important;
  white-space: nowrap;
}
.detail-tab-btn.hidden { display: none !important; }
.detail-tab-btn:hover { color: var(--nb-text) !important; }
.detail-tab-btn.active { color: var(--nb-text) !important; }
.detail-tab-btn.active::after { left: 0 !important; right: 0 !important; bottom: -1px !important; height: 2px !important; }
.nb-detail-panel { padding-top: 10px; animation: nbFadeIn 0.35s ease both; }
.nb-detail-panel.hidden { display: none !important; }
.nb-detail-ep-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 0; }
.nb-muted { font-size: 14px; color: var(--nb-text-3); }
.nb-segmented {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  max-width: 100%;
  overflow-x: auto;
}
.nb-segmented.hidden { display: none !important; }
.nb-seg-btn {
  flex-shrink: 0;
  height: 34px; padding: 0 16px;
  border-radius: 999px; border: 0;
  background: transparent;
  color: var(--nb-text);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.nb-seg-btn:hover { background: rgba(255,255,255,0.1); }
.nb-seg-btn.is-active { background: var(--nb-text); color: #000; }
.nb-ep-card {
  flex: 0 0 300px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 0; border: 0;
  background: transparent; color: var(--nb-text);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
@media (max-width: 639px) { .nb-ep-card { flex-basis: 248px; } }
.nb-ep-card.is-skeleton { pointer-events: none; }
.nb-ep-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: #141418;
  margin-bottom: 8px;
  transition: transform 0.5s var(--nb-ease), box-shadow 0.5s var(--nb-ease);
}
.nb-ep-thumb.skeleton { aspect-ratio: 16 / 9; }
.nb-ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) { .nb-ep-card:hover .nb-ep-thumb, .nb-ep-card:focus-visible .nb-ep-thumb { transform: scale(1.04) translateY(-3px); box-shadow: 0 0 0 2px #fff, 0 24px 40px -16px rgba(0,0,0,0.9); } }
.nb-ep-card:focus-visible { outline: none; }
.nb-ep-card.is-current .nb-ep-thumb { box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
.nb-ep-now { position: absolute; left: 10px; top: 10px; z-index: 30; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #000; background: var(--nb-text); }
.nb-ep-num { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-text-3); }
.nb-ep-title { font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.nb-ep-desc { font-size: 13.5px; line-height: 1.45; color: var(--nb-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-cast-card { flex: 0 0 auto; width: 128px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; scroll-snap-align: start; }
.nb-cast-photo { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; background: #141418; margin-bottom: 8px; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.8); }
.nb-cast-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.nb-cast-role { font-size: 12.5px; color: var(--nb-text-3); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639px) { .nb-cast-card { width: 96px; } .nb-cast-photo { width: 88px; height: 88px; } }
.nb-info-grid { padding-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 32px; }
.nb-info-k { font-size: 13px; font-weight: 600; color: var(--nb-text-3); }
.nb-info-v { margin-top: 5px; font-size: 15.5px; font-weight: 500; color: var(--nb-text); line-height: 1.45; }
#detailSimilarContainer .movie-card { flex-basis: var(--nb-card-w) !important; }

/* Trailer modal */
#trailerModal { background: rgba(0,0,0,0.85) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
#trailerModal:not(.hidden) { display: flex !important; }
#trailerModal > div { border-radius: 22px !important; border: 0 !important; box-shadow: 0 40px 100px rgba(0,0,0,0.8) !important; }
#trailerModal > button { border: 0 !important; background: rgba(30,30,34,0.7) !important; width: 44px !important; height: 44px !important; }

/* ---------- Player ---------- */
#playerContainer { background: #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#playerModalBox {
  max-width: none !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}
#playerModalBox > .flex:first-child {
  position: sticky; top: 0; z-index: 30;
  margin: 0 !important;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px !important;
  border-bottom: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
}
@media (min-width: 1024px) { #playerModalBox > .flex:first-child { padding: 18px 32px !important; } }
#playerModalBox > .flex:first-child button { border: 0 !important; }
#playerModalBox > .flex:first-child > div:first-child > button { width: 42px !important; height: 42px !important; background: rgba(255,255,255,0.1) !important; }
#playerHeaderTitle { font-size: 16px !important; font-weight: 650 !important; }
#btnBrightness, #btnPlayerShare, .nb-player-chip {
  height: 38px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.1) !important;
  color: var(--nb-text) !important;
  font-size: 13px !important; font-weight: 600 !important;
  align-items: center; gap: 7px;
  cursor: pointer;
  transition: background 0.2s;
}
#btnBrightness:hover, #btnPlayerShare:hover, .nb-player-chip:hover { background: rgba(255,255,255,0.2) !important; }
.nb-player-chip.is-active { background: var(--nb-text) !important; color: #000 !important; }
#playerCloseBtn { width: 38px !important; height: 38px !important; background: rgba(255,255,255,0.1) !important; }
#playerCloseBtn:hover { background: rgba(255,255,255,0.24) !important; }
#playerCloseBtn.need-confirm { background: var(--nb-text) !important; color: #000 !important; }
.nb-player-grid { padding: 0 16px 24px; gap: 24px !important; }
@media (min-width: 1024px) { .nb-player-grid { padding: 0 32px 28px; } }
#playerAmbientGlow { inset: -24px !important; opacity: 0.5 !important; filter: blur(60px) saturate(150%); background-color: transparent; border-radius: 40px !important; }
.nb-player-left > .space-y-1\.5, .nb-player-meta { position: relative; z-index: 12; }
#playerModalBox .aspect-video { border-radius: 18px !important; border: 0 !important; box-shadow: 0 40px 90px -24px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.06) !important; }
@media (max-width: 1023px) { #playerModalBox .aspect-video { border-radius: 14px !important; } }
#videoPlayer, #playerBackdropPreview { border-radius: inherit !important; }
#playingTitle { color: #fff !important; font-size: clamp(22px, 2.4vw, 30px) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.02em !important; }
#playerOverview { color: var(--nb-text-3) !important; font-size: 14px !important; }
.nb-player-meta > div:nth-child(2) { color: var(--nb-text-2) !important; font-weight: 500 !important; }
#playerRating { color: var(--nb-text) !important; }
#currentServerNotice:not(.hidden) { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--nb-text-3); }
.server-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.server-pill-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.1) !important;
  color: var(--nb-text) !important;
  font-size: 14px !important; font-weight: 600 !important;
  box-shadow: none !important;
}
.server-pill-btn:hover { background: rgba(255,255,255,0.2) !important; }
.server-pill-btn.active-server { background: var(--nb-text) !important; color: #000 !important; }
.server-pill-q { font-size: 11px; font-weight: 700; opacity: 0.65; }
.server-flyout {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(28,28,32,0.72);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 640px) { .server-flyout { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .server-flyout { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.server-flyout.hidden { display: none !important; }
.server-flyout-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 42px; padding: 0 12px;
  border-radius: 12px; border: 0;
  background: rgba(255,255,255,0.06);
  color: var(--nb-text);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.server-flyout-item:hover { background: rgba(255,255,255,0.14); }
.server-flyout-item.is-active { background: var(--nb-text); color: #000; }
.server-flyout-q { font-size: 10.5px; font-weight: 700; opacity: 0.65; }

.nb-player-right {
  background: rgba(28, 28, 32, 0.62) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(40px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
  box-shadow: none !important;
  border-radius: 24px !important;
  padding: 14px !important;
  align-self: flex-start;
}
@media (min-width: 1024px) {
  .nb-player-right { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: hidden; display: flex; flex-direction: column; }
  .nb-player-right > div:first-child { min-height: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
  .nb-ep-list { max-height: calc(100vh - 330px) !important; }
  .nb-server-list { max-height: calc(100vh - 380px); overflow-y: auto; }
  .nb-sim-grid { max-height: calc(100vh - 230px) !important; }
}
.nb-ptabs {
  display: flex; gap: 4px; padding: 4px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow-x: auto;
}
.nb-ptab {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border-radius: 999px; border: 0;
  background: transparent;
  color: rgba(245,245,247,0.8);
  font-size: 13.5px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.nb-ptab:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nb-ptab.is-active { background: var(--nb-text); color: #000; }
.nb-ptab.hidden { display: none !important; }
.nb-ptab .nb-live-dot { width: 6px; height: 6px; background: currentColor; }
.nb-ptab-badge { display: none; }
.nb-season-pill {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border-radius: 999px; border: 0;
  background: rgba(255,255,255,0.08);
  color: var(--nb-text);
  font-size: 13.5px; font-weight: 650;
}
.nb-season-pill.hidden { display: none !important; }
.nb-ep-list { max-height: 420px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.player-episode-item {
  width: 100%;
  display: flex !important; align-items: center; gap: 12px !important;
  padding: 7px !important;
  border-radius: 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--nb-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s !important;
}
.player-episode-item:hover { background: rgba(255,255,255,0.07) !important; }
.player-episode-item.active-ep { background: rgba(255,255,255,0.12) !important; }
.player-episode-item.active-ep::before { display: none !important; }
.player-episode-thumb { position: relative; flex: 0 0 116px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #141418; }
.player-episode-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-episode-now { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(0,0,0,0.45); }
.player-episode-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.player-episode-sub { font-size: 12px; color: var(--nb-text-3); }
.player-episode-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#playerEpNavBottom { margin-top: 12px !important; padding-top: 12px !important; border-color: rgba(255,255,255,0.08) !important; gap: 8px !important; }
#playerEpNavBottom.hidden { display: none !important; }
#playerEpNavBottom button { height: 42px; border: 0 !important; border-radius: 999px !important; font-size: 13.5px !important; font-weight: 650 !important; background: rgba(255,255,255,0.1) !important; }
#playerEpNavBottom button:last-child { background: var(--nb-text) !important; color: #000 !important; }
.nb-server-list { display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.server-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 14px; border: 0;
  background: transparent;
  color: var(--nb-text);
  text-align: left; cursor: pointer;
  transition: background 0.2s;
}
.server-list-item:hover { background: rgba(255,255,255,0.07); }
.server-list-item.is-active { background: rgba(255,255,255,0.12); }
.server-list-num {
  flex: 0 0 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 750;
  background: rgba(255,255,255,0.08);
}
.server-list-item.is-active .server-list-num { background: var(--nb-text); color: #000; }
.server-list-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.server-list-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.server-list-q { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.3); color: var(--nb-text-2); }
.server-list-desc { font-size: 12px; color: var(--nb-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-list-check { display: inline-flex; flex-shrink: 0; }
#playerAdguardNotice { border: 0 !important; background: rgba(255,255,255,0.05) !important; border-radius: 16px !important; }
#playerAdguardNotice summary span:first-child { color: var(--nb-text) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13.5px; }
#playerAdguardNotice svg { color: currentColor !important; }
#similarContainer .card-meta h3 { font-size: 13px; }

/* Cinema (theatre) mode — desktop */
@media (min-width: 1024px) {
  body.nb-cinema .nb-player-right,
  body.nb-cinema .nb-player-meta { display: none !important; }
  body.nb-cinema .nb-player-left { width: 100% !important; align-items: center; }
  body.nb-cinema .nb-player-left > .relative { width: min(100%, calc((100vh - 170px) * 16 / 9)) !important; }
  body.nb-cinema .nb-player-left > .space-y-1\.5 { width: min(100%, calc((100vh - 170px) * 16 / 9)); }
}

/* Nobar panel & drawer */
#playerRightNobarContent { gap: 12px; }
#nobarChatContainer { background: rgba(0,0,0,0.25) !important; border: 0 !important; border-radius: 16px !important; }
#nobarChatInput, #nobarDrawerChatInput { border-radius: 999px !important; height: 42px; padding: 0 16px !important; font-size: 14px !important; }
#nobarChatSendBtn, #nobarDrawerChatSendBtn { border-radius: 999px !important; height: 42px; padding: 0 18px !important; font-size: 13.5px !important; }
.nobar-chat-me { background: rgba(255,255,255,0.88) !important; color: #000 !important; border: 0 !important; }
.nobar-chat-other { background: rgba(255,255,255,0.09) !important; border: 0 !important; }
.nobar-countdown-ring { animation: nobar-pulse-ring-mono 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; }
@keyframes nobar-pulse-ring-mono { 0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 70% { transform: scale(1.06); box-shadow: 0 0 0 24px rgba(255,255,255,0); } 100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
#nobarGlassDrawer { background: rgba(22,22,26,0.94) !important; }
#playerNobarFloatingBtn:not(.hidden) { display: inline-flex !important; }
#playerNobarFloatingBtn { border-color: rgba(255,255,255,0.18) !important; }

/* ---------- Modals (shared polish) ---------- */
#nbVoucherModal > div, #nobarModalCard, #nbQrisPaymentModal > div, #nbResellerRegisterModal > div, #nbResellerDashboardModal > div, #nbGuestLockModal > div {
  border-color: rgba(255,255,255,0.1) !important;
  background-color: rgba(22,22,26,0.86) !important;
  backdrop-filter: blur(50px) saturate(170%);
  -webkit-backdrop-filter: blur(50px) saturate(170%);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.95) !important;
}
#nbVoucherModal, #nobarModal, #nbQrisPaymentModal, #nbGuestLockModal, #nbResellerRegisterModal, #nbResellerDashboardModal { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nb-login-card {
  background: rgba(22,22,26,0.86) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 28px !important;
  backdrop-filter: blur(50px) saturate(170%) !important;
}
.nb-form-header h2 { font-weight: 700 !important; letter-spacing: -0.02em; }
.nb-form-header p { font-size: 13.5px !important; line-height: 1.5; color: var(--nb-text-3) !important; }
.nb-input-group input { height: 48px; border-radius: 14px !important; font-size: 15px !important; }
.nb-btn { height: 48px; border-radius: 999px !important; font-size: 15px !important; font-weight: 650 !important; }
.nb-btn-secondary { border-radius: 999px !important; height: 44px; }

/* Toasts */
#toastContainer {
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  align-items: center;
  width: max-content; max-width: calc(100vw - 32px);
}
@media (min-width: 1024px) { #toastContainer { bottom: 32px !important; } }
.nb-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  background: rgba(40,40,44,0.88) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
  font-size: 14px !important; font-weight: 600 !important;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7) !important;
}
.nb-toast-icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  color: #000; background: var(--nb-text);
  flex-shrink: 0;
}
.nb-toast-error .nb-toast-icon, .nb-toast-remove .nb-toast-icon { background: rgba(255,255,255,0.2); color: #fff; }

/* Back to top */
#backToTopBtn { border: 0 !important; background: rgba(30,30,34,0.72) !important; backdrop-filter: blur(20px); bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 1024px) { #backToTopBtn { bottom: 28px !important; } }
#nbAdPromoPopup { bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }

/* Hover preview card (desktop) */
#nbHoverCard {
  width: 310px;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(24,24,28,0.94) !important;
  backdrop-filter: blur(40px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(170%) !important;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.95) !important;
}
.nb-hc-bg { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #141418; }
.nb-hc-bg-fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24,24,28,1) 0%, rgba(24,24,28,0) 55%); }
.nb-hc-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.nb-hc-actions { display: flex; gap: 8px; }
.nb-hc-play, .nb-hc-icon {
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer;
  transition: transform 0.2s var(--nb-ease), background 0.2s;
}
.nb-hc-play { background: var(--nb-text); color: #000; padding-left: 2px; }
.nb-hc-icon { background: rgba(255,255,255,0.12); color: #fff; }
.nb-hc-play:hover, .nb-hc-icon:hover { transform: scale(1.08); }
.nb-hc-icon:hover { background: rgba(255,255,255,0.22); }
.nb-hc-match { font-size: 13px; font-weight: 650; color: var(--nb-text) !important; }
.nb-hc-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--nb-text-2); }
.nb-hc-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.35); }
.nb-hc-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.nb-hc-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-hc-genre { font-size: 12px; color: var(--nb-text-3); }
.nb-hc-genre + .nb-hc-genre::before { content: '·'; margin-right: 6px; }

/* Ripple */
.nb-ripple-wrap { position: relative; overflow: hidden; }
.nb-ripple {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: rgba(255,255,255,0.35);
  pointer-events: none;
  animation: nbRipple 0.6s ease-out forwards;
}
.nb-tab .nb-ripple, .btn-primary .nb-ripple, .nb-vip-btn .nb-ripple, .server-pill-btn.active-server .nb-ripple, .nb-ptab.is-active .nb-ripple { background: rgba(0,0,0,0.18); }

/* Comfort mode: calmer motion & visuals */
body.comfort-mode #heroContent.nb-hero-zoom { animation: none; }
body.comfort-mode .poster-container, body.comfort-mode .brand-tile, body.comfort-mode .nb-genre-tile { transition-duration: 0.2s !important; }
body.comfort-mode #ambientBg { opacity: 0.25; }
body.comfort-mode .movie-card:hover .poster-container { transform: scale(1.03); }

/* Keep fixed UI out of the way while the player is open */
body.player-open .top-navbar, body.player-open .mobile-bottom-nav { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

/* ---------- Animations ---------- */
@keyframes nbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes nbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nbSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes nbRiseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nbKenBurns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes nbDotFill { from { width: 0; } to { width: 100%; } }
@keyframes nbRipple { from { transform: scale(1); opacity: 1; } to { transform: scale(40); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .hero-dot-fill { width: 100%; }
}

/* TV mode (spatial navigation): stronger focus */
body.tv-active .poster-container:focus, body.tv-active button:focus { box-shadow: 0 0 0 3px #fff !important; outline: none; }

/* ---------- Panduan bebas iklan ---------- */
.nb-adguide-btn { flex-shrink: 0; }
.nb-adguide-label { display: none; }
.nb-adguide-btn { width: 40px; padding: 0 !important; justify-content: center; }
@media (min-width: 1600px) { .nb-adguide-label { display: inline; } .nb-adguide-btn { width: auto; padding: 0 14px !important; } }
@media (max-width: 380px) { .nb-adguide-btn { display: none; } }
.nb-btn-sm { flex: 0 0 auto; height: 40px; padding: 0 18px; font-size: 14px; }
.nb-btn-solid.w-full { width: 100%; }
.nb-guide-backdrop {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: nbFadeIn 0.25s ease both;
}
.nb-guide-backdrop.hidden { display: none !important; }
.nb-guide {
  width: 100%; max-width: 720px;
  max-height: min(86vh, 820px);
  display: flex; flex-direction: column;
  border-radius: 28px;
  background: rgba(24, 24, 28, 0.92);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(50px) saturate(170%);
  -webkit-backdrop-filter: blur(50px) saturate(170%);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.95);
  overflow: hidden;
  animation: nbRiseIn 0.45s var(--nb-ease) both;
}
.nb-guide-handle { display: none; }
.nb-guide:focus { outline: none; }
.nb-guide-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 14px; }
.nb-guide-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #000; background: var(--nb-text); }
.nb-guide-head h2 { margin: 2px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.nb-guide-head p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--nb-text-3); }
.nb-guide-close { margin-left: auto; width: 36px; height: 36px; }
.nb-guide-tabs { margin: 0 22px; align-self: flex-start; max-width: calc(100% - 44px); flex-shrink: 0; }
.nb-guide-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 22px 22px; display: block; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.nb-guide-pane { display: flex; flex-direction: column; gap: 12px; animation: nbFadeIn 0.3s ease both; }
.nb-guide-pane.hidden { display: none !important; }
.nb-guide-card { padding: 18px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); }
.nb-guide-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.nb-guide-card-head h3 { margin: 0; font-size: 16px; font-weight: 650; }
.nb-guide-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #000; background: var(--nb-text); }
.nb-guide-badge.is-ghost { color: var(--nb-text); background: rgba(255,255,255,0.12); }
.nb-guide-note { margin: 8px 0 0; font-size: 13.5px; color: var(--nb-text-3); line-height: 1.5; }
.nb-guide-steps { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: nbstep; display: flex; flex-direction: column; gap: 12px; }
.nb-guide-steps li { position: relative; padding-left: 38px; font-size: 14.5px; line-height: 1.5; color: var(--nb-text-2); counter-increment: nbstep; }
.nb-guide-steps li::before {
  content: counter(nbstep);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 750;
  color: var(--nb-text); background: rgba(255,255,255,0.12);
}
.nb-guide-steps li b, .nb-guide-tips li b { color: var(--nb-text); font-weight: 650; }
.nb-guide-steps li > span:not(.nb-copy-row) { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nb-text-3); }
.nb-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.nb-copy-row code {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 12px; border-radius: 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px;
  color: var(--nb-text); background: rgba(0,0,0,0.35);
  overflow-wrap: anywhere;
}
.nb-copy-btn { height: 38px; flex-shrink: 0; }
.nb-guide-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--nb-text-3); }
.nb-guide-foot b { color: var(--nb-text-2); }
.nb-guide-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nb-guide-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.nb-guide-tips li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; color: var(--nb-text-2); }
.nb-guide-tips li::before { content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--nb-text); }
@media (max-width: 639px) {
  .nb-guide-backdrop { padding: 0; align-items: flex-end; }
  .nb-guide { max-width: none; max-height: 90vh; border-radius: 28px 28px 0 0; animation: nbSheetUp 0.42s var(--nb-ease) both; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .nb-guide-handle { display: block; margin: 10px auto 0; }
  .nb-guide-head { padding: 14px 16px 12px; }
  .nb-guide-head h2 { font-size: 19px; }
  .nb-guide-icon { width: 40px; height: 40px; border-radius: 12px; }
  .nb-guide-tabs { margin: 0 16px; max-width: none; align-self: stretch; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nb-guide-tabs .nb-seg-btn { padding: 0 6px; font-size: 13px; }
  .nb-guide-body { padding: 14px 16px 24px; }
  .nb-guide-card { padding: 16px; }
}

/* Token akun belum dibuat */
.nb-token-missing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--nb-font); letter-spacing: 0; }
.nb-token-missing-text { font-size: 12.5px; font-weight: 500; color: var(--nb-text-2); line-height: 1.45; flex: 1 1 180px; }
#nbCreateTokenBtn { height: 34px; padding: 0 14px; font-size: 13px; }
#nbCreateTokenBtn:disabled { opacity: 0.6; cursor: progress; transform: none; }

/* ===== NOBARGASI Intro — Apple TV style cinematic splash (GPU-light) =====
   Performance rules: every animation below changes only `transform` and `opacity`
   so it runs on the compositor and stays smooth while the page loads underneath.
   No animated filter/blur, mask, backdrop-filter, blend modes or size changes. */
#nbIntroOverlay.nbi {
  position: fixed; inset: 0; z-index: 100000; overflow: hidden;
  background: #000; color: #fff; cursor: pointer;
  display: block !important; opacity: 1;
  contain: strict;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
}
#nbIntroOverlay.nbi * { box-sizing: border-box; }
/* page under the opaque intro does not need painting yet */
body.nbi-active .app-shell { visibility: hidden; }

/* poster wall: tiles are static; only the wall layer moves */
.nbi-wall { position: absolute; inset: -30%; perspective: 1400px; opacity: 0; animation: nbiWallIn 1.4s .2s ease-out forwards; will-change: opacity; }
.nbi-wall-inner {
  position: absolute; left: 50%; top: 50%; width: 1700px;
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 18px;
  transform: translate(-50%, -50%) rotateX(34deg) rotateZ(-12deg) translateY(120px);
  animation: nbiDrift 4.2s 0s cubic-bezier(.25,.6,.3,1) forwards;
  will-change: transform;
}
.nbi-tile {
  aspect-ratio: 2 / 3; border-radius: 14px; position: relative;
  border: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)) no-repeat 12% 84% / 56% 6px,
    linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)) no-repeat 12% 90% / 34% 4px,
    linear-gradient(0deg, rgba(0,0,0,.75), transparent 45%),
    radial-gradient(70% 45% at var(--gx, 30%) var(--gy, 30%), rgba(255,255,255,var(--sp, .18)), transparent 70%),
    linear-gradient(var(--a, 160deg), hsl(0 0% var(--l1, 14%)), hsl(0 0% var(--l2, 6%)));
}
/* one light sweep across the whole wall instead of 54 separate ones */
.nbi-sweep {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.07) 45%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.07) 55%, transparent);
  transform: translateX(-120%); animation: nbiSweep 2.6s .7s ease-in-out forwards; will-change: transform;
}
.nbi-wall-fade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(65% 60% at 50% 46%, rgba(0,0,0,.35), rgba(0,0,0,.9) 72%, #000 100%),
    linear-gradient(180deg, #000 0%, transparent 22%, transparent 78%, #000 100%);
}

/* projector beam + aura */
.nbi-beam {
  position: absolute; left: 50%; top: 46%; height: 2px; width: min(90vw, 1000px); margin-left: calc(min(90vw, 1000px) / -2); margin-top: -1px;
  background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(255,255,255,.7), 0 0 50px 6px rgba(190,210,255,.3);
  border-radius: 2px; opacity: 0; transform: scaleX(0);
  animation: nbiBeam 1.2s .05s cubic-bezier(.7,0,.2,1) forwards; will-change: transform, opacity;
}
.nbi-aura {
  position: absolute; left: 50%; top: 46%; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), rgba(200,215,255,.06) 45%, transparent 72%);
  opacity: 0; transform: scale(.2);
  animation: nbiAura 1.6s .7s cubic-bezier(.2,.8,.2,1) forwards; will-change: transform, opacity;
}

/* center stage */
.nbi-stage {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; width: min(92vw, 720px);
}
.nbi-icon {
  position: relative; width: clamp(84px, 13vmin, 124px); aspect-ratio: 1; border-radius: 28%;
  overflow: hidden; opacity: 0; transform: scale(.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 20px 50px rgba(0,0,0,.8);
  animation: nbiIcon 1s .75s cubic-bezier(.16,1,.3,1) forwards; will-change: transform, opacity;
}
.nbi-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbi-icon::after {
  content: ""; position: absolute; inset: -30%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  transform: translateX(-80%); animation: nbiShineIcon .9s 1.5s ease-in-out forwards;
}
.nbi-word {
  margin-top: clamp(18px, 3.4vmin, 28px); display: flex; justify-content: center;
  font-weight: 700; font-size: clamp(30px, 6.4vmin, 58px); line-height: 1; letter-spacing: .16em; padding-left: .16em;
}
.nbi-word span {
  display: inline-block; opacity: 0; transform: translateY(20px) scale(1.15);
  color: #f2f2f4; text-shadow: 0 2px 24px rgba(255,255,255,.18);
  animation: nbiLetter .8s calc(1.05s + var(--i) * 50ms) cubic-bezier(.16,1,.3,1) forwards;
}
.nbi-tag {
  margin-top: 14px; font-size: clamp(12px, 1.9vmin, 15px); font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.62); opacity: 0; transform: translateY(8px);
  animation: nbiFadeUp .7s 1.7s cubic-bezier(.16,1,.3,1) forwards;
}
.nbi-bar { margin-top: 26px; width: clamp(120px, 22vmin, 180px); height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; opacity: 0; animation: nbiFadeUp .4s 1.8s ease forwards; }
.nbi-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); animation: nbiBar .85s 1.85s cubic-bezier(.6,0,.2,1) forwards; }

.nbi-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(40,40,44,.85); color: rgba(255,255,255,.88); font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .08em;
  cursor: pointer; opacity: 0; animation: nbiFadeUp .5s .8s ease forwards; transition: background .2s;
}
.nbi-skip:hover { background: rgba(70,70,76,.9); }

/* exit: zoom-through the logo, overlay fades away */
#nbIntroOverlay.nbi.is-out { pointer-events: none; animation: nbiOut .7s .12s cubic-bezier(.4,0,.2,1) forwards; }
#nbIntroOverlay.nbi.is-out .nbi-stage { animation: nbiThrough .55s cubic-bezier(.6,0,.3,1) forwards; }
#nbIntroOverlay.nbi.is-out .nbi-wall { animation: nbiWallOut .7s cubic-bezier(.6,0,.3,1) forwards; opacity: .5; }
#nbIntroOverlay.nbi.is-out .nbi-skip { opacity: 0 !important; transition: opacity .2s; }

/* hero eases in under the fading intro (transform + opacity only) */
body.nbi-revealing .nbi-reveal-target { animation: nbiPageIn .9s cubic-bezier(.2,.8,.2,1) both; }

@keyframes nbiWallIn { to { opacity: .5; } }
@keyframes nbiDrift { to { transform: translate(-50%, -50%) rotateX(34deg) rotateZ(-12deg) translateY(-160px); } }
@keyframes nbiSweep { to { transform: translateX(260%); } }
@keyframes nbiBeam { 0% { transform: scaleX(0); opacity: 0; } 25% { opacity: 1; } 65% { transform: scaleX(.8); opacity: 1; } 100% { transform: scaleX(1) scaleY(0); opacity: 0; } }
@keyframes nbiAura { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; } 100% { opacity: .8; transform: scale(1); } }
@keyframes nbiIcon { to { opacity: 1; transform: scale(1); } }
@keyframes nbiShineIcon { to { transform: translateX(80%); } }
@keyframes nbiLetter { to { opacity: 1; transform: none; } }
@keyframes nbiFadeUp { to { opacity: 1; transform: none; } }
@keyframes nbiBar { to { transform: scaleX(1); } }
@keyframes nbiThrough { to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
@keyframes nbiWallOut { to { opacity: 0; transform: scale(1.4); } }
@keyframes nbiOut { to { opacity: 0; } }
@keyframes nbiPageIn { from { transform: scale(1.04); opacity: .2; } to { transform: none; opacity: 1; } }

/* small / low-power screens: lighter wall */
@media (max-width: 767px) {
  .nbi-wall-inner { width: 1050px; gap: 14px; grid-template-columns: repeat(6, 1fr); }
  .nbi-tile:nth-child(n+37) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #nbIntroOverlay.nbi *, #nbIntroOverlay.nbi *::before, #nbIntroOverlay.nbi *::after { animation-duration: .01ms !important; animation-delay: 0s !important; }
  .nbi-wall, .nbi-beam, .nbi-sweep, .nbi-icon::after { display: none !important; }
  #nbIntroOverlay.nbi.is-out { animation: nbiOut .4s ease forwards; }
  body.nbi-revealing .nbi-reveal-target { animation: none; }
}

/* ===== Performance: no backdrop blur on elements repeated in every card =====
   (dozens of blurred buttons inside scrolling rails make phones & laptops lag) */
.card-play-circle, .fav-btn, .card-provider-badge, .card-remove-btn, .mood-chip, .nb-genre-pill {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.fav-btn { background: rgba(0,0,0,0.62) !important; }
.card-provider-badge, .card-remove-btn { background: rgba(0,0,0,0.66); }
.card-provider-badge.is-soon, .card-provider-badge.is-new { background: var(--nb-text); }
.card-play-circle { background: rgba(60,60,64,0.72); }

/* Touch / small screens: cheaper blur on the always-visible bars */
@media (hover: none), (max-width: 767px) {
  .top-navbar.dplus-scrolled, body.nb-grid-view .top-navbar, .mobile-bottom-nav {
    -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
  }
  .btn-glass, .btn-icon-circle, .hero-nav-arrow, .nb-icon-btn, .nb-pill-btn, .nb-glass-circle, .nb-glass-pill, .nb-avail-pill, #backToTopBtn {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .btn-glass, .btn-icon-circle:not(.is-in-list), .hero-nav-arrow, .nb-glass-circle, .nb-glass-pill {
    background-color: rgba(44,44,48,0.78) !important;
  }
}
/* ===== AUTO-GENERATED monochrome remap for Tailwind accent utilities (tools/gen_mono.py) ===== */
html body .text-amber-200\/90{color:rgba(245,245,247,0.9)!important}
html body .text-amber-300{color:rgba(245,245,247,1)!important}
html body .text-amber-400{color:rgba(245,245,247,1)!important}
html body .text-blue-300{color:rgba(245,245,247,1)!important}
html body .text-blue-400{color:rgba(245,245,247,1)!important}
html body .text-cyan-300{color:rgba(245,245,247,1)!important}
html body .text-cyan-400{color:rgba(245,245,247,1)!important}
html body .text-purple-200{color:rgba(245,245,247,0.9)!important}
html body .text-purple-300{color:rgba(245,245,247,1)!important}
html body .text-purple-400{color:rgba(245,245,247,1)!important}
html body .text-sky-400{color:rgba(245,245,247,1)!important}
html body .text-yellow-300{color:rgba(245,245,247,1)!important}
html body .text-yellow-400{color:rgba(245,245,247,1)!important}
html body .hover\:text-amber-300:hover{color:rgba(245,245,247,1)!important}
html body .border-amber-300{border-color:rgba(255,255,255,0.14)!important}
html body .border-amber-400{border-color:rgba(255,255,255,0.32)!important}
html body .border-amber-400\/20{border-color:rgba(255,255,255,0.14)!important}
html body .border-amber-400\/30{border-color:rgba(255,255,255,0.14)!important}
html body .border-amber-400\/40{border-color:rgba(255,255,255,0.22)!important}
html body .border-amber-500\/30{border-color:rgba(255,255,255,0.14)!important}
html body .border-amber-500\/40{border-color:rgba(255,255,255,0.22)!important}
html body .border-blue-500\/20{border-color:rgba(255,255,255,0.14)!important}
html body .border-blue-500\/25{border-color:rgba(255,255,255,0.14)!important}
html body .border-blue-500\/30{border-color:rgba(255,255,255,0.14)!important}
html body .border-blue-500\/50{border-color:rgba(255,255,255,0.22)!important}
html body .border-cyan-400{border-color:rgba(255,255,255,0.32)!important}
html body .border-cyan-500\/40{border-color:rgba(255,255,255,0.22)!important}
html body .border-cyan-500\/50{border-color:rgba(255,255,255,0.22)!important}
html body .border-orange-500\/50{border-color:rgba(255,255,255,0.22)!important}
html body .border-purple-500\/20{border-color:rgba(255,255,255,0.14)!important}
html body .border-purple-500\/30{border-color:rgba(255,255,255,0.14)!important}
html body .border-purple-500\/40{border-color:rgba(255,255,255,0.22)!important}
html body .border-purple-500\/50{border-color:rgba(255,255,255,0.22)!important}
html body .border-yellow-500\/30{border-color:rgba(255,255,255,0.14)!important}
html body .focus\:border-amber-400:focus{border-color:rgba(255,255,255,0.32)!important}
html body .focus\:border-cyan-400:focus{border-color:rgba(255,255,255,0.32)!important}
html body .focus\:border-purple-400:focus{border-color:rgba(255,255,255,0.32)!important}
html body .hover\:border-cyan-500\/40:hover{border-color:rgba(255,255,255,0.22)!important}
html body .accent-cyan-400{accent-color:#f5f5f7!important}
html body .shadow-amber-500\/25{--tw-shadow-color:rgba(0,0,0,.45)!important;--tw-shadow:var(--tw-shadow-colored)!important}
html body .shadow-amber-500\/30{--tw-shadow-color:rgba(0,0,0,.45)!important;--tw-shadow:var(--tw-shadow-colored)!important}
html body .shadow-purple-600\/30{--tw-shadow-color:rgba(0,0,0,.45)!important;--tw-shadow:var(--tw-shadow-colored)!important}
html body .bg-amber-400{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .bg-amber-400 *:not(input):not(textarea){color:inherit!important}
html body .bg-amber-400\/20{background-image:none!important;background-color:rgba(255,255,255,0.11)!important}
html body .bg-amber-500{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .bg-amber-500 *:not(input):not(textarea){color:inherit!important}
html body .bg-amber-500\/10{background-image:none!important;background-color:rgba(255,255,255,0.055)!important}
html body .bg-amber-500\/15{background-image:none!important;background-color:rgba(255,255,255,0.083)!important}
html body .bg-amber-500\/20{background-image:none!important;background-color:rgba(255,255,255,0.11)!important}
html body .bg-blue-500\/10{background-image:none!important;background-color:rgba(255,255,255,0.055)!important}
html body .bg-blue-500\/20{background-image:none!important;background-color:rgba(255,255,255,0.11)!important}
html body .bg-blue-950\/90{background-image:none!important;background-color:rgba(255,255,255,.05)!important}
html body .bg-cyan-500{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .bg-cyan-500 *:not(input):not(textarea){color:inherit!important}
html body .bg-cyan-500\/20{background-image:none!important;background-color:rgba(255,255,255,0.11)!important}
html body .bg-cyan-950\/20{background-image:none!important;background-color:rgba(255,255,255,.05)!important}
html body .bg-orange-950\/90{background-image:none!important;background-color:rgba(255,255,255,.05)!important}
html body .bg-purple-500\/10{background-image:none!important;background-color:rgba(255,255,255,0.055)!important}
html body .bg-purple-500\/15{background-image:none!important;background-color:rgba(255,255,255,0.083)!important}
html body .bg-purple-500\/20{background-image:none!important;background-color:rgba(255,255,255,0.11)!important}
html body .bg-purple-500\/30{background-image:none!important;background-color:rgba(255,255,255,0.165)!important}
html body .bg-purple-600{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .bg-purple-600 *:not(input):not(textarea){color:inherit!important}
html body .bg-purple-950\/30{background-image:none!important;background-color:rgba(255,255,255,.05)!important}
html body .bg-purple-950\/40{background-image:none!important;background-color:rgba(255,255,255,.05)!important}
html body .bg-purple-950\/90{background-image:none!important;background-color:rgba(255,255,255,.05)!important}
html body .bg-yellow-400{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .bg-yellow-400 *:not(input):not(textarea){color:inherit!important}
html body .bg-yellow-500\/20{background-image:none!important;background-color:rgba(255,255,255,0.11)!important}
html body .from-amber-400{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .from-amber-400 *:not(input):not(textarea){color:inherit!important}
html body .from-amber-500{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .from-amber-500 *:not(input):not(textarea){color:inherit!important}
html body .from-amber-500\/15{background-image:none!important;background-color:rgba(255,255,255,0.083)!important}
html body .from-blue-950\/40{background-image:none!important;background-color:rgba(255,255,255,.05)!important}
html body .from-purple-600{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .from-purple-600 *:not(input):not(textarea){color:inherit!important}
html body .hover\:bg-amber-300:hover{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .hover\:bg-amber-400:hover{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .hover\:bg-amber-400\/30:hover{background-image:none!important;background-color:rgba(255,255,255,0.165)!important}
html body .hover\:bg-amber-500\/20:hover{background-image:none!important;background-color:rgba(255,255,255,0.11)!important}
html body .hover\:bg-cyan-400:hover{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .hover\:bg-purple-500:hover{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .hover\:from-amber-400:hover{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}
html body .hover\:from-purple-500:hover{background-image:none!important;background-color:#f5f5f7!important;color:#0a0a0a!important;border-color:transparent!important}