/* ===========================
   JR PLAY STREAM - Painel
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#111;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    padding:25px;
}

.container{
    max-width:950px;
    margin:auto;
}

.card{
    background:#1f1f1f;
    border-radius:22px;
    padding:30px;
    box-shadow:0 15px 40px rgba(0,0,0,.45);
}

/* ===========================
   Logo
=========================== */

.logo{
    text-align:center;
    margin-bottom:25px;
}

.logo img{
    width:130px;
    transition:.3s;
}

.logo img:hover{
    transform:scale(1.05);
}

/* ===========================
   Título
=========================== */

h1{
    text-align:center;
    font-size:38px;
    margin-bottom:12px;
}

h1::after{
    content:"";
    display:block;
    width:90px;
    height:4px;
    background:#ff7a00;
    margin:15px auto 0;
    border-radius:50px;
}

/* ===========================
   Botão Novo Upload
=========================== */

.novoUpload{
    display:block;
    text-align:center;
    text-decoration:none;
    background:#ff7a00;
    color:#fff;
    padding:15px;
    border-radius:12px;
    font-size:17px;
    font-weight:bold;
    margin:25px 0;
    transition:.25s;
}

.novoUpload:hover{
    background:#ff9500;
    transform:translateY(-2px);
}

/* ===========================
   Estatísticas
=========================== */

.stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:25px;
}

.stat{
    background:#2a2a2a;
    border-radius:16px;
    padding:22px;
    text-align:center;
    transition:.25s;
}

.stat:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(255,122,0,.20);
}

.stat strong{
    display:block;
    font-size:34px;
    color:#ff7a00;
    margin-bottom:8px;
}

.stat span{
    color:#bdbdbd;
    font-size:15px;
}

/* ===========================
   Pesquisa
=========================== */

#buscar{
    width:100%;
    padding:16px;
    border:none;
    border-radius:14px;
    background:#2b2b2b;
    color:#fff;
    font-size:16px;
    outline:none;
    margin-bottom:25px;
    transition:.25s;
}

#buscar::placeholder{
    color:#888;
}

#buscar:focus{
    border:2px solid #ff7a00;
    box-shadow:0 0 15px rgba(255,122,0,.25);
}

/* ===========================
   Lista
=========================== */

.lista{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ===========================
   Card do arquivo
=========================== */

.arquivo{

    background:#262626;

    border-left:6px solid #ff7a00;

    border-radius:18px;

    padding:20px;

    transition:.25s;

}

.arquivo:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(255,122,0,.18);

}

.arquivo-topo{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

}

.arquivo-info{

    flex:1;

}

.arquivo-nome{

    font-size:22px;

    font-weight:bold;

    word-break:break-word;

    margin-bottom:8px;

}

.arquivo-detalhes{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    color:#bdbdbd;
    font-size:15px;
}

/* ===========================
   Etiqueta NOVO
=========================== */

.novo{

    background:#00c853;

    color:#fff;

    padding:4px 10px;

    border-radius:20px;

    font-size:11px;

    font-weight:bold;

    margin-left:10px;

}

/* =====================================
   BOTÕES
===================================== */

.acoes{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:20px;
}

.btn{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    padding:13px;

    border-radius:12px;

    text-decoration:none;

    color:#fff;

    font-size:15px;

    font-weight:bold;

    transition:.25s;

    cursor:pointer;

    border:none;
}

.btn:hover{

    transform:translateY(-2px);

}

.download{

    background:#1976d2;

}

.download:hover{

    background:#1565c0;

    box-shadow:0 8px 18px rgba(25,118,210,.35);

}

.copiar{

    background:#ff7a00;

}

.copiar:hover{

    background:#ff9800;

    box-shadow:0 8px 18px rgba(255,122,0,.35);

}

.excluir{

    background:#d32f2f;

}

.excluir:hover{

    background:#c62828;

    box-shadow:0 8px 18px rgba(211,47,47,.35);

}

/* =====================================
   RODAPÉ
===================================== */

footer{

    margin-top:35px;

    text-align:center;

    color:#777;

    font-size:14px;

}

/* =====================================
   SCROLL
===================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#181818;

}

::-webkit-scrollbar-thumb{

    background:#ff7a00;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#ff9800;

}

/* =====================================
   ANIMAÇÕES
===================================== */

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.arquivo{

    animation:fade .35s ease;

}

/* =====================================
   RESPONSIVO
===================================== */

@media(max-width:800px){

    body{

        padding:15px;

    }

    .card{

        padding:20px;

    }

    h1{

        font-size:30px;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .acoes{

        grid-template-columns:1fr;

    }

    .btn{

        width:100%;

    }

    .arquivo-topo{

        flex-direction:column;

        gap:10px;

    }

    .arquivo-nome{

        font-size:19px;

    }

}

/* =====================================
   EFEITO DE CLIQUE
===================================== */

.btn:active{

    transform:scale(.96);

}

/* =====================================
   TRANSIÇÕES
===================================== */

*{

    transition:
    background .25s,
    color .25s,
    box-shadow .25s,
    transform .25s;

}
.menu{
    display:flex;
    gap:12px;
    margin:25px 0;
}

.menu a{
    flex:1;
    text-align:center;
    text-decoration:none;
    background:#2f2f2f;
    color:#fff;
    padding:14px;
    border-radius:12px;
    font-size:17px;
    font-weight:700;
    transition:.3s;
    border:1px solid #3d3d3d;
}

.menu a:hover{
    background:#ff7a00;
}

.menu a.ativo{
    background:#ff7a00;
    border-color:#ff7a00;
}