:root { --bg: #050505; --line: rgba(255, 120, 150, 0.45); --text: #f4f4f5; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { min-height: 100vh; color: var(--text); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.phone { width: 100%; max-width: 1080px; margin: 0 auto; padding: 12px 10px 32px; }
.sticky-head { position: sticky; top: 0; z-index: 20; padding-top: 12px; background: rgba(5,5,5,.92); }
.notice { height: 36px; padding: 0 14px; border-radius: 999px; background: #1a1a1c; overflow: hidden; white-space: nowrap; font-size: 13px; line-height: 36px; }
.notice b { display: inline-block; height: 36px; margin-right: 8px; line-height: 36px; vertical-align: top; }
.notice i { display: inline-block; width: 1px; height: 14px; margin: 11px 8px 0 0; background: #5a5a60; vertical-align: top; }
.ticker { display: inline-block; width: 160px; height: 36px; overflow: hidden; vertical-align: top; }
.ticker-track { height: 36px; white-space: nowrap; }
.ticker span { display: inline-block; height: 36px; line-height: 36px; white-space: nowrap; vertical-align: top; }
.ticker span + span { display: none; }
.banner { position: relative; width: 100%; height: 168px; margin-top: 12px; border-radius: 16px; overflow: hidden; background: #120c22; }
.slides { position: relative; left: 0; height: 168px; overflow: hidden; }
.slide { float: left; width: 100%; height: 168px; overflow: hidden; }
.slide-link { display: block; width: 100%; height: 168px; overflow: hidden; }
.slide-empty { display: block; width: 100%; height: 168px; line-height: 168px; text-align: center; background: #120c22; font-size: 32px; }
.slide img { display: block; width: 100%; height: 168px; max-width: 100%; max-height: 168px; border: 0; object-fit: contain; }
.arrow { position: absolute; top: 50%; z-index: 2; width: 28px; height: 28px; margin-top: -14px; border: 0; border-radius: 50%; background: rgba(20,20,24,.72); color: #fff; cursor: pointer; }
.arrow.prev { left: 8px; } .arrow.next { right: 8px; }
.bottom-banners { position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; width: 100%; background: #050505; text-align: center; }
.bottom-banners button { position: absolute; top: 4px; right: 8px; z-index: 2; width: 20px; height: 20px; padding: 0; border: 1px solid #111; border-radius: 50%; background: #fff; color: #111; font-size: 14px; line-height: 18px; text-align: center; cursor: pointer; }
.bottom-banners a { display: block; width: 1080px; max-width: 100%; height: 56px; margin: 0 auto; overflow: hidden; background: #141418; text-align: center; }
.bottom-banners img { display: block; width: 1080px; max-width: 100%; height: 56px; margin: 0 auto; border: 0; }
.side-float { position: fixed; right: 10px; top: 28%; bottom: auto; z-index: 30; width: 64px; }
.side-float.left { left: 10px; right: auto; }
#videoSide { top: 12%; bottom: auto; }
.side-float button { display: block; width: 20px; height: 20px; margin: 0 0 4px auto; padding: 0; border: 1px solid #111; border-radius: 50%; background: #fff; color: #111; font-size: 14px; line-height: 18px; text-align: center; cursor: pointer; }
.side-float.left button { margin-left: 0; margin-right: auto; }
.side-float a { display: block; width: 64px; height: 64px; overflow: hidden; border: 1px solid #fff; border-radius: 12px; background: #3a3a40; }
.side-float img { display: block; width: 64px; height: 64px; border: 0; object-fit: cover; }
.video-top { margin-top: 12px; overflow: hidden; }
.video-top a, .video-top img, .play-banner a, .play-banner img { display: block; width: 100%; }
.video-top img { height: 120px; object-fit: cover; }
.play-banner { margin: 8px 0; overflow: hidden; }
.play-banner img { height: 72px; object-fit: cover; }
.tabs { display: flex; gap: 4px; margin-top: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #0c0c0e; overflow-x: auto; }
.tabs button { flex: 1; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #eee; cursor: pointer; white-space: nowrap; }
.tabs button.is-on { background: linear-gradient(90deg, #ff9a3c, #ff5b8d); font-weight: 700; }
.videos.panel { display: none; margin-top: 12px; }
.videos.panel.is-on { display: block; }
.subtabs { margin-top: 4px; overflow-x: auto; white-space: nowrap; }
.subtabs button { display: inline-block; height: 32px; margin: 0 6px 0 0; padding: 0 14px; border: 0; border-radius: 999px; background: #1a1a1c; color: #ddd; cursor: pointer; white-space: nowrap; }
.subtabs button.is-on { background: linear-gradient(90deg, #ff9a3c, #ff5b8d); color: #fff; font-weight: 700; }
.video-row { display: none; margin-top: 14px; overflow: hidden; }
.videos.is-on .video-row.is-on { display: block; }
.video-row .video { float: left; display: block; width: 47%; margin: 0 0 8px 2%; overflow: hidden; }
.grid { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin-top: 14px; }
.grid.is-on { display: grid; }
.entry { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tile-letter, .tile-img, .dl-ico, .dl-img { display: block; width: 100%; height: 72px; overflow: hidden; border: 0; border-radius: 16px; }
.tile-letter, .dl-ico { color: #fff; font-size: 22px; font-weight: 700; line-height: 72px; text-align: center; }
.tile-img, .dl-img { object-fit: cover; }
.cap, .dl strong { max-width: 100%; overflow: hidden; font-size: 12px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.video-row .video img, .video-row .video-fallback { display: block; width: 100%; height: 110px; max-width: 100%; object-fit: cover; border: 0; border-radius: 12px; background: #1b1b22; }
.video-row .video strong, .video-row .video em { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.video-fallback { display: block; height: 96px; line-height: 96px; text-align: center; font-size: 28px; }
.video em { color: #9a9aa3; font-style: normal; font-size: 12px; }
.video-pager { clear: both; margin: 6px 0 4px; text-align: center; }
.video-pager a, .video-pager span { display: inline-block; min-width: 32px; height: 32px; margin: 0 4px 6px; padding: 0 8px; border-radius: 8px; background: #1a1a1c; color: #eee; font-size: 13px; line-height: 32px; text-align: center; }
.video-pager .is-on { background: #ff5b8d; color: #fff; }
.date-list { overflow: hidden; }
.date-list.panel { display: none; margin-top: 14px; }
.date-list.panel.is-on { display: block; }
.date-card { float: left; width: 47%; margin: 0 0 8px 2%; border: 2px solid #00e85a; background: #050505; color: #fff; overflow: hidden; }
.date-photo { position: relative; height: 196px; overflow: hidden; background: #1b1b22; }
.date-photo img { display: block; width: 100%; max-width: 100%; height: 196px; border: 0; }
.date-photo b { display: block; height: 170px; line-height: 170px; text-align: center; color: #fff; font-size: 28px; }
.date-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; overflow: hidden; background: #00e85a; color: #111; font-size: 11px; line-height: 26px; }
.date-bar span { float: left; height: 26px; max-width: 62%; padding-left: 6px; overflow: hidden; white-space: nowrap; }
.date-bar em { float: right; height: 26px; padding-right: 6px; font-style: normal; white-space: nowrap; }
.date-body { padding: 8px 8px 10px; }
.date-body strong { display: block; overflow: hidden; color: #fff; font-size: 16px; line-height: 22px; white-space: nowrap; }
.date-body p { margin: 2px 0 0; color: #ececf0; font-size: 12px; line-height: 18px; }
.date-btn { display: block; height: 34px; margin-top: 8px; overflow: hidden; background: #00e85a; color: #111; font-size: 14px; font-weight: 700; line-height: 34px; text-align: center; }
.star-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 12px; color: #ff4d8d; }
.star-line::before, .star-line::after { content: ""; width: 22px; height: 2px; background: #ff4d8d; }
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dl { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid rgba(255,77,141,.85); border-radius: 18px; background: #141418; }
.dl em { padding: 3px 8px; border-radius: 999px; background: #3a3a40; color: #c7c7cc; font-size: 11px; font-style: normal; }
.splash { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 80; overflow: hidden; background: #000; background: rgba(0,0,0,.72); text-align: center; }
.splash-card { display: inline-block; width: 300px; margin-top: 64px; padding: 12px; border-radius: 16px; background: #16161a; text-align: center; }
.splash-card img { display: block; width: 276px; height: 368px; margin: 0 auto; border: 0; border-radius: 12px; }
#splashClose { position: absolute; top: 16px; right: 16px; z-index: 2; width: 72px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: #fff; color: #111; font-size: 16px; line-height: 36px; text-align: center; cursor: pointer; }
.play-page h1 { font-size: 22px; }
.play-page video { width: 100%; min-height: 200px; border-radius: 12px; background: #000; }
.back { display: inline-block; margin: 8px 0 12px; color: #ff8aa8; }
.foot { color: #8a8a93; }
@media (min-width: 760px) {
  .bottom-banners a, .bottom-banners img { height: 72px; }
  .phone { padding: 20px 28px 48px; }
  .banner, .slides, .slide, .slide-link, .slide-empty, .slide img { height: 240px; }
  .slide img { max-height: 240px; }
  .slide-empty { line-height: 240px; }
  .grid.is-on { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 22px; }
  .cap { font-size: 16px; }
  .tabs button { font-weight: 700; }
  .dl strong { font-size: 18px; }
  .dl em { font-size: 14px; }
  #sideFloat, #sideFloatLeft { width: 96px; }
  #sideFloat a, #sideFloatLeft a, #sideFloat img, #sideFloatLeft img { width: 96px; height: 96px; }
  .video-row .video { width: 22%; margin: 0 0 10px 2%; }
  .date-card { width: 22%; margin: 0 0 10px 2%; }
  .date-photo, .date-photo img { height: 220px; }
  .date-photo b { height: 194px; line-height: 194px; }
}