/**粉色主题**/
:root {
    --bg-color: #1F010E;
    --heart-color: rgb(255, 107, 157, 0.8);
    --btn-color: rgb(255, 107, 157);
    --bg2-color: rgb(255, 107, 157, 0.1);
    --bd-color: rgb(255, 107, 157, 0.3);
}

/**紫色主题**/
[data-theme="purple"] {
    --bg-color: #0e041e;
    --heart-color: rgb(168, 85, 247, 0.8);
    --btn-color: rgb(168, 85, 247);
    --bg2-color: rgb(168, 85, 247, 0.1);
    --bd-color: rgb(168, 85, 247, 0.3);
}

/**金色主题**/
[data-theme="gold"] {
    --bg-color: #383833;
    --heart-color: rgb(245, 208, 169, 0.8);
    --btn-color: rgb(245, 208, 169);
    --bg2-color: rgb(245, 208, 169, 0.1);
    --bd-color: rgb(245, 208, 169, 0.3);
}


.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    z-index: 994;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

/* 滚动后的样式 */
.header.scrolled {
    /* background-color: #000000; */
    background: rgba(21, 14, 26, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bd-color);
}

.header-list {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 36px;
    height: 36px;
    font-size: 18px;
    font-weight: bold;
    background-color: var(--btn-color);
    color: #000;
    text-decoration: none;
    text-align: center;
    line-height: 38px;
    border-radius: 10px;
    margin-left: 24px;

    /* 添加摆动动画 */
    animation: logoSwing 6s ease-in-out infinite;
    transform-origin: center;
    /* 设置摆动中心点 */
}

.yuan2 {
    animation: logoSwing 3s ease-in-out infinite;
    transform-origin: center;
}

/* 摆动动画 */
@keyframes logoSwing {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
        /* 向右旋转10° */
    }

    75% {
        transform: rotate(-5deg);
        /* 向左旋转10° */
    }

    100% {
        transform: rotate(0deg);
        /* 回到原位 */
    }
}

.menu {
    width: 36px;
    height: 36px;
    font-size: 26px;
    font-weight: bold;
    color: var(--btn-color);
    text-decoration: none;
    text-align: center;
    line-height: 36px;
    margin-right: 24px;
}

.content {
    width: 100%;
    padding: 64px 0px 12px 0px;
    box-sizing: border-box;
}

.card {
    width: 100%;
}

.card h1 {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}

.card p {
    font-size: 14px;
    font-weight: bold;
    color: #737373;
}

.btn-redo {
    width: 38px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border: 1px solid var(--bd-color);
    border-radius: 10px;
    color: var(--btn-color);
    background-color: var(--bg2-color);
    cursor: pointer;
    transition: transform 0.1s ease;
    /* 平滑过渡 */
}

.btn-redo:active {
    transform: scale(0.9);
    /* 点击时缩小到90% */
}

.w4 .active {
    color: var(--btn-color);
    border: 1px solid var(--btn-color);
    box-shadow: 0px 0px 10px var(--btn-color);
    text-shadow: 0px 0px 20px var(--btn-color);
}


.left-right10 {
    display: inline-block;
    /* 添加摆动动画 */
    animation: logoSwing 1s ease-in-out infinite;
    transform-origin: center;
    /* 设置摆动中心点 */
}

/* 卡片容器 - 需要相对定位 */
.card.w3.yg.bg {
    position: relative;
    overflow: hidden;
}

/* 长方形空心光效 - 放大消失动画 */
.card.w3.yg.bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%) scale(0);
    /* 初始缩放到0，不可见 */
    border: 1px solid var(--btn-color);
    border-radius: 8px;
    /* box-shadow: 0 0 20px var(--btn-color, rgba(255, 107, 157, 0.8)); */
    animation: zoomInOut 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* 放大消失动画 */
@keyframes zoomInOut {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    80% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
        border-color: var(--btn-color);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        border-color: var(--btn-color);
        box-shadow: 0 0 0px var(--btn-color);
    }
}

.money {
    background-color: rgba(156, 156, 156, 0.3);
    width: 56px;
    height: 60px;
    text-align: center;
    color: rgba(156, 156, 156, 0.8);
    font-size: 20px;
    margin-right: 20px;
    border-radius: 10px;
    line-height: 60px;
    position: relative;
    overflow: hidden;
    transform: rotate(10deg);
}

.money::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    /* 从左侧外部开始 */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    animation: money_shine 4s infinite;
    pointer-events: none;
    /* 让光效不阻挡点击 */
}

.card-item.active {
    position: relative;
    overflow: hidden;
}

.card-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    /* 从左侧外部开始 */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            var(--bg2-color),
            transparent);
    animation: money_shine 4s infinite;
    pointer-events: none;
    /* 让光效不阻挡点击 */
}

@keyframes money_shine {
    0% {
        left: -100%;
        /* 从左边外部开始 */
    }

    60% {
        left: 100%;
        /* 滑动到右边外部 */
    }

    100% {
        left: 100%;
        /* 保持在右边 */
    }
}


.btns {
    width: 102px;
    height: 54px;
    border: 1px solid var(--bd-color);
    border-radius: 30px;
    color: var(--btn-color);
    background-color: var(--bg2-color);
    margin-left: 5px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: var(--bd-color) 0px 0px 10px;
    animation: pulseScale 1.5s ease-in-out infinite;
    transform-origin: center;
    /* 从中心放大 */
}

.fdsx {
    animation: pulseScale 1.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes pulseScale {
    0% {
        transform: scale(1);
        /* 原始大小 */
    }

    50% {
        transform: scale(1.05);
        /* 放大5% */
    }

    100% {
        transform: scale(1);
        /* 恢复原始大小 */
    }
}

.btns p {
    height: 22px;
    line-height: 22px;
    margin: 0px;
    font-weight: bold !important;
    color: var(--btn-color) !important;
}

.last-child {
    animation: moveRight 1.5s ease-in-out infinite;
    /* 1.5秒循环一次 */
    display: inline-block;
    /* 确保transform生效 */
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
        /* 原始位置 */
    }

    50% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
        /* 回到原位 */
    }
}

.bg {
    border: 1px solid var(--bd-color);
    border-radius: 18px;
    color: var(--btn-color);
    background-color: var(--bg2-color);
}

.bg2 {
    border: 1px solid var(--bd-color);
    border-radius: 18px;
    color: var(--btn-color);
    background-color: rgba(240, 227, 227, 0.111);
}


.bg-1 {
    width: 100%;
    background-color: #000;
}


/* 光效滑动动画 */
.yg {
    position: relative;
    overflow: hidden;
    /* 隐藏溢出部分 */
}

.yg::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    /* 从左侧外部开始 */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            var(--bd-color),
            transparent);
    animation: shine 4s infinite;
    pointer-events: none;
    /* 让光效不阻挡点击 */
}

@keyframes shine {
    0% {
        left: -100%;
        /* 从左边外部开始 */
    }

    60% {
        left: 100%;
        /* 滑动到右边外部 */
    }

    100% {
        left: 100%;
        /* 保持在右边 */
    }
}



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

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

.w3 h1 {
    font-size: 18px;
    color: #BCBCBC;
    padding: 0px;
    margin-top: 12px;
}

.w3 p {
    font-weight: 300;
    color: #737373;
}

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

.card-item {
    cursor: pointer;
    color: #BCBCBC;
    font-weight: bolder;
    background-color: rgba(188, 188, 188, 0.1);
    border: 1px solid rgba(188, 188, 188, 0.15);
    width: 100%;
    height: 48px;
    text-align: center;
    line-height: 48px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 12px;
}


/* card-view 基础样式 */
.card-view {
    overflow: hidden;
    height: auto;
    min-height: 74px;

}

/* 展开内容的容器（初始隐藏） */
.card-view .expand-content {
    height: 0;
    opacity: 0;
    overflow: hidden;

}

/* 展开状态 */
.card-view.expanded .expand-content {
    min-height: 120px;
    opacity: 1;
    margin-top: 10px;
}

/* xxx 内容区域样式 */
.card-view .xxx {
    color: #BCBCBC;
    margin: 5px;
    box-sizing: border-box;
    font-weight: bold;
}

.card-view .xxx2 {
    padding: 5px 10px;
    background-color: var(--bg2-color);
    color: var(--btn-color);
    border-radius: 25px;
}

/* go 按钮样式 */
.card-view .go {
    cursor: pointer;
    transition: all 0.3s ease;
    width: 48px;
    height: 48px;
    color: #BCBCBC;
    font-weight: bolder;
    background-color: rgba(188, 188, 188, 0.1);
    border: 1px solid rgba(188, 188, 188, 0.15);
    ;
    text-align: center;
    line-height: 48px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 12px;
}

/* 展开状态下的 go 按钮 */
.card-view.expanded .go {
    transform: rotate(180deg);
    background-color: var(--bg2-color);
    /* 使用主题颜色作为背景 */
    color: var(--btn-color);
}

.card-view:not(.expanded) .go {
    transform: rotate(0deg);
    background-color: rgba(188, 188, 188, 0.1);
    /* 透明背景 */
    color: #BCBCBC;
}

/*****************************************************滑块***************************************************/

/* 滑块容器 */
.huakuai {
    /* margin-top: 15px; */
    /* padding: 0 10px; */
    width: 100%;
    box-sizing: border-box;
}

.age {
    font-size: 14px;
    font-weight: 300;
}

/* 双滑块样式 */
.range-slider {
    position: relative;
    width: 100%;
    height: 20px;
    margin: 20px 0;
}

/* 滑条轨道背景 */
.slider-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background-color: #BCBCBC;
    border-radius: 10px;
    z-index: 1;
}

/* 选中的范围条 */
.slider-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background-color: var(--btn-color);
    border-radius: 10px;
    z-index: 2;
    pointer-events: none;
}

/* 滑块基础样式 */
.range-slider input[type="range"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: none;
    -webkit-appearance: none;
    pointer-events: none;
    z-index: 3;
}

/* 滑块 - Webkit浏览器 */
.range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--btn-color);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    /* border: 2px solid white; */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
    margin-top: 0px;
}

.range-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* 滑块 - Firefox */
.range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: var(--btn-color);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    /* border: 2px solid white; */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
}

.range-slider input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
}

/* 隐藏默认的滑条轨道 */
.range-slider input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}

.range-slider input[type="range"]::-moz-range-track {
    background: transparent;
}

/* 左右滑块的位置调整 */
.range-min {
    z-index: 4;
}

.range-max {
    z-index: 5;
}

/* 年龄显示 */
.xxx2 {
    color: var(--btn-color);
    font-weight: bold;
}

.xxx2 b {
    color: var(--btn-color);
    font-size: 16px;
}

/* 网格布局 - 响应式 */
.wt2 {
    display: grid;
    gap: 16px;
    padding: 16px;

    /* 手机：每行2个 */
    grid-template-columns: repeat(2, 1fr);
}

/* 平板：每行3个 */
@media (min-width: 768px) {
    .wt2 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 桌面：每行4个 */
@media (min-width: 1024px) {
    .wt2 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.card-list-item {
    width: 100%;
    min-height: 200px;
    border-radius: 15px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(30, 30, 45, 0.9), rgba(15, 15, 25, 0.95));
    border: 1px solid var(--bd-color);
    color: #BCBCBC;
    display: flex;
    flex-direction: column;
}

/* 图片容器 */
.card-list-up {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 正方形比例，可以根据需要调整 */
    overflow: hidden;
}

/* 图片包装器 */
.img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 图片样式 */
.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 覆盖整个容器，保持比例 */
    object-position: center;
    /* 居中显示 */
    display: block;
}

/* 黑色遮罩层 - 让图片变暗，文字更清晰 */
.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            /* 顶部完全透明 */
            rgba(0, 0, 0, 0) 50%,
            /* 中部完全透明 */
            rgba(0, 0, 0, 0.6) 80%,
            /* 开始变暗 */
            rgba(0, 0, 0, 0.8) 100%
            /* 底部深色 */
        );
    pointer-events: none;
    /* 让点击穿透 */
}

/* 头部内容 */
.card-list-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

.card-list-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

.card-list-type {
    color: #4AC35A;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.3);
    height: 20px;
    line-height: 20px;
    padding: 0px 6px;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 10px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 3;
}

.card-list-type i {
    font-size: 8px;
    line-height: 1;
    display: inline-block;
}

/* 底部内容区域 */
.card-list-down {
    padding: 15px;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 2;
}

/* 签名文本 */
.sig-text {
    height: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 1.4;
}

/* 标签容器 */
.tags-container {
    height: 28px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 标签样式 */
.tag {
    padding: 0px 10px;
    font-size: 13px;
    border-radius: 20px;
    line-height: 27px;
}

/* 联系按钮 */
.chat-btn {
    width: 100%;
    height: 45px;
    /* 稍微减小一点 */
    background-color: var(--btn-color);
    color: #000;
    font-weight: bold;
    text-align: center;
    line-height: 45px;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 5px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.chat-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.chat-btn i {
    margin: 0 4px;
}

/* 如果背景图片加载失败，显示备用背景 */
.card-img[src=""],
.card-img:not([src]) {
    display: none;
}

.img-wrapper:has(img[src=""])+.img-overlay,
.img-wrapper:has(img:not([src]))+.img-overlay {
    background: linear-gradient(145deg, rgba(30, 30, 45, 0.9), rgba(15, 15, 25, 0.95));
}




/* 底部内容容器 */
.card-list-bottom>div {
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
    color: white;
}

/* 名字样式 */
.card-list-bottom .name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 年龄和星级容器 */
.card-list-bottom .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* 年龄样式 */
.card-list-bottom .age {
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    /* padding: 4px 10px; */
}

/* 星级容器 */
.card-list-bottom .stars {
    display: flex;
    gap: 2px;
    font-size: 12px;
}


.stars1 {
    color: var(--btn-color);
}

.stars2 {
    color: rgba(255, 255, 255, 0.5);
}

.py20 {
    font-size: 70px;
    text-align: center;
}

.py20-title {
    color: #BCBCBC;
    font-weight: bold;
}

.py20-title h1 {
    font-size: 20px;
}

.py20-title p {
    font-size: 14px;
}

/* 图标本身 */
.card-list-type .yuan {
    position: relative;
    font-size: 8px;
    color: #4AC35A;
    /* 在线绿色 */
    z-index: 3;
    display: inline-block;
}

/* 直接在容器上画圆圈，不依赖伪元素 */
.card-list-type::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #4AC35A;
    border-radius: 50%;
    transform: translateY(-50%) scale(0.5);
    opacity: 0;
    animation: ringPulse 1s ease-in-out infinite;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 2;
}

@keyframes ringPulse {
    0% {
        transform: translateY(-50%) scale(0.5);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) scale(1.2);
        opacity: 0;
    }
}

/* 如果要调试，可以临时加个背景色看看圆圈在哪 */
/* .card-list-type::before {
    background: rgba(255,0,0,0.1);
} */

@keyframes slideUpPop {
    0% {
        transform: translateY(10px);
        /* 从下方10px */
        opacity: 0;
    }

    70% {
        transform: translateY(-2px);
        /* 略微过冲 */
        opacity: 0.9;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.card-list-item-up {
    animation: slideUpPop 0.3s ease-out forwards;
}

/* 菜单列表容器 */
.menu-list {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-list-btn {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 80%;
    height: 46px;
    margin: auto;
    font-weight: bolder;
    background: linear-gradient(135deg, var(--btn-color), var(--bd-color));
    border-radius: 12px;
}

/* 菜单项基础样式 */
.menu-list-li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}


/* 图标样式 */
.menu-list-li i,
.menu-list-li .iconify {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.menu-list-li:hover i,
.menu-list-li:hover .iconify {
    color: var(--btn-color);
}

/* 选中状态 - 使用和nav-item类似的样式但不带动画 */
.menu-list-li.active {
    color: var(--btn-color);
    background: var(--bg2-color);
}

.menu-list-li.active i,
.menu-list-li.active .iconify {
    color: var(--btn-color);
}


#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 995;
    display: none;
    /* 默认隐藏 */
}

.menu-view {
    position: absolute;
    width: auto;
    /* 改为自动 */
    right: 84px;
    /* 距离右侧固定90px */
    left: 0;
    /* 左侧从0开始 */
    height: 100%;
    top: 0;
    z-index: 998;
    color: #FFF;
    background: linear-gradient(rgb(26, 26, 46) 0%, rgb(10, 10, 15) 100%);
    border-right: 1px solid var(--bd-color);

    transform: translateX(-100%);
    /* 初始隐藏在左侧 */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
}

.menu-bg {
    position: fixed;
    width: 100%;
    left: 0;
    /* 左侧从0开始 */
    height: 100%;
    top: 0;
    z-index: 996;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.menu-btn {
    position: absolute;
    top: 18px;
    right: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* .menu-btn:active {
        transform: rotate(90deg);
    } */

/* 菜单显示时的状态 */
#menu.show .menu-view {
    transform: translateX(0);
}

/* 菜单显示时 - 按钮放大动画 */
#menu.show .menu-btn {
    animation: btnZoomIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 菜单隐藏时 - 按钮缩小动画 */
#menu:not(.show) .menu-btn {
    animation: btnZoomOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 显示动画 - 从左侧正常，右侧放大 */
@keyframes btnReveal {
    0% {
        transform: scaleX(0) scaleY(0.8);
        transform-origin: left center;
        opacity: 0;
    }

    30% {
        transform: scaleX(1.1) scaleY(0.9);
        transform-origin: left center;
        opacity: 0.8;
    }

    60% {
        transform: scaleX(1.05) scaleY(1.05);
        transform-origin: left center;
        opacity: 0.9;
    }

    100% {
        transform: scaleX(1) scaleY(1);
        transform-origin: left center;
        opacity: 1;
    }
}

/* 消失动画 - 右侧缩小后一起消失 */
@keyframes btnConceal {
    0% {
        transform: scaleX(1) scaleY(1);
        transform-origin: right center;
        opacity: 1;
    }

    40% {
        transform: scaleX(0.9) scaleY(0.8);
        transform-origin: right center;
        opacity: 0.6;
    }

    80% {
        transform: scaleX(0.3) scaleY(0.3);
        transform-origin: right center;
        opacity: 0.2;
    }

    100% {
        transform: scaleX(0) scaleY(0);
        transform-origin: right center;
        opacity: 0;
    }
}

/* 应用到按钮 */
#menu.show .menu-btn {
    animation: btnReveal 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    opacity: 1;
    pointer-events: auto;
}

#menu:not(.show) .menu-btn {
    animation: btnConceal 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    pointer-events: none;
}

/* 菜单按钮基础样式 */
.menu-on-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
}

/* 菜单打开时 - 按钮缩小消失动画 */
#menu.show~.header .menu-on-btn,
.menu-on-btn.hide {
    animation: btnHide 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

/* 菜单关闭时 - 按钮放大显示动画 */
.menu-on-btn.show {
    animation: btnShow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    pointer-events: auto;
}

/* 显示动画 - 从中心放大 */
@keyframes btnShow {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    80% {
        transform: scale(0.95);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 隐藏动画 - 缩小消失 */
@keyframes btnHide {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background: rgba(21, 14, 26, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    border-top: none;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--bd-color) 15%,
            var(--bd-color) 85%,
            transparent 100%);
    pointer-events: none;
}

.footer-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 90%;
    margin: auto;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF66;
    text-decoration: none;
    position: relative;
    font-size: 12px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    cursor: pointer;
    /* 添加手型光标 */
    position: relative;
}

.nav-item i {
    font-size: 24px;
    margin-bottom: 4px;
}


/* 内外方体基础样式 */
.nav-item.active::before,
.nav-item.active::after {
    content: '';
    position: absolute;
    border-radius: 16px;
    pointer-events: none;
    z-index: -1;
    will-change: transform, opacity;
}

/* 外层浅色方块 - 先出现 */
.nav-item.active::before {
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: var(--bg2-color);
    border: 1px solid var(--bg2-color);
    animation: lightBoxIn 0.25s ease forwards;
}

/* 内层深色方块 - 后出现，带撞击效果 */
.nav-item.active::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg2-color);
    border: 1px solid var(--bg2-color);
    animation: darkBoxIn 0.4s cubic-bezier(0.25, 0.1, 0.2, 1.4) 0.1s forwards;
}

/* 浅色方块淡入动画 */
@keyframes lightBoxIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 深色方块撞击动画 - 默认（无方向） */
@keyframes darkBoxIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    30% {
        opacity: 1;
        transform: scale(1.15);
    }

    60% {
        transform: scale(0.98);
    }

    80% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}



/* 向右撞击 - 用于点击右侧图标 */
@keyframes darkBoxInRight {
    0% {
        opacity: 0;
        transform: translateX(-10px) scale(0.5);
    }

    30% {
        opacity: 1;
        transform: translateX(8px) scale(1.15);
    }

    60% {
        transform: translateX(-3px) scale(0.98);
    }

    80% {
        transform: translateX(2px) scale(1.02);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

/* 向左撞击 - 用于点击左侧图标 */
@keyframes darkBoxInLeft {
    0% {
        opacity: 0;
        transform: translateX(10px) scale(0.5);
    }

    30% {
        opacity: 1;
        transform: translateX(-8px) scale(1.15);
    }

    60% {
        transform: translateX(3px) scale(0.98);
    }

    80% {
        transform: translateX(-2px) scale(1.02);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

/* 图标底部摆动动画 */
@keyframes iconWiggle {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(8deg);
    }

    40% {
        transform: rotate(-6deg);
    }

    60% {
        transform: rotate(4deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* 选中状态文字颜色 */
.nav-item.active {
    color: var(--btn-color);
}

/* 应用图标摆动 */
.nav-item.active .iconify {
    animation: iconWiggle 0.5s ease-in-out;
}



/* Q弹动画 - 应用到整个nav-item，增强效果 */
.nav-item.active {
    animation: qtPop 0.4s cubic-bezier(0.25, 0.1, 0.15, 1.4);
}

@keyframes qtPop {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

.footer-nav a {
    color: #FFFFFF66;
    text-decoration: none;
    font-weight: bolder;
}


/* 向右点击 - 深色方块从右往左撞 */
.nav-item.active.direction-right::after {
    animation: darkBoxInRight 0.45s cubic-bezier(0.25, 0.1, 0.2, 1.3) 0.1s forwards;
}

/* 向左点击 - 深色方块从左往右撞 */
.nav-item.active.direction-left::after {
    animation: darkBoxInLeft 0.45s cubic-bezier(0.25, 0.1, 0.2, 1.3) 0.1s forwards;
}

/* 图标摆动 - 方向不同摆动方向也有差异 */
.nav-item.active.direction-right .iconify {
    animation: iconWiggleRight 0.5s ease-in-out;
}

.nav-item.active.direction-left .iconify {
    animation: iconWiggleLeft 0.5s ease-in-out;
}

@keyframes iconWiggleRight {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(10deg) translateX(2px);
    }

    40% {
        transform: rotate(-5deg) translateX(-1px);
    }

    60% {
        transform: rotate(3deg) translateX(1px);
    }

    80% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes iconWiggleLeft {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-10deg) translateX(-2px);
    }

    40% {
        transform: rotate(5deg) translateX(1px);
    }

    60% {
        transform: rotate(-3deg) translateX(-1px);
    }

    80% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* 爱心飘动背景 */
.heart-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--bg-color);
}

/* 左侧光晕 */
.heart-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, var(--bg2-color), transparent);
    pointer-events: none;
    z-index: -1;
}

/* 右侧光晕 */
.heart-bg::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, var(--bg2-color), transparent);
    pointer-events: none;
    z-index: -1;
}

.heart {
    position: absolute;
    bottom: -20px;
    color: var(--heart-color);
    font-size: 20px;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }

    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

.heart i {
    font-size: inherit;
    color: inherit;
}

.lang-items {
    margin-top: 10px;
}

.lang-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 15px;
    margin: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.lang-item.active {
    background: var(--bg2-color);
    border-color: var(--btn-color);
    color: var(--btn-color);
}

.dui {
    border-radius: 50%;
    background-color: var(--btn-color);
    width: 16px;
    height: 16px;
    color: var(--bg-color);
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    opacity: 0;
    /* 默认隐藏 */
    transition: opacity 0.2s ease;
}

.lang-item.active .dui {
    opacity: 1;
    /* 选中时显示 */
}

.lang-item.active .lang-item-text {
    color: var(--btn-color);
    font-weight: bold;
}

.lang-item-text {
    color: #BCBCBC;
    font-size: 14px;
}

.color-item {
    width: 100%;
    height: 90px;
    background-color: rgba(211, 211, 211, 0.1);
    margin: 5px;
    border-radius: 12px;
}

.color-preview {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: auto;
    margin-top: 16px;
}

.color-item-text {
    color: #BCBCBC;
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
}

.color-items .active {
    border: 2px solid var(--btn-color);
}

.color-items .active .color-preview {
    box-shadow: 0 0 30px var(--btn-color);
    position: relative;
    animation: pulseScale 1.5s ease-in-out infinite;
    transform-origin: center;
}

.color-items .active .color-preview::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 完美居中 */
    border-radius: 50%;
    background-color: black;
    width: 16px;
    height: 16px;
    color: var(--btn-color);
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;

}

.lang_icon {
    width: 18px;
    height: 18px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    margin-right: 10px;
}

 .about-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px 100px;
        /* 底部留出footer空间 */
        color: #fff;
    }

    /* 主标题区域 */
    .hero-section {
        text-align: center;
        margin-bottom: 60px;
    }

    .main-title {
        font-size: 4rem;
        font-weight: 700;
        margin-bottom: 10px;
        background: linear-gradient(135deg, var(--btn-color), #ffb6c1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .sub-title {
        font-size: 1.8rem;
        opacity: 0.9;
        margin-bottom: 20px;
    }

    .destiny-meter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        font-size: 1.2rem;
    }

    .meter-label {
        opacity: 0.7;
    }

    .meter-value {
        font-size: 2rem;
        font-weight: bold;
        color: var(--btn-color);
    }

    /* 品牌理念区域 */
    .mission-section {
        text-align: center;
        margin-bottom: 50px;
        padding: 40px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mission-title {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }

    .mission-quote {
        font-size: 1.5rem;
        color: var(--btn-color);
        margin-bottom: 15px;
        font-style: italic;
    }

    .mission-text {
        font-size: 1.6rem;
        opacity: 0.8;
    }

    /* 关于我们简介 */
    .about-text {
        width: 100%;
        margin: auto;
        line-height: 1.8;
        background: linear-gradient(145deg, rgba(30, 30, 45, 0.8), rgba(20, 20, 35, 0.9));
        border-width: 1px;
        border-style: solid;
        border-color: var(--bd-color);
        opacity: 1;
        border-radius: 15px;
        padding: 20px;
        box-sizing: border-box;
    }


    /* 章节标题 */
    .section-title {
        text-align: center;
        font-size: 2.2rem;
        margin-bottom: 40px;
        position: relative;
        display: inline-block;
        left: 50%;
        transform: translateX(-50%);
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--btn-color), transparent);
    }

    /* 优势网格 */
    .advantages-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        /* 从30px改为16px，间距更小 */
        margin-bottom: 40px;
        /* 从60px改为40px，底部间距也缩小 */
    }

    .advantage-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 20px 16px;
        /* 从30px 20px改为20px 16px，内部间距缩小 */
        text-align: center;
        transition: all 0.3s ease;
    }

    .advantage-card h3 {
        font-size: 1.6rem;
        /* 从1.5rem稍微减小 */
        margin-bottom: 10px;
        /* 从15px改为10px */
        /* color: var(--btn-color); */
    }

    .advantage-card p {
        opacity: 0.8;
        line-height: 1.5;
        /* 从1.6稍微减小 */
        font-size: 1.3rem;
        /* 稍微减小字号 */
    }

    /* 数据统计 */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-bottom: 60px;
        padding: 40px 0;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        border: 1px solid var(--bd-color);
    }

    .stat-item {
        text-align: center;
    }

    .stat-number {
        display: block;
        font-size: 2.8rem;
        font-weight: bold;
        color: var(--btn-color);
        margin-bottom: 10px;
    }

    .stat-label {
        font-size: 1.1rem;
        opacity: 0.7;
    }

    /* 官方信息 */
    .official-info {
        text-align: center;
        margin-bottom: 40px;
        padding: 40px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .info-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }

    .website-link {
        font-size: 1.5rem;
        color: var(--btn-color);
        margin-bottom: 15px;
        word-break: break-all;
    }

    .warning-text {
        color: #ffa500;
        margin-bottom: 10px;
    }

    .danger-text {
        color: #ff6b6b;
        font-size: 0.9rem;
    }

    /* 成立信息 */
    .founding-info {
        text-align: center;
        margin-bottom: 60px;
        padding: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .founding-year {
        display: block;
        font-size: 1.3rem;
        margin-bottom: 10px;
        opacity: 0.9;
    }

    .tagline {
        font-size: 1.1rem;
        color: var(--btn-color);
    }

    /* 行动呼唤 */
    .cta-section {
        text-align: center;
        padding: 60px 0;
        background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), rgba(255, 182, 193, 0.1));
        border-radius: 40px;
    }

    .cta-text {
        font-size: 2.5rem;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .cta-subtext {
        font-size: 1.2rem;
        opacity: 0.8;
    }