:root {
  color-scheme: dark;
  --bg: #050506;
  --bg-elevated: #0c0d10;
  --surface: #111318;
  --surface-2: #1a1c24;
  --text: #f4f3f1;
  --muted: #8b909c;
  --accent: #28c8f8;
  --accent-warm: #ff649f;
  --accent-rose: #825cff;
  --line: #ffffff0f;
  --pad: clamp(20px, 4vw, 80px);
  --hero-gutter: clamp(18px, 2.8vw, 64px);
  --nav-h: 72px;
  --radius: 6px;
  --ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: var(--ease-premium);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 450ms;
  --shadow-soft: 0 18px 50px #00000066;
  --font-ui: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);
  /* AVYLO Card: superfície preta com leve tom roxo/azulado, trilho de
     progresso azul-escuro e borda/sombra quase imperceptíveis */
  --card-surface: #12101b;
  --card-surface-2: #1b1828;
  --card-line: #9d8cff1a;
  --card-track: #1d2434;
  --card-glow: 0 18px 38px #000000b8, 0 4px 18px #4b3fc21f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--nav-h) + 12px);
  scrollbar-width: thin;
  scrollbar-color: #3c4150 #07080d;
}

/* Barra de rolagem AVYLO — aplicada à página, modais e listas internas. */
* {
  scrollbar-width: thin;
  scrollbar-color: #3c4150 #07080d;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #07080d;
  border-left: 1px solid #ffffff0a;
}

*::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid #07080d;
  border-radius: 999px;
  background: #3c4150;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #545b6e;
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: #07080d;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% -10%, #073d745e 0, transparent 34%),
    radial-gradient(circle at 90% 12%, #8a28594d 0, transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  color: inherit;
}

button {
  border: 0;
  cursor: pointer;
  background: none;
  transition:
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

button:disabled {
  opacity: 0.35;
  cursor: default;
}

button {
  touch-action: manipulation;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

button svg {
  pointer-events: none;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: #fff;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

button:active:not(:disabled) {
  transform: scale(0.97);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 20px;
  z-index: 9999;
  padding: 12px 16px;
  background: var(--text);
  color: var(--bg);
  border-radius: 4px;
}

.skip-link:focus {
  top: 12px;
}

#app {
  min-height: 72vh;
}

#app.is-leaving {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}

#app.is-entering {
  animation: page-in 250ms var(--ease-out);
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 48px;
  z-index: 100;
  background: linear-gradient(180deg, #050506cc 0%, transparent 100%);
  transition:
    background 300ms var(--ease-out),
    backdrop-filter 300ms var(--ease-out),
    border-color 300ms var(--ease-out);
}

/* sem backdrop-filter: a barra fica sobre o trailer e o desfoque seria
   recalculado a cada quadro do vídeo */
.nav.scrolled {
  background: #050506f2;
  border-bottom: 1px solid var(--line);
}

.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
}

.logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 9px #2c7dff42) drop-shadow(0 0 14px #ff5f9d20);
  transition: transform 320ms var(--ease-premium), filter 320ms var(--ease-out);
}

.logo-copy {
  position: relative;
  display: grid;
  justify-items: center;
  line-height: 1;
  padding-bottom: 1px;
}

.logo-wordmark {
  width: 112px;
  height: 23px;
  object-fit: contain;
  filter: drop-shadow(0 1px 5px #000a);
}

.logo small {
  width: 100%;
  margin-top: 4px;
  padding-left: 0.42em;
  color: #9ca6bb;
  font-size: 6.5px;
  font-weight: 650;
  letter-spacing: 0.52em;
  text-align: center;
}

.logo-copy::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #28c8f870, #825cff70, #ff649f70, transparent);
  opacity: 0;
  transform: scaleX(0.55);
  transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-premium);
}

.logo:hover .logo-mark {
  transform: translateY(-1px) scale(1.045);
  filter: drop-shadow(0 0 10px #28c8f865) drop-shadow(0 0 16px #ff5f9d35);
}

.logo:hover .logo-copy::after {
  opacity: 1;
  transform: scaleX(1);
}

.brand-dot {
  color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  position: relative;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #9ea2ad;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-actions {
  margin-left: auto;
  display: flex;
  gap: 14px;
  align-items: center;
}

.icon-button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.icon-button:hover {
  background: #ffffff12;
}

.icon-button[aria-pressed="true"] {
  color: var(--accent);
}

.profile-wrap {
  position: relative;
}

.profile {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 40px;
  padding: 3px 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.profile:hover,
.profile[aria-expanded="true"] {
  background: #ffffff09;
}

.avatar,
.profile > .avatar {
  background: linear-gradient(135deg, #18c9f4, #4858f7 54%, #ff5f9d);
  color: #f6fffb;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid #ffffff22;
  box-shadow: 0 5px 16px #0007, 0 0 0 1px #0004;
  background-position: center;
}

.profile > .avatar {
  flex: 0 0 38px;
}

.profile-copy {
  display: grid;
  min-width: 0;
  text-align: left;
}

.profile-name {
  font-size: 12px;
  font-weight: 700;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-chevron {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 11px;
  color: var(--muted);
  transition: transform 220ms var(--ease-premium), color 220ms;
}

.profile[aria-expanded="true"] .profile-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  background: #0f1116f5;
  backdrop-filter: blur(16px);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.profile-menu button,
.profile-menu a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  border-radius: 5px;
  text-align: left;
  font-size: 13px;
}

.profile-menu button:hover,
.profile-menu a:hover {
  background: #ffffff0a;
}

.profile-menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 4px;
}

.bottom-nav {
  display: none;
}

.hero {
  position: relative;
  isolation: isolate;
  height: clamp(540px, calc(100svh - var(--nav-h) - 52px), 900px);
  margin: calc(var(--nav-h) + 17px) var(--hero-gutter) 0;
  border-radius: 22px;
  display: flex;
  align-items: flex-end;
  padding: 36px;
  overflow: hidden;
  background: #141619;
  box-shadow: 0 18px 42px #00000066;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: opacity 520ms var(--ease-out);
}

.hero-backdrop.is-ken {
  animation: hero-ken 8s linear forwards;
}

.hero-backdrop.is-arriving {
  animation: hero-arrive 900ms var(--ease-premium) both, hero-ken 8s 900ms linear forwards;
}

@keyframes hero-arrive {
  from {
    opacity: 0.25;
    transform: scale(1.025) translateX(var(--hero-in-shift, 6%));
    filter: saturate(0.72) blur(3px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1) blur(0);
  }
}

@keyframes hero-ken {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.035);
  }
}

.hero-leave {
  z-index: -2;
  animation: none;
  transition: opacity 760ms var(--ease-out), transform 900ms var(--ease-premium), filter 700ms var(--ease-out);
}

.hero-leave.is-gone {
  opacity: 0;
  transform: scale(1.025) translateX(var(--hero-out-shift, -6%));
  filter: saturate(0.7) blur(3px);
}

.hero-backdrop.is-fading,
.hero-content.is-fading,
.hero > img.art-fill.is-fading {
  opacity: 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #050506c9 0%, #05050680 34%, #05050624 62%, transparent 78%),
    linear-gradient(0deg, #050506d9 0%, #05050600 54%);
  pointer-events: none;
}

/* Alguns trailers exibem título ou marca no canto superior esquerdo.
   O recorte cobre essa área sem afetar o texto e os botões do hero. */
.hero:has(.hero-preview.is-playing)::before {
  background:
    radial-gradient(ellipse 330px 110px at 0 0, #050506 0 45%, #050506df 65%, transparent 100%),
    linear-gradient(90deg, #050506c9 0%, #05050680 34%, #05050624 62%, transparent 78%),
    linear-gradient(0deg, #050506d9 0%, #05050600 54%);
}

.hero-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -2;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.hero-preview.is-playing {
  opacity: 1;
}

.hero-preview.is-held,
.hero-preview.is-playing.is-held,
iframe.yt-cover.is-veiled {
  opacity: 0;
  transition-duration: 0.35s;
}

iframe.hero-preview,
iframe.card-preview,
iframe.detail-trailer,
video.hero-preview,
video.card-preview,
video.detail-trailer {
  border: 0;
  pointer-events: none;
  overflow: hidden;
  scrollbar-width: none;
  object-fit: contain;
  object-position: center;
}

/* todo embed fica 16:9 e inteiro: hero, card e detalhe */
iframe.hero-preview,
video.hero-preview {
  inset: auto;
  top: 0;
  left: 100%;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  translate: -100% 0;
}

.detail-hero > iframe.detail-trailer,
.detail-hero > video.detail-trailer {
  inset: auto;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  translate: -50% 0;
  object-fit: contain;
  object-position: center;
}

/* width/height vêm do JS (fitFrame): cobre o container inteiro e sobra
   borda suficiente para esconder título, logo e controles do YouTube. */
.hero > video.hero-preview,
.detail-hero > video.detail-trailer,
.ac-art > video.card-preview {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  translate: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.hero > iframe.yt-cover,
.detail-hero > iframe.yt-cover,
.ac-art > iframe.yt-cover {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  translate: -50% -50%;
  pointer-events: none;
}

/* Muitos trailers vêm em 16:9 com faixas pretas gravadas no próprio vídeo.
   O recorte fica dentro do quadro e preserva seus cantos arredondados. */
.hero > video.hero-preview,
.detail-hero > video.detail-trailer,
.ac-art > video.card-preview {
  transform: scale(1.35);
  transform-origin: center;
}

/* O iframe já recebe um recorte inicial em fitFrame(); este ajuste remove
   as faixas restantes quando o arquivo original é mais largo que 16:9. */
.hero > iframe.yt-cover,
.detail-hero > iframe.yt-cover,
.ac-art > iframe.yt-cover {
  transform: scale(1.08);
  transform-origin: center;
}

.hero-content {
  max-width: 700px;
  width: min(60%, 700px);
  position: relative;
  z-index: 1;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), filter 180ms var(--ease-out);
}

.hero-content.is-out {
  opacity: 0;
  transform: translateX(var(--hero-copy-out, -28px));
  filter: blur(3px);
}

.hero-content.is-in > * {
  animation: hero-line 520ms var(--ease-out) backwards;
}

.hero-content.is-in > *:nth-child(2) {
  animation-delay: 45ms;
}

.hero-content.is-in > *:nth-child(3) {
  animation-delay: 90ms;
}

.hero-content.is-in > *:nth-child(4) {
  animation-delay: 135ms;
}

.hero-content.is-in > *:nth-child(5) {
  animation-delay: 180ms;
}

@keyframes hero-line {
  from {
    opacity: 0;
    transform: translateX(var(--hero-copy-in, 34px));
    filter: blur(4px);
  }
  to { filter: blur(0); }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 35%, #28c8f81c 49%, transparent 63%);
  transform: translateX(-110%);
  pointer-events: none;
}

.hero.is-switching::after {
  animation: hero-sheen 720ms var(--ease-out);
}

@keyframes hero-sheen { to { transform: translateX(110%); } }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #d8d5d0;
  margin-bottom: 18px;
}

.hero .eyebrow::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.hero-title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(48px, 5.8vw, 90px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 4px 40px #00000080;
}

.hero-title .hero-subtitle {
  display: block;
  font-family: var(--font-ui);
  font-size: clamp(11px, 1.2vw, 16px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  margin-top: 14px;
  text-transform: uppercase;
  color: #d0cdc8;
}

.title-art {
  display: block;
  max-width: 100%;
}

.title-art-fallback { display: block; }
.title-art.has-logo .title-art-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.title-logo-image[hidden] { display: none; }
.title-logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 3px #000b) drop-shadow(0 5px 12px #0009);
  animation: title-logo-appear 220ms var(--ease-out) both;
}

/* ainda verificando o logo: o título em texto não pisca antes dele (fica
   invisível, mas ocupa o lugar e continua acessível) */
.title-art.is-pending .title-art-fallback {
  opacity: 0;
}

/* logo já carregado antes (voltar ao título, troca do Hero): sem animação */
.title-art.is-instant .title-logo-image {
  animation: none;
}

.hero-title .title-logo-image {
  max-width: min(100%, 650px);
  max-height: clamp(120px, 16vw, 215px);
}

.hero .hero-meta { font-size: 14px; }

@keyframes title-logo-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-meta,
.meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: #b4b7bf;
}

.match {
  color: #35d5ff;
  font-weight: 700;
}

.quality {
  border: 1px solid #ffffff30;
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.4;
}

.rating {
  background: var(--accent-warm);
  color: #15110b;
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.hero-description {
  font-size: clamp(16px, 1.55vw, 21px);
  color: #f1f1f3;
  line-height: 1.36;
  max-width: 650px;
  margin: 18px 0 26px;
  text-shadow: 0 2px 12px #0009;
  max-height: var(--hero-description-height, 200px);
  overflow: hidden;
  transform-origin: left bottom;
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-premium),
    filter 900ms var(--ease-out),
    max-height 900ms var(--ease-premium);
}

.hero-description.is-trailer-hiding {
  opacity: 0;
  max-height: 0;
  transform: translateY(18px) scale(0.86);
  filter: blur(6px);
  pointer-events: none;
}

.hero-actions,
.detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.button {
  min-height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 4px;
  background: #ffffff14;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.button svg {
  width: 16px;
  height: 16px;
}

.button:hover {
  background: #ffffff22;
}

.button:active,
.icon-button:active {
  transform: scale(0.96);
}

.button.primary {
  background: var(--accent);
  color: #06110f;
}

.button.primary:hover:not(:active) {
  background: #a9ffe6;
  transform: translateY(-1px);
}

.hero-actions > .icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff35;
  border-radius: 4px;
}

.preview-audio {
  position: absolute;
  bottom: 82px;
  right: 36px;
  z-index: 2;
  border: 1px solid #ffffff35;
  border-radius: 50%;
}

.hero-bottom {
  position: absolute;
  bottom: 30px;
  left: 36px;
  right: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #727784;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-bottom a {
  color: #a0a4ae;
  transition: color 0.2s;
}

.hero-bottom a:hover {
  color: #fff;
}

.hero-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Filmstrip de miniaturas que substitui os pontinhos (ver heroDotsMarkup em
   app.js): cada destaque vira uma prévia clicável de 58x33, com a barra de
   progresso de 8s reaproveitando @keyframes hero-progress. */
.hero-thumbs {
  display: flex;
  gap: 6px;
  align-items: center;
}

.hero-thumb {
  position: relative;
  width: 58px;
  height: 33px;
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #ffffff20;
  opacity: 0.5;
  transform: scale(0.94);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-premium),
    border-color var(--duration-normal) var(--ease-out);
}

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

.hero-thumb-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}

.hero-thumb:hover {
  opacity: 0.8;
  transform: scale(0.98);
}

.hero-thumb.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: #ffffff60;
}

.hero-thumb.is-active .hero-thumb-progress {
  background: #ffffff38;
}

.hero-thumb.is-active .hero-thumb-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  animation: hero-progress 8s linear forwards;
}

.hero-thumb:focus-visible {
  outline-offset: 3px;
}

.hero-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  border: 1px solid #ffffff18;
  border-radius: 16px;
  background: #07090de6;
  box-shadow: 0 8px 28px #0005;
}

.hero-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #c9cdd4;
  background: transparent;
  transition: color 180ms, background 180ms, transform 180ms;
}

.hero-arrow:hover {
  color: #08110f;
  background: var(--accent);
}

.hero-arrow:active { transform: scale(0.9); }
.hero-arrow svg { width: 14px; height: 14px; }

.hero-count {
  min-width: 42px;
  color: #777e8b;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-align: center;
}

.hero-count b { color: #f5f6f7; font-weight: 700; }

.hero-dot {
  position: relative;
  overflow: hidden;
  width: 16px;
  height: 2px;
  padding: 0;
  border-radius: 1px;
  background: #ffffff38;
  transition:
    width var(--duration-normal) var(--ease-premium),
    background var(--duration-normal) var(--ease-out);
}

.hero-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-dot.is-active::after {
  animation: hero-progress 8s linear forwards;
}

@keyframes hero-progress { to { transform: scaleX(1); } }

.hero-dot.is-active {
  width: 26px;
  background: #fff;
}

.hero-dot:focus-visible {
  outline-offset: 4px;
}

.catalog-section {
  position: relative;
  padding: 0 var(--pad);
  margin-bottom: 36px;
}

/* mantém o painel do trailer inteiramente visível antes do catálogo */
.hero + .catalog-section,
.hero + .editorial {
  margin-top: 32px;
  z-index: 2;
}

.catalog-section:has(.media-card:hover),
.catalog-section:has(.media-card:focus-within),
.catalog-grid:has(.media-card:hover),
.catalog-grid:has(.media-card:focus-within) {
  z-index: 8;
}

/* .is-reveal só é aplicada por JS quando a rotina que a remove está ativa */
.catalog-section.is-reveal,
.editorial.is-reveal,
.best-spotlight.is-reveal {
  opacity: 0;
}

/* o fade usa animação sem fill: se a animação não rodar, o estado base já é visível */
.is-revealing {
  animation: reveal-in 400ms var(--ease-out);
}

.is-revealing .rail > .media-card,
.is-revealing .rail > .avylo-card {
  animation: reveal-in 380ms var(--ease-out) backwards;
}

.is-revealing .rail > .ranked-item .rank-number {
  animation: rank-in 400ms var(--ease-out) backwards;
}

.is-revealing .rail > .ranked-item .media-card {
  animation: reveal-in 400ms var(--ease-out) backwards;
}

.is-revealing .rail > :nth-child(2),
.is-revealing .rail > :nth-child(2) :is(.rank-number, .media-card) {
  animation-delay: 30ms;
}

.is-revealing .rail > :nth-child(3),
.is-revealing .rail > :nth-child(3) :is(.rank-number, .media-card) {
  animation-delay: 60ms;
}

.is-revealing .rail > :nth-child(4),
.is-revealing .rail > :nth-child(4) :is(.rank-number, .media-card) {
  animation-delay: 90ms;
}

.is-revealing .rail > :nth-child(5),
.is-revealing .rail > :nth-child(5) :is(.rank-number, .media-card) {
  animation-delay: 120ms;
}

.is-revealing .rail > :nth-child(6),
.is-revealing .rail > :nth-child(6) :is(.rank-number, .media-card) {
  animation-delay: 150ms;
}

.is-revealing .rail > :nth-child(7),
.is-revealing .rail > :nth-child(7) :is(.rank-number, .media-card) {
  animation-delay: 180ms;
}

.is-revealing .rail > :nth-child(8),
.is-revealing .rail > :nth-child(8) :is(.rank-number, .media-card) {
  animation-delay: 210ms;
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes rank-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading h2 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.3;
}

.section-heading .eyebrow {
  margin-bottom: 6px;
}

.row-controls {
  display: flex;
  gap: 6px;
}

.row-controls button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.row-controls button:hover {
  background: var(--surface-2);
}

.row-controls button:disabled {
  opacity: 0.24;
  pointer-events: none;
}

.row-controls.is-static {
  visibility: hidden;
}

.row-controls svg {
  width: 14px;
  height: 14px;
}

.is-continue .row-controls button {
  width: 38px;
  height: 38px;
  border-color: #ffffff38;
  background: #ffffff12;
  transition: transform 180ms var(--ease-out), background 180ms, box-shadow 180ms;
}

.is-continue .row-controls button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #ffffff25;
}

.is-continue .row-controls [data-dir="1"] {
  border-color: #28c8f8;
  background: #28c8f8;
  color: #06141f;
  box-shadow: 0 5px 18px #28c8f83b;
}

.is-continue .row-controls [data-dir="1"]:hover:not(:disabled) {
  background: #75e0ff;
  box-shadow: 0 8px 24px #28c8f85c;
}

.rail-wrap {
  position: relative;
  margin: 0 -12px;
}

/* overflow-x precisa ficar não-visible pro scroll horizontal funcionar,
   o que trava overflow-y junto (não dá pra soltar só um eixo nesse tipo
   de elemento). Em vez disso a fileira reserva espaço vertical de sobra
   (padding) e recua com margin negativa pra não abrir vão extra na
   página: o card expandido tem onde crescer sem esbarrar no clip. */
.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: clip;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-padding-inline: 20px;
  padding: 32px 20px 72px;
  margin: -16px -8px -44px;
}

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

.rail.is-auto-scrolling {
  scroll-snap-type: none;
}

.media-card {
  --card-radius: 12px;
  position: relative;
  flex: 0 0 calc((100% - 70px) / 6);
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  transform-origin: center center;
  background: #0b0e11;
  border: 1px solid transparent;
  transition:
    transform 220ms var(--ease-premium),
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    z-index 0s 220ms;
  z-index: 1;
  border-radius: var(--card-radius);
  /* cards fora da área visível das fileiras não são desenhados; o card já
     recorta o próprio conteúdo, então a contenção não corta nada */
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

.card-open {
  position: relative;
  padding: 0;
  display: block;
  width: 100%;
  border-radius: var(--card-radius, 12px);
  overflow: hidden;
  text-align: left;
  box-shadow: none;
}

/* Brilho curto inspirado no Glare Hover: acompanha a linguagem de cinema sem
   clarear a capa inteira nem competir com o conteúdo. */
.card-open::after {
  content: "";
  position: absolute;
  inset: -45% -80%;
  z-index: 4;
  background: linear-gradient(105deg, transparent 40%, #ffffff24 49%, #ffffff0d 54%, transparent 63%);
  transform: translateX(-45%) rotate(2deg);
  transition: transform 700ms var(--ease-premium);
  pointer-events: none;
}

.media-card:hover .card-open::after,
.media-card:focus-within .card-open::after {
  transform: translateX(45%) rotate(2deg);
}

/* Spotlight que segue o cursor dentro do card (--spot-x/--spot-y vêm do JS,
   em %). Fica entre a capa e o título: ilumina sem lavar a arte nem competir
   com o texto. Cobre os dois tipos de card (.card-open da grade/busca e
   .ac-art das fileiras avylo-card) — ambos já são position:relative;overflow:hidden.
   Só liga em telas com mouse de verdade (ver bloco hover abaixo). */
.card-open::before,
.ac-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), #ffffff2e, transparent 68%);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
  pointer-events: none;
}

.watch-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  background: #ffffff2e;
  pointer-events: none;
}

.watch-bar::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--watch, 0) * 100%);
  background: var(--accent);
}

.watch-hint {
  margin: 6px 0 0;
  color: #d5d8e0;
  font-size: 11px;
  line-height: 1.3;
}

.card-open > img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition:
    filter var(--duration-normal) var(--ease-out),
    opacity 300ms var(--ease-out),
    aspect-ratio 280ms var(--ease-out);
  background: linear-gradient(110deg, #141820 25%, #1e222c 45%, #141820 65%);
  background-size: 200% 100%;
}

.card-title-art {
  position: absolute;
  z-index: 3;
  left: 16%;
  bottom: 32px;
  width: 68%;
  height: 32%;
  max-height: 58px;
  min-height: 30px;
  pointer-events: none;
}

.card-title-art.is-compact-logo {
  height: 42%;
  max-height: 74px;
}

.card-title-art:not(.has-logo) { opacity: 0; }
.card-title-art .title-logo-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-position: center;
}

.card-open:has(.card-title-art.has-logo) .card-caption h3 { display: none; }
.ac-art .card-title-art { bottom: 12%; }
.avylo-card.is-previewing .card-title-art {
  left: 4%;
  bottom: 8%;
  width: 38%;
  height: 28%;
  max-height: 44px;
  transition:
    left 680ms var(--ease-premium),
    width 680ms var(--ease-premium),
    height 680ms var(--ease-premium),
    max-height 680ms var(--ease-premium),
    bottom 680ms var(--ease-premium);
}

.avylo-card.is-previewing .card-title-art.is-compact-logo {
  height: 42%;
  max-height: 74px;
}

.avylo-card.is-previewing .card-title-art .title-logo-image {
  object-position: left center;
  transition: object-position 680ms var(--ease-premium);
}

.card-open > img.loading {
  opacity: 0;
  animation: none;
}

.card-open:has(> img.loading),
.ac-art:has(> img.loading),
.episode-thumb:has(img.loading) {
  background: linear-gradient(110deg, #141820 30%, #1b1f28 46%, #141820 62%);
  background-size: 220% 100%;
  animation: skeleton 1.8s linear infinite;
}

.ac-art > img.loading,
.episode-thumb img.loading {
  opacity: 0;
}

.card-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms var(--ease-out);
}

.card-preview.is-on {
  opacity: 1;
}

iframe.card-preview,
video.card-preview {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  translate: -50% -50%;
}

.media-card.is-previewing .card-open > img,
.score-card.is-previewing .card-open > img,
.ranked-item .media-card.is-previewing .card-open > img,
.catalog-section.is-wide .media-card.is-previewing .card-open > img,
.catalog-grid .media-card.is-previewing .card-open > img {
  opacity: 0;
  aspect-ratio: 16 / 9;
}

.media-card.is-previewing .card-caption {
  opacity: 0;
}

.card-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 28px 10px 8px;
  background: linear-gradient(transparent, #050506e6);
}

.card-caption h3,
.card-caption small,
.card-panel .genres,
.watch-hint,
.continue-copy h3,
.continue-copy p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-caption h3 {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.card-caption small {
  display: block;
  margin-top: 2px;
  color: #ffffffad;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  border-radius: 2px;
  z-index: 6;
}

.card-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  box-sizing: border-box;
  padding: 12px;
  background: linear-gradient(180deg, #11161af7, #0b0e11 36%);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 var(--card-radius, 12px) var(--card-radius, 12px);
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  transform-origin: bottom center;
  transform: translateY(10px);
  clip-path: none;
  transition:
    opacity 200ms var(--ease-out),
    visibility 200ms var(--ease-out),
    transform 200ms var(--ease-premium);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.48);
  pointer-events: none;
}

.card-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 8px;
}

.card-actions .expand-btn {
  margin-left: auto;
}

.card-name,
.card-panel .genres,
.card-panel .watch-hint {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 2px;
}

.card-name {
  margin: 0 0 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.card-panel .icon-button {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  transition:
    transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
    background 320ms cubic-bezier(0.32, 0.72, 0, 1),
    border-color 320ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.card-panel .icon-button svg {
  width: 14px;
  height: 14px;
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.card-actions .play {
  background: #f5f5f7;
  color: #1d1d1f;
  border-color: transparent;
}

.card-panel .icon-button:hover,
.card-panel .icon-button:focus-visible {
  transform: scale(1.14);
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.card-panel .icon-button:hover svg,
.card-panel .icon-button:focus-visible svg {
  transform: scale(1.08);
}

.card-actions .play:hover,
.card-actions .play:focus-visible {
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}

.card-panel .icon-button:active {
  transform: scale(0.94);
}

.card-panel .meta {
  gap: 4px 6px;
  font-size: 10px;
  line-height: 1.2;
}

.card-panel .genres {
  font-size: 11px;
  font-weight: 500;
  color: #aab3b8;
  margin: 4px 0 0;
  line-height: 1.3;
}

.card-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.011em;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.card-facts + .card-facts,
.card-panel .watch-hint,
.card-panel .genres {
  margin-top: 4px;
}

.icon-button.just-saved svg,
.icon-button.just-liked svg {
  animation: saved-pop 320ms var(--ease-out);
}

.icon-button.just-liked svg {
  animation: micro-heart-beat 560ms cubic-bezier(0.2, 1.7, 0.35, 1);
}

.icon-button[data-like],
.icon-button[data-save] {
  position: relative;
  isolation: isolate;
}

.icon-button[data-like]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  color: var(--accent-rose);
  pointer-events: none;
  opacity: 0;
}

.icon-button[data-like].just-liked::after {
  animation: micro-heart-burst 560ms ease-out;
}

@keyframes saved-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes like-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes micro-heart-beat {
  0%,
  100% {
    transform: scale(1);
  }
  36% {
    transform: scale(0.78) rotate(-7deg);
  }
  64% {
    transform: scale(1.38) rotate(5deg);
    color: var(--accent-rose);
  }
}

@keyframes micro-heart-burst {
  0% {
    opacity: 0;
    transform: scale(0.2);
    box-shadow:
      0 0 0 currentColor,
      0 0 0 var(--accent-warm),
      0 0 0 var(--accent),
      0 0 0 var(--accent-rose);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
    box-shadow:
      0 -18px 0 -1px currentColor,
      18px 0 0 -1px var(--accent-warm),
      0 18px 0 -1px var(--accent),
      -18px 0 0 -1px var(--accent-rose);
  }
}

.micro-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  max-width: 220px;
  padding: 7px 10px;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  background: #eefbf6;
  color: #111714;
  box-shadow: 0 12px 32px #0008;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  filter: blur(4px);
  transform: translate(-50%, 7px) scale(0.94);
  transform-origin: center bottom;
  transition:
    opacity 150ms ease,
    filter 160ms ease,
    transform 180ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.micro-tooltip.is-visible {
  opacity: 1;
  filter: none;
  transform: translate(-50%, 0) scale(1);
}

@keyframes btn-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.55);
  }
  65% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes line-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .media-card:hover,
  .media-card:focus-within {
    transform: perspective(900px) translateY(-5px) scale(1.025) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
    z-index: 40;
    transition:
      transform 520ms cubic-bezier(0.32, 0.72, 0, 1) 60ms,
      z-index 0s;
  }

  .media-card.near-bottom:hover,
  .media-card.near-bottom:focus-within {
    transform: perspective(900px) translateY(-18px) scale(1.025) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }

  /* --tilt-x/--tilt-y são atualizados por JS a cada movimento do mouse sobre
     o card (pequena inclinação, só em telas com mouse de verdade); a
     transição acima já suaviza o retorno a 0deg quando o mouse sai. */
  .media-card:hover .card-open::before,
  .media-card:focus-within .card-open::before {
    opacity: 1;
  }

  .media-card:hover .card-panel,
  .media-card:focus-within .card-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    clip-path: none;
    pointer-events: auto;
    transition:
      opacity 320ms cubic-bezier(0.32, 0.72, 0, 1) 60ms,
      visibility 0s linear 60ms,
      transform 520ms cubic-bezier(0.32, 0.72, 0, 1) 60ms;
  }

  .media-card:hover .card-actions .icon-button,
  .media-card:focus-within .card-actions .icon-button {
    animation: btn-in 480ms cubic-bezier(0.32, 0.72, 0, 1) 100ms backwards;
  }

  .media-card:hover .card-actions .icon-button:nth-child(2),
  .media-card:focus-within .card-actions .icon-button:nth-child(2) {
    animation-delay: 170ms;
  }

  .media-card:hover .card-actions .icon-button:nth-child(3),
  .media-card:focus-within .card-actions .icon-button:nth-child(3) {
    animation-delay: 210ms;
  }

  .media-card:hover .card-actions .icon-button:nth-child(4),
  .media-card:focus-within .card-actions .icon-button:nth-child(4) {
    animation-delay: 250ms;
  }

  .media-card:hover .card-facts,
  .media-card:focus-within .card-facts,
  .media-card:hover .card-panel .genres,
  .media-card:focus-within .card-panel .genres,
  .media-card:hover .watch-hint,
  .media-card:focus-within .watch-hint {
    animation: line-in 380ms var(--ease-out) 180ms backwards;
  }

  .media-card:hover .card-facts + .card-facts,
  .media-card:focus-within .card-facts + .card-facts {
    animation-delay: 220ms;
  }

  .media-card:hover .card-panel .genres,
  .media-card:focus-within .card-panel .genres,
  .media-card:hover .watch-hint,
  .media-card:focus-within .watch-hint {
    animation-delay: 250ms;
  }

  .media-card:hover .card-caption,
  .media-card:focus-within .card-caption {
    opacity: 0;
  }

  .media-card:hover .card-open,
  .media-card:focus-within .card-open {
    border-radius: var(--card-radius, 12px) var(--card-radius, 12px) 0 0;
    box-shadow: none;
  }

  /* O card visível mais próximo de cada borda cresce para dentro da fileira. */
  .media-card.edge-left {
    transform-origin: left center;
  }

  .media-card.edge-right {
    transform-origin: right center;
  }

  .rail > .media-card:first-child,
  .rail > .ranked-item:first-child .media-card {
    transform-origin: left center;
  }

  .rail > .media-card:last-child,
  .rail > .ranked-item:last-child .media-card {
    transform-origin: right center;
  }
}

.catalog-section.is-wide .media-card {
  flex-basis: calc((100% - 42px) / 4);
}

.catalog-section.is-wide .card-open > img {
  aspect-ratio: 16 / 9;
}

/* a calha da esquerda precisa caber o número inteiro: com menos espaço o
   pôster cobria os algarismos e só sobrava uma lasca visível */
.ranked-item {
  position: relative;
  flex: 0 0 calc((100% - 42px) / 4);
  padding-left: clamp(94px, 9.2vw, 150px);
  scroll-snap-align: start;
  min-width: 0;
}

.ranked-item .media-card {
  width: 100%;
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .ranked-item .media-card:hover,
  .ranked-item .media-card:focus-within {
    z-index: 40;
  }
}

.rank-number {
  position: absolute;
  left: 0;
  bottom: 44px;
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(72px, 7.2vw, 116px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  z-index: 1;
  pointer-events: none;
  color: #0a0b0e;
  -webkit-text-stroke: 3px #d7dbe4;
  paint-order: stroke fill;
  text-shadow: 0 10px 28px #000000a6;
}

.ranked-item .card-open > img {
  aspect-ratio: 2 / 2.85;
}

.ranked-item:has(.media-card:hover),
.ranked-item:has(.media-card:focus-within) {
  z-index: 40;
}

/* Fileira de AVYLO Cards (Continuar assistindo e fileiras horizontais): a
   fileira reserva espaço em cima e embaixo para o card expandido crescer sem
   ser recortado (overflow-x:auto força o recorte vertical). A margem negativa
   devolve esse espaço à página, e o espaço extra não captura o mouse das
   fileiras vizinhas (pointer-events). */
.is-card-row .rail {
  gap: 8px;
  padding: 150px 20px 210px;
  margin: -134px -8px -182px;
  pointer-events: none;
}

/* A margem negativa do carrossel colapsa com o .rail-wrap, que passa a
   ocupar a mesma área reservada (acima e abaixo da fileira). Sem isto, o
   wrapper transparente de uma fileira cobria os cards da fileira vizinha:
   o mouse virava seta e o card de baixo/de cima não recebia o hover. Só os
   cards recebem eventos. */
.is-card-row .rail-wrap {
  pointer-events: none;
}

/* A seção do card expandido fica acima das vizinhas (títulos e setas da
   fileira seguinte). Ao fechar, ela só desce depois que o card terminou de
   encolher: sem isso, a fileira de baixo passava por cima do card durante a
   animação de saída. z-index numérico (1 → 8) para a troca respeitar o atraso. */
.is-card-row {
  z-index: 1;
  pointer-events: none;
  transition: z-index 0s 220ms;
}

/* O <section> em si fica "vazado" pro mouse (pointer-events: none acima):
   só o cabeçalho (título + setas) e os cards recebem o clique. Sem isso, a
   área extra reservada pro card expandido (padding-bottom do .rail) cobre a
   fileira de baixo e rouba o hover dela — foi o que quebrou "Para você",
   que fica logo abaixo de "Continuar assistindo" (essa tem z-index: 2). */
.is-card-row .section-heading {
  pointer-events: auto;
}

.is-card-row:has(.avylo-card:hover),
.is-card-row:has(.avylo-card :focus-visible) {
  z-index: 8;
  transition-delay: 0s;
}

.avylo-card {
  position: relative;
  flex: 0 0 calc((100% - 40px) / 6);
  min-width: 0;
  scroll-snap-align: start;
  pointer-events: auto;
  z-index: 1;
  transform-origin: center 30%;
  transition:
    transform 200ms var(--ease-premium),
    z-index 0s 200ms;
}

.continue-card {
  flex-basis: calc((100% - 32px) / 5);
}

.ac-media {
  position: relative;
}

/* a arte tem tamanho próprio (16:9), então pode usar content-visibility: o
   card de fora fica livre para crescer sem recorte */
.ac-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--card-surface);
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: auto 300px auto 169px;
  transition: border-radius 200ms var(--ease-out);
}

.ac-art > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* título sem backdrop: o pôster aparece inteiro sobre uma cópia desfocada */
.ac-art > img.art-main {
  object-fit: contain;
}

/* só o embed do YouTube (modo antigo) desenha título/logo no canto: o
   <video> próprio do preview não precisa desse escurecimento */
.ac-art:has(iframe.card-preview.is-on)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 135px 52px at 0 0, #0a0c10 0 45%, #0a0c10dd 68%, transparent 100%);
  pointer-events: none;
}

.ac-bar {
  position: relative;
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--card-track);
  overflow: hidden;
}

.ac-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--watch, 0) * 100%);
  border-radius: inherit;
  background: var(--accent);
}

/* progresso real dentro da arte (fileiras horizontais) */
.ac-art > .ac-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  z-index: 4;
  height: 3px;
  background: #0b0f18cc;
}

.continue-card > .ac-bar {
  width: 62%;
  margin: 9px auto 0;
  transition: opacity 160ms var(--ease-out);
}

.ac-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 12px 12px 14px;
  background: linear-gradient(180deg, #15121f, var(--card-surface) 60%);
  border: 1px solid var(--card-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--card-glow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms var(--ease-out),
    visibility 0s linear 180ms;
}

.ac-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ac-btn {
  --react-bg: var(--card-surface);
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1.5px solid #ffffff6b;
  border-radius: 50%;
  background: #ffffff0d;
  color: #f4f3f1;
  cursor: pointer;
  transition:
    border-color 150ms var(--ease-out),
    background 150ms var(--ease-out),
    color 150ms var(--ease-out);
}

.ac-btn svg {
  width: 16px;
  height: 16px;
}

.ac-btn:hover,
.ac-btn:focus-visible {
  --react-bg: #13202b;
  border-color: var(--accent);
  background: #28c8f814;
  color: var(--accent);
}

.ac-btn:focus-visible,
.ac-art:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ac-play {
  border-color: #f4f3f1;
  background: #f4f3f1;
  color: #06080d;
}

.ac-play:hover,
.ac-play:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #04121a;
}

.ac-play svg path {
  fill: currentColor;
}

.ac-more {
  margin-left: auto;
}

.ac-name,
.ac-resume,
.ac-meta,
.ac-genres {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ac-name {
  margin-top: 11px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* o logo (ou o nome em texto) já está na arte: não repete no painel */
.avylo-card:has(.ac-logo.has-logo, .ac-logo.is-text) .ac-name {
  display: none;
}

.ac-resume {
  margin-top: 10px;
  color: #dfe6f0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}

.ac-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #c9cfdb;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.ac-meta > span + span::before {
  content: "·";
  margin-right: 6px;
  color: #6f7686;
}

.ac-meta .ac-score {
  color: var(--accent);
}

.ac-meta .ac-tag {
  padding: 0 4px;
  border: 1px solid #ffffff40;
  border-radius: 3px;
  color: #e6e9f0;
  font-size: 10px;
  line-height: 15px;
}

.ac-meta .ac-tag::before,
.ac-meta > span + .ac-tag::before {
  content: none;
}

.ac-genres {
  margin-top: 6px;
  color: #9ea5b5;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

/* sem logo oficial: o nome em texto, limpo, no canto da arte */
.ac-art .ac-logo.is-text {
  left: 8%;
  right: 8%;
  bottom: 10%;
  width: auto;
  height: auto;
  max-height: none;
  opacity: 1;
}

.ac-art .ac-logo .title-art-fallback {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 2px 14px #000c;
}

.ac-art:has(.ac-logo.is-text)::before {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  z-index: 2;
  background: linear-gradient(transparent, #05040acc);
  pointer-events: none;
}

.ac-episode {
  margin: 12px 0 8px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ac-progress .ac-bar {
  flex: 1;
  height: 2.5px;
}

.ac-progress span {
  flex: 0 0 auto;
  color: #aab0c0;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.ac-panel [data-tip]::after,
.ac-panel [data-tip]::before {
  position: absolute;
  left: 50%;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 120ms var(--ease-out);
}

.ac-panel [data-tip]::after {
  content: attr(data-tip);
  bottom: calc(100% + 11px);
  padding: 5px 9px;
  border-radius: 4px;
  background: #eef4fa;
  color: #0b0f16;
  font: 650 11.5px/1.2 var(--font-ui);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.ac-panel [data-tip]::before {
  content: "";
  bottom: calc(100% + 5px);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #eef4fa;
}

.ac-panel [data-tip]:hover::after,
.ac-panel [data-tip]:hover::before,
.ac-panel [data-tip]:focus-visible::after,
.ac-panel [data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.react-wrap {
  position: relative;
  display: flex;
}

.react-pop {
  --react-bg: var(--card-surface-2);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--card-surface-2);
  border: 1px solid var(--card-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.55);
  transition:
    opacity 150ms var(--ease-out),
    transform 200ms var(--ease-premium),
    visibility 0s linear 200ms;
}

.react-wrap:hover .react-pop,
.react-wrap:focus-within .react-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 150ms var(--ease-out) 200ms,
    transform 220ms var(--ease-premium) 200ms,
    visibility 0s linear 200ms;
}

.react-option {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition:
    background 140ms var(--ease-out),
    transform 160ms var(--ease-premium);
}

.react-option:hover,
.react-option:focus-visible {
  --react-bg: #23314a;
  background: #23314a;
  color: var(--accent);
  transform: scale(1.08);
}

.react-option.is-active {
  --react-bg: #1d2a40;
  background: #1d2a40;
  box-shadow: inset 0 0 0 1.5px #28c8f8a6;
}

.react-main[aria-pressed="true"] {
  border-color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  /* intenção: só expande depois de 320ms parado sobre o card */
  .avylo-card:not(.is-collapsed):hover {
    transform: perspective(900px) translate(var(--hover-shift, 0px), var(--hover-lift, 0px)) scale(var(--card-scale, 1.25)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    z-index: 40;
    transition:
      transform 220ms var(--ease-premium) 320ms,
      z-index 0s;
  }

  .avylo-card:not(.is-collapsed):hover .ac-art::before {
    opacity: 1;
  }

  .avylo-card:not(.is-collapsed):hover .ac-art {
    border-radius: 6px 6px 0 0;
    transition-delay: 320ms;
  }

  .avylo-card:not(.is-collapsed):hover .ac-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 200ms var(--ease-out) 340ms,
      visibility 0s linear 340ms;
  }

  .avylo-card:not(.is-collapsed):hover > .ac-bar {
    opacity: 0;
    transition-delay: 320ms;
  }

  .avylo-card { transform-origin: center 30%; }
}

/* teclado: a intenção já é explícita, o card abre na hora (e os botões do
   painel ficam alcançáveis pelo Tab sem esperar a animação) */
.avylo-card:not(.is-collapsed):has(:focus-visible) {
  transform: translate(var(--hover-shift, 0px), var(--hover-lift, 0px)) scale(var(--card-scale, 1.25));
  z-index: 40;
  transition:
    transform 220ms var(--ease-premium),
    z-index 0s;
}

.avylo-card:not(.is-collapsed):has(:focus-visible) .ac-art {
  border-radius: 6px 6px 0 0;
}

.avylo-card:not(.is-collapsed):has(:focus-visible) .ac-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms var(--ease-out);
}

.avylo-card:not(.is-collapsed):has(:focus-visible) > .ac-bar {
  opacity: 0;
}

/* movimento reduzido: a espera de intenção continua, a animação não */
@media (prefers-reduced-motion: reduce) {
  .avylo-card,
  .avylo-card .ac-art,
  .avylo-card .ac-panel,
  .avylo-card .ac-btn,
  .avylo-card .card-title-art {
    transition-duration: 0s !important;
    animation: none !important;
  }
}

progress {
  width: 100%;
  height: 3px;
  display: block;
  appearance: none;
  border: 0;
  background: #ffffff18;
  margin: 10px 0 8px;
  accent-color: var(--accent);
}

progress::-webkit-progress-bar {
  background: #ffffff18;
}

progress::-webkit-progress-value {
  background: var(--accent);
}

progress::-moz-progress-bar {
  background: var(--accent);
}

.continue-card progress {
  transform-origin: left center;
  animation: grow-bar 620ms var(--ease-out);
}

@keyframes grow-bar {
  from {
    transform: scaleX(0);
  }
}

.continue-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 10px;
}

.continue-actions .button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
  background: transparent;
}

.continue-actions .button:hover {
  background: #ffffff0a;
}

.continue-actions svg {
  width: 14px;
}

.editorial {
  position: relative;
  margin: 12px var(--pad) 44px;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.editorial-image {
  position: absolute;
  inset: 0 0 0 38%;
  width: 62%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--bg) 18%, #050506cc 42%, #05050622 100%);
}

.editorial-copy {
  max-width: 52%;
  padding: 40px;
}

.editorial-copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.04em;
  line-height: 1.06;
  margin: 14px 0;
}

.editorial-copy p {
  color: #b0b5bf;
  font-size: 13px;
  line-height: 1.75;
  max-width: 420px;
}

.editorial-cast {
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 10px !important;
}

.page-head {
  padding: calc(var(--nav-h) + 36px) var(--pad) 20px;
  max-width: 900px;
}

.page-head .eyebrow {
  color: var(--accent);
  margin-bottom: 12px;
}

.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin: 0 0 12px;
}

.page-head p {
  max-width: 520px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

.filters {
  padding: 0 var(--pad);
  margin-bottom: 28px;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: #adb1ba;
  font-size: 12px;
  padding: 8px 14px;
  white-space: nowrap;
}

.chip.active,
.chip[aria-pressed="true"] {
  background: #eceae8;
  color: #101218;
  border-color: #eceae8;
}

.chip:hover:not(.active) {
  border-color: #ffffff40;
  color: #fff;
}

.filter-tools {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.filter-tools label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

select,
input[type="search"],
input[type="text"] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  padding: 10px 12px;
  min-height: 40px;
  font-size: 13px;
}

.filter-tools input[type="search"] {
  min-width: 240px;
}

#resultCount {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  padding-bottom: 10px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px 16px;
  padding: 0 var(--pad);
  margin: 24px 0 60px;
}

.catalog-grid .media-card {
  width: 100%;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 20px;
  max-width: 480px;
  justify-self: center;
  animation: reveal-in 400ms var(--ease-out);
}

.empty-state > svg {
  color: var(--accent);
  width: 32px;
  height: 32px;
  margin: 0 auto 18px;
}

.empty-state h2,
.empty-state h3 {
  font-size: 22px;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.empty-state p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 22px;
}

.empty-state.compact {
  padding: 28px 16px;
}

.best-spotlight {
  position: relative;
  margin: 0 var(--pad) 48px;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: 48px;
  overflow: hidden;
  isolation: isolate;
}

.best-spotlight > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.best-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--bg) 0%, transparent 50%),
    linear-gradient(90deg, #050506ee 0%, #05050666 50%, transparent 100%);
}

.best-spotlight-copy {
  max-width: 520px;
}

.best-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 12px 0 16px;
}

.best-score small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.score-card {
  position: relative;
  flex: 0 0 calc((100% - 42px) / 4);
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px #00000038;
}

.score-card .card-open > img {
  aspect-ratio: 16 / 10;
}

.score-card .score-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #050506cc;
  backdrop-filter: blur(6px);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  color: #35d5ff;
  z-index: 2;
}

dialog {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #0a0c10;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #5967e8 #07080d;
  box-shadow: 0 40px 120px #000000aa;
}

/* Reforça o comportamento nativo: regras de layout específicas nunca podem
   transformar um diálogo fechado em conteúdo comum no fim da página. */
dialog:not([open]) {
  display: none !important;
}

dialog::backdrop {
  background: #020204d9;
  backdrop-filter: blur(10px);
}

dialog[open] {
  animation: dialog-in var(--duration-normal) var(--ease-out);
}

dialog[open].is-closing {
  animation: dialog-out 200ms var(--ease-out) forwards;
}

.player-dialog[open] {
  animation: fade-soft var(--duration-normal) var(--ease-out);
}

.player-dialog[open].is-closing {
  animation: fade-out 200ms var(--ease-out) forwards;
}

dialog[open]::backdrop {
  animation: backdrop-in var(--duration-normal) linear;
}

dialog[open].is-closing::backdrop {
  animation: backdrop-out 200ms linear forwards;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(10px);
  }
}

@keyframes dialog-out {
  to {
    opacity: 0;
    transform: scale(0.985) translateY(6px);
  }
}

@keyframes fade-soft {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes backdrop-out {
  to {
    opacity: 0;
  }
}

.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #050506bf;
  border: 1px solid #ffffff20;
}

.dialog-close:hover {
  background: #1e222a;
}

.detail-dialog {
  width: min(920px, 100%);
}

.detail-hero {
  position: relative;
  height: min(420px, 52vh);
  isolation: isolate;
  background: #12151c;
  overflow: hidden;
}

.detail-hero > img,
.detail-hero > video,
.detail-hero > iframe,
.detail-hero .detail-trailer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  position: absolute;
  inset: 0;
}

.detail-trailer {
  z-index: 1;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}

.detail-trailer.is-on {
  opacity: 1;
}

.detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, #0a0c10 0%, #0a0c1000 55%),
    linear-gradient(90deg, #0a0c10cc 0%, transparent 60%);
  pointer-events: none;
}

.detail-hero:has(.detail-trailer.is-on)::after {
  background:
    radial-gradient(ellipse 250px 85px at 0 0, #0a0c10 0 45%, #0a0c10dc 68%, transparent 100%),
    linear-gradient(0deg, #0a0c10 0%, #0a0c1000 55%),
    linear-gradient(90deg, #0a0c10cc 0%, transparent 60%);
}

.detail-hero-content {
  position: absolute;
  bottom: 28px;
  left: 36px;
  right: 36px;
  z-index: 2;
}

.detail-hero-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 8px 0 14px;
  text-shadow: 0 4px 30px #00000080;
}

.detail-hero-content .title-logo-image {
  max-width: min(100%, 470px);
  max-height: 112px;
}

.editorial-copy .title-logo-image,
.best-spotlight-copy .title-logo-image {
  max-width: min(100%, 440px);
  max-height: 105px;
}

.detail-body {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 0 28px;
  padding: 8px 36px 36px;
  animation: reveal-in 320ms var(--ease-out);
}

.detail-main > .eyebrow {
  margin-bottom: 4px;
}

.detail-main > p {
  font-size: 14px;
  line-height: 1.8;
  color: #c0c3ca;
  margin: 0;
}

.detail-actions {
  margin: 16px 0 20px;
}

.detail-actions .icon-button {
  border: 1px solid #ffffff35;
  border-radius: 4px;
}

.detail-facts {
  padding-top: 28px;
  font-size: 12px;
  line-height: 1.85;
  color: #b8bcc4;
}

.detail-facts p {
  margin-bottom: 10px;
}

.detail-facts span {
  display: block;
  color: #6d737f;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.detail-body > .episodes,
.detail-body > .related {
  grid-column: 1 / -1;
}

.episodes {
  margin-top: 28px;
}

.episodes .section-heading {
  position: relative;
  z-index: 20;
  align-items: center;
}

.episodes .section-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.season-menu {
  position: relative;
  flex: 0 0 auto;
}

.season-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #4d4d4d;
  border-radius: 4px;
  background: #242424;
  color: #fff;
  font: 700 17px/1 var(--font-ui);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background 140ms var(--ease-out),
    border-color 140ms var(--ease-out);
}

.season-trigger:hover {
  background: #2f2f2f;
}

.season-menu.is-open .season-trigger {
  border-color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.season-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  transition: transform 160ms var(--ease-out);
}

.season-menu.is-open .season-caret {
  transform: rotate(180deg);
}

.season-list {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 30;
  min-width: 236px;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 8px 0 10px;
  border: 1px solid #4d4d4d;
  border-radius: 2px;
  background: #242424;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  animation: reveal-in 140ms var(--ease-out);
}

.season-option {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.season-option strong {
  font: 700 17px/1.25 var(--font-ui);
  letter-spacing: -0.01em;
}

.season-option span {
  color: #e5e5e5;
  font-size: 12.5px;
  font-weight: 500;
}

.season-option:hover,
.season-option:focus-visible {
  background: #414141;
}

.season-list hr {
  margin: 10px 16px;
  border: 0;
  border-top: 1px solid #4d4d4d;
}

.episode-season-head {
  margin: 22px 0 8px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.episode-list {
  transition:
    opacity 140ms var(--ease-out),
    transform 140ms var(--ease-out);
}

.episode-list.is-out {
  opacity: 0;
  transform: translateY(6px);
}

.episode-list.is-in {
  animation: reveal-in 180ms var(--ease-out);
}

/* Episódios: miniatura | número + título + duração / sinopse em 2 linhas | play */
.episode {
  position: relative;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  border-radius: 6px;
  transition: background-color 180ms var(--ease-out);
}

.episode:hover {
  background: #ffffff05;
}

.episode-body {
  min-width: 0;
}

.episode-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.episode-title-row h4 {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.episode-duration {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.episode-synopsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.episode-play {
  flex-shrink: 0;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  opacity: 0.7;
  transition:
    opacity 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out);
}

.episode:hover .episode-play,
.episode-play:focus-visible {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
}

/* episódio indicado pela retomada: filete e fundo ciano bem discretos */
.episode.is-next {
  background: #28c8f80b;
  box-shadow: inset 2px 0 0 var(--accent);
}

.episode-next-badge {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.related {
  margin-top: 32px;
}

.related h3 {
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.related .catalog-grid {
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.search-dialog {
  width: min(1080px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 40px)); /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  height: min(760px, calc(100dvh - 40px));
  min-height: 480px;
  padding: 0;
  overflow: hidden;
  border-color: #ffffff18;
  border-radius: 12px;
  background: #0a0d12;
}

.search-dialog[open] .search-top {
  animation: hero-line 280ms var(--ease-out);
}

/* cartões provisórios da busca: só enquanto não há nenhum resultado */
.search-skeleton {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.search-skeleton span,
.search-skeleton i {
  display: block;
  border-radius: 8px;
  background: linear-gradient(110deg, #141820 30%, #1b1f28 46%, #141820 62%);
  background-size: 220% 100%;
  animation: skeleton 1.8s linear infinite;
}

.search-skeleton span {
  aspect-ratio: 2 / 3;
  border-radius: 12px;
}

.search-skeleton i {
  height: 11px;
  width: 80%;
}

.search-skeleton i + i {
  width: 45%;
}

@media (prefers-reduced-motion: reduce) {
  .search-skeleton span,
  .search-skeleton i {
    animation: none;
  }
}

/* resultado escolhido pelas setas do teclado */
.search-results .card-open:focus-visible {
  outline: 2px solid var(--accent, #28c8f8);
  outline-offset: 3px;
}

.search-results.is-fresh {
  animation: fade-soft var(--duration-fast) var(--ease-out);
}

/* ---- busca inteligente: sugestões ao digitar (estilo YouTube) */
.search-suggest-list {
  position: absolute;
  top: 74px;
  left: 64px;
  right: 120px;
  z-index: 30;
  display: grid;
  padding: 6px;
  border: 1px solid #ffffff1c;
  border-radius: 12px;
  background: #11151c;
  box-shadow: 0 18px 40px #0009;
}
.search-suggest-list[hidden] { display: none; }
.search-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c9d1df;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.search-suggestion svg { flex: none; width: 16px; height: 16px; opacity: 0.6; }
.search-suggestion strong { color: #fff; font-weight: 700; }
.search-suggestion:hover,
.search-suggestion.is-active { background: #ffffff12; color: #fff; }

/* ---- busca inteligente: resultados por descrição/gênero/pessoa */
.smart-results { margin-bottom: 26px; }
.smart-results .section-heading h2 { display: flex; align-items: center; gap: 10px; }
.smart-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #28c8f833, #825cff40);
  border: 1px solid #825cff66;
  color: #e9e4ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.smart-badge svg { width: 12px; height: 12px; }
.smart-intent { color: #9fb0c8; font-size: 13px; }
.smart-item { display: grid; gap: 6px; align-content: start; min-width: 0; }
.smart-why {
  margin: 0;
  color: #9aa5b8;
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 650px) {
  .search-suggest-list { left: 12px; right: 12px; top: 70px; }
}

.search-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 18px 28px;
  border-bottom: 1px solid #ffffff14;
  background: #0d1015;
}

.search-top > svg,
.search-top > span svg {
  width: 21px;
  height: 21px;
  color: #a5abb6;
}

.search-top input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 0;
  outline: none;
  color: #f4f5f7;
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 500;
  letter-spacing: -0.025em;
  min-width: 0;
}

.search-top input::placeholder {
  color: #737984;
  opacity: 1;
}

.search-top kbd {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #8d939d;
  border: 1px solid #ffffff14;
  background: #ffffff05;
  padding: 5px 7px;
  border-radius: 5px;
}

.search-top > button {
  margin-left: auto;
}

#searchContent {
  height: calc(100% - 82px);
  padding: 20px 28px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-discovery {
  padding-bottom: 22px;
  border-bottom: 1px solid #ffffff0d;
}

.search-discovery h3 {
  font-size: 11px;
  margin: 0 0 10px;
  color: #8f95a0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-discovery .chip {
  padding: 7px 13px;
  border-radius: 999px;
  background: #ffffff04;
}

.search-dialog .section-heading {
  align-items: center;
  margin: 22px 0 14px;
}

.search-dialog .section-heading span {
  color: #9298a3;
  font-size: 12px;
}

.search-results.catalog-grid {
  padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 22px 14px;
  margin: 0;
}

.search-results .card-caption {
  padding: 34px 10px 10px;
  background: linear-gradient(transparent, #050506f5 68%);
}

.search-results .card-caption h3 {
  font-weight: 600;
}

.search-results .card-caption small {
  font-weight: 500;
}

.search-suggest {
  grid-column: 1 / -1;
  margin-top: 8px;
  text-align: left;
}

.search-suggest > h3 {
  font-size: 16px;
  margin: 8px 0 14px;
}

.search-suggest .catalog-grid {
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.utility-dialog {
  width: min(480px, 100%);
  padding: 36px;
}

.utility-dialog:has(.settings-list) {
  width: min(540px, 100%);
  padding: 0;
  overflow: hidden;
  border-color: #ffffff1c;
  background: #0b0e13;
  max-height: min(760px, calc(100vh - 32px)); /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  max-height: min(760px, calc(100dvh - 32px));
}

.settings-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 30px 72px 24px 30px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 12% 0%, #28c8f820, transparent 42%), radial-gradient(circle at 88% 0%, #ff649f12, transparent 38%), linear-gradient(180deg, #121827, #0b0e13);
}

.settings-head-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #28c8f845;
  border-radius: 12px;
  background: #28c8f814;
  color: var(--accent);
}

.settings-head-icon svg {
  width: 20px;
  height: 20px;
}

.settings-head .eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
}

.settings-head h2 {
  margin: 0 0 5px;
}

.settings-head p:last-child {
  margin: 0;
  line-height: 1.5;
}

.settings-list {
  display: grid;
  gap: 10px;
}

.settings-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: min(570px, calc(100vh - 180px)); /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  max-height: min(570px, calc(100dvh - 180px));
  scrollbar-width: thin;
  scrollbar-color: #ffffff30 transparent;
}

.settings-group {
  padding: 20px 24px 0;
}

.settings-group + .settings-group { padding-top: 14px; }

.settings-group h3 {
  margin: 0 0 10px 2px;
  color: #9299a7;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.utility-dialog[open]:has(#profileEditForm) {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 32px)); /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  max-height: min(720px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.utility-dialog[open]:has(#profileEditForm) .dialog-close {
  z-index: 20;
}

.utility-dialog h2 {
  font-size: 24px;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.profile-form-head {
  padding: 30px 32px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #131820, #0c0f14);
}

.profile-form-head .eyebrow {
  margin: 0 0 7px;
  color: var(--accent);
}

.profile-form-head h2 {
  margin: 0 0 5px;
}

.profile-form-head p:last-child {
  margin: 0;
  line-height: 1.5;
}

#profileEditForm {
  padding: 24px 32px 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #5967e8 #07080d;
}

#profileEditForm::-webkit-scrollbar {
  width: 9px;
}

#profileEditForm::-webkit-scrollbar-track {
  background: #07080d;
}

#profileEditForm::-webkit-scrollbar-thumb {
  border: 2px solid #07080d;
  background: linear-gradient(180deg, #25c9f7, #5967e8 55%, #a557e8);
  background-clip: padding-box;
  border-radius: 999px;
}

#profileEditForm::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #54d8fb, #7180ff 52%, #c06ff4);
  background-clip: padding-box;
}

.utility-dialog p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted);
}

.utility-dialog label.setting,
.utility-dialog #profileEditForm label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
  font-size: 13px;
}

.utility-dialog label.squish-setting {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid #ffffff0e;
  border-radius: 12px;
  background: #ffffff05;
  cursor: pointer;
  transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.utility-dialog label.squish-setting:hover {
  border-color: #28c8f836;
  background: #28c8f80c;
  transform: translateY(-1px);
}

.squish-setting span {
  display: grid;
  gap: 4px;
}

.squish-setting strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.squish-setting strong em {
  color: var(--accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.squish-setting small {
  color: var(--muted);
  line-height: 1.45;
}

.utility-dialog .squish-setting input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.squish-setting > i {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #292e38;
  box-shadow: inset 0 0 0 1px #ffffff12;
  transition: background 300ms var(--ease-out), transform 180ms var(--ease-out);
}

.squish-setting > i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #e8ebef;
  box-shadow: 0 2px 7px #0008;
  transition: transform 380ms var(--ease-premium), width 170ms var(--ease-out), background 280ms;
}

.squish-setting:hover > i {
  transform: scale(1.035);
}

.squish-setting:active > i::after {
  width: 23px;
}

.squish-setting input:checked + i {
  background: var(--accent);
}

.squish-setting input:checked + i::after {
  transform: translateX(22px);
  background: #07120f;
}

.squish-setting input:checked:active + i::after {
  transform: translateX(17px);
}

.squish-setting input:focus-visible + i {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.settings-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 24px 24px;
  padding: 13px 15px;
  border-radius: 10px;
  background: #ffffff05;
  color: var(--muted);
}

.quality-setting {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 13px 16px;
  border: 1px solid #ffffff0e;
  border-radius: 12px;
  background: #ffffff05;
}

.quality-setting > span { display: grid; gap: 4px; }
.quality-setting strong { font-size: 13px; }
.quality-setting small { color: var(--muted); }

.quality-setting select {
  min-width: 126px;
  height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  background: #171b23;
  color: var(--text);
  font: inherit;
}

body.compact-catalog .media-card { flex-basis: calc((100% - 84px) / 7); }
body.compact-catalog .wide-card { flex-basis: calc((100% - 70px) / 6); }
body.reduce-effects .card-open::after { display: none; }
body.reduce-effects .media-card { transition-duration: 100ms; }

/* Configurações: mesma hierarquia da conta de referência, no tema AVYLO. */
body.settings-view {
  background: radial-gradient(circle at 82% 5%, #6a237b24, transparent 31%),
    radial-gradient(circle at 10% 18%, #087fa41c, transparent 34%), #08090d;
}

body.settings-view .nav {
  background: #08090df5;
  border-bottom: 1px solid #ffffff16;
}

body.settings-view .nav-links,
body.settings-view .nav-actions > [data-search],
body.settings-view footer,
body.settings-view .bottom-nav { display: none; }

#app:has(.account-shell) { min-height: 100dvh; }

.account-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 66px);
  width: min(1210px, calc(100% - 56px));
  margin: calc(var(--nav-h) + 34px) auto 80px;
  align-items: start;
}

.account-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  display: grid;
  gap: 28px;
}

.account-back,
.account-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 9px;
  color: #aab1bf;
  font-weight: 650;
  font-size: 13px;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.account-back { color: #dce2ec; }
.account-back svg { width: 17px; height: 17px; }
.account-nav-link svg { width: 18px; height: 18px; }
.account-back:hover,
.account-nav-link:hover { background: #ffffff0d; color: #fff; }
.account-nav-link.is-active {
  color: #fff;
  background: linear-gradient(90deg, #28c8f821, #825cff13);
  box-shadow: inset 2px 0 var(--accent), inset 0 0 0 1px #28c8f824;
}
.account-nav-link.is-active svg { color: var(--accent); }
.account-sidebar nav { display: grid; gap: 4px; }
.account-sidebar-note {
  display: flex;
  gap: 10px;
  padding: 15px;
  border: 1px solid #ffffff0d;
  border-radius: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.account-sidebar-note svg { width: 16px; height: 16px; color: var(--accent); }

.account-main { min-width: 0; max-width: 860px; }
.account-heading { margin-bottom: 20px; }
.account-heading .eyebrow { color: var(--accent); margin-bottom: 4px; }
.account-heading h1 {
  margin: 0 0 2px;
  font-size: clamp(31px, 3vw, 40px);
  letter-spacing: -0.055em;
  line-height: 1.1;
}
.account-heading > p:last-child { margin: 0; color: #aeb5c2; }
.account-group { margin-top: 28px; }
.account-group > h2 {
  margin: 0 0 12px;
  color: #cbd1dd;
  font-size: 14px;
  font-weight: 650;
}
.account-card,
.account-choice-list {
  overflow: hidden;
  border: 1px solid #ffffff1d;
  border-radius: 13px;
  background: #11141b;
  box-shadow: 0 14px 40px #00000022;
}
.account-featured { position: relative; }
.account-featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #6876f3 55%, var(--accent-warm));
}
.account-card-feature { padding: 24px 25px 23px; }
.account-plan-kicker {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 5px;
  background: linear-gradient(90deg, #226fbc, #a22f72);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.account-card-feature h2 { margin: 16px 0 4px; font-size: 22px; letter-spacing: -.03em; }
.account-card-feature p { margin: 0; color: #b5bdc9; line-height: 1.55; }
.account-featured .account-row { border-top: 1px solid #ffffff18; }
.account-row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 73px;
  padding: 15px 21px;
  text-align: left;
  transition: background 190ms var(--ease-out);
}
.account-row + .account-row { border-top: 1px solid #ffffff12; }
.account-row:hover { background: #ffffff08; }
.account-row-icon {
  display: grid;
  place-items: center;
  width: 26px;
  color: #a9b5c7;
}
.account-row-icon svg { width: 20px; height: 20px; }
.account-row-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.account-row-copy strong { font-size: 14px; font-weight: 700; }
.account-row-copy small { color: #9ca5b4; font-size: 12px; line-height: 1.4; }
.account-row > svg { width: 17px; height: 17px; color: #8b93a3; }
.account-badge {
  padding: 4px 8px;
  border-radius: 5px;
  background: #28c8f822;
  color: #74dafa;
  font-size: 10px;
  font-weight: 800;
}
.account-footnote { margin: 17px 2px 0; color: #89929f; font-size: 12px; line-height: 1.55; }
.account-callout {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 20px;
  border: 1px solid #28c8f83c;
  border-radius: 12px;
  background: linear-gradient(100deg, #28c8f815, #825cff0a);
  color: #cfd6e3;
}
.account-callout svg { color: var(--accent); }
.account-callout p { margin: 0; line-height: 1.5; }

.account-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 82px;
  padding: 17px 22px;
  text-align: left;
}
.account-choice + .account-choice { border-top: 1px solid #ffffff12; }
.account-choice:hover { background: #ffffff08; }
.account-choice.is-selected { background: #28c8f80c; }
.account-choice > span:first-child { display: grid; gap: 3px; }
.account-choice strong { font-size: 14px; }
.account-choice small { color: #9ca5b4; }
.account-choice-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  color: transparent;
}
.account-choice.is-selected .account-choice-mark { border-color: var(--accent); background: var(--accent); color: #051016; }
.account-choice-mark svg { width: 16px; height: 16px; }

.account-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 13px 20px;
}
.account-profile-row + .account-profile-row { border-top: 1px solid #ffffff12; }
.account-profile-row .avatar { width: 42px; height: 42px; border-radius: 8px; }
.account-profile-copy { display: grid; gap: 1px; flex: 1; min-width: 0; }
.account-profile-copy strong { font-size: 14px; }
.account-profile-copy small { color: #9ca5b4; }
.account-inline-btn {
  padding: 7px 11px;
  border: 1px solid #ffffff25;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
}
.account-inline-btn:hover { border-color: var(--accent); color: var(--accent); }
.account-add-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 40px);
  margin: 10px 20px 20px;
  padding: 12px;
  border: 1px solid #ffffff24;
  border-radius: 7px;
  background: #ffffff09;
  font-weight: 700;
}
.account-add-profile:hover { background: #28c8f815; border-color: #28c8f866; }

.account-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  padding: 16px 22px;
  cursor: pointer;
}
.account-toggle + .account-toggle,
.account-toggle + .account-row,
.account-row + .account-toggle { border-top: 1px solid #ffffff12; }
.account-toggle:hover { background: #ffffff08; }
.account-toggle > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.account-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* Tabela de preços (aba Assinatura): mesma pegada escura dos cartões de conta, com o plano
   do meio destacado (borda e selo, como no 21st.dev/pricing) em vez do gradiente no topo. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid #ffffff1d;
  border-radius: 16px;
  background: #11141b;
  box-shadow: 0 14px 40px #00000022;
}
.pricing-card.is-highlight {
  border-color: #28c8f866;
  background: linear-gradient(180deg, #162233, #11141b 55%);
  box-shadow: 0 20px 54px #000000388, 0 0 0 1px #28c8f82e;
  transform: translateY(-6px);
}
.pricing-badge {
  position: absolute;
  top: -13px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-rose));
  color: #051016;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
}
.pricing-badge svg { width: 12px; height: 12px; }
.pricing-name { margin: 6px 0 2px; color: #aeb5c2; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pricing-price { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px; }
.pricing-price strong { font-size: 34px; letter-spacing: -.03em; }
.pricing-price span { color: #9ca5b4; font-size: 13px; }
.pricing-billed { margin: 0 0 18px; color: #74dafa; font-size: 12px; font-weight: 650; }
.pricing-features { display: grid; gap: 11px; margin: 0 0 22px; padding: 0; list-style: none; flex: 1; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; color: #cbd1dd; font-size: 13px; line-height: 1.4; }
.pricing-features svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent); }
.pricing-cta {
  padding: 13px;
  border-radius: 9px;
  background: #ffffff10;
  border: 1px solid #ffffff28;
  color: var(--text);
  font-weight: 750;
  font-size: 14px;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.pricing-cta:hover { transform: translateY(-1px); border-color: #ffffff48; }
.pricing-card.is-highlight .pricing-cta {
  background: linear-gradient(90deg, var(--accent), var(--accent-rose));
  border-color: transparent;
  color: #051016;
}
.pricing-card.is-highlight .pricing-cta:hover { filter: brightness(1.07); }
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.is-highlight { transform: none; order: -1; }
}

/* Modal "Falar no WhatsApp" (dialog #utility reaproveitado): QR code gerado localmente
   em cima, botão de link embaixo — a mesma ideia do CTA de WhatsApp da tela de login. */
.whatsapp-modal-body { display: grid; gap: 4px; text-align: center; }
.whatsapp-modal-body .eyebrow { margin: 0; color: var(--accent); }
.whatsapp-modal-body h2 { margin: 2px 0 4px; }
.whatsapp-modal-lead { margin: 0 0 22px; color: #b5bdc9; font-size: 13px; line-height: 1.5; }
.whatsapp-qr-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px;
  margin: 0 auto 18px;
  width: fit-content;
  border: 1px solid #ffffff1d;
  border-radius: 14px;
  background: #ffffff08;
}
.whatsapp-qr-svg { width: 176px; height: 176px; border-radius: 6px; }
.whatsapp-qr-card p { margin: 0; color: #9ca5b4; font-size: 12px; }
.whatsapp-modal-divider { display: flex; align-items: center; gap: 12px; margin: 2px 0 18px; color: #767e8c; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.whatsapp-modal-divider::before, .whatsapp-modal-divider::after { content: ""; flex: 1; height: 1px; background: #ffffff18; }
.whatsapp-modal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: #25D366;
  color: #04240f;
  font-weight: 750;
  font-size: 14px;
  transition: filter 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.whatsapp-modal-link:hover { filter: brightness(1.06); transform: translateY(-1px); }
.whatsapp-modal-link svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .account-shell { grid-template-columns: 1fr; gap: 24px; width: min(800px, calc(100% - 36px)); }
  .account-sidebar { position: static; gap: 13px; }
  .account-sidebar nav { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .account-nav-link { flex: 0 0 auto; white-space: nowrap; }
  .account-sidebar-note { display: none; }
  .account-main { max-width: none; }
}

@media (max-width: 650px) {
  .account-shell { margin-top: calc(var(--nav-h) + 22px); width: calc(100% - 28px); }
  .account-heading h1 { font-size: 31px; }
  .account-card-feature { padding: 22px 18px; }
  .account-row { padding: 14px 15px; gap: 12px; }
  .account-row-copy small { font-size: 11px; }
  .account-toggle { padding: 15px; }
  .account-profile-row { padding: 12px 14px; gap: 9px; }
  .account-inline-btn { padding: 6px 8px; }
}

.settings-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 2px;
  color: #aeb6c5;
}

.settings-note p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

.utility-dialog input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

.utility-dialog #profileEditForm label {
  align-items: stretch;
}

.utility-dialog #profileEditForm input:not([type="checkbox"]) {
  width: 100%;
}

.player-dialog {
  width: min(980px, 100%);
  padding: 0;
  background: #050506;
}

.player-dialog.is-embed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.player-dialog.is-embed::backdrop {
  background: #000;
}

.player-dialog.is-native {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.player-dialog.is-native::backdrop {
  background: #000;
}

.player-dialog.is-native .player-cinema {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.player-top {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 8;
  display: flex;
  align-items: center;
  height: 48px;
  gap: 2px;
}

.player-mark {
  display: flex;
  align-items: center;
  height: 48px;
  gap: 8px;
  padding-right: 2px;
  pointer-events: none;
}

.player-mark img:first-child {
  width: 26px;
  height: 26px;
  display: block;
}

.player-wordmark {
  height: 15px;
  width: auto;
  display: block;
}

.player-dialog.is-embed .player-top .dialog-close {
  position: relative;
  top: auto;
  right: auto;
  width: 48px;
  height: 48px;
  margin: 0;
  color: #fff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.player-dialog.is-embed .player-top .dialog-close svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.6;
}

.player-dialog.is-embed .player-stage-embed {
  flex: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
}

.player-dialog.is-embed .player-embed-next {
  position: absolute;
  right: 18px;
  bottom: 86px;
  z-index: 6;
  margin: 0;
}

.player-dialog > h2 {
  padding: 22px 60px 16px 24px;
  font-size: 20px;
  margin: 0;
}

.player-dialog video {
  width: 100%;
  max-height: 72vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  max-height: 72dvh;
  display: block;
  background: #000;
}

.player-dialog #videoError {
  padding: 0 24px 16px;
  font-size: 12px;
  color: var(--muted);
}

.player-dialog .empty-state {
  padding: 60px 24px;
}

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  max-width: calc(100vw - 32px);
  transform: translate(-50%, 24px) scale(0.97);
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: min(330px, calc(100vw - 32px));
  padding: 13px 16px;
  border: 1px solid #ffffff18;
  background: #1a1e26f0;
  backdrop-filter: blur(10px);
  color: #f4f4f5;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-premium), visibility 420ms;
  pointer-events: none;
  margin: 0;
}

.toast.show {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  visibility: visible;
}

.toast.is-leaving {
  transform: translate(-50%, 18px) scale(0.98);
}

.toast-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #28c8f82b;
  color: var(--accent);
}

.toast-mark svg {
  width: 14px;
  height: 14px;
}

.toast > i {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left;
  animation: toast-fuse 2800ms linear forwards;
}

@keyframes toast-fuse {
  to { transform: scaleX(0); }
}

/* antes de o app desenhar a primeira tela o rodapé fica escondido: sem isso ele
   aparece no topo e despenca quando o conteúdo entra (deslocamento de layout) */
#app:empty + footer {
  visibility: hidden;
}

footer {
  padding: 40px var(--pad) 32px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #6d737f;
  font-size: 11px;
  line-height: 1.7;
}

footer .logo {
  font-size: 15px;
  color: #9ea3ad;
}

footer .logo-mark { width: 28px; height: 28px; }

footer .logo-wordmark { width: 88px; height: 18px; }
footer .logo small { font-size: 5.5px; }

footer .logo-orb {
  width: 14px;
  height: 17px;
  border-width: 4px;
}

footer p {
  margin: 0;
}

footer nav {
  display: flex;
  gap: 20px;
}

footer a:hover {
  color: #fff;
}

footer > small {
  max-width: 380px;
  font-size: 10px;
}

/* pôster vertical num quadro horizontal (ou o contrário): a arte aparece
   inteira e uma cópia desfocada preenche o resto, em vez de esticar a imagem */
img.art-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(26px) saturate(1.25) brightness(0.55);
  transform: scale(1.18);
  pointer-events: none;
}

/* a arte principal continua com o posicionamento do próprio quadro (todos os
   usos do desfoque são em imagens já absolutas): só o recorte muda */
img.art-main {
  object-fit: contain;
  background: transparent;
}

.hero > img.art-fill {
  z-index: -4;
  transition: opacity 0.45s var(--ease);
}

/* com a arte inteira à mostra, ela fica do lado oposto ao texto */
.hero > img.art-main,
.best-spotlight > img.art-main {
  object-position: 78% center;
}

.detail-hero > img.art-main {
  object-position: 74% center;
}

.editorial > img.art-fill,
.best-spotlight > img.art-fill {
  z-index: -3;
}

.episode-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #12151c;
  cursor: pointer;
}

.episode-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}

.episode:hover .episode-thumb img {
  transform: scale(1.03);
}

.episode-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* play sobre a miniatura: aparece no hover (desktop) e fica fixo no celular */
.episode-thumb-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #000000a6;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out);
  pointer-events: none;
}

.episode-thumb-play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  fill: currentColor;
  stroke: none;
}

.episode:hover .episode-thumb-play,
.episode-thumb:focus-visible .episode-thumb-play {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.episodes-tools {
  display: flex;
  align-items: center;
  gap: 14px;
}

.episodes-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* tablet: mesma estrutura, miniatura menor */
@media (max-width: 900px) {
  .episode {
    grid-template-columns: 140px minmax(0, 1fr) auto;
    gap: 14px;
  }
}

/* celular: miniatura + título/duração lado a lado; sinopse na largura toda
   embaixo; o play vira o toque na miniatura */
@media (max-width: 650px) {
  .episode {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas:
      "thumb meta"
      "syn syn";
    column-gap: 12px;
    row-gap: 8px;
    padding: 12px 6px;
  }

  .episode-thumb {
    grid-area: thumb;
  }

  .episode-body {
    display: contents;
  }

  .episode-meta {
    grid-area: meta;
    align-self: center;
    min-width: 0;
  }

  .episode-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .episode-title-row h4 {
    font-size: 13.5px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .episode-synopsis {
    grid-area: syn;
    margin: 0;
  }

  .episode-play {
    display: none;
  }

  .episode-thumb-play {
    width: 28px;
    height: 28px;
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .episode-thumb-play svg {
    width: 12px;
    height: 12px;
  }

  /* "Episódios" + contagem + temporada não cabem lado a lado em 375px:
     os controles descem para a linha de baixo em vez de alargar o modal */
  .episodes .section-heading {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .episodes-tools {
    gap: 10px;
  }
}

.image-error {
  filter: saturate(0.35);
}

@keyframes skeleton {
  to {
    background-position: -200% 0;
  }
}

@media (min-width: 1600px) {
  .media-card {
    flex-basis: calc((100% - 84px) / 7);
  }

  .ranked-item,
  .catalog-section.is-wide .media-card {
    flex-basis: calc((100% - 56px) / 5);
  }
}

@media (max-width: 1100px) {
  .hero-content {
    width: 58%;
  }

  .media-card {
    flex-basis: calc((100% - 56px) / 5);
  }

  .catalog-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ranked-item,
  .continue-card,
  .score-card,
  .catalog-section.is-wide .media-card {
    flex-basis: calc((100% - 28px) / 3);
  }

  .avylo-card:not(.continue-card) {
    flex-basis: calc((100% - 24px) / 4);
  }

  .search-results.catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  }
}

@media (max-width: 800px) {
  :root {
    --nav-h: 64px;
    --pad: 24px;
  }

  .nav {
    gap: 20px;
  }

  .nav-links {
    display: none;
  }

  .profile-copy {
    display: none;
  }

  .hero {
    height: clamp(470px, 68svh, 680px);
    padding: 24px 24px 76px;
    border-radius: 18px;
  }

  .hero-bottom { left: 24px; right: 24px; bottom: 20px; }
  .hero .preview-audio { right: 24px; bottom: 72px; }

  .hero-content {
    width: 68%;
  }

  .hero-backdrop,
  .hero-preview {
    object-position: 62% center;
  }

  .media-card {
    flex-basis: calc((100% - 42px) / 4);
  }

  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .detail-body {
    grid-template-columns: 1fr;
    padding: 8px 24px 28px;
  }

  .detail-facts {
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }

  .detail-hero-content {
    left: 24px;
    right: 24px;
  }
}

@media (max-width: 650px) {
  :root {
    --pad: 18px;
    --nav-h: 58px;
  }

  .hero-backdrop.is-ken {
    animation: none;
  }

  .nav-links {
    display: none;
  }

  .hero {
    min-height: 430px;
    height: min(560px, 66svh);
    align-items: flex-end;
    margin-top: calc(var(--nav-h) + 12px);
    padding: 20px 18px 72px;
    border-radius: 16px;
  }

  .hero::before {
    background:
      linear-gradient(0deg, #050506e8 0%, #050506b0 42%, #05050618 88%),
      linear-gradient(90deg, #05050655, transparent);
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
  }

  .hero .eyebrow {
    margin-bottom: 10px;
  }

  .hero-title {
    margin-bottom: 12px;
    font-size: clamp(34px, 12vw, 48px);
    line-height: 0.96;
  }

  .hero-title .title-logo-image { max-height: 110px; }

  .hero-title .hero-subtitle {
    margin-top: 10px;
    font-size: 11px;
  }

  .hero-meta {
    gap: 7px;
  }

  .hero-description {
    font-size: 13px;
    line-height: 1.55;
    margin: 12px 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-actions {
    flex-wrap: nowrap;
  }

  .hero-actions .button {
    padding: 0 16px;
    min-height: 40px;
    font-size: 12px;
  }

  .hero-bottom {
    left: 18px;
    right: 18px;
    bottom: 14px;
  }

  /* Tira de miniaturas não cabe inteira em telas estreitas: encolhe e, se
     ainda sobrar destaque, rola na horizontal em vez de estourar a largura. */
  .hero-nav {
    max-width: 100%;
    gap: 8px;
  }

  .hero-thumbs {
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hero-thumbs::-webkit-scrollbar {
    display: none;
  }

  .hero-thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 22px;
  }

  .hero + .catalog-section,
  .hero + .editorial { margin-top: 22px; }

  .catalog-section {
    margin-bottom: 28px;
  }

  .row-controls {
    display: none;
  }

  .is-continue .row-controls {
    display: flex;
    flex: 0 0 auto;
  }

  /* no mobile a fileira sangra até a borda; a folga do hover só somava
     4px de rolagem horizontal acidental na página */
  .rail-wrap {
    margin: 0;
  }

  .rail {
    padding: 4px 0 16px;
    margin: 0 calc(-1 * var(--pad)) 0 0;
    padding-right: var(--pad);
    margin-bottom: 0;
  }

  .media-card {
    flex-basis: 138px;
  }

  .card-panel {
    display: none;
  }

  .media-card:hover,
  .media-card:focus-within {
    transform: none;
  }

  .ranked-item {
    flex-basis: 250px;
    padding-left: 86px;
  }

  .rank-number {
    font-size: 68px;
    bottom: 40px;
  }

  .continue-card,
  .catalog-section.is-wide .media-card {
    flex-basis: 236px;
  }

  /* celular: cards horizontais compactos, sem expansão; o toque abre os
     detalhes (no Continuar, retoma) */
  .avylo-card:not(.continue-card) {
    flex-basis: 220px;
  }

  .is-card-row .rail {
    padding: 4px var(--pad) 16px 0;
    margin: 0 calc(-1 * var(--pad)) 0 0;
    pointer-events: auto;
  }

  .ac-panel {
    display: none;
  }

  /* mesma especificidade das regras de expansão, que vêm antes no arquivo */
  .avylo-card:not(.is-collapsed):hover,
  .avylo-card:not(.is-collapsed):has(:focus-visible) {
    transform: none;
  }

  .avylo-card:not(.is-collapsed):hover > .ac-bar,
  .avylo-card:not(.is-collapsed):has(:focus-visible) > .ac-bar {
    opacity: 1;
  }

  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
  }

  .page-head {
    padding-top: calc(var(--nav-h) + 24px);
  }

  .page-head h1 {
    font-size: 34px;
  }

  .filters .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--pad));
    padding-right: var(--pad);
  }

  .filter-tools label {
    flex: 1;
    min-width: 110px;
  }

  .filter-tools input[type="search"] {
    min-width: 0;
    width: 100%;
  }

  #resultCount {
    width: 100%;
    margin-left: 0;
    padding-bottom: 0;
  }

  .editorial {
    min-height: 400px;
    align-items: flex-end;
    margin-bottom: 32px;
  }

  .editorial-image {
    inset: 0;
    width: 100%;
    object-position: 58% center;
  }

  .editorial::before {
    background: linear-gradient(0deg, var(--bg) 0%, #050506b8 48%, #05050610 100%);
  }

  .editorial-copy {
    max-width: 100%;
    padding: 24px;
  }

  .best-spotlight {
    min-height: 360px;
    padding: 24px;
    margin-bottom: 36px;
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: #050506f2;
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    align-items: stretch;
    justify-content: space-around;
  }

  .bottom-nav a,
  .bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 52px;
    flex: 1;
    color: #848b98;
    font-size: 9px;
  }

  .bottom-nav svg {
    width: 18px;
    height: 18px;
  }

  .bottom-nav .active {
    color: var(--accent);
  }

  footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .toast {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }

  dialog {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px); /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
    max-height: calc(100dvh - 16px);
  }

  .search-dialog {
    width: 100%;
    height: 100vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
    height: 100dvh;
    max-width: 100%;
    max-height: 100vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: 18px;
  }

  .search-dialog .search-top {
    margin: -18px -18px 0;
    padding-inline: 18px;
  }

  .search-dialog #searchContent {
    height: calc(100% - 64px);
    margin-inline: -18px;
    padding: 18px;
  }

  .search-top kbd {
    display: none;
  }

  .search-results.catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .related .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-hero {
    height: 280px;
  }

  .detail-hero-content .title-logo-image {
    max-width: calc(100% - 40px);
    max-height: 86px;
  }

  .preview-audio {
    bottom: 68px;
  }

  .who-profile,
  .who-add {
    width: 104px;
  }

  .who-profile .avatar,
  .who-add span {
    width: 76px;
    height: 76px;
    font-size: 22px;
  }

  .who-row {
    gap: 20px;
  }

  .utility-dialog {
    padding: 26px 20px;
  }

  .avatar-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .cropper-dialog {
    padding: 24px 16px;
  }

  .crop-stage {
    width: 230px;
    height: 230px;
  }
}

@media (max-width: 375px) {
  .hero-title {
    font-size: 40px;
  }

  .media-card {
    flex-basis: 128px;
  }

  .ranked-item {
    flex-basis: 232px;
    padding-left: 80px;
  }

  .rank-number {
    font-size: 62px;
  }
}

/* a sessão já viu a intro (decidido por um script no <head>): nem chega a pintar */
html.intro-seen .boot-intro {
  display: none;
}

.boot-intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, #1266e94a, transparent 38%),
    radial-gradient(circle at 82% 76%, #ff4f9740, transparent 38%),
    radial-gradient(circle at 56% 38%, #6635e42e, transparent 32%),
    #04050a;
  pointer-events: none;
  opacity: 1;
  transition: opacity 650ms var(--ease-out), visibility 650ms;
}

.boot-intro::before {
  content: "";
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #28c8f800, #28c8f817, #825cff1f, #ff649f16, #28c8f800);
  filter: blur(50px);
  animation: boot-aurora 12s linear infinite;
}

.boot-brand {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
}

@property --reveal {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -20%;
}

.boot-intro-mark {
  width: 86px;
  height: 86px;
  object-fit: contain;
  --reveal: -20%;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, #000 calc(var(--reveal) - 20%), transparent var(--reveal), transparent 100%);
  mask-image: linear-gradient(115deg, #000 0%, #000 calc(var(--reveal) - 20%), transparent var(--reveal), transparent 100%);
  animation:
    intro-mark 420ms var(--ease-out),
    boot-draw 2.8s var(--ease-premium) infinite;
}

.boot-intro-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  animation: intro-name 420ms var(--ease-out) 160ms backwards;
}

.boot-intro-name span { color: #8e97ad; font-size: 0.68em; }

.boot-wordmark {
  width: 196px;
  height: auto;
  animation: intro-name 420ms var(--ease-out) 100ms backwards;
}

.boot-intro.is-out {
  opacity: 0;
  visibility: hidden;
}

/* No is-out, a animação contínua cede lugar à transição de saída (senão a
   animation ganha da transition e o scale(1.035) nunca aparece). */
.boot-intro.is-out .boot-brand,
.boot-intro.is-out .boot-intro-mark {
  animation: none;
}

.boot-intro.is-out .boot-brand {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 420ms var(--ease-out), transform 650ms var(--ease-premium);
}

@keyframes intro-mark {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes intro-name {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* "A logo redesenha a logo": uma varredura diagonal (mask-image, controlada
   pela custom property --reveal) descobre a marca progressivamente, como se
   ela estivesse sendo traçada, segura cheia por um instante, dissolve e
   recomeça — só a logo, sem caixa, anel ou texto de status. */
@keyframes boot-draw {
  0% { --reveal: -20%; opacity: 0; }
  10% { opacity: 1; }
  55% { --reveal: 115%; opacity: 1; }
  70% { opacity: 1; }
  85% { opacity: 0; }
  100% { --reveal: -20%; opacity: 0; }
}

@keyframes boot-aurora {
  to { transform: rotate(1turn) scale(1.08); }
}

/* a sessão já viu a boa-vinda junto com a intro: nem chega a pintar */
html.intro-seen .welcome-gate {
  display: none;
}

/* Tela de boas-vindas: duas faixas horizontais de pôsteres do catálogo
   deslizando em sentidos opostos. Cada cartaz tem escala/nitidez/opacidade
   recalculadas a cada frame (JS, ver renderWelcomeGate/welcomeDepthLoop) a
   partir da distância até o centro da tela — pequeno e enevoado perto do
   centro (ponto de fuga), grande e nítido perto das bordas — simulando a
   profundidade sem depender de rotação 3D do contêiner inteiro. */
.welcome-gate {
  position: fixed;
  inset: 0;
  z-index: 380;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #060608;
  opacity: 0;
  pointer-events: none;
  transition: opacity 750ms var(--ease-premium);
}

.welcome-gate.is-in {
  opacity: 1;
  pointer-events: auto;
}

.welcome-gate.is-out {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.welcome-rails {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(18px, 6vh, 64px);
}

.welcome-row {
  position: relative;
  width: 100%;
  height: clamp(160px, 24vw, 300px);
  overflow: hidden;
}

.welcome-row-track {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  transform: translateY(-50%);
  will-change: transform;
}

.welcome-row--a .welcome-row-track {
  animation: welcome-drift-a 70s linear infinite;
}

.welcome-row--b .welcome-row-track {
  animation: welcome-drift-b 70s linear infinite;
}

@keyframes welcome-drift-a {
  from { transform: translateY(-50%) translateX(0); }
  to { transform: translateY(-50%) translateX(-50%); }
}

@keyframes welcome-drift-b {
  from { transform: translateY(-50%) translateX(-50%); }
  to { transform: translateY(-50%) translateX(0); }
}

.welcome-card {
  flex: none;
  width: clamp(110px, 13vw, 180px);
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #15151a;
  box-shadow: 0 18px 40px #000000a0;
  transition: filter 260ms linear;
  will-change: transform, opacity, filter;
}

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

.welcome-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%, #060608 0%, #060608e0 40%, #06060898 62%, transparent 82%),
    linear-gradient(180deg, #060608 0%, #06060870 14%, transparent 34%, transparent 66%, #06060878 86%, #060608 100%);
}

.welcome-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
  padding: 0 24px;
  max-width: 620px;
}

.welcome-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 16px 7px 10px;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  background: #ffffff0f;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e6ecff;
}

.welcome-mark {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.welcome-title {
  margin: 0;
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 4px 32px #000000c0;
}

.welcome-title span {
  background: linear-gradient(95deg, #ffffff 10%, #cfe8ff 45%, var(--accent) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Palavra que troca sozinha ("assistir" / "maratonar" / ...): cada opção
   ocupa a mesma posição (absolute) dentro de uma caixa com altura de uma
   linha; a JS alterna a classe is-active/is-leaving para um slide vertical
   com fade, como no hero de referência. A largura da caixa é travada em px
   pela JS (medindo a palavra mais larga) pra não "pular" o texto ao lado. */
.welcome-rotate-wrap {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}

.welcome-rotate {
  position: relative;
  display: inline-block;
  height: 1.14em;
  overflow: hidden;
  text-align: left;
}

.welcome-rotate span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(72%) scale(0.88);
  transition:
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease-out,
    filter 520ms ease-out;
  background: linear-gradient(95deg, #ffffff 10%, #cfe8ff 45%, var(--accent) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.welcome-rotate span.is-active {
  position: relative;
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.welcome-rotate span.is-leaving {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-58%) scale(0.92);
  transition:
    transform 460ms cubic-bezier(0.55, 0, 1, 0.45),
    opacity 320ms ease-in,
    filter 380ms ease-in;
}

/* risco fino sincronizado pela JS (não é @keyframes solto) que "preenche" por
   baixo da palavra ativa até a próxima troca — timer visual, não só texto
   parado. transform-origin fica preso na borda esquerda da caixa (não do
   texto) pra não se mexer quando a palavra muda de largura. */
.welcome-rotate-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #cfe8ff);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0.8;
}

.welcome-subtext {
  margin: 0;
  max-width: 480px;
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.55;
  color: #c3c8d6;
  text-shadow: 0 2px 16px #000000a0;
}

.welcome-footnote {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8e94a8;
  text-shadow: 0 2px 12px #00000090;
}

.welcome-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  background: #fff;
  color: #09090b;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
  box-shadow: 0 10px 30px #00000070, 0 0 0 0 #ffffff00;
}

.welcome-cta:hover {
  transform: translateY(-2px) scale(1.035);
  box-shadow: 0 16px 38px #00000080, 0 0 0 6px #ffffff14;
}

.welcome-cta:active {
  transform: translateY(0) scale(0.97);
}

@media (max-width: 650px) {
  .welcome-rails { gap: 10px; }
  .welcome-row { height: clamp(120px, 30vw, 180px); }
  .welcome-title { font-size: clamp(26px, 7.4vw, 34px); }
  .welcome-mark { width: 38px; height: 38px; }
  .welcome-content { gap: 20px; }
}

/* tela de login: mesma pegada visual da tela de boas-vindas (faixas de pôsteres +
   scrim), mas o formulário só aparece num modal aberto pelo botão principal (como o
   auth-modal de referência), com um "halo" de luz pulsando atrás do cartão. */
.login-view {
  position: relative;
  min-height: 100vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #060608;
}

.login-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(900px, 90vw);
  height: min(900px, 90vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #4f8bff4a 0%, transparent 62%);
  filter: blur(10px);
  opacity: 0.55;
  animation: login-halo-pulse 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes login-halo-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 0.68; transform: translate(-50%, -50%) scale(1.06); }
}

.login-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 96px 24px 48px;
  max-width: 560px;
}

.login-whatsapp {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid #ffffff1a;
}
.login-whatsapp-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #aeb4c4;
  max-width: 360px;
}
.login-whatsapp-text strong {
  display: block;
  margin-bottom: 4px;
  color: #e6ecff;
  font-size: 14.5px;
}
.login-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #1e2a22;
  border: 1px solid #25d36640;
  color: #4fe08a;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.login-whatsapp-btn:hover { transform: translateY(-2px); background: #213327; border-color: #25d366a0; }
.login-whatsapp-btn svg { flex: none; }

.login-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #06060ccc;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}
.login-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.login-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 36px 30px 30px;
  border-radius: 20px;
  background: linear-gradient(180deg, #14141a 0%, #0c0c10 100%);
  border: 1px solid #ffffff1f;
  box-shadow: 0 30px 80px #000000b0;
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms var(--ease-out);
}
.login-modal-backdrop.is-open .login-modal { transform: translateY(0) scale(1); opacity: 1; }

.login-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #ffffff22;
  background: #ffffff0d;
  color: #c7cbd8;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.login-modal-close:hover { background: #ffffff1c; color: #fff; }

.login-modal h2 { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.login-modal-lead { margin: 0 0 22px; font-size: 13px; line-height: 1.5; color: #9298a8; }

.login-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; text-align: left; }
.login-field span { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #b7bccb; }
.login-field input {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  background: #0a0a0e;
  border: 1px solid #ffffff22;
  color: #fff;
  font-size: 14.5px;
  transition: border-color 180ms ease, background 180ms ease;
}
.login-field input:focus { outline: none; border-color: var(--accent); background: #0d0d12; }

.login-error { min-height: 16px; margin: 2px 0 14px; font-size: 12.5px; color: #ff8585; }

.login-submit {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #09090b;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), opacity 200ms ease;
  box-shadow: 0 10px 26px #00000060;
}
.login-submit:hover { transform: translateY(-1px) scale(1.015); }
.login-submit:active { transform: translateY(0) scale(0.98); }
.login-submit:disabled,
.login-submit.is-loading { opacity: 0.6; cursor: progress; }

@media (max-width: 650px) {
  .login-content { padding: 72px 20px 36px; gap: 18px; }
  .login-modal { padding: 30px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .hero-backdrop.is-ken,
  .boot-intro,
  .boot-intro * {
    animation: none !important;
  }

  .rail {
    scroll-behavior: auto !important;
  }

  /* O carrossel principal foi solicitado explicitamente com movimento. */
  .hero-backdrop.is-arriving {
    animation: hero-arrive 900ms var(--ease-premium) both !important;
  }

  .hero-leave {
    transition: opacity 760ms var(--ease-out), transform 900ms var(--ease-premium), filter 700ms var(--ease-out) !important;
  }

  .hero-content,
  .hero-content.is-in > * {
    transition-duration: 180ms !important;
    animation-duration: 520ms !important;
  }

  .hero.is-switching::after {
    animation: hero-sheen 720ms var(--ease-out) !important;
  }
}

.detail-hero .preview-audio {
  top: auto;
  right: 20px;
  bottom: 20px;
  z-index: 3;
}

.who {
  min-height: calc(100vh - 180px); /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  min-height: calc(100dvh - 180px);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 72px 20px 96px;
}

/* tela "quem está assistindo": some com o menu e o rodapé pra ficar
   uma etapa isolada, como em qualquer app de streaming, em vez de uma
   página comum sem conteúdo */
body.gate-active .nav-links,
body.gate-active .nav-actions,
body.gate-active footer,
body.gate-active .bottom-nav {
  display: none;
}

body.gate-active .who {
  min-height: 100vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  min-height: 100dvh;
}

.who h1 {
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.04em;
  margin: 8px 0 0;
}

.who-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 36px;
}

.who-profile,
.who-add {
  width: 132px;
  display: grid;
  justify-items: center;
  gap: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
}

.who-profile .avatar,
.who-add span {
  width: 92px;
  height: 92px;
  border-radius: 8px;
  font-size: 28px;
}

.who-add span {
  display: grid;
  place-items: center;
  border: 1px dashed #ffffff3a;
  color: var(--text);
  font-size: 32px;
}

.who-profile:hover .avatar,
.who-profile:focus-visible .avatar,
.who-add:hover span,
.who-add:focus-visible span {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.who-form {
  margin-top: 28px;
  display: flex;
  gap: 8px;
  align-items: end;
}

.who-form input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
}

/* tela "quem está assistindo": nome + selo de perfil infantil, tag de
   último usado e o botão discreto de gerenciar perfis */
.who-profile-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.who-profile-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.kids-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border-radius: 3px;
  padding: 2px 6px;
}

.who-manage {
  margin-top: 40px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.who-manage:hover,
.who-manage:focus-visible {
  color: var(--text);
  border-color: var(--line);
}

/* entrada discreta e curta, em fileira; prefers-reduced-motion já zera
   isso via animation-duration global */
.who-profile,
.who-add {
  animation: who-card-in var(--duration-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 6) * 45ms);
}

@keyframes who-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.who.is-choosing .who-profile:not(.is-chosen),
.who.is-choosing .who-add,
.who.is-choosing .who-manage {
  opacity: 0.35;
  transition: opacity var(--duration-normal) var(--ease);
}

.who-profile.is-chosen .avatar {
  transform: scale(0.94);
  transition: transform var(--duration-normal) var(--ease);
}

/* formulário único de criar/editar perfil */
.profile-form-avatar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 82px;
  margin-bottom: 18px;
}

.avatar-lg {
  width: 82px;
  height: 82px;
  min-width: 82px;
  aspect-ratio: 1;
  border-radius: 16px;
  font-size: 24px;
  flex: 0 0 82px;
  box-shadow: 0 14px 30px #0006;
}

.avatar-sm {
  width: 40px;
  height: 40px;
  min-width: 40px;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 13px;
  flex: 0 0 40px;
}

.avatar-edit-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.avatar-edit-actions strong {
  font-size: 14px;
}

.avatar-edit-actions .button {
  min-height: 38px;
  padding: 0 14px;
}

.profile-avatar-section {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.avatar-picker-label {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 10px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.avatar-option {
  aspect-ratio: 1;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  opacity: 0.86;
  border: 1px solid transparent;
  transition:
    transform 180ms var(--ease-out),
    opacity 180ms var(--ease-out),
    border-color 180ms var(--ease-out);
}

.avatar-option::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(transparent, #050506c7);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

.avatar-option span {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  z-index: 1;
  overflow: hidden;
  color: #fff;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-align: center;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.avatar-option svg {
  width: 18px;
  height: 18px;
}

.avatar-option:hover,
.avatar-option:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  border-color: #ffffff52;
}

.avatar-option:hover::after,
.avatar-option:focus-visible::after,
.avatar-option:hover span,
.avatar-option:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.avatar-option.is-selected {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.avatar-picker-pack {
  margin-top: 16px;
}

.avatar-option.is-pack-icon {
  border-radius: 8px;
  background-size: cover !important;
  border-width: 2px;
  border-style: solid;
}

.avatar-option.is-pack-icon:hover,
.avatar-option.is-pack-icon:focus-visible {
  transform: translateY(-2px) scale(1.04);
}

.avatar-option.is-pack-icon.is-selected {
  outline-offset: 2px;
}

.avatar-pack-label {
  margin: 0 0 10px;
}

.avatar-pack-logo {
  display: block;
  height: 20px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 2px #00000080);
}

.profile-form-fields {
  padding-top: 4px;
}

.utility-dialog #profileEditForm .profile-name-field {
  margin: 16px 0 12px;
  gap: 7px;
  font-weight: 600;
}

.profile-name-field input {
  min-height: 44px;
  border-radius: 8px;
  background: #151a21;
  border: 1px solid #ffffff1f;
  padding: 0 13px;
}

.utility-dialog #profileEditForm .kids-setting {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff05;
  cursor: pointer;
}

.kids-setting input[type="checkbox"] {
  appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid #ffffff42;
  border-radius: 8px;
  background: #0b0e12;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    transform 420ms cubic-bezier(0.2, 1.55, 0.35, 1);
}

.kids-setting input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid #102019;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.45);
  transition:
    opacity 120ms ease,
    transform 360ms cubic-bezier(0.2, 1.6, 0.35, 1);
}

.kids-setting input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}

.kids-setting input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.kids-setting > span {
  display: grid;
  gap: 3px;
}

.kids-setting strong {
  font-size: 13px;
}

.kids-setting small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.button.ghost {
  background: transparent;
  border: 1px solid var(--line);
}

.button.ghost:hover {
  background: #ffffff0f;
}

.button.danger {
  background: #ff4d4d1f;
  color: #ff8080;
}

.button.danger:hover {
  background: #ff4d4d33;
}

.link-danger {
  font-size: 12px;
  font-weight: 600;
  color: #ff8080;
}

.link-danger:hover {
  text-decoration: underline;
}

.profile-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px -32px 0;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  background: #0c0f14f5;
  position: sticky;
  bottom: 0;
  z-index: 8;
  backdrop-filter: blur(14px);
}

.profile-form-footer .button.primary {
  min-width: 150px;
}

@media (max-width: 650px) {
  .profile-form-head {
    padding: 24px 20px 18px;
  }

  #profileEditForm {
    padding: 20px 20px 0;
  }

  .avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-form-footer {
    margin-inline: -20px;
    padding: 14px 20px;
  }
}

/* gerenciar perfis */
.manage-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 18px 0;
  max-height: 320px;
  overflow-y: auto;
}

.manage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-radius: 6px;
}

.manage-row:hover {
  background: #ffffff08;
}

.manage-profile-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* recorte de foto: Canvas + Pointer Events, sem biblioteca externa */
.cropper-dialog {
  width: min(380px, 100%);
  padding: 32px;
  text-align: center;
}

.cropper-dialog h2 {
  font-size: 20px;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.cropper-dialog p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}

.crop-stage {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface);
  touch-action: none;
  cursor: grab;
}

.crop-stage:active {
  cursor: grabbing;
}

#cropImage {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.crop-zoom {
  width: 100%;
  margin: 20px 0;
  accent-color: var(--accent);
}

.crop-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.player-stage {
  position: relative;
  background: #000;
}

.player-stage video {
  width: 100%;
  max-height: 72vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  max-height: 72dvh;
  display: block;
  object-fit: contain;
  background: #000;
}

.player-stage-embed {
  aspect-ratio: 16 / 9;
  max-height: 82vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  max-height: 82dvh;
  overflow: hidden;
  border-radius: 4px;
}

.player-stage-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.player-stage-loading {
  display: grid;
  place-items: center;
  min-height: 240px;
}

.player-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 44%, #0e3158 0%, #080d1b 26%, transparent 56%),
    radial-gradient(circle at 68% 65%, #431a4d55, transparent 40%),
    #03050a;
  color: #f7f9ff;
  text-align: center;
  transition: opacity 380ms var(--ease-out), visibility 380ms;
}

.player-stage.is-ready > .player-loading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Engasgo no meio do filme: o vídeo continua visível e só o anel gira por
   cima (sem fundo, sem texto) — a tela cheia é só para a primeira abertura. */
.player-stage.has-started > .player-loading {
  background: transparent;
  pointer-events: none;
  transition-duration: 160ms;
}
.player-stage.has-started > .player-loading p,
.player-stage.has-started > .player-loading small,
.player-stage.has-started > .player-loading .player-loading-reveal {
  display: none;
}
.player-stage.has-started > .player-loading .player-loading-symbol {
  background: #00000066;
  box-shadow: none;
  animation: none;
}

.player-loading-symbol {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin-bottom: 8px;
  border-radius: 26px;
  background: #ffffff08;
  box-shadow: 0 0 42px #28c8f827, inset 0 0 0 1px #ffffff14;
  animation: player-loader-pulse 2.2s ease-in-out infinite;
}

.player-loading-symbol span {
  position: absolute;
  inset: -11px;
  border: 2px solid transparent;
  border-top-color: #28c8f8;
  border-right-color: #825cff;
  border-radius: 50%;
  animation: player-loader-orbit 1.25s linear infinite;
}

.player-loading-symbol img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.player-loading p {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.player-loading small {
  max-width: min(480px, 80vw);
  color: #acb6ca;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-loading-reveal {
  margin-top: 18px;
  padding: 9px 17px;
  border: 1px solid #ffffff4a;
  border-radius: 999px;
  background: #ffffff12;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.player-loading-reveal:hover {
  background: #ffffff25;
}

@keyframes player-loader-orbit { to { transform: rotate(1turn); } }
@keyframes player-loader-pulse {
  50% { box-shadow: 0 0 70px #28c8f855, inset 0 0 0 1px #ffffff2c; }
}

.player-stage-error {
  display: grid;
  place-items: center;
  min-height: 320px;
}

.player-error {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 36px 28px;
  background:
    radial-gradient(circle at 50% 40%, #4a1414 0%, #0a0607 30%, transparent 60%),
    radial-gradient(circle at 70% 70%, #431a1a4d, transparent 42%),
    #03050a;
  color: #f7f9ff;
  text-align: center;
}

.player-error-symbol {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 20px;
  background: #ffffff08;
  box-shadow: 0 0 36px #ff4d4d26, inset 0 0 0 1px #ffffff14;
  color: #ff6b6b;
}

.player-error-symbol svg {
  width: 30px;
  height: 30px;
}

.player-error h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

.player-error p {
  margin: 0;
  max-width: 440px;
  color: #b9c0ce;
  font-size: 13px;
  line-height: 1.5;
}

.player-error-code {
  margin-top: 2px !important;
  color: #7c8598 !important;
  font-size: 11px !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

.player-error-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- Lista de reprodução (painel do AVYLO, fora do iframe) ---- */
.player-dialog.is-embed .player-top .player-episodes-toggle {
  width: 48px;
  height: 48px;
  margin: 0;
  color: #fff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.player-dialog.is-embed .player-top .player-episodes-toggle svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.2;
}

.player-episodes {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 12;
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  background: linear-gradient(180deg, #0d1118f7, #080a0ff7);
  border-left: 1px solid #ffffff14;
  box-shadow: -24px 0 60px #0009;
  backdrop-filter: blur(18px);
  animation: pl-in 220ms var(--ease-out) both;
}

.player-episodes[hidden] {
  display: none;
}

@keyframes pl-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

.pl-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 14px 16px 20px;
  border-bottom: 1px solid #ffffff12;
}

.pl-heading {
  flex: 1;
  min-width: 0;
}

.pl-heading h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pl-heading p {
  margin: 0;
  color: #c9ced8;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-heading small {
  display: block;
  margin-top: 3px;
  color: var(--muted, #8b919c);
  font-size: 12px;
}

.pl-season select {
  height: 34px;
  padding: 0 30px 0 12px;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  background: #ffffff0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.pl-season select:hover,
.pl-season select:focus-visible {
  border-color: #ffffff55;
  background-color: #ffffff17;
  outline: none;
}

.pl-season option {
  background: #10141c;
  color: #fff;
}

.pl-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: #fff;
}

.pl-list {
  flex: 1;
  margin: 0;
  padding: 8px 8px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
}

.pl-list li {
  /* temporadas longas: itens fora da tela não são desenhados */
  content-visibility: auto;
  contain-intrinsic-size: auto 92px;
}

.pl-item {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out);
}

.pl-item:hover,
.pl-item:focus-visible {
  background: #ffffff0f;
  outline: none;
}

.pl-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent, #28c8f8);
}

.pl-item.is-current {
  background: #28c8f812;
}

.pl-item.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent, #28c8f8);
}

.pl-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #151a23;
}

.pl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}

.pl-item:hover .pl-thumb img {
  transform: scale(1.04);
}

.pl-thumb-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #ffffff59;
  font-size: 22px;
  font-weight: 700;
}

.pl-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #ffffff33;
}

.pl-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  background: var(--accent, #28c8f8);
}

.pl-done {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #000000b3;
  color: var(--accent, #28c8f8);
}

.pl-done svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.pl-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pl-copy strong {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pl-copy small {
  color: var(--muted, #8b919c);
  font-size: 12px;
}

.pl-now {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent, #28c8f8);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pl-now svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
  stroke: none;
}

.pl-play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ffffff2e;
  color: #fff;
  opacity: 0.45;
  transition: opacity 180ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.pl-play svg {
  width: 13px;
  height: 13px;
  margin-left: 2px;
  fill: currentColor;
  stroke: none;
}

.pl-item:hover .pl-play,
.pl-item:focus-visible .pl-play {
  opacity: 1;
  border-color: transparent;
  background: #fff;
  color: #0b0d12;
}

.pl-item.is-current .pl-play {
  opacity: 1;
  border-color: #28c8f866;
  color: var(--accent, #28c8f8);
}

.pl-state {
  padding: 24px 16px;
}

@media (max-width: 650px) {
  .player-episodes {
    width: 100%;
    border-left: 0;
  }

  .pl-head {
    flex-wrap: wrap;
    padding: 16px 10px 12px 16px;
  }

  .pl-item {
    grid-template-columns: 96px minmax(0, 1fr) 28px;
    gap: 10px;
    padding: 7px;
  }

  .pl-copy strong {
    font-size: 13px;
  }

  .pl-play {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-episodes,
  .pl-thumb img {
    animation: none;
    transition: none;
  }
}

.player-embed-next {
  position: absolute;
  right: 18px;
  bottom: 86px;
  z-index: 6;
  max-width: min(320px, calc(100% - 36px));
  animation: player-next-in 500ms var(--ease-out) both;
}

.player-next-episode {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 8px 15px 8px 8px;
  overflow: hidden;
  border: 1px solid #ffffff50;
  border-radius: 18px;
  background: linear-gradient(120deg, #101a31ed, #0a0d16ed);
  color: #fff;
  text-align: left;
  box-shadow: 0 14px 42px #000a, inset 0 1px #ffffff1c;
  backdrop-filter: blur(12px);
  transition: transform 220ms var(--ease-out), border-color 220ms, box-shadow 220ms;
}

.player-next-episode::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 28%, #ffffff25 48%, transparent 68%);
  transform: translateX(-120%);
  animation: player-next-sheen 700ms var(--ease-out) 250ms both;
  pointer-events: none;
}

.player-next-episode:hover {
  transform: translateY(-3px);
  border-color: #28c8f8a8;
  box-shadow: 0 18px 50px #000b, 0 0 24px #28c8f83b;
}

.player-next-episode-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 13px;
  background: linear-gradient(135deg, #27cdf5, #7073ef);
  color: #061019;
}

.player-next-episode-icon svg { width: 22px; height: 22px; }
.player-next-episode > svg { width: 16px; height: 16px; color: #91dfff; }

.player-next-episode-copy {
  min-width: 0;
  flex: 1;
}

.player-next-episode-copy strong,
.player-next-episode-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-next-episode-copy strong {
  font-size: 13px;
  font-weight: 800;
}

.player-next-episode-copy small {
  margin-top: 2px;
  color: #acb8cd;
  font-size: 11px;
}

@keyframes player-next-in {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes player-next-sheen { to { transform: translateX(120%); } }

@media (max-width: 650px) {
  .player-dialog.is-embed .player-embed-next,
  .player-embed-next { right: 12px; bottom: 72px; max-width: calc(100% - 24px); }
  .player-next-episode { min-height: 58px; }
  .player-next-episode-icon { width: 42px; height: 42px; flex-basis: 42px; }
}

.player-skip {
  position: absolute;
  right: 16px;
  bottom: 76px;
  z-index: 3;
}

.player-next,
.player-end {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 24px;
  background: linear-gradient(180deg, #05050633 20%, #050506f2 78%);
}

.player-next[hidden],
.player-end[hidden],
.player-skip[hidden] {
  display: none;
}

.player-next h3,
.player-end h3 {
  margin: 0;
}

.player-count {
  color: var(--muted);
  font-size: 13px;
}

.player-picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.player-pick {
  background: #12151c;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  padding: 0;
}

.player-pick img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.player-pick span {
  display: block;
  padding: 8px;
  font-size: 12px;
}

.player-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, #050506e6);
  transition: opacity var(--duration-normal) var(--ease-out);
}

.player-scrub {
  flex: 1;
  accent-color: var(--accent);
  min-width: 0;
}

.player-time {
  color: #e8e8ea;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 84px;
}

.player-stage.is-quiet:not(.is-paused) .player-controls,
.player-stage.is-quiet:not(.is-paused) .player-skip {
  opacity: 0;
  pointer-events: none;
}

.player-stage.is-quiet:not(.is-paused) {
  cursor: none;
}

.tracks-menu {
  position: absolute;
  right: 12px;
  bottom: 58px;
  z-index: 5;
  background: #12151cf2;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px;
  display: grid;
  min-width: 140px;
}

.tracks-menu button {
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 4px;
}

.tracks-menu button[aria-checked="true"] {
  color: var(--accent);
}

@media (max-width: 650px) {
  .player-picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-controls .icon-button {
    width: 44px;
    height: 44px;
  }
}

.catalog-stream-sentinel {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 12px 0 28px;
}

.catalog-stream-loading {
  margin: 0;
  color: #ffffffa6;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.row-controls .row-cta {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}

.search-more {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: #ffffffa3;
  font-size: 14px;
  line-height: 1.5;
}

.search-more a {
  color: var(--accent);
  text-decoration: none;
}

.search-more a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Trilho compacto (prova visual em "Em alta"): densidade de plataforma de
   streaming — cards 16:9 pequenos, títulos colados aos cards, fileiras
   próximas. A expansão é maior (--card-scale) e flutua sobre o conteúdo; o
   espaço do hover continua reservado só dentro do carrossel (padding) e
   devolvido à página pela margem negativa, então não abre vão entre as
   fileiras. O painel é desenhado já dividido pela escala: depois de
   ampliado, botões e textos ficam no tamanho normal da interface.
   ========================================================================== */
.catalog-section.is-compact-row {
  margin-bottom: clamp(20px, 2.2vw, 34px);
}

.is-compact-row .section-heading {
  align-items: center;
  margin-bottom: 8px;
}

.is-compact-row .section-heading .eyebrow {
  display: none;
}

.is-compact-row .section-heading h2 {
  font-size: clamp(16px, 1.4vw, 21px);
}

.is-compact-row .row-controls button {
  width: 28px;
  height: 28px;
}

.is-compact-row .rail {
  gap: 6px;
  padding: 150px 20px 210px;
  margin: -146px -8px -206px;
}

/* 1440px: 7 cards; telas maiores mostram mais, menores menos */
.is-compact-row .avylo-card {
  --card-scale: 1.5;
  flex-basis: calc((100% - 36px) / 7);
}

.is-compact-row .ac-art {
  border-radius: 4px;
}

@media (min-width: 1700px) {
  .is-compact-row .avylo-card {
    flex-basis: calc((100% - 42px) / 8);
  }
}

@media (min-width: 2200px) {
  .is-compact-row .avylo-card {
    flex-basis: calc((100% - 48px) / 9);
  }
}

@media (max-width: 1360px) {
  .is-compact-row .avylo-card {
    flex-basis: calc((100% - 30px) / 6);
  }
}

@media (max-width: 1100px) {
  .is-compact-row .avylo-card {
    flex-basis: calc((100% - 24px) / 5);
  }
}

@media (max-width: 900px) {
  .is-compact-row .avylo-card {
    flex-basis: calc((100% - 18px) / 4);
  }
}

/* painel no tamanho natural / escala: ampliado, fica em tamanho de leitura */
.is-compact-row .avylo-card:not(.is-collapsed):hover .ac-art,
.is-compact-row .avylo-card:not(.is-collapsed):has(:focus-visible) .ac-art {
  border-radius: 4px 4px 0 0;
}

.is-compact-row .ac-panel {
  padding: calc(10px / var(--card-scale)) calc(11px / var(--card-scale)) calc(12px / var(--card-scale));
  border-radius: 0 0 4px 4px;
  border-width: calc(1px / var(--card-scale));
}

.is-compact-row .ac-actions {
  gap: calc(7px / var(--card-scale));
}

.is-compact-row .ac-btn {
  width: calc(32px / var(--card-scale));
  height: calc(32px / var(--card-scale));
  border-width: calc(1.5px / var(--card-scale));
}

.is-compact-row .ac-btn svg {
  width: calc(15px / var(--card-scale));
  height: calc(15px / var(--card-scale));
}

.is-compact-row .ac-btn:focus-visible,
.is-compact-row .ac-art:focus-visible {
  outline-width: calc(2px / var(--card-scale));
}

.is-compact-row .react-pop {
  gap: calc(2px / var(--card-scale));
  padding: calc(3px / var(--card-scale));
}

.is-compact-row .react-option {
  width: calc(34px / var(--card-scale));
  height: calc(34px / var(--card-scale));
}

.is-compact-row .react-option svg {
  width: calc(18px / var(--card-scale));
  height: calc(18px / var(--card-scale));
}

.is-compact-row .ac-panel [data-tip]::after {
  bottom: calc(100% + 11px / var(--card-scale));
  padding: calc(5px / var(--card-scale)) calc(9px / var(--card-scale));
  border-radius: calc(4px / var(--card-scale));
  font-size: calc(11.5px / var(--card-scale));
}

.is-compact-row .ac-panel [data-tip]::before {
  bottom: calc(100% + 5px / var(--card-scale));
  border-left-width: calc(6px / var(--card-scale));
  border-right-width: calc(6px / var(--card-scale));
  border-top-width: calc(6px / var(--card-scale));
}

.is-compact-row .ac-name {
  margin-top: calc(10px / var(--card-scale));
  font-size: calc(14px / var(--card-scale));
}

.is-compact-row .ac-resume,
.is-compact-row .ac-meta {
  margin-top: calc(9px / var(--card-scale));
  font-size: calc(12px / var(--card-scale));
}

.is-compact-row .ac-meta {
  gap: calc(6px / var(--card-scale));
}

.is-compact-row .ac-meta > span + span::before {
  margin-right: calc(6px / var(--card-scale));
}

.is-compact-row .ac-meta .ac-tag {
  padding: 0 calc(4px / var(--card-scale));
  border-width: calc(1px / var(--card-scale));
  border-radius: calc(3px / var(--card-scale));
  font-size: calc(11px / var(--card-scale));
  line-height: calc(16px / var(--card-scale));
}

.is-compact-row .ac-genres {
  margin-top: calc(6px / var(--card-scale));
  font-size: calc(12px / var(--card-scale));
}

.is-compact-row .ac-art .ac-logo .title-art-fallback {
  font-size: 13px;
}

.is-compact-row .ac-art > .ac-bar {
  left: 6px;
  right: 6px;
  bottom: 5px;
  height: 2px;
}

/* celular: trilho horizontal menor, sem expansão (como os demais) */
@media (max-width: 650px) {
  .is-compact-row .avylo-card {
    flex-basis: 156px;
  }

  .is-compact-row .rail {
    gap: 6px;
    padding: 2px var(--pad) 10px 0;
    margin: 0 calc(-1 * var(--pad)) 0 0;
  }
}

/* ==========================================================================
   Catálogo completo (Filmes e Séries): grade com o mesmo AVYLO Card das
   fileiras compactas. A grade não recorta nada: o card expandido cresce por
   cima dos vizinhos, como no trilho.
   ========================================================================== */
.catalog-grid.is-card-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 26px 6px;
  margin: 8px 0 0;
}

.catalog-grid.is-card-grid .avylo-card {
  min-width: 0;
}

@media (min-width: 1700px) {
  .catalog-grid.is-card-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 2200px) {
  .catalog-grid.is-card-grid {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

@media (max-width: 1360px) {
  .catalog-grid.is-card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .catalog-grid.is-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .catalog-grid.is-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .catalog-grid.is-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 8px;
  }
}

/* espaço provisório enquanto a página chega (mesmo formato 16:9 do card) */
.ac-skeleton {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: linear-gradient(110deg, #141820 30%, #1b1f28 46%, #141820 62%);
  background-size: 220% 100%;
  animation: skeleton 1.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ac-skeleton {
    animation: none;
  }
}

.browse-foot {
  padding: 0 var(--pad);
  margin-bottom: 60px;
}

.browse-foot .catalog-stream-sentinel {
  gap: 12px;
}

/* o fim da grade nunca serve de âncora de rolagem: senão, cada página que
   entra empurra a janela para baixo e puxa a próxima, em cadeia */
.browse-foot,
.ac-skeleton {
  overflow-anchor: none;
}

/* fileira da Home ainda carregando: provisórios com a largura do card compacto */
.is-compact-row .rail > .ac-skeleton {
  flex: 0 0 calc((100% - 36px) / 7);
}

.is-placeholder .row-controls {
  display: none;
}

@media (min-width: 1700px) {
  .is-compact-row .rail > .ac-skeleton {
    flex-basis: calc((100% - 42px) / 8);
  }
}

@media (max-width: 1360px) {
  .is-compact-row .rail > .ac-skeleton {
    flex-basis: calc((100% - 30px) / 6);
  }
}

@media (max-width: 1100px) {
  .is-compact-row .rail > .ac-skeleton {
    flex-basis: calc((100% - 24px) / 5);
  }
}

@media (max-width: 900px) {
  .is-compact-row .rail > .ac-skeleton {
    flex-basis: calc((100% - 18px) / 4);
  }
}

@media (max-width: 650px) {
  .is-compact-row .rail > .ac-skeleton {
    flex-basis: 156px;
  }
}

/* ==========================================================================
   Categorias: menu do topo (computador) e painel inferior (celular)
   ========================================================================== */
.nav-links .nav-categories {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #9ea2ad;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-links .nav-categories svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms var(--ease-out);
}

.nav-links .nav-categories:hover,
.nav-links .nav-categories.active,
.nav-links .nav-categories[aria-expanded="true"] {
  color: #fff;
}

.nav-links .nav-categories[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.categories-menu {
  position: fixed;
  top: calc(var(--nav-h) - 4px);
  left: var(--pad);
  z-index: 120;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - var(--nav-h) - 16px); /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
  max-height: calc(100dvh - var(--nav-h) - 16px);
  overflow-y: auto;
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f1116f5;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
  animation: categories-in 180ms var(--ease-out);
}

@keyframes categories-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.categories-head {
  display: none;
}

.categories-cols {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap: 24px;
}

.categories-cols h3 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.categories-cols a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: #c9ccd3;
  transition: color var(--duration-fast) var(--ease-out);
}

.categories-cols a:hover,
.categories-cols a:focus-visible {
  color: #fff;
}

.categories-genres > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
}

.categories-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.categories-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
}

@media (max-width: 800px) {
  .categories-scrim {
    background: #000000a6;
  }

  .categories-menu {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 78vh; /* fallback: WebView/TV antigo sem dvh (Chrome < 108) */
    max-height: 78dvh;
    padding: 6px var(--pad) calc(20px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
    animation-name: categories-sheet;
    animation-duration: 220ms;
  }

  @keyframes categories-sheet {
    from {
      transform: translateY(24px);
      opacity: 0;
    }
  }

  .categories-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 4px;
  }

  .categories-head h2 {
    margin: 0;
    font-size: 17px;
  }

  .categories-cols {
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }

  .categories-genres {
    grid-column: 1 / -1;
    order: 3;
  }

  .categories-genres > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .categories-cols a {
    padding: 9px 0;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .categories-menu {
    animation: none;
  }
}

/* card horizontal sem backdrop: o pôster verdadeiro preenche o quadro (cover,
   sem distorcer). Testado contra "pôster nítido no centro + o mesmo pôster
   desfocado atrás": no cover a grade fica cheia e cinematográfica, enquanto a
   composição centralizada deixava o pôster com 1/3 da largura em fundo escuro */
.ac-art > img.ac-poster {
  object-fit: cover;
  object-position: 50% 30%;
}

/* contraste do título sobre o pôster: degradê discreto, sem caixa */
.ac-art:has(.ac-poster)::before {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  z-index: 2;
  background: linear-gradient(transparent, #05040aeb);
  pointer-events: none;
}

/* ==========================================================================
   Detalhes (Fase 3): backdrop grande, título/logo, informações, sinopse e
   ações dentro do hero; elenco e ficha, episódios, coleção e relacionados
   abaixo. O hero cresce com o conteúdo (sinopse expandida não corta nada).
   ========================================================================== */
.detail-hero {
  height: auto;
  min-height: min(540px, 66vh);
  display: flex;
  align-items: flex-end;
}

.detail-hero::after {
  background:
    linear-gradient(0deg, #0a0c10 0%, #0a0c10e0 24%, #0a0c1000 64%),
    linear-gradient(90deg, #0a0c10d9 0%, #0a0c1070 46%, transparent 78%);
}

.detail-hero-content {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 660px;
  padding: 150px 36px 30px;
}

.detail-hero-content h2 {
  margin: 10px 0 14px;
}

.detail-meta {
  gap: 8px 14px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #c3c6cd;
}

.detail-meta .rating {
  padding: 1px 6px;
  border: 1px solid #ffffff59;
  border-radius: 3px;
  font-size: 11.5px;
  color: #e4e6ea;
}

.detail-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #f1f2f4;
  font-weight: 600;
}

.detail-rating > span {
  color: #e8b94a;
}

.detail-rating small {
  margin-left: 2px;
  color: #8f95a1;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.detail-synopsis {
  max-width: 580px;
  margin-bottom: 18px;
}

.detail-synopsis p {
  margin: 0;
  color: #d6d9df;
  font-size: 14px;
  line-height: 1.65;
  text-shadow: 0 1px 14px #000b;
}

.detail-synopsis p.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.detail-more {
  margin-top: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #fff;
  font: 600 12.5px/1 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.detail-hero-content .detail-actions {
  margin: 0;
}

.detail-hero-content .detail-actions .icon-button {
  background: #0a0c1099;
}

.detail-body {
  padding-top: 18px;
}

.detail-cast h3,
.detail-collection h3 {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.detail-facts {
  padding-top: 4px;
}

.cast-list {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 0 8px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #2c3140 transparent;
}

.cast-item {
  flex: 0 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  scroll-snap-align: start;
}

.cast-photo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 7px;
  border-radius: 50%;
  overflow: hidden;
  background: #171b24;
  color: #858c9b;
  font-size: 19px;
  font-weight: 700;
}

.cast-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cast-item strong {
  color: #e7e9ed;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.cast-item small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #7f8593;
  font-size: 11px;
  line-height: 1.3;
}

.cast-photo.ac-skeleton {
  aspect-ratio: auto;
  border-radius: 50%;
}

.cast-line {
  display: block;
  width: 72%;
  height: 9px;
  border-radius: 4px;
  background: linear-gradient(110deg, #141820 30%, #1b1f28 46%, #141820 62%);
  background-size: 220% 100%;
  animation: skeleton 1.8s linear infinite;
}

.cast-line.short {
  width: 46%;
}

/* AVYLO Card dentro dos detalhes: mesma miniatura das fileiras, sem expandir
   (a janela é rolável; tocar abre os detalhes do título) */
.detail-dialog .detail-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 10px;
  margin: 0;
  padding: 0;
}

.detail-dialog .detail-collection:not([hidden]),
.detail-dialog .detail-collection + .related {
  margin-top: 34px;
}

.detail-dialog .avylo-card .ac-panel {
  display: none;
}

.detail-dialog .avylo-card:not(.is-collapsed):hover,
.detail-dialog .avylo-card:not(.is-collapsed):has(:focus-visible) {
  transform: none;
  z-index: auto;
}

.detail-dialog .avylo-card:not(.is-collapsed):hover .ac-art,
.detail-dialog .avylo-card:not(.is-collapsed):has(:focus-visible) .ac-art {
  border-radius: 4px;
}

.detail-dialog .detail-cards .ac-skeleton {
  aspect-ratio: 16 / 9;
}

@media (max-width: 800px) {
  .detail-hero-content {
    max-width: none;
    padding: 130px 24px 24px;
  }
}

@media (max-width: 650px) {
  .detail-hero {
    height: auto;
    min-height: 440px;
  }

  .detail-hero-content {
    padding: 150px 18px 20px;
  }

  .detail-synopsis p {
    font-size: 13.5px;
  }

  .detail-body {
    padding: 14px 18px 26px;
  }

  .detail-dialog .detail-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cast-item {
    flex-basis: 80px;
  }

  .cast-photo {
    width: 64px;
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cast-line {
    animation: none;
  }
}

.detail-cast {
  min-width: 0;
}

/* Hero no celular: o botão secundário usa o rótulo curto para os três botões
   caberem na largura do destaque */
.hero-actions .label-short {
  display: none;
}

@media (max-width: 480px) {
  .hero-actions .label-long {
    display: none;
  }

  .hero-actions .label-short {
    display: inline;
  }
}

/* telas muito estreitas (≈320px): nada passa da borda */
@media (max-width: 340px) {
  .profile-chevron {
    display: none;
  }

  .nav {
    gap: 12px;
  }

  .hero-actions {
    gap: 6px;
  }

  .hero-actions .button {
    padding-inline: 12px;
  }

  .hero-title .hero-lines {
    font-size: 0.86em;
    letter-spacing: 0;
  }

  .bottom-nav a,
  .bottom-nav button {
    min-width: 0;
  }
}

/* ==========================================================================
   Fase 6 — página de pessoa (#/pessoa/ID) e elenco clicável
   ========================================================================== */
.cast-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 2px 0 4px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  text-align: center;
}

.cast-link .cast-photo {
  transition:
    transform 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.cast-link:hover .cast-photo,
.cast-link:focus-visible .cast-photo {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 0 2px var(--accent);
}

.cast-link:hover strong,
.cast-link:focus-visible strong {
  color: #fff;
}

.cast-link:focus-visible,
.person-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.person-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #ffffff40;
  text-underline-offset: 3px;
}

.person-link:hover {
  color: #fff;
  text-decoration-color: var(--accent);
}

.cast-photo.no-photo > span,
.person-photo.no-photo .person-initials {
  display: grid;
  place-items: center;
}

.person-page {
  padding-top: calc(var(--nav-h) + 18px);
  padding-bottom: 40px;
  animation: reveal-in 420ms var(--ease-out);
}

.person-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 var(--pad) 22px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff08;
  color: #cfd3dc;
  font: 600 12.5px/1 var(--font-ui);
  cursor: pointer;
  transition:
    background 160ms,
    color 160ms;
}

.person-back svg {
  width: 16px;
  height: 16px;
}

.person-back:hover,
.person-back:focus-visible {
  background: #ffffff14;
  color: #fff;
}

.person-hero {
  position: relative;
  display: grid;
  grid-template-columns: clamp(170px, 20vw, 280px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  padding: 0 var(--pad);
  isolation: isolate;
}

.person-hero::before {
  content: "";
  position: absolute;
  inset: -40px 0 -20px;
  z-index: -1;
  background:
    radial-gradient(ellipse at 14% 30%, #1266e936, transparent 46%),
    radial-gradient(ellipse at 78% 10%, #ff4f9724, transparent 44%);
  pointer-events: none;
}

.person-photo {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, #1a2342, #2a1a3e 70%);
  box-shadow:
    0 24px 60px #000000a0,
    0 0 0 1px #ffffff12;
}

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

.person-initials {
  position: absolute;
  inset: 0;
  place-items: center;
  color: #ffffffcc;
  font: 700 clamp(44px, 7vw, 84px) / 1 var(--font-display);
  letter-spacing: -0.03em;
  text-shadow: 0 6px 30px #0008;
}

.person-photo.ac-skeleton {
  aspect-ratio: 2 / 3;
  border-radius: 14px;
}

.person-info {
  min-width: 0;
  padding-top: 8px;
}

.person-info .eyebrow {
  color: var(--accent);
  margin-bottom: 10px;
}

.person-info h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 66px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.person-info h1:focus {
  outline: none;
}

.person-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.person-facts span + span::before {
  content: "·";
  margin: 0 10px;
  color: #ffffff40;
}

.person-bio {
  max-width: 64ch;
}

.person-bio p {
  margin: 0;
  color: #cfd2d9;
  font-size: 14.5px;
  line-height: 1.75;
  white-space: pre-line;
}

.person-bio p.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  white-space: normal;
}

.person-skel-name {
  display: block;
  width: 58%;
  height: 46px;
  margin: 12px 0 16px;
  border-radius: 8px;
  background: linear-gradient(110deg, #141820 30%, #1b1f28 46%, #141820 62%);
  background-size: 220% 100%;
  animation: skeleton 1.8s linear infinite;
}

.person-info .cast-line {
  margin: 0 0 12px;
  height: 11px;
}

.person-works {
  margin-top: 52px;
  padding: 0;
}

.person-works .section-heading {
  padding: 0 var(--pad);
}

.person-works .catalog-grid {
  margin-top: 8px;
}

.person-sub {
  margin: 30px 0 4px;
  padding: 0 var(--pad);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.person-work {
  min-width: 0;
}

.person-role {
  margin: 8px 2px 0;
  overflow: hidden;
  color: #9097a5;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-more {
  display: flex;
  justify-content: center;
  padding: 26px var(--pad) 0;
}

.person-none {
  padding: 8px var(--pad) 0;
  color: var(--muted);
  font-size: 14px;
}

.person-none p {
  margin: 0;
}

.person-empty {
  margin-top: 40px;
}

.person-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .person-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
    text-align: center;
  }

  .person-photo {
    width: min(46vw, 170px);
  }

  .person-info {
    padding-top: 0;
  }

  .person-facts {
    justify-content: center;
  }

  .person-bio {
    margin-inline: auto;
    text-align: left;
  }

  .person-works {
    margin-top: 36px;
  }

  .person-skel-name,
  .person-info .cast-line {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .person-page {
    animation: none;
  }

  .cast-link .cast-photo {
    transition: none;
  }
}

/* ==========================================================================
   Fase 7B.2 — Conta AVYLO (Segurança)
   ========================================================================== */
.avylo-acc {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
}

.avylo-acc-tabs {
  display: flex;
  gap: 6px;
}

.avylo-acc-tabs button {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 600 13px/1 var(--font-ui);
  cursor: pointer;
}

.avylo-acc-tabs button[aria-selected="true"] {
  background: #ffffff14;
  color: #fff;
}

.avylo-acc-form {
  display: grid;
  gap: 14px;
  max-width: 380px;
}

.avylo-acc-field {
  display: grid;
  gap: 6px;
}

.avylo-acc-field span {
  color: #b5bdc9;
  font-size: 12.5px;
  font-weight: 600;
}

.avylo-acc-field input {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0d12;
  color: var(--text);
  font: 500 14px/1.2 var(--font-ui);
}

.avylo-acc-field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.avylo-acc-status {
  min-height: 1.3em;
  margin: 0;
  color: #ff8aa8;
  font-size: 13px;
}

.avylo-acc-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avylo-acc-user > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: 2px;
}

.avylo-acc-user small {
  color: var(--muted);
  font-size: 12px;
}

.avylo-acc-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1266e9, #8a2859);
  font-weight: 700;
}

.avylo-acc-note {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Fase 7B.3 — perfis da conta */
.avatar-account-note {
  display: block;
  max-width: 260px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Fase 7B.4 — importação dos dados locais */
.imp-lead { margin: 6px 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.imp-lead strong { color: var(--text); }
.imp-list { display: grid; gap: 12px; max-height: min(52vh, 460px); overflow: auto; padding: 2px 2px 6px; }
.imp-source, .imp-card { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff06; }
.imp-source.is-off { opacity: 0.55; }
.imp-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.imp-check input { margin-top: 3px; accent-color: var(--accent); }
.imp-check span { display: grid; gap: 3px; }
.imp-check strong { font-size: 14.5px; font-weight: 700; }
.imp-check small, .imp-stat small, .imp-flow small { color: #9ca5b4; font-size: 12px; line-height: 1.4; }
.imp-choice { display: grid; gap: 6px; font-size: 12px; color: #b5bdc9; font-weight: 600; }
.imp-choice select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #0b0d12; color: var(--text); font: 500 13.5px/1.2 var(--font-ui); }
.imp-fixed { color: #b5bdc9; font-size: 12.5px; }
.imp-note { margin: 0; color: #b5bdc9; font-size: 12.5px; line-height: 1.5; }
.imp-error { margin: 10px 0 0; color: #ff8aa8; font-size: 13px; line-height: 1.5; }
.imp-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.imp-flow > div { display: grid; gap: 3px; min-width: 0; }
.imp-tag { color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.imp-arrow { color: #8b93a3; font-size: 18px; }
.imp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.imp-stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #ffffff08; }
.imp-stat span { color: #9ca5b4; font-size: 11.5px; font-weight: 600; }
.imp-stat strong { font-size: 19px; font-weight: 700; }
.imp-result { margin: 14px 0; }
.imp-row { align-items: center; }
@media (max-width: 560px) {
  .imp-flow { grid-template-columns: 1fr; }
  .imp-arrow { display: none; }
}

/* Biblioteca do perfil de conta (Fase 7B.5A): carregando e falha de leitura */
.lib-loading-page { display: grid; place-items: center; text-align: center; gap: 14px; min-height: 60vh; }
.lib-loading { display: inline-flex; align-items: center; gap: 12px; color: #aab3c2; font-size: 14px; }
.lib-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ffffff22; border-top-color: #ffffffcc; animation: lib-spin 0.8s linear infinite; }
@keyframes lib-spin { to { transform: rotate(360deg); } }
.lib-footer { flex-wrap: wrap; gap: 10px; }
.lib-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
  .lib-footer { flex-direction: column-reverse; align-items: stretch; }
  .lib-actions { flex-direction: column-reverse; align-items: stretch; }
  .lib-footer .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lib-spinner { animation-duration: 2.4s; } }
.avylo-acc-sync { margin-top: 6px; }
.avylo-acc-link { background: none; border: 0; padding: 0; color: var(--accent, #4cc9f0); font: inherit; text-decoration: underline; cursor: pointer; }
.avylo-acc-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }

/* Indicador discreto de sincronização (Fase 7B.5C): Offline, Alterações pendentes, Sincronizando, Erro. "Sincronizado" some. */
.sync-pill { position: fixed; left: 16px; bottom: 16px; z-index: 95; display: inline-flex; align-items: center; gap: 8px; max-width: min(420px, calc(100vw - 32px)); padding: 8px 12px; border: 1px solid #ffffff18; border-radius: 999px; background: #1a1e26ee; backdrop-filter: blur(10px); color: #e8eaf0; font-size: 12px; line-height: 1.35; box-shadow: var(--shadow-soft); }
.sync-pill[hidden] { display: none; }
.sync-pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9aa3b4; }
.sync-pill[data-state="offline"] .sync-pill-dot { background: #f5b84a; }
.sync-pill[data-state="pending"] .sync-pill-dot { background: var(--accent, #28c8f8); }
.sync-pill[data-state="syncing"] .sync-pill-dot { background: var(--accent, #28c8f8); animation: sync-pulse 1.1s ease-in-out infinite; }
.sync-pill[data-state="error"] .sync-pill-dot { background: #ff7a7a; }
.sync-pill-text { min-width: 0; overflow-wrap: anywhere; }
.sync-pill-retry { flex: none; background: none; border: 0; padding: 2px 4px; color: var(--accent, #28c8f8); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.sync-pill-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
@keyframes sync-pulse { 50% { opacity: 0.35; } }
@media (max-width: 760px) { .sync-pill { left: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); } body.settings-view .sync-pill, body.gate-active .sync-pill { bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .sync-pill-dot { animation: none !important; } }

/* TV ao vivo / Futebol ao vivo: cards próprios (sem logo de título, sem ranking),
   reaproveitando só o esqueleto visual do avylo-card compacto. */
.live-card .card-badge.live-badge-on { background: #e8384f; color: #fff; }
.live-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 10px 8px;
  background: linear-gradient(transparent, #05040aea 68%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}
.live-caption small {
  font-size: 11px;
  font-weight: 500;
  color: #c7cbd6;
}
.live-teams {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14%;
  background: #12151c;
}
.live-teams img {
  width: 26%;
  height: auto;
  max-height: 46%;
  object-fit: contain;
}
.anime-card .ac-media,
.anime-card .ac-art {
  aspect-ratio: 2 / 3;
}
.anime-card .ac-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TV em tempo real: título da seção, linha "Agora" nos cards e "Agora / Em seguida" no player. */
.live-intro { margin: 28px 0 -6px; padding: 0 var(--page-gutter, 4vw); }
.live-intro h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(20px, 2.2vw, 28px); }
.live-intro p { margin: 4px 0 0; color: #aeb4c2; font-size: 13px; }
.live-intro-dot { width: 10px; height: 10px; border-radius: 50%; background: #e8384f; box-shadow: 0 0 0 0 #e8384f88; animation: live-intro-pulse 1.8s ease-out infinite; }
@keyframes live-intro-pulse { 70% { box-shadow: 0 0 0 8px #e8384f00; } 100% { box-shadow: 0 0 0 0 #e8384f00; } }
@media (prefers-reduced-motion: reduce) { .live-intro-dot { animation: none; } }
.live-caption small.live-now { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-caption small.live-now[hidden] { display: none; }
.player-cinema-heading p.live-epg-line { margin-top: 4px; color: #e8eaf0; font-weight: 600; }
/* Busca vazia: pesquisas recentes com pôster e gêneros com imagem de fundo. */
.search-discovery .recent-row { align-items: center; gap: 10px; }
.recent-card { display: inline-flex; align-items: center; gap: 10px; max-width: 240px; padding: 4px 14px 4px 4px; border: 1px solid #ffffff14; border-radius: 12px; background: #ffffff08; color: #e8eaf0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.15s; }
.recent-card:hover { background: #ffffff14; transform: translateY(-1px); }
.recent-card:focus-visible { outline: 2px solid var(--accent, #28c8f8); outline-offset: 2px; }
.recent-card img { flex: none; width: 36px; height: 54px; border-radius: 7px; object-fit: cover; background: #12151c; }
.recent-card span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; }
.genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.genre-card { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #20263a, #12151c); color: #fff; text-decoration: none; font-size: 15px; font-weight: 800; transition: transform 0.18s, box-shadow 0.18s; }
.genre-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #0008; }
.genre-card:focus-visible { outline: 2px solid var(--accent, #28c8f8); outline-offset: 2px; }
.genre-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.genre-card:hover img { transform: scale(1.06); }
.genre-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, #05040add); }
.genre-card span { position: relative; z-index: 1; padding: 10px 12px; text-shadow: 0 1px 6px #000a; }
@media (prefers-reduced-motion: reduce) { .recent-card, .genre-card, .genre-card img { transition: none; } .recent-card:hover, .genre-card:hover, .genre-card:hover img { transform: none; } }.search-discovery .chips + h3, .search-discovery .genre-grid + h3 { margin-top: 22px; }

/* Tela de carregamento do player com o backdrop do título (abre antes de a fonte resolver). */
.player-loading.has-art {
  background:
    radial-gradient(circle at 50% 44%, #0e315866 0%, transparent 56%),
    linear-gradient(#03050acc, #03050af2),
    var(--loading-art) center / cover no-repeat,
    #03050a;
}

/* Reels (protótipo): feed vertical em tela cheia, um vídeo por vez. */
body.reels-open { overflow: hidden; }
.reels-view { position: fixed; inset: 0; z-index: 5000; background: #05060a; color: #fff; }
.reels-view[hidden] { display: none; }
.reels-top { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 28px; background: linear-gradient(#000a, transparent); pointer-events: none; }
.reels-top > * { pointer-events: auto; }
.reels-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.reels-badge { padding: 2px 8px; border-radius: 999px; background: #ffffff22; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.reels-count { color: #c9ceda; font-size: 13px; font-variant-numeric: tabular-nums; }
.reels-top-actions { display: flex; gap: 8px; }
.reels-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #0009; color: #fff; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.15s, opacity 0.15s; }
.reels-btn:hover:not(:disabled) { background: #fff3; }
.reels-btn:disabled { opacity: 0.3; cursor: default; }
.reels-btn:focus-visible, .reels-feed:focus-visible { outline: 2px solid var(--accent, #28c8f8); outline-offset: 2px; }
.reels-nav { position: absolute; right: 18px; top: 50%; z-index: 30; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.reels-hint { white-space: nowrap; position: absolute; left: 50%; top: 68px; z-index: 30; margin: 0; padding: 7px 14px; border-radius: 999px; background: #000b; font-size: 12px; font-weight: 600; transform: translateX(-50%); pointer-events: none; transition: opacity 0.3s; }
.reels-hint.is-gone, .reels-view:not(.is-muted) .reels-hint { opacity: 0; }
.reels-view.is-loading .reels-feed::before { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px; border: 3px solid #ffffff33; border-top-color: #fff; border-radius: 50%; animation: reel-spin 0.8s linear infinite; }
.reels-empty { display: grid; place-content: center; justify-items: center; gap: 14px; height: 100%; text-align: center; }
.reels-feed { position: absolute; inset: 0; overflow-y: scroll; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reels-feed::-webkit-scrollbar { display: none; }
.reel { position: relative; height: 100vh; height: 100dvh; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.reel-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(36px) brightness(0.45) saturate(1.2); }
/* palco: 9:16 por padrão; vídeo 16:9 vira uma faixa centralizada (sem distorcer, sem cortar) */
.reel-stage { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100vw, calc(100dvh * 9 / 16)); transform: translateX(-50%); background: #000; overflow: hidden; box-shadow: 0 0 60px #000a; }
.reel.is-landscape .reel-stage { top: 50%; bottom: auto; width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.reel-tap { position: absolute; inset: 0; z-index: 2; border: 0; background: none; cursor: pointer; }
.reel-spinner { position: absolute; left: 50%; top: 50%; z-index: 3; width: 34px; height: 34px; margin: -17px; border: 3px solid #ffffff33; border-top-color: #fff; border-radius: 50%; opacity: 0; pointer-events: none; animation: reel-spin 0.8s linear infinite; transition: opacity 0.2s; }
.reel.is-loading .reel-spinner { opacity: 1; }
.reel-flash { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px; border-radius: 50%; background: #0008; opacity: 0; pointer-events: none; }
.reel-flash.is-on { animation: reel-flash 0.6s ease-out; }
.reel-flash.is-pause svg { display: none; }
.reel-flash.is-pause::before { content: ""; width: 22px; height: 26px; border-left: 7px solid #fff; border-right: 7px solid #fff; }
/* texto fora do palco: no 9:16 fica sobre o vídeo; no 16:9 (faixa menor) cai abaixo dele, sem cobrir a imagem */
.reel-info { position: absolute; left: 50%; bottom: 0; z-index: 4; box-sizing: border-box; width: min(100vw, calc(100dvh * 9 / 16)); padding: 56px 16px 22px; transform: translateX(-50%); background: linear-gradient(transparent, #000d 70%); pointer-events: none; }
.reel.is-landscape .reel-info { padding-top: 24px; background: linear-gradient(transparent, #000a 60%); }
.reel-info h3 { margin: 0 0 4px; font-size: 17px; line-height: 1.25; text-shadow: 0 1px 6px #000a; }
.reel-meta { margin: 0 0 6px; color: #d4d8e2; font-size: 12px; font-weight: 600; }
.reel-desc { margin: 0; max-height: 2.7em; overflow: hidden; color: #e6e9f0; font-size: 13px; line-height: 1.35; pointer-events: auto; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.reel.is-desc-open .reel-desc { max-height: 40vh; overflow-y: auto; -webkit-line-clamp: unset; }
.reel-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 14px; cursor: pointer; }
.reel-progress::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff33; }
.reel-progress i { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: #fff; }
.reel-error { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #000c; text-align: center; }
.reel.is-error .reel-error { display: flex; }
.reel.is-error .reel-spinner { opacity: 0; }
@keyframes reel-spin { to { transform: rotate(360deg); } }
@keyframes reel-flash { 0% { opacity: 0.9; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.25); } }
.reels-open-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #ffffff2e; border-radius: 999px; background: #ffffff10; color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.reels-open-btn:hover { background: #ffffff22; }
@media (max-width: 760px) { .reels-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .reel-spinner, .reels-view.is-loading .reels-feed::before { animation-duration: 2s; } .reel-flash.is-on { animation: none; } }

/* Botão Reels da barra do topo: ícone pequeno com um pulso suave (sem animação com prefers-reduced-motion). */
.reels-open-icon { flex: none; color: #ff5d73; transform-origin: center; animation: reels-icon-pulse 2.8s ease-in-out infinite; }
.reels-open-btn:hover .reels-open-icon, .reels-open-btn:focus-visible .reels-open-icon { animation-play-state: paused; }
@keyframes reels-icon-pulse { 0%, 100% { transform: scale(1); opacity: 0.82; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reels-open-icon { animation: none; opacity: 1; } }

/* ===== Página Canais (TV ao vivo): hero, jogos de hoje e grade cinematográfica ===== */
.tv-live-badge {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 5px 10px 5px 9px; border-radius: 999px;
  background: #e8384fe6; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; line-height: 1;
  box-shadow: 0 4px 14px #e8384f55;
}
.tv-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: tv-live-pulse 1.6s ease-in-out infinite; }
.tv-live-badge.is-mini { padding: 4px 8px 4px 7px; font-size: 9.5px; gap: 5px; }
.tv-live-badge.is-mini i { width: 6px; height: 6px; }
@keyframes tv-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } }

.tv-progress { display: block; height: 3px; border-radius: 3px; background: #ffffff26; overflow: hidden; }
.tv-progress[hidden] { display: none; }
.tv-progress i { display: block; height: 100%; width: 0; background: var(--tv-accent, #28c8f8); border-radius: 3px; }

/* hero */
.tv-hero {
  display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px;
  margin: 88px var(--page-gutter, 4vw) 8px; min-height: clamp(360px, 46vw, 520px);
}
.tv-hero[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.tv-hero[data-count="2"] { grid-template-rows: 1fr; }
.tv-hero-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 20px;
  background: #0b0e16; border: 1px solid #ffffff14; display: flex; align-items: flex-end;
  box-shadow: 0 18px 50px #0009;
}
.tv-hero-card.is-main { grid-row: span 2; }
.tv-hero[data-count="2"] .tv-hero-card.is-main { grid-row: auto; }
.tv-hero[data-count="1"] .tv-hero-card.is-main { grid-row: auto; }
.tv-hero.is-loading .tv-hero-card { background: linear-gradient(110deg, #0d111b 30%, #151b29 50%, #0d111b 70%); background-size: 200% 100%; animation: tv-shimmer 1.6s linear infinite; }
@keyframes tv-shimmer { to { background-position: -200% 0; } }
.tv-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; filter: blur(26px) saturate(1.3) brightness(0.8); transform: scale(1.25); }
.tv-hero-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--tv-accent) 28%, transparent), transparent 60%), linear-gradient(0deg, #05060af2 0%, #05060a99 42%, #05060a1a 100%); }
.tv-hero-logo { position: absolute; z-index: -2; right: 5%; top: 50%; width: min(46%, 440px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; transform: translateY(-62%); box-shadow: 0 22px 60px #000b, 0 0 0 1px #ffffff1f; transition: transform 320ms ease; }
.tv-hero-card:not(.is-main) .tv-hero-logo { width: min(28%, 170px); right: 4%; top: 34%; transform: translateY(-50%); border-radius: 12px; }
.tv-hero-card:hover .tv-hero-logo { transform: translateY(-62%) scale(1.04); }
.tv-hero-card:not(.is-main):hover .tv-hero-logo { transform: translateY(-50%) scale(1.05); }
.tv-hero-body { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.4vw, 34px); width: 100%; max-width: 56%; }
.tv-hero-cat { color: var(--tv-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.tv-hero-body h2 { margin: 0; font-size: clamp(24px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -0.035em; }
.tv-hero-card:not(.is-main) .tv-hero-body h2 { font-size: clamp(18px, 1.8vw, 26px); }
.tv-hero-body .tv-now { margin: 0; color: #fff; font-size: clamp(14px, 1.3vw, 19px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-hero-body .tv-next { margin: 0; color: #b9c2d2; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-hero-body .tv-next[hidden] { display: none; }
.tv-hero-body .tv-progress { max-width: 340px; }
.tv-hero-play { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #05060a; border: 0; box-shadow: 0 10px 28px #0008; transition: transform 160ms ease, background 160ms ease; }
.tv-hero-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.tv-hero-play:hover, .tv-hero-play:focus-visible { background: var(--tv-accent); transform: translateY(-1px); }
.tv-hero-card:not(.is-main) .tv-hero-body .tv-next { display: none; }
.tv-hero-card:not(.is-main) .tv-hero-body { max-width: 66%; gap: 6px; }

/* jogos de hoje */
.tv-games { margin-top: 30px; }
.tv-games .rail { gap: 16px; padding: 12px 14px 20px; margin: -12px -14px -20px; scroll-padding-left: 14px; }
.tv-game button:focus-visible { outline-offset: 3px; border-radius: 20px; }
.tv-game { flex: 0 0 clamp(280px, 30vw, 380px); scroll-snap-align: start; }
.tv-game button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 18px; width: 100%; height: 100%;
  padding: 18px 20px; border-radius: 20px; color: #fff;
  background: radial-gradient(130% 110% at 0% 0%, #1b2438 0%, #0c1018 62%);
  border: 1px solid #ffffff17; box-shadow: 0 14px 40px #0008;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.tv-game.is-live button { border-color: #e8384f66; background: radial-gradient(130% 110% at 0% 0%, #3a1722 0%, #0c1018 62%); }
.tv-game button:hover, .tv-game button:focus-visible { transform: translateY(-4px); border-color: #ffffff3d; box-shadow: 0 22px 50px #000b, 0 0 0 1px #28c8f833; }
.tv-game button:focus-visible { outline: 2px solid #28c8f8; outline-offset: 2px; }
.tv-game-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tv-game-league { color: #aab3c5; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-game-time { color: #dfe6f3; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tv-game-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.tv-team { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; }
.tv-team img, .tv-team-blank { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 12px #0008); }
.tv-team-blank { border-radius: 50%; background: #ffffff14; }
.tv-team b { font-size: 14px; line-height: 1.2; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tv-vs { color: #7d879b; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; }
.tv-game.is-live .tv-vs { color: #ff8a9a; font-size: 22px; }
.tv-game-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; color: #aab3c5; font-size: 12px; }
.tv-game-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #ffffff14; color: #fff; font-weight: 750; transition: background 160ms ease, color 160ms ease; }
.tv-game-cta svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.tv-game button:hover .tv-game-cta, .tv-game button:focus-visible .tv-game-cta { background: #fff; color: #05060a; }

/* grade de canais */
.tv-filters { margin-top: 24px; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; padding: 6px var(--page-gutter, 4vw) 48px; }
.tv-grid .categories-note, .tv-grid .empty-state { grid-column: 1 / -1; }
.tv-card { position: relative; }
.tv-card-btn {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;
  border-radius: 18px; color: #fff; background: linear-gradient(180deg, #121826 0%, #090c14 100%);
  border: 1px solid #ffffff14; box-shadow: 0 12px 30px #0008;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.tv-card-btn:hover, .tv-card-btn:focus-visible {
  transform: translateY(-4px) scale(1.025); border-color: color-mix(in srgb, var(--tv-accent) 60%, transparent);
  box-shadow: 0 20px 46px #000c, 0 0 0 1px color-mix(in srgb, var(--tv-accent) 40%, transparent), 0 0 34px color-mix(in srgb, var(--tv-accent) 28%, transparent);
}
.tv-card-btn:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 3px; }
.tv-card-art { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0e16; overflow: hidden; }
.tv-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 420ms ease, filter 220ms ease; filter: brightness(0.92); }
.tv-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #090c14cc 100%); pointer-events: none; }
.tv-card-btn:hover .tv-card-art img, .tv-card-btn:focus-visible .tv-card-art img { transform: scale(1.07); filter: brightness(1.08); }
.tv-card-art .tv-live-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.tv-card-info { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; border-top: 2px solid var(--tv-accent); min-width: 0; }
.tv-card-title { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-card-cat { color: var(--tv-accent); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.tv-card-info .tv-now { color: #e6ebf5; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
.tv-card-info .tv-now.is-empty { color: #6f7a8f; font-weight: 500; font-size: 12px; }
.tv-card-info .tv-progress { margin-top: 4px; }

@media (max-width: 900px) {
  .tv-hero { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .tv-hero-card, .tv-hero-card.is-main { grid-row: auto; min-height: 220px; }
  .tv-hero-card.is-main { min-height: 300px; }
  .tv-hero-card:not(.is-main) { display: none; }
  .tv-hero-body { max-width: 100%; }
  .tv-hero-logo, .tv-hero-card:not(.is-main) .tv-hero-logo { width: 38%; top: 28%; transform: translateY(-50%); }
  .tv-hero-card:hover .tv-hero-logo { transform: translateY(-50%); }
  .tv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-live-badge i { animation: none; }
  .tv-hero.is-loading .tv-hero-card { animation: none; }
  .tv-hero-logo, .tv-card-btn, .tv-card-art img, .tv-game button, .tv-hero-play { transition: none; }
  .tv-card-btn:hover, .tv-card-btn:focus-visible, .tv-game button:hover, .tv-game button:focus-visible { transform: none; }
  .tv-card-btn:hover .tv-card-art img, .tv-card-btn:focus-visible .tv-card-art img { transform: none; }
  .tv-hero-card:hover .tv-hero-logo, .tv-hero-card:not(.is-main):hover .tv-hero-logo { transform: translateY(-62%); }
  .tv-hero-card:not(.is-main):hover .tv-hero-logo { transform: translateY(-50%); }
}

/* ===== Filmes / Séries: hero, fileiras em destaque e cartões ===== */
.bx-hero {
  --bx-accent: #28c8f8;
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
  margin: 88px var(--page-gutter, 4vw) 10px; min-height: clamp(340px, 40vw, 520px);
  border-radius: 20px; background: #0b0e16; border: 1px solid #ffffff14; box-shadow: 0 18px 50px #0009;
}
body[data-view="series"] .bx-hero, .bx-hero[data-kind="series"] { --bx-accent: #b57bff; }
.bx-hero.is-loading { background: linear-gradient(110deg, #0d111b 30%, #151b29 50%, #0d111b 70%); background-size: 200% 100%; animation: tv-shimmer 1.6s linear infinite; }
.bx-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; z-index: -2; animation: bx-fade 600ms ease both; }
.bx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #05060af5 0%, #05060ac4 34%, #05060a40 68%, transparent 100%), linear-gradient(0deg, #05060aeb 0%, transparent 46%), radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--bx-accent) 22%, transparent), transparent 60%); }
@keyframes bx-fade { from { opacity: 0; } to { opacity: 1; } }
.bx-hero-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 3vw, 44px); max-width: min(640px, 100%); }
.bx-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--bx-accent) 22%, #05060a); color: #fff; border: 1px solid color-mix(in srgb, var(--bx-accent) 55%, transparent); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.bx-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--bx-accent); animation: tv-live-pulse 1.8s ease-in-out infinite; }
.bx-hero-body h2 { margin: 0; font-size: clamp(28px, 4.4vw, 62px); line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; }
.bx-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: #dfe6f3; font-size: 14px; font-weight: 650; }
.bx-hero-meta span + span::before { content: "·"; margin-right: 14px; color: #7d879b; }
.bx-hero-meta .bx-score { color: #ffd56a; font-weight: 800; }
.bx-age { display: inline-block; padding: 1px 6px; border: 1px solid #ffffff55; border-radius: 4px; font-size: 12px; }
.bx-hero-desc { margin: 0; color: #c9d1de; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bx-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bx-hero-actions .button { min-height: 46px; padding-inline: 22px; }

.bx-filters { margin-top: 20px; }
.bx-rail { margin-top: 26px; }
.bx-rail .rail { gap: 16px; }
.bx-card { flex: 0 0 clamp(250px, 24vw, 340px); scroll-snap-align: start; }
.bx-card-btn {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; background: #0b0e16; border: 1px solid #ffffff14; box-shadow: 0 12px 30px #0008;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.bx-card-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 420ms ease, filter 220ms ease; filter: brightness(0.9); }
.bx-card-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #05060af2 0%, #05060a66 46%, transparent 72%); pointer-events: none; transition: opacity 220ms ease; }
.bx-card-title { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; color: #fff; font-size: 16px; font-weight: 750; letter-spacing: -0.015em; text-shadow: 0 2px 10px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 220ms ease; }
.bx-card-info { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: #dfe6f3; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms ease; }
.bx-card-info b { color: #ffd56a; font-weight: 800; }
.bx-card-btn:hover, .bx-card-btn:focus-visible { transform: translateY(-4px) scale(1.035); border-color: #ffffff45; box-shadow: 0 22px 46px #000c, 0 0 28px #28c8f82e; }
.bx-card-btn:focus-visible { outline: 2px solid #28c8f8; outline-offset: 3px; }
.bx-card-btn:hover img, .bx-card-btn:focus-visible img { transform: scale(1.06); filter: brightness(1.05); }
.bx-card-btn:hover .bx-card-title, .bx-card-btn:focus-visible .bx-card-title { transform: translateY(-22px); }
.bx-card-btn:hover .bx-card-info, .bx-card-btn:focus-visible .bx-card-info { opacity: 1; transform: none; }
@media (hover: none) { .bx-card-info { opacity: 1; transform: none; } .bx-card-title { transform: translateY(-22px); } }

/* nota e ano no painel dos cards da grade */
.ac-meta .ac-nota { color: #ffd56a; font-weight: 800; }

/* capa que não carregou: cartão neutro com o nome discreto */
.is-art-missing { background: linear-gradient(135deg, #1a2030, #0d111a); position: relative; }
.is-art-missing img:not(.title-logo-image) { display: none; }
.is-art-missing[data-missing]::after { content: attr(data-missing); position: absolute; inset: auto 12px 10px 12px; color: #8b95a9; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; }

@media (max-width: 900px) {
  .bx-hero { min-height: 380px; margin-top: 80px; }
  .bx-hero::before { background: linear-gradient(0deg, #05060af5 0%, #05060ab0 48%, #05060a40 100%); }
  .bx-hero-body { max-width: 100%; }
  .bx-card { flex-basis: 74vw; }
}
@media (prefers-reduced-motion: reduce) {
  .bx-hero.is-loading, .bx-hero-bg, .bx-badge i { animation: none; }
  .bx-card-btn, .bx-card-btn img, .bx-card-title, .bx-card-info { transition: none; }
  .bx-card-btn:hover, .bx-card-btn:focus-visible { transform: none; }
  .bx-card-btn:hover img, .bx-card-btn:focus-visible img { transform: none; }
}

/* ===== Cards de pôster vertical (2:3) + card expandido no hover ===== */
.avylo-card.is-poster .ac-art { aspect-ratio: 2 / 3; contain-intrinsic-size: auto 150px auto 225px; border-radius: 8px; }
.avylo-card.is-poster .ac-art > img { object-fit: cover; }
.avylo-card.is-poster .ac-panel { display: none; }
/* o hover antigo (escala + painel) não vale para pôster: a expansão é o .pc-pop */
.avylo-card.is-poster:not(.is-collapsed):hover,
.avylo-card.is-poster:not(.is-collapsed):has(:focus-visible) { transform: none; z-index: 1; }
.avylo-card.is-poster:not(.is-collapsed):hover .ac-art,
.avylo-card.is-poster:not(.is-collapsed):has(:focus-visible) .ac-art { border-radius: 8px; }
.avylo-card.is-poster:not(.is-collapsed):hover > .ac-bar { opacity: 1; }
.avylo-card.is-poster .ac-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #ffffff14; pointer-events: none; }
.avylo-card.is-poster.pc-shift { transform: translateX(var(--pc-dx, 0px)) !important; transition: transform 240ms var(--ease-premium) !important; }

/* quantos pôsteres por linha (mais estreitos que os cards 16:9: cabem mais) */
.is-compact-row .avylo-card.is-poster,
.is-card-row .avylo-card.is-poster { flex-basis: calc((100% - 42px) / 8); }
.catalog-grid.is-card-grid:has(> .is-poster), #catalogGrid.is-card-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (min-width: 1700px) {
  .is-compact-row .avylo-card.is-poster, .is-card-row .avylo-card.is-poster { flex-basis: calc((100% - 48px) / 9); }
  .catalog-grid.is-card-grid:has(> .is-poster), #catalogGrid.is-card-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (min-width: 2200px) {
  .is-compact-row .avylo-card.is-poster, .is-card-row .avylo-card.is-poster { flex-basis: calc((100% - 54px) / 10); }
  .catalog-grid.is-card-grid:has(> .is-poster), #catalogGrid.is-card-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (max-width: 1360px) {
  .is-compact-row .avylo-card.is-poster, .is-card-row .avylo-card.is-poster { flex-basis: calc((100% - 36px) / 7); }
  .catalog-grid.is-card-grid:has(> .is-poster), #catalogGrid.is-card-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .is-compact-row .avylo-card.is-poster, .is-card-row .avylo-card.is-poster { flex-basis: calc((100% - 30px) / 6); }
  .catalog-grid.is-card-grid:has(> .is-poster), #catalogGrid.is-card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .is-compact-row .avylo-card.is-poster, .is-card-row .avylo-card.is-poster { flex-basis: calc((100% - 24px) / 5); }
  .catalog-grid.is-card-grid:has(> .is-poster), #catalogGrid.is-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .is-compact-row .avylo-card.is-poster, .is-card-row .avylo-card.is-poster { flex-basis: 112px; }
  .catalog-grid.is-card-grid:has(> .is-poster), #catalogGrid.is-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.is-compact-row .ac-skeleton { aspect-ratio: 2 / 3; }

/* card expandido (um só elemento, fixo no body) */
.pc-pop {
  position: fixed; z-index: 70; left: var(--pc-left, 0); top: var(--pc-top, 0); width: var(--pc-w, 340px);
  border-radius: 10px; background: #0e121b; box-shadow: 0 26px 64px #000d, 0 0 0 1px #ffffff22;
  opacity: 0; transform: scale(0.62); transform-origin: var(--pc-ox, 50%) 30%; pointer-events: none;
  transition: opacity 160ms ease, transform 240ms var(--ease-premium);
}
.pc-pop[hidden] { display: none; }
.pc-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.pc-pop-art { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px 10px 0 0; background: #05060a; }
.pc-pop-art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-pop-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0e121bf2 0%, #0e121b55 38%, transparent 70%); pointer-events: none; }
.pc-pop-art:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pc-pop-name { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 9px; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-shadow: 0 2px 12px #000; }
.pc-pop-name .title-art-fallback { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* logo: cabe inteiro numa caixa de 280x76 (largo, alto ou quadrado), sem cortar; sobra vazio nas laterais/topo */
.pc-pop-name .title-art.has-logo { display: flex; align-items: flex-end; width: min(100%, 280px); height: 76px; }
.pc-pop-name .title-logo-image { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: left bottom; }
.pc-pop-body { padding: 12px 14px 14px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #0e121b, #0b0e16); }
.pc-pop-body .ac-meta { margin-top: 12px; font-size: 12px; flex-wrap: wrap; white-space: normal; }
.pc-pop-body .ac-resume { margin-top: 10px; font-size: 12px; }
.pc-pop-body .ac-genres { margin-top: 6px; color: #aab3c5; font-size: 12px; }
.pc-pop-body .ac-btn { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) {
  .pc-pop { transition: none; transform: none; }
  .avylo-card.is-poster.pc-shift { transition: none !important; }
}

/* trailer (Prévias automáticas) dentro do card expandido */
.pc-pop-art > video.card-preview { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; translate: none; object-fit: cover; transform: scale(1.3); transform-origin: center; pointer-events: none; }
.pc-pop-art > iframe.yt-cover { position: absolute; inset: auto; top: 50%; left: 50%; max-width: none; max-height: none; aspect-ratio: auto; translate: -50% -50%; pointer-events: none; }
.pc-pop-art > .card-preview { z-index: 0; }
.pc-pop-name { z-index: 2; }
.pc-pop-art::after { z-index: 1; }

/* ===== Início: bloco "Ao vivo" separado do catálogo ===== */
.home-block { margin: clamp(48px, 6.5vw, 92px) 0 clamp(36px, 5vw, 68px); }
.home-divider { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 0 var(--page-gutter, 4vw); }
.home-divider::after { content: ""; order: 3; flex: 1; height: 1px; background: linear-gradient(90deg, #ffffff30, #ffffff0d 65%, transparent); }
.home-divider-label { display: inline-flex; align-items: center; gap: 9px; color: #e6ebf5; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.home-divider small { order: 2; color: #8b95a9; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.home-divider.is-end { margin: 34px 0 0; }
.home-divider.is-end::after { background: linear-gradient(90deg, #ffffff0d, #ffffff30 35%, transparent); }
@media (max-width: 650px) { .home-divider small { display: none; } }

/* cartão final da fileira de canais do Início */
.live-all-card .ac-art { display: grid; place-items: center; text-decoration: none; color: #fff; background: radial-gradient(120% 120% at 0% 0%, #1d2c4d 0%, #0b0f18 70%); box-shadow: inset 0 0 0 1px #28c8f844; }
.live-all-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 0 16px; }
.live-all-body b { font-size: clamp(14px, 1.3vw, 18px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.live-all-body small { color: #aab3c5; font-size: 12px; }
.live-all-arrow { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 6px; border-radius: 50%; background: #28c8f8; color: #041018; transition: transform 200ms ease; }
.live-all-arrow svg { width: 18px; height: 18px; }
.live-all-card:hover .live-all-arrow, .live-all-card:focus-within .live-all-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .live-all-arrow { transition: none; } .live-all-card:hover .live-all-arrow, .live-all-card:focus-within .live-all-arrow { transform: none; } }

/* ===== Barra de filtros premium (Filmes, Séries, Canais, Anime, listas) ===== */
.filterbar-ph { height: 0; margin-top: 22px; }
.filters {
  --chip-accent: #28c8f8;
  position: relative; z-index: 40; display: flex; flex-direction: column; gap: 12px;
  margin: 0 var(--pad) 28px; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #121722f0, #0a0d15f5); border: 1px solid #ffffff17;
  box-shadow: 0 10px 30px #0006; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.page-head + .filters { margin-top: 0; }
.filters.is-stuck {
  position: fixed; left: var(--pad); right: var(--pad); margin: 0; z-index: 60;
  flex-direction: row; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 16px;
  box-shadow: 0 18px 44px #000b, 0 0 0 1px color-mix(in srgb, var(--chip-accent) 22%, transparent);
}
.filters .chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.filters.is-stuck .chips { flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); }
.filters.is-stuck .chips::-webkit-scrollbar { display: none; }
.filters .chip {
  border-radius: 999px; padding: 7px 15px; border: 1px solid #ffffff1f; background: #ffffff0a; color: #b9c0cf;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.filters .chip:hover:not(.active):not([aria-pressed="true"]) { background: #ffffff14; border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent); color: #fff; }
.filters .chip.active, .filters .chip[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--chip-accent), color-mix(in srgb, var(--chip-accent) 52%, #7b5cff));
  color: #05060a; border-color: transparent; font-weight: 800;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--chip-accent) 40%, transparent);
}
.filters .chip:focus-visible { outline: 2px solid var(--chip-accent); outline-offset: 2px; }

/* busca + ordenação (+ tipo) num bloco só */
.filters .filter-tools { display: flex; align-items: center; gap: 14px; margin: 0; flex-wrap: wrap; flex: 0 0 auto; }
.filters:not(.is-stuck) .filter-tools { justify-content: space-between; flex: 1 1 auto; }
.fb-group { display: flex; align-items: stretch; border: 1px solid #ffffff1c; border-radius: 14px; background: #ffffff08; overflow: hidden; transition: border-color 160ms ease; }
.fb-group:focus-within { border-color: color-mix(in srgb, var(--chip-accent) 70%, transparent); }
.filters .fb-group label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 0 12px; height: 42px; font-size: 12px; font-weight: 600; color: #8f99ad; text-transform: none; letter-spacing: 0; }
.filters .fb-group label + label { border-left: 1px solid #ffffff1a; }
.filters .fb-group input[type="search"], .filters .fb-group select { background: transparent; border: 0; border-radius: 0; min-height: 0; padding: 0; color: #e8ecf5; font-size: 13px; outline: none; box-shadow: none; }
.filters .fb-group select { cursor: pointer; font-weight: 650; padding-right: 4px; }
.filters .fb-group select option { background: #10141c; color: #e8ecf5; }
.filters .fb-group input[type="search"] { min-width: 230px; }
.filters .fb-search::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.7; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d1de' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.filters .fb-search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.filters .fb-group input[type="search"]::placeholder { color: #8f99ad; }
.filters #resultCount { margin: 0; padding: 0; font-size: 12px; font-weight: 600; color: #9aa4b8; white-space: nowrap; }
.filters.is-stuck .fb-group input[type="search"] { min-width: 170px; }

@media (max-width: 900px) {
  .filters.is-stuck { flex-direction: column; align-items: stretch; gap: 8px; }
  .filters.is-stuck .fb-group { flex: 1; min-width: 0; }
  .filters.is-stuck .fb-group input[type="search"] { min-width: 0; width: 100%; }
}
@media (max-width: 650px) {
  .filters { margin-inline: 0; border-radius: 0; border-inline: 0; padding: 10px var(--pad); }
  .filters.is-stuck { left: 0; right: 0; border-radius: 0; }
  .filters .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: 0; padding-right: 0; }
  .filters .filter-tools { gap: 8px; }
  .filters .fb-group { width: 100%; }
  .filters .fb-group input[type="search"] { min-width: 0; width: 100%; }
  .filters .fb-group label { padding: 0 10px; }
  .filters .fb-group { flex: 1 1 100%; }
  .filters #resultCount { width: 100%; }
  .filters.is-stuck #resultCount { display: none; }
}
@media (prefers-reduced-motion: reduce) { .filters .chip, .fb-group { transition: none; } }

/* ===== Continuar assistindo: tempo restante, selo de episódio, remover com confirmação ===== */
.continue-card .ac-art { border-radius: 10px; border: 1px solid #ffffff17; box-shadow: 0 8px 22px #00000066; transition: border-radius 200ms var(--ease-out), box-shadow 200ms ease; }
.cc-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, #05060ae6 0%, #05060a80 22%, transparent 46%), linear-gradient(180deg, #05060a66 0%, transparent 30%); }
.continue-card .ac-art .card-title-art { bottom: 24%; z-index: 3; }
.cc-ep { position: absolute; z-index: 5; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: #05060acc; border: 1px solid #ffffff2e; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cc-remaining { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 15px; color: #f2f5fb; font-size: 11px; font-weight: 700; text-shadow: 0 1px 6px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.continue-card .ac-art > .ac-bar { left: 10px; right: 10px; bottom: 8px; height: 3px; background: #ffffff33; }
.cc-remove { position: absolute; z-index: 7; top: 7px; right: 7px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid #ffffff33; background: #05060acc; color: #fff; cursor: pointer; opacity: 0; transform: scale(0.85); transition: opacity 150ms ease, transform 150ms ease, background 150ms ease, border-color 150ms ease; }
.cc-remove svg { width: 13px; height: 13px; }
.continue-card:hover .cc-remove, .continue-card:focus-within .cc-remove { opacity: 1; transform: none; }
.cc-remove:hover, .cc-remove:focus-visible { background: #e8384f; border-color: #e8384f; outline: none; }
@media (hover: none) { .cc-remove { opacity: 0.9; transform: none; } }
.cc-confirm { position: absolute; z-index: 9; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px; text-align: center; border-radius: inherit; background: #05060af2; border: 1px solid #ffffff22; }
.cc-confirm p { margin: 0; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.cc-confirm-actions { display: flex; gap: 8px; }
.cc-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid #ffffff33; background: #ffffff14; color: #fff; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.cc-btn:hover, .cc-btn:focus-visible { background: #ffffff26; outline: 2px solid #28c8f8; outline-offset: 1px; }
.cc-btn.is-danger { background: #e8384f; border-color: #e8384f; }
.cc-btn.is-danger:hover, .cc-btn.is-danger:focus-visible { background: #ff4d63; }
@media (prefers-reduced-motion: reduce) { .cc-remove, .continue-card .ac-art, .cc-btn { transition: none; } }

/* ===== Tela de espera do player: mensagem que muda + sinopse/episódios depois de ~6 s ===== */
.player-loading > p { transition: opacity 200ms ease; min-height: 1.2em; }
.player-loading > p.is-swap { opacity: 0; }
.player-loading-extra { max-width: min(520px, 84vw); margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff17; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity 360ms ease, transform 360ms ease; }
.player-loading-extra.is-on { opacity: 1; transform: none; }
.player-loading-extra .loading-synopsis { margin: 0; color: #c9d1de; font-size: 13px; font-weight: 500; line-height: 1.55; letter-spacing: 0; text-transform: none; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.loading-ep { display: flex; flex-direction: column; gap: 3px; color: #f2f5fb; font-size: 13px; }
.loading-ep b { color: #8fdfff; font-size: 11px; letter-spacing: 0.12em; }
.loading-ep span { font-weight: 700; }
.loading-next { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff14; color: #aab3c5; font-size: 12px; }
.loading-next em { color: #7d879b; font-style: normal; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.player-stage.has-started .player-loading-extra, .player-stage.is-ready .player-loading-extra { display: none; }
@media (prefers-reduced-motion: reduce) { .player-loading > p, .player-loading-extra { transition: none; } .player-loading-extra { transform: none; } }

/* Tela de espera do player (?v=wait-2): backdrop borrado, trailer mudo ao fundo, elenco, curiosidades,
   parecidos e "Pular espera". Tudo entra aos poucos conforme a espera passa; nada disso segura o vídeo. */
.player-loading { isolation: isolate; overflow-y: auto; justify-content: safe center; scrollbar-width: none; }
.player-loading::-webkit-scrollbar { display: none; }
.player-loading.has-art { background: radial-gradient(circle at 50% 44%, #0e315866 0%, transparent 56%), #03050a; }
.player-loading.has-art::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: var(--loading-art) center / cover no-repeat; filter: blur(22px) saturate(1.1) brightness(0.5); transform: scale(1.04); pointer-events: none; }
.loading-trailer { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.loading-trailer.is-on { opacity: 0.75; }
.player-loading.has-trailer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#03050a73, #03050ad9); pointer-events: none; }
.player-stage.has-started > .player-loading::before, .player-stage.has-started > .player-loading::after, .player-stage.has-started > .player-loading .loading-trailer, .player-stage.has-started > .player-loading .loading-more { display: none; }
.loading-more { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(760px, 92vw); margin-top: 10px; }
.loading-more > div { max-width: 100%; min-width: 0; opacity: 0; transform: translateY(8px); transition: opacity 420ms ease, transform 420ms ease; }
.loading-more > div:empty { display: none; }
.loading-more > div.is-on { opacity: 1; transform: none; }
.lm-trivia { display: flex; flex-direction: column; gap: 4px; max-width: 560px; padding: 10px 16px; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff17; color: #c9d1de; font-size: 13px; line-height: 1.5; text-align: center; }
.lm-trivia em { color: #8fdfff; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.lm-cast .pp-block, .lm-related .pp-block { margin-top: 0; text-align: center; }
.lm-cast .pp-cast-row, .lm-related .pp-related-row { justify-content: safe center; }
.lm-cast .pp-cast { width: 74px; }
.lm-cast .pp-cast img, .lm-cast .pp-cast .pp-cast-blank { width: 52px; height: 52px; }
.lm-related .pp-related-item { width: 72px; }
.loading-skip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 22px; border: 1px solid #ffffff4a; border-radius: 999px; background: #ffffff12; color: #fff; font: inherit; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.loading-skip b { font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; }
.loading-skip small { color: #aab3c5; font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.loading-skip:hover:not(:disabled), .loading-skip:focus-visible { background: #ffffff26; border-color: #28c8f8; outline: none; }
.loading-skip:disabled { opacity: 0.6; cursor: default; }
.player-loading-extra .loading-synopsis { -webkit-line-clamp: 3; }
@media (max-width: 650px) { .lm-cast { display: none; } .lm-related .pp-related-item { width: 62px; } .loading-more { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .loading-more > div, .loading-trailer, .loading-skip { transition: none; } .loading-more > div { transform: none; } }

/* Modal de detalhes (?v=det-1): camada flutuante, abas, etiquetas de clima, nota etária nova e
   hierarquia tipográfica. Cores, fontes e o padrão de pílula são os que o AVYLO já usa. */
.detail-dialog { border-radius: 20px; border-color: #ffffff1c; box-shadow: 0 50px 140px #000d, 0 0 0 1px #0008; }
.detail-dialog::backdrop { background: radial-gradient(ellipse at 50% 30%, #0a0e1acc, #020204f0 70%); backdrop-filter: blur(22px) saturate(0.75) brightness(0.55); -webkit-backdrop-filter: blur(22px) saturate(0.75) brightness(0.55); }
.detail-hero { border-radius: 20px 20px 0 0; }

/* vídeo de fundo -> backdrop estático (o backdrop já está por baixo do vídeo) */
.detail-trailer.is-cut { opacity: 0; transition-duration: 1000ms; }
.detail-hero .preview-audio { transition: opacity 600ms ease; }
.detail-hero .preview-audio.is-gone { opacity: 0; pointer-events: none; }

/* hierarquia: logo > gêneros > clima > informações (menores, mais espaçadas) > sinopse */
.detail-hero-content h2 { margin: 0 0 14px; }
.detail-genres { margin: 0 0 12px; color: #e3e6ec; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-shadow: 0 1px 12px #000b; }
.detail-moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.detail-moods[hidden] { display: none; }
.detail-moods span { padding: 4px 11px; border: 1px solid #ffffff1f; border-radius: 999px; background: #ffffff0f; color: #c6ccd8; font-size: 11.5px; font-weight: 600; backdrop-filter: blur(6px); }
.detail-meta { gap: 6px 18px; margin: 0 0 18px; font-size: 12px; color: #9ba2af; align-items: center; }
.detail-meta .detail-rating { font-size: 12px; }
.age-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border: 1px solid #ffffff29; border-radius: 7px; background: #ffffff12; color: #eceef3; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; backdrop-filter: blur(6px); }
.age-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--age, #9aa0ad); box-shadow: 0 0 8px color-mix(in srgb, var(--age, #9aa0ad) 60%, transparent); }
.detail-synopsis { max-width: 58ch; margin-bottom: 20px; }
.detail-synopsis p { max-width: 58ch; text-wrap: pretty; }

/* abas (mesmo padrão de pílula dos filtros) */
.detail-body { display: block; padding: 22px 36px 36px; }
.detail-tabs { display: flex; gap: 8px; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tabs .chip { --chip-accent: var(--accent); border-radius: 999px; padding: 7px 16px; border: 1px solid #ffffff1f; background: #ffffff0a; color: #b9c0cf; font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.detail-tabs .chip:hover:not(.active) { background: #ffffff14; border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent); color: #fff; }
.detail-tabs .chip.active { background: linear-gradient(135deg, var(--chip-accent), color-mix(in srgb, var(--chip-accent) 52%, #7b5cff)); color: #05060a; border-color: transparent; font-weight: 800; box-shadow: 0 4px 16px color-mix(in srgb, var(--chip-accent) 40%, transparent); }
.detail-tabs .chip:focus-visible { outline: 2px solid var(--chip-accent); outline-offset: 2px; }
.detail-panel { animation: reveal-in 260ms var(--ease-out); }
.detail-panel[hidden] { display: none; }
.detail-overview { display: grid; grid-template-columns: 1.75fr 1fr; gap: 0 28px; }
.detail-panel .episodes { margin-top: 0; }
.detail-panel .related { margin-top: 0; }
.detail-panel .detail-collection:not([hidden]) { margin-bottom: 34px; }

/* "Mais parecidos com X": mesmos pôsteres da pausa/fim */
.detail-similar { margin-top: 32px; }
.detail-similar h3 { margin: 0 0 14px; font-size: 18px; letter-spacing: -0.02em; }
.detail-similar .pp-related-row { gap: 12px; }
.detail-similar .pp-related-item { width: 108px; }

@media (max-width: 900px) { .detail-overview { grid-template-columns: 1fr; } }
@media (max-width: 650px) {
  .detail-dialog { border-radius: 16px; }
  .detail-hero { border-radius: 16px 16px 0 0; }
  .detail-body { padding: 16px 18px 26px; }
  .detail-genres { font-size: 13px; }
  .detail-similar .pp-related-item { width: 84px; }
}
@media (prefers-reduced-motion: reduce) { .detail-panel { animation: none; } .detail-tabs .chip, .detail-hero .preview-audio, .detail-trailer.is-cut { transition: none; } }

/* legibilidade do texto menor sobre o trailer (o vídeo é mais claro que o backdrop parado) */
.detail-hero::after { background: linear-gradient(0deg, #0a0c10 0%, #0a0c10e0 24%, #0a0c1000 64%), linear-gradient(90deg, #0a0c10e6 0%, #0a0c1099 50%, transparent 82%); }
.detail-hero:has(.detail-trailer.is-on)::after { background: radial-gradient(ellipse 250px 85px at 0 0, #0a0c10 0 45%, #0a0c10dc 68%, transparent 100%), linear-gradient(0deg, #0a0c10 0%, #0a0c10e6 26%, #0a0c1000 66%), linear-gradient(90deg, #0a0c10f0 0%, #0a0c10a6 52%, transparent 84%); }
.detail-meta, .detail-moods span { text-shadow: 0 1px 10px #000c; }
.detail-hero:has(.detail-trailer.is-on) .detail-moods span { background: #0a0c1099; }

/* Confirmação da senha da conta (sair do modo Kids, apagar perfil) */
.confirm-password { width: min(420px, calc(100vw - 32px)); padding: 0; border-radius: 18px; }
.confirm-password::backdrop { background: #020204e6; backdrop-filter: blur(14px); }
.cp-form { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 22px; }
.cp-form h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.cp-form p { margin: 0; color: #b9c0cf; font-size: 14px; line-height: 1.5; }
.cp-form input { width: 100%; padding: 12px 14px; border: 1px solid #ffffff26; border-radius: 12px; background: #ffffff0d; color: #fff; font: inherit; }
.cp-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* IA da pesquisa pensando (pesquisa de PC e de TV): selo com anel girando + três pontos em onda */
.ai-thinking { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 8px 18px 8px 8px; border: 1px solid #ffffff1f; border-radius: 999px; background: linear-gradient(135deg, #28c8f81a, #825cff1f); color: #dfe6f3; font-size: 14px; font-weight: 600; }
.ai-orb { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #0b0f17; }
.ai-orb::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: #28c8f8; border-right-color: #825cff; animation: ai-spin 1.1s linear infinite; }
.ai-orb img { width: 22px; height: 22px; object-fit: contain; animation: ai-pulse 1.6s ease-in-out infinite; }
.ai-thinking-text { display: inline-flex; align-items: baseline; gap: 2px; background: linear-gradient(90deg, #8d96a8 0%, #fff 45%, #8d96a8 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ai-shimmer 2.2s linear infinite; }
.ai-dots { display: inline-flex; gap: 3px; margin-left: 5px; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: #28c8f8; animation: ai-bounce 1.1s ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: 0.16s; background: #5fa0ff; }
.ai-dots i:nth-child(3) { animation-delay: 0.32s; background: #825cff; }
@keyframes ai-spin { to { transform: rotate(1turn); } }
@keyframes ai-pulse { 50% { transform: scale(0.88); opacity: 0.8; } }
@keyframes ai-shimmer { to { background-position: -220% 0; } }
@keyframes ai-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-orb::before, .ai-orb img, .ai-dots i, .ai-thinking-text { animation: none; } .ai-thinking-text { color: #dfe6f3; background: none; } }

/* Pesquisa para TV (controle remoto): teclado na tela à esquerda, sugestões e resultados à direita.
   Só vale com html[data-input="tv"] (a classe .is-tv é posta pelo app ao abrir a busca). */
.search-dialog.is-tv { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; min-height: 0; border: 0; border-radius: 0; background: radial-gradient(ellipse at 20% 0%, #14213a 0%, transparent 55%), #070a10; overflow: hidden; }
.search-dialog.is-tv[open] { display: grid; grid-template-columns: minmax(460px, 38%) 1fr; }
.search-dialog.is-tv .stv-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #ffffff14; }
.search-dialog.is-tv .stv-right { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.search-dialog.is-tv .search-top { min-height: 120px; padding: 28px 40px; background: transparent; border-bottom: 0; }
.search-dialog.is-tv .search-top input { font-size: clamp(32px, 5vh, 52px); font-weight: 700; letter-spacing: -0.02em; caret-color: transparent; }
.search-dialog.is-tv .search-top input::placeholder { font-size: clamp(20px, 2.8vh, 28px); font-weight: 500; }
.search-dialog.is-tv .search-top kbd { display: none; }
.search-dialog.is-tv .search-top > button { width: 56px; height: 56px; font-size: 24px; }
.search-dialog.is-tv .stv-keys { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(8px, 1.2vh, 14px); padding: 6px 40px 40px; }
.stv-key { min-height: clamp(54px, 7.4vh, 84px); padding: 0; border: 2px solid #ffffff24; border-radius: 14px; background: #ffffff0f; color: #f4f6fb; font: 700 clamp(22px, 3.3vh, 36px)/1 var(--font-ui, inherit); text-transform: uppercase; cursor: pointer; transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.stv-key.stv-wide { grid-column: span 5; text-transform: none; font-size: clamp(18px, 2.6vh, 28px); letter-spacing: 0.04em; }
.stv-key.stv-act { grid-column: span 3; text-transform: none; font-size: clamp(16px, 2.3vh, 26px); }
.stv-key.stv-act:last-child { grid-column: span 2; }
/* foco bem visível a 2-3 m: tecla branca, texto escuro, anel de 4 px na cor de destaque e brilho */
.stv-key:focus, .stv-key:focus-visible { outline: 0; transform: scale(1.14); position: relative; z-index: 2; background: #fff; color: #05070c; border-color: var(--accent, #28c8f8); box-shadow: 0 0 0 5px var(--accent, #28c8f8), 0 14px 36px #28c8f877; }
.search-dialog.is-tv #searchSuggest { position: static; z-index: auto; display: flex; flex-wrap: wrap; gap: 12px; padding: 22px 40px 0; border: 0; background: transparent; box-shadow: none; }
.search-dialog.is-tv #searchSuggest[hidden] { display: none; }
.search-dialog.is-tv .search-suggestion { width: auto; padding: 14px 24px; border: 2px solid #ffffff24; border-radius: 999px; background: #ffffff0f; font-size: clamp(18px, 2.6vh, 26px); }
.search-dialog.is-tv .search-suggestion:focus, .search-dialog.is-tv .search-suggestion:focus-visible { outline: 0; background: #fff; color: #05070c; border-color: var(--accent, #28c8f8); box-shadow: 0 0 0 5px var(--accent, #28c8f8); }
.search-dialog.is-tv #searchContent { flex: 1; height: auto; padding: 22px 40px 60px; scroll-padding: 40px; }
.search-dialog.is-tv .search-discovery h3, .search-dialog.is-tv .section-heading h2 { font-size: clamp(18px, 2.6vh, 26px); letter-spacing: 0.02em; }
.search-dialog.is-tv .search-discovery .chip, .search-dialog.is-tv .recent-card { padding: 12px 22px; font-size: clamp(16px, 2.3vh, 22px); }
.search-dialog.is-tv .catalog-grid, .search-dialog.is-tv .genre-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vh, 280px), 1fr)); gap: 26px; }
/* foco nos itens do painel: escala e brilho (cards, gêneros, chips, recentes) */
.search-dialog.is-tv #searchContent .card-open:focus, .search-dialog.is-tv #searchContent .card-open:focus-visible,
.search-dialog.is-tv #searchContent .genre-card:focus, .search-dialog.is-tv #searchContent .genre-card:focus-visible,
.search-dialog.is-tv #searchContent .chip:focus, .search-dialog.is-tv #searchContent .chip:focus-visible,
.search-dialog.is-tv #searchContent .recent-card:focus, .search-dialog.is-tv #searchContent .recent-card:focus-visible { outline: 0; transform: scale(1.07); position: relative; z-index: 3; box-shadow: 0 0 0 5px var(--accent, #28c8f8), 0 18px 44px #000c, 0 0 36px #28c8f866; filter: brightness(1.12); }
.search-dialog.is-tv .ai-thinking { font-size: clamp(16px, 2.4vh, 22px); }
@media (prefers-reduced-motion: reduce) { .stv-key, .search-dialog.is-tv #searchContent .card-open { transition: none; } }

/* ===== Modo leve (TV / hardware fraco): html[data-fx="lite"] (ver detectLiteFx em app.js) =====
   Sem blur nem filtros (backdrop-filter e filter custam muito sem GPU), sem animações e transições decorativas
   (Ken Burns do destaque, brilho dos esqueletos, pulsos, entradas). Mudanças de estado seguem instantâneas;
   o foco do D-pad continua com anel e escala (transform não é animado, só aplicado). */
html[data-fx="lite"] *,
html[data-fx="lite"] *::before,
html[data-fx="lite"] *::after {
  animation-duration: 0.001s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
/* esqueletos: bloco estático (sem varredura de brilho) */
html[data-fx="lite"] .ac-skeleton { background: #1a1d29 !important; }
/* menus e avisos que dependiam do blur para ler bem: fundo sólido */
html[data-fx="lite"] .profile-menu,
html[data-fx="lite"] .categories-menu,
html[data-fx="lite"] .toast,
html[data-fx="lite"] .sync-pill,
html[data-fx="lite"] .micro-tooltip { background: #12141d !important; color: #eef2fb !important; } /* texto claro: antes ficava escuro sobre fundo escuro (caixa vazia) */
html[data-fx="lite"] dialog::backdrop { background: rgba(4, 5, 10, 0.88) !important; }

/* ===== Canais: um padrão só de card (só layout; as cores continuam as de antes) =====
   Hero e grade usam a mesma regra: logo da emissora pequeno e nítido no canto, sem esfera/blur gigante atrás do texto. */
.tv-hero-bg { display: none; }
.tv-hero-card { background-color: #0d111b; }
.tv-hero-logo, .tv-hero-card:not(.is-main) .tv-hero-logo {
  z-index: 1; top: 22px; right: 22px; width: 112px; aspect-ratio: 16 / 9; transform: none; border-radius: 10px;
  box-shadow: 0 0 0 1px #ffffff1f; object-fit: cover;
}
.tv-hero-card:not(.is-main) .tv-hero-logo { width: 88px; }
.tv-hero-card:hover .tv-hero-logo, .tv-hero-card:not(.is-main):hover .tv-hero-logo { transform: none; }

.tv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.tv-card-btn { position: relative; flex-direction: row; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; box-shadow: none; }
.tv-card-btn:hover, .tv-card-btn:focus-visible { transform: translateY(-2px); box-shadow: none; }
.tv-card-art { position: static; flex: 0 0 112px; aspect-ratio: auto; overflow: visible; background: none; }
.tv-card-art::after { display: none; }
.tv-card-art img { width: 112px; height: 63px; border-radius: 8px; box-shadow: 0 0 0 1px #ffffff1a; filter: none; }
.tv-card-btn:hover .tv-card-art img, .tv-card-btn:focus-visible .tv-card-art img { transform: none; filter: none; }
.tv-card-art { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tv-card-art .tv-live-badge { position: static; }
.tv-hero-card.is-main .tv-hero-logo { width: 150px; }
.tv-card-info { flex: 1; padding: 0; border-top: 0; gap: 3px; }
.bx-hero[data-kind="anime"] { --bx-accent: #ff6aa8; }

/* ===== Loadings animados (02/11) =====
   Anel girando, pontos em onda e texto com brilho. Só transform/opacity (baratos): no modo leve da TV continuam rodando;
   o brilho do texto (background-position) fica estático lá. "Movimento reduzido": anel lento, pontos parados, sem brilho. */
.ld-ring {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  border-radius: 50%;
  border: 2px solid #ffffff26;
  border-top-color: var(--accent, #28c8f8);
  border-right-color: #825cff;
  animation: ld-spin 0.9s linear infinite;
}
.ld-dots { display: inline-flex; align-items: flex-end; gap: 0.2em; height: 1em; margin-left: 0.3em; }
.ld-dots i { width: 0.3em; height: 0.3em; border-radius: 50%; background: currentColor; opacity: 0.3; animation: ld-dot 1.1s ease-in-out infinite; }
.ld-dots i:nth-child(2) { animation-delay: 0.16s; }
.ld-dots i:nth-child(3) { animation-delay: 0.32s; }
.loading-note { display: flex; align-items: center; gap: 10px; }
.loading-note > span:nth-child(2) {
  background: linear-gradient(100deg, #9aa3b5 30%, #ffffff 50%, #9aa3b5 70%) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ld-text 2s linear infinite;
}
.login-submit.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.login-submit.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ld-spin 0.8s linear infinite;
}
@keyframes ld-spin { to { transform: rotate(1turn); } }
@keyframes ld-dot { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-0.28em); } }
@keyframes ld-text { to { background-position: -220% 0; } }

/* modo leve (TV): libera só os indicadores baratos que o reset global congelou (o brilho do texto não) */
html[data-fx="lite"] :is(.ld-ring, .lib-spinner, .reel-spinner, .player-loading-symbol span),
html[data-fx="lite"] .login-submit.is-loading::after,
html[data-fx="lite"] .reels-view.is-loading .reels-feed::before { animation-duration: 0.9s !important; animation-iteration-count: infinite !important; }
html[data-fx="lite"] .ld-dots i { animation-duration: 1.1s !important; animation-iteration-count: infinite !important; }
html[data-fx="lite"] .ld-dots i:nth-child(2) { animation-delay: 0.16s !important; }
html[data-fx="lite"] .ld-dots i:nth-child(3) { animation-delay: 0.32s !important; }
html[data-fx="lite"] .loading-note > span:nth-child(2) { background: none !important; color: #c3cad8 !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ld-ring, .login-submit.is-loading::after { animation-duration: 2.4s; }
  .ld-dots i { animation: none; opacity: 0.7; }
  .loading-note > span:nth-child(2) { animation: none; background: none; color: #c3cad8; }
  html[data-fx="lite"] :is(.ld-ring, .lib-spinner, .reel-spinner, .player-loading-symbol span),
  html[data-fx="lite"] .login-submit.is-loading::after { animation-duration: 2.4s !important; }
  html[data-fx="lite"] .ld-dots i { animation: none !important; opacity: 0.7; }
}

/* selo de economia do plano (calculado do preço) */
.pricing-save { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #28c8f824; color: #74dafa; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }

/* Lista de reprodução: barra de rolagem VISÍVEL (a padrão some no fundo escuro e parecia que a lista não rolava) */
.pl-list { min-height: 0; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #ffffff59 #ffffff10; }
.pl-list::-webkit-scrollbar { width: 10px; }
.pl-list::-webkit-scrollbar-track { background: #ffffff0d; border-radius: 8px; }
.pl-list::-webkit-scrollbar-thumb { background: #ffffff4d; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.pl-list::-webkit-scrollbar-thumb:hover { background: #ffffff80; background-clip: padding-box; border: 2px solid transparent; }

/* Anime na Início: mesmo cartão de pôster das outras fileiras; o nome só aparece ao passar o mouse/focar */
.anime-card.is-poster .live-caption { opacity: 0; transition: opacity 160ms ease; }
.anime-card.is-poster:hover .live-caption, .anime-card.is-poster:focus-within .live-caption { opacity: 1; }

/* ===== Tema AVYLO KIDS (perfil infantil ativo: html[data-kids="1"]) =====
   Só vale no perfil infantil; o resto do app mantém a identidade de sempre. Paleta alegre (amarelo sol, laranja, rosa, céu),
   fundo azul-noite em vez de preto, cantos mais redondos e logo próprio (estrela sorridente + "KIDS" colorido). */
html[data-kids="1"] {
  --bg: #0b0b24;
  --bg-elevated: #121236;
  --surface: #17173f;
  --surface-2: #211f52;
  --muted: #a9acd6;
  --accent: #ffcb3d;
  --accent-warm: #ff6fa8;
  --accent-rose: #6fd3ff;
  --line: #ffffff1a;
  --radius: 14px;
  --card-surface: #17173f;
  --card-surface-2: #211f52;
  --card-line: #ffcb3d22;
  --card-glow: 0 16px 36px #05051a99, 0 4px 18px #ffcb3d1f;
}
html[data-kids="1"] body { background: radial-gradient(120% 60% at 15% -10%, #2a1f6e55, transparent 60%), radial-gradient(90% 50% at 100% 0%, #ff6fa833, transparent 55%), var(--bg); }
html[data-kids="1"] .logo-mark { content: url("assets/avylo-kids-mark.svg"); filter: drop-shadow(0 0 10px #ffcb3d66) drop-shadow(0 2px 6px #ff6fa84d); }
html[data-kids="1"] .logo:hover .logo-mark { filter: drop-shadow(0 0 14px #ffcb3d99) drop-shadow(0 2px 8px #ff6fa880); transform: translateY(-1px) rotate(-8deg) scale(1.08); }
html[data-kids="1"] .logo small { font-size: 0; margin-top: 3px; padding: 0; letter-spacing: 0; }
html[data-kids="1"] .logo small::before {
  content: "KIDS"; display: block; font: 900 14px/1 "Nunito", "Baloo 2", "Trebuchet MS", system-ui, sans-serif; letter-spacing: 0.34em; padding-left: 0.34em;
  background: linear-gradient(90deg, #ffe14d, #ff9f43 35%, #ff5fa2 68%, #6fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-kids="1"] footer .logo small::before { font-size: 9px; }
html[data-kids="1"] .logo-mark { width: 46px; height: 46px; }
html[data-kids="1"] footer .logo-mark { width: 30px; height: 30px; }
html[data-kids="1"] .logo-copy::after { background: linear-gradient(90deg, transparent, #ffcb3d99, #ff6fa899, #6fd3ff99, transparent); }
html[data-kids="1"] header.nav, html[data-kids="1"] .nav { background-image: linear-gradient(180deg, #0b0b24ee, #0b0b2400); }
html[data-kids="1"] .nav a.active::after, html[data-kids="1"] .nav-links a.active::after { background: linear-gradient(90deg, #ffcb3d, #ff6fa8); }
html[data-kids="1"] .button.primary, html[data-kids="1"] .play-button, html[data-kids="1"] [data-play].button { background: linear-gradient(135deg, #ffe14d, #ff9f43); color: #2a1450; border-radius: 999px; font-weight: 800; box-shadow: 0 8px 22px #ff9f4340; }
html[data-kids="1"] .button.secondary { border-radius: 999px; }
html[data-kids="1"] .filters .chip { border-radius: 999px; }
html[data-kids="1"] .filters .chip.is-active, html[data-kids="1"] .filters .chip[aria-pressed="true"] { background: linear-gradient(135deg, #ffe14d, #ff9f43); color: #2a1450; border-color: transparent; }
html[data-kids="1"] .avylo-card.is-poster .ac-art, html[data-kids="1"] .avylo-card.is-poster:not(.is-collapsed):hover .ac-art, html[data-kids="1"] .avylo-card.is-poster:not(.is-collapsed):has(:focus-visible) .ac-art { border-radius: 16px; }
html[data-kids="1"] .avylo-card.is-poster .ac-art::after { box-shadow: inset 0 0 0 1px #ffffff26; }
html[data-kids="1"] .avylo-card.is-poster:hover .ac-art { box-shadow: 0 0 0 3px #ffcb3d, 0 14px 30px #05051a99; transition: box-shadow 160ms ease; }
html[data-kids="1"] .continue-card, html[data-kids="1"] .live-card .ac-art, html[data-kids="1"] .bx-hero, html[data-kids="1"] .pc-pop { border-radius: 18px; }
html[data-kids="1"] .section-heading h2 { font-weight: 800; letter-spacing: 0; }
html[data-kids="1"] .section-heading h2::before { content: "★"; margin-right: 8px; color: #ffcb3d; font-size: 0.8em; vertical-align: 0.08em; }
html[data-kids="1"] .eyebrow { color: #ff9fc6; }
html[data-kids="1"] .rating, html[data-kids="1"] .age-badge { border-radius: 999px; }
html[data-kids="1"] dialog:not(#player) { border-radius: 24px; }
html[data-kids="1"] .profile-avatar, html[data-kids="1"] #profileAvatar { box-shadow: 0 0 0 2px #ffcb3d; }
html[data-kids="1"] ::selection { background: #ffcb3d; color: #2a1450; }

/* Jogos de hoje: foco/hover do cartão (anel e elevação) não pode ser cortado pelo recorte da fileira */
.tv-games .rail { overflow-y: visible; }
html[data-kids="1"] .tv-game button:focus-visible { outline-color: #ffcb3d; }

/* ===== Editar perfil no estilo Netflix (03/11): avatar grande com lápis + nome, e a escolha de ícone em fileiras por categoria ===== */
#utility .pf-top { display: flex; align-items: center; gap: 28px; margin: 6px 0 26px; }
#utility .pf-top .profile-form-avatar { position: relative; margin: 0; min-height: 0; flex: 0 0 auto; }
#utility .pf-top .avatar-lg { width: 132px; height: 132px; min-width: 132px; flex-basis: 132px; border-radius: 22px; font-size: 40px; box-shadow: 0 18px 44px #0009, 0 0 0 1px #ffffff1f; }
#utility .pf-pencil { position: absolute; right: -8px; bottom: -8px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0b0d12; box-shadow: 0 6px 16px #0008; }
#utility .pf-pencil svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
#utility .pf-top .profile-form-fields { flex: 1 1 auto; min-width: 0; display: grid; gap: 14px; margin: 0; }
#utility .pf-section-title { margin: 4px 0 14px; font-size: 20px; font-weight: 750; letter-spacing: -0.01em; }
#utility .profile-avatar-section { border-bottom: 0; padding-bottom: 8px; }
#utility .pf-row { margin: 0 0 18px; }
#utility .pf-row-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #cfd5e3; letter-spacing: 0.01em; }
#utility .pf-row-track { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 6px 6px; margin: 0 -6px; }
#utility .avatar-option.is-round { flex: 0 0 70px; width: 70px; height: 70px; aspect-ratio: 1; border-radius: 18px; opacity: 1; border: 0; background-size: cover; transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
#utility .avatar-option.is-round:hover, #utility .avatar-option.is-round:focus-visible { transform: scale(1.1); box-shadow: 0 10px 24px #0008; border-color: transparent; }
#utility .avatar-option.is-round.is-selected { outline: 3px solid #fff; outline-offset: 3px; transform: scale(1.04); }
#utility .avatar-option.is-round span { font-size: 10px; }
@media (max-width: 560px) {
  #utility .pf-top { flex-direction: column; align-items: stretch; text-align: left; }
  #utility .pf-top .profile-form-avatar { align-self: center; }
  #utility .avatar-option.is-round { flex-basis: 56px; width: 56px; height: 56px; }
}
html[data-kids="1"] #utility .avatar-option.is-round.is-selected { outline-color: #ffcb3d; }

/* ===== Tela única de entrada (03/11): boas-vindas + login + "Não tem acesso?" (QR do WhatsApp) juntos, sobre a parede de pôsteres ===== */
.login-view.lv2 { overflow-y: auto; align-items: stretch; }
.lv2 .lv-rails { padding-block: clamp(8px, 2vh, 28px); gap: 0; opacity: 0.9; }
.lv2 .welcome-row { height: clamp(150px, 31vh, 300px); }
.lv2 .lv-scrim { background: radial-gradient(ellipse 52% 70% at 50% 52%, #060608f2 0%, #060608d6 46%, #06060880 70%, transparent 88%), linear-gradient(180deg, #060608 0%, #06060860 16%, transparent 34%, transparent 70%, #060608a0 90%, #060608 100%); }
.lv2 .lv-wrap { position: relative; z-index: 1; width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.lv2 .lv-center { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: auto; }
.lv2 .lv-title { margin: 6px 0 0; font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.lv2 .lv-title span { background: linear-gradient(90deg, #28c8f8, #825cff 55%, #ff649f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lv2 .lv-sub { margin: 0 0 6px; max-width: 380px; font-size: 14.5px; line-height: 1.55; color: #b4bacb; }
.lv2 .lv-card { width: 100%; padding: 26px 24px 20px; border-radius: 20px; text-align: left; background: linear-gradient(180deg, #12131ae6 0%, #0b0c11eb 100%); border: 1px solid #ffffff22; box-shadow: 0 30px 80px #000c, 0 0 0 1px #00000040; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lv2 .lv-card .login-error { margin: 0 0 12px; }
.lv2 .lv-card .login-error:empty { display: none; }
.lv2 .lv-noacc { width: 100%; margin-top: 16px; padding: 14px 4px 2px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-top: 1px solid #ffffff1a; background: none; color: #aab1c3; font: inherit; font-size: 13.5px; cursor: pointer; }
.lv2 .lv-noacc b { color: #4fe08a; font-weight: 700; }
.lv2 .lv-noacc svg { color: #4fe08a; transition: transform 220ms var(--ease-out); }
.lv2 .lv-noacc.is-open svg { transform: rotate(180deg); }
.lv2 .lv-noacc:hover span { color: #fff; }
.lv2 .lv-qr { overflow: hidden; }
.lv2 .lv-qr:not([hidden]) { animation: lv-qr-in 420ms var(--ease-out) both; }
@keyframes lv-qr-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lv2 .lv-qr-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 6px; text-align: center; }
.lv2 .lv-qr-text { margin: 0; font-size: 13px; line-height: 1.5; color: #aeb4c4; }
.lv2 .lv-qr-text strong { display: block; margin-bottom: 3px; color: #e6ecff; font-size: 14.5px; }
.lv2 .lv-qr .whatsapp-qr-card { margin: 0; }
.lv2 .lv-foot { margin: 8px 0 0; font-size: 12.5px; color: #8a91a4; }
@media (max-width: 650px) {
  .lv2 .lv-card { padding: 22px 18px 16px; }
  .lv2 .lv-rails { opacity: 0.55; }
}
@media (max-height: 640px) { .lv2 .lv-sub, .lv2 .lv-foot { display: none; } }
html[data-fx="lite"] .lv2 .lv-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0d0f15; }

/* entrada: fundo fixo (a página rola por dentro) e QR ao lado do texto para o cartão não passar da altura da tela */
.lv2 :is(.lv-rails, .login-halo, .lv-scrim) { position: fixed; }
.lv2 .lv-qr-inner { display: grid; grid-template-columns: 150px 1fr; grid-template-areas: "qr text" "qr btn"; gap: 10px 18px; align-items: center; text-align: left; }
.lv2 .lv-qr-text { grid-area: text; }
.lv2 .lv-qr .whatsapp-qr-card { grid-area: qr; padding: 8px; gap: 6px; }
.lv2 .lv-qr .whatsapp-qr-card svg { width: 132px; height: 132px; }
.lv2 .lv-qr .whatsapp-qr-card p { font-size: 11px; margin: 0; }
.lv2 .lv-qr .login-whatsapp-btn { grid-area: btn; justify-self: start; }
@media (max-width: 480px) {
  .lv2 .lv-qr-inner { grid-template-columns: 1fr; grid-template-areas: "text" "qr" "btn"; justify-items: center; text-align: center; }
  .lv2 .lv-qr .login-whatsapp-btn { justify-self: center; }
}

/* ===== Carregamento do AVYLO (03/11): limpo e premium. Marca respirando dentro de um anel finíssimo com um arco de luz que gira devagar; wordmark e MOVIES entram suaves. Só transform/opacity (leve até na TV). Some com fade quando o app está pronto. ===== */
html.intro-seen .boot-loading { display: none; }
.boot-loading { --u: min(1vw, 1.7778vh); position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: radial-gradient(ellipse 62% 56% at 50% 44%, #10152a 0%, #070810 55%, #04050a 100%); pointer-events: none; opacity: 1; transition: opacity 520ms cubic-bezier(0.4, 0, 0.2, 1), visibility 520ms; contain: layout paint; }
.boot-loading.is-out { opacity: 0; visibility: hidden; }
.bl-stack { display: grid; justify-items: center; gap: calc(var(--u) * 2.6); transform: translateY(-2%); animation: bl-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes bl-in { from { opacity: 0; transform: translateY(1.5%) scale(0.985); } to { opacity: 1; transform: translateY(-2%) scale(1); } }
.bl-orb { position: relative; width: calc(var(--u) * 14); height: calc(var(--u) * 14); display: grid; place-items: center; }
/* trilho do anel (fio de luz quase invisível) e halo suave atrás da marca */
.bl-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #ffffff14; background: radial-gradient(circle, #5a7bff1c 0%, #5a7bff00 62%); }
/* arco de luz: gira devagar, com cauda que some; azul → violeta → rosa (as cores da marca) */
.bl-arc { position: absolute; inset: 0; border-radius: 50%; will-change: transform;
  background: conic-gradient(from 0deg, #19d3ff00 0%, #19d3ff00 52%, #19d3ff 76%, #8a5cff 90%, #ff4fb8 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px));
  animation: bl-spin 2.1s cubic-bezier(0.45, 0.1, 0.55, 0.9) infinite; }
@keyframes bl-spin { to { transform: rotate(1turn); } }
.bl-mark { width: calc(var(--u) * 8.4); height: auto; will-change: transform, opacity; animation: bl-breathe 3.2s ease-in-out infinite; }
@keyframes bl-breathe { 0%, 100% { transform: scale(0.975); opacity: 0.9; } 50% { transform: scale(1.025); opacity: 1; } }
.bl-word { width: calc(var(--u) * 13.5); height: auto; opacity: 0; animation: bl-fade 800ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both; }
.bl-name { margin: calc(var(--u) * -1.2) 0 0; padding-left: 0.46em; font-size: calc(var(--u) * 1.05); font-weight: 700; letter-spacing: 0.46em; color: #7a839a; opacity: 0; animation: bl-fade 800ms cubic-bezier(0.16, 1, 0.3, 1) 380ms both; }
@keyframes bl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.bl-name { --bl-to: 0.85; }
/* o modo leve da TV zera animação: libera só estas */
html[data-fx="lite"] .bl-arc { animation-duration: 2.1s !important; animation-iteration-count: infinite !important; }
html[data-fx="lite"] .bl-mark { animation-duration: 3.2s !important; animation-iteration-count: infinite !important; }
html[data-fx="lite"] .bl-stack { animation-duration: 700ms !important; }
html[data-fx="lite"] .bl-word { animation-duration: 800ms !important; animation-delay: 220ms !important; }
html[data-fx="lite"] .bl-name { animation-duration: 800ms !important; animation-delay: 380ms !important; }
html[data-fx="lite"] .boot-loading { transition-duration: 520ms !important; }
@media (prefers-reduced-motion: reduce) { .bl-arc, .bl-mark { animation: none !important; } .bl-word, .bl-name { opacity: 1; animation: none !important; } }

/* ===== Scrollbars invisíveis em tudo (03/11, pedido do dono): a rolagem continua funcionando (roda, toque, setas), só a barra some. Vem por último e com !important para vencer as barras que listas específicas (ex.: lista do player) desenhavam. ===== */
html, body, * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar, *::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-corner { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }

/* ===== Interruptores (toggles) das Configurações, mais limpos (03/11): desligado = trilho cinza translúcido e bolinha clara; ligado = trilho com o degradê da marca e bolinha branca (o escuro sobre o azul ficava estranho). No Kids o trilho é amarelo. ===== */
.squish-setting > i { background: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff1c; }
.squish-setting > i::after { background: #d9dee8; }
.squish-setting input:checked + i { background: linear-gradient(90deg, #19d3ff, #825cff); box-shadow: 0 0 16px #4aa8ff44; }
.squish-setting input:checked + i::after { background: #fff; }
html[data-kids="1"] .squish-setting input:checked + i { background: linear-gradient(90deg, #ffcb3d, #ff8a3d); box-shadow: 0 0 16px #ffb02e55; }