/* =====================================================================
   tube.css — BRAGATUBE em Fable 5 (barra lateral, feed, assistir, player,
   comentários e shorts). Complementa o bt.css; nada de cor nova fora da paleta.
   ===================================================================== */

/* ---------------------------------------------------------- estrutura */
.tubo{display:grid;grid-template-columns:232px minmax(0,1fr);gap:26px;align-items:start;padding-top:18px}
.lateral{position:sticky;top:calc(var(--topo-h) + 12px);max-height:calc(100vh - var(--topo-h) - 20px);overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;padding-right:4px;scrollbar-width:thin}
.lateral::-webkit-scrollbar{width:8px}
.lateral::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.lnav{display:flex;flex-direction:column;gap:3px}
.litem{display:flex;align-items:center;gap:16px;min-height:42px;padding:8px 12px;border-radius:12px;font-size:14px;
  font-weight:700;color:var(--texto2);border:1px solid transparent}
.litem .ico{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.litem .ico svg{width:23px;height:23px;fill:currentColor}
.litem .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.litem:hover{background:rgba(255,255,255,.07);color:var(--texto)}
.litem.on{background:linear-gradient(180deg,rgba(255,46,96,.22),rgba(195,13,51,.12));
  border-color:var(--borda-neon);color:#fff;box-shadow:inset 0 0 22px rgba(255,23,68,.10)}
.litem.on .ico svg{fill:var(--neon2)}
.lcanal{display:flex;align-items:center;gap:12px;min-height:42px;padding:6px 12px;border-radius:12px;
  font-size:13.5px;font-weight:700;color:var(--texto2)}
.lcanal:hover{background:rgba(255,255,255,.07);color:var(--texto)}
.lav{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--neon2),#6E0B20);color:#fff;font-weight:900;font-size:12px;border:1px solid var(--borda-ouro)}
.lav img{width:100%;height:100%;object-fit:cover}
.lcanal .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcanal .ver{color:var(--azul)}
.lsep{height:1px;background:var(--borda);margin:4px 0}
.lbloco{display:flex;flex-direction:column;gap:2px}
.ltit{font-size:12px;letter-spacing:.02em;color:var(--texto);font-weight:800;padding:6px 12px 3px}
.lmini{font-size:13px;color:var(--texto2);padding:5px 12px}
.lmini:hover{color:var(--ouro)}

/* -------- hamburguer + gaveta (menu lateral estilo YouTube) -------- */
.tube-ham{display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border:0;
  background:transparent;color:var(--texto);border-radius:50%;cursor:pointer;margin-right:2px}
.tube-ham:hover{background:rgba(255,255,255,.10)}
.tube-fundo{display:none;position:fixed;inset:var(--topo-h) 0 0;z-index:59;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
body.gaveta .tube-fundo{display:block}
.lateral-gaveta{position:fixed;left:0;top:var(--topo-h);bottom:0;width:min(300px,86vw);z-index:60;max-height:none;
  padding:12px 10px 30px;transform:translateX(-100%);transition:transform .24s ease;
  background:linear-gradient(180deg,#160610,#0B0206);border-right:1px solid var(--borda-neon);box-shadow:22px 0 60px rgba(0,0,0,.6)}
body.gaveta .lateral-gaveta{transform:none}
@media (min-width:901px){ body.tube-watch .tube-ham{display:inline-flex} }

/* -------- chips fixos no topo do feed (só o feed, não a coluna lateral) -------- */
.tubo > section > .chips{position:sticky;top:var(--topo-h);z-index:6;background:var(--fundo);padding-top:12px;margin-top:-4px}
.chips .chip{font-size:13.5px;padding:8px 14px;background:rgba(255,255,255,.07);border:1px solid var(--borda);color:var(--texto);font-weight:700}
.chips .chip:hover{background:rgba(255,255,255,.14)}
.chips .chip.on{background:linear-gradient(180deg,var(--neon2),#C30D33);border-color:rgba(255,255,255,.25);color:#fff}

/* ------------------------------------------------------------- chips */
.chips{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none}

/* ------------------------------------------------------- cartões */
.vgrade{display:grid;gap:22px 18px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.vcard .vcapa,.vlinha .vcapa,.vshort .vcapa{position:relative;display:block;background:#000;border-radius:16px;overflow:hidden;
  border:1px solid var(--borda)}
.vcard .vcapa{aspect-ratio:16/9}
.vcard .vcapa img,.vlinha .vcapa img,.vshort .vcapa img{width:100%;height:100%;object-fit:cover}
.vcard{transition:transform .16s ease}
.vcard .vcapa img{transition:transform .35s ease}
.vcard:hover{transform:translateY(-4px)}
.vcard:hover .vcapa{border-color:var(--borda-neon);box-shadow:0 14px 40px rgba(255,23,68,.28)}
.vcard:hover .vcapa img{transform:scale(1.06)}
.vcard .vcapa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35));opacity:0;transition:opacity .2s;pointer-events:none;z-index:1}
.vcard:hover .vcapa::after{opacity:1}
.vcard .vcapa .tempo,.vcard .vcapa .selo18{z-index:2}
/* toque no celular: mostra o realce sem depender de mouse */
@media (hover:none){ .vcard:active{transform:scale(.98)} }
.semcapa{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:#3b1420;
  background:radial-gradient(circle at 50% 40%,#2A0912,#120409)}
.tempo{position:absolute;right:7px;bottom:7px;background:rgba(0,0,0,.85);color:#fff;font-size:11.5px;font-weight:800;
  padding:2px 7px;border-radius:7px;letter-spacing:.02em}
.selo18{position:absolute;left:7px;top:7px;background:rgba(255,23,68,.9);color:#fff;font-size:10.5px;font-weight:900;
  padding:2px 7px;border-radius:7px}
.vinfo{display:flex;gap:11px;margin-top:11px}
.vava{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,var(--neon2),#6E0B20);
  display:grid;place-items:center;font-weight:900;color:#fff;border:1px solid var(--borda-ouro)}
.vava img{width:100%;height:100%;object-fit:cover}
.vtexto{min-width:0}
.vtitulo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:800;
  font-size:14.5px;line-height:1.35;color:var(--texto)}
.vtitulo:hover{color:#fff}
.vcanal{display:block;margin-top:5px;font-size:12.5px;color:var(--texto3)}
.vcanal:hover{color:var(--ouro)}
.ver{color:var(--azul)}
.vmeta{font-size:12px;color:var(--texto3);margin-top:2px}

/* lista lateral (a seguir) */
.vlista{display:flex;flex-direction:column;gap:12px}
.vlinha{display:grid;grid-template-columns:168px minmax(0,1fr);gap:11px}
.vlinha .vcapa{aspect-ratio:16/9}
.vlinha .vinfo{margin-top:0}
.vlinha .vtitulo{font-size:13.5px}

/* shorts */
.sgrade{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.vshort .vcapa{aspect-ratio:9/16;border-radius:18px}
.vshort .vtitulo{font-size:13.5px}
/* prateleira horizontal de Shorts na home (rola no touch, não estoura) */
.secao-shorts h2 .shorts-ico{display:inline-flex;color:var(--neon)}
.secao-shorts h2 .shorts-ico svg{fill:currentColor;filter:drop-shadow(0 0 8px rgba(255,23,68,.6))}
.sshelf{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;scroll-snap-type:x proximity}
.sshelf::-webkit-scrollbar{display:none}
.sshelf .vshort{flex:none;width:172px;scroll-snap-align:start}
.sshelf .vshort .vtitulo{-webkit-line-clamp:2}
/* rolagem por roda/arrasto/setas nas faixas horizontais (Shorts, chips) */
.faixa-wrap{position:relative}
.sshelf{cursor:grab}
.sshelf.arrastando{cursor:grabbing;user-select:none;scroll-snap-type:none;scroll-behavior:auto}
.sshelf.arrastando a{pointer-events:none}
.faixa-seta{position:absolute;top:150px;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  display:none;align-items:center;justify-content:center;border:1px solid var(--borda);cursor:pointer;z-index:6;color:#fff;
  background:rgba(20,6,12,.94);box-shadow:0 6px 20px rgba(0,0,0,.55)}
.faixa-seta:hover{background:rgba(45,10,22,.98);border-color:var(--borda-neon)}
.faixa-seta svg{fill:currentColor}
.faixa-seta-esq{left:-6px}
.faixa-seta-dir{right:-6px}
@media (hover:hover){
  .faixa-wrap.tem-overflow:hover .faixa-seta{display:flex}
  .faixa-wrap .faixa-seta.escondida{display:none}
}
@media (hover:none){ .faixa-seta{display:none} }
/* capa VERTICAL (short, ou qualquer vídeo vertical num card): fundo desfocado + capa inteira sem cortar */
.vcapa-vert{background:#000}
.vcapa-vert img.vcapa-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(16px) saturate(1.25) brightness(.55);transform:scale(1.25)}
.vcapa-vert img.vcapa-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
/* selo "⚡ SHORT" DOURADO/CROMO (estilo premium BT Store) em todo card vertical */
.selo-short{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(180deg,#FFE887,#FFD23D 46%,#E9A100);color:#2a1800;font-size:10px;font-weight:900;
  letter-spacing:.05em;padding:3px 8px;border-radius:8px;border:1px solid rgba(255,242,190,.95);text-transform:uppercase;
  box-shadow:0 2px 9px rgba(233,161,0,.5),inset 0 1px 0 rgba(255,255,255,.65)}
.selo-short svg{fill:currentColor;filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
/* tag de categoria (cara BT Store: vidro + ouro) */
.selo-cat{position:absolute;left:8px;bottom:8px;z-index:2;max-width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(10,4,7,.72);color:var(--ouro);font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:8px;
  border:1px solid var(--borda-ouro);backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.vcapa-vert .selo18{left:auto;right:8px}

/* ------------------------------------------------------------ vazio */
.vazio{margin:26px 0;padding:44px 26px;text-align:center;border:1px dashed var(--borda-ouro);border-radius:var(--r2);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
.vazio-ico{font-size:40px;filter:drop-shadow(0 6px 18px rgba(255,23,68,.35))}
.vazio h3{margin-top:12px;font-size:17px;font-weight:900}
.vazio p{margin-top:7px;color:var(--texto3);font-size:13.5px}

/* --------------------------------------------------------- assistir */
.assistir{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:26px;align-items:start;padding-top:18px}
.palco{min-width:0}
.vcaixa{position:relative;background:#000;border-radius:20px;overflow:hidden;border:1px solid var(--borda-neon);
  box-shadow:0 22px 60px rgba(0,0,0,.6)}
.vcaixa video{display:block;width:100%;height:auto;max-height:76vh;background:#000}
/* vídeo VERTICAL (Shorts): estreito e alto, centralizado, encaixado pela ALTURA (contain), sem cortar/esticar */
.vcaixa.vertical{width:min(100%,46vh);margin:0 auto;aspect-ratio:9/16;background:#000}
.vcaixa.vertical video{width:100%;height:100%;max-height:none;object-fit:contain;background:#000}
/* tela cheia: preenche a tela; vídeo centralizado com faixas pretas, sem esticar (normal e vertical) */
.vcaixa:fullscreen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border:0;border-radius:0;display:grid;place-items:center;background:#000}
.vcaixa:fullscreen video{width:100%;height:100%;max-height:none;object-fit:contain;background:#000}
.vcaixa:-webkit-full-screen{width:100vw;height:100vh;max-width:none;border:0;border-radius:0;display:grid;place-items:center;background:#000}
.vcaixa:-webkit-full-screen video{width:100%;height:100%;max-height:none;object-fit:contain;background:#000}
.vtit-grande{margin-top:16px;font-size:20px;font-weight:900;line-height:1.3}
.vlinha-meta{margin-top:6px;color:var(--texto3);font-size:13px}
.barra-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.dono{display:flex;align-items:center;gap:11px;margin-right:auto}
.dono .vava{width:44px;height:44px}
.dono b{display:block;font-size:14.5px}
.dono span{font-size:12px;color:var(--texto3)}
.acoes-dir{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.acao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 15px;border-radius:999px;
  border:1px solid var(--borda);background:rgba(255,255,255,.06);font-size:13.5px;font-weight:800;color:var(--texto2);
  cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease,box-shadow .16s ease}
.acao .acao-ico{display:inline-flex;flex:none}
.acao .acao-ico svg{width:21px;height:21px;fill:currentColor;display:block}
.acao .rot{line-height:1}
.acao:hover{background:rgba(255,255,255,.12);border-color:var(--borda-neon);color:#fff;transform:translateY(-1px)}
.acao:active{transform:translateY(0)}
.acao.on{background:linear-gradient(180deg,var(--neon2),#C30D33);border-color:rgba(255,255,255,.22);color:#fff;
  box-shadow:0 6px 20px rgba(213,14,54,.4)}
.acao.ouro.on{background:linear-gradient(180deg,#FFD65A,#E9A100);color:#231400}
.acao.acao-so-ico{width:40px;padding:0;color:var(--texto3)}
.acao.acao-so-ico:hover{color:var(--neon3)}
/* botão inscrever-se: CTA neon; quando inscrito, fica discreto (igual YouTube) */
.acao-inscrever{margin-left:6px;background:linear-gradient(180deg,#FF3B63,#D50E36);border-color:rgba(255,255,255,.22);
  color:#fff;box-shadow:0 6px 18px rgba(213,14,54,.35)}
.acao-inscrever:hover{background:linear-gradient(180deg,#FF5478,#E01640);color:#fff}
.acao-inscrever.on{background:rgba(255,255,255,.08);border-color:var(--borda);color:var(--texto2);box-shadow:none}
.acao-inscrever.on:hover{background:rgba(255,255,255,.13);color:#fff}
/* par curtir/descurtir num pílula segmentada */
.acao-grupo{display:inline-flex;align-items:stretch;border:1px solid var(--borda);border-radius:999px;
  background:rgba(255,255,255,.06);overflow:hidden;-webkit-tap-highlight-color:transparent}
.acao-grupo .acao{border:0;background:transparent;border-radius:0;box-shadow:none;transform:none}
.acao-grupo .acao:first-child{padding-left:17px}
.acao-grupo .acao:last-child{padding-right:17px}
.acao-grupo .acao b{font-weight:900;font-variant-numeric:tabular-nums}
.acao-div{width:1px;align-self:center;height:22px;background:var(--borda);flex:none}
.acao-grupo .acao:hover{background:rgba(255,255,255,.11);color:#fff}
.acao-grupo .acao.on{background:rgba(255,23,68,.15);color:var(--neon3)}
.acao-grupo .acao.on .acao-ico svg{fill:var(--neon2);filter:drop-shadow(0 0 7px rgba(255,23,68,.6))}
.desc{margin-top:16px;padding:15px 17px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid var(--borda);
  font-size:13.5px;line-height:1.6;color:var(--texto2);white-space:pre-wrap;word-break:break-word}
.desc.curta{max-height:96px;overflow:hidden;position:relative}
.desc.curta:after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(180deg,transparent,#140509)}
.desc-mais{margin-top:9px;font-size:13px;font-weight:800;color:var(--ouro);cursor:pointer;background:none;border:0;padding:0}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}

/* ----------------------------------------------------- comentários (YouTube) */
.coment{margin-top:28px}
.coment-topo{display:flex;align-items:center;gap:24px;margin-bottom:20px}
.coment-topo h3{font-size:19px;font-weight:900}
.coment-ordenar{position:relative}
.cordenar-b{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--texto);font-weight:800;
  font-size:14px;cursor:pointer;padding:8px 6px;border-radius:10px}
.cordenar-b:hover{color:#fff}
.cordenar-b svg{fill:currentColor}
.cordenar-menu{position:absolute;left:0;top:calc(100% + 4px);z-index:8;min-width:190px;padding:6px;
  background:rgba(20,6,12,.98);border:1px solid var(--borda-neon);border-radius:12px;box-shadow:var(--sombra)}
.cordenar-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--texto2);
  padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer}
.cordenar-menu button:hover{background:rgba(255,255,255,.08);color:#fff}
.cordenar-menu button.on{color:var(--ouro)}
.cform{display:flex;gap:13px;margin-top:6px;align-items:flex-start}
.cform textarea{flex:1;min-height:24px;border:0;border-bottom:1px solid var(--borda);background:transparent;
  padding:8px 2px;resize:none;outline:none;font-size:14px;color:var(--texto);transition:border-color .18s}
.cform textarea:focus{border-bottom-color:var(--neon);box-shadow:none}
.clista{margin-top:26px;display:flex;flex-direction:column;gap:20px}
.citem{display:flex;gap:14px}
.cbolha{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;
  background:linear-gradient(145deg,var(--neon2),#6E0B20);border:1px solid var(--borda-ouro);font-size:15px}
.crespostas .cbolha{width:32px;height:32px;font-size:13px}
.ccorpo{min-width:0;flex:1}
.cnome{font-size:13px;font-weight:700;color:var(--texto2);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cnome .cusuario{color:var(--texto);font-weight:800}
.cnome small{color:var(--texto3);font-weight:600}
.ctexto{margin-top:4px;font-size:14px;line-height:1.5;color:var(--texto);white-space:pre-wrap;word-break:break-word}
.cbarra{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;color:var(--texto3);flex-wrap:wrap}
.cbarra button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:var(--texto3);cursor:pointer;
  font-weight:800;padding:6px 10px;border-radius:999px;min-height:32px}
.cbarra button:hover{color:#fff;background:rgba(255,255,255,.08)}
.cbarra .clike svg,.cbarra .cresp svg{fill:currentColor}
.cbarra .clike b{font-weight:800;font-size:12px}
.cbarra .clike.on{color:var(--neon2)}
.cbarra .clike.on svg{filter:drop-shadow(0 0 6px rgba(255,23,68,.55))}
.cbarra .cresp{color:var(--texto2)}
/* coração do criador */
.ccoracao-b svg{fill:currentColor}
.ccoracao-b.on{color:var(--neon)}
.ccoracao-b.on svg{filter:drop-shadow(0 0 6px rgba(255,23,68,.6))}
.ccoracao-selo{display:none;position:relative;width:22px;height:22px;margin-left:2px}
.ccoracao-selo.on{display:inline-block}
.ccoracao-selo .cav{display:block;width:22px;height:22px;border-radius:50%;overflow:hidden;
  background:linear-gradient(145deg,var(--neon2),#6E0B20)}
.ccoracao-selo .cav img{width:100%;height:100%;object-fit:cover}
.ccoracao-selo .chart{position:absolute;right:-4px;bottom:-4px;color:var(--neon);background:var(--fundo);border-radius:50%;
  width:14px;height:14px;display:grid;place-items:center}
.ccoracao-selo .chart svg{width:11px;height:11px;fill:currentColor}
/* respostas recolhidas */
.crespostas-t{display:inline-flex;align-items:center;gap:7px;margin-top:8px;background:none;border:0;cursor:pointer;
  color:var(--neon3);font-weight:800;font-size:13.5px;padding:7px 12px;border-radius:999px;min-height:36px}
.crespostas-t:hover{background:rgba(255,23,68,.12)}
.crespostas-t .cseta{fill:currentColor;transition:transform .18s ease}
.crespostas-t.aberto .cseta{transform:rotate(180deg)}
.crespostas{margin-top:12px;display:flex;flex-direction:column;gap:16px}
.cdono{color:#231400;background:linear-gradient(180deg,#FFD65A,#E9A100);font-size:11px;font-weight:900;
  border-radius:999px;padding:2px 8px}
.cnome .cedit{color:var(--texto3);font-weight:600;font-style:italic}
.cnome .cpin{color:var(--neon2);font-size:11px;border:1px solid var(--borda-neon);border-radius:999px;padding:1px 7px}
.citem.fixado>.ccorpo{background:linear-gradient(180deg,rgba(255,23,68,.06),transparent);border-left:2px solid var(--neon);
  padding:6px 0 6px 12px;border-radius:0 12px 12px 0;margin-left:-2px}
/* edição embutida do comentário */
.cedicao{margin-top:8px;flex-direction:column;gap:8px}
.cedicao textarea{width:100%;min-height:52px;border-radius:14px;border:1px solid var(--borda);
  background:rgba(255,255,255,.04);padding:10px 12px;outline:none;color:var(--texto);resize:vertical}
.cedicao textarea:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(255,23,68,.13)}
.cedbtns{display:flex;gap:8px;align-items:center}
.cedbtns .acao{background:rgba(255,255,255,.06);border:1px solid var(--borda);color:var(--texto2);
  border-radius:12px;min-height:36px;padding:8px 14px;font-weight:800;cursor:pointer}
/* coluna "a seguir" */
.aseguir{min-width:0}
.chips-mini{padding:0 0 12px;margin-top:0}
.chips-mini .chip{font-size:12.5px;padding:6px 12px}

/* ---------------------------------------------------------- canal */
/* banners épicos por canal (Fable 5) */
.ccapa.ct-braga{background:
  radial-gradient(120% 160% at 82% 30%,rgba(255,23,68,.55),transparent 55%),
  radial-gradient(90% 120% at 12% 80%,rgba(120,10,30,.6),transparent 60%),
  linear-gradient(120deg,#3a0410,#140205 70%)}
.ccapa.ct-kira{background:
  radial-gradient(70% 120% at 50% 22%,rgba(255,40,40,.5),transparent 55%),
  radial-gradient(140% 160% at 50% 120%,rgba(120,0,10,.55),transparent 60%),
  linear-gradient(180deg,#180204,#050101 80%)}
.ccapa.ct-def{background:radial-gradient(120% 160% at 80% 20%,rgba(255,23,68,.4),transparent 55%),linear-gradient(120deg,#2A0912,#120409)}
.ccapa-nome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(28px,6vw,54px);font-weight:900;letter-spacing:.02em;padding:0 18px;
  background:linear-gradient(180deg,#fff 20%,#FFD9E0 55%,#FF6584 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 3px 16px rgba(255,23,68,.5));text-transform:uppercase}
.ccapa{position:relative;height:190px;border-radius:22px;overflow:hidden;background:linear-gradient(120deg,#2A0912,#120409);
  border:1px solid var(--borda-neon);position:relative}
.ccapa img{width:100%;height:100%;object-fit:cover}
.ctopo{display:flex;gap:18px;align-items:center;margin-top:-42px;padding:0 18px;position:relative}
.cfoto{width:104px;height:104px;border-radius:50%;border:3px solid var(--fundo);background:linear-gradient(145deg,var(--neon2),#6E0B20);
  display:grid;place-items:center;font-size:36px;font-weight:900;color:#fff;overflow:hidden;flex:none}
.cfoto img{width:100%;height:100%;object-fit:cover}
.cnome-g{font-size:22px;font-weight:900}
.cmeta{color:var(--texto3);font-size:13px;margin-top:3px}
.abas{display:flex;gap:6px;margin:22px 0 4px;border-bottom:1px solid var(--borda);overflow-x:auto}
.abas a{padding:11px 16px;font-weight:800;font-size:13.5px;color:var(--texto3);border-bottom:2px solid transparent;white-space:nowrap}
.abas a.on{color:#fff;border-bottom-color:var(--neon)}

/* --------------------------------------------------------- player */
.pl{position:relative;background:#000}
.pl video{outline:none}
.pl-ctrl{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));opacity:0;transition:opacity .18s ease}
.pl:hover .pl-ctrl,.pl.parado .pl-ctrl,.pl.ctrl-fixo .pl-ctrl{opacity:1}
.pl-barra{position:relative;height:16px;display:flex;align-items:center;cursor:pointer}
.pl-trilho{position:relative;height:4px;width:100%;border-radius:4px;background:rgba(255,255,255,.26);overflow:hidden}
.pl-buffer{position:absolute;inset:0;width:0;background:rgba(255,255,255,.24)}
.pl-progresso{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--neon),var(--ouro))}
.pl-bolinha{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px rgba(255,23,68,.8);opacity:0;transition:opacity .15s}
.pl-barra:hover .pl-bolinha{opacity:1}
.pl-tempo-voa{position:absolute;bottom:22px;transform:translateX(-50%);background:rgba(0,0,0,.9);border:1px solid var(--borda);
  border-radius:8px;padding:3px 8px;font-size:11.5px;font-weight:800;pointer-events:none;opacity:0;white-space:nowrap}
.pl-barra:hover .pl-tempo-voa{opacity:1}
.pl-linha{display:flex;align-items:center;gap:10px;margin-top:4px;color:#fff}
.pl-b{background:none;border:0;color:#fff;font-size:17px;cursor:pointer;padding:5px;line-height:1;border-radius:9px}
.pl-b:hover{background:rgba(255,255,255,.14)}
.pl-tempo{font-size:12px;font-variant-numeric:tabular-nums;color:#E9DCE1}
.pl-espaco{flex:1}
.pl-vol{display:flex;align-items:center;gap:6px}
.pl-vol input{width:0;opacity:0;transition:width .18s ease,opacity .18s ease;accent-color:var(--neon)}
.pl-vol:hover input,.pl-vol input:focus{width:74px;opacity:1}
.pl-menu{position:relative}
.pl-lista{position:absolute;right:0;bottom:40px;background:rgba(14,4,8,.97);border:1px solid var(--borda-neon);
  border-radius:14px;padding:6px;min-width:142px;display:none;box-shadow:var(--sombra)}
.pl-lista.aberto{display:block}
.pl-lista button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--texto2);padding:8px 11px;
  border-radius:9px;font-size:13px;cursor:pointer;font-weight:700}
.pl-lista button:hover{background:rgba(255,255,255,.08);color:#fff}
.pl-lista button.on{color:var(--ouro)}
.pl-grande{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pl-grande span{width:74px;height:74px;border-radius:50%;background:rgba(255,23,68,.9);display:grid;place-items:center;
  font-size:28px;color:#fff;box-shadow:0 12px 40px rgba(255,23,68,.5);opacity:0;transform:scale(.7);transition:all .2s}
.pl.parado .pl-grande span{opacity:1;transform:scale(1)}
.pl-aviso{position:absolute;left:50%;top:14%;transform:translateX(-50%);background:rgba(0,0,0,.85);border:1px solid var(--borda);
  color:#fff;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:800;opacity:0;transition:opacity .25s;pointer-events:none}
.pl-aviso.ver{opacity:1}

/* ---------------------------------------------------------- celular */
@media (max-width:1100px){
  .assistir{grid-template-columns:minmax(0,1fr);gap:22px}
  .vlinha{grid-template-columns:170px minmax(0,1fr)}
}
@media (max-width:900px){
  .tube-ham{display:inline-flex}
  .tubo{grid-template-columns:minmax(0,1fr);gap:0;padding-top:10px}
  /* a barra lateral vira GAVETA (off-canvas) no celular */
  .lateral{position:fixed;left:0;top:var(--topo-h);bottom:0;width:min(300px,86vw);z-index:60;max-height:none;
    gap:8px;padding:12px 10px 30px;transform:translateX(-100%);transition:transform .24s ease;overflow-y:auto;
    background:linear-gradient(180deg,#160610,#0B0206);border-right:1px solid var(--borda-neon);box-shadow:22px 0 60px rgba(0,0,0,.6)}
  body.gaveta .lateral{transform:none}
  .tubo > section > .chips{top:var(--topo-h)}
  .vgrade{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 14px}
  .vtit-grande{font-size:17px}
  .dono{width:100%;margin-bottom:2px}
  /* ações rolam na horizontal, sem estourar pro lado */
  .acoes-dir{width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .acoes-dir::-webkit-scrollbar{display:none}
  .acoes-dir > *{flex:none}
  .coment-topo{gap:16px}
}
@media (max-width:560px){
  .vgrade{grid-template-columns:1fr;gap:16px}
  .vtitulo{font-size:14px}
  .vlinha{grid-template-columns:160px minmax(0,1fr)}
  .sgrade{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .ccapa{height:110px}
  .cfoto{width:76px;height:76px;font-size:26px}
}