/* ================================================================
   TV COIOTE PLAY — JELLYFIN WEB 12
   CSS consolidado e otimizado
   Release: 2026.09.17-navigation.capacity1

   Base funcional: CSS recebido em 30/08/2026.
   Paleta: branca/neutra — sem azul e sem vermelho.
   ================================================================ */

/* ----------------------------------------------------------------
   1. VARIÁVEIS E PALETA
   ---------------------------------------------------------------- */

html:root {
  /* html:root supera a paleta MUI carregada depois, sem duplicar regras. */
  /* Sentinela lida pelo JavaScript para liberar a interface somente depois de
     o tema principal ter sido analisado pelo navegador. */
  --tvc-theme-ready: 1;
  --tvc-release: "2026.09.17-navigation.capacity1";

  --coiote-card-radius: 10px;
  --coiote-control-radius: 16px;
  --coiote-checkbox-radius: 6px;
  --coiote-brand-logo: url('/web/tvc-branding/banner-light.png');
  --coiote-surface: #101010;
  --coiote-card-placeholder: #282828;
  --coiote-page-gutter: 3.3%;
  --coiote-editorial-gap: 1.2em;

  --coiote-white-96: rgb(255 255 255 / 96%);
  --coiote-white-92: rgb(255 255 255 / 92%);
  --coiote-white-88: rgb(255 255 255 / 88%);
  --coiote-white-78: rgb(255 255 255 / 78%);
  --coiote-white-74: rgb(255 255 255 / 74%);
  --coiote-white-72: rgb(255 255 255 / 72%);
  --coiote-white-68: rgb(255 255 255 / 68%);
  --coiote-white-62: rgb(255 255 255 / 62%);
  --coiote-white-58: rgb(255 255 255 / 58%);
  --coiote-white-48: rgb(255 255 255 / 48%);
  --coiote-white-38: rgb(255 255 255 / 38%);
  --coiote-white-34: rgb(255 255 255 / 34%);
  --coiote-white-28: rgb(255 255 255 / 28%);
  --coiote-white-25: rgb(255 255 255 / 25%);
  --coiote-white-22: rgb(255 255 255 / 22%);
  --coiote-white-20: rgb(255 255 255 / 20%);
  --coiote-white-16: rgb(255 255 255 / 16%);
  --coiote-white-13: rgb(255 255 255 / 13%);
  --coiote-white-12: rgb(255 255 255 / 12%);
  --coiote-white-10: rgb(255 255 255 / 10%);
  --coiote-white-09: rgb(255 255 255 / 9%);
  --coiote-white-07: rgb(255 255 255 / 7%);

  /* Links textuais. */
  --tvc-link-texto: var(--coiote-white-88);
  --tvc-link-texto-ativo: #fff;

  /* Menus internos. */
  --tvc-menu-surface: #222;
  --tvc-menu-border: var(--coiote-white-10);
  --tvc-menu-divider: rgb(255 255 255 / 8%);
  --tvc-menu-text: rgb(255 255 255 / 84%);
  --tvc-menu-text-active: #fff;
  --tvc-menu-hover: var(--coiote-white-07);
  --tvc-menu-selected: rgb(255 255 255 / 11%);
  --tvc-menu-selected-hover: rgb(255 255 255 / 15%);
  --tvc-menu-radius: 8px;

  /* Componentes legados e componentes MUI do Jellyfin 12. */
  --jf-palette-primary-main: var(--coiote-white-88);
  --jf-palette-primary-light: var(--coiote-white-96);
  --jf-palette-primary-dark: var(--coiote-white-72);
  --jf-palette-primary-contrastText: #111111;
  --jf-palette-primary-mainChannel: 255 255 255;
  --jf-palette-secondary-main: var(--coiote-white-62);
  --jf-palette-secondary-mainChannel: 255 255 255;

  /* Textos comuns em branco. Os contrastes próprios dos botões continuam
     controlados por primary/secondary-contrastText e pelas regras abaixo. */
  --jf-palette-text-primary: #fff;
  --jf-palette-text-primaryChannel: 255 255 255;
  --jf-palette-text-secondary: #fff;
  --jf-palette-text-secondaryChannel: 255 255 255;
}

/* ========================== CRITICAL START ==========================
   Shell mínimo e gates de prontidão. O arquivo nativo já entra no <head> e
   não precisa ser duplicado por um elemento <style> criado pelo JavaScript. */
html,
body,
.backgroundContainer,
header.MuiAppBar-root:not(:empty),
header.MuiAppBar-root:not(:empty) > .MuiToolbar-root {
  background: var(--coiote-surface, #101010) !important;
}


html:not([data-tvc-theme-ready="true"])
  #homeTab
  > #tvCoioteFeaturedBar
  > .coioteHeroContent,
html:not([data-tvc-theme-ready="true"]) #homeTab #tvCoioteTop10,
html:not([data-tvc-theme-ready="true"])
  #homeTab
  #tvCoioteEditorialSections {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ausência do atributo significa fallback visível. Somente um menu que o
   JavaScript marcou explicitamente como pendente é ocultado. */
#app-user-menu[data-tvc-ready="false"]
  :is(.MuiPaper-root, .MuiMenu-paper, .MuiPopover-paper) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================== CRITICAL END =========================== */

/* ----------------------------------------------------------------
   2. CABEÇALHO, LOGO E NAVEGAÇÃO
   ---------------------------------------------------------------- */

/* Identidade do botão inicial em todas as larguras, inclusive enquanto o
   Jellyfin ainda apresenta o cabeçalho inicial com MuiStack no celular.
   A ocultação da marca original não depende de JavaScript ou autenticação. */
.MuiToolbar-root.MuiToolbar-dense > .MuiStack-root > a[href="#/"] {
  font-size: 0 !important;
  background: var(--coiote-brand-logo) left center / contain no-repeat !important;
}

.MuiToolbar-root.MuiToolbar-dense
  > .MuiStack-root
  > a[href="#/"]
  > .MuiButton-icon {
  display: none !important;
}

@media (min-width: 900px) {
  .MuiToolbar-root.MuiToolbar-dense > .MuiStack-root > a[href="#/"] {
    width: 180px !important;
    min-width: 180px !important;
    height: 36px !important;
    padding: 0 !important;
  }
}

/* Home: oculta somente os títulos dos cards de bibliotecas. */
.card[data-isfolder="true"]:is(
    [data-type="CollectionFolder"],
    [data-type="UserView"]
  )
  > .cardBox
  > .cardText.cardText-first {
  display: none !important;
}

/* Desktop: espaçamento do cabeçalho normal; o header vazio do player
   não é atingido. */
@media (min-width: 1200px) {
  header.MuiAppBar-root:not(:empty)
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type {
    margin-top: 14px !important;
  }

  header.MuiAppBar-root:not(:empty) + div[aria-hidden="true"] {
    height: 62px !important;
  }

  header.MuiAppBar-root
    > .MuiToolbar-root.MuiToolbar-dense
    + .MuiToolbar-root.MuiToolbar-dense {
    margin-top: 28px !important;
  }

  header.MuiAppBar-root:has(
      > .MuiToolbar-root.MuiToolbar-dense + .MuiToolbar-root.MuiToolbar-dense
    )
    + div[aria-hidden="true"] {
    height: 138px !important;
  }

  header > .MuiToolbar-root:first-of-type > .MuiStack-root > a[href="#/"] {
    margin-right: 30px !important;
  }
}

/* Logo: clique neutro, sem ripple ou fundo azul. */
header
  > .MuiToolbar-root:first-of-type
  a[href="#/"]:is(:hover, :focus, :focus-visible, :active, .Mui-focusVisible) {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

header > .MuiToolbar-root:first-of-type a[href="#/"] .MuiTouchRipple-root {
  display: none !important;
}

/* Mobile e tablet: mesmo menu nativo ate 1199 px. */
@media (max-width: 1199.98px) {
  /* Variante inicial com botão nativo: mantém um único logo e reserva
     espaço antes de carregar sua imagem. A variante sem Stack abaixo
     continua usando o logo ao lado do botão do menu. */
  .MuiToolbar-root.MuiToolbar-dense > .MuiStack-root > a[href="#/"] {
    width: clamp(104px, 32vw, 145px) !important;
    min-width: clamp(104px, 32vw, 145px) !important;
    height: 30px !important;
    padding: 0 !important;
  }

  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type:not(
      :has(> .MuiStack-root)
    ) {
    position: relative !important;
    padding-inline: 12px !important;
  }

  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type:not(
      :has(> .MuiStack-root)
    )::after {
    content: "" !important;
    position: absolute !important;
    left: 64px !important;
    top: 50% !important;
    width: clamp(104px, 32vw, 145px) !important;
    height: 30px !important;
    transform: translateY(-50%) !important;
    background: var(--coiote-brand-logo) left center / contain no-repeat !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

/* Demais superfícies nativas da marca usam o mesmo arquivo leve servido pelo
   webroot, permitindo trocar a identidade sem regenerar este CSS. */
.splashLogo,
.pageTitleWithDefaultLogo {
  background-image: var(--coiote-brand-logo) !important;
}

.splashLogo {
  width: min(72vw, 600px) !important;
  height: min(30vh, 120px) !important;
}

:is(
    .adminDrawerLogo img,
    .logoScreenSaverImage,
    .MuiDrawer-root a[href="#/"] > .MuiListItemIcon-root img
  ) {
  content: var(--coiote-brand-logo) !important;
  object-fit: contain !important;
}

.MuiDrawer-root a[href="#/"] > .MuiListItemIcon-root {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

.MuiDrawer-root a[href="#/"] > .MuiListItemIcon-root img {
  width: min(72vw, 210px) !important;
  max-width: none !important;
  height: auto !important;
}

.MuiDrawer-root a[href="#/"] > .MuiListItemText-root {
  display: none !important;
}

.logoScreenSaverImage {
  left: 50% !important;
  width: min(72vw, 600px) !important;
  height: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

/* Identidade visual por ID de biblioteca, independente da classe e do nome.
   Máscaras incorporadas: nenhuma fonte, imagem ou consulta adicional. */
:is(header, .MuiDrawer-root) a[href*="93a59b902fb96560a954f92b8ed7c4cd"] { --coiote-library-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h17v15a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V8h3V3zm2 2v13c0 .35-.06.69-.17 1H19a1 1 0 0 0 1-1V5H7zM4 10v8a1 1 0 0 0 2 0v-8H4zm5-3h4v5H9V7zm6 0h3v2h-3V7zm0 3h3v2h-3v-2zm-6 4h9v1H9v-1zm0 3h4v1H9v-1zm6 0h3v1h-3v-1z'/%3E%3C/svg%3E"); }
:is(header, .MuiDrawer-root) a[href*="110176fc53e027cb9826e7df5788e69e"] { --coiote-library-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m15%2010%206-4v12l-6-4Z%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%2710%27%20r%3D%271%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E"); }
:is(header, .MuiDrawer-root) a[href*="4a8707f768b97d6f9b99345965eeca0d"] { --coiote-library-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z'/%3E%3C/svg%3E"); }
:is(header, .MuiDrawer-root) a[href*="8f3e04c1bc361191c16f63a5c8f9c190"] { --coiote-library-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.58 16.09l-1.09-7.66A3.996 3.996 0 0 0 16.53 5H7.47a3.996 3.996 0 0 0-3.96 3.43l-1.09 7.66A2.552 2.552 0 0 0 4.94 19c.68 0 1.32-.27 1.8-.75L9 16h6l2.25 2.25c.48.48 1.13.75 1.81.75 1.55 0 2.74-1.37 2.52-2.91zM11 11H9v2H7v-2H5V9h2V7h2v2h2v2zm4-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm3 3a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E"); }
:is(header, .MuiDrawer-root) a[href*="14a29cd3e5373e4af90b683d9d6d587d"] { --coiote-library-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%208a12%2012%200%200%200%2012%2012L4%208Zm5%208-3%205h12M10%2014l6-6M14%203a7%207%200%200%201%207%207M14%207a3%203%200%200%201%203%203%27%2F%3E%3Ccircle%20cx%3D%2713%27%20cy%3D%2711%27%20r%3D%271%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E"); }
:is(header, .MuiDrawer-root) a[href*="00172e3d69e3f2e051c3687b2af502ab"] { --coiote-library-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27m12%207%204.8%203.5-1.8%205.6H9l-1.8-5.6L12%207Zm0%200V3m4.8%207.5%204-1.5M15%2016.1l2.5%203.3M9%2016.1l-2.5%203.3M7.2%2010.5l-4-1.5%27%2F%3E%3C%2Fsvg%3E"); }
:is(header, .MuiDrawer-root) a:is([href*="93a59b902fb96560a954f92b8ed7c4cd"], [href*="110176fc53e027cb9826e7df5788e69e"], [href*="4a8707f768b97d6f9b99345965eeca0d"], [href*="8f3e04c1bc361191c16f63a5c8f9c190"], [href*="14a29cd3e5373e4af90b683d9d6d587d"], [href*="00172e3d69e3f2e051c3687b2af502ab"]) > :is(.MuiButton-icon, .MuiListItemIcon-root)::before {
  content: "" !important; display: block !important; width: 1.25em !important;
  height: 1.25em !important; flex: 0 0 1.25em !important; background-color: currentColor !important;
  -webkit-mask: var(--coiote-library-icon) center / contain no-repeat !important;
  mask: var(--coiote-library-icon) center / contain no-repeat !important;
}
:is(header, .MuiDrawer-root) a:is([href*="93a59b902fb96560a954f92b8ed7c4cd"], [href*="110176fc53e027cb9826e7df5788e69e"], [href*="4a8707f768b97d6f9b99345965eeca0d"], [href*="8f3e04c1bc361191c16f63a5c8f9c190"], [href*="14a29cd3e5373e4af90b683d9d6d587d"], [href*="00172e3d69e3f2e051c3687b2af502ab"]) > .MuiListItemIcon-root::before { width: 1.5rem !important; height: 1.5rem !important; flex-basis: 1.5rem !important; }
:is(header, .MuiDrawer-root) a:is([href*="93a59b902fb96560a954f92b8ed7c4cd"], [href*="110176fc53e027cb9826e7df5788e69e"], [href*="4a8707f768b97d6f9b99345965eeca0d"], [href*="8f3e04c1bc361191c16f63a5c8f9c190"], [href*="14a29cd3e5373e4af90b683d9d6d587d"], [href*="00172e3d69e3f2e051c3687b2af502ab"]) > :is(.MuiButton-icon, .MuiListItemIcon-root) > svg { display: none !important; }

/* Enquanto o player nativo está acima da interface, o cabeçalho do app
   não pode atravessar o quadro durante a abertura do vídeo. */
body:has(> .videoPlayerContainer.videoPlayerContainer-onTop)
  header.MuiAppBar-root {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Barra superior: ripple e foco neutros. */
header
  > .MuiToolbar-root.MuiToolbar-dense:first-of-type
  > .MuiStack-root
  > :is(a, button)
  .MuiTouchRipple-root {
  color: var(--coiote-white-38) !important;
}

header
  > .MuiToolbar-root.MuiToolbar-dense:first-of-type
  > .MuiStack-root
  > :is(a, button)
  .MuiTouchRipple-child {
  background-color: var(--coiote-white-38) !important;
}

header
  > .MuiToolbar-root.MuiToolbar-dense:first-of-type
  > .MuiStack-root
  > :is(a:not([href="#/"]), button[aria-controls="user-view-overflow-menu"]):is(
    :focus,
    :focus-visible,
    .Mui-focusVisible
  ) {
  background-color: var(--coiote-white-10) !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Avatar padrão neutro. O aria-controls do botão só existe em alguns estados
   do componente; por isso a regra acompanha diretamente qualquer avatar do
   cabeçalho e duplica a classe para vencer a especificidade dinâmica do MUI. */
header .MuiAvatar-root.MuiAvatar-root {
  background-color: #bdbdbd !important;
  color: #fff !important;
}

header button:has(.MuiAvatar-root) {
  background-color: transparent !important;
}

/* O item “Sair” do menu do usuário acompanha a visibilidade nativa do menu. */
#app-user-menu
  .MuiMenuItem-root[role="menuitem"]:has(svg[data-testid="LogoutIcon"]) {
  display: flex !important;
  visibility: inherit !important;
}

/* ----------------------------------------------------------------
   3. PREFERÊNCIAS DO USUÁRIO E LOGIN
   ---------------------------------------------------------------- */

/* Configurações do usuário: mantém somente Perfil e Legendas. */
#myPreferencesMenuPage
  :is(
    .lnkDisplayPreferences,
    .lnkHomePreferences,
    .lnkPlaybackPreferences,
    .lnkControlsPreferences,
    .adminSection
  ) {
  display: none !important;
}

/* Legendas: mantém somente os controles de aparência. */
.subtitlesettings > form > .verticalSection:first-child,
.subtitlesettings > form > .checkboxContainer,
.subtitlesettings .subtitleAppearanceSection > .sectionTitle,
.subtitlesettings
  .subtitleAppearanceSection
  .subtitleappearance-preview
  ~ .fieldDescription,
.subtitlesettings
  .subtitleAppearanceSection
  > .selectContainer:has(> #selectSubtitleStyling) {
  display: none !important;
}

/* Enquanto a consulta de usuários ainda não respondeu, não exibe o
   formulário visual vazio nem seus comandos auxiliares. */
#loginPage:has(.manualLoginForm.hide):has(#divUsers:empty)
  :is(.visualLoginForm, .readOnlyContent) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Login: oculta apenas os dois caminhos substituídos. */
.btnForgotPassword,
.btnManual {
  display: none !important;
}

/* Login: mesma linguagem da recuperacao de senha, com formulario nativo.
   Regras limitadas ao login; nenhuma mudanca na Home autenticada. */
body:has(#loginPage:not(.hide)) header.MuiAppBar-root,
body:has(#loginPage:not(.hide)) header.MuiAppBar-root + div[aria-hidden="true"] {
  display: none !important;
}

#loginPage:not(.hide) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: 32px 20px !important;
}

#loginPage:has(.manualLoginForm.hide):has(#divUsers:empty) .tvc-login-card {
  visibility: hidden;
  pointer-events: none;
}

#loginPage .tvc-login-card {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  max-width: 460px;
  margin: auto !important;
  padding: 36px 40px !important;
  background: #151515;
  border: 1px solid var(--coiote-white-09);
  border-radius: var(--coiote-card-radius);
  box-shadow: 0 22px 60px rgb(0 0 0 / 30%);
}

#loginPage .tvc-login-brand {
  display: block;
  width: min(240px, 100%);
  height: auto;
  margin: 0 auto 28px;
}

#loginPage :is(.manualLoginForm, .readOnlyContent) {
  width: 100%;
  max-width: none;
  margin: 0 !important;
}

#loginPage .tvc-login-heading {
  padding: 0;
  text-align: center;
}

#loginPage :is(.manualLoginForm, .visualLoginForm) h1 {
  margin: 0 0 28px !important;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

#loginPage .manualLoginForm .inputContainer {
  margin-bottom: 20px;
}

#loginPage .manualLoginForm .inputLabel {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--coiote-white-88);
}

#loginPage .manualLoginForm .emby-input {
  box-sizing: border-box;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--coiote-white-22);
  border-radius: var(--coiote-control-radius);
  background: #1a1a1a;
  color: #fff;
  font-size: 16px;
}

#loginPage .manualLoginForm .emby-input:focus {
  border-color: var(--coiote-white-92) !important;
  box-shadow: 0 0 0 1px var(--coiote-white-92) !important;
}

#loginPage .manualLoginForm .inputLabelFocused {
  color: var(--coiote-white-92) !important;
}

#loginPage .manualLoginForm .checkboxContainer {
  min-height: 44px;
  margin-bottom: 18px;
}

#loginPage .manualLoginForm .emby-checkbox:checked ~ .checkboxOutline {
  background-color: rgb(255 255 255 / 90%) !important;
  border-color: rgb(255 255 255 / 90%) !important;
}

#loginPage .manualLoginForm .emby-checkbox:checked ~ .checkboxOutline .checkboxIcon-checked {
  color: #161616 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#loginPage .manualLoginForm .button-submit {
  min-height: 54px;
  margin: 0;
  border-radius: var(--coiote-control-radius);
  background: rgb(255 255 255 / 90%) !important;
  color: #111 !important;
  font-size: 16px;
  font-weight: 700;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #loginPage .manualLoginForm .button-submit:hover:not(:disabled) {
    background: #fff !important;
    box-shadow: 0 4px 18px rgb(255 255 255 / 12%);
  }
}

#loginPage :is(.button-submit, .loginDisclaimer a, .tvc-login-help a):focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 4px;
}

#loginPage .manualLoginForm .button-submit:active:not(:disabled) {
  background: #dcdcdc !important;
  box-shadow: none;
}

#loginPage .manualLoginForm .button-submit:disabled {
  opacity: 0.65;
  cursor: default;
}

#loginPage .tvc-login-feedback {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--coiote-white-07);
  border: 1px solid var(--coiote-white-22);
  border-radius: var(--coiote-card-radius);
  color: var(--coiote-white-92);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#loginPage .readOnlyContent {
  margin-top: 20px !important;
  text-align: center;
}

#loginPage .loginDisclaimerContainer {
  margin-top: 0;
}

#loginPage .manualLoginForm .emby-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}

#loginPage .tvc-login-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#loginPage :is(.loginDisclaimer, .tvc-login-help) {
  font-size: 14px;
  line-height: 1.5;
}

#loginPage :is(.loginDisclaimer p, .tvc-login-help) {
  margin: 0;
}

#loginPage :is(.loginDisclaimer a, .tvc-login-help a) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--coiote-white-88) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#loginPage :is(.loginDisclaimer a, .tvc-login-help a):hover {
  color: #fff !important;
}

@media (max-width: 480px) {
  #loginPage:not(.hide) { padding: 20px 16px !important; }
  #loginPage:has(.manualLoginForm.hide):has(#divUsers:empty) .tvc-login-card {
  visibility: hidden;
  pointer-events: none;
}

#loginPage .tvc-login-card { padding: 28px 24px !important; }
  #loginPage :is(.manualLoginForm, .visualLoginForm) h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #loginPage .manualLoginForm .button-submit { transition: none; }
}


/* Mobile: ações de senha e legendas seguem o mesmo padrão. Os botões
   secundários, como Excluir Imagem, não são atingidos. */
@media (max-width: 899px) {
  :is(
    #userProfilePage .updatePasswordForm .button-submit,
    #userProfilePage .updatePasswordForm button[type="submit"],
    .subtitlesettings .btnSave
  ) {
    background: rgb(255 255 255 / 90%) !important;
    color: #111 !important;
  }
}

/* Busca: foco branco em desktop e mobile. */
:is(#searchText, .searchInput, .searchFields .emby-input):focus {
  border-color: var(--coiote-white-92) !important;
  box-shadow: 0 0 0 1px var(--coiote-white-92) !important;
  outline: none !important;
}

/* Raio unificado de campos e botões principais. */
:is(
  .manualLoginForm .emby-input,
  .manualLoginForm .raised,
  .updatePasswordForm .emby-input,
  .updatePasswordForm .raised,
  .subtitlesettings .emby-select,
  .subtitlesettings input.emby-input[type="color"],
  .subtitlesettings .btnSave,
  #searchText,
  .searchInput,
  .searchFields .emby-input,
  a.clearLink[href*="personId="] > button.raised.more.raised-mini.noIcon
) {
  border-radius: var(--coiote-control-radius) !important;
}

/* Perfil: posicionamento, foto circular e botões. */
#userProfilePage .readOnlyContent {
  margin: 48px auto 1.8em !important;
}

#userProfilePage :is(.imagePlaceHolder, #image) {
  border-radius: 50% !important;
  overflow: hidden !important;
}

#userProfilePage :is(#btnAddImage, #btnDeleteImage) {
  border-radius: var(--coiote-control-radius) !important;
}

#userProfilePage button[type="submit"] {
  margin-bottom: 12px !important;
}

/* Perfil no mobile: o Jellyfin dispõe foto e nome em uma única linha. Com
   nomes longos, a foto sai da área visível; a coluna abaixo mantém ambos
   centralizados sem alterar a estrutura do desktop nem o formulário. */
@media (max-width: 899px) {
  #userProfilePage .readOnlyContent {
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }

  #userProfilePage .imagePlaceHolder {
    display: block !important;
    width: 9rem !important;
    height: 9rem !important;
    max-width: 9rem !important;
    flex: 0 0 9rem !important;
    margin: 0 auto !important;
  }

  #userProfilePage #image {
    display: block !important;
    width: 9rem !important;
    height: 9rem !important;
    background-position: center !important;
    background-size: cover !important;
  }

  #userProfilePage .imagePlaceHolder + div {
    width: 100% !important;
    min-width: 0 !important;
    margin: 1rem 0 1.5rem !important;
    align-items: center !important;
  }

  #userProfilePage .username {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }
}

/* Prévia e controles da aparência das legendas. */
.subtitlesettings
  :is(.subtitleappearance-preview, .subtitleappearance-preview-window) {
  border-radius: var(--coiote-control-radius) !important;
  overflow: hidden !important;
}

.subtitlesettings input.emby-input[type="color"] {
  overflow: hidden !important;
  padding: 0 !important;
}

.subtitlesettings input.emby-input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  border-radius: inherit !important;
}

.subtitlesettings input.emby-input[type="color"]::-webkit-color-swatch {
  border: 0 !important;
  border-radius: inherit !important;
}

.subtitlesettings input.emby-input[type="color"]::-moz-color-swatch {
  border: 0 !important;
  border-radius: inherit !important;
}

.subtitlesettings
  :is(
    .mdl-slider-background-flex-inner,
    .mdl-slider-background-upper,
    .mdl-slider-background-lower
  ) {
  border-radius: 999px !important;
}

.subtitlesettings .mdl-slider::-webkit-slider-thumb {
  border-radius: 50% !important;
}

.subtitlesettings .mdl-slider::-moz-range-thumb {
  border-radius: 50% !important;
}

:is(.manualLoginForm, .subtitlesettings) .checkboxOutline {
  border-radius: var(--coiote-checkbox-radius) !important;
}

/* ----------------------------------------------------------------
   4. BIBLIOTECAS, MENUS, FILTROS E ORDENAÇÃO
   ---------------------------------------------------------------- */

/* Oculta Reproduzir Tudo, Aleatório e modo de visualização. */
button:is(
  [title="Reproduzir Tudo"],
  [title="Aleatório"],
  [title="Ver as configurações"]
) {
  display: none !important;
}

/* Oculta o guia alfabético lateral. */
.alphaPicker-fixed-right {
  display: none !important;
}

/* Menu Filmes: mantém Filmes, Sugestões e Gêneros. */
#library-view-menu
  ul.MuiMenu-list[role="menu"]:has(> li:nth-child(7):last-child)
  > li:is(:nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7)) {
  display: none !important;
}

/* Menu Séries: mantém somente Séries e Episódios. */
#library-view-menu
  ul.MuiMenu-list[role="menu"]:has(> li:nth-child(8):last-child)
  > li:not(:first-child, :nth-child(6)) {
  display: none !important;
}

/* Filtros: mantém Status completo, Gêneros e Anos.
   Em Séries, também oculta Status da série. */
#filter-popover
  .MuiAccordion-root:has(
    :is(
      #filtersFeatures-header,
      #filtersVideoTypes-header,
      #filtersOfficialRatings-header,
      #filtersTags-header,
      #filtersStudios-header,
      #filtersAudioLanguages-header,
      #filtersSubtitleLanguages-header
    )
  ),
#filter-popover button[title="Redefinir filtros"],
#filter-popover .MuiAccordion-root:has(#filtersSeriesStatus-header) {
  display: none !important;
}

/* Ordenar Filmes: mantém Nome, Aleatório, Comunidade,
   Data de Adição, Data de Lançamento e Duração. */
body:has(#moviesPage:not(.hide))
  #sort-popover
  ul.MuiList-root.MuiList-padding[role="menu"]:not(.MuiMenu-list)
  > li:is(:nth-child(4), :nth-child(6), :nth-child(7), :nth-child(8)) {
  display: none !important;
}

/* TV Coiote Notícias: remove Gêneros do filtro. A ordenação inteira é
   ocultada pela regra seguinte; o filtro continua disponível. */
body:has(
    header
      a[aria-label="Busca"][href*="parentId=93a59b902fb96560a954f92b8ed7c4cd"]
  )
  #filter-popover
  .MuiAccordion-root:has(#filtersGenres-header) {
  display: none !important;
}

/* TV Coiote Notícias e Filmes Atuais: remove por completo o botão e o menu
   de ordenação, na raiz e nas subpastas. O parentId cobre a raiz; o item
   selecionado no drawer cobre as pastas internas. TV Coiote Especiais
   preserva o comportamento anterior: sem ordenação apenas nas subpastas. */
body:is(
    :has(
        header a[href*="parentId=93a59b902fb96560a954f92b8ed7c4cd"],
        a.MuiListItemButton-root.Mui-selected[href*="topParentId=93a59b902fb96560a954f92b8ed7c4cd"],
        a.navMenuOption-selected[data-itemid="93a59b902fb96560a954f92b8ed7c4cd"]
      ),
    :has(
        header a[href*="parentId=4a8707f768b97d6f9b99345965eeca0d"],
        a.MuiListItemButton-root.Mui-selected[href*="topParentId=4a8707f768b97d6f9b99345965eeca0d"],
        a.navMenuOption-selected[data-itemid="4a8707f768b97d6f9b99345965eeca0d"]
      ),
    :has(
        a.MuiListItemButton-root.Mui-selected[href*="topParentId=110176fc53e027cb9826e7df5788e69e"],
        a.navMenuOption-selected[data-itemid="110176fc53e027cb9826e7df5788e69e"]
      ):not(
        :has(
            header
              a[aria-label="Busca"][href*="parentId=110176fc53e027cb9826e7df5788e69e"]
          )
      )
  )
  :is(
    button[title="Ordenar"],
    button:has(svg[data-testid="SortByAlphaIcon"]),
    #sort-popover
  ) {
  display: none !important;
}

/* Ordenar Séries: mantém Nome, Aleatório,
   Avaliação da Comunidade e Data de Lançamento. */
#sort-popover
  ul.MuiList-root.MuiList-padding[role="menu"]:not(.MuiMenu-list):has(
    > li:nth-child(8):last-child > .MuiListItemText-root
  )
  > li:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)) {
  display: none !important;
}

/* Subpastas: contador centralizado; controles invisíveis não ocupam espaço. */
.itemsViewSettingsContainer {
  position: relative !important;
  justify-content: center !important;
}

.itemsViewSettingsContainer > .paging {
  margin: 0 !important;
}

.itemsViewSettingsContainer > button {
  position: absolute !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove a segunda barra somente na raiz de TV Coiote Especiais. */
header.MuiAppBar-root:has(
    a[aria-label="Busca"][href*="parentId=110176fc53e027cb9826e7df5788e69e"]
  )
  > .MuiToolbar-root:nth-of-type(2) {
  display: none !important;
}

/* ----------------------------------------------------------------
   5. PÁGINAS DE MÍDIA
   ---------------------------------------------------------------- */

/* Ocultações específicas já existentes. */
#itemDetailPage .itemTags,
#itemDetailPage
  .trackSelections
  :is(.selectVideoContainer, .selectAudioContainer, .selectSubtitlesContainer),
#itemDetailPage .mainDetailButtons :is(.btnReplay, .btnPlayTrailer),
#itemDetailPage
  .itemMiscInfo
  :is(.mediaInfoOfficialRating, .mediaInfoCriticRating),
#itemDetailPage .btnMoreCommands.detailButton {
  display: none !important;
}

/* Política da plataforma: nenhum backdrop nativo como fundo das páginas
   internas, mesmo que uma preferência antiga do cliente esteja ativada.
   A faixa própria da Home usa outra estrutura e não é atingida por isto. */
.backdropContainer {
  display: none !important;
  background: none !important;
}

/* No desktop, itemBackdrop é também o espaçador estrutural nativo (40vh) da
   página de mídia. Ele permanece vazio e invisível para preservar o layout;
   no mobile, onde a capa é centralizada acima do título, pode ser removido. */
#itemDetailPage #itemBackdrop {
  background: none !important;
  animation: none !important;
}

.layout-desktop #itemDetailPage #itemBackdrop {
  display: block !important;
  visibility: hidden !important;
}

.layout-mobile #itemDetailPage #itemBackdrop {
  display: none !important;
}

.backgroundContainer.withBackdrop {
  opacity: 1 !important;
}

/* Faixa de informações na mesma cor do fundo. */
#itemDetailPage .detailRibbon {
  background: var(--jf-palette-background-default, #101010) !important;
}

/* Página de pessoa: Livros e Livros de áudio são criados vazios antes das
   consultas assíncronas. Eles só aparecem se o contêiner receber itens. */
#itemDetailPage
  #childrenContent
  > .verticalSection:is([data-type="Audiobook"], [data-type="Book"]):has(
    > .itemsContainer:empty
  ) {
  display: none !important;
}

/* Detalhes no mobile: sem banner e com a capa em fluxo normal, centralizada
   acima do título. Isso neutraliza o recuo lateral nativo do Jellyfin 12. */
.layout-mobile #itemDetailPage .detailRibbon .infoWrapper,
.layout-mobile #itemDetailPage .mainDetailButtons {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.layout-mobile
  #itemDetailPage
  .detailRibbon
  .infoWrapper
  > .detailImageContainer {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 1.5rem auto 1rem !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.layout-mobile
  #itemDetailPage
  .detailRibbon
  .infoWrapper
  > .detailImageContainer:empty {
  display: none !important;
}

.layout-mobile
  #itemDetailPage
  .detailRibbon
  .detailImageContainer
  > .card {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  width: clamp(168px, 52vw, 230px) !important;
  max-width: 230px !important;
  max-height: none !important;
  margin: 0 auto !important;
  filter: none !important;
}

.layout-mobile
  #itemDetailPage
  .detailRibbon
  .detailImageContainer
  > .card:is(.backdropCard, .bannerCard) {
  width: min(90vw, 520px) !important;
  max-width: 520px !important;
}

.layout-mobile #itemDetailPage .mainDetailButtons {
  width: 100% !important;
  justify-content: center !important;
}

/* Ações principais da mídia. */
#itemDetailPage .mainDetailButtons {
  column-gap: 10px !important;
  row-gap: 10px !important;
}

#itemDetailPage
  .mainDetailButtons
  :is(.btnPlaystate, .btnUserRating).detailButton {
  min-width: 46px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid var(--coiote-white-34) !important;
  border-radius: var(--coiote-control-radius) !important;
  background: var(--coiote-white-07) !important;
  color: var(--coiote-white-62) !important;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease !important;
}

#itemDetailPage
  .mainDetailButtons
  :is(
    .btnPlaystate[data-played="false"],
    .btnUserRating[data-isfavorite="false"]
  ) {
  background: var(--coiote-white-07) !important;
  border-color: var(--coiote-white-34) !important;
  color: var(--coiote-white-62) !important;
}

#itemDetailPage
  .mainDetailButtons
  :is(
    .btnPlaystate[data-played="true"],
    .btnUserRating[data-isfavorite="true"]
  ) {
  background: var(--coiote-white-88) !important;
  border-color: var(--coiote-white-88) !important;
  color: #111 !important;
}

#itemDetailPage
  .mainDetailButtons
  :is(.btnPlaystate, .btnUserRating).detailButton
  :is(svg, .detailButton-icon) {
  color: inherit !important;
  fill: currentColor !important;
}

/* Assistir: ação principal com texto. */
#itemDetailPage .mainDetailButtons .btnPlay.detailButton {
  min-width: 116px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid var(--coiote-white-92) !important;
  border-radius: var(--coiote-control-radius) !important;
  background: var(--coiote-white-92) !important;
  color: #111 !important;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease !important;
}

#itemDetailPage .mainDetailButtons .btnPlay.detailButton .detailButton-icon {
  display: none !important;
}

#itemDetailPage
  .mainDetailButtons
  .btnPlay.detailButton
  .detailButton-content::after {
  content: "Assistir";
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#itemDetailPage .mainDetailButtons .btnPlay.detailButton:hover {
  background: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px var(--coiote-white-20) !important;
}

#itemDetailPage .mainDetailButtons .btnPlay.detailButton:active {
  transform: scale(0.97) !important;
  box-shadow: none !important;
}

#itemDetailPage
  .mainDetailButtons
  :is(.btnPlaystate, .btnUserRating).detailButton:hover {
  border-color: var(--coiote-white-72) !important;
  background: var(--coiote-white-16) !important;
  transform: translateY(-1px) !important;
}

#itemDetailPage
  .mainDetailButtons
  :is(.btnPlaystate, .btnUserRating).detailButton:active {
  transform: scale(0.95) !important;
}

#itemDetailPage
  .mainDetailButtons
  :is(
    .btnPlaystate[data-played="true"],
    .btnUserRating[data-isfavorite="true"]
  ):hover {
  background: var(--coiote-white-96) !important;
  border-color: #fff !important;
  color: #111 !important;
  box-shadow: 0 4px 14px var(--coiote-white-16) !important;
}

#itemDetailPage
  .mainDetailButtons
  :is(
    .btnPlaystate[data-played="false"],
    .btnUserRating[data-isfavorite="false"]
  ):active {
  background: var(--coiote-white-88) !important;
  border-color: var(--coiote-white-88) !important;
  color: #111 !important;
}

/* ----------------------------------------------------------------
   6. CARDS, INDICADORES E CARREGAMENTO
   ---------------------------------------------------------------- */

/* Segurança visual do bloqueio comportamental do arquivo JS complementar. */
.selectionCommandsPanel,
.itemSelectionPanel {
  display: none !important;
}

/* Carregadores legados e MUI em branco. O anel principal mantém uma trilha
   discreta e um arco assimétrico; pintar toda a borda da mesma cor faz a
   rotação existir tecnicamente, mas parecer estática. */
@keyframes tvc-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.progressring-spiner {
  box-sizing: border-box !important;
  width: 42px !important;
  height: 42px !important;
  border-width: 3px !important;
  border-style: solid !important;
  border-color: var(--coiote-white-16) !important;
  border-top-color: var(--coiote-white-96) !important;
  border-right-color: var(--coiote-white-48) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: tvc-loading-spin 760ms linear infinite !important;
}

.mdl-spinner__layer-1 {
  border-color: var(--coiote-white-96) !important;
}

.mdl-spinner__layer-2 {
  border-color: var(--coiote-white-74) !important;
}

.mdl-spinner__layer-3 {
  border-color: var(--coiote-white-74) !important;
}

.mdl-spinner__layer-4 {
  border-color: var(--coiote-white-62) !important;
}

:is(.MuiCircularProgress-root, .MuiSlider-track, .MuiSlider-thumb) {
  color: var(--coiote-white-88) !important;
}

/* O carregador atual da Home e dos catálogos é o CircularProgress do MUI.
   O traço SVG nativo encolhe até parecer um risco parado; o anel abaixo
   mantém uma trilha visível e um arco com direção inequívoca. */
.MuiCircularProgress-root[role="progressbar"] {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    from 0deg,
    var(--coiote-white-96) 0deg 64deg,
    var(--coiote-white-62) 64deg 92deg,
    var(--coiote-white-16) 92deg 360deg
  ) !important;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2.5px)
  ) !important;
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2.5px)
  ) !important;
  color: transparent !important;
  box-shadow: none !important;
  animation: tvc-loading-spin 780ms linear infinite !important;
}

.MuiCircularProgress-root[role="progressbar"]
  :is(svg, .MuiCircularProgress-circle) {
  opacity: 0 !important;
}

/* Em algumas compilações o próprio elemento raiz é o SVG. */
svg.MuiCircularProgress-root[role="progressbar"]
  .MuiCircularProgress-circle {
  stroke: transparent !important;
}

@media (max-width: 700px) {
  .MuiCircularProgress-root[role="progressbar"] {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Redução de movimento: preserva o indicador, sem rotação contínua. */
@media (prefers-reduced-motion: reduce) {
  .progressring-spiner,
  .MuiCircularProgress-root[role="progressbar"],
  .MuiCircularProgress-indeterminate,
  .MuiCircularProgress-circleIndeterminate {
    animation: none !important;
  }
}

/* A nota usa a mesma família de ícones, em branco suave, sem o amarelo
   isolado. Não altera a nota nem o coração de Favoritos. */
:is(.starRatingContainer, .mediaInfoItem) .starIcon,
#itemDetailPage .mediaInfoPrimary .material-icons.star,
#itemDetailPage .starRatingContainer .material-icons {
  color: var(--coiote-white-78) !important;
  font-size: 1.05em !important;
  text-shadow: none !important;
  vertical-align: -0.12em !important;
}


@media (max-width: 700px) {
  .progressring-spiner {
    width: 36px !important;
    height: 36px !important;
    border-width: 2.5px !important;
  }
}

/* Sliders legados e nativos. */
:is(.iconOsdProgressInner, .mdl-slider-background-lower) {
  background-color: var(--coiote-white-88) !important;
}

.mdl-slider::-webkit-slider-thumb,
.volumeSlider::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
  background: #fff !important;
  border-color: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 1px #fff !important;
}

.mdl-slider::-moz-range-thumb,
.volumeSlider::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
  background: #fff !important;
  border-color: #fff !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 1px #fff !important;
}

input[type="range"] {
  accent-color: var(--coiote-white-88);
}

/* Barra de progresso MUI dos cards. */
.MuiLinearProgress-root.itemLinearProgress {
  background-color: rgb(255 255 255 / 24%) !important;
}

.MuiLinearProgress-root.itemLinearProgress
  .MuiLinearProgress-bar.MuiLinearProgress-barColorPrimary {
  background-color: var(--coiote-white-88) !important;
}

/* Posters e miniaturas de trickplay. */
.card .cardScalable {
  overflow: hidden !important;
  border-radius: var(--coiote-card-radius) !important;
}

.card
  .cardScalable
  :is(.cardPadder, .cardImageContainer, .cardImageContainer > img),
.sliderBubble,
.sliderBubble :is(img, .sliderBubbleImage, .bubbleImage) {
  border-radius: var(--coiote-card-radius) !important;
}

.sliderBubble {
  overflow: hidden !important;
}

/* Fundo neutro somente quando o item realmente não possui imagem. Não
   recolore o cardPadder provisório das capas que ainda estão carregando. */
.card .cardContent.defaultCardBackground {
  background-color: #282828 !important;
}

.card .cardContent.defaultCardBackground .cardImageIcon {
  color: var(--coiote-white-78) !important;
}

/* A capa entra no primeiro quadro após o download, sem o fade adicional de
   100/500 ms do loader. Além de evitar o flash, reduz animações na Home. */
.card
  .cardImageContainer:is(.lazy-image-fadein, .lazy-image-fadein-fast) {
  opacity: 1 !important;
  animation: none !important;
}

/* Cards de conteúdo: o invólucro completo avança como a arte do Top 10. A
   imagem interna permanece imóvel e a camada preta nativa do hover do Jellyfin 12 é
   neutralizada. Pastas comuns, pessoas e a capa da página de detalhes ficam
   fora; os cards de bibliotecas da fileira Sessões recebem a mesma solução no
   bloco específico abaixo. */
@media (hover: hover) and (pointer: fine) {
  .itemsContainer
    .card:not([data-type="CollectionFolder"]):not([data-type="UserView"]):not(
      [data-type="Folder"]
    ):not([data-type="Person"])
    > .cardBox {
    transition: transform 150ms ease !important;
    transform-origin: center center !important;
  }

  .itemsContainer
    .card:not([data-type="CollectionFolder"]):not([data-type="UserView"]):not(
      [data-type="Folder"]
    ):not([data-type="Person"])
    :is(.cardScalable, .cardImageContainer, .cardImageContainer > img) {
    filter: none !important;
    transform: none !important;
  }

  .itemsContainer
    .card:not([data-type="CollectionFolder"]):not([data-type="UserView"]):not(
      [data-type="Folder"]
    ):not([data-type="Person"])
    .cardOverlayContainer {
    background: transparent !important;
    opacity: 0 !important;
    transition: none !important;
  }

  .itemsContainer
    .card:not([data-type="CollectionFolder"]):not([data-type="UserView"]):not(
      [data-type="Folder"]
    ):not([data-type="Person"]):hover
    > .cardBox {
    transform: translate3d(0, -1px, 0) scale(1.012) !important;
  }

  /* Sessões: remove o hover antigo que ampliava/escurecia a arte por dentro e
     move o card inteiro, exatamente como nas demais fileiras da Home. */
  #homeTab
    .itemsContainer
    .card:is([data-type="CollectionFolder"], [data-type="UserView"])
    > .cardBox {
    transition: transform 150ms ease !important;
    transform-origin: center center !important;
  }

  #homeTab
    .itemsContainer
    .card:is([data-type="CollectionFolder"], [data-type="UserView"])
    :is(.cardScalable, .cardImageContainer, .cardImageContainer > img) {
    filter: none !important;
    transform: none !important;
  }

  #homeTab
    .itemsContainer
    .card:is([data-type="CollectionFolder"], [data-type="UserView"])
    .cardOverlayContainer {
    background: transparent !important;
    opacity: 0 !important;
    transition: none !important;
  }

  #homeTab
    .itemsContainer
    .card:is([data-type="CollectionFolder"], [data-type="UserView"]):hover
    > .cardBox {
    transform: translate3d(0, -1px, 0) scale(1.012) !important;
  }
}

/* Filtro ativo: bolinha branca. */
button[title="Filtro"] .MuiBadge-badge.MuiBadge-dot:not(.MuiBadge-invisible) {
  background-color: #fff !important;
}

/* Indicadores e progresso dos cards. */
.playedIndicator {
  background: var(--coiote-white-88) !important;
  color: #111 !important;
}

.itemProgressBar {
  height: 5px !important;
  background: var(--coiote-white-22) !important;
  border-radius: 3px !important;
}

.itemProgressBarForeground {
  background: #fff !important;
  box-shadow: 0 0 5px rgb(255 255 255 / 65%) !important;
  border-radius: 3px !important;
}

/* Remove somente ações flutuantes já ocultadas no CSS original. */
.cardOverlayFab-primary,
.cardOverlayButton:is(
  [data-action="play"],
  [data-action="resume"],
  [data-action="menu"],
  [title="Reproduzir"]
) {
  display: none !important;
}

/* Assistido e favorito no canto dos cards. */
.cardOverlayButton-br > button:is([data-played], [data-isfavorite]) {
  display: none !important;
}

/* Pastas: oculta indicadores de pasta/assistido; cards: oculta contagem. */
.card[data-isfolder="true"] :is(.videoIndicator, .playedIndicator),
.cardIndicators > .countIndicator {
  display: none !important;
}

/* Títulos das fileiras de mídia: o padrão estreado pelo Top 10 passa a valer
   na Home e nas seções de cards das páginas internas. sectionTitle-cards é a
   classe semântica do Jellyfin para essas fileiras, portanto configurações e
   títulos de formulários não são alterados. */
.sectionTitle.sectionTitle-cards {
  color: #fff !important;
  font-family: inherit !important;
  font-size: clamp(1.25rem, 1.65vw, 1.55rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.sectionTitle.sectionTitle-cards
  :is(.sectionTitleTextButton, a, button) {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Library title links align their label and icon as one row at every width. */
.libraryPage:not(.homePage)
  .sectionTitleContainer.sectionTitleContainer-cards
  > .sectionTitleTextButton {
  align-items: center;
  padding-bottom: 0.35em !important;
}

.libraryPage:not(.homePage)
  .sectionTitleContainer.sectionTitleContainer-cards
  > .sectionTitleTextButton
  > svg.MuiSvgIcon-root {
  padding-top: 0;
}

.libraryPage:not(.homePage)
  .sectionTitleContainer.sectionTitleContainer-cards
  > .sectionTitleTextButton
  > .sectionTitle {
  margin-block: 0;
}

/* Na Home, os títulos das fileiras são apenas rótulos: não abrem a biblioteca
   e não exibem o chevron. A regra fica restrita a #homeTab; títulos idênticos
   dentro das bibliotecas continuam clicáveis. */
#homeTab
  .sectionTitleContainer.sectionTitleContainer-cards
  > .sectionTitleTextButton {
  pointer-events: none !important;
  cursor: default !important;
}

#homeTab
  .sectionTitleContainer.sectionTitleContainer-cards
  > .sectionTitleTextButton
  > .material-icons.chevron_right {
  display: none !important;
}

/* All Home rows follow input capability, including narrow desktop windows. */
@media not all and (pointer: fine) {
  #homeTab :is(.emby-scrollbuttons, .coioteTop10Controls, .coioteEditorialControls) {
    display: none !important;
  }
}

/* The direct-heading library row uses the same header line for both controls. */
#homeTab .verticalSection:has(> .sectionTitle-cards):has(> .emby-scrollbuttons) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
#homeTab .verticalSection:has(> .emby-scrollbuttons) > .sectionTitle-cards {
  grid-area: 1 / 1;
}
#homeTab .verticalSection:has(> .sectionTitle-cards) > .emby-scrollbuttons {
  position: static !important;
  grid-area: 1 / 2;
  align-self: center;
  padding-top: 0 !important;
}
#homeTab .verticalSection:has(> .sectionTitle-cards):has(> .emby-scrollbuttons) > [is="emby-scroller"] {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Previews share the native 20px worker; full images retain decode readiness. */
#homeTab :is(.coioteEditorialArtwork, .coioteTop10Artwork) > .tvcPosterPreview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#homeTab :is(.coioteEditorialImage, .coioteTop10Image) {
  position: relative;
}

/* As setas nativas repetem o desenho leve da fileira Top 10. O ícone de fonte
   é substituído por um chevron CSS, sem imagem externa ou JavaScript. */
.emby-scrollbuttons {
  column-gap: 2px !important;
}

.emby-scrollbuttons .emby-scrollbuttons-button {
  position: relative !important;
  box-sizing: border-box !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition:
    opacity 130ms ease,
    transform 130ms ease !important;
}

.emby-scrollbuttons .emby-scrollbuttons-button .material-icons {
  display: none !important;
}

.emby-scrollbuttons .emby-scrollbuttons-button::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  pointer-events: none !important;
}

.emby-scrollbuttons
  .emby-scrollbuttons-button:is(
    [data-direction="left"],
    .btnPrev,
    .btnPrevious
  )::before {
  transform: translate(-42%, -50%) rotate(-135deg) !important;
}

.emby-scrollbuttons
  .emby-scrollbuttons-button:is(
    [data-direction="right"],
    .btnNext
  )::before {
  transform: translate(-58%, -50%) rotate(45deg) !important;
}

.emby-scrollbuttons .emby-scrollbuttons-button:not(:disabled):hover {
  background: transparent !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: scale(1.15) !important;
}

.emby-scrollbuttons .emby-scrollbuttons-button:not(:disabled):active {
  background: transparent !important;
  transform: scale(1.02) !important;
}

.emby-scrollbuttons .emby-scrollbuttons-button:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -3px !important;
  opacity: 1 !important;
}

.emby-scrollbuttons .emby-scrollbuttons-button:disabled {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  opacity: 0.22 !important;
  transform: none !important;
}

@media (max-width: 700px) {
  .sectionTitle.sectionTitle-cards {
    font-size: 1.2rem !important;
  }
}

/* ----------------------------------------------------------------
   7. PLAYER
   ---------------------------------------------------------------- */

/* Menus: oculta Repetição, Dados de Reprodução e legenda secundária. */
.actionSheet
  .actionSheetMenuItem:is(
    [data-id="repeatmode"],
    [data-id="stats"],
    [data-id="secondarysubtitle"]
  ) {
  display: none !important;
}

/* Título da mídia: recupera a hierarquia visual no cabeçalho do player sem
   competir com a imagem nem com os controles. O clamp mantém a proporção em
   telas intermediárias e limita o crescimento em monitores grandes. */
:is(#videoOsd, #videoOsdPage)
  :is(
    .videoOsdTitle,
    .videoOsdTitleText,
    .osdTitle
  ),
.osdHeader :is(.pageTitle, .headerTitle),
.videoOsdHeader .MuiTypography-root,
body:has(#videoOsdPage:not(.hide))
  header.MuiAppBar-root .MuiTypography-root,
body:has(#videoOsdPage:not(.hide))
  header.MuiAppBar-root :is(.pageTitle, .headerTitle, [class*="Title"], [class*="title"]) {
  color: var(--coiote-white-92) !important;
  font-family: inherit !important;
  font-size: clamp(1.3rem, 1.16rem + 0.34vw, 1.55rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:is(#videoOsd, #videoOsdPage)
  :is(
    .videoOsdTitle,
    .videoOsdTitleText,
    .osdTitle
  )
  :is(.name, .title, .mediaInfoItem) {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

/* Action sheets abertas pelo player: mesma linguagem dos menus internos. */
.actionSheet.tvc-player-menu {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid var(--tvc-menu-border) !important;
  border-radius: var(--tvc-menu-radius) !important;
  background: var(--tvc-menu-surface) !important;
  color: var(--tvc-menu-text-active) !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 48%) !important;
}

/* O título nativo da folha é grande para um seletor curto. Aqui ele assume
   a mesma hierarquia discreta dos demais menus da plataforma. */
.actionSheet.tvc-player-menu .actionSheetTitle {
  margin: 0 !important;
  padding: 10px 12px 7px !important;
  color: var(--tvc-menu-text-active) !important;
  font-family: inherit !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.actionSheet.tvc-player-menu :is(.actionSheetContent, .actionSheetScroller) {
  background: transparent !important;
}

.actionSheet.tvc-player-menu .actionSheetContent {
  padding: 6px !important;
}

.actionSheet.tvc-player-menu .actionSheetScroller {
  padding: 0 !important;
}

.actionSheet.tvc-player-menu .actionSheetMenuItem {
  min-height: 40px !important;
  margin: 1px 0 !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--tvc-menu-text) !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  transition:
    background-color 120ms ease,
    color 120ms ease !important;
}

.actionSheet.tvc-player-menu .actionSheetMenuItem :is(.listItemBody, .listItemBodyText) {
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

.actionSheet.tvc-player-menu .actionSheetMenuItem :is(.secondary, .actionSheetItemAsideText) {
  color: var(--coiote-white-62) !important;
}

.actionSheet.tvc-player-menu
  .actionSheetMenuItem:is(
    :hover,
    :focus-visible,
    .selected,
    [aria-selected="true"]
  ) {
  background: var(--tvc-menu-hover) !important;
  color: var(--tvc-menu-text-active) !important;
}

.actionSheet.tvc-player-menu .actionSheetMenuItem:active {
  background: var(--tvc-menu-selected) !important;
  color: var(--tvc-menu-text-active) !important;
}

@media (max-width: 700px) {
  :is(#videoOsd, #videoOsdPage)
    :is(
      .videoOsdTitle,
      .videoOsdTitleText,
      .osdTitle
    ),
  .osdHeader :is(.pageTitle, .headerTitle),
  .videoOsdHeader .MuiTypography-root,
  body:has(#videoOsdPage:not(.hide))
    header.MuiAppBar-root .MuiTypography-root,
  body:has(#videoOsdPage:not(.hide))
    header.MuiAppBar-root :is(.pageTitle, .headerTitle, [class*="Title"], [class*="title"]) {
    font-size: 1.22rem !important;
    line-height: 1.25 !important;
  }

  .actionSheet.tvc-player-menu:not(.actionsheet-fullscreen) {
    max-width: calc(100vw - 20px) !important;
  }
}

/* O Jellyfin posiciona o menu antes de o tema terminar de recalcular suas
   dimensões. Ancorar as folhas do player acima dos controles evita que a
   última opção seja cortada pela borda inferior da tela. */
.actionSheet.tvc-player-menu.actionsheet-not-fullscreen {
  top: auto !important;
  bottom: clamp(64px, 9vh, 86px) !important;
  max-height: calc(100dvh - 96px) !important;
}

.actionSheet.tvc-player-menu.actionsheet-not-fullscreen .actionSheetContent {
  max-height: inherit !important;
  overflow: hidden !important;
}

.actionSheet.tvc-player-menu.actionsheet-not-fullscreen .actionSheetScroller {
  max-height: calc(100dvh - 154px) !important;
  overflow-y: auto !important;
}

/* Fundo dos controles transparente e discreto. */
.videoOsdBottom {
  background: transparent !important;
  box-shadow: none !important;
}

/* Botões circulares com transições limitadas. */
:is(#videoOsd, .videoOsdBottom) :is(.btnUserRating, .btnSubtitles) {
  border-radius: 50% !important;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
}

:is(#videoOsd, .videoOsdBottom) .paper-icon-button-light {
  border-radius: 50% !important;
  transition:
    background-color 140ms ease,
    transform 140ms ease !important;
}

:is(#videoOsd, .videoOsdBottom) .paper-icon-button-light:hover {
  background: var(--coiote-white-12) !important;
}

:is(#videoOsd, .videoOsdBottom) .paper-icon-button-light:active {
  background: var(--coiote-white-20) !important;
  transform: scale(0.93) !important;
}

/* Legendas: branco neutro, sem azul. */
:is(#videoOsd, .videoOsdBottom) .btnSubtitles {
  background: var(--coiote-white-13) !important;
  border: 1px solid var(--coiote-white-22) !important;
  border-radius: 50% !important;
  color: var(--coiote-white-92) !important;
}

:is(#videoOsd, .videoOsdBottom) .btnSubtitles:hover {
  background: var(--coiote-white-22) !important;
  border-color: var(--coiote-white-48) !important;
}

/* Favorito marcado e desmarcado no player. */
:is(#videoOsd, .videoOsdBottom)
  .btnUserRating:is(.ratingbutton-withrating, [data-isfavorite="true"]) {
  background: var(--coiote-white-88) !important;
  border: 1px solid var(--coiote-white-88) !important;
  color: #111 !important;
}

:is(#videoOsd, .videoOsdBottom)
  .btnUserRating:not(.ratingbutton-withrating)[data-isfavorite="false"] {
  background: var(--coiote-white-07) !important;
  border: 1px solid var(--coiote-white-25) !important;
  color: var(--coiote-white-68) !important;
}

:is(#videoOsd, .videoOsdBottom) .btnUserRating :is(svg, .material-icons) {
  color: inherit !important;
  fill: currentColor !important;
}

/* Linha do tempo e volume. A faixa preenchida já é coberta pela regra
   compartilhada de sliders e progresso na seção anterior. */
:is(#videoOsd, .videoOsdBottom) .mdl-slider-background-upper {
  background-color: var(--coiote-white-28) !important;
}

/* Sem seletor de áudio no player. */
:is(#videoOsd, .videoOsdBottom) :is(.btnAudio, button[title="Áudio"]) {
  display: none !important;
}

/* ----------------------------------------------------------------
   7A. REPRODUTOR COMPACTO DE ÁUDIO
   Apresentação do componente nativo, independente do título reproduzido.
   Não altera dimensões, posições, visibilidade responsiva nem comandos.
   ---------------------------------------------------------------- */

html[data-tvc-theme-ready="true"] .nowPlayingBar {
  background: var(--coiote-surface);
  color: var(--coiote-white-96);
  box-shadow: 0 -1px 0 var(--coiote-white-13);
  font-family: inherit;
}

html[data-tvc-theme-ready="true"] .nowPlayingBar .nowPlayingImage {
  border-radius: var(--coiote-card-radius);
}

html[data-tvc-theme-ready="true"] .nowPlayingBar .nowPlayingBarSecondaryText {
  color: var(--coiote-white-62);
}

html[data-tvc-theme-ready="true"] .nowPlayingBar .nowPlayingBarCurrentTime {
  font-variant-numeric: tabular-nums;
  color: var(--coiote-white-78);
}

html[data-tvc-theme-ready="true"] .nowPlayingBar .mediaButton {
  border-radius: 50%;
  color: inherit;
  transition: background-color 140ms ease, color 140ms ease;
}

@media (hover: hover) {
  html[data-tvc-theme-ready="true"] .nowPlayingBar
    .mediaButton:not(:disabled):not(.playPauseButton, .buttonActive, [data-isfavorite="true"]):hover {
    background-color: var(--coiote-white-12);
  }

  html[data-tvc-theme-ready="true"] .nowPlayingBar
    .mediaButton:is(.playPauseButton, .buttonActive, [data-isfavorite="true"]):not(:disabled):hover {
    background-color: var(--coiote-white-96) !important;
    color: var(--coiote-surface);
  }
}

html[data-tvc-theme-ready="true"] .nowPlayingBar .mediaButton:focus-visible {
  outline: 2px solid var(--coiote-white-96);
  outline-offset: 2px;
}

html[data-tvc-theme-ready="true"] .nowPlayingBar .playPauseButton,
html[data-tvc-theme-ready="true"] .nowPlayingBar .mediaButton.buttonActive,
html[data-tvc-theme-ready="true"] .nowPlayingBar .mediaButton[data-isfavorite="true"] {
  /* Queue's lazily loaded stylesheet resets all paper icon backgrounds with
     !important on narrow portrait screens; preserve the compact bar surface. */
  background-color: var(--coiote-white-88) !important;
  color: var(--coiote-surface);
}

html[data-tvc-theme-ready="true"] .nowPlayingBar .mediaButton .material-icons {
  color: inherit;
}

html[data-tvc-theme-ready="true"] .nowPlayingBar .mdl-slider-background-upper {
  background-color: var(--coiote-white-28);
}

/* Match the native breakpoint that hides the center controls. Desktop
   browsers resized below it still need their existing right-side Play button.
   Mobile already exposes this button; TV retains its native behavior. */
@media all and (max-width: 56em) {
  html[data-tvc-theme-ready="true"].layout-desktop:not(.layout-tv)
    .nowPlayingBarRight .playPauseButton {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tvc-theme-ready="true"] .nowPlayingBar .mediaButton {
    transition: none;
  }
}


/* Audio2: semantic markers supplied by the native playback/detail state.
   Simplified controls preserve native Favorite and Stop actions. */
html[data-tvc-theme-ready="true"] .nowPlayingBar[data-media-type="Audio"]
  :is(.openLyricsButton, .toggleRepeatButton, .btnToggleContextMenu),
html[data-tvc-theme-ready="true"] #nowPlayingPage
  .remoteControlContent[data-media-type="Audio"]
  :is(.btnLyrics, .btnRepeat, .btnSavePlaylist, .btnToggleContextMenu, .listItemButton.itemAction[data-action="menu"]) {
  display: none !important;
}

/* Preserve the existing stop button and its native event handler. */
html[data-tvc-theme-ready="true"]:not(.layout-tv)
  .nowPlayingBar[data-media-type="Audio"] .nowPlayingBarCenter .stopButton {
  display: inline-flex !important;
}

@media all and (max-width: 56em) {
  html[data-tvc-theme-ready="true"]:not(.layout-tv)
    .nowPlayingBar[data-media-type="Audio"] .nowPlayingBarCenter {
    display: contents !important;
  }
  html[data-tvc-theme-ready="true"]:not(.layout-tv)
    .nowPlayingBar[data-media-type="Audio"] .nowPlayingBarCenter > :not(.stopButton) {
    display: none !important;
  }
  html[data-tvc-theme-ready="true"]:not(.layout-tv)
    .nowPlayingBar[data-media-type="Audio"] .nowPlayingBarCenter .stopButton {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
  }
}

/* Native item identity scopes the detail actions to audio only. */
html[data-tvc-theme-ready="true"]
  #itemDetailPage[data-media-type="Audio"]
  :is(.btnInstantMix, .btnMoreCommands) {
  display: none !important;
}

html[data-tvc-theme-ready="true"] #nowPlayingPage
  .remoteControlContent[data-media-type="Audio"] .btnStop {
  display: inline-flex !important;
}

html[data-tvc-theme-ready="true"] #nowPlayingPage
  .remoteControlContent[data-media-type="Audio"] {
  color: var(--coiote-white-96);
  /* O layout nativo já reserva a altura do cabeçalho; este espaço pertence ao painel. */
  padding-block-start: clamp(1rem, 2vw, 2rem);
  box-sizing: border-box;
}

html[data-tvc-theme-ready="true"] #nowPlayingPage
  .remoteControlContent[data-media-type="Audio"] .paper-icon-button-light {
  border-radius: 50%;
}

html[data-tvc-theme-ready="true"] #nowPlayingPage
  .remoteControlContent[data-media-type="Audio"]
  :is(.buttonActive, [data-isfavorite="true"]) {
  background-color: var(--coiote-white-88);
  color: var(--coiote-surface);
}

html[data-tvc-theme-ready="true"] #nowPlayingPage
  .remoteControlContent[data-media-type="Audio"] .paper-icon-button-light .material-icons {
  color: inherit;
}

html[data-tvc-theme-ready="true"] #nowPlayingPage
  .remoteControlContent[data-media-type="Audio"] .paper-icon-button-light:focus-visible {
  outline: 2px solid var(--coiote-white-96);
  outline-offset: 2px;
}

@media (hover: hover) {
  html[data-tvc-theme-ready="true"] #nowPlayingPage
    .remoteControlContent[data-media-type="Audio"]
    .paper-icon-button-light:not(:disabled):not(.btnPlayPause, .buttonActive, [data-isfavorite="true"]):hover {
    background-color: var(--coiote-white-12);
  }
  html[data-tvc-theme-ready="true"] #nowPlayingPage
    .remoteControlContent[data-media-type="Audio"]
    .paper-icon-button-light:is(.buttonActive, [data-isfavorite="true"]):not(:disabled):hover {
    background-color: var(--coiote-white-96);
    color: var(--coiote-surface);
  }
}

/* Queue uses the native filled-circle play icon, not the compact bar glyph. */
html[data-tvc-theme-ready="true"] #nowPlayingPage
  .remoteControlContent[data-media-type="Audio"] .btnPlayPause {
  background-color: transparent !important;
  color: var(--coiote-white-88) !important;
}
@media (hover: hover) {
  html[data-tvc-theme-ready="true"] #nowPlayingPage
    .remoteControlContent[data-media-type="Audio"] .btnPlayPause:not(:disabled):hover {
    background-color: transparent !important;
    color: var(--coiote-white-96) !important;
  }
}

/* Audio detail uses a compact cover/title/actions flow, independent of UA.
   Clear the native video-backdrop spacer and poster offsets only for Audio. */
html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] :is(#itemBackdrop, .detailLogo) {
  display: none !important;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .detailPageWrapperContainer {
  margin-top: 0 !important;
  min-height: 0;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .detailRibbon {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem var(--coiote-page-gutter) !important;
  background: transparent;
  gap: 1rem;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .infoWrapper {
  width: 100%;
  flex: 0 1 auto;
  padding-inline: 0 !important;
  text-align: center;
}

html[data-tvc-theme-ready="true"].layout-desktop
  #itemDetailPage[data-media-type="Audio"] .detailPagePrimaryContainer > .detailImageContainer,
html[data-tvc-theme-ready="true"].layout-mobile
  #itemDetailPage[data-media-type="Audio"] .infoWrapper > .detailImageContainer {
  display: flex !important;
  justify-content: center;
  width: 100% !important;
  margin: 1rem auto !important;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .detailImageContainer > .card {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  width: clamp(168px, 48vw, 230px) !important;
  max-width: 230px !important;
  max-height: none !important;
  margin: 0 auto !important;
  filter: none !important;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .nameContainer {
  width: 100%;
  min-width: 0;
  align-items: center;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .nameContainer :is(h1, .itemName, .itemName > *) {
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .itemMiscInfo {
  justify-content: center;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .mainDetailButtons {
  width: 100% !important;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding-inline: 0 !important;
}

html[data-tvc-theme-ready="true"]:not(.layout-tv)
  #itemDetailPage[data-media-type="Audio"] .detailPagePrimaryContent {
  padding-inline: var(--coiote-page-gutter) !important;
}

html[data-tvc-theme-ready="true"]
  #itemDetailPage[data-media-type="Audio"] .mainDetailButtons
  .btnPlay.detailButton .detailButton-content::after {
  content: "Ouvir";
}


/* ----------------------------------------------------------------
   8. EPISÓDIOS DENTRO DAS SÉRIES
   ---------------------------------------------------------------- */

#itemDetailPage
  #childrenContent
  > .itemsContainer
  > .listItem[data-type="Episode"] {
  position: relative !important;
  margin: 10px 0 !important;
  overflow: hidden !important;
  background: linear-gradient(100deg, #141414 0%, #0d0d0d 100%) !important;
  border: 1px solid var(--coiote-white-09) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition:
    background 180ms ease,
    border-color 180ms ease !important;
}

#itemDetailPage
  #childrenContent
  > .itemsContainer
  > .listItem[data-type="Episode"]:is(:hover, :focus-within) {
  background: linear-gradient(100deg, #1a1a1a 0%, #111 100%) !important;
  border-color: var(--coiote-white-22) !important;
  transform: none !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItem-content {
  display: flex !important;
  align-items: stretch !important;
  min-height: 132px !important;
  position: static !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemImage.listItemImage-large {
  position: static !important;
  width: 220px !important;
  min-width: 220px !important;
  height: 124px !important;
  margin: 4px !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Botão Assistir ao lado do botão de informações. */
#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemImageButton {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  right: 156px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 34px !important;
  min-width: 76px !important;
  padding: 0 12px !important;
  transform: translateY(-50%) !important;
  color: var(--coiote-white-88) !important;
  background: var(--coiote-white-09) !important;
  border: 1px solid var(--coiote-white-12) !important;
  border-radius: 6px !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemImageButton:is(:hover, :focus-visible) {
  color: #fff !important;
  background: var(--coiote-white-16) !important;
  border-color: var(--coiote-white-25) !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemImageButton
  .material-icons {
  display: none !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemImageButton::after {
  content: "Assistir" !important;
  font-family: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
}

#itemDetailPage #childrenContent .listItem[data-type="Episode"] .listItemBody {
  min-width: 0 !important;
  padding: 18px 12px !important;
  justify-content: center !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemBodyText:first-child {
  color: #fff !important;
  font-size: 1.02em !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  :is(.listItemMediaInfo, .secondary) {
  margin-top: 5px !important;
  color: #fff !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listViewUserDataButtons {
  align-self: center !important;
  gap: 2px !important;
  padding: 0 12px !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemButton {
  color: var(--coiote-white-72) !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemButton:is(:hover, :focus-visible) {
  color: #fff !important;
  background: var(--coiote-white-10) !important;
}

/* Remove os três pontos, mas mantém os demais controles. */
#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemButton[data-action="menu"] {
  display: none !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .listItemProgressBar {
  height: 4px !important;
  background: var(--coiote-white-22) !important;
}

#itemDetailPage
  #childrenContent
  .listItem[data-type="Episode"]
  .itemProgressBarForeground {
  background: #fff !important;
}

@media (max-width: 700px) {
  #itemDetailPage
    #childrenContent
    > .itemsContainer
    > .listItem[data-type="Episode"] {
    margin: 8px 0 !important;
    border-radius: 8px !important;
  }

  #itemDetailPage
    #childrenContent
    .listItem[data-type="Episode"]
    .listItemImage.listItemImage-large {
    width: 142px !important;
    min-width: 142px !important;
    height: 80px !important;
  }

  #itemDetailPage
    #childrenContent
    .listItem[data-type="Episode"]
    .listItemImageButton {
    /* Alinha com o início real do título: recuo do item + imagem de 142 px,
       margens da imagem e padding esquerdo do corpo. */
    right: auto !important;
    left: 164px !important;
    top: calc(50% + 6px) !important;
    min-width: 66px !important;
    height: 30px !important;
    padding: 0 8px !important;
  }

  #itemDetailPage
    #childrenContent
    .listItem[data-type="Episode"]
    .listItemImageButton::after {
    font-size: 0.76rem !important;
  }

  #itemDetailPage
    #childrenContent
    .listItem[data-type="Episode"]
    .listItemBody {
    padding: 10px 6px !important;
  }

  #itemDetailPage
    #childrenContent
    .listItem[data-type="Episode"]
    .listViewUserDataButtons {
    padding: 0 3px !important;
  }

  #itemDetailPage
    #childrenContent
    .listItem[data-type="Episode"]
    .listItemButton {
    transform: scale(0.86) !important;
  }
}

/* Respeita a preferência de redução de movimento sem alterar o visual normal. */
@media (prefers-reduced-motion: reduce) {
  #itemDetailPage .mainDetailButtons .detailButton,
  :is(#videoOsd, .videoOsdBottom) .paper-icon-button-light,
  .emby-scrollbuttons .emby-scrollbuttons-button,
  #itemDetailPage
    #childrenContent
    > .itemsContainer
    > .listItem[data-type="Episode"] {
    transition: none !important;
  }

  .itemsContainer
    .card:not([data-type="CollectionFolder"]):not([data-type="UserView"]):not(
      [data-type="Folder"]
    ):not([data-type="Person"])
    > .cardBox {
    transition: none !important;
    transform: none !important;
  }
}

/* ----------------------------------------------------------------
   9. BARRA ULTRALEVE DE DESTAQUES DA HOME
   ---------------------------------------------------------------- */

/* A coleção Destaques é uma fonte técnica do carrossel. Por decisão de
   interface, nenhuma associação a coleções aparece nas páginas de mídia. */
#itemDetailPage #collectionsCollapsible {
  display: none;
}

/* O JavaScript insere este componente antes de .sections. A imagem é um
   Backdrop solicitado diretamente à API, sem usar .backdropContainer e sem
   habilitar fundos nas páginas internas das mídias. */
#homeTab > #tvCoioteFeaturedBar {
  position: relative;
  isolation: isolate;
  display: block;
  box-sizing: border-box;
  width: calc(100% - clamp(32px, 6.4vw, 112px));
  height: clamp(360px, 42vw, 620px);
  margin: 6px auto 20px;
  overflow: visible;
  contain: layout style;
  border: 0;
  border-radius: var(--coiote-card-radius);
  background: var(--coiote-surface);
  color: #fff;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Em erro não mantém um painel vazio reservado na Home. O JavaScript ainda
   pode remover o nó depois; este estado torna a transição atômica. */
#homeTab > #tvCoioteFeaturedBar[data-ready="error"] {
  display: none;
}

#homeTab > #tvCoioteFeaturedBar::before,
#homeTab > #tvCoioteFeaturedBar::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

/* Protege a leitura do título sem escurecer excessivamente o lado direito. */
#homeTab > #tvCoioteFeaturedBar::before {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgb(0 0 0 / 90%) 0%,
    rgb(0 0 0 / 64%) 31%,
    rgb(0 0 0 / 22%) 58%,
    rgb(0 0 0 / 4%) 78%
  );
}

#homeTab > #tvCoioteFeaturedBar::after {
  z-index: 2;
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 68%) 0%,
    rgb(0 0 0 / 12%) 42%,
    transparent 68%
  );
}

#homeTab > #tvCoioteFeaturedBar > .coioteHeroImage {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: none;
  transform: none;
  pointer-events: none;
  /* A primeira imagem e o texto são revelados pelo mesmo data-ready.
     As trocas seguintes mantêm a animação controlada pelo JavaScript. */
  transition: none;
}

#homeTab
  > #tvCoioteFeaturedBar[data-ready="true"]
  > .coioteHeroImage {
  opacity: 1;
}

#homeTab > #tvCoioteFeaturedBar > .coioteHeroContent {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 4.2vw, 72px);
  right: clamp(22px, 4.2vw, 72px);
  bottom: clamp(28px, 4vw, 62px);
  width: min(610px, 48vw);
  margin: 0;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: none;
}

#homeTab
  > #tvCoioteFeaturedBar[data-ready="true"]
  > .coioteHeroContent {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroTitle {
  max-width: 100%;
  margin: 0 0 13px;
  overflow: visible;
  color: #fff;
  font-family: inherit;
  font-size: clamp(2rem, 3.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgb(0 0 0 / 58%);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroMeta {
  margin: 0 0 13px;
  color: #fff;
  font-size: clamp(0.83rem, 1.1vw, 1rem);
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
  text-shadow: 0 1px 8px rgb(0 0 0 / 74%);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroOverview {
  display: block;
  max-width: 590px;
  margin: 0 0 21px;
  overflow: visible;
  color: #fff;
  font-size: clamp(0.9rem, 1.18vw, 1.05rem);
  font-weight: 400;
  line-height: 1.42;
  text-wrap: pretty;
  text-shadow: 0 1px 9px rgb(0 0 0 / 82%);
}

#homeTab #tvCoioteFeaturedBar :is(.coioteHeroMeta, .coioteHeroOverview)[hidden] {
  display: none;
}

/* Navegação manual inspirada nas faixas de streaming: aparece somente em
   desktop com mouse. No mobile, o gesto horizontal do JavaScript permanece
   como a única navegação manual. */
#homeTab #tvCoioteFeaturedBar .coioteHeroArrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: none;
  box-sizing: border-box;
  width: 54px;
  height: 78px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  filter: drop-shadow(0 1px 4px rgb(0 0 0 / 95%));
  opacity: 0;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    filter 150ms ease;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrowPrevious {
  left: clamp(-55px, -4.3vw, -38px);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrowNext {
  right: clamp(-55px, -4.3vw, -38px);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrow::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 19px;
  height: 19px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrowPrevious::before {
  transform: translateX(3px) rotate(-135deg);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrowNext::before {
  transform: translateX(-3px) rotate(45deg);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrow:hover {
  background: transparent;
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 100%));
  opacity: 1;
  transform: translateY(-50%) scale(1.18);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrow:active {
  background: transparent;
  transform: translateY(-50%) scale(1.08);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  opacity: 1;
  transform: translateY(-50%) scale(1.12);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroArrow[hidden] {
  display: none;
}

@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #homeTab
    > #tvCoioteFeaturedBar[data-ready="true"][data-multiple="true"]
    > .coioteHeroArrow:not([hidden]) {
    display: flex;
    opacity: 0.78;
  }
}

/* Este é o único contêiner interativo da faixa. data-multiselect="false"
   impede que o componente nativo do Jellyfin ative pressão prolongada. */
#homeTab #tvCoioteFeaturedBar .coioteHeroActions {
  position: relative;
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  flex-flow: row nowrap;
  gap: 12px;
  overflow: visible;
  contain: layout style;
  background: transparent;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroButton {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 19px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  outline: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 130ms ease,
    background-color 130ms ease,
    color 130ms ease;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroPlay {
  background: #fff;
  color: #111;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroPlay::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid currentColor;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroDetails {
  background: #2b2b2d;
  color: #fff;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroPlay:hover {
  background: #ededed;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroDetails:hover {
  background: #3a3a3d;
}

#homeTab #tvCoioteFeaturedBar .coioteHeroButton:active {
  transform: scale(0.97);
}

#homeTab #tvCoioteFeaturedBar .coioteHeroButton:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  #homeTab > #tvCoioteFeaturedBar {
    width: calc(100% - 24px);
    height: clamp(330px, 92vw, 440px);
    margin: 4px auto 18px;
  }

  #homeTab > #tvCoioteFeaturedBar::before {
    background: linear-gradient(
      90deg,
      rgb(0 0 0 / 78%) 0%,
      rgb(0 0 0 / 37%) 58%,
      rgb(0 0 0 / 8%) 100%
    );
  }

  #homeTab > #tvCoioteFeaturedBar::after {
    background: linear-gradient(
      0deg,
      rgb(0 0 0 / 90%) 0%,
      rgb(0 0 0 / 51%) 40%,
      transparent 73%
    );
  }

  #homeTab > #tvCoioteFeaturedBar > .coioteHeroContent {
    left: 18px;
    right: 18px;
    bottom: 21px;
    width: auto;
    max-width: none;
  }

  #homeTab #tvCoioteFeaturedBar .coioteHeroTitle {
    max-width: 92%;
    margin-bottom: 9px;
    font-size: clamp(1.65rem, 7.2vw, 2.35rem);
    line-height: 1.12;
  }

  #homeTab #tvCoioteFeaturedBar .coioteHeroMeta {
    margin-bottom: 9px;
    font-size: 0.78rem;
    line-height: 1.42;
  }

  #homeTab #tvCoioteFeaturedBar .coioteHeroOverview {
    margin-bottom: 15px;
    font-size: 0.86rem;
    line-height: 1.36;
  }

  #homeTab #tvCoioteFeaturedBar .coioteHeroActions {
    gap: 8px;
  }

  #homeTab #tvCoioteFeaturedBar .coioteHeroButton {
    height: 43px;
    min-height: 43px;
    padding: 0 14px;
    gap: 8px;
    font-size: 0.88rem;
  }

  #homeTab #tvCoioteFeaturedBar .coioteHeroPlay::before {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #homeTab > #tvCoioteFeaturedBar > .coioteHeroImage,
  #homeTab > #tvCoioteFeaturedBar > .coioteHeroContent,
  #homeTab #tvCoioteFeaturedBar .coioteHeroButton,
  #homeTab #tvCoioteFeaturedBar .coioteHeroArrow {
    transition: none;
  }

  #homeTab > #tvCoioteFeaturedBar > .coioteHeroContent {
    transform: none;
  }
}

/* ----------------------------------------------------------------
   10. TOP 10 NO TV COIOTE PLAY — COLEÇÃO “MAIS VISTOS”
   ---------------------------------------------------------------- */

/* A fileira é inserida depois dos cards das bibliotecas. Enquanto a API
   responde, a altura fica reservada; depois, os placeholders e metadados já
   aparecem sem aguardar a rede de imagens. */
#homeTab #tvCoioteTop10 {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: calc(100% - clamp(32px, 6.4vw, 112px));
  min-height: clamp(265px, 17vw, 325px);
  margin: 0 auto 24px;
  padding: 0;
  contain: layout style;
  overflow: visible;
  visibility: visible;
  color: #fff;
}

#homeTab #tvCoioteTop10[data-ready="false"]
  > :is(.coioteTop10Header, .coioteTop10Scroller) {
  visibility: hidden;
  opacity: 0;
}

#homeTab #tvCoioteTop10[data-ready="true"]
  > :is(.coioteTop10Header, .coioteTop10Scroller) {
  visibility: visible;
  opacity: 1;
  transition: opacity 180ms ease;
}

/* A altura mínima serve apenas para impedir deslocamentos durante a consulta.
   Depois de pronto, a própria fileira determina sua altura real. */
#homeTab #tvCoioteTop10[data-ready="true"] {
  min-height: 0;
}

#homeTab #tvCoioteTop10[data-ready="error"] {
  display: none;
  min-height: 0;
  margin: 0;
}

#homeTab #tvCoioteTop10 .coioteTop10Header {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  margin: 0 0 10px;
  padding: 0 2px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#homeTab #tvCoioteTop10 .coioteTop10Title {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(1.25rem, 1.65vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
}

#homeTab #tvCoioteTop10 .coioteTop10Controls {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 2px;
}

#homeTab #tvCoioteTop10 .coioteTop10Controls[hidden] {
  display: none;
}

#homeTab #tvCoioteTop10 .coioteTop10Arrow {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  opacity: 0.7;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    opacity 130ms ease,
    transform 130ms ease;
}

#homeTab #tvCoioteTop10 .coioteTop10Arrow::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

#homeTab #tvCoioteTop10 .coioteTop10ArrowPrevious::before {
  transform: translateX(2px) rotate(-135deg);
}

#homeTab #tvCoioteTop10 .coioteTop10ArrowNext::before {
  transform: translateX(-2px) rotate(45deg);
}

#homeTab #tvCoioteTop10 .coioteTop10Arrow:hover {
  background: transparent;
  opacity: 1;
  transform: scale(1.15);
}

#homeTab #tvCoioteTop10 .coioteTop10Arrow:active {
  transform: scale(1.02);
}

#homeTab #tvCoioteTop10 .coioteTop10Arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  opacity: 1;
}

#homeTab #tvCoioteTop10 .coioteTop10Arrow:disabled {
  opacity: 0.22;
  transform: none;
  cursor: default;
}

#homeTab #tvCoioteTop10 .coioteTop10Scroller {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 3px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

#homeTab #tvCoioteTop10 .coioteTop10Scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#homeTab #tvCoioteTop10 .coioteTop10Scroller:focus-visible {
  outline: 2px solid var(--coiote-white-48);
  outline-offset: 2px;
}

#homeTab #tvCoioteTop10 .coioteTop10Track {
  display: flex;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  gap: clamp(13px, 1.25vw, 21px);
}

#homeTab #tvCoioteTop10 .coioteTop10Card {
  --coiote-top10-card-width: clamp(300px, 24vw, 420px);
  --coiote-top10-rank-space: clamp(52px, 4vw, 68px);
  --coiote-top10-extra-width: 0px;

  position: relative;
  display: block;
  box-sizing: border-box;
  width: calc(
    var(--coiote-top10-card-width) + var(--coiote-top10-extra-width)
  );
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 0 0
    calc(
      var(--coiote-top10-card-width) + var(--coiote-top10-extra-width)
    );
  scroll-snap-align: start;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* O décimo lugar usa apenas o acréscimo necessário para preservar a largura da
   miniatura. O zero entra levemente atrás da arte, mantendo a composição dos
   demais números sem abrir um vão exagerado antes do último card. */
#homeTab #tvCoioteTop10 .coioteTop10Card:nth-child(10) {
  --coiote-top10-rank-space: clamp(74px, 5vw, 88px);
  --coiote-top10-extra-width: clamp(20px, 1.3vw, 22px);
}

#homeTab
  #tvCoioteTop10
  .coioteTop10Card:nth-child(10)
  .coioteTop10Rank {
  font-size: clamp(6.7rem, 8.7vw, 9.5rem);
  letter-spacing: -0.18em;
  transform: translateY(-50%) scaleX(0.72);
  transform-origin: left center;
}

#homeTab #tvCoioteTop10 .coioteTop10Stage {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* O número fica parcialmente atrás da miniatura, como nas fileiras de
   ranking do Max e do Prime Video, sem gradientes ou texto sobre a imagem. */
#homeTab #tvCoioteTop10 .coioteTop10Rank {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  display: block;
  margin: 0;
  padding: 0;
  color: rgb(255 255 255 / 10%);
  font-family: inherit;
  font-size: clamp(6.7rem, 8.7vw, 9.5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 0.72;
  letter-spacing: -0.085em;
  white-space: nowrap;
  -webkit-text-stroke: 1.4px rgb(255 255 255 / 58%);
  text-shadow: 0 2px 10px rgb(0 0 0 / 72%);
  transform: translateY(-50%);
  pointer-events: none;
}

#homeTab #tvCoioteTop10 .coioteTop10Artwork {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  width: calc(100% - var(--coiote-top10-rank-space));
  aspect-ratio: 16 / 9;
  margin: 0 0 0 var(--coiote-top10-rank-space);
  overflow: hidden;
  border: 0;
  border-radius: var(--coiote-card-radius);
  background: var(--coiote-card-placeholder);
  box-shadow: 0 8px 20px rgb(0 0 0 / 22%);
  transform: translateZ(0);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

#homeTab #tvCoioteTop10 .coioteTop10Image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
  background: var(--coiote-card-placeholder);
  opacity: 0;
  transform: scale(1);
  transition: transform 180ms ease;
  pointer-events: none;
}

#homeTab #tvCoioteTop10 .coioteTop10Image[data-loaded="true"] {
  opacity: 1;
}

#homeTab #tvCoioteTop10 .coioteTop10Caption {
  position: relative;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  width: calc(100% - var(--coiote-top10-rank-space));
  min-width: 0;
  margin: 0 0 0 var(--coiote-top10-rank-space);
  padding: 9px 3px 0;
  flex-flow: column nowrap;
  align-items: center;
  color: #fff;
  text-align: center;
}

#homeTab #tvCoioteTop10 .coioteTop10Name {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#homeTab #tvCoioteTop10 .coioteTop10Year {
  display: block;
  margin: 3px 0 0;
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.25;
}

#homeTab #tvCoioteTop10 .coioteTop10Year[hidden] {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  #homeTab
    #tvCoioteTop10
    .coioteTop10Card:hover
    .coioteTop10Artwork {
    box-shadow: 0 10px 23px rgb(0 0 0 / 30%);
    transform: translateY(-1px) scale(1.012);
  }

  #homeTab
    #tvCoioteTop10
    .coioteTop10Card:hover
    .coioteTop10Image {
    transform: scale(1);
  }
}

#homeTab
  #tvCoioteTop10
  .coioteTop10Card:focus-visible
  .coioteTop10Artwork {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  #homeTab #tvCoioteTop10 {
    width: calc(100% - 24px);
    min-height: 275px;
    margin-bottom: 1px;
  }

  #homeTab #tvCoioteTop10 .coioteTop10Header {
    min-height: 34px;
    margin-bottom: 8px;
    padding: 0;
  }

  #homeTab #tvCoioteTop10 .coioteTop10Title {
    font-size: 1.2rem;
  }


  #homeTab #tvCoioteTop10 .coioteTop10Scroller {
    padding: 2px 0 0;
    scroll-snap-type: x mandatory;
  }

  #homeTab #tvCoioteTop10 .coioteTop10Track {
    gap: 14px;
  }

  #homeTab #tvCoioteTop10 .coioteTop10Card {
    --coiote-top10-card-width: min(80vw, 350px);
    --coiote-top10-rank-space: 44px;

    width: calc(
      var(--coiote-top10-card-width) + var(--coiote-top10-extra-width)
    );
    flex-basis: calc(
      var(--coiote-top10-card-width) + var(--coiote-top10-extra-width)
    );
  }

  #homeTab #tvCoioteTop10 .coioteTop10Card:nth-child(10) {
    --coiote-top10-rank-space: 62px;
    --coiote-top10-extra-width: 18px;
  }

  #homeTab
    #tvCoioteTop10
    .coioteTop10Card:nth-child(10)
    .coioteTop10Rank {
    font-size: 6.3rem;
    letter-spacing: -0.18em;
    transform: translateY(-50%) scaleX(0.68);
  }

  #homeTab #tvCoioteTop10 .coioteTop10Rank {
    font-size: 6.55rem;
    -webkit-text-stroke-width: 1.2px;
  }

  #homeTab #tvCoioteTop10 .coioteTop10Artwork,
  #homeTab #tvCoioteTop10 .coioteTop10Caption {
    width: calc(100% - var(--coiote-top10-rank-space));
    margin-left: var(--coiote-top10-rank-space);
  }

  #homeTab #tvCoioteTop10 .coioteTop10Caption {
    padding-top: 8px;
  }

  #homeTab #tvCoioteTop10 .coioteTop10Name {
    font-size: 0.92rem;
  }

  #homeTab #tvCoioteTop10 .coioteTop10Year {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #homeTab #tvCoioteTop10,
  #homeTab #tvCoioteTop10 *,
  #homeTab #tvCoioteTop10 *::before,
  #homeTab #tvCoioteTop10 *::after {
    scroll-behavior: auto;
    transition: none;
  }
}
/* ================================================================
   TV COIOTE PLAY — MENU SUPERIOR REFINADO
   Jellyfin Web 12

   - Desktop: navegação tipográfica e menos carregada.
   - Mobile: preserva os ícones no menu lateral.
   - Cabeçalho: mantém a mesma cor ao rolar a página.
   - Sem filtros, blur ou animações pesadas.
   ================================================================ */

/* Cabeçalho sempre preto, inclusive depois de rolar a página. */
header.MuiAppBar-root:not(:empty),
header.MuiAppBar-root:not(:empty) > .MuiToolbar-root {
  background: var(--coiote-surface) !important;
}

header.MuiAppBar-root:not(:empty) {
  box-shadow: none !important;
}

/* Transição suave entre o cabeçalho e o conteúdo, sem uma borda rígida. */
header.MuiAppBar-root:not(:empty)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -14px;
  left: 0;
  height: 14px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 34%), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* O próprio Jellyfin troca para colorDefault ao iniciar a rolagem. */
header.MuiAppBar-root.MuiAppBar-colorDefault:not(:empty)::after {
  opacity: 1;
}

/* ----------------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------------- */

@media (min-width: 900px) {
  /* Respiro entre a marca e o primeiro item da navegação. */
  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a[href="#/"] {
    margin-right: 26px !important;
  }

  /* Links centrais: mais tipográficos e menos parecidos com um painel. */
  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a.MuiButtonBase-root:not([href="#/"]):not([aria-label]) {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgb(255 255 255 / 78%) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.005em !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    box-shadow: inset 0 -2px 0 transparent !important;
    transform: none !important;
    transition:
      color 140ms ease,
      box-shadow 140ms ease !important;
  }

  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a.MuiButtonBase-root:not([href="#/"]):not([aria-label]):is(
      :hover,
      :focus-visible,
      .Mui-focusVisible
    ) {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 -2px 0 rgb(255 255 255 / 42%) !important;
  }

  /* Página atual: sublinhado persistente e mais nítido que o hover. */
  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a.MuiButtonBase-root:not([href="#/"]):not([aria-label]):is(
      :focus,
      .MuiButton-colorPrimary,
      .MuiButton-textPrimary,
      .Mui-selected,
      [aria-current="page"]
    ) {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 -2px 0 rgb(255 255 255 / 88%) !important;
    transition:
      color 140ms ease,
      box-shadow 0ms linear !important;
  }

  /* Remove os ícones somente das bibliotecas e de Coleções.
     Favoritos continua com o coração; busca, transmissão e perfil não são
     atingidos. No menu lateral mobile todos os ícones permanecem. */
  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a.MuiButtonBase-root:not([href="#/"]):not([aria-label]):not(
      [href*="tab=1"]
    )
    > .MuiButton-icon {
    display: none !important;
  }

  /* Coração de Favoritos: tamanho e distância mais discretos. */
  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a[href*="tab=1"]
    > .MuiButton-icon {
    margin-right: 6px !important;
    margin-left: 0 !important;
  }

  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a[href*="tab=1"]
    > .MuiButton-icon
    > svg {
    font-size: 1.15rem !important;
  }

  /* Controles utilitários à direita. */
  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > :is(a, button)[aria-label] {
    color: rgb(255 255 255 / 82%) !important;
    transition: color 140ms ease !important;
  }

  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > :is(a, button)[aria-label]:hover {
    color: #fff !important;
  }

  /* Mais conserva a largura natural do texto e da seta. */
  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    button[aria-controls="user-view-overflow-menu"] {
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 7px 8px !important;
  }

  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    button[aria-controls="user-view-overflow-menu"]
    .MuiAvatar-root {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Variante compacta para notebooks e janelas desktop menores. */
@media (min-width: 900px) and (max-width: 1450px) {
  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a[href="#/"] {
    width: 158px !important;
    min-width: 158px !important;
    margin-right: 14px !important;
  }

  header
    > .MuiToolbar-root.MuiToolbar-dense:first-of-type
    > .MuiStack-root
    > a.MuiButtonBase-root:not([href="#/"]):not([aria-label]) {
    padding-inline: 5px !important;
    font-size: 14px !important;
  }
}

/* ----------------------------------------------------------------
   MOBILE — MENU LATERAL
   ---------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  /* Menu e cabeçalho do drawer na mesma superfície preta da plataforma. */
  .MuiDrawer-root:has(a[href="#/"]) .MuiDrawer-paper {
    background: var(--coiote-surface) !important;
    color: #fff !important;
  }

  /* Marca do drawer: presente, mas sem dominar o menu. */
  .MuiDrawer-root:has(a[href="#/"]) a[href="#/"] {
    min-height: 68px !important;
    padding: 6px 22px !important;
  }

  .MuiDrawer-root:has(a[href="#/"])
    a[href="#/"]
    > .MuiListItemIcon-root {
    width: 210px !important;
    min-width: 210px !important;
    max-width: calc(100% - 44px) !important;
    height: 52px !important;
    margin: 0 !important;
    background-position: left center !important;
    background-size: contain !important;
  }

  /* Separadores discretos em vez das faixas cinza atuais. */
  .MuiDrawer-root:has(a[href="#/"]) .MuiDivider-root {
    border-color: rgb(255 255 255 / 9%) !important;
  }

  .MuiDrawer-root:has(a[href="#/"]) #libraries-subheader,
  .MuiDrawer-root:has(a[href="#/"]) .MuiDivider-root:has(+ .MuiList-root[aria-labelledby="libraries-subheader"]) {
    display: none !important;
  }

  .MuiDrawer-root:has(a[href="#/"]) .MuiList-root {
    padding-block: 0 !important;
  }

  /* Mantém ícones e textos, mas reduz o peso visual das linhas. */
  .MuiDrawer-root:has(a[href="#/"])
    a.MuiListItemButton-root:not([href="#/"]) {
    width: auto !important;
    min-height: 48px !important;
    margin: 2px 10px !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    color: rgb(255 255 255 / 82%) !important;
  }

  .MuiDrawer-root:has(a[href="#/"])
    a.MuiListItemButton-root:not([href="#/"])
    > .MuiListItemIcon-root {
    color: currentColor !important;
    opacity: 0.9 !important;
  }

  .MuiDrawer-root:has(a[href="#/"])
    a.MuiListItemButton-root:not([href="#/"]):is(
      :hover,
      :focus-visible,
      .Mui-focusVisible,
      .Mui-selected,
      .navMenuOption-selected
    ) {
    background-color: rgb(255 255 255 / 9%) !important;
    color: #fff !important;
  }

  /* Escurece o conteúdo atrás do drawer sem usar blur. */
  .MuiDrawer-root:has(a[href="#/"]) > .MuiBackdrop-root {
    background-color: rgb(0 0 0 / 72%) !important;
  }
}

/* ================================================================
   TV COIOTE PLAY — LINKS TEXTUAIS
   Jellyfin Web 12

   Escopo: links textuais dentro das páginas do Jellyfin.
   Não alcança o menu superior, o drawer mobile, menus suspensos,
   pôsteres, cards, títulos de seção ou botões de ação.
   ================================================================ */

/* A classe .page limita o alcance ao conteúdo. Os componentes de navegação
   e os menus flutuantes do Jellyfin ficam fora dessa árvore. */
.page
  :is(a.button-link, button.button-link, a.MuiLink-root, a.textActionButton):not(.MuiButtonBase-root):not(.clearLink):not(.cardImageContainer):not(.sectionTitleTextButton):not(.raised):not(.fab) {
  color: var(--tvc-link-texto) !important;
  text-decoration: none !important;
  transition: color 120ms ease !important;
}

/* O ID garante que esta regra vença o trecho antigo do CSS principal:
   #itemDetailPage .button-link { color: #fff !important; } */
#itemDetailPage
  :is(a.button-link, button.button-link, a.MuiLink-root, a.textActionButton):not(.MuiButtonBase-root):not(.clearLink):not(.cardImageContainer):not(.sectionTitleTextButton):not(.raised):not(.fab) {
  color: var(--tvc-link-texto) !important;
}

:is(.page, #itemDetailPage)
  :is(a.button-link, button.button-link, a.MuiLink-root, a.textActionButton):not(.MuiButtonBase-root):not(.clearLink):not(.cardImageContainer):not(.sectionTitleTextButton):not(.raised):not(.fab):is(:hover, :focus-visible, .Mui-focusVisible, :active) {
  color: var(--tvc-link-texto-ativo) !important;
  text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .page
    :is(a.button-link, button.button-link, a.MuiLink-root, a.textActionButton):not(.MuiButtonBase-root):not(.clearLink):not(.cardImageContainer):not(.sectionTitleTextButton):not(.raised):not(.fab) {
    transition: none !important;
  }
}

/* ================================================================
   TV COIOTE PLAY — MENUS INTERNOS
   Jellyfin Web 12

   Escopo exclusivo:
   - menu do avatar;
   - menu de ordenação;
   - menu de filtros;
   - seletor de seção da biblioteca (ex.: Séries/Episódios);
   - lista Perfil/Legendas nas preferências do usuário.

   Não altera o menu superior, drawer mobile ou player.
   Sem blur ou filtros gráficos.
   ================================================================ */

/* O gate data-tvc-ready do menu do usuário fica no bloco crítico inicial.
   Menus sem atributo permanecem sob o comportamento nativo. */

/* Ao começar a fechar, o Jellyfin remove o ID do popover antes de desmontar
   seu conteúdo. Sem esta proteção, o menu reaparece por um instante no tema
   antigo e com todas as opções. O conteúdo interno identifica cada popover
   durante essa fase sem alcançar os outros menus da plataforma. */
.MuiPopover-root:not(#filter-popover):has(#filtersStatus-header)
  .MuiPopover-paper,
.MuiPopover-root:not(#sort-popover):has(
    .MuiPopover-paper
      > ul.MuiList-root.MuiList-padding[role="menu"]:not(.MuiMenu-list)
  )
  .MuiPopover-paper {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ----------------------------------------------------------------
   SUPERFÍCIE DOS MENUS FLUTUANTES
   ---------------------------------------------------------------- */

:is(#app-user-menu, #sort-popover, #filter-popover, #library-view-menu)
  :is(.MuiMenu-paper, .MuiPopover-paper) {
  box-sizing: border-box !important;
  margin-top: 6px !important;
  border: 1px solid var(--tvc-menu-border) !important;
  border-radius: var(--tvc-menu-radius) !important;
  background: var(--tvc-menu-surface) !important;
  color: var(--tvc-menu-text-active) !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 48%) !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  :is(.MuiMenu-list, .MuiList-root[role="menu"]) {
  padding: 6px !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  .MuiMenuItem-root {
  min-height: 44px !important;
  margin: 1px 0 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--tvc-menu-text) !important;
  font-family: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  transition:
    background-color 120ms ease,
      color 120ms ease !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  .MuiListItemText-root {
  margin: 0 !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  .MuiListItemText-primary {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  .MuiMenuItem-root:is(:hover, :focus-visible, .Mui-focusVisible) {
  background: var(--tvc-menu-hover) !important;
  color: var(--tvc-menu-text-active) !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  .MuiMenuItem-root:active {
  background: var(--tvc-menu-selected) !important;
  color: var(--tvc-menu-text-active) !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  .MuiMenuItem-root.Mui-selected {
  background: var(--tvc-menu-selected) !important;
  color: var(--tvc-menu-text-active) !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  .MuiMenuItem-root.Mui-selected:is(:hover, :focus-visible, .Mui-focusVisible) {
  background: var(--tvc-menu-selected-hover) !important;
}

:is(#app-user-menu, #sort-popover, #library-view-menu)
  .MuiDivider-root {
  margin: 5px 0 !important;
  border-color: var(--tvc-menu-divider) !important;
}

/* ----------------------------------------------------------------
   MENU DO AVATAR
   ---------------------------------------------------------------- */

#app-user-menu .MuiMenu-paper {
  min-width: 250px !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
}

#app-user-menu .MuiListItemIcon-root {
  min-width: 36px !important;
  color: currentColor !important;
  opacity: 0.88 !important;
}

#app-user-menu .MuiListItemIcon-root > svg {
  font-size: 1.25rem !important;
}

/* ----------------------------------------------------------------
   MENU DE ORDENAÇÃO
   ---------------------------------------------------------------- */

#sort-popover .MuiPopover-paper {
  min-width: 240px !important;
  max-width: min(300px, calc(100vw - 24px)) !important;
}

#sort-popover .MuiListItemIcon-root {
  min-width: 22px !important;
  margin-left: 18px !important;
  justify-content: flex-end !important;
  color: currentColor !important;
}

#sort-popover .MuiListItemIcon-root:empty {
  display: none !important;
}

/* O item que contém a seta é a ordenação atualmente selecionada. */
#sort-popover .MuiMenuItem-root:has(.MuiListItemIcon-root svg) {
  background: var(--tvc-menu-selected) !important;
  color: var(--tvc-menu-text-active) !important;
}

#sort-popover
  .MuiMenuItem-root:has(.MuiListItemIcon-root svg):is(
    :hover,
    :focus-visible,
    .Mui-focusVisible
  ) {
  background: var(--tvc-menu-selected-hover) !important;
}

/* ----------------------------------------------------------------
   MENU DE FILTROS
   ---------------------------------------------------------------- */

#filter-popover .MuiPopover-paper {
  width: 260px !important;
  max-width: min(300px, calc(100vw - 24px)) !important;
  max-height: min(68vh, 640px) !important;
  padding: 6px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgb(255 255 255 / 24%) transparent !important;
}

#filter-popover .MuiPopover-paper::-webkit-scrollbar {
  width: 7px !important;
}

#filter-popover .MuiPopover-paper::-webkit-scrollbar-track {
  background: transparent !important;
}

#filter-popover .MuiPopover-paper::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: rgb(255 255 255 / 24%) !important;
  background-clip: padding-box !important;
}

#filter-popover .MuiAccordion-root {
  margin: 1px 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--tvc-menu-text) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#filter-popover .MuiAccordion-root::before {
  display: none !important;
}

#filter-popover .MuiAccordionSummary-root {
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: inherit !important;
  transition:
    background-color 120ms ease,
    color 120ms ease !important;
}

#filter-popover
  .MuiAccordionSummary-root:is(:hover, :focus-visible, .Mui-focusVisible) {
  background: var(--tvc-menu-hover) !important;
  color: var(--tvc-menu-text-active) !important;
}

#filter-popover .MuiAccordionSummary-root.Mui-expanded {
  background: var(--tvc-menu-selected) !important;
  color: var(--tvc-menu-text-active) !important;
}

#filter-popover .MuiAccordionSummary-content {
  margin: 10px 0 !important;
}

#filter-popover .MuiAccordionSummary-content .MuiTypography-root {
  color: inherit !important;
  font-family: inherit !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

#filter-popover .MuiAccordionSummary-expandIconWrapper {
  color: currentColor !important;
  opacity: 0.78 !important;
}

#filter-popover .MuiAccordionSummary-expandIconWrapper.Mui-expanded {
  opacity: 1 !important;
}

#filter-popover .MuiAccordionDetails-root {
  padding: 8px 10px 10px !important;
  border-top: 1px solid var(--tvc-menu-divider) !important;
  background: rgb(0 0 0 / 12%) !important;
}

#filter-popover .MuiFormGroup-root {
  gap: 1px !important;
}

#filter-popover .MuiFormControlLabel-root {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  color: var(--tvc-menu-text) !important;
  transition:
    background-color 120ms ease,
    color 120ms ease !important;
}

#filter-popover .MuiFormControlLabel-root:hover {
  background: var(--tvc-menu-hover) !important;
  color: var(--tvc-menu-text-active) !important;
}

#filter-popover .MuiFormControlLabel-label {
  color: inherit !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

#filter-popover .MuiCheckbox-root {
  padding: 7px !important;
  color: var(--coiote-white-58) !important;
}

#filter-popover .MuiCheckbox-root:is(.Mui-checked, .MuiCheckbox-indeterminate) {
  color: #fff !important;
}

#filter-popover .MuiPopover-paper > .MuiButton-root {
  min-height: 40px !important;
  margin: 6px 0 0 !important;
  padding: 7px 10px !important;
  border-top: 1px solid var(--tvc-menu-divider) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--tvc-menu-text) !important;
  font-family: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

#filter-popover
  .MuiPopover-paper
  > .MuiButton-root:is(:hover, :focus-visible, .Mui-focusVisible) {
  background: var(--tvc-menu-hover) !important;
  color: var(--tvc-menu-text-active) !important;
}

/* ----------------------------------------------------------------
   SELETOR SÉRIES/EPISÓDIOS E DEMAIS SEÇÕES DA BIBLIOTECA
   ---------------------------------------------------------------- */

#library-view-menu .MuiMenu-paper {
  min-width: 156px !important;
  max-width: min(260px, calc(100vw - 24px)) !important;
}

#library-view-menu .MuiMenuItem-root {
  padding-inline: 14px !important;
}

/* ----------------------------------------------------------------
   PREFERÊNCIAS DO USUÁRIO — PERFIL E LEGENDAS
   ---------------------------------------------------------------- */

#myPreferencesMenuPage .readOnlyContent {
  width: 100% !important;
  max-width: 700px !important;
}

#myPreferencesMenuPage .headerUsername {
  margin: 0 0 16px !important;
  padding: 0 4px !important;
  color: rgb(255 255 255 / 92%) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

#myPreferencesMenuPage
  .verticalSection:first-child
  > a.listItem-border {
  margin: 2px 0 !important;
  padding: 0 !important;
  border-width: 0 0 1px !important;
  border-style: solid !important;
  border-color: var(--tvc-menu-divider) !important;
  border-radius: var(--tvc-menu-radius) !important;
  background: transparent !important;
  color: var(--tvc-menu-text) !important;
  box-shadow: none !important;
  transform: none !important;
  transition:
    background-color 120ms ease,
    color 120ms ease !important;
}

/* Legendas é o último item mantido pelo CSS principal. */
#myPreferencesMenuPage
  .verticalSection:first-child
  > a.lnkSubtitlePreferences {
  border-bottom-color: transparent !important;
}

#myPreferencesMenuPage
  .verticalSection:first-child
  > a.listItem-border
  > .listItem {
  min-height: 52px !important;
  padding: 0 14px !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: inherit !important;
}

#myPreferencesMenuPage
  .verticalSection:first-child
  > a.listItem-border:is(:hover, :focus-visible, .show-focus:focus) {
  background: var(--tvc-menu-hover) !important;
  color: var(--tvc-menu-text-active) !important;
}

#myPreferencesMenuPage
  .verticalSection:first-child
  > a.listItem-border:is(:hover, :focus-visible, .show-focus:focus)
  > .listItem {
  background: transparent !important;
}

#myPreferencesMenuPage
  .verticalSection:first-child
  > a.listItem-border
  .listItemIcon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 14px 0 0 !important;
  color: currentColor !important;
  font-size: 1.25rem !important;
  opacity: 0.88 !important;
}

#myPreferencesMenuPage
  .verticalSection:first-child
  > a.listItem-border
  .listItemBody {
  padding: 13px 0 !important;
}

#myPreferencesMenuPage
  .verticalSection:first-child
  > a.listItem-border
  .listItemBodyText {
  color: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}

#myPreferencesMenuPage
  .verticalSection:first-child.verticalSection-extrabottompadding {
  margin-bottom: 0 !important;
}

@media (max-width: 899px) {
  :is(#app-user-menu, #sort-popover, #library-view-menu)
    .MuiMenuItem-root {
    min-height: 48px !important;
  }

  #filter-popover .MuiAccordionSummary-root {
    min-height: 48px !important;
  }

  #filter-popover .MuiFormControlLabel-root {
    min-height: 44px !important;
  }

  #myPreferencesMenuPage .readOnlyContent {
    max-width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#app-user-menu, #sort-popover, #library-view-menu)
    .MuiMenuItem-root,
  #myPreferencesMenuPage
    .verticalSection:first-child
    > a.listItem-border {
    transition: none !important;
  }

  #filter-popover
    :is(.MuiAccordionSummary-root, .MuiFormControlLabel-root) {
    transition: none !important;
  }
}

/* ================================================================
   TV COIOTE PLAY — PAINEL DE PASTAS DE TV COIOTE ESPECIAIS
   Jellyfin Web 12

   Escopo exclusivo:
   - biblioteca TV Coiote Especiais;
   - raiz da biblioteca identificada pelo cabeçalho;
   - somente cards do tipo Folder, isto é, o painel das quatro pastas.

   Remove o hover nativo escurecido e seus botões. Mantém o clique da
   pasta e aplica o mesmo avanço discreto usado nos demais cards.
   ================================================================ */

/* A busca do cabeçalho contém o ID da pasta atualmente aberta. Na raiz de
   TV Coiote Especiais esse ID é o abaixo; ao entrar em qualquer uma das
   quatro pastas ele muda, impedindo que a regra alcance as subpastas. */
body:has(
    header
      a[href*="parentId=110176fc53e027cb9826e7df5788e69e"]
  )
  .itemsContainer
  .card[data-type="Folder"]
  .cardOverlayContainer {
  background: transparent !important;
  opacity: 0 !important;
  transition: none !important;
}

/* O link invisível da própria pasta continua dentro do overlay e continua
   clicável; apenas os comandos secundários são removidos da navegação. */
body:has(
    header
      a[href*="parentId=110176fc53e027cb9826e7df5788e69e"]
  )
  .itemsContainer
  .card[data-type="Folder"]
  :is(.cardOverlayButton-br, .cardOverlayFab-primary) {
  display: none !important;
}

body:has(
    header
      a[href*="parentId=110176fc53e027cb9826e7df5788e69e"]
  )
  .itemsContainer
  .card[data-type="Folder"]
  :is(.cardScalable, .cardImageContainer, .cardImageContainer > img) {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Remove somente o rodapé textual externo das quatro pastas. O seletor
   data-type="Folder" impede que títulos de vídeos sejam atingidos. */
body:has(
    header
      a[href*="parentId=110176fc53e027cb9826e7df5788e69e"]
  )
  .itemsContainer
  .card[data-type="Folder"]
  > .cardBox
  > :is(.cardFooter, .cardText) {
  display: none !important;
}

/* Sem o texto, elimina também o espaço que o Jellyfin reservava abaixo
   da imagem para esse rodapé. */
body:has(
    header
      a[href*="parentId=110176fc53e027cb9826e7df5788e69e"]
  )
  .itemsContainer
  .card[data-type="Folder"]
  > .cardBox.cardBox-bottompadded {
  margin-bottom: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  body:has(
      header
        a[href*="parentId=110176fc53e027cb9826e7df5788e69e"]
    )
    .itemsContainer
    .card[data-type="Folder"]
    > .cardBox {
    transition: transform 150ms ease !important;
    transform-origin: center center !important;
  }

  body:has(
      header
        a[href*="parentId=110176fc53e027cb9826e7df5788e69e"]
    )
    .itemsContainer
    .card[data-type="Folder"]:is(:hover, :focus-within)
    > .cardBox {
    transform: translate3d(0, -1px, 0) scale(1.012) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(
      header
        a[href*="parentId=110176fc53e027cb9826e7df5788e69e"]
    )
    .itemsContainer
    .card[data-type="Folder"]
    > .cardBox {
    transition: none !important;
    transform: none !important;
  }
}

/* Jellyfin 12: preserva o espaço, mas esconde o ponto do contador em carregamento. */
header .MuiChip-root.tvc-contador-carregando {
    visibility: hidden !important;
}

/* Jellyfin 12: mostra um estado de carregamento enquanto Anos e Gêneros chegam. */
body:has(#moviesPage:not(.hide))
#filter-popover:not(:has(#filtersGenres-header):has(#filtersYears-header))
.MuiPopover-paper > * {
    display: none !important;
}

body:has(#moviesPage:not(.hide))
#filter-popover:not(:has(#filtersGenres-header):has(#filtersYears-header))
.MuiPopover-paper::after {
    content: "Carregando filtros…";
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 20px;
    color: var(--coiote-white-78);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ================================================================
   TV COIOTE PLAY — COLEÇÕES EDITORIAIS DINÂMICAS DA HOME

   O JavaScript fornece somente conteúdo, estado e interação. Toda a camada
   visual reside aqui para entrar junto com o restante do tema.
   ================================================================ */

/* A Home monta faixas acima do conteúdo nativo de forma assíncrona.
   Não ancorar o conteúdo inferior enquanto essas faixas entram: a posição
   escolhida pelo usuário permanece sem compensação automática até Resume.
   O contrato do tema exclui a conta nativa; outras páginas não são afetadas. */
html[data-tvc-theme-ready="true"] #homeTab {
  overflow-anchor: none;
}
/* While authorized editorial geometry is prepared, avoid briefly presenting
   later native rows in its position. Native library tiles remain visible.
   This state ends at DOM insertion, not after image loading; JS bounds it. */
html[data-tvc-theme-ready="true"][data-tvc-home-composition="pending"]
  #homeTab > .sections > :is(.verticalSection, :has(> .verticalSection)):not(#tvCoioteTop10, #tvCoioteEditorialSections):not(:has(
    .card[data-type="CollectionFolder"],
    .card[data-type="UserView"],
    .homeLibraryButtonContainer
  )) {
  visibility: hidden;
  pointer-events: none;
}

/* Show neutral silhouettes using the real native cards already laid out.
   Their images/text remain hidden; no invented row count or reserved height. */
html[data-tvc-theme-ready="true"][data-tvc-home-composition="pending"]
  #homeTab > .sections > :is(.verticalSection, :has(> .verticalSection)):not(#tvCoioteTop10, #tvCoioteEditorialSections):not(:has(
    .card[data-type="CollectionFolder"],
    .card[data-type="UserView"],
    .homeLibraryButtonContainer
  )) .cardScalable {
  position: relative;
}

html[data-tvc-theme-ready="true"][data-tvc-home-composition="pending"]
  #homeTab > .sections > :is(.verticalSection, :has(> .verticalSection)):not(#tvCoioteTop10, #tvCoioteEditorialSections):not(:has(
    .card[data-type="CollectionFolder"],
    .card[data-type="UserView"],
    .homeLibraryButtonContainer
  )) .cardScalable::after {
  content: "";
  position: absolute;
  inset: 0;
  visibility: visible;
  opacity: 1;
  background: var(--coiote-card-placeholder);
  border-radius: var(--coiote-card-radius);
  pointer-events: none;
}


/* Native host owns positions before data arrives. Keep bounded initial gate;
   no position restoration or reparenting, and no permanent empty-row height. */
html[data-tvc-theme-ready="true"][data-tvc-home-composition="pending"]
  #homeTab #tvCoioteEditorialSections[data-native-composition="true"]
  > [data-tvc-native-resume],
html[data-tvc-theme-ready="true"][data-tvc-home-composition="pending"]
  #homeTab #tvCoioteEditorialSections[data-native-composition="true"]
  > [data-tvc-top10-slot],
html[data-tvc-theme-ready="true"][data-tvc-home-composition="pending"]
  #homeTab #tvCoioteEditorialSections[data-native-composition="true"]
  > [data-tvc-top10-slot] > #tvCoioteTop10,
html[data-tvc-theme-ready="true"][data-tvc-home-composition="pending"]
  #homeTab #tvCoioteEditorialSections[data-native-composition="true"]
  > [data-tvc-top10-slot] > #tvCoioteTop10 > :is(.coioteTop10Header, .coioteTop10Scroller) {
  visibility: hidden;
  pointer-events: none;
}
#homeTab #tvCoioteEditorialSections[data-native-composition="true"]
  > [data-tvc-editorial-slot]:empty { display: none; }

/* Temporary geometry only after the collection itself is authorized. */
#homeTab #tvCoioteEditorialSections :is([data-tvc-deferred="pending"], [data-tvc-deferred="recent"]) { min-height: clamp(16rem, 31vw, 26rem); }
#homeTab #tvCoioteEditorialSections :is([data-tvc-deferred="pending"], [data-tvc-deferred="recent"])[data-layout="landscape"] { min-height: clamp(12rem, 23vw, 20rem); }

/* The fixed Top10 owner remains a normal full-width block in display:contents. */
#homeTab #tvCoioteEditorialSections[data-native-composition="true"] > [data-tvc-top10-slot] { min-width: 0; }

#tvCoioteEditorialSections {
  display: contents;
}

/* Authorized structure is useful before its first image. Each image keeps
   its own data-loaded/decode guard; controls remain inactive until ready. */
#homeTab
  #tvCoioteEditorialSections[data-ready="false"]
  > .coioteEditorialSection {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

#homeTab
  #tvCoioteEditorialSections[data-ready="true"]
  > .coioteEditorialSection {
  visibility: visible;
  opacity: 1;
  transition: opacity 180ms ease;
}

#homeTab #tvCoioteEditorialSections[data-ready="error"]:not([data-native-composition="true"]) {
  display: none;
}

#homeTab .coioteEditorialSection {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  contain: layout style;
}

#homeTab .coioteEditorialHeader {
  display: flex;
  box-sizing: border-box;
  padding: 1.25em var(--coiote-page-gutter) 0.35em;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

#homeTab .coioteEditorialTitle {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(1.25rem, 1.65vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

#homeTab .coioteEditorialControls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  column-gap: 2px;
}

#homeTab .coioteEditorialControls[hidden] {
  display: none;
}

#homeTab .coioteEditorialArrow {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  opacity: 0.7;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    opacity 130ms ease,
    transform 130ms ease;
}

#homeTab .coioteEditorialArrow svg {
  display: none;
}

#homeTab .coioteEditorialArrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  pointer-events: none;
}

#homeTab .coioteEditorialArrow:first-child::before {
  transform: translate(-42%, -50%) rotate(-135deg);
}

#homeTab .coioteEditorialArrow:last-child::before {
  transform: translate(-58%, -50%) rotate(45deg);
}

#homeTab .coioteEditorialArrow:not(:disabled):hover {
  background: transparent;
  color: #fff;
  opacity: 1;
  transform: scale(1.15);
}

#homeTab .coioteEditorialArrow:not(:disabled):active {
  background: transparent;
  transform: scale(1.02);
}

#homeTab .coioteEditorialArrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  opacity: 1;
}

#homeTab .coioteEditorialArrow:disabled {
  background: transparent;
  color: #fff;
  box-shadow: none;
  opacity: 0.22;
  transform: none;
  cursor: default;
}

#homeTab .coioteEditorialScroller {
  box-sizing: border-box;
  width: 100%;
  padding: 2px var(--coiote-page-gutter) 1.8em;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scroll-padding-inline: var(--coiote-page-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#homeTab .coioteEditorialScroller::-webkit-scrollbar {
  display: none;
}

#homeTab .coioteEditorialTrack {
  display: grid;
  width: max-content;
  grid-auto-flow: column;
  gap: var(--coiote-editorial-gap);
}

/* Editorial invitations share the existing row lifecycle and controls. */
#homeTab #tvCoioteEditorialSections .coioteEditorialCard[data-card-layout="square"] .coioteEditorialArtwork { aspect-ratio: 1; }
#homeTab #tvCoioteEditorialSections .coioteEditorialCard[data-card-layout="portrait"] .coioteEditorialArtwork { aspect-ratio: 2 / 3; }
#homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar] .coioteEditorialTitle { flex: 1; }
#homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar] .coioteEditorialTrack { width: 100%; grid-auto-columns: calc((100% - 2 * var(--coiote-editorial-gap)) / 3); }
#homeTab #tvCoioteEditorialSections .coioteRadarCard { display: flex; flex-direction: column; gap: .7em; min-width: 0; min-height: 11.5em; box-sizing: border-box; padding: 1.3em; border-radius: var(--coiote-card-radius); border: 1px solid #ffffff16; color: #fff; text-decoration: none; background: linear-gradient(130deg, #16251e, #171b19 75%); scroll-snap-align: start; }
#homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar^="news"] .coioteRadarCard { background: linear-gradient(130deg, #1b2434, #191c23 75%); }
#homeTab #tvCoioteEditorialSections .coioteRadarEyebrow { font-size: .75em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #c6d1cb; }
#homeTab #tvCoioteEditorialSections .coioteRadarHeadline, #homeTab #tvCoioteEditorialSections .coioteRadarMatch { font-size: 1.1em; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
#homeTab #tvCoioteEditorialSections .coioteRadarHeadline { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#homeTab #tvCoioteEditorialSections .coioteRadarMeta, #homeTab #tvCoioteEditorialSections .coioteRadarChannels { font-size: .82em; color: #c5c5c5; line-height: 1.45; }
#homeTab #tvCoioteEditorialSections .coioteRadarChannels { margin-top: auto; }

#homeTab .coioteRadarAction { margin-top: auto; padding-top: .65em; font-size: .85em; font-weight: 600; color: #fff; }
#homeTab .coioteRadarCard:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Bounded radar cache logos have intrinsic geometry and never block Home. */
#homeTab .coioteRadarLogos { display: flex; align-items: center; gap: .8em; height: 3em; }
#homeTab .coioteRadarLogos img { width: 3em; height: 3em; object-fit: contain; opacity: 0; }
#homeTab .coioteRadarLogos img[data-ready="true"] { opacity: 1; }
/* Championships have a distinct, compact shelf; official marks retain their colors. */
#homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar="football-competitions"] .coioteEditorialTrack { grid-auto-columns: calc((100% - 5 * var(--coiote-editorial-gap)) / 6); }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="football-competitions"] { --league-accent: #49866f; position: relative; align-items: center; text-align: center; min-height: 16em; padding: 1.25em .8em; gap: .5em; background: radial-gradient(ellipse at 50% 0%, #ffffff14, transparent 70%), #171b1c; border-top: 2px solid var(--league-accent); }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-league="eng.1"] { --league-accent: #b8a1eb; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-league="esp.1"] { --league-accent: #ef9c75; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-league="ita.1"] { --league-accent: #77b5f0; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-league="ger.1"] { --league-accent: #e68585; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-league="fra.1"] { --league-accent: #b5c878; }
#homeTab .coioteEditorialSection[data-radar="football-competitions"] .coioteRadarLogos { height: 6em; justify-content: center; }
#homeTab .coioteEditorialSection[data-radar="football-competitions"] .coioteRadarLogos img { width: 80px; height: 80px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: #f5f5f5; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="football-competitions"] .coioteRadarEyebrow { font-size: .6em; letter-spacing: .1em; color: #aaa; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="football-competitions"] .coioteRadarHeadline { font-size: 1em; line-height: 1.25; -webkit-line-clamp: 2; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="football-competitions"] .coioteRadarMeta { font-size: .7em; }
#homeTab .coioteRadarCard[data-kind="football-competitions"] .coioteRadarAction { width: 100%; border-top: 1px solid #ffffff14; padding-top: .9em; }
/* Editorial coverage uses typography, not extra image requests or an iframe on Home. */
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="news-topic"] { background: #191d24; border-top: 2px solid #b5a67d; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="news-topic"][data-lead="true"] { background: linear-gradient(135deg, #303747, #191d24); grid-column: span 2; }
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-lead="true"] .coioteRadarHeadline { max-width: 32em; font-size: 1.5em; line-height: 1.25; }
#homeTab .coioteRadarCoverage { order: -1; font-size: .65em; font-weight: 700; letter-spacing: .14em; color: #d9cbaa; }
#homeTab .coioteRadarRank { font-size: 2em; font-weight: 700; line-height: 1; color: #9ea7b8; }
#homeTab .coioteRadarScore { font-size: 1.7em; font-weight: 700; line-height: 1.15; }
#homeTab .coioteRadarTimestamp { font-size: .75em; opacity: .7; }

/* Mesmo tratamento do Futebol Radar: vermelho só durante partidas ao vivo.
   Pulso decorativo por opacity, sem temporizador JS ou consultas adicionais. */
#homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="football-live"] { border-color: #ff3b3b80; background: radial-gradient(90% 85% at 100% 0%, #ff3b3b24, transparent 75%), linear-gradient(160deg, #211519, #141519); gap: 1em; }
#homeTab .coioteRadarLiveHeader { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
#homeTab #tvCoioteEditorialSections .coioteRadarLiveHeader .coioteRadarEyebrow { font-size: .65em; min-width: 0; }
#homeTab .coioteRadarLiveBadge { display: inline-flex; align-items: center; gap: .45em; flex-shrink: 0; color: #ff5e5e; font-size: .68em; font-weight: 800; letter-spacing: .03em; }
#homeTab .coioteRadarLiveBadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; animation: coioteRadarLivePulse 1.1s ease-in-out infinite; }
@keyframes coioteRadarLivePulse { 50% { opacity: .25; } }
#homeTab .coioteRadarLiveDuel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4.5em, auto) minmax(0, 1fr); align-items: start; gap: .55em; }
#homeTab .coioteRadarLiveTeam, #homeTab .coioteRadarLiveResult { display: flex; flex-direction: column; align-items: center; gap: .5em; min-width: 0; text-align: center; }
#homeTab .coioteRadarLiveResult { padding-top: .4em; }
#homeTab .coioteRadarLiveTeam .coioteRadarLogos { justify-content: center; }
#homeTab .coioteRadarTeamName { font-size: .8em; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
#homeTab .coioteRadarTeamFallback { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #eee; background: #ffffff0d; font-size: 1em; font-weight: 700; }
#homeTab .coioteRadarLiveResult .coioteRadarScore { font-size: 1.85em; color: #f6b93b; font-variant-numeric: tabular-nums; white-space: nowrap; }
#homeTab #tvCoioteEditorialSections .coioteRadarLiveResult .coioteRadarMeta { font-size: .75em; font-weight: 600; }
#homeTab .coioteRadarCard[data-kind="football-live"] .coioteRadarTimestamp { font-size: .65em; }
#homeTab .coioteRadarCard[data-kind="football-live"] .coioteRadarAction { border-top: 1px solid #ff3b3b26; }
@media (prefers-reduced-motion: reduce) { #homeTab .coioteRadarLiveBadge::before { animation: none; } }

@media (hover: hover) and (pointer: fine) { #homeTab #tvCoioteEditorialSections .coioteRadarCard:hover { border-color: #ffffff60; } }
@media (hover: hover) and (pointer: fine) { #homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="football-live"]:hover { border-color: #ff3b3bcc; } }
@media (max-width: 60em) {
  #homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar] .coioteEditorialTrack { grid-auto-columns: calc(47vw - var(--coiote-editorial-gap)); }
  #homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar="football-competitions"] .coioteEditorialTrack { grid-auto-columns: calc(29vw - var(--coiote-editorial-gap)); }
  #homeTab #tvCoioteEditorialSections .coioteRadarCard[data-kind="news-topic"][data-lead="true"] { grid-column: auto; }
}
@media (max-width: 40em) {
  #homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar] .coioteEditorialTrack { grid-auto-columns: calc(82vw - var(--coiote-editorial-gap)); }
  #homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar="football-competitions"] .coioteEditorialTrack { grid-auto-columns: calc(47vw - var(--coiote-editorial-gap)); }
  #homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar] .coioteEditorialHeader { flex-wrap: wrap; column-gap: .6em; row-gap: 0; }
  #homeTab #tvCoioteEditorialSections .coioteEditorialSection[data-radar] .coioteEditorialTitle { flex-basis: 65%; }
}

/* As colunas repetem os breakpoints dos overflow cards do Jellyfin 12. O gap é
   descontado para reproduzir a margem direita usada pelo card nativo. */
#homeTab
  .coioteEditorialSection[data-layout="landscape"]
  .coioteEditorialTrack {
  grid-auto-columns: calc(72vw - var(--coiote-editorial-gap));
}

#homeTab
  .coioteEditorialSection[data-layout="portrait"]
  .coioteEditorialTrack {
  grid-auto-columns: calc(40vw - var(--coiote-editorial-gap));
}

#homeTab .coioteEditorialCard {
  display: block;
  min-width: 0;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}

#homeTab .coioteEditorialArtwork {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border-radius: var(--coiote-card-radius);
  background: var(--coiote-card-placeholder);
  box-shadow: none;
  transform-origin: center center;
}

#homeTab
  .coioteEditorialSection[data-layout="landscape"]
  .coioteEditorialArtwork {
  aspect-ratio: 16 / 9;
}

#homeTab
  .coioteEditorialSection[data-layout="portrait"]
  .coioteEditorialArtwork {
  aspect-ratio: 2 / 3;
}

#homeTab .coioteEditorialImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: none;
  transform: none;
}

#homeTab .coioteEditorialImage[data-loaded="true"] {
  opacity: 1;
}

#homeTab .coioteEditorialPlayed {
  position: absolute;
  z-index: 1;
  top: 0.225em;
  right: 0.225em;
  display: grid;
  width: 2em;
  height: 2em;
  place-items: center;
  border-radius: 50%;
  background: var(--coiote-white-88);
  color: #111;
  box-shadow:
    0 2px 2px rgb(0 0 0 / 14%),
    0 1px 5px rgb(0 0 0 / 12%),
    0 3px 1px -2px rgb(0 0 0 / 20%);
}

#homeTab .coioteEditorialPlayed svg {
  width: 1.35em;
  height: 1.35em;
  fill: currentColor;
}

#homeTab .coioteEditorialProgress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--coiote-white-22);
}

#homeTab .coioteEditorialProgressValue {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 5px rgb(255 255 255 / 65%);
}

#homeTab .coioteEditorialCaption {
  display: block;
  min-width: 0;
  padding: 0.3em 2px 0;
  text-align: center;
}

#homeTab .coioteEditorialName,
#homeTab .coioteEditorialYear {
  display: block;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#homeTab .coioteEditorialName {
  font-size: 1em;
  line-height: 1.2;
}

#homeTab .coioteEditorialYear {
  margin-top: 0.06em;
  font-size: 86%;
  line-height: 1.2;
}

@media (hover: hover) and (pointer: fine) {
  #homeTab .coioteEditorialArtwork {
    transition: transform 150ms ease;
  }

  #homeTab .coioteEditorialCard:hover .coioteEditorialArtwork,
  #homeTab .coioteEditorialCard:focus-visible .coioteEditorialArtwork {
    transform: translate3d(0, -1px, 0) scale(1.012);
  }
}

@media (min-width: 25em) {
  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(31.2vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 35em) {
  #homeTab
    .coioteEditorialSection[data-layout="landscape"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(45.5vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 43.75em) {
  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(23.1vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 48.125em) {
  #homeTab
    .coioteEditorialSection[data-layout="landscape"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(30vw - var(--coiote-editorial-gap));
  }
}

@media (orientation: landscape) {
  #homeTab
    .coioteEditorialSection[data-layout="landscape"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(30vw - var(--coiote-editorial-gap));
  }

  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(23.1vw - var(--coiote-editorial-gap));
  }
}

@media (orientation: landscape) and (min-width: 48.125em) {
  #homeTab
    .coioteEditorialSection[data-layout="landscape"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(23.1vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 50em) {
  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(18.5vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 75em) {
  #homeTab
    .coioteEditorialSection[data-layout="landscape"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(23.1vw - var(--coiote-editorial-gap));
  }

  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(15.5vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 87.5em) {
  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(13.3vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 100em) {
  #homeTab
    .coioteEditorialSection[data-layout="landscape"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(18.7vw - var(--coiote-editorial-gap));
  }

  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(11.6vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 120em) {
  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(10.41vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 131.25em) {
  #homeTab
    .coioteEditorialSection[data-layout="portrait"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(9.3vw - var(--coiote-editorial-gap));
  }
}

@media (min-width: 156.25em) {
  #homeTab
    .coioteEditorialSection[data-layout="landscape"]
    .coioteEditorialTrack {
    grid-auto-columns: calc(15.6vw - var(--coiote-editorial-gap));
  }
}

@media (max-width: 700px) {
  #homeTab .coioteEditorialTitle {
    font-size: 1.2rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  #homeTab
    #tvCoioteEditorialSections[data-ready="true"]
    > .coioteEditorialSection,
  #homeTab .coioteEditorialArtwork,
  #homeTab .coioteEditorialArrow {
    transition: none;
  }
}

/* Logo vetorial original no mobile; incorporado para acompanhar o CSS persistente. */
@media (max-width: 899px) {
  html:root {
    --coiote-brand-logo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2267.617974%2054.825195%20843.229052%20168.645810%22%20width%3D%221200%22%20height%3D%22240%22%3E%3Cg%20transform%3D%22matrix%281%2C%200%2C%200%2C%201%2C%2090%2C%2066%29%22%3E%3Cg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%280.266631%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2049.40625%20-53.84375%20L%2033.234375%20-53.84375%20L%2033.234375%20-24.0625%20C%2033.234375%20-21.582031%2033.851562%20-19.769531%2035.09375%20-18.625%20C%2036.332031%20-17.476562%2038.144531%20-16.832031%2040.53125%20-16.6875%20C%2042.914062%20-16.539062%2045.875%20-16.5625%2049.40625%20-16.75%20L%2049.40625%200%20C%2036.707031%201.425781%2027.753906%200.230469%2022.546875%20-3.578125%20C%2017.347656%20-7.398438%2014.75%20-14.226562%2014.75%20-24.0625%20L%2014.75%20-53.84375%20L%202.296875%20-53.84375%20L%202.296875%20-71.609375%20L%2014.75%20-71.609375%20L%2014.75%20-86.078125%20L%2033.234375%20-91.65625%20L%2033.234375%20-71.609375%20L%2049.40625%20-71.609375%20Z%20M%2049.40625%20-53.84375%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%2852.25646%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2055.5625%20-71.609375%20L%2075.90625%20-71.609375%20L%2048.6875%200%20L%2027.640625%200%20L%200.421875%20-71.609375%20L%2020.765625%20-71.609375%20L%2038.09375%20-21.484375%20Z%20M%2055.5625%20-71.609375%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28122.578841%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2042.53125%202%20C%2031.75%202%2022.75%20-1.625%2015.53125%20-8.875%20C%208.320312%20-16.132812%204.71875%20-25.109375%204.71875%20-35.796875%20C%204.71875%20-46.492188%208.320312%20-55.46875%2015.53125%20-62.71875%20C%2022.75%20-69.976562%2031.75%20-73.609375%2042.53125%20-73.609375%20C%2049.5%20-73.609375%2055.847656%20-71.9375%2061.578125%20-68.59375%20C%2067.304688%20-65.257812%2071.648438%20-60.773438%2074.609375%20-55.140625%20L%2058.71875%20-45.828125%20C%2057.289062%20-48.785156%2055.117188%20-51.125%2052.203125%20-52.84375%20C%2049.285156%20-54.5625%2046.015625%20-55.421875%2042.390625%20-55.421875%20C%2036.859375%20-55.421875%2032.273438%20-53.582031%2028.640625%20-49.90625%20C%2025.015625%20-46.226562%2023.203125%20-41.53125%2023.203125%20-35.8125%20C%2023.203125%20-30.175781%2025.015625%20-25.519531%2028.640625%20-21.84375%20C%2032.273438%20-18.164062%2036.859375%20-16.328125%2042.390625%20-16.328125%20C%2046.117188%20-16.328125%2049.4375%20-17.160156%2052.34375%20-18.828125%20C%2055.257812%20-20.503906%2057.429688%20-22.820312%2058.859375%20-25.78125%20L%2074.90625%20-16.609375%20C%2071.75%20-10.972656%2067.304688%20-6.460938%2061.578125%20-3.078125%20C%2055.847656%200.304688%2049.5%202%2042.53125%202%20Z%20M%2042.53125%202%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28194.476675%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2069.453125%20-8.953125%20C%2062.109375%20-1.648438%2053.132812%202%2042.53125%202%20C%2031.9375%202%2022.984375%20-1.648438%2015.671875%20-8.953125%20C%208.367188%20-16.253906%204.71875%20-25.203125%204.71875%20-35.796875%20C%204.71875%20-46.398438%208.367188%20-55.351562%2015.671875%20-62.65625%20C%2022.984375%20-69.957031%2031.9375%20-73.609375%2042.53125%20-73.609375%20C%2053.132812%20-73.609375%2062.109375%20-69.957031%2069.453125%20-62.65625%20C%2076.804688%20-55.351562%2080.484375%20-46.398438%2080.484375%20-35.796875%20C%2080.484375%20-25.203125%2076.804688%20-16.253906%2069.453125%20-8.953125%20Z%20M%2028.71875%20-21.625%20C%2032.394531%20-17.90625%2037%20-16.046875%2042.53125%20-16.046875%20C%2048.070312%20-16.046875%2052.703125%20-17.90625%2056.421875%20-21.625%20C%2060.148438%20-25.351562%2062.015625%20-30.078125%2062.015625%20-35.796875%20C%2062.015625%20-41.523438%2060.148438%20-46.25%2056.421875%20-49.96875%20C%2052.703125%20-53.695312%2048.070312%20-55.5625%2042.53125%20-55.5625%20C%2037%20-55.5625%2032.394531%20-53.695312%2028.71875%20-49.96875%20C%2025.039062%20-46.25%2023.203125%20-41.523438%2023.203125%20-35.796875%20C%2023.203125%20-30.078125%2025.039062%20-25.351562%2028.71875%20-21.625%20Z%20M%2028.71875%20-21.625%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28276.400099%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2017.609375%20-80.203125%20C%2014.554688%20-80.203125%2011.90625%20-81.320312%209.65625%20-83.5625%20C%207.414062%20-85.8125%206.296875%20-88.460938%206.296875%20-91.515625%20C%206.296875%20-94.566406%207.414062%20-97.238281%209.65625%20-99.53125%20C%2011.90625%20-101.820312%2014.554688%20-102.96875%2017.609375%20-102.96875%20C%2020.765625%20-102.96875%2023.460938%20-101.820312%2025.703125%20-99.53125%20C%2027.953125%20-97.238281%2029.078125%20-94.566406%2029.078125%20-91.515625%20C%2029.078125%20-88.460938%2027.953125%20-85.8125%2025.703125%20-83.5625%20C%2023.460938%20-81.320312%2020.765625%20-80.203125%2017.609375%20-80.203125%20Z%20M%208.453125%200%20L%208.453125%20-71.609375%20L%2026.921875%20-71.609375%20L%2026.921875%200%20Z%20M%208.453125%200%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28308.62517%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2069.453125%20-8.953125%20C%2062.109375%20-1.648438%2053.132812%202%2042.53125%202%20C%2031.9375%202%2022.984375%20-1.648438%2015.671875%20-8.953125%20C%208.367188%20-16.253906%204.71875%20-25.203125%204.71875%20-35.796875%20C%204.71875%20-46.398438%208.367188%20-55.351562%2015.671875%20-62.65625%20C%2022.984375%20-69.957031%2031.9375%20-73.609375%2042.53125%20-73.609375%20C%2053.132812%20-73.609375%2062.109375%20-69.957031%2069.453125%20-62.65625%20C%2076.804688%20-55.351562%2080.484375%20-46.398438%2080.484375%20-35.796875%20C%2080.484375%20-25.203125%2076.804688%20-16.253906%2069.453125%20-8.953125%20Z%20M%2028.71875%20-21.625%20C%2032.394531%20-17.90625%2037%20-16.046875%2042.53125%20-16.046875%20C%2048.070312%20-16.046875%2052.703125%20-17.90625%2056.421875%20-21.625%20C%2060.148438%20-25.351562%2062.015625%20-30.078125%2062.015625%20-35.796875%20C%2062.015625%20-41.523438%2060.148438%20-46.25%2056.421875%20-49.96875%20C%2052.703125%20-53.695312%2048.070312%20-55.5625%2042.53125%20-55.5625%20C%2037%20-55.5625%2032.394531%20-53.695312%2028.71875%20-49.96875%20C%2025.039062%20-46.25%2023.203125%20-41.523438%2023.203125%20-35.796875%20C%2023.203125%20-30.078125%2025.039062%20-25.351562%2028.71875%20-21.625%20Z%20M%2028.71875%20-21.625%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28388.973159%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2049.40625%20-53.84375%20L%2033.234375%20-53.84375%20L%2033.234375%20-24.0625%20C%2033.234375%20-21.582031%2033.851562%20-19.769531%2035.09375%20-18.625%20C%2036.332031%20-17.476562%2038.144531%20-16.832031%2040.53125%20-16.6875%20C%2042.914062%20-16.539062%2045.875%20-16.5625%2049.40625%20-16.75%20L%2049.40625%200%20C%2036.707031%201.425781%2027.753906%200.230469%2022.546875%20-3.578125%20C%2017.347656%20-7.398438%2014.75%20-14.226562%2014.75%20-24.0625%20L%2014.75%20-53.84375%20L%202.296875%20-53.84375%20L%202.296875%20-71.609375%20L%2014.75%20-71.609375%20L%2014.75%20-86.078125%20L%2033.234375%20-91.65625%20L%2033.234375%20-71.609375%20L%2049.40625%20-71.609375%20Z%20M%2049.40625%20-53.84375%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28437.668843%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2024.0625%20-28.21875%20C%2026.539062%20-19.238281%2033.269531%20-14.75%2044.25%20-14.75%20C%2051.320312%20-14.75%2056.671875%20-17.132812%2060.296875%20-21.90625%20L%2075.1875%20-13.3125%20C%2068.125%20-3.101562%2057.71875%202%2043.96875%202%20C%2032.125%202%2022.617188%20-1.578125%2015.453125%20-8.734375%20C%208.296875%20-15.898438%204.71875%20-24.925781%204.71875%20-35.8125%20C%204.71875%20-46.59375%208.25%20-55.585938%2015.3125%20-62.796875%20C%2022.382812%20-70.003906%2031.457031%20-73.609375%2042.53125%20-73.609375%20C%2053.039062%20-73.609375%2061.707031%20-69.976562%2068.53125%20-62.71875%20C%2075.351562%20-55.46875%2078.765625%20-46.5%2078.765625%20-35.8125%20C%2078.765625%20-33.414062%2078.523438%20-30.882812%2078.046875%20-28.21875%20Z%20M%2023.78125%20-42.53125%20L%2060.296875%20-42.53125%20C%2059.242188%20-47.40625%2057.070312%20-51.035156%2053.78125%20-53.421875%20C%2050.488281%20-55.804688%2046.738281%20-57%2042.53125%20-57%20C%2037.570312%20-57%2033.46875%20-55.734375%2030.21875%20-53.203125%20C%2026.96875%20-50.671875%2024.820312%20-47.113281%2023.78125%20-42.53125%20Z%20M%2023.78125%20-42.53125%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22matrix%281%2C%200%2C%200%2C%201%2C%20612%2C%2066%29%22%3E%3Cg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%280.0614738%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2048.40625%20-73.328125%20C%2058.625%20-73.328125%2067.335938%20-69.695312%2074.546875%20-62.4375%20C%2081.753906%20-55.1875%2085.359375%20-46.304688%2085.359375%20-35.796875%20C%2085.359375%20-25.296875%2081.753906%20-16.414062%2074.546875%20-9.15625%20C%2067.335938%20-1.90625%2058.625%201.71875%2048.40625%201.71875%20C%2035.707031%201.71875%2026.066406%20-3.53125%2019.484375%20-14.03125%20L%2019.484375%2028.640625%20L%2010.03125%2028.640625%20L%2010.03125%20-71.609375%20L%2019.484375%20-71.609375%20L%2019.484375%20-57.578125%20C%2026.066406%20-68.078125%2035.707031%20-73.328125%2048.40625%20-73.328125%20Z%20M%2027.640625%20-15.6875%20C%2033.085938%20-10.195312%2039.769531%20-7.453125%2047.6875%20-7.453125%20C%2055.613281%20-7.453125%2062.296875%20-10.195312%2067.734375%20-15.6875%20C%2073.179688%20-21.175781%2075.90625%20-27.878906%2075.90625%20-35.796875%20C%2075.90625%20-43.722656%2073.179688%20-50.429688%2067.734375%20-55.921875%20C%2062.296875%20-61.410156%2055.613281%20-64.15625%2047.6875%20-64.15625%20C%2039.769531%20-64.15625%2033.085938%20-61.410156%2027.640625%20-55.921875%20C%2022.203125%20-50.429688%2019.484375%20-43.722656%2019.484375%20-35.796875%20C%2019.484375%20-27.878906%2022.203125%20-21.175781%2027.640625%20-15.6875%20Z%20M%2027.640625%20-15.6875%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%2888.000281%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2010.03125%200%20L%2010.03125%20-104.546875%20L%2019.484375%20-104.546875%20L%2019.484375%200%20Z%20M%2010.03125%200%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28114.353197%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2071.609375%20-71.609375%20L%2081.0625%20-71.609375%20L%2081.0625%200%20L%2071.609375%200%20L%2071.609375%20-14.03125%20C%2065.023438%20-3.53125%2055.378906%201.71875%2042.671875%201.71875%20C%2032.460938%201.71875%2023.753906%20-1.90625%2016.546875%20-9.15625%20C%209.335938%20-16.414062%205.734375%20-25.296875%205.734375%20-35.796875%20C%205.734375%20-46.304688%209.335938%20-55.1875%2016.546875%20-62.4375%20C%2023.753906%20-69.695312%2032.460938%20-73.328125%2042.671875%20-73.328125%20C%2055.378906%20-73.328125%2065.023438%20-68.078125%2071.609375%20-57.578125%20Z%20M%2023.34375%20-15.6875%20C%2028.789062%20-10.195312%2035.472656%20-7.453125%2043.390625%20-7.453125%20C%2051.316406%20-7.453125%2058%20-10.195312%2063.4375%20-15.6875%20C%2068.882812%20-21.175781%2071.609375%20-27.878906%2071.609375%20-35.796875%20C%2071.609375%20-43.722656%2068.882812%20-50.429688%2063.4375%20-55.921875%20C%2058%20-61.410156%2051.316406%20-64.15625%2043.390625%20-64.15625%20C%2035.472656%20-64.15625%2028.789062%20-61.410156%2023.34375%20-55.921875%20C%2017.90625%20-50.429688%2015.1875%20-43.722656%2015.1875%20-35.796875%20C%2015.1875%20-27.878906%2017.90625%20-21.175781%2023.34375%20-15.6875%20Z%20M%2023.34375%20-15.6875%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%3E%3Cg%20transform%3D%22translate%28202.292004%2C%20111.063448%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M%2061.578125%20-71.609375%20L%2071.609375%20-71.609375%20L%2040.953125%206.59375%20C%2038.191406%2013.65625%2034.253906%2019.210938%2029.140625%2023.265625%20C%2024.035156%2027.328125%2018.332031%2029.117188%2012.03125%2028.640625%20L%2012.03125%2019.765625%20C%2020.625%2020.722656%2027.164062%2015.757812%2031.65625%204.875%20L%2033.515625%200.421875%20L%201.4375%20-71.609375%20L%2011.453125%20-71.609375%20L%2038.375%20-11.59375%20Z%20M%2061.578125%20-71.609375%20%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
}



/* Contador alinhado aos controles somente nas duas bibliotecas no mobile. */
@media (max-width: 899px) {
body:has(header a[href*="parentId=93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2),
body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2),
body:has(a.navMenuOption-selected[data-itemid="93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2),
body:has(header a[href*="parentId=4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2),
body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2),
body:has(a.navMenuOption-selected[data-itemid="4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) {
  flex-wrap: nowrap !important; gap: 8px !important; padding-block: 8px !important;
}
body:has(header a[href*="parentId=93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root,
body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root,
body:has(a.navMenuOption-selected[data-itemid="93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root,
body:has(header a[href*="parentId=4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root,
body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root,
body:has(a.navMenuOption-selected[data-itemid="4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiBox-root {
  order: 2 !important; flex: 0 0 auto !important; margin: 0 0 0 auto !important;
}
body:has(header a[href*="parentId=93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root,
body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root,
body:has(a.navMenuOption-selected[data-itemid="93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root,
body:has(header a[href*="parentId=4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root,
body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root,
body:has(a.navMenuOption-selected[data-itemid="4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root {
  order: 1 !important; flex: 0 1 auto !important; min-width: 0 !important; margin-block: 0 !important; justify-content: flex-start !important;
}
body:has(header a[href*="parentId=93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root,
body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root,
body:has(a.navMenuOption-selected[data-itemid="93a59b902fb96560a954f92b8ed7c4cd"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root,
body:has(header a[href*="parentId=4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root,
body:has(a.MuiListItemButton-root.Mui-selected[href*="topParentId=4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root,
body:has(a.navMenuOption-selected[data-itemid="4a8707f768b97d6f9b99345965eeca0d"]) header.MuiAppBar-root > .MuiToolbar-root:nth-of-type(2) > .MuiStack-root > .MuiBox-root {
  flex-grow: 0 !important;
}
}

/* TVC_HEADER_SHADOW_COMPOSITION: conserva a camada da faixa decorativa
   durante a transicao de opacidade ao rolar. Nao recorta o cabecalho
   nem seus menus; preserva gradiente, transicao e efeitos dos cards. */
@media (min-width: 900px) {
  html.layout-desktop body header.MuiAppBar-root:not(:empty)::after {
    will-change: opacity;
  }
}

/* Curadoria administrativa: preserva o botao nativo nas colecoes. */
#itemDetailPage.tvc-admin-collection .btnMoreCommands.detailButton {
  display: inline-flex !important;
}

/* Games ocultam legendas redundantes no plugin. Na Home, conservar a margem
   nativa inferior do card, que também separa a faixa seguinte. Restaurar a
   propriedade em vez de somar padding evita espaçamento duplo se o plugin
   deixar de zerá-la numa versão futura. Grade Games e curador ficam fora. */
html[data-tvc-theme-ready="true"] #homeTab .verticalSection:has(> .sectionTitleContainer a[href*="topParentId=8f3e04c1bc361191c16f63a5c8f9c190"]) .cardBox.cardBox-bottompadded {
  margin-bottom: 1.8em !important;
}
