/* Lord Play para TV Titan (Philips, AOC). Palco fixo de 1920x1080, escalado pelo main.ts para a tela real.
   Sem variáveis CSS e sem grid: TV antiga roda Chromium 38/53. Tudo em posição absoluta. */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0c0a17; }
body { font-family: "LG Smart UI", "Museo Sans", Arial, Helvetica, sans-serif; color: #e8e4f5; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
* { box-sizing: border-box; }
img { border: 0; }

/* ---------- comum ---------- */
.screen { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.brand { font-size: 44px; font-weight: bold; color: #fff; letter-spacing: 1px; }
.brand span { color: #9d8bff; }
.muted { color: #8a82a6; }
.green { color: #38d68f; }
.center { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.spinner { width: 72px; height: 72px; border: 7px solid rgba(255,255,255,0.15); border-top-color: #9d8bff; border-radius: 50%; -webkit-animation: spin 0.9s linear infinite; animation: spin 0.9s linear infinite; }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.msg { font-size: 30px; margin-top: 34px; color: #c3bcd9; text-align: center; }
.hidden { display: none; }
.wait { background: #0c0a17; }

/* ---------- login ---------- */
.login { padding: 110px 0 0 220px; }
.login h1 { font-size: 58px; margin: 0 0 14px; color: #fff; }
.login .lede { font-size: 28px; color: #b6afd0; margin: 0 0 54px; max-width: 1000px; line-height: 40px; }
.field { width: 760px; margin: 0 0 26px; }
.field label { display: block; font-size: 24px; color: #9d8bff; margin: 0 0 10px; }
.field input { width: 100%; height: 84px; font-size: 34px; padding: 0 26px; border-radius: 14px; border: 4px solid #2a2350; background: #151029; color: #fff; outline: none; }
.field.on input { border-color: #fff; background: #1d1440; }
.btn { display: inline-block; min-width: 300px; height: 84px; line-height: 76px; text-align: center; font-size: 32px; font-weight: bold; border-radius: 14px; border: 4px solid transparent; background: #4c33e2; color: #fff; margin-top: 10px; }
.btn.on { border-color: #fff; background: #5d45f0; }
.btn.pay-btn { margin-left: 24px; background: #1f8f5a; }
.btn.pay-btn.on { background: #27a86b; }
.error { font-size: 28px; color: #ff8a8a; margin: 26px 0 0; min-height: 40px; max-width: 1100px; line-height: 38px; }
.macbox { position: absolute; right: 160px; top: 230px; width: 560px; padding: 40px 44px; border-radius: 22px; background: #151029; }
.macbox h2 { margin: 0 0 18px; font-size: 30px; color: #fff; }
.macbox p { margin: 0 0 22px; font-size: 24px; color: #b6afd0; line-height: 34px; }
.macbox .mac { font-size: 42px; font-weight: bold; color: #38d68f; letter-spacing: 2px; }

/* ---------- marca ---------- */
.logo { position: relative; white-space: nowrap; }
.logo svg { display: inline-block !important; vertical-align: top; }
.logo-name { display: inline-block; vertical-align: top; margin-left: 18px; font-weight: bold; color: #fff; letter-spacing: 0.5px; }
.logo-play { color: #FFC94A; }
.login .logo { margin-bottom: 10px; }
.boot-logo { display: inline-block; margin-bottom: 60px; }

/* ---------- aviso da loja e ativação ---------- */
.disclaimer, .activation { background: #0b0916; overflow: hidden; }
.dc-glow { position: absolute; left: -300px; bottom: -420px; width: 1100px; height: 1100px; border-radius: 550px; background: -webkit-radial-gradient(center, circle, rgba(107,75,255,0.45), rgba(107,75,255,0) 70%); background: radial-gradient(circle at center, rgba(107,75,255,0.45), rgba(107,75,255,0) 70%); }
.dc-box { position: absolute; left: 410px; top: 130px; width: 1100px; padding: 60px 70px 56px; border-radius: 32px; background: rgba(21,16,41,0.92); border: 2px solid rgba(157,139,255,0.25); }
.dc-mark { position: absolute; right: 70px; top: 54px; }
.dc-title { font-size: 54px; font-weight: bold; color: #fff; margin-bottom: 40px; }
.dc-item { position: relative; padding-left: 74px; margin-bottom: 30px; font-size: 30px; line-height: 44px; color: #d8d2ec; }
.dc-item svg { position: absolute; left: 0; top: 2px; }
.dc-item b { color: #fff; }
.dc-btns { margin-top: 16px; }
.dc-ok { padding-left: 40px !important; }
.ac-left { position: absolute; left: 140px; top: 90px; width: 980px; }
/* Aberta pelos Ajustes: cobre a tela toda (o contêiner raiz tem transform, então fixed = 1920x1080). */
.ac-over { position: fixed; left: 0; top: 0; z-index: 60; }
.ac-title { font-size: 54px; font-weight: bold; color: #fff; margin: 30px 0 8px; }
.ac-sub { font-size: 30px; line-height: 40px; color: #b6afd0; margin-bottom: 18px; }
.ac-how { font-size: 28px; line-height: 38px; color: #d8d2ec; }
.ac-how b { color: #9d8bff; }
.ac-ids { margin: 24px 0 24px; padding: 20px 34px; border-radius: 18px; background: rgba(255,255,255,0.06); }
.ac-ids div { font-size: 32px; line-height: 46px; }
.ac-ids span { display: inline-block; width: 260px; }
.ac-ids b { color: #38d68f; letter-spacing: 2px; }
.ac-code input { letter-spacing: 4px; text-transform: uppercase; }
.activation .dt-btns { margin-top: 10px; width: 980px; }
.activation .dt-btn { padding: 0 40px; }
.ac-msg { margin-top: 18px; min-height: 40px; font-size: 28px; line-height: 38px; color: #ff8a8a; }
.ac-msg.ok { color: #38d68f; }
.ac-qr { position: absolute; right: 150px; top: 200px; width: 480px; height: 480px; border-radius: 28px; background: #fff; overflow: hidden; }
.ac-qr img { width: 480px; height: 480px; display: block; image-rendering: pixelated; }
.ac-qr-cap { position: absolute; right: 150px; top: 704px; width: 480px; text-align: center; font-size: 26px; line-height: 36px; color: #b6afd0; }

/* Suas listas (loja): mesma base da tela de ativação */
.playlists .ac-sub { margin-bottom: 26px; }
.pl-rows { width: 980px; min-height: 110px; }
.pl-row { position: relative; height: 96px; margin-bottom: 12px; padding: 12px 30px; box-sizing: border-box; border-radius: 16px; border: 4px solid transparent; background: rgba(255,255,255,0.07); }
.pl-row.on { border-color: #fff; background: rgba(255,255,255,0.14); }
.pl-row b { display: block; max-width: 740px; font-size: 32px; line-height: 38px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row span { display: block; max-width: 740px; font-size: 22px; line-height: 30px; color: #b6afd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row.cur:not(.on) { border-color: rgba(255,255,255,0.35); }
.pl-row.cur b, .pl-row.cur span { max-width: 480px; }
.pl-acts { position: absolute; right: 20px; top: 20px; }
.pl-act { display: inline-block; margin-left: 12px; padding: 0 22px; height: 48px; line-height: 44px; border-radius: 24px; border: 3px solid transparent; background: rgba(255,255,255,0.12); color: #e8e4f5; font-size: 22px; font-style: normal; font-weight: bold; }
.pl-act.on { background: #fff; color: #0c0a17; }
.modal-box.pl-confirm { left: 560px; top: 300px; width: 800px; text-align: left; }
.pl-confirm p { color: #c3bcd9; }
.pl-lock { display: inline-block; margin-left: 14px; vertical-align: middle; font-style: normal; color: #ffb36b; }
.pl-tag { position: absolute; right: 26px; top: 26px; padding: 4px 16px; border-radius: 18px; background: rgba(56,214,143,0.16); color: #38d68f; font-size: 22px; font-style: normal; font-weight: bold; }
.pl-empty { padding: 16px 0 24px; font-size: 28px; line-height: 40px; color: #b6afd0; }
.pl-more { margin: 0 0 10px 6px; font-size: 22px; color: #8a82a6; }
.pl-ids { position: absolute; right: 150px; top: 806px; width: 480px; text-align: center; font-size: 26px; line-height: 40px; color: #b6afd0; }
.pl-ids span { display: block; }
.pl-ids b { color: #38d68f; letter-spacing: 1px; }
.playlists .modal, .list-pin .modal { left: 0; }
.modal-box.pl-form { left: 460px; top: 70px; width: 1000px; padding: 40px 50px; text-align: left; }
.pl-form .field { width: 900px; margin-bottom: 16px; }
.pl-form .field input { height: 72px; font-size: 30px; }
.pl-kinds { display: inline-block; margin: 16px 0 22px; padding: 8px; border-radius: 40px; border: 4px solid transparent; }
.pl-kinds.on { border-color: #fff; }
.pl-kinds em { margin-left: 10px; font-size: 22px; font-style: normal; color: #8a82a6; }

/* ---------- tela de entrada (mosaico) ---------- */
.hub { background: #0b0916; overflow: hidden; }
.hub-bg { position: absolute; right: 0; top: 0; width: 1500px; height: 844px; object-fit: cover; opacity: 0.32; }
.hub-fade { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: -webkit-linear-gradient(left, #0b0916 25%, rgba(11,9,22,0.6) 60%, rgba(11,9,22,0.2) 100%); background: linear-gradient(to right, #0b0916 25%, rgba(11,9,22,0.6) 60%, rgba(11,9,22,0.2) 100%); }
.hub-fade:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 520px; background: -webkit-linear-gradient(top, rgba(11,9,22,0), #0b0916 70%); background: linear-gradient(to bottom, rgba(11,9,22,0), #0b0916 70%); }
.hub-orb { position: absolute; left: -260px; top: 520px; width: 900px; height: 900px; border-radius: 450px; background: -webkit-radial-gradient(center, circle, rgba(213,60,239,0.22), rgba(213,60,239,0) 70%); background: radial-gradient(circle at center, rgba(213,60,239,0.22), rgba(213,60,239,0) 70%); }
.hub-head { position: absolute; left: 100px; right: 100px; top: 56px; height: 80px; }
.hub-trial { position: absolute; left: 420px; top: 14px; padding: 8px 22px; border-radius: 24px; background: rgba(56,214,143,0.15); color: #38d68f; font-size: 24px; font-weight: bold; }
.hub-clock { position: absolute; right: 0; top: -4px; text-align: right; }
.hub-clock b { display: block; font-size: 56px; line-height: 60px; color: #fff; }
.hub-clock span { display: block; font-size: 24px; color: #b6afd0; }
.hub-hello { position: absolute; left: 100px; top: 182px; font-size: 64px; font-weight: bold; color: #fff; }
.hub-ask { position: absolute; left: 102px; top: 266px; font-size: 30px; color: #b6afd0; }
/* Destaque sem animação e sem sombra desfocada: na C1 a animação com sombra dava 4 a 6 quadros de 70-180 ms ("arraste", 03/10). */
.tile { position: absolute; border-radius: 30px; background: rgba(255,255,255,0.06); border: 3px solid rgba(255,255,255,0.08); overflow: hidden; }
.tile.on { border-color: #fff; background: rgba(255,255,255,0.11); -webkit-transform: scale(1.03); transform: scale(1.03); box-shadow: 0 0 0 8px rgba(157,139,255,0.28); z-index: 2; }
.t-title { position: absolute; left: 40px; top: 36px; font-size: 44px; font-weight: bold; color: #fff; }
.t-title.big { top: auto; bottom: 96px; font-size: 64px; }
.t-title.small { left: 120px; top: 36px; font-size: 36px; }
.t-sub { position: absolute; left: 40px; top: 96px; font-size: 26px; color: #c3bcd9; }
.t-live { left: 100px; top: 340px; width: 680px; height: 540px; background: -webkit-linear-gradient(-45deg, #5b3cff 0%, #2c1b86 55%, #191036 100%); background: linear-gradient(135deg, #5b3cff 0%, #2c1b86 55%, #191036 100%); }
.t-live.on { background: -webkit-linear-gradient(-45deg, #6d50ff 0%, #3a24a8 55%, #211548 100%); background: linear-gradient(135deg, #6d50ff 0%, #3a24a8 55%, #211548 100%); }
.t-live .t-sub { top: auto; bottom: 52px; }
.t-live-icon { position: absolute; right: -30px; top: 40px; }
.live-pill { position: absolute; left: 40px; top: 40px; padding: 8px 20px 8px 18px; border-radius: 22px; background: #e50914; color: #fff; font-size: 22px; font-weight: bold; letter-spacing: 1px; }
.live-pill span { display: inline-block; width: 12px; height: 12px; border-radius: 6px; background: #fff; margin-right: 10px; vertical-align: 1px; -webkit-animation: pulse 1.2s ease-in-out infinite; animation: pulse 1.2s ease-in-out infinite; }
@-webkit-keyframes pulse { 50% { opacity: 0.25; } }
@keyframes pulse { 50% { opacity: 0.25; } }
.t-movies { left: 810px; top: 340px; width: 560px; height: 260px; }
.t-series { left: 810px; top: 620px; width: 560px; height: 260px; }
.fan { position: absolute; right: 20px; top: 26px; width: 300px; height: 230px; }
.fan img { position: absolute; top: 10px; width: 130px; height: 195px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,0.6); }
.fan-0 { left: 0; -webkit-transform: rotate(-9deg); transform: rotate(-9deg); }
.fan-1 { left: 85px; top: 0 !important; z-index: 2; }
.fan-2 { left: 170px; -webkit-transform: rotate(9deg); transform: rotate(9deg); }
.t-movies .t-sub, .t-series .t-sub { top: 98px; }
.t-art { position: absolute; right: 50px; top: 40px; }
.t-activate { background: -webkit-linear-gradient(-45deg, #6B4BFF, #D53CEF); background: linear-gradient(135deg, #6B4BFF, #D53CEF); }
.t-activate .t-sub { color: #fff; }
.t-side { left: 1400px; width: 420px; height: 160px; }
.t-side svg { position: absolute; left: 40px; top: 32px; }
.t-side .t-sub { left: 120px; top: 86px; font-size: 24px; }
.t-sports { top: 340px; }
.t-favs { top: 530px; }
.t-account { top: 720px; }
.t-cont { left: 100px; top: 910px; width: 1270px; height: 130px; }
.cont-poster { position: absolute; left: 22px; top: 14px; width: 68px; height: 102px; object-fit: cover; border-radius: 8px; background: #1d1838; }
.cont-label { position: absolute; left: 120px; top: 20px; font-size: 22px; color: #9d8bff; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.cont-title { position: absolute; left: 120px; top: 52px; right: 40px; font-size: 32px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-bar { position: absolute; left: 120px; right: 40px; bottom: 18px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15); overflow: hidden; }
.cont-bar div { height: 6px; background: #e50914; }
.hub-foot { position: absolute; right: 100px; bottom: 40px; width: 420px; font-size: 20px; line-height: 28px; color: #6d6688; text-align: right; }
.hub-foot b { color: #8a82a6; }
.hub-lic { margin-bottom: 8px; font-size: 22px; color: #8a82a6; }
.hub-lic.warn, .rail-lic.warn { color: #f5c518; font-weight: bold; }
.rail-lic { position: absolute; left: 34px; right: 20px; bottom: 16px; font-size: 18px; line-height: 24px; color: #8a82a6; white-space: normal; }
.home-lic { position: absolute; right: 60px; top: 44px; height: 52px; line-height: 52px; padding: 0 24px; border-radius: 26px; background: rgba(245,197,24,0.16); color: #f5c518; font-size: 24px; font-weight: bold; z-index: 3; }
.home-lic.low { top: 108px; }

/* ---------- menu lateral ---------- */
.rail { position: absolute; left: 0; top: 0; width: 140px; height: 1080px; padding-top: 50px; background: #0a0814; box-shadow: inset -1px 0 0 rgba(255,255,255,0.08); z-index: 5; -webkit-transition: width 0.15s; transition: width 0.15s; overflow: hidden; }
.rail.open { width: 340px; background: #120e24; box-shadow: 30px 0 80px rgba(0,0,0,0.75); }
.rail-brand { height: 110px; padding-left: 44px; -webkit-transition: padding-left 0.15s; transition: padding-left 0.15s; }
/* Menu aberto: a coroa no centro da coluna. */
.rail.open .rail-brand { padding-left: 144px; }
.rail-item { position: relative; height: 88px; margin: 0 14px 8px; padding-left: 26px; border-radius: 16px; color: #8a82a6; white-space: nowrap; }
.rail-item svg { position: absolute; left: 36px; top: 24px; }
.rail-label { position: absolute; left: 102px; top: 0; line-height: 88px; font-size: 32px; opacity: 0; }
.rail.open .rail-label { opacity: 1; }
.rail-item.cur { color: #fff; }
.rail-item.cur svg { fill: #9d8bff; }
.rail-item.cur:before { content: ""; position: absolute; left: -14px; top: 22px; width: 6px; height: 44px; border-radius: 3px; background: #9d8bff; }
.rail-item.on { background: #4c33e2; color: #fff; }

/* ---------- telas ---------- */
.section { position: absolute; left: 160px; top: 0; width: 1760px; height: 1080px; }
.sec-title { position: absolute; left: 0; top: 56px; font-size: 44px; font-weight: bold; color: #fff; }
.hint { position: absolute; right: 70px; top: 72px; font-size: 24px; color: #8a82a6; }
.empty { font-size: 30px; color: #8a82a6; padding: 30px; }

.row { position: absolute; left: 0; right: 0; height: 76px; line-height: 76px; padding: 0 28px; font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 12px; color: #c3bcd9; }
.row.sel { background: #1a1336; color: #fff; }
.row.on { background: #4c33e2; color: #fff; }
.row .num { position: absolute; left: 24px; top: 0; width: 70px; color: #8a82a6; font-size: 26px; }
.row.on .num { color: #fff; }
.row .fav { margin-left: 16px; color: #ff6b8a; }
.row .dur { position: absolute; right: 26px; top: 0; color: #8a82a6; font-size: 24px; }
.row.on .dur { color: #fff; }

/* TV ao vivo */
.live .cats { position: absolute; left: 14px; top: 164px; width: 442px; overflow: hidden; }
.live .chans { position: absolute; left: 504px; top: 164px; width: 452px; overflow: hidden; }
.live .chans .row { padding: 0 14px; }
.live .chans.sq { top: 264px; }
.live .search-field { left: 504px; top: 164px; width: 452px; height: 84px; }
.live .search-field svg { left: 22px; top: 16px; }
.live .search-field input { left: 80px; width: 352px; height: 76px; font-size: 32px; }
.row-search { display: flex; align-items: center; height: 76px; }
.row-search svg { margin-right: 18px; }
.chinfo { position: absolute; left: 990px; top: 150px; width: 710px; height: 860px; padding: 34px; border-radius: 22px; background: #151029; overflow: hidden; }
/* Painéis das categorias e dos canais (como o do canal). */
.lv-box { position: absolute; top: 150px; height: 860px; border-radius: 22px; background: #151029; }
.lv-cats { left: 0; width: 470px; }
.lv-chans { left: 490px; width: 480px; }
/* Categoria: nome (letreiro na linha em foco) e a contagem numa coluna à direita. */
.cat-row { position: absolute; left: 24px; right: 20px; top: 0; height: 76px; }
.cat-name { position: absolute; left: 0; right: 80px; top: 0; }
.cat-n { position: absolute; right: 0; top: 0; width: 72px; text-align: right; font-size: 26px; color: #8a82a6; }
.row.on .cat-n { color: #fff; }
.cat-lock { position: absolute; right: 80px; top: 22px; color: #ffb36b; }
.cat-lock svg { display: block; }
.mq { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mq.run { text-overflow: clip; }
/* Canal: logo na caixinha preta (sem logo, o número), nome, selo discreto. */
.ch-row { position: absolute; left: 14px; right: 14px; top: 0; height: 76px; }
.ch-logo { position: absolute; left: 0; top: 16px; width: 64px; height: 44px; line-height: 44px; border-radius: 10px; background: #000; text-align: center; font-size: 22px; font-weight: bold; color: #8a82a6; overflow: hidden; }
.ch-logo img { display: block; width: 58px; height: 38px; margin: 3px; object-fit: contain; }
.ch-logo[data-n]:after { content: attr(data-n); }
.ch-name { position: absolute; left: 78px; right: 80px; top: 0; }
.ch-row .fav { position: absolute; right: 70px; top: 0; margin: 0; }
.ch-lock { position: absolute; right: 70px; top: 22px; color: #ffb36b; }
.ch-lock svg { display: block; }
.row .ch-row.open:before { content: ""; position: absolute; left: -14px; right: -14px; top: 0; bottom: 0; border: 3px solid #fff; border-radius: 12px; box-sizing: border-box; }
/* Janela (mini player); selo e controles na beirada, como o Android. */
.win-wrap { position: relative; width: 642px; height: 361px; margin-bottom: 48px; }
.win { position: absolute; left: 0; top: 0; width: 642px; height: 361px; border-radius: 14px; background: #000; overflow: hidden; }
.win-logo { position: absolute; left: 201px; top: 113px; width: 240px; height: 135px; object-fit: contain; }
.win-video { position: absolute; left: 0; top: 0; width: 642px; height: 361px; background: #000; opacity: 0; }
.win-video.on { opacity: 1; }
.win-msg { position: absolute; left: 0; right: 0; bottom: 52px; text-align: center; font-size: 24px; color: #8a82a6; }
.win-live { position: absolute; left: 16px; top: -18px; padding: 0 12px; height: 36px; line-height: 36px; border-radius: 18px; background: #e11d2e; color: #fff; font-size: 20px; font-weight: bold; }
.win-edge { position: absolute; left: 16px; right: 16px; bottom: -26px; height: 52px; white-space: nowrap; }
.edge-btn { position: relative; display: inline-block; width: 52px; height: 52px; margin-right: 10px; border-radius: 12px; background: #241e3a; color: #fff; text-align: center; vertical-align: top; }
.edge-btn svg { display: inline-block !important; vertical-align: middle; margin-top: 11px; }
.edge-btn.q { position: absolute; right: 0; top: 0; width: auto; margin: 0; padding: 0 8px 0 16px; }
.edge-btn.q span { display: inline-block; vertical-align: top; line-height: 52px; font-size: 22px; font-weight: bold; margin-right: 2px; }
.edge-btn.fav { color: #ff6b8a; }
.edge-btn.lk { width: auto; padding: 0 16px 0 12px; }
.edge-btn.lk span { display: inline-block; vertical-align: top; line-height: 52px; font-size: 22px; font-weight: bold; margin-left: 6px; }
.edge-btn.q.best { background: #e50914; }
.edge-btn.on { background: #fff; color: #0c0a17; }
.vol-pop { position: absolute; left: 6px; bottom: 62px; width: 40px; height: 150px; border-radius: 12px; background: rgba(26,21,48,0.96); }
.vol-bar { position: absolute; left: 16px; top: 14px; bottom: 14px; width: 8px; border-radius: 4px; background: rgba(255,255,255,0.18); overflow: hidden; }
.vol-bar div { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; }
.q-menu { position: absolute; right: 16px; bottom: 36px; width: 160px; padding: 6px; border-radius: 12px; background: rgba(26,21,48,0.96); }
.q-item { height: 52px; line-height: 52px; padding-left: 20px; border-radius: 10px; font-size: 24px; font-weight: bold; color: #c3bcd9; }
.q-item.cur { background: #e50914; color: #fff; }
.q-item.on { background: #fff; color: #0c0a17; }
.ch-head { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height: 60px; margin-bottom: 24px; }
.chlogo { display: block; max-width: 120px; max-height: 60px; margin-right: 18px; }
.chname { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; font-size: 36px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epg { margin-bottom: 30px; }
.epg-label { font-size: 22px; color: #9d8bff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.epg-title { font-size: 32px; color: #fff; line-height: 42px; }
.epg-title.small { font-size: 28px; color: #c3bcd9; }
.epg-desc { font-size: 24px; color: #b6afd0; line-height: 34px; margin-top: 14px; max-height: 204px; overflow: hidden; }
.bar { height: 8px; border-radius: 4px; background: #2a2350; margin-top: 16px; overflow: hidden; }
.bar div { height: 8px; background: #9d8bff; }

/* Filmes e séries */
.browse .bcats { position: absolute; left: 0; top: 150px; width: 400px; overflow: hidden; }
.browse .bgrid { position: absolute; left: 430px; top: 150px; width: 1300px; overflow: hidden; }
.browse .bgrid.sq { top: 270px; }
.browse .search-field { left: 430px; top: 150px; width: 1300px; height: 84px; }
.browse .search-field svg { left: 22px; top: 16px; }
.browse .search-field input { left: 80px; width: 1190px; height: 76px; font-size: 32px; }
.grid { position: relative; }
.cell { position: absolute; }
.poster { position: absolute; left: 10px; top: 6px; width: 190px; }
.poster-img { position: relative; width: 190px; height: 285px; border-radius: 12px; overflow: hidden; background: #1d1838; border: 4px solid transparent; }
.poster-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo de canal (Início de lista só de canais): inteira, sobre fundo, sem cortar. */
.rcell.logo .poster-img img { object-fit: contain; padding: 26px; box-sizing: border-box; }
/* Canal sem logo (ou logo que não abriu): o nome no meio do cartão. */
.rcell.logo .poster-name { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; font-size: 26px; font-weight: bold; color: #e8e4f5; }
/* Sem capa no Continuar: a logo do Lord Play no meio. */
.poster-brand { position: absolute; left: 0; right: 0; top: 50%; margin-top: -48px; }
.poster-brand svg { margin: 0 auto; }
.cont-poster.brand svg { margin: 25px auto 0; }
.poster-name { padding: 20px 16px; font-size: 24px; line-height: 32px; color: #c3bcd9; }
/* X da capa: tira do Continuar assistindo (como o Android). */
.poster-x { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 20px; background: rgba(42,18,24,0.92); border: 2px solid rgba(255,138,128,0.7); color: #ff8a80; z-index: 2; }
.poster-x svg { position: absolute; left: 7px; top: 7px; }
.poster.on .poster-x { background: #8b1e3f; border-color: #fff; color: #fff; }
.browse-keys { position: absolute; left: 330px; top: 58px; }
.poster-title { margin-top: 10px; font-size: 22px; line-height: 28px; height: 28px; color: #c3bcd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-sub { font-size: 20px; color: #8a82a6; }
.poster-more { padding-top: 46px; text-align: center; }
.poster-more b { display: block; font-size: 120px; line-height: 130px; font-weight: normal; color: #fff; }
.poster-more span { display: block; margin-top: 8px; font-size: 26px; font-weight: bold; color: #e8e4f5; }
.search-partial { margin-top: 18px; font-size: 24px; color: #8a82a6; }
.poster-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(0,0,0,0.6); }
.poster-bar div { height: 8px; background: #e50914; }
.poster.on .poster-img { border-color: #fff; -webkit-transform: scale(1.06); transform: scale(1.06); box-shadow: 0 16px 40px rgba(0,0,0,0.7); }
.poster.on .poster-title { color: #fff; font-weight: bold; }

/* Fileiras (Início e Busca) */
.rows { position: relative; overflow: hidden; }
.rrow { position: absolute; left: 0; right: 0; height: 430px; }
.rrow-title { height: 56px; font-size: 32px; font-weight: bold; color: #fff; padding-left: 10px; text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
.rrow-cards { position: relative; height: 370px; }
.rcell { position: absolute; top: 0; width: 224px; height: 370px; }

/* Início */
.home2 { left: 120px; width: 1800px; }
/* Destaque em tela cheia (como no app Android e no Netflix): a imagem ocupa a largura toda e desce
   por trás das fileiras, sumindo no fundo; a imagem ampliada fica um pouco suave, de propósito. */
.hero { position: absolute; left: 0; top: 0; width: 1800px; height: 1080px; overflow: hidden; }
.hero-bg { position: absolute; right: 0; top: 0; width: 1800px; height: 1013px; }
.hero-bg img { width: 1800px; height: 1013px; object-fit: cover; object-position: center top; display: block; }
.hero-bg img.tall { width: 1100px; margin-left: 700px; object-fit: contain; object-position: right top; }
.hero-fade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(left, #0c0a17 0%, rgba(12,10,23,0.88) 26%, rgba(12,10,23,0.35) 52%, rgba(12,10,23,0) 72%); background: linear-gradient(to right, #0c0a17 0%, rgba(12,10,23,0.88) 26%, rgba(12,10,23,0.35) 52%, rgba(12,10,23,0) 72%); }
.hero-fade:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 560px; background: -webkit-linear-gradient(top, rgba(12,10,23,0) 0%, rgba(12,10,23,0.55) 35%, rgba(12,10,23,0.92) 75%, #0c0a17 100%); background: linear-gradient(to bottom, rgba(12,10,23,0) 0%, rgba(12,10,23,0.55) 35%, rgba(12,10,23,0.92) 75%, #0c0a17 100%); }
.hero-body { position: absolute; left: 80px; top: 70px; width: 980px; text-shadow: 0 2px 8px rgba(0,0,0,0.55); }
/* Cabeçalho do destaque com altura fixa: chamada + logo (ou nome) apoiados embaixo, para nota,
   sinopse, botões e bolinhas ficarem no mesmo lugar em todos os slides. */
.hero-head { height: 220px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; justify-content: flex-end; }
.hero-kicker { font-size: 26px; color: #9d8bff; font-weight: bold; margin-bottom: 12px; }
.hero-title { font-size: 68px; font-weight: bold; color: #fff; line-height: 78px; max-height: 156px; overflow: hidden; }
/* Logo do título (TMDB) no lugar do nome: no máximo a altura de um nome de duas linhas. */
.hero-logo img { display: block; }
.hero-plot { font-size: 26px; color: #c3bcd9; line-height: 36px; height: 108px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hero-dots { margin-top: 24px; height: 14px; }
.hero-dot { display: inline-block; width: 14px; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.3); margin-right: 12px; }
.hero-dot.on { background: #fff; }
.home-rows { position: absolute; left: 40px; width: 1740px; }

/* Ficha */
.detail { background: #0c0a17; }
.detail.in { -webkit-animation: dtIn 0.25s ease-out; animation: dtIn 0.25s ease-out; }
@-webkit-keyframes dtIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dtIn { from { opacity: 0; } to { opacity: 1; } }
/* Ficha preparando: a capa da grade com o carregando, no meio da tela. */
.dt-loading { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dt-load-poster { width: 240px; height: 360px; border-radius: 16px; overflow: hidden; background: #1a1530; box-shadow: 0 24px 60px rgba(0,0,0,0.55); margin-bottom: 44px; }
.dt-load-poster img { width: 240px; height: 360px; object-fit: cover; display: block; }
.dt-load-title { margin-top: 30px; font-size: 32px; color: #c3bcd9; max-width: 1200px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-bg { position: absolute; right: 0; top: 0; width: 1500px; height: 844px; }
.dt-bg img { width: 1500px; height: 844px; object-fit: cover; display: block; }
.dt-fade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(left, #0c0a17 0%, rgba(12,10,23,0.9) 35%, rgba(12,10,23,0.2) 80%); background: linear-gradient(to right, #0c0a17 0%, rgba(12,10,23,0.9) 35%, rgba(12,10,23,0.2) 80%); }
.dt-fade:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 320px; background: -webkit-linear-gradient(top, rgba(12,10,23,0), #0c0a17); background: linear-gradient(to bottom, rgba(12,10,23,0), #0c0a17); }
.dt-body { position: absolute; left: 140px; top: 170px; width: 1100px; }
.dt-body.series { top: 90px; }
.dt-title { font-size: 70px; font-weight: bold; color: #fff; line-height: 80px; max-height: 160px; overflow: hidden; }
.dt-meta { margin: 18px 0 20px; font-size: 28px; color: #c3bcd9; height: 36px; }
.dt-meta span { margin-right: 30px; }
.dt-meta .hero-genre { color: #e8e4f5; }
.dt-rate { color: #fff; font-weight: bold; }
.dt-rate svg { display: inline-block !important; vertical-align: -4px; margin-right: 8px; }
.dt-plot { font-size: 28px; line-height: 40px; color: #d8d2ec; max-height: 160px; overflow: hidden; }
.dt-plot.short { max-height: 120px; }
.dt-small { font-size: 24px; color: #8a82a6; margin-top: 14px; max-height: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dt-small b { color: #b6afd0; }
.dt-btns { margin-top: 34px; height: 90px; }
.dt-btn { position: relative; display: inline-block; height: 84px; line-height: 76px; padding: 0 40px 0 90px; margin-right: 22px; font-size: 30px; font-weight: bold; border-radius: 14px; border: 4px solid transparent; background: rgba(255,255,255,0.12); color: #fff; }
.dt-btn svg { position: absolute; left: 34px; top: 20px; }
.dt-btn.on { background: #fff; color: #0c0a17; }
.dt-seasons { margin-top: 26px; height: 70px; white-space: nowrap; overflow: hidden; }
.chip { display: inline-block; height: 60px; line-height: 52px; padding: 0 28px; margin-right: 14px; font-size: 26px; border-radius: 30px; border: 4px solid transparent; background: rgba(255,255,255,0.1); color: #c3bcd9; }
.chip.sel { background: #4c33e2; color: #fff; }
.chip.on { border-color: #fff; }

/* Player */
.player { background: #000; }
.player video { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #000; }
.osd { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; padding: 60px 90px 0; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.85)); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.85)); }
.osd .ch { font-size: 50px; color: #fff; font-weight: bold; }
.osd .num { color: #9d8bff; margin-right: 22px; }
.osd .state { font-size: 28px; color: #c3bcd9; margin-top: 12px; }
.losd { position: absolute; left: 0; right: 0; bottom: 0; height: 330px; padding: 80px 90px 0; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9)); }
.losd-logo { position: absolute; left: 90px; top: 96px; max-width: 200px; max-height: 120px; }
.losd-body { position: absolute; left: 330px; right: 90px; top: 80px; }
.losd-ch { font-size: 48px; color: #fff; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.losd-ch .num { color: #9d8bff; margin-right: 22px; }
.losd-ch .fav { color: #ff6b8a; margin-left: 18px; }
.losd-epg { font-size: 30px; color: #fff; margin-top: 12px; width: 1100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.losd-epg .bar { width: 600px; margin-top: 10px; }
.losd-now { color: #9d8bff; }
.losd-next { font-size: 26px; color: #c3bcd9; margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.losd-state { font-size: 24px; color: #b6afd0; margin-top: 14px; }
.digits { position: absolute; right: 90px; top: 70px; padding: 10px 34px; border-radius: 16px; background: rgba(0,0,0,0.7); font-size: 80px; font-weight: bold; color: #fff; }
.drawer { position: absolute; left: 0; top: 0; width: 760px; height: 1080px; padding: 40px 40px 0; background: rgba(12,10,23,0.94); }
.drawer-title { font-size: 40px; font-weight: bold; color: #fff; height: 64px; }
.drawer-list { position: absolute; left: 30px; right: 30px; top: 120px; overflow: hidden; }
.drawer-list .row { padding-left: 110px; }
.tracks { position: absolute; right: 0; top: 0; width: 760px; height: 1080px; padding: 40px 40px 0; background: rgba(12,10,23,0.94); }
.tracks .drawer-list .row { padding-left: 30px; white-space: pre; }
.vosd-top { position: absolute; left: 0; right: 0; top: 0; height: 220px; padding: 60px 90px 0; background: -webkit-linear-gradient(top, rgba(0,0,0,0.85), rgba(0,0,0,0)); background: linear-gradient(to bottom, rgba(0,0,0,0.85), rgba(0,0,0,0)); }
.vosd-title { font-size: 46px; font-weight: bold; color: #fff; }
.vosd-sub { font-size: 30px; color: #c3bcd9; margin-top: 8px; }
.vosd-state { position: absolute; left: 0; right: 0; top: 500px; text-align: center; font-size: 34px; color: #fff; text-shadow: 0 2px 10px #000; }
.vosd-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; padding: 90px 90px 0; background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.9)); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.9)); }
.vosd-row { position: relative; height: 70px; }
.vosd-btn { position: absolute; left: 0; top: 4px; color: #fff; }
.vosd-time { position: absolute; top: 18px; font-size: 30px; color: #fff; width: 150px; }
.vosd-row .vosd-time:nth-of-type(2) { left: 90px; }
.vosd-row .vosd-time:last-child { right: 0; text-align: right; }
.vosd-bar { position: absolute; left: 260px; right: 180px; top: 26px; height: 18px; }
.vosd-bar:before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.3); }
.vosd-fill { position: absolute; left: 0; top: 6px; height: 6px; border-radius: 3px; background: #e50914; }
.vosd-knob { position: absolute; top: -3px; width: 24px; height: 24px; margin-left: -12px; border-radius: 12px; background: #fff; }
.vosd-hint { font-size: 24px; color: #b6afd0; margin-top: 16px; }
.next-box { position: absolute; right: 90px; bottom: 120px; width: 620px; padding: 34px 40px; border-radius: 20px; background: rgba(18,14,36,0.94); border: 3px solid #4c33e2; }
.next-label { font-size: 26px; color: #9d8bff; }
.next-title { font-size: 34px; color: #fff; font-weight: bold; margin: 10px 0; line-height: 44px; }
.next-hint { font-size: 24px; color: #b6afd0; }

/* Esportes */
.sp-tabs { position: absolute; left: 0; top: 140px; width: 1700px; height: 70px; white-space: nowrap; overflow: hidden; }
.sp-msg { position: absolute; left: 0; top: 330px; width: 1700px; text-align: center; }
.sp-msg .spinner { margin: 0 auto; }
.sp-list { position: absolute; left: 0; top: 230px; width: 1700px; overflow: hidden; }
.sports .row { height: 124px; line-height: normal; padding: 0; background: #151029; }
.sports .row.on { background: #4c33e2; }
.fx { position: relative; height: 124px; }
.fx-badge { position: absolute; left: 30px; top: 30px; width: 230px; font-size: 26px; font-weight: bold; color: #c3bcd9; }
.fx-badge.live { color: #ff4d5e; }
.fx-league { position: absolute; left: 30px; top: 70px; width: 300px; font-size: 20px; color: #8a82a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.on .fx-league, .row.on .fx-badge { color: #fff; }
.fx-team { position: absolute; top: 0; width: 470px; height: 124px; line-height: 124px; font-size: 30px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-team img { width: 64px; height: 64px; object-fit: contain; vertical-align: middle; margin: 0 20px; }
.fx-team.home { left: 340px; text-align: right; }
.fx-team.away { left: 950px; text-align: left; }
.fx-score { position: absolute; left: 820px; top: 0; width: 120px; line-height: 124px; text-align: center; font-size: 40px; font-weight: bold; color: #fff; }
.fx-ch { position: absolute; right: 30px; top: 0; width: 250px; line-height: 124px; text-align: right; font-size: 24px; color: #9d8bff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-ch.none { color: #6d6688; }
.row.on .fx-ch { color: #fff; }
.toast { position: absolute; left: 400px; bottom: 60px; width: 1000px; padding: 26px 34px; border-radius: 18px; background: rgba(18,14,36,0.96); border: 3px solid #4c33e2; font-size: 28px; color: #fff; text-align: center; z-index: 10; }

/* Busca */
.search-field { position: absolute; left: 0; top: 150px; width: 1100px; height: 96px; border-radius: 18px; border: 4px solid #2a2350; background: #151029; color: #8a82a6; }
.search-field.on { border-color: #fff; }
.search-field svg { position: absolute; left: 28px; top: 22px; }
.search-field input { position: absolute; left: 100px; top: 0; width: 960px; height: 88px; border: 0; outline: none; background: transparent; color: #fff; font-size: 36px; }
.search-results { position: absolute; left: 0; top: 280px; width: 1740px; height: 800px; }
.search-results .msg { text-align: left; margin-top: 10px; }

/* Conta */
.acc-card { position: absolute; left: 0; top: 150px; width: 900px; padding: 40px 46px; border-radius: 22px; background: #151029; }
.acc-row { font-size: 30px; line-height: 64px; height: 64px; border-bottom: 1px solid #241d44; }
.acc-row span { display: inline-block; width: 300px; }
.acc-row b { color: #fff; }
.acc-row b.green { color: #38d68f; }
.acc-notices .muted { font-size: 26px; }
.acc-layout { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; min-height: 92px; padding: 16px 0 6px; box-sizing: border-box; font-size: 30px; border-bottom: 1px solid #241d44; }
.acc-layout > span { width: 300px; line-height: 60px; -webkit-flex-shrink: 0; flex-shrink: 0; }
.acc-chips { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 508px; }
.acc-chips .chip { margin: 0 12px 10px 0; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.acc-notices { position: absolute; left: 960px; top: 150px; width: 740px; height: 880px; overflow: hidden; }
.acc-notices h2 { font-size: 34px; color: #fff; margin: 10px 0 24px; }
.notice { padding: 24px 28px; margin-bottom: 18px; border-radius: 16px; background: #151029; }
.notice-title { font-size: 28px; font-weight: bold; color: #fff; margin-bottom: 8px; }
.notice-body { font-size: 24px; line-height: 34px; color: #c3bcd9; max-height: 136px; overflow: hidden; }
.notice-date { font-size: 20px; color: #8a82a6; margin-top: 10px; }

/* Aviso */
.notice-modal { background: rgba(5,4,12,0.88); z-index: 40; }
.notice-box { position: absolute; left: 460px; top: 140px; width: 1000px; max-height: 800px; padding: 50px 56px; border-radius: 26px; background: #151029; overflow: hidden; }
.notice-box img { display: block; max-width: 888px; max-height: 360px; margin-bottom: 26px; border-radius: 14px; }
.notice-box .notice-title { font-size: 42px; }
.notice-box .notice-body { font-size: 30px; line-height: 42px; max-height: 300px; }

.hb-icon { margin-bottom: 18px; }
.notice-box .dt-btns { margin-top: 34px; }

/* PIX */
.pay { background: rgba(5,4,12,0.92); z-index: 30; }
.pay-box { position: absolute; left: 230px; top: 90px; width: 1460px; height: 900px; padding: 50px 60px; border-radius: 26px; background: #151029; }
.pay-title { font-size: 46px; font-weight: bold; color: #fff; margin-bottom: 30px; }
.pay-qr { position: absolute; left: 60px; top: 150px; width: 520px; height: 520px; border-radius: 18px; background: #fff; overflow: hidden; }
.pay-qr img { width: 520px; height: 520px; display: block; image-rendering: pixelated; }
.pay-info { position: absolute; left: 640px; top: 150px; width: 760px; }
.pay-amount { font-size: 56px; font-weight: bold; color: #fff; margin-bottom: 20px; }
.pay-line { font-size: 30px; line-height: 42px; color: #d8d2ec; margin-bottom: 18px; }
.pay-line b { color: #fff; }
.pay-wait { font-size: 26px; color: #9d8bff; margin-top: 20px; line-height: 40px; }
.spinner.small { display: inline-block; width: 30px; height: 30px; border-width: 4px; vertical-align: -6px; margin-right: 12px; }
.pay-emv { margin-top: 30px; padding: 18px 22px; border-radius: 12px; background: #0c0a17; font-size: 18px; line-height: 26px; color: #8a82a6; word-break: break-all; max-height: 130px; overflow: hidden; }
.pay-center { position: absolute; left: 60px; right: 60px; top: 200px; text-align: center; }
.pay-center .spinner { margin: 0 auto; }
.pay-cpf { font-size: 72px; font-weight: bold; letter-spacing: 6px; color: #fff; margin: 30px 0; }
.pay-done { display: inline-block; width: 140px; height: 140px; border-radius: 70px; padding-top: 35px; background: #2a2350; color: #fff; margin-bottom: 26px; }
.pay-done svg { display: inline-block !important; }
.pay-done.ok { background: #1f8f5a; }
.pay-btns { position: absolute; left: 60px; bottom: 50px; }

/* PIN */
.modal { position: absolute; left: -160px; top: 0; width: 1920px; height: 1080px; background: rgba(5,4,12,0.82); z-index: 20; }
.modal-box { position: absolute; left: 660px; top: 170px; width: 600px; padding: 44px 50px; border-radius: 24px; background: #151029; text-align: center; }
.modal-box h2 { font-size: 38px; color: #fff; margin: 0 0 10px; }
.modal-box p { font-size: 24px; margin: 0 0 26px; }
.pin-dots { height: 40px; margin-bottom: 30px; }
.pin-dot { display: inline-block; width: 30px; height: 30px; border-radius: 15px; border: 3px solid #9d8bff; margin: 0 12px; }
.pin-dot.full { background: #9d8bff; }
.pin-pad { position: relative; width: 380px; height: 384px; margin: 0 auto; }
.pin-key { position: absolute; width: 110px; height: 80px; line-height: 74px; font-size: 34px; border-radius: 14px; border: 3px solid transparent; background: rgba(255,255,255,0.1); color: #fff; }
.pin-key.on { background: #fff; color: #0c0a17; }

/* Mosaico: seção que o kids / a Marca não libera */
.tile.t-off { opacity: 0.45; }
.t-lock { position: absolute; right: 26px; top: 24px; height: 40px; line-height: 40px; padding: 0 16px 0 12px; border-radius: 20px; background: rgba(0,0,0,0.55); font-size: 22px; color: #fff; }
.t-lock svg { display: inline-block !important; vertical-align: middle; margin: -4px 8px 0 0; }

/* Ajustes */
.settings .set-list { position: absolute; left: 0; top: 150px; width: 1040px; overflow: hidden; }
.settings .set-list .row { height: 72px; line-height: 72px; padding-right: 330px; }
.lk-logo { display: inline-block; width: 64px; height: 48px; margin: -4px 22px 0 0; vertical-align: middle; object-fit: contain; }
.set-val { position: absolute; right: 28px; top: 0; max-width: 300px; overflow: hidden; text-overflow: ellipsis; color: #8a82a6; font-size: 26px; }
.set-val.warn { color: #ffb36b; }
.row.on .set-val { color: #fff; }
.set-side { position: absolute; left: 1100px; top: 150px; width: 600px; }
.set-help { min-height: 120px; padding: 26px 30px; border-radius: 18px; background: #151029; font-size: 26px; line-height: 38px; color: #c3bcd9; }
.set-msg { min-height: 30px; padding: 14px 0 18px; font-size: 26px; color: #38d68f; }
.set-dev { padding: 14px 30px; border-radius: 18px; background: #151029; }
.set-dev .acc-row { font-size: 26px; line-height: 58px; height: 58px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-dev .acc-row:last-child { border-bottom: 0; }
.set-dev .acc-row span { width: 190px; }
.set-credit { position: relative; margin-top: 18px; padding: 16px 24px 16px 132px; min-height: 64px; border-radius: 18px; background: #151029; font-size: 20px; line-height: 28px; color: #8a82a6; }
.tmdb-badge { position: absolute; left: 24px; top: 18px; padding: 4px 12px; border-radius: 8px; background: -webkit-linear-gradient(left, #90cea1, #01b4e4); background: linear-gradient(to right, #90cea1, #01b4e4); color: #0d253f; font-size: 22px; font-weight: bold; letter-spacing: 1px; }
.set-support { position: relative; margin-top: 24px; height: 200px; padding: 20px; border-radius: 18px; background: #151029; }
.set-support img { position: absolute; left: 20px; top: 20px; width: 160px; height: 160px; border-radius: 8px; background: #fff; }
.set-support-text { position: absolute; left: 210px; right: 24px; top: 36px; font-size: 24px; line-height: 34px; }
.set-support-text b { display: block; font-size: 30px; color: #fff; margin-bottom: 6px; }

/* Cadeado nas listas (a fonte da TV não tem emoji) e tecla apagar do PIN */
.row-cut { display: block; margin-right: 40px; overflow: hidden; text-overflow: ellipsis; }
.row-lock { position: absolute; right: 22px; top: 22px; color: #ffb36b; }
.chans .row .row-lock { right: 104px; }
.row-lock svg { display: block; }
.pin-del { display: inline-block; vertical-align: middle; margin-top: -6px; }

/* Série: cabeçalho e painel de episódios (10 por página) */
.dt-body.series { top: 150px; }
.dt-body.series .dt-plot { max-height: 160px; }
.dt-next { margin-top: 26px; font-size: 28px; color: #c3bcd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-next b { color: #fff; }
.eps-panel { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(12,10,23,0.93); }
.eps-head { position: absolute; left: 140px; top: 44px; right: 140px; height: 110px; }
.eps-title { font-size: 44px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eps-sub { font-size: 26px; color: #8a82a6; margin-top: 6px; }
.eps-hint { position: absolute; right: 140px; top: 60px; font-size: 24px; color: #8a82a6; }
.eps-seasons { position: absolute; left: 140px; top: 170px; width: 380px; overflow: hidden; }
.eps-list { position: absolute; left: 560px; top: 170px; width: 1220px; overflow: hidden; }
.eps-list.wide { left: 140px; width: 1640px; }
.eps-list .row { height: 160px; line-height: normal; padding: 0; white-space: normal; background: rgba(255,255,255,0.04); border-radius: 16px; }
.eps-list .row.on { background: #4c33e2; }
.ep { position: relative; height: 160px; }
.ep-img { position: absolute; left: 8px; top: 8px; width: 256px; height: 144px; border-radius: 10px; overflow: hidden; background: #1a1336; }
.ep-img img { width: 256px; height: 144px; object-fit: cover; display: block; }
.ep-num { position: absolute; left: 8px; bottom: 8px; min-width: 40px; height: 34px; line-height: 34px; padding: 0 8px; border-radius: 8px; background: rgba(0,0,0,0.72); color: #fff; font-size: 22px; font-weight: bold; text-align: center; }
.ep-num svg { display: inline-block !important; vertical-align: -6px; }
.ep-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(255,255,255,0.18); }
.ep-bar div { height: 6px; background: #f5b545; }
.ep-text { position: absolute; left: 292px; right: 170px; top: 16px; }
.ep-name { font-size: 30px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-state { margin-top: 6px; font-size: 24px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-state.here { color: #ff9a4d; }
.ep-state.done { color: #38d68f; }
.ep-state.watching { color: #f5b545; }
.row.on .ep-state { color: #fff; }
.ep-about { margin-top: 8px; font-size: 23px; line-height: 32px; max-height: 64px; overflow: hidden; color: #b6afd0; }
.ep-about.long { max-height: 96px; }
.row.on .ep-about { color: #e8e4f6; }
.ep-dur { position: absolute; right: 26px; top: 20px; font-size: 24px; color: #8a82a6; }
.row.on .ep-dur { color: #fff; }
.ep.st { border-radius: 16px; }
.ep.st.here { background: #2a160c; box-shadow: inset 0 0 0 2px rgba(255,122,24,0.45); }
.ep.st.watching { background: #261f0e; box-shadow: inset 0 0 0 2px rgba(214,176,92,0.4); }
.ep.st.done { background: #0f2218; box-shadow: inset 0 0 0 2px rgba(46,204,113,0.3); }
.ep.st::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 16px 0 0 16px; }
.ep.st.here::before { background: #ff7a18; }
.ep.st.watching::before { background: #d6b05c; }
.ep.st.done::before { background: #2ecc71; }
.ep.st .ep-about { max-height: 32px; }
.eps-list .row.on .ep.st.here { box-shadow: inset 0 0 0 4px #fff; }
.eps-list .row.on .ep.st.watching { box-shadow: inset 0 0 0 4px #fff; }
.eps-list .row.on .ep.st.done { box-shadow: inset 0 0 0 4px #fff; }
.ep.st.here .ep-state { color: #ff9a4d; }
.ep.st.watching .ep-state { color: #f5b545; }
.ep.st.done .ep-state { color: #38d68f; }
.row.on .ep.st .ep-name, .row.on .ep.st .ep-about { color: #fff; }
/* Barra do progresso: vai até o fim da linha; com os botões na tela, para antes deles. */
.ep-pbar { position: absolute; left: 292px; right: 26px; bottom: 14px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.16); overflow: hidden; }
.ep-pbar div { height: 6px; background: #d6b05c; }
.ep.done .ep-pbar div { background: #2ecc71; }
.ep.acts .ep-text, .ep.acts .ep-pbar { right: 230px; }
.ep-acts { position: absolute; right: 16px; top: 8px; width: 200px; }
.ep-act { position: relative; display: block; height: 44px; line-height: 38px; margin-bottom: 4px; padding: 0 12px 0 46px; border-radius: 22px; border: 3px solid transparent; background: rgba(255,255,255,0.14); color: #fff; font-size: 22px; font-style: normal; font-weight: bold; white-space: nowrap; }
.ep-act svg { position: absolute; left: 14px; top: 8px; }
.ep-act.on { background: #fff; color: #0c0a17; }
.ep-act.rm { color: #ff8a80; }
.ep-act.rm.on { background: #8b1e3f; color: #fff; }
/* X do episódio: fora da coluna de botões, só o ícone (tira só este episódio do Continuar). */
.ep-x { position: absolute; right: 228px; top: 56px; width: 48px; height: 48px; border-radius: 24px; background: rgba(42,18,24,0.92); border: 3px solid rgba(255,138,128,0.7); color: #ff8a80; box-sizing: border-box; }
.ep-x svg { position: absolute; left: 9px; top: 9px; }
.ep-x.on { background: #8b1e3f; border-color: #fff; color: #fff; }
.ep.withx .ep-text, .ep.withx .ep-pbar { right: 292px; }
.eps-msg { position: absolute; right: 140px; top: 104px; font-size: 24px; font-weight: bold; color: #f5b545; }
.modal.ask-all { left: 0; }
.home2 .modal.ask-all { left: -120px; }
.home-hint { position: absolute; right: 60px; top: 50px; font-size: 24px; z-index: 3; }
.home-hint.low { right: 420px; }
.ep-page { height: 160px; line-height: 160px; text-align: center; font-size: 30px; font-weight: bold; color: #fff; }
.next-box .next-title { padding-right: 90px; }
.next-count { position: absolute; right: 40px; top: 34px; font-size: 64px; line-height: 70px; font-weight: bold; color: #fff; }

/* Qualidades agrupadas (C1): selo na lista, no painel e no OSD; escolha no player */
/* Selo de qualidade como o do Android: FHD (e 4K/UHD) em vermelho; HD e SD discretos. */
.qbadge { position: absolute; right: 0; top: 22px; height: 32px; line-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 20px; font-weight: bold; color: #c3bcd9; background: rgba(255,255,255,0.11); }
.row.on .qbadge { color: #fff; background: rgba(255,255,255,0.22); }
.qbadge.q-fhd, .qbadge.q-4k, .qbadge.q-uhd { color: #ff6b6b; background: rgba(229,9,20,0.32); }
.row.on .qbadge.q-fhd, .row.on .qbadge.q-4k, .row.on .qbadge.q-uhd { color: #fff; background: #e50914; }
.chq { margin: -18px 0 28px; font-size: 24px; color: #8a82a6; }
.losd-q { display: inline-block; vertical-align: middle; margin-left: 20px; height: 40px; line-height: 40px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,0.2); font-size: 26px; }
/* FHD em vermelho, como o Android; HD e SD discretos. */
.losd-q.best { background: #e50914; }
.qrow { display: block; position: relative; padding-left: 50px; }
.qcheck { position: absolute; left: 0; top: 23px; }
.qcheck svg { display: block; }
.qbest { margin-left: 16px; font-size: 22px; color: #9d8bff; }
.row.on .qbest { color: #fff; }

/* Início: sino com os avisos de hoje */
.home-bell { position: absolute; right: 60px; top: 44px; height: 52px; line-height: 52px; padding: 0 22px 0 16px; border-radius: 26px; background: rgba(12,10,23,0.75); color: #fff; font-size: 24px; font-weight: bold; z-index: 3; }
.home-bell svg { display: inline-block !important; vertical-align: middle; margin: -4px 10px 0 0; color: #f5c518; }

/* Ficha (D2): logo do título, ler mais, voto, relacionados */
.dt-logo { min-height: 80px; }
.dt-logo img { display: block; max-width: 620px; max-height: 160px; }
.dt-btns { width: 1680px; white-space: nowrap; }
.dt-btn.small { padding: 0 30px 0 80px; }
.dt-btn.small svg { left: 28px; }
.dt-btn.sel { background: rgba(76,51,226,0.75); }
.dt-btn.sel.on { background: #fff; }
.dt-more { display: inline-block; margin-top: 12px; height: 46px; line-height: 40px; padding: 0 22px; border-radius: 23px; border: 3px solid transparent; background: rgba(255,255,255,0.12); font-size: 24px; font-weight: bold; color: #fff; }
.dt-more.on { background: #fff; color: #0c0a17; }
.dt-msg { margin-top: 12px; min-height: 30px; font-size: 24px; color: #ffb36b; }
.dt-related { position: absolute; left: 100px; top: 900px; width: 1780px; }
/* Elenco (10/10, como o webplayer e o app Phantom): foto redonda, nome em 2 linhas, personagem em roxo. */
.dt-cast { margin-top: 14px; width: 1680px; }
.dt-cast-title { font-size: 26px; font-weight: bold; color: rgba(255, 255, 255, 0.85); margin-bottom: 14px; }
.dt-cast-row { white-space: nowrap; }
.cast { display: inline-block; vertical-align: top; width: 144px; margin-right: 16px; text-align: center; white-space: normal; }
.cast-pic { position: relative; width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.cast-pic span { position: absolute; left: 0; top: 0; width: 96px; height: 96px; line-height: 96px; font-size: 30px; font-weight: bold; color: rgba(255, 255, 255, 0.7); }
.cast-pic img { position: absolute; left: 0; top: 0; width: 96px; height: 96px; object-fit: cover; }
.cast-name { margin-top: 10px; font-size: 22px; line-height: 28px; max-height: 56px; overflow: hidden; font-weight: bold; color: #fff; }
.cast-role { margin-top: 4px; font-size: 20px; line-height: 26px; color: #b9a6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail.rel .dt-related { top: 560px; }
.detail.rel .dt-body { top: -190px; }
.reading { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(5,4,12,0.88); z-index: 20; }
.reading-box { position: absolute; left: 260px; right: 260px; top: 150px; padding: 50px 60px; border-radius: 24px; background: #151029; }
.reading-title { font-size: 44px; font-weight: bold; color: #fff; }
.reading-text { margin-top: 22px; max-height: 616px; overflow: hidden; font-size: 30px; line-height: 44px; color: #d8d2ec; }
.reading-hint { margin-top: 26px; font-size: 24px; color: #8a82a6; }

/* Player de filme (D4): imagem, opções e informações técnicas */
.player video.fit-contain { object-fit: contain; }
.player video.fit-cover { object-fit: cover; }
.player video.fit-fill { object-fit: fill; }
.player video.fit-r43 { left: 240px; width: 1440px; object-fit: fill; }
.drawer-list.opts .row { padding-right: 30px; }
.opt-val { position: absolute; right: 26px; top: 0; color: #9d8bff; }
.row.on .opt-val { color: #fff; }
.opts-hint { position: absolute; left: 40px; bottom: 40px; font-size: 22px; color: #8a82a6; }
.stats { position: absolute; left: 60px; top: 60px; width: 620px; padding: 26px 30px; border-radius: 18px; background: rgba(12,10,23,0.86); }
.stat { height: 44px; line-height: 44px; font-size: 24px; color: #8a82a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { display: inline-block; width: 250px; }
.stat b { color: #fff; }

/* Conta: contas nesta TV (E1) */
.acc-hint { margin-top: 8px; font-size: 22px; color: #8a82a6; }
.acc-chips .acc-hint { width: 100%; margin: 0 0 8px; }
.modal-box.rename { text-align: left; }
.modal-box.rename input { width: 100%; height: 72px; padding: 0 22px; font-size: 32px; border-radius: 14px; border: 3px solid #4c33e2; background: #0c0a17; color: #fff; box-sizing: border-box; }

/* Guia de programação em grade (C2) */
.guide { position: absolute; left: 0; top: 0; width: 1760px; height: 1080px; background: #0c0a17; z-index: 4; }
.gd-info { position: absolute; left: 0; top: 40px; width: 1700px; height: 220px; }
.gd-kicker { font-size: 24px; color: #9d8bff; font-weight: bold; }
.gd-title { margin-top: 8px; font-size: 44px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-meta { margin-top: 6px; font-size: 24px; color: #c3bcd9; }
.gd-desc { margin-top: 8px; font-size: 22px; line-height: 30px; color: #8a82a6; max-height: 60px; overflow: hidden; width: 1300px; }
.gd-msg { position: absolute; right: 60px; top: 0; font-size: 24px; color: #ffb36b; }
.gd-ruler { position: absolute; left: 0; top: 270px; width: 1760px; height: 40px; }
.gd-tick { position: absolute; top: 0; font-size: 22px; color: #8a82a6; padding-left: 8px; border-left: 2px solid #2a2350; height: 34px; line-height: 34px; }
.gd-grid { position: absolute; left: 0; top: 314px; width: 1760px; height: 700px; overflow: hidden; }
.gd-row { position: absolute; left: 0; width: 1760px; height: 100px; }
.gd-ch { position: absolute; left: 0; top: 4px; width: 340px; height: 88px; line-height: 88px; padding: 0 16px; border-radius: 12px; background: #151029; color: #c3bcd9; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.gd-row.cur .gd-ch { background: #1f1840; color: #fff; }
.gd-num { color: #8a82a6; margin-right: 14px; font-size: 22px; }
.gd-rec { position: absolute; right: 12px; top: 30px; height: 28px; line-height: 28px; padding: 0 8px; border-radius: 6px; background: #c0392b; color: #fff; font-size: 16px; font-weight: bold; }
.gd-prog { position: absolute; top: 4px; height: 88px; padding: 10px 14px; border-radius: 12px; background: #1a1336; border: 3px solid transparent; box-sizing: border-box; overflow: hidden; }
.gd-prog.live { background: #262052; }
.gd-prog.past { background: #120e24; }
.gd-prog .gd-bell { position: absolute; right: 8px; top: 8px; color: #f5c518; }
.gd-bell svg { display: block; }
.gd-ptitle { color: #8a82a6; }
.gd-prog.rec .gd-ptitle { color: #c3bcd9; }
.gd-prog.none { background: #120e24; }
.gd-prog.on { background: #4c33e2; border-color: #fff; }
.gd-prog.on .gd-ptitle { color: #fff; }
.gd-ptitle { font-size: 24px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-ptime { margin-top: 6px; font-size: 20px; color: #8a82a6; white-space: nowrap; }
.gd-prog.on .gd-ptime { color: #e8e4f6; }
.gd-now { position: absolute; top: 0; width: 3px; height: 700px; background: #ff5a5f; }
.gd-hint { position: absolute; left: 0; bottom: 30px; font-size: 22px; color: #8a82a6; }

/* Modo leve (B8): TV antiga sem animação e sem fundo grande */
.lite *, .lite *:before, .lite *:after { -webkit-transition: none !important; transition: none !important; -webkit-animation: none !important; animation: none !important; }
.lite .tile.on { -webkit-transform: none; transform: none; box-shadow: none; }
.lite .hero-bg img, .lite .dt-bg img, .lite .hub-bg, .lite .hub-orb, .lite .fan { display: none; }
.lite .rail.open { box-shadow: none; }
.lite .poster.on { box-shadow: none; }
/* O "carregando" continua girando: parado parece que travou. */
.lite .spinner { -webkit-animation: spin 0.9s linear infinite !important; animation: spin 0.9s linear infinite !important; }
.acc-notices .notice.new { border-left: 6px solid #f5c518; padding-left: 18px; }

/* Faturas (E2, versão completa) */
.invoices { background: #0c0a17; }
.inv-title { position: absolute; left: 160px; top: 60px; font-size: 48px; font-weight: bold; color: #fff; }
.inv-sub { position: absolute; left: 160px; top: 130px; font-size: 24px; color: #8a82a6; }
.invoices .msg { position: absolute; left: 160px; top: 220px; }
.inv-list { position: absolute; left: 160px; top: 200px; width: 1500px; overflow: hidden; }
.inv-list .row { height: 84px; line-height: 84px; padding-left: 220px; padding-right: 520px; }
.inv-date { position: absolute; left: 28px; top: 0; color: #8a82a6; }
.inv-total { position: absolute; right: 360px; top: 0; color: #fff; font-weight: bold; }
.inv-status { position: absolute; right: 28px; top: 0; width: 320px; text-align: right; color: #8a82a6; font-size: 24px; }
.inv-status.open { color: #f5b545; }
.row.on .inv-status, .row.on .inv-date { color: #fff; }
.inv-hint { position: absolute; left: 160px; bottom: 40px; font-size: 22px; color: #8a82a6; }
/* Trailer dentro do app: a página do YouTube por baixo, o controle e o ponteiro ficam com o app. */
.trailer .tr-frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; pointer-events: none; background: #000; }
.trailer .tr-shield { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.tr-wait { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 32px; color: #c3bcd9; }
.tr-wait .spinner { margin-bottom: 34px; }
/* Dicas das teclas (KeyHints): desenho da tecla + o que faz, em letra clara (antes era um texto
   cinza apagado). Vem depois das classes de posição (.hint, .gd-hint, .vosd-hint…) e manda na cor. */
.keys { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; white-space: nowrap; font-size: 25px; line-height: 34px; color: #ece8f7; font-weight: 600; }
.key-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-right: 34px; }
.key-item:last-child { margin-right: 0; }
.kc { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin-right: 11px; color: #fff; font-style: normal; }
.kc + .kc { margin-left: -3px; }
.kc-sq { width: 24px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22), 0 1px 4px rgba(0,0,0,0.5); }
.kc-red { background: #e53935; }
.kc-green { background: #2fb344; }
.kc-yellow { background: #f6c915; }
.kc-blue { background: #2f7bf0; }
.kc-txt { height: 30px; min-width: 32px; padding: 0 7px; border: 2px solid rgba(255,255,255,0.9); border-radius: 8px; font-size: 16px; font-weight: 800; letter-spacing: 0.5px; box-sizing: border-box; }
.kc-pair { -webkit-flex-direction: column; flex-direction: column; height: 34px; overflow: hidden; }
.kc-pair svg { margin: -8px 0; }
.kc-row svg + svg { margin-left: -10px; }
.keys.hint { top: 66px; }
.vosd-hint.keys, .losd-state.keys { margin-top: 18px; }
.gd-hint.keys, .opts-hint.keys, .inv-hint.keys { font-size: 23px; }

/* Lembrete do guia: faixa por cima de qualquer tela */
.remind { position: absolute; left: 260px; right: 260px; top: 40px; height: 120px; border-radius: 24px; background: #262052; border: 3px solid #f5c518; box-shadow: 0 20px 60px rgba(0,0,0,0.7); z-index: 60; }
.remind-ico { position: absolute; left: 30px; top: 34px; color: #f5c518; }
.remind-body { position: absolute; left: 108px; right: 250px; top: 18px; }
.remind-title { font-size: 32px; line-height: 44px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.remind-keys { font-size: 24px; line-height: 40px; color: #c3bcd9; }
.remind-go { position: absolute; right: 28px; top: 28px; height: 56px; line-height: 56px; padding: 0 34px; border-radius: 28px; background: #fff; color: #0c0a17; font-size: 26px; font-weight: bold; }

/* Conta → Tela inicial: amostra do modelo antes de trocar. O desenho segue a tela de verdade na escala 0,375 (1920 → 720). */
.modal-box.lay-prev { left: 420px; top: 150px; width: 1080px; padding: 36px 50px 34px; text-align: left; }
.lp-kicker { font-size: 24px; font-weight: bold; color: #9d8bff; margin-bottom: 4px; }
.lay-prev h2 { margin-bottom: 8px; }
.lay-prev p { height: 64px; line-height: 32px; color: #c3bcd9; margin-bottom: 22px; }
.lp-frame { position: relative; width: 726px; height: 411px; margin: 0 auto; border-radius: 16px; border: 3px solid #2e2656; background: #0c0a17; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.lp-frame i, .lp-frame b { display: block; }
.lay-prev .dt-btns { width: auto; margin-top: 28px; text-align: center; }
.lay-prev .dt-btn:last-child { margin-right: 0; }
/* Painel: menu de ícones + carrossel + fileira. */
.lp-pan, .lp-mos { position: absolute; left: 0; top: 0; width: 720px; height: 405px; overflow: hidden; }
.lp-hero { position: absolute; left: 45px; top: 0; width: 675px; height: 380px; }
.lp-hero-art { position: absolute; left: 0; top: 0; width: 675px; height: 380px; background: -webkit-linear-gradient(-45deg, #2a1a6e 0%, #6b4bff 30%, #b23cd6 55%, #e0607a 80%, #f2a04b 100%); background: linear-gradient(135deg, #2a1a6e 0%, #6b4bff 30%, #b23cd6 55%, #e0607a 80%, #f2a04b 100%); opacity: 0.55; }
.lp-hero-fade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(left, #0c0a17 0%, rgba(12,10,23,0.88) 26%, rgba(12,10,23,0.35) 52%, rgba(12,10,23,0) 72%); background: linear-gradient(to right, #0c0a17 0%, rgba(12,10,23,0.88) 26%, rgba(12,10,23,0.35) 52%, rgba(12,10,23,0) 72%); }
.lp-hero-fade:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 210px; background: -webkit-linear-gradient(top, rgba(12,10,23,0) 0%, rgba(12,10,23,0.92) 75%, #0c0a17 100%); background: linear-gradient(to bottom, rgba(12,10,23,0) 0%, rgba(12,10,23,0.92) 75%, #0c0a17 100%); }
.lp-rail { position: absolute; left: 0; top: 0; width: 45px; height: 405px; background: #0a0814; }
.lp-mark { position: absolute; left: 11px; top: 16px; }
.lp-ri { position: absolute; left: 14px; color: #8a82a6; }
.lp-ri.cur { color: #fff; }
.lp-ri.cur:before { content: ""; position: absolute; left: -14px; top: 1px; width: 3px; height: 15px; border-radius: 2px; background: #9d8bff; }
.lp-kick { position: absolute; left: 75px; top: 42px; width: 64px; height: 7px; border-radius: 4px; background: #9d8bff; }
.lp-title { position: absolute; left: 75px; top: 60px; width: 170px; height: 20px; border-radius: 5px; background: #fff; }
.lp-plot { position: absolute; left: 75px; top: 92px; width: 210px; height: 6px; border-radius: 3px; background: rgba(195,188,217,0.45); box-shadow: 0 12px 0 rgba(195,188,217,0.45); }
.lp-btn { position: absolute; top: 128px; height: 31px; border-radius: 6px; }
.lp-btn svg { position: absolute; left: 11px; top: 8px; }
.lp-btn i { position: absolute; left: 32px; top: 13px; height: 6px; border-radius: 3px; }
.lp-btn.w { left: 75px; width: 92px; background: #fff; color: #0c0a17; }
.lp-btn.w i { width: 46px; background: #0c0a17; }
.lp-btn.g { left: 176px; width: 141px; background: rgba(255,255,255,0.14); color: #fff; }
.lp-btn.g i { width: 92px; background: rgba(255,255,255,0.8); }
.lp-dots { position: absolute; left: 75px; top: 171px; height: 6px; }
.lp-dots b { float: left; width: 6px; height: 6px; margin-right: 4px; border-radius: 3px; background: rgba(255,255,255,0.3); }
.lp-dots b.on { background: #fff; }
.lp-row-t { position: absolute; left: 64px; top: 236px; font-size: 14px; font-weight: bold; color: #fff; }
.lp-card { position: absolute; top: 263px; width: 71px; height: 107px; border-radius: 5px; }
.lp-cap { position: absolute; top: 378px; width: 52px; height: 5px; border-radius: 3px; background: rgba(195,188,217,0.4); }
/* Mosaico: mesmas posições do Hub. */
.lp-mos { background: #0b0916; }
.lp-orb { position: absolute; left: -98px; top: 195px; width: 338px; height: 338px; border-radius: 169px; background: -webkit-radial-gradient(center, circle, rgba(213,60,239,0.22), rgba(213,60,239,0) 70%); background: radial-gradient(circle at center, rgba(213,60,239,0.22), rgba(213,60,239,0) 70%); }
.lp-logo { position: absolute; left: 37px; top: 20px; }
.lp-clock { position: absolute; right: 37px; top: 20px; width: 70px; }
.lp-clock b { width: 46px; height: 16px; margin-left: 24px; border-radius: 4px; background: #fff; }
.lp-clock i { width: 70px; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(182,175,208,0.5); }
.lp-hello { position: absolute; left: 37px; top: 60px; font-size: 24px; font-weight: bold; color: #fff; white-space: nowrap; }
.lp-ask { position: absolute; left: 38px; top: 101px; width: 150px; height: 7px; border-radius: 4px; background: rgba(182,175,208,0.5); }
.lp-tile { position: absolute; border-radius: 11px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); overflow: hidden; }
.lp-live { left: 37px; top: 127px; width: 255px; height: 203px; background: -webkit-linear-gradient(-45deg, #5b3cff 0%, #2c1b86 55%, #191036 100%); background: linear-gradient(135deg, #5b3cff 0%, #2c1b86 55%, #191036 100%); }
.lp-pill { position: absolute; left: 15px; top: 15px; width: 44px; height: 13px; border-radius: 7px; background: #e50914; }
.lp-pill span { position: absolute; left: 7px; top: 4px; width: 5px; height: 5px; border-radius: 3px; background: #fff; }
.lp-live-icon { position: absolute; right: -11px; top: 15px; }
.lp-lt { position: absolute; left: 15px; bottom: 34px; font-size: 24px; font-weight: bold; color: #fff; white-space: nowrap; }
.lp-mv, .lp-sr { left: 304px; width: 210px; height: 98px; }
.lp-mv { top: 127px; }
.lp-sr { top: 232px; }
.lp-tt { position: absolute; left: 15px; top: 12px; font-size: 17px; font-weight: bold; color: #fff; }
.lp-fan { position: absolute; right: 8px; top: 10px; width: 112px; height: 86px; }
.lp-fan i { position: absolute; top: 4px; width: 49px; height: 73px; border-radius: 5px; box-shadow: 0 4px 10px rgba(0,0,0,0.6); }
.lp-fan .f0 { left: 0; -webkit-transform: rotate(-9deg); transform: rotate(-9deg); }
.lp-fan .f1 { left: 32px; top: 0; z-index: 2; }
.lp-fan .f2 { left: 64px; -webkit-transform: rotate(9deg); transform: rotate(9deg); }
.lp-side { left: 525px; width: 158px; height: 60px; color: #fff; }
.lp-side svg { position: absolute; left: 14px; top: 12px; }
.lp-st { position: absolute; left: 44px; top: 12px; font-size: 14px; font-weight: bold; white-space: nowrap; }
.lp-side i { position: absolute; left: 44px; top: 36px; width: 70px; height: 5px; border-radius: 3px; background: rgba(195,188,217,0.45); }
.lp-side.s1 { top: 127px; }
.lp-side.s2 { top: 199px; }
.lp-side.s3 { top: 270px; }
.lp-cont { left: 37px; top: 341px; width: 476px; height: 49px; }
.lp-cont .p { position: absolute; left: 8px; top: 5px; width: 25px; height: 38px; border-radius: 3px; background: #8a3460; }
.lp-cont .l { position: absolute; left: 45px; top: 9px; width: 80px; height: 5px; border-radius: 3px; background: #9d8bff; }
.lp-cont .n { position: absolute; left: 45px; top: 20px; width: 150px; height: 9px; border-radius: 4px; background: #fff; }
.lp-cont .b { position: absolute; left: 45px; right: 15px; bottom: 7px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.15); overflow: hidden; }
.lp-cont .b i { width: 40%; height: 3px; background: #e50914; }
.lp-foot { position: absolute; right: 37px; bottom: 16px; width: 100px; }
.lp-foot i { height: 5px; margin-top: 5px; border-radius: 3px; background: rgba(109,102,136,0.6); }

/* ---- Lord Kids: o Início do modo kids (Kids.tsx). Arte e fonte iguais às da Roku. ---- */
@font-face { font-family: 'Fredoka'; src: url('fonts/Fredoka-Medium.ttf'); font-weight: 500; }
@font-face { font-family: 'Fredoka'; src: url('fonts/Fredoka-SemiBold.ttf'); font-weight: 600; }
.kids { font-family: 'Fredoka', "LG Smart UI", Arial, sans-serif; }
.kids-bg { position: absolute; left: -160px; top: 0; width: 1920px; height: 1080px; background: #241062 url('kids/bg.jpg') no-repeat 0 0; background-size: 1920px 1080px; }
.kids-bg:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 560px; background: linear-gradient(to bottom, rgba(12,10,23,0), rgba(12,10,23,0.9)); }
.kids-dim { position: absolute; left: -160px; top: 0; width: 1920px; height: 1080px; background: rgba(14,7,48,0.5); opacity: 0; transition: opacity 0.25s; }
.kids-dim.on { opacity: 1; }
.kids-head { position: absolute; left: 0; top: 24px; width: 1200px; height: 140px; }
.kids-crown { position: absolute; left: 0; top: -4px; width: 136px; height: 136px; }
.kids-brand { position: absolute; left: 146px; top: 2px; font-size: 64px; font-weight: 600; line-height: 78px; color: #fff; white-space: nowrap; }
.kids-brand .k1 { color: #ffb347; } .kids-brand .k2 { color: #5cdd6b; } .kids-brand .k3 { color: #4ab8ff; } .kids-brand .k4 { color: #ff7ab6; }
.kids-hello { position: absolute; left: 150px; top: 86px; font-size: 32px; font-weight: 500; color: #ede7ff; white-space: nowrap; }
.kids-clock { position: absolute; right: 70px; top: 28px; font-size: 56px; font-weight: 600; color: #fff; }
.kids-keys { position: absolute; right: 56px; top: 108px; padding: 4px 22px; border-radius: 30px; background: rgba(23,11,69,0.72); }
.kids-tiles { position: absolute; left: 0; right: 0; top: 250px; text-align: center; white-space: nowrap; }
.kt { display: inline-block; position: relative; width: 300px; height: 272px; margin: 0 14px; border-radius: 34px; text-align: left; vertical-align: top; opacity: 0.92; transition: transform 0.2s; }
.kt img { position: absolute; left: 0; top: 0; width: 300px; height: 272px; }
.kt-title { position: absolute; left: 24px; top: 164px; font-size: 44px; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.kt-sub { position: absolute; left: 25px; top: 220px; font-size: 24px; font-weight: 500; color: rgba(255,255,255,0.9); white-space: nowrap; }
.kt.on { opacity: 1; z-index: 2; -webkit-transform: scale(1.07); transform: scale(1.07); box-shadow: 0 0 0 6px #fff, 0 18px 40px rgba(0,0,0,0.35); }
.kids-rows { position: absolute; left: 40px; width: 1740px; }
.kids-msg { position: absolute; left: 120px; right: 120px; top: 640px; text-align: center; font-size: 32px; color: #fff; }

/* Painéis do tamanho do conteúdo (Ajustes, Conta, Busca, Filmes/Séries, TV ao vivo). */
.chinfo.fit { height: auto; }
.list-box { position: absolute; border-radius: 22px; background: #151029; }
.acc-notices { height: auto; max-height: 880px; padding: 26px 34px 30px; border-radius: 22px; background: #151029; }
.acc-notices h2 { margin-top: 0; }
.search .search-field { background: #0c0a17; }

.exit-ask { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: rgba(5,4,12,0.82); z-index: 70; }
.exit-card { position: absolute; left: 510px; top: 390px; width: 900px; padding: 54px 48px 48px; border-radius: 22px; background: #151029; text-align: center; }
.exit-card p { margin: 0 0 40px; font-size: 42px; color: #fff; }
.exit-card .btn { margin: 0 18px; }