:root {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: light dark;
    color: #ffffffde;
    background-color: #242424;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit
}

a:hover {
    color: #535bf2
}

body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    min-height: 100vh;
    background-color: #f5f5f5;
    overflow-x: hidden
}

h1 {
    font-size: 3.2em;
    line-height: 1.1
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: .6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color .25s
}

button:hover {
    border-color: #646cff
}

button:focus,
button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color
}

.card {
    padding: 2em
}

#app {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

@media (prefers-color-scheme: light) {
    :root {
        color: #213547;
        background-color: #fff
    }

    a:hover {
        color: #747bff
    }

    button {
        background-color: #f9f9f9
    }
}

.loading-page[data-v-de7099e0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.background-image[data-v-de7099e0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/images/@3x%E7%BB%84%207858.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.loading-content[data-v-de7099e0] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box
}

.corner-ribbon[data-v-de7099e0] {
    position: absolute;
    top: 24px;
    left: 4px;
    width: 150px;
    height: 40px
}

.center-image[data-v-de7099e0] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 380px
}

.center-image img[data-v-de7099e0] {
    width: 200px;
    height: 200px
}

.brand-text[data-v-de7099e0] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
    font-size: 24px;
    font-weight: 700;
    color: #f5498e;
    letter-spacing: 3px;
    text-transform: uppercase
}

.loading-section[data-v-de7099e0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 1060px
}

.loading-text[data-v-de7099e0] {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px
}

.channel-banner[data-v-de7099e0] {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid white;
    background: linear-gradient(90deg, #ff4f9e, #ff7eb8);
    box-shadow: 0 4px 12px #ff4f9e4d;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 14px
}

.channel-icon-wrapper[data-v-de7099e0] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.channel-icon[data-v-de7099e0] {
    width: 18px;
    height: 18px;
    object-fit: contain
}

.channel-label[data-v-de7099e0] {
    font-weight: 500;
    letter-spacing: 1px
}

.channel-url[data-v-de7099e0] {
    background: #fff;
    color: #ff4f9e;
    padding: 4px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    box-shadow: inset 0 0 0 1px #ff4f9e26
}

.loading-spinner[data-v-de7099e0] {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, .1);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin-de7099e0 .8s linear infinite
}

@keyframes spin-de7099e0 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@media (max-width: 480px) {
    .brand-text[data-v-de7099e0] {
        font-size: 20px;
        letter-spacing: 1px
    }

    .loading-text[data-v-de7099e0] {
        font-size: 14px
    }

    .loading-section[data-v-de7099e0] {
        margin-top: 15px
    }

    .loading-spinner[data-v-de7099e0] {
        width: 18px;
        height: 18px;
        border-width: 2px
    }

    .channel-icon-wrapper[data-v-de7099e0] {
        width: 26px;
        height: 26px
    }

    .channel-icon[data-v-de7099e0] {
        width: 16px;
        height: 16px
    }

    .channel-url[data-v-de7099e0] {
        padding: 3px 10px;
        font-size: 12px;
        letter-spacing: .5px
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #f5f5f5;
    width: 100%;
    overflow-x: hidden
}

#app {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh
}

* {
    box-sizing: border-box
}

html,
body {
    overflow-x: hidden
}

.tg-webapp {
    width: 100vw;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

.error-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 20px;
    box-sizing: border-box
}

.error-content {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    max-width: 300px;
    width: 100%;
    box-shadow: 0 20px 40px #0000001a
}

.error-icon {
    font-size: 60px;
    margin-bottom: 20px
}

.error-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px
}

.error-message {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5
}

.error-tip {
    font-size: 14px;
    color: #999;
    line-height: 1.4
}

.home-container[data-v-675bbb79] {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    opacity: 1;
    background: radial-gradient(ellipse at top left, #faadcc 0%, transparent 50%), radial-gradient(ellipse at top right, #c6b2f9 0%, transparent 50%), linear-gradient(180deg, transparent 0%, #FFFFFF 40%, #FFFFFF 100%), #fff;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
}

.home-container[data-v-675bbb79]::-webkit-scrollbar {
    display: none
}

.home-container[data-v-675bbb79] {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.pledge-area[data-v-675bbb79] {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    background: linear-gradient(180deg, #ffeff7, #eef1ff);
    border-bottom: 1px dashed #ffccd7
}

.pledge-icon[data-v-675bbb79] {
    margin-right: 2px;
    display: flex;
    align-items: center;
    justify-content: center
}

.pledge-icon img[data-v-675bbb79] {
    width: 18px;
    height: 18px;
    object-fit: contain
}

.pledge-text-container[data-v-675bbb79] {
    flex: 1;
    overflow: hidden;
    position: relative
}

.pledge-text[data-v-675bbb79] {
    font-size: 14px;
    color: #ff4081;
    white-space: nowrap
}

.scrolling-text[data-v-675bbb79] {
    animation: scroll-left-675bbb79 25s linear infinite
}

@keyframes scroll-left-675bbb79 {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(-400%)
    }
}

.banner-container[data-v-675bbb79] {
    position: relative;
    padding: 8px;
    overflow: hidden;
    border-radius: 10px
}

.banner-wrapper[data-v-675bbb79] {
    position: relative;
    width: 100%;
    height: 130px;
    opacity: 1;
    margin: 0;
    box-sizing: border-box
}

.banner-slide[data-v-675bbb79] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    transition: opacity .5s ease-in-out
}

.banner-indicators[data-v-675bbb79] {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    gap: 8px;
    z-index: 10
}

.banner-indicators .indicator[data-v-675bbb79] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff80;
    cursor: pointer;
    transition: all .3s ease
}

.banner-indicators .indicator.active[data-v-675bbb79] {
    width: 20px;
    border-radius: 4px;
    background-color: #ffffffe6
}

.loading-spinner[data-v-675bbb79],
.error-message[data-v-675bbb79] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #ffeef2;
    color: #ff4081;
    font-size: 16px
}

.error-message[data-v-675bbb79] {
    color: #f44336
}

.feature-cards-container[data-v-675bbb79] {
    padding: 15px;
    display: flex;
    gap: 12px
}

.feature-card[data-v-675bbb79] {
    flex: 1;
    height: 80px;
    border-radius: 20px;
    cursor: pointer;
    transition: transform .2s ease;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.feature-card[data-v-675bbb79]:hover {
    transform: scale(1.02)
}

.search-match-card[data-v-675bbb79] {
    background-image: url(/images/%E7%BB%84%207737@3x.png)
}

.heart-signal-card[data-v-675bbb79] {
    background-image: url(/images/%E7%BB%84%207738@3x.png)
}

.card-content[data-v-675bbb79] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 15px;
    position: relative;
    z-index: 2
}

.card-text[data-v-675bbb79] {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3)
}

.card-title[data-v-675bbb79] {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px
}

.card-subtitle[data-v-675bbb79] {
    font-size: 12px;
    opacity: .9
}

.rank-container[data-v-675bbb79] {
    padding: 0 15px;
    background: linear-gradient(180deg, #ffeff7, #eef1ff);
    height: 93px;
    overflow: hidden;
    position: relative
}

.loading-text[data-v-675bbb79],
.error-text[data-v-675bbb79] {
    text-align: center;
    color: #ff4081;
    font-size: 14px;
    padding: 10px 0
}

.error-text[data-v-675bbb79] {
    color: #f44336
}

.rank-wrapper[data-v-675bbb79] {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0px
}

.rank-item[data-v-675bbb79] {
    transition: transform 1s ease-in-out
}

.rank-content[data-v-675bbb79] {
    display: flex;
    align-items: flex-start;
    padding: 4px 0;
    color: #333;
    font-size: 12px;
    min-height: 32px
}

.rank-icon[data-v-675bbb79] {
    margin-right: 10px
}

.rank-icon-img[data-v-675bbb79] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    object-fit: contain;
    vertical-align: middle
}

.rank-text[data-v-675bbb79] {
    flex: 1;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-all
}

.fade-enter-active[data-v-675bbb79],
.fade-leave-active[data-v-675bbb79] {
    transition: opacity 1s ease
}

.fade-enter-from[data-v-675bbb79],
.fade-leave-to[data-v-675bbb79] {
    opacity: 0
}

.search-input-container[data-v-675bbb79] {
    background: #fff5f8;
    border: 1px solid #FFE0E8;
    border-radius: 12px;
    margin-top: 5px;
    padding: 0 16px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px
}

.search-input-header[data-v-675bbb79] {
    display: flex;
    align-items: center
}

.search-icon-wrapper[data-v-675bbb79] {
    display: flex;
    align-items: center;
    gap: 8px
}

.search-icon-img[data-v-675bbb79] {
    width: 20px;
    height: 20px
}

.search-title[data-v-675bbb79] {
    font-size: 14px;
    font-weight: 600;
    color: #ff69b4
}

.search-input[data-v-675bbb79] {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #333
}

.search-input[data-v-675bbb79]::placeholder {
    color: #ff69b4;
    opacity: .6
}

.hot-searches[data-v-675bbb79] {
    margin-top: 10px
}

.hot-searches-label[data-v-675bbb79] {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    font-weight: 500
}

.hot-search-chips[data-v-675bbb79] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px
}

.hot-search-chip[data-v-675bbb79] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: #f5f5f5;
    border: 1px solid #E0E0E0;
    border-radius: 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all .2s
}

.hot-search-chip.with-icon[data-v-675bbb79] {
    background: #fff5f8;
    border: 1px solid #FFE0E8
}

.hot-search-chip.selected[data-v-675bbb79] {
    background: #ff69b4;
    border-color: #ff69b4;
    color: #fff
}

.hot-search-chip.selected .flame-icon[data-v-675bbb79] {
    filter: brightness(0) invert(1)
}

.hot-search-chip[data-v-675bbb79]:hover {
    background: #ffe8f0;
    border-color: #ff69b4
}

.hot-search-chip.selected[data-v-675bbb79]:hover {
    background: #ff69b4;
    opacity: .9
}

.flame-icon[data-v-675bbb79] {
    width: 14px;
    height: 14px
}

.tabs[data-v-675bbb79] {
    display: flex;
    padding: 0 15px;
    margin: 5px 0;
    position: relative
}

.tab[data-v-675bbb79] {
    padding: 8px 15px;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    font-weight: 700;
    color: #333
}

.tab[data-v-675bbb79]:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: 2px;
    background-color: transparent
}

.tab.active[data-v-675bbb79] {
    color: #ff4081
}

.tab.active[data-v-675bbb79]:after {
    background-color: #ff4081
}

.filter-button[data-v-675bbb79] {
    position: absolute;
    margin-left: auto;
    right: 10px;
    top: 10px;
    width: 58px;
    height: 24px;
    border-radius: 12px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(to bottom right, #ff428e, #ff428e 0%, #ce86fe 88%, #fe8ceb 95%, #fe8ceb) bottom right no-repeat, linear-gradient(to bottom left, #ff428e, #ff428e 0%, #ce86fe 88%, #fe8ceb 95%, #fe8ceb) bottom left no-repeat, linear-gradient(to top left, #ff428e, #ff428e 0%, #ce86fe 88%, #fe8ceb 95%, #fe8ceb) top left no-repeat, linear-gradient(to top right, #ff428e, #ff428e 0%, #ce86fe 88%, #fe8ceb 95%, #fe8ceb) top right no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: none;
    border: none;
    padding: 0;
    z-index: 10;
    cursor: pointer
}

.list-container[data-v-675bbb79] {
    padding: 0 15px;
    margin-bottom: 70px;
    margin-top: 5px
}

.loading-block[data-v-675bbb79],
.error-block[data-v-675bbb79] {
    text-align: center;
    padding: 20px;
    color: #ff4081;
    font-size: 16px
}

.error-block[data-v-675bbb79] {
    color: #f44336
}

.woman-grid[data-v-675bbb79] {
    padding: 10px
}

.woman-grid-vertical[data-v-675bbb79] {
    display: grid;
    grid-template-columns: repeat(2, 171px);
    gap: 15px;
    justify-content: center
}

.woman-grid-collect[data-v-675bbb79] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: transparent
}

.woman-card[data-v-675bbb79] {
    margin-bottom: 0;
    border-radius: 12px;
    overflow: visible;
    background-color: #fff;
    box-shadow: 0 2px 8px #0000001a;
    border: 1px solid rgba(245, 73, 142, .2)
}

.woman-grid-vertical .woman-card[data-v-675bbb79] {
    width: 171px
}

.woman-grid-collect .woman-card[data-v-675bbb79] {
    width: 100%;
    display: flex;
    flex-direction: row
}

.woman-card .image-container[data-v-675bbb79] {
    overflow: hidden
}

.woman-grid-vertical .image-container[data-v-675bbb79] {
    position: relative;
    width: 100%;
    height: 171px;
    background: linear-gradient(135deg, #fff1f6, #f8dce9)
}

.woman-grid-collect .image-container[data-v-675bbb79] {
    width: 120px;
    height: 135px;
    flex-shrink: 0;
    border-radius: 12px 0 0 12px;
    position: relative;
    background: linear-gradient(135deg, #fff1f6, #f8dce9)
}

.image-container[data-v-675bbb79] {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fff1f6, #f8dce9)
}

.woman-image[data-v-675bbb79] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity .3s ease
}

.image-loading[data-v-675bbb79] .woman-image[data-v-675bbb79] {
    opacity: 0
}

.image-loading[data-v-675bbb79]:before,
.image-loading[data-v-734aa684]:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .72) 45%, transparent 65%);
    background-size: 220% 100%;
    animation: image-shimmer 1.35s ease-in-out infinite;
    pointer-events: none
}

.image-error[data-v-675bbb79]:after,
.image-error[data-v-734aa684]:after {
    content: "图片暂时无法加载";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c58a9f;
    font-size: 12px;
    background: linear-gradient(135deg, #fff1f6, #f8dce9)
}

@keyframes image-shimmer {
    to {
        background-position: -220% 0
    }
}

.heart-icon[data-v-675bbb79] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.location-overlay[data-v-675bbb79] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000b3;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px
}

.location-left[data-v-675bbb79],
.location-right[data-v-675bbb79] {
    display: flex;
    align-items: center;
    gap: 4px
}

.location-left svg[data-v-675bbb79],
.location-right svg[data-v-675bbb79] {
    width: 14px;
    height: 14px
}

.info-section[data-v-675bbb79] {
    position: relative;
    padding: 6px 2px 2px;
    overflow: visible
}

.woman-grid-collect .info-section[data-v-675bbb79] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 8px
}

.woman-grid-collect .age-cup[data-v-675bbb79],
.woman-grid-collect .measurements[data-v-675bbb79] {
    width: auto;
    min-width: 0
}

.info-row[data-v-675bbb79] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0
}

.woman-grid-collect .info-row[data-v-675bbb79] {
    gap: -8px;
    justify-content: space-between;
    align-items: flex-start
}

.left-info-group[data-v-675bbb79] {
    display: flex;
    gap: -8px;
    align-items: center
}

.heart-icon-right[data-v-675bbb79] {
    position: absolute;
    right: 38px;
    top: 65px;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0
}

.heart-icon-right img[data-v-675bbb79] {
    width: 24px;
    height: 24px
}

.info-bar[data-v-675bbb79] {
    width: 87px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    font-size: 11px;
    padding: 0 4px
}

.age-cup[data-v-675bbb79] {
    background-color: #f5498e;
    color: #fff;
    border-radius: 10px 0 8px 10px;
    width: 135px;
    height: 20px;
    margin-left: 0;
    position: relative;
    z-index: 1
}

.measurements[data-v-675bbb79] {
    background-color: #f9b5d0;
    font-weight: 700;
    color: #f5498e;
    width: 150px;
    height: 20px;
    border-radius: 0 0 8px;
    opacity: 1;
    position: relative
}

.measurements[data-v-675bbb79]:before {
    content: "";
    position: absolute;
    left: -8px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #f9b5d0
}

.sep[data-v-675bbb79] {
    opacity: .6
}

.age-icon[data-v-675bbb79] {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 28px;
    height: 28px;
    z-index: 3;
    padding: 2px;
    box-sizing: border-box
}

.service-tags[data-v-675bbb79] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 8px 8px 0;
    box-sizing: border-box
}

.service-tag[data-v-675bbb79] {
    display: block;
    max-width: 100%;
    min-width: 0;
    color: #fff;
    background-color: #f9b5d0;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box
}

.collect-date-info[data-v-675bbb79] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666
}

.collect-date-info img[data-v-675bbb79] {
    width: 18px;
    height: 18px
}

.collect-location-wrapper[data-v-675bbb79] {
    display: flex;
    align-items: center;
    gap: 8px
}

.collect-location-info[data-v-675bbb79] {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(90deg, #f5498e, #f67732);
    border-radius: 6px;
    padding: 0 6px;
    font-size: 12px;
    width: fit-content
}

.location-icon-wrapper[data-v-675bbb79] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border-radius: 6px;
    margin-right: 6px
}

.location-icon-img[data-v-675bbb79] {
    width: 14px;
    height: 14px
}

.location-province[data-v-675bbb79] {
    color: #fff;
    font-weight: 500
}

.location-city[data-v-675bbb79] {
    color: #fff;
    font-weight: 500;
    background: #faaa85;
    border-radius: 6px;
    padding: 0 6px;
    margin-left: 4px
}

.bottom-nav[data-v-675bbb79] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 12px 0 8px;
    box-shadow: 0 -1px 5px #0000000d;
    max-width: 375px;
    margin: 0 auto;
    min-height: 60px;
    z-index: 10
}

.nav-item[data-v-675bbb79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer
}

.nav-item.active .nav-text[data-v-675bbb79] {
    color: #ff4081
}

.nav-icon[data-v-675bbb79] {
    font-size: 24px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px
}

.nav-icon svg[data-v-675bbb79] {
    width: 24px;
    height: 24px;
    color: #333
}

.nav-text[data-v-675bbb79] {
    font-size: 13px;
    color: #333;
    line-height: 1.2;
    text-align: center;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-top: 2px
}

.filter-modal[data-v-675bbb79] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
    padding: 5vh 0
}

.filter-overlay[data-v-675bbb79] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000080
}

.filter-content[data-v-675bbb79] {
    position: relative;
    width: 100%;
    max-width: 375px;
    max-height: 90vh;
    background-color: #fff;
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
    touch-action: pan-y;
    box-shadow: 0 8px 32px #0000004d
}

.filter-content[data-v-675bbb79]::-webkit-scrollbar {
    display: none
}

.filter-content[data-v-675bbb79] {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.filter-header[data-v-675bbb79] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #eee
}

.filter-title[data-v-675bbb79] {
    font-size: 16px;
    font-weight: 700
}

.filter-close[data-v-675bbb79] {
    color: #ff428e;
    font-size: 18px;
    min-width: 50px;
    height: 32px;
    cursor: pointer;
    transition: all .2s ease;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none;
    padding: 0 8px;
    font-weight: 700
}

.filter-close[data-v-675bbb79]:hover {
    transform: scale(1.05)
}

.filter-close[data-v-675bbb79]:active {
    transform: scale(.95)
}

.filter-section[data-v-675bbb79] {
    padding: 0 15px;
    border-bottom: 1px solid #f5f5f5
}

.filter-label[data-v-675bbb79] {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px
}

.filter-label-icon[data-v-675bbb79] {
    width: 13px;
    height: 13px;
    object-fit: contain
}

.filter-section:nth-child(2) .filter-label[data-v-675bbb79],
.filter-section:nth-child(3) .label-row .filter-label[data-v-675bbb79],
.filter-section:nth-child(4) .label-row .filter-label[data-v-675bbb79],
.filter-section:nth-child(5) .label-row .filter-label[data-v-675bbb79],
.filter-section:nth-child(6) .filter-label[data-v-675bbb79],
.filter-section:nth-child(7) .filter-label[data-v-675bbb79] {
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    color: #333
}

.filter-input input[data-v-675bbb79] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    color: #333
}

.common-cities[data-v-675bbb79] {
    margin-top: 0
}

.common-cities-label[data-v-675bbb79] {
    font-size: 15px;
    color: #333;
    margin-bottom: 5px;
    font-weight: 700;
    text-align: left
}

.city-filter-section[data-v-675bbb79] {
    padding-top: 8px;
    padding-bottom: 10px
}

.city-label-icon[data-v-675bbb79] {
    font-size: 14px
}

.city-search-box[data-v-675bbb79] {
    margin-top: 8px
}

.city-search-input[data-v-675bbb79] {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #ffe0e8;
    border-radius: 10px;
    outline: none;
    background: #fff8fa;
    color: #333;
    font-size: 13px;
    box-sizing: border-box
}

.city-search-input[data-v-675bbb79]:focus {
    border-color: #ff69b4;
    box-shadow: 0 0 0 2px #ff69b41a
}

.city-check-list[data-v-675bbb79] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px
}

.city-check-option[data-v-675bbb79] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 66px;
    padding: 6px 9px;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    background: #fff;
    color: #444;
    font-size: 13px;
    cursor: pointer;
    box-sizing: border-box
}

.city-check-option.selected[data-v-675bbb79] {
    border-color: #ff69b4;
    background: #fff1f6;
    color: #ff428e
}

.city-check-option input[data-v-675bbb79] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #ff428e
}

.city-empty[data-v-675bbb79] {
    width: 100%;
    padding: 4px 2px 0;
    color: #aaa;
    font-size: 12px
}

.city-chips[data-v-675bbb79] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.city-chip[data-v-675bbb79] {
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    font-size: 13px;
    cursor: pointer;
    color: #333
}

.city-chip.active[data-v-675bbb79] {
    background-color: #ff428e;
    border: 1px solid #FF428E;
    color: #fff
}

.label-row[data-v-675bbb79] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px
}

.range-input-row[data-v-675bbb79] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px
}

.range-input[data-v-675bbb79] {
    width: 80px;
    padding: 8px;
    border: 1px solid #E8E9EB;
    border-radius: 6px;
    font-size: 16px;
    background-color: #fff;
    color: #333;
    outline: none;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
    -moz-appearance: textfield
}

.range-input[data-v-675bbb79]::-webkit-outer-spin-button,
.range-input[data-v-675bbb79]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.range-input[data-v-675bbb79]:focus {
    border-color: #ff428e;
    box-shadow: 0 0 0 2px #ff428e1a
}

.range-input[data-v-675bbb79]::placeholder {
    color: #999;
    font-size: 12px
}

.range-separator[data-v-675bbb79] {
    font-size: 16px;
    color: #666;
    font-weight: 700;
    flex-shrink: 0
}

.range-unit[data-v-675bbb79] {
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
    min-width: 20px
}

.simple-range-row[data-v-675bbb79] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px
}

.simple-range-input[data-v-675bbb79] {
    width: 60px;
    border: 1px solid #E8E9EB;
    border-radius: 4px;
    font-size: 15px;
    background-color: #fff;
    color: #333;
    outline: none;
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
    -moz-appearance: textfield
}

.simple-range-input[data-v-675bbb79]::-webkit-outer-spin-button,
.simple-range-input[data-v-675bbb79]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.simple-range-input[data-v-675bbb79]:focus {
    border-color: #ff428e;
    box-shadow: 0 0 0 2px #ff428e1a
}

.simple-range-separator[data-v-675bbb79] {
    font-size: 15px;
    color: #666;
    font-weight: 400;
    flex-shrink: 0
}

.simple-range-unit[data-v-675bbb79] {
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
    min-width: 24px
}

.range-slider-container[data-v-675bbb79] {
    padding: 0 10px;
    margin-top: 12px
}

.range-slider-wrapper[data-v-675bbb79] {
    width: 100%
}

.range-slider-inline[data-v-675bbb79] {
    display: flex;
    align-items: center;
    gap: 12px
}

.range-value-left[data-v-675bbb79],
.range-value-right[data-v-675bbb79] {
    font-size: 14px;
    color: #ff428e;
    font-weight: 500;
    flex-shrink: 0;
    width: 45px;
    text-align: center
}

.range-slider-container-inline[data-v-675bbb79] {
    flex: 1;
    padding: 0 5px
}

.range-slider-track[data-v-675bbb79] {
    position: relative;
    height: 3px;
    background-color: #f5f5f5;
    border-radius: 12px;
    margin: 20px 12px;
    box-shadow: inset 0 1px 2px #0000001a
}

.range-slider-selected[data-v-675bbb79] {
    position: absolute;
    height: 100%;
    background: linear-gradient(to right, #ff428e, #fe8ceb);
    border-radius: 12px;
    top: 0;
    z-index: 1
}

.range-slider-input[data-v-675bbb79] {
    position: absolute;
    top: -11px;
    left: -10px;
    width: calc(100% + 20px);
    height: 24px;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    pointer-events: none
}

.range-slider-input[data-v-675bbb79]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: url(/images/%E7%9F%A9%E5%BD%A2%204948@1x.png) center/contain no-repeat;
    border-radius: 0;
    cursor: pointer;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    transition: all .2s ease
}

.range-slider-input[data-v-675bbb79]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: none
}

.range-slider-input[data-v-675bbb79]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: url(/images/%E7%9F%A9%E5%BD%A2%204948@1x.png) center/contain no-repeat;
    border-radius: 0;
    cursor: pointer;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    transition: all .2s ease
}

.range-slider-input[data-v-675bbb79]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: none
}

.range-slider-input.range-slider-min[data-v-675bbb79] {
    z-index: 3
}

.range-slider-input.range-slider-max[data-v-675bbb79] {
    z-index: 2
}

.range-slider-values[data-v-675bbb79] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 14px;
    color: #666
}

.range-slider-values span[data-v-675bbb79]:first-child,
.range-slider-values span[data-v-675bbb79]:nth-child(3) {
    color: #ff428e;
    font-weight: 500
}

.cup-options[data-v-675bbb79] {
    display: flex;
    justify-content: space-around;
    margin-top: 12px
}

.cup-option[data-v-675bbb79] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    color: #333
}

.cup-option.active[data-v-675bbb79] {
    background-color: #ff428e;
    border: 1px solid #FF428E;
    color: #fff
}

.other-options[data-v-675bbb79] {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.option-row[data-v-675bbb79] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px
}

.option-item[data-v-675bbb79] {
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    color: #333
}

.option-item.active[data-v-675bbb79] {
    background-color: #ff428e;
    border: 1px solid #FF428E;
    color: #fff
}

.filter-actions[data-v-675bbb79] {
    display: flex;
    padding: 8px 15px;
    margin-top: 8px;
    gap: 12px
}

.action-button[data-v-675bbb79] {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer
}

.reset[data-v-675bbb79] {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #333
}

.confirm[data-v-675bbb79] {
    background: linear-gradient(to right, #ff428e, #fe8ceb);
    color: #fff
}

.slider-dot[data-v-675bbb79] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f1f2f5;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

.slider-dot-middle[data-v-675bbb79] {
    left: 50%;
    margin-left: -3px
}

.load-more-container[data-v-675bbb79] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px
}

.load-more-loading[data-v-675bbb79],
.load-more-end[data-v-675bbb79] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff
}

.load-more-loading[data-v-675bbb79] {
    background-color: #ff428e
}

.load-more-end[data-v-675bbb79] {
    background-color: #999
}

.loading-spinner[data-v-675bbb79] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-675bbb79 1s linear infinite;
    margin-right: 8px
}

@keyframes spin-675bbb79 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.nav-icon[data-v-675bbb79] {
    position: relative
}

.checkin-badge[data-v-675bbb79] {
    position: absolute;
    top: -5px;
    right: -9px;
    width: 20px;
    height: 11px;
    background: linear-gradient(180deg, #7265ff, #189dff);
    color: #fff;
    font-size: 8px;
    font-weight: 500;
    border: 1.5px solid white;
    border-radius: 8px;
    line-height: 11px;
    z-index: 10;
    text-align: center;
    box-shadow: 0 1px 3px #0003;
    display: flex;
    align-items: center;
    justify-content: center
}

.loading-container[data-v-675bbb79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #666;
    background: transparent
}

.loading-text[data-v-675bbb79] {
    margin-top: 10px;
    font-size: 14px
}

.error-container[data-v-675bbb79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    background: transparent
}

.error-text[data-v-675bbb79] {
    font-size: 14px;
    margin-bottom: 10px
}

.retry-button[data-v-675bbb79] {
    background: linear-gradient(to right, #ff428e, #fe8ceb);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 450px
}

.retry-button[data-v-675bbb79]:hover {
    opacity: .8
}

.empty-container[data-v-675bbb79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #999;
    background: transparent
}

.empty-text[data-v-675bbb79] {
    font-size: 16px;
    margin-bottom: 8px
}

.empty-tip[data-v-675bbb79] {
    font-size: 14px;
    color: #ccc
}

.welcome-modal-overlay[data-v-675bbb79] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000b3;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    animation: fadeIn-675bbb79 .3s ease-out
}

.welcome-modal-content[data-v-675bbb79] {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: slideIn-675bbb79 .4s ease-out
}

.welcome-modal-card[data-v-675bbb79] {
    position: relative;
    width: 324px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px #0000004d;
    margin-bottom: 20px
}

.welcome-modal-image[data-v-675bbb79] {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover
}

.welcome-modal-text[data-v-675bbb79] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    width: 258px;
    height: 157px;
    background: linear-gradient(180deg, #fdf7d0, #fff);
    border-radius: 14px;
    opacity: 1;
    padding: 16px;
    text-align: center;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 8px #0000001a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    word-wrap: break-word
}

.welcome-modal-text p[data-v-675bbb79] {
    margin: 0 0 8px
}

.welcome-modal-text h1[data-v-675bbb79],
.welcome-modal-text h2[data-v-675bbb79],
.welcome-modal-text h3[data-v-675bbb79],
.welcome-modal-text h4[data-v-675bbb79],
.welcome-modal-text h5[data-v-675bbb79],
.welcome-modal-text h6[data-v-675bbb79] {
    margin: 0 0 8px;
    font-size: inherit;
    font-weight: 700
}

.welcome-modal-text strong[data-v-675bbb79] {
    font-weight: 700
}

.welcome-modal-text em[data-v-675bbb79] {
    font-style: italic
}

.welcome-modal-text br[data-v-675bbb79] {
    line-height: 1.5
}

.welcome-modal-text a[data-v-675bbb79] {
    color: #ff69b4;
    text-decoration: none
}

.welcome-modal-text a[data-v-675bbb79]:hover {
    text-decoration: underline
}

.no-remind-container[data-v-675bbb79] {
    margin-top: 5px
}

.no-remind-checkbox[data-v-675bbb79] {
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.no-remind-checkbox input[type=checkbox][data-v-675bbb79] {
    display: none
}

.checkbox-custom[data-v-675bbb79] {
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-radius: 3px;
    margin-right: 8px;
    position: relative;
    transition: all .3s ease;
    background: #fff
}

.no-remind-checkbox input[type=checkbox]:checked+.checkbox-custom[data-v-675bbb79] {
    background: #ff69b4;
    border-color: #ff69b4
}

.no-remind-checkbox input[type=checkbox]:checked+.checkbox-custom[data-v-675bbb79]:after {
    content: "✓";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: 700
}

.checkbox-text[data-v-675bbb79] {
    font-size: 14px;
    color: #666
}

.welcome-modal-button[data-v-675bbb79] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px #ff69b466;
    transition: all .3s ease;
    min-width: 120px
}

.welcome-modal-button[data-v-675bbb79]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #ff69b499
}

.welcome-modal-button[data-v-675bbb79]:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px #ff69b466
}

.button-text[data-v-675bbb79] {
    font-size: 16px;
    font-weight: 700;
    color: #fff
}

.button-icon[data-v-675bbb79] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1)
}

.collect-sub-tabs[data-v-675bbb79] {
    display: flex;
    margin: 15px;
    gap: 10px;
    width: fit-content
}

.sub-tab[data-v-675bbb79] {
    text-align: center;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all .3s ease;
    background: #fff;
    border: none;
    position: relative;
    border-radius: 20px
}

.sub-tab.active[data-v-675bbb79] {
    background: #ff69b4;
    color: #fff;
    box-shadow: 0 2px 4px #ff69b44d
}

.sub-tab[data-v-675bbb79]:not(.active) {
    background: #fff;
    color: #333
}

@keyframes fadeIn-675bbb79 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideIn-675bbb79 {
    0% {
        opacity: 0;
        transform: scale(.8) translateY(20px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.outsourcing-page[data-v-502861bd] {
    min-height: 100vh;
    background: #f5f5f5
}

.top-image[data-v-502861bd] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative
}

.top-banner[data-v-502861bd] {
    width: 100vw;
    height: 180px;
    display: block;
    object-fit: cover;
    object-position: center center
}

.decoration-images[data-v-502861bd] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 95vw;
    height: 30px;
    pointer-events: none
}

.decoration-img[data-v-502861bd] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 95vw;
    height: 30px;
    object-fit: contain;
    background: transparent
}

.decoration-img-1[data-v-502861bd] {
    z-index: 1
}

.decoration-img-2[data-v-502861bd] {
    z-index: 2
}

.publish-button[data-v-502861bd] {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #ff428e, #ce86fe, #fe8ceb);
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    z-index: 10
}

.rank-container[data-v-502861bd] {
    margin: 15px;
    background: linear-gradient(to bottom, #eef1ff, #ffeff7);
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 2px 8px #0000001a
}

.loading-text[data-v-502861bd],
.error-text[data-v-502861bd] {
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 20px 0
}

.error-text[data-v-502861bd] {
    color: #ff6b6b
}

.rank-wrapper[data-v-502861bd] {
    display: flex;
    flex-direction: column
}

.rank-content[data-v-502861bd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0
}

.rank-icon-img[data-v-502861bd] {
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

.rank-text[data-v-502861bd] {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    flex: 1
}

.posts-container[data-v-502861bd] {
    margin: 15px;
    padding-bottom: 80px
}

.posts-list[data-v-502861bd] {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.post-item[data-v-502861bd] {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px #0000001a
}

.post-header[data-v-502861bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.user-info[data-v-502861bd] {
    display: flex;
    align-items: center;
    gap: 8px
}

.user-avatar[data-v-502861bd] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0
}

.avatar-img[data-v-502861bd] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.user-badge[data-v-502861bd] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    flex-shrink: 0
}

.vip-badge[data-v-502861bd] {
    background: #ff69b4
}

.admin-badge[data-v-502861bd] {
    background: #8b5cf6
}

.normal-badge[data-v-502861bd] {
    display: none
}

.username[data-v-502861bd] {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    flex-shrink: 0
}

.post-time[data-v-502861bd] {
    font-size: 12px;
    color: #999
}

.post-content[data-v-502861bd] {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-break: break-word
}

.post-images[data-v-502861bd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px
}

.post-image[data-v-502861bd] {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s ease
}

.post-image[data-v-502861bd]:hover {
    transform: scale(1.02)
}

.post-image .image[data-v-502861bd] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.post-footer[data-v-502861bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0
}

.view-count[data-v-502861bd] {
    font-size: 12px;
    color: #999
}

.like-section[data-v-502861bd] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer
}

.like-icon[data-v-502861bd] {
    width: 16px;
    height: 16px
}

.like-count[data-v-502861bd] {
    font-size: 12px;
    color: #666
}

.empty-posts[data-v-502861bd] {
    text-align: center;
    padding: 40px 20px
}

.empty-text[data-v-502861bd] {
    font-size: 14px;
    color: #999
}

.bottom-nav[data-v-502861bd] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 12px 0 8px;
    box-shadow: 0 -1px 5px #0000000d;
    max-width: 375px;
    margin: 0 auto;
    min-height: 60px;
    z-index: 10
}

.nav-item[data-v-502861bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer
}

.nav-item.active .nav-text[data-v-502861bd] {
    color: #ff4081
}

.nav-icon[data-v-502861bd] {
    font-size: 24px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px
}

.nav-icon svg[data-v-502861bd] {
    width: 24px;
    height: 24px;
    color: #333
}

.nav-text[data-v-502861bd] {
    font-size: 13px;
    color: #333;
    line-height: 1.2;
    text-align: center;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-top: 2px
}

.nav-icon[data-v-502861bd] {
    position: relative
}

.checkin-badge[data-v-502861bd] {
    position: absolute;
    top: -5px;
    right: -9px;
    width: 20px;
    height: 11px;
    background: linear-gradient(180deg, #7265ff, #189dff);
    color: #fff;
    font-size: 8px;
    font-weight: 500;
    border: 1.5px solid white;
    border-radius: 8px;
    line-height: 11px;
    z-index: 10;
    text-align: center;
    box-shadow: 0 1px 3px #0003;
    display: flex;
    align-items: center;
    justify-content: center
}

.limit-dialog[data-v-502861bd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000
}

.limit-overlay[data-v-502861bd] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000073
}

.limit-content[data-v-502861bd] {
    position: relative;
    width: 78%;
    max-width: 320px;
    background: #fff;
    border-radius: 18px;
    padding: 24px 22px 20px;
    text-align: center;
    box-shadow: 0 12px 32px #ff4f9e40;
    z-index: 2001
}

.limit-title[data-v-502861bd] {
    font-size: 18px;
    font-weight: 600;
    color: #ff4f9e;
    margin-bottom: 12px
}

.limit-message[data-v-502861bd] {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: pre-line
}

.limit-btn[data-v-502861bd] {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff4f9e, #ff7eb8);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s ease
}

.limit-btn[data-v-502861bd]:active {
    opacity: .85
}

.detail-container[data-v-734aa684] {
    position: relative;
    width: 100%;
    max-width: 450px;
    background: #fff;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, sans-serif;
    padding-bottom: 50px
}

.main-image-container[data-v-734aa684] {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff1f6, #f8dce9)
}

.main-image[data-v-734aa684] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease
}

.image-loading[data-v-734aa684] .main-image[data-v-734aa684] {
    opacity: 0
}

.image-counter[data-v-734aa684] {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10
}

.back-button[data-v-734aa684] {
    position: fixed;
    top: 15px;
    left: 15px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all .3s ease;
    z-index: 1000;
    background-color: transparent
}

.back-button svg[data-v-734aa684] {
    width: 24px;
    height: 24px;
    color: #fff
}

.nav-button[data-v-734aa684] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    z-index: 10
}

.nav-button[data-v-734aa684]:hover {
    transform: translateY(-50%) scale(1.1)
}

.nav-prev[data-v-734aa684] {
    left: 15px
}

.nav-next[data-v-734aa684] {
    right: 15px
}

.nav-users-container[data-v-734aa684] {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: flex-end;
    gap: 12px;
    z-index: 10
}

.nav-user-thumb[data-v-734aa684] {
    cursor: pointer;
    transition: all .3s ease;
    opacity: .8
}

.nav-user-thumb[data-v-734aa684]:hover {
    transform: scale(1.05);
    opacity: 1
}

.nav-user-thumb[data-v-734aa684]:active {
    transform: scale(.95)
}

.nav-user-current[data-v-734aa684] {
    opacity: 1;
    cursor: default
}

.nav-user-current[data-v-734aa684]:hover {
    transform: none
}

.nav-thumb-wrapper[data-v-734aa684] {
    position: relative;
    display: inline-block
}

.nav-thumb-image[data-v-734aa684] {
    width: 50px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    display: block
}

.nav-user-current .nav-thumb-image[data-v-734aa684] {
    width: 60px;
    height: 80px
}

.nav-user-id[data-v-734aa684] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    color: #fff;
    text-align: center;
    font-weight: 500;
    padding: 4px 2px;
    background: #0009;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.image-indicators[data-v-734aa684] {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    display: flex;
    gap: 6px;
    justify-content: center
}

.indicator[data-v-734aa684] {
    width: 20px;
    height: 4px;
    background-color: #fff9;
    border-radius: 2px;
    cursor: pointer;
    transition: all .3s ease
}

.indicator[data-v-734aa684]:hover {
    background-color: #fffc
}

.indicator.active[data-v-734aa684] {
    background-color: #fff
}

.user-card-container[data-v-734aa684] {
    background: linear-gradient(180deg, #ffd7e7, #fff);
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-top: 12px;
    position: relative;
    z-index: 1;
    margin-top: -120px
}

.mini-stats-row[data-v-734aa684] {
    display: flex;
    gap: 12px;
    padding: 8px 12px 4px
}

.mini-stat-card[data-v-734aa684] {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    text-align: left;
    padding: 10px 12px;
    color: #333;
    box-shadow: 0 1px 4px #0000000f;
    border: 1px solid rgba(0, 0, 0, .04)
}

.mini-stat-label[data-v-734aa684] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 12px;
    margin-bottom: 6px
}

.mini-dot[data-v-734aa684] {
    display: inline-block;
    width: 6px;
    height: 14px;
    border-radius: 3px
}

.dot-age[data-v-734aa684] {
    background: linear-gradient(180deg, #ff6fb0, #ff83c0)
}

.dot-height[data-v-734aa684] {
    background: linear-gradient(180deg, #ffa54b, #ffbe6a)
}

.dot-weight[data-v-734aa684] {
    background: linear-gradient(180deg, #9b6bff, #b28cff)
}

.dot-cup[data-v-734aa684] {
    background: linear-gradient(180deg, #4ecdc4, #44a08d)
}

.mini-stat-value[data-v-734aa684] {
    font-size: 18px;
    font-weight: 700;
    text-align: center
}

.mini-info-list[data-v-734aa684] {
    padding: 6px 12px 4px
}

.mini-info-item[data-v-734aa684] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 2px
}

.mini-info-label[data-v-734aa684] {
    color: #999;
    font-size: 13px
}

.mini-info-value[data-v-734aa684] {
    color: #333;
    font-size: 14px;
    font-weight: 600
}

.user-header[data-v-734aa684] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #ffffff
}

.user-header-left[data-v-734aa684] {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.header-location[data-v-734aa684] {
    margin-top: 2px
}

.loc-pill[data-v-734aa684] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 2px 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f5498e, #f67732);
    color: #fff;
    font-size: 12px;
    width: fit-content
}

.location-icon-wrapper[data-v-734aa684] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border-radius: 6px;
    margin-right: 6px
}

.loc-icon[data-v-734aa684] {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1)
}

.location-province[data-v-734aa684] {
    color: #fff;
    font-weight: 500
}

.location-city[data-v-734aa684] {
    color: #fff;
    font-weight: 500;
    background: #faaa85;
    border-radius: 6px;
    padding: 0 6px;
    margin-left: 4px
}

.loc-text[data-v-734aa684] {
    color: #fff;
    font-weight: 500;
    line-height: 1
}

.user-id[data-v-734aa684] {
    font-size: 18px;
    font-weight: 700;
    color: #333
}

.verify-badge[data-v-734aa684] {
    font-size: 12px;
    color: #f69;
    margin-left: 5px;
    font-weight: 400
}

.copy-badge[data-v-734aa684] {
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    color: #ff69b4;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.copy-badge[data-v-734aa684]:active {
    opacity: .8
}

.copy-toast[data-v-734aa684] {
    position: fixed;
    left: 50%;
    bottom: 20%;
    transform: translate(-50%);
    background: #000000c7;
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    z-index: 2000
}

.expand-icon[data-v-734aa684] {
    width: 12px;
    height: 12px
}

.match-alert-modal[data-v-734aa684] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000
}

.match-alert-overlay[data-v-734aa684] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000073
}

.match-alert-content[data-v-734aa684] {
    position: relative;
    width: 78%;
    max-width: 320px;
    background: #fff;
    border-radius: 18px;
    padding: 24px 22px 20px;
    text-align: center;
    box-shadow: 0 12px 32px #ff4f9e40;
    z-index: 3001
}

.match-alert-title[data-v-734aa684] {
    font-size: 18px;
    font-weight: 600;
    color: #ff4f9e;
    margin-bottom: 12px
}

.match-alert-message[data-v-734aa684] {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: pre-line
}

.match-alert-btn[data-v-734aa684] {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff4f9e, #ff7eb8);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s ease
}

.match-alert-btn[data-v-734aa684]:active {
    opacity: .85
}

.favorite-btn[data-v-734aa684] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    min-width: 29px;
    height: 29px;
    background-color: transparent;
    border: none;
    border-radius: 15px;
    transition: background-color .2s ease;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent
}

.favorite-btn[data-v-734aa684]:focus {
    outline: none;
    box-shadow: none
}

.sponsor-icon[data-v-734aa684] {
    flex-shrink: 0
}

.user-info-table[data-v-734aa684] {
    padding: 0 15px
}

.info-item[data-v-734aa684] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0
}

.info-item[data-v-734aa684]:last-child {
    border-bottom: none
}

.info-label[data-v-734aa684] {
    width: 50px;
    color: #999;
    font-size: 14px
}

.info-value[data-v-734aa684] {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    margin-left: auto;
    text-align: right
}

.section-title[data-v-734aa684] {
    padding: 12px 15px;
    margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    text-align: center
}

.section-title-box[data-v-734aa684] {
    display: block;
    margin: 15px 0 10px 12px;
    height: 30px;
    line-height: 30px;
    color: #f5498e;
    font-family: PingFangSC;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    text-align: left
}

.beauty-photos-title[data-v-734aa684] {
    position: relative;
    left: 12px;
    margin: 15px 0 10px;
    width: 64px;
    height: 22px;
    opacity: 1;
    font-family: PingFangSC;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    color: #f5498e
}

.beauty-videos-title[data-v-734aa684] {
    position: relative;
    left: 12px;
    margin: 15px 0 10px;
    width: 96px;
    height: 22px;
    opacity: 1;
    font-family: PingFangSC;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    color: #f5498e
}

.photo-grid[data-v-734aa684] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 15px 15px
}

.photo-item[data-v-734aa684] {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 5px;
    background: linear-gradient(135deg, #fff1f6, #f8dce9)
}

.gallery-image[data-v-734aa684] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease, transform .2s ease, box-shadow .2s ease
}

.image-loading[data-v-734aa684] .gallery-image[data-v-734aa684] {
    opacity: 0
}

.gallery-image[data-v-734aa684]:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px #0003
}

.gallery-image[data-v-734aa684]:active {
    transform: scale(.98)
}

.loading-overlay[data-v-734aa684] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fffc;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100
}

.loading-spinner[data-v-734aa684] {
    color: #f69;
    font-size: 18px;
    font-weight: 700
}

.error-message[data-v-734aa684] {
    text-align: center;
    padding: 20px;
    color: #f69;
    font-size: 16px
}

.video-section[data-v-734aa684] {
    margin-bottom: 15px
}

.video-verification-note[data-v-734aa684] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 12px 15px 0;
    padding: 11px 12px;
    border: 1px solid #ffd2e1;
    border-radius: 12px;
    color: #735662;
    background: linear-gradient(145deg, #fff9fb, #fff1f6);
    box-shadow: 0 4px 12px #d83e7212
}

.video-note-icon[data-v-734aa684] {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #f34884, #ff8e70);
    font-size: 12px;
    font-weight: 700
}

.video-verification-note strong[data-v-734aa684] {
    display: block;
    margin-bottom: 4px;
    color: #51313e;
    font-size: 12px
}

.video-verification-note p[data-v-734aa684] {
    margin: 0 0 3px;
    font-size: 10px;
    line-height: 1.55
}

.video-verification-note p:last-child[data-v-734aa684] {
    margin-bottom: 0;
    color: #d64576;
    font-weight: 600
}

.video-grid[data-v-734aa684] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 15px 15px
}

.video-item[data-v-734aa684] {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 5px
}

.video-thumbnail[data-v-734aa684] {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease
}

.video-thumbnail[data-v-734aa684]:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px #0000004d
}

.video-thumbnail[data-v-734aa684]:active {
    transform: scale(.98)
}

.video-image[data-v-734aa684] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer
}

video.video-image[data-v-734aa684] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer
}

.play-circle[data-v-734aa684] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background-color: #00000080;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.video-lock[data-v-734aa684] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000b3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px
}

.expand-content-box[data-v-734aa684] {
    text-align: center;
    margin: 10px 0 0
}

.expand-btn[data-v-734aa684] {
    color: #666;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    margin: 8px 0
}

.content-detail[data-v-734aa684] {
    text-align: left;
    color: #444;
    font-size: 14px;
    border-radius: 6px;
    padding: 9px 11px;
    margin: 8px 15px;
    word-break: break-all;
    border: 1px solid #fcf9f9;
    line-height: 1.5
}

.detail-field[data-v-734aa684] {
    display: grid;
    grid-template-columns: minmax(110px, 40%) 1fr;
    gap: 14px;
    padding: 5px 2px;
    border-bottom: 1px solid #f5edf1
}

.detail-field:last-child[data-v-734aa684] {
    border-bottom: 0
}

.detail-field-label[data-v-734aa684] {
    color: #888;
    word-break: break-word
}

.detail-field-value[data-v-734aa684] {
    color: #333;
    font-weight: 500;
    word-break: break-word
}

.detail-description[data-v-734aa684] {
    white-space: pre-wrap
}

.intro-fee-card[data-v-734aa684] {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #ffd3e2;
    border-radius: 13px;
    background: linear-gradient(145deg, #fff9fb, #fff0f5);
    box-shadow: 0 5px 14px #d73b7012;
    word-break: normal
}

.intro-fee-header[data-v-734aa684] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px
}

.intro-fee-header span[data-v-734aa684] {
    color: #3b2630;
    font-size: 14px;
    font-weight: 700
}

.intro-fee-header em[data-v-734aa684] {
    padding: 2px 7px;
    border-radius: 10px;
    color: #f04480;
    background: #ffe3ed;
    font-size: 10px;
    font-style: normal;
    line-height: 1.5
}

.intro-fee-grid[data-v-734aa684] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px
}

.intro-fee-grid.two[data-v-734aa684] {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.intro-fee-item[data-v-734aa684] {
    min-width: 0;
    padding: 9px 3px;
    border-radius: 9px;
    text-align: center;
    background: #fff
}

.intro-fee-item small[data-v-734aa684] {
    display: block;
    color: #999;
    font-size: 9px;
    white-space: nowrap
}

.intro-fee-item strong[data-v-734aa684] {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap
}

.intro-fee-item.original strong[data-v-734aa684] {
    color: #888;
    text-decoration: line-through;
    text-decoration-thickness: 1px
}

.intro-fee-item.member[data-v-734aa684] {
    background: linear-gradient(145deg, #fff0f5, #ffdce8)
}

.intro-fee-item.member strong[data-v-734aa684] {
    color: #f04480
}

.intro-fee-item.first[data-v-734aa684] {
    background: linear-gradient(145deg, #fff8e7, #ffedc2)
}

.intro-fee-item.first strong[data-v-734aa684] {
    color: #d78a19
}

.virgin-fee[data-v-734aa684] {
    border-color: #f6c685;
    background: linear-gradient(145deg, #fffaf0, #fff1dc)
}

.virgin-fee .intro-fee-header em[data-v-734aa684] {
    color: #b76a00;
    background: #ffe7b9
}

.virgin-fee>p[data-v-734aa684] {
    margin: 9px 0 0;
    color: #a4773d;
    text-align: center;
    font-size: 9px;
    line-height: 1.4
}

.intro-fee-notice[data-v-734aa684] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    padding: 8px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72)
}

.intro-fee-notice span[data-v-734aa684] {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-radius: 7px;
    color: #fff;
    background: #f15b8d;
    font-size: 9px;
    line-height: 1.5
}

.intro-fee-notice p[data-v-734aa684] {
    margin: 0;
    color: #7d6870;
    font-size: 10px;
    line-height: 1.55
}

.detail-chevron[data-v-734aa684] {
    display: inline-block;
    margin-left: 4px;
    color: #999;
    transition: transform .2s ease
}

.expand-btn.expanded .detail-chevron[data-v-734aa684] {
    transform: rotate(180deg)
}

.blurred[data-v-734aa684] {
    filter: blur(1.4px);
    transform: scale(1.02)
}

.video-lock-center[data-v-734aa684] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    z-index: 2;
    pointer-events: none
}

.lock-text[data-v-734aa684] {
    margin-top: 8px;
    font-size: 16px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.video-lock-left[data-v-734aa684] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0009;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    z-index: 2;
    border-radius: 5px
}

.lock-content[data-v-734aa684] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px
}

.lock-text-left[data-v-734aa684] {
    margin-top: 6px;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    text-align: center;
    white-space: nowrap
}

.lock-content-vertical[data-v-734aa684] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 10px;
    pointer-events: none
}

.lock-icon[data-v-734aa684] {
    flex-shrink: 0;
    opacity: .9;
    filter: brightness(.9)
}

.vip-button-image[data-v-734aa684] {
    max-width: 100px;
    max-height: 50px;
    object-fit: contain;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .3));
    pointer-events: auto
}

.vip-button-image[data-v-734aa684]:hover {
    transform: scale(1.05);
    opacity: .9
}

.vip-button-image[data-v-734aa684]:active {
    transform: scale(.95)
}

.fixed-bottom-bar[data-v-734aa684] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: #fff;
    box-shadow: 0 -2px 10px #0000001a;
    z-index: 1000;
    height: 64px;
    box-sizing: border-box
}

.collect-status[data-v-734aa684] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 27%;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease
}

.collect-icon[data-v-734aa684] {
    width: 25px;
    height: 25px;
    fill: currentColor
}

.collect-status.is-collected[data-v-734aa684] {
    color: #f5498e
}

.collect-status[data-v-734aa684]:active {
    transform: scale(.95);
    opacity: .9
}

.sponsor-btn[data-v-734aa684] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(90deg, #f5498e, #f67732);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease
}

.match-btn[data-v-734aa684] {
    width: 95%;
    margin: 0 auto;
    justify-content: center
}

.normal-sponsor-btn[data-v-734aa684] {
    flex: 1;
    height: 48px;
    min-width: 0;
    border-radius: 24px;
    justify-content: center
}

.consult-heart[data-v-734aa684] {
    color: #fff;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 1px 2px #d52d6b66
}

.heart-discount-banner[data-v-734aa684] {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 60px;
    z-index: 1100;
    padding: 6px 12px 6px 40px;
    background: #f5498e;
    color: #fff;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    box-shadow: 0 6px 14px #ff55aa59
}

.heart-discount-avatar[data-v-734aa684] {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%
}

.heart-discount-text[data-v-734aa684] {
    white-space: nowrap
}

.sponsor-btn[data-v-734aa684]:active {
    transform: scale(.95);
    opacity: .9
}

.discovery-container[data-v-5525955e] {
    position: relative;
    width: 100%;
    max-width: 375px;
    min-height: 100vh;
    background: #f8f9fa;
    background-image: url(/images/%E7%9F%A9%E5%BD%A2%203828@1x.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding-bottom: 70px
}

.wallet-container[data-v-5525955e] {
    display: flex;
    align-items: stretch;
    margin: 8px 1px;
    position: relative;
    z-index: 3;
    min-height: 50px
}

.wallet-section[data-v-5525955e] {
    background: #fff;
    margin: 0;
    border-radius: 50px 0 0 50px;
    padding: 1px;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    min-height: 50px
}

.benefits-section[data-v-5525955e] {
    margin: 4px 0;
    position: relative;
    z-index: 3
}

.profit-section[data-v-5525955e],
.other-section[data-v-5525955e] {
    margin: 10px 1px;
    border-radius: 12px;
    position: relative;
    z-index: 3
}

.section-title[data-v-5525955e] {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    text-align: left
}

.benefits-section-content[data-v-5525955e] {
    height: 20px
}

.section-header[data-v-5525955e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.balance-note[data-v-5525955e] {
    color: #999;
    font-size: 14px;
    cursor: pointer;
    transition: color .2s
}

.balance-note[data-v-5525955e]:hover {
    color: #666
}

.wallet-content[data-v-5525955e] {
    width: 265px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.balance-info[data-v-5525955e] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1
}

.balance-icon[data-v-5525955e] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
    margin-left: 15px
}

.balance-icon svg[data-v-5525955e] {
    width: 38px;
    height: 38px
}

.balance-icon[data-v-5525955e] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.balance-icon img[data-v-5525955e] {
    width: 40px;
    height: 40px
}

.balance-details[data-v-5525955e] {
    display: flex;
    flex-direction: column
}

.wallet-title[data-v-5525955e] {
    padding-top: 5px;
    font-size: 13px;
    color: #666;
    font-weight: 500
}

.balance-amount[data-v-5525955e] {
    font-size: 15px;
    font-weight: 500;
    color: #f5498e
}

.wallet-actions[data-v-5525955e] {
    display: flex;
    align-items: center;
    gap: 15px
}

.details-link[data-v-5525955e] {
    width: 40px;
    font-size: 13px;
    color: #f5498e;
    cursor: pointer;
    font-weight: 500
}

.recharge-btn[data-v-5525955e] {
    background: linear-gradient(270deg, #f5498e, #ad7eff 53%, #99d4fc);
    color: #fff;
    border: none;
    border-radius: 0 50px 50px 0;
    padding: 4px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    z-index: 3;
    margin-left: -1px;
    height: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px #f5498e4d;
    min-height: 50px;
    align-self: stretch
}

.recharge-btn[data-v-5525955e]:focus,
.recharge-btn[data-v-5525955e]:active {
    outline: none
}

.become-vip-container[data-v-5525955e] {
    background: #fff;
    margin: 8px 15px;
    border-radius: 12px;
    padding: 12px 15px
}

.become-vip[data-v-5525955e] {
    margin: 0 0 12px;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px
}

.vip-status[data-v-5525955e] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 40px
}

.become-vip-image[data-v-5525955e] {
    width: 53px;
    height: 13px;
    display: block;
    margin-bottom: 2px
}

.vip-price[data-v-5525955e] {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    line-height: 1.2
}

.become-vip-container .recharge-btn[data-v-5525955e] {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    border: none;
    border-radius: 15px;
    color: #fff;
    font-size: 14px;
    padding: 6px 12px;
    cursor: pointer;
    outline: none
}

.become-vip-container .recharge-btn svg[data-v-5525955e] {
    margin-left: 5px
}

.one-click-recharge[data-v-5525955e] {
    margin: 0;
    width: 100%;
    background: linear-gradient(90deg, #e69c4d, #ffc994);
    box-shadow: inset 0 4px 10px #ffffff4d;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    outline: none
}

.one-click-recharge[data-v-5525955e]:hover {
    background: linear-gradient(90deg, #d8923f, #f0b87e)
}

.benefits-grid[data-v-5525955e] {
    display: flex;
    gap: 10px;
    margin-bottom: 0
}

.benefit-card[data-v-5525955e] {
    flex: 1;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    min-height: 85px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box
}

.benefit-card[data-v-5525955e]:nth-child(1) {
    background: linear-gradient(180deg, #ffcde1, #fdfeff);
    border: .5px solid #E7EDFF
}

.benefit-card[data-v-5525955e]:nth-child(2) {
    background: linear-gradient(180deg, #f0dbfe, #fdfeff);
    box-sizing: border-box;
    border: .5px solid #E5F4FB
}

.benefit-card[data-v-5525955e]:nth-child(3) {
    background: linear-gradient(180deg, #e0eafc, #fdfeff);
    box-sizing: border-box;
    border: .5px solid #FCEDE6
}

.benefit-icon-corner[data-v-5525955e] {
    position: absolute;
    top: -30px;
    left: 20px;
    width: 62px;
    height: 62px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.emoji-icon[data-v-5525955e] {
    font-size: 16px
}

.benefit-content[data-v-5525955e] {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    text-align: center
}

.benefit-title[data-v-5525955e] {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #333
}

.benefit-subtitle[data-v-5525955e] {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    line-height: 1.3;
    flex: 1;
    white-space: pre-line
}

.benefit-button[data-v-5525955e] {
    width: 70px;
    height: 24px;
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 60px;
    padding: 1px 10px;
    font-size: 11px;
    cursor: pointer;
    align-self: center;
    margin-top: auto;
    outline: none
}

.benefit-button[data-v-5525955e]:focus,
.benefit-button[data-v-5525955e]:active {
    outline: none
}

.benefit-button.active[data-v-5525955e] {
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    color: #fff
}

.benefit-button.disabled[data-v-5525955e] {
    background: #e0e0e0 !important;
    color: #999 !important;
    cursor: not-allowed
}

.invite-container[data-v-5525955e] {
    width: 330px;
    margin-top: 15px;
    border-radius: 12px;
    position: relative;
    z-index: 3
}

.invite-container .section-title[data-v-5525955e] {
    margin: 0 0 10px
}

.invite-section[data-v-5525955e] {
    background: linear-gradient(180deg, #ffe4f2, #fff);
    border-radius: 12px;
    padding: 10px
}

.invite-content[data-v-5525955e] {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.invite-icon[data-v-5525955e] {
    font-size: 24px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center
}

.invite-actions[data-v-5525955e] {
    display: flex;
    gap: 10px
}

.invite-btn[data-v-5525955e] {
    padding: 0;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 400;
    min-width: 70px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px #0000001a;
    outline: none
}

.invite-btn[data-v-5525955e]:focus,
.invite-btn[data-v-5525955e]:active {
    outline: none
}

.invite-btn.secondary[data-v-5525955e] {
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    color: #fff;
    border: 1px solid #FF6B9D
}

.invite-btn.primary[data-v-5525955e] {
    background: #ff4e93;
    color: #fff
}

.invite-btn[data-v-5525955e]:disabled {
    background: #ddd;
    color: #999;
    cursor: not-allowed
}

.invite-reward-info[data-v-5525955e] {
    background: transparent;
    margin: 10px 0 0;
    padding: 0;
    text-align: left
}

.invite-reward-info .reward-title[data-v-5525955e] {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px
}

.reward-desc[data-v-5525955e] {
    font-size: 11px;
    color: #adb0b5;
    line-height: 1.5
}

.reward-desc div[data-v-5525955e] {
    margin-bottom: 3px
}

.reward-desc div[data-v-5525955e]:last-child {
    margin-bottom: 0
}

.copy-success-toast[data-v-5525955e] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000c;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 1000;
    animation: fadeInOut-5525955e 2s ease-in-out
}

@keyframes fadeInOut-5525955e {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.8)
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }

    85% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.8)
    }
}

.other-items[data-v-5525955e] {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 6px;
    padding-bottom: 10px
}

.other-item[data-v-5525955e] {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0
}

.other-item[data-v-5525955e]:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.other-icon[data-v-5525955e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    padding-top: 5px;
    padding-left: 5px
}

.other-icon svg[data-v-5525955e] {
    width: 25px;
    height: 25px
}

.other-text[data-v-5525955e] {
    flex: 1;
    font-size: 14px;
    text-align: left;
    color: #333;
    margin-top: 3px
}

.other-arrow[data-v-5525955e] {
    color: #ccc;
    height: 13px
}

.bottom-nav[data-v-5525955e] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 12px 0 8px;
    box-shadow: 0 -1px 5px #0000001a;
    max-width: 375px;
    margin: 0 auto;
    min-height: 60px
}

.nav-item[data-v-5525955e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    outline: none
}

.nav-item[data-v-5525955e]:focus,
.nav-item[data-v-5525955e]:active {
    outline: none
}

.nav-item.active .nav-text[data-v-5525955e] {
    color: #ff4081
}

.nav-icon[data-v-5525955e] {
    font-size: 24px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px
}

.nav-icon svg[data-v-5525955e] {
    width: 24px;
    height: 24px
}

.nav-text[data-v-5525955e] {
    font-size: 13px;
    color: #333;
    line-height: 1.2;
    text-align: center;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-top: 2px
}

.checkin-modal[data-v-5525955e] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0000004d
}

.modal-content[data-v-5525955e] {
    position: relative;
    width: 280px;
    height: 350px;
    background-image: url(/images/%E7%BB%84%207033@3x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    padding: 80px 0 0;
    text-align: center;
    animation: modalSlideIn-5525955e .3s ease-out;
    display: flex;
    align-items: center;
    justify-content: center
}

@keyframes modalSlideIn-5525955e {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(.9)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.amount-text[data-v-5525955e] {
    display: flex;
    align-items: baseline;
    gap: 5px
}

.amount-number[data-v-5525955e] {
    font-size: 46px;
    font-weight: 700;
    background: linear-gradient(270deg, #f67434, #f64a33);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1
}

.amount-unit[data-v-5525955e] {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(270deg, #f67434, #f64a33);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1
}

.already-checked-modal[data-v-5525955e] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000080
}

.simple-modal-content[data-v-5525955e] {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin: 0 20px;
    text-align: center;
    box-shadow: 0 4px 20px #00000026;
    animation: modalSlideIn-5525955e .3s ease-out
}

.simple-modal-message[data-v-5525955e] {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.4
}

.simple-modal-btn[data-v-5525955e] {
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: transform .2s;
    outline: none
}

.simple-modal-btn[data-v-5525955e]:hover {
    transform: translateY(-1px)
}

.simple-modal-btn[data-v-5525955e]:focus {
    outline: none
}

.simple-modal-btn[data-v-5525955e]:active {
    outline: none;
    transform: translateY(0)
}

.user-info-section[data-v-5525955e] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin-top: 20px
}

.user-profile-container[data-v-5525955e] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%
}

.user-avatar[data-v-5525955e] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f5498e, #8859fb, #9cd6fc) border-box;
    box-shadow: 0 4px 12px #00000026;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: 10
}

.user-content-block[data-v-5525955e] {
    position: relative;
    background: #fee5ec;
    border-radius: 40px;
    padding: 50px 20px 20px;
    width: 100%;
    box-shadow: 0 8px 24px #0000001a;
    border: 2px solid rgba(255, 255, 255, .8);
    margin-top: 40px;
    overflow: hidden;
    -webkit-mask: radial-gradient(circle 48px at 50% 0, transparent 99%, black 100%);
    mask: radial-gradient(circle 48px at 50% 0, transparent 99%, black 100%)
}

.user-content-block[data-v-5525955e]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fee5ec;
    border-radius: 20px;
    clip-path: polygon(0% 0%, 30% 0%, 50% 30%, 70% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 1
}

.user-info[data-v-5525955e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2
}

.username[data-v-5525955e] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    margin-bottom: 5px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif
}

.user-id-container[data-v-5525955e] {
    display: flex;
    align-items: center;
    gap: 4px
}

.user-id[data-v-5525955e] {
    font-size: 12px;
    color: #666;
    line-height: 1.2;
    font-weight: 400
}

.copy-id-text[data-v-5525955e] {
    background: #ffe0e8;
    color: #ff428e;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.2;
    display: inline-block;
    -webkit-user-select: none;
    user-select: none
}

.copy-id-text[data-v-5525955e]:focus {
    outline: none;
    box-shadow: none
}

.copy-id-text[data-v-5525955e]:focus-visible {
    outline: none;
    box-shadow: none
}

.vip-status-right[data-v-5525955e] {
    display: flex;
    align-items: center
}

.vip-status-info[data-v-5525955e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 2
}

.vip-status-badge[data-v-5525955e] {
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center
}

.vip-status-badge.non-vip[data-v-5525955e] {
    background: transparent;
    border: none;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center
}

.vip-text[data-v-5525955e] {
    font-size: 14px;
    color: #000;
    font-weight: 500;
    line-height: 1;
    text-align: center
}

.non-vip .vip-text[data-v-5525955e] {
    color: #000
}

.recharge-tip[data-v-5525955e] {
    height: 18px;
    padding: 0 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, #e69c4d, #ffc994);
    box-shadow: inset 0 4px 10px #ffffff4d;
    display: flex;
    align-items: center;
    justify-content: center
}

.recharge-text[data-v-5525955e] {
    font-size: 11px;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1
}

.nav-icon[data-v-5525955e] {
    position: relative
}

.checkin-badge[data-v-5525955e] {
    position: absolute;
    top: -5px;
    right: -9px;
    width: 20px;
    height: 11px;
    background: linear-gradient(180deg, #7265ff, #189dff);
    color: #fff;
    font-size: 8px;
    font-weight: 500;
    border: 1.5px solid white;
    border-radius: 8px;
    line-height: 11px;
    z-index: 10;
    text-align: center;
    box-shadow: 0 1px 3px #0003;
    display: flex;
    align-items: center;
    justify-content: center
}

.custom-alert-modal[data-v-5525955e] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000080
}

.custom-alert-content[data-v-5525955e] {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin: 0 20px;
    text-align: center;
    box-shadow: 0 4px 20px #00000026;
    animation: modalSlideIn-5525955e .3s ease-out;
    max-width: 300px;
    width: 90%
}

.custom-alert-message[data-v-5525955e] {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5;
    word-wrap: break-word
}

.custom-alert-btn[data-v-5525955e] {
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: transform .2s;
    outline: none;
    width: 100%
}

.custom-alert-btn[data-v-5525955e]:hover {
    transform: translateY(-1px)
}

.custom-alert-btn[data-v-5525955e]:focus,
.custom-alert-btn[data-v-5525955e]:active {
    outline: none;
    transform: translateY(0)
}

.like-required-modal[data-v-5525955e] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000080
}

.like-required-content[data-v-5525955e] {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin: 0 20px;
    text-align: center;
    box-shadow: 0 4px 20px #00000026;
    animation: modalSlideIn-5525955e .3s ease-out;
    max-width: 300px;
    width: 90%
}

.like-required-message[data-v-5525955e] {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5
}

.like-required-btn[data-v-5525955e] {
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: transform .2s;
    outline: none;
    width: 100%
}

.like-required-btn[data-v-5525955e]:hover {
    transform: translateY(-1px)
}

.like-required-btn[data-v-5525955e]:focus,
.like-required-btn[data-v-5525955e]:active {
    outline: none;
    transform: translateY(0)
}

.tech-support[data-v-5525955e] {
    margin: 15px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: relative;
    z-index: 3
}

.tech-support-text[data-v-5525955e] {
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 25px
}

.tech-support-username[data-v-5525955e] {
    color: #ff4e93
}

.vip-container[data-v-ff936041] {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f5f5;
    background-image: url(/images/%E7%9F%A9%E5%BD%A2%203828@1x.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding-bottom: 15px;
    width: 100vw;
    margin: 0 auto;
    position: relative;
    overflow-y: auto
}

.user-info-status[data-v-ff936041] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    padding: 6px 20px;
    margin: 8px -5px;
    height: 65px;
    box-sizing: border-box
}

.user-info-left[data-v-ff936041] {
    display: flex;
    align-items: center
}

.user-info-left img[data-v-ff936041]:not(.user-avatar) {
    margin-right: 6px;
    display: block
}

.user-avatar[data-v-ff936041] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px
}

.user-details[data-v-ff936041] {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.username[data-v-ff936041] {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    line-height: 1.2;
    margin-bottom: 4px
}

.user-id[data-v-ff936041] {
    font-size: 14px;
    color: #666;
    line-height: 1.2
}

.vip-status-right[data-v-ff936041] {
    display: flex;
    align-items: center
}

.vip-status-info[data-v-ff936041] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

.vip-status-badge[data-v-ff936041] {
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center
}

.vip-status-badge.non-vip[data-v-ff936041] {
    background: transparent;
    border: none;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center
}

.vip-text[data-v-ff936041] {
    font-size: 14px;
    color: #000;
    font-weight: 500;
    line-height: 1;
    text-align: center
}

.non-vip .vip-text[data-v-ff936041] {
    color: #000
}

.recharge-tip[data-v-ff936041] {
    height: 18px;
    padding: 0 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, #e69c4d, #ffc994);
    box-shadow: inset 0 4px 10px #ffffff4d;
    display: flex;
    align-items: center;
    justify-content: center
}

.recharge-text[data-v-ff936041] {
    font-size: 11px;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1
}

.vip-container-section[data-v-ff936041] {
    background: transparent;
    margin: 0;
    border-radius: 12px;
    padding: 12px 15px
}

.vip-upgrade-cards[data-v-ff936041] {
    display: flex;
    gap: 10px;
    margin: 15px;
    justify-content: space-between
}

.upgrade-card[data-v-ff936041] {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px #0000001a
}

.card-header[data-v-ff936041] {
    background: #000;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.vip-level-icon[data-v-ff936041] {
    width: 20px;
    height: 20px
}

.vip-level[data-v-ff936041] {
    font-family: Alimama ShuHeiTi;
    color: #fff;
    font-weight: 700;
    font-size: 16px
}

.card-content[data-v-ff936041] {
    padding: 15px;
    text-align: center
}

.benefit-line[data-v-ff936041] {
    color: #333;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500
}

.divider[data-v-ff936041] {
    border-top: 1px dashed #ddd;
    margin: 10px 0
}

.condition-line[data-v-ff936041] {
    color: #666;
    font-size: 12px;
    line-height: 14px
}

.back-navigation[data-v-ff936041] {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 10px;
    background-color: transparent
}

.back-button[data-v-ff936041] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.back-button svg[data-v-ff936041] {
    width: 20px;
    height: 20px;
    color: #fff
}

.page-title[data-v-ff936041] {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.vip-card[data-v-ff936041] {
    margin: 0 -5px;
    background: linear-gradient(180deg, #fce8e0, #fdfeff);
    box-sizing: border-box;
    border: .5px solid #FCEDE6;
    border-radius: 12px;
    padding: 10px
}

.vip-icon[data-v-ff936041] {
    display: flex;
    align-items: center;
    height: 20px;
    width: 20px;
    margin-right: 8px
}

.vip-icon span[data-v-ff936041] {
    margin-left: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    line-height: 30px;
    display: flex;
    align-items: center
}

.vip-benefits[data-v-ff936041] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 25px
}

.benefit-item[data-v-ff936041] {
    background-image: url(/images/%E7%9F%A9%E5%BD%A2%204921@1x.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative
}

.benefit-icon[data-v-ff936041] {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px
}

.benefit-icon img[data-v-ff936041] {
    width: 35px;
    height: 35px
}

.benefit-content[data-v-ff936041] {
    text-align: center;
    color: #fff
}

.benefit-title[data-v-ff936041] {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #66042d
}

.benefit-desc[data-v-ff936041] {
    font-size: 12px;
    color: #000;
    opacity: .9
}

.highlight[data-v-ff936041] {
    color: #f5498e
}

.become-vip-container[data-v-ff936041] {
    margin: 8px 0;
    border-radius: 12px;
    padding: 12px 15px
}

.become-vip[data-v-ff936041] {
    margin: 0 0 12px;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px
}

.vip-status[data-v-ff936041] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 40px
}

.become-vip-image[data-v-ff936041] {
    width: 53px;
    height: 13px;
    display: block;
    margin-bottom: 2px
}

.vip-price[data-v-ff936041] {
    font-size: 12px;
    color: #0c0c0c;
    margin-top: 5px;
    line-height: 1.2
}

.balance-amount[data-v-ff936041] {
    color: #f5498e;
    font-weight: 700
}

.recharge-btn[data-v-ff936041] {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    border: none;
    border-radius: 15px;
    color: #fff;
    font-size: 14px;
    padding: 6px 12px;
    cursor: pointer
}

.recharge-btn svg[data-v-ff936041] {
    margin-left: 5px
}

.one-click-recharge[data-v-ff936041] {
    margin: 0;
    width: 100%;
    background: linear-gradient(90deg, #e69c4d, #ffc994);
    box-shadow: inset 0 4px 10px #ffffff4d;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    outline: none
}

.one-click-recharge.disabled[data-v-ff936041] {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
    box-shadow: none
}

.one-click-recharge[data-v-ff936041]:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
    box-shadow: none
}

.vip-container[data-v-ff936041] {
    width: 100%;
    max-width: 520px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 12px 24px;
    box-sizing: border-box;
    overflow-x: hidden;
    color: #32101f;
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 255, 255, .68), transparent 25%),
        radial-gradient(circle at 18% 83%, rgba(255, 255, 255, .48), transparent 24%),
        linear-gradient(165deg, #ffd6e5 0%, #ffbad1 38%, #fa80a8 72%, #f9a9c4 100%);
    background-attachment: local
}

.vip-topbar[data-v-ff936041] {
    height: 52px;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center
}

.vip-topbar h1[data-v-ff936041] {
    margin: 0;
    text-align: center;
    font-size: 19px;
    color: #2f1720
}

.vip-back[data-v-ff936041] {
    width: 34px;
    height: 34px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer
}

.vip-back svg[data-v-ff936041] {
    width: 22px;
    height: 22px
}

.vip-user-panel[data-v-ff936041] {
    min-height: 76px;
    display: flex;
    align-items: center;
    padding: 8px 14px 12px
}

.vip-user-avatar[data-v-ff936041] {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .75);
    box-shadow: 0 4px 12px #a92a5e2b
}

.vip-user-copy[data-v-ff936041] {
    min-width: 0;
    margin-left: 12px;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px
}

.vip-user-copy strong[data-v-ff936041] {
    overflow: hidden;
    color: #331321;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vip-user-copy span[data-v-ff936041] {
    color: #9f526e;
    font-size: 14px
}

.vip-user-badge[data-v-ff936041] {
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 14px;
    background: rgba(255, 255, 255, .3);
    color: #9e5470;
    font-size: 11px
}

.vip-user-badge.active[data-v-ff936041] {
    border-color: #ffe3ac;
    color: #7d3500;
    background: linear-gradient(135deg, #fff0b8, #ffb95f)
}

.vip-hero[data-v-ff936041] {
    position: relative;
    min-height: 150px;
    padding: 24px 44% 20px 22px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(120deg, #b6255b 0%, #f34d73 48%, #f39fbd 100%);
    box-shadow: 0 12px 28px #ba2c6142
}

.vip-hero[data-v-ff936041]:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, .32));
    pointer-events: none
}

.vip-hero-copy[data-v-ff936041] {
    position: relative;
    z-index: 2;
    white-space: nowrap
}

.vip-hero-copy h2[data-v-ff936041] {
    margin: 0 0 13px;
    color: #fff;
    font-size: clamp(21px, 6.5vw, 29px);
    line-height: 1.1;
    text-shadow: 0 2px 4px #8c174857
}

.vip-hero-copy p[data-v-ff936041] {
    margin: 0 0 15px;
    color: #fff5f8;
    font-size: 13px
}

.vip-hero-price[data-v-ff936041] {
    display: flex;
    align-items: baseline;
    gap: 7px
}

.vip-hero-price b[data-v-ff936041] {
    color: #fff;
    font-size: 20px;
    line-height: 1
}

.vip-hero-price span[data-v-ff936041] {
    font-size: 11px
}

.vip-hero-copy button[data-v-ff936041] {
    padding: 7px 15px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: #a72756;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px #75163733
}

.vip-crown[data-v-ff936041] {
    position: absolute;
    z-index: 1;
    top: 22px;
    right: 7%;
    width: 94px;
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(8deg);
    border: 3px solid #fff0b5;
    border-radius: 28px 28px 42px 42px;
    color: #fff;
    background: linear-gradient(145deg, #ffdc88, #ff8b60 55%, #ee4775);
    box-shadow: inset 0 0 18px #fff9, 0 10px 24px #a11b5047
}

.vip-crown span[data-v-ff936041] {
    position: absolute;
    top: -22px;
    color: #ffe69c;
    font-size: 46px;
    text-shadow: 0 3px 5px #b74140
}

.vip-crown b[data-v-ff936041] {
    font-size: 42px;
    font-style: italic;
    text-shadow: 0 3px 6px #9d3154
}

.vip-benefit-grid[data-v-ff936041] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px
}

.vip-benefit[data-v-ff936041] {
    min-height: 118px;
    padding: 14px 5px 10px;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 30px 30px 13px 13px;
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 238, 246, .76), rgba(255, 123, 168, .42));
    box-shadow: inset 0 1px 10px #fff8, 0 7px 16px #b82c6030
}

.vip-benefit-icon[data-v-ff936041] {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    filter: drop-shadow(0 3px 3px #b32b5b42)
}

.vip-benefit h3[data-v-ff936041] {
    margin: 4px 0 5px;
    color: #6c0730;
    font-size: 14px;
    white-space: nowrap
}

.vip-benefit p[data-v-ff936041] {
    margin: 0;
    color: #9d4567;
    font-size: 10px;
    line-height: 1.35
}

.vip-service-note[data-v-ff936041] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 2px 10px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 14px;
    background: rgba(255, 255, 255, .27)
}

.vip-note-icon[data-v-ff936041] {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #f04483, #ff8b65)
}

.vip-service-note strong[data-v-ff936041] {
    font-size: 13px
}

.vip-service-note p[data-v-ff936041] {
    margin: 3px 0 0;
    color: #96536c;
    font-size: 11px
}

.vip-open-panel[data-v-ff936041] {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 2px
}

.vip-open-panel h3[data-v-ff936041] {
    margin: 0 0 4px;
    font-size: 17px
}

.vip-open-panel p[data-v-ff936041] {
    margin: 0;
    color: #843f5b;
    font-size: 11px
}

.vip-open-panel button[data-v-ff936041] {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 0;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, #f44d8b, #ff83a8);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.vip-open-panel button span[data-v-ff936041] {
    margin-left: 5px;
    font-size: 18px;
    vertical-align: -1px
}

.vip-main-action[data-v-ff936041] {
    width: 100%;
    min-height: 50px;
    margin-top: 7px;
    border: 1px solid #ffd9a2;
    border-radius: 25px;
    color: #fff;
    background: linear-gradient(90deg, #eda044, #ffc482);
    box-shadow: inset 0 4px 10px #ffffff57, 0 8px 20px #d65b653b;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer
}

.vip-footer-tip[data-v-ff936041] {
    margin: 11px 0 0;
    text-align: center;
    color: #9f5772;
    font-size: 10px
}

.vip-upgrade-container[data-v-ff936041] {
    border-radius: 12px;
    padding: 12px 0
}

.upgrade-header-section[data-v-ff936041] {
    border-radius: 12px;
    padding: 5px 15px;
    margin: 0 10px 0 15px
}

.vip-open-card[data-v-ff936041] {
    background-image: url(/images/%E7%BB%84%207800@3x.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    padding: 10px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.vip-card-content[data-v-ff936041] {
    text-align: left;
    color: #fff
}

.vip-card-title[data-v-ff936041] {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
    font-family: Alimama ShuHeiTi;
    font-size: 22px;
    padding-left: 10px
}

.vip-card-subtitle[data-v-ff936041] {
    font-size: 11px;
    margin-bottom: 6px;
    padding-left: 10px;
    color: #fff
}

.vip-open-btn[data-v-ff936041] {
    background: #fff;
    color: #333;
    border: none;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all .3s ease;
    align-self: flex-start;
    margin-left: 10px
}

.vip-open-btn[data-v-ff936041]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px #0003
}

.upgrade-header[data-v-ff936041] {
    display: flex;
    align-items: center;
    height: 30px
}

.upgrade-header span[data-v-ff936041] {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    line-height: 30px;
    display: flex;
    align-items: center
}

.rules-intro[data-v-ff936041] {
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
    text-align: left
}

.modal-overlay[data-v-ff936041] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000080;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000
}

.success-modal[data-v-ff936041] {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 264px;
    max-width: 90%;
    box-shadow: 0 10px 25px #00000026
}

.modal-content[data-v-ff936041] {
    padding: 24px;
    text-align: center
}

.modal-title[data-v-ff936041] {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px
}

.modal-subtitle[data-v-ff936041] {
    font-size: 14px;
    color: #ff9c23;
    margin: 0 0 20px
}

.vip-badge[data-v-ff936041] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 12px;
    padding: 12px 20px;
    margin: 0 0 24px
}

.vip-badge img[data-v-ff936041] {
    margin-right: 8px
}

.vip-badge span[data-v-ff936041] {
    color: #333;
    font-size: 24px;
    font-weight: 700
}

.modal-confirm-btn[data-v-ff936041] {
    width: 100%;
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 12px;
    cursor: pointer;
    outline: none
}

.modal-confirm-btn.error[data-v-ff936041] {
    background: linear-gradient(135deg, #ff4757, #ff6b9d)
}

.confirm-modal[data-v-ff936041] {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 280px;
    max-width: 90%;
    box-shadow: 0 10px 25px #00000026
}

.confirm-message[data-v-ff936041] {
    font-size: 15px;
    color: #333;
    margin: 0 0 24px;
    line-height: 1.6;
    text-align: center
}

.confirm-message .highlight[data-v-ff936041] {
    color: #ff4e93;
    font-weight: 700
}

.confirm-message .balance-info[data-v-ff936041] {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    display: inline-block
}

.confirm-buttons[data-v-ff936041] {
    display: flex;
    gap: 12px
}

.modal-cancel-btn[data-v-ff936041] {
    flex: 1;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 25px;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    padding: 12px;
    cursor: pointer;
    outline: none
}

.modal-cancel-btn[data-v-ff936041]:hover {
    background: #e9e9e9
}

.confirm-buttons .modal-confirm-btn[data-v-ff936041] {
    flex: 1
}

.error-modal[data-v-ff936041] {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    width: 264px;
    max-width: 90%;
    box-shadow: 0 10px 25px #00000026
}

.error-message[data-v-ff936041] {
    font-size: 14px;
    color: #666;
    margin: 0 0 24px;
    line-height: 1.5;
    text-align: center
}

.modal-confirm-btn[data-v-ff936041]:hover {
    opacity: .9
}

.rules-container[data-v-ff936041] {
    border-radius: 12px;
    padding-left: 15px;
    text-align: left
}

.rules-title[data-v-ff936041] {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    margin-bottom: 10px;
    text-align: left
}

.rules-content[data-v-ff936041] {
    font-size: 12px;
    color: #161616;
    line-height: 1.6
}

.rule-item[data-v-ff936041] {
    margin-bottom: 5px;
    text-align: left
}

.recharge-container[data-v-5c8007a1] {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 15px;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    position: relative;
    overflow-y: auto
}

.recharge-content[data-v-5c8007a1] {
    background: #fff;
    margin: 0;
    border-radius: 12px;
    padding: 12px 15px 60px;
    min-height: calc(100vh - 120px)
}

.back-navigation[data-v-5c8007a1] {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 20px;
    background-color: transparent
}

.back-button[data-v-5c8007a1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.back-button svg[data-v-5c8007a1] {
    width: 20px;
    height: 20px;
    color: #333
}

.page-title[data-v-5c8007a1] {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.amount-input-section[data-v-5c8007a1] {
    margin-bottom: 20px
}

.input-label[data-v-5c8007a1] {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    font-weight: 500
}

.amount-input-container[data-v-5c8007a1] {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0 15px;
    height: 48px;
    border: 2px solid transparent;
    transition: border-color .2s
}

.amount-input-container.error[data-v-5c8007a1] {
    border-color: #f44;
    background: #fff5f5
}

.amount-input[data-v-5c8007a1] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #333;
    outline: none
}

.amount-input[data-v-5c8007a1]::placeholder {
    color: #999
}

.currency-label[data-v-5c8007a1] {
    font-size: 16px;
    color: #333;
    font-weight: 500
}

.currency-symbol[data-v-5c8007a1] {
    margin-right: 7px;
    color: #f5498e;
    font-size: 21px;
    font-weight: 700
}

.error-message[data-v-5c8007a1] {
    margin-top: 8px;
    font-size: 12px;
    color: #f44;
    line-height: 1.4
}

.quick-amounts[data-v-5c8007a1] {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap
}

.quick-amount-btn[data-v-5c8007a1] {
    flex: 1;
    min-width: 70px;
    height: 36px;
    border: 1px solid #e1e5e9;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all .2s
}

.quick-amount-btn.active[data-v-5c8007a1] {
    border-color: #ff6b9d;
    background: #ffe8ee;
    color: #ff6b9d
}

.quick-amount-btn[data-v-5c8007a1]:hover {
    border-color: #ff6b9d
}

.recharge-step[data-v-5c8007a1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0 12px;
    color: #555;
    font-size: 13px;
    font-weight: 600
}

.recharge-step b[data-v-5c8007a1] {
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #f5498e, #ff8cac);
    font-size: 11px
}

.recharge-method-title[data-v-5c8007a1] {
    margin-bottom: 11px;
    color: #333;
    font-size: 14px;
    font-weight: 600
}

.recharge-methods[data-v-5c8007a1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px
}

.recharge-method[data-v-5c8007a1] {
    position: relative;
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background .2s
}

.recharge-method.active[data-v-5c8007a1] {
    border-color: #f65a94;
    background: #fff7fa
}

.recharge-method-icon[data-v-5c8007a1] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #fff;
    font-size: 19px;
    font-weight: 700
}

.recharge-method-icon.alipay[data-v-5c8007a1] {
    background: #1677ff
}

.recharge-method-icon.wechat[data-v-5c8007a1] {
    background: #07c160
}

.recharge-method-icon.usdt[data-v-5c8007a1] {
    background: #26a17b
}

.recharge-method-copy[data-v-5c8007a1] {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    margin-left: 11px
}

.recharge-method-copy strong[data-v-5c8007a1] {
    color: #333;
    font-size: 14px
}

.recharge-method-copy small[data-v-5c8007a1] {
    color: #999;
    font-size: 11px
}

.recharge-method i[data-v-5c8007a1] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-sizing: border-box
}

.recharge-method.active i[data-v-5c8007a1] {
    border: 5px solid #f5498e
}

.recharge-service-tip[data-v-5c8007a1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 11px;
    border-radius: 10px;
    color: #a15c72;
    background: #fff2f6
}

.recharge-service-tip>span[data-v-5c8007a1] {
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: #f65a94;
    font-size: 11px;
    font-weight: 700
}

.recharge-service-tip p[data-v-5c8007a1] {
    margin: 3px 0 0;
    font-size: 11px;
    line-height: 1.55
}

.recharge-service-tip strong[data-v-5c8007a1] {
    color: #853d58;
    font-size: 12px
}

.recharge-safe-tip[data-v-5c8007a1] {
    margin: -8px 7px 0;
    color: #999;
    text-align: center;
    font-size: 10px;
    line-height: 1.5
}

.confirm-btn[data-v-5c8007a1] {
    width: 100%;
    background: linear-gradient(135deg, #ff6b9d, #ff9ab5);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 15px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all .2s
}

.confirm-btn[data-v-5c8007a1]:hover:not(.disabled) {
    opacity: .9
}

.confirm-btn.disabled[data-v-5c8007a1] {
    background: #ccc;
    cursor: not-allowed;
    opacity: .6
}

.confirm-btn[data-v-5c8007a1]:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: .6
}

.notice[data-v-5c8007a1] {
    text-align: left
}

.notice-text[data-v-5c8007a1] {
    font-size: 12px;
    color: #ff6b9d;
    line-height: 1.4
}

.qr-wrapper[data-v-185d3b05] {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center
}

.payment-container[data-v-09272edc] {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 15px;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    position: relative;
    overflow-y: auto
}

.payment-content[data-v-09272edc] {
    background: #fff;
    margin: 0;
    border-radius: 12px;
    padding: 12px 15px 20px;
    min-height: calc(100vh - 120px)
}

.back-navigation[data-v-09272edc] {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 15px;
    background-color: transparent
}

.back-button[data-v-09272edc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.back-button svg[data-v-09272edc] {
    width: 20px;
    height: 20px;
    color: #333
}

.page-title[data-v-09272edc] {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.payment-info[data-v-09272edc] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px
}

.payment-header[data-v-09272edc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px
}

.payment-method[data-v-09272edc] {
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.payment-method-full[data-v-09272edc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1
}

.user-avatar[data-v-09272edc] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #26d374;
    flex-shrink: 0
}

.avatar-img[data-v-09272edc] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.avatar-placeholder[data-v-09272edc] {
    color: #fff;
    font-size: 14px;
    font-weight: 700
}

.payment-info-text[data-v-09272edc] {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.payment-info-text-full[data-v-09272edc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1
}

.payment-label[data-v-09272edc] {
    font-size: 20px;
    color: #333;
    font-weight: 500;
    line-height: 1.2;
    margin-left: 0
}

.order-amount-text[data-v-09272edc] {
    font-size: 12px;
    color: #f63434;
    font-weight: 500;
    line-height: 1.2
}

.payment-status[data-v-09272edc] {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.countdown[data-v-09272edc] {
    font-size: 12px;
    color: #666;
    line-height: 1.2
}

.time[data-v-09272edc] {
    color: #f44;
    font-weight: 700
}

.payment-status .protocol-info[data-v-09272edc] {
    font-size: 12px;
    color: #666;
    line-height: 1.2
}

.payment-address[data-v-09272edc] {
    margin-top: 8px
}

.address-label[data-v-09272edc] {
    font-size: 15px;
    color: #000;
    margin-bottom: 8px;
    text-align: left;
    line-height: 1.4
}

.amount-highlight[data-v-09272edc] {
    color: #ff428e;
    font-weight: 700;
    font-size: 18px
}

.address-text-container[data-v-09272edc] {
    margin-bottom: 12px;
    padding: 8px 0
}

.address-text[data-v-09272edc] {
    font-size: 14px;
    font-weight: 700;
    word-break: break-all;
    text-align: left;
    line-height: 1.4
}

.address-highlight[data-v-09272edc] {
    color: #f44
}

.address-middle[data-v-09272edc] {
    color: #333;
    font-weight: 400
}

.button-container[data-v-09272edc] {
    display: flex;
    gap: 10px;
    width: 100%
}

.copy-button[data-v-09272edc] {
    flex: 1;
    background: transparent;
    color: #ff428e;
    border: 1px solid #FF428E;
    border-radius: 8px;
    padding: 12px 0;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease
}

.copy-button[data-v-09272edc]:hover {
    background: #ff428e0d
}

.copy-button[data-v-09272edc]:active {
    background: #ff428e1a
}

.paid-button[data-v-09272edc] {
    flex: 1;
    background: #ff428e;
    color: #fff;
    border: 1px solid #FF428E;
    border-radius: 8px;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease
}

.paid-button[data-v-09272edc]:hover {
    background: #e03975;
    border-color: #e03975
}

.paid-button[data-v-09272edc]:active {
    background: #cc3368;
    border-color: #cc3368
}

.qr-outer-wrapper[data-v-09272edc] {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 2px
}

.qr-section-wrapper[data-v-09272edc] {
    background: #f3f2ee;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0
}

.qr-section[data-v-09272edc] {
    text-align: center;
    margin-bottom: 0;
    background: #fff;
    border-radius: 8px;
    padding: 10px
}

.qr-title[data-v-09272edc] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px
}

.qr-container[data-v-09272edc] {
    display: flex;
    justify-content: center;
    margin-bottom: 6px
}

.qr-placeholder[data-v-09272edc] {
    width: 200px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.qr-code-image[data-v-09272edc] {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    background: #fff;
    padding: 5px;
    box-sizing: border-box
}

.qr-code-component[data-v-09272edc] {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center
}

.qr-loading[data-v-09272edc] {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8px;
    color: #666;
    font-size: 14px
}

.qr-subtitle[data-v-09272edc] {
    font-size: 14px;
    color: #666
}

.notice-section[data-v-09272edc] {
    background: #fff9e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 0
}

.notice-title[data-v-09272edc] {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px
}

.notice-list[data-v-09272edc] {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.notice-item[data-v-09272edc] {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    text-align: left
}

.copy-success-toast[data-v-09272edc] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000c;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 1000;
    animation: fadeInOut-09272edc 2s ease-in-out
}

@keyframes fadeInOut-09272edc {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.9)
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.9)
    }
}

.lottery-container[data-v-aeab2c16] {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f5f5;
    min-height: 100vh;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.lottery-container[data-v-aeab2c16]::-webkit-scrollbar {
    display: none
}

[data-v-aeab2c16] {
    scrollbar-width: none;
    -ms-overflow-style: none
}

[data-v-aeab2c16]::-webkit-scrollbar {
    display: none
}

.lottery-content[data-v-aeab2c16] {
    background-image: url(/images/%E7%9F%A9%E5%BD%A2%203828@1x.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px 0 0;
    min-height: calc(100vh - 120px);
    width: 100vw;
    margin: 0;
    box-sizing: border-box
}

.back-navigation[data-v-aeab2c16] {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 0;
    background-color: #fff;
    width: 100vw;
    box-sizing: border-box
}

.back-button[data-v-aeab2c16] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: none;
    border: none
}

.back-button svg[data-v-aeab2c16] {
    width: 20px;
    height: 20px;
    color: #333
}

.page-title[data-v-aeab2c16] {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.top-text[data-v-aeab2c16] {
    font-family: PingFangSC;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 10px;
    color: #ffe4c8;
    text-align: center;
    margin-bottom: 12px;
    padding-top: 10px
}

.main-title[data-v-aeab2c16] {
    font-family: Alimama ShuHeiTi;
    font-size: 35px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0px;
    background: linear-gradient(180deg, #fcf5ea 25%, #ffc55a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0px 2px 1px rgba(0, 0, 0, .302);
    text-align: center;
    margin-bottom: 8px
}

.chance-desc[data-v-aeab2c16] {
    font-family: PingFangSC;
    font-size: 15px;
    font-weight: 400;
    color: #161616;
    text-align: center;
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    background: #fff;
    border-radius: 50px;
    margin-left: auto;
    margin-right: auto;
    height: 32px;
    width: 260px
}

.times-count[data-v-aeab2c16] {
    color: #fe6061;
    font-weight: 700
}

.times-count.zero-times[data-v-aeab2c16] {
    color: #fe6061
}

.wheel-image-container[data-v-aeab2c16] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100vw - 30px);
    max-width: 378px;
    height: calc(100vw - 30px);
    max-height: 378px;
    margin: 5px auto;
    cursor: pointer
}

.lottery-wheel-image[data-v-aeab2c16] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

.rotating-group[data-v-aeab2c16] {
    position: absolute;
    top: calc(50% - 35px);
    left: calc(50% - 40px);
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    transition: transform 3s cubic-bezier(.23, 1, .32, 1);
    z-index: 10
}

.center-circle-image[data-v-aeab2c16] {
    width: 78px;
    height: 78px;
    object-fit: contain;
    display: block
}

.lottery-text[data-v-aeab2c16] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    z-index: 1
}

.pointer-image-attached[data-v-aeab2c16] {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%);
    width: 24px;
    height: 24px;
    object-fit: contain;
    pointer-events: none
}

.prize-labels[data-v-aeab2c16] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5
}

.prize-label[data-v-aeab2c16] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    pointer-events: none
}

.prize-text[data-v-aeab2c16] {
    display: inline-block;
    font-size: 15px;
    color: #f5498e;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, .8);
    min-width: 30px;
    line-height: 1
}

.result-modal[data-v-aeab2c16] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000080;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000
}

.result-content[data-v-aeab2c16] {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 280px;
    width: 90%
}

.result-title[data-v-aeab2c16] {
    font-size: 20px;
    font-weight: 700;
    color: #ff6b6b;
    margin-bottom: 15px
}

.result-prize[data-v-aeab2c16] {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px
}

.result-desc[data-v-aeab2c16] {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px
}

.result-confirm[data-v-aeab2c16] {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s
}

.result-confirm[data-v-aeab2c16]:hover {
    transform: scale(1.05)
}

.error-title[data-v-aeab2c16] {
    font-size: 20px;
    font-weight: 700;
    color: #ff6b6b;
    margin-bottom: 15px
}

.error-message[data-v-aeab2c16] {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5
}

.rules-container[data-v-aeab2c16] {
    padding: 15px;
    margin: 0 0 20px;
    text-align: left
}

.rules-title[data-v-aeab2c16] {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    margin-bottom: 10px;
    text-align: left
}

.rules-content[data-v-aeab2c16] {
    font-size: 12px;
    color: #161616;
    line-height: 1.6
}

.rule-item[data-v-aeab2c16] {
    margin-bottom: 5px;
    text-align: left
}

.wallet-details-container[data-v-b7eae54c] {
    min-height: 100vh;
    background: #fff;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    box-sizing: border-box
}

.header[data-v-b7eae54c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-top: 10px
}

.back-button[data-v-b7eae54c] {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0
}

.back-button svg[data-v-b7eae54c] {
    width: 20px;
    height: 20px;
    color: #fff
}

.title[data-v-b7eae54c] {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    flex-grow: 1;
    text-align: center
}

.balance-amount[data-v-b7eae54c] {
    font-size: 16px;
    font-weight: 600;
    color: #ff6b9d;
    margin: 0
}

.transactions-section[data-v-b7eae54c] {
    background: #fff;
    margin: 0 -20px
}

.transactions-list[data-v-b7eae54c] {
    padding: 0
}

.loading-container[data-v-b7eae54c],
.empty-container[data-v-b7eae54c] {
    padding: 40px 20px;
    text-align: center
}

.loading-text[data-v-b7eae54c],
.empty-text[data-v-b7eae54c] {
    color: #999;
    font-size: 14px
}

.transaction-item[data-v-b7eae54c] {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    transition: background-color .2s
}

.transaction-item[data-v-b7eae54c]:hover {
    background-color: #00000005
}

.transaction-item[data-v-b7eae54c]:last-child {
    border-bottom: none
}

.transaction-left[data-v-b7eae54c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.transaction-date-time[data-v-b7eae54c] {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px
}

.transaction-info[data-v-b7eae54c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.transaction-type-row[data-v-b7eae54c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 335px;
    margin-bottom: 4px
}

.transaction-type[data-v-b7eae54c] {
    font-size: 14px;
    color: #333;
    text-align: left
}

.transaction-status[data-v-b7eae54c] {
    font-size: 14px;
    color: #333;
    text-align: right
}

.status-income[data-v-b7eae54c] {
    color: #ff6b9d
}

.status-expense[data-v-b7eae54c] {
    color: #28a745
}

.transaction-amount-label[data-v-b7eae54c] {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px
}

.transaction-remark[data-v-b7eae54c] {
    font-size: 14px;
    color: #333;
    margin-top: 0;
    line-height: 1.4
}

.loading-more[data-v-b7eae54c] {
    padding: 20px;
    text-align: center
}

.loading-more-text[data-v-b7eae54c] {
    font-size: 14px;
    color: #666
}

.no-more-data[data-v-b7eae54c] {
    padding: 20px;
    text-align: center
}

.no-more-text[data-v-b7eae54c] {
    font-size: 14px;
    color: #999
}

@media (max-width: 480px) {
    .wallet-details-container[data-v-b7eae54c] {
        padding: 16px
    }

    .balance-amount[data-v-b7eae54c] {
        font-size: 28px
    }

    .transaction-item[data-v-b7eae54c] {
        padding: 12px 16px
    }

    .transaction-type[data-v-b7eae54c] {
        font-size: 15px
    }
}

.friend-details-container[data-v-bfcea87c] {
    min-height: 100vh;
    background: #fff;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    box-sizing: border-box
}

.header[data-v-bfcea87c] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center
}

.gradient-section[data-v-bfcea87c] {
    background: linear-gradient(135deg, #f7a9c8, #fbcbb3, #fff);
    margin: -20px -20px 0;
    padding: 20px 20px 0
}

.back-button[data-v-bfcea87c] {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0
}

.back-button svg[data-v-bfcea87c] {
    width: 20px;
    height: 20px;
    color: #fff
}

.title[data-v-bfcea87c] {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: center;
    justify-self: center
}

.revenue-display[data-v-bfcea87c] {
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.stats-cards[data-v-bfcea87c] {
    display: flex;
    gap: 12px;
    margin: 20px 0
}

.stats-card[data-v-bfcea87c] {
    flex: 1;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    height: 80px
}

.invite-card[data-v-bfcea87c] {
    background-image: url(/images/%E7%BB%84%207816@3x.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat
}

.revenue-card[data-v-bfcea87c] {
    background-image: url(/images/%E7%BB%84%207817@3x.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat
}

.card-icon-new[data-v-bfcea87c] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 82px;
    height: 61px;
    display: flex;
    align-items: center;
    justify-content: center
}

.card-icon-new img[data-v-bfcea87c] {
    width: 82px;
    height: 61px;
    object-fit: contain
}

.card-content[data-v-bfcea87c] {
    position: absolute;
    top: 16px;
    left: 16px
}

.card-label[data-v-bfcea87c] {
    font-size: 12px;
    color: #131212;
    margin-bottom: 8px;
    line-height: 1.2
}

.card-value[data-v-bfcea87c] {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.2
}

.tabs-container[data-v-bfcea87c] {
    margin: 20px 0
}

.tabs[data-v-bfcea87c] {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    justify-content: flex-start
}

.tab[data-v-bfcea87c] {
    padding: 12px;
    margin-right: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #131212;
    cursor: pointer;
    position: relative;
    transition: color .2s
}

.tab.active[data-v-bfcea87c] {
    color: #ff6b9d
}

.tab.active[data-v-bfcea87c]:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 12px;
    width: calc(100% - 24px);
    height: 2px;
    background: #ff6b9d
}

.details-section[data-v-bfcea87c] {
    background: #fff;
    margin: 0 -20px
}

.records-list[data-v-bfcea87c] {
    padding: 0
}

.list-header[data-v-bfcea87c] {
    display: flex;
    padding: 12px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    font-size: 14px;
    color: #333;
    font-weight: 700
}

.header-time[data-v-bfcea87c] {
    flex: 1;
    text-align: left
}

.header-friend[data-v-bfcea87c] {
    width: 120px;
    text-align: left
}

.consume-header[data-v-bfcea87c] {
    display: grid;
    grid-template-columns: 130px 75px 65px 65px;
    gap: 6px
}

.consume-header .header-time[data-v-bfcea87c] {
    text-align: left
}

.consume-header .header-friend[data-v-bfcea87c] {
    width: auto;
    text-align: center
}

.consume-header .header-amount[data-v-bfcea87c],
.consume-header .header-commission[data-v-bfcea87c] {
    font-size: 14px;
    color: #333;
    font-weight: 700;
    text-align: center;
    white-space: nowrap
}

.record-item[data-v-bfcea87c] {
    display: flex;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    align-items: center
}

.consume-item[data-v-bfcea87c] {
    display: grid;
    grid-template-columns: 130px 75px 65px 65px;
    gap: 6px;
    align-items: center
}

.record-item[data-v-bfcea87c]:hover {
    background-color: #00000005
}

.record-item[data-v-bfcea87c]:last-child {
    border-bottom: none
}

.record-time[data-v-bfcea87c] {
    flex: 1;
    font-size: 14px;
    color: #333;
    text-align: left
}

.consume-item .record-time[data-v-bfcea87c] {
    flex: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px
}

.record-friend[data-v-bfcea87c] {
    width: 120px;
    font-size: 14px;
    color: #333;
    text-align: left
}

.consume-item .record-friend[data-v-bfcea87c] {
    width: auto;
    text-align: center;
    font-size: 14px
}

.record-amount[data-v-bfcea87c],
.record-commission[data-v-bfcea87c] {
    font-size: 14px;
    color: #333;
    text-align: center
}

.loading-container[data-v-bfcea87c],
.empty-container[data-v-bfcea87c] {
    padding: 40px 20px;
    text-align: center
}

.loading-text[data-v-bfcea87c],
.empty-text[data-v-bfcea87c] {
    color: #999;
    font-size: 14px
}

.loading-more[data-v-bfcea87c] {
    padding: 20px;
    text-align: center
}

.loading-more-text[data-v-bfcea87c] {
    font-size: 14px;
    color: #666
}

.no-more-data[data-v-bfcea87c] {
    padding: 20px;
    text-align: center
}

.no-more-text[data-v-bfcea87c] {
    font-size: 14px;
    color: #999
}

@media (max-width: 480px) {
    .friend-details-container[data-v-bfcea87c] {
        padding: 16px
    }

    .stats-summary[data-v-bfcea87c] {
        font-size: 14px
    }

    .friend-item[data-v-bfcea87c] {
        padding: 12px 16px
    }
}

.fraud-prevention-container[data-v-fa685d6f] {
    position: relative;
    width: 100%;
    max-width: 375px;
    min-height: 100vh;
    background: linear-gradient(135deg, #ffcde0, #f0e8ff);
    margin: 0 auto;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding: 20px 15px
}

.back-navigation[data-v-fa685d6f] {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 20px;
    background-color: transparent
}

.back-button[data-v-fa685d6f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.back-button svg[data-v-fa685d6f] {
    width: 20px;
    height: 20px;
    color: #fff
}

.page-title[data-v-fa685d6f] {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.main-card[data-v-fa685d6f] {
    background: #fffffff2;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px #ff69b426;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.card-header[data-v-fa685d6f] {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.warning-icon[data-v-fa685d6f] {
    display: flex;
    align-items: center;
    margin-right: 10px
}

.warning-icon img[data-v-fa685d6f] {
    display: block
}

.card-title[data-v-fa685d6f] {
    width: 140px;
    height: 44px;
    opacity: 1;
    font-family: YouSheBiaoTiHei, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(90deg, #f5498e, #bf3eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    font-style: italic;
    transform: skew(-8deg)
}

.guide-buttons[data-v-fa685d6f] {
    display: flex;
    flex-direction: column;
    gap: 0
}

.guide-button[data-v-fa685d6f] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: #fff;
    border: none;
    border-radius: 15px 0;
    width: 140px;
    height: 34px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 15px #ff69b44d;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 0;
    z-index: 1;
    position: relative;
    outline: none
}

.guide-button[data-v-fa685d6f]:focus {
    outline: none
}

.guide-button.right-aligned[data-v-fa685d6f] {
    align-self: flex-end
}

.guide-button[data-v-fa685d6f]:hover {
    background: linear-gradient(135deg, #ff1493, #dc143c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #ff69b466
}

.guide-button[data-v-fa685d6f]:active {
    transform: translateY(0)
}

.guide-description[data-v-fa685d6f] {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 15px;
    padding: 16px 18px;
    background: linear-gradient(145deg, #fdf4f7, #fff);
    border-radius: 8px;
    border-left: 4px solid #ff69b4;
    box-shadow: 0 2px 10px #ff69b41a
}

.guide-description .highlight[data-v-fa685d6f] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    padding: 0 2px;
    font-size: 15px
}

.guide-description .warning[data-v-fa685d6f] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 15px
}

.guide-description .danger[data-v-fa685d6f] {
    background: linear-gradient(135deg, #dc143c, #b91c1c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(220, 20, 60, .2)
}

.guide-description .motto[data-v-fa685d6f] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-style: italic;
    position: relative;
    font-size: 15px
}

.guide-description strong[data-v-fa685d6f] {
    color: #ff1493;
    font-weight: 700;
    margin-right: 8px;
    font-size: 15px
}

@media (max-width: 375px) {
    .fraud-prevention-container[data-v-fa685d6f] {
        width: 100%;
        padding: 15px 10px
    }

    .main-card[data-v-fa685d6f] {
        padding: 15px
    }

    .card-title[data-v-fa685d6f] {
        font-size: 18px
    }

    .guide-button[data-v-fa685d6f] {
        font-size: 14px;
        padding: 10px 20px
    }
}

.strength-container[data-v-1aabf481] {
    position: relative;
    width: 100%;
    max-width: 375px;
    min-height: 100vh;
    background: linear-gradient(135deg, #ffcde0, #f0e8ff);
    margin: 0 auto;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding: 20px 15px
}

.back-navigation[data-v-1aabf481] {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 20px;
    background-color: transparent
}

.back-button[data-v-1aabf481] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.back-button svg[data-v-1aabf481] {
    width: 20px;
    height: 20px;
    color: #fff
}

.page-title[data-v-1aabf481] {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.main-card[data-v-1aabf481] {
    background: #fffffff2;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px #ff69b426;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.card-header[data-v-1aabf481] {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.warning-icon[data-v-1aabf481] {
    display: flex;
    align-items: center;
    margin-right: 10px
}

.warning-icon img[data-v-1aabf481] {
    display: block
}

.card-title[data-v-1aabf481] {
    width: 140px;
    height: 44px;
    opacity: 1;
    font-family: YouSheBiaoTiHei, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(90deg, #f5498e, #bf3eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    font-style: italic;
    transform: skew(-8deg)
}

.guide-buttons[data-v-1aabf481] {
    display: flex;
    flex-direction: column;
    gap: 0
}

.guide-button[data-v-1aabf481] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: #fff;
    border: none;
    border-radius: 15px 0;
    width: 140px;
    height: 34px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 15px #ff69b44d;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 0;
    z-index: 1;
    position: relative;
    outline: none
}

.guide-button[data-v-1aabf481]:focus {
    outline: none
}

.guide-button.right-aligned[data-v-1aabf481] {
    align-self: flex-end
}

.guide-button[data-v-1aabf481]:hover {
    background: linear-gradient(135deg, #ff1493, #dc143c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #ff69b466
}

.guide-button[data-v-1aabf481]:active {
    transform: translateY(0)
}

.guide-description[data-v-1aabf481] {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 15px;
    padding: 16px 18px;
    background: linear-gradient(145deg, #fdf4f7, #fff);
    border-radius: 8px;
    border-left: 4px solid #ff69b4;
    box-shadow: 0 2px 10px #ff69b41a
}

.guide-description .highlight[data-v-1aabf481] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    padding: 0 2px;
    font-size: 15px
}

.guide-description .motto[data-v-1aabf481] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-style: italic;
    position: relative;
    font-size: 15px
}

.guide-description strong[data-v-1aabf481] {
    color: #ff1493;
    font-weight: 700;
    margin-right: 8px;
    font-size: 15px
}

@media (max-width: 375px) {
    .strength-container[data-v-1aabf481] {
        width: 100%;
        padding: 15px 10px
    }

    .main-card[data-v-1aabf481] {
        padding: 15px
    }

    .card-title[data-v-1aabf481] {
        font-size: 18px
    }

    .guide-button[data-v-1aabf481] {
        font-size: 14px;
        padding: 10px 20px
    }
}

.beginner-container[data-v-6cea4c38] {
    position: relative;
    width: 100%;
    max-width: 375px;
    min-height: 100vh;
    background: linear-gradient(135deg, #ffcde0, #f0e8ff);
    margin: 0 auto;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding: 20px 15px
}

.back-navigation[data-v-6cea4c38] {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 20px;
    background-color: transparent
}

.back-button[data-v-6cea4c38] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.back-button svg[data-v-6cea4c38] {
    width: 20px;
    height: 20px;
    color: #fff
}

.page-title[data-v-6cea4c38] {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.main-card[data-v-6cea4c38] {
    background: #fffffff2;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px #ff69b426;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.card-header[data-v-6cea4c38] {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.warning-icon[data-v-6cea4c38] {
    display: flex;
    align-items: center;
    margin-right: 10px
}

.warning-icon img[data-v-6cea4c38] {
    display: block
}

.card-title[data-v-6cea4c38] {
    width: 170px;
    height: 44px;
    opacity: 1;
    font-family: YouSheBiaoTiHei, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(90deg, #f5498e, #bf3eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    font-style: italic;
    transform: skew(-8deg)
}

.guide-buttons[data-v-6cea4c38] {
    display: flex;
    flex-direction: column;
    gap: 0
}

.guide-button[data-v-6cea4c38] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: #fff;
    border: none;
    border-radius: 15px 0;
    width: 170px;
    height: 34px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 15px #ff69b44d;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 0;
    z-index: 1;
    position: relative;
    outline: none
}

.guide-button[data-v-6cea4c38]:focus {
    outline: none
}

.guide-button.right-aligned[data-v-6cea4c38] {
    align-self: flex-end
}

.guide-button[data-v-6cea4c38]:hover {
    background: linear-gradient(135deg, #ff1493, #dc143c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #ff69b466
}

.guide-button[data-v-6cea4c38]:active {
    transform: translateY(0)
}

.guide-description[data-v-6cea4c38] {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 15px;
    padding: 16px 18px;
    background: linear-gradient(145deg, #fdf4f7, #fff);
    border-radius: 8px;
    border-left: 4px solid #ff69b4;
    box-shadow: 0 2px 10px #ff69b41a
}

.guide-description .highlight[data-v-6cea4c38] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    padding: 0 2px;
    font-size: 15px
}

.guide-description .important[data-v-6cea4c38] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 15px
}

.guide-description .motto[data-v-6cea4c38] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-style: italic;
    position: relative;
    font-size: 15px
}

.guide-description strong[data-v-6cea4c38] {
    color: #ff1493;
    font-weight: 700;
    margin-right: 8px;
    font-size: 15px
}

@media (max-width: 375px) {
    .beginner-container[data-v-6cea4c38] {
        width: 100%;
        padding: 15px 10px
    }

    .main-card[data-v-6cea4c38] {
        padding: 15px
    }

    .card-title[data-v-6cea4c38] {
        font-size: 18px
    }

    .guide-button[data-v-6cea4c38] {
        font-size: 14px;
        padding: 10px 20px
    }
}

.transaction-container[data-v-205eca0e] {
    position: relative;
    width: 100%;
    max-width: 375px;
    min-height: 100vh;
    background: linear-gradient(135deg, #ffcde0, #f0e8ff);
    margin: 0 auto;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    padding: 20px 15px
}

.back-navigation[data-v-205eca0e] {
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 20px;
    background-color: transparent
}

.back-button[data-v-205eca0e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer
}

.back-button svg[data-v-205eca0e] {
    width: 20px;
    height: 20px;
    color: #fff
}

.page-title[data-v-205eca0e] {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.main-card[data-v-205eca0e] {
    background: #fffffff2;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px #ff69b426;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.card-header[data-v-205eca0e] {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.warning-icon[data-v-205eca0e] {
    display: flex;
    align-items: center;
    margin-right: 10px
}

.warning-icon img[data-v-205eca0e] {
    display: block
}

.card-title[data-v-205eca0e] {
    width: 160px;
    height: 44px;
    opacity: 1;
    font-family: YouSheBiaoTiHei, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(90deg, #f5498e, #bf3eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    font-style: italic;
    transform: skew(-8deg)
}

.guide-buttons[data-v-205eca0e] {
    display: flex;
    flex-direction: column;
    gap: 0
}

.guide-button[data-v-205eca0e] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    color: #fff;
    border: none;
    border-radius: 15px 0;
    width: 160px;
    height: 34px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 15px #ff69b44d;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: 0;
    z-index: 1;
    position: relative;
    outline: none
}

.guide-button[data-v-205eca0e]:focus {
    outline: none
}

.guide-button.right-aligned[data-v-205eca0e] {
    align-self: flex-end
}

.guide-button[data-v-205eca0e]:hover {
    background: linear-gradient(135deg, #ff1493, #dc143c);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #ff69b466
}

.guide-button[data-v-205eca0e]:active {
    transform: translateY(0)
}

.guide-description[data-v-205eca0e] {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: 15px;
    padding: 16px 18px;
    background: linear-gradient(145deg, #fdf4f7, #fff);
    border-radius: 8px;
    border-left: 4px solid #ff69b4;
    box-shadow: 0 2px 10px #ff69b41a;
    position: relative
}

.guide-description .highlight[data-v-205eca0e] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    padding: 0 2px;
    font-size: 15px
}

.guide-description .important[data-v-205eca0e] {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 15px
}

.guide-description .motto[data-v-205eca0e] {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-style: italic;
    position: relative;
    font-size: 15px
}

.guide-description strong[data-v-205eca0e] {
    color: #ff1493;
    font-weight: 700;
    margin-right: 8px;
    font-size: 15px
}

@media (max-width: 375px) {
    .transaction-container[data-v-205eca0e] {
        width: 100%;
        padding: 15px 10px
    }

    .main-card[data-v-205eca0e] {
        padding: 15px
    }

    .card-title[data-v-205eca0e] {
        font-size: 18px
    }

    .guide-button[data-v-205eca0e] {
        font-size: 14px;
        padding: 10px 20px
    }
}

.heart-signal-container[data-v-1c03ebcc] {
    background-color: #f8f8f8;
    min-height: 100vh;
    padding-bottom: 20px;
    overflow: visible
}

.page-header[data-v-1c03ebcc] {
    position: relative;
    padding: 20px 15px;
    margin-bottom: 15px;
    overflow: visible
}

.header-gradient-background[data-v-1c03ebcc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #fbeaed, #f4a8b4);
    z-index: 1
}

.header-left[data-v-1c03ebcc] {
    position: absolute;
    left: 15px;
    top: 20px;
    z-index: 2;
    display: flex;
    align-items: center
}

.header-center-title[data-v-1c03ebcc] {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translate(-50%);
    z-index: 2
}

.back-button[data-v-1c03ebcc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 10
}

.back-button svg[data-v-1c03ebcc] {
    width: 20px;
    height: 20px;
    color: #fff
}

.header-center[data-v-1c03ebcc] {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding-top: 40px;
    pointer-events: none
}

.page-title[data-v-1c03ebcc] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: center
}

.matching-section[data-v-1c03ebcc] {
    padding: 0 15px;
    overflow: visible
}

.top-content-block[data-v-1c03ebcc] {
    position: relative;
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 4px 12px #0000001a;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center
}

.bottom-content-block[data-v-1c03ebcc] {
    position: relative;
    padding: 0 20px;
    text-align: center;
    min-height: 120px;
    overflow: visible
}

.gradient-background[data-v-1c03ebcc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, #fbeaed, #f4a8b4);
    z-index: 1
}

.gradient-background[data-v-1c03ebcc]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, .3) 1px, transparent 1px), radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .2) 1px, transparent 1px), radial-gradient(circle at 25% 75%, rgba(255, 255, 255, .25) 1px, transparent 1px), radial-gradient(circle at 75% 85%, rgba(255, 255, 255, .2) 1px, transparent 1px), radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .15) 1px, transparent 1px), radial-gradient(circle at 10% 50%, rgba(255, 255, 255, .2) 1px, transparent 1px), radial-gradient(circle at 90% 50%, rgba(255, 255, 255, .25) 1px, transparent 1px), radial-gradient(circle at 50% 90%, rgba(255, 255, 255, .15) 1px, transparent 1px);
    background-size: 50px 50px, 60px 60px, 40px 40px, 55px 55px, 45px 45px, 35px 35px, 65px 65px, 30px 30px;
    pointer-events: none
}

.left-figure[data-v-1c03ebcc],
.right-figure[data-v-1c03ebcc] {
    position: absolute;
    z-index: 3;
    width: 120px;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    top: -30px
}

.left-figure[data-v-1c03ebcc] {
    left: -40px
}

.right-figure[data-v-1c03ebcc] {
    right: -40px
}

.left-figure img[data-v-1c03ebcc],
.right-figure img[data-v-1c03ebcc] {
    width: 120px;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 50%
}

.center-area[data-v-1c03ebcc] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    color: #fff;
    position: relative;
    z-index: 2
}

.main-title[data-v-1c03ebcc] {
    font-family: ZCOOL QingKe HuangYou;
    font-size: 26px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0px;
    margin-bottom: 8px;
    pointer-events: none;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(0deg, #ec6176, #f88b9e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.message-bubble[data-v-1c03ebcc] {
    background-color: #f994a5;
    border: 2px solid #f1687b;
    border-radius: 15px;
    padding: 6px 12px;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px #00000026;
    position: relative;
    pointer-events: none
}

.bubble-icon[data-v-1c03ebcc] {
    width: 42px;
    height: 44px;
    position: absolute;
    left: -29px;
    top: 20%;
    transform: translateY(-50%);
    z-index: 1
}

.slogan-text[data-v-1c03ebcc] {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .2)
}

.rules-info[data-v-1c03ebcc] {
    font-size: 14px;
    color: #ffa6b4;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 8px
}

.rule-item[data-v-1c03ebcc] {
    margin-bottom: 4px
}

.start-matching-btn-wrapper[data-v-1c03ebcc] {
    cursor: pointer;
    transition: all .3s ease;
    width: 55%;
    max-width: 220px;
    margin: 0 auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .2))
}

.start-matching-btn-wrapper[data-v-1c03ebcc]:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3))
}

.start-matching-btn-image[data-v-1c03ebcc] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 25px
}

.history-section[data-v-1c03ebcc] {
    margin-top: 15px;
    padding: 0 15px;
    border: 5px solid rgba(153, 151, 152, .2)
}

.history-header[data-v-1c03ebcc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.history-title[data-v-1c03ebcc] {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    padding: 3px 12px 3px 18px;
    background-image: url(/images/%E7%BB%84%20235.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px
}

.rules-link[data-v-1c03ebcc] {
    font-size: 14px;
    color: #666;
    cursor: pointer;
    font-weight: 500;
    padding: 4px 8px;
    transition: all .2s ease
}

.rules-link[data-v-1c03ebcc]:hover {
    opacity: .8
}

.rules-link[data-v-1c03ebcc]:active {
    transform: scale(.95)
}

.woman-grid[data-v-1c03ebcc] {
    display: grid;
    grid-template-columns: repeat(2, 171px);
    gap: 15px;
    justify-content: center;
    padding: 10px
}

.woman-card[data-v-1c03ebcc] {
    width: 171px;
    margin-bottom: 0;
    border-radius: 8px;
    overflow: visible;
    background-color: #fff;
    box-shadow: 0 1px 3px #0000001a;
    border: 1px solid rgba(245, 73, 142, .2)
}

.woman-card .image-container[data-v-1c03ebcc] {
    overflow: hidden
}

.image-container[data-v-1c03ebcc] {
    position: relative;
    width: 100%;
    height: 171px;
    background-color: #000
}

.woman-image[data-v-1c03ebcc] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.heart-icon[data-v-1c03ebcc] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.location-overlay[data-v-1c03ebcc] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000000b3;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 12px
}

.location-left[data-v-1c03ebcc],
.location-right[data-v-1c03ebcc] {
    display: flex;
    align-items: center;
    gap: 4px
}

.discount-tag[data-v-1c03ebcc] {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ffc107;
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 700;
    z-index: 2
}

.discount-badge[data-v-1c03ebcc] {
    position: absolute;
    right: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
    background-image: url(/images/%E7%81%AB.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 36px;
    min-width: 36px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none
}

.countdown-badge[data-v-1c03ebcc] {
    position: absolute;
    top: 30px;
    right: 0;
    background: #ffd84d;
    color: #d62828;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 12px;
    box-shadow: 0 1px 2px #00000014;
    z-index: 9
}

.info-section[data-v-1c03ebcc] {
    position: relative;
    padding: 6px 2px 2px;
    overflow: visible
}

.info-row[data-v-1c03ebcc] {
    display: flex;
    height: 20px;
    margin: 0;
    border-radius: 4px;
    overflow: visible
}

.info-bar[data-v-1c03ebcc] {
    width: 87px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    font-size: 11px;
    padding: 0 4px
}

.age-cup[data-v-1c03ebcc] {
    background-color: #f5498e;
    color: #fff;
    border-radius: 10px 0 8px 10px;
    width: 135px;
    height: 20px;
    margin-left: 0;
    position: relative;
    z-index: 1
}

.measurements[data-v-1c03ebcc] {
    background-color: #f9b5d0;
    font-weight: 700;
    color: #f5498e;
    width: 150px;
    height: 20px;
    border-radius: 0 0 8px;
    opacity: 1;
    position: relative
}

.measurements[data-v-1c03ebcc]:before {
    content: "";
    position: absolute;
    left: -8px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #f9b5d0
}

.sep[data-v-1c03ebcc] {
    opacity: .6
}

.age-icon[data-v-1c03ebcc] {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 28px;
    height: 28px;
    z-index: 3;
    padding: 2px;
    box-sizing: border-box
}

.service-tags[data-v-1c03ebcc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 8px 0
}

.service-tag[data-v-1c03ebcc] {
    color: #fff;
    background-color: #f9b5d0;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    border: none;
    white-space: nowrap
}

.loading-state[data-v-1c03ebcc] {
    text-align: center;
    padding: 40px 20px
}

.loading-spinner[data-v-1c03ebcc] {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #F5498E;
    border-radius: 50%;
    animation: spin-1c03ebcc 1s linear infinite;
    margin: 0 auto 15px
}

@keyframes spin-1c03ebcc {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.loading-state p[data-v-1c03ebcc] {
    color: #666;
    font-size: 14px
}

.error-state[data-v-1c03ebcc] {
    text-align: center;
    padding: 40px 20px
}

.error-state p[data-v-1c03ebcc] {
    color: #e74c3c;
    font-size: 14px;
    margin-bottom: 15px
}

.retry-btn[data-v-1c03ebcc] {
    background-color: #f5498e;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .3s ease
}

.retry-btn[data-v-1c03ebcc]:hover {
    background-color: #d63a7a
}

.empty-state[data-v-1c03ebcc] {
    text-align: center;
    padding: 40px 20px
}

.empty-state p[data-v-1c03ebcc] {
    color: #999;
    font-size: 14px;
    line-height: 1.5
}

.rules-modal[data-v-1c03ebcc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
    padding: 5vh 0
}

.rules-overlay[data-v-1c03ebcc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000080
}

.rules-content[data-v-1c03ebcc] {
    position: relative;
    width: 80%;
    max-width: 320px;
    max-height: 90vh;
    background-color: #fff;
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
    touch-action: pan-y;
    box-shadow: 0 8px 32px #0000004d
}

.rules-content[data-v-1c03ebcc]::-webkit-scrollbar {
    display: none
}

.rules-content[data-v-1c03ebcc] {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.rules-header[data-v-1c03ebcc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: linear-gradient(180deg, #ffd7e7, #fff);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px
}

.rules-title[data-v-1c03ebcc] {
    font-size: 18px;
    font-weight: 700;
    color: #333
}

.rules-body[data-v-1c03ebcc] {
    padding: 20px
}

.rule-item-text[data-v-1c03ebcc] {
    font-size: 14px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 1px;
    text-align: left
}

.rule-item-text[data-v-1c03ebcc]:last-child {
    margin-bottom: 0
}

.rules-actions[data-v-1c03ebcc] {
    padding: 15px 20px 20px;
    border-top: 1px solid #eee
}

.rules-confirm-btn[data-v-1c03ebcc] {
    width: 100%;
    padding: 12px;
    background: #f5498e;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease
}

.rules-confirm-btn[data-v-1c03ebcc]:hover {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px #f5498e4d
}

.rules-confirm-btn[data-v-1c03ebcc]:active {
    transform: translateY(0)
}

.history-load-more[data-v-1c03ebcc] {
    display: flex;
    justify-content: center;
    margin: 15px 0 5px
}

.load-more-btn[data-v-1c03ebcc] {
    padding: 10px 28px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(90deg, #ff4f9e, #ff7eb8);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 16px #ff4f9e40;
    transition: opacity .2s ease, transform .2s ease
}

.load-more-btn[data-v-1c03ebcc]:disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none
}

.load-more-btn[data-v-1c03ebcc]:not(:disabled):active {
    transform: translateY(1px)
}

.limit-modal[data-v-1c03ebcc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200
}

.limit-overlay[data-v-1c03ebcc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080
}

.limit-content[data-v-1c03ebcc] {
    position: relative;
    width: 80%;
    max-width: 320px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    z-index: 1201;
    box-shadow: 0 12px 30px #ff4f9e40
}

.limit-title[data-v-1c03ebcc] {
    font-size: 18px;
    font-weight: 600;
    color: #ff4f9e;
    margin-bottom: 12px
}

.limit-message[data-v-1c03ebcc] {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: pre-line
}

.limit-confirm-btn[data-v-1c03ebcc] {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff4f9e, #ff7eb8);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s ease
}

.limit-confirm-btn[data-v-1c03ebcc]:active {
    opacity: .8
}

.publish-post-page[data-v-84175f36] {
    min-height: 100vh;
    background: #f5f5f5
}

.header[data-v-84175f36] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 10
}

.back-button[data-v-84175f36] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.back-button svg[data-v-84175f36] {
    width: 20px;
    height: 20px;
    color: #000
}

.header-title[data-v-84175f36] {
    font-size: 18px;
    font-weight: 600;
    color: #333
}

.publish-button[data-v-84175f36] {
    padding: 8px 16px;
    background: #ff69b4;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none
}

.publish-button[data-v-84175f36]:disabled {
    background: #ccc;
    cursor: not-allowed
}

.content-area[data-v-84175f36] {
    padding: 20px 15px 100px
}

.text-input-section[data-v-84175f36] {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    position: relative
}

.content-header[data-v-84175f36] {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.content-label[data-v-84175f36] {
    font-size: 16px;
    font-weight: 600;
    color: #333
}

.char-count[data-v-84175f36] {
    font-size: 14px;
    color: #999;
    margin-left: 8px
}

.content-textarea[data-v-84175f36] {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background: transparent;
    padding: 0
}

.content-textarea[data-v-84175f36]::placeholder {
    color: #999
}

.char-counter[data-v-84175f36] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 12px;
    color: #999
}

.image-upload-section[data-v-84175f36] {
    background: #fff;
    border-radius: 12px;
    padding: 15px
}

.upload-title[data-v-84175f36] {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px
}

.image-grid[data-v-84175f36] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.image-item[data-v-84175f36] {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden
}

.uploaded-image[data-v-84175f36] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.remove-button[data-v-84175f36] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: #00000080;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.add-image-button[data-v-84175f36] {
    aspect-ratio: 1;
    border: 2px dashed #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fafafa;
    transition: all .3s ease
}

.add-image-button[data-v-84175f36]:hover {
    border-color: #ff69b4;
    background: #fff5f8
}

.add-text[data-v-84175f36] {
    font-size: 14px;
    color: #666;
    font-weight: 500
}

.bottom-publish-section[data-v-84175f36] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 10
}

.bottom-publish-section .publish-button[data-v-84175f36] {
    width: 100%;
    padding: 15px;
    background: #f5498e;
    color: #fff;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center
}

.bottom-publish-section .publish-button[data-v-84175f36]:disabled {
    background: #ccc;
    cursor: not-allowed
}

.modal-overlay[data-v-84175f36] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0009;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999
}

.modal-card[data-v-84175f36] {
    width: 82%;
    max-width: 360px;
    background: #fff;
    border-radius: 12px;
    padding: 18px 16px 14px;
    text-align: center
}

.modal-title[data-v-84175f36] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px
}

.modal-sub[data-v-84175f36] {
    font-size: 14px;
    color: #888;
    margin-bottom: 14px
}

.modal-actions[data-v-84175f36] {
    display: flex;
    gap: 12px;
    justify-content: center
}

.modal-actions.single[data-v-84175f36] {
    margin-top: 14px
}

.btn[data-v-84175f36] {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer
}

.btn-cancel[data-v-84175f36] {
    background: #eee;
    color: #999
}

.btn-confirm[data-v-84175f36] {
    background: #f5498e;
    color: #fff
}

.video-access-modal {
    position: fixed;
    inset: 0;
    z-index: 20010;
    background: #0008;
    display: grid;
    place-items: center;
    padding: 16px
}

.video-access-card {
    position: relative;
    width: min(420px, 100%);
    max-height: min(86vh, 740px);
    overflow: auto;
    background: #fff;
    border-radius: 18px;
    padding: 20px 16px 16px;
    box-shadow: 0 16px 40px #0003
}

.video-access-card h3 {
    margin: 0 28px 8px 0;
    font-size: 18px
}

.video-access-lead {
    margin: 0 0 14px;
    color: #777;
    font-size: 13px;
    line-height: 1.6
}

.video-access-actions {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.video-access-btn {
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    cursor: pointer
}

.video-access-btn.vip {
    background: linear-gradient(135deg, #ff4a8d, #f462b7);
    color: #fff
}

.video-access-btn.free {
    background: #fff4f8;
    color: #d12d6c;
    border: 1px solid #ffd0e0
}

.video-access-btn:disabled {
    opacity: .45;
    cursor: not-allowed
}

.video-learn-block {
    margin: 12px 0;
    padding: 12px;
    border-radius: 12px;
    background: #faf7f8
}

.video-learn-block h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #c2185b
}

.video-learn-simple {
    margin: 0;
    color: #444;
    font-size: 13px;
    line-height: 1.75
}

.video-learn-steps {
    margin: 0;
    padding-left: 18px;
    color: #444;
    font-size: 13px;
    line-height: 1.7
}

.video-access-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 28px 8px 0
}

.video-learn-head-timer {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff1f6;
    color: #e6387a;
    font-size: 13px;
    font-weight: 700
}

.video-learn-timer {
    display: none
}

.video-access-error {
    min-height: 18px;
    margin: 6px 0 0;
    color: #c62828;
    font-size: 12px
}

.video-choice-card {
    padding: 28px 20px 20px;
    text-align: center;
    background: linear-gradient(180deg, #fff7fa 0%, #fff 46%)
}

.video-choice-icon {
    width: 56px;
    height: 56px;
    margin: 4px auto 14px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #ff4a8d, #f462b7);
    color: #fff;
    box-shadow: 0 8px 18px #f5498e33
}

.video-choice-icon svg {
    display: block;
    margin-left: 2px
}

.video-access-btn.free em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: #e07aa0
}

.video-view-btn {
    margin-top: 2px;
    border: 0;
    border-radius: 999px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #ff4a8d, #f462b7);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    pointer-events: auto;
    box-shadow: 0 6px 16px #d9257066
}

.video-section,
.video-grid {
    max-width: 100%;
    overflow: hidden
}

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

.video-item {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 5px;
    background: #111
}

.video-item .video-image,
.video-item video.video-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover
}