:root{
  --pink:#FF5C8A;
  --light-pink:#FFD6E7;
  --dark:#1A1A2E;
  --purple:#7B5CFF;
  --bg:var(--dark);
  --text:#F8F0F5;
  --text-muted:#B8A9C9;
  --glass:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background-color:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(255,92,138,0.1) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(123,92,255,0.1) 0%, transparent 40%);
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;height:auto;display:block;}

/* 玻璃拟态通用类 */
.glass{
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:16px;
}
.neon-text{
  text-shadow:0 0 10px rgba(255,92,138,0.8), 0 0 20px rgba(255,92,138,0.4);
}
.neon-border{
  box-shadow:0 0 15px rgba(123,92,255,0.6), inset 0 0 10px rgba(123,92,255,0.3);
  border:1px solid var(--purple);
}

/* 顶部导航 */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  background:rgba(26,26,46,0.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.nav-container{
  max-width:1200px;margin:0 auto;
  padding:0 24px;
  height:72px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo-group{
  display:flex;align-items:center;gap:12px;
  font-size:22px;font-weight:bold;
  color:#fff;
}
.logo-group img{
  height:32px;
  animation:jelly 2s infinite;
}
@keyframes jelly{
  0%, 100%{transform:scale(1);}
  30%{transform:scale(1.1,0.9);}
  60%{transform:scale(0.9,1.1);}
}
.nav-menu{display:flex;gap:32px;}
.nav-menu a{
  font-size:15px;color:var(--text-muted);
  transition:color 0.3s;
  position:relative;
}
.nav-menu a:hover, .nav-menu a.active{color:var(--pink);}
.nav-menu a.active::after{
  content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;background:var(--pink);border-radius:2px;
}
.nav-actions{display:flex;align-items:center;gap:16px;}
.search-box{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:8px 16px;
  display:flex;align-items:center;
}
.search-box input{
  background:transparent;border:none;outline:none;
  color:#fff;font-size:14px;width:120px;
}
.search-box input::placeholder{color:rgba(255,255,255,0.4);}
.btn-login{
  padding:8px 24px;border-radius:20px;
  font-size:14px;color:var(--pink);
  border:1px solid var(--pink);
  transition:all 0.3s;
  box-shadow:0 0 10px rgba(255,92,138,0.2);
}
.btn-login:hover{
  background:var(--pink);color:#fff;
  box-shadow:0 0 20px rgba(255,92,138,0.6);
}

/* 容器 */
.section-container{
  max-width:1200px;
  margin:0 auto;
  padding:100px 24px;
}
.section-title{
  font-size:32px;font-weight:bold;
  margin-bottom:40px;text-align:center;
  position:relative;
}
.section-title span{
  background:linear-gradient(90deg, var(--light-pink), var(--pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Hero 首屏 */
.hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  padding-top:72px;
  overflow:hidden;
}
.hero-bg-glow{
  position:absolute;
  top:20%;left:10%;width:400px;height:400px;
  background:var(--pink);border-radius:50%;
  filter:blur(120px);opacity:0.3;
  animation:float 8s infinite alternate;
}
.hero-bg-glow2{
  position:absolute;
  bottom:20%;right:10%;width:300px;height:300px;
  background:var(--purple);border-radius:50%;
  filter:blur(100px);opacity:0.3;
  animation:float 10s infinite alternate-reverse;
}
@keyframes float{
  0%{transform:translateY(0) scale(1);}
  100%{transform:translateY(-30px) scale(1.1);}
}
.hero-content{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  gap:60px;width:100%;max-width:1200px;padding:0 24px;
}
.hero-text{flex:1;}
.hero-text h1{
  font-size:56px;line-height:1.2;margin-bottom:24px;
}
.hero-text p{
  font-size:20px;color:var(--light-pink);margin-bottom:40px;
  background:linear-gradient(90deg, var(--light-pink), #fff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-cta{display:flex;gap:20px;}
.btn-primary{
  background:linear-gradient(135deg, var(--pink), var(--purple));
  color:#fff;padding:16px 40px;border-radius:30px;
  font-size:18px;font-weight:bold;
  border:none;cursor:pointer;
  animation:pulse 2s infinite;
  transition:transform 0.3s;
}
.btn-primary:hover{transform:scale(1.05);}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,92,138,0.7);}
  70%{box-shadow:0 0 0 20px rgba(255,92,138,0);}
  100%{box-shadow:0 0 0 0 rgba(255,92,138,0);}
}
.btn-secondary{
  background:transparent;
  border:2px solid var(--light-pink);
  color:var(--light-pink);
  padding:16px 40px;border-radius:30px;
  font-size:18px;font-weight:bold;cursor:pointer;
  transition:all 0.3s;
}
.btn-secondary:hover{
  background:rgba(255,214,231,0.1);
}
.hero-3d-phone{
  flex:1;
  display:flex;justify-content:center;
  perspective:1000px;
}
.phone-mockup{
  width:280px;height:580px;
  border-radius:40px;
  border:8px solid rgba(255,255,255,0.1);
  background:#000;
  transform:rotateY(-15deg) rotateX(5deg);
  box-shadow:20px 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(255,92,138,0.2);
  overflow:hidden;
  position:relative;
  transition:transform 0.5s;
}
.phone-mockup:hover{transform:rotateY(0) rotateX(0);}
.phone-mockup img{width:100%;height:100%;object-fit:cover;}

/* 热播剧场 */
.masonry-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:24px;
}
.drama-card{
  border-radius:16px;overflow:hidden;
  position:relative;cursor:pointer;
  transition:transform 0.4s, box-shadow 0.4s;
  background:var(--glass);
}
.drama-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(255,92,138,0.2);
}
.drama-card img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform 0.6s;
}
.drama-card:hover img{transform:scale(1.08);}
.card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px;
}
.card-title{
  font-size:16px;font-weight:bold;margin-bottom:8px;
}
.card-tags{
  display:flex;gap:8px;flex-wrap:wrap;
}
.tag{
  font-size:12px;padding:2px 8px;border-radius:10px;
  background:rgba(255,92,138,0.2);color:var(--light-pink);
}
.card-play-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.5);
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(255,92,138,0.8);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:all 0.3s;
  backdrop-filter:blur(4px);
}
.card-play-btn::after{
  content:'';border-style:solid;
  border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent #fff;
  margin-left:4px;
}
.drama-card:hover .card-play-btn{
  opacity:1;transform:translate(-50%,-50%) scale(1);
  animation:spin 3s linear infinite;
}
@keyframes spin{100%{transform:translate(-50%,-50%) scale(1) rotate(360deg);}}

/* 分类导航 */
.category-pills{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
}
.pill{
  padding:10px 28px;border-radius:30px;
  border:1px solid var(--purple);
  color:var(--light-pink);
  font-size:16px;cursor:pointer;
  transition:all 0.3s;
}
.pill.active, .pill:hover{
  background:linear-gradient(135deg, var(--pink), var(--purple));
  color:#fff;border-color:transparent;
  box-shadow:0 0 15px rgba(255,92,138,0.5);
  transform:translateY(-2px);
}

/* 今日热榜 */
.ranking-list{
  display:flex;flex-direction:column;gap:12px;
}
.rank-item{
  display:flex;align-items:center;gap:20px;
  padding:16px 24px;border-radius:16px;
  background:var(--glass);
  border:1px solid transparent;
  transition:all 0.3s;
}
.rank-item:hover{
  border-color:var(--pink);
  background:rgba(255,92,138,0.05);
  transform:translateX(8px);
}
.rank-num{
  font-size:24px;font-weight:bold;font-style:italic;
  width:40px;text-align:center;
}
.rank-num.top1{color:#FFD700;}
.rank-num.top2{color:#C0C0C0;}
.rank-num.top3{color:#CD7F32;}
.rank-title{flex:1;font-size:18px;}
.rank-heat{
  font-size:14px;color:var(--pink);
  background:rgba(255,92,138,0.1);
  padding:4px 12px;border-radius:12px;
}

/* 会员特权 */
.pricing-cards{
  display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;
}
.pricing-card{
  width:280px;padding:40px 32px;
  text-align:center;border-radius:24px;
  background:var(--glass);border:1px solid var(--glass-border);
  transition:all 0.4s;
}
.pricing-card.popular{
  transform:scale(1.1);
  border-color:var(--pink);
  box-shadow:0 0 30px rgba(255,92,138,0.3);
  background:linear-gradient(180deg, rgba(255,92,138,0.1), rgba(26,26,46,0.8));
}
.pricing-card:hover{transform:translateY(-10px);}
.pricing-card.popular:hover{transform:scale(1.1) translateY(-10px);}
.card-price{
  font-size:40px;font-weight:bold;color:var(--pink);
  margin:20px 0;font-family:monospace;
}
.card-price span{font-size:16px;color:var(--text-muted);}

/* 创作者中心 */
.creator-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
.dashboard{
  padding:32px;
}
.data-row{
  display:flex;justify-content:space-between;
  margin-bottom:24px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.data-row:last-child{border:none;margin:0;padding:0;}
.data-label{font-size:16px;color:var(--text-muted);}
.data-val{font-size:24px;font-weight:bold;color:var(--pink);}

.step-progress{display:flex;flex-direction:column;gap:24px;position:relative;}
.step-progress::before{
  content:'';position:absolute;left:20px;top:10px;bottom:10px;
  width:2px;background:rgba(255,255,255,0.1);
}
.step-item{display:flex;gap:20px;position:relative;z-index:1;}
.step-dot{
  width:40px;height:40px;border-radius:50%;
  background:var(--dark);border:2px solid var(--purple);
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;color:var(--purple);
}
.step-item.active .step-dot{
  background:var(--pink);border-color:var(--pink);color:#fff;
  box-shadow:0 0 15px rgba(255,92,138,0.5);
}
.step-content h4{font-size:18px;margin-bottom:4px;}
.step-content p{font-size:14px;color:var(--text-muted);}

/* 短剧预告片 */
.trailer-wall{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.trailer-item{
  position:relative;border-radius:16px;overflow:hidden;
  aspect-ratio:16/9;cursor:pointer;
}
.trailer-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s;
}
.trailer-item:hover img{transform:scale(1.1);}
.trailer-mask{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  opacity:0;transition:opacity 0.3s;
  display:flex;align-items:flex-end;padding:20px;
}
.trailer-item:hover .trailer-mask{opacity:1;}
.trailer-mask h4{
  transform:translateY(20px);transition:transform 0.3s;
  color:#fff;font-size:18px;
}
.trailer-item:hover .trailer-mask h4{transform:translateY(0);}

/* 用户评价 */
.review-slider{
  display:flex;gap:24px;overflow-x:auto;
  padding-bottom:20px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.review-slider::-webkit-scrollbar{display:none;}
.review-card{
  min-width:300px;
  scroll-snap-align:center;
  padding:32px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-border);
}
.review-header{
  display:flex;align-items:center;gap:16px;margin-bottom:16px;
}
.review-avatar{
  width:50px;height:50px;border-radius:50%;
  border:2px solid var(--pink);
  box-shadow:0 0 10px rgba(255,92,138,0.5);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;background:var(--purple);
}
.review-stars{color:#FFD700;letter-spacing:2px;margin-bottom:12px;}
.review-text{font-size:15px;color:var(--text-muted);line-height:1.8;}

/* APP下载 */
.download-section{
  text-align:center;
  padding:120px 24px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, transparent, rgba(255,92,138,0.1));
}
.download-box{
  display:inline-flex;align-items:center;gap:60px;
  padding:60px;border-radius:32px;
  background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid var(--pink);
  box-shadow:0 0 40px rgba(255,92,138,0.2);
}
.download-info{text-align:left;}
.download-info h2{font-size:40px;margin-bottom:16px;}
.download-info p{color:var(--text-muted);margin-bottom:32px;}
.qr-code{
  width:120px;height:120px;background:#fff;
  border-radius:12px;padding:8px;
  transition:transform 0.3s;
}
.qr-code:hover{transform:scale(1.05);}
.qr-code img{width:100%;height:100%;}

/* 页脚 */
.footer{
  border-top:1px solid rgba(255,255,255,0.05);
  padding:40px 24px;
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,0.3);
}
.footer p{margin-bottom:12px;}
.footer a{color:rgba(255,255,255,0.4);transition:color 0.3s;}
.footer a:hover{color:var(--pink);}
.time-stamp{font-size:12px;color:rgba(255,255,255,0.2);}

/* 响应式 */
@media (max-width: 1024px){
  .hero-text h1{font-size:40px;}
  .hero-content{flex-direction:column;text-align:center;}
  .hero-cta{justify-content:center;}
  .nav-menu{display:none;}
  .creator-grid{grid-template-columns:1fr;}
  .download-box{flex-direction:column;text-align:center;padding:40px;}
  .download-info{text-align:center;}
}
@media (max-width: 768px){
  .section-container{padding:60px 16px;}
  .hero-text h1{font-size:32px;}
  .hero-text p{font-size:16px;}
  .pricing-card{width:100%;max-width:320px;}
  .pricing-card.popular{transform:scale(1);}
  .pricing-card.popular:hover{transform:translateY(-10px);}
  .trailer-wall{grid-template-columns:1fr;}
  .masonry-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
  .rank-item{padding:12px 16px;gap:12px;}
  .rank-title{font-size:16px;}
}