/* Genesis Play Web 2.0 — mesmo visual do app da Roku (palco 1920x1080). */
@font-face { font-family: Roboto; src: url(../fonts/Roboto.ttf); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05051a; overflow: hidden; }
body { font-family: Roboto, system-ui, sans-serif; color: #fff; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #05051a; }
#screen { position: absolute; inset: 0; z-index: 2; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.layer { position: absolute; inset: 0; z-index: 1; }
[hidden] { display: none !important; }

/* Player (vídeo atrás das telas; a tela deixa um "buraco" transparente na prévia). */
.player-box { position: absolute; z-index: 1; background: #000; display: none; }
.player-box.on { display: block; }
.gp-video, .gp-avplay { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; display: none; }
#screen.full { pointer-events: none; }
html.avplay, html.avplay body, html.avplay #stage, html.avplay .player-box, html.avplay .gp-avplay { background: transparent; }

/* Foco: contorno neon azul/roxo bem visível. */
.nav { outline: none; }
.nav.focus { box-shadow: 0 0 0 5px #22d3ee, 0 0 0 9px rgba(168, 85, 247, 0.85), 0 0 32px rgba(139, 92, 246, 0.8); }

/* ---- menu principal ---- */
.home .logo { position: absolute; left: 110px; top: 46px; width: 220px; }
.code-box { position: absolute; left: 1240px; top: 40px; width: 570px; height: 196px; border-radius: 18px; padding: 14px 36px; border: 3px solid transparent; background: linear-gradient(#0b0e26, #0b0e26) padding-box, linear-gradient(90deg, #22d3ee, #a855f7) border-box; }
.code-box small { color: #9fb4ff; font-size: 22px; letter-spacing: .08em; }
.code-box .code { font-size: 60px; color: #5ee7ff; line-height: 76px; }
.code-box .key { font-size: 22px; color: #9fb4ff; } .code-box .key b { font-size: 46px; color: #fff; letter-spacing: .12em; margin-left: 14px; }
.license { position: absolute; left: 1240px; top: 246px; width: 570px; text-align: right; font-size: 26px; color: #e6ebff; }
.home h1 { position: absolute; left: 120px; top: 250px; font-size: 50px; font-weight: 400; margin: 0; }
.choice { position: absolute; top: 350px; width: 520px; height: 250px; border-radius: 22px; padding: 56px 40px; background: rgba(12, 16, 40, 0.85); border: 2px solid rgba(148, 163, 255, 0.3); }
.choice strong { display: block; font-size: 52px; font-weight: 400; }
.choice span { display: block; margin-top: 18px; font-size: 28px; color: #b8c2e8; }
.choice.focus { background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #071022; transform: scale(1.04); }
.choice.focus span { color: #1b2550; }
.diagnostic-choice { top: 630px; width: 1080px; height: 112px; padding: 14px 30px; }
.diagnostic-choice strong { font-size: 32px; }
.diagnostic-choice span { margin-top: 5px; font-size: 21px; }
.mobile-note { position: absolute; left: 120px; top: 770px; width: 1080px; }
.mobile-note b { display: block; font-size: 32px; color: #5ee7ff; font-weight: 400; }
.mobile-note span { font-size: 28px; }
.qr { position: absolute; left: 1240px; top: 292px; width: 570px; text-align: center; }
.qr img { width: 280px; height: 280px; background: #fff; padding: 6px; }
.qr b { display: block; font-size: 34px; font-weight: 400; margin-top: 16px; }
.qr span { display: block; font-size: 26px; color: #c9d0f0; }
.qr .link { font-size: 40px; color: #5ee7ff; margin-top: 6px; }
.warning { position: absolute; left: 120px; top: 880px; width: 1690px; height: 100px; border-radius: 16px; border: 3px solid #f5b300; background: rgba(30, 24, 6, 0.9); display: flex; align-items: center; gap: 22px; padding: 0 30px; font-size: 28px; }
.warning img { width: 64px; }
.footer { position: absolute; bottom: 24px; left: 60px; right: 60px; display: flex; justify-content: space-between; font-size: 18px; color: #7290a3; letter-spacing: .1em; }

/* ---- painel lateral (Playlists / código) ---- */
.panel { position: absolute; left: 1140px; top: 130px; width: 640px; height: 820px; border-radius: 28px; background: rgba(10, 13, 36, 0.92); border: 2px solid rgba(148, 163, 255, 0.25); padding: 46px 50px; }
.panel h2 { font-size: 46px; font-weight: 400; margin: 0 0 6px; }
.panel p { font-size: 24px; color: #9db1c1; margin: 0 0 22px; }
.tile { display: flex; justify-content: space-between; align-items: center; height: 86px; margin-bottom: 14px; padding: 0 26px; border-radius: 16px; background: rgba(12, 16, 40, 0.9); border: 2px solid rgba(148, 163, 255, 0.3); font-size: 30px; }
.tile .kind { font-size: 24px; font-weight: 700; }
.kind-iptv { color: #22d3ee; } .kind-p2p { color: #c084fc; }
.tile.focus { background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #071022; }
.tile.focus .kind { color: #071022; }
.field { height: 72px; border-radius: 14px; padding: 0 22px; margin-bottom: 18px; display: flex; align-items: center; font-size: 30px; background: #0b0e26; border: 2px solid rgba(148, 163, 255, 0.35); }
.field small { color: #9fb4ff; font-size: 18px; position: absolute; margin-top: -60px; }
.btn { height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: rgba(27, 32, 80, 0.9); border: 2px solid rgba(148, 163, 255, 0.35); }
.btn.focus, .btn.primary { background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #071022; }
.status { font-size: 24px; color: #ffc078; min-height: 60px; margin-top: 16px; }

/* ---- teclado na tela (TV) ---- */
.kb { position: absolute; left: 200px; top: 420px; width: 1520px; padding: 24px 50px 30px; border-radius: 18px; background: rgba(11, 14, 38, 0.97); border-top: 6px solid #8b5cf6; z-index: 20; }
.kb h3 { font-size: 32px; font-weight: 400; margin: 0 0 14px; }
.kb .typed { height: 70px; background: #f3f4f4; color: #101225; font-size: 36px; padding: 12px 20px; border-radius: 6px; margin-bottom: 18px; }
.kb .row { display: flex; gap: 12px; margin-bottom: 10px; }
.kb .k { width: 118px; height: 62px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: #1b2050; border-radius: 8px; }
.kb .k.wide { width: 272px; }
.kb .k.focus { background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #071022; }

/* ---- IPTV ---- */
.header { position: absolute; left: 0; top: 0; width: 1920px; height: 130px; z-index: 3; }
.header .logo { position: absolute; left: 60px; top: 22px; width: 130px; }
.tabs { position: absolute; left: 240px; top: 40px; display: flex; gap: 18px; }
.tab { height: 56px; padding: 0 28px; border-radius: 12px; display: flex; align-items: center; font-size: 28px; color: #c9d0f0; border-bottom: 4px solid transparent; }
.tab.active { color: #fff; border-bottom-color: #8b5cf6; }
.tab.focus { background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #071022; }
.clock { position: absolute; left: 1230px; top: 48px; width: 400px; text-align: right; font-size: 26px; color: #c9d0f0; }
.col { position: absolute; top: 140px; height: 880px; border-radius: 22px; background: rgba(7, 10, 31, 0.9); overflow: hidden; }
.col .title { font-size: 22px; color: #ad80ff; letter-spacing: .1em; padding: 16px 24px 10px; }
.list { position: absolute; left: 10px; right: 10px; top: 58px; bottom: 10px; overflow: hidden; }
.cat { height: 64px; margin-bottom: 6px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 26px; background: rgba(12, 16, 40, 0.9); border: 2px solid rgba(148, 163, 255, 0.28); white-space: nowrap; overflow: hidden; }
.cat .count { font-size: 20px; color: #8a93c0; }
.cat.current { border-color: #5b8cff; }
.cat.focus { background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #071022; }
.cat.focus .count { color: #071022; }
.ch { height: 76px; margin-bottom: 4px; border-radius: 12px; display: flex; align-items: center; gap: 16px; padding: 0 16px; font-size: 28px; white-space: nowrap; overflow: hidden; }
.ch .num { width: 70px; text-align: right; color: #9aa3d0; font-size: 26px; }
.ch img { width: 60px; height: 44px; object-fit: contain; background: rgba(255, 255, 255, 0.06); border-radius: 6px; }
.ch .fav { color: #ffd166; font-size: 24px; }
.ch.playing .name { color: #5ee7ff; }
.ch.focus { background: linear-gradient(90deg, #2b59d6, #7c3aed); }
.ch.focus .num { color: #fff; }
.preview-hole { position: absolute; left: 1200px; top: 160px; width: 660px; height: 372px; border-radius: 10px; background: #000; display: flex; align-items: center; justify-content: center; color: #6f7799; font-size: 26px; }
.preview-hole.live { background: transparent; }
.pv-info { position: absolute; left: 1200px; top: 552px; width: 660px; }
.pv-info .head { display: flex; gap: 16px; align-items: center; }
.pv-info img { width: 120px; height: 72px; object-fit: contain; }
.pv-info .name { font-size: 32px; } .pv-info .sub { font-size: 22px; color: #9aa3d0; }
.pv-info .lbl { margin-top: 22px; font-size: 20px; color: #ad80ff; }
.pv-info .now { font-size: 26px; margin-top: 6px; } .pv-info .next { font-size: 24px; color: #c9d0f0; margin-top: 6px; }
.hint { position: absolute; left: 1200px; top: 946px; width: 660px; font-size: 20px; color: #6f7799; }

/* HUD da TV ao vivo em tela cheia */
.hud { position: absolute; left: 80px; top: 742px; width: 1760px; height: 290px; border-radius: 8px; background: rgba(11, 14, 38, 0.92); border-top: 6px solid #8b5cf6; padding: 40px 38px; z-index: 5; }
.hud .num { display: inline-block; width: 96px; height: 64px; line-height: 64px; text-align: center; font-size: 36px; background: #8b5cf6; }
.hud img { width: 140px; height: 84px; object-fit: contain; vertical-align: middle; margin: 0 20px; }
.hud .name { font-size: 44px; vertical-align: middle; }
.hud .clockh { position: absolute; right: 40px; top: 48px; font-size: 34px; color: #c9d0f0; }
.hud .row { margin-top: 26px; font-size: 30px; } .hud .row b { color: #5ee7ff; font-weight: 400; font-size: 22px; width: 126px; display: inline-block; }
.hud .row.next b { color: #ad80ff; } .hud .row.next { font-size: 26px; color: #c9d0f0; margin-top: 18px; }
.hud .bar { margin: 10px 0 0 0; width: 1306px; height: 6px; background: rgba(255, 255, 255, 0.2); }
.hud .bar i { display: block; height: 6px; background: linear-gradient(90deg, #22d3ee, #a855f7); }
.hud .buttons { position: absolute; right: 40px; top: 138px; display: flex; flex-direction: column; gap: 10px; }
.hud .btn { width: 340px; height: 60px; font-size: 26px; }
.number-box { position: absolute; right: 60px; top: 60px; width: 220px; height: 110px; display: flex; align-items: center; justify-content: center; font-size: 64px; background: rgba(13, 16, 43, 0.93); z-index: 6; }
.loading { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; font-size: 30px; }
.spinner { width: 64px; height: 64px; border-radius: 50%; border: 6px solid rgba(139, 92, 246, 0.25); border-top-color: #22d3ee; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice { position: absolute; left: 460px; top: 940px; width: 1000px; min-height: 80px; padding: 18px; border-radius: 12px; background: rgba(13, 16, 43, 0.95); font-size: 26px; text-align: center; z-index: 30; }
.cors-dialog { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 48px; background: rgba(0, 0, 12, .82); }
.cors-card { width: min(1080px, 92%); padding: 52px 64px 42px; border: 2px solid rgba(94, 231, 255, .72); border-radius: 24px; background: linear-gradient(145deg, #101632, #090b20); box-shadow: 0 0 42px rgba(34, 211, 238, .2), 0 0 70px rgba(168, 85, 247, .18); text-align: center; }
.cors-mark { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: #f0b429; color: #171321; font-size: 48px; font-weight: 700; line-height: 64px; }
.cors-card h2 { margin: 0 0 22px; color: #5ee7ff; font-size: 38px; font-weight: 500; }
.cors-card p { margin: 0 auto 18px; max-width: 920px; color: #e5e9ff; font-size: 27px; line-height: 1.4; }
.cors-card p b { color: #fff; overflow-wrap: anywhere; }
.cors-card .cors-note { color: #aeb9e8; font-size: 21px; }
.cors-close { min-width: 240px; margin-top: 12px; padding: 14px 30px; border: 0; border-radius: 12px; background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #081026; font: inherit; font-size: 26px; cursor: pointer; }
.cors-close:focus { outline: 4px solid #fff; outline-offset: 4px; }
.diagnostic-screen { overflow: hidden; }
.diagnostic-panel { position: absolute; z-index: 2; left: 74px; top: 34px; width: 1772px; height: 1012px; padding: 28px 42px; border: 2px solid rgba(148,163,255,.35); border-radius: 24px; background: rgba(7,10,30,.96); }
.diagnostic-logo { position: absolute; left: 40px; top: 22px; width: 112px; }
.diagnostic-panel h1 { margin: 0 0 8px 138px; color: #55e5ff; font-size: 38px; font-weight: 400; }
.diagnostic-intro { margin: 0 0 14px 138px; color: #d5daf4; font-size: 21px; }
.diagnostic-host { margin: 14px 0; color: #b9c5fa; font-size: 19px; }
.diagnostic-report { height: 650px; overflow: auto; margin: 0; padding: 18px 22px; border: 1px solid #343e72; border-radius: 12px; background: #05091e; color: #e2e8ff; white-space: pre-wrap; overflow-wrap: anywhere; font: 16px/1.3 monospace; }
.diagnostic-actions { display: flex; gap: 22px; margin-top: 16px; }
.diagnostic-actions .btn { flex: 1; height: 62px; font-size: 22px; cursor: pointer; }
.diagnostic-foot { position: absolute; right: 40px; bottom: 34px; color: #9aa6d7; font-size: 16px; }
#screen.diagnostic-screen ~ #notice { top: 870px; z-index: 101; }
.soon { position: absolute; left: 40px; right: 40px; top: 140px; height: 880px; border-radius: 22px; background: rgba(7, 10, 31, 0.9); display: flex; align-items: center; justify-content: center; font-size: 34px; color: #c9d0f0; }

/* Filmes e séries: categorias à esquerda, catálogo 7x3 à direita (como na Roku). */
.vgrid-box { position: absolute; left: 460px; top: 140px; width: 1420px; height: 880px; border-radius: 22px; background: rgba(7, 10, 31, 0.9); overflow: hidden; }
.vgrid-box .title { font-size: 22px; color: #ad80ff; letter-spacing: .1em; padding: 16px 24px 10px; }
.vgrid { position: absolute; left: 18px; right: 18px; top: 58px; bottom: 10px; display: grid; grid-template-columns: repeat(7, 186px); grid-auto-rows: 270px; column-gap: 12px; row-gap: 2px; }
.poster { border-radius: 12px; padding: 6px; }
.poster .pic { position: relative; width: 174px; height: 196px; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #1b2050, #2b1450); }
.poster .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.poster .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; color: rgba(255, 255, 255, 0.25); }
.poster .fav { position: absolute; right: 8px; top: 6px; z-index: 2; color: #ffd166; font-size: 26px; text-shadow: 0 0 6px #000; }
.poster .prog { position: absolute; left: 0; bottom: 0; height: 6px; z-index: 2; background: linear-gradient(90deg, #22d3ee, #a855f7); }
.poster .pname { margin-top: 8px; font-size: 21px; line-height: 25px; height: 50px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: normal; overflow-wrap: anywhere; text-align: center; color: #dfe4ff; }
.poster.focus { background: linear-gradient(160deg, #22d3ee, #8b5cf6); }
.poster.focus .pname { color: #071022; }
.empty { grid-column: 1 / -1; padding: 40px; font-size: 28px; color: #8f9bd0; }

/* Detalhe do título. */
.d-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(5, 5, 26, 0.96) 0%, rgba(5, 5, 26, 0.85) 45%, rgba(5, 5, 26, 0.55) 100%); }
.d-poster { position: absolute; left: 90px; top: 170px; width: 340px; height: 500px; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #1b2050, #2b1450); z-index: 1; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.d-poster img { width: 100%; height: 100%; object-fit: cover; }
.d-info { position: absolute; left: 480px; top: 160px; width: 1340px; z-index: 1; }
.d-info.narrow { width: 640px; }
.d-info h1 { font-size: 54px; font-weight: 500; margin: 0 0 14px; line-height: 64px; }
.d-info .meta { font-size: 26px; color: #ad80ff; margin-bottom: 22px; }
.d-info .plot { font-size: 27px; line-height: 38px; color: #dfe4ff; margin: 0; max-height: 380px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; }
.d-buttons { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; }
.d-buttons .btn { min-width: 300px; padding: 0 30px; height: 70px; font-size: 27px; }
.d-eps { position: absolute; left: 1160px; top: 160px; width: 700px; height: 860px; z-index: 1; border-radius: 22px; background: rgba(7, 10, 31, 0.88); padding: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.chip { height: 54px; padding: 0 22px; border-radius: 12px; display: flex; align-items: center; font-size: 24px; background: rgba(27, 32, 80, 0.9); border: 2px solid rgba(148, 163, 255, 0.3); }
.chip.current { border-color: #8b5cf6; }
.chip.focus { background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #071022; }
.ep { height: 76px; margin-bottom: 6px; border-radius: 12px; display: flex; align-items: center; gap: 18px; padding: 0 20px; font-size: 26px; background: rgba(12, 16, 40, 0.9); white-space: nowrap; overflow: hidden; }
.ep .n { color: #ad80ff; width: 70px; } .ep .t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ep .ok { color: #5ee7a0; } .ep .pc { color: #9aa3d0; font-size: 22px; }
.ep.focus { background: linear-gradient(90deg, #2b59d6, #7c3aed); }
.ep.focus .n { color: #fff; }
.muted { color: #8f9bd0; font-size: 24px; }

/* Barra do VOD em tela cheia (mesmas regras do P2P). */
.vod-osd { position: absolute; left: 80px; top: 820px; width: 1760px; padding: 30px 40px; border-radius: 10px; background: rgba(11, 14, 38, 0.92); border-top: 6px solid #8b5cf6; z-index: 5; }
.vod-osd .t { font-size: 38px; margin-bottom: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vod-osd .bar { position: relative; height: 8px; background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
.vod-osd .bar .real { position: absolute; left: 0; top: 0; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #22d3ee, #a855f7); }
.vod-osd .bar .mark { position: absolute; top: -10px; width: 4px; height: 28px; margin-left: -2px; background: #ffc400; }
.vod-osd .bar .bubble { position: absolute; top: -66px; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; background: #ffc400; color: #071022; font-size: 26px; white-space: nowrap; }
.vod-osd .row { display: flex; justify-content: space-between; margin-top: 14px; font-size: 28px; color: #c9d0f0; }
.vod-osd .row .seeking { color: #ffc400; }
.vod-osd .help { margin-top: 10px; font-size: 20px; color: #6f7799; }

/* Acesso pelo computador e pelo celular: campos editáveis e cartão compacto. */
.link-screen .link-intro { top: 380px; width: 900px; }
.access-panel { height: auto; min-height: 600px; }
.access-form { margin-top: 32px; }
.access-field { display: block; margin-bottom: 20px; color: #9fb4ff; font-size: 20px; }
.access-field span { display: block; margin: 0 0 8px 4px; }
.access-field input { display: block; width: 100%; height: 72px; border: 2px solid rgba(148, 163, 255, .42); border-radius: 14px; outline: none; padding: 0 22px; background: #0b0e26; color: #fff; font: 30px Roboto, system-ui, sans-serif; }
.access-field input::placeholder { color: #7d86b0; opacity: 1; }
.access-field input:focus { border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34, 211, 238, .2); }
.access-form button.btn { width: 100%; margin-top: 6px; color: #fff; font-family: inherit; cursor: pointer; }
.access-form button.btn:hover { border-color: #22d3ee; background: linear-gradient(90deg, #22d3ee, #8b5cf6); color: #071022; }
.access-form .status { min-height: 36px; }
#stage.mobile-layout { overflow: hidden; }
.mobile-layout .link-screen .layer { overflow-y: auto; padding: 22px 20px 32px; }
.mobile-layout .link-screen .logo { position: relative; inset: auto; display: block; width: 132px; margin: 0 0 18px; }
.mobile-layout .link-screen .link-intro { position: static; width: auto; margin: 0 0 22px; }
.mobile-layout .link-screen .link-intro b { font-size: clamp(22px, 6vw, 32px); }
.mobile-layout .link-screen .link-intro span { font-size: clamp(16px, 4vw, 21px); }
.mobile-layout .link-screen .access-panel { position: static; width: 100%; height: auto; min-height: 0; padding: 24px 20px 14px; border-radius: 20px; }
.mobile-layout .link-screen .access-panel h2 { font-size: clamp(28px, 7vw, 40px); }
.mobile-layout .link-screen .access-panel p { font-size: clamp(16px, 4vw, 20px); }
.mobile-layout .link-screen .access-form { margin-top: 26px; }
.mobile-layout .link-screen .access-field { font-size: 16px; }
.mobile-layout .link-screen .access-field input { height: 58px; padding: 0 14px; font-size: 18px; }
.mobile-layout .link-screen .access-form button.btn { height: 60px; font-size: 21px; }
.mobile-layout .partner-login .layer { overflow-y: auto; padding: 22px 20px 32px; }
.mobile-layout .partner-login .logo { position: relative; inset: auto; display: block; width: 132px; margin: 0 0 18px; }
.mobile-layout .partner-login .access-panel { position: static; width: 100%; height: auto; min-height: 0; padding: 24px 20px 14px; border-radius: 20px; }
.mobile-layout .partner-login .access-panel h2 { font-size: clamp(28px, 7vw, 40px); }
.mobile-layout .partner-login .access-panel p { font-size: clamp(16px, 4vw, 20px); }
.mobile-layout .partner-login .access-field { font-size: 16px; }
.mobile-layout .partner-login .access-field input { height: 58px; padding: 0 14px; font-size: 18px; }
.mobile-layout .partner-login .access-form button.btn { height: 60px; font-size: 21px; }


/* Menu principal e cadastro do parceiro em navegador vertical. */
.choice, .tile, .tab, .cat, .ch, .poster, .chip, .ep { cursor: pointer; }
.mobile-layout .home .layer { display: flex; flex-direction: column; align-items: stretch; gap: 14px; overflow-y: auto; padding: 20px; }
.mobile-layout .home .logo { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; display: block; width: 132px !important; margin: 0 auto 4px; }
.mobile-layout .home .code-box, .mobile-layout .home .license, .mobile-layout .home h1,
.mobile-layout .home .choice, .mobile-layout .home .mobile-note, .mobile-layout .home .qr,
.mobile-layout .home .warning, .mobile-layout .home .panel { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 0; margin: 0; }
.mobile-layout .home .code-box { padding: 16px 20px; }
.mobile-layout .home .code-box small { font-size: 16px; }
.mobile-layout .home .code-box .code { font-size: clamp(30px, 9vw, 48px); line-height: 1.3; }
.mobile-layout .home .code-box .key { font-size: 16px; }
.mobile-layout .home .code-box .key b { font-size: 28px; }
.mobile-layout .home .license { text-align: center; font-size: 16px; }
.mobile-layout .home h1 { font-size: 28px; text-align: center; }
.mobile-layout .home .choice { padding: 18px 20px; border-radius: 16px; }
.mobile-layout .home .diagnostic-choice { padding: 14px 18px; }
.mobile-layout .home .diagnostic-choice strong { font-size: 24px; }
.mobile-layout .home .diagnostic-choice span { font-size: 16px; }
.mobile-layout .home .choice strong { font-size: 26px; }
.mobile-layout .home .choice span { font-size: 17px; margin-top: 6px; }
.mobile-layout .home .mobile-note b { font-size: 20px; }
.mobile-layout .home .mobile-note span { font-size: 16px; }
.mobile-layout .home .qr img { width: 150px; height: 150px; }
.mobile-layout .home .qr b { font-size: 20px; }
.mobile-layout .home .qr span { font-size: 15px; }
.mobile-layout .home .qr .link { font-size: 24px; }
.mobile-layout .home .warning { font-size: 15px; padding: 16px; min-height: 72px; }
.mobile-layout .home .warning img { width: 42px; }
.mobile-layout .home .footer { display: none; }
.mobile-layout .home .tile { min-height: 64px; height: auto; font-size: 18px; }
.mobile-layout .home .panel { padding: 22px 18px; }
.mobile-layout .partner-login .layer { overflow-y: auto; padding: 20px; }
.mobile-layout .partner-login .logo { position: relative !important; inset: auto !important; left: auto !important; top: auto !important; display: block; width: 132px !important; margin: 0 auto 18px; }


/* Telas desktop ultrawide: usa a área completa e conserva o aviso inferior. */
.wide-layout .home .warning { top: 850px; height: 90px; }
.wide-layout .home .footer { display: none; }
.wide-layout .hud { top: 735px; }