/* ==========================================================================
   MYFLIX — Netflix desktop layout reverse-engineered in plain CSS
   ========================================================================== */
:root {
  --bg: #141414;
  --bg-elev: #181818;
  --bg-card: #2f2f2f;
  --text: #e5e5e5;
  --text-dim: #b3b3b3;
  --muted: #808080;
  --red: #e50914;
  --red-hover: #f40612;
  --red-deep: #b20710;
  --red-hi: #ff2a36;
  --red-dark: #a1060e;
  --red-rgb: 229, 9, 20;
  --danger: #e50914;
  --green: #46d369;
  --gutter: 4%;
  --header-h: 68px;
  --cols: 6;
  --gap: 0.4vw;
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --font: "Netflix Sans", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (max-width: 1399px) { :root { --cols: 5; } }
@media (max-width: 1099px) { :root { --cols: 4; } }
@media (max-width: 799px)  { :root { --cols: 3; --header-h: 56px; } }
@media (max-width: 499px)  { :root { --cols: 2; --gap: 1vw; } }

* { box-sizing: border-box; }
/* No visible scrollbars anywhere; everything still scrolls with wheel, touch and keys. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 10%, rgba(0, 0, 0, 0));
  transition: background-color 0.4s ease;
}
.header.is-solid { background-color: var(--bg); background-image: none; }
.header__inner {
  height: 100%;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 2.2vw;
}
.logo {
  color: var(--red);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -1px;
  text-shadow: 0 0 1px rgba(0,0,0,.5);
  line-height: 1;
  flex-shrink: 0;
}
.nav { display: flex; gap: 20px; }
.nav__link { font-size: 14px; color: var(--text); transition: color 0.3s; white-space: nowrap; }
.nav__link:hover { color: var(--text-dim); }
.nav__link.is-active { font-weight: 600; color: #fff; }
.header__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; color: #fff; line-height: 0; }
.icon-btn:hover { color: var(--text-dim); }

.search { display: flex; align-items: center; position: relative; }
.search__input {
  width: 0; opacity: 0;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.85);
  color: #fff;
  height: 34px;
  padding: 0 32px 0 8px;
  margin-left: -34px;
  font-size: 14px;
  transition: width 0.3s var(--ease), opacity 0.2s;
  outline: none;
  pointer-events: none; /* collapsed box must not swallow clicks meant for the icon */
}
.search.is-open .search__input { width: 260px; opacity: 1; padding-left: 40px; margin-left: 0; pointer-events: auto; }
.search.is-open .search__toggle { position: absolute; left: 8px; z-index: 1; }
.search__clear { position: absolute; right: 8px; }
.search__input::-webkit-search-cancel-button { display: none; }

.bell { position: relative; }
.notif { position: relative; }
.notif__panel {
  position: absolute; right: -60px; top: calc(100% + 14px); width: min(420px, 92vw);
  background: rgba(0,0,0,.95); border: 1px solid #333; border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.7); z-index: 120;
  max-height: 70vh; display: flex; flex-direction: column;
}
.notif__panel::before { content: ""; position: absolute; right: 68px; top: -6px; border: 6px solid transparent; border-bottom-color: #e5e5e5; border-top: 0; }
.notif__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #2a2a2a; font-weight: 700; color: #fff; }
.notif__link { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.notif__link:hover { color: #fff; text-decoration: underline; }
.notif__list { overflow-y: auto; }
.notif__item { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #1f1f1f; cursor: pointer; align-items: center; }
.notif__item:hover { background: #1a1a1a; }
.notif__item.is-unread { background: rgba(var(--red-rgb), .06); }
.notif__item.is-unread .notif__title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 7px; vertical-align: middle; }
.notif__art { position: relative; width: 112px; height: 63px; border-radius: 4px; overflow: hidden; background: #2a2a2a; }
.notif__art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.notif__art-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #666; font-weight: 900; font-size: 13px; letter-spacing: 1px; }
.notif__title { color: #fff; font-weight: 700; font-size: 0.98em; line-height: 1.3; }
.notif__body { color: var(--text-dim); font-size: 0.86em; line-height: 1.35; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif__time { color: #777; font-size: 0.75em; margin-top: 4px; }
.notif__empty { padding: 28px 16px; color: var(--muted); text-align: center; }
.save-state { font-size: 0.7em; font-weight: 600; color: var(--green); margin-left: 10px; opacity: 0; transition: opacity .25s; vertical-align: middle; }
.save-state.is-on { opacity: 1; }
.save-state.is-error { color: #ffb020; }
/* Inline button feedback: green = done, amber = problem. Replaces pop-ups. */
.btn.is-ok, .btn-mini.is-ok, .auth__submit.is-ok { background: var(--green) !important; color: #000 !important; border-color: var(--green) !important; }
.btn.is-error, .btn-mini.is-error, .auth__submit.is-error { background: #ffb020 !important; color: #000 !important; border-color: #ffb020 !important; }
.round { position: relative; }
.round.is-ok { background: var(--green); border-color: var(--green); color: #000; }
.round.is-error { background: #ffb020; border-color: #ffb020; color: #000; }
.round[data-flash]::after {
  content: attr(data-flash); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  background: #181818; color: #fff; border: 1px solid #333; border-radius: 3px; padding: 3px 8px; font-size: 12px; white-space: nowrap; z-index: 5;
}
.player__error { text-align: center; color: #fff; font-size: 1.2em; background: rgba(0,0,0,.6); padding: 18px 26px; border-radius: 8px; max-width: 70vw; line-height: 1.4; }
.player__error small { color: var(--text-dim); font-size: 0.75em; }
.storage-form .rule { background: var(--bg-elev); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.storage-form .rule > b { color: #fff; }
.storage-form .rule small { color: #777; }
.storage-form .rule .account__hint { margin: 0; }
.bell__badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border-radius: 9px;
}
.profile { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.avatar {
  display: inline-block;
  width: 32px; height: 32px; border-radius: 4px;
  background: linear-gradient(135deg, #e50914 0%, #b20710 100%);
  position: relative;
}
.profile-tile .avatar, .avatar--big, .avatar-picker .avatar { display: block; }
.avatar::before, .avatar::after {
  content: ""; position: absolute; background: #fff; border-radius: 2px;
}
.avatar::before { width: 5px; height: 6px; left: 9px; top: 10px; }
.avatar::after  { width: 5px; height: 6px; right: 9px; top: 10px; }
.profile__caret { transition: transform 0.3s; }
.profile:hover .profile__caret { transform: rotate(180deg); }

@media (max-width: 799px) {
  .nav { display: none; }
  .logo { font-size: 22px; }
  .search.is-open .search__input { width: 160px; }
}

/* --------------------------------------------------------------------------
   Notice bar
   -------------------------------------------------------------------------- */
.notice {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 90;
  background: rgba(var(--red-rgb), 0.92); color: #fff;
  padding: 10px var(--gutter); font-size: 14px;
}
.notice--info { background: rgba(30, 30, 30, 0.92); color: #ddd; border-bottom: 1px solid #333; }
body.has-notice .grid-view, body.has-notice .downloads, body.has-notice .account { padding-top: calc(var(--header-h) + 84px); }
.modal__backdrop--poster { object-position: center 20%; }

/* --------------------------------------------------------------------------
   Hero billboard
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 56.25vw;
  min-height: 480px;
  max-height: 92vh;
  overflow: hidden;
  background: var(--bg);
}
.hero__backdrop { position: absolute; inset: 0; }
.hero__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform: scale(1.02);
}
.hero__image.is-visible { opacity: 1; animation: hero-zoom 14s ease-out forwards; }
@keyframes hero-zoom { from { transform: scale(1.02); } to { transform: scale(1.08); } }
.hero__vignette-side {
  position: absolute; inset: 0;
  background: linear-gradient(77deg, rgba(0,0,0,.65) 0, rgba(0,0,0,0) 85%);
}
.hero__vignette-bottom {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 14.7vw;
  background: linear-gradient(180deg, hsla(0,0%,8%,0) 0, hsla(0,0%,8%,.15) 15%, hsla(0,0%,8%,.35) 29%, hsla(0,0%,8%,.58) 44%, #141414 68%, #141414);
}
.hero__content {
  position: absolute;
  left: var(--gutter);
  bottom: 34%;
  width: 40%;
  min-width: 300px;
  z-index: 2;
}
.hero__kicker {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-dim); font-size: clamp(11px, 1.1vw, 18px); letter-spacing: 3px; font-weight: 700;
  margin-bottom: 0.6vw;
}
.logo-mark {
  color: var(--red); font-weight: 900; font-size: clamp(18px, 1.8vw, 30px); letter-spacing: 0;
}
.hero__title {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 5.4rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 8px rgba(0,0,0,.6);
  text-transform: uppercase;
  transition: opacity 0.5s;
}
.hero__overview {
  margin: 1.2vw 0 1.6vw;
  font-size: clamp(0.95rem, 1.3vw, 1.45rem);
  font-weight: 400;
  line-height: 1.35;
  text-shadow: 2px 2px 4px rgba(0,0,0,.45);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: opacity 0.5s;
}
.hero.is-switching .hero__title, .hero.is-switching .hero__overview { opacity: 0; }
.hero__buttons { display: flex; gap: 1vw; }

.btn {
  display: inline-flex; align-items: center; gap: 0.6vw;
  border-radius: 4px;
  padding: 0.55vw 1.9vw 0.55vw 1.4vw;
  font-size: clamp(0.95rem, 1.25vw, 1.4rem);
  font-weight: 700;
  line-height: 1.4;
  transition: background-color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn--play { background: #fff; color: #000; }
.btn--play:hover { background: rgba(255,255,255,.75); }
.btn--info { background: rgba(109,109,110,.7); color: #fff; }
.btn--info:hover { background: rgba(109,109,110,.4); }
.btn--sm { padding: 0.45rem 1.6rem 0.45rem 1.1rem; font-size: 1.05rem; gap: 0.5rem; }
.btn--ghost { background: rgba(42,42,42,.6); color: #fff; border: 1px solid rgba(255,255,255,.5); font-size: 0.9rem; padding: 0.35rem 0.9rem; gap: 0.4rem; }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn--red { background: var(--red); color: #fff; font-size: 0.9rem; padding: 0.4rem 1rem; gap: 0.4rem; }
.btn--red:hover { background: var(--red-hover); }
.btn:disabled { opacity: .5; cursor: default; }

.hero__maturity {
  position: absolute; right: 0; bottom: 36%; z-index: 2;
  display: flex; align-items: center;
  border-left: 3px solid #dcdcdc;
  background: rgba(51,51,51,.6);
  padding: 0.5vw 3vw 0.5vw 0.8vw;
  font-size: clamp(12px, 1.1vw, 18px); min-width: 100px;
}
.hero__dots {
  position: absolute; right: var(--gutter); bottom: 30%; z-index: 2;
  display: flex; gap: 6px;
}
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s, transform .3s; }
.hero__dot.is-active { background: #fff; transform: scale(1.3); }

@media (max-width: 799px) {
  .hero { min-height: 420px; }
  .hero__content { width: calc(100% - var(--gutter) * 2 - 52px); min-width: 0; bottom: 26%; } /* leaves the right edge free for the sound button */
  .hero__kicker { font-size: 11px; }
  .logo-mark { font-size: 18px; }
  .btn { padding: 8px 18px 8px 14px; gap: 8px; }
  .hero__maturity, .hero__dots { display: none; }
}

/* --------------------------------------------------------------------------
   Studios & streamers strip: square app-style logos on dark tiles; the open studio is outlined
   -------------------------------------------------------------------------- */
.rail--studios .card {
  aspect-ratio: 16 / 9;
  flex-basis: calc((100% - (var(--cols) + 1) * var(--gap)) / (var(--cols) + 2));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5vw;
  background: linear-gradient(160deg, #2b2b2b, #161616);
  border: 1px solid rgba(255,255,255,.06);
}
.rail--studios .card:hover, .rail--studios .card:focus-visible { background: linear-gradient(160deg, #3a3a3a, #1d1d1d); }
.rail--studios .card.is-current { outline: 2px solid var(--red); outline-offset: -2px; }
.rail__title--plain { cursor: default; }
.rail__title--plain .rail__explore { display: none; }
.studio__logo { height: 50%; aspect-ratio: 1; border-radius: 18%; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,.55); }
.studio__name { font-size: clamp(10px, 0.8vw, 13px); font-weight: 700; color: #d6d6d6; white-space: nowrap; }
@media (max-width: 799px) {
  .rail--studios .card { flex-basis: calc((100% - 3 * var(--gap)) / 3.6); aspect-ratio: 5 / 4; gap: 6px; }
  .studio__logo { height: 46%; }
  .studio__name { font-size: 11px; }
}
html.is-tv .rail--studios .card { flex-basis: calc((100% - 7 * var(--gap)) / 8); gap: .5vw; }
html.is-tv .studio__name { font-size: 1vw; }

/* --------------------------------------------------------------------------
   Music tab (client/music.js): Spotify's layout in MYFLIX colours. One accent (--m-accent) so a colour-scheme
   setting can change it later. Computer: library | page | now playing, search bar on top, player bar at the
   bottom. Phone: pages + MYFLIX pill bar (Home, Search, Your Library, Create) + mini player + full player. TV:
   pages with a row of tabs; the remote's media keys drive the player.
   -------------------------------------------------------------------------- */
:root { --m-accent: var(--red); --m-panel: #181818; --m-raise: #242424; --m-hover: #2a2a2a; --m-dim: #b3b3b3; --m-line: rgba(255,255,255,.1); }
body.in-music { background: #000; }
body.in-music .header { background-color: #000; background-image: none; }
body.in-music .footer { display: none; }
.sp { --pad: 24px; color: #fff; }
.sp button, .sp input, .sp textarea { font-family: inherit; }
.sp-a { color: inherit; text-decoration: none; }
.sp-a:hover { text-decoration: underline; color: #fff; }
.sp-a--strong { color: #fff; font-weight: 700; }
.sp-small { color: var(--m-dim); font-size: 13px; line-height: 1.5; }
.sp-h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 24px 0 16px; }
.sp-h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 28px 0 12px; }
.sp-section { margin: 8px 0 16px; }
.sp-empty { text-align: center; color: var(--m-dim); padding: 64px 16px; }
.sp-empty h2 { color: #fff; font-size: 22px; margin: 0 0 8px; }
.sp-empty--left { text-align: left; padding: 24px 0; }
.sp-loading { display: flex; gap: 6px; justify-content: center; padding: 80px 0; }
.sp-loading span { width: 8px; height: 8px; border-radius: 50%; background: #777; animation: sp-dot 1s infinite ease-in-out; }
.sp-loading span:nth-child(2) { animation-delay: .15s; } .sp-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes sp-dot { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* artwork pieces */
.sp-blank { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #333, #1d1d1d); color: #8a8a8a; }
.sp-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 100%; height: 100%; overflow: hidden; }
.sp-mosaic img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; }
.sp-liked { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; background: linear-gradient(135deg, var(--m-accent) 0%, #5b1180 62%, #2a0b4d 100%); }
.sp-mixart { position: relative; display: block; width: 100%; height: 100%; }
.sp-mixart > img, .sp-mixart > .sp-blank { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-mixart__band { position: absolute; left: 8%; bottom: 8%; max-width: 84%; padding: 2px 7px; border-radius: 2px; background: var(--m-accent); color: #fff; font-weight: 900; font-size: clamp(11px, 1vw, 16px); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.sp-tile .sp-mixart__band, .sp-libitem .sp-mixart__band, .sp-drop .sp-mixart__band, .sp-recentrow .sp-mixart__band, .sp-qrow .sp-mixart__band { display: none; }
.sp-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--m-accent); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 0 0 4px 4px; white-space: nowrap; z-index: 1; }
.sp-tag--grey { background: rgba(30,30,30,.92); color: #d6d6d6; }
.sp-e { font-style: normal; font-size: 9px; font-weight: 700; line-height: 1; background: #b3b3b3; color: #121212; border-radius: 2px; padding: 2px 4px; flex: none; }
.sp-dl { color: var(--m-accent); display: inline-flex; flex: none; }
.sp-pin { color: var(--m-accent); display: inline-flex; flex: none; }
.sp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sp-eq i { width: 3px; background: var(--m-accent); animation: sp-eq .9s infinite ease-in-out; }
.sp-eq i:nth-child(2) { animation-delay: .2s; } .sp-eq i:nth-child(3) { animation-delay: .45s; }
@keyframes sp-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* buttons */
.sp-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--m-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,.35); transition: transform .15s, filter .15s; flex: none; }
.sp-play:hover { transform: scale(1.05); filter: brightness(1.12); }
.sp-play.is-busy { opacity: .6; }
.sp-play--big { width: 56px; height: 56px; }
.sp-play--huge { width: 66px; height: 66px; background: #fff; color: #000; }
.sp-icon-btn { position: relative; background: none; border: 0; padding: 0; color: var(--m-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, transform .15s; }
.sp-icon-btn:hover { color: #fff; transform: scale(1.04); }
.sp-icon-btn.is-on { color: var(--m-accent); }
.sp-icon-btn.is-on[data-shuffle]::after, .sp-icon-btn.is-on[data-full="shuffle"]::after, .sp-icon-btn.is-on[data-full="repeat"]::after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--m-accent); }
.sp-icon-btn--small svg { width: 20px; height: 20px; }
.sp-round { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.sp-round:hover { background: #2a2a2a; }
.sp-round--big { width: 48px; height: 48px; background: #1f1f1f; }
.sp-round--big:hover { background: #2a2a2a; transform: scale(1.04); }
.sp-round--small { width: 28px; height: 28px; background: transparent; color: var(--m-dim); }
.sp-round--small:hover { background: #2a2a2a; color: #fff; }
.sp-round--ghost { background: transparent; }
.sp-pill { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; background: #fff; color: #000; cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s; }
.sp-pill:hover { transform: scale(1.03); }
.sp-pill:disabled { opacity: .6; cursor: default; transform: none; }
.sp-pill--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #7c7c7c; }
.sp-pill--outline:hover, .sp-pill--outline.is-on { box-shadow: inset 0 0 0 1px #fff; }
.sp-pill--dark { background: #1f1f1f; color: #fff; }
.sp-pill--dark:hover { background: #2a2a2a; }
.sp-pill--accent { background: var(--m-accent); color: #fff; padding: 12px 24px; }
.sp-pill--white { background: #fff; color: #000; padding: 12px 28px; }
.sp-pill--small { padding: 4px 12px; font-size: 13px; }
.sp-link { margin-left: auto; background: none; border: 0; color: var(--m-dim); font-weight: 700; font-size: 14px; cursor: pointer; padding: 0; }
.sp-link:hover { color: #fff; text-decoration: underline; }
.sp-link--more { margin: 8px 0 0 16px; }
.sp-chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chip { flex: none; border: 0; border-radius: 999px; padding: 6px 14px; background: rgba(255,255,255,.08); color: #fff; font-size: 14px; cursor: pointer; transition: background .15s; }
.sp-chip:hover { background: rgba(255,255,255,.16); }
.sp-chip.is-on { background: var(--m-accent); color: #fff; }
.sp-chip--x { padding: 6px 8px; display: inline-flex; }
.sp [data-flash], .mbar [data-flash], .sp-full [data-flash] { position: relative; }
.sp [data-flash]::after, .mbar [data-flash]::after, .sp-full [data-flash]::after { content: attr(data-flash); position: absolute; right: 0; bottom: calc(100% + 6px); background: #fff; color: #000; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5; }

/* ---------------------------------------------------------------- computer frame */
.sp--desk { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 8px 8px; background: #000; display: grid; grid-template-columns: var(--libw, 300px) minmax(0, 1fr) 0; grid-template-rows: 64px minmax(0, 1fr); column-gap: 8px; }
.sp--desk:has(.sp-lib.is-collapsed) { --libw: 72px; }
.sp--desk.lib-page { --libw: 0px; column-gap: 0; }
.sp--desk.lib-page .sp-lib { display: none; }
.sp--desk.lib-page.has-side { column-gap: 8px; }
.sp--desk.has-side { grid-template-columns: var(--libw, 300px) minmax(0, 1fr) clamp(280px, 22vw, 380px); }
body.has-musicbar .sp--desk { bottom: 72px; }
.sp-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.sp-top__nav { position: absolute; left: 8px; display: flex; gap: 8px; }
.sp-top__nav .sp-round { background: #121212; }
.sp-search { position: relative; display: flex; align-items: center; gap: 10px; width: min(474px, 44vw); height: 48px; padding: 0 6px 0 14px; border-radius: 999px; background: #1f1f1f; color: var(--m-dim); transition: background .15s, box-shadow .15s; }
.sp-search:hover { background: #2a2a2a; box-shadow: inset 0 0 0 1px #3a3a3a; }
.sp-search.is-focus { box-shadow: inset 0 0 0 2px #fff; color: #fff; }
.sp-search__input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-size: 16px; }
.sp-search__input::placeholder { color: #9a9a9a; }
.sp-search__clear { background: none; border: 0; color: var(--m-dim); cursor: pointer; display: inline-flex; padding: 4px; }
.sp-search__clear:hover { color: #fff; }
.sp-search__sep { width: 1px; height: 26px; background: #6b6b6b; }
.sp-search__browse { background: none; border: 0; color: var(--m-dim); cursor: pointer; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.sp-search__browse:hover { color: #fff; }
.sp-drop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: #262626; border-radius: 8px; padding: 8px; max-height: min(70vh, 640px); overflow-y: auto; box-shadow: 0 16px 32px rgba(0,0,0,.6); color: #fff; }
.sp-drop__title { font-weight: 800; font-size: 18px; padding: 8px 8px 6px; }
.sp-drop__hint { display: flex; justify-content: space-between; color: var(--m-dim); font-size: 12px; padding: 4px 8px 8px; }
.sp-drop__hint span { display: inline-flex; align-items: center; gap: 6px; }
.sp-drop__hint kbd { border: 1px solid #777; border-radius: 4px; padding: 0 5px; font: inherit; font-size: 11px; }
.sp-drop__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: #fff; text-align: left; cursor: pointer; }
.sp-drop__item:hover, .sp-drop__item.is-sel { background: #383838; }
.sp-drop__art { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; flex: none; }
.sp-drop__art.is-round { border-radius: 50%; }
.sp-drop__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-drop__ic { width: 48px; height: 48px; border-radius: 50%; background: #3a3a3a; display: flex; align-items: center; justify-content: center; color: var(--m-dim); flex: none; }
.sp-drop__word { font-size: 16px; color: var(--m-dim); }
.sp-drop__word b { color: #fff; }
.sp-drop__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-drop__name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-drop__sub { font-size: 14px; color: var(--m-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-drop__add { color: var(--m-dim); display: inline-flex; }
.sp-drop__add:hover { color: #fff; }
.sp-drop__add.is-on { color: var(--m-accent); }
.sp-drop__clear { display: block; margin: 8px 8px 4px auto; }
.sp-lib, .sp-main, .sp-side { background: var(--m-panel); border-radius: 8px; overflow: hidden; grid-row: 2; min-height: 0; }
.sp-lib { grid-column: 1; display: flex; flex-direction: column; }
.sp-main { grid-column: 2; position: relative; container-type: inline-size; }
.sp-side { grid-column: 3; overflow-y: auto; scrollbar-width: thin; }
.sp-side[hidden] { display: none; }
.sp-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #555 transparent; }

/* ---------------------------------------------------------------- pages */
.sp-page { position: relative; isolation: isolate; padding: 0 var(--pad) 48px; min-height: 100%; }
.sp-page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 332px; z-index: -1; background: linear-gradient(var(--hdr, #232323) 0%, rgba(24,24,24,0) 100%); opacity: .85; pointer-events: none; transition: opacity .3s; }
.sp-page--album::before, .sp-page--playlist::before, .sp-page--saved::before, .sp-page--liked::before, .sp-page--mix::before, .sp-page--tracks::before, .sp-page--artist::before, .sp-page--genre::before, .sp-page--import::before { height: 560px; opacity: 1; background: linear-gradient(var(--hdr, #333) 0, color-mix(in srgb, var(--hdr, #333) 35%, var(--m-panel)) 320px, var(--m-panel) 560px); }
.sp-page--search::before, .sp-page--library::before, .sp-page--showall::before { display: none; }
.sp-home__head { display: flex; align-items: center; gap: 8px; padding: 16px 0 4px; }

/* home shortcuts (8 tiles) */
.sp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 24px; }
@container (max-width: 860px) { .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-tile { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; padding-right: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); cursor: pointer; transition: background .2s; }
.sp-tile:hover, .sp-tile:focus-visible { background: rgba(255,255,255,.18); outline: none; }
.sp-tile__art { width: 64px; height: 64px; flex: none; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sp-tile__art img, .sp-tile__art .sp-blank, .sp-tile__art .sp-mosaic, .sp-tile__art .sp-liked, .sp-tile__art .sp-mixart { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-tile__art .sp-liked svg { width: 26px; height: 26px; }
.sp-tile__name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-tile__play { width: 34px; height: 34px; opacity: 0; transition: opacity .2s; }
.sp-tile:hover .sp-tile__play, .sp-tile:focus-visible .sp-tile__play { opacity: 1; }
.sp-tile__eq { margin-right: 8px; }

/* shelves of cards */
.sp-shelf { margin: 20px 0 4px; }
.sp-shelf__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; margin-bottom: 4px; }
.sp-shelf__label { width: 100%; color: var(--m-dim); font-size: 13px; }
.sp-shelf__title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.sp-shelf__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden; margin: 0 -12px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); margin: 8px -12px 0; }
.sp-card { min-width: 0; padding: 12px; border-radius: 8px; cursor: pointer; transition: background .2s; }
.sp-card:hover, .sp-card:focus-visible { background: #232323; outline: none; }
.sp-card__art { position: relative; aspect-ratio: 1; margin-bottom: 8px; border-radius: 6px; }
.sp-card__art > img, .sp-card__art > .sp-blank, .sp-card__art > .sp-mosaic, .sp-card__art > .sp-liked, .sp-card__art > .sp-mixart { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sp-card--round .sp-card__art { border-radius: 50%; }
.sp-card__play { position: absolute; right: 8px; bottom: 8px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; z-index: 2; }
.sp-card:hover .sp-card__play, .sp-card:focus-visible .sp-card__play { opacity: 1; transform: none; }
.sp-card__title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card__rank { color: var(--m-accent); margin-right: 6px; }
.sp-card__sub { margin-top: 4px; color: var(--m-dim); font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* page heads */
.sp-phead { display: flex; align-items: center; gap: 12px; padding: 16px 0 8px; }
.sp-phead h1 { margin: 0 auto 0 0; font-size: 24px; font-weight: 800; }
.sp-avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 0; padding: 0; cursor: pointer; flex: none; }
.sp-hero { display: flex; align-items: flex-end; gap: 24px; padding: 72px 0 24px; }
.sp-hero--plain { padding-top: 56px; }
.sp-hero__art { width: clamp(150px, 19cqi, 232px); aspect-ratio: 1; flex: none; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 60px rgba(0,0,0,.55); }
.sp-hero__art[data-edit] { cursor: pointer; }
.sp-hero__art > img, .sp-hero__art > .sp-blank, .sp-hero__art > .sp-mosaic, .sp-hero__art > .sp-liked, .sp-hero__art > .sp-mixart { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-liked--big svg { width: 34%; height: 34%; }
.sp-tile__art > .sp-liked, .sp-libitem__art > .sp-liked, .sp-card__art > .sp-liked, .sp-hero__art > .sp-liked, .sp-drop__art > .sp-liked, .sp-recentrow__art > .sp-liked { display: flex; align-items: center; justify-content: center; }
.sp-hero__text { min-width: 0; }
.sp-hero__kind { font-size: 14px; font-weight: 600; }
.sp-hero__title { margin: 6px 0 14px; font-size: clamp(2.2rem, 7cqi, 6rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; overflow-wrap: anywhere; }
.sp-hero__title.is-long { font-size: clamp(2rem, 4.6cqi, 3.6rem); letter-spacing: -.02em; }
.sp-hero__title[data-edit] { cursor: pointer; }
.sp-hero__desc { margin: 0 0 8px; color: rgba(255,255,255,.72); font-size: 14px; max-width: 80ch; }
.sp-hero__meta { font-size: 14px; color: rgba(255,255,255,.85); }
.sp-hero__meta b { color: #fff; }
.sp-actions { display: flex; align-items: center; gap: 24px; padding: 20px 0; }
.sp-actions--tight { padding: 12px 0 0; gap: 16px; }
.sp-ondrive { display: inline-flex; align-items: center; gap: 6px; color: var(--m-accent); font-size: 13px; font-weight: 700; }
.sp-banner { position: relative; display: flex; align-items: flex-end; min-height: 240px; margin: 0 calc(-1 * var(--pad)); padding: 72px var(--pad) 28px; overflow: hidden; }
.sp-banner__title { position: relative; margin: 0; font-size: clamp(3rem, 8cqi, 6rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.sp-banner__pic { position: absolute; right: 4%; bottom: -8%; width: clamp(140px, 22cqi, 280px); aspect-ratio: 1; object-fit: cover; border-radius: 8px; transform: rotate(18deg); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.sp-artist { position: relative; display: flex; align-items: flex-end; height: clamp(280px, 42vh, 440px); margin: 0 calc(-1 * var(--pad)); background: #222 var(--img) center 22% / cover no-repeat; }
.sp-artist__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); }
.sp-artist__text { position: relative; padding: 0 var(--pad) 24px; }
.sp-artist__name { margin: 0 0 8px; font-size: clamp(3rem, 9cqi, 6.4rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.sp-artist__name.is-long { font-size: clamp(2.4rem, 6cqi, 4.6rem); }
.sp-artist__fans { font-size: 15px; }
.sp-about { position: relative; height: clamp(260px, 32vw, 420px); max-width: 720px; border-radius: 8px; overflow: hidden; background: #222 var(--img) center 25% / cover no-repeat; cursor: default; }
.sp-about::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.75)); }
.sp-about__text { position: absolute; left: 24px; bottom: 24px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.sp-about__text b { font-size: 18px; }

/* song tables */
.sp-tracks { --cols: 40px minmax(0, 1fr) 36px 56px 36px; margin-top: 8px; }
.sp-tracks.has-album { --cols: 40px minmax(0, 4fr) minmax(0, 3fr) 36px 56px 36px; }
.sp-tracks.has-added:not(.has-album) { --cols: 40px minmax(0, 4fr) minmax(90px, 1.4fr) 36px 56px 36px; }
.sp-tracks.has-album.has-added { --cols: 40px minmax(0, 4fr) minmax(0, 3fr) minmax(96px, 1.4fr) 36px 56px 36px; }
.sp-tracks.no-numbers { --cols: minmax(0, 1fr) 36px 56px 36px; }
@container (max-width: 760px) { .sp-tracks .sp-col-added { display: none; } .sp-tracks.has-added:not(.has-album) { --cols: 40px minmax(0, 1fr) 36px 56px 36px; } .sp-tracks.has-album.has-added { --cols: 40px minmax(0, 4fr) minmax(0, 3fr) 36px 56px 36px; } }
@container (max-width: 560px) { .sp-tracks .sp-col-album { display: none; } .sp-tracks.has-album, .sp-tracks.has-album.has-added { --cols: 40px minmax(0, 1fr) 36px 56px 36px; } }
.sp-thead, .sp-row { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 16px; padding: 0 16px; }
.sp-thead { height: 36px; margin-bottom: 8px; border-bottom: 1px solid var(--m-line); color: var(--m-dim); font-size: 14px; }
.sp-thead .sp-row__n { text-align: right; }
.sp-row { height: 56px; border-radius: 4px; cursor: pointer; user-select: none; }
.sp-row:hover, .sp-row:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.sp-row.is-drag { opacity: .4; }
.sp-row.is-over { box-shadow: inset 0 2px 0 var(--m-accent); }
.sp-row__n { position: relative; text-align: right; color: var(--m-dim); font-size: 16px; font-variant-numeric: tabular-nums; }
.sp-row__hoverplay { display: none; color: #fff; justify-content: flex-end; }
.sp-row:hover .sp-row__num, .sp-row:focus-visible .sp-row__num { display: none; }
.sp-row:hover .sp-row__hoverplay, .sp-row:focus-visible .sp-row__hoverplay { display: flex; }
.sp-row__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-row__art { width: 40px; height: 40px; border-radius: 4px; overflow: hidden; flex: none; background: #282828; }
.sp-row__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-row__text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sp-row__title { color: #fff; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row.is-now .sp-row__title { color: var(--m-accent); }
.sp-row__sub { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--m-dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row__sub .sp-a { overflow: hidden; text-overflow: ellipsis; }
.sp-row:hover .sp-row__sub, .sp-row:hover .sp-col-album, .sp-row:hover .sp-col-album .sp-a { color: #fff; }
.sp-col-album, .sp-col-added { color: var(--m-dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row__like, .sp-row__more { background: none; border: 0; padding: 0; color: var(--m-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; visibility: hidden; }
.sp-row:hover .sp-row__like, .sp-row:hover .sp-row__more, .sp-row:focus-visible .sp-row__more, .sp-row__like.is-on { visibility: visible; }
.sp-row__like:hover, .sp-row__more:hover { color: #fff; }
.sp-row__like.is-on { color: var(--m-accent); }
.sp-row__time { color: var(--m-dim); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.sp-thead .sp-row__time { display: flex; justify-content: flex-end; }

/* search: browse tiles, top result, recent searches, finder */
.sp-browse { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 20px; margin: 8px 0 24px; }
.sp-btile { position: relative; aspect-ratio: 16 / 9.5; border: 0; border-radius: 8px; overflow: hidden; padding: 16px; background: var(--c); color: #fff; text-align: left; font-weight: 800; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -.01em; cursor: pointer; display: flex; align-items: flex-start; transition: filter .15s; }
.sp-btile:hover, .sp-btile:focus-visible { filter: brightness(1.12); outline: none; }
.sp-btile > span:first-child { position: relative; z-index: 1; max-width: 70%; line-height: 1.1; }
.sp-btile img { position: absolute; right: -7%; bottom: -8%; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; transform: rotate(25deg); box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.sp-btile__icon { position: absolute; right: 10%; bottom: 10%; transform: rotate(18deg); opacity: .9; }
.sp-sresult { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; margin-top: 16px; }
@container (max-width: 820px) { .sp-sresult { grid-template-columns: minmax(0, 1fr); } }
.sp-sresult .sp-h2 { margin: 0 0 12px; }
/* Music search in plain words (20 Oct): Claude's songs above the usual results */
.sp-asklist { margin-top: 16px; }
.sp-asklist__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sp-asklist__head .sp-h2 { margin: 0; }
.sp-asklist .sp-row { padding: 0 8px; }
.sp-topcard { position: relative; display: flex; flex-direction: column; gap: 20px; min-height: 200px; padding: 20px; border-radius: 8px; background: #1f1f1f; cursor: pointer; transition: background .2s; }
.sp-topcard:hover, .sp-topcard:focus-visible { background: #2a2a2a; outline: none; }
.sp-topcard__art { width: 96px; height: 96px; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sp-topcard__art.is-round { border-radius: 50%; }
.sp-topcard__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-topcard__name { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sp-topcard__sub { color: var(--m-dim); font-size: 14px; }
.sp-topcard__play { position: absolute; right: 20px; bottom: 20px; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.sp-topcard:hover .sp-topcard__play, .sp-topcard:focus-visible .sp-topcard__play { opacity: 1; transform: none; }
.sp-topsongs .sp-row { padding: 0 8px; }
.sp-page--search > .sp-chips { padding-top: 16px; }
.sp-recentrow { display: flex; align-items: center; gap: 12px; padding: 6px 0; cursor: pointer; }
.sp-recentrow__art { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; flex: none; }
.sp-recentrow__art.is-round { border-radius: 50%; }
.sp-recentrow__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-recentrow__text { display: flex; flex-direction: column; min-width: 0; }
.sp-recentrow__text small { color: var(--m-dim); font-size: 13px; }
.sp-finder { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--m-line); }
.sp-finder .sp-h2 { margin-top: 0; }
.sp-finder__box { display: flex; align-items: center; gap: 8px; width: min(380px, 100%); padding: 0 12px; height: 40px; border-radius: 4px; background: #2a2a2a; color: var(--m-dim); }
.sp-finder__box input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-size: 14px; }
.sp-finder__out { margin-top: 12px; }
.sp-frow { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 4px; cursor: pointer; }
.sp-frow:hover { background: rgba(255,255,255,.08); }
.sp-frow__album { color: var(--m-dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-import { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 24px; }
.sp-import__input { flex: 1 1 320px; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #2a2a2a; color: #fff; font-size: 15px; outline: none; }
.sp-import__input:focus { box-shadow: inset 0 0 0 2px #fff; }
.sp-import__found { display: flex; align-items: center; gap: 20px; margin: 8px 0 16px; }
.sp-import__found .sp-h2 { margin: 0 0 4px; }
.sp-import__art { width: 120px; height: 120px; border-radius: 6px; overflow: hidden; flex: none; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sp-import__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-addrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; margin-top: 8px; border: 0; background: none; color: #fff; font-size: 16px; cursor: pointer; text-align: left; }
.sp-addrow__ic { width: 64px; height: 64px; border-radius: 50%; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: var(--m-dim); flex: none; }

/* Your Library */
.sp-lib__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 16px; }
.sp-lib__title { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; padding: 4px 0; border: 0; background: none; color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; }
.sp-lib__title:hover { color: #fff; }
.sp-lib__title svg { color: var(--m-dim); }
.sp-lib__title:hover svg { color: #fff; }
.sp-lib__chips { display: flex; gap: 8px; padding: 4px 16px 8px; overflow-x: auto; scrollbar-width: none; }
.sp-lib__chips::-webkit-scrollbar { display: none; }
.sp-lib__chips .sp-chips { overflow: visible; }
.sp-lib__tools { display: flex; align-items: center; gap: 8px; padding: 0 12px 4px 8px; }
.sp-lib__find { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 4px; color: var(--m-dim); cursor: pointer; margin-right: auto; }
.sp-lib__find input { width: 0; padding: 0; border: 0; background: none; color: #fff; font-size: 14px; outline: none; transition: width .2s; }
.sp-lib__find.is-open { background: #2a2a2a; }
.sp-lib__find.is-open input { width: 150px; }
.sp-lib__sort { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--m-dim); font-size: 14px; cursor: pointer; padding: 6px; }
.sp-lib__sort:hover { color: #fff; }
.sp-lib__list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.sp-lib__none { padding: 16px 8px; }
.sp-libitem { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; cursor: pointer; }
.sp-libitem:hover, .sp-libitem:focus-visible { background: #1f1f1f; outline: none; }
.sp-libitem__art { width: 48px; height: 48px; border-radius: 4px; overflow: hidden; flex: none; background: #282828; }
.sp-libitem__art.is-round { border-radius: 50%; }
.sp-libitem__art > img, .sp-libitem__art > .sp-blank, .sp-libitem__art > .sp-mosaic, .sp-libitem__art > .sp-liked, .sp-libitem__art > .sp-mixart { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-libitem__art .sp-liked svg { width: 20px; height: 20px; }
.sp-libitem__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-libitem__name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-libitem.is-playing .sp-libitem__name { color: var(--m-accent); }
.sp-libitem__sub { display: flex; align-items: center; gap: 4px; color: var(--m-dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-libitem__now { color: var(--m-accent); display: inline-flex; }
.sp-lib.is-collapsed .sp-lib__head { justify-content: center; padding: 16px 0 8px; }
.sp-lib__toggle { cursor: pointer; }
.sp-lib.is-collapsed .sp-lib__toggle { background: none; border: 0; color: var(--m-dim); }
.sp-lib.is-collapsed .sp-lib__toggle:hover { color: #fff; }
.sp-lib__plus { margin: 4px auto 8px; background: #1f1f1f; width: 40px; height: 40px; }
.sp-lib__list.is-mini { padding: 0 4px; }
.sp-libitem.is-compact { justify-content: center; padding: 6px 0; }
.sp-libitem.is-compact .sp-libitem__text, .sp-libitem.is-compact .sp-libitem__now { display: none; }
.sp-page--library .sp-lib__chips { padding: 4px 0 8px; }
.sp-page--library .sp-lib__tools { padding: 0 0 8px; }
.sp-page--library .sp-lib__list { padding: 0; overflow: visible; }
.sp-page--library .sp-lib__list.sp-grid { margin: 8px -12px 0; }

/* right panel: now playing, queue, lyrics */
.sp-side__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; background: var(--m-panel); }
.sp-side__head h2 { margin: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-side__tabs { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 20px; padding: 16px 16px 8px; background: var(--m-panel); }
.sp-side__tab { border: 0; background: none; color: var(--m-dim); font-weight: 700; font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; cursor: pointer; }
.sp-side__tab.is-on { color: #fff; border-bottom-color: var(--m-accent); }
.sp-side__tabs .sp-round { margin-left: auto; }
.sp-side__body { padding: 0 16px 24px; }
.sp-side__none { padding: 0 16px; }
.sp-side__h { margin: 16px 0 8px; font-size: 16px; font-weight: 700; }
.sp-qrow { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; cursor: pointer; }
.sp-grip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 44px; margin-left: auto; color: var(--m-dim); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sp-grip:hover { color: #fff; }
.is-sorting > [data-sortrow] { transition: transform .16s ease; }
.is-sorting > .is-lifted { transition: none; position: relative; z-index: 5; background: #2a2a2a; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.55); }
.is-sorting > .is-lifted .sp-grip { color: #fff; cursor: grabbing; }
.sp-qrow:hover, .sp-qrow:focus-visible { background: #2a2a2a; outline: none; }
.sp-qrow__art { position: relative; width: 48px; height: 48px; border-radius: 4px; overflow: hidden; flex: none; background: #282828; }
.sp-qrow__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-qrow__eq { position: absolute; inset: 0; background: rgba(0,0,0,.55); align-items: center; justify-content: center; height: auto; }
.sp-qrow__text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sp-qrow__title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-qrow.is-now .sp-qrow__title { color: var(--m-accent); }
.sp-qrow__sub { display: flex; align-items: center; gap: 6px; color: var(--m-dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-np__art { aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sp-np__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-np__row { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 4px; }
.sp-np__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sp-np__title, .sp-np__artist { border: 0; padding: 0; background: none; color: #fff; text-align: left; cursor: pointer; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-np__title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.sp-np__artist { color: var(--m-dim); font-size: 16px; }
.sp-np__title:hover, .sp-np__artist:hover { text-decoration: underline; }
.sp-np__note { display: flex; align-items: center; gap: 6px; color: var(--m-dim); font-size: 13px; margin: 6px 0 0; }
.sp-np__about { margin-top: 16px; border-radius: 8px; overflow: hidden; background: #242424; cursor: pointer; }
.sp-np__aboutimg { height: 210px; background: #333 center 25% / cover no-repeat; }
.sp-np__abouttext { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; }
.sp-np__aname { font-size: 16px; font-weight: 700; }
.sp-np__fans { color: var(--m-dim); font-size: 14px; }
.sp-np__next { margin-top: 16px; padding: 16px 8px 8px; border-radius: 8px; background: #242424; }
.sp-np__nexthead { display: flex; align-items: center; padding: 0 8px 8px; }
.sp-np__nexthead .sp-link { margin-left: auto; }
.sp-lyrics { padding: 8px 16px 48px; }
.sp-lyrics__line { margin: 0 0 14px; font-size: 22px; font-weight: 800; line-height: 1.3; color: rgba(255,255,255,.45); cursor: pointer; transition: color .2s; }
.sp-lyrics__line.is-past { color: rgba(255,255,255,.8); }
.sp-lyrics__line.is-cur { color: #fff; }
.sp-lyrics__line.is-plain { color: #fff; font-size: 18px; font-weight: 700; cursor: default; }
.sp-lyrics__msg { font-size: 20px; font-weight: 700; }

/* the player bar (computer and TV); the mini player on phones is further down */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 72px; padding: 0 16px; display: grid; grid-template-columns: minmax(180px, 30%) minmax(0, 40%) minmax(180px, 30%); align-items: center; background: #000; color: #fff; }
.mbar[hidden] { display: none; }
.mbar button { font-family: inherit; }
.mbar__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mbar__art { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #282828; cursor: pointer; flex: none; }
.mbar__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbar__text { display: flex; flex-direction: column; min-width: 0; }
.mbar__title { padding: 0; border: 0; background: none; color: #fff; font-size: 14px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar__title:hover { text-decoration: underline; }
.mbar__sub { color: var(--m-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* MYFLIX Connect (20 Oct): "Playing on TV" under the song; the Devices button */
.mbar__on { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--m-accent); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar__on[hidden], .mbar__devices[hidden] { display: none; }
.mbar__on .ic { flex: none; }
.sp-full__dev { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.sp-full__dev span { font-size: 13px; font-weight: 700; }
.mbar__like { flex: none; display: inline-flex; padding: 4px; border: 0; background: none; color: var(--m-dim); cursor: pointer; }
.mbar__like:hover { color: #fff; }
.mbar__like.is-on { color: var(--m-accent); }
.mbar__center { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 722px; justify-self: center; }
.mbar__buttons { display: flex; align-items: center; gap: 16px; }
.mbar__btn { position: relative; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--m-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, transform .15s; }
.mbar__btn:hover { color: #fff; }
.mbar__btn.is-on { color: var(--m-accent); }
.mbar__btn.is-on::after { content: ""; position: absolute; bottom: -3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--m-accent); }
.mbar__repeat.is-one::before { content: "1"; position: absolute; top: 2px; right: 2px; font-size: 9px; font-weight: 900; line-height: 1; background: #000; color: var(--m-accent); border-radius: 50%; padding: 1px 2px; }
.mbar__toggle { background: #fff; color: #000; }
.mbar__toggle:hover { color: #000; transform: scale(1.06); }
.mbar__progress { display: flex; align-items: center; gap: 8px; width: 100%; }
.mbar__time { min-width: 40px; color: var(--m-dim); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.mbar__track { position: relative; flex: 1; height: 14px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.mbar__track::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: #4d4d4d; }
.mbar__fill { position: absolute; left: 0; width: 0; height: 4px; border-radius: 2px; background: #fff; }
.mbar__knob { position: absolute; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.mbar__track:hover .mbar__fill, .mbar__track.is-drag .mbar__fill { background: var(--m-accent); }
.mbar__track:hover .mbar__knob, .mbar__track.is-drag .mbar__knob { opacity: 1; }
.mbar__right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.mbar__badge { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid #5c5c5c; border-radius: 3px; color: var(--m-dim); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.mbar__badge[hidden] { display: none; }
.mbar__vol { width: 96px; height: 4px; accent-color: #fff; cursor: pointer; }
.mbar__line { display: none; }
body.has-musicbar { padding-bottom: 72px; }
@media (max-width: 1080px) and (min-width: 800px) { .mbar__vol, .mbar__badge { display: none; } }

/* edit details sheet */
.sp-sheet { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.7); }
.sp-sheet[hidden] { display: none; }
.sp-edit { width: min(524px, 100%); padding: 24px; border-radius: 8px; background: #282828; box-shadow: 0 4px 60px rgba(0,0,0,.6); }
.sp-edit__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sp-edit__head h2 { margin: 0; font-size: 24px; font-weight: 800; }
.sp-edit__body { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
.sp-edit__art { width: 180px; height: 180px; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.sp-edit__art > img, .sp-edit__art > .sp-blank, .sp-edit__art > .sp-mosaic { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a cover grid stays a grid in every card, tile and list row (the art rules above set display: block on it) */
.sp-tile__art .sp-mosaic, .sp-card__art > .sp-mosaic, .sp-hero__art > .sp-mosaic, .sp-libitem__art > .sp-mosaic, .sp-edit__art > .sp-mosaic { display: grid; }
.sp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sp-field span { color: var(--m-dim); font-size: 12px; font-weight: 700; }
.sp-field input, .sp-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; background: #3e3e3e; color: #fff; font: inherit; font-size: 14px; outline: none; resize: none; }
.sp-field input:focus, .sp-field textarea:focus { border-color: #8a8a8a; background: #333; }
.sp-edit__foot { display: flex; justify-content: flex-end; margin-top: 4px; }

/* full-screen player (phones; on TV the same layout is a page) */
.sp-full { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 8px) 24px calc(env(safe-area-inset-bottom) + 20px); color: #fff; background: linear-gradient(var(--hdr, #333) 0%, color-mix(in srgb, var(--hdr, #333) 40%, #121212) 55%, #121212 100%); }
.sp-full[hidden] { display: none; }
.sp-full__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-full__from { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.sp-full__from small { color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sp-full__from b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
.sp-full__scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; margin: 0 -24px; padding: 20px 24px; }
.sp-full__art { width: 100%; max-width: min(440px, 52vh); aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.sp-full__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-full__stage { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sp-full__switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.35); }
.sp-full__switch.is-off { visibility: hidden; }
.sp-full__switch button { padding: 7px 20px; border: 0; border-radius: 999px; background: none; color: rgba(255,255,255,.8); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sp-full__switch button.is-on { background: #fff; color: #000; }
.sp-full__art { position: relative; }
.sp-full__art.is-video { max-width: none; width: calc(100% + 48px); margin: 0 -24px; aspect-ratio: 16 / 9; border-radius: 0; background: #000; }
.sp-full__art.is-video img, .sp-full__art.is-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-full__art.is-video video { z-index: 1; opacity: 0; transition: opacity .4s; }
.sp-full__art.is-video video.is-on { opacity: 1; }
.sp-full__vwait { position: absolute; left: 12px; bottom: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: 12px; }
.sp-full__vbig { position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sp-full__queue { align-self: stretch; width: 100%; }
.sp-lyrics--full { align-self: flex-start; width: 100%; padding: 8px 0; }
.sp-full__info { display: flex; align-items: center; gap: 12px; }
.sp-full__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sp-full__title, .sp-full__artist { max-width: 100%; padding: 0; border: 0; background: none; color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sp-full__title { font-size: 22px; font-weight: 800; }
.sp-full__artist { color: rgba(255,255,255,.7); font-size: 16px; }
.sp-full__progress { margin-top: 16px; }
.sp-full__track { position: relative; height: 16px; display: flex; align-items: center; touch-action: none; cursor: pointer; }
.sp-full__track::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); }
.sp-full__fill { position: absolute; left: 0; height: 4px; border-radius: 2px; background: #fff; }
.sp-full__knob { position: absolute; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; }
.sp-full__times { display: flex; justify-content: space-between; margin-top: 4px; color: rgba(255,255,255,.7); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-full__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.sp-full__controls .sp-icon-btn { color: #fff; }
.sp-full__controls .sp-icon-btn.is-on { color: var(--m-accent); }
.sp-full__foot { display: flex; justify-content: space-between; margin-top: 18px; }
.sp-full__foot .sp-icon-btn { color: rgba(255,255,255,.8); }
.sp-full__foot .sp-icon-btn.is-on { color: var(--m-accent); }
.sp-full .mbar__like { color: rgba(255,255,255,.8); }
.sp-full .mbar__like.is-on { color: var(--m-accent); }
.sp-full .sp-lyrics__line { font-size: 24px; }

/* ---------------------------------------------------------------- phones */
.sp-nav { display: none; }
@media (max-width: 799px) {
  body.in-music .header, body.in-music .tabbar { display: none !important; }
  body.in-music { background: #121212; }
  .sp--phone { --pad: 16px; display: block; min-height: 100vh; padding-bottom: calc(110px + env(safe-area-inset-bottom)); background: #121212; }
  body.has-musicbar .sp--phone { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
  .sp--phone .sp-page { padding-top: env(safe-area-inset-top); }
  .sp--phone .sp-page::before { height: 260px; }
  .sp-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 61; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(28,28,28,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 6px 30px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.08); }
  .sp-nav { width: max-content; max-width: calc(100vw - 16px); }
  .sp-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 7px 6px; border: 0; border-radius: 999px; background: transparent; color: #bdbdbd; font-size: 10.5px; white-space: nowrap; cursor: pointer; }
  .sp-nav button svg { width: 24px; height: 24px; }
  .sp-nav button.is-active { background: rgba(255,255,255,.12); color: #fff; }
  .sp-nav__m { width: 24px; height: 24px; border-radius: 6px; background: var(--m-accent); color: #fff; font-weight: 900; font-size: 16px; display: flex; align-items: center; justify-content: center; }
  .sp-home__head { position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: rgba(18,18,18,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 16px; }
  .sp-tile { height: 56px; gap: 8px; }
  .sp-tile__art { width: 56px; height: 56px; }
  .sp-tile__name { font-size: 13px; }
  .sp-shelf { margin: 18px 0 0; }
  .sp-shelf__title { font-size: 22px; }
  .sp-shelf__row { display: flex; gap: 14px; overflow-x: auto; margin: 4px -16px 0; padding: 0 16px; scroll-snap-type: x proximity; scrollbar-width: none; grid-auto-rows: auto; }
  .sp-shelf__row::-webkit-scrollbar { display: none; }
  .sp-shelf__row .sp-card { flex: 0 0 144px; padding: 0; scroll-snap-align: start; }
  .sp-card:hover { background: none; }
  .sp-card__play { display: none; }
  .sp-card__title { font-size: 13px; }
  .sp-card__sub { font-size: 12.5px; }
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin: 8px 0 0; }
  .sp-grid .sp-card { padding: 0; }
  .sp-hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 24px 0 4px; }
  .sp-hero__art { width: min(64vw, 260px); align-self: center; }
  .sp-hero__kind { display: none; }
  .sp-hero__title, .sp-hero__title.is-long { margin: 0 0 6px; font-size: 24px; letter-spacing: -.01em; line-height: 1.15; }
  .sp-hero__meta { color: var(--m-dim); font-size: 13px; }
  .sp-hero__meta b { color: #fff; }
  .sp-actions { gap: 20px; padding: 12px 0; }
  .sp-actions [data-shuffle] { order: 8; margin-left: auto; }
  .sp-actions [data-playall] { order: 9; }
  .sp-actions .sp-icon-btn svg { width: 26px; height: 26px; }
  .sp-tracks { --cols: minmax(0, 1fr) 36px; margin-top: 0; }
  .sp-row, .sp-tracks.has-album .sp-row, .sp-tracks.no-numbers .sp-row { grid-template-columns: minmax(0, 1fr) 36px; height: 60px; padding: 0; column-gap: 8px; }
  .sp-row:hover { background: none; }
  .sp-row:active { background: rgba(255,255,255,.06); }
  .sp-row__art { width: 48px; height: 48px; }
  .sp-row__title { font-size: 15px; }
  .sp-row__sub { font-size: 13px; }
  .sp-row__more { visibility: visible; color: var(--m-dim); }
  .sp-artist { height: 300px; }
  .sp-artist__name, .sp-artist__name.is-long { font-size: 40px; }
  .sp-banner { min-height: 180px; padding-top: 56px; }
  .sp-banner__title { font-size: 40px; }
  .sp-browse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sp-btile { font-size: 16px; padding: 12px; aspect-ratio: 16 / 9; }
  .sp-phead h1 { font-size: 24px; }
  .sp-pbox { display: flex; align-items: center; gap: 10px; height: 48px; margin: 8px 0 16px; padding: 0 12px; border-radius: 6px; background: #fff; color: #121212; }
  .sp-pbox input { flex: 1; min-width: 0; border: 0; background: none; color: #121212; font-size: 16px; font-weight: 600; outline: none; }
  .sp-pbox input::placeholder { color: #535353; }
  .sp-sresult { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sp-topcard { flex-direction: row; align-items: center; min-height: 0; padding: 12px; gap: 14px; }
  .sp-topcard__art { width: 64px; height: 64px; }
  .sp-topcard__name { font-size: 20px; }
  .sp-topcard__play { display: none; }
  .sp-libitem { padding: 6px 0; }
  .sp-libitem__art { width: 64px; height: 64px; }
  .sp-lib__tools { padding: 4px 0 8px; }
  .sp-lib__find.is-open input { width: 120px; }
  .sp-finder__box { width: 100%; }
  .sp-frow { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .sp-frow__album { display: none; }
  .sp-edit { padding: 20px; }
  .sp-edit__body { grid-template-columns: minmax(0, 1fr); }
  .sp-edit__art { width: 140px; height: 140px; justify-self: center; }
  .sp-about { height: 260px; }
  body.has-musicbar { padding-bottom: 0; }
  /* mini player: floating card above the bar, dark version of the cover's colour */
  .mbar { left: 8px; right: 8px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 74px); height: 56px; padding: 0 6px 0 8px; border-radius: 8px; overflow: hidden; grid-template-columns: minmax(0, 1fr) auto; background: color-mix(in srgb, var(--mini, #3a1a1a) 80%, #000); box-shadow: 0 6px 20px rgba(0,0,0,.45); }
  .mbar__left { gap: 10px; }
  .mbar__art { width: 40px; height: 40px; }
  .mbar__title { font-size: 13px; font-weight: 700; }
  .mbar__sub { font-size: 12px; color: rgba(255,255,255,.75); }
  .mbar__like { margin-left: auto; color: #fff; }
  .mbar__center { flex-direction: row; width: auto; }
  .mbar__buttons { gap: 0; }
  .mbar__buttons > :not(.mbar__toggle) { display: none; }
  .mbar__toggle { width: 40px; height: 40px; background: none; color: #fff; }
  .mbar__toggle:hover { color: #fff; transform: none; }
  .mbar__progress, .mbar__right { display: none; }
  .mbar__line { display: block; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 1px; background: rgba(255,255,255,.25); overflow: hidden; }
  .mbar__linefill { display: block; height: 100%; width: 0; background: #fff; }
  body:not(.has-tabbar):not(.in-music) .mbar { bottom: max(10px, env(safe-area-inset-bottom)); }
  body.has-tabbar.has-musicbar:not(.in-music) { padding-bottom: 168px; }
  .mbar { touch-action: none; }
  .mbar.is-flung { transition: transform .22s ease, opacity .22s ease; }
  .sp-row.has-grip, .sp-tracks.has-album .sp-row.has-grip, .sp-tracks.no-numbers .sp-row.has-grip { grid-template-columns: minmax(0, 1fr) 36px 36px; column-gap: 4px; }
}

/* ---------------------------------------------------------------- TV (remote) */
html.is-tv .sp--tv { --pad: var(--gutter); padding: calc(var(--header-h) + 1.2vw) var(--gutter) 8vw; min-height: 80vh; }
html.is-tv .sp--tv .sp-page { padding: 0 0 2vw; }
html.is-tv .sp--tv .sp-page::before { left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -2vw; }
.sp-tvnav { display: flex; gap: .8vw; margin-bottom: 1.4vw; }
html.is-tv .sp-chip { font-size: 1.15vw; padding: .5vw 1.4vw; }
html.is-tv .sp-chip:focus, html.is-tv .sp-tvnav .sp-chip:focus { background: #fff; color: #000; outline: none; }
html.is-tv .sp-tvnav .sp-chip.is-active { box-shadow: inset 0 0 0 .15vw #fff; }
html.is-tv .sp-home__head { padding: .5vw 0; }
html.is-tv .sp-tiles { gap: .8vw; margin: 1vw 0 2vw; }
html.is-tv .sp-tile { height: 4.6vw; }
html.is-tv .sp-tile__art { width: 4.6vw; height: 4.6vw; }
html.is-tv .sp-tile__name { font-size: 1.05vw; }
html.is-tv .sp-tile:focus { background: #fff; color: #000; outline: none; }
html.is-tv .sp-shelf__title { font-size: 1.7vw; }
html.is-tv .sp-shelf__row.slider__track { display: flex; gap: 1vw; padding: .6vw 0; margin: 0; overflow-x: auto; scroll-snap-type: none; }
html.is-tv .sp-card { flex: 0 0 calc((100% - 6vw) / 7); padding: .5vw; }
html.is-tv .sp-card__title { font-size: 1.05vw; } html.is-tv .sp-card__sub { font-size: .9vw; }
html.is-tv .sp-card:focus { background: #2a2a2a; outline: none; }
html.is-tv .sp-card:focus .sp-card__art > * { outline: .25vw solid #fff; outline-offset: .15vw; }
html.is-tv .sp-card__play, html.is-tv .sp-tile__play, html.is-tv .sp-topcard__play { display: none; }
html.is-tv .sp-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .8vw; margin: .8vw 0 0; }
html.is-tv .sp-row { height: 3.8vw; font-size: 1.1vw; }
html.is-tv .sp-row__title { font-size: 1.15vw; } html.is-tv .sp-row__sub, html.is-tv .sp-row__time, html.is-tv .sp-row__n { font-size: .95vw; }
html.is-tv .sp-row__art { width: 2.8vw; height: 2.8vw; }
html.is-tv .sp-row:focus { background: #fff; color: #000; outline: none; }
html.is-tv .sp-row:focus .sp-row__title, html.is-tv .sp-row:focus .sp-row__sub, html.is-tv .sp-row:focus .sp-row__time, html.is-tv .sp-row:focus .sp-row__n, html.is-tv .sp-row:focus .sp-row__hoverplay { color: #000; }
html.is-tv .sp-row__more { visibility: hidden; }
html.is-tv .sp-hero { padding: 2vw 0 1.4vw; }
html.is-tv .sp-hero__art { width: 15vw; }
html.is-tv .sp-hero__title { font-size: 4.2vw; } html.is-tv .sp-hero__title.is-long { font-size: 3vw; }
html.is-tv .sp-hero__meta, html.is-tv .sp-hero__desc { font-size: 1vw; }
html.is-tv .sp-actions { gap: 1.6vw; padding: 1vw 0; }
html.is-tv .sp-play:focus, html.is-tv .sp-icon-btn:focus, html.is-tv .sp-pill:focus, html.is-tv .sp-round:focus { outline: .22vw solid #fff; outline-offset: .2vw; }
html.is-tv .sp-icon-btn:focus { color: #fff; }
html.is-tv .sp-artist { height: 26vw; }
html.is-tv .sp-artist__name { font-size: 5vw; } html.is-tv .sp-artist__fans { font-size: 1.1vw; }
html.is-tv .sp-banner__title { font-size: 4.6vw; }
html.is-tv .sp-browse { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1vw; }
html.is-tv .sp-btile { font-size: 1.4vw; padding: 1vw; }
html.is-tv .sp-btile:focus { outline: .25vw solid #fff; outline-offset: .15vw; }
html.is-tv .sp-libitem:focus, html.is-tv .sp-recentrow:focus, html.is-tv .sp-topcard:focus, html.is-tv .sp-qrow:focus { background: #fff; color: #000; outline: none; }
html.is-tv .sp-libitem:focus .sp-libitem__sub, html.is-tv .sp-qrow:focus .sp-qrow__sub, html.is-tv .sp-topcard:focus .sp-topcard__sub { color: #333; }
html.is-tv .sp-libitem__art { width: 4vw; height: 4vw; } html.is-tv .sp-libitem__name { font-size: 1.2vw; } html.is-tv .sp-libitem__sub { font-size: .95vw; }
html.is-tv .sp-tvsearch { display: grid; grid-template-columns: 1fr; gap: .8vw; max-width: 40vw; margin-bottom: 1vw; }
html.is-tv .sp-tvsearch__box { padding: .8vw 1.2vw; border-radius: .5vw; background: #222; font-size: 1.8vw; font-weight: 700; min-height: 2vw; }
html.is-tv .sp-tvsearch__box i { color: #777; font-weight: 400; font-style: normal; font-size: 1.3vw; }
html.is-tv .sp-keys { display: grid; grid-template-columns: repeat(9, 1fr); gap: .45vw; }
html.is-tv .sp-keys .tvkey--wide { grid-column: span 3; }
html.is-tv .sp-tvplay { display: grid; grid-template-columns: 30vw minmax(0, 1fr); gap: 4vw; align-items: center; min-height: 62vh; padding-top: 2vw; }
html.is-tv .sp-tvplay__art { aspect-ratio: 1; border-radius: .8vw; overflow: hidden; box-shadow: 0 1.5vw 4vw rgba(0,0,0,.5); }
html.is-tv .sp-tvplay__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.is-tv .sp-tvplay__side .sp-full__head, html.is-tv .sp-tvplay__side .sp-full__scroll { display: none; }
html.is-tv .sp-tvplay__side .sp-full__title { font-size: 3vw; } html.is-tv .sp-tvplay__side .sp-full__artist { font-size: 1.5vw; }
html.is-tv .sp-tvplay__side .sp-full__times { font-size: 1vw; }
html.is-tv .sp-tvplay__side .sp-full__controls { justify-content: flex-start; gap: 2.4vw; margin-top: 2vw; }
html.is-tv .sp-tvplay__side .sp-full__foot { justify-content: flex-start; gap: 2vw; }
html.is-tv .sp-tvplay__side .sp-play--huge:focus { outline: .25vw solid #fff; outline-offset: .3vw; }
html.is-tv .mbar { height: 5.4vw; padding: 0 var(--gutter); }
html.is-tv .mbar__art { width: 4vw; height: 4vw; }
html.is-tv .mbar__title { font-size: 1.1vw; } html.is-tv .mbar__sub { font-size: .9vw; }
html.is-tv .mbar__vol, html.is-tv .mbar__side, html.is-tv [data-bar="mute"], html.is-tv [data-bar="close"], html.is-tv .mbar__like { display: none; }
html.is-tv body.has-musicbar, html.is-tv.has-musicbar body { padding-bottom: 5.4vw; }

/* --------------------------------------------------------------------------
   Rails / sliders
   -------------------------------------------------------------------------- */
.rails { position: relative; z-index: 3; margin-top: -9vw; padding-bottom: 40px; }
@media (max-width: 799px) { .rails { margin-top: -40px; } }

.rail { margin: 3vw 0; }
.rail__head {
  display: flex; align-items: baseline;
  padding: 0 var(--gutter);
  margin-bottom: 0.6vw;
  gap: 10px;
}
.rail__title {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  font-weight: 500;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 0;
  cursor: pointer;
}
.rail__explore {
  font-size: clamp(0.75rem, 0.9vw, 1rem); color: #54b9c5; font-weight: 500;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .3s, transform .3s;
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 10px;
}
.rail__title:hover .rail__explore { opacity: 1; transform: translateX(0); }
.rail__pager { margin-left: auto; display: flex; gap: 1px; opacity: 0; transition: opacity .3s; }
.rail:hover .rail__pager { opacity: 1; }
.rail__pager span { width: 12px; height: 2px; background: #4d4d4d; }
.rail__pager span.is-active { background: #aaa; }

.slider { position: relative; }
.slider__track {
  display: flex;
  gap: var(--gap);
  padding: 0 var(--gutter);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  padding-top: 2px; padding-bottom: 2px;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__handle {
  position: absolute; top: 0; bottom: 0;
  width: var(--gutter);
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,20,.5);
  color: #fff;
  z-index: 4;
  opacity: 0;
  transition: opacity .2s, background .2s;
}
.slider:hover .slider__handle { opacity: 1; }
.slider__handle:hover { background: rgba(20,20,20,.75); }
.slider__handle svg { width: 2.6vw; height: 2.6vw; min-width: 22px; min-height: 22px; transition: transform .2s; }
.slider__handle:hover svg { transform: scale(1.3); }
.slider__handle--prev { left: 0; border-radius: 0 4px 4px 0; }
.slider__handle--next { right: 0; border-radius: 4px 0 0 4px; }
@media (hover: none) { .slider__handle { display: none; } }

.card {
  position: relative;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
  transition: transform .25s var(--ease);
}
.card--poster { aspect-ratio: 2 / 3; flex-basis: calc((100% - (var(--cols) + 1) * var(--gap)) / (var(--cols) + 2)); }
.card__img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.card__img.is-loaded { opacity: 1; }
.card__fallback {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 10px;
  background: linear-gradient(160deg, #3a3a3a, #1b1b1b);
  color: #fff; font-weight: 700; font-size: clamp(12px, 1vw, 16px);
}
.card__title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6vw 0.6vw 0.5vw;
  font-size: clamp(0.7rem, 0.95vw, 1rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__badge {
  position: absolute; top: 0; left: 0;
  background: var(--red); color: #fff;
  font-size: clamp(10px, 0.7vw, 13px); font-weight: 700; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 0 0 4px 0;
}
.card__badge--muted { background: rgba(0,0,0,.65); }
.card__kind { position: absolute; top: 0; right: 0; background: rgba(0,0,0,.7); color: #ddd; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 0 0 0 4px; }
.card__progress { position: absolute; left: 6%; right: 6%; bottom: 6px; height: 3px; background: rgba(255,255,255,.35); }
.card__progress span { display: block; height: 100%; background: var(--red); }
/* Continue Watching posters: play ring in the middle, info strip at the bottom (Netflix style) */
.card--continue .card__play {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .15s, background .15s;
}
.card--continue:hover .card__play { background: rgba(255,255,255,.9); color: #000; transform: translate(-50%, -50%) scale(1.08); }
.card__meta { position: absolute; left: 0; right: 0; bottom: 0; background: #181818; padding: 6px 8px 4px; }
.card__meta-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #ddd; }
.card__ep { font-weight: 700; }
.card__left { color: #8c8c8c; font-size: 11px; }
.card__meta .card__progress { position: static; margin: 6px 0; height: 3px; }
.card__meta-row--icons { justify-content: space-between; padding-top: 2px; }
.card__icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #bbb; }
.card__icon:hover { background: #333; color: #fff; }
.card--continue .card__img { height: 100%; }
.card__rank {
  position: absolute; left: 0; bottom: -6%;
  font-size: 7vw; font-weight: 900; line-height: 1;
  color: var(--bg); -webkit-text-stroke: 2px #555;
  pointer-events: none;
}
/* Netflix-style big numbers on the Top 10 row's posters */
.card--poster .card__rank {
  left: -2%; bottom: -4%; font-size: 6.5vw; -webkit-text-stroke: 2px #bbb; color: #141414;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.card--poster .card__rank + .card__title { padding-left: 34%; }
@media (max-width: 799px) { .card__badge { font-size: 10px; } }

/* skeletons */
.skeleton { background: linear-gradient(90deg, #222 25%, #2c2c2c 37%, #222 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* --------------------------------------------------------------------------
   Hover preview (Netflix mini-modal)
   -------------------------------------------------------------------------- */
.preview {
  position: fixed;
  z-index: 150;
  width: 300px;
  background: var(--bg-elev);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,.75);
  transform-origin: center center;
  transform: scale(0.667);
  opacity: 0;
  transition: transform .32s var(--ease), opacity .25s ease;
  will-change: transform;
}
.preview.is-open { transform: scale(1); opacity: 1; }
.preview__media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.preview__img { width: 100%; height: 100%; object-fit: cover; }
.preview__media-title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2em .8em .5em; font-weight: 800; font-size: 1.05em; color: #fff;
  background: linear-gradient(to top, rgba(24,24,24,1), rgba(24,24,24,0));
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.preview__body { padding: 0.9em 1em 1em; }
.preview__actions { display: flex; gap: 0.5em; align-items: center; margin-bottom: 0.8em; }
.round {
  width: 2.4em; height: 2.4em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(42,42,42,.6);
  color: #fff;
  transition: border-color .2s, background .2s;
}
.round:hover { border-color: #fff; background: rgba(60,60,60,.8); }
.round--play { background: #fff; color: #000; border-color: #fff; }
.round--play:hover { background: rgba(255,255,255,.8); }
.round--right { margin-left: auto; }
.round--lg { width: 2.8em; height: 2.8em; }
.round .icon-check, .round.is-on .icon-add { display: none; }
.round.is-on .icon-check { display: block; }
/* Rating button: the icon follows the rating (none / Like / Love / Not for me). */
.round .icon-thumb-up, .round .icon-thumb-love, .round .icon-thumb-down { display: none; }
.round[data-thumb="up"] .icon-thumb, .round[data-thumb="love"] .icon-thumb, .round[data-thumb="down"] .icon-thumb { display: none; }
.round[data-thumb="up"] .icon-thumb-up, .round[data-thumb="love"] .icon-thumb-love, .round[data-thumb="down"] .icon-thumb-down { display: block; }
.round[data-thumb="up"], .round[data-thumb="love"], .round[data-thumb="down"] { color: #fff; border-color: #fff; }
.modal__loved { align-self: center; color: var(--text-dim); font-size: .9em; margin-left: .3em; }
.preview__why { margin-top: .5em; font-size: .78em; color: var(--text-dim); }
.preview__meta { display: flex; align-items: center; gap: 0.6em; font-size: 0.85em; color: var(--text-dim); flex-wrap: wrap; }
.match { color: var(--green); font-weight: 700; }
.badge-outline { border: 1px solid rgba(255,255,255,.4); padding: 0 .35em; font-size: .8em; line-height: 1.5; border-radius: 2px; }
.badge-hd { border: 1px solid rgba(255,255,255,.4); padding: 0 .3em; font-size: .7em; border-radius: 2px; }
.preview__tags { display: flex; flex-wrap: wrap; gap: 0.2em 0; margin-top: 0.6em; font-size: 0.8em; color: var(--text); }
.preview__tags span + span::before { content: "•"; color: #646464; margin: 0 0.45em; }

/* --------------------------------------------------------------------------
   Detail modal
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: fade-in .25s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal__dialog {
  position: relative;
  width: min(850px, 96vw);
  margin: 2em auto 4em;
  background: var(--bg-elev);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.8);
  animation: rise .3s var(--ease);
}
@keyframes rise { from { transform: translateY(30px) scale(.98); opacity: .5; } to { transform: none; opacity: 1; } }
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg-elev);
}
.modal__hero { position: relative; aspect-ratio: 16 / 9; background: #000; }
.modal__backdrop { width: 100%; height: 100%; object-fit: cover; }
.modal__hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-elev) 0%, rgba(24,24,24,.6) 18%, rgba(24,24,24,0) 45%); }
.modal__hero-content { position: absolute; left: 3em; right: 3em; bottom: 2em; }
.modal__title { margin: 0 0 0.5em; font-size: clamp(1.6rem, 3.4vw, 3rem); font-weight: 900; line-height: 1.05; text-shadow: 2px 2px 8px rgba(0,0,0,.7); }
.modal__hero-buttons { display: flex; align-items: center; gap: 0.6em; }
.modal__body { display: grid; grid-template-columns: 2fr 1fr; gap: 2em; padding: 1.4em 3em 1em; }
.modal__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6em; font-size: 0.95em; color: var(--text-dim); margin-bottom: 0.8em; }
.modal__overview { margin: 0; font-size: 0.98em; line-height: 1.5; }
.modal__side { font-size: 0.85em; color: var(--muted); display: flex; flex-direction: column; gap: 0.5em; }
.modal__side b { color: var(--text); font-weight: 400; }
.modal__side .pill { display: inline-block; padding: 2px 8px; border-radius: 3px; background: #333; color: var(--text); margin: 2px 4px 2px 0; font-size: 0.9em; }
/* "This show is: Dark · Suspenseful": moods from TMDB's keywords, under the meta line. */
.modal__moods { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .6em; margin: .4em 0 .2em; font-size: .9em; color: var(--text-dim); }
.modal__moods span + span::before { content: "•"; color: #646464; margin-right: .6em; }
.modal__moods span { color: var(--text); }
.modal__moods .modal__moods-label { color: var(--text-dim); }
.modal__moods .modal__moods-label::before { content: none; }
/* Cast row: round photos, name and part; tap one for everything they are in. */
.modal__cast { padding: 0 3em .6em; }
.modal__cast h3 { margin: 0 0 .6em; font-size: 1.05em; color: var(--text-dim); font-weight: 600; }
.cast { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.cast__person { flex: 0 0 auto; width: 96px; text-align: center; cursor: pointer; color: var(--text-dim); font-size: .8em; line-height: 1.25; outline: none; }
.cast__person img, .cast__person .cast__blank { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #333; display: block; margin: 0 auto 6px; transition: transform .15s; }
.cast__person .cast__blank { display: flex; align-items: center; justify-content: center; color: #888; font-size: 1.6em; font-weight: 700; }
.cast__person:hover, .cast__person:focus { color: #fff; }
.cast__person:hover img, .cast__person:focus img, .cast__person:focus .cast__blank { transform: scale(1.08); outline: 2px solid #fff; }
.cast__name { display: block; color: var(--text); font-weight: 600; }
.cast__role { display: block; color: var(--muted); font-size: .9em; }
/* A person's page: photo and name as the grid title; person cards in search results. */
.person__pic { width: 1.5em; height: 1.5em; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .35em; }
.card--person { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #1f1f1f; }
.card--person img { width: 44%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.card--person .card__name { width: 100%; padding: 0 8px; text-align: center; font-weight: 600; font-size: .95em; color: #fff; }
.card--person .card__sub { font-size: .75em; color: var(--text-dim); text-align: center; padding: 0 10px; }
@media (max-width: 799px) { .modal__cast { padding: 0 16px .6em; } .cast__person { width: 80px; } .cast__person img, .cast__person .cast__blank { width: 60px; height: 60px; } }
.modal__episodes { padding: 0.5em 3em 2.5em; }
.modal__episodes-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #404040; padding-bottom: 0.6em; }
.modal__episodes-head h3 { margin: 0; font-size: 1.4em; }
.season-select-wrap { position: relative; }
.season-select {
  appearance: none;
  background: #242424 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center / 18px;
  border: 1px solid #5a5a5a; color: #fff;
  padding: 0.45em 2.4em 0.45em 0.9em;
  font-size: 1em; font-weight: 600; border-radius: 3px;
}
.season-tools { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.8em 0 0.2em; font-size: 0.85em; color: var(--text-dim); flex-wrap: wrap; }
.episode-list { display: flex; flex-direction: column; }
.episode {
  display: grid;
  grid-template-columns: 2.2em 8.6em 1fr auto;
  gap: 1em;
  align-items: center;
  padding: 0.9em 0.8em;
  border-bottom: 1px solid #404040;
  border-radius: 6px;
  transition: background .2s;
}
.episode:hover { background: #333; }
.episode.is-playable { cursor: pointer; }
.episode.is-missing { opacity: .55; }
.episode.is-missing:hover { opacity: .9; }
.episode__num { font-size: 1.4em; color: #d2d2d2; text-align: center; }
.episode__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #333; }
.episode__thumb img { width: 100%; height: 100%; object-fit: cover; }
.episode__thumb .play-ring {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s; background: rgba(0,0,0,.35);
}
.episode.is-playable:hover .play-ring { opacity: 1; }
.play-ring span { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; background: rgba(30,30,30,.5); }
.episode__thumb .ep-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.3); }
.episode__thumb .ep-progress span { display: block; height: 100%; background: var(--red); }
.episode__info h4 { margin: 0 0 0.25em; font-size: 1em; display: flex; align-items: center; gap: 0.6em; }
.episode__info h4 small { color: var(--text-dim); font-weight: 400; font-size: 0.82em; }
.episode__info p { margin: 0; font-size: 0.85em; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.episode__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4em; font-size: 0.8em; color: var(--text-dim); white-space: nowrap; }
.chip { font-size: 0.72em; letter-spacing: .3px; padding: 2px 6px; border-radius: 3px; background: #2d2d2d; color: #cfcfcf; border: 1px solid #444; }
.chip--ok { color: var(--green); border-color: rgba(70,211,105,.5); }
.chip--dl { color: #ffb020; border-color: rgba(255,176,32,.5); }
@media (max-width: 799px) {
  .modal__dialog { margin: 0; width: 100%; min-height: 100%; border-radius: 0; }
  .modal__hero-content, .modal__body, .modal__episodes { padding-left: 1.2em; padding-right: 1.2em; }
  .modal__hero-content { left: 1.2em; right: 1.2em; bottom: 1em; }
  .modal__body { grid-template-columns: 1fr; gap: 1em; }
  .episode { grid-template-columns: 1.8em 6em 1fr; }
  .episode__side { grid-column: 2 / -1; flex-direction: row; justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Grid views (search / my list)
   -------------------------------------------------------------------------- */
.grid-view { padding: calc(var(--header-h) + 30px) var(--gutter) 60px; min-height: 80vh; }
.grid-view__title { font-size: 1.6em; margin: 0 0 1em; color: var(--text-dim); font-weight: 500; }
.grid-view__title strong { color: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6vw; }
.grid .card { flex: none; width: 100%; }
.grid .card--poster { aspect-ratio: 16/9; }
.grid-view__empty { color: var(--muted); }

/* --------------------------------------------------------------------------
   Live TV guide
   -------------------------------------------------------------------------- */
.live { padding: calc(var(--header-h) + 30px) var(--gutter) 60px; min-height: 80vh; }
.live__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: .8em; }
.live__head .grid-view__title { margin: 0; }
.live__filters { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; }
.live__search { background: #333; border: 1px solid #444; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 14px; min-width: 240px; outline: none; }
.live__search:focus { border-color: #888; }
.live__groups { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.live__group { flex: 0 0 auto; background: transparent; color: #ddd; border: 1px solid #555; border-radius: 999px; padding: 8px 18px; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.live__group:hover, .live__group:focus-visible { border-color: #fff; color: #fff; outline: none; }
.live__group.is-active { background: #fff; color: #000; border-color: #fff; }
/* "On now" strip */
.live__now { display: flex; gap: 12px; overflow-x: auto; padding: 6px 0 14px; margin-bottom: 8px; }
.nowcard { position: relative; flex: 0 0 auto; width: 236px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #222; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; transition: transform .15s; }
.nowcard:hover, .nowcard:focus-visible { transform: scale(1.05); outline: 2px solid #fff; z-index: 2; }
.nowcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1a1a1a; }
.nowcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%); }
.nowcard__live { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; padding: 3px 7px; border-radius: 3px; }
.nowcard__logo { position: absolute; left: 10px; bottom: 36px; z-index: 1; height: 22px; max-width: 96px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.nowcard__chan { position: absolute; left: 10px; bottom: 36px; z-index: 1; color: #fff; font-weight: 800; font-size: 12px; text-shadow: 0 1px 2px #000; }
.nowcard__title { position: absolute; left: 10px; right: 10px; bottom: 16px; z-index: 1; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.nowcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .3s; }
.nowcard.is-playing .nowcard__video { opacity: 1; }
.nowcard.is-playing .nowcard__img { opacity: 0; }
.nowcard.is-playing .nowcard__logo, .nowcard.is-playing .nowcard__chan { z-index: 2; }
.nowcard--noart .nowcard__logo { left: 50%; top: 38%; bottom: auto; transform: translate(-50%, -50%); height: 36px; max-width: 150px; }
.nowcard--noart .nowcard__chan { left: 50%; top: 38%; bottom: auto; transform: translate(-50%, -50%); font-size: 16px; }
.nowcard__bar { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.nowcard__bar span { display: block; height: 100%; background: var(--red); }
/* Selected programme */
.live__info { display: flex; gap: 20px; background: linear-gradient(90deg, #1b1b1b, #121212); border-radius: 8px; padding: 16px; margin-bottom: 14px; min-height: 150px; }
.live__info-art { width: 240px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #0c0c0c; }
.live__info-body { min-width: 0; display: flex; flex-direction: column; }
.live__info-chan { display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.live__info-chan img { height: 18px; }
.live__info-title { margin: 6px 0 2px; font-size: 22px; font-weight: 800; }
.live__info-time { color: #bbb; font-size: 13px; }
.live__info-desc { color: #ccc; font-size: 14px; margin: 8px 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.2em; }
.live__info-play { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto; }
/* Timeline grid */
.guide { position: relative; overflow: auto; max-height: calc(100vh - 150px); border-radius: 8px; background: #0f0f0f; --cell-w: 200px; }
.guide__ruler { position: sticky; top: 0; z-index: 5; display: flex; background: #0f0f0f; border-bottom: 1px solid #222; }
.guide__corner { position: sticky; left: 0; z-index: 6; flex: 0 0 var(--cell-w); width: var(--cell-w); padding: 10px 14px; color: #fff; font-weight: 700; font-size: 13px; background: #0f0f0f; }
.guide__ticks { position: relative; height: 38px; flex: 0 0 auto; }
.guide__tick { position: absolute; top: 10px; color: #aaa; font-size: 13px; padding-left: 8px; border-left: 1px solid #333; height: 18px; line-height: 18px; }
.guide__nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 3; pointer-events: none; }
.guide__nowline--ruler::before { content: ''; position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.guide__body { position: relative; }
.guide__body > .guide__nowline { margin-left: var(--cell-w); }
.grow { display: flex; align-items: stretch; border-bottom: 1px solid #1c1c1c; }
.gcell { position: sticky; left: 0; z-index: 4; flex: 0 0 var(--cell-w); width: var(--cell-w); display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #161616; border: 0; border-right: 1px solid #222; text-align: left; color: #fff; font: inherit; cursor: pointer; }
.gcell:hover, .gcell:focus-visible { background: #262626; outline: none; }
.gcell img { height: 34px; width: 74px; object-fit: contain; flex: 0 0 auto; }
.gcell__name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.gcell__num { color: #777; font-size: 11px; }
.gtrack { position: relative; height: 60px; flex: 0 0 auto; }
.gprog { position: absolute; top: 5px; bottom: 5px; background: #222; border: 0; border-radius: 6px; padding: 7px 10px; text-align: left; color: #e5e5e5; overflow: hidden; margin-left: 2px; font: inherit; cursor: pointer; transition: background .12s; }
.gprog:hover, .gprog:focus-visible { background: #3a3a3a; outline: 2px solid #fff; z-index: 2; }
.gprog.is-on { background: #2c2c2c; box-shadow: inset 3px 0 0 var(--red); }
.gprog.is-past { opacity: .5; }
.gprog__title { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gprog__time { display: block; font-size: 11px; color: #999; margin-top: 2px; }
.gprog__live { font-style: normal; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 1px; margin-left: 4px; }
.gprog--none { color: #666; }
.live__empty { color: var(--muted); padding: 30px 0; }
@media (max-width: 720px) {
  .live__info-art { width: 140px; }
  .guide { --cell-w: 120px; }
  .gcell img { display: none; }
}
.player__live { background: var(--red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 3px; margin-right: 10px; }
.player.is-live .player__progress, .player.is-live .player__time, .player.is-live #btnBack10, .player.is-live #btnFwd10 { display: none; }
@media (max-width: 799px) { .chan { grid-template-columns: 56px 1fr auto; } .chan__next { display: none; } .chan__logo { width: 56px; height: 32px; } }

/* --------------------------------------------------------------------------
   Downloads view
   -------------------------------------------------------------------------- */
.downloads { padding: calc(var(--header-h) + 30px) var(--gutter) 60px; min-height: 80vh; }
.downloads__hint { color: var(--muted); margin-top: -0.6em; }
.downloads__list { display: flex; flex-direction: column; gap: 10px; margin-top: 1.5em; }
.dl { background: var(--bg-elev); border-radius: 6px; padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; }
.dl__title { font-weight: 600; }
.dl__sub { color: var(--text-dim); font-size: 0.85em; grid-column: 1 / -1; }
.dl__bar { grid-column: 1 / -1; height: 4px; background: #333; border-radius: 2px; overflow: hidden; }
.dl__bar span { display: block; height: 100%; background: var(--red); transition: width .5s; }
.dl__pct { font-weight: 700; }
.dl__toggle { color: #8c8c8c; margin-left: 8px; text-decoration: underline; }
.dl__toggle:hover { color: #fff; }
.dl__cancel { color: #8c8c8c; margin-left: 8px; text-decoration: underline; }
.dl__cancel:hover { color: var(--red); }
.dl__episodes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 0.85em; color: var(--text-dim); }
.dl__episodes div { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid #242424; }
.dl__empty { color: var(--muted); }

/* --------------------------------------------------------------------------
   Player
   -------------------------------------------------------------------------- */
.player { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; background: #000; cursor: none; }
/* Subtitles drawn by MYFLIX: white with a soft black edge, above the video, lifted while the controls show. */
.player__subs { position: absolute; left: 6%; right: 6%; bottom: var(--subs-bottom, 8%); text-align: center; pointer-events: none; color: #fff; font-weight: 600; font-size: var(--subs-size, clamp(16px, min(4.4vh, 3.3vw), 60px)); line-height: 1.3; text-shadow: 0 0 3px #000, 0 0 7px #000, 0 2px 3px #000; transition: bottom .25s ease; }
.player.show-ui .player__subs { bottom: max(var(--subs-bottom, 8%), 21%); }
.player__subs i { font-style: italic; }
.player__subs-note { font-size: .6em; font-weight: 400; color: #cfcfcf; }
.player .picker { cursor: auto; }
.player.show-ui { cursor: default; }
.player__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player__ui { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.player.show-ui .player__ui { opacity: 1; pointer-events: auto; }
.player__top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 24px 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.player__mode { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 3px; }
.player__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.player__center .flash {
  width: 90px; height: 90px; border-radius: 50%; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; color: #fff;
  animation: flash .6s ease-out forwards;
}
@keyframes flash { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.3); } }
.player__bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 40px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
}
/* 4px visible track inside a 24px tall clickable box (padding is the hit area) */
.player__progress { position: relative; height: 4px; padding: 10px 0; box-sizing: content-box; background: rgba(255,255,255,.3); background-clip: content-box; cursor: pointer; margin-bottom: 4px; transition: height .15s; }
.player__progress:hover { height: 6px; }
/* Scrub picture: a frame from the spot under the pointer (or the remote's jump), with its time, above the bar. */
.scrub { position: absolute; bottom: 100%; margin-bottom: 14px; width: 240px; height: 135px; background: #000 no-repeat; border: 2px solid #fff; border-radius: 4px; transform: translateX(-50%); pointer-events: none; box-shadow: 0 6px 24px rgba(0,0,0,.7); z-index: 3; }
.scrub.is-blank { width: auto; height: auto; border: 0; background: none; box-shadow: none; }
.scrub__time { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); font-size: 13px; font-weight: 600; background: rgba(0,0,0,.75); padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.scrub.is-blank .scrub__time { position: static; transform: none; }
html.is-tv .scrub { width: 16vw; margin-bottom: 1.4vw; border-width: .2vw; }
html.is-tv .scrub__time { font-size: 1.2vw; bottom: -2.2vw; }
@media (max-width: 799px) { .scrub { width: 150px; margin-bottom: 10px; } .scrub__time { font-size: 12px; bottom: -24px; } }
.player__buffered { position: absolute; left: 0; top: 10px; height: 4px; background: rgba(255,255,255,.45); width: 0; transition: height .15s; }
.player__played { position: absolute; left: 0; top: 10px; height: 4px; background: var(--red); width: 0; transition: height .15s; }
.player__progress:hover .player__buffered, .player__progress:hover .player__played { height: 6px; }
.player__knob { position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .15s; }
.player__progress:hover .player__knob { transform: scale(1); }
.player__controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.player__group { display: flex; align-items: center; gap: 18px; }
.player__title { flex: 1; text-align: center; font-size: 1.05em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__title b { font-weight: 700; margin-right: 0.6em; }
.player .icon-btn { color: #fff; transition: transform .15s; }
.player .icon-btn:hover { transform: scale(1.2); color: #fff; }
.player .ic-pause, .player.is-playing .ic-play { display: none; }
.player.is-playing .ic-pause { display: block; }
.player .ic-mute, .player.is-muted .ic-vol { display: none; }
.player.is-muted .ic-mute { display: block; }
.volume { display: flex; align-items: center; gap: 6px; }
.volume__slider { width: 0; opacity: 0; transition: width .2s, opacity .2s; accent-color: var(--red); }
.volume:hover .volume__slider { width: 90px; opacity: 1; }
.player__time { font-variant-numeric: tabular-nums; color: #fff; font-size: 0.95em; }
.player__time-sep { margin: 0 5px; color: var(--text-dim); }
.btn--next { background: #fff; color: #000; font-size: 0.95em; padding: 0.45em 1.1em 0.45em 0.8em; gap: 0.5em; }
.next-up {
  position: absolute; right: 40px; bottom: 110px; z-index: 2;
  background: rgba(24,24,24,.96); border: 1px solid #333; border-radius: 6px;
  padding: 16px 18px; min-width: 300px; max-width: 420px;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
  animation: toast-in .3s var(--ease);
  pointer-events: auto;
}
.next-up__label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.next-up__title { font-size: 1.05em; font-weight: 700; color: #fff; margin-bottom: 12px; }
.next-up__actions { display: flex; gap: 10px; }
.next-up__actions .btn { font-size: 0.95em; padding: 0.45em 1.1em 0.45em 0.8em; }
.next-up em { font-style: normal; opacity: .75; margin-left: 4px; }
.next-up--still { right: auto; left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%); animation: fade-in .3s ease; }
/* Paused for a moment: what is on, Netflix-style, in the top left; goes when play resumes. */
.player__paused { position: absolute; left: 5%; top: 16%; max-width: 48%; pointer-events: none; animation: fade-in .4s ease; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.player__paused-kicker { font-size: clamp(11px, 1vw, 16px); letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); margin-bottom: .4em; }
.player__paused-title { font-size: clamp(1.6rem, 3.6vw, 4rem); font-weight: 900; line-height: 1.05; color: #fff; }
.player__paused-ep { font-size: clamp(1rem, 1.5vw, 1.6rem); font-weight: 700; color: #fff; margin-top: .3em; }
.player__paused-desc { font-size: clamp(.9rem, 1.1vw, 1.25rem); color: var(--text-dim); margin: .8em 0 0; line-height: 1.45; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 799px) { .player__paused { top: 12%; max-width: 70%; } .player__paused-desc { display: none; } }
@media (max-width: 799px) { .next-up { right: 16px; left: 16px; bottom: 90px; min-width: 0; } }
/* Skip Intro, like Netflix: bottom right while the opening titles play, above the controls when they show. */
.skip-intro {
  position: absolute; right: 40px; bottom: 48px; z-index: 3;
  padding: .75em 1.6em; font: inherit; font-size: 1.05em; font-weight: 700; letter-spacing: .2px;
  color: #fff; background: rgba(42,42,42,.6); border: 2px solid rgba(255,255,255,.7); border-radius: 4px;
  cursor: pointer; transition: bottom .3s, background .15s, color .15s; animation: fade-in .3s ease;
}
.skip-intro[hidden] { display: none; }
.skip-intro:hover, .skip-intro:focus-visible { background: #fff; color: #000; border-color: #fff; outline: none; }
.player.show-ui .skip-intro { bottom: 120px; }
@media (max-width: 799px) { .skip-intro { right: 16px; bottom: 28px; font-size: .95em; padding: .65em 1.3em; } .player.show-ui .skip-intro { bottom: 96px; } }
/* Watch Credits / Next Episode, like Netflix (24 Oct): bottom right while the credits roll; the white fills the grey
   button, then the next episode starts. Above the controls when they show. */
.credits-next { position: absolute; right: 40px; bottom: 48px; z-index: 3; display: flex; gap: 14px; transition: bottom .3s; animation: fade-in .3s ease; }
.credits-next[hidden] { display: none; }
.player.show-ui .credits-next { bottom: 120px; }
.credits-next button { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 1.05em; font-weight: 700; line-height: 1.25; letter-spacing: .2px; border: 0; border-radius: 4px; padding: .75em 1.6em; cursor: pointer; }
.credits-next__watch { color: #fff; background: rgba(109,109,110,.75); }
.credits-next__watch:hover { background: rgba(109,109,110,.95); }
.credits-next__go { position: relative; overflow: hidden; color: #000; background: #a8a8a8; min-width: 11.5em; }
.credits-next__fill { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform .35s linear; }
.credits-next__label { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; }
.credits-next button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 799px) { .credits-next { right: 16px; bottom: 28px; gap: 10px; } .credits-next button { font-size: .95em; padding: .65em 1.2em; } .credits-next__go { min-width: 10em; } .player.show-ui .credits-next { bottom: 96px; } }
.player__spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; }
.player.is-waiting .player__spinner { display: flex; }
/* Updating screen (16 Oct): covers a TV's reload to a new version; the app takes it away once it is ready. */
.updating { position: fixed; inset: 0; z-index: 3000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: #141414; }
html.is-updating .updating { display: flex; }
html .updating .wordmark { height: 84px; width: auto; }
html.is-tv .updating .wordmark { height: 6.5vw; }
html.is-tv .updating__text { font-size: 1.5vw; }
.updating__text { color: var(--text-dim); font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }
/* a bar that fills while it works ("people don't like spinners"): to about 45% before the reload, on to 92% while the
   new version starts, the rest when it is ready */
.updating__bar { width: 280px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.updating__bar span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--red); }
html.is-updating .updating__bar span { animation: updating-fill 2.5s cubic-bezier(.2,.7,.3,1) forwards; }
html.is-updating.is-reloaded .updating__bar span { animation: updating-fill-2 4s cubic-bezier(.2,.7,.3,1) forwards; }
html.is-updated .updating__bar span { animation: none; width: 100%; transition: width .25s ease-out; }
@keyframes updating-fill { from { width: 4%; } to { width: 45%; } }
@keyframes updating-fill-2 { from { width: 45%; } to { width: 92%; } }
html.is-tv .updating__bar { width: 22vw; height: .32vw; border-radius: .16vw; }
.spinner { width: 64px; height: 64px; border-radius: 50%; border: 4px solid rgba(255,255,255,.2); border-top-color: var(--red); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 799px) {
  .player__top { padding: 16px; }
  .player__bottom { padding: 0 16px 16px; }
  .player__title { display: none; }
  .player__group { gap: 10px; }
  .btn--next span { display: none; }
}

/* --------------------------------------------------------------------------
   Toasts + footer
   -------------------------------------------------------------------------- */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 400; display: flex; flex-direction: column; gap: 10px; }
.toast {
  position: relative;
  background: rgba(24, 24, 24, 0.96); color: var(--text-dim);
  padding: 12px 16px 12px 46px; border-radius: 6px; min-width: 280px; max-width: 400px;
  border: 1px solid #2e2e2e; border-left: 4px solid var(--red);
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
  font-size: 0.92em; line-height: 1.4;
  backdrop-filter: blur(6px);
  animation: toast-in .3s var(--ease);
}
.toast::before {
  content: "M"; position: absolute; left: 14px; top: 11px;
  width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; font-weight: 900; font-size: 14px;
}
.toast--error { border-left-color: #ffb020; }
.toast--error::before { background: #ffb020; color: #000; }
.toast--ok { border-left-color: var(--green); }
.toast--ok::before { background: var(--green); color: #000; }
.toast b { display: block; margin-bottom: 2px; color: #fff; font-size: 1.02em; }
@keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.footer { padding: 20px var(--gutter) 40px; color: var(--muted); font-size: 0.8em; max-width: 980px; }
.footer__status { color: #5a5a5a; }

/* --------------------------------------------------------------------------
   Avatars (Netflix-style colour tiles with a simple face)
   -------------------------------------------------------------------------- */
.avatar--red    { background: linear-gradient(135deg, #e50914, #b20710); }
.avatar--blue   { background: linear-gradient(135deg, #3b82f6, #1e3a8a); }
.avatar--green  { background: linear-gradient(135deg, #34d399, #15803d); }
.avatar--yellow { background: linear-gradient(135deg, #fbbf24, #b45309); }
.avatar--purple { background: linear-gradient(135deg, #a78bfa, #5b21b6); }
.avatar--orange { background: linear-gradient(135deg, #fb923c, #c2410c); }
.avatar--teal   { background: linear-gradient(135deg, #2dd4bf, #0f766e); }
.avatar--pink   { background: linear-gradient(135deg, #f472b6, #be185d); }
.avatar--big { width: 120px; height: 120px; border-radius: 6px; }
.avatar--big::before, .avatar--big::after { width: 16px; height: 22px; top: 36px; border-radius: 6px; }
.avatar--big::before { left: 32px; }
.avatar--big::after { right: 32px; }
.avatar--kids::before, .avatar--kids::after { border-radius: 50%; }

/* --------------------------------------------------------------------------
   Sign in / setup / profiles
   -------------------------------------------------------------------------- */
.auth { position: fixed; inset: 0; z-index: 500; background: #000; overflow-y: auto; color: #fff; }
.auth__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--red-rgb), 0.28), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(80, 20, 120, 0.25), transparent 70%),
    linear-gradient(180deg, #0b0b0b 0%, #000 100%);
}
.auth__bg::after {
  content: ""; position: absolute; inset: 0; opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 240px 135px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 85%);
}
.auth__top { position: relative; padding: 22px var(--gutter); }
button.logo { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.logo--big { font-size: 34px; }
.auth__panel {
  position: relative;
  width: min(450px, 94vw);
  margin: 2vh auto 6vh;
  background: rgba(0,0,0,.78);
  border-radius: 6px;
  padding: 52px 64px 60px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.auth__panel--wide { width: min(640px, 94vw); }
.auth__panel--message { text-align: center; }
.auth__panel h1 { margin: 0 0 24px; font-size: 32px; font-weight: 700; }
.auth__sub { color: #b3b3b3; margin: -10px 0 24px; line-height: 1.5; }
.field { display: block; position: relative; margin-bottom: 16px; }
.field input {
  width: 100%; height: 56px; padding: 22px 16px 6px;
  background: #333; border: 0; border-radius: 4px; color: #fff; font-size: 16px; outline: none;
}
.field input:focus { background: #454545; }
.field span {
  position: absolute; left: 16px; top: 18px; color: #8c8c8c; font-size: 16px; pointer-events: none;
  transition: transform .15s, font-size .15s, top .15s;
}
.field input:focus + span, .field input:not(:placeholder-shown) + span { top: 7px; font-size: 11px; }
.auth__error { background: #e87c03; color: #fff; padding: 10px 16px; border-radius: 4px; font-size: 14px; margin: 0 0 16px; }
.auth__submit {
  width: 100%; height: 48px; margin-top: 16px;
  background: var(--red); color: #fff; font-size: 16px; font-weight: 700; border-radius: 4px;
  transition: background .2s;
}
.auth__submit:hover { background: var(--red-hover); }
.auth__submit:disabled { opacity: .6; cursor: wait; }
.auth__submit--inline { width: auto; padding: 0 28px; margin-top: 0; }
.auth__hint { color: #8c8c8c; font-size: 13px; margin: 18px 0 0; line-height: 1.5; }
.auth__check { display: flex; align-items: center; gap: 10px; color: #b3b3b3; font-size: 14px; margin-top: 6px; }
.auth__check small { color: #777; }
.auth__check input { accent-color: var(--red); width: 18px; height: 18px; }

.profiles { position: relative; text-align: center; padding: 6vh 4% 8vh; }
.profiles h1 { font-size: clamp(1.8rem, 3.5vw, 3.5rem); font-weight: 500; margin: 0 0 4vh; }
.profiles__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2vw; margin-bottom: 5vh; }
.profile-tile { width: clamp(84px, 10vw, 200px); cursor: pointer; background: none; border: 0; color: #808080; font-size: clamp(.8rem, 1.3vw, 1.3rem); }
.profile-tile .avatar { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; border: 3px solid transparent; transition: border-color .15s, transform .15s; position: relative; }
.profile-tile .avatar::before, .profile-tile .avatar::after { width: 14%; height: 20%; top: 30%; border-radius: 12%; }
.profile-tile .avatar::before { left: 27%; }
.profile-tile .avatar::after { right: 27%; }
.profile-tile:hover .avatar, .profile-tile:focus-visible .avatar { border-color: #fff; transform: scale(1.04); }
.profile-tile:hover, .profile-tile:focus-visible { color: #fff; outline: none; }
.profile-tile__name { display: block; margin-top: .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-tile--add .avatar { background: transparent; display: flex; align-items: center; justify-content: center; }
.profile-tile--add .avatar::before, .profile-tile--add .avatar::after { display: none; }
.profile-tile--add .avatar svg { width: 55%; height: 55%; color: #808080; background: #e5e5e5; border-radius: 50%; padding: 10%; }
.profile-tile:hover.profile-tile--add .avatar svg { color: #000; }
.profile-tile .avatar .edit-pencil { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.5); border-radius: 4px; }
.profiles.is-managing .profile-tile:not(.profile-tile--add) .avatar .edit-pencil { display: flex; }
.profiles__actions { display: flex; justify-content: center; gap: 16px; }
.btn-outline {
  background: transparent; color: #808080; border: 1px solid #808080;
  padding: 10px 26px; font-size: clamp(.9rem, 1.2vw, 1.2rem); letter-spacing: 1px; text-transform: none;
  transition: color .15s, border-color .15s;
}
.btn-outline:hover { color: #fff; border-color: #fff; }
.btn-outline--light { background: #fff; color: #000; border-color: #fff; }
.btn-outline--light:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-outline--danger:hover { color: var(--danger); border-color: var(--danger); }
.auth__signout { display: block; margin: 5vh auto 0; color: #666; font-size: 14px; text-decoration: underline; }
.auth__signout:hover { color: #fff; }

.editor__row { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 20px; }
.editor__fields { flex: 1; }
.editor__label { color: #b3b3b3; margin: 0 0 10px; font-size: 14px; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.avatar-picker .avatar { width: 56px; height: 56px; cursor: pointer; border: 3px solid transparent; border-radius: 6px; }
.avatar-picker .avatar::before, .avatar-picker .avatar::after { width: 8px; height: 11px; top: 17px; }
.avatar-picker .avatar::before { left: 15px; }
.avatar-picker .avatar::after { right: 15px; }
.avatar-picker .avatar.is-selected, .avatar-picker .avatar:hover { border-color: #fff; }
.editor__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.auth__links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; flex-wrap: wrap; }
.auth__links a { color: #b3b3b3; }
.auth__links a:hover { color: #fff; text-decoration: underline; }
.auth__ok { background: rgba(70,211,105,.15); border: 1px solid rgba(70,211,105,.5); color: #d9ffe3; padding: 10px 16px; border-radius: 4px; font-size: 14px; margin: 0 0 16px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Account / Members
   -------------------------------------------------------------------------- */
.account { padding: calc(var(--header-h) + 30px) var(--gutter) 60px; min-height: 80vh; max-width: 1100px; }
.account__head { margin-bottom: 1.2em; }
.account__sub { color: var(--muted); margin: -0.8em 0 0; }
.account__sub .role { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 3px; background: #333; color: #ddd; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.account__tabs { display: flex; gap: 4px; border-bottom: 1px solid #333; margin-bottom: 1.5em; }
.account__tab { padding: 10px 18px; color: var(--text-dim); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.account__tab:hover { color: #fff; }
.account__tab.is-active { color: #fff; border-bottom-color: var(--red); }
.account__hint { color: var(--muted); margin: 0 0 1em; font-size: 0.92em; }
.account__form { max-width: 420px; }
.dev-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.2em; }
.dev {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  background: var(--bg-elev); border-radius: 6px; padding: 12px 16px;
}
.dev__icon { width: 44px; height: 44px; border-radius: 8px; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: #ddd; }
.dev__title { font-weight: 600; }
.dev__meta { color: var(--text-dim); font-size: 0.85em; }
.dev__current { color: var(--green); font-size: 0.8em; font-weight: 600; margin-left: 8px; }
.members__alerts { background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.5); border-radius: 6px; padding: 12px 16px; margin-bottom: 1.5em; color: #ffd48a; font-size: 0.92em; }
.members__alerts div + div { margin-top: 4px; }
.members__block { margin-bottom: 2.4em; }
.members__block h3 { margin: 0 0 0.6em; font-size: 1.25em; }
.invite-form { max-width: 560px; }
.invite-form__opts { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 4px 0 16px; color: var(--text-dim); font-size: 14px; }
.opt select { margin-left: 8px; background: #333; color: #fff; border: 1px solid #555; border-radius: 3px; padding: 4px 6px; }
.invite-result { background: var(--bg-elev); border-left: 3px solid var(--red); border-radius: 6px; padding: 14px 18px; margin: 1em 0; color: var(--text-dim); }
.invite-result b { color: #fff; }
.invite-result code { display: block; font-size: 1.3em; letter-spacing: 2px; color: #fff; margin: 8px 0; }
.invite-result input { width: 100%; background: #242424; color: #ddd; border: 1px solid #3a3a3a; border-radius: 4px; padding: 8px 10px; margin: 6px 0 10px; font-size: 13px; }
.invite-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.invite-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg-elev); border-radius: 6px; padding: 10px 14px; font-size: 0.9em; }
.invite-row code { color: #fff; letter-spacing: 1px; }
.invite-row .grow { flex: 1; color: var(--text-dim); }
.btn-mini { background: #333; color: #fff; border: 1px solid #555; border-radius: 3px; padding: 5px 10px; font-size: 12px; }
.btn-mini:hover { background: #444; }
.btn-mini--danger:hover { background: var(--danger); border-color: var(--danger); }
.member-list { display: flex; flex-direction: column; gap: 12px; }
.member { background: var(--bg-elev); border-radius: 8px; padding: 16px 18px; }
.member__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.member__name { font-weight: 700; font-size: 1.05em; }
.member__email { color: var(--text-dim); font-size: 0.9em; }
.member__stats { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-dim); font-size: 0.85em; margin: 10px 0; }
.member__stats b { color: #ddd; font-weight: 500; }
.member__alert { color: #ffb020; font-size: 0.85em; }
.member__controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 0.88em; color: var(--text-dim); border-top: 1px solid #2a2a2a; padding-top: 10px; margin-top: 4px; }
.member__controls .auth__check { margin: 0; }
.member__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.member.is-blocked { opacity: .6; border: 1px solid rgba(229,9,20,.4); }
.pill-blocked { background: #3a1a1a; color: #ff8a8a; border: 1px solid rgba(229,9,20,.6); font-size: 11px; padding: 2px 7px; border-radius: 3px; letter-spacing: 1px; }
.member__watch { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.member__watch .stat { background: #202020; border-radius: 6px; padding: 8px 12px; min-width: 110px; display: flex; flex-direction: column; }
.member__watch .stat b { font-size: 1.05em; color: #fff; font-weight: 700; }
.member__watch .stat span { font-size: 0.75em; color: var(--muted); margin-top: 2px; }
.member__watch .stat--wide { min-width: 200px; }
.disk { background: var(--bg-elev); border-radius: 8px; padding: 16px 18px; }
.disk__meta { color: var(--text-dim); font-size: 0.92em; margin-bottom: 10px; }
.disk__meta b { color: #fff; font-weight: 600; }
.disk__bar { position: relative; height: 10px; background: #2a2a2a; border-radius: 5px; overflow: visible; margin-bottom: 10px; }
.disk__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-deep)); border-radius: 5px; }
.disk__bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; opacity: .7; }
.storage-form { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.storage-form .radio { display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px; align-items: start; background: var(--bg-elev); padding: 12px 14px; border-radius: 6px; cursor: pointer; }
.storage-form .radio input { accent-color: var(--red); width: 18px; height: 18px; margin-top: 2px; grid-row: span 2; }
.storage-form .radio b { color: #fff; }
.storage-form .radio span { color: var(--text-dim); font-size: 0.88em; }
.storage-form__row { display: flex; flex-wrap: wrap; gap: 18px; color: var(--text-dim); font-size: 14px; }
.storage-form input[type=number] { width: 80px; background: #333; color: #fff; border: 1px solid #555; border-radius: 3px; padding: 4px 6px; margin: 0 6px; }
.member__custom { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.member__perm-note { color: var(--muted); font-size: 0.85em; }
.member__activity { margin-top: 10px; border-top: 1px solid #2a2a2a; padding-top: 10px; font-size: 0.85em; color: var(--text-dim); max-height: 260px; overflow: auto; }
.member__activity div { padding: 3px 0; }
.member__activity time { color: #888; margin-right: 8px; }
.pill-owner { background: var(--red); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 3px; letter-spacing: 1px; }
@media (max-width: 799px) { .dev { grid-template-columns: 1fr auto; } .dev__icon { display: none; } }

/* header profile menu */
.profile__btn { display: flex; align-items: center; gap: 6px; color: #fff; }
.profile__dropdown {
  position: absolute; right: 0; top: calc(100% + 12px); min-width: 220px;
  background: rgba(0,0,0,.92); border: 1px solid #333; border-radius: 4px; padding: 10px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.profile__dropdown::before { content: ""; position: absolute; right: 18px; top: -6px; border: 6px solid transparent; border-bottom-color: #e5e5e5; border-top: 0; }
.profile__item, .profile__switch { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; color: #e5e5e5; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; }
.profile__item:hover, .profile__switch:hover { text-decoration: underline; }
.profile__switch .avatar { width: 32px; height: 32px; }
.profile__switch.is-current { color: #fff; font-weight: 600; }
.profile__item--signout { border-top: 1px solid #333; margin-top: 6px; padding-top: 12px; }
.profile { position: relative; }
@media (max-width: 799px) {
  .auth__panel { padding: 40px 24px 48px; }
  .editor__row { flex-direction: column; align-items: center; }
}

/* --------------------------------------------------------------------------
   Billboard playback: the episode you are on plays in the hero, muted, with a sound toggle
   -------------------------------------------------------------------------- */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; background: #000; }
.hero.is-playing .hero__video { opacity: 1; }
.hero.is-playing .hero__image { opacity: 0; animation: none; }
.hero.is-playing .hero__overview { opacity: 0; max-height: 0; margin-bottom: 0; transition: opacity .5s, max-height .5s .2s, margin .5s .2s; }
.hero.is-playing .hero__title { font-size: clamp(1.6rem, 3.4vw, 4rem); transition: font-size .5s; }
.hero__mute { position: absolute; right: calc(3vw + 130px); bottom: 36%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.hero__mute:hover { background: rgba(255,255,255,.2); }
.hero__mute .icon-sound { display: none; }
.hero__mute.is-sound .icon-sound { display: block; }
.hero__mute.is-sound .icon-muted { display: none; }
@media (max-width: 799px) {
  /* Phones: on the Play / More Info row at the right edge, like Netflix's app, instead of over the title. */
  .hero__mute { right: var(--gutter); bottom: calc(26% - 2px); width: 40px; height: 40px; }
  .hero__mute svg { width: 20px; height: 20px; }
}

/* --------------------------------------------------------------------------
   Softer corners throughout, like Netflix's current look
   -------------------------------------------------------------------------- */
.btn { border-radius: 999px; padding-left: 1.7vw; padding-right: 2.1vw; }
.btn--sm { padding: 0.5rem 1.7rem 0.5rem 1.3rem; }
.btn--ghost, .btn--red, .btn-mini, .auth__submit, .live__search, .search__input, .chip, .pill-owner, .pill-blocked, .modal__side .pill, .player__mode, .player__live, .nowcard__live, .account__sub .role, .live__group, .field input, .invite-result input, .storage-form input[type=number], .opt select { border-radius: 999px; }
.btn-mini { padding: 6px 14px; }
.field input, .invite-result input { padding-left: 16px; padding-right: 16px; }
.nav__link { padding: 6px 14px; border-radius: 999px; transition: background .2s, color .2s; }
.nav__link.is-active { background: rgba(255,255,255,.14); }
.nav__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.card, .card__img, .notif__art, .episode__thumb, .live__info-art, .nowcard, .gprog, .dl, .invite-row, .invite-result, .storage-form .rule, .storage-form .radio, .member__watch .stat, .members__alerts, .next-up, .notif__panel, .avatar, .avatar--big, .profile-tile .avatar, .avatar-picker .avatar, .auth__error, .auth__ok, .live__info, .guide { border-radius: 10px; }
.slider__handle--next { border-radius: 10px 0 0 10px; }
.slider__handle--prev { border-radius: 0 10px 10px 0; }
.hero__maturity { border-radius: 6px 0 0 6px; }

/* --------------------------------------------------------------------------
   Detail screen: More Like This grid
   -------------------------------------------------------------------------- */
.modal__similar { padding: 0 48px 48px; }
.modal__similar h3 { font-size: 1.5em; margin: 1.6em 0 0.8em; }
.similar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.simcard { background: #2f2f2f; border-radius: 10px; overflow: hidden; cursor: pointer; transition: background .15s, transform .15s; display: flex; flex-direction: column; }
.simcard:hover, .simcard:focus-within { background: #3a3a3a; }
.simcard__art { position: relative; aspect-ratio: 16 / 9; background: #1a1a1a; }
.simcard__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.simcard__seasons { position: absolute; top: 10px; right: 12px; color: #fff; font-size: 14px; text-shadow: 0 1px 3px #000; }
.simcard__title { position: absolute; left: 12px; bottom: 10px; right: 12px; color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simcard__meta { display: flex; align-items: center; gap: 8px; padding: 14px 14px 0; color: #bcbcbc; font-size: 13px; }
.simcard__meta .badge-outline { font-size: 12px; }
.simcard__meta .round { margin-left: auto; width: 2.2em; height: 2.2em; }
.simcard__desc { padding: 10px 14px 16px; color: #d2d2d2; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .similar { grid-template-columns: repeat(2, 1fr); } .modal__similar { padding: 0 24px 32px; } }
@media (max-width: 560px) { .similar { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Card pop-out: plays the episode you are on (downloaded titles), Netflix style
   -------------------------------------------------------------------------- */
.preview__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; background: #000; }
.preview.is-playing .preview__video { opacity: 1; }
.preview.is-playing .preview__img { opacity: 0; }
.preview__mute { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.4); color: #fff; display: none; align-items: center; justify-content: center; }
.preview.is-playing .preview__mute { display: flex; }
.preview__mute:hover { background: rgba(255,255,255,.2); }
.preview__mute .icon-muted { display: none; }
.preview__mute.is-muted .icon-muted { display: block; }
.preview__mute.is-muted .icon-sound { display: none; }
.preview__kind { color: #bcbcbc; }
.card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; z-index: 3; }
.preview .round:focus-visible { outline: 2px solid #fff; }
/* Sound was refused by the browser until the first click: make the speaker easy to spot. */
@keyframes mute-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }
.preview__mute.is-muted { animation: mute-nudge 1.6s ease-out infinite; }

/* --------------------------------------------------------------------------
   Trailers (YouTube, chromeless) in the pop-out, the show window and the billboard
   -------------------------------------------------------------------------- */
.yt { position: absolute; inset: 0; overflow: hidden; background: #000; opacity: 0; transition: opacity .5s; z-index: 1; }
.yt.is-playing { opacity: 1; }
.yt iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1.36); pointer-events: none; border: 0; }
.preview__yt { z-index: 1; }
.preview__media-title, .preview__mute { z-index: 2; }
.modal__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; background: #000; }
.modal.is-media .modal__video.is-playing { opacity: 1; }
.modal.is-media .modal__backdrop { opacity: 0; transition: opacity .6s; }
.modal__hero-shade, .modal__hero-content { z-index: 2; }
.modal__mute { position: absolute; right: 3em; bottom: 2.4em; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; }
.modal__mute:hover { background: rgba(255,255,255,.2); }
.modal__mute .icon-muted { display: none; }
.modal__mute.is-muted .icon-muted { display: block; }
.modal__mute.is-muted .icon-sound { display: none; }
.modal__mute.is-muted { animation: mute-nudge 1.6s ease-out infinite; }
.hero__yt { z-index: 0; }
.hero__vignette-side, .hero__vignette-bottom { z-index: 1; }
.hero.is-trailer .hero__image { opacity: 0; animation: none; }
/* YouTube shows its title bar for the first seconds of any embed: keep a dark band over it until it fades. */
.yt.is-starting::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26%; background: linear-gradient(#000 55%, rgba(0,0,0,0)); z-index: 2; }
.yt::after { content: ''; position: absolute; right: 0; bottom: 0; width: 34%; height: 18%; background: linear-gradient(to top left, rgba(0,0,0,.9), rgba(0,0,0,0) 70%); z-index: 2; }
.preview__yt iframe { transform: translate(-50%, -50%) scale(1.5); }
.modal__yt iframe { transform: translate(-50%, -50%) scale(1.42); }

/* --------------------------------------------------------------------------
   Profile screen showcase: new, top-rated releases cycling behind "Who's watching?"
   -------------------------------------------------------------------------- */
.profiles { position: relative; overflow: hidden; }
.profiles__show { position: absolute; inset: 0; z-index: 0; }
.profiles__show-img { position: absolute; inset: 0; background-size: cover; background-position: center 20%; opacity: 0; transition: opacity 1.4s ease; transform: scale(1.02); }
.profiles__show-img.is-visible { opacity: 1; animation: hero-zoom 16s ease-out forwards; }
.profiles__show-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 55%, rgba(20,20,20,.92) 78%, #141414 100%); }
.profiles__show-text { position: absolute; left: 50%; transform: translateX(-50%); bottom: 46%; width: min(92vw, 720px); text-align: center; z-index: 1; }
.profiles__show-kicker { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--text-dim); font-size: 12px; letter-spacing: 3px; font-weight: 700; margin-bottom: 6px; }
.profiles__show-text h2 { margin: 0; font-size: clamp(1.8rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; text-shadow: 2px 2px 10px rgba(0,0,0,.8); line-height: 1.05; }
.profiles__show-text p { margin: 8px 0 0; color: #e5e5e5; font-size: clamp(.95rem, 1.6vw, 1.2rem); text-shadow: 1px 1px 6px rgba(0,0,0,.8); }
.profiles.has-show { justify-content: flex-end; padding-bottom: 6vh; }
.profiles.has-show #profilesTitle, .profiles.has-show .profiles__grid, .profiles.has-show .profiles__actions, .profiles.has-show .auth__signout { position: relative; z-index: 1; }
.profiles.has-show #profilesTitle { font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: #cfcfcf; font-weight: 400; margin-bottom: .8em; }
@media (max-width: 700px) {
  .profiles__show-img { background-position: center top; }
  .profiles__show-text { bottom: 40%; }
}

/* --------------------------------------------------------------------------
   Wordmark: condensed lettering on a gentle curve, red with shading (header, sign-in, kicker)
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Bebas Neue'; src: url('/fonts/BebasNeue-Regular.ttf') format('truetype'); font-display: swap; }
.wordmark { display: block; height: 34px; width: auto; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.wordmark__text { font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: 1px; }
.logo { line-height: 0; }
.logo--big .wordmark { height: 56px; }
.logo-mark { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; font-size: clamp(22px, 2.2vw, 36px); line-height: 1; }
@media (max-width: 700px) { .wordmark { height: 28px; } .logo--big .wordmark { height: 48px; } }
.profiles.has-show { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 4% 5vh; }
.profiles__show-text { position: relative; left: auto; bottom: auto; transform: none; margin: 0 auto 3vh; }
.profiles.has-show .profiles__grid { margin-bottom: 3vh; }
.profiles.has-show #profilesTitle { margin-bottom: 2vh; }

/* --------------------------------------------------------------------------
   Phone layout (Netflix app style): slim top bar with a title, floating tab bar, poster rows three
   across with red status strips, Search and My MYFLIX pages, and the show window as a full sheet.
   -------------------------------------------------------------------------- */
.header__title { display: none; }
.tabbar { display: none; }
.search-page { display: none; }
.me { display: none; }
.modal__tabs { display: none; }
.card__badge--add { }
@media (max-width: 799px) {
  :root { --cols: 3; --gap: 2vw; }
  body.has-tabbar { padding-bottom: 92px; }
  /* top bar */
  .header__inner { padding: 0 16px; gap: 10px; }
  .header__title { display: block; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.3px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wordmark { height: 22px; }
  .search, .profile { display: none !important; }
  /* floating tab bar */
  .tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(28,28,28,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 6px 30px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.08); }
  .tabbar__btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 8px 10px; border: 0; border-radius: 999px; background: transparent; color: #bdbdbd; font: inherit; font-size: 11px; }
  .tabbar__btn.is-active { background: rgba(255,255,255,.12); color: #fff; }
  .tabbar__avatar { width: 24px; height: 24px; border-radius: 6px; display: block; }
  /* rows: posters three across, rounded, red strip at the bottom for what is new */
  .rail__head { padding: 0 16px; }
  .card { border-radius: 6px; }
  .card__badge { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 3px 3px 0 0; font-size: 11px; padding: 3px 10px; white-space: nowrap; }
  .card__badge--add { display: none; }
  .card--poster .card__title { display: none; }
  .card__rank { font-size: 90px; -webkit-text-stroke: 2px #fff; color: #000; left: -14px; bottom: -8px; }
  /* search page */
  .search-page { display: block; padding: calc(var(--header-h) + 8px) 16px 0; }
  .search-page__title { font-size: 30px; font-weight: 800; margin: 6px 0 14px; }
  .search-page__field { display: flex; align-items: center; gap: 12px; background: #2b2b2b; border-radius: 10px; padding: 12px 16px; color: #aaa; }
  .search-page__field input { flex: 1; background: transparent; border: 0; color: #fff; font: inherit; font-size: 17px; outline: none; }
  .grid-view { padding-top: 12px; }
  .grid-view.is-list .grid-view__title { font-size: 20px; margin: 10px 16px; }
  .grid-view.is-list .grid { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
  .grid-view.is-list .card { display: grid; grid-template-columns: 146px 1fr 48px; align-items: center; gap: 14px; aspect-ratio: auto; height: 82px; background: transparent; border-radius: 0; overflow: visible; }
  .grid-view.is-list .card__img { width: 146px; height: 82px; border-radius: 4px; object-fit: cover; }
  .grid-view.is-list .card__fallback { width: 146px; height: 82px; }
  .grid-view.is-list .card__title { position: static; background: none; padding: 0; font-size: 16px; white-space: normal; }
  .grid-view.is-list .card__badge, .grid-view.is-list .card__kind, .grid-view.is-list .card__rank { display: none; }
  .grid-view.is-list .card::after { content: ''; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5l12 7-12 7z'/%3E%3C/svg%3E") center/18px no-repeat; }
  /* My MYFLIX page */
  .me { display: block; padding: calc(var(--header-h) + 10px) 0 24px; }
  .me__who { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: #fff; padding: 6px 16px 14px; font: inherit; }
  .me__avatar { width: 40px; height: 40px; border-radius: 8px; display: block; }
  .me__name { font-size: 28px; font-weight: 800; }
  .me__card { display: flex; align-items: center; gap: 16px; width: calc(100% - 32px); margin: 0 16px 20px; padding: 16px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; color: #fff; text-align: left; font: inherit; }
  .me__card-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .me__card-text b { font-size: 18px; }
  .me__card-text small { color: #9a9a9a; font-size: 13px; }
  .me__links { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 16px 0; }
  /* show window as a full sheet: video on top, then title, full-width Play, then the rest */
  .modal__hero { aspect-ratio: 16 / 9; }
  .modal__hero-content { position: static; padding: 14px 16px 0; }
  .modal__hero-shade { display: none; }
  .modal__title { font-size: 26px; margin-bottom: 8px; text-shadow: none; }
  .modal__hero-buttons { flex-direction: column; align-items: stretch; gap: 10px; }
  .modal__hero-buttons .btn { justify-content: center; border-radius: 6px; padding: 12px; font-size: 17px; width: 100%; }
  .modal__hero-buttons .round { width: auto; height: auto; border: 0; background: transparent; border-radius: 0; flex-direction: column; gap: 6px; font-size: 12px; color: #ddd; }
  .modal__hero-buttons .round::after { content: attr(aria-label); font-size: 12px; }
  .modal__hero-buttons .round svg { width: 26px; height: 26px; }
  .modal__hero-buttons .round.is-on { color: #fff; }
  .modal__hero-buttons { position: relative; }
  .modal__actions { display: flex; justify-content: space-around; padding: 6px 0 2px; }
  .modal__mute { right: 12px; bottom: 12px; width: 36px; height: 36px; }
  .modal__tabs { display: flex; gap: 22px; padding: 6px 16px 0; border-bottom: 1px solid #2a2a2a; margin: 8px 0 0; overflow-x: auto; }
  .modal__tab { background: none; border: 0; color: #8a8a8a; font: inherit; font-size: 17px; font-weight: 700; padding: 10px 0 12px; border-bottom: 3px solid transparent; white-space: nowrap; }
  .modal__tab.is-active { color: #fff; border-bottom-color: var(--red); }
  .modal.tab-similar .modal__episodes { display: none; }
  .modal.tab-episodes .modal__similar { display: none; }
  .modal__similar { padding: 0 16px 32px; }
  .modal__similar h3 { display: none; }
  .similar { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .simcard__art { aspect-ratio: 2 / 3; }
  .simcard__meta, .simcard__desc { display: none; }
  .simcard__title { font-size: 12px; }
  .episode { grid-template-columns: 130px 1fr; }
  .episode__side { grid-column: 1 / -1; }
}
@media (max-width: 799px) {
  .card__badge { font-size: 10px; padding: 3px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
  .card--continue .card__meta { font-size: 11px; }
}
@media (max-width: 799px) {
  .card__badge { display: inline-block; white-space: nowrap; max-width: calc(100% - 6px); box-sizing: border-box; font-size: 9.5px; font-weight: 800; }
}
@media (max-width: 799px) {
  :root { --cols: 1; } /* poster rows work out to three across on a phone */
  .me__rails .rail__head { padding-left: 16px; }
}
@media (max-width: 799px) {
  /* show sheet: the media sits in a 16:9 band at the top; everything else flows below it */
  .modal__hero { aspect-ratio: auto; padding-top: calc(100vw * 0.5625); }
  .modal__backdrop, .modal__video, .modal__yt { position: absolute; top: 0; left: 0; width: 100%; height: calc(100vw * 0.5625); }
  .modal__mute { top: calc(100vw * 0.5625 - 46px); bottom: auto; }
  .modal__hero-content { position: static; padding: 14px 16px 4px; }
  .modal__hero-buttons { display: flex; flex-wrap: wrap; gap: 10px 0; }
  .modal__hero-buttons .btn { flex: 0 0 100%; }
  .modal__hero-buttons .round { flex: 1 1 0; padding: 8px 0; }
  .modal__hero-buttons .round--right { margin-left: 0; }
  .episode { grid-template-columns: 24px 128px 1fr; gap: 8px 12px; }
  .episode__num { font-size: 16px; }
  .episode__info h4 { font-size: 15px; }
  .episode__info p { font-size: 13px; }
  .episode__side { grid-column: 2 / -1; }
}
@media (max-width: 799px) {
  .modal__hero-buttons { flex-direction: row; }
  .modal__hero-buttons .round::after { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Show window, Netflix order: brand, title, meta line, white Play / grey Download, next episode, actions
   -------------------------------------------------------------------------- */
.btn--download { background: rgba(109,109,110,.75); color: #fff; }
.btn--download:hover { background: rgba(109,109,110,.5); }
.wordmark--brand { height: 20px; margin-bottom: 6px; width: auto; }
.modal__next { margin: 0 0 .8em; }
.modal__next b { display: block; font-size: 1.05em; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .3em; }
.modal__next p { margin: 0; color: #d2d2d2; }
/* partway: a bar and the time left under the buttons (Resume / Start Over) */
.modal__left { display: flex; align-items: center; gap: .7em; margin: .1em 0 .6em; color: #d2d2d2; font-size: .95em; }
.modal__left-bar { flex: 0 0 9em; height: 3px; background: rgba(255,255,255,.35); }
.modal__left-bar i { display: block; height: 100%; background: var(--red); }
/* Catch me up: the last few episodes you watched, in a quiet box under Up next. */
.modal__recap-btn { margin-top: .6em; }
.modal__recap { margin: 0 0 1em; padding: .9em 1.1em; background: #1f1f1f; border-radius: 8px; }
.modal__recap h4 { margin: 0 0 .6em; font-size: .85em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.recap__ep { margin-bottom: .7em; }
.recap__ep b { display: block; color: #fff; }
.recap__ep p { margin: .15em 0 0; color: #d2d2d2; font-size: .95em; line-height: 1.45; }
.recap__now { margin: .5em 0 0; color: var(--text-dim); font-style: italic; }
html.is-tv .modal__recap { font-size: 1.2vw; }
.modal__trailers { padding: 0 48px 48px; }
.modal__trailers h3 { font-size: 1.5em; margin: 1.6em 0 .8em; }
.trailers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.trailer { background: none; border: 0; padding: 0; color: #fff; text-align: left; font: inherit; cursor: pointer; }
.trailer__art { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #111; }
.trailer__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trailer__art::after { content: ''; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5l12 7-12 7z'/%3E%3C/svg%3E") center/24px no-repeat; }
.trailer:hover .trailer__art::after, .trailer:focus-visible .trailer__art::after { background-color: rgba(255,255,255,.25); }
.trailer__name { margin-top: 10px; font-size: 15px; }
.modal.tab-trailers .modal__episodes, .modal.tab-trailers .modal__similar { }
@media (max-width: 799px) {
  .wordmark--brand { height: 16px; margin-bottom: 4px; }
  .modal__hero-buttons .btn--download { background: #2b2b2b; }
  .modal.tab-trailers .modal__episodes, .modal.tab-trailers .modal__similar { display: none; }
  .modal.tab-episodes .modal__trailers, .modal.tab-similar .modal__trailers { display: none; }
  .modal__trailers { padding: 0 16px 32px; }
  .modal__trailers h3 { display: none; }
  .trailers { grid-template-columns: 1fr; gap: 16px; }
  .modal__title { margin-bottom: 6px; }
  .modal__meta { margin-bottom: 10px; }
}
@media (max-width: 799px) {
  /* notifications: a full-width sheet under the top bar instead of a box hanging off the bell */
  .notif__panel { position: fixed; left: 10px; right: 10px; top: calc(var(--header-h) + 6px); width: auto; max-width: none; max-height: 72vh; border-radius: 12px; }
  .notif__panel::before, .notif__panel::after { display: none; }
  .notif__empty { padding: 28px 18px; text-align: center; }
  .tabbar__btn { min-width: 68px; padding: 8px 6px; }
  .tabbar__btn span { white-space: nowrap; }
}
@media (max-width: 799px) {
  .modal__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .modal__title-row .modal__title { margin: 0; flex: 1; min-width: 0; }
  .modal__title-row .round { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid #777; background: rgba(42,42,42,.8); }
}
@media (max-width: 799px) {
  /* plain + beside the title, no ring */
  .modal__title-row .round { border: 0; background: transparent; width: 40px; height: 40px; }
  .modal__title-row .round:hover { background: transparent; }
  /* owner's remove: a quiet text line at the bottom of the sheet */
  .modal__footer { padding: 8px 16px 40px; }
  .modal__footer .round { width: auto; height: auto; border: 0; background: transparent; border-radius: 0; color: #8a8a8a; font-size: 13px; gap: 8px; padding: 10px 0; }
  .modal__footer .round::after { content: 'Remove from MYFLIX'; }
  .modal__footer .round svg { width: 18px; height: 18px; }
}
@media (max-width: 799px) {
  .modal__title-row .round + .round { margin-left: -4px; }
  .modal__title-row #modalRemove { color: #bdbdbd; }
}
/* Top 10 tag and short descriptions in the show window */
.modal__top10 { display: flex; align-items: center; gap: 10px; margin: 0 0 .8em; font-weight: 700; }
.modal__top10 .top10-box { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 4px; background: var(--red); color: #fff; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .3px; }
.modal__top10 .top10-box b { font-size: 12px; }
.modal__overview.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.modal__more { background: none; border: 0; color: #bdbdbd; font: inherit; font-size: .92em; font-weight: 700; padding: 4px 0 10px; cursor: pointer; }
@media (max-width: 799px) {
  /* With a next episode named, the episode summary is the description (as in the app). */
  .modal.has-next .modal__overview, .modal.has-next .modal__more { display: none; }
  .modal__next p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* --------------------------------------------------------------------------
   TV mode (Fire TV app, TV browsers): the 10-foot layout. Everything is sized from the screen width so it
   reads from the sofa whatever the stick's resolution; a bold white focus ring follows the remote.
   -------------------------------------------------------------------------- */
html.is-tv { --cols: 6; --gutter: 5%; --gap: 0.7vw; --header-h: 6.5vw; }
html.is-tv body { font-size: 1.5vw; }
html.is-tv, html.is-tv * { cursor: none !important; }
html.is-tv :focus { outline: .25vw solid #fff; outline-offset: .2vw; }
html.is-tv .slider__handle, html.is-tv .rail__pager, html.is-tv .rail__explore, html.is-tv .hero__dots, html.is-tv .tabbar, html.is-tv .me,
html.is-tv .footer, html.is-tv .search, html.is-tv #btnFullscreen, html.is-tv .volume, html.is-tv .modal__close, html.is-tv .preview__actions,
html.is-tv .simcard__meta .round, html.is-tv .profile__caret { display: none !important; }
html.is-tv .notice { font-size: 1.2vw; }

/* top bar: profile and bell on the left, the sections, the wordmark on the right */
html.is-tv .header { height: var(--header-h); background: linear-gradient(to bottom, rgba(0,0,0,.85) 10%, rgba(0,0,0,0)); }
html.is-tv .header__inner { gap: 1.6vw; }
html.is-tv .logo { order: 3; margin-left: auto; }
html.is-tv .wordmark { height: 3vw; }
html.is-tv .nav { order: 2; gap: .3vw; }
html.is-tv .nav__link { font-size: 1.55vw; padding: .45vw 1.3vw; color: #bcbcbc; }
html.is-tv .nav__link.is-active { color: #fff; background: none; font-weight: 700; }
html.is-tv .nav__link:focus { background: #fff; color: #000; outline: none; }
html.is-tv .header__right { order: 1; margin-left: 0; flex-direction: row-reverse; gap: 1.4vw; }
html.is-tv .header .avatar, html.is-tv .profile__switch .avatar { width: 3.2vw; height: 3.2vw; border-radius: .5vw; }
html.is-tv .header .avatar::before, html.is-tv .header .avatar::after, html.is-tv .profile__switch .avatar::before, html.is-tv .profile__switch .avatar::after { width: .5vw; height: .6vw; top: 1vw; border-radius: .15vw; }
html.is-tv .header .avatar::before, html.is-tv .profile__switch .avatar::before { left: .9vw; }
html.is-tv .header .avatar::after, html.is-tv .profile__switch .avatar::after { right: .9vw; }
html.is-tv .profile__btn:focus { outline: none; }
html.is-tv .profile__btn:focus .avatar { outline: .3vw solid #fff; outline-offset: .25vw; }
html.is-tv .bell { padding: .4vw; border-radius: 50%; }
html.is-tv .bell:focus { background: #fff; color: #000; outline: none; }
html.is-tv .bell svg { width: 2.4vw; height: 2.4vw; }
html.is-tv .bell__badge { font-size: 1vw; min-width: 1.6vw; height: 1.6vw; line-height: 1.6vw; padding: 0 .4vw; border-radius: .8vw; top: -.2vw; right: -.4vw; }
html.is-tv .profile__dropdown { left: 0; right: auto; min-width: 22vw; padding: .8vw 0; border-radius: .6vw; }
html.is-tv .profile__dropdown::before { left: 1.2vw; right: auto; }
html.is-tv .profile__item, html.is-tv .profile__switch { font-size: 1.3vw; padding: .7vw 1.4vw; gap: 1vw; }
html.is-tv .profile__item:focus, html.is-tv .profile__switch:focus { background: #fff; color: #000; outline: none; text-decoration: none; }
html.is-tv .notif__panel { left: -1vw; right: auto; width: 42vw; max-width: none; max-height: 70vh; font-size: 1.25vw; border-radius: .8vw; }
html.is-tv .notif__panel::before { left: 2vw; right: auto; }
html.is-tv .notif__head { font-size: 1.4vw; padding: 1vw 1.4vw; }
html.is-tv .notif__link { font-size: 1.1vw; }
html.is-tv .notif__link:focus { color: #fff; text-decoration: underline; outline: none; }
html.is-tv .notif__item { grid-template-columns: 9vw 1fr; gap: 1vw; padding: .9vw 1.4vw; }
html.is-tv .notif__item:focus { background: #333; outline: none; }
html.is-tv .notif__art { width: 9vw; height: 5.06vw; }
html.is-tv .notif__empty { font-size: 1.2vw; padding: 2.4vw 1.4vw; }

/* billboard */
html.is-tv .hero { height: 56.25vw; min-height: 0; max-height: 82vh; }
html.is-tv .hero__content { width: 44%; bottom: 28%; }
html.is-tv .hero__kicker { font-size: 1.1vw; letter-spacing: .3vw; }
html.is-tv .logo-mark { font-size: 2.2vw; }
html.is-tv .hero__title { font-size: 5vw; }
html.is-tv .hero.is-playing .hero__title { font-size: 3.6vw; }
html.is-tv .hero__overview { font-size: 1.5vw; margin: 1.2vw 0 1.6vw; }
html.is-tv .btn { font-size: 1.6vw; padding: .6vw 2.2vw .6vw 1.6vw; gap: .7vw; }
html.is-tv .btn svg { width: 2vw; height: 2vw; }
html.is-tv .btn:focus { outline: .3vw solid #fff; outline-offset: .35vw; transform: scale(1.05); }
html.is-tv .btn--info:focus, html.is-tv .btn--download:focus, html.is-tv .btn--ghost:focus, html.is-tv .btn--red:focus { background: #fff; color: #000; }
html.is-tv .hero__maturity { font-size: 1.1vw; bottom: 34%; }
html.is-tv .hero__mute { width: 3.4vw; height: 3.4vw; right: calc(var(--gutter) + 9vw); bottom: 34%; }
html.is-tv .hero__mute svg { width: 1.8vw; height: 1.8vw; }
html.is-tv .hero__mute:focus { background: #fff; color: #000; outline: none; }

/* rows: six across, the focused card lifts with a white ring, and slides to the left edge of its row */
html.is-tv .rails { margin-top: -10vw; padding-bottom: 6vw; }
html.is-tv .rail { margin: 2.2vw 0; }
html.is-tv .rail__head { margin-bottom: .5vw; }
html.is-tv .rail__title { font-size: 1.7vw; font-weight: 600; cursor: default; }
html.is-tv .slider__track { padding-top: 1.4vw; padding-bottom: 1.4vw; margin: -1.2vw 0; scroll-padding-left: var(--gutter); }
html.is-tv .card { border-radius: .6vw; transition: transform .18s var(--ease), box-shadow .18s; }
html.is-tv .card:focus { outline: .3vw solid #fff; outline-offset: .15vw; transform: scale(1.1); z-index: 6; box-shadow: 0 .6vw 2vw rgba(0,0,0,.7); }
html.is-tv .grid .card:focus, html.is-tv .similar .simcard:focus { transform: scale(1.06); }
html.is-tv .card__title { font-size: 1.15vw; padding: 2vw .8vw .6vw; }
html.is-tv .card__badge { font-size: 1vw; padding: .25vw .7vw; border-radius: 0 0 .5vw 0; letter-spacing: .03vw; }
html.is-tv .card__fallback { font-size: 1.3vw; padding: .8vw; }
html.is-tv .card__kind { font-size: .9vw; padding: .2vw .6vw; }
html.is-tv .card__rank { font-size: 7.5vw; -webkit-text-stroke: .2vw #666; }
html.is-tv .card--poster .card__rank { font-size: 6.5vw; -webkit-text-stroke: .2vw #bbb; }
html.is-tv .card--continue .card__play { width: 4.6vw; height: 4.6vw; border-width: .2vw; }
html.is-tv .card--continue .card__play svg { width: 2.2vw; height: 2.2vw; }
html.is-tv .card__meta { padding: .5vw .7vw .3vw; }
html.is-tv .card__meta-row { font-size: 1vw; }
html.is-tv .card__left { font-size: .9vw; }
html.is-tv .card__icon { width: 2.2vw; height: 2.2vw; }
html.is-tv .card__icon svg { width: 1.4vw; height: 1.4vw; }
html.is-tv .card__meta .card__progress { height: .3vw; margin: .4vw 0; }

/* pop-out: plays in place; OK on the card opens the window */
html.is-tv .preview { font-size: 1.25vw; border-radius: .8vw; box-shadow: 0 1vw 3vw rgba(0,0,0,.8); }
html.is-tv .preview__body { padding: .9em 1em 1em; }
html.is-tv .preview__mute { width: 3vw; height: 3vw; right: 1vw; bottom: 1vw; }
html.is-tv .preview__mute svg { width: 1.5vw; height: 1.5vw; }

/* show window */
html.is-tv .modal__dialog { width: 88vw; margin: 3vh auto 6vh; border-radius: 1vw; font-size: 1.35vw; }
html.is-tv .modal__hero-content { left: 3vw; right: 3vw; bottom: 2.4vw; }
html.is-tv .wordmark--brand { height: 2vw; margin-bottom: .6vw; }
html.is-tv .modal__title { font-size: 3.4vw; margin-bottom: .4em; }
html.is-tv .modal__hero-buttons { gap: .9vw; }
html.is-tv .btn--sm { font-size: 1.5vw; padding: .5vw 2vw .5vw 1.5vw; }
html.is-tv .round { width: 3.2vw; height: 3.2vw; border-width: .18vw; }
html.is-tv .round svg { width: 1.6vw; height: 1.6vw; }
html.is-tv .round:focus { background: #fff; color: #000; border-color: #fff; outline: none; transform: scale(1.08); }
html.is-tv .modal__mute { width: 3.4vw; height: 3.4vw; right: 3vw; bottom: 2.4vw; }
html.is-tv .modal__mute svg { width: 1.8vw; height: 1.8vw; }
html.is-tv .modal__mute:focus { background: #fff; color: #000; outline: none; }
html.is-tv .modal__body { padding: 1.6vw 3vw 1vw; gap: 2.5vw; }
html.is-tv .modal__meta { font-size: 1.25vw; gap: .8vw; }
html.is-tv .modal__overview { font-size: 1.35vw; }
html.is-tv .modal__next b { font-size: 1.3vw; }
html.is-tv .modal__left { font-size: 1.15vw; }
html.is-tv .modal__left-bar { flex-basis: 12vw; height: .3vw; }
html.is-tv .modal__side { font-size: 1.15vw; }
html.is-tv .modal__moods { font-size: 1.2vw; }
html.is-tv .modal__cast { padding: 0 3vw .6vw; }
html.is-tv .modal__cast h3 { font-size: 1.4vw; }
html.is-tv .cast { gap: 1.2vw; }
html.is-tv .cast__person { width: 9vw; font-size: 1.05vw; }
html.is-tv .cast__person img, html.is-tv .cast__person .cast__blank { width: 6.5vw; height: 6.5vw; }
html.is-tv .modal__more { font-size: 1.15vw; padding: .3vw .6vw .6vw; }
html.is-tv .modal__more:focus { color: #fff; outline: .2vw solid #fff; }
html.is-tv .modal__top10 .top10-box { width: 2.6vw; height: 2.6vw; font-size: .8vw; border-radius: .3vw; }
html.is-tv .modal__top10 .top10-box b { font-size: 1vw; }
html.is-tv .modal__episodes { padding: .5vw 3vw 2.5vw; }
html.is-tv .modal__episodes-head h3 { font-size: 1.8vw; }
html.is-tv .season-select { font-size: 1.3vw; padding: .5vw 2.8vw .5vw 1.1vw; background-size: 1.5vw; background-position: right .7vw center; }
html.is-tv .season-select:focus { outline: .25vw solid #fff; outline-offset: .2vw; }
html.is-tv .season-tools { font-size: 1.15vw; padding: .8vw 0 .2vw; }
html.is-tv .btn--ghost { font-size: 1.2vw; padding: .45vw 1.2vw; }
html.is-tv .btn--ghost svg { width: 1.3vw; height: 1.3vw; }
html.is-tv .episode { grid-template-columns: 2.6vw 11vw 1fr auto; gap: 1.2vw; padding: 1vw .9vw; border-radius: .7vw; }
html.is-tv .episode:focus { background: #3a3a3a; outline: .25vw solid #fff; outline-offset: -.25vw; }
html.is-tv .episode.is-playable:focus .play-ring { opacity: 1; }
html.is-tv .episode__num { font-size: 1.6vw; }
html.is-tv .episode__info h4 { font-size: 1.3vw; }
html.is-tv .episode__info p { font-size: 1.1vw; }
html.is-tv .play-ring span { width: 3vw; height: 3vw; border-width: .18vw; }
html.is-tv .play-ring span svg { width: 1.5vw; height: 1.5vw; }
html.is-tv .chip { font-size: .95vw; padding: .15vw .6vw; }
html.is-tv .modal__similar, html.is-tv .modal__trailers { padding: 0 3vw 3vw; }
html.is-tv .modal__similar h3, html.is-tv .modal__trailers h3 { font-size: 1.8vw; }
html.is-tv .similar { grid-template-columns: repeat(3, 1fr); gap: 1.2vw; }
html.is-tv .simcard { border-radius: .8vw; }
html.is-tv .simcard:focus { outline: .3vw solid #fff; outline-offset: .1vw; background: #3a3a3a; }
html.is-tv .simcard__title { font-size: 1.3vw; }
html.is-tv .simcard__seasons, html.is-tv .simcard__meta, html.is-tv .simcard__desc { font-size: 1.1vw; }
html.is-tv .trailers { gap: 1.4vw; }
html.is-tv .trailer:focus { outline: none; }
html.is-tv .trailer:focus .trailer__art { outline: .3vw solid #fff; outline-offset: .15vw; }
html.is-tv .trailer__name { font-size: 1.2vw; }
html.is-tv .modal__footer .round { width: 3.2vw; height: 3.2vw; }

/* search as its own page, results six across */
html.is-tv .search-page { display: block; padding: calc(var(--header-h) + 1.5vw) var(--gutter) 0; }
html.is-tv .search-page__title { font-size: 2.6vw; font-weight: 800; margin: .5vw 0 1.2vw; }
html.is-tv .search-page__field { display: flex; align-items: center; gap: 1vw; background: #2b2b2b; border-radius: .8vw; padding: 1vw 1.4vw; color: #aaa; width: 60vw; }
html.is-tv .search-page__field:focus-within { outline: .3vw solid #fff; }
html.is-tv .search-page__field svg { width: 2vw; height: 2vw; }
html.is-tv .search-page__field input { flex: 1; background: transparent; border: 0; color: #fff; font: inherit; font-size: 1.8vw; outline: none; }
html.is-tv .grid-view { padding: calc(var(--header-h) + 1.5vw) var(--gutter) 4vw; }
html.is-tv #searchPage:not([hidden]) + .grid-view { padding-top: 1.5vw; }
html.is-tv .grid-view__title { font-size: 1.8vw; margin-bottom: 1vw; }
html.is-tv .grid { grid-template-columns: repeat(6, 1fr); gap: .9vw; padding: 1vw 0; }
html.is-tv .grid-view__empty { font-size: 1.3vw; }

/* live tv */
html.is-tv .live { padding: calc(var(--header-h) + 1.5vw) var(--gutter) 4vw; }
html.is-tv .live__search { font-size: 1.3vw; padding: .6vw 1.2vw; min-width: 24vw; }
html.is-tv .live__search:focus { border-color: #fff; outline: .25vw solid #fff; }
html.is-tv .live__groups { gap: .7vw; padding: .3vw 0 .6vw; margin-bottom: 1.2vw; }
html.is-tv .live__group { font-size: 1.3vw; padding: .6vw 1.6vw; }
html.is-tv .live__group:focus { background: #fff; color: #000; border-color: #fff; outline: none; }
html.is-tv .live__now { gap: 1vw; padding: .6vw 0 1.2vw; }
html.is-tv .nowcard { width: 20vw; border-radius: .7vw; }
html.is-tv .nowcard:focus { transform: scale(1.06); outline: .3vw solid #fff; }
html.is-tv .nowcard__live { font-size: .9vw; padding: .25vw .6vw; top: .7vw; right: .7vw; }
html.is-tv .nowcard__logo { height: 2vw; max-width: 8vw; bottom: 3vw; left: .9vw; }
html.is-tv .nowcard__chan { font-size: 1.1vw; bottom: 3vw; left: .9vw; }
html.is-tv .nowcard__title { font-size: 1.15vw; bottom: 1.4vw; left: .9vw; right: .9vw; }
html.is-tv .nowcard__bar { bottom: .7vw; left: .9vw; right: .9vw; height: .3vw; }
html.is-tv .live__info { padding: 1.4vw; gap: 1.6vw; min-height: 0; border-radius: .8vw; }
html.is-tv .live__info-art { width: 22vw; border-radius: .5vw; }
html.is-tv .live__info-chan { font-size: 1vw; gap: .7vw; }
html.is-tv .live__info-chan img { height: 1.5vw; }
html.is-tv .live__info-title { font-size: 2vw; margin: .4vw 0 .2vw; }
html.is-tv .live__info-time { font-size: 1.15vw; }
html.is-tv .live__info-desc { font-size: 1.2vw; margin: .6vw 0 .8vw; }
html.is-tv .guide { --cell-w: 16vw; max-height: calc(100vh - 14vw); border-radius: .8vw; }
html.is-tv .guide__corner { font-size: 1.15vw; padding: .8vw 1.2vw; }
html.is-tv .guide__ticks { height: 3vw; }
html.is-tv .guide__tick { font-size: 1.1vw; top: .8vw; height: 1.5vw; line-height: 1.5vw; padding-left: .6vw; }
html.is-tv .gcell { padding: .7vw 1vw; gap: .8vw; }
html.is-tv .gcell:focus { background: #fff; color: #000; outline: none; }
html.is-tv .gcell:focus .gcell__num { color: #444; }
html.is-tv .gcell img { height: 2.8vw; width: 6vw; }
html.is-tv .gcell__name { font-size: 1.1vw; }
html.is-tv .gcell__num { font-size: 1vw; }
html.is-tv .gtrack { height: 5vw; }
html.is-tv .gprog { padding: .6vw .9vw; border-radius: .5vw; top: .4vw; bottom: .4vw; }
html.is-tv .gprog:focus { background: #fff; color: #000; outline: none; }
html.is-tv .gprog:focus .gprog__time { color: #444; }
html.is-tv .gprog__title { font-size: 1.15vw; }
html.is-tv .gprog__time { font-size: 1vw; }
html.is-tv .gprog__live { font-size: .85vw; }

/* player: left/right scrub when nothing is focused (the bar thickens), down reaches the buttons */
html.is-tv .player:focus { outline: none; }
html.is-tv .player__top { padding: 2vw 5vw; }
html.is-tv .player__back svg { width: 3vw; height: 3vw; }
html.is-tv .player__bottom { padding: 0 5vw 2.5vw; }
html.is-tv .player__progress { height: .4vw; padding: .8vw 0; margin-bottom: .6vw; }
html.is-tv .player__buffered, html.is-tv .player__played { height: .4vw; top: .8vw; }
html.is-tv .player:focus .player__progress { height: .8vw; padding: .6vw 0; }
html.is-tv .player:focus .player__buffered, html.is-tv .player:focus .player__played { height: .8vw; top: .6vw; }
html.is-tv .player__knob { width: 1.6vw; height: 1.6vw; margin-top: -.8vw; right: -.8vw; }
html.is-tv .player:focus .player__knob { transform: scale(1); }
html.is-tv .player__controls { gap: 2vw; }
html.is-tv .player__group { gap: 1.4vw; }
html.is-tv .player .icon-btn { padding: .5vw; border-radius: 50%; }
html.is-tv .player .icon-btn svg { width: 3vw; height: 3vw; }
html.is-tv .player .icon-btn:focus { outline: none; background: #fff; color: #000; transform: scale(1.1); }
html.is-tv .player__time { font-size: 1.3vw; }
html.is-tv .player__title { font-size: 1.4vw; }
html.is-tv .btn--next { font-size: 1.3vw; padding: .5vw 1.4vw .5vw 1vw; }
html.is-tv .btn--next svg { width: 1.6vw; height: 1.6vw; }
/* On a TV, OK presses Skip Intro while it shows, so it is lit like a focused button. */
html.is-tv .skip-intro { right: 5vw; bottom: 5vw; font-size: 1.4vw; padding: .8vw 1.8vw; border-width: .15vw; border-radius: .4vw; background: #fff; color: #000; border-color: #fff; }
html.is-tv .player.show-ui .skip-intro { bottom: 10vw; }
html.is-tv .credits-next { right: 5vw; bottom: 5vw; gap: 1.2vw; }
html.is-tv .player.show-ui .credits-next { bottom: 10vw; }
html.is-tv .credits-next button { font-size: 1.4vw; padding: .8vw 1.8vw; border-radius: .4vw; }
html.is-tv .credits-next button:focus { outline: .22vw solid #fff; outline-offset: .3vw; }
html.is-tv .next-up { right: 5vw; bottom: 9vw; padding: 1.4vw 1.6vw; min-width: 26vw; max-width: 40vw; border-radius: .8vw; }
html.is-tv .next-up__label { font-size: 1vw; }
html.is-tv .next-up__title { font-size: 1.3vw; }
html.is-tv .next-up__actions .btn { font-size: 1.2vw; padding: .5vw 1.3vw .5vw 1vw; }
html.is-tv .next-up--still { right: auto; bottom: auto; }
html.is-tv .player__paused-kicker { font-size: 1.1vw; }
html.is-tv .player__paused-title { font-size: 4vw; }
html.is-tv .player__paused-ep { font-size: 1.7vw; }
html.is-tv .player__paused-desc { font-size: 1.3vw; }
html.is-tv .player__error { font-size: 1.6vw; padding: 1.6vw 2.4vw; border-radius: .8vw; }
html.is-tv .spinner { width: 5vw; height: 5vw; border-width: .35vw; }
html.is-tv .player__live { font-size: 1vw; padding: .25vw .7vw; }
html.is-tv .player__center .flash { width: 7vw; height: 7vw; }
html.is-tv .player__center .flash svg { width: 3.4vw; height: 3.4vw; }

/* sign in and profiles */
html.is-tv .auth__top { padding: 2vw var(--gutter); }
html.is-tv .logo--big .wordmark { height: 4.5vw; }
html.is-tv .auth__panel { width: 40vw; padding: 3vw 4vw 3.4vw; border-radius: .8vw; margin: 2vh auto 4vh; }
html.is-tv .auth__panel--wide { width: 56vw; }
html.is-tv .auth__panel h1 { font-size: 2.4vw; margin-bottom: 1.8vw; }
html.is-tv .auth__sub { font-size: 1.3vw; margin: -.8vw 0 1.8vw; }
html.is-tv .field { margin-bottom: 1.2vw; }
html.is-tv .field input { height: 4.4vw; font-size: 1.4vw; padding: 1.7vw 1.3vw .5vw; }
html.is-tv .field input:focus { outline: .3vw solid #fff; outline-offset: .1vw; background: #454545; }
html.is-tv .field span { font-size: 1.3vw; top: 1.4vw; left: 1.3vw; }
html.is-tv .field input:focus + span, html.is-tv .field input:not(:placeholder-shown) + span { top: .5vw; font-size: .95vw; }
html.is-tv .auth__submit { height: 3.8vw; font-size: 1.4vw; margin-top: 1.2vw; }
html.is-tv .auth__submit:focus { background: #fff; color: #000; outline: none; }
html.is-tv .auth__submit--inline { padding: 0 2.2vw; }
html.is-tv .auth__links { font-size: 1.1vw; gap: 1vw; }
html.is-tv .auth__links a:focus { color: #fff; text-decoration: underline; outline: none; }
html.is-tv .auth__hint { font-size: 1.05vw; }
html.is-tv .auth__error, html.is-tv .auth__ok { font-size: 1.15vw; padding: .8vw 1.2vw; }
html.is-tv .auth__check { font-size: 1.2vw; }
html.is-tv .auth__check input { width: 1.4vw; height: 1.4vw; }
html.is-tv .profiles.has-show #profilesTitle { font-size: 1.8vw; }
html.is-tv .profile-tile { width: 11vw; font-size: 1.3vw; }
html.is-tv .profile-tile .avatar { border-width: .3vw; border-radius: .7vw; }
html.is-tv .profile-tile:focus { color: #fff; outline: none; }
html.is-tv .profile-tile:focus .avatar { border-color: #fff; transform: scale(1.06); }
html.is-tv .btn-outline { font-size: 1.2vw; padding: .7vw 2vw; }
html.is-tv .btn-outline:focus { color: #000; background: #fff; border-color: #fff; outline: none; }
html.is-tv .auth__signout { font-size: 1.1vw; }
html.is-tv .auth__signout:focus { color: #fff; outline: none; }
html.is-tv .profiles__show-text h2 { font-size: 3.6vw; }
html.is-tv .profiles__show-text p { font-size: 1.2vw; }
html.is-tv .profiles__show-kicker { font-size: 1.1vw; }
html.is-tv .avatar--big { width: 9vw; height: 9vw; }
html.is-tv .avatar-picker .avatar { width: 4.6vw; height: 4.6vw; border-width: .3vw; }
html.is-tv .avatar-picker .avatar:focus { border-color: #fff; outline: none; transform: scale(1.06); }
html.is-tv .editor__label { font-size: 1.2vw; }

/* account and downloads pages */
html.is-tv .account, html.is-tv .downloads { padding: calc(var(--header-h) + 1.5vw) var(--gutter) 4vw; max-width: none; }
html.is-tv .account__tab { font-size: 1.3vw; padding: .8vw 1.4vw; }
html.is-tv .account__tab:focus { color: #fff; border-bottom-color: #fff; outline: none; }
html.is-tv .btn-mini { font-size: 1.1vw; padding: .5vw 1.2vw; }
html.is-tv .btn-mini:focus { background: #fff; color: #000; border-color: #fff; outline: none; }
html.is-tv .dev { grid-template-columns: 3.6vw 1fr auto; gap: 1.2vw; padding: 1vw 1.4vw; }
html.is-tv .dev__icon { width: 3.6vw; height: 3.6vw; }
html.is-tv .opt select, html.is-tv .storage-form input[type=number] { font-size: 1.15vw; padding: .4vw .8vw; }
html.is-tv .dl { padding: 1.2vw 1.6vw; }
html.is-tv .hero__mute { display: none; } /* the remote never reaches it; the billboard simply plays muted on a TV */

/* --------------------------------------------------------------------------
   Members page: each household's profiles, one row each, open for details and editing; tidy on phones
   -------------------------------------------------------------------------- */
.member__top .member__email { color: var(--text-dim); font-size: 0.9em; }
.member__profiles { margin: 10px 0 4px; border-top: 1px solid #2a2a2a; padding-top: 10px; }
.member__profiles-head { display: flex; align-items: baseline; gap: 10px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.member__profiles-head span { color: var(--muted); font-weight: 400; font-size: 0.85em; }
.prow { border-radius: 10px; }
.prow.is-open { background: #202020; }
.prow__main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; background: none; border: 0; color: inherit; text-align: left; font: inherit; border-radius: 10px; }
.prow__main:hover { background: #242424; }
.prow__main .avatar { width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto; }
.prow__main .avatar::before, .prow__main .avatar::after { width: 6px; height: 8px; top: 12px; }
.prow__main .avatar::before { left: 11px; } .prow__main .avatar::after { right: 11px; }
.prow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prow__name { color: #fff; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.prow__sub { color: var(--text-dim); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__caret { color: #777; flex: 0 0 auto; transition: transform .2s; }
.prow.is-open .prow__caret { transform: rotate(180deg); }
.prow__detail { padding: 4px 12px 12px 62px; }
.prow__loading { color: var(--muted); font-size: 0.9em; padding: 6px 0; }
.member__watch--inner { margin: 4px 0 10px; }
.member__watch--inner .stat { min-width: 90px; padding: 6px 10px; }
.prow__list { font-size: 0.88em; color: var(--text-dim); margin: 8px 0; }
.prow__list b { display: block; color: #fff; font-weight: 600; margin-bottom: 4px; }
.prow__list div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px solid #262626; }
.prow__list div span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow__list div span:last-child { color: #8c8c8c; flex: 0 0 auto; }
.prow__add { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; background: none; border: 0; color: var(--text-dim); font: inherit; border-radius: 10px; text-align: left; }
.prow__add:hover { background: #242424; color: #fff; }
.avatar--add { width: 40px; height: 40px; border-radius: 8px; background: #2a2a2a; color: #bbb; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 300; }
.avatar--add::before, .avatar--add::after { display: none; }
.pform { background: #202020; border-radius: 10px; padding: 14px 14px 12px; margin: 8px 0 4px; }
.pform .field { margin-bottom: 10px; }
.pform .field input { height: 46px; padding-top: 18px; }
.pform .field span { top: 14px; }
.pform .field input:focus + span, .pform .field input:not(:placeholder-shown) + span { top: 5px; }
.avatar-picker--small { gap: 8px; margin: 6px 0 10px; }
.avatar-picker--small .avatar { width: 40px; height: 40px; border-width: 2px; }
.avatar-picker--small .avatar::before, .avatar-picker--small .avatar::after { width: 6px; height: 8px; top: 12px; }
.avatar-picker--small .avatar::before { left: 11px; } .avatar-picker--small .avatar::after { right: 11px; }
.pform .auth__check { margin: 0 0 10px; }
@media (max-width: 799px) {
  .account { padding-left: 12px; padding-right: 12px; }
  .account__tabs { overflow-x: auto; gap: 0; }
  .account__tab { padding: 10px 12px; white-space: nowrap; }
  .member { padding: 14px 14px 12px; }
  .member__top { gap: 8px 10px; }
  .member__top .member__email { flex-basis: 100%; font-size: 0.85em; }
  .member__stats { gap: 4px 14px; font-size: 0.82em; }
  .member__watch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .member__watch .stat { min-width: 0; padding: 8px 10px; }
  .member__watch .stat b { font-size: 1em; }
  .member__watch .stat span { font-size: 0.7em; }
  .member__watch .stat--wide { grid-column: 1 / -1; }
  .member__watch--inner { grid-template-columns: repeat(3, 1fr); }
  .prow__main { padding: 8px 4px; }
  .prow__detail { padding-left: 4px; }
  .member__controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .member__controls .opt { display: flex; justify-content: space-between; align-items: center; }
  .member__controls .opt select { margin-left: 10px; max-width: 60%; }
  .member__custom { flex-direction: column; align-items: stretch; }
  .member__actions { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .member__actions .btn-mini { padding: 9px 8px; text-align: center; }
  .member__actions .btn-mini:last-child { grid-column: 1 / -1; }
  .invite-form__opts .opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .invite-form__opts .opt select { margin-left: 0; max-width: 100%; }
  .invite-row { font-size: 0.85em; }
}
.prow__more { display: block; width: 100%; margin-top: 6px; padding: 8px; background: #262626; border: 0; border-radius: 8px; color: #ddd; font: inherit; font-size: 0.9em; cursor: pointer; }
.prow__more:hover { background: #333; color: #fff; }
.member__activity .prow__more { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Sign in with a code: the TV shows a QR and six characters, the phone approves at myflix.dev/link
   -------------------------------------------------------------------------- */
.auth__code { display: flex; gap: 22px; align-items: center; background: #1c1c1c; border-radius: 12px; padding: 18px; margin: -4px 0 18px; }
.auth__code-qr { flex: 0 0 auto; width: 132px; height: 132px; background: #000; border-radius: 10px; padding: 8px; }
.auth__code-qr svg { width: 100%; height: 100%; display: block; }
.auth__code-text { min-width: 0; }
.auth__code-text h2 { margin: 0 0 4px; font-size: 1.1em; color: #fff; }
.auth__code-text p { margin: 0; color: #b3b3b3; font-size: .92em; line-height: 1.4; }
.auth__code-text b { color: #fff; }
.auth__code-code { font-size: 2.2em; font-weight: 800; letter-spacing: .18em; color: #fff; margin: 8px 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.auth__code-sub { color: #8c8c8c !important; font-size: .82em !important; }
.auth__or { text-align: center; color: #777; font-size: .9em; margin: 0 0 14px; }
.field--code input { font-size: 26px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; text-align: center; padding-left: 16px; }
.field--code span { left: 0; right: 0; text-align: center; }
html.is-tv .auth__panel.has-code { width: 62vw; padding: 2.6vw 3.4vw 3vw; }
html.is-tv .auth__code { gap: 2.2vw; padding: 1.6vw; margin-bottom: 1.6vw; border-radius: .8vw; }
html.is-tv .auth__code-qr { width: 15vw; height: 15vw; padding: .7vw; border-radius: .7vw; }
html.is-tv .auth__code-text h2 { font-size: 1.7vw; }
html.is-tv .auth__code-text p { font-size: 1.25vw; }
html.is-tv .auth__code-code { font-size: 4.6vw; letter-spacing: .3vw; margin: .6vw 0 .3vw; }
html.is-tv .auth__code-sub { font-size: 1.05vw !important; }
html.is-tv .auth__or { font-size: 1.15vw; margin-bottom: 1.2vw; }
@media (max-width: 799px) {
  .auth__code { flex-direction: column; text-align: center; }
  .auth__code-qr { width: 150px; height: 150px; }
}

/* TV: pop-outs appear and leave at once, and nothing pulses for attention (there is no mouse to click) */
html.is-tv .preview { transition: opacity .18s ease; transform: none !important; }
html.is-tv .preview__mute.is-muted, html.is-tv .modal__mute.is-muted { animation: none; }
html.is-tv, html.is-tv .slider__track { scroll-behavior: auto; }
html.is-tv .card { transition: none; }
html.is-tv .card:focus { box-shadow: none; }
html.is-tv .hero__image.is-visible { animation: none; transform: none; }
/* TV pop-out: while the preview is on its way, a thin red bar runs along the bottom of the picture */
html.is-tv .preview:not(.is-playing) .preview__media::after { content: ''; position: absolute; left: 0; bottom: 0; height: .3vw; width: 28%; background: var(--red); border-radius: .15vw; z-index: 3; animation: preview-wait 1.1s linear infinite; }
@keyframes preview-wait { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
.card__badge--dl { background: #b8860b; }
.btn--ghost-danger { border-color: rgba(229,9,20,.6); color: #ff8a8a; }
.btn--ghost-danger:hover { background: rgba(229,9,20,.15); }
/* TV: rows off the screen are not laid out until needed (hundreds of cards otherwise weigh on every move) */
html.is-tv .rail { content-visibility: auto; contain-intrinsic-size: auto 14vw; }

/* --------------------------------------------------------------------------
   Picker sheet: seasons, what to remove. A dark sheet of pill rows in the app's own style.
   -------------------------------------------------------------------------- */
.picker { position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; animation: fade-in .18s ease; }
.picker__sheet { width: min(440px, 92vw); max-height: 86vh; overflow-y: auto; background: #181818; border-radius: 16px; padding: 20px 18px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.7); animation: rise .22s var(--ease); }
.picker__title { margin: 0 0 6px; font-size: 1.25em; font-weight: 800; color: #fff; }
.picker__sub { margin: 0 0 14px; color: #a8a8a8; font-size: .92em; line-height: 1.45; }
.picker__list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.picker__opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; background: #262626; border: 2px solid transparent; border-radius: 12px; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.picker__opt:hover { background: #333; }
.picker__opt:focus { outline: none; border-color: #fff; background: #333; }
.picker__label { flex: 1; font-weight: 700; }
.picker__detail { color: #9a9a9a; font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.picker__check { color: var(--red); flex: 0 0 auto; }
.picker__opt.is-current { border-color: rgba(var(--red-rgb), .6); }
.picker__opt.is-danger .picker__label { color: #ff8a8a; }
.picker__opt.is-muted { opacity: .55; }
.season-select { display: inline-flex; align-items: center; gap: 8px; background: #242424; border: 1px solid #5a5a5a; color: #fff; padding: .45em 1em .45em 1.1em; font-size: 1em; font-weight: 600; border-radius: 999px; cursor: pointer; }
.season-select:hover { border-color: #fff; }
.season-select svg { opacity: .8; }
@media (max-width: 799px) {
  .picker { align-items: flex-end; }
  .picker__sheet { width: 100%; max-height: 80vh; border-radius: 18px 18px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); animation: sheet-up .25s var(--ease); }
  .picker__opt { padding: 15px 16px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
html.is-tv .picker__sheet { width: 46vw; padding: 2vw 1.8vw 1.6vw; border-radius: 1.2vw; }
html.is-tv .picker__title { font-size: 2vw; }
html.is-tv .picker__sub { font-size: 1.25vw; margin-bottom: 1.2vw; }
html.is-tv .picker__list { gap: .7vw; }
html.is-tv .picker__opt { padding: 1vw 1.4vw; border-radius: .9vw; border-width: .25vw; font-size: 1.4vw; }
html.is-tv .picker__opt:focus { border-color: #fff; background: #fff; color: #000; }
html.is-tv .picker__opt:focus .picker__detail { color: #444; }
html.is-tv .picker__opt:focus .picker__check { color: #000; }
html.is-tv .picker__detail { font-size: 1.1vw; }
html.is-tv .season-select { font-size: 1.3vw; padding: .5vw 1.1vw .5vw 1.3vw; }
html.is-tv .season-select:focus { outline: .25vw solid #fff; outline-offset: .2vw; }

/* Episode rows: watched / watching, and the one you are on */
.chip--watched { display: inline-flex; align-items: center; gap: 4px; color: #bdbdbd; border-color: #555; }
.chip--watching { color: #fff; background: var(--red); border-color: var(--red); }
.chip--next { color: #111; background: #fff; border-color: #fff; }
.episode.is-watched .episode__thumb img { opacity: .55; }
.episode.is-current { background: #262626; box-shadow: inset 3px 0 0 var(--red); }
.episode.is-current .episode__num { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   TV sign-in in two steps, and the on-page keyboard for Search
   -------------------------------------------------------------------------- */
.auth__choice { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.auth__choice-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 16px 18px; background: #262626; border: 2px solid transparent; border-radius: 12px; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.auth__choice-btn b { font-size: 1.1em; }
.auth__choice-btn span { color: #9a9a9a; font-size: .9em; }
.auth__choice-btn:focus, .auth__choice-btn:hover { border-color: #fff; background: #333; outline: none; }
html.is-tv .auth__panel.mode-choose .auth__code, html.is-tv .auth__panel.mode-choose .auth__or, html.is-tv .auth__panel.mode-choose form { display: none !important; }
html.is-tv .auth__panel.mode-code .auth__or, html.is-tv .auth__panel.mode-code form { display: none !important; }
html.is-tv .auth__panel.mode-email .auth__code, html.is-tv .auth__panel.mode-email .auth__or { display: none !important; }
html.is-tv .auth__panel.mode-choose { width: 40vw; }
html.is-tv .auth__choice { gap: 1vw; }
html.is-tv .auth__choice-btn { padding: 1.4vw 1.6vw; border-radius: 1vw; border-width: .25vw; }
html.is-tv .auth__choice-btn b { font-size: 1.6vw; }
html.is-tv .auth__choice-btn span { font-size: 1.15vw; }
html.is-tv .auth__panel.mode-code { width: 62vw; }
html.is-tv .auth__panel.mode-code .auth__code { margin: 0; padding: 2vw; }
html.is-tv .auth__panel.mode-code .auth__code-qr { width: 20vw; height: 20vw; }
html.is-tv .auth__panel.mode-code .auth__code-code { font-size: 5.4vw; }
html.is-tv .auth__panel.mode-code h1, html.is-tv .auth__panel.mode-choose h1 { font-size: 2.4vw; }
/* keyboard: a column of keys on the left of Search, results on the right */
.tvkeys { display: none; }
html.is-tv .search-page { position: fixed; left: var(--gutter); top: calc(var(--header-h) + 1vw); width: 30vw; padding: 0; z-index: 5; }
html.is-tv .search-page__title { font-size: 2.2vw; margin: 0 0 .8vw; }
html.is-tv .search-page__field { width: 100%; padding: .8vw 1.2vw; }
html.is-tv .search-page__field input { font-size: 1.6vw; }
html.is-tv .tvkeys { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5vw; margin-top: 1vw; }
html.is-tv .tvkey { height: 3.6vw; border-radius: .5vw; background: #262626; border: .2vw solid transparent; color: #fff; font: inherit; font-size: 1.5vw; font-weight: 600; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: .4vw; cursor: pointer; }
html.is-tv .tvkey:focus { background: #fff; color: #000; border-color: #fff; outline: none; }
html.is-tv .tvkey--wide { grid-column: span 3; text-transform: none; font-weight: 500; font-size: 1.25vw; }
html.is-tv .tvkey--mic { grid-column: span 6; }
html.is-tv .tvkey svg { width: 1.6vw; height: 1.6vw; }
html.is-tv #searchPage:not([hidden]) ~ .grid-view { margin-left: 34vw; padding-top: calc(var(--header-h) + 1vw); min-height: 100vh; }
html.is-tv #searchPage:not([hidden]) ~ .grid-view .grid { grid-template-columns: repeat(4, 1fr); }
html.is-tv #searchPage:not([hidden]) ~ .grid-view .grid-view__title { font-size: 1.5vw; }
.card__badge--soon { background: var(--red); }
/* Card labels: grey for everything, red only for Coming soon */
.card__badge, .card__badge--new, .card__badge--dl, .card__badge--muted { background: rgba(38,38,38,.9); color: #d6d6d6; }
.card__badge--soon { background: var(--red); color: #fff; }
/* Tags in Netflix's pill style, centred at the TOP of the card: our cards carry the title along the bottom edge,
   so a bottom tag would sit on it. Phone poster cards have no title text, so there the tag stays at the bottom
   as on Netflix's phone app. The split one pairs a red "New Season" with a white date. */
.card__badge { top: 0; bottom: auto; left: 50%; transform: translateX(-50%); border-radius: 0 0 4px 4px; padding: 3px 10px; font-size: clamp(10px, 0.75vw, 12px); white-space: nowrap; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
@media (max-width: 799px) { .card--poster .card__badge { top: auto; bottom: 0; border-radius: 3px 3px 0 0; } }
.card__badge--split { padding: 0; display: inline-flex; background: #fff; color: #000; overflow: hidden; }
.card__badge--split b, .card__badge--split i { font-style: normal; font-weight: 700; padding: 3px 8px; }
.card__badge--split b { background: var(--red); color: #fff; }
.card__badge--split i { background: #fff; color: #000; }
html.is-tv .card__badge { border-radius: 0 0 .4vw .4vw; padding: .25vw .8vw; font-size: .95vw; }
html.is-tv .card__badge--split { padding: 0; }
html.is-tv .card__badge--split b, html.is-tv .card__badge--split i { padding: .25vw .55vw; }

/* --------------------------------------------------------------------------
   One look for messages everywhere: a dark card with a coloured edge, white text. Green edge = done,
   amber = something to fix. Finished steps get a check mark and a red button, like the rest of the app.
   -------------------------------------------------------------------------- */
.auth__error, .auth__ok { background: #262626; border: 0; border-left: 4px solid #ffb020; border-radius: 10px; color: #fff; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.auth__ok { border-left-color: var(--green); color: #e5e5e5; }
.auth__done { text-align: center; padding: 8px 0 4px; }
.auth__done-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #000; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.auth__done h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: #fff; }
.auth__done p { margin: 0 0 18px; color: #b3b3b3; line-height: 1.45; }
.auth__done .auth__submit { margin-top: 0; }
.field--code input { background: #262626; }
html.is-tv .auth__done h2 { font-size: 2.2vw; }
html.is-tv .auth__done p { font-size: 1.3vw; }
html.is-tv .auth__done-icon { width: 5vw; height: 5vw; }

/* "Tap for sound" over a silent preview (phones start every trailer muted) */
.sound-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.7); color: #fff; font: inherit; font-weight: 700; font-size: 15px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
.sound-pill:hover { background: rgba(255,255,255,.2); }
@media (max-width: 799px) { .sound-pill { top: calc(100vw * 0.5625 / 2); } .modal__mute.is-muted { animation: none; } }
html.is-tv .sound-pill { display: none !important; }
.sp-actions__right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sp-actions__right .sp-lib__find { margin-right: 0; }
.sp-psuggest { margin: -8px -8px 8px; }
.sp-psuggest[hidden] { display: none; }
.sp-psuggest .sp-drop__item:active { background: #2a2a2a; }
.sp-psuggest .sp-drop__title { padding-top: 4px; }
/* page gradients end in the colour behind them (TV pages sit on black, phone pages on #121212) */
html.is-tv .sp--tv { --m-panel: #000; }
.sp--phone { --m-panel: #121212; }
/* the Liked Songs picture keeps its heart in the middle wherever it is drawn */
.sp-liked, .sp-tile__art > .sp-liked, .sp-libitem__art > .sp-liked, .sp-card__art > .sp-liked, .sp-hero__art > .sp-liked, .sp-drop__art > .sp-liked, .sp-recentrow__art > .sp-liked { display: flex; align-items: center; justify-content: center; }

/* ---- 14 Oct evening: library sizes, the fuller now-playing panel, music videos ---- */
.sp--desk { --libw: var(--libw-user, clamp(300px, 25vw, 420px)); grid-template-columns: var(--libw) minmax(0, 1fr) 0; }
.sp--desk.has-side { grid-template-columns: var(--libw) minmax(0, 1fr) clamp(300px, 24vw, 420px); }
.sp-lib { position: relative; }
.sp-lib .sp-chip { padding: 5px 12px; font-size: 13.5px; }
.sp-lib__grip { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
.sp-lib__grip::after { content: ""; position: absolute; right: 2px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: transparent; transition: background .15s; }
.sp-lib__grip:hover::after, body.sp-resizing .sp-lib__grip::after { background: #8a8a8a; }
body.sp-resizing, body.sp-resizing * { cursor: col-resize !important; user-select: none !important; }
.sp-page--library .sp-lib__find input { width: 220px; }
.sp-np__media { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #222; cursor: pointer; }
.sp-np__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-np__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,.8)); }
.sp-np__over { position: absolute; left: 16px; right: 12px; bottom: 14px; display: flex; align-items: flex-end; gap: 8px; }
.sp-np__over .sp-np__text { flex: 1; min-width: 0; }
.sp-np__over .sp-np__title { font-size: 24px; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.sp-np__over .sp-np__artist { color: rgba(255,255,255,.85); }
.sp-np__video { margin-top: 16px; border-radius: 8px; overflow: hidden; background: #242424; }
.sp-np__video[hidden], .sp-np__lyrics[hidden], .sp-np__videos[hidden], .sp-np__bio[hidden], .sp-about__bio[hidden] { display: none; }
.sp-np__vhead { display: flex; align-items: center; padding: 12px 16px; }
.sp-np__vhead .sp-link { margin-left: auto; }
.sp-np__vframe { position: relative; aspect-ratio: 16 / 9; background: #000; }
.sp-np__vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.sp-np__vclick { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.sp-np__lyrics { margin-top: 16px; padding: 16px; border-radius: 8px; background: color-mix(in srgb, var(--hdr, #4a1a1a) 85%, #000); cursor: pointer; }
.sp-np__lyhead { display: block; margin-bottom: 10px; font-size: 16px; }
.sp-np__lyrics p { margin: 0 0 6px; font-size: 20px; font-weight: 800; line-height: 1.25; }
.sp-np__lyrics .sp-link { display: inline-block; margin: 6px 0 0; color: rgba(255,255,255,.8); }
.sp-np__videos { margin-top: 8px; }
.sp-np__vrow { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.sp-vcard { flex: 0 0 200px; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.sp-vcard__img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #222; }
.sp-vcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.sp-vcard:hover .sp-vcard__img img { transform: scale(1.04); }
.sp-vcard__time { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.75); font-size: 11px; }
.sp-vcard__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 13px; line-height: 1.3; }
.sp-np__aboutimg { position: relative; height: 230px; background: #333 center 25% / cover no-repeat; }
.sp-np__aboutimg span { position: absolute; left: 16px; top: 14px; font-weight: 800; font-size: 16px; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.sp-np__bio { margin: 4px 0 6px; color: var(--m-dim); font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sp-about__bio { max-width: 560px; margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-video { position: fixed; inset: 0; z-index: 230; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.86); color: #fff; }
.sp-video[hidden] { display: none; }
.sp-video__box { width: min(1100px, 100%); }
.sp-video__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 18px; }
.sp-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.sp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-hero__title, .sp-artist__name, .sp-banner__title { overflow-wrap: normal; }
/* music videos come from MYFLIX's own copies (like the show and movie previews) */
.sp-np__vframe video, .sp-np__vposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-np__vwait { position: absolute; left: 12px; bottom: 10px; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.7); font-size: 12px; }
.sp-np__vwait[hidden] { display: none; }
.sp-vcard__dl { position: absolute; left: 6px; bottom: 6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.7); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.sp-video__frame video, .sp-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.sp-video__poster { object-fit: cover; opacity: .35; filter: blur(2px); }
.sp-video__wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 16px; font-weight: 700; }
.sp-video__wait .sp-loading { padding: 0 0 8px; }
.sp-hero__meta .ic { vertical-align: -2px; color: var(--m-accent); }

/* ---- Spotify's artist page (14 Oct evening): the photo stays, the page slides over it; bigger rows and cards ---- */
.sp-shelf__row, .sp-grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.sp-card__title { font-size: 16px; }
.sp-card__sub { font-size: 14px; }
.sp-page--artist .sp-artist { position: sticky; top: 0; z-index: 0; height: clamp(300px, 46vh, 480px); }
.sp-page--artist .sp-artist::after { content: ""; position: absolute; inset: 0; background: #000; opacity: calc(var(--fade, 0) * .75); pointer-events: none; }
.sp-artist__body { position: relative; z-index: 1; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 8px; background: linear-gradient(color-mix(in srgb, var(--hdr, #333) 55%, #000) 0, var(--m-panel) 420px); }
.sp-stickybar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 16px; height: 64px; margin: 0 calc(-1 * var(--pad)) -64px; padding: 0 var(--pad); background: color-mix(in srgb, var(--hdr, #333) 55%, #000); opacity: 0; pointer-events: none; transition: opacity .2s; }
.sp-stickybar.is-on { opacity: 1; pointer-events: auto; }
.sp-stickybar .sp-play { width: 44px; height: 44px; }
.sp-stickybar__title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-stickybar--top { margin-bottom: -64px; }
.sp-page--artist .sp-actions { padding-top: 24px; }
.sp-popular .sp-row { height: 64px; }
.sp-popular .sp-row__art { width: 56px; height: 56px; }
.sp-popular .sp-row__title { font-size: 17px; }
.sp-popular .sp-tracks { --cols: 40px minmax(0, 1fr) 36px 56px 36px; }
.sp-disco .sp-chips { margin: 4px 0 4px; }
.sp-liked-by[hidden] { display: none; }
.sp-likedby { display: inline-flex; align-items: center; gap: 16px; padding: 8px 16px 8px 8px; border-radius: 8px; cursor: pointer; }
.sp-likedby:hover { background: rgba(255,255,255,.08); }
.sp-likedby__art { position: relative; width: 96px; height: 96px; border-radius: 50%; flex: none; }
.sp-likedby__art img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sp-likedby__badge { position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--m-accent); display: flex; align-items: center; justify-content: center; border: 2px solid var(--m-panel); }
.sp-likedby b { display: block; font-size: 18px; }
.sp-likedby small { color: var(--m-dim); font-size: 14px; }
html.is-tv .sp-page--artist .sp-artist { position: relative; }
html.is-tv .sp-stickybar { display: none; }
@media (max-width: 799px) {
  .sp-shelf__row .sp-card { flex-basis: 156px; }
  .sp-stickybar__title { font-size: 18px; }
  .sp-popular .sp-row { height: 64px; }
}

/* ---- Made for you: Discover Weekly, Release Radar, On Repeat (designed covers in MYFLIX colours) ---- */
.sp-smart { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 9% 10%; box-sizing: border-box; color: #fff; overflow: hidden; }
.sp-smart::after { content: ""; position: absolute; right: -18%; bottom: -18%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 10px solid rgba(255,255,255,.18); }
.sp-smart--discover { background: linear-gradient(135deg, var(--m-accent) 0%, #7a0f3d 55%, #2a0b4d 100%); }
.sp-smart--radar { background: linear-gradient(135deg, #0f766e 0%, #134e4a 50%, #1e1b4b 100%); }
.sp-smart--repeat { background: linear-gradient(135deg, #b45309 0%, #9a3412 50%, #4c0519 100%); }
/* Claude's two mixes from the taste read (20 Oct): close to their taste, and the stretch */
.sp-smart--taste { background: linear-gradient(135deg, #1d4ed8 0%, #312e81 55%, #1e1b4b 100%); }
.sp-smart--stretch { background: linear-gradient(135deg, #15803d 0%, #166534 45%, #134e4a 100%); }
/* Walkout Music (20 Oct): BarOps lifters' picks; a small tag on the songs lifters picked */
[class*="sp-smart--walkout"] { background: linear-gradient(135deg, #b91c1c 0%, #450a0a 55%, #0a0a0a 100%); }
/* Remixes & covers (20 Oct): what each take is, a quiet outlined tag */
.sp-take { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; border: 1px solid rgba(255,255,255,.45); color: #e5e5e5; font-size: 10px; font-style: normal; font-weight: 700; line-height: 14px; vertical-align: 1px; text-transform: uppercase; letter-spacing: 0.02em; }
.sp-pick { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; background: #f5c518; color: #111; font-size: 10px; font-style: normal; font-weight: 700; line-height: 16px; vertical-align: 1px; text-transform: uppercase; letter-spacing: 0.02em; }
.sp-smart__by { font-size: clamp(9px, .8vw, 12px); font-weight: 900; letter-spacing: .12em; color: rgba(255,255,255,.85); }
.sp-smart__title { position: relative; z-index: 1; font-size: clamp(16px, 1.9vw, 30px); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; }
.sp-hero__art .sp-smart__title { font-size: clamp(22px, 2.6vw, 40px); }
.sp-tile .sp-smart__title, .sp-libitem .sp-smart__title, .sp-drop .sp-smart__title, .sp-recentrow .sp-smart__title, .sp-qrow .sp-smart__title, .sp-tile .sp-smart__by, .sp-libitem .sp-smart__by { display: none; }
.sp-tile__art > .sp-smart, .sp-libitem__art > .sp-smart, .sp-card__art > .sp-smart, .sp-hero__art > .sp-smart { border-radius: inherit; }
html.is-tv .sp-smart__title { font-size: 1.5vw; }
@media (max-width: 799px) { .sp-smart__title { font-size: 17px; } .sp-hero__art .sp-smart__title { font-size: 30px; } }

/* phones: Your Library's search, sort and grid buttons share one line (the search box gives way) */
@media (max-width: 799px) {
  .sp-lib__sort { white-space: nowrap; flex: none; }
  .sp-page--library .sp-lib__find { flex: 1; min-width: 0; }
  .sp-page--library .sp-lib__find input { width: 100%; min-width: 0; }
}

/* phones: the page never slides sideways; text boxes at 16 px so iPhones do not zoom into them; Spotify's round back
   button on pages opened from a tab (swipe from the left edge or pull down from the top does the same) */
.sp-back { display: none; }
.sp-import__info { min-width: 0; }
@media (max-width: 799px) {
  html, body { overflow-x: clip; overscroll-behavior-x: none; }
  html.in-music { overscroll-behavior-y: none; }
  input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"], input:not([type]), textarea { font-size: 16px; }
  .sp-back { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 14px); left: 12px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; }
  .sp-back[hidden] { display: none; }
  .sp--phone.has-back .sp-stickybar { padding-left: calc(var(--pad) + 46px); }
  .sp--phone.has-back .sp-page--import, .sp--phone.has-back .sp-page--showall { padding-top: calc(env(safe-area-inset-top) + 52px); }
  .sp-import__found { flex-direction: column; align-items: stretch; gap: 18px; }
  .sp-import__art { width: 220px; height: 220px; align-self: center; }
  .sp-import__info .sp-actions { justify-content: space-between; }
  .sp-shelf__row { scroll-padding-inline: 16px; } /* rows snap to the page margin, not the screen edge */
}
@supports not (overflow: clip) { @media (max-width: 799px) { html { overflow-x: hidden; } } }

/* phones: a row title stays on one line (cut short with ... if it ever is too long) */
@media (max-width: 799px) {
  .rail__title { display: block; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail__title .rail__explore { display: none; }
}

/* TV: "Now Playing" in the top bar while a song is loaded (the remotes have no play/pause key) */
.nav__link--np { display: inline-flex; align-items: center; gap: .5em; }
.nav__link--np[hidden] { display: none; }
.nav__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: .9em; }
.nav__eq i { width: 3px; height: 45%; border-radius: 1px; background: var(--red); }
.nav__eq i:nth-child(2) { height: 85%; }
.nav__link--np.is-playing .nav__eq i { animation: nav-eq .8s ease-in-out infinite alternate; }
.nav__link--np.is-playing .nav__eq i:nth-child(2) { animation-delay: -.4s; }
.nav__link--np.is-playing .nav__eq i:nth-child(3) { animation-delay: -.2s; }
@keyframes nav-eq { from { height: 20%; } to { height: 100%; } }
.sp-tvplay__more { display: none; }
html.is-tv .sp-tvplay__more { display: flex; margin-top: 2vw; }
html.is-tv .sp-tvplay__side .sp-full__foot { display: none; }
/* TV: just the moving bars in the top bar (the words show when it is highlighted), so the MYFLIX logo keeps its room */
html.is-tv .nav__link--np { gap: .6vw; }
html.is-tv .nav__link--np .nav__nplabel { display: none; }
html.is-tv .nav__link--np:focus .nav__nplabel { display: inline; }
html.is-tv .nav__eq { height: 1.4vw; gap: .25vw; }
html.is-tv .nav__eq i { width: .3vw; }

/* ---------------------------------------------------------------- app colour (Settings, per profile) */
html[data-accent="blue"]   { --red: #2f6fed; --red-hover: #3d7cff; --red-deep: #1d4fb8; --red-hi: #5b8cff; --red-dark: #173f94; --red-rgb: 47, 111, 237; }
html[data-accent="green"]  { --red: #1db954; --red-hover: #1ed760; --red-deep: #148a3e; --red-hi: #3ee07a; --red-dark: #0f6b30; --red-rgb: 29, 185, 84; }
html[data-accent="purple"] { --red: #8b5cf6; --red-hover: #9b70ff; --red-deep: #6d3fd6; --red-hi: #a685ff; --red-dark: #5530b0; --red-rgb: 139, 92, 246; }
html[data-accent="pink"]   { --red: #e91e8c; --red-hover: #f5329b; --red-deep: #b8146c; --red-hi: #ff4fae; --red-dark: #8f0f54; --red-rgb: 233, 30, 140; }
html[data-accent="orange"] { --red: #f26b1d; --red-hover: #ff7a2e; --red-deep: #c4510e; --red-hi: #ff8f4d; --red-dark: #9a3f0a; --red-rgb: 242, 107, 29; }
html[data-accent="teal"]   { --red: #0fb5ae; --red-hover: #14c9c1; --red-deep: #0b8a85; --red-hi: #3fd6cf; --red-dark: #086b67; --red-rgb: 15, 181, 174; }
html[data-accent="gold"]   { --red: #e3a008; --red-hover: #f0ad12; --red-deep: #b07c05; --red-hi: #ffc23d; --red-dark: #8a6104; --red-rgb: 227, 160, 8; }

/* ---------------------------------------------------------------- Settings page */
.settings { padding: calc(var(--header-h) + 30px) var(--gutter) 60px; min-height: 80vh; max-width: 900px; }
body.has-notice .settings { padding-top: calc(var(--header-h) + 84px); }
.settings__sub { margin: .3em 0 0; color: var(--text-dim); }
.settings__group { margin-top: 2.2em; }
.settings__h { margin: 0 0 .9em; font-size: 1.15rem; }
.settings__swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; padding: 0; border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; }
.swatch__dot { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sw); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); transition: transform .15s; }
.swatch__dot svg { opacity: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.swatch.is-on { color: #fff; font-weight: 700; }
.swatch.is-on .swatch__dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff; }
.swatch.is-on .swatch__dot svg { opacity: 1; }
.swatch:hover .swatch__dot { transform: scale(1.06); }
.settings__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 14px 0; border-top: 1px solid #262626; }
.settings__label { color: #fff; font-size: 1rem; }
.settings__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-pill { padding: 8px 16px; border: 1px solid #3a3a3a; border-radius: 999px; background: #1f1f1f; color: #ddd; font: inherit; font-size: 14px; cursor: pointer; }
.choice-pill.is-on { border-color: #fff; background: #fff; color: #000; font-weight: 700; }
.settings__note { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 799px) {
  .settings { padding: calc(var(--header-h) + 12px) 16px calc(120px + env(safe-area-inset-bottom)); }
  .settings__head .grid-view__title { display: none; }
  .settings__group { margin-top: 1.6em; }
  .settings__swatches { gap: 10px 6px; }
  .swatch { width: 80px; }
  .settings__row { flex-direction: column; align-items: flex-start; }
}
html.is-tv .settings { padding: calc(var(--header-h) + 1.5vw) var(--gutter) 4vw; max-width: none; }
html.is-tv .settings__sub { font-size: 1.2vw; }
html.is-tv .settings__h { font-size: 1.6vw; }
html.is-tv .settings__swatches { gap: 1.4vw; }
html.is-tv .swatch { width: 6vw; gap: .6vw; font-size: 1.1vw; }
html.is-tv .swatch__dot { width: 4.2vw; height: 4.2vw; }
html.is-tv .swatch:focus { outline: none; color: #fff; }
html.is-tv .swatch:focus .swatch__dot { transform: scale(1.12); box-shadow: 0 0 0 .25vw var(--bg), 0 0 0 .45vw #fff; }
html.is-tv .settings__label { font-size: 1.3vw; }
html.is-tv .choice-pill { padding: .6vw 1.4vw; font-size: 1.2vw; }
html.is-tv .choice-pill:focus { outline: .2vw solid #fff; outline-offset: .2vw; }
/* Settings: profile pictures in the swatch row (the face scales with the square) */
.swatch__pic { display: block; width: 52px; height: 52px; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); transition: transform .15s; }
.swatch__pic::before, .swatch__pic::after { width: 16%; height: 19%; top: 31%; border-radius: 3px; }
.swatch__pic::before { left: 28%; }
.swatch__pic::after { right: 28%; }
.swatch--pic.is-on .swatch__pic { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff; }
.swatch--pic:hover .swatch__pic { transform: scale(1.06); }
html.is-tv .swatch__pic { width: 4.2vw; height: 4.2vw; border-radius: .6vw; }
html.is-tv .swatch--pic:focus .swatch__pic { transform: scale(1.12); box-shadow: 0 0 0 .25vw var(--bg), 0 0 0 .45vw #fff; }
/* the picker's head: a cover beside the title when there is one (a song's menu) */
.picker__head.has-art { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.picker__head.has-art .picker__headtext { min-width: 0; }
.picker__head.has-art .picker__title { margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker__head.has-art .picker__sub { margin: 0; }
.picker__art { flex: none; width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: #282828; }
html.is-tv .picker__art { width: 4.6vw; height: 4.6vw; border-radius: .4vw; }
html.is-tv .picker__head.has-art { gap: 1.2vw; margin-bottom: 1.2vw; }
/* a song held down: no phone "save image" bubble, no text selection; a short confirmation in the song's own line */
.sp-row, .sp-qrow, .mbar, .sp-full__art, .sp-full__info { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.sp-row img, .sp-qrow img, .mbar img, .sp-full img { -webkit-touch-callout: none; }
.sp-row.is-held, .sp-qrow.is-held { background: rgba(255,255,255,.08); }
.sp-note { color: var(--m-accent); font-weight: 700; white-space: nowrap; }
html.is-tv .sp-tvplay__more { gap: 1vw; flex-wrap: wrap; }
/* the show window's Download button while its download runs: it fills up like a progress bar, then turns to Play */
.btn.is-filling { position: relative; overflow: hidden; isolation: isolate; }
.btn.is-filling::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--fill, 0%); background: var(--red); z-index: -1; transition: width .8s ease; }
.btn.is-filling.is-searching::before { width: 35%; opacity: .55; animation: dl-search 1.6s ease-in-out infinite; }
@keyframes dl-search { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
/* arranging the network strip (Google TV's "Arrange your Apps"): tiles wobble a little, the one being moved lifts with
   < > on its sides, PRESS TO MOVE / PRESS TO CONFIRM under the name, Done centred under the row */
.rail--studios .card--studio { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.rail--studios .studio__logo { -webkit-user-drag: none; pointer-events: none; }
.rail--studios.is-arranging .card--studio[data-studio]:not(.is-picked) { animation: tile-wobble .3s ease-in-out infinite alternate; }
.rail--studios.is-arranging .card--studio[data-studio]:nth-child(odd):not(.is-picked) { animation-delay: -.15s; }
@keyframes tile-wobble { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.rail--studios .card--studio.is-picked { position: relative; z-index: 3; transform: scale(1.08) translateY(-3px); box-shadow: 0 0 0 3px #fff, 0 12px 26px rgba(0,0,0,.6); }
.studio__hint { font-size: clamp(9px, .65vw, 11px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.studio__move { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 4px; pointer-events: none; }
.studio__move button { pointer-events: auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.studio__donebar { display: flex; justify-content: center; padding: 16px 0 6px; }
.studio__done { padding: 9px 30px; border: 0; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.studio__done:hover, .studio__done:focus { background: #fff; color: #000; outline: none; }
html.is-tv .studio__move button { width: 2.2vw; height: 2.2vw; font-size: 1.6vw; }
html.is-tv .studio__hint { font-size: .8vw; }
html.is-tv .studio__donebar { padding: 1.4vw 0 .4vw; }
html.is-tv .studio__done { padding: .7vw 2.6vw; font-size: 1.3vw; }
/* the network strip, Google TV style: just the logos (no grey box), bigger; the one you are on grows with a white ring */
.rail--studios .card, .rail--studios .card:hover, .rail--studios .card:focus, .rail--studios .card:focus-visible { background: none; border: 0; box-shadow: none; outline: none; overflow: visible; }
.rail--studios .card.is-current { outline: none; }
.rail--studios .studio__logo { height: 66%; border-radius: 22%; transition: transform .18s ease, box-shadow .18s ease; }
.rail--studios .card:hover .studio__logo, .rail--studios .card:focus .studio__logo, .rail--studios .card:focus-visible .studio__logo { transform: scale(1.1); box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(0,0,0,.6); }
.rail--studios .card.is-current .studio__logo { box-shadow: 0 0 0 3px var(--red), 0 8px 20px rgba(0,0,0,.55); }
.rail--studios .card--studio.is-picked { transform: none; box-shadow: none; }
.rail--studios .card--studio.is-picked .studio__logo { transform: scale(1.16) translateY(-4px); box-shadow: 0 0 0 3px #fff, 0 0 28px rgba(255,255,255,.35); }
.rail--studios .studio__name { color: #cfcfcf; }
.rail--studios .card:focus .studio__name, .rail--studios .card:hover .studio__name { color: #fff; }
html.is-tv .rail--studios .card:focus { outline: none; transform: none; box-shadow: none; }
html.is-tv .rail--studios .card:focus .studio__logo { transform: scale(1.14); box-shadow: 0 0 0 .25vw #fff, 0 0 2vw rgba(255,255,255,.3); }
@media (max-width: 799px) { .rail--studios .studio__logo { height: 62%; } }
/* search page: the voice button sits beside the search box */
.search-page__bar { display: flex; align-items: center; gap: 12px; }
.search-page__bar .search-page__field { flex: 1; min-width: 0; }
.search-page__mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #2b2b2b; color: #fff; cursor: pointer; }
.search-page__mic[hidden] { display: none; }
html.is-tv .search-page__bar { gap: 1vw; }
html.is-tv .search-page__mic { width: 4.6vw; height: 4.6vw; }
html.is-tv .search-page__mic svg { width: 2.2vw; height: 2.2vw; }
html.is-tv .search-page__mic:focus { background: #fff; color: #000; outline: none; transform: scale(1.08); }
/* the mic while it listens */
.search-page__mic.is-listening { background: var(--red); color: #fff; animation: mic-pulse 1s ease-in-out infinite alternate; }
@keyframes mic-pulse { from { box-shadow: 0 0 0 0 rgba(var(--red-rgb), .5); } to { box-shadow: 0 0 0 10px rgba(var(--red-rgb), 0); } }
/* network tiles: one fixed size for every tile, so the spacing is even (a larger logo file - MYFLIX's own Gaia,
   Hallmark and Wonder Project tiles - used to stretch its tile) */
.rail--studios .card { flex: 0 0 auto; width: 150px; min-width: 0; aspect-ratio: auto; padding: 8px 0 6px; gap: 8px; }
.rail--studios .studio__logo { width: 104px; height: 104px; max-width: none; }
@media (max-width: 799px) { .rail--studios .card { width: 92px; gap: 6px; } .rail--studios .studio__logo { width: 64px; height: 64px; } }
html.is-tv .rail--studios .card { flex: 0 0 auto; width: 12vw; gap: .6vw; padding: .6vw 0 .4vw; }
html.is-tv .rail--studios .studio__logo { width: 8.6vw; height: 8.6vw; }

/* My List: filter pills and the sort button under the title (14 Oct) */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -.2em 0 1.2em; }
.list-tools .settings__pills { gap: 8px; }
.list-tools__sort { display: inline-flex; align-items: center; gap: 4px; padding-right: 10px; }
@media (max-width: 799px) {
  .list-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
  .list-tools::-webkit-scrollbar { display: none; }
  .list-tools .settings__pills { flex-wrap: nowrap; }
  .list-tools .choice-pill { white-space: nowrap; flex: 0 0 auto; }
}
html.is-tv .list-tools { margin-bottom: 1.6vw; }
html.is-tv .list-tools__sort svg { width: 1.3vw; height: 1.3vw; }
/* Members: waiting invites under a small heading */
.invite-list__head { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: .9em; margin-top: 4px; }
#inviteOpen { margin-top: 2px; }

/* Phones: Video mode fills the whole player, as on Spotify (14 Oct). The video sits behind everything, darker at the
   top and bottom so the words and buttons stay readable; a small cover beside the song's name; the expand button
   (watch with sound) sits beside the Song / Video switch. */
.sp-full.sp-full--canvas { background: #000; }
.sp-full__art.is-video.sp-full__canvas { position: absolute; inset: 0; z-index: 0; width: auto; max-width: none; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.sp-full__art.is-video.sp-full__canvas::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.6) 0, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 46%, rgba(0,0,0,.82) 74%, #000 100%); }
.sp-full__canvas .sp-full__vwait { left: 50%; top: 40%; bottom: auto; z-index: 3; transform: translate(-50%, -50%); white-space: nowrap; }
.sp-full--canvas > :not(.sp-full__canvas) { position: relative; z-index: 1; }
.sp-full--canvas .sp-full__scroll { align-items: flex-start; }
.sp-full__stage--canvas { position: relative; flex-direction: row; justify-content: center; }
.sp-full__vbig.sp-full__vbig--canvas { right: 0; bottom: auto; top: 50%; transform: translateY(-50%); }
.sp-full__mini { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.sp-full__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The choice sheet sits above everything, the profile screens included (it replaced the browser's confirm box). */
.picker { z-index: 600; }

/* Continue Watching: no small icons (a hold or right-click asks instead); a held finger shows no "save image" menu. */
.card--continue .card__meta-row--icons { display: none; }
.card--continue { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Continue Watching: on phones too the tag sits at the top of the picture, clear of the progress bar (15 Oct). */
@media (max-width: 799px) { .card.card--continue .card__badge { top: 0; bottom: auto; border-radius: 0 0 3px 3px; } }

/* ---- Podcasts in the Music tab (17 Oct): episode rows on a show page, the show's About, no Like for episodes ---- */
.sp-eps { display: flex; flex-direction: column; gap: 2px; max-width: 980px; }
.sp-ep { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 12px; border-radius: 8px; cursor: pointer; border-bottom: 1px solid var(--m-line); }
.sp-ep:hover, .sp-ep:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.sp-ep__art { width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--m-raise); }
.sp-ep__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-ep__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-ep__date { color: var(--m-dim); font-size: 13px; }
.sp-ep__title { font-weight: 700; font-size: 16px; line-height: 1.3; }
.sp-ep.is-now .sp-ep__title { color: var(--m-accent); }
.sp-ep.is-played .sp-ep__title { color: var(--m-dim); }
.sp-ep__desc { color: var(--m-dim); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-ep__bar { display: block; height: 3px; background: rgba(255,255,255,.2); border-radius: 2px; margin-top: 4px; max-width: 240px; }
.sp-ep__bar i { display: block; height: 100%; background: var(--m-accent); border-radius: 2px; }
.sp-ep__acts { display: flex; align-items: center; gap: 12px; }
.sp-ep__play { width: 40px; height: 40px; }
.sp-ep__dl { white-space: nowrap; }
.sp-ep__dl.is-on { border-color: var(--m-accent); color: #fff; }
.sp-pod__about { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.55; max-width: 80ch; white-space: pre-line; margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.sp-np .sp-pod__about { -webkit-line-clamp: 14; font-size: 13px; padding: 0 2px; }
.sp-pod__hint { max-width: 46ch; }
.sp-pod__more { margin: 16px 0 8px; }
.is-podcast .mbar__like, .is-podcast [data-full="tvlike"], .is-podcast [data-full="tvadd"], .is-podcast [data-full="song"], .is-podcast [data-full="video"] { display: none !important; }
@media (max-width: 700px) {
  .sp-ep { grid-template-columns: 56px 1fr; gap: 12px; padding: 10px 4px; }
  .sp-ep__art { width: 56px; height: 56px; }
  .sp-ep__acts { grid-column: 2; justify-content: flex-start; }
  .sp-pod__hint { display: none; }
}
html.is-tv .sp-ep { grid-template-columns: 6vw 1fr auto; gap: 1.4vw; padding: 1vw; }
html.is-tv .sp-ep__art { width: 6vw; height: 6vw; }
html.is-tv .sp-ep__title { font-size: 1.35vw; } html.is-tv .sp-ep__date, html.is-tv .sp-ep__desc { font-size: 1vw; }
html.is-tv .sp-ep:focus { background: #fff; color: #000; outline: none; }
html.is-tv .sp-ep:focus .sp-ep__date, html.is-tv .sp-ep:focus .sp-ep__desc { color: #333; }
html.is-tv .sp-pod__about { font-size: 1vw; }

/* --------------------------------------------------------------------------
   Phone player (17 Oct 2026, Dustin: "For mobile can we set it up like Netflix. It opens in full screen"): sideways,
   filling the screen (a phone held upright shows it turned, .is-turned, sized by --pw / --ph from the page);
   X and the episode at the top, big Back 10 / Play / Forward 10 in the middle, the bar with the time left, then Speed,
   Episodes, Audio & Subtitles and Next Episode. Episodes open inside the player (.player-eps). Phones only
   (.is-handheld, set by the page); TVs, computers and tablets keep their player.
   -------------------------------------------------------------------------- */
.player__toptitle, .player__mid, .player__left, .player__hand-only, .hand-label, .player .ic-close, .player .ic-down, .player-eps { display: none; }
.player.is-turned { inset: auto; top: 0; left: 0; width: var(--ph, 100vh); height: var(--pw, 100vw); transform-origin: 0 0; transform: translateX(var(--pw, 100vw)) rotate(90deg); }
/* the phone's notch and home bar sit at the sides of a sideways picture */
.player.is-handheld { --hl: 28px; --hr: 28px; }
.player.is-turned { --hl: max(28px, calc(env(safe-area-inset-top) + 10px)); --hr: max(28px, calc(env(safe-area-inset-bottom) + 10px)); }
.player.is-handheld.show-ui .player__ui { background: rgba(0,0,0,.38); }
.player.is-handheld .icon-btn:hover { transform: none; }
.player.is-handheld .player__top { padding: 14px var(--hr) 14px var(--hl); justify-content: flex-start; gap: 16px; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.player.is-handheld .player__back .ic-back { display: none; }
.player.is-handheld .player__back .ic-down { display: block; } /* a chevron: down into the corner, playing on (20 Oct), not an X */
.player.is-handheld .player__toptitle { display: block; min-width: 0; color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player.is-handheld .player__mid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: min(18%, 160px); pointer-events: none; }
.player.is-handheld .player__mid .icon-btn { padding: 6px; color: #fff; }
.player.is-handheld.show-ui .player__mid .icon-btn { pointer-events: auto; }
.player.is-handheld .player__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 0 var(--hr) 10px var(--hl); background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); }
.player.is-handheld .player__progress { height: 4px; padding: 14px 0; margin: 0; touch-action: none; }
.player.is-handheld .player__progress:hover { height: 4px; }
.player.is-handheld .player__buffered, .player.is-handheld .player__played { top: 14px; height: 4px; }
.player.is-handheld .player__progress:hover .player__buffered, .player.is-handheld .player__progress:hover .player__played { height: 4px; }
.player.is-handheld .player__knob { transform: scale(1); width: 16px; height: 16px; margin-top: -8px; right: -8px; }
.player.is-handheld .player__left { display: block; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.player.is-handheld .player__controls { grid-column: 1 / -1; justify-content: center; margin-top: 2px; }
.player.is-handheld .player__controls > .player__group:first-child, .player.is-handheld .player__title, .player.is-handheld #btnFullscreen { display: none; }
.player.is-handheld .player__controls .player__group { gap: 30px; }
.player.is-handheld .player__hand-only, .player.is-handheld .hand-label, .player.is-handheld .btn--next span { display: inline; }
.player.is-handheld .player__controls .icon-btn, .player.is-handheld .player__controls .btn--next { display: inline-flex; align-items: center; gap: 8px; padding: 8px 2px; background: none; border: 0; border-radius: 0; color: #fff; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; }
.player.is-handheld .player__controls svg { width: 24px; height: 24px; flex: none; }
.player.is-handheld #btnSpeed { order: 1; }
.player.is-handheld #btnEpisodes { order: 2; }
.player.is-handheld #btnSubs { order: 3; }
.player.is-handheld #btnNext { order: 4; }
.player.is-handheld .player__paused { display: none; }
.player.is-handheld .player__subs { left: var(--hl); right: var(--hr); }
.player.is-handheld .skip-intro { right: var(--hr); bottom: 26px; font-size: 15px; padding: 10px 20px; }
.player.is-handheld.show-ui .skip-intro { bottom: 112px; }
.player.is-handheld .credits-next { right: var(--hr); bottom: 26px; gap: 10px; }
.player.is-handheld.show-ui .credits-next { bottom: 112px; }
.player.is-handheld .credits-next button { font-size: 15px; padding: 10px 18px; }
.player.is-handheld .next-up { left: auto; right: var(--hr); bottom: 112px; min-width: 260px; max-width: 340px; }
.player.is-handheld .scrub { width: 168px; }
.player.is-handheld.is-live #midBack10, .player.is-handheld.is-live #midFwd10, .player.is-handheld.is-live .player__left, .player.is-handheld.is-live #btnSpeed { display: none; }
/* sheets (Speed, Audio & Subtitles, seasons) open in the middle of the sideways picture */
.player.is-handheld .picker { align-items: center; }
.player.is-handheld .picker__sheet { width: min(420px, 80%); max-height: 88%; border-radius: 16px; padding-bottom: 16px; animation: rise .22s var(--ease); }
/* Episodes: the season pill and X on top, the episodes side by side (Netflix) */
.player.is-handheld .player-eps { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: rgba(22,22,22,.96); cursor: auto; animation: fade-in .2s ease; }
.player-eps__head { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--hr) 14px var(--hl); }
.player-eps__season { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 20px; border: 0; border-radius: 999px; background: #3a3a3a; color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.player-eps__season.is-single svg { display: none; }
.player-eps__close { color: #fff; padding: 6px; }
.player-eps__row { flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 0 var(--hr) 14px var(--hl); scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.player-eps__row::-webkit-scrollbar { display: none; }
.peps { flex: 0 0 190px; display: flex; flex-direction: column; gap: 0; padding: 0; background: none; border: 0; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.peps__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #2a2a2a; }
.peps__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.peps__play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 2px solid #fff; border-radius: 50%; background: rgba(0,0,0,.45); }
.peps__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.3); }
.peps__bar span { display: block; height: 100%; background: var(--red); }
.peps.is-current .peps__thumb { box-shadow: inset 0 0 0 2px #fff; }
.peps.is-missing .peps__thumb { opacity: .45; }
.peps__name { display: -webkit-box; margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.peps__meta { display: block; margin-top: 6px; font-size: 13px; color: #a3a3a3; }
.peps__desc { display: -webkit-box; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #bdbdbd; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* lists on a turned player are moved by the page's own finger handling (dragScroll in app.js) */
.player.is-turned .player-eps__row, .player.is-turned .picker__sheet { touch-action: none; }

/* ---- Mini player (20 Oct 2026, Dustin: "go back look around the app ... and still see the main show i was watching.
   maybe it floats in bottom right corner"): Back shrinks the player into a corner (a slow, soft slide), playing on;
   a press on the picture brings it back, X stops it; it drags to any corner. A pop-out preview or a show window tucks
   it away until that closes. The TV's remote reaches none of this: its top bar gets Now Watching instead. */
.player.is-mini { top: var(--mini-y, 0px); left: var(--mini-x, 0px); width: var(--mini-w, 360px); height: var(--mini-h, 203px); z-index: 250; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1); cursor: default; transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease; }
.player.is-mini:hover { box-shadow: 0 14px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.2); }
.player.is-moving { transition: top .48s cubic-bezier(.2,.8,.2,1), left .48s cubic-bezier(.2,.8,.2,1), width .48s cubic-bezier(.2,.8,.2,1), height .48s cubic-bezier(.2,.8,.2,1), border-radius .48s ease, box-shadow .48s ease, opacity .3s ease, transform .3s ease; }
.player.is-snapping { transition: top .25s ease, left .25s ease, opacity .3s ease, transform .3s ease; }
.player.is-mini.is-tucked { opacity: 0; transform: scale(.92); pointer-events: none; }
.player.is-mini .player__ui, .player.is-mini .player__subs, .player.is-mini .skip-intro, .player.is-mini .credits-next, .player.is-mini .player-eps { display: none !important; }
.player.is-mini .player__spinner .spinner { transform: scale(.5); }
.player__mini { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.player__mini-btn { position: absolute; top: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .85; transition: opacity .2s, transform .15s, background .2s; }
.player__mini-btn:hover { opacity: 1; background: rgba(0,0,0,.8); transform: scale(1.1); }
.player__mini-expand { left: 6px; }
.player__mini-close { right: 6px; }
.player__mini-play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s, transform .15s; }
.player__mini-play:hover { transform: scale(1.1); background: rgba(0,0,0,.8); }
.player.is-mini .player__mini:hover .player__mini-play, .player.is-mini.is-paused .player__mini-play { opacity: 1; }
@media (pointer: coarse) { .player__mini-play { opacity: .85; } }
.player__mini-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); }
.player__mini-bar span { display: block; height: 100%; width: 0; background: var(--red); }
.player.is-live .player__mini-bar { display: none; }
html.is-tv .player.is-mini { border-radius: .8vw; }
html.is-tv .player__mini-btn, html.is-tv .player__mini-play { display: none; }

/* ==========================================================================
   Live TV, the DIRECTV-style hybrid (20 Oct 2026, docs/live-tv-plan.md): a stage where the channel keeps playing
   (the mini player docked over it), Your channels, rows of what is on around it; the Guide with its filter rail and
   Jump to; the Your channels page. Rows reuse .rail / .slider / .card so the remote, the arrows and the mouse wheel
   behave as on every other row.
   ========================================================================== */
.live__pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #555; border-radius: 999px; padding: 8px 16px; font-size: 14px; color: #ddd; white-space: nowrap; background: transparent; }
.live__pill:hover, .live__pill:focus-visible { border-color: #fff; color: #fff; outline: none; }
.live__pill.is-active { background: #fff; color: #000; border-color: #fff; font-weight: 700; }
.live__rows { margin: 0 calc(-1 * var(--gutter)); }
.live__rows .rail { margin: 0 0 1.8vw; }
.live__rows .rail__title { cursor: default; }
.live__rows .rail__title .rail__explore { display: none; }
.rail__hint { font-size: 12px; color: #777; font-weight: 400; margin-left: 10px; }

/* the stage */
.stage { display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 1fr); gap: 22px; margin-bottom: 26px; }
.stage__box { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; outline: none; }
.stage__box:focus-visible, html.is-tv .stage__box:focus { box-shadow: 0 0 0 3px #fff; }
.stage__art { width: 100%; height: 100%; object-fit: cover; background: #111; }
.stage__box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%); pointer-events: none; }
.stage__tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; padding: 4px 9px; border-radius: 999px; }
.stage__logo { position: absolute; left: 16px; bottom: 28px; z-index: 2; height: 30px; max-width: 120px; object-fit: contain; filter: drop-shadow(0 1px 3px #000); }
.stage__bar { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; height: 4px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.stage__bar span { display: block; height: 100%; width: 0; background: var(--red); }
.stage__off { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; }
.stage__offplay { width: 72px; height: 72px; border-radius: 50%; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.8); display: grid; place-items: center; color: #fff; transition: background .2s, transform .2s; }
.stage__box:hover .stage__offplay, .stage__box:focus .stage__offplay { background: rgba(var(--red-rgb), .9); border-color: transparent; transform: scale(1.06); }
.stage__info { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.stage__chan { display: flex; align-items: center; gap: 10px; color: #aaa; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; min-height: 22px; }
.stage__chan img { height: 22px; max-width: 90px; object-fit: contain; }
.stage__h { font-size: clamp(20px, 2.1vw, 30px); font-weight: 800; margin: 8px 0 2px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stage__sub { font-size: 16px; color: #ddd; font-weight: 500; }
.stage__time { color: #bbb; font-size: 14px; margin-top: 6px; }
.stage__time b { color: #fff; }
.stage__desc { color: #ccc; font-size: 15px; margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stage__next { margin-top: 10px; font-size: 13px; color: #999; }
.stage__next b { color: #ddd; font-weight: 600; }
.stage__btns { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; align-items: center; }
.stage__round { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #777; border-radius: 50%; color: #fff; background: rgba(0,0,0,.3); }
.stage__round:hover, .stage__round:focus-visible { border-color: #fff; outline: none; }
.stage__round.is-on { background: #fff; color: #000; border-color: #fff; }
.stage__round.is-on svg path[data-on] { display: block; }
.stage__empty { color: var(--muted); padding: 20px 0; }

/* channel strip and live cards */
.rail--chans .card { aspect-ratio: 16 / 10; flex-basis: calc((100% - (var(--cols) + 3) * var(--gap)) / (var(--cols) + 4)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(160deg, #2b2b2b, #161616); border: 1px solid rgba(255,255,255,.06); overflow: visible; }
.rail--chans .card:hover, .rail--chans .card:focus-visible { background: linear-gradient(160deg, #3a3a3a, #1d1d1d); }
.rail--chans .card.is-on { outline: 2px solid var(--red); outline-offset: -2px; }
.rail--chans .card.card--add { border: 1px dashed #555; background: none; }
.chan__logo { height: 38%; max-width: 70%; object-fit: contain; }
.chan__name { font-size: 11px; font-weight: 700; color: #d6d6d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }
.chan__big { font-size: 15px; font-weight: 800; color: #eee; }
.chan__plus { font-size: 26px; font-weight: 300; line-height: 1; color: #bbb; }
.chan__fav { position: absolute; top: 6px; right: 8px; color: var(--red); font-size: 12px; line-height: 1; }
.chan__dot { position: absolute; left: 8px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #141414; }
.card--live { background: #222; }
.card--live.is-on { outline: 2px solid var(--red); outline-offset: -2px; }
.lcard__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1a1a1a; }
.card--live::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%); pointer-events: none; }
.card--live.card--poster::after { background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.9) 100%); }
.lcard__tag { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; padding: 3px 7px; border-radius: 999px; }
.lcard__tag--new { background: #fff; color: #000; }
.card--poster .lcard__tag { right: auto; left: 8px; }
.lcard__why { position: absolute; left: 8px; top: 8px; z-index: 2; background: rgba(0,0,0,.55); color: #ddd; font-size: 10px; padding: 3px 7px; border-radius: 999px; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card--poster .lcard__why { top: auto; bottom: 46px; left: 8px; }
.lcard__logo { position: absolute; left: 10px; bottom: 38px; z-index: 2; height: 20px; max-width: 90px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.card--poster .lcard__logo { left: auto; right: 8px; top: 8px; bottom: auto; height: 16px; max-width: 60px; }
.lcard__chan { position: absolute; left: 10px; bottom: 38px; z-index: 2; color: #fff; font-weight: 800; font-size: 12px; text-shadow: 0 1px 2px #000; }
.lcard__title { position: absolute; left: 10px; right: 10px; bottom: 18px; z-index: 2; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.lcard__sub { position: absolute; left: 10px; right: 10px; bottom: 6px; z-index: 2; color: #bbb; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card--poster .lcard__title { bottom: 24px; left: 8px; right: 8px; font-size: 12px; }
.card--poster .lcard__sub { bottom: 8px; left: 8px; right: 8px; }
.lcard__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: rgba(255,255,255,.25); }
.lcard__bar span { display: block; height: 100%; background: var(--red); }
.card--live.card--noart .lcard__art { object-fit: contain; padding: 18%; box-sizing: border-box; background: linear-gradient(160deg, #2b2b2b, #161616); }

/* the guide page */
.live__jump { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.live__guidebody { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.live__groups { display: flex; flex-direction: column; gap: 4px; overflow: visible; padding: 0; margin: 0; }
.live__group { text-align: left; border: 0; border-radius: 8px; padding: 9px 14px; font-size: 14px; color: #ccc; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: transparent; }
.live__group small { color: #777; font-size: 11px; font-weight: 400; }
.live__group:hover, .live__group:focus-visible { background: #262626; color: #fff; outline: none; }
.live__group.is-active { background: #fff; color: #000; font-weight: 700; }
.live__group.is-active small { color: #444; }
.live__info-sub { color: #ddd; font-size: 14px; }
.live__info-btns { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.gprog__tag { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 1px 5px; border-radius: 999px; margin-left: 6px; vertical-align: middle; background: var(--red); color: #fff; font-style: normal; }
.gprog__tag--new { background: #fff; color: #000; }
.gcell__fav { color: var(--red); font-size: 11px; }

/* Your channels (pick) page */
.pick__head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.pick__count { margin-left: auto; color: #aaa; font-size: 14px; }
.pick__sub { color: #aaa; font-size: 14px; margin: 0 0 18px; }
.pick__body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: start; }
.pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; min-width: 0; }
.ptile { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; background: linear-gradient(160deg, #2b2b2b, #161616); border: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #d6d6d6; }
.ptile img { height: 36%; max-width: 70%; object-fit: contain; }
.ptile span { font-size: 11px; font-weight: 700; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptile:hover, .ptile:focus-visible { background: linear-gradient(160deg, #3a3a3a, #1d1d1d); outline: 2px solid #fff; outline-offset: -2px; }
.ptile.is-picked { outline: 2px solid #fff; outline-offset: -2px; }
.ptile.is-hidden { opacity: .4; }
.ptile__check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #666; display: grid; place-items: center; font-size: 12px; color: #fff; }
.ptile.is-picked .ptile__check { background: var(--red); border-color: var(--red); }
.ptile.is-hidden .ptile__check { border-style: dashed; }

/* the docked player: the corner player sitting in the stage box */
.player.is-mini.is-docked { box-shadow: none; }
.player.is-mini.is-docked .player__mini-expand { display: none; }
html.is-tv .player.is-mini.is-docked { border-radius: 10px; }

/* TV sizes */
html.is-tv .live__pill { font-size: 1.3vw; padding: .6vw 1.6vw; gap: .5vw; }
html.is-tv .live__pill svg { width: 1.3vw; height: 1.3vw; }
html.is-tv .live__pill:focus { background: #fff; color: #000; border-color: #fff; outline: none; }
html.is-tv .live__rows .rail { margin: 0 0 1.6vw; }
html.is-tv .rail__hint { font-size: 1vw; }
html.is-tv .stage { gap: 1.8vw; margin-bottom: 1.8vw; }
html.is-tv .stage__box { border-radius: .8vw; }
html.is-tv .stage__box:focus { box-shadow: 0 0 0 .3vw #fff; }
html.is-tv .stage__tag { font-size: .9vw; padding: .3vw .7vw; top: 1vw; left: 1vw; }
html.is-tv .stage__logo { height: 2.4vw; max-width: 9vw; left: 1.2vw; bottom: 2.2vw; }
html.is-tv .stage__bar { left: 1.2vw; right: 1.2vw; bottom: 1vw; height: .3vw; }
html.is-tv .stage__offplay { width: 6vw; height: 6vw; }
html.is-tv .stage__chan { font-size: 1vw; gap: .7vw; }
html.is-tv .stage__chan img { height: 1.7vw; max-width: 7vw; }
html.is-tv .stage__h { font-size: 2.2vw; margin: .5vw 0 .2vw; }
html.is-tv .stage__sub { font-size: 1.25vw; }
html.is-tv .stage__time { font-size: 1.1vw; }
html.is-tv .stage__desc { font-size: 1.15vw; margin-top: .6vw; }
html.is-tv .stage__next { font-size: 1.05vw; }
html.is-tv .stage__btns { gap: .8vw; padding-top: 1vw; }
html.is-tv .stage__round { width: 3.4vw; height: 3.4vw; }
html.is-tv .stage__round svg { width: 1.6vw; height: 1.6vw; }
html.is-tv .stage__round:focus { background: #fff; color: #000; border-color: #fff; outline: none; transform: scale(1.08); }
html.is-tv .rail--chans .card { flex-basis: calc((100% - 9 * var(--gap)) / 10); gap: .5vw; }
html.is-tv .chan__logo { height: 2.6vw; }
html.is-tv .chan__name { font-size: 1vw; }
html.is-tv .chan__big { font-size: 1.3vw; }
html.is-tv .chan__plus { font-size: 2.2vw; }
html.is-tv .chan__fav { font-size: 1vw; top: .5vw; right: .7vw; }
html.is-tv .lcard__tag { font-size: .85vw; padding: .25vw .6vw; top: .7vw; right: .7vw; }
html.is-tv .lcard__why { font-size: .85vw; padding: .25vw .6vw; top: .7vw; left: .7vw; }
html.is-tv .lcard__logo { height: 1.7vw; max-width: 7vw; bottom: 3.1vw; left: .9vw; }
html.is-tv .lcard__chan { font-size: 1.05vw; bottom: 3.1vw; left: .9vw; }
html.is-tv .lcard__title { font-size: 1.1vw; bottom: 1.5vw; left: .9vw; right: .9vw; }
html.is-tv .lcard__sub { font-size: .95vw; bottom: .5vw; left: .9vw; right: .9vw; }
html.is-tv .lcard__bar { height: .25vw; }
html.is-tv .live__jump { gap: .7vw; margin-bottom: 1vw; }
html.is-tv .live__guidebody { grid-template-columns: 13vw minmax(0, 1fr); gap: 1vw; }
html.is-tv .live__groups { gap: .3vw; }
html.is-tv .live__group { font-size: 1.25vw; padding: .7vw 1.1vw; border-radius: .6vw; }
html.is-tv .live__group small { font-size: .95vw; }
html.is-tv .live__group:focus { background: #fff; color: #000; outline: none; }
html.is-tv .live__group:focus small { color: #444; }
html.is-tv .live__info-sub { font-size: 1.15vw; }
html.is-tv .live__info-btns { gap: .7vw; }
html.is-tv .gprog__tag { font-size: .75vw; padding: .1vw .45vw; }
html.is-tv .pick__sub { font-size: 1.15vw; margin-bottom: 1.4vw; }
html.is-tv .pick__count { font-size: 1.15vw; }
html.is-tv .pick__body { grid-template-columns: 15vw minmax(0, 1fr); gap: 1.4vw; }
html.is-tv .pick__grid { grid-template-columns: repeat(7, 1fr); gap: .8vw; }
html.is-tv .ptile { border-radius: .7vw; gap: .5vw; }
html.is-tv .ptile img { height: 2.6vw; }
html.is-tv .ptile span { font-size: 1vw; }
html.is-tv .ptile:focus { background: #fff; color: #000; outline: .3vw solid #fff; outline-offset: .1vw; }
html.is-tv .ptile__check { width: 1.6vw; height: 1.6vw; font-size: 1vw; top: .5vw; right: .5vw; }
html.is-tv .guide { max-height: calc(100vh - 24vw); }

/* phones and small windows */
@media (max-width: 799px) {
  .live { padding-top: calc(var(--header-h) + 6px); }
  .live__head { margin-bottom: .5em; }
  .live__filters { flex: 1 1 100%; justify-content: flex-start; }
  .live__search { flex: 1; min-width: 0; }
  .stage { display: block; margin: 0 calc(-1 * var(--gutter)) 14px; }
  .stage__box { border-radius: 0; }
  .stage__info { padding: 12px var(--gutter) 0; }
  .stage__h { font-size: 21px; }
  .stage__desc { font-size: 13px; -webkit-line-clamp: 2; }
  .stage__btns { padding-top: 12px; }
  .stage__round { width: 40px; height: 40px; }
  .rail__hint { display: none; }
  .rail--chans .card { flex-basis: calc((100% - 3 * var(--gap)) / 4.3); aspect-ratio: 5 / 4; }
  .live__guidebody { grid-template-columns: minmax(0, 1fr); }
  .live__groups { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
  .live__group { flex: 0 0 auto; border: 1px solid #555; border-radius: 999px; padding: 7px 14px; font-size: 13px; white-space: nowrap; }
  .live__group.is-active { border-color: #fff; }
  .pick__body { grid-template-columns: minmax(0, 1fr); }
  .pick__body .live__groups { margin-bottom: 4px; }
  .pick__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ptile span { font-size: 10px; }
}
@media (max-width: 799px) { .live__head .grid-view__title { display: none; } }