*{

box-sizing:border-box;

}



body{


margin:0;


min-height:100vh;


font-family:

"Microsoft YaHei",
sans-serif;



background:

linear-gradient(
180deg,
#444,
#111
);



color:white;


padding:

30px;


}




.header{


text-align:center;


padding:

20px;


}



.header h1{


font-size:

48px;


margin:

10px;


}



.header p{


opacity:.7;


}




.search-box input{


width:min(600px,90%);



padding:

15px 20px;



font-size:18px;



border:none;



border-radius:30px;


}






.dashboard{


display:grid;


grid-template-columns:

repeat(2,1fr);



gap:20px;



max-width:900px;



margin:

20px auto;



}




.stat{


background:#222;


padding:

25px;


border-radius:

20px;


text-align:center;


box-shadow:

0 10px 30px rgba(0,0,0,.5);


}



.stat strong{


display:block;


font-size:

36px;


margin-top:10px;


}






main{


max-width:

1400px;


margin:auto;


}




h2{


border-left:

5px solid #ffcc00;


padding-left:

15px;


}





.filter{


display:flex;


flex-wrap:wrap;


gap:

15px;


margin:

20px 0;


}



.filter button{


padding:

10px 25px;


border:none;


border-radius:

20px;


cursor:pointer;


}




.cards{


display:grid;


grid-template-columns:

repeat(
auto-fill,
minmax(220px,1fr)
);



gap:

20px;


}




.card{


background:

#222;


border-radius:

20px;


padding:

20px;



cursor:pointer;



transition:

.25s;


}



.card:hover{


transform:

translateY(-8px);



box-shadow:

0 15px 40px black;


}




.tag{


display:inline-block;


padding:

5px 15px;



border-radius:

20px;



font-weight:bold;



color:#111;


}




.夯{

background:#f43121;

}



.顶尖{

background:#ffd24a;

}



.人上人{

background:#fff600;

}



.NPC{

background:#f8ebbf;

}



.拉完了{

background:white;

}




.desc{


margin:

20px 0;


opacity:.7;


}




.card button{


width:100%;



padding:

10px;



border:none;



border-radius:

20px;



cursor:pointer;


}





@media(max-width:700px){


body{


padding:

10px;


}



.header h1{


font-size:

32px;


}



.dashboard{


grid-template-columns:

1fr;


}



.cards{


grid-template-columns:

1fr;


}


}