/* ReelShort 首页复刻样式（基准取自 bak 原页 computed styles）
   断点: md>=768 lg>=1024 xl>=1280；原站 /vw 单位 = N/3.75 vw */
* { margin: 0; padding: 0; box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { background: #000; color: #fff; font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif }
a { color: inherit; text-decoration: none }
img { display: block }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit }

/* ============ header（浮动半透明胶囊条 + 滚动加深） ============ */
header { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 999; width: calc(100% - 24px); max-width: 1200px; height: 52px; border-radius: 999px; background: rgba(15,15,15,.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 24px rgba(0,0,0,.4); transition: background .3s }
header.glass { background: rgba(10,10,10,.68) }
.hd-in { display: flex; align-items: center; height: 100%; padding: 0 7px 0 18px }
.brand { display: flex; align-items: center }
.brand .icon { width: 42px; height: 42px }
.brand .word { display: none; width: 96px; height: 14px; margin-left: 12px }
.dl-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: 999px; background: #e52e2e; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .2s, transform .2s }
.dl-btn:hover { background: #f23f3f; transform: translateY(-1px) }
@media (min-width:768px) {
  header { height: 64px; top: 16px }
  .hd-in { padding: 0 10px 0 24px }
  .brand .icon { width: 52px; height: 52px }
  .dl-btn { height: 44px; padding: 0 24px; font-size: 15px; gap: 8px }
}
@media (min-width:1200px) { .brand .word { display: block } }
@media (min-width:1280px) { .brand .word { width: 120px; height: 18px } }

/* ============ hero（基准: MB 122.667vw / PC 3:1 min-h-480，fade .6s cubic-bezier(0,0,.2,1)） ============ */
.hero { position: relative; width: 100%; overflow: hidden; background: #000; aspect-ratio: 100 / 122.667; }
@media (min-width:768px) { .hero { aspect-ratio: auto; height: max(33.333vw, 480px) } }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s cubic-bezier(0,0,.2,1); pointer-events: none }
.slide.active { opacity: 1; pointer-events: auto }
.slide > img { width: 100%; height: 100%; object-fit: cover; object-position: 67% center }
@media (min-width:768px) { .slide > img { object-position: center } }
.slide-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 40%) }
@media (min-width:768px) { .slide-shade { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%), linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 40%), linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 100%) } }
.slide-info { position: absolute; left: 0; right: 0; bottom: 8vw; display: flex; flex-direction: column; align-items: center; gap: 4.267vw; padding: 0 4.267vw; text-align: center }
@media (min-width:768px) { .slide-info { left: 6vw; right: auto; bottom: 40px; width: 480px; align-items: flex-start; gap: 20px; text-align: left } }
@media (min-width:1024px) { .slide-info { gap: 32px; bottom: 48px } }
@media (min-width:1280px) { .slide-info { width: 544px } }
.slide-tags { display: flex; gap: 8px; flex-wrap: wrap }
.tag { font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; white-space: nowrap }
.tag.hot { background: #e52e2e }
@media (min-width:768px) { .tag { font-size: 14px } }
.slide-info h2 { font-size: 6.4vw; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1.25; text-shadow: 0 2px 8px rgba(0,0,0,.6) }
@media (min-width:768px) { .slide-info h2 { font-size: 40px } }
.slide-desc { display: none; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); display: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
@media (min-width:768px) { .slide-desc { display: -webkit-box } }
.watch-btn { display: inline-flex; align-items: center; gap: 8px; background: #e52e2e; color: #fff; font-size: 14px; font-weight: 600; height: 44px; padding: 0 24px; border-radius: 999px; white-space: nowrap }
@media (min-width:768px) { .watch-btn { font-size: 16px; height: 48px; padding: 0 32px } }

/* 进度条（基准: bottom-10/vw 居中 gap-6/vw，段 h-4/vw w-12/vw 激活 w-32/vw rounded-full bg-white/30） */
.hero-progress { position: absolute; left: 0; right: 0; bottom: 2.667vw; display: flex; justify-content: center; gap: 1.6vw }
.seg { height: 1.067vw; width: 3.2vw; border-radius: 999px; background: rgba(255,255,255,.3); transition: width .3s; padding: 0 }
.seg.active { width: 8.533vw; background: #fff }
@media (min-width:768px) {
  .hero-progress { bottom: 24px; gap: 23px }
  .seg { height: 15px; width: 45px }
  .seg.active { width: 122px }
}

/* ============ 内容区 ============ */
.home-container { padding: 0 6vw 108px; max-width: 1920px; margin: 0 auto }
.sec-title { color: rgba(255,255,255,.8); font-size: 4.267vw; font-weight: 700; margin: 4.267vw 0 }
@media (min-width:768px) { .sec-title { font-size: 24px; margin: 36px 0 24px } }
@media (min-width:1280px) { .sec-title { font-size: 28px } }

.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px }
@media (min-width:768px) { .rec-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 18px } }
.book-item { min-width: 0 }
.book-item .poster { display: block; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 3 / 4 }
.book-item .poster img { width: 100%; height: 100%; object-fit: cover }
@media (min-width:768px) { .book-item .poster { border-radius: 16px } }
.book-item h3 { margin-top: 12px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.8); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.book-item h3 a { color: inherit }
.book-item .sub { display: none; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
@media (min-width:768px) { .book-item h3 { font-size: 14px } .book-item .sub { display: block } }
@media (min-width:1280px) { .book-item h3 { font-size: 16px } .book-item .sub { font-size: 14px } }

/* ============ footer ============ */
footer { background: #000; padding-bottom: 40px }
.ft-collapse { display: block }
.ft-panel { border-bottom: 1px solid rgba(255,255,255,.08) }
.ft-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 6vw; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.9) }
.ft-head svg { transition: transform .3s }
.ft-head.open svg { transform: rotate(180deg) }
.ft-body { max-height: 0; overflow: hidden; transition: max-height .3s ease }
.ft-body.open { max-height: 300px }
.ft-body a, .ft-body span { display: block; padding: 8px 6vw; font-size: 14px; color: rgba(255,255,255,.55); cursor: pointer }
.ft-body a:hover { color: #fff }
.ft-tips { padding: 4px 6vw 16px; font-size: 12px; color: rgba(255,255,255,.3) }
.ft-content { display: flex; flex-direction: column; gap: 20px; padding: 28px 6vw }
.ft-brand { display: flex; flex-direction: column; gap: 12px }
.ft-logo { width: 144px; height: 144px }
.ft-copy { font-size: 12px; color: rgba(255,255,255,.5); white-space: nowrap }
.ft-social { display: flex; gap: 16px }
.ft-social a { transition: opacity .2s }
@media (min-width:768px) {
  .ft-collapse { display: none }
  .ft-content { flex-direction: row; justify-content: space-between; align-items: center; padding: 48px 6vw; gap: 40px }
  .ft-brand { gap: 16px }
  .ft-logo { width: 144px; height: 144px }
}

/* ============ 下载 App 弹窗（深色毛玻璃 + 品牌红，风格与页面一致） ============ */
.dl-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s }
.dl-modal.open { opacity: 1; visibility: visible }
.dl-mask { position: absolute; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
.dl-card { position: relative; width: 100%; max-width: 400px; padding: 40px 28px 32px; border-radius: 24px; background: rgba(22,22,22,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 64px rgba(0,0,0,.6); text-align: center; transform: translateY(16px) scale(.96); transition: transform .25s cubic-bezier(0,0,.2,1) }
.dl-modal.open .dl-card { transform: none }
.dl-close { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); transition: color .2s, background .2s }
.dl-close:hover { color: #fff; background: rgba(255,255,255,.16) }
.dl-logo { width: 126px; height: 126px; margin: 0 auto 16px }
.dl-card h3 { font-size: 22px; font-weight: 700; color: #fff }
.dl-card p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.6) }
.dl-stores { display: flex; flex-direction: column; gap: 12px; margin-top: 24px }
.store-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 20px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); transition: background .2s, border-color .2s }
.store-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24) }
.store-btn svg { flex: none }
.store-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2 }
.store-txt small { font-size: 11px; color: rgba(255,255,255,.6) }
.store-txt strong { font-size: 16px; font-weight: 600; color: #fff }
@media (min-width:768px) { .dl-stores { flex-direction: row } .store-btn { flex: 1 } }