/* Prateleiras, cartões, páginas de categoria e tela de detalhes. */
.shelf{margin:1.5rem 0 2.1rem}
.shelf-head{display:flex;align-items:baseline;gap:1rem;padding:0 var(--gutter);margin-bottom:.7rem}
.shelf-head h2{font-size:1.35rem;letter-spacing:-.01em}
.link{border:0;background:none;color:var(--muted);font-weight:600;padding:.2rem .5rem;border-radius:8px}
.link:hover{color:#fff}
.link:focus-visible{outline:3px solid #fff}
.row{display:flex;gap:1rem;overflow-x:auto;padding:1.1rem var(--gutter) 1.6rem;margin-top:-.6rem;scrollbar-width:none;scroll-padding-inline:var(--gutter)}
.row::-webkit-scrollbar{display:none}
.card{position:relative;flex:none;display:block;padding:0;border:0;background:none;text-align:left;border-radius:16px;outline:0;color:inherit;scroll-margin:6rem 3rem;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.poster{width:11.5rem}
.tile{width:18rem}
.art{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(150deg,hsl(var(--h,220) 38% 24%),hsl(var(--h,220) 40% 12%));box-shadow:0 0 0 1px #ffffff12;transition:box-shadow .2s}
.poster .art{aspect-ratio:2/3}
.tile .art{aspect-ratio:16/9}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .art img{object-fit:contain;padding:14%}
.fb{position:absolute;inset:0;display:grid;place-items:center;padding:.8rem;text-align:center;font:700 .95rem/1.2 var(--display);color:hsl(var(--h,220) 70% 82%)}
.card:hover,.card:focus-visible{transform:scale(1.07);z-index:3}
.card:focus-visible .art{box-shadow:0 0 0 3px #fff,0 22px 50px #000d,0 0 46px var(--glow)}
.cap{padding:.55rem .15rem 0}
.cap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:.92rem;line-height:1.25}
.cap small{display:block;margin-top:.1rem;color:var(--faint);font-size:.78rem}
.badge{position:absolute;z-index:1;padding:.15rem .5rem;border-radius:999px;font-size:.7rem;font-weight:700;background:#000b;color:#fff;backdrop-filter:blur(4px)}
.rate-badge{top:.5rem;right:.5rem;color:#ffd75e}
.live-badge{left:.5rem;bottom:.5rem;color:var(--bad)}
.num-badge{left:.5rem;top:.5rem;font-family:var(--mono)}
.play{position:absolute;z-index:1;inset:0;display:grid;place-items:center;opacity:0;background:#0006;transition:opacity .15s}
.play .ic{width:3rem;height:3rem;padding:.8rem;border-radius:50%;background:#fff;color:#080b0a}
.card:hover .play,.card:focus-visible .play,.ep:focus-visible .play,.ep:hover .play{opacity:1}
.prog{position:absolute;z-index:2;left:0;right:0;bottom:0;height:.3rem;background:#ffffff40}
.prog::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--accent)}
.skeleton{flex:none;border-radius:16px;background:linear-gradient(100deg,#171b1e 30%,#20262a 50%,#171b1e 70%);background-size:200% 100%;animation:shine 1.4s linear infinite;pointer-events:none}
.skeleton.poster{height:17.25rem}.skeleton.tile{height:10.1rem}

/* páginas */
.page-head{display:flex;align-items:center;gap:1rem;padding:1.2rem var(--gutter) .4rem}
.page-head h1{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:1.6rem 1.1rem;padding:1.2rem var(--gutter) 2rem}
.grid:has(.tile){grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.grid .card,.grid .skeleton{width:auto}
.grid-title{padding:1.5rem var(--gutter) 0;font-size:1.35rem}
.sentinel{height:2rem}
.empty-state{display:grid;justify-items:center;gap:.9rem;padding:5rem 1rem;text-align:center}
.empty-state h2{font-size:1.6rem}
.search-in{display:block;width:min(46rem,calc(100% - 2*var(--gutter)));margin:1rem var(--gutter);padding:1rem 1.3rem;font-size:1.25rem;background:#0b0d0fcc;border:2px solid var(--line);border-radius:999px;outline:0}
.search-in:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.err{margin:1rem var(--gutter)}

/* detalhes */
.detail{position:fixed;inset:0;z-index:40;overflow:auto;background:var(--bg)}
.d-root{position:relative;min-height:100%;padding-bottom:3rem}
.d-bg{position:absolute;inset:0 0 auto;height:min(75vh,46rem);background:#1a1f23 center top/cover no-repeat}
.d-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080b0a 4%,#080b0ab5 40%,#080b0a66 100%),linear-gradient(0deg,#080b0a 4%,transparent 60%)}
.d-back{position:fixed;z-index:3;top:1.2rem;left:var(--gutter)}
.d-body{position:relative;z-index:1;display:flex;gap:2.5rem;align-items:flex-end;padding:9rem var(--gutter) 1.5rem;min-height:min(75vh,46rem)}
.d-poster{flex:none;width:14rem;aspect-ratio:2/3;border-radius:16px;box-shadow:0 30px 70px #000c}
.d-main{display:grid;gap:.8rem;min-width:0;max-width:50rem}
.d-line{color:#c5ccd1;font-size:.95rem}
.d-line b{color:var(--muted);font-weight:600}
.d-eps{position:relative;z-index:1;padding:1rem var(--gutter) 2rem}
.seasons{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem 0 1rem;scrollbar-width:none}
.season{flex:none;padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font-weight:600}
.season.on{background:#fff;border-color:#fff;color:#080b0a}
.season:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ep-list{display:grid;gap:.7rem}
.ep{display:grid;grid-template-columns:12rem 1fr;gap:1.1rem;align-items:center;padding:.6rem;border:0;border-radius:16px;background:#ffffff0a;text-align:left;outline:0;color:inherit;transition:background .15s,transform .15s}
.ep:hover,.ep:focus-visible{background:#ffffff1c}
.ep:focus-visible{box-shadow:0 0 0 3px #fff,0 0 36px var(--glow);transform:scale(1.01)}
.ep-th{aspect-ratio:16/9;border-radius:12px}
.ep-tx{min-width:0;display:grid;gap:.2rem}
.ep-tx b{font-size:1.02rem}
.ep-tx small{color:var(--faint)}
.ep-tx p{color:var(--muted);font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:820px){
  .poster{width:9rem}.tile{width:14rem}
  .skeleton.poster{height:13.5rem}.skeleton.tile{height:7.9rem}
  .d-body{flex-direction:column;align-items:flex-start;gap:1.2rem;padding-top:6rem}
  .d-poster{width:9rem}
  .ep{grid-template-columns:7.5rem 1fr}
}

/* Ao vivo: alternador e visão em lista */
.page-head .seg{margin-left:auto}
.seg{display:inline-flex;gap:.2rem;padding:.25rem;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:999px}
.seg-btn{border:0;background:none;color:var(--muted);padding:.45rem 1.1rem;border-radius:999px;font-weight:600;outline:0}
.seg-btn:hover{color:var(--text)}
.seg-btn.on{background:var(--grad-primary);color:var(--on-primary)}
.seg-btn:focus-visible{box-shadow:0 0 0 3px #fff}
.livelist{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:1.5rem;padding:1rem var(--gutter) 3rem;align-items:start}
.cats{position:sticky;top:5.5rem;display:grid;gap:.25rem;max-height:calc(100dvh - 7rem);overflow:auto;padding:.2rem .3rem .2rem .2rem;scrollbar-width:thin}
.cat{display:block;width:100%;padding:.65rem .9rem;border:1px solid transparent;border-radius:var(--r);background:none;color:var(--text-2);font-weight:600;text-align:left;outline:0;transition:background .15s,color .15s}
.cat:hover{background:var(--surface-2);color:var(--text)}
.cat.on{background:var(--primary-soft);border-color:rgb(var(--primary-rgb)/.4);color:var(--accent)}
.cat:focus-visible{box-shadow:0 0 0 3px #fff}
.ch-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-bottom:.9rem}
.ch-title{flex:1;min-width:10rem;font-size:1.2rem}
.ch-filter{width:min(18rem,100%);padding:.6rem 1.1rem;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:999px;outline:0}
.ch-filter:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgb(var(--primary-rgb)/.26)}
.chlist{display:grid;gap:.45rem}
.crow{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,background .15s}
.crow:hover{border-color:var(--line-strong);background:var(--surface-2)}
.crow-main{flex:1;min-width:0;display:grid;grid-template-columns:2.6rem 4.2rem minmax(0,1fr);gap:.9rem;align-items:center;padding:.5rem .8rem;border:0;border-radius:var(--r);background:none;color:inherit;text-align:left;outline:0}
.crow-main:focus-visible{box-shadow:0 0 0 3px #fff,0 0 30px var(--glow)}
.cnum{font:500 .85rem var(--mono);color:var(--faint);text-align:right}
.cav{width:4.2rem;aspect-ratio:16/9;border-radius:8px}
.cav img{object-fit:contain;padding:10%}
.ctx{min-width:0}
.ctx b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ctx small{color:var(--bad);font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cstar{display:grid;place-items:center;width:2.8rem;height:2.8rem;margin-right:.4rem;border:0;border-radius:10px;background:none;color:var(--faint);outline:0}
.cstar:hover{color:var(--warn)}
.cstar.on{color:var(--warn)}.cstar.on .ic{fill:currentColor}
.cstar:focus-visible{box-shadow:0 0 0 3px #fff}
@media (max-width:820px){
  .livelist{grid-template-columns:1fr;gap:1rem}
  .cats{position:static;display:flex;max-height:none;overflow-x:auto;padding-bottom:.4rem}
  .cat{width:auto;flex:none;white-space:nowrap;border-color:var(--line)}
  .page-head .seg{margin-left:0}
}