*{box-sizing:border-box}
body{margin:0;background:#08070a;color:#fff}
/* overflow:hidden é só pro player em tela cheia (cctv_watch.php/
   cctv_embed.php, uma câmera = 100svh, nunca precisa rolar) — mas as TRÊS
   páginas carregam este cctv.css, inclusive a LISTA (cctv_list.php, body
   class="catalog-page"), que empilha um tile por câmera e PRECISA rolar
   assim que existe mais de uma. Com 1 câmera só cabia na tela e o bug
   não aparecia; com a 2ª câmera, o corpo não rolava nem no toque nem na
   roda do mouse (confirmado via scroll real — scrollY ficava travado em
   0) porque esse overflow:hidden do body se propaga pro viewport inteiro
   quando o <html> não declara overflow próprio. Escopado só pras páginas
   de player (sem a classe .catalog-page) em vez de recair no body geral. */
body:not(.catalog-page){overflow:hidden}
.cctv-stage{position:relative;width:min(100vw,calc(100svh * 9 / 16));height:100svh;margin:auto;background:#0d0b10;overflow:hidden}
.cctv-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* Base do header compartilhada por cctv_watch.php (header dentro de
   .cctv-topbar, ver abaixo) e cctv_embed.php (header filho direto de
   .cctv-stage) — por isso o seletor é por DESCENDÊNCIA (espaço), não
   filho direto (">"), senão só um dos dois casos seria pego.
   flex-wrap:nowrap sobrescrevendo de propósito: style.css tem uma regra
   global pra <header> (admin/páginas comuns) com flex-wrap:wrap +
   border-bottom — como as páginas de CCTV também carregam style.css, ela
   vazava pra cá. Com wrap, a soma dos ícones (voltar+selo+link+share+som)
   passava por pouco da largura da tela em mobile estreito e o último
   item caía pra uma 2ª linha sozinho — a linha rosa vista pelo dono é
   literalmente o border-bottom dessa regra global, inofensiva, mas o
   wrap não era. */
.cctv-stage header{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;padding:12px;background:linear-gradient(#000c,transparent)}
.cctv-stage header strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cctv-stage header button,.cctv-stage header .btn{padding:7px 10px;font-size:12px}
/* cctv_embed.php: header é filho direto de .cctv-stage, continua com a
   faixa fixa no topo de sempre. */
.cctv-embed-stage>header{position:absolute;top:0;left:0;right:0;z-index:3}
/* cctv_watch.php: o rótulo saiu de dentro do <header> (ficava espremido
   entre os ícones — pedido do dono depois de ver o resultado real) e virou
   uma legenda própria logo abaixo da barra de ícones, ainda sobre a
   imagem. .cctv-topbar agrupa os dois (header + legenda) num único bloco
   posicionado no topo, pra legenda nascer colada embaixo da barra sem
   precisar adivinhar a altura dela em pixel. */
.cctv-topbar{position:absolute;top:0;left:0;right:0;z-index:3}
.cctv-topbar>header{background:linear-gradient(#000c,transparent)}
.cctv-topbar-spacer{flex:1}
#cctv-cam-label{display:block;padding:0 14px 14px;margin-top:-1px;font-weight:700;font-size:15px;text-shadow:0 1px 3px #000,0 2px 12px #000c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:linear-gradient(to bottom,#0006,transparent)}
.cctv-badge{flex:none;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;white-space:nowrap}
.cctv-badge.is-live{background:#1dc8ffd9;color:#052733}
.cctv-badge.is-recorded{background:#09070ad9;color:#ccc}
#cctv-description{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;background:linear-gradient(transparent,#000c);font-size:13px;color:#eee}
@media(min-width:800px){.cctv-stage{border-radius:18px;box-shadow:0 0 50px #000}}

/* ===== cctv_embed.php — vive dentro do <iframe> de outro site; o próprio
   iframe já é a "moldura" (o host define largura/altura/cantos dele), então
   nada de sombra/raio extra aqui por cima. Um link discreto no canto leva
   de volta pro site de verdade (target=_top sai do iframe). "height:100%"
   NÃO funciona aqui porque html/body não têm altura própria declarada (vira
   0 e a stage/video colapsam) — "100svh" já resolve sozinho porque dentro
   de um iframe essa unidade é o viewport DO PRÓPRIO iframe, exatamente a
   altura que o host deu a ele. */
.cctv-embed-stage{width:100%;height:100svh;margin:0;border-radius:0!important;box-shadow:none!important}
.cctv-embed-watermark{position:absolute;z-index:3;right:10px;bottom:10px;padding:4px 9px;border-radius:999px;background:#000a;color:#fff;font-size:10px;text-decoration:none;opacity:.75}
.cctv-embed-watermark:hover{opacity:1}

/* ===== cctv_list.php — reaproveita .live-cover/.game-tile do catalog.css. A
   câmera está sempre disponível pra assistir; o selo só indica se o que
   está tocando é apresentado como "acontecendo agora" (LIVE) ou gravação
   de outro horário (RECORDED) — nenhum dos dois esconde a câmera. ===== */
.cctv-cover .live-status.is-live{background:#1dc8ffd9;color:#052733}
.cctv-cover .live-status.is-offline{background:#09070ad9;color:#ccc}
.cctv-page-title{color:#1dc8ff}
/* Mais compacto: sem padding ao redor da imagem (pedido do dono), botão
   Watch no canto OPOSTO ao selo LIVE (topo direito, LIVE fica no topo
   esquerdo), título/legenda viram overlay com degradê sobre a própria
   imagem em vez de bloco sólido abaixo dela. */
.cctv-tile{padding:0}
.cctv-watch-btn{left:auto;right:10px;bottom:auto;top:10px;transform:none;font-size:11px;padding:6px 10px}
/* .live-cover:hover .live-enter (catalog.css) reaplica translateX(-50%) no
   hover — certo pra quando o botão fica centralizado embaixo, mas esse
   aqui não usa mais left:50%, então o translateX jogava ele pro lado ao
   passar o mouse. Sobrescreve só o transform do hover, mantendo o scale. */
.cctv-cover:hover .cctv-watch-btn{transform:scale(1.04)}
.cctv-caption{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:26px 10px 10px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 60%,transparent 100%);text-align:left;color:#fff}
.cctv-caption strong{display:block;font-size:13px;line-height:1.25}
.cctv-caption small{display:block;font-size:11px;color:#ddd;margin-top:2px}