/* =========================================================
   乐玩网 · 自定义样式（与 Tailwind 配合使用）
   ========================================================= */

/* 字体栈：尊重系统字体，避免「AI 站」感 */
:root{
  --color-primary:#ff5a2a;
  --color-primary-dark:#e64814;
  --color-primary-soft:#fff2ec;
  --color-accent:#ffc107;
  --color-blue:#1e88e5;         /* 资讯蓝 */
  --color-green:#43a047;        /* 攻略绿 */
  --color-pink:#e91e63;
  --color-text:#1f2733;
  --color-text-2:#5b6473;
  --color-text-3:#9098a3;
  --color-line:#e7eaf0;
  --color-bg:#f5f7fb;
  --radius-md:10px;
  --radius-lg:14px;
  --shadow-sm:0 3px 12px rgba(16,24,40,.06);
  --shadow-md:0 12px 28px rgba(16,24,40,.10);
  --shadow-brand:0 10px 24px rgba(255,90,42,.22);
}

html,body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans CN","Segoe UI",system-ui,sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  overflow-x:hidden;
}
body{
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255,90,42,.08), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(30,136,229,.08), transparent 28%);
}

/* ---------- 顶部公告条 ---------- */
.topbar{
  background:#2a2f3a;color:#cfd2da;font-size:12px;
}
.topbar a{color:#cfd2da;}
.topbar a:hover{color:#ffb300;}

/* ---------- Logo / Header ---------- */
.brand-text{
  background:linear-gradient(90deg,#ff5722 0%,#ff8f3c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}

/* ---------- 主导航：红色横条 ---------- */
.mainnav{
  background:linear-gradient(90deg,#ff6b4a 0%,#ff7a45 45%,#ff8f57 100%);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  border-top:1px solid rgba(255,255,255,.3);
  box-shadow:0 8px 18px rgba(255,107,74,.22);
}
.mainnav a{
  position:relative;color:#fff;font-weight:700;padding:0 22px;height:54px;
  display:inline-flex;align-items:center;gap:7px;font-size:16px;
  transition:all .22s ease;
}
.mainnav a:hover{background:rgba(255,255,255,.16);}
.mainnav a.active{
  background:rgba(0,0,0,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.mainnav a.active::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:30px;height:3px;background:#fff;border-radius:3px 3px 0 0;
  box-shadow:none;
}
.mainnav .hot{
  position:absolute;top:6px;right:6px;font-size:10px;background:#ffeb3b;
  color:#e64a19;font-weight:700;padding:1px 5px;border-radius:3px;
  line-height:1.2;
}

/* ---------- 搜索 ---------- */
.search-box{
  display:flex;align-items:center;background:#fff;border:2px solid var(--color-primary);
  border-radius:4px;overflow:hidden;width:340px;
}
.search-box input{
  flex:1;padding:8px 12px;font-size:14px;outline:none;border:0;background:transparent;
}
.search-box .tabs{display:flex;border-right:1px solid var(--color-line);}
.search-box .tabs button{
  padding:6px 10px;font-size:13px;color:var(--color-text-2);border-right:1px solid var(--color-line);
}
.search-box .tabs button:last-child{border-right:0;}
.search-box .tabs button.active{color:var(--color-primary);font-weight:700;}
.search-box .submit{
  padding:0 16px;background:var(--color-primary);color:#fff;display:flex;align-items:center;gap:4px;
  font-size:14px;font-weight:700;
}
.search-box .submit:hover{background:var(--color-primary-dark);}
.hot-keys{font-size:12px;color:var(--color-text-3);margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;}
.hot-keys a{color:var(--color-text-3);}
.hot-keys a:hover{color:var(--color-primary);}

/* ---------- Swiper 轮播 ---------- */
.hero-swiper{
  width:100%;
  min-width:0;
  max-width:100%;
  height:430px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide{
  max-width:100%;
}
.hero-side{
  height:430px;
  min-height:430px;
}
.hero-side .aside-card{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.hero-side .aside-list{
  flex:1;
  min-height:0;
  overflow:hidden;
}
.hero-side .aside-list .item{
  padding:6px 0;
  font-size:13px;
}
.hero-side .aside-list .item .hot{
  font-size:11px;
}
.hero-slide{
  position:relative;height:100%;display:flex;align-items:flex-end;padding:0;color:#fff;
  overflow:hidden;
}
.hero-slide::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:42%;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));
}
.hero-slide > *{position:relative;z-index:2;}
.hero-art{
  position:absolute;right:-24px;top:50%;transform:translateY(-50%);width:430px;height:430px;opacity:.94;z-index:1;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.18));
}
.hero-slide > svg.hero-art{display:none;}
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  object-fit:cover;
  filter:none;
}
.hero-slide .max-w-\[55\%\]{
  position:absolute;
  left:24px;
  right:24px;
  bottom:18px;
  max-width:none!important;
  z-index:3;
}
.hero-tag,.hero-actions{display:none!important;}
.hero-h1{
  font-size:34px;
  font-weight:900;
  letter-spacing:.4px;
  line-height:1.2;
  margin:0 0 4px;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.hero-desc{
  font-size:14px;
  color:rgba(255,255,255,.92);
  max-width:none;
  margin:0;
  line-height:1.45;
}
.hero-stats{display:none;}
.btn-primary{
  display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border-radius:8px;font-weight:800;font-size:15px;
  background:#fff;color:var(--color-primary);transition:all .2s;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
}
.btn-primary:hover{background:#ffb300;color:#fff;transform:translateY(-2px);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border-radius:8px;font-weight:800;font-size:15px;
  background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(8px);transition:all .2s;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
}
.btn-ghost:hover{background:rgba(255,255,255,.32);}

/* 5 张 slide 配色 */
.hs-1{background:linear-gradient(120deg,#ff5722 0%,#ff8f3c 100%);}
.hs-2{background:linear-gradient(120deg,#5e35b1 0%,#3949ab 100%);}
.hs-3{background:linear-gradient(120deg,#00897b 0%,#43a047 100%);}
.hs-4{background:linear-gradient(120deg,#1e88e5 0%,#26c6da 100%);}
.hs-5{background:linear-gradient(120deg,#c62828 0%,#ef5350 100%);}

.swiper-pagination-bullet{
  background:rgba(255,255,255,.55);
  opacity:1;
  width:22px;
  height:4px;
  border-radius:3px;
}
.swiper-pagination-bullet-active{
  background:#00e5ff;
  width:34px;
  box-shadow:0 0 10px rgba(0,229,255,.8);
}
.swiper-button-next,.swiper-button-prev{
  color:#fff;width:36px;height:36px;background:rgba(0,0,0,.25);border-radius:50%;
}
.swiper-button-next::after,.swiper-button-prev::after{font-size:14px;font-weight:800;}

/* ---------- 通用：节标题 ---------- */
.sec-title{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--color-line);padding-bottom:10px;margin-bottom:18px;
}
.sec-title .left{display:flex;align-items:center;gap:12px;}
.sec-title .bar{width:4px;height:18px;background:var(--color-primary);border-radius:2px;}
.sec-title h2{font-size:26px;font-weight:800;letter-spacing:.2px;}
.sec-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  margin-right:8px;
  min-width:34px;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  color:#fff;
  background:linear-gradient(90deg,#ff3b30,#ff7a45);
}
.sec-kicker.blue{background:linear-gradient(90deg,#1e88e5,#00e5ff);}
.sec-kicker.pink{background:linear-gradient(90deg,#e91e63,#7c4dff);}
.sec-kicker.gold{background:linear-gradient(90deg,#ffb300,#ff6f00);}
.sec-title h2 small{font-size:12px;color:var(--color-text-3);font-weight:400;margin-left:6px;}
.sec-title .tabs{display:flex;gap:0;font-size:15px;}
.sec-title .tabs button{
  padding:6px 14px;color:var(--color-text-2);border-right:1px solid var(--color-line);
  transition:all .2s;
}
.sec-title .tabs button:last-child{border-right:0;}
.sec-title .tabs button:hover{color:var(--color-primary);}
.sec-title .tabs button.active{
  color:var(--color-primary);font-weight:700;
  background:var(--color-primary-soft);
  border-radius:999px;
}
.sec-title .more{font-size:13px;color:var(--color-text-3);display:inline-flex;align-items:center;gap:2px;}
.sec-title .more:hover{color:var(--color-primary);}

/* ---------- 卡片：游戏 / 应用 ---------- */
[data-panels],
.tab-panel{
  min-width:0;
  max-width:100%;
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  min-width:0;
  max-width:100%;
}
.app-card{
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border:1px solid var(--color-line);border-radius:var(--radius-md);padding:14px;
  transition:all .2s;cursor:pointer;
  box-shadow:var(--shadow-sm);
  display:block;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
}
.app-card:hover{
  border-color:rgba(0,229,255,.72);
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(0,229,255,.25),0 14px 26px rgba(0,229,255,.18);
}
.app-card .top{display:flex;gap:10px;align-items:flex-start;}
.app-icon{
  width:78px;height:78px;border-radius:16px;display:grid;place-items:center;color:#fff;
  font-weight:800;font-size:28px;flex-shrink:0;letter-spacing:-1px;position:relative;overflow:hidden;
}
.app-icon::after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.4),transparent 60%);
}
.app-icon span{position:relative;z-index:1;}
.app-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.app-info{flex:1;min-width:0;}
.app-info .name{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-info .meta{font-size:13px;color:var(--color-text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stars{display:flex;align-items:center;gap:1px;color:#ffb300;margin-top:2px;}
.stars iconify-icon{font-size:14px;}
.stars .num{font-size:13px;color:var(--color-text-2);font-weight:700;margin-left:4px;}
.app-card .desc{
  font-size:14px;color:var(--color-text-2);line-height:1.55;margin:12px 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:42px;
}
.app-card .bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;}
.tag-pill{
  font-size:12px;padding:4px 9px;border-radius:4px;font-weight:700;
  background:var(--color-primary-soft);color:var(--color-primary);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tag-pill.green{background:#e8f5e9;color:#2e7d32;}
.tag-pill.blue{background:#e3f2fd;color:#1565c0;}
.tag-pill.purple{background:#ede7f6;color:#6a1b9a;}
.tag-pill.gold{background:#fff8e1;color:#c77800;}
.dl-btn{
  display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:999px;font-size:13px;
  background:#f1f3f5;color:var(--color-text-2);font-weight:700;transition:all .2s;
  flex-shrink:0;
}
.dl-btn:hover{background:var(--color-primary);color:#fff;}

/* ---------- 编辑推荐侧栏 ---------- */
.aside-card{
  background:rgba(255,255,255,.96);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:14px 16px;
  box-shadow:var(--shadow-sm);
}
.aside-card:hover{
  border-color:rgba(0,229,255,.6);
  box-shadow:0 0 0 1px rgba(0,229,255,.22),0 12px 24px rgba(0,229,255,.14);
}
.aside-card-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px dashed var(--color-line);
}
.aside-card-head h3{font-size:18px;font-weight:800;display:flex;align-items:center;gap:6px;}
.aside-card-head h3 iconify-icon{color:var(--color-primary);font-size:20px;}
.aside-card-head .more{font-size:12px;color:var(--color-text-3);}
.aside-card-head .more:hover{color:var(--color-primary);}
.aside-list .item{
  display:flex;align-items:center;gap:8px;padding:8px 0;font-size:14px;cursor:pointer;
  transition:color .2s;
}
.aside-list .item > a{
  display:flex;align-items:center;gap:8px;width:100%;color:inherit;
}
.aside-list .item:hover{color:var(--color-primary);}
.aside-list .item .rank{
  width:20px;height:20px;border-radius:4px;display:grid;place-items:center;font-size:12px;font-weight:800;
  background:#dfe2e6;color:#fff;flex-shrink:0;
}
.aside-list .item:nth-child(1) .rank{background:#e64a19;}
.aside-list .item:nth-child(2) .rank{background:#ff8f3c;}
.aside-list .item:nth-child(3) .rank{background:#ffb300;}
.aside-list .item .name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aside-list .item .hot{font-size:12px;color:var(--color-text-3);}

/* ---------- 快捷分类入口 ---------- */
.quick-grid{
  display:grid;grid-template-columns:repeat(10,1fr);gap:6px;
  background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:14px;
  box-shadow:var(--shadow-sm);
}
.quick-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;
  border-radius:8px;cursor:pointer;transition:all .2s;
}
.quick-item:hover{
  background:#fff5ef;
  transform:translateY(-2px);
}
.quick-icon{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;
  position:relative;overflow:hidden;transition:transform .25s;
}
.quick-item:hover .quick-icon{transform:scale(1.08);}
.quick-icon::after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.45),transparent 60%);
}
.quick-icon iconify-icon{font-size:26px;position:relative;z-index:1;}
.quick-item span{font-size:13px;color:var(--color-text-2);font-weight:600;}

/* ---------- 合集卡 ---------- */
.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.collection{
  position:relative;height:230px;border-radius:var(--radius-lg);overflow:hidden;color:#fff;cursor:pointer;
  transition:all .25s;
  box-shadow:var(--shadow-sm);
}
.collection:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(0,229,255,.2),0 14px 28px rgba(0,229,255,.16);
}
.collection .bg{position:absolute;inset:0;z-index:0;}
.collection .bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.collection .bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%);
}
.collection .badge{
  position:absolute;top:10px;left:10px;z-index:2;padding:3px 8px;border-radius:3px;
  background:rgba(0,0,0,.45);font-size:11px;display:inline-flex;align-items:center;gap:3px;
}
.collection .content{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;
}
.collection h3{font-size:20px;font-weight:800;margin-bottom:5px;text-shadow:0 1px 6px rgba(0,0,0,.3);}
.collection .sub{
  font-size:13px;
  color:rgba(255,255,255,.86);
  margin-bottom:6px;
}
.collection .stat{font-size:13px;display:flex;gap:10px;color:rgba(255,255,255,.9);}

/* ---------- 资讯 ---------- */
.news-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:18px;
}
.news-feature{
  background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;
  transition:box-shadow .2s;cursor:pointer;
  box-shadow:var(--shadow-sm);
  min-width:0;
  width:100%;
  max-width:100%;
}
.news-feature:hover{
  border-color:rgba(0,229,255,.62);
  box-shadow:0 0 0 1px rgba(0,229,255,.25),0 14px 28px rgba(0,229,255,.16);
}
.news-feature .cover{height:200px;position:relative;overflow:hidden;}
.news-feature .cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.news-feature .cover .label{
  position:absolute;top:10px;left:10px;z-index:2;background:#e64a19;color:#fff;
  font-size:11px;padding:2px 8px;border-radius:2px;font-weight:600;
}
.news-feature .body{padding:14px 16px;}
.news-feature h3{font-size:20px;font-weight:800;line-height:1.45;}
.news-feature p{
  font-size:14px;color:var(--color-text-2);line-height:1.6;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-feature .meta{
  display:flex;gap:12px;color:var(--color-text-3);font-size:12px;margin-top:10px;
}
.news-feature .meta iconify-icon{vertical-align:-2px;margin-right:2px;}
.news-list{
  background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:6px 16px;
  box-shadow:var(--shadow-sm);
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.news-list:hover{
  border-color:rgba(0,229,255,.58);
  box-shadow:0 0 0 1px rgba(0,229,255,.2),0 12px 24px rgba(0,229,255,.12);
}
.news-item{
  display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--color-line);cursor:pointer;
  min-width:0;
  transition:transform .2s;
}
.news-item:last-child{border-bottom:0;}
.news-item:hover{transform:translateX(2px);}
.news-item .num{
  width:20px;height:20px;flex-shrink:0;border-radius:3px;display:grid;place-items:center;
  background:#dfe2e6;color:#fff;font-size:11px;font-weight:800;
}
.news-item:nth-child(1) .num{background:#e64a19;}
.news-item:nth-child(2) .num{background:#ff8f3c;}
.news-item:nth-child(3) .num{background:#ffb300;}
.news-item .info{flex:1;min-width:0;}
.news-item h4{
  font-size:13px;font-weight:600;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;
}
.news-item:hover h4{color:var(--color-primary);}
.news-item .meta{font-size:11px;color:var(--color-text-3);margin-top:2px;display:flex;gap:8px;}
.news-item .meta iconify-icon{vertical-align:-2px;margin-right:1px;font-size:11px;}

/* ---------- 排行榜 ---------- */
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.rank-card{
  background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:16px 18px;
  box-shadow:var(--shadow-sm);
}
.rank-card:hover{
  border-color:rgba(0,229,255,.62);
  box-shadow:0 0 0 1px rgba(0,229,255,.24),0 12px 26px rgba(0,229,255,.14);
}
.rank-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  margin:-6px -6px 10px;
  border-radius:10px;
  border-bottom:0;
}
.rank-head h3{font-size:20px;font-weight:800;display:flex;align-items:center;gap:6px;}
.rank-head h3 iconify-icon{font-size:24px;color:#fff;}
.rank-card:first-child .rank-head{
  background:linear-gradient(100deg,#ff3b30 0%,#7c4dff 100%);
  box-shadow:0 8px 18px rgba(124,77,255,.26);
}
.rank-card:last-child .rank-head{
  background:linear-gradient(100deg,#1e88e5 0%,#7c4dff 100%);
  box-shadow:0 8px 18px rgba(30,136,229,.24);
}
.rank-head h3,
.rank-head p{
  color:#fff;
}
.rank-tabs{display:flex;font-size:13px;}
.rank-tabs button{
  padding:4px 12px;color:rgba(255,255,255,.72);border-right:1px solid rgba(255,255,255,.25);transition:all .2s;
}
.rank-tabs button:last-child{border-right:0;}
.rank-tabs button.active{
  color:#111827;
  font-weight:700;
  background:#fff;
  border-radius:999px;
}
.rank-list .row{
  display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--color-line);
  cursor:pointer;transition:background-color .2s;
}
.rank-list .row:last-child{border-bottom:0;}
.rank-list .row:hover{background:#fff8f5;}
.rank-list .row.top-hero{
  background:linear-gradient(120deg,#161022,#27204c);
  border:1px solid rgba(0,229,255,.25);
  border-radius:12px;
  padding:12px;
  margin-bottom:8px;
}
.rank-list .row.top-hero .rk{
  width:32px;
  height:32px;
  font-size:14px;
  border-radius:8px;
  background:linear-gradient(135deg,#ff3b30,#7c4dff);
}
.rank-list .row.top-hero .body .name{color:#fff;font-size:16px;}
.rank-list .row.top-hero .body .meta{color:#b9c3da;}
.rank-list .row.top-hero .trend{font-size:13px;}
.rank-list .rk{
  width:22px;height:22px;border-radius:3px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;
  background:#c2c8d0;flex-shrink:0;
  position:relative;
}
.rank-list .row.top1 .rk,
.rank-list .row.top2 .rk,
.rank-list .row.top3 .rk{
  width:28px;
  height:28px;
  font-size:13px;
  border-radius:7px;
}
.rank-list .row.top1 .rk{background:linear-gradient(135deg,#ff7a45,#ff5722);}
.rank-list .row.top2 .rk{background:linear-gradient(135deg,#ffb74d,#ff8f3c);}
.rank-list .row.top3 .rk{background:linear-gradient(135deg,#ffd54f,#ffb300);}
.rank-list .row.top1 .rk::after,
.rank-list .row.top2 .rk::after,
.rank-list .row.top3 .rk::after{
  content:"";
  position:absolute;
  top:-9px;
  right:-8px;
  width:14px;
  height:14px;
  background:radial-gradient(circle at 30% 30%,#fff6a3 0%,#ffd54f 70%);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.16);
}
.rank-list .ic{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:800;
  position:relative;overflow:hidden;
}
.rank-list .ic::after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.4),transparent 60%);
}
.rank-list .ic span{position:relative;z-index:1;font-size:16px;}
.rank-list .ic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rank-list .body{flex:1;min-width:0;}
.rank-list .body .name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;}
.rank-list .row:hover .body .name{color:var(--color-primary);}
.rank-list .body .meta{font-size:12px;color:var(--color-text-3);margin-top:1px;}
.rank-list .trend{font-size:12px;font-weight:700;color:#43a047;display:inline-flex;align-items:center;gap:1px;}
.rank-list .trend.down{color:#e53935;}
.rank-list .trend iconify-icon{font-size:14px;}
.rank-list .dl-mini{
  width:28px;height:28px;border-radius:4px;display:grid;place-items:center;background:#fff5ef;color:var(--color-primary);
  transition:all .2s;
}
.rank-list .row:hover .dl-mini{background:var(--color-primary);color:#fff;}

/* ---------- 排行榜重设计覆盖 ---------- */
#rank .rank-card{
  background:#fff;
  border:1px solid #e8edf7;
  box-shadow:0 8px 22px rgba(33,54,94,.08);
}
#rank .rank-card:hover{
  border-color:#d9e3f4;
  box-shadow:0 10px 24px rgba(33,54,94,.11);
}
#rank .rank-head{
  margin:-2px -2px 12px;
  padding:10px 12px;
  border-radius:10px;
}
#rank .rank-card:first-child .rank-head{
  background:linear-gradient(100deg,#fff0eb 0%,#ffe7f6 100%);
  box-shadow:none;
}
#rank .rank-card:last-child .rank-head{
  background:linear-gradient(100deg,#eef6ff 0%,#f2edff 100%);
  box-shadow:none;
}
#rank .rank-head h3,
#rank .rank-head p{
  color:#25314f;
}
#rank .rank-head h3 iconify-icon{color:#ff6b4a;}
#rank .rank-tabs button{
  color:#6f7b98;
  border-right:1px solid #d8e1f2;
}
#rank .rank-tabs button.active{
  color:#ff6b4a;
  background:#fff;
  box-shadow:0 2px 8px rgba(33,54,94,.12);
}
#rank .rank-list{display:flex;flex-direction:column;gap:8px;}
#rank .rank-list .row{
  background:#f9fbff;
  border:1px solid #edf2fb;
  border-radius:10px;
  padding:10px;
  gap:10px;
}
#rank .rank-list .row:hover{
  background:#fff;
  border-color:#dbe6f8;
}
#rank .rank-list .rk{
  width:24px;height:24px;border-radius:6px;font-size:12px;
  background:linear-gradient(135deg,#9ca7be,#7b87a3);
}
#rank .rank-list .row.top1 .rk{background:linear-gradient(135deg,#ff7a45,#ff3b30);}
#rank .rank-list .row.top2 .rk{background:linear-gradient(135deg,#8a5bff,#5f7bff);}
#rank .rank-list .row.top3 .rk{background:linear-gradient(135deg,#00d2ff,#00a6c9);}
#rank .rank-list .row.top-hero{
  background:linear-gradient(100deg,#fff7f2 0%,#fff 100%);
  border-color:#ffe0d6;
  padding:12px;
}
#rank .rank-list .row.top-hero .name{
  color:#1f2a44;
  font-size:16px;
}
#rank .rank-list .ic{
  width:42px;height:42px;border-radius:10px;border:1px solid #e5ebf7;
}
#rank .rank-list .body .name{color:#2c3652;font-size:14px;}
#rank .rank-list .body .meta{color:#7784a2;font-size:11px;}
#rank .rank-list .trend{font-size:12px;}
#rank .rank-list .dl-mini{
  background:#fff3ee;
  color:#ff6b4a;
  border:1px solid #ffd5c8;
}
#rank .rank-list .row:hover .dl-mini{
  background:#ff6b4a;
  color:#fff;
  border-color:transparent;
}
/* ---------- 友情链接 ---------- */
.friend-links{
  background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:14px 18px;
  box-shadow:var(--shadow-sm);
}
.friend-links:hover{
  border-color:rgba(0,229,255,.55);
  box-shadow:0 0 0 1px rgba(0,229,255,.18),0 10px 22px rgba(0,229,255,.12);
}
.friend-links h4{font-size:14px;font-weight:700;color:var(--color-text);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.friend-links h4 iconify-icon{color:var(--color-primary);}
.friend-links .links{display:flex;flex-wrap:wrap;gap:14px 22px;font-size:12px;color:var(--color-text-3);}
.friend-links .links a:hover{color:var(--color-primary);}

/* ---------- 页脚 ---------- */
.site-footer{
  background:#2a2f3a;color:#9aa0aa;padding:32px 0 18px;font-size:13px;line-height:1.8;margin-top:32px;
}
.site-footer a{color:#9aa0aa;}
.site-footer a:hover{color:#ffb300;}
.site-footer .copyright{
  border-top:1px solid #3a3f4a;margin-top:18px;padding-top:14px;color:#6f7682;font-size:12px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.beian-icons{display:flex;gap:12px;}
.beian-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid #3a3f4a;border-radius:3px;color:#7f8590;
}

/* ---------- 浮动操作 ---------- */
.fab{
  position:fixed;right:20px;bottom:80px;z-index:50;display:flex;flex-direction:column;gap:1px;
  background:#fff;border:1px solid var(--color-line);border-radius:4px;overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.fab button{
  width:42px;height:42px;display:grid;place-items:center;color:var(--color-text-2);
  border-bottom:1px solid var(--color-line);transition:all .2s;position:relative;
}
.fab button:last-child{border-bottom:0;}
.fab button:hover{background:var(--color-primary);color:#fff;}
.fab iconify-icon{font-size:18px;}
.fab #toTop{display:none;}
.fab #toTop.show{display:grid;}

/* ---------- 轮播区通栏渐变点缀 ---------- */
.hero-section{
  position:relative;
  isolation:isolate;
  padding-top:14px;
  padding-bottom:12px;
}
.hero-section::before{
  content:"";
  position:absolute;
  top:-2px;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255, 188, 158, 1) 0%,
    rgba(255, 214, 190, .86) 30%,
    rgba(255, 236, 224, .58) 56%,
    rgba(255, 255, 255, 0) 100%
  );
}
.hero-section > *{
  position:relative;
  z-index:1;
}

/* ---------- 板块渐变点缀背景 ---------- */
#games,
#game-collection,
#apps,
#app-collection,
#news,
#rank{
  position:relative;
  isolation:isolate;
  padding-top:18px;
  padding-bottom:18px;
  overflow:visible;
}
#games::before,
#game-collection::before,
#apps::before,
#app-collection::before,
#news::before,
#rank::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
}

#games > *,
#game-collection > *,
#apps > *,
#app-collection > *,
#news > *,
#rank > *{
  position:relative;
  z-index:1;
}

/* 每个板块用不同的浅色渐变，营造层次 */
#games::before{
  background:none;
}
#game-collection::before{
  background:linear-gradient(
    to bottom,
    rgba(255, 243, 205, .9) 0%,
    rgba(255, 248, 228, .55) 36%,
    rgba(255, 255, 255, 0) 100%
  );
}
#apps::before{
  background:none;
}
#app-collection::before{
  background:linear-gradient(
    to bottom,
    rgba(240, 225, 255, .9) 0%,
    rgba(247, 239, 255, .55) 36%,
    rgba(255, 255, 255, 0) 100%
  );
}
#news::before{
  background:none;
}
#rank::before{
  background:linear-gradient(
    to bottom,
    rgba(255, 236, 210, .9) 0%,
    rgba(255, 245, 230, .55) 36%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .card-grid{grid-template-columns:repeat(3,1fr);}
  .collection-grid{grid-template-columns:repeat(3,1fr);}
  .news-grid{grid-template-columns:1fr 1fr;}
  .quick-grid{grid-template-columns:repeat(5,1fr);}
  #games,
  #game-collection,
  #apps,
  #app-collection,
  #news,
  #rank{
    padding-top:14px;
    padding-bottom:14px;
  }
  #games::before,
  #game-collection::before,
  #apps::before,
  #app-collection::before,
  #news::before,
  #rank::before{
    width:100vw;
  }
  .hero-side{
    height:auto;
    min-height:0;
  }
  .hero-section{
    padding-top:10px;
    padding-bottom:8px;
  }
}
@media (max-width:760px){
  .hero-swiper{height:300px;}
  .hero-h1{font-size:24px;}
  .hero-photo{opacity:1;}
  .hero-slide{padding:0;}
  .hero-slide .max-w-\[55\%\]{left:16px;right:16px;bottom:14px;max-width:none!important;}
  .hero-desc{font-size:13px;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .app-icon{
    width:64px;
    height:64px;
    font-size:24px;
  }
  .collection-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:1fr;}
  .rank-grid{grid-template-columns:1fr;}
  .quick-grid{grid-template-columns:repeat(4,1fr);}
  .search-box{width:100%;}
  .mainnav a{padding:0 14px;font-size:15px;}
}

/* =========================================================
   鲜艳新版主题覆盖
   ========================================================= */
:root{
  --color-primary:#ff2e63;
  --color-primary-dark:#d9004c;
  --color-primary-soft:#fff0f7;
  --color-accent:#ffd166;
  --color-blue:#00b7ff;
  --color-green:#00d084;
  --color-pink:#ff4fb8;
  --color-text:#17192f;
  --color-text-2:#596176;
  --color-text-3:#8a93aa;
  --color-line:rgba(255,255,255,.58);
  --color-bg:#fff7fb;
  --radius-md:8px;
  --radius-lg:8px;
  --shadow-sm:0 10px 28px rgba(64,38,118,.10);
  --shadow-md:0 22px 56px rgba(52,25,112,.18);
  --shadow-brand:0 18px 40px rgba(255,46,99,.28);
}

html,body{
  min-height:100%;
}
body{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(120deg,rgba(255,255,255,.86),rgba(255,255,255,.64) 58%,rgba(255,255,255,.78)),
    conic-gradient(from 150deg at 50% -10%,#ff2e63,#ff9f1c 16%,#ffd166 28%,#00d084 43%,#00b7ff 60%,#7c4dff 78%,#ff4fb8 92%,#ff2e63);
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 2px,transparent 2px 24px),
    linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.74) 64%,rgba(255,255,255,.9));
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,46,99,.12),transparent 26%,rgba(0,183,255,.14) 58%,transparent),
    linear-gradient(155deg,transparent 0 36%,rgba(255,209,102,.20) 36% 48%,transparent 48% 100%);
  mix-blend-mode:multiply;
}
body > *{
  position:relative;
  z-index:1;
}

.topbar{
  background:linear-gradient(90deg,#201239,#3b155b 38%,#0c4670 70%,#0c755e);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.topbar a,
.topbar span{color:rgba(255,255,255,.86);}
.topbar a:hover{color:#ffd166;}

.site-header{
  position:relative;
  z-index:10;
  background:rgba(255,255,255,.74);
  border-bottom:1px solid rgba(255,255,255,.68);
  box-shadow:0 18px 42px rgba(86,45,132,.12);
  backdrop-filter:blur(18px);
}
.site-header .w-11{
  border-radius:8px!important;
  background:linear-gradient(135deg,#ff2e63 0%,#ff9f1c 42%,#00b7ff 100%)!important;
  box-shadow:0 12px 26px rgba(255,46,99,.28);
}
.brand-text{
  background:linear-gradient(90deg,#ff2e63 0%,#ff9f1c 42%,#00b7ff 80%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
}
.header-search{
  min-width:0;
}
.search-box{
  width:100%;
  min-height:46px;
  background:rgba(255,255,255,.88);
  border:2px solid transparent;
  border-radius:999px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.82),
    0 12px 28px rgba(255,46,99,.15);
  overflow:hidden;
  background-image:
    linear-gradient(#fff,#fff),
    linear-gradient(90deg,#ff2e63,#ff9f1c,#00d084,#00b7ff,#7c4dff);
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.search-box .tabs{
  border-right:0;
  padding-left:8px;
  gap:4px;
}
.search-box .tabs button{
  border-right:0;
  border-radius:999px;
  padding:7px 13px;
  color:#6f7890;
  font-weight:800;
}
.search-box .tabs button.active{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
}
.search-box input{
  font-size:14px;
  color:#17192f;
}
.search-box .submit{
  min-height:38px;
  margin:4px 4px 4px 0;
  padding:0 22px;
  background:linear-gradient(135deg,#7c4dff,#00b7ff);
  color:#fff;
  border-radius:999px;
  box-shadow:-8px 0 24px rgba(0,183,255,.18);
}
.search-box .submit:hover{
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
.hot-keys{
  color:#6d7690;
  margin-left:14px;
}
.hot-keys a{
  color:#ff2e63;
  font-weight:700;
}
.hot-keys a:nth-child(3n){color:#00a6d6;}
.hot-keys a:nth-child(4n){color:#00a36c;}

.site-header button{
  background:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.86)!important;
  box-shadow:0 10px 22px rgba(82,49,122,.10);
}
.site-header button:hover{
  color:#ff2e63!important;
  transform:translateY(-1px);
}
.site-header .search-box button{
  box-shadow:none;
  border-color:transparent!important;
}
.site-header .search-box button:hover{
  transform:none;
}
.site-header .search-box .tabs button{
  background:transparent;
  color:#6f7890!important;
}
.site-header .search-box .tabs button.active{
  color:#fff!important;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
}
.site-header .search-box .submit{
  background:linear-gradient(135deg,#7c4dff,#00b7ff);
  color:#fff!important;
  box-shadow:-8px 0 24px rgba(0,183,255,.18);
}
.site-header .search-box .submit:hover{
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}

.mainnav{
  position:relative;
  z-index:9;
  background:linear-gradient(90deg,#ff2e63 0%,#ff9f1c 20%,#ffd166 34%,#00d084 52%,#00b7ff 70%,#7c4dff 88%,#ff4fb8 100%);
  border-radius:0;
  border:0;
  box-shadow:0 18px 34px rgba(124,77,255,.18);
}
.mainnav .container{
  gap:4px;
}
.mainnav a{
  height:58px;
  border-radius:0;
  color:#fff;
  text-shadow:0 1px 10px rgba(28,10,55,.24);
}
.mainnav a iconify-icon{
  font-size:19px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
}
.mainnav a:hover,
.mainnav a.active{
  background:rgba(255,255,255,.23);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.mainnav a.active::after{
  width:42px;
  height:4px;
  background:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.88);
}
.mainnav .hot{
  background:#111827;
  color:#ffd166;
  border:1px solid rgba(255,255,255,.4);
}

.hero-section{
  margin-top:18px;
  padding-top:24px;
  padding-bottom:24px;
}
.hero-section::before{
  top:0;
  bottom:0;
  background:
    linear-gradient(100deg,rgba(255,46,99,.22),rgba(255,159,28,.18) 32%,rgba(0,208,132,.16) 54%,rgba(0,183,255,.18) 74%,rgba(124,77,255,.20)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 28px);
}
.hero-swiper{
  height:460px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 28px 70px rgba(34,20,86,.28);
}
.hero-slide{
  align-items:center;
}
.hero-slide::after{
  z-index:2;
  height:100%;
  background:
    linear-gradient(90deg,rgba(22,7,42,.88) 0%,rgba(22,7,42,.62) 43%,rgba(22,7,42,.16) 78%),
    linear-gradient(0deg,rgba(0,0,0,.42),transparent 48%);
}
.hero-art{
  display:block!important;
  z-index:3;
  right:26px;
  width:360px;
  height:360px;
  opacity:.24;
}
.hero-photo{
  z-index:1;
  opacity:.72;
  transform:scale(1.03);
}
.hero-slide .max-w-\[55\%\]{
  left:36px;
  right:auto;
  bottom:42px;
  max-width:560px!important;
  z-index:4;
}
.hero-tag{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);
  font-size:13px;
  font-weight:800;
  color:#fff;
}
.hero-h1{
  margin:14px 0 10px;
  font-size:44px;
  letter-spacing:0;
  line-height:1.12;
  text-shadow:0 10px 28px rgba(0,0,0,.36);
}
.hero-desc{
  max-width:520px;
  font-size:16px;
  line-height:1.72;
  color:rgba(255,255,255,.9);
}
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 20px;
}
.hero-stats span{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.22);
  font-size:12px;
  font-weight:800;
  color:#fff;
}
.hero-actions{
  display:flex!important;
  flex-wrap:wrap;
  gap:10px;
}
.btn-primary,
.btn-ghost{
  min-height:44px;
  clip-path:none;
  border-radius:999px;
}
.btn-primary{
  background:linear-gradient(135deg,#ffd166,#ff9f1c 48%,#ff2e63);
  color:#fff;
  box-shadow:0 16px 34px rgba(255,46,99,.34);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#00d084,#00b7ff);
}
.btn-ghost{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
}
.swiper-button-next,
.swiper-button-prev{
  width:42px;
  height:42px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px);
}
.swiper-pagination-bullet-active{
  background:#ffd166;
  box-shadow:0 0 18px rgba(255,209,102,.82);
}

.hero-side{
  height:460px;
  min-height:460px;
}
.aside-card{
  position:relative;
  border-radius:8px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 42px rgba(61,34,114,.14);
  backdrop-filter:blur(16px);
}
.aside-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#ff2e63,#ff9f1c,#00d084,#00b7ff,#7c4dff);
}
.aside-card-head{
  border-bottom:1px solid rgba(107,88,147,.14);
}
.aside-card-head h3 iconify-icon{
  color:#ff2e63;
}
.aside-list .item .rank{
  border-radius:6px;
  color:#fff;
}
.aside-list .item:nth-child(1) .rank{background:linear-gradient(135deg,#ff2e63,#ff9f1c);}
.aside-list .item:nth-child(2) .rank{background:linear-gradient(135deg,#7c4dff,#00b7ff);}
.aside-list .item:nth-child(3) .rank{background:linear-gradient(135deg,#00d084,#00b7ff);}
.aside-list .item:hover{
  color:#ff2e63;
}

.quick-grid{
  grid-template-columns:repeat(8,1fr);
  gap:10px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.70);
  border-radius:8px;
  padding:14px;
  box-shadow:0 18px 44px rgba(77,43,129,.13);
  backdrop-filter:blur(16px);
}
.quick-item{
  min-height:102px;
  border-radius:8px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.62);
}
.quick-item:hover{
  background:#fff;
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(80,45,140,.14);
}
.quick-icon{
  width:54px;
  height:54px;
  border-radius:8px;
  box-shadow:0 12px 24px rgba(31,28,66,.16);
}
.quick-icon::after,
.app-icon::after,
.rank-list .ic::after{
  background:linear-gradient(135deg,rgba(255,255,255,.50),transparent 42%,rgba(0,0,0,.08));
}
.quick-icon iconify-icon{font-size:28px;}
.qi-hot{background:linear-gradient(135deg,#ff2e63,#ff9f1c);}
.qi-app{background:linear-gradient(135deg,#00b7ff,#7c4dff);}
.qi-rank{background:linear-gradient(135deg,#ffd166,#ff7a18);}
.qi-pack{background:linear-gradient(135deg,#7c4dff,#ff4fb8);}
.qi-tool{background:linear-gradient(135deg,#00d084,#00b7ff);}
.qi-news{background:linear-gradient(135deg,#ff4fb8,#7c4dff);}
.qi-safe{background:linear-gradient(135deg,#00d084,#63e6be);}
.qi-gift{background:linear-gradient(135deg,#ff9f1c,#ff2e63);}
.quick-item span:last-child{
  color:#20233d;
  font-size:14px;
  font-weight:900;
}

#games,
#game-collection,
#apps,
#app-collection,
#news,
#rank{
  margin-top:34px;
  padding-top:26px;
  padding-bottom:28px;
}
#games::before{background:linear-gradient(100deg,rgba(255,46,99,.12),rgba(255,159,28,.12),transparent 72%);}
#game-collection::before{background:linear-gradient(100deg,rgba(255,209,102,.20),rgba(0,208,132,.12),transparent 72%);}
#apps::before{background:linear-gradient(100deg,rgba(0,183,255,.14),rgba(124,77,255,.12),transparent 72%);}
#app-collection::before{background:linear-gradient(100deg,rgba(124,77,255,.14),rgba(255,79,184,.13),transparent 72%);}
#news::before{background:linear-gradient(100deg,rgba(255,79,184,.13),rgba(255,209,102,.12),transparent 72%);}
#rank::before{background:linear-gradient(100deg,rgba(255,159,28,.15),rgba(0,183,255,.13),rgba(124,77,255,.10));}

.sec-title{
  gap:16px;
  border-bottom:0;
  padding-bottom:16px;
  margin-bottom:18px;
}
.sec-title .left{
  min-width:240px;
}
.sec-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  box-shadow:0 14px 28px rgba(42,23,100,.18);
}
.sec-icon iconify-icon{
  font-size:28px;
}
.sec-icon.games{background:linear-gradient(135deg,#ff2e63,#ff9f1c);}
.sec-icon.collection-icon{background:linear-gradient(135deg,#ffd166,#00d084);}
.sec-icon.apps{background:linear-gradient(135deg,#00b7ff,#7c4dff);}
.sec-icon.app-collection-icon{background:linear-gradient(135deg,#7c4dff,#ff4fb8);}
.sec-icon.news{background:linear-gradient(135deg,#ff4fb8,#ff9f1c);}
.sec-icon.rank{background:linear-gradient(135deg,#ffd166,#ff2e63);}
.sec-title h2{
  color:#16182f;
  font-size:28px;
  letter-spacing:0;
}
.sec-title h2 small{
  display:block;
  margin-left:0;
  margin-top:3px;
  color:#69718a;
  font-size:13px;
}
.sec-kicker{
  border-radius:6px;
  box-shadow:0 8px 18px rgba(255,46,99,.22);
}
.sec-title .tabs{
  flex:1;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.sec-title .tabs button{
  border-right:0;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.70);
  padding:8px 14px;
  color:#596176;
  box-shadow:0 8px 18px rgba(64,38,118,.07);
}
.sec-title .tabs button:hover,
.sec-title .tabs button.active{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
  transform:translateY(-1px);
}
.sec-title .more{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.70);
  color:#5d667d;
  font-weight:800;
}
.sec-title .more:hover{
  color:#fff;
  background:linear-gradient(135deg,#00d084,#00b7ff);
}

.card-grid{
  gap:16px;
}
.app-card{
  position:relative;
  border-radius:8px;
  padding:15px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 16px 36px rgba(65,42,120,.12);
  backdrop-filter:blur(14px);
}
.app-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#ff2e63,#ff9f1c,#00d084,#00b7ff,#7c4dff);
}
.app-card:hover{
  border-color:rgba(255,255,255,.94);
  transform:translateY(-5px);
  box-shadow:0 24px 52px rgba(61,38,120,.18);
}
.app-icon{
  width:68px;
  height:68px;
  border-radius:8px;
  box-shadow:0 14px 28px rgba(40,27,91,.16);
}
.app-icon iconify-icon{
  position:relative;
  z-index:1;
  font-size:36px;
}
.card-grid .app-card:nth-child(8n+1) .app-icon{background:linear-gradient(135deg,#ff2e63,#ff9f1c);}
.card-grid .app-card:nth-child(8n+2) .app-icon{background:linear-gradient(135deg,#7c4dff,#00b7ff);}
.card-grid .app-card:nth-child(8n+3) .app-icon{background:linear-gradient(135deg,#00d084,#00b7ff);}
.card-grid .app-card:nth-child(8n+4) .app-icon{background:linear-gradient(135deg,#ff4fb8,#7c4dff);}
.card-grid .app-card:nth-child(8n+5) .app-icon{background:linear-gradient(135deg,#ffd166,#ff7a18);}
.card-grid .app-card:nth-child(8n+6) .app-icon{background:linear-gradient(135deg,#00b7ff,#00d084);}
.card-grid .app-card:nth-child(8n+7) .app-icon{background:linear-gradient(135deg,#ff9f1c,#ff2e63);}
.card-grid .app-card:nth-child(8n) .app-icon{background:linear-gradient(135deg,#7c4dff,#ff4fb8);}
.app-info .name{
  color:#1b1e35;
  font-size:17px;
}
.app-card .desc{
  color:#616a80;
}
.tag-pill{
  border-radius:999px;
  background:rgba(255,46,99,.10);
  color:#ff2e63;
}
.tag-pill.green{background:rgba(0,208,132,.12);color:#009a6a;}
.tag-pill.blue{background:rgba(0,183,255,.12);color:#0089c4;}
.tag-pill.purple{background:rgba(124,77,255,.12);color:#6f3cff;}
.tag-pill.gold{background:rgba(255,159,28,.16);color:#c96d00;}
.dl-btn{
  background:linear-gradient(135deg,#17192f,#33365f);
  color:#fff;
}
.dl-btn:hover{
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  transform:translateY(-1px);
}

.collection{
  height:240px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 42px rgba(47,31,98,.15);
}
.collection:hover{
  box-shadow:0 26px 58px rgba(50,32,100,.22);
}
.collection .bg::after{
  background:
    linear-gradient(180deg,rgba(13,11,31,.06),rgba(13,11,31,.62)),
    linear-gradient(120deg,rgba(255,46,99,.35),rgba(0,183,255,.26) 52%,rgba(124,77,255,.34));
}
.collection .badge{
  border-radius:999px;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  box-shadow:0 10px 24px rgba(255,46,99,.26);
}
.collection h3{
  font-size:21px;
}

.news-feature,
.news-list,
.rank-card,
.friend-links{
  border-radius:8px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 16px 38px rgba(58,38,112,.12);
  backdrop-filter:blur(14px);
}
.news-feature:hover,
.news-list:hover,
.rank-card:hover,
.friend-links:hover{
  border-color:rgba(255,255,255,.94);
  box-shadow:0 24px 52px rgba(58,38,112,.18);
}
.news-feature .cover .label{
  border-radius:999px;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
.news-item .num,
.rank-list .rk{
  border-radius:6px;
}
.news-item:nth-child(1) .num{background:linear-gradient(135deg,#ff2e63,#ff9f1c);}
.news-item:nth-child(2) .num{background:linear-gradient(135deg,#7c4dff,#00b7ff);}
.news-item:nth-child(3) .num{background:linear-gradient(135deg,#00d084,#00b7ff);}

#rank .rank-card{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 16px 38px rgba(58,38,112,.12);
}
#rank .rank-card:first-child .rank-head,
#rank .rank-card:last-child .rank-head{
  background:linear-gradient(100deg,#ff2e63,#ff9f1c 36%,#00b7ff 72%,#7c4dff);
  box-shadow:0 16px 28px rgba(124,77,255,.22);
}
#rank .rank-head h3,
#rank .rank-head p,
#rank .rank-head h3 iconify-icon{
  color:#fff;
}
#rank .rank-tabs button{
  color:rgba(255,255,255,.78);
  border-right:1px solid rgba(255,255,255,.22);
}
#rank .rank-tabs button.active{
  color:#17192f;
  background:#fff;
}
#rank .rank-list .row{
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.72);
}
#rank .rank-list .row:hover{
  background:#fff;
}
#rank .rank-list .row.top-hero{
  background:linear-gradient(110deg,rgba(255,46,99,.14),rgba(255,209,102,.16),rgba(0,183,255,.14));
  border-color:rgba(255,255,255,.82);
}
.rank-list .ic,
#rank .rank-list .ic{
  display:grid;
  place-items:center;
  color:#fff;
  border:0;
}
.rank-list .ic iconify-icon{
  position:relative;
  z-index:1;
  font-size:24px;
}
.rank-list .row:nth-child(8n+1) .ic{background:linear-gradient(135deg,#ff2e63,#ff9f1c);}
.rank-list .row:nth-child(8n+2) .ic{background:linear-gradient(135deg,#ffd166,#ff7a18);}
.rank-list .row:nth-child(8n+3) .ic{background:linear-gradient(135deg,#7c4dff,#00b7ff);}
.rank-list .row:nth-child(8n+4) .ic{background:linear-gradient(135deg,#00d084,#00b7ff);}
.rank-list .row:nth-child(8n+5) .ic{background:linear-gradient(135deg,#ff4fb8,#7c4dff);}
.rank-list .row:nth-child(8n+6) .ic{background:linear-gradient(135deg,#00b7ff,#00d084);}
.rank-list .row:nth-child(8n+7) .ic{background:linear-gradient(135deg,#ff9f1c,#ff2e63);}
.rank-list .row:nth-child(8n) .ic{background:linear-gradient(135deg,#7c4dff,#ff4fb8);}
#rank .rank-list .dl-mini{
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  color:#fff;
  border:0;
}

.friend-links h4 iconify-icon{color:#7c4dff;}
.friend-links .links a{
  color:#626b84;
  font-weight:700;
}
.friend-links .links a:hover{color:#ff2e63;}

.site-footer{
  background:
    linear-gradient(120deg,rgba(18,14,42,.96),rgba(48,20,84,.96) 48%,rgba(10,70,112,.94)),
    linear-gradient(90deg,#ff2e63,#00b7ff);
  color:rgba(255,255,255,.66);
  border-top:1px solid rgba(255,255,255,.15);
}
.site-footer a{color:rgba(255,255,255,.70);}
.site-footer a:hover{color:#ffd166;}
.site-footer .copyright{
  border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.48);
}
.beian-badge{
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.58);
  border-radius:999px;
}

.fab{
  border-radius:8px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 20px 42px rgba(59,38,120,.16);
  backdrop-filter:blur(12px);
}
.fab button:hover{
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}

@media (max-width:1100px){
  .quick-grid{grid-template-columns:repeat(4,1fr);}
  .hero-side{
    height:auto;
    min-height:0;
  }
  .sec-title{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .sec-title .tabs{
    order:3;
    justify-content:flex-start;
    width:100%;
  }
}
@media (max-width:760px){
  .site-header .container{
    gap:10px;
  }
  .hero-swiper{height:360px;}
  .hero-slide .max-w-\[55\%\]{
    left:18px;
    right:18px;
    bottom:22px;
    max-width:none!important;
  }
  .hero-h1{font-size:30px;}
  .hero-desc{font-size:14px;}
  .hero-stats{gap:6px;margin:12px 0;}
  .hero-actions a{padding:10px 15px;font-size:13px;}
  .hero-art{display:none!important;}
  .quick-grid{grid-template-columns:repeat(2,1fr);}
  .quick-item{min-height:92px;}
  .card-grid{grid-template-columns:1fr;}
  .collection-grid{grid-template-columns:1fr;}
  .sec-title .left{min-width:0;}
  .sec-title h2{font-size:24px;}
  .sec-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
}

/* =========================================================
   简化首屏：无搜索、无轮播导航
   ========================================================= */
.header-decor{
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.decor-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 12px 24px rgba(57,32,112,.14);
}
.decor-pill iconify-icon{
  font-size:18px;
}
.decor-pill.hot{
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
}
.decor-pill.safe{
  background:linear-gradient(135deg,#00d084,#00b7ff);
}
.decor-pill.fast{
  background:linear-gradient(135deg,#7c4dff,#ff4fb8);
}

.header-mini{
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:0;
  color:#7a8298;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.mini-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.mini-item iconify-icon{
  color:#ff5f7f;
  font-size:17px;
}
.mini-item:nth-child(3) iconify-icon{
  color:#00a8d8;
}
.mini-item:nth-child(5) iconify-icon{
  color:#00a970;
}
.mini-line{
  width:1px;
  height:14px;
  background:rgba(122,130,152,.24);
}

.hero-banner{
  position:relative;
  height:460px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 28px 70px rgba(34,20,86,.24);
  background:#111827;
}
.hero-banner .swiper-wrapper,
.hero-banner .swiper-slide{
  height:100%;
}
.hero-banner .swiper-slide{
  position:relative;
  overflow:hidden;
}
.hero-banner-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}
.hero-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:118px;
  padding:22px 28px 24px;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.86) 34%,rgba(0,0,0,.92));
}
.hero-caption h2{
  margin:0 0 7px;
  font-size:28px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:0;
  text-shadow:0 2px 10px rgba(0,0,0,.34);
}
.hero-caption p{
  max-width:720px;
  margin:0;
  color:rgba(255,255,255,.86);
  font-size:14px;
  line-height:1.65;
}
.hero-side .aside-card{
  padding:12px 14px;
  overflow:visible;
}
.hero-side .aside-card-head{
  margin-bottom:6px;
  padding-bottom:6px;
}
.hero-side .aside-card-head h3{
  font-size:16px;
  line-height:1.25;
}
.hero-side .aside-list{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:visible;
}
.hero-side .aside-list .item{
  min-height:26px;
  padding:4px 0;
  line-height:1.25;
}
.hero-side .aside-list .item .rank{
  width:18px;
  height:18px;
  font-size:11px;
}
.hero-side .aside-list .item .name{
  min-width:0;
}
.hero-side .aside-list .item .hot{
  flex-shrink:0;
}
.swiper-pagination,
.swiper-button-next,
.swiper-button-prev{
  display:none!important;
}

@media (max-width:1100px){
  .hero-banner{
    height:420px;
  }
}
@media (max-width:760px){
  .hero-banner{
    height:320px;
  }
  .hero-caption{
    min-height:104px;
    padding:17px 18px 18px;
  }
  .hero-caption h2{
    font-size:22px;
  }
  .hero-caption p{
    font-size:13px;
    line-height:1.5;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* =========================================================
   手机端导航与横向分类
   ========================================================= */
.mobile-menu-toggle{
  display:none;
  width:40px;
  height:40px;
  flex:0 0 40px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#20233d;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 10px 22px rgba(82,49,122,.10);
}
.mobile-menu-toggle iconify-icon{
  font-size:24px;
}
.mobile-menu-toggle .menu-close-icon{
  display:none;
}
.mobile-menu-toggle.is-open .menu-open-icon{
  display:none;
}
.mobile-menu-toggle.is-open .menu-close-icon{
  display:block;
}

@media (max-width:760px){
  body{
    background-attachment:scroll;
  }
  .topbar{
    font-size:11px;
  }
  .topbar .container{
    justify-content:center;
    height:30px;
  }
  .site-header{
    position:sticky;
    top:0;
    z-index:60;
  }
  .site-header .container{
    padding-top:10px;
    padding-bottom:10px;
  }
  .site-header .w-11{
    width:38px!important;
    height:38px!important;
  }
  .brand-text{
    font-size:22px!important;
  }
  .mobile-menu-toggle{
    display:inline-flex;
  }
  .mainnav{
    display:none;
    position:sticky;
    top:58px;
    z-index:55;
    background:rgba(255,255,255,.92);
    border-bottom:1px solid rgba(255,255,255,.82);
    box-shadow:0 18px 36px rgba(44,28,92,.16);
    backdrop-filter:blur(16px);
  }
  .mainnav.open{
    display:block;
  }
  .mainnav .nav-inner{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:10px 16px 14px;
    overflow:visible;
  }
  .mainnav a{
    height:42px;
    justify-content:center;
    padding:0 10px!important;
    border-radius:8px;
    color:#20233d;
    background:rgba(255,255,255,.72);
    font-size:14px;
    text-shadow:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.70);
  }
  .mainnav a iconify-icon{
    font-size:18px;
    filter:none;
  }
  .mainnav a:hover,
  .mainnav a.active{
    color:#fff;
    background:linear-gradient(135deg,#ff2e63,#7c4dff);
  }
  .mainnav a.active::after{
    display:none;
  }
  .mainnav .hot{
    top:2px;
    right:4px;
    padding:1px 4px;
    font-size:8px;
  }

  .hero-section{
    margin-top:0;
    padding-top:14px;
    padding-bottom:16px;
  }
  .hero-section .grid{
    gap:10px;
  }
  .hero-banner{
    height:292px;
    box-shadow:0 18px 42px rgba(34,20,86,.20);
  }
  .hero-caption{
    min-height:96px;
    padding:15px 16px 16px;
  }
  .hero-caption h2{
    font-size:21px;
    line-height:1.25;
  }
  .hero-side{
    display:grid;
    grid-template-rows:auto auto!important;
    gap:10px;
  }
  .hero-side .aside-card{
    padding:12px;
  }
  .hero-side .aside-list .item{
    min-height:28px;
  }

  #games,
  #game-collection,
  #apps,
  #app-collection,
  #news,
  #rank{
    margin-top:20px;
    padding-top:16px;
    padding-bottom:16px;
  }
  .sec-title{
    display:block;
    margin-bottom:12px;
    padding-bottom:8px;
  }
  .sec-title .left{
    display:flex;
    min-width:0;
    margin-bottom:10px;
  }
  .sec-title h2{
    font-size:22px;
    line-height:1.2;
  }
  .sec-title h2 small{
    margin-top:4px;
    font-size:12px;
  }
  .sec-icon{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .sec-icon iconify-icon{
    font-size:24px;
  }
  .sec-title .tabs{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    width:100%;
    max-width:100%;
    gap:8px;
    padding:2px 0 8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sec-title .tabs::-webkit-scrollbar{
    display:none;
  }
  .sec-title .tabs button{
    flex:0 0 auto;
    white-space:nowrap;
    padding:7px 12px;
    font-size:13px;
  }
  .sec-title .more{
    display:none;
  }

  .app-card{
    padding:12px;
  }
  .app-icon{
    width:56px;
    height:56px;
  }
  .app-icon iconify-icon{
    font-size:30px;
  }
  .app-info .name{
    font-size:15px;
  }
  .app-info .meta,
  .app-card .desc{
    font-size:12px;
  }
  .app-card .desc{
    min-height:0;
    margin:10px 0;
  }
  .tag-pill,
  .dl-btn{
    font-size:12px;
  }
  .dl-btn{
    padding:6px 11px;
  }

  .collection{
    height:205px;
  }
  .collection h3{
    font-size:18px;
  }
  .collection .sub{
    font-size:12px;
  }

  .news-feature .cover{
    height:160px;
  }
  .news-feature h3{
    font-size:17px;
  }
  .news-list{
    padding:4px 12px;
  }
  .news-item h4{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .rank-card{
    padding:12px;
  }
  .rank-head{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .rank-tabs{
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .rank-tabs::-webkit-scrollbar{
    display:none;
  }
  .rank-tabs button{
    flex:0 0 auto;
    padding:4px 10px;
  }
  #rank .rank-list .row{
    padding:9px;
  }
  .rank-list .ic,
  #rank .rank-list .ic{
    width:38px;
    height:38px;
  }
  .rank-list .body .name{
    font-size:13px;
  }
  .rank-list .dl-mini{
    width:26px;
    height:26px;
  }

  .friend-links{
    padding:12px;
  }
  .friend-links .links{
    gap:9px 14px;
  }
  .site-footer{
    padding:18px 0 12px;
    margin-top:20px!important;
    font-size:12px;
    line-height:1.55;
  }
  .site-footer .grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 12px;
  }
  .site-footer .grid > div:first-child{
    grid-column:1 / -1;
  }
  .site-footer .grid > div:first-child p{
    margin:0;
    font-size:12px;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .site-footer .grid > div:first-child .flex.items-center{
    margin-bottom:6px;
  }
  .site-footer .grid > div:first-child .flex.gap-2{
    margin-top:8px;
  }
  .site-footer .grid > div:first-child .flex.gap-2 a{
    width:30px!important;
    height:30px!important;
  }
  .site-footer h5{
    margin-bottom:6px!important;
    font-size:12px!important;
  }
  .site-footer ul{
    line-height:1.5;
  }
  .site-footer li{
    margin-top:0!important;
  }
  .site-footer .copyright{
    margin-top:12px;
    padding-top:10px;
    gap:6px;
    font-size:11px;
    line-height:1.45;
  }
  .beian-icons{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
  }
  .beian-badge{
    padding:2px 6px;
    font-size:10px;
  }
  .fab{
    right:10px;
    bottom:18px;
    display:none;
  }
  .fab button{
    width:38px;
    height:38px;
  }
}

/* =========================================================
   游戏 / 软件列表页
   ========================================================= */
.list-page{
  padding-top:22px;
}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:6px;
  color:#747d95;
  font-size:13px;
  margin-bottom:14px;
}
.breadcrumb a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#596176;
  font-weight:700;
}
.breadcrumb a:hover{
  color:#ff2e63;
}
.category-panel,
.resource-panel{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  box-shadow:0 16px 38px rgba(58,38,112,.12);
  backdrop-filter:blur(14px);
}
.category-panel{
  padding:16px 18px;
}
.category-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px dashed rgba(107,88,147,.16);
}
.category-row:first-child{
  padding-top:0;
}
.category-row:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.category-row .label{
  width:88px;
  flex:0 0 88px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#242842;
  font-size:14px;
  font-weight:900;
}
.category-row .label iconify-icon{
  color:#ff2e63;
}
.category-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.category-tags a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  color:#626b84;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.78);
  font-size:13px;
  font-weight:800;
}
.category-tags a:hover,
.category-tags a.active{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
.list-layout{
  margin-top:18px;
}
.resource-panel{
  padding:16px;
}
.resource-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:4px 4px 14px;
  border-bottom:1px solid rgba(107,88,147,.14);
}
.resource-head h2{
  display:flex;
  align-items:center;
  gap:7px;
  color:#17192f;
  font-size:22px;
  font-weight:900;
}
.resource-head h2 iconify-icon{
  color:#ff2e63;
}
.resource-head p{
  color:#7a8298;
  font-size:13px;
  margin-top:4px;
}
.resource-list{
  display:flex;
  flex-direction:column;
}
.resource-item{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px 4px;
  border-bottom:1px dashed rgba(107,88,147,.16);
}
.resource-item:last-child{
  border-bottom:0;
}
.resource-item > img{
  width:72px;
  height:72px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 12px 24px rgba(40,27,91,.13);
}
.resource-body{
  min-width:0;
}
.resource-body h3{
  display:flex;
  align-items:center;
  gap:8px;
  color:#1b1e35;
  font-size:17px;
  font-weight:900;
}
.resource-body h3 span{
  padding:3px 8px;
  border-radius:999px;
  color:#ff2e63;
  background:rgba(255,46,99,.10);
  font-size:11px;
  font-weight:900;
}
.resource-body p{
  margin-top:6px;
  color:#667088;
  font-size:13px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.resource-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
  color:#8a93aa;
  font-size:12px;
}
.resource-meta span{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.resource-btn{
  min-width:74px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  font-size:13px;
  font-weight:900;
  box-shadow:0 12px 24px rgba(255,46,99,.18);
}
.resource-btn:hover{
  color:#fff;
  background:linear-gradient(135deg,#7c4dff,#00b7ff);
}
.pager{
  display:flex;
  justify-content:center;
  gap:8px;
  padding-top:16px;
  border-top:1px solid rgba(107,88,147,.12);
}
.pager a{
  min-width:34px;
  height:34px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(255,255,255,.66);
  color:#626b84;
  border:1px solid rgba(255,255,255,.78);
  font-size:13px;
  font-weight:800;
}
.pager a.active,
.pager a:hover{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
.pager a.disabled{
  opacity:.45;
  pointer-events:none;
}
@media (max-width:760px){
  .list-page{
    padding-top:14px;
  }
  .breadcrumb{
    margin-bottom:10px;
    font-size:12px;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
  }
  .breadcrumb::-webkit-scrollbar{
    display:none;
  }
  .category-panel{
    padding:12px;
  }
  .category-row{
    display:block;
    padding:10px 0;
  }
  .category-row .label{
    width:auto;
    margin-bottom:8px;
  }
  .category-tags{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .category-tags::-webkit-scrollbar{
    display:none;
  }
  .category-tags a{
    flex:0 0 auto;
  }
  .resource-panel{
    padding:12px;
  }
  .resource-head{
    display:block;
    padding-bottom:10px;
  }
  .resource-head h2{
    font-size:20px;
  }
  .resource-item{
    grid-template-columns:58px minmax(0,1fr);
    gap:10px;
    padding:13px 0;
  }
  .resource-item > img{
    width:58px;
    height:58px;
    border-radius:14px;
  }
  .resource-body h3{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
    font-size:15px;
  }
  .resource-body p{
    font-size:12px;
    -webkit-line-clamp:2;
  }
  .resource-meta{
    gap:7px;
    font-size:11px;
  }
  .resource-btn{
    grid-column:2;
    justify-self:start;
    min-width:68px;
    height:30px;
    font-size:12px;
  }
  .pager{
    flex-wrap:wrap;
    gap:6px;
  }
}

/* =========================================================
   游戏 / 软件详情页
   ========================================================= */
.detail-page{
  padding-top:22px;
}
.detail-hero,
.detail-info-panel,
.detail-section{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  box-shadow:0 16px 38px rgba(58,38,112,.12);
  backdrop-filter:blur(14px);
}
.detail-hero{
  display:grid;
  grid-template-columns:104px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:22px;
  position:relative;
  overflow:hidden;
}
.detail-hero::after{
  content:"";
  position:absolute;
  right:-68px;
  bottom:-80px;
  width:280px;
  height:210px;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(255,46,99,.24),rgba(255,209,102,.22),rgba(0,183,255,.20));
  transform:rotate(-14deg);
  pointer-events:none;
}
.detail-icon{
  width:104px;
  height:104px;
  border-radius:22px;
  object-fit:cover;
  box-shadow:0 18px 34px rgba(40,27,91,.16);
  position:relative;
  z-index:1;
}
.detail-summary{
  min-width:0;
  position:relative;
  z-index:1;
}
.detail-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.detail-title-row h1{
  color:#17192f;
  font-size:30px;
  font-weight:900;
  letter-spacing:0;
}
.detail-badge{
  height:24px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
  font-size:12px;
  font-weight:900;
}
.detail-summary p{
  margin-top:8px;
  color:#626b84;
  font-size:14px;
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.detail-tags span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  color:#596176;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.78);
  font-size:12px;
  font-weight:800;
}
.detail-tags iconify-icon{
  color:#ff2e63;
}
.detail-download{
  min-width:132px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  box-shadow:0 14px 26px rgba(255,46,99,.20);
  font-size:15px;
  font-weight:900;
  position:relative;
  z-index:1;
}
.detail-download:hover{
  color:#fff;
  background:linear-gradient(135deg,#7c4dff,#00b7ff);
}
.detail-info-panel{
  margin-top:16px;
  padding:16px;
}
.detail-info-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.detail-info-grid div{
  min-height:62px;
  padding:10px;
  border-radius:8px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.74);
}
.detail-info-grid span{
  display:block;
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.detail-info-grid strong{
  display:block;
  margin-top:5px;
  color:#252941;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-section{
  margin-top:16px;
  padding:18px;
}
.detail-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid rgba(107,88,147,.14);
}
.detail-section-title h2{
  display:flex;
  align-items:center;
  gap:7px;
  color:#17192f;
  font-size:21px;
  font-weight:900;
}
.detail-section-title h2 iconify-icon{
  color:#ff2e63;
}
.screenshot-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.screenshot-row img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 14px 28px rgba(40,27,91,.12);
}
.detail-content{
  padding-top:12px;
  color:#566077;
  font-size:14px;
  line-height:1.85;
}
.detail-content p + p{
  margin-top:10px;
}
.update-list{
  margin-top:12px;
  display:grid;
  gap:9px;
  color:#566077;
  font-size:14px;
  line-height:1.65;
}
.update-list li{
  display:flex;
  gap:8px;
}
.update-list li::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  margin-top:9px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.related-grid a{
  min-width:0;
  padding:12px;
  border-radius:8px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.76);
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
}
.related-grid img{
  grid-row:1/3;
  width:48px;
  height:48px;
  border-radius:12px;
  object-fit:cover;
}
.related-grid span{
  min-width:0;
  color:#252941;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.related-grid em{
  margin-top:3px;
  color:#8a93aa;
  font-size:12px;
  font-style:normal;
}
.related-grid a:hover span{
  color:#ff2e63;
}

@media (max-width:900px){
  .detail-info-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .detail-page{
    padding-top:14px;
  }
  .detail-hero{
    grid-template-columns:72px minmax(0,1fr);
    gap:12px;
    padding:15px;
  }
  .detail-icon{
    width:72px;
    height:72px;
    border-radius:16px;
  }
  .detail-title-row h1{
    font-size:22px;
  }
  .detail-summary p{
    font-size:13px;
  }
  .detail-download{
    grid-column:1/3;
    width:100%;
    height:38px;
    margin-top:2px;
  }
  .detail-info-panel,
  .detail-section{
    padding:12px;
  }
  .detail-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .detail-section-title h2{
    font-size:19px;
  }
  .screenshot-row{
    display:flex;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .screenshot-row::-webkit-scrollbar{
    display:none;
  }
  .screenshot-row img{
    flex:0 0 82%;
  }
  .related-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   详情页第二版：参考下载站详情结构
   ========================================================= */
.detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:18px;
  align-items:start;
}
.detail-main{
  min-width:0;
}
.detail-sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
  position:sticky;
  top:14px;
}
.detail-hero,
.detail-anchor-bar,
.detail-side-card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.74);
  border-radius:8px;
  box-shadow:0 16px 38px rgba(58,38,112,.12);
  backdrop-filter:blur(14px);
}
.detail-hero{
  display:block;
  padding:20px;
}
.detail-hero::after{
  display:none;
}
.detail-app-head{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:18px;
  align-items:center;
}
.detail-title-row h1{
  font-size:31px;
}
.detail-badge{
  gap:4px;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
}
.detail-badge.blue{
  background:linear-gradient(135deg,#00b7ff,#7c4dff);
}
.detail-quick-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.detail-quick-grid div{
  min-height:70px;
  padding:12px;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.78);
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:8px;
  align-items:center;
}
.detail-quick-grid iconify-icon{
  grid-row:1/3;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
  font-size:18px;
}
.detail-quick-grid span{
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.detail-quick-grid strong{
  min-width:0;
  color:#252941;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-anchor-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  padding:10px;
}
.detail-anchor-bar a{
  height:34px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 13px;
  border-radius:999px;
  color:#596176;
  background:rgba(255,255,255,.66);
  font-size:13px;
  font-weight:900;
}
.detail-anchor-bar a:hover{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
.detail-section{
  background:rgba(255,255,255,.82);
}
.detail-section-title span,
.detail-section-title a{
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.detail-section-title a:hover{
  color:#ff2e63;
}
.detail-content.rich p{
  color:#4f596f;
  font-size:14px;
}
/* 软件详情 #intro 正文 RichText：后台正文内图片/视频水平居中（限定 detail-page，不含资讯详情 .article-content） */
.detail-page .intro-section .detail-content.rich img,
.detail-page .intro-section .detail-content.rich video{
  display:block;
  max-width:100%;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}
.detail-page .intro-section .detail-content.rich figure{
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
  text-align:center;
}
.detail-page .intro-section .detail-content.rich figure img{
  margin-left:auto;
  margin-right:auto;
}
.detail-page .intro-section .detail-content.rich p:has(> img:only-child){
  text-align:center;
}
.intro-highlight,
.feature-grid,
.safety-grid{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.intro-highlight{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.intro-highlight div,
.feature-grid div,
.safety-grid div{
  min-width:0;
  padding:14px;
  border-radius:8px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.76);
}
.intro-highlight iconify-icon,
.feature-grid iconify-icon,
.safety-grid iconify-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#00b7ff,#7c4dff);
  font-size:21px;
  margin-bottom:8px;
}
.intro-highlight strong,
.safety-grid strong{
  display:block;
  color:#252941;
  font-size:15px;
  font-weight:900;
}
.intro-highlight span,
.safety-grid span{
  display:block;
  margin-top:5px;
  color:#6d768d;
  font-size:13px;
  line-height:1.55;
}
.detail-shot-actions{
  display:flex;
  gap:6px;
}
.detail-shot-btn{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
  box-shadow:0 10px 20px rgba(124,77,255,.14);
}
.detail-shot-btn:hover{
  background:linear-gradient(135deg,#00d084,#00b7ff);
}
.detail-screenshot-swiper{
  margin-top:14px;
  overflow:hidden;
  border-radius:8px;
}
.detail-shot-slide{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:#111827;
}
.detail-shot-slide img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.detail-shot-slide span{
  position:absolute;
  left:10px;
  bottom:10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:calc(100% - 20px);
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.62);
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(6px);
}
.feature-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.feature-grid h3{
  color:#252941;
  font-size:15px;
  font-weight:900;
}
.feature-grid p{
  margin-top:6px;
  color:#6d768d;
  font-size:13px;
  line-height:1.6;
}
.update-list li{
  align-items:flex-start;
}
.update-list li::before{
  content:none;
}
.update-list li iconify-icon{
  flex:0 0 22px;
  margin-top:1px;
  color:#ff2e63;
  font-size:19px;
}
.safety-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.related-grid a{
  transition:transform .2s ease, box-shadow .2s ease;
}
.related-grid a:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(58,38,112,.12);
}
.detail-side-card{
  padding:15px;
}
.detail-side-card h3{
  display:flex;
  align-items:center;
  gap:6px;
  color:#17192f;
  font-size:17px;
  font-weight:900;
  margin-bottom:12px;
}
.detail-side-card h3 iconify-icon{
  color:#ff2e63;
}
.download-card{
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.70));
}
.download-card img{
  width:76px;
  height:76px;
  object-fit:cover;
  border-radius:18px;
  margin:0 auto 10px;
  box-shadow:0 14px 26px rgba(40,27,91,.14);
}
.download-card h3{
  justify-content:center;
  margin-bottom:3px;
}
.download-card p{
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.download-card a{
  width:100%;
  height:38px;
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  font-size:14px;
  font-weight:900;
}
.download-card a.ios-download{
  background:linear-gradient(135deg,#00b7ff,#7c4dff);
}
.download-card .download-btn--unavailable{
  width:100%;
  height:38px;
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-sizing:border-box;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  color:#8a93aa;
  background:linear-gradient(180deg,#e8ebf0,#d4dae6);
  border:1px solid rgba(107,88,147,.14);
  cursor:not-allowed;
  user-select:none;
  pointer-events:none;
}
.download-card .download-btn--unavailable iconify-icon{
  font-size:1.15em;
  flex-shrink:0;
  opacity:.9;
}
.download-slot-mount{
  display:block;
}
.download-card--mobile-switch .mobile-download-slot--ios{
  display:none;
}
.download-card--mobile-switch.is-apple-client .mobile-download-slot--android{
  display:none;
}
.download-card--mobile-switch.is-apple-client .mobile-download-slot--ios{
  display:block;
}
.side-info-list{
  display:grid;
  gap:8px;
}
.side-info-list div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-bottom:8px;
  border-bottom:1px dashed rgba(107,88,147,.16);
}
.side-info-list div:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.side-info-list dt{
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.side-info-list dd{
  min-width:0;
  color:#33384d;
  font-size:12px;
  font-weight:900;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.side-info-list dd:has(.permission-link){
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  flex-shrink:0;
}
.rating-card{
  text-align:center;
}
.rating-card h3{
  justify-content:center;
}
.rating-card strong{
  display:block;
  color:#ff2e63;
  font-size:42px;
  line-height:1;
  font-weight:900;
}
.rating-stars{
  display:flex;
  justify-content:center;
  gap:2px;
  margin-top:8px;
  color:#ffb300;
}
.rating-card p{
  margin-top:6px;
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.detail-rank-list{
  display:grid;
  gap:9px;
}
.detail-rank-list li{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.detail-rank-list span{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  border-radius:6px;
  color:#fff;
  background:#b8c0d3;
  font-size:12px;
  font-weight:900;
}
.detail-rank-list li:nth-child(1) span{background:linear-gradient(135deg,#ff2e63,#ff9f1c);}
.detail-rank-list li:nth-child(2) span{background:linear-gradient(135deg,#7c4dff,#00b7ff);}
.detail-rank-list li:nth-child(3) span{background:linear-gradient(135deg,#00d084,#00b7ff);}
.detail-rank-list a{
  flex:1;
  min-width:0;
  color:#3b4258;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-rank-list em{
  flex:0 0 auto;
  color:#8a93aa;
  font-size:11px;
  font-style:normal;
}

@media (max-width:1100px){
  .detail-layout{
    grid-template-columns:1fr;
  }
  .detail-sidebar{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .detail-layout{
    gap:14px;
  }
  .detail-hero{
    padding:14px;
  }
  .detail-app-head{
    grid-template-columns:72px minmax(0,1fr);
    gap:12px;
  }
  .detail-title-row h1{
    font-size:21px;
  }
  .detail-badge{
    height:22px;
    font-size:11px;
  }
  .detail-tags{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .detail-tags::-webkit-scrollbar{
    display:none;
  }
  .detail-tags span{
    flex:0 0 auto;
  }
  .detail-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
  }
  .detail-anchor-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .detail-anchor-bar::-webkit-scrollbar{
    display:none;
  }
  .detail-anchor-bar a{
    flex:0 0 auto;
  }
  .detail-section-title{
    gap:10px;
  }
  .detail-section-title span{
    display:none;
  }
  .intro-highlight,
  .feature-grid,
  .safety-grid{
    grid-template-columns:1fr;
  }
  .detail-shot-actions{
    display:none;
  }
  .detail-screenshot-swiper{
    overflow:hidden;
  }
  .detail-sidebar{
    display:flex;
  }
}

/* =========================================================
   详情页信息重排 / 权限弹窗
   ========================================================= */
.basic-info-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.basic-info-grid div{
  min-height:70px;
  padding:12px;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,255,255,.46));
  border:1px solid rgba(255,255,255,.78);
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:8px;
  align-items:center;
}
.basic-info-grid iconify-icon{
  grid-row:1/3;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
  font-size:18px;
}
.basic-info-grid span{
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.basic-info-grid strong{
  min-width:0;
  color:#252941;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.screenshot-section{
  overflow:hidden;
  border-radius:8px;
}
.screenshot-section .detail-section-title{
  position:relative;
  z-index:2;
}
.detail-screenshot-swiper{
  padding:32px 0 42px;
  overflow:visible;
  max-width:100%;
}
.detail-screenshot-swiper .swiper-wrapper{
  align-items:center;
}
.detail-shot-slide{
  width:54%;
  z-index:1;
  box-shadow:0 22px 42px rgba(27,24,61,.22);
  opacity:.86;
  transform:translateY(24px) scale(.88);
  transition:opacity .28s ease, filter .28s ease, transform .28s ease;
}
.detail-shot-slide.swiper-slide-prev,
.detail-shot-slide.swiper-slide-next{
  z-index:2;
}
.detail-shot-slide.swiper-slide-active{
  z-index:5;
  opacity:1;
  transform:translateY(-12px) scale(1.08);
}
.detail-shot-slide img{
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
.detail-shot-slide.swiper-slide-prev img,
.detail-shot-slide.swiper-slide-next img{
  filter:brightness(.78) saturate(.92);
}
.detail-shot-slide.swiper-slide-active img{
  box-shadow:0 30px 58px rgba(27,24,61,.34);
}
.detail-shot-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(0,0,0,.18));
  pointer-events:none;
}
.intro-section .detail-content{
  padding-top:14px;
}
.news-board,
.collection-board{
  background:rgba(255,255,255,.76);
}
.detail-news-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.detail-news-grid a{
  min-width:0;
  border-radius:8px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.76);
  overflow:hidden;
}
.detail-news-grid img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.detail-news-grid strong{
  display:block;
  min-width:0;
  padding:10px 11px 0;
  color:#33384d;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-news-grid span{
  display:block;
  min-width:0;
  padding:5px 11px 11px;
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-news-grid a:hover strong{
  color:#ff2e63;
}
.detail-collection-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.detail-collection-grid a{
  min-width:0;
  border-radius:8px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.76);
  position:relative;
  overflow:hidden;
}
.detail-collection-grid img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.detail-collection-grid strong{
  display:block;
  padding:10px 11px 0;
  color:#252941;
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-collection-grid span{
  display:block;
  padding:5px 11px 11px;
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.guide-board,
.collection-board{
  background:rgba(255,255,255,.78);
}
.detail-guide-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.detail-guide-grid a{
  min-width:0;
  border-radius:8px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.76);
  overflow:hidden;
}
.detail-guide-grid img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.detail-guide-grid strong{
  display:block;
  min-width:0;
  padding:10px 11px 0;
  color:#252941;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-guide-grid span{
  display:block;
  min-width:0;
  padding:5px 11px 11px;
  color:#7a8298;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-guide-grid a:hover strong,
.detail-collection-grid a:hover strong{
  color:#ff2e63;
}
.download-card{
  text-align:left;
}
.download-card h3{
  justify-content:flex-start;
}
.download-card p{
  text-align:left;
}
.install-card ul{
  display:grid;
  gap:9px;
}
.install-card li{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.install-card li iconify-icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#00b7ff,#7c4dff);
  font-size:16px;
}
.install-card li span{
  color:#667088;
  font-size:12px;
  line-height:1.55;
  font-weight:800;
}
.permission-link{
  color:#ff2e63;
  font-size:12px;
  font-weight:900;
}
.permission-link:hover{
  color:#7c4dff;
}
.permission-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  isolation:isolate;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  box-sizing:border-box;
}
body.modal-open{
  overflow:hidden;
}
.permission-modal.open{
  display:flex;
}
.permission-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(12,15,30,.58);
  backdrop-filter:blur(8px);
}
.permission-dialog{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  width:min(760px,100%);
  max-height:min(90vh,760px);
  padding:28px 34px 30px;
  border-radius:8px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 24px 60px rgba(13,18,38,.28);
  overflow:hidden;
}
.permission-dialog h2{
  flex:0 0 auto;
  text-align:center;
  color:#17192f;
  font-size:34px;
  font-weight:900;
}
.permission-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#a5a8b2;
  background:transparent;
  font-size:28px;
}
.permission-close:hover{
  color:#ff2e63;
}
.permission-list{
  flex:1 1 auto;
  min-height:0;
  margin-top:22px;
  padding:0 18px 0 0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-color:#c7c8cc transparent;
  scrollbar-width:thin;
}
.permission-list::-webkit-scrollbar{
  width:6px;
}
.permission-list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#c7c8cc;
}
.permission-item{
  padding:0 0 15px;
}
.permission-item + .permission-item{
  padding-top:2px;
}
.permission-item strong{
  display:block;
  color:#2f333d;
  font-size:18px;
  line-height:1.55;
  font-weight:900;
}
.permission-item span{
  display:block;
  margin-top:6px;
  color:#4f5562;
  font-size:17px;
  line-height:1.8;
}
.permission-confirm{
  flex:0 0 auto;
  width:80%;
  height:56px;
  margin:22px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#3ca9ff,#7c4dff,#f10d0d);
  font-size:24px;
  font-weight:900;
}

@media (max-width:760px){
  .basic-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
  }
  .detail-news-grid,
  .detail-collection-grid,
  .detail-guide-grid{
    grid-template-columns:1fr;
  }
  .permission-dialog{
    padding:24px 18px 22px;
    max-height:min(92vh,760px);
  }
  .permission-dialog h2{
    font-size:28px;
  }
  .permission-list{
    padding-right:10px;
  }
  .permission-item strong{
    font-size:16px;
  }
  .permission-item span{
    font-size:15px;
  }
  .permission-confirm{
    width:100%;
    height:50px;
    font-size:20px;
  }
}

/* =========================================================
   资讯列表页
   ========================================================= */
.news-list-page .news-filter-panel{
  margin-bottom:18px;
}
.news-lite-panel{
  margin-top:18px;
  padding:14px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  box-shadow:0 12px 28px rgba(58,38,112,.10);
  backdrop-filter:blur(14px);
}
.news-topic-strip{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  padding-bottom:10px;
  scrollbar-width:none;
}
.news-topic-strip::-webkit-scrollbar{
  display:none;
}
.news-topic-strip span,
.news-topic-strip a{
  flex:0 0 auto;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 11px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
}
.news-topic-strip span{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
.news-topic-strip a{
  color:#626b84;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.78);
}
.news-topic-strip a:hover{
  color:#fff;
  background:linear-gradient(135deg,#00b7ff,#7c4dff);
}
.news-feature-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.news-feature-row a{
  min-width:0;
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.78);
}
.news-feature-row img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.news-feature-row strong{
  display:block;
  padding:10px 11px 0;
  color:#252941;
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.news-feature-row span{
  display:block;
  padding:5px 11px 11px;
  color:#7a8298;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.news-feature-row a:hover strong{
  color:#ff2e63;
}
.news-list-panel{
  padding:16px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  box-shadow:0 16px 38px rgba(58,38,112,.12);
  backdrop-filter:blur(14px);
}
.news-list-head{
  padding:4px 4px 14px;
  border-bottom:1px solid rgba(107,88,147,.14);
}
.news-list-head h1{
  display:flex;
  align-items:center;
  gap:7px;
  color:#17192f;
  font-size:24px;
  font-weight:900;
  letter-spacing:0;
}
.news-list-head h1 iconify-icon{
  color:#ff2e63;
}
.news-list-head p{
  margin-top:4px;
  color:#7a8298;
  font-size:13px;
}
.news-list-panel .news-list{
  display:flex;
  flex-direction:column;
}
.news-list-item{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:18px 4px;
  border-bottom:1px dashed rgba(107,88,147,.16);
}
.news-list-item:last-child{
  border-bottom:0;
}
.news-list-item .thumb{
  display:block;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 14px 28px rgba(40,27,91,.12);
}
.news-list-item .thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  transition:transform .22s ease;
}
.news-list-item:hover .thumb img{
  transform:scale(1.04);
}
.news-list-item .body{
  min-width:0;
}
.news-list-item h2{
  color:#1b1e35;
  font-size:18px;
  font-weight:900;
  line-height:1.35;
}
.news-list-item h2 a:hover{
  color:#ff2e63;
}
.news-list-item p{
  margin-top:8px;
  color:#667088;
  font-size:13px;
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-list-item .meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.news-list-item .meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.news-list-item .meta iconify-icon{
  color:#ff2e63;
}
.news-list-item .read-more{
  min-width:78px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  font-size:13px;
  font-weight:900;
  box-shadow:0 12px 24px rgba(255,46,99,.16);
}
.news-list-item .read-more:hover{
  color:#fff;
  background:linear-gradient(135deg,#7c4dff,#00b7ff);
}

@media (max-width:900px){
  .news-list-item{
    grid-template-columns:170px minmax(0,1fr);
  }
  .news-list-item .read-more{
    grid-column:2;
    justify-self:start;
  }
}
@media (max-width:760px){
  .news-lite-panel{
    padding:12px;
  }
  .news-feature-row{
    grid-template-columns:1fr;
  }
  .news-list-panel{
    padding:12px;
  }
  .news-list-head h1{
    font-size:21px;
  }
  .news-list-item{
    grid-template-columns:1fr;
    gap:10px;
    padding:14px 0;
  }
  .news-list-item h2{
    font-size:16px;
  }
  .news-list-item p{
    font-size:12px;
  }
  .news-list-item .read-more{
    grid-column:auto;
    height:31px;
    min-width:72px;
    font-size:12px;
  }
}

/* =========================================================
   资讯详情页
   ========================================================= */
.news-detail-page{
  padding-top:18px;
}
.news-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:18px;
  align-items:start;
}
.news-article,
.news-side-card{
  border-radius:8px;
  border:1px solid rgba(255,255,255,.74);
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 42px rgba(58,38,112,.12);
  backdrop-filter:blur(16px);
}
.news-article{
  min-width:0;
  overflow:hidden;
}
.news-detail-page .breadcrumb{
  max-width:100%;
}
.article-head{
  position:relative;
  padding:30px 34px 24px;
  background:
    linear-gradient(135deg,rgba(255,46,99,.10),rgba(0,183,255,.10)),
    rgba(255,255,255,.72);
  border-bottom:1px solid rgba(107,88,147,.14);
}
.article-head::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#ff2e63,#ff9f1c,#00b7ff,#7c4dff);
}
.article-kicker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.article-kicker span,
.article-kicker em{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  font-style:normal;
}
.article-kicker span{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  box-shadow:0 12px 24px rgba(255,46,99,.18);
}
.article-kicker em{
  color:#6a39d6;
  background:rgba(124,77,255,.10);
  border:1px solid rgba(124,77,255,.18);
}
.article-head h1{
  color:#17192f;
  font-size:34px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:0;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:16px;
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.article-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.article-meta iconify-icon{
  color:#ff2e63;
}
.article-content{
  padding:26px 34px 12px;
}
.article-content h2{
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0 10px;
  color:#1b1e35;
  font-size:22px;
  font-weight:900;
}
.article-content h2:first-child{
  margin-top:0;
}
.article-content h2 iconify-icon{
  color:#ff2e63;
}
.article-content p{
  color:#485164;
  font-size:16px;
  line-height:2;
  margin:10px 0;
}
.article-rich-content{
  padding-top:28px;
  padding-bottom:16px;
}
.article-rich-content p:first-child{
  margin-top:0;
}
.article-rich-content p:last-child{
  margin-bottom:0;
}
/* 资讯详情 detail-zxl 正文 RichText：后台正文内图片/视频水平居中（限定 .news-detail-page .news-article .article-rich-content，避免全局 .article-content img） */
.news-detail-page .news-article .article-rich-content img,
.news-detail-page .news-article .article-rich-content video{
  display:block;
  max-width:100%;
  height:auto;
  margin-left:auto;
  margin-right:auto;
}
.news-detail-page .news-article .article-rich-content figure{
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
  text-align:center;
}
.news-detail-page .news-article .article-rich-content figure img{
  margin-left:auto;
  margin-right:auto;
}
.news-detail-page .news-article .article-rich-content p:has(> img:only-child){
  text-align:center;
}
.article-content ul{
  margin:12px 0 14px;
  padding-left:20px;
}
.article-content li{
  position:relative;
  padding-left:16px;
  color:#586276;
  font-size:15px;
  line-height:1.9;
}
.article-content li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff2e63;
}
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 34px 0;
  padding:16px 0 20px;
  border-top:1px dashed rgba(107,88,147,.16);
}
.article-tags span,
.article-tags a{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}
.article-tags span{
  color:#252941;
  background:rgba(255,255,255,.72);
}
.article-tags a{
  color:#ff2e63;
  background:rgba(255,46,99,.08);
  border:1px solid rgba(255,46,99,.12);
}
.article-tags a:hover{
  color:#fff;
  background:#ff2e63;
}
.article-prev-next{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0 34px 24px;
}
.article-prev-next a{
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 13px;
  border-radius:8px;
  color:#586276;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(255,255,255,.82);
  font-size:13px;
  font-weight:900;
}
.article-prev-next span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.article-prev-next a:hover{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
.article-prev-next-muted{
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 13px;
  border-radius:8px;
  color:#9aa3b2;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(88,98,118,.12);
  font-size:13px;
  font-weight:700;
  cursor:default;
}
.news-detail-section{
  margin:0 34px 24px;
}
.news-detail-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.news-detail-section-title h2{
  display:flex;
  align-items:center;
  gap:7px;
  color:#1b1e35;
  font-size:21px;
  font-weight:900;
}
.news-detail-section-title h2 iconify-icon{
  color:#ff2e63;
}
.news-detail-section-title a{
  color:#8a93aa;
  font-size:13px;
  font-weight:900;
}
.news-detail-section-title a:hover{
  color:#ff2e63;
}
.article-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.article-card-grid a{
  min-width:0;
  overflow:hidden;
  border-radius:8px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 14px 28px rgba(58,38,112,.08);
}
.article-card-grid img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  transition:transform .22s ease;
}
.article-card-grid strong{
  display:block;
  padding:10px 11px 0;
  color:#252941;
  font-size:15px;
  font-weight:900;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.article-card-grid span{
  display:block;
  padding:6px 11px 11px;
  color:#7d879c;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.article-card-grid a:hover img{
  transform:scale(1.04);
}
.article-card-grid a:hover strong{
  color:#ff2e63;
}
.news-detail-sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
  position:sticky;
  top:12px;
}
.news-side-card{
  padding:15px;
}
.news-side-card:nth-child(1){
  background:
    linear-gradient(135deg,rgba(255,46,99,.08),rgba(255,159,28,.08)),
    rgba(255,255,255,.84);
}
.news-side-card:nth-child(2){
  background:
    linear-gradient(135deg,rgba(0,183,255,.08),rgba(124,77,255,.08)),
    rgba(255,255,255,.84);
}
.news-side-card:nth-child(3){
  background:
    linear-gradient(135deg,rgba(0,208,132,.08),rgba(255,209,102,.10)),
    rgba(255,255,255,.84);
}
.news-side-card h3{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:12px;
  color:#1b1e35;
  font-size:17px;
  font-weight:900;
}
.news-side-card h3 iconify-icon{
  color:#ff2e63;
}
.news-hot-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.news-hot-list li{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.news-hot-list span{
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  font-size:12px;
  font-weight:900;
}
.news-hot-list a{
  min-width:0;
  color:#465064;
  font-size:13px;
  font-weight:900;
  line-height:1.5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.news-hot-list a:hover{
  color:#ff2e63;
}
.side-news-card a{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:10px;
  align-items:center;
  padding:9px 0;
  border-top:1px dashed rgba(107,88,147,.14);
}
.side-news-card a:first-of-type{
  border-top:0;
  padding-top:0;
}
.side-news-card img{
  grid-row:1 / span 2;
  width:92px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
}
.side-news-card strong,
.side-news-card span{
  min-width:0;
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.side-news-card strong{
  grid-column:2;
  align-self:end;
  color:#252941;
  font-size:13px;
  font-weight:900;
}
.side-news-card span{
  grid-column:2;
  align-self:start;
  margin-top:4px;
  color:#8a93aa;
  font-size:12px;
  font-weight:800;
}
.side-news-card a:hover strong{
  color:#ff2e63;
}
.side-game-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.side-game-list a{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-width:0;
}
.side-game-list img{
  width:46px;
  height:46px;
  border-radius:8px;
  object-fit:cover;
}
.side-game-list span{
  min-width:0;
  color:#252941;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.side-game-list em{
  color:#8a93aa;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
.side-topic-card div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.side-topic-card a{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  color:#626b84;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.82);
  font-size:12px;
  font-weight:900;
}
.side-topic-card a:hover{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
}

@media (max-width:1050px){
  .news-detail-layout{
    grid-template-columns:1fr;
  }
  .news-detail-sidebar{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .news-detail-page{
    padding-top:12px;
  }
  .article-head{
    padding:22px 16px 18px;
  }
  .article-head h1{
    font-size:24px;
    line-height:1.28;
  }
  .article-meta{
    gap:8px 12px;
    font-size:12px;
  }
  .article-tags,
  .article-prev-next,
  .news-detail-section{
    margin-left:16px;
    margin-right:16px;
  }
  .article-card-grid,
  .news-detail-sidebar{
    grid-template-columns:1fr;
  }
  .article-content{
    padding:20px 16px 10px;
  }
  .article-rich-content{
    padding-top:22px;
    padding-bottom:10px;
  }
  .article-content h2{
    font-size:19px;
  }
  .article-content p{
    font-size:15px;
    line-height:1.85;
  }
  .article-prev-next{
    grid-template-columns:1fr;
  }
  .news-side-card{
    padding:13px;
  }
}

/* =========================================================
   排行榜页
   ========================================================= */
.rank-page{
  position:relative;
  padding:22px 0 6px;
  overflow:hidden;
  background:
    radial-gradient(circle at 9% 8%,rgba(255,46,99,.20),transparent 26%),
    radial-gradient(circle at 88% 12%,rgba(0,183,255,.20),transparent 25%),
    radial-gradient(circle at 32% 96%,rgba(255,209,102,.22),transparent 24%),
    linear-gradient(135deg,#fff7fb 0%,#eef9ff 42%,#fff8ed 100%);
}
.rank-page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.58;
  background-image:
    linear-gradient(120deg,rgba(255,255,255,.42) 0 1px,transparent 1px 90px),
    linear-gradient(30deg,rgba(255,159,28,.13) 0 1px,transparent 1px 84px);
  background-size:110px 110px;
}
.rank-page > .container{
  position:relative;
  z-index:2;
}
.rank-bg-deco span{
  position:absolute;
  pointer-events:none;
  filter:blur(.2px);
}
.rank-bg-deco span:nth-child(1){
  width:210px;
  height:210px;
  top:96px;
  right:-52px;
  border-radius:32px;
  background:linear-gradient(135deg,rgba(255,46,99,.30),rgba(255,159,28,.18));
  transform:rotate(18deg);
}
.rank-bg-deco span:nth-child(2){
  width:170px;
  height:170px;
  top:410px;
  left:-64px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(0,183,255,.25),rgba(124,77,255,.16));
}
.rank-bg-deco span:nth-child(3){
  width:92px;
  height:92px;
  top:260px;
  right:18%;
  border:18px solid rgba(255,209,102,.24);
  border-radius:28px;
  transform:rotate(28deg);
}
.rank-bg-deco span:nth-child(4){
  width:140px;
  height:16px;
  bottom:80px;
  left:18%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,46,99,.22),rgba(0,183,255,.20));
  transform:rotate(-12deg);
}
.rank-hero-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:24px;
  align-items:center;
  min-height:246px;
  padding:30px;
  border-radius:8px;
  color:#fff;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(18,20,47,.92),rgba(38,30,93,.86)),
    url("../image/new1.png") center/cover;
  box-shadow:0 24px 54px rgba(45,30,105,.24);
}
.rank-hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 20%,rgba(255,209,102,.30),transparent 22%),
    linear-gradient(90deg,rgba(255,46,99,.32),rgba(0,183,255,.20));
}
.rank-hero-panel::after{
  content:"";
  position:absolute;
  right:28px;
  bottom:-42px;
  width:240px;
  height:240px;
  border:38px solid rgba(255,255,255,.10);
  border-radius:50%;
}
.rank-hero-copy,
.rank-hero-medals{
  position:relative;
  z-index:2;
}
.rank-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  color:#ffd166;
  font-size:13px;
  font-weight:900;
}
.rank-hero-copy h1{
  margin-top:14px;
  font-size:38px;
  line-height:1.16;
  font-weight:900;
}
.rank-hero-copy p{
  max-width:610px;
  margin-top:10px;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.75;
}
.rank-hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.rank-hero-chips span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  font-size:13px;
  font-weight:900;
}
.rank-hero-medals{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.medal-card{
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:2px 12px;
  align-items:center;
  padding:14px;
  border-radius:8px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
}
.medal-card iconify-icon{
  grid-row:1 / span 2;
  width:50px;
  height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#241728;
  background:linear-gradient(135deg,#ffd166,#ff9f1c);
  font-size:28px;
}
.medal-card.second iconify-icon{
  background:linear-gradient(135deg,#00d084,#00b7ff);
}
.medal-card.third iconify-icon{
  background:linear-gradient(135deg,#ff4fb8,#7c4dff);
  color:#fff;
}
.medal-card strong{
  font-size:15px;
  font-weight:900;
}
.medal-card span{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:800;
}
.rank-tabs-panel{
  display:flex;
  gap:10px;
  margin-top:18px;
  padding:12px;
  border-radius:8px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 16px 38px rgba(58,38,112,.12);
  backdrop-filter:blur(14px);
}
.rank-tabs-panel a{
  flex:1;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:8px;
  color:#465064;
  background:rgba(255,255,255,.58);
  font-size:14px;
  font-weight:900;
}
.rank-tabs-panel a:hover,
.rank-tabs-panel a.active{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
  box-shadow:0 12px 24px rgba(124,77,255,.18);
}
.rank-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;
  margin-top:0;
}
.rank-board,
.rank-mini-board,
.rank-scene-card{
  border-radius:8px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 18px 42px rgba(58,38,112,.13);
  backdrop-filter:blur(14px);
}
.rank-board{
  overflow:hidden;
}
.rank-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
}
.rank-board-head h1{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:22px;
  font-weight:900;
}
.rank-board-head p{
  margin-top:4px;
  color:rgba(255,255,255,.82);
  font-size:13px;
}
.rank-board-tabs{
  flex:0 1 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.rank-board-tabs a{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border-radius:999px;
  color:rgba(255,255,255,.82);
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.rank-board-tabs a:hover,
.rank-board-tabs a.active{
  color:#252033;
  background:#ffd166;
  border-color:rgba(255,255,255,.42);
}
.rank-board-list{
  padding:8px 16px 14px;
}
.rank-board-row{
  display:grid;
  grid-template-columns:42px 58px minmax(0,1fr) 62px;
  gap:12px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px dashed rgba(107,88,147,.16);
}
.rank-board-row:last-child{
  border-bottom:0;
}
.rank-board-row:hover strong{
  color:#ff2e63;
}
.rank-board-row em{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#7b849b;
  background:#f1f4fb;
  font-style:normal;
  font-size:15px;
  font-weight:900;
}
.rank-board-row.top em{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  box-shadow:0 10px 20px rgba(255,46,99,.18);
}
.rank-board-row:nth-child(2).top em{
  background:linear-gradient(135deg,#7c4dff,#00b7ff);
}
.rank-board-row:nth-child(3).top em{
  background:linear-gradient(135deg,#00d084,#00b7ff);
}
.rank-board-row img{
  width:58px;
  height:58px;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 12px 24px rgba(40,27,91,.12);
}
.rank-board-row div{
  min-width:0;
}
.rank-board-row strong{
  display:block;
  color:#20243c;
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rank-board-row span{
  display:block;
  margin-top:4px;
  color:#7b849b;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rank-board-row b{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:2px;
  color:#00a86b;
  font-size:12px;
  font-weight:900;
}
.rank-board-row b.down{
  color:#e53935;
}
.rank-side{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.rank-mini-board{
  padding:16px;
  background:
    linear-gradient(135deg,rgba(255,46,99,.08),rgba(255,159,28,.09)),
    rgba(255,255,255,.82);
}
.rank-mini-board.app{
  background:
    linear-gradient(135deg,rgba(0,183,255,.09),rgba(0,208,132,.09)),
    rgba(255,255,255,.82);
}
.rank-mini-board h2{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:#20243c;
  font-size:18px;
  font-weight:900;
}
.rank-mini-board h2 iconify-icon{
  color:#ff2e63;
}
.rank-mini-board.app h2 iconify-icon{
  color:#00a6c9;
}
.rank-mini-board a{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-height:38px;
  border-top:1px dashed rgba(107,88,147,.14);
  color:#20243c;
}
.rank-mini-board a:first-of-type{
  border-top:0;
}
.rank-mini-board span{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#ff9f1c);
  font-size:12px;
  font-weight:900;
}
.rank-mini-board a:nth-of-type(n+4) span{
  color:#7b849b;
  background:#eef2fa;
}
.rank-mini-board strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:900;
}
.rank-mini-board a:hover strong{
  color:#ff2e63;
}
.rank-mini-board em{
  color:#8b94aa;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
.rank-extra-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.rank-scene-card{
  min-height:210px;
  padding:18px;
  overflow:hidden;
}
.rank-scene-card.hot{
  background:
    linear-gradient(135deg,rgba(255,46,99,.16),rgba(255,209,102,.18)),
    rgba(255,255,255,.80);
}
.rank-scene-card.cool{
  background:
    linear-gradient(135deg,rgba(0,183,255,.16),rgba(0,208,132,.14)),
    rgba(255,255,255,.80);
}
.rank-scene-card.purple{
  background:
    linear-gradient(135deg,rgba(124,77,255,.16),rgba(255,79,184,.13)),
    rgba(255,255,255,.80);
}
.rank-scene-card > div:first-child span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
  font-size:12px;
  font-weight:900;
}
.rank-scene-card h2{
  margin-top:12px;
  color:#20243c;
  font-size:20px;
  font-weight:900;
}
.rank-scene-card p{
  margin-top:7px;
  color:#667088;
  font-size:13px;
  line-height:1.65;
}
.rank-scene-card ul{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:16px;
}
.rank-scene-card li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  padding:0 10px;
  border-radius:8px;
  background:rgba(255,255,255,.58);
}
.rank-scene-card li > a.rank-scene-row-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
  margin:0 -10px;
  padding:0 10px;
  min-height:34px;
  color:inherit;
  text-decoration:none;
  border-radius:8px;
}
.rank-scene-card li > a.rank-scene-row-link:hover strong{
  color:#ff2e63;
}
.rank-scene-card li strong{
  min-width:0;
  color:#252941;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rank-scene-card li em{
  flex:0 0 auto;
  color:#ff2e63;
  font-size:12px;
  font-style:normal;
  font-weight:900;
}
.rank-topic-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:18px;
}
.rank-topic-links a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 11px;
  border-radius:999px;
  color:#465064;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.78);
  font-size:12px;
  font-weight:900;
}
.rank-topic-links a:hover{
  color:#fff;
  background:linear-gradient(135deg,#ff2e63,#7c4dff);
}
@media (max-width:1024px){
  .rank-hero-panel,
  .rank-main-grid{
    grid-template-columns:1fr;
  }
  .rank-hero-medals{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .rank-side{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .rank-extra-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .rank-page{
    padding-top:14px;
  }
  .rank-hero-panel{
    min-height:auto;
    padding:20px 16px;
    gap:18px;
  }
  .rank-hero-copy h1{
    font-size:28px;
  }
  .rank-hero-copy p{
    font-size:14px;
  }
  .rank-hero-medals,
  .rank-side{
    grid-template-columns:1fr;
  }
  .rank-tabs-panel{
    overflow-x:auto;
    scrollbar-width:none;
  }
  .rank-tabs-panel::-webkit-scrollbar{
    display:none;
  }
  .rank-tabs-panel a{
    flex:0 0 auto;
    min-width:126px;
    padding:0 12px;
  }
  .rank-board-head{
    display:block;
    padding:16px;
  }
  .rank-board-tabs{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    margin-top:12px;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .rank-board-tabs::-webkit-scrollbar{
    display:none;
  }
  .rank-board-tabs a{
    flex:0 0 auto;
  }
  .rank-board-list{
    padding:6px 12px 10px;
  }
  .rank-board-row{
    grid-template-columns:30px 50px minmax(0,1fr);
    gap:9px;
    padding:12px 0;
  }
  .rank-board-row em{
    width:28px;
    height:28px;
    font-size:13px;
  }
  .rank-board-row img{
    width:50px;
    height:50px;
    border-radius:12px;
  }
  .rank-board-row strong{
    font-size:14px;
  }
  .rank-board-row span{
    font-size:11px;
  }
  .rank-board-row b{
    grid-column:3;
    justify-self:start;
    margin-top:-4px;
  }
  .rank-mini-board,
  .rank-scene-card{
    padding:14px;
  }
  .rank-bg-deco span:nth-child(1){
    width:150px;
    height:150px;
  }
}

/* =========================================================
   游戏合集 / 应用合集列表页
   ========================================================= */
.topic-page{
  position:relative;
  padding:22px 0 10px;
  overflow:hidden;
  background:linear-gradient(180deg,#f6f9ff 0%,#edf3ff 46%,#f8fbff 100%);
}
.topic-page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background:
    radial-gradient(circle at 5% 8%,rgba(255,141,38,.15),transparent 24%),
    radial-gradient(circle at 92% 15%,rgba(77,125,255,.14),transparent 26%);
}
.topic-page > .container{
  position:relative;
  z-index:2;
}
.topic-page-pattern{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.38) 0 1px,transparent 1px 66px);
}
.topic-breadcrumb{
  margin-bottom:14px;
}
.topic-list-wrap{
  margin-top:0;
  padding:14px;
  border-radius:8px;
  background:
    linear-gradient(135deg,rgba(255,122,43,.08),rgba(90,141,255,.08)),
    #fff;
  border:1px solid #dfe7fb;
  box-shadow:0 14px 32px rgba(56,95,170,.10);
}
.topic-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:4px 4px 14px;
  border-bottom:1px solid #e5ecff;
}
.topic-list-title{
  min-width:0;
}
.topic-list-head h1{
  display:flex;
  align-items:center;
  gap:6px;
  color:#1f2a44;
  font-size:26px;
  line-height:1.25;
  font-weight:900;
}
.topic-list-head h1 iconify-icon{
  color:#ff7a2b;
}
.topic-list-title p{
  margin-top:7px;
  color:#657491;
  font-size:13px;
  line-height:1.5;
}
.topic-list-tools{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.topic-list-tools span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 11px;
  border-radius:999px;
  color:#405270;
  background:rgba(255,255,255,.78);
  border:1px solid #dfe7fb;
  font-size:12px;
  font-weight:800;
}
.topic-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:14px;
}
.topic-row{
  position:relative;
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 94px;
  gap:12px 18px;
  align-items:center;
  min-width:0;
  padding:12px;
  border:1px solid #e0e9ff;
  border-radius:8px;
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 20px rgba(55,95,170,.07);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.topic-row:hover{
  transform:translateY(-2px);
  border-color:#d9e5ff;
  box-shadow:0 14px 28px rgba(55,95,170,.12);
}
.topic-cover{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 12px 24px rgba(55,95,170,.16);
}
.topic-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .24s ease;
}
.topic-row:hover .topic-cover img{
  transform:scale(1.05);
}
.topic-body{
  min-width:0;
}
.topic-row-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}
.topic-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:23px;
  padding:0 9px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff7a2b,#ffb14f);
  font-size:11px;
  font-weight:800;
}
.topic-row.app .topic-badge{
  background:linear-gradient(135deg,#5a8dff,#44bef7);
}
.topic-row-meta em{
  color:#7d8aa8;
  font-size:12px;
  font-style:normal;
  font-weight:700;
}
.topic-body h3{
  margin-top:7px;
  color:#1f2a44;
  font-size:22px;
  line-height:1.3;
  font-weight:900;
}
.topic-body h3 a:hover{
  color:#ff7a2b;
}
.topic-body p{
  margin-top:5px;
  color:#61708f;
  font-size:13px;
  line-height:1.58;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.topic-soft-list{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  margin-top:9px;
  padding-left:48px;
  background:transparent;
}
.topic-soft-list::before{
  content:"收录";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  height:20px;
  display:inline-flex;
  align-items:center;
  padding:0 7px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff7a2b,#ffb14f);
  font-size:10px;
  font-weight:800;
  box-shadow:0 6px 14px rgba(255,122,43,.24);
}
.topic-row.app .topic-soft-list::before{
  background:linear-gradient(135deg,#5a8dff,#44bef7);
}
.topic-soft-list a{
  width:56px;
  flex:0 0 56px;
  min-width:0;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:5px 3px;
  border-radius:7px;
  background:rgba(255,255,255,.78);
  border:1px solid #e7edff;
  box-shadow:none;
}
.topic-soft-list a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(55,95,170,.14);
}
.topic-soft-list img{
  width:28px;
  height:28px;
  flex:0 0 auto;
  border-radius:7px;
  object-fit:cover;
  box-shadow:0 5px 9px rgba(45,75,140,.14);
}
.topic-soft-list span{
  max-width:100%;
  color:#334567;
  font-size:10px;
  line-height:1.1;
  font-weight:800;
  text-align:center;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.topic-more-btn{
  width:88px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(135deg,#ff7a2b,#ffb14f);
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 16px rgba(255,122,43,.20);
}
.topic-row.app .topic-more-btn{
  background:linear-gradient(135deg,#5a8dff,#44bef7);
  box-shadow:0 8px 16px rgba(90,141,255,.22);
}
.topic-more-btn:hover{
  color:#fff;
  filter:brightness(1.05);
}
.topic-extra-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:16px;
}
.topic-side-block{
  min-height:150px;
  padding:14px;
  border-radius:8px;
  background:#fff;
  border:1px solid #e1e9ff;
  box-shadow:0 10px 24px rgba(55,95,170,.09);
}
.topic-side-block h2{
  display:flex;
  align-items:center;
  gap:6px;
  color:#1f2a44;
  font-size:19px;
  font-weight:800;
  margin-bottom:10px;
}
.topic-side-block h2 iconify-icon{
  color:#ff7a2b;
}
.topic-rank-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.topic-rank-links a{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  min-width:0;
  color:#2d3f61;
  font-size:13px;
  font-weight:800;
}
.topic-rank-links span{
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#456086;
  background:#edf3ff;
  font-size:11px;
  font-weight:800;
}
.topic-rank-links a:hover{
  color:#ff7a2b;
}
.topic-rank-links em{
  color:#7f8cad;
  font-size:12px;
  font-style:normal;
  font-weight:700;
}
.topic-keyword-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.topic-keyword-cloud a{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border-radius:999px;
  color:#4a5f86;
  background:#f3f7ff;
  border:1px solid #dee7ff;
  font-size:12px;
  font-weight:800;
}
.topic-keyword-cloud a:hover{
  color:#fff;
  background:linear-gradient(135deg,#5a8dff,#44bef7);
}
@media (max-width:900px){
  .topic-list-head{
    align-items:flex-start;
  }
  .topic-row{
    grid-template-columns:210px minmax(0,1fr);
  }
  .topic-more-btn{
    grid-column:2;
    justify-self:start;
  }
  .topic-extra-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .topic-page{
    padding-top:12px;
  }
  .topic-list-wrap{
    padding:12px;
  }
  .topic-list-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .topic-list-head h1{
    font-size:22px;
  }
  .topic-list-title p{
    font-size:12px;
  }
  .topic-list-tools{
    justify-content:flex-start;
  }
  .topic-row{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
  }
  .topic-more-btn{
    grid-column:auto;
    width:100%;
  }
  .topic-soft-list{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    padding-left:0;
    padding-top:22px;
  }
  .topic-soft-list::before{
    top:0;
    transform:none;
  }
  .topic-soft-list img{
    width:32px;
    height:32px;
  }
  .topic-soft-list a{
    width:auto;
    flex:initial;
    padding:7px 4px;
    gap:5px;
  }
  .topic-body h3{
    font-size:17px;
  }
  .topic-body p{
    font-size:12px;
  }
}
@media (max-width:560px){
  .topic-soft-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .topic-list-tools span{
    width:100%;
  }
}

/* Topic list full redesign */
.topic-page{
  position:relative;
  padding:24px 0 12px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,122,43,.18),transparent 30%),
    linear-gradient(225deg,rgba(90,141,255,.18),transparent 32%),
    linear-gradient(180deg,#fff7ef 0%,#eef6ff 46%,#fff4fb 100%);
}
.topic-page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background:
    linear-gradient(90deg,rgba(255,255,255,.52) 0 1px,transparent 1px 72px),
    linear-gradient(0deg,rgba(255,255,255,.46) 0 1px,transparent 1px 72px);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.82),transparent 78%);
}
.topic-page > .container{
  position:relative;
  z-index:2;
}
.topic-backdrop{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.topic-backdrop-band{
  position:absolute;
  display:block;
  border-radius:36px;
  transform:rotate(-12deg);
}
.topic-backdrop-band-a{
  width:760px;
  height:190px;
  right:-170px;
  top:92px;
  background:linear-gradient(90deg,rgba(255,87,34,.30),rgba(255,179,0,.18));
}
.topic-backdrop-band-b{
  width:620px;
  height:230px;
  left:-150px;
  top:520px;
  background:linear-gradient(100deg,rgba(90,141,255,.28),rgba(0,190,255,.16));
  transform:rotate(14deg);
}
.topic-backdrop-grid{
  position:absolute;
  right:8%;
  bottom:120px;
  width:280px;
  height:160px;
  transform:rotate(18deg);
  background:
    linear-gradient(90deg,rgba(124,77,255,.18) 0 10px,transparent 10px 26px),
    linear-gradient(0deg,rgba(255,46,99,.14) 0 10px,transparent 10px 26px);
  border-radius:8px;
  opacity:.55;
}
.topic-breadcrumb{
  margin-bottom:14px;
}
.topic-stage{
  position:relative;
}
.topic-stage-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  align-items:end;
  margin-bottom:18px;
}
.topic-stage-head > div{
  min-width:0;
}
.topic-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff5722,#ffb300);
  box-shadow:0 12px 24px rgba(255,87,34,.22);
  font-size:12px;
  font-weight:900;
}
.topic-stage-head h1{
  margin-top:10px;
  color:#18213a;
  font-size:34px;
  line-height:1.18;
  font-weight:900;
}
.topic-stage-head p{
  max-width:720px;
  margin-top:9px;
  color:#5f6b84;
  font-size:14px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.topic-stage-stats{
  display:grid;
  grid-template-columns:repeat(3,92px);
  gap:8px;
}
.topic-stage-stats span{
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px;
  border-radius:8px;
  color:#536079;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 14px 30px rgba(45,72,132,.10);
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.topic-stage-stats b{
  color:#ff5722;
  font-size:24px;
  line-height:1;
  font-weight:900;
}
.topic-showcase{
  display:grid;
  grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  gap:16px;
  align-items:start;
}
.topic-lead-topic,
.topic-collection{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.86);
  border-radius:8px;
  background:rgba(255,255,255,.82);
  box-shadow:0 20px 44px rgba(47,72,132,.13);
  backdrop-filter:blur(14px);
}
.topic-lead-topic::before,
.topic-collection::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,87,34,.08),transparent 42%);
}
.topic-lead-topic.app::before,
.topic-collection.app::before{
  background:linear-gradient(135deg,rgba(90,141,255,.10),transparent 44%);
}
.topic-lead-image,
.topic-collection-image{
  position:relative;
  display:block;
  overflow:hidden;
}
.topic-lead-image img,
.topic-collection-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .28s ease;
}
.topic-lead-topic:hover .topic-lead-image img,
.topic-collection:hover .topic-collection-image img{
  transform:scale(1.05);
}
.topic-lead-topic{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.topic-lead-image{
  aspect-ratio:16/9;
}
.topic-lead-image::after,
.topic-collection-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(18,23,45,.34),transparent 64%);
  pointer-events:none;
}
.topic-lead-content{
  position:relative;
  z-index:1;
  padding:18px;
}
.topic-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.topic-meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff5722,#ffb300);
  font-size:11px;
  font-weight:900;
}
.topic-collection.app .topic-meta span{
  background:linear-gradient(135deg,#5a8dff,#00b7ff);
}
.topic-meta em{
  color:#76829b;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
.topic-lead-content h2,
.topic-collection-main h2{
  margin-top:9px;
  color:#1d2741;
  font-weight:900;
}
.topic-lead-content h2{
  font-size:28px;
  line-height:1.25;
}
.topic-collection-main h2{
  font-size:21px;
  line-height:1.3;
}
.topic-lead-content h2 a:hover,
.topic-collection-main h2 a:hover{
  color:#ff5722;
}
.topic-lead-content p,
.topic-collection-main p{
  margin-top:8px;
  color:#63708a;
  font-size:13px;
  line-height:1.68;
}
.topic-collection-main p{
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.topic-included{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 10px;
  margin-top:13px;
  min-width:0;
}
.topic-included strong{
  flex:0 0 auto;
  color:#ff5722;
  font-size:12px;
  font-weight:900;
}
.topic-collection.app .topic-included strong{
  color:#3f7eff;
}
.topic-included a{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#2c3954;
  font-size:11px;
  font-weight:900;
}
.topic-included a:hover{
  color:#ff5722;
}
.topic-included img{
  width:22px;
  height:22px;
  flex:0 0 auto;
  border-radius:7px;
  object-fit:cover;
  box-shadow:0 5px 10px rgba(37,61,122,.14);
}
.topic-lead-topic .topic-included a{
  font-size:12px;
}
.topic-lead-topic .topic-included img{
  width:26px;
  height:26px;
}
.topic-action,
.topic-mini-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#ff5722,#ffb300);
  font-weight:900;
  box-shadow:0 14px 26px rgba(255,87,34,.22);
}
.topic-action{
  width:116px;
  height:38px;
  margin-top:16px;
  border-radius:999px;
  font-size:13px;
}
.topic-mini-action{
  width:86px;
  height:30px;
  border-radius:999px;
  font-size:12px;
  align-self:center;
  justify-self:start;
}
.topic-mini-action:hover,
.topic-action:hover{
  color:#fff;
  filter:brightness(1.04);
}
.topic-topic-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.topic-collection{
  display:grid;
  grid-template-columns:178px minmax(0,1fr);
  gap:12px 14px;
  align-items:start;
  padding:12px;
}
.topic-collection-image{
  aspect-ratio:16/9;
  border-radius:8px;
  box-shadow:0 12px 22px rgba(45,72,132,.14);
}
.topic-collection .topic-mini-action{
  grid-column:2;
}
.topic-collection-main{
  position:relative;
  z-index:1;
  min-width:0;
}
.topic-pager{
  margin-top:18px;
}
.topic-rich-blocks{
  display:grid;
  grid-template-columns:1.15fr .95fr .9fr;
  gap:16px;
  margin-top:20px;
}
.topic-editor-pick,
.topic-update-board,
.topic-keyword-board{
  position:relative;
  min-height:190px;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.84);
  background:rgba(255,255,255,.80);
  box-shadow:0 18px 38px rgba(47,72,132,.12);
}
.topic-editor-pick{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:14px;
  padding:12px;
}
.topic-editor-pick img{
  width:100%;
  height:100%;
  min-height:166px;
  object-fit:cover;
  border-radius:8px;
}
.topic-editor-pick > div,
.topic-update-board,
.topic-keyword-board{
  padding:16px;
}
.topic-editor-pick span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#7c4dff,#ff4fb8);
  font-size:12px;
  font-weight:900;
}
.topic-editor-pick h2,
.topic-update-board h2,
.topic-keyword-board h2{
  color:#1d2741;
  font-size:19px;
  line-height:1.35;
  font-weight:900;
}
.topic-editor-pick h2{
  margin-top:11px;
}
.topic-editor-pick h2 a:hover{
  color:#ff5722;
}
.topic-editor-pick p{
  margin-top:8px;
  color:#65718a;
  font-size:13px;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.topic-update-board h2,
.topic-keyword-board h2{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:13px;
}
.topic-update-board h2 iconify-icon,
.topic-keyword-board h2 iconify-icon{
  color:#ff5722;
}
.topic-update-board a{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  min-height:31px;
  color:#26334f;
  font-size:13px;
  font-weight:900;
}
.topic-update-board a + a{
  margin-top:7px;
}
.topic-update-board span{
  color:#ff5722;
  font-size:12px;
  font-weight:900;
}
.topic-update-board strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.topic-update-board em{
  color:#7f8aa2;
  font-size:12px;
  font-style:normal;
}
.topic-keyword-board div{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.topic-keyword-board a{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border-radius:999px;
  color:#536079;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(220,230,255,.90);
  font-size:12px;
  font-weight:900;
}
.topic-keyword-board a:hover{
  color:#fff;
  background:linear-gradient(135deg,#5a8dff,#00b7ff);
}
@media (max-width:980px){
  .topic-stage-head,
  .topic-showcase,
  .topic-rich-blocks{
    grid-template-columns:1fr;
  }
  .topic-stage-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .topic-page{
    padding-top:14px;
  }
  .topic-backdrop-band-a{
    width:430px;
    height:132px;
    right:-170px;
    top:128px;
  }
  .topic-backdrop-band-b{
    width:390px;
    height:142px;
    left:-180px;
    top:620px;
  }
  .topic-stage-head{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-bottom:14px;
  }
  .topic-stage-head > div{
    width:100%;
    max-width:100%;
  }
  .topic-stage-head h1{
    font-size:25px;
  }
  .topic-stage-head p{
    width:100%;
    max-width:100%;
    word-break:break-all;
  }
  .topic-stage-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .topic-stage-stats span{
    min-height:62px;
    padding:7px 5px;
    font-size:11px;
  }
  .topic-stage-stats b{
    font-size:20px;
  }
  .topic-lead-content{
    padding:14px;
  }
  .topic-lead-content h2{
    font-size:22px;
  }
  .topic-collection{
    grid-template-columns:1fr;
    gap:11px;
  }
  .topic-collection-image{
    max-height:190px;
  }
  .topic-mini-action{
    width:100%;
    justify-self:stretch;
  }
  .topic-editor-pick{
    grid-template-columns:1fr;
  }
  .topic-editor-pick img{
    min-height:0;
    aspect-ratio:16/9;
  }
}
@media (max-width:560px){
  .topic-stage-stats{
    grid-template-columns:1fr;
  }
  .topic-included{
    gap:8px 10px;
  }
  .topic-included strong{
    width:100%;
  }
  .topic-update-board a{
    grid-template-columns:48px minmax(0,1fr);
  }
  .topic-update-board em{
    grid-column:2;
    margin-top:-6px;
  }
  .topic-stage-head p,
  .topic-lead-content p,
  .topic-collection-main p,
  .topic-editor-pick p{
    width:100%;
    max-width:300px !important;
  }
}
.topic-stage-head p,
.topic-lead-content p,
.topic-collection-main p,
.topic-editor-pick p{
  max-width:100%;
  white-space:normal !important;
  word-break:break-all !important;
  overflow-wrap:anywhere !important;
}

/* Topic list clean layout */
.topic-page{
  position:relative;
  padding:24px 0 12px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,87,34,.16),transparent 28%),
    linear-gradient(225deg,rgba(0,183,255,.16),transparent 30%),
    linear-gradient(180deg,#fff7ee 0%,#eef6ff 48%,#fff4fb 100%);
}
.topic-page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background:
    linear-gradient(90deg,rgba(255,255,255,.50) 0 1px,transparent 1px 76px),
    linear-gradient(0deg,rgba(255,255,255,.42) 0 1px,transparent 1px 76px);
  mask-image:linear-gradient(to bottom,#000 0%,transparent 82%);
}
.topic-page > .container{
  position:relative;
  z-index:2;
}
.topic-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.topic-bg-block{
  position:absolute;
  display:block;
  border-radius:40px;
}
.topic-bg-block-a{
  width:820px;
  height:220px;
  top:88px;
  right:-170px;
  background:linear-gradient(100deg,rgba(255,87,34,.28),rgba(255,179,0,.16));
  transform:rotate(-12deg);
}
.topic-bg-block-b{
  width:720px;
  height:250px;
  left:-190px;
  top:620px;
  background:linear-gradient(115deg,rgba(0,183,255,.24),rgba(124,77,255,.13));
  transform:rotate(13deg);
}
.topic-bg-dots{
  position:absolute;
  right:9%;
  bottom:170px;
  width:240px;
  height:150px;
  border-radius:8px;
  opacity:.52;
  transform:rotate(14deg);
  background:
    radial-gradient(circle,rgba(255,46,99,.22) 0 4px,transparent 4px) 0 0/26px 26px,
    radial-gradient(circle,rgba(0,183,255,.20) 0 4px,transparent 4px) 13px 13px/26px 26px;
}
.topic-breadcrumb{
  margin-bottom:14px;
}
.topic-panel{
  position:relative;
  padding:18px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:8px;
  background:rgba(255,255,255,.66);
  box-shadow:0 22px 52px rgba(52,74,136,.12);
  backdrop-filter:blur(16px);
}
.topic-panel-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:end;
  padding:2px 2px 17px;
  border-bottom:1px solid rgba(117,130,168,.16);
}
.topic-panel-head > div{
  min-width:0;
}
.topic-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff5722,#ffb300);
  box-shadow:0 12px 24px rgba(255,87,34,.22);
  font-size:12px;
  font-weight:900;
}
.topic-panel h1{
  margin-top:10px;
  color:#18213a;
  font-size:34px;
  line-height:1.16;
  font-weight:900;
}
.topic-panel-head p{
  max-width:720px;
  margin-top:9px;
  color:#5f6b84;
  font-size:14px;
  line-height:1.7;
}
.topic-counts{
  display:grid;
  grid-template-columns:repeat(3,92px);
  gap:8px;
}
.topic-counts span{
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px;
  border-radius:8px;
  color:#536079;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.90);
  box-shadow:0 14px 30px rgba(45,72,132,.10);
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.topic-counts b{
  color:#ff5722;
  font-size:24px;
  line-height:1;
  font-weight:900;
}
.topic-list-main{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:16px;
}
.topic-card{
  position:relative;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:18px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(255,255,255,.90);
  border-radius:8px;
  background:rgba(255,255,255,.86);
  box-shadow:0 16px 34px rgba(48,71,132,.10);
  overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.topic-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,87,34,.08),transparent 40%);
}
.topic-card.app::before{
  background:linear-gradient(135deg,rgba(0,183,255,.10),transparent 42%);
}
.topic-card:hover{
  transform:translateY(-2px);
  border-color:#fff;
  box-shadow:0 22px 42px rgba(48,71,132,.15);
}
.topic-card-media{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 16px 30px rgba(45,72,132,.16);
}
.topic-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(18,23,45,.26),transparent 62%);
}
.topic-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .26s ease;
}
.topic-card:hover .topic-card-media img{
  transform:scale(1.05);
}
.topic-card-content{
  position:relative;
  z-index:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2px 4px;
}
.topic-card-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.topic-card-meta span{
  min-height:25px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0 10px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff5722,#ffb300);
  font-size:11px;
  font-weight:900;
}
.topic-card.app .topic-card-meta span{
  background:linear-gradient(135deg,#3f7eff,#00b7ff);
}
.topic-card-meta em{
  color:#74819c;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}
.topic-card h2{
  margin-top:9px;
  color:#1d2741;
  font-size:23px;
  line-height:1.28;
  font-weight:900;
}
.topic-card h2 a:hover{
  color:#ff5722;
}
.topic-card p{
  max-width:680px;
  margin-top:7px;
  color:#63708a;
  font-size:13px;
  line-height:1.7;
}
.topic-card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
}
.topic-app-strip{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 16px;
}
.topic-app-strip strong{
  flex:0 0 100%;
  color:#ff5722;
  font-size:12px;
  font-weight:900;
}
.topic-card.app .topic-app-strip strong{
  color:#3f7eff;
}
.topic-app-strip a{
  width:96px;
  min-width:96px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:#2c3954;
  font-size:14px;
  line-height:1.18;
  font-weight:900;
  text-align:center;
}
.topic-app-strip a:hover{
  color:#ff5722;
}
.topic-app-strip img{
  width:72px;
  height:72px;
  flex:0 0 auto;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 12px 24px rgba(37,61,122,.22);
}
.topic-app-strip span{
  max-width:100%;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.topic-card-btn{
  width:104px;
  height:36px;
  flex:0 0 104px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff5722,#ffb300);
  box-shadow:0 14px 26px rgba(255,87,34,.22);
  font-size:13px;
  font-weight:900;
}
.topic-card.app .topic-card-btn{
  background:linear-gradient(135deg,#3f7eff,#00b7ff);
  box-shadow:0 14px 26px rgba(63,126,255,.18);
}
.topic-card-btn:hover{
  color:#fff;
  filter:brightness(1.04);
}
.topic-pager{
  margin-top:18px;
}
.topic-extra{
  display:grid;
  grid-template-columns:1.12fr .96fr .92fr;
  gap:16px;
  margin-top:20px;
}
.topic-extra-card{
  min-width:0;
  min-height:188px;
  padding:16px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:8px;
  background:rgba(255,255,255,.82);
  box-shadow:0 18px 38px rgba(48,71,132,.12);
  backdrop-filter:blur(14px);
}
.topic-extra-feature{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:14px;
  padding:12px;
}
.topic-extra-feature img{
  width:100%;
  height:100%;
  min-height:164px;
  object-fit:cover;
  border-radius:8px;
}
.topic-extra-feature span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#7c4dff,#ff4fb8);
  font-size:12px;
  font-weight:900;
}
.topic-extra h2{
  color:#1d2741;
  font-size:19px;
  line-height:1.35;
  font-weight:900;
}
.topic-extra-feature h2{
  margin-top:11px;
}
.topic-extra h2 iconify-icon{
  color:#ff5722;
}
.topic-extra-feature p{
  margin-top:8px;
  color:#65718a;
  font-size:13px;
  line-height:1.65;
}
.topic-update-list h2,
.topic-keywords h2{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:13px;
}
.topic-update-list a{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  min-height:31px;
  color:#26334f;
  font-size:13px;
  font-weight:900;
}
.topic-update-list a + a{
  margin-top:7px;
}
.topic-update-list span{
  color:#ff5722;
  font-size:12px;
  font-weight:900;
}
.topic-update-list strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.topic-update-list em{
  color:#7f8aa2;
  font-size:12px;
  font-style:normal;
}
.topic-keywords div{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.topic-keywords a{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border-radius:999px;
  color:#536079;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(220,230,255,.90);
  font-size:12px;
  font-weight:900;
}
.topic-keywords a:hover{
  color:#fff;
  background:linear-gradient(135deg,#3f7eff,#00b7ff);
}
.topic-panel-head p,
.topic-card p,
.topic-extra-feature p{
  white-space:normal !important;
  overflow-wrap:anywhere;
}
@media (max-width:980px){
  .topic-panel-head,
  .topic-card,
  .topic-extra{
    grid-template-columns:1fr;
  }
  .topic-counts{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .topic-card-content{
    padding:0;
  }
}
@media (max-width:760px){
  .topic-page{
    padding-top:14px;
  }
  .topic-bg-block-a{
    width:430px;
    height:132px;
    right:-170px;
    top:128px;
  }
  .topic-bg-block-b{
    width:420px;
    height:150px;
    left:-190px;
    top:620px;
  }
  .topic-panel{
    padding:12px;
  }
  .topic-panel-head{
    gap:12px;
    padding-bottom:13px;
  }
  .topic-panel h1{
    font-size:25px;
  }
  .topic-panel-head p{
    font-size:13px;
  }
  .topic-counts{
    grid-template-columns:1fr;
  }
  .topic-counts span{
    min-height:58px;
  }
  .topic-card{
    gap:12px;
    padding:12px;
  }
  .topic-card h2{
    font-size:22px;
  }
  .topic-card p{
    font-size:12px;
  }
  .topic-card-bottom{
    display:block;
  }
  .topic-app-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-items:center;
    gap:12px;
  }
  .topic-app-strip strong{
    width:100%;
    grid-column:1 / -1;
  }
  .topic-app-strip a{
    width:auto;
    min-width:0;
  }
  .topic-card-btn{
    width:100%;
    margin-top:14px;
  }
  .topic-extra-feature{
    grid-template-columns:1fr;
  }
  .topic-extra-feature img{
    min-height:0;
    aspect-ratio:16/9;
  }
  .topic-update-list a{
    grid-template-columns:48px minmax(0,1fr);
  }
  .topic-update-list em{
    grid-column:2;
    margin-top:-6px;
  }
}

/* Topic detail */
.topic-detail-page{
  position:relative;
  padding:24px 0 12px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,87,34,.18),transparent 26%),
    linear-gradient(225deg,rgba(0,183,255,.18),transparent 30%),
    linear-gradient(180deg,#fff7ed 0%,#eef7ff 48%,#fff3fb 100%);
}
.topic-detail-page > .container{
  position:relative;
  z-index:2;
}
.topic-detail-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.topic-detail-orb,
.topic-detail-ribbon,
.topic-detail-dots{
  position:absolute;
  display:block;
}
.topic-detail-orb{
  border-radius:42px;
}
.topic-detail-orb-a{
  width:760px;
  height:260px;
  top:86px;
  right:-230px;
  transform:rotate(-13deg);
  background:linear-gradient(105deg,rgba(255,87,34,.30),rgba(255,179,0,.16));
}
.topic-detail-orb-b{
  width:680px;
  height:270px;
  left:-260px;
  top:560px;
  transform:rotate(14deg);
  background:linear-gradient(115deg,rgba(0,183,255,.26),rgba(124,77,255,.15));
}
.topic-detail-ribbon{
  width:520px;
  height:130px;
  right:7%;
  top:860px;
  border-radius:8px;
  transform:rotate(10deg);
  background:linear-gradient(90deg,rgba(255,79,184,.15),rgba(63,126,255,.11));
}
.topic-detail-dots{
  left:8%;
  bottom:240px;
  width:260px;
  height:150px;
  opacity:.56;
  transform:rotate(-10deg);
  background:
    radial-gradient(circle,rgba(255,87,34,.20) 0 4px,transparent 4px) 0 0/25px 25px,
    radial-gradient(circle,rgba(63,126,255,.18) 0 4px,transparent 4px) 12px 12px/25px 25px;
}
.topic-detail-hero{
  display:grid;
  grid-template-columns:390px minmax(0,1fr) 210px;
  gap:18px;
  align-items:stretch;
  padding:18px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:8px;
  background:rgba(255,255,255,.68);
  box-shadow:0 24px 56px rgba(50,72,132,.14);
  backdrop-filter:blur(18px);
}
.topic-detail-cover{
  position:relative;
  display:block;
  min-height:230px;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 18px 34px rgba(45,72,132,.18);
}
.topic-detail-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(14,21,42,.46),transparent 62%);
}
.topic-detail-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .28s ease;
}
.topic-detail-cover:hover img{
  transform:scale(1.05);
}
.topic-detail-hero-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 2px;
}
.topic-detail-kicker{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:#7b879f;
  font-size:12px;
  font-weight:900;
}
.topic-detail-kicker span{
  min-height:29px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#7c4dff,#ff4fb8);
  box-shadow:0 12px 22px rgba(124,77,255,.18);
}
.topic-detail-kicker em{
  font-style:normal;
}
.topic-detail-hero h1{
  margin-top:10px;
  color:#18213a;
  font-size:36px;
  line-height:1.18;
  font-weight:900;
}
.topic-detail-hero-intro{
  max-width:610px;
  margin-top:10px;
}
.topic-detail-hero-intro p{
  color:#5f6b84;
  font-size:14px;
  line-height:1.75;
}
.topic-detail-summary{
  display:grid;
  gap:9px;
  align-content:center;
}
.topic-detail-summary span{
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 10px;
  border-radius:8px;
  text-align:center;
  border:1px solid rgba(255,255,255,.90);
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 28px rgba(45,72,132,.10);
  color:#5e6b84;
  font-size:12px;
  font-weight:900;
}
.topic-detail-summary b{
  color:#ff5722;
  font-size:25px;
  line-height:1.05;
  font-weight:900;
}
.topic-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:18px;
  align-items:start;
  margin-top:18px;
}
.topic-detail-main,
.topic-detail-side{
  min-width:0;
}
.topic-detail-card,
.topic-side-card,
.topic-detail-more{
  border:1px solid rgba(255,255,255,.88);
  border-radius:8px;
  background:rgba(255,255,255,.84);
  box-shadow:0 18px 42px rgba(48,71,132,.12);
  backdrop-filter:blur(14px);
}
.topic-detail-card + .topic-detail-card{
  margin-top:16px;
}
.topic-detail-card > .topic-detail-section-head{
  padding:16px 18px 0;
  margin-bottom:0;
}
.topic-detail-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.topic-detail-section-head h2{
  display:flex;
  align-items:center;
  gap:7px;
  color:#1d2741;
  font-size:21px;
  line-height:1.35;
  font-weight:900;
}
.topic-detail-section-head h2 iconify-icon{
  color:#ff5722;
}
.topic-detail-section-head span,
.topic-detail-section-head a{
  color:#7a879e;
  font-size:12px;
  font-weight:900;
}
.topic-detail-section-head a:hover{
  color:#ff5722;
}
.topic-detail-rich{
  color:#5f6b84;
  font-size:14px;
  line-height:1.85;
}
.topic-detail-rich p + p{
  margin-top:9px;
}
.topic-detail-soft-list{
  display:flex;
  flex-direction:column;
  margin-top:12px;
}
.topic-soft-item{
  position:relative;
  display:grid;
  grid-template-columns:82px minmax(0,1fr) 94px;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  border-top:1px solid rgba(117,130,168,.13);
  background:linear-gradient(90deg,rgba(255,255,255,.48),rgba(255,255,255,.18));
  transition:background .22s ease,transform .22s ease,box-shadow .22s ease;
}
.topic-soft-item:first-child{
  border-top:0;
}
.topic-soft-item:hover{
  z-index:1;
  background:linear-gradient(90deg,rgba(255,246,239,.92),rgba(240,248,255,.76));
  box-shadow:0 14px 30px rgba(48,71,132,.10);
}
.topic-soft-item img{
  width:82px;
  height:82px;
  border-radius:19px;
  object-fit:cover;
  box-shadow:0 14px 24px rgba(37,61,122,.18);
}
.topic-soft-body{
  min-width:0;
}
.topic-soft-body h3{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:#1d2741;
  font-size:18px;
  line-height:1.35;
  font-weight:900;
}
.topic-soft-body h3 a{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.topic-soft-body h3 a:hover{
  color:#ff5722;
}
.topic-soft-body h3 span{
  min-height:23px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#3f7eff,#00b7ff);
  font-size:11px;
  font-weight:900;
}
.topic-soft-body p{
  margin-top:5px;
  color:#65718a;
  font-size:13px;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.topic-soft-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px 13px;
  margin-top:8px;
}
.topic-soft-meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#7f8aa2;
  font-size:12px;
  font-weight:800;
}
.topic-soft-meta iconify-icon{
  color:#ff5722;
}
.topic-soft-btn{
  width:94px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  border-radius:999px;
  color:#fff !important;
  background:linear-gradient(135deg,#ff5722,#ffb300);
  box-shadow:0 12px 24px rgba(255,87,34,.20);
  font-size:13px;
  font-weight:900;
  border:0;
}
.topic-soft-btn:hover{
  color:#fff;
  filter:brightness(1.04);
}
.topic-detail-pager{
  padding:16px;
  margin-top:0;
  border-top:1px solid rgba(117,130,168,.13);
}
.topic-detail-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.topic-side-card{
  padding:16px;
}
.topic-side-card h2{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:13px;
  color:#1d2741;
  font-size:18px;
  line-height:1.35;
  font-weight:900;
}
.topic-side-card h2 iconify-icon{
  color:#ff5722;
}
.topic-side-update ul{
  display:grid;
  gap:8px;
}
.topic-side-update li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:36px;
  padding:0 10px;
  border-radius:8px;
  background:rgba(245,248,255,.82);
  color:#6a768d;
  font-size:12px;
  font-weight:900;
}
.topic-side-update b{
  color:#25314c;
}
.topic-side-topics{
  display:grid;
  gap:10px;
}
.topic-side-topics h2{
  margin-bottom:3px;
}
.topic-side-topics a{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.topic-side-topics img{
  grid-row:span 2;
  width:92px;
  height:58px;
  border-radius:8px;
  object-fit:cover;
}
.topic-side-topics strong{
  min-width:0;
  color:#25314c;
  font-size:13px;
  line-height:1.35;
  font-weight:900;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.topic-side-topics span{
  color:#7f8aa2;
  font-size:12px;
  font-weight:800;
}
.topic-side-news a{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-height:31px;
  color:#26334f;
  font-size:13px;
  font-weight:900;
}
.topic-side-news a + a{
  margin-top:8px;
}
.topic-side-news span{
  color:#ff5722;
  font-size:12px;
}
.topic-side-news strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.topic-detail-more{
  margin-top:18px;
  padding:16px;
}
.topic-more-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.topic-more-grid a{
  min-width:0;
  display:block;
  overflow:hidden;
  border-radius:8px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(220,230,255,.90);
}
.topic-more-grid img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.topic-more-grid strong,
.topic-more-grid span{
  display:block;
  padding:0 12px;
}
.topic-more-grid strong{
  margin-top:10px;
  color:#22304d;
  font-size:15px;
  line-height:1.35;
  font-weight:900;
}
.topic-more-grid span{
  padding-bottom:12px;
  margin-top:4px;
  color:#7f8aa2;
  font-size:12px;
  font-weight:800;
}
@media (max-width:1080px){
  .topic-detail-hero,
  .topic-detail-layout{
    grid-template-columns:1fr;
  }
  .topic-detail-cover{
    min-height:0;
    aspect-ratio:16/8;
  }
  .topic-detail-summary{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .topic-detail-page{
    padding-top:14px;
  }
  .topic-detail-orb-a{
    width:430px;
    height:150px;
    right:-170px;
    top:130px;
  }
  .topic-detail-orb-b{
    width:430px;
    height:170px;
    left:-210px;
    top:710px;
  }
  .topic-detail-ribbon{
    right:-160px;
    top:1160px;
  }
  .topic-detail-hero,
  .topic-side-card,
  .topic-detail-more{
    padding:12px;
  }
  .topic-detail-cover{
    aspect-ratio:16/9;
  }
  .topic-detail-hero h1{
    font-size:27px;
  }
  .topic-detail-hero-intro p,
  .topic-detail-rich{
    font-size:13px;
  }
  .topic-detail-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .topic-detail-section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .topic-detail-card > .topic-detail-section-head{
    padding:14px 12px 0;
  }
  .topic-detail-soft-list{
    margin-top:10px;
  }
  .topic-soft-item{
    grid-template-columns:68px minmax(0,1fr);
    padding:13px 12px;
    gap:12px;
  }
  .topic-soft-item img{
    width:68px;
    height:68px;
    border-radius:16px;
  }
  .topic-soft-btn{
    grid-column:1 / -1;
    width:100%;
  }
  .topic-soft-body h3{
    font-size:16px;
  }
  .topic-soft-body p{
    font-size:12px;
  }
  .topic-soft-meta{
    gap:7px 10px;
  }
  .topic-more-grid{
    grid-template-columns:1fr;
  }
}

/* 关于我们页简版：后端提供栏目与正文数据 */
.about-page{
  padding:22px 0 4px;
  background:#f5f7fb;
}
.about-page::before,
.about-page::after{
  content:none;
}
.about-shell{
  position:relative;
  z-index:1;
}
.about-tabs{
  display:flex;
  align-items:center;
  gap:0;
  margin-top:14px;
  padding:0;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.about-tabs a{
  flex:0 0 auto;
  min-width:132px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-right:1px solid var(--color-line);
  color:#596579;
  font-size:15px;
  font-weight:800;
  transition:color .18s ease, background .18s ease;
}
.about-tabs a:last-child{
  border-right:0;
}
.about-tabs a:hover{
  color:var(--color-primary);
  background:#fff8f3;
}
.about-tabs a.active{
  color:#fff;
  background:var(--color-primary);
  box-shadow:none;
}
.about-content{
  margin-top:14px;
  padding:28px 30px 34px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-sm);
}
.about-content h1{
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--color-line);
  color:#1f2733;
  font-size:28px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:0;
}
.about-body{
  color:#4f5b6e;
  font-size:15px;
  line-height:1.95;
}
.about-body p + p{
  margin-top:14px;
}
@media (max-width:760px){
  .about-page{
    padding-top:14px;
  }
  .about-tabs{
    overflow-x:auto;
    scroll-snap-type:x proximity;
  }
  .about-tabs::-webkit-scrollbar{
    display:none;
  }
  .about-tabs a{
    min-width:112px;
    height:44px;
    padding:0 18px;
    font-size:14px;
    scroll-snap-align:start;
  }
  .about-content{
    padding:20px 16px 24px;
  }
  .about-content h1{
    font-size:24px;
  }
  .about-body{
    font-size:14px;
    line-height:1.9;
  }
}

/* =========================================================
   网站地图页
   ========================================================= */
.sitemap-page{
  position:relative;
  padding:22px 0 8px;
  overflow:hidden;
}
.sitemap-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.sitemap-bg-block{
  position:absolute;
  border-radius:40px;
  filter:blur(0);
}
.sitemap-bg-block-a{
  top:-80px;
  left:-100px;
  width:360px;
  height:360px;
  background:linear-gradient(135deg,rgba(255,122,89,.18),rgba(255,186,84,.12));
}
.sitemap-bg-block-b{
  right:-80px;
  bottom:20px;
  width:320px;
  height:320px;
  background:linear-gradient(145deg,rgba(93,105,255,.14),rgba(56,189,248,.10));
}
.sitemap-bg-dots{
  position:absolute;
  top:140px;
  right:160px;
  width:160px;
  height:160px;
  opacity:.22;
  background-image:radial-gradient(circle, rgba(106,120,160,.48) 1.3px, transparent 1.3px);
  background-size:14px 14px;
}
.sitemap-page > .container{
  position:relative;
  z-index:1;
}
.sitemap-breadcrumb{
  margin-bottom:14px;
}
.sitemap-panel{
  padding:18px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.88);
  background:rgba(255,255,255,.66);
  box-shadow:0 22px 52px rgba(52,74,136,.12);
  backdrop-filter:blur(16px);
}
.sitemap-panel-head{
  padding:2px 2px 16px;
  border-bottom:1px solid rgba(117,130,168,.16);
}
.sitemap-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#ff5722,#ffb300);
  box-shadow:0 12px 24px rgba(255,87,34,.22);
  font-size:12px;
  font-weight:900;
}
.sitemap-panel h1{
  margin-top:10px;
  color:#18213a;
  font-size:34px;
  line-height:1.16;
  font-weight:900;
}
.sitemap-panel-head p{
  margin-top:9px;
  color:#5f6b84;
  font-size:14px;
  line-height:1.72;
}
.sitemap-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.sitemap-card{
  display:flex;
  flex-wrap:wrap;
  gap:8px 9px;
  padding:14px;
  border-radius:8px;
  border:1px solid rgba(154,168,207,.20);
  background:rgba(255,255,255,.84);
  box-shadow:0 14px 30px rgba(45,72,132,.10);
}
.sitemap-card h2{
  width:100%;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 2px;
  color:#1e2740;
  font-size:17px;
  font-weight:900;
}
.sitemap-card h2 iconify-icon{
  color:#ff6a3a;
  font-size:19px;
}
.sitemap-card a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,146,113,.20);
  background:rgba(255,244,236,.95);
  color:#566177;
  font-size:13px;
  font-weight:700;
  transition:all .2s ease;
}
.sitemap-card a:hover{
  border-color:rgba(255,105,57,.46);
  background:#fff1e8;
  color:#ff5c27;
  transform:translateY(-1px);
}
@media (max-width:1024px){
  .sitemap-grid{
    gap:12px;
  }
}
@media (max-width:760px){
  .sitemap-page{
    padding-top:14px;
  }
  .sitemap-panel{
    padding:14px;
  }
  .sitemap-panel h1{
    font-size:28px;
  }
  .sitemap-panel-head p{
    font-size:13px;
    line-height:1.7;
  }
  .sitemap-grid{
    grid-template-columns:1fr;
  }
  .sitemap-card{
    padding:12px;
    gap:7px;
  }
  .sitemap-card h2{
    font-size:16px;
  }
  .sitemap-card a{
    min-height:30px;
    padding:0 10px;
    font-size:12px;
  }
  .sitemap-bg-block-a{
    width:250px;
    height:250px;
    left:-90px;
    top:-55px;
  }
  .sitemap-bg-block-b{
    width:210px;
    height:210px;
    right:-70px;
    bottom:10px;
  }
  .sitemap-bg-dots{
    display:none;
  }
}