@charset "utf-8";
/* ============================================================
   5300PK 首页新版 UI（2026-09-02 重构）
   仅首页引入 skin/css/home.css，作用于 body.home
   设计语言：浅色科技风 + 品牌蓝青渐变，附完整暗黑模式
   ============================================================ */

.home .hp-main{width:100%;}
.home .hp-inner{max-width:1200px;margin:0 auto;padding:76px 12px 30px;}

/* ---------- 顶部广告横幅 ---------- */
.hp-banner{margin-bottom:14px;}
.hp-banner img{display:block;width:100%;height:auto;max-height:96px;object-fit:cover;border-radius:16px;box-shadow:0 12px 30px -14px rgba(2,10,30,.35);}

/* ---------- Hero：H1 + 描述 + 栏目直达 ---------- */
.hp-hero{
  position:relative;
  overflow:hidden;
  margin-bottom:14px;
  padding: 1px 34px 1px;
  border-radius:20px;
  color:#fff;
  background:
    radial-gradient(560px 300px at 88% -40px, rgba(103,232,249,.35), transparent 60%),
    radial-gradient(420px 260px at -40px 120%, rgba(99,102,241,.28), transparent 55%),
    linear-gradient(118deg,#1d4ed8 0%,#2563eb 46%,#0ea5b7 100%);
  box-shadow:0 20px 44px -22px rgba(37,99,235,.65);
  }
.hp-hero:after{/* content:""; *//* position:absolute; *//* right:-70px; *//* top:-70px; *//* width:230px; *//* height:230px; */border:1px solid rgba(255,255,255,.18);border-radius:50%;}
.hp-hero:before{/* content:""; */position:absolute;right:-20px;top:-20px;width:150px;height:150px;border:1px solid rgba(255,255,255,.22);border-radius:50%;}
.hp-hero h1{margin: 0 0 5px;font-size:26px;font-weight: 800;line-height:1.4;letter-spacing:.5px;text-shadow:0 2px 12px rgba(2,10,30,.2);}
.hp-hero .hp-lead{margin:0 0 18px;max-width: 1200px;font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.92);}
.hp-hero .hp-lead strong{color:#fff;}
.hp-chips{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:2;}
.hp-chips a{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:14px;font-weight:600;backdrop-filter:blur(4px);transition:all .22s;}
.hp-chips a:before{content:"";width:7px;height:7px;border-radius:50%;background:#7ff0d2;box-shadow:0 0 0 3px rgba(127,240,210,.25);}
.hp-chips a:hover{background:#fff;color:#2563eb;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(2,10,30,.5);}
.hp-chips a:hover:before{background:#06b6d4;box-shadow:0 0 0 3px rgba(6,182,212,.25);}

/* ---------- 常用工具快捷条 ---------- */
.hp-quick{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 14px;padding:14px;background:#fff;border:1px solid rgba(226,232,240,.95);border-radius:16px;box-shadow:0 14px 34px -24px rgba(2,10,30,.38);}
.hp-quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;border-radius:12px;background:#f4f8ff;border:1px solid transparent;color:#334155;font-size:13.5px;font-weight:600;text-align:center;transition:all .2s;}
.hp-quick a:before{content:"";width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(6,182,212,.16));}
.hp-quick a:hover{background:linear-gradient(90deg,#2563eb,#0891b2);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(37,99,235,.55);}
.hp-quick a:hover:before{background:rgba(255,255,255,.28);}

/* ---------- 面板基类 ---------- */
.hp-panel{overflow:hidden;background:#fff;border:1px solid rgba(226,232,240,.95);border-radius:16px;box-shadow:0 14px 34px -24px rgba(2,10,30,.38);}

/* ---------- 面板标题条：垂直居中、标题不折行 ---------- */
.hp-ptitle{display:flex;align-items:center;gap:10px;padding:13px 16px 12px 20px;border-bottom:1px solid #eef2f7;}
.hp-ptitle:before{content:"";flex:none;width:4px;height:17px;border-radius:3px;background:linear-gradient(180deg,#2563eb,#22d3ee);}
.hp-ptitle h2{margin:0;font-size:17px;font-weight:800;line-height:1.2;color:#0f172a;letter-spacing:.4px;white-space:nowrap;}
.hp-ptitle .hp-sub{margin-left:2px;min-width:0;font-size:12.5px;font-weight:400;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hp-more{margin-left:auto;flex:none;font-size:13px;font-weight:600;color:#64748b;transition:color .2s;}
.hp-more:hover{color:#2563eb;}
.hp-ptitle .hp-sub+.hp-more{margin-left:16px;}

/* ---------- 左侧：全站最新列表 ---------- */
.hp-split{display:flex;gap:14px;margin-bottom:14px;align-items:stretch;}
.hp-col-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.hp-side{flex:0 0 32.4%;width:32.4%;display:flex;flex-direction:column;gap:14px;justify-content:flex-start;}
.hp-side .hp-hot{flex:1;}
.hp-lst{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:8px 18px 2px;}
.hp-lst li{display:flex;align-items:center;gap:9px;min-width:0;padding:9px 2px;border-bottom:1px dashed #eef2f7;}
.hp-lst .hp-d{flex:none;min-width:44px;padding:2px 7px;border-radius:7px;background:rgba(37,99,235,.09);color:#2563eb;font-size:12px;font-weight:600;text-align:center;}
.hp-lst li a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155;font-size:14px;transition:color .2s;}
.hp-lst li a:hover{color:#2563eb;}
.hp-pager{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:auto;padding:13px 18px 16px;}
.hp-pager>a.jp-previous,.hp-pager>a.jp-next{display:inline-block;padding:6px 20px;border-radius:999px;background:#fff;border:1px solid #e2e8f0;color:#64748b;font-size:13px;cursor:pointer;transition:all .2s;}
.hp-pager>a.jp-previous:hover,.hp-pager>a.jp-next:hover{background:linear-gradient(90deg,#2563eb,#0891b2);border-color:transparent;color:#fff;}
.hp-pager>a:not(.jp-previous):not(.jp-next){display:none;}
.hp-pager .jp-hidden{display:none;}
.hp-pager>a.jp-disabled{opacity:.45;pointer-events:none;}

/* ---------- 侧栏：客户端 / 排行 / 广告 ---------- */
.hp-client{position:relative;overflow:hidden;padding:24px 22px 22px;text-align:center;background:linear-gradient(120deg,#0f172a 0%,#1e3a8a 70%,#0e7490 130%);}
.hp-client h3{margin:0 0 6px;color:#fff;font-size:20px;font-weight:800;letter-spacing:.5px;}
.hp-client p{margin:0 0 16px;color:#bae6fd;font-size:13px;}
.hp-btn{display:inline-block;padding:9px 24px;border-radius:999px;background:linear-gradient(90deg,#f59e0b,#f97316);color:#fff;font-size:14px;font-weight:700;box-shadow:0 8px 18px -8px rgba(249,115,22,.8);transition:all .22s;}
.hp-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(249,115,22,.9);color:#fff;}
.hp-hotlist{padding:6px 16px 12px;}
.hp-hotlist li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px dashed #eef2f7;}
.hp-hotlist li:last-child{border-bottom:0;}
.hp-rank{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:#eef2f7;color:#64748b;font-size:12px;font-weight:700;font-style:normal;}
.hp-hotlist li:nth-child(1) .hp-rank{background:#ef4444;color:#fff;}
.hp-hotlist li:nth-child(2) .hp-rank{background:#f97316;color:#fff;}
.hp-hotlist li:nth-child(3) .hp-rank{background:#f59e0b;color:#fff;}
.hp-hotlist li a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155;font-size:13.5px;transition:color .2s;}
.hp-hotlist li a:hover{color:#2563eb;}
.hp-hotlist .hp-num{flex:none;font-size:11px;font-style:normal;color:#94a3b8;}
.hp-sidead{display:none;}

/* ---------- 侧栏下移：全宽通栏广告 ---------- */
.hp-adband{display:flex;align-items:center;justify-content:center;margin:0 0 14px;padding:12px;overflow:hidden;background:#fff;border:1px solid rgba(226,232,240,.95);border-radius:16px;box-shadow:0 14px 34px -24px rgba(2,10,30,.38);}
.hp-adband img{max-width:100%;max-height:130px;width:auto;height:auto;border-radius:8px;}

/* ---------- 三栏分类资源（大图卡片） ---------- */
.hp-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;align-items:stretch;}
.hp-catlist{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 12px 14px;}
.hp-item{display:flex;flex-direction:column;overflow:hidden;min-width:0;padding:8px;border:1px solid #edf1f7;border-radius:12px;background:#fff;transition:transform .22s,border-color .22s,box-shadow .22s;}
.hp-item:hover{transform:translateY(-3px);border-color:#c7d8ff;box-shadow:0 14px 26px -16px rgba(37,99,235,.38);}
.hp-item .hp-thumb{display:block;flex:none;width:100%;height:120px;overflow:hidden;border-radius:9px;background:#f1f5f9;}
.hp-item .hp-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.hp-item:hover .hp-thumb img{transform:scale(1.06);}
.hp-item .hp-tt{flex:1;display:flex;flex-direction:column;min-width:0;padding:9px 2px 1px;}
.hp-item .hp-tt h3{margin:0 0 7px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:39px;font-size:13.5px;font-weight:600;line-height:1.45;color:#1e293b;}
.hp-item .hp-tt h3 a{color:inherit;transition:color .2s;}
.hp-item:hover .hp-tt h3 a{color:#2563eb;}
.hp-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;font-size:11.5px;color:#94a3b8;}
.hp-meta .sz{display:inline-block;padding:0 6px;border-radius:4px;background:rgba(6,182,212,.1);color:#0e7490;font-weight:600;}
.hp-meta .sz:empty{display:none;}

/* ---------- 文本行列表（教程区） ---------- */
.hp-rows{padding:6px 18px 12px;}
.hp-rows li{display:flex;align-items:center;gap:10px;min-width:0;padding:8.5px 2px;border-bottom:1px dashed #eef2f7;}
.hp-rows li:last-child{border-bottom:0;}
.hp-rows .hp-d{flex:none;min-width:42px;padding:2px 6px;border-radius:6px;background:rgba(37,99,235,.09);color:#2563eb;font-size:11.5px;font-weight:600;text-align:center;}
.hp-rows li a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155;font-size:13.5px;transition:color .2s;}
.hp-rows li a:hover{color:#2563eb;}

/* ---------- 栏目色系 ---------- */
.hp-cat .hp-ptitle.c-yx:before{background:linear-gradient(180deg,#2563eb,#22d3ee);}
.hp-cat .hp-ptitle.c-web:before{background:linear-gradient(180deg,#0891b2,#34d399);}
.hp-cat .hp-ptitle.c-gj:before{background:linear-gradient(180deg,#7c3aed,#c084fc);}
.hp-cat .hp-ptitle.c-jc:before{background:linear-gradient(180deg,#d97706,#fbbf24);}
.hp-cat .hp-ptitle.c-gl:before{background:linear-gradient(180deg,#059669,#2dd4bf);}
.hp-cat .hp-ptitle.c-gs:before{background:linear-gradient(180deg,#e11d48,#fb7185);}

/* ---------- SEO 简介区 ---------- */
.hp-seo{margin-bottom:0;padding:22px 26px 20px;background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);}
.hp-seo h2{margin:0 0 12px;font-size:18px;font-weight:800;color:#0f172a;}
.hp-seo h2:before{content:"◆ ";color:#2563eb;font-size:14px;vertical-align:2px;}
.hp-seo p{margin:0 0 10px;color:#475569;font-size:14px;line-height:1.95;text-align:justify;}
.hp-seo p:last-child{margin-bottom:0;}
.hp-seo p a{color:#2563eb;font-weight:600;}
.hp-seo p a:hover{text-decoration:underline;}

/* ============================================================
   暗黑模式（body.night.home）
   ============================================================ */
body.night.home .hp-banner img{box-shadow:0 12px 30px -14px rgba(0,0,0,.6);}
body.night.home .hp-quick{background:#182031;border-color:#2b3547;}
body.night.home .hp-quick a{background:#232d42;color:#dbe4f0;}
body.night.home .hp-quick a:hover{background:linear-gradient(90deg,#2563eb,#0891b2);color:#fff;}
body.night.home .hp-adband{background:#182031;border-color:rgba(71,85,105,.38);}
body.night.home .hp-panel{background:#182031;border-color:rgba(71,85,105,.38);}
body.night.home .hp-ptitle{border-bottom-color:#232d42;}
body.night.home .hp-ptitle h2,body.night.home .hp-seo h2{color:#e2e8f0;}
body.night.home .hp-ptitle .hp-sub{color:#64748b;}
body.night.home .hp-more{color:#94a3b8;}
body.night.home .hp-more:hover{color:#7db4f5;}
body.night.home .hp-lst li,body.night.home .hp-hotlist li,body.night.home .hp-item,body.night.home .hp-rows li{border-bottom-color:#232d42;}
body.night.home .hp-lst .hp-d,body.night.home .hp-rows .hp-d{background:rgba(59,130,246,.16);color:#7db4f5;}
body.night.home .hp-lst li a,body.night.home .hp-rows li a,body.night.home .hp-hotlist li a{color:#dbe4f0;}
body.night.home .hp-lst li a:hover,body.night.home .hp-rows li a:hover,body.night.home .hp-hotlist li a:hover{color:#7db4f5;}
body.night.home .hp-item{background:#1c2536;border-color:#2b3547;}
body.night.home .hp-item:hover{border-color:#3b5b9b;}
body.night.home .hp-item .hp-tt h3{color:#e2e8f0;}
body.night.home .hp-item:hover .hp-tt h3 a{color:#7db4f5;}
body.night.home .hp-meta{color:#64748b;}
body.night.home .hp-meta .sz{background:rgba(34,211,238,.12);color:#67e8f9;}
body.night.home .hp-rank{background:#232d42;color:#94a3b8;}
body.night.home .hp-seo{background:linear-gradient(180deg,#182031 0%,#141b2b 100%);}
body.night.home .hp-seo p{color:#94a3b8;}
body.night.home .hp-seo p a{color:#7db4f5;}
body.night.home .hp-pager>a.jp-previous,body.night.home .hp-pager>a.jp-next{background:#1c2536;border-color:#2b3547;color:#94a3b8;}
body.night.home .hp-pager>a.jp-previous:hover,body.night.home .hp-pager>a.jp-next:hover{color:#fff;}

/* ============================================================
   响应式
   ============================================================ */
@media screen and (max-width:1024px){
  .hp-hero h1{font-size:22px;}
  .hp-quick{grid-template-columns:repeat(3,1fr);}
}
@media screen and (max-width:900px){
  .hp-split{flex-direction:column;}
  .hp-side{width:100%;}
  .hp-cols3{grid-template-columns:1fr;}
}
@media screen and (max-width:600px){
  .home .hp-inner{padding:64px 10px 20px;}
  .hp-hero{padding:20px 18px 18px;border-radius:16px;}
  .hp-hero h1{font-size:18.5px;}
  .hp-hero .hp-lead{font-size:13.5px;line-height:1.8;}
  .hp-chips a{padding:7px 13px;font-size:13px;}
  .hp-quick{grid-template-columns:repeat(2,1fr);gap:8px;padding:10px;}
  .hp-quick a{padding:10px 4px;}
  .hp-lst{grid-template-columns:1fr;}
  .hp-banner img{max-height:none;border-radius:10px;}
}

/* ============================================================
   移动端增强适配（手机优先细节优化，2026-09-02 追加）
   ============================================================ */
@media screen and (max-width:600px){
  .home .hp-inner{padding:66px 10px 18px;}
  .hp-banner img{max-height:70px;border-radius:12px;}

  .hp-hero{padding:18px 16px 16px;}
  .hp-hero h1{font-size:18px;letter-spacing:.2px;}
  .hp-hero .hp-lead{font-size:13px;line-height:1.8;margin-bottom:14px;}
  .hp-chips{gap:8px;}
  .hp-chips a{padding:7px 12px;font-size:12.5px;gap:6px;}
  .hp-chips a:before{width:6px;height:6px;}

  .hp-quick{gap:8px;padding:10px;}
  .hp-quick a{gap:5px;padding:9px 4px;font-size:12.5px;}
  .hp-quick a:before{width:28px;height:28px;border-radius:8px;}

  .hp-ptitle{padding:11px 12px 10px 16px;}
  .hp-ptitle h2{font-size:15.5px;}
  .hp-ptitle .hp-sub{display:none;}
  .hp-ptitle .hp-sub+.hp-more{margin-left:auto;}
  .hp-more{font-size:12.5px;}

  .hp-split,.hp-cols3{gap:12px;}
  .hp-side{gap:12px;}
  .hp-lst{padding:6px 12px 0;}
  .hp-lst li{padding:8px 2px;}
  .hp-lst .hp-d{min-width:40px;padding:2px 6px;font-size:11.5px;}
  .hp-lst li a{font-size:13.5px;}
  .hp-pager{padding:10px 12px 14px;}

  .hp-client{padding:18px 16px 16px;}
  .hp-client h3{font-size:18px;}
  .hp-client p{font-size:12.5px;line-height:1.7;}
  .hp-btn{padding:8px 20px;font-size:13px;}
  .hp-hotlist{padding:4px 12px 10px;}
  .hp-hotlist li{padding:7px 2px;}
  .hp-hotlist li a{font-size:13px;}

  .hp-adband{padding:8px;}
  .hp-adband img{max-height:100px;}

  .hp-catlist{gap:8px;padding:10px 10px 12px;}
  .hp-item{padding:6px;}
  .hp-item .hp-thumb{height:92px;border-radius:8px;}
  .hp-item .hp-tt h3{font-size:12.5px;min-height:auto;margin-bottom:5px;}
  .hp-meta{font-size:11px;}

  .hp-rows{padding:4px 12px 8px;}
  .hp-rows li{padding:7px 2px;}
  .hp-rows li a{font-size:13px;}
  .hp-rows .hp-d{min-width:38px;padding:2px 5px;font-size:11px;}

  .hp-seo{padding:16px 16px 14px;}
  .hp-seo h2{font-size:16px;}
  .hp-seo p{font-size:13px;line-height:1.85;text-align:left;}
}

@media screen and (max-width:420px){
  .hp-hero h1{font-size:16.5px;}
  .hp-chips a{padding:6px 10px;font-size:12px;}
  .hp-quick a{font-size:12px;}
  .hp-quick a:before{width:25px;height:25px;}
  .hp-item .hp-thumb{height:80px;}
  .hp-lst li a,.hp-rows li a{font-size:13px;}
  .hp-hotlist .hp-num{display:none;}
  .hp-client p{font-size:12px;}
}

/* ============================================================
   教程/攻略/故事 Tab 专区（沿用 5300PK 官网“图卡+列表”方式）
   ============================================================ */
.home .hp-zone{padding-bottom:6px;}
.home .hp-zone .hp-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 0;}
.home .hp-zone .cmsgoto{padding:7px 16px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:13.5px;font-weight:600;transition:all .2s;}
.home .hp-zone .cmsgoto:hover{color:#2563eb;background:rgba(37,99,235,.09);}
.home .hp-zone .cmsgoto.active{color:#fff;background:linear-gradient(90deg,#2563eb,#06b6d4);box-shadow:0 6px 14px -6px rgba(37,99,235,.6);}
.home .hp-zone .article-cms-box{display:none;padding-top:10px;}
.home .hp-zone .article-cms-box.active{display:block;}
.home .hp-zone .hp-catlist{grid-template-columns:repeat(4,1fr);gap:12px;padding:12px 16px 2px;}
.home .hp-zone .hp-item .hp-thumb{height:150px;border-radius:10px;}
.home .hp-zone .hp-item .hp-tt{padding:8px 2px 1px;}
.home .hp-zone .hp-item .hp-tt h3{font-size:13px;min-height:auto;}
.home .hp-zone .hp-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding:2px 16px 12px;}
.home .hp-zone .hp-rows li{min-width:0;}
.home .hp-zone .hp-rows li a{min-width:0;}

body.night.home .hp-zone .cmsgoto{background:#232d42;color:#94a3b8;}
body.night.home .hp-zone .cmsgoto:hover{color:#7db4f5;background:rgba(96,165,250,.14);}
body.night.home .hp-zone .cmsgoto.active{color:#fff;background:linear-gradient(90deg,#2563eb,#06b6d4);}

@media screen and (max-width:600px){
  .home .hp-zone .hp-tabs{padding:12px 10px 0;gap:7px;}
  .home .hp-zone .cmsgoto{padding:6px 12px;font-size:12.5px;}
  .home .hp-zone .hp-catlist{padding:8px 10px 2px;}
  .home .hp-zone .hp-rows{grid-template-columns:1fr;padding:2px 10px 10px;}
}

@media screen and (max-width:900px){
  .home .hp-zone .hp-catlist{grid-template-columns:1fr 1fr;}
}
@media screen and (max-width:600px){
  .home .hp-zone .hp-item .hp-thumb{height:92px;}
}
@media screen and (max-width:420px){
  .home .hp-zone .hp-item .hp-thumb{height:80px;}
}

/* ============================================================
   白色主题覆盖层（2026-09-03，全站统一白底浅色）
   ============================================================ */
.hp-chips{display:none!important;}
body.home{background:#fff;}

/* Hero 白色化：白底 + 浅灰描边，不用深色块 */
.hp-hero{
  background:#fff;
  border:1px solid #ececee;
  color:#111;
  box-shadow: 0 14px px -22px rgba(0,0,0,.10);
  }
.hp-hero:before,.hp-hero:after{border-color:#ececee;}
.hp-hero h1{color:#111;text-shadow:none;}
.hp-hero .hp-lead{color:#52525b;margin-bottom:2px;}
.hp-hero .hp-lead strong{color:#111;}

/* 面板与区块 */
.hp-panel{background:#fff;border-color:#e4e4e6;box-shadow:0 14px 34px -24px rgba(0,0,0,.22);}
.hp-quick{background:#fff;border-color:#e4e4e6;box-shadow:0 14px 34px -24px rgba(0,0,0,.25);}
.hp-quick a{background:#f4f4f5;color:#27272a;}
.hp-quick a:before{background:linear-gradient(135deg,#d4d4d8,#a1a1aa);}
.hp-quick a:hover{background:#111;color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,0,0,.4);}
.hp-quick a:hover:before{background:rgba(255,255,255,.3);}
.hp-adband{background:#fff;border-color:#e4e4e6;}

/* 标题与文字 */
.hp-ptitle{border-bottom-color:#ececee;}
.hp-ptitle:before{background:linear-gradient(180deg,#18181b,#4b4b52);}
.hp-cat .hp-ptitle.c-yx:before,.hp-cat .hp-ptitle.c-web:before,.hp-cat .hp-ptitle.c-gj:before,
.hp-cat .hp-ptitle.c-jc:before,.hp-cat .hp-ptitle.c-gl:before,.hp-cat .hp-ptitle.c-gs:before{background:linear-gradient(180deg,#18181b,#4b4b52);}
.hp-ptitle h2,.hp-seo h2{color:#111;}
.hp-ptitle .hp-sub{color:#8e8e95;}
.hp-more{color:#71717a;}
.hp-more:hover{color:#000;}

/* 列表 */
.hp-lst li,.hp-hotlist li,.hp-rows li{border-bottom-color:#ededef;}
.hp-lst .hp-d,.hp-rows .hp-d{background:#ececee;color:#18181b;}
.hp-lst li a,.hp-rows li a,.hp-hotlist li a{color:#333338;}
.hp-lst li a:hover,.hp-rows li a:hover,.hp-hotlist li a:hover{color:#000;}
.hp-lst .add a{color:#111;font-weight:700;}
.hp-rank{background:#e8e8ea;color:#52525b;}
.hp-hotlist li:nth-child(1) .hp-rank{background:#111;color:#fff;}
.hp-hotlist li:nth-child(2) .hp-rank{background:#333;color:#fff;}
.hp-hotlist li:nth-child(3) .hp-rank{background:#555;color:#fff;}
.hp-num{color:#9e9ea5;}

/* 侧栏客户端卡 / 下载按钮 */
.hp-client{background:#fff;border:1px solid #ececee;}
.hp-client h3{color:#111;}
.hp-client p{color:#71717a;}
.hp-btn{background:#111;color:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.45);}
.hp-btn:hover{background:#333;color:#fff;box-shadow:0 12px 24px -8px rgba(0,0,0,.5);}

/* 图卡 */
.hp-item{background:#fff;border-color:#ececee;}
.hp-item:hover{border-color:#9ca3af;box-shadow:0 14px 26px -16px rgba(0,0,0,.28);}
.hp-item .hp-thumb{background:#f0f0f1;}
.hp-item .hp-tt h3{color:#1c1c1f;}
.hp-meta{color:#9e9ea5;}
.hp-meta .sz{background:#ececee;color:#444;}

/* SEO 区 */
.hp-seo{background:linear-gradient(180deg,#fff 0%,#f7f7f8 100%);}
.hp-seo h2:before{color:#111;}
.hp-seo p{color:#3f3f46;}
.hp-seo p a{color:#111;}

/* Tab 专区 */
.home .hp-zone .cmsgoto{background:#f1f1f2;color:#3f3f46;}
.home .hp-zone .cmsgoto:hover{background:#e4e4e5;color:#000;}
.home .hp-zone .cmsgoto.active{background:#111;color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.5);}

/* 分页 */
.hp-pager>a.jp-previous,.hp-pager>a.jp-next{background:#fff;border-color:#e0e0e2;color:#71717a;}
.hp-pager>a.jp-previous:hover,.hp-pager>a.jp-next:hover{background:#111;border-color:#111;color:#fff;}

/* ---------- 黑白：夜间适配 ---------- */
body.night.home{background:linear-gradient(180deg,#0d0d0f 0%,#0a0a0c 55%,#080809 100%);background-attachment:fixed;}
body.night.home .hp-panel,body.night.home .hp-quick,body.night.home .hp-adband{background:#19191c;border-color:#2d2d31;}
body.night.home .hp-quick a{background:#232327;color:#d4d4d6;}
body.night.home .hp-quick a:hover{background:#3f3f46;color:#fff;}
body.night.home .hp-ptitle{border-bottom-color:#2c2c30;}
body.night.home .hp-ptitle h2,body.night.home .hp-seo h2,body.night.home .hp-item .hp-tt h3{color:#f4f4f5;}
body.night.home .hp-ptitle .hp-sub{color:#7d7d85;}
body.night.home .hp-more{color:#a1a1a8;}
body.night.home .hp-more:hover{color:#fff;}
body.night.home .hp-lst li,body.night.home .hp-hotlist li,body.night.home .hp-rows li{border-bottom-color:#2c2c30;}
body.night.home .hp-lst .hp-d,body.night.home .hp-rows .hp-d{background:#33333a;color:#e5e5e5;}
body.night.home .hp-lst li a,body.night.home .hp-rows li a,body.night.home .hp-hotlist li a{color:#d4d4d6;}
body.night.home .hp-lst li a:hover,body.night.home .hp-rows li a:hover,body.night.home .hp-hotlist li a:hover{color:#fff;}
body.night.home .hp-rank{background:#2e2e33;color:#b5b5bc;}
body.night.home .hp-hotlist li:nth-child(1) .hp-rank{background:#fafafa;color:#111;}
body.night.home .hp-hotlist li:nth-child(2) .hp-rank{background:#d9d9dc;color:#111;}
body.night.home .hp-hotlist li:nth-child(3) .hp-rank{background:#b3b3b8;color:#111;}
body.night.home .hp-item{background:#202024;border-color:#303036;}
body.night.home .hp-item:hover{border-color:#52525b;}
body.night.home .hp-seo{background:linear-gradient(180deg,#1c1c1f 0%,#161618 100%);}
body.night.home .hp-seo p{color:#9e9ea5;}
body.night.home .hp-seo p a{color:#f4f4f5;}
body.night.home .hp-meta{color:#8e8e95;}
body.night.home .hp-meta .sz{background:#33333a;color:#d4d4d6;}
body.night.home .hp-zone .cmsgoto{background:#26262b;color:#b9b9c0;}
body.night.home .hp-zone .cmsgoto:hover{background:#3a3a40;color:#fff;}
body.night.home .hp-zone .cmsgoto.active{background:#f4f4f5;color:#111;}
body.night.home .hp-pager>a.jp-previous,body.night.home .hp-pager>a.jp-next{background:#202024;border-color:#303036;color:#b9b9c0;}
body.night.home .hp-pager>a.jp-previous:hover,body.night.home .hp-pager>a.jp-next:hover{background:#f4f4f5;border-color:#f4f4f5;color:#111;}

/* ============================================================
   hp-quick 快捷广告位（JS 调用，内容来自后台标签 qad_code）
   ============================================================ */
.hp-quick-ad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 14px;padding:16px;background:#fff;border:1px solid #e4e4e6;border-radius:16px;box-shadow:0 14px 34px -24px rgba(0,0,0,.25);}
.hp-quick-ad .qad-loading{grid-column:1/-1;padding:18px 0;color:#9e9ea5;font-size:13px;text-align:center;}
.qad{display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px 16px 16px;border-radius:14px;background:#f4f4f5;color:#27272a;transition:background .2s,color .2s,transform .2s,box-shadow .2s;}
.qad:hover{background:#111;color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,0,0,.4);}
.qad i{align-self:flex-start;flex:none;padding:1px 8px;border-radius:5px;background:#e0e0e2;color:#6f6f76;font-size:11px;font-style:normal;font-weight:700;line-height:18px;}
.qad b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;}
.qad span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9e9ea5;font-size:12px;}
.qad:hover i{background:#fff;color:#111;}
.qad:hover span{color:#c6c6cb;}
body.night.home .hp-quick-ad{background:#19191c;border-color:#2d2d31;}
body.night.home .qad{background:#232327;color:#d4d4d6;}
body.night.home .qad:hover{background:#f4f4f5;color:#111;box-shadow:none;}
body.night.home .qad i{background:#33333a;color:#b9b9c0;}
body.night.home .qad:hover i{background:#111;color:#fff;}
body.night.home .qad span{color:#8e8e95;}
@media screen and (max-width:1024px){
  .hp-quick-ad{grid-template-columns:1fr 1fr;gap:12px;}
}
@media screen and (max-width:600px){
  .hp-quick-ad{gap:10px;padding:12px;}
  .qad{padding:14px 12px 12px;}
  .qad b{font-size:14px;}
}
@media screen and (max-width:420px){
  .qad span{font-size:11px;}
}

/* ============================================================
   H1 下方简介：无缝横向滚动 + 首页颜色统一收尾
   ============================================================ */
.hp-lead{overflow:hidden;white-space:nowrap;max-width:none;margin-bottom:2px;}
.hp-lead-track{display:inline-flex;width:max-content;animation:hpLead 34s linear infinite;}
.hp-lead:hover .hp-lead-track{animation-play-state:paused;}
.hp-lead-item{flex:none;white-space:nowrap;padding-right: 80px;}
@keyframes hpLead{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* 底部 SEO 区：再次缩小淡化，正文仍保留给搜索引擎 */
.home .hp-seo{padding:10px 16px 9px;}
.home .hp-seo h2{font-size:12px;margin:0 0 4px;color:#8a8a91;font-weight:700;}
.home .hp-seo h2:before{font-size:10px;vertical-align:1px;}
.home .hp-seo p{font-size:10px;color:#b2b2b8;line-height:1.7;margin:0 0 4px;text-align:left;}
.home .hp-seo p a{color:#92929a;}
.home .hp-seo p a:hover{color:#3f3f46;}
body.night.home .hp-seo h2{color:#7d7d85;}
body.night.home .hp-seo p{color:#5f5f66;}
body.night.home .hp-seo p a{color:#8f8f96;}
body.night.home .hp-seo p a:hover{color:#fff;}
@media screen and (max-width:600px){
  .home .hp-seo{padding:8px 12px 8px;}
  .home .hp-seo h2{font-size:11.5px;}
  .home .hp-seo p{font-size:9.5px;line-height:1.65;}
}

/* 2026-09-03 hp-meta 元信息: 日期/大小靠左, 最后一项(分类)靠右 */
.hp-meta{justify-content:flex-start;}
.hp-meta span:last-child{margin-left:auto;}

/* ============================================================
   2026-09-08 hp-client 背景图(600x399) + 深浅色主题统一适配
   ============================================================ */
.hp-panel.hp-client{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:210px;
  padding:26px 22px;
  border:none;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(2,6,23,.28) 0%, rgba(2,6,23,.62) 100%),
    url('/static/upload/image/20260205/1770294564499145.webp') center center / cover no-repeat,
    #0f172a;
}
.hp-client h3{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.hp-client p{color:#e0f2fe;text-shadow:0 1px 3px rgba(0,0,0,.45);}
.hp-client .hp-btn{
  background:linear-gradient(90deg,#f59e0b,#f97316);
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.55);
}
.hp-client .hp-btn:hover{color:#fff;box-shadow:0 12px 24px -8px rgba(0,0,0,.6);}

@media (max-width:1024px){
  .hp-panel.hp-client{min-height:190px;}
}
@media (max-width:767px){
  .hp-panel.hp-client{min-height:170px;padding:20px 16px;}
  .hp-client h3{font-size:17px;}
  .hp-client p{font-size:12.5px;line-height:1.7;}
}

/* ============================================================
   2026-09-08 hp-client 背景图(600x399) + 深浅色主题统一适配
   ============================================================ */
.hp-panel.hp-client{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:210px;
  padding:26px 22px;
  border:none;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(2,6,23,.28) 0%, rgba(2,6,23,.62) 100%),
    url('/static/upload/image/20260205/1770294564499145.webp') center center / cover no-repeat,
    #0f172a;
}
.hp-client h3{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.hp-client p{color:#e0f2fe;text-shadow:0 1px 3px rgba(0,0,0,.45);}
.hp-client .hp-btn{
  background:linear-gradient(90deg,#f59e0b,#f97316);
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.55);
}
.hp-client .hp-btn:hover{color:#fff;box-shadow:0 12px 24px -8px rgba(0,0,0,.6);}

@media (max-width:1024px){
  .hp-panel.hp-client{min-height:190px;}
}
@media (max-width:767px){
  .hp-panel.hp-client{min-height:170px;padding:20px 16px;}
  .hp-client h3{font-size:17px;}
  .hp-client p{font-size:12.5px;line-height:1.7;}
}

/* ============================================================

2026-09-09 首页分页: 显示页码数字 */
.hp-pager{gap:6px;}
.hp-pager>a:not(.jp-previous):not(.jp-next){
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 5px;border-radius:50%;
  background:#fff;border:1px solid #e2e8f0;color:#64748b;
  font-size:13px;line-height:1;text-decoration:none;cursor:pointer;
  transition:all .2s;
}
.hp-pager>a:not(.jp-previous):not(.jp-next):hover{
  background:linear-gradient(90deg,#2563eb,#0891b2);border-color:transparent;color:#fff;
}
.hp-pager>a.jp-current{
  background:linear-gradient(90deg,#2563eb,#06b6d4);border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 6px 14px -6px rgba(37,99,235,.6);
}
body.night.home .hp-pager>a:not(.jp-previous):not(.jp-next){
  background:#1c2536;border-color:#2b3547;color:#94a3b8;
}
body.night.home .hp-pager>a.jp-current{
  background:linear-gradient(90deg,#2563eb,#06b6d4);color:#fff;
}
/* ============================================================
   2026-09-09 QQ群右下角悬浮窗(后台: 定制标签 qq_*)
   ============================================================ */
.hp-qqfloat{position:fixed;right:18px;bottom:18px;z-index:9999;font-family:"Microsoft YaHei",Arial,sans-serif;}
.hp-qqfloat-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;border:0;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;cursor:pointer;box-shadow:0 8px 22px -6px rgba(22,163,74,.65);transition:transform .2s,box-shadow .2s;}
.hp-qqfloat-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(22,163,74,.8);}
.hp-qqfloat-btn .qq-ico{font-size:20px;font-weight:900;line-height:1;font-style:normal;}
.hp-qqfloat-btn .qq-txt{font-size:10px;line-height:1.1;margin-top:2px;}
.hp-qqfloat-panel{display:none;position:absolute;right:0;bottom:70px;width:210px;padding:16px 16px 14px;border-radius:16px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 16px 38px -14px rgba(2,10,30,.35);text-align:left;}
.hp-qqfloat.open .hp-qqfloat-panel{display:block;}
.hp-qqfloat.open .hp-qqfloat-btn{display:none;}
.hp-qqfloat-close{position:absolute;top:7px;right:10px;border:0;background:none;font-size:18px;line-height:1;color:#9ca3af;cursor:pointer;}
.hp-qqfloat-close:hover{color:#111;}
.hp-qqf-tag{display:inline-block;padding:1px 9px;border-radius:999px;background:linear-gradient(90deg,#22c55e,#0ea5e9);color:#fff;font-size:11px;font-weight:700;}
.hp-qqf-name{display:block;margin:9px 0 5px;color:#0f172a;font-size:16px;font-weight:800;}
.hp-qqf-no{display:block;margin-bottom:9px;color:#475569;font-size:13px;cursor:pointer;}
.hp-qqf-qr{display:block;width:130px;height:130px;margin:0 auto 10px;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:4px;box-sizing:border-box;}
.hp-qqf-btn{display:block;text-align:center;padding:8px 0;border-radius:999px;background:linear-gradient(90deg,#22c55e,#0ea5e9);color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:opacity .2s;}
.hp-qqf-btn:hover{opacity:.9;color:#fff;}
.hp-qqfloat img[src=""],.hp-qqfloat a[href=""]{display:none;}
@media (max-width:767px){
  .hp-qqfloat{right:10px;bottom:10px;}
  .hp-qqfloat-btn{width:52px;height:52px;}
  .hp-qqfloat-panel{right:0;bottom:62px;width:190px;padding:14px 13px 12px;}
  .hp-qqf-qr{width:110px;height:110px;}
}