:root{
  --bg:#0c0912;
  --bg-soft:#141021;
  --card:#1a1428;
  --line:rgba(255,255,255,.08);
  --txt:#ece8f6;
  --muted:#a79fbd;
  --pink:#ff4d8d;
  --violet:#8b5cf6;
  --gold:#f5c86b;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1000px 600px at 85% -10%,rgba(139,92,246,.22),transparent 60%),
    radial-gradient(800px 500px at 0% 10%,rgba(255,77,141,.16),transparent 60%),
    var(--bg);
  color:var(--txt);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(12,9,18,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;gap:18px;
  height:64px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img{height:34px;width:34px;border-radius:9px;object-fit:cover;}
.brand span{font-size:18px;font-weight:700;letter-spacing:.5px;}
.nav-toggle{
  margin-left:auto;display:block;
  background:none;border:1px solid var(--line);
  color:var(--txt);width:38px;height:34px;border-radius:9px;
  font-size:16px;cursor:pointer;
}
.main-nav{
  position:absolute;left:0;top:64px;width:100%;
  background:rgba(16,12,26,.98);
  border-bottom:1px solid var(--line);
  display:none;flex-direction:column;
  padding:10px 20px 16px;gap:4px;
}
.main-nav.open{display:flex;}
.main-nav a{
  padding:9px 6px;font-size:14px;color:var(--muted);
  border-bottom:1px dashed rgba(255,255,255,.05);
}
.main-nav a:last-child{border-bottom:none;}
.main-nav a:hover{color:var(--pink);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:56px 0 64px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(600px 360px at 78% 20%,rgba(255,77,141,.20),transparent 65%),
    radial-gradient(520px 320px at 12% 70%,rgba(139,92,246,.22),transparent 65%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;grid-template-columns:1fr;gap:36px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:1px;
  color:var(--gold);
  border:1px solid rgba(245,200,107,.35);
  background:rgba(245,200,107,.07);
  padding:5px 12px;border-radius:999px;
  margin-bottom:18px;
}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:block;}
.hero h1{
  font-size:30px;line-height:1.35;
  font-weight:800;letter-spacing:.5px;
  margin-bottom:16px;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--pink),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{
  color:var(--muted);font-size:15px;max-width:540px;margin-bottom:26px;
}
.hero-points{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;
}
.hero-points span{
  font-size:12.5px;color:var(--txt);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;
}
.dl-buttons{display:flex;flex-wrap:wrap;gap:12px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:600;
  padding:13px 22px;border-radius:999px;
  border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  min-width:150px;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:linear-gradient(100deg,var(--pink),#b13bff);
  color:#fff;
  box-shadow:0 10px 26px rgba(255,77,141,.28);
}
.btn-ghost{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.16);
  color:var(--txt);
}
.btn-gold{
  background:linear-gradient(100deg,#f5c86b,#e69a3c);
  color:#241703;
  box-shadow:0 10px 24px rgba(245,200,107,.22);
}
.btn small{font-weight:400;opacity:.8;font-size:11.5px;}

/* hero collage */
.hero-collage{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  align-content:start;
}
.hero-collage figure{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  aspect-ratio:3/4;
  background:var(--card);
}
.hero-collage figure:nth-child(2){transform:translateY(16px);}
.hero-collage figure:nth-child(5){transform:translateY(16px);}
.hero-collage img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.hero-collage figure:hover img{transform:scale(1.06);}
.hero-collage figcaption{
  position:absolute;left:0;right:0;bottom:0;
  font-size:11px;padding:18px 8px 7px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  color:#fff;
}

/* ---------- section base ---------- */
section{padding:62px 0;position:relative;}
.section-head{margin-bottom:32px;}
.section-kicker{
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--pink);margin-bottom:10px;font-weight:600;
}
.section-head h2{
  font-size:24px;font-weight:800;letter-spacing:.5px;
}
.section-head p{
  color:var(--muted);font-size:14px;margin-top:10px;max-width:660px;
}

/* ---------- 热门短剧 ---------- */
.drama-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.drama-card{
  background:linear-gradient(180deg,var(--card),#130f1f);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s ease;
}
.drama-card:hover{border-color:rgba(255,77,141,.45);}
.drama-card .thumb{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:#0f0b18;
}
.drama-card .thumb img{width:100%;height:100%;object-fit:cover;}
.drama-card .score{
  position:absolute;top:8px;right:8px;
  font-size:11px;font-weight:700;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(245,200,107,.5);
  color:var(--gold);
  padding:2px 8px;border-radius:999px;
}
.drama-card .body{padding:12px 13px 15px;}
.drama-card h3{font-size:15px;font-weight:700;margin-bottom:6px;}
.drama-card .desc{font-size:12.5px;color:var(--muted);margin-bottom:10px;}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;}
.tag-row span{
  font-size:10.5px;padding:2px 8px;border-radius:6px;
  background:rgba(139,92,246,.16);color:#c9b8ff;
  border:1px solid rgba(139,92,246,.25);
}
.date-line{font-size:11px;color:#7d7595;}

/* ---------- 排行榜 ---------- */
.rank-wrap{
  display:grid;grid-template-columns:1fr;gap:14px;
}
.rank-list{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,#171124,#100c1b);
  padding:8px 14px;
}
.rank-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.rank-item:last-child{border-bottom:none;}
.rank-no{
  width:26px;height:26px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.07);color:var(--muted);
}
.rank-item:nth-child(1) .rank-no{background:linear-gradient(135deg,#f5c86b,#e08b2b);color:#2a1a00;}
.rank-item:nth-child(2) .rank-no{background:linear-gradient(135deg,#d8dbe6,#9aa2b8);color:#1a1c22;}
.rank-item:nth-child(3) .rank-no{background:linear-gradient(135deg,#e0a077,#a86540);color:#26140a;}
.rank-item .rank-name{font-size:14px;font-weight:600;}
.rank-item .rank-meta{font-size:11.5px;color:#817a97;margin-top:2px;}
.rank-item .rank-tag{
  margin-left:auto;font-size:11px;color:var(--pink);
  border:1px solid rgba(255,77,141,.3);
  padding:2px 9px;border-radius:999px;flex-shrink:0;
}
.rank-side{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.rank-side figure{
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:3/4;position:relative;background:var(--card);
}
.rank-side img{width:100%;height:100%;object-fit:cover;}
.rank-side figcaption{
  position:absolute;bottom:0;left:0;right:0;
  font-size:11px;padding:16px 8px 7px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
}

/* ---------- 安装详情 ---------- */
.install{
  background:linear-gradient(180deg,rgba(139,92,246,.09),transparent 70%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.steps{
  display:grid;grid-template-columns:1fr;gap:14px;
}
.step{
  display:flex;gap:14px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:14px;padding:16px;
}
.step .num{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  background:linear-gradient(135deg,var(--pink),#a83bff);color:#fff;
}
.step h3{font-size:14.5px;margin-bottom:4px;}
.step p{font-size:12.5px;color:var(--muted);}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.faq-item{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-left:3px solid rgba(255,77,141,.55);
  border-radius:12px;padding:15px 16px;
}
.faq-item h3{font-size:14px;margin-bottom:6px;color:#fff;}
.faq-item p{font-size:13px;color:var(--muted);}

/* ---------- 口碑 ---------- */
.review-grid{
  display:grid;grid-template-columns:1fr;gap:14px;
}
.review{
  background:linear-gradient(160deg,#19132a,#110d1c);
  border:1px solid var(--line);border-radius:14px;padding:16px;
}
.review .who{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--pink));
}
.review .who b{font-size:13px;font-weight:600;}
.review .who i{font-style:normal;font-size:11px;color:#7d7595;margin-left:auto;}
.review p{font-size:13px;color:var(--muted);}

/* ---------- 隐私安全 ---------- */
.safety-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.safety-item{
  display:flex;gap:13px;padding:15px 16px;
  border:1px solid var(--line);border-radius:13px;
  background:rgba(139,92,246,.06);
}
.safety-item .ico{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(139,92,246,.2);color:#c9b8ff;font-size:15px;
}
.safety-item h3{font-size:14px;margin-bottom:3px;}
.safety-item p{font-size:12.5px;color:var(--muted);}

/* ---------- 原创 ---------- */
.origin-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.origin-strip figure{
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:3/4;position:relative;background:var(--card);
}
.origin-strip img{width:100%;height:100%;object-fit:cover;}
.origin-strip figcaption{
  position:absolute;left:0;right:0;bottom:0;
  font-size:11px;padding:18px 8px 8px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
}
.origin-text{
  margin-top:20px;display:grid;grid-template-columns:1fr;gap:12px;
}
.origin-text article{
  border:1px dashed rgba(255,255,255,.14);
  border-radius:13px;padding:15px 16px;
}
.origin-text h3{font-size:14px;margin-bottom:5px;color:var(--gold);}
.origin-text p{font-size:12.5px;color:var(--muted);}

/* ---------- 动态 ---------- */
.news-list{display:grid;grid-template-columns:1fr;gap:10px;}
.news-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.news-date{
  flex-shrink:0;font-size:11.5px;color:#8a82a3;
  border-right:1px solid var(--line);padding-right:12px;
  min-width:84px;
}
.news-item div{font-size:13px;color:#d7d1e6;}

/* ---------- 下载 ---------- */
.download{
  background:
    radial-gradient(600px 300px at 50% 0%,rgba(255,77,141,.16),transparent 70%),
    linear-gradient(180deg,#120e1d,#0c0912);
  border-top:1px solid var(--line);
}
.dl-box{
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:30px 22px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  text-align:center;
}
.dl-box h2{font-size:23px;margin-bottom:10px;}
.dl-box p{color:var(--muted);font-size:14px;max-width:600px;margin:0 auto 22px;}
.dl-box .dl-buttons{justify-content:center;}
.dl-note{
  margin-top:18px;font-size:12px;color:#837b9b;
}
.dl-steps{
  margin-top:26px;display:grid;grid-template-columns:1fr;gap:10px;text-align:left;
}
.dl-steps div{
  font-size:12.5px;color:#b9b1cf;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;
}
.dl-steps b{color:var(--gold);margin-right:6px;}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:26px 0 34px;
  font-size:12px;color:#7a7292;
}
.site-footer .f-top{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  margin-bottom:12px;
}
.site-footer a{color:#8f87a8;}
.site-footer a:hover{color:var(--pink);}
.f-meta{font-size:11.5px;color:#645d7c;}

/* ---------- responsive ---------- */
@media (min-width:768px){
  .hero h1{font-size:38px;}
  .drama-grid{grid-template-columns:repeat(3,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .faq-grid{grid-template-columns:repeat(2,1fr);}
  .review-grid{grid-template-columns:repeat(2,1fr);}
  .safety-grid{grid-template-columns:repeat(2,1fr);}
  .origin-strip{grid-template-columns:repeat(3,1fr);}
  .origin-text{grid-template-columns:repeat(3,1fr);}
  .news-list{grid-template-columns:repeat(2,1fr);}
  .dl-steps{grid-template-columns:repeat(3,1fr);}
  .rank-wrap{grid-template-columns:1.3fr 1fr;align-items:start;}
  .rank-side{grid-template-columns:repeat(2,1fr);}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;}
  .main-nav{
    position:static;display:flex;flex-direction:row;
    background:none;border:none;padding:0;gap:22px;margin-left:auto;width:auto;
  }
  .main-nav a{border:none;padding:0;font-size:13.5px;}
  .nav-toggle{display:none;}
  .section-head h2{font-size:28px;}
}
@media (min-width:1024px){
  .hero{padding:76px 0 84px;}
  .hero h1{font-size:44px;}
  .drama-grid{grid-template-columns:repeat(4,1fr);}
  .steps{grid-template-columns:repeat(4,1fr);}
  .faq-grid{grid-template-columns:repeat(3,1fr);}
  .review-grid{grid-template-columns:repeat(3,1fr);}
  .origin-strip{grid-template-columns:repeat(4,1fr);}
  .hero-collage{grid-template-columns:repeat(3,1fr);gap:12px;}
  section{padding:78px 0;}
}