.monitor-shell{
  display:grid;
  gap:18px;
}

.monitor-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.monitor-kpi{
  background:#111318;
  border:1px solid #242932;
  border-radius:16px;
  padding:18px;
}

.monitor-kpi b{
  display:block;
  font-size:28px;
  color:#fff;
  line-height:1;
}

.monitor-kpi span{
  display:block;
  margin-top:8px;
  color:#858d99;
  font-size:12px;
}

.monitor-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.server-card{
  background:linear-gradient(145deg,#12151a,#0d1014);
  border:1px solid #282e37;
  border-radius:18px;
  padding:18px;
}

.server-card.online{
  border-color:#31583f;
}

.server-card.offline{
  opacity:.75;
  border-color:#573137;
}

.server-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.server-name{
  font-size:19px;
  font-weight:850;
  color:#fff;
}

.server-mode{
  margin-top:5px;
  color:#8b94a0;
  font-size:12px;
}

.server-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid #31583f;
  color:#63d78b;
  font-size:11px;
  font-weight:850;
}

.server-state::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}

.server-card.offline .server-state{
  border-color:#63343a;
  color:#ff737d;
}

.server-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:16px;
}

.server-fact{
  background:#090c10;
  border:1px solid #20262e;
  border-radius:11px;
  padding:11px;
}

.server-fact span{
  color:#747d89;
  display:block;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.server-fact b{
  color:#f4f6f8;
  display:block;
  margin-top:4px;
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.server-address{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:12px;
}

.server-ip{
  flex:1;
  min-width:0;
  background:#080a0d;
  border:1px solid #242a32;
  padding:11px 12px;
  border-radius:10px;
  font-family:Consolas,monospace;
  color:#d6d9dd;
  overflow:hidden;
  text-overflow:ellipsis;
}

.copy-ip,
.players-toggle{
  border:1px solid #343b45;
  background:#171b21;
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:750;
}

.copy-ip:hover,
.players-toggle:hover{
  border-color:#e57824;
}

.server-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}

.player-panel{
  display:none;
  margin-top:12px;
  border-top:1px solid #262c34;
  padding-top:12px;
}

.player-panel.open{
  display:block;
}

.player-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 4px;
  border-bottom:1px solid #1d2229;
  font-size:12px;
}

.player-row:last-child{
  border-bottom:0;
}

.player-name{
  color:#e6e9ed;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.player-meta{
  color:#747d89;
  flex:0 0 auto;
}

.status-box{
  background:#101319;
  border:1px solid #272d36;
  border-radius:18px;
  padding:18px;
}

.status-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:13px;
}

.status-head h2{
  margin:0;
  font-size:18px;
}

.status-time{
  color:#747d89;
  font-size:11px;
}

.status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.status-item{
  display:flex;
  align-items:center;
  gap:8px;
  background:#0b0e12;
  border:1px solid #222831;
  border-radius:11px;
  padding:11px;
  min-width:0;
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#54d483;
  box-shadow:0 0 10px #54d48388;
  flex:0 0 auto;
}

.status-item[data-state="OFFLINE"] .status-dot{
  background:#ff646e;
  box-shadow:0 0 10px #ff646e88;
}

.status-item[data-state="DEGRADED"] .status-dot{
  background:#ffbe4b;
  box-shadow:0 0 10px #ffbe4b88;
}

.status-name{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.status-value{
  font-size:10px;
  color:#7e8793;
}

.monitor-error{
  border:1px solid #573137;
  color:#ff858d;
  background:#170d10;
  border-radius:12px;
  padding:14px;
}

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

  .monitor-grid{
    grid-template-columns:1fr;
  }

  .status-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:520px){
  .monitor-summary{
    grid-template-columns:1fr 1fr;
  }

  .monitor-kpi{
    padding:14px;
  }

  .monitor-kpi b{
    font-size:23px;
  }

  .server-facts{
    grid-template-columns:1fr 1fr;
  }

  .server-address{
    align-items:stretch;
    flex-direction:column;
  }

  .copy-ip{
    width:100%;
  }

  .status-grid{
    grid-template-columns:1fr;
  }
}