body { 
    font-family: 'Segoe UI', sans-serif; 
    background: #e8e8f4; 
    color: #222; 
    margin: 0; 
}
.container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    padding: 20px; 
    gap: 15px; 
}
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 15px;
  width: 340px;
  text-align: center;
  transition: transform 0.2s;
}
.card:hover { 
    transform: scale(1.02); 
}
.status-online { 
    color: #00b300; 
    font-weight: bold; 
}
.status-offline { 
    color: #d11a2a; 
    font-weight: bold; 
}
h2 { 
    text-align: center; 
    margin: 20px 0; 
}
canvas { 
    width: 100%; 
    height: 120px; 
}
.chart-wrap { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin-top: 10px; 
}
.chart-ping { 
    height: 120px; 
}
.chart-code { 
    height: 88px; 
}
.details { 
    display: none; 
    text-align: left; 
    margin-top: 10px; 
    font-size: 14px; 
}
button {
  background: #0078ff; 
  color: #fff; 
  border: none; 
  padding: 8px 12px;
  border-radius: 6px; 
  cursor: pointer;
}
button:hover { 
    background: #005fcc; 
}
.stats {
  margin-top: 10px; 
  font-size: 14px;
  background: #f8f8f8; 
  border-radius: 8px;
  padding: 8px;
}
@media (max-width: 600px) { 
    .card { 
        width: 90%; 
    } 
}
.cori {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}