/* ──────────────────────────────────────────────────────────────────
   Web app de TV — design system
   Paleta do app Android: #141414 fundo · #1F1F1F superfície · #2D2D2D card
   · #3A3A3A selecionado · #FFF / #B3B3B3 / #6B6B6B texto · accent do painel.

   ESCALA: a tela é um "canvas" de 192 × 108 unidades (16:9). 1rem = 1 unidade.
   Em telas mais largas que 16:9 a altura manda; em mais estreitas, a largura.
   Assim NADA estoura em nenhuma resolução/proporção (720p, 1080p, 4K, 4:3, 21:9).
   ────────────────────────────────────────────────────────────────── */
html { font-size: 0.5208vw; }                               /* 100vw / 192  */
@media (min-aspect-ratio: 16/9) { html { font-size: 0.9259vh; } } /* 100vh / 108 */

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #141414; }
body {
  --accent: #E50914; --accent-dark: #B20710; --accent-soft: rgba(229,9,20,.18);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: #fff; font-size: 2.2rem; line-height: 1.3; cursor: none;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none;
}
.hidden { display: none !important; }
img { max-width: 100%; }

/* ── Fundo ────────────────────────────────────────────────────── */
.bg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #141414 center/cover no-repeat; }
.bg::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(top, rgba(20,20,20,.72), rgba(20,20,20,.9));
  background: linear-gradient(to bottom, rgba(20,20,20,.72), rgba(20,20,20,.9)); }
.screen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.fill { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

/* ── Ícones ───────────────────────────────────────────────────── */
.icw { display: inline-block; width: 2.8rem; height: 2.8rem; vertical-align: middle; -webkit-flex: none; flex: none; }
.icw .ic { width: 100%; height: 100%; display: block; }
.icw.lg { width: 4.4rem; height: 4.4rem; }
.icw.xl { width: 7.2rem; height: 7.2rem; }

/* ── Foco ─────────────────────────────────────────────────────── */
[data-focus] { -webkit-transition: -webkit-transform .12s ease, box-shadow .12s ease, background-color .12s ease; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
[data-focus].focus { box-shadow: 0 0 0 .4rem #fff, 0 0 2.4rem rgba(0,0,0,.6); }

/* ── Botões ───────────────────────────────────────────────────── */
.btn { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  min-height: 7rem; padding: 0 3rem; border-radius: 1.4rem; background: #2D2D2D; color: #fff;
  font-size: 2.3rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; max-width: 100%; overflow: hidden; }
.btn .icw { margin-right: 1.4rem; }
.btn.icon-only { padding: 0; width: 7rem; } .btn.icon-only .icw { margin: 0; }
.btn.focus { background: #3A3A3A; -webkit-transform: scale(1.04); transform: scale(1.04); }
.btn.primary { background: #E50914; background: var(--accent); } .btn.primary.focus { background: #B20710; background: var(--accent-dark); }
.btn.small { min-height: 5.6rem; padding: 0 2.2rem; font-size: 2rem; border-radius: 1.1rem; }
.btn.small .icw { width: 2.4rem; height: 2.4rem; margin-right: 1rem; }
.btn.block { display: -webkit-flex; display: flex; width: 100%; }
.btn.two { -webkit-flex-direction: column; flex-direction: column; padding: 1.4rem 3rem; line-height: 1.2; }
.btn.two .sub { font-size: 1.6rem; font-weight: 500; opacity: .75; margin-top: .3rem; }
.btn.ghost { background: rgba(255,255,255,.08); }
.btn.active { background: #E50914; background: var(--accent); }

/* ── Campos ───────────────────────────────────────────────────── */
.field { background: #1F1F1F; border-radius: 1.4rem; padding: 1.4rem 2.4rem; margin-bottom: 1.8rem; }
.field label { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: .14em; color: #B3B3B3; text-transform: uppercase; margin-bottom: .3rem; }
.field input { width: 100%; background: transparent; border: 0; color: #fff; font-size: 2.8rem; font-family: inherit; }
.field input::-webkit-input-placeholder { color: #6B6B6B; }
.field.focus { background: #2D2D2D; }
.field.editing { box-shadow: 0 0 0 .4rem #E50914; box-shadow: 0 0 0 .4rem var(--accent); }
.search { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: #1F1F1F; border-radius: 1.2rem; padding: 1.1rem 1.8rem; min-height: 5.8rem; }
.search .icw { color: #B3B3B3; margin-right: 1.2rem; }
.search input { -webkit-flex: 1; flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 2.2rem; font-family: inherit; }
.search input::-webkit-input-placeholder { color: #6B6B6B; }
.search.focus { background: #2D2D2D; } .search.editing { box-shadow: 0 0 0 .4rem #E50914; box-shadow: 0 0 0 .4rem var(--accent); }

/* ── Spinner / toast / modal ──────────────────────────────────── */
.spinner { width: 6.4rem; height: 6.4rem; border: .6rem solid rgba(255,255,255,.14); border-top-color: #E50914; border-top-color: var(--accent); border-radius: 50%; -webkit-animation: spin .9s linear infinite; animation: spin .9s linear infinite; }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 6rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0,0,0,.88); border-left: .6rem solid #E50914; border-left: .6rem solid var(--accent); padding: 1.6rem 2.8rem; border-radius: 1rem; font-size: 2.1rem; z-index: 50; max-width: 80%; }
.modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.82); z-index: 40; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.modal .box { background: #1F1F1F; border-radius: 2rem; padding: 4rem 4.6rem; width: 84rem; max-width: 92%; max-height: 90%; overflow: hidden; }
.modal h2 { font-size: 3.2rem; font-weight: 800; margin-bottom: 1.2rem; }
.modal p { color: #B3B3B3; font-size: 2.1rem; margin-bottom: 3rem; white-space: pre-line; max-height: 50rem; overflow: hidden; }
.modal .row { display: -webkit-flex; display: flex; }
.modal .row .btn { -webkit-flex: 1; flex: 1; }

/* ── Barra superior das telas internas ────────────────────────── */
.topbar { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 9rem; padding: 0 4rem; }
.topbar .logo-sm { height: 5rem; max-width: 18rem; margin-right: 2.4rem; }
.topbar h1 { font-size: 3.2rem; font-weight: 800; -webkit-flex: 1; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .right { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.pill { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; height: 4.6rem; padding: 0 1.8rem; border-radius: 2.3rem; background: rgba(255,255,255,.08); color: #ddd; font-size: 1.9rem; white-space: nowrap; }
.pill .icw { width: 2.2rem; height: 2.2rem; margin-right: .9rem; color: #B3B3B3; }
.pill.accent { background: rgba(229,9,20,.18); background: var(--accent-soft); color: #fff; } .pill.accent .icw { color: #E50914; color: var(--accent); }
.pill.ok { background: rgba(28,200,138,.18); } .pill.ok .icw { color: #1cc88a; }
.pill.warn { background: rgba(246,194,62,.18); } .pill.warn .icw { color: #f6c23e; }
.pill.bad { background: rgba(229,9,20,.18); background: var(--accent-soft); } .pill.bad .icw { color: #E50914; color: var(--accent); }
.body { position: absolute; left: 0; right: 0; top: 9rem; bottom: 0; }

/* ── Centro (boot / loading / avisos) ─────────────────────────── */
.center { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; padding: 4rem; }
.logo { max-height: 14rem; max-width: 44rem; }
.boot .logo { margin-bottom: 4rem; }
.msg { color: #B3B3B3; margin-top: 2.6rem; font-size: 2.2rem; }
.loading .steps { margin-top: 4rem; width: 64rem; max-width: 100%; }
.step { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 1.6rem 2.4rem; background: #1F1F1F; border-radius: 1.4rem; margin-bottom: 1.2rem; font-size: 2.3rem; color: #B3B3B3; text-align: left; }
.step .n { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: #2D2D2D; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-right: 1.8rem; font-weight: 800; font-size: 1.9rem; -webkit-flex: none; flex: none; }
.step.active { color: #fff; } .step.active .n { background: #E50914; background: var(--accent); }
.step.done { color: #fff; } .step.done .n { background: #1cc88a; }

/* ── Login (encaixe do app Android: painel esquerdo 40% + formulário à direita) ── */
.login { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.login .photo { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #141414 center/cover no-repeat; }
.login .photo::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.42); }
.login .left { position: absolute; left: 0; top: 0; bottom: 0; width: 77rem; background: rgba(20,20,20,.86); }
.login .left .logo { position: absolute; left: 22rem; top: 31rem; max-width: 36rem; max-height: 17rem; }
.login .perks { position: absolute; left: 22rem; top: 56.5rem; }
.login .perk { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 6.4rem; margin-bottom: 3.4rem; }
.login .perk .tile { width: 6.2rem; height: 6.2rem; border-radius: 1.4rem; background: rgba(229,9,20,.18); background: var(--accent-soft); color: #E50914; color: var(--accent); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-right: 2.6rem; -webkit-flex: none; flex: none; }
.login .perk .tile .icw { width: 3.4rem; height: 3.4rem; }
.login .perk b { display: block; font-size: 2.5rem; font-weight: 700; line-height: 1.15; }
.login .perk span { display: block; font-size: 2.1rem; color: #ddd; }
.login .form { position: absolute; left: 104.6rem; top: 0; width: 59.6rem; }
.login .form h1 { position: absolute; top: 18.4rem; left: 0; font-size: 4.6rem; font-weight: 800; white-space: nowrap; }
.login .form .sub { position: absolute; top: 26.4rem; left: 0; font-size: 2.4rem; color: #ddd; white-space: nowrap; }
.login .err { position: absolute; top: 30.6rem; left: 0; right: 0; background: rgba(229,9,20,.18); background: var(--accent-soft); border-left: .5rem solid #E50914; border-left: .5rem solid var(--accent); color: #ffd3d5; padding: .8rem 1.6rem; border-radius: .8rem; font-size: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login .lf { position: absolute; left: 0; right: 0; height: 10rem; background: rgba(31,31,31,.92); border-radius: 1.6rem; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 2.6rem; margin: 0; }
.login .lf.user { top: 36rem; } .login .lf.pass { top: 48.8rem; }
.login .lf .icw { width: 3.2rem; height: 3.2rem; color: #B3B3B3; margin-right: 2.4rem; }
.login .lf input { -webkit-flex: 1; flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 2.9rem; font-family: inherit; }
.login .lf input::-webkit-input-placeholder { color: #c9c9c9; }
.login .lf label { display: none; position: absolute; left: 2.2rem; top: -1.3rem; padding: 0 .8rem; background: #1F1F1F; color: #E50914; color: var(--accent); font-size: 2rem; font-weight: 600; border-radius: .4rem; }
.login .lf.focus, .login .lf.editing { box-shadow: 0 0 0 .4rem #E50914; box-shadow: 0 0 0 .4rem var(--accent); background: #1F1F1F; }
.login .lf.focus .icw, .login .lf.editing .icw { color: #fff; }
.login .lf.focus label, .login .lf.editing label { display: block; }
.login .lf.focus input::-webkit-input-placeholder, .login .lf.editing input::-webkit-input-placeholder { color: #6B6B6B; }
.login .enter { position: absolute; top: 65rem; left: 0; right: 0; height: 9rem; border-radius: 1.4rem; background: #E50914; background: var(--accent); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 2.8rem; font-weight: 700; letter-spacing: .32em; text-indent: .32em; }
.login .enter.focus { background: #B20710; background: var(--accent-dark); box-shadow: 0 0 0 .4rem #fff; }
.login .trial { position: absolute; top: 76rem; left: 0; right: 0; height: 7rem; border-radius: 1.4rem; background: rgba(255,255,255,.1); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-size: 2.1rem; font-weight: 700; letter-spacing: .08em; }
.login .trial .icw { color: #E50914; color: var(--accent); margin-right: 1.2rem; }
.login .trial.focus { background: rgba(255,255,255,.18); }
.login .geonote { position: absolute; top: 76rem; left: 0; right: 0; color: #f6c23e; font-size: 1.8rem; text-align: center; }
.login .devbox { position: absolute; top: 80rem; left: 0; right: 0; height: 9.6rem; border-radius: 1.4rem; background: rgba(31,31,31,.92); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 2.6rem; }
.login .devbox.has-trial { top: 85rem; }
.login .devbox small { color: #B3B3B3; font-size: 1.7rem; letter-spacing: .2em; margin-right: 2rem; }
.login .devbox b { font-size: 3rem; letter-spacing: .18em; font-weight: 600; -webkit-flex: 1; flex: 1; white-space: nowrap; overflow: hidden; }
.login .devbox .icw { color: #B3B3B3; width: 3rem; height: 3rem; }
.login .devbox.focus .icw { color: #fff; }
.login .exit { position: absolute; right: 2.8rem; top: 2.8rem; width: 8.6rem; height: 8.6rem; border-radius: 50%; background: rgba(255,255,255,.1); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.login .exit .icw { width: 3.6rem; height: 3.6rem; }
.login .exit.focus { background: #E50914; background: var(--accent); }

/* ── Início (encaixe do app Android) ─────────────────────────── */
.home { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.home .logo { position: absolute; left: 50%; top: 8.8rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-height: 9.2rem; max-width: 34rem; }
.home .note { position: absolute; left: 10rem; right: 10rem; top: 23.6rem; text-align: center; font-size: 2.7rem; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .note b { font-weight: 700; color: #fff; margin-right: .8rem; }
.home .cards { position: absolute; left: 13rem; right: 13rem; top: 29.5rem; height: 34.5rem; display: -webkit-flex; display: flex; }
.home.has-note .cards { top: 34.5rem; }
.home .card { -webkit-flex: 1; flex: 1; border-radius: 2.4rem; background: -webkit-linear-gradient(top, rgba(52,52,52,.72), rgba(28,28,28,.82)); background: linear-gradient(to bottom, rgba(52,52,52,.72), rgba(28,28,28,.82)); border: .3rem solid rgba(255,255,255,.06); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.home .card .icw { width: 10rem; height: 10rem; color: #fff; margin-bottom: 3rem; }
.home .card .lbl { font-size: 3.8rem; font-weight: 800; color: #fff; }
.home .card.focus { background: -webkit-linear-gradient(top, rgba(229,9,20,.62), rgba(70,12,14,.72)); background: linear-gradient(to bottom, rgba(229,9,20,.18), rgba(70,12,14,.72)); background: linear-gradient(to bottom, var(--accent-soft), rgba(70,12,14,.72)); border-color: #fff; box-shadow: 0 0 0 .2rem #fff, 0 1.6rem 4rem rgba(0,0,0,.5); }
.home .card.focus .icw, .home .card.focus .lbl { color: #E50914; color: var(--accent); }
.home .actions { position: absolute; left: 0; right: 0; top: 74rem; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.home.has-note .actions { top: 76.6rem; }
.home .act { height: 7.8rem; padding: 0 2.8rem; border-radius: 1.2rem; background: rgba(38,38,38,.9); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 2.6rem; font-weight: 600; color: #fff; white-space: nowrap; }
.home .act .icw { width: 3rem; height: 3rem; color: #E50914; color: var(--accent); margin-right: 1.6rem; }
.home .act.focus { background: #3A3A3A; -webkit-transform: scale(1.04); transform: scale(1.04); }
.home .bar { position: absolute; left: 10rem; right: 10rem; top: 92rem; height: 10rem; border-radius: 1.6rem; background: rgba(31,31,31,.92); display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; }
.home .bar .k { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; border-right: .2rem solid rgba(255,255,255,.12); min-width: 0; }
.home .bar .k:last-child { border-right: 0; }
.home .bar .k .icw { width: 3.6rem; height: 3.6rem; color: #E50914; color: var(--accent); margin-right: 2.4rem; }
.home .bar .k small { display: block; color: #B3B3B3; font-size: 1.8rem; letter-spacing: .18em; font-weight: 600; }
.home .bar .k b { display: block; font-size: 2.8rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .bar .k b.red { color: #E50914; color: var(--accent); } .home .bar .k b.green { color: #2ecc71; } .home .bar .k b.yellow { color: #f6c23e; }
.home .version { position: absolute; right: 3rem; bottom: 2rem; font-size: 1.9rem; color: rgba(179,179,179,.7); }
.banner { position: absolute; right: 4rem; top: 4rem; max-width: 52rem; padding: 1.6rem 2.4rem; border-radius: 1.4rem; font-size: 1.95rem; background: rgba(0,0,0,.72); border-left: .6rem solid #1cc88a; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.banner .icw { color: #1cc88a; } .banner.warn { border-left-color: #f6c23e; } .banner.warn .icw { color: #f6c23e; } .banner.bad { border-left-color: #E50914; border-left-color: var(--accent); } .banner.bad .icw { color: #E50914; color: var(--accent); }
.banner b { display: block; font-size: 2.1rem; margin-bottom: .1rem; }
.popup { position: absolute; right: 4rem; top: 14.6rem; max-width: 52rem; padding: 1.8rem 2.4rem; border-radius: 1.4rem; background: rgba(0,0,0,.8); border-left: .6rem solid #E50914; border-left: .6rem solid var(--accent); font-size: 1.95rem; color: #ddd; display: -webkit-flex; display: flex; }
.popup .icw { color: #E50914; color: var(--accent); margin-top: .3rem; } .popup b { display: block; color: #fff; font-size: 2.2rem; margin-bottom: .4rem; }

/* ── Layout em colunas (Canais / Filmes / Séries) ─────────────── */
.cols { position: absolute; left: 0; right: 0; top: 9rem; bottom: 0; display: -webkit-flex; display: flex; }
.col { height: 100%; position: relative; overflow: hidden; }
.col.cats { width: 36rem; -webkit-flex: none; flex: none; background: rgba(31,31,31,.8); padding: 2rem 0 2rem; }
.col.list { width: 62rem; -webkit-flex: none; flex: none; background: rgba(20,20,20,.6); padding: 2rem 1.6rem; }
.col.view { -webkit-flex: 1; flex: 1; min-width: 0; padding: 2rem 4rem 2rem 3rem; }
.col h3 { font-size: 1.6rem; letter-spacing: .16em; color: #B3B3B3; text-transform: uppercase; padding: 0 2.8rem 1.2rem; }
.scroll { height: 100%; overflow: hidden; }
.scroll.under { height: -webkit-calc(100% - 7.4rem); height: calc(100% - 7.4rem); }
.cat { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 6.2rem; padding: 0 2.8rem; font-size: 2.2rem; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat span { overflow: hidden; text-overflow: ellipsis; }
.cat .icw { width: 2.2rem; height: 2.2rem; margin-right: 1.2rem; color: #6B6B6B; }
.cat.focus { background: #2D2D2D; color: #fff; box-shadow: inset .8rem 0 0 #fff; }
.cat.active { color: #E50914; color: var(--accent); font-weight: 700; } .cat.active .icw { color: #E50914; color: var(--accent); }
.ch { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 7.2rem; padding: .8rem 1.6rem; border-radius: 1.2rem; margin-bottom: .5rem; }
.ch .num { width: 5rem; color: #6B6B6B; font-size: 1.8rem; -webkit-flex: none; flex: none; }
.ch .lg { width: 7.6rem; height: 4.8rem; background: #2D2D2D center/contain no-repeat; border-radius: .8rem; margin-right: 1.6rem; -webkit-flex: none; flex: none; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #6B6B6B; }
.ch .nm { -webkit-flex: 1; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 2.2rem; }
.ch .nm small { display: block; color: #B3B3B3; font-size: 1.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch .fv { color: #E50914; color: var(--accent); margin-left: .8rem; width: 2.2rem; height: 2.2rem; }
.ch.focus { background: #2D2D2D; } .ch.playing { background: rgba(229,9,20,.18); background: var(--accent-soft); } .ch.playing .nm { color: #fff; font-weight: 700; }
/* largura máxima garante que o 16:9 + info caibam na altura em telas ultrawide */
.col.view > * { max-width: 112rem; }
.mini { width: 100%; padding-top: 56.25%; background: #000; border-radius: 1.6rem; position: relative; overflow: hidden; box-shadow: 0 1rem 4rem rgba(0,0,0,.5); }
.mini video, .mini .vslot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.mini video { object-fit: contain; }
.mini .ph { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #6B6B6B; font-size: 2.2rem; text-align: center; padding: 4rem; }
.mini .ph .icw { color: #3A3A3A; }
.mini.focus { box-shadow: 0 0 0 .5rem #fff; }
.now { margin-top: 2.2rem; }
.now h2 { font-size: 3.2rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now .epg { margin-top: 1.2rem; color: #B3B3B3; font-size: 2.1rem; }
.now .epg div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .4rem; }
.now .epg b { color: #fff; } .now .epg .t { color: #6B6B6B; margin-left: .8rem; }
.now .acts { display: -webkit-flex; display: flex; margin-top: 2rem; }
.hint { position: absolute; bottom: 1.6rem; left: 3rem; right: 4rem; color: #6B6B6B; font-size: 1.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { color: #6B6B6B; padding: 4rem 2.6rem; font-size: 2.1rem; text-align: center; }

/* ── Grade de pôsteres ────────────────────────────────────────── */
.gridhead { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 6.4rem; margin-bottom: 1rem; }
.gridhead h2 { font-size: 2.9rem; font-weight: 800; -webkit-flex: 1; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gridhead .search { width: 40rem; -webkit-flex: none; flex: none; }
.grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 1.4rem .6rem 24rem; }
.poster { width: 19.5rem; }
.poster .img { width: 19.5rem; height: 29rem; border-radius: 1.4rem; background: #2D2D2D center/cover no-repeat; position: relative; overflow: hidden; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #3A3A3A; }
.poster .img .rt { position: absolute; right: .8rem; top: .8rem; background: rgba(0,0,0,.78); padding: .3rem .8rem; border-radius: .6rem; font-size: 1.6rem; color: #f6c23e; font-weight: 700; }
.poster .img .fv { position: absolute; left: .8rem; top: .8rem; color: #E50914; color: var(--accent); width: 2.4rem; height: 2.4rem; }
.poster .img .pg { position: absolute; left: 0; right: 0; bottom: 0; height: .7rem; background: rgba(255,255,255,.2); }
.poster .img .pg i { display: block; height: 100%; background: #E50914; background: var(--accent); }
.poster .t { margin-top: .7rem; font-size: 1.8rem; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster.focus .img { box-shadow: 0 0 0 .5rem #fff; -webkit-transform: scale(1.05); transform: scale(1.05); }
.poster.focus .t { color: #fff; }
.poster.focus { box-shadow: none; }

/* ── Ficha (filme / série) ────────────────────────────────────── */
.detail { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #141414 center/cover no-repeat; }
.detail::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(left, rgba(20,20,20,.97) 40%, rgba(20,20,20,.7));
  background: linear-gradient(to right, rgba(20,20,20,.97) 40%, rgba(20,20,20,.7)); }
.detail .in { position: absolute; left: 0; right: 0; top: 9rem; bottom: 0; display: -webkit-flex; display: flex; padding: 1rem 8rem 4rem; }
.detail .pst { width: 34rem; height: 51rem; border-radius: 2rem; background: #2D2D2D center/cover no-repeat; -webkit-flex: none; flex: none; box-shadow: 0 2rem 5rem rgba(0,0,0,.6); }
.detail .pst.sm { width: 28rem; height: 42rem; }
.detail .txt { -webkit-flex: 1; flex: 1; min-width: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.detail h1 { font-size: 4.6rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.2rem; max-height: 10.2rem; overflow: hidden; }
.detail .meta { color: #B3B3B3; font-size: 2.1rem; margin-bottom: 2rem; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.detail .plot { color: #ddd; font-size: 2.2rem; line-height: 1.5; max-height: 16.5rem; overflow: hidden; margin-bottom: 2.4rem; }
.detail .cast { color: #B3B3B3; font-size: 1.9rem; margin-bottom: 2.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail .acts { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2.4rem; }
.seasons { display: -webkit-flex; display: flex; margin-bottom: 1.6rem; overflow: hidden; }
.eps { -webkit-flex: 1; flex: 1; overflow: hidden; min-height: 0; }
.ep { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 1.2rem 1.8rem; border-radius: 1.2rem; margin-bottom: .8rem; background: rgba(31,31,31,.85); }
.ep .n { width: 5.4rem; font-size: 2.4rem; font-weight: 800; color: #B3B3B3; -webkit-flex: none; flex: none; }
.ep .th { width: 15rem; height: 8.4rem; border-radius: .8rem; background: #2D2D2D center/cover no-repeat; margin-right: 1.8rem; -webkit-flex: none; flex: none; }
.ep .i { -webkit-flex: 1; flex: 1; min-width: 0; }
.ep .i b { display: block; font-size: 2.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep .i small { display: block; color: #B3B3B3; font-size: 1.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep .pg { width: 12rem; height: .7rem; background: #2D2D2D; border-radius: .4rem; margin-left: 2rem; overflow: hidden; -webkit-flex: none; flex: none; }
.ep .pg i { display: block; height: 100%; background: #E50914; background: var(--accent); }
.ep.focus { background: #2D2D2D; }
.warnbox { background: rgba(246,194,62,.12); border-left: .6rem solid #f6c23e; padding: 1.6rem 2.2rem; border-radius: 1.2rem; color: #ffe8a8; font-size: 2rem; }
.warnbox b { display: block; color: #f6c23e; margin-bottom: .3rem; }

/* ── Player em tela cheia ─────────────────────────────────────── */
.player-layer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #000; z-index: 30; }
.player-layer video { width: 100%; height: 100%; background: #000; }
.player-layer video.fill { object-fit: fill; } .player-layer video.fit { object-fit: contain; } .player-layer video.zoom { object-fit: cover; }
.osd { position: absolute; left: 0; right: 0; bottom: 0; padding: 6rem 6rem 3.4rem;
  background: -webkit-linear-gradient(top, transparent, rgba(0,0,0,.88)); background: linear-gradient(to bottom, transparent, rgba(0,0,0,.88));
  opacity: 0; -webkit-transition: opacity .25s; transition: opacity .25s; }
.osd.show { opacity: 1; }
.osd h2 { font-size: 3.4rem; font-weight: 800; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; white-space: nowrap; overflow: hidden; }
.osd h2 span { overflow: hidden; text-overflow: ellipsis; }
.osd .sub { color: #B3B3B3; font-size: 2.1rem; margin-top: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osd .bar { height: .9rem; background: rgba(255,255,255,.2); border-radius: .5rem; margin: 2.2rem 0 .9rem; overflow: hidden; }
.osd .bar i { display: block; height: 100%; background: #E50914; background: var(--accent); }
.osd .time { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; color: #B3B3B3; font-size: 1.9rem; }
.osd .ctr { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: 2rem; }
.osd .ctr .btn.small { background: rgba(45,45,45,.92); }
.live-tag { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; background: #E50914; background: var(--accent); font-size: 1.5rem; padding: .3rem 1.1rem; border-radius: .5rem; letter-spacing: .14em; -webkit-flex: none; flex: none; }
.pstate { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(0,0,0,.6); padding: 4rem; }
.pstate .msg { margin-top: 2.6rem; font-size: 2.5rem; color: #ddd; text-align: center; max-width: 110rem; }
.pstate .msg small { display: block; color: #B3B3B3; font-size: 1.9rem; margin-top: .8rem; }
.pstate .row { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; margin-top: 3rem; }
.nextep { position: absolute; right: 6rem; bottom: 16rem; background: rgba(31,31,31,.96); border-radius: 1.6rem; padding: 2.2rem 2.8rem; width: 44rem; box-shadow: 0 1rem 4rem rgba(0,0,0,.6); }
.nextep small { display: block; color: #B3B3B3; font-size: 1.7rem; letter-spacing: .14em; margin-bottom: .9rem; }
.nextep b { display: block; font-size: 2.3rem; margin-bottom: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Páginas simples ──────────────────────────────────────────── */
.page { position: absolute; left: 0; right: 0; top: 9rem; bottom: 0; padding: 1rem 8rem 4rem; overflow: hidden; }
.page .sub { color: #B3B3B3; font-size: 2.2rem; margin-bottom: 3rem; }
.two { display: -webkit-flex; display: flex; }
.two .l { width: 50rem; -webkit-flex: none; flex: none; } .two .r { -webkit-flex: 1; flex: 1; min-width: 0; }
.qr { width: 50rem; height: 50rem; background: #fff center/contain no-repeat; border-radius: 2rem; }
.stepcard { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: rgba(31,31,31,.9); border-radius: 1.4rem; padding: 1.8rem 2.4rem; margin-bottom: 1.4rem; font-size: 2.2rem; }
.stepcard .n { width: 4.8rem; height: 4.8rem; border-radius: 50%; background: #E50914; background: var(--accent); display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-right: 2.2rem; font-weight: 800; -webkit-flex: none; flex: none; }
.row-item { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: rgba(31,31,31,.9); border-radius: 1.4rem; padding: 2rem 2.6rem; margin-bottom: 1.4rem; font-size: 2.4rem; }
.row-item .icw { color: #E50914; color: var(--accent); margin-right: 2.2rem; width: 3.2rem; height: 3.2rem; }
.row-item .i { -webkit-flex: 1; flex: 1; min-width: 0; } .row-item .i small { display: block; color: #B3B3B3; font-size: 1.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-item .val { color: #B3B3B3; font-size: 2.1rem; margin-left: 2rem; white-space: nowrap; }
.row-item.focus { background: #2D2D2D; }
.row-item .chk { color: #1cc88a; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-size: 2rem; }
.row-item .chk .icw { color: #1cc88a; margin: 0; width: 2.4rem; height: 2.4rem; }
.kv { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 3rem; }
.kv .k { width: 38rem; background: rgba(31,31,31,.9); border-radius: 1.4rem; padding: 1.6rem 2.2rem; }
.kv .k small { display: block; color: #B3B3B3; font-size: 1.5rem; letter-spacing: .14em; }
.kv .k b { font-size: 2.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.results h3 { font-size: 1.8rem; letter-spacing: .14em; color: #B3B3B3; margin: 1.6rem 0 .8rem; }
.hrow { display: -webkit-flex; display: flex; overflow: hidden; padding: .8rem .6rem; }
.hrow .poster { -webkit-flex: none; flex: none; }
.hrow .ch { width: 42rem; -webkit-flex: none; flex: none; background: rgba(31,31,31,.9); }

.rt .icw, .rating .icw { width: 1.7rem; height: 1.7rem; margin-right: .4rem; color: #f6c23e; vertical-align: -.2rem; }
.rating { color: #f6c23e; font-weight: 700; }

/* ── Compat Chrome < 84: espaçamentos que eram 'gap' ──────────── */
.modal .row > * { margin-right: 1.6rem; }
.modal .row > *:last-child { margin-right: 0; }
.topbar .right > * { margin-right: 1.6rem; }
.topbar .right > *:last-child { margin-right: 0; }
.home .cards > * { margin-right: 4.4rem; }
.home .cards > *:last-child { margin-right: 0; }
.home .actions > * { margin-right: 2.4rem; }
.home .actions > *:last-child { margin-right: 0; }
.banner > * { margin-right: 1.6rem; }
.banner > *:last-child { margin-right: 0; }
.popup > * { margin-right: 1.6rem; }
.popup > *:last-child { margin-right: 0; }
.mini .ph > * { margin-bottom: 1.6rem; }
.mini .ph > *:last-child { margin-bottom: 0; }
.now .acts > * { margin-right: 1.4rem; }
.now .acts > *:last-child { margin-right: 0; }
/* ── Grade de pôsteres ────────────────────────────────────────── */
.gridhead > * { margin-right: 2rem; }
/* ── Grade de pôsteres ────────────────────────────────────────── */
.gridhead > *:last-child { margin-right: 0; }
.grid > * { margin-right: 2.2rem; margin-bottom: 2.2rem; }
.detail .in > * { margin-right: 5rem; }
.detail .in > *:last-child { margin-right: 0; }
.detail .meta > * { margin-right: 1rem; margin-bottom: 1rem; }
.detail .acts > * { margin-right: 1.6rem; margin-bottom: 1.6rem; }
.seasons > * { margin-right: 1.2rem; }
.seasons > *:last-child { margin-right: 0; }
.osd h2 > * { margin-right: 1.4rem; }
.osd h2 > *:last-child { margin-right: 0; }
.osd .ctr > * { margin-right: 1.4rem; margin-bottom: 1.4rem; }
.pstate .row > * { margin-right: 1.6rem; margin-bottom: 1.6rem; }
.two > * { margin-right: 5rem; }
.two > *:last-child { margin-right: 0; }
.row-item .chk > * { margin-right: .8rem; }
.row-item .chk > *:last-child { margin-right: 0; }
.kv > * { margin-right: 1.6rem; margin-bottom: 1.6rem; }
.hrow > * { margin-right: 1.8rem; }
.hrow > *:last-child { margin-right: 0; }