/* roulang page: index */
:root{
  --candy:#ff2f6e;
  --grape:#6b4dff;
  --ink:#0b0910;
  --panel:#171321;
  --mist:#f2eef7;
  --fog:#a49cb6;
  --edge:rgba(255,255,255,.10);
  --round:18px;
  --lift:0 20px 44px rgba(0,0,0,.5);
  --pad:26px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--mist);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.72;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.xiepdldhb-wrap{width:min(1180px,92%);margin-inline:auto}

/* 顶栏 */
.xiepdldhb-top{position:sticky;top:0;z-index:30;background:rgba(11,9,16,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
.xiepdldhb-top .xiepdldhb-wrap{display:flex;align-items:center;gap:16px;min-height:66px}
.xiepdldhb-brand{display:flex;align-items:center;gap:10px;font-weight:700;flex:0 0 auto}
.xiepdldhb-brand i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--candy),var(--grape));box-shadow:0 8px 20px rgba(255,47,110,.34)}
.xiepdldhb-brand span{font-size:16px;letter-spacing:.5px}
.xiepdldhb-nav{margin-left:auto;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.xiepdldhb-nav::-webkit-scrollbar{display:none}
.xiepdldhb-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--fog);font-size:14px;white-space:nowrap;transition:.22s}
.xiepdldhb-nav a:hover{color:#fff;background:rgba(255,255,255,.09)}

/* 首屏 */
.xiepdldhb-hero{position:relative;overflow:hidden;padding:62px 0 70px;background:#0a0810}
.xiepdldhb-hero::before{content:"";position:absolute;inset:0;background:url(/assets/images/backpic/back-5.webp) center/cover no-repeat;opacity:.3}
.xiepdldhb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(104deg,rgba(11,9,16,.97) 20%,rgba(11,9,16,.6) 60%,rgba(11,9,16,.9))}
.xiepdldhb-hero .xiepdldhb-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}
.xiepdldhb-kicker{display:inline-block;font-size:12.5px;letter-spacing:2.4px;color:var(--candy);margin-bottom:14px}
.xiepdldhb-hero h1{font-size:clamp(26px,4.4vw,44px);line-height:1.24;letter-spacing:.5px;font-weight:800}
.xiepdldhb-hero h1 em{font-style:normal;color:var(--candy)}
.xiepdldhb-sub{margin-top:14px;font-size:clamp(15px,1.9vw,18px);color:#d8d1e4}
.xiepdldhb-lead{margin-top:18px;max-width:620px;color:var(--fog);font-size:14.5px;line-height:1.86}
.xiepdldhb-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.xiepdldhb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.22s}
.xiepdldhb-btn-main{background:linear-gradient(135deg,var(--candy),var(--grape));color:#fff;box-shadow:0 12px 26px rgba(255,47,110,.3)}
.xiepdldhb-btn-main:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(255,47,110,.42)}
.xiepdldhb-btn-ghost{border-color:var(--edge);background:rgba(255,255,255,.05);color:var(--mist)}
.xiepdldhb-btn-ghost:hover{background:rgba(255,255,255,.12)}
.xiepdldhb-btn:focus-visible,.xiepdldhb-nav a:focus-visible{outline:2px solid var(--candy);outline-offset:3px}
.xiepdldhb-poster{position:relative;aspect-ratio:9/16;max-width:296px;margin-inline:auto;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 62px rgba(0,0,0,.62)}
.xiepdldhb-poster img{width:100%;height:100%;object-fit:cover}

/* 版块通用 */
.xiepdldhb-sec{padding:66px 0}
.xiepdldhb-alt{background:#0e0a15}
.xiepdldhb-head{max-width:740px;margin-bottom:34px}
.xiepdldhb-head h2{font-size:clamp(21px,3.2vw,29px);letter-spacing:.4px;font-weight:800;margin-bottom:12px}
.xiepdldhb-head p{color:var(--fog);font-size:14.5px;line-height:1.84}
.xiepdldhb-thumb{position:relative;overflow:hidden;background:#1d1828;border-radius:12px}
.xiepdldhb-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.xiepdldhb-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;font-size:11.5px;background:rgba(11,9,16,.8);border:1px solid var(--edge);backdrop-filter:blur(6px);color:#fff}
.xiepdldhb-tag{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;color:#ffd8e5;background:rgba(255,47,110,.14);border:1px solid rgba(255,47,110,.32)}
.xiepdldhb-kind{display:inline-block;padding:3px 10px;border-radius:8px;font-size:12px;color:var(--fog);background:rgba(255,255,255,.06);white-space:nowrap}

/* 搜索 */
.xiepdldhb-find{display:flex;flex-wrap:wrap;gap:12px;padding:14px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--round)}
.xiepdldhb-find input{flex:1 1 280px;min-height:46px;border-radius:12px;border:1px solid var(--edge);background:#100d18;color:var(--mist);padding:0 16px;font-size:15px;outline:none;transition:.2s}
.xiepdldhb-find input::placeholder{color:#7f7791}
.xiepdldhb-find input:focus{border-color:var(--candy);box-shadow:0 0 0 3px rgba(255,47,110,.18)}

/* 分类 */
.xiepdldhb-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.xiepdldhb-cats li{padding:22px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--round);transition:.24s}
.xiepdldhb-cats li:hover{border-color:rgba(255,47,110,.4);transform:translateY(-3px)}
.xiepdldhb-cats p{margin-top:12px;color:var(--fog);font-size:13.5px;line-height:1.74}

/* 精选卡片 */
.xiepdldhb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.xiepdldhb-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--edge);border-radius:var(--round);overflow:hidden;transition:.26s}
.xiepdldhb-card:hover{transform:translateY(-5px);border-color:rgba(255,47,110,.42);box-shadow:var(--lift)}
.xiepdldhb-card .xiepdldhb-thumb{aspect-ratio:16/10;border-radius:0}
.xiepdldhb-card:hover .xiepdldhb-thumb img{transform:scale(1.06)}
.xiepdldhb-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px;flex:1}
.xiepdldhb-body h3{font-size:16px;font-weight:700}
.xiepdldhb-body p{color:var(--fog);font-size:13.5px;line-height:1.72}
.xiepdldhb-meta{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:#8b8399}

/* 最新更新列表 */
.xiepdldhb-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.xiepdldhb-list li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:14px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--round);transition:.24s}
.xiepdldhb-list li:hover{border-color:rgba(107,77,255,.5);transform:translateY(-3px)}
.xiepdldhb-list .xiepdldhb-thumb{aspect-ratio:3/4}
.xiepdldhb-list h3{font-size:15.5px;margin-bottom:6px}
.xiepdldhb-list p{color:var(--fog);font-size:13.5px;line-height:1.7}

/* 榜单 */
.xiepdldhb-rank{background:var(--panel);border:1px solid var(--edge);border-radius:var(--round);overflow:hidden}
.xiepdldhb-rank li{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 20px;border-top:1px solid var(--edge);transition:.2s}
.xiepdldhb-rank li:first-child{border-top:0}
.xiepdldhb-rank li:hover{background:rgba(255,255,255,.045)}
.xiepdldhb-no{font-size:17px;font-weight:800;color:var(--candy);font-variant-numeric:tabular-nums}
.xiepdldhb-rank li:nth-child(n+4) .xiepdldhb-no{color:#6f6880}
.xiepdldhb-rank h3{font-size:15px;font-weight:600}
.xiepdldhb-state{font-size:12.5px;color:#9be0c4;white-space:nowrap}
.xiepdldhb-state.xiepdldhb-run{color:#ffc677}

/* 看点 */
.xiepdldhb-points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.xiepdldhb-points li{padding:26px 22px;border-radius:var(--round);background:linear-gradient(160deg,#1c1529,#141020);border:1px solid var(--edge)}
.xiepdldhb-points strong{display:block;font-size:30px;line-height:1;color:rgba(255,47,110,.6);margin-bottom:14px;font-variant-numeric:tabular-nums}
.xiepdldhb-points h3{font-size:16px;margin-bottom:8px}
.xiepdldhb-points p{color:var(--fog);font-size:13.5px;line-height:1.74}

/* 点评 */
.xiepdldhb-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.xiepdldhb-quotes li{padding:20px;border-radius:14px;background:var(--panel);border:1px solid var(--edge)}
.xiepdldhb-quotes b{display:block;font-size:15px;color:#fff;margin-bottom:9px}
.xiepdldhb-quotes p{color:var(--fog);font-size:13.5px;line-height:1.72}

/* 主题片单 */
.xiepdldhb-special{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.xiepdldhb-special li{background:var(--panel);border:1px solid var(--edge);border-radius:var(--round);overflow:hidden;transition:.24s}
.xiepdldhb-special li:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.xiepdldhb-special .xiepdldhb-thumb{aspect-ratio:16/9;border-radius:0}
.xiepdldhb-special h3{font-size:16px;padding:16px 18px 0}
.xiepdldhb-special p{padding:8px 18px 20px;color:var(--fog);font-size:13.5px;line-height:1.72}

/* 资讯 */
.xiepdldhb-news{display:grid;gap:14px}
.xiepdldhb-news li{display:grid;grid-template-columns:152px minmax(0,1fr);gap:18px;align-items:center;padding:14px;background:var(--panel);border:1px solid var(--edge);border-radius:14px;transition:.22s}
.xiepdldhb-news li:hover{border-color:rgba(255,47,110,.36);background:#1b1626}
.xiepdldhb-news .xiepdldhb-thumb{aspect-ratio:16/10}
.xiepdldhb-news h3{font-size:15.5px;margin-bottom:6px}
.xiepdldhb-news p{color:var(--fog);font-size:13.5px;line-height:1.7}
.xiepdldhb-time{display:inline-block;margin-top:8px;font-size:12.5px;color:#8b8399}

/* 收藏横幅 */
.xiepdldhb-banner{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--edge);padding:46px 38px}
.xiepdldhb-banner::before{content:"";position:absolute;inset:0;background:url(/assets/images/backpic/back-8.webp) center/cover no-repeat;opacity:.3}
.xiepdldhb-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(11,9,16,.94),rgba(11,9,16,.55))}
.xiepdldhb-banner-in{position:relative;z-index:2;max-width:600px}
.xiepdldhb-banner h2{font-size:clamp(20px,3vw,27px);margin-bottom:12px}
.xiepdldhb-banner p{color:#cfc7dd;font-size:14px;line-height:1.8}
.xiepdldhb-banner .xiepdldhb-btn{margin-top:22px}

/* 问答 */
.xiepdldhb-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.xiepdldhb-faq article{padding:22px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--round)}
.xiepdldhb-faq h3{font-size:15.5px;margin-bottom:10px;color:#fff}
.xiepdldhb-faq p{color:var(--fog);font-size:13.5px;line-height:1.78}

/* 收口 */
.xiepdldhb-cta{text-align:center;padding:60px 22px;border-radius:26px;background:linear-gradient(135deg,rgba(255,47,110,.18),rgba(107,77,255,.18));border:1px solid rgba(255,47,110,.28)}
.xiepdldhb-cta h2{font-size:clamp(21px,3.2vw,29px);margin-bottom:12px}
.xiepdldhb-cta p{max-width:640px;margin:0 auto;color:#d6cfe2;font-size:14.5px;line-height:1.84}
.xiepdldhb-cta .xiepdldhb-btn{margin-top:24px}

/* 页脚 */
.xiepdldhb-foot{margin-top:24px;background:#08060d;border-top:1px solid var(--edge);padding-top:52px}
.xiepdldhb-fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px}
.xiepdldhb-fcols h4{font-size:14px;color:#fff;margin-bottom:14px;letter-spacing:.6px}
.xiepdldhb-fcols li{margin-bottom:10px}
.xiepdldhb-fcols a,.xiepdldhb-fcols p{color:var(--fog);font-size:13.5px}
.xiepdldhb-fcols a:hover{color:var(--candy)}
.xiepdldhb-fcols p{line-height:1.8}
.xiepdldhb-copy{border-top:1px solid var(--edge);padding:18px 0;text-align:center;font-size:12.5px;color:#7c748a}

@media (max-width:1024px){
  .xiepdldhb-hero .xiepdldhb-wrap{grid-template-columns:1fr;gap:32px}
  .xiepdldhb-poster{max-width:236px}
  .xiepdldhb-grid,.xiepdldhb-cats,.xiepdldhb-points,.xiepdldhb-special{grid-template-columns:repeat(2,1fr)}
  .xiepdldhb-quotes{grid-template-columns:repeat(2,1fr)}
  .xiepdldhb-fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .xiepdldhb-sec{padding:50px 0}
  .xiepdldhb-hero{padding:44px 0 52px}
  .xiepdldhb-list{grid-template-columns:1fr}
  .xiepdldhb-rank li{grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:13px 16px}
  .xiepdldhb-rank .xiepdldhb-kind{display:none}
  .xiepdldhb-news li{grid-template-columns:1fr}
  .xiepdldhb-news .xiepdldhb-thumb{aspect-ratio:16/9}
  .xiepdldhb-faq{grid-template-columns:1fr}
  .xiepdldhb-banner{padding:34px 24px}
  .xiepdldhb-special{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:14.5px}
  .xiepdldhb-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .xiepdldhb-cats,.xiepdldhb-points,.xiepdldhb-quotes{grid-template-columns:1fr}
  .xiepdldhb-acts .xiepdldhb-btn,.xiepdldhb-find .xiepdldhb-btn{flex:1 1 100%}
  .xiepdldhb-list li{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .xiepdldhb-fcols{grid-template-columns:1fr;gap:24px}
  .xiepdldhb-head{margin-bottom:26px}
  .xiepdldhb-body{padding:13px 14px 16px}
  .xiepdldhb-quotes li{padding:16px}
}