/* GERADO por tools/build-css.js a partir de ai.src.css. Não edite aqui. */
/* Luma Play · visual novo "com cara de IA" (desenho de 14/10/2026). Telas da TV, PC e web (o celular tem o mobile.css).
   ARQUIVO-FONTE: gere css/ai.css com tools/build-css.js. Mesmas regras do app.src.css para as TVs de 2016 a 2021:
   nada de grid, gap nem inset; espaço entre itens é margem nos filhos; cor hsl/hsla sempre com vírgulas.
   Desfoque (backdrop-filter) e movimento só fora da TV (html.ai-tv desliga). Coordenadas da tela fixa 1920x1080. */
:root { --ai-ink: #0A0E19; --ai-panel: #131A2B; --ai-line: #26304A; --ai-text: #EEF0F7; --ai-soft: #C9CDDC; --ai-mute: #8A92AC; --ai-lume: #FFB547; --ai-lume-ink: #1A1205; --ai-live: #EF4444; }

/* ---------- Luz ambiente (atrás de todas as telas) ---------- */
#ai-amb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
#ai-amb .amb-l { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; opacity: 0; transition: opacity 1.1s ease; }
#ai-amb .amb-l.on { opacity: 1; }
#ai-amb .amb-v { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 50% 40%, rgba(10,14,25,0) 40%, rgba(10,14,25,.55) 100%); }
html.ai:not(.ai-tv) #ai-amb .amb-l { -webkit-animation: aiDrift 22s ease-in-out infinite alternate; animation: aiDrift 22s ease-in-out infinite alternate; }
@-webkit-keyframes aiDrift { to { -webkit-transform: translate(-3%, 2%) scale(1.06); } }
@keyframes aiDrift { to { -webkit-transform: translate(-3%, 2%) scale(1.06); transform: translate(-3%, 2%) scale(1.06); } }
html.ai-tv #ai-amb .amb-l { transition: opacity .35s linear; }
@media (prefers-reduced-motion: reduce) { html.ai #ai-amb .amb-l { -webkit-animation: none; animation: none; } }
html.ai #stage { background: #0A0E19; }

/* Menu lateral recolhido: mais leve, deixa a luz passar */
html.ai:not(.mobile) .tb-pill { background: linear-gradient(90deg, rgba(10,14,25,.94) 0, rgba(10,14,25,.7) 100%); }
html.ai:not(.mobile) #topbar.open .tb-pill { background: rgba(8,11,20,.97); }

/* ---------- Peças comuns ---------- */
.ai-sp { width: 30px; height: 30px; fill: none; stroke: #FFB547; stroke-width: 1.8; stroke-linejoin: round; -webkit-flex: none; flex: none; }
.ai-why { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-align-self: flex-start; align-self: flex-start; height: 44px; padding: 0 20px 0 12px; border-radius: 22px;
  background: rgba(255,181,71,.14); border: 2px solid rgba(255,181,71,.38); font: 700 20px var(--body); color: #EEF0F7; white-space: nowrap; }
.ai-why .ai-sp { width: 22px; height: 22px; margin-right: 10px; }
.ai-why.off { visibility: hidden; }
.ai-btn { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; height: 68px; padding: 0 32px; margin-right: 16px; border-radius: 16px;
  background: rgba(255,255,255,.14); font: 700 24px var(--body); color: #EEF0F7; }
.ai-btn svg { width: 24px; height: 24px; margin-right: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ai-btn.pri { background: #FFB547; color: #1A1205; }
.ai-btn.focused { -webkit-transform: scale(1.04); transform: scale(1.04); }
.ai-pill { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; padding: 5px 14px; border-radius: 999px; font: 800 16px var(--body); letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.14); color: #EEF0F7; white-space: nowrap; }
.ai-pill svg { width: 16px; height: 16px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.ai-pill.on-air { background: #EF4444; color: #fff; }

/* ---------- Início ---------- */
.ai-home { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
/* Banner na altura toda da tela (16:9, 1920x1080, encostado à direita) e desfeito suavemente à esquerda e embaixo: sem
   a borda reta que cortava os rostos sobre as fileiras (Meza 28/10, testado no Chrome dele). Sem imagem larga (.blur),
   a capa vertical aparece inteira, nítida, na altura da tela, encostada à direita, também desfeita nas bordas. */
.ai-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 1920px; background-size: cover; background-position: center top; background-repeat: no-repeat; opacity: .92;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 30%, #000 55%), linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 22%, #000 45%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Sem imagem larga: a capa inteira como cartão grande à direita, levemente inclinado, sobre a luz do fundo (opção B,
   Meza 28/10; antes era uma tira dura). Enquanto a ficha não chega (.wait), o fundo fica vazio, sem piscar. */
.ai-bg.blur { right: 170px; top: 150px; bottom: auto; width: 440px; height: 660px; background-size: cover; background-position: center; border-radius: 26px;
  -webkit-mask-image: none; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.08); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
.ai-bg.wait { opacity: 0; }
html.ai:not(.ai-tv) .ai-bg { transition: opacity .22s ease; }
.ai-bg.soft { opacity: .55; }
.ai-bgs { position: absolute; left: 0; right: 0; bottom: 0; height: 640px; background: linear-gradient(0deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.85) 40%, rgba(10,14,25,0) 100%); pointer-events: none; }
html.ai-tv .ai-bg { -webkit-mask-image: none; }
html.ai-tv .ai-bgs { height: 1080px; background: linear-gradient(90deg, rgba(10,14,25,.95) 0, rgba(10,14,25,.55) 38%, rgba(10,14,25,0) 62%), linear-gradient(0deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.85) 26%, rgba(10,14,25,0) 60%); }

.ai-askz { position: absolute; left: 64px; top: 34px; z-index: 4; }
.ai-ask { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 900px; height: 76px; padding: 0 11px 0 26px; border-radius: 38px; text-align: left;
  background: rgba(19,26,43,.72); border: 2px solid rgba(255,255,255,.16); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.ai-ask .ph { -webkit-flex: 1; flex: 1; margin-left: 16px; font: 600 25px var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-askhint { height: 54px; line-height: 54px; padding: 0 22px; border-radius: 27px; background: rgba(255,255,255,.08); font: 600 19px var(--body); color: #C9CDDC; white-space: nowrap; }
.ai-ask.focused { border-color: #FFB547; }
.ai-ask.focused .ai-askhint { background: #FFB547; color: #1A1205; }
@supports (backdrop-filter: blur(2px)) {
  html.ai:not(.ai-tv) .ai-ask, html.ai:not(.ai-tv) .ai-qbar, html.ai:not(.ai-tv) .ai-glass { background: rgba(19,26,43,.5); backdrop-filter: blur(22px) saturate(1.4); }
  html.ai:not(.ai-tv) .ai-btn:not(.pri) { backdrop-filter: blur(12px); }
}

.ai-info { position: absolute; left: 64px; top: 170px; width: 900px; z-index: 3; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
/* Título do destaque: uma linha que diminui em degraus (fitTitle no ai.js); muito comprido, duas linhas menores.
   Nunca passa de duas linhas, então o bloco de cima não invade as fileiras. */
.ai-info h1 { margin: 16px 0 0; padding-bottom: 4px; font: 800 88px/1.06 var(--display); letter-spacing: -3px; max-width: 900px; overflow: hidden; white-space: nowrap; }
.ai-info h1.t-md { font-size: 74px; letter-spacing: -2.5px; }
.ai-info h1.t-sm { font-size: 62px; letter-spacing: -2px; }
.ai-info h1.t-xs { font-size: 54px; letter-spacing: -1.5px; }
.ai-info h1.t-wrap { font-size: 52px; line-height: 1.08; letter-spacing: -1.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.3em; }
.ai-home.rowmode .ai-info { top: 132px; }
.ai-home.rowmode .ai-info h1 { margin-top: 12px; font-size: 72px; letter-spacing: -2.5px; }
.ai-home.rowmode .ai-info h1.t-md { font-size: 62px; }
.ai-home.rowmode .ai-info h1.t-sm { font-size: 54px; letter-spacing: -2px; }
.ai-home.rowmode .ai-info h1.t-xs { font-size: 48px; letter-spacing: -1.5px; }
.ai-home.rowmode .ai-info h1.t-wrap { font-size: 44px; letter-spacing: -1px; }
.ai-home.rowmode .ai-meta { margin-top: 12px; }
.ai-home.rowmode .ai-plot { margin-top: 8px; -webkit-line-clamp: 1; min-height: 33px; max-height: 33px; }
.ai-home.rowmode .ai-acts { margin-top: 14px; }
.ai-meta { margin: 16px 0 0; font: 500 21px var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; }
.ai-meta span { margin-right: 20px; }
.ai-meta .rk { color: #FFB547; font-weight: 800; }
.ai-meta .st { color: #FFB547; font-weight: 700; }
.ai-plot { margin: 12px 0 0; max-width: 760px; font: 500 22px/1.5 var(--body); color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 66px; max-height: 3em; }
.ai-prog { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 8px; font: 500 19px var(--body); color: #8A92AC; min-height: 10px; }
.ai-prog .ai-hbar { width: 300px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); margin-right: 14px; overflow: hidden; }
.ai-prog .ai-hbar i { display: block; height: 100%; background: #FFB547; }
.ai-acts { margin-top: 20px; display: -webkit-flex; display: flex; }

/* Fileiras: uma janela de recorte (ai-rv) que mostra só fileiras inteiras. Cada fileira tem 296px.
   No destaque aparece a primeira inteira; com o foco nas fileiras, a janela sobe e mostra duas inteiras (a atual em
   cima e a de baixo), a terceira fica fora. Nada é cortado pela metade e nada some: a de cima sai pela borda. */
.ai-rv { position: absolute; left: 22px; right: 0; top: 696px; height: 296px; overflow: hidden; z-index: 3; }
.ai-home.rowmode .ai-rv { top: 482px; height: 592px; }
.ai-rows { position: relative; margin-left: 30px; transition: -webkit-transform .35s ease; transition: transform .35s ease; transition: transform .35s ease, -webkit-transform .35s ease; }
html.ai-tv .ai-rows { transition: none; }
.ai-row { height: 296px; overflow: hidden; transition: opacity .3s; }
.ai-row.dim { opacity: .55; }
.ai-row h2 { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 36px; margin: 0 0 4px 12px; font: 800 28px var(--display); white-space: nowrap; overflow: hidden; }
.ai-row h2 small { margin-left: 16px; font: 500 19px var(--body); color: #8A92AC; }
.ai-tag { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; margin-right: 16px; padding: 5px 14px 5px 9px; border-radius: 999px; background: rgba(255,181,71,.12);
  font: 800 16px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #FFB547; }
.ai-tag .ai-sp { width: 19px; height: 19px; margin-right: 7px; }
.ai-items { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; overflow: hidden; padding: 14px 40px 18px 12px; white-space: nowrap; }
/* Início: 30px de folga à esquerda para o anel âmbar do cartão em foco (a margem negativa mantém o alinhamento com o
   título da fileira) e um espaço no fim, para o cartão em foco sempre parar na margem (nenhum cartão cortado). */
.ai-rows .ai-items { height: 256px; box-sizing: border-box; margin-left: -18px; padding: 14px 40px 17px 30px; }
.ai-rows .ai-items:after { content: ""; display: block; -webkit-flex: none; flex: none; width: 1800px; height: 1px; }

/* Cartões */
.ai-c { -webkit-flex: none; flex: none; margin-right: 18px; border-radius: 15px; }
.ai-art { position: relative; overflow: hidden; border-radius: 15px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1B2338; }
.ai-pst .ai-art { width: 150px; height: 225px; }
.ai-wide .ai-art { width: 320px; height: 180px; background-position: center 22%; }
.ai-wide .ai-art:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(0deg, rgba(5,7,13,.9) 0, rgba(5,7,13,0) 60%), linear-gradient(180deg, rgba(5,7,13,.6) 0, rgba(5,7,13,0) 35%); }
.ai-pt { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; font: 800 21px/1.06 var(--display); white-space: normal; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.ai-wide .ai-pt, .ai-wt { left: 18px; right: 18px; bottom: 22px; font-size: 25px; }
.ai-wt { position: absolute; z-index: 2; font: 800 25px/1.06 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ep { position: absolute; left: 18px; top: 14px; z-index: 2; font: 600 18px var(--body); color: #C9CDDC; }
.ai-pb { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.2); z-index: 2; }
.ai-pb i { display: block; height: 100%; background: #FFB547; }
.ai-dur { position: absolute; right: 9px; top: 9px; z-index: 2; padding: 3px 9px; border-radius: 7px; background: rgba(5,7,13,.78); font: 500 16px "JetBrains Mono", monospace; }
.ai-topc { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-flex: none; flex: none; margin-right: 26px; border-radius: 15px; }
/* Top 10: cada número numa caixa fixa de 124px, alinhado à direita e encostado na capa, sem ficar atrás dela
   (o 1, fino, aparece inteiro; o 10 é menor para caber na mesma caixa). */
.ai-num { position: relative; width: 124px; -webkit-flex: none; flex: none; box-sizing: border-box; margin-right: 16px; padding-right: 2px; overflow: visible; text-align: right; font: 800 186px/.78 var(--display); letter-spacing: -4px; color: #0A0E19; -webkit-text-stroke: 3px #8A92AC; }
.ai-num.two { font-size: 118px; letter-spacing: -6px; }
.ai-topc .ai-art { width: 150px; height: 225px; z-index: 1; }
.ai-topc.focused { box-shadow: none !important; }
.ai-topc.focused .ai-art { box-shadow: 0 0 0 4px #FFB547, 0 0 0 10px rgba(255,181,71,.2), 0 18px 40px rgba(0,0,0,.45); }
.ai-topc.focused .ai-num { -webkit-text-stroke-color: #FFB547; }

.ai-game { -webkit-flex: none; flex: none; width: 450px; height: 203px; margin-right: 18px; padding: 20px 24px; border-radius: 18px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between;
  background: linear-gradient(120deg, hsl(355,62%,28%), hsl(230,45%,17%)); border: 2px solid rgba(255,255,255,.1); white-space: nowrap; }
.ai-rows .ai-game { width: 400px; height: 180px; padding: 16px 22px; box-sizing: border-box; }
.ai-game.is-live { background: linear-gradient(120deg, hsl(355,72%,32%), hsl(10,55%,16%)); }
.ag-top { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; font: 500 18px var(--body); color: #C9CDDC; }
.ag-top > span:first-child { overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
/* Um time por linha: nomes longos (Bayern de Munique, Borussia Dortmund) cabem sem cortar. */
.ag-tm { font: 800 24px/1.1 var(--display); }
.ag-tm > span { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 3px 0; }
.ag-tm b { -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ag-tm em { margin-left: 12px; font: 800 24px "JetBrains Mono", monospace; font-style: normal; }
.ag-tm .crest { width: 34px; height: 34px; -webkit-flex: none; flex: none; margin: 0 12px 0 0; border-radius: 50%; background-size: 80%; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,.1); }
.ag-tm .crest.txt { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 15px var(--body); }
.ag-ch { font: 500 18px var(--body); color: #C9CDDC; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pedido ---------- */
.ai-askp { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-qbar { position: absolute; left: 64px; top: 34px; width: 1180px; height: 88px; z-index: 4; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0 30px; border-radius: 44px;
  background: rgba(19,26,43,.8); border: 2px solid rgba(255,181,71,.55); box-shadow: 0 0 0 8px rgba(255,181,71,.08), 0 14px 40px rgba(0,0,0,.35); }
.ai-qbar .ai-sp { width: 34px; height: 34px; margin-right: 18px; }
.ai-qtxt { font: 600 30px var(--body); white-space: nowrap; overflow: hidden; }
.ai-qtxt .muted { color: #8A92AC; }
.ai-qtxt .ai-ph { margin-left: 10px; font-style: italic; font-weight: 500; opacity: .85; } /* dica apagada depois do cursor (busca vazia) */
.ai-caret { display: inline-block; width: 3px; height: 34px; margin-left: 4px; vertical-align: -6px; background: #FFB547; }
html.ai:not(.ai-tv) .ai-caret { -webkit-animation: aiBlink 1s steps(1) infinite; animation: aiBlink 1s steps(1) infinite; }
@-webkit-keyframes aiBlink { 50% { opacity: 0; } }
@keyframes aiBlink { 50% { opacity: 0; } }
.ai-qkb { position: absolute; left: 64px; top: 160px; width: 560px; z-index: 3; }
.ai-qkb .kb { width: 560px; }
.ai-ex { margin-top: 26px; white-space: normal; }
.ai-ex p { margin: 0 0 12px; font: 700 17px var(--body); letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.ai-chipb { display: inline-block; margin: 0 10px 12px 0; padding: 10px 20px; border-radius: 999px; border: 2px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); font: 600 19px var(--body); color: #C9CDDC; }
.ai-chipb.focused { background: #FFB547; color: #1A1205; border-color: #FFB547; }
.ai-qout { position: absolute; left: 676px; top: 156px; right: 40px; bottom: 0; z-index: 3; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.ai-und { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; padding: 6px 0 0 6px; font: 500 20px var(--body); }
.ai-und > * { margin: 0 10px 10px 0; }
.ai-chip { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; padding: 8px 12px 8px 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.14); font: 600 20px var(--body); color: #EEF0F7; }
.ai-chip svg { width: 18px; height: 18px; margin-left: 8px; fill: none; stroke: #8A92AC; stroke-width: 2.4; stroke-linecap: round; }
.ai-chip.fixed { padding-right: 18px; }
.ai-chip.team { background: rgba(255,181,71,.16); border-color: rgba(255,181,71,.5); padding-right: 18px; }
.ai-chip.team svg { margin: 0 8px 0 0; stroke: #FFB547; }
.ai-chip.focused { background: #FFB547; color: #1A1205; border-color: #FFB547; }
.ai-chip.focused svg { stroke: #1A1205; }
.ai-say { margin: 10px 0 0; max-width: 1060px; font: 700 42px/1.16 var(--display); letter-spacing: -.5px; }
.ai-say .hl { color: #FFB547; }
.ai-note { margin: 8px 0 0; font: 500 19px var(--body); color: #8A92AC; }
.ai-res { position: relative; -webkit-flex: 1; flex: 1; min-height: 0; margin-top: 18px; overflow: hidden; padding: 12px 0 0 12px; white-space: normal; }
.ai-res > * { display: inline-block; vertical-align: top; margin: 0 24px 28px 0; }
.ai-res .ai-pst .ai-art { width: 186px; height: 279px; }
.ai-below { width: 186px; padding-top: 10px; }
.ai-below b { display: block; font: 700 20px/1.2 var(--body); white-space: normal; }
.ai-below small { display: block; margin-top: 4px; font: 500 17px var(--body); color: #8A92AC; }
.ai-res .ai-pst .ai-pt { display: none; }
.ai-res .ai-pst .ai-art:empty:before { content: ""; }
.ai-chc { display: -webkit-inline-flex !important; display: inline-flex !important; -webkit-align-items: center; align-items: center; width: 340px; height: 96px; padding: 0 18px; border-radius: 16px; background: rgba(19,26,43,.7); border: 2px solid #26304A; }
.ai-chc b { margin-left: 16px; font: 700 21px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chc > :first-child { -webkit-flex: none; flex: none; width: 96px; height: 62px; }
.ai-qempty { margin-top: 60px; max-width: 820px; }
.ai-qempty .ai-sp { width: 54px; height: 54px; }
.ai-qempty h2 { margin: 18px 0 10px; font: 800 46px var(--display); }
.ai-qempty p { margin: 0; font: 500 23px/1.5 var(--body); color: #C9CDDC; }
.ai-askhint { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; line-height: 1; }
.ai-res .ai-c.focused { box-shadow: none !important; }
.ai-res .ai-c.focused .ai-art { box-shadow: 0 0 0 4px #FFB547, 0 0 0 10px rgba(255,181,71,.2), 0 18px 40px rgba(0,0,0,.45); }
.ai-res .ai-c.focused .ai-below b { color: #FFB547; }


/* ---------- Telas com coluna de categorias (Filmes, Séries, Ao vivo): layout do desenho ---------- */
html.ai:not(.mobile) #stage #screen #vod, html.ai:not(.mobile) #stage #screen #live { background: none !important; }
html.ai:not(.mobile) #stage #screen #vod > .lv-top, html.ai:not(.mobile) #stage #screen #live > .lv-top { left: 40px !important; right: 40px !important; top: 30px !important; bottom: auto !important; height: 76px !important; padding: 0 !important; background: none !important; border: 0 !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-back, html.ai:not(.mobile) #stage #screen .lv-top .brand-mark, html.ai:not(.mobile) #stage #screen .lv-top .brand-logo, html.ai:not(.mobile) #stage #screen #live > .lv-rail, html.ai:not(.mobile) #stage #screen #live > .lv-hint { display: none !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-crumb { margin: 0 !important; font: 600 24px var(--body) !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-crumb .muted { font: 800 50px var(--display) !important; letter-spacing: -1.5px !important; color: #EEF0F7 !important; margin-right: 6px !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-crumb b { color: #C9CDDC !important; font-weight: 600 !important; }
/* Coluna de categorias: sempre aberta (nada recolhe), com as do app no alto */
html.ai:not(.mobile) #stage #screen #vod > .lv-groups, html.ai:not(.mobile) #stage #screen #live > .lv-groups { display: block !important; left: 40px !important; width: 340px !important; top: 128px !important; bottom: 24px !important; height: auto !important; padding: 0 8px 0 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-transform: none !important; transform: none !important; }
html.ai:not(.mobile) #stage #screen #vod.cats-min > .lv-groups:before, html.ai:not(.mobile) #stage #screen #vod.cats-min > .lv-groups:after { display: none !important; content: none !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .lv-head { margin: 0 0 10px 18px !important; font: 700 17px var(--body) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat { display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; height: 58px !important; margin: 0 0 4px !important; padding: 0 18px !important; border: 0 !important; border-radius: 14px !important; background: none !important; font: 600 22px var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat .cat-name { -webkit-flex: 1 !important; flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat .n { margin-left: 10px !important; font: 500 16px "JetBrains Mono", monospace !important; color: #8A92AC !important; background: none !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat .cat-ic { width: 24px !important; height: 24px !important; margin-right: 12px !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat .cat-ic svg { width: 24px !important; height: 24px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.ai { color: #EEF0F7 !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.ai .cat-ic { color: #FFB547 !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.ai + .cat:not(.ai) { margin-top: 18px !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.on { background: rgba(255,255,255,.1) !important; color: #EEF0F7 !important; font-weight: 700 !important; box-shadow: none !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.focused { background: #FFB547 !important; color: #1A1205 !important; box-shadow: 0 0 0 4px rgba(255,181,71,.25) !important; }
html.ai:not(.mobile) #stage #screen .lv-groups .cat.focused .n, html.ai:not(.mobile) #stage #screen .lv-groups .cat.focused .cat-ic { color: #1A1205 !important; }

/* Filmes e Séries: grade de 5 capas no meio e painel de vidro à direita */
html.ai:not(.mobile) #stage #screen #vod > .vod-main { left: 410px !important; right: 40px !important; top: 118px !important; bottom: 0 !important; padding: 0 !important; overflow: visible !important; }
html.ai:not(.mobile) #stage #screen #vod .vg-head { position: absolute !important; left: 14px !important; top: 0 !important; width: 840px !important; height: 56px !important; display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; }
html.ai:not(.mobile) #stage #screen #vod .vg-head b { font: 800 30px var(--display) !important; margin-right: 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 520px !important; }
html.ai:not(.mobile) #stage #screen #vod .vg-head .muted { font: 500 19px var(--body) !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #vod .vg-head .sort-btn { margin-left: auto !important; height: 50px !important; padding: 0 20px !important; border-radius: 12px !important; font: 600 19px var(--body) !important; background: rgba(255,255,255,.08) !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid { position: absolute !important; left: 0 !important; top: 64px !important; width: 870px !important; bottom: 0 !important; height: auto !important; padding: 14px 0 30px 14px !important; overflow: hidden !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster { width: 150px !important; margin: 0 18px 26px 0 !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster .art { height: 225px !important; border-radius: 14px !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster .cap { margin-top: 10px !important; font: 600 18px/1.25 var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster .sub { display: none !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster.focused { box-shadow: none !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster.focused .art { box-shadow: 0 0 0 4px #FFB547, 0 0 0 10px rgba(255,181,71,.2), 0 18px 40px rgba(0,0,0,.45) !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster.focused .cap { color: #FFB547 !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-bg { position: absolute !important; z-index: 1 !important; top: 0 !important; right: 0 !important; left: auto !important; width: 520px !important; height: 292px !important; border-radius: 26px 26px 0 0 !important; opacity: 1 !important; background-color: #1B2338 !important; -webkit-filter: none !important; filter: none !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-bg:after { background: linear-gradient(0deg, rgba(13,18,32,.95) 0, rgba(13,18,32,0) 55%) !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info { position: absolute !important; z-index: 2 !important; top: 0 !important; right: 0 !important; width: 520px !important; bottom: 26px !important; height: auto !important; margin: 0 !important; padding: 250px 28px 26px !important; border-radius: 26px !important; overflow: hidden !important; background: linear-gradient(180deg, rgba(13,18,32,0) 0, rgba(13,18,32,0) 230px, rgba(13,18,32,.88) 300px) !important; border: 2px solid rgba(255,255,255,.1) !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info.is-cat { padding-top: 40px !important; background: rgba(13,18,32,.6) !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info h1 { font: 800 40px/1.05 var(--display) !important; letter-spacing: -1px !important; white-space: normal !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; max-height: 2.1em !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info .meta { margin: 10px 0 0 !important; font: 500 19px var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info .vi-plot { margin: 12px 0 0 !important; font: 500 19px/1.45 var(--body) !important; color: #C9CDDC !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; max-height: 5.8em !important; }
html.ai:not(.mobile) #stage #screen #vod .vi-acts { position: absolute !important; left: 28px !important; right: 28px !important; bottom: 26px !important; display: -webkit-flex !important; display: flex !important; -webkit-flex-direction: column !important; flex-direction: column !important; }
html.ai:not(.mobile) #stage #screen #vod .vi-acts[hidden] { display: none !important; }
html.ai:not(.mobile) #stage #screen #vod .vi-acts .btn { width: auto !important; height: 62px !important; margin: 0 0 10px !important; border-radius: 14px !important; font: 700 21px var(--body) !important; }

/* Ao vivo: grupos, lista de canais com o programa de agora e, à direita, a prévia com o que vem depois */
html.ai:not(.mobile) #stage #screen #live > .lv-list { left: 400px !important; width: 650px !important; top: 120px !important; bottom: 16px !important; padding: 0 !important; border: 0 !important; }
html.ai:not(.mobile) #stage #screen #live .lv-list > .lv-head { display: -webkit-flex !important; display: flex !important; -webkit-align-items: baseline !important; align-items: baseline !important; height: 50px !important; margin: 0 0 6px 14px !important; }
html.ai:not(.mobile) #stage #screen #live .lv-list > .lv-head b { font: 800 30px var(--display) !important; margin-right: 14px !important; }
html.ai:not(.mobile) #stage #screen #live .lv-list > .lv-head span { font: 500 19px var(--body) !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #live .lxg-times, html.ai:not(.mobile) #stage #screen #live .lxg-now, html.ai:not(.mobile) #stage #screen #live .ch-tl { display: none !important; }
html.ai:not(.mobile) #stage #screen #live .ch-list { position: absolute !important; left: 0 !important; right: 0 !important; top: 56px !important; bottom: 0 !important; padding: 8px 8px 20px !important; }
html.ai:not(.mobile) #stage #screen #live .ch-row { width: auto !important; height: auto !important; margin: 0 0 6px !important; border: 0 !important; background: none !important; }
html.ai:not(.mobile) #stage #screen #live .ch { display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; width: auto !important; height: 96px !important; padding: 0 18px 0 10px !important; border-radius: 16px !important; background: none !important; border: 0 !important; }
html.ai:not(.mobile) #stage #screen #live .ch.focused { background: rgba(255,255,255,.1) !important; box-shadow: inset 0 0 0 3px #FFB547, 0 0 0 6px rgba(255,181,71,.15) !important; }
html.ai:not(.mobile) #stage #screen #live .ch .num { width: 58px !important; -webkit-flex: none !important; flex: none !important; text-align: right !important; margin-right: 16px !important; font: 500 18px "JetBrains Mono", monospace !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-tile { width: 96px !important; height: 62px !important; -webkit-flex: none !important; flex: none !important; margin-right: 18px !important; border-radius: 12px !important; background-color: rgba(255,255,255,.08) !important; font-size: 24px !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-tx { -webkit-flex: 1 !important; flex: 1 !important; min-width: 0 !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-l1 { font: 700 23px var(--body) !important; color: #EEF0F7 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-nl { margin-top: 3px !important; font: 500 19px var(--body) !important; color: #C9CDDC !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-nl em { margin-left: 10px !important; font: 500 15px "JetBrains Mono", monospace !important; font-style: normal !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-bar { height: 5px !important; margin-top: 8px !important; border-radius: 3px !important; background: rgba(255,255,255,.14) !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-bar b { display: block !important; height: 100% !important; border-radius: 3px !important; background: #FFB547 !important; }
html.ai:not(.mobile) #stage #screen #live > .lv-main { left: 1076px !important; right: 40px !important; top: 128px !important; bottom: 24px !important; }
/* Prévia em 16:9 exato e centralizada na coluna: a caixa (o "buraco") e o vídeo têm o mesmo tamanho, então os cantos
   ficam iguais e nada sobra de lado (Meza 27/10: "meio redondo e meio quadrado" e fora do centro). */
html.ai:not(.mobile) #stage #screen #live .ch-preview { top: 0 !important; left: 50% !important; right: auto !important; width: 683px !important; height: 384px !important; margin-left: -341px !important; border-radius: 22px !important; box-shadow: 0 24px 60px rgba(0,0,0,.45) !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card { position: absolute !important; left: 0 !important; right: 0 !important; top: 404px !important; bottom: 0 !important; padding: 22px 24px !important; border-radius: 22px !important; background: rgba(13,18,32,.62) !important; border: 2px solid rgba(255,255,255,.1) !important; overflow: hidden !important; }
html.ai:not(.mobile) #stage #screen #live > .lv-main, html.ai:not(.mobile) #stage #screen #live > .lv-list, html.ai:not(.mobile) #stage #screen #live .ch-list, html.ai:not(.mobile) #stage #screen #live .pg-card { height: auto !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-acts { position: static !important; display: -webkit-flex !important; display: flex !important; margin-top: 18px !important; width: auto !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-acts .lv-bt { margin-right: 12px !important; height: 56px !important; padding: 0 22px !important; border-radius: 14px !important; font: 600 20px var(--body) !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-up { width: auto !important; position: static !important; margin-top: 16px !important; padding: 14px 18px !important; border-radius: 16px !important; background: rgba(255,255,255,.05) !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ttl { font: 800 34px/1.1 var(--display) !important; margin-top: 6px !important; }
html.ai:not(.mobile) #stage #screen #live .ch .ch-now { display: block !important; }
html.ai:not(.mobile) #stage #screen #vod > .lv-top, html.ai:not(.mobile) #stage #screen #live > .lv-top { display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; z-index: 2 !important; }
html.ai:not(.mobile) #stage #screen .lv-top .lv-clock { display: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur { display: -webkit-flex !important; display: flex !important; -webkit-align-items: center !important; align-items: center !important; width: auto !important; margin: 6px 0 0 !important; font-size: 20px !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur b { width: 76px !important; -webkit-flex: none !important; flex: none !important; font: 500 18px "JetBrains Mono", monospace !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur span { -webkit-flex: 1 !important; flex: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur em { margin-left: 12px !important; position: static !important; font: 500 16px var(--body) !important; font-style: normal !important; color: #8A92AC !important; background: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur:before, html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur:after { display: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-up { display: block !important; float: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-ur span { display: block !important; min-width: 0 !important; opacity: 1 !important; visibility: visible !important; }

/* ---------- Página do filme e da série ---------- */
html.ai:not(.mobile) #stage #screen .detail { background: none !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-bg { left: auto !important; right: -90px !important; top: -90px !important; width: 1400px !important; height: 860px !important; -webkit-filter: none !important; filter: none !important; opacity: .9 !important; background-size: cover !important; background-position: center 20% !important; -webkit-transform: none !important; transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 34%, #000 60%) !important; }
html.ai-tv:not(.mobile) #stage #screen .detail .detail-bg { -webkit-mask-image: none !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-shade { background: linear-gradient(0deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.82) 42%, rgba(10,14,25,0) 70%) !important; }
html.ai-tv:not(.mobile) #stage #screen .detail .detail-shade { background: linear-gradient(90deg, rgba(10,14,25,.95) 0, rgba(10,14,25,.5) 40%, rgba(10,14,25,0) 65%), linear-gradient(0deg, rgba(10,14,25,.97) 0%, rgba(10,14,25,.82) 42%, rgba(10,14,25,0) 70%) !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-poster { display: none !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-top { position: absolute !important; left: 150px !important; top: 110px !important; width: 1100px !important; height: auto !important; margin: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text { left: 0 !important; width: 1100px !important; margin: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1 { font: 800 82px/.98 var(--display) !important; letter-spacing: -3px !important; margin: 10px 0 0 !important; white-space: normal !important; }
html.ai:not(.mobile) #stage #screen .detail .d-line { font: 500 21px var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen .detail .plot { max-width: 820px !important; font: 500 21px/1.5 var(--body) !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #stage #screen .detail .actions .btn { height: 66px !important; border-radius: 16px !important; font: 700 23px var(--body) !important; }
.ai-pace { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; margin: 18px 0 0; padding: 12px 20px; border-radius: 16px; background: rgba(13,18,32,.62); border: 2px solid rgba(255,255,255,.1); font: 500 20px var(--body); color: #C9CDDC; }
.ai-pace .ai-sp { width: 24px; height: 24px; margin-right: 12px; }
html.ai:not(.mobile) #stage #screen .detail .seasons { position: absolute !important; left: 150px !important; top: 520px !important; width: 290px !important; margin: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .seasons .lxs-season { width: 290px !important; height: 62px !important; margin: 0 0 6px !important; border-radius: 14px !important; background: none !important; border: 0 !important; font: 600 21px var(--body) !important; }
html.ai:not(.mobile) #stage #screen .detail .seasons .lxs-season.on { background: rgba(255,255,255,.1) !important; }
html.ai:not(.mobile) #stage #screen .detail .seasons .lxs-season.focused { background: #FFB547 !important; color: #1A1205 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section { position: absolute !important; left: 470px !important; top: 520px !important; width: 1350px !important; height: 560px !important; margin: 0 !important; padding: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section #ep-row { width: 1350px !important; height: 520px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide { width: 1300px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide { height: 128px !important; margin: 0 0 8px !important; padding: 10px !important; border-radius: 16px !important; background: none !important; border: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide.focused { background: rgba(255,255,255,.08) !important; box-shadow: inset 0 0 0 3px #FFB547 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .art { width: 192px !important; height: 108px !important; border-radius: 10px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .lxs-h, html.ai:not(.mobile) #stage #screen .detail .seasons .lxs-h { font: 700 17px var(--body) !important; letter-spacing: .1em !important; color: #8A92AC !important; }

/* ---------- Perfis ---------- */
.ai-prof { 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; }
.ai-pf-brand { position: absolute; left: 50%; top: 60px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.ai-prof h1 { margin: 0; font: 800 68px var(--display); letter-spacing: -2px; text-align: center; }
.ai-pf-sub { margin: 12px 0 0; font: 500 23px var(--body); color: #C9CDDC; }
.ai-pf-row { display: -webkit-flex; display: flex; margin-top: 58px; }
html.ai .ai-pf { width: 250px; margin: 0 24px; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; text-align: center; background: none; border: 0; box-shadow: none !important; }
html.ai .ai-pf .av { width: 210px !important; height: 210px !important; border-radius: 52px !important; transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }
html.ai .ai-pf .av svg { width: 62%; height: 62%; }
html.ai .ai-pf .av.add { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(255,255,255,.06) !important; border: 3px dashed rgba(255,255,255,.25); }
html.ai .ai-pf .av.add svg { width: 64px; height: 64px; fill: none; stroke: #8A92AC; stroke-width: 2; }
html.ai .ai-pf.focused .av { box-shadow: 0 0 0 6px #FFB547, 0 0 0 14px rgba(255,181,71,.18), 0 0 90px rgba(255,181,71,.35) !important; -webkit-transform: scale(1.05); transform: scale(1.05); }
html.ai .ai-pf b { margin-top: 22px; font: 700 28px var(--body); }
html.ai .ai-pf.focused b { color: #FFB547; }
.ai-pfh { display: block; min-height: 52px; margin-top: 8px; font: 500 19px/1.35 var(--body); color: #8A92AC; }
.ai-pfh .ai-sp { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.ai-pf-acts { margin-top: 40px; }
.ai-pf-acts .btn { height: 58px; padding: 0 28px; border-radius: 29px; background: none; border: 2px solid rgba(255,255,255,.2); font: 600 21px var(--body); color: #C9CDDC; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide { position: relative !important; padding: 14px 20px 10px 230px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .art { position: absolute !important; left: 12px !important; top: 10px !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .cap { font: 700 23px var(--body) !important; color: #EEF0F7 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .sub { font: 500 17px "JetBrains Mono", monospace !important; color: #8A92AC !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .ep-plot { font: 500 18px/1.4 var(--body) !important; color: #C9CDDC !important; max-width: 1000px !important; }

/* ---------- Futebol ---------- */
.ai-fb { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-fbt { position: absolute; left: 64px; top: 40px; display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; }
.ai-fbt h1 { margin: 0 24px 0 0; font: 800 52px var(--display); letter-spacing: -1.5px; }
.ai-fbt span { font: 500 21px var(--body); color: #8A92AC; }
.ai-club { position: absolute; left: 64px; top: 144px; width: 930px; height: 430px; padding: 36px 40px; border-radius: 32px; overflow: hidden; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; justify-content: space-between;
  background: linear-gradient(115deg, hsl(355,70%,32%), hsl(355,60%,16%) 58%, rgba(10,14,25,.6)); border: 2px solid rgba(255,255,255,.12); }
.ai-club.none { background: linear-gradient(115deg, hsl(150,45%,24%), hsl(200,45%,14%) 60%, rgba(10,14,25,.6)); }
.ai-club:after { content: ""; position: absolute; right: -90px; top: -90px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(0,0,0,.16); }
.ai-club .r1 { position: relative; z-index: 1; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; font: 600 21px var(--body); color: #C9CDDC; }
.ai-club .r1 .ai-sp { width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px; }
.ai-club .vs { position: relative; z-index: 1; font: 800 46px/1.1 var(--display); letter-spacing: -1px; white-space: nowrap; }
.ai-club .vs > span { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 6px 0; }
.ai-club .vs b { -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-club .vs em { margin-left: 20px; font: 800 46px "JetBrains Mono", monospace; font-style: normal; }
.ai-club .vs .crest { width: 66px; height: 66px; margin-right: 22px; border-radius: 50%; background-size: 78%; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,.12); -webkit-flex: none; flex: none; }
.ai-club .vs .crest.txt { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 26px var(--body); }
.ai-club h2 { position: relative; z-index: 1; margin: 0; max-width: 700px; font: 800 44px/1.12 var(--display); letter-spacing: -1px; }
.ai-club-acts { position: relative; z-index: 1; display: -webkit-flex; display: flex; }
.ai-agenda { position: absolute; left: 1030px; top: 144px; right: 40px; bottom: 30px; overflow: hidden; padding: 4px 6px; }
.ai-agenda .h { margin: 6px 0 10px 8px; font: 700 17px var(--body); letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.ai-ag { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 84px; margin: 0 0 8px; padding: 10px 18px; border-radius: 16px; }
.ai-ag .t { width: 86px; -webkit-flex: none; flex: none; font: 500 21px "JetBrains Mono", monospace; color: #EEF0F7; }
.ai-ag > div { -webkit-flex: 1; flex: 1; min-width: 0; }
.ai-ag b { display: block; font: 700 22px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ag div span { display: block; margin-top: 2px; font: 500 17px var(--body); color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ag.mine { background: rgba(255,181,71,.08); box-shadow: inset 0 0 0 2px rgba(255,181,71,.3); }
.ai-ag.fin { opacity: .55; }
.ai-ag.focused { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 3px #FFB547 !important; }
.ai-dot { display: inline-block; width: 12px; height: 12px; margin-right: 10px; border-radius: 50%; background: #EF4444; vertical-align: 2px; }
.ai-fblive { position: absolute; left: 52px; top: 616px; width: 970px; }
.ai-fblive h2 { margin: 0 0 4px 12px; font: 800 28px var(--display); }
.ai-fbe { margin: 20px 8px; font: 500 21px var(--body); color: #8A92AC; }
.ai-teams { max-height: 520px; overflow: hidden; margin: 18px 0; white-space: normal; }
.ai-fblive .ai-items { height: 240px; }
html.ai .ai-fb .ai-club { height: 400px; }

/* ---------- Player: controles de vidro e cartão do próximo episódio ---------- */
html.ai:not(.mobile) #player .osd-top { padding: 44px 64px 0 !important; }
html.ai:not(.mobile) #player .osd-top .eyebrow { font: 600 21px var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #player .osd-top h1 { font: 800 46px/1.05 var(--display) !important; letter-spacing: -1px !important; }
html.ai:not(.mobile) #player .osd-back { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: rgba(19,26,43,.6) !important; border: 2px solid rgba(255,255,255,.16) !important; }
html.ai:not(.mobile) #player .osd-bottom { padding: 0 64px 48px !important; }
html.ai:not(.mobile) #player .seek { height: 8px !important; border-radius: 4px !important; background: rgba(255,255,255,.22) !important; }
html.ai:not(.mobile) #player .seek i { border-radius: 4px !important; background: #FFB547 !important; }
html.ai:not(.mobile) #player .seek b { width: 24px !important; height: 24px !important; margin-top: -8px !important; border-radius: 50% !important; background: #FFB547 !important; box-shadow: 0 0 0 6px rgba(255,181,71,.25) !important; }
html.ai:not(.mobile) #player .seek.focused { box-shadow: 0 0 0 4px rgba(255,181,71,.4) !important; }
html.ai:not(.mobile) #player .times { font: 500 20px "JetBrains Mono", monospace !important; color: #C9CDDC !important; }
html.ai:not(.mobile) #player .ctrls .ctrl { height: 66px !important; padding: 0 24px !important; margin-right: 12px !important; border-radius: 16px !important; background: rgba(19,26,43,.62) !important; border: 2px solid rgba(255,255,255,.12) !important; font: 600 20px var(--body) !important; color: #EEF0F7 !important; }
html.ai:not(.mobile) #player .ctrls .ctrl.focused { background: #FFB547 !important; border-color: #FFB547 !important; color: #1A1205 !important; box-shadow: 0 0 0 6px rgba(255,181,71,.2) !important; }
html.ai:not(.mobile) #player #nxe { right: 64px !important; bottom: 210px !important; left: auto !important; top: auto !important; width: 660px !important; padding: 20px !important; border-radius: 26px !important; background: rgba(13,18,32,.82) !important; border: 2px solid rgba(255,255,255,.12) !important; box-shadow: 0 24px 60px rgba(0,0,0,.5) !important; }
html.ai:not(.mobile) #player #nxe .nxe-pic { width: 224px !important; height: 126px !important; border-radius: 14px !important; }
html.ai:not(.mobile) #player #nxe .eyebrow { font: 700 16px var(--body) !important; letter-spacing: .1em !important; color: #FFB547 !important; }
html.ai:not(.mobile) #player #nxe h3 { font: 800 28px var(--display) !important; }
html.ai:not(.mobile) #player #nxe .btn { height: 58px !important; border-radius: 14px !important; font: 700 20px var(--body) !important; }
@supports (backdrop-filter: blur(2px)) {
  html.ai:not(.ai-tv):not(.mobile) #player .ctrls .ctrl:not(.focused), html.ai:not(.ai-tv):not(.mobile) #player #nxe { backdrop-filter: blur(18px); }
}
/* Data e hora no canto: discretas, sem caixa */
html.ai:not(.mobile) #topbar .tb-right { background: none !important; border: 0 !important; box-shadow: none !important; }
/* Data e hora maiores e com contraste sobre qualquer fundo (Meza 27/10: "sempre visível e um pouco maior"). */
html.ai:not(.mobile) #topbar .tb-date { font: 600 24px var(--body) !important; color: #C9CDDC !important; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
html.ai:not(.mobile) #topbar .clock { font: 800 32px var(--body) !important; color: #EEF0F7 !important; text-shadow: 0 1px 10px rgba(0,0,0,.75); }
html.ai:not(.mobile) #player .ctrls { display: -webkit-flex !important; display: flex !important; -webkit-justify-content: flex-start !important; justify-content: flex-start !important; -webkit-align-items: center !important; align-items: center !important; margin-top: 22px !important; }
html.ai:not(.mobile) #player .ctrls .ctrl { display: -webkit-inline-flex !important; display: inline-flex !important; -webkit-flex-direction: row !important; flex-direction: row !important; -webkit-align-items: center !important; align-items: center !important; width: auto !important; min-width: 0 !important; }
html.ai:not(.mobile) #player .ctrls .ctrl .ic { position: static !important; width: auto !important; height: auto !important; margin: 0 10px 0 0 !important; background: none !important; border: 0 !important; font-size: 22px !important; line-height: 1 !important; color: inherit !important; box-shadow: none !important; }
html.ai:not(.mobile) #player .ctrls .ctrl .lb { position: static !important; margin: 0 !important; font: 600 20px var(--body) !important; color: inherit !important; }
html.ai:not(.mobile) #player .ctrls .ctrl.main { padding: 0 30px !important; }

/* ---------- Celular: luz ambiente atrás de tudo, barra de pedido, destaque em cartão ---------- */
html.ai.mobile #ai-amb { width: 100%; height: 100%; }
html.ai.mobile #ai-amb .amb-l { left: -20%; top: -10%; width: 140%; height: 120%; }
html.ai.mobile .m-page { background: transparent; }
html.ai.mobile .m-ab.solid { background: rgba(10,14,25,.82); }
html.ai.mobile #m-nav { background: rgba(10,14,25,.86); border-top: 1px solid rgba(255,255,255,.06); }
@supports (backdrop-filter: blur(2px)) {
  html.ai.mobile #m-nav, html.ai.mobile .ai-mask, html.ai.mobile .ai-mit, html.ai.mobile .m-ab.solid { backdrop-filter: blur(16px) saturate(1.3); }
  html.ai.mobile #m-nav { background: rgba(10,14,25,.66); }
}
html.ai.mobile #m-nav .m-tab.on { color: #FFB547; }
.ai-mask { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: calc(100% - 32px); height: 48px; margin: 4px 16px 14px; padding: 0 5px 0 14px; border-radius: 24px; text-align: left;
  background: rgba(19,26,43,.62); border: 1px solid rgba(255,255,255,.16); color: #C9CDDC; font: 600 14px "Manrope",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; }
.ai-mask .ai-sp { width: 20px; height: 20px; margin-right: 10px; }
.ai-mask span { -webkit-flex: 1; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-mask .mb { width: 38px; height: 38px; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: #FFB547; color: #1A1205; }
.ai-mask .mb svg { width: 18px; height: 18px; }
.ai-mhero { position: relative; margin: 0 16px 18px; height: 340px; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.ai-mhero .bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: cover; background-position: center 20%; }
.ai-mhero:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(5,7,13,.95) 0%, rgba(5,7,13,.4) 50%, rgba(5,7,13,0) 75%); }
.ai-mhero .in { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; }
.ai-mhero .ai-why { height: 28px; padding: 0 12px 0 8px; border-radius: 14px; font-size: 12px; border-width: 1px; }
.ai-mhero .ai-why .ai-sp { width: 15px; height: 15px; margin-right: 6px; }
.ai-mhero h2 { margin: 10px 0 6px; font: 800 30px/1 "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -1px; color: #EEF0F7; }
.ai-mhero .meta { margin: 0 0 12px; font-size: 12.5px; color: #C9CDDC; }
.ai-mhero .btns { display: -webkit-flex; display: flex; }
.ai-mhero .btns .m-btn { -webkit-flex: 1; flex: 1; margin-right: 8px; }
.ai-mhero .btns .m-btn:last-child { margin-right: 0; }
html.ai.mobile .m-row .m-rh h2 { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
html.ai.mobile .m-row .ai-tag { -webkit-flex: none; flex: none; margin: 2px 8px 2px 0; padding: 3px 9px 3px 6px; font-size: 10px; white-space: nowrap; }
html.ai.mobile .m-row .ai-tag .ai-sp { width: 12px; height: 12px; margin-right: 4px; }
html.ai.mobile .ai-mgames .ai-game { width: 270px; height: 126px; padding: 12px 14px; margin-right: 10px; border-radius: 14px; }
html.ai.mobile .ai-game .ag-top { font-size: 11.5px; }
html.ai.mobile .ai-game .ag-tm { font-size: 14.5px; }
html.ai.mobile .ai-game .ag-tm > span { margin: 2px 0; }
html.ai.mobile .ai-game .ag-tm em { font-size: 14.5px; margin-left: 8px; }
html.ai.mobile .ai-game .ag-tm .crest { width: 22px; height: 22px; margin-right: 8px; font-size: 10px; }
html.ai.mobile .ai-game .ag-ch { font-size: 11.5px; }
html.ai.mobile .ai-pill { padding: 3px 9px; font-size: 10px; }
html.ai.mobile .ai-pill svg { width: 11px; height: 11px; }
/* Pedido no celular */
.ai-mfield .ai-sp { width: 18px; height: 18px; -webkit-flex: none; flex: none; }
.ai-mex { padding: 16px; }
.ai-mex p { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.ai-mex .m-chip { margin: 0 8px 8px 0; }
html.ai.mobile .ai-und.m { padding: 12px 16px 0; font-size: 13px; }
html.ai.mobile .ai-und.m > * { margin: 0 6px 8px 0; }
html.ai.mobile .ai-und.m .ai-chip { padding: 5px 8px 5px 12px; font-size: 12.5px; border-width: 1px; }
html.ai.mobile .ai-und.m .ai-chip.fixed, html.ai.mobile .ai-und.m .ai-chip.team { padding-right: 12px; }
html.ai.mobile .ai-und.m .ai-chip svg { width: 13px; height: 13px; margin-left: 5px; }
html.ai.mobile .ai-say.m { margin: 6px 16px 4px; font-size: 21px; line-height: 1.2; }
html.ai.mobile .ai-note { margin: 4px 16px 0; font-size: 12.5px; }
.ai-mlist { padding: 12px 12px 20px; }
.ai-mlist .ai-game { width: auto; height: 126px; margin: 0 0 10px; }
.ai-mit { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 10px; padding: 8px; border-radius: 16px; background: rgba(19,26,43,.62); border: 1px solid rgba(255,255,255,.08); }
.ai-mit .po { width: 62px; height: 92px; -webkit-flex: none; flex: none; border-radius: 10px; background-size: cover; background-position: center; }
.ai-mit .tx { -webkit-flex: 1; flex: 1; min-width: 0; margin: 0 10px 0 12px; }
.ai-mit b { display: block; font-size: 14.5px; color: #EEF0F7; }
.ai-mit span { display: block; margin-top: 2px; font-size: 12px; color: #8A92AC; }
.ai-mit small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.7em; }
.ai-mit .go { width: 36px; height: 36px; -webkit-flex: none; flex: none; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(255,255,255,.1); }
.ai-mit .go svg { width: 16px; height: 16px; }
.ai-mit.ch > :first-child { width: 72px; height: 48px; -webkit-flex: none; flex: none; }
/* Categorias do app no topo da lista do celular */
html.ai.mobile .m-cl .ai, html.ai.mobile .m-chip.ai { color: #FFD08A; }
/* Página do título no celular: arte grande no topo, sem a capinha ao lado */
html.ai.mobile .m-det-po { display: none; }
html.ai.mobile .m-det-bg { height: 360px; opacity: 1; -webkit-filter: none; filter: none; -webkit-transform: none; transform: none; background-size: cover; background-position: center 20%; }
html.ai.mobile .m-det-shade { height: 362px; background: linear-gradient(0deg, rgba(10,14,25,1) 2%, rgba(10,14,25,.25) 55%, rgba(10,14,25,.45)); }
html.ai.mobile .m-det-head { padding-top: 190px; }
html.ai.mobile .m-det-tx { margin-left: 0; }
html.ai.mobile .m-det-tx h1 { font: 800 34px/1 "Bricolage Grotesque",-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans, sans-serif; letter-spacing: -1px; }
html.ai.mobile .ai-pace { margin-top: 10px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; border-width: 1px; }
html.ai.mobile .ai-pace .ai-sp { width: 16px; height: 16px; margin-right: 8px; }

/* ---------- Escolha do time e dos campeonatos (TV) ---------- */
.ai-pick { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.aip-head { position: absolute; left: 190px; top: 50px; right: 64px; }
.aip-head h1 { margin: 0; font: 800 50px var(--display); letter-spacing: -1.5px; white-space: nowrap; }
.aip-head p { margin: 8px 0 0; font: 500 21px var(--body); color: #8A92AC; }
.aip-side { position: absolute; left: 190px; top: 196px; width: 400px; z-index: 3; }
html.ai .ai-qbar.aip-q { position: relative; left: 0; top: 0; width: 400px; height: 72px; margin-bottom: 18px; padding: 0 22px; border-color: rgba(255,255,255,.16); box-shadow: none; }
html.ai .ai-qbar.aip-q.focused { border-color: #FFB547; box-shadow: 0 0 0 8px rgba(255,181,71,.12); }
.aip-q .ai-sp { width: 28px; height: 28px; margin-right: 14px; -webkit-flex: none; flex: none; }
.aip-q .ai-qtxt { font-size: 22px; text-overflow: ellipsis; }
/* Lote E, item 21: campeonatos numa lista vertical; o país embaixo, pequeno; o escolhido com ✓ */
.aip-lgs { position: absolute; left: 630px; top: 186px; width: 600px; bottom: 0; z-index: 3; overflow: hidden; padding: 12px 12px 40px; }
.aip-lr, .aip-more { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; min-height: 76px; margin: 0 0 8px; padding: 10px 22px; border-radius: 16px; border: 2px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #EEF0F7; text-align: left; font: 600 23px var(--body); }
.aip-lr span { -webkit-flex: 1; flex: 1; min-width: 0; }
.aip-lr b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aip-lr small { display: block; margin-top: 2px; font: 500 16px var(--body); color: #8A92AC; }
.aip-lr svg { width: 28px; height: 28px; margin-left: 14px; -webkit-flex: none; flex: none; fill: none; stroke: #FFB547; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aip-lr.on { background: rgba(255,181,71,.12); border-color: rgba(255,181,71,.5); }
.aip-lr.focused, .aip-more.focused { background: #FFB547; border-color: #FFB547; color: #1A1205; }
.aip-lr.focused small { color: #1A1205; opacity: .75; }
.aip-lr.focused svg { stroke: #1A1205; }
.aip-more { -webkit-justify-content: center; justify-content: center; min-height: 64px; color: #C9CDDC; }
.aip-res { position: absolute; left: 1250px; top: 186px; right: 40px; bottom: 0; z-index: 3; overflow: hidden; padding: 12px 0 40px 12px; white-space: normal; }
.aip-h { margin: 22px 0 12px; font: 700 18px var(--body); letter-spacing: .1em; text-transform: uppercase; color: #8A92AC; }
.aip-h:first-child { margin-top: 0; }
.aip-h span { margin-left: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #FFB547; }
.aip-c { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; vertical-align: top; height: 58px; margin: 0 12px 14px 0; padding: 0 20px 0 14px; font-size: 21px; white-space: nowrap; }
.aip-c svg { width: 20px; height: 20px; margin-right: 8px; -webkit-flex: none; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.aip-c.tm svg { margin: 0 0 0 10px; }
.aip-c .crest { width: 34px; height: 34px; margin-right: 10px; -webkit-flex: none; flex: none; border-radius: 50%; background-size: 80%; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,.1); }
.aip-c .crest.txt { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font: 800 15px var(--body); }
.aip-c.on { background: rgba(255,181,71,.16); border-color: rgba(255,181,71,.6); color: #EEF0F7; }
.aip-c.on svg { stroke: #FFB547; }
.aip-c.focused svg { stroke: #1A1205; }
.aip-none { margin: 0 0 10px; font: 500 20px var(--body); color: #8A92AC; }
/* Futebol: campeonatos favoritos em destaque no alto da agenda */
.ai-aglg { margin: 0 0 14px; padding: 8px 0 2px; border-radius: 20px; background: rgba(255,181,71,.07); box-shadow: inset 0 0 0 2px rgba(255,181,71,.3); }
.ai-aglg .h { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-left: 18px; color: #FFB547; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-aglg .h svg { width: 18px; height: 18px; margin-right: 8px; -webkit-flex: none; flex: none; fill: none; stroke: #FFB547; stroke-width: 2.4; }
.ai-aglg .ai-fbe { margin: 6px 18px 14px; }
.ai-ag .t small { display: block; font: 600 14px var(--body); color: #8A92AC; }
.ai-club-acts .ai-btn { white-space: nowrap; }
/* Celular */
.aip-msub { margin: 4px 16px 6px; font-size: 12.5px; line-height: 1.4; color: #8A92AC; }
.aip-mres { padding: 4px 16px 96px; }
.aip-mres .aip-h { margin: 16px 0 8px; font-size: 11px; }
.aip-mres .aip-h:first-child { margin-top: 6px; }
.aip-mres .aip-h span { margin-left: 8px; }
.aip-mres .aip-c { height: 38px; margin: 0 8px 8px 0; padding: 0 12px 0 10px; font-size: 13.5px; }
.aip-mres .aip-c svg { width: 14px; height: 14px; margin-right: 6px; }
.aip-mres .aip-c.tm svg { margin: 0 0 0 6px; }
.aip-mres .aip-c .crest { width: 22px; height: 22px; margin-right: 7px; font-size: 10px; }
.aip-mres .aip-none { font-size: 13px; }
.aip-mres .aip-lr, .aip-mres .aip-more { min-height: 54px; margin: 0 0 6px; padding: 7px 14px; border-radius: 12px; border-width: 1px; font-size: 15px; }
.aip-mres .aip-lr small { font-size: 12px; }
.aip-mres .aip-lr svg { width: 20px; height: 20px; margin-left: 10px; }
.aip-mres .aip-lgl { margin-bottom: 4px; }
.ai-mfav { padding: 0 0 6px; }
.ai-mfav .m-sech svg { width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; fill: none; stroke: #FFB547; stroke-width: 2.4; }
.ai-mpickb { margin: 2px 0 8px; }
.ai-mpickb svg { width: 14px; height: 14px; margin-right: 6px; fill: none; stroke: #FFB547; stroke-width: 2.4; }

/* ---------- Cortes nas telas antigas (só tamanho; o visual delas é redesenhado em outra sessão) ---------- */
/* Filmes e Séries: três fileiras inteiras na grade (capa 225 + legenda de 2 linhas reservada = 280, + 18 de margem),
   começando em 172px e com 894px de altura; a quarta fica fora até a grade rolar (de fileira em fileira, no ai.js). */
html.ai:not(.mobile) #stage #screen #vod > .vod-main { top: 108px !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid { bottom: auto !important; height: 894px !important; padding-bottom: 0 !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster { margin-bottom: 18px !important; }
html.ai:not(.mobile) #stage #screen #vod .grid.vod-grid > .poster .cap { height: 45px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; white-space: normal !important; }
html.ai:not(.mobile) #stage #screen #vod .vod-info h1 { line-height: 1.12 !important; padding-bottom: 2px !important; }
/* Página da série: lista de episódios com quatro inteiros (6 + 4 × 126 - 6 = 504px); o quinto aparece ao rolar. */
html.ai:not(.mobile) #stage #screen .detail .ep-section #ep-row { height: 504px !important; padding-top: 6px !important; padding-bottom: 0 !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide { height: 120px !important; margin: 0 0 6px !important; padding: 8px 20px 6px 230px !important; overflow: hidden !important; }
html.ai:not(.mobile) #stage #screen .detail .ep-section .poster.wide .art { top: 6px !important; }
/* Título da página: uma linha que diminui em degraus (fitLine do screens.js põe t-md…t-xxs); muito comprido, duas
   linhas menores (t-wrap). Assim os botões nunca descem sobre as temporadas e os episódios. */
html.ai:not(.mobile) #stage #screen .detail .detail-text h1 { line-height: 1.06 !important; padding-bottom: 4px !important; overflow: hidden !important; white-space: nowrap !important; max-width: 1100px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-md { font-size: 70px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-sm { font-size: 60px !important; letter-spacing: -2px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-xs { font-size: 52px !important; letter-spacing: -1.5px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-xxs { font-size: 46px !important; letter-spacing: -1px !important; }
html.ai:not(.mobile) #stage #screen .detail .detail-text h1.t-wrap { font-size: 50px !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
/* Cartão de jogo: as linhas não encolhem (no celular o texto do canal ficava espremido); no celular o cartão cresce. */
.ai-game > div { -webkit-flex: none; flex: none; }
html.ai.mobile .ai-game { height: auto !important; min-height: 126px; }

/* ---------- Filmes e Séries: opção A (grade fixa, quadro do assistente e cartão por cima) ---------- */
.ai-vod { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-vh { position: absolute; left: 40px; top: 26px; right: 40px; height: 80px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; z-index: 4; }
.ai-vh h1 { -webkit-flex: none; flex: none; white-space: nowrap; margin: 0 34px 0 0; font: 800 52px var(--display); letter-spacing: -1.5px; }
.ai-vask { -webkit-flex: 1; flex: 1; max-width: 960px; }
.ai-vh .ai-ask { width: 100%; height: 68px; }
.ai-vh .ai-ask .ph { font-size: 22px; }
/* Folga de 8px em volta (left/top compensados): o anel do item em foco não é cortado pela borda (Meza 27/10). */
.ai-gcats { position: absolute; left: 32px; top: 118px; width: 328px; bottom: 0; overflow: hidden; padding: 8px 8px 30px 8px; z-index: 3; }
.ai-gcats .h { margin: 14px 0 8px 16px; font: 700 16px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8A92AC; }
.ai-gcats .h:first-child { margin-top: 0; }
.ai-cat { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 56px; margin: 0 0 4px; padding: 0 16px; border-radius: 14px; font: 600 21px var(--body); color: #C9CDDC; white-space: nowrap; }
.ai-cat .ic { width: 22px; height: 22px; margin-right: 12px; -webkit-flex: none; flex: none; color: #8A92AC; }
.ai-cat .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ai-cat.ai { color: #EEF0F7; }
.ai-cat.ai .ic, .ai-cat.ai .ic .ai-sp { color: #7CE7FF; stroke: #7CE7FF; }
.ai-cat .nm { -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai-cat .n { margin-left: 10px; font: 500 15px "JetBrains Mono", monospace; color: #8A92AC; }
.ai-cat .n svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px; }
.ai-cat.on { background: rgba(255,255,255,.1); color: #EEF0F7; font-weight: 700; }
.ai-cat.focused { background: #FFB547; color: #1A1205; box-shadow: 0 0 0 4px rgba(255,181,71,.25) !important; }
.ai-cat.focused .n, .ai-cat.focused .ic, .ai-cat.focused .ic .ai-sp { color: #1A1205; stroke: #1A1205; }
/* Grade à esquerda e o painel de detalhes fixo à direita (opção B, Meza 28/10): 520 de painel + 40 de folga. */
.ai-gmain { position: absolute; left: 380px; top: 120px; right: 600px; bottom: 0; }
.ai-ins { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 72px; padding: 12px 20px; border-radius: 18px; background: rgba(13,19,33,.66); border: 2px solid rgba(124,231,255,.18); font: 500 20px/1.4 var(--body); color: #C9CDDC; }
.ai-ins b { color: #EEF0F7; }
.ai-ins .orb { width: 42px; height: 42px; margin-right: 16px; -webkit-flex: none; flex: none; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #E7FBFF, #7CE7FF 50%, #3A7BD5); box-shadow: 0 0 22px rgba(124,231,255,.45); }
.ai-ins .orb .ai-sp { width: 22px; height: 22px; stroke: #04202A; }
.ai-gsort { display: -webkit-flex; display: flex; height: 50px; margin-top: 14px; }
.ai-gsort .ai-chip { margin-right: 10px; }
.ai-gsort .ai-chip.on { background: rgba(255,181,71,.18); border-color: rgba(255,181,71,.55); color: #EEF0F7; }
.ai-gsort .ai-chip.focused { background: #FFB547; color: #1A1205; border-color: #FFB547; }
.ai-gwin { position: absolute; left: 0; right: 0; top: 146px; bottom: 0; overflow: hidden; }
.ai-grid { position: relative; padding: 10px 0 0 14px; transition: -webkit-transform .25s ease; transition: transform .25s ease; transition: transform .25s ease, -webkit-transform .25s ease; }
html.ai-tv .ai-grid, html.ai-tv .ai-eps { transition: none; }
.ai-gc { display: inline-block; vertical-align: top; width: 136px; height: 254px; margin: 0 34px 14px 0; border-radius: 12px; }
.ai-gc .ai-art { width: 136px; height: 204px; border-radius: 12px; }
.ai-gc .ai-pt { font-size: 17px; }
.ai-match { position: absolute; right: 6px; top: 6px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: rgba(5,7,13,.82); font: 500 14px "JetBrains Mono", monospace; color: #7BE0A6; }
.ai-gt { display: block; margin-top: 8px; font: 700 17px var(--body); color: #EEF0F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-gw { display: block; font: 500 15px var(--body); color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-gc.focused { box-shadow: none !important; }
.ai-gc.focused .ai-art { box-shadow: 0 0 0 4px #FFB547, 0 0 0 10px rgba(255,181,71,.2), 0 18px 40px rgba(0,0,0,.45); }
.ai-gc.focused .ai-gt { color: #FFB547; }
.ai-gempty { margin: 30px 14px; font: 500 21px var(--body); color: #8A92AC; }
.ai-pop { position: absolute; z-index: 10; top: 0; right: -560px; width: 520px; border-radius: 22px; overflow: hidden; pointer-events: none; background: rgba(12,17,30,.92); border: 2px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ai-pop.in { -webkit-animation: aiPopIn .18s ease-out; animation: aiPopIn .18s ease-out; }
@-webkit-keyframes aiPopIn { from { opacity: .35; } to { opacity: 1; } }
@keyframes aiPopIn { from { opacity: .35; } to { opacity: 1; } }
html.ai-tv .ai-pop.in { -webkit-animation: none; animation: none; }
/* Prévia grande no centro (Meza 28/10): a imagem larga entra inteira em 16:9; a capa em pé (.tall) aparece inteira. */
.ai-pop .pa { height: 0; padding-top: 56.25%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1B2338; }
.ai-pop .pa.tall { background-size: contain; background-color: #0A0E19; }
.ai-pop .pt { padding: 20px 28px 24px; }
.ai-pop .ai-chip { padding: 5px 12px 5px 9px; font-size: 15px; border-width: 1px; }
.ai-pop .ai-chip .ai-sp { width: 16px; height: 16px; margin-right: 6px; }
.ai-chip.ai { background: rgba(124,231,255,.1); border-color: rgba(124,231,255,.35); color: #CFF6FF; }
.ai-chip.ai .ai-sp { stroke: #7CE7FF; }
.ai-pop b { display: block; margin-top: 10px; font: 800 32px/1.1 var(--display); letter-spacing: -.8px; }
.ai-pop .pm { display: block; margin-top: 8px; font: 600 20px var(--body); color: #C9CDDC; }
.ai-pop p { margin: 10px 0 0; font: 500 19px/1.45 var(--body); color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; max-height: 8.7em; }
.ai-pop .ph { display: block; margin-top: 14px; font: 500 16px "JetBrains Mono", monospace; color: #8A92AC; }
@supports (backdrop-filter: blur(2px)) {
  html.ai:not(.ai-tv) .ai-ins, html.ai:not(.ai-tv) .ai-pop { backdrop-filter: blur(20px) saturate(1.3); }
  html.ai:not(.ai-tv) .ai-pop { background: rgba(12,17,30,.84); }
}

/* ---------- Página da série: opção C (painel de progresso) ---------- */
.ai-ser { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-sbg { position: absolute; right: -60px; top: -60px; width: 1300px; height: 760px; background-size: cover; background-position: center 20%; opacity: .85; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 35%, #000 62%); }
.ai-sbg.soft { opacity: .5; }
html.ai-tv .ai-sbg { -webkit-mask-image: none; }
.ai-sshade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(8,11,20,.98) 0%, rgba(8,11,20,.9) 48%, rgba(8,11,20,0) 78%); }
html.ai-tv .ai-sshade { background: linear-gradient(90deg, rgba(8,11,20,.96) 0, rgba(8,11,20,.55) 45%, rgba(8,11,20,0) 70%), linear-gradient(0deg, rgba(8,11,20,.98) 0%, rgba(8,11,20,.9) 48%, rgba(8,11,20,0) 78%); }
.ai-shead { position: absolute; left: 150px; top: 60px; right: 560px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; z-index: 3; }
.ai-ring { position: relative; width: 200px; height: 200px; margin-right: 40px; -webkit-flex: none; flex: none; }
.ai-ring svg { width: 200px; height: 200px; }
.ai-ring > div { 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; }
.ai-ring b { font: 800 46px/1 var(--display); }
.ai-ring span { margin-top: 4px; font: 500 16px var(--body); color: #8A92AC; }
.ai-stx { -webkit-flex: 1; flex: 1; min-width: 0; }
.ai-stx h1 { margin: 0; font: 800 70px/1 var(--display); letter-spacing: -2.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2em; }
.ai-stx .ai-meta span { margin-right: 18px; }
.ai-sins { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 12px 0 0; font: 500 20px/1.4 var(--body); color: #C9CDDC; }
.ai-sins b { color: #FFB547; }
.ai-sins .ai-sp { width: 24px; height: 24px; margin-right: 12px; stroke: #7CE7FF; }
.ai-sacts { display: -webkit-flex; display: flex; margin-top: 20px; }
.ai-sacts .ai-btn small { margin-left: 12px; font: 600 16px var(--body); opacity: .75; }
.ai-seas { position: absolute; left: 150px; top: 440px; width: 400px; bottom: 16px; overflow: hidden; z-index: 3; padding: 4px 6px 0 4px; }
.ai-seas .h, .ai-ser .h { margin: 0 0 10px 14px; font: 700 16px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8A92AC; }
.ai-sea { margin: 0 0 8px; padding: 14px 18px; border-radius: 16px; }
.ai-sea .r { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: baseline; align-items: baseline; }
.ai-sea b { font: 700 21px var(--body); }
.ai-sea .c { font: 500 15px "JetBrains Mono", monospace; color: #8A92AC; }
.ai-sea .ai-sbar { display: block; height: 6px; margin: 10px 0 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.ai-sea .ai-sbar i { display: block; height: 100%; background: linear-gradient(90deg, #7CE7FF, #FFB547); }
.ai-sea .s { font: 500 15px var(--body); color: #8A92AC; }
.ai-sea.on { background: rgba(255,255,255,.08); }
.ai-sea.done:not(.on):not(.focused) { opacity: .65; }
.ai-sea.focused { background: #FFB547; color: #1A1205; box-shadow: 0 0 0 4px rgba(255,181,71,.25) !important; }
.ai-sea.focused .c, .ai-sea.focused .s { color: #1A1205; }
.ai-sea.focused .ai-sbar { background: rgba(26,18,5,.2); }
.ai-sea.focused .ai-sbar i { background: #1A1205; }
.ai-epw { position: absolute; left: 590px; top: 440px; right: 96px; bottom: 0; overflow: hidden; z-index: 3; }
.ai-eps { padding: 4px 6px 0 4px; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease; }
.ai-epr { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 116px; margin: 0 0 12px; padding: 8px 18px 8px 8px; border-radius: 16px; }
.ai-epr .th { position: relative; width: 176px; height: 99px; margin-right: 22px; -webkit-flex: none; flex: none; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; background-color: #1B2338; }
.ai-epr .tx { -webkit-flex: 1; flex: 1; min-width: 0; }
.ai-epr b { display: block; font: 700 21px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-epr span { display: block; margin-top: 3px; font: 500 16px var(--body); color: #8A92AC; }
.ai-epr small { display: block; margin-top: 4px; font: 500 16px var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-epr .ok { width: 34px; height: 34px; margin-left: 14px; -webkit-flex: none; flex: none; border-radius: 50%; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background: rgba(123,224,166,.16); color: #7BE0A6; }
.ai-epr .ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; }
.ai-epr.seen:not(.focused) .tx { opacity: .7; }
.ai-epr.focused { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 3px #FFB547, 0 0 0 6px rgba(255,181,71,.12) !important; }
.ai-epr.focused b { color: #FFB547; }
/* Ao vivo: a barra antiga de tela cheia (logo, data e hora) repetia a data do canto; "A seguir" ocupa a largura toda. */
html.ai:not(.mobile) .lv-fs-top, html.ai:not(.mobile) .lv-fs-brand { display: none !important; }
html.ai:not(.mobile) #stage #screen #live .pg-card .lv-up { -webkit-align-self: stretch !important; align-self: stretch !important; width: 100% !important; box-sizing: border-box !important; }
html.ai:not(.mobile) .acc-main .acc-opts.ai-accscroll { max-height: 100%; height: 100%; overflow: hidden; padding-bottom: 30px; box-sizing: border-box; }
/* Sinopse do destaque sempre com pelo menos duas linhas, também com o foco nas fileiras (Meza 14/10). */
.ai-home.rowmode .ai-plot { margin-top: 8px; font-size: 20px; line-height: 1.4; -webkit-line-clamp: 2; min-height: 56px; max-height: 56px; }

/* ---------- Página do filme ---------- */
.ai-mov { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.ai-mhead { position: absolute; left: 150px; top: 64px; width: 1000px; z-index: 3; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }
.ai-mhead .ai-chip { padding: 6px 14px 6px 10px; font-size: 17px; }
.ai-mhead .ai-chip .ai-sp { width: 18px; height: 18px; margin-right: 8px; }
.ai-mhead h1 { margin: 12px 0 0; font: 800 76px/1.02 var(--display); letter-spacing: -2.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.04em; }
.ai-mhead h1.long, .ai-stx h1.long { font-size: 56px; letter-spacing: -1.5px; }
.ai-mhead .ai-meta span, .ai-stx .ai-meta span { margin-right: 18px; }
.ai-meta .cert { padding: 1px 9px; border-radius: 6px; background: #FFB547; color: #1A1205; font-weight: 800; }
.ai-mhead .ai-sins { margin-top: 10px; }
.ai-sins b { color: #EEF0F7; }
.ai-mplot { margin: 12px 0 0; max-width: 920px; font: 500 21px/1.45 var(--body); color: #C9CDDC; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; max-height: 5.8em; }
/* max-height = as mesmas linhas x line-height: o navegador do MSX às vezes não aplica o line-clamp e a sinopse sairia
   inteira, empurrando temporadas e episódios para fora da tela (porta da 0.7.22 do Max Pro). */
.ai-stx .ai-mplot { margin-top: 10px; font-size: 20px; -webkit-line-clamp: 3; max-height: 4.35em; }
.ai-crew { margin: 8px 0 0; font: 500 17px var(--body); color: #C9CDDC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 960px; }
.ai-crew:empty { display: none; }
.ai-crew span { color: #8A92AC; }
.ai-mhead .ai-sacts { margin-top: 18px; }
.ai-mrow { position: absolute; left: 138px; right: 0; top: 590px; z-index: 3; }
.ai-mov.has-cast .ai-mrow.like { top: 820px; }
.ai-mrow h2 { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 0 2px 12px; font: 800 26px var(--display); }
.ai-mitems { position: relative; overflow: hidden; white-space: nowrap; padding: 12px 40px 14px 12px; }
.ai-mitems > * { display: inline-block; vertical-align: top; }
.ai-gc.sm { width: 140px; height: 210px; margin: 0 20px 0 0; }
.ai-gc.sm .ai-art { width: 140px; height: 210px; }
.ai-pp { width: 150px; margin: 0 22px 0 0; text-align: center; white-space: normal; border-radius: 16px; }
.ai-pp i { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 104px; height: 104px; margin: 0 auto 10px; border-radius: 50%; background-size: cover; background-position: center 25%; font: 800 32px var(--display); font-style: normal; color: #fff; }
.ai-pp b { display: block; font: 700 17px/1.2 var(--body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.4em; }
.ai-pp span { display: block; margin-top: 2px; font: 500 14px var(--body); color: #8A92AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-pp.focused { box-shadow: none !important; }
.ai-pp.focused i { box-shadow: 0 0 0 4px #FFB547, 0 0 0 10px rgba(255,181,71,.2); }
.ai-pp.focused b { color: #FFB547; }
/* Série: cabeçalho com sinopse e criação; episódios mais embaixo (4 inteiros); elenco numa coluna à direita */
.ai-seas, .ai-epw { top: 490px; }
.ai-epw { right: 540px; }
.ai-scast { position: absolute; right: 96px; top: 490px; width: 410px; bottom: 16px; overflow: hidden; z-index: 3; padding: 4px 6px 0 4px; }
.ai-scast[hidden] { display: none; }
.ai-scast .ai-pp { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: auto; margin: 0 0 6px; padding: 8px 12px; text-align: left; }
.ai-scast .ai-pp i { width: 64px; height: 64px; margin: 0 16px 0 0; -webkit-flex: none; flex: none; font-size: 22px; }
.ai-scast .ai-pp b { -webkit-line-clamp: 1; font-size: 18px; max-height: 1.2em; }
.ai-scast .ai-pp span { margin-top: 0; }
.ai-scast .ai-pp.focused { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 3px #FFB547 !important; }
.ai-scast .ai-pp.focused i { box-shadow: none; }
.ai-scast .ai-pp > :not(i) { min-width: 0; }
.ai-mhead { top: 108px; }
.ai-mov.has-cast .ai-mrow.like { top: 812px; }
.ai-gc.sm { width: 126px; height: 189px; }
.ai-gc.sm .ai-art { width: 126px; height: 189px; }
.ai-pp .t { min-width: 0; }
.ai-scast .ai-pp .t { -webkit-flex: 1; flex: 1; }
.ai-scast .ai-pp .t span { margin-top: 2px; }

/* ---------- Abertura das páginas (filme, série e Conta): marca do app enquanto os dados chegam ----------
   Só aparece se a espera passar de 150 ms (reabrir um título já visto não pisca). Fora da TV a marca "respira" com um
   brilho desfocado; na TV, sem desfoque, só a opacidade pulsando. A página entra uma vez, com fade de 200 ms. */
.ai-pload { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 9; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; opacity: 0;
  -webkit-animation: aiPlIn .25s ease .15s forwards; animation: aiPlIn .25s ease .15s forwards; }
.ai-pload img { position: relative; width: 132px; height: 132px; -webkit-animation: aiPlBreath 1.4s ease-in-out infinite alternate; animation: aiPlBreath 1.4s ease-in-out infinite alternate; }
.ai-pload i { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,181,71,.32) 0%, rgba(255,181,71,0) 68%);
  -webkit-filter: blur(16px); filter: blur(16px); -webkit-animation: aiPlBreath 1.4s ease-in-out infinite alternate; animation: aiPlBreath 1.4s ease-in-out infinite alternate; }
html.ai-tv .ai-pload i { -webkit-filter: none; filter: none; -webkit-animation: none; animation: none; }
html.ai-tv .ai-pload img { -webkit-animation: aiPlFade 1s linear infinite alternate; animation: aiPlFade 1s linear infinite alternate; }
.ai-pin { -webkit-animation: aiPlIn .2s ease-out; animation: aiPlIn .2s ease-out; }
@-webkit-keyframes aiPlIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes aiPlIn { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes aiPlBreath { from { opacity: .55; -webkit-transform: scale(.94); } to { opacity: 1; -webkit-transform: scale(1.04); } }
@keyframes aiPlBreath { from { opacity: .55; -webkit-transform: scale(.94); transform: scale(.94); } to { opacity: 1; -webkit-transform: scale(1.04); transform: scale(1.04); } }
@-webkit-keyframes aiPlFade { from { opacity: .45; } to { opacity: 1; } }
@keyframes aiPlFade { from { opacity: .45; } to { opacity: 1; } }

/* ---------- Troca de tela (item 18): fade e deslize curto de 180 ms, só opacity e transform ----------
   Só visual: o conteúdo novo já tem o foco quando a animação começa (app.js, swapIn). Para a frente entra da direita,
   no Voltar entra da esquerda. Duas animações iguais por sentido (0/1) para reiniciar a cada troca. A página de filme
   e série (pgShow) entra com o mesmo deslize. Desligado na TV e no MSX (html.ai-tv, J12; a página lá continua só com o
   fade) e com prefers-reduced-motion (sem a preferência "no-preference", fica o fade antigo da página). O foco dentro
   das grades e fileiras não ganha transição (J13). */
@media (prefers-reduced-motion: no-preference) {
  html.ai:not(.ai-tv) #screen.sw-f0 { -webkit-animation: aiSwF0 .18s ease-out; animation: aiSwF0 .18s ease-out; }
  html.ai:not(.ai-tv) #screen.sw-f1 { -webkit-animation: aiSwF1 .18s ease-out; animation: aiSwF1 .18s ease-out; }
  html.ai:not(.ai-tv) #screen.sw-b0 { -webkit-animation: aiSwB0 .18s ease-out; animation: aiSwB0 .18s ease-out; }
  html.ai:not(.ai-tv) #screen.sw-b1 { -webkit-animation: aiSwB1 .18s ease-out; animation: aiSwB1 .18s ease-out; }
  html.ai:not(.ai-tv) .ai-pin { -webkit-animation: aiSwF0 .2s ease-out; animation: aiSwF0 .2s ease-out; }
}
@-webkit-keyframes aiSwF0 { from { opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes aiSwF0 { from { opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes aiSwF1 { from { opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes aiSwF1 { from { opacity: 0; -webkit-transform: translateX(18px); transform: translateX(18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes aiSwB0 { from { opacity: 0; -webkit-transform: translateX(-18px); transform: translateX(-18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes aiSwB0 { from { opacity: 0; -webkit-transform: translateX(-18px); transform: translateX(-18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes aiSwB1 { from { opacity: 0; -webkit-transform: translateX(-18px); transform: translateX(-18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes aiSwB1 { from { opacity: 0; -webkit-transform: translateX(-18px); transform: translateX(-18px); } to { opacity: 1; -webkit-transform: none; transform: none; } }