:root{

    --bg:#030303;
    --panel:#080808;
    --panel2:#0d0d0d;

    --border:#222;

    --white:#ffffff;
    --gray:#8a8a8a;

    --glow:rgba(255,255,255,.15);

}


*{
    box-sizing:border-box;
}


body{

    margin:0;

    background:
    radial-gradient(
        circle at top,
        #171717 0%,
        #030303 45%
    );

    color:white;

    font-family:
    Inter,
    Arial,
    sans-serif;

}


/* SCROLL */

::-webkit-scrollbar{

    width:8px;

}


::-webkit-scrollbar-track{

    background:#050505;

}


::-webkit-scrollbar-thumb{

    background:#333;

    border-radius:20px;

}



/* =====================
 SIDEBAR FUTURISTA
===================== */


.sidebar{

    position:fixed;

    top:0;

    left:0;

    height:100vh;

    width:260px;


    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.06),
        rgba(0,0,0,.8)
    );


    backdrop-filter:blur(20px);


    border-right:

    1px solid rgba(255,255,255,.08);


    padding:25px 18px;


}


.sidebar .logo{


    font-size:25px;

    font-weight:900;

    letter-spacing:2px;

    color:white;

    margin-bottom:40px;


}




.sidebar a{


    display:flex;

    align-items:center;

    gap:14px;


    color:#888;


    padding:14px 16px;


    margin-bottom:10px;


    border-radius:15px;


    transition:.3s;


    position:relative;


}




.sidebar a i{


    font-size:21px;

    color:white;


}



.sidebar a:hover{


    color:white;


    background:

    linear-gradient(

    90deg,

    rgba(255,255,255,.15),

    transparent

    );


    transform:translateX(6px);


}




.sidebar a:hover:before{


    content:"";


    position:absolute;


    left:0;

    width:3px;

    height:60%;


    background:white;


    box-shadow:

    0 0 15px white;


}




/* =====================
 CONTEÚDO
===================== */


.content{


    margin-left:260px;

    padding:35px;


}




/* =====================
 CARDS HUD
===================== */


.card,
.dashboard-card{


    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );


    backdrop-filter:blur(20px);


    border:

    1px solid rgba(255,255,255,.12);


    border-radius:22px;


    padding:25px;


    color:white;


    box-shadow:


    inset 0 0 30px rgba(255,255,255,.02),


    0 20px 60px rgba(0,0,0,.7);


    transition:.35s;


}



.card:hover,
.dashboard-card:hover{


    transform:translateY(-5px);


    border-color:white;


    box-shadow:


    0 0 25px rgba(255,255,255,.12);


}





/* ICONES DOS CARDS */


.dashboard-card i{


    font-size:35px;

    margin-bottom:15px;

    color:white;


    filter:

    drop-shadow(

    0 0 10px white

    );


}





/* =====================
 INPUTS
===================== */


.form-control{


    background:#050505!important;


    border:

    1px solid #333!important;


    color:white!important;


    border-radius:16px!important;


    padding:14px;


}



.form-control:focus{


    border-color:white!important;


    box-shadow:

    0 0 15px rgba(255,255,255,.15)!important;


}



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


.btn-dark{


    background:white!important;


    color:black!important;


    border-radius:15px!important;


    border:none!important;


    font-weight:800;


    padding:12px 25px;


    transition:.3s;


}



.btn-dark:hover{


    transform:scale(1.05);


    box-shadow:


    0 0 25px rgba(255,255,255,.4);


}



/* =====================
 TABELAS
===================== */


.table{


    color:white!important;

}



.table td,
.table th{


    border-color:#222!important;


}



.table tbody tr{


    transition:.2s;


}



.table tbody tr:hover{


    background:rgba(255,255,255,.05);


}





/* =====================
 TITULOS
===================== */


h2{


    font-weight:900;


    letter-spacing:1px;


}



h2 i{


    filter:

    drop-shadow(

    0 0 10px white

    );


}



/* =====================
 MOBILE
===================== */


@media(max-width:768px){


.sidebar{


    width:80px;


}



.sidebar a span{


    display:none;


}



.content{


    margin-left:80px;

    padding:15px;


}


}