*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif;
}

body{
min-height:100vh;
padding:30px 20px;
color:#1d1d1f;

background:
radial-gradient(circle at 20% 20%,rgba(0,122,255,.12),transparent 35%),
radial-gradient(circle at 80% 10%,rgba(175,82,222,.10),transparent 35%),
#f5f5f7;
}

.container{
max-width:1400px;
margin:auto;
}

/* Hero */

.hero{
background:rgba(255,255,255,.6);
backdrop-filter:blur(40px);
border:1px solid rgba(255,255,255,.9);

border-radius:36px;

padding:60px 40px;

text-align:center;

box-shadow:
0 20px 60px rgba(0,0,0,.08);

margin-bottom:30px;
}

.hero h1{
font-size:52px;
font-weight:700;
margin-bottom:15px;
}

.hero p{
font-size:20px;
color:#666;
line-height:1.8;
}

.hero-buttons{
margin-top:25px;
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

/* Stats */

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:35px;
}

.stat-card{
background:rgba(255,255,255,.65);

backdrop-filter:blur(30px);

border-radius:28px;

padding:25px;

text-align:center;

box-shadow:
0 10px 30px rgba(0,0,0,.05);
}

.stat-card span{
display:block;

font-size:38px;
font-weight:700;

color:#0071e3;

margin-bottom:8px;
}

/* TOP3 */

.top3{
margin-bottom:40px;
}

.top3 h2{
margin-bottom:20px;
font-size:32px;
}

.top-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.top-card{
background:rgba(255,255,255,.65);

backdrop-filter:blur(30px);

border-radius:30px;

padding:25px;

text-align:center;

box-shadow:
0 10px 30px rgba(0,0,0,.06);
}

.rank{
font-size:34px;
margin-bottom:15px;
}

.top-card img{
width:120px;
height:120px;

border-radius:50%;

object-fit:cover;

margin-bottom:15px;
}

.vote{
margin-top:12px;
font-weight:600;
color:#0071e3;
}

/* 搜索 */

.search-box{
margin-bottom:30px;
}

.search-box input{
width:100%;

padding:18px 20px;

border:none;

outline:none;

border-radius:22px;

background:white;

font-size:16px;

box-shadow:
0 5px 20px rgba(0,0,0,.05);
}

/* 列表 */

.grid{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(340px,1fr));

gap:30px;
}

.card{
background:rgba(255,255,255,.7);

backdrop-filter:blur(30px);

border-radius:32px;

overflow:hidden;

box-shadow:
0 10px 35px rgba(0,0,0,.06);

transition:.3s;
}

.card:hover{
transform:translateY(-6px);
}

.card img{
width:100%;
height:260px;
object-fit:cover;
}

.card-body{
padding:25px;
}

.card-body h3{
font-size:24px;
margin-bottom:10px;
}

.card-body p{
color:#666;
margin-bottom:8px;
}

/* 按钮 */

.btn{
display:flex;
justify-content:center;
align-items:center;

height:55px;

padding:0 25px;

border-radius:18px;

text-decoration:none;

background:
linear-gradient(
135deg,
#0071e3,
#2997ff
);

color:#fff;

font-weight:600;

border:none;

transition:.3s;
}

.btn:hover{
transform:translateY(-2px);

box-shadow:
0 10px 25px rgba(0,113,227,.25);
}

.btn-light{
background:white;
color:#111;
}

/* 表单 */

.form{
max-width:700px;
margin:auto;

background:rgba(255,255,255,.7);

backdrop-filter:blur(35px);

padding:35px;

border-radius:32px;

box-shadow:
0 10px 35px rgba(0,0,0,.06);
}

.form h2{
margin-bottom:20px;
}

.form input,
.form textarea{
width:100%;

padding:15px;

margin:10px 0;

border:none;

outline:none;

border-radius:18px;

background:white;
}

.alert{
padding:15px;
border-radius:15px;
margin-bottom:15px;
}

.alert-success{
background:#e8fff0;
color:#0b7a37;
}

.alert-danger{
background:#fff0f0;
color:#d70015;
}

@media(max-width:900px){

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

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

.hero h1{
font-size:34px;
}

.hero p{
font-size:16px;
}

}

@media(max-width:600px){

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

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

body{
padding:15px;
}

.hero{
padding:40px 20px;
}

}