/* Gerenciador Global Entretenimento — preto + dourado, no formato do outro painel */
:root{
  --fundo:#08080a; --lateral:#101013; --cartao:#141418; --cartao2:#1b1b21; --borda:#2a2a31;
  --ouro:#f0c330; --ouro2:#ffd758; --ouro-esc:#7a610f;
  --txt:#f2f2f4; --muted:#9a9aa5; --verde:#3ec46d; --vermelho:#e0564f; --cinza:#6d6d78;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--fundo);color:var(--txt);min-height:100vh;
  background-image:radial-gradient(900px 500px at 70% -10%,rgba(240,195,48,.07),transparent 60%)}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:14px}
.centro{text-align:center;margin-bottom:6px}
.erro{min-height:20px;color:#ff8e86;font-size:14px;margin-top:10px}
.ok{min-height:20px;color:var(--verde);font-size:14px;margin-top:10px}
.mono{font-family:Consolas,'Courier New',monospace;letter-spacing:.3px}

/* botões */
.btn{border:none;border-radius:9px;padding:11px 20px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}
.btn-ouro{background:linear-gradient(180deg,var(--ouro2),#ecb11f);color:#2a2000;box-shadow:0 6px 18px rgba(240,195,48,.22)}
.btn-ouro:hover{filter:brightness(1.07)}
.btn-sec{background:#202027;color:var(--txt);border:1px solid var(--borda)}
.btn-sec:hover{border-color:var(--ouro)}
.btn-alerta{background:rgba(224,86,79,.15);color:#ff8e86;border:1px solid rgba(224,86,79,.5)}
.btn-mini{padding:7px 12px;font-size:13px;border-radius:8px}
.ico{width:40px;height:36px;border-radius:8px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ico svg{width:18px;height:18px}
.ico-editar{background:rgba(240,195,48,.14);color:var(--ouro);border:1px solid var(--ouro-esc)}
.ico-excluir{background:rgba(224,86,79,.15);color:#ff7d74;border:1px solid rgba(224,86,79,.45)}
.ico:hover{filter:brightness(1.3)}
.link{background:none;border:none;color:var(--ouro);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px}

/* formulários */
label{display:block;font-size:14px;font-weight:600;color:var(--txt);margin:14px 0 6px}
label.check{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--muted)}
label.check input{width:18px;height:18px;accent-color:var(--ouro)}
input,select{width:100%;background:#0d0d10;border:1px solid var(--borda);border-radius:9px;padding:12px 14px;
  color:var(--txt);font-size:15px;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(240,195,48,.12)}
.form-acoes{display:flex;justify-content:center;gap:12px;margin-top:22px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:420px;background:var(--cartao);border:1px solid rgba(240,195,48,.35);border-radius:18px;
  padding:30px 30px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.login-logo{width:190px;max-width:70%;margin:0 auto 6px;display:block}
.login-card h1{font-size:22px;margin-bottom:4px}
.login-card form{text-align:left;margin-top:8px}
.login-card .btn{width:100%;margin-top:16px}

/* estrutura */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex:0 0 auto;background:var(--lateral);border-right:1px solid var(--borda);display:flex;flex-direction:column;padding:18px 12px}
.side-logo{width:150px;margin:0 auto 18px;display:block}
.sidebar nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav-item{display:block;padding:12px 14px;border-radius:9px;color:var(--muted);cursor:pointer;font-size:15px;transition:.15s}
.nav-item:hover{background:#18181d;color:var(--txt)}
.nav-item.ativo{background:linear-gradient(90deg,rgba(240,195,48,.16),transparent);color:var(--ouro);font-weight:600;box-shadow:inset 3px 0 0 var(--ouro)}
.sidebar-rodape{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--borda)}
.conteudo{flex:1;padding:28px 30px;overflow:auto;min-width:0}

/* bloco no formato do outro painel: faixa de título + corpo */
.bloco{max-width:1180px;margin:0 auto;background:var(--cartao);border:1px solid var(--borda);border-radius:12px;overflow:hidden}
.form-bloco{max-width:640px}
.bloco-titulo{background:#1d1d23;border-bottom:1px solid var(--borda);text-align:center;font-size:30px;font-weight:500;padding:16px 20px;letter-spacing:.3px}
.bloco-corpo{padding:20px}
.barra-acoes{display:flex;justify-content:center;margin:4px 0 16px}
.filtros{display:flex;gap:10px;margin-bottom:12px}
.filtros .busca{flex:1}
.filtros select{width:150px;flex:0 0 auto}

.acoes-backup{gap:10px;flex-wrap:wrap}
.btn-arquivo{display:inline-flex;align-items:center;margin:0;font-weight:700;font-size:15px;color:var(--txt)}

/* tabela */
.tabela-wrap{overflow-x:auto;border-radius:9px;border:1px solid var(--borda)}
.tabela{width:100%;border-collapse:collapse;min-width:760px}
.tabela th{text-align:left;padding:12px 14px;font-size:14px;font-weight:700;background:#17171c;border-bottom:1px solid var(--borda);white-space:nowrap}
.tabela td{padding:10px 14px;border-bottom:1px solid #222228;font-size:14.5px;vertical-align:middle}
.tabela tbody tr:nth-child(odd) td{background:#121216}
.tabela tbody tr:hover td{background:#19191e}
.tabela .c{text-align:center;width:72px}
.tabela .vazio{text-align:center;color:var(--muted);padding:28px}
.linha-bloq td{opacity:.65}
.tag-bloq{font-size:11px;color:#ff8e86;border:1px solid rgba(224,86,79,.5);border-radius:5px;padding:1px 6px;margin-left:6px;font-family:'Segoe UI',sans-serif}
.rodape-tabela{margin-top:10px;text-align:right;font-size:13px}

/* status online/offline */
.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%}
.status.on{color:var(--verde);background:rgba(62,196,109,.12);border:1px solid rgba(62,196,109,.4)}
.status.on i{background:var(--verde);box-shadow:0 0 8px var(--verde)}
.status.off{color:#b9b9c3;background:rgba(255,255,255,.04);border:1px solid var(--borda)}
.status.off i{background:var(--cinza)}
.status.bloq{color:#ff8e86;background:rgba(224,86,79,.12);border:1px solid rgba(224,86,79,.45)}
.status.bloq i{background:var(--vermelho)}
.visto{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}

/* painel geral */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.metrica{background:var(--cartao2);border:1px solid var(--borda);border-radius:12px;padding:20px}
.metrica b{display:block;font-size:34px;color:var(--ouro)}
.metrica span{color:var(--muted);font-size:14px}
.download-card{margin-top:16px;background:var(--cartao2);border:1px solid var(--borda);border-radius:12px;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.download-card b{display:block;margin-bottom:4px}
.download-card code{background:#0d0d10;border:1px solid var(--ouro-esc);color:var(--ouro);border-radius:9px;padding:10px 14px;font-size:15px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#1c1c22;border:1px solid var(--ouro);
  color:#fff;padding:12px 22px;border-radius:30px;font-size:15px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:50}

@media(max-width:820px){
  .app{flex-direction:column}
  .sidebar{width:100%;padding:12px}
  .side-logo{width:110px;margin-bottom:10px}
  .sidebar nav{flex-direction:row;flex-wrap:wrap}
  .nav-item{padding:9px 12px;font-size:14px}
  .sidebar-rodape{flex-direction:row;align-items:center;justify-content:space-between}
  .conteudo{padding:16px 12px}
  .bloco-titulo{font-size:22px}
  .bloco-corpo{padding:14px}
  .filtros{flex-direction:column}
  .filtros select{width:100%}
}