/* Nimbus TV — 1rem = 1/96 da largura da tela (20px em 1920×1080) */
:root {
  /* ===== Paleta Nimbus (60% preto/grafite · 30% branco e cinzas · 10% acentos) ===== */
  --bg: #000000;
  --bg2: #07080a;
  --surface: #0f1013;
  --surface2: #181a20;
  --surface3: #22252d;
  --line: #2b2e37;
  --text: #f1f3f8;
  --text2: #c3c8d6;
  --muted: #8b91a3;
  --blue: #6aa8ff;
  --gold: #f6b93b;
  --accent: #2dd4bf;
  --accent-ink: #02201d;
  --ring: #f6b93b;
  --danger: #ff5a6a;
  --radius: .7rem;
  --gutter: 3.2rem;
  --topbar-h: 5rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font-family: Outfit, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; -webkit-font-smoothing: antialiased; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 600; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85em; word-break: break-all; }
.ico { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

#app { position: fixed; inset: 0; }
.view { position: absolute; inset: 0; }
.view.with-topbar { padding-top: var(--topbar-h); }
.scroll { position: absolute; inset: 0; overflow: hidden; padding-bottom: 6rem; }
.view.with-topbar > .scroll { top: 0; padding-top: var(--topbar-h); }

/* Foco */
.f { outline: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s; }
.f.focused { box-shadow: 0 0 0 .2rem var(--ring), 0 .6rem 1.6rem rgba(0,0,0,.45); z-index: 2; position: relative; }

/* ---------------- Barra superior ---------------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: .4rem; padding: 0 var(--gutter);
  background: rgb(0,0,0); }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.2rem; background: linear-gradient(to bottom, rgb(0,0,0), transparent); pointer-events: none; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.4rem; letter-spacing: .02em; margin-right: 1.6rem; }
.brand-dot { width: 1rem; height: 1rem; border-radius: 50%; background: conic-gradient(from 200deg, var(--accent), #60a5fa, var(--accent)); box-shadow: 0 0 1rem rgba(45,212,191,.6); display: inline-block; }
.tab { display: flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 99rem; color: var(--muted); font-weight: 500; }
.tab.on { color: var(--text); background: var(--surface2); }
.tab.on .ico { color: var(--accent); }
.tab.focused { background: var(--text); color: var(--bg); box-shadow: none; transform: scale(1.06); }
.tab.focused .ico { color: var(--bg); }
body.playing .topbar { display: none; }

/* ---------------- Botões ---------------- */
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.5rem; border-radius: var(--radius); background: var(--surface2); font-weight: 600; white-space: nowrap; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border: .08rem solid var(--line); }
.btn.small { padding: .5rem 1rem; font-size: .9rem; }
.btn.block { width: 100%; justify-content: center; }
.btn.focused { transform: scale(1.05); background: var(--text); color: var(--bg); }
.btn.primary.focused { background: #5eead4; color: var(--accent-ink); }
.link { color: var(--muted); font-size: .9rem; padding: .3rem .7rem; border-radius: .4rem; }
.link.focused { color: var(--bg); background: var(--text); box-shadow: none; }

/* ---------------- Seções e fileiras ---------------- */
.rows { padding: 0 0 2rem; }
.sec { margin: 1.6rem 0 0; }
.kicker { display: flex; align-items: center; gap: .6rem; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 0 var(--gutter); margin-bottom: .3rem; }
.kicker::before { content: ''; width: 1.6rem; height: .12rem; background: var(--accent); }
.hero-info .kicker, .detail-info .kicker { padding: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--gutter); margin-bottom: .7rem; }
.sec-head h2 { font-size: 1.35rem; }
.row { display: flex; gap: 1rem; overflow: hidden; padding: .5rem var(--gutter) 1rem; scroll-padding: 0 var(--gutter); }

/* ---------------- Cards ---------------- */
.card { flex: none; border-radius: var(--radius); background: var(--surface); overflow: hidden; position: relative; contain: layout style; }
.card.focused { transform: scale(1.06); }
.thumb { position: relative; overflow: hidden; background: var(--surface2); }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1.6rem; color: rgba(255,255,255,.75);
  background: linear-gradient(135deg, hsl(var(--hue) 40% 28%), hsl(calc(var(--hue) + 50) 40% 14%)); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.thumb.loaded img { opacity: 1; }
.thumb.loaded .ph { display: none; }
.thumb.logo img { object-fit: contain; padding: 12%; }
.card.poster { width: var(--pw, 9.6rem); }
.card.poster .thumb { aspect-ratio: 2 / 3; }
.card.wide { width: 17rem; }
.card.wide .thumb { aspect-ratio: 16 / 9; }
.card.channel { width: 13rem; background: var(--surface); }
.card.channel .thumb { aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--surface2), var(--surface)); }
.card.channel .thumb .ph { background: none; }
.card-title { padding: .55rem .7rem .2rem; font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Versões no rodapé do card: DUB · LEG · DUB 4K */
.card-tags { display: flex; flex-wrap: nowrap; overflow: hidden; gap: .3rem; padding: 0 .7rem .65rem; }
.card-tags .tag { flex: none; }
/* Lista virtual: espaçadores ocupam a fileira inteira da grade */
.vspacer { pointer-events: none; }
.grid > .vspacer { grid-column: 1 / -1; }
.card.poster .card-title.with-tags { padding-bottom: .35rem; }
.tag { font-size: .56rem; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: .2rem .38rem; border-radius: .22rem;
  /* Sem borda (borda + canto arredondado em dezenas de cards deixava a rolagem pesada na TV): fundo sólido */
  background: #0f3a38; color: var(--accent); }
.tag.leg { background: #1b2a45; color: #8fbbff; }
.tag.uhd { background: #3d2f10; color: var(--gold); }
.card-sub { padding: 0 .7rem .6rem; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.poster .card-title, .card.wide .card-title:last-child { padding-bottom: .6rem; }
.card .badge { position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.8); color: var(--accent); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .45rem; border-radius: .3rem; }
/* Já assistido: capa esmaecida, selo redondo com ✓ e barra cheia na base (some o esmaecido no foco) */
.card.is-watched .thumb img { filter: grayscale(.9) brightness(.6) contrast(.95); transition: filter .2s; }
.card.is-watched .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), transparent 45%); pointer-events: none; }
.card.is-watched.focused .thumb img { filter: grayscale(.35) brightness(.9); }
.card.is-watched .thumb .ph { filter: grayscale(.9) brightness(.6); }
.card.is-watched.focused .thumb::after { opacity: .4; }
.card.is-watched .card-title { color: var(--muted); }
.card.is-watched.focused .card-title { color: var(--text); }
.watched-mark { position: absolute; left: 50%; top: calc(9.6rem * 1.5 / 2); transform: translate(-50%, -50%); z-index: 1;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(45,212,191,.92); box-shadow: 0 0 0 .3rem rgba(45,212,191,.22), 0 .5rem 1.4rem rgba(0,0,0,.5); transition: all .2s; }
.watched-mark svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.card.is-watched.focused .watched-mark { left: 1.3rem; top: 1.3rem; width: 1.7rem; height: 1.7rem; box-shadow: 0 .3rem .8rem rgba(0,0,0,.5); }
.card.is-watched.focused .watched-mark svg { width: 1rem; height: 1rem; }
.watched-bar { position: absolute; left: 0; right: 0; top: calc(var(--pw, 9.6rem) * 1.5 - .25rem); height: .25rem; z-index: 1; background: var(--accent); }/* Nota no canto superior direito do card */
.rating-badge { position: absolute; top: .45rem; right: .45rem; z-index: 1; display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .45rem; border-radius: .35rem; background: rgba(0,0,0,.85); color: #fff; font-size: .72rem; font-weight: 700;
  box-shadow: 0 .2rem .6rem rgba(0,0,0,.4); backdrop-filter: blur(4px); }
.rating-badge i { font-style: normal; color: var(--ring); }
.rating-badge.imdb i { background: #f5c518; color: #000; padding: 0 .25rem; border-radius: .2rem; font-size: .62rem; font-weight: 800; }
.rating-badge.tmdb i { color: var(--gold); }

/* Barra de sinopse do card focado */
.infobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 2.2rem var(--gutter) 1.4rem; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.98) 55%, rgba(0,0,0,.85) 80%, transparent);
  opacity: 0; transform: translateY(1rem); transition: opacity .2s, transform .2s; }
body.has-infobar .infobar { opacity: 1; transform: none; }
body.playing .infobar, body:has(.modal-layer) .infobar { display: none; }
.ib-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .45rem; }
.ib-title { font-size: 1.3rem; font-weight: 700; }
.ib-rate { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .9rem; }
.ib-rate i { font-style: normal; font-size: .72rem; font-weight: 800; }
.ib-rate.imdb i { background: #f5c518; color: #000; padding: .05rem .3rem; border-radius: .2rem; }
.ib-rate.tmdb i { color: var(--gold); }
.ib-rate.server i { color: var(--ring); }
.ib-meta { color: var(--muted); font-size: .9rem; }
.ib-versions { font-size: .8rem; font-weight: 600; color: var(--accent); border: .06rem solid rgba(45,212,191,.5); padding: .1rem .5rem; border-radius: .3rem; }
.chips.versions { align-items: center; padding-bottom: 0; }
.chips-label { color: var(--muted); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-right: .4rem; }
.ib-plot { margin: 0; max-width: 62rem; color: var(--text2); line-height: 1.45; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.has-infobar .scroll { padding-bottom: 11rem; }

.progress { height: .22rem; background: rgba(255,255,255,.15); }
.progress i { display: block; height: 100%; background: var(--accent); }
.card .progress { position: absolute; left: 0; right: 0; }
.card.poster .progress { top: calc(9.6rem * 1.5 - .22rem); }
.card.wide .progress { top: calc(17rem * 9 / 16 - .22rem); }
.card.cat { width: 11rem; height: 5.2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: .5rem;
  background: linear-gradient(145deg, var(--surface2), var(--surface)); border: .06rem solid var(--line); }
.card-kicker { font-size: .62rem; letter-spacing: .14em; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.card.cat .card-title { padding: .2rem 0 0; font-size: 1rem; white-space: normal; }

/* ---------------- Destaque ---------------- */
.hero { position: relative; height: 37rem; margin-top: calc(var(--topbar-h) * -1); }
.hero-bg, .detail-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; transition: background-image .5s; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.1) 75%), linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
.hero-info { position: absolute; left: var(--gutter); bottom: 2.4rem; width: 40rem; }
.hero-info h1 { font-size: 2.8rem; line-height: 1.1; margin: .3rem 0 .5rem; font-weight: 700; }
.hero-meta { color: var(--muted); font-size: 1rem; }
.hero-plot { color: var(--text2); font-size: 1rem; line-height: 1.45; margin: .7rem 0 0; max-width: 34rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-actions { display: flex; gap: .9rem; margin-top: 1.3rem; overflow: visible; padding: .3rem 0; }
.hero-actions.split { flex-direction: column; align-items: flex-start; gap: .8rem; }
.act-row { display: flex; flex-wrap: wrap; gap: .9rem; overflow: visible; padding: .2rem 0; }
.act-extra .btn { padding: .65rem 1.2rem; font-size: .92rem; }
.hero-dots { position: absolute; right: var(--gutter); bottom: 2.6rem; display: flex; gap: .4rem; }
.hero-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255,255,255,.35); }
.hero-dots i.on { background: var(--accent); width: 1.4rem; border-radius: 1rem; }

/* ---------------- Ao vivo ---------------- */
.live { position: absolute; inset: var(--topbar-h) 0 0; display: grid; grid-template-columns: 17rem 26rem 1fr; gap: 1.2rem; padding: 0 var(--gutter) 1.6rem; }
.col { position: relative; overflow: hidden; }
.col-title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: .6rem .3rem .8rem; font-weight: 600; }
.cats, .chans { padding: 0 .4rem 4rem; }
.cat-item { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: .6rem; color: var(--muted); text-align: left; margin-bottom: .2rem; }
.cat-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-item small { font-size: .75rem; opacity: .7; }
.cat-item.on { color: var(--text); background: var(--surface); box-shadow: inset .2rem 0 0 var(--accent); }
.cat-item.focused { background: var(--text); color: var(--bg); box-shadow: none; }
.chan { width: 100%; height: 3.7rem; display: flex; align-items: center; gap: .8rem; padding: .45rem .8rem; border-radius: .6rem; margin-bottom: .3rem; background: var(--surface); text-align: left; }
.chan-num { width: 2.2rem; color: var(--muted); font-size: .85rem; text-align: right; flex: none; }
.chan .thumb { width: 4.2rem; aspect-ratio: 16 / 10; border-radius: .4rem; flex: none; background: var(--surface2); }
.chan .thumb .ph { font-size: .8rem; }
.chan-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-fav { color: var(--ring); }
/* Qualidades do canal agrupado */
.chan-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.chan-q { display: flex; gap: .25rem; flex-wrap: nowrap; overflow: hidden; }
.chan-q .qtag { flex: none; }
.qtag { font-size: .58rem; font-weight: 800; letter-spacing: .04em; padding: .12rem .32rem; border-radius: .22rem;
  background: #0f3a38; color: var(--accent); }
.qtag.uhd { background: #3d2f10; color: var(--gold); }
.chan.focused .qtag { background: var(--surface3); }
.pv-quality { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; overflow: visible; padding: .1rem 0; }
.chip.small { padding: .4rem .9rem; font-size: .85rem; }
.modal.quality { min-width: 24rem; display: flex; flex-direction: column; gap: 1rem; }
.quality-list { display: flex; flex-direction: column; gap: .5rem; }
.player .modal-layer { z-index: 120; }
.chan.on { box-shadow: inset .2rem 0 0 var(--accent); }
.chan.focused { background: var(--surface2); transform: scale(1.02); }
.preview { display: flex; flex-direction: column; gap: .9rem; padding-top: .6rem; }
.pv-screen { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.pv-msg { position: absolute; inset: auto 0 0; padding: .8rem; font-size: .85rem; color: #ffb3bb; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.pv-msg:empty { display: none; }
.pv-name { font-size: 1.5rem; }
.pv-actions { display: flex; gap: .8rem; overflow: visible; padding: .2rem 0; }
.pv-epg { display: flex; flex-direction: column; gap: .5rem; overflow: hidden; }
.epg-item { display: grid; grid-template-columns: 3.6rem 1fr; gap: .8rem; padding: .6rem .8rem; border-radius: .5rem; background: var(--surface); color: var(--muted); }
.epg-item.now { color: var(--text); background: var(--surface2); }
.epg-time { font-variant-numeric: tabular-nums; font-size: .9rem; }
.epg-title { font-weight: 500; }
.epg-desc { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.pl-bar.thin { height: .2rem; margin: .4rem 0 0; }

/* ---------------- Catálogo ---------------- */
.page-title { font-size: 1.8rem; padding: .6rem var(--gutter) .2rem; }
.chips { display: flex; gap: .6rem; overflow: hidden; padding: .8rem var(--gutter); }
.chip { flex: none; padding: .55rem 1.1rem; border-radius: 99rem; background: var(--surface); color: var(--muted); font-weight: 500; white-space: nowrap; }
.chip.on { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 .08rem var(--accent); }
.chip.focused { background: var(--text); color: var(--bg); transform: scale(1.06); }
.chip.cat-open { border: .06rem dashed var(--line); }
.chip.cat-open.on { border-style: solid; }
.modal.cats { width: 70rem; max-width: 92vw; display: flex; flex-direction: column; gap: 1rem; }
.cat-scroll { position: relative; max-height: 60vh; overflow: hidden; padding: .4rem; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.cat-pick { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-radius: .6rem;
  background: var(--surface2); text-align: left; font-weight: 500; }
.cat-pick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-pick small { color: var(--muted); font-size: .8rem; flex: none; }
.cat-pick.on { box-shadow: inset 0 0 0 .1rem var(--accent); color: var(--accent); }
.cat-pick.focused { background: var(--text); color: var(--bg); }
.cat-pick.focused small { color: var(--bg); }
.grid { --pw: 9.2rem; display: grid; grid-template-columns: repeat(auto-fill, var(--pw)); justify-content: center; gap: 1.6rem 1rem; padding: .8rem var(--gutter) 2rem; }

/* ---------------- Detalhes ---------------- */
.detail-head { position: relative; min-height: 34rem; margin-top: calc(var(--topbar-h) * -1); }
.detail-body { position: relative; display: flex; gap: 2.4rem; padding: 9rem var(--gutter) 2rem; align-items: flex-end; }
.detail-poster { width: 14rem; aspect-ratio: 2 / 3; border-radius: var(--radius); flex: none; box-shadow: 0 1rem 3rem rgba(0,0,0,.5); }
.detail-info { max-width: 50rem; }
.detail-info h1 { font-size: 2.6rem; margin-bottom: .5rem; }
.detail-plot { color: var(--text2); line-height: 1.5; margin: .9rem 0 .4rem; }
.detail-extra { color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.detail-orig { color: var(--muted); font-size: .95rem; margin: -.2rem 0 .4rem; font-style: italic; }
.detail-tagline { color: var(--accent); font-size: .95rem; margin-top: .7rem; font-style: italic; }
.rates { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.rate { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: .4rem; background: var(--surface2); font-weight: 600; font-size: .9rem; }
.rate b { font-weight: 800; font-size: .75rem; letter-spacing: .04em; }
.rate.imdb b { background: #f5c518; color: #000; padding: .05rem .35rem; border-radius: .2rem; }
.rate.tmdb b { color: var(--gold); }
.rate.rt b { color: #fa6b4a; }
.rate.mc b { color: #ffcc34; }
.rate.cert { border: .08rem solid var(--muted); background: transparent; color: var(--muted); }
.card.person { width: 8.4rem; background: transparent; text-align: center; }
.card.person .thumb.face { width: 7rem; height: 7rem; margin: .3rem auto 0; border-radius: 50%; }
.card.person .thumb.face .ph { font-size: 1.4rem; }
.card.person .card-title { white-space: normal; padding: .5rem .2rem .1rem; }
.card.person .card-sub { white-space: normal; padding: 0 .2rem; }
.card.person.focused { background: var(--surface); }
.episodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 0 var(--gutter) 2rem; }
.episode { display: flex; gap: 1rem; background: var(--surface); border-radius: var(--radius); padding: .7rem; }
.episode.focused { background: var(--surface2); transform: scale(1.02); }
.ep-thumb { width: 12rem; aspect-ratio: 16 / 9; border-radius: .5rem; flex: none; }
.ep-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.ep-title { font-weight: 600; }
.ep-plot { color: var(--muted); font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-meta { color: var(--muted); font-size: .78rem; margin-top: auto; }

/* ---------------- Busca ---------------- */
.search { position: absolute; inset: var(--topbar-h) 0 0; display: grid; grid-template-columns: 30rem 1fr; gap: 1rem; padding-left: var(--gutter); }
.search-left { display: flex; flex-direction: column; gap: 1rem; padding-top: .8rem; }
.search-results { position: relative; overflow: hidden; padding-bottom: 4rem; }
.search-results .sec-head, .search-results .row { padding-left: 1rem; }

/* ---------------- Campos e teclado ---------------- */
.field { background: var(--surface); border: .1rem solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; }
.field.active { border-color: var(--accent); background: #10302f; }
.field.focused { box-shadow: 0 0 0 .2rem var(--ring); }
.field-label { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field-input { width: 100%; background: none; border: 0; outline: none; color: var(--text); font: inherit; font-size: 1.15rem; padding: .2rem 0 0; }
.field-input::placeholder { color: #55627f; }
.kbd { display: flex; flex-direction: column; gap: .45rem; }
.kbd-row { display: flex; gap: .45rem; }
.key { flex: 1; min-width: 0; height: 2.8rem; border-radius: .5rem; background: var(--surface2); font-size: 1.1rem; font-weight: 500; }
.key.wide { flex: 1.6; font-size: .9rem; }
.key.space { flex: 3.5; font-size: .9rem; }
.key.accent { background: var(--accent); color: var(--accent-ink); }
.key.focused { background: var(--text); color: var(--bg); transform: scale(1.08); }
.kbd.compact .key { height: 2.4rem; font-size: .95rem; }

/* ---------------- Login ---------------- */
.login-view { padding: 0; }
.login { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 2.4rem; padding: 3rem 4rem; align-items: center;
  background: radial-gradient(60rem 40rem at 10% 0%, rgba(45,212,191,.12), transparent 60%), radial-gradient(50rem 40rem at 100% 100%, rgba(96,165,250,.1), transparent 60%); }
/* Sem painel do QR: formulário grande no centro da tela */
.login.solo { grid-template-columns: 1fr; justify-items: center; }
.login.solo .login-right { width: 46rem; max-width: 100%; }
.login.solo .login-left { position: static; height: auto; display: contents; }
.login.solo .key { height: 3.4rem; font-size: 1.4rem; }
.login.solo .key.wide, .login.solo .key.space { font-size: 1.1rem; }
.login.solo .key.accent { flex: 2; }
.login.solo .logo-big { position: absolute; top: 3rem; left: 4rem; }
.login.solo .version { position: absolute; left: 4rem; bottom: 2.5rem; }
.login-left { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; height: 100%; justify-content: center; position: relative; }
.logo-big { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: .7rem; font-size: 2rem; font-weight: 700; }
.logo-big .brand-dot { width: 1.6rem; height: 1.6rem; }
.logo-big small { font-size: .9rem; color: var(--accent); letter-spacing: .2em; margin-left: .2rem; }
.login-qr { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.login-qr h3, .login-head h3 { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.qr-box { width: 15rem; min-height: 15rem; background: #fff; border-radius: 1rem; padding: .8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #111; }
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-code { font-weight: 700; letter-spacing: .12em; margin-top: .3rem; font-size: .9rem; }
.login-qr.off .qr-box { background: var(--surface); color: var(--muted); text-align: center; padding: 1.5rem; }
.login-qr ol { margin: 0; padding-left: 1.4rem; color: var(--text2); line-height: 1.7; }
.version { position: absolute; bottom: 0; left: 0; color: var(--muted); font-size: .8rem; }
.login-sep { align-self: stretch; display: flex; align-items: center; justify-content: center; position: relative; width: .1rem; background: linear-gradient(transparent, var(--line), transparent); }
.login-sep span { background: var(--bg); padding: .5rem 0; color: var(--muted); font-size: .85rem; position: absolute; }
.login-right { display: flex; flex-direction: column; gap: .9rem; }
.login-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.login-head h3 { margin-right: auto; }
.login-fields { display: flex; flex-direction: column; gap: .7rem; }
.login-error { color: #ff9aa5; min-height: 1.2rem; font-size: .9rem; }
.login-error:empty { min-height: 0; }

/* Segmentado */
.seg { display: inline-flex; gap: .2rem; padding: .25rem; border-radius: 99rem; background: var(--surface); border: .06rem solid var(--line); overflow: visible; }
.seg-opt { padding: .45rem 1.1rem; border-radius: 99rem; color: var(--muted); font-weight: 500; font-size: .92rem; }
.seg-opt.on { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 .08rem var(--accent); }
.seg-opt.focused { background: var(--text); color: var(--bg); }

/* ---------------- Perfil ---------------- */
.profile { width: 46rem; margin: 0 auto; padding-top: 1rem; }
.profile-head { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin-bottom: 1.8rem; }
.avatar { width: 6.5rem; height: 6.5rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, var(--surface2), var(--surface)); border: .1rem solid var(--line); }
.avatar .ico { width: 3rem; height: 3rem; color: var(--accent); }
.profile-head h1 { font-size: 2.2rem; }
.status { padding: .35rem 1rem; border-radius: 99rem; font-size: .9rem; font-weight: 600; }
.status.ok { background: rgba(45,212,191,.15); color: var(--accent); }
.status.bad { background: rgba(244,63,94,.15); color: #ff9aa5; }
.panel { background: var(--surface); border: .06rem solid var(--line); border-radius: 1rem; padding: .4rem 1.4rem; margin-bottom: 1.4rem; }
.panel-title { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 1rem 0 .4rem; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: .85rem 0; border-top: .06rem solid var(--line); }
.panel-title + .kv { border-top: 0; }
.kv-k { color: var(--muted); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.kv-v { font-weight: 600; text-align: right; }
.inline { display: flex; gap: .7rem; align-items: center; overflow: visible; }
.adult-state { color: var(--muted); }
.adult-state.on { color: var(--ring); }
.hint { color: var(--muted); font-size: .8rem; padding: 0 0 .9rem; }
.profile-actions { display: flex; justify-content: center; padding: .6rem 0 3rem; }

/* ---------------- Modais ---------------- */
.modal-layer { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.78); display: grid; place-items: center; }
.modal { background: var(--surface); border: .06rem solid var(--line); border-radius: 1.2rem; padding: 2rem 2.2rem; min-width: 26rem; max-width: 40rem; box-shadow: 0 2rem 5rem rgba(0,0,0,.6); }
.modal-text { font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.6rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .8rem; }
.modal.pin { text-align: center; min-width: 22rem; }
.modal.pin h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.pin-dots { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.4rem; }
.pin-dots span { width: 1rem; height: 1rem; border-radius: 50%; border: .12rem solid var(--muted); }
.pin-dots span.on { background: var(--accent); border-color: var(--accent); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 4.4rem); gap: .6rem; justify-content: center; margin-bottom: 1rem; }
.key.pin { height: 3.4rem; font-size: 1.4rem; }
.modal .hint { padding: 0; }
.modal.prompt { width: 44rem; max-width: 90vw; display: flex; flex-direction: column; gap: .9rem; }
.modal-title { font-size: 1.3rem; }
.modal-hint { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.modal.prompt .field-input { font-family: ui-monospace, Consolas, monospace; font-size: 1rem; }
.modal.trailer { width: 72rem; max-width: 94vw; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.trailer-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: .6rem; background: #000; pointer-events: none; }
.key-state { color: var(--muted); font-size: .9rem; }
.key-state.on { color: var(--accent); }

/* ---------------- Player ---------------- */
.player { position: fixed; inset: 0; z-index: 50; background: #000; }
.pl-stage { position: absolute; inset: 0; background: #000; }
.pl-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.pl-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.75), transparent 25%, transparent 55%, rgba(0,0,0,.85)); }
.player.ui .pl-overlay { opacity: 1; pointer-events: auto; }
.player:not(.ui) { cursor: none; }
.pl-top { display: flex; align-items: center; gap: 1.2rem; padding: 2rem var(--gutter); }
.pl-logo .thumb { width: 6rem; aspect-ratio: 16 / 10; border-radius: .5rem; background: rgba(255,255,255,.08); }
.pl-logo:empty { display: none; }
.pl-title { font-size: 1.8rem; font-weight: 700; }
.pl-sub { color: var(--muted); margin-top: .2rem; }
.player.is-live .pl-sub { color: var(--danger); font-weight: 700; letter-spacing: .12em; font-size: .85rem; }
.pl-clock { margin-left: auto; font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--text2); }
.pl-bottom { padding: 0 var(--gutter) 2.4rem; display: flex; flex-direction: column; gap: 1rem; }
.pl-epg:empty { display: none; }
.epg-now { font-size: 1.15rem; }
.epg-now b { color: var(--accent); font-weight: 600; margin-right: .4rem; }
.epg-next { color: var(--muted); margin-top: .5rem; }
.pl-time { display: flex; align-items: center; gap: 1rem; font-variant-numeric: tabular-nums; color: var(--text2); }
.player.is-live .pl-time { display: none; }
.pl-bar { flex: 1; height: .3rem; border-radius: 1rem; background: rgba(255,255,255,.2); overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.pl-time { position: relative; }
.pl-time.scrub .pl-bar { height: .7rem; box-shadow: 0 0 0 .15rem var(--ring); }
.pl-time.scrub > span:first-child { color: var(--ring); font-weight: 700; }
.pl-scrub-hint { position: absolute; left: 50%; bottom: 130%; transform: translateX(-50%); font-weight: 700; font-size: 1.2rem; color: var(--ring); }
.pl-scrub-hint:empty { display: none; }
.pl-controls { display: flex; gap: .8rem; justify-content: center; overflow: visible; padding: .3rem; }
.pl-btn { min-width: 4.4rem; height: 3.4rem; padding: 0 1.2rem; border-radius: 99rem; background: rgba(255,255,255,.12); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; backdrop-filter: blur(6px); }
.pl-btn .ico { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.pl-btn.wide { gap: .5rem; }
.pl-btn.wide .ico { width: 1.2rem; height: 1.2rem; fill: none; }
.pl-btn.pl-play:not(.paused) .ico path { d: path('M7 4h4v16H7zM13 4h4v16h-4z'); }
.pl-btn.focused { background: var(--text); color: var(--bg); transform: scale(1.08); }
.pl-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(15,16,19,.94); padding: 1.2rem 2rem; border-radius: 1rem; color: #ffb3bb; max-width: 40rem; text-align: center; }
.pl-error:empty { display: none; }
.pl-spin { position: absolute; left: 50%; top: 50%; margin: -2rem 0 0 -2rem; display: none; }
.player.buffering .pl-spin { display: block; }

/* ---------------- Diversos ---------------- */
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; color: var(--muted); }
.spinner { width: 4rem; height: 4rem; border-radius: 50%; border: .3rem solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: 3rem var(--gutter); text-align: center; color: var(--muted); grid-column: 1 / -1; }
.empty-title { font-size: 1.3rem; color: var(--text); margin-bottom: .4rem; }
.toast { position: fixed; left: 50%; bottom: 3rem; transform: translate(-50%, 2rem); opacity: 0; z-index: 200; background: var(--surface2); border: .06rem solid var(--line); padding: .9rem 1.6rem; border-radius: 99rem; transition: all .3s; box-shadow: 0 1rem 2rem rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.back .ico { width: 1rem; height: 1rem; }

/* ---------------- Modo TV: mesmo visual, menos custo de GPU ---------------- */
body.tv * { backdrop-filter: none !important; }
body.tv .f { transition: transform .12s ease-out, background-color .12s; }
body.tv .f.focused { box-shadow: 0 0 0 .2rem var(--ring); }
body.tv .card .badge, body.tv .rating-badge { background: rgba(0,0,0,.92); box-shadow: none; }
body.tv .thumb img { transition: none; }
body.tv .hero-bg, body.tv .detail-bg { transition: none; }
body.tv .watched-mark { box-shadow: 0 0 0 .25rem rgba(45,212,191,.22); transition: none; }
body.tv .modal { box-shadow: none; }
body.tv .toast { box-shadow: none; }
body.tv .pl-btn { background: rgba(24,26,32,.92); }
body.tv .infobar { transition: none; }
/* No WebView da TV, vídeo dentro de moldura arredondada/recortada aparece preto: sem recorte */
body.tv .pv-screen { border-radius: 0; overflow: visible; }

/* ---------------- TV: topo e destaque maiores (leitura de longe) ---------------- */
body.tv { --topbar-h: 6.4rem; }
body.tv .brand { font-size: 2rem; }
body.tv .brand-dot { width: 1.4rem; height: 1.4rem; }
body.tv .tab { padding: .85rem 1.2rem; font-size: 1.3rem; gap: .6rem; }
body.tv .tab .ico { width: 1.6rem; height: 1.6rem; }
body.tv .hero-info { width: 48rem; bottom: 3rem; }
body.tv .hero-info h1 { font-size: 3.8rem; }
body.tv .hero-meta { font-size: 1.3rem; }
body.tv .hero-plot { font-size: 1.25rem; max-width: 42rem; }
body.tv .hero .btn { padding: 1rem 2.1rem; font-size: 1.35rem; }
body.tv .hero .act-extra .btn { padding: .85rem 1.6rem; font-size: 1.2rem; }
body.tv .sec-head h2 { font-size: 1.8rem; }
body.tv .card-title { font-size: 1.05rem; }
body.tv .rating-badge { font-size: .9rem; }

/* Abas centralizadas no topo; a marca fica à esquerda */
.topbar { justify-content: center; gap: .8rem; }
.topbar .brand { position: absolute; left: var(--gutter); margin-right: 0; }

/* TV: tela Ao vivo maior */
body.tv .live { grid-template-columns: 20rem 25rem 1fr; gap: 1.6rem; }
body.tv .col-title { font-size: 1.05rem; }
body.tv .cat-item { font-size: 1.3rem; padding: .95rem 1.2rem; }
body.tv .cat-item small { font-size: 1rem; }
body.tv .chan { height: 4rem; font-size: 1.1rem; gap: .8rem; }
body.tv .chan-num { width: 2.6rem; font-size: .95rem; }
body.tv .chan .thumb { width: 4.6rem; }
body.tv .qtag { font-size: .8rem; }
body.tv .pv-name { font-size: 2.3rem; }
body.tv .pv-actions .btn { font-size: 1rem; padding: .55rem 1.2rem; }
body.tv .chip.small { font-size: 1.1rem; padding: .55rem 1.2rem; }
body.tv .epg-item { font-size: 1.3rem; grid-template-columns: 5.4rem 1fr; padding: .6rem .9rem; }
body.tv .epg-time { font-size: 1.25rem; }
body.tv .epg-desc { font-size: 1.05rem; }
body.tv .pv-epg { gap: .4rem; }

/* Versão do app: canto direito do topo, na mesma altura da marca */
.topbar .topbar-version { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; font-size: 1.1rem; letter-spacing: .04em; }
body.tv .topbar .topbar-version { font-size: 1.35rem; }

/* ================= Estilo "Abyss" — rodada 1: topo em pílula + destaque ================= */
/* Sem backdrop-filter nem bordas arredondadas em massa: fundos sólidos e degradês (leve para a TV) */
.topbar { background: #000000; }
.tabs-pill { display: flex; align-items: center; gap: .3rem; padding: .35rem; border-radius: 99rem; background: var(--surface2); }
.tabs-pill .tab { padding: .7rem 1.7rem; font-size: 1.2rem; font-weight: 500; color: var(--muted); background: none; transform: none; }
.tabs-pill .tab .ico { display: none; }
.tabs-pill .tab.on { background: #eef1f8; color: #000000; }
.tabs-pill .tab.focused { background: #ffffff; color: #000000; transform: none; box-shadow: 0 0 0 .2rem var(--ring); }
body.tv .tabs-pill .tab { padding: .8rem 1.5rem; font-size: 1.3rem; }

.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .9rem; }
.hchip { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: .55rem; background: #0f1013ee; color: #dfe5f3; font-size: 1rem; font-weight: 500; }
.hchip b { font-size: .8em; font-weight: 800; padding: .05rem .35rem; border-radius: .25rem; }
.hchip.imdb b { background: #f5c518; color: #000; }
.hchip.tmdb b { background: #01b4e4; color: #04202a; }
body.tv .hchip { font-size: 1.15rem; }
.hero-plot { color: #cfd6e8; }
/* Botões do destaque: principal branco em pílula, secundário escuro */
.hero .btn { border-radius: 99rem; }
.hero .btn.primary { background: #f4f6fb; color: #000000; }
.hero .btn.primary.focused { background: #fff; color: #000000; }
.hero .btn:not(.primary) { background: var(--surface3); color: #e9edf7; }
.hero .btn.focused { transform: scale(1.05); box-shadow: 0 0 0 .2rem var(--ring); }

/* ================= Banner estilo Apple TV: carrossel com fade, fundo preto ================= */
.hero { height: 41rem; }
.hero-bg { opacity: 0; transition: opacity .8s ease; }
.hero-bg.show { opacity: 1; }
body.tv .hero-bg, body.tv .detail-bg { transition: opacity .8s ease; }
.hero-fade { background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,0) 75%), linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 22%, transparent 55%); }
.hero-info { bottom: 4.4rem; }
.hero-info.fadein { animation: heroIn .7s ease both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
.hero-dots { left: 50%; right: auto; transform: translateX(-50%); bottom: 1.6rem; gap: .55rem; }
.hero-dots i { width: .6rem; height: .6rem; }
.hero-dots i.on { width: 1.8rem; background: #fff; }

/* ================= Psicologia das cores (uso) =================
   Preto/grafite  → cinema e foco, descansa os olhos à noite
   Branco         → ação principal (botões, aba atual): contraste máximo à distância
   Verde-água     → marca Nimbus (nuvem/tecnologia/calma): progresso, "Dublado", ações positivas
   Azul           → informação neutra: "Legendado"
   Âmbar          → atenção e calor: anel de foco, 4K (premium), favoritos, estrelas de nota
   Coral          → alerta: erro, sair, excluir
   Cores de marca de terceiros (IMDb amarelo, TMDB ciano, Rotten laranja) ficam só nos selos */
.kicker { color: var(--accent); }
.rating-badge i, .ib-rate.server i { color: var(--gold); }
.rating-badge.tmdb i { color: var(--gold); }
.hchip.tmdb b, .rate.tmdb b { background: #01b4e4; color: #04202a; padding: .05rem .35rem; border-radius: .2rem; }
.rate.mc b { color: var(--gold); }
.btn.danger { background: var(--danger); color: #1a0508; }
.status.ok { background: rgba(45,212,191,.14); color: var(--accent); }
.status.bad { background: rgba(255,90,106,.14); color: #ff9aa5; }

/* Banner mais compacto: título menor, imagem menos alta, fileiras sobem */
.hero { height: 31rem; }
.hero-info { bottom: 3.2rem; width: 44rem; }
.hero-info h1 { font-size: 2.7rem; margin: .2rem 0 .5rem; }
body.tv .hero-info h1 { font-size: 2.9rem; }
body.tv .hero-info { bottom: 3.2rem; width: 46rem; }
.hero-plot { font-size: 1.05rem; -webkit-line-clamp: 2; max-width: 38rem; }
body.tv .hero-plot { font-size: 1.15rem; max-width: 40rem; }
.hero-chips { margin: .1rem 0 .7rem; }
.hero-dots { bottom: 1.2rem; }

/* Sem brilho/sombra: no preto puro o "glow" vira mancha cinza com degraus (e a sombra escura some). Só anéis e cores sólidas. */
.brand-dot { box-shadow: none; }
.topbar::after { display: none; }
.f.focused, body.tv .f.focused { box-shadow: 0 0 0 .2rem var(--ring); }
.tab.focused, .link.focused, .cat-item.focused { box-shadow: none; }
.tabs-pill .tab.focused, .hero .btn.focused, .field.focused { box-shadow: 0 0 0 .2rem var(--ring); }
.watched-mark, body.tv .watched-mark, .card.is-watched.focused .watched-mark { box-shadow: none; }
.rating-badge { box-shadow: none; }
.detail-poster, .modal, .toast { box-shadow: none; }
.login { background: #000; }

/* ================= Estilo "Abyss" — rodada 2: Continuar assistindo + player ================= */
/* Cards largos: só a imagem é arredondada; barra de progresso branca por cima; título em negrito embaixo */
.card.wide { --ww: 18rem; width: var(--ww); background: none; overflow: visible; contain: none; }
.card.wide .thumb { aspect-ratio: 16 / 9; border-radius: 1rem; }
.card.wide .progress { position: absolute; left: .9rem; right: .9rem; top: calc(var(--ww) * 9 / 16 - 1.1rem); height: .3rem; border-radius: 99rem; background: rgba(255,255,255,.3); overflow: hidden; z-index: 2; }
.card.wide .progress i { background: #fff; border-radius: 99rem; }
.card.wide .card-title { padding: .75rem .2rem .1rem; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.card.wide .card-sub { padding: 0 .2rem .4rem; font-size: .95rem; color: var(--muted); }
.card.wide.focused, body.tv .card.wide.focused { box-shadow: none; transform: scale(1.04); }
.card.wide.focused .thumb { box-shadow: 0 0 0 .2rem var(--ring); }
body.tv .card.wide { --ww: 19rem; }

/* Player: painel de controles escuro e arredondado embaixo (sem desfoque: cor sólida com leve transparência) */
.pl-bottom { margin: 0 var(--gutter) 2.2rem; padding: 1.2rem 1.8rem 1.1rem; border-radius: 1.6rem; background: rgba(12,13,16,.93); gap: .7rem; }
.pl-time { gap: 1.1rem; font-size: 1.05rem; }
.pl-bar { height: .36rem; overflow: visible; position: relative; background: rgba(255,255,255,.24); }
.pl-bar i { position: relative; border-radius: 99rem; background: #fff; }
.pl-bar:not(.thin) i::after { content: ''; position: absolute; right: -.55rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; border-radius: 50%; background: #fff; }
.pl-bar.thin { height: .2rem; background: rgba(255,255,255,.2); }
.pl-controls { justify-content: flex-start; gap: .5rem; padding: .2rem 0; }
.pl-btn { background: none; backdrop-filter: none; height: 3.2rem; min-width: 3.6rem; color: var(--text); }
.pl-btn.wide { background: var(--surface3); }
.pl-btn.pl-play { background: #fff; color: #000; min-width: 4.4rem; }
.pl-btn.focused { background: #fff; color: #000; transform: scale(1.06); box-shadow: 0 0 0 .18rem var(--ring); }
body.tv .pl-btn { font-size: 1.1rem; }
.pl-top { padding: 2rem var(--gutter) 0; }
body.tv .pl-btn { background: none; }
body.tv .pl-btn.wide { background: var(--surface3); }
body.tv .pl-btn.pl-play { background: #fff; color: #000; }
body.tv .pl-btn.focused { background: #fff; color: #000; }

/* ================= Estilo "Abyss" — rodada 3: detalhes de filme e série ================= */
.hchip.rt b { background: #fa6b4a; color: #1a0a05; padding: .05rem .35rem; border-radius: .25rem; }
.hchip.mc b { background: var(--gold); color: #241800; padding: .05rem .35rem; border-radius: .25rem; }
.detail-info .hero-chips { margin: .3rem 0 .8rem; }
.detail-info h1 { font-size: 2.5rem; }
body.tv .detail-info h1 { font-size: 2.7rem; }
.detail-poster { border-radius: 1.1rem; }
.detail-plot { color: var(--text2); max-width: 46rem; }
/* Botões do detalhe iguais aos do destaque: principal branco em pílula, demais escuros */
.detail-info .btn { border-radius: 99rem; }
.detail-info .btn.primary { background: #f4f6fb; color: #000; }
.detail-info .btn.primary.focused { background: #fff; color: #000; }
.detail-info .btn:not(.primary) { background: var(--surface3); color: var(--text); }
.detail-info .btn.focused { background: #fff; color: #000; transform: scale(1.05); box-shadow: 0 0 0 .2rem var(--ring); }
/* Seleção (temporadas, categorias): aba atual em branco, como no menu */
.chip.on { background: #eef1f8; color: #000; box-shadow: none; }
.chip.focused { background: #fff; color: #000; box-shadow: 0 0 0 .2rem var(--ring); transform: none; }
/* Episódios: linhas com miniatura arredondada; a selecionada vira um cartão branco */
.episodes { gap: 1.1rem; }
.episode { background: var(--surface); border-radius: 1.2rem; padding: .8rem; gap: 1.1rem; }
.ep-thumb { width: 14rem; border-radius: .9rem; }
.ep-title { font-weight: 700; font-size: 1.05rem; }
.episode.focused { background: #f1f3f8; color: #000; transform: none; box-shadow: none; }
.episode.focused .ep-plot, .episode.focused .ep-meta { color: #3b3f4c; }
.episode.focused .progress { background: rgba(0,0,0,.18); }
.episode.focused .progress i { background: #000; }
/* Detalhes: imagem de fundo mais escura para o texto ler bem por cima */
.detail-head .hero-fade { background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 48%, rgba(0,0,0,.45) 85%), linear-gradient(0deg, #000 0%, rgba(0,0,0,.5) 30%, transparent 60%); }

/* ================= Estilo "Abyss" — rodada 4: grades, filtros, busca, perfil, ao vivo ================= */
/* Capas: sem caixa de fundo; só a imagem arredondada, título e etiquetas embaixo */
.card.poster { background: none; overflow: visible; }
.card.poster .thumb { border-radius: 1.05rem; }
.card.poster .card-title { padding: .65rem .15rem .15rem; font-weight: 600; }
.card.poster .card-tags { padding: 0 .15rem .5rem; }
.card.poster .card-sub { padding: 0 .15rem .4rem; }
.card.poster.focused, body.tv .card.poster.focused { box-shadow: none; transform: scale(1.045); }
.card.poster.focused .thumb { box-shadow: 0 0 0 .2rem var(--ring); }
/* Cartões de canal e categoria: cantos mais redondos */
.card.channel, .card.cat { border-radius: 1.1rem; }
/* Ao vivo: linhas e categorias arredondadas */
.cat-item, .chan { border-radius: 1rem; }
.chan .thumb { border-radius: .7rem; }
/* Seletores (Perfil): opção atual em branco */
.seg { border: 0; background: var(--surface2); }
.seg-opt.on { background: #eef1f8; color: #000; box-shadow: none; }
.seg-opt.focused { background: #fff; color: #000; box-shadow: 0 0 0 .18rem var(--ring); }
/* Painéis do Perfil e botões pequenos */
.panel { border-radius: 1.3rem; }
.btn.small { border-radius: 99rem; background: var(--surface3); }
.btn.small.focused { background: #fff; color: #000; box-shadow: 0 0 0 .18rem var(--ring); }
/* Busca: campo em pílula e teclas arredondadas */
.field { border-radius: 1.1rem; }
.key { border-radius: .8rem; background: var(--surface3); }
.key.focused { background: #fff; color: #000; }

/* ================= Estilo "Abyss" — rodada 5: janelas/menus de opções e login ================= */
.modal { background: #0f1013; border: 0; border-radius: 1.6rem; padding: 1.7rem 1.9rem; }
.modal-title { font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; }
.modal.quality { min-width: 28rem; }
.quality-list { gap: .35rem; }
/* Lista de opções (qualidade, categorias): linhas largas; a atual leva ✓; a selecionada vira cartão branco */
.cat-pick { border-radius: 1rem; padding: 1rem 1.3rem; font-size: 1.15rem; background: none; }
.cat-pick.on { box-shadow: none; background: var(--surface2); color: var(--accent); }
.cat-pick.on span::after { content: '  \2713'; }
.cat-pick.focused { background: #f1f3f8; color: #000; box-shadow: none; }
.cat-pick.focused small { color: #3b3f4c; }
.modal-actions .btn { border-radius: 99rem; background: var(--surface3); }
.modal-actions .btn.primary { background: #f4f6fb; color: #000; }
.modal-actions .btn.danger { background: var(--danger); color: #1a0508; }
.modal-actions .btn.focused { background: #fff; color: #000; box-shadow: 0 0 0 .2rem var(--ring); }
.pin-pad .key { border-radius: 1rem; }
/* Login */
.field { background: var(--surface2); border: 0; }
.field.active { background: #0f3a38; box-shadow: inset 0 0 0 .12rem var(--accent); }
.field.focused { box-shadow: 0 0 0 .2rem var(--ring); }
.login.solo .login-right { background: var(--surface); border-radius: 2rem; padding: 2rem 2.4rem; }
.login .btn.primary { background: #f4f6fb; color: #000; border-radius: 99rem; }
.login .btn.primary.focused { background: #fff; color: #000; box-shadow: 0 0 0 .2rem var(--ring); }
.logo-big { font-size: 2.4rem; }
.logo-big small { color: var(--accent); }

/* Favoritos vazios no início */
.fav-empty { margin: .2rem var(--gutter) 1.4rem; padding: 1.1rem 1.4rem; border-radius: 1rem; background: var(--surface); color: var(--muted); font-size: 1.05rem; }

.live-dot { display: inline-block; width: .8rem; height: .8rem; margin-right: .7rem; border-radius: 50%; background: var(--danger); vertical-align: middle; position: relative; top: -.12rem; }

/* Player: botões centralizados */
.pl-controls { justify-content: center; }