/* Lume Play - interface do player */
body{overflow:hidden}
:root{--rail:15rem}
@media(max-width:1099px){:root{--rail:5rem}}
@media(max-width:699px){:root{--rail:0rem}}

/* ---------- login ---------- */
#login{position:fixed;inset:0;display:grid;place-items:center;padding:1.25rem;overflow:auto;
  background:radial-gradient(60rem 40rem at 15% 10%,rgba(124,92,255,.35),transparent 60%),radial-gradient(50rem 36rem at 90% 90%,rgba(34,211,238,.25),transparent 60%),var(--bg)}
.login-card{width:min(25rem,100%);padding:2rem;border-radius:28px;background:rgba(19,27,46,.72);backdrop-filter:blur(22px);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:1rem}
.mark{width:3.2rem;height:3.2rem;border-radius:16px;background:var(--grad);display:grid;place-items:center;box-shadow:0 10px 30px rgba(124,92,255,.45)}
.mark .ic{width:1.6rem;height:1.6rem;color:#fff}
.login-card h1{margin:.25rem 0 0;font-size:1.75rem;letter-spacing:-.02em}
.login-card p{margin:0;color:var(--mut)}
.field{position:relative}
.field .eye{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);color:var(--mut);padding:.4rem}
.err{color:var(--bad);min-height:1.3em;font-size:.9rem}

/* ---------- estrutura ---------- */
#app{display:grid;grid-template-columns:var(--rail) 1fr;height:100dvh}
#rail{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem .8rem;background:rgba(10,15,27,.9);border-right:1px solid var(--line);overflow:auto}
.brand{display:flex;align-items:center;gap:.75rem;padding:.25rem .5rem 1.1rem;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.brand .mark{width:2.4rem;height:2.4rem;border-radius:12px}
.brand .mark .ic{width:1.2rem;height:1.2rem}
.nav-btn{display:flex;align-items:center;gap:.85rem;padding:.8rem .9rem;border-radius:14px;color:var(--mut);font-weight:600;width:100%;text-align:left;transition:background .15s,color .15s}
.nav-btn:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.nav-btn.on{background:rgba(124,92,255,.18);color:#fff;box-shadow:inset 3px 0 0 var(--acc)}
.nav-btn .ic{width:1.35rem;height:1.35rem}
.rail-sp{flex:1}
.rail-foot{color:var(--mut);font-size:.75rem;padding:.5rem .6rem}
@media(max-width:1099px){.brand span,.nav-btn span,.rail-foot{display:none}.nav-btn{justify-content:center;padding:.9rem 0}.brand{justify-content:center}.nav-btn.on{box-shadow:none}}
#main{display:flex;flex-direction:column;min-width:0;min-height:0}
#top{display:flex;align-items:center;gap:.75rem;padding:.8rem 1.4rem;background:linear-gradient(var(--bg) 60%,transparent);z-index:5}
#top .brand-m{display:none}
.searchbox{flex:1;max-width:36rem;position:relative}
.searchbox .ic{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.searchbox input{padding-left:2.9rem;border-radius:999px;background:var(--surface)}
.icon-btn{display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--txt);flex:none;transition:background .15s}
.icon-btn:hover{background:var(--surface2)}
.sp{flex:1}
#view{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 1.4rem 5rem;scroll-behavior:smooth}
#tabbar{display:none}
@media(max-width:699px){
  #app{grid-template-columns:1fr}
  #rail{display:none}
  #top{padding:.65rem .9rem}
  #top .brand-m{display:flex;align-items:center;gap:.5rem;font-weight:800}
  #top .brand-m .mark{width:2rem;height:2rem;border-radius:10px}
  #top .brand-m .mark .ic{width:1rem;height:1rem}
  #top .brand-m b{display:none}
  #view{padding:0 .9rem 6.5rem}
  #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:.45rem .5rem calc(.45rem + env(safe-area-inset-bottom));background:rgba(10,15,27,.92);backdrop-filter:blur(18px);border-top:1px solid var(--line)}
  #tabbar .nav-btn{flex-direction:column;gap:.2rem;padding:.45rem 0;font-size:.68rem;justify-content:center;align-items:center;border-radius:12px;box-shadow:none}
  #tabbar .nav-btn span{display:block}
  #tabbar .nav-btn.on{background:none;color:#fff}
  #tabbar .nav-btn.on .ic{color:var(--acc2)}
}

/* ---------- cabeçalhos de seção ---------- */
.sec-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:.6rem 0 .3rem}
.sec-head h1{margin:0;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em}
.sec-head .tools{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.sec-head select{width:auto;padding:.55rem .9rem;border-radius:999px}
.mini-search{position:relative}
.mini-search .ic{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--mut);width:1.05rem;height:1.05rem}
.mini-search input{padding:.55rem .9rem .55rem 2.5rem;border-radius:999px;min-width:12rem}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding:.6rem 0 .8rem;position:sticky;top:0;z-index:4;background:linear-gradient(var(--bg) 78%,transparent);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:.5rem 1rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--mut);font-weight:600;font-size:.9rem;transition:all .15s}
.chip:hover{color:var(--txt);background:var(--surface2)}
.chip.on{background:var(--acc);color:#fff;border-color:transparent}
.chip small{opacity:.7;margin-left:.35rem;font-weight:500}
.row-head{display:flex;align-items:baseline;justify-content:space-between;margin:1.4rem 0 .5rem}
.row-head h2{margin:0;font-size:1.2rem;letter-spacing:-.01em}
.row-head a{color:var(--acc2);font-weight:600;font-size:.9rem;text-decoration:none;cursor:pointer}

/* ---------- cartões ---------- */
.grid{--cw:9.4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cw),1fr));gap:1.2rem .95rem}
@media(min-width:700px){.grid{--cw:10.6rem}}
@media(min-width:1300px){.grid{--cw:12rem}}
.grid.tiles{--cw:12.5rem;gap:.9rem}
@media(max-width:699px){.grid.tiles{--cw:9.6rem}}
.card{position:relative;display:block;text-align:left;color:inherit;border-radius:var(--r);min-width:0}
.poster{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid var(--line);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.poster img.ok{opacity:1}
.ini{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:2.2rem;color:rgba(255,255,255,.28);letter-spacing:.02em}
.card:hover .poster,.card:focus-visible .poster{transform:translateY(-5px) scale(1.025);box-shadow:var(--shadow)}
.card:focus-visible{outline:none}
.card:focus-visible .poster{outline:3px solid var(--acc2);outline-offset:3px}
.card .t{margin-top:.55rem;font-size:.9rem;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.card .s{font-size:.78rem;color:var(--mut);margin-top:.15rem}
.badge{position:absolute;left:.5rem;top:.5rem;padding:.12rem .5rem;border-radius:999px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);font-size:.74rem;font-weight:700;display:flex;align-items:center;gap:.25rem}
.badge .ic{width:.8rem;height:.8rem;color:var(--warn);fill:var(--warn)}
.fav{position:absolute;right:.4rem;top:.4rem;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;opacity:0;transition:opacity .15s,transform .15s;z-index:2}
.fav .ic{width:1rem;height:1rem}
.card:hover .fav,.card:focus-within .fav,.fav.on{opacity:1}
.fav.on{color:#fb7185}.fav.on .ic{fill:#fb7185}
@media(hover:none){.fav{opacity:.9}}
.prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18)}
.prog i{display:block;height:100%;background:var(--grad)}
.tile .poster{aspect-ratio:16/10;display:grid;place-items:center;padding:.9rem}
.tile .poster img{position:static;width:auto;height:auto;max-width:80%;max-height:80%;object-fit:contain;margin:auto}
.tile .poster .ini{font-size:1.6rem}
.tile .live-dot{position:absolute;left:.55rem;bottom:.5rem;font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:.1rem .45rem;border-radius:6px;background:#e11d48;color:#fff}

/* ---------- carrossel ---------- */
.rowwrap{position:relative}
.row{display:flex;gap:.95rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.3rem .2rem 1rem;margin:0 -.2rem;scrollbar-width:none;--cw:9.4rem}
.row::-webkit-scrollbar{display:none}
@media(min-width:700px){.row{--cw:10.6rem}}
@media(min-width:1300px){.row{--cw:12rem}}
.row .card{flex:0 0 var(--cw);scroll-snap-align:start}
.row.tiles{--cw:12rem}
.arrow{position:absolute;top:38%;z-index:3;width:2.6rem;height:2.6rem;border-radius:50%;background:rgba(10,15,27,.85);border:1px solid var(--line);display:none;place-items:center;backdrop-filter:blur(8px);color:#fff}
.arrow.l{left:-.6rem}.arrow.r{right:-.6rem}
@media(hover:hover) and (pointer:fine){.rowwrap:hover .arrow{display:grid}}
.arrow:hover{background:var(--acc)}

/* ---------- destaque ---------- */
.hero{position:relative;border-radius:28px;overflow:hidden;min-height:clamp(16rem,32vw,27rem);display:flex;align-items:flex-end;padding:clamp(1.1rem,3vw,2.6rem);margin:.4rem 0 .4rem;isolation:isolate;border:1px solid var(--line)}
.hero-bg{position:absolute;inset:-2rem;background-size:cover;background-position:center;filter:blur(30px) saturate(1.4) brightness(.8);z-index:-2;transform:scale(1.15)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,10,18,.92) 0%,rgba(7,10,18,.55) 55%,rgba(7,10,18,.2) 100%),linear-gradient(0deg,rgba(7,10,18,.85),transparent 55%);z-index:-1}
.hero-body{max-width:34rem;display:grid;gap:.8rem}
.hero .tag{display:inline-flex;gap:.4rem;align-items:center;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc2)}
.hero h2{margin:0;font-size:clamp(1.6rem,4vw,3rem);line-height:1.05;letter-spacing:-.03em}
.hero p{margin:0;color:#c6cee0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero .actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}
.hero-poster{position:absolute;right:clamp(1rem,4vw,3rem);bottom:-1.5rem;width:clamp(8rem,17vw,14rem);aspect-ratio:2/3;border-radius:18px;background-size:cover;background-position:center;box-shadow:var(--shadow);transform:rotate(3deg);border:1px solid var(--line)}
@media(max-width:699px){.hero-poster{display:none}}

/* ---------- esqueleto / estados ---------- */
.sk{background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 37%,var(--surface) 63%);background-size:400% 100%;animation:sh 1.4s ease infinite;border-radius:16px}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk-card{aspect-ratio:2/3}
.sk-line{height:.8rem;margin-top:.6rem;border-radius:8px;width:75%}
.state{display:grid;place-items:center;text-align:center;gap:.8rem;padding:3.5rem 1rem;color:var(--mut)}
.state .big{font-size:2.6rem}
.state b{color:var(--txt);font-size:1.1rem}
.loadnote{text-align:center;color:var(--mut);font-size:.9rem;padding:.4rem 0 1rem}
.spin{width:2.2rem;height:2.2rem;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--acc2);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- janela de detalhes ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(3,5,10,.72);backdrop-filter:blur(10px);display:grid;place-items:center;padding:1rem;animation:fade .18s}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:min(58rem,100%);max-height:92dvh;overflow:auto;border-radius:28px;background:var(--bg2);border:1px solid var(--line);box-shadow:var(--shadow);animation:rise .25s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(24px);opacity:0}}
.sheet-bg{position:absolute;inset:0 0 auto 0;height:18rem;background-size:cover;background-position:center;filter:blur(24px) brightness(.55) saturate(1.3);transform:scale(1.2);-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.sheet-in{position:relative;padding:clamp(1.1rem,3vw,2rem);display:grid;gap:1.2rem}
.sheet-top{display:flex;gap:1.4rem;align-items:flex-start}
.sheet-poster{width:clamp(7rem,20vw,12rem);aspect-ratio:2/3;border-radius:16px;background:var(--surface2) center/cover;flex:none;box-shadow:var(--shadow);border:1px solid var(--line)}
.sheet h2{margin:0;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.02em;line-height:1.15}
.meta{display:flex;flex-wrap:wrap;gap:.45rem;margin:.6rem 0}
.pill{padding:.18rem .65rem;border-radius:999px;background:rgba(255,255,255,.09);font-size:.8rem;color:#d7deee}
.plot{color:#c5cde0;margin:.4rem 0 0}
.sheet .close{position:absolute;right:.9rem;top:.9rem;z-index:3}
.actions{display:flex;gap:.6rem;flex-wrap:wrap}
.seasons{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}
.eps{display:grid;gap:.5rem}
.ep{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.7rem .9rem;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-align:left;transition:background .15s}
.ep:hover,.ep:focus-visible{background:var(--surface2);outline:0}
.ep .n{width:2.1rem;height:2.1rem;border-radius:10px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.ep .et{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep .ed{font-size:.78rem;color:var(--mut)}
.ep .st{font-size:.78rem;color:var(--acc2);font-weight:600}
.ep .bar{height:3px;background:rgba(255,255,255,.12);border-radius:3px;margin-top:.35rem;overflow:hidden}
.ep .bar i{display:block;height:100%;background:var(--grad)}
@media(max-width:699px){
  .overlay{align-items:end;padding:0}
  .sheet{border-radius:26px 26px 0 0;max-height:94dvh;width:100%}
  .sheet-top{flex-direction:column;align-items:center;text-align:center}
  .meta,.actions{justify-content:center}
}

/* ---------- menu do usuário / toast ---------- */
.menu{position:fixed;z-index:60;min-width:15rem;padding:.4rem;border-radius:18px;background:var(--bg2);border:1px solid var(--line);box-shadow:var(--shadow);animation:fade .12s}
.menu button,.menu .mi{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.7rem .8rem;border-radius:12px;font-weight:500}
.menu button:hover{background:rgba(255,255,255,.07)}
.menu hr{border:0;border-top:1px solid var(--line);margin:.3rem 0}
.menu .mi{color:var(--mut);font-size:.8rem}
#toast{position:fixed;left:50%;bottom:6rem;transform:translate(-50%,20px);z-index:100;padding:.75rem 1.1rem;border-radius:14px;background:#1d2840;border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .25s;max-width:min(30rem,92vw);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- reprodutor ---------- */
#player{position:fixed;inset:0;z-index:80;background:#000;display:block;overflow:hidden;user-select:none;touch-action:manipulation}
#player.idle{cursor:none}
#pv{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
#pv.cover{object-fit:cover}
.pv-top,.pv-bottom{position:absolute;left:0;right:0;z-index:3;transition:opacity .3s,transform .3s}
.pv-top{top:0;display:flex;align-items:center;gap:.8rem;padding:max(.9rem,env(safe-area-inset-top)) 1.2rem 2.5rem;background:linear-gradient(rgba(0,0,0,.8),transparent)}
.pv-bottom{bottom:0;padding:3rem 1.2rem max(.9rem,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.88))}
#player.idle .pv-top{background:none;pointer-events:none}
#player.idle .pv-top>:not(.pv-title){opacity:0;visibility:hidden}
.pv-title b,.pv-title span{text-shadow:0 1px 8px rgba(0,0,0,.8)}
#player.idle .pv-bottom{opacity:0;transform:translateY(12px);pointer-events:none}
.pv-title{flex:1;min-width:0}
.pv-title b{display:block;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-title span{display:block;font-size:.85rem;color:#c3cbe0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbtn{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;color:#fff;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);flex:none;transition:background .15s,transform .15s}
.pbtn:hover{background:rgba(255,255,255,.22)}
.pbtn:active{transform:scale(.92)}
.pbtn:focus-visible{outline:3px solid var(--acc2)}
.pbtn.plain{background:none}
.pbtn.on{background:var(--acc)}
.mode-tag{padding:.15rem .6rem;border-radius:999px;background:rgba(255,255,255,.12);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pv-center{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.pv-center .spin{width:3.4rem;height:3.4rem;display:none}
#player.loading .pv-center .spin{display:block}
.pv-bigplay{width:4.8rem;height:4.8rem;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);display:none;place-items:center;color:#fff;pointer-events:auto;border:1px solid rgba(255,255,255,.2)}
.pv-bigplay .ic{width:2rem;height:2rem}
#player.paused:not(.loading):not(.failed) .pv-bigplay{display:grid}
.seekrow{display:flex;align-items:center;gap:.8rem;font-variant-numeric:tabular-nums;font-size:.85rem}
.seekrow.live-row{display:none}
#seek{-webkit-appearance:none;appearance:none;flex:1;height:1.6rem;background:transparent;padding:0;border:0;border-radius:0;cursor:pointer}
#seek:focus{box-shadow:none}
#seek::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--acc2) var(--p,0%),rgba(255,255,255,.28) var(--p,0%))}
#seek::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.28)}
#seek::-moz-range-progress{height:5px;border-radius:5px;background:var(--acc2)}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;margin-top:-5px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
#seek::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:0}
.ctlrow{display:flex;align-items:center;gap:.55rem;margin-top:.5rem}
.vol{display:flex;align-items:center;gap:.4rem}
.vol input{width:6rem;height:1.2rem;-webkit-appearance:none;appearance:none;background:transparent;border:0;padding:0}
.vol input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:rgba(255,255,255,.3)}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-4px}
@media(max-width:699px){.vol input{display:none}}
.epg{margin-bottom:.4rem;display:none;gap:.8rem;align-items:center}
#player.islive .epg.has{display:flex}
.epg b{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#e11d48;padding:.12rem .45rem;border-radius:6px}
.epg .eb{flex:1;max-width:22rem;height:4px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden}
.epg .eb i{display:block;height:100%;background:#fff}
.epg span{font-size:.92rem;color:#e6ebf7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player.islive .seekrow{display:none}
#player:not(.islive) .live-only{display:none}
#player.islive .vod-only{display:none}
.pv-err{position:absolute;inset:0;z-index:5;display:none;place-items:center;padding:1.5rem;background:rgba(0,0,0,.78);backdrop-filter:blur(6px)}
#player.failed .pv-err{display:grid}
.pv-err .box{max-width:28rem;text-align:center;display:grid;gap:.9rem;justify-items:center}
.pv-err h3{margin:0;font-size:1.3rem}
.pv-err p{margin:0;color:#c3cbe0;white-space:pre-line}
.pv-err .row-b{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.pv-drawer{position:absolute;top:0;right:0;bottom:0;width:min(22rem,86vw);z-index:6;background:rgba(8,12,22,.94);backdrop-filter:blur(16px);border-left:1px solid var(--line);display:none;flex-direction:column;animation:slide .22s}
.pv-drawer.open{display:flex}
@keyframes slide{from{transform:translateX(30%);opacity:0}}
.pv-drawer h4{margin:0;padding:1rem 1.1rem .6rem;font-size:1rem;display:flex;justify-content:space-between;align-items:center}
.pv-list{overflow:auto;padding:0 .5rem 1rem;display:grid;gap:.25rem;align-content:start}
.pv-ch{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:12px;text-align:left;width:100%;color:#dfe5f4}
.pv-ch:hover,.pv-ch:focus-visible{background:rgba(255,255,255,.08);outline:0}
.pv-ch.on{background:rgba(124,92,255,.28);color:#fff}
.pv-ch .lg{width:2.4rem;height:2.4rem;border-radius:10px;background:var(--surface2) center/contain no-repeat;flex:none;display:grid;place-items:center;font-size:.75rem;font-weight:800;color:rgba(255,255,255,.4);overflow:hidden}
.pv-ch .lg img{width:100%;height:100%;object-fit:contain}
.pv-ch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.pv-menu{position:absolute;right:1.2rem;top:4.6rem;z-index:7;width:min(17rem,90vw);padding:.5rem;border-radius:18px;background:rgba(14,20,35,.96);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--shadow)}
.pv-menu h5{margin:.5rem .6rem .3rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.pv-menu .opts{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 .4rem .5rem}
.pv-menu .o{padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,.08);font-size:.85rem}
.pv-menu .o.on{background:var(--acc);color:#fff}
.pv-menu .full{display:flex;gap:.6rem;align-items:center;width:100%;padding:.6rem .7rem;border-radius:12px;text-align:left}
.pv-menu .full:hover{background:rgba(255,255,255,.08)}
.skipfx{position:absolute;top:50%;z-index:4;transform:translateY(-50%);padding:1rem 1.3rem;border-radius:999px;background:rgba(0,0,0,.55);font-weight:800;animation:fade .15s;pointer-events:none}

/* ---------- navegação por categorias ---------- */
.browse{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:start}
@media(min-width:1100px){.browse{grid-template-columns:17rem 1fr}}
.cats{display:none}
@media(min-width:1100px){.cats{display:flex;flex-direction:column;position:sticky;top:.4rem;max-height:calc(100dvh - 6.5rem);border:1px solid var(--line);background:var(--surface);border-radius:22px;overflow:hidden}}
.cats-head{padding:.8rem;border-bottom:1px solid var(--line);display:grid;gap:.6rem}
.cats-head b{font-family:var(--font-d);font-size:1rem}
.cats-list{overflow:auto;padding:.4rem;display:grid;gap:.1rem;align-content:start}
.cat{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.65rem .8rem;border-radius:12px;color:var(--mut);font-weight:600;font-size:.92rem;min-height:2.75rem}
.cat span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat small{flex:none;font-size:.76rem;opacity:.8;font-weight:500}
.cat:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.cat.on{background:var(--acc);color:#fff}
.cat-empty{padding:1rem;color:var(--mut);text-align:center;font-size:.9rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 1rem}
.catbtn{display:inline-flex}
@media(min-width:1100px){.catbtn{display:none}}
.fpill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .5rem .45rem .9rem;border-radius:999px;background:rgba(109,74,255,.2);border:1px solid rgba(109,74,255,.5);font-weight:600;font-size:.88rem;max-width:100%}
.fpill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpill button{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:rgba(255,255,255,.14)}
.fpill .ic{width:.9rem;height:.9rem}
.count{color:var(--mut);font-size:.88rem;margin-left:auto}
.cats-sheet{max-height:88dvh}
.cats-sheet .cats-list{max-height:62dvh}
/* ---------- guia de programação ---------- */
.epg{display:grid!important;gap:.35rem;margin-bottom:.7rem;max-width:44rem}
.epg .e-now{display:flex;align-items:center;gap:.7rem;min-width:0}
.epg .e-now b{flex:none;font-size:.72rem;letter-spacing:.06em;padding:.15rem .5rem;border-radius:6px;background:var(--live);color:#fff}
.epg .e-now span{font-weight:700;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.epg .e-now small{flex:none;color:#c3cbe0;font-size:.85rem}
.epg .eb{max-width:none;flex:none}
.epg .e-next{font-size:.88rem;color:#c3cbe0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg .e-none{color:#c3cbe0;font-size:.9rem}
.pg{display:grid;gap:.4rem;padding:0 .7rem 1rem;overflow:auto;align-content:start}
.pg .p{padding:.7rem .8rem;border-radius:12px;background:rgba(255,255,255,.05)}
.pg .p.now{background:rgba(109,74,255,.3);border:1px solid rgba(109,74,255,.7)}
.pg .p small{display:block;color:#b8c2da;font-size:.8rem;margin-bottom:.1rem}
.pg .p b{font-weight:700}
.pg .none{padding:1rem;color:#c3cbe0}
#player:not(.islive) .epg{display:none!important}
#player:not(.islive) #pguide,#player:not(.islive) #pgdrawer{display:none!important}

/* ---------- perfis ---------- */
#profiles{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:1.5rem;overflow:auto;background:radial-gradient(60rem 40rem at 15% 10%,rgba(109,74,255,.3),transparent 60%),radial-gradient(50rem 36rem at 90% 90%,rgba(34,211,238,.2),transparent 60%),var(--bg)}
.pf-wrap{display:grid;gap:1.6rem;justify-items:center;text-align:center;width:min(48rem,100%)}
.pf-wrap h1{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.02em}
.pf-grid{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center}
.pf{display:grid;gap:.6rem;justify-items:center;width:8.5rem;color:var(--txt);position:relative}
.av{width:6.2rem;height:6.2rem;border-radius:26px;display:grid;place-items:center;font:700 2.2rem var(--font-d);color:#fff;transition:transform .2s,box-shadow .2s;border:3px solid transparent;position:relative}
.pf:hover .av,.pf:focus-visible .av{transform:translateY(-4px) scale(1.04);box-shadow:var(--shadow);border-color:#fff}
.pf:focus-visible{outline:none}
.pf .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pf .tg{font-size:.74rem;color:var(--mut);margin-top:-.4rem}
.av .lk{position:absolute;right:-.3rem;bottom:-.3rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--bg);display:grid;place-items:center;border:2px solid var(--line)}
.av .lk .ic{width:.85rem;height:.85rem}
.pf.manage .av::after{content:"";position:absolute;inset:0;border-radius:23px;background:rgba(0,0,0,.45)}
.pf.manage .ed{position:absolute;top:2.1rem;left:50%;transform:translateX(-50%);z-index:2;color:#fff}
.pf.add .av{background:var(--surface);border:2px dashed var(--line);color:var(--mut)}
.pf-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.av.sm{width:2.9rem;height:2.9rem;border-radius:50%;font-size:1.05rem;border:0}
.dlg .sheet{width:min(26rem,100%)}
.dlg form{display:grid;gap:.9rem}
.dlg label{display:grid;gap:.3rem;font-size:.85rem;color:var(--mut);font-weight:600}
.dlg .chk{display:flex;gap:.6rem;align-items:center;color:var(--txt);font-size:.95rem}
.dlg .chk input{width:1.3rem;height:1.3rem;flex:none}
.dlg .row-b{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.pin{letter-spacing:.6em;text-align:center;font-size:1.4rem;font-weight:700}
/* ---------- busca com sugestões ---------- */
.sug{position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:30;background:var(--bg2);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:.4rem;max-height:70dvh;overflow:auto}
.sug h4{margin:.5rem .7rem .2rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.sug button{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.6rem .7rem;border-radius:12px;min-height:2.75rem}
.sug button:hover,.sug button:focus-visible,.sug button.on{background:rgba(255,255,255,.07)}
.sug .k{width:2rem;height:2rem;border-radius:9px;background:var(--surface2);display:grid;place-items:center;color:var(--mut);flex:none}
.sug .k .ic{width:1rem;height:1rem}
.sug span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- aviso de assinatura ---------- */
.banner{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;padding:.8rem 1rem;border-radius:16px;margin:.4rem 0;font-weight:600;border:1px solid}
.banner.warn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.5);color:#fde68a}
.banner.bad{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.5);color:#fecdd3}
/* ---------- guia de programação ---------- */
.gd{--pm:5.2px;border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden}
.gd-scroll{overflow:auto;max-height:calc(100dvh - 15rem)}
.gd-inner{position:relative;min-width:max-content}
.gd-head,.gd-row{display:flex}
.gd-head{position:sticky;top:0;z-index:3;background:var(--bg2);border-bottom:1px solid var(--line)}
.gd-ch{position:sticky;left:0;z-index:2;flex:none;width:10.5rem;background:var(--bg2);display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-right:1px solid var(--line);text-align:left;font-weight:700;font-size:.86rem;min-height:3.6rem}
.gd-ch .lg{width:2.2rem;height:2.2rem;border-radius:9px;background:var(--surface2);display:grid;place-items:center;font-size:.7rem;color:var(--mut);flex:none;overflow:hidden}
.gd-ch .lg img{width:100%;height:100%;object-fit:contain}
.gd-ch span.n{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gd-head .gd-ch{z-index:4;font-weight:600;color:var(--mut);min-height:2.4rem}
.gd-tl{position:relative;flex:none}
.gd-tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);padding:.55rem .5rem;font-size:.78rem;color:var(--mut);font-variant-numeric:tabular-nums}
.gd-row{border-bottom:1px solid var(--line)}
.gd-row .gd-tl{height:3.6rem}
.gd-p{position:absolute;top:.3rem;bottom:.3rem;padding:.35rem .6rem;border-radius:10px;background:var(--surface2);text-align:left;overflow:hidden;border:1px solid var(--line);font-size:.82rem;line-height:1.25}
.gd-p b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-p small{color:var(--mut);font-size:.72rem}
.gd-p.now{background:rgba(109,74,255,.35);border-color:rgba(109,74,255,.8)}
.gd-p:hover,.gd-p:focus-visible{background:rgba(109,74,255,.5)}
.gd-now{position:absolute;top:0;bottom:0;width:2px;background:var(--live);z-index:1;pointer-events:none}
.gd-none{position:absolute;left:.8rem;top:1.1rem;color:var(--mut);font-size:.85rem}
@media(max-width:699px){.gd-ch{width:6.6rem}.gd-ch .lg{display:none}.gd-scroll{max-height:calc(100dvh - 17rem)}}
.pf.manage .av{color:transparent}
/* legendas */
#pv::cue{background:rgba(0,0,0,.72);color:#fff;font-family:Manrope,system-ui,sans-serif;font-size:1.15em;line-height:1.35}
#pv::-webkit-media-text-track-display{transform:translateY(-3.5rem)}

/* ---------- marca ---------- */
.mark{background:none!important;box-shadow:none!important;border-radius:22%;overflow:hidden}
.mark img{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 24px rgba(109,74,255,.45))}

/* ---------- carregamento 3D ---------- */
.l3d{--s:5.2rem;display:grid;justify-items:center;gap:1.6rem;padding:3.2rem 1rem 2.6rem;text-align:center;color:var(--mut)}
.l3d-scene{position:relative;width:var(--s);height:var(--s);perspective:720px;margin:1.2rem 0}
.l3d-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:l3dcube 6s linear infinite}
.l3d-cube i{position:absolute;inset:0;border-radius:20%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.38);
  background:linear-gradient(135deg,#8b6bff,#3fb6f0);backface-visibility:hidden;box-shadow:inset 0 0 22px rgba(255,255,255,.22)}
.l3d-cube i::after{content:"";width:34%;height:38%;background:#fff;clip-path:polygon(12% 0,100% 50%,12% 100%);transform:translateX(8%);filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.l3d-cube i:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.l3d-cube i:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.l3d-cube i:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.l3d-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.l3d-cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2));background:linear-gradient(135deg,#22d3ee,#8b6bff)}
.l3d-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2));background:linear-gradient(135deg,#6d4aff,#22d3ee)}
.l3d-cube i:nth-child(n+5)::after{display:none}
.l3d-ring{position:absolute;inset:-48%;border-radius:50%;border:2px solid rgba(34,211,238,.28);transform:rotateX(74deg);transform-style:preserve-3d;animation:l3dring 3.2s linear infinite}
.l3d-ring::after{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#22d3ee;box-shadow:0 0 14px 4px rgba(34,211,238,.7)}
.l3d-ring.b{inset:-62%;border-color:rgba(139,107,255,.25);animation-duration:4.6s;animation-direction:reverse;transform:rotateX(74deg) rotateY(14deg)}
.l3d-ring.b::after{background:#8b6bff;box-shadow:0 0 14px 4px rgba(139,107,255,.7)}
.l3d-shadow{position:absolute;left:50%;bottom:-2.2rem;width:var(--s);height:1rem;margin-left:calc(var(--s)/-2);border-radius:50%;background:radial-gradient(closest-side,rgba(109,74,255,.55),transparent);animation:l3dsh 3s ease-in-out infinite}
.l3d-cube{animation:l3dcube 6s linear infinite,l3dfloat 3s ease-in-out infinite;filter:drop-shadow(0 14px 22px rgba(109,74,255,.35))}
.l3d b{color:var(--txt);font-family:var(--display,inherit);font-size:1.05rem;letter-spacing:-.01em}
.l3d b::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:l3ddots 1.4s steps(4) infinite}
.l3d small{display:block;margin-top:.25rem;font-size:.85rem}
.l3d.sm{--s:2.4rem;padding:.8rem;gap:.4rem}
.l3d.sm .l3d-scene{margin:.5rem}.l3d.sm .l3d-ring,.l3d.sm .l3d-shadow{display:none}
.l3d.xs{--s:2.8rem;padding:0;gap:0}.l3d.xs .l3d-scene{margin:0}.l3d.xs .l3d-ring,.l3d.xs .l3d-shadow{display:none}
@keyframes l3dcube{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
@keyframes l3dfloat{0%,100%{translate:0 -6px}50%{translate:0 6px}}
@keyframes l3dring{to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes l3dsh{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.72);opacity:.5}}
@keyframes l3ddots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
.pv-center .l3d{display:none;position:absolute;inset:auto;padding:0}
#player.loading .pv-center .l3d{display:grid}
/* mesmo com "reduzir animações" do Windows o indicador de carregamento continua girando (é um sinal de progresso); só tiramos o flutuar e o pulso */
@media(prefers-reduced-motion:reduce){.l3d-cube{animation:l3dcube 9s linear infinite}.l3d-shadow{animation:none}.l3d-ring{animation-duration:8s}}

/* abertura do app */
#splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;align-content:center;gap:.4rem;background:radial-gradient(40rem 26rem at 50% 30%,rgba(109,74,255,.28),transparent 60%),var(--bg);transition:opacity .35s}
#splash.out{opacity:0;pointer-events:none}
#splash img{width:6.5rem;height:6.5rem;animation:splashin .7s cubic-bezier(.2,.8,.2,1) both,l3dfloat 3s ease-in-out .7s infinite}
#splash .l3d{padding-top:.5rem}
@keyframes splashin{from{transform:scale(.6) rotate(-12deg);opacity:0}}

/* ajustes do tema claro */
:root[data-theme="light"] .nav-btn:hover,:root[data-theme="light"] .menu button:hover,:root[data-theme="light"] .sug button:hover{background:rgba(15,23,42,.06)}
:root[data-theme="light"] .nav-btn.on{color:var(--acc)}
:root[data-theme="light"] .pill,:root[data-theme="light"] .ep .n{background:rgba(15,23,42,.07);color:var(--txt)}
:root[data-theme="light"] .overlay{background:rgba(15,23,42,.45)}
:root[data-theme="light"] .arrow{background:rgba(255,255,255,.92);color:var(--txt)}
:root[data-theme="light"] body{background:radial-gradient(50rem 30rem at 10% -10%,rgba(124,92,255,.12),transparent 60%),var(--bg)}
@media(prefers-color-scheme:light){
:root[data-theme="auto"] .nav-btn:hover,:root[data-theme="auto"] .menu button:hover,:root[data-theme="auto"] .sug button:hover{background:rgba(15,23,42,.06)}
:root[data-theme="auto"] .nav-btn.on{color:var(--acc)}
:root[data-theme="auto"] .pill,:root[data-theme="auto"] .ep .n{background:rgba(15,23,42,.07);color:var(--txt)}
:root[data-theme="auto"] .overlay{background:rgba(15,23,42,.45)}
:root[data-theme="auto"] .arrow{background:rgba(255,255,255,.92);color:var(--txt)}
}
:root[data-theme="light"] #rail,:root[data-theme="light"] #tabbar{background:rgba(255,255,255,.94)}
:root[data-theme="light"] .hero,:root[data-theme="light"] .hero h2,:root[data-theme="light"] .hero p{color:#fff}
:root[data-theme="light"] #toast{background:#0f172a;color:#fff}
:root[data-theme="light"] .nav-btn.on{background:rgba(109,74,255,.12)}
@media(prefers-color-scheme:light){
:root[data-theme="auto"] #rail,:root[data-theme="auto"] #tabbar{background:rgba(255,255,255,.94)}
:root[data-theme="auto"] .hero,:root[data-theme="auto"] .hero h2,:root[data-theme="auto"] .hero p{color:#fff}
:root[data-theme="auto"] #toast{background:#0f172a;color:#fff}
:root[data-theme="auto"] .nav-btn.on{background:rgba(109,74,255,.12)}
}

.pv-nextep{position:absolute;right:max(1rem,3%);bottom:6.5rem;z-index:6;background:#fff;color:#111;border-radius:10px;padding:.8rem 1.2rem;font-weight:800;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.pv-nextep[hidden]{display:none}
.bad-tag{position:absolute;left:.4rem;bottom:.4rem;background:rgba(180,90,0,.9);color:#fff;font-size:.65rem;font-weight:800;padding:.1rem .4rem;border-radius:6px}
#pskipin{bottom:6.5rem}
.cat.on small{opacity:1}