:root {
  color-scheme: dark;
  --netflix-red: #e50914;
  --netflix-red-hover: #f6121d;
  --black: #141414;
  --deep-black: #090909;
  --text: #fff;
  --muted: #b3b3b3;
  --page-pad: 4vw;
  --nav-height: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--text);
  font-family: "Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
body:not(.admin) [data-admin-only] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.skip {
  position: fixed;
  top: -80px;
  left: 1rem;
  z-index: 999;
  padding: .8rem 1rem;
  background: #fff;
  color: #000;
  border-radius: 3px;
}
.skip:focus { top: 1rem; }

/* Netflix-style top navigation */
.sidebar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: 0 var(--page-pad);
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.48) 58%, transparent);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.sidebar.scrolled, .watch-route .sidebar, .browse-only .sidebar, .dashboard-route .sidebar {
  background: #141414;
  box-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.brand {
  flex: 0 0 auto;
  color: var(--netflix-red);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(25px, 2.3vw, 35px);
  font-weight: 400;
  letter-spacing: 1.2px;
  line-height: 1;
  transform: scaleY(1.08);
  text-shadow: 0 1px 0 #740006;
}
.sidebar nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 25px);
  min-width: 0;
}
.sidebar nav a {
  min-height:0;
  display:inline-flex;
  align-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:#b3b3b3;
  font-size: 14px;
  font-family:"Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:700;
  white-space: nowrap;
  transition:color .2s ease;
}
.sidebar nav a:hover, .sidebar nav a[aria-current="page"] { color:#fff; }
.sidebar nav small {
  display:none;
}
.nav-tools {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-left: auto;
}
.search {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(290px, 24vw);
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius:4px;
  background: rgba(20,20,20,.88);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  transition:width .22s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.search:hover { border-color:rgba(255,255,255,.62); background:#191919; }
.search:focus-within { width:min(350px,28vw); border-color:#fff; background:#090909; box-shadow:0 8px 26px rgba(0,0,0,.34); }
.search svg { flex:0 0 auto; width:18px; height:18px; fill:none; stroke:#ddd; stroke-width:1.8; stroke-linecap:round; }
.search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
}
.search input::placeholder { color: #8f8f8f; }
.import-button {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  font-size: 13px;
}
.import-button:hover { background: rgba(255,255,255,.16); }
.guest-auth-actions { display:flex; align-items:center; gap:7px; }
.guest-auth-actions button { min-height:34px; padding:0 13px; border:1px solid rgba(255,255,255,.24); border-radius:5px; background:rgba(0,0,0,.28); color:#fff; font-size:11px; font-weight:650; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.guest-auth-actions button:hover { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); transform:translateY(-1px); }
.guest-auth-actions .register { border-color:var(--netflix-red); background:var(--netflix-red); }
.guest-auth-actions .register:hover { border-color:var(--netflix-red-hover); background:var(--netflix-red-hover); }
.profile { position: relative; }
.profile-button {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 7px 2px 2px;
  border: 1px solid transparent;
  border-radius:8px;
  background:rgba(255,255,255,.025);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.profile-button:hover,.profile-button[aria-expanded="true"] { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.1); box-shadow:0 8px 24px rgba(0,0,0,.24); }
.avatar-sprite { display:block; flex:0 0 auto; background-image:url('/assets/images/profile-avatars.png'); background-repeat:no-repeat; background-size:400% 200%; background-position:0 0; }
.avatar-sprite[data-avatar="rebel"] { background-position:0 0; }
.avatar-sprite[data-avatar="jazz"] { background-position:33.333% 0; }
.avatar-sprite[data-avatar="robot"] { background-position:66.667% 0; }
.avatar-sprite[data-avatar="explorer"] { background-position:100% 0; }
.avatar-sprite[data-avatar="fox"] { background-position:0 100%; }
.avatar-sprite[data-avatar="owl"] { background-position:33.333% 100%; }
.avatar-sprite[data-avatar="captain"] { background-position:66.667% 100%; }
.avatar-sprite[data-avatar="arcade"] { background-position:100% 100%; }
.profile-button .avatar-sprite { width:30px; height:30px; border-radius:6px; }
.profile-button > span:last-child { color: #fff; font-size: 11px; transition: transform .2s ease; }
.profile-button[aria-expanded="true"] > span:last-child { transform: rotate(180deg); }
.profile-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 286px;
  padding: 10px;
  overflow:visible;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: linear-gradient(145deg,rgba(35,35,35,.98),rgba(14,14,14,.985));
  box-shadow: 0 28px 80px rgba(0,0,0,.72),0 1px 0 rgba(255,255,255,.08) inset;
  opacity:0;
  transform:translateY(-9px) scale(.975);
  transform-origin:top right;
  backdrop-filter: blur(22px);
  transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);
}
.profile-menu.is-open { opacity:1; transform:translateY(0) scale(1); }
.profile-menu::before { content:""; position:absolute; right:17px; top:-6px; width:11px; height:11px; border-left:1px solid rgba(255,255,255,.14); border-top:1px solid rgba(255,255,255,.14); background:#202020; transform:rotate(45deg); }
.profile-summary { position:relative; display:flex; align-items:center; gap:12px; padding:13px; margin-bottom:9px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:linear-gradient(110deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); }
.profile-summary::after { content:""; position:absolute; top:-26px; right:-24px; width:74px; height:74px; border-radius:50%; background:rgba(229,9,20,.15); filter:blur(9px); pointer-events:none; }
.profile-summary .avatar-sprite { width:44px; height:44px; border-radius:9px; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.profile-summary strong, .profile-summary small { display:block; }
.profile-summary strong { font-size:14px; font-weight:650; }
.profile-summary small { margin-top:4px; color:#868686; font-size:10px; letter-spacing:.2px; }
.profile-menu > a, .profile-menu > button { position:relative; width:100%; min-height:43px; display:flex; align-items:center; padding:0 13px; border:0; border-radius:8px; background:transparent; color:#c9c9c9; font-size:13px; font-weight:550; text-align:left; transition:background .15s ease,color .15s ease,padding-left .15s ease; }
.profile-menu > a::after, .profile-menu > button::after { content:"›"; position:absolute; right:13px; color:#555; font-size:19px; font-weight:300; transition:color .15s ease,transform .15s ease; }
.profile-menu > a:hover, .profile-menu > button:hover { padding-left:17px; background:rgba(255,255,255,.08); color:#fff; }
.profile-menu > a:hover::after, .profile-menu > button:hover::after { color:#ddd; transform:translateX(2px); }
.profile-menu > button { margin:5px 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); border-radius:0; color:#fff; }
.profile-menu > .auth-menu-entry { margin:0 0 7px; border:0; border-radius:8px; background:rgba(229,9,20,.1); color:#fff; }
.profile-menu > .auth-menu-entry::after { color:var(--netflix-red); }
.breadcrumb, .side-label, .side-genres, .side-bottom { display: none; }
.mobile-menu-toggle, .mobile-menu-backdrop, .mobile-drawer, .mobile-bottom-nav { display:none; }

.site { min-height: 100vh; background: var(--black); }
main { min-height: 75vh; }
#browse { padding: 0 0 4rem; }

/* Hero billboard */
.hero {
  position: relative;
  height: min(82vh, 820px);
  min-height: 570px;
  margin: 0 0 -6.5rem;
  overflow: hidden;
  background: #111;
}
.hero-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  transform: scale(1);
  opacity: .72;
  transition: opacity .55s ease, transform 7s ease;
}
.hero-art.is-ready { opacity: 1; transform: scale(1); }
.hero-art-incoming,.hero-art-outgoing { will-change:transform,opacity; }
.hero-art-incoming { z-index:0; opacity:1; transition:transform .9s cubic-bezier(.22,.78,.2,1),opacity .9s ease; }
.hero-art-incoming.from-right { transform:translate3d(100%,0,0) scale(1); }
.hero-art-incoming.from-left { transform:translate3d(-100%,0,0) scale(1); }
.hero-art-incoming.is-sliding { transform:translate3d(0,0,0) scale(1); }
.hero-art-outgoing { z-index:0; opacity:1; transform:translate3d(0,0,0) scale(1); transition:transform .9s cubic-bezier(.22,.78,.2,1),opacity .82s ease; }
.hero-art-outgoing.to-left.is-sliding { opacity:0; transform:translate3d(-24%,0,0) scale(1); }
.hero-art-outgoing.to-right.is-sliding { opacity:0; transform:translate3d(24%,0,0) scale(1); }
.hero-shade {
  position: absolute;
  z-index:1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.15) 62%, transparent 78%),
    linear-gradient(0deg, #141414 0%, rgba(20,20,20,.72) 8%, transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.28), transparent 26%);
}
.hero-content {
  position: absolute;
  z-index: 2;
  left: var(--page-pad);
  top: 50%;
  width: min(580px, 45vw);
  transform: translateY(-45%);
}
.eyebrow {
  margin: 0 0 12px;
  color: #e5e5e5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  letter-spacing: 4px;
  text-shadow: 0 2px 5px #000;
}
.hero .eyebrow span { width: 5px; height: 24px; background: var(--netflix-red); }
h1, h2, h3, h4, p { text-wrap: pretty; }
.hero h1 {
  display: none;
  margin: 0 0 18px;
  max-width: 680px;
  color: #fff;
  font-size: clamp(48px, 5.3vw, 82px);
  line-height: .95;
  letter-spacing: -3.2px;
  text-shadow: 0 3px 14px rgba(0,0,0,.75);
}
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; color: #dedede; font-size: 14px; }
.meta .rating, .hero .rating { color: #46d369 !important; font-weight: 700; }
.hero-description, #hero-description {
  max-width: 540px;
  margin: 17px 0 0;
  color: #fff;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.45;
  text-shadow: 0 2px 5px #000;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.primary, .secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border: 0;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  transition: background .2s ease, transform .2s ease;
}
.primary { background: #fff; color: #000; }
.primary:hover { background: rgba(255,255,255,.75); }
.secondary { background: rgba(109,109,110,.72); color: #fff; }
.secondary:hover { background: rgba(109,109,110,.5); }
.hero-caption { display: none; }
.hero-switch {
  position: absolute;
  z-index: 3;
  right: var(--page-pad);
  bottom: 19%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(10,10,10,.58);
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.hero-dots { display:flex; align-items:center; gap:5px; }
.hero-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  transition: width .2s ease, border-radius .2s ease, background .2s ease;
}
.hero-dots button.active { width: 21px; border-radius: 5px; background: #fff; }
.hero-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  opacity: .82;
  transition: opacity .18s ease, background .18s ease;
}
.hero-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hero-arrow:hover { background: rgba(255,255,255,.16); opacity:1; }

/* Content shelves */
html:not([data-route="home"]) #hero { display: none; }
html:not([data-route="home"]):not([data-route="genres"]) #genre-strip-section { display: none; }
html:is([data-route="movies"],[data-route="series"],[data-route="genre"],[data-route="saved"],[data-route="genres"]) #browse { padding-top:calc(var(--nav-height) + 42px); }
html:is([data-route="movies"],[data-route="series"],[data-route="genre"],[data-route="saved"]) #cards { min-height:max(720px,calc(100vh - var(--nav-height) - 150px)); }
html[data-route="movies"] .library .section-heading { margin-bottom:26px; }
html[data-route="movies"] .filter-chips,
html[data-route="genres"] #library,
html:is([data-route="watch"],[data-route="dashboard"]) #browse { display:none; }
.genre-strip-section, .library, .film-row, .collection {
  position: relative;
  z-index: 5;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
.home-route #genre-strip-section { display: none; }
.library { margin-bottom: 3rem; }
.home-route .library { margin-bottom: 2.2rem; }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 12px;
}
.section-heading h2, .library h2 {
  margin: 0;
  font-size: clamp(20px, 1.65vw, 28px);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.025em;
}
.section-heading > a { color: #54b9c5; font-size: 13px; font-weight: 600; }
.library .eyebrow { margin-bottom: 5px; color: #777; font-size: 9px; }
.library-tools { display: flex; align-items: center; gap: 16px; color: #aaa; font-size: 12px; }
html:not([data-route="home"]) #result-count { min-width:220px; text-align:right; }
.sort-menu { position:relative; z-index:45; }
.sort-button {
  min-width: 174px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 13px 0 15px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:2px;
  background:#141414;
  color:#f2f2f2;
  font-size:12px;
  font-weight:600;
  text-align:left;
  transition:border-color .16s ease,background .16s ease;
}
.sort-button:hover,.sort-button[aria-expanded="true"] { border-color:#fff; background:#202020; }
.sort-chevron { width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .16s ease; }
.sort-button[aria-expanded="true"] .sort-chevron { transform:rotate(225deg) translate(-2px,-1px); }
.sort-options {
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  width:210px;
  padding:6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:3px;
  background:rgba(20,20,20,.98);
  box-shadow:0 16px 42px rgba(0,0,0,.58);
}
.sort-options button { width:100%; height:38px; display:flex; align-items:center; justify-content:space-between; padding:0 10px; border:0; border-radius:2px; background:transparent; color:#d6d6d6; font-size:12px; text-align:left; }
.sort-options button:hover,.sort-options button:focus-visible { background:#303030; color:#fff; }
.sort-options button i { color:var(--netflix-red); font-style:normal; font-weight:700; opacity:0; }
.sort-options button[aria-selected="true"] { background:#262626; color:#fff; }
.sort-options button[aria-selected="true"] i { opacity:1; }
.library-tools option, form option { background:#181818; color:#fff; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.home-route .filter-chips { display: none; }
.movies-route .filter-chips { display:none; }
.movies-route .library .section-heading { margin-bottom:26px; }
.chip {
  padding: 7px 13px;
  border: 1px solid #666;
  border-radius: 3px;
  background: #222;
  color: #ddd;
  font-size: 12px;
}
.chip:hover, .chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: #000; }
.grid, .row-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3.2vw 8px;
}
.home-route .grid, .row-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0 28px;
  margin: 0 0 -18px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1px;
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.home-route .grid::-webkit-scrollbar, .row-grid::-webkit-scrollbar { display: none; }
.home-route .card, .row-grid .card {
  flex: 0 0 clamp(205px, 18vw, 335px);
  scroll-snap-align: start;
}
.card {
  position: relative;
  min-width: 0;
  border-radius: 4px;
  background:transparent;
  box-shadow:none;
  transition:none;
}
.card:hover { z-index: 2; }
.card-tmdb-button {
  position:absolute;
  z-index:9;
  top:38px;
  right:8px;
  min-width:58px;
  height:25px;
  padding:0 7px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:5px;
  background:rgba(10,10,10,.72);
  color:#eee;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  backdrop-filter:blur(7px);
  opacity:.42;
  font-size:9px;
  font-weight:750;
  letter-spacing:.02em;
  transition:opacity .16s ease,border-color .16s ease,background .16s ease;
}
.card:hover .card-tmdb-button,.card-tmdb-button:focus-visible { opacity:1; border-color:rgba(255,255,255,.8); background:rgba(20,20,20,.92); }
.card-tmdb-button:disabled { opacity:.72; cursor:progress; }
.catalog-skeleton { pointer-events:none; }
.catalog-skeleton .poster,.catalog-skeleton .skeleton-title,.catalog-skeleton .skeleton-meta { display:block; background:linear-gradient(110deg,#202020,#303030); animation:skeleton-pulse .8s ease-in-out infinite alternate; }
.catalog-skeleton .skeleton-title { width:72%; height:15px; margin-top:12px; border-radius:3px; }
.catalog-skeleton .skeleton-meta { width:46%; height:10px; margin-top:10px; border-radius:3px; }
.movies-route .catalog-skeleton .skeleton-title,.movies-route .catalog-skeleton .skeleton-meta { display:none; }
@keyframes skeleton-pulse { to { opacity:.58; } }
.poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(135deg,#333,#111);
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
}
.poster img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering:auto; transform:none; transition:filter .18s ease,opacity .18s ease; }
.card:hover .poster img { filter:brightness(.78); }
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent 52%);
  opacity: .34;
}
.poster .rating, .poster .badge {
  position: absolute;
  z-index: 2;
  top: 9px;
  padding: 3px 6px;
  border-radius: 2px;
  background: rgba(0,0,0,.72);
  font-size: 10px;
  font-weight: 700;
}
.poster .rating { left: 9px; color: #46d369; }
.poster .badge { right: 9px; border: 1px solid rgba(255,255,255,.75); color: #fff; }
.play-icon {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transform: translate(-50%,-50%);
  transition: opacity .18s ease;
  font-size:14px;
}
.card:hover .play-icon, .poster:focus-visible .play-icon { opacity: 1; }
.card-info { min-height:58px; padding: 9px 2px 7px; }
.card h3 { margin: 0 0 6px; overflow: hidden; color: #f4f4f4; font-size: 13px; font-weight:600; letter-spacing:-.015em; white-space: nowrap; text-overflow: ellipsis; }
.card-bottom { display: flex; align-items: center; gap: 8px; color: #919191; font-size: 10px; }
.card-bottom > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-bottom b { color: #46d369; font-weight: 600; }
.movies-route { background:#09090b; }
.movies-route .grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px 20px; }
.movies-route .movie-poster-card { border:0; background:transparent; box-shadow:none; }
.movies-route .grid .movie-poster-card .poster { aspect-ratio:2 / 3; border-radius:22px; border:1px solid rgba(255,255,255,.07); }
.movies-route .movie-poster-card .poster::after { opacity:.12; background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%); }
.movies-route .movie-poster-card .poster img { transform:none; }
.movies-route .movie-poster-card .rating { top:10px; right:10px; left:auto; padding:2px 7px; border-radius:20px; color:#fff; background:rgba(15,20,23,.78); font-size:11px; line-height:1.2; }
.movies-route .movie-poster-card .rating-star { color:#ffc928; }
.movies-route .movie-poster-card .badge { display:none; }
.movies-route .movie-poster-card .card-info { padding:12px 0 0; min-height:70px; }
.movies-route .movie-poster-card h3 { margin:0 0 6px; font-size:14px; line-height:1.3; font-weight:700; }
.movies-route .movie-poster-card .card-bottom { align-items:flex-start; font-size:12px; color:#78808d; }
.poster-card-meta { display:flex; flex-direction:column; gap:5px; min-width:0; }
.poster-card-meta > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.movies-route .movie-poster-card .save-small { opacity:0; transition:opacity .18s ease; }
.movies-route .movie-poster-card:hover .save-small,.movies-route .movie-poster-card:focus-within .save-small,.movies-route .movie-poster-card .save-small[aria-pressed="true"] { opacity:1; }
.movies-route .movie-poster-card progress { width:100%; margin:8px 0 0; }
.movies-route .catalog-skeleton .skeleton-title,.movies-route .catalog-skeleton .skeleton-meta { display:block; }
@media (max-width:1200px) { .movies-route .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

.save-small {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 0;
  border: 1px solid #888;
  border-radius: 50%;
  background: #242424;
  color: #fff;
  font-size: 17px;
}
.save-small:hover, .save-small[aria-pressed="true"] { border-color: #fff; background: #fff; color: #000; }
.card progress { width: calc(100% - 10px); height: 3px; margin: 0 5px; accent-color: var(--netflix-red); }
.continue-watching { position:relative; margin-bottom:38px; }
.continue-card .card-info { min-height:48px; }
.continue-position { display:flex; flex-direction:column; gap:6px; padding:0 2px 9px; font-size:11px; color:#9da3ae; }
.continue-position strong { color:#f3f3f5; font-size:12px; font-weight:600; }
.continue-card progress { display:block; width:100%; margin:0; height:4px; }
.watch-progress-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:14px; margin:18px 0; padding:20px; border:1px solid #ffffff20; border-radius:8px; background:#19191c; }
.watch-progress-controls > div { flex:1 1 320px; }
.watch-progress-controls p { margin:8px 0 0; color:#a6a7b0; font-size:12px; line-height:1.6; max-width:640px; }
.watch-progress-controls label { display:flex; flex-direction:column; gap:7px; color:#c8cad0; font-size:12px; }
.watch-progress-controls input { width:135px; }
.watch-progress-status { flex-basis:100%; color:#b4e5c5; font-size:12px; }
.pagination {
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:52px auto 8px;
  padding:0 10px;
}
.page-numbers { display:flex; align-items:center; gap:7px; }
.page-number,.page-direction {
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.17);
  border-radius:8px;
  background:#1d1d1d;
  color:#aaa;
  font-size:12px;
  font-weight:650;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.page-number { width:42px; }
.page-direction { gap:8px; min-width:104px; padding:0 15px; }
.page-direction svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.page-number:hover,.page-direction:hover { border-color:#777; background:#292929; color:#fff; transform:translateY(-1px); }
.page-number[aria-current="page"] { border-color:#fff; background:#fff; color:#111; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.page-direction.disabled { opacity:.3; pointer-events:none; }
.page-gap { width:24px; color:#5e5e5e; text-align:center; }
.film-row { margin:0 0 2.2rem; content-visibility:auto; contain-intrinsic-size:430px; }
.film-row[data-home-row]:not([data-mounted]) { min-height:260px; }
.film-row .section-heading { margin-bottom: 4px; }
.slider-section { position:relative; }
.slider-arrow {
  position:absolute;
  z-index:35;
  top:var(--slider-top,48px);
  width:52px;
  height:var(--slider-height,140px);
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:3px;
  background:rgba(12,12,12,.68);
  color:#fff;
  opacity:0;
  transform:none;
  transition:opacity .16s ease,background .16s ease;
}
.slider-section:hover > .slider-arrow, .slider-section:focus-within > .slider-arrow { opacity:1; }
.slider-arrow:hover { background:rgba(12,12,12,.9); }
.slider-arrow svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .16s ease; }
.slider-arrow:hover svg { transform:scale(1.18); }
.slider-arrow:disabled { opacity:0 !important; pointer-events:none; }
.slider-prev { left:var(--page-pad); }
.slider-next { right:var(--page-pad); }
.film-row .slider-prev { left:var(--page-pad); }
.film-row .slider-next { right:var(--page-pad); }
.browse-only .slider-arrow, .genres-route .slider-arrow { display:none; }

/* Genres and secondary pages */
.browse-only #browse, .genres-route #browse { padding-top: calc(var(--nav-height) + 42px); }
.browse-only .hero, .genres-route .hero { display: none; }
.browse-only #genre-strip-section { display: none; }
.genres-route #genre-strip-section { display: block; margin-bottom: 42px; }
.genre-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.genre-tile {
  position: relative;
  isolation: isolate;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  padding: 20px;
  border-radius: 5px;
  background: #292929;
  transition: transform .2s ease;
}
.genre-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.08)), var(--art);
  background-position: center;
  background-size: cover;
}
.genre-tile:hover { transform: scale(1.025); }
.genre-tile strong { font-size: 18px; }
.genre-tile small { margin-top: 4px; color: #ccc; }
.genre-symbol { position: absolute; right: 16px; top: 12px; font-size: 26px; }
.collection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 4rem var(--page-pad) 0;
  padding: 34px 38px;
  border-left: 4px solid var(--netflix-red);
  background: linear-gradient(110deg,#262626,#181818);
}
.home-route .collection { display: none; }
.saved-route .collection { display:none; }
.collection h2 { margin: 4px 0 8px; }
.collection p { margin: 0; color: #aaa; }

.saved-route .library { min-height:58vh; margin-bottom:0; padding-top:18px; }
.saved-route .library .eyebrow,.saved-route .library-tools { display:none; }
.saved-route .filter-chips { display:none; }
.saved-route .section-heading { margin-bottom:26px; }
.saved-route .section-heading h2 { font-size:clamp(28px,3vw,42px); font-weight:600; }
.saved-route .grid { gap:34px 10px; }
.saved-empty { max-width:520px; margin:5vh auto 0; padding:80px 24px; }
.saved-empty-icon { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 22px; border:2px solid #777; border-radius:50%; color:#fff; font-size:34px; font-weight:300; }
.saved-empty h3 { margin:0 0 10px; color:#f3f3f3; font-size:24px; }
.saved-empty p { max-width:420px; margin:0 auto 24px; color:#999; line-height:1.55; }
.saved-empty .primary { min-height:42px; }

/* Watch page */
.watch-route { background: #000; }
.watch-route .site { background:radial-gradient(circle at 50% 12%,#202020 0,#090909 34%,#000 68%); }
.watch-route #browse { display: none; }
.watch-inner { width:min(100%,1440px); margin:0 auto; padding: calc(var(--nav-height) + 28px) var(--page-pad) 5rem; }
.watch-back { width:44px; height:44px; display:grid; place-items:center; margin-bottom:22px; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(24,24,24,.92); color:#f2f2f2; box-shadow:0 8px 24px rgba(0,0,0,.28); transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.watch-back svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.watch-back:hover { border-color:#fff; background:#fff; color:#111; transform:scale(1.06); }
.watch-titlebar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.watch-kicker { margin:0 0 7px; color:#777; font-size:9px; font-weight:700; letter-spacing:2.4px; }
.watch-titlebar h1 { margin: 0 0 8px; font-size: clamp(32px,4vw,56px); font-weight:650; letter-spacing: -1.8px; }
.player-shell { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:#080808; box-shadow:0 32px 100px rgba(0,0,0,.72),0 0 0 1px rgba(0,0,0,.5); }
.player-shell::before { content:""; position:absolute; z-index:5; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); pointer-events:none; }
.player-stage { position: relative; width: 100%; aspect-ratio: 16/9; display: grid; place-items: center; overflow:hidden; background: #050505; }
.player-stage iframe, .player-stage video { width: 100%; height: 100%; border: 0; object-fit: contain; }
.player-stage iframe.filmizip-frame { position:absolute; inset:0 -18px 0 0; width:calc(100% + 18px); max-width:none; }
.player-watermark { position:absolute; z-index:4; top:18px; left:20px; display:flex; align-items:baseline; gap:7px; padding:7px 9px; border:1px solid rgba(255,255,255,.16); border-radius:3px; background:rgba(0,0,0,.52); color:#fff; pointer-events:none; backdrop-filter:blur(8px); }
.player-watermark span { color:var(--netflix-red); font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:14px; letter-spacing:-.4px; }
.player-watermark small { color:#a6a6a6; font-size:7px; font-weight:700; letter-spacing:1.5px; }
.player-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 0;
  background-position: center;
  background-size: cover;
  color: #fff;
}
.player-cover::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(0,0,0,.12),rgba(0,0,0,.72)); }
.player-cover > * { position: relative; z-index: 1; }
.player-cover > span { width:78px; height:78px; display:grid; place-items:center; padding-left:5px; border:2px solid #fff; border-radius:50%; background:rgba(0,0,0,.62); box-shadow:0 14px 40px rgba(0,0,0,.48); font-size:28px; transition:transform .18s ease,background .18s ease; }
.player-cover:hover > span { transform:scale(1.08); background:#fff; color:#111; }
.player-cover strong { font-size:18px; text-shadow:0 2px 8px #000; }
.player-cover > small { color:#c3c3c3; font-size:10px; letter-spacing:.3px; text-shadow:0 2px 6px #000; }
.player-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 14px 16px; border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,#191919,#111); }
.source-picker { display:flex; align-items:center; gap:12px; min-width:0; }
.source-label { color:#777; font-size:9px; font-weight:700; letter-spacing:1.5px; }
.player-tabs { display:flex; align-items:center; gap:6px; min-width:0; }
.player-tab { min-width:92px; height:42px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; padding:0 12px; border:1px solid #3d3d3d; border-radius:3px; background:#202020; color:#cfcfcf; text-align:left; transition:border-color .16s ease,background .16s ease; }
.player-tab span { font-size:12px; font-weight:650; }
.player-tab small { max-width:100px; overflow:hidden; color:#777; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.player-tab:hover { border-color:#777; background:#292929; }
.player-tab[aria-selected="true"] { border-color:#fff; background:#f2f2f2; color:#111; }
.player-tab[aria-selected="true"] small { color:#5b5b5b; }
.player-actions { display:flex; align-items:center; gap:6px; }
.player-tool { height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 11px; border:0; border-radius:3px; background:transparent; color:#aaa; font-size:11px; font-weight:600; transition:background .16s ease,color .16s ease; }
.player-tool svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.player-tool:hover { background:#292929; color:#fff; }
.player-tool:disabled { opacity:.55; cursor:wait; }
.player-tool.is-loading svg { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.playback-note { margin: 15px 0 32px; color: #888; font-size: 12px; line-height: 1.6; }
.playback-note a { color: #fff; text-decoration: underline; }
.watch-info { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 32px; max-width: 1180px; }
.info-poster { width: 100%; border-radius: 5px; }
.watch-details { min-width:0; }
.watch-details h2 { margin-top: 0; font-size: 24px; }
.watch-details > p { color: #c5c5c5; line-height: 1.7; }
.genre-links { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:15px; }
.cast-section { position:relative; min-width:0; margin-top:32px; }
.cast-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cast-section h3 { margin:0; font-size:18px; }
.cast-heading > span { color:#666; font-size:10px; }
.cast-grid { display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:0 0 12px; scrollbar-width:none; scroll-snap-type:x mandatory; touch-action:pan-x pan-y pinch-zoom; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }
.cast-grid::-webkit-scrollbar { display:none; }
.cast-card { flex:0 0 132px; min-width:0; scroll-snap-align:start; }
.actor-photo { position:relative; aspect-ratio:1; overflow:hidden; display:grid; place-items:center; border-radius:4px; background:#282828; color:#777; font-size:24px; }
.actor-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cast-card h4 { margin:8px 0 2px; overflow:hidden; color:#e5e5e5; font-size:12px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; }
.cast-card > span { color:#777; font-size:10px; }
.cast-section .slider-prev { left:0; }
.cast-section .slider-next { right:0; }
.related { margin-top: 4rem; }

/* Dialog and forms */
dialog {
  width: min(820px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 7px;
  background: #181818;
  color: #fff;
  box-shadow: 0 25px 90px #000;
}
dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(4px); }
dialog .close { position:absolute; right:16px; top:14px; z-index:3; width:36px; height:36px; border:0; border-radius:50%; background:#2a2a2a; font-size:25px; }
.auth-dialog { width:min(470px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:linear-gradient(145deg,#222 0%,#111 52%,#090909 100%); box-shadow:0 30px 110px rgba(0,0,0,.84); }
.auth-dialog::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--netflix-red),transparent); }
.auth-dialog .close { top:18px; right:18px; background:rgba(255,255,255,.08); }
.auth-inner { padding:38px 42px 34px; }
.auth-brand { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:32px; }
.auth-brand .brand { font-size:25px; }
.auth-brand small { color:#6e6e6e; font-size:8px; font-weight:700; letter-spacing:2px; }
.auth-inner h2 { margin:0 0 8px; font-size:30px; letter-spacing:-1px; }
.auth-inner > .muted { min-height:42px; margin:0 0 23px; font-size:12px; line-height:1.6; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:22px; padding:4px; border-radius:10px; background:rgba(255,255,255,.055); }
.auth-tabs button { min-height:40px; padding:0 12px; border:0; border-radius:7px; background:transparent; color:#777; font-size:12px; font-weight:650; }
.auth-tabs button[aria-selected="true"] { background:#f2f2f2; color:#111; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.auth-form label { margin-bottom:2px; color:#a8a8a8; font-size:10px; font-weight:650; letter-spacing:.35px; }
.auth-form input { height:48px; margin:7px 0 14px; padding:0 14px; border:1px solid rgba(255,255,255,.17); border-radius:8px; background:rgba(255,255,255,.07); font-size:13px; transition:border-color .16s ease,background .16s ease; }
.auth-form input:focus { outline:0; border-color:#bdbdbd; background:rgba(255,255,255,.1); }
.auth-form .primary { width:100%; min-height:48px; margin-top:7px; border-radius:8px; }
.auth-form .primary:disabled { opacity:.65; cursor:wait; }
.auth-text-button { width:100%; margin-top:12px; padding:8px; border:0; background:transparent; color:#919191; font-size:11px; }
.auth-text-button:hover { color:#fff; }
.auth-status { min-height:20px; margin:17px 0 0; color:#aaa; font-size:11px; line-height:1.5; text-align:center; }
.auth-status.error { color:#ff8d93; }
.auth-status.success { color:#46d369; }
.auth-privacy { margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); color:#5f5f5f; font-size:9px; line-height:1.5; text-align:center; }
.profile-editor,.profile-picker-dialog { width:min(610px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:radial-gradient(circle at 78% 12%,rgba(229,9,20,.18),transparent 32%),linear-gradient(145deg,#242424,#0b0b0b 60%); box-shadow:0 34px 120px rgba(0,0,0,.88); }
.profile-editor .close { top:18px; right:18px; background:rgba(255,255,255,.09); }
.profile-editor-inner { padding:40px 42px 35px; }
.profile-editor .eyebrow { margin:0 0 9px; color:var(--netflix-red); font-size:9px; font-weight:750; letter-spacing:2.2px; }
.profile-editor h2 { margin:0 0 8px; font-size:clamp(27px,4vw,38px); letter-spacing:-1.3px; }
.profile-editor .muted { margin:0 0 26px; font-size:12px; line-height:1.6; }
.profile-editor input[type="text"] { height:48px; border-radius:8px; border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.07); }
.profile-editor fieldset { margin:6px 0 26px; padding:0; border:0; }
.profile-editor legend { margin-bottom:10px; color:#aaa; font-size:10px; font-weight:650; letter-spacing:.35px; }
.avatar-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 12px; }
.avatar-option { position:relative; min-width:0; cursor:pointer; text-align:center; }
.avatar-option input { position:absolute; width:1px; height:1px; margin:0; padding:0; opacity:0; pointer-events:none; }
.avatar-option .avatar-sprite { width:100%; aspect-ratio:1; border:2px solid transparent; border-radius:12px; box-shadow:0 9px 24px rgba(0,0,0,.28); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.avatar-option:hover .avatar-sprite { transform:translateY(-3px); box-shadow:0 13px 30px rgba(0,0,0,.4); }
.avatar-option input:focus-visible + .avatar-sprite { outline:2px solid #fff; outline-offset:3px; }
.avatar-option input:checked + .avatar-sprite { border-color:#fff; box-shadow:0 0 0 3px var(--netflix-red),0 14px 30px rgba(0,0,0,.5); transform:translateY(-3px); }
.avatar-option small { display:block; margin-top:8px; color:#777; font-size:9px; }
.avatar-option:has(input:checked) small { color:#fff; }
.profile-editor .primary { width:100%; min-height:49px; border-radius:8px; }
.profile-editor .primary:disabled { opacity:.65; cursor:wait; }
.kids-profile { display:flex; align-items:center; gap:12px; margin:-4px 0 23px; padding:13px 14px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.045); cursor:pointer; }
.kids-profile input { width:20px; height:20px; flex:0 0 auto; margin:0; accent-color:var(--netflix-red); }
.kids-profile span,.kids-profile strong,.kids-profile small { display:block; }
.kids-profile strong { color:#fff; font-size:12px; }
.kids-profile small { margin-top:4px; color:#777; font-size:9px; line-height:1.4; }
.profile-picker-dialog { width:min(760px,calc(100vw - 28px)); }
.profile-picker-dialog .close { top:18px; right:18px; background:rgba(255,255,255,.09); }
.profile-picker-inner { padding:48px 46px 40px; text-align:center; }
.profile-picker-inner > .eyebrow { margin:0 0 8px; color:var(--netflix-red); font-size:9px; font-weight:750; letter-spacing:2.4px; }
.profile-picker-inner h2 { margin:0 0 8px; font-size:clamp(30px,5vw,44px); letter-spacing:-1.5px; }
.profile-picker-inner > .muted { margin:0 auto 30px; font-size:12px; }
.account-profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 16px; }
.account-profile-card { position:relative; min-width:0; padding:0 8px; border-radius:14px; }
.profile-select { width:100%; padding:0; border:0; background:transparent; }
.profile-select .avatar-sprite { width:100%; aspect-ratio:1; border:3px solid transparent; border-radius:13px; box-shadow:0 14px 32px rgba(0,0,0,.38); transition:transform .2s ease,border-color .2s ease; }
.profile-select:hover .avatar-sprite,.account-profile-card.active .profile-select .avatar-sprite { transform:translateY(-4px); border-color:#fff; }
.profile-select strong { display:block; margin-top:11px; overflow:hidden; color:#ddd; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.profile-select small { display:inline-block; margin-top:5px; padding:3px 6px; border-radius:4px; background:#276bd4; color:#fff; font-size:7px; font-weight:750; letter-spacing:1px; }
.profile-card-edit { position:absolute; top:7px; right:15px; width:30px; height:30px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(0,0,0,.68); color:#fff; opacity:0; transition:opacity .16s ease,background .16s ease; }
.account-profile-card:hover .profile-card-edit,.profile-card-edit:focus-visible { opacity:1; }
.profile-card-edit:hover { background:var(--netflix-red); }
.account-profile-add { min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:15px; border:1px dashed rgba(255,255,255,.25); border-radius:13px; background:rgba(255,255,255,.03); color:#aaa; transition:border-color .18s ease,background .18s ease,color .18s ease; }
.account-profile-add:hover { border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.account-profile-add > span { width:58px; height:58px; display:grid; place-items:center; margin-bottom:13px; border:2px solid currentColor; border-radius:50%; font-size:32px; font-weight:200; }
.account-profile-add strong,.account-profile-add small { display:block; }
.account-profile-add strong { font-size:12px; }
.account-profile-add small { margin-top:5px; color:#666; font-size:8px; }
.import-inner { padding: 42px; }
.import-inner h2 { margin: 0 0 8px; font-size: 30px; }
.import-inner > .eyebrow { margin:0 0 8px; color:var(--netflix-red); font-size:9px; font-weight:750; letter-spacing:2.2px; }
.import-mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:24px 0 20px; padding:4px; border-radius:10px; background:rgba(255,255,255,.055); }
.import-mode-tabs button { min-height:42px; border:0; border-radius:7px; background:transparent; color:#777; font-size:12px; font-weight:650; }
.import-mode-tabs button[aria-selected="true"] { background:#f2f2f2; color:#111; box-shadow:0 7px 22px rgba(0,0,0,.28); }
.muted, .form-note, .field-note { color:#999; }
form label { display:block; color:#ccc; font-size:12px; }
form input, form textarea, form select {
  width: 100%;
  margin: 7px 0 16px;
  padding: 12px 13px;
  border: 1px solid #555;
  border-radius: 3px;
  background: #2b2b2b;
  color: #fff;
}
form textarea { resize: vertical; }
form select {
  appearance:none;
  padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,#bbb 50%),linear-gradient(135deg,#bbb 50%,transparent 50%);
  background-position:calc(100% - 15px) 18px,calc(100% - 10px) 18px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
#preview-form { display:flex; align-items:end; gap:10px; margin-top:25px; }
#preview-form label { flex:1; }
#preview-form input { margin-bottom:0; }
#preview-form .primary { flex:0 0 auto; }
#import-status { min-height:22px; color:#f3c45c; font-size:13px; }
#bulk-import-form textarea { min-height:190px; margin-bottom:10px; line-height:1.55; }
.bulk-import-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.bulk-import-footer > span { color:#777; font-size:11px; font-variant-numeric:tabular-nums; }
.bulk-import-footer > span.over-limit { color:#ff7b82; }
.bulk-import-footer .primary { min-width:220px; }
#bulk-import-status { min-height:22px; margin:18px 0 8px; color:#f3c45c; font-size:12px; }
.bulk-import-results { display:grid; gap:8px; }
.bulk-result { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.035); }
.bulk-result img { width:46px; height:62px; border-radius:4px; object-fit:cover; background:#262626; }
.bulk-result strong,.bulk-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bulk-result strong { font-size:12px; }
.bulk-result small { margin-top:5px; color:#777; font-size:9px; }
.bulk-result > span { color:#46d369; font-size:10px; font-weight:700; }
.bulk-result.error > span { color:#ff7b82; }
.bulk-result.error { grid-template-columns:minmax(0,1fr) auto; }
.bulk-result.error small { max-width:570px; white-space:normal; }
.import-history { margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
.import-history-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.import-history-heading span { display:block; margin-bottom:5px; color:#777; font-size:8px; font-weight:800; letter-spacing:2px; }
.import-history-heading h3 { margin:0; font-size:18px; }
.import-history-heading .secondary { min-height:34px; padding:0 12px; font-size:10px; }
.import-history-note { margin:9px 0 14px; color:#777; font-size:10px; line-height:1.5; }
.import-history-list { display:grid; gap:8px; }
.import-history-item { display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.025); }
.import-history-index { color:#555; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.import-history-main strong,.import-history-main small { display:block; }
.import-history-main strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.import-history-main small { margin-top:5px; color:#777; font-size:9px; }
.import-history-counts { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:5px; max-width:190px; }
.import-history-counts span { padding:4px 6px; border-radius:4px; background:rgba(255,255,255,.06); color:#aaa; font-size:8px; font-weight:750; white-space:nowrap; }
.import-history-counts .created { color:#46d369; }
.import-history-counts .updated { color:#f3c45c; }
.import-history-counts .failed { color:#ff7b82; }
.import-history-recovered { color:#666; font-style:normal; }
.import-history-details { grid-column:2/-1; display:grid; gap:9px; padding-top:2px; }
.import-history-urls b { display:block; margin-bottom:6px; color:#777; font-size:8px; letter-spacing:1.2px; text-transform:uppercase; }
.import-history-urls ol { display:grid; gap:4px; margin:0; padding-left:18px; }
.import-history-urls li { padding-left:2px; color:#666; font-size:9px; }
.import-history-urls li a { color:#c9c9c9; overflow-wrap:anywhere; }
.import-history-urls li span { margin-left:7px; color:#666; white-space:nowrap; }
.import-history-errors { border:1px solid rgba(255,73,85,.18); border-radius:6px; background:rgba(255,73,85,.035); }
.import-history-errors summary { padding:8px 10px; color:#ff7b82; cursor:pointer; font-size:9px; font-weight:750; }
.import-history-errors ul { display:grid; gap:8px; margin:0; padding:0 10px 10px; list-style:none; }
.import-history-errors li { padding-top:8px; border-top:1px solid rgba(255,255,255,.06); }
.import-history-errors a { color:#fff; font-size:10px; font-weight:700; overflow-wrap:anywhere; }
.import-history-errors p { margin:5px 0; color:#d7a4a7; font-size:9px; line-height:1.45; }
.import-history-errors code { display:block; max-height:58px; overflow:auto; color:#777; font-size:8px; white-space:pre-wrap; overflow-wrap:anywhere; }
.import-preview { display:grid; grid-template-columns:90px 1fr; gap:16px; margin:20px 0; padding:15px; background:#222; }
.import-preview img { width:90px; height:126px; object-fit:cover; }
.import-preview p { margin:7px 0; color:#aaa; }
.import-preview span { color:#46d369; font-size:12px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#candidates { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
#toast { position:fixed; z-index:300; left:50%; bottom:28px; padding:12px 18px; border-radius:3px; background:#fff; color:#111; font-weight:600; opacity:0; transform:translate(-50%,20px); pointer-events:none; transition:.25s; }
#toast.show { opacity:1; transform:translate(-50%,0); }
.empty { grid-column:1/-1; padding:70px 20px; color:#888; text-align:center; }

/* Admin analytics dashboard */
.dashboard-route { background:#0b0b0d; }
.dashboard-route #browse,.dashboard-route #watch-page { display:none; }
.admin-dashboard { min-height:calc(100vh - var(--nav-height)); padding:calc(var(--nav-height) + 46px) var(--page-pad) 70px; background:radial-gradient(circle at 82% 3%,rgba(229,9,20,.12),transparent 28%),linear-gradient(180deg,#101012,#080809 76%); }
.dashboard-hero { max-width:1320px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin:0 auto 32px; }
.dashboard-hero .eyebrow { margin:0 0 10px; color:var(--netflix-red); font-size:10px; font-weight:750; letter-spacing:2.6px; }
.dashboard-hero h1 { margin:0; font-size:clamp(36px,5vw,66px); line-height:.95; letter-spacing:-2.4px; }
.dashboard-hero p:not(.eyebrow) { max-width:620px; margin:15px 0 0; color:#8f8f94; line-height:1.55; }
.dashboard-actions { display:flex; align-items:center; gap:14px; }
.dashboard-actions span { color:#68686d; font-size:10px; text-transform:uppercase; letter-spacing:.8px; }
.dashboard-actions .secondary { min-height:39px; padding:0 16px; border:1px solid rgba(255,255,255,.16); border-radius:7px; background:rgba(255,255,255,.06); font-size:11px; }
.dashboard-status { max-width:1320px; min-height:22px; margin:0 auto 12px; color:#aaa; font-size:12px; }
.dashboard-status.error { color:#ff7b82; }
.dashboard-stats { max-width:1320px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 auto 16px; }
.dashboard-stats article { min-height:154px; position:relative; overflow:hidden; padding:23px 24px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); box-shadow:0 20px 45px rgba(0,0,0,.18); }
.dashboard-stats article::after { content:""; position:absolute; width:85px; height:85px; right:-35px; bottom:-42px; border-radius:50%; background:var(--netflix-red); opacity:.12; filter:blur(2px); }
.dashboard-stats span,.dashboard-stats small,.dashboard-stats em { display:block; }
.dashboard-stats span { color:#8c8c91; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.15px; }
.dashboard-stats strong { display:block; margin:15px 0 7px; font-size:38px; line-height:1; letter-spacing:-1.7px; }
.dashboard-stats small { color:#77777c; font-size:11px; }
.dashboard-stats em { margin-top:3px; color:#55555a; font-size:9px; font-style:normal; }
.dashboard-stats small[data-dashboard-stat] { display:inline; margin-right:4px; color:#eee; font-size:12px; font-weight:700; }
.dashboard-stats small b { color:#eee; }
.dashboard-grid { max-width:1320px; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr); gap:16px; margin:0 auto; }
.dashboard-panel { min-width:0; padding:25px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:#121214; box-shadow:0 20px 45px rgba(0,0,0,.18); }
.dashboard-genre-panel { grid-row:span 2; }
.dashboard-users-panel { grid-column:2; }
.hero-dashboard-manager { max-width:1320px; margin:16px auto; padding:25px; }
.hero-dashboard-manager .dashboard-panel-title p { max-width:560px; margin:7px 0 0; color:#77777c; font-size:11px; line-height:1.5; }
.hero-dashboard-controls { display:flex; align-items:center; gap:12px; }
.hero-dashboard-controls b { color:#aaa; font-size:11px; white-space:nowrap; }
.hero-catalog-search { width:min(100%,520px); display:flex; align-items:center; gap:9px; margin:0 0 18px; padding:0 12px; border:1px solid rgba(255,255,255,.13); border-radius:8px; background:#0c0c0e; color:#777; }
.hero-catalog-search input { width:100%; height:40px; border:0; outline:0; background:transparent; color:#eee; }
.hero-selected-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:22px; }
.hero-selected-card { min-width:0; position:relative; display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; padding:10px; border:1px solid rgba(229,9,20,.42); border-radius:9px; background:linear-gradient(115deg,rgba(229,9,20,.12),rgba(255,255,255,.035)); }
.hero-selected-card img { width:88px; height:64px; border-radius:5px; object-fit:cover; }
.hero-selected-card b { display:inline-grid; width:18px; height:18px; place-items:center; margin-right:5px; border-radius:50%; background:var(--netflix-red); color:#fff; font-size:9px; }
.hero-selected-card strong { display:inline; color:#eee; font-size:12px; }
.hero-selected-card label { display:block; margin-top:6px; color:#777; font-size:8px; text-transform:uppercase; letter-spacing:.6px; }
.hero-selected-card input { width:100%; margin-top:4px; padding:7px 8px; border:1px solid rgba(255,255,255,.12); border-radius:4px; background:#09090b; color:#bbb; font-size:10px; }
.hero-selected-remove { position:absolute; top:5px; right:5px; width:22px; height:22px; border:0; border-radius:50%; background:#000a; color:#ddd; font-size:17px; line-height:1; }
.hero-empty { grid-column:1/-1; margin:0; padding:22px; border:1px dashed rgba(255,255,255,.16); border-radius:8px; color:#777; font-size:12px; text-align:center; }
.hero-catalog-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; color:#777; font-size:9px; }
.hero-catalog-meta strong { color:#bbb; font-size:10px; }
.hero-catalog-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.hero-catalog-pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:18px; }
.hero-catalog-pagination button { min-width:32px; height:32px; padding:0 9px; border:1px solid rgba(255,255,255,.13); border-radius:6px; background:#111114; color:#aaa; font-size:10px; font-weight:750; }
.hero-catalog-pagination button:hover { border-color:rgba(255,255,255,.36); color:#fff; }
.hero-catalog-pagination button[aria-current="page"] { border-color:var(--netflix-red); background:var(--netflix-red); color:#fff; }
.hero-catalog-pagination span { color:#555; font-size:10px; }
.hero-catalog-card { min-width:0; position:relative; overflow:hidden; padding:0 0 9px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:#19191c; color:#eee; text-align:left; }
.hero-catalog-card img { width:100%; aspect-ratio:16/9; display:block; object-fit:cover; opacity:.78; transition:transform .2s,opacity .2s; }
.hero-catalog-card:hover img { transform:scale(1.04); opacity:1; }
.hero-catalog-card>span { position:absolute; top:7px; left:7px; padding:4px 6px; border-radius:4px; background:#000b; font-size:8px; font-weight:700; }
.hero-catalog-card strong,.hero-catalog-card small { display:block; overflow:hidden; padding:0 9px; text-overflow:ellipsis; white-space:nowrap; }
.hero-catalog-card strong { margin-top:9px; font-size:11px; }.hero-catalog-card small { margin-top:3px; color:#888; font-size:9px; }
.hero-catalog-card.selected { border-color:var(--netflix-red); box-shadow:0 0 0 1px var(--netflix-red); }.hero-catalog-card.selected>span { background:var(--netflix-red); }
.hero-dashboard-status { min-height:18px; margin:12px 0 0; color:#e8bd83; font-size:11px; }
.dashboard-panel-title { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.dashboard-panel-title span { display:block; margin-bottom:7px; color:#67676c; font-size:8px; font-weight:750; letter-spacing:1.6px; }
.dashboard-panel-title h2 { margin:0; font-size:19px; letter-spacing:-.35px; }
.dashboard-panel-title > small { color:#666; font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.dashboard-genres { display:grid; gap:13px; }
.genre-rank { display:grid; grid-template-columns:24px minmax(0,1fr) 42px; align-items:center; gap:12px; }
.genre-position { color:#505055; font-size:11px; font-variant-numeric:tabular-nums; }
.genre-rank-main > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:8px; }
.genre-rank-main strong { font-size:12px; }
.genre-rank-main small { overflow:hidden; color:#65656a; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.genre-rank > b { text-align:right; font-size:15px; font-variant-numeric:tabular-nums; }
.dashboard-meter { height:4px; overflow:hidden; border-radius:99px; background:#242428; }
.dashboard-meter i { width:var(--meter); height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#8d050d,var(--netflix-red)); box-shadow:0 0 12px rgba(229,9,20,.28); }
.dashboard-empty { display:flex; flex-direction:column; gap:7px; padding:48px 20px; color:#777; text-align:center; }
.dashboard-empty strong { color:#bbb; font-size:13px; }
.dashboard-empty span { font-size:10px; line-height:1.5; }
.registration-chart { height:180px; display:grid; grid-template-columns:repeat(14,minmax(12px,1fr)); align-items:end; gap:6px; padding-top:16px; }
.registration-day { height:100%; display:grid; grid-template-rows:1fr auto auto; align-items:end; justify-items:center; gap:7px; }
.registration-day b { width:min(18px,80%); height:var(--bar); min-height:2px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#ff3f48,var(--netflix-red)); box-shadow:0 0 16px rgba(229,9,20,.15); transition:height .35s ease; }
.registration-day strong { color:#a2a2a7; font-size:9px; }
.registration-day span { color:#4f4f54; font-size:7px; white-space:nowrap; writing-mode:vertical-rl; transform:rotate(180deg); }
.dashboard-table-wrap { overflow:auto; }
.dashboard-table-wrap table { width:100%; border-collapse:collapse; }
.dashboard-table-wrap th { padding:0 0 10px; color:#55555a; font-size:8px; font-weight:700; text-align:left; text-transform:uppercase; letter-spacing:1px; }
.dashboard-table-wrap th:last-child,.dashboard-table-wrap td:last-child { text-align:right; }
.dashboard-table-wrap td { padding:11px 0; border-top:1px solid rgba(255,255,255,.055); color:#77777c; font-size:9px; }
.dashboard-table-wrap td:first-child { display:flex; align-items:center; gap:9px; min-width:180px; text-align:left; }
.dashboard-table-wrap td strong { max-width:230px; overflow:hidden; color:#c9c9cc; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.registration-avatar { width:25px; height:25px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:#29292d; color:#eee; font-size:9px; font-weight:750; }

.site-footer { max-width:none; margin:4rem var(--page-pad) 0; padding:3rem 0 2.5rem; border-top:1px solid rgba(255,255,255,.1); color:#777; }
.footer-main { display:grid; grid-template-columns:minmax(220px,1fr) minmax(480px,1.65fr); gap:clamp(40px,8vw,120px); max-width:1180px; margin:0 auto 42px; }
.footer-brand .brand { display:inline-block; margin-bottom:14px; font-size:26px; }
.footer-brand p { max-width:270px; margin:0; color:#8d8d8d; font-size:12px; line-height:1.6; }
.footer-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin:0; }
.footer-links div { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-links strong { margin-bottom:4px; color:#d0d0d0; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:1px; }
.footer-links a,.footer-links button { padding:0; border:0; background:transparent; color:#7f7f7f; font-size:11px; text-align:left; }
.footer-links a:hover,.footer-links button:hover { color:#fff; text-decoration:none; }
.footer-bottom { max-width:1180px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.06); font-size:10px; }
.footer-bottom small { font-size:10px; }

@media (min-width: 1500px) {
  .grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .cast-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
}

@media (max-width: 1050px) {
  .sidebar nav a { font-size:12px; }
  .search { width: 190px; }
  .grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .genre-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-content { width: 55vw; }
  .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns:1fr; }
  .dashboard-genre-panel { grid-row:auto; }
  .dashboard-users-panel { grid-column:auto; }
  .hero-selected-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.hero-catalog-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  :root { --page-pad: 22px; --nav-height: 64px; }
  .sidebar { gap: 18px; }
  .brand { font-size: 25px; }
  .sidebar nav { gap: 15px; }
  .sidebar nav a:nth-child(2) { display:none; }
  .sidebar nav a { min-height:0; padding:0; }
  .search { width:min(220px,31vw); height:36px; padding:0 10px; }
  .search:focus-within { width:min(260px,36vw); }
  .import-button span { display:none; }
  .import-button { padding:0 5px; font-size:22px; }
  .guest-auth-actions { gap:5px; }
  .admin-dashboard { padding-top:calc(var(--nav-height) + 30px); }
  .dashboard-hero { align-items:flex-start; flex-direction:column; }
  .dashboard-actions { width:100%; justify-content:space-between; }
  .hero-dashboard-manager { padding:17px; }.hero-dashboard-manager .dashboard-panel-title { align-items:flex-start; flex-direction:column; }.hero-dashboard-controls { width:100%; justify-content:space-between; }.hero-selected-list { grid-template-columns:1fr; }.hero-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .guest-auth-actions button { min-height:30px; padding:0 9px; font-size:10px; }
  .profile-button { width:auto; height:30px; }
  .profile-button .avatar-sprite { width:30px; height:30px; }
  .hero { min-height:540px; height:74vh; margin-bottom:-4rem; }
  .hero-content { top:53%; width:min(76vw,540px); }
  .hero h1 { font-size:clamp(42px,10vw,64px); }
  .hero-description, #hero-description { font-size:15px; }
  .grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 10px; }
  .movies-route .grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 14px; }
  .movies-route .movie-poster-card h3 { font-size:13px; }
  .home-route .grid, .row-grid { gap:10px; }
  .home-route .card, .row-grid .card { flex-basis:38vw; }
  .genre-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cast-card { flex-basis:118px; }
  .footer-main { grid-template-columns:1fr; gap:32px; }
  .slider-arrow { top:calc(var(--slider-top,48px) + (var(--slider-height,120px) / 2) - 19px); width:38px; height:38px; display:grid; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(12,12,12,.86); opacity:.92; }
  .slider-arrow svg { width:22px; height:22px; }
  .slider-prev { left:calc(var(--page-pad) + 6px); }
  .slider-next { right:calc(var(--page-pad) + 6px); }
  .cast-section .slider-prev { left:6px; }
  .cast-section .slider-next { right:6px; }
}

@media (max-width: 560px) {
  :root { --page-pad: 16px; --nav-height: 108px; }
  .sidebar { min-height:var(--nav-height); height:auto; align-content:center; flex-wrap:wrap; gap:7px 10px; padding-top:8px; padding-bottom:8px; background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,.72) 72%,transparent); }
  .brand { font-size:22px; letter-spacing:-1.2px; }
  .sidebar { gap:6px; }
  .sidebar nav { margin-left:auto; gap:6px; }
  .sidebar nav a { min-height:0; padding:0; font-size:10px; }
  .sidebar nav a:nth-child(2) { display:none; }
  .nav-tools { flex:0 0 100%; width:100%; margin-left:0; gap:8px; }
  .search,.search:focus-within { flex:1; width:auto; height:36px; }
  .search input { font-size:11px; }
  .profile { display:none; }
  .movies-route .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  .movies-route .movie-poster-card .poster { border-radius:16px; }
  .movies-route .movie-poster-card .card-info { padding:10px 0 0; }
  .movies-route .movie-poster-card h3 { margin-bottom:6px; font-size:12px; }
  .movies-route .movie-poster-card .card-bottom { font-size:10px; }
  .hero { min-height:640px; height:88vh; margin-bottom:-3rem; }
  .hero-art { background-position:center top; }
  .hero-shade { background:linear-gradient(0deg,#141414 0%,rgba(20,20,20,.78) 20%,rgba(0,0,0,.13) 62%),linear-gradient(90deg,rgba(0,0,0,.62),transparent 85%); }
  .hero-content { top:auto; bottom:16%; width:calc(100% - 32px); transform:none; text-align:center; }
  .hero .eyebrow { justify-content:center; font-size:10px; }
  .hero .eyebrow span { height:18px; }
  .hero h1 { font-size:42px; letter-spacing:-2px; }
  .hero .meta, .actions { justify-content:center; }
  .hero-description, #hero-description { margin:14px auto 0; font-size:13px; -webkit-line-clamp:3; }
  .primary, .secondary { min-height:40px; padding:0 18px; font-size:13px; }
  .hero-switch { right:50%; bottom:9%; transform:translateX(50%); }
  .hero-switch { gap:6px; padding:4px 6px; }
  .hero-arrow { width:27px; height:27px; opacity:1; }
  .hero-arrow svg { width:16px; height:16px; }
  .hero-dots button { width:5px; height:5px; }
  .hero-dots button.active { width:18px; }
  .section-heading h2, .library h2 { font-size:19px; }
  .section-heading > a { display:none; }
  .library-tools { gap:8px; }
  .library-tools > span { display:none; }
  .sort-button { min-width:132px; height:34px; padding:0 10px 0 11px; gap:10px; font-size:10px; }
  .sort-options { width:185px; }
  .home-route .grid, .row-grid { gap:10px; padding-top:6px; }
  .home-route .card, .row-grid .card { flex-basis:72vw; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 10px; }
  .card-info { padding:9px 2px 8px; }
  .card h3 { font-size:12px; }
  .play-icon { display:none; }
  .poster::after { opacity:.22; }
  .genre-tiles { grid-template-columns:1fr 1fr; gap:8px; }
  .genre-tile { min-height:110px; padding:13px; }
  .genre-tile strong { font-size:14px; }
  .watch-inner { padding-top:calc(var(--nav-height) + 20px); }
  .watch-back { width:40px; height:40px; margin-bottom:18px; }
  .watch-titlebar { align-items:start; flex-direction:column; }
  .watch-titlebar h1 { font-size:30px; }
  .watch-titlebar .secondary { min-height:36px; }
  .player-bar { align-items:stretch; flex-direction:column; padding:12px; }
  .source-picker { align-items:flex-start; flex-direction:column; gap:8px; }
  .player-tabs { width:100%; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .player-tabs::-webkit-scrollbar { display:none; }
  .player-tab { flex:0 0 104px; }
  .player-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .player-tool { justify-content:center; padding:0 8px; background:#222; }
  .player-cover > span { width:54px; height:54px; font-size:21px; }
  .player-cover strong { font-size:14px; }
  .player-cover > small { font-size:9px; }
  .player-watermark { top:10px; left:10px; padding:5px 7px; }
  .watch-info { grid-template-columns:1fr; }
  .info-poster { display:none; }
  .cast-heading > span { display:none; }
  .cast-card { flex-basis:108px; }
  .saved-route .grid { gap:24px 10px; }
  .saved-empty { padding:55px 18px; }
  .collection { margin-left:var(--page-pad); margin-right:var(--page-pad); padding:25px; align-items:start; flex-direction:column; }
  .import-inner { padding:38px 20px 26px; }
  .import-inner h2 { font-size:24px; }
  .auth-inner { padding:34px 22px 26px; }
  .auth-brand { margin-bottom:25px; }
  .auth-inner h2 { font-size:26px; }
  .profile-editor-inner { padding:36px 22px 28px; }
  .avatar-picker { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  .profile-picker-inner { padding:42px 20px 30px; }
  .account-profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px 10px; }
  .account-profile-add { min-height:140px; }
  #preview-form { align-items:stretch; flex-direction:column; }
  .bulk-import-footer { align-items:stretch; flex-direction:column; }
  .bulk-import-footer .primary { width:100%; min-width:0; }
  .two-col { grid-template-columns:1fr; gap:0; }
  .site-footer { margin-top:3rem; }
  .footer-main { margin-bottom:28px; }
  .footer-links { grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-links div:last-child { grid-column:1/-1; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:7px; }
}

/* Desktop cinematic hero controls */
@media (min-width: 681px) {
  .hero-content { top:auto; bottom:17%; width:min(520px,42vw); transform:none; }
  .hero h1 { display:none; }
  .hero-description,#hero-description { max-width:500px; }
  .hero-switch {
    inset:0;
    display:block;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    pointer-events:none;
    backdrop-filter:none;
  }
  .hero-dots {
    position:absolute;
    left:50%;
    bottom:8.5%;
    z-index:2;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:999px;
    background:rgba(6,6,6,.34);
    opacity:.68;
    transform:translateX(-50%);
    pointer-events:auto;
    backdrop-filter:blur(8px);
    transition:opacity .2s ease,background .2s ease;
  }
  .hero-dots:hover { opacity:1; background:rgba(6,6,6,.62); }
  .hero-dots { display:none; }
  .hero-arrow {
    position:absolute;
    top:50%;
    z-index:3;
    width:58px;
    height:96px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    background:rgba(8,8,8,.42);
    box-shadow:0 16px 44px rgba(0,0,0,.34);
    opacity:0;
    visibility:hidden;
    transform:translateY(-50%) scale(.92);
    pointer-events:none;
    backdrop-filter:blur(10px);
    transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1),background .18s ease,visibility .22s ease;
  }
  .hero-arrow svg { width:29px; height:29px; stroke-width:1.6; }
  .hero-prev { left:24px; }
  .hero-next { right:24px; }
  .hero.hero-controls-visible .hero-arrow,.hero:focus-within .hero-arrow {
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) scale(1);
    pointer-events:auto;
  }
  .hero.hero-controls-visible .hero-arrow:hover,.hero:focus-within .hero-arrow:hover { background:rgba(14,14,14,.78); }
}

/* Touch-first navigation and scrolling */
@media (hover: none), (pointer: coarse) {
  .home-route .grid, .row-grid, .cast-grid {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .slider-arrow { display:none !important; }
  .card:hover .poster img { filter:none; }
}

@media (max-width: 680px) {
  html:is([data-route="movies"],[data-route="series"],[data-route="genre"],[data-route="saved"],[data-route="genres"]) #browse { padding-top:calc(var(--nav-height) + 24px); }
  :root { --nav-height: 62px; }
  body { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
  body.mobile-menu-open { overflow:hidden; }
  .home-route .grid, .row-grid, .cast-grid {
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:auto;
    touch-action:pan-x pan-y pinch-zoom;
  }
  .slider-arrow { display:none !important; }
  .sidebar {
    height:var(--nav-height);
    min-height:var(--nav-height);
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:16px;
    padding:0 16px;
    background:linear-gradient(180deg,rgba(8,8,8,.97),rgba(8,8,8,.76) 72%,transparent);
  }
  .sidebar.scrolled, .watch-route .sidebar, .browse-only .sidebar { background:rgba(15,15,15,.96); backdrop-filter:blur(16px); }
  .sidebar > nav, .sidebar > .nav-tools { display:none; }
  .sidebar .brand { font-size:23px; letter-spacing:-1.4px; }
  .mobile-menu-toggle {
    position:relative;
    z-index:3;
    width:42px;
    height:42px;
    display:grid;
    place-content:center;
    gap:5px;
    padding:0;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    background:rgba(24,24,24,.74);
    box-shadow:0 8px 24px rgba(0,0,0,.26);
  }
  .mobile-menu-toggle span {
    width:18px;
    height:1.5px;
    display:block;
    border-radius:2px;
    background:#fff;
    transform-origin:center;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .18s ease,width .2s ease;
  }
  .mobile-menu-toggle span:nth-child(2) { width:13px; margin-left:5px; }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { width:18px; margin-left:0; opacity:0; transform:scaleX(0); }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
  .mobile-menu-backdrop {
    position:fixed;
    inset:0;
    z-index:98;
    display:block;
    padding:0;
    border:0;
    background:rgba(0,0,0,.64);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    backdrop-filter:blur(3px);
    transition:opacity .28s ease,visibility .28s ease;
  }
  .mobile-menu-open .mobile-menu-backdrop { opacity:1; visibility:visible; pointer-events:auto; }
  .mobile-drawer {
    position:fixed;
    z-index:99;
    inset:0 0 0 auto;
    width:min(88vw,370px);
    display:flex;
    flex-direction:column;
    gap:22px;
    padding:82px 20px calc(92px + env(safe-area-inset-bottom));
    overflow-y:auto;
    background:linear-gradient(155deg,#211f20 0%,#111 44%,#090909 100%);
    box-shadow:-28px 0 80px rgba(0,0,0,.68);
    visibility:hidden;
    transform:translateX(105%);
    transition:transform .38s cubic-bezier(.22,.8,.24,1),visibility .38s ease;
  }
  .mobile-menu-open .mobile-drawer { visibility:visible; transform:translateX(0); }
  .mobile-drawer::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--netflix-red)); }
  .mobile-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.1); }
  .mobile-drawer-head span, .mobile-drawer-head strong { display:block; }
  .mobile-drawer-head span { margin-bottom:5px; color:#777; font-size:9px; font-weight:700; letter-spacing:2.2px; }
  .mobile-drawer-head strong { font-size:19px; letter-spacing:-.4px; }
  .mobile-drawer-head .avatar-sprite { width:42px; height:42px; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.34); }
  .mobile-search { height:48px; display:flex; align-items:center; gap:11px; padding:0 14px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.07); }
  .mobile-search:focus-within { border-color:rgba(255,255,255,.62); background:rgba(255,255,255,.1); }
  .mobile-search svg { width:19px; height:19px; flex:0 0 auto; fill:none; stroke:#bdbdbd; stroke-width:1.8; stroke-linecap:round; }
  .mobile-search input { width:100%; min-width:0; padding:0; border:0; outline:0; background:transparent; color:#fff; font-size:14px; }
  .mobile-search input::placeholder { color:#777; }
  .mobile-auth { min-height:44px; display:flex; align-items:center; gap:10px; padding:0 13px; border:1px solid rgba(229,9,20,.28); border-radius:10px; background:rgba(229,9,20,.1); color:#fff; text-align:left; }
  .mobile-auth > span { color:var(--netflix-red); font-size:18px; }
  .mobile-auth strong { font-size:12px; }
  .mobile-guest-auth { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .mobile-guest-auth .mobile-auth { justify-content:center; padding:0 8px; }
  .mobile-guest-auth .register { border-color:var(--netflix-red); background:var(--netflix-red); }
  .mobile-guest-auth .register > span { color:#fff; }
  .mobile-drawer nav { display:flex; flex-direction:column; gap:3px; }
  .mobile-drawer nav a { position:relative; display:flex; flex-direction:column; gap:3px; padding:12px 13px 12px 17px; border-radius:10px; color:#c8c8c8; }
  .mobile-drawer nav a::before { content:""; position:absolute; left:0; top:50%; width:3px; height:0; border-radius:4px; background:var(--netflix-red); transform:translateY(-50%); transition:height .22s ease; }
  .mobile-drawer nav a span { font-size:15px; font-weight:650; }
  .mobile-drawer nav a small { color:#666; font-size:10px; }
  .mobile-drawer nav a small b { color:#aaa; }
  .mobile-drawer nav a[aria-current="page"] { background:rgba(255,255,255,.08); color:#fff; }
  .mobile-drawer nav a[aria-current="page"]::before { height:26px; }
  .mobile-add { width:100%; min-height:58px; display:flex; align-items:center; gap:13px; margin-top:auto; padding:10px 12px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.06); text-align:left; }
  .mobile-add > span { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--netflix-red); font-size:22px; }
  .mobile-add strong, .mobile-add small { display:block; }
  .mobile-add strong { margin-bottom:3px; font-size:13px; }
  .mobile-add small { color:#777; font-size:10px; }
  .mobile-bottom-nav {
    position:fixed;
    z-index:95;
    inset:auto 0 0;
    height:calc(68px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:6px 8px env(safe-area-inset-bottom);
    border-top:1px solid rgba(255,255,255,.1);
    background:rgba(12,12,12,.94);
    box-shadow:0 -12px 35px rgba(0,0,0,.42);
    backdrop-filter:blur(18px);
  }
  .mobile-bottom-nav a { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; min-width:0; border-radius:10px; color:#777; font-size:9px; font-weight:650; }
  .mobile-bottom-nav svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-bottom-nav a[aria-current="page"] { color:#fff; }
  .mobile-bottom-nav a[aria-current="page"]::before { content:""; position:absolute; top:0; width:18px; height:2px; border-radius:3px; background:var(--netflix-red); box-shadow:0 0 10px rgba(229,9,20,.72); }
  .mobile-bottom-nav b { position:absolute; top:3px; left:calc(50% + 8px); min-width:15px; height:15px; display:grid; place-items:center; padding:0 4px; border-radius:10px; background:var(--netflix-red); color:#fff; font-size:8px; }
  .browse-only #browse, .genres-route #browse { padding-top:calc(var(--nav-height) + 24px); }
  .watch-inner { padding-top:calc(var(--nav-height) + 18px); }
  .site-footer { padding-bottom:1rem; }
  #toast { bottom:calc(82px + env(safe-area-inset-bottom)); max-width:calc(100vw - 32px); text-align:center; }
}

@media (max-width: 560px) {
  .admin-dashboard { padding:calc(var(--nav-height) + 24px) 16px 90px; }
  .dashboard-hero { margin-bottom:22px; }
  .dashboard-hero h1 { font-size:40px; letter-spacing:-1.7px; }
  .dashboard-hero p:not(.eyebrow) { font-size:12px; }
  .dashboard-stats { grid-template-columns:1fr 1fr; gap:9px; }
  .dashboard-stats article { min-height:128px; padding:18px; border-radius:11px; }
  .dashboard-stats strong { margin:13px 0 6px; font-size:30px; }
  .dashboard-panel { padding:19px 16px; border-radius:11px; }
  .genre-rank { grid-template-columns:18px minmax(0,1fr) 34px; gap:8px; }
  .genre-rank-main small { max-width:130px; }
  .registration-chart { gap:3px; }
  .registration-day b { width:10px; }
  .dashboard-table-wrap td strong { max-width:160px; }
  .hero {
    height:82svh;
    min-height:590px;
    max-height:740px;
    margin-bottom:22px;
    border-radius:0 0 18px 18px;
    box-shadow:0 18px 45px rgba(0,0,0,.34);
  }
  .hero-art { inset:0; background-position:center top; transform:scale(1); }
  .hero-art.is-ready { transform:scale(1); }
  .hero-shade {
    background:
      linear-gradient(0deg,#141414 0%,rgba(20,20,20,.98) 11%,rgba(20,20,20,.83) 31%,rgba(0,0,0,.12) 66%),
      linear-gradient(90deg,rgba(0,0,0,.5),transparent 82%),
      linear-gradient(180deg,rgba(0,0,0,.48),transparent 24%);
  }
  .hero-content { left:20px; right:20px; bottom:64px; width:auto; text-align:left; }
  .hero .eyebrow { justify-content:flex-start; margin-bottom:9px; font-size:9px; letter-spacing:2.4px; }
  .hero .eyebrow span { width:3px; height:15px; }
  .hero h1 { max-width:92%; margin-bottom:12px; font-size:clamp(36px,11.5vw,49px); line-height:.97; letter-spacing:-2.3px; }
  .hero .meta { justify-content:flex-start; gap:8px; font-size:11px; }
  .hero-description, #hero-description { max-width:94%; margin:11px 0 0; font-size:12px; line-height:1.5; -webkit-line-clamp:2; }
  .hero .actions { justify-content:flex-start; gap:9px; margin-top:17px; }
  .hero .actions > * { min-height:42px; padding:0 15px; font-size:12px; }
  .hero .actions .primary { flex:1 1 58%; }
  .hero .actions .secondary { flex:1 1 42%; }
  .hero-switch { top:calc(var(--nav-height) + 14px); right:14px; bottom:auto; transform:none; gap:4px; padding:4px 5px; background:rgba(8,8,8,.48); }
  .hero-arrow { width:25px; height:25px; }
  .hero-dots { gap:4px; }
  .hero-dots button { width:4px; height:4px; }
  .hero-dots button.active { width:14px; }
  .genre-strip-section, .library, .film-row, .collection { padding-left:16px; padding-right:16px; }
  .home-route .library { margin-bottom:2.6rem; }
  .section-heading { margin-bottom:10px; }
  .section-heading h2, .library h2 { font-size:20px; letter-spacing:-.35px; }
  .home-route .grid, .row-grid { gap:12px; padding:6px 0 20px; margin-bottom:-10px; }
  .home-route .card, .row-grid .card { flex-basis:min(78vw,330px); }
  .poster { aspect-ratio:16/9; border:1px solid rgba(255,255,255,.09); border-radius:9px; box-shadow:0 9px 24px rgba(0,0,0,.34); }
  .poster img { object-position:center; }
  .poster::after { opacity:.38; background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 48%); }
  .card-info { min-height:60px; padding:10px 3px 7px; }
  .card h3 { margin-bottom:7px; font-size:13px; }
  .card-bottom { font-size:9px; }
  .save-small { width:30px; height:30px; border-color:#626262; background:#1d1d1d; }
  .grid:not(.slider-track) { gap:22px 10px; }
  .grid:not(.slider-track) .poster { aspect-ratio:4/3; }
  .genre-tile { border-radius:9px; box-shadow:0 8px 20px rgba(0,0,0,.25); }
  .film-row { margin-bottom:2.7rem; }
  .pagination { gap:7px; margin-top:36px; padding:0; }
  .page-numbers { gap:4px; }
  .page-number { width:34px; height:38px; border-radius:7px; font-size:11px; }
  .page-direction { width:38px; min-width:38px; height:38px; padding:0; border-radius:7px; }
  .page-direction span { display:none; }
  .page-direction svg { width:15px; height:15px; }
  .page-gap { width:12px; font-size:11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}

/* Dashboard catalogue: a compact card action, never a row of loose buttons. */
.hero-catalog-item { position:relative; min-width:0; }
.hero-catalog-item .hero-catalog-card { width:100%; height:100%; }
.hero-catalog-delete { position:absolute; z-index:4; top:7px; right:7px; width:28px; height:28px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(13,13,15,.86); color:transparent; font-size:0; box-shadow:0 3px 12px rgba(0,0,0,.48); opacity:.82; transform:scale(.92); transition:opacity .16s ease,transform .16s ease,background .16s ease; }
.hero-catalog-delete::after { content:'×'; color:#fff; font-size:21px; font-weight:500; line-height:1; }
.hero-catalog-item:hover .hero-catalog-delete,.hero-catalog-item:focus-within .hero-catalog-delete { opacity:1; transform:scale(1); }
.hero-catalog-delete:hover { background:#c7182d; border-color:#ef5161; }
.hero-catalog-delete:disabled { opacity:.55; cursor:wait; }

/* Series detail experience and admin episode editor. */
.watch-route .watch-inner { width:min(1240px,100%); padding-bottom:90px; }
.watch-titlebar { align-items:center; padding:0 0 20px; border-bottom:1px solid rgba(255,255,255,.09); }
.watch-titlebar h1 { max-width:850px; font-size:clamp(31px,3.5vw,52px); line-height:1.06; }
.watch-titlebar .meta { margin-top:10px; }
.watch-admin-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.watch-admin-actions .secondary { min-height:42px; padding:0 15px; border-radius:7px; background:rgba(255,255,255,.11); font-size:11px; }
.watch-admin-actions .secondary:first-child { background:#fff; color:#111; }
.danger-button { min-height:42px; padding:0 14px; border:1px solid rgba(255,99,112,.5); border-radius:7px; background:rgba(150,24,39,.38); color:#ffd9dd; font-size:11px; font-weight:700; }
.danger-button:hover { background:#b51d31; color:#fff; }
.episode-section { max-width:1180px; margin:36px 0 42px; padding:25px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:linear-gradient(135deg,rgba(229,9,20,.09),rgba(255,255,255,.035) 36%,rgba(255,255,255,.02)); box-shadow:0 22px 55px rgba(0,0,0,.18); }
.episode-section-head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:21px; border-bottom:1px solid rgba(255,255,255,.09); }
.episode-section-head .eyebrow { margin:0 0 8px; color:#ff7f8a; font-size:9px; font-weight:800; letter-spacing:2px; }
.episode-section-head h2 { margin:0; color:#fff; font-size:25px; letter-spacing:-.7px; }
.episode-section-head p:not(.eyebrow) { max-width:580px; margin:8px 0 0; color:#929297; font-size:12px; line-height:1.55; }
.episode-count { min-width:86px; padding:13px 14px; border:1px solid rgba(229,9,20,.38); border-radius:10px; background:rgba(0,0,0,.24); text-align:center; }
.episode-count strong,.episode-count span { display:block; }.episode-count strong { color:#fff; font-size:25px; line-height:1; }.episode-count span { margin-top:4px; color:#9d9da2; font-size:9px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.season-tabs { display:flex; gap:8px; overflow-x:auto; margin:20px 0 13px; padding-bottom:4px; scrollbar-width:none; }.season-tabs::-webkit-scrollbar { display:none; }
.season-tab { min-width:112px; padding:10px 13px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(0,0,0,.18); color:#b9b9bc; text-align:left; transition:background .16s ease,border-color .16s ease,color .16s ease; }.season-tab small { display:block; margin-top:3px; color:#747479; font-size:9px; }.season-tab[aria-selected="true"] { border-color:var(--netflix-red); background:var(--netflix-red); color:#fff; }.season-tab[aria-selected="true"] small { color:#fff; opacity:.8; }
.episode-list { display:grid; gap:9px; }.episode-card { display:grid; grid-template-columns:58px minmax(180px,1fr) auto; align-items:center; gap:16px; padding:13px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(0,0,0,.2); transition:border-color .16s ease,background .16s ease; }.episode-card:hover { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.045); }.episode-number { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:7px; background:rgba(255,255,255,.06); }.episode-number span { color:#96969b; font-size:9px; font-weight:700; letter-spacing:.8px; }.episode-number b { color:#fff; font-size:15px; }.episode-copy strong { color:#f2f2f2; font-size:14px; }.episode-copy p { margin:5px 0 0; color:#8e8e94; font-size:11px; line-height:1.45; }.episode-players { display:flex; justify-content:flex-end; gap:7px; flex-wrap:wrap; }.episode-player { min-width:128px; padding:8px 10px; border:1px solid rgba(255,255,255,.16); border-radius:7px; background:#252528; color:#eee; text-align:left; transition:border-color .16s ease,background .16s ease; }.episode-player span,.episode-player small { display:block; }.episode-player span { font-size:11px; font-weight:700; }.episode-player small { max-width:125px; overflow:hidden; margin-top:3px; color:#89898f; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.episode-player:hover,.episode-player[aria-pressed="true"] { border-color:#fff; background:#fff; color:#111; }.episode-player:hover small,.episode-player[aria-pressed="true"] small { color:#5a5a5f; }.episode-empty-state { display:flex; align-items:center; gap:15px; margin-top:20px; padding:22px; border:1px dashed rgba(255,255,255,.2); border-radius:10px; background:rgba(0,0,0,.17); }.episode-empty-state>span { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:#fff; font-size:25px; }.episode-empty-state strong { color:#eee; font-size:13px; }.episode-empty-state p { margin:5px 0 0; color:#888; font-size:11px; line-height:1.5; }
.episode-dialog { width:min(620px,calc(100vw - 28px)); border:1px solid rgba(255,255,255,.12); border-radius:15px; background:radial-gradient(circle at 88% 5%,rgba(229,9,20,.2),transparent 31%),#161618; }.episode-dialog-inner { padding:38px 42px 34px; }.episode-dialog-inner .eyebrow { margin:0 0 9px; color:#ff7f8a; font-size:9px; font-weight:800; letter-spacing:2px; }.episode-dialog-inner h2 { margin:0 0 7px; font-size:30px; letter-spacing:-1px; }.episode-dialog-inner>.muted { margin:0 0 24px; color:#96969b; font-size:12px; line-height:1.55; }.episode-dialog .two-col { gap:12px; }.episode-dialog input,.episode-dialog textarea { border-color:rgba(255,255,255,.17); border-radius:8px; background:rgba(0,0,0,.26); }.episode-dialog textarea { line-height:1.5; }.episode-dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:8px; }.episode-dialog-actions .primary,.episode-dialog-actions .secondary { min-height:43px; border-radius:7px; font-size:12px; }.episode-dialog-actions .primary { background:#fff; color:#111; }.episode-dialog-status { min-height:18px; margin:13px 0 0; color:#f3c45c; font-size:11px; }
.series-folder-card .poster { aspect-ratio:16/9; }.series-folder-card .poster::before { content:'СЕРИАЛ'; position:absolute; z-index:2; right:10px; bottom:10px; padding:5px 7px; border-radius:4px; background:var(--netflix-red); color:#fff; font-size:8px; font-weight:800; letter-spacing:1px; }.series-folder-card .play-icon { border-radius:8px; }
.import-media-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 3px; }.import-media-tabs button { min-height:34px; padding:0 13px; border:1px solid rgba(255,255,255,.16); border-radius:99px; background:transparent; color:#9c9ca1; font-size:11px; font-weight:700; }.import-media-tabs button[aria-selected="true"] { border-color:#fff; background:#fff; color:#111; }.import-series-note { flex-basis:100%; margin:0; color:#8a8a90; font-size:10px; line-height:1.5; }
@media(max-width:760px){.watch-route .watch-inner{padding-left:16px;padding-right:16px}.watch-titlebar{align-items:flex-start;gap:13px}.watch-titlebar h1{font-size:31px}.watch-admin-actions{justify-content:flex-start}.episode-section{margin:25px 0 32px;padding:17px}.episode-section-head{align-items:flex-start}.episode-section-head h2{font-size:22px}.episode-count{min-width:66px;padding:10px}.episode-card{grid-template-columns:46px minmax(0,1fr);gap:11px}.episode-players{grid-column:1/-1;justify-content:flex-start}.episode-player{flex:1 1 130px}.episode-dialog-inner{padding:30px 20px 22px}.episode-dialog-actions{flex-direction:column-reverse}.episode-dialog-actions button{width:100%}.series-folder-card .poster{aspect-ratio:16/10}}
.episode-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.episode-tile { min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:#151517; box-shadow:0 14px 30px rgba(0,0,0,.16); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.episode-tile:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.3); box-shadow:0 22px 40px rgba(0,0,0,.3); }
.episode-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#232326; }.episode-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72)); pointer-events:none; }.episode-thumb img { width:100%; height:100%; object-fit:cover; opacity:.85; transition:transform .3s ease,opacity .3s ease; }.episode-tile:hover .episode-thumb img { transform:scale(1.045); opacity:1; }
.episode-code,.episode-source-count { position:absolute; z-index:1; padding:5px 7px; border-radius:4px; background:rgba(8,8,10,.78); font-size:9px; font-weight:800; letter-spacing:.4px; backdrop-filter:blur(7px); }.episode-code { top:9px; left:9px; color:#fff; }.episode-source-count { right:9px; bottom:9px; color:#dedee0; font-size:8px; }
.episode-tile-body { padding:13px; }.episode-tile-body h3 { overflow:hidden; margin:0; color:#f4f4f4; font-size:14px; font-weight:700; letter-spacing:-.15px; text-overflow:ellipsis; white-space:nowrap; }.episode-tile-body>p { display:-webkit-box; min-height:32px; margin:6px 0 12px; overflow:hidden; color:#929298; font-size:10px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.episode-gallery .episode-players { display:flex; gap:6px; justify-content:stretch; }.episode-gallery .episode-player { min-width:0; flex:1 1 0; padding:8px 9px; border-radius:6px; background:rgba(255,255,255,.07); }.episode-gallery .episode-player span { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.episode-gallery .episode-player small { max-width:100%; font-size:7px; }.episode-gallery .episode-player:first-child { border-color:rgba(229,9,20,.65); background:rgba(229,9,20,.16); }.episode-gallery .episode-player:first-child:hover,.episode-gallery .episode-player:first-child[aria-pressed="true"] { background:var(--netflix-red); border-color:var(--netflix-red); color:#fff; }.episode-gallery .episode-player:first-child:hover small,.episode-gallery .episode-player:first-child[aria-pressed="true"] small { color:#fff; opacity:.8; }
@media(max-width:1050px){.episode-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}}@media(max-width:600px){.episode-gallery{grid-template-columns:1fr;gap:11px}.episode-tile{display:grid;grid-template-columns:44% minmax(0,1fr)}.episode-thumb{height:100%;min-height:145px;aspect-ratio:auto}.episode-tile-body{padding:12px}.episode-tile-body>p{min-height:30px}.episode-gallery .episode-players{flex-wrap:wrap}.episode-gallery .episode-player{flex:1 1 105px}}
.series-watch-layout { display:grid; grid-template-columns:minmax(0,1fr) 318px; align-items:start; gap:22px; }.series-player-column { min-width:0; }.series-player-column .playback-note { margin:11px 0 0; }
.episode-rail { position:sticky; top:calc(var(--nav-height) + 20px); max-height:calc(100vh - var(--nav-height) - 42px); display:flex; flex-direction:column; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; background:transparent; box-shadow:none; }.episode-rail .episode-section-head { align-items:flex-start; padding:0 0 13px; border-bottom:1px solid rgba(255,255,255,.12); }.episode-rail .episode-section-head .eyebrow { margin-bottom:5px; font-size:8px; }.episode-rail .episode-section-head h2 { font-size:21px; }.episode-rail .episode-section-head p:not(.eyebrow) { display:none; }.episode-rail .episode-count { min-width:48px; padding:8px 5px; border-color:rgba(255,255,255,.16); border-radius:7px; }.episode-rail .episode-count strong { font-size:18px; }.episode-rail .episode-count span { font-size:7px; }
.episode-rail .season-tabs { flex:0 0 auto; margin:12px 0 10px; }.episode-rail .season-tab { min-width:0; padding:8px 11px; border-radius:6px; font-size:10px; }.episode-rail .season-tab small { margin-top:2px; font-size:7px; }
.episode-rail .episode-gallery { grid-template-columns:1fr; flex:1 1 auto; gap:8px; min-height:0; margin:0; padding:0 3px 2px 0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }.episode-rail .episode-gallery::-webkit-scrollbar{width:4px}.episode-rail .episode-gallery::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(255,255,255,.25)}
.episode-rail .episode-tile { display:grid; grid-template-columns:104px minmax(0,1fr); min-height:94px; border-radius:8px; box-shadow:none; }.episode-rail .episode-tile:hover { transform:none; }.episode-rail .episode-thumb { min-height:94px; aspect-ratio:auto; }.episode-rail .episode-code { top:7px; left:7px; padding:3px 5px; font-size:7px; }.episode-rail .episode-source-count { display:none; }.episode-rail .episode-tile-body { display:flex; min-width:0; flex-direction:column; padding:9px 10px; }.episode-rail .episode-tile-body h3 { font-size:11px; }.episode-rail .episode-tile-body>p { min-height:0; margin:4px 0 7px; font-size:8px; -webkit-line-clamp:2; }.episode-rail .episode-players { margin-top:auto; }.episode-rail .episode-player { padding:5px 7px; border-radius:4px; }.episode-rail .episode-player span { font-size:8px; }.episode-rail .episode-player small { display:none; }
.episode-rail .episode-empty-state { margin-top:13px; padding:15px; }.episode-rail .episode-empty-state>span { width:34px; height:34px; font-size:20px; }.episode-rail .episode-empty-state strong { font-size:11px; }.episode-rail .episode-empty-state p { font-size:9px; }
@media(max-width:900px){.series-watch-layout{grid-template-columns:1fr;gap:19px}.episode-rail{position:static;max-height:none;display:block}.episode-rail .episode-section-head p:not(.eyebrow){display:block;font-size:10px}.episode-rail .episode-gallery{display:flex;overflow-x:auto;overflow-y:hidden;padding:0 0 8px;scroll-snap-type:x mandatory}.episode-rail .episode-tile{display:block;flex:0 0 min(260px,76vw);min-height:0;scroll-snap-align:start}.episode-rail .episode-thumb{min-height:0;aspect-ratio:16/9}.episode-rail .episode-tile-body{display:block;padding:11px}.episode-rail .episode-tile-body h3{font-size:13px}.episode-rail .episode-tile-body>p{margin:5px 0 10px;font-size:9px}.episode-rail .episode-player{padding:7px 8px}.episode-rail .episode-player span{font-size:9px}.episode-rail .episode-source-count{display:block}.episode-rail .episode-gallery::-webkit-scrollbar{height:3px}}
.episode-thumb { background:#08080a; }.episode-thumb img { object-fit:contain; transform:none!important; }.episode-tile:hover .episode-thumb img { transform:none!important; opacity:1; }
.episode-rail .episode-tile { grid-template-columns:112px minmax(0,1fr); }.episode-rail .episode-thumb { min-height:0; height:63px; align-self:center; aspect-ratio:16/9; }.episode-rail .episode-thumb::after { background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.45)); }
.episode-unavailable { display:block; padding:7px 8px; border:1px solid rgba(255,184,76,.32); border-radius:5px; background:rgba(255,184,76,.08); color:#e8b968; font-size:8px; line-height:1.35; }
.episode-rail > .slider-arrow { display:none; }
@media(max-width:900px){
  .episode-rail .episode-gallery { display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:2px 0 10px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .episode-rail .episode-gallery::-webkit-scrollbar { display:none; }
  .episode-rail .episode-tile { display:block; flex:0 0 clamp(185px,48vw,242px); min-height:0; scroll-snap-align:start; }
  .episode-rail .episode-thumb { height:auto; min-height:0; aspect-ratio:16/9; }.episode-rail .episode-thumb::after { background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.65)); }
  .episode-rail .episode-tile-body { display:block; padding:11px; }.episode-rail .episode-tile-body h3 { font-size:12px; }.episode-rail .episode-tile-body>p { min-height:28px; margin:5px 0 9px; font-size:9px; }.episode-rail .episode-players { display:flex; flex-wrap:wrap; }.episode-rail .episode-player { min-width:0; padding:7px 8px; }.episode-rail .episode-player span { font-size:9px; }.episode-rail .episode-player small { display:none; }
  .episode-rail.slider-section > .slider-arrow { top:calc(var(--slider-top,20px) + (var(--slider-height,112px) / 2) - 18px); z-index:40; width:36px; height:36px; display:grid!important; border:1px solid rgba(255,255,255,.36); border-radius:50%; background:rgba(8,8,10,.9); opacity:.96!important; box-shadow:0 5px 18px rgba(0,0,0,.5); }
  .episode-rail.slider-section > .slider-prev { left:-10px; }.episode-rail.slider-section > .slider-next { right:-10px; }.episode-rail.slider-section > .slider-arrow svg { width:19px; height:19px; }
}

/* Refined hero presentation: visible title and subtle black-glass navigation. */
.hero .eyebrow {
  font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.2;
}

.hero .eyebrow span {
  width: 3px;
  height: 20px;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(229, 9, 20, .42);
}

.hero h1 {
  display: block;
  max-width: 620px;
  margin: 0 0 16px;
  font-size: clamp(42px, 4.2vw, 68px);
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .86), 0 1px 2px rgba(0, 0, 0, .95);
}

@media (min-width: 681px) {
  .hero-content {
    width: min(620px, 46vw);
  }

  .hero h1 {
    display: block;
  }

  .hero-arrow {
    width: 54px;
    height: 88px;
    border-color: rgba(255, 255, 255, .12);
    background: rgba(5, 5, 5, .28);
    color: rgba(255, 255, 255, .84);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .24);
    opacity: .28;
    visibility: visible;
    transform: translateY(-50%) scale(.96);
    pointer-events: auto;
    backdrop-filter: blur(8px);
  }

  .hero-prev {
    left: 18px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .2));
  }

  .hero-next {
    right: 18px;
    background: linear-gradient(270deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .2));
  }

  .hero.hero-controls-visible .hero-arrow,
  .hero:focus-within .hero-arrow {
    opacity: .28;
    transform: translateY(-50%) scale(1);
  }

  .hero .hero-arrow:hover {
    border-color: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .92);
    opacity: .42;
  }

  .hero .hero-arrow:active,
  .hero.hero-controls-visible .hero-arrow:active,
  .hero:focus-within .hero-arrow:active {
    opacity: .28;
  }
}

@media (max-width: 680px) {
  .hero .eyebrow {
    font-size: 11px;
    letter-spacing: .22em;
  }

  .hero h1 {
    display: block;
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1;
  }
}

/* Filmi5 identity and administrator catalogue controls. */
.admin-catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 12px}.admin-catalog-heading h3{margin:0;font-size:18px}.admin-catalog-heading label{display:flex;align-items:center;gap:10px;font-size:13px;color:#aaa}.admin-catalog-heading select{background:#202020;color:#fff;border:1px solid #ffffff30;border-radius:6px;padding:9px 14px;min-width:130px}@media(max-width:600px){.admin-catalog-heading{align-items:flex-start;flex-direction:column}}

/* Ranked films live below the cinematic artwork, inside the Hero section. */
.home-route .hero{--hero-stage-height:clamp(570px,78vh,820px);height:auto;min-height:0;max-height:none;margin-bottom:24px;padding-top:var(--hero-stage-height);overflow:hidden}
.home-route .hero>.hero-art,.home-route .hero>.hero-shade{inset:0 0 auto;height:var(--hero-stage-height)}
.home-route .hero>.hero-content{top:calc(var(--hero-stage-height) * .52);bottom:auto;transform:translateY(-30%)}
.home-route .hero>.hero-switch{height:var(--hero-stage-height);bottom:auto}
.home-route .hero>.hero-caption{display:none}
.hero-trending{position:relative;z-index:3;padding:0 var(--page-pad) 24px;background:#141414}
.hero-trending .section-heading{padding:0;margin:0 0 8px}
.hero-trending .section-heading h2{font-size:clamp(22px,2vw,30px);font-weight:750;letter-spacing:-.5px}
.hero-trending .row-grid{margin:0;padding:8px 0 12px;scroll-padding-inline:1px}
.hero-trending .poster{aspect-ratio:16/9;border-radius:8px}
.hero-trending .trending-rank{position:absolute;z-index:3;bottom:-7px;left:8px;color:#090909;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(60px,7.5vw,112px);font-weight:400;letter-spacing:-3px;line-height:1;-webkit-text-stroke:2px #eee;text-shadow:0 4px 12px #000b;pointer-events:none}
.hero-trending .poster:hover .trending-rank{color:#161616}
.hero-trending .row-grid{scrollbar-width:none}
@media(max-width:680px){.home-route .hero{--hero-stage-height:clamp(540px,78svh,680px);border-radius:0}.home-route .hero>.hero-content{top:auto;bottom:auto;transform:none;top:calc(var(--hero-stage-height) - 320px)}.home-route .hero>.hero-switch{height:auto;top:calc(var(--nav-height) + 14px)}.hero-trending{padding-inline:16px;padding-bottom:12px}.hero-trending .trending-rank{font-size:72px}.hero-trending .section-heading h2{font-size:22px}}

/* Series viewing: a spacious player and an episode browser below it. */
.series-experience{max-width:1480px;margin:auto}
.series-experience .watch-titlebar{padding-bottom:24px;border-bottom:1px solid #ffffff12;margin-bottom:26px}
.series-experience .watch-titlebar h1{font-size:clamp(34px,4vw,58px);letter-spacing:-1.8px}
.series-experience>.player-shell{max-width:1100px;margin:0 auto;border-radius:16px;box-shadow:0 22px 70px #0005}
.series-now-playing{max-width:1100px;margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.series-current-kicker{display:block;color:#f07982;font-size:10px;font-weight:750;letter-spacing:1.8px;margin-bottom:7px}
.series-now-playing strong{display:block;font-size:16px;font-weight:650;line-height:1.5}
.series-episode-navigation{display:flex;gap:8px;flex-shrink:0}
.series-episode-navigation button{border:1px solid #ffffff20;background:#ffffff07;border-radius:8px;padding:10px 14px;font-size:12px;min-height:42px}
.series-episode-navigation button:hover{background:#ffffff16}.series-episode-navigation button:disabled{opacity:.3;cursor:default}
.series-experience>.playback-note,.series-experience>#watch-progress-controls{max-width:1100px;margin:16px auto 28px}
.series-experience .player-tabs{gap:8px;flex-wrap:wrap}.series-experience .player-tab{min-width:90px;min-height:40px;border-radius:7px;font-size:13px;white-space:nowrap}
.series-experience .player-cover strong{font-size:21px}.series-experience .player-cover small{font-size:13px}
.series-episodes{margin:44px 0 48px;padding-top:30px;border-top:1px solid #ffffff15}
.series-episodes-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.series-episodes-heading .eyebrow{margin:0 0 8px;font-size:10px;color:#e8878e;letter-spacing:2px}
.series-episodes-heading h2{margin:0;font-size:32px;letter-spacing:-1px}.series-episodes-heading p:last-child{margin:8px 0 0;color:#9b9ba3;font-size:13px}
.series-season-label{display:flex;align-items:center;gap:12px;color:#a5a5ad;font-size:13px}
.series-season-label select{min-width:150px;padding:12px 16px;border:1px solid #ffffff25;background:#202024;color:white;border-radius:8px;font-size:14px}
.series-episode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.series-episode{min-width:0;border:1px solid #ffffff10;border-radius:12px;background:#19191c;overflow:hidden;transition:background .18s,border-color .18s}
.series-episode:hover{background:#222225;border-color:#ffffff30}.series-episode.is-current{border-color:#e50914;background:linear-gradient(110deg,#e5091418,#1b1b1e);box-shadow:inset 3px 0 #e50914}
.series-episode-open{display:grid;grid-template-columns:30px 150px minmax(0,1fr) 18px;align-items:center;gap:16px;width:100%;padding:18px;background:none;border:0;color:white;text-align:left;min-height:136px}
.series-episode-number{font-size:25px;font-weight:650;color:#7e7e89;letter-spacing:-1px}.is-current .series-episode-number{color:#fa5864}
.series-episode-image{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background:#080809}
.series-episode-image img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .2s}.series-episode:hover img{opacity:1}
.series-episode-play{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;background:#0003;opacity:0;transition:opacity .2s}.series-episode:hover .series-episode-play,.series-episode-open:focus-visible .series-episode-play,.is-current .series-episode-play{opacity:1}
.series-episode-copy{display:block;min-width:0}.series-episode-title{display:block;font-size:16px;font-weight:700;line-height:1.35}.series-episode-meta{display:block;color:#a5a5af;font-size:11px;margin:6px 0}
.series-episode-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#90909b;font-size:12px;line-height:1.6}
.series-episode-indicator{color:#a4a4ae;font-size:20px}.is-current .series-episode-indicator{color:#f4656f}
.series-episode-saved{display:block;margin-top:7px;color:#e5b4b8;font-size:11px}
.series-episode-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff30}.series-episode-progress::before{content:"";display:block;width:var(--episode-progress);height:100%;background:#e50914}
.series-episode-open:disabled{opacity:.55;cursor:default}.series-episodes-empty{padding:32px;border:1px dashed #ffffff25;border-radius:10px;color:#aaa}
@media(max-width:1150px){.series-episode-open{grid-template-columns:24px 120px minmax(0,1fr);gap:12px;padding:15px}.series-episode-indicator{display:none}}
@media(max-width:850px){.series-episode-grid{grid-template-columns:1fr}.series-episode-open{grid-template-columns:26px 160px minmax(0,1fr)}.series-now-playing{align-items:flex-start}.series-episode-navigation button span{display:none}.series-episode-navigation button{font-size:18px;padding:8px 12px}}
@media(max-width:540px){.series-experience .watch-titlebar{flex-direction:column}.series-now-playing strong{font-size:13px}.series-current-kicker{font-size:9px}.series-episodes{margin-top:28px}.series-episodes-heading h2{font-size:27px}.series-season-label{display:block;font-size:11px}.series-season-label select{display:block;min-width:120px;margin-top:6px;padding:9px}.series-episode-open{grid-template-columns:20px 100px minmax(0,1fr);gap:10px;padding:12px;min-height:118px}.series-episode-number{font-size:20px}.series-episode-title{font-size:14px}.series-episode-description{font-size:11px;-webkit-line-clamp:2}.series-experience .player-tab{min-width:80px}.series-experience .player-bar{padding:12px}.series-experience .player-cover strong{font-size:17px}}

/* Readable text wordmark, inspired by the tall Netflix lettering. */
.brand,.sidebar .brand{display:inline-block;font-family:Impact,"Arial Narrow",sans-serif;font-weight:400;font-style:normal;letter-spacing:1.2px;color:#e50914;text-transform:uppercase;line-height:1;transform:scaleY(1.08);text-shadow:none}.sidebar .brand{font-size:clamp(30px,2.4vw,38px)}@media(max-width:600px){.sidebar .brand{font-size:28px;letter-spacing:1px}}
.series-experience>.player-shell{scroll-margin-top:calc(var(--nav-height) + 20px)}