/* Zuno Play MSX 1.0 — interface final ajustada ao viewport real.
   Esta é a única camada de proporções depois de fluid-tv.css.
   Todas as medidas dependem da área CSS disponibilizada pelo MSX,
   nunca da resolução física anunciada pelo painel da TV. */

/* HOME: proporções da captura de referência 1920x1080 (4 opções de 425x350). */
html body #stage #homeView .zuno-home-logo {
  left:38% !important;top:5.5% !important;width:24% !important;height:20% !important;
  max-width:none !important;max-height:none !important;object-fit:contain !important;
}
html body #stage #homeView .home-main {
  left:3.65% !important;top:35.2% !important;width:92.7% !important;
  height:32.4% !important;max-height:none !important;padding:0 !important;gap:0 !important;
}
html body #stage #homeView .home-cards {
  /* Margens dos cards garantem separação em WebViews sem flex-gap. */
  width:100% !important;height:100% !important;gap:0 !important;
}
html body #stage #homeView .home-cards > .home-card + .home-card {
  margin-left:1.45% !important;
}
html body #stage #homeView .account-panel {display:none !important;}
html body #stage #homeView .home-card {
  flex:1 1 0 !important;-webkit-flex:1 1 0 !important;width:24% !important;
  height:100% !important;min-width:0 !important;padding:1% !important;
  display:flex !important;display:-webkit-flex !important;flex-direction:column !important;
  -webkit-flex-direction:column !important;align-items:center !important;
  -webkit-align-items:center !important;justify-content:center !important;
  -webkit-justify-content:center !important;border-radius:clamp(13px,1.2vw,22px) !important;
}
html body #stage #homeView .home-icon {
  width:clamp(50px,5.4vw,105px) !important;height:clamp(50px,9.2vh,105px) !important;
  max-height:none !important;min-height:0 !important;margin:0 0 clamp(13px,2.6vh,28px) !important;
}
html body #stage #homeView .home-icon svg {
  width:100% !important;height:100% !important;stroke:currentColor !important;
  stroke-width:5 !important;fill:none !important;stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
html body #stage #homeView .home-card strong {
  font-size:clamp(20px,3.55vh,39px) !important;line-height:1.12 !important;
}
html body #stage #homeView .home-card small {display:none !important;}
html body #stage #homeView .home-actions {
  top:auto !important;bottom:9% !important;height:8.6% !important;gap:0 !important;
}
html body #stage #homeView .home-actions > .home-action + .home-action {
  margin-left:1.5% !important;
}
html body #stage #homeView .home-actions .home-action {
  width:6.5% !important;max-width:125px !important;min-width:50px !important;
  height:100% !important;border-radius:13px !important;
}

/* CATÁLOGOS: começa no topo útil da tela, três colunas como na 2.0.5.
   Cada painel é recortado pelo viewport, e suas listas rolam por dentro. */
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody.catalog-body {
  left:1.25% !important;top:2.8% !important;width:97.5% !important;
  height:94% !important;max-height:94% !important;display:flex !important;
  display:-webkit-flex !important;gap:0 !important;padding:0 !important;
  box-sizing:border-box !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody.catalog-body > .content-panel,
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody.catalog-body > .detail-panel {
  margin-left:1% !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody > .category-panel {
  flex:0 0 23% !important;-webkit-flex:0 0 23% !important;width:23% !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody > .content-panel {
  flex:1 1 0 !important;-webkit-flex:1 1 0 !important;width:auto !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody > .detail-panel {
  flex:0 0 35% !important;-webkit-flex:0 0 35% !important;width:35% !important;
}
/* A classe catalog-body e necessária para superar os seletores legados
   do samsung.css, que ainda fixavam cada painel em 1024px. */
html body #stage #catalogView#catalogView #catalogBody.catalog-body > .category-panel,
html body #stage #catalogView#catalogView #catalogBody.catalog-body > .content-panel,
html body #stage #catalogView#catalogView #catalogBody.catalog-body > .detail-panel {
  min-width:0 !important;min-height:0 !important;height:100% !important;
  max-height:100% !important;overflow:hidden !important;box-sizing:border-box !important;
}
html body #stage #catalogView#catalogView #catalogBody #groupWindow {
  height:auto !important;min-height:0 !important;max-height:none !important;
  flex:1 1 auto !important;-webkit-flex:1 1 auto !important;overflow-y:auto !important;
  padding-top:4px !important;padding-bottom:2px !important;
}
/* Apenas cards inteiros: a navegação substitui as categorias visíveis
   sem permitir que uma categoria extra apareça cortada sob o rodapé. */
html body #stage #catalogView#catalogView #catalogBody:not(.series-inline-mode) #groupWindow {
  overflow-y:hidden !important;overflow-x:hidden !important;
}
html body #stage #catalogView#catalogView #catalogBody #groupWindow > .group-btn + .group-btn {
  margin-top:0 !important;
}
/* Uma categoria nunca pode ter o contorno de foco recortado pelo rodapé. */
html body #stage #catalogView#catalogView #catalogBody:not(.series-inline-mode) #groupWindow .group-btn {
  height:clamp(54px,7.2vh,74px) !important;
  min-height:clamp(54px,7.2vh,74px) !important;
  margin:0 0 clamp(4px,0.7vh,8px) !important;
}
html body #stage #catalogView#catalogView #catalogBody:not(.series-inline-mode) #catalogScrollHint {
  flex:0 0 20px !important;-webkit-flex:0 0 20px !important;
  height:20px !important;min-height:20px !important;max-height:20px !important;
  margin:0 !important;padding:0 !important;line-height:20px !important;
  align-self:stretch !important;text-align:center !important;
}
html body #stage #catalogView#catalogView #catalogBody .quick-filters {
  height:clamp(70px,10vh,95px) !important;min-height:0 !important;
  max-height:none !important;gap:0 !important;
}
html body #stage #catalogView#catalogView #catalogBody .quick-filters > .quick-filter + .quick-filter {
  margin-left:1% !important;
}
html body #stage #catalogView#catalogView #catalogBody .quick-filter {
  flex:1 1 0 !important;-webkit-flex:1 1 0 !important;
  min-width:0 !important;padding:3px 1px !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView #catalogBody .quick-filter > .quick-icon {
  font-size:clamp(25px,3.6vh,39px) !important;
  line-height:1 !important;
}
html body #stage #catalogView#catalogView #catalogBody .quick-filter > b {
  display:block !important;width:100% !important;min-width:0 !important;
  font-size:clamp(10px,1.25vh,14px) !important;line-height:1.1 !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
}
html body #stage #catalogView#catalogView #catalogBody .content-panel {
  display:flex !important;display:-webkit-flex !important;
  flex-direction:column !important;-webkit-flex-direction:column !important;
  padding:1.3% !important;
}
html body #stage #catalogView#catalogView #catalogBody #contentWindow {
  flex:1 1 0 !important;-webkit-flex:1 1 0 !important;
  height:auto !important;max-height:none !important;min-height:0 !important;
  padding-bottom:1vh !important;overflow-x:hidden !important;overflow-y:auto !important;
  box-sizing:border-box !important;
}
html body #stage #catalogView#catalogView #catalogBody .catalog-item-total {
  position:static !important;left:auto !important;right:auto !important;bottom:auto !important;
  flex:0 0 30px !important;-webkit-flex:0 0 30px !important;
  width:100% !important;height:30px !important;min-height:30px !important;max-height:30px !important;
  margin:7px 0 0 !important;padding:0 !important;
  line-height:30px !important;text-align:center !important;
  box-sizing:border-box !important;
}
html body #stage #catalogView#catalogView #catalogBody:not(.series-inline-mode) .inline-episodes-heading {
  display:none !important;
}
html body #stage #catalogView#catalogView #contentWindow.poster-grid {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-template-rows:none !important;grid-auto-rows:26vh !important;
  grid-gap:10px !important;
  gap:clamp(7px,0.9vh,13px) !important;align-content:start !important;
}
html body #stage #catalogView#catalogView .poster-grid .media-card {
  display:grid !important;grid-template-rows:minmax(0,1fr) 22% !important;
  width:100% !important;height:100% !important;min-height:0 !important;margin:0 !important;padding:0 !important;
}
html body #stage #catalogView#catalogView .poster-grid .media-art {
  width:100% !important;height:100% !important;min-height:0 !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView .poster-grid .media-art img {
  width:100% !important;height:100% !important;object-fit:cover !important;
}
html body #stage #catalogView#catalogView .poster-grid .media-copy {
  height:auto !important;min-height:0 !important;padding:5px 7px !important;
}
html body #stage #catalogView#catalogView .poster-grid .media-copy strong {
  font-size:clamp(12px,1.75vh,19px) !important;line-height:1.15 !important;
}
html body #stage #catalogView#catalogView #contentWindow.live-grid {
  display:grid !important;
  grid-template-rows:repeat(9,minmax(0,1fr)) !important;
  grid-auto-rows:0 !important;
  grid-row-gap:clamp(5px,0.7vh,8px) !important;
  row-gap:clamp(5px,0.7vh,8px) !important;
  overflow-y:hidden !important;
}
/* A coluna de prévia/capa deve encostar nas mesmas linhas do topo e rodapé. */
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody.catalog-body > .detail-panel {
  padding:0 !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody.catalog-body #vodDetail {
  height:100% !important;max-height:100% !important;min-height:0 !important;
  grid-template-rows:minmax(0,35%) minmax(0,1fr) !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody.catalog-body #detailPoster {
  height:100% !important;min-height:0 !important;max-height:100% !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody.catalog-body .vod-copy {
  flex:1 1 0 !important;min-height:0 !important;overflow-y:auto !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody.catalog-body #detailSynopsis {
  font-size:clamp(14px,1.7vh,18px) !important;line-height:1.3 !important;
  max-height:none !important;min-height:0 !important;
  overflow-y:auto !important;overflow-wrap:anywhere !important;
}
/* A prévia e o EPG mantêm distância mesmo quando flex gap não existe. */
html body #stage #catalogView#catalogView #catalogBody #liveDetail {
  gap:0 !important;
}
html body #stage #catalogView#catalogView #catalogBody #channelPreviewCard {
  margin-bottom:3.5vh !important;
}
html body #stage #catalogView#catalogView #catalogBody:not(.series-inline-mode) #vodDetail {
  gap:0 !important;
}
html body #stage #catalogView#catalogView #catalogBody:not(.series-inline-mode) #detailPoster {
  margin-bottom:2.5vh !important;
}
html body #stage #catalogView#catalogView .live-grid .media-card {
  display:flex !important;display:-webkit-flex !important;
  align-items:center !important;-webkit-align-items:center !important;
  height:100% !important;min-height:0 !important;padding:5px 12px !important;
}
html body #stage #catalogView#catalogView .live-grid .media-art {
  display:flex !important;display:-webkit-flex !important;
  align-items:center !important;-webkit-align-items:center !important;
  justify-content:center !important;-webkit-justify-content:center !important;
  flex:0 0 clamp(36px,6vh,70px) !important;
  -webkit-flex:0 0 clamp(36px,6vh,70px) !important;
  width:clamp(36px,6vh,70px) !important;height:clamp(36px,6vh,70px) !important;
  min-height:0 !important;max-height:none !important;margin:0 12px 0 0 !important;
  padding:6px !important;box-sizing:border-box !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView .live-grid .media-art img {
  /* Respiro simétrico dentro do quadrado de logos em canais. */
  display:block !important;width:78% !important;height:78% !important;
  max-width:78% !important;max-height:78% !important;
  padding:0 !important;margin:auto !important;object-fit:contain !important;
}
html body #stage #catalogView#catalogView .live-grid .media-copy {
  flex:1 1 auto !important;-webkit-flex:1 1 auto !important;
  height:auto !important;min-height:0 !important;display:block !important;text-align:left !important;
}
html body #stage #catalogView#catalogView .live-grid .media-copy strong {
  font-size:clamp(14px,2vh,21px) !important;text-align:left !important;max-height:2.5em !important;
}
html body #stage #catalogView#catalogView:not(.series-focused-layout) #catalogBody #previewBox {
  height:35vh !important;max-height:42% !important;
  flex:0 0 35vh !important;-webkit-flex:0 0 35vh !important;
}
html body #stage #catalogView#catalogView .epg-row {
  grid-template-columns:clamp(59px,6.5vw,95px) minmax(0,1fr) clamp(22px,3.8vw,65px) !important;
  grid-column-gap:7px !important;
  gap:clamp(4px,.6vw,9px) !important;padding:7px 9px !important;
}
html body #stage #catalogView#catalogView .epg-row > span {
  min-width:0 !important;white-space:normal !important;
  overflow:hidden !important;text-overflow:ellipsis !important;
  font-size:clamp(13px,1.6vh,18px) !important;line-height:1.15 !important;
}
html body #stage #catalogView#catalogView .epg-row > small {
  grid-column:3 !important;margin:0 !important;font-size:clamp(10px,1.3vh,14px) !important;
}
/* "Agora" fica fora da área rolável. Assim, programas futuros nunca passam
   atrás do destaque fixo nem aparecem sobre ele durante a navegação da TV. */
html body #stage #catalogView#catalogView #epgBox #epgNow {
  display:block !important;flex:0 0 auto !important;-webkit-flex:0 0 auto !important;
  padding:0 8px 2px !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView #epgBox #epgNow.is-empty {
  display:none !important;
}
html body #stage #catalogView#catalogView #epgBox #epgNow .epg-row {
  display:grid !important;box-sizing:border-box !important;
  grid-template-columns:clamp(59px,6.5vw,95px) minmax(0,1fr) clamp(22px,3.8vw,65px) !important;
  gap:clamp(4px,.6vw,9px) !important;
  min-height:76px !important;margin:0 0 6px !important;padding:7px 9px !important;
  border:2px solid #168bff !important;border-radius:18px !important;
  background:#12385a !important;box-shadow:inset 3px 0 0 #168bff !important;
  position:relative !important;top:auto !important;z-index:auto !important;
}
html body #stage #catalogView#catalogView #epgBox #epgNow .epg-row > span {
  min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;
  font-size:clamp(13px,1.6vh,18px) !important;line-height:1.15 !important;
  text-decoration:underline !important;text-decoration-color:#168bff !important;
}
html body #stage #catalogView#catalogView #epgBox #epgNow .epg-row > small {
  grid-column:3 !important;margin:0 !important;
  font-size:clamp(10px,1.3vh,14px) !important;white-space:nowrap !important;text-align:right !important;
}
html body #stage #catalogView#catalogView #epgBox #epgNow .epg-row:focus,
html body #stage #catalogView#catalogView #epgBox #epgNow .epg-row.ps-tv-focus {
  border:4px solid #32dfff !important;outline:none !important;
}
html body #stage #catalogView#catalogView #epgBox #epgSchedule {
  flex:1 1 0 !important;-webkit-flex:1 1 0 !important;
  height:0 !important;min-height:0 !important;overflow-y:auto !important;
  overflow-x:hidden !important;padding:4px 8px 8px !important;
  box-sizing:border-box !important;
}
html body #stage #catalogView#catalogView #epgBox #epgSchedule .epg-row {
  position:relative !important;top:auto !important;z-index:auto !important;
}

/* SÉRIE ABERTA: temporadas à esquerda; capa e sinopse ACIMA;
   episódios em imagens horizontais ABAIXO, com rolagem independente. */
html body #stage #catalogView#catalogView.series-focused-layout #catalogBody.catalog-body.series-inline-mode {
  position:absolute !important;left:1.25% !important;top:2.8% !important;
  width:97.5% !important;height:94% !important;max-height:94% !important;
  display:grid !important;grid-template-columns:17% minmax(0,1fr) !important;
  grid-gap:1.5% 1.1% !important;
  grid-template-rows:45% minmax(0,1fr) !important;gap:1.5% 1.1% !important;
  padding:0 !important;box-sizing:border-box !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode > .category-panel {
  grid-column:1 !important;grid-row:1 / span 2 !important;
  width:100% !important;max-width:none !important;height:100% !important;
  padding:1.5% 4.5% !important;flex:none !important;-webkit-flex:none !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode > .detail-panel {
  grid-column:2 !important;grid-row:1 !important;
  width:100% !important;max-width:none !important;height:100% !important;
  padding:0 !important;flex:none !important;-webkit-flex:none !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode #catalogSideTitle {
  display:flex !important;display:-webkit-flex !important;
  justify-content:center !important;-webkit-justify-content:center !important;
  align-items:center !important;-webkit-align-items:center !important;
  width:100% !important;min-height:40px !important;
  margin:0 0 10px !important;padding:4px 0 !important;
  text-align:center !important;box-sizing:border-box !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode > .content-panel {
  grid-column:2 !important;grid-row:2 !important;
  width:100% !important;max-width:none !important;height:100% !important;
  padding:1% 1.3% 0 !important;flex:none !important;-webkit-flex:none !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .quick-filters {display:none !important;}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-season-btn {
  height:clamp(48px,7vh,78px) !important;margin-bottom:clamp(6px,1vh,12px) !important;
  padding:0 5% !important;font-size:clamp(13px,1.8vh,20px) !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .vod-detail {
  display:flex !important;display:-webkit-flex !important;
  flex-direction:row !important;-webkit-flex-direction:row !important;
  align-items:flex-start !important;-webkit-align-items:flex-start !important;
  width:100% !important;height:100% !important;min-height:0 !important;
  grid-template-rows:none !important;gap:0 !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .vod-detail #detailPoster {
  flex:0 0 19% !important;-webkit-flex:0 0 19% !important;
  width:19% !important;height:88% !important;min-height:0 !important;max-height:100% !important;
  margin:0 !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode #detailPoster img {
  width:100% !important;height:100% !important;object-fit:contain !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .vod-copy {
  flex:1 1 0 !important;-webkit-flex:1 1 0 !important;width:auto !important;
  margin-left:2.5% !important;
  height:100% !important;min-width:0 !important;min-height:0 !important;
  overflow-y:auto !important;padding:0 !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode #vodName {
  display:block !important;font-size:clamp(23px,3.5vh,40px) !important;
  line-height:1.1 !important;margin:0 0 1vh !important;max-height:2.3em !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode #vodMeta {
  font-size:clamp(11px,1.55vh,17px) !important;margin:0 0 1.2vh !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode #seriesSelectedEpisode {
  display:block !important;font-size:clamp(16px,2.5vh,28px) !important;
  line-height:1.2 !important;margin:0 0 1.5vh !important;
  max-height:2.4em !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode #detailSynopsis {
  display:block !important;font-size:clamp(13px,1.65vh,18px) !important;
  line-height:1.26 !important;max-height:100% !important;height:auto !important;
  overflow-y:auto !important;overflow-wrap:anywhere !important;color:#c3d9ea !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode > .content-panel::before {
  content:none !important;display:none !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episodes-heading {
  display:block !important;flex:0 0 auto !important;-webkit-flex:0 0 auto !important;
  color:#79edff !important;font-size:clamp(17px,2.4vh,25px) !important;
  margin:0 0 1vh !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode #contentWindow#contentWindow.series-episode-grid {
  display:flex !important;display:-webkit-flex !important;
  flex-wrap:nowrap !important;-webkit-flex-wrap:nowrap !important;
  align-content:flex-start !important;-webkit-align-content:flex-start !important;
  flex:1 1 0 !important;-webkit-flex:1 1 0 !important;width:100% !important;
  height:auto !important;max-height:none !important;min-height:0 !important;
  gap:0 !important;padding:0 0 0.3vh !important;
  overflow-y:hidden !important;overflow-x:hidden !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-card {
  display:flex !important;display:-webkit-flex !important;
  flex-direction:column !important;-webkit-flex-direction:column !important;
  flex:0 0 calc(25% - 1vw) !important;-webkit-flex:0 0 calc(25% - 1vw) !important;
  width:calc(25% - 1vw) !important;height:100% !important;min-height:0 !important;
  margin:0 1vw 0 0 !important;padding:0 !important;grid-template-columns:none !important;
  box-sizing:border-box !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-art {
  position:relative !important;display:block !important;
  flex:0 0 67% !important;-webkit-flex:0 0 67% !important;
  width:100% !important;height:67% !important;min-height:0 !important;max-height:67% !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-art img {
  width:100% !important;height:100% !important;object-fit:cover !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-copy {
  flex:1 1 auto !important;-webkit-flex:1 1 auto !important;width:100% !important;
  height:auto !important;min-height:0 !important;padding:clamp(5px,.8vh,10px) 8px !important;
  overflow:hidden !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-copy b {
  font-size:clamp(13px,1.9vh,22px) !important;line-height:1.2 !important;
  max-height:2.45em !important;overflow:hidden !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-copy small {
  font-size:clamp(10px,1.25vh,15px) !important;margin-top:.5vh !important;
}
html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .catalog-item-total {
  display:block !important;position:static !important;flex:0 0 auto !important;
  -webkit-flex:0 0 auto !important;width:100% !important;
  height:clamp(22px,3vh,36px) !important;margin:0 !important;text-align:center !important;
}

@media (max-width:1500px) {
  html body #stage #catalogView#catalogView #contentWindow.poster-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-card {
    flex-basis:calc(33.333% - 1vw) !important;-webkit-flex-basis:calc(33.333% - 1vw) !important;
    width:calc(33.333% - 1vw) !important;
  }
}
@media (max-width:1100px) {
  html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-card {
    flex-basis:calc(50% - 1vw) !important;-webkit-flex-basis:calc(50% - 1vw) !important;
    width:calc(50% - 1vw) !important;
  }
}
@media (max-height:700px) {
  html body #stage #homeView .home-main {top:31% !important;height:38% !important;}
  html body #stage #catalogView#catalogView #contentWindow.poster-grid {grid-auto-rows:27vh !important;}
  html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-card {height:100% !important;}
}
@media (min-width:2500px) and (min-height:1400px) {
  html body #stage #catalogView#catalogView #contentWindow.poster-grid {grid-auto-rows:26vh !important;}
  html body #stage #catalogView#catalogView #catalogBody.series-inline-mode .inline-episode-card {height:100% !important;}
}

/* Fallback para o WebView antigo sem CSS Grid. */
html body.msx-no-grid #stage #catalogView#catalogView #catalogBody.series-inline-mode {
  display:block !important;
}
html body.msx-no-grid #stage #catalogView#catalogView #catalogBody.series-inline-mode > .category-panel {
  position:absolute !important;left:0 !important;top:0 !important;width:17% !important;height:100% !important;
}
html body.msx-no-grid #stage #catalogView#catalogView #catalogBody.series-inline-mode > .detail-panel {
  position:absolute !important;left:18.1% !important;top:0 !important;width:81.9% !important;height:45% !important;
}
html body.msx-no-grid #stage #catalogView#catalogView #catalogBody.series-inline-mode > .content-panel {
  position:absolute !important;left:18.1% !important;top:46.5% !important;width:81.9% !important;height:53.5% !important;
}

/* PLAYLISTS: o shell de 1024px do layout Samsung estourava a altura útil
   e recortava tanto o cabeçalho como a borda inferior no Chrome/MSX FHD. */
html body #stage #accessManagerView.approved-playlist-view .approved-playlist-shell {
  position:absolute !important;
  left:1.25% !important;top:2.8% !important;
  width:97.5% !important;height:94% !important;max-width:none !important;
  max-height:94% !important;min-height:0 !important;
  transform:none !important;-webkit-transform:none !important;
  display:grid !important;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) !important;
  grid-template-rows:auto auto minmax(0,1fr) auto auto !important;
  gap:clamp(9px,1.4vh,18px) !important;
  padding:clamp(12px,1.5vh,24px) clamp(12px,1.5vw,28px) !important;
  box-sizing:border-box !important;overflow-y:auto !important;overflow-x:hidden !important;
}
html body #stage #accessManagerView.approved-playlist-view .approved-playlist-header {
  min-height:0 !important;height:auto !important;padding:0 1% !important;
}
html body #stage #accessManagerView.approved-playlist-view .approved-connected-panel {
  min-height:0 !important;
}
html body #stage #accessManagerView.approved-playlist-view .approved-saved-panel,
html body #stage #accessManagerView.approved-playlist-view .approved-device-panel {
  min-height:0 !important;max-height:100% !important;overflow-y:auto !important;
}
@media (max-height:800px) {
  html body #stage #accessManagerView.approved-playlist-view .approved-playlist-shell {
    grid-template-rows:auto auto minmax(220px,1fr) auto auto !important;
  }
}

/* Login: logo acima do cartão, sem ser comprimida pelo flexbox
   do WebView MSX; foco dos 3 campos é desenhado no contorno do label. */
html body #stage #loginView.ps-restored-login .ps-login-layout {
  display:-webkit-flex !important;display:flex !important;
  -webkit-flex-direction:column !important;flex-direction:column !important;
  -webkit-align-items:center !important;align-items:center !important;
  -webkit-justify-content:center !important;justify-content:center !important;
  overflow:visible !important;
}
html body #stage #loginView.ps-restored-login .ps-login-brand-only {
  position:relative !important;z-index:2 !important;
  -webkit-flex:0 0 auto !important;flex:0 0 auto !important;
  margin-bottom:clamp(14px,2vh,24px) !important;
  overflow:visible !important;
}
html body #stage #loginView.ps-restored-login .ps-login-logo {
  position:relative !important;z-index:2 !important;max-height:100% !important;
}
html body #stage #loginView.ps-restored-login .ps-login-card {
  position:relative !important;z-index:1 !important;
  -webkit-flex-shrink:1 !important;flex-shrink:1 !important;
}
html body #stage #loginView.ps-restored-login .ps-login-field.ps-tv-focus-surface,
html body #stage #loginView.ps-restored-login .ps-login-field:focus-within {
  border:3px solid #35e7ff !important;
  background:#0b486b !important;
  box-shadow:inset 0 0 0 2px rgba(53,231,255,.20) !important;
}