/* roulang page: index */
:root{
  --bg-0:#060A12;
  --bg-1:#0B1220;
  --bg-2:#111A2C;
  --brand:#2B6BFF;
  --neon:#23E0C8;
  --amber:#FFB547;
  --tx-1:#E8EEF7;
  --tx-2:#93A2B8;
  --tx-3:#5C6B82;
  --line:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.06);
  --sh-1:0 8px 24px rgba(0,0,0,.35);
  --sh-glow:0 0 0 1px rgba(35,224,200,.35), 0 8px 30px rgba(35,224,200,.25);
  --radius:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--tx-1);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  font-size:16px;
  line-height:1.8;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
@media (min-width:1024px){body{padding-bottom:0}}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:6px}
::selection{background:rgba(35,224,200,.28)}

.container{width:100%;max-width:1280px;margin:0 auto;padding-left:16px;padding-right:16px}
@media (min-width:640px){.container{padding-left:24px;padding-right:24px}}
@media (min-width:1024px){.container{padding-left:32px;padding-right:32px}}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.h1{font-size:clamp(28px,5vw,52px);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.h2{font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.3}
.h3{font-size:18px;font-weight:600;line-height:1.5}
.lead{font-size:16px;line-height:1.85;color:var(--tx-2)}

.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  border:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.cut{border-radius:var(--radius);clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
.card{transition:transform .22s ease-out,border-color .22s ease-out,box-shadow .22s ease-out}
.card:hover{transform:translateY(-4px);border-color:rgba(35,224,200,.45);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.grid-tex{
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
}

/* 顶部导航 */
#siteHeader{
  position:sticky;top:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease-out,border-color .25s ease-out,backdrop-filter .25s ease-out;
}
#siteHeader.scrolled{
  background:rgba(6,10,18,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.logo-mark{display:inline-flex;filter:drop-shadow(0 0 10px rgba(35,224,200,.28))}
.logo-text{font-weight:700;font-size:16px;letter-spacing:.01em;white-space:nowrap}
@media (max-width:400px){.logo-text{font-size:14px}}
.nav-link{
  position:relative;display:inline-flex;align-items:center;height:40px;padding:0 14px;
  border-radius:8px;font-size:15px;color:var(--tx-2);
  transition:color .2s ease-out,background .2s ease-out;
}
.nav-link:hover{color:var(--tx-1);background:rgba(255,255,255,.05)}
.nav-link.active{color:var(--neon)}
.nav-link.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;
  background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.85);
}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 24px;border-radius:10px;font-size:15px;font-weight:600;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s ease-out,box-shadow .2s ease-out,background .2s ease-out,
             border-color .2s ease-out,color .2s ease-out,filter .2s ease-out;
}
.btn-primary{
  background:linear-gradient(15deg,var(--neon),var(--brand));
  color:#03141B;box-shadow:var(--sh-glow);
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 0 0 1px rgba(35,224,200,.45),0 12px 36px rgba(35,224,200,.32)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 0 0 1px rgba(35,224,200,.3)}
.btn-ghost{
  background:rgba(255,255,255,.05);
  border-color:var(--line);
  color:var(--tx-1);
  backdrop-filter:blur(12px);
}
.btn-ghost:hover{border-color:var(--neon);color:#fff;transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(1px)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--neon)}
.link-arrow svg{transition:transform .2s ease-out}
.link-arrow:hover svg{transform:translateX(3px)}

/* 徽章 */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:13px;line-height:1;
  padding:5px 10px;border-radius:999px;border:1px solid currentColor;
  background:rgba(255,255,255,.06);white-space:nowrap;
}
.badge-brand{color:#8FB0FF;border-color:rgba(43,107,255,.5);background:rgba(43,107,255,.12)}
.badge-neon{color:var(--neon);border-color:rgba(35,224,200,.5);background:rgba(35,224,200,.1)}
.badge-purple{color:#BC93FF;border-color:rgba(158,110,255,.5);background:rgba(158,110,255,.1)}
.badge-gold{color:var(--amber);border-color:rgba(255,181,71,.5);background:rgba(255,181,71,.1)}

/* 区块标题水印 */
.sec-head{position:relative}
.sec-num{
  display:block;font-size:60px;font-weight:800;line-height:.9;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);
  letter-spacing:.02em;margin-bottom:6px;
}
@media (min-width:768px){.sec-num{font-size:76px}}

/* Hero */
.hero-bg{
  position:relative;
  background-image:linear-gradient(180deg,#060A12 0%,rgba(6,10,18,.7) 30%,rgba(6,10,18,.88) 66%,#060A12 100%),
                   url(/assets/images/backpic/back-1.png);
  background-size:cover;
  background-position:center;
}
.hero-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 42% 22%,#000 0%,transparent 76%);
  mask-image:radial-gradient(circle at 42% 22%,#000 0%,transparent 76%);
}
.hero-bg::after{
  content:"";position:absolute;top:-40%;left:-12%;width:58%;height:180%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(35,224,200,.16),transparent);
  transform:rotate(14deg);filter:blur(60px);
}

/* 阶梯卡 */
.step-card{position:relative;overflow:hidden}
.watermark{
  position:absolute;right:14px;top:2px;font-size:64px;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);pointer-events:none;
}
@media (min-width:768px){
  .step-1{margin-top:40px}
  .step-2{margin-top:20px}
  .step-3{margin-top:0}
}

/* 进度条 */
.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.progress>span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--neon),var(--brand));
}
.progress.full>span{animation:pulseGlow 2.4s ease-in-out infinite}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(35,224,200,0)}
  50%{box-shadow:0 0 14px 2px rgba(35,224,200,.55)}
}
.ticks{display:flex;justify-content:space-between;margin-top:6px}
.ticks i{display:block;width:1px;height:6px;background:rgba(255,255,255,.18)}

/* 签到格 */
.day{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  aspect-ratio:1/1;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);font-size:11px;color:var(--tx-3);
}
.day.done{border-color:rgba(35,224,200,.6);color:var(--tx-1);box-shadow:inset 0 0 0 1px rgba(35,224,200,.18)}
.day.done svg{color:var(--neon)}
@media (min-width:640px){.day{font-size:12px}}

/* CTA 横幅 */
.cta-band{
  position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);
  padding:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  background-image:linear-gradient(100deg,rgba(35,224,200,.10),rgba(43,107,255,.16)),
                   url(/assets/images/backpic/back-2.png);
  background-size:cover;background-position:center;
}
@media (min-width:768px){.cta-band{padding:46px}}
.cta-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 80% 30%,rgba(35,224,200,.22),transparent 62%);
}
.cta-band>*{position:relative;z-index:1}

/* 列表卡左侧霓虹条 */
.bar-left{position:relative}
.bar-left::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;
  background:var(--neon);box-shadow:0 0 12px rgba(35,224,200,.6);
}

/* FAQ */
.faq{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.faq details+details{border-top:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 20px;min-height:56px;font-weight:600;font-size:16px;color:var(--tx-1);
  transition:background .2s ease-out,color .2s ease-out;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(255,255,255,.04);color:#fff}
.faq summary svg{flex:none;color:var(--neon);transition:transform .25s ease-out}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .ans{
  margin:0 20px 18px;padding-left:14px;border-left:3px solid var(--neon);
  font-size:15px;line-height:1.85;color:var(--tx-2);
}

/* 页脚 */
.site-footer{background:var(--bg-1);border-top:1px solid var(--line)}
.foot-link{display:inline-block;font-size:14px;color:var(--tx-2);transition:color .2s ease-out,transform .2s ease-out}
.foot-link:hover{color:var(--neon);transform:translateX(2px)}
.risk-bar{background:rgba(255,181,71,.06);border-top:1px solid rgba(255,181,71,.16);color:#C7A272}

/* 移动底部 Tab */
.mobile-tab{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(6,10,18,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-tab a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:56px;font-size:10px;color:var(--tx-3);
  transition:color .2s ease-out;
}
.mobile-tab a svg{color:currentColor;transition:color .2s ease-out}
.mobile-tab a.active{color:#fff}
.mobile-tab a.active svg{color:var(--neon)}
.mobile-tab a.active::before{
  content:"";position:absolute;top:0;width:26px;height:2px;border-radius:2px;
  background:var(--neon);box-shadow:0 0 8px rgba(35,224,200,.85);
}
@media (min-width:1024px){.mobile-tab{display:none}}

.img-ph{background:linear-gradient(135deg,var(--bg-2),rgba(43,107,255,.28))}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* roulang page: article */
:root{
    --bg-0:#060A12;
    --bg-1:#0B1220;
    --bg-2:#111A2C;
    --brand:#2B6BFF;
    --neon:#23E0C8;
    --amber:#FFB547;
    --tx-1:#E8EEF7;
    --tx-2:#93A2B8;
    --tx-3:#5C6B82;
    --line:rgba(255,255,255,.08);
    --glass:rgba(255,255,255,.06);
    --glass-2:rgba(255,255,255,.08);
    --r:12px;
    --sh-1:0 8px 24px rgba(0,0,0,.35);
    --sh-glow:0 0 0 1px rgba(35,224,200,.35), 0 8px 30px rgba(35,224,200,.25);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg-0);
    color:var(--tx-1);
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    font-size:15px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;transition:color .2s ease-out, border-color .2s ease-out, transform .2s ease-out;}
  button,input,select,textarea{font:inherit;color:inherit;}
  ul,ol{margin:0;padding:0;list-style:none;}
  h1,h2,h3,h4,p{margin:0;}
  ::selection{background:rgba(35,224,200,.28);}
  :focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:6px;}

  .container{width:100%;max-width:1280px;margin:0 auto;padding:0 16px;}
  @media (min-width:640px){.container{padding:0 24px;}}
  @media (min-width:1024px){.container{padding:0 32px;}}

  .tabular{font-variant-numeric:tabular-nums;}

  /* ---------- 顶部导航 ---------- */
  #siteHeader{
    position:sticky;top:0;z-index:60;
    background:rgba(6,10,18,.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .logo-mark{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:10px;
    background:linear-gradient(150deg,rgba(43,107,255,.22),rgba(35,224,200,.14));
    border:1px solid rgba(35,224,200,.28);
    box-shadow:0 0 18px rgba(35,224,200,.18) inset;
    flex:0 0 auto;
  }
  .logo-text{font-size:16px;font-weight:800;letter-spacing:.2px;white-space:nowrap;}
  @media (max-width:519px){.logo-text{font-size:14px;}}

  .nav-link{
    position:relative;
    display:inline-flex;align-items:center;height:40px;
    padding:0 12px;border-radius:9px;
    font-size:14.5px;color:var(--tx-2);
  }
  .nav-link::after{
    content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;
    background:transparent;transition:background .2s ease-out, box-shadow .2s ease-out;
  }
  .nav-link:hover{color:var(--tx-1);background:rgba(255,255,255,.04);}
  .nav-link.active{color:var(--neon);}
  .nav-link.active::after{background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.75);}

  /* ---------- 按钮 ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:44px;padding:0 24px;border-radius:10px;
    font-size:15px;font-weight:600;letter-spacing:.2px;
    border:1px solid transparent;cursor:pointer;
    transition:transform .2s ease-out, box-shadow .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out;
    min-height:44px;
  }
  .btn-primary{
    background:linear-gradient(15deg,var(--neon),var(--brand));
    color:#04121A;
    box-shadow:var(--sh-glow);
    font-weight:700;
  }
  .btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(35,224,200,.5),0 12px 34px rgba(35,224,200,.32);}
  .btn-primary:active{transform:translateY(0);box-shadow:0 0 0 1px rgba(35,224,200,.35),0 4px 14px rgba(35,224,200,.2);}
  .btn-ghost{
    background:var(--glass);
    border-color:var(--line);
    color:var(--tx-1);
    backdrop-filter:blur(12px);
  }
  .btn-ghost:hover{border-color:rgba(35,224,200,.55);color:#fff;transform:translateY(-2px);}
  .btn-ghost:active{transform:translateY(0);}

  .link-more{
    display:inline-flex;align-items:center;gap:6px;
    font-size:14.5px;color:var(--neon);font-weight:600;
  }
  .link-more span{transition:transform .2s ease-out;}
  .link-more:hover span{transform:translateX(3px);}

  /* ---------- 通用卡片 ---------- */
  .card{
    position:relative;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:var(--r);
    clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:transform .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
  }
  .card:hover{border-color:rgba(35,224,200,.45);transform:translateY(-4px);box-shadow:var(--sh-1);}

  .badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:3px 11px;border-radius:999px;
    font-size:13px;line-height:1.6;
    border:1px solid rgba(43,107,255,.5);
    background:rgba(43,107,255,.12);
    color:#B9CDFF;
    white-space:nowrap;
  }
  .badge-neon{border-color:rgba(35,224,200,.5);background:rgba(35,224,200,.12);color:#9DF3E6;}
  .badge-amber{border-color:rgba(255,181,71,.5);background:rgba(255,181,71,.12);color:#FFD79B;}

  /* ---------- 文章头部 ---------- */
  .article-hero{
    position:relative;
    padding:44px 0 36px;
    border-bottom:1px solid var(--line);
    background-image:
      linear-gradient(180deg,rgba(6,10,18,.78) 0%,rgba(6,10,18,.9) 60%,rgba(6,10,18,1) 100%),
      url('/assets/images/backpic/back-2.png');
    background-size:cover;
    background-position:center;
    overflow:hidden;
  }
  .article-hero::before{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(circle at 30% 40%,rgba(0,0,0,.9),transparent 72%);
    -webkit-mask-image:radial-gradient(circle at 30% 40%,rgba(0,0,0,.9),transparent 72%);
    pointer-events:none;
  }
  .article-hero::after{
    content:"";position:absolute;top:-60%;left:-10%;width:52%;height:220%;
    background:linear-gradient(90deg,transparent,rgba(35,224,200,.10),transparent);
    transform:rotate(18deg);
    pointer-events:none;
  }
  .article-hero > .container{position:relative;z-index:2;}

  .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--tx-3);margin-bottom:18px;}
  .breadcrumb a{color:var(--tx-3);}
  .breadcrumb a:hover{color:var(--neon);}
  .breadcrumb .sep{color:rgba(92,107,130,.7);}
  .breadcrumb .cur{color:var(--tx-2);max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .article-title{
    font-size:clamp(24px,4.2vw,40px);
    font-weight:800;
    line-height:1.28;
    letter-spacing:.2px;
    max-width:22ch;
  }
  .article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;font-size:13.5px;color:var(--tx-2);}
  .article-meta .dot{color:rgba(92,107,130,.8);}
  .article-meta .cate{color:#9DF3E6;}

  /* ---------- 正文排版 ---------- */
  .article-body{
    max-width:820px;
    font-size:16px;
    line-height:1.85;
    color:#CBD6E5;
    overflow-wrap:break-word;
    word-break:break-word;
  }
  .article-body p{margin:0 0 1em;}
  .article-body h2{
    position:relative;
    margin:1.7em 0 .8em;
    padding-left:14px;
    font-size:clamp(20px,2.4vw,26px);
    font-weight:700;
    line-height:1.4;
    color:var(--tx-1);
  }
  .article-body h2::before{
    content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:4px;border-radius:2px;
    background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.6);
  }
  .article-body h3{margin:1.4em 0 .6em;font-size:18px;font-weight:600;color:var(--tx-1);}
  .article-body h4{margin:1.2em 0 .5em;font-size:16px;font-weight:600;color:var(--tx-1);}
  .article-body strong{color:var(--tx-1);font-weight:700;}
  .article-body ul,.article-body ol{margin:0 0 1.1em;padding-left:1.35em;}
  .article-body ul li{list-style:disc;}
  .article-body ol li{list-style:decimal;}
  .article-body li{margin:.5em 0;}
  .article-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
  .article-body a:hover{color:var(--neon);}
  .article-body blockquote{
    margin:1.5em 0;padding:14px 20px;
    border-left:3px solid var(--neon);
    background:var(--glass);
    border-radius:0 10px 10px 0;
    color:var(--tx-2);
  }
  .article-body blockquote p:last-child{margin-bottom:0;}
  .article-body img{border-radius:12px;margin:1.4em auto;}
  .article-body figure{margin:1.5em 0;}
  .article-body figcaption{margin-top:8px;font-size:12px;color:var(--tx-3);text-align:center;}
  .article-body table{
    width:100%;border-collapse:collapse;margin:1.5em 0;font-size:14px;
    border:1px solid var(--line);border-radius:10px;overflow:hidden;
  }
  .article-body thead th{background:var(--bg-2);color:var(--tx-1);font-weight:600;}
  .article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left;}
  .article-body tbody tr:hover{background:rgba(255,255,255,.03);}
  .article-body code{background:rgba(255,255,255,.07);padding:2px 6px;border-radius:6px;font-size:14px;color:#9DF3E6;}
  .article-body pre{background:var(--bg-1);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto;margin:1.4em 0;}
  .article-body hr{border:none;border-top:1px solid var(--line);margin:2em 0;}
  .article-body .table-scroll{overflow-x:auto;}

  /* ---------- 空态 ---------- */
  .empty-state{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    padding:56px 24px;text-align:center;
    background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  }
  .empty-state p{font-size:14.5px;color:var(--tx-2);}

  /* ---------- 侧栏 ---------- */
  .side-list li + li{border-top:1px solid var(--line);}
  .side-list a{display:block;padding:11px 0;font-size:14px;color:var(--tx-2);line-height:1.7;}
  .side-list a:hover{color:var(--neon);}
  .side-card{position:static;}
  @media (min-width:1024px){
    .side-card{position:sticky;top:96px;}
  }

  /* ---------- 上下篇 ---------- */
  .pn-item{
    display:flex;flex-direction:column;gap:4px;
    padding:16px 18px;border-radius:10px;
    background:var(--glass);border:1px solid var(--line);
    color:var(--tx-3);
  }
  .pn-item .pn-label{font-size:12.5px;color:var(--tx-3);}
  .pn-item .pn-title{font-size:14.5px;color:var(--tx-3);}

  /* ---------- CTA 区 ---------- */
  .cta-band{
    position:relative;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--bg-1);
    overflow:hidden;
  }
  .cta-band::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(60% 120% at 82% 30%,rgba(35,224,200,.14),transparent 62%),
               radial-gradient(45% 100% at 8% 80%,rgba(43,107,255,.16),transparent 66%);
    pointer-events:none;
  }
  .cta-inner{position:relative;z-index:2;}

  /* ---------- 页脚 ---------- */
  .site-footer{background:var(--bg-1);border-top:1px solid var(--line);}
  .foot-link{display:inline-block;font-size:14px;color:var(--tx-2);transition:color .2s ease-out, transform .2s ease-out;}
  .foot-link:hover{color:var(--neon);transform:translateX(2px);}
  .risk-bar{
    border-top:1px solid var(--line);
    background:rgba(255,255,255,.02);
    font-size:12px;color:var(--tx-3);
    line-height:1.9;
  }

  /* ---------- 移动底部 Tab ---------- */
  .mobile-tab{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(6,10,18,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tab-item{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:60px;padding:8px 2px;
    font-size:10px;color:var(--tx-3);
  }
  .tab-item svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .tab-item:hover{color:var(--tx-2);}
  .tab-item.active{color:var(--neon);}
  .tab-item.active span{color:#fff;}
  .tab-item.active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:22px;height:2px;border-radius:0 0 3px 3px;
    background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.85);
  }
  @media (min-width:1024px){
    .mobile-tab{display:none;}
    body{padding-bottom:0;}
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important;}
    html{scroll-behavior:auto;}
  }

/* roulang page: category1 */
:root{
    --bg-0:#060A12;
    --bg-1:#0B1220;
    --bg-2:#111A2C;
    --brand:#2B6BFF;
    --neon:#23E0C8;
    --amber:#FFB547;
    --tx-1:#E8EEF7;
    --tx-2:#93A2B8;
    --tx-3:#5C6B82;
    --line:rgba(255,255,255,.08);
    --glass:rgba(255,255,255,.055);
    --sh-1:0 8px 24px rgba(0,0,0,.35);
    --sh-glow:0 0 0 1px rgba(35,224,200,.35), 0 8px 30px rgba(35,224,200,.25);
    --radius:12px;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--bg-0);
    color:var(--tx-1);
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  body::selection{background:rgba(35,224,200,.28)}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  button{font-family:inherit}
  p{margin:0}
  h1,h2,h3,h4{margin:0;font-weight:700}
  ul{margin:0;padding:0;list-style:none}

  a:focus-visible,
  button:focus-visible,
  input:focus-visible{
    outline:2px solid var(--neon);
    outline-offset:2px;
    border-radius:6px;
  }

  .container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 16px;
  }
  @media (min-width:640px){ .container{padding:0 24px} }
  @media (min-width:1024px){ .container{padding:0 32px} }
  @media (min-width:1024px){ body{padding-bottom:0} }

  .tabular-nums{font-variant-numeric:tabular-nums}

  /* ---------- 顶部导航 ---------- */
  #siteHeader{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    border-bottom:1px solid transparent;
    transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  }
  #siteHeader.scrolled{
    background:rgba(6,10,18,.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom-color:var(--line);
  }
  .logo-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:11px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);
    flex:0 0 auto;
  }
  .logo-text{
    font-size:16px;
    font-weight:700;
    letter-spacing:.2px;
    white-space:nowrap;
  }
  @media (max-width:420px){
    .logo-text{font-size:14px}
  }
  .nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:9px 14px;
    font-size:15px;
    color:var(--tx-2);
    border-radius:8px;
    transition:color .2s ease, background .2s ease;
  }
  .nav-link:hover{color:var(--tx-1);background:rgba(255,255,255,.045)}
  .nav-link.active{color:var(--neon)}
  .nav-link.active::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:2px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,var(--neon),var(--brand));
    box-shadow:0 0 10px rgba(35,224,200,.7);
  }

  /* ---------- 按钮 ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:46px;
    padding:0 24px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    border:1px solid transparent;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
  }
  .btn-primary{
    background:linear-gradient(15deg,var(--neon),var(--brand));
    color:#04121A;
    box-shadow:var(--sh-glow);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 0 0 1px rgba(35,224,200,.5), 0 12px 34px rgba(35,224,200,.32);
  }
  .btn-primary:active{
    transform:translateY(1px);
    box-shadow:0 0 0 1px rgba(35,224,200,.3), 0 4px 14px rgba(35,224,200,.2);
  }
  .btn-ghost{
    background:rgba(255,255,255,.05);
    border-color:var(--line);
    color:var(--tx-1);
    backdrop-filter:blur(10px);
  }
  .btn-ghost:hover{
    border-color:rgba(35,224,200,.5);
    color:#fff;
    transform:translateY(-2px);
  }
  .btn-ghost:active{transform:translateY(1px)}

  /* ---------- 卡片 ---------- */
  .card{
    position:relative;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:var(--radius);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .card:hover{
    border-color:rgba(35,224,200,.45);
    transform:translateY(-4px);
    box-shadow:var(--sh-1);
  }
  .card-static{transition:none}
  .card-static:hover{transform:none;border-color:var(--line);box-shadow:none}

  .list-card{border-left:3px solid var(--neon)}

  /* ---------- 徽章 ---------- */
  .badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:999px;
    font-size:13px;
    line-height:1.6;
    border:1px solid rgba(43,107,255,.5);
    background:rgba(43,107,255,.1);
    color:#9CBBFF;
    white-space:nowrap;
  }
  .badge-neon{
    border-color:rgba(35,224,200,.5);
    background:rgba(35,224,200,.1);
    color:#8CF2E4;
  }
  .badge-amber{
    border-color:rgba(255,181,71,.5);
    background:rgba(255,181,71,.1);
    color:#FFCE86;
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background-image:linear-gradient(180deg, rgba(6,10,18,.78) 0%, rgba(6,10,18,.9) 55%, var(--bg-0) 100%),
                     url('/assets/images/backpic/back-1.png');
    background-size:cover;
    background-position:center;
  }
  .grid-overlay{
    background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:48px 48px;
  }
  .scan{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(105deg, transparent 40%, rgba(35,224,200,.13) 50%, transparent 60%);
  }

  .breadcrumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--tx-3);
  }
  .breadcrumb a{color:var(--tx-3);transition:color .2s ease}
  .breadcrumb a:hover{color:var(--neon)}
  .breadcrumb .cur{color:var(--tx-2)}

  .h1-display{font-size:clamp(28px,5vw,52px);font-weight:800;line-height:1.2}
  .h2-display{font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.3}
  .h3-display{font-size:18px;font-weight:600;line-height:1.5}

  .sec-num{
    font-size:clamp(44px,7vw,68px);
    font-weight:800;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.13);
    letter-spacing:.02em;
    font-variant-numeric:tabular-nums;
  }

  /* ---------- 进度条 ---------- */
  .bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
  .bar-fill{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--neon),var(--brand));
  }
  .bar-full .bar-fill{animation:pulseGlow 2.6s ease-in-out infinite}
  @keyframes pulseGlow{
    0%,100%{box-shadow:0 0 0 rgba(35,224,200,0)}
    50%{box-shadow:0 0 14px rgba(35,224,200,.55)}
  }

  .dot-on,.dot-off{
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    flex:0 0 auto;
  }
  .dot-on{background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.8)}
  .dot-off{background:rgba(255,255,255,.16)}

  /* ---------- 步骤条 ---------- */
  .step{
    position:relative;
    padding-left:58px;
    padding-bottom:30px;
  }
  .step:last-child{padding-bottom:0}
  .step::before{
    content:"";
    position:absolute;
    left:19px;
    top:44px;
    bottom:6px;
    width:1px;
    background:linear-gradient(180deg, rgba(35,224,200,.5), rgba(255,255,255,.06));
  }
  .step:last-child::before{display:none}
  .step-dot{
    position:absolute;
    left:0;
    top:0;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(35,224,200,.6);
    background:rgba(35,224,200,.08);
    color:var(--neon);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:15px;
    font-variant-numeric:tabular-nums;
  }

  /* ---------- 数据表 ---------- */
  .data-table{
    width:100%;
    min-width:560px;
    border-collapse:collapse;
    font-size:14px;
  }
  .data-table th{
    background:var(--bg-2);
    color:var(--tx-2);
    font-weight:600;
    text-align:left;
    white-space:nowrap;
  }
  .data-table th,
  .data-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
    line-height:1.7;
  }
  .data-table tbody tr{transition:background .2s ease}
  .data-table tbody tr:hover{background:rgba(255,255,255,.035)}
  .data-table tbody tr:last-child td{border-bottom:0}

  /* ---------- 记分板 ---------- */
  .scoreboard{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(10px);
    overflow:hidden;
  }
  .scoreboard > div{
    padding:20px 18px;
    border-left:1px solid var(--line);
  }
  .scoreboard > div:first-child{border-left:0}
  @media (max-width:560px){
    .scoreboard{grid-template-columns:1fr}
    .scoreboard > div{border-left:0;border-top:1px solid var(--line)}
    .scoreboard > div:first-child{border-top:0}
  }

  /* ---------- FAQ ---------- */
  .faq{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--glass);
    backdrop-filter:blur(12px);
    overflow:hidden;
  }
  .faq-item + .faq-item{border-top:1px solid var(--line)}
  .faq-q{
    width:100%;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    background:transparent;
    border:0;
    color:var(--tx-1);
    font-size:16px;
    font-weight:600;
    line-height:1.6;
    text-align:left;
    cursor:pointer;
    transition:color .2s ease;
  }
  .faq-q:hover{color:var(--neon)}
  .faq-arrow{
    flex:0 0 auto;
    color:var(--tx-3);
    transition:transform .25s ease, color .25s ease;
  }
  .faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--neon)}
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
  }
  .faq-item.open .faq-a{max-height:520px}
  .faq-a-inner{
    margin:0 20px 20px;
    padding-left:14px;
    border-left:3px solid var(--neon);
    color:var(--tx-2);
    font-size:15px;
    line-height:1.85;
  }

  /* ---------- 图文块 ---------- */
  .figure-frame{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:linear-gradient(145deg, var(--bg-2), rgba(43,107,255,.25));
  }
  .figure-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .3s ease;
  }
  .figure-frame:hover img{transform:scale(1.03)}

  /* ---------- CTA 斜切块 ---------- */
  .cta-block{
    position:relative;
    background:linear-gradient(120deg, rgba(35,224,200,.10), rgba(43,107,255,.14) 60%, rgba(6,10,18,0));
    border:1px solid var(--line);
    border-radius:var(--radius);
    clip-path:polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px);
    overflow:hidden;
  }
  .cta-block::after{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(35,224,200,.22), transparent 68%);
    pointer-events:none;
  }

  /* ---------- 页脚 ---------- */
  .site-footer{
    background:var(--bg-1);
    border-top:1px solid var(--line);
    margin-top:0;
  }
  .foot-link{
    display:inline-block;
    color:var(--tx-2);
    font-size:14px;
    transition:color .2s ease, transform .2s ease;
  }
  .foot-link:hover{color:var(--neon);transform:translateX(-2px)}

  /* ---------- 移动端底部 Tab ---------- */
  .mobile-tab{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    background:rgba(6,10,18,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  @media (min-width:1024px){ .mobile-tab{display:none} }
  .mobile-tab a{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:56px;
    padding:8px 2px;
    font-size:10px;
    line-height:1.3;
    color:var(--tx-3);
    transition:color .2s ease;
  }
  .mobile-tab a svg{color:var(--tx-3);transition:color .2s ease}
  .mobile-tab a.active{color:#fff}
  .mobile-tab a.active svg{color:var(--neon)}
  .mobile-tab a.active::before{
    content:"";
    position:absolute;
    top:0;
    width:26px;
    height:2px;
    border-radius:2px;
    background:var(--neon);
    box-shadow:0 0 10px var(--neon);
  }

  /* ---------- 动效与无障碍 ---------- */
  .fade-up{transition:opacity .3s ease, transform .3s ease}
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
    html{scroll-behavior:auto}
  }

/* roulang page: category2 */
:root{
  --bg-0:#060A12;--bg-1:#0B1220;--bg-2:#111A2C;
  --brand:#2B6BFF;--neon:#23E0C8;--amber:#FFB547;
  --tx-1:#E8EEF7;--tx-2:#93A2B8;--tx-3:#5C6B82;
  --bd:rgba(255,255,255,.08);--glass:rgba(255,255,255,.05);
  --r:12px;--sh-1:0 8px 24px rgba(0,0,0,.35);
  --sh-glow:0 0 0 1px rgba(35,224,200,.35),0 8px 30px rgba(35,224,200,.25);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;padding-top:68px;
  background:var(--bg-0);color:var(--tx-1);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
@media (min-width:1024px){body{padding-bottom:0}}
a{color:inherit;text-decoration:none;transition:color .2s ease,transform .2s ease,border-color .2s ease}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}

div.container{width:100%;max-width:1280px;margin:0 auto;padding-left:16px;padding-right:16px}
@media (min-width:640px){div.container{padding-left:24px;padding-right:24px}}
@media (min-width:1024px){div.container{padding-left:32px;padding-right:32px}}

/* ---------- 顶部导航 ---------- */
#siteHeader{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease}
#siteHeader.scrolled{background:rgba(6,10,18,.88);backdrop-filter:blur(14px);border-bottom-color:var(--bd)}
.logo-mark{display:inline-flex;align-items:center;justify-content:center}
.logo-text{font-size:16px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
@media (max-width:420px){.logo-text{font-size:13.5px}}
.nav-link{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 14px;
  font-size:14.5px;color:var(--tx-2);border-radius:8px}
.nav-link:hover{color:#fff}
.nav-link.active{color:var(--neon)}
.nav-link.active::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--neon);border-radius:2px;box-shadow:0 0 10px rgba(35,224,200,.85)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border:0;border-radius:10px;
  font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .2s ease-out,box-shadow .2s ease-out,filter .2s ease-out,border-color .2s ease-out}
.btn-primary{background:linear-gradient(15deg,var(--neon),var(--brand));color:#04121A;box-shadow:var(--sh-glow)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(35,224,200,.5),0 12px 36px rgba(35,224,200,.35)}
.btn-primary:active{transform:translateY(0);box-shadow:0 0 0 1px rgba(35,224,200,.3),0 4px 14px rgba(35,224,200,.2)}
.btn-ghost{background:var(--glass);border:1px solid var(--bd);color:var(--tx-1);backdrop-filter:blur(12px)}
.btn-ghost:hover{border-color:rgba(35,224,200,.6);color:#fff;transform:translateY(-2px)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--neon);font-size:14.5px;font-weight:600}
.link-arrow svg{transition:transform .2s ease-out}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- 区块与标题 ---------- */
.section{padding:56px 0;position:relative}
@media (min-width:768px){.section{padding:80px 0}}
.sec-head{position:relative;margin-bottom:32px}
.sec-num{position:absolute;top:-16px;left:-4px;font-size:64px;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);pointer-events:none;user-select:none}
.sec-kicker{position:relative;font-size:13px;letter-spacing:.18em;color:var(--neon);text-transform:uppercase}
h1{font-size:clamp(28px,5vw,52px);font-weight:800;line-height:1.2;letter-spacing:-.5px}
h2{font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.3}
h3{font-size:18px;font-weight:600;line-height:1.5}
.lead{color:var(--tx-2);font-size:15.5px;line-height:1.85}
.muted{color:var(--tx-2)}
.tiny{font-size:13px}

/* ---------- 卡片 ---------- */
.card{position:relative;background:var(--glass);border:1px solid var(--bd);border-radius:var(--r);
  backdrop-filter:blur(12px);transition:border-color .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out}
.card::before{content:'';position:absolute;top:-1px;left:-1px;width:24px;height:24px;
  background:linear-gradient(135deg,rgba(35,224,200,.5),rgba(35,224,200,0) 65%);
  clip-path:polygon(0 0,100% 0,0 100%);border-top-left-radius:var(--r);opacity:.85;pointer-events:none}
.card:hover{border-color:rgba(35,224,200,.45);transform:translateY(-4px)}
.card-flat:hover{transform:none;border-color:var(--bd)}
.side-bar{position:relative;padding-left:18px}
.side-bar::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--neon),rgba(43,107,255,.5))}

/* ---------- 徽章 ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;
  font-size:13px;line-height:1;border:1px solid transparent;white-space:nowrap}
.badge-brand{color:#9EC2FF;border-color:rgba(43,107,255,.55);background:rgba(43,107,255,.12)}
.badge-neon{color:#8FF3E6;border-color:rgba(35,224,200,.5);background:rgba(35,224,200,.1)}
.badge-violet{color:#CFB6FF;border-color:rgba(154,108,255,.5);background:rgba(154,108,255,.12)}
.badge-amber{color:#FFD79A;border-color:rgba(255,181,71,.5);background:rgba(255,181,71,.12)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:40px 0 48px;
  background:linear-gradient(180deg,var(--bg-0),rgba(6,10,18,0) 22%,rgba(6,10,18,.6) 78%,var(--bg-0)),
  radial-gradient(120% 90% at 82% 8%,rgba(35,224,200,.14),transparent 60%),
  radial-gradient(90% 80% at 6% 12%,rgba(43,107,255,.18),transparent 62%),var(--bg-0)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px}
.hero::after{content:'';position:absolute;top:-30%;left:-20%;width:60%;height:160%;pointer-events:none;
  background:linear-gradient(100deg,rgba(35,224,200,0),rgba(35,224,200,.07) 45%,rgba(35,224,200,0));
  transform:rotate(14deg)}
.hero-inner{position:relative;z-index:2}
.hero-img{border-radius:var(--r);border:1px solid var(--bd);object-fit:cover;width:100%;aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--bg-2),rgba(43,107,255,.35))}
.float-card{position:relative;margin-top:-24px;margin-left:auto;width:min(320px,88%);
  padding:16px 18px;border-radius:var(--r);background:rgba(11,18,32,.92);border:1px solid var(--bd);
  backdrop-filter:blur(14px);box-shadow:var(--sh-1)}
.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.progress > i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--neon),var(--brand))}
.scale-row{display:flex;justify-content:space-between;margin-top:10px}
.scale-row span{flex:1;text-align:center;font-size:11px;color:var(--tx-3);border-top:1px dashed rgba(255,255,255,.14);padding-top:6px}

/* ---------- 时间轴 ---------- */
.tl{position:relative}
.tl::before{content:'';position:absolute;left:19px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,rgba(35,224,200,0),rgba(35,224,200,.55) 12%,rgba(43,107,255,.4) 88%,rgba(43,107,255,0))}
.tl-row{position:relative;display:grid;grid-template-columns:40px 1fr;gap:16px;margin-bottom:22px}
.tl-dot{grid-column:1;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-1);border:1px solid rgba(35,224,200,.5);color:var(--neon);font-size:13px;font-weight:700;
  box-shadow:0 0 0 4px rgba(6,10,18,.9)}
.tl-card{grid-column:2;padding:18px 20px}
.tl-card h3{margin-bottom:6px}
@media (min-width:768px){
  .tl::before{left:50%;transform:translateX(-1px)}
  .tl-row{grid-template-columns:1fr 44px 1fr;gap:26px;align-items:start}
  .tl-dot{grid-column:2;grid-row:1;width:44px;height:44px;margin:0 auto}
  .tl-card{grid-row:1;grid-column:1;text-align:right}
  .tl-row.right .tl-card{grid-column:3;text-align:left}
}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--r);background:rgba(11,18,32,.6)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px}
thead th{background:var(--bg-2);color:var(--tx-1);font-weight:600;text-align:left;
  padding:14px 18px;border-bottom:1px solid var(--bd);white-space:nowrap}
tbody td{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--tx-2)}
tbody tr{transition:background .2s ease}
tbody tr:hover{background:rgba(255,255,255,.045)}
tbody tr:last-child td{border-bottom:0}
tbody td:first-child{color:var(--tx-1);font-variant-numeric:tabular-nums}

/* ---------- 奖励卡 ---------- */
.reward-card{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden}
@media (min-width:640px){.reward-card{grid-template-columns:200px 1fr}}
.reward-card img{width:100%;height:100%;min-height:150px;object-fit:cover}

/* ---------- 清单 ---------- */
.check-list li{position:relative;padding-left:32px;font-size:15px;color:var(--tx-2);line-height:1.8}
.check-list li + li{margin-top:12px}
.check-list li::before{content:'';position:absolute;left:0;top:8px;width:18px;height:18px;border-radius:6px;
  border:1px solid rgba(35,224,200,.55);background:rgba(35,224,200,.1)}
.check-list li::after{content:'';position:absolute;left:6px;top:12px;width:6px;height:10px;
  border-right:2px solid var(--neon);border-bottom:2px solid var(--neon);transform:rotate(40deg)}

/* ---------- FAQ ---------- */
.faq-box{border:1px solid var(--bd);border-radius:var(--r);background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px);overflow:hidden}
.faq-item + .faq-item{border-top:1px solid var(--bd)}
.faq-item summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:15px 20px;font-size:16px;font-weight:600}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--neon)}
.faq-arrow{flex:none;transition:transform .25s ease;color:var(--tx-3)}
.faq-item[open] .faq-arrow{transform:rotate(180deg);color:var(--neon)}
.faq-a{position:relative;padding:2px 20px 22px 40px;color:var(--tx-2);font-size:15px;line-height:1.85}
.faq-a::before{content:'';position:absolute;left:20px;top:4px;bottom:22px;width:3px;border-radius:3px;
  background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.5)}

/* ---------- CTA ---------- */
.cta-block{position:relative;overflow:hidden;border:1px solid var(--bd);border-radius:var(--r);
  padding:32px 24px;
  background:radial-gradient(80% 120% at 12% 50%,rgba(35,224,200,.16),transparent 62%),
  radial-gradient(70% 110% at 92% 40%,rgba(43,107,255,.2),transparent 60%),var(--bg-1)}
.cta-block::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.05) 0 30%,transparent 30.6% 100%)}
@media (min-width:768px){.cta-block{padding:44px 40px}}

/* ---------- 页脚 ---------- */
.site-footer{margin-top:56px;background:var(--bg-1);border-top:1px solid var(--bd)}
.foot-link{display:inline-block;font-size:14px;color:var(--tx-2)}
.foot-link:hover{color:var(--neon);transform:translateX(-2px)}
.risk-bar{background:rgba(255,255,255,.03);border-top:1px solid var(--bd)}

/* ---------- 移动底部 Tab ---------- */
.mobile-tab{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(6,10,18,.94);backdrop-filter:blur(14px);border-top:1px solid var(--bd);
  padding-bottom:env(safe-area-inset-bottom)}
.tab-item{position:relative;min-height:56px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;font-size:10px;color:var(--tx-3);padding:8px 2px}
.tab-item .tab-ico{color:var(--tx-3);transition:color .2s ease}
.tab-item.active{color:#fff}
.tab-item.active .tab-ico{color:var(--neon)}
.tab-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:2px;border-radius:2px;background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.9)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* roulang page: category3 */
:root{
    --bg-0:#060A12;
    --bg-1:#0B1220;
    --bg-2:#111A2C;
    --brand:#2B6BFF;
    --neon:#23E0C8;
    --amber:#FFB547;
    --purple:#B79BFF;
    --danger:#FF6B6B;
    --tx-1:#E8EEF7;
    --tx-2:#93A2B8;
    --tx-3:#5C6B82;
    --line:rgba(255,255,255,.08);
    --line-soft:rgba(255,255,255,.06);
    --glass:rgba(255,255,255,.05);
    --glass-2:rgba(255,255,255,.08);
    --r-sm:8px;
    --r:12px;
    --r-lg:16px;
    --sh-1:0 8px 24px rgba(0,0,0,.35);
    --sh-glow:0 0 0 1px rgba(35,224,200,.35),0 8px 30px rgba(35,224,200,.25);
  }

  *,*::before,*::after{box-sizing:border-box}

  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

  body{
    margin:0;
    background:var(--bg-0);
    color:var(--tx-1);
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
    font-size:16px;
    line-height:1.8;
    font-variant-numeric:tabular-nums;
    padding-bottom:calc(74px + env(safe-area-inset-bottom));
    overflow-x:hidden;
  }

  img{max-width:100%;display:block;border:0}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit}
  h1,h2,h3,h4,p,ul,ol,figure{margin:0}
  ul,ol{padding:0;list-style:none}
  table{border-collapse:collapse}

  @media (min-width:1024px){
    body{padding-bottom:0}
  }

  .container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding-left:16px;
    padding-right:16px;
  }
  @media (min-width:640px){ .container{padding-left:24px;padding-right:24px} }
  @media (min-width:1024px){ .container{padding-left:32px;padding-right:32px} }

  /* ============ 顶部导航 ============ */
  #siteHeader{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(6,10,18,.62);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    transition:background .25s ease,border-color .25s ease;
  }
  #siteHeader.scrolled{
    background:rgba(6,10,18,.92);
    border-bottom-color:var(--line);
  }
  .logo-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--line);
    flex:0 0 auto;
  }
  .logo-text{
    font-size:16px;
    font-weight:700;
    letter-spacing:.3px;
    white-space:nowrap;
  }
  @media (min-width:1024px){ .logo-text{font-size:17px} }

  .nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    height:40px;
    padding:0 14px;
    font-size:14.5px;
    color:var(--tx-2);
    border-radius:var(--r-sm);
    transition:color .2s ease,background .2s ease;
    white-space:nowrap;
  }
  .nav-link:hover{color:var(--tx-1);background:rgba(255,255,255,.05)}
  .nav-link:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
  .nav-link.active{color:var(--neon)}
  .nav-link.active::after{
    content:"";
    position:absolute;
    left:14px;right:14px;bottom:3px;
    height:2px;
    border-radius:2px;
    background:var(--neon);
    box-shadow:0 0 10px rgba(35,224,200,.8);
  }

  /* ============ 按钮 ============ */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:44px;
    padding:0 22px;
    border-radius:10px;
    border:1px solid transparent;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease,filter .2s ease;
  }
  .btn:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
  .btn-primary{
    background:linear-gradient(15deg,var(--neon) 0%,var(--brand) 100%);
    color:#04121A;
    box-shadow:var(--sh-glow);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 0 0 1px rgba(35,224,200,.5),0 12px 36px rgba(35,224,200,.38);
  }
  .btn-primary:active{transform:translateY(1px);box-shadow:0 0 0 1px rgba(35,224,200,.35),0 4px 14px rgba(35,224,200,.2)}
  .btn-ghost{
    background:rgba(255,255,255,.05);
    border-color:var(--line);
    color:var(--tx-1);
  }
  .btn-ghost:hover{border-color:var(--neon);color:#fff;transform:translateY(-2px)}
  .btn-ghost:active{transform:translateY(1px)}
  .btn-sm{height:38px;padding:0 16px;font-size:14px}

  .link-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color:var(--neon);
  }
  .link-more svg{transition:transform .2s ease}
  .link-more:hover svg{transform:translateX(3px)}

  /* ============ 徽章 ============ */
  .badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 12px;
    border-radius:999px;
    font-size:13px;
    line-height:1.65;
    border:1px solid currentColor;
    white-space:nowrap;
  }
  .badge-brand{color:#7FB0FF;background:rgba(43,107,255,.12)}
  .badge-neon{color:var(--neon);background:rgba(35,224,200,.1)}
  .badge-amber{color:var(--amber);background:rgba(255,181,71,.12)}
  .badge-purple{color:var(--purple);background:rgba(160,120,255,.12)}

  /* ============ 内页 Hero ============ */
  .cat-hero{
    position:relative;
    overflow:hidden;
    padding:52px 0 60px;
    background:
      linear-gradient(180deg,rgba(6,10,18,.74) 0%,rgba(6,10,18,.9) 62%,var(--bg-0) 100%),
      url(/assets/images/backpic/back-2.png) center/cover no-repeat;
  }
  .cat-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:54px 54px;
    opacity:.6;
    pointer-events:none;
  }
  .cat-hero::after{
    content:"";
    position:absolute;
    top:-45%;left:-12%;
    width:34%;height:190%;
    background:linear-gradient(90deg,transparent,rgba(35,224,200,.10),transparent);
    transform:rotate(14deg);
    pointer-events:none;
  }
  .cat-hero .container{position:relative;z-index:2}

  .crumb{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--tx-3);
    margin-bottom:18px;
  }
  .crumb a{color:var(--tx-3);transition:color .2s}
  .crumb a:hover{color:var(--neon)}
  .crumb .sep{color:rgba(255,255,255,.18)}
  .crumb .cur{color:var(--tx-2)}

  .cat-hero h1{
    font-size:clamp(28px,5vw,50px);
    font-weight:800;
    line-height:1.2;
    letter-spacing:.4px;
    max-width:22em;
  }
  .cat-hero h1 em{
    font-style:normal;
    background:linear-gradient(96deg,var(--neon) 0%,#7FB0FF 90%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero-sub{
    margin-top:16px;
    max-width:60ch;
    font-size:clamp(15px,1.6vw,17px);
    line-height:1.85;
    color:var(--tx-2);
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
  }
  .hero-stats{
    display:grid;
    grid-template-columns:repeat(1,minmax(0,1fr));
    gap:14px;
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid var(--line);
  }
  @media (min-width:640px){ .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))} }
  .stat-cell .k{font-size:12.5px;color:var(--tx-3);letter-spacing:.6px}
  .stat-cell .v{margin-top:4px;font-size:20px;font-weight:700;color:var(--tx-1);font-variant-numeric:tabular-nums}

  /* ============ 通用板块 ============ */
  .section{padding:56px 0}
  @media (min-width:768px){ .section{padding:80px 0} }
  .section-alt{background:linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 50%,var(--bg-0) 100%)}

  .sec-head{position:relative;margin-bottom:34px;padding-top:6px}
  .sec-num{
    position:absolute;
    top:-30px;
    left:-8px;
    font-size:74px;
    font-weight:800;
    line-height:1;
    letter-spacing:-2px;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.10);
    pointer-events:none;
    user-select:none;
    z-index:0;
  }
  @media (min-width:768px){ .sec-num{font-size:96px;top:-42px} }
  .sec-head h2{
    position:relative;
    z-index:1;
    font-size:clamp(22px,3vw,32px);
    font-weight:700;
    line-height:1.32;
  }
  .sec-head p{
    position:relative;
    z-index:1;
    margin-top:12px;
    max-width:70ch;
    font-size:15px;
    line-height:1.85;
    color:var(--tx-2);
  }

  /* ============ 卡片 ============ */
  .card{
    position:relative;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:var(--r);
    clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
    transition:border-color .2s ease-out,transform .2s ease-out,background .2s ease-out;
  }
  .card:hover{border-color:rgba(35,224,200,.45);transform:translateY(-4px)}
  .card-pad{padding:20px}
  @media (min-width:768px){ .card-pad{padding:24px} }

  .list-item{
    position:relative;
    padding:14px 16px 14px 20px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    border-radius:10px;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .list-item::before{
    content:"";
    position:absolute;
    left:0;top:14px;bottom:14px;
    width:3px;
    border-radius:2px;
    background:var(--neon);
    opacity:.85;
  }
  .list-item:hover{background:rgba(255,255,255,.07);border-color:rgba(35,224,200,.35);transform:translateX(2px)}
  .list-item .li-t{font-size:15px;font-weight:600;color:var(--tx-1)}
  .list-item .li-d{margin-top:6px;font-size:14px;line-height:1.8;color:var(--tx-2)}

  /* ============ 刻度条 ============ */
  .scale{
    margin-top:22px;
    padding-top:16px;
    border-top:1px dashed rgba(255,255,255,.12);
  }
  .scale-rail{
    position:relative;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
  }
  .scale-rail span{
    position:absolute;
    inset:0 auto 0 0;
    border-radius:999px;
    background:linear-gradient(90deg,var(--neon),var(--brand));
  }
  .scale-rail span.pulse{animation:pulseGlow 2.4s ease-in-out infinite}
  @keyframes pulseGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(35,224,200,.35)}
    50%{box-shadow:0 0 14px 2px rgba(35,224,200,.45)}
  }
  .scale-ticks{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:12.5px;
    color:var(--tx-3);
  }
  .scale-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
    font-size:13.5px;
    color:var(--tx-2);
  }
  .scale-meta b{color:var(--neon);font-weight:700}

  /* ============ 表格 ============ */
  .table-wrap{
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:rgba(11,18,32,.72);
    -webkit-overflow-scrolling:touch;
  }
  .rule-table{
    width:100%;
    min-width:820px;
    font-size:14.5px;
  }
  .rule-table thead th{
    background:var(--bg-2);
    color:var(--tx-2);
    font-weight:600;
    font-size:13.5px;
    letter-spacing:.4px;
    text-align:left;
    padding:15px 18px;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
  }
  .rule-table tbody td{
    padding:17px 18px;
    border-bottom:1px solid var(--line-soft);
    color:var(--tx-1);
    vertical-align:top;
    line-height:1.75;
  }
  .rule-table tbody tr{transition:background .2s ease}
  .rule-table tbody tr:hover{background:rgba(43,107,255,.08)}
  .rule-table tbody tr:last-child td{border-bottom:none}
  .rule-table .tier-name{font-weight:700;color:var(--tx-1)}
  .rule-table .tier-sub{display:block;margin-top:4px;font-size:13px;color:var(--tx-3)}

  .table-note{
    margin-top:14px;
    font-size:13.5px;
    color:var(--tx-3);
    line-height:1.8;
  }

  /* ============ 琥珀徽章区 ============ */
  .amber-zone{
    margin-top:22px;
    display:grid;
    gap:18px;
    padding:20px;
    border:1px solid rgba(255,181,71,.32);
    border-radius:var(--r);
    background:linear-gradient(120deg,rgba(255,181,71,.10),rgba(255,181,71,.02) 62%,transparent);
    clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
  }
  @media (min-width:768px){
    .amber-zone{grid-template-columns:auto 1fr;align-items:center;gap:26px;padding:24px 26px}
  }
  .amber-mark{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:700;
    color:var(--amber);
  }
  .amber-mark svg{width:26px;height:26px;flex:0 0 auto}
  .amber-zone p{font-size:14px;line-height:1.85;color:var(--tx-2)}

  /* ============ 左图右文说明卡 ============ */
  .media-card{
    display:grid;
    gap:0;
    overflow:hidden;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:var(--r);
    clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
    transition:border-color .2s ease,transform .2s ease;
  }
  .media-card:hover{border-color:rgba(35,224,200,.45);transform:translateY(-4px)}
  .media-card:hover .media-thumb img{transform:scale(1.03)}
  @media (min-width:768px){
    .media-card{grid-template-columns:264px 1fr;align-items:stretch}
  }
  .media-thumb{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:linear-gradient(135deg,var(--bg-2),rgba(43,107,255,.25));
  }
  @media (min-width:768px){
    .media-thumb{aspect-ratio:auto;height:100%;min-height:190px}
  }
  .media-thumb img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .25s ease-out;
  }
  .media-body{padding:20px 22px 24px}
  .media-body h3{font-size:18px;font-weight:600;line-height:1.5}
  .media-body p{margin-top:10px;font-size:14.5px;line-height:1.85;color:var(--tx-2)}

  /* ============ 步骤 ============ */
  .steps{display:grid;gap:14px}
  @media (min-width:768px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} }
  @media (min-width:1024px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr))} }
  .step{
    position:relative;
    padding:22px 20px 22px 22px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    border-radius:var(--r);
    transition:border-color .2s ease,background .2s ease,transform .2s ease;
  }
  .step:hover{border-color:rgba(35,224,200,.4);background:rgba(255,255,255,.06);transform:translateY(-4px)}
  .step-no{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;height:34px;
    border-radius:50%;
    border:1px solid rgba(35,224,200,.55);
    color:var(--neon);
    font-size:14px;
    font-weight:700;
  }
  .step h3{margin-top:14px;font-size:16.5px;font-weight:600}
  .step p{margin-top:8px;font-size:14px;line-height:1.8;color:var(--tx-2)}

  /* ============ 清单 ============ */
  .check-list{display:grid;gap:12px}
  @media (min-width:768px){ .check-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} }
  .check-item{
    display:flex;
    gap:12px;
    padding:16px 18px;
    background:rgba(255,255,255,.035);
    border:1px solid var(--line);
    border-radius:10px;
    transition:background .2s ease,border-color .2s ease;
  }
  .check-item:hover{background:rgba(255,255,255,.07);border-color:rgba(35,224,200,.32)}
  .check-item svg{width:20px;height:20px;flex:0 0 auto;margin-top:3px;color:var(--neon)}
  .check-item p{font-size:14.5px;line-height:1.8;color:var(--tx-2)}
  .check-item p b{color:var(--tx-1);font-weight:600}

  /* ============ FAQ ============ */
  .faq-wrap{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:var(--r);
    overflow:hidden;
  }
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-item:last-child{border-bottom:none}
  .faq-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:56px;
    padding:14px 20px;
    background:none;
    border:0;
    text-align:left;
    font-size:15.5px;
    font-weight:600;
    line-height:1.6;
    color:var(--tx-1);
    cursor:pointer;
    transition:color .2s ease,background .2s ease;
  }
  .faq-q:hover{color:var(--neon);background:rgba(255,255,255,.03)}
  .faq-q:focus-visible{outline:2px solid var(--neon);outline-offset:-2px}
  .faq-arrow{
    flex:0 0 auto;
    width:18px;height:18px;
    color:var(--tx-3);
    transition:transform .25s ease,color .2s ease;
  }
  .faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--neon)}
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .faq-a-inner{
    margin:0 20px 18px 20px;
    padding-left:14px;
    border-left:3px solid var(--neon);
    font-size:14.5px;
    line-height:1.85;
    color:var(--tx-2);
  }

  /* ============ CTA ============ */
  .cta-block{
    position:relative;
    overflow:hidden;
    padding:34px 26px;
    border:1px solid rgba(35,224,200,.28);
    border-radius:var(--r-lg);
    background:
      radial-gradient(120% 160% at 8% 0%,rgba(35,224,200,.16) 0%,transparent 58%),
      linear-gradient(120deg,rgba(43,107,255,.18),rgba(6,10,18,.6));
    clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px);
  }
  @media (min-width:768px){
    .cta-block{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:44px 42px}
  }
  .cta-block h2{font-size:clamp(20px,2.6vw,28px);font-weight:700;line-height:1.35}
  .cta-block p{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--tx-2);max-width:56ch}
  .cta-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
  @media (min-width:768px){ .cta-actions{margin-top:0;flex:0 0 auto} }

  /* ============ 页脚 ============ */
  .site-footer{
    margin-top:8px;
    background:var(--bg-1);
    border-top:1px solid var(--line);
  }
  .site-footer h3{font-size:15px;font-weight:600;color:var(--tx-1)}
  .foot-link{
    display:inline-block;
    font-size:14px;
    color:var(--tx-2);
    transition:color .2s ease,transform .2s ease;
  }
  .foot-link:hover{color:var(--neon);transform:translateX(2px)}
  .foot-bottom{
    border-top:1px solid var(--line);
    padding:18px 0 24px;
    font-size:12px;
    color:var(--tx-3);
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    align-items:center;
    justify-content:space-between;
  }
  .risk-strip{
    background:rgba(255,255,255,.03);
    border-top:1px solid var(--line-soft);
    padding:14px 0;
    font-size:12.5px;
    line-height:1.8;
    color:var(--tx-3);
  }

  /* ============ 移动底部 Tab ============ */
  .mobile-tab{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:50;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    background:rgba(6,10,18,.94);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  @media (min-width:1024px){ .mobile-tab{display:none} }
  .tab-item{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-height:58px;
    padding:9px 2px;
    font-size:10px;
    line-height:1.2;
    color:var(--tx-3);
    transition:color .2s ease;
  }
  .tab-item svg{width:20px;height:20px}
  .tab-item:focus-visible{outline:2px solid var(--neon);outline-offset:-2px}
  .tab-item.active{color:var(--neon)}
  .tab-item.active span{color:#fff}
  .tab-item.active::before{
    content:"";
    position:absolute;
    top:0;left:50%;
    transform:translateX(-50%);
    width:22px;height:2px;
    border-radius:2px;
    background:var(--neon);
    box-shadow:0 0 8px rgba(35,224,200,.9);
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
  }

/* roulang page: category4 */
:root{
    --bg-0:#060A12;
    --bg-1:#0B1220;
    --bg-2:#111A2C;
    --brand:#2B6BFF;
    --neon:#23E0C8;
    --amber:#FFB547;
    --tx-1:#E8EEF7;
    --tx-2:#93A2B8;
    --tx-3:#5C6B82;
    --line:rgba(255,255,255,.08);
    --glass:rgba(255,255,255,.06);
    --r:12px;
    --sh-1:0 8px 24px rgba(0,0,0,.35);
    --sh-glow:0 0 0 1px rgba(35,224,200,.35),0 8px 30px rgba(35,224,200,.25);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    padding-top:68px;
    background:
      radial-gradient(900px 520px at 12% -6%, rgba(43,107,255,.16), transparent 62%),
      radial-gradient(760px 460px at 92% 4%, rgba(35,224,200,.10), transparent 60%),
      var(--bg-0);
    color:var(--tx-1);
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button,input,select,textarea{font:inherit;color:inherit}
  h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700}
  p{margin:0}
  ul{margin:0;padding:0;list-style:none}
  :focus-visible{outline:2px solid var(--neon);outline-offset:2px;border-radius:6px}
  .container{width:100%;max-width:1280px;margin:0 auto;padding-left:16px;padding-right:16px}
  @media (min-width:640px){.container{padding-left:24px;padding-right:24px}}
  @media (min-width:1024px){.container{padding-left:32px;padding-right:32px}}
  .num{font-variant-numeric:tabular-nums}

  /* 顶部导航 */
  #siteHeader{
    position:fixed;top:0;left:0;right:0;z-index:60;
    background:transparent;
    border-bottom:1px solid transparent;
    transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
  }
  #siteHeader.scrolled{
    background:rgba(6,10,18,.86);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom-color:var(--line);
  }
  .logo-mark{display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 10px rgba(35,224,200,.35))}
  .logo-text{font-size:16.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
  @media (max-width:400px){.logo-text{font-size:14.5px}}
  .nav-link{
    position:relative;display:inline-flex;align-items:center;height:40px;padding:0 12px;
    border-radius:8px;font-size:14.5px;color:var(--tx-2);
    transition:color .2s ease,background .2s ease;
  }
  .nav-link:hover{color:var(--tx-1);background:rgba(255,255,255,.05)}
  .nav-link.active{color:var(--neon)}
  .nav-link.active::after{
    content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;
    background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.85);
  }

  /* 按钮 */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;padding:0 22px;border-radius:10px;border:1px solid transparent;
    font-size:15px;font-weight:600;letter-spacing:.2px;cursor:pointer;
    transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,border-color .22s ease,color .22s ease,background .22s ease;
  }
  .btn-primary{
    background:linear-gradient(15deg,var(--neon),var(--brand));
    color:#03151b;box-shadow:var(--sh-glow);
  }
  .btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 0 0 1px rgba(35,224,200,.5),0 12px 34px rgba(35,224,200,.32)}
  .btn-primary:active{transform:translateY(1px);box-shadow:0 0 0 1px rgba(35,224,200,.4),0 4px 14px rgba(35,224,200,.22)}
  .btn-ghost{
    background:var(--glass);border-color:var(--line);color:var(--tx-1);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  .btn-ghost:hover{border-color:rgba(35,224,200,.5);color:#fff;transform:translateY(-2px)}
  .btn-ghost:active{transform:translateY(1px)}
  .btn-sm{min-height:40px;padding:0 16px;font-size:14px}
  .link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--neon)}
  .link-arrow svg{transition:transform .2s ease}
  .link-arrow:hover svg{transform:translateX(3px)}

  /* 卡片 */
  .card{
    position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
    border:1px solid var(--line);border-radius:var(--r);
    clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transition:transform .2s ease-out,border-color .2s ease-out,box-shadow .2s ease-out;
  }
  .card:hover{border-color:rgba(35,224,200,.45);transform:translateY(-4px);box-shadow:var(--sh-1)}
  .card-plain{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025))}
  .badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:3px 11px;border-radius:999px;font-size:13px;line-height:1.6;
    border:1px solid rgba(43,107,255,.45);background:rgba(43,107,255,.12);color:#9DC1FF;
  }
  .badge-neon{border-color:rgba(35,224,200,.45);background:rgba(35,224,200,.12);color:#8BF0E1}
  .badge-amber{border-color:rgba(255,181,71,.45);background:rgba(255,181,71,.12);color:#FFD08A}
  .sec-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .sec-wm{
    position:relative;padding-left:0;
  }
  .sec-wm .wm{
    display:block;font-size:52px;line-height:1;font-weight:800;letter-spacing:2px;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);
    font-variant-numeric:tabular-nums;
  }
  @media (min-width:768px){.sec-wm .wm{font-size:64px}}

  /* 面包屑 */
  .crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx-3);flex-wrap:wrap}
  .crumbs a{color:var(--tx-3);transition:color .2s ease}
  .crumbs a:hover{color:var(--neon)}
  .crumbs .sep{color:var(--tx-3);opacity:.6}
  .crumbs .cur{color:var(--tx-2)}

  /* Hero */
  .hero-cat{
    position:relative;overflow:hidden;border-bottom:1px solid var(--line);
    background-image:
      linear-gradient(180deg,rgba(6,10,18,.72),rgba(6,10,18,.95)),
      url('/assets/images/backpic/back-2.png');
    background-size:cover;background-position:center;
  }
  .hero-cat::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(120% 90% at 15% 10%,#000 30%,transparent 78%);
    -webkit-mask-image:radial-gradient(120% 90% at 15% 10%,#000 30%,transparent 78%);
  }
  .hero-cat::after{
    content:"";position:absolute;top:-45%;left:-12%;width:58%;height:190%;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(35,224,200,.10),transparent);
    transform:rotate(18deg);
  }
  .hero-cat h1{font-size:clamp(28px,5vw,52px);font-weight:800;line-height:1.2;letter-spacing:.5px}
  .hero-sub{font-size:clamp(15px,1.6vw,17px);color:var(--tx-2);max-width:660px;line-height:1.85}

  /* 指标条 */
  .stat-line{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
    border-top:1px solid var(--line);padding-top:18px;margin-top:26px;
  }
  @media (min-width:768px){.stat-line{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .stat-item .k{font-size:13px;color:var(--tx-3)}
  .stat-item .v{font-size:20px;font-weight:700;color:var(--tx-1);margin-top:2px}
  .stat-item .v small{font-size:13px;font-weight:500;color:var(--tx-2);margin-left:4px}

  /* FAQ */
  .faq-wrap{
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
    border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  .faq-group{padding:6px 0}
  .faq-group + .faq-group{border-top:1px solid var(--line)}
  .faq-grouphead{
    display:flex;align-items:center;gap:10px;
    padding:16px 20px 8px;font-size:13px;letter-spacing:1px;color:var(--tx-3);
  }
  .faq-grouphead span.dot{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px rgba(35,224,200,.9)}
  details.faq-item{border-top:1px solid var(--line)}
  details.faq-item:first-of-type{border-top:0}
  .faq-q{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:56px;padding:15px 20px;font-size:15.5px;font-weight:600;color:var(--tx-1);
    cursor:pointer;list-style:none;transition:color .2s ease,background .2s ease;
  }
  .faq-q::-webkit-details-marker{display:none}
  .faq-q:hover{color:#fff;background:rgba(255,255,255,.035)}
  .faq-arrow{flex:0 0 auto;color:var(--neon);transition:transform .25s ease}
  details[open] .faq-arrow{transform:rotate(180deg)}
  .faq-a{
    margin:0 20px 18px 20px;padding:2px 0 2px 14px;
    border-left:3px solid var(--neon);
    font-size:15px;line-height:1.85;color:var(--tx-2);
  }
  .faq-a strong{color:var(--tx-1);font-weight:600}

  /* 侧边目录 */
  .side-dir{position:sticky;top:92px}
  .dir-list li a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 14px;border-radius:10px;font-size:14.5px;color:var(--tx-2);
    border:1px solid transparent;transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
  }
  .dir-list li a:hover{color:#fff;background:rgba(255,255,255,.05);border-color:rgba(35,224,200,.35);transform:translateX(2px)}
  .dir-list li a span{color:var(--tx-3);font-size:12.5px}

  /* 步骤 */
  .step-item{display:flex;gap:16px;align-items:flex-start}
  .step-no{
    flex:0 0 auto;width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(35,224,200,.55);color:var(--neon);font-weight:700;font-size:15px;
    background:rgba(35,224,200,.08);font-variant-numeric:tabular-nums;
  }
  .step-item h3{font-size:16.5px;font-weight:600}
  .step-item p{margin-top:6px;font-size:14.5px;color:var(--tx-2);line-height:1.8}
  .img-frame{
    position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
    background:linear-gradient(140deg,var(--bg-2),rgba(43,107,255,.22));
    aspect-ratio:16/10;
  }
  .img-frame img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
  .img-frame:hover img{transform:scale(1.03)}

  /* CTA */
  .cta-block{
    position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
    background:
      radial-gradient(560px 240px at 88% 20%, rgba(35,224,200,.16), transparent 66%),
      linear-gradient(115deg,var(--bg-2),var(--bg-1));
    clip-path:polygon(28px 0,100% 0,100% 100%,0 100%,0 28px);
  }
  .cta-block::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(90deg,transparent,#000 60%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%,transparent);
  }

  /* 页脚 */
  .site-footer{background:linear-gradient(180deg,rgba(11,18,32,.6),rgba(6,10,18,.95));border-top:1px solid var(--line);margin-top:56px}
  .foot-link{font-size:14.5px;color:var(--tx-2);transition:color .2s ease,transform .2s ease;display:inline-block}
  .foot-link:hover{color:var(--neon);transform:translateX(-2px)}
  .foot-bottom{border-top:1px solid var(--line)}
  .risk-note{
    border-top:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--tx-3);font-size:12.5px;line-height:1.8;
  }

  /* 移动底部 Tab */
  .mobile-tab{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    background:rgba(8,13,23,.92);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  @media (min-width:1024px){.mobile-tab{display:none}}
  .mobile-tab a{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;min-height:58px;padding:6px 2px;font-size:10px;color:var(--tx-3);
    transition:color .2s ease;
  }
  .mobile-tab a svg{stroke:currentColor}
  .mobile-tab a.active{color:var(--neon)}
  .mobile-tab a.active span.tl{color:#fff}
  .mobile-tab a.active::before{
    content:"";position:absolute;top:0;width:26px;height:2px;border-radius:2px;
    background:var(--neon);box-shadow:0 0 10px rgba(35,224,200,.9);
  }
  .mobile-tab span.tl{font-size:10px;letter-spacing:.2px}
  @media (max-width:1023px){
    body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
    .side-dir{position:static}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none!important;animation:none!important}
  }