.login-screen{
  position:fixed;
  inset:0;
  background:radial-gradient(circle at top,#1c1c22,#0d0d11);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.login-card{
  width:360px;
  background:#14141b;
  padding:32px;
  border-radius:24px;
  text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.7);
}

.login-card h2{
  margin-bottom:6px;
}
.login-card p{
  opacity:.6;
  margin-bottom:20px;
}

.login-card input{
  width:100%;
  padding:12px;
  margin-bottom:12px;
  border-radius:12px;
  border:none;
  background:#1f1f2a;
  color:#fff;
}

.login-card button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:14px;
  background:#a855f7;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.login-error{
  display:block;
  margin-top:12px;
  color:#ef4444;
  font-size:13px;
}

.hidden{display:none}
*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui}
body{
  background:radial-gradient(circle at top,#1c1c22,#0d0d11);
  color:#e5e5f0;
  overflow:hidden;
}

/* Ambient */
.ambient{
  position:fixed;
  inset:-200px;
  background:
    radial-gradient(circle at 20% 30%,rgba(168,85,247,.15),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(124,58,237,.12),transparent 40%);
  animation:drift 30s linear infinite;
}
@keyframes drift{
  0%{transform:translate(0,0)}
  50%{transform:translate(-120px,80px)}
  100%{transform:translate(0,0)}
}

.app{display:flex;height:100vh}

/* SIDEBAR */
.sidebar{
  width:260px;
  padding:32px 24px;
  background:rgba(18,18,24,.92);
}
.logo{font-size:22px;margin-bottom:28px}
.logo span{color:#a855f7}
.sidebar nav a{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:6px;
  color:#bdbdd3;
  cursor:pointer;
}
.sidebar nav a.active,
.sidebar nav a:hover{
  background:linear-gradient(90deg,rgba(168,85,247,.25),transparent);
}

/* MAIN */
.main{flex:1;padding:32px}
.topbar{display:flex;justify-content:space-between;margin-bottom:28px}

/* STATS */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-bottom:28px;
}
.stat{
  background:rgba(255,255,255,.04);
  padding:26px;
  border-radius:24px;
}
.stat h2{font-size:34px;margin-top:6px}

/* PANEL */
.panel{
  background:rgba(255,255,255,.04);
  padding:28px;
  border-radius:26px;
}

/* PLAYER LIST */
.players-panel{
  height:520px;
  display:flex;
  flex-direction:column;
}
.panel-head{
  display:flex;
  justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.players-viewport{
  flex:1;
  overflow:hidden;
  margin-top:14px;
}
.players-track{
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:scroll 60s linear infinite;
}
.players-viewport:hover .players-track{
  animation-play-state:paused;
}
@keyframes scroll{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}
.player{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
}
.player:hover{background:rgba(168,85,247,.15)}

.status{
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.clean{background:rgba(34,197,94,.2);color:#22c55e}
.flag{background:rgba(251,146,60,.25);color:#fb923c}
.danger{
  background:#ef4444;
  color:#fff;
  box-shadow:0 0 12px rgba(239,68,68,.6);
}

/* MODAL */
.player-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  pointer-events:auto;
}
.player-card{
  width:520px;
  background:#14141b;
  border-radius:26px;
  padding:28px;
  animation:cardIn .35s ease;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
@keyframes cardIn{
  from{opacity:0;transform:scale(.92) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.player-card-header{
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
}
.pm-status{
  padding:6px 16px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
}
.pm-status.clean{background:rgba(34,197,94,.2);color:#22c55e}
.pm-status.flag{background:rgba(251,146,60,.2);color:#fb923c}
.pm-status.danger{background:#ef4444;color:#fff}

.player-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.pc-item label{font-size:12px;opacity:.6}
.pc-value{margin-top:4px;font-size:14px}
.pc-bar{
  background:#1f1f2a;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  margin-top:6px;
}
.pc-bar.dual{display:flex}
.bar-fill{height:100%}
.bar-fill.green{background:#22c55e}
.bar-fill.orange{background:#fb923c}
.bar-fill.blue{background:#38bdf8}

.close-btn{
  margin-top:22px;
  width:100%;
  padding:12px;
  border:none;
  border-radius:14px;
  background:#1f1f2a;
  color:#fff;
  cursor:pointer;
}

.hidden{display:none}