:root{
  --main:#2563eb;
  --accent:#06b6d4;
  --bg:#f4f8ff;
  --text:#0f1e3d;
  --card:#ffffff;
  --muted:#5b6b8c;
  --line:#dbe6fb;
  --radius-card:18px;
  --radius-pill:999px;
  --shadow-sm:0 4px 14px rgba(37,99,235,.08);
  --shadow-md:0 10px 30px rgba(37,99,235,.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Inter,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{text-decoration:none;}
.container-x{max-width:1240px;margin:0 auto;padding:0 20px;}

/* 导航 */
.nav-shell{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(244,248,255,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease;
  padding:16px 0;
}
.nav-shell.scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:0 6px 24px rgba(37,99,235,.12);
  padding:8px 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{
  font-weight:900;font-size:1.35rem;letter-spacing:-.5px;
  color:var(--text);display:flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.brand .dot{color:var(--main);font-size:1.1rem;}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.nav-links a{
  color:var(--muted);font-weight:600;font-size:.95rem;
  padding:8px 14px;border-radius:var(--radius-pill);
  transition:all .25s ease;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--main);background:rgba(37,99,235,.09);}
.nav-toggle{
  display:none;border:none;background:rgba(37,99,235,.1);color:var(--main);
  width:44px;height:44px;border-radius:var(--radius-pill);font-size:1.15rem;
}
.mobile-menu{
  display:none;flex-direction:column;gap:4px;
  padding:12px 20px 6px;
}
.mobile-menu a{
  color:var(--text);font-weight:600;padding:12px 16px;
  border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);
}
@media(max-width:991px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .mobile-menu.open{display:flex;}
}

/* Hero */
.hero{
  padding:150px 0 70px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:-180px;right:-160px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,212,.28),transparent 68%);
  z-index:0;
}
.hero::after{
  content:"";position:absolute;bottom:-220px;left:-180px;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.16),transparent 70%);
  z-index:0;
}
.hero-inner{position:relative;z-index:2;}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(37,99,235,.1);color:var(--main);
  font-weight:700;font-size:.85rem;
  padding:8px 18px;border-radius:var(--radius-pill);
  margin-bottom:24px;
}
.hero-title{
  font-size:clamp(2.4rem,5.4vw,4rem);
  font-weight:900;line-height:1.06;letter-spacing:-2px;
  margin:0 0 20px;
}
.hero-title .grad{
  background:linear-gradient(100deg,var(--main),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  font-size:1.1rem;color:var(--muted);max-width:560px;
  line-height:1.8;margin-bottom:32px;
}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin-bottom:0;
}
.stat-card{
  background:#fff;border-radius:var(--radius-card);
  padding:20px 16px;box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  transition:transform .3s ease,box-shadow .3s ease;
}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.stat-num{
  font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;
  color:var(--main);line-height:1;letter-spacing:-1px;
}
.stat-num .u{font-size:.9rem;font-weight:700;color:var(--accent);}
.stat-label{font-size:.82rem;color:var(--muted);font-weight:600;margin-top:8px;}
@media(max-width:767px){
  .hero{padding:120px 0 50px;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
}

/* 通用按钮 */
.btn-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:var(--radius-pill);
  font-weight:700;font-size:.98rem;border:none;
  background:linear-gradient(100deg,var(--main),var(--accent));
  color:#fff;position:relative;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
  box-shadow:0 8px 22px rgba(37,99,235,.28);
}
.btn-pill::after{
  content:"";position:absolute;top:0;left:-60%;
  width:45%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .6s ease;
}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(6,182,212,.36);color:#fff;}
.btn-pill:hover::after{left:130%;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:var(--radius-pill);
  font-weight:700;font-size:.98rem;
  background:#fff;color:var(--main);
  border:2px solid var(--line);
  transition:all .3s ease;
}
.btn-ghost:hover{border-color:var(--main);color:var(--main);transform:translateY(-2px);}

/* 区块标题 */
.sec{padding:62px 0;}
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:34px;flex-wrap:wrap;
}
.sec-kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);font-weight:800;font-size:.8rem;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;
}
.sec-title{
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  font-weight:900;letter-spacing:-1px;margin:0;line-height:1.15;
}
.sec-desc{color:var(--muted);font-size:.98rem;margin:10px 0 0;max-width:560px;line-height:1.7;}
.sec-link{
  color:var(--main);font-weight:700;font-size:.95rem;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--radius-pill);
  background:rgba(37,99,235,.08);transition:all .25s ease;
}
.sec-link:hover{background:var(--main);color:#fff;}

/* 影片卡片 */
.poster-grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(6,1fr);
}
@media(max-width:1199px){.poster-grid{grid-template-columns:repeat(5,1fr);}}
@media(max-width:991px){.poster-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:767px){.poster-grid{grid-template-columns:repeat(3,1fr);gap:14px;}}
@media(max-width:479px){.poster-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}

.m-card{
  background:var(--card);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  cursor:pointer;position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease;
}
.m-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);}
.m-poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:linear-gradient(135deg,#e3edff,#d3e6ff);}
.m-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.m-card:hover .m-poster img{transform:scale(1.06);}
.m-poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(15,30,61,.55));
  opacity:0;transition:opacity .35s ease;
}
.m-card:hover .m-poster::after{opacity:1;}
.corner-tag{
  position:absolute;top:8px;left:8px;z-index:3;
  background:linear-gradient(100deg,var(--main),var(--accent));
  color:#fff;font-size:.66rem;font-weight:700;
  padding:4px 9px;border-radius:var(--radius-pill);
  letter-spacing:.3px;box-shadow:0 4px 12px rgba(6,182,212,.4);
}
.score-badge{
  position:absolute;bottom:8px;right:8px;z-index:3;
  background:rgba(255,255,255,.94);color:var(--main);
  font-size:.72rem;font-weight:800;
  padding:3px 9px;border-radius:var(--radius-pill);
  box-shadow:0 4px 12px rgba(15,30,61,.16);
  display:inline-flex;align-items:center;gap:4px;
}
.score-badge i{color:#f59e0b;font-size:.62rem;}
.play-hint{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:2;opacity:0;transition:opacity .35s ease;
}
.m-card:hover .play-hint{opacity:1;}
.play-hint span{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--main);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;box-shadow:0 6px 20px rgba(0,0,0,.24);
  transform:scale(.8);transition:transform .35s ease;
}
.m-card:hover .play-hint span{transform:scale(1);}
.m-info{padding:12px 12px 14px;}
.m-title{
  font-size:.92rem;font-weight:700;color:var(--text);
  line-height:1.35;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.m-meta{font-size:.74rem;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.m-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--line);}

/* 分区 chips */
.cat-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.cat-chip{
  padding:9px 20px;border-radius:var(--radius-pill);
  background:#fff;border:1px solid var(--line);
  color:var(--muted);font-weight:700;font-size:.88rem;
  transition:all .25s ease;cursor:pointer;
}
.cat-chip:hover,.cat-chip.active{
  background:linear-gradient(100deg,var(--main),var(--accent));
  color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(37,99,235,.24);
}

/* 榜单 */
.chart-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(max-width:767px){.chart-list{grid-template-columns:1fr;}}
.chart-item{
  display:flex;align-items:center;gap:16px;
  background:#fff;border-radius:var(--radius-card);
  padding:14px 18px;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease;
}
.chart-item:hover{transform:translateX(6px);box-shadow:var(--shadow-md);}
.chart-rank{
  font-size:1.5rem;font-weight:900;letter-spacing:-1px;
  min-width:42px;color:var(--muted);font-style:italic;
}
.chart-item:nth-child(1) .chart-rank{color:#f59e0b;}
.chart-item:nth-child(2) .chart-rank{color:#94a3b8;}
.chart-item:nth-child(3) .chart-rank{color:#c2814a;}
.chart-thumb{
  width:56px;height:78px;border-radius:12px;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,#e3edff,#cfe3ff);
}
.chart-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.chart-body{flex:1;min-width:0;}
.chart-name{font-weight:800;font-size:1rem;margin:0 0 5px;color:var(--text);}
.chart-sub{font-size:.78rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.heat{
  display:inline-flex;align-items:center;gap:4px;
  color:#f97316;font-weight:800;font-size:.78rem;
  background:rgba(249,115,22,.1);padding:3px 9px;border-radius:var(--radius-pill);
}

/* 即将上线 */
.coming-card{
  background:#fff;border-radius:var(--radius-card);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;
}
.coming-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.coming-head{
  background:linear-gradient(110deg,var(--main),var(--accent));
  color:#fff;padding:16px 20px;
  display:flex;justify-content:space-between;align-items:center;
}
.coming-date{font-weight:900;font-size:1.05rem;letter-spacing:-.3px;}
.coming-day{font-size:.76rem;opacity:.85;font-weight:600;}
.coming-body{padding:18px 20px 20px;}
.coming-title{font-weight:800;font-size:1.02rem;margin:0 0 8px;}
.coming-desc{font-size:.85rem;color:var(--muted);line-height:1.7;margin:0;}

/* 步骤条 */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:991px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:575px){.steps{grid-template-columns:1fr;}}
.step{
  background:#fff;border-radius:var(--radius-card);
  padding:26px 22px;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);position:relative;
  transition:transform .3s ease,box-shadow .3s ease;
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.step-num{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(120deg,var(--main),var(--accent));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1rem;margin-bottom:16px;
  box-shadow:0 8px 20px rgba(37,99,235,.28);
}
.step h4{font-size:1rem;font-weight:800;margin:0 0 8px;}
.step p{font-size:.86rem;color:var(--muted);line-height:1.7;margin:0;}

/* 小贴士 */
.tips-box{
  background:#fff;border-radius:22px;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);padding:34px;
}
@media(max-width:575px){.tips-box{padding:24px;}}
.tip-item{
  display:flex;gap:14px;padding:14px 0;
  border-bottom:1px dashed var(--line);
}
.tip-item:last-child{border-bottom:none;padding-bottom:0;}
.tip-item:first-child{padding-top:0;}
.tip-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:12px;
  background:rgba(6,182,212,.12);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.tip-item h5{font-size:.95rem;font-weight:800;margin:0 0 5px;}
.tip-item p{font-size:.86rem;color:var(--muted);line-height:1.7;margin:0;}

/* FAQ */
.faq-item{
  background:#fff;border-radius:var(--radius-card);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  margin-bottom:12px;overflow:hidden;
}
.faq-q{
  width:100%;text-align:left;border:none;background:transparent;
  padding:20px 24px;font-weight:800;font-size:.98rem;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  cursor:pointer;transition:color .25s ease;
}
.faq-q:hover{color:var(--main);}
.faq-q i{transition:transform .3s ease;color:var(--main);font-size:.85rem;}
.faq-item.open .faq-q i{transform:rotate(180deg);}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .38s ease,padding .38s ease;
  padding:0 24px;
}
.faq-item.open .faq-a{padding:0 24px 22px;}
.faq-a p{font-size:.9rem;color:var(--muted);line-height:1.8;margin:0;}

/* 指南 */
.guide-box{
  background:linear-gradient(120deg,#fff,#f0f7ff);
  border-radius:24px;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);padding:40px;
}
@media(max-width:767px){.guide-box{padding:26px;}}
.guide-box h3{font-size:1.3rem;font-weight:900;margin:0 0 18px;letter-spacing:-.5px;}
.guide-box p{font-size:.94rem;color:#374a6b;line-height:1.95;margin:0 0 16px;}
.guide-box p:last-child{margin-bottom:0;}

/* 友链 */
.friend-links{
  background:#fff;border-radius:22px;border:1px solid var(--line);
  padding:30px 34px;box-shadow:var(--shadow-sm);
}
.friend-links h4{font-size:1rem;font-weight:800;margin:0 0 16px;display:flex;align-items:center;gap:8px;}
.friend-links h4 i{color:var(--accent);}
.friend-links .links{font-size:.88rem;color:var(--muted);line-height:2.1;word-break:break-all;}

/* 页脚 */
.footer{
  background:linear-gradient(180deg,#0f1e3d,#0a1530);
  color:#a9b8d6;padding:60px 0 30px;margin-top:40px;
}
.footer h5{color:#fff;font-size:1rem;font-weight:800;margin:0 0 16px;}
.footer a{color:#a9b8d6;font-size:.88rem;display:block;padding:5px 0;transition:color .25s ease;}
.footer a:hover{color:#fff;}
.footer-brand{font-size:1.35rem;font-weight:900;color:#fff;margin-bottom:14px;display:block;}
.footer p{font-size:.86rem;line-height:1.9;color:#8b9cc0;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:40px;padding-top:24px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.82rem;color:#7d8fb5;
}

/* 弹窗：底部抽屉 */
.drawer-mask{
  position:fixed;inset:0;background:rgba(15,30,61,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  z-index:2000;
}
.drawer-mask.show{opacity:1;visibility:visible;}
.drawer{
  position:fixed;left:0;right:0;bottom:0;z-index:2001;
  background:#fff;border-radius:26px 26px 0 0;
  max-height:88vh;overflow-y:auto;
  transform:translateY(105%);
  transition:transform .42s cubic-bezier(.22,.9,.28,1);
  box-shadow:0 -18px 50px rgba(15,30,61,.3);
  padding:0 0 30px;
}
.drawer.show{transform:translateY(0);}
.drawer-grab{
  width:54px;height:5px;border-radius:99px;background:var(--line);
  margin:12px auto 0;
}
.drawer-close{
  position:absolute;top:16px;right:20px;
  width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(37,99,235,.1);color:var(--main);
  font-size:1rem;cursor:pointer;transition:all .25s ease;z-index:5;
}
.drawer-close:hover{background:var(--main);color:#fff;transform:rotate(90deg);}
.drawer-inner{
  max-width:900px;margin:0 auto;padding:24px 26px 0;
  display:flex;gap:26px;
}
@media(max-width:767px){
  .drawer-inner{flex-direction:column;gap:16px;padding:22px 20px 0;}
}
.drawer-poster{
  width:170px;flex-shrink:0;border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-md);background:linear-gradient(135deg,#e3edff,#cfe3ff);
  aspect-ratio:2/3;
}
@media(max-width:767px){.drawer-poster{width:120px;}}
.drawer-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.drawer-content{flex:1;min-width:0;}
.drawer-content h3{
  font-size:1.5rem;font-weight:900;margin:0 0 10px;letter-spacing:-.5px;
  padding-right:40px;
}
.drawer-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.drawer-tag{
  font-size:.76rem;font-weight:700;color:var(--main);
  background:rgba(37,99,235,.1);padding:5px 12px;border-radius:var(--radius-pill);
}
.drawer-tag.score{color:#f59e0b;background:rgba(245,158,11,.12);}
.drawer-row{font-size:.88rem;color:var(--muted);margin-bottom:8px;line-height:1.7;}
.drawer-row b{color:var(--text);font-weight:700;margin-right:6px;}
.drawer-plot{
  font-size:.9rem;color:#374a6b;line-height:1.85;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
}

/* 进场动画 */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.28,1);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* --- 子页面追加 --- */
.guide-wrap {padding:8px 0 0;}
.guide-card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-sm);
    padding:26px 26px 24px;
    height:100%;
    transition:transform .25s ease, box-shadow .25s ease;
  }
.guide-card:hover {transform:translateY(-4px);box-shadow:var(--shadow-md);}
.guide-card .gc-icon {
    width:46px;height:46px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--main),var(--accent));
    color:#fff;font-size:19px;margin-bottom:14px;
    box-shadow:0 6px 16px rgba(37,99,235,.25);
  }
.guide-card h3 {font-size:18px;font-weight:800;color:var(--text);margin:0 0 10px;line-height:1.4;}
.guide-card p {font-size:14.5px;line-height:1.85;color:var(--muted);margin:0;}
.tip-list {list-style:none;padding:0;margin:0;}
.tip-list li {
    position:relative;padding:12px 0 12px 34px;
    border-bottom:1px dashed var(--line);
    font-size:14.5px;line-height:1.8;color:var(--text);
  }
.tip-list li:last-child {border-bottom:none;}
.tip-list li i {
    position:absolute;left:0;top:14px;color:var(--main);font-size:15px;
  }
.tip-list li b {color:var(--main);font-weight:700;}
.step-row {
    display:flex;gap:16px;align-items:flex-start;
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-card);padding:20px 22px;
    box-shadow:var(--shadow-sm);margin-bottom:16px;
  }
.step-body h3 {font-size:16.5px;font-weight:800;margin:0 0 8px;color:var(--text);}
.step-body p {font-size:14.5px;line-height:1.85;color:var(--muted);margin:0;}
.faq-item h3 {
    font-size:16px;font-weight:800;color:var(--text);margin:0 0 10px;
    display:flex;align-items:flex-start;gap:10px;
  }
.faq-item h3 i {color:var(--accent);margin-top:3px;font-size:14px;}
.faq-item p {font-size:14.5px;line-height:1.85;color:var(--muted);margin:0;padding-left:24px;}
.notice-box {
    background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(6,182,212,.07));
    border:1px solid var(--line);border-radius:var(--radius-card);
    padding:24px 26px;
  }
.notice-box h3 {font-size:17px;font-weight:800;color:var(--text);margin:0 0 12px;}
.notice-box p {font-size:14.5px;line-height:1.9;color:var(--muted);margin:0 0 10px;}
.notice-box p:last-child {margin-bottom:0;}
.guide-card {padding:20px;}
.step-row {padding:16px;}
.faq-item p {padding-left:0;}

/* --- 子页面追加 --- */
/* 导航 */
    .nav-shell {
      position: sticky; top: 0; z-index: 50;
      background: rgba(244,248,255,.88);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }
.brand span { font-size: 22px; }
.nav-links a:hover { color: var(--main); background: rgba(37,99,235,.07); }
.mobile-menu a.active { color: #fff; background: var(--main); }
/* 通用容器 */
    .container-x { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* Hero */
    .hero {
      padding: 56px 0 40px;
      background:
        radial-gradient(900px 340px at 12% -10%, rgba(37,99,235,.14), transparent 70%),
        radial-gradient(700px 320px at 92% 0%, rgba(6,182,212,.16), transparent 70%);
    }
.hero-title em { font-style: normal; color: var(--main); }
/* 区块 */
    .sec { padding: 52px 0; }
/* 特色卡片 */
    .feature-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    }
.feature-card {
      background: var(--card); border: 1px solid var(--line);
      border-radius: var(--radius-card); padding: 26px 24px;
      box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
    }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon {
      width: 48px; height: 48px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(6,182,212,.16));
      color: var(--main); font-size: 20px; margin-bottom: 16px;
    }
.feature-card h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 8px; }
.feature-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
/* 内容分区（图文） */
    .split {
      display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
    }
.split-reverse { grid-template-columns: .9fr 1.1fr; }
.split h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 800; margin: 0 0 16px; line-height: 1.32; }
.split p { font-size: 15.5px; color: var(--muted); margin: 0 0 14px; }
.split-img {
      border-radius: var(--radius-card); overflow: hidden;
      border: 1px solid var(--line); box-shadow: var(--shadow-md);
      aspect-ratio: 16/11; background: #e8f0ff;
    }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
/* 统计条 */
    .highlight-band {
      background: linear-gradient(135deg, var(--main), var(--accent));
      border-radius: 26px; padding: 40px 34px; color: #fff;
      box-shadow: var(--shadow-md);
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
      text-align: center;
    }
.highlight-band .num { font-size: 30px; font-weight: 900; line-height: 1.2; }
.highlight-band .lbl { font-size: 13.5px; opacity: .9; margin-top: 4px; }
/* 时间线 / 更新机制 */
    .timeline { display: grid; gap: 18px; }
.tl-item {
      display: grid; grid-template-columns: 52px 1fr; gap: 18px;
      background: var(--card); border: 1px solid var(--line);
      border-radius: var(--radius-card); padding: 20px 22px; box-shadow: var(--shadow-sm);
    }
.tl-num {
      width: 52px; height: 52px; border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(37,99,235,.1); color: var(--main);
      font-weight: 800; font-size: 18px;
    }
.tl-item h3 { font-size: 16.5px; font-weight: 700; margin: 2px 0 6px; }
.tl-item p { font-size: 14.5px; color: var(--muted); margin: 0; }
/* 适合人群 */
    .who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.who-card {
      display: flex; gap: 14px; align-items: flex-start;
      background: var(--card); border: 1px solid var(--line);
      border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-sm);
    }
.who-card i {
      color: var(--accent); font-size: 20px; margin-top: 3px; flex-shrink: 0;
    }
.who-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.who-card p { font-size: 14.5px; color: var(--muted); margin: 0; }
/* 按钮 */
    .btn-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 26px; border-radius: var(--radius-pill);
      background: var(--main); color: #fff; font-weight: 600; font-size: 15px;
      box-shadow: var(--shadow-sm); transition: all .2s ease;
    }
.cta-box {
      background: var(--card); border: 1px solid var(--line);
      border-radius: 26px; padding: 44px 34px; text-align: center;
      box-shadow: var(--shadow-md);
    }
.cta-box h2 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; margin: 0 0 12px; }
.cta-box p { color: var(--muted); font-size: 15.5px; max-width: 640px; margin: 0 auto 24px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* 页脚 */
    footer {
      background: #0f1e3d; color: #c7d5f5; margin-top: 40px;
      padding: 48px 0 26px;
    }
.footer-grid {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px;
    }
.footer-brand span { font-size: 21px; }
.footer-grid p { font-size: 14px; color: #9db0d8; margin: 0 0 8px; line-height: 1.8; }
.footer-grid h4 { font-size: 15px; color: #fff; margin: 0 0 14px; font-weight: 700; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font-size: 14px; color: #9db0d8; transition: color .18s; }
.footer-links a:hover { color: var(--accent); }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
.split, .split-reverse { grid-template-columns: 1fr; gap: 26px; }
.split-reverse .split-img { order: -1; }
.highlight-band { grid-template-columns: repeat(2, 1fr); padding: 30px 22px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.feature-grid, .who-grid { grid-template-columns: 1fr; }
.highlight-band { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.highlight-band .num { font-size: 24px; }
.footer-grid { grid-template-columns: 1fr; gap: 26px; }

/* --- 子页面追加 --- */
/* 本页专属少量样式，沿用站点变量 */
  .rank-tabs {display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 8px;}
.rank-tab {
    border:1px solid var(--line);
    background:var(--card);
    color:var(--muted);
    padding:9px 20px;
    border-radius:var(--radius-pill);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    transition:.2s;
    box-shadow:var(--shadow-sm);
  }
.rank-tab:hover {color:var(--main);border-color:var(--main);}
.rank-tab.on {background:linear-gradient(135deg,var(--main),var(--accent));color:#fff;border-color:transparent;}
.rank-panel {display:none;}
.rank-panel.on {display:block;}
.rank-list {list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px;}
.rank-item {
    display:flex;align-items:center;gap:18px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:16px 20px;
    box-shadow:var(--shadow-sm);
    transition:.22s;
  }
.rank-item:hover {transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#bcd2f7;}
.rank-no {
    flex:0 0 46px;height:46px;
    display:flex;align-items:center;justify-content:center;
    border-radius:14px;
    font-weight:800;font-size:18px;
    background:#eef4ff;color:var(--main);
  }
.rank-item:nth-child(1) .rank-no {background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;}
.rank-item:nth-child(2) .rank-no {background:linear-gradient(135deg,#94a3b8,#64748b);color:#fff;}
.rank-item:nth-child(3) .rank-no {background:linear-gradient(135deg,#d97706,#b45309);color:#fff;}
.rank-thumb {
    flex:0 0 66px;height:88px;border-radius:12px;overflow:hidden;background:#e8f0fe;
  }
.rank-thumb img {width:100%;height:100%;object-fit:cover;display:block;}
.rank-info {flex:1;min-width:0;}
.rank-name {font-size:17px;font-weight:700;color:var(--text);margin:0 0 6px;}
.rank-meta {font-size:13px;color:var(--muted);margin:0;line-height:1.6;}
.rank-tags {display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;}
.rank-tag {
    font-size:12px;color:var(--main);background:#eef4ff;
    padding:3px 10px;border-radius:var(--radius-pill);
  }
.rank-score {
    flex:0 0 auto;text-align:right;
  }
.rank-score b {display:block;font-size:22px;color:var(--main);font-weight:800;line-height:1;}
.rank-score span {font-size:12px;color:var(--muted);}
.rank-note {
    background:linear-gradient(135deg,#eef4ff,#f4fbff);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:22px 26px;
    color:var(--muted);
    font-size:14px;
    line-height:1.9;
    margin-top:30px;
  }
.rank-note b {color:var(--text);}
.rank-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:26px;}
.rank-card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    padding:24px;
    box-shadow:var(--shadow-sm);
  }
.rank-card h3 {margin:0 0 10px;font-size:17px;color:var(--text);}
.rank-card p {margin:0;font-size:14px;color:var(--muted);line-height:1.85;}
.rank-card .ico {
    width:42px;height:42px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:#eef4ff;color:var(--main);font-size:18px;margin-bottom:14px;
  }
.rank-item {flex-wrap:wrap;gap:12px;padding:14px;}
.rank-thumb {flex:0 0 54px;height:72px;}
.rank-score {text-align:left;}
.rank-score b {font-size:18px;}

/* --- 子页面追加 --- */
/* 本页专属少量补充样式，复用站点的 CSS 变量与类名 */
.var-hero {padding:56px 0 34px;background:linear-gradient(180deg,rgba(37,99,235,.10),rgba(6,182,212,.06) 60%,transparent);}
.var-hero .hero-title {font-size:clamp(28px,4.6vw,44px);line-height:1.22;margin:14px 0 12px;}
.var-hero .hero-sub {max-width:720px;}
.chip-row {display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.chip {display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--line);color:var(--text);font-size:14px;font-weight:500;box-shadow:var(--shadow-sm);text-decoration:none;transition:.2s;}
.chip:hover {color:var(--main);border-color:var(--main);transform:translateY(-2px);}
.chip i {color:var(--accent);}
.var-card {background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden;height:100%;display:flex;flex-direction:column;transition:.25s;}
.var-card:hover {transform:translateY(-4px);box-shadow:var(--shadow-md);}
.var-thumb {position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(6,182,212,.16));}
.var-thumb img {width:100%;height:100%;object-fit:cover;display:block;}
.var-badge {position:absolute;top:10px;left:10px;padding:4px 11px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;color:#fff;background:var(--main);letter-spacing:.3px;}
.var-badge.hot {background:#ef4444;}
.var-badge.new {background:var(--accent);}
.var-badge.end {background:#64748b;}
.var-body {padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.var-title {font-size:17px;font-weight:700;color:var(--text);margin:0;line-height:1.4;}
.var-meta {font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;}
.var-meta i {color:var(--accent);margin-right:4px;}
.var-desc {font-size:13.5px;color:var(--muted);line-height:1.65;margin:0;}
.var-foot {margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:6px;}
.var-score {font-weight:800;color:var(--main);font-size:15px;}
.var-link {font-size:13.5px;font-weight:600;color:var(--accent);text-decoration:none;}
.var-link:hover {color:var(--main);}
.day-strip {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.day-item {background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm);}
.day-item .d {font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.5px;}
.day-item .n {font-size:14.5px;font-weight:600;color:var(--text);margin-top:4px;line-height:1.5;}
.tip-box {background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);}
.tip-box h4 {font-size:16px;font-weight:700;color:var(--text);margin:0 0 8px;}
.tip-box p {font-size:14px;color:var(--muted);line-height:1.75;margin:0;}
.tip-box p + p {margin-top:8px;}
.qa-item {background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);}
.qa-item h4 {font-size:15.5px;font-weight:700;color:var(--text);margin:0 0 8px;}
.qa-item p {font-size:14px;color:var(--muted);line-height:1.75;margin:0;}
.var-hero {padding:38px 0 24px;}
.var-body {padding:14px;}

/* --- 子页面追加 --- */
/* 导航 */
  .nav-shell {
    position:sticky;top:0;z-index:100;
    background:rgba(244,248,255,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
.mobile-menu.show {display:flex;}
/* 页头 */
  .hero {padding:52px 0 8px;}
/* 通用区块 */
  .sec {padding:46px 0;}
.policy-card {
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-card);padding:26px 28px;
    box-shadow:var(--shadow-sm);margin-bottom:18px;
  }
.policy-card h3 {
    display:flex;align-items:center;gap:10px;
    font-size:17.5px;font-weight:700;margin:0 0 12px;letter-spacing:-.2px;
  }
.policy-card h3 i {
    width:32px;height:32px;flex:0 0 32px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(37,99,235,.1);color:var(--main);font-size:14px;
  }
.policy-card p {margin:0 0 10px;font-size:15px;color:#33456b;}
.policy-card p:last-child {margin-bottom:0;}
.policy-card ul {margin:8px 0 0;padding-left:20px;color:#33456b;font-size:15px;}
.policy-card li {margin-bottom:7px;}
.policy-card li::marker {color:var(--accent);}
.two-col {display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.note-box {
    border-left:4px solid var(--accent);
    background:rgba(6,182,212,.07);
    border-radius:12px;padding:16px 18px;
    font-size:14.5px;color:#0e5e73;margin-top:6px;
  }
.cta-band {
    background:linear-gradient(120deg,rgba(37,99,235,.07),rgba(6,182,212,.1));
    border:1px solid var(--line);border-radius:var(--radius-card);
    padding:30px 28px;display:flex;align-items:center;justify-content:space-between;
    gap:20px;flex-wrap:wrap;
  }
.cta-band h3 {margin:0 0 6px;font-size:18.5px;font-weight:800;}
.cta-band p {margin:0;color:var(--muted);font-size:14.5px;}
/* 页脚 */
  .site-footer {
    margin-top:40px;border-top:1px solid var(--line);
    background:rgba(255,255,255,.6);padding:40px 0 26px;
  }
.footer-grid a {display:block;font-size:13.8px;color:var(--muted);margin-bottom:9px;transition:color .18s;}
.footer-grid a:hover {color:var(--main);}
.two-col {grid-template-columns:1fr;}
.policy-card {padding:22px 20px;}

/* --- 子页面追加 --- */
/* ---------- nav ---------- */
  .nav-shell {
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
/* ---------- hero ---------- */
  .hero {padding:56px 20px 24px;text-align:center;}
/* ---------- section ---------- */
  .sec {padding:36px 20px;}
.policy-wrap {max-width:820px;margin:0 auto;}
.card-x {
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-card);box-shadow:var(--shadow-sm);
    padding:26px 28px;margin-bottom:20px;
  }
.card-x h3 {
    font-size:1.08rem;font-weight:800;margin:0 0 12px;
    display:flex;align-items:center;gap:10px;
  }
.card-x h3 .ic {
    flex:0 0 auto;width:32px;height:32px;border-radius:10px;
    background:#e8f0ff;color:var(--main);
    display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;
  }
.card-x p {margin:0 0 12px;font-size:.94rem;color:#22304f;}
.card-x p:last-child {margin-bottom:0;}
.card-x ul {margin:0;padding-left:20px;}
.card-x li {font-size:.94rem;color:#22304f;margin-bottom:8px;}
.card-x li:last-child {margin-bottom:0;}
.card-x strong {color:var(--main);}
.tip {
    background:linear-gradient(135deg,#eef4ff,#e6fbff);
    border:1px solid var(--line);border-radius:var(--radius-card);
    padding:20px 24px;margin-bottom:20px;
  }
.tip p {margin:0;font-size:.92rem;color:#22304f;}
.tip p + p {margin-top:10px;}
.toc {
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-card);box-shadow:var(--shadow-sm);
    padding:22px 26px;margin-bottom:24px;
  }
.toc h3 {font-size:1rem;font-weight:800;margin:0 0 12px;}
.toc ol {margin:0;padding-left:20px;columns:2;column-gap:26px;}
.toc li {font-size:.9rem;margin-bottom:8px;color:#22304f;}
.toc a {color:var(--muted);}
.toc a:hover {color:var(--main);}
.updated {
    display:inline-flex;align-items:center;gap:8px;
    font-size:.82rem;color:var(--muted);margin-bottom:20px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
    padding:6px 16px;
  }
/* ---------- footer ---------- */
  .footer {
    margin-top:30px;background:#0f1e3d;color:#c9d8f5;
    padding:44px 20px 26px;
  }
.footer-inner {max-width:1200px;margin:0 auto;}
.footer-top {display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;margin-bottom:26px;}
.footer-desc {max-width:420px;font-size:.88rem;color:#9fb4dc;line-height:1.7;margin:0;}
.friend-link {color:#8ba3cf;}
.toc ol {columns:1;}
.card-x {padding:22px 20px;}