*{box-sizing:border-box}
body{
background:#050816;
color:white;
font-family:Arial,sans-serif;
padding:25px
}

header,.panel,.card{
background:#111827;
border:1px solid #263248;
border-radius:18px;
padding:25px
}

header{
display:flex;
justify-content:space-between;
align-items:center
}

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

.card{
text-align:center;
font-size:20px
}

.card h2{
font-size:45px;
margin:10px
}

.danger h2{
color:#ef4444
}

.grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px
}

.alert{
background:#1e293b;
border-left:5px solid #ef4444;
padding:15px;
margin:10px 0;
border-radius:10px
}

.bar{
height:25px;
background:#222;
border-radius:20px;
overflow:hidden
}

.bar span{
display:block;
height:100%;
background:#22c55e
}

.blue span{
background:#3b82f6
}

@media(max-width:900px){
.cards,.grid{
grid-template-columns:1fr
}
}