/* 4sTV — visual pensado pra TV: fonte grande, alvo grande, foco bem visível
   (na TV a navegação é com as setas do controle, então o :focus tem que gritar). */
:root {
  --fundo: #0b1020;
  --carta: #151b31;
  --linha: #243050;
  --texto: #e8ecf8;
  --fraco: #8e9ab8;
  --roxo: #7c3aed;
  --azul: #2563eb;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 20% -10%, #1b2448 0%, var(--fundo) 55%);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

.topo {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 16, 32, 0.92); backdrop-filter: blur(8px);
}
.topo img { width: 44px; height: 44px; border-radius: 12px; }
.marca { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.marca span { background: linear-gradient(90deg, #a78bfa, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.espaco { flex: 1; }
.quem { color: var(--fraco); font-size: 14px; }

.abas { display: flex; gap: 8px; padding: 14px 20px 4px; flex-wrap: wrap; }
.aba {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linha);
  background: #121a30; color: var(--texto); font-size: 15px; font-weight: 600; cursor: pointer;
}
.aba[aria-selected="true"] { background: linear-gradient(90deg, var(--roxo), var(--azul)); border-color: transparent; }

.grade {
  display: grid; gap: 16px; padding: 16px 20px 40px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.grade.canais { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.secao-titulo { padding: 18px 20px 0; font-size: 15px; text-transform: uppercase; letter-spacing: .12em; color: var(--fraco); }

.cartao {
  background: var(--carta); border: 1px solid var(--linha); border-radius: 16px;
  overflow: hidden; cursor: pointer; text-align: left; padding: 0; color: inherit;
  display: flex; flex-direction: column;
}
.cartao:focus, .aba:focus, .botao:focus {
  outline: 3px solid #22d3ee; outline-offset: 3px;
}
.cartao .capa { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: #0e1526; }
.cartao .faixa { height: 6px; }
.cartao .txt { padding: 12px 14px; }
.cartao .tit { font-weight: 700; font-size: 15px; line-height: 1.25; }
.bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
           background: #475569; margin-right: 7px; vertical-align: middle; }
.bolinha.on { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.7); }
.bolinha.off { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.6); }
.cartao .sub { color: var(--fraco); font-size: 13px; margin-top: 4px; }

.botao {
  padding: 12px 20px; border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--roxo), var(--azul)); color: #fff; font-weight: 700; font-size: 15px;
}
.botao.fraco { background: #1b2340; border: 1px solid var(--linha); }

/* player */
.player { position: fixed; inset: 0; background: #000; z-index: 50; display: none; }
.player.on { display: block; }
.player video { width: 100%; height: 100%; background: #000; }
.player .barra {
  position: absolute; top: 0; left: 0; right: 0; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.75), transparent);
}
.player .barra .nome { font-weight: 700; }

/* login */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.caixa { width: 100%; max-width: 380px; background: var(--carta); border: 1px solid var(--linha); border-radius: 20px; padding: 26px; }
.caixa img { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 14px; }
.campo { width: 100%; padding: 14px; margin-top: 10px; border-radius: 12px; border: 1px solid var(--linha); background: #0e1526; color: var(--texto); font-size: 16px; }
.erro { color: #fca5a5; font-size: 14px; margin-top: 10px; min-height: 20px; }

/* acessos (admin) */
table.usuarios { width: 100%; border-collapse: collapse; }
table.usuarios th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--fraco); padding: 10px 12px; }
table.usuarios td { padding: 12px; border-top: 1px solid var(--linha); font-size: 15px; }
.vazio { color: var(--fraco); padding: 24px 20px; }

/* painel de acessos */
.painel { background: var(--carta); border: 1px solid var(--linha); border-radius: 16px;
          padding: 18px; margin-bottom: 18px; }
.painel .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.painel .cab .tt { font-weight: 700; font-size: 17px; }
.painel .cab .espaco { flex: 1; }
.painel .cab .botao { padding: 8px 14px; font-size: 14px; }
.selo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
        padding: 3px 8px; border-radius: 999px; background: #1e2a4d; color: #93c5fd;
        vertical-align: middle; margin-left: 6px; }
.selo.aviso { background: #3b2f10; color: #fbbf24; }
.selo.ruim { background: #3b1116; color: #fca5a5; }
.olho { background: none; border: 0; cursor: pointer; font-size: 15px;
        margin-left: 8px; padding: 0; }
.acoes { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acoes .botao { padding: 7px 12px; font-size: 13px; }
.botao.perigo { background: #3b1116; border-color: #7f1d1d; color: #fca5a5; }
tr.bloqueado td { opacity: .55; }