@import url('');

:root {
    --bg: #100718;
    --panel: #1b0d26;
    --panel2: #28142e;
    --line: rgba(255, 220, 240, .12);
    --txt: #fff3f9;
    --muted: #b7a7bc;
    --pink: #fa548c;
    --pink2: #ff92ad;
    --gold: #ffcc7a;
    --content: 1200px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--txt);
    background: radial-gradient(ellipse at 82% 4%, #3c1738 0, transparent 35%), var(--bg);
    font: 16px/1.65 system-ui, -apple-system, 'Microsoft YaHei', sans-serif;
    overflow-x: hidden
}

body.drawer-open {
    overflow: hidden
}

a {
    color: inherit;
    text-decoration: none
}

button,
input {
    font: inherit
}

button {
    cursor: pointer
}

img {
    display: block;
    max-width: 100%
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid #ffcb72;
    outline-offset: 3px
}

.container {
    width: min(var(--content), calc(100% - 40px));
    margin: auto
}

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(15, 6, 22, .87);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line)
}

.nav {
    height: 74px;
    display: flex;
    align-items: center;
    gap: 25px
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 900;
    font-size: 21px;
    white-space: nowrap
}

.brand img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: 9px
}

.navlinks {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto
}

.navlinks a {
    font-size: 14px;
    color: #cdbbce;
    white-space: nowrap
}

.navlinks a:hover,
.navlinks a.active {
    color: #ff8fb4
}

.actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.btn {
    border: 1px solid transparent;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 750;
    white-space: nowrap;
    min-height: 44px;
    padding: 11px 20px;
    transition: .23s ease
}

.btn.primary {
    color: #291019;
    background: linear-gradient(120deg, #ffb9c7, #ff5f99);
    box-shadow: 0 8px 26px #ef3e8640
}

.btn.primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px)
}

.btn.ghost {
    background: #ffffff0d;
    border-color: #ffffff24;
    color: white
}

.btn.ghost:hover {
    border-color: #f85e94
}

.menu {
    border: 1px solid #ffffff26;
    background: #ffffff12;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 22px
}

.download-trigger {
    position: relative
}

.qr-pop {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 12px);
    width: 190px;
    background: white;
    border-radius: 16px;
    padding: 11px;
    box-shadow: 0 18px 40px #0009;
    z-index: 50;
    text-align: center;
    color: #3d2236;
    font-size: 12px
}

.qr-pop img {
    width: 100%;
    border-radius: 9px
}

.download-trigger.top .qr-pop {
    top: calc(100% + 12px);
    bottom: auto
}

.download-trigger:hover .qr-pop,
.download-trigger:focus-within .qr-pop {
    display: block
}

.eyebrow {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 12px;
    color: var(--pink2);
    text-transform: uppercase
}

.pagehead {
    padding: 60px 0 25px
}

.pagehead h1 {
    font-size: clamp(32px, 5vw, 55px);
    line-height: 1.2;
    margin: 10px 0;
    color: var(--txt)
}

.pagehead p {
    color: #d3bacb;
    max-width: 760px
}

.hero {
    padding: 53px 0 56px;
    overflow: hidden
}

.hero-layout {
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    align-items: center;
    gap: 20px;
    min-height: 495px
}

.hero h1 {
    font-size: clamp(36px, 4.5vw, 63px);
    line-height: 1.17;
    letter-spacing: -1.5px;
    margin: 16px 0
}

.hero h1 em {
    font-style: normal;
    color: var(--pink2)
}

.lead {
    font-size: 16px;
    color: #d5bed0;
    max-width: 540px
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 26px 0
}

.hero-points {
    display: flex;
    gap: 18px;
    color: #ceb3ca;
    font-size: 13px;
    flex-wrap: wrap
}

.hero-points b {
    color: white
}

.hero-gallery {
    min-height: 455px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    perspective: 900px
}

.slide {
    position: absolute;
    width: 47%;
    max-width: 258px;
    aspect-ratio: 3/4.25;
    border-radius: 19px;
    overflow: hidden;
    background: #230f2d;
    border: 1px solid #ffffff20;
    box-shadow: 0 22px 42px #0008;
    transition: transform .55s cubic-bezier(.22, .68, 0, 1), opacity .45s;
    cursor: pointer
}

.slide img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.slide:after {
    content: '';
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(transparent, #0f0618ec)
}

.slide b {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 12px;
    z-index: 1;
    font-size: 17px
}

.slide[data-offset='0'] {
    transform: translateX(0) scale(1.12);
    z-index: 5;
    opacity: 1
}

.slide[data-offset='-1'] {
    transform: translateX(-68%) rotateY(17deg) scale(.94);
    z-index: 4;
    opacity: .8
}

.slide[data-offset='1'] {
    transform: translateX(68%) rotateY(-17deg) scale(.94);
    z-index: 4;
    opacity: .8
}

.slide[data-offset='-2'] {
    transform: translateX(-116%) rotateY(20deg) scale(.78);
    z-index: 3;
    opacity: .5
}

.slide[data-offset='2'] {
    transform: translateX(116%) rotateY(-20deg) scale(.78);
    z-index: 3;
    opacity: .5
}

.slide[data-offset='hidden'] {
    transform: scale(.7);
    opacity: 0;
    pointer-events: none
}

.gallery-control {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 11px;
    z-index: 9
}

.circle {
    background: #ffffff18;
    border: 1px solid #ffffff28;
    color: white;
    border-radius: 30px;
    width: 40px;
    height: 40px;
    font-size: 19px
}

.section {
    padding: 52px 0
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 23px
}

.section-head h2 {
    font-size: clamp(26px, 3vw, 36px);
    margin: 7px 0 3px;
    line-height: 1.2
}

.section-head p {
    color: var(--muted);
    margin: 0;
    font-size: 14px
}

.more {
    color: #ff9cb9;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap
}

.poster-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px
}

.poster {
    min-width: 0;
    position: relative
}

.poster-img {
    position: relative;
    aspect-ratio: 3/4.25;
    border-radius: 14px;
    overflow: hidden;
    background: #271431;
    border: 1px solid #ffffff12
}

.poster-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s
}

.poster:hover img {
    transform: scale(1.06)
}

.poster-img:after {
    content: '';
    position: absolute;
    inset: 60% 0 0;
    background: linear-gradient(transparent, #13071ebd)
}

.tag {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 1;
    background: rgba(12, 4, 20, .7);
    border: 1px solid #fff2;
    border-radius: 7px;
    padding: 2px 8px;
    font-size: 11px
}

.play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    color: white;
    opacity: 0;
    transition: .25s;
    background: #13071e40
}

.play span {
    width: 53px;
    height: 53px;
    display: grid;
    place-items: center;
    background: #f96094d9;
    border-radius: 50%;
    font-size: 22px
}

.poster:hover .play {
    opacity: 1
}

.poster h3 {
    font-size: 15px;
    line-height: 1.45;
    margin: 10px 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.poster p {
    font-size: 12px;
    color: var(--muted);
    margin: 0
}

.feature {
    border: 1px solid #ffffff20;
    border-radius: 25px;
    overflow: hidden;
    min-height: 445px;
    position: relative;
    background: #190c24
}

.feature-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #14071ff5 0%, #14071fe8 36%, #14071f65 70%, #14071f10), url('posters/7.webp') center 31%/cover
}

.feature-content {
    position: relative;
    z-index: 1;
    padding: 50px;
    max-width: 570px
}

.feature h2 {
    font-size: 36px;
    margin: 10px 0
}

.feature-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chip {
    font-size: 12px;
    border-radius: 30px;
    border: 1px solid #ffffff2d;
    padding: 5px 12px;
    background: #ffffff12
}

.feature p {
    color: #d4bfd2;
    line-height: 1.8
}

.thumbs {
    display: flex;
    gap: 12px;
    margin: 22px 0
}

.thumbs button {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 9px;
    overflow: hidden;
    width: 69px;
    height: 95px;
    background: #25152f
}

.thumbs button.active {
    border-color: #ffc76b;
    box-shadow: 0 0 15px #ffb84c55
}

.thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.feature .btn {
    margin-top: 6px
}

.categories {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px
}

.category {
    border: 1px solid #ffffff1b;
    background: linear-gradient(140deg, #311632, #1b1028);
    padding: 23px;
    border-radius: 17px;
    transition: .25s
}

.category:hover {
    transform: translateY(-4px);
    border-color: #e85290
}

.category .emoji {
    font-size: 26px;
    display: block;
    margin-bottom: 12px
}

.category strong {
    font-size: 17px
}

.category small {
    display: block;
    color: var(--muted);
    margin-top: 5px
}

.ranking {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.rank-item {
    background: #ffffff09;
    border: 1px solid var(--line);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px
}

.rank-no {
    font-size: 25px;
    font-weight: 900;
    width: 34px;
    text-align: center;
    color: #e79aaf
}

.rank-item:nth-child(-n+3) .rank-no {
    color: var(--gold)
}

.rank-item img {
    width: 65px;
    height: 89px;
    object-fit: cover;
    border-radius: 8px
}

.rank-info {
    min-width: 0;
    flex: 1
}

.rank-info h3 {
    font-size: 16px;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.rank-info p {
    color: var(--muted);
    font-size: 12px;
    margin: 0
}

.rank-item .arrow {
    padding: 0 8px;
    color: #ff89b0
}

.download-panel {
    border: 1px solid #ff90b533;
    background: radial-gradient(circle at 88% 40%, #7b2758 0, transparent 37%), linear-gradient(110deg, #32142e, #180b21);
    border-radius: 26px;
    display: grid;
    grid-template-columns: 1fr 220px;
    align-items: center;
    gap: 35px;
    padding: 40px 50px
}

.download-panel h2 {
    font-size: 34px;
    margin: 7px 0
}

.download-panel p {
    color: #ddc4d4
}

.download-panel .qr-static {
    width: 185px;
    padding: 10px;
    background: white;
    border-radius: 16px;
    justify-self: center
}

.download-panel .qr-static img {
    width: 100%;
    height: auto
}

.comment-ticker {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    margin-bottom: 22px
}

.ticker-track {
    display: flex;
    gap: 13px;
    width: max-content;
    animation: marquee 34s linear infinite
}

.ticker-pill {
    background: #35172f;
    border: 1px solid #ffffff1b;
    border-radius: 30px;
    padding: 9px 19px;
    font-size: 13px;
    white-space: nowrap;
    color: #f6d4e4
}

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

.comments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px
}

.comment {
    padding: 20px;
    border: 1px solid var(--line);
    background: #ffffff08;
    border-radius: 17px
}

.comment-head {
    display: flex;
    align-items: center;
    gap: 11px
}

.avatar {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    object-fit: cover
}

.comment strong {
    font-size: 14px
}

.comment small {
    display: block;
    color: #ac9ab1;
    font-size: 12px
}

.comment p {
    color: #ddc5d9;
    font-size: 14px;
    margin: 14px 0 0
}

.faq {
    max-width: 950px;
    margin: auto
}

.faq details {
    padding: 18px 22px;
    border-radius: 14px;
    background: #ffffff08;
    border: 1px solid var(--line);
    margin: 10px 0
}

.faq summary {
    font-weight: 800;
    cursor: pointer
}

.faq p {
    color: var(--muted);
    font-size: 14px;
    margin: 12px 0 0
}

.footer {
    margin-top: 60px;
    background: #0b0411;
    border-top: 1px solid var(--line);
    padding: 33px 0;
    color: #b8a1b9;
    font-size: 13px
}

.footinner {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap
}

.footlinks {
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}

.footlinks a:hover {
    color: white
}

.shade {
    display: none;
    position: fixed;
    inset: 0;
    background: #0009;
    z-index: 59
}

.shade.on {
    display: block
}

.drawer {
    position: fixed;
    z-index: 60;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(370px, 90vw);
    padding: 22px;
    background: #1e1029;
    border-left: 1px solid #ffffff29;
    transform: translateX(103%);
    transition: transform .35s;
    overflow-y: auto
}

.drawer.on {
    transform: translateX(0)
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px
}

.drawer-links {
    display: grid;
    gap: 7px
}

.drawer-links a {
    padding: 12px 16px;
    border-radius: 12px;
    background: #ffffff08;
    font-size: 15px
}

.drawer-links a.active,
.drawer-links a:hover {
    background: #ee4c8830;
    color: #ffafc8
}

.drawer .btn {
    width: 100%;
    margin-top: 24px
}

.search {
    display: flex;
    gap: 10px;
    margin: 24px 0
}

.search input {
    min-width: 0;
    flex: 1;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid #ffffff30;
    background: #ffffff0d;
    color: white
}

.empty {
    padding: 36px;
    color: var(--muted);
    text-align: center
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1)
}

.reveal.from-left {
    transform: translateX(-35px)
}

.reveal.from-right {
    transform: translateX(35px)
}

.reveal.visible {
    opacity: 1;
    transform: translate(0, 0)
}

@media(max-width:1020px) {
    .navlinks {
        display: none
    }

    .actions {
        margin-left: auto
    }

    .poster-grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .hero-layout {
        grid-template-columns: 1fr 1fr
    }

    .categories {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:700px) {
    .container {
        width: calc(100% - 28px)
    }

    .nav {
        height: 65px;
        gap: 8px
    }

    .brand {
        font-size: 17px
    }

    .brand img {
        width: 37px;
        height: 37px
    }

    .actions .btn {
        padding: 9px 11px;
        font-size: 13px;
        min-height: 40px
    }

    .menu {
        width: 40px;
        height: 40px
    }

    .hero {
        padding: 32px 0
    }

    .hero-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        gap: 14px
    }

    .hero h1 {
        font-size: 35px
    }

    .hero-gallery {
        min-height: 355px;
        order: -1
    }

    .slide {
        width: 40%;
        max-width: 190px
    }

    .hero-points {
        gap: 10px
    }

    .section {
        padding: 32px 0
    }

    .section-head h2 {
        font-size: 25px
    }

    .poster-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px
    }

    .poster h3 {
        font-size: 13px
    }

    .poster-img {
        border-radius: 10px
    }

    .tag {
        font-size: 10px
    }

    .categories {
        grid-template-columns: repeat(2, 1fr)
    }

    .category {
        padding: 16px
    }

    .ranking {
        grid-template-columns: 1fr
    }

    .comments {
        grid-template-columns: 1fr
    }

    .feature {
        min-height: 445px
    }

    .feature-content {
        padding: 25px 18px
    }

    .feature-bg {
        background: linear-gradient(90deg, #14071ff1, #14071fa9), url('posters/7.webp') center/cover
    }

    .feature h2 {
        font-size: 29px
    }

    .download-panel {
        grid-template-columns: 1fr;
        padding: 27px;
        gap: 12px
    }

    .download-panel h2 {
        font-size: 28px
    }

    .download-panel .qr-static {
        display: none
    }

    .download-trigger .qr-pop {
        display: none !important
    }

    .pagehead {
        padding: 40px 0 12px
    }

    .footinner {
        display: block
    }

    .footlinks {
        margin: 15px 0
    }

    .reveal.from-left,
    .reveal.from-right {
        transform: translateY(20px)
    }
}

@media(max-width:365px) {
    .brand span {
        font-size: 15px
    }

    .actions {
        gap: 5px
    }

    .actions .btn {
        font-size: 12px;
        padding: 8px
    }

    .hero h1 {
        font-size: 31px
    }
}

@media(hover:none) {
    .play {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}

/* 2026 51官网布局升级 */
@media(min-width:1021px) {
    .nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 18px
    }

    .navlinks {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(7px, 1vw, 17px);
        min-width: 0;
        flex-wrap: wrap;
        margin: 0
    }

    .navlinks a {
        font-size: clamp(13px, .93vw, 16px);
        white-space: nowrap;
        font-weight: 650;
        padding: 7px 1px
    }

    .actions {
        margin-left: 0
    }
}

.feature-bg {
    background-image: linear-gradient(90deg, #130719 0%, #130719 29%, #130719d9 46%, #13071915 76%), var(--bg-img, url('posters/7.webp'));
    background-position: center, right 43%;
    background-size: cover, auto 100%;
    background-repeat: no-repeat;
    filter: saturate(1.13) contrast(1.07)
}

.feature {
    background: #130719
}

.feature:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, #16091a52, transparent 40%)
}

.feature-content {
    z-index: 2
}

.ranking-premium {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.rank-tile {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 16px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid #ffffff24;
    background: linear-gradient(120deg, #ffffff0d, #ffffff05);
    transition: transform .3s, border-color .3s, background .3s
}

.rank-tile:hover {
    transform: translateY(-3px);
    border-color: #ff789a88;
    background: #ffffff13
}

.rank-cover {
    width: 81px;
    height: 107px;
    position: relative;
    flex: none
}

.rank-cover img {
    width: 100%;
    height: 100%;
    border-radius: 11px;
    object-fit: cover
}

.rank-number {
    position: absolute;
    top: -7px;
    left: -7px;
    border-radius: 8px;
    background: #2b102a;
    border: 1px solid #fa6798;
    color: #ffbdcd;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 900
}

.rank-top-1 .rank-number,
.rank-top-2 .rank-number,
.rank-top-3 .rank-number {
    background: #ffca67;
    color: #291224;
    border-color: #ffca67
}

.rank-details {
    min-width: 0;
    flex: 1
}

.rank-category {
    font-size: 11px;
    color: #f49cbb;
    letter-spacing: .08em
}

.rank-details h3 {
    margin: 8px 0;
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.rank-details p {
    font-size: 12px;
    color: #bda8c2;
    margin: 0 0 11px
}

.rank-meter {
    height: 5px;
    width: min(100%, 190px);
    background: #ffffff17;
    border-radius: 8px;
    overflow: hidden
}

.rank-meter span {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #ff5b88, #ffca67)
}

.rank-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 23px;
    flex: none
}

.rank-right strong {
    font-size: 12px;
    color: #ffc577
}

.rank-go {
    font-size: 12px;
    color: #ffe0ec
}

.rank-showcase {
    display: grid;
    gap: 30px
}

.rank-lead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px
}

.rank-lead h2 {
    font-size: 29px;
    margin: 6px 0
}

.rank-lead p {
    color: #c9b7cb
}

.rank-podium {
    display: grid;
    grid-template-columns: 1fr 1.12fr 1fr;
    align-items: end;
    gap: 15px
}

.podium-item {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #ffffff20;
    background: #211025
}

.podium-item.position-1 {
    height: 315px;
    border-color: #ffc96c88
}

.podium-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 29%
}

.podium-item:after {
    content: "";
    position: absolute;
    inset: 36% 0 0;
    background: linear-gradient(transparent, #120618f7)
}

.podium-item>div {
    position: absolute;
    bottom: 16px;
    left: 20px;
    right: 12px;
    z-index: 2
}

.podium-item span {
    font-weight: 900;
    color: #ffcd6e
}

.podium-item h3 {
    font-size: 19px;
    margin: 7px 0;
    line-height: 1.3
}

.download-panel {
    display: block;
    max-width: 1180px;
    margin: auto;
    border-radius: 30px;
    padding: 62px clamp(22px, 5vw, 85px);
    background: linear-gradient(115deg, #6b1739 0%, #4b184d 55%, #412274 100%);
    border: 1px solid #ffffff22;
    box-shadow: 0 20px 65px #08020e44
}

.download-heading {
    text-align: center
}

.download-label {
    display: inline-block;
    padding: 7px 17px;
    border-radius: 30px;
    border: 1px solid #f75f9a66;
    background: #a41c4d55;
    color: #ffb3cb;
    font-size: 13px
}

.download-heading h2 {
    font-size: clamp(27px, 3vw, 43px);
    margin: 22px 0
}

.download-heading p {
    color: #e5d6e8;
    font-size: 15px
}

.device-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin: 44px 0 42px
}

.device-card {
    border: 1px solid #ffffff32;
    background: #ffffff12;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 21px;
    border-radius: 17px;
    min-height: 91px;
    transition: .25s
}

.device-card:hover {
    background: #ffffff24;
    border-color: #ffb1d1;
    transform: translateY(-3px)
}

.device-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 24px;
    font-weight: 800;
    flex: none;
    color: #fff
}

.ios {
    background: #17141c
}

.android {
    background: #24c563
}

.harmony {
    background: #fc2559
}

.wechat {
    background: #08be60
}

.douyin {
    background: linear-gradient(140deg, #35e0db, #f25387)
}

.tv {
    background: linear-gradient(130deg, #7765ff, #199fff)
}

.device-card strong {
    display: block;
    font-size: 16px
}

.device-card small {
    display: block;
    color: #e0c6e0;
    font-size: 12px;
    margin-top: 5px
}

.download-bottom {
    border-top: 1px solid #ffffff22;
    padding-top: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px
}

.download-bottom .qr-static {
    background: #fff;
    border-radius: 16px;
    padding: 11px;
    width: 134px;
    flex: none;
    display: block
}

.download-bottom .qr-static img {
    width: 100%;
    height: auto;
    display: block
}

.qr-copy {
    max-width: 350px
}

.qr-copy h3 {
    font-size: 18px;
    margin: 0 0 9px
}

.qr-copy p {
    font-size: 13px;
    line-height: 1.8;
    color: #dfd0e8
}

.qr-copy a {
    font-size: 13px;
    color: #ffcdce;
    font-weight: 700
}

.explore-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px
}

.explore-grid a {
    padding: 24px 20px;
    background: linear-gradient(135deg, #2c1532, #1a0f25);
    border: 1px solid #ffffff1c;
    border-radius: 17px;
    transition: .25s
}

.explore-grid a:hover {
    transform: translateY(-4px);
    border-color: #d9538f
}

.explore-grid span {
    font-size: 29px;
    color: #ffaac7
}

.explore-grid h3 {
    font-size: 17px;
    margin: 10px 0
}

.explore-grid p {
    font-size: 12px;
    color: #c5adca;
    margin: 0
}

@media(max-width:1020px) {
    .device-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:700px) {
    .feature-bg {
        background-image: linear-gradient(90deg, #130719ef, #130719b0 65%, #13071945), var(--bg-img, url('posters/7.webp'));
        background-position: center, right center;
        background-size: cover, auto 100%
    }

    .ranking-premium {
        grid-template-columns: 1fr
    }

    .rank-tile {
        padding: 10px;
        gap: 12px
    }

    .rank-cover {
        width: 67px;
        height: 91px
    }

    .rank-details h3 {
        font-size: 15px
    }

    .rank-right {
        gap: 12px
    }

    .rank-podium {
        gap: 7px
    }

    .podium-item {
        height: 178px;
        border-radius: 12px
    }

    .podium-item.position-1 {
        height: 210px
    }

    .podium-item>div {
        left: 8px;
        bottom: 6px
    }

    .podium-item h3 {
        font-size: 12px
    }

    .podium-item span {
        font-size: 11px
    }

    .rank-lead h2 {
        font-size: 22px
    }

    .download-panel {
        padding: 32px 17px;
        border-radius: 22px
    }

    .download-heading h2 {
        font-size: 27px
    }

    .download-heading p {
        font-size: 13px;
        line-height: 1.75
    }

    .device-grid {
        gap: 10px;
        margin: 27px 0
    }

    .device-card {
        padding: 12px 10px;
        gap: 9px;
        min-height: 77px;
        border-radius: 12px
    }

    .device-icon {
        width: 37px;
        height: 37px;
        font-size: 21px;
        border-radius: 10px
    }

    .device-card strong {
        font-size: 13px
    }

    .device-card small {
        font-size: 10px;
        line-height: 1.35
    }

    .download-bottom {
        gap: 14px;
        padding-top: 24px
    }

    .download-bottom .qr-static {
        width: 100px;
        padding: 7px
    }

    .qr-copy h3 {
        font-size: 15px
    }

    .qr-copy p {
        font-size: 11px
    }

    .explore-grid a {
        padding: 16px 12px
    }

    .explore-grid h3 {
        font-size: 14px
    }
}

@media(max-width:390px) {
    .device-grid {
        grid-template-columns: 1fr 1fr
    }

    .device-card {
        gap: 7px
    }

    .device-card strong {
        font-size: 12px
    }

    .device-icon {
        width: 33px;
        height: 33px;
        font-size: 18px
    }
}

/* V3: 清晰右侧图片 + 柔和渐变，不依赖 CSS 变量切换图片 */
.feature {
    isolation: isolate;
    min-height: 470px;
    background: #130719
}

.feature .feature-bg {
    inset: 0;
    position: absolute;
    background: none !important;
    filter: none !important;
    overflow: hidden;
    z-index: 0
}

.feature .feature-art {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 45%;
    max-width: none;
    object-fit: cover;
    object-position: center 28%;
    filter: saturate(1.61) contrast(1.045);
    transition: opacity .28s ease;
    opacity: 1
}

.feature .feature-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #130719 0%, #130719 28%, rgba(19, 7, 25, .97) 38%, rgba(19, 7, 25, .62) 55%, rgba(19, 7, 25, .06) 79%, rgba(19, 7, 25, .12) 100%)
}

.feature .feature-content {
    position: relative;
    z-index: 3
}

.feature:after {
    z-index: 2
}

.device-icon svg {
    width: 27px;
    height: 27px;
    display: block;
    fill: currentColor
}

.device-card {
    overflow: hidden
}

.poster-img {
    position: relative
}

.poster-heat {
    position: absolute;
    left: 7px;
    bottom: 8px;
    z-index: 3;
    padding: 3px 8px;
    border: 1px solid #ffc5d559;
    border-radius: 20px;
    background: rgba(25, 9, 28, .84);
    backdrop-filter: blur(7px);
    font-size: 10px;
    font-weight: 800;
    color: #ffe4e8;
    white-space: nowrap;
    max-width: calc(100% - 14px);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 13px #16081777
}

.section-head .eyebrow:before {
    content: '✦';
    color: #ff79a6;
    padding-right: 6px
}

.poster:hover .poster-heat {
    border-color: #ffa9c6
}

@media(max-width:700px) {
    .feature .feature-art {
        width: 100%;
        height: 58%;
        top: 0;
        right: 0;
        object-position: center 28%
    }

    .feature .feature-bg::after {
        background: linear-gradient(0deg, #130719 12%, rgba(19, 7, 25, .97) 28%, rgba(19, 7, 25, .75) 54%, rgba(19, 7, 25, .35) 100%)
    }

    .feature .feature-content {
        padding-top: 110px
    }

    .device-icon svg {
        width: 23px;
        height: 23px
    }

    .poster-heat {
        font-size: 9px;
        left: 4px;
        bottom: 5px;
        padding: 2px 5px
    }
}

/* Footer logo and non-clickable ranking cards */
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.4
}

.footer-brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px
}

.footer-brand:hover {
    color: #ffd4e2
}

.ranking .rank-tile {
    cursor: default
}

@media(max-width:700px) {
    .footer-brand {
        font-size: 16px
    }

    .footer-brand img {
        width: 34px;
        height: 34px
    }
}