/* Painel da signage: tema escuro moderno. Sem bibliotecas externas. */
:root {
  --bg: #0a0e16; --bg2: #0e1420; --painel: #131a29; --painel2: #19223a; --elev: #1e2942; --linha: #25304a; --linha2: #314062;
  --texto: #e9eefb; --suave: #97a4bf; --fraco: #6b7a99;
  --acento: #5b8def; --acento2: #7aa5ff; --acento-bg: rgba(91, 141, 239, .14);
  --ok: #34d399; --ok-bg: rgba(52, 211, 153, .14); --aviso: #f5b942; --aviso-bg: rgba(245, 185, 66, .14); --perigo: #ff6b7a; --perigo-bg: rgba(255, 107, 122, .14);
  --raio: 12px; --raio-p: 8px; --sombra: 0 8px 30px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: radial-gradient(1200px 600px at 80% -10%, #14203d 0%, transparent 60%), var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
a { color: var(--acento2); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento2); outline-offset: 2px; }
.suave { color: var(--suave); } .fraco { color: var(--fraco); } .peq { font-size: 12px; } .mono { font-family: ui-monospace, Consolas, monospace; }
.oculto { display: none !important; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.espaco { flex: 1; }
.col { display: flex; flex-direction: column; gap: 10px; }

/* estrutura */
#app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
#lateral { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, #0f1626, #0b111d); border-right: 1px solid var(--linha); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.marca .logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #5b8def, #7c5cff); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(91, 141, 239, .35); }
.marca b { font-size: 15px; letter-spacing: .2px; } .marca small { display: block; color: var(--fraco); font-size: 11px; margin-top: -2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--suave); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; }
.nav a:hover { background: var(--painel); color: var(--texto); }
.nav a.ativo { background: var(--acento-bg); color: #cfe0ff; box-shadow: inset 2px 0 0 var(--acento); }
.nav .grupo { margin: 14px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fraco); }
.nav a .n { margin-left: auto; font-size: 11px; background: var(--elev); color: var(--suave); border-radius: 999px; padding: 1px 8px; }
#principal { min-width: 0; }
#topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: rgba(10, 14, 22, .8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
#topo h1 { font-size: 18px; }
#hamb { display: none; }
#conteudo { padding: 24px 28px 60px; max-width: 1280px; }
.usuario { position: relative; }
.usuario > button { display: flex; align-items: center; gap: 9px; background: var(--painel); border: 1px solid var(--linha); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #5b8def, #7c5cff); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; text-transform: uppercase; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--painel2); border: 1px solid var(--linha2); border-radius: 12px; box-shadow: var(--sombra); padding: 6px; z-index: 40; }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; background: none; border: 0; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.menu button:hover { background: var(--elev); }
.menu hr { border: 0; border-top: 1px solid var(--linha); margin: 6px 0; }

/* componentes */
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.cartao.destaque { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento-bg), 0 10px 30px rgba(91, 141, 239, .08); }
.cartao h2 { margin-bottom: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border-radius: var(--raio-p); border: 1px solid var(--linha2); background: var(--painel2); cursor: pointer; font-weight: 550; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--elev); border-color: var(--fraco); }
.btn:active { transform: translateY(1px); }
.btn.forte { background: var(--acento); border-color: var(--acento); color: #fff; } .btn.forte:hover { background: #6e9cf3; }
.btn.ok { background: var(--ok-bg); border-color: rgba(52, 211, 153, .4); color: #a7f0d3; }
.btn.perigo { background: var(--perigo-bg); border-color: rgba(255, 107, 122, .4); color: #ffb3bb; } .btn.perigo:hover { background: rgba(255, 107, 122, .24); }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--suave); } .btn.fantasma:hover { background: var(--painel2); color: var(--texto); }
.btn.peq { padding: 4px 9px; font-size: 12px; } .btn.icone { padding: 7px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
input[type=text], input[type=password], input[type=number], input[type=time], input[type=url], select, textarea { width: 100%; background: var(--bg2); border: 1px solid var(--linha2); border-radius: var(--raio-p); padding: 8px 11px; }
input::placeholder { color: var(--fraco); }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px var(--acento-bg); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2397a4bf' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
label.campo { display: flex; flex-direction: column; gap: 5px; font-weight: 550; font-size: 13px; color: var(--suave); }
label.campo > span.dica { font-weight: 400; color: var(--fraco); font-size: 12px; }
.emblema { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--elev); color: var(--suave); border: 1px solid var(--linha2); }
.emblema.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(52, 211, 153, .3); }
.emblema.aviso { background: var(--aviso-bg); color: var(--aviso); border-color: rgba(245, 185, 66, .3); }
.emblema.perigo { background: var(--perigo-bg); color: var(--perigo); border-color: rgba(255, 107, 122, .3); }
.emblema.azul { background: var(--acento-bg); color: var(--acento2); border-color: rgba(91, 141, 239, .3); }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--fraco); flex: none; }
.ponto.online { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); } .ponto.espera { background: var(--aviso); box-shadow: 0 0 0 4px var(--aviso-bg); } .ponto.sem-resposta { background: var(--perigo); box-shadow: 0 0 0 4px var(--perigo-bg); }
.chave { display: inline-flex; position: relative; width: 38px; height: 22px; flex: none; }
.chave input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.chave i { position: absolute; inset: 0; border-radius: 999px; background: var(--linha2); transition: background .15s; }
.chave i::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .15s; }
.chave input:checked + i { background: var(--acento); } .chave input:checked + i::after { transform: translateX(16px); }
.chip-dia { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linha2); cursor: pointer; font-weight: 600; font-size: 12px; user-select: none; color: var(--suave); }
.chip-dia.on { background: var(--acento); border-color: var(--acento); color: #fff; } .chip-dia.ro { cursor: default; width: 24px; height: 24px; font-size: 11px; } .chip-dia.ro:not(.on) { opacity: .45; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--linha); }
td { padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .02); }
.vazio { text-align: center; padding: 38px 16px; color: var(--suave); border: 1px dashed var(--linha2); border-radius: var(--raio); }
.vazio .ic { opacity: .5; margin-bottom: 8px; }

/* cabecalho de pagina */
.pag-cab { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.pag-cab p { margin: 2px 0 0; color: var(--suave); }
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.res { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: flex; align-items: center; gap: 13px; }
.res .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--acento-bg); color: var(--acento2); flex: none; }
.res .ic.ok { background: var(--ok-bg); color: var(--ok); } .res .ic.av { background: var(--aviso-bg); color: var(--aviso); } .res .ic.pe { background: var(--perigo-bg); color: var(--perigo); }
.res b { font-size: 20px; display: block; line-height: 1.1; } .res span { color: var(--suave); font-size: 12.5px; }
.faixa { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--raio); margin-bottom: 16px; background: var(--acento-bg); border: 1px solid rgba(91, 141, 239, .35); flex-wrap: wrap; }
.faixa.ao-vivo { background: var(--perigo-bg); border-color: rgba(255, 107, 122, .4); }
.pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--perigo); animation: pulso 1.4s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 122, .6); } 70% { box-shadow: 0 0 0 9px rgba(255, 107, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 122, 0); } }

/* cartoes de tela */
.telas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tela { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.tela:hover { border-color: var(--linha2); }
.tela.nova { border-color: rgba(245, 185, 66, .55); box-shadow: 0 0 0 1px var(--aviso-bg); }
.tela .cab { display: flex; align-items: center; gap: 9px; padding: 12px 14px 8px; }
.tela .cab b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tela .previa { margin: 0 14px; aspect-ratio: 16/9; border-radius: 9px; background: #05080e; border: 1px solid var(--linha); overflow: hidden; position: relative; display: grid; place-items: center; color: var(--fraco); }
.tela .previa img, .tela .previa video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tela .previa .estado { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; text-align: center; padding: 8px; }
.tela .previa .etiqueta { position: absolute; left: 8px; bottom: 8px; background: rgba(5, 8, 14, .78); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; color: #dfe7f7; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tela .info { padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.tela .acoes { display: flex; gap: 6px; padding: 10px 14px 14px; flex-wrap: wrap; }
.tela .acoes .btn { flex: 1 1 auto; }
.dado { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--suave); }
.dado b { color: var(--texto); font-weight: 550; }

/* playlists */
.dois { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.lista-pl { display: flex; flex-direction: column; gap: 8px; }
.item-pl { text-align: left; background: var(--painel); border: 1px solid var(--linha); border-radius: 11px; padding: 11px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.item-pl:hover { border-color: var(--linha2); } .item-pl.ativo { border-color: var(--acento); background: var(--acento-bg); }
.itens { display: flex; flex-direction: column; gap: 8px; }
.it { display: grid; grid-template-columns: 22px 112px 1fr auto auto; gap: 12px; align-items: center; background: var(--bg2); border: 1px solid var(--linha); border-radius: 11px; padding: 8px 10px; }
.it.arrastando { opacity: .4; } .it.alvo { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-bg); }
.it .alca { cursor: grab; color: var(--fraco); display: grid; place-items: center; }
.miniatura { width: 112px; aspect-ratio: 16/9; border-radius: 7px; overflow: hidden; background: #05080e; border: 1px solid var(--linha); display: grid; place-items: center; color: var(--fraco); position: relative; flex: none; }
.miniatura img, .miniatura video { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura .tipo { position: absolute; right: 4px; top: 4px; background: rgba(5, 8, 14, .75); border-radius: 5px; padding: 1px 5px; font-size: 10.5px; }
.it .nome { overflow: hidden; } .it .nome b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it .dur { display: flex; align-items: center; gap: 6px; } .it .dur input { width: 64px; text-align: center; padding: 5px 6px; }
.salvo { font-size: 12px; color: var(--ok); opacity: 0; transition: opacity .3s; } .salvo.mostra { opacity: 1; }

/* midia */
.soltar { display: block; border: 2px dashed var(--linha2); border-radius: var(--raio); padding: 26px; text-align: center; color: var(--suave); transition: border-color .15s, background .15s; cursor: pointer; }
.soltar:hover, .soltar.sobre { border-color: var(--acento); background: var(--acento-bg); color: var(--texto); }
.grade-midia { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.m { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; }
.m .miniatura { width: 100%; border-radius: 0; border: 0; border-bottom: 1px solid var(--linha); }
.m .corpo { padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 5px; }
.m .corpo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m .rod { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 12px; }
.m .rod .btn { flex: 1 1 auto; min-width: 0; }
.m .rod .btn.icone { flex: 0 0 auto; }
.m .corpo .linha { row-gap: 5px; }
.m .corpo b { max-width: 100%; }
.selecionavel { cursor: pointer; transition: border-color .15s, transform .1s; } .selecionavel:hover { border-color: var(--acento); transform: translateY(-1px); }
.progresso { height: 6px; background: var(--linha); border-radius: 999px; overflow: hidden; } .progresso i { display: block; height: 100%; background: var(--acento); width: 0; transition: width .2s; }

/* modais e avisos */
#modais { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.veu { position: fixed; inset: 0; background: rgba(4, 7, 12, .7); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; pointer-events: auto; animation: surge .15s; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--painel2); border: 1px solid var(--linha2); border-radius: 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.modal.largo { width: min(880px, 100%); }
.modal header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--linha); }
.modal .corpo { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.modal footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--linha); background: rgba(0, 0, 0, .12); }
@keyframes surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 9px; z-index: 80; }
.toast { background: var(--painel2); border: 1px solid var(--linha2); border-left: 3px solid var(--acento); border-radius: 10px; padding: 10px 14px; box-shadow: var(--sombra); max-width: min(380px, 80vw); animation: surge .2s; display: flex; gap: 9px; align-items: flex-start; }
.toast.ok { border-left-color: var(--ok); } .toast.erro { border-left-color: var(--perigo); }
.previa-box { aspect-ratio: 16/9; width: 100%; border: 1px solid var(--linha2); border-radius: 10px; overflow: hidden; background: #000; } .previa-box iframe { width: 100%; height: 100%; border: 0; }
.selecao { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; padding: 4px; border: 1px solid var(--linha); border-radius: 10px; background: var(--bg2); }
.selecao label { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; cursor: pointer; } .selecao label:hover { background: var(--painel); }
.selecao input { width: auto; }
pre.codigo { background: var(--bg); border: 1px solid var(--linha); border-radius: 10px; padding: 12px; overflow: auto; font: 12px/1.55 ui-monospace, Consolas, monospace; color: #c7d3ee; margin: 0; }

/* login */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.entrada .caixa { width: min(420px, 100%); background: var(--painel); border: 1px solid var(--linha2); border-radius: 18px; padding: 28px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 16px; }
.entrada .marca { padding: 0; }
.erro-form { color: #ffb3bb; background: var(--perigo-bg); border: 1px solid rgba(255, 107, 122, .35); border-radius: 8px; padding: 8px 11px; font-size: 13px; }

@media (max-width: 960px) {
  #app { grid-template-columns: 1fr; }
  #lateral { position: fixed; z-index: 50; left: 0; top: 0; width: 250px; transform: translateX(-102%); transition: transform .2s; box-shadow: var(--sombra); }
  body.menu-aberto #lateral { transform: none; }
  body.menu-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 45; }
  #hamb { display: inline-flex; }
  #topo, #conteudo { padding-left: 16px; padding-right: 16px; }
  .dois { grid-template-columns: 1fr; }
  .it { grid-template-columns: 22px 84px 1fr; } .it .dur, .it .botoes { grid-column: 2 / -1; }
  .miniatura { width: 84px; }
  .telas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 640px) {
  .resumo { grid-template-columns: 1fr 1fr; gap: 10px; }
  .res { padding: 10px 11px; gap: 9px; } .res .ic { width: 34px; height: 34px; } .res b { font-size: 17px; } .res span { font-size: 11.5px; }
  .pag-cab .linha { width: 100%; } .pag-cab .linha .btn { flex: 1 1 auto; }
}
/* monitores grandes (Full HD em diante): aproveita a largura e usa letra um pouco maior */
@media (min-width: 1600px) {
  body { font-size: 15px; }
  #app { grid-template-columns: 252px 1fr; }
  #conteudo { max-width: 1760px; padding: 28px 40px 70px; }
  #topo { padding: 16px 40px; }
  .telas { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
  .grade-midia { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
  .dois { grid-template-columns: 340px 1fr; }
  .modal.largo { width: min(1040px, 100%); }
}
/* armazenamento, conversao e permanente */
.armaz .barra-armaz { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--linha); }
.armaz.compacta .barra-armaz { height: 7px; }
.armaz i { display: block; height: 100%; } .armaz .b-bib { background: var(--acento); } .armaz .b-lix { background: var(--aviso); } .armaz .b-out { background: #5d6b8a; }
.armaz.critico .barra-armaz { box-shadow: 0 0 0 1px var(--perigo); }
.legenda-armaz { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--suave); }
.legenda-armaz span { display: inline-flex; align-items: center; gap: 7px; } .legenda-armaz b { color: var(--texto); font-weight: 600; }
.legenda-armaz i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .legenda-armaz .b-bib { background: var(--acento); } .legenda-armaz .b-lix { background: var(--aviso); } .legenda-armaz .b-out { background: #5d6b8a; } .legenda-armaz .b-liv { background: var(--linha2); }
.conv { background: var(--acento-bg); border: 1px solid rgba(91, 141, 239, .35); border-radius: 9px; padding: 8px 10px; } .conv.erro { background: var(--perigo-bg); border-color: rgba(255, 107, 122, .4); color: #ffb3bb; }
.perm { margin-top: 2px; cursor: pointer; }
/* o nome do desenvolvedor nunca quebra em duas linhas */
.nq { white-space: nowrap; }
#versao { font-size: 11.5px; letter-spacing: 0; }
#versao b { color: var(--texto); font-weight: 700; }