:root {
    --main-theme: #600AFF;
    --main-theme-dark: #3707b7;
    --main-theme-bg: rgba(55,10,180,0.8);
    --main-theme-light: #7541ff;
    --main-theme-light1: #875bfc;
    --vip-color: #FFBA3A;
    --vip-color2: #e8973c;
    --vip-color3: rgba(232, 163, 32, 0.7);
    --primary-color: #000;
    --color-surface-container: #000;
    --color-surface-container-high: #000;
    --ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
    --ripple-color: rgba(255, 255, 255, 0.3);
    --border-color: rgba(255, 255, 255, 0.03);
    --border-color1: rgba(255, 255, 255, 0.07);

    --color-body: rgba(0, 0, 0, 1);
    --color-page: rgba(16, 16, 16, 1);
    --color-pop: rgba(30, 30, 30, 1);
    --color-card: rgba(166, 166, 166, 0.2);
    --color-bottom-bar: rgba(20, 20, 20, 1);

    --card0: rgba(80, 80, 80, 0.1);
    --card1: rgba(100, 100, 100, 0.1);
    --card2: rgba(200, 200, 200, 0.5);
    --card3: rgba(30, 30, 30,0.3);
    --card4: rgba(40, 40, 40);
    --card5: rgba(60, 60, 60);
    --card6: rgba(60, 60, 60,0.3);
    --card7: rgba(30, 30, 30, 0.6);
    --card8: rgba(30, 30, 30, 0.4);
    --card9: rgba(0, 0, 0, 0.4);
    --card10: rgba(20, 20, 20,1);
    --card11: rgba(88, 88, 88,0.5);

    --avatar-bg: rgba(120, 54, 255, 0.2);
    --font-color-focus0: rgba(240, 240, 240, 0.9);
    --font-color-focus: rgba(240, 240, 240, 0.85);
    --font-color-focus1: rgba(240, 240, 240, 0.65);
    --font-color-focus2: rgba(255, 255, 255, 0.6);
    --font-color-hint: rgba(220, 220, 220, 0.55);
    --font-color-hint1: rgba(220, 220, 220, 0.4);
    --font-color-hint2: rgba(220, 220, 220, 0.35);
    --font-color-place: rgba(220, 220, 220, 0.2);
    --font-color-link: #4f95ff;

    --border1: solid 0.5px var(--border-color);
    --border2: solid 0.5px var(--border-color1);

    --shadow1: rgba(120, 120, 120, 0.1);
    --record-height: 16px;

    /*fontsize*/
    --tips-font-size: 0.75rem;
    /**varlet css**/
    --color-primary: var(--main-theme);
    --cell-color: var(--font-color-focus);
    --field-decorator-blur-color: transparent;
    --field-decorator-placeholder-color: var(--font-color-place);
    --field-decorator-text-color: var(--font-color-focus);
    --field-decorator-line-border-radius: 8px;
    --button-normal-height: 52px !important;
    --color-disabled: var(--card2);
    --color-text-disabled: var(--font-color-focus);
    --color-on-primary: var(--font-color-focus);
    --button-border-radius: 10px;
    --color-outline: transparent;
    --color-info: rgba(62, 28, 183, 0.9);
    --color-warning: rgba(182, 90, 14, 0.9);
    --color-success: rgba(0, 0, 0, 0.9);
    --color-danger: rgba(183, 28, 28, 0.9);
    --color-fail: rgb(176, 37, 37);
    --color-hot: rgb(255, 18, 18);
    --color-text: var(--font-color-hint);
    --popup-overlay-background-color: rgba(8, 12, 26, 0.8);
    --countdown-text-font-size: 14px;
    --dialog-background: var(--color-body);
    --dialog-border-radius: 12px;
    --bottom-navigation-height: 3.5rem;
    --divider-color: rgba(60, 60, 60, 0.1);
    --divider-text-color: var(--font-color-hint2);
    --button-default-color: var(--card5);
    --button-default-text-color: var(--font-color-focus);
    --dialog-title-color: var(--font-color-focus);
    --dialog-message-color: var(--font-color-hint);
    --dialog-cancel-button-color: var(--main-theme-light);
    --dialog-confirm-button-color: var(--main-theme-light);
    --snackbar-border-radius: 8px;
    --snackbar-content-padding: 12px 14px;
    --picker-background: var(--primary-color);
    --picker-option-text-color: var(--font-color-focus);
    --picker-mask-background-image: linear-gradient(180deg, rgba(0,0,0,0.9),  rgba(0,0,0,0.7)),
    linear-gradient(0deg, rgba(0,0,0,0.9),  rgba(0,0,0,0.7));
    --picker-confirm-button-text-color: var(--main-theme-light);
    --badge-content-padding: 2px 0px;
    --avatar-background-color: var(--card4);
    --font-size-md: 14px;
    --select-label-font-size: 15px;
    --option-font-size: 15px;
    --uploader-action-background: var(--color-pop);
    --uploader-file-border-radius: 4px;
    --uploader-file-cover-background: transparent;
    --uploader-file-close-background: transparent;
    --uploader-file-name-background: transparent;
    --uploader-file-indicator-normal-color: transparent;
    --checkbox-checked-color: var(--main-theme-light1);
    --uploader-file-size: 64px;
    --uploader-file-margin: 0 10px 10px 0;
    --badge-danger-color: #d20e0e;
    --pull-refresh-background: var(--card4);
    --pull-refresh-color: var(--main-theme-light1);
    --pull-refresh-success-color: #0a8e0a;
    --uploader-file-close-icon-font-size: 18px;
    --back-top-button-size: 48px;
    --date-picker-body-background-color: var(--color-pop);
    --date-picker-header-color: var(--font-color-focus);
    --date-picker-main-color: var(--font-color-focus1);
    --day-picker-head-item-color: var(--font-color-focus1);
    --bottom-navigation-background-color: var(--color-bottom-bar);
    --bottom-navigation-item-active-background-color: var(--color-bottom-bar);
    --radio-text-color: var(--font-color-focus);
    --tab-inactive-color:rgba(255, 255, 255, 0.4);
    --tabs-background:transparent;
    --tab-active-color:var(--main-theme-light1);
    --tabs-indicator-background:var(--main-theme-light1);
    --card-board: rgb(12, 14, 16);
    --avatar-group-offset:-8px;
    --tab-font-size:1.3rem;
    --tab-font-weight: 500;
    --tab-active-font-size: 1.3rem;
    --tab-active-font-weight: 700;
    --tabs-indicator-size:4px;
    --tabs-item-horizontal-height:52px;
    --snackbar-width:unset;
    --checkbox-text-color: var(--font-color-hint1);
    --checkbox-action-padding:3px;
}

.module {
    flex: 1;
    border-radius: 12px;
    box-sizing: border-box;
    height: 70px;
    padding: 0 12px !important;
    justify-content: flex-start;
}
.basePop {
    min-width: 320px;
    max-height: 95%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #000;
    box-shadow: 0 0 10px 2px rgba(200, 200, 200, 0.05);
}

.var-dialog__popup[var-dialog-cover]{
    box-shadow: 0 0 10px 2px rgba(200, 200, 200, 0.05);
}
.common-tip {
    font-size: var(--tips-font-size);
    color: var(--font-color-place);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
}

.all-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

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

.column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.row-center {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.gap4{
    gap: 4px;
}
.gap8{
    gap: 8px;
}
.gap12{
    gap: 12px;
}
.gap16{
    gap: 16px;
}
.pointer{
    cursor: pointer;
}
.row-center-space {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.var-field-decorator--outlined .var-field-decorator__controller {
    background-color: var(--card1);
    border-radius: 8px;
}

.font-title-large {
    font-weight: 500;
    font-size: 28px;
    color: var(--font-color-focus);
}

.font-title-medium {
    font-weight: 500;
    font-size: 20px;
    color: var(--font-color-focus);
}

.font-title-small {
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--font-color-focus);
    white-space: nowrap;
}

.font-title-mini {
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--font-color-focus);
    white-space: nowrap;
}

.font-title-small1 {
    font-weight: 600;
    font-size: 0.96rem;
    color: #fff;
}

.font-body-hint-medium {
    font-size: 0.92rem;
    color: var(--font-color-hint);
    white-space: nowrap;
}

.font-body-hint-small {
    font-size: 0.88rem;
    color: var(--font-color-hint);
}

.font-body-hint-mini {
    font-size: 0.8rem;
    color: var(--font-color-hint);
}

.font-body-focus-medium {
    font-size: 0.92rem;
    color: var(--font-color-focus);
}

.font-body-focus-small {
    font-size: 0.88rem;
    color: var(--font-color-focus);
}

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

.var-avatar--bordered {
    border: 1px solid var(--font-color-place);
}

.var-divider--with-text {
    font-size: var(--tips-font-size) !important;
}

.var-form-details {
    display: none !important;
}

.var-bottom-navigation-item {
    padding: 8px 12px 8px;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 111111s;
    -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
}

.tagText {
    font-size: 0.7rem;
    line-height: 0.7rem;
    padding: 4px 10px 5px 10px;
    margin: 0 4px 10px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: var(--main-theme-dark);
    color: var(--font-color-focus1);
}

.tag-border {
    font-size: 0.6rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: rgba(220, 220, 220, 0.35);
    padding: 3px 4px 3px 4px;
    margin: 4px 4px;
    border: 1px solid rgba(220, 220, 220, 0.25);
    width: -moz-fit-content;
    width: fit-content;
}

.tag-fill {
    font-size: 0.5rem;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    color: rgba(220, 220, 220, 0.6);
    padding: 3px 5px 3px 5px;
    margin: 4px 4px;
    background-color: rgba(220, 220, 220, 0.15);
    width: -moz-fit-content;
    width: fit-content;
}


.chatAvatarContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    background-color: var(--card2);
}

.var-elevation--4 {
    box-shadow: none !important;
}

.var-snackbar__content {
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
    text-align: center;
}

.var-snackbar__action {
    display: none;
}

.var-divider--with-text {
    font-size: 13px;
}

.var-badge__content {
    line-height: 1;
    font-size: 0.55rem;
    font-weight: 600;
    height: 15px;
    padding: 0 3px 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.var-badge--danger {
    min-width: 15px;
    color: var(--font-color-focus);
}

.var-badge--dot {
    height: 6px !important;
    width: 6px !important;
    padding: 0 !important;
}

.var-swipe__indicator {
    width: 6px;
    height: 6px;
}
.var-tabs--layout-horizontal-indicator-inner {
    width: 30px;
    height: 100%;
    border-radius: 4px;
}
.var-tooltip__content-container {
    text-align: unset;
}


.var-radio__wrap{
    margin: 6px 0;
}
.var-button--info{
    font-weight:600;
    color:#000;
}

.var-snackbar__wrapper{
    max-width: 240px;
    display: unset;
    background-color: rgba(10, 10, 10,0.7);
    font-size: 0.8rem;
    color: var(--font-color-focus);
    line-height: 1.5;
    box-shadow: 2px 2px 12px rgba(55, 55, 55, 0.2) !important;
}
.var-form-details {
    display: none !important;
}
.var-radio__text {
    color: var(--font-color-focus0);
    font-size: 0.85rem;
}
.var-image-preview__image {
    color: transparent;
}

.var-list__finished {
    font-size: 13px;
    color: var(--font-color-hint);
}

.var-date-picker__title {
    border-radius: 12px;
}

.sourceTag {
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 3px 4px 3px 4px;
    color: var(--font-color-focus);
    line-height: 0.55rem;
}

.cantClip{
    -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none;    /* Firefox */    /* Internet Explorer/Edge */
    user-select: none;
}

.onlinePoint{
    width: 6px;height: 6px;border-radius: 6px;background-color: #15ef15;margin:0 4px
}

.icon_container {
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px
}
.divider-split {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 40px 0;
    color:rgba(122, 122, 122, 0.8);
    font-size: 0.7rem;
    &::before,
    &::after {
        margin: 0 12px;
        content: "";
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: rgba(122, 122, 122, 0.4);
    }
}
.var-snackbar{
    top: 60% !important;
}
.var-popup__overlay{
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.refresh-button {
    padding: 20px 0 40px 0;
    font-size: 0.75rem;
    color: var(--font-color-place);
    text-align: center;
    cursor: pointer;
}

.pop-title {
    padding: 0 4px 12px 4px;
    width: 100%;
    font-size: 1.1rem;
    color: var(--font-color-focus);
    font-weight: 500;
}

.wideMode {
    border-radius: 20px;
    width: 420px;
    min-height: 900px;
    max-height: 920px;
    background-color: var(--card-board);
}

.mobileMode {
    width: 100%;
    height: 100%;
    background-color: var(--card-board);
}
.bottle-record-button {
    width: 28px;
    height: 28px;
    margin-right: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottle-expose-button {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottle-image-button {
    width: 20px;
    margin-right: 12px;
}

.bottle-emote-button {
    width: 20px;
}

.button_send_button {
    border-radius: 52px;
    height: 32px;
    width: 66px;
    font-size: 0.7rem;
    line-height: 1;
}
.rocket{position:absolute;animation:rocket-exit 16s;z-index:0;width:0;-webkit-animation:rocket-exit 16s;animation-iteration-count:1;-webkit-animation-iteration-count:1}@keyframes rocket-exit{from{left:-4rem;width:2rem;top:20rem}to{left:100%;width:0rem;top:3rem}}

.voice-bg {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;
  width: 16px;
  height: 16px;
  background-size: 400%;
}
.voice-play {
  animation-name: voicePlay;
  animation-duration: 1.5s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}
@keyframes voicePlay {
0% {
    background-position: 0;
}
100% {
    background-position: 100%;
}
}



.audioContainer[data-v-0ab6985a] {
  max-width: 60%;
  min-width: 5rem;
  height: 38px;
  border-radius: 3rem;
  padding: 0 6px;
  box-sizing: border-box;
  color: var(--font-color-focus);
  display: flex;
  align-items: center;
}
.receive[data-v-0ab6985a] {
  background: var(--color-card);
  justify-content: flex-start;
}
.send[data-v-0ab6985a] {
  background: var(--main-theme);
  justify-content: flex-end;
}
.icon-wrap[data-v-0ab6985a] {
  width: 28px;
}
.time-text[data-v-0ab6985a] {
  font-size: 14px;
  margin-bottom: 2px;
}


.mediaContent {
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  background-color: var(--card8);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: 8rem;
}
.mediaBackground {
  background-size: cover;
  width: 100%;
  background-position: center;
  filter: blur(6px);
  height: 100%;
  clip-path: inset(0 round 8px);
  border-radius: 8px;
}
.mediaTag {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center
}
.smallContent{
  width: 64px;
  height: 64px;
  min-height: 64px;
}


.play-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  height: 20px;
  width: 20px;
}



.item-wrap[data-v-65905802] {
  width: 100%;
  display: flex;
}
.nick[data-v-65905802] {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--font-color-focus2);
  white-space: nowrap;
}
.info[data-v-65905802] {
  line-height: 1;
  margin-bottom: 2px;
  font-size: 0.7rem;
  color: var(--font-color-hint2);
  display: flex;
  align-items: center;
  gap: 4px;
}


.snsContent{
  font-size: 14px;
  color: var(--font-color-focus);
  margin: 8px 0 12px 0;
}


.emoji-text-render[data-v-4a7ec63a] {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  line-height: 1.6;
  font-size: inherit;
}
.render-emoji[data-v-4a7ec63a] {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  -o-object-fit: contain;
     object-fit: contain;
  display: inline-block;
  margin: 0;
  transform: translateY(1px);
}

.bottleContent[data-v-237775e5]{background-color:var(--card10);min-height:100px;padding:20px 20px 14px 20px;display:flex;flex-direction:column;width:100%;border-radius:16px;margin-bottom:12px}.bottleText[data-v-237775e5]{max-height:300px;overflow-y:auto;padding:0 8px;overflow-x:hidden;box-sizing:border-box;color:var(--font-color-focus2);font-weight:500;font-size:.9rem;border-radius:12px;word-wrap:break-word}.bottle_find_input[data-v-237775e5]{width:100%;position:relative;padding:12px 16px;font-size:14px;transition:all .3s;background-color:#141414;outline:none;color:var(--font-color-focus);white-space:pre-wrap;word-break:break-all;overflow:auto;-webkit-overflow-scrolling:touch;cursor:text;min-height:32px;height:100px;border-radius:16px;-moz-user-select:auto;user-select:auto;-webkit-user-select:auto}.bottle_find_input[data-v-237775e5] .face_el{display:inline-block;vertical-align:text-bottom}.bottle_find_input[data-v-237775e5]::-webkit-scrollbar{display:none}.bottle_find_input[data-v-237775e5]:empty::before{content:attr(placeholder);color:var(--font-color-place)}.bottle_find_input[data-v-237775e5]:focus:before{content:none}.needClick[data-v-237775e5]::before{position:absolute;color:#a9a9a9}

.container[data-v-51b6675c] {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--record-height);
}
.container span[data-v-51b6675c] {
  background: linear-gradient(to top, #fdc3ec 0%, #d8c2fc 100%);
  width: 2px;
  height: 20%;
  border-radius: calc(var(--record-height) * 0.2 * 0.5);
  margin-right: 4px;
  animation: loading-51b6675c 1s infinite linear;
  animation-delay: calc(0.2s * var(--d));
}
.container span[data-v-51b6675c]:last-child {
  margin-right: 0px;
}
@keyframes loading-51b6675c {
0% {
    background-image: linear-gradient(to right, #fdc3ec 0%, #d8c2fc 100%);
    height: 20%;
    border-radius: calc(var(--record-height) * 0.2 * 0.5);
}
50% {
    background-image: linear-gradient(to top, #fdc3ec 0%, #d8c2fc 100%);
    height: 100%;
    border-radius: calc(var(--record-height) * 1 * 0.5);
}
100% {
    background-image: linear-gradient(to top, #fdc3ec 0%, #d8c2fc 100%);
    height: 20%;
    border-radius: calc(var(--record-height) * 0.2 * 0.5);
}
}


.recordContainer {
  position: relative;
  margin: 0 40px;
  width: 80px;
  height: 80px;
  border-radius: 80px;
  cursor: pointer;
  background-color: var(--color-pop);
}
.recodingCenter {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  animation: toRecording 0.6s;
  -webkit-animation: toRecording 0.6s;
  background-color: var(--main-theme);
}
.recordBt {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  border: 2px solid rgba(255, 255, 255, 0.8);
}
.recordNoYet {
  background: linear-gradient(var(--main-theme), var(--main-theme-light));
}
.recording {
  border: unset;
}
.recordEnd {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  background: transparent;
}
.handleBt {
  width: 72px;
  height: 40px;
  border-radius: 36px;
}
@keyframes toRecording {
from {
    width: 80px;
    height: 80px;
}
to {
    width: 32px;
    height: 32px;
}
}



.bottle-card-wrap[data-v-79fdc25c]{margin:0 4px;background-color:var(--card10);border-radius:12px;position:relative;overflow:visible !important}.bottle-card-wrap[data-v-79fdc25c]::before,.bottle-card-wrap[data-v-79fdc25c]::after{content:"";position:absolute;width:24px;height:24px;border:3px solid #333}.bottle-card-wrap[data-v-79fdc25c]::before{top:0;left:0;border-right:none;border-bottom:none;border-top-left-radius:8px}.bottle-card-wrap[data-v-79fdc25c]::after{bottom:0;right:0;border-left:none;border-top:none;border-bottom-right-radius:8px}.bottle_input[data-v-79fdc25c]{width:100%;position:relative;padding:8px 12px;font-size:14px;transition:all .3s;outline:none;color:var(--font-color-focus);white-space:pre-wrap;word-break:break-all;overflow:auto;-webkit-overflow-scrolling:touch;cursor:text;min-height:32px;height:140px;-moz-user-select:auto;user-select:auto;-webkit-user-select:auto}.bottle_input[data-v-79fdc25c] .face_el{display:inline-block;vertical-align:text-bottom;pointer-events:none}.bottle_input[data-v-79fdc25c]::-webkit-scrollbar{display:none}.bottle_input[data-v-79fdc25c]:empty::before{content:attr(placeholder);color:var(--font-color-place)}.bottle_input[data-v-79fdc25c]:focus:before{content:none}.needClick[data-v-79fdc25c]::before{position:absolute;color:#a9a9a9}.check-button[data-v-79fdc25c]{font-size:.7rem;line-height:1}

.filterItem[data-v-3494c5cc] {
  color: #999;
  margin-top: 32px;
  font-size: 0.8rem;
  cursor: pointer;
}
.icon_container[data-v-3494c5cc] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.genderBox[data-v-3494c5cc] {
  width: 6rem;
  height: 7rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.filterGenderSelected[data-v-3494c5cc] {
  border: 2px solid var(--main-theme);
  background-color: rgba(96, 10, 255, 0.3);
}
.filterGenderUnselected[data-v-3494c5cc] {
  background-color: var(--card0);
  border: 2px solid transparent;
}
.filter_gender_icon_container[data-v-3494c5cc] {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}



.home-func-row[data-v-448800e0] {
  display: flex;
  width: 100%;
  gap: 8px;
  height: 15rem;
}
.func-card[data-v-448800e0] {
  width: 100%;
  border-radius: 1.1rem;
  padding: 16px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  flex: 1;
}
.card-filter-btn[data-v-448800e0] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 8px 6px 12px;
  border-bottom-left-radius: 28px;
  z-index: 99;
  box-shadow: 1px 4px 16px rgba(10, 10, 10, 0.3);
}
.filter-inner[data-v-448800e0] {
  display: flex;
  align-items: center;
}
.bottle-card[data-v-448800e0] {
  background: rgb(4, 111, 189);
  --filter-bg: #0097ff;
  z-index: 10;
}
.seek-card[data-v-448800e0] {
  background: #af4c0b;
  --filter-bg: #ff6d00;
}
.match-card[data-v-448800e0] {
  background: #531095;
  --filter-bg: #9900ff;
}
.card-filter-btn[data-v-448800e0] {
  background-color: var(--filter-bg);
}
.card-content[data-v-448800e0] {
  position: relative;
  z-index: 2;
}
.function-title[data-v-448800e0] {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.desc[data-v-448800e0] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.65rem;
  margin-top: 4px;
  line-height: 1.4;
}
.online-row[data-v-448800e0] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.online-point[data-v-448800e0] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4cd964;
  margin: 2px 0 0 0;
}
.avatar-tip[data-v-448800e0] {
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
}
/* 右下角装饰图片 */
.card-decorate[data-v-448800e0] {
  position: absolute;
  bottom: 4px;
  right: 16px;
  height: 4.6rem;
  z-index: 1;
}
.bottle-decorate[data-v-448800e0] {
  height: 8rem;
  transform: rotate(30deg);
  bottom: -6px;
  right: -22px;
}
.seek-decorate[data-v-448800e0] {
  transform: rotate(-30deg);
}
.match-decorate[data-v-448800e0] {
  transform: rotate(10deg);
}
.catch-btn[data-v-448800e0] {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #000000;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  padding: 12px 14px;
  border-radius: 88px;
  z-index: 20;
}



.homeContainer {
  background-position: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative
}
.bottle_send_button{
  height: 60px;
  width: 60px;
  font-size: 0.8rem;
  border-radius: 64px;
  background: #4b03d6;
  display: flex;
  align-items: center;
}


.snsContent{
  font-size: 14px;
  color: var(--font-color-focus);
  margin: 8px 0 12px 0;
}


.topTip{
  font-size: 12px;
  background-color: var(--main-theme-light);
  display: flex;
  align-items: center;
  color: var(--font-color-focus);
  padding: 6px 12px ;
}


.slider[data-v-4ef4b9be] {
  width: 100%;
  height: 80px;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.slide-box[data-v-4ef4b9be] {
  display: flex;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
.content[data-v-4ef4b9be] {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.remove[data-v-4ef4b9be] {
  display: flex;
  height: 100%;
  flex-shrink: 0;
  pointer-events: auto;
}
.stick[data-v-4ef4b9be] {
  width: 80px;
  height: 100%;
  background-color: #da7039;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.delete[data-v-4ef4b9be] {
  width: 80px;
  height: 100%;
  background-color: #e33c3c;
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


.preview-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--font-color-hint);
  font-size: 12px;
  margin: 4px 0 0 8px;
}
.preview-emoji {
  width: 13px;
  height: 13px;
  margin: 0 2px;
  vertical-align: text-bottom;
  display: inline-block;
}


.disconnect-wrap{
  width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  background-color: var(--main-theme);
  padding: 0 12px 0 12px;
  font-size: 0.7rem;
  line-height: 1;
  gap: 8px;
  color: var(--font-color-focus);
  box-sizing: border-box;
}
.reconnect-wrap{
  border-radius: 32px;
  padding: 4px 12px;
  background: var(--main-theme-dark);
  border: 2px solid var(--font-color-hint);
  cursor: pointer;
}

.image-grid[data-v-4d3ff2ee]{display:grid;margin:8px 0 12px 0;gap:6px}.grid-item[data-v-4d3ff2ee]{overflow:hidden;border-radius:8px;background:var(--card10)}.img-inner[data-v-4d3ff2ee]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;border-radius:8px}.grid-1[data-v-4d3ff2ee]{display:block;justify-content:start;width:100%}.grid-1 .grid-item[data-v-4d3ff2ee]{max-width:60%;min-height:120px;min-width:120px;display:flex;align-items:center;justify-content:center}.grid-1 .img-inner[data-v-4d3ff2ee]{width:100%;height:auto;-o-object-fit:cover;object-fit:cover}.grid-2[data-v-4d3ff2ee]{grid-template-columns:repeat(2, 1fr);max-width:90%}.grid-2 .grid-item[data-v-4d3ff2ee]{aspect-ratio:1/1}.grid-3[data-v-4d3ff2ee]{grid-template-columns:2fr 1fr;grid-template-rows:auto auto;max-width:90%}.grid-3 .grid-item[data-v-4d3ff2ee]:nth-child(1){grid-row:span 2;aspect-ratio:2/2.06;align-self:stretch}.grid-3 .grid-item[data-v-4d3ff2ee]:nth-child(2),.grid-3 .grid-item[data-v-4d3ff2ee]:nth-child(3){aspect-ratio:1/1}.grid-4[data-v-4d3ff2ee]{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 1fr);max-width:90%}.grid-4 .grid-item[data-v-4d3ff2ee]{aspect-ratio:1/1}.grid-multi[data-v-4d3ff2ee]{grid-template-columns:repeat(3, 1fr);max-width:90%}.grid-multi .grid-item[data-v-4d3ff2ee]{aspect-ratio:1/1}.block-placeholder[data-v-4d3ff2ee]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:8px;flex:1}.block-placeholder .tip-text[data-v-4d3ff2ee]{font-size:12px;color:var(--font-color-hint);text-align:center}

.like-burst[data-v-6d633d8e] {
  width: 80px;
  height: 80px;
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9
}
.ring[data-v-6d633d8e] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: ringBurst-6d633d8e 0.8s ease-out forwards;
}
.particle[data-v-6d633d8e] {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0;
  animation: burst-6d633d8e 0.8s ease-out forwards;
}
.p1[data-v-6d633d8e] {
  background: #ffd43b;
}
.p2[data-v-6d633d8e] {
  background: #ff6b6b;
}
.p3[data-v-6d633d8e] {
  background: #4ecdc4;
}
.p4[data-v-6d633d8e] {
  background: #a855f7;
}
.p5[data-v-6d633d8e] {
  background: #fb923c;
}
.p6[data-v-6d633d8e] {
  background: #22c55e;
}
.p7[data-v-6d633d8e] {
  background: #3b82f6;
}
.p8[data-v-6d633d8e] {
  background: #ec4899;
}
.p1[data-v-6d633d8e] {
  animation-delay: 0s;
}
.p2[data-v-6d633d8e] {
  animation-delay: 0.04s;
}
.p3[data-v-6d633d8e] {
  animation-delay: 0.08s;
}
.p4[data-v-6d633d8e] {
  animation-delay: 0.12s;
}
.p5[data-v-6d633d8e] {
  animation-delay: 0.16s;
}
.p6[data-v-6d633d8e] {
  animation-delay: 0.20s;
}
.p7[data-v-6d633d8e] {
  animation-delay: 0.24s;
}
.p8[data-v-6d633d8e] {
  animation-delay: 0.28s;
}
@keyframes burst-6d633d8e {
0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
}
100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.15);
    opacity: 0;
}
}
@keyframes ringBurst-6d633d8e {
0% {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}
100% {
    width: 72px;
    height: 72px;
    opacity: 0;
}
}
.p1[data-v-6d633d8e] {
  --tx: -32px;
  --ty: -24px;
}
.p2[data-v-6d633d8e] {
  --tx: 32px;
  --ty: -22px;
}
.p3[data-v-6d633d8e] {
  --tx: -36px;
  --ty: 24px;
}
.p4[data-v-6d633d8e] {
  --tx: 36px;
  --ty: 26px;
}
.p5[data-v-6d633d8e] {
  --tx: 0px;
  --ty: -36px;
}
.p6[data-v-6d633d8e] {
  --tx: 0px;
  --ty: 36px;
}
.p7[data-v-6d633d8e] {
  --tx: -26px;
  --ty: 8px;
}
.p8[data-v-6d633d8e] {
  --tx: 26px;
  --ty: -8px;
}


.sns-content {
  flex: 1;
  font-size: 14px;
  color: var(--font-color-focus);
  margin: 0 0 6px 0;
  padding: 0 12px;
  position: relative;
}
.time-card{
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(160, 160, 160,1);
  background-color:var(--card11);
  line-height: 1;
  letter-spacing: 1px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 6px 5px 6px;
  border-radius: 4px;
}
.line-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 8px 0 0;
}
.status-point {
  width: 0.7rem;
  height: 0.7rem;
  min-height:0.7rem;
  min-width: 0.7rem;
  border-radius: 0.7rem;
  background-color: #000;
  border:0.24rem solid #7424ff;
}
.dash-line {
  width: 1px;
  height: 100%;
  margin: 8px 0 0 0;
  border: 1px dashed rgba(122, 122, 122, 0.25);
}
.sns-bottom{
  margin-top: 12px;
  font-size: 0.7rem;
  color: var(--font-color-hint);
}
.filter-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 12px;
  background: rgba(40, 60, 100, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(140, 140, 140, 0.1);
  flex-direction: row;
  gap: 8px;
}


.menu-wrap[data-v-2153b010]{width:100%}.cell-title[data-v-2153b010]{font-size:1rem;color:var(--font-color-focus1);padding:16px;width:100%;text-align:center;display:flex;align-items:center;justify-content:center}.cell-title[data-v-2153b010]:not(:last-child){border-bottom:1px solid var(--border-color1)}.no-border[data-v-2153b010]{border-bottom:none}.permission-group[data-v-2153b010]{padding:12px}.permission-item[data-v-2153b010]{font-size:.92rem;padding:12px;width:100%;text-align:center;transition:background .2s}
.sns_input[data-v-07df1f57]{width:100%;position:relative;padding:8px 12px;font-size:14px;transition:all .3s;outline:none;color:var(--font-color-focus);white-space:pre-wrap;word-break:break-all;overflow:auto;-webkit-overflow-scrolling:touch;cursor:text;min-height:32px;-moz-user-select:auto;user-select:auto;-webkit-user-select:auto}.sns_input[data-v-07df1f57] .face_el{display:inline-block;vertical-align:text-bottom;pointer-events:none}.sns_input[data-v-07df1f57]::-webkit-scrollbar{display:none}.sns_input[data-v-07df1f57]:empty::before{content:attr(placeholder);color:var(--font-color-place)}.sns_input[data-v-07df1f57]:focus:before{content:none}.needClick[data-v-07df1f57]::before{position:absolute;color:#a9a9a9}.check-button[data-v-07df1f57]{font-size:.7rem;line-height:1}

.vip-board[data-v-62b74250] {
  border-radius: 24px;
  background-color: #130636;
  height: 24px;
  font-size: 0.8rem;
  padding: 0 12px;
  display: flex;
  gap: 6px;
  line-height: 1;
  align-items: center;
  box-shadow: 2px 3px 4px rgba(13,3,28,0.5);
  cursor: pointer;
}
.info-board[data-v-62b74250] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--font-color-hint);
  margin: 28px 12px 48px 12px;
}
.send_status_container[data-v-62b74250]{
  position: absolute;
  bottom: 36px;
  right: 28px;
}
.send_status_button[data-v-62b74250]{
  width: 44px;
  height: 44px;
  border-radius: 64px;
  background: #4e07d3;
  cursor: pointer;
}
.send-circle[data-v-62b74250] {
  will-change: transform, opacity;
  background-color: #5a1cd3;
  border-radius: 200px;
  animation: ripple-62b74250 3.2s infinite linear;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes ripple-62b74250 {
0% {
    width: 52px;
    height: 52px;
    opacity: 0;
}
50% {
    width: 60px;
    height: 60px;
    opacity: 0.3;
}
95% {
    width: 100px;
    height:100px;
    opacity: 0;
}
100% {
    width: 0;
    height: 0;
    opacity: 0;
}
}
.info-number[data-v-62b74250] {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--font-color-focus)
}



.sendMessageText {
  background: var(--main-theme);
  cursor: pointer;
  padding: 12px;
  color: var(--font-color-focus);
  border-radius: 1rem 0.1rem 1rem 1rem;
  max-width: 70%;
  word-break: break-all;
  font-size: 0.9rem;
}
.receiveMessageText {
  background: var(--card6);
  padding: 12px;
  border-radius: 0.1rem 1rem 1rem 1rem;
  max-width: 70%;
  word-break: break-all;
  color: var(--font-color-focus);
  font-size: 0.9rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.msg-face-inline {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: text-bottom;
  display: inline-block;
}
.msg-self-only-emoji,
.msg-other-only-emoji {
  width: 4rem;
  height: 4rem;
}
.msg-self-only-emoji {
  cursor: pointer;
}
.msg-self-only-emoji img,
.msg-other-only-emoji img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}


.topicCard{
  border-radius: 1rem;
  background: var(--card6);
  padding:12px 12px 8px 12px;
  width: 70%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 1.1rem;
}
.chatBottomTip {
  font-size: 0.6rem;
  color: var(--font-color-hint1);
  line-height: 0.6rem;
}


.bottleContainer[data-v-f68273d2] {
  padding: 8px 4px;
  border-radius: 1rem;
}


.readBox {
  margin-right: 6px;
  display: flex;
  align-items: flex-end;
}
.readText{
  font-size: 0.6rem;
  line-height: 0.7rem;
}



.chatItem {
  display: flex;
  margin: 16px 0;
  touch-action: pan-y;
}



.actionItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  color: var(--font-color-hint);
}
.actionItemImg {
  width: 52px;
  height: 52px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 46, 46, 1);
  border-radius: 8px;
  margin-bottom: 6px;
}



.custom_rich_input[data-v-6e5335e6]{position:relative;padding:12px 12px 4px 12px;font-size:14px;transition:all .3s;outline:none;color:var(--font-color-focus);white-space:pre-line;word-break:break-all;overflow:auto;-webkit-overflow-scrolling:touch;cursor:text;height:100%;min-height:44px;max-height:120px;-moz-user-select:auto;user-select:auto;-webkit-user-select:auto;box-sizing:border-box;width:100%;border-radius:4px;line-height:20px}.custom_rich_input[data-v-6e5335e6] .face_el{display:inline-block;vertical-align:text-bottom;pointer-events:none}.custom_rich_input[data-v-6e5335e6]::-webkit-scrollbar{display:none}.needClick[data-v-6e5335e6]::before{position:absolute;color:#a9a9a9}

.charge{
  border-radius: 32px;
  height: 28px;
  background: rgba(46, 46, 46, 1);
  padding: 0 12px;
  color: var(--main-theme-light1);
}
.giftItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  color: var(--font-color-focus1);
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 8px;
  margin: 8px 4px;
  border: 1.5px solid transparent;
}
.giftBorder {
  border: 1.5px solid var(--main-theme-light1);
}



.footerCenter {
  flex: 1;
  background-color: rgba(36, 36, 36, 1);
  border-radius: 4px;
  height: 100%;
  margin: 0 10px;
  display: flex;
  align-items: center
}
.chat_send_button {
  height: 36px;
  width: 68px
}



/* 顶部警告条（flex 左右分区，核心！） */
.warning-bar[data-v-10e65a20] {
  width: 100%;
  height: 30px;
  background-color: rgba(172,69, 239, 0.3);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
}

/* 左侧滚动区域（占满剩余宽度，不覆盖按钮） */
.marquee-wrap[data-v-10e65a20] {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 10px;
  background: transparent;
}

/* 跑马灯文字动画 */
.marquee-text[data-v-10e65a20] {
  display: inline-block;
  color: var(--font-color-focus1);
  font-size: 13px;
  margin-bottom: 6px;
  padding-left: 100%;
  animation: marquee-10e65a20 12s linear infinite;
}
@keyframes marquee-10e65a20 {
0% { transform: translateX(0);
}
100% { transform: translateX(-100%);
}
}

/* 右侧按钮固定区域 */
.close-area[data-v-10e65a20] {
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 圆形关闭按钮（清晰不遮挡） */
.close-btn[data-v-10e65a20] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


.loadMore {
  font-size: 13px;
  color: var(--main-theme-light1);
  text-align: center;
  width: 100%;
  margin-top: 16px;
}


.leftBar {
  width: 68px;
  height: 68px;
}
.leftMenu{
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  cursor: pointer;
}
.leftBoard{
  height: 100%;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: solid 1px var(--border-color);
  padding: 40px 12px 20px 12px;
  border-right: var(--border2);
  box-sizing: border-box;
}
.leftBarText {
  padding: 0 28px;
  height:  68px;
  width: unset;
}


.cardVip[data-v-d703d2c6] {
  border-radius: 1rem;
  width: 100%;
  padding: 6px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 500;
  font-size: 10px;
  position: relative;
}
.giveTag[data-v-d703d2c6] {
  position: absolute;
  top: -0.7rem;
  left: 0;
  right: 0;
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.5rem;
  color: #fff;
  line-height: 0.7rem;
  height: 1.4rem;
  background-color: rgb(117, 81, 25);
  text-align: center;
  padding: 0px 6px;
  border-radius: 6px;
  box-sizing: border-box;
}
.recommendTag[data-v-d703d2c6]{
   background: linear-gradient(#a71fb8, #6109be);
}
.recommendColor[data-v-d703d2c6]{
  color: #ad44ff !important;
  font-weight: 800;
}




.login-board {
  box-sizing: border-box;
  padding: 24px;
  background:  #202020;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--font-color-hint);
}

.video-wrap[data-v-9f92071e]{width:100%;background:#000;padding:4px;border-radius:20px}

.complainItem{
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px;
  color: var(--font-color-link);
  font-weight: bold;
  width: 100%;
}


.fit[data-v-482380ba]{font-size:12px;line-height:14px;padding:4px 12px;border-radius:50px;color:var(--font-color-focus1);background:linear-gradient(to right, #4a0cef, #296dfb);opacity:.7}.bottomBt[data-v-482380ba]{border-radius:32px;height:48px}.seekTagWrapper[data-v-482380ba]{display:flex;align-items:center;gap:4px;border-radius:24px;padding:6px 12px;border:1px solid hsla(0,0%,80%,.15);font-size:.7rem;color:var(--font-color-hint);line-height:.7rem;width:-moz-fit-content;width:fit-content}

.gender-box {
  width: 6rem;
  height: 7rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gender_icon_container {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.genderSelected {
  border: 2px solid var(--main-theme);
  background-color: rgba(130, 62, 255, 0.2);
}
.genderUnselected {
  background-color: var(--card6);
  border: 2px solid transparent;
}

.pay-container[data-v-796af043]{padding:20px 24px 0;box-sizing:border-box}.qrcode-box[data-v-796af043]{width:280px;min-height:280px;margin:0 auto;padding:16px;background:#e1e1e1;border-radius:12px;box-shadow:0 2px 12px rgba(7,193,96,.3);display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.qrcode-img[data-v-796af043]{width:230px;height:230px;border-radius:8px}.pay-tip[data-v-796af043]{display:flex;align-items:center;margin-top:16px;gap:8px;font-size:14px;color:#333}.wait-tip[data-v-796af043]{text-align:center;margin-top:18px;font-size:12px;color:#999;line-height:1.5}.pay-btn-group[data-v-796af043]{margin-top:26px;text-align:center;color:#2191ed;cursor:pointer}

.overlay-content[data-v-352db45e] {
  padding: 32px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
}


.common-wait-root[data-v-d47c043e] {
  position: fixed;
  top: 4px;
  left: 0;
  width: 100dvw;
  z-index: 9999;
  pointer-events: none;
}

/* 全局遮罩，只存在一层！ */
.global-overlay[data-v-d47c043e] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  pointer-events: auto;
  z-index: -1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.wait-list-container[data-v-d47c043e] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.common-wait-item[data-v-d47c043e] {
  will-change: transform, opacity;
  animation: dropSpringIn-d47c043e 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  margin-top: 12px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.common-wait-dialog[data-v-d47c043e] {
  padding: 6px 18px;
  max-width: 400px;
  background: rgba(37, 32, 87, 0.5);
  border-radius: 48px;
  border: 2px solid rgba(44, 26, 94, 0.9);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  pointer-events: auto;
  transition: all 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: center top;
  will-change: width, height, border-radius, padding, background, transform;
  overflow: hidden;
}

/* mini模式（收缩状态） */
.common-wait-dialog.mini-top-mode[data-v-d47c043e] {
  width: 65%;
  min-width: 280px;
  flex-direction: row;
  justify-content: flex-start;
}

/* 展开状态（移除mini-top-mode class） */
.common-wait-dialog[data-v-d47c043e]:not(.mini-top-mode) {
  width: 75%;
  min-width: 280px;
  padding: 12px;
  background: rgba(37, 40, 67, 0.35);
  border-radius: 20px;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  align-items: center;
}
.ripple-wrap[data-v-d47c043e] {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-shrink: 0;
  overflow: hidden;
}

/* 展开大图尺寸 */
.common-wait-dialog:not(.mini-top-mode) .ripple-wrap[data-v-d47c043e] {
  width: 130px;
  height: 130px;
}

/* 1. mini状态才启用旋转环，展开直接隐藏 */
.mini-top-mode .border-spinner[data-v-d47c043e] {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#4106d5, #7a42ff, #b288ff, #4106d5);
  animation: rotateBorder-d47c043e 2.5s linear infinite;
  z-index: 1;
}

/* 2. 仅mini下控制粗细，权重拉高 */
.mini-top-mode .border-spinner[data-v-d47c043e]::before {
  content: '';
  position: absolute;
  inset: 6px; /* 数字越大边框越细：6px=超细；5px偏细；4px适中；3px偏粗 */
  border-radius: 50%;
  background: rgba(37, 32, 87, 0.5);
  z-index: 2;
}

/* 展开状态彻底删掉旋转圆环 */
.common-wait-dialog:not(.mini-top-mode) .border-spinner[data-v-d47c043e] {
  display: none;
}

/* 中心图标永远置顶静止 */
.center-icon[data-v-d47c043e] {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg) !important;
}
.mini-top-mode .center-icon img[data-v-d47c043e] {
  width: 34px !important;
  height: 34px !important;
}
.common-wait-dialog:not(.mini-top-mode) .center-icon img[data-v-d47c043e] {
  width: 56px !important;
  height: 56px !important;
}

/* mini模式隐藏原有扩散波纹，互不遮挡 */
.mini-top-mode .ripple[data-v-d47c043e] {
  display: none;
}

/* 展开状态波纹正常展示 */
.common-wait-dialog:not(.mini-top-mode) .ripple[data-v-d47c043e] {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  border: 3px solid rgba(65, 6, 213, 0.9);
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
  animation: rippleExpand-d47c043e 1.8s infinite linear;
  z-index: 0;
}
.ripple-1[data-v-d47c043e] {
  animation-delay: 0s;
}
.ripple-2[data-v-d47c043e] {
  animation-delay: 0.6s;
}
.ripple-3[data-v-d47c043e] {
  animation-delay: 1.2s;
}
@keyframes rippleExpand-d47c043e {
0% {
    transform: scale(0);
    opacity: 0;
}
15% {
    transform: scale(0.35);
    opacity: 0.9;
}
100% {
    transform: scale(0.95);
    opacity: 0;
}
}
@keyframes rotateBorder-d47c043e {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.ripple[data-v-d47c043e] {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  border: 3px solid rgba(65, 6, 213, 0.9);
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
  animation: rippleExpand-d47c043e 1.8s infinite linear;
  z-index: 0;
}
.ripple-1[data-v-d47c043e] {
  animation-delay: 0s;
}
.ripple-2[data-v-d47c043e] {
  animation-delay: 0.6s;
}
.ripple-3[data-v-d47c043e] {
  animation-delay: 1.2s;
}
@keyframes rippleExpand-d47c043e {
0% {
    transform: scale(0);
    opacity: 0;
}
15% {
    transform: scale(0.35);
    opacity: 0.9;
}
100% {
    transform: scale(0.95);
    opacity: 0;
}
}
.text-group[data-v-d47c043e] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: all 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex: 1;
  overflow: hidden;
}
.common-wait-dialog:not(.mini-top-mode) .text-group[data-v-d47c043e] {
  align-items: center;
}
.title[data-v-d47c043e] {
  font-size: 0.9rem;
  color: var(--font-color-focus);
  font-weight: 500;
  transition: font-size 0.42s;
  white-space: nowrap;
}
.desc[data-v-d47c043e] {
  font-size: 0.7rem;
  color: var(--font-color-place);
  font-weight: 400;
  transition: font-size 0.42s;
  white-space: nowrap;
}
.common-wait-dialog:not(.mini-top-mode) .title[data-v-d47c043e] {
  font-size: 1.1rem;
}
.common-wait-dialog:not(.mini-top-mode) .desc[data-v-d47c043e] {
  font-size: 0.8rem;
}
.cancel-btn[data-v-d47c043e] {
  font-size: 0.7rem;
  padding: 0 12px;
  height: 32px;
  background: rgba(66, 65, 80, 0.2);
  border-radius: 999px;
  color: var(--font-color-hint1);
  line-height: 1;
  cursor: pointer;
  transition: all 0.42s;
  flex-shrink: 0;
}
.common-wait-dialog:not(.mini-top-mode) .cancel-btn[data-v-d47c043e] {
  padding: 0 32px;
  height: 44px;
  font-size: 0.9rem;
}
.cancel-btn[data-v-d47c043e]:active {
  background: rgba(66, 65, 80, 0.6);
}
@keyframes dropSpringIn-d47c043e {
from {
    opacity: 0;
    transform: translateY(-30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.background {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  position: relative;
}
.mainLayout {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.homeLayout{
  max-width: 500px;
  min-width: 280px;
  height: 100%;
  width: 100%;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pcMode{
  border-radius: 20px;
  margin: 20px;
  height: 90%;
  min-height: 400px;
  max-height: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200, 200, 200, 0.1);
}


.baseLayout {
  overflow-x: hidden;
  overflow-y: hidden;
  top: 0;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}


.avatarContainer[data-v-210afaf0] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}