.server-status-card { margin-bottom: 1.5rem; }
.server-status-items { display: flex; flex-wrap: wrap; gap: 1rem; }
.server-status-item {
  position: relative;
  overflow: hidden;
  flex: 1 1 100%;
  min-width: 280px;
  padding: 1.5rem;
  border-radius: 24px;
  border: 1px solid rgba(26, 36, 62, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,255,0.96));
  box-shadow: 0 20px 45px rgba(33, 45, 79, 0.10);
  color: #1c2740;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.server-status-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/images/7dayslogo.png');
  background-repeat: no-repeat;
  background-position: right 28px center;
  background-size: min(420px, 40%);
  opacity: 0.12;
  pointer-events: none;
}
.status-topline, .server-name, .server-ip, .player-info, .progress-bar { position: relative; z-index: 1; }
.status-topline { width: 100%; display:flex; justify-content:space-between; align-items:center; margin-bottom: 0.75rem; }
.status-wrapper { display:flex; align-items:center; justify-content:center; gap:.5rem; }
.status-indicator { width:14px; height:14px; border-radius:50%; animation:pulse 2s infinite ease-in-out; }
.server-status-item.online .status-indicator { background-color:#20b26b; }
.server-status-item.online .status-text { color:#20b26b; }
.server-status-item.offline .status-indicator { background-color:#df4a4a; }
.server-status-item.offline .status-text { color:#df4a4a; }
.status-text { font-weight:800; text-transform:uppercase; font-size:.95rem; }
.server-badge { display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:999px; background:rgba(255,159,47,.15); color:#cc7a00; font-weight:700; font-size:.8rem; }
.server-status-item .server-name { font-size: 2rem; font-weight: 800; margin-top: .5rem; text-align:center; }
.server-status-item .server-ip { font-size: 1rem; color:#5b667d; margin-bottom: .75rem; text-align:center; }
.player-info { margin:.75rem 0; font-size:1.45rem; font-weight:700; }
.progress-bar { width:100%; height:10px; background:#dce3f2; border-radius:999px; overflow:hidden; margin-top:auto; }
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg,#22c06d,#17a75e); transition:width .4s ease; border-radius:999px; }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:.8; } 50% { transform:scale(1.3); opacity:1; } }
@media (max-width: 700px) {
  .server-status-item::after { background-size: 220px; background-position: center bottom 24px; }
  .server-status-item .server-name { font-size:1.5rem; }
}