.home {
  min-height: calc(100vh - 181px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 0 90px;
}

.home-copy {
  text-align: center;
  margin-bottom: 42px;
}

.home-copy small {
  color: #ff667d;
  font: 700 11px Manrope;
  letter-spacing: 2px;
}

.home-copy h1 {
  font: 800 clamp(34px, 5vw, 62px) Manrope;
  margin: 12px 0 8px;
  letter-spacing: -2px;
}

.home-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.home-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1420px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .home-options {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
  }
}

.home-card {
  min-height: 260px;
  padding: 30px;
  text-align: left;
  border: 1px solid #292e3c;
  border-radius: 22px;
  color: #fff;
  background: #10141c;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: .25s;
}

.home-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .65;
  background: radial-gradient(circle at 90% 10%, #f2304f33, transparent 48%);
}

.movie-choice::before { background: radial-gradient(circle at 90% 10%, #7b61ff44, transparent 48%); }
.series-choice::before { background: radial-gradient(circle at 90% 10%, #2389ff3b, transparent 48%); }
.home-card:hover { transform: translateY(-7px); border-color: #5d6375; box-shadow: 0 24px 60px #0007; }

.home-icon {
  width: 68px;
  height: 68px;
  border-radius: 19px;
  background: #f2304f;
  display: grid;
  place-items: center;
  font-size: 25px;
  box-shadow: 0 12px 30px #f2304f44;
  position: relative;
}

.movie-choice .home-icon { background: #7055e8; box-shadow: 0 12px 30px #7055e844; }
.series-choice .home-icon { background: #1976d2; box-shadow: 0 12px 30px #1976d244; }
.home-card > span:nth-child(2) { position: relative; }
.home-card b { display: block; font: 800 30px Manrope; letter-spacing: -.5px; }
.home-card small { display: block; color: #a7adbc; font-size: 14px; margin-top: 5px; }
.home-card i { position: absolute; right: 28px; bottom: 28px; font: 400 25px Manrope; font-style: normal; color: #7d8495; }

.section-nav { display: flex; align-items: center; gap: 18px; padding-top: 22px; }
.section-nav strong { font: 700 15px Manrope; color: #dfe2ea; }
.back-home { border: 1px solid #292e3c; background: #11141c; color: #dfe2ea; border-radius: 9px; padding: 9px 13px; cursor: pointer; font: 600 13px "DM Sans"; }
.back-home:hover { border-color: #f2304f; color: #fff; }
.home-error { text-align: center; color: #ff9daf; }
.app-only[hidden] { display: none !important; }

@media (max-width: 780px) {
  .home { padding: 42px 0 65px; }
  .home-options { grid-template-columns: 1fr; gap: 13px; }
  .home-card { min-height: 150px; padding: 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
  .home-icon { grid-row: 1 / 3; width: 58px; height: 58px; }
  .home-card b { font-size: 23px; }
  .home-card i { right: 20px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .home-copy { margin-bottom: 30px; }
  .home-copy h1 { letter-spacing: -1px; }
  .section-nav { padding-top: 16px; }
}

/* Biblioteca de séries */
.grid.series-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.show-card {
  min-height: 310px;
  border: 1px solid #252b38;
  border-radius: 18px;
  background: linear-gradient(155deg, #141925, #0d1017);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: .22s;
}

.show-card:hover,
.show-card:focus {
  transform: translateY(-5px);
  border-color: #525a6f;
  box-shadow: 0 20px 45px #0006;
  outline: none;
}

.show-art {
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 75% 20%, #f2304f55, transparent 38%), linear-gradient(135deg, #25131b, #101725);
  position: relative;
}

.show-art.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, #0d1017dd 100%);
}

.show-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

.show-art span,
.series-poster span {
  font: 800 76px Manrope;
  color: #ffffff13;
  line-height: 1;
}

.show-art b,
.series-poster b {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f2304f;
  display: grid;
  place-items: center;
  font-size: 15px;
  box-shadow: 0 8px 24px #f2304f55;
  z-index: 1;
}

.show-art b {
  opacity: 0;
  transform: translateY(6px) scale(.92);
  transition: opacity .2s ease, transform .2s ease;
}

.show-card:hover .show-art b,
.show-card:focus .show-art b,
.show-card:focus-visible .show-art b {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.show-info { padding: 18px; }
.show-info small,
.series-summary > small,
.season-heading small { color: #ff667d; font: 700 10px Manrope; letter-spacing: 1.5px; }
.show-info h3 { font: 700 20px Manrope; margin: 5px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-info p { color: var(--muted); margin: 0 0 14px; font-size: 12px; }
.show-progress,
.detail-progress { height: 5px; border-radius: 10px; background: #292e3a; overflow: hidden; }
.show-progress i,
.detail-progress i { display: block; height: 100%; background: linear-gradient(90deg, #f2304f, #ff657d); border-radius: inherit; }
.show-info > span { display: block; color: #9299aa; font-size: 11px; margin-top: 7px; }
.show-info > strong { display: block; color: #e5e8ef; font-size: 12px; margin-top: 12px; }
.show-info .completed-label { color: #5ed69a; }
.show-arrow { position: absolute; right: 17px; top: 107px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #151923; border: 1px solid #303647; font-style: normal; }

.series-detail { grid-column: 1 / -1; width: 100%; }
.series-back { border: 0; background: none; color: #abb1c0; padding: 0; margin: 0 0 18px; cursor: pointer; font: 600 13px "DM Sans"; }
.series-back:hover { color: #fff; }
.series-hero { min-height: 270px; display: grid; grid-template-columns: 210px 1fr; gap: 34px; align-items: center; padding: 26px; border: 1px solid #252a38; border-radius: 20px; background: radial-gradient(circle at 85% 0, #f2304f25, transparent 38%), #0e121a; }
.series-poster { width: 100%; aspect-ratio: 4 / 5; max-height: 220px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: radial-gradient(circle at 70% 20%, #f2304f66, transparent 37%), linear-gradient(145deg, #32151e, #111a29); position: relative; box-shadow: 0 18px 40px #0006; }
.series-poster { overflow: hidden; }
.series-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.series-poster:has(img)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #0d101799); }
.series-summary h2 { font: 800 clamp(30px, 4vw, 48px) Manrope; letter-spacing: -1.3px; margin: 6px 0 3px; }
.series-summary > p { color: #a0a7b7; margin: 0 0 14px; }
.series-original-title { color: #777f91 !important; font-size: 12px; }
.series-facts,.series-genres { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 10px; }
.series-facts span,.series-genres span { padding: 5px 8px; border: 1px solid #303645; border-radius: 8px; background: #151a24; color: #d7dbe4; font-size: 10px; }
.series-genres span { border-color: #542b36; background: #24151b; color: #ff8798; }
.series-summary .series-count { margin-bottom: 9px; font-size: 12px; }
.series-summary .series-overview { max-width: 760px; margin-bottom: 17px; color: #c8cdd7; font-size: 12px; line-height: 1.55; }
.detail-progress { max-width: 540px; height: 7px; }
.series-summary > span { display: block; color: #9299aa; font-size: 12px; margin-top: 8px; }
.continue-button { margin-top: 24px; border: 0; border-radius: 11px; background: #f2304f; color: #fff; padding: 13px 18px; font: 700 13px "DM Sans"; cursor: pointer; box-shadow: 0 10px 28px #f2304f33; }
.continue-button:hover { background: #ff405d; }
.series-complete { display: block; margin-top: 22px; color: #5ed69a; }

.season-heading { margin: 34px 0 15px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.season-heading h3 { font: 700 24px Manrope; margin: 4px 0 0; }
.season-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.season-tab { white-space: nowrap; padding: 9px 13px; border-radius: 9px; border: 1px solid #292e3c; color: #aeb4c1; background: #11151e; cursor: pointer; font: 600 12px "DM Sans"; }
.season-tab.active { color: #fff; background: #f2304f; border-color: #f2304f; }
.episode-list { display: flex; flex-direction: column; gap: 8px; }
.missing-notice { margin: -3px 0 14px; padding: 11px 13px; border: 1px solid #5f4b28; border-radius: 10px; background: #241e13; color: #d9bc7b; font-size: 12px; }
.episode-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px 26px; gap: 14px; align-items: center; min-height: 82px; padding: 12px 16px; border: 1px solid #222735; border-radius: 13px; background: #0f131b; cursor: pointer; transition: .18s; }
.episode-row:hover { background: #171c27; border-color: #3b4253; transform: translateX(3px); }
.episode-row.playing { border-color: #f2304f; background: #1d131a; }
.episode-row.watched:not(.playing) { opacity: .72; }
.episode-number { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #1b202c; color: #fff; font: 700 14px Manrope; }
.episode-number.has-thumb { position: relative; overflow: hidden; background: #131722; }
.episode-number.has-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .45; }
.episode-number.has-thumb::after { content: ""; position: absolute; inset: 0; background: #07090f38; }
.episode-number.has-thumb span { position: relative; z-index: 1; text-shadow: 0 1px 5px #000; }
.episode-row.playing .episode-number { background: #f2304f; }
.episode-copy { min-width: 0; }
.episode-copy small { color: #ff7187; font-size: 10px; font-weight: 700; }
.episode-copy strong { display: block; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.episode-copy span { color: #81889a; font-size: 11px; }
.watch-toggle { width: 35px; height: 35px; border-radius: 50%; border: 1px solid #3a4050; background: #171c26; color: #9299aa; cursor: pointer; font-size: 18px; }
.watch-toggle.done { border-color: #287a55; background: #153625; color: #5ed69a; }
.episode-row > i { color: #72798a; font-style: normal; }

@media (max-width: 1050px) {
  .grid.series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .grid.series-grid { grid-template-columns: 1fr; }
  .series-hero { grid-template-columns: 100px 1fr; gap: 18px; padding: 18px; min-height: 190px; }
  .series-poster { max-height: 150px; }
  .series-summary h2 { font-size: 27px; }
  .series-summary > p { margin-bottom: 14px; }
  .continue-button { margin-top: 15px; width: 100%; }
  .season-heading { align-items: flex-start; flex-direction: column; }
  .season-tabs { width: 100%; }
  .episode-row { grid-template-columns: 42px minmax(0, 1fr) 35px; gap: 10px; padding: 10px; }
  .episode-row > i { display: none; }
  .episode-number { width: 40px; height: 40px; }
}

/* Catálogo e detalhes de filmes */
.grid.movie-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 14px;
}

.movie-card { min-width: 0; cursor: pointer; outline: none; }
.movie-card:hover .movie-poster,
.movie-card:focus .movie-poster { transform: translateY(-5px); border-color: #697187; box-shadow: 0 20px 42px #0009; }
.movie-card.playing .movie-poster { border-color: #f2304f; }
.movie-poster { aspect-ratio: 2 / 3; position: relative; overflow: hidden; border: 1px solid #292f3d; border-radius: 14px; background: linear-gradient(145deg,#20151e,#111722); transition: .22s; }
.movie-poster > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.movie-poster-missing { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; background: radial-gradient(circle at 70% 20%,#f2304f30,transparent 38%),linear-gradient(145deg,#1c1119,#101622); }
.movie-poster-missing b { color: #f2304f; font: 800 18px Manrope; letter-spacing: -.5px; }
.movie-poster-missing span { color: #777f91; font-size: 10px; }
.movie-poster > .fav { top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #080a0fc9; backdrop-filter: blur(6px); z-index: 2; }
.movie-version { position: absolute; z-index: 2; left: 8px; top: 8px; padding: 5px 8px; border: 1px solid #ffffff2c; border-radius: 7px; color: #fff; background: #080a0fd9; backdrop-filter: blur(6px); font: 800 9px Manrope; letter-spacing: .4px; text-transform: uppercase; }
.movie-poster > .fav.active { color: #ff526b; }
.movie-play { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; transform: translate(-50%,-42%); display: grid; place-items: center; border-radius: 50%; background: #f2304ee8; color: #fff; opacity: 0; transition: .2s; box-shadow: 0 10px 28px #0009; }
.movie-card:hover .movie-play,
.movie-card:focus .movie-play { opacity: 1; transform: translate(-50%,-50%); }
.movie-copy { padding: 10px 3px 0; }
.movie-copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14px Manrope; }
.movie-copy span { display: block; color: #8d95a6; font-size: 11px; margin-top: 4px; }

.movie-details { width: min(1040px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid #333a4a; border-radius: 22px; color: #fff; background: #090b11; overflow: auto; box-shadow: 0 30px 100px #000d; }
.movie-details::backdrop { background: #020307d9; backdrop-filter: blur(7px); }
.movie-backdrop { min-height: 580px; position: relative; background-color: #0d1119; background-size: cover; background-position: center; }
.movie-backdrop::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,#090b11 92%); pointer-events: none; }
.movie-close { position: absolute; z-index: 4; right: 18px; top: 18px; width: 42px; height: 42px; border: 1px solid #ffffff2c; border-radius: 50%; color: #fff; background: #080a0dc9; cursor: pointer; font-size: 28px; line-height: 1; }
.movie-detail-body { min-height: 580px; position: relative; z-index: 1; display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: end; gap: 32px; padding: 86px 44px 40px; }
.movie-detail-poster { aspect-ratio: 2 / 3; overflow: hidden; display: grid; place-items: center; border-radius: 15px; background: #151a25; box-shadow: 0 18px 50px #000b; }
.movie-detail-poster img { width: 100%; height: 100%; object-fit: cover; }
.movie-detail-poster span { padding: 18px; color: #777f91; font-size: 11px; text-align: center; }
.movie-detail-copy > small { color: #ff657c; font: 700 10px Manrope; letter-spacing: 1.5px; }
.movie-detail-copy h2 { margin: 7px 0 0; font: 800 clamp(34px,5vw,60px) Manrope; line-height: 1.03; letter-spacing: -1.7px; }
.original-title { margin: 7px 0 0; color: #a8afbd; font-style: italic; font-size: 13px; }
.movie-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.movie-facts span { padding: 5px 8px; border-radius: 6px; background: #080a0dbb; border: 1px solid #ffffff20; font-size: 11px; font-weight: 700; }
.movie-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.movie-genres span { color: #c9ced8; font-size: 12px; }
.movie-genres span:not(:last-child)::after { content: " ·"; }
.movie-overview { max-width: 700px; margin: 18px 0 14px; color: #d2d6de; font-size: 14px; line-height: 1.65; }
.movie-credit { margin: 6px 0; color: #aeb5c3; font-size: 12px; line-height: 1.5; }
.movie-credit b { color: #fff; }
.movie-variants { max-width: 700px; margin-top: 22px; padding: 15px; border: 1px solid #292f3d; border-radius: 13px; background: #0a0d14dc; }
.movie-variant-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.movie-variant-heading small { display: block; color: #ff657c; font: 800 9px Manrope; letter-spacing: 1.2px; }
.movie-variant-heading h3 { margin: 3px 0 0; font: 750 15px Manrope; }
.movie-variant-heading > span { color: #858d9d; font-size: 10px; white-space: nowrap; }
.movie-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.movie-variant { min-width: 138px; min-height: 54px; display: grid; gap: 3px; padding: 9px 12px; border: 1px solid #343b4b; border-radius: 10px; color: #fff; background: #151a24; text-align: left; cursor: pointer; }
.movie-variant strong { font: 750 12px Manrope; }
.movie-variant span { color: #8f97a8; font-size: 10px; }
.movie-variant:hover { border-color: #687187; background: #1b212e; }
.movie-variant.active { border-color: #f2304f; background: #35131c; box-shadow: inset 0 0 0 1px #f2304f55; }
.movie-variant.active span { color: #ff9daf; }
.movie-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.movie-actions button,
.movie-actions a { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 9px; border: 1px solid #343b4c; color: #fff; background: #171c27; text-decoration: none; cursor: pointer; font: 700 12px "DM Sans"; }
.movie-actions .movie-watch { border-color: #f2304f; background: #f2304f; }
.movie-actions .movie-detail-fav.active { color: #ff7187; }
.tmdb-credit { margin: 22px 0 0; color: #737b8c; font-size: 9px; }

@media (max-width: 1200px) { .grid.movie-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 950px) { .grid.movie-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 700px) {
  .grid.movie-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px 9px; }
  .movie-detail-body { grid-template-columns: 110px minmax(0,1fr); align-items: start; gap: 17px; padding: 100px 18px 28px; }
  .movie-detail-copy h2 { font-size: 29px; letter-spacing: -.8px; }
  .movie-backdrop,.movie-detail-body { min-height: 520px; }
  .movie-overview,.movie-credit,.movie-actions { grid-column: 1 / -1; }
  .movie-overview { margin-top: 22px; }
  .movie-variants { padding: 12px; }
  .movie-variant-options { display: grid; grid-template-columns: 1fr; }
  .movie-variant { width: 100%; min-width: 0; }
}
@media (max-width: 440px) { .grid.movie-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Player sob demanda, histórico e filtros avançados */
.recent-section { padding: 32px 0 8px; }
.recent-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.recent-heading .heading h2 { margin-bottom: 12px; }
.recent-heading > span { color: #747c8e; font-size: 12px; padding-bottom: 15px; }
#recentList { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 280px); gap: 10px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: thin; }
#recentList .muted { grid-column: 1 / -1; margin: 0; padding: 16px 0; }
.recent { width: 100%; border: 1px solid #252b38; background: #10141c; color: #fff; text-align: left; }
.recent i { color: #ff6178; font-style: normal; font-size: 11px; }

.player-modal { width: min(1120px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 18px; color: #fff; background: #080a0f; overflow: visible; box-shadow: 0 30px 100px #000e; }
.player-modal::backdrop { background: #020307e8; backdrop-filter: blur(8px); }
.player-modal .player-card { position: relative; background: #0c0f16; border: 1px solid #202431; border-radius: 16px; overflow: hidden; }
.player-close { position: absolute; z-index: 8; top: 12px; right: 12px; width: 42px; height: 42px; border: 1px solid #ffffff2c; border-radius: 50%; color: #fff; background: #080a0ddd; cursor: pointer; font-size: 28px; line-height: 1; }
.player-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.quality-badge { padding: 7px 9px; border: 1px solid #ffffff20; border-radius: 8px; color: #ff9daf; background: #35131b; font: 700 10px Manrope; letter-spacing: .8px; white-space: nowrap; }
.speed-select { height: 42px; padding: 0 9px; border: 1px solid #292e3c; border-radius: 10px; color: #dfe2ea; background: #141821; font: 600 13px "DM Sans"; cursor: pointer; }
@media (max-width: 720px) { .now { align-items: flex-start; flex-direction: column; } .player-actions { width: 100%; justify-content: flex-start; } .player-actions .icon-btn { width: 38px; height: 38px; } .speed-select { height: 38px; } }

.advanced-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: -4px 0 22px; padding: 14px; border: 1px solid #242a38; border-radius: 13px; background: #0d1118; }
.advanced-filters label { min-width: 145px; display: flex; flex: 1; flex-direction: column; gap: 6px; color: #8d95a7; font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.advanced-filters select { height: 40px; padding: 0 34px 0 11px; border: 1px solid #303747; border-radius: 9px; outline: none; color: #eef1f6; background: #151a24; font: 600 12px "DM Sans"; cursor: pointer; }
.advanced-filters select:focus { border-color: #f2304f; }
#clearAdvancedFilters { height: 40px; padding: 0 14px; border: 1px solid #393f4e; border-radius: 9px; color: #b8bfcc; background: transparent; cursor: pointer; font: 600 12px "DM Sans"; }
#clearAdvancedFilters:hover { color: #fff; border-color: #6c7384; }

@media (max-width: 780px) {
  .recent-section { padding-top: 22px; }
  .recent-heading > span { display: none; }
  #recentList { grid-auto-columns: minmax(210px, 82vw); }
  .advanced-filters label { min-width: calc(50% - 6px); }
  #clearAdvancedFilters { width: 100%; }
  .player-modal { width: calc(100% - 12px); max-height: calc(100vh - 12px); }
}

/* Capas de séries no mesmo formato dos pôsteres de filmes */
.grid.series-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 14px;
}

.show-card {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.show-card:hover,
.show-card:focus {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

.show-art {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid #292f3d;
  border-radius: 14px;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}

.show-card:hover .show-art,
.show-card:focus .show-art {
  transform: translateY(-5px);
  border-color: #697187;
  box-shadow: 0 20px 42px #0009;
}

.show-art img {
  object-position: center;
}

.show-info {
  padding: 10px 3px 0;
}

.show-info small { display: none; }
.show-info h3 { margin: 0; font-size: 14px; }
.show-info p { margin: 4px 0 9px; font-size: 11px; }
.show-info > span { margin-top: 6px; }
.show-info > strong { margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-arrow { display: none; }

@media (max-width: 1200px) { .grid.series-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 950px) { .grid.series-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid.series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 9px; } }
@media (max-width: 440px) { .grid.series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Carrossel de pôsteres vistos recentemente */
.recent-controls { display: flex; align-items: center; gap: 8px; padding-bottom: 11px; }
.recent-controls > span { color: #747c8e; font-size: 12px; margin-right: 4px; }
.recent-controls button { width: 38px; height: 38px; border: 1px solid #303747; border-radius: 50%; color: #fff; background: #141923; cursor: pointer; font-size: 17px; }
.recent-controls button:hover { border-color: #f2304f; background: #f2304f; }
#recentList { grid-auto-columns: clamp(140px, 13vw, 185px); gap: 14px; scroll-snap-type: x mandatory; }
.recent.recent-poster-card { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; scroll-snap-align: start; overflow: visible; }
.recent.recent-poster-card:hover { background: transparent; }
.recent-poster-art { width: 100%; display: block; position: relative; overflow: hidden; aspect-ratio: 2 / 3; border: 1px solid #292f3d; border-radius: 14px; background: linear-gradient(145deg,#20151e,#111722); transition: transform .22s, border-color .22s, box-shadow .22s; }
.recent-poster-card:hover .recent-poster-art,
.recent-poster-card:focus .recent-poster-art { transform: translateY(-4px); border-color: #697187; box-shadow: 0 18px 38px #0009; }
.recent-poster-art > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.recent-poster-art > em { position: absolute; z-index: 2; left: 8px; top: 8px; padding: 5px 7px; border: 1px solid #ffffff2c; border-radius: 7px; color: #fff; background: #080a0fdb; backdrop-filter: blur(6px); font: 800 9px Manrope; font-style: normal; letter-spacing: .4px; text-transform: uppercase; }
.recent-poster-art > i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #f2304fee; box-shadow: 0 10px 28px #0009; font-style: normal; opacity: 0; transform: translate(-50%,-42%); transition: .2s; }
.recent-poster-card:hover .recent-poster-art > i,
.recent-poster-card:focus .recent-poster-art > i { opacity: 1; transform: translate(-50%,-50%); }
.recent-poster-card > strong { display: block; margin: 9px 2px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 13px Manrope; }
.recent-poster-card > small { display: block; margin: 3px 2px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8d95a6; font-size: 10px; }
.recent-poster-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 15px; background: radial-gradient(circle at 70% 20%,#f2304f30,transparent 38%),linear-gradient(145deg,#1c1119,#101622); }
.recent-poster-fallback .logo { width: 62px; height: 62px; }
.recent-poster-fallback b { max-width: 100%; color: #d9dde6; font-size: 11px; text-align: center; }

@media (max-width: 780px) {
  .recent-controls > span { display: none; }
  #recentList { grid-auto-columns: clamp(135px, 42vw, 165px); }
}
/* Acesso obrigatório por conta PocketBase */
.auth-gate { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background: radial-gradient(circle at 75% 5%,#3d1828 0,transparent 35%),radial-gradient(circle at 10% 90%,#152339 0,transparent 36%),#07090f; }
.auth-card { width: min(100%,430px); padding: 34px; border: 1px solid #292e3b; border-radius: 22px; background: #0e1119ef; box-shadow: 0 28px 90px #000b; backdrop-filter: blur(18px); }
.auth-brand { margin-bottom: 34px; }
.auth-copy small { color: #ff667d; font: 700 10px Manrope; letter-spacing: 1.4px; }
.auth-copy h1 { margin: 7px 0 8px; font: 800 30px Manrope; }
.auth-copy p { margin: 0 0 24px; color: #9299aa; font-size: 13px; line-height: 1.55; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 20px; padding: 4px; border-radius: 11px; background: #080a0f; }
.auth-tabs button { height: 39px; border: 0; border-radius: 8px; color: #8f96a6; background: transparent; cursor: pointer; font: 700 12px "DM Sans"; }
.auth-tabs button.active { color: #fff; background: #242936; }
#authForm { display: grid; gap: 14px; }
#authForm label { display: grid; gap: 7px; color: #aeb4c1; font-size: 11px; font-weight: 700; }
#authForm input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #303644; border-radius: 10px; outline: none; color: #fff; background: #151923; font: 500 14px "DM Sans"; }
#authForm input:focus { border-color: #f2304f; box-shadow: 0 0 0 3px #f2304f18; }
.auth-error { min-height: 18px; margin: -2px 0 0; color: #ff8da0; font-size: 12px; line-height: 1.4; }
.auth-submit { height: 49px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#f2304f,#ba1735); cursor: pointer; font: 800 13px Manrope; box-shadow: 0 12px 28px #f2304f2c; }
.auth-submit:disabled { cursor: wait; opacity: .65; }
.account { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.account span { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #aeb4c1; font-size: 12px; }
.account button { height: 36px; padding: 0 12px; border: 1px solid #343a49; border-radius: 9px; color: #d9dde6; background: #151923; cursor: pointer; font: 700 11px "DM Sans"; }
.account button:hover { border-color: #f2304f; color: #fff; }
@media (max-width: 600px) { .auth-card { padding: 26px 20px; } .account span { display: none; } .account button { padding: 0 10px; } }

/* Experiência mobile dedicada */
.mobile-nav { display: none; }
@media (max-width: 780px), (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  html { scroll-padding-bottom: 88px; -webkit-tap-highlight-color: transparent; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); overscroll-behavior-y: none; }
  button, a, select, input { touch-action: manipulation; }
  .shell { padding: 0 14px; }
  header { height: auto; min-height: 64px; padding: calc(9px + env(safe-area-inset-top)) 0 9px; flex-wrap: wrap; gap: 9px; z-index: 20; }
  header .brand { flex: 1; }
  header .account { margin-left: 0; }
  header .account button { width: 42px; overflow: hidden; color: transparent; position: relative; }
  header .account button::after { content: "↪"; position: absolute; inset: 0; display: grid; place-items: center; color: #d9dde6; font-size: 18px; }
  header .search { order: 5; flex: 1 0 100%; height: 44px; margin: 0; border-radius: 12px; }
  header .top-btn { width: 42px; flex: none; }
  main { min-height: calc(100dvh - 150px); }
  footer { display: none; }
  .mobile-nav { position: fixed; z-index: 40; left: 8px; right: 8px; bottom: 8px; height: calc(62px + env(safe-area-inset-bottom)); padding: 5px 5px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid #303643; border-radius: 17px; background: #0c1017f2; box-shadow: 0 12px 45px #000d; backdrop-filter: blur(20px); }
  .mobile-nav button { min-width: 0; border: 0; border-radius: 12px; color: #798192; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .mobile-nav button span { height: 23px; font-size: 18px; line-height: 23px; }
  .mobile-nav button small { max-width: 100%; overflow: hidden; font: 700 9px "DM Sans"; text-overflow: ellipsis; }
  .mobile-nav button.active { color: #fff; background: #f2304f1c; }
  .mobile-nav button.active span { color: #ff4c68; transform: translateY(-1px); }
  .home { min-height: auto; padding: 30px 0 40px; justify-content: flex-start; }
  .home-copy { margin-bottom: 24px; text-align: left; }
  .home-copy small { font-size: 9px; }
  .home-copy h1 { margin-top: 8px; font-size: clamp(29px,9vw,42px); line-height: 1.04; }
  .home-copy p { font-size: 14px; }
  .home-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .home-card { min-height: 142px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border-radius: 17px; }
  .home-card:hover { transform: none; box-shadow: none; }
  .home-icon { width: 45px; height: 45px; border-radius: 13px; font-size: 18px; }
  .home-card b { font-size: 19px; }
  .home-card small { font-size: 11px; line-height: 1.3; }
  .home-card i { display: none; }
  .section-nav { padding-top: 14px; }
  .back-home { display: none; }
  .section-nav strong { font-size: 18px; }
  .recent-section { padding-top: 18px; }
  .recent-heading { align-items: center; }
  .recent-heading .heading h2 { margin-bottom: 8px; font-size: 20px; }
  .recent-controls button { width: 38px; height: 38px; }
  #recentList { margin-right: -14px; padding-right: 14px; scroll-snap-type: x mandatory; }
  .catalog { padding-top: 20px; }
  .catalog-head .heading h2 { font-size: 22px; }
  .filters { margin-right: -14px; padding-right: 14px; scroll-snap-type: x proximity; }
  .filter { min-height: 42px; padding: 9px 16px; scroll-snap-align: start; }
  .advanced-filters { padding: 11px; gap: 8px; }
  .advanced-filters label { min-width: calc(50% - 4px); }
  .advanced-filters select { width: 100%; height: 44px; }
  .grid.movie-grid,.grid.series-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 9px; }
  .movie-poster,.show-poster { border-radius: 12px; }
  .movie-play,.show-play { opacity: 1; width: 40px; height: 40px; transform: translate(-50%,-50%); }
  .movie-copy strong,.show-copy strong { font-size: 12px; }
  .movie-copy span,.show-copy span { font-size: 10px; }
  .card { min-height: 68px; padding: 10px; }
  .more { width: 100%; min-height: 48px; }
  .movie-details { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .movie-backdrop { min-height: 100dvh; background-position: center top; }
  .movie-detail-body { min-height: 100dvh; padding: calc(80px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
  .movie-close { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 46px; height: 46px; }
  .movie-actions { position: sticky; bottom: 0; z-index: 3; margin: 22px -16px -28px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent,#090b11 20%); }
  .movie-actions button,.movie-actions a { flex: 1; min-height: 48px; }
  .player-modal { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .player-modal .player-card { min-height: 100%; border: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: flex-start; }
  .player-close { top: calc(9px + env(safe-area-inset-top)); right: 9px; width: 40px; height: 40px; }
  .player-modal .screen { margin-top: env(safe-area-inset-top); }
  .now { padding: 14px; gap: 13px; }
  .identity { width: calc(100% - 50px); }
  .identity h2 { max-width: 70vw; font-size: 15px; }
  .player-actions { display: grid; grid-template-columns: auto repeat(2,42px) minmax(70px,1fr) repeat(3,42px); gap: 7px; }
  .player-actions .icon-btn,.speed-select { width: 100%; height: 42px; }
  .quality-badge { grid-column: 1 / -1; justify-self: start; }
  .series-detail { padding-bottom: 20px; }
  .episode-row { min-height: 64px; }
}
@media (max-width: 360px) {
  .home-options { grid-template-columns: 1fr; }
  .home-card { min-height: 108px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
  .player-actions { grid-template-columns: repeat(4,1fr); }
  .quality-badge { grid-column: 1 / -1; }
  .speed-select { grid-column: span 2; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .player-modal .player-card { height: 100dvh; flex-direction: row; }
  .player-modal .screen { width: 72vw; height: 100dvh; margin: 0; aspect-ratio: auto; }
  .player-modal .now { width: 28vw; max-height: 100dvh; overflow-y: auto; padding-top: calc(56px + env(safe-area-inset-top)); }
  .player-modal .identity .logo,.player-modal .identity small { display: none; }
  .player-modal .identity h2 { white-space: normal; }
  .player-modal .player-actions { grid-template-columns: repeat(2,1fr); }
  .player-modal .quality-badge { grid-column: 1 / -1; }
}