body{
margin:0;
font-family:Inter,Arial;
background:#f4f6fb;
}

/* LAYOUT */

.app{
display:flex;
}

.sidebar{
width:230px;
background:#111827;
color:#fff;
min-height:100vh;
padding:20px;
}

.sidebar .logo{
margin-bottom:30px;
}

.sidebar a{
display:block;
color:#9ca3af;
padding:10px;
border-radius:6px;
text-decoration:none;
margin-bottom:5px;
}

.sidebar a:hover{
background:#ff7a00;
color:#fff;
}

.main{
flex:1;
padding:20px;
}

/* TOPO */

.topbar{
background:#fff;
padding:15px;
border-radius:10px;
margin-bottom:20px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* CARDS */

.card-saas{
background:#fff;
padding:20px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.stat{
font-size:32px;
font-weight:bold;
color:#ff7a00;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-bottom:20px;
}

/* GRAFICO */

.chart-box{
height:250px;
}

/* TABELA */

.table-saas{
width:100%;
background:#fff;
border-radius:10px;
overflow:hidden;
}

.table-saas th,
.table-saas td{
padding:10px;
border-bottom:1px solid #eee;
}

/* BOTAO */

.btn-primary{
background:#ff7a00;
border:none;
}