body{
  margin:0;
  font-family:sans-serif;
  background:#0f172a;
  color:#fff;
}
header{
  display:flex;
  justify-content:space-between;
  padding:15px;
  background:#111827;
}
input {
  height: 80px;
  padding: 0 8px;
  border-radius: 8px;
  border: none;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:15px;
  padding:20px;
}
.card{
  background:#1e293b;
  padding:15px;
  border-radius:12px;
  cursor:pointer;
  transition:0.2s;
}
.card:hover{
  background:#334155;
  transform:translateY(-4px);
}
.player{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#111827;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px;
}
.disc{
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(45deg,#22c55e,#3b82f6);
}
.rotate{
  animation:spin 2s linear infinite;
}
@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}