body{
font-family:Arial;
background:#111;
color:white;
padding:20px;
}

h1{
text-align:center;
margin-bottom:20px;
}

/* SUMMARY PANEL */

.summary{
display:flex;
justify-content:center;
gap:20px;
margin-bottom:20px;
flex-wrap:wrap;
}

.summary div{
background:#1e1e1e;
padding:15px 25px;
border-radius:8px;
font-size:18px;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
}

@media(max-width:1500px){
.grid{grid-template-columns:repeat(3,1fr);}
}

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

@media(max-width:600px){
.grid{grid-template-columns:repeat(1,1fr);}
body{padding:10px;font-size:14px;}
h1{font-size:20px;}
h3{font-size:16px;}
}

/* SERVER CARD */

.card{
background:#1e1e1e;
padding:18px;
border-radius:8px;
transition:0.25s;
}

.card.down-server{
border:2px solid #ff4d4f;
background:#2a1515;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,0.6);
}

.ok{color:#00ff88;}
.down{color:#ff4d4f;}
.warn{color:orange;}

canvas{
background:#161616;
margin-top:12px;
width:100%!important;
height:320px!important;
border-radius:6px;
}

.arrow-btn{
color:white;
cursor:pointer;
padding:6px 10px;
background:#333;
margin:5px;
border-radius:4px;
display:inline-block;
}

button{
padding:8px 16px;
margin:10px;
background:#333;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#555;
}

/* METRIC BARS */

.bar{
background:#333;
height:8px;
border-radius:6px;
margin:5px 0 10px 0;
overflow:hidden;
}

.bar div{
height:100%;
background:linear-gradient(90deg,#36cfc9,#00ff88);
}


.warn-server { border: 2px solid orange; }