:root {
    --bg-page: #111214;
    --icon-notice-size: .36rem;
    --color-text-primary: #ffffff;
    --nav-bar-bg: var(--bg-page);
    --nav-indicator-display: none;
    --detail-content-bg: #1F2335;

    --accent1-fill: #F22880;
    --accent2-fill: #FFFFFF;
    --download-btn-bg: #FFFFFF;
    --download-btn-color: #CB2C89;
    --go-top-bg: #CB2C89;
    --go-top-color: #FFFFFF;
}

[data-theme="purple"] {
    --bg-page: #01030C;
    --title-bg: #1F2335;
    --detail-content-bg: #1F2335;
    --nav-bar-bg: url('../../img/abcd/purple/nav-bar-bg.svg');
    --btn-bg: linear-gradient(90deg, #3A76FA 0%, #E32178 100%);
    --bg: url('../../img/abcd/purple/bg.png');
    --marquee-bg: linear-gradient(90deg, #C673E5 0%, #5538B6 100%);
    --icon-notice: url('../../img/abcd/purple/icon-notice.svg');
    --icon-notice-size: .32rem;
    --nav-indicator-display: block;
    --date-bg: #1F2335;
    --card-bg: var(--bg-page);
    --card-border: 1px solid #353539;
    --download-btn-bg: #FFFFFF;
    --download-btn-color: #CB2C89;
    --go-top-bg: #CB2C89;
    --go-top-color: #FFFFFF;
    --icon-loc: url('../../img/abcd/purple/icon-loc.png');
    --icon-project: url('../../img/abcd/purple/icon-project.png');
    --icon-qual: url('../../img/abcd/purple/icon-qual.png');
}

[data-theme="orange"] {
    --bg: url('../../img/abcd/orange/bg.png');
    --detail-content-bg: #2E2E2E;
    --btn-bg: linear-gradient(270deg, #FE924C 0%, #FC686F 100%);
    --marquee-bg: linear-gradient(270deg, #FE924C 0%, #FC686F 100%);
    --icon-notice: url('../../img/abcd/orange/icon-notice.svg');
    --color-text-primary: #D7D7D7;
    --nav-bar-bg: linear-gradient(#121212, #121212),
    linear-gradient(270deg, #FE924C 0%, #FC686F 100%);
    --nav-bar-bg-active: linear-gradient(270deg, #FE924C 0%, #FC686F 100%);
    --nav-bar-color: #FFFFFF;
    --nav-bar-color-active: #FFFF00;
    --date-border: 1px solid #5B5B5B;
    --date-bg: #323232;
    --card-bg: #121212;
    --card-border: 1px solid #353539;
    --download-btn-bg: #FFFFFF;
    --download-btn-color: #FC6B6C;
    --go-top-bg: #FC6B6C;
    --go-top-color: #FFFFFF;
    --icon-loc: url('../../img/abcd/orange/icon-loc.png');
    --icon-project: url('../../img/abcd/orange/icon-project.png');
    --icon-qual: url('../../img/abcd/orange/icon-qual.png');
}

[data-theme="red"] {
    --bg: url('../../img/abcd/red/bg.png');
    --detail-content-bg: #2E2E2E;
    --btn-bg: linear-gradient(180deg, #FF5B7B 0%, #FF214C 100%);
    --marquee-bg: #2E2E2E;
    --icon-notice: url('../../img/abcd/red/icon-notice.svg');
    --color-text-primary: #D7D7D7;
    --nav-bar-bg: linear-gradient(#121212, #121212),
    linear-gradient(180deg, #FF5B7B 0%, #FF214C 100%);
    --nav-bar-bg-active: linear-gradient(180deg, #FF5B7B 0%, #FF214C 100%);
    --nav-bar-color-active: #FFFFFF;
    --date-border: 1px solid #919392;
    --date-bg: #2E2E2E;
    --card-bg: #2E2E2E;
    --card-title-bg: linear-gradient(180deg, #FF5B7B 0%, #FF214C 100%);

    --accent1-bg: linear-gradient(180deg, #FF5B7B 0%, #FF214C 100%);
    --accent1-fill: transparent;

    --accent2-bg: var(--accent1-bg);
    --accent2-fill: var(--accent1-fill);
    --download-btn-bg: linear-gradient(180deg, #FF5B7B 0%, #FF214C 100%);
    --download-btn-color: #FFFFFF;
    --go-top-bg: linear-gradient(180deg, #FF5B7B 0%, #FF214C 100%);
    --go-top-color: #FFFFFF;
    --icon-like: url('../../img/abcd/red/like-icon.js');

    --icon-loc: url('../../img/abcd/red/icon-loc.png');
    --icon-project: url('../../img/abcd/red/icon-project.png');
    --icon-qual: url('../../img/abcd/red/icon-qual.png');
}

[data-theme="yellow"] {
    --bg: url('../../img/abcd/yellow/bg.png');
    --detail-content-bg: #2E2E2E;
    --btn-bg: #F7B52C;
    --marquee-bg: #2E2E2E;
    --icon-notice: url('../../img/abcd/yellow/icon-notice.svg');
    --color-text-primary: #D7D7D7;
    --nav-indicator-display: block;
    --nav-bar-bg: #2E2E2E;
    --nav-bar-bg-active: linear-gradient(180deg, #FF5B7B 0%, #FF214C 100%);
    --nav-bar-color: #FFFFFF;
    --nav-bar-color-active: #FFFF00;
    --date-border: 1px solid #919392;
    --date-bg: #F6F6F6;
    --date-title-color: #353539;
    --date-secondary-color: #353539;
    --card-bg: #2E2E2E;
    --card-border: 1px solid #FFCB11;

    --accent1-bg: linear-gradient(270deg, #FE924C 0%, #FC686F 100%);;
    --accent1-fill: transparent;
    --download-btn-bg: #F7D047;
    --download-btn-color: #353539;
    --go-top-bg: #F7D047;
    --go-top-color: #353539;
    --icon-like: url('../../img/abcd/yellow/like-icon.js');
    --icon-loc: url('../../img/abcd/yellow/icon-loc.png');
    --icon-project: url('../../img/abcd/yellow/icon-project.png');
    --icon-qual: url('../../img/abcd/yellow/icon-qual.png');
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.hidden {
    display: none;
}

.block {
    display: block;
}

.mt0 {
    margin-top: 0 !important;
}

.mt5 {
    margin-top: .1rem;
}

.mt12 {
    margin-top: .24rem;
}

.mb8 {
    margin-bottom: .16rem;
}

.mb12 {
    margin-bottom: .24rem;
}

a:hover,
a:focus,
a:active {
    text-decoration: none
}

a {
    text-decoration: none;
}

img {
    object-fit: cover;
}

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    color: var(--color-text-primary);
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    background-color: var(--bg-page);
}

#app {
    font-size: .24rem;
    padding: .16rem 0;
    background: var(--bg);
    background-size: 100% 1.5rem;
    background-repeat: no-repeat;
    position: relative;
}

.relative {
    position: relative;
}

.text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.px-8 {
    padding: 0 .16rem;
}

.my-sticky {
    position: sticky;
    top: 0;
    z-index: 11;
    background: var(--bg-page);
}

.notif {
    width: var(--icon-notice-size);
    height: var(--icon-notice-size);
    background: var(--icon-notice);
    background-size: contain;
}

.marquee-wrap {
    /*padding: .08rem 0;*/
    width: 100%;
}

.marquee-box {
    border-radius: 0.15rem;
    margin-top: .275rem;
    margin-left: 0.195rem;
    display: flex;
    align-items: center;
    height: 0.6rem;
    font-size: 0.18rem;
    font-weight: 400;
    padding-left: 0.21rem;
    margin-right: 0.1rem;
    color: #FFFFFF;
    background: var(--marquee-bg);
}

.marquee-box .container-main {
    flex: 1;
    margin: 0 .05rem;
    font-size: .2rem;
    overflow: hidden
}

.marquee-box p {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    font-size: .24rem;
    animation: vMarquee 10s linear infinite
}

.marquee-box .btn-more {
    width: 1.28rem;
    height: .5rem;
    line-height: .5rem;
    border-radius: .16rem;
    text-align: center;
    font-size: .22rem;
    color: var(--download-btn-color);
    background: var(--download-btn-bg);
    margin-right: 0.34rem;
}

@keyframes vMarquee {
    0% {
        transform: translate3d(0, 0, 0)
    }

    100% {
        transform: translate3d(-100%, 0, 0)
    }
}


.nav-c {
    display: flex;
    flex: 1;
    margin-top: 0.34rem;
    border-radius: 0.15rem;
    position: relative;
    font-weight: 500;
    font-size: 0.34rem;
}

[data-nav-type="flat"] .nav-c {
    margin-left: 0.165rem;
    margin-right: 0.165rem;
    height: 0.8rem;
}

[data-theme="purple"] .nav-c {
    background: var(--nav-bar-bg) center / cover no-repeat;
}

[data-theme="yellow"] .nav-c {
    background: var(--nav-bar-bg);
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
}

[data-theme="yellow"] .nav-c .item:not(.active) .text-content {
    background-image: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: #FFFFFF;
    color: #FFFFFF;
    display: inline-block;
}

[data-theme="yellow"] .nav-c .item.active .text-content {
    background-image: linear-gradient(90deg, #FCEC4F 0%, #F6CE46 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

[data-theme="purple"] .nav-c .item.active {
    color: #FFFF00;
}

[data-nav-type="capsule"] .nav-c {
    gap: 0.58rem;
    margin-left: 0.38rem;
    margin-right: 0.38rem;
}

[data-nav-type="capsule"] .nav-c .item {
    border-radius: 0.2rem;
    border: 1px solid transparent;
    background-image: var(--nav-bar-bg);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: var(--nav-bar-color);
    font-size: 0.3rem;
    width: 3.08rem;
    height: 0.8rem;
}


[data-nav-type="capsule"] .nav-c .item.active {
    color: var(--nav-bar-color-active);
    background: var(--nav-bar-bg-active);
    background-clip: border-box;
    background-origin: padding-box;
}

[data-theme="red"] .nav-c .item:not(.active) .text-content {
    background-image: var(--accent1-bg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

[data-theme="red"] .nav-c .item.active .text-content {
    background-image: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: #FFFFFF;
    color: #FFFFFF;
    display: inline-block;
}

.nav-c .item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.nav-c .item.active {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0.45rem;
    height: 0.045rem;
    margin-bottom: 0.08rem;
    display: var(--nav-indicator-display, block);
    background: url("../../img/abcd/purple/nav-i.svg") center / 100% 100% no-repeat;
    /*transition: transform 0.3s ease;*/

}

[data-theme="purple"] .nav-indicator {
    background: url("../../img/abcd/purple/nav-i.svg") center / 100% 100% no-repeat;
}

[data-theme="yellow"] .nav-indicator {
    background: linear-gradient(90deg, #FCEC4F 0%, #F6CE46 100%);
}

.nav-c img {
    width: 0.44rem;
    height: auto;
}

.swiper-wrap {
    margin-top: 0.255rem;
    padding-left: .12rem;
    padding-right: .12rem;
}

.swiper-banner {
    border-radius: 0.16335rem;
}

.swiper-banner .swiper-slide {
    text-align: center;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: translateZ(0);
}

.swiper-banner .swiper-pagination {
    position: absolute;
    width: auto;
    left: auto;

    bottom: 10px;
    right: 10px;

    background: #FF2E78CC;
    color: #FFFFFFB2;
    padding: 2px 8px;
    border-radius: 1.04rem;

    font-size: .2rem;
    font-weight: 600;
}

.swiper-banner .swiper-pagination-current {
    color: #FFFFFF;
}

.block {
    display: block;
}

.banner-img {
    width: 100%;
    aspect-ratio: 64 / 35;
}

.item-box {
    margin-top: .28rem;
}

.item-wrap {
    padding: 0 .16rem;
}

.title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-wrap {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    margin-left: -0.16rem;
    margin-right: -0.16rem;
    width: auto;
}

.title-item {
    color: #FF8753;
    font-size: .28rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.title-img {
    width: 100%;
}

[data-theme="purple"] .title-wrap {
    background: var(--title-bg);
}

[data-theme="purple"] .title-img {
    height: 47px;
    width: 126px;
    object-fit: contain;

}

.title-primary {
    font-size: 0.28rem;
    color: #FF40BF;
    font-weight: bold;
}

.title-secondary {
    font-size: .28rem;
    color: #FFFFFF99;
}

.more-btn {
    background: linear-gradient(270deg, #FF2D54 0%, #FF2DA1 100%), linear-gradient(270deg, #FF2DC0 0%, #FF6BBC 100%);
    color: #FFFFFFCC;
    border-radius: 0.34rem;
    padding: .06rem .22rem;
    font-size: .24rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.jgg-wrap {
    padding-top: .16rem;
    padding-bottom: .16rem;
    border-radius: .2rem;
}

.grid-col-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .16rem;
}

.jgg-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.jgg-img {
    width: 1.24rem;
    height: 1.24rem;
    border-radius: .2rem;
    margin-bottom: .08rem;
}

.jgg-item .text {
    color: #FFFFFFCC;
    text-align: center;
}

.jgg-load {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .06rem;
    padding-right: 0.14rem;
    padding-left: 0.14rem;
    border-radius: 0.34rem;
    border: 0.5px solid #FF52BE;
    color: #FF52BE;
    font-size: .26rem;
    font-weight: 400;
}

.jgg-load-icon {
    width: .20rem;
    height: .20rem;
    margin-right: .04rem;
}


.grid-col-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.16rem;
}

.qq-item {
    background-color: #29304A;
    width: 100%;
    border-radius: .2rem;
    overflow: hidden;
}

.qq-img {
    width: 3.54rem;
    height: 3.54rem;
}

.qq-info-wrap {
    padding: .1rem;
}

.qq-title {
    margin-bottom: 6px;
    font-size: .36rem;
    font-weight: 600;
    color: #FFFFFFCC;
}

.qq-info {
    display: flex;
    justify-content: space-between;
    font-size: .24rem;
}

.qq-pic {
    font-size: .28rem;
    color: #FF40BF;
    font-weight: 600;
}

.qq-pic-icon {
    font-size: .24rem;
    font-weight: 400;
}

.gril-img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 4rem;
}


.like-tips img {
    width: 0.24rem;
    height: 0.24rem;
}

.gril-l img {
    width: auto;
    height: .6rem;
}

.gril-bottom {
    position: absolute;
    bottom: -.3rem;
    padding: 0 .16rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.gril-name {
    flex: 1;
    font-size: .24rem;
    font-weight: 600;
    color: var(--date-title-color, #FFFFFF);
}

.color1 {
    color: #F22880;
    font-size: .26rem;
    font-weight: 600;
    display: block;
}

.gril-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    color: var(--date-secondary-color, #D7D7D7);
    font-size: .2rem;
}


.gril-add .icon-map {
    display: inline-block;
    width: .2rem;
    height: .2rem;
    background-color: var(--date-secondary-color, #D7D7D7);
    -webkit-mask-image: url('../../img/abcd/map-icon.svg');
    mask-image: url('../../img/abcd/map-icon.svg');

    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center;
}

.grid-col-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .1rem;
}


.ad1-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffe8e7;
    border-radius: .2rem;
    padding: .16rem;
    overflow: hidden;
    border: 2px solid #C0AAE9;
}

.ad1-item-img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .2rem;
}

.ad1-item .text {
    font-size: .28rem;
    font-weight: 600;
    text-align: center;
    color: #F42528;
    margin: 8px 0 2px 0;
}

.ad1-item .sub-text {
    color: #5E15CF;

}

.ab-icon {
    position: absolute;
    top: 0;
    left: 0;
}

.next-element {
    margin-top: 0;
}


.s-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem;
    padding-top: .24rem;
    padding-bottom: .2rem;
}

.s-wrap .lf-g {
    border-radius: 0.18rem;
    background-color: var(--card-bg);
    border: var(--card-border, none);
    display: flex;
    align-items: center;
    position: relative;
}

.lf-g .lf-g-img {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .2rem;
    margin-right: 0.16rem;
}

.s-wrap .ad-name {
    font-weight: 700;
    font-size: .32rem;
    margin-bottom: .08rem;
    color: #FFFFFF;
}

.lf-g-load {
    font-size: .2rem;
    color: #919392;
}

.go-icon {
    position: absolute;
    top: .24rem;
    right: 0;
}

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


.gril-item {
    display: block;
    width: 100%;
    border-radius: 10px;
    background-color: var(--date-bg);
    border: var(--date-border, none);
}

.gril-img-wrap {
    position: relative;
}

.gril-img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 4.72rem;
}

.gf-tips {
    width: 1.74rem;
    height: .6rem;
    background-color: #0000004D;
    border-radius: .64rem;
    padding: .08rem;
    display: flex;
    align-items: center;
    color: #FFFFFFCC;
    font-weight: 700;
}

.gf-tips img {
    width: .44rem;
    height: auto;
}

.like-tips img {
    width: .44rem;
    height: auto;
}

.gril-r {
    background: var(--btn-bg);
    border-radius: 0.28rem;
    height: 0.6rem;
    width: 2.46rem;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100%;
}

.gril-r img {
    width: auto;
    height: .28rem;
}

.gril-top {
    position: absolute;
    top: 0;
    padding: 0.08rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.like-tips {
    width: 1.16rem;
    height: .6rem;
    background-color: #0000004D;
    border-radius: .64rem;
    padding: .08rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFFCC;
}

.gril-text-wrap {
    margin-top: .3rem;
    padding: .16rem;
    overflow: hidden;
}

.gril-text {
    display: flex;
    margin-bottom: .12rem;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.gril-text:last-child {
    margin-bottom: 0;
}

.accent1 {
    background: var(--accent1-bg, none);
    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: var(--accent1-fill, #FFFFFF);
    color: var(--accent1-fill, #FFFFFF);
}

.accent2 {
    background: var(--accent2-bg, none);
    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: var(--accent2-fill, #FFFFFF);
    color: var(--accent2-fill, #FFFFFF);
}

.icon-like {
    width: .44rem;
    height: .44rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--icon-like, url('../../img/abcd/like-icon.js'));
}


/* --- 1. 全屏容器与遮罩 --- */
.detail-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    height: 100%;
    z-index: 10000;

    display: none;
    flex-direction: column;

}

.overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0);
    /* 高级感核心：毛玻璃 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- 2. 主体内容区 --- */
.overlay-content {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

}

/* --- 3. 顶部操作栏 --- */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 10;

    height: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.3rem;

    background: rgba(11, 12, 18, 0.9);
    backdrop-filter: blur(10px);
}

.top-bar .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    font-size: 0.3rem;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
}

.modal-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10;
    padding: 0.3rem;
}

.icon-back, .icon-share {
    width: 0.44rem;
    height: 0.44rem;
    background-color: #fff;
    cursor: pointer;
}

/* 返回图标：使用遮罩方案，方便变色 */
.icon-back {
    -webkit-mask: url('../../img/abcd/back-icon.svg') no-repeat center / contain;
}

/* 滚动区域 */
.modal-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem 0.3rem;
    padding-bottom: 1.5rem;
}

/* 头部信息 */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.app-main-info {
    display: flex;
    align-items: center;
}

.app-icon-wrap {
    width: 1.1rem;
    height: 1.1rem;
    background: #2a2d3a;
    border-radius: 0.24rem;
    overflow: hidden;
    margin-right: 0.2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.app-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.js-detail-name {
    font-size: 0.32rem;
    font-weight: 600;
    color: #fff;
}

.info-card {
    background: var(--detail-content-bg);
    border-radius: 0.24rem;
    padding: 0.35rem;
    margin-bottom: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.32rem;
}

.info-item.align-start {
    align-items: flex-start;
}

.info-item:last-child {
    margin-bottom: 0;
}

.item-label-wrap {
    display: flex;
    align-items: center;
    width: 1.3rem;
    flex-shrink: 0;
}

/* 当父级为 align-start 时，调整标签对齐微调 */
.align-start .item-label-wrap {
    padding-top: 0.05rem; /* 确保图标/标签与首行文字视觉齐平 */
}

.icon-mask {
    width: 0.32rem;
    height: 0.32rem;
    margin-right: 0.1rem;
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.label {
    color: #FFFFFF;
    font-size: 0.28rem;
    white-space: nowrap;
}

/* 右侧内容块 */
.item-value-content {
    flex: 1;
    color: #fff;
    font-size: 0.28rem;
    line-height: 1.5;
    word-break: break-all;
}

.desc-text {
    color: #FFFFFF;
    font-size: 0.27rem;
}

.icon-loc {
    background-image: var(--icon-loc);
}

.icon-project {
    background-image: var(--icon-project);
}

.icon-qual {
    background-image: var(--icon-qual);
}

/* 画廊展示 */
.gallery-section {
    margin: 0.4rem 0;
}

.gallery-list {
    display: flex;
    overflow-x: auto;
    gap: 0.2rem;
    scrollbar-width: none;
}

.gallery-list::-webkit-scrollbar {
    display: none;
}

.gallery-item {
    width: 2.8rem;
    height: 4rem;
    border-radius: 0.18rem;
    object-fit: cover;
    flex-shrink: 0;
    background: #222;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 按钮样式 */
.accent-btn {
    background: var(--btn-bg);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(238, 9, 121, 0.3);
    border: none;
    cursor: pointer;
}

.header-action {
    width: 1.8rem;
    height: 0.68rem;
    font-size: 0.26rem;
    border-radius: 0.5rem;
}

/* --- 8. 底部固定栏 --- */
.footer-bar {
    position: relative;
    flex-shrink: 0;
    z-index: 10;
    bottom: 0;
    padding: 0.3rem;
    /* 底部增加黑色渐变，防止文字穿透遮挡 */
    background: linear-gradient(to top, #0b0c12 80%, transparent);
}

.footer-action-btn {
    width: 100%;
    height: 0.9rem;
    font-weight: 400;
    font-size: 0.32rem;
    border-radius: 0.9rem;
}


.go-top {
    position: fixed;
    right: 8px;
    bottom: 30px;
    z-index: 20;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--go-top-bg);
    color: var(--go-top-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.go-top.hidden {
    display: none;
}