/* ============================================================
   NETFLIX CLONE — style.css
   #141414 canvas, #e50914 accent. Bebas Neue inlined (zero fetch).
   UI type = system stack (zero fetch). Fast by construction.
   ============================================================ */

/* Bebas Neue — latin subset, base64-inlined, no network round-trip */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
}

:root {
  --red: #e50914;
  --red-dark: #b1060f;
  --red-glow: rgba(229, 9, 20, 0.55);
  --bg: #141414;
  --bg-black: #000000;
  --text: #ffffff;
  --text-dim: #b3b3b3;
  --text-faint: #808080;
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --nav-h: 68px;
  --row-pad: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { /* native scroll — no smooth override for instant 120fps response */ }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.intro-lock { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 0; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 5px; }

/* ============================================================
   INTRO SPLASH
   ============================================================ */

#intro {
  position: fixed;
  inset: 0;
  background: var(--bg-black);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.7s ease;
}

#intro.done { opacity: 0; pointer-events: none; }

.intro-stage {
  position: relative;
  width: 150px;
  height: 270px;
  will-change: transform, opacity;
  animation: nLife 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.n-bar { position: absolute; top: 0; width: 34px; height: 100%; }
.n-left  { left: 0;  background: var(--red-dark); }
.n-right { right: 0; background: var(--red-dark); }

.n-diag {
  left: 0;
  height: 294px;
  background: linear-gradient(180deg, #ff1f2d 0%, var(--red) 50%, #c11119 100%);
  transform-origin: top left;
  transform: rotate(-23.3deg);
  box-shadow: 0 0 22px var(--red-glow), 4px 0 14px rgba(0, 0, 0, 0.6);
}

.intro-glow {
  position: absolute;
  inset: -70px;
  background: radial-gradient(ellipse at 50% 50%, rgba(229, 9, 20, 0.5), transparent 65%);
  opacity: 0;
  will-change: opacity;
  animation: glowPulse 1.1s ease-in-out 0.25s 2;
  pointer-events: none;
}

.intro-n {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 16px rgba(229, 9, 20, 0.5));
}

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

@keyframes nLife {
  0%    { opacity: 0; transform: scale(0.86); }
  12%   { opacity: 1; transform: scale(0.94); }
  55%   { opacity: 1; transform: scale(1); }
  70%   { opacity: 1; transform: scale(1.08); }
  100%  { opacity: 0; transform: scale(13); }
}

.intro-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 235, 230, 0.9), rgba(229, 9, 20, 0.35) 40%, transparent 70%);
  opacity: 0;
  animation: flash 0.8s ease-out 1.75s forwards;
  pointer-events: none;
}

@keyframes flash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

.intro-ribbon {
  position: absolute;
  top: 50%;
  left: -60%;
  width: 220%;
  height: 130px;
  margin-top: -65px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(229, 9, 20, 0.0) 8%,
    rgba(229, 9, 20, 0.85) 30%,
    #ff2a36 50%,
    rgba(229, 9, 20, 0.85) 70%,
    rgba(229, 9, 20, 0.0) 92%,
    transparent 100%);
  transform: rotate(-14deg) translateX(-40%);
  opacity: 0;
  filter: blur(2px);
  animation: ribbon 0.9s cubic-bezier(0.3, 0, 0.3, 1) 1.85s forwards;
  pointer-events: none;
}

@keyframes ribbon {
  0%   { opacity: 0; transform: rotate(-14deg) translateX(-40%); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(-14deg) translateX(45%); }
}

.intro-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  animation: hintIn 0.8s ease 0.7s both;
}

@keyframes hintIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   NAVBAR
   ============================================================ */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--row-pad);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 10%, transparent);
  transition: background-color 0.35s ease;
}

#navbar.solid { background-color: var(--bg); }

.nav-left { display: flex; align-items: center; gap: 36px; }

.nav-logo {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 3px;
  color: var(--red);
  line-height: 1;
  text-shadow: 0 0 18px rgba(229, 9, 20, 0.35);
}

.nav-links { display: flex; gap: 20px; }

.nav-links a {
  font-size: 13.5px;
  color: #e5e5e5;
  transition: color 0.25s;
}

.nav-links a:hover { color: #b3b3b3; }
.nav-links a.active { color: #fff; font-weight: 600; }

.nav-right { display: flex; align-items: center; gap: 22px; }

.icon-btn {
  background: none;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  padding: 4px;
}

.bell .badge {
  position: absolute;
  top: -3px;
  right: -5px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.nav-kids { font-size: 13.5px; color: #e5e5e5; }

.nav-search {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}

.nav-search.open {
  border-color: #fff;
  background: rgba(0, 0, 0, 0.85);
  padding-right: 8px;
}

.nav-search input {
  width: 0;
  opacity: 0;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13.5px;
  font-family: var(--font-ui);
  transition: width 0.35s ease, opacity 0.3s;
}

.nav-search.open input { width: 210px; opacity: 1; padding: 6px 8px; }

.nav-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  padding: 4px 0;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: url("avatars/red.png") center/cover no-repeat, #e50914;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}


.caret { transition: transform 0.25s; }
.nav-profile:hover .caret { transform: rotate(180deg); }

.profile-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 190px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.25s ease;
}

.nav-profile:hover .profile-menu,
.nav-profile:focus-within .profile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: #e5e5e5;
  cursor: pointer;
}

.pm-row:hover { text-decoration: underline; }

.pm-avatar,
.pm-avatar-img,
.pm-row img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}
.pm-a2 { background: linear-gradient(135deg, #0080ff, #003c80); }
.pm-a3 { background: linear-gradient(135deg, #2ecc71, #14663a); }
.pm-divider { height: 1px; background: rgba(255, 255, 255, 0.2); margin: 8px 0; }

/* ============================================================
   BILLBOARD
   ============================================================ */

.billboard {
  position: relative;
  height: 92vh;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.billboard-art {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
  background:
    radial-gradient(ellipse 55% 65% at 72% 30%, rgba(229, 9, 20, 0.30), transparent 62%),
    radial-gradient(ellipse 40% 50% at 82% 68%, rgba(64, 10, 90, 0.45), transparent 65%),
    radial-gradient(ellipse 70% 60% at 20% 85%, rgba(8, 24, 58, 0.8), transparent 70%),
    radial-gradient(circle at 66% 26%, rgba(255, 210, 190, 0.45) 0, rgba(255, 120, 90, 0.16) 12%, transparent 30%),
    linear-gradient(160deg, #05070f 0%, #0b1022 38%, #14060c 74%, #050208 100%);
}

/* When a real backdrop image is set, hide the decorative eclipse/starfield */
.billboard-art.has-img::before,
.billboard-art.has-img::after {
  display: none !important;
}

.billboard-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 41% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 55% 44%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 63% 71%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 77% 12%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 94% 84%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 47% 88%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 33% 38%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 70% 55%, rgba(255,255,255,0.4), transparent);
}

.billboard-art::after {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  right: 14%;
  top: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 58%, transparent 59%);
  box-shadow:
    0 0 60px 14px rgba(255, 140, 90, 0.4),
    0 0 140px 40px rgba(229, 9, 20, 0.25);
}

.billboard-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 34%, transparent 62%),
    linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,0.4) 18%, transparent 42%);
}

.billboard-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--row-pad);
  max-width: 660px;
  margin-top: 40px;
}

.billboard-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.n-mark {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--red);
  line-height: 1;
  text-shadow: 0 0 12px var(--red-glow);
}

.billboard-tag span:last-child {
  font-size: 13px;
  letter-spacing: 0.32em;
  color: #d2d2d2;
  font-weight: 500;
}

.billboard-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 7.5vw, 96px);
  line-height: 0.95;
  letter-spacing: 1px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  margin-bottom: 18px;
}

.billboard-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #e5e5e5;
  margin-bottom: 14px;
}

.match { color: #46d369; font-weight: 700; }

.rating-box {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0 6px;
  font-size: 11.5px;
  line-height: 18px;
}

.hd-badge {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
}

.billboard-desc {
  font-size: 16.5px;
  line-height: 1.5;
  color: #f0f0f0;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.billboard-buttons { display: flex; gap: 12px; }

.btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 4px;
  padding: 10px 26px;
  font-size: 16.5px;
  font-weight: 600;
  transition: background 0.25s, opacity 0.25s;
}

.btn-play { background: #fff; color: #000; }
.btn-play:hover { background: rgba(255, 255, 255, 0.78); }

.btn-info { background: rgba(109, 109, 110, 0.7); color: #fff; }
.btn-info:hover { background: rgba(109, 109, 110, 0.45); }

.billboard-rating {
  position: absolute;
  right: 0;
  bottom: 26%;
  z-index: 2;
  border-left: 3px solid #dcdcdc;
  background: rgba(51, 51, 51, 0.6);
  padding: 7px 40px 7px 12px;
  font-size: 15px;
  color: #e5e5e5;
}

/* ============================================================
   ROWS
   ============================================================ */

#rows {
  position: relative;
  z-index: 3;
  margin-top: -100px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.row {
  position: relative;
  z-index: 1;
}
.row:hover { z-index: 50; }

.row-title {
  font-size: 21px;
  font-weight: 700;
  color: #e5e5e5;
  padding: 0 var(--row-pad);
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.row-explore {
  font-size: 12.5px;
  font-weight: 600;
  color: #54b9c5;
  opacity: 0;
  transition: opacity 0.3s;
}

.row:hover .row-explore { opacity: 1; }

.slider-wrap { position: relative; }

/* Vertical padding gives the hover-scaled card + info panel full room without clipping */
.slider {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 36px var(--row-pad) 130px;
  margin: -36px 0 -130px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.slider::-webkit-scrollbar { display: none; }

/* While a card is hovered, grow the slider's bottom room so the expanded
   info panel never gets clipped — without creating a dead click-zone over
   the next row when nothing is hovered. */
.slider:has(.card:hover) {
  padding-bottom: 300px;
  margin-bottom: -300px;
}
.slider-wrap:has(.card:hover) { z-index: 50; }

/* Remove-from-Continue-Watching button (top-right, appears on hover) */
.cw-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.card:hover .cw-remove { opacity: 1; }
.cw-remove:hover { background: var(--red); border-color: var(--red); transform: scale(1.12); }

.slider-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 55px;
  z-index: 60;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s, background 0.3s;
  cursor: pointer;
}

.slider-wrap:hover .slider-arrow { opacity: 1; }

.slider-arrow.left  { left: 0; background: linear-gradient(90deg, rgba(20,20,20,0.9), transparent); }
.slider-arrow.right { right: 0; background: linear-gradient(-90deg, rgba(20,20,20,0.9), transparent); }
.slider-arrow:hover svg { transform: scale(1.3); }
.slider-arrow svg { transition: transform 0.25s; }

/* High-speed scroll optimizer: suppresses hover + transitions during active scrolling */
body.is-scrolling 
body.is-scrolling 

/* ---------- cards ---------- */

.card {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  flex-shrink: 0;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.25s ease 0.12s;
  
}

.card:hover {
  transform: scale(1.28) translateY(-14px);
  z-index: 100;
}

.card-art {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* real thumbnail — fills the 16:9 box exactly, no distortion, no gaps */
.card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* darken bottom so the title text stays readable over any thumbnail */
.card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 35%, transparent 60%);
  pointer-events: none;
}

.card:hover .card-art { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85); }

.card-art-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1.5px;
  line-height: 1;
  padding: 12px 14px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 2;
}

.card-art .art-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--red);
  text-shadow: 0 0 8px rgba(0,0,0,0.9);
  z-index: 2;
}

.card:hover .card-art { border-radius: 4px 4px 0 0; }

/* hover info panel */
.card-info {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #181818;
  border-radius: 0 0 4px 4px;
  padding: 12px 12px 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s, visibility 0s 0.3s;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.85);
  z-index: 100;
}

.card:hover .card-info {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s;
}

.ci-buttons { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }

.ci-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, 0.45);
  background: rgba(42, 42, 42, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.ci-btn:hover { border-color: #fff; background: rgba(80, 80, 80, 0.7); }
.ci-btn.play { background: #fff; border-color: #fff; color: #000; }
.ci-btn.play:hover { background: #d9d9d9; }
.ci-btn.push { margin-left: auto; }

.ci-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #e5e5e5;
  margin-bottom: 7px;
}

.ci-meta .match { font-size: 11.5px; }
.ci-meta .rating-box { font-size: 9px; line-height: 14px; padding: 0 4px; }

.ci-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 10.5px;
  color: #d2d2d2;
}

.ci-genres span:not(:last-child)::after { content: ' • '; color: #646464; margin: 0 4px; }

/* continue-watching progress strip */
.card-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 3;
}

.card-progress > div { height: 100%; background: var(--red); }

/* ---------- top 10 variant ---------- */

.card.top10 { width: 254px; display: flex; }

.top10-num {
  flex: 0 0 42%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 150px;
  line-height: 0.78;
  color: #000;
  -webkit-text-stroke: 4px #595959;
  letter-spacing: -8px;
  user-select: none;
  margin-right: -14px;
  position: relative;
  z-index: 1;
}

.card.top10 .card-art { position: relative; flex: 1; inset: auto; z-index: 2; }
.card.top10:hover { transform: scale(1.22) translateY(-12px); }

/* ============================================================
   MODAL
   ============================================================ */

#modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.7);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

#modal-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.3s; }

#modal {
  position: relative;
  width: min(850px, 92vw);
  margin: 4vh auto 60px;
  background: #181818;
  border-radius: 8px;
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.9);
}

#modal-backdrop.open #modal { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #181818;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-hero {
  position: relative;
  aspect-ratio: 16 / 8.2;
  display: flex;
  align-items: flex-end;
}

.modal-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #181818 4%, rgba(24,24,24,0.35) 30%, transparent 55%);
}

.modal-title-wrap { position: relative; z-index: 2; padding: 0 44px 26px; }

#modal-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 58px);
  letter-spacing: 1.5px;
  line-height: 1;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
  margin-bottom: 20px;
}

.modal-buttons { display: flex; align-items: center; gap: 10px; }

.round-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(42, 42, 42, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.round-btn:hover { border-color: #fff; background: rgba(80, 80, 80, 0.7); }

.modal-body { padding: 22px 44px 40px; }

.modal-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #e5e5e5;
  margin-bottom: 14px;
}

.modal-desc { font-size: 15px; line-height: 1.6; color: #f0f0f0; margin-bottom: 16px; }

.modal-genres { font-size: 13px; color: #b3b3b3; }
.modal-genres b { color: #777; font-weight: 500; }

/* ============================================================
   REAL PLAYER
   ============================================================ */

#player {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0s 0.25s;
}

#player.open { opacity: 1; visibility: visible; transition: opacity 0.25s; }

#player-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

#player-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

.player-back {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 10;
  background: none;
  border: none;
  color: #fff;
  transition: transform 0.2s;
}

.player-back:hover { transform: translateX(-4px); }

.player-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s;
}

.player-center.hidden { opacity: 0; }

.player-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid rgba(229, 9, 20, 0.18);
  border-top-color: var(--red);
  animation: spin 0.9s linear infinite;
}

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

.player-note {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #666;
}

#dub-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(12px);
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300;
}
#dub-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.player-stall-bar {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 15, 15, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 16px;
  z-index: 120;
  backdrop-filter: blur(6px);
}
.player-stall-bar .psb-msg {
  color: #ddd;
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.player-stall-bar .psb-next {
  padding: 7px 14px;
  font-size: 13px;
}
.player-stall-bar .psb-ok {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #bbb;
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.player-stall-bar .psb-ok:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.player-error {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.85);
  text-align: center;
  padding: 20px;
}

.player-error.show { display: flex; }

.pe-title {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 2px;
  color: var(--red);
}

.pe-msg { font-size: 14px; color: #b3b3b3; max-width: 420px; }

.player-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  padding: 40px 32px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
  transition: opacity 0.3s;
}

#player.idle .player-chrome,
#player.idle .player-back { opacity: 0; pointer-events: none; }

/* Embed mode: the provider has its own controls + menus inside the iframe.
   Hide our redundant bottom chrome (play/pause/volume/CC can't reach a
   cross-origin frame anyway) and float just the server switcher top-right
   so the two control bars never stack. */
#player.embed-active .player-chrome {
  top: 24px;
  bottom: auto;
  left: auto;
  right: 24px;
  width: auto;
  padding: 0;
  background: none;
  z-index: 20;
}

#player.embed-active .player-title,
#player.embed-active .player-bar-row,
#player.embed-active #pc-playpause,
#player.embed-active #pc-back10,
#player.embed-active #pc-fwd10,
#player.embed-active #pc-volume-wrap,
#player.embed-active .pc-time,
#player.embed-active .pc-spacer,
#player.embed-active #pc-cc-menu,
#player.embed-active #pc-next,
#player.embed-active #pc-fullscreen {
  display: none !important;
}

#player.embed-active .player-controls {
  display: flex;
  background: none;
  padding: 0;
  gap: 0;
}

#player.embed-active .pc-dropdown {
  bottom: auto;
  top: calc(100% + 10px);
}

.pc-servers-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.pc-servers-badge:hover {
  background: rgba(229, 9, 20, 0.85);
  border-color: var(--red);
  transform: scale(1.04);
}

.pc-server-name {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Netflix-style Auto Next Episode card */
.player-next-ep {
  position: absolute;
  right: 36px;
  bottom: 80px;
  z-index: 100;
  background: rgba(24, 24, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  animation: slideUpFade 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.pne-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pne-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--red);
}

.pne-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pne-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.pne-close {
  width: 32px;
  height: 32px;
}

.player-title { font-size: 15px; font-weight: 600; color: #e5e5e5; margin-bottom: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }

#pc-volume .ic-mute { display: none; }
#pc-volume.muted .ic-mute { display: block; }
#pc-volume.muted .ic-vol { display: none; }

/* ---------- NETFLIX SCRUB BAR ---------- */
.player-bar-row { display: flex; align-items: center; gap: 14px; }

.player-bar {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  margin-bottom: 14px;
  cursor: pointer;
  position: relative;
  transition: height 0.15s ease;
}

.player-bar:hover, .player-bar.dragging { height: 7px; }

.pb-buffered {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.player-progress {
  height: 100%;
  width: 0%;
  background: var(--red);
  border-radius: 3px;
  position: relative;
}

.pb-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 2;
}

.player-bar:hover .pb-thumb, .player-bar.dragging .pb-thumb {
  transform: translate(-50%, -50%) scale(1);
}
.player-bar.dragging .pb-thumb { transform: translate(-50%, -50%) scale(1.25); }

.pb-tooltip {
  position: absolute;
  bottom: 18px;
  left: 0;
  transform: translateX(-50%);
  background: rgba(10, 10, 10, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 3;
}

.player-bar:hover .pb-tooltip, .player-bar.dragging .pb-tooltip { opacity: 1; }

/* ---------- NETFLIX CONTROL ROW ---------- */
.player-controls { display: flex; align-items: center; gap: 22px; }

.pc-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  padding: 0;
  transition: transform 0.18s ease, color 0.18s ease;
  cursor: pointer;
}

.pc-btn:hover { transform: scale(1.12); color: #fff; }
.pc-btn:active { transform: scale(0.98); }

#pc-playpause .ic-play { display: none; }
#pc-playpause.paused .ic-play { display: block; }
#pc-playpause.paused .ic-pause { display: none; }

/* volume: icon + slider that expands on hover, Netflix-style */
.pc-volume-wrap { display: flex; align-items: center; gap: 0; }

.pc-vol-slider {
  width: 0;
  opacity: 0;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  transition: width 0.25s ease, opacity 0.25s ease, margin-left 0.25s ease;
  margin-left: 0;
}

.pc-volume-wrap:hover .pc-vol-slider, .pc-volume-wrap.sliding .pc-vol-slider {
  width: 72px;
  opacity: 1;
  margin-left: 8px;
}

.pc-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.pc-vol-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.pc-time { font-size: 13px; color: #d2d2d2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-spacer { flex: 1; }

.pc-servers { display: flex; gap: 6px; align-items: center; }

/* ---------- dropdown menus (servers / captions) ---------- */
.pc-menu { position: relative; display: flex; }

.pc-dropdown {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  min-width: 190px;
  background: rgba(18, 18, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  z-index: 20;
}

.pc-menu.open .pc-dropdown { display: flex; }

.pc-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.pc-dd-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.pc-dd-item.active { color: #fff; font-weight: 600; }
.pc-dd-item.active .pc-dd-check { color: var(--red); }
.pc-dd-label { flex: 1; }
.pc-dd-note { color: #888; font-size: 12px; padding: 10px 12px; line-height: 1.5; text-align: center; }

.pc-server-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.pc-server-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.pc-server-btn.active { background: #e50914; border-color: #e50914; color: #fff; font-weight: 600; }

/* ---------- EPISODE TABS (modal) ---------- */

.ep-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}

.ep-tab {
  min-width: 38px;
  height: 34px;
  background: #2a2a2a;
  border: 1px solid #404040;
  color: #d2d2d2;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
}

.ep-tab:hover { background: #404040; color: #fff; }
.ep-tab.active { background: #e50914; border-color: #e50914; color: #fff; }

/* ---------- NETFLIX-STYLE EPISODE BROWSER (modal) ---------- */

.ep-browser { margin-top: 26px; border-top: 1px solid #404040; padding-top: 20px; }

.ep-browser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ep-browser-title { font-size: 22px; font-weight: 700; color: #fff; }

.ep-season-select {
  background: #242424;
  color: #fff;
  border: 1px solid #6d6d6e;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 34px 8px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8' fill='%23fff'%3E%3Cpath d='M1 1l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ep-season-select:hover { background-color: #333; }
.ep-season-select:focus { outline: none; border-color: #fff; }

.ep-list { display: flex; flex-direction: column; }

.ep-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 12px;
  border-bottom: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.ep-row:hover { background: #333; }
.ep-row:last-child { border-bottom: none; }

.ep-row-num {
  flex: 0 0 24px;
  text-align: center;
  font-size: 22px;
  color: #d2d2d2;
}

.ep-row-thumb {
  position: relative;
  flex: 0 0 140px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
  background: #242424;
}
.ep-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ep-row-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.15s;
}
.ep-row-play svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
}
.ep-row:hover .ep-row-play { opacity: 1; }

.ep-row-prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
}
.ep-row-prog > div { height: 100%; background: var(--red); }

.ep-row-main { flex: 1; min-width: 0; }

.ep-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ep-row-name { font-size: 15px; font-weight: 600; color: #fff; }
.ep-row-runtime { font-size: 13px; color: #d2d2d2; white-space: nowrap; }

.ep-row-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #d2d2d2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ep-empty { padding: 24px 12px; color: #999; font-size: 14px; }

/* ---------- MORE LIKE THIS (modal) ---------- */

.similar-section { margin-top: 26px; border-top: 1px solid #404040; padding-top: 20px; }

.similar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px 14px;
  color: #fff;
}
.similar-title { font-size: 22px; font-weight: 700; }
.similar-caret { transition: transform 0.2s; }

.similar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.similar-card {
  background: #2f2f2f;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.similar-card:hover { background: #414141; transform: translateY(-2px); }

.sc-thumb { aspect-ratio: 16 / 9; background: #181818; }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-body { padding: 12px 14px 16px; }
.sc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}
.sc-year { color: #b3b3b3; }
.sc-name { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.sc-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #d2d2d2;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.similar-loading { grid-column: 1 / -1; padding: 20px; color: #999; font-size: 14px; }

@media (max-width: 900px) { .similar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .similar-grid { grid-template-columns: 1fr; } }

/* loading skeleton */
.ep-skel { pointer-events: none; }
.ep-skel .ep-row-thumb { background: #2a2a2a; }
.ep-skel-line {
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, #2a2a2a 25%, #383838 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: epShimmer 1.2s infinite;
  margin-bottom: 8px;
}
.ep-skel-line.w60 { width: 60%; }
.ep-skel-line.w75 { width: 75%; }
.ep-skel-line.w90 { width: 90%; }
@keyframes epShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (max-width: 700px) {
  .ep-row { gap: 10px; padding: 12px 6px; }
  .ep-row-num { flex-basis: 18px; font-size: 16px; }
  .ep-row-thumb { flex-basis: 110px; }
  .ep-row-desc { -webkit-line-clamp: 2; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  padding: 60px var(--row-pad) 40px;
  max-width: 1100px;
  margin: 0 auto;
  color: var(--text-faint);
}

.footer-social { display: flex; gap: 26px; margin-bottom: 28px; }
.footer-social a { color: #fff; transition: color 0.2s; }
.footer-social a:hover { color: var(--red); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 20px;
  font-size: 13px;
  margin-bottom: 26px;
}

.footer-grid a:hover { text-decoration: underline; }

.footer-code {
  background: none;
  border: 1px solid var(--text-faint);
  color: var(--text-faint);
  font-size: 13px;
  padding: 7px 14px;
  margin-bottom: 22px;
  transition: color 0.2s, border-color 0.2s;
}

.footer-code:hover { color: #fff; border-color: #fff; }

.footer-copy { font-size: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .nav-links a:nth-child(n+5) { display: none; }
}

@media (max-width: 860px) {
  :root { --row-pad: 32px; }
  .nav-links { display: none; }
  .nav-kids { display: none; }
  .card { width: 230px; }
  .card.top10 { width: 196px; }
  .top10-num { font-size: 110px; -webkit-text-stroke-width: 3px; }
  .billboard-rating { display: none; }
  .billboard-art::after { width: 220px; height: 220px; right: 6%; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  :root { --row-pad: 18px; --nav-h: 56px; }
  .nav-logo { font-size: 24px; }
  .nav-search.open input { width: 120px; }
  .card { width: 172px; }
  .card:hover { transform: scale(1.12) translateY(-8px); }
  .card-info { display: none; }
  .card.top10 { width: 152px; }
  .top10-num { font-size: 84px; -webkit-text-stroke-width: 2.5px; }
  .billboard { height: 78vh; }
  .billboard-desc { font-size: 14px; -webkit-line-clamp: 3; }
  .btn { padding: 8px 18px; font-size: 14px; }
  .modal-body, .modal-title-wrap { padding-left: 22px; padding-right: 22px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   GENERIC HIDDEN
   ============================================================ */
.hidden { display: none !important; }

/* ============================================================
   PROFILE GATE — "Who's watching?"
   ============================================================ */
#profile-gate, #profile-editor {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-inner, .pe-inner { text-align: center; padding: 40px; }
.pg-title {
  font-size: 3.5vw;
  font-weight: 400;
  color: #fff;
  margin-bottom: 2.5vw;
}
@media (max-width: 800px) { .pg-title { font-size: 30px; } }

.pg-grid {
  display: flex;
  justify-content: center;
  gap: 2vw;
  flex-wrap: wrap;
  margin-bottom: 3vw;
}
.pg-card {
  cursor: pointer;
  width: 10vw;
  min-width: 84px;
  max-width: 160px;
  position: relative;
}
.pg-avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  border: 3px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
  background: #333;
}
.pg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-card:hover .pg-avatar { border-color: #fff; transform: scale(1.03); }
.pg-name {
  color: #808080;
  font-size: 1.1vw;
  margin-top: 0.8vw;
  transition: color 0.2s;
}
@media (max-width: 800px) { .pg-name { font-size: 14px; margin-top: 8px; } }
.pg-card:hover .pg-name { color: #fff; }

.pg-avatar-add {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  color: #6d6d6e;
  background: #333;
}
.pg-card.pg-add:hover .pg-avatar-add { color: #fff; }

.pg-edit-badge {
  position: absolute;
  inset: 0;
  bottom: auto;
  height: 10vw;
  min-height: 84px;
  max-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
  color: #fff;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  pointer-events: none;
}

.pg-manage {
  background: none;
  border: 1px solid #808080;
  color: #808080;
  font-size: 1.2vw;
  letter-spacing: 2px;
  padding: 0.8vw 2.5vw;
  cursor: pointer;
  transition: all 0.2s;
}
@media (max-width: 800px) { .pg-manage { font-size: 15px; padding: 10px 28px; } }
.pg-manage:hover { color: #fff; border-color: #fff; }

/* ============================================================
   PROFILE EDITOR
   ============================================================ */
.pe-avatar-row {
  display: flex;
  justify-content: center;
  gap: 1.2vw;
  margin-bottom: 2vw;
}
.pe-av {
  width: 6vw;
  min-width: 56px;
  max-width: 96px;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
}
.pe-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-av:hover { transform: scale(1.05); }
.pe-av.sel { border-color: #fff; }

.pe-name {
  display: block;
  margin: 0 auto 2vw;
  width: min(400px, 80vw);
  background: #333;
  border: 1px solid #4d4d4d;
  color: #fff;
  font-size: 18px;
  padding: 12px 16px;
  border-radius: 4px;
  flex-shrink: 0;
  outline: none;
}
.pe-name:focus { border-color: #fff; }

/* --- PIN field in the profile editor --- */
.pe-pin-row {
  margin: 0 auto 3vw;
  width: min(400px, 80vw);
  text-align: left;
}
.pe-pin-label {
  display: block;
  font-size: 14px;
  color: #b3b3b3;
  margin-bottom: 8px;
}
.pe-pin-hint { color: #6d6d6e; font-size: 12px; }
.pe-pin {
  display: block;
  width: 100%;
  background: #333;
  border: 1px solid #4d4d4d;
  color: #fff;
  font-size: 22px;
  letter-spacing: 10px;
  padding: 10px 16px;
  border-radius: 4px;
  flex-shrink: 0;
  outline: none;
}
.pe-pin:focus { border-color: #fff; }
.pe-pin-clear {
  margin-top: 10px;
  background: none;
  border: none;
  color: #b3b3b3;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.pe-pin-clear:hover { color: #fff; }

/* --- lock badge on the "Who's watching?" gate --- */
.pg-avatar { position: relative; }
.pg-lock {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* --- Netflix-style PIN prompt overlay --- */
#pin-prompt {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ppIn 0.25s ease;
}
#pin-prompt.hidden { display: none; }
#pin-prompt.closing { animation: ppOut 0.22s ease forwards; }
@keyframes ppIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ppOut { from { opacity: 1; } to { opacity: 0; } }

.pp-inner { text-align: center; padding: 40px; animation: ppPop 0.3s cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes ppPop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.pp-avatar {
  width: 110px;
  height: 110px;
  margin: 0 auto 20px;
  border-radius: 6px;
  overflow: hidden;
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pp-title { font-size: 28px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.pp-sub { font-size: 15px; color: #b3b3b3; margin-bottom: 28px; }

.pp-boxes {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.pp-box {
  width: 64px;
  height: 64px;
  background: #1a1a1a;
  border: 2px solid #6d6d6e;
  border-radius: 4px;
  color: #fff;
  font-size: 32px;
  text-align: center;
  outline: none;
  caret-color: #fff;
  transition: border-color 0.15s;
}
.pp-box:focus { border-color: #fff; }

.pp-error { color: #e50914; font-size: 14px; margin-bottom: 12px; }
.pp-error.hidden { display: none; }

.pp-cancel { margin-top: 8px; }

@media (max-width: 600px) {
  .pp-box { width: 52px; height: 52px; font-size: 26px; }
  .pp-avatar { width: 84px; height: 84px; }
}

.pe-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.btn-danger {
  background: none;
  border: 1px solid #e50914;
  color: #e50914;
}
.btn-danger:hover { background: #e50914; color: #fff; }

/* navbar profile avatar image + dropdown avatar imgs */
.pm-row { cursor: pointer; }

/* ---------- Netflix-style search results ---------- */
.search-row { padding-top: 90px; }
/* while searching the billboard is gone — drop the negative overlap margin
   so results sit cleanly under the navbar, not on top of it */
body.searching #rows { margin-top: 0; }

/* billboard rotation crossfade */
.billboard-content, .billboard-art { transition: opacity 0.45s ease; }
.bb-fade { opacity: 0; }

/* Continue Watching: S#:E# + time remaining label — stacked under the title */
.cw-label {
  position: relative;
  z-index: 2;
  padding: 0 14px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* ---------- smooth animations (GPU-only: transform + opacity) ---------- */

/* profile gate: fade in, avatars pop in staggered like Netflix */
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardPop {
  from { opacity: 0; transform: scale(0.86) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#profile-gate:not(.hidden) { animation: gateIn 0.35s ease both; }
#profile-gate:not(.hidden) .pg-card {
  animation: cardPop 0.4s cubic-bezier(0.2, 0.7, 0.3, 1.2) both;
}
#profile-gate:not(.hidden) .pg-card:nth-child(1) { animation-delay: 0.05s; }
#profile-gate:not(.hidden) .pg-card:nth-child(2) { animation-delay: 0.11s; }
#profile-gate:not(.hidden) .pg-card:nth-child(3) { animation-delay: 0.17s; }
#profile-gate:not(.hidden) .pg-card:nth-child(4) { animation-delay: 0.23s; }
#profile-gate:not(.hidden) .pg-card:nth-child(5) { animation-delay: 0.29s; }
#profile-gate:not(.hidden) .pg-card:nth-child(6) { animation-delay: 0.35s; }
/* Netflix-style zoom into the chosen avatar on switch */
.pg-card.pg-zoom { animation: pgZoom 0.45s cubic-bezier(0.4, 0, 1, 1) forwards !important; z-index: 5; }
@keyframes pgZoom {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(2.6); opacity: 0; }
}
#profile-gate.pg-switching { animation: gateOut 0.45s ease forwards; }
@keyframes gateOut { to { opacity: 0; } }

/* profile editor: fade + slide up */
@keyframes editorIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#profile-editor:not(.hidden) .pe-inner {
  animation: editorIn 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* search results: cards fade in staggered */
@keyframes gridIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.search-grid .card { animation: gridIn 0.4s ease both; }
.search-grid .card:nth-child(3n+1) { animation-delay: 0.03s; }
.search-grid .card:nth-child(3n+2) { animation-delay: 0.08s; }
.search-grid .card:nth-child(3n)   { animation-delay: 0.13s; }

/* rows fade in on tab switch */
@keyframes rowsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#rows .row { animation: rowsIn 0.45s ease both; }

/* modal pop */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#modal-backdrop:not(.hidden) #modal { animation: modalIn 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* player: slight zoom-in on open for cinematic feel */
#player.open #player-video,
#player.open #player-embed { animation: playerIn 0.5s ease both; }
@keyframes playerIn { from { transform: scale(1.03); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.search-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 10px;
  padding: 0 60px 40px;
}
.search-grid .card { flex: 0 0 auto; }
.search-empty {
  padding: 120px 60px 60px;
  color: #fff;
  max-width: 640px;
}
.search-empty .se-title { font-size: 22px; font-weight: 600; margin-bottom: 24px; }
.search-empty .se-hints { color: #b3b3b3; font-size: 15px; line-height: 1.7; }
.search-empty .se-hints ul { margin: 8px 0 0 20px; padding: 0; }
@media (max-width: 900px) {
  .search-grid { padding: 0 30px 30px; }
  .search-empty { padding: 100px 30px 40px; }
}


/* ============================================================
   EVO 2-STEP SECURITY GATE
   ============================================================ */
.evo-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(30, 0, 4, 0.96) 0%, rgba(8, 8, 8, 0.99) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  padding: 20px;
  animation: evoFadeIn 0.35s ease forwards;
}

.evo-overlay.hidden {
  display: none !important;
}

@keyframes evoFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}

.evo-card {
  background: rgba(18, 18, 18, 0.95);
  border: 1px solid rgba(229, 9, 20, 0.35);
  border-radius: 12px;
  padding: 40px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(229, 9, 20, 0.2);
  animation: evoCardPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.evo-shield-icon {
  margin: 0 auto 16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(229, 9, 20, 0.25);
}

.evo-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.evo-msg {
  font-size: 14px;
  color: #c4c4c4;
  line-height: 1.5;
  margin-bottom: 24px;
}

.evo-input-wrap {
  margin-bottom: 14px;
}

.evo-input {
  width: 100%;
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 16px;
  color: #fff;
  outline: none;
  text-align: center;
  letter-spacing: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.evo-input:focus {
  border-color: #e50914;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.25);
}

.evo-btn {
  width: 100%;
  background: #e50914;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.evo-btn:hover {
  background: #f40612;
}

.evo-btn:active {
  transform: scale(0.98);
}

.evo-error {
  color: #ff4d4d;
  font-size: 13.5px;
  margin-bottom: 14px;
  line-height: 1.4;
  padding: 8px 12px;
  background: rgba(255, 77, 77, 0.1);
  border: 1px solid rgba(255, 77, 77, 0.25);
  border-radius: 4px;
  animation: evoShake 0.35s ease;
}

@keyframes evoShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}


/* ============================================================
   PERFORMANCE & SMOOTH RENDERING ACCELERATION
   ============================================================ */
/* Virtualize offscreen catalog rows so layout calculations drop by 80% */
.row {
  
  
  
}

/* GPU hardware acceleration for smooth card hover zoom */
.card, .billboard, .evo-card, .modal-inner {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card {
  will-change: transform;
}

.row-slider {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

/* Optimize image rendering */
.card img, .billboard-art img, .thumb img {
  
  image-rendering: -webkit-optimize-contrast;
}






/* ============================================================
   NETFLIX ULTRA-CLEAN HOVER DRAWER & UNCLIPPED CARDS
   ============================================================ */

.row {
  position: relative;
  z-index: 1;
  margin-bottom: 3vw;
}

.row:hover {
  z-index: 100;
}

.slider-wrap {
  position: relative;
  overflow: visible !important;
}

.slider {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 50px var(--row-pad, 4%) 200px;
  margin: -50px 0 -200px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.slider::-webkit-scrollbar {
  display: none;
}

.slider-arrow {
  z-index: 120;
}

.card {
  position: relative;
  flex: 0 0 auto;
  width: 290px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #141414;
  flex-shrink: 0;
  overflow: visible !important;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.28s ease;
  z-index: 1;
}

.card:hover {
  transform: scale(1.36) translateY(-16px);
  z-index: 9999 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.95);
}

.card-art {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #181818;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: border-radius 0.2s ease;
}

.card:hover .card-art {
  border-radius: 6px 6px 0 0 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.95);
}

.card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* X button sitting safely inside without being cropped by top or right edges */
.cw-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.card:hover .cw-remove {
  opacity: 1;
}

.cw-remove:hover {
  background: #e50914;
  border-color: #e50914;
  transform: scale(1.15);
}

/* Netflix Hover Drawer */
.card-info {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: #141414 !important;
  border-radius: 0 0 6px 6px !important;
  padding: 14px 16px 18px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.95) !important;
  pointer-events: auto !important;
  z-index: 10000 !important;
  display: block !important;
  transition: opacity 0.22s cubic-bezier(0.2, 0, 0.2, 1) 0.08s, transform 0.22s cubic-bezier(0.2, 0, 0.2, 1) 0.08s, visibility 0s 0.3s !important;
}

.card:hover .card-info {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity 0.22s cubic-bezier(0.2, 0, 0.2, 1) 0.08s, transform 0.22s cubic-bezier(0.2, 0, 0.2, 1) 0.08s !important;
}

.ci-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.ci-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1.8px solid rgba(255, 255, 255, 0.6) !important;
  background: rgba(36, 36, 36, 0.85) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ci-btn:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.1) !important;
}

.ci-btn.play {
  background: #fff !important;
  color: #000 !important;
  border: none !important;
}

.ci-btn.play:hover {
  background: #e6e6e6 !important;
  transform: scale(1.1) !important;
}

.ci-btn.push {
  margin-left: auto !important;
}

.ci-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
}

.ci-meta .rating-box {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  padding: 1px 5px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  color: #d2d2d2 !important;
}

.ci-meta .ci-dur {
  color: #bcbcbc !important;
  font-size: 12px !important;
}

.ci-meta .hd-box {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 2px !important;
  padding: 0 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: #aaa !important;
}

.ci-genres {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #e5e5e5 !important;
  line-height: 1.3 !important;
}

.ci-genres span:not(:last-child)::after {
  content: ' • ' !important;
  color: #777 !important;
}


/* ============================================================
   NETFLIX-STYLE PROFILE CREATOR & CUSTOMIZER
   ============================================================ */

#profile-editor {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
}

.pe-inner {
  width: 100%;
  max-width: 680px;
  text-align: left;
  animation: fadeIn 0.25s ease;
}

.pe-main-title {
  font-size: 3.8vw;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
}
@media (min-width: 1000px) { .pe-main-title { font-size: 48px; } }
@media (max-width: 600px) { .pe-main-title { font-size: 32px; } }

.pe-subtitle {
  font-size: 16px;
  color: #8c8c8c;
  margin-bottom: 20px;
}

.pe-divider {
  height: 1px;
  background: #333;
  width: 100%;
  margin: 20px 0 28px;
}

.pe-body {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
@media (max-width: 600px) { .pe-body { flex-direction: column; align-items: center; } }

/* Avatar Preview & Custom Upload */
.pe-avatar-preview-wrap {
  flex: 0 0 130px;
}

.pe-avatar-main {
  width: 130px;
  height: 130px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #222;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  cursor: pointer;
}

.pe-avatar-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pe-avatar-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 8px;
}

.pe-avatar-main:hover .pe-avatar-edit-overlay {
  opacity: 1;
}

/* Details Form */
.pe-details {
  flex: 1;
  width: 100%;
}

.pe-name-input {
  width: 100%;
  background: #555;
  border: 1px solid transparent;
  color: #fff;
  font-size: 17px;
  padding: 10px 14px;
  border-radius: 2px;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 20px;
}

.pe-name-input:focus {
  background: #666;
  border-color: #fff;
}

.pe-name-input::placeholder {
  color: #aaa;
}

/* Kid Checkbox */
.pe-kid-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.pe-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.pe-checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: #e50914;
  cursor: pointer;
}

.pe-kid-text {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.pe-kid-desc {
  font-size: 12px;
  color: #777;
}

.pe-section-label {
  font-size: 13px;
  font-weight: 600;
  color: #aaa;
  margin-bottom: 8px;
}

/* Palette */
.pe-avatar-palette {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pe-av {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  background: #333;
}

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

.pe-av:hover {
  transform: scale(1.1);
}

.pe-av.sel {
  border-color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
}

/* Custom URL Input */
.pe-custom-url-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.pe-url-input {
  flex: 1;
  background: #333;
  border: 1px solid #444;
  color: #fff;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 2px;
  outline: none;
}
.pe-url-input:focus { border-color: #888; }
.pe-url-input::placeholder { color: #777; }

.pe-url-btn {
  background: #444;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.pe-url-btn:hover { background: #666; }

/* PIN Section */
.pe-pin-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #282828;
  padding: 14px 16px;
  border-radius: 4px;
}

.pe-pin-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 8px;
}

.pe-pin-hint {
  font-size: 11px;
  color: #777;
  font-weight: 400;
}

.pe-pin-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pe-pin-input {
  width: 140px;
  background: #333;
  border: 1px solid #4d4d4d;
  color: #fff;
  font-size: 20px;
  letter-spacing: 8px;
  padding: 8px 12px;
  border-radius: 3px;
  outline: none;
  text-align: center;
}
.pe-pin-input:focus { border-color: #fff; }

.pe-pin-clear {
  background: none;
  border: none;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}
.pe-pin-clear:hover { color: #fff; }

/* Actions */
.pe-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pe-btn {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

.pe-btn-save {
  background: #fff;
  color: #000;
  border: none;
}
.pe-btn-save:hover {
  background: #c00;
  color: #fff;
}

.pe-btn-cancel {
  background: transparent;
  color: #808080;
  border: 1px solid #808080;
}
.pe-btn-cancel:hover {
  color: #fff;
  border-color: #fff;
}

.pe-btn-delete {
  background: transparent;
  color: #808080;
  border: 1px solid #808080;
  margin-left: auto;
}
.pe-btn-delete:hover {
  color: #e50914;
  border-color: #e50914;
}


/* --- 1:1 NETFLIX CUSTOM KID CHECKBOX --- */
.pe-kid-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.pe-netflix-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.pe-netflix-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.pe-netflix-checkbox .pe-box {
  width: 32px;
  height: 32px;
  background: #333;
  border: 1px solid #333;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
  position: relative;
}

.pe-netflix-checkbox:hover .pe-box {
  border-color: #fff;
}

.pe-netflix-checkbox .pe-box::after {
  content: "";
  display: none;
  width: 7px;
  height: 15px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  margin-bottom: 3px;
}

.pe-netflix-checkbox input:checked ~ .pe-box {
  background: #333;
  border-color: #333;
}

.pe-netflix-checkbox input:checked ~ .pe-box::after {
  display: block;
}

.pe-kid-text {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.pe-kid-desc {
  font-size: 13px;
  color: #8c8c8c;
}


/* Direct Upload Button */
.pe-direct-upload-btn {
  width: 130px;
  margin-top: 10px;
  background: #333;
  color: #fff;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.pe-direct-upload-btn:hover {
  background: #444;
  border-color: #fff;
}


.pe-url-status {
  font-size: 12px;
  color: #ff9900;
  margin: -12px 0 16px;
  line-height: 1.4;
  background: rgba(255, 153, 0, 0.1);
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 153, 0, 0.3);
}