*{margin:0;padding:0;box-sizing:border-box}
:root {
  --p: #41c35e;      /* 主题蓝色 */
  --pl: #079b27;
  --pd: #1d4ed8;
  --a: #f59e0b;
  --bg: #f8fafc;
  --c: #fff;         /* 白色 - 用于卡片背景等 */
  --t: #1e293b;
  --tm: #64748b;
  --b: #e2e8f0;
  --s: 0 1px 3px rgba(0,0,0,.08);
  --sl: 0 10px 40px rgba(0,0,0,.1);
  --r: 14px;
  --rs: 8px;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--t);line-height:1.6;
}

/* ===== 导航 ===== */
.nav{
  background:var(--c);border-bottom:1px solid var(--b);
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(12px);background:rgba(255,255,255,.92);
}
.nav-in{
  max-width:1280px;margin:0 auto;padding:0 24px;
  height:64px;display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:10px;text-decoration:none;
}
.logo-ic{
  width:36px;height:36px;
  background:linear-gradient(135deg,var(--p),var(--pl));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:18px;
  box-shadow:0 2px 8px rgba(37,99,235,.3);
}
.logo-tx{
  font-size:20px;font-weight:700;
  background:linear-gradient(135deg,var(--p),var(--pl));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-l{display:flex;gap:32px;list-style:none}
.nav-l a{
  text-decoration:none;color:var(--tm);font-size:15px;font-weight:500;
  transition:color .2s;position:relative;
}
.nav-l a:hover,.nav-l a.on{color:var(--p)}
.nav-l a.on::after{
  content:'';position:absolute;bottom:-20px;left:0;right:0;
  height:2px;background:var(--p);border-radius:1px;
}

/* ===== 搜索 ===== */
.hero{
  background:linear-gradient(160deg,#eff6ff 0%,#f0f9ff 50%,#fff 100%);
  padding:50px 24px 40px;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;width:600px;height:600px;
  background:radial-gradient(circle,rgba(59,130,246,.08) 0%,transparent 70%);
  top:-200px;right:-100px;border-radius:50%;
}
.hero::after{
  content:'';position:absolute;width:400px;height:400px;
  background:radial-gradient(circle,rgba(245,158,11,.06) 0%,transparent 70%);
  bottom:-100px;left:-50px;border-radius:50%;
}
.hero-in{
  max-width:720px;margin:0 auto;text-align:center;position:relative;z-index:1;
}
.hero h1{font-size:34px;font-weight:800;margin-bottom:10px;letter-spacing:-.5px}
.hero h1 span{
  background:linear-gradient(135deg,var(--p),#7c3aed);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{color:var(--tm);font-size:16px;margin-bottom:28px}
.sbox,form.sbox{
  display:flex;background:var(--c);border-radius:var(--r);
  box-shadow:var(--sl);padding:5px;max-width:600px;margin:0 auto;
  border:1px solid var(--b);
}
.sbox input{
  border:none;outline:none;padding:12px 16px;
  width: 520px;
  font-size:15px;color:var(--t);background:transparent;
}
.sbox input::placeholder{color:#94a3b8}
.sbox .schbtn{
  background:linear-gradient(135deg,var(--p),var(--pl));color:#fff;border:none;
  border-radius:var(--rs);padding:8px 24px;font-size:14px;font-weight:600;
  cursor:pointer;transition:transform .2s,box-shadow .2s;white-space:nowrap;
  width:85px;flex-shrink:0;
}
.sbox .schbtn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,.35)}

/* ===== 底部热门标签 ===== */
.softtop{
  max-width:1280px;margin:0 auto;padding:20px 24px 10px;
}
.softtop-ul{display:flex;flex-direction:column;gap:10px}
.softtop-li{
  display:flex;align-items:center;gap:12px;
  background:var(--c);border-radius:var(--rs);padding:12px 18px;
  border:1px solid var(--b);
}
.softtop-li em{
  font-size:13px;font-weight:700;padding:4px 10px;border-radius:6px;
  font-style:normal;flex-shrink:0;
}
.softtop-li em.one{background:#fee2e2;color:#991b1b}
.softtop-li em.two{background:#dbeafe;color:#1e3a8a}
.softtop-li .items{
  display:flex;gap:8px;flex-wrap:wrap;flex:1;
  overflow:hidden;
}
.softtop-li a{
  font-size:13px;color:var(--tm);text-decoration:none;
  padding:3px 10px;background:var(--bg);border-radius:4px;
  transition:all .2s;white-space:nowrap;
}
.softtop-li a:hover{background:var(--p);color:#fff}

/* ===== 通用标题 ===== */
.sec-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.sec-hd h2,.sec-hd b{
  font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px;
}
.sec-hd h2::before,.sec-hd b::before{
  content:'';width:4px;height:18px;
  background:linear-gradient(180deg,var(--p),var(--pl));border-radius:2px;
}
.sec-hd .more{
  font-size:13px;color:var(--tm);text-decoration:none;
  display:flex;align-items:center;gap:4px;transition:color .2s;
}
.sec-hd .more:hover{color:var(--p)}

/* ===== TAB ===== */
.tab-btns{
  display:flex;gap:4px;background:#f1f5f9;border-radius:var(--rs);padding:4px;
  margin-bottom:16px;width:fit-content;
}
.tab-btn{
  padding:5px 14px;border-radius:6px;font-size:13px;font-weight:500;
  cursor:pointer;border:none;background:transparent;color:var(--tm);transition:all .2s;
}
.tab-btn.on{background:var(--c);color:var(--p);box-shadow:var(--s);font-weight:600}
.tab-btn:hover{color:var(--p)}
.tab-pane{display:none}
.tab-pane.on{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ===== 推荐游戏/软件 网格 ===== */
.tab-wrap {
    width: 908px;
}
.tj-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
@media(max-width:1024px){.tj-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.tj-grid{grid-template-columns:repeat(3,1fr)}}
.tj-item{
  width:172px;
  background:var(--c);border-radius:var(--rs);padding:14px;text-align:center;
  border:1px solid var(--b);text-decoration:none;color:var(--t);
  transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.tj-item:hover{
  border-color:var(--p);box-shadow:0 4px 20px rgba(37,99,235,.1);transform:translateY(-3px);
}

.tj-item .ic{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.5);
}
.tj-item .ic img{
width: 65px;}
.tj-item span{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}

/* ===== 排行列表 ===== */
.rank-wrap{background:var(--c);border-radius:var(--rs);border:1px solid var(--b);padding:20px}
.rank-wrap .sec-hd{margin-bottom:14px}
.rank-wrap .sec-hd b{font-size:16px}
.rank-list{list-style:none}
.rank-li{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--b);position:relative;
}
.rank-li:last-child{border-bottom:none}
.rank-num{
  width:22px;height:22px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
}
.rank-num.top{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.rank-num.normal{background:var(--bg);color:var(--tm)}
.rank-bt{
  flex:1;font-size:14px;color:var(--t);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rank-bt:hover{color:var(--p)}
.rank-rd{font-size:12px;color:var(--tm);white-space:nowrap}
.rank-info{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--c);border:1px solid var(--b);border-radius:var(--rs);
  padding:12px;z-index:10;box-shadow:var(--sl);margin-top:4px;
  gap:10px;align-items:center;
}
.rank-li:hover .rank-info{display:flex}
.rank-info img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.rank-info .nm{font-size:13px;font-weight:600}
.rank-info .sz{font-size:12px;color:var(--tm)}

/* ===== 三列排行区 ===== */
.phb-sec{
  max-width:1280px;margin:0 auto;padding:30px 24px;
}
.phb-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media(max-width:768px){.phb-grid{grid-template-columns:1fr}}

/* ===== 最新更新 ===== */
.update-sec{
  max-width:1280px;margin:0 auto;padding:0 24px 30px;
}
.update-list{
  background:var(--c);border-radius:var(--rs);border:1px solid var(--b);
  padding:16px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;
}
@media(max-width:768px){.update-list{grid-template-columns:1fr}}
.update-list li{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px dashed var(--b);font-size:13px;
}
.update-list li:nth-child(10n){border-bottom:none}
.update-list em{color:#ef4444;font-style:normal;font-size:12px;flex-shrink:0;width:72px}
.update-list span a{
  color:var(--tm);text-decoration:none;font-size:12px;
  padding:2px 8px;background:var(--bg);border-radius:4px;flex-shrink:0;
}
.update-list span a:hover{background:var(--p);color:#fff}
.update-list .name{
  color:var(--t);text-decoration:none;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.update-list .name:hover{color:var(--p)}

/* ===== 友情链接 ===== */
.link-sec{
  max-width:1280px;margin:0 auto;padding:0 24px 30px;
}
.link-box{
  background:var(--c);border-radius:var(--rs);border:1px solid var(--b);padding:16px 20px;
}
.link-box a{
  font-size:13px;color:var(--tm);text-decoration:none;margin-right:16px;line-height:2.2;
  transition:color .2s;
}
.link-box a:hover{color:var(--p)}

/* ===== 底部 ===== */
.ft{
  background:var(--c);border-top:1px solid var(--b);padding:30px 24px 20px;
}
.ft-in{
  max-width:1280px;margin:0 auto;text-align:center;
}
.ft-in p{font-size:13px;color:var(--tm);line-height:2}
.ft-in a{color:var(--tm);text-decoration:none;margin:0 8px;transition:color .2s}
.ft-in a:hover{color:var(--p)}

/* ===== 主体两列布局 ===== */
.main{
  max-width:1280px;margin:0 auto;padding:20px 24px;
  display:grid;grid-template-columns:1fr 300px;gap:24px;
}
@media(max-width:1024px){.main{grid-template-columns:1fr}}

/* ===== 响应式 ===== */
@media(max-width:768px){
  .nav-l{display:none}
  .hero h1{font-size:26px}
}